From 968458fdf6f282864826bc7279b17bf33b220f1d Mon Sep 17 00:00:00 2001 From: Casey Eickhoff Date: Thu, 19 Dec 2024 15:23:57 -0700 Subject: [PATCH 1/9] chore: updated prettier, stylelint, and eslint to align with css --- .editorconfig | 7 - .eslintrc.json | 301 +- .prettierrc.yaml | 11 +- .stylelintrc.json | 52 +- .vscode/extensions.json | 23 +- .vscode/settings.json | 193 +- config/license.js | 1 + package.json | 891 +- packages/.eslintrc.json | 751 +- packages/accordion/src/Accordion.ts | 257 +- .../src/accordion-item-overrides.css | 40 +- .../accordion/src/accordion-overrides.css | 582 +- .../accordion/src/spectrum-accordion-item.css | 530 +- packages/accordion/src/spectrum-accordion.css | 66 +- .../action-bar/src/action-bar-overrides.css | 116 +- .../action-bar/src/spectrum-action-bar.css | 249 +- .../src/action-button-overrides.css | 1080 +- .../src/spectrum-action-button.css | 886 +- .../src/action-group-overrides.css | 116 +- .../src/spectrum-action-group.css | 332 +- .../src/alert-banner-overrides.css | 58 +- .../src/spectrum-alert-banner.css | 247 +- .../src/alert-dialog-overrides.css | 100 +- .../src/spectrum-alert-dialog.css | 226 +- packages/asset/src/asset-overrides.css | 18 +- packages/asset/src/spectrum-asset.css | 78 +- packages/avatar/src/avatar-overrides.css | 84 +- packages/avatar/src/spectrum-avatar.css | 202 +- packages/badge/src/badge-overrides.css | 434 +- packages/badge/src/spectrum-badge.css | 407 +- .../breadcrumbs/src/breadcrumbs-overrides.css | 292 +- .../src/spectrum-breadcrumbs-item.css | 425 +- .../breadcrumbs/src/spectrum-breadcrumbs.css | 124 +- .../src/button-group-overrides.css | 66 +- .../src/spectrum-button-group.css | 30 +- packages/button/src/ButtonBase.ts | 483 +- packages/button/src/button-overrides.css | 2088 ++- packages/button/src/spectrum-button.css | 1033 +- packages/card/src/card-overrides.css | 172 +- packages/card/src/spectrum-card.css | 1335 +- packages/checkbox/src/checkbox-overrides.css | 250 +- packages/checkbox/src/spectrum-checkbox.css | 1153 +- .../src/clear-button-overrides.css | 166 +- .../src/spectrum-clear-button.css | 156 +- .../src/close-button-overrides.css | 182 +- .../src/spectrum-close-button.css | 654 +- .../src/coach-indicator-overrides.css | 154 +- .../coachmark/src/coachmark-overrides.css | 150 +- .../src/spectrum-coach-indicator.css | 374 +- packages/coachmark/src/spectrum-coachmark.css | 348 +- .../color-area/src/color-area-overrides.css | 32 +- .../color-area/src/spectrum-color-area.css | 157 +- .../src/color-handle-overrides.css | 66 +- .../src/spectrum-color-handle.css | 242 +- .../color-loupe/src/color-loupe-overrides.css | 68 +- .../color-loupe/src/spectrum-color-loupe.css | 145 +- .../src/color-slider-overrides.css | 30 +- .../src/spectrum-color-slider.css | 212 +- .../color-wheel/src/color-wheel-overrides.css | 30 +- .../color-wheel/src/spectrum-color-wheel.css | 223 +- packages/combobox/src/combobox-overrides.css | 430 +- packages/combobox/src/spectrum-combobox.css | 941 +- .../src/contextual-help-overrides.css | 32 +- .../src/spectrum-contextual-help.css | 102 +- packages/dialog/src/dialog-overrides.css | 112 +- packages/dialog/src/spectrum-dialog.css | 896 +- packages/divider/src/divider-overrides.css | 54 +- packages/divider/src/spectrum-divider.css | 136 +- packages/dropzone/src/dropzone-overrides.css | 170 +- packages/dropzone/src/spectrum-dropzone.css | 427 +- .../field-group/src/field-group-overrides.css | 8 +- .../field-group/src/spectrum-field-group.css | 20 +- .../field-label/src/field-label-overrides.css | 214 +- .../field-label/src/spectrum-field-label.css | 163 +- .../help-text/src/help-text-overrides.css | 190 +- packages/help-text/src/spectrum-help-text.css | 216 +- packages/icon/src/icon-arrow-overrides.css | 56 +- packages/icon/src/icon-asterisk-overrides.css | 8 +- .../icon/src/icon-checkmark-overrides.css | 16 +- packages/icon/src/icon-chevron-overrides.css | 56 +- .../src/icon-corner-triangle-overrides.css | 8 +- packages/icon/src/icon-cross-overrides.css | 14 +- packages/icon/src/icon-dash-overrides.css | 16 +- packages/icon/src/icon-overrides.css | 14 +- packages/icon/src/spectrum-icon-arrow.css | 6 +- packages/icon/src/spectrum-icon-chevron.css | 6 +- packages/icon/src/spectrum-icon.css | 80 +- packages/icons/src/icons-large.svg.ts | 3 +- packages/icons/src/icons-medium.svg.ts | 3 +- .../src/illustratedmessage-overrides.css | 126 +- .../src/spectrum-illustratedmessage.css | 212 +- .../src/infield-button-overrides.css | 370 +- .../src/spectrum-infield-button.css | 707 +- packages/link/src/link-overrides.css | 54 +- packages/link/src/spectrum-link.css | 259 +- packages/menu/src/menu-overrides.css | 734 +- packages/menu/src/spectrum-checkmark.css | 241 +- packages/menu/src/spectrum-chevron.css | 171 +- packages/menu/src/spectrum-menu-divider.css | 190 +- packages/menu/src/spectrum-menu-item.css | 1449 +- .../menu/src/spectrum-menu-sectionHeading.css | 243 +- packages/menu/src/spectrum-menu.css | 389 +- packages/meter/src/meter-overrides.css | 42 +- packages/meter/src/progress-bar-overrides.css | 176 +- packages/meter/src/spectrum-meter.css | 60 +- packages/meter/src/spectrum-progress-bar.css | 342 +- packages/modal/src/modal-overrides.css | 44 +- packages/modal/src/spectrum-modal-wrapper.css | 62 +- packages/modal/src/spectrum-modal.css | 292 +- .../src/number-field-overrides.css | 210 +- .../src/spectrum-number-field.css | 869 +- .../src/picker-button-overrides.css | 270 +- .../src/spectrum-picker-button.css | 539 +- packages/picker/src/picker-overrides.css | 520 +- packages/picker/src/spectrum-picker.css | 1377 +- packages/popover/src/popover-overrides.css | 46 +- packages/popover/src/spectrum-popover.css | 597 +- .../src/progress-bar-overrides.css | 182 +- .../src/spectrum-progress-bar.css | 342 +- .../src/progress-circle-overrides.css | 56 +- .../src/spectrum-progress-circle.css | 948 +- packages/radio/src/radio-overrides.css | 330 +- packages/radio/src/spectrum-radio.css | 678 +- packages/search/src/search-overrides.css | 182 +- packages/search/src/spectrum-search.css | 458 +- .../sidenav/src/sidenav-heading-overrides.css | 304 +- .../sidenav/src/sidenav-item-overrides.css | 304 +- packages/sidenav/src/sidenav-overrides.css | 304 +- .../sidenav/src/spectrum-sidenav-heading.css | 82 +- .../sidenav/src/spectrum-sidenav-item.css | 568 +- packages/sidenav/src/spectrum-sidenav.css | 16 +- packages/slider/src/slider-overrides.css | 370 +- packages/slider/src/spectrum-slider.css | 1593 +- .../split-view/src/spectrum-split-view.css | 621 +- .../split-view/src/split-view-overrides.css | 80 +- .../src/spectrum-status-light.css | 372 +- .../src/status-light-overrides.css | 320 +- packages/swatch/src/spectrum-swatch-group.css | 36 +- packages/swatch/src/spectrum-swatch.css | 624 +- .../swatch/src/swatch-group-overrides.css | 18 +- packages/swatch/src/swatch-overrides.css | 146 +- packages/switch/src/spectrum-switch.css | 1084 +- packages/switch/src/switch-overrides.css | 300 +- packages/table/src/spectrum-table-body.css | 40 +- packages/table/src/spectrum-table-cell.css | 202 +- .../src/spectrum-table-checkbox-cell.css | 368 +- .../table/src/spectrum-table-head-cell.css | 355 +- packages/table/src/spectrum-table-head.css | 8 +- packages/table/src/spectrum-table-row.css | 874 +- packages/table/src/spectrum-table.css | 568 +- packages/table/src/table-overrides.css | 840 +- packages/tabs/src/spectrum-tab.css | 236 +- packages/tabs/src/spectrum-tabs-sizes.css | 102 +- packages/tabs/src/spectrum-tabs.css | 427 +- packages/tabs/src/tabs-overrides.css | 114 +- packages/tabs/src/tabs-sizes-overrides.css | 108 +- packages/tags/src/spectrum-tag.css | 1305 +- packages/tags/src/spectrum-tags.css | 26 +- packages/tags/src/tag-overrides.css | 660 +- packages/tags/src/tags-overrides.css | 12 +- packages/textfield/src/spectrum-textfield.css | 1320 +- .../textfield/src/textfield-overrides.css | 780 +- packages/thumbnail/src/spectrum-thumbnail.css | 545 +- packages/toast/src/spectrum-toast.css | 432 +- packages/toast/src/toast-overrides.css | 112 +- packages/tooltip/src/spectrum-tooltip.css | 1073 +- packages/tooltip/src/tooltip-overrides.css | 112 +- packages/tray/src/spectrum-tray-wrapper.css | 12 +- packages/tray/src/spectrum-tray.css | 226 +- packages/tray/src/tray-overrides.css | 34 +- packages/underlay/src/spectrum-underlay.css | 162 +- packages/underlay/src/underlay-overrides.css | 40 +- .../setCustomElementsManifestWithOptions.js | 39 +- stylelint.config.js | 193 + tools/.eslintrc.json | 239 +- .../src/is-opacity-checkerboard-overrides.css | 20 +- .../src/opacity-checkerboard-overrides.css | 20 +- .../src/spectrum-is-opacity-checkerboard.css | 64 +- .../src/spectrum-opacity-checkerboard.css | 64 +- tools/styles/express/spectrum-core-global.css | 6424 ++++--- tools/styles/express/spectrum-scale-large.css | 554 +- .../styles/express/spectrum-scale-medium.css | 556 +- tools/styles/express/spectrum-theme-dark.css | 592 +- tools/styles/express/spectrum-theme-light.css | 592 +- tools/styles/fonts.css | 1770 +- tools/styles/spectrum-core-global.css | 6418 ++++--- tools/styles/spectrum-scale-large.css | 576 +- tools/styles/spectrum-scale-medium.css | 566 +- tools/styles/spectrum-theme-dark.css | 576 +- tools/styles/spectrum-theme-darkest.css | 576 +- tools/styles/spectrum-theme-light.css | 576 +- tools/styles/spectrum-theme-lightest.css | 576 +- .../spectrum-two/spectrum-core-global.css | 6418 ++++--- .../spectrum-two/spectrum-scale-large.css | 576 +- .../spectrum-two/spectrum-scale-medium.css | 566 +- .../spectrum-two/spectrum-theme-dark.css | 576 +- .../spectrum-two/spectrum-theme-light.css | 576 +- tools/styles/src/body-overrides.css | 30 +- tools/styles/src/code-overrides.css | 18 +- tools/styles/src/detail-overrides.css | 22 +- tools/styles/src/heading-overrides.css | 78 +- tools/styles/src/spectrum-body.css | 308 +- tools/styles/src/spectrum-code.css | 176 +- tools/styles/src/spectrum-detail.css | 490 +- tools/styles/src/spectrum-heading.css | 696 +- tools/styles/src/spectrum-lang.css | 566 +- tools/styles/src/spectrum-typography.css | 50 +- tools/styles/tokens-v2/dark-vars.css | 2006 ++- tools/styles/tokens-v2/global-vars.css | 2082 ++- tools/styles/tokens-v2/index.css | 8588 +++++----- tools/styles/tokens-v2/large-vars.css | 1244 +- tools/styles/tokens-v2/light-vars.css | 2010 ++- tools/styles/tokens-v2/medium-vars.css | 1246 +- .../styles/tokens-v2/spectrum/global-vars.css | 13627 ++++++++------- tools/styles/tokens/dark-vars.css | 982 +- tools/styles/tokens/darkest-vars.css | 982 +- .../tokens/express/custom-large-vars.css | 10 +- .../tokens/express/custom-medium-vars.css | 10 +- tools/styles/tokens/express/custom-vars.css | 2 +- tools/styles/tokens/express/dark-vars.css | 18 +- tools/styles/tokens/express/darkest-vars.css | 18 +- tools/styles/tokens/express/global-vars.css | 13717 ++++++++------- tools/styles/tokens/express/large-vars.css | 126 +- tools/styles/tokens/express/light-vars.css | 20 +- tools/styles/tokens/express/medium-vars.css | 126 +- tools/styles/tokens/global-vars.css | 1894 ++- tools/styles/tokens/large-vars.css | 982 +- tools/styles/tokens/light-vars.css | 986 +- tools/styles/tokens/medium-vars.css | 982 +- .../tokens/spectrum/custom-large-vars.css | 214 +- .../tokens/spectrum/custom-medium-vars.css | 214 +- tools/styles/tokens/spectrum/custom-vars.css | 80 +- tools/styles/tokens/spectrum/dark-vars.css | 174 +- tools/styles/tokens/spectrum/darkest-vars.css | 176 +- tools/styles/tokens/spectrum/global-vars.css | 13829 ++++++++-------- tools/styles/tokens/spectrum/large-vars.css | 310 +- tools/styles/tokens/spectrum/light-vars.css | 174 +- tools/styles/tokens/spectrum/medium-vars.css | 310 +- tools/styles/typography.css | 1770 +- tsconfig.json | 51 +- yarn.lock | 326 +- 241 files changed, 77777 insertions(+), 79223 deletions(-) delete mode 100755 .editorconfig create mode 100644 stylelint.config.js diff --git a/.editorconfig b/.editorconfig deleted file mode 100755 index dc0858c028..0000000000 --- a/.editorconfig +++ /dev/null @@ -1,7 +0,0 @@ -root = true - -[*] -end_of_line = lf -indent_style = space -indent_size = 4 -charset = utf-8 \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json index b00217f622..2a6a614611 100755 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,93 +1,212 @@ { - "root": true, - "plugins": [ - "@typescript-eslint", - "notice", - "@spectrum-web-components", - "import", - "require-extensions", - "@stylistic" - ], - "env": { - "browser": true, - "node": true, - "es6": true - }, - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": 2020, - "sourceType": "module" - }, - "rules": { - "curly": ["error", "all"], - "no-debugger": 2, - "no-console": [ - "error", - { - "allow": ["warn", "error"] - } - ], - "import/extensions": [ - "error", - "ignorePackages", - { - "ts": "never" - } - ], - "import/prefer-default-export": "off", - "@spectrum-web-components/prevent-argument-names": [ - "error", - ["e", "ev", "evt", "err"] - ], - "notice/notice": [ - "error", - { - "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.", - "templateFile": "config/license.js" - } - ], - "sort-imports": [ - "error", - { - "ignoreCase": true, - "ignoreDeclarationSort": true, - "ignoreMemberSort": false, - "allowSeparatedGroups": false - } - ], - "lit-a11y/click-events-have-key-events": [ - "error", - { - "allowList": [ - "sp-button", - "sp-action-button", - "sp-checkbox", - "sp-radio", - "sp-switch", - "sp-menu-item", - "sp-clear-button", - "sp-underlay" - ] - } - ], - "@stylistic/padding-line-between-statements": [ - "error", - { "blankLine": "always", "prev": "*", "next": "return" } - ] - }, - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:prettier/recommended", - "plugin:lit-a11y/recommended", - "plugin:require-extensions/recommended" - ], - "overrides": [ - { - "files": ["tasks/*", "scripts/*"], - "rules": { - "no-console": ["off"] - } - } - ] + "env": { + "browser": true, + "es6": true, + "node": true + }, + "extends": [ + "plugin:prettier/recommended", + "plugin:lit-a11y/recommended", + "plugin:require-extensions/recommended", + "eslint:recommended", + "plugin:@typescript-eslint/recommended" + ], + "overrides": [ + { + "files": ["tasks/*", "scripts/*"], + "rules": { + "no-console": ["off"] + } + }, + { + "extends": ["plugin:jsonc/recommended-with-jsonc"], + "files": ["*.json"], + "parser": "jsonc-eslint-parser", + "rules": { + "jsonc/sort-keys": [ + "warn", + { + // Hits the all properties + "hasProperties": ["type"], + "order": [ + "type", + "properties", + "items", + "required", + "minItems", + "additionalProperties", + "additionalItems" + ], + "pathPattern": ".*" + }, + { + "order": { "type": "asc" }, + "pathPattern": ".*" + } + ], + "notice/notice": 0 + } + }, + { + "files": ["package.json"], + "rules": { + "jsonc/sort-keys": [ + "warn", + { + "order": [ + "$schema", + "private", + "name", + "version", + "description", + "license", + "author", + "maintainers", + "contributors", + "homepage", + "repository", + "bugs", + "type", + "exports", + "main", + "module", + "browser", + "man", + "preferGlobal", + "bin", + "files", + "directories", + "scripts", + "config", + "sideEffects", + "types", + "typings", + "workspaces", + "resolutions", + "dependencies", + "bundleDependencies", + "bundledDependencies", + "peerDependencies", + "peerDependenciesMeta", + "optionalDependencies", + "devDependencies", + "keywords", + "engines", + "engineStrict", + "os", + "cpu", + "publishConfig" + ], + "pathPattern": "^$" + }, + { + "order": ["type", "url", "directory"], + "pathPattern": "^repository$" + }, + { + "order": { "type": "asc" }, + "pathPattern": ".*" + } + ] + } + }, + { + "files": [ + "packages/*/stories/*.js", + "storybook/*.js", + "storybook/**/*.js" + ], + "parserOptions": { + "ecmaFeatures": { + "impliedStrict": true + }, + "ecmaVersion": "latest", + "sourceType": "module" + } + } + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": 2020, + "sourceType": "module" + }, + "plugins": [ + "@spectrum-web-components", + "@stylistic", + "@typescript-eslint", + "import", + "notice", + "require-extensions" + ], + "root": true, + "rules": { + "@spectrum-web-components/prevent-argument-names": [ + "error", + ["e", "ev", "evt", "err"] + ], + "@stylistic/padding-line-between-statements": [ + "error", + { "blankLine": "always", "next": "return", "prev": "*" } + ], + "brace-style": ["warn", "stroustrup", { "allowSingleLine": true }], + "curly": ["error", "all"], + "func-call-spacing": ["warn", "never"], + "import/extensions": [ + "error", + "ignorePackages", + { + "ts": "never" + } + ], + "import/prefer-default-export": "off", + "indent": [ + "warn", + "tab", + { "SwitchCase": 1, "ignoredNodes": ["TemplateLiteral *"] } + ], + "linebreak-style": ["warn", "unix"], + "lit-a11y/click-events-have-key-events": [ + "error", + { + "allowList": [ + "sp-button", + "sp-action-button", + "sp-checkbox", + "sp-radio", + "sp-switch", + "sp-menu-item", + "sp-clear-button", + "sp-underlay" + ] + } + ], + "no-console": ["warn", { "allow": ["warn", "error"] }], + "no-debugger": 2, + "notice/notice": [ + "error", + { + "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.", + "templateFile": "config/license.js" + } + ], + // "prettier/prettier": [ + // "error", + // { + // "parser": "flow", + // "singleQuote": true + // } + // ], + "quotes": ["warn", "double"], + "semi": ["warn", "always"], + "sort-imports": [ + "error", + { + "allowSeparatedGroups": false, + "ignoreCase": true, + "ignoreDeclarationSort": true, + "ignoreMemberSort": false + } + ], + "space-before-blocks": ["warn", "always"] + } } diff --git a/.prettierrc.yaml b/.prettierrc.yaml index 649ec697a2..c79693b0b8 100644 --- a/.prettierrc.yaml +++ b/.prettierrc.yaml @@ -1,8 +1,9 @@ printWidth: 80 -tabWidth: 4 -semi: true -singleQuote: true -trailingComma: es5 +tabWidth: 2 +useTabs: true +# semi: true +singleQuote: false +# trailingComma: es5 bracketSpacing: true arrowParens: always -htmlWhitespaceSensitivity: ignore +# htmlWhitespaceSensitivity: ignore diff --git a/.stylelintrc.json b/.stylelintrc.json index 4af5a2a752..f4aa083933 100755 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,28 +1,28 @@ { - "plugins": ["./linters/stylelint-header"], - "extends": ["stylelint-config-standard"], - "rules": { - "header/header": ["config/license.js", {}], - "length-zero-no-unit": [true, { "ignore": "custom-properties" }], - "selector-type-no-unknown": [true, { "ignore": ["custom-elements"] }], - "selector-pseudo-element-colon-notation": ["single", {}], - "custom-property-pattern": "^_?([a-z][a-z0-9]*)(-[a-z0-9]+)*$", - "no-duplicate-selectors": null, - "selector-class-pattern": null, - "no-descending-specificity": null, - "declaration-block-no-redundant-longhand-properties": null - }, - "overrides": [ - { - "files": [ - "packages/**/src/spectrum-*.css", - "tools/**/src/spectrum-*.css", - "tools/styles/**/*.css" - ], - "extends": [], - "rules": { - "header/header": ["config/license.js", {}] - } - } - ] + "plugins": ["./linters/stylelint-header"], + "extends": ["stylelint-config-standard"], + "rules": { + "header/header": ["config/license.js", {}], + "length-zero-no-unit": [true, { "ignore": "custom-properties" }], + "selector-type-no-unknown": [true, { "ignore": ["custom-elements"] }], + "selector-pseudo-element-colon-notation": ["single", {}], + "custom-property-pattern": "^_?([a-z][a-z0-9]*)(-[a-z0-9]+)*$", + "no-duplicate-selectors": null, + "selector-class-pattern": null, + "no-descending-specificity": null, + "declaration-block-no-redundant-longhand-properties": null + }, + "overrides": [ + { + "files": [ + "packages/**/src/spectrum-*.css", + "tools/**/src/spectrum-*.css", + "tools/styles/**/*.css" + ], + "extends": [], + "rules": { + "header/header": ["config/license.js", {}] + } + } + ] } diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 9b01c8e274..4b18f19fef 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,3 +1,24 @@ { - "recommendations": ["runem.lit-plugin"] + "recommendations": [ + "runem.lit-plugin", + "bierner.color-info", + "bierner.lit-html", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "figma.figma-vscode-extension", + "github.copilot", + "github.copilot-chat", + "github.vscode-github-actions", + "github.vscode-pull-request-github", + "gruntfuggly.todo-tree", + "joshbolduc.story-explorer", + "kisstkondoros.csstriggers", + "mariusschulz.yarn-lock-syntax", + "me-dutour-mathieu.vscode-github-actions", + "oouo-diogo-perdigao.docthis", + "rajdeepchandra.spectrum-design-tokens-for-vscode", + "stylelint.vscode-stylelint", + "vunguyentuan.vscode-css-variables", + "vunguyentuan.vscode-postcss" + ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index a7eed6f26c..3170c8cde1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,18 +1,179 @@ { - "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" }, - "packages/**/*.d.ts": { "when": "$(basename).ts" }, - "tools/**/*.js.map": true, - "tools/**/*.js": { "when": "$(basename).ts" }, - "tools/**/*.dev.js": { "when": "$(basename).js" }, - "tools/**/*.d.ts": { "when": "$(basename).ts" }, - "**/*.test-vrt.ts": true - }, - "typescript.tsdk": "node_modules/typescript/lib", - "lit-plugin.strict": true, - "eslint.workingDirectories": ["./packages", "./tools"] + "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" }, + "packages/**/*.d.ts": { "when": "$(basename).ts" }, + "tools/**/*.js.map": true, + "tools/**/*.js": { "when": "$(basename).ts" }, + "tools/**/*.dev.js": { "when": "$(basename).js" }, + "tools/**/*.d.ts": { "when": "$(basename).ts" }, + "**/*.test-vrt.ts": true + }, + "editor.tabSize": 2, + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", + "editor.formatOnType": false, + "editor.formatOnPaste": true, + "editor.formatOnSave": true, + "editor.formatOnSaveMode": "file", + "editor.insertSpaces": false, + "editor.detectIndentation": false, + "typescript.tsdk": "node_modules/typescript/lib", + "lit-plugin.strict": true, + "eslint.workingDirectories": ["./packages", "./tools"], + "[css]": { + "editor.codeActionsOnSave": { + "source.fixAll.stylelint": "explicit" + }, + "editor.defaultFormatter": "stylelint.vscode-stylelint" + }, + "[typescript]": { + "editor.codeActionsOnSave": { + "source.organizeImports": "explicit" + }, + "editor.colorDecorators": true, + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + }, + "[javascript]": { + "editor.codeActionsOnSave": { + "source.organizeImports": "explicit" + }, + "editor.colorDecorators": true, + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + }, + "[markdown]": { + "editor.defaultFormatter": "DavidAnson.vscode-markdownlint" + }, + "colorInfo.languages": [ + { + "colors": "css", + "selector": "css" + }, + { + "colors": "css", + "selector": "postcss" + }, + { + "colors": "css", + "selector": "javascript" + }, + { + "colors": "css", + "selector": "js" + }, + { + "colors": "css", + "selector": "jsx" + }, + { + "colors": "css", + "selector": "json" + }, + { + "colors": "css", + "selector": "svg" + }, + { + "colors": "css", + "selector": "markdown" + }, + { + "colors": "css", + "selector": "md" + }, + { + "colors": "css", + "selector": "mdx" + }, + { + "colors": "css", + "selector": "html" + }, + { + "colors": "css", + "selector": "yaml" + } + ], + "cssVariables.lookupFiles": [ + "${workspaceFolder}/tokens/dist/index.css", + "${workspaceFolder}/tokens/**/*.css", + "${workspaceFolder}/components/*/index.css", + "${workspaceFolder}/components/*/themes/*.css" + ], + "docthis.includeDescriptionTag": true, + "docthis.inferTypesFromNames": true, + "docthis.returnsTag": true, + "editor.largeFileOptimizations": true, + "editor.renderControlCharacters": true, + "emmet.includeLanguages": { + "postcss": "css" + }, + "emmet.syntaxProfiles": { + "postcss": "css" + }, + "eslint.format.enable": true, + "eslint.useESLintClass": true, + "files.associations": { + "*.css": "postcss" + }, + "files.insertFinalNewline": true, + "files.trimFinalNewlines": true, + "files.trimTrailingWhitespace": true, + "github.copilot.enable": { + "*": true, + "plaintext": false, + "scminput": false + }, + "githubIssues.createIssueTriggers": ["TODO", "todo", "FIXME", "ISSUE", "BUG"], + "githubIssues.issueBranchTitle": "${author}/${sanitizedIssueTitle}-gh-${issueNumber}", + "githubIssues.queries": [ + { + "label": "My issues", + "query": "default" + }, + { + "label": "Created issues", + "query": "author:${user} state:open repo:${owner}/${repository} sort:created-desc" + }, + { + "label": "Recent issues", + "query": "state:open repo:${owner}/${repository} sort:updated-desc" + } + ], + "githubPullRequests.queries": [ + { + "label": "Waiting for my review", + "query": "is:open review-requested:${user}" + }, + { + "label": "Assigned to me", + "query": "is:open assignee:${user}" + }, + { + "label": "Created by me", + "query": "is:open author:${user}" + }, + { + "label": "Mentioned me", + "query": "is:open mentions:${user}" + } + ], + "js/ts.implicitProjectConfig.experimentalDecorators": true, + "postcss.validate": false, + "prettier.configPath": ".prettierrc", + "prettier.ignorePath": ".prettierignore", + "prettier.prettierPath": "node_modules/prettier", + "stylelint.enable": true, + "stylelint.packageManager": "yarn", + "stylelint.reportDescriptionlessDisables": true, + "stylelint.reportInvalidScopeDisables": true, + "stylelint.reportNeedlessDisables": true, + "stylelint.validate": ["css", "postcss"], + "storyExplorer.storiesGlobs": [ + "components/*/stories/*.stories.js", + "components/*/stories/*.mdx" + ], + "workbench.editor.historyBasedLanguageDetection": false } diff --git a/config/license.js b/config/license.js index ae3852628d..c53d9ab815 100755 --- a/config/license.js +++ b/config/license.js @@ -1,5 +1,6 @@ /* Copyright <%= YEAR %> 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 diff --git a/package.json b/package.json index b109d71d52..f12ddf129f 100755 --- a/package.json +++ b/package.json @@ -1,444 +1,451 @@ { - "name": "@adobe/spectrum-web-components", - "version": "0.0.9", - "private": true, - "description": "", - "type": "module", - "engines": { - "node": ">=20", - "yarn": ">=1.16.0" - }, - "scripts": { - "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": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,close-button,clear-button,iconset,modal,opacity-shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- test -f src/index.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:tests": "tsc --build test/tsconfig.json && tsc --build test/tsconfig-node.json", - "build:ts": "wireit", - "build:ts:watch": "wireit", - "build:types": "wireit", - "build:watch": "wireit", - "chromatic": "chromatic --build-script-name storybook:build # note that --project-token must be set in your env variables", - "custom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,modal,iconset,shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../custom-elements-manifest.config.js --packagejson", - "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", - "docs:preview": "yarn docs:analyze && run-p docs:build storybook:build && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook", - "docs:production": "yarn workspace documentation build:production", - "docs:review": "alex packages/**/*.md", - "docs:start": "yarn workspace documentation serve --watch", - "find": "test -f custom-elements.json", - "gen-react-wrapper": "rm -fr react && lerna exec --ignore \"{@spectrum-web-components/{base,bundle,custom-vars-viewer,modal,iconset,shared,opacity-checkerboard,styles,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../cem-react-wrapper.config.js && node ./scripts/generate-icon-react-wrapper.js", - "get-ready": "yarn build", - "icons": "wireit", - "icons:ui": "wireit", - "icons:workflow": "wireit", - "lerna-publish": "lerna publish --message \"chore: release new versions #publish\" --force-publish", - "lint": "run-p lint:js lint:docs lint:ts lint:css lint:packagejson", - "lint:fix": "run-p lint:js lint:docs:fix lint:ts:fix lint:css lint:packagejson", - "lint:css": "stylelint \"packages/**/*.css\" \"tools/**/*.css\"", - "lint:docs": "eslint -f pretty \"projects/documentation/**/*.ts\"", - "lint:docs:fix": "eslint --fix -f pretty \"projects/documentation/**/*.ts\"", - "lint:js": "pretty-quick --pattern \"tasks/**/*.js\" && pretty-quick --pattern \"scripts/**/*.js\"", - "lint:packagejson": "pretty-quick --pattern package.json --pattern \"packages/*/package.json\" --pattern \"projects/*/package.json\" --pattern \"tools/*/package.json\" --pattern \"react/*/package.json\"", - "lint:ts": "pretty-quick --pattern \"packages/**/*.ts\" && eslint -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint -f pretty \"tools/**/*.ts\"", - "lint:ts:fix": "pretty-quick --pattern \"packages/**/*.ts\" && eslint --fix -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint --fix -f pretty \"tools/**/*.ts\"", - "lint:versions": "node ./scripts/lint-versions.js", - "new-package": "cd projects/templates && plop", - "postcustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,vrt-compare,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- node ../../tasks/check-cem.js", - "postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"", - "postinstall": "patch-package && yarn get-ready", - "postlerna-publish": "yarn publish:react", - "postpublish:react": "git reset --hard HEAD^ && git prune", - "precustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- rm custom-elements.json ||:", - "preeleventy": "yarn docs:analyze", - "prelerna-publish": "rimraf react && yarn get-ready && yarn custom-element-json && yarn build:confirm", - "prepare": "husky", - "prepublish:react": "yarn build:react && sed -i \"\" \"s/react/# react/g\" .gitignore && git commit -am \"Commit React Wrappers\" --no-verify", - "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": "lerna publish from-package --message \"chore: release new Reach Wrapper versions #publish\"", - "spectrum-css": "wireit", - "spectrum-tokens": "wireit", - "spectrum-vars": "wireit", - "start": "yarn storybook", - "storybook": "wireit", - "storybook:build": "NODE_ENV=production storybook build -o projects/documentation/dist/storybook -c storybook", - "storybook:quick": "run-p build:watch storybook:run", - "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:ci": "yarn test:start", - "test:create": "wireit", - "test:errors": "yarn test | grep -A 32 ❌", - "test:focus": "yarn build && yarn test:ci --group", - "test:start": "web-test-runner", - "test:visual": "yarn test:visual:ci", - "test:visual:ci": "yarn test:start --group", - "test:visual:clean": "yarn test:visual:clean:baseline && yarn test:visual:clean:current", - "test:visual:clean:baseline": "rimraf test/visual/screenshots-baseline", - "test:visual:clean:current": "rimraf test/visual/screenshots-current", - "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 lint:packagejson && yarn --ignore-scripts && yarn process-spectrum", - "update:spectrum-css:nonbreaking": "node ./scripts/update-spectrum-css.js || yarn update:spectrum-css:cleanup", - "vrt:preview": "yarn wds --config test/visual/wds-vrt.config.js", - "vrt:quick-link": "yarn netlify deploy --alias=vrt --dir=projects/vrt-quick-link" - }, - "peerDependencies": { - "common-tags": "^1.8.0" - }, - "devDependencies": { - "@commitlint/cli": "^19.2.1", - "@commitlint/config-conventional": "^19.1.0", - "@commitlint/config-lerna-scopes": "^19.0.0", - "@custom-elements-manifest/analyzer": "^0.9.0", - "@geometricpanda/storybook-addon-badges": "^2.0.2", - "@lit/react": "^1.0.4", - "@netlify/build": "^29.17.3", - "@open-wc/dev-server-hmr": "^0.2.0", - "@open-wc/testing": "^4.0.0", - "@playwright/test": "^1.44.0", - "@rollup/plugin-commonjs": "^25.0.7", - "@rollup/plugin-json": "^6.0.1", - "@rollup/plugin-node-resolve": "^15.2.3", - "@sindresorhus/slugify": "^2.1.1", - "@spectrum-web-components/eslint-plugin": "file:./linters/eslint", - "@storybook/addon-a11y": "^7.5.0", - "@storybook/addon-designs": "^8.0.0", - "@storybook/addon-essentials": "^7.5.0", - "@storybook/addon-links": "^7.5.0", - "@storybook/addons": "^7.6.17", - "@storybook/web-components": "^7.5.0", - "@stylistic/eslint-plugin": "^2.12.1", - "@types/chai": "^4.1.7", - "@types/command-line-args": "^5.0.0", - "@types/command-line-usage": "^5.0.1", - "@types/common-tags": "^1.4.0", - "@types/mocha": "^10.0.6", - "@types/node": "^20.11.11", - "@types/react": "^18.0.25", - "@types/sinon": "^17.0.3", - "@types/webpack": "^5.28.1", - "@types/webpack-env": "^1.13.9", - "@typescript-eslint/eslint-plugin": "^7.0.2", - "@typescript-eslint/parser": "^7.0.2", - "@web/dev-server": "^0.4.3", - "@web/dev-server-rollup": "^0.6.1", - "@web/rollup-plugin-copy": "^0.5.1", - "@web/rollup-plugin-html": "^2.1.2", - "@web/storybook-builder": "^0.1.7", - "@web/storybook-framework-web-components": "^0.1.1", - "@web/test-runner": "^0.18.0", - "@web/test-runner-commands": "^0.9.0", - "@web/test-runner-junit-reporter": "^0.7.0", - "@web/test-runner-playwright": "^0.11.0", - "@web/test-runner-visual-regression": "^0.9.0", - "@webcomponents/webcomponentsjs": "^2.8.0", - "alex": "^11.0.1", - "cem-plugin-module-file-extensions": "^0.0.5", - "chalk": "^5.0.1", - "chromatic": "^11.20.0", - "chromedriver": "^130.0.1", - "common-tags": "^1.8.2", - "custom-elements-manifest": "^2.0.0", - "debounce": "^2.0.0", - "deepmerge": "^4.2.2", - "esbuild": "^0.21.0", - "eslint": "^8.23.0", - "eslint-config-prettier": "^9.1.0", - "eslint-formatter-pretty": "^5.0.0", - "eslint-plugin-import": "^2.26.0", - "eslint-plugin-jsdoc": "^50.6.1", - "eslint-plugin-lit-a11y": "^2.2.2", - "eslint-plugin-notice": "^0.9.10", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-require-extensions": "^0.1.3", - "eslint-plugin-storybook": "^0.8.0", - "express": "^4.16.4", - "fast-glob": "^3.2.12", - "fs-extra": "^11.1.1", - "geckodriver": "^4.3.0", - "genversion": "^3.1.1", - "gh-pages": "^6.0.0", - "gunzip-maybe": "^1.4.2", - "husky": "^9.0.10", - "latest-version": "^9.0.0", - "lerna": "^8.1.2", - "lightningcss": "1.19.0", - "lit": "^2.5.0 || ^3.1.3", - "lit-analyzer": "^2.0.3", - "lit-html": "^2.4.0 || ^3.1.3", - "mocha-junit-reporter": "^2.0.2", - "netlify-cli": "^17.38.0", - "next": "^14", - "node-fetch": "^3.1.0", - "npm-run-all2": "^6.0.0", - "patch-package": "^8.0.0", - "prettier": "^3.0.0", - "prettier-plugin-package": "^1.3.0", - "pretty-bytes": "^6.1.1", - "pretty-quick": "^4.0.0", - "re-template-tag": "^2.0.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "rimraf": "^5.0.1", - "rollup": "^4.12.0", - "sinon": "^17.0.1", - "storybook": "^7.5.0", - "stylelint": "^16.4.0", - "stylelint-config-standard": "^36.0.0", - "tachometer": "^0.7.0", - "tar-stream": "^3.0.0", - "terser": "^4.8.1", - "typescript": "^5.3.3", - "wireit": "^0.14.3", - "yargs": "^17.2.1" - }, - "wireit": { - "build:css:watch": { - "command": "node ./tasks/watch-css.js", - "service": true - }, - "build:css": { - "command": "node ./tasks/build-css.js", - "dependencies": [ - "process-spectrum" - ], - "files": [ - "packages/**/*.css", - "tools/**/*.css", - "tasks/build-css.js", - "tasks/css-tools.js" - ], - "output": [ - "packages/**/*.css.ts", - "tools/**/*.css.ts" - ], - "clean": "if-file-deleted" - }, - "build:ts:watch": { - "command": "node ./tasks/watch-packages.js", - "service": true - }, - "build:ts": { - "command": "node ./tasks/esbuild-packages.js", - "dependencies": [ - "process-icons", - "test:create", - "build:css" - ], - "files": [ - "packages/**/*.ts", - "!packages/**/*.d.ts", - "projects/**/*.ts", - "!projects/**/*.d.ts", - "!projects/documentation/**/*", - "!projects/css-custom-vars-viewer/**/*", - "!projects/example-project-rollup/**/*", - "!projects/example-project-webpack/**/*", - "!projects/templates/**/*", - "tools/**/*.ts", - "!tools/**/*.d.ts", - "tasks/esbuild-packages.js", - "tasks/ts-tools.js", - "tasks/hydrate-export-maps.js", - "packages/**/exports.json", - "tools/**/exports.json" - ], - "output": [ - "packages/**/*.js", - "packages/**/*.dev.js", - "projects/**/*.js", - "packages/**/*.js.map", - "projects/**/*.js.map", - "!projects/documentation/**/*.js", - "!projects/css-custom-vars-viewer/**/*", - "!projects/example-project-rollup", - "!projects/example-project-webpack", - "!projects/templates", - "tools/**/*.js", - "tools/**/*.js.map", - "!**/spectrum-config.js", - "!**/spectrum-config.v1.js", - "!**/build.js", - "!**/build-icons-mapping.js", - "test/**/*.js", - "test/**/*.js.map", - "!test/visual/create.js", - "!test/visual/review.js", - "!test/visual/rollup.config.js", - "!test/visual/src/review.js", - "!test/visual/src/index.html", - "!test/visual/wds-vrt.config.js", - "!tools/base/src/version.js" - ], - "clean": "if-file-deleted" - }, - "build:types": { - "command": "tsc --build tsconfig-all.json --pretty", - "dependencies": [ - "process-icons", - "test:create", - "build:css" - ], - "files": [ - "tsconfig-all.json", - "packages/**/*.ts", - "packages/**/tsconfig.json", - "tools/**/*.ts", - "tools/**/tsconfig.json" - ], - "output": [ - "packages/**/*.d.ts", - "packages/**/tsconfig.tsbuildinfo", - "tools/**/*.d.ts", - "tools/**/tsconfig.tsbuildinfo", - "!**/local.d.ts", - "!tools/base/src/version.d.ts" - ], - "clean": "if-file-deleted" - }, - "build:watch": { - "dependencies": [ - "build:css:watch", - "build:ts:watch" - ] - }, - "build": { - "dependencies": [ - "build:ts", - "build:types" - ] - }, - "icons": { - "command": "node ./scripts/process-icons.js && pretty-quick --pattern \"packages/**/*.svg.ts\" && eslint -f pretty --fix \"packages/**/*.svg.ts\"", - "files": [ - "scripts/process-icons.js" - ], - "output": [ - "packages/**/*.svg.ts" - ] - }, - "icons:ui": { - "command": "yarn workspace @spectrum-web-components/icons-ui build", - "files": [ - "packages/icons-ui/bin/build.js", - "packages/icons-ui/packages.json", - "node_modules/@spectrum-css/ui-icons/dist/medium/**.svg", - "node_modules/@spectrum-css/ui-icons-s2/dist/medium/**.svg" - ], - "output": [ - "packages/icons-ui/**/*.ts", - "!packages/icons-ui/**/*.d.ts", - "!packages/icons-ui/stories/**/*.ts", - "packages/icons-ui/stories/icon-manifest.ts", - "!packages/icons-ui/test/**/*.ts", - "!packages/icons-ui/src/index.ts", - "!packages/icons-ui/src/custom-tag.ts", - "!packages/icons-workflow/src/DefaultIcon.ts" - ], - "clean": "if-file-deleted" - }, - "icons:workflow": { - "command": "yarn workspace @spectrum-web-components/icons-workflow build", - "files": [ - "!packages/icons-workflow/bin/build.js", - "packages/icons-workflow/bin/build-icons-mapping.js" - ], - "output": [ - "packages/icons-workflow/**/*.ts", - "!packages/icons-workflow/**/*.d.ts", - "!packages/icons-workflow/stories/**/*.ts", - "packages/icons-workflow/stories/icon-manifest.ts", - "!packages/icons-workflow/test/**/*.ts", - "!packages/icons-workflow/src/index.ts", - "!packages/icons-workflow/src/custom-tag.ts", - "!packages/icons-workflow/src/DefaultIcon.ts", - "!packages/icons-workflow/bin/icons-mapping.json" - ], - "clean": "if-file-deleted" - }, - "prestorybook": { - "command": "cem analyze --outdir storybook/", - "files": [ - "packages/**/*.ts", - "tools/**/*.ts" - ], - "output": [ - "storybook/custom-elements.json" - ] - }, - "process-icons": { - "dependencies": [ - "icons", - "icons:ui", - "icons:workflow" - ] - }, - "process-spectrum": { - "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"", - "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" - ], - "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, - "dependencies": [ - "build:watch", - "prestorybook" - ] - }, - "test:create": { - "command": "node test/visual/create.js", - "files": [ - "packages/*/stories/*.stories.ts", - "tools/*/stories/*.stories.ts" - ], - "output": [ - "packages/*/test/*.test-vrt.ts", - "tools/*/test/*.test-vrt.ts" - ], - "clean": "if-file-deleted" - } - }, - "workspaces": [ - "linters/*", - "packages/*", - "projects/*", - "tools/*", - "react/*" - ], - "packageManager": "yarn@1.22.22" + "private": true, + "name": "@adobe/spectrum-web-components", + "version": "0.0.9", + "description": "", + "type": "module", + "scripts": { + "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": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,close-button,clear-button,iconset,modal,opacity-shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- test -f src/index.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:tests": "tsc --build test/tsconfig.json && tsc --build test/tsconfig-node.json", + "build:ts": "wireit", + "build:ts:watch": "wireit", + "build:types": "wireit", + "build:watch": "wireit", + "chromatic": "chromatic --build-script-name storybook:build # note that --project-token must be set in your env variables", + "custom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,modal,iconset,shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../custom-elements-manifest.config.js --packagejson", + "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", + "docs:preview": "yarn docs:analyze && run-p docs:build storybook:build && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook", + "docs:production": "yarn workspace documentation build:production", + "docs:review": "alex packages/**/*.md", + "docs:start": "yarn workspace documentation serve --watch", + "find": "test -f custom-elements.json", + "gen-react-wrapper": "rm -fr react && lerna exec --ignore \"{@spectrum-web-components/{base,bundle,custom-vars-viewer,modal,iconset,shared,opacity-checkerboard,styles,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../cem-react-wrapper.config.js && node ./scripts/generate-icon-react-wrapper.js", + "get-ready": "yarn build", + "icons": "wireit", + "icons:ui": "wireit", + "icons:workflow": "wireit", + "lerna-publish": "lerna publish --message \"chore: release new versions #publish\" --force-publish", + "lint": "run-p lint:js lint:docs lint:ts lint:css lint:packagejson", + "lint:css": "stylelint \"packages/**/*.css\" \"tools/**/*.css\"", + "lint:docs": "eslint -f pretty \"projects/documentation/**/*.ts\"", + "lint:docs:fix": "eslint --fix -f pretty \"projects/documentation/**/*.ts\"", + "lint:fix": "run-p lint:js lint:docs:fix lint:ts:fix lint:css lint:packagejson", + "lint:js": "pretty-quick --pattern \"tasks/**/*.js\" && pretty-quick --pattern \"scripts/**/*.js\"", + "lint:packagejson": "pretty-quick --pattern package.json --pattern \"packages/*/package.json\" --pattern \"projects/*/package.json\" --pattern \"tools/*/package.json\" --pattern \"react/*/package.json\"", + "lint:ts": "pretty-quick --pattern \"packages/**/*.ts\" && eslint -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint -f pretty \"tools/**/*.ts\"", + "lint:ts:fix": "pretty-quick --pattern \"packages/**/*.ts\" && eslint --fix -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint --fix -f pretty \"tools/**/*.ts\"", + "lint:versions": "node ./scripts/lint-versions.js", + "new-package": "cd projects/templates && plop", + "postcustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,vrt-compare,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- node ../../tasks/check-cem.js", + "postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"", + "postinstall": "patch-package && yarn get-ready", + "postlerna-publish": "yarn publish:react", + "postpublish:react": "git reset --hard HEAD^ && git prune", + "precustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- rm custom-elements.json ||:", + "preeleventy": "yarn docs:analyze", + "prelerna-publish": "rimraf react && yarn get-ready && yarn custom-element-json && yarn build:confirm", + "prepare": "husky", + "prepublish:react": "yarn build:react && sed -i \"\" \"s/react/# react/g\" .gitignore && git commit -am \"Commit React Wrappers\" --no-verify", + "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": "lerna publish from-package --message \"chore: release new Reach Wrapper versions #publish\"", + "spectrum-css": "wireit", + "spectrum-tokens": "wireit", + "spectrum-vars": "wireit", + "start": "yarn storybook", + "storybook": "wireit", + "storybook:build": "NODE_ENV=production storybook build -o projects/documentation/dist/storybook -c storybook", + "storybook:quick": "run-p build:watch storybook:run", + "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:ci": "yarn test:start", + "test:create": "wireit", + "test:errors": "yarn test | grep -A 32 ❌", + "test:focus": "yarn build && yarn test:ci --group", + "test:start": "web-test-runner", + "test:visual": "yarn test:visual:ci", + "test:visual:ci": "yarn test:start --group", + "test:visual:clean": "yarn test:visual:clean:baseline && yarn test:visual:clean:current", + "test:visual:clean:baseline": "rimraf test/visual/screenshots-baseline", + "test:visual:clean:current": "rimraf test/visual/screenshots-current", + "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 lint:packagejson && yarn --ignore-scripts && yarn process-spectrum", + "update:spectrum-css:nonbreaking": "node ./scripts/update-spectrum-css.js || yarn update:spectrum-css:cleanup", + "vrt:preview": "yarn wds --config test/visual/wds-vrt.config.js", + "vrt:quick-link": "yarn netlify deploy --alias=vrt --dir=projects/vrt-quick-link" + }, + "workspaces": [ + "linters/*", + "packages/*", + "projects/*", + "tools/*", + "react/*" + ], + "peerDependencies": { + "common-tags": "^1.8.0" + }, + "devDependencies": { + "@commitlint/cli": "^19.2.1", + "@commitlint/config-conventional": "^19.1.0", + "@commitlint/config-lerna-scopes": "^19.0.0", + "@custom-elements-manifest/analyzer": "^0.9.0", + "@geometricpanda/storybook-addon-badges": "^2.0.2", + "@lit/react": "^1.0.4", + "@netlify/build": "^29.17.3", + "@open-wc/dev-server-hmr": "^0.2.0", + "@open-wc/testing": "^4.0.0", + "@playwright/test": "^1.44.0", + "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-json": "^6.0.1", + "@rollup/plugin-node-resolve": "^15.2.3", + "@sindresorhus/slugify": "^2.1.1", + "@spectrum-web-components/eslint-plugin": "file:./linters/eslint", + "@storybook/addon-a11y": "^7.5.0", + "@storybook/addon-designs": "^8.0.0", + "@storybook/addon-essentials": "^7.5.0", + "@storybook/addon-links": "^7.5.0", + "@storybook/addons": "^7.6.17", + "@storybook/web-components": "^7.5.0", + "@stylistic/eslint-plugin": "^2.12.1", + "@types/chai": "^4.1.7", + "@types/command-line-args": "^5.0.0", + "@types/command-line-usage": "^5.0.1", + "@types/common-tags": "^1.4.0", + "@types/mocha": "^10.0.6", + "@types/node": "^20.11.11", + "@types/react": "^18.0.25", + "@types/sinon": "^17.0.3", + "@types/webpack": "^5.28.1", + "@types/webpack-env": "^1.13.9", + "@typescript-eslint/eslint-plugin": "^7.0.2", + "@typescript-eslint/parser": "^7.0.2", + "@web/dev-server": "^0.4.3", + "@web/dev-server-rollup": "^0.6.1", + "@web/rollup-plugin-copy": "^0.5.1", + "@web/rollup-plugin-html": "^2.1.2", + "@web/storybook-builder": "^0.1.7", + "@web/storybook-framework-web-components": "^0.1.1", + "@web/test-runner": "^0.18.0", + "@web/test-runner-commands": "^0.9.0", + "@web/test-runner-junit-reporter": "^0.7.0", + "@web/test-runner-playwright": "^0.11.0", + "@web/test-runner-visual-regression": "^0.9.0", + "@webcomponents/webcomponentsjs": "^2.8.0", + "alex": "^11.0.1", + "cem-plugin-module-file-extensions": "^0.0.5", + "chalk": "^5.0.1", + "chromatic": "^11.20.0", + "chromedriver": "^130.0.1", + "common-tags": "^1.8.2", + "custom-elements-manifest": "^2.0.0", + "debounce": "^2.0.0", + "deepmerge": "^4.2.2", + "esbuild": "^0.21.0", + "eslint": "^8.52.0", + "eslint-config-prettier": "^9.1.0", + "eslint-formatter-pretty": "^5.0.0", + "eslint-plugin-import": "^2.26.0", + "eslint-plugin-jsdoc": "^50.6.1", + "eslint-plugin-jsonc": "^2.18.2", + "eslint-plugin-lit-a11y": "^2.2.2", + "eslint-plugin-notice": "^0.9.10", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-require-extensions": "^0.1.3", + "eslint-plugin-storybook": "^0.8.0", + "express": "^4.16.4", + "fast-glob": "^3.2.12", + "fs-extra": "^11.1.1", + "geckodriver": "^4.3.0", + "genversion": "^3.1.1", + "gh-pages": "^6.0.0", + "gunzip-maybe": "^1.4.2", + "husky": "^9.0.10", + "latest-version": "^9.0.0", + "lerna": "^8.1.2", + "lightningcss": "1.19.0", + "lit": "^2.5.0 || ^3.1.3", + "lit-analyzer": "^2.0.3", + "lit-html": "^2.4.0 || ^3.1.3", + "mocha-junit-reporter": "^2.0.2", + "netlify-cli": "^17.38.0", + "next": "^14", + "node-fetch": "^3.1.0", + "npm-run-all2": "^6.0.0", + "patch-package": "^8.0.0", + "prettier": "^3.1.0", + "prettier-eslint": "^16.1.2", + "prettier-plugin-package": "^1.3.0", + "pretty-bytes": "^6.1.1", + "pretty-quick": "^4.0.0", + "re-template-tag": "^2.0.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "rimraf": "^5.0.1", + "rollup": "^4.12.0", + "sinon": "^17.0.1", + "storybook": "^7.5.0", + "stylelint": "^16.4.0", + "stylelint-config-standard": "^36.0.0", + "stylelint-header": "^2.0.1", + "stylelint-high-performance-animation": "^1.10.0", + "stylelint-order": "^6.0.4", + "stylelint-selector-bem-pattern": "^4.0.1", + "stylelint-use-logical": "^2.1.2", + "tachometer": "^0.7.0", + "tar-stream": "^3.0.0", + "terser": "^4.8.1", + "typescript": "^5.3.3", + "wireit": "^0.14.3", + "yargs": "^17.2.1" + }, + "engines": { + "node": ">=20", + "yarn": ">=1.16.0" + }, + "wireit": { + "build": { + "dependencies": [ + "build:ts", + "build:types" + ] + }, + "build:css": { + "clean": "if-file-deleted", + "command": "node ./tasks/build-css.js", + "dependencies": [ + "process-spectrum" + ], + "files": [ + "packages/**/*.css", + "tools/**/*.css", + "tasks/build-css.js", + "tasks/css-tools.js" + ], + "output": [ + "packages/**/*.css.ts", + "tools/**/*.css.ts" + ] + }, + "build:css:watch": { + "command": "node ./tasks/watch-css.js", + "service": true + }, + "build:ts": { + "clean": "if-file-deleted", + "command": "node ./tasks/esbuild-packages.js", + "dependencies": [ + "process-icons", + "test:create", + "build:css" + ], + "files": [ + "packages/**/*.ts", + "!packages/**/*.d.ts", + "projects/**/*.ts", + "!projects/**/*.d.ts", + "!projects/documentation/**/*", + "!projects/css-custom-vars-viewer/**/*", + "!projects/example-project-rollup/**/*", + "!projects/example-project-webpack/**/*", + "!projects/templates/**/*", + "tools/**/*.ts", + "!tools/**/*.d.ts", + "tasks/esbuild-packages.js", + "tasks/ts-tools.js", + "tasks/hydrate-export-maps.js", + "packages/**/exports.json", + "tools/**/exports.json" + ], + "output": [ + "packages/**/*.js", + "packages/**/*.dev.js", + "projects/**/*.js", + "packages/**/*.js.map", + "projects/**/*.js.map", + "!projects/documentation/**/*.js", + "!projects/css-custom-vars-viewer/**/*", + "!projects/example-project-rollup", + "!projects/example-project-webpack", + "!projects/templates", + "tools/**/*.js", + "tools/**/*.js.map", + "!**/spectrum-config.js", + "!**/spectrum-config.v1.js", + "!**/build.js", + "!**/build-icons-mapping.js", + "test/**/*.js", + "test/**/*.js.map", + "!test/visual/create.js", + "!test/visual/review.js", + "!test/visual/rollup.config.js", + "!test/visual/src/review.js", + "!test/visual/src/index.html", + "!test/visual/wds-vrt.config.js", + "!tools/base/src/version.js" + ] + }, + "build:ts:watch": { + "command": "node ./tasks/watch-packages.js", + "service": true + }, + "build:types": { + "clean": "if-file-deleted", + "command": "tsc --build tsconfig-all.json --pretty", + "dependencies": [ + "process-icons", + "test:create", + "build:css" + ], + "files": [ + "tsconfig-all.json", + "packages/**/*.ts", + "packages/**/tsconfig.json", + "tools/**/*.ts", + "tools/**/tsconfig.json" + ], + "output": [ + "packages/**/*.d.ts", + "packages/**/tsconfig.tsbuildinfo", + "tools/**/*.d.ts", + "tools/**/tsconfig.tsbuildinfo", + "!**/local.d.ts", + "!tools/base/src/version.d.ts" + ] + }, + "build:watch": { + "dependencies": [ + "build:css:watch", + "build:ts:watch" + ] + }, + "icons": { + "command": "node ./scripts/process-icons.js && pretty-quick --pattern \"packages/**/*.svg.ts\" && eslint -f pretty --fix \"packages/**/*.svg.ts\"", + "files": [ + "scripts/process-icons.js" + ], + "output": [ + "packages/**/*.svg.ts" + ] + }, + "icons:ui": { + "clean": "if-file-deleted", + "command": "yarn workspace @spectrum-web-components/icons-ui build", + "files": [ + "packages/icons-ui/bin/build.js", + "packages/icons-ui/packages.json", + "node_modules/@spectrum-css/ui-icons/dist/medium/**.svg", + "node_modules/@spectrum-css/ui-icons-s2/dist/medium/**.svg" + ], + "output": [ + "packages/icons-ui/**/*.ts", + "!packages/icons-ui/**/*.d.ts", + "!packages/icons-ui/stories/**/*.ts", + "packages/icons-ui/stories/icon-manifest.ts", + "!packages/icons-ui/test/**/*.ts", + "!packages/icons-ui/src/index.ts", + "!packages/icons-ui/src/custom-tag.ts", + "!packages/icons-workflow/src/DefaultIcon.ts" + ] + }, + "icons:workflow": { + "clean": "if-file-deleted", + "command": "yarn workspace @spectrum-web-components/icons-workflow build", + "files": [ + "!packages/icons-workflow/bin/build.js", + "packages/icons-workflow/bin/build-icons-mapping.js" + ], + "output": [ + "packages/icons-workflow/**/*.ts", + "!packages/icons-workflow/**/*.d.ts", + "!packages/icons-workflow/stories/**/*.ts", + "packages/icons-workflow/stories/icon-manifest.ts", + "!packages/icons-workflow/test/**/*.ts", + "!packages/icons-workflow/src/index.ts", + "!packages/icons-workflow/src/custom-tag.ts", + "!packages/icons-workflow/src/DefaultIcon.ts", + "!packages/icons-workflow/bin/icons-mapping.json" + ] + }, + "prestorybook": { + "command": "cem analyze --outdir storybook/", + "files": [ + "packages/**/*.ts", + "tools/**/*.ts" + ], + "output": [ + "storybook/custom-elements.json" + ] + }, + "process-icons": { + "dependencies": [ + "icons", + "icons:ui", + "icons:workflow" + ] + }, + "process-spectrum": { + "clean": false, + "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"", + "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" + ], + "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" + ] + }, + "storybook": { + "command": "storybook dev -p 8080 -c storybook", + "dependencies": [ + "build:watch", + "prestorybook" + ], + "service": true + }, + "test:create": { + "clean": "if-file-deleted", + "command": "node test/visual/create.js", + "files": [ + "packages/*/stories/*.stories.ts", + "tools/*/stories/*.stories.ts" + ], + "output": [ + "packages/*/test/*.test-vrt.ts", + "tools/*/test/*.test-vrt.ts" + ] + } + }, + "packageManager": "yarn@1.22.22" } diff --git a/packages/.eslintrc.json b/packages/.eslintrc.json index df2fa35df6..1063414e8a 100644 --- a/packages/.eslintrc.json +++ b/packages/.eslintrc.json @@ -1,377 +1,378 @@ { - "root": true, - "env": { - "browser": true, - "node": false, - "es6": true - }, - "parser": "@typescript-eslint/parser", - "plugins": [ - "@typescript-eslint", - "notice", - "@spectrum-web-components", - "@stylistic", - "jsdoc", - "lit-a11y" - ], - "extends": [ - "plugin:@typescript-eslint/recommended", - "prettier", - "plugin:lit-a11y/recommended", - "plugin:jsdoc/recommended-typescript" - ], - "ignorePatterns": ["packages/**/*.css.ts"], - "settings": { - "jsdoc": { - "tagNamePreference": { - "attr": "attribute" - } - } - }, - "rules": { - "no-debugger": 2, - "no-console": [ - "error", - { - "allow": ["warn", "error"] - } - ], - "jsdoc/check-tag-names": [ - "warn", - { - "definedTags": ["element", "slot", "attribute", "csspart"] - } - ], - "jsdoc/require-param": 0, - "jsdoc/require-returns": 0, - "jsdoc/informative-docs": 1, - "jsdoc/no-bad-blocks": 1, - "jsdoc/sort-tags": [ - "warn", - { - "tagSequence": [ - { - "tags": [ - // Brief descriptions - "summary", - "typeSummary" - ] - }, - { - "tags": [ - // Module/file-level - "element", - "module", - "exports", - "file", - "fileoverview", - "overview", - "import" - ] - }, - { - "tags": [ - // Identifying (name, type) - "typedef", - "interface", - "record", - "template", - "name", - "kind", - "type", - "alias", - "external", - "host", - "callback", - "func", - "function", - "method", - "class", - "constructor" - ] - }, - { - "tags": [ - // Relationships - "modifies", - "mixes", - "mixin", - "mixinClass", - "mixinFunction", - "namespace", - "borrows", - "constructs", - "lends", - "implements", - "requires" - ] - }, - { - "tags": [ - // Long descriptions - "desc", - "description", - "classdesc", - "tutorial", - "copyright", - "license" - ] - }, - { - "tags": [ - // Simple annotations - "const", - "constant", - "final", - "global", - "readonly", - "abstract", - "virtual", - "var", - "member", - "memberof", - "memberof!", - "inner", - "instance", - "inheritdoc", - "inheritDoc", - "override", - "hideconstructor" - ] - }, - { - "tags": [ - // Core function/object info - "param", - "arg", - "argument", - "prop", - "property", - "slot", - "return", - "returns" - ] - }, - { - "tags": [ - // Important behavior details - "async", - "generator", - "default", - "defaultvalue", - "enum", - "augments", - "extends", - "throws", - "exception", - "yield", - "yields", - "event", - "fires", - "emits", - "listens", - "this" - ] - }, - { - "tags": [ - // Access - "static", - "private", - "protected", - "public", - "access", - "package" - ] - }, - { "tags": ["-other"] }, - { - "tags": [ - // Supplementary descriptions - "see", - "example" - ] - }, - { - "tags": [ - // Other Closure (undocumented) metadata - "closurePrimitive", - "customElement", - "expose", - "hidden", - "idGenerator", - "meaning", - "ngInject", - "owner", - "wizaction" - ] - }, - { - "tags": [ - // Other Closure (documented) metadata - "define", - "dict", - "export", - "externs", - "implicitCast", - "noalias", - "nocollapse", - "nocompile", - "noinline", - "nosideeffects", - "polymer", - "polymerBehavior", - "preserve", - "struct", - "suppress", - "unrestricted" - ] - }, - { - "tags": [ - // Non-Closure metadata - "ignore", - "author", - "version", - "variation", - "since", - "deprecated", - "todo" - ] - } - ], - "alphabetizeExtras": true - } - ], - "jsdoc/tag-lines": ["warn", "any", { "startLines": 1, "endLines": 1 }], - "jsdoc/no-blank-blocks": [ - "warn", - { - "enableFixer": true - } - ], - "jsdoc/require-hyphen-before-param-description": 1, - "@spectrum-web-components/prevent-argument-names": [ - "error", - ["e", "ev", "evt", "err"] - ], - "@spectrum-web-components/document-active-element": ["error"], - "notice/notice": [ - "error", - { - "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.", - "templateFile": "config/license.js" - } - ], - "@typescript-eslint/explicit-function-return-type": [ - 1, - { - "allowExpressions": true - } - ], - "sort-imports": [ - "error", - { - "ignoreCase": true, - "ignoreDeclarationSort": true, - "ignoreMemberSort": false, - "allowSeparatedGroups": false - } - ], - "lit-a11y/click-events-have-key-events": [ - "error", - { - "allowList": [ - "sp-button", - "sp-action-button", - "sp-checkbox", - "sp-radio", - "sp-switch", - "sp-menu-item", - "sp-clear-button", - "sp-underlay" - ] - } - ], - "@typescript-eslint/no-unused-vars": [ - "error", - { - "argsIgnorePattern": "^_" - } - ], - "@stylistic/padding-line-between-statements": [ - "error", - { - "blankLine": "always", - "prev": "*", - "next": ["return", "if", "try", "switch"] - }, - { - "blankLine": "always", - "prev": ["const", "let", "var", "if", "try", "switch"], - "next": "*" - }, - { - "blankLine": "any", - "prev": ["const", "let", "var"], - "next": ["const", "let", "var"] - } - ] - }, - "overrides": [ - { - "files": [ - "*.test.ts", - "*.stories.ts", - "**/benchmark/*.ts", - "**/test/*.ts" - ], - "rules": { - "@spectrum-web-components/document-active-element": ["off"], - "lit-a11y/no-autofocus": ["off"], - "lit-a11y/tabindex-no-positive": ["off"], - "jsdoc/require-jsdoc": 0 - } - }, - { - "files": ["**/icons/*.ts", "**/src/elements/*.ts"], - "rules": { - "sort-imports": ["off"], - "@stylistic/padding-line-between-statements": 0 - } - }, - { - "files": ["**/stories/*"], - "rules": { - "jsdoc/require-jsdoc": 0 - } - }, - { - "files": ["*.stories.ts"], - "rules": { - "no-console": ["off"] - } - }, - { - "files": ["Picker.ts"], - "rules": { - "lit-a11y/click-events-have-key-events": [ - "error", - { - "allowList": [ - "sp-button", - "sp-action-button", - "sp-checkbox", - "sp-radio", - "sp-switch", - "sp-menu-item", - "sp-clear-button", - "sp-underlay", - "sp-popover" - ] - } - ] - } - } - ] + "root": true, + "env": { + "browser": true, + "node": true, + "es6": true + }, + "parser": "@typescript-eslint/parser", + "plugins": [ + "@typescript-eslint", + "notice", + "@spectrum-web-components", + "@stylistic", + "jsdoc", + "lit-a11y" + ], + "extends": [ + "../.eslintrc.json", + "plugin:@typescript-eslint/recommended", + "prettier", + "plugin:lit-a11y/recommended", + "plugin:jsdoc/recommended-typescript" + ], + "ignorePatterns": ["packages/**/*.css.ts"], + "settings": { + "jsdoc": { + "tagNamePreference": { + "attr": "attribute" + } + } + }, + "rules": { + "no-debugger": 2, + "no-console": [ + "error", + { + "allow": ["warn", "error"] + } + ], + "jsdoc/check-tag-names": [ + "warn", + { + "definedTags": ["element", "slot", "attribute", "csspart"] + } + ], + "jsdoc/require-param": 0, + "jsdoc/require-returns": 0, + "jsdoc/informative-docs": 1, + "jsdoc/no-bad-blocks": 1, + "jsdoc/sort-tags": [ + "warn", + { + "tagSequence": [ + { + "tags": [ + // Brief descriptions + "summary", + "typeSummary" + ] + }, + { + "tags": [ + // Module/file-level + "element", + "module", + "exports", + "file", + "fileoverview", + "overview", + "import" + ] + }, + { + "tags": [ + // Identifying (name, type) + "typedef", + "interface", + "record", + "template", + "name", + "kind", + "type", + "alias", + "external", + "host", + "callback", + "func", + "function", + "method", + "class", + "constructor" + ] + }, + { + "tags": [ + // Relationships + "modifies", + "mixes", + "mixin", + "mixinClass", + "mixinFunction", + "namespace", + "borrows", + "constructs", + "lends", + "implements", + "requires" + ] + }, + { + "tags": [ + // Long descriptions + "desc", + "description", + "classdesc", + "tutorial", + "copyright", + "license" + ] + }, + { + "tags": [ + // Simple annotations + "const", + "constant", + "final", + "global", + "readonly", + "abstract", + "virtual", + "var", + "member", + "memberof", + "memberof!", + "inner", + "instance", + "inheritdoc", + "inheritDoc", + "override", + "hideconstructor" + ] + }, + { + "tags": [ + // Core function/object info + "param", + "arg", + "argument", + "prop", + "property", + "slot", + "return", + "returns" + ] + }, + { + "tags": [ + // Important behavior details + "async", + "generator", + "default", + "defaultvalue", + "enum", + "augments", + "extends", + "throws", + "exception", + "yield", + "yields", + "event", + "fires", + "emits", + "listens", + "this" + ] + }, + { + "tags": [ + // Access + "static", + "private", + "protected", + "public", + "access", + "package" + ] + }, + { "tags": ["-other"] }, + { + "tags": [ + // Supplementary descriptions + "see", + "example" + ] + }, + { + "tags": [ + // Other Closure (undocumented) metadata + "closurePrimitive", + "customElement", + "expose", + "hidden", + "idGenerator", + "meaning", + "ngInject", + "owner", + "wizaction" + ] + }, + { + "tags": [ + // Other Closure (documented) metadata + "define", + "dict", + "export", + "externs", + "implicitCast", + "noalias", + "nocollapse", + "nocompile", + "noinline", + "nosideeffects", + "polymer", + "polymerBehavior", + "preserve", + "struct", + "suppress", + "unrestricted" + ] + }, + { + "tags": [ + // Non-Closure metadata + "ignore", + "author", + "version", + "variation", + "since", + "deprecated", + "todo" + ] + } + ], + "alphabetizeExtras": true + } + ], + "jsdoc/tag-lines": ["warn", "any", { "startLines": 1, "endLines": 1 }], + "jsdoc/no-blank-blocks": [ + "warn", + { + "enableFixer": true + } + ], + "jsdoc/require-hyphen-before-param-description": 1, + "@spectrum-web-components/prevent-argument-names": [ + "error", + ["e", "ev", "evt", "err"] + ], + "@spectrum-web-components/document-active-element": ["error"], + "notice/notice": [ + "error", + { + "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.", + "templateFile": "config/license.js" + } + ], + "@typescript-eslint/explicit-function-return-type": [ + 1, + { + "allowExpressions": true + } + ], + "sort-imports": [ + "error", + { + "ignoreCase": true, + "ignoreDeclarationSort": true, + "ignoreMemberSort": false, + "allowSeparatedGroups": false + } + ], + "lit-a11y/click-events-have-key-events": [ + "error", + { + "allowList": [ + "sp-button", + "sp-action-button", + "sp-checkbox", + "sp-radio", + "sp-switch", + "sp-menu-item", + "sp-clear-button", + "sp-underlay" + ] + } + ], + "@typescript-eslint/no-unused-vars": [ + "error", + { + "argsIgnorePattern": "^_" + } + ], + "@stylistic/padding-line-between-statements": [ + "error", + { + "blankLine": "always", + "prev": "*", + "next": ["return", "if", "try", "switch"] + }, + { + "blankLine": "always", + "prev": ["const", "let", "var", "if", "try", "switch"], + "next": "*" + }, + { + "blankLine": "any", + "prev": ["const", "let", "var"], + "next": ["const", "let", "var"] + } + ] + }, + "overrides": [ + { + "files": [ + "*.test.ts", + "*.stories.ts", + "**/benchmark/*.ts", + "**/test/*.ts" + ], + "rules": { + "@spectrum-web-components/document-active-element": ["off"], + "lit-a11y/no-autofocus": ["off"], + "lit-a11y/tabindex-no-positive": ["off"], + "jsdoc/require-jsdoc": 0 + } + }, + { + "files": ["**/icons/*.ts", "**/src/elements/*.ts"], + "rules": { + "sort-imports": ["off"], + "@stylistic/padding-line-between-statements": 0 + } + }, + { + "files": ["**/stories/*"], + "rules": { + "jsdoc/require-jsdoc": 0 + } + }, + { + "files": ["*.stories.ts"], + "rules": { + "no-console": ["off"] + } + }, + { + "files": ["Picker.ts"], + "rules": { + "lit-a11y/click-events-have-key-events": [ + "error", + { + "allowList": [ + "sp-button", + "sp-action-button", + "sp-checkbox", + "sp-radio", + "sp-switch", + "sp-menu-item", + "sp-clear-button", + "sp-underlay", + "sp-popover" + ] + } + ] + } + } + ] } diff --git a/packages/accordion/src/Accordion.ts b/packages/accordion/src/Accordion.ts index 79056ed45c..5c73051c12 100644 --- a/packages/accordion/src/Accordion.ts +++ b/packages/accordion/src/Accordion.ts @@ -11,22 +11,22 @@ governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - PropertyValues, - SizedMixin, - SpectrumElement, - TemplateResult, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + PropertyValues, + SizedMixin, + SpectrumElement, + TemplateResult, +} from "@spectrum-web-components/base"; import { - property, - queryAssignedNodes, -} from '@spectrum-web-components/base/src/decorators.js'; -import { FocusGroupController } from '@spectrum-web-components/reactive-controllers/src/FocusGroup.js'; + property, + queryAssignedNodes, +} from "@spectrum-web-components/base/src/decorators.js"; +import { FocusGroupController } from "@spectrum-web-components/reactive-controllers/src/FocusGroup.js"; -import { AccordionItem } from './AccordionItem.js'; +import { AccordionItem } from "./AccordionItem.js"; -import styles from './accordion.css.js'; +import styles from "./accordion.css.js"; /** * @element sp-accordion @@ -35,122 +35,119 @@ import styles from './accordion.css.js'; * */ export class Accordion extends SizedMixin(SpectrumElement, { - noDefaultSize: true, + noDefaultSize: true, }) { - public static override get styles(): CSSResultArray { - return [styles]; - } - - /** - * Allows multiple accordion items to be opened at the same time. - * When true, more than one accordion item can be expanded simultaneously. - */ - @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' }) - public allowMultiple = false; - - /** - * Sets the spacing between the content and borders of an accordion item. - * Can be 'compact' or 'spacious'. - */ - @property({ type: String, reflect: true }) - public density?: 'compact' | 'spacious'; - - /** - * Retrieves the default nodes assigned to the slot. - * These nodes are expected to be AccordionItem elements. - */ - @queryAssignedNodes() - private defaultNodes!: NodeListOf; - - /** - * Gets the list of accordion items. - * Filters the default nodes to include only valid AccordionItem elements. - */ - private get items(): AccordionItem[] { - return [...(this.defaultNodes || [])].filter( - (node: HTMLElement) => typeof node.tagName !== 'undefined' - ) as AccordionItem[]; - } - - /** - * Controller for managing focus within the accordion. - * Configures focus behavior for the accordion items. - */ - focusGroupController = new FocusGroupController(this, { - direction: 'vertical', - elements: () => this.items, - isFocusableElement: (el: AccordionItem) => !el.disabled, - }); - - /** - * Overrides the focus method to delegate focus to the focus group controller. - */ - public override focus(): void { - this.focusGroupController.focus(); - } - - /** - * Handles the toggle event for an accordion item. - * Closes other accordion items if `allowMultiple` is false and the event is not prevented. - */ - private async onToggle(event: Event): Promise { - const target = event.target as AccordionItem; - - // Let the event pass through the DOM so that it can be - // prevented from the outside if a user so desires. - await 0; - - if (this.allowMultiple || event.defaultPrevented) { - // No toggling when `allowMultiple` is true or the user prevents it. - return; - } - - const items = [...this.items] as AccordionItem[]; - - /* c8 ignore next 3 */ - if (items && !items.length) { - // No toggling when there aren't items. - return; - } - - items.forEach((item) => { - if (item !== target) { - // Close all the items that didn't dispatch the event. - item.open = false; - } - }); - } - - /** - * Handles the slotchange event. - * Clears the element cache in the focus group controller and updates the size of each accordion item. - */ - private handleSlotchange(): void { - this.focusGroupController.clearElementCache(); - this.items.forEach((item) => { - item.size = this.size; - }); - } - - protected override updated(changed: PropertyValues): void { - super.updated(changed); - - if ( - changed.has('size') && - (!!changed.get('size') || this.size !== 'm') - ) { - this.items.forEach((item) => { - item.size = this.size; - }); - } - } - - protected override render(): TemplateResult { - return html` - - `; - } + public static override get styles(): CSSResultArray { + return [styles]; + } + + /** + * Allows multiple accordion items to be opened at the same time. + * When true, more than one accordion item can be expanded simultaneously. + */ + @property({ type: Boolean, reflect: true, attribute: "allow-multiple" }) + public allowMultiple = false; + + /** + * Sets the spacing between the content and borders of an accordion item. + * Can be 'compact' or 'spacious'. + */ + @property({ type: String, reflect: true }) + public density?: "compact" | "spacious"; + + /** + * Retrieves the default nodes assigned to the slot. + * These nodes are expected to be AccordionItem elements. + */ + @queryAssignedNodes() + private defaultNodes!: NodeListOf; + + /** + * Gets the list of accordion items. + * Filters the default nodes to include only valid AccordionItem elements. + */ + private get items(): AccordionItem[] { + return [...(this.defaultNodes || [])].filter( + (node: HTMLElement) => typeof node.tagName !== "undefined", + ) as AccordionItem[]; + } + + /** + * Controller for managing focus within the accordion. + * Configures focus behavior for the accordion items. + */ + focusGroupController = new FocusGroupController(this, { + direction: "vertical", + elements: () => this.items, + isFocusableElement: (el: AccordionItem) => !el.disabled, + }); + + /** + * Overrides the focus method to delegate focus to the focus group controller. + */ + public override focus(): void { + this.focusGroupController.focus(); + } + + /** + * Handles the toggle event for an accordion item. + * Closes other accordion items if `allowMultiple` is false and the event is not prevented. + */ + private async onToggle(event: Event): Promise { + const target = event.target as AccordionItem; + + // Let the event pass through the DOM so that it can be + // prevented from the outside if a user so desires. + await 0; + + if (this.allowMultiple || event.defaultPrevented) { + // No toggling when `allowMultiple` is true or the user prevents it. + return; + } + + const items = [...this.items] as AccordionItem[]; + + /* c8 ignore next 3 */ + if (items && !items.length) { + // No toggling when there aren't items. + return; + } + + items.forEach((item) => { + if (item !== target) { + // Close all the items that didn't dispatch the event. + item.open = false; + } + }); + } + + /** + * Handles the slotchange event. + * Clears the element cache in the focus group controller and updates the size of each accordion item. + */ + private handleSlotchange(): void { + this.focusGroupController.clearElementCache(); + this.items.forEach((item) => { + item.size = this.size; + }); + } + + protected override updated(changed: PropertyValues): void { + super.updated(changed); + + if (changed.has("size") && (!!changed.get("size") || this.size !== "m")) { + this.items.forEach((item) => { + item.size = this.size; + }); + } + } + + protected override render(): TemplateResult { + return html` + + `; + } } diff --git a/packages/accordion/src/accordion-item-overrides.css b/packages/accordion/src/accordion-item-overrides.css index b24c42a121..9a4a6318d7 100644 --- a/packages/accordion/src/accordion-item-overrides.css +++ b/packages/accordion/src/accordion-item-overrides.css @@ -12,25 +12,23 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Accordion--sizeM { - --spectrum-accordion-item-height: var( - --system-accordion-size-m-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-m-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-m-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-m-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-m-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-m-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-m-item-header-bottom-to-text-space - ); + --spectrum-accordion-item-height: var(--system-accordion-size-m-item-height); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-m-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-m-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-m-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-m-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-m-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-m-item-header-bottom-to-text-space + ); } diff --git a/packages/accordion/src/accordion-overrides.css b/packages/accordion/src/accordion-overrides.css index bd9e613923..f7cce58b9f 100644 --- a/packages/accordion/src/accordion-overrides.css +++ b/packages/accordion/src/accordion-overrides.css @@ -12,329 +12,319 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-accordion-item-width: var(--system-accordion-item-width); - --spectrum-accordion-disclosure-indicator-to-text-space: var( - --system-accordion-disclosure-indicator-to-text-space - ); - --spectrum-accordion-edge-to-disclosure-indicator-space: var( - --system-accordion-edge-to-disclosure-indicator-space - ); - --spectrum-accordion-edge-to-text-space: var( - --system-accordion-edge-to-text-space - ); - --spectrum-accordion-focus-indicator-gap: var( - --system-accordion-focus-indicator-gap - ); - --spectrum-accordion-focus-indicator-thickness: var( - --system-accordion-focus-indicator-thickness - ); - --spectrum-accordion-corner-radius: var(--system-accordion-corner-radius); - --spectrum-accordion-item-content-area-top-to-content: var( - --system-accordion-item-content-area-top-to-content - ); - --spectrum-accordion-item-content-area-bottom-to-content: var( - --system-accordion-item-content-area-bottom-to-content - ); - --spectrum-accordion-item-header-font: var( - --system-accordion-item-header-font - ); - --spectrum-accordion-item-header-font-weight: var( - --system-accordion-item-header-font-weight - ); - --spectrum-accordion-item-header-font-style: var( - --system-accordion-item-header-font-style - ); - --spectrum-accordion-item-header-line-height: var( - --system-accordion-item-header-line-height - ); - --spectrum-accordion-item-content-font: var( - --system-accordion-item-content-font - ); - --spectrum-accordion-item-content-font-weight: var( - --system-accordion-item-content-font-weight - ); - --spectrum-accordion-item-content-font-style: var( - --system-accordion-item-content-font-style - ); - --spectrum-accordion-item-content-line-height: var( - --system-accordion-item-content-line-height - ); - --spectrum-accordion-background-color-default: var( - --system-accordion-background-color-default - ); - --spectrum-accordion-background-color-hover: var( - --system-accordion-background-color-hover - ); - --spectrum-accordion-background-color-down: var( - --system-accordion-background-color-down - ); - --spectrum-accordion-background-color-key-focus: var( - --system-accordion-background-color-key-focus - ); - --spectrum-accordion-item-header-color-default: var( - --system-accordion-item-header-color-default - ); - --spectrum-accordion-item-header-color-hover: var( - --system-accordion-item-header-color-hover - ); - --spectrum-accordion-item-header-color-down: var( - --system-accordion-item-header-color-down - ); - --spectrum-accordion-item-header-color-key-focus: var( - --system-accordion-item-header-color-key-focus - ); - --spectrum-accordion-item-header-disabled-color: var( - --system-accordion-item-header-disabled-color - ); - --spectrum-accordion-item-content-disabled-color: var( - --system-accordion-item-content-disabled-color - ); - --spectrum-accordion-item-content-color: var( - --system-accordion-item-content-color - ); - --spectrum-accordion-focus-indicator-color: var( - --system-accordion-focus-indicator-color - ); - --spectrum-accordion-divider-color: var(--system-accordion-divider-color); - --spectrum-accordion-item-header-line-height-cjk: var( - --system-accordion-item-header-line-height-cjk - ); - --spectrum-accordion-item-content-line-height-cjk: var( - --system-accordion-item-content-line-height-cjk - ); - --spectrum-accordion-item-height: var(--system-accordion-item-height); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-item-header-bottom-to-text-space - ); + --spectrum-accordion-item-width: var(--system-accordion-item-width); + --spectrum-accordion-disclosure-indicator-to-text-space: var( + --system-accordion-disclosure-indicator-to-text-space + ); + --spectrum-accordion-edge-to-disclosure-indicator-space: var( + --system-accordion-edge-to-disclosure-indicator-space + ); + --spectrum-accordion-edge-to-text-space: var( + --system-accordion-edge-to-text-space + ); + --spectrum-accordion-focus-indicator-gap: var( + --system-accordion-focus-indicator-gap + ); + --spectrum-accordion-focus-indicator-thickness: var( + --system-accordion-focus-indicator-thickness + ); + --spectrum-accordion-corner-radius: var(--system-accordion-corner-radius); + --spectrum-accordion-item-content-area-top-to-content: var( + --system-accordion-item-content-area-top-to-content + ); + --spectrum-accordion-item-content-area-bottom-to-content: var( + --system-accordion-item-content-area-bottom-to-content + ); + --spectrum-accordion-item-header-font: var( + --system-accordion-item-header-font + ); + --spectrum-accordion-item-header-font-weight: var( + --system-accordion-item-header-font-weight + ); + --spectrum-accordion-item-header-font-style: var( + --system-accordion-item-header-font-style + ); + --spectrum-accordion-item-header-line-height: var( + --system-accordion-item-header-line-height + ); + --spectrum-accordion-item-content-font: var( + --system-accordion-item-content-font + ); + --spectrum-accordion-item-content-font-weight: var( + --system-accordion-item-content-font-weight + ); + --spectrum-accordion-item-content-font-style: var( + --system-accordion-item-content-font-style + ); + --spectrum-accordion-item-content-line-height: var( + --system-accordion-item-content-line-height + ); + --spectrum-accordion-background-color-default: var( + --system-accordion-background-color-default + ); + --spectrum-accordion-background-color-hover: var( + --system-accordion-background-color-hover + ); + --spectrum-accordion-background-color-down: var( + --system-accordion-background-color-down + ); + --spectrum-accordion-background-color-key-focus: var( + --system-accordion-background-color-key-focus + ); + --spectrum-accordion-item-header-color-default: var( + --system-accordion-item-header-color-default + ); + --spectrum-accordion-item-header-color-hover: var( + --system-accordion-item-header-color-hover + ); + --spectrum-accordion-item-header-color-down: var( + --system-accordion-item-header-color-down + ); + --spectrum-accordion-item-header-color-key-focus: var( + --system-accordion-item-header-color-key-focus + ); + --spectrum-accordion-item-header-disabled-color: var( + --system-accordion-item-header-disabled-color + ); + --spectrum-accordion-item-content-disabled-color: var( + --system-accordion-item-content-disabled-color + ); + --spectrum-accordion-item-content-color: var( + --system-accordion-item-content-color + ); + --spectrum-accordion-focus-indicator-color: var( + --system-accordion-focus-indicator-color + ); + --spectrum-accordion-divider-color: var(--system-accordion-divider-color); + --spectrum-accordion-item-header-line-height-cjk: var( + --system-accordion-item-header-line-height-cjk + ); + --spectrum-accordion-item-content-line-height-cjk: var( + --system-accordion-item-content-line-height-cjk + ); + --spectrum-accordion-item-height: var(--system-accordion-item-height); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-item-header-bottom-to-text-space + ); } -:host([size='s']) { - --spectrum-accordion-item-height: var( - --system-accordion-size-s-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-s-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-s-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-s-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-s-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-s-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-s-item-header-bottom-to-text-space - ); +:host([size="s"]) { + --spectrum-accordion-item-height: var(--system-accordion-size-s-item-height); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-s-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-s-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-s-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-s-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-s-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-s-item-header-bottom-to-text-space + ); } .spectrum-Accordion--sizeM { - --spectrum-accordion-item-height: var( - --system-accordion-size-m-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-m-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-m-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-m-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-m-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-m-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-m-item-header-bottom-to-text-space - ); + --spectrum-accordion-item-height: var(--system-accordion-size-m-item-height); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-m-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-m-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-m-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-m-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-m-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-m-item-header-bottom-to-text-space + ); } -:host([size='l']) { - --spectrum-accordion-item-height: var( - --system-accordion-size-l-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-l-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-l-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-l-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-l-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-l-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-l-item-header-bottom-to-text-space - ); +:host([size="l"]) { + --spectrum-accordion-item-height: var(--system-accordion-size-l-item-height); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-l-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-l-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-l-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-l-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-l-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-l-item-header-bottom-to-text-space + ); } -:host([size='xl']) { - --spectrum-accordion-item-height: var( - --system-accordion-size-xl-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-xl-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-xl-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-xl-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-xl-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-xl-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-xl-item-header-bottom-to-text-space - ); +:host([size="xl"]) { + --spectrum-accordion-item-height: var(--system-accordion-size-xl-item-height); + --spectrum-accordion-disclosure-indicator-height: var( + --system-accordion-size-xl-disclosure-indicator-height + ); + --spectrum-accordion-component-edge-to-text: var( + --system-accordion-size-xl-component-edge-to-text + ); + --spectrum-accordion-item-header-font-size: var( + --system-accordion-size-xl-item-header-font-size + ); + --spectrum-accordion-item-content-font-size: var( + --system-accordion-size-xl-item-content-font-size + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-size-xl-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-size-xl-item-header-bottom-to-text-space + ); } -:host([density='compact'][size='s']) { - --spectrum-accordion-item-height: var( - --system-accordion-compact-size-s-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-size-s-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-size-s-item-header-bottom-to-text-space - ); +:host([density="compact"][size="s"]) { + --spectrum-accordion-item-height: var( + --system-accordion-compact-size-s-item-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-size-s-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-size-s-item-header-bottom-to-text-space + ); } -:host([density='compact']) { - --spectrum-accordion-item-height: var( - --system-accordion-compact-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-item-header-bottom-to-text-space - ); +:host([density="compact"]) { + --spectrum-accordion-item-height: var(--system-accordion-compact-item-height); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-item-header-bottom-to-text-space + ); } -:host([density='compact']) .spectrum-Accordion--sizeM { - --spectrum-accordion-item-height: var( - --system-accordion-compact-size-m-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-size-m-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-size-m-item-header-bottom-to-text-space - ); +:host([density="compact"]) .spectrum-Accordion--sizeM { + --spectrum-accordion-item-height: var( + --system-accordion-compact-size-m-item-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-size-m-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-size-m-item-header-bottom-to-text-space + ); } -:host([density='compact'][size='l']) { - --spectrum-accordion-item-height: var( - --system-accordion-compact-size-l-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-size-l-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-size-l-item-header-bottom-to-text-space - ); +:host([density="compact"][size="l"]) { + --spectrum-accordion-item-height: var( + --system-accordion-compact-size-l-item-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-size-l-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-size-l-item-header-bottom-to-text-space + ); } -:host([density='compact'][size='xl']) { - --spectrum-accordion-item-height: var( - --system-accordion-compact-size-xl-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-size-xl-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-size-xl-item-header-bottom-to-text-space - ); +:host([density="compact"][size="xl"]) { + --spectrum-accordion-item-height: var( + --system-accordion-compact-size-xl-item-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-compact-size-xl-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-compact-size-xl-item-header-bottom-to-text-space + ); } -:host([density='spacious'][size='s']) { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-size-s-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-size-s-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-size-s-item-header-bottom-to-text-space - ); +:host([density="spacious"][size="s"]) { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-size-s-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-size-s-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-size-s-item-header-bottom-to-text-space + ); } -:host([density='spacious']) { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-item-header-bottom-to-text-space - ); +:host([density="spacious"]) { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-item-header-bottom-to-text-space + ); } -:host([density='spacious']) .spectrum-Accordion--sizeM { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-size-m-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-size-m-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-size-m-item-header-bottom-to-text-space - ); +:host([density="spacious"]) .spectrum-Accordion--sizeM { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-size-m-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-size-m-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-size-m-item-header-bottom-to-text-space + ); } -:host([density='spacious'][size='l']) { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-size-l-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-size-l-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-size-l-item-header-bottom-to-text-space - ); +:host([density="spacious"][size="l"]) { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-size-l-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-size-l-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-size-l-item-header-bottom-to-text-space + ); } -:host([density='spacious'][size='xl']) { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-size-xl-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-size-xl-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space - ); +:host([density="spacious"][size="xl"]) { + --spectrum-accordion-item-header-line-height: var( + --system-accordion-spacious-size-xl-item-header-line-height + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --system-accordion-spacious-size-xl-item-header-top-to-text-space + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space + ); } diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css index 62b4a13c44..6eaf50d8ac 100644 --- a/packages/accordion/src/spectrum-accordion-item.css +++ b/packages/accordion/src/spectrum-accordion-item.css @@ -12,328 +12,328 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - z-index: inherit; - min-block-size: var( - --mod-accordion-item-height, - var(--spectrum-accordion-item-height) - ); - min-inline-size: var( - --mod-accordion-item-width, - var(--spectrum-accordion-item-width) - ); - border-block-end: 1px solid #0000; - border-color: var( - --mod-accordion-divider-color, - var(--spectrum-accordion-divider-color) - ); - border-width: var( - --mod-accordion-divider-thickness, - var(--spectrum-divider-thickness-small) - ); - margin: 0; - position: relative; + z-index: inherit; + min-block-size: var( + --mod-accordion-item-height, + var(--spectrum-accordion-item-height) + ); + min-inline-size: var( + --mod-accordion-item-width, + var(--spectrum-accordion-item-width) + ); + border-block-end: 1px solid #0000; + border-color: var( + --mod-accordion-divider-color, + var(--spectrum-accordion-divider-color) + ); + border-width: var( + --mod-accordion-divider-thickness, + var(--spectrum-divider-thickness-small) + ); + margin: 0; + position: relative; } :host(:first-child) { - border-block-start: 1px solid #0000; - border-color: var( - --mod-accordion-divider-color, - var(--spectrum-accordion-divider-color) - ); - border-width: var( - --mod-accordion-divider-thickness, - var(--spectrum-divider-thickness-small) - ); + border-block-start: 1px solid #0000; + border-color: var( + --mod-accordion-divider-color, + var(--spectrum-accordion-divider-color) + ); + border-width: var( + --mod-accordion-divider-thickness, + var(--spectrum-divider-thickness-small) + ); } #heading { - box-sizing: border-box; - margin: 0; - position: relative; + box-sizing: border-box; + margin: 0; + position: relative; } .iconContainer { - inline-size: var( - --mod-accordion-disclosure-indicator-height, - var(--spectrum-accordion-disclosure-indicator-height) - ); - block-size: var( - --mod-accordion-disclosure-indicator-height, - var(--spectrum-accordion-disclosure-indicator-height) - ); - color: var( - --mod-accordion-item-header-color-default, - var(--spectrum-accordion-item-header-color-default) - ); - justify-content: center; - align-items: center; - padding-inline-start: var( - --mod-accordion-edge-to-disclosure-indicator-space, - var(--spectrum-accordion-edge-to-disclosure-indicator-space) - ); - display: flex; - position: absolute; - inset-block-start: max( - 0px, - calc( - ( - var( - --mod-accordion-min-block-size, - var(--spectrum-accordion-min-block-size) - ) - - var( - --mod-accordion-disclosure-indicator-height, - var( - --spectrum-accordion-disclosure-indicator-height - ) - ) - ) / 2 - ) - ); + inline-size: var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) + ); + block-size: var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) + ); + color: var( + --mod-accordion-item-header-color-default, + var(--spectrum-accordion-item-header-color-default) + ); + justify-content: center; + align-items: center; + padding-inline-start: var( + --mod-accordion-edge-to-disclosure-indicator-space, + var(--spectrum-accordion-edge-to-disclosure-indicator-space) + ); + display: flex; + position: absolute; + inset-block-start: max( + 0px, + calc( + ( + var( + --mod-accordion-min-block-size, + var(--spectrum-accordion-min-block-size) + ) - + var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) + ) + ) / + 2 + ) + ); } .iconContainer:dir(rtl), -:host([dir='rtl']) .iconContainer { - transform: scaleX(-1); +:host([dir="rtl"]) .iconContainer { + transform: scaleX(-1); } #content { - padding-block: var( - --mod-accordion-item-content-area-top-to-content, - var(--spectrum-accordion-item-content-area-top-to-content) - ) - var( - --mod-accordion-item-content-area-bottom-to-content, - var(--spectrum-accordion-item-content-area-bottom-to-content) - ); - padding-inline: var( - --mod-accordion-component-edge-to-text, - var(--spectrum-accordion-component-edge-to-text) - ) - var( - --mod-accordion-component-edge-to-text, - var(--spectrum-accordion-component-edge-to-text) - ); - color: var( - --mod-accordion-item-content-color, - var(--spectrum-accordion-item-content-color) - ); - font-weight: var( - --mod-accordion-item-content-font-weight, - var(--spectrum-accordion-item-content-font-weight) - ); - font-style: var( - --mod-accordion-item-content-font-style, - var(--spectrum-accordion-item-content-font-style) - ); - font-size: var( - --mod-accordion-item-content-font-size, - var(--spectrum-accordion-item-content-font-size) - ); - font-family: var( - --mod-accordion-item-content-font, - var(--spectrum-accordion-item-content-font) - ); - line-height: var( - --mod-accordion-item-content-line-height, - var(--spectrum-accordion-item-content-line-height) - ); - display: none; + padding-block: var( + --mod-accordion-item-content-area-top-to-content, + var(--spectrum-accordion-item-content-area-top-to-content) + ) + var( + --mod-accordion-item-content-area-bottom-to-content, + var(--spectrum-accordion-item-content-area-bottom-to-content) + ); + padding-inline: var( + --mod-accordion-component-edge-to-text, + var(--spectrum-accordion-component-edge-to-text) + ) + var( + --mod-accordion-component-edge-to-text, + var(--spectrum-accordion-component-edge-to-text) + ); + color: var( + --mod-accordion-item-content-color, + var(--spectrum-accordion-item-content-color) + ); + font-weight: var( + --mod-accordion-item-content-font-weight, + var(--spectrum-accordion-item-content-font-weight) + ); + font-style: var( + --mod-accordion-item-content-font-style, + var(--spectrum-accordion-item-content-font-style) + ); + font-size: var( + --mod-accordion-item-content-font-size, + var(--spectrum-accordion-item-content-font-size) + ); + font-family: var( + --mod-accordion-item-content-font, + var(--spectrum-accordion-item-content-font) + ); + line-height: var( + --mod-accordion-item-content-line-height, + var(--spectrum-accordion-item-content-line-height) + ); + display: none; } #header { - box-sizing: border-box; - padding-block: var( - --mod-accordion-item-header-top-to-text-space, - var(--spectrum-accordion-item-header-top-to-text-space) - ) - var( - --mod-accordion-item-header-bottom-to-text-space, - var(--spectrum-accordion-item-header-bottom-to-text-space) - ); - min-block-size: var( - --mod-accordion-min-block-size, - var(--spectrum-accordion-min-block-size) - ); - line-height: var( - --mod-accordion-item-header-line-height, - var(--spectrum-accordion-item-header-line-height) - ); - text-overflow: ellipsis; - cursor: pointer; - font-size: var( - --mod-accordion-item-header-font-size, - var(--spectrum-accordion-item-header-font-size) - ); - font-weight: var( - --mod-accordion-item-header-font-weight, - var(--spectrum-accordion-item-header-font-weight) - ); - font-style: var( - --mod-accordion-item-header-font-style, - var(--spectrum-accordion-item-header-font-style) - ); - font-family: var( - --mod-accordion-item-header-font, - var(--spectrum-accordion-item-header-font) - ); - appearance: none; - text-align: start; - inline-size: 100%; - color: var( - --mod-accordion-item-header-color-default, - var(--spectrum-accordion-item-header-color-default) - ); - background-color: var( - --mod-accordion-background-color-default, - var(--spectrum-accordion-background-color-default) - ); - border: 0; - justify-content: flex-start; - align-items: center; - padding-inline-start: calc( - var( - --mod-accordion-disclosure-indicator-to-text-space, - var(--spectrum-accordion-disclosure-indicator-to-text-space) - ) + - var( - --mod-accordion-disclosure-indicator-height, - var(--spectrum-accordion-disclosure-indicator-height) - ) - ); - padding-inline-end: var( - --mod-accordion-edge-to-text-space, - var(--spectrum-accordion-edge-to-text-space) - ); - display: flex; - position: relative; + box-sizing: border-box; + padding-block: var( + --mod-accordion-item-header-top-to-text-space, + var(--spectrum-accordion-item-header-top-to-text-space) + ) + var( + --mod-accordion-item-header-bottom-to-text-space, + var(--spectrum-accordion-item-header-bottom-to-text-space) + ); + min-block-size: var( + --mod-accordion-min-block-size, + var(--spectrum-accordion-min-block-size) + ); + line-height: var( + --mod-accordion-item-header-line-height, + var(--spectrum-accordion-item-header-line-height) + ); + text-overflow: ellipsis; + cursor: pointer; + font-size: var( + --mod-accordion-item-header-font-size, + var(--spectrum-accordion-item-header-font-size) + ); + font-weight: var( + --mod-accordion-item-header-font-weight, + var(--spectrum-accordion-item-header-font-weight) + ); + font-style: var( + --mod-accordion-item-header-font-style, + var(--spectrum-accordion-item-header-font-style) + ); + font-family: var( + --mod-accordion-item-header-font, + var(--spectrum-accordion-item-header-font) + ); + appearance: none; + text-align: start; + inline-size: 100%; + color: var( + --mod-accordion-item-header-color-default, + var(--spectrum-accordion-item-header-color-default) + ); + background-color: var( + --mod-accordion-background-color-default, + var(--spectrum-accordion-background-color-default) + ); + border: 0; + justify-content: flex-start; + align-items: center; + padding-inline-start: calc( + var( + --mod-accordion-disclosure-indicator-to-text-space, + var(--spectrum-accordion-disclosure-indicator-to-text-space) + ) + + var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) + ) + ); + padding-inline-end: var( + --mod-accordion-edge-to-text-space, + var(--spectrum-accordion-edge-to-text-space) + ); + display: flex; + position: relative; } #header:focus { - outline: none; + outline: none; } #header:focus:after { - content: ''; - position: absolute; - inset-inline-start: 0; + content: ""; + position: absolute; + inset-inline-start: 0; } #header:focus-visible { - border-radius: var( - --mod-accordion-corner-radius, - var(--spectrum-accordion-corner-radius) - ); - outline: var( - --mod-accordion-focus-indicator-thickness, - var(--spectrum-accordion-focus-indicator-thickness) - ) - solid - var( - --mod-accordion-focus-indicator-color, - var(--spectrum-accordion-focus-indicator-color) - ); - background-color: var( - --mod-accordion-background-color-key-focus, - var(--spectrum-accordion-background-color-key-focus) - ); - color: var( - --mod-accordion-item-header-color-key-focus, - var(--spectrum-accordion-item-header-color-key-focus) - ); - outline-offset: calc( - var( - --mod-accordion-focus-indicator-gap, - var(--spectrum-accordion-focus-indicator-gap) - ) * -1 - ); + border-radius: var( + --mod-accordion-corner-radius, + var(--spectrum-accordion-corner-radius) + ); + outline: var( + --mod-accordion-focus-indicator-thickness, + var(--spectrum-accordion-focus-indicator-thickness) + ) + solid + var( + --mod-accordion-focus-indicator-color, + var(--spectrum-accordion-focus-indicator-color) + ); + background-color: var( + --mod-accordion-background-color-key-focus, + var(--spectrum-accordion-background-color-key-focus) + ); + color: var( + --mod-accordion-item-header-color-key-focus, + var(--spectrum-accordion-item-header-color-key-focus) + ); + outline-offset: calc( + var( + --mod-accordion-focus-indicator-gap, + var(--spectrum-accordion-focus-indicator-gap) + ) * + -1 + ); } #header:active { - background-color: var( - --mod-accordion-background-color-down, - var(--spectrum-accordion-background-color-down) - ); - color: var( - --mod-accordion-item-header-color-down, - var(--spectrum-accordion-item-header-color-down) - ); + background-color: var( + --mod-accordion-background-color-down, + var(--spectrum-accordion-background-color-down) + ); + color: var( + --mod-accordion-item-header-color-down, + var(--spectrum-accordion-item-header-color-down) + ); } :host([disabled]) #header, :host([disabled]) #header:focus-visible { - color: var( - --mod-accordion-item-header-disabled-color, - var(--spectrum-accordion-item-header-disabled-color) - ); - background-color: initial; + color: var( + --mod-accordion-item-header-disabled-color, + var(--spectrum-accordion-item-header-disabled-color) + ); + background-color: initial; } @media (hover: hover) { - #header:hover { - background-color: var( - --mod-accordion-background-color-hover, - var(--spectrum-accordion-background-color-hover) - ); - } + #header:hover { + background-color: var( + --mod-accordion-background-color-hover, + var(--spectrum-accordion-background-color-hover) + ); + } - #header:hover, - #header:hover + .iconContainer { - color: var( - --mod-accordion-item-header-color-hover, - var(--spectrum-accordion-item-header-color-hover) - ); - } + #header:hover, + #header:hover + .iconContainer { + color: var( + --mod-accordion-item-header-color-hover, + var(--spectrum-accordion-item-header-color-hover) + ); + } - :host([open]) #header:hover { - background-color: var( - --mod-accordion-background-color-hover, - var(--spectrum-accordion-background-color-hover) - ); - } + :host([open]) #header:hover { + background-color: var( + --mod-accordion-background-color-hover, + var(--spectrum-accordion-background-color-hover) + ); + } - :host([disabled]) #header:hover { - color: var( - --mod-accordion-item-header-disabled-color, - var(--spectrum-accordion-item-header-disabled-color) - ); - background-color: initial; - } + :host([disabled]) #header:hover { + color: var( + --mod-accordion-item-header-disabled-color, + var(--spectrum-accordion-item-header-disabled-color) + ); + background-color: initial; + } } :host([disabled]) #header + .iconContainer { - color: var( - --mod-accordion-item-header-disabled-color, - var(--spectrum-accordion-item-header-disabled-color) - ); + color: var( + --mod-accordion-item-header-disabled-color, + var(--spectrum-accordion-item-header-disabled-color) + ); } :host([disabled]) #content { - color: var( - --mod-accordion-item-content-disabled-color, - var(--spectrum-accordion-item-content-disabled-color) - ); + color: var( + --mod-accordion-item-content-disabled-color, + var(--spectrum-accordion-item-content-disabled-color) + ); } :host([open]) > #heading > .iconContainer > .indicator, :host([open]) > .iconContainer > .indicator { - transform: rotate(90deg); - transform: var(--spectrum-logical-rotation,) rotate(90deg); + transform: rotate(90deg); + transform: var(--spectrum-logical-rotation,) rotate(90deg); } :host([open]) > #content { - display: block; + display: block; } :host([disabled]) #header { - cursor: default; + cursor: default; } @media (forced-colors: active) { - #header:after { - forced-color-adjust: none; - content: ''; - position: absolute; - inset-inline-start: 0; - } + #header:after { + forced-color-adjust: none; + content: ""; + position: absolute; + inset-inline-start: 0; + } } diff --git a/packages/accordion/src/spectrum-accordion.css b/packages/accordion/src/spectrum-accordion.css index c86c1c4862..df57391b0e 100644 --- a/packages/accordion/src/spectrum-accordion.css +++ b/packages/accordion/src/spectrum-accordion.css @@ -12,45 +12,45 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-accordion-min-block-size: max( - var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), - calc( - var( - --mod-accordion-item-header-top-to-text-space, - var(--spectrum-accordion-item-header-top-to-text-space) - ) + - var( - --mod-accordion-item-header-bottom-to-text-space, - var(--spectrum-accordion-item-header-bottom-to-text-space) - ) + - var( - --mod-accordion-item-header-font-size, - var(--spectrum-accordion-item-header-font-size) - ) * - var( - --mod-accordion-item-header-line-height, - var(--spectrum-accordion-item-header-line-height) - ) - ) - ); - margin: 0; - padding: 0; - list-style: none; - display: block; + --spectrum-accordion-min-block-size: max( + var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), + calc( + var( + --mod-accordion-item-header-top-to-text-space, + var(--spectrum-accordion-item-header-top-to-text-space) + ) + + var( + --mod-accordion-item-header-bottom-to-text-space, + var(--spectrum-accordion-item-header-bottom-to-text-space) + ) + + var( + --mod-accordion-item-header-font-size, + var(--spectrum-accordion-item-header-font-size) + ) * + var( + --mod-accordion-item-header-line-height, + var(--spectrum-accordion-item-header-line-height) + ) + ) + ); + margin: 0; + padding: 0; + list-style: none; + display: block; } :host:lang(ja), :host:lang(ko), :host:lang(zh) { - --spectrum-accordion-item-header-line-height: var( - --spectrum-accordion-item-header-line-height-cjk - ); - --spectrum-accordion-item-content-line-height: var( - --spectrum-accordion-item-content-line-height-cjk - ); + --spectrum-accordion-item-header-line-height: var( + --spectrum-accordion-item-header-line-height-cjk + ); + --spectrum-accordion-item-content-line-height: var( + --spectrum-accordion-item-content-line-height-cjk + ); } :host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +:host([dir="rtl"]) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } diff --git a/packages/action-bar/src/action-bar-overrides.css b/packages/action-bar/src/action-bar-overrides.css index c6227c741f..d6a0511c26 100644 --- a/packages/action-bar/src/action-bar-overrides.css +++ b/packages/action-bar/src/action-bar-overrides.css @@ -12,62 +12,62 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-actionbar-height: var(--system-action-bar-height); - --spectrum-actionbar-corner-radius: var(--system-action-bar-corner-radius); - --spectrum-actionbar-item-counter-font-size: var( - --system-action-bar-item-counter-font-size - ); - --spectrum-actionbar-item-counter-line-height: var( - --system-action-bar-item-counter-line-height - ); - --spectrum-actionbar-item-counter-color: var( - --system-action-bar-item-counter-color - ); - --spectrum-actionbar-item-counter-line-height-cjk: var( - --system-action-bar-item-counter-line-height-cjk - ); - --spectrum-actionbar-popover-background-color: var( - --system-action-bar-popover-background-color - ); - --spectrum-actionbar-popover-border-color: var( - --system-action-bar-popover-border-color - ); - --spectrum-actionbar-emphasized-background-color: var( - --system-action-bar-emphasized-background-color - ); - --spectrum-actionbar-emphasized-item-counter-color: var( - --system-action-bar-emphasized-item-counter-color - ); - --spectrum-actionbar-spacing-outer-edge: var( - --system-action-bar-spacing-outer-edge - ); - --spectrum-actionbar-spacing-close-button-top: var( - --system-action-bar-spacing-close-button-top - ); - --spectrum-actionbar-spacing-close-button-start: var( - --system-action-bar-spacing-close-button-start - ); - --spectrum-actionbar-spacing-close-button-end: var( - --system-action-bar-spacing-close-button-end - ); - --spectrum-actionbar-spacing-item-counter-top: var( - --system-action-bar-spacing-item-counter-top - ); - --spectrum-actionbar-spacing-item-counter-end: var( - --system-action-bar-spacing-item-counter-end - ); - --spectrum-actionbar-spacing-action-group-top: var( - --system-action-bar-spacing-action-group-top - ); - --spectrum-actionbar-spacing-action-group-end: var( - --system-action-bar-spacing-action-group-end - ); - --spectrum-actionbar-shadow-horizontal: var( - --system-action-bar-shadow-horizontal - ); - --spectrum-actionbar-shadow-vertical: var( - --system-action-bar-shadow-vertical - ); - --spectrum-actionbar-shadow-blur: var(--system-action-bar-shadow-blur); - --spectrum-actionbar-shadow-color: var(--system-action-bar-shadow-color); + --spectrum-actionbar-height: var(--system-action-bar-height); + --spectrum-actionbar-corner-radius: var(--system-action-bar-corner-radius); + --spectrum-actionbar-item-counter-font-size: var( + --system-action-bar-item-counter-font-size + ); + --spectrum-actionbar-item-counter-line-height: var( + --system-action-bar-item-counter-line-height + ); + --spectrum-actionbar-item-counter-color: var( + --system-action-bar-item-counter-color + ); + --spectrum-actionbar-item-counter-line-height-cjk: var( + --system-action-bar-item-counter-line-height-cjk + ); + --spectrum-actionbar-popover-background-color: var( + --system-action-bar-popover-background-color + ); + --spectrum-actionbar-popover-border-color: var( + --system-action-bar-popover-border-color + ); + --spectrum-actionbar-emphasized-background-color: var( + --system-action-bar-emphasized-background-color + ); + --spectrum-actionbar-emphasized-item-counter-color: var( + --system-action-bar-emphasized-item-counter-color + ); + --spectrum-actionbar-spacing-outer-edge: var( + --system-action-bar-spacing-outer-edge + ); + --spectrum-actionbar-spacing-close-button-top: var( + --system-action-bar-spacing-close-button-top + ); + --spectrum-actionbar-spacing-close-button-start: var( + --system-action-bar-spacing-close-button-start + ); + --spectrum-actionbar-spacing-close-button-end: var( + --system-action-bar-spacing-close-button-end + ); + --spectrum-actionbar-spacing-item-counter-top: var( + --system-action-bar-spacing-item-counter-top + ); + --spectrum-actionbar-spacing-item-counter-end: var( + --system-action-bar-spacing-item-counter-end + ); + --spectrum-actionbar-spacing-action-group-top: var( + --system-action-bar-spacing-action-group-top + ); + --spectrum-actionbar-spacing-action-group-end: var( + --system-action-bar-spacing-action-group-end + ); + --spectrum-actionbar-shadow-horizontal: var( + --system-action-bar-shadow-horizontal + ); + --spectrum-actionbar-shadow-vertical: var( + --system-action-bar-shadow-vertical + ); + --spectrum-actionbar-shadow-blur: var(--system-action-bar-shadow-blur); + --spectrum-actionbar-shadow-color: var(--system-action-bar-shadow-color); } diff --git a/packages/action-bar/src/spectrum-action-bar.css b/packages/action-bar/src/spectrum-action-bar.css index d12552d3d2..41369aa514 100644 --- a/packages/action-bar/src/spectrum-action-bar.css +++ b/packages/action-bar/src/spectrum-action-bar.css @@ -12,167 +12,162 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host, - :host([emphasized]) #popover { - --highcontrast-actionbar-popover-border-color: CanvasText; - } + :host, + :host([emphasized]) #popover { + --highcontrast-actionbar-popover-border-color: CanvasText; + } } :host { - padding: 0 - var( - --mod-actionbar-spacing-outer-edge, - var(--spectrum-actionbar-spacing-outer-edge) - ); - z-index: 1; - box-sizing: border-box; - pointer-events: none; - block-size: 0; - opacity: 0; - inset-block-end: 0; + padding: 0 + var( + --mod-actionbar-spacing-outer-edge, + var(--spectrum-actionbar-spacing-outer-edge) + ); + z-index: 1; + box-sizing: border-box; + pointer-events: none; + block-size: 0; + opacity: 0; + inset-block-end: 0; } :host([open]) { - block-size: calc( - var( - --mod-actionbar-spacing-outer-edge, - var(--spectrum-actionbar-spacing-outer-edge) - ) + var(--mod-actionbar-height, var(--spectrum-actionbar-height)) - ); - opacity: 1; + block-size: calc( + var( + --mod-actionbar-spacing-outer-edge, + var(--spectrum-actionbar-spacing-outer-edge) + ) + + var(--mod-actionbar-height, var(--spectrum-actionbar-height)) + ); + opacity: 1; } #popover { - block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height)); - box-sizing: border-box; - inline-size: 100%; - border-radius: var( - --mod-actionbar-corner-radius, - var(--spectrum-actionbar-corner-radius) - ); - border-color: var( - --highcontrast-actionbar-popover-border-color, - var( - --mod-actionbar-popover-border-color, - var(--spectrum-actionbar-popover-border-color) - ) - ); - background-color: var( - --mod-actionbar-popover-background-color, - var(--spectrum-actionbar-popover-background-color) - ); - filter: drop-shadow( - var( - --mod-actionbar-shadow-horizontal, - var(--spectrum-actionbar-shadow-horizontal) - ) - var( - --mod-actionbar-shadow-vertical, - var(--spectrum-actionbar-shadow-vertical) - ) - var( - --mod-actionbar-shadow-blur, - var(--spectrum-actionbar-shadow-blur) - ) - var( - --mod-actionbar-shadow-color, - var(--spectrum-actionbar-shadow-color) - ) - ); - pointer-events: auto; - flex-direction: row; - margin: auto; - padding-block: 0; - display: flex; - position: relative; + block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height)); + box-sizing: border-box; + inline-size: 100%; + border-radius: var( + --mod-actionbar-corner-radius, + var(--spectrum-actionbar-corner-radius) + ); + border-color: var( + --highcontrast-actionbar-popover-border-color, + var( + --mod-actionbar-popover-border-color, + var(--spectrum-actionbar-popover-border-color) + ) + ); + background-color: var( + --mod-actionbar-popover-background-color, + var(--spectrum-actionbar-popover-background-color) + ); + filter: drop-shadow( + var( + --mod-actionbar-shadow-horizontal, + var(--spectrum-actionbar-shadow-horizontal) + ) + var( + --mod-actionbar-shadow-vertical, + var(--spectrum-actionbar-shadow-vertical) + ) + var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) + var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color)) + ); + pointer-events: auto; + flex-direction: row; + margin: auto; + padding-block: 0; + display: flex; + position: relative; } .close-button { - flex-shrink: 0; - margin-block-start: var( - --mod-actionbar-spacing-close-button-top, - var(--spectrum-actionbar-spacing-close-button-top) - ); - margin-inline-start: var( - --mod-actionbar-spacing-close-button-start, - var(--spectrum-actionbar-spacing-close-button-start) - ); - margin-inline-end: var( - --mod-actionbar-spacing-close-button-end, - var(--spectrum-actionbar-spacing-close-button-end) - ); + flex-shrink: 0; + margin-block-start: var( + --mod-actionbar-spacing-close-button-top, + var(--spectrum-actionbar-spacing-close-button-top) + ); + margin-inline-start: var( + --mod-actionbar-spacing-close-button-start, + var(--spectrum-actionbar-spacing-close-button-start) + ); + margin-inline-end: var( + --mod-actionbar-spacing-close-button-end, + var(--spectrum-actionbar-spacing-close-button-end) + ); } .field-label { - font-size: var( - --mod-actionbar-item-counter-font-size, - var(--spectrum-actionbar-item-counter-font-size) - ); - color: var( - --mod-actionbar-item-counter-color, - var(--spectrum-actionbar-item-counter-color) - ); - line-height: var( - --mod-actionbar-item-counter-line-height, - var(--spectrum-actionbar-item-counter-line-height) - ); - margin-block-start: var( - --mod-actionbar-spacing-item-counter-top, - var(--spectrum-actionbar-spacing-item-counter-top) - ); - margin-inline-end: var( - --mod-actionbar-spacing-item-counter-end, - var(--spectrum-actionbar-spacing-item-counter-end) - ); - padding: 0; + font-size: var( + --mod-actionbar-item-counter-font-size, + var(--spectrum-actionbar-item-counter-font-size) + ); + color: var( + --mod-actionbar-item-counter-color, + var(--spectrum-actionbar-item-counter-color) + ); + line-height: var( + --mod-actionbar-item-counter-line-height, + var(--spectrum-actionbar-item-counter-line-height) + ); + margin-block-start: var( + --mod-actionbar-spacing-item-counter-top, + var(--spectrum-actionbar-spacing-item-counter-top) + ); + margin-inline-end: var( + --mod-actionbar-spacing-item-counter-end, + var(--spectrum-actionbar-spacing-item-counter-end) + ); + padding: 0; } .field-label:lang(ja), .field-label:lang(ko), .field-label:lang(zh) { - line-height: var( - --mod-actionbar-item-counter-line-height-cjk, - var(--spectrum-actionbar-item-counter-line-height-cjk) - ); + line-height: var( + --mod-actionbar-item-counter-line-height-cjk, + var(--spectrum-actionbar-item-counter-line-height-cjk) + ); } .action-group { - margin-block-start: var( - --mod-actionbar-spacing-action-group-top, - var(--spectrum-actionbar-spacing-action-group-top) - ); - margin-inline-start: auto; - margin-inline-end: var( - --mod-actionbar-spacing-action-group-end, - var(--spectrum-actionbar-spacing-action-group-end) - ); + margin-block-start: var( + --mod-actionbar-spacing-action-group-top, + var(--spectrum-actionbar-spacing-action-group-top) + ); + margin-inline-start: auto; + margin-inline-end: var( + --mod-actionbar-spacing-action-group-end, + var(--spectrum-actionbar-spacing-action-group-end) + ); } :host([emphasized]) #popover { - filter: none; - background-color: var( - --mod-actionbar-emphasized-background-color, - var(--spectrum-actionbar-emphasized-background-color) - ); - border-color: #0000; + filter: none; + background-color: var( + --mod-actionbar-emphasized-background-color, + var(--spectrum-actionbar-emphasized-background-color) + ); + border-color: #0000; } :host([emphasized]) .field-label { - color: var( - --mod-actionbar-emphasized-item-counter-color, - var(--spectrum-actionbar-emphasized-item-counter-color) - ); + color: var( + --mod-actionbar-emphasized-item-counter-color, + var(--spectrum-actionbar-emphasized-item-counter-color) + ); } -:host([variant='sticky']) { - position: sticky; - inset-inline: 0; +:host([variant="sticky"]) { + position: sticky; + inset-inline: 0; } -:host([variant='fixed']) { - position: fixed; +:host([variant="fixed"]) { + position: fixed; } :host([flexible]) #popover { - inline-size: auto; + inline-size: auto; } diff --git a/packages/action-button/src/action-button-overrides.css b/packages/action-button/src/action-button-overrides.css index c34e4f0976..f5d9860f28 100644 --- a/packages/action-button/src/action-button-overrides.css +++ b/packages/action-button/src/action-button-overrides.css @@ -12,580 +12,580 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-actionbutton-animation-duration: var( - --system-action-button-animation-duration - ); - --spectrum-actionbutton-border-radius: var( - --system-action-button-border-radius - ); - --spectrum-actionbutton-border-width: var( - --system-action-button-border-width - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-content-color-focus - ); - --spectrum-actionbutton-focus-indicator-gap: var( - --system-action-button-focus-indicator-gap - ); - --spectrum-actionbutton-focus-indicator-thickness: var( - --system-action-button-focus-indicator-thickness - ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-action-button-focus-indicator-color - ); - --spectrum-actionbutton-background-color-default: var( - --system-action-button-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-background-color-focus - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-border-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-border-color-disabled - ); - --spectrum-actionbutton-content-color-disabled: var( - --system-action-button-content-color-disabled - ); - --spectrum-actionbutton-min-width: var(--system-action-button-min-width); - --spectrum-actionbutton-height: var(--system-action-button-height); - --spectrum-actionbutton-icon-size: var(--system-action-button-icon-size); - --spectrum-actionbutton-font-size: var(--system-action-button-font-size); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-edge-to-text-size - ); + --spectrum-actionbutton-animation-duration: var( + --system-action-button-animation-duration + ); + --spectrum-actionbutton-border-radius: var( + --system-action-button-border-radius + ); + --spectrum-actionbutton-border-width: var( + --system-action-button-border-width + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-content-color-focus + ); + --spectrum-actionbutton-focus-indicator-gap: var( + --system-action-button-focus-indicator-gap + ); + --spectrum-actionbutton-focus-indicator-thickness: var( + --system-action-button-focus-indicator-thickness + ); + --spectrum-actionbutton-focus-indicator-color: var( + --system-action-button-focus-indicator-color + ); + --spectrum-actionbutton-background-color-default: var( + --system-action-button-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-background-color-focus + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-border-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-background-color-disabled + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-border-color-disabled + ); + --spectrum-actionbutton-content-color-disabled: var( + --system-action-button-content-color-disabled + ); + --spectrum-actionbutton-min-width: var(--system-action-button-min-width); + --spectrum-actionbutton-height: var(--system-action-button-height); + --spectrum-actionbutton-icon-size: var(--system-action-button-icon-size); + --spectrum-actionbutton-font-size: var(--system-action-button-font-size); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-edge-to-text-size + ); } :host([quiet]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-quiet-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-quiet-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-quiet-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-quiet-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-quiet-background-color-disabled - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-quiet-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-quiet-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-quiet-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-quiet-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-quiet-border-color-disabled - ); + --spectrum-actionbutton-background-color-default: var( + --system-action-button-quiet-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-quiet-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-quiet-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-quiet-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-quiet-background-color-disabled + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-quiet-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-quiet-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-quiet-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-quiet-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-quiet-border-color-disabled + ); } :host([selected]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-selected-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-selected-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-selected-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-selected-background-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-selected-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-selected-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-selected-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-selected-content-color-focus - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-selected-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-selected-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-selected-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-selected-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-selected-border-color-disabled - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-selected-background-color-disabled - ); + --spectrum-actionbutton-background-color-default: var( + --system-action-button-selected-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-selected-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-selected-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-selected-background-color-focus + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-selected-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-selected-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-selected-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-selected-content-color-focus + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-selected-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-selected-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-selected-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-selected-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-selected-border-color-disabled + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-selected-background-color-disabled + ); } :host([selected][emphasized]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-selected-emphasized-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-selected-emphasized-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-selected-emphasized-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-selected-emphasized-background-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-selected-emphasized-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-selected-emphasized-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-selected-emphasized-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-selected-emphasized-content-color-focus - ); + --spectrum-actionbutton-background-color-default: var( + --system-action-button-selected-emphasized-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-selected-emphasized-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-selected-emphasized-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-selected-emphasized-background-color-focus + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-selected-emphasized-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-selected-emphasized-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-selected-emphasized-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-selected-emphasized-content-color-focus + ); } -:host([static-color='black'][quiet]) { - --spectrum-actionbutton-border-color-default: var( - --system-action-button-static-black-quiet-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-static-black-quiet-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-static-black-quiet-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-static-black-quiet-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-black-quiet-border-color-disabled - ); +:host([static-color="black"][quiet]) { + --spectrum-actionbutton-border-color-default: var( + --system-action-button-static-black-quiet-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-static-black-quiet-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-static-black-quiet-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-static-black-quiet-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-black-quiet-border-color-disabled + ); } -:host([static-color='white'][quiet]) { - --spectrum-actionbutton-border-color-default: var( - --system-action-button-static-white-quiet-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-static-white-quiet-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-static-white-quiet-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-static-white-quiet-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-white-quiet-border-color-disabled - ); +:host([static-color="white"][quiet]) { + --spectrum-actionbutton-border-color-default: var( + --system-action-button-static-white-quiet-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-static-white-quiet-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-static-white-quiet-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-static-white-quiet-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-white-quiet-border-color-disabled + ); } -:host([static-color='black']) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-black-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-black-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-black-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-black-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-static-black-background-color-disabled - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-static-black-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-static-black-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-static-black-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-static-black-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-black-border-color-disabled - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-black-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-black-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-black-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-black-content-color-focus - ); - --spectrum-actionbutton-content-color-disabled: var( - --system-action-button-static-black-content-color-disabled - ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-action-button-static-black-focus-indicator-color - ); +:host([static-color="black"]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-black-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-black-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-black-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-black-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-static-black-background-color-disabled + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-static-black-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-static-black-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-static-black-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-static-black-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-black-border-color-disabled + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-black-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-static-black-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-static-black-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-static-black-content-color-focus + ); + --spectrum-actionbutton-content-color-disabled: var( + --system-action-button-static-black-content-color-disabled + ); + --spectrum-actionbutton-focus-indicator-color: var( + --system-action-button-static-black-focus-indicator-color + ); } -:host([static-color='black'][selected]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-black-selected-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-black-selected-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-black-selected-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-black-selected-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-static-black-selected-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-black-selected-border-color-disabled - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-black-selected-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-black-selected-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-black-selected-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-black-selected-content-color-focus - ); +:host([static-color="black"][selected]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-black-selected-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-black-selected-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-black-selected-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-black-selected-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-static-black-selected-background-color-disabled + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-black-selected-border-color-disabled + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-black-selected-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-static-black-selected-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-static-black-selected-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-static-black-selected-content-color-focus + ); } -:host([static-color='black'][selected][emphasized]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-black-selected-emphasized-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-black-selected-emphasized-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-black-selected-emphasized-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-black-selected-emphasized-background-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-black-selected-emphasized-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-black-selected-emphasized-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-black-selected-emphasized-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-black-selected-emphasized-content-color-focus - ); +:host([static-color="black"][selected][emphasized]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-black-selected-emphasized-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-black-selected-emphasized-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-black-selected-emphasized-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-black-selected-emphasized-background-color-focus + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-black-selected-emphasized-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-static-black-selected-emphasized-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-static-black-selected-emphasized-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-static-black-selected-emphasized-content-color-focus + ); } -:host([static-color='white']) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-white-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-white-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-white-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-white-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-static-white-background-color-disabled - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-static-white-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-static-white-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-static-white-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-static-white-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-white-border-color-disabled - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-white-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-white-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-white-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-white-content-color-focus - ); - --spectrum-actionbutton-content-color-disabled: var( - --system-action-button-static-white-content-color-disabled - ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-action-button-static-white-focus-indicator-color - ); +:host([static-color="white"]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-white-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-white-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-white-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-white-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-static-white-background-color-disabled + ); + --spectrum-actionbutton-border-color-default: var( + --system-action-button-static-white-border-color-default + ); + --spectrum-actionbutton-border-color-hover: var( + --system-action-button-static-white-border-color-hover + ); + --spectrum-actionbutton-border-color-down: var( + --system-action-button-static-white-border-color-down + ); + --spectrum-actionbutton-border-color-focus: var( + --system-action-button-static-white-border-color-focus + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-white-border-color-disabled + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-white-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-static-white-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-static-white-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-static-white-content-color-focus + ); + --spectrum-actionbutton-content-color-disabled: var( + --system-action-button-static-white-content-color-disabled + ); + --spectrum-actionbutton-focus-indicator-color: var( + --system-action-button-static-white-focus-indicator-color + ); } -:host([static-color='white'][selected]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-white-selected-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-white-selected-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-white-selected-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-white-selected-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-static-white-selected-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-white-selected-border-color-disabled - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-white-selected-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-white-selected-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-white-selected-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-white-selected-content-color-focus - ); +:host([static-color="white"][selected]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-white-selected-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-white-selected-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-white-selected-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-white-selected-background-color-focus + ); + --spectrum-actionbutton-background-color-disabled: var( + --system-action-button-static-white-selected-background-color-disabled + ); + --spectrum-actionbutton-border-color-disabled: var( + --system-action-button-static-white-selected-border-color-disabled + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-white-selected-content-color-default + ); + --spectrum-actionbutton-content-color-hover: var( + --system-action-button-static-white-selected-content-color-hover + ); + --spectrum-actionbutton-content-color-down: var( + --system-action-button-static-white-selected-content-color-down + ); + --spectrum-actionbutton-content-color-focus: var( + --system-action-button-static-white-selected-content-color-focus + ); } -:host([static-color='white'][selected][emphasized]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-white-selected-emphasized-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-white-selected-emphasized-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-white-selected-emphasized-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-white-selected-emphasized-background-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-white-selected-emphasized-content-color-default - ); +:host([static-color="white"][selected][emphasized]) { + --spectrum-actionbutton-background-color-default: var( + --system-action-button-static-white-selected-emphasized-background-color-default + ); + --spectrum-actionbutton-background-color-hover: var( + --system-action-button-static-white-selected-emphasized-background-color-hover + ); + --spectrum-actionbutton-background-color-down: var( + --system-action-button-static-white-selected-emphasized-background-color-down + ); + --spectrum-actionbutton-background-color-focus: var( + --system-action-button-static-white-selected-emphasized-background-color-focus + ); + --spectrum-actionbutton-content-color-default: var( + --system-action-button-static-white-selected-emphasized-content-color-default + ); } :host { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-m-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-m-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-m-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-m-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-m-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-m-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-m-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-m-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-m-edge-to-text-size - ); + --spectrum-actionbutton-min-width: var( + --system-action-button-size-m-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-m-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-m-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-m-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-m-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-m-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-m-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-m-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-m-edge-to-text-size + ); } -:host([size='xs']) { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-xs-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-xs-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-xs-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-xs-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-xs-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-xs-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-xs-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-xs-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-xs-edge-to-text-size - ); +:host([size="xs"]) { + --spectrum-actionbutton-min-width: var( + --system-action-button-size-xs-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-xs-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-xs-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-xs-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-xs-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-xs-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-xs-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-xs-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-xs-edge-to-text-size + ); } -:host([size='s']) { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-s-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-s-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-s-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-s-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-s-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-s-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-s-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-s-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-s-edge-to-text-size - ); +:host([size="s"]) { + --spectrum-actionbutton-min-width: var( + --system-action-button-size-s-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-s-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-s-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-s-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-s-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-s-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-s-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-s-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-s-edge-to-text-size + ); } -:host([size='l']) { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-l-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-l-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-l-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-l-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-l-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-l-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-l-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-l-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-l-edge-to-text-size - ); +:host([size="l"]) { + --spectrum-actionbutton-min-width: var( + --system-action-button-size-l-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-l-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-l-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-l-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-l-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-l-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-l-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-l-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-l-edge-to-text-size + ); } -:host([size='xl']) { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-xl-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-xl-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-xl-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-xl-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-xl-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-xl-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-xl-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-xl-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-xl-edge-to-text-size - ); +:host([size="xl"]) { + --spectrum-actionbutton-min-width: var( + --system-action-button-size-xl-min-width + ); + --spectrum-actionbutton-height: var(--system-action-button-size-xl-height); + --spectrum-actionbutton-icon-size: var( + --system-action-button-size-xl-icon-size + ); + --spectrum-actionbutton-font-size: var( + --system-action-button-size-xl-font-size + ); + --spectrum-actionbutton-text-to-visual: var( + --system-action-button-size-xl-text-to-visual + ); + --spectrum-actionbutton-edge-to-hold-icon: var( + --system-action-button-size-xl-edge-to-hold-icon + ); + --spectrum-actionbutton-edge-to-visual-size: var( + --system-action-button-size-xl-edge-to-visual-size + ); + --spectrum-actionbutton-edge-to-visual-only-size: var( + --system-action-button-size-xl-edge-to-visual-only-size + ); + --spectrum-actionbutton-edge-to-text-size: var( + --system-action-button-size-xl-edge-to-text-size + ); } diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css index 0555c62e68..b6341e5dc9 100644 --- a/packages/action-button/src/spectrum-action-button.css +++ b/packages/action-button/src/spectrum-action-button.css @@ -12,518 +12,516 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - cursor: pointer; - -webkit-user-select: none; - user-select: none; - box-sizing: border-box; - font-family: var( - --mod-button-font-family, - var( - --mod-sans-font-family-stack, - var(--spectrum-sans-font-family-stack) - ) - ); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - line-height: var( - --mod-button-line-height, - var(--mod-line-height-100, var(--spectrum-line-height-100)) - ); - text-transform: none; - vertical-align: top; - -webkit-appearance: button; - transition: - background - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - border-color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - box-shadow - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out; - border-style: solid; - justify-content: center; - align-items: center; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - overflow: visible; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + box-sizing: border-box; + font-family: var( + --mod-button-font-family, + var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)) + ); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: var( + --mod-button-line-height, + var(--mod-line-height-100, var(--spectrum-line-height-100)) + ); + text-transform: none; + vertical-align: top; + -webkit-appearance: button; + transition: + background + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + border-color + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + color + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + box-shadow + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out; + border-style: solid; + justify-content: center; + align-items: center; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + overflow: visible; } :host(:focus) { - outline: none; + outline: none; } :host([disabled]), :host([disabled]) { - cursor: default; + cursor: default; } -::slotted([slot='icon']) { - max-block-size: 100%; - flex-shrink: 0; +::slotted([slot="icon"]) { + max-block-size: 100%; + flex-shrink: 0; } #label { - text-align: center; - place-self: center; + text-align: center; + place-self: center; } #label:empty { - display: none; + display: none; } @media (forced-colors: active) { - :host { - --highcontrast-actionbutton-focus-indicator-color: ButtonText; - } + :host { + --highcontrast-actionbutton-focus-indicator-color: ButtonText; + } - :host:after { - forced-color-adjust: none; - } + :host:after { + forced-color-adjust: none; + } - :host([selected]) { - --highcontrast-actionbutton-background-color-default: Highlight; - --highcontrast-actionbutton-background-color-hover: Highlight; - --highcontrast-actionbutton-background-color-focus: Highlight; - --highcontrast-actionbutton-background-color-down: Highlight; - --highcontrast-actionbutton-background-color-disabled: ButtonFace; - --highcontrast-actionbutton-border-color-default: HighlightText; - --highcontrast-actionbutton-border-color-hover: HighlightText; - --highcontrast-actionbutton-border-color-focus: HighlightText; - --highcontrast-actionbutton-border-color-down: HighlightText; - --highcontrast-actionbutton-border-color-disabled: GrayText; - --highcontrast-actionbutton-content-color-default: HighlightText; - --highcontrast-actionbutton-content-color-hover: HighlightText; - --highcontrast-actionbutton-content-color-focus: HighlightText; - --highcontrast-actionbutton-content-color-down: HighlightText; - --highcontrast-actionbutton-content-color-disabled: GrayText; - } + :host([selected]) { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + } - :host([selected]) .hold-affordance, - :host([selected]) ::slotted([slot='icon']), - :host([selected]) #label { - forced-color-adjust: none; - } + :host([selected]) .hold-affordance, + :host([selected]) ::slotted([slot="icon"]), + :host([selected]) #label { + forced-color-adjust: none; + } } :host { - --spectrum-actionbutton-focus-indicator-border-radius: calc( - var(--spectrum-actionbutton-border-radius) + - var(--spectrum-actionbutton-focus-indicator-gap) - ); - --spectrum-actionbutton-edge-to-visual: calc( - var(--spectrum-actionbutton-edge-to-visual-size) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-text: calc( - var(--spectrum-actionbutton-edge-to-text-size) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-visual-only: calc( - var(--spectrum-actionbutton-edge-to-visual-only-size) - - var(--spectrum-actionbutton-border-width) - ); - min-inline-size: var( - --mod-actionbutton-min-width, - var(--spectrum-actionbutton-min-width) - ); - block-size: var( - --mod-actionbutton-height, - var(--spectrum-actionbutton-height) - ); - border-radius: var( - --mod-actionbutton-border-radius, - var(--spectrum-actionbutton-border-radius) - ); - border-width: var( - --mod-actionbutton-border-width, - var(--spectrum-actionbutton-border-width) - ); - gap: calc( - var( - --mod-actionbutton-text-to-visual, - var(--spectrum-actionbutton-text-to-visual) - ) + - var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - - var( - --mod-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - ); - padding-inline: var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ); - background-color: var( - --highcontrast-actionbutton-background-color-default, - var( - --mod-actionbutton-background-color-default, - var(--spectrum-actionbutton-background-color-default) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-default, - var( - --mod-actionbutton-border-color-default, - var(--spectrum-actionbutton-border-color-default) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-default, - var( - --mod-actionbutton-content-color-default, - var(--spectrum-actionbutton-content-color-default) - ) - ); - position: relative; + --spectrum-actionbutton-focus-indicator-border-radius: calc( + var(--spectrum-actionbutton-border-radius) + + var(--spectrum-actionbutton-focus-indicator-gap) + ); + --spectrum-actionbutton-edge-to-visual: calc( + var(--spectrum-actionbutton-edge-to-visual-size) - + var(--spectrum-actionbutton-border-width) + ); + --spectrum-actionbutton-edge-to-text: calc( + var(--spectrum-actionbutton-edge-to-text-size) - + var(--spectrum-actionbutton-border-width) + ); + --spectrum-actionbutton-edge-to-visual-only: calc( + var(--spectrum-actionbutton-edge-to-visual-only-size) - + var(--spectrum-actionbutton-border-width) + ); + min-inline-size: var( + --mod-actionbutton-min-width, + var(--spectrum-actionbutton-min-width) + ); + block-size: var( + --mod-actionbutton-height, + var(--spectrum-actionbutton-height) + ); + border-radius: var( + --mod-actionbutton-border-radius, + var(--spectrum-actionbutton-border-radius) + ); + border-width: var( + --mod-actionbutton-border-width, + var(--spectrum-actionbutton-border-width) + ); + gap: calc( + var( + --mod-actionbutton-text-to-visual, + var(--spectrum-actionbutton-text-to-visual) + ) + + var( + --mod-actionbutton-edge-to-text, + var(--spectrum-actionbutton-edge-to-text) + ) - + var( + --mod-actionbutton-edge-to-visual-only, + var(--spectrum-actionbutton-edge-to-visual-only) + ) + ); + padding-inline: var( + --mod-actionbutton-edge-to-text, + var(--spectrum-actionbutton-edge-to-text) + ); + background-color: var( + --highcontrast-actionbutton-background-color-default, + var( + --mod-actionbutton-background-color-default, + var(--spectrum-actionbutton-background-color-default) + ) + ); + border-color: var( + --highcontrast-actionbutton-border-color-default, + var( + --mod-actionbutton-border-color-default, + var(--spectrum-actionbutton-border-color-default) + ) + ); + color: var( + --highcontrast-actionbutton-content-color-default, + var( + --mod-actionbutton-content-color-default, + var(--spectrum-actionbutton-content-color-default) + ) + ); + position: relative; } :host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +:host([dir="rtl"]) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } @media (hover: hover) { - :host(:hover) { - background-color: var( - --highcontrast-actionbutton-background-color-hover, - var( - --mod-actionbutton-background-color-hover, - var(--spectrum-actionbutton-background-color-hover) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-hover, - var( - --mod-actionbutton-border-color-hover, - var(--spectrum-actionbutton-border-color-hover) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-hover, - var( - --mod-actionbutton-content-color-hover, - var(--spectrum-actionbutton-content-color-hover) - ) - ); - } + :host(:hover) { + background-color: var( + --highcontrast-actionbutton-background-color-hover, + var( + --mod-actionbutton-background-color-hover, + var(--spectrum-actionbutton-background-color-hover) + ) + ); + border-color: var( + --highcontrast-actionbutton-border-color-hover, + var( + --mod-actionbutton-border-color-hover, + var(--spectrum-actionbutton-border-color-hover) + ) + ); + color: var( + --highcontrast-actionbutton-content-color-hover, + var( + --mod-actionbutton-content-color-hover, + var(--spectrum-actionbutton-content-color-hover) + ) + ); + } } :host(:focus-visible) { - background-color: var( - --highcontrast-actionbutton-background-color-focus, - var( - --mod-actionbutton-background-color-focus, - var(--spectrum-actionbutton-background-color-focus) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-focus, - var( - --mod-actionbutton-border-color-focus, - var(--spectrum-actionbutton-border-color-focus) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-focus, - var( - --mod-actionbutton-content-color-focus, - var(--spectrum-actionbutton-content-color-focus) - ) - ); + background-color: var( + --highcontrast-actionbutton-background-color-focus, + var( + --mod-actionbutton-background-color-focus, + var(--spectrum-actionbutton-background-color-focus) + ) + ); + border-color: var( + --highcontrast-actionbutton-border-color-focus, + var( + --mod-actionbutton-border-color-focus, + var(--spectrum-actionbutton-border-color-focus) + ) + ); + color: var( + --highcontrast-actionbutton-content-color-focus, + var( + --mod-actionbutton-content-color-focus, + var(--spectrum-actionbutton-content-color-focus) + ) + ); } :host(:is(:active, [active])) { - background-color: var( - --highcontrast-actionbutton-background-color-down, - var( - --mod-actionbutton-background-color-down, - var(--spectrum-actionbutton-background-color-down) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-down, - var( - --mod-actionbutton-border-color-down, - var(--spectrum-actionbutton-border-color-down) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-down, - var( - --mod-actionbutton-content-color-down, - var(--spectrum-actionbutton-content-color-down) - ) - ); + background-color: var( + --highcontrast-actionbutton-background-color-down, + var( + --mod-actionbutton-background-color-down, + var(--spectrum-actionbutton-background-color-down) + ) + ); + border-color: var( + --highcontrast-actionbutton-border-color-down, + var( + --mod-actionbutton-border-color-down, + var(--spectrum-actionbutton-border-color-down) + ) + ); + color: var( + --highcontrast-actionbutton-content-color-down, + var( + --mod-actionbutton-content-color-down, + var(--spectrum-actionbutton-content-color-down) + ) + ); } :host([disabled]), :host([disabled]) { - background-color: var( - --highcontrast-actionbutton-background-color-disabled, - var( - --mod-actionbutton-background-color-disabled, - var(--spectrum-actionbutton-background-color-disabled) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-disabled, - var( - --mod-actionbutton-border-color-disabled, - var(--spectrum-actionbutton-border-color-disabled) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-disabled, - var( - --mod-actionbutton-content-color-disabled, - var(--spectrum-actionbutton-content-color-disabled) - ) - ); + background-color: var( + --highcontrast-actionbutton-background-color-disabled, + var( + --mod-actionbutton-background-color-disabled, + var(--spectrum-actionbutton-background-color-disabled) + ) + ); + border-color: var( + --highcontrast-actionbutton-border-color-disabled, + var( + --mod-actionbutton-border-color-disabled, + var(--spectrum-actionbutton-border-color-disabled) + ) + ); + color: var( + --highcontrast-actionbutton-content-color-disabled, + var( + --mod-actionbutton-content-color-disabled, + var(--spectrum-actionbutton-content-color-disabled) + ) + ); } :host([selected]) { - --mod-actionbutton-background-color-default: var( - --mod-actionbutton-background-color-default-selected - ); - --mod-actionbutton-background-color-hover: var( - --mod-actionbutton-background-color-hover-selected - ); - --mod-actionbutton-background-color-down: var( - --mod-actionbutton-background-color-down-selected - ); - --mod-actionbutton-background-color-focus: var( - --mod-actionbutton-background-color-focus-selected - ); - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-content-color-default-selected - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-content-color-hover-selected - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-content-color-down-selected - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-content-color-focus-selected - ); + --mod-actionbutton-background-color-default: var( + --mod-actionbutton-background-color-default-selected + ); + --mod-actionbutton-background-color-hover: var( + --mod-actionbutton-background-color-hover-selected + ); + --mod-actionbutton-background-color-down: var( + --mod-actionbutton-background-color-down-selected + ); + --mod-actionbutton-background-color-focus: var( + --mod-actionbutton-background-color-focus-selected + ); + --mod-actionbutton-content-color-default: var( + --mod-actionbutton-content-color-default-selected + ); + --mod-actionbutton-content-color-hover: var( + --mod-actionbutton-content-color-hover-selected + ); + --mod-actionbutton-content-color-down: var( + --mod-actionbutton-content-color-down-selected + ); + --mod-actionbutton-content-color-focus: var( + --mod-actionbutton-content-color-focus-selected + ); } :host([selected][emphasized]) { - --mod-actionbutton-background-color-default: var( - --mod-actionbutton-background-color-default-selected-emphasized - ); - --mod-actionbutton-background-color-hover: var( - --mod-actionbutton-background-color-hover-selected-emphasized - ); - --mod-actionbutton-background-color-down: var( - --mod-actionbutton-background-color-down-selected-emphasized - ); - --mod-actionbutton-background-color-focus: var( - --mod-actionbutton-background-color-focus-selected-emphasized - ); - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-content-color-default-selected-emphasized - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-content-color-hover-selected-emphasized - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-content-color-down-selected-emphasized - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-content-color-focus-selected-emphasized - ); + --mod-actionbutton-background-color-default: var( + --mod-actionbutton-background-color-default-selected-emphasized + ); + --mod-actionbutton-background-color-hover: var( + --mod-actionbutton-background-color-hover-selected-emphasized + ); + --mod-actionbutton-background-color-down: var( + --mod-actionbutton-background-color-down-selected-emphasized + ); + --mod-actionbutton-background-color-focus: var( + --mod-actionbutton-background-color-focus-selected-emphasized + ); + --mod-actionbutton-content-color-default: var( + --mod-actionbutton-content-color-default-selected-emphasized + ); + --mod-actionbutton-content-color-hover: var( + --mod-actionbutton-content-color-hover-selected-emphasized + ); + --mod-actionbutton-content-color-down: var( + --mod-actionbutton-content-color-down-selected-emphasized + ); + --mod-actionbutton-content-color-focus: var( + --mod-actionbutton-content-color-focus-selected-emphasized + ); } -:host([selected][static-color='black']), -:host([selected][static-color='white']) { - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-static-content-color - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-static-content-color - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-static-content-color - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-static-content-color - ); +:host([selected][static-color="black"]), +:host([selected][static-color="white"]) { + --mod-actionbutton-content-color-default: var( + --mod-actionbutton-static-content-color + ); + --mod-actionbutton-content-color-hover: var( + --mod-actionbutton-static-content-color + ); + --mod-actionbutton-content-color-down: var( + --mod-actionbutton-static-content-color + ); + --mod-actionbutton-content-color-focus: var( + --mod-actionbutton-static-content-color + ); } -::slotted([slot='icon']) { - inline-size: var( - --mod-actionbutton-icon-size, - var(--spectrum-actionbutton-icon-size) - ); - block-size: var( - --mod-actionbutton-icon-size, - var(--spectrum-actionbutton-icon-size) - ); - color: inherit; - margin-inline-start: calc( - var( - --mod-actionbutton-edge-to-visual, - var(--spectrum-actionbutton-edge-to-visual) - ) - - var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - ); - margin-inline-end: calc( - var( - --mod-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - - var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - ); +::slotted([slot="icon"]) { + inline-size: var( + --mod-actionbutton-icon-size, + var(--spectrum-actionbutton-icon-size) + ); + block-size: var( + --mod-actionbutton-icon-size, + var(--spectrum-actionbutton-icon-size) + ); + color: inherit; + margin-inline-start: calc( + var( + --mod-actionbutton-edge-to-visual, + var(--spectrum-actionbutton-edge-to-visual) + ) - + var( + --mod-actionbutton-edge-to-text, + var(--spectrum-actionbutton-edge-to-text) + ) + ); + margin-inline-end: calc( + var( + --mod-actionbutton-edge-to-visual-only, + var(--spectrum-actionbutton-edge-to-visual-only) + ) - + var( + --mod-actionbutton-edge-to-text, + var(--spectrum-actionbutton-edge-to-text) + ) + ); } -.hold-affordance + ::slotted([slot='icon']), -[icon-only]::slotted([slot='icon']) { - margin-inline-start: calc( - var( - --mod-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - - var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - ); +.hold-affordance + ::slotted([slot="icon"]), +[icon-only]::slotted([slot="icon"]) { + margin-inline-start: calc( + var( + --mod-actionbutton-edge-to-visual-only, + var(--spectrum-actionbutton-edge-to-visual-only) + ) - + var( + --mod-actionbutton-edge-to-text, + var(--spectrum-actionbutton-edge-to-text) + ) + ); } #label { - pointer-events: none; - font-size: var( - --mod-actionbutton-font-size, - var(--spectrum-actionbutton-font-size) - ); - white-space: nowrap; - color: inherit; - color: var(--mod-actionbutton-label-color, inherit); - text-overflow: ellipsis; - overflow: hidden; + pointer-events: none; + font-size: var( + --mod-actionbutton-font-size, + var(--spectrum-actionbutton-font-size) + ); + white-space: nowrap; + color: inherit; + color: var(--mod-actionbutton-label-color, inherit); + text-overflow: ellipsis; + overflow: hidden; } .hold-affordance { - color: inherit; - transform: var(--spectrum-logical-rotation); - position: absolute; - inset-block-end: calc( - var( - --mod-actionbutton-edge-to-hold-icon, - var(--spectrum-actionbutton-edge-to-hold-icon) - ) - - var( - --mod-actionbutton-border-width, - var(--spectrum-actionbutton-border-width) - ) - ); - inset-inline-end: calc( - var( - --mod-actionbutton-edge-to-hold-icon, - var(--spectrum-actionbutton-edge-to-hold-icon) - ) - - var( - --mod-actionbutton-border-width, - var(--spectrum-actionbutton-border-width) - ) - ); + color: inherit; + transform: var(--spectrum-logical-rotation); + position: absolute; + inset-block-end: calc( + var( + --mod-actionbutton-edge-to-hold-icon, + var(--spectrum-actionbutton-edge-to-hold-icon) + ) - + var( + --mod-actionbutton-border-width, + var(--spectrum-actionbutton-border-width) + ) + ); + inset-inline-end: calc( + var( + --mod-actionbutton-edge-to-hold-icon, + var(--spectrum-actionbutton-edge-to-hold-icon) + ) - + var( + --mod-actionbutton-border-width, + var(--spectrum-actionbutton-border-width) + ) + ); } :host { - transition: border-color - var( - --mod-actionbutton-animation-duration, - var(--spectrum-actionbutton-animation-duration) - ) - ease-in-out; + transition: border-color + var( + --mod-actionbutton-animation-duration, + var(--spectrum-actionbutton-animation-duration) + ) + ease-in-out; } :host:after { - margin: calc( - ( - var( - --mod-actionbutton-focus-indicator-gap, - var(--spectrum-actionbutton-focus-indicator-gap) - ) + - var( - --mod-actionbutton-border-width, - var(--spectrum-actionbutton-border-width) - ) - ) * -1 - ); - border-radius: var( - --mod-actionbutton-focus-indicator-border-radius, - var(--spectrum-actionbutton-focus-indicator-border-radius) - ); - transition: box-shadow - var( - --mod-actionbutton-animation-duration, - var(--spectrum-actionbutton-animation-duration) - ) - ease-in-out; - pointer-events: none; - content: ''; - position: absolute; - inset: 0; + margin: calc( + ( + var( + --mod-actionbutton-focus-indicator-gap, + var(--spectrum-actionbutton-focus-indicator-gap) + ) + + var( + --mod-actionbutton-border-width, + var(--spectrum-actionbutton-border-width) + ) + ) * + -1 + ); + border-radius: var( + --mod-actionbutton-focus-indicator-border-radius, + var(--spectrum-actionbutton-focus-indicator-border-radius) + ); + transition: box-shadow + var( + --mod-actionbutton-animation-duration, + var(--spectrum-actionbutton-animation-duration) + ) + ease-in-out; + pointer-events: none; + content: ""; + position: absolute; + inset: 0; } :host(:focus-visible) { - box-shadow: none; - outline: none; + box-shadow: none; + outline: none; } :host(:focus-visible):after { - box-shadow: 0 0 0 - var( - --mod-actionbutton-focus-indicator-thickness, - var(--spectrum-actionbutton-focus-indicator-thickness) - ) - var( - --highcontrast-actionbutton-focus-indicator-color, - var( - --mod-actionbutton-focus-indicator-color, - var(--spectrum-actionbutton-focus-indicator-color) - ) - ); + box-shadow: 0 0 0 + var( + --mod-actionbutton-focus-indicator-thickness, + var(--spectrum-actionbutton-focus-indicator-thickness) + ) + var( + --highcontrast-actionbutton-focus-indicator-color, + var( + --mod-actionbutton-focus-indicator-color, + var(--spectrum-actionbutton-focus-indicator-color) + ) + ); } diff --git a/packages/action-group/src/action-group-overrides.css b/packages/action-group/src/action-group-overrides.css index 10f612dac3..1ea4455fc2 100644 --- a/packages/action-group/src/action-group-overrides.css +++ b/packages/action-group/src/action-group-overrides.css @@ -12,73 +12,73 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-actiongroup-gap-size-compact: var( - --system-action-group-gap-size-compact - ); - --spectrum-actiongroup-horizontal-spacing-compact: var( - --system-action-group-horizontal-spacing-compact - ); - --spectrum-actiongroup-vertical-spacing-compact: var( - --system-action-group-vertical-spacing-compact - ); - --spectrum-actiongroup-button-spacing-reset: var( - --system-action-group-button-spacing-reset - ); - --spectrum-actiongroup-border-radius-reset: var( - --system-action-group-border-radius-reset - ); - --spectrum-actiongroup-border-radius: var( - --system-action-group-border-radius - ); - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-vertical-spacing-regular - ); + --spectrum-actiongroup-gap-size-compact: var( + --system-action-group-gap-size-compact + ); + --spectrum-actiongroup-horizontal-spacing-compact: var( + --system-action-group-horizontal-spacing-compact + ); + --spectrum-actiongroup-vertical-spacing-compact: var( + --system-action-group-vertical-spacing-compact + ); + --spectrum-actiongroup-button-spacing-reset: var( + --system-action-group-button-spacing-reset + ); + --spectrum-actiongroup-border-radius-reset: var( + --system-action-group-border-radius-reset + ); + --spectrum-actiongroup-border-radius: var( + --system-action-group-border-radius + ); + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-vertical-spacing-regular + ); } -:host([size='xs']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-xs-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-xs-vertical-spacing-regular - ); +:host([size="xs"]) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-xs-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-xs-vertical-spacing-regular + ); } -:host([size='s']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-s-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-s-vertical-spacing-regular - ); +:host([size="s"]) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-s-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-s-vertical-spacing-regular + ); } :host { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-m-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-m-vertical-spacing-regular - ); + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-m-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-m-vertical-spacing-regular + ); } -:host([size='l']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-l-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-l-vertical-spacing-regular - ); +:host([size="l"]) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-l-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-l-vertical-spacing-regular + ); } -:host([size='xl']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-xl-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-xl-vertical-spacing-regular - ); +:host([size="xl"]) { + --spectrum-actiongroup-horizontal-spacing-regular: var( + --system-action-group-size-xl-horizontal-spacing-regular + ); + --spectrum-actiongroup-vertical-spacing-regular: var( + --system-action-group-size-xl-vertical-spacing-regular + ); } diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index 462d1c72e2..6801326072 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -12,227 +12,227 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - gap: var( - --mod-actiongroup-horizontal-spacing-regular, - var(--spectrum-actiongroup-horizontal-spacing-regular) - ); - flex-wrap: wrap; - display: flex; + gap: var( + --mod-actiongroup-horizontal-spacing-regular, + var(--spectrum-actiongroup-horizontal-spacing-regular) + ); + flex-wrap: wrap; + display: flex; } ::slotted(*) { - flex-shrink: 0; + flex-shrink: 0; } ::slotted(:focus-visible) { - z-index: 3; + z-index: 3; } :host(:not([vertical]):not([compact])) ::slotted(*) { - flex-shrink: 0; + flex-shrink: 0; } :host([vertical]) { - gap: var( - --mod-actiongroup-vertical-spacing-regular, - var(--spectrum-actiongroup-vertical-spacing-regular) - ); - flex-direction: column; - display: inline-flex; + gap: var( + --mod-actiongroup-vertical-spacing-regular, + var(--spectrum-actiongroup-vertical-spacing-regular) + ); + flex-direction: column; + display: inline-flex; } :host([compact]) { - gap: var( - --mod-actiongroup-gap-size-compact, - var(--spectrum-actiongroup-gap-size-compact) - ); + gap: var( + --mod-actiongroup-gap-size-compact, + var(--spectrum-actiongroup-gap-size-compact) + ); } :host([compact]:not([quiet])) { - flex-wrap: nowrap; + flex-wrap: nowrap; } :host([compact]:not([quiet])) ::slotted(*) { - border-radius: var( - --mod-actiongroup-border-radius-reset, - var(--spectrum-actiongroup-border-radius-reset) - ); - z-index: 0; - position: relative; + border-radius: var( + --mod-actiongroup-border-radius-reset, + var(--spectrum-actiongroup-border-radius-reset) + ); + z-index: 0; + position: relative; } :host([compact]:not([quiet])) ::slotted(:first-child) { - --mod-actionbutton-focus-indicator-border-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - 0px 0px - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-start-start-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-end-start-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - margin-inline-start: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); + --mod-actionbutton-focus-indicator-border-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ) + 0px 0px + var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + border-start-start-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + border-end-start-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + margin-inline-start: var( + --mod-actiongroup-button-spacing-reset, + var(--spectrum-actiongroup-button-spacing-reset) + ); } :host([compact]:not([quiet])) ::slotted(:not(:first-child)) { - --mod-actionbutton-focus-indicator-border-radius: 0px; - margin-inline-start: var( - --mod-actiongroup-horizontal-spacing-compact, - var(--spectrum-actiongroup-horizontal-spacing-compact) - ); - margin-inline-end: var( - --mod-actiongroup-horizontal-spacing-compact, - var(--spectrum-actiongroup-horizontal-spacing-compact) - ); + --mod-actionbutton-focus-indicator-border-radius: 0px; + margin-inline-start: var( + --mod-actiongroup-horizontal-spacing-compact, + var(--spectrum-actiongroup-horizontal-spacing-compact) + ); + margin-inline-end: var( + --mod-actiongroup-horizontal-spacing-compact, + var(--spectrum-actiongroup-horizontal-spacing-compact) + ); } :host([compact]:not([quiet])) ::slotted(:last-child) { - --mod-actionbutton-focus-indicator-border-radius: 0px - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - 0px; - border-start-end-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-end-end-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - margin-inline-start: var( - --mod-actiongroup-horizontal-spacing-compact, - var(--spectrum-actiongroup-horizontal-spacing-compact) - ); - margin-inline-end: var( - --mod-actiongroup-border-radius-reset, - var(--spectrum-actiongroup-border-radius-reset) - ); + --mod-actionbutton-focus-indicator-border-radius: 0px + var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ) + var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ) + 0px; + border-start-end-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + border-end-end-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + margin-inline-start: var( + --mod-actiongroup-horizontal-spacing-compact, + var(--spectrum-actiongroup-horizontal-spacing-compact) + ); + margin-inline-end: var( + --mod-actiongroup-border-radius-reset, + var(--spectrum-actiongroup-border-radius-reset) + ); } :host([compact]:not([quiet])) ::slotted([selected]) { - z-index: 1; + z-index: 1; } @media (hover: hover) { - :host([compact]:not([quiet])) ::slotted(:hover) { - z-index: 2; - } + :host([compact]:not([quiet])) ::slotted(:hover) { + z-index: 2; + } } :host([compact]:not([quiet])) ::slotted(:focus-visible) { - z-index: 3; + z-index: 3; } :host([compact]:not([quiet])[vertical]) { - gap: var( - --mod-actiongroup-gap-size-compact, - var(--spectrum-actiongroup-gap-size-compact) - ); + gap: var( + --mod-actiongroup-gap-size-compact, + var(--spectrum-actiongroup-gap-size-compact) + ); } :host([compact][vertical]:not([quiet])) ::slotted(*) { - border-radius: var( - --mod-actiongroup-border-radius-reset, - var(--spectrum-actiongroup-border-radius-reset) - ); + border-radius: var( + --mod-actiongroup-border-radius-reset, + var(--spectrum-actiongroup-border-radius-reset) + ); } :host([compact][vertical]:not([quiet])) ::slotted(:first-child) { - --mod-actionbutton-focus-indicator-border-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - 0px 0px; - border-start-start-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-start-end-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - margin-block-start: var( - --mod-actiongroup-vertical-spacing-compact, - var(--spectrum-actiongroup-vertical-spacing-compact) - ); - margin-block-end: var( - --mod-actiongroup-vertical-spacing-compact, - var(--spectrum-actiongroup-vertical-spacing-compact) - ); - margin-inline-end: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); + --mod-actionbutton-focus-indicator-border-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ) + var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ) + 0px 0px; + border-start-start-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + border-start-end-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + margin-block-start: var( + --mod-actiongroup-vertical-spacing-compact, + var(--spectrum-actiongroup-vertical-spacing-compact) + ); + margin-block-end: var( + --mod-actiongroup-vertical-spacing-compact, + var(--spectrum-actiongroup-vertical-spacing-compact) + ); + margin-inline-end: var( + --mod-actiongroup-button-spacing-reset, + var(--spectrum-actiongroup-button-spacing-reset) + ); } :host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)) { - margin-block-start: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); - margin-block-end: var( - --mod-actiongroup-vertical-spacing-compact, - var(--spectrum-actiongroup-vertical-spacing-compact) - ); - margin-inline-start: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); - margin-inline-end: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); + margin-block-start: var( + --mod-actiongroup-button-spacing-reset, + var(--spectrum-actiongroup-button-spacing-reset) + ); + margin-block-end: var( + --mod-actiongroup-vertical-spacing-compact, + var(--spectrum-actiongroup-vertical-spacing-compact) + ); + margin-inline-start: var( + --mod-actiongroup-button-spacing-reset, + var(--spectrum-actiongroup-button-spacing-reset) + ); + margin-inline-end: var( + --mod-actiongroup-button-spacing-reset, + var(--spectrum-actiongroup-button-spacing-reset) + ); } :host([compact][vertical]:not([quiet])) ::slotted(:last-child) { - --mod-actionbutton-focus-indicator-border-radius: 0px 0px - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-end-end-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-end-start-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - margin-block-start: var( - --mod-actiongroup-vertical-spacing-compact, - var(--spectrum-actiongroup-vertical-spacing-compact) - ); - margin-block-end: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); + --mod-actionbutton-focus-indicator-border-radius: 0px 0px + var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ) + var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + border-end-end-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + border-end-start-radius: var( + --mod-actiongroup-border-radius, + var(--spectrum-actiongroup-border-radius) + ); + margin-block-start: var( + --mod-actiongroup-vertical-spacing-compact, + var(--spectrum-actiongroup-vertical-spacing-compact) + ); + margin-block-end: var( + --mod-actiongroup-button-spacing-reset, + var(--spectrum-actiongroup-button-spacing-reset) + ); } :host([justified]) ::slotted(*) { - flex: 1; + flex: 1; } diff --git a/packages/alert-banner/src/alert-banner-overrides.css b/packages/alert-banner/src/alert-banner-overrides.css index 733e387e43..0c55d3bd04 100644 --- a/packages/alert-banner/src/alert-banner-overrides.css +++ b/packages/alert-banner/src/alert-banner-overrides.css @@ -12,34 +12,32 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-alert-banner-neutral-background: var( - --system-alert-banner-neutral-background - ); - --spectrum-alert-banner-min-height: var(--system-alert-banner-min-height); - --spectrum-alert-banner-max-inline-size: var( - --system-alert-banner-max-inline-size - ); - --spectrum-alert-banner-size: var(--system-alert-banner-size); - --spectrum-alert-banner-font-size: var(--system-alert-banner-font-size); - --spectrum-alert-banner-icon-size: var(--system-alert-banner-icon-size); - --spectrum-alert-banner-icon-to-text: var( - --system-alert-banner-icon-to-text - ); - --spectrum-alert-banner-start-edge: var(--system-alert-banner-start-edge); - --spectrum-alert-banner-text-to-button-horizontal: var( - --system-alert-banner-text-to-button-horizontal - ); - --spectrum-alert-banner-text-to-divider: var( - --system-alert-banner-text-to-divider - ); - --spectrum-alert-banner-top-icon: var(--system-alert-banner-top-icon); - --spectrum-alert-banner-top-text: var(--system-alert-banner-top-text); - --spectrum-alert-banner-bottom-text: var(--system-alert-banner-bottom-text); - --spectrum-alert-banner-informative-background: var( - --system-alert-banner-informative-background - ); - --spectrum-alert-banner-negative-background: var( - --system-alert-banner-negative-background - ); - --spectrum-alert-banner-font-color: var(--system-alert-banner-font-color); + --spectrum-alert-banner-neutral-background: var( + --system-alert-banner-neutral-background + ); + --spectrum-alert-banner-min-height: var(--system-alert-banner-min-height); + --spectrum-alert-banner-max-inline-size: var( + --system-alert-banner-max-inline-size + ); + --spectrum-alert-banner-size: var(--system-alert-banner-size); + --spectrum-alert-banner-font-size: var(--system-alert-banner-font-size); + --spectrum-alert-banner-icon-size: var(--system-alert-banner-icon-size); + --spectrum-alert-banner-icon-to-text: var(--system-alert-banner-icon-to-text); + --spectrum-alert-banner-start-edge: var(--system-alert-banner-start-edge); + --spectrum-alert-banner-text-to-button-horizontal: var( + --system-alert-banner-text-to-button-horizontal + ); + --spectrum-alert-banner-text-to-divider: var( + --system-alert-banner-text-to-divider + ); + --spectrum-alert-banner-top-icon: var(--system-alert-banner-top-icon); + --spectrum-alert-banner-top-text: var(--system-alert-banner-top-text); + --spectrum-alert-banner-bottom-text: var(--system-alert-banner-bottom-text); + --spectrum-alert-banner-informative-background: var( + --system-alert-banner-informative-background + ); + --spectrum-alert-banner-negative-background: var( + --system-alert-banner-negative-background + ); + --spectrum-alert-banner-font-color: var(--system-alert-banner-font-color); } diff --git a/packages/alert-banner/src/spectrum-alert-banner.css b/packages/alert-banner/src/spectrum-alert-banner.css index 49c1693029..e98a72f02a 100644 --- a/packages/alert-banner/src/spectrum-alert-banner.css +++ b/packages/alert-banner/src/spectrum-alert-banner.css @@ -12,155 +12,150 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-divider-vertical-margin: var( - --mod-alert-banner-edge-to-divider, - var(--spectrum-alert-banner-edge-to-divider) - ); - --mod-divider-vertical-height: auto; - --mod-divider-vertical-align: stretch; - --mod-button-margin-block: var( - --mod-alert-banner-edge-to-button, - var(--spectrum-alert-banner-edge-to-button) - ); - --mod-button-margin-right: var( - --mod-alert-banner-text-to-divider, - var(--spectrum-alert-banner-text-to-divider) - ); - --mod-button-margin-left: auto; - --mod-closebutton-margin-inline: var( - --mod-alert-banner-close-button-spacing, - var(--spectrum-alert-banner-close-button-spacing) - ); - --mod-closebutton-margin-top: var( - --mod-alert-banner-close-button-spacing, - var(--spectrum-alert-banner-close-button-spacing) - ); - --mod-closebutton-align-self: flex-start; - inline-size: var( - --mod-alert-banner-size, - var(--spectrum-alert-banner-size) - ); - max-inline-size: var( - --mod-alert-banner-max-inline-size, - var(--spectrum-alert-banner-max-inline-size) - ); - min-block-size: var( - --mod-alert-banner-min-height, - var(--spectrum-alert-banner-min-height) - ); - font-size: var( - --mod-alert-banner-font-size, - var(--spectrum-alert-banner-font-size) - ); - color: var( - --mod-alert-banner-font-color, - var(--spectrum-alert-banner-font-color) - ); - background-color: var( - --mod-alert-banner-neutral-background, - var( - --mod-alert-banner-neutral-background, - var(--spectrum-alert-banner-neutral-background) - ) - ); - border: 0 solid #0000; - border: var(--highcontrast-alert-banner-border-width, 0) solid - var(--highcontrast-alert-banner-border-color, transparent); - justify-content: space-between; - display: none; + --mod-divider-vertical-margin: var( + --mod-alert-banner-edge-to-divider, + var(--spectrum-alert-banner-edge-to-divider) + ); + --mod-divider-vertical-height: auto; + --mod-divider-vertical-align: stretch; + --mod-button-margin-block: var( + --mod-alert-banner-edge-to-button, + var(--spectrum-alert-banner-edge-to-button) + ); + --mod-button-margin-right: var( + --mod-alert-banner-text-to-divider, + var(--spectrum-alert-banner-text-to-divider) + ); + --mod-button-margin-left: auto; + --mod-closebutton-margin-inline: var( + --mod-alert-banner-close-button-spacing, + var(--spectrum-alert-banner-close-button-spacing) + ); + --mod-closebutton-margin-top: var( + --mod-alert-banner-close-button-spacing, + var(--spectrum-alert-banner-close-button-spacing) + ); + --mod-closebutton-align-self: flex-start; + inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size)); + max-inline-size: var( + --mod-alert-banner-max-inline-size, + var(--spectrum-alert-banner-max-inline-size) + ); + min-block-size: var( + --mod-alert-banner-min-height, + var(--spectrum-alert-banner-min-height) + ); + font-size: var( + --mod-alert-banner-font-size, + var(--spectrum-alert-banner-font-size) + ); + color: var( + --mod-alert-banner-font-color, + var(--spectrum-alert-banner-font-color) + ); + background-color: var( + --mod-alert-banner-neutral-background, + var( + --mod-alert-banner-neutral-background, + var(--spectrum-alert-banner-neutral-background) + ) + ); + border: 0 solid #0000; + border: var(--highcontrast-alert-banner-border-width, 0) solid + var(--highcontrast-alert-banner-border-color, transparent); + justify-content: space-between; + display: none; } :host([open]) { - display: flex; + display: flex; } -:host([variant='info']) { - background-color: var( - --mod-alert-banner-informative-background, - var(--spectrum-alert-banner-informative-background) - ); +:host([variant="info"]) { + background-color: var( + --mod-alert-banner-informative-background, + var(--spectrum-alert-banner-informative-background) + ); } -:host([variant='negative']) { - background-color: var( - --mod-alert-banner-negative-background, - var(--spectrum-alert-banner-negative-background) - ); +:host([variant="negative"]) { + background-color: var( + --mod-alert-banner-negative-background, + var(--spectrum-alert-banner-negative-background) + ); } .body { - inline-size: 100%; - gap: max( - calc( - var( - --mod-alert-banner-text-to-button-vertical, - var(--spectrum-alert-banner-text-to-button-vertical) - ) - - var( - --mod-alert-banner-edge-to-button, - var(--spectrum-alert-banner-edge-to-button) - ) - ), - 0px - ); - flex-wrap: wrap; - align-items: center; - margin-inline-start: var( - --mod-alert-banner-start-edge, - var(--spectrum-alert-banner-start-edge) - ); - display: flex; + inline-size: 100%; + gap: max( + calc( + var( + --mod-alert-banner-text-to-button-vertical, + var(--spectrum-alert-banner-text-to-button-vertical) + ) - + var( + --mod-alert-banner-edge-to-button, + var(--spectrum-alert-banner-edge-to-button) + ) + ), + 0px + ); + flex-wrap: wrap; + align-items: center; + margin-inline-start: var( + --mod-alert-banner-start-edge, + var(--spectrum-alert-banner-start-edge) + ); + display: flex; } .content { - display: flex; + display: flex; } .end { - align-items: center; - display: flex; + align-items: center; + display: flex; } .type { - inline-size: var( - --mod-alert-banner-icon-size, - var(--spectrum-alert-banner-icon-size) - ); - block-size: var( - --mod-alert-banner-icon-size, - var(--spectrum-alert-banner-icon-size) - ); - flex-shrink: 0; - margin-block-start: var( - --mod-alert-banner-top-icon, - var(--spectrum-alert-banner-top-icon) - ); - margin-inline-end: var( - --mod-alert-banner-icon-to-text, - var(--spectrum-alert-banner-icon-to-text) - ); + inline-size: var( + --mod-alert-banner-icon-size, + var(--spectrum-alert-banner-icon-size) + ); + block-size: var( + --mod-alert-banner-icon-size, + var(--spectrum-alert-banner-icon-size) + ); + flex-shrink: 0; + margin-block-start: var( + --mod-alert-banner-top-icon, + var(--spectrum-alert-banner-top-icon) + ); + margin-inline-end: var( + --mod-alert-banner-icon-to-text, + var(--spectrum-alert-banner-icon-to-text) + ); } .text { - margin-block-start: var( - --mod-alert-banner-top-text, - var(--spectrum-alert-banner-top-text) - ); - margin-block-end: var( - --mod-alert-banner-bottom-text, - var(--spectrum-alert-banner-bottom-text) - ); - margin-inline-end: var( - --mod-alert-banner-text-to-button-horizontal, - var(--spectrum-alert-banner-text-to-button-horizontal) - ); + margin-block-start: var( + --mod-alert-banner-top-text, + var(--spectrum-alert-banner-top-text) + ); + margin-block-end: var( + --mod-alert-banner-bottom-text, + var(--spectrum-alert-banner-bottom-text) + ); + margin-inline-end: var( + --mod-alert-banner-text-to-button-horizontal, + var(--spectrum-alert-banner-text-to-button-horizontal) + ); } @media (forced-colors: active) { - :host { - --highcontrast-alert-banner-border-color: CanvasText; - --highcontrast-alert-banner-border-width: var( - --spectrum-border-width-100 - ); - } + :host { + --highcontrast-alert-banner-border-color: CanvasText; + --highcontrast-alert-banner-border-width: var(--spectrum-border-width-100); + } } diff --git a/packages/alert-dialog/src/alert-dialog-overrides.css b/packages/alert-dialog/src/alert-dialog-overrides.css index de7d0f1833..85f6b0d1e9 100644 --- a/packages/alert-dialog/src/alert-dialog-overrides.css +++ b/packages/alert-dialog/src/alert-dialog-overrides.css @@ -12,54 +12,54 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-alert-dialog-min-width: var(--system-alert-dialog-min-width); - --spectrum-alert-dialog-max-width: var(--system-alert-dialog-max-width); - --spectrum-alert-dialog-icon-size: var(--system-alert-dialog-icon-size); - --spectrum-alert-dialog-warning-icon-color: var( - --system-alert-dialog-warning-icon-color - ); - --spectrum-alert-dialog-error-icon-color: var( - --system-alert-dialog-error-icon-color - ); - --spectrum-alert-dialog-title-font-family: var( - --system-alert-dialog-title-font-family - ); - --spectrum-alert-dialog-title-font-weight: var( - --system-alert-dialog-title-font-weight - ); - --spectrum-alert-dialog-title-font-style: var( - --system-alert-dialog-title-font-style - ); - --spectrum-alert-dialog-title-font-size: var( - --system-alert-dialog-title-font-size - ); - --spectrum-alert-dialog-title-line-height: var( - --system-alert-dialog-title-line-height - ); - --spectrum-alert-dialog-title-color: var(--system-alert-dialog-title-color); - --spectrum-alert-dialog-body-font-family: var( - --system-alert-dialog-body-font-family - ); - --spectrum-alert-dialog-body-font-weight: var( - --system-alert-dialog-body-font-weight - ); - --spectrum-alert-dialog-body-font-style: var( - --system-alert-dialog-body-font-style - ); - --spectrum-alert-dialog-body-font-size: var( - --system-alert-dialog-body-font-size - ); - --spectrum-alert-dialog-body-line-height: var( - --system-alert-dialog-body-line-height - ); - --spectrum-alert-dialog-body-color: var(--system-alert-dialog-body-color); - --spectrum-alert-dialog-title-to-divider: var( - --system-alert-dialog-title-to-divider - ); - --spectrum-alert-dialog-divider-to-description: var( - --system-alert-dialog-divider-to-description - ); - --spectrum-alert-dialog-title-to-icon: var( - --system-alert-dialog-title-to-icon - ); + --spectrum-alert-dialog-min-width: var(--system-alert-dialog-min-width); + --spectrum-alert-dialog-max-width: var(--system-alert-dialog-max-width); + --spectrum-alert-dialog-icon-size: var(--system-alert-dialog-icon-size); + --spectrum-alert-dialog-warning-icon-color: var( + --system-alert-dialog-warning-icon-color + ); + --spectrum-alert-dialog-error-icon-color: var( + --system-alert-dialog-error-icon-color + ); + --spectrum-alert-dialog-title-font-family: var( + --system-alert-dialog-title-font-family + ); + --spectrum-alert-dialog-title-font-weight: var( + --system-alert-dialog-title-font-weight + ); + --spectrum-alert-dialog-title-font-style: var( + --system-alert-dialog-title-font-style + ); + --spectrum-alert-dialog-title-font-size: var( + --system-alert-dialog-title-font-size + ); + --spectrum-alert-dialog-title-line-height: var( + --system-alert-dialog-title-line-height + ); + --spectrum-alert-dialog-title-color: var(--system-alert-dialog-title-color); + --spectrum-alert-dialog-body-font-family: var( + --system-alert-dialog-body-font-family + ); + --spectrum-alert-dialog-body-font-weight: var( + --system-alert-dialog-body-font-weight + ); + --spectrum-alert-dialog-body-font-style: var( + --system-alert-dialog-body-font-style + ); + --spectrum-alert-dialog-body-font-size: var( + --system-alert-dialog-body-font-size + ); + --spectrum-alert-dialog-body-line-height: var( + --system-alert-dialog-body-line-height + ); + --spectrum-alert-dialog-body-color: var(--system-alert-dialog-body-color); + --spectrum-alert-dialog-title-to-divider: var( + --system-alert-dialog-title-to-divider + ); + --spectrum-alert-dialog-divider-to-description: var( + --system-alert-dialog-divider-to-description + ); + --spectrum-alert-dialog-title-to-icon: var( + --system-alert-dialog-title-to-icon + ); } diff --git a/packages/alert-dialog/src/spectrum-alert-dialog.css b/packages/alert-dialog/src/spectrum-alert-dialog.css index c9ac8a1f7e..bcd4cc7a49 100644 --- a/packages/alert-dialog/src/spectrum-alert-dialog.css +++ b/packages/alert-dialog/src/spectrum-alert-dialog.css @@ -12,138 +12,138 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-buttongroup-justify-content: flex-end; - box-sizing: border-box; - inline-size: fit-content; - min-inline-size: var( - --mod-alert-dialog-min-width, - var(--spectrum-alert-dialog-min-width) - ); - max-inline-size: var( - --mod-alert-dialog-max-width, - var(--spectrum-alert-dialog-max-width) - ); - max-block-size: inherit; - padding: var( - --mod-alert-dialog-padding, - var(--spectrum-alert-dialog-padding) - ); - outline: none; - display: flex; + --mod-buttongroup-justify-content: flex-end; + box-sizing: border-box; + inline-size: fit-content; + min-inline-size: var( + --mod-alert-dialog-min-width, + var(--spectrum-alert-dialog-min-width) + ); + max-inline-size: var( + --mod-alert-dialog-max-width, + var(--spectrum-alert-dialog-max-width) + ); + max-block-size: inherit; + padding: var( + --mod-alert-dialog-padding, + var(--spectrum-alert-dialog-padding) + ); + outline: none; + display: flex; } .icon { - inline-size: var( - --mod-alert-dialog-icon-size, - var(--spectrum-alert-dialog-icon-size) - ); - block-size: var( - --mod-alert-dialog-icon-size, - var(--spectrum-alert-dialog-icon-size) - ); - flex-shrink: 0; - margin-inline-start: var( - --mod-alert-dialog-title-to-icon, - var(--spectrum-alert-dialog-title-to-icon) - ); + inline-size: var( + --mod-alert-dialog-icon-size, + var(--spectrum-alert-dialog-icon-size) + ); + block-size: var( + --mod-alert-dialog-icon-size, + var(--spectrum-alert-dialog-icon-size) + ); + flex-shrink: 0; + margin-inline-start: var( + --mod-alert-dialog-title-to-icon, + var(--spectrum-alert-dialog-title-to-icon) + ); } -:host([variant='warning']) { - --mod-icon-color: var( - --mod-alert-dialog-warning-icon-color, - var(--spectrum-alert-dialog-warning-icon-color) - ); +:host([variant="warning"]) { + --mod-icon-color: var( + --mod-alert-dialog-warning-icon-color, + var(--spectrum-alert-dialog-warning-icon-color) + ); } -:host([variant='error']) { - --mod-icon-color: var( - --mod-alert-dialog-error-icon-color, - var(--spectrum-alert-dialog-error-icon-color) - ); +:host([variant="error"]) { + --mod-icon-color: var( + --mod-alert-dialog-error-icon-color, + var(--spectrum-alert-dialog-error-icon-color) + ); } .grid { - display: grid; + display: grid; } .header { - justify-content: space-between; - align-items: baseline; - display: flex; + justify-content: space-between; + align-items: baseline; + display: flex; } -::slotted([slot='heading']) { - font-family: var( - --mod-alert-dialog-title-font-family, - var(--spectrum-alert-dialog-title-font-family) - ); - font-weight: var( - --mod-alert-dialog-title-font-weight, - var(--spectrum-alert-dialog-title-font-weight) - ); - font-style: var( - --mod-alert-dialog-title-font-style, - var(--spectrum-alert-dialog-title-font-style) - ); - font-size: var( - --mod-alert-dialog-title-font-size, - var(--spectrum-alert-dialog-title-font-size) - ); - line-height: var( - --mod-alert-dialog-title-line-height, - var(--spectrum-alert-dialog-title-line-height) - ); - color: var( - --mod-alert-dialog-title-color, - var(--spectrum-alert-dialog-title-color) - ); - margin: 0; - margin-block-end: var( - --mod-alert-dialog-title-to-divider, - var(--spectrum-alert-dialog-title-to-divider) - ); +::slotted([slot="heading"]) { + font-family: var( + --mod-alert-dialog-title-font-family, + var(--spectrum-alert-dialog-title-font-family) + ); + font-weight: var( + --mod-alert-dialog-title-font-weight, + var(--spectrum-alert-dialog-title-font-weight) + ); + font-style: var( + --mod-alert-dialog-title-font-style, + var(--spectrum-alert-dialog-title-font-style) + ); + font-size: var( + --mod-alert-dialog-title-font-size, + var(--spectrum-alert-dialog-title-font-size) + ); + line-height: var( + --mod-alert-dialog-title-line-height, + var(--spectrum-alert-dialog-title-line-height) + ); + color: var( + --mod-alert-dialog-title-color, + var(--spectrum-alert-dialog-title-color) + ); + margin: 0; + margin-block-end: var( + --mod-alert-dialog-title-to-divider, + var(--spectrum-alert-dialog-title-to-divider) + ); } .content { - font-family: var( - --mod-alert-dialog-body-font-family, - var(--spectrum-alert-dialog-body-font-family) - ); - font-weight: var( - --mod-alert-dialog-body-font-weight, - var(--spectrum-alert-dialog-body-font-weight) - ); - font-style: var( - --mod-alert-dialog-body-font-style, - var(--spectrum-alert-dialog-body-font-style) - ); - font-size: var( - --mod-alert-dialog-body-font-size, - var(--spectrum-alert-dialog-body-font-size) - ); - line-height: var( - --mod-alert-dialog-body-line-height, - var(--spectrum-alert-dialog-body-line-height) - ); - color: var( - --mod-alert-dialog-body-color, - var(--spectrum-alert-dialog-body-color) - ); - -webkit-overflow-scrolling: touch; - margin: 0; - margin-block-start: var( - --mod-alert-dialog-divider-to-description, - var(--spectrum-alert-dialog-divider-to-description) - ); - margin-block-end: var( - --mod-alert-dialog-description-to-buttons, - var(--spectrum-alert-dialog-description-to-buttons) - ); - overflow-y: auto; + font-family: var( + --mod-alert-dialog-body-font-family, + var(--spectrum-alert-dialog-body-font-family) + ); + font-weight: var( + --mod-alert-dialog-body-font-weight, + var(--spectrum-alert-dialog-body-font-weight) + ); + font-style: var( + --mod-alert-dialog-body-font-style, + var(--spectrum-alert-dialog-body-font-style) + ); + font-size: var( + --mod-alert-dialog-body-font-size, + var(--spectrum-alert-dialog-body-font-size) + ); + line-height: var( + --mod-alert-dialog-body-line-height, + var(--spectrum-alert-dialog-body-line-height) + ); + color: var( + --mod-alert-dialog-body-color, + var(--spectrum-alert-dialog-body-color) + ); + -webkit-overflow-scrolling: touch; + margin: 0; + margin-block-start: var( + --mod-alert-dialog-divider-to-description, + var(--spectrum-alert-dialog-divider-to-description) + ); + margin-block-end: var( + --mod-alert-dialog-description-to-buttons, + var(--spectrum-alert-dialog-description-to-buttons) + ); + overflow-y: auto; } @media (forced-colors: active) { - :host { - border: solid; - } + :host { + border: solid; + } } diff --git a/packages/asset/src/asset-overrides.css b/packages/asset/src/asset-overrides.css index 88e6974a2b..c46ce89b19 100644 --- a/packages/asset/src/asset-overrides.css +++ b/packages/asset/src/asset-overrides.css @@ -12,14 +12,12 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-asset-transition-duration: var( - --system-asset-transition-duration - ); - --spectrum-asset-folder-background-color: var( - --system-asset-folder-background-color - ); - --spectrum-asset-file-background-color: var( - --system-asset-file-background-color - ); - --spectrum-asset-icon-outline-color: var(--system-asset-icon-outline-color); + --spectrum-asset-transition-duration: var(--system-asset-transition-duration); + --spectrum-asset-folder-background-color: var( + --system-asset-folder-background-color + ); + --spectrum-asset-file-background-color: var( + --system-asset-file-background-color + ); + --spectrum-asset-icon-outline-color: var(--system-asset-icon-outline-color); } diff --git a/packages/asset/src/spectrum-asset.css b/packages/asset/src/spectrum-asset.css index 06229170f6..779d1bbb85 100644 --- a/packages/asset/src/spectrum-asset.css +++ b/packages/asset/src/spectrum-asset.css @@ -12,63 +12,63 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - inline-size: 100%; - block-size: 100%; - justify-content: center; - align-items: center; - display: flex; + inline-size: 100%; + block-size: 100%; + justify-content: center; + align-items: center; + display: flex; } ::slotted(*) { - max-inline-size: 100%; - max-block-size: 100%; - object-fit: contain; - transition: opacity var(--spectrum-asset-transition-duration); + max-inline-size: 100%; + max-block-size: 100%; + object-fit: contain; + transition: opacity var(--spectrum-asset-transition-duration); } .file, .folder { - inline-size: max(48px, min(100%, 80px)); - inline-size: max( - var(--mod-asset-icon-min-width, 48px), - min(100%, var(--mod-asset-icon-max-width, 80px)) - ); - block-size: 100%; - margin: 20px; - margin: var(--mod-asset-icon-margin, 20px); + inline-size: max(48px, min(100%, 80px)); + inline-size: max( + var(--mod-asset-icon-min-width, 48px), + min(100%, var(--mod-asset-icon-max-width, 80px)) + ); + block-size: 100%; + margin: 20px; + margin: var(--mod-asset-icon-margin, 20px); } .folderBackground { - fill: var( - --highcontrast-asset-folder-background-color, - var( - --mod-asset-folder-background-color, - var(--spectrum-asset-folder-background-color) - ) - ); + fill: var( + --highcontrast-asset-folder-background-color, + var( + --mod-asset-folder-background-color, + var(--spectrum-asset-folder-background-color) + ) + ); } .fileBackground { - fill: var( - --highcontrast-asset-file-background-color, - var( - --mod-asset-file-background-color, - var(--spectrum-asset-file-background-color) - ) - ); + fill: var( + --highcontrast-asset-file-background-color, + var( + --mod-asset-file-background-color, + var(--spectrum-asset-file-background-color) + ) + ); } .fileOutline, .folderOutline { - fill: var( - --mod-asset-icon-outline-color, - var(--spectrum-asset-icon-outline-color) - ); + fill: var( + --mod-asset-icon-outline-color, + var(--spectrum-asset-icon-outline-color) + ); } @media (forced-colors: active) { - :host { - --highcontrast-asset-folder-background-color: currentColor; - --highcontrast-asset-file-background-color: currentColor; - } + :host { + --highcontrast-asset-folder-background-color: currentColor; + --highcontrast-asset-file-background-color: currentColor; + } } diff --git a/packages/avatar/src/avatar-overrides.css b/packages/avatar/src/avatar-overrides.css index b7329c6bf7..2f23a4b451 100644 --- a/packages/avatar/src/avatar-overrides.css +++ b/packages/avatar/src/avatar-overrides.css @@ -12,64 +12,64 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-avatar-color-opacity: var(--system-avatar-color-opacity); - --spectrum-avatar-inline-size: var(--system-avatar-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-block-size); - --spectrum-avatar-focus-indicator-thickness: var( - --system-avatar-focus-indicator-thickness - ); - --spectrum-avatar-focus-indicator-gap: var( - --system-avatar-focus-indicator-gap - ); - --spectrum-avatar-focus-indicator-color: var( - --system-avatar-focus-indicator-color - ); - --spectrum-avatar-color-opacity-disabled: var( - --system-avatar-color-opacity-disabled - ); + --spectrum-avatar-color-opacity: var(--system-avatar-color-opacity); + --spectrum-avatar-inline-size: var(--system-avatar-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-block-size); + --spectrum-avatar-focus-indicator-thickness: var( + --system-avatar-focus-indicator-thickness + ); + --spectrum-avatar-focus-indicator-gap: var( + --system-avatar-focus-indicator-gap + ); + --spectrum-avatar-focus-indicator-color: var( + --system-avatar-focus-indicator-color + ); + --spectrum-avatar-color-opacity-disabled: var( + --system-avatar-color-opacity-disabled + ); } -:host([size='50']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-50-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-50-block-size); +:host([size="50"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-50-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-50-block-size); } -:host([size='75']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-75-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-75-block-size); +:host([size="75"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-75-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-75-block-size); } -:host([size='100']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-100-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-100-block-size); +:host([size="100"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-100-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-100-block-size); } -:host([size='200']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-200-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-200-block-size); +:host([size="200"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-200-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-200-block-size); } -:host([size='300']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-300-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-300-block-size); +:host([size="300"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-300-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-300-block-size); } -:host([size='400']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-400-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-400-block-size); +:host([size="400"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-400-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-400-block-size); } -:host([size='500']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-500-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-500-block-size); +:host([size="500"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-500-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-500-block-size); } -:host([size='600']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-600-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-600-block-size); +:host([size="600"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-600-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-600-block-size); } -:host([size='700']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-700-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-700-block-size); +:host([size="700"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-700-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-700-block-size); } diff --git a/packages/avatar/src/spectrum-avatar.css b/packages/avatar/src/spectrum-avatar.css index 07aff46824..ead05a91a3 100644 --- a/packages/avatar/src/spectrum-avatar.css +++ b/packages/avatar/src/spectrum-avatar.css @@ -12,119 +12,123 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-avatar-focus-indicator-color: CanvasText; - } + :host { + --highcontrast-avatar-focus-indicator-color: CanvasText; + } } :host { - --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); - inline-size: var( - --mod-avatar-inline-size, - var(--spectrum-avatar-inline-size) - ); - block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); - border-radius: var( - --mod-avatar-border-radius, - var(--spectrum-avatar-border-radius) - ); - -webkit-user-drag: none; - -webkit-user-select: none; - user-select: none; - opacity: var( - --mod-avatar-color-opacity, - var(--spectrum-avatar-color-opacity) - ); - border-width: 0; - outline: none; - display: inline-block; - position: relative; - overflow: visible; + --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); + inline-size: var( + --mod-avatar-inline-size, + var(--spectrum-avatar-inline-size) + ); + block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + border-radius: var( + --mod-avatar-border-radius, + var(--spectrum-avatar-border-radius) + ); + -webkit-user-drag: none; + -webkit-user-select: none; + user-select: none; + opacity: var( + --mod-avatar-color-opacity, + var(--spectrum-avatar-color-opacity) + ); + border-width: 0; + outline: none; + display: inline-block; + position: relative; + overflow: visible; } :host([disabled]) { - opacity: var( - --highcontrast-avatar-color-opacity-disabled, - var( - --mod-avatar-color-opacity-disabled, - var(--spectrum-avatar-color-opacity-disabled) - ) - ); + opacity: var( + --highcontrast-avatar-color-opacity-disabled, + var( + --mod-avatar-color-opacity-disabled, + var(--spectrum-avatar-color-opacity-disabled) + ) + ); } :host(:not([disabled])) .is-focused:after, :host(:not([disabled])) .link:focus-visible:after { - pointer-events: none; - content: ''; - inline-size: calc( - var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + - var( - --mod-avatar-focus-indicator-gap, - var(--spectrum-avatar-focus-indicator-gap) - ) * 2 - ); - block-size: calc( - var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + - var( - --mod-avatar-focus-indicator-gap, - var(--spectrum-avatar-focus-indicator-gap) - ) * 2 - ); - border-style: solid; - border-width: var( - --mod-avatar-focus-indicator-thickness, - var(--spectrum-avatar-focus-indicator-thickness) - ); - border-color: var( - --highcontrast-avatar-focus-indicator-color, - var( - --mod-avatar-focus-indicator-color, - var(--spectrum-avatar-focus-indicator-color) - ) - ); - border-radius: var( - --mod-avatar-border-radius, - var(--spectrum-avatar-border-radius) - ); - position: absolute; - inset-block-start: calc( - ( - var( - --mod-avatar-focus-indicator-gap, - var(--spectrum-avatar-focus-indicator-gap) - ) + - var( - --mod-avatar-focus-indicator-thickness, - var(--spectrum-avatar-focus-indicator-thickness) - ) - ) * -1 - ); - inset-inline-start: calc( - ( - var( - --mod-avatar-focus-indicator-gap, - var(--spectrum-avatar-focus-indicator-gap) - ) + - var( - --mod-avatar-focus-indicator-thickness, - var(--spectrum-avatar-focus-indicator-thickness) - ) - ) * -1 - ); + pointer-events: none; + content: ""; + inline-size: calc( + var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + + var( + --mod-avatar-focus-indicator-gap, + var(--spectrum-avatar-focus-indicator-gap) + ) * + 2 + ); + block-size: calc( + var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + + var( + --mod-avatar-focus-indicator-gap, + var(--spectrum-avatar-focus-indicator-gap) + ) * + 2 + ); + border-style: solid; + border-width: var( + --mod-avatar-focus-indicator-thickness, + var(--spectrum-avatar-focus-indicator-thickness) + ); + border-color: var( + --highcontrast-avatar-focus-indicator-color, + var( + --mod-avatar-focus-indicator-color, + var(--spectrum-avatar-focus-indicator-color) + ) + ); + border-radius: var( + --mod-avatar-border-radius, + var(--spectrum-avatar-border-radius) + ); + position: absolute; + inset-block-start: calc( + ( + var( + --mod-avatar-focus-indicator-gap, + var(--spectrum-avatar-focus-indicator-gap) + ) + + var( + --mod-avatar-focus-indicator-thickness, + var(--spectrum-avatar-focus-indicator-thickness) + ) + ) * + -1 + ); + inset-inline-start: calc( + ( + var( + --mod-avatar-focus-indicator-gap, + var(--spectrum-avatar-focus-indicator-gap) + ) + + var( + --mod-avatar-focus-indicator-thickness, + var(--spectrum-avatar-focus-indicator-thickness) + ) + ) * + -1 + ); } .link { - outline: 0; + outline: 0; } .image { - inline-size: var( - --mod-avatar-inline-size, - var(--spectrum-avatar-inline-size) - ); - block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); - border-radius: var( - --mod-avatar-border-radius, - var(--spectrum-avatar-border-radius) - ); + inline-size: var( + --mod-avatar-inline-size, + var(--spectrum-avatar-inline-size) + ); + block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + border-radius: var( + --mod-avatar-border-radius, + var(--spectrum-avatar-border-radius) + ); } diff --git a/packages/badge/src/badge-overrides.css b/packages/badge/src/badge-overrides.css index f02f512bfe..43ceec5e6e 100644 --- a/packages/badge/src/badge-overrides.css +++ b/packages/badge/src/badge-overrides.css @@ -12,259 +12,251 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-badge-corner-radius: var(--system-badge-corner-radius); - --spectrum-badge-line-height: var(--system-badge-line-height); - --spectrum-badge-line-height-cjk: var(--system-badge-line-height-cjk); - --spectrum-badge-label-icon-color: var(--system-badge-label-icon-color); - --spectrum-badge-background-color-default: var( - --system-badge-background-color-default - ); - --spectrum-badge-background-color-accent: var( - --system-badge-background-color-accent - ); - --spectrum-badge-background-color-informative: var( - --system-badge-background-color-informative - ); - --spectrum-badge-background-color-negative: var( - --system-badge-background-color-negative - ); - --spectrum-badge-background-color-positive: var( - --system-badge-background-color-positive - ); - --spectrum-badge-background-color-notice: var( - --system-badge-background-color-notice - ); - --spectrum-badge-background-color-gray: var( - --system-badge-background-color-gray - ); - --spectrum-badge-background-color-red: var( - --system-badge-background-color-red - ); - --spectrum-badge-background-color-orange: var( - --system-badge-background-color-orange - ); - --spectrum-badge-background-color-yellow: var( - --system-badge-background-color-yellow - ); - --spectrum-badge-background-color-chartreuse: var( - --system-badge-background-color-chartreuse - ); - --spectrum-badge-background-color-celery: var( - --system-badge-background-color-celery - ); - --spectrum-badge-background-color-green: var( - --system-badge-background-color-green - ); - --spectrum-badge-background-color-seafoam: var( - --system-badge-background-color-seafoam - ); - --spectrum-badge-background-color-cyan: var( - --system-badge-background-color-cyan - ); - --spectrum-badge-background-color-blue: var( - --system-badge-background-color-blue - ); - --spectrum-badge-background-color-indigo: var( - --system-badge-background-color-indigo - ); - --spectrum-badge-background-color-purple: var( - --system-badge-background-color-purple - ); - --spectrum-badge-background-color-fuchsia: var( - --system-badge-background-color-fuchsia - ); - --spectrum-badge-background-color-magenta: var( - --system-badge-background-color-magenta - ); - --spectrum-badge-height: var(--system-badge-height); - --spectrum-badge-font-size: var(--system-badge-font-size); - --spectrum-badge-label-spacing-vertical-top: var( - --system-badge-label-spacing-vertical-top - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --system-badge-label-spacing-vertical-bottom - ); - --spectrum-badge-label-spacing-horizontal: var( - --system-badge-label-spacing-horizontal - ); - --spectrum-badge-workflow-icon-size: var(--system-badge-workflow-icon-size); - --spectrum-badge-icon-text-spacing: var(--system-badge-icon-text-spacing); - --spectrum-badge-icon-spacing-horizontal: var( - --system-badge-icon-spacing-horizontal - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --system-badge-icon-spacing-vertical-top - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --system-badge-icon-only-spacing-horizontal - ); + --spectrum-badge-corner-radius: var(--system-badge-corner-radius); + --spectrum-badge-line-height: var(--system-badge-line-height); + --spectrum-badge-line-height-cjk: var(--system-badge-line-height-cjk); + --spectrum-badge-label-icon-color: var(--system-badge-label-icon-color); + --spectrum-badge-background-color-default: var( + --system-badge-background-color-default + ); + --spectrum-badge-background-color-accent: var( + --system-badge-background-color-accent + ); + --spectrum-badge-background-color-informative: var( + --system-badge-background-color-informative + ); + --spectrum-badge-background-color-negative: var( + --system-badge-background-color-negative + ); + --spectrum-badge-background-color-positive: var( + --system-badge-background-color-positive + ); + --spectrum-badge-background-color-notice: var( + --system-badge-background-color-notice + ); + --spectrum-badge-background-color-gray: var( + --system-badge-background-color-gray + ); + --spectrum-badge-background-color-red: var( + --system-badge-background-color-red + ); + --spectrum-badge-background-color-orange: var( + --system-badge-background-color-orange + ); + --spectrum-badge-background-color-yellow: var( + --system-badge-background-color-yellow + ); + --spectrum-badge-background-color-chartreuse: var( + --system-badge-background-color-chartreuse + ); + --spectrum-badge-background-color-celery: var( + --system-badge-background-color-celery + ); + --spectrum-badge-background-color-green: var( + --system-badge-background-color-green + ); + --spectrum-badge-background-color-seafoam: var( + --system-badge-background-color-seafoam + ); + --spectrum-badge-background-color-cyan: var( + --system-badge-background-color-cyan + ); + --spectrum-badge-background-color-blue: var( + --system-badge-background-color-blue + ); + --spectrum-badge-background-color-indigo: var( + --system-badge-background-color-indigo + ); + --spectrum-badge-background-color-purple: var( + --system-badge-background-color-purple + ); + --spectrum-badge-background-color-fuchsia: var( + --system-badge-background-color-fuchsia + ); + --spectrum-badge-background-color-magenta: var( + --system-badge-background-color-magenta + ); + --spectrum-badge-height: var(--system-badge-height); + --spectrum-badge-font-size: var(--system-badge-font-size); + --spectrum-badge-label-spacing-vertical-top: var( + --system-badge-label-spacing-vertical-top + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --system-badge-label-spacing-vertical-bottom + ); + --spectrum-badge-label-spacing-horizontal: var( + --system-badge-label-spacing-horizontal + ); + --spectrum-badge-workflow-icon-size: var(--system-badge-workflow-icon-size); + --spectrum-badge-icon-text-spacing: var(--system-badge-icon-text-spacing); + --spectrum-badge-icon-spacing-horizontal: var( + --system-badge-icon-spacing-horizontal + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --system-badge-icon-spacing-vertical-top + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --system-badge-icon-only-spacing-horizontal + ); } -:host([variant='orange']) { - --spectrum-badge-label-icon-color: var( - --system-badge-orange-label-icon-color - ); +:host([variant="orange"]) { + --spectrum-badge-label-icon-color: var( + --system-badge-orange-label-icon-color + ); } -:host([variant='yellow']) { - --spectrum-badge-label-icon-color: var( - --system-badge-yellow-label-icon-color - ); +:host([variant="yellow"]) { + --spectrum-badge-label-icon-color: var( + --system-badge-yellow-label-icon-color + ); } -:host([variant='chartreuse']) { - --spectrum-badge-label-icon-color: var( - --system-badge-chartreuse-label-icon-color - ); +:host([variant="chartreuse"]) { + --spectrum-badge-label-icon-color: var( + --system-badge-chartreuse-label-icon-color + ); } -:host([variant='celery']) { - --spectrum-badge-label-icon-color: var( - --system-badge-celery-label-icon-color - ); +:host([variant="celery"]) { + --spectrum-badge-label-icon-color: var( + --system-badge-celery-label-icon-color + ); } -:host([variant='gray']) { - --spectrum-badge-label-icon-color: var( - --system-badge-gray-label-icon-color - ); +:host([variant="gray"]) { + --spectrum-badge-label-icon-color: var(--system-badge-gray-label-icon-color); } -:host([variant='red']) { - --spectrum-badge-label-icon-color: var(--system-badge-red-label-icon-color); +:host([variant="red"]) { + --spectrum-badge-label-icon-color: var(--system-badge-red-label-icon-color); } -:host([variant='green']) { - --spectrum-badge-label-icon-color: var( - --system-badge-green-label-icon-color - ); +:host([variant="green"]) { + --spectrum-badge-label-icon-color: var(--system-badge-green-label-icon-color); } -:host([variant='seafoam']) { - --spectrum-badge-label-icon-color: var( - --system-badge-seafoam-label-icon-color - ); +:host([variant="seafoam"]) { + --spectrum-badge-label-icon-color: var( + --system-badge-seafoam-label-icon-color + ); } -:host([variant='cyan']) { - --spectrum-badge-label-icon-color: var( - --system-badge-cyan-label-icon-color - ); +:host([variant="cyan"]) { + --spectrum-badge-label-icon-color: var(--system-badge-cyan-label-icon-color); } -:host([variant='blue']) { - --spectrum-badge-label-icon-color: var( - --system-badge-blue-label-icon-color - ); +:host([variant="blue"]) { + --spectrum-badge-label-icon-color: var(--system-badge-blue-label-icon-color); } -:host([variant='indigo']) { - --spectrum-badge-label-icon-color: var( - --system-badge-indigo-label-icon-color - ); +:host([variant="indigo"]) { + --spectrum-badge-label-icon-color: var( + --system-badge-indigo-label-icon-color + ); } -:host([variant='purple']) { - --spectrum-badge-label-icon-color: var( - --system-badge-purple-label-icon-color - ); +:host([variant="purple"]) { + --spectrum-badge-label-icon-color: var( + --system-badge-purple-label-icon-color + ); } -:host([variant='fuchsia']) { - --spectrum-badge-label-icon-color: var( - --system-badge-fuchsia-label-icon-color - ); +:host([variant="fuchsia"]) { + --spectrum-badge-label-icon-color: var( + --system-badge-fuchsia-label-icon-color + ); } -:host([variant='magenta']) { - --spectrum-badge-label-icon-color: var( - --system-badge-magenta-label-icon-color - ); +:host([variant="magenta"]) { + --spectrum-badge-label-icon-color: var( + --system-badge-magenta-label-icon-color + ); } -:host([size='s']) { - --spectrum-badge-height: var(--system-badge-size-s-height); - --spectrum-badge-font-size: var(--system-badge-size-s-font-size); - --spectrum-badge-label-spacing-vertical-top: var( - --system-badge-size-s-label-spacing-vertical-top - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --system-badge-size-s-label-spacing-vertical-bottom - ); - --spectrum-badge-label-spacing-horizontal: var( - --system-badge-size-s-label-spacing-horizontal - ); - --spectrum-badge-workflow-icon-size: var( - --system-badge-size-s-workflow-icon-size - ); - --spectrum-badge-icon-text-spacing: var( - --system-badge-size-s-icon-text-spacing - ); - --spectrum-badge-icon-spacing-horizontal: var( - --system-badge-size-s-icon-spacing-horizontal - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --system-badge-size-s-icon-spacing-vertical-top - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --system-badge-size-s-icon-only-spacing-horizontal - ); +:host([size="s"]) { + --spectrum-badge-height: var(--system-badge-size-s-height); + --spectrum-badge-font-size: var(--system-badge-size-s-font-size); + --spectrum-badge-label-spacing-vertical-top: var( + --system-badge-size-s-label-spacing-vertical-top + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --system-badge-size-s-label-spacing-vertical-bottom + ); + --spectrum-badge-label-spacing-horizontal: var( + --system-badge-size-s-label-spacing-horizontal + ); + --spectrum-badge-workflow-icon-size: var( + --system-badge-size-s-workflow-icon-size + ); + --spectrum-badge-icon-text-spacing: var( + --system-badge-size-s-icon-text-spacing + ); + --spectrum-badge-icon-spacing-horizontal: var( + --system-badge-size-s-icon-spacing-horizontal + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --system-badge-size-s-icon-spacing-vertical-top + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --system-badge-size-s-icon-only-spacing-horizontal + ); } -:host([size='l']) { - --spectrum-badge-height: var(--system-badge-size-l-height); - --spectrum-badge-font-size: var(--system-badge-size-l-font-size); - --spectrum-badge-label-spacing-vertical-top: var( - --system-badge-size-l-label-spacing-vertical-top - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --system-badge-size-l-label-spacing-vertical-bottom - ); - --spectrum-badge-label-spacing-horizontal: var( - --system-badge-size-l-label-spacing-horizontal - ); - --spectrum-badge-workflow-icon-size: var( - --system-badge-size-l-workflow-icon-size - ); - --spectrum-badge-icon-text-spacing: var( - --system-badge-size-l-icon-text-spacing - ); - --spectrum-badge-icon-spacing-horizontal: var( - --system-badge-size-l-icon-spacing-horizontal - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --system-badge-size-l-icon-spacing-vertical-top - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --system-badge-size-l-icon-only-spacing-horizontal - ); +:host([size="l"]) { + --spectrum-badge-height: var(--system-badge-size-l-height); + --spectrum-badge-font-size: var(--system-badge-size-l-font-size); + --spectrum-badge-label-spacing-vertical-top: var( + --system-badge-size-l-label-spacing-vertical-top + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --system-badge-size-l-label-spacing-vertical-bottom + ); + --spectrum-badge-label-spacing-horizontal: var( + --system-badge-size-l-label-spacing-horizontal + ); + --spectrum-badge-workflow-icon-size: var( + --system-badge-size-l-workflow-icon-size + ); + --spectrum-badge-icon-text-spacing: var( + --system-badge-size-l-icon-text-spacing + ); + --spectrum-badge-icon-spacing-horizontal: var( + --system-badge-size-l-icon-spacing-horizontal + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --system-badge-size-l-icon-spacing-vertical-top + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --system-badge-size-l-icon-only-spacing-horizontal + ); } -:host([size='xl']) { - --spectrum-badge-height: var(--system-badge-size-xl-height); - --spectrum-badge-font-size: var(--system-badge-size-xl-font-size); - --spectrum-badge-label-spacing-vertical-top: var( - --system-badge-size-xl-label-spacing-vertical-top - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --system-badge-size-xl-label-spacing-vertical-bottom - ); - --spectrum-badge-label-spacing-horizontal: var( - --system-badge-size-xl-label-spacing-horizontal - ); - --spectrum-badge-workflow-icon-size: var( - --system-badge-size-xl-workflow-icon-size - ); - --spectrum-badge-icon-text-spacing: var( - --system-badge-size-xl-icon-text-spacing - ); - --spectrum-badge-icon-spacing-horizontal: var( - --system-badge-size-xl-icon-spacing-horizontal - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --system-badge-size-xl-icon-spacing-vertical-top - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --system-badge-size-xl-icon-only-spacing-horizontal - ); +:host([size="xl"]) { + --spectrum-badge-height: var(--system-badge-size-xl-height); + --spectrum-badge-font-size: var(--system-badge-size-xl-font-size); + --spectrum-badge-label-spacing-vertical-top: var( + --system-badge-size-xl-label-spacing-vertical-top + ); + --spectrum-badge-label-spacing-vertical-bottom: var( + --system-badge-size-xl-label-spacing-vertical-bottom + ); + --spectrum-badge-label-spacing-horizontal: var( + --system-badge-size-xl-label-spacing-horizontal + ); + --spectrum-badge-workflow-icon-size: var( + --system-badge-size-xl-workflow-icon-size + ); + --spectrum-badge-icon-text-spacing: var( + --system-badge-size-xl-icon-text-spacing + ); + --spectrum-badge-icon-spacing-horizontal: var( + --system-badge-size-xl-icon-spacing-horizontal + ); + --spectrum-badge-icon-spacing-vertical-top: var( + --system-badge-size-xl-icon-spacing-vertical-top + ); + --spectrum-badge-icon-only-spacing-horizontal: var( + --system-badge-size-xl-icon-only-spacing-horizontal + ); } diff --git a/packages/badge/src/spectrum-badge.css b/packages/badge/src/spectrum-badge.css index a69ad6cec0..3c126da11b 100644 --- a/packages/badge/src/spectrum-badge.css +++ b/packages/badge/src/spectrum-badge.css @@ -12,276 +12,273 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - border-color: CanvasText; - } + :host { + border-color: CanvasText; + } } :host { - min-block-size: var(--mod-badge-height, var(--spectrum-badge-height)); - inline-size: auto; - vertical-align: middle; - cursor: default; - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - border-radius: var( - --mod-badge-corner-radius, - var(--spectrum-badge-corner-radius) - ); - color: var( - --mod-badge-label-icon-color, - var(--spectrum-badge-label-icon-color) - ); - border: 1px solid #0000; - display: inline-flex; - position: relative; + min-block-size: var(--mod-badge-height, var(--spectrum-badge-height)); + inline-size: auto; + vertical-align: middle; + cursor: default; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + border-radius: var( + --mod-badge-corner-radius, + var(--spectrum-badge-corner-radius) + ); + color: var( + --mod-badge-label-icon-color, + var(--spectrum-badge-label-icon-color) + ); + border: 1px solid #0000; + display: inline-flex; + position: relative; } :host, -:host([variant='neutral']) { - background: var( - --mod-badge-background-color-default, - var(--spectrum-badge-background-color-default) - ); +:host([variant="neutral"]) { + background: var( + --mod-badge-background-color-default, + var(--spectrum-badge-background-color-default) + ); } -:host([variant='accent']) { - background: var( - --mod-badge-background-color-accent, - var(--spectrum-badge-background-color-accent) - ); +:host([variant="accent"]) { + background: var( + --mod-badge-background-color-accent, + var(--spectrum-badge-background-color-accent) + ); } -:host([variant='informative']) { - background: var( - --mod-badge-background-color-informative, - var(--spectrum-badge-background-color-informative) - ); +:host([variant="informative"]) { + background: var( + --mod-badge-background-color-informative, + var(--spectrum-badge-background-color-informative) + ); } -:host([variant='negative']) { - background: var( - --mod-badge-background-color-negative, - var(--spectrum-badge-background-color-negative) - ); +:host([variant="negative"]) { + background: var( + --mod-badge-background-color-negative, + var(--spectrum-badge-background-color-negative) + ); } -:host([variant='positive']) { - background: var( - --mod-badge-background-color-positive, - var(--spectrum-badge-background-color-positive) - ); +:host([variant="positive"]) { + background: var( + --mod-badge-background-color-positive, + var(--spectrum-badge-background-color-positive) + ); } -:host([variant='notice']) { - background: var( - --mod-badge-background-color-notice, - var(--spectrum-badge-background-color-notice) - ); +:host([variant="notice"]) { + background: var( + --mod-badge-background-color-notice, + var(--spectrum-badge-background-color-notice) + ); } -:host([variant='gray']) { - background: var( - --mod-badge-background-color-gray, - var(--spectrum-badge-background-color-gray) - ); +:host([variant="gray"]) { + background: var( + --mod-badge-background-color-gray, + var(--spectrum-badge-background-color-gray) + ); } -:host([variant='red']) { - background: var( - --mod-badge-background-color-red, - var(--spectrum-badge-background-color-red) - ); +:host([variant="red"]) { + background: var( + --mod-badge-background-color-red, + var(--spectrum-badge-background-color-red) + ); } -:host([variant='orange']) { - background: var( - --mod-badge-background-color-orange, - var(--spectrum-badge-background-color-orange) - ); +:host([variant="orange"]) { + background: var( + --mod-badge-background-color-orange, + var(--spectrum-badge-background-color-orange) + ); } -:host([variant='yellow']) { - background: var( - --mod-badge-background-color-yellow, - var(--spectrum-badge-background-color-yellow) - ); +:host([variant="yellow"]) { + background: var( + --mod-badge-background-color-yellow, + var(--spectrum-badge-background-color-yellow) + ); } -:host([variant='chartreuse']) { - background: var( - --mod-badge-background-color-chartreuse, - var(--spectrum-badge-background-color-chartreuse) - ); +:host([variant="chartreuse"]) { + background: var( + --mod-badge-background-color-chartreuse, + var(--spectrum-badge-background-color-chartreuse) + ); } -:host([variant='celery']) { - background: var( - --mod-badge-background-color-celery, - var(--spectrum-badge-background-color-celery) - ); +:host([variant="celery"]) { + background: var( + --mod-badge-background-color-celery, + var(--spectrum-badge-background-color-celery) + ); } -:host([variant='green']) { - background: var( - --mod-badge-background-color-green, - var(--spectrum-badge-background-color-green) - ); +:host([variant="green"]) { + background: var( + --mod-badge-background-color-green, + var(--spectrum-badge-background-color-green) + ); } -:host([variant='seafoam']) { - background: var( - --mod-badge-background-color-seafoam, - var(--spectrum-badge-background-color-seafoam) - ); +:host([variant="seafoam"]) { + background: var( + --mod-badge-background-color-seafoam, + var(--spectrum-badge-background-color-seafoam) + ); } -:host([variant='cyan']) { - background: var( - --mod-badge-background-color-cyan, - var(--spectrum-badge-background-color-cyan) - ); +:host([variant="cyan"]) { + background: var( + --mod-badge-background-color-cyan, + var(--spectrum-badge-background-color-cyan) + ); } -:host([variant='blue']) { - background: var( - --mod-badge-background-color-blue, - var(--spectrum-badge-background-color-blue) - ); +:host([variant="blue"]) { + background: var( + --mod-badge-background-color-blue, + var(--spectrum-badge-background-color-blue) + ); } -:host([variant='indigo']) { - background: var( - --mod-badge-background-color-indigo, - var(--spectrum-badge-background-color-indigo) - ); +:host([variant="indigo"]) { + background: var( + --mod-badge-background-color-indigo, + var(--spectrum-badge-background-color-indigo) + ); } -:host([variant='purple']) { - background: var( - --mod-badge-background-color-purple, - var(--spectrum-badge-background-color-purple) - ); +:host([variant="purple"]) { + background: var( + --mod-badge-background-color-purple, + var(--spectrum-badge-background-color-purple) + ); } -:host([variant='fuchsia']) { - background: var( - --mod-badge-background-color-fuchsia, - var(--spectrum-badge-background-color-fuchsia) - ); +:host([variant="fuchsia"]) { + background: var( + --mod-badge-background-color-fuchsia, + var(--spectrum-badge-background-color-fuchsia) + ); } -:host([variant='magenta']) { - background: var( - --mod-badge-background-color-magenta, - var(--spectrum-badge-background-color-magenta) - ); +:host([variant="magenta"]) { + background: var( + --mod-badge-background-color-magenta, + var(--spectrum-badge-background-color-magenta) + ); } -:host([fixed='inline-start']) { - border-start-start-radius: 0; - border-end-start-radius: 0; +:host([fixed="inline-start"]) { + border-start-start-radius: 0; + border-end-start-radius: 0; } -:host([fixed='inline-end']) { - border-start-end-radius: 0; - border-end-end-radius: 0; +:host([fixed="inline-end"]) { + border-start-end-radius: 0; + border-end-end-radius: 0; } -:host([fixed='block-start']) { - border-start-start-radius: 0; - border-start-end-radius: 0; +:host([fixed="block-start"]) { + border-start-start-radius: 0; + border-start-end-radius: 0; } -:host([fixed='block-end']) { - border-end-end-radius: 0; - border-end-start-radius: 0; +:host([fixed="block-end"]) { + border-end-end-radius: 0; + border-end-start-radius: 0; } .label { - font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size)); - line-height: var( - --mod-badge-line-height, - var(--spectrum-badge-line-height) - ); - color: var( - --mod-badge-label-icon-color, - var(--spectrum-badge-label-icon-color) - ); - padding-block-start: var( - --mod-badge-label-spacing-vertical-top, - var(--spectrum-badge-label-spacing-vertical-top) - ); - padding-block-end: var( - --mod-badge-label-spacing-vertical-bottom, - var(--spectrum-badge-label-spacing-vertical-bottom) - ); - padding-inline-start: var( - --mod-badge-label-spacing-horizontal, - var(--spectrum-badge-label-spacing-horizontal) - ); - padding-inline-end: var( - --mod-badge-label-spacing-horizontal, - var(--spectrum-badge-label-spacing-horizontal) - ); + font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size)); + line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height)); + color: var( + --mod-badge-label-icon-color, + var(--spectrum-badge-label-icon-color) + ); + padding-block-start: var( + --mod-badge-label-spacing-vertical-top, + var(--spectrum-badge-label-spacing-vertical-top) + ); + padding-block-end: var( + --mod-badge-label-spacing-vertical-bottom, + var(--spectrum-badge-label-spacing-vertical-bottom) + ); + padding-inline-start: var( + --mod-badge-label-spacing-horizontal, + var(--spectrum-badge-label-spacing-horizontal) + ); + padding-inline-end: var( + --mod-badge-label-spacing-horizontal, + var(--spectrum-badge-label-spacing-horizontal) + ); } .label:lang(ja), .label:lang(ko), .label:lang(zh) { - line-height: var( - --mod-badge-line-height-cjk, - var(--spectrum-badge-line-height-cjk) - ); + line-height: var( + --mod-badge-line-height-cjk, + var(--spectrum-badge-line-height-cjk) + ); } -[name='icon'] + .label { - padding-inline-start: 0; +[name="icon"] + .label { + padding-inline-start: 0; } -::slotted([slot='icon']) { - block-size: var( - --mod-badge-workflow-icon-size, - var(--spectrum-badge-workflow-icon-size) - ); - inline-size: var( - --mod-badge-workflow-icon-size, - var(--spectrum-badge-workflow-icon-size) - ); - flex: 0 0 - var( - --mod-badge-workflow-icon-size, - var(--spectrum-badge-workflow-icon-size) - ); - color: var( - --mod-badge-label-icon-color, - var(--spectrum-badge-label-icon-color) - ); - padding-block-start: var( - --mod-badge-icon-spacing-vertical-top, - var(--spectrum-badge-icon-spacing-vertical-top) - ); - padding-block-end: var( - --mod-badge-icon-spacing-vertical-top, - var(--spectrum-badge-icon-spacing-vertical-top) - ); - padding-inline-start: var( - --mod-badge-icon-spacing-horizontal, - var(--spectrum-badge-icon-spacing-horizontal) - ); - padding-inline-end: var( - --mod-badge-icon-text-spacing, - var(--spectrum-badge-icon-text-spacing) - ); +::slotted([slot="icon"]) { + block-size: var( + --mod-badge-workflow-icon-size, + var(--spectrum-badge-workflow-icon-size) + ); + inline-size: var( + --mod-badge-workflow-icon-size, + var(--spectrum-badge-workflow-icon-size) + ); + flex: 0 0 + var( + --mod-badge-workflow-icon-size, + var(--spectrum-badge-workflow-icon-size) + ); + color: var( + --mod-badge-label-icon-color, + var(--spectrum-badge-label-icon-color) + ); + padding-block-start: var( + --mod-badge-icon-spacing-vertical-top, + var(--spectrum-badge-icon-spacing-vertical-top) + ); + padding-block-end: var( + --mod-badge-icon-spacing-vertical-top, + var(--spectrum-badge-icon-spacing-vertical-top) + ); + padding-inline-start: var( + --mod-badge-icon-spacing-horizontal, + var(--spectrum-badge-icon-spacing-horizontal) + ); + padding-inline-end: var( + --mod-badge-icon-text-spacing, + var(--spectrum-badge-icon-text-spacing) + ); } [icon-only]::slotted(*) { - padding-inline-start: var( - --mod-badge-icon-only-spacing-horizontal, - var(--spectrum-badge-icon-only-spacing-horizontal) - ); - padding-inline-end: var( - --mod-badge-icon-only-spacing-horizontal, - var(--spectrum-badge-icon-only-spacing-horizontal) - ); + padding-inline-start: var( + --mod-badge-icon-only-spacing-horizontal, + var(--spectrum-badge-icon-only-spacing-horizontal) + ); + padding-inline-end: var( + --mod-badge-icon-only-spacing-horizontal, + var(--spectrum-badge-icon-only-spacing-horizontal) + ); } diff --git a/packages/breadcrumbs/src/breadcrumbs-overrides.css b/packages/breadcrumbs/src/breadcrumbs-overrides.css index f395509fe0..2ccbcbd6f0 100644 --- a/packages/breadcrumbs/src/breadcrumbs-overrides.css +++ b/packages/breadcrumbs/src/breadcrumbs-overrides.css @@ -12,150 +12,150 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-breadcrumbs-block-size: var(--system-breadcrumbs-block-size); - --spectrum-breadcrumbs-block-size-compact: var( - --system-breadcrumbs-block-size-compact - ); - --spectrum-breadcrumbs-block-size-multiline: var( - --system-breadcrumbs-block-size-multiline - ); - --spectrum-breadcrumbs-line-height: var(--system-breadcrumbs-line-height); - --spectrum-breadcrumbs-font-size: var(--system-breadcrumbs-font-size); - --spectrum-breadcrumbs-font-family: var(--system-breadcrumbs-font-family); - --spectrum-breadcrumbs-font-weight: var(--system-breadcrumbs-font-weight); - --spectrum-breadcrumbs-font-size-current: var( - --system-breadcrumbs-font-size-current - ); - --spectrum-breadcrumbs-font-family-current: var( - --system-breadcrumbs-font-family-current - ); - --spectrum-breadcrumbs-font-weight-current: var( - --system-breadcrumbs-font-weight-current - ); - --spectrum-breadcrumbs-font-size-compact: var( - --system-breadcrumbs-font-size-compact - ); - --spectrum-breadcrumbs-font-family-compact: var( - --system-breadcrumbs-font-family-compact - ); - --spectrum-breadcrumbs-font-weight-compact: var( - --system-breadcrumbs-font-weight-compact - ); - --spectrum-breadcrumbs-font-size-compact-current: var( - --system-breadcrumbs-font-size-compact-current - ); - --spectrum-breadcrumbs-font-family-compact-current: var( - --system-breadcrumbs-font-family-compact-current - ); - --spectrum-breadcrumbs-font-weight-compact-current: var( - --system-breadcrumbs-font-weight-compact-current - ); - --spectrum-breadcrumbs-font-size-multiline: var( - --system-breadcrumbs-font-size-multiline - ); - --spectrum-breadcrumbs-font-family-multiline: var( - --system-breadcrumbs-font-family-multiline - ); - --spectrum-breadcrumbs-font-weight-multiline: var( - --system-breadcrumbs-font-weight-multiline - ); - --spectrum-breadcrumbs-font-size-multiline-current: var( - --system-breadcrumbs-font-size-multiline-current - ); - --spectrum-breadcrumbs-font-family-multiline-current: var( - --system-breadcrumbs-font-family-multiline-current - ); - --spectrum-breadcrumbs-font-weight-multiline-current: var( - --system-breadcrumbs-font-weight-multiline-current - ); - --spectrum-breadcrumbs-text-decoration-thickness: var( - --system-breadcrumbs-text-decoration-thickness - ); - --spectrum-breadcrumbs-text-decoration-gap: var( - --system-breadcrumbs-text-decoration-gap - ); - --spectrum-breadcrumbs-separator-spacing-inline: var( - --system-breadcrumbs-separator-spacing-inline - ); - --spectrum-breadcrumbs-text-spacing-block-start: var( - --system-breadcrumbs-text-spacing-block-start - ); - --spectrum-breadcrumbs-text-spacing-block-end: var( - --system-breadcrumbs-text-spacing-block-end - ); - --spectrum-breadcrumbs-icon-spacing-block: var( - --system-breadcrumbs-icon-spacing-block - ); - --spectrum-breadcrumbs-text-spacing-block-start-compact: var( - --system-breadcrumbs-text-spacing-block-start-compact - ); - --spectrum-breadcrumbs-text-spacing-block-end-compact: var( - --system-breadcrumbs-text-spacing-block-end-compact - ); - --spectrum-breadcrumbs-icon-spacing-block-compact: var( - --system-breadcrumbs-icon-spacing-block-compact - ); - --spectrum-breadcrumbs-text-spacing-block-start-multiline: var( - --system-breadcrumbs-text-spacing-block-start-multiline - ); - --spectrum-breadcrumbs-text-spacing-block-end-multiline: var( - --system-breadcrumbs-text-spacing-block-end-multiline - ); - --spectrum-breadcrumbs-text-spacing-block-between-multiline: var( - --system-breadcrumbs-text-spacing-block-between-multiline - ); - --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var( - --system-breadcrumbs-icon-spacing-block-start-multiline - ); - --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var( - --system-breadcrumbs-icon-spacing-block-between-multiline - ); - --spectrum-breadcrumbs-inline-start: var(--system-breadcrumbs-inline-start); - --spectrum-breadcrumbs-inline-end: var(--system-breadcrumbs-inline-end); - --spectrum-breadcrumbs-action-button-spacing-inline: var( - --system-breadcrumbs-action-button-spacing-inline - ); - --spectrum-breadcrumbs-action-button-spacing-block: var( - --system-breadcrumbs-action-button-spacing-block - ); - --spectrum-breadcrumbs-action-button-spacing-block-compact: var( - --system-breadcrumbs-action-button-spacing-block-compact - ); - --spectrum-breadcrumbs-action-button-spacing-inline-start: var( - --system-breadcrumbs-action-button-spacing-inline-start - ); - --spectrum-breadcrumbs-action-button-spacing-block-multiline: var( - --system-breadcrumbs-action-button-spacing-block-multiline - ); - --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var( - --system-breadcrumbs-action-button-spacing-block-between-multiline - ); - --spectrum-breadcrumbs-focus-indicator-thickness: var( - --system-breadcrumbs-focus-indicator-thickness - ); - --spectrum-breadcrumbs-focus-indicator-gap: var( - --system-breadcrumbs-focus-indicator-gap - ); - --spectrum-breadcrumbs-item-link-border-radius: var( - --system-breadcrumbs-item-link-border-radius - ); - --spectrum-breadcrumbs-text-color: var(--system-breadcrumbs-text-color); - --spectrum-breadcrumbs-text-color-current: var( - --system-breadcrumbs-text-color-current - ); - --spectrum-breadcrumbs-text-color-disabled: var( - --system-breadcrumbs-text-color-disabled - ); - --spectrum-breadcrumbs-separator-color: var( - --system-breadcrumbs-separator-color - ); - --spectrum-breadcrumbs-action-button-color: var( - --system-breadcrumbs-action-button-color - ); - --spectrum-breadcrumbs-action-button-color-disabled: var( - --system-breadcrumbs-action-button-color-disabled - ); - --spectrum-breadcrumbs-focus-indicator-color: var( - --system-breadcrumbs-focus-indicator-color - ); + --spectrum-breadcrumbs-block-size: var(--system-breadcrumbs-block-size); + --spectrum-breadcrumbs-block-size-compact: var( + --system-breadcrumbs-block-size-compact + ); + --spectrum-breadcrumbs-block-size-multiline: var( + --system-breadcrumbs-block-size-multiline + ); + --spectrum-breadcrumbs-line-height: var(--system-breadcrumbs-line-height); + --spectrum-breadcrumbs-font-size: var(--system-breadcrumbs-font-size); + --spectrum-breadcrumbs-font-family: var(--system-breadcrumbs-font-family); + --spectrum-breadcrumbs-font-weight: var(--system-breadcrumbs-font-weight); + --spectrum-breadcrumbs-font-size-current: var( + --system-breadcrumbs-font-size-current + ); + --spectrum-breadcrumbs-font-family-current: var( + --system-breadcrumbs-font-family-current + ); + --spectrum-breadcrumbs-font-weight-current: var( + --system-breadcrumbs-font-weight-current + ); + --spectrum-breadcrumbs-font-size-compact: var( + --system-breadcrumbs-font-size-compact + ); + --spectrum-breadcrumbs-font-family-compact: var( + --system-breadcrumbs-font-family-compact + ); + --spectrum-breadcrumbs-font-weight-compact: var( + --system-breadcrumbs-font-weight-compact + ); + --spectrum-breadcrumbs-font-size-compact-current: var( + --system-breadcrumbs-font-size-compact-current + ); + --spectrum-breadcrumbs-font-family-compact-current: var( + --system-breadcrumbs-font-family-compact-current + ); + --spectrum-breadcrumbs-font-weight-compact-current: var( + --system-breadcrumbs-font-weight-compact-current + ); + --spectrum-breadcrumbs-font-size-multiline: var( + --system-breadcrumbs-font-size-multiline + ); + --spectrum-breadcrumbs-font-family-multiline: var( + --system-breadcrumbs-font-family-multiline + ); + --spectrum-breadcrumbs-font-weight-multiline: var( + --system-breadcrumbs-font-weight-multiline + ); + --spectrum-breadcrumbs-font-size-multiline-current: var( + --system-breadcrumbs-font-size-multiline-current + ); + --spectrum-breadcrumbs-font-family-multiline-current: var( + --system-breadcrumbs-font-family-multiline-current + ); + --spectrum-breadcrumbs-font-weight-multiline-current: var( + --system-breadcrumbs-font-weight-multiline-current + ); + --spectrum-breadcrumbs-text-decoration-thickness: var( + --system-breadcrumbs-text-decoration-thickness + ); + --spectrum-breadcrumbs-text-decoration-gap: var( + --system-breadcrumbs-text-decoration-gap + ); + --spectrum-breadcrumbs-separator-spacing-inline: var( + --system-breadcrumbs-separator-spacing-inline + ); + --spectrum-breadcrumbs-text-spacing-block-start: var( + --system-breadcrumbs-text-spacing-block-start + ); + --spectrum-breadcrumbs-text-spacing-block-end: var( + --system-breadcrumbs-text-spacing-block-end + ); + --spectrum-breadcrumbs-icon-spacing-block: var( + --system-breadcrumbs-icon-spacing-block + ); + --spectrum-breadcrumbs-text-spacing-block-start-compact: var( + --system-breadcrumbs-text-spacing-block-start-compact + ); + --spectrum-breadcrumbs-text-spacing-block-end-compact: var( + --system-breadcrumbs-text-spacing-block-end-compact + ); + --spectrum-breadcrumbs-icon-spacing-block-compact: var( + --system-breadcrumbs-icon-spacing-block-compact + ); + --spectrum-breadcrumbs-text-spacing-block-start-multiline: var( + --system-breadcrumbs-text-spacing-block-start-multiline + ); + --spectrum-breadcrumbs-text-spacing-block-end-multiline: var( + --system-breadcrumbs-text-spacing-block-end-multiline + ); + --spectrum-breadcrumbs-text-spacing-block-between-multiline: var( + --system-breadcrumbs-text-spacing-block-between-multiline + ); + --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var( + --system-breadcrumbs-icon-spacing-block-start-multiline + ); + --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var( + --system-breadcrumbs-icon-spacing-block-between-multiline + ); + --spectrum-breadcrumbs-inline-start: var(--system-breadcrumbs-inline-start); + --spectrum-breadcrumbs-inline-end: var(--system-breadcrumbs-inline-end); + --spectrum-breadcrumbs-action-button-spacing-inline: var( + --system-breadcrumbs-action-button-spacing-inline + ); + --spectrum-breadcrumbs-action-button-spacing-block: var( + --system-breadcrumbs-action-button-spacing-block + ); + --spectrum-breadcrumbs-action-button-spacing-block-compact: var( + --system-breadcrumbs-action-button-spacing-block-compact + ); + --spectrum-breadcrumbs-action-button-spacing-inline-start: var( + --system-breadcrumbs-action-button-spacing-inline-start + ); + --spectrum-breadcrumbs-action-button-spacing-block-multiline: var( + --system-breadcrumbs-action-button-spacing-block-multiline + ); + --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var( + --system-breadcrumbs-action-button-spacing-block-between-multiline + ); + --spectrum-breadcrumbs-focus-indicator-thickness: var( + --system-breadcrumbs-focus-indicator-thickness + ); + --spectrum-breadcrumbs-focus-indicator-gap: var( + --system-breadcrumbs-focus-indicator-gap + ); + --spectrum-breadcrumbs-item-link-border-radius: var( + --system-breadcrumbs-item-link-border-radius + ); + --spectrum-breadcrumbs-text-color: var(--system-breadcrumbs-text-color); + --spectrum-breadcrumbs-text-color-current: var( + --system-breadcrumbs-text-color-current + ); + --spectrum-breadcrumbs-text-color-disabled: var( + --system-breadcrumbs-text-color-disabled + ); + --spectrum-breadcrumbs-separator-color: var( + --system-breadcrumbs-separator-color + ); + --spectrum-breadcrumbs-action-button-color: var( + --system-breadcrumbs-action-button-color + ); + --spectrum-breadcrumbs-action-button-color-disabled: var( + --system-breadcrumbs-action-button-color-disabled + ); + --spectrum-breadcrumbs-focus-indicator-color: var( + --system-breadcrumbs-focus-indicator-color + ); } diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css b/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css index 13bf7cc2f5..275b5a3a45 100644 --- a/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css +++ b/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css @@ -12,260 +12,263 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #separator { - margin-block: var( - --mod-breadcrumbs-icon-spacing-block, - var(--spectrum-breadcrumbs-icon-spacing-block) - ); - margin-inline: var( - --mod-breadcrumbs-separator-spacing-inline, - var(--spectrum-breadcrumbs-separator-spacing-inline) - ); - opacity: 1; - color: var( - --highcontrast-breadcrumbs-separator-color, - var( - --mod-breadcrumbs-separator-color, - var(--spectrum-breadcrumbs-separator-color) - ) - ); - position: relative; + margin-block: var( + --mod-breadcrumbs-icon-spacing-block, + var(--spectrum-breadcrumbs-icon-spacing-block) + ); + margin-inline: var( + --mod-breadcrumbs-separator-spacing-inline, + var(--spectrum-breadcrumbs-separator-spacing-inline) + ); + opacity: 1; + color: var( + --highcontrast-breadcrumbs-separator-color, + var( + --mod-breadcrumbs-separator-color, + var(--spectrum-breadcrumbs-separator-color) + ) + ); + position: relative; } #separator:dir(rtl), -:host([dir='rtl']) #separator { - transform: scaleX(-1); +:host([dir="rtl"]) #separator { + transform: scaleX(-1); } :host { - box-sizing: border-box; - white-space: nowrap; - font-family: var( - --mod-breadcrumbs-font-family, - var(--spectrum-breadcrumbs-font-family) - ); - font-size: var( - --mod-breadcrumbs-font-size, - var(--spectrum-breadcrumbs-font-size) - ); - font-weight: var( - --mod-breadcrumbs-font-weight, - var(--spectrum-breadcrumbs-font-weight) - ); - line-height: var( - --mod-breadcrumbs-line-height, - var(--spectrum-breadcrumbs-line-height) - ); - align-items: center; - display: inline-flex; - position: relative; + box-sizing: border-box; + white-space: nowrap; + font-family: var( + --mod-breadcrumbs-font-family, + var(--spectrum-breadcrumbs-font-family) + ); + font-size: var( + --mod-breadcrumbs-font-size, + var(--spectrum-breadcrumbs-font-size) + ); + font-weight: var( + --mod-breadcrumbs-font-weight, + var(--spectrum-breadcrumbs-font-weight) + ); + line-height: var( + --mod-breadcrumbs-line-height, + var(--spectrum-breadcrumbs-line-height) + ); + align-items: center; + display: inline-flex; + position: relative; } :host(:not(.is-menu):last-of-type) { - font-family: var( - --mod-breadcrumbs-font-family-current, - var(--spectrum-breadcrumbs-font-family-current) - ); - font-size: var( - --mod-breadcrumbs-font-size-current, - var(--spectrum-breadcrumbs-font-size-current) - ); - font-weight: var( - --mod-breadcrumbs-font-weight-current, - var(--spectrum-breadcrumbs-font-weight-current) - ); + font-family: var( + --mod-breadcrumbs-font-family-current, + var(--spectrum-breadcrumbs-font-family-current) + ); + font-size: var( + --mod-breadcrumbs-font-size-current, + var(--spectrum-breadcrumbs-font-size-current) + ); + font-weight: var( + --mod-breadcrumbs-font-weight-current, + var(--spectrum-breadcrumbs-font-weight-current) + ); } :host(:not(.is-menu):last-of-type) #separator { - display: none; + display: none; } ::slotted(sp-action-menu) { - margin-inline: var( - --mod-breadcrumbs-action-button-spacing-inline, - var(--spectrum-breadcrumbs-action-button-spacing-inline) - ); - margin-block: var( - --mod-breadcrumbs-action-button-spacing-block, - var(--spectrum-breadcrumbs-action-button-spacing-block) - ); - color: var( - --highcontrast-breadcrumbs-action-button-color, - var( - --mod-breadcrumbs-action-button-color, - var(--spectrum-breadcrumbs-action-button-color) - ) - ); + margin-inline: var( + --mod-breadcrumbs-action-button-spacing-inline, + var(--spectrum-breadcrumbs-action-button-spacing-inline) + ); + margin-block: var( + --mod-breadcrumbs-action-button-spacing-block, + var(--spectrum-breadcrumbs-action-button-spacing-block) + ); + color: var( + --highcontrast-breadcrumbs-action-button-color, + var( + --mod-breadcrumbs-action-button-color, + var(--spectrum-breadcrumbs-action-button-color) + ) + ); } ::slotted(sp-action-menu[disabled]) { - color: var( - --highcontrast-breadcrumbs-action-button-color-disabled, - var( - --mod-breadcrumbs-action-button-color-disabled, - var(--spectrum-breadcrumbs-action-button-color-disabled) - ) - ); + color: var( + --highcontrast-breadcrumbs-action-button-color-disabled, + var( + --mod-breadcrumbs-action-button-color-disabled, + var(--spectrum-breadcrumbs-action-button-color-disabled) + ) + ); } :host(:first-of-type) > ::slotted(sp-action-menu) { - margin-inline-start: var( - --mod-breadcrumbs-action-button-spacing-inline-start, - var(--spectrum-breadcrumbs-action-button-spacing-inline-start) - ); + margin-inline-start: var( + --mod-breadcrumbs-action-button-spacing-inline-start, + var(--spectrum-breadcrumbs-action-button-spacing-inline-start) + ); } #item-link { - cursor: default; - box-sizing: border-box; - border-radius: var( - --mod-breadcrumbs-item-link-border-radius, - var(--spectrum-breadcrumbs-item-link-border-radius) - ); - color: var( - --highcontrast-breadcrumbs-text-color, - var( - --mod-breadcrumbs-text-color, - var(--spectrum-breadcrumbs-text-color) - ) - ); - outline: none; - margin-block-start: var( - --mod-breadcrumbs-text-spacing-block-start, - var(--spectrum-breadcrumbs-text-spacing-block-start) - ); - margin-block-end: var( - --mod-breadcrumbs-text-spacing-block-end, - var(--spectrum-breadcrumbs-text-spacing-block-end) - ); - -webkit-text-decoration: none; - text-decoration: none; - display: block; - position: relative; + cursor: default; + box-sizing: border-box; + border-radius: var( + --mod-breadcrumbs-item-link-border-radius, + var(--spectrum-breadcrumbs-item-link-border-radius) + ); + color: var( + --highcontrast-breadcrumbs-text-color, + var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color)) + ); + outline: none; + margin-block-start: var( + --mod-breadcrumbs-text-spacing-block-start, + var(--spectrum-breadcrumbs-text-spacing-block-start) + ); + margin-block-end: var( + --mod-breadcrumbs-text-spacing-block-end, + var(--spectrum-breadcrumbs-text-spacing-block-end) + ); + -webkit-text-decoration: none; + text-decoration: none; + display: block; + position: relative; } #item-link.is-disabled, -:host([aria-disabled='true']) #item-link { - color: var( - --highcontrast-breadcrumbs-text-color-disabled, - var( - --mod-breadcrumbs-text-color-disabled, - var(--spectrum-breadcrumbs-text-color-disabled) - ) - ); +:host([aria-disabled="true"]) #item-link { + color: var( + --highcontrast-breadcrumbs-text-color-disabled, + var( + --mod-breadcrumbs-text-color-disabled, + var(--spectrum-breadcrumbs-text-color-disabled) + ) + ); } :host(:not(.is-menu):last-of-type) #item-link { - color: var( - --highcontrast-breadcrumbs-text-color-current, - var( - --mod-breadcrumbs-text-color-current, - var(--spectrum-breadcrumbs-text-color-current) - ) - ); + color: var( + --highcontrast-breadcrumbs-text-color-current, + var( + --mod-breadcrumbs-text-color-current, + var(--spectrum-breadcrumbs-text-color-current) + ) + ); } #item-link[href], #item-link[tabindex] { - cursor: pointer; + cursor: pointer; } #item-link[href]:focus-visible, #item-link[tabindex]:focus-visible { - -webkit-text-decoration: underline; - text-decoration: underline; - text-decoration-thickness: var( - --mod-breadcrumbs-text-decoration-thickness, - var(--spectrum-breadcrumbs-text-decoration-thickness) - ); - text-underline-offset: var( - --mod-breadcrumbs-text-decoration-gap, - var(--spectrum-breadcrumbs-text-decoration-gap) - ); + -webkit-text-decoration: underline; + text-decoration: underline; + text-decoration-thickness: var( + --mod-breadcrumbs-text-decoration-thickness, + var(--spectrum-breadcrumbs-text-decoration-thickness) + ); + text-underline-offset: var( + --mod-breadcrumbs-text-decoration-gap, + var(--spectrum-breadcrumbs-text-decoration-gap) + ); } @media (hover: hover) { - #item-link[href]:hover, - #item-link[tabindex]:hover { - -webkit-text-decoration: underline; - text-decoration: underline; - text-decoration-thickness: var( - --mod-breadcrumbs-text-decoration-thickness, - var(--spectrum-breadcrumbs-text-decoration-thickness) - ); - text-underline-offset: var( - --mod-breadcrumbs-text-decoration-gap, - var(--spectrum-breadcrumbs-text-decoration-gap) - ); - } + #item-link[href]:hover, + #item-link[tabindex]:hover { + -webkit-text-decoration: underline; + text-decoration: underline; + text-decoration-thickness: var( + --mod-breadcrumbs-text-decoration-thickness, + var(--spectrum-breadcrumbs-text-decoration-thickness) + ); + text-underline-offset: var( + --mod-breadcrumbs-text-decoration-gap, + var(--spectrum-breadcrumbs-text-decoration-gap) + ); + } } :host .is-dragged #item-link:before, #item-link:focus-visible:before { - box-sizing: border-box; - inline-size: calc( - 100% + - var( - --mod-breadcrumbs-focus-indicator-gap, - var(--spectrum-breadcrumbs-focus-indicator-gap) - ) * 2 + - var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ) * 2 - ); - block-size: calc( - 100% + - var( - --mod-breadcrumbs-focus-indicator-gap, - var(--spectrum-breadcrumbs-focus-indicator-gap) - ) * 2 + - var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ) * 2 - ); - border-width: var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ); - border-radius: var( - --mod-breadcrumbs-item-link-border-radius, - var(--spectrum-breadcrumbs-item-link-border-radius) - ); - content: ''; - pointer-events: none; - border-style: solid; - border-color: var( - --highcontrast-breadcrumbs-focus-indicator-color, - var( - --mod-breadcrumbs-focus-indicator-color, - var(--spectrum-breadcrumbs-focus-indicator-color) - ) - ); - margin-block-start: calc( - ( - var( - --mod-breadcrumbs-focus-indicator-gap, - var(--spectrum-breadcrumbs-focus-indicator-gap) - ) + - var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ) - ) * -1 - ); - margin-inline-start: calc( - ( - var( - --mod-breadcrumbs-focus-indicator-gap, - var(--spectrum-breadcrumbs-focus-indicator-gap) - ) + - var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ) - ) * -1 - ); - display: block; - position: absolute; + box-sizing: border-box; + inline-size: calc( + 100% + + var( + --mod-breadcrumbs-focus-indicator-gap, + var(--spectrum-breadcrumbs-focus-indicator-gap) + ) * + 2 + + var( + --mod-breadcrumbs-focus-indicator-thickness, + var(--spectrum-breadcrumbs-focus-indicator-thickness) + ) * + 2 + ); + block-size: calc( + 100% + + var( + --mod-breadcrumbs-focus-indicator-gap, + var(--spectrum-breadcrumbs-focus-indicator-gap) + ) * + 2 + + var( + --mod-breadcrumbs-focus-indicator-thickness, + var(--spectrum-breadcrumbs-focus-indicator-thickness) + ) * + 2 + ); + border-width: var( + --mod-breadcrumbs-focus-indicator-thickness, + var(--spectrum-breadcrumbs-focus-indicator-thickness) + ); + border-radius: var( + --mod-breadcrumbs-item-link-border-radius, + var(--spectrum-breadcrumbs-item-link-border-radius) + ); + content: ""; + pointer-events: none; + border-style: solid; + border-color: var( + --highcontrast-breadcrumbs-focus-indicator-color, + var( + --mod-breadcrumbs-focus-indicator-color, + var(--spectrum-breadcrumbs-focus-indicator-color) + ) + ); + margin-block-start: calc( + ( + var( + --mod-breadcrumbs-focus-indicator-gap, + var(--spectrum-breadcrumbs-focus-indicator-gap) + ) + + var( + --mod-breadcrumbs-focus-indicator-thickness, + var(--spectrum-breadcrumbs-focus-indicator-thickness) + ) + ) * + -1 + ); + margin-inline-start: calc( + ( + var( + --mod-breadcrumbs-focus-indicator-gap, + var(--spectrum-breadcrumbs-focus-indicator-gap) + ) + + var( + --mod-breadcrumbs-focus-indicator-thickness, + var(--spectrum-breadcrumbs-focus-indicator-thickness) + ) + ) * + -1 + ); + display: block; + position: absolute; } diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs.css b/packages/breadcrumbs/src/spectrum-breadcrumbs.css index 1156522da0..38dcf11bd3 100644 --- a/packages/breadcrumbs/src/spectrum-breadcrumbs.css +++ b/packages/breadcrumbs/src/spectrum-breadcrumbs.css @@ -12,81 +12,81 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-breadcrumbs-text-color: LinkText; - --highcontrast-breadcrumbs-text-color-current: CanvasText; - --highcontrast-breadcrumbs-text-color-disabled: GrayText; - --highcontrast-breadcrumbs-separator-color: CanvasText; - --highcontrast-breadcrumbs-action-button-color: LinkText; - --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; - --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; - } + :host { + --highcontrast-breadcrumbs-text-color: LinkText; + --highcontrast-breadcrumbs-text-color-current: CanvasText; + --highcontrast-breadcrumbs-text-color-disabled: GrayText; + --highcontrast-breadcrumbs-separator-color: CanvasText; + --highcontrast-breadcrumbs-action-button-color: LinkText; + --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; + --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; + } } #list { - block-size: var( - --mod-breadcrumbs-block-size, - var(--spectrum-breadcrumbs-block-size) - ); - flex-flow: row; - flex: 1 0; - justify-content: flex-start; - align-items: center; - margin: 0; - padding-inline-start: var( - --mod-breadcrumbs-inline-start, - var(--spectrum-breadcrumbs-inline-start) - ); - padding-inline-end: var( - --mod-breadcrumbs-inline-end, - var(--spectrum-breadcrumbs-inline-end) - ); - list-style-type: none; - display: flex; + block-size: var( + --mod-breadcrumbs-block-size, + var(--spectrum-breadcrumbs-block-size) + ); + flex-flow: row; + flex: 1 0; + justify-content: flex-start; + align-items: center; + margin: 0; + padding-inline-start: var( + --mod-breadcrumbs-inline-start, + var(--spectrum-breadcrumbs-inline-start) + ); + padding-inline-end: var( + --mod-breadcrumbs-inline-end, + var(--spectrum-breadcrumbs-inline-end) + ); + list-style-type: none; + display: flex; } :host([compact]) #list { - block-size: var( - --mod-breadcrumbs-block-size-compact, - var(--spectrum-breadcrumbs-block-size-compact) - ); + block-size: var( + --mod-breadcrumbs-block-size-compact, + var(--spectrum-breadcrumbs-block-size-compact) + ); } .spectrum-Breadcrumbs--multiline { - block-size: var( - --mod-breadcrumbs-block-size-multiline, - var(--spectrum-breadcrumbs-block-size-multiline) - ); - flex-wrap: wrap; - align-content: center; + block-size: var( + --mod-breadcrumbs-block-size-multiline, + var(--spectrum-breadcrumbs-block-size-multiline) + ); + flex-wrap: wrap; + align-content: center; } :host([compact]) ::slotted(sp-breadcrumb-item) { - font-family: var( - --mod-breadcrumbs-font-family-compact, - var(--spectrum-breadcrumbs-font-family-compact) - ); - font-size: var( - --mod-breadcrumbs-font-size-compact, - var(--spectrum-breadcrumbs-font-size-compact) - ); - font-weight: var( - --mod-breadcrumbs-font-weight-compact, - var(--spectrum-breadcrumbs-font-weight-compact) - ); + font-family: var( + --mod-breadcrumbs-font-family-compact, + var(--spectrum-breadcrumbs-font-family-compact) + ); + font-size: var( + --mod-breadcrumbs-font-size-compact, + var(--spectrum-breadcrumbs-font-size-compact) + ); + font-weight: var( + --mod-breadcrumbs-font-weight-compact, + var(--spectrum-breadcrumbs-font-weight-compact) + ); } :host([compact]) ::slotted(:last-of-type) { - font-family: var( - --mod-breadcrumbs-font-family-compact-current, - var(--spectrum-breadcrumbs-font-family-compact-current) - ); - font-size: var( - --mod-breadcrumbs-font-size-compact-current, - var(--spectrum-breadcrumbs-font-size-compact-current) - ); - font-weight: var( - --mod-breadcrumbs-font-weight-compact-current, - var(--spectrum-breadcrumbs-font-weight-compact-current) - ); + font-family: var( + --mod-breadcrumbs-font-family-compact-current, + var(--spectrum-breadcrumbs-font-family-compact-current) + ); + font-size: var( + --mod-breadcrumbs-font-size-compact-current, + var(--spectrum-breadcrumbs-font-size-compact-current) + ); + font-weight: var( + --mod-breadcrumbs-font-weight-compact-current, + var(--spectrum-breadcrumbs-font-weight-compact-current) + ); } diff --git a/packages/button-group/src/button-group-overrides.css b/packages/button-group/src/button-group-overrides.css index 2ad1ce7f91..6e6e567baf 100644 --- a/packages/button-group/src/button-group-overrides.css +++ b/packages/button-group/src/button-group-overrides.css @@ -12,46 +12,46 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-spacing-vertical - ); + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-spacing-vertical + ); } -:host([size='s']) { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-size-s-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-size-s-spacing-vertical - ); +:host([size="s"]) { + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-size-s-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-size-s-spacing-vertical + ); } :host { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-size-m-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-size-m-spacing-vertical - ); + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-size-m-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-size-m-spacing-vertical + ); } -:host([size='l']) { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-size-l-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-size-l-spacing-vertical - ); +:host([size="l"]) { + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-size-l-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-size-l-spacing-vertical + ); } -:host([size='xl']) { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-size-xl-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-size-xl-spacing-vertical - ); +:host([size="xl"]) { + --spectrum-buttongroup-spacing-horizontal: var( + --system-button-group-size-xl-spacing-horizontal + ); + --spectrum-buttongroup-spacing-vertical: var( + --system-button-group-size-xl-spacing-vertical + ); } diff --git a/packages/button-group/src/spectrum-button-group.css b/packages/button-group/src/spectrum-button-group.css index af5598e9f1..faeaa92154 100644 --- a/packages/button-group/src/spectrum-button-group.css +++ b/packages/button-group/src/spectrum-button-group.css @@ -12,25 +12,25 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - gap: var( - --mod-buttongroup-spacing-horizontal, - var(--spectrum-buttongroup-spacing-horizontal) - ); - justify-content: normal; - justify-content: var(--mod-buttongroup-justify-content, normal); - flex-wrap: wrap; - display: flex; + gap: var( + --mod-buttongroup-spacing-horizontal, + var(--spectrum-buttongroup-spacing-horizontal) + ); + justify-content: normal; + justify-content: var(--mod-buttongroup-justify-content, normal); + flex-wrap: wrap; + display: flex; } ::slotted(*) { - flex-shrink: 0; + flex-shrink: 0; } :host([vertical]) { - gap: var( - --mod-buttongroup-spacing-vertical, - var(--spectrum-buttongroup-spacing-vertical) - ); - flex-direction: column; - display: inline-flex; + gap: var( + --mod-buttongroup-spacing-vertical, + var(--spectrum-buttongroup-spacing-vertical) + ); + flex-direction: column; + display: inline-flex; } diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts index 6541c4753c..6a6e4803ab 100644 --- a/packages/button/src/ButtonBase.ts +++ b/packages/button/src/ButtonBase.ts @@ -11,256 +11,249 @@ governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - PropertyValues, - TemplateResult, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + PropertyValues, + TemplateResult, +} from "@spectrum-web-components/base"; import { - property, - query, -} from '@spectrum-web-components/base/src/decorators.js'; -import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js'; -import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; -import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js'; -import buttonStyles from './button-base.css.js'; + property, + query, +} from "@spectrum-web-components/base/src/decorators.js"; +import { Focusable } from "@spectrum-web-components/shared/src/focusable.js"; +import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js"; +import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js"; +import buttonStyles from "./button-base.css.js"; /** * @slot - text content to be displayed in the Button element * @slot icon - icon element(s) to display at the start of the button */ -export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [ - 'sp-overlay,sp-tooltip', +export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), "", [ + "sp-overlay,sp-tooltip", ]) { - public static override get styles(): CSSResultArray { - return [buttonStyles]; - } - - // TODO we need to document this property for consumers, - // as it's not a 1:1 equivalent to active - @property({ type: Boolean, reflect: true }) - public active = false; - - /** - * The default behavior of the button. - * Possible values are: `button` (default), `submit`, and `reset`. - */ - @property({ type: String }) - public type: 'button' | 'submit' | 'reset' = 'button'; - - /** - * HTML anchor element that component clicks by proxy - */ - @query('.anchor') - private anchorElement!: HTMLAnchorElement; - - public override get focusElement(): HTMLElement { - return this; - } - - protected get hasLabel(): boolean { - return this.slotHasContent; - } - - protected get buttonContent(): TemplateResult[] { - const content = [ - html` - - `, - html` - - - - `, - ]; - - return content; - } - - constructor() { - super(); - this.proxyFocus = this.proxyFocus.bind(this); - - this.addEventListener('click', this.handleClickCapture, { - capture: true, - }); - } - - private handleClickCapture(event: Event): void | boolean { - if (this.disabled) { - event.preventDefault(); - event.stopImmediatePropagation(); - event.stopPropagation(); - - return false; - } - - if (this.shouldProxyClick()) { - return; - } - } - - private proxyFocus(): void { - this.focus(); - } - - private shouldProxyClick(): boolean { - let handled = false; - - if (this.anchorElement) { - // click HTML anchor element by proxy - this.anchorElement.click(); - handled = true; - // if the button type is `submit` or `reset` - } else if (this.type !== 'button') { - // create an HTML Button Element by proxy, click it, and remove it - const proxy = document.createElement('button'); - - proxy.type = this.type; - this.insertAdjacentElement('afterend', proxy); - proxy.click(); - proxy.remove(); - handled = true; - } - - return handled; - } - - public override renderAnchor(): TemplateResult { - return html` - ${this.buttonContent} - ${super.renderAnchor({ - id: 'button', - ariaHidden: true, - className: 'button anchor hidden', - })} - `; - } - - protected renderButton(): TemplateResult { - return html` - ${this.buttonContent} - `; - } - - protected override render(): TemplateResult { - return this.href && this.href.length > 0 - ? this.renderAnchor() - : this.renderButton(); - } - - protected handleKeydown(event: KeyboardEvent): void { - const { code } = event; - - switch (code) { - case 'Space': - event.preventDefault(); - - // allows button to activate when `Space` is pressed - if (typeof this.href === 'undefined') { - this.addEventListener('keyup', this.handleKeyup); - this.active = true; - } - - break; - default: - break; - } - } - - private handleKeypress(event: KeyboardEvent): void { - const { code } = event; - - switch (code) { - case 'Enter': - case 'NumpadEnter': - // allows button or link to be activated with `Enter` and `NumpadEnter` - this.click(); - break; - default: - break; - } - } - - protected handleKeyup(event: KeyboardEvent): void { - const { code } = event; - - switch (code) { - case 'Space': - this.removeEventListener('keyup', this.handleKeyup); - this.active = false; - this.click(); - break; - default: - break; - } - } - - private manageAnchor(): void { - // for a link - if (this.href && this.href.length > 0) { - // if the role is set to button - if ( - !this.hasAttribute('role') || - this.getAttribute('role') === 'button' - ) { - // change role to link - this.setAttribute('role', 'link'); - } - // else for a button - } else { - // if the role is set to link - if ( - !this.hasAttribute('role') || - this.getAttribute('role') === 'link' - ) { - // change role to button - this.setAttribute('role', 'button'); - } - } - } - - protected override firstUpdated(changed: PropertyValues): void { - super.firstUpdated(changed); - - if (!this.hasAttribute('tabindex')) { - this.setAttribute('tabindex', '0'); - } - - if (changed.has('label')) { - if (this.label) { - this.setAttribute('aria-label', this.label); - } else { - this.removeAttribute('aria-label'); - } - } - - this.manageAnchor(); - this.addEventListener('keydown', this.handleKeydown); - this.addEventListener('keypress', this.handleKeypress); - } - - protected override updated(changed: PropertyValues): void { - super.updated(changed); - - if (changed.has('href')) { - this.manageAnchor(); - } - - if (this.anchorElement) { - this.anchorElement.addEventListener('focus', this.proxyFocus); - this.anchorElement.tabIndex = -1; - } - } - protected override update(changes: PropertyValues): void { - super.update(changes); - - if (changes.has('label')) { - if (this.label) { - this.setAttribute('aria-label', this.label); - } else { - this.removeAttribute('aria-label'); - } - } - } + public static override get styles(): CSSResultArray { + return [buttonStyles]; + } + + // TODO we need to document this property for consumers, + // as it's not a 1:1 equivalent to active + @property({ type: Boolean, reflect: true }) + public active = false; + + /** + * The default behavior of the button. + * Possible values are: `button` (default), `submit`, and `reset`. + */ + @property({ type: String }) + public type: "button" | "submit" | "reset" = "button"; + + /** + * HTML anchor element that component clicks by proxy + */ + @query(".anchor") + private anchorElement!: HTMLAnchorElement; + + public override get focusElement(): HTMLElement { + return this; + } + + protected get hasLabel(): boolean { + return this.slotHasContent; + } + + protected get buttonContent(): TemplateResult[] { + const content = [ + html` `, + html` + + + + `, + ]; + + return content; + } + + constructor() { + super(); + this.proxyFocus = this.proxyFocus.bind(this); + + this.addEventListener("click", this.handleClickCapture, { + capture: true, + }); + } + + private handleClickCapture(event: Event): void | boolean { + if (this.disabled) { + event.preventDefault(); + event.stopImmediatePropagation(); + event.stopPropagation(); + + return false; + } + + if (this.shouldProxyClick()) { + return; + } + } + + private proxyFocus(): void { + this.focus(); + } + + private shouldProxyClick(): boolean { + let handled = false; + + if (this.anchorElement) { + // click HTML anchor element by proxy + this.anchorElement.click(); + handled = true; + // if the button type is `submit` or `reset` + } else if (this.type !== "button") { + // create an HTML Button Element by proxy, click it, and remove it + const proxy = document.createElement("button"); + + proxy.type = this.type; + this.insertAdjacentElement("afterend", proxy); + proxy.click(); + proxy.remove(); + handled = true; + } + + return handled; + } + + public override renderAnchor(): TemplateResult { + return html` + ${this.buttonContent} + ${super.renderAnchor({ + id: "button", + ariaHidden: true, + className: "button anchor hidden", + })} + `; + } + + protected renderButton(): TemplateResult { + return html` ${this.buttonContent} `; + } + + protected override render(): TemplateResult { + return this.href && this.href.length > 0 + ? this.renderAnchor() + : this.renderButton(); + } + + protected handleKeydown(event: KeyboardEvent): void { + const { code } = event; + + switch (code) { + case "Space": + event.preventDefault(); + + // allows button to activate when `Space` is pressed + if (typeof this.href === "undefined") { + this.addEventListener("keyup", this.handleKeyup); + this.active = true; + } + + break; + default: + break; + } + } + + private handleKeypress(event: KeyboardEvent): void { + const { code } = event; + + switch (code) { + case "Enter": + case "NumpadEnter": + // allows button or link to be activated with `Enter` and `NumpadEnter` + this.click(); + break; + default: + break; + } + } + + protected handleKeyup(event: KeyboardEvent): void { + const { code } = event; + + switch (code) { + case "Space": + this.removeEventListener("keyup", this.handleKeyup); + this.active = false; + this.click(); + break; + default: + break; + } + } + + private manageAnchor(): void { + // for a link + if (this.href && this.href.length > 0) { + // if the role is set to button + if ( + !this.hasAttribute("role") || + this.getAttribute("role") === "button" + ) { + // change role to link + this.setAttribute("role", "link"); + } + // else for a button + } else { + // if the role is set to link + if (!this.hasAttribute("role") || this.getAttribute("role") === "link") { + // change role to button + this.setAttribute("role", "button"); + } + } + } + + protected override firstUpdated(changed: PropertyValues): void { + super.firstUpdated(changed); + + if (!this.hasAttribute("tabindex")) { + this.setAttribute("tabindex", "0"); + } + + if (changed.has("label")) { + if (this.label) { + this.setAttribute("aria-label", this.label); + } else { + this.removeAttribute("aria-label"); + } + } + + this.manageAnchor(); + this.addEventListener("keydown", this.handleKeydown); + this.addEventListener("keypress", this.handleKeypress); + } + + protected override updated(changed: PropertyValues): void { + super.updated(changed); + + if (changed.has("href")) { + this.manageAnchor(); + } + + if (this.anchorElement) { + this.anchorElement.addEventListener("focus", this.proxyFocus); + this.anchorElement.tabIndex = -1; + } + } + protected override update(changes: PropertyValues): void { + super.update(changes); + + if (changes.has("label")) { + if (this.label) { + this.setAttribute("aria-label", this.label); + } else { + this.removeAttribute("aria-label"); + } + } + } } diff --git a/packages/button/src/button-overrides.css b/packages/button/src/button-overrides.css index d6ae5b239f..e406a8e92c 100644 --- a/packages/button/src/button-overrides.css +++ b/packages/button/src/button-overrides.css @@ -12,1117 +12,1091 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-button-animation-duration: var( - --system-button-animation-duration - ); - --spectrum-button-border-radius: var(--system-button-border-radius); - --spectrum-button-border-width: var(--system-button-border-width); - --spectrum-button-line-height: var(--system-button-line-height); - --spectrum-button-focus-ring-gap: var(--system-button-focus-ring-gap); - --spectrum-button-focus-ring-thickness: var( - --system-button-focus-ring-thickness - ); - --spectrum-button-focus-indicator-color: var( - --system-button-focus-indicator-color - ); - --spectrum-button-intended-icon-size: var( - --system-button-intended-icon-size - ); - --spectrum-button-background-color-default: var( - --system-button-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-border-color-hover - ); - --spectrum-button-border-color-down: var(--system-button-border-color-down); - --spectrum-button-border-color-focus: var( - --system-button-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-content-color-disabled - ); + --spectrum-button-animation-duration: var(--system-button-animation-duration); + --spectrum-button-border-radius: var(--system-button-border-radius); + --spectrum-button-border-width: var(--system-button-border-width); + --spectrum-button-line-height: var(--system-button-line-height); + --spectrum-button-focus-ring-gap: var(--system-button-focus-ring-gap); + --spectrum-button-focus-ring-thickness: var( + --system-button-focus-ring-thickness + ); + --spectrum-button-focus-indicator-color: var( + --system-button-focus-indicator-color + ); + --spectrum-button-intended-icon-size: var(--system-button-intended-icon-size); + --spectrum-button-background-color-default: var( + --system-button-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-border-color-default + ); + --spectrum-button-border-color-hover: var(--system-button-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-border-color-focus); + --spectrum-button-content-color-default: var( + --system-button-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-content-color-hover + ); + --spectrum-button-content-color-down: var(--system-button-content-color-down); + --spectrum-button-content-color-focus: var( + --system-button-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-content-color-disabled + ); } -:host([variant='accent']) { - --spectrum-button-background-color-default: var( - --system-button-accent-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-accent-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-accent-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-accent-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-accent-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-accent-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-accent-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-accent-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-accent-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-accent-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-accent-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-accent-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-accent-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-accent-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-accent-content-color-disabled - ); +:host([variant="accent"]) { + --spectrum-button-background-color-default: var( + --system-button-accent-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-accent-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-accent-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-accent-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-accent-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-accent-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-accent-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-accent-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-accent-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-accent-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-accent-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-accent-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-accent-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-accent-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-accent-content-color-disabled + ); } -:host([variant='accent'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-accent-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-accent-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-accent-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-accent-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-accent-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-accent-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-accent-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-accent-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-accent-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-accent-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-accent-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-accent-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-accent-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-accent-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-accent-outline-content-color-disabled - ); +:host([variant="accent"][treatment="outline"]) { + --spectrum-button-background-color-default: var( + --system-button-accent-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-accent-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-accent-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-accent-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-accent-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-accent-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-accent-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-accent-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-accent-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-accent-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-accent-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-accent-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-accent-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-accent-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-accent-outline-content-color-disabled + ); } -:host([variant='negative']) { - --spectrum-button-background-color-default: var( - --system-button-negative-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-negative-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-negative-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-negative-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-negative-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-negative-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-negative-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-negative-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-negative-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-negative-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-negative-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-negative-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-negative-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-negative-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-negative-content-color-disabled - ); +:host([variant="negative"]) { + --spectrum-button-background-color-default: var( + --system-button-negative-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-negative-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-negative-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-negative-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-negative-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-negative-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-negative-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-negative-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-negative-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-negative-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-negative-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-negative-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-negative-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-negative-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-negative-content-color-disabled + ); } -:host([variant='negative'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-negative-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-negative-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-negative-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-negative-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-negative-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-negative-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-negative-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-negative-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-negative-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-negative-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-negative-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-negative-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-negative-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-negative-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-negative-outline-content-color-disabled - ); +:host([variant="negative"][treatment="outline"]) { + --spectrum-button-background-color-default: var( + --system-button-negative-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-negative-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-negative-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-negative-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-negative-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-negative-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-negative-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-negative-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-negative-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-negative-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-negative-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-negative-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-negative-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-negative-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-negative-outline-content-color-disabled + ); } -:host([variant='primary']) { - --spectrum-button-background-color-default: var( - --system-button-primary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-primary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-primary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-primary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-primary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-primary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-primary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-primary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-primary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-primary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-primary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-primary-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-primary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-primary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-primary-content-color-disabled - ); +:host([variant="primary"]) { + --spectrum-button-background-color-default: var( + --system-button-primary-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-primary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-primary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-primary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-primary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-primary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-primary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-primary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-primary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-primary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-primary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-primary-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-primary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-primary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-primary-content-color-disabled + ); } -:host([variant='primary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-primary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-primary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-primary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-primary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-primary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-primary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-primary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-primary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-primary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-primary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-primary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-primary-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-primary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-primary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-primary-outline-content-color-disabled - ); +:host([variant="primary"][treatment="outline"]) { + --spectrum-button-background-color-default: var( + --system-button-primary-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-primary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-primary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-primary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-primary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-primary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-primary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-primary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-primary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-primary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-primary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-primary-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-primary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-primary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-primary-outline-content-color-disabled + ); } -:host([variant='secondary']) { - --spectrum-button-background-color-default: var( - --system-button-secondary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-secondary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-secondary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-secondary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-secondary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-secondary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-secondary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-secondary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-secondary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-secondary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-secondary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-secondary-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-secondary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-secondary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-secondary-content-color-disabled - ); +:host([variant="secondary"]) { + --spectrum-button-background-color-default: var( + --system-button-secondary-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-secondary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-secondary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-secondary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-secondary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-secondary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-secondary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-secondary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-secondary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-secondary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-secondary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-secondary-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-secondary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-secondary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-secondary-content-color-disabled + ); } -:host([variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-secondary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-secondary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-secondary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-secondary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-secondary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-secondary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-secondary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-secondary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-secondary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-secondary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-secondary-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-secondary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-secondary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-secondary-outline-content-color-disabled - ); +:host([variant="secondary"][treatment="outline"]) { + --spectrum-button-background-color-default: var( + --system-button-secondary-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-secondary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-secondary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-secondary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-secondary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-secondary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-secondary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-secondary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-secondary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-secondary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-secondary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-secondary-outline-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-secondary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-secondary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-secondary-outline-content-color-disabled + ); } :host([quiet]) { - --spectrum-button-background-color-default: var( - --system-button-quiet-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-quiet-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-quiet-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-quiet-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-quiet-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-quiet-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-quiet-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-quiet-border-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-quiet-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-quiet-border-color-disabled - ); + --spectrum-button-background-color-default: var( + --system-button-quiet-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-quiet-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-quiet-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-quiet-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-quiet-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-quiet-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-quiet-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-quiet-border-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-quiet-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-quiet-border-color-disabled + ); } :host([selected]) { - --spectrum-button-background-color-default: var( - --system-button-selected-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-selected-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-selected-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-selected-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-selected-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-selected-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-selected-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-selected-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-selected-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-selected-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-selected-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-selected-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-selected-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-selected-border-color-disabled - ); + --spectrum-button-background-color-default: var( + --system-button-selected-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-selected-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-selected-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-selected-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-selected-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-selected-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-selected-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-selected-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-selected-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-selected-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-selected-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-selected-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-selected-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-selected-border-color-disabled + ); } :host([selected][emphasized]) { - --spectrum-button-background-color-default: var( - --system-button-selected-emphasized-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-selected-emphasized-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-selected-emphasized-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-selected-emphasized-background-color-focus - ); + --spectrum-button-background-color-default: var( + --system-button-selected-emphasized-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-selected-emphasized-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-selected-emphasized-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-selected-emphasized-background-color-focus + ); } -:host([static-color='black'][quiet]) { - --spectrum-button-border-color-default: var( - --system-button-static-black-quiet-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-quiet-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-quiet-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-quiet-border-color-focus - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-quiet-border-color-disabled - ); +:host([static-color="black"][quiet]) { + --spectrum-button-border-color-default: var( + --system-button-static-black-quiet-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-quiet-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-quiet-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-quiet-border-color-focus + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-quiet-border-color-disabled + ); } -:host([static-color='white'][quiet]) { - --spectrum-button-border-color-default: var( - --system-button-static-white-quiet-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-quiet-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-quiet-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-quiet-border-color-focus - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-quiet-border-color-disabled - ); +:host([static-color="white"][quiet]) { + --spectrum-button-border-color-default: var( + --system-button-static-white-quiet-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-quiet-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-quiet-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-quiet-border-color-focus + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-quiet-border-color-disabled + ); } -:host([static-color='white']) { - --spectrum-button-background-color-default: var( - --system-button-static-white-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-white-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-white-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-white-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-white-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-white-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-white-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-content-color-disabled - ); +:host([static-color="white"]) { + --spectrum-button-background-color-default: var( + --system-button-static-white-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-white-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-white-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-white-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-white-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-white-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-white-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-white-content-color-disabled + ); } -:host([static-color='white'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-static-white-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-white-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-white-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-white-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-white-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-white-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-white-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-outline-content-color-disabled - ); +:host([static-color="white"][treatment="outline"]) { + --spectrum-button-background-color-default: var( + --system-button-static-white-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-white-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-white-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-white-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-white-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-white-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-white-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-white-outline-content-color-disabled + ); } -:host([static-color='white'][selected]) { - --spectrum-button-background-color-default: var( - --system-button-static-white-selected-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-selected-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-selected-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-selected-background-color-focus - ); - --spectrum-button-static-white-content-color-default: var( - --system-button-static-white-selected-static-white-content-color-default - ); - --spectrum-button-static-white-content-color-hover: var( - --system-button-static-white-selected-static-white-content-color-hover - ); - --spectrum-button-static-white-content-color-down: var( - --system-button-static-white-selected-static-white-content-color-down - ); - --spectrum-button-static-white-content-color-focus: var( - --system-button-static-white-selected-static-white-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-selected-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-selected-border-color-disabled - ); +:host([static-color="white"][selected]) { + --spectrum-button-background-color-default: var( + --system-button-static-white-selected-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-selected-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-selected-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-selected-background-color-focus + ); + --spectrum-button-static-white-content-color-default: var( + --system-button-static-white-selected-static-white-content-color-default + ); + --spectrum-button-static-white-content-color-hover: var( + --system-button-static-white-selected-static-white-content-color-hover + ); + --spectrum-button-static-white-content-color-down: var( + --system-button-static-white-selected-static-white-content-color-down + ); + --spectrum-button-static-white-content-color-focus: var( + --system-button-static-white-selected-static-white-content-color-focus + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-selected-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-selected-border-color-disabled + ); } -:host([static-color='white'][variant='secondary']) { - --spectrum-button-background-color-default: var( - --system-button-static-white-secondary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-secondary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-secondary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-secondary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-white-secondary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-secondary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-secondary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-secondary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-white-secondary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-white-secondary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-white-secondary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-white-secondary-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-white-secondary-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-secondary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-secondary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-secondary-content-color-disabled - ); +:host([static-color="white"][variant="secondary"]) { + --spectrum-button-background-color-default: var( + --system-button-static-white-secondary-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-secondary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-secondary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-secondary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-white-secondary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-secondary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-secondary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-secondary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-white-secondary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-white-secondary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-white-secondary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-white-secondary-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-white-secondary-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-secondary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-secondary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-white-secondary-content-color-disabled + ); } -:host([static-color='white'][variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-static-white-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-secondary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-secondary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-secondary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-white-secondary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-secondary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-secondary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-secondary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-white-secondary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-white-secondary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-white-secondary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-white-secondary-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-white-secondary-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-secondary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-secondary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-secondary-outline-content-color-disabled - ); +:host([static-color="white"][variant="secondary"][treatment="outline"]) { + --spectrum-button-background-color-default: var( + --system-button-static-white-secondary-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-white-secondary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-white-secondary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-white-secondary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-white-secondary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-white-secondary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-white-secondary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-white-secondary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-white-secondary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-white-secondary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-white-secondary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-white-secondary-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-white-secondary-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-white-secondary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-white-secondary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-white-secondary-outline-content-color-disabled + ); } -:host([static-color='black']) { - --spectrum-button-background-color-default: var( - --system-button-static-black-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-black-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-black-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-black-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-black-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-black-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-black-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-black-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-black-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-black-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-black-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-black-content-color-disabled - ); +:host([static-color="black"]) { + --spectrum-button-background-color-default: var( + --system-button-static-black-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-black-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-black-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-black-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-black-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-black-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-black-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-black-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-black-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-black-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-black-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-black-content-color-disabled + ); } -:host([static-color='black'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-static-black-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-black-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-black-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-black-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-black-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-black-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-black-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-black-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-black-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-black-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-black-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-black-outline-content-color-disabled - ); +:host([static-color="black"][treatment="outline"]) { + --spectrum-button-background-color-default: var( + --system-button-static-black-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-black-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-black-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-black-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-black-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-black-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-black-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-black-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-black-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-black-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-black-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-black-outline-content-color-disabled + ); } -:host([static-color='black'][variant='secondary']) { - --spectrum-button-background-color-default: var( - --system-button-static-black-secondary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-black-secondary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-black-secondary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-black-secondary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-black-secondary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-secondary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-secondary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-secondary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-black-secondary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-black-secondary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-black-secondary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-black-secondary-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-black-secondary-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-black-secondary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-secondary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-black-secondary-content-color-disabled - ); +:host([static-color="black"][variant="secondary"]) { + --spectrum-button-background-color-default: var( + --system-button-static-black-secondary-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-black-secondary-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-black-secondary-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-black-secondary-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-black-secondary-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-secondary-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-secondary-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-secondary-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-black-secondary-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-black-secondary-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-black-secondary-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-black-secondary-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-black-secondary-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-black-secondary-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-secondary-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-black-secondary-content-color-disabled + ); } -:host([static-color='black'][variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-static-black-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-black-secondary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-black-secondary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-black-secondary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-black-secondary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-secondary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-secondary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-secondary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-black-secondary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-black-secondary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-black-secondary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-black-secondary-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-black-secondary-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-black-secondary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-secondary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-black-secondary-outline-content-color-disabled - ); +:host([static-color="black"][variant="secondary"][treatment="outline"]) { + --spectrum-button-background-color-default: var( + --system-button-static-black-secondary-outline-background-color-default + ); + --spectrum-button-background-color-hover: var( + --system-button-static-black-secondary-outline-background-color-hover + ); + --spectrum-button-background-color-down: var( + --system-button-static-black-secondary-outline-background-color-down + ); + --spectrum-button-background-color-focus: var( + --system-button-static-black-secondary-outline-background-color-focus + ); + --spectrum-button-border-color-default: var( + --system-button-static-black-secondary-outline-border-color-default + ); + --spectrum-button-border-color-hover: var( + --system-button-static-black-secondary-outline-border-color-hover + ); + --spectrum-button-border-color-down: var( + --system-button-static-black-secondary-outline-border-color-down + ); + --spectrum-button-border-color-focus: var( + --system-button-static-black-secondary-outline-border-color-focus + ); + --spectrum-button-content-color-default: var( + --system-button-static-black-secondary-outline-content-color-default + ); + --spectrum-button-content-color-hover: var( + --system-button-static-black-secondary-outline-content-color-hover + ); + --spectrum-button-content-color-down: var( + --system-button-static-black-secondary-outline-content-color-down + ); + --spectrum-button-content-color-focus: var( + --system-button-static-black-secondary-outline-content-color-focus + ); + --spectrum-button-focus-indicator-color: var( + --system-button-static-black-secondary-outline-focus-indicator-color + ); + --spectrum-button-background-color-disabled: var( + --system-button-static-black-secondary-outline-background-color-disabled + ); + --spectrum-button-border-color-disabled: var( + --system-button-static-black-secondary-outline-border-color-disabled + ); + --spectrum-button-content-color-disabled: var( + --system-button-static-black-secondary-outline-content-color-disabled + ); } -:host([size='s']) { - --spectrum-button-min-width: var(--system-button-size-s-min-width); - --spectrum-button-border-radius: var(--system-button-size-s-border-radius); - --spectrum-button-height: var(--system-button-size-s-height); - --spectrum-button-font-size: var(--system-button-size-s-font-size); - --spectrum-button-edge-to-visual: var( - --system-button-size-s-edge-to-visual - ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-s-edge-to-visual-only - ); - --spectrum-button-edge-to-text: var(--system-button-size-s-edge-to-text); - --spectrum-button-padding-label-to-icon: var( - --system-button-size-s-padding-label-to-icon - ); - --spectrum-button-top-to-text: var(--system-button-size-s-top-to-text); - --spectrum-button-bottom-to-text: var( - --system-button-size-s-bottom-to-text - ); - --spectrum-button-top-to-icon: var(--system-button-size-s-top-to-icon); - --spectrum-button-intended-icon-size: var( - --system-button-size-s-intended-icon-size - ); +:host([size="s"]) { + --spectrum-button-min-width: var(--system-button-size-s-min-width); + --spectrum-button-border-radius: var(--system-button-size-s-border-radius); + --spectrum-button-height: var(--system-button-size-s-height); + --spectrum-button-font-size: var(--system-button-size-s-font-size); + --spectrum-button-edge-to-visual: var(--system-button-size-s-edge-to-visual); + --spectrum-button-edge-to-visual-only: var( + --system-button-size-s-edge-to-visual-only + ); + --spectrum-button-edge-to-text: var(--system-button-size-s-edge-to-text); + --spectrum-button-padding-label-to-icon: var( + --system-button-size-s-padding-label-to-icon + ); + --spectrum-button-top-to-text: var(--system-button-size-s-top-to-text); + --spectrum-button-bottom-to-text: var(--system-button-size-s-bottom-to-text); + --spectrum-button-top-to-icon: var(--system-button-size-s-top-to-icon); + --spectrum-button-intended-icon-size: var( + --system-button-size-s-intended-icon-size + ); } :host { - --spectrum-button-min-width: var(--system-button-size-m-min-width); - --spectrum-button-border-radius: var(--system-button-size-m-border-radius); - --spectrum-button-height: var(--system-button-size-m-height); - --spectrum-button-font-size: var(--system-button-size-m-font-size); - --spectrum-button-edge-to-visual: var( - --system-button-size-m-edge-to-visual - ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-m-edge-to-visual-only - ); - --spectrum-button-edge-to-text: var(--system-button-size-m-edge-to-text); - --spectrum-button-padding-label-to-icon: var( - --system-button-size-m-padding-label-to-icon - ); - --spectrum-button-top-to-text: var(--system-button-size-m-top-to-text); - --spectrum-button-bottom-to-text: var( - --system-button-size-m-bottom-to-text - ); - --spectrum-button-top-to-icon: var(--system-button-size-m-top-to-icon); - --spectrum-button-intended-icon-size: var( - --system-button-size-m-intended-icon-size - ); + --spectrum-button-min-width: var(--system-button-size-m-min-width); + --spectrum-button-border-radius: var(--system-button-size-m-border-radius); + --spectrum-button-height: var(--system-button-size-m-height); + --spectrum-button-font-size: var(--system-button-size-m-font-size); + --spectrum-button-edge-to-visual: var(--system-button-size-m-edge-to-visual); + --spectrum-button-edge-to-visual-only: var( + --system-button-size-m-edge-to-visual-only + ); + --spectrum-button-edge-to-text: var(--system-button-size-m-edge-to-text); + --spectrum-button-padding-label-to-icon: var( + --system-button-size-m-padding-label-to-icon + ); + --spectrum-button-top-to-text: var(--system-button-size-m-top-to-text); + --spectrum-button-bottom-to-text: var(--system-button-size-m-bottom-to-text); + --spectrum-button-top-to-icon: var(--system-button-size-m-top-to-icon); + --spectrum-button-intended-icon-size: var( + --system-button-size-m-intended-icon-size + ); } -:host([size='l']) { - --spectrum-button-min-width: var(--system-button-size-l-min-width); - --spectrum-button-border-radius: var(--system-button-size-l-border-radius); - --spectrum-button-height: var(--system-button-size-l-height); - --spectrum-button-font-size: var(--system-button-size-l-font-size); - --spectrum-button-edge-to-visual: var( - --system-button-size-l-edge-to-visual - ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-l-edge-to-visual-only - ); - --spectrum-button-edge-to-text: var(--system-button-size-l-edge-to-text); - --spectrum-button-padding-label-to-icon: var( - --system-button-size-l-padding-label-to-icon - ); - --spectrum-button-top-to-text: var(--system-button-size-l-top-to-text); - --spectrum-button-bottom-to-text: var( - --system-button-size-l-bottom-to-text - ); - --spectrum-button-top-to-icon: var(--system-button-size-l-top-to-icon); - --spectrum-button-intended-icon-size: var( - --system-button-size-l-intended-icon-size - ); +:host([size="l"]) { + --spectrum-button-min-width: var(--system-button-size-l-min-width); + --spectrum-button-border-radius: var(--system-button-size-l-border-radius); + --spectrum-button-height: var(--system-button-size-l-height); + --spectrum-button-font-size: var(--system-button-size-l-font-size); + --spectrum-button-edge-to-visual: var(--system-button-size-l-edge-to-visual); + --spectrum-button-edge-to-visual-only: var( + --system-button-size-l-edge-to-visual-only + ); + --spectrum-button-edge-to-text: var(--system-button-size-l-edge-to-text); + --spectrum-button-padding-label-to-icon: var( + --system-button-size-l-padding-label-to-icon + ); + --spectrum-button-top-to-text: var(--system-button-size-l-top-to-text); + --spectrum-button-bottom-to-text: var(--system-button-size-l-bottom-to-text); + --spectrum-button-top-to-icon: var(--system-button-size-l-top-to-icon); + --spectrum-button-intended-icon-size: var( + --system-button-size-l-intended-icon-size + ); } -:host([size='xl']) { - --spectrum-button-min-width: var(--system-button-size-xl-min-width); - --spectrum-button-border-radius: var(--system-button-size-xl-border-radius); - --spectrum-button-height: var(--system-button-size-xl-height); - --spectrum-button-font-size: var(--system-button-size-xl-font-size); - --spectrum-button-edge-to-visual: var( - --system-button-size-xl-edge-to-visual - ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-xl-edge-to-visual-only - ); - --spectrum-button-edge-to-text: var(--system-button-size-xl-edge-to-text); - --spectrum-button-padding-label-to-icon: var( - --system-button-size-xl-padding-label-to-icon - ); - --spectrum-button-top-to-text: var(--system-button-size-xl-top-to-text); - --spectrum-button-bottom-to-text: var( - --system-button-size-xl-bottom-to-text - ); - --spectrum-button-top-to-icon: var(--system-button-size-xl-top-to-icon); - --spectrum-button-intended-icon-size: var( - --system-button-size-xl-intended-icon-size - ); +:host([size="xl"]) { + --spectrum-button-min-width: var(--system-button-size-xl-min-width); + --spectrum-button-border-radius: var(--system-button-size-xl-border-radius); + --spectrum-button-height: var(--system-button-size-xl-height); + --spectrum-button-font-size: var(--system-button-size-xl-font-size); + --spectrum-button-edge-to-visual: var(--system-button-size-xl-edge-to-visual); + --spectrum-button-edge-to-visual-only: var( + --system-button-size-xl-edge-to-visual-only + ); + --spectrum-button-edge-to-text: var(--system-button-size-xl-edge-to-text); + --spectrum-button-padding-label-to-icon: var( + --system-button-size-xl-padding-label-to-icon + ); + --spectrum-button-top-to-text: var(--system-button-size-xl-top-to-text); + --spectrum-button-bottom-to-text: var(--system-button-size-xl-bottom-to-text); + --spectrum-button-top-to-icon: var(--system-button-size-xl-top-to-icon); + --spectrum-button-intended-icon-size: var( + --system-button-size-xl-intended-icon-size + ); } diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 0fcd8d9ebf..f4fd8bf6c6 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -12,615 +12,606 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - cursor: pointer; - -webkit-user-select: none; - user-select: none; - box-sizing: border-box; - font-family: var( - --mod-button-font-family, - var( - --mod-sans-font-family-stack, - var(--spectrum-sans-font-family-stack) - ) - ); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - line-height: var( - --mod-button-line-height, - var(--mod-line-height-100, var(--spectrum-line-height-100)) - ); - text-transform: none; - vertical-align: top; - -webkit-appearance: button; - transition: - background - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - border-color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - box-shadow - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out; - justify-content: center; - align-items: center; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - overflow: visible; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + box-sizing: border-box; + font-family: var( + --mod-button-font-family, + var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)) + ); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: var( + --mod-button-line-height, + var(--mod-line-height-100, var(--spectrum-line-height-100)) + ); + text-transform: none; + vertical-align: top; + -webkit-appearance: button; + transition: + background + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + border-color + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + color + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + box-shadow + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out; + justify-content: center; + align-items: center; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + overflow: visible; } :host(:focus) { - outline: none; + outline: none; } :host .is-disabled, :host([disabled]) { - cursor: default; + cursor: default; } :host:after { - margin: calc( - -1 * var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) - ); - transition: - opacity - var( - --mod-button-animation-duration, - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ) - ease-out, - margin - var( - --mod-button-animation-duration, - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ) - ease-out; - display: block; - inset-block: 0; - inset-inline: 0; + margin: calc( + -1 * + var( + --mod-button-focus-indicator-gap, + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) + ) + ); + transition: + opacity + var( + --mod-button-animation-duration, + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ) + ease-out, + margin + var( + --mod-button-animation-duration, + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ) + ease-out; + display: block; + inset-block: 0; + inset-inline: 0; } :host(:focus-visible):after { - margin: calc( - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2 - ); + margin: calc( + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2 + ); } #label { - place-self: center; + place-self: center; } #label[hidden] { - display: none; + display: none; } :host { - --mod-progress-circle-position: absolute; - border-radius: var( - --mod-button-border-radius, - var(--spectrum-button-border-radius) - ); - border-width: var( - --mod-button-border-width, - var(--spectrum-button-border-width) - ); - font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); - font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); - gap: var( - --mod-button-padding-label-to-icon, - var(--spectrum-button-padding-label-to-icon) - ); - max-inline-size: none; - max-inline-size: var(--mod-button-max-inline-size, none); - min-inline-size: var( - --mod-button-min-width, - var(--spectrum-button-min-width) - ); - min-block-size: var(--mod-button-height, var(--spectrum-button-height)); - padding-block: 0; - padding-inline: var( - --mod-button-edge-to-text, - var(--spectrum-button-edge-to-text) - ); - color: inherit; - margin-block: 0; - margin-block: var(--mod-button-margin-block, 0); - border-style: solid; - margin-inline-start: var(--mod-button-margin-left, 0); - margin-inline-end: var(--mod-button-margin-right, 0); - position: relative; + --mod-progress-circle-position: absolute; + border-radius: var( + --mod-button-border-radius, + var(--spectrum-button-border-radius) + ); + border-width: var( + --mod-button-border-width, + var(--spectrum-button-border-width) + ); + font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); + font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); + gap: var( + --mod-button-padding-label-to-icon, + var(--spectrum-button-padding-label-to-icon) + ); + max-inline-size: none; + max-inline-size: var(--mod-button-max-inline-size, none); + min-inline-size: var( + --mod-button-min-width, + var(--spectrum-button-min-width) + ); + min-block-size: var(--mod-button-height, var(--spectrum-button-height)); + padding-block: 0; + padding-inline: var( + --mod-button-edge-to-text, + var(--spectrum-button-edge-to-text) + ); + color: inherit; + margin-block: 0; + margin-block: var(--mod-button-margin-block, 0); + border-style: solid; + margin-inline-start: var(--mod-button-margin-left, 0); + margin-inline-end: var(--mod-button-margin-right, 0); + position: relative; } :host(:is(:active, [active])) { - box-shadow: none; -} - -::slotted([slot='icon']) { - --_icon-size-difference: max( - 0px, - var(--spectrum-button-intended-icon-size) - - var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size)) - ); - color: inherit; - flex-shrink: 0; - align-self: flex-start; - margin-block-start: var( - --mod-button-icon-margin-block-start, - max( - 0px, - var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - - var( - --mod-button-border-width, - var(--spectrum-button-border-width) - ) + (var(--_icon-size-difference, 0px) / 2) - ) - ); - margin-inline-start: calc( - var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)) - ); + box-shadow: none; +} + +::slotted([slot="icon"]) { + --_icon-size-difference: max( + 0px, + var(--spectrum-button-intended-icon-size) - + var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size)) + ); + color: inherit; + flex-shrink: 0; + align-self: flex-start; + margin-block-start: var( + --mod-button-icon-margin-block-start, + max( + 0px, + var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - + var(--mod-button-border-width, var(--spectrum-button-border-width)) + + (var(--_icon-size-difference, 0px) / 2) + ) + ); + margin-inline-start: calc( + var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - + var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)) + ); } :host([icon-only]) { - min-inline-size: unset; - padding: calc( - var( - --mod-button-edge-to-visual-only, - var(--spectrum-button-edge-to-visual-only) - ) - - var(--mod-button-border-width, var(--spectrum-button-border-width)) - ); - border-radius: 50%; + min-inline-size: unset; + padding: calc( + var( + --mod-button-edge-to-visual-only, + var(--spectrum-button-edge-to-visual-only) + ) - + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ); + border-radius: 50%; } -:host([icon-only]) ::slotted([slot='icon']) { - align-self: center; - margin-block-start: 0; - margin-inline-start: 0; +:host([icon-only]) ::slotted([slot="icon"]) { + align-self: center; + margin-block-start: 0; + margin-inline-start: 0; } :host([icon-only]):after { - border-radius: 50%; + border-radius: 50%; } #label { - line-height: var( - --mod-button-line-height, - var(--spectrum-button-line-height) - ); - text-align: center; - text-align: var(--mod-button-text-align, center); - align-self: start; - padding-block-start: calc( - var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - - var(--mod-button-border-width, var(--spectrum-button-border-width)) - ); - padding-block-end: calc( - var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - - var(--mod-button-border-width, var(--spectrum-button-border-width)) - ); -} - -[name='icon'] + #label { - text-align: start; - text-align: var(--mod-button-text-align-with-icon, start); + line-height: var( + --mod-button-line-height, + var(--spectrum-button-line-height) + ); + text-align: center; + text-align: var(--mod-button-text-align, center); + align-self: start; + padding-block-start: calc( + var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ); + padding-block-end: calc( + var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ); +} + +[name="icon"] + #label { + text-align: start; + text-align: var(--mod-button-text-align-with-icon, start); } :host([focused]):after, :host(:focus-visible):after { - box-shadow: 0 0 0 - var( - --mod-button-focus-ring-thickness, - var(--spectrum-button-focus-ring-thickness) - ) - var( - --mod-button-focus-ring-color, - var(--spectrum-button-focus-indicator-color) - ); + box-shadow: 0 0 0 + var( + --mod-button-focus-ring-thickness, + var(--spectrum-button-focus-ring-thickness) + ) + var( + --mod-button-focus-ring-color, + var(--spectrum-button-focus-indicator-color) + ); } :host { - transition: border-color - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration) - ) - ease-in-out; + transition: border-color + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration) + ) + ease-in-out; } :host:after { - margin: calc( - ( - var( - --mod-button-focus-ring-gap, - var(--spectrum-button-focus-ring-gap) - ) + - var( - --mod-button-border-width, - var(--spectrum-button-border-width) - ) - ) * -1 - ); - border-radius: var( - --mod-button-focus-ring-border-radius, - calc( - var( - --mod-button-border-radius, - var(--spectrum-button-border-radius) - ) + - var( - --mod-focus-indicator-gap, - var(--spectrum-focus-indicator-gap) - ) - ) - ); - transition: box-shadow - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration) - ) - ease-in-out; - pointer-events: none; - content: ''; - position: absolute; - inset: 0; + margin: calc( + ( + var( + --mod-button-focus-ring-gap, + var(--spectrum-button-focus-ring-gap) + ) + + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ) * + -1 + ); + border-radius: var( + --mod-button-focus-ring-border-radius, + calc( + var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) + ) + ); + transition: box-shadow + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration) + ) + ease-in-out; + pointer-events: none; + content: ""; + position: absolute; + inset: 0; } :host(:focus-visible) { - box-shadow: none; - outline: none; + box-shadow: none; + outline: none; } :host(:focus-visible):after { - box-shadow: 0 0 0 - var( - --mod-button-focus-ring-thickness, - var(--spectrum-button-focus-ring-thickness) - ) - var( - --highcontrast-button-focus-ring-color, - var( - --mod-button-focus-ring-color, - var( - --mod-button-focus-ring-color, - var(--spectrum-button-focus-indicator-color) - ) - ) - ); + box-shadow: 0 0 0 + var( + --mod-button-focus-ring-thickness, + var(--spectrum-button-focus-ring-thickness) + ) + var( + --highcontrast-button-focus-ring-color, + var( + --mod-button-focus-ring-color, + var( + --mod-button-focus-ring-color, + var(--spectrum-button-focus-indicator-color) + ) + ) + ); } :host { - background-color: var( - --highcontrast-button-background-color-default, - var( - --mod-button-background-color-default, - var(--spectrum-button-background-color-default) - ) - ); - border-color: var( - --highcontrast-button-border-color-default, - var( - --mod-button-border-color-default, - var(--spectrum-button-border-color-default) - ) - ); - color: var( - --highcontrast-button-content-color-default, - var( - --mod-button-content-color-default, - var(--spectrum-button-content-color-default) - ) - ); - transition: - border 0.13s linear, - color 0.13s linear, - background-color 0.13s linear; - transition: - border - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - linear, - color - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - linear, - background-color - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - linear; + background-color: var( + --highcontrast-button-background-color-default, + var( + --mod-button-background-color-default, + var(--spectrum-button-background-color-default) + ) + ); + border-color: var( + --highcontrast-button-border-color-default, + var( + --mod-button-border-color-default, + var(--spectrum-button-border-color-default) + ) + ); + color: var( + --highcontrast-button-content-color-default, + var( + --mod-button-content-color-default, + var(--spectrum-button-content-color-default) + ) + ); + transition: + border 0.13s linear, + color 0.13s linear, + background-color 0.13s linear; + transition: + border + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration, 0.13s) + ) + linear, + color + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration, 0.13s) + ) + linear, + background-color + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration, 0.13s) + ) + linear; } @media (hover: hover) { - :host(:hover) { - box-shadow: none; - background-color: var( - --highcontrast-button-background-color-hover, - var( - --mod-button-background-color-hover, - var(--spectrum-button-background-color-hover) - ) - ); - border-color: var( - --highcontrast-button-border-color-hover, - var( - --mod-button-border-color-hover, - var(--spectrum-button-border-color-hover) - ) - ); - color: var( - --highcontrast-button-content-color-hover, - var( - --mod-button-content-color-hover, - var(--spectrum-button-content-color-hover) - ) - ); - } + :host(:hover) { + box-shadow: none; + background-color: var( + --highcontrast-button-background-color-hover, + var( + --mod-button-background-color-hover, + var(--spectrum-button-background-color-hover) + ) + ); + border-color: var( + --highcontrast-button-border-color-hover, + var( + --mod-button-border-color-hover, + var(--spectrum-button-border-color-hover) + ) + ); + color: var( + --highcontrast-button-content-color-hover, + var( + --mod-button-content-color-hover, + var(--spectrum-button-content-color-hover) + ) + ); + } } :host(:focus-visible) { - background-color: var( - --highcontrast-button-background-color-focus, - var( - --mod-button-background-color-focus, - var(--spectrum-button-background-color-focus) - ) - ); - border-color: var( - --highcontrast-button-border-color-focus, - var( - --mod-button-border-color-focus, - var(--spectrum-button-border-color-focus) - ) - ); - color: var( - --highcontrast-button-content-color-focus, - var( - --mod-button-content-color-focus, - var(--spectrum-button-content-color-focus) - ) - ); + background-color: var( + --highcontrast-button-background-color-focus, + var( + --mod-button-background-color-focus, + var(--spectrum-button-background-color-focus) + ) + ); + border-color: var( + --highcontrast-button-border-color-focus, + var( + --mod-button-border-color-focus, + var(--spectrum-button-border-color-focus) + ) + ); + color: var( + --highcontrast-button-content-color-focus, + var( + --mod-button-content-color-focus, + var(--spectrum-button-content-color-focus) + ) + ); } :host(:is(:active, [active])) { - background-color: var( - --highcontrast-button-background-color-down, - var( - --mod-button-background-color-down, - var(--spectrum-button-background-color-down) - ) - ); - border-color: var( - --highcontrast-button-border-color-down, - var( - --mod-button-border-color-down, - var(--spectrum-button-border-color-down) - ) - ); - color: var( - --highcontrast-button-content-color-down, - var( - --mod-button-content-color-down, - var(--spectrum-button-content-color-down) - ) - ); + background-color: var( + --highcontrast-button-background-color-down, + var( + --mod-button-background-color-down, + var(--spectrum-button-background-color-down) + ) + ); + border-color: var( + --highcontrast-button-border-color-down, + var( + --mod-button-border-color-down, + var(--spectrum-button-border-color-down) + ) + ); + color: var( + --highcontrast-button-content-color-down, + var( + --mod-button-content-color-down, + var(--spectrum-button-content-color-down) + ) + ); } :host .is-disabled, :host([pending]), :host([disabled]), :host([pending]) { - background-color: var( - --highcontrast-button-background-color-disabled, - var( - --mod-button-background-color-disabled, - var(--spectrum-button-background-color-disabled) - ) - ); - border-color: var( - --highcontrast-button-border-color-disabled, - var( - --mod-button-border-color-disabled, - var(--spectrum-button-border-color-disabled) - ) - ); - color: var( - --highcontrast-button-content-color-disabled, - var( - --mod-button-content-color-disabled, - var(--spectrum-button-content-color-disabled) - ) - ); + background-color: var( + --highcontrast-button-background-color-disabled, + var( + --mod-button-background-color-disabled, + var(--spectrum-button-background-color-disabled) + ) + ); + border-color: var( + --highcontrast-button-border-color-disabled, + var( + --mod-button-border-color-disabled, + var(--spectrum-button-border-color-disabled) + ) + ); + color: var( + --highcontrast-button-content-color-disabled, + var( + --mod-button-content-color-disabled, + var(--spectrum-button-content-color-disabled) + ) + ); } #label, -::slotted([slot='icon']) { - visibility: visible; - opacity: 1; - transition: opacity 0.13s ease-in-out; - transition: opacity - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - ease-in-out; +::slotted([slot="icon"]) { + visibility: visible; + opacity: 1; + transition: opacity 0.13s ease-in-out; + transition: opacity + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration, 0.13s) + ) + ease-in-out; } .spectrum-ProgressCircle { - visibility: hidden; - opacity: 0; - transition: - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - opacity - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ); + visibility: hidden; + opacity: 0; + transition: + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; + transition: + opacity + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration, 0.13s) + ) + ease-in-out, + visibility 0s linear + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration, 0.13s) + ); } :host([pending]), :host([pending]) { - cursor: default; + cursor: default; } :host([pending]) .spectrum-ProgressCircle, :host([pending]) .spectrum-ProgressCircle { - visibility: visible; - opacity: 1; - transition: opacity 0.13s ease-in-out; - transition: opacity - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - ease-in-out; + visibility: visible; + opacity: 1; + transition: opacity 0.13s ease-in-out; + transition: opacity + var( + --mod-button-animation-duration, + var(--spectrum-button-animation-duration, 0.13s) + ) + ease-in-out; } :host([no-wrap]) #label { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -:host([static-color='white']) { - --spectrum-button-focus-indicator-color: var( - --mod-static-black-focus-indicator-color, - var(--spectrum-static-black-focus-indicator-color) - ); -} - -:host([static-color='white'][selected]) { - --spectrum-button-content-color-default: var( - --mod-button-static-content-color, - var(--spectrum-button-static-white-content-color-default) - ); - --spectrum-button-content-color-hover: var( - --mod-button-static-content-color, - var(--spectrum-button-static-white-content-color-hover) - ); - --spectrum-button-content-color-down: var( - --mod-button-static-content-color, - var(--spectrum-button-static-white-content-color-down) - ); - --spectrum-button-content-color-focus: var( - --mod-button-static-content-color, - var(--spectrum-button-static-white-content-color-focus) - ); -} - -:host([static-color='black']) { - --spectrum-button-focus-indicator-color: var( - --mod-static-black-focus-indicator-color, - var(--spectrum-static-black-focus-indicator-color) - ); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +:host([static-color="white"]) { + --spectrum-button-focus-indicator-color: var( + --mod-static-black-focus-indicator-color, + var(--spectrum-static-black-focus-indicator-color) + ); +} + +:host([static-color="white"][selected]) { + --spectrum-button-content-color-default: var( + --mod-button-static-content-color, + var(--spectrum-button-static-white-content-color-default) + ); + --spectrum-button-content-color-hover: var( + --mod-button-static-content-color, + var(--spectrum-button-static-white-content-color-hover) + ); + --spectrum-button-content-color-down: var( + --mod-button-static-content-color, + var(--spectrum-button-static-white-content-color-down) + ); + --spectrum-button-content-color-focus: var( + --mod-button-static-content-color, + var(--spectrum-button-static-white-content-color-focus) + ); +} + +:host([static-color="black"]) { + --spectrum-button-focus-indicator-color: var( + --mod-static-black-focus-indicator-color, + var(--spectrum-static-black-focus-indicator-color) + ); } @media (forced-colors: active) { - :host { - --highcontrast-button-content-color-default: ButtonText; - --highcontrast-button-content-color-hover: ButtonText; - --highcontrast-button-content-color-focus: ButtonText; - --highcontrast-button-content-color-down: ButtonText; - --highcontrast-button-border-color-default: ButtonBorder; - --highcontrast-button-border-color-hover: ButtonBorder; - --highcontrast-button-border-color-focus: ButtonBorder; - --highcontrast-button-border-color-down: ButtonBorder; - --highcontrast-button-background-color-default: ButtonFace; - --highcontrast-button-background-color-hover: ButtonFace; - --highcontrast-button-background-color-down: ButtonFace; - --highcontrast-button-background-color-focus: ButtonFace; - --highcontrast-button-background-color-disabled: ButtonFace; - --highcontrast-button-content-color-disabled: GrayText; - --highcontrast-button-border-color-disabled: GrayText; - --mod-progress-circle-track-border-color: ButtonText; - --mod-progress-circle-track-border-color-over-background: ButtonText; - --mod-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --mod-button-animation-duration: 0s; - } - - #label { - forced-color-adjust: none; - } - - :host(:focus-visible):after { - forced-color-adjust: none; - box-shadow: 0 0 0 - var( - --mod-button-focus-ring-thickness, - var(--spectrum-button-focus-ring-thickness) - ) - ButtonText; - } - - :host([variant='accent'][treatment='fill']) { - --highcontrast-button-background-color-default: ButtonText; - --highcontrast-button-content-color-default: ButtonFace; - --highcontrast-button-content-color-hover: HighlightText; - --highcontrast-button-content-color-down: HighlightText; - --highcontrast-button-content-color-focus: HighlightText; - --highcontrast-button-background-color-disabled: ButtonFace; - --highcontrast-button-background-color-hover: Highlight; - --highcontrast-button-background-color-down: Highlight; - --highcontrast-button-background-color-focus: Highlight; - --highcontrast-button-border-color-default: ButtonText; - --highcontrast-button-border-color-hover: Highlight; - --highcontrast-button-border-color-focus: Highlight; - --highcontrast-button-border-color-down: Highlight; - } + :host { + --highcontrast-button-content-color-default: ButtonText; + --highcontrast-button-content-color-hover: ButtonText; + --highcontrast-button-content-color-focus: ButtonText; + --highcontrast-button-content-color-down: ButtonText; + --highcontrast-button-border-color-default: ButtonBorder; + --highcontrast-button-border-color-hover: ButtonBorder; + --highcontrast-button-border-color-focus: ButtonBorder; + --highcontrast-button-border-color-down: ButtonBorder; + --highcontrast-button-background-color-default: ButtonFace; + --highcontrast-button-background-color-hover: ButtonFace; + --highcontrast-button-background-color-down: ButtonFace; + --highcontrast-button-background-color-focus: ButtonFace; + --highcontrast-button-background-color-disabled: ButtonFace; + --highcontrast-button-content-color-disabled: GrayText; + --highcontrast-button-border-color-disabled: GrayText; + --mod-progress-circle-track-border-color: ButtonText; + --mod-progress-circle-track-border-color-over-background: ButtonText; + --mod-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --mod-button-animation-duration: 0s; + } + + #label { + forced-color-adjust: none; + } + + :host(:focus-visible):after { + forced-color-adjust: none; + box-shadow: 0 0 0 + var( + --mod-button-focus-ring-thickness, + var(--spectrum-button-focus-ring-thickness) + ) + ButtonText; + } + + :host([variant="accent"][treatment="fill"]) { + --highcontrast-button-background-color-default: ButtonText; + --highcontrast-button-content-color-default: ButtonFace; + --highcontrast-button-content-color-hover: HighlightText; + --highcontrast-button-content-color-down: HighlightText; + --highcontrast-button-content-color-focus: HighlightText; + --highcontrast-button-background-color-disabled: ButtonFace; + --highcontrast-button-background-color-hover: Highlight; + --highcontrast-button-background-color-down: Highlight; + --highcontrast-button-background-color-focus: Highlight; + --highcontrast-button-border-color-default: ButtonText; + --highcontrast-button-border-color-hover: Highlight; + --highcontrast-button-border-color-focus: Highlight; + --highcontrast-button-border-color-down: Highlight; + } } diff --git a/packages/card/src/card-overrides.css b/packages/card/src/card-overrides.css index 0517067fea..0a03cc241f 100644 --- a/packages/card/src/card-overrides.css +++ b/packages/card/src/card-overrides.css @@ -12,90 +12,90 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-card-background-color: var(--system-card-background-color); - --spectrum-card-body-spacing: var(--system-card-body-spacing); - --spectrum-card-title-padding-top: var(--system-card-title-padding-top); - --spectrum-card-title-padding-right: var(--system-card-title-padding-right); - --spectrum-card-content-margin-top: var(--system-card-content-margin-top); - --spectrum-card-content-margin-bottom: var( - --system-card-content-margin-bottom - ); - --spectrum-card-footer-padding-top: var(--system-card-footer-padding-top); - --spectrum-card-subtitle-padding-right: var( - --system-card-subtitle-padding-right - ); - --spectrum-card-border-width: var(--system-card-border-width); - --spectrum-card-corner-radius: var(--system-card-corner-radius); - --spectrum-card-border-color: var(--system-card-border-color); - --spectrum-card-border-color-hover: var(--system-card-border-color-hover); - --spectrum-card-border-color-selected: var( - --system-card-border-color-selected - ); - --spectrum-card-divider-color: var(--system-card-divider-color); - --spectrum-card-title-font-family: var(--system-card-title-font-family); - --spectrum-card-title-font-size: var(--system-card-title-font-size); - --spectrum-card-title-font-weight: var(--system-card-title-font-weight); - --spectrum-card-title-font-style: var(--system-card-title-font-style); - --spectrum-card-title-line-height: var(--system-card-title-line-height); - --spectrum-card-title-font-color: var(--system-card-title-font-color); - --spectrum-card-body-font-family: var(--system-card-body-font-family); - --spectrum-card-body-font-size: var(--system-card-body-font-size); - --spectrum-card-body-font-weight: var(--system-card-body-font-weight); - --spectrum-card-body-font-style: var(--system-card-body-font-style); - --spectrum-card-body-line-height: var(--system-card-body-line-height); - --spectrum-card-body-font-color: var(--system-card-body-font-color); - --spectrum-card-actions-spacing: var(--system-card-actions-spacing); - --spectrum-card-actions-size: var(--system-card-actions-size); - --spectrum-card-actions-border-radius: var( - --system-card-actions-border-radius - ); - --spectrum-card-actions-background-color-rgb: var( - --system-card-actions-background-color-rgb - ); - --spectrum-card-actions-background-color-opacity: var( - --system-card-actions-background-color-opacity - ); - --spectrum-card-actions-drop-shadow-color: var( - --system-card-actions-drop-shadow-color - ); - --spectrum-card-actions-drop-shadow-x: var( - --system-card-actions-drop-shadow-x - ); - --spectrum-card-actions-drop-shadow-y: var( - --system-card-actions-drop-shadow-y - ); - --spectrum-card-actions-drop-shadow-blur: var( - --system-card-actions-drop-shadow-blur - ); - --spectrum-card-focus-indicator-color: var( - --system-card-focus-indicator-color - ); - --spectrum-card-focus-indicator-width: var( - --system-card-focus-indicator-width - ); - --spectrum-card-selected-background-opacity: var( - --system-card-selected-background-opacity - ); - --spectrum-card-preview-border-width-selected: var( - --system-card-preview-border-width-selected - ); - --spectrum-card-preview-background-color: var( - --system-card-preview-background-color - ); - --spectrum-card-preview-background-color-hover: var( - --system-card-preview-background-color-hover - ); - --spectrum-card-horizontal-body-padding: var( - --system-card-horizontal-body-padding - ); - --spectrum-card-horizontal-preview-padding: var( - --system-card-horizontal-preview-padding - ); - --spectrum-card-content-margin-top-quiet: var( - --system-card-content-margin-top-quiet - ); - --spectrum-card-minimum-width-quiet: var(--system-card-minimum-width-quiet); - --spectrum-card-background-color-quiet: var( - --system-card-background-color-quiet - ); + --spectrum-card-background-color: var(--system-card-background-color); + --spectrum-card-body-spacing: var(--system-card-body-spacing); + --spectrum-card-title-padding-top: var(--system-card-title-padding-top); + --spectrum-card-title-padding-right: var(--system-card-title-padding-right); + --spectrum-card-content-margin-top: var(--system-card-content-margin-top); + --spectrum-card-content-margin-bottom: var( + --system-card-content-margin-bottom + ); + --spectrum-card-footer-padding-top: var(--system-card-footer-padding-top); + --spectrum-card-subtitle-padding-right: var( + --system-card-subtitle-padding-right + ); + --spectrum-card-border-width: var(--system-card-border-width); + --spectrum-card-corner-radius: var(--system-card-corner-radius); + --spectrum-card-border-color: var(--system-card-border-color); + --spectrum-card-border-color-hover: var(--system-card-border-color-hover); + --spectrum-card-border-color-selected: var( + --system-card-border-color-selected + ); + --spectrum-card-divider-color: var(--system-card-divider-color); + --spectrum-card-title-font-family: var(--system-card-title-font-family); + --spectrum-card-title-font-size: var(--system-card-title-font-size); + --spectrum-card-title-font-weight: var(--system-card-title-font-weight); + --spectrum-card-title-font-style: var(--system-card-title-font-style); + --spectrum-card-title-line-height: var(--system-card-title-line-height); + --spectrum-card-title-font-color: var(--system-card-title-font-color); + --spectrum-card-body-font-family: var(--system-card-body-font-family); + --spectrum-card-body-font-size: var(--system-card-body-font-size); + --spectrum-card-body-font-weight: var(--system-card-body-font-weight); + --spectrum-card-body-font-style: var(--system-card-body-font-style); + --spectrum-card-body-line-height: var(--system-card-body-line-height); + --spectrum-card-body-font-color: var(--system-card-body-font-color); + --spectrum-card-actions-spacing: var(--system-card-actions-spacing); + --spectrum-card-actions-size: var(--system-card-actions-size); + --spectrum-card-actions-border-radius: var( + --system-card-actions-border-radius + ); + --spectrum-card-actions-background-color-rgb: var( + --system-card-actions-background-color-rgb + ); + --spectrum-card-actions-background-color-opacity: var( + --system-card-actions-background-color-opacity + ); + --spectrum-card-actions-drop-shadow-color: var( + --system-card-actions-drop-shadow-color + ); + --spectrum-card-actions-drop-shadow-x: var( + --system-card-actions-drop-shadow-x + ); + --spectrum-card-actions-drop-shadow-y: var( + --system-card-actions-drop-shadow-y + ); + --spectrum-card-actions-drop-shadow-blur: var( + --system-card-actions-drop-shadow-blur + ); + --spectrum-card-focus-indicator-color: var( + --system-card-focus-indicator-color + ); + --spectrum-card-focus-indicator-width: var( + --system-card-focus-indicator-width + ); + --spectrum-card-selected-background-opacity: var( + --system-card-selected-background-opacity + ); + --spectrum-card-preview-border-width-selected: var( + --system-card-preview-border-width-selected + ); + --spectrum-card-preview-background-color: var( + --system-card-preview-background-color + ); + --spectrum-card-preview-background-color-hover: var( + --system-card-preview-background-color-hover + ); + --spectrum-card-horizontal-body-padding: var( + --system-card-horizontal-body-padding + ); + --spectrum-card-horizontal-preview-padding: var( + --system-card-horizontal-preview-padding + ); + --spectrum-card-content-margin-top-quiet: var( + --system-card-content-margin-top-quiet + ); + --spectrum-card-minimum-width-quiet: var(--system-card-minimum-width-quiet); + --spectrum-card-background-color-quiet: var( + --system-card-background-color-quiet + ); } diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css index 8dde8d5e3e..3ff4fcd5d3 100644 --- a/packages/card/src/spectrum-card.css +++ b/packages/card/src/spectrum-card.css @@ -12,139 +12,141 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - min-inline-size: var( - --mod-card-minimum-width, - var(--spectrum-card-minimum-width) - ); - border: var(--mod-card-border-width, var(--spectrum-card-border-width)) - solid transparent; - border-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - border-color: var( - --highcontrast-card-border-color, - var(--mod-card-border-color, var(--spectrum-card-border-color)) - ); - background-color: var( - --highcontrast-card-background-color, - var(--mod-card-background-color, var(--spectrum-card-background-color)) - ); - flex-direction: column; - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - position: relative; + box-sizing: border-box; + min-inline-size: var( + --mod-card-minimum-width, + var(--spectrum-card-minimum-width) + ); + border: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid + transparent; + border-radius: var( + --mod-card-corner-radius, + var(--spectrum-card-corner-radius) + ); + border-color: var( + --highcontrast-card-border-color, + var(--mod-card-border-color, var(--spectrum-card-border-color)) + ); + background-color: var( + --highcontrast-card-background-color, + var(--mod-card-background-color, var(--spectrum-card-background-color)) + ); + flex-direction: column; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + position: relative; } :host:after, :host:before { - content: ''; - block-size: 100%; - inline-size: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + content: ""; + block-size: 100%; + inline-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } :host:after { - border-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - border: 0 solid #0000; - margin-block-start: calc( - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) * -1 - ); - margin-inline-start: calc( - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) * -1 - ); - inset-inline-end: 0; + border-radius: var( + --mod-card-corner-radius, + var(--spectrum-card-corner-radius) + ); + border: 0 solid #0000; + margin-block-start: calc( + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) * + -1 + ); + margin-inline-start: calc( + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) * + -1 + ); + inset-inline-end: 0; } :host(:focus-visible) { - outline: none; + outline: none; } :host(:focus-visible):after { - border-width: var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ); - border-color: var( - --mod-card-focus-indicator-color, - var(--spectrum-card-focus-indicator-color) - ); + border-width: var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ); + border-color: var( + --mod-card-focus-indicator-color, + var(--spectrum-card-focus-indicator-color) + ); } :host(:focus-visible) #cover-photo, :host(:focus-visible) #preview { - border-start-start-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) - ); - border-start-end-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) - ); + border-start-start-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) + ); + border-start-end-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) + ); } :host([selected]) { - border-color: var( - --highcontrast-card-border-color-selected, - var( - --mod-card-border-color-selected, - var(--spectrum-card-border-color-selected) - ) - ); + border-color: var( + --highcontrast-card-border-color-selected, + var( + --mod-card-border-color-selected, + var(--spectrum-card-border-color-selected) + ) + ); } :host([selected]):before { - background-color: rgba( - var( - --mod-card-selected-background-color-rgb, - var(--spectrum-card-selected-background-color-rgb) - ), - var( - --mod-card-selected-background-opacity, - var(--spectrum-card-selected-background-opacity) - ) - ); + background-color: rgba( + var( + --mod-card-selected-background-color-rgb, + var(--spectrum-card-selected-background-color-rgb) + ), + var( + --mod-card-selected-background-opacity, + var(--spectrum-card-selected-background-opacity) + ) + ); } :host([drop-target]) { - border-color: var( - --highcontrast-card-border-color-selected, - var( - --mod-card-border-color-selected, - var(--spectrum-card-border-color-selected) - ) - ); - box-shadow: 0 0 0 1px - var( - --highcontrast-card-border-color-selected, - var( - --mod-card-border-color-selected, - var(--spectrum-card-border-color-selected) - ) - ); - background-color: var( - --mod-card-background-color, - var(--spectrum-card-background-color-quiet) - ); + border-color: var( + --highcontrast-card-border-color-selected, + var( + --mod-card-border-color-selected, + var(--spectrum-card-border-color-selected) + ) + ); + box-shadow: 0 0 0 1px + var( + --highcontrast-card-border-color-selected, + var( + --mod-card-border-color-selected, + var(--spectrum-card-border-color-selected) + ) + ); + background-color: var( + --mod-card-background-color, + var(--spectrum-card-background-color-quiet) + ); } :host([focused]) .actions, @@ -153,637 +155,622 @@ governing permissions and limitations under the License. :host([selected]) .checkbox-toggle, :host(:focus) .actions, :host(:focus) .checkbox-toggle { - visibility: visible; - opacity: 1; - pointer-events: all; + visibility: visible; + opacity: 1; + pointer-events: all; } .checkbox-toggle { - visibility: hidden; - box-shadow: var( - --mod-card-actions-drop-shadow-x, - var(--spectrum-card-actions-drop-shadow-x) - ) - var( - --mod-card-actions-drop-shadow-y, - var(--spectrum-card-actions-drop-shadow-y) - ) - var( - --mod-card-actions-drop-shadow-blur, - var(--spectrum-card-actions-drop-shadow-blur) - ) - var( - --mod-card-actions-drop-shadow-color, - var(--spectrum-card-actions-drop-shadow-color) - ); - inline-size: var( - --mod-card-actions-size, - var(--spectrum-card-actions-size) - ); - block-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size)); - border-radius: var( - --mod-card-actions-border-radius, - var(--spectrum-card-actions-border-radius) - ); - background-color: rgba( - var( - --mod-card-actions-background-color-rgb, - var(--spectrum-card-actions-background-color-rgb) - ), - var( - --mod-card-actions-background-color-opacity, - var(--spectrum-card-actions-background-color-opacity) - ) - ); - pointer-events: auto; - box-sizing: border-box; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); - justify-content: center; - align-items: center; - display: inline-flex; - position: absolute; - inset-block-start: calc( - var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - inset-inline-start: calc( - var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); + visibility: hidden; + box-shadow: var( + --mod-card-actions-drop-shadow-x, + var(--spectrum-card-actions-drop-shadow-x) + ) + var( + --mod-card-actions-drop-shadow-y, + var(--spectrum-card-actions-drop-shadow-y) + ) + var( + --mod-card-actions-drop-shadow-blur, + var(--spectrum-card-actions-drop-shadow-blur) + ) + var( + --mod-card-actions-drop-shadow-color, + var(--spectrum-card-actions-drop-shadow-color) + ); + inline-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size)); + block-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size)); + border-radius: var( + --mod-card-actions-border-radius, + var(--spectrum-card-actions-border-radius) + ); + background-color: rgba( + var( + --mod-card-actions-background-color-rgb, + var(--spectrum-card-actions-background-color-rgb) + ), + var( + --mod-card-actions-background-color-opacity, + var(--spectrum-card-actions-background-color-opacity) + ) + ); + pointer-events: auto; + box-sizing: border-box; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; + transition: + transform + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + opacity + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + visibility 0s linear + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ); + justify-content: center; + align-items: center; + display: inline-flex; + position: absolute; + inset-block-start: calc( + var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); + inset-inline-start: calc( + var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); } .actions { - inset-block-start: var( - --mod-card-actions-spacing, - var(--spectrum-card-actions-spacing) - ); - inset-inline-end: var( - --mod-card-actions-spacing, - var(--spectrum-card-actions-spacing) - ); + inset-block-start: var( + --mod-card-actions-spacing, + var(--spectrum-card-actions-spacing) + ); + inset-inline-end: var( + --mod-card-actions-spacing, + var(--spectrum-card-actions-spacing) + ); } #cover-photo { - block-size: var( - --mod-card-preview-minimum-height, - var(--spectrum-card-preview-minimum-height) - ); - box-sizing: border-box; - background-position: 50%; - background-size: cover; - background-color: var( - --mod-card-preview-background-color, - var(--spectrum-card-preview-background-color) - ); - border-block-end-color: var( - --mod-card-border-color, - var(--spectrum-card-border-color) - ); - border-start-start-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - border-start-end-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - border-end-end-radius: 0; - border-end-start-radius: 0; - justify-content: center; - align-items: center; - display: flex; - position: relative; - overflow: hidden; + block-size: var( + --mod-card-preview-minimum-height, + var(--spectrum-card-preview-minimum-height) + ); + box-sizing: border-box; + background-position: 50%; + background-size: cover; + background-color: var( + --mod-card-preview-background-color, + var(--spectrum-card-preview-background-color) + ); + border-block-end-color: var( + --mod-card-border-color, + var(--spectrum-card-border-color) + ); + border-start-start-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); + border-start-end-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); + border-end-end-radius: 0; + border-end-start-radius: 0; + justify-content: center; + align-items: center; + display: flex; + position: relative; + overflow: hidden; } .spectrum-Divider { - margin: 0; + margin: 0; } .content { - align-items: center; - margin-block-start: var( - --mod-card-content-margin-top, - var(--spectrum-card-content-margin-top) - ); - display: flex; + align-items: center; + margin-block-start: var( + --mod-card-content-margin-top, + var(--spectrum-card-content-margin-top) + ); + display: flex; } .body { - padding-block-start: var( - --mod-card-body-padding-block-start, - var( - --mod-card-title-padding-top, - var(--spectrum-card-title-padding-top) - ) - ); - padding-block-end: var( - --mod-card-body-padding-block-end, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); - padding-inline-start: var( - --mod-card-body-padding-inline-start, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); - padding-inline-end: var( - --mod-card-body-padding-inline-end, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); + padding-block-start: var( + --mod-card-body-padding-block-start, + var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top)) + ); + padding-block-end: var( + --mod-card-body-padding-block-end, + calc( + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ) + ); + padding-inline-start: var( + --mod-card-body-padding-inline-start, + calc( + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ) + ); + padding-inline-end: var( + --mod-card-body-padding-inline-end, + calc( + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ) + ); } #preview { - color: var( - --highcontrast-card-body-font-color, - var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) - ); - border-start-start-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - border-start-end-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - border-end-end-radius: 0; - border-end-start-radius: 0; - align-items: center; - display: flex; - overflow: hidden; + color: var( + --highcontrast-card-body-font-color, + var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) + ); + border-start-start-radius: var( + --mod-card-corner-radius, + var(--spectrum-card-corner-radius) + ); + border-start-end-radius: var( + --mod-card-corner-radius, + var(--spectrum-card-corner-radius) + ); + border-end-end-radius: 0; + border-end-start-radius: 0; + align-items: center; + display: flex; + overflow: hidden; } .title { - font-family: var( - --mod-card-title-font-family, - var(--spectrum-card-title-font-family) - ); - font-size: var( - --mod-card-title-font-size, - var(--spectrum-card-title-font-size) - ); - font-weight: var( - --mod-card-title-font-weight, - var(--spectrum-card-title-font-weight) - ); - font-style: var( - --mod-card-title-font-style, - var(--spectrum-card-title-font-style) - ); - line-height: var( - --mod-card-title-line-height, - var(--spectrum-card-title-line-height) - ); - padding-inline-end: var( - --mod-card-title-padding-right, - var(--spectrum-card-title-padding-right) - ); + font-family: var( + --mod-card-title-font-family, + var(--spectrum-card-title-font-family) + ); + font-size: var( + --mod-card-title-font-size, + var(--spectrum-card-title-font-size) + ); + font-weight: var( + --mod-card-title-font-weight, + var(--spectrum-card-title-font-weight) + ); + font-style: var( + --mod-card-title-font-style, + var(--spectrum-card-title-font-style) + ); + line-height: var( + --mod-card-title-line-height, + var(--spectrum-card-title-line-height) + ); + padding-inline-end: var( + --mod-card-title-padding-right, + var(--spectrum-card-title-padding-right) + ); } .subtitle, .title { - color: var( - --highcontrast-card-title-font-color, - var(--mod-card-title-font-color, var(--spectrum-card-title-font-color)) - ); + color: var( + --highcontrast-card-title-font-color, + var(--mod-card-title-font-color, var(--spectrum-card-title-font-color)) + ); } .subtitle { - text-transform: none; + text-transform: none; } .subtitle, -.subtitle + ::slotted([slot='description']):before { - padding-inline-end: var( - --mod-card-subtitle-padding-right, - var(--spectrum-card-subtitle-padding-right) - ); -} - -.subtitle + ::slotted([slot='description']):before { - content: '•'; -} - -::slotted([slot='description']) { - font-family: var( - --mod-card-body-font-family, - var(--spectrum-card-body-font-family) - ); - font-size: var( - --mod-card-body-font-size, - var(--spectrum-card-body-font-size) - ); - font-weight: var( - --mod-card-body-font-weight, - var(--spectrum-card-body-font-weight) - ); - font-style: var( - --mod-card-body-font-style, - var(--spectrum-card-body-font-style) - ); -} - -::slotted([slot='description']), -::slotted([slot='footer']) { - line-height: var( - --mod-card-body-line-height, - var(--spectrum-card-body-line-height) - ); - color: var( - --highcontrast-card-body-font-color, - var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) - ); -} - -::slotted([slot='footer']) { - border-block-start: var( - --mod-card-border-width, - var(--spectrum-card-border-width) - ) - solid var(--mod-card-divider-color, var(--spectrum-card-divider-color)); - margin-block-start: var( - --mod-card-footer-margin-block-start, - calc( - ( - var( - --mod-card-body-spacing, - var(--spectrum-card-body-spacing) - ) - - var( - --mod-card-content-margin-bottom, - var(--spectrum-card-content-margin-bottom) - ) - ) * -1 - ) - ); - margin-inline-start: var( - --mod-card-footer-margin-inline-start, - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - ); - margin-inline-end: var( - --mod-card-footer-margin-inline-end, - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - ); - padding-block-start: var( - --mod-card-footer-padding-block-start, - var( - --mod-card-footer-margin-top, - var(--spectrum-card-footer-padding-top) - ) - ); - padding-block-end: var( - --mod-card-footer-padding-block-end, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); +.subtitle + ::slotted([slot="description"]):before { + padding-inline-end: var( + --mod-card-subtitle-padding-right, + var(--spectrum-card-subtitle-padding-right) + ); +} + +.subtitle + ::slotted([slot="description"]):before { + content: "•"; +} + +::slotted([slot="description"]) { + font-family: var( + --mod-card-body-font-family, + var(--spectrum-card-body-font-family) + ); + font-size: var( + --mod-card-body-font-size, + var(--spectrum-card-body-font-size) + ); + font-weight: var( + --mod-card-body-font-weight, + var(--spectrum-card-body-font-weight) + ); + font-style: var( + --mod-card-body-font-style, + var(--spectrum-card-body-font-style) + ); +} + +::slotted([slot="description"]), +::slotted([slot="footer"]) { + line-height: var( + --mod-card-body-line-height, + var(--spectrum-card-body-line-height) + ); + color: var( + --highcontrast-card-body-font-color, + var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) + ); +} + +::slotted([slot="footer"]) { + border-block-start: var( + --mod-card-border-width, + var(--spectrum-card-border-width) + ) + solid var(--mod-card-divider-color, var(--spectrum-card-divider-color)); + margin-block-start: var( + --mod-card-footer-margin-block-start, + calc( + ( + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - + var( + --mod-card-content-margin-bottom, + var(--spectrum-card-content-margin-bottom) + ) + ) * + -1 + ) + ); + margin-inline-start: var( + --mod-card-footer-margin-inline-start, + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) + ); + margin-inline-end: var( + --mod-card-footer-margin-inline-end, + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) + ); + padding-block-start: var( + --mod-card-footer-padding-block-start, + var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top)) + ); + padding-block-end: var( + --mod-card-footer-padding-block-end, + calc( + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ) + ); } .header { - justify-content: space-between; - align-items: center; - display: flex; + justify-content: space-between; + align-items: center; + display: flex; } .action-button { - z-index: 1; - justify-content: flex-end; - align-self: center; - display: flex; -} - -:host([variant='quiet']) #preview { - border: var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) - solid transparent; -} - -:host([variant='quiet'][focused]):after, -:host([variant='quiet']:focus):after { - border-width: 0; -} - -:host([variant='quiet'][focused]) #preview:after, -:host([variant='quiet']:focus) #preview:after { - border-color: var( - --mod-card-focus-indicator-color, - var(--spectrum-card-focus-indicator-color) - ); -} - -:host([variant='quiet'][selected]) #preview { - border: var( - --mod-card-preview-border-width-selected, - var( - --mod-card-preview-border-width, - var(--spectrum-card-preview-border-width-selected) - ) - ) - solid; - border-color: var( - --highcontrast-card-border-color-selected, - var( - --mod-card-border-color-selected, - var(--spectrum-card-border-color-selected) - ) - ); -} - -:host([variant='gallery']), -:host([variant='quiet']) { - --spectrum-card-content-margin-top: var( - --mod-card-content-margin-top-quiet, - var(--spectrum-card-content-margin-top-quiet) - ); - --spectrum-card-minimum-width: var( - --mod-card-minimum-width-quiet, - var(--spectrum-card-minimum-width-quiet) - ); - block-size: 100%; - min-inline-size: var( - --mod-card-minimum-width, - var(--spectrum-card-minimum-width) - ); - background-color: initial; - border-width: 0; - border-color: #0000; - border-radius: 0; - overflow: visible; -} - -:host([variant='gallery']):before, -:host([variant='quiet']):before { - display: none; -} - -:host([variant='gallery']) #preview, -:host([variant='quiet']) #preview { - border-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - background-color: var( - --mod-card-preview-background-color, - var( - --mod-card-background-color, - var(--spectrum-card-preview-background-color) - ) - ); - min-block-size: var( - --mod-card-preview-minimum-height, - var(--spectrum-card-preview-minimum-height) - ); - inline-size: 100%; - box-sizing: border-box; - transition: background-color - var( - --mod-card-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ); - flex: 1; - margin: 0 auto; - position: relative; - overflow: visible; -} - -:host([variant='gallery']) #preview:after, -:host([variant='gallery']) #preview:before, -:host([variant='quiet']) #preview:after, -:host([variant='quiet']) #preview:before { - content: ''; - block-size: 100%; - inline-size: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; -} - -:host([variant='gallery']) #preview:after, -:host([variant='quiet']) #preview:after { - border-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) + - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) - ); - border: 0 solid #0000; - margin-block-start: calc( - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) * -1 - ); - margin-inline-start: calc( - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) * -1 - ); - inset-inline-end: 0; -} - -:host([variant='gallery'][drop-target]), -:host([variant='quiet'][drop-target]) { - background-color: initial; - box-shadow: none; - border-color: #0000; -} - -:host([variant='gallery'][drop-target]) #preview, -:host([variant='quiet'][drop-target]) #preview { - background-color: var( - --mod-card-preview-background-color, - var( - --mod-card-background-color, - var(--spectrum-card-preview-background-color) - ) - ); - transition: none; -} - -:host([variant='gallery'][drop-target]) #preview:before, -:host([variant='quiet'][drop-target]) #preview:before { - border-color: var( - --mod-card-focus-indicator-color, - var(--spectrum-card-focus-indicator-color) - ); - box-shadow: 0 0 0 1px - var( - --mod-card-focus-indicator-color, - var(--spectrum-card-focus-indicator-color) - ); -} - -:host([variant='gallery'][selected]) #preview:before, -:host([variant='quiet'][selected]) #preview:before { - background-color: rgba( - var( - --mod-card-selected-background-color-rgb, - var(--spectrum-card-selected-background-color-rgb) - ), - var( - --mod-card-selected-background-opacity, - var(--spectrum-card-selected-background-opacity) - ) - ); -} - -:host([variant='gallery']) .body, -:host([variant='quiet']) .body { - margin-block-start: var( - --mod-card-content-margin-top, - var(--spectrum-card-content-margin-top) - ); - padding: 0; -} - -:host([variant='gallery']) ::slotted([slot='footer']), -:host([variant='quiet']) ::slotted([slot='footer']) { - margin-inline: 0; + z-index: 1; + justify-content: flex-end; + align-self: center; + display: flex; +} + +:host([variant="quiet"]) #preview { + border: var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) + solid transparent; +} + +:host([variant="quiet"][focused]):after, +:host([variant="quiet"]:focus):after { + border-width: 0; +} + +:host([variant="quiet"][focused]) #preview:after, +:host([variant="quiet"]:focus) #preview:after { + border-color: var( + --mod-card-focus-indicator-color, + var(--spectrum-card-focus-indicator-color) + ); +} + +:host([variant="quiet"][selected]) #preview { + border: var( + --mod-card-preview-border-width-selected, + var( + --mod-card-preview-border-width, + var(--spectrum-card-preview-border-width-selected) + ) + ) + solid; + border-color: var( + --highcontrast-card-border-color-selected, + var( + --mod-card-border-color-selected, + var(--spectrum-card-border-color-selected) + ) + ); +} + +:host([variant="gallery"]), +:host([variant="quiet"]) { + --spectrum-card-content-margin-top: var( + --mod-card-content-margin-top-quiet, + var(--spectrum-card-content-margin-top-quiet) + ); + --spectrum-card-minimum-width: var( + --mod-card-minimum-width-quiet, + var(--spectrum-card-minimum-width-quiet) + ); + block-size: 100%; + min-inline-size: var( + --mod-card-minimum-width, + var(--spectrum-card-minimum-width) + ); + background-color: initial; + border-width: 0; + border-color: #0000; + border-radius: 0; + overflow: visible; +} + +:host([variant="gallery"]):before, +:host([variant="quiet"]):before { + display: none; +} + +:host([variant="gallery"]) #preview, +:host([variant="quiet"]) #preview { + border-radius: var( + --mod-card-corner-radius, + var(--spectrum-card-corner-radius) + ); + background-color: var( + --mod-card-preview-background-color, + var( + --mod-card-background-color, + var(--spectrum-card-preview-background-color) + ) + ); + min-block-size: var( + --mod-card-preview-minimum-height, + var(--spectrum-card-preview-minimum-height) + ); + inline-size: 100%; + box-sizing: border-box; + transition: background-color + var( + --mod-card-animation-duration, + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ); + flex: 1; + margin: 0 auto; + position: relative; + overflow: visible; +} + +:host([variant="gallery"]) #preview:after, +:host([variant="gallery"]) #preview:before, +:host([variant="quiet"]) #preview:after, +:host([variant="quiet"]) #preview:before { + content: ""; + block-size: 100%; + inline-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; +} + +:host([variant="gallery"]) #preview:after, +:host([variant="quiet"]) #preview:after { + border-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) + + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) + ); + border: 0 solid #0000; + margin-block-start: calc( + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) * + -1 + ); + margin-inline-start: calc( + var( + --mod-card-focus-indicator-width, + var(--spectrum-card-focus-indicator-width) + ) * + -1 + ); + inset-inline-end: 0; +} + +:host([variant="gallery"][drop-target]), +:host([variant="quiet"][drop-target]) { + background-color: initial; + box-shadow: none; + border-color: #0000; +} + +:host([variant="gallery"][drop-target]) #preview, +:host([variant="quiet"][drop-target]) #preview { + background-color: var( + --mod-card-preview-background-color, + var( + --mod-card-background-color, + var(--spectrum-card-preview-background-color) + ) + ); + transition: none; +} + +:host([variant="gallery"][drop-target]) #preview:before, +:host([variant="quiet"][drop-target]) #preview:before { + border-color: var( + --mod-card-focus-indicator-color, + var(--spectrum-card-focus-indicator-color) + ); + box-shadow: 0 0 0 1px + var( + --mod-card-focus-indicator-color, + var(--spectrum-card-focus-indicator-color) + ); +} + +:host([variant="gallery"][selected]) #preview:before, +:host([variant="quiet"][selected]) #preview:before { + background-color: rgba( + var( + --mod-card-selected-background-color-rgb, + var(--spectrum-card-selected-background-color-rgb) + ), + var( + --mod-card-selected-background-opacity, + var(--spectrum-card-selected-background-opacity) + ) + ); +} + +:host([variant="gallery"]) .body, +:host([variant="quiet"]) .body { + margin-block-start: var( + --mod-card-content-margin-top, + var(--spectrum-card-content-margin-top) + ); + padding: 0; +} + +:host([variant="gallery"]) ::slotted([slot="footer"]), +:host([variant="quiet"]) ::slotted([slot="footer"]) { + margin-inline: 0; } :host([horizontal]) { - flex-direction: row; + flex-direction: row; } @media (hover: hover) { - :host(:hover) { - border-color: var( - --highcontrast-card-border-color-hover, - var( - --mod-card-border-color-hover, - var(--spectrum-card-border-color-hover) - ) - ); - } - - :host(:hover) .actions, - :host(:hover) .checkbox-toggle { - visibility: visible; - opacity: 1; - pointer-events: all; - } - - :host([variant='gallery']:hover), - :host([variant='quiet']:hover) { - border-color: #0000; - } - - :host([variant='gallery']:hover) #preview, - :host([variant='quiet']:hover) #preview { - background-color: var( - --mod-card-preview-background-color-hover, - var( - --mod-card-background-color-hover, - var(--spectrum-card-preview-background-color-hover) - ) - ); - } - - :host([horizontal]:hover) #preview { - border-color: var( - --mod-card-border-color-hover, - var(--spectrum-card-border-color-hover) - ); - } + :host(:hover) { + border-color: var( + --highcontrast-card-border-color-hover, + var( + --mod-card-border-color-hover, + var(--spectrum-card-border-color-hover) + ) + ); + } + + :host(:hover) .actions, + :host(:hover) .checkbox-toggle { + visibility: visible; + opacity: 1; + pointer-events: all; + } + + :host([variant="gallery"]:hover), + :host([variant="quiet"]:hover) { + border-color: #0000; + } + + :host([variant="gallery"]:hover) #preview, + :host([variant="quiet"]:hover) #preview { + background-color: var( + --mod-card-preview-background-color-hover, + var( + --mod-card-background-color-hover, + var(--spectrum-card-preview-background-color-hover) + ) + ); + } + + :host([horizontal]:hover) #preview { + border-color: var( + --mod-card-border-color-hover, + var(--spectrum-card-border-color-hover) + ); + } } :host([horizontal]) #preview { - min-block-size: 0; - padding: var( - --mod-card-horizontal-preview-padding, - var(--spectrum-card-horizontal-preview-padding) - ); - background-color: var( - --mod-card-preview-background-color, - var(--spectrum-card-preview-background-color) - ); - border-color: var( - --mod-card-border-color, - var(--spectrum-card-border-color) - ); - border-start-start-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - flex-shrink: 0; - justify-content: center; - align-items: center; - display: flex; + min-block-size: 0; + padding: var( + --mod-card-horizontal-preview-padding, + var(--spectrum-card-horizontal-preview-padding) + ); + background-color: var( + --mod-card-preview-background-color, + var(--spectrum-card-preview-background-color) + ); + border-color: var(--mod-card-border-color, var(--spectrum-card-border-color)); + border-start-start-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); + flex-shrink: 0; + justify-content: center; + align-items: center; + display: flex; } :host([horizontal]) .content, :host([horizontal]) .header { - block-size: auto; - margin-block-start: 0; + block-size: auto; + margin-block-start: 0; } :host([horizontal]) .content { - margin-block-end: 0; + margin-block-end: 0; } :host([horizontal]) .title { - padding-inline-end: 0; + padding-inline-end: 0; } :host([horizontal]) .body { - padding-block: 0; - padding-inline: var( - --mod-card-horizontal-body-padding, - var(--spectrum-card-horizontal-body-padding) - ); - flex-direction: column; - flex-shrink: 0; - justify-content: center; - display: flex; + padding-block: 0; + padding-inline: var( + --mod-card-horizontal-body-padding, + var(--spectrum-card-horizontal-body-padding) + ); + flex-direction: column; + flex-shrink: 0; + justify-content: center; + display: flex; } -:host([variant='gallery']) { - min-inline-size: 0; +:host([variant="gallery"]) { + min-inline-size: 0; } -:host([variant='gallery']) #preview { - border-radius: 0; - padding: 0; +:host([variant="gallery"]) #preview { + border-radius: 0; + padding: 0; } diff --git a/packages/checkbox/src/checkbox-overrides.css b/packages/checkbox/src/checkbox-overrides.css index c41cf125f9..06a79b63ac 100644 --- a/packages/checkbox/src/checkbox-overrides.css +++ b/packages/checkbox/src/checkbox-overrides.css @@ -12,142 +12,134 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-checkbox-control-color-default: var( - --system-checkbox-control-color-default - ); - --spectrum-checkbox-control-color-hover: var( - --system-checkbox-control-color-hover - ); - --spectrum-checkbox-control-color-down: var( - --system-checkbox-control-color-down - ); - --spectrum-checkbox-control-color-focus: var( - --system-checkbox-control-color-focus - ); - --spectrum-checkbox-content-color-default: var( - --system-checkbox-content-color-default - ); - --spectrum-checkbox-content-color-hover: var( - --system-checkbox-content-color-hover - ); - --spectrum-checkbox-content-color-down: var( - --system-checkbox-content-color-down - ); - --spectrum-checkbox-content-color-focus: var( - --system-checkbox-content-color-focus - ); - --spectrum-checkbox-focus-indicator-color: var( - --system-checkbox-focus-indicator-color - ); - --spectrum-checkbox-content-color-disabled: var( - --system-checkbox-content-color-disabled - ); - --spectrum-checkbox-control-color-disabled: var( - --system-checkbox-control-color-disabled - ); - --spectrum-checkbox-checkmark-color: var(--system-checkbox-checkmark-color); - --spectrum-checkbox-invalid-color-default: var( - --system-checkbox-invalid-color-default - ); - --spectrum-checkbox-invalid-color-hover: var( - --system-checkbox-invalid-color-hover - ); - --spectrum-checkbox-invalid-color-down: var( - --system-checkbox-invalid-color-down - ); - --spectrum-checkbox-invalid-color-focus: var( - --system-checkbox-invalid-color-focus - ); - --spectrum-checkbox-emphasized-color-default: var( - --system-checkbox-emphasized-color-default - ); - --spectrum-checkbox-emphasized-color-hover: var( - --system-checkbox-emphasized-color-hover - ); - --spectrum-checkbox-emphasized-color-down: var( - --system-checkbox-emphasized-color-down - ); - --spectrum-checkbox-emphasized-color-focus: var( - --system-checkbox-emphasized-color-focus - ); - --spectrum-checkbox-control-selected-color-default: var( - --system-checkbox-control-selected-color-default - ); - --spectrum-checkbox-control-selected-color-hover: var( - --system-checkbox-control-selected-color-hover - ); - --spectrum-checkbox-control-selected-color-down: var( - --system-checkbox-control-selected-color-down - ); - --spectrum-checkbox-control-selected-color-focus: var( - --system-checkbox-control-selected-color-focus - ); - --spectrum-checkbox-line-height: var(--system-checkbox-line-height); - --spectrum-checkbox-line-height-cjk: var(--system-checkbox-line-height-cjk); - --spectrum-checkbox-control-corner-radius: var( - --system-checkbox-control-corner-radius - ); - --spectrum-checkbox-focus-indicator-gap: var( - --system-checkbox-focus-indicator-gap - ); - --spectrum-checkbox-focus-indicator-thickness: var( - --system-checkbox-focus-indicator-thickness - ); - --spectrum-checkbox-border-width: var(--system-checkbox-border-width); - --spectrum-checkbox-animation-duration: var( - --system-checkbox-animation-duration - ); - --spectrum-checkbox-font-size: var(--system-checkbox-font-size); - --spectrum-checkbox-height: var(--system-checkbox-height); - --spectrum-checkbox-control-size: var(--system-checkbox-control-size); - --spectrum-checkbox-top-to-text: var(--system-checkbox-top-to-text); - --spectrum-checkbox-text-to-control: var(--system-checkbox-text-to-control); + --spectrum-checkbox-control-color-default: var( + --system-checkbox-control-color-default + ); + --spectrum-checkbox-control-color-hover: var( + --system-checkbox-control-color-hover + ); + --spectrum-checkbox-control-color-down: var( + --system-checkbox-control-color-down + ); + --spectrum-checkbox-control-color-focus: var( + --system-checkbox-control-color-focus + ); + --spectrum-checkbox-content-color-default: var( + --system-checkbox-content-color-default + ); + --spectrum-checkbox-content-color-hover: var( + --system-checkbox-content-color-hover + ); + --spectrum-checkbox-content-color-down: var( + --system-checkbox-content-color-down + ); + --spectrum-checkbox-content-color-focus: var( + --system-checkbox-content-color-focus + ); + --spectrum-checkbox-focus-indicator-color: var( + --system-checkbox-focus-indicator-color + ); + --spectrum-checkbox-content-color-disabled: var( + --system-checkbox-content-color-disabled + ); + --spectrum-checkbox-control-color-disabled: var( + --system-checkbox-control-color-disabled + ); + --spectrum-checkbox-checkmark-color: var(--system-checkbox-checkmark-color); + --spectrum-checkbox-invalid-color-default: var( + --system-checkbox-invalid-color-default + ); + --spectrum-checkbox-invalid-color-hover: var( + --system-checkbox-invalid-color-hover + ); + --spectrum-checkbox-invalid-color-down: var( + --system-checkbox-invalid-color-down + ); + --spectrum-checkbox-invalid-color-focus: var( + --system-checkbox-invalid-color-focus + ); + --spectrum-checkbox-emphasized-color-default: var( + --system-checkbox-emphasized-color-default + ); + --spectrum-checkbox-emphasized-color-hover: var( + --system-checkbox-emphasized-color-hover + ); + --spectrum-checkbox-emphasized-color-down: var( + --system-checkbox-emphasized-color-down + ); + --spectrum-checkbox-emphasized-color-focus: var( + --system-checkbox-emphasized-color-focus + ); + --spectrum-checkbox-control-selected-color-default: var( + --system-checkbox-control-selected-color-default + ); + --spectrum-checkbox-control-selected-color-hover: var( + --system-checkbox-control-selected-color-hover + ); + --spectrum-checkbox-control-selected-color-down: var( + --system-checkbox-control-selected-color-down + ); + --spectrum-checkbox-control-selected-color-focus: var( + --system-checkbox-control-selected-color-focus + ); + --spectrum-checkbox-line-height: var(--system-checkbox-line-height); + --spectrum-checkbox-line-height-cjk: var(--system-checkbox-line-height-cjk); + --spectrum-checkbox-control-corner-radius: var( + --system-checkbox-control-corner-radius + ); + --spectrum-checkbox-focus-indicator-gap: var( + --system-checkbox-focus-indicator-gap + ); + --spectrum-checkbox-focus-indicator-thickness: var( + --system-checkbox-focus-indicator-thickness + ); + --spectrum-checkbox-border-width: var(--system-checkbox-border-width); + --spectrum-checkbox-animation-duration: var( + --system-checkbox-animation-duration + ); + --spectrum-checkbox-font-size: var(--system-checkbox-font-size); + --spectrum-checkbox-height: var(--system-checkbox-height); + --spectrum-checkbox-control-size: var(--system-checkbox-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-top-to-text); + --spectrum-checkbox-text-to-control: var(--system-checkbox-text-to-control); } -:host([size='s']) { - --spectrum-checkbox-font-size: var(--system-checkbox-size-s-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-s-height); - --spectrum-checkbox-control-size: var( - --system-checkbox-size-s-control-size - ); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-s-top-to-text); - --spectrum-checkbox-text-to-control: var( - --system-checkbox-size-s-text-to-control - ); +:host([size="s"]) { + --spectrum-checkbox-font-size: var(--system-checkbox-size-s-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-s-height); + --spectrum-checkbox-control-size: var(--system-checkbox-size-s-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-s-top-to-text); + --spectrum-checkbox-text-to-control: var( + --system-checkbox-size-s-text-to-control + ); } :host { - --spectrum-checkbox-font-size: var(--system-checkbox-size-m-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-m-height); - --spectrum-checkbox-control-size: var( - --system-checkbox-size-m-control-size - ); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-m-top-to-text); - --spectrum-checkbox-text-to-control: var( - --system-checkbox-size-m-text-to-control - ); + --spectrum-checkbox-font-size: var(--system-checkbox-size-m-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-m-height); + --spectrum-checkbox-control-size: var(--system-checkbox-size-m-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-m-top-to-text); + --spectrum-checkbox-text-to-control: var( + --system-checkbox-size-m-text-to-control + ); } -:host([size='l']) { - --spectrum-checkbox-font-size: var(--system-checkbox-size-l-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-l-height); - --spectrum-checkbox-control-size: var( - --system-checkbox-size-l-control-size - ); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-l-top-to-text); - --spectrum-checkbox-text-to-control: var( - --system-checkbox-size-l-text-to-control - ); +:host([size="l"]) { + --spectrum-checkbox-font-size: var(--system-checkbox-size-l-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-l-height); + --spectrum-checkbox-control-size: var(--system-checkbox-size-l-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-l-top-to-text); + --spectrum-checkbox-text-to-control: var( + --system-checkbox-size-l-text-to-control + ); } -:host([size='xl']) { - --spectrum-checkbox-font-size: var(--system-checkbox-size-xl-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-xl-height); - --spectrum-checkbox-control-size: var( - --system-checkbox-size-xl-control-size - ); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-xl-top-to-text); - --spectrum-checkbox-text-to-control: var( - --system-checkbox-size-xl-text-to-control - ); +:host([size="xl"]) { + --spectrum-checkbox-font-size: var(--system-checkbox-size-xl-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-xl-height); + --spectrum-checkbox-control-size: var(--system-checkbox-size-xl-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-xl-top-to-text); + --spectrum-checkbox-text-to-control: var( + --system-checkbox-size-xl-text-to-control + ); } diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css index db48f2080f..0a0d14fddf 100644 --- a/packages/checkbox/src/spectrum-checkbox.css +++ b/packages/checkbox/src/spectrum-checkbox.css @@ -12,725 +12,718 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - color: var( - --highcontrast-checkbox-content-color-default, - var( - --mod-checkbox-content-color-default, - var(--spectrum-checkbox-content-color-default) - ) - ); - min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height)); - max-inline-size: 100%; - vertical-align: top; - align-items: flex-start; - display: inline-flex; - position: relative; + color: var( + --highcontrast-checkbox-content-color-default, + var( + --mod-checkbox-content-color-default, + var(--spectrum-checkbox-content-color-default) + ) + ); + min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height)); + max-inline-size: 100%; + vertical-align: top; + align-items: flex-start; + display: inline-flex; + position: relative; } :host(:is(:active, [active])) #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-down, - var( - --mod-checkbox-control-color-down, - var(--spectrum-checkbox-control-color-down) - ) - ); + border-color: var( + --highcontrast-checkbox-highlight-color-down, + var( + --mod-checkbox-control-color-down, + var(--spectrum-checkbox-control-color-down) + ) + ); } :host(:is(:active, [active])) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-down, - var( - --mod-checkbox-control-selected-color-down, - var(--spectrum-checkbox-control-selected-color-down) - ) - ); + border-color: var( + --highcontrast-checkbox-highlight-color-down, + var( + --mod-checkbox-control-selected-color-down, + var(--spectrum-checkbox-control-selected-color-down) + ) + ); } :host(:is(:active, [active])) #label { - color: var( - --highcontrast-checkbox-content-color-down, - var( - --mod-checkbox-content-color-down, - var(--spectrum-checkbox-content-color-down) - ) - ); + color: var( + --highcontrast-checkbox-content-color-down, + var( + --mod-checkbox-content-color-down, + var(--spectrum-checkbox-content-color-down) + ) + ); } :host([invalid][invalid]) #box:before, :host([invalid][invalid]) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-invalid-color-default, - var(--spectrum-checkbox-invalid-color-default) - ) - ); + border-color: var( + --highcontrast-checkbox-color-default, + var( + --mod-checkbox-invalid-color-default, + var(--spectrum-checkbox-invalid-color-default) + ) + ); } :host([invalid][invalid]) #input:focus-visible + #box:before, :host([invalid][invalid][indeterminate]) #input:focus-visible + #box:before { - border-color: var( - --highcontrast-checkbox-color-hover, - var( - --mod-checkbox-invalid-color-hover, - var(--spectrum-checkbox-invalid-color-hover) - ) - ); + border-color: var( + --highcontrast-checkbox-color-hover, + var( + --mod-checkbox-invalid-color-hover, + var(--spectrum-checkbox-invalid-color-hover) + ) + ); } :host([readonly]) { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); + border-color: var( + --highcontrast-checkbox-color-default, + var( + --mod-checkbox-control-selected-color-default, + var(--spectrum-checkbox-control-selected-color-default) + ) + ); } :host([readonly]:is(:active, [active])) #box:before { - border-color: var( - --highcontrast-checkbox-selected-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); + border-color: var( + --highcontrast-checkbox-selected-color-default, + var( + --mod-checkbox-control-selected-color-default, + var(--spectrum-checkbox-control-selected-color-default) + ) + ); } :host([readonly]) #input:checked:disabled + #box:before, :host([readonly]) #input:disabled + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); - background-color: var( - --highcontrast-checkbox-background-color-default, - var( - --mod-checkbox-checkmark-color, - var(--spectrum-checkbox-checkmark-color) - ) - ); + border-color: var( + --highcontrast-checkbox-color-default, + var( + --mod-checkbox-control-selected-color-default, + var(--spectrum-checkbox-control-selected-color-default) + ) + ); + background-color: var( + --highcontrast-checkbox-background-color-default, + var( + --mod-checkbox-checkmark-color, + var(--spectrum-checkbox-checkmark-color) + ) + ); } :host([readonly]) #input:checked:disabled ~ #label, :host([readonly]) #input:disabled ~ #label { - forced-color-adjust: none; - color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-content-color-default, - var(--spectrum-checkbox-content-color-default) - ) - ); + forced-color-adjust: none; + color: var( + --highcontrast-checkbox-color-default, + var( + --mod-checkbox-content-color-default, + var(--spectrum-checkbox-content-color-default) + ) + ); } :host([indeterminate]) #box:before, :host([indeterminate]) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); - border-width: var( - --mod-checkbox-selected-border-width, - var(--spectrum-checkbox-selected-border-width) - ); + border-color: var( + --highcontrast-checkbox-highlight-color-default, + var( + --mod-checkbox-control-selected-color-default, + var(--spectrum-checkbox-control-selected-color-default) + ) + ); + border-width: var( + --mod-checkbox-selected-border-width, + var(--spectrum-checkbox-selected-border-width) + ); } :host([indeterminate]) #box #checkmark, :host([indeterminate]) #input:checked + #box #checkmark { - display: none; + display: none; } :host([indeterminate]) #box #partialCheckmark, :host([indeterminate]) #input:checked + #box #partialCheckmark { - opacity: 1; - display: block; - transform: scale(1); + opacity: 1; + display: block; + transform: scale(1); } :host([indeterminate]) #input:focus-visible + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-focus, - var( - --mod-checkbox-control-selected-color-focus, - var(--spectrum-checkbox-control-selected-color-focus) - ) - ); + border-color: var( + --highcontrast-checkbox-highlight-color-focus, + var( + --mod-checkbox-control-selected-color-focus, + var(--spectrum-checkbox-control-selected-color-focus) + ) + ); } :host([invalid][invalid][indeterminate]) #box:before, :host([invalid][invalid][indeterminate]) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-invalid-color-default, - var(--spectrum-checkbox-invalid-color-default) - ) - ); - border-width: var( - --mod-checkbox-selected-border-width, - var(--spectrum-checkbox-selected-border-width) - ); + border-color: var( + --highcontrast-checkbox-color-default, + var( + --mod-checkbox-invalid-color-default, + var(--spectrum-checkbox-invalid-color-default) + ) + ); + border-width: var( + --mod-checkbox-selected-border-width, + var(--spectrum-checkbox-selected-border-width) + ); } :host([emphasized]) #input:checked + #box:before, :host([emphasized][indeterminate]) #box:before, :host([emphasized][indeterminate]) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-emphasized-color-default, - var(--spectrum-checkbox-emphasized-color-default) - ) - ); + border-color: var( + --highcontrast-checkbox-highlight-color-default, + var( + --mod-checkbox-emphasized-color-default, + var(--spectrum-checkbox-emphasized-color-default) + ) + ); } :host([emphasized]) #input:focus-visible:checked + #box:before, :host([emphasized][indeterminate]) #input:focus-visible + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-focus, - var( - --mod-checkbox-emphasized-color-focus, - var(--spectrum-checkbox-emphasized-color-focus) - ) - ); + border-color: var( + --highcontrast-checkbox-highlight-color-focus, + var( + --mod-checkbox-emphasized-color-focus, + var(--spectrum-checkbox-emphasized-color-focus) + ) + ); } :host([emphasized][invalid][invalid]) - #input:focus-visible:checked - + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-invalid-color-focus, - var(--spectrum-checkbox-invalid-color-focus) - ) - ); + #input:focus-visible:checked + + #box:before { + border-color: var( + --highcontrast-checkbox-color-default, + var( + --mod-checkbox-invalid-color-focus, + var(--spectrum-checkbox-invalid-color-focus) + ) + ); } @media (hover: hover) { - :host(:hover) #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-hover, - var( - --mod-checkbox-control-color-hover, - var(--spectrum-checkbox-control-color-hover) - ) - ); - } - - :host(:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-hover, - var( - --mod-checkbox-control-selected-color-hover, - var(--spectrum-checkbox-control-selected-color-hover) - ) - ); - } - - :host(:hover) #label { - color: var( - --highcontrast-checkbox-content-color-hover, - var( - --mod-checkbox-content-color-hover, - var(--spectrum-checkbox-content-color-hover) - ) - ); - } - - :host([invalid][invalid]:hover) #box:before, - :host([invalid][invalid]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-hover, - var( - --mod-checkbox-invalid-color-hover, - var(--spectrum-checkbox-invalid-color-hover) - ) - ); - } - - :host([readonly]:hover) #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); - } - - :host([indeterminate]:hover) #box:before, - :host([indeterminate]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-hover, - var( - --mod-checkbox-control-selected-color-hover, - var(--spectrum-checkbox-control-selected-color-hover) - ) - ); - } - - :host([invalid][invalid][indeterminate]:hover) #box:before, - :host([invalid][invalid][indeterminate]:hover) - #input:checked - + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-invalid-color-hover, - var(--spectrum-checkbox-invalid-color-hover) - ) - ); - } - - :host([invalid][invalid][indeterminate]:hover) #label { - color: var( - --highcontrast-checkbox-content-color-hover, - var( - --mod-checkbox-content-color-hover, - var(--spectrum-checkbox-content-color-hover) - ) - ); - } - - :host([emphasized][indeterminate]:hover) #box:before, - :host([emphasized][indeterminate]:hover) #input:checked + #box:before, - :host([emphasized]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-hover, - var( - --mod-checkbox-emphasized-color-hover, - var(--spectrum-checkbox-emphasized-color-hover) - ) - ); - } - - :host([emphasized][invalid][invalid][indeterminate]:hover) #box:before, - :host([emphasized][invalid][invalid][indeterminate]:hover) - #input:checked - + #box:before, - :host([emphasized][invalid][invalid]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-hover, - var( - --mod-checkbox-invalid-color-hover, - var(--spectrum-checkbox-invalid-color-hover) - ) - ); - } - - :host([emphasized][indeterminate]:hover) #box:before, - :host([emphasized][indeterminate]:hover) #input:checked + #box:before, - :host([emphasized]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-hover, - var( - --mod-checkbox-emphasized-color-hover, - var(--spectrum-checkbox-emphasized-color-hover) - ) - ); - } + :host(:hover) #box:before { + border-color: var( + --highcontrast-checkbox-highlight-color-hover, + var( + --mod-checkbox-control-color-hover, + var(--spectrum-checkbox-control-color-hover) + ) + ); + } + + :host(:hover) #input:checked + #box:before { + border-color: var( + --highcontrast-checkbox-highlight-color-hover, + var( + --mod-checkbox-control-selected-color-hover, + var(--spectrum-checkbox-control-selected-color-hover) + ) + ); + } + + :host(:hover) #label { + color: var( + --highcontrast-checkbox-content-color-hover, + var( + --mod-checkbox-content-color-hover, + var(--spectrum-checkbox-content-color-hover) + ) + ); + } + + :host([invalid][invalid]:hover) #box:before, + :host([invalid][invalid]:hover) #input:checked + #box:before { + border-color: var( + --highcontrast-checkbox-color-hover, + var( + --mod-checkbox-invalid-color-hover, + var(--spectrum-checkbox-invalid-color-hover) + ) + ); + } + + :host([readonly]:hover) #box:before { + border-color: var( + --highcontrast-checkbox-color-default, + var( + --mod-checkbox-control-selected-color-default, + var(--spectrum-checkbox-control-selected-color-default) + ) + ); + } + + :host([indeterminate]:hover) #box:before, + :host([indeterminate]:hover) #input:checked + #box:before { + border-color: var( + --highcontrast-checkbox-highlight-color-hover, + var( + --mod-checkbox-control-selected-color-hover, + var(--spectrum-checkbox-control-selected-color-hover) + ) + ); + } + + :host([invalid][invalid][indeterminate]:hover) #box:before, + :host([invalid][invalid][indeterminate]:hover) #input:checked + #box:before { + border-color: var( + --highcontrast-checkbox-color-default, + var( + --mod-checkbox-invalid-color-hover, + var(--spectrum-checkbox-invalid-color-hover) + ) + ); + } + + :host([invalid][invalid][indeterminate]:hover) #label { + color: var( + --highcontrast-checkbox-content-color-hover, + var( + --mod-checkbox-content-color-hover, + var(--spectrum-checkbox-content-color-hover) + ) + ); + } + + :host([emphasized][indeterminate]:hover) #box:before, + :host([emphasized][indeterminate]:hover) #input:checked + #box:before, + :host([emphasized]:hover) #input:checked + #box:before { + border-color: var( + --highcontrast-checkbox-color-hover, + var( + --mod-checkbox-emphasized-color-hover, + var(--spectrum-checkbox-emphasized-color-hover) + ) + ); + } + + :host([emphasized][invalid][invalid][indeterminate]:hover) #box:before, + :host([emphasized][invalid][invalid][indeterminate]:hover) + #input:checked + + #box:before, + :host([emphasized][invalid][invalid]:hover) #input:checked + #box:before { + border-color: var( + --highcontrast-checkbox-color-hover, + var( + --mod-checkbox-invalid-color-hover, + var(--spectrum-checkbox-invalid-color-hover) + ) + ); + } + + :host([emphasized][indeterminate]:hover) #box:before, + :host([emphasized][indeterminate]:hover) #input:checked + #box:before, + :host([emphasized]:hover) #input:checked + #box:before { + border-color: var( + --highcontrast-checkbox-highlight-color-hover, + var( + --mod-checkbox-emphasized-color-hover, + var(--spectrum-checkbox-emphasized-color-hover) + ) + ); + } } :host([emphasized][indeterminate]:is(:active, [active])) #box:before, :host([emphasized][indeterminate]:is(:active, [active])) - #input:checked - + #box:before, + #input:checked + + #box:before, :host([emphasized]:is(:active, [active])) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-emphasized-color-down, - var(--spectrum-checkbox-emphasized-color-down) - ) - ); + border-color: var( + --highcontrast-checkbox-highlight-color-default, + var( + --mod-checkbox-emphasized-color-down, + var(--spectrum-checkbox-emphasized-color-down) + ) + ); } :host([emphasized][invalid][invalid]:is(:active, [active])) #box:before, :host([emphasized][invalid][invalid]:is(:active, [active])) - #input:checked - + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-control-invalid-color-down, - var(--spectrum-checkbox-invalid-color-down) - ) - ); + #input:checked + + #box:before { + border-color: var( + --highcontrast-checkbox-highlight-color-default, + var( + --mod-checkbox-control-invalid-color-down, + var(--spectrum-checkbox-invalid-color-down) + ) + ); } :host([emphasized]:focus-visible) #box:before, :host([emphasized]:focus-visible) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-focus, - var( - --mod-checkbox-control-color-focus, - var(--spectrum-checkbox-control-color-focus) - ) - ); + border-color: var( + --highcontrast-checkbox-color-focus, + var( + --mod-checkbox-control-color-focus, + var(--spectrum-checkbox-control-color-focus) + ) + ); } #label { - text-align: start; - font-size: var( - --mod-checkbox-font-size, - var(--spectrum-checkbox-font-size) - ); - transition: color - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out; - line-height: var( - --mod-checkbox-line-height, - var(--spectrum-checkbox-line-height) - ); - margin-block-start: var( - --mod-checkbox-top-to-text, - var(--spectrum-checkbox-top-to-text) - ); - margin-inline-start: var( - --mod-checkbox-text-to-control, - var(--spectrum-checkbox-text-to-control) - ); + text-align: start; + font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size)); + transition: color + var( + --mod-checkbox-animation-duration, + var(--spectrum-checkbox-animation-duration) + ) + ease-in-out; + line-height: var( + --mod-checkbox-line-height, + var(--spectrum-checkbox-line-height) + ); + margin-block-start: var( + --mod-checkbox-top-to-text, + var(--spectrum-checkbox-top-to-text) + ); + margin-inline-start: var( + --mod-checkbox-text-to-control, + var(--spectrum-checkbox-text-to-control) + ); } #label:lang(ja), #label:lang(ko), #label:lang(zh) { - line-height: var( - --mod-checkbox-line-height-cjk, - var(--spectrum-checkbox-line-height-cjk) - ); + line-height: var( + --mod-checkbox-line-height-cjk, + var(--spectrum-checkbox-line-height-cjk) + ); } #input { - color: var( - --mod-checkbox-control-color-default, - var(--spectrum-checkbox-control-color-default) - ); - box-sizing: border-box; - inline-size: 100%; - block-size: 100%; - opacity: 0.0001; - z-index: 1; - cursor: pointer; - margin: 0; - padding: 0; - font-family: inherit; - font-size: 100%; - line-height: 1.15; - position: absolute; - overflow: visible; + color: var( + --mod-checkbox-control-color-default, + var(--spectrum-checkbox-control-color-default) + ); + box-sizing: border-box; + inline-size: 100%; + block-size: 100%; + opacity: 0.0001; + z-index: 1; + cursor: pointer; + margin: 0; + padding: 0; + font-family: inherit; + font-size: 100%; + line-height: 1.15; + position: absolute; + overflow: visible; } #input:disabled { - cursor: default; + cursor: default; } #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); - background-color: var( - --mod-checkbox-checkmark-color, - var(--spectrum-checkbox-checkmark-color) - ); - border-width: var( - --mod-checkbox-selected-border-width, - var(--spectrum-checkbox-selected-border-width) - ); + border-color: var( + --highcontrast-checkbox-highlight-color-default, + var( + --mod-checkbox-control-selected-color-default, + var(--spectrum-checkbox-control-selected-color-default) + ) + ); + background-color: var( + --mod-checkbox-checkmark-color, + var(--spectrum-checkbox-checkmark-color) + ); + border-width: var( + --mod-checkbox-selected-border-width, + var(--spectrum-checkbox-selected-border-width) + ); } #input:checked + #box #checkmark { - opacity: 1; - transform: scale(1); + opacity: 1; + transform: scale(1); } #input:focus-visible + #box:before { - border-color: var( - --highcontrast-checkbox-color-focus, - var( - --mod-checkbox-control-color-focus, - var(--spectrum-checkbox-control-color-focus) - ) - ); + border-color: var( + --highcontrast-checkbox-color-focus, + var( + --mod-checkbox-control-color-focus, + var(--spectrum-checkbox-control-color-focus) + ) + ); } #input:focus-visible + #box:after { - forced-color-adjust: none; - box-shadow: 0 0 0 - var( - --mod-checkbox-focus-indicator-thinkness, - var(--spectrum-checkbox-focus-indicator-thickness) - ) - var( - --highcontrast-checkbox-focus-indicator-color, - var( - --mod-checkbox-focus-indicator-color, - var(--spectrum-checkbox-focus-indicator-color) - ) - ); - margin: calc( - var( - --mod-checkbox-focus-indicator-gap, - var(--spectrum-checkbox-focus-indicator-gap) - ) * -1 - ); + forced-color-adjust: none; + box-shadow: 0 0 0 + var( + --mod-checkbox-focus-indicator-thinkness, + var(--spectrum-checkbox-focus-indicator-thickness) + ) + var( + --highcontrast-checkbox-focus-indicator-color, + var( + --mod-checkbox-focus-indicator-color, + var(--spectrum-checkbox-focus-indicator-color) + ) + ); + margin: calc( + var( + --mod-checkbox-focus-indicator-gap, + var(--spectrum-checkbox-focus-indicator-gap) + ) * + -1 + ); } #input:focus-visible + #label { - color: var( - --highcontrast-checkbox-content-color-focus, - var( - --mod-checkbox-content-color-focus, - var(--spectrum-checkbox-content-color-focus) - ) - ); + color: var( + --highcontrast-checkbox-content-color-focus, + var( + --mod-checkbox-content-color-focus, + var(--spectrum-checkbox-content-color-focus) + ) + ); } #input:focus-visible:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-focus, - var( - --mod-checkbox-control-selected-color-focus, - var(--spectrum-checkbox-control-selected-color-focus) - ) - ); + border-color: var( + --highcontrast-checkbox-highlight-color-focus, + var( + --mod-checkbox-control-selected-color-focus, + var(--spectrum-checkbox-control-selected-color-focus) + ) + ); } #box { - --spectrum-checkbox-spacing: calc( - var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - - var( - --mod-checkbox-control-size, - var(--spectrum-checkbox-control-size) - ) - ); - --spectrum-checkbox-selected-border-width: calc( - var(--spectrum-checkbox-control-size) / 2 - ); - margin: calc( - var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2 - ) - 0; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - align-items: center; - display: flex; - position: relative; + --spectrum-checkbox-spacing: calc( + var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - + var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)) + ); + --spectrum-checkbox-selected-border-width: calc( + var(--spectrum-checkbox-control-size) / 2 + ); + margin: calc( + var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2 + ) + 0; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + align-items: center; + display: flex; + position: relative; } #box, #box:before { - box-sizing: border-box; - inline-size: var( - --mod-checkbox-control-size, - var(--spectrum-checkbox-control-size) - ); - block-size: var( - --mod-checkbox-control-size, - var(--spectrum-checkbox-control-size) - ); + box-sizing: border-box; + inline-size: var( + --mod-checkbox-control-size, + var(--spectrum-checkbox-control-size) + ); + block-size: var( + --mod-checkbox-control-size, + var(--spectrum-checkbox-control-size) + ); } #box:before { - forced-color-adjust: none; - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-control-color-default, - var(--spectrum-checkbox-control-color-default) - ) - ); - z-index: 0; - content: ''; - border-radius: var( - --mod-checkbox-control-corner-radius, - var(--spectrum-checkbox-control-corner-radius) - ); - border-width: var( - --mod-checkbox-border-width, - var(--spectrum-checkbox-border-width) - ); - transition: - border - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out, - box-shadow - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out; - border-style: solid; - display: block; - position: absolute; + forced-color-adjust: none; + border-color: var( + --highcontrast-checkbox-color-default, + var( + --mod-checkbox-control-color-default, + var(--spectrum-checkbox-control-color-default) + ) + ); + z-index: 0; + content: ""; + border-radius: var( + --mod-checkbox-control-corner-radius, + var(--spectrum-checkbox-control-corner-radius) + ); + border-width: var( + --mod-checkbox-border-width, + var(--spectrum-checkbox-border-width) + ); + transition: + border + var( + --mod-checkbox-animation-duration, + var(--spectrum-checkbox-animation-duration) + ) + ease-in-out, + box-shadow + var( + --mod-checkbox-animation-duration, + var(--spectrum-checkbox-animation-duration) + ) + ease-in-out; + border-style: solid; + display: block; + position: absolute; } #box:after { - border-radius: calc( - var( - --mod-checkbox-control-corner-radius, - var(--spectrum-checkbox-control-corner-radius) - ) + - var( - --mod-checkbox-focus-indicator-gap, - var(--spectrum-checkbox-focus-indicator-gap) - ) - ); - content: ''; - margin: var( - --mod-checkbox-focus-indicator-gap, - var(--spectrum-checkbox-focus-indicator-gap) - ); - transition: - box-shadow - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-out, - margin - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-out; - display: block; - position: absolute; - inset-block: 0; - inset-inline: 0; - transform: translate(0); + border-radius: calc( + var( + --mod-checkbox-control-corner-radius, + var(--spectrum-checkbox-control-corner-radius) + ) + + var( + --mod-checkbox-focus-indicator-gap, + var(--spectrum-checkbox-focus-indicator-gap) + ) + ); + content: ""; + margin: var( + --mod-checkbox-focus-indicator-gap, + var(--spectrum-checkbox-focus-indicator-gap) + ); + transition: + box-shadow + var( + --mod-checkbox-animation-duration, + var(--spectrum-checkbox-animation-duration) + ) + ease-out, + margin + var( + --mod-checkbox-animation-duration, + var(--spectrum-checkbox-animation-duration) + ) + ease-out; + display: block; + position: absolute; + inset-block: 0; + inset-inline: 0; + transform: translate(0); } #checkmark, #partialCheckmark { - color: var( - --highcontrast-checkbox-background-color-default, - var( - --mod-checkbox-checkmark-color, - var(--spectrum-checkbox-checkmark-color) - ) - ); - opacity: 0; - transition: - opacity - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out, - transform - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out; - transform: scale(0); + color: var( + --highcontrast-checkbox-background-color-default, + var( + --mod-checkbox-checkmark-color, + var(--spectrum-checkbox-checkmark-color) + ) + ); + opacity: 0; + transition: + opacity + var( + --mod-checkbox-animation-duration, + var(--spectrum-checkbox-animation-duration) + ) + ease-in-out, + transform + var( + --mod-checkbox-animation-duration, + var(--spectrum-checkbox-animation-duration) + ) + ease-in-out; + transform: scale(0); } #partialCheckmark { - display: none; + display: none; } #input:checked:disabled + #box:before, #input:disabled + #box:before { - border-color: var( - --highcontrast-checkbox-disabled-color-default, - var( - --mod-checkbox-control-color-disabled, - var(--spectrum-checkbox-control-color-disabled) - ) - ); - background-color: var( - --highcontrast-checkbox-background-color-default, - var( - --mod-checkbox-checkmark-color, - var(--spectrum-checkbox-checkmark-color) - ) - ); + border-color: var( + --highcontrast-checkbox-disabled-color-default, + var( + --mod-checkbox-control-color-disabled, + var(--spectrum-checkbox-control-color-disabled) + ) + ); + background-color: var( + --highcontrast-checkbox-background-color-default, + var( + --mod-checkbox-checkmark-color, + var(--spectrum-checkbox-checkmark-color) + ) + ); } #input:checked:disabled ~ #label, #input:disabled ~ #label { - forced-color-adjust: none; - color: var( - --highcontrast-checkbox-disabled-color-default, - var( - --mod-checkbox-content-color-disabled, - var(--spectrum-checkbox-content-color-disabled) - ) - ); + forced-color-adjust: none; + color: var( + --highcontrast-checkbox-disabled-color-default, + var( + --mod-checkbox-content-color-disabled, + var(--spectrum-checkbox-content-color-disabled) + ) + ); } @media (forced-colors: active) { - #input:focus-visible + #box { - forced-color-adjust: none; - outline-color: var( - --highcontrast-checkbox-focus-indicator-color, - var( - --mod-checkbox-focus-indicator-color, - var(--spectrum-checkbox-focus-indicator-color) - ) - ); - outline-offset: var( - --highcontrast-checkbox-focus-indicator-gap, - var( - --mod-checkbox-focus-indicator-gap, - var(--spectrum-checkbox-focus-indicator-gap) - ) - ); - outline-style: auto; - outline-width: var( - --mod-focus-indicator-thickness, - var(--spectrum-focus-indicator-thickness) - ); - } - - #input:focus-visible + #box:after { - box-shadow: 0 0 0 0 - var( - --highcontrast-checkbox-focus-indicator-color, - var( - --mod-checkbox-focus-indicator-color, - var(--spectrum-checkbox-focus-indicator-color) - ) - ); - } - - :host { - --highcontrast-checkbox-content-color-default: CanvasText; - --highcontrast-checkbox-content-color-hover: CanvasText; - --highcontrast-checkbox-content-color-down: CanvasText; - --highcontrast-checkbox-content-color-focus: CanvasText; - --highcontrast-checkbox-background-color-default: Canvas; - --highcontrast-checkbox-color-default: ButtonText; - --highcontrast-checkbox-color-hover: ButtonText; - --highcontrast-checkbox-color-focus: Highlight; - --highcontrast-checkbox-highlight-color-default: Highlight; - --highcontrast-checkbox-highlight-color-hover: Highlight; - --highcontrast-checkbox-highlight-color-down: Highlight; - --highcontrast-checkbox-highlight-color-focus: Highlight; - --highcontrast-checkbox-disabled-color-default: GrayText; - --highcontrast-checkbox-focus-indicator-color: CanvasText; - } + #input:focus-visible + #box { + forced-color-adjust: none; + outline-color: var( + --highcontrast-checkbox-focus-indicator-color, + var( + --mod-checkbox-focus-indicator-color, + var(--spectrum-checkbox-focus-indicator-color) + ) + ); + outline-offset: var( + --highcontrast-checkbox-focus-indicator-gap, + var( + --mod-checkbox-focus-indicator-gap, + var(--spectrum-checkbox-focus-indicator-gap) + ) + ); + outline-style: auto; + outline-width: var( + --mod-focus-indicator-thickness, + var(--spectrum-focus-indicator-thickness) + ); + } + + #input:focus-visible + #box:after { + box-shadow: 0 0 0 0 + var( + --highcontrast-checkbox-focus-indicator-color, + var( + --mod-checkbox-focus-indicator-color, + var(--spectrum-checkbox-focus-indicator-color) + ) + ); + } + + :host { + --highcontrast-checkbox-content-color-default: CanvasText; + --highcontrast-checkbox-content-color-hover: CanvasText; + --highcontrast-checkbox-content-color-down: CanvasText; + --highcontrast-checkbox-content-color-focus: CanvasText; + --highcontrast-checkbox-background-color-default: Canvas; + --highcontrast-checkbox-color-default: ButtonText; + --highcontrast-checkbox-color-hover: ButtonText; + --highcontrast-checkbox-color-focus: Highlight; + --highcontrast-checkbox-highlight-color-default: Highlight; + --highcontrast-checkbox-highlight-color-hover: Highlight; + --highcontrast-checkbox-highlight-color-down: Highlight; + --highcontrast-checkbox-highlight-color-focus: Highlight; + --highcontrast-checkbox-disabled-color-default: GrayText; + --highcontrast-checkbox-focus-indicator-color: CanvasText; + } } diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css index 1b58871627..bcc5cb315e 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -12,102 +12,102 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-clear-button-background-color: var( - --system-clear-button-background-color - ); - --spectrum-clear-button-background-color-hover: var( - --system-clear-button-background-color-hover - ); - --spectrum-clear-button-background-color-down: var( - --system-clear-button-background-color-down - ); - --spectrum-clear-button-background-color-key-focus: var( - --system-clear-button-background-color-key-focus - ); - --spectrum-clear-button-height: var(--system-clear-button-height); - --spectrum-clear-button-width: var(--system-clear-button-width); - --spectrum-clear-button-padding: var(--system-clear-button-padding); - --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color); - --spectrum-clear-button-icon-color-hover: var( - --system-clear-button-icon-color-hover - ); - --spectrum-clear-button-icon-color-down: var( - --system-clear-button-icon-color-down - ); - --spectrum-clear-button-icon-color-key-focus: var( - --system-clear-button-icon-color-key-focus - ); + --spectrum-clear-button-background-color: var( + --system-clear-button-background-color + ); + --spectrum-clear-button-background-color-hover: var( + --system-clear-button-background-color-hover + ); + --spectrum-clear-button-background-color-down: var( + --system-clear-button-background-color-down + ); + --spectrum-clear-button-background-color-key-focus: var( + --system-clear-button-background-color-key-focus + ); + --spectrum-clear-button-height: var(--system-clear-button-height); + --spectrum-clear-button-width: var(--system-clear-button-width); + --spectrum-clear-button-padding: var(--system-clear-button-padding); + --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color); + --spectrum-clear-button-icon-color-hover: var( + --system-clear-button-icon-color-hover + ); + --spectrum-clear-button-icon-color-down: var( + --system-clear-button-icon-color-down + ); + --spectrum-clear-button-icon-color-key-focus: var( + --system-clear-button-icon-color-key-focus + ); } -:host([size='s']) { - --spectrum-clear-button-height: var(--system-clear-button-size-s-height); - --spectrum-clear-button-width: var(--system-clear-button-size-s-width); +:host([size="s"]) { + --spectrum-clear-button-height: var(--system-clear-button-size-s-height); + --spectrum-clear-button-width: var(--system-clear-button-size-s-width); } -:host([size='l']) { - --spectrum-clear-button-height: var(--system-clear-button-size-l-height); - --spectrum-clear-button-width: var(--system-clear-button-size-l-width); +:host([size="l"]) { + --spectrum-clear-button-height: var(--system-clear-button-size-l-height); + --spectrum-clear-button-width: var(--system-clear-button-size-l-width); } -:host([size='xl']) { - --spectrum-clear-button-height: var(--system-clear-button-size-xl-height); - --spectrum-clear-button-width: var(--system-clear-button-size-xl-width); +:host([size="xl"]) { + --spectrum-clear-button-height: var(--system-clear-button-size-xl-height); + --spectrum-clear-button-width: var(--system-clear-button-size-xl-width); } :host .spectrum-ClearButton--quiet { - --spectrum-clear-button-background-color: var( - --system-clear-button-quiet-background-color - ); - --spectrum-clear-button-background-color-hover: var( - --system-clear-button-quiet-background-color-hover - ); - --spectrum-clear-button-background-color-down: var( - --system-clear-button-quiet-background-color-down - ); - --spectrum-clear-button-background-color-key-focus: var( - --system-clear-button-quiet-background-color-key-focus - ); + --spectrum-clear-button-background-color: var( + --system-clear-button-quiet-background-color + ); + --spectrum-clear-button-background-color-hover: var( + --system-clear-button-quiet-background-color-hover + ); + --spectrum-clear-button-background-color-down: var( + --system-clear-button-quiet-background-color-down + ); + --spectrum-clear-button-background-color-key-focus: var( + --system-clear-button-quiet-background-color-key-focus + ); } -:host([variant='overBackground']) { - --spectrum-clear-button-icon-color: var( - --system-clear-button-over-background-icon-color - ); - --spectrum-clear-button-icon-color-hover: var( - --system-clear-button-over-background-icon-color-hover - ); - --spectrum-clear-button-icon-color-down: var( - --system-clear-button-over-background-icon-color-down - ); - --spectrum-clear-button-icon-color-key-focus: var( - --system-clear-button-over-background-icon-color-key-focus - ); - --spectrum-clear-button-background-color: var( - --system-clear-button-over-background-background-color - ); - --spectrum-clear-button-background-color-hover: var( - --system-clear-button-over-background-background-color-hover - ); - --spectrum-clear-button-background-color-down: var( - --system-clear-button-over-background-background-color-down - ); - --spectrum-clear-button-background-color-key-focus: var( - --system-clear-button-over-background-background-color-key-focus - ); +:host([variant="overBackground"]) { + --spectrum-clear-button-icon-color: var( + --system-clear-button-over-background-icon-color + ); + --spectrum-clear-button-icon-color-hover: var( + --system-clear-button-over-background-icon-color-hover + ); + --spectrum-clear-button-icon-color-down: var( + --system-clear-button-over-background-icon-color-down + ); + --spectrum-clear-button-icon-color-key-focus: var( + --system-clear-button-over-background-icon-color-key-focus + ); + --spectrum-clear-button-background-color: var( + --system-clear-button-over-background-background-color + ); + --spectrum-clear-button-background-color-hover: var( + --system-clear-button-over-background-background-color-hover + ); + --spectrum-clear-button-background-color-down: var( + --system-clear-button-over-background-background-color-down + ); + --spectrum-clear-button-background-color-key-focus: var( + --system-clear-button-over-background-background-color-key-focus + ); } :host([disabled]), :host([disabled]) { - --spectrum-clear-button-icon-color: var( - --system-clear-button-disabled-icon-color - ); - --spectrum-clear-button-icon-color-hover: var( - --system-clear-button-disabled-icon-color-hover - ); - --spectrum-clear-button-icon-color-down: var( - --system-clear-button-disabled-icon-color-down - ); - --spectrum-clear-button-background-color: var( - --system-clear-button-disabled-background-color - ); + --spectrum-clear-button-icon-color: var( + --system-clear-button-disabled-icon-color + ); + --spectrum-clear-button-icon-color-hover: var( + --system-clear-button-disabled-icon-color-hover + ); + --spectrum-clear-button-icon-color-down: var( + --system-clear-button-disabled-icon-color-down + ); + --spectrum-clear-button-background-color: var( + --system-clear-button-disabled-background-color + ); } diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css index 3eab7a51c9..c3cef4d447 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -12,119 +12,119 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - block-size: var( - --mod-clear-button-height, - var(--spectrum-clear-button-height) - ); - inline-size: var( - --mod-clear-button-width, - var(--spectrum-clear-button-width) - ); - cursor: pointer; - background-color: initial; - background-color: var(--mod-clear-button-background-color, transparent); - padding: var( - --mod-clear-button-padding, - var(--spectrum-clear-button-padding) - ); - color: var( - --mod-clear-button-icon-color, - var(--spectrum-clear-button-icon-color) - ); - border: none; - border-radius: 100%; - margin: 0; + block-size: var( + --mod-clear-button-height, + var(--spectrum-clear-button-height) + ); + inline-size: var( + --mod-clear-button-width, + var(--spectrum-clear-button-width) + ); + cursor: pointer; + background-color: initial; + background-color: var(--mod-clear-button-background-color, transparent); + padding: var( + --mod-clear-button-padding, + var(--spectrum-clear-button-padding) + ); + color: var( + --mod-clear-button-icon-color, + var(--spectrum-clear-button-icon-color) + ); + border: none; + border-radius: 100%; + margin: 0; } .icon { - margin-block: 0; - margin-inline: auto; + margin-block: 0; + margin-inline: auto; } @media (hover: hover) { - :host(:hover) { - color: var( - --highcontrast-clear-button-icon-color-hover, - var( - --mod-clear-button-icon-color-hover, - var(--spectrum-clear-button-icon-color-hover) - ) - ); - } + :host(:hover) { + color: var( + --highcontrast-clear-button-icon-color-hover, + var( + --mod-clear-button-icon-color-hover, + var(--spectrum-clear-button-icon-color-hover) + ) + ); + } - :host(:hover) .fill { - background-color: var( - --mod-clear-button-background-color-hover, - var(--spectrum-clear-button-background-color-hover) - ); - } + :host(:hover) .fill { + background-color: var( + --mod-clear-button-background-color-hover, + var(--spectrum-clear-button-background-color-hover) + ); + } } :host(:is(:active, [active])) { - color: var( - --mod-clear-button-icon-color-down, - var(--spectrum-clear-button-icon-color-down) - ); + color: var( + --mod-clear-button-icon-color-down, + var(--spectrum-clear-button-icon-color-down) + ); } :host(:is(:active, [active])) .fill { - background-color: var( - --mod-clear-button-background-color-down, - var(--spectrum-clear-button-background-color-down) - ); + background-color: var( + --mod-clear-button-background-color-down, + var(--spectrum-clear-button-background-color-down) + ); } :host([focus-within]) .js-focus-within, :host(:focus-visible), :host:focus-within, :host([focus-within]) .js-focus-within { - color: var( - --mod-clear-button-icon-color-key-focus, - var(--spectrum-clear-button-icon-color-key-focus) - ); + color: var( + --mod-clear-button-icon-color-key-focus, + var(--spectrum-clear-button-icon-color-key-focus) + ); } :host([focus-within]) .js-focus-within .fill, :host(:focus-visible) .fill, :host:focus-within .fill, :host([focus-within]) .js-focus-within .fill { - background-color: var( - --mod-clear-button-background-color-key-focus, - var(--spectrum-clear-button-background-color-key-focus) - ); + background-color: var( + --mod-clear-button-background-color-key-focus, + var(--spectrum-clear-button-background-color-key-focus) + ); } :host([disabled]), :host([disabled]) { - --spectrum-clear-button-icon-color: var( - --mod-clear-button-icon-color-disabled, - var(--spectrum-disabled-content-color) - ); - --spectrum-clear-button-background-color: var( - --mod-clear-button-background-color-disabled, - transparent - ); + --spectrum-clear-button-icon-color: var( + --mod-clear-button-icon-color-disabled, + var(--spectrum-disabled-content-color) + ); + --spectrum-clear-button-background-color: var( + --mod-clear-button-background-color-disabled, + transparent + ); } .fill { - background-color: var( - --mod-clear-button-background-color, - var(--spectrum-clear-button-background-color) - ); - inline-size: 100%; - block-size: 100%; - border-radius: 100%; - justify-content: center; - align-items: center; - display: flex; + background-color: var( + --mod-clear-button-background-color, + var(--spectrum-clear-button-background-color) + ); + inline-size: 100%; + block-size: 100%; + border-radius: 100%; + justify-content: center; + align-items: center; + display: flex; } -:host([variant='overBackground']:focus-visible) { - outline: none; +:host([variant="overBackground"]:focus-visible) { + outline: none; } @media (forced-colors: active) { - :host:not(:disabled) { - --highcontrast-clear-button-icon-color-hover: Highlight; - } + :host:not(:disabled) { + --highcontrast-clear-button-icon-color-hover: Highlight; + } } diff --git a/packages/close-button/src/close-button-overrides.css b/packages/close-button/src/close-button-overrides.css index c8de127d67..fa1c9a0178 100644 --- a/packages/close-button/src/close-button-overrides.css +++ b/packages/close-button/src/close-button-overrides.css @@ -12,108 +12,108 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-closebutton-background-color-default: var( - --system-close-button-background-color-default - ); - --spectrum-closebutton-background-color-hover: var( - --system-close-button-background-color-hover - ); - --spectrum-closebutton-background-color-down: var( - --system-close-button-background-color-down - ); - --spectrum-closebutton-background-color-focus: var( - --system-close-button-background-color-focus - ); - --spectrum-closebutton-icon-color-default: var( - --system-close-button-icon-color-default - ); - --spectrum-closebutton-icon-color-hover: var( - --system-close-button-icon-color-hover - ); - --spectrum-closebutton-icon-color-down: var( - --system-close-button-icon-color-down - ); - --spectrum-closebutton-icon-color-focus: var( - --system-close-button-icon-color-focus - ); - --spectrum-closebutton-icon-color-disabled: var( - --system-close-button-icon-color-disabled - ); - --spectrum-closebutton-focus-indicator-thickness: var( - --system-close-button-focus-indicator-thickness - ); - --spectrum-closebutton-focus-indicator-gap: var( - --system-close-button-focus-indicator-gap - ); - --spectrum-closebutton-focus-indicator-color: var( - --system-close-button-focus-indicator-color - ); - --spectrum-closebutton-animation-duration: var( - --system-close-button-animation-duration - ); - --spectrum-closebutton-size: var(--system-close-button-size); + --spectrum-closebutton-background-color-default: var( + --system-close-button-background-color-default + ); + --spectrum-closebutton-background-color-hover: var( + --system-close-button-background-color-hover + ); + --spectrum-closebutton-background-color-down: var( + --system-close-button-background-color-down + ); + --spectrum-closebutton-background-color-focus: var( + --system-close-button-background-color-focus + ); + --spectrum-closebutton-icon-color-default: var( + --system-close-button-icon-color-default + ); + --spectrum-closebutton-icon-color-hover: var( + --system-close-button-icon-color-hover + ); + --spectrum-closebutton-icon-color-down: var( + --system-close-button-icon-color-down + ); + --spectrum-closebutton-icon-color-focus: var( + --system-close-button-icon-color-focus + ); + --spectrum-closebutton-icon-color-disabled: var( + --system-close-button-icon-color-disabled + ); + --spectrum-closebutton-focus-indicator-thickness: var( + --system-close-button-focus-indicator-thickness + ); + --spectrum-closebutton-focus-indicator-gap: var( + --system-close-button-focus-indicator-gap + ); + --spectrum-closebutton-focus-indicator-color: var( + --system-close-button-focus-indicator-color + ); + --spectrum-closebutton-animation-duration: var( + --system-close-button-animation-duration + ); + --spectrum-closebutton-size: var(--system-close-button-size); } -:host([static-color='white']) { - --spectrum-closebutton-static-background-color-default: var( - --system-close-button-static-white-static-background-color-default - ); - --spectrum-closebutton-static-background-color-hover: var( - --system-close-button-static-white-static-background-color-hover - ); - --spectrum-closebutton-static-background-color-down: var( - --system-close-button-static-white-static-background-color-down - ); - --spectrum-closebutton-static-background-color-focus: var( - --system-close-button-static-white-static-background-color-focus - ); - --spectrum-closebutton-icon-color-default: var( - --system-close-button-static-white-icon-color-default - ); - --spectrum-closebutton-icon-color-disabled: var( - --system-close-button-static-white-icon-color-disabled - ); - --spectrum-closebutton-focus-indicator-color: var( - --system-close-button-static-white-focus-indicator-color - ); +:host([static-color="white"]) { + --spectrum-closebutton-static-background-color-default: var( + --system-close-button-static-white-static-background-color-default + ); + --spectrum-closebutton-static-background-color-hover: var( + --system-close-button-static-white-static-background-color-hover + ); + --spectrum-closebutton-static-background-color-down: var( + --system-close-button-static-white-static-background-color-down + ); + --spectrum-closebutton-static-background-color-focus: var( + --system-close-button-static-white-static-background-color-focus + ); + --spectrum-closebutton-icon-color-default: var( + --system-close-button-static-white-icon-color-default + ); + --spectrum-closebutton-icon-color-disabled: var( + --system-close-button-static-white-icon-color-disabled + ); + --spectrum-closebutton-focus-indicator-color: var( + --system-close-button-static-white-focus-indicator-color + ); } -:host([static-color='black']) { - --spectrum-closebutton-static-background-color-default: var( - --system-close-button-static-black-static-background-color-default - ); - --spectrum-closebutton-static-background-color-hover: var( - --system-close-button-static-black-static-background-color-hover - ); - --spectrum-closebutton-static-background-color-down: var( - --system-close-button-static-black-static-background-color-down - ); - --spectrum-closebutton-static-background-color-focus: var( - --system-close-button-static-black-static-background-color-focus - ); - --spectrum-closebutton-icon-color-default: var( - --system-close-button-static-black-icon-color-default - ); - --spectrum-closebutton-icon-color-disabled: var( - --system-close-button-static-black-icon-color-disabled - ); - --spectrum-closebutton-focus-indicator-color: var( - --system-close-button-static-black-focus-indicator-color - ); +:host([static-color="black"]) { + --spectrum-closebutton-static-background-color-default: var( + --system-close-button-static-black-static-background-color-default + ); + --spectrum-closebutton-static-background-color-hover: var( + --system-close-button-static-black-static-background-color-hover + ); + --spectrum-closebutton-static-background-color-down: var( + --system-close-button-static-black-static-background-color-down + ); + --spectrum-closebutton-static-background-color-focus: var( + --system-close-button-static-black-static-background-color-focus + ); + --spectrum-closebutton-icon-color-default: var( + --system-close-button-static-black-icon-color-default + ); + --spectrum-closebutton-icon-color-disabled: var( + --system-close-button-static-black-icon-color-disabled + ); + --spectrum-closebutton-focus-indicator-color: var( + --system-close-button-static-black-focus-indicator-color + ); } -:host([size='s']) { - --spectrum-closebutton-size: var(--system-close-button-size-s-size); +:host([size="s"]) { + --spectrum-closebutton-size: var(--system-close-button-size-s-size); } :host { - --spectrum-closebutton-size: var(--system-close-button-size-m-size); + --spectrum-closebutton-size: var(--system-close-button-size-m-size); } -:host([size='l']) { - --spectrum-closebutton-size: var(--system-close-button-size-l-size); +:host([size="l"]) { + --spectrum-closebutton-size: var(--system-close-button-size-l-size); } -:host([size='xl']) { - --spectrum-closebutton-size: var(--system-close-button-size-xl-size); +:host([size="xl"]) { + --spectrum-closebutton-size: var(--system-close-button-size-xl-size); } diff --git a/packages/close-button/src/spectrum-close-button.css b/packages/close-button/src/spectrum-close-button.css index 3b68d5d511..c3886cefaf 100644 --- a/packages/close-button/src/spectrum-close-button.css +++ b/packages/close-button/src/spectrum-close-button.css @@ -12,407 +12,405 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - cursor: pointer; - -webkit-user-select: none; - user-select: none; - box-sizing: border-box; - font-family: var( - --mod-button-font-family, - var( - --mod-sans-font-family-stack, - var(--spectrum-sans-font-family-stack) - ) - ); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - line-height: var( - --mod-button-line-height, - var(--mod-line-height-100, var(--spectrum-line-height-100)) - ); - text-transform: none; - vertical-align: top; - -webkit-appearance: button; - transition: - background - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - border-color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - box-shadow - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out; - border-style: solid; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - overflow: visible; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + box-sizing: border-box; + font-family: var( + --mod-button-font-family, + var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)) + ); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: var( + --mod-button-line-height, + var(--mod-line-height-100, var(--spectrum-line-height-100)) + ); + text-transform: none; + vertical-align: top; + -webkit-appearance: button; + transition: + background + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + border-color + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + color + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + box-shadow + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out; + border-style: solid; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + overflow: visible; } :host(:focus) { - outline: none; + outline: none; } :host([disabled]), :host([disabled]) { - cursor: default; + cursor: default; } :host a { - -webkit-user-select: none; - user-select: none; - -webkit-appearance: none; + -webkit-user-select: none; + user-select: none; + -webkit-appearance: none; } @media (forced-colors: active) { - :host { - --highcontrast-closebutton-icon-color-disabled: GrayText; - --highcontrast-closebutton-icon-color-down: Highlight; - --highcontrast-closebutton-icon-color-hover: Highlight; - --highcontrast-closebutton-icon-color-focus: Highlight; - --highcontrast-closebutton-background-color-default: ButtonFace; - --highcontrast-closebutton-focus-indicator-color: ButtonText; - } - - :host(:focus-visible):after { - forced-color-adjust: none; - margin: var( - --mod-closebutton-focus-indicator-gap, - var(--spectrum-closebutton-focus-indicator-gap) - ); - transition: - opacity - var( - --mod-closebutton-animation-duration, - var(--spectrum-closebutton-animation-duration) - ) - ease-out, - margin - var( - --mod-closebutton-animation-duraction, - var(--spectrum-closebutton-animation-duration) - ) - ease-out; - } - - :host([static-color='black']) { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: GrayText; - } - - :host([static-color='white']) { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: Highlight; - } + :host { + --highcontrast-closebutton-icon-color-disabled: GrayText; + --highcontrast-closebutton-icon-color-down: Highlight; + --highcontrast-closebutton-icon-color-hover: Highlight; + --highcontrast-closebutton-icon-color-focus: Highlight; + --highcontrast-closebutton-background-color-default: ButtonFace; + --highcontrast-closebutton-focus-indicator-color: ButtonText; + } + + :host(:focus-visible):after { + forced-color-adjust: none; + margin: var( + --mod-closebutton-focus-indicator-gap, + var(--spectrum-closebutton-focus-indicator-gap) + ); + transition: + opacity + var( + --mod-closebutton-animation-duration, + var(--spectrum-closebutton-animation-duration) + ) + ease-out, + margin + var( + --mod-closebutton-animation-duraction, + var(--spectrum-closebutton-animation-duration) + ) + ease-out; + } + + :host([static-color="black"]) { + --highcontrast-closebutton-static-background-color-default: ButtonFace; + --highcontrast-closebutton-icon-color-default: Highlight; + --highcontrast-closebutton-icon-color-disabled: GrayText; + } + + :host([static-color="white"]) { + --highcontrast-closebutton-static-background-color-default: ButtonFace; + --highcontrast-closebutton-icon-color-default: Highlight; + --highcontrast-closebutton-icon-color-disabled: Highlight; + } } :host { - block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); - inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-size)); - color: inherit; - border-radius: var( - --mod-closebutton-border-radius, - var(--spectrum-closebutton-size) - ); - transition: border-color - var( - --mod-closebutton-animation-duration, - var(--spectrum-closebutton-animation-duration) - ) - ease-in-out; - margin-inline: var(--mod-closebutton-margin-inline); - justify-content: center; - align-items: center; - align-self: var(--mod-closebutton-align-self); - border-width: 0; - border-color: #0000; - flex-direction: row; - margin-block-start: var(--mod-closebutton-margin-top); - padding: 0; - display: inline-flex; - position: relative; + block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); + inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-size)); + color: inherit; + border-radius: var( + --mod-closebutton-border-radius, + var(--spectrum-closebutton-size) + ); + transition: border-color + var( + --mod-closebutton-animation-duration, + var(--spectrum-closebutton-animation-duration) + ) + ease-in-out; + margin-inline: var(--mod-closebutton-margin-inline); + justify-content: center; + align-items: center; + align-self: var(--mod-closebutton-align-self); + border-width: 0; + border-color: #0000; + flex-direction: row; + margin-block-start: var(--mod-closebutton-margin-top); + padding: 0; + display: inline-flex; + position: relative; } :host:after { - pointer-events: none; - content: ''; - margin: calc( - var( - --mod-closebutton-focus-indicator-gap, - var(--spectrum-closebutton-focus-indicator-gap) - ) * -1 - ); - border-radius: calc( - var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + - var( - --mod-closebutton-focus-indicator-gap, - var(--spectrum-closebutton-focus-indicator-gap) - ) - ); - transition: box-shadow - var( - --mod-closebutton-animation-duration, - var(--spectrum-closebutton-animation-duration) - ) - ease-in-out; - position: absolute; - inset-block: 0; - inset-inline: 0; + pointer-events: none; + content: ""; + margin: calc( + var( + --mod-closebutton-focus-indicator-gap, + var(--spectrum-closebutton-focus-indicator-gap) + ) * + -1 + ); + border-radius: calc( + var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + + var( + --mod-closebutton-focus-indicator-gap, + var(--spectrum-closebutton-focus-indicator-gap) + ) + ); + transition: box-shadow + var( + --mod-closebutton-animation-duration, + var(--spectrum-closebutton-animation-duration) + ) + ease-in-out; + position: absolute; + inset-block: 0; + inset-inline: 0; } :host(:focus-visible) { - box-shadow: none; - outline: none; + box-shadow: none; + outline: none; } :host(:focus-visible):after { - box-shadow: 0 0 0 - var( - --mod-closebutton-focus-indicator-thickness, - var(--spectrum-closebutton-focus-indicator-thickness) - ) - var( - --highcontrast-closebutton-focus-indicator-color, - var( - --mod-closebutton-focus-indicator-color, - var(--spectrum-closebutton-focus-indicator-color) - ) - ); + box-shadow: 0 0 0 + var( + --mod-closebutton-focus-indicator-thickness, + var(--spectrum-closebutton-focus-indicator-thickness) + ) + var( + --highcontrast-closebutton-focus-indicator-color, + var( + --mod-closebutton-focus-indicator-color, + var(--spectrum-closebutton-focus-indicator-color) + ) + ); } :host(:not([disabled])) { - background-color: var( - --highcontrast-closebutton-background-color-default, - var( - --mod-closebutton-background-color-default, - var(--spectrum-closebutton-background-color-default) - ) - ); + background-color: var( + --highcontrast-closebutton-background-color-default, + var( + --mod-closebutton-background-color-default, + var(--spectrum-closebutton-background-color-default) + ) + ); } :host(:not([disabled]):is(:active, [active])) { - background-color: var( - --mod-closebutton-background-color-down, - var(--spectrum-closebutton-background-color-down) - ); + background-color: var( + --mod-closebutton-background-color-down, + var(--spectrum-closebutton-background-color-down) + ); } :host(:not([disabled]):is(:active, [active])) .icon { - color: var( - --highcontrast-closebutton-icon-color-down, - var( - --mod-closebutton-icon-color-down, - var(--spectrum-closebutton-icon-color-down) - ) - ); + color: var( + --highcontrast-closebutton-icon-color-down, + var( + --mod-closebutton-icon-color-down, + var(--spectrum-closebutton-icon-color-down) + ) + ); } :host([focused]:not([disabled])), :host(:not([disabled]):focus-visible) { - background-color: var( - --mod-closebutton-background-color-focus, - var(--spectrum-closebutton-background-color-focus) - ); + background-color: var( + --mod-closebutton-background-color-focus, + var(--spectrum-closebutton-background-color-focus) + ); } :host([focused]:not([disabled])) .icon, :host(:not([disabled]):focus-visible) .icon { - color: var( - --highcontrast-closebutton-icon-color-focus, - var( - --mod-closebutton-icon-color-focus, - var(--spectrum-closebutton-icon-color-focus) - ) - ); + color: var( + --highcontrast-closebutton-icon-color-focus, + var( + --mod-closebutton-icon-color-focus, + var(--spectrum-closebutton-icon-color-focus) + ) + ); } :host(:not([disabled])) .icon { - color: var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ); + color: var( + --mod-closebutton-icon-color-default, + var(--spectrum-closebutton-icon-color-default) + ); } :host([focused]:not([disabled])) .icon, :host(:not([disabled]):focus) .icon { - color: var( - --highcontrast-closebutton-icon-color-focus, - var( - --mod-closebutton-icon-color-focus, - var(--spectrum-closebutton-icon-color-focus) - ) - ); + color: var( + --highcontrast-closebutton-icon-color-focus, + var( + --mod-closebutton-icon-color-focus, + var(--spectrum-closebutton-icon-color-focus) + ) + ); } :host([disabled]) { - background-color: var( - --mod-closebutton-background-color-default, - var(--spectrum-closebutton-background-color-default) - ); + background-color: var( + --mod-closebutton-background-color-default, + var(--spectrum-closebutton-background-color-default) + ); } :host([disabled]) .icon { - color: var( - --highcontrast-closebutton-icon-color-disabled, - var( - --mod-closebutton-icon-color-disabled, - var(--spectrum-closebutton-icon-color-disabled) - ) - ); + color: var( + --highcontrast-closebutton-icon-color-disabled, + var( + --mod-closebutton-icon-color-disabled, + var(--spectrum-closebutton-icon-color-disabled) + ) + ); } -:host([static-color='black']:not([disabled])), -:host([static-color='white']:not([disabled])) { - background-color: var( - --highcontrast-closebutton-static-background-color-default, - var( - --mod-closebutton-static-background-color-default, - var(--spectrum-closebutton-static-background-color-default) - ) - ); +:host([static-color="black"]:not([disabled])), +:host([static-color="white"]:not([disabled])) { + background-color: var( + --highcontrast-closebutton-static-background-color-default, + var( + --mod-closebutton-static-background-color-default, + var(--spectrum-closebutton-static-background-color-default) + ) + ); } @media (hover: hover) { - :host(:not([disabled]):hover) { - background-color: var( - --mod-closebutton-background-color-hover, - var(--spectrum-closebutton-background-color-hover) - ); - } - - :host(:not([disabled]):hover) .icon { - color: var( - --highcontrast-closebutton-icon-color-hover, - var( - --mod-closebutton-icon-color-hover, - var(--spectrum-closebutton-icon-color-hover) - ) - ); - } - - :host([static-color='black']:not([disabled]):hover), - :host([static-color='white']:not([disabled]):hover) { - background-color: var( - --highcontrast-closebutton-static-background-color-hover, - var( - --mod-closebutton-static-background-color-hover, - var(--spectrum-closebutton-static-background-color-hover) - ) - ); - } - - :host([static-color='black']:not([disabled]):hover) .icon, - :host([static-color='white']:not([disabled]):hover) .icon { - color: var( - --highcontrast-closebutton-icon-color-default, - var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ) - ); - } + :host(:not([disabled]):hover) { + background-color: var( + --mod-closebutton-background-color-hover, + var(--spectrum-closebutton-background-color-hover) + ); + } + + :host(:not([disabled]):hover) .icon { + color: var( + --highcontrast-closebutton-icon-color-hover, + var( + --mod-closebutton-icon-color-hover, + var(--spectrum-closebutton-icon-color-hover) + ) + ); + } + + :host([static-color="black"]:not([disabled]):hover), + :host([static-color="white"]:not([disabled]):hover) { + background-color: var( + --highcontrast-closebutton-static-background-color-hover, + var( + --mod-closebutton-static-background-color-hover, + var(--spectrum-closebutton-static-background-color-hover) + ) + ); + } + + :host([static-color="black"]:not([disabled]):hover) .icon, + :host([static-color="white"]:not([disabled]):hover) .icon { + color: var( + --highcontrast-closebutton-icon-color-default, + var( + --mod-closebutton-icon-color-default, + var(--spectrum-closebutton-icon-color-default) + ) + ); + } } -:host([static-color='black']:not([disabled]):is(:active, [active])), -:host([static-color='white']:not([disabled]):is(:active, [active])) { - background-color: var( - --highcontrast-closebutton-static-background-color-down, - var( - --mod-closebutton-static-background-color-down, - var(--spectrum-closebutton-static-background-color-down) - ) - ); +:host([static-color="black"]:not([disabled]):is(:active, [active])), +:host([static-color="white"]:not([disabled]):is(:active, [active])) { + background-color: var( + --highcontrast-closebutton-static-background-color-down, + var( + --mod-closebutton-static-background-color-down, + var(--spectrum-closebutton-static-background-color-down) + ) + ); } -:host([static-color='black']:not([disabled]):is(:active, [active])) .icon, -:host([static-color='white']:not([disabled]):is(:active, [active])) .icon { - color: var( - --highcontrast-closebutton-icon-color-default, - var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ) - ); +:host([static-color="black"]:not([disabled]):is(:active, [active])) .icon, +:host([static-color="white"]:not([disabled]):is(:active, [active])) .icon { + color: var( + --highcontrast-closebutton-icon-color-default, + var( + --mod-closebutton-icon-color-default, + var(--spectrum-closebutton-icon-color-default) + ) + ); } -:host([static-color='black'][focused]:not([disabled])), -:host([static-color='black']:not([disabled]):focus-visible), -:host([static-color='white'][focused]:not([disabled])), -:host([static-color='white']:not([disabled]):focus-visible) { - background-color: var( - --highcontrast-closebutton-static-background-color-focus, - var( - --mod-closebutton-static-background-color-focus, - var(--spectrum-closebutton-static-background-color-focus) - ) - ); +:host([static-color="black"][focused]:not([disabled])), +:host([static-color="black"]:not([disabled]):focus-visible), +:host([static-color="white"][focused]:not([disabled])), +:host([static-color="white"]:not([disabled]):focus-visible) { + background-color: var( + --highcontrast-closebutton-static-background-color-focus, + var( + --mod-closebutton-static-background-color-focus, + var(--spectrum-closebutton-static-background-color-focus) + ) + ); } -:host([static-color='black'][focused]:not([disabled])) .icon, -:host([static-color='black'][focused]:not([disabled])) .icon, -:host([static-color='black']:not([disabled]):focus) .icon, -:host([static-color='black']:not([disabled]):focus-visible) .icon, -:host([static-color='white'][focused]:not([disabled])) .icon, -:host([static-color='white'][focused]:not([disabled])) .icon, -:host([static-color='white']:not([disabled]):focus) .icon, -:host([static-color='white']:not([disabled]):focus-visible) .icon { - color: var( - --highcontrast-closebutton-icon-color-default, - var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ) - ); +:host([static-color="black"][focused]:not([disabled])) .icon, +:host([static-color="black"][focused]:not([disabled])) .icon, +:host([static-color="black"]:not([disabled]):focus) .icon, +:host([static-color="black"]:not([disabled]):focus-visible) .icon, +:host([static-color="white"][focused]:not([disabled])) .icon, +:host([static-color="white"][focused]:not([disabled])) .icon, +:host([static-color="white"]:not([disabled]):focus) .icon, +:host([static-color="white"]:not([disabled]):focus-visible) .icon { + color: var( + --highcontrast-closebutton-icon-color-default, + var( + --mod-closebutton-icon-color-default, + var(--spectrum-closebutton-icon-color-default) + ) + ); } -:host([static-color='black']:not([disabled])) .icon, -:host([static-color='white']:not([disabled])) .icon { - color: var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ); +:host([static-color="black"]:not([disabled])) .icon, +:host([static-color="white"]:not([disabled])) .icon { + color: var( + --mod-closebutton-icon-color-default, + var(--spectrum-closebutton-icon-color-default) + ); } -:host([static-color='black'][disabled]) .icon, -:host([static-color='white'][disabled]) .icon { - color: var( - --highcontrast-closebutton-icon-disabled, - var( - --mod-closebutton-icon-color-disabled, - var(--spectrum-closebutton-icon-color-disabled) - ) - ); +:host([static-color="black"][disabled]) .icon, +:host([static-color="white"][disabled]) .icon { + color: var( + --highcontrast-closebutton-icon-disabled, + var( + --mod-closebutton-icon-color-disabled, + var(--spectrum-closebutton-icon-color-disabled) + ) + ); } .icon { - margin: 0; + margin: 0; } diff --git a/packages/coachmark/src/coach-indicator-overrides.css b/packages/coachmark/src/coach-indicator-overrides.css index 983a99f05c..170c09bc12 100644 --- a/packages/coachmark/src/coach-indicator-overrides.css +++ b/packages/coachmark/src/coach-indicator-overrides.css @@ -12,84 +12,84 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-coach-indicator-ring-border-size: var( - --system-coach-indicator-ring-border-size - ); - --spectrum-coach-indicator-min-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --spectrum-coach-indicator-min-block-size: var( - --system-coach-indicator-min-block-size - ); - --spectrum-coach-indicator-inline-size: var( - --system-coach-indicator-inline-size - ); - --spectrum-coach-indicator-block-size: var( - --system-coach-indicator-block-size - ); - --spectrum-coach-indicator-ring-inline-size: var( - --system-coach-indicator-ring-inline-size - ); - --spectrum-coach-indicator-ring-block-size: var( - --system-coach-indicator-ring-block-size - ); - --spectrum-coach-indicator-ring-dark-color: var( - --system-coach-indicator-ring-dark-color - ); - --spectrum-coach-indicator-ring-light-color: var( - --system-coach-indicator-ring-light-color - ); - --spectrum-coach-indicator-top: var(--system-coach-indicator-top); - --spectrum-coach-indicator-left: var(--system-coach-indicator-left); - --spectrum-coach-animation-indicator-ring-duration: var( - --system-coach-indicator-coach-animation-indicator-ring-duration - ); - --spectrum-coach-animation-indicator-ring-inner-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --spectrum-coach-animation-indicator-ring-center-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple - ); - --spectrum-coach-animation-indicator-ring-outer-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple - ); - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var( - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple - ); - --spectrum-coach-indicator-animation-name: var( - --system-coach-indicator-animation-name - ); - --spectrum-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-inner-animation-delay-multiple - ); - --spectrum-coach-indicator-animation-keyframe-0-scale: var( - --system-coach-indicator-animation-keyframe-0-scale - ); - --spectrum-coach-indicator-animation-keyframe-0-opacity: var( - --system-coach-indicator-animation-keyframe-0-opacity - ); - --spectrum-coach-indicator-animation-keyframe-50-scale: var( - --system-coach-indicator-animation-keyframe-50-scale - ); - --spectrum-coach-indicator-animation-keyframe-50-opacity: var( - --system-coach-indicator-animation-keyframe-50-opacity - ); - --spectrum-coach-indicator-animation-keyframe-100-scale: var( - --system-coach-indicator-animation-keyframe-100-scale - ); - --spectrum-coach-indicator-animation-keyframe-100-opacity: var( - --system-coach-indicator-animation-keyframe-100-opacity - ); - --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var( - --system-coach-indicator-quiet-animation-keyframe-0-scale - ); + --spectrum-coach-indicator-ring-border-size: var( + --system-coach-indicator-ring-border-size + ); + --spectrum-coach-indicator-min-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --spectrum-coach-indicator-min-block-size: var( + --system-coach-indicator-min-block-size + ); + --spectrum-coach-indicator-inline-size: var( + --system-coach-indicator-inline-size + ); + --spectrum-coach-indicator-block-size: var( + --system-coach-indicator-block-size + ); + --spectrum-coach-indicator-ring-inline-size: var( + --system-coach-indicator-ring-inline-size + ); + --spectrum-coach-indicator-ring-block-size: var( + --system-coach-indicator-ring-block-size + ); + --spectrum-coach-indicator-ring-dark-color: var( + --system-coach-indicator-ring-dark-color + ); + --spectrum-coach-indicator-ring-light-color: var( + --system-coach-indicator-ring-light-color + ); + --spectrum-coach-indicator-top: var(--system-coach-indicator-top); + --spectrum-coach-indicator-left: var(--system-coach-indicator-left); + --spectrum-coach-animation-indicator-ring-duration: var( + --system-coach-indicator-coach-animation-indicator-ring-duration + ); + --spectrum-coach-animation-indicator-ring-inner-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --spectrum-coach-animation-indicator-ring-center-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple + ); + --spectrum-coach-animation-indicator-ring-outer-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple + ); + --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var( + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple + ); + --spectrum-coach-indicator-animation-name: var( + --system-coach-indicator-animation-name + ); + --spectrum-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-inner-animation-delay-multiple + ); + --spectrum-coach-indicator-animation-keyframe-0-scale: var( + --system-coach-indicator-animation-keyframe-0-scale + ); + --spectrum-coach-indicator-animation-keyframe-0-opacity: var( + --system-coach-indicator-animation-keyframe-0-opacity + ); + --spectrum-coach-indicator-animation-keyframe-50-scale: var( + --system-coach-indicator-animation-keyframe-50-scale + ); + --spectrum-coach-indicator-animation-keyframe-50-opacity: var( + --system-coach-indicator-animation-keyframe-50-opacity + ); + --spectrum-coach-indicator-animation-keyframe-100-scale: var( + --system-coach-indicator-animation-keyframe-100-scale + ); + --spectrum-coach-indicator-animation-keyframe-100-opacity: var( + --system-coach-indicator-animation-keyframe-100-opacity + ); + --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var( + --system-coach-indicator-quiet-animation-keyframe-0-scale + ); } :host([quiet]) { - --spectrum-coach-indicator-quiet-ring-diameter-size: var( - --system-coach-indicator-quiet-quiet-ring-diameter-size - ); - --spectrum-coach-indicator-animation-name: var( - --system-coach-indicator-quiet-animation-name - ); + --spectrum-coach-indicator-quiet-ring-diameter-size: var( + --system-coach-indicator-quiet-quiet-ring-diameter-size + ); + --spectrum-coach-indicator-animation-name: var( + --system-coach-indicator-quiet-animation-name + ); } diff --git a/packages/coachmark/src/coachmark-overrides.css b/packages/coachmark/src/coachmark-overrides.css index e79be039b7..c3c896cb22 100644 --- a/packages/coachmark/src/coachmark-overrides.css +++ b/packages/coachmark/src/coachmark-overrides.css @@ -12,83 +12,75 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-coachmark-min-width: var(--system-coach-mark-min-width); - --spectrum-coachmark-width: var(--system-coach-mark-width); - --spectrum-coachmark-max-width: var(--system-coach-mark-max-width); - --spectrum-coachmark-media-height: var(--system-coach-mark-media-height); - --spectrum-coachmark-media-min-height: var( - --system-coach-mark-media-min-height - ); - --spectrum-coachmark-padding: var(--system-coach-mark-padding); - --spectrum-coachmark-heading-to-action-button: var( - --system-coach-mark-heading-to-action-button - ); - --spectrum-coachmark-header-to-body: var( - --system-coach-mark-header-to-body - ); - --spectrum-coachmark-body-to-footer: var( - --system-coach-mark-body-to-footer - ); - --spectrum-coachmark-title-color: var(--system-coach-mark-title-color); - --spectrum-coachmark-title-font-family: var( - --system-coach-mark-title-font-family - ); - --spectrum-coachmark-title-font-style: var( - --system-coach-mark-title-font-style - ); - --spectrum-coachmark-title-text-font-weight: var( - --system-coach-mark-title-text-font-weight - ); - --spectrum-coachmark-title-font-size: var( - --system-coach-mark-title-font-size - ); - --spectrum-coachmark-title-text-line-height: var( - --system-coach-mark-title-text-line-height - ); - --spectrum-coachmark-content-font-color: var( - --system-coach-mark-content-font-color - ); - --spectrum-coachmark-content-font-weight: var( - --system-coach-mark-content-font-weight - ); - --spectrum-coachmark-content-font-family: var( - --system-coach-mark-content-font-family - ); - --spectrum-coachmark-content-font-style: var( - --system-coach-mark-content-font-style - ); - --spectrum-coachmark-content-line-height: var( - --system-coach-mark-content-line-height - ); - --spectrum-coachmark-content-font-size: var( - --system-coach-mark-content-font-size - ); - --spectrum-coachmark-step-color: var(--system-coach-mark-step-color); - --spectrum-coachmark-step-font-weight: var( - --system-coach-mark-step-font-weight - ); - --spectrum-coachmark-step-font-family: var( - --system-coach-mark-step-font-family - ); - --spectrum-coachmark-step-font-style: var( - --system-coach-mark-step-font-style - ); - --spectrum-coachmark-step-line-height: var( - --system-coach-mark-step-line-height - ); - --spectrum-coachmark-step-font-size: var( - --system-coach-mark-step-font-size - ); - --spectrum-coachmark-step-to-bottom: var( - --system-coach-mark-step-to-bottom - ); - --spectrum-coachmark-popover-border-width: var( - --system-coach-mark-popover-border-width - ); - --spectrum-coachmark-popover-corner-radius: var( - --system-coach-mark-popover-corner-radius - ); - --spectrum-coachmark-buttongroup-spacing-horizontal: var( - --system-coach-mark-buttongroup-spacing-horizontal - ); + --spectrum-coachmark-min-width: var(--system-coach-mark-min-width); + --spectrum-coachmark-width: var(--system-coach-mark-width); + --spectrum-coachmark-max-width: var(--system-coach-mark-max-width); + --spectrum-coachmark-media-height: var(--system-coach-mark-media-height); + --spectrum-coachmark-media-min-height: var( + --system-coach-mark-media-min-height + ); + --spectrum-coachmark-padding: var(--system-coach-mark-padding); + --spectrum-coachmark-heading-to-action-button: var( + --system-coach-mark-heading-to-action-button + ); + --spectrum-coachmark-header-to-body: var(--system-coach-mark-header-to-body); + --spectrum-coachmark-body-to-footer: var(--system-coach-mark-body-to-footer); + --spectrum-coachmark-title-color: var(--system-coach-mark-title-color); + --spectrum-coachmark-title-font-family: var( + --system-coach-mark-title-font-family + ); + --spectrum-coachmark-title-font-style: var( + --system-coach-mark-title-font-style + ); + --spectrum-coachmark-title-text-font-weight: var( + --system-coach-mark-title-text-font-weight + ); + --spectrum-coachmark-title-font-size: var( + --system-coach-mark-title-font-size + ); + --spectrum-coachmark-title-text-line-height: var( + --system-coach-mark-title-text-line-height + ); + --spectrum-coachmark-content-font-color: var( + --system-coach-mark-content-font-color + ); + --spectrum-coachmark-content-font-weight: var( + --system-coach-mark-content-font-weight + ); + --spectrum-coachmark-content-font-family: var( + --system-coach-mark-content-font-family + ); + --spectrum-coachmark-content-font-style: var( + --system-coach-mark-content-font-style + ); + --spectrum-coachmark-content-line-height: var( + --system-coach-mark-content-line-height + ); + --spectrum-coachmark-content-font-size: var( + --system-coach-mark-content-font-size + ); + --spectrum-coachmark-step-color: var(--system-coach-mark-step-color); + --spectrum-coachmark-step-font-weight: var( + --system-coach-mark-step-font-weight + ); + --spectrum-coachmark-step-font-family: var( + --system-coach-mark-step-font-family + ); + --spectrum-coachmark-step-font-style: var( + --system-coach-mark-step-font-style + ); + --spectrum-coachmark-step-line-height: var( + --system-coach-mark-step-line-height + ); + --spectrum-coachmark-step-font-size: var(--system-coach-mark-step-font-size); + --spectrum-coachmark-step-to-bottom: var(--system-coach-mark-step-to-bottom); + --spectrum-coachmark-popover-border-width: var( + --system-coach-mark-popover-border-width + ); + --spectrum-coachmark-popover-corner-radius: var( + --system-coach-mark-popover-corner-radius + ); + --spectrum-coachmark-buttongroup-spacing-horizontal: var( + --system-coach-mark-buttongroup-spacing-horizontal + ); } diff --git a/packages/coachmark/src/spectrum-coach-indicator.css b/packages/coachmark/src/spectrum-coach-indicator.css index 7021ca01c8..f0dabd02d5 100644 --- a/packages/coachmark/src/spectrum-coach-indicator.css +++ b/packages/coachmark/src/spectrum-coach-indicator.css @@ -12,220 +12,218 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); - min-inline-size: var( - --mod-coach-indicator-min-inline-size, - var(--spectrum-coach-indicator-min-inline-size) - ); - min-block-size: var( - --mod-coach-indicator-min-block-size, - var(--spectrum-coach-indicator-min-block-size) - ); - inline-size: var( - --mod-coach-indicator-inline-size, - var(--spectrum-coach-indicator-inline-size) - ); - block-size: var( - --mod-coach-indicator-block-size, - var(--spectrum-coach-indicator-block-size) - ); - position: relative; + margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); + min-inline-size: var( + --mod-coach-indicator-min-inline-size, + var(--spectrum-coach-indicator-min-inline-size) + ); + min-block-size: var( + --mod-coach-indicator-min-block-size, + var(--spectrum-coach-indicator-min-block-size) + ); + inline-size: var( + --mod-coach-indicator-inline-size, + var(--spectrum-coach-indicator-inline-size) + ); + block-size: var( + --mod-coach-indicator-block-size, + var(--spectrum-coach-indicator-block-size) + ); + position: relative; } :host([quiet]) { - --mod-coach-indicator-min-inline-size: calc( - var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ) * 2.75 - ); - --mod-coach-indicator-min-block-size: calc( - var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ) * 2.75 - ); - --mod-coach-indicator-inline-size: calc( - var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ) * 2.75 - ); - --mod-coach-indicator-block-size: calc( - var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ) * 2.75 - ); - --mod-coach-indicator-ring-inline-size: var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ); - --mod-coach-indicator-ring-block-size: var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ); - --mod-coach-indicator-top: calc( - var(--mod-coach-indicator-min-inline-size) / 3 - - var(--spectrum-coach-indicator-ring-border-size) - ); - --mod-coach-indicator-left: calc( - var(--mod-coach-indicator-min-inline-size) / 3 - - var(--spectrum-coach-indicator-ring-border-size) - ); - --mod-coach-indicator-inner-animation-delay-multiple: var( - --mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, - var( - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple - ) - ); + --mod-coach-indicator-min-inline-size: calc( + var( + --mod-coach-indicator-quiet-ring-diameter, + var(--spectrum-coach-indicator-quiet-ring-diameter-size) + ) * + 2.75 + ); + --mod-coach-indicator-min-block-size: calc( + var( + --mod-coach-indicator-quiet-ring-diameter, + var(--spectrum-coach-indicator-quiet-ring-diameter-size) + ) * + 2.75 + ); + --mod-coach-indicator-inline-size: calc( + var( + --mod-coach-indicator-quiet-ring-diameter, + var(--spectrum-coach-indicator-quiet-ring-diameter-size) + ) * + 2.75 + ); + --mod-coach-indicator-block-size: calc( + var( + --mod-coach-indicator-quiet-ring-diameter, + var(--spectrum-coach-indicator-quiet-ring-diameter-size) + ) * + 2.75 + ); + --mod-coach-indicator-ring-inline-size: var( + --mod-coach-indicator-quiet-ring-diameter, + var(--spectrum-coach-indicator-quiet-ring-diameter-size) + ); + --mod-coach-indicator-ring-block-size: var( + --mod-coach-indicator-quiet-ring-diameter, + var(--spectrum-coach-indicator-quiet-ring-diameter-size) + ); + --mod-coach-indicator-top: calc( + var(--mod-coach-indicator-min-inline-size) / 3 - + var(--spectrum-coach-indicator-ring-border-size) + ); + --mod-coach-indicator-left: calc( + var(--mod-coach-indicator-min-inline-size) / 3 - + var(--spectrum-coach-indicator-ring-border-size) + ); + --mod-coach-indicator-inner-animation-delay-multiple: var( + --mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, + var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple) + ); } .ring { - border-style: solid; - border-width: var( - --mod-coach-indicator-ring-border-size, - var(--spectrum-coach-indicator-ring-border-size) - ); - border-color: var( - --mod-coach-indicator-ring-default-color, - var(--spectrum-coach-indicator-ring-default-color) - ); - inline-size: var( - --mod-coach-indicator-ring-inline-size, - var(--spectrum-coach-indicator-ring-inline-size) - ); - block-size: var( - --mod-coach-indicator-ring-block-size, - var(--spectrum-coach-indicator-ring-block-size) - ); - animation: var( - --mod-coach-indicator-animation-name, - var(--spectrum-coach-indicator-animation-name) - ) - var( - --mod-coach-animation-indicator-ring-duration, - var(--spectrum-coach-animation-indicator-ring-duration) - ) - linear infinite; - border-radius: 50%; - display: block; - position: absolute; - inset-block-start: var( - --mod-coach-indicator-top, - var(--spectrum-coach-indicator-top) - ); - inset-inline-start: var( - --mod-coach-indicator-left, - var(--spectrum-coach-indicator-left) - ); + border-style: solid; + border-width: var( + --mod-coach-indicator-ring-border-size, + var(--spectrum-coach-indicator-ring-border-size) + ); + border-color: var( + --mod-coach-indicator-ring-default-color, + var(--spectrum-coach-indicator-ring-default-color) + ); + inline-size: var( + --mod-coach-indicator-ring-inline-size, + var(--spectrum-coach-indicator-ring-inline-size) + ); + block-size: var( + --mod-coach-indicator-ring-block-size, + var(--spectrum-coach-indicator-ring-block-size) + ); + animation: var( + --mod-coach-indicator-animation-name, + var(--spectrum-coach-indicator-animation-name) + ) + var( + --mod-coach-animation-indicator-ring-duration, + var(--spectrum-coach-animation-indicator-ring-duration) + ) + linear infinite; + border-radius: 50%; + display: block; + position: absolute; + inset-block-start: var( + --mod-coach-indicator-top, + var(--spectrum-coach-indicator-top) + ); + inset-inline-start: var( + --mod-coach-indicator-left, + var(--spectrum-coach-indicator-left) + ); } .ring:first-child { - animation-delay: calc( - var( - --mod-coach-animation-indicator-ring-duration, - var(--spectrum-coach-animation-indicator-ring-duration) - ) * - var( - --mod-coach-indicator-inner-animation-delay-multiple, - var(--spectrum-coach-indicator-inner-animation-delay-multiple) - ) - ); + animation-delay: calc( + var( + --mod-coach-animation-indicator-ring-duration, + var(--spectrum-coach-animation-indicator-ring-duration) + ) * + var( + --mod-coach-indicator-inner-animation-delay-multiple, + var(--spectrum-coach-indicator-inner-animation-delay-multiple) + ) + ); } .ring:nth-child(2) { - animation-delay: calc( - var( - --mod-coach-animation-indicator-ring-duration, - var(--spectrum-coach-animation-indicator-ring-duration) - ) * - var( - --mod-coach-animation-indicator-ring-center-delay-multiple, - var( - --spectrum-coach-animation-indicator-ring-center-delay-multiple - ) - ) - ); + animation-delay: calc( + var( + --mod-coach-animation-indicator-ring-duration, + var(--spectrum-coach-animation-indicator-ring-duration) + ) * + var( + --mod-coach-animation-indicator-ring-center-delay-multiple, + var(--spectrum-coach-animation-indicator-ring-center-delay-multiple) + ) + ); } .ring:nth-child(3) { - animation-delay: calc( - var( - --mod-coach-animation-indicator-ring-duration, - var(--spectrum-coach-animation-indicator-ring-duration) - ) * - var( - --mod-coach-animation-indicator-ring-outer-delay-multiple, - var( - --spectrum-coach-animation-indicator-ring-outer-delay-multiple - ) - ) - ); + animation-delay: calc( + var( + --mod-coach-animation-indicator-ring-duration, + var(--spectrum-coach-animation-indicator-ring-duration) + ) * + var( + --mod-coach-animation-indicator-ring-outer-delay-multiple, + var(--spectrum-coach-animation-indicator-ring-outer-delay-multiple) + ) + ); } -:host([static-color='white']) .ring { - border-color: var( - --mod-coach-indicator-ring-light-color, - var(--spectrum-coach-indicator-ring-light-color) - ); +:host([static-color="white"]) .ring { + border-color: var( + --mod-coach-indicator-ring-light-color, + var(--spectrum-coach-indicator-ring-light-color) + ); } -:host([static-color='black']) .ring { - border-color: var( - --mod-coach-indicator-ring-dark-color, - var(--spectrum-coach-indicator-ring-dark-color) - ); +:host([static-color="black"]) .ring { + border-color: var( + --mod-coach-indicator-ring-dark-color, + var(--spectrum-coach-indicator-ring-dark-color) + ); } @media (prefers-reduced-motion: reduce) { - .ring { - animation: none; - } + .ring { + animation: none; + } } @keyframes pulse { - 0% { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-0-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); - } - - 50% { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-50-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); - } - - to { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-100-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); - } + 0% { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-0-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); + } + + 50% { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-50-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); + } + + to { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-100-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); + } } @keyframes pulse-quiet { - 0% { - transform: scale( - var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); - } - - 50% { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-50-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); - } - - to { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-100-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); - } + 0% { + transform: scale( + var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); + } + + 50% { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-50-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); + } + + to { + transform: scale( + var(--spectrum-coach-indicator-animation-keyframe-100-scale) + ); + opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); + } } diff --git a/packages/coachmark/src/spectrum-coachmark.css b/packages/coachmark/src/spectrum-coachmark.css index 99446e29b8..5a1096f582 100644 --- a/packages/coachmark/src/spectrum-coachmark.css +++ b/packages/coachmark/src/spectrum-coachmark.css @@ -12,228 +12,216 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-buttongroup-justify-content: flex-end; - --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width); - --mod-popover-corner-radius: var( - --spectrum-coachmark-popover-corner-radius - ); - --mod-popover-content-area-spacing-vertical: 0; - --mod-button-edge-to-visual-only: 9px; - --spectrum-coachmark-border-size: var(--mod-popover-border-width); - --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius); - min-inline-size: var( - --mod-coachmark-min-width, - var(--spectrum-coachmark-min-width) - ); - max-inline-size: var( - --mod-coachmark-max-width, - var(--spectrum-coachmark-max-width) - ); - inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width)); - position: relative; + --mod-buttongroup-justify-content: flex-end; + --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width); + --mod-popover-corner-radius: var(--spectrum-coachmark-popover-corner-radius); + --mod-popover-content-area-spacing-vertical: 0; + --mod-button-edge-to-visual-only: 9px; + --spectrum-coachmark-border-size: var(--mod-popover-border-width); + --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius); + min-inline-size: var( + --mod-coachmark-min-width, + var(--spectrum-coachmark-min-width) + ); + max-inline-size: var( + --mod-coachmark-max-width, + var(--spectrum-coachmark-max-width) + ); + inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width)); + position: relative; } .buttongroup { - display: var(--spectrum-coachmark-buttongroup-display); + display: var(--spectrum-coachmark-buttongroup-display); } .buttongroup-mobile { - --mod-buttongroup-spacing-horizontal: var( - --spectrum-coachmark-buttongroup-spacing-horizontal - ); - display: var(--spectrum-coachmark-buttongroup-mobile-display); + --mod-buttongroup-spacing-horizontal: var( + --spectrum-coachmark-buttongroup-spacing-horizontal + ); + display: var(--spectrum-coachmark-buttongroup-mobile-display); } .menu { - display: var(--spectrum-coachmark-menu-display); + display: var(--spectrum-coachmark-menu-display); } .spectrum-CoachMark-menu--mobile { - display: var(--spectrum-coachmark-menu-mobile-display); + display: var(--spectrum-coachmark-menu-mobile-display); } .image-wrapper { - block-size: var( - --mod-coachmark-media-height, - var(--spectrum-coachmark-media-height) - ); - min-block-size: var( - --mod-coachmark-media-min-height, - var(--spectrum-coachmark-media-min-height) - ); - inline-size: calc( - var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - - var( - --mod-coachmark-border-size, - var(--spectrum-coachmark-border-size) - ) * 2 - ); - object-fit: cover; - object-position: center; - border-start-start-radius: inherit; - border-start-end-radius: inherit; + block-size: var( + --mod-coachmark-media-height, + var(--spectrum-coachmark-media-height) + ); + min-block-size: var( + --mod-coachmark-media-min-height, + var(--spectrum-coachmark-media-min-height) + ); + inline-size: calc( + var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - + var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) * + 2 + ); + object-fit: cover; + object-position: center; + border-start-start-radius: inherit; + border-start-end-radius: inherit; } .image { - inline-size: 100%; - block-size: 100%; - object-fit: cover; - border-start-start-radius: calc( - var( - --mod-coachmark-border-radius, - var(--spectrum-coachmark-border-radius) - ) - - var( - --mod-coachmark-border-size, - var(--spectrum-coachmark-border-size) - ) - ); - border-start-end-radius: calc( - var( - --mod-coachmark-border-radius, - var(--spectrum-coachmark-border-radius) - ) - - var( - --mod-coachmark-border-size, - var(--spectrum-coachmark-border-size) - ) - ); - display: block; + inline-size: 100%; + block-size: 100%; + object-fit: cover; + border-start-start-radius: calc( + var( + --mod-coachmark-border-radius, + var(--spectrum-coachmark-border-radius) + ) - + var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) + ); + border-start-end-radius: calc( + var( + --mod-coachmark-border-radius, + var(--spectrum-coachmark-border-radius) + ) - + var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) + ); + display: block; } .content, .footer, .header { - padding-block: 0; - padding-inline: var( - --mod-coachmark-padding, - var(--spectrum-coachmark-padding) - ); + padding-block: 0; + padding-inline: var( + --mod-coachmark-padding, + var(--spectrum-coachmark-padding) + ); } .header { - justify-content: space-between; - align-items: center; - margin-block-end: var( - --mod-coachmark-header-to-body, - var(--spectrum-coachmark-header-to-body) - ); - padding-block-start: var( - --mod-coachmark-padding, - var(--spectrum-coachmark-padding) - ); - display: flex; + justify-content: space-between; + align-items: center; + margin-block-end: var( + --mod-coachmark-header-to-body, + var(--spectrum-coachmark-header-to-body) + ); + padding-block-start: var( + --mod-coachmark-padding, + var(--spectrum-coachmark-padding) + ); + display: flex; } .action-menu { - white-space: nowrap; - z-index: 1; - margin-inline-start: var( - --mod-coachmark-heading-to-action-button, - var(--spectrum-coachmark-heading-to-action-button) - ); + white-space: nowrap; + z-index: 1; + margin-inline-start: var( + --mod-coachmark-heading-to-action-button, + var(--spectrum-coachmark-heading-to-action-button) + ); } .content { - color: var( - --mod-coachmark-content-font-color, - var(--spectrum-coachmark-content-font-color) - ); - font-size: var( - --mod-coachmark-content-font-size, - var(--spectrum-coachmark-content-font-size) - ); - font-weight: var( - --mod-coachmark-content-font-weight, - var(--spectrum-coachmark-content-font-weight) - ); - font-family: var( - --mod-coachmark-content-font-family, - var(--spectrum-coachmark-content-font-family) - ); - font-style: var( - --mod-coachmark-content-font-style, - var(--spectrum-coachmark-content-font-style) - ); - line-height: var( - --mod-coachmark-content-line-height, - var(--spectrum-coachmark-content-line-height) - ); - margin-block-end: var( - --mod-coachmark-body-to-footer, - var(--spectrum-coachmark-body-to-footer) - ); + color: var( + --mod-coachmark-content-font-color, + var(--spectrum-coachmark-content-font-color) + ); + font-size: var( + --mod-coachmark-content-font-size, + var(--spectrum-coachmark-content-font-size) + ); + font-weight: var( + --mod-coachmark-content-font-weight, + var(--spectrum-coachmark-content-font-weight) + ); + font-family: var( + --mod-coachmark-content-font-family, + var(--spectrum-coachmark-content-font-family) + ); + font-style: var( + --mod-coachmark-content-font-style, + var(--spectrum-coachmark-content-font-style) + ); + line-height: var( + --mod-coachmark-content-line-height, + var(--spectrum-coachmark-content-line-height) + ); + margin-block-end: var( + --mod-coachmark-body-to-footer, + var(--spectrum-coachmark-body-to-footer) + ); } .footer { - align-items: end; - margin-block-start: 0; - padding-block-end: var( - --mod-coachmark-padding, - var(--spectrum-coachmark-padding) - ); - display: grid; + align-items: end; + margin-block-start: 0; + padding-block-end: var( + --mod-coachmark-padding, + var(--spectrum-coachmark-padding) + ); + display: grid; } .footer .spectrum-ButtonGroup { - grid-column-start: 2; + grid-column-start: 2; } .title { - color: var( - --mod-coachmark-title-color, - var(--spectrum-coachmark-title-color) - ); - font-size: var( - --mod-coachmark-title-font-size, - var(--spectrum-coachmark-title-font-size) - ); - font-weight: var( - --mod-coachmark-title-text-font-weight, - var(--spectrum-coachmark-title-text-font-weight) - ); - font-family: var( - --mod-coachmark-title-font-family, - var(--spectrum-coachmark-title-font-family) - ); - font-style: var( - --mod-coachmark-title-font-style, - var(--spectrum-coachmark-title-font-style) - ); - line-height: var( - --mod-coachmark-title-text-line-height, - var(--spectrum-coachmark-title-text-line-height) - ); - margin-block-end: 0; + color: var( + --mod-coachmark-title-color, + var(--spectrum-coachmark-title-color) + ); + font-size: var( + --mod-coachmark-title-font-size, + var(--spectrum-coachmark-title-font-size) + ); + font-weight: var( + --mod-coachmark-title-text-font-weight, + var(--spectrum-coachmark-title-text-font-weight) + ); + font-family: var( + --mod-coachmark-title-font-family, + var(--spectrum-coachmark-title-font-family) + ); + font-style: var( + --mod-coachmark-title-font-style, + var(--spectrum-coachmark-title-font-style) + ); + line-height: var( + --mod-coachmark-title-text-line-height, + var(--spectrum-coachmark-title-text-line-height) + ); + margin-block-end: 0; } .step { - color: var( - --mod-coachmark-step-color, - var(--spectrum-coachmark-step-color) - ); - font-size: var( - --mod-coachmark-step-font-size, - var(--spectrum-coachmark-step-font-size) - ); - font-weight: var( - --mod-coachmark-step-text-font-weight, - var(--spectrum-coachmark-step-text-font-weight) - ); - font-style: var( - --mod-coachmark-step-font-style, - var(--spectrum-coachmark-step-font-style) - ); - line-height: var( - --mod-coachmark-step-text-line-height, - var(--spectrum-coachmark-step-text-line-height) - ); - white-space: nowrap; - justify-self: start; - margin-block-end: calc( - var( - --mod-coachmark-step-to-bottom, - var(--spectrum-coachmark-step-to-bottom) - ) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)) - ); + color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color)); + font-size: var( + --mod-coachmark-step-font-size, + var(--spectrum-coachmark-step-font-size) + ); + font-weight: var( + --mod-coachmark-step-text-font-weight, + var(--spectrum-coachmark-step-text-font-weight) + ); + font-style: var( + --mod-coachmark-step-font-style, + var(--spectrum-coachmark-step-font-style) + ); + line-height: var( + --mod-coachmark-step-text-line-height, + var(--spectrum-coachmark-step-text-line-height) + ); + white-space: nowrap; + justify-self: start; + margin-block-end: calc( + var( + --mod-coachmark-step-to-bottom, + var(--spectrum-coachmark-step-to-bottom) + ) - + var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)) + ); } diff --git a/packages/color-area/src/color-area-overrides.css b/packages/color-area/src/color-area-overrides.css index 72129ea35e..1efbb9e75e 100644 --- a/packages/color-area/src/color-area-overrides.css +++ b/packages/color-area/src/color-area-overrides.css @@ -12,20 +12,20 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorarea-border-radius: var(--system-color-area-border-radius); - --spectrum-colorarea-border-color-rgb: var( - --system-color-area-border-color-rgb - ); - --spectrum-colorarea-border-color-opacity: var( - --system-color-area-border-color-opacity - ); - --spectrum-colorarea-border-color: var(--system-color-area-border-color); - --spectrum-colorarea-disabled-background-color: var( - --system-color-area-disabled-background-color - ); - --spectrum-colorarea-border-width: var(--system-color-area-border-width); - --spectrum-colorarea-height: var(--system-color-area-height); - --spectrum-colorarea-width: var(--system-color-area-width); - --spectrum-colorarea-min-width: var(--system-color-area-min-width); - --spectrum-colorarea-min-height: var(--system-color-area-min-height); + --spectrum-colorarea-border-radius: var(--system-color-area-border-radius); + --spectrum-colorarea-border-color-rgb: var( + --system-color-area-border-color-rgb + ); + --spectrum-colorarea-border-color-opacity: var( + --system-color-area-border-color-opacity + ); + --spectrum-colorarea-border-color: var(--system-color-area-border-color); + --spectrum-colorarea-disabled-background-color: var( + --system-color-area-disabled-background-color + ); + --spectrum-colorarea-border-width: var(--system-color-area-border-width); + --spectrum-colorarea-height: var(--system-color-area-height); + --spectrum-colorarea-width: var(--system-color-area-width); + --spectrum-colorarea-min-width: var(--system-color-area-min-width); + --spectrum-colorarea-min-height: var(--system-color-area-min-height); } diff --git a/packages/color-area/src/spectrum-color-area.css b/packages/color-area/src/spectrum-color-area.css index d176f5b7b6..8e05a891b9 100644 --- a/packages/color-area/src/spectrum-color-area.css +++ b/packages/color-area/src/spectrum-color-area.css @@ -12,109 +12,106 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-colorarea-border-color-disabled: GrayText; - --highcontrast-colorarea-border-color: Canvas; - --highcontrast-colorarea-fill-color-disabled: Canvas; - } + :host { + --highcontrast-colorarea-border-color-disabled: GrayText; + --highcontrast-colorarea-border-color: Canvas; + --highcontrast-colorarea-fill-color-disabled: Canvas; + } - .gradient, - :host([disabled]) { - forced-color-adjust: none; - } + .gradient, + :host([disabled]) { + forced-color-adjust: none; + } } :host { - cursor: default; - -webkit-user-select: none; - user-select: none; - min-inline-size: var( - --mod-colorarea-min-width, - var(--spectrum-colorarea-min-width) - ); - min-block-size: var( - --mod-colorarea-min-height, - var(--spectrum-colorarea-min-height) - ); - inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); - block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); - box-sizing: border-box; - border-radius: var( - --mod-colorarea-border-radius, - var(--spectrum-colorarea-border-radius) - ); - border: var( - --mod-colorarea-border-width, - var(--spectrum-colorarea-border-width) - ) - solid - var( - --highcontrast-colorarea-border-color, - var( - --mod-colorarea-border-color, - var(--spectrum-colorarea-border-color) - ) - ); - display: inline-block; - position: relative; + cursor: default; + -webkit-user-select: none; + user-select: none; + min-inline-size: var( + --mod-colorarea-min-width, + var(--spectrum-colorarea-min-width) + ); + min-block-size: var( + --mod-colorarea-min-height, + var(--spectrum-colorarea-min-height) + ); + inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); + block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); + box-sizing: border-box; + border-radius: var( + --mod-colorarea-border-radius, + var(--spectrum-colorarea-border-radius) + ); + border: var( + --mod-colorarea-border-width, + var(--spectrum-colorarea-border-width) + ) + solid + var( + --highcontrast-colorarea-border-color, + var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)) + ); + display: inline-block; + position: relative; } :host([focused]) { - z-index: 1; + z-index: 1; } :host([disabled]) { - pointer-events: none; - background: var( - --highcontrast-colorarea-fill-color-disabled, - var( - --mod-colorarea-disabled-background-color, - var(--spectrum-colorarea-disabled-background-color) - ) - ); - border: var( - --mod-colorarea-border-width, - var(--spectrum-colorarea-border-width) - ) - solid var(--highcontrast-colorarea-border-color-disabled); + pointer-events: none; + background: var( + --highcontrast-colorarea-fill-color-disabled, + var( + --mod-colorarea-disabled-background-color, + var(--spectrum-colorarea-disabled-background-color) + ) + ); + border: var( + --mod-colorarea-border-width, + var(--spectrum-colorarea-border-width) + ) + solid var(--highcontrast-colorarea-border-color-disabled); } :host([disabled]) .gradient { - display: none; + display: none; } .handle { - transform: translate( - calc( - var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - - var(--spectrum-colorarea-border-width) - ) - ); - inset-block-start: 0; + transform: translate( + calc( + var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - + var(--spectrum-colorarea-border-width) + ) + ); + inset-block-start: 0; } .handle:dir(rtl), -:host([dir='rtl']) .handle { - inset-inline-end: 0; +:host([dir="rtl"]) .handle { + inset-inline-end: 0; } .gradient { - inline-size: 100%; - block-size: 100%; - border-radius: var( - --mod-colorarea-border-radius, - var(--spectrum-colorarea-border-radius) - ); + inline-size: 100%; + block-size: 100%; + border-radius: var( + --mod-colorarea-border-radius, + var(--spectrum-colorarea-border-radius) + ); } .slider { - opacity: 0; - inline-size: 100%; - block-size: 100%; - z-index: 0; - pointer-events: none; - margin: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + opacity: 0; + inline-size: 100%; + block-size: 100%; + z-index: 0; + pointer-events: none; + margin: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } diff --git a/packages/color-handle/src/color-handle-overrides.css b/packages/color-handle/src/color-handle-overrides.css index 21f8e9ba06..35455b3c9b 100644 --- a/packages/color-handle/src/color-handle-overrides.css +++ b/packages/color-handle/src/color-handle-overrides.css @@ -12,41 +12,33 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorhandle-size: var(--system-color-handle-size); - --spectrum-colorhandle-focused-size: var( - --system-color-handle-focused-size - ); - --spectrum-colorhandle-hitarea-size: var( - --system-color-handle-hitarea-size - ); - --spectrum-colorhandle-animation-duration: var( - --system-color-handle-animation-duration - ); - --spectrum-colorhandle-animation-easing: var( - --system-color-handle-animation-easing - ); - --spectrum-colorhandle-outer-border-color: var( - --system-color-handle-outer-border-color - ); - --spectrum-colorhandle-outer-border-width: var( - --system-color-handle-outer-border-width - ); - --spectrum-colorhandle-inner-border-color: var( - --system-color-handle-inner-border-color - ); - --spectrum-colorhandle-inner-border-width: var( - --system-color-handle-inner-border-width - ); - --spectrum-colorhandle-border-width: var( - --system-color-handle-border-width - ); - --spectrum-colorhandle-border-color: var( - --system-color-handle-border-color - ); - --spectrum-colorhandle-border-color-disabled: var( - --system-color-handle-border-color-disabled - ); - --spectrum-colorhandle-fill-color-disabled: var( - --system-color-handle-fill-color-disabled - ); + --spectrum-colorhandle-size: var(--system-color-handle-size); + --spectrum-colorhandle-focused-size: var(--system-color-handle-focused-size); + --spectrum-colorhandle-hitarea-size: var(--system-color-handle-hitarea-size); + --spectrum-colorhandle-animation-duration: var( + --system-color-handle-animation-duration + ); + --spectrum-colorhandle-animation-easing: var( + --system-color-handle-animation-easing + ); + --spectrum-colorhandle-outer-border-color: var( + --system-color-handle-outer-border-color + ); + --spectrum-colorhandle-outer-border-width: var( + --system-color-handle-outer-border-width + ); + --spectrum-colorhandle-inner-border-color: var( + --system-color-handle-inner-border-color + ); + --spectrum-colorhandle-inner-border-width: var( + --system-color-handle-inner-border-width + ); + --spectrum-colorhandle-border-width: var(--system-color-handle-border-width); + --spectrum-colorhandle-border-color: var(--system-color-handle-border-color); + --spectrum-colorhandle-border-color-disabled: var( + --system-color-handle-border-color-disabled + ); + --spectrum-colorhandle-fill-color-disabled: var( + --system-color-handle-fill-color-disabled + ); } diff --git a/packages/color-handle/src/spectrum-color-handle.css b/packages/color-handle/src/spectrum-color-handle.css index 9ba6c9ad21..0bf621816b 100644 --- a/packages/color-handle/src/spectrum-color-handle.css +++ b/packages/color-handle/src/spectrum-color-handle.css @@ -12,148 +12,150 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-opacity-checkerboard-position: 50%; - z-index: 1; - box-sizing: border-box; - inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); - block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); - margin-inline: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1 - ); - margin-block: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1 - ); - border-width: var( - --mod-colorhandle-border-width, - var(--spectrum-colorhandle-border-width) - ); - border-color: var( - --highcontrast-colorhandle-border-color, - var( - --mod-colorhandle-border-color, - var(--spectrum-colorhandle-border-color) - ) - ); - box-shadow: 0 0 0 - var( - --mod-colorhandle-outer-border-width, - var(--spectrum-colorhandle-outer-border-width) - ) - var( - --mod-colorhandle-outer-border-color, - var(--spectrum-colorhandle-outer-border-color) - ); - transition: all - var( - --mod-colorhandle-animation-duration, - var(--spectrum-colorhandle-animation-duration) - ) - var( - --mod-colorhandle-animation-easing, - var(--spectrum-colorhandle-animation-easing) - ); - border-style: solid; + --mod-opacity-checkerboard-position: 50%; + z-index: 1; + box-sizing: border-box; + inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); + block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); + margin-inline: calc( + var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1 + ); + margin-block: calc( + var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1 + ); + border-width: var( + --mod-colorhandle-border-width, + var(--spectrum-colorhandle-border-width) + ); + border-color: var( + --highcontrast-colorhandle-border-color, + var( + --mod-colorhandle-border-color, + var(--spectrum-colorhandle-border-color) + ) + ); + box-shadow: 0 0 0 + var( + --mod-colorhandle-outer-border-width, + var(--spectrum-colorhandle-outer-border-width) + ) + var( + --mod-colorhandle-outer-border-color, + var(--spectrum-colorhandle-outer-border-color) + ); + transition: all + var( + --mod-colorhandle-animation-duration, + var(--spectrum-colorhandle-animation-duration) + ) + var( + --mod-colorhandle-animation-easing, + var(--spectrum-colorhandle-animation-easing) + ); + border-style: solid; } :host, :host:after { - border-radius: 100%; - display: block; - position: absolute; + border-radius: 100%; + display: block; + position: absolute; } :host:after { - content: ''; - inset-inline: calc( - 50% - - var( - --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) - ) / 2 - ); - inset-block: calc( - 50% - - var( - --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) - ) / 2 - ); - inline-size: var( - --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) - ); - block-size: var( - --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) - ); - border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%); + content: ""; + inset-inline: calc( + 50% - + var( + --mod-colorhandle-hitarea-size, + var(--spectrum-colorhandle-hitarea-size) + ) / + 2 + ); + inset-block: calc( + 50% - + var( + --mod-colorhandle-hitarea-size, + var(--spectrum-colorhandle-hitarea-size) + ) / + 2 + ); + inline-size: var( + --mod-colorhandle-hitarea-size, + var(--spectrum-colorhandle-hitarea-size) + ); + block-size: var( + --mod-colorhandle-hitarea-size, + var(--spectrum-colorhandle-hitarea-size) + ); + border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%); } :host([focused]), :host(:focus-visible) { - inline-size: var( - --mod-colorhandle-focused-size, - var(--spectrum-colorhandle-focused-size) - ); - block-size: var( - --mod-colorhandle-focused-size, - var(--spectrum-colorhandle-focused-size) - ); - margin-inline: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 - ); - margin-block: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 - ); - outline: none; + inline-size: var( + --mod-colorhandle-focused-size, + var(--spectrum-colorhandle-focused-size) + ); + block-size: var( + --mod-colorhandle-focused-size, + var(--spectrum-colorhandle-focused-size) + ); + margin-inline: calc( + var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 + ); + margin-block: calc( + var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 + ); + outline: none; } :host([disabled]) { - pointer-events: none; - border-color: var( - --highcontrast-colorhandle-border-color-disabled, - var( - --mod-colorhandle-border-color-disabled, - var(--spectrum-colorhandle-border-color-disabled) - ) - ); - background: var( - --highcontrast-colorhandle-fill-color-disabled, - var( - --mod-colorhandle-fill-color-disabled, - var(--spectrum-colorhandle-fill-color-disabled) - ) - ); - box-shadow: none; + pointer-events: none; + border-color: var( + --highcontrast-colorhandle-border-color-disabled, + var( + --mod-colorhandle-border-color-disabled, + var(--spectrum-colorhandle-border-color-disabled) + ) + ); + background: var( + --highcontrast-colorhandle-fill-color-disabled, + var( + --mod-colorhandle-fill-color-disabled, + var(--spectrum-colorhandle-fill-color-disabled) + ) + ); + box-shadow: none; } :host([disabled]) .inner { - display: none; + display: none; } .inner { - inline-size: 100%; - block-size: 100%; - box-shadow: inset 0 0 0 - var( - --mod-colorhandle-inner-border-width, - var(--spectrum-colorhandle-inner-border-width) - ) - var( - --mod-colorhandle-inner-border-color, - var(--spectrum-colorhandle-inner-border-color) - ); - background-color: var(--spectrum-picked-color); - border-radius: 100%; + inline-size: 100%; + block-size: 100%; + box-shadow: inset 0 0 0 + var( + --mod-colorhandle-inner-border-width, + var(--spectrum-colorhandle-inner-border-width) + ) + var( + --mod-colorhandle-inner-border-color, + var(--spectrum-colorhandle-inner-border-color) + ); + background-color: var(--spectrum-picked-color); + border-radius: 100%; } @media (forced-colors: active) { - :host { - forced-color-adjust: none; - } + :host { + forced-color-adjust: none; + } - :host([disabled]) { - --highcontrast-colorhandle-border-color-disabled: GrayText; - --highcontrast-colorhandle-fill-color-disabled: Canvas; - } + :host([disabled]) { + --highcontrast-colorhandle-border-color-disabled: GrayText; + --highcontrast-colorhandle-fill-color-disabled: Canvas; + } } diff --git a/packages/color-loupe/src/color-loupe-overrides.css b/packages/color-loupe/src/color-loupe-overrides.css index 824f355e97..1bef517596 100644 --- a/packages/color-loupe/src/color-loupe-overrides.css +++ b/packages/color-loupe/src/color-loupe-overrides.css @@ -12,40 +12,36 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorloupe-width: var(--system-color-loupe-width); - --spectrum-colorloupe-height: var(--system-color-loupe-height); - --spectrum-colorloupe-offset: var(--system-color-loupe-offset); - --spectrum-colorloupe-animation-distance: var( - --system-color-loupe-animation-distance - ); - --spectrum-colorloupe-drop-shadow-x: var( - --system-color-loupe-drop-shadow-x - ); - --spectrum-colorloupe-drop-shadow-y: var( - --system-color-loupe-drop-shadow-y - ); - --spectrum-colorloupe-drop-shadow-blur: var( - --system-color-loupe-drop-shadow-blur - ); - --spectrum-colorloupe-drop-shadow-color: var( - --system-color-loupe-drop-shadow-color - ); - --spectrum-colorloupe-outer-border-width: var( - --system-color-loupe-outer-border-width - ); - --spectrum-colorloupe-inner-border-width: var( - --system-color-loupe-inner-border-width - ); - --spectrum-colorloupe-outer-border-color: var( - --system-color-loupe-outer-border-color - ); - --spectrum-colorloupe-inner-border-color: var( - --system-color-loupe-inner-border-color - ); - --spectrum-colorloupe-checkerboard-dark-color: var( - --system-color-loupe-checkerboard-dark-color - ); - --spectrum-colorloupe-checkerboard-light-color: var( - --system-color-loupe-checkerboard-light-color - ); + --spectrum-colorloupe-width: var(--system-color-loupe-width); + --spectrum-colorloupe-height: var(--system-color-loupe-height); + --spectrum-colorloupe-offset: var(--system-color-loupe-offset); + --spectrum-colorloupe-animation-distance: var( + --system-color-loupe-animation-distance + ); + --spectrum-colorloupe-drop-shadow-x: var(--system-color-loupe-drop-shadow-x); + --spectrum-colorloupe-drop-shadow-y: var(--system-color-loupe-drop-shadow-y); + --spectrum-colorloupe-drop-shadow-blur: var( + --system-color-loupe-drop-shadow-blur + ); + --spectrum-colorloupe-drop-shadow-color: var( + --system-color-loupe-drop-shadow-color + ); + --spectrum-colorloupe-outer-border-width: var( + --system-color-loupe-outer-border-width + ); + --spectrum-colorloupe-inner-border-width: var( + --system-color-loupe-inner-border-width + ); + --spectrum-colorloupe-outer-border-color: var( + --system-color-loupe-outer-border-color + ); + --spectrum-colorloupe-inner-border-color: var( + --system-color-loupe-inner-border-color + ); + --spectrum-colorloupe-checkerboard-dark-color: var( + --system-color-loupe-checkerboard-dark-color + ); + --spectrum-colorloupe-checkerboard-light-color: var( + --system-color-loupe-checkerboard-light-color + ); } diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/packages/color-loupe/src/spectrum-color-loupe.css index 2bac5afc52..2950ec3d58 100644 --- a/packages/color-loupe/src/spectrum-color-loupe.css +++ b/packages/color-loupe/src/spectrum-color-loupe.css @@ -12,100 +12,101 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - inline-size: var(--spectrum-colorloupe-width); - block-size: var(--spectrum-colorloupe-height); - transform: translateY( - var( - --mod-colorloupe-animation-distance, - var(--spectrum-colorloupe-animation-distance) - ) - ); - opacity: 0; - transform-origin: bottom; - pointer-events: none; - filter: drop-shadow( - var( - --mod-colorloupe-drop-shadow-x, - var(--spectrum-colorloupe-drop-shadow-x) - ) - var( - --mod-colorloupe-drop-shadow-y, - var(--spectrum-colorloupe-drop-shadow-y) - ) - var( - --mod-colorloupe-drop-shadow-blur, - var(--spectrum-colorloupe-drop-shadow-blur) - ) - var( - --mod-colorloupe-drop-shadow-color, - var(--spectrum-colorloupe-drop-shadow-color) - ) - ); - transition: - transform 0.1s ease-in-out, - opacity 0.125s ease-in-out; - position: absolute; - inset-block-end: calc( - var(--spectrum-color-handle-size) - - var(--spectrum-color-handle-outer-border-width) + - var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)) - ); - inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2); + inline-size: var(--spectrum-colorloupe-width); + block-size: var(--spectrum-colorloupe-height); + transform: translateY( + var( + --mod-colorloupe-animation-distance, + var(--spectrum-colorloupe-animation-distance) + ) + ); + opacity: 0; + transform-origin: bottom; + pointer-events: none; + filter: drop-shadow( + var( + --mod-colorloupe-drop-shadow-x, + var(--spectrum-colorloupe-drop-shadow-x) + ) + var( + --mod-colorloupe-drop-shadow-y, + var(--spectrum-colorloupe-drop-shadow-y) + ) + var( + --mod-colorloupe-drop-shadow-blur, + var(--spectrum-colorloupe-drop-shadow-blur) + ) + var( + --mod-colorloupe-drop-shadow-color, + var(--spectrum-colorloupe-drop-shadow-color) + ) + ); + transition: + transform 0.1s ease-in-out, + opacity 0.125s ease-in-out; + position: absolute; + inset-block-end: calc( + var(--spectrum-color-handle-size) - + var(--spectrum-color-handle-outer-border-width) + + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)) + ); + inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2); } :host:dir(rtl), -:host([dir='rtl']) { - inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2 - 1px); +:host([dir="rtl"]) { + inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2 - 1px); } :host([open]) { - opacity: 1; - transform: translate(0); + opacity: 1; + transform: translate(0); } .spectrum-ColorLoupe-inner-border { - fill: var(--spectrum-picked-color); - stroke: var( - --mod-colorloupe-inner-border-color, - var(--spectrum-colorloupe-inner-border-color) - ); - stroke-width: var( - --mod-colorloupe-inner-border-width, - var(--spectrum-colorloupe-inner-border-width) - ); + fill: var(--spectrum-picked-color); + stroke: var( + --mod-colorloupe-inner-border-color, + var(--spectrum-colorloupe-inner-border-color) + ); + stroke-width: var( + --mod-colorloupe-inner-border-width, + var(--spectrum-colorloupe-inner-border-width) + ); } .spectrum-ColorLoupe-outer-border { - fill: none; - stroke: var( - --highcontrast-colorloupe-outer-border-color, - var( - --mod-colorloupe-outer-border-color, - var(--spectrum-colorloupe-outer-border-color) - ) - ); - stroke-width: calc( - var( - --mod-colorloupe-outer-border-width, - var(--spectrum-colorloupe-outer-border-width) - ) + 2px - ); + fill: none; + stroke: var( + --highcontrast-colorloupe-outer-border-color, + var( + --mod-colorloupe-outer-border-color, + var(--spectrum-colorloupe-outer-border-color) + ) + ); + stroke-width: calc( + var( + --mod-colorloupe-outer-border-width, + var(--spectrum-colorloupe-outer-border-width) + ) + + 2px + ); } .spectrum-ColorLoupe-checkerboard-pattern { - fill: var(--spectrum-colorloupe-checkerboard-dark-color); + fill: var(--spectrum-colorloupe-checkerboard-dark-color); } .spectrum-ColorLoupe-checkerboard-background { - fill: var(--spectrum-colorloupe-checkerboard-light-color); + fill: var(--spectrum-colorloupe-checkerboard-light-color); } .spectrum-ColorLoupe-checkerboard-fill { - fill: var(--spectrum-colorloupe-checkerboard-fill); + fill: var(--spectrum-colorloupe-checkerboard-fill); } @media (forced-colors: active) { - :host { - --highcontrast-colorloupe-outer-border-color: CanvasText; - } + :host { + --highcontrast-colorloupe-outer-border-color: CanvasText; + } } diff --git a/packages/color-slider/src/color-slider-overrides.css b/packages/color-slider/src/color-slider-overrides.css index 57a61af7b2..b18baca2e9 100644 --- a/packages/color-slider/src/color-slider-overrides.css +++ b/packages/color-slider/src/color-slider-overrides.css @@ -12,19 +12,19 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-color-slider-handle-margin-block: var( - --system-color-slider-handle-margin-block - ); - --spectrum-color-slider-border-color-rgba: var( - --system-color-slider-border-color-rgba - ); - --spectrum-color-slider-checkerboard-size: var( - --system-color-slider-checkerboard-size - ); - --spectrum-color-slider-checkerboard-dark-color: var( - --system-color-slider-checkerboard-dark-color - ); - --spectrum-color-slider-checkerboard-light-color: var( - --system-color-slider-checkerboard-light-color - ); + --spectrum-color-slider-handle-margin-block: var( + --system-color-slider-handle-margin-block + ); + --spectrum-color-slider-border-color-rgba: var( + --system-color-slider-border-color-rgba + ); + --spectrum-color-slider-checkerboard-size: var( + --system-color-slider-checkerboard-size + ); + --spectrum-color-slider-checkerboard-dark-color: var( + --system-color-slider-checkerboard-dark-color + ); + --spectrum-color-slider-checkerboard-light-color: var( + --system-color-slider-checkerboard-light-color + ); } diff --git a/packages/color-slider/src/spectrum-color-slider.css b/packages/color-slider/src/spectrum-color-slider.css index ec2a9d54b1..051fa59f79 100644 --- a/packages/color-slider/src/spectrum-color-slider.css +++ b/packages/color-slider/src/spectrum-color-slider.css @@ -12,150 +12,150 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-color-slider-border-color: CanvasText; - --highcontrast-color-slider-border-color-disabled: GrayText; - --highcontrast-color-slider-background-color-disabled: Canvas; - forced-color-adjust: none; - } + :host { + --highcontrast-color-slider-border-color: CanvasText; + --highcontrast-color-slider-border-color-disabled: GrayText; + --highcontrast-color-slider-background-color-disabled: Canvas; + forced-color-adjust: none; + } } :host { - --mod-colorhandle-hitarea-border-radius: var( - --mod-color-slider-handle-hitarea-border-radius, - 0px - ); - min-inline-size: var( - --mod-color-slider-minimum-length, - var(--spectrum-color-slider-minimum-length) - ); - inline-size: var( - --mod-color-slider-length, - var(--spectrum-color-slider-length) - ); - block-size: var( - --mod-color-slider-control-track-width, - var(--spectrum-color-control-track-width) - ); - -webkit-user-select: none; - user-select: none; - cursor: default; - display: block; - position: relative; + --mod-colorhandle-hitarea-border-radius: var( + --mod-color-slider-handle-hitarea-border-radius, + 0px + ); + min-inline-size: var( + --mod-color-slider-minimum-length, + var(--spectrum-color-slider-minimum-length) + ); + inline-size: var( + --mod-color-slider-length, + var(--spectrum-color-slider-length) + ); + block-size: var( + --mod-color-slider-control-track-width, + var(--spectrum-color-control-track-width) + ); + -webkit-user-select: none; + user-select: none; + cursor: default; + display: block; + position: relative; } :host([focused]) { - z-index: 2; + z-index: 2; } :host([disabled]) { - pointer-events: none; + pointer-events: none; } :host([disabled]) .gradient { - display: none; + display: none; } :host([vertical]) { - min-block-size: var( - --mod-color-slider-vertical-minimum-height, - var( - --mod-color-slider-minimum-length, - var(--spectrum-color-slider-minimum-length) - ) - ); - block-size: var( - --mod-color-slider-vertical-height, - var(--mod-color-slider-length, var(--spectrum-color-slider-length)) - ); - min-inline-size: 0; - inline-size: var( - --mod-color-slider-vertical-control-track-width, - var( - --mod-color-slider-control-track-height, - var(--spectrum-color-control-track-width) - ) - ); - display: inline-block; + min-block-size: var( + --mod-color-slider-vertical-minimum-height, + var( + --mod-color-slider-minimum-length, + var(--spectrum-color-slider-minimum-length) + ) + ); + block-size: var( + --mod-color-slider-vertical-height, + var(--mod-color-slider-length, var(--spectrum-color-slider-length)) + ); + min-inline-size: 0; + inline-size: var( + --mod-color-slider-vertical-control-track-width, + var( + --mod-color-slider-control-track-height, + var(--spectrum-color-control-track-width) + ) + ); + display: inline-block; } :host([vertical]) .handle { - inset-block-start: 0; - inset-inline-start: 50%; + inset-block-start: 0; + inset-inline-start: 50%; } .handle { - inset-block-start: 50%; - inset-inline-start: 0; + inset-block-start: 50%; + inset-inline-start: 0; } .checkerboard { - --spectrum-color-slider-border-color-local: var( - --highcontrast-color-slider-border-color, - var( - --mod-color-slider-border-color, - var(--spectrum-color-slider-border-color-rgba) - ) - ); + --spectrum-color-slider-border-color-local: var( + --highcontrast-color-slider-border-color, + var( + --mod-color-slider-border-color, + var(--spectrum-color-slider-border-color-rgba) + ) + ); } .checkerboard:before { - content: ''; - z-index: 1; - box-shadow: inset 0 0 0 - var( - --mod-color-slider-border-width, - var(--spectrum-color-slider-border-width) - ) - var(--spectrum-color-slider-border-color-local); - border-radius: var( - --mod-color-slider-border-rounding, - var(--spectrum-color-slider-border-rounding) - ); - position: absolute; - inset: 0; + content: ""; + z-index: 1; + box-shadow: inset 0 0 0 + var( + --mod-color-slider-border-width, + var(--spectrum-color-slider-border-width) + ) + var(--spectrum-color-slider-border-color-local); + border-radius: var( + --mod-color-slider-border-rounding, + var(--spectrum-color-slider-border-rounding) + ); + position: absolute; + inset: 0; } :host([disabled]) .checkerboard { - --spectrum-color-slider-border-color-local: var( - --highcontrast-color-slider-border-color-disabled, - var( - --mod-color-slider-border-color-disabled, - var(--spectrum-disabled-background-color) - ) - ); - background: var( - --highcontrast-color-slider-background-color-disabled, - var( - --mod-color-slider-background-color-disabled, - var(--spectrum-disabled-background-color) - ) - ); + --spectrum-color-slider-border-color-local: var( + --highcontrast-color-slider-border-color-disabled, + var( + --mod-color-slider-border-color-disabled, + var(--spectrum-disabled-background-color) + ) + ); + background: var( + --highcontrast-color-slider-background-color-disabled, + var( + --mod-color-slider-background-color-disabled, + var(--spectrum-disabled-background-color) + ) + ); } .checkerboard, .gradient { - inline-size: 100%; - block-size: 100%; - border-radius: var( - --mod-color-slider-border-rounding, - var(--spectrum-color-slider-border-rounding) - ); + inline-size: 100%; + block-size: 100%; + border-radius: var( + --mod-color-slider-border-rounding, + var(--spectrum-color-slider-border-rounding) + ); } .gradient:dir(rtl), -:host([dir='rtl']) .gradient { - transform: scaleX(-1); +:host([dir="rtl"]) .gradient { + transform: scaleX(-1); } .slider { - opacity: 0; - inline-size: 100%; - block-size: 100%; - z-index: 0; - pointer-events: none; - margin: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + opacity: 0; + inline-size: 100%; + block-size: 100%; + z-index: 0; + pointer-events: none; + margin: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } diff --git a/packages/color-wheel/src/color-wheel-overrides.css b/packages/color-wheel/src/color-wheel-overrides.css index c438c4fb56..4367c8338c 100644 --- a/packages/color-wheel/src/color-wheel-overrides.css +++ b/packages/color-wheel/src/color-wheel-overrides.css @@ -12,19 +12,19 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorwheel-width: var(--system-color-wheel-width); - --spectrum-colorwheel-min-width: var(--system-color-wheel-min-width); - --spectrum-colorwheel-height: var(--system-color-wheel-height); - --spectrum-colorwheel-border-color: var(--system-color-wheel-border-color); - --spectrum-colorwheel-border-width: var(--system-color-wheel-border-width); - --spectrum-colorwheel-fill-color-disabled: var( - --system-color-wheel-fill-color-disabled - ); - --spectrum-colorwheel-track-width: var(--system-color-wheel-track-width); - --spectrum-colorwheel-colorarea-margin: var( - --system-color-wheel-colorarea-margin - ); - --spectrum-colorwheel-colorhandle-position: var( - --system-color-wheel-colorhandle-position - ); + --spectrum-colorwheel-width: var(--system-color-wheel-width); + --spectrum-colorwheel-min-width: var(--system-color-wheel-min-width); + --spectrum-colorwheel-height: var(--system-color-wheel-height); + --spectrum-colorwheel-border-color: var(--system-color-wheel-border-color); + --spectrum-colorwheel-border-width: var(--system-color-wheel-border-width); + --spectrum-colorwheel-fill-color-disabled: var( + --system-color-wheel-fill-color-disabled + ); + --spectrum-colorwheel-track-width: var(--system-color-wheel-track-width); + --spectrum-colorwheel-colorarea-margin: var( + --system-color-wheel-colorarea-margin + ); + --spectrum-colorwheel-colorhandle-position: var( + --system-color-wheel-colorhandle-position + ); } diff --git a/packages/color-wheel/src/spectrum-color-wheel.css b/packages/color-wheel/src/spectrum-color-wheel.css index 3a3d9ffb04..f2a0ba35a9 100644 --- a/packages/color-wheel/src/spectrum-color-wheel.css +++ b/packages/color-wheel/src/spectrum-color-wheel.css @@ -12,153 +12,150 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-colorwheel-border-color-disabled: GrayText; - --highcontrast-colorwheel-fill-color-disabled: Canvas; - forced-color-adjust: none; - } + :host { + --highcontrast-colorwheel-border-color-disabled: GrayText; + --highcontrast-colorwheel-fill-color-disabled: Canvas; + forced-color-adjust: none; + } } :host { - --_track-width: var( - --mod-colorwheel-track-width, - var(--spectrum-colorwheel-track-width) - ); - --_border-width: var( - --mod-colorwheel-border-width, - var(--spectrum-colorwheel-border-width) - ); - min-inline-size: var( - --mod-colorwheel-min-width, - var(--spectrum-colorwheel-min-width) - ); - inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); - block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); - -webkit-user-select: none; - user-select: none; - cursor: default; - display: block; - position: relative; + --_track-width: var( + --mod-colorwheel-track-width, + var(--spectrum-colorwheel-track-width) + ); + --_border-width: var( + --mod-colorwheel-border-width, + var(--spectrum-colorwheel-border-width) + ); + min-inline-size: var( + --mod-colorwheel-min-width, + var(--spectrum-colorwheel-min-width) + ); + inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); + block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); + -webkit-user-select: none; + user-select: none; + cursor: default; + display: block; + position: relative; } :host([focused]) { - z-index: 1; + z-index: 1; } :host([disabled]) { - pointer-events: none; + pointer-events: none; } :host([dragged]) { - z-index: 1; + z-index: 1; } .inner { - inline-size: var( - --mod-colorwheel-colorarea-container-size, - var(--spectrum-colorwheel-colorarea-container-size) - ); - block-size: var( - --mod-colorwheel-colorarea-container-size, - var(--spectrum-colorwheel-colorarea-container-size) - ); - margin: auto; - display: flex; - position: absolute; - inset-block: 0; - inset-inline: 0; + inline-size: var( + --mod-colorwheel-colorarea-container-size, + var(--spectrum-colorwheel-colorarea-container-size) + ); + block-size: var( + --mod-colorwheel-colorarea-container-size, + var(--spectrum-colorwheel-colorarea-container-size) + ); + margin: auto; + display: flex; + position: absolute; + inset-block: 0; + inset-inline: 0; } .colorarea-container { - block-size: auto; - inline-size: 100%; - margin: var( - --mod-colorwheel-colorarea-margin, - var(--spectrum-colorwheel-colorarea-margin) - ); - justify-content: center; - align-items: center; - display: flex; + block-size: auto; + inline-size: 100%; + margin: var( + --mod-colorwheel-colorarea-margin, + var(--spectrum-colorwheel-colorarea-margin) + ); + justify-content: center; + align-items: center; + display: flex; } .slider { - opacity: 0; - inline-size: 100%; - block-size: 100%; - z-index: 0; - pointer-events: none; - margin: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + opacity: 0; + inline-size: 100%; + block-size: 100%; + z-index: 0; + pointer-events: none; + margin: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } .handle { - transform: translate(var(--spectrum-colorwheel-colorhandle-position)); - inset-block-start: 50%; - inset-inline: 50%; + transform: translate(var(--spectrum-colorwheel-colorhandle-position)); + inset-block-start: 50%; + inset-inline: 50%; } .border { - background-color: var( - --mod-colorwheel-border-color, - var(--spectrum-colorwheel-border-color) - ); - inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); - block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); - clip-path: path( - evenodd, - var( - --mod-colorwheel-path-borders, - var(--spectrum-colorwheel-path-borders) - ) - ); - position: relative; + background-color: var( + --mod-colorwheel-border-color, + var(--spectrum-colorwheel-border-color) + ); + inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); + block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); + clip-path: path( + evenodd, + var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders)) + ); + position: relative; } :host([disabled]) .border { - background-color: var( - --highcontrast-colorwheel-border-color-disabled, - var( - --mod-colorwheel-fill-color-disabled, - var(--spectrum-colorwheel-fill-color-disabled) - ) - ); + background-color: var( + --highcontrast-colorwheel-border-color-disabled, + var( + --mod-colorwheel-fill-color-disabled, + var(--spectrum-colorwheel-fill-color-disabled) + ) + ); } .wheel { - inset-block: var(--spectrum-colorwheel-border-width); - inset-inline: var(--spectrum-colorwheel-border-width); - clip-path: path( - evenodd, - var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)) - ); - background: conic-gradient( - from 90deg, - red, - #ff8000, - #ff0, - #80ff00, - #0f0, - #00ff80, - #0ff, - #0080ff, - #00f, - #8000ff, - #f0f, - #ff0080, - red - ); - position: absolute; + inset-block: var(--spectrum-colorwheel-border-width); + inset-inline: var(--spectrum-colorwheel-border-width); + clip-path: path( + evenodd, + var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)) + ); + background: conic-gradient( + from 90deg, + red, + #ff8000, + #ff0, + #80ff00, + #0f0, + #00ff80, + #0ff, + #0080ff, + #00f, + #8000ff, + #f0f, + #ff0080, + red + ); + position: absolute; } :host([disabled]) .wheel { - pointer-events: none; - background: var( - --highcontrast-colorwheel-fill-color-disabled, - var( - --mod-colorwheel-fill-color-disabled, - var(--spectrum-colorwheel-fill-color-disabled) - ) - ); + pointer-events: none; + background: var( + --highcontrast-colorwheel-fill-color-disabled, + var( + --mod-colorwheel-fill-color-disabled, + var(--spectrum-colorwheel-fill-color-disabled) + ) + ); } diff --git a/packages/combobox/src/combobox-overrides.css b/packages/combobox/src/combobox-overrides.css index 4d6df44f51..b28507634f 100644 --- a/packages/combobox/src/combobox-overrides.css +++ b/packages/combobox/src/combobox-overrides.css @@ -12,240 +12,240 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-combobox-border-color-default: var( - --system-combobox-border-color-default - ); - --spectrum-combobox-border-color-hover: var( - --system-combobox-border-color-hover - ); - --spectrum-combobox-border-color-focus: var( - --system-combobox-border-color-focus - ); - --spectrum-combobox-border-color-focus-hover: var( - --system-combobox-border-color-focus-hover - ); - --spectrum-combobox-border-color-key-focus: var( - --system-combobox-border-color-key-focus - ); - --spectrum-combobox-inline-size: var(--system-combobox-inline-size); - --spectrum-combobox-minimum-width-multiplier: var( - --system-combobox-minimum-width-multiplier - ); - --spectrum-combobox-focus-indicator-thickness: var( - --system-combobox-focus-indicator-thickness - ); - --spectrum-combobox-focus-indicator-gap: var( - --system-combobox-focus-indicator-gap - ); - --spectrum-combobox-focus-indicator-color: var( - --system-combobox-focus-indicator-color - ); - --spectrum-combobox-border-radius: var(--system-combobox-border-radius); - --spectrum-combobox-border-width: var(--system-combobox-border-width); - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-spacing-label-to - ); - --spectrum-combobox-font-style: var(--system-combobox-font-style); - --spectrum-combobox-line-height: var(--system-combobox-line-height); - --spectrum-combobox-border-color-invalid-default: var( - --system-combobox-border-color-invalid-default - ); - --spectrum-combobox-border-color-invalid-hover: var( - --system-combobox-border-color-invalid-hover - ); - --spectrum-combobox-border-color-invalid-focus: var( - --system-combobox-border-color-invalid-focus - ); - --spectrum-combobox-border-color-invalid-focus-hover: var( - --system-combobox-border-color-invalid-focus-hover - ); - --spectrum-combobox-border-color-invalid-key-focus: var( - --system-combobox-border-color-invalid-key-focus - ); - --spectrum-combobox-block-size: var(--system-combobox-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-spacing-inline-end-edge-to-text - ); + --spectrum-combobox-border-color-default: var( + --system-combobox-border-color-default + ); + --spectrum-combobox-border-color-hover: var( + --system-combobox-border-color-hover + ); + --spectrum-combobox-border-color-focus: var( + --system-combobox-border-color-focus + ); + --spectrum-combobox-border-color-focus-hover: var( + --system-combobox-border-color-focus-hover + ); + --spectrum-combobox-border-color-key-focus: var( + --system-combobox-border-color-key-focus + ); + --spectrum-combobox-inline-size: var(--system-combobox-inline-size); + --spectrum-combobox-minimum-width-multiplier: var( + --system-combobox-minimum-width-multiplier + ); + --spectrum-combobox-focus-indicator-thickness: var( + --system-combobox-focus-indicator-thickness + ); + --spectrum-combobox-focus-indicator-gap: var( + --system-combobox-focus-indicator-gap + ); + --spectrum-combobox-focus-indicator-color: var( + --system-combobox-focus-indicator-color + ); + --spectrum-combobox-border-radius: var(--system-combobox-border-radius); + --spectrum-combobox-border-width: var(--system-combobox-border-width); + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-spacing-label-to + ); + --spectrum-combobox-font-style: var(--system-combobox-font-style); + --spectrum-combobox-line-height: var(--system-combobox-line-height); + --spectrum-combobox-border-color-invalid-default: var( + --system-combobox-border-color-invalid-default + ); + --spectrum-combobox-border-color-invalid-hover: var( + --system-combobox-border-color-invalid-hover + ); + --spectrum-combobox-border-color-invalid-focus: var( + --system-combobox-border-color-invalid-focus + ); + --spectrum-combobox-border-color-invalid-focus-hover: var( + --system-combobox-border-color-invalid-focus-hover + ); + --spectrum-combobox-border-color-invalid-key-focus: var( + --system-combobox-border-color-invalid-key-focus + ); + --spectrum-combobox-block-size: var(--system-combobox-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-spacing-inline-end-edge-to-text + ); } -:host([size='s']) { - --spectrum-combobox-block-size: var(--system-combobox-size-s-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-s-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-s-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-s-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-s-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-s-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-s-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-s-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-s-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-s-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-s-spacing-inline-end-edge-to-text - ); +:host([size="s"]) { + --spectrum-combobox-block-size: var(--system-combobox-size-s-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-s-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-s-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-size-s-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-size-s-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-size-s-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-size-s-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-size-s-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-size-s-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-size-s-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-size-s-spacing-inline-end-edge-to-text + ); } :host { - --spectrum-combobox-block-size: var(--system-combobox-size-m-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-m-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-m-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-m-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-m-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-m-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-m-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-m-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-m-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-m-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-m-spacing-inline-end-edge-to-text - ); + --spectrum-combobox-block-size: var(--system-combobox-size-m-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-m-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-m-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-size-m-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-size-m-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-size-m-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-size-m-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-size-m-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-size-m-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-size-m-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-size-m-spacing-inline-end-edge-to-text + ); } -:host([size='l']) { - --spectrum-combobox-block-size: var(--system-combobox-size-l-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-l-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-l-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-l-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-l-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-l-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-l-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-l-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-l-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-l-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-l-spacing-inline-end-edge-to-text - ); +:host([size="l"]) { + --spectrum-combobox-block-size: var(--system-combobox-size-l-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-l-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-l-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-size-l-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-size-l-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-size-l-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-size-l-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-size-l-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-size-l-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-size-l-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-size-l-spacing-inline-end-edge-to-text + ); } -:host([size='xl']) { - --spectrum-combobox-block-size: var(--system-combobox-size-xl-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-xl-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-xl-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-xl-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-xl-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-xl-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-xl-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-xl-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-xl-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-xl-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-xl-spacing-inline-end-edge-to-text - ); +:host([size="xl"]) { + --spectrum-combobox-block-size: var(--system-combobox-size-xl-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-xl-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-xl-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-size-xl-spacing-inline-icon-to-button + ); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var( + --system-combobox-size-xl-block-spacing-edge-to-progress-circle + ); + --spectrum-combobox-block-spacing-edge-to-alert: var( + --system-combobox-size-xl-block-spacing-edge-to-alert + ); + --spectrum-combobox-spacing-edge-to-menu: var( + --system-combobox-size-xl-spacing-edge-to-menu + ); + --spectrum-combobox-spacing-block-start-edge-to-text: var( + --system-combobox-size-xl-spacing-block-start-edge-to-text + ); + --spectrum-combobox-spacing-block-end-edge-to-text: var( + --system-combobox-size-xl-spacing-block-end-edge-to-text + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-size-xl-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-inline-end-edge-to-text: var( + --system-combobox-size-xl-spacing-inline-end-edge-to-text + ); } :host([quiet]) { - --spectrum-combobox-minimum-width-multiplier: var( - --system-combobox-quiet-minimum-width-multiplier - ); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-quiet-spacing-inline-icon-to-button - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-quiet-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-spacing-label-to - ); + --spectrum-combobox-minimum-width-multiplier: var( + --system-combobox-quiet-minimum-width-multiplier + ); + --spectrum-combobox-spacing-inline-icon-to-button: var( + --system-combobox-quiet-spacing-inline-icon-to-button + ); + --spectrum-combobox-spacing-inline-start-edge-to-text: var( + --system-combobox-quiet-spacing-inline-start-edge-to-text + ); + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-spacing-label-to + ); } -:host([quiet][size='s']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-s-spacing-label-to - ); +:host([quiet][size="s"]) { + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-size-s-spacing-label-to + ); } :host([quiet]) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-m-spacing-label-to - ); + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-size-m-spacing-label-to + ); } -:host([quiet][size='l']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-l-spacing-label-to - ); +:host([quiet][size="l"]) { + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-size-l-spacing-label-to + ); } -:host([quiet][size='xl']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-xl-spacing-label-to - ); +:host([quiet][size="xl"]) { + --spectrum-combobox-spacing-label-to-combobox: var( + --system-combobox-quiet-size-xl-spacing-label-to + ); } diff --git a/packages/combobox/src/spectrum-combobox.css b/packages/combobox/src/spectrum-combobox.css index 7c2285c886..10db68d6b1 100644 --- a/packages/combobox/src/spectrum-combobox.css +++ b/packages/combobox/src/spectrum-combobox.css @@ -12,595 +12,550 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-combobox-border-color-highlight: Highlight; - --highcontrast-combobox-border-color-invalid: Highlight; - } - - .button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill { - forced-color-adjust: none; - } - - .button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon { - color: initial; - } + :host { + --highcontrast-combobox-border-color-highlight: Highlight; + --highcontrast-combobox-border-color-invalid: Highlight; + } + + .button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill { + forced-color-adjust: none; + } + + .button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon { + color: initial; + } } :host { - --spectrum-combobox-button-inline-offset: 0px; - --spectrum-combobox-min-inline-size: calc( - var(--spectrum-combobox-minimum-width-multiplier) * - var(--spectrum-combobox-block-size) - ); - --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); - --mod-textfield-focus-indicator-gap: var( - --mod-combobox-focus-indicator-gap, - var(--spectrum-combobox-focus-indicator-gap) - ); - --mod-textfield-focus-indicator-width: var( - --mod-combobox-focus-indicator-thickness, - var(--spectrum-combobox-focus-indicator-thickness) - ); - --mod-textfield-focus-indicator-color: var( - --mod-combobox-focus-indicator-color, - var(--spectrum-combobox-focus-indicator-color) - ); - --mod-textfield-background-color: var( - --mod-combobox-background-color-default - ); - --mod-textfield-background-color-disabled: var( - --mod-combobox-background-color-disabled - ); - --mod-textfield-font-family: var(--mod-combobox-font-family); - --mod-textfield-font-weight: var(--mod-combobox-font-weight); - --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); - --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); - --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); - --mod-textfield-text-color-focus-hover: var( - --mod-combobox-font-color-focus-hover - ); - --mod-textfield-text-color-keyboard-focus: var( - --mod-combobox-font-color-key-focus - ); - --mod-textfield-text-color-disabled: var( - --mod-combobox-font-color-disabled - ); - --mod-textfield-border-width: var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ); - --mod-textfield-border-color: var( - --mod-combobox-border-color-default, - var(--spectrum-combobox-border-color-default) - ); - --mod-textfield-border-color-disabled: var( - --mod-combobox-border-color-disabled - ); - --mod-textfield-border-color-focus: var( - --mod-combobox-border-color-focus, - var(--spectrum-combobox-border-color-focus) - ); - --mod-textfield-border-color-focus-hover: var( - --mod-combobox-border-color-focus-hover, - var(--spectrum-combobox-border-color-focus-hover) - ); - --mod-textfield-border-color-hover: var( - --mod-combobox-border-color-hover, - var(--spectrum-combobox-border-color-hover) - ); - --mod-textfield-border-color-keyboard-focus: var( - --mod-combobox-border-color-key-focus, - var(--spectrum-combobox-border-color-key-focus) - ); - --mod-textfield-border-color-invalid-default: var( - --mod-combobox-border-color-invalid-default, - var(--spectrum-combobox-border-color-invalid-default) - ); - --mod-textfield-border-color-invalid-hover: var( - --mod-combobox-border-color-invalid-hover, - var(--spectrum-combobox-border-color-invalid-hover) - ); - --mod-textfield-border-color-invalid-focus: var( - --mod-combobox-border-color-invalid-focus, - var(--spectrum-combobox-border-color-invalid-focus) - ); - --mod-textfield-border-color-invalid-focus-hover: var( - --mod-combobox-border-color-invalid-focus-hover, - var(--spectrum-combobox-border-color-invalid-focus-hover) - ); - --mod-textfield-border-color-invalid-keyboard-focus: var( - --mod-combobox-border-color-invalid-key-focus, - var(--spectrum-combobox-border-color-invalid-key-focus) - ); - --mod-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color); - --mod-picker-button-border-width: var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ); - --mod-picker-button-border-color: var( - --mod-combobox-border-color-default, - var(--spectrum-combobox-border-color-default) - ); - --mod-picker-button-background-color: var( - --mod-combobox-background-color-default - ); - --mod-picker-button-background-color-disabled: var( - --mod-combobox-background-color-disabled - ); - --mod-picker-button-font-color-disabled: var( - --mod-combobox-font-color-disabled - ); - inline-size: var( - --mod-combobox-inline-size, - var(--spectrum-combobox-inline-size) - ); - min-inline-size: var( - --mod-combobox-min-inline-size, - var(--spectrum-combobox-min-inline-size) - ); - block-size: var( - --mod-combobox-block-size, - var(--spectrum-combobox-block-size) - ); - border-radius: var( - --mod-combobox-border-radius, - var(--spectrum-combobox-border-radius) - ); - flex-flow: row; - margin-block-start: var( - --mod-combobox-spacing-label-to-combobox, - var(--spectrum-combobox-spacing-label-to-combobox) - ); - display: inline-flex; - position: relative; + --spectrum-combobox-button-inline-offset: 0px; + --spectrum-combobox-min-inline-size: calc( + var(--spectrum-combobox-minimum-width-multiplier) * + var(--spectrum-combobox-block-size) + ); + --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); + --mod-textfield-focus-indicator-gap: var( + --mod-combobox-focus-indicator-gap, + var(--spectrum-combobox-focus-indicator-gap) + ); + --mod-textfield-focus-indicator-width: var( + --mod-combobox-focus-indicator-thickness, + var(--spectrum-combobox-focus-indicator-thickness) + ); + --mod-textfield-focus-indicator-color: var( + --mod-combobox-focus-indicator-color, + var(--spectrum-combobox-focus-indicator-color) + ); + --mod-textfield-background-color: var( + --mod-combobox-background-color-default + ); + --mod-textfield-background-color-disabled: var( + --mod-combobox-background-color-disabled + ); + --mod-textfield-font-family: var(--mod-combobox-font-family); + --mod-textfield-font-weight: var(--mod-combobox-font-weight); + --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); + --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); + --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); + --mod-textfield-text-color-focus-hover: var( + --mod-combobox-font-color-focus-hover + ); + --mod-textfield-text-color-keyboard-focus: var( + --mod-combobox-font-color-key-focus + ); + --mod-textfield-text-color-disabled: var(--mod-combobox-font-color-disabled); + --mod-textfield-border-width: var( + --mod-combobox-border-width, + var(--spectrum-combobox-border-width) + ); + --mod-textfield-border-color: var( + --mod-combobox-border-color-default, + var(--spectrum-combobox-border-color-default) + ); + --mod-textfield-border-color-disabled: var( + --mod-combobox-border-color-disabled + ); + --mod-textfield-border-color-focus: var( + --mod-combobox-border-color-focus, + var(--spectrum-combobox-border-color-focus) + ); + --mod-textfield-border-color-focus-hover: var( + --mod-combobox-border-color-focus-hover, + var(--spectrum-combobox-border-color-focus-hover) + ); + --mod-textfield-border-color-hover: var( + --mod-combobox-border-color-hover, + var(--spectrum-combobox-border-color-hover) + ); + --mod-textfield-border-color-keyboard-focus: var( + --mod-combobox-border-color-key-focus, + var(--spectrum-combobox-border-color-key-focus) + ); + --mod-textfield-border-color-invalid-default: var( + --mod-combobox-border-color-invalid-default, + var(--spectrum-combobox-border-color-invalid-default) + ); + --mod-textfield-border-color-invalid-hover: var( + --mod-combobox-border-color-invalid-hover, + var(--spectrum-combobox-border-color-invalid-hover) + ); + --mod-textfield-border-color-invalid-focus: var( + --mod-combobox-border-color-invalid-focus, + var(--spectrum-combobox-border-color-invalid-focus) + ); + --mod-textfield-border-color-invalid-focus-hover: var( + --mod-combobox-border-color-invalid-focus-hover, + var(--spectrum-combobox-border-color-invalid-focus-hover) + ); + --mod-textfield-border-color-invalid-keyboard-focus: var( + --mod-combobox-border-color-invalid-key-focus, + var(--spectrum-combobox-border-color-invalid-key-focus) + ); + --mod-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color); + --mod-picker-button-border-width: var( + --mod-combobox-border-width, + var(--spectrum-combobox-border-width) + ); + --mod-picker-button-border-color: var( + --mod-combobox-border-color-default, + var(--spectrum-combobox-border-color-default) + ); + --mod-picker-button-background-color: var( + --mod-combobox-background-color-default + ); + --mod-picker-button-background-color-disabled: var( + --mod-combobox-background-color-disabled + ); + --mod-picker-button-font-color-disabled: var( + --mod-combobox-font-color-disabled + ); + inline-size: var( + --mod-combobox-inline-size, + var(--spectrum-combobox-inline-size) + ); + min-inline-size: var( + --mod-combobox-min-inline-size, + var(--spectrum-combobox-min-inline-size) + ); + block-size: var( + --mod-combobox-block-size, + var(--spectrum-combobox-block-size) + ); + border-radius: var( + --mod-combobox-border-radius, + var(--spectrum-combobox-border-radius) + ); + flex-flow: row; + margin-block-start: var( + --mod-combobox-spacing-label-to-combobox, + var(--spectrum-combobox-spacing-label-to-combobox) + ); + display: inline-flex; + position: relative; } .spectrum-Popover.is-open { - transform: translateY( - var( - --mod-combobox-spacing-edge-to-menu, - var(--spectrum-combobox-spacing-edge-to-menu) - ) - ); + transform: translateY( + var( + --mod-combobox-spacing-edge-to-menu, + var(--spectrum-combobox-spacing-edge-to-menu) + ) + ); } .progress-circle { - position: absolute; - inset-block-start: var( - --mod-combobox-block-spacing-edge-to-progress-circle, - var(--spectrum-combobox-block-spacing-edge-to-progress-circle) - ); - inset-block-end: var( - --mod-combobox-block-spacing-edge-to-alert, - var(--spectrum-combobox-block-spacing-edge-to-alert) - ); - inset-inline-end: calc( - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var( - --mod-combobox-button-width, - var(--spectrum-combobox-button-width) - ) - ); + position: absolute; + inset-block-start: var( + --mod-combobox-block-spacing-edge-to-progress-circle, + var(--spectrum-combobox-block-spacing-edge-to-progress-circle) + ); + inset-block-end: var( + --mod-combobox-block-spacing-edge-to-alert, + var(--spectrum-combobox-block-spacing-edge-to-alert) + ); + inset-inline-end: calc( + var( + --mod-combobox-spacing-inline-icon-to-button, + var(--spectrum-combobox-spacing-inline-icon-to-button) + ) + + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + ); } .progress-circle:dir(rtl), -:host([dir='rtl']) .progress-circle { - inset-inline-start: calc( - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var( - --mod-combobox-button-width, - var(--spectrum-combobox-button-width) - ) - ); - inset-inline-end: inherit; +:host([dir="rtl"]) .progress-circle { + inset-inline-start: calc( + var( + --mod-combobox-spacing-inline-icon-to-button, + var(--spectrum-combobox-spacing-inline-icon-to-button) + ) + + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + ); + inset-inline-end: inherit; } .button { - position: absolute; - inset-inline-end: calc( - var( - --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) - ) * -1 - ); + position: absolute; + inset-inline-end: calc( + var( + --mod-combobox-button-inline-offset, + var(--spectrum-combobox-button-inline-offset) + ) * + -1 + ); } .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --mod-combobox-border-color-default, - var(--spectrum-combobox-border-color-default) - ); + --mod-picker-button-border-color: var( + --mod-combobox-border-color-default, + var(--spectrum-combobox-border-color-default) + ); } :host([focused]) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), + .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), .button:not(:disabled, .is-invalid, [quiet]):focus, :host([focused]) .button:not(:disabled, .is-invalid, [quiet]), :host:has(:focus) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-highlight, - var( - --mod-combobox-border-color-focus, - var(--spectrum-combobox-border-color-focus) - ) - ); + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-highlight, + var( + --mod-combobox-border-color-focus, + var(--spectrum-combobox-border-color-focus) + ) + ); } :host([keyboard-focused]) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), + .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), .button:not(:disabled, .is-invalid, [quiet]):focus-visible, :host([keyboard-focused]) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --mod-combobox-border-color-key-focus, - var(--spectrum-combobox-border-color-key-focus) - ); + --mod-picker-button-border-color: var( + --mod-combobox-border-color-key-focus, + var(--spectrum-combobox-border-color-key-focus) + ); } .button:not(:disabled, .is-invalid, [quiet]):active, :host:has(:active) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-highlight, - var( - --mod-combobox-border-color-hover, - var(--spectrum-combobox-border-color-hover) - ) - ); + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-highlight, + var( + --mod-combobox-border-color-hover, + var(--spectrum-combobox-border-color-hover) + ) + ); } :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-default, - var(--spectrum-combobox-border-color-invalid-default) - ) - ); + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-invalid, + var( + --mod-combobox-border-color-invalid-default, + var(--spectrum-combobox-border-color-invalid-default) + ) + ); } :host([invalid][focused]) .button:not(:disabled, .spectrum-PickerButton--quiet), :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):focus, :host([focused][invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet), :host([invalid]):has(:focus) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-focus, - var(--spectrum-combobox-border-color-invalid-focus) - ) - ); + .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-invalid, + var( + --mod-combobox-border-color-invalid-focus, + var(--spectrum-combobox-border-color-invalid-focus) + ) + ); } :host([invalid][keyboard-focused]) - .button:not(:disabled, .spectrum-PickerButton--quiet), + .button:not(:disabled, .spectrum-PickerButton--quiet), :host([invalid]) - .button:not(:disabled, .spectrum-PickerButton--quiet):focus-visible, + .button:not(:disabled, .spectrum-PickerButton--quiet):focus-visible, :host([keyboard-focused][invalid]) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-key-focus, - var(--spectrum-combobox-border-color-invalid-key-focus) - ) - ); + .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-invalid, + var( + --mod-combobox-border-color-invalid-key-focus, + var(--spectrum-combobox-border-color-invalid-key-focus) + ) + ); } :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):active, :host([invalid]):has(:active) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-hover, - var(--spectrum-combobox-border-color-invalid-hover) - ) - ); + .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-invalid, + var( + --mod-combobox-border-color-invalid-hover, + var(--spectrum-combobox-border-color-invalid-hover) + ) + ); } #textfield { - inline-size: 100%; + inline-size: 100%; } #input { - backface-visibility: hidden; - line-height: var( - --mod-combobox-line-height, - var(--spectrum-combobox-line-height) - ); - font-size: var( - --mod-combobox-font-size, - var(--spectrum-combobox-font-size) - ); - font-style: var( - --mod-combobox-font-style, - var(--spectrum-combobox-font-style) - ); - padding-block-start: calc( - var( - --mod-combobox-spacing-block-start-edge-to-text, - var(--spectrum-combobox-spacing-block-start-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) - ); - padding-block-end: calc( - var( - --mod-combobox-spacing-block-end-edge-to-text, - var(--spectrum-combobox-spacing-block-end-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) - ); - padding-inline-start: calc( - var( - --mod-combobox-spacing-inline-start-edge-to-text, - var(--spectrum-combobox-spacing-inline-start-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) - ); - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var( - --mod-combobox-spacing-inline-end-edge-to-text, - var(--spectrum-combobox-spacing-inline-end-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) * 2 - ); + backface-visibility: hidden; + line-height: var( + --mod-combobox-line-height, + var(--spectrum-combobox-line-height) + ); + font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size)); + font-style: var( + --mod-combobox-font-style, + var(--spectrum-combobox-font-style) + ); + padding-block-start: calc( + var( + --mod-combobox-spacing-block-start-edge-to-text, + var(--spectrum-combobox-spacing-block-start-edge-to-text) + ) - + var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) + ); + padding-block-end: calc( + var( + --mod-combobox-spacing-block-end-edge-to-text, + var(--spectrum-combobox-spacing-block-end-edge-to-text) + ) - + var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) + ); + padding-inline-start: calc( + var( + --mod-combobox-spacing-inline-start-edge-to-text, + var(--spectrum-combobox-spacing-inline-start-edge-to-text) + ) - + var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) + ); + padding-inline-end: calc( + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + + var( + --mod-combobox-spacing-inline-end-edge-to-text, + var(--spectrum-combobox-spacing-inline-end-edge-to-text) + ) - + var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * + 2 + ); } #input::placeholder { - --mod-textfield-text-color-default: var( - --mod-combobox-font-color-placeholder - ); + --mod-textfield-text-color-default: var( + --mod-combobox-font-color-placeholder + ); } #input:active { - --mod-textfield-background-color: var( - --mod-combobox-background-color-hover - ); + --mod-textfield-background-color: var(--mod-combobox-background-color-hover); } #input:focus, :host([focused]) #textfield #input { - --mod-textfield-background-color: var( - --mod-combobox-background-color-focus - ); + --mod-textfield-background-color: var(--mod-combobox-background-color-focus); } @media (hover: hover) { - .button:not(:disabled, .is-invalid, [quiet]):hover, - :host(:hover) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-highlight, - var( - --mod-combobox-border-color-hover, - var(--spectrum-combobox-border-color-hover) - ) - ); - } - - :host([focused]) - .button:not( - :disabled, - .is-invalid, - .spectrum-PickerButton--quiet - ):hover, - .button:not(:disabled, .is-invalid, [quiet]):focus:hover, - :host([focused]:hover) .button:not(:disabled, .is-invalid, [quiet]), - :host(:hover):has(:focus) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-highlight, - var( - --mod-combobox-border-color-focus-hover, - var(--spectrum-combobox-border-color-focus-hover) - ) - ); - } - - :host([invalid]) - .button:not(:disabled, .spectrum-PickerButton--quiet):hover, - :host([invalid]:hover) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-hover, - var(--spectrum-combobox-border-color-invalid-hover) - ) - ); - } - - :host([invalid][focused]) - .button:not(:disabled, .spectrum-PickerButton--quiet):hover, - :host([invalid]) - .button:not(:disabled, .spectrum-PickerButton--quiet):focus:hover, - :host([focused][invalid]:hover) - .button:not(:disabled, .spectrum-PickerButton--quiet), - :host([invalid]:hover):has(:focus) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-focus-hover, - var(--spectrum-combobox-border-color-invalid-focus-hover) - ) - ); - } - - #input:hover, - #textfield:hover #input { - --mod-textfield-background-color: var( - --mod-combobox-background-color-hover - ); - } - - #input:focus:hover, - :host([focused]) #textfield #input:hover { - --mod-textfield-background-color: var( - --mod-combobox-background-color-focus-hover - ); - } + .button:not(:disabled, .is-invalid, [quiet]):hover, + :host(:hover) .button:not(:disabled, .is-invalid, [quiet]) { + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-highlight, + var( + --mod-combobox-border-color-hover, + var(--spectrum-combobox-border-color-hover) + ) + ); + } + + :host([focused]) + .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover, + .button:not(:disabled, .is-invalid, [quiet]):focus:hover, + :host([focused]:hover) .button:not(:disabled, .is-invalid, [quiet]), + :host(:hover):has(:focus) .button:not(:disabled, .is-invalid, [quiet]) { + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-highlight, + var( + --mod-combobox-border-color-focus-hover, + var(--spectrum-combobox-border-color-focus-hover) + ) + ); + } + + :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):hover, + :host([invalid]:hover) .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-invalid, + var( + --mod-combobox-border-color-invalid-hover, + var(--spectrum-combobox-border-color-invalid-hover) + ) + ); + } + + :host([invalid][focused]) + .button:not(:disabled, .spectrum-PickerButton--quiet):hover, + :host([invalid]) + .button:not(:disabled, .spectrum-PickerButton--quiet):focus:hover, + :host([focused][invalid]:hover) + .button:not(:disabled, .spectrum-PickerButton--quiet), + :host([invalid]:hover):has(:focus) + .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var( + --highcontrast-combobox-border-color-invalid, + var( + --mod-combobox-border-color-invalid-focus-hover, + var(--spectrum-combobox-border-color-invalid-focus-hover) + ) + ); + } + + #input:hover, + #textfield:hover #input { + --mod-textfield-background-color: var( + --mod-combobox-background-color-hover + ); + } + + #input:focus:hover, + :host([focused]) #textfield #input:hover { + --mod-textfield-background-color: var( + --mod-combobox-background-color-focus-hover + ); + } } :host([keyboard-focused]) #textfield #input { - --mod-textfield-background-color: var( - --mod-combobox-background-color-key-focus - ); + --mod-textfield-background-color: var( + --mod-combobox-background-color-key-focus + ); } :host([invalid]) #textfield #input, :host([pending]) #textfield #input { - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + - var( - --mod-combobox-spacing-inline-end-edge-to-text, - var(--spectrum-combobox-spacing-inline-end-edge-to-text) - ) - - var( - --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) * 2 - ); + padding-inline-end: calc( + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + + var( + --mod-combobox-spacing-inline-icon-to-button, + var(--spectrum-combobox-spacing-inline-icon-to-button) + ) + + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + + var( + --mod-combobox-spacing-inline-end-edge-to-text, + var(--spectrum-combobox-spacing-inline-end-edge-to-text) + ) - + var( + --mod-combobox-button-inline-offset, + var(--spectrum-combobox-button-inline-offset) + ) - + var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * + 2 + ); } :host([invalid]) #textfield .icon { - inline-size: var( - --mod-combobox-icon-size, - var(--spectrum-combobox-icon-size) - ); - block-size: var( - --mod-combobox-icon-size, - var(--spectrum-combobox-icon-size) - ); - inset-block-start: var( - --mod-combobox-block-spacing-edge-to-alert, - var(--spectrum-combobox-block-spacing-edge-to-alert) - ); - inset-block-end: var( - --mod-combobox-block-spacing-edge-to-alert, - var(--spectrum-combobox-block-spacing-edge-to-alert) - ); - inset-inline-end: calc( - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var( - --mod-combobox-button-width, - var(--spectrum-combobox-button-width) - ) - ); + inline-size: var( + --mod-combobox-icon-size, + var(--spectrum-combobox-icon-size) + ); + block-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); + inset-block-start: var( + --mod-combobox-block-spacing-edge-to-alert, + var(--spectrum-combobox-block-spacing-edge-to-alert) + ); + inset-block-end: var( + --mod-combobox-block-spacing-edge-to-alert, + var(--spectrum-combobox-block-spacing-edge-to-alert) + ); + inset-inline-end: calc( + var( + --mod-combobox-spacing-inline-icon-to-button, + var(--spectrum-combobox-spacing-inline-icon-to-button) + ) + + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + ); } :host([disabled]) #textfield .icon, :host([pending]) #textfield .icon, #textfield.is-readOnly .icon { - display: none; + display: none; } :host([quiet]) { - --spectrum-combobox-min-inline-size: calc( - var(--spectrum-combobox-minimum-width-multiplier) * - var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) - ); - --spectrum-combobox-button-inline-offset: calc( - var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2 - - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / - 2 - ); - --spectrum-combobox-border-radius: 0; - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; - --mod-picker-button-border-color: var( - --mod-picker-button-border-color-quiet - ); + --spectrum-combobox-min-inline-size: calc( + var(--spectrum-combobox-minimum-width-multiplier) * + var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) + ); + --spectrum-combobox-button-inline-offset: calc( + var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2 - + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2 + ); + --spectrum-combobox-border-radius: 0; + --mod-picker-button-background-color-quiet: transparent; + --mod-picker-button-border-color-quiet: transparent; + --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet); } :host([quiet][invalid]) #textfield .icon { - inset-inline-end: var( - --mod-combobox-button-width, - var(--spectrum-combobox-button-width) - ); + inset-inline-end: var( + --mod-combobox-button-width, + var(--spectrum-combobox-button-width) + ); } :host([quiet]) #input { - border-block-end-width: var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ); - padding-block-start: var( - --mod-combobox-spacing-block-start-edge-to-text, - var(--spectrum-combobox-spacing-block-start-edge-to-text) - ); - padding-block-end: calc( - var( - --mod-combobox-spacing-block-end-edge-to-text, - var(--spectrum-combobox-spacing-block-end-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) - ); - padding-inline-start: var( - --mod-combobox-spacing-inline-start-edge-to-text, - var(--spectrum-combobox-spacing-inline-start-edge-to-text) - ); - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var( - --mod-combobox-spacing-inline-end-edge-to-text, - var(--spectrum-combobox-spacing-inline-end-edge-to-text) - ) - - var( - --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) - ) - ); + border-block-end-width: var( + --mod-combobox-border-width, + var(--spectrum-combobox-border-width) + ); + padding-block-start: var( + --mod-combobox-spacing-block-start-edge-to-text, + var(--spectrum-combobox-spacing-block-start-edge-to-text) + ); + padding-block-end: calc( + var( + --mod-combobox-spacing-block-end-edge-to-text, + var(--spectrum-combobox-spacing-block-end-edge-to-text) + ) - + var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) + ); + padding-inline-start: var( + --mod-combobox-spacing-inline-start-edge-to-text, + var(--spectrum-combobox-spacing-inline-start-edge-to-text) + ); + padding-inline-end: calc( + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + + var( + --mod-combobox-spacing-inline-end-edge-to-text, + var(--spectrum-combobox-spacing-inline-end-edge-to-text) + ) - + var( + --mod-combobox-button-inline-offset, + var(--spectrum-combobox-button-inline-offset) + ) + ); } :host([quiet][invalid]) #textfield #input, :host([quiet][pending]) #textfield #input { - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + - var( - --mod-combobox-spacing-inline-end-edge-to-text, - var(--spectrum-combobox-spacing-inline-end-edge-to-text) - ) - - var( - --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) - ) - ); + padding-inline-end: calc( + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + + var( + --mod-combobox-spacing-inline-icon-to-button, + var(--spectrum-combobox-spacing-inline-icon-to-button) + ) + + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + + var( + --mod-combobox-spacing-inline-end-edge-to-text, + var(--spectrum-combobox-spacing-inline-end-edge-to-text) + ) - + var( + --mod-combobox-button-inline-offset, + var(--spectrum-combobox-button-inline-offset) + ) + ); } diff --git a/packages/contextual-help/src/contextual-help-overrides.css b/packages/contextual-help/src/contextual-help-overrides.css index e57911a638..987dd0ebf9 100644 --- a/packages/contextual-help/src/contextual-help-overrides.css +++ b/packages/contextual-help/src/contextual-help-overrides.css @@ -12,20 +12,20 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-contextual-help-padding: var(--system-contextual-help-padding); - --spectrum-contextual-help-content-spacing: var( - --system-contextual-help-content-spacing - ); - --spectrum-contextual-help-link-spacing: var( - --system-contextual-help-link-spacing - ); - --spectrum-contextual-help-heading-size: var( - --system-contextual-help-heading-size - ); - --spectrum-contextual-help-heading-color: var( - --system-contextual-help-heading-color - ); - --spectrum-contextual-help-body-color: var( - --system-contextual-help-body-color - ); + --spectrum-contextual-help-padding: var(--system-contextual-help-padding); + --spectrum-contextual-help-content-spacing: var( + --system-contextual-help-content-spacing + ); + --spectrum-contextual-help-link-spacing: var( + --system-contextual-help-link-spacing + ); + --spectrum-contextual-help-heading-size: var( + --system-contextual-help-heading-size + ); + --spectrum-contextual-help-heading-color: var( + --system-contextual-help-heading-color + ); + --spectrum-contextual-help-body-color: var( + --system-contextual-help-body-color + ); } diff --git a/packages/contextual-help/src/spectrum-contextual-help.css b/packages/contextual-help/src/spectrum-contextual-help.css index 76b2ff53b2..65f663c954 100644 --- a/packages/contextual-help/src/spectrum-contextual-help.css +++ b/packages/contextual-help/src/spectrum-contextual-help.css @@ -12,65 +12,65 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .popover { - min-inline-size: var( - --mod-spectrum-contextual-help-minimum-width, - var(--spectrum-contextual-help-minimum-width) - ); - padding-block: var( - --mod-spectrum-contextual-help-padding, - var(--spectrum-contextual-help-padding) - ); - padding-inline: var( - --mod-spectrum-contextual-help-padding, - var(--spectrum-contextual-help-padding) - ); - font-size: var( - --mod-spectrum-contextual-help-body-size, - var(--spectrum-contextual-help-body-size) - ); - color: var( - --highcontrast-contextual-help-body-color, - var( - --mod-contextual-help-body-color, - var(--spectrum-contextual-help-body-color) - ) - ); - position: relative; + min-inline-size: var( + --mod-spectrum-contextual-help-minimum-width, + var(--spectrum-contextual-help-minimum-width) + ); + padding-block: var( + --mod-spectrum-contextual-help-padding, + var(--spectrum-contextual-help-padding) + ); + padding-inline: var( + --mod-spectrum-contextual-help-padding, + var(--spectrum-contextual-help-padding) + ); + font-size: var( + --mod-spectrum-contextual-help-body-size, + var(--spectrum-contextual-help-body-size) + ); + color: var( + --highcontrast-contextual-help-body-color, + var( + --mod-contextual-help-body-color, + var(--spectrum-contextual-help-body-color) + ) + ); + position: relative; } .popover .body, -.popover ::slotted([slot='heading']) { - margin: 0; +.popover ::slotted([slot="heading"]) { + margin: 0; } -.popover ::slotted([slot='heading']) { - font-size: var( - --mod-spectrum-contextual-help-heading-size, - var(--spectrum-contextual-help-heading-size) - ); - color: var( - --highcontrast-contextual-help-heading-color, - var( - --mod-contextual-help-heading-color, - var(--spectrum-contextual-help-heading-color) - ) - ); - margin-block-end: var( - --mod-spectrum-contextual-help-content-spacing, - var(--spectrum-contextual-help-content-spacing) - ); +.popover ::slotted([slot="heading"]) { + font-size: var( + --mod-spectrum-contextual-help-heading-size, + var(--spectrum-contextual-help-heading-size) + ); + color: var( + --highcontrast-contextual-help-heading-color, + var( + --mod-contextual-help-heading-color, + var(--spectrum-contextual-help-heading-color) + ) + ); + margin-block-end: var( + --mod-spectrum-contextual-help-content-spacing, + var(--spectrum-contextual-help-content-spacing) + ); } -::slotted([slot='link']) { - margin-block-start: var( - --mod-spectrum-contextual-help-link-spacing, - var(--spectrum-contextual-help-link-spacing) - ); +::slotted([slot="link"]) { + margin-block-start: var( + --mod-spectrum-contextual-help-link-spacing, + var(--spectrum-contextual-help-link-spacing) + ); } @media (forced-colors: active) { - :host { - --highcontrast-contextual-help-heading-color: CanvasText; - --highcontrast-contextual-help-body-color: CanvasText; - } + :host { + --highcontrast-contextual-help-heading-color: CanvasText; + --highcontrast-contextual-help-body-color: CanvasText; + } } diff --git a/packages/dialog/src/dialog-overrides.css b/packages/dialog/src/dialog-overrides.css index 23ba2c79b7..634419ce67 100644 --- a/packages/dialog/src/dialog-overrides.css +++ b/packages/dialog/src/dialog-overrides.css @@ -12,60 +12,60 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-dialog-fullscreen-header-text-size: var( - --system-dialog-fullscreen-header-text-size - ); - --spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size); - --spectrum-dialog-confirm-small-width: var( - --system-dialog-confirm-small-width - ); - --spectrum-dialog-confirm-medium-width: var( - --system-dialog-confirm-medium-width - ); - --spectrum-dialog-confirm-large-width: var( - --system-dialog-confirm-large-width - ); - --spectrum-dialog-confirm-divider-block-spacing-start: var( - --system-dialog-confirm-divider-block-spacing-start - ); - --spectrum-dialog-confirm-divider-block-spacing-end: var( - --system-dialog-confirm-divider-block-spacing-end - ); - --spectrum-dialog-confirm-description-text-color: var( - --system-dialog-confirm-description-text-color - ); - --spectrum-dialog-confirm-title-text-color: var( - --system-dialog-confirm-title-text-color - ); - --spectrum-dialog-confirm-description-text-line-height: var( - --system-dialog-confirm-description-text-line-height - ); - --spectrum-dialog-confirm-title-text-line-height: var( - --system-dialog-confirm-title-text-line-height - ); - --spectrum-dialog-heading-font-weight: var( - --system-dialog-heading-font-weight - ); - --spectrum-dialog-confirm-description-padding: var( - --system-dialog-confirm-description-padding - ); - --spectrum-dialog-confirm-description-margin: var( - --system-dialog-confirm-description-margin - ); - --spectrum-dialog-confirm-footer-padding-top: var( - --system-dialog-confirm-footer-padding-top - ); - --spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size); - --spectrum-dialog-confirm-buttongroup-padding-top: var( - --system-dialog-confirm-buttongroup-padding-top - ); - --spectrum-dialog-confirm-close-button-size: var( - --system-dialog-confirm-close-button-size - ); - --spectrum-dialog-confirm-close-button-padding: var( - --system-dialog-confirm-close-button-padding - ); - --spectrum-dialog-confirm-divider-height: var( - --system-dialog-confirm-divider-height - ); + --spectrum-dialog-fullscreen-header-text-size: var( + --system-dialog-fullscreen-header-text-size + ); + --spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size); + --spectrum-dialog-confirm-small-width: var( + --system-dialog-confirm-small-width + ); + --spectrum-dialog-confirm-medium-width: var( + --system-dialog-confirm-medium-width + ); + --spectrum-dialog-confirm-large-width: var( + --system-dialog-confirm-large-width + ); + --spectrum-dialog-confirm-divider-block-spacing-start: var( + --system-dialog-confirm-divider-block-spacing-start + ); + --spectrum-dialog-confirm-divider-block-spacing-end: var( + --system-dialog-confirm-divider-block-spacing-end + ); + --spectrum-dialog-confirm-description-text-color: var( + --system-dialog-confirm-description-text-color + ); + --spectrum-dialog-confirm-title-text-color: var( + --system-dialog-confirm-title-text-color + ); + --spectrum-dialog-confirm-description-text-line-height: var( + --system-dialog-confirm-description-text-line-height + ); + --spectrum-dialog-confirm-title-text-line-height: var( + --system-dialog-confirm-title-text-line-height + ); + --spectrum-dialog-heading-font-weight: var( + --system-dialog-heading-font-weight + ); + --spectrum-dialog-confirm-description-padding: var( + --system-dialog-confirm-description-padding + ); + --spectrum-dialog-confirm-description-margin: var( + --system-dialog-confirm-description-margin + ); + --spectrum-dialog-confirm-footer-padding-top: var( + --system-dialog-confirm-footer-padding-top + ); + --spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size); + --spectrum-dialog-confirm-buttongroup-padding-top: var( + --system-dialog-confirm-buttongroup-padding-top + ); + --spectrum-dialog-confirm-close-button-size: var( + --system-dialog-confirm-close-button-size + ); + --spectrum-dialog-confirm-close-button-padding: var( + --system-dialog-confirm-close-button-padding + ); + --spectrum-dialog-confirm-divider-height: var( + --system-dialog-confirm-divider-height + ); } diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index c72787b882..c15f368635 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -12,494 +12,502 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - inline-size: fit-content; - min-inline-size: var( - --mod-dialog-min-inline-size, - var(--spectrum-dialog-min-inline-size) - ); - max-inline-size: 100%; - max-block-size: inherit; - outline: none; - display: flex; -} - -:host([size='s']) { - inline-size: var( - --mod-dialog-confirm-small-width, - var(--spectrum-dialog-confirm-small-width) - ); -} - -:host([size='m']) { - inline-size: var( - --mod-dialog-confirm-medium-width, - var(--spectrum-dialog-confirm-medium-width) - ); -} - -:host([size='l']) { - inline-size: var( - --mod-dialog-confirm-large-width, - var(--spectrum-dialog-confirm-large-width) - ); -} - -::slotted([slot='hero']) { - block-size: var( - --mod-dialog-confirm-hero-height, - var(--spectrum-dialog-confirm-hero-height) - ); - background-position: 50%; - background-size: cover; - border-start-start-radius: var( - --mod-dialog-confirm-border-radius, - var(--spectrum-dialog-confirm-border-radius) - ); - border-start-end-radius: var( - --mod-dialog-confirm-border-radius, - var(--spectrum-dialog-confirm-border-radius) - ); - grid-area: hero; - overflow: hidden; + box-sizing: border-box; + inline-size: fit-content; + min-inline-size: var( + --mod-dialog-min-inline-size, + var(--spectrum-dialog-min-inline-size) + ); + max-inline-size: 100%; + max-block-size: inherit; + outline: none; + display: flex; +} + +:host([size="s"]) { + inline-size: var( + --mod-dialog-confirm-small-width, + var(--spectrum-dialog-confirm-small-width) + ); +} + +:host([size="m"]) { + inline-size: var( + --mod-dialog-confirm-medium-width, + var(--spectrum-dialog-confirm-medium-width) + ); +} + +:host([size="l"]) { + inline-size: var( + --mod-dialog-confirm-large-width, + var(--spectrum-dialog-confirm-large-width) + ); +} + +::slotted([slot="hero"]) { + block-size: var( + --mod-dialog-confirm-hero-height, + var(--spectrum-dialog-confirm-hero-height) + ); + background-position: 50%; + background-size: cover; + border-start-start-radius: var( + --mod-dialog-confirm-border-radius, + var(--spectrum-dialog-confirm-border-radius) + ); + border-start-end-radius: var( + --mod-dialog-confirm-border-radius, + var(--spectrum-dialog-confirm-border-radius) + ); + grid-area: hero; + overflow: hidden; } .grid { - grid-template-columns: - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-areas: - 'hero hero hero hero hero hero' - '. . . . . .' - '. heading header header header .' - '. divider divider divider divider .' - '. content content content content .' - '. footer footer buttonGroup buttonGroup .' - '. . . . . .'; - grid-template-rows: - auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - inline-size: 100%; - display: grid; -} - -::slotted([slot='heading']) { - font-size: var( - --mod-dialog-confirm-title-text-size, - var(--spectrum-dialog-confirm-title-text-size) - ); - font-weight: var( - --mod-dialog-heading-font-weight, - var(--spectrum-dialog-heading-font-weight) - ); - line-height: var( - --mod-dialog-confirm-title-text-line-height, - var(--spectrum-dialog-confirm-title-text-line-height) - ); - color: var( - --mod-dialog-confirm-title-text-color, - var(--spectrum-dialog-confirm-title-text-color) - ); - outline: none; - grid-area: heading; - margin: 0; - padding-inline-end: var( - --mod-dialog-confirm-gap-size, - var(--spectrum-dialog-confirm-gap-size) - ); -} - -.no-header::slotted([slot='heading']) { - grid-area: heading-start / heading-start / header-end / header-end; - padding-inline-end: 0; + grid-template-columns: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto 1fr auto minmax(0, auto) var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-areas: + "hero hero hero hero hero hero" + ". . . . . ." + ". heading header header header ." + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; + grid-template-rows: + auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + inline-size: 100%; + display: grid; +} + +::slotted([slot="heading"]) { + font-size: var( + --mod-dialog-confirm-title-text-size, + var(--spectrum-dialog-confirm-title-text-size) + ); + font-weight: var( + --mod-dialog-heading-font-weight, + var(--spectrum-dialog-heading-font-weight) + ); + line-height: var( + --mod-dialog-confirm-title-text-line-height, + var(--spectrum-dialog-confirm-title-text-line-height) + ); + color: var( + --mod-dialog-confirm-title-text-color, + var(--spectrum-dialog-confirm-title-text-color) + ); + outline: none; + grid-area: heading; + margin: 0; + padding-inline-end: var( + --mod-dialog-confirm-gap-size, + var(--spectrum-dialog-confirm-gap-size) + ); +} + +.no-header::slotted([slot="heading"]) { + grid-area: heading-start / heading-start / header-end / header-end; + padding-inline-end: 0; } .header { - box-sizing: border-box; - outline: none; - grid-area: header; - justify-content: flex-end; - align-items: center; - display: flex; + box-sizing: border-box; + outline: none; + grid-area: header; + justify-content: flex-end; + align-items: center; + display: flex; } .divider { - inline-size: 100%; - grid-area: divider; - margin-block-start: var( - --mod-dialog-confirm-divider-block-spacing-end, - var(--spectrum-dialog-confirm-divider-block-spacing-end) - ); - margin-block-end: var( - --mod-dialog-confirm-divider-block-spacing-start, - var(--spectrum-dialog-confirm-divider-block-spacing-start) - ); -} - -:host([mode='fullscreen']) [name='heading'] + .divider { - margin-block-end: calc( - var( - --mod-dialog-confirm-divider-block-spacing-start, - var(--spectrum-dialog-confirm-divider-block-spacing-start) - ) - - var( - --mod-dialog-confirm-description-padding, - var(--spectrum-dialog-confirm-description-padding) - ) * 2 - ); + inline-size: 100%; + grid-area: divider; + margin-block-start: var( + --mod-dialog-confirm-divider-block-spacing-end, + var(--spectrum-dialog-confirm-divider-block-spacing-end) + ); + margin-block-end: var( + --mod-dialog-confirm-divider-block-spacing-start, + var(--spectrum-dialog-confirm-divider-block-spacing-start) + ); +} + +:host([mode="fullscreen"]) [name="heading"] + .divider { + margin-block-end: calc( + var( + --mod-dialog-confirm-divider-block-spacing-start, + var(--spectrum-dialog-confirm-divider-block-spacing-start) + ) - + var( + --mod-dialog-confirm-description-padding, + var(--spectrum-dialog-confirm-description-padding) + ) * + 2 + ); } :host([no-divider]) .divider { - display: none; -} - -:host([no-divider]) ::slotted([slot='heading']) { - padding-block-end: calc( - var( - --mod-dialog-confirm-divider-block-spacing-end, - var(--spectrum-dialog-confirm-divider-block-spacing-end) - ) + - var( - --mod-dialog-confirm-divider-block-spacing-start, - var(--spectrum-dialog-confirm-divider-block-spacing-start) - ) + - var( - --mod-dialog-confirm-divider-height, - var(--spectrum-dialog-confirm-divider-height) - ) - ); + display: none; +} + +:host([no-divider]) ::slotted([slot="heading"]) { + padding-block-end: calc( + var( + --mod-dialog-confirm-divider-block-spacing-end, + var(--spectrum-dialog-confirm-divider-block-spacing-end) + ) + + var( + --mod-dialog-confirm-divider-block-spacing-start, + var(--spectrum-dialog-confirm-divider-block-spacing-start) + ) + + var( + --mod-dialog-confirm-divider-height, + var(--spectrum-dialog-confirm-divider-height) + ) + ); } .content { - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - font-size: var( - --mod-dialog-confirm-description-text-size, - var(--spectrum-dialog-confirm-description-text-size) - ); - font-weight: var( - --mod-dialog-confirm-description-font-weight, - var(--spectrum-regular-font-weight) - ); - line-height: var( - --mod-dialog-confirm-description-text-line-height, - var(--spectrum-dialog-confirm-description-text-line-height) - ); - color: var( - --mod-dialog-confirm-description-text-color, - var(--spectrum-dialog-confirm-description-text-color) - ); - padding: calc( - var( - --mod-dialog-confirm-description-padding, - var(--spectrum-dialog-confirm-description-padding) - ) * 2 - ); - margin: 0 - var( - --mod-dialog-confirm-description-margin, - var(--spectrum-dialog-confirm-description-margin) - ); - outline: none; - grid-area: content; - overflow-y: auto; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + font-size: var( + --mod-dialog-confirm-description-text-size, + var(--spectrum-dialog-confirm-description-text-size) + ); + font-weight: var( + --mod-dialog-confirm-description-font-weight, + var(--spectrum-regular-font-weight) + ); + line-height: var( + --mod-dialog-confirm-description-text-line-height, + var(--spectrum-dialog-confirm-description-text-line-height) + ); + color: var( + --mod-dialog-confirm-description-text-color, + var(--spectrum-dialog-confirm-description-text-color) + ); + padding: calc( + var( + --mod-dialog-confirm-description-padding, + var(--spectrum-dialog-confirm-description-padding) + ) * + 2 + ); + margin: 0 + var( + --mod-dialog-confirm-description-margin, + var(--spectrum-dialog-confirm-description-margin) + ); + outline: none; + grid-area: content; + overflow-y: auto; } .footer { - outline: none; - flex-wrap: wrap; - grid-area: footer; - padding-block-start: var( - --mod-dialog-confirm-footer-padding-top, - var(--spectrum-dialog-confirm-footer-padding-top) - ); - display: flex; + outline: none; + flex-wrap: wrap; + grid-area: footer; + padding-block-start: var( + --mod-dialog-confirm-footer-padding-top, + var(--spectrum-dialog-confirm-footer-padding-top) + ); + display: flex; } .footer > *, .footer > .spectrum-Button + .spectrum-Button { - margin-block-end: 0; + margin-block-end: 0; } .button-group { - grid-area: buttonGroup; - justify-content: flex-end; - padding-block-start: var( - --mod-dialog-confirm-buttongroup-padding-top, - var(--spectrum-dialog-confirm-buttongroup-padding-top) - ); - padding-inline-start: var( - --mod-dialog-confirm-gap-size, - var(--spectrum-dialog-confirm-gap-size) - ); - display: flex; + grid-area: buttonGroup; + justify-content: flex-end; + padding-block-start: var( + --mod-dialog-confirm-buttongroup-padding-top, + var(--spectrum-dialog-confirm-buttongroup-padding-top) + ); + padding-inline-start: var( + --mod-dialog-confirm-gap-size, + var(--spectrum-dialog-confirm-gap-size) + ); + display: flex; } .button-group.button-group--noFooter { - grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; + grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; } :host([dismissable]) .grid { - grid-template-columns: - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - auto 1fr auto minmax(0, auto) minmax( - 0, - var( - --mod-dialog-confirm-close-button-size, - var(--spectrum-dialog-confirm-close-button-size) - ) - ) - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - 'hero hero hero hero hero hero hero' - '. . . . . closeButton closeButton' - '. heading header header typeIcon closeButton closeButton' - '. divider divider divider divider divider .' - '. content content content content content .' - '. footer footer buttonGroup buttonGroup buttonGroup .' - '. . . . . . .'; - grid-template-rows: - auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); + grid-template-columns: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto 1fr auto minmax(0, auto) minmax( + 0, + var( + --mod-dialog-confirm-close-button-size, + var(--spectrum-dialog-confirm-close-button-size) + ) + ) + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-areas: + "hero hero hero hero hero hero hero" + ". . . . . closeButton closeButton" + ". heading header header typeIcon closeButton closeButton" + ". divider divider divider divider divider ." + ". content content content content content ." + ". footer footer buttonGroup buttonGroup buttonGroup ." + ". . . . . . ."; + grid-template-rows: + auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); } :host([dismissable]) .grid .button-group { - display: none; + display: none; } :host([dismissable]) .grid .footer { - color: var( - --mod-dialog-confirm-description-text-color, - var(--spectrum-dialog-confirm-description-text-color) - ); - grid-area: footer / footer / buttonGroup / buttonGroup; + color: var( + --mod-dialog-confirm-description-text-color, + var(--spectrum-dialog-confirm-description-text-color) + ); + grid-area: footer / footer / buttonGroup / buttonGroup; } .close-button { - grid-area: closeButton; - place-self: start end; - margin-block-start: var( - --mod-dialog-confirm-close-button-padding, - var(--spectrum-dialog-confirm-close-button-padding) - ); - margin-inline-end: var( - --mod-dialog-confirm-close-button-padding, - var(--spectrum-dialog-confirm-close-button-padding) - ); -} - -:host([mode='fullscreen']) { - inline-size: 100%; - block-size: 100%; -} - -:host([mode='fullscreenTakeover']) { - inline-size: 100%; - block-size: 100%; - border-radius: 0; -} - -:host([mode='fullscreen']), -:host([mode='fullscreenTakeover']) { - max-block-size: none; - max-inline-size: none; -} - -:host([mode='fullscreen']) .grid, -:host([mode='fullscreenTakeover']) .grid { - grid-template-columns: - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - 1fr auto auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-rows: - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto 1fr var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - '. . . . .' - '. heading header buttonGroup .' - '. divider divider divider .' - '. content content content .' - '. . . . .'; - display: grid; -} - -:host([mode='fullscreen']) ::slotted([slot='heading']), -:host([mode='fullscreenTakeover']) ::slotted([slot='heading']) { - font-size: var( - --mod-dialog-fullscreen-header-text-size, - var(--spectrum-dialog-fullscreen-header-text-size) - ); -} - -:host([mode='fullscreen']) .content, -:host([mode='fullscreenTakeover']) .content { - max-block-size: none; -} - -:host([mode='fullscreen']) .button-group, -:host([mode='fullscreen']) .footer, -:host([mode='fullscreenTakeover']) .button-group, -:host([mode='fullscreenTakeover']) .footer { - padding-block-start: 0; -} - -:host([mode='fullscreen']) .footer, -:host([mode='fullscreenTakeover']) .footer { - display: none; -} - -:host([mode='fullscreen']) .button-group, -:host([mode='fullscreenTakeover']) .button-group { - grid-area: buttonGroup; - align-self: start; + grid-area: closeButton; + place-self: start end; + margin-block-start: var( + --mod-dialog-confirm-close-button-padding, + var(--spectrum-dialog-confirm-close-button-padding) + ); + margin-inline-end: var( + --mod-dialog-confirm-close-button-padding, + var(--spectrum-dialog-confirm-close-button-padding) + ); +} + +:host([mode="fullscreen"]) { + inline-size: 100%; + block-size: 100%; +} + +:host([mode="fullscreenTakeover"]) { + inline-size: 100%; + block-size: 100%; + border-radius: 0; +} + +:host([mode="fullscreen"]), +:host([mode="fullscreenTakeover"]) { + max-block-size: none; + max-inline-size: none; +} + +:host([mode="fullscreen"]) .grid, +:host([mode="fullscreenTakeover"]) .grid { + grid-template-columns: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + 1fr auto auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-rows: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto 1fr var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-areas: + ". . . . ." + ". heading header buttonGroup ." + ". divider divider divider ." + ". content content content ." + ". . . . ."; + display: grid; +} + +:host([mode="fullscreen"]) ::slotted([slot="heading"]), +:host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) { + font-size: var( + --mod-dialog-fullscreen-header-text-size, + var(--spectrum-dialog-fullscreen-header-text-size) + ); +} + +:host([mode="fullscreen"]) .content, +:host([mode="fullscreenTakeover"]) .content { + max-block-size: none; +} + +:host([mode="fullscreen"]) .button-group, +:host([mode="fullscreen"]) .footer, +:host([mode="fullscreenTakeover"]) .button-group, +:host([mode="fullscreenTakeover"]) .footer { + padding-block-start: 0; +} + +:host([mode="fullscreen"]) .footer, +:host([mode="fullscreenTakeover"]) .footer { + display: none; +} + +:host([mode="fullscreen"]) .button-group, +:host([mode="fullscreenTakeover"]) .button-group { + grid-area: buttonGroup; + align-self: start; } @media screen and (width <= 700px) { - .grid { - grid-template-columns: - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-areas: - 'hero hero hero hero hero hero' - '. . . . . .' - '. heading heading heading heading .' - '. header header header header .' - '. divider divider divider divider .' - '. content content content content .' - '. footer footer buttonGroup buttonGroup .' - '. . . . . .'; - } - - .grid, - :host([dismissable]) .grid { - grid-template-rows: - auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - } - - :host([dismissable]) .grid { - grid-template-columns: - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - auto 1fr auto minmax(0, auto) minmax( - 0, - var( - --mod-dialog-confirm-close-button-size, - var(--spectrum-dialog-confirm-close-button-size) - ) - ) - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - 'hero hero hero hero hero hero hero' - '. . . . . closeButton closeButton' - '. heading heading heading heading closeButton closeButton' - '. header header header header header .' - '. divider divider divider divider divider .' - '. content content content content content .' - '. footer footer buttonGroup buttonGroup buttonGroup .' - '. . . . . . .'; - } - - .header { - justify-content: flex-start; - } - - :host([mode='fullscreen']) .grid, - :host([mode='fullscreenTakeover']) .grid { - grid-template-columns: - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - 1fr var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-rows: - var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) - auto auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - '. . .' - '. heading .' - '. header .' - '. divider .' - '. content .' - '. buttonGroup .' - '. . .'; - display: grid; - } - - :host([mode='fullscreen']) .button-group, - :host([mode='fullscreenTakeover']) .button-group { - padding-block-start: var( - --mod-dialog-confirm-buttongroup-padding-top, - var(--spectrum-dialog-confirm-buttongroup-padding-top) - ); - } - - :host([mode='fullscreen']) ::slotted([slot='heading']), - :host([mode='fullscreenTakeover']) ::slotted([slot='heading']) { - font-size: var( - --mod-dialog-confirm-title-text-size, - var(--spectrum-dialog-confirm-title-text-size) - ); - } + .grid { + grid-template-columns: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto 1fr auto minmax(0, auto) var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-areas: + "hero hero hero hero hero hero" + ". . . . . ." + ". heading heading heading heading ." + ". header header header header ." + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; + } + + .grid, + :host([dismissable]) .grid { + grid-template-rows: + auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + } + + :host([dismissable]) .grid { + grid-template-columns: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto 1fr auto minmax(0, auto) minmax( + 0, + var( + --mod-dialog-confirm-close-button-size, + var(--spectrum-dialog-confirm-close-button-size) + ) + ) + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-areas: + "hero hero hero hero hero hero hero" + ". . . . . closeButton closeButton" + ". heading heading heading heading closeButton closeButton" + ". header header header header header ." + ". divider divider divider divider divider ." + ". content content content content content ." + ". footer footer buttonGroup buttonGroup buttonGroup ." + ". . . . . . ."; + } + + .header { + justify-content: flex-start; + } + + :host([mode="fullscreen"]) .grid, + :host([mode="fullscreenTakeover"]) .grid { + grid-template-columns: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + 1fr var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-rows: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-areas: + ". . ." + ". heading ." + ". header ." + ". divider ." + ". content ." + ". buttonGroup ." + ". . ."; + display: grid; + } + + :host([mode="fullscreen"]) .button-group, + :host([mode="fullscreenTakeover"]) .button-group { + padding-block-start: var( + --mod-dialog-confirm-buttongroup-padding-top, + var(--spectrum-dialog-confirm-buttongroup-padding-top) + ); + } + + :host([mode="fullscreen"]) ::slotted([slot="heading"]), + :host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) { + font-size: var( + --mod-dialog-confirm-title-text-size, + var(--spectrum-dialog-confirm-title-text-size) + ); + } } @media (forced-colors: active) { - :host { - border: solid; - } + :host { + border: solid; + } } diff --git a/packages/divider/src/divider-overrides.css b/packages/divider/src/divider-overrides.css index 9a7d1fd3c4..f8a8161faa 100644 --- a/packages/divider/src/divider-overrides.css +++ b/packages/divider/src/divider-overrides.css @@ -12,31 +12,31 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-divider-background-color-small: var( - --system-divider-background-color-small - ); - --spectrum-divider-background-color-medium: var( - --system-divider-background-color-medium - ); - --spectrum-divider-background-color-large: var( - --system-divider-background-color-large - ); - --spectrum-divider-background-color-small-static-white: var( - --system-divider-background-color-small-static-white - ); - --spectrum-divider-background-color-medium-static-white: var( - --system-divider-background-color-medium-static-white - ); - --spectrum-divider-background-color-large-static-white: var( - --system-divider-background-color-large-static-white - ); - --spectrum-divider-background-color-small-static-black: var( - --system-divider-background-color-small-static-black - ); - --spectrum-divider-background-color-medium-static-black: var( - --system-divider-background-color-medium-static-black - ); - --spectrum-divider-background-color-large-static-black: var( - --system-divider-background-color-large-static-black - ); + --spectrum-divider-background-color-small: var( + --system-divider-background-color-small + ); + --spectrum-divider-background-color-medium: var( + --system-divider-background-color-medium + ); + --spectrum-divider-background-color-large: var( + --system-divider-background-color-large + ); + --spectrum-divider-background-color-small-static-white: var( + --system-divider-background-color-small-static-white + ); + --spectrum-divider-background-color-medium-static-white: var( + --system-divider-background-color-medium-static-white + ); + --spectrum-divider-background-color-large-static-white: var( + --system-divider-background-color-large-static-white + ); + --spectrum-divider-background-color-small-static-black: var( + --system-divider-background-color-small-static-black + ); + --spectrum-divider-background-color-medium-static-black: var( + --system-divider-background-color-medium-static-black + ); + --spectrum-divider-background-color-large-static-black: var( + --system-divider-background-color-large-static-black + ); } diff --git a/packages/divider/src/spectrum-divider.css b/packages/divider/src/spectrum-divider.css index 5e76c19a80..23f81a05ff 100644 --- a/packages/divider/src/spectrum-divider.css +++ b/packages/divider/src/spectrum-divider.css @@ -12,101 +12,95 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - background-color: CanvasText !important; - } + :host { + background-color: CanvasText !important; + } } :host { - block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - inline-size: 100%; - border: none; - border-width: var( - --mod-divider-thickness, - var(--spectrum-divider-thickness) - ); - border-radius: var( - --mod-divider-thickness, - var(--spectrum-divider-thickness) - ); - background-color: var( - --mod-divider-background-color, - var(--spectrum-divider-background-color) - ); - overflow: visible; + block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + inline-size: 100%; + border: none; + border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + border-radius: var( + --mod-divider-thickness, + var(--spectrum-divider-thickness) + ); + background-color: var( + --mod-divider-background-color, + var(--spectrum-divider-background-color) + ); + overflow: visible; } -:host([size='s']) { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); - --spectrum-divider-background-color: var( - --spectrum-divider-background-color-small - ); +:host([size="s"]) { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); + --spectrum-divider-background-color: var( + --spectrum-divider-background-color-small + ); } :host, :host { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); - --spectrum-divider-background-color: var( - --spectrum-divider-background-color-medium - ); + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + --spectrum-divider-background-color: var( + --spectrum-divider-background-color-medium + ); } -:host([size='l']) { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); - --spectrum-divider-background-color: var( - --spectrum-divider-background-color-large - ); +:host([size="l"]) { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); + --spectrum-divider-background-color: var( + --spectrum-divider-background-color-large + ); } -:host([static-color='white'][size='s']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-small-static-white, - var(--spectrum-divider-background-color-small-static-white) - ); +:host([static-color="white"][size="s"]) { + --spectrum-divider-background-color: var( + --mod-divider-background-color-small-static-white, + var(--spectrum-divider-background-color-small-static-white) + ); } -:host([static-color='white']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-medium-static-white, - var(--spectrum-divider-background-color-medium-static-white) - ); +:host([static-color="white"]) { + --spectrum-divider-background-color: var( + --mod-divider-background-color-medium-static-white, + var(--spectrum-divider-background-color-medium-static-white) + ); } -:host([static-color='white'][size='l']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-large-static-white, - var(--spectrum-divider-background-color-large-static-white) - ); +:host([static-color="white"][size="l"]) { + --spectrum-divider-background-color: var( + --mod-divider-background-color-large-static-white, + var(--spectrum-divider-background-color-large-static-white) + ); } -:host([static-color='black'][size='s']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-small-static-black, - var(--spectrum-divider-background-color-small-static-black) - ); +:host([static-color="black"][size="s"]) { + --spectrum-divider-background-color: var( + --mod-divider-background-color-small-static-black, + var(--spectrum-divider-background-color-small-static-black) + ); } -:host([static-color='black']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-medium-static-black, - var(--spectrum-divider-background-color-medium-static-black) - ); +:host([static-color="black"]) { + --spectrum-divider-background-color: var( + --mod-divider-background-color-medium-static-black, + var(--spectrum-divider-background-color-medium-static-black) + ); } -:host([static-color='black'][size='l']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-large-static-black, - var(--spectrum-divider-background-color-large-static-black) - ); +:host([static-color="black"][size="l"]) { + --spectrum-divider-background-color: var( + --mod-divider-background-color-large-static-black, + var(--spectrum-divider-background-color-large-static-black) + ); } :host([vertical]) { - inline-size: var( - --mod-divider-thickness, - var(--spectrum-divider-thickness) - ); - margin-block: var(--mod-divider-vertical-margin); - block-size: 100%; - block-size: var(--mod-divider-vertical-height, 100%); - align-self: var(--mod-divider-vertical-align); + inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + margin-block: var(--mod-divider-vertical-margin); + block-size: 100%; + block-size: var(--mod-divider-vertical-height, 100%); + align-self: var(--mod-divider-vertical-align); } diff --git a/packages/dropzone/src/dropzone-overrides.css b/packages/dropzone/src/dropzone-overrides.css index b7bc5036ef..850603d1c0 100644 --- a/packages/dropzone/src/dropzone-overrides.css +++ b/packages/dropzone/src/dropzone-overrides.css @@ -12,91 +12,87 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-drop-zone-padding: var(--system-drop-zone-padding); - --spectrum-drop-zone-illustration-to-heading: var( - --system-drop-zone-illustration-to-heading - ); - --spectrum-drop-zone-heading-to-body: var( - --system-drop-zone-heading-to-body - ); - --spectrum-drop-zone-border-width: var(--system-drop-zone-border-width); - --spectrum-drop-zone-corner-radius: var(--system-drop-zone-corner-radius); - --spectrum-drop-zone-border-color: var(--system-drop-zone-border-color); - --spectrum-drop-zone-heading-font-family: var( - --system-drop-zone-heading-font-family - ); - --spectrum-drop-zone-heading-font-weight: var( - --system-drop-zone-heading-font-weight - ); - --spectrum-drop-zone-heading-font-style: var( - --system-drop-zone-heading-font-style - ); - --spectrum-drop-zone-heading-font-size: var( - --system-drop-zone-heading-font-size - ); - --spectrum-drop-zone-heading-line-height: var( - --system-drop-zone-heading-line-height - ); - --spectrum-drop-zone-heading-color: var(--system-drop-zone-heading-color); - --spectrum-drop-zone-body-font-family: var( - --system-drop-zone-body-font-family - ); - --spectrum-drop-zone-body-font-weight: var( - --system-drop-zone-body-font-weight - ); - --spectrum-drop-zone-body-font-style: var( - --system-drop-zone-body-font-style - ); - --spectrum-drop-zone-body-font-size: var(--system-drop-zone-body-font-size); - --spectrum-drop-zone-body-line-height: var( - --system-drop-zone-body-line-height - ); - --spectrum-drop-zone-body-color: var(--system-drop-zone-body-color); - --spectrum-drop-zone-background-color: var( - --system-drop-zone-background-color - ); - --spectrum-drop-zone-border-color-hover: var( - --system-drop-zone-border-color-hover - ); - --spectrum-drop-zone-illustration-color: var( - --system-drop-zone-illustration-color - ); - --spectrum-drop-zone-illustration-color-hover: var( - --system-drop-zone-illustration-color-hover - ); - --spectrum-drop-zone-content-height: var(--system-drop-zone-content-height); - --spectrum-drop-zone-content-max-width: var( - --system-drop-zone-content-max-width - ); - --spectrum-drop-zone-content-edge-to-text: var( - --system-drop-zone-content-edge-to-text - ); - --spectrum-drop-zone-content-top-to-text: var( - --system-drop-zone-content-top-to-text - ); - --spectrum-drop-zone-content-bottom-to-text: var( - --system-drop-zone-content-bottom-to-text - ); - --spectrum-drop-zone-content-font-family: var( - --system-drop-zone-content-font-family - ); - --spectrum-drop-zone-content-font-weight: var( - --system-drop-zone-content-font-weight - ); - --spectrum-drop-zone-content-font-style: var( - --system-drop-zone-content-font-style - ); - --spectrum-drop-zone-content-font-size: var( - --system-drop-zone-content-font-size - ); - --spectrum-drop-zone-content-line-height: var( - --system-drop-zone-content-line-height - ); - --spectrum-drop-zone-content-background-color: var( - --system-drop-zone-content-background-color - ); - --spectrum-drop-zone-content-color: var(--system-drop-zone-content-color); - --spectrum-drop-zone-heading-font-size-cjk: var( - --system-drop-zone-heading-font-size-cjk - ); + --spectrum-drop-zone-padding: var(--system-drop-zone-padding); + --spectrum-drop-zone-illustration-to-heading: var( + --system-drop-zone-illustration-to-heading + ); + --spectrum-drop-zone-heading-to-body: var(--system-drop-zone-heading-to-body); + --spectrum-drop-zone-border-width: var(--system-drop-zone-border-width); + --spectrum-drop-zone-corner-radius: var(--system-drop-zone-corner-radius); + --spectrum-drop-zone-border-color: var(--system-drop-zone-border-color); + --spectrum-drop-zone-heading-font-family: var( + --system-drop-zone-heading-font-family + ); + --spectrum-drop-zone-heading-font-weight: var( + --system-drop-zone-heading-font-weight + ); + --spectrum-drop-zone-heading-font-style: var( + --system-drop-zone-heading-font-style + ); + --spectrum-drop-zone-heading-font-size: var( + --system-drop-zone-heading-font-size + ); + --spectrum-drop-zone-heading-line-height: var( + --system-drop-zone-heading-line-height + ); + --spectrum-drop-zone-heading-color: var(--system-drop-zone-heading-color); + --spectrum-drop-zone-body-font-family: var( + --system-drop-zone-body-font-family + ); + --spectrum-drop-zone-body-font-weight: var( + --system-drop-zone-body-font-weight + ); + --spectrum-drop-zone-body-font-style: var(--system-drop-zone-body-font-style); + --spectrum-drop-zone-body-font-size: var(--system-drop-zone-body-font-size); + --spectrum-drop-zone-body-line-height: var( + --system-drop-zone-body-line-height + ); + --spectrum-drop-zone-body-color: var(--system-drop-zone-body-color); + --spectrum-drop-zone-background-color: var( + --system-drop-zone-background-color + ); + --spectrum-drop-zone-border-color-hover: var( + --system-drop-zone-border-color-hover + ); + --spectrum-drop-zone-illustration-color: var( + --system-drop-zone-illustration-color + ); + --spectrum-drop-zone-illustration-color-hover: var( + --system-drop-zone-illustration-color-hover + ); + --spectrum-drop-zone-content-height: var(--system-drop-zone-content-height); + --spectrum-drop-zone-content-max-width: var( + --system-drop-zone-content-max-width + ); + --spectrum-drop-zone-content-edge-to-text: var( + --system-drop-zone-content-edge-to-text + ); + --spectrum-drop-zone-content-top-to-text: var( + --system-drop-zone-content-top-to-text + ); + --spectrum-drop-zone-content-bottom-to-text: var( + --system-drop-zone-content-bottom-to-text + ); + --spectrum-drop-zone-content-font-family: var( + --system-drop-zone-content-font-family + ); + --spectrum-drop-zone-content-font-weight: var( + --system-drop-zone-content-font-weight + ); + --spectrum-drop-zone-content-font-style: var( + --system-drop-zone-content-font-style + ); + --spectrum-drop-zone-content-font-size: var( + --system-drop-zone-content-font-size + ); + --spectrum-drop-zone-content-line-height: var( + --system-drop-zone-content-line-height + ); + --spectrum-drop-zone-content-background-color: var( + --system-drop-zone-content-background-color + ); + --spectrum-drop-zone-content-color: var(--system-drop-zone-content-color); + --spectrum-drop-zone-heading-font-size-cjk: var( + --system-drop-zone-heading-font-size-cjk + ); } diff --git a/packages/dropzone/src/spectrum-dropzone.css b/packages/dropzone/src/spectrum-dropzone.css index 23fd025125..38e276a054 100644 --- a/packages/dropzone/src/spectrum-dropzone.css +++ b/packages/dropzone/src/spectrum-dropzone.css @@ -12,252 +12,249 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-illustrated-message-content-maximum-width: var( - --mod-drop-zone-content-maximum-width, - var(--spectrum-drop-zone-content-maximum-width) - ); - --mod-illustrated-message-illustration-color: var( - --mod-drop-zone-illustration-color, - var(--spectrum-drop-zone-illustration-color) - ); - --mod-illustrated-message-title-to-heading: var( - --mod-drop-zone-illustration-to-heading, - var(--spectrum-drop-zone-illustration-to-heading) - ); - --mod-illustrated-message-heading-to-body: var( - --mod-drop-zone-heading-to-body, - var(--spectrum-drop-zone-heading-to-body) - ); - --mod-illustrated-message-title-font-family: var( - --mod-drop-zone-heading-font-family, - var(--spectrum-drop-zone-heading-font-family) - ); - --mod-illustrated-message-title-font-weight: var( - --mod-drop-zone-heading-font-weight, - var(--spectrum-drop-zone-heading-font-weight) - ); - --mod-illustrated-message-title-font-style: var( - --mod-drop-zone-heading-font-style, - var(--spectrum-drop-zone-heading-font-style) - ); - --mod-illustrated-message-title-font-size: var( - --mod-drop-zone-heading-font-size, - var(--spectrum-drop-zone-heading-font-size) - ); - --mod-illustrated-message-title-line-height: var( - --mod-drop-zone-heading-line-height, - var(--spectrum-drop-zone-heading-line-height) - ); - --mod-illustrated-message-title-color: var( - --mod-drop-zone-heading-color, - var(--spectrum-drop-zone-heading-color) - ); - --mod-illustrated-message-description-position: relative; - --mod-illustrated-message-description-z-index: 1; - --mod-illustrated-message-heading-to-description: 0; - --mod-illustrated-message-description-font-family: var( - --mod-drop-zone-body-font-family, - var(--spectrum-drop-zone-body-font-family) - ); - --mod-illustrated-message-description-font-weight: var( - --mod-drop-zone-body-font-weight, - var(--spectrum-drop-zone-body-font-weight) - ); - --mod-illustrated-message-description-font-style: var( - --mod-drop-zone-body-font-style, - var(--spectrum-drop-zone-body-font-style) - ); - --mod-illustrated-message-description-font-size: var( - --mod-drop-zone-body-font-size, - var(--spectrum-drop-zone-body-font-size) - ); - --mod-illustrated-message-description-line-height: var( - --mod-drop-zone-body-line-height, - var(--spectrum-drop-zone-body-line-height) - ); - --mod-illustrated-message-description-color: var( - --mod-drop-zone-body-color, - var(--spectrum-drop-zone-body-color) - ); - --mod-actionbutton-font-size: var( - --mod-drop-zone-content-font-size, - var(--spectrum-drop-zone-content-font-size) - ); - --mod-actionbutton-label-color: var( - --mod-drop-zone-content-color, - var(--spectrum-drop-zone-content-color) - ); - --mod-actionbutton-edge-to-text: var( - --mod-drop-zone-content-edge-to-text, - var(--spectrum-drop-zone-content-edge-to-text) - ); - box-sizing: border-box; - inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); - padding: calc( - var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - - var( - --mod-drop-zone-border-width, - var(--spectrum-drop-zone-border-width) - ) - ); - text-align: center; - border-color: var( - --mod-drop-zone-border-color, - var(--spectrum-drop-zone-border-color) - ); - border-width: var( - --mod-drop-zone-border-width, - var(--spectrum-drop-zone-border-width) - ); - border-radius: var( - --mod-drop-zone-corner-radius, - var(--spectrum-drop-zone-corner-radius) - ); - border-style: dashed; - border-style: var( - --mod-drop-zone-border-style, - var(--spectrum-drop-zone-border-style, dashed) - ); - background-color: var( - --mod-drop-zone-background-color, - var(--spectrum-drop-zone-background-color) - ); - background-size: cover; + --mod-illustrated-message-content-maximum-width: var( + --mod-drop-zone-content-maximum-width, + var(--spectrum-drop-zone-content-maximum-width) + ); + --mod-illustrated-message-illustration-color: var( + --mod-drop-zone-illustration-color, + var(--spectrum-drop-zone-illustration-color) + ); + --mod-illustrated-message-title-to-heading: var( + --mod-drop-zone-illustration-to-heading, + var(--spectrum-drop-zone-illustration-to-heading) + ); + --mod-illustrated-message-heading-to-body: var( + --mod-drop-zone-heading-to-body, + var(--spectrum-drop-zone-heading-to-body) + ); + --mod-illustrated-message-title-font-family: var( + --mod-drop-zone-heading-font-family, + var(--spectrum-drop-zone-heading-font-family) + ); + --mod-illustrated-message-title-font-weight: var( + --mod-drop-zone-heading-font-weight, + var(--spectrum-drop-zone-heading-font-weight) + ); + --mod-illustrated-message-title-font-style: var( + --mod-drop-zone-heading-font-style, + var(--spectrum-drop-zone-heading-font-style) + ); + --mod-illustrated-message-title-font-size: var( + --mod-drop-zone-heading-font-size, + var(--spectrum-drop-zone-heading-font-size) + ); + --mod-illustrated-message-title-line-height: var( + --mod-drop-zone-heading-line-height, + var(--spectrum-drop-zone-heading-line-height) + ); + --mod-illustrated-message-title-color: var( + --mod-drop-zone-heading-color, + var(--spectrum-drop-zone-heading-color) + ); + --mod-illustrated-message-description-position: relative; + --mod-illustrated-message-description-z-index: 1; + --mod-illustrated-message-heading-to-description: 0; + --mod-illustrated-message-description-font-family: var( + --mod-drop-zone-body-font-family, + var(--spectrum-drop-zone-body-font-family) + ); + --mod-illustrated-message-description-font-weight: var( + --mod-drop-zone-body-font-weight, + var(--spectrum-drop-zone-body-font-weight) + ); + --mod-illustrated-message-description-font-style: var( + --mod-drop-zone-body-font-style, + var(--spectrum-drop-zone-body-font-style) + ); + --mod-illustrated-message-description-font-size: var( + --mod-drop-zone-body-font-size, + var(--spectrum-drop-zone-body-font-size) + ); + --mod-illustrated-message-description-line-height: var( + --mod-drop-zone-body-line-height, + var(--spectrum-drop-zone-body-line-height) + ); + --mod-illustrated-message-description-color: var( + --mod-drop-zone-body-color, + var(--spectrum-drop-zone-body-color) + ); + --mod-actionbutton-font-size: var( + --mod-drop-zone-content-font-size, + var(--spectrum-drop-zone-content-font-size) + ); + --mod-actionbutton-label-color: var( + --mod-drop-zone-content-color, + var(--spectrum-drop-zone-content-color) + ); + --mod-actionbutton-edge-to-text: var( + --mod-drop-zone-content-edge-to-text, + var(--spectrum-drop-zone-content-edge-to-text) + ); + box-sizing: border-box; + inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); + padding: calc( + var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - + var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)) + ); + text-align: center; + border-color: var( + --mod-drop-zone-border-color, + var(--spectrum-drop-zone-border-color) + ); + border-width: var( + --mod-drop-zone-border-width, + var(--spectrum-drop-zone-border-width) + ); + border-radius: var( + --mod-drop-zone-corner-radius, + var(--spectrum-drop-zone-corner-radius) + ); + border-style: dashed; + border-style: var( + --mod-drop-zone-border-style, + var(--spectrum-drop-zone-border-style, dashed) + ); + background-color: var( + --mod-drop-zone-background-color, + var(--spectrum-drop-zone-background-color) + ); + background-size: cover; } :host:lang(ja), :host:lang(ko), :host:lang(zh) { - --spectrum-drop-zone-heading-font-size: var( - --spectrum-drop-zone-heading-font-size-cjk - ); + --spectrum-drop-zone-heading-font-size: var( + --spectrum-drop-zone-heading-font-size-cjk + ); } :host([dragged]) { - --mod-drop-zone-border-style: var( - --mod-drop-zone-border-style-dragged, - solid - ); - --mod-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color), - var( - --mod-drop-zone-background-color-opacity, - var(--spectrum-drop-zone-background-color-opacity) - ) - ); - --spectrum-drop-zone-border-color: var( - --highcontrast-drop-zone-border-color-hover, - var( - --mod-drop-zone-border-color-hover, - var(--spectrum-drop-zone-border-color-hover) - ) - ); - --mod-illustrated-message-illustration-color: var( - --mod-drop-zone-illustration-color-hover, - var(--spectrum-drop-zone-illustration-color-hover) - ); + --mod-drop-zone-border-style: var( + --mod-drop-zone-border-style-dragged, + solid + ); + --mod-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color), + var( + --mod-drop-zone-background-color-opacity, + var(--spectrum-drop-zone-background-color-opacity) + ) + ); + --spectrum-drop-zone-border-color: var( + --highcontrast-drop-zone-border-color-hover, + var( + --mod-drop-zone-border-color-hover, + var(--spectrum-drop-zone-border-color-hover) + ) + ); + --mod-illustrated-message-illustration-color: var( + --mod-drop-zone-illustration-color-hover, + var(--spectrum-drop-zone-illustration-color-hover) + ); } :host([filled]) { - --mod-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color), - var( - --mod-drop-zone-background-color-opacity-filled, - var(--spectrum-drop-zone-background-color-opacity-filled) - ) - ); - --mod-illustrated-message-display: none; + --mod-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color), + var( + --mod-drop-zone-background-color-opacity-filled, + var(--spectrum-drop-zone-background-color-opacity-filled) + ) + ); + --mod-illustrated-message-display: none; } :host([filled][dragged]) { - --mod-drop-zone-content-display: flex; + --mod-drop-zone-content-display: flex; } :host(:focus-visible) { - --mod-drop-zone-border-style: solid; - --spectrum-drop-zone-border-color: var( - --highcontrast-drop-zone-border-color-hover, - var( - --mod-drop-zone-border-color-hover, - var(--spectrum-drop-zone-border-color-hover) - ) - ); - outline: 0; + --mod-drop-zone-border-style: solid; + --spectrum-drop-zone-border-color: var( + --highcontrast-drop-zone-border-color-hover, + var( + --mod-drop-zone-border-color-hover, + var(--spectrum-drop-zone-border-color-hover) + ) + ); + outline: 0; } .spectrum-DropZone-content { - display: none; - display: var( - --mod-drop-zone-content-display, - var(--spectrum-drop-zone-content-display, none) - ); - block-size: 100%; - z-index: 1; - justify-content: center; - align-items: center; - position: relative; + display: none; + display: var( + --mod-drop-zone-content-display, + var(--spectrum-drop-zone-content-display, none) + ); + block-size: 100%; + z-index: 1; + justify-content: center; + align-items: center; + position: relative; } .spectrum-DropZone-button { - box-sizing: border-box; - block-size: var( - --mod-drop-zone-content-height, - var(--spectrum-drop-zone-content-height) - ); - max-inline-size: var( - --mod-drop-zone-content-max-width, - var(--spectrum-drop-zone-content-max-width) - ); - font-family: var( - --mod-drop-zone-content-font-family, - var(--spectrum-drop-zone-content-font-family) - ); - font-weight: var( - --mod-drop-zone-content-font-weight, - var(--spectrum-drop-zone-content-font-weight) - ); - font-style: var( - --mod-drop-zone-content-font-style, - var(--spectrum-drop-zone-content-font-style) - ); - line-height: var( - --mod-drop-zone-content-line-height, - var(--spectrum-drop-zone-content-line-height) - ); - border: none; - padding-block-start: var( - --mod-drop-zone-content-top-to-text, - var(--spectrum-drop-zone-content-top-to-text) - ); - padding-block-end: var( - --mod-drop-zone-content-bottom-to-text, - var(--spectrum-drop-zone-content-bottom-to-text) - ); + box-sizing: border-box; + block-size: var( + --mod-drop-zone-content-height, + var(--spectrum-drop-zone-content-height) + ); + max-inline-size: var( + --mod-drop-zone-content-max-width, + var(--spectrum-drop-zone-content-max-width) + ); + font-family: var( + --mod-drop-zone-content-font-family, + var(--spectrum-drop-zone-content-font-family) + ); + font-weight: var( + --mod-drop-zone-content-font-weight, + var(--spectrum-drop-zone-content-font-weight) + ); + font-style: var( + --mod-drop-zone-content-font-style, + var(--spectrum-drop-zone-content-font-style) + ); + line-height: var( + --mod-drop-zone-content-line-height, + var(--spectrum-drop-zone-content-line-height) + ); + border: none; + padding-block-start: var( + --mod-drop-zone-content-top-to-text, + var(--spectrum-drop-zone-content-top-to-text) + ); + padding-block-end: var( + --mod-drop-zone-content-bottom-to-text, + var(--spectrum-drop-zone-content-bottom-to-text) + ); } .spectrum-DropZone-button, .spectrum-DropZone-button:focus { - background-color: var( - --mod-drop-zone-content-background-color, - var(--spectrum-drop-zone-content-background-color) - ); + background-color: var( + --mod-drop-zone-content-background-color, + var(--spectrum-drop-zone-content-background-color) + ); } @media (hover: hover) { - .spectrum-DropZone-button:hover { - background-color: var( - --mod-drop-zone-content-background-color, - var(--spectrum-drop-zone-content-background-color) - ); - } + .spectrum-DropZone-button:hover { + background-color: var( + --mod-drop-zone-content-background-color, + var(--spectrum-drop-zone-content-background-color) + ); + } } @media (forced-colors: active) { - :host { - --highcontrast-drop-zone-illustration-color: CanvasText; - --highcontrast-drop-zone-border-color-hover: Highlight; - --highcontrast-illustrated-message-illustration-color: var( - --highcontrast-drop-zone-illustration-color - ); - } + :host { + --highcontrast-drop-zone-illustration-color: CanvasText; + --highcontrast-drop-zone-border-color-hover: Highlight; + --highcontrast-illustrated-message-illustration-color: var( + --highcontrast-drop-zone-illustration-color + ); + } } diff --git a/packages/field-group/src/field-group-overrides.css b/packages/field-group/src/field-group-overrides.css index 757af674dc..fa51c17222 100644 --- a/packages/field-group/src/field-group-overrides.css +++ b/packages/field-group/src/field-group-overrides.css @@ -12,8 +12,8 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-fieldgroup-margin: var(--system-field-group-margin); - --spectrum-fieldgroup-readonly-delimiter: var( - --system-field-group-readonly-delimiter - ); + --spectrum-fieldgroup-margin: var(--system-field-group-margin); + --spectrum-fieldgroup-readonly-delimiter: var( + --system-field-group-readonly-delimiter + ); } diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css index 72c16e86b2..868a76c264 100644 --- a/packages/field-group/src/spectrum-field-group.css +++ b/packages/field-group/src/spectrum-field-group.css @@ -12,35 +12,35 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .group { - flex-flow: column wrap; - display: flex; + flex-flow: column wrap; + display: flex; } .spectrum-FieldGroup--toplabel { - flex-direction: column; + flex-direction: column; } .spectrum-FieldGroup--sidelabel { - flex-direction: row; + flex-direction: row; } .group { - flex-flow: column wrap; - display: flex; + flex-flow: column wrap; + display: flex; } :host([vertical]) .group { - flex-direction: column; + flex-direction: column; } :host([horizontal]) .group { - flex-direction: row; + flex-direction: row; } :host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)) { - margin-inline-end: var(--spectrum-fieldgroup-margin); + margin-inline-end: var(--spectrum-fieldgroup-margin); } :host([horizontal]) .group .spectrum-HelpText { - flex-basis: 100%; + flex-basis: 100%; } diff --git a/packages/field-label/src/field-label-overrides.css b/packages/field-label/src/field-label-overrides.css index 086168cd48..8e5d81161a 100644 --- a/packages/field-label/src/field-label-overrides.css +++ b/packages/field-label/src/field-label-overrides.css @@ -12,124 +12,116 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-field-label-color: var(--system-field-label-color); - --spectrum-field-label-font-weight: var(--system-field-label-font-weight); - --spectrum-field-label-line-height: var(--system-field-label-line-height); - --spectrum-field-label-line-height-cjk: var( - --system-field-label-line-height-cjk - ); - --spectrum-field-label-disabled-content-color: var( - --system-field-label-disabled-content-color - ); - --spectrum-field-label-min-height: var(--system-field-label-min-height); - --spectrum-field-label-top-to-text: var(--system-field-label-top-to-text); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-bottom-to-text - ); - --spectrum-field-label-font-size: var(--system-field-label-font-size); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-text-to-asterisk - ); + --spectrum-field-label-color: var(--system-field-label-color); + --spectrum-field-label-font-weight: var(--system-field-label-font-weight); + --spectrum-field-label-line-height: var(--system-field-label-line-height); + --spectrum-field-label-line-height-cjk: var( + --system-field-label-line-height-cjk + ); + --spectrum-field-label-disabled-content-color: var( + --system-field-label-disabled-content-color + ); + --spectrum-field-label-min-height: var(--system-field-label-min-height); + --spectrum-field-label-top-to-text: var(--system-field-label-top-to-text); + --spectrum-field-label-bottom-to-text: var( + --system-field-label-bottom-to-text + ); + --spectrum-field-label-font-size: var(--system-field-label-font-size); + --spectrum-field-label-side-margin-block-start: var( + --system-field-label-side-margin-block-start + ); + --spectrum-field-label-side-padding-right: var( + --system-field-label-side-padding-right + ); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-text-to-asterisk + ); } :host { - --spectrum-field-label-min-height: var( - --system-field-label-size-m-min-height - ); - --spectrum-field-label-top-to-text: var( - --system-field-label-size-m-top-to-text - ); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-size-m-bottom-to-text - ); - --spectrum-field-label-font-size: var( - --system-field-label-size-m-font-size - ); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-size-m-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-size-m-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-size-m-text-to-asterisk - ); + --spectrum-field-label-min-height: var( + --system-field-label-size-m-min-height + ); + --spectrum-field-label-top-to-text: var( + --system-field-label-size-m-top-to-text + ); + --spectrum-field-label-bottom-to-text: var( + --system-field-label-size-m-bottom-to-text + ); + --spectrum-field-label-font-size: var(--system-field-label-size-m-font-size); + --spectrum-field-label-side-margin-block-start: var( + --system-field-label-size-m-side-margin-block-start + ); + --spectrum-field-label-side-padding-right: var( + --system-field-label-size-m-side-padding-right + ); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-size-m-text-to-asterisk + ); } -:host([size='s']) { - --spectrum-field-label-min-height: var( - --system-field-label-size-s-min-height - ); - --spectrum-field-label-top-to-text: var( - --system-field-label-size-s-top-to-text - ); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-size-s-bottom-to-text - ); - --spectrum-field-label-font-size: var( - --system-field-label-size-s-font-size - ); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-size-s-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-size-s-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-size-s-text-to-asterisk - ); +:host([size="s"]) { + --spectrum-field-label-min-height: var( + --system-field-label-size-s-min-height + ); + --spectrum-field-label-top-to-text: var( + --system-field-label-size-s-top-to-text + ); + --spectrum-field-label-bottom-to-text: var( + --system-field-label-size-s-bottom-to-text + ); + --spectrum-field-label-font-size: var(--system-field-label-size-s-font-size); + --spectrum-field-label-side-margin-block-start: var( + --system-field-label-size-s-side-margin-block-start + ); + --spectrum-field-label-side-padding-right: var( + --system-field-label-size-s-side-padding-right + ); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-size-s-text-to-asterisk + ); } -:host([size='l']) { - --spectrum-field-label-min-height: var( - --system-field-label-size-l-min-height - ); - --spectrum-field-label-top-to-text: var( - --system-field-label-size-l-top-to-text - ); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-size-l-bottom-to-text - ); - --spectrum-field-label-font-size: var( - --system-field-label-size-l-font-size - ); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-size-l-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-size-l-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-size-l-text-to-asterisk - ); +:host([size="l"]) { + --spectrum-field-label-min-height: var( + --system-field-label-size-l-min-height + ); + --spectrum-field-label-top-to-text: var( + --system-field-label-size-l-top-to-text + ); + --spectrum-field-label-bottom-to-text: var( + --system-field-label-size-l-bottom-to-text + ); + --spectrum-field-label-font-size: var(--system-field-label-size-l-font-size); + --spectrum-field-label-side-margin-block-start: var( + --system-field-label-size-l-side-margin-block-start + ); + --spectrum-field-label-side-padding-right: var( + --system-field-label-size-l-side-padding-right + ); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-size-l-text-to-asterisk + ); } -:host([size='xl']) { - --spectrum-field-label-min-height: var( - --system-field-label-size-xl-min-height - ); - --spectrum-field-label-top-to-text: var( - --system-field-label-size-xl-top-to-text - ); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-size-xl-bottom-to-text - ); - --spectrum-field-label-font-size: var( - --system-field-label-size-xl-font-size - ); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-size-xl-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-size-xl-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-size-xl-text-to-asterisk - ); +:host([size="xl"]) { + --spectrum-field-label-min-height: var( + --system-field-label-size-xl-min-height + ); + --spectrum-field-label-top-to-text: var( + --system-field-label-size-xl-top-to-text + ); + --spectrum-field-label-bottom-to-text: var( + --system-field-label-size-xl-bottom-to-text + ); + --spectrum-field-label-font-size: var(--system-field-label-size-xl-font-size); + --spectrum-field-label-side-margin-block-start: var( + --system-field-label-size-xl-side-margin-block-start + ); + --spectrum-field-label-side-padding-right: var( + --system-field-label-size-xl-side-padding-right + ); + --spectrum-field-label-text-to-asterisk: var( + --system-field-label-size-xl-text-to-asterisk + ); } diff --git a/packages/field-label/src/spectrum-field-label.css b/packages/field-label/src/spectrum-field-label.css index 404e400b8e..1793d9c4de 100644 --- a/packages/field-label/src/spectrum-field-label.css +++ b/packages/field-label/src/spectrum-field-label.css @@ -12,106 +12,103 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - min-block-size: var( - --mod-fieldlabel-min-height, - var(--spectrum-field-label-min-height) - ); - padding-block: var( - --mod-fieldlabel-padding-block, - var( - --mod-field-label-top-to-text, - var(--spectrum-field-label-top-to-text) - ) - var( - --mod-field-label-bottom-to-text, - var(--spectrum-field-label-bottom-to-text) - ) - ); - padding-inline: 0; - padding-inline: var(--mod-fieldlabel-padding-inline, 0); - margin-block: 0; - margin-block: var( - --mod-fieldlabel-margin-block, - var(--mod-fieldlabel-margin-block-start, 0) - var(--mod-fieldlabel-margin-block-end, 0) - ); - margin-inline: 0; - margin-inline: var( - --mod-fieldlabel-margin-inline, - var(--mod-fieldlabel-margin-inline-start, 0) - var(--mod-fieldlabel-margin-inline-end, 0) - ); - font-size: var( - --mod-fieldlabel-font-size, - var(--spectrum-field-label-font-size) - ); - font-weight: var( - --mod-fieldlabel-font-weight, - var(--spectrum-field-label-font-weight) - ); - line-height: var( - --mod-fieldlabel-line-height, - var(--spectrum-field-label-line-height) - ); - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - color: var(--mod-fieldlabel-color, var(--spectrum-field-label-color)); - display: block; + box-sizing: border-box; + min-block-size: var( + --mod-fieldlabel-min-height, + var(--spectrum-field-label-min-height) + ); + padding-block: var( + --mod-fieldlabel-padding-block, + var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) + var( + --mod-field-label-bottom-to-text, + var(--spectrum-field-label-bottom-to-text) + ) + ); + padding-inline: 0; + padding-inline: var(--mod-fieldlabel-padding-inline, 0); + margin-block: 0; + margin-block: var( + --mod-fieldlabel-margin-block, + var(--mod-fieldlabel-margin-block-start, 0) + var(--mod-fieldlabel-margin-block-end, 0) + ); + margin-inline: 0; + margin-inline: var( + --mod-fieldlabel-margin-inline, + var(--mod-fieldlabel-margin-inline-start, 0) + var(--mod-fieldlabel-margin-inline-end, 0) + ); + font-size: var( + --mod-fieldlabel-font-size, + var(--spectrum-field-label-font-size) + ); + font-weight: var( + --mod-fieldlabel-font-weight, + var(--spectrum-field-label-font-weight) + ); + line-height: var( + --mod-fieldlabel-line-height, + var(--spectrum-field-label-line-height) + ); + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + color: var(--mod-fieldlabel-color, var(--spectrum-field-label-color)); + display: block; } :host(:lang(ja)), :host(:lang(ko)), :host(:lang(zh)) { - --mod-fieldlabel-line-height: var( - --mod-fieldlabel-line-height-cjk, - var(--spectrum-field-label-line-height-cjk) - ); + --mod-fieldlabel-line-height: var( + --mod-fieldlabel-line-height-cjk, + var(--spectrum-field-label-line-height-cjk) + ); } :host([disabled]), :host([disabled]) .required-icon { - --mod-fieldlabel-color: var( - --highcontrast-field-label-disabled-content-color, - var( - --mod-disabled-content-color, - var(--spectrum-field-label-disabled-content-color) - ) - ); + --mod-fieldlabel-color: var( + --highcontrast-field-label-disabled-content-color, + var( + --mod-disabled-content-color, + var(--spectrum-field-label-disabled-content-color) + ) + ); } .required-icon { - margin-block: 0; - margin-inline: var( - --mod-field-label-text-to-asterisk, - var(--spectrum-field-label-text-to-asterisk) - ) - 0; - vertical-align: initial; - vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); + margin-block: 0; + margin-inline: var( + --mod-field-label-text-to-asterisk, + var(--spectrum-field-label-text-to-asterisk) + ) + 0; + vertical-align: initial; + vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); } -:host([side-aligned='start']), -:host([side-aligned='end']) { - vertical-align: top; - margin-block-start: var( - --mod-fieldlabel-side-margin-block-start, - var(--spectrum-field-label-side-margin-block-start) - ); - margin-block-end: 0; - margin-inline-end: var( - --mod-fieldlabel-side-padding-right, - var(--spectrum-field-label-side-padding-right) - ); - display: inline-block; +:host([side-aligned="start"]), +:host([side-aligned="end"]) { + vertical-align: top; + margin-block-start: var( + --mod-fieldlabel-side-margin-block-start, + var(--spectrum-field-label-side-margin-block-start) + ); + margin-block-end: 0; + margin-inline-end: var( + --mod-fieldlabel-side-padding-right, + var(--spectrum-field-label-side-padding-right) + ); + display: inline-block; } -:host([side-aligned='end']) { - text-align: end; +:host([side-aligned="end"]) { + text-align: end; } @media (forced-colors: active) { - :host { - --highcontrast-field-label-disabled-content-color: GrayText; - } + :host { + --highcontrast-field-label-disabled-content-color: GrayText; + } } diff --git a/packages/help-text/src/help-text-overrides.css b/packages/help-text/src/help-text-overrides.css index 5beea7bdca..1902c6eb1b 100644 --- a/packages/help-text/src/help-text-overrides.css +++ b/packages/help-text/src/help-text-overrides.css @@ -12,125 +12,123 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-helptext-line-height: var(--system-help-text-line-height); - --spectrum-helptext-content-color-default: var( - --system-help-text-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --system-help-text-icon-color-default - ); - --spectrum-helptext-disabled-content-color: var( - --system-help-text-disabled-content-color - ); + --spectrum-helptext-line-height: var(--system-help-text-line-height); + --spectrum-helptext-content-color-default: var( + --system-help-text-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --system-help-text-icon-color-default + ); + --spectrum-helptext-disabled-content-color: var( + --system-help-text-disabled-content-color + ); } -:host([variant='neutral']) { - --spectrum-helptext-content-color-default: var( - --system-help-text-neutral-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --system-help-text-neutral-icon-color-default - ); +:host([variant="neutral"]) { + --spectrum-helptext-content-color-default: var( + --system-help-text-neutral-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --system-help-text-neutral-icon-color-default + ); } -:host([variant='negative']) { - --spectrum-helptext-content-color-default: var( - --system-help-text-negative-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --system-help-text-negative-icon-color-default - ); +:host([variant="negative"]) { + --spectrum-helptext-content-color-default: var( + --system-help-text-negative-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --system-help-text-negative-icon-color-default + ); } :host([disabled]) { - --spectrum-helptext-content-color-default: var( - --system-help-text-disabled-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --system-help-text-disabled-icon-color-default - ); + --spectrum-helptext-content-color-default: var( + --system-help-text-disabled-content-color-default + ); + --spectrum-helptext-icon-color-default: var( + --system-help-text-disabled-icon-color-default + ); } :host(:lang(ja)) { - --spectrum-helptext-line-height-cjk: var( - --system-help-text-lang-ja-line-height-cjk - ); + --spectrum-helptext-line-height-cjk: var( + --system-help-text-lang-ja-line-height-cjk + ); } :host(:lang(zh)) { - --spectrum-helptext-line-height-cjk: var( - --system-help-text-lang-zh-line-height-cjk - ); + --spectrum-helptext-line-height-cjk: var( + --system-help-text-lang-zh-line-height-cjk + ); } :host(:lang(ko)) { - --spectrum-helptext-line-height-cjk: var( - --system-help-text-lang-ko-line-height-cjk - ); + --spectrum-helptext-line-height-cjk: var( + --system-help-text-lang-ko-line-height-cjk + ); } -:host([size='s']) { - --spectrum-helptext-min-height: var(--system-help-text-size-s-min-height); - --spectrum-helptext-icon-size: var(--system-help-text-size-s-icon-size); - --spectrum-helptext-font-size: var(--system-help-text-size-s-font-size); - --spectrum-helptext-text-to-visual: var( - --system-help-text-size-s-text-to-visual - ); - --spectrum-helptext-top-to-workflow-icon: var( - --system-help-text-size-s-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--system-help-text-size-s-top-to-text); - --spectrum-helptext-bottom-to-text: var( - --system-help-text-size-s-bottom-to-text - ); +:host([size="s"]) { + --spectrum-helptext-min-height: var(--system-help-text-size-s-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-s-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-s-font-size); + --spectrum-helptext-text-to-visual: var( + --system-help-text-size-s-text-to-visual + ); + --spectrum-helptext-top-to-workflow-icon: var( + --system-help-text-size-s-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--system-help-text-size-s-top-to-text); + --spectrum-helptext-bottom-to-text: var( + --system-help-text-size-s-bottom-to-text + ); } :host { - --spectrum-helptext-min-height: var(--system-help-text-size-m-min-height); - --spectrum-helptext-icon-size: var(--system-help-text-size-m-icon-size); - --spectrum-helptext-font-size: var(--system-help-text-size-m-font-size); - --spectrum-helptext-text-to-visual: var( - --system-help-text-size-m-text-to-visual - ); - --spectrum-helptext-top-to-workflow-icon: var( - --system-help-text-size-m-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--system-help-text-size-m-top-to-text); - --spectrum-helptext-bottom-to-text: var( - --system-help-text-size-m-bottom-to-text - ); + --spectrum-helptext-min-height: var(--system-help-text-size-m-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-m-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-m-font-size); + --spectrum-helptext-text-to-visual: var( + --system-help-text-size-m-text-to-visual + ); + --spectrum-helptext-top-to-workflow-icon: var( + --system-help-text-size-m-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--system-help-text-size-m-top-to-text); + --spectrum-helptext-bottom-to-text: var( + --system-help-text-size-m-bottom-to-text + ); } -:host([size='l']) { - --spectrum-helptext-min-height: var(--system-help-text-size-l-min-height); - --spectrum-helptext-icon-size: var(--system-help-text-size-l-icon-size); - --spectrum-helptext-font-size: var(--system-help-text-size-l-font-size); - --spectrum-helptext-text-to-visual: var( - --system-help-text-size-l-text-to-visual - ); - --spectrum-helptext-top-to-workflow-icon: var( - --system-help-text-size-l-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--system-help-text-size-l-top-to-text); - --spectrum-helptext-bottom-to-text: var( - --system-help-text-size-l-bottom-to-text - ); +:host([size="l"]) { + --spectrum-helptext-min-height: var(--system-help-text-size-l-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-l-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-l-font-size); + --spectrum-helptext-text-to-visual: var( + --system-help-text-size-l-text-to-visual + ); + --spectrum-helptext-top-to-workflow-icon: var( + --system-help-text-size-l-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--system-help-text-size-l-top-to-text); + --spectrum-helptext-bottom-to-text: var( + --system-help-text-size-l-bottom-to-text + ); } -:host([size='xl']) { - --spectrum-helptext-min-height: var(--system-help-text-size-xl-min-height); - --spectrum-helptext-icon-size: var(--system-help-text-size-xl-icon-size); - --spectrum-helptext-font-size: var(--system-help-text-size-xl-font-size); - --spectrum-helptext-text-to-visual: var( - --system-help-text-size-xl-text-to-visual - ); - --spectrum-helptext-top-to-workflow-icon: var( - --system-help-text-size-xl-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var( - --system-help-text-size-xl-top-to-text - ); - --spectrum-helptext-bottom-to-text: var( - --system-help-text-size-xl-bottom-to-text - ); +:host([size="xl"]) { + --spectrum-helptext-min-height: var(--system-help-text-size-xl-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-xl-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-xl-font-size); + --spectrum-helptext-text-to-visual: var( + --system-help-text-size-xl-text-to-visual + ); + --spectrum-helptext-top-to-workflow-icon: var( + --system-help-text-size-xl-top-to-workflow-icon + ); + --spectrum-helptext-top-to-text: var(--system-help-text-size-xl-top-to-text); + --spectrum-helptext-bottom-to-text: var( + --system-help-text-size-xl-bottom-to-text + ); } diff --git a/packages/help-text/src/spectrum-help-text.css b/packages/help-text/src/spectrum-help-text.css index 0d690297e2..868f72e6b4 100644 --- a/packages/help-text/src/spectrum-help-text.css +++ b/packages/help-text/src/spectrum-help-text.css @@ -12,144 +12,138 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-helptext-content-color-default: CanvasText; - --highcontrast-helptext-icon-color-default: CanvasText; - } + :host { + --highcontrast-helptext-content-color-default: CanvasText; + --highcontrast-helptext-icon-color-default: CanvasText; + } - :host, - .text, - .icon { - forced-color-adjust: none; - } + :host, + .text, + .icon { + forced-color-adjust: none; + } } :host { - --spectrum-helptext-bottom-to-workflow-icon: var( - --spectrum-helptext-top-to-workflow-icon - ); - color: var( - --highcontrast-helptext-content-color-default, - var( - --mod-helptext-content-color-default, - var(--spectrum-helptext-content-color-default) - ) - ); - font-size: var( - --mod-helptext-font-size, - var(--spectrum-helptext-font-size) - ); - min-block-size: var( - --mod-helptext-min-height, - var(--spectrum-helptext-min-height) - ); - display: flex; + --spectrum-helptext-bottom-to-workflow-icon: var( + --spectrum-helptext-top-to-workflow-icon + ); + color: var( + --highcontrast-helptext-content-color-default, + var( + --mod-helptext-content-color-default, + var(--spectrum-helptext-content-color-default) + ) + ); + font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); + min-block-size: var( + --mod-helptext-min-height, + var(--spectrum-helptext-min-height) + ); + display: flex; } .icon { - block-size: var( - --mod-helptext-icon-size, - var(--spectrum-helptext-icon-size) - ); - inline-size: var( - --mod-helptext-icon-size, - var(--spectrum-helptext-icon-size) - ); - flex-shrink: 0; - margin-inline-end: var( - --mod-helptext-text-to-visual, - var(--spectrum-helptext-text-to-visual) - ); - padding-block-start: var( - --mod-helptext-top-to-workflow-icon, - var(--spectrum-helptext-top-to-workflow-icon) - ); - padding-block-end: var( - --mod-helptext-bottom-to-workflow-icon, - var(--spectrum-helptext-bottom-to-workflow-icon) - ); + block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); + inline-size: var( + --mod-helptext-icon-size, + var(--spectrum-helptext-icon-size) + ); + flex-shrink: 0; + margin-inline-end: var( + --mod-helptext-text-to-visual, + var(--spectrum-helptext-text-to-visual) + ); + padding-block-start: var( + --mod-helptext-top-to-workflow-icon, + var(--spectrum-helptext-top-to-workflow-icon) + ); + padding-block-end: var( + --mod-helptext-bottom-to-workflow-icon, + var(--spectrum-helptext-bottom-to-workflow-icon) + ); } .text { - line-height: var( - --mod-helptext-line-height, - var(--spectrum-helptext-line-height) - ); - padding-block-start: var( - --mod-helptext-top-to-text, - var(--spectrum-helptext-top-to-text) - ); - padding-block-end: var( - --mod-helptext-bottom-to-text, - var(--spectrum-helptext-bottom-to-text) - ); + line-height: var( + --mod-helptext-line-height, + var(--spectrum-helptext-line-height) + ); + padding-block-start: var( + --mod-helptext-top-to-text, + var(--spectrum-helptext-top-to-text) + ); + padding-block-end: var( + --mod-helptext-bottom-to-text, + var(--spectrum-helptext-bottom-to-text) + ); } :host(:lang(ja)) .text, :host(:lang(ko)) .text, :host(:lang(zh)) .text { - line-height: var( - --mod-helptext-line-height-cjk, - var(--spectrum-helptext-line-height-cjk) - ); + line-height: var( + --mod-helptext-line-height-cjk, + var(--spectrum-helptext-line-height-cjk) + ); } -:host([variant='neutral']) .text { - color: var( - --highcontrast-helptext-content-color-default, - var( - --mod-helptext-content-color-default, - var(--spectrum-helptext-content-color-default) - ) - ); +:host([variant="neutral"]) .text { + color: var( + --highcontrast-helptext-content-color-default, + var( + --mod-helptext-content-color-default, + var(--spectrum-helptext-content-color-default) + ) + ); } -:host([variant='neutral']) .icon { - color: var( - --highcontrast-helptext-icon-color-default, - var( - --mod-helptext-icon-color-default, - var(--spectrum-helptext-icon-color-default) - ) - ); +:host([variant="neutral"]) .icon { + color: var( + --highcontrast-helptext-icon-color-default, + var( + --mod-helptext-icon-color-default, + var(--spectrum-helptext-icon-color-default) + ) + ); } -:host([variant='negative']) .text { - color: var( - --highcontrast-helptext-content-color-default, - var( - --mod-helptext-content-color-default, - var(--spectrum-helptext-content-color-default) - ) - ); +:host([variant="negative"]) .text { + color: var( + --highcontrast-helptext-content-color-default, + var( + --mod-helptext-content-color-default, + var(--spectrum-helptext-content-color-default) + ) + ); } -:host([variant='negative']) .icon { - color: var( - --highcontrast-helptext-icon-color-default, - var( - --mod-helptext-icon-color-default, - var(--spectrum-helptext-icon-color-default) - ) - ); +:host([variant="negative"]) .icon { + color: var( + --highcontrast-helptext-icon-color-default, + var( + --mod-helptext-icon-color-default, + var(--spectrum-helptext-icon-color-default) + ) + ); } :host([disabled]) .text { - color: var( - --highcontrast-helptext-content-color-default, - var( - --mod-helptext-content-color-default, - var(--spectrum-helptext-content-color-default) - ) - ); + color: var( + --highcontrast-helptext-content-color-default, + var( + --mod-helptext-content-color-default, + var(--spectrum-helptext-content-color-default) + ) + ); } :host([disabled]) .icon { - color: var( - --highcontrast-helptext-icon-color-default, - var( - --mod-helptext-icon-color-default, - var(--spectrum-helptext-icon-color-default) - ) - ); + color: var( + --highcontrast-helptext-icon-color-default, + var( + --mod-helptext-icon-color-default, + var(--spectrum-helptext-icon-color-default) + ) + ); } diff --git a/packages/icon/src/icon-arrow-overrides.css b/packages/icon/src/icon-arrow-overrides.css index 3720577ce1..4118be22b3 100644 --- a/packages/icon/src/icon-arrow-overrides.css +++ b/packages/icon/src/icon-arrow-overrides.css @@ -12,113 +12,113 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-ArrowRight75 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-75-icon-size); } .spectrum-UIIcon-ArrowRight100 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-100-icon-size); } .spectrum-UIIcon-ArrowRight200 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-200-icon-size); } .spectrum-UIIcon-ArrowRight300 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-300-icon-size); } .spectrum-UIIcon-ArrowRight400 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-400-icon-size); } .spectrum-UIIcon-ArrowRight500 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-500-icon-size); } .spectrum-UIIcon-ArrowRight600 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-600-icon-size); } .spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-75-icon-size); } .spectrum-UIIcon-ArrowDown100 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-100-icon-size); } .spectrum-UIIcon-ArrowDown200 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-200-icon-size); } .spectrum-UIIcon-ArrowDown300 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-300-icon-size); } .spectrum-UIIcon-ArrowDown400 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-400-icon-size); } .spectrum-UIIcon-ArrowDown500 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-500-icon-size); } .spectrum-UIIcon-ArrowDown600 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-600-icon-size); } .spectrum-UIIcon-ArrowLeft75 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-75-icon-size); } .spectrum-UIIcon-ArrowLeft100 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-100-icon-size); } .spectrum-UIIcon-ArrowLeft200 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-200-icon-size); } .spectrum-UIIcon-ArrowLeft300 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-300-icon-size); } .spectrum-UIIcon-ArrowLeft400 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-400-icon-size); } .spectrum-UIIcon-ArrowLeft500 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-500-icon-size); } .spectrum-UIIcon-ArrowLeft600 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-600-icon-size); } .spectrum-UIIcon-ArrowUp75 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-75-icon-size); } .spectrum-UIIcon-ArrowUp100 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-100-icon-size); } .spectrum-UIIcon-ArrowUp200 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-200-icon-size); } .spectrum-UIIcon-ArrowUp300 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-300-icon-size); } .spectrum-UIIcon-ArrowUp400 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-400-icon-size); } .spectrum-UIIcon-ArrowUp500 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-500-icon-size); } .spectrum-UIIcon-ArrowUp600 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-600-icon-size); } diff --git a/packages/icon/src/icon-asterisk-overrides.css b/packages/icon/src/icon-asterisk-overrides.css index 6cc48423c4..83bbce0234 100644 --- a/packages/icon/src/icon-asterisk-overrides.css +++ b/packages/icon/src/icon-asterisk-overrides.css @@ -12,17 +12,17 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-Asterisk75 { - --spectrum-icon-size: var(--system-ui-icon-asterisk-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-asterisk-75-icon-size); } .spectrum-UIIcon-Asterisk100 { - --spectrum-icon-size: var(--system-ui-icon-asterisk-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-asterisk-100-icon-size); } .spectrum-UIIcon-Asterisk200 { - --spectrum-icon-size: var(--system-ui-icon-asterisk-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-asterisk-200-icon-size); } .spectrum-UIIcon-Asterisk300 { - --spectrum-icon-size: var(--system-ui-icon-asterisk-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-asterisk-300-icon-size); } diff --git a/packages/icon/src/icon-checkmark-overrides.css b/packages/icon/src/icon-checkmark-overrides.css index 2eb94d9059..e1d024513e 100644 --- a/packages/icon/src/icon-checkmark-overrides.css +++ b/packages/icon/src/icon-checkmark-overrides.css @@ -12,33 +12,33 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-Checkmark50 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-50-icon-size); } .spectrum-UIIcon-Checkmark75 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-75-icon-size); } .spectrum-UIIcon-Checkmark100 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-100-icon-size); } .spectrum-UIIcon-Checkmark200 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-200-icon-size); } .spectrum-UIIcon-Checkmark300 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-300-icon-size); } .spectrum-UIIcon-Checkmark400 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-400-icon-size); } .spectrum-UIIcon-Checkmark500 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-500-icon-size); } .spectrum-UIIcon-Checkmark600 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-600-icon-size); } diff --git a/packages/icon/src/icon-chevron-overrides.css b/packages/icon/src/icon-chevron-overrides.css index d4ea6b15b6..37731502e7 100644 --- a/packages/icon/src/icon-chevron-overrides.css +++ b/packages/icon/src/icon-chevron-overrides.css @@ -12,113 +12,113 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-ChevronRight50 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-50-icon-size); } .spectrum-UIIcon-ChevronDown50 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-50-icon-size); } .spectrum-UIIcon-ChevronRight75 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-75-icon-size); } .spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-75-icon-size); } .spectrum-UIIcon-ChevronRight100 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-100-icon-size); } .spectrum-UIIcon-ChevronDown100 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-100-icon-size); } .spectrum-UIIcon-ChevronRight200 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-200-icon-size); } .spectrum-UIIcon-ChevronDown200 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-200-icon-size); } .spectrum-UIIcon-ChevronRight300 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-300-icon-size); } .spectrum-UIIcon-ChevronDown300 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-300-icon-size); } .spectrum-UIIcon-ChevronRight400 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-400-icon-size); } .spectrum-UIIcon-ChevronDown400 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-400-icon-size); } .spectrum-UIIcon-ChevronRight500 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-500-icon-size); } .spectrum-UIIcon-ChevronDown500 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-500-icon-size); } .spectrum-UIIcon-ChevronLeft50 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-50-icon-size); } .spectrum-UIIcon-ChevronLeft75 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-75-icon-size); } .spectrum-UIIcon-ChevronLeft100 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-100-icon-size); } .spectrum-UIIcon-ChevronLeft200 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-200-icon-size); } .spectrum-UIIcon-ChevronLeft300 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-300-icon-size); } .spectrum-UIIcon-ChevronLeft400 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-400-icon-size); } .spectrum-UIIcon-ChevronLeft500 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-500-icon-size); } .spectrum-UIIcon-ChevronUp50 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-50-icon-size); } .spectrum-UIIcon-ChevronUp75 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-75-icon-size); } .spectrum-UIIcon-ChevronUp100 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-100-icon-size); } .spectrum-UIIcon-ChevronUp200 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-200-icon-size); } .spectrum-UIIcon-ChevronUp300 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-300-icon-size); } .spectrum-UIIcon-ChevronUp400 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-400-icon-size); } .spectrum-UIIcon-ChevronUp500 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-500-icon-size); } diff --git a/packages/icon/src/icon-corner-triangle-overrides.css b/packages/icon/src/icon-corner-triangle-overrides.css index c3cca3d2c4..70d0614607 100644 --- a/packages/icon/src/icon-corner-triangle-overrides.css +++ b/packages/icon/src/icon-corner-triangle-overrides.css @@ -12,17 +12,17 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-CornerTriangle75 { - --spectrum-icon-size: var(--system-ui-icon-corner-triangle-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-75-icon-size); } .spectrum-UIIcon-CornerTriangle100 { - --spectrum-icon-size: var(--system-ui-icon-corner-triangle-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-100-icon-size); } .spectrum-UIIcon-CornerTriangle200 { - --spectrum-icon-size: var(--system-ui-icon-corner-triangle-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-200-icon-size); } .spectrum-UIIcon-CornerTriangle300 { - --spectrum-icon-size: var(--system-ui-icon-corner-triangle-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-300-icon-size); } diff --git a/packages/icon/src/icon-cross-overrides.css b/packages/icon/src/icon-cross-overrides.css index e725660f02..0f6bd29fb6 100644 --- a/packages/icon/src/icon-cross-overrides.css +++ b/packages/icon/src/icon-cross-overrides.css @@ -12,29 +12,29 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-Cross75 { - --spectrum-icon-size: var(--system-ui-icon-cross-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-75-icon-size); } .spectrum-UIIcon-Cross100 { - --spectrum-icon-size: var(--system-ui-icon-cross-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-100-icon-size); } .spectrum-UIIcon-Cross200 { - --spectrum-icon-size: var(--system-ui-icon-cross-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-200-icon-size); } .spectrum-UIIcon-Cross300 { - --spectrum-icon-size: var(--system-ui-icon-cross-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-300-icon-size); } .spectrum-UIIcon-Cross400 { - --spectrum-icon-size: var(--system-ui-icon-cross-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-400-icon-size); } .spectrum-UIIcon-Cross500 { - --spectrum-icon-size: var(--system-ui-icon-cross-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-500-icon-size); } .spectrum-UIIcon-Cross600 { - --spectrum-icon-size: var(--system-ui-icon-cross-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-600-icon-size); } diff --git a/packages/icon/src/icon-dash-overrides.css b/packages/icon/src/icon-dash-overrides.css index dd0c1c2a95..ab58d3126c 100644 --- a/packages/icon/src/icon-dash-overrides.css +++ b/packages/icon/src/icon-dash-overrides.css @@ -12,33 +12,33 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-Dash50 { - --spectrum-icon-size: var(--system-ui-icon-dash-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-50-icon-size); } .spectrum-UIIcon-Dash75 { - --spectrum-icon-size: var(--system-ui-icon-dash-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-75-icon-size); } .spectrum-UIIcon-Dash100 { - --spectrum-icon-size: var(--system-ui-icon-dash-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-100-icon-size); } .spectrum-UIIcon-Dash200 { - --spectrum-icon-size: var(--system-ui-icon-dash-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-200-icon-size); } .spectrum-UIIcon-Dash300 { - --spectrum-icon-size: var(--system-ui-icon-dash-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-300-icon-size); } .spectrum-UIIcon-Dash400 { - --spectrum-icon-size: var(--system-ui-icon-dash-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-400-icon-size); } .spectrum-UIIcon-Dash500 { - --spectrum-icon-size: var(--system-ui-icon-dash-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-500-icon-size); } .spectrum-UIIcon-Dash600 { - --spectrum-icon-size: var(--system-ui-icon-dash-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-600-icon-size); } diff --git a/packages/icon/src/icon-overrides.css b/packages/icon/src/icon-overrides.css index 5892b75257..e4b72b6c39 100644 --- a/packages/icon/src/icon-overrides.css +++ b/packages/icon/src/icon-overrides.css @@ -12,11 +12,11 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-icon-size-xxs: var(--system-icon-size-xxs); - --spectrum-icon-size-xs: var(--system-icon-size-xs); - --spectrum-icon-size-s: var(--system-icon-size-s); - --spectrum-icon-size-m: var(--system-icon-size-m); - --spectrum-icon-size-l: var(--system-icon-size-l); - --spectrum-icon-size-xl: var(--system-icon-size-xl); - --spectrum-icon-size-xxl: var(--system-icon-size-xxl); + --spectrum-icon-size-xxs: var(--system-icon-size-xxs); + --spectrum-icon-size-xs: var(--system-icon-size-xs); + --spectrum-icon-size-s: var(--system-icon-size-s); + --spectrum-icon-size-m: var(--system-icon-size-m); + --spectrum-icon-size-l: var(--system-icon-size-l); + --spectrum-icon-size-xl: var(--system-icon-size-xl); + --spectrum-icon-size-xxl: var(--system-icon-size-xxl); } diff --git a/packages/icon/src/spectrum-icon-arrow.css b/packages/icon/src/spectrum-icon-arrow.css index d62ee2485d..291582f6ff 100644 --- a/packages/icon/src/spectrum-icon-arrow.css +++ b/packages/icon/src/spectrum-icon-arrow.css @@ -18,7 +18,7 @@ governing permissions and limitations under the License. .spectrum-UIIcon-ArrowDown500, .spectrum-UIIcon-ArrowDown600, .spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-transform: rotate(90deg); + --spectrum-icon-transform: rotate(90deg); } .spectrum-UIIcon-ArrowLeft100, @@ -28,7 +28,7 @@ governing permissions and limitations under the License. .spectrum-UIIcon-ArrowLeft500, .spectrum-UIIcon-ArrowLeft600, .spectrum-UIIcon-ArrowLeft75 { - --spectrum-icon-transform: rotate(180deg); + --spectrum-icon-transform: rotate(180deg); } .spectrum-UIIcon-ArrowUp100, @@ -38,5 +38,5 @@ governing permissions and limitations under the License. .spectrum-UIIcon-ArrowUp500, .spectrum-UIIcon-ArrowUp600, .spectrum-UIIcon-ArrowUp75 { - --spectrum-icon-transform: rotate(270deg); + --spectrum-icon-transform: rotate(270deg); } diff --git a/packages/icon/src/spectrum-icon-chevron.css b/packages/icon/src/spectrum-icon-chevron.css index acf07d2c95..dede902e96 100644 --- a/packages/icon/src/spectrum-icon-chevron.css +++ b/packages/icon/src/spectrum-icon-chevron.css @@ -18,7 +18,7 @@ governing permissions and limitations under the License. .spectrum-UIIcon-ChevronDown50, .spectrum-UIIcon-ChevronDown500, .spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-transform: rotate(90deg); + --spectrum-icon-transform: rotate(90deg); } .spectrum-UIIcon-ChevronLeft100, @@ -28,7 +28,7 @@ governing permissions and limitations under the License. .spectrum-UIIcon-ChevronLeft50, .spectrum-UIIcon-ChevronLeft500, .spectrum-UIIcon-ChevronLeft75 { - --spectrum-icon-transform: rotate(180deg); + --spectrum-icon-transform: rotate(180deg); } .spectrum-UIIcon-ChevronUp100, @@ -38,5 +38,5 @@ governing permissions and limitations under the License. .spectrum-UIIcon-ChevronUp50, .spectrum-UIIcon-ChevronUp500, .spectrum-UIIcon-ChevronUp75 { - --spectrum-icon-transform: rotate(270deg); + --spectrum-icon-transform: rotate(270deg); } diff --git a/packages/icon/src/spectrum-icon.css b/packages/icon/src/spectrum-icon.css index b52ba87ce3..585f66b606 100644 --- a/packages/icon/src/spectrum-icon.css +++ b/packages/icon/src/spectrum-icon.css @@ -12,65 +12,65 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - pointer-events: none; - transform: none; - transform: var(--spectrum-icon-transform, none); - inline-size: var( - --mod-icon-inline-size, - var(--mod-icon-size, var(--spectrum-icon-size)) - ); - block-size: var( - --mod-icon-block-size, - var(--mod-icon-size, var(--spectrum-icon-size)) - ); - color: inherit; - color: var(--mod-icon-color, inherit); - fill: currentColor; - display: inline-block; + pointer-events: none; + transform: none; + transform: var(--spectrum-icon-transform, none); + inline-size: var( + --mod-icon-inline-size, + var(--mod-icon-size, var(--spectrum-icon-size)) + ); + block-size: var( + --mod-icon-block-size, + var(--mod-icon-size, var(--spectrum-icon-size)) + ); + color: inherit; + color: var(--mod-icon-color, inherit); + fill: currentColor; + display: inline-block; } -:host([size='xxs']), -:host([size='xxs']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xxs); +:host([size="xxs"]), +:host([size="xxs"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xxs); } -:host([size='xs']), -:host([size='xs']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xs); +:host([size="xs"]), +:host([size="xs"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xs); } -:host([size='s']), -:host([size='s']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-s); +:host([size="s"]), +:host([size="s"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-s); } :host, -:host([size='m']), -:host([size='m']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-m); +:host([size="m"]), +:host([size="m"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-m); } -:host([size='l']), -:host([size='l']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-l); +:host([size="l"]), +:host([size="l"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-l); } -:host([size='xl']), -:host([size='xl']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xl); +:host([size="xl"]), +:host([size="xl"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xl); } -:host([size='xxl']), -:host([size='xxl']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xxl); +:host([size="xxl"]), +:host([size="xxl"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xxl); } :host(:not(:root)) { - overflow: hidden; + overflow: hidden; } @media (forced-colors: active) { - :host { - forced-color-adjust: auto; - } + :host { + forced-color-adjust: auto; + } } diff --git a/packages/icons/src/icons-large.svg.ts b/packages/icons/src/icons-large.svg.ts index 3dfc03dd06..2b5bc80919 100644 --- a/packages/icons/src/icons-large.svg.ts +++ b/packages/icons/src/icons-large.svg.ts @@ -1,5 +1,6 @@ /* 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 @@ -9,5 +10,5 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { svg } from '@spectrum-web-components/base'; +import { svg } from "@spectrum-web-components/base"; export default svg``; diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts index f9fc0116df..8786730f4b 100644 --- a/packages/icons/src/icons-medium.svg.ts +++ b/packages/icons/src/icons-medium.svg.ts @@ -1,5 +1,6 @@ /* 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 @@ -9,5 +10,5 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { svg } from '@spectrum-web-components/base'; +import { svg } from "@spectrum-web-components/base"; export default svg``; diff --git a/packages/illustrated-message/src/illustratedmessage-overrides.css b/packages/illustrated-message/src/illustratedmessage-overrides.css index fc8930c47b..b0d434957e 100644 --- a/packages/illustrated-message/src/illustratedmessage-overrides.css +++ b/packages/illustrated-message/src/illustratedmessage-overrides.css @@ -12,76 +12,76 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-illustrated-message-description-max-inline-size: var( - --system-illustrated-message-description-max-inline-size - ); - --spectrum-illustrated-message-heading-max-inline-size: var( - --system-illustrated-message-heading-max-inline-size - ); - --spectrum-illustrated-message-title-to-heading: var( - --system-illustrated-message-title-to-heading - ); - --spectrum-illustrated-message-heading-to-description: var( - --system-illustrated-message-heading-to-description - ); - --spectrum-illustrated-message-illustration-color: var( - --system-illustrated-message-illustration-color - ); - --spectrum-illustrated-message-illustration-accent-color: var( - --system-illustrated-message-illustration-accent-color - ); - --spectrum-illustrated-message-title-font-family: var( - --system-illustrated-message-title-font-family - ); - --spectrum-illustrated-message-title-font-weight: var( - --system-illustrated-message-title-font-weight - ); - --spectrum-illustrated-message-title-font-style: var( - --system-illustrated-message-title-font-style - ); - --spectrum-illustrated-message-title-font-size: var( - --system-illustrated-message-title-font-size - ); - --spectrum-illustrated-message-title-line-height: var( - --system-illustrated-message-title-line-height - ); - --spectrum-illustrated-message-title-color: var( - --system-illustrated-message-title-color - ); - --spectrum-illustrated-message-description-font-family: var( - --system-illustrated-message-description-font-family - ); - --spectrum-illustrated-message-description-font-weight: var( - --system-illustrated-message-description-font-weight - ); - --spectrum-illustrated-message-description-font-style: var( - --system-illustrated-message-description-font-style - ); - --spectrum-illustrated-message-description-font-size: var( - --system-illustrated-message-description-font-size - ); - --spectrum-illustrated-message-description-line-height: var( - --system-illustrated-message-description-line-height - ); - --spectrum-illustrated-message-description-color: var( - --system-illustrated-message-description-color - ); + --spectrum-illustrated-message-description-max-inline-size: var( + --system-illustrated-message-description-max-inline-size + ); + --spectrum-illustrated-message-heading-max-inline-size: var( + --system-illustrated-message-heading-max-inline-size + ); + --spectrum-illustrated-message-title-to-heading: var( + --system-illustrated-message-title-to-heading + ); + --spectrum-illustrated-message-heading-to-description: var( + --system-illustrated-message-heading-to-description + ); + --spectrum-illustrated-message-illustration-color: var( + --system-illustrated-message-illustration-color + ); + --spectrum-illustrated-message-illustration-accent-color: var( + --system-illustrated-message-illustration-accent-color + ); + --spectrum-illustrated-message-title-font-family: var( + --system-illustrated-message-title-font-family + ); + --spectrum-illustrated-message-title-font-weight: var( + --system-illustrated-message-title-font-weight + ); + --spectrum-illustrated-message-title-font-style: var( + --system-illustrated-message-title-font-style + ); + --spectrum-illustrated-message-title-font-size: var( + --system-illustrated-message-title-font-size + ); + --spectrum-illustrated-message-title-line-height: var( + --system-illustrated-message-title-line-height + ); + --spectrum-illustrated-message-title-color: var( + --system-illustrated-message-title-color + ); + --spectrum-illustrated-message-description-font-family: var( + --system-illustrated-message-description-font-family + ); + --spectrum-illustrated-message-description-font-weight: var( + --system-illustrated-message-description-font-weight + ); + --spectrum-illustrated-message-description-font-style: var( + --system-illustrated-message-description-font-style + ); + --spectrum-illustrated-message-description-font-size: var( + --system-illustrated-message-description-font-size + ); + --spectrum-illustrated-message-description-line-height: var( + --system-illustrated-message-description-line-height + ); + --spectrum-illustrated-message-description-color: var( + --system-illustrated-message-description-color + ); } :host:lang(ja) { - --spectrum-illustrated-message-title-font-size: var( - --system-illustrated-message-lang-ja-title-font-size - ); + --spectrum-illustrated-message-title-font-size: var( + --system-illustrated-message-lang-ja-title-font-size + ); } :host:lang(zh) { - --spectrum-illustrated-message-title-font-size: var( - --system-illustrated-message-lang-zh-title-font-size - ); + --spectrum-illustrated-message-title-font-size: var( + --system-illustrated-message-lang-zh-title-font-size + ); } :host:lang(ko) { - --spectrum-illustrated-message-title-font-size: var( - --system-illustrated-message-lang-ko-title-font-size - ); + --spectrum-illustrated-message-title-font-size: var( + --system-illustrated-message-lang-ko-title-font-size + ); } diff --git a/packages/illustrated-message/src/spectrum-illustratedmessage.css b/packages/illustrated-message/src/spectrum-illustratedmessage.css index 09dba3c683..5350fbb7c7 100644 --- a/packages/illustrated-message/src/spectrum-illustratedmessage.css +++ b/packages/illustrated-message/src/spectrum-illustratedmessage.css @@ -12,125 +12,125 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-illustrated-message-illustration-color: CanvasText; - --highcontrast-illustrated-message-illustration-accent-color: Highlight; - } + :host { + --highcontrast-illustrated-message-illustration-color: CanvasText; + --highcontrast-illustrated-message-illustration-accent-color: Highlight; + } } :host { - block-size: 100%; - display: flex; - display: var(--mod-illustrated-message-display, flex); - text-align: center; - pointer-events: auto; - pointer-events: var(--mod-illustrated-message-pointer-events, auto); - max-inline-size: var(--mod-illustrated-message-content-maximum-width); - flex-direction: column; - justify-content: center; - align-items: center; + block-size: 100%; + display: flex; + display: var(--mod-illustrated-message-display, flex); + text-align: center; + pointer-events: auto; + pointer-events: var(--mod-illustrated-message-pointer-events, auto); + max-inline-size: var(--mod-illustrated-message-content-maximum-width); + flex-direction: column; + justify-content: center; + align-items: center; } #illustration { - color: var( - --highcontrast-illustrated-message-illustration-color, - var( - --mod-illustrated-message-illustration-color, - var(--spectrum-illustrated-message-illustration-color) - ) - ); - fill: currentColor; - stroke: currentColor; - margin-block-end: var( - --mod-illustrated-message-title-to-heading, - var(--spectrum-illustrated-message-title-to-heading) - ); + color: var( + --highcontrast-illustrated-message-illustration-color, + var( + --mod-illustrated-message-illustration-color, + var(--spectrum-illustrated-message-illustration-color) + ) + ); + fill: currentColor; + stroke: currentColor; + margin-block-end: var( + --mod-illustrated-message-title-to-heading, + var(--spectrum-illustrated-message-title-to-heading) + ); } .spectrum-IllustratedMessage-accent { - color: var( - --highcontrast-illustrated-message-illustration-accent-color, - var( - --mod-illustrated-message-illustration-accent-color, - var(--spectrum-illustrated-message-illustration-accent-color) - ) - ); - fill: currentColor; - stroke: currentColor; + color: var( + --highcontrast-illustrated-message-illustration-accent-color, + var( + --mod-illustrated-message-illustration-accent-color, + var(--spectrum-illustrated-message-illustration-accent-color) + ) + ); + fill: currentColor; + stroke: currentColor; } #heading { - font-family: var( - --mod-illustrated-message-title-font-family, - var(--spectrum-illustrated-message-title-font-family) - ); - font-weight: var( - --mod-illustrated-message-title-font-weight, - var(--spectrum-illustrated-message-title-font-weight) - ); - font-style: var( - --mod-illustrated-message-title-font-style, - var(--spectrum-illustrated-message-title-font-style) - ); - font-size: var( - --mod-illustrated-message-title-font-size, - var(--spectrum-illustrated-message-title-font-size) - ); - line-height: var( - --mod-illustrated-message-title-line-height, - var(--spectrum-illustrated-message-title-line-height) - ); - color: var( - --mod-illustrated-message-title-color, - var(--spectrum-illustrated-message-title-color) - ); - max-inline-size: var( - --mod-illustrated-message-heading-max-inline-size, - var(--spectrum-illustrated-message-heading-max-inline-size) - ); - margin-block-start: 0; - margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); + font-family: var( + --mod-illustrated-message-title-font-family, + var(--spectrum-illustrated-message-title-font-family) + ); + font-weight: var( + --mod-illustrated-message-title-font-weight, + var(--spectrum-illustrated-message-title-font-weight) + ); + font-style: var( + --mod-illustrated-message-title-font-style, + var(--spectrum-illustrated-message-title-font-style) + ); + font-size: var( + --mod-illustrated-message-title-font-size, + var(--spectrum-illustrated-message-title-font-size) + ); + line-height: var( + --mod-illustrated-message-title-line-height, + var(--spectrum-illustrated-message-title-line-height) + ); + color: var( + --mod-illustrated-message-title-color, + var(--spectrum-illustrated-message-title-color) + ); + max-inline-size: var( + --mod-illustrated-message-heading-max-inline-size, + var(--spectrum-illustrated-message-heading-max-inline-size) + ); + margin-block-start: 0; + margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); } #description { - position: var(--mod-illustrated-message-description-position); - z-index: var(--mod-illustrated-message-description-z-index); - pointer-events: auto; - pointer-events: var( - --mod-illustrated-message-description-pointer-events, - auto - ); - font-family: var( - --mod-illustrated-message-description-font-family, - var(--spectrum-illustrated-message-description-font-family) - ); - font-weight: var( - --mod-illustrated-message-description-font-weight, - var(--spectrum-illustrated-message-description-font-weight) - ); - font-style: var( - --mod-illustrated-message-description-font-style, - var(--spectrum-illustrated-message-description-font-style) - ); - font-size: var( - --mod-illustrated-message-description-font-size, - var(--spectrum-illustrated-message-description-font-size) - ); - line-height: var( - --mod-illustrated-message-description-line-height, - var(--spectrum-illustrated-message-description-line-height) - ); - color: var( - --mod-illustrated-message-description-color, - var(--spectrum-illustrated-message-description-color) - ); - max-inline-size: var( - --mod-illustrated-message-description-max-inline-size, - var(--spectrum-illustrated-message-description-max-inline-size) - ); - margin-block-start: var( - --mod-illustrated-message-heading-to-description, - var(--spectrum-illustrated-message-heading-to-description) - ); - margin-block-end: 0; + position: var(--mod-illustrated-message-description-position); + z-index: var(--mod-illustrated-message-description-z-index); + pointer-events: auto; + pointer-events: var( + --mod-illustrated-message-description-pointer-events, + auto + ); + font-family: var( + --mod-illustrated-message-description-font-family, + var(--spectrum-illustrated-message-description-font-family) + ); + font-weight: var( + --mod-illustrated-message-description-font-weight, + var(--spectrum-illustrated-message-description-font-weight) + ); + font-style: var( + --mod-illustrated-message-description-font-style, + var(--spectrum-illustrated-message-description-font-style) + ); + font-size: var( + --mod-illustrated-message-description-font-size, + var(--spectrum-illustrated-message-description-font-size) + ); + line-height: var( + --mod-illustrated-message-description-line-height, + var(--spectrum-illustrated-message-description-line-height) + ); + color: var( + --mod-illustrated-message-description-color, + var(--spectrum-illustrated-message-description-color) + ); + max-inline-size: var( + --mod-illustrated-message-description-max-inline-size, + var(--spectrum-illustrated-message-description-max-inline-size) + ); + margin-block-start: var( + --mod-illustrated-message-heading-to-description, + var(--spectrum-illustrated-message-heading-to-description) + ); + margin-block-end: 0; } diff --git a/packages/infield-button/src/infield-button-overrides.css b/packages/infield-button/src/infield-button-overrides.css index 8c05c2e2b2..eee79e7086 100644 --- a/packages/infield-button/src/infield-button-overrides.css +++ b/packages/infield-button/src/infield-button-overrides.css @@ -12,224 +12,216 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-infield-button-border-width: var( - --system-infield-button-border-width - ); - --spectrum-infield-button-border-color: var( - --system-infield-button-border-color - ); - --spectrum-infield-button-border-radius: var( - --system-infield-button-border-radius - ); - --spectrum-infield-button-border-radius-reset: var( - --system-infield-button-border-radius-reset - ); - --spectrum-infield-button-stacked-top-border-radius-start-start: var( - --system-infield-button-stacked-top-border-radius-start-start - ); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var( - --system-infield-button-stacked-bottom-border-radius-end-start - ); - --spectrum-infield-button-background-color: var( - --system-infield-button-background-color - ); - --spectrum-infield-button-background-color-hover: var( - --system-infield-button-background-color-hover - ); - --spectrum-infield-button-background-color-down: var( - --system-infield-button-background-color-down - ); - --spectrum-infield-button-background-color-key-focus: var( - --system-infield-button-background-color-key-focus - ); - --spectrum-infield-button-height: var(--system-infield-button-height); - --spectrum-infield-button-width: var(--system-infield-button-width); - --spectrum-infield-button-stacked-border-radius-reset: var( - --system-infield-button-stacked-border-radius-reset - ); - --spectrum-infield-button-edge-to-fill: var( - --system-infield-button-edge-to-fill - ); - --spectrum-infield-button-inner-edge-to-fill: var( - --system-infield-button-inner-edge-to-fill - ); - --spectrum-infield-button-fill-padding: var( - --system-infield-button-fill-padding - ); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --system-infield-button-stacked-fill-padding-inline - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --system-infield-button-stacked-fill-padding-outer - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --system-infield-button-stacked-fill-padding-inner - ); - --spectrum-infield-button-animation-duration: var( - --system-infield-button-animation-duration - ); - --spectrum-infield-button-icon-color: var( - --system-infield-button-icon-color - ); - --spectrum-infield-button-icon-color-hover: var( - --system-infield-button-icon-color-hover - ); - --spectrum-infield-button-icon-color-down: var( - --system-infield-button-icon-color-down - ); - --spectrum-infield-button-icon-color-key-focus: var( - --system-infield-button-icon-color-key-focus - ); - --spectrum-infield-button-fill-justify-content: var( - --system-infield-button-fill-justify-content - ); + --spectrum-infield-button-border-width: var( + --system-infield-button-border-width + ); + --spectrum-infield-button-border-color: var( + --system-infield-button-border-color + ); + --spectrum-infield-button-border-radius: var( + --system-infield-button-border-radius + ); + --spectrum-infield-button-border-radius-reset: var( + --system-infield-button-border-radius-reset + ); + --spectrum-infield-button-stacked-top-border-radius-start-start: var( + --system-infield-button-stacked-top-border-radius-start-start + ); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --system-infield-button-stacked-bottom-border-radius-end-start + ); + --spectrum-infield-button-background-color: var( + --system-infield-button-background-color + ); + --spectrum-infield-button-background-color-hover: var( + --system-infield-button-background-color-hover + ); + --spectrum-infield-button-background-color-down: var( + --system-infield-button-background-color-down + ); + --spectrum-infield-button-background-color-key-focus: var( + --system-infield-button-background-color-key-focus + ); + --spectrum-infield-button-height: var(--system-infield-button-height); + --spectrum-infield-button-width: var(--system-infield-button-width); + --spectrum-infield-button-stacked-border-radius-reset: var( + --system-infield-button-stacked-border-radius-reset + ); + --spectrum-infield-button-edge-to-fill: var( + --system-infield-button-edge-to-fill + ); + --spectrum-infield-button-inner-edge-to-fill: var( + --system-infield-button-inner-edge-to-fill + ); + --spectrum-infield-button-fill-padding: var( + --system-infield-button-fill-padding + ); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --system-infield-button-stacked-fill-padding-inline + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --system-infield-button-stacked-fill-padding-outer + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --system-infield-button-stacked-fill-padding-inner + ); + --spectrum-infield-button-animation-duration: var( + --system-infield-button-animation-duration + ); + --spectrum-infield-button-icon-color: var(--system-infield-button-icon-color); + --spectrum-infield-button-icon-color-hover: var( + --system-infield-button-icon-color-hover + ); + --spectrum-infield-button-icon-color-down: var( + --system-infield-button-icon-color-down + ); + --spectrum-infield-button-icon-color-key-focus: var( + --system-infield-button-icon-color-key-focus + ); + --spectrum-infield-button-fill-justify-content: var( + --system-infield-button-fill-justify-content + ); } :host([disabled]) { - --spectrum-infield-button-background-color: var( - --system-infield-button-disabled-background-color - ); - --spectrum-infield-button-background-color-hover: var( - --system-infield-button-disabled-background-color-hover - ); - --spectrum-infield-button-background-color-down: var( - --system-infield-button-disabled-background-color-down - ); - --spectrum-infield-button-border-color: var( - --system-infield-button-disabled-border-color - ); - --spectrum-infield-button-icon-color: var( - --system-infield-button-disabled-icon-color - ); - --spectrum-infield-button-icon-color-hover: var( - --system-infield-button-disabled-icon-color-hover - ); - --spectrum-infield-button-icon-color-down: var( - --system-infield-button-disabled-icon-color-down - ); - --spectrum-infield-button-icon-color-key-focus: var( - --system-infield-button-disabled-icon-color-key-focus - ); + --spectrum-infield-button-background-color: var( + --system-infield-button-disabled-background-color + ); + --spectrum-infield-button-background-color-hover: var( + --system-infield-button-disabled-background-color-hover + ); + --spectrum-infield-button-background-color-down: var( + --system-infield-button-disabled-background-color-down + ); + --spectrum-infield-button-border-color: var( + --system-infield-button-disabled-border-color + ); + --spectrum-infield-button-icon-color: var( + --system-infield-button-disabled-icon-color + ); + --spectrum-infield-button-icon-color-hover: var( + --system-infield-button-disabled-icon-color-hover + ); + --spectrum-infield-button-icon-color-down: var( + --system-infield-button-disabled-icon-color-down + ); + --spectrum-infield-button-icon-color-key-focus: var( + --system-infield-button-disabled-icon-color-key-focus + ); } -:host([size='s']) { - --spectrum-infield-button-height: var( - --system-infield-button-size-s-height - ); - --spectrum-infield-button-width: var(--system-infield-button-size-s-width); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --system-infield-button-size-s-stacked-fill-padding-inline - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --system-infield-button-size-s-stacked-fill-padding-outer - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --system-infield-button-size-s-stacked-fill-padding-inner - ); +:host([size="s"]) { + --spectrum-infield-button-height: var(--system-infield-button-size-s-height); + --spectrum-infield-button-width: var(--system-infield-button-size-s-width); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --system-infield-button-size-s-stacked-fill-padding-inline + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --system-infield-button-size-s-stacked-fill-padding-outer + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --system-infield-button-size-s-stacked-fill-padding-inner + ); } -:host([size='l']) { - --spectrum-infield-button-height: var( - --system-infield-button-size-l-height - ); - --spectrum-infield-button-width: var(--system-infield-button-size-l-width); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --system-infield-button-size-l-stacked-fill-padding-inline - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --system-infield-button-size-l-stacked-fill-padding-outer - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --system-infield-button-size-l-stacked-fill-padding-inner - ); +:host([size="l"]) { + --spectrum-infield-button-height: var(--system-infield-button-size-l-height); + --spectrum-infield-button-width: var(--system-infield-button-size-l-width); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --system-infield-button-size-l-stacked-fill-padding-inline + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --system-infield-button-size-l-stacked-fill-padding-outer + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --system-infield-button-size-l-stacked-fill-padding-inner + ); } -:host([size='xl']) { - --spectrum-infield-button-height: var( - --system-infield-button-size-xl-height - ); - --spectrum-infield-button-width: var(--system-infield-button-size-xl-width); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --system-infield-button-size-xl-stacked-fill-padding-inline - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --system-infield-button-size-xl-stacked-fill-padding-outer - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --system-infield-button-size-xl-stacked-fill-padding-inner - ); +:host([size="xl"]) { + --spectrum-infield-button-height: var(--system-infield-button-size-xl-height); + --spectrum-infield-button-width: var(--system-infield-button-size-xl-width); + --spectrum-infield-button-stacked-fill-padding-inline: var( + --system-infield-button-size-xl-stacked-fill-padding-inline + ); + --spectrum-infield-button-stacked-fill-padding-outer: var( + --system-infield-button-size-xl-stacked-fill-padding-outer + ); + --spectrum-infield-button-stacked-fill-padding-inner: var( + --system-infield-button-size-xl-stacked-fill-padding-inner + ); } -:host([block='start']) { - --spectrum-infield-button-width: var(--system-infield-button-top-width); +:host([block="start"]) { + --spectrum-infield-button-width: var(--system-infield-button-top-width); } -:host([block='end']) { - --spectrum-infield-button-width: var(--system-infield-button-bottom-width); +:host([block="end"]) { + --spectrum-infield-button-width: var(--system-infield-button-bottom-width); } -:host([block='start'][size='s']) { - --spectrum-infield-button-width: var( - --system-infield-button-top-size-s-width - ); +:host([block="start"][size="s"]) { + --spectrum-infield-button-width: var( + --system-infield-button-top-size-s-width + ); } -:host([block='end'][size='s']) { - --spectrum-infield-button-width: var( - --system-infield-button-bottom-size-s-width - ); +:host([block="end"][size="s"]) { + --spectrum-infield-button-width: var( + --system-infield-button-bottom-size-s-width + ); } -:host([block='start'][size='l']) { - --spectrum-infield-button-width: var( - --system-infield-button-top-size-l-width - ); +:host([block="start"][size="l"]) { + --spectrum-infield-button-width: var( + --system-infield-button-top-size-l-width + ); } -:host([block='end'][size='l']) { - --spectrum-infield-button-width: var( - --system-infield-button-bottom-size-l-width - ); +:host([block="end"][size="l"]) { + --spectrum-infield-button-width: var( + --system-infield-button-bottom-size-l-width + ); } -:host([block='start'][size='xl']) { - --spectrum-infield-button-width: var( - --system-infield-button-top-size-xl-width - ); +:host([block="start"][size="xl"]) { + --spectrum-infield-button-width: var( + --system-infield-button-top-size-xl-width + ); } -:host([block='end'][size='xl']) { - --spectrum-infield-button-width: var( - --system-infield-button-bottom-size-xl-width - ); +:host([block="end"][size="xl"]) { + --spectrum-infield-button-width: var( + --system-infield-button-bottom-size-xl-width + ); } :host([quiet]) { - --spectrum-infield-button-background-color: var( - --system-infield-button-quiet-background-color - ); - --spectrum-infield-button-background-color-hover: var( - --system-infield-button-quiet-background-color-hover - ); - --spectrum-infield-button-background-color-down: var( - --system-infield-button-quiet-background-color-down - ); - --spectrum-infield-button-background-color-key-focus: var( - --system-infield-button-quiet-background-color-key-focus - ); - --spectrum-infield-border-color: var( - --system-infield-button-quiet-infield-border-color - ); - --spectrum-infield-button-border-width: var( - --system-infield-button-quiet-border-width - ); + --spectrum-infield-button-background-color: var( + --system-infield-button-quiet-background-color + ); + --spectrum-infield-button-background-color-hover: var( + --system-infield-button-quiet-background-color-hover + ); + --spectrum-infield-button-background-color-down: var( + --system-infield-button-quiet-background-color-down + ); + --spectrum-infield-button-background-color-key-focus: var( + --system-infield-button-quiet-background-color-key-focus + ); + --spectrum-infield-border-color: var( + --system-infield-button-quiet-infield-border-color + ); + --spectrum-infield-button-border-width: var( + --system-infield-button-quiet-border-width + ); } :host([quiet][disabled]) { - --spectrum-infield-button-background-color: var( - --system-infield-button-quiet-disabled-background-color - ); - --spectrum-infield-button-border-color: var( - --system-infield-button-quiet-disabled-border-color - ); + --spectrum-infield-button-background-color: var( + --system-infield-button-quiet-disabled-background-color + ); + --spectrum-infield-button-border-color: var( + --system-infield-button-quiet-disabled-border-color + ); } diff --git a/packages/infield-button/src/spectrum-infield-button.css b/packages/infield-button/src/spectrum-infield-button.css index 3591774f80..870ec916dd 100644 --- a/packages/infield-button/src/spectrum-infield-button.css +++ b/packages/infield-button/src/spectrum-infield-button.css @@ -12,426 +12,425 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host(:is(:active, [active])):not(:disabled), - :host(:focus-visible):not(:disabled) { - --highcontrast-infield-button-border-color: Highlight; - } + :host(:is(:active, [active])):not(:disabled), + :host(:focus-visible):not(:disabled) { + --highcontrast-infield-button-border-color: Highlight; + } - @media (hover: hover) { - :host(:hover):not(:disabled) { - --highcontrast-infield-button-border-color: Highlight; - } - } + @media (hover: hover) { + :host(:hover):not(:disabled) { + --highcontrast-infield-button-border-color: Highlight; + } + } } :host { - background-color: initial; - cursor: pointer; - block-size: var( - --mod-infield-button-height, - var(--spectrum-infield-button-height) - ); - inline-size: var( - --mod-infield-button-width, - var(--spectrum-infield-button-width) - ); - padding: var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ); - border-style: none; - justify-content: center; - align-items: center; - display: flex; + background-color: initial; + cursor: pointer; + block-size: var( + --mod-infield-button-height, + var(--spectrum-infield-button-height) + ); + inline-size: var( + --mod-infield-button-width, + var(--spectrum-infield-button-width) + ); + padding: var( + --mod-infield-button-edge-to-fill, + var(--spectrum-infield-button-edge-to-fill) + ); + border-style: none; + justify-content: center; + align-items: center; + display: flex; } .fill { - block-size: 100%; - inline-size: 100%; - background-color: var( - --mod-infield-button-background-color, - var(--spectrum-infield-button-background-color) - ); - border-width: var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ); - border-style: solid; - border-color: var( - --highcontrast-infield-button-border-color, - var( - --mod-infield-button-border-color, - var(--spectrum-infield-button-border-color) - ) - ); - padding: var( - --mod-infield-button-fill-padding, - var(--spectrum-infield-button-fill-padding) - ); - border-start-start-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ); - border-start-end-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ); - border-end-end-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ); - border-end-start-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ); + block-size: 100%; + inline-size: 100%; + background-color: var( + --mod-infield-button-background-color, + var(--spectrum-infield-button-background-color) + ); + border-width: var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ); + border-style: solid; + border-color: var( + --highcontrast-infield-button-border-color, + var( + --mod-infield-button-border-color, + var(--spectrum-infield-button-border-color) + ) + ); + padding: var( + --mod-infield-button-fill-padding, + var(--spectrum-infield-button-fill-padding) + ); + border-start-start-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + border-start-end-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + border-end-end-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); + border-end-start-radius: var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ); } ::slotted(*) { - color: var( - --mod-infield-button-icon-color, - var(--spectrum-infield-button-icon-color) - ); + color: var( + --mod-infield-button-icon-color, + var(--spectrum-infield-button-icon-color) + ); } -:host([inline='end']) .fill { - border-start-start-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) - ); - border-end-start-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) - ); +:host([inline="end"]) .fill { + border-start-start-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); + border-end-start-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); } -:host([inline='start']) .fill { - border-start-end-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) - ); - border-end-end-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) - ); +:host([inline="start"]) .fill { + border-start-end-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); + border-end-end-radius: var( + --mod-infield-button-border-radius-reset, + var(--spectrum-infield-button-border-radius-reset) + ); } -:host([block='end']), -:host([block='start']) { - --spectrum-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-medium) - ); +:host([block="end"]), +:host([block="start"]) { + --spectrum-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-medium) + ); } -:host([block='end'][size='s']), -:host([block='start'][size='s']) { - --spectrum-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-small) - ); +:host([block="end"][size="s"]), +:host([block="start"][size="s"]) { + --spectrum-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-small) + ); } -:host([block='end'][size='l']), -:host([block='start'][size='l']) { - --spectrum-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-large) - ); +:host([block="end"][size="l"]), +:host([block="start"][size="l"]) { + --spectrum-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-large) + ); } -:host([block='end'][size='xl']), -:host([block='start'][size='xl']) { - --spectrum-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-extra-large) - ); +:host([block="end"][size="xl"]), +:host([block="start"][size="xl"]) { + --spectrum-infield-button-width: var( + --mod-infield-button-width-stacked, + var(--spectrum-in-field-button-width-stacked-extra-large) + ); } :host([quiet]) { - --spectrum-infield-button-background-color: var( - --mod-infield-button-background-color-quiet, - transparent - ); - --spectrum-infield-button-background-color-hover: var( - --mod-infield-button-background-color-hover-quiet, - transparent - ); - --spectrum-infield-button-background-color-down: var( - --mod-infield-button-background-color-down-quiet, - transparent - ); - --spectrum-infield-button-background-color-key-focus: var( - --mod-infield-button-background-color-key-focus-quiet, - transparent - ); - --spectrum-infield-border-color: var( - --mod-infield-border-color-quiet, - transparent - ); - --spectrum-infield-button-border-width: var( - --mod-infield-button-border-width-quiet, - 0 - ); + --spectrum-infield-button-background-color: var( + --mod-infield-button-background-color-quiet, + transparent + ); + --spectrum-infield-button-background-color-hover: var( + --mod-infield-button-background-color-hover-quiet, + transparent + ); + --spectrum-infield-button-background-color-down: var( + --mod-infield-button-background-color-down-quiet, + transparent + ); + --spectrum-infield-button-background-color-key-focus: var( + --mod-infield-button-background-color-key-focus-quiet, + transparent + ); + --spectrum-infield-border-color: var( + --mod-infield-border-color-quiet, + transparent + ); + --spectrum-infield-button-border-width: var( + --mod-infield-button-border-width-quiet, + 0 + ); } :host([quiet][disabled]) { - --spectrum-infield-button-background-color: var( - --mod-infield-button-background-color-quiet-disabled, - transparent - ); - --spectrum-infield-button-border-color: var( - --mod-infield-button-border-color-quiet-disabled, - transparent - ); + --spectrum-infield-button-background-color: var( + --mod-infield-button-background-color-quiet-disabled, + transparent + ); + --spectrum-infield-button-border-color: var( + --mod-infield-button-border-color-quiet-disabled, + transparent + ); } :host([disabled]) { - --spectrum-infield-button-background-color: var( - --mod-infield-button-background-color-disabled, - var(--spectrum-disabled-background-color) - ); - --spectrum-infield-button-background-color-hover: var( - --mod-infield-button-background-color-hover-disabled, - var(--spectrum-disabled-background-color) - ); - --spectrum-infield-button-background-color-down: var( - --mod-infield-button-background-color-down-disabled, - var(--spectrum-disabled-background-color) - ); - --spectrum-infield-button-border-color: var( - --mod-infield-button-border-color-disabled, - var(--spectrum-disabled-background-color) - ); - --spectrum-infield-button-icon-color: var( - --mod-infield-button-icon-color-disabled, - var(--spectrum-disabled-content-color) - ); - --spectrum-infield-button-icon-color-hover: var( - --mod-infield-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --spectrum-infield-button-icon-color-down: var( - --mod-infield-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --spectrum-infield-button-icon-color-key-focus: var( - --mod-infield-button-icon-color-key-focus-disabled, - var(--spectrum-disabled-content-color) - ); - cursor: auto; + --spectrum-infield-button-background-color: var( + --mod-infield-button-background-color-disabled, + var(--spectrum-disabled-background-color) + ); + --spectrum-infield-button-background-color-hover: var( + --mod-infield-button-background-color-hover-disabled, + var(--spectrum-disabled-background-color) + ); + --spectrum-infield-button-background-color-down: var( + --mod-infield-button-background-color-down-disabled, + var(--spectrum-disabled-background-color) + ); + --spectrum-infield-button-border-color: var( + --mod-infield-button-border-color-disabled, + var(--spectrum-disabled-background-color) + ); + --spectrum-infield-button-icon-color: var( + --mod-infield-button-icon-color-disabled, + var(--spectrum-disabled-content-color) + ); + --spectrum-infield-button-icon-color-hover: var( + --mod-infield-button-icon-color-hover-disabled, + var(--spectrum-disabled-content-color) + ); + --spectrum-infield-button-icon-color-down: var( + --mod-infield-button-icon-color-down-disabled, + var(--spectrum-disabled-content-color) + ); + --spectrum-infield-button-icon-color-key-focus: var( + --mod-infield-button-icon-color-key-focus-disabled, + var(--spectrum-disabled-content-color) + ); + cursor: auto; } @media (hover: hover) { - :host(:hover) .fill { - background-color: var( - --mod-infield-button-background-color-hover, - var(--spectrum-infield-button-background-color-hover) - ); - } + :host(:hover) .fill { + background-color: var( + --mod-infield-button-background-color-hover, + var(--spectrum-infield-button-background-color-hover) + ); + } - :host(:hover) ::slotted(*) { - color: var( - --mod-infield-button-icon-color-hover, - var(--spectrum-infield-button-icon-color-hover) - ); - } + :host(:hover) ::slotted(*) { + color: var( + --mod-infield-button-icon-color-hover, + var(--spectrum-infield-button-icon-color-hover) + ); + } } :host(:is(:active, [active])) .fill { - background-color: var( - --mod-infield-button-background-color-down, - var(--spectrum-infield-button-background-color-down) - ); + background-color: var( + --mod-infield-button-background-color-down, + var(--spectrum-infield-button-background-color-down) + ); } :host(:is(:active, [active])) ::slotted(*) { - color: var( - --mod-infield-button-icon-color-down, - var(--spectrum-infield-button-icon-color-down) - ); + color: var( + --mod-infield-button-icon-color-down, + var(--spectrum-infield-button-icon-color-down) + ); } :host(:focus-visible) { - outline: none; + outline: none; } :host(:focus-visible) .fill { - background-color: var( - --mod-infield-button-background-color-key-focus, - var(--spectrum-infield-button-background-color-key-focus) - ); + background-color: var( + --mod-infield-button-background-color-key-focus, + var(--spectrum-infield-button-background-color-key-focus) + ); } :host(:focus-visible) ::slotted(*) { - color: var( - --mod-infield-button-icon-color-key-focus, - var(--spectrum-infield-button-icon-color-key-focus) - ); + color: var( + --mod-infield-button-icon-color-key-focus, + var(--spectrum-infield-button-icon-color-key-focus) + ); } .fill { - align-items: center; - justify-content: var( - --mod-infield-button-fill-justify-content, - var(--spectrum-infield-button-fill-justify-content) - ); - display: flex; + align-items: center; + justify-content: var( + --mod-infield-button-fill-justify-content, + var(--spectrum-infield-button-fill-justify-content) + ); + display: flex; } -:host([block='end']), -:host([block='start']) { - block-size: calc( - var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / - 2 - ); +:host([block="end"]), +:host([block="start"]) { + block-size: calc( + var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2 + ); } -:host([block='end']) .fill, -:host([block='start']) .fill { - box-sizing: border-box; - padding-inline-start: calc( - var( - --mod-infield-button-stacked-fill-padding-inline, - var(--spectrum-infield-button-stacked-fill-padding-inline) - ) - - var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); - padding-inline-end: calc( - var( - --mod-infield-button-stacked-fill-padding-inline, - var(--spectrum-infield-button-stacked-fill-padding-inline) - ) - - var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); +:host([block="end"]) .fill, +:host([block="start"]) .fill { + box-sizing: border-box; + padding-inline-start: calc( + var( + --mod-infield-button-stacked-fill-padding-inline, + var(--spectrum-infield-button-stacked-fill-padding-inline) + ) - + var( + --mod-infield-button-edge-to-fill, + var(--spectrum-infield-button-edge-to-fill) + ) - + var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ) + ); + padding-inline-end: calc( + var( + --mod-infield-button-stacked-fill-padding-inline, + var(--spectrum-infield-button-stacked-fill-padding-inline) + ) - + var( + --mod-infield-button-edge-to-fill, + var(--spectrum-infield-button-edge-to-fill) + ) - + var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ) + ); } -:host([block='start']) { - padding-block-end: var( - --mod-infield-button-inner-edge-to-fill, - var(--spectrum-infield-button-inner-edge-to-fill) - ); +:host([block="start"]) { + padding-block-end: var( + --mod-infield-button-inner-edge-to-fill, + var(--spectrum-infield-button-inner-edge-to-fill) + ); } -:host([block='start']) .fill { - border-block-end: none; - border-start-start-radius: var( - --mod-infield-button-stacked-top-border-radius-start-start, - var(--spectrum-infield-button-stacked-top-border-radius-start-start) - ); - border-end-end-radius: var( - --mod-infield-button-stacked-border-radius-reset, - var(--spectrum-infield-button-stacked-border-radius-reset) - ); - border-end-start-radius: var( - --mod-infield-button-stacked-border-radius-reset, - var(--spectrum-infield-button-stacked-border-radius-reset) - ); - padding-block-start: calc( - var( - --mod-infield-button-stacked-fill-padding-outer, - var(--spectrum-infield-button-stacked-fill-padding-outer) - ) - - var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); - padding-block-end: calc( - var( - --mod-infield-button-stacked-fill-padding-inner, - var(--spectrum-infield-button-stacked-fill-padding-inner) - ) - - var( - --mod-infield-button-inner-edge-to-fill, - var(--spectrum-infield-button-inner-edge-to-fill) - ) - ); +:host([block="start"]) .fill { + border-block-end: none; + border-start-start-radius: var( + --mod-infield-button-stacked-top-border-radius-start-start, + var(--spectrum-infield-button-stacked-top-border-radius-start-start) + ); + border-end-end-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + border-end-start-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + padding-block-start: calc( + var( + --mod-infield-button-stacked-fill-padding-outer, + var(--spectrum-infield-button-stacked-fill-padding-outer) + ) - + var( + --mod-infield-button-edge-to-fill, + var(--spectrum-infield-button-edge-to-fill) + ) - + var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ) + ); + padding-block-end: calc( + var( + --mod-infield-button-stacked-fill-padding-inner, + var(--spectrum-infield-button-stacked-fill-padding-inner) + ) - + var( + --mod-infield-button-inner-edge-to-fill, + var(--spectrum-infield-button-inner-edge-to-fill) + ) + ); } -:host([block='end']) { - padding-block-start: var( - --mod-infield-button-inner-edge-to-fill, - var(--spectrum-infield-button-inner-edge-to-fill) - ); +:host([block="end"]) { + padding-block-start: var( + --mod-infield-button-inner-edge-to-fill, + var(--spectrum-infield-button-inner-edge-to-fill) + ); } -:host([block='end']) .fill { - border-block-end-width: var( - --mod-infield-button-stacked-bottom-border-block-end-width, - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); - border-start-start-radius: var( - --mod-infield-button-stacked-border-radius-reset, - var(--spectrum-infield-button-stacked-border-radius-reset) - ); - border-start-end-radius: var( - --mod-infield-button-stacked-border-radius-reset, - var(--spectrum-infield-button-stacked-border-radius-reset) - ); - border-end-end-radius: var( - --mod-infield-button-stacked-bottom-border-radius-end-end, - var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ) - ); - border-end-start-radius: var( - --mod-infield-button-stacked-bottom-border-radius-end-start, - var(--spectrum-infield-button-stacked-bottom-border-radius-end-start) - ); - padding-block-start: calc( - var( - --mod-infield-button-stacked-fill-padding-inner, - var(--spectrum-infield-button-stacked-fill-padding-inner) - ) - - var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); - padding-block-end: calc( - var( - --mod-infield-button-stacked-fill-padding-outer, - var(--spectrum-infield-button-stacked-fill-padding-outer) - ) - - var( - --mod-infield-button-inner-edge-to-fill, - var(--spectrum-infield-button-inner-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); +:host([block="end"]) .fill { + border-block-end-width: var( + --mod-infield-button-stacked-bottom-border-block-end-width, + var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ) + ); + border-start-start-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + border-start-end-radius: var( + --mod-infield-button-stacked-border-radius-reset, + var(--spectrum-infield-button-stacked-border-radius-reset) + ); + border-end-end-radius: var( + --mod-infield-button-stacked-bottom-border-radius-end-end, + var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ) + ); + border-end-start-radius: var( + --mod-infield-button-stacked-bottom-border-radius-end-start, + var(--spectrum-infield-button-stacked-bottom-border-radius-end-start) + ); + padding-block-start: calc( + var( + --mod-infield-button-stacked-fill-padding-inner, + var(--spectrum-infield-button-stacked-fill-padding-inner) + ) - + var( + --mod-infield-button-edge-to-fill, + var(--spectrum-infield-button-edge-to-fill) + ) - + var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ) + ); + padding-block-end: calc( + var( + --mod-infield-button-stacked-fill-padding-outer, + var(--spectrum-infield-button-stacked-fill-padding-outer) + ) - + var( + --mod-infield-button-inner-edge-to-fill, + var(--spectrum-infield-button-inner-edge-to-fill) + ) - + var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ) + ); } ::slotted(*) { - display: initial; - flex-shrink: 0; - margin: 0 !important; + display: initial; + flex-shrink: 0; + margin: 0 !important; } diff --git a/packages/link/src/link-overrides.css b/packages/link/src/link-overrides.css index ea14dbd0a0..e12f7703bd 100644 --- a/packages/link/src/link-overrides.css +++ b/packages/link/src/link-overrides.css @@ -12,31 +12,31 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-link-animation-duration: var(--system-link-animation-duration); - --spectrum-link-text-color-primary-default: var( - --system-link-text-color-primary-default - ); - --spectrum-link-text-color-primary-hover: var( - --system-link-text-color-primary-hover - ); - --spectrum-link-text-color-primary-active: var( - --system-link-text-color-primary-active - ); - --spectrum-link-text-color-primary-focus: var( - --system-link-text-color-primary-focus - ); - --spectrum-link-text-color-secondary-default: var( - --system-link-text-color-secondary-default - ); - --spectrum-link-text-color-secondary-hover: var( - --system-link-text-color-secondary-hover - ); - --spectrum-link-text-color-secondary-active: var( - --system-link-text-color-secondary-active - ); - --spectrum-link-text-color-secondary-focus: var( - --system-link-text-color-secondary-focus - ); - --spectrum-link-text-color-white: var(--system-link-text-color-white); - --spectrum-link-text-color-black: var(--system-link-text-color-black); + --spectrum-link-animation-duration: var(--system-link-animation-duration); + --spectrum-link-text-color-primary-default: var( + --system-link-text-color-primary-default + ); + --spectrum-link-text-color-primary-hover: var( + --system-link-text-color-primary-hover + ); + --spectrum-link-text-color-primary-active: var( + --system-link-text-color-primary-active + ); + --spectrum-link-text-color-primary-focus: var( + --system-link-text-color-primary-focus + ); + --spectrum-link-text-color-secondary-default: var( + --system-link-text-color-secondary-default + ); + --spectrum-link-text-color-secondary-hover: var( + --system-link-text-color-secondary-hover + ); + --spectrum-link-text-color-secondary-active: var( + --system-link-text-color-secondary-active + ); + --spectrum-link-text-color-secondary-focus: var( + --system-link-text-color-secondary-focus + ); + --spectrum-link-text-color-white: var(--system-link-text-color-white); + --spectrum-link-text-color-black: var(--system-link-text-color-black); } diff --git a/packages/link/src/spectrum-link.css b/packages/link/src/spectrum-link.css index 19a0bcde75..d071f687f4 100644 --- a/packages/link/src/spectrum-link.css +++ b/packages/link/src/spectrum-link.css @@ -12,163 +12,154 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-link-text-color-primary-default: LinkText; - --highcontrast-link-text-color-primary-hover: LinkText; - --highcontrast-link-text-color-primary-active: LinkText; - --highcontrast-link-text-color-primary-focus: LinkText; - --highcontrast-link-text-color-secondary-default: LinkText; - --highcontrast-link-text-color-secondary-hover: LinkText; - --highcontrast-link-text-color-secondary-active: LinkText; - --highcontrast-link-text-color-secondary-focus: LinkText; - --highcontrast-link-text-color-white: LinkText; - --highcontrast-link-text-color-black: LinkText; - } + :host { + --highcontrast-link-text-color-primary-default: LinkText; + --highcontrast-link-text-color-primary-hover: LinkText; + --highcontrast-link-text-color-primary-active: LinkText; + --highcontrast-link-text-color-primary-focus: LinkText; + --highcontrast-link-text-color-secondary-default: LinkText; + --highcontrast-link-text-color-secondary-hover: LinkText; + --highcontrast-link-text-color-secondary-active: LinkText; + --highcontrast-link-text-color-secondary-focus: LinkText; + --highcontrast-link-text-color-white: LinkText; + --highcontrast-link-text-color-black: LinkText; + } } a { - background-color: initial; - -webkit-text-decoration-skip: objects; - text-decoration-skip: objects; - transition: color - var( - --mod-link-animation-duration, - var(--spectrum-link-animation-duration) - ) - ease-in-out; - cursor: pointer; - color: var( - --highcontrast-link-text-color-primary-default, - var( - --mod-link-text-color-primary-default, - var(--spectrum-link-text-color-primary-default) - ) - ); - outline: none; - -webkit-text-decoration: underline; - text-decoration: underline; + background-color: initial; + -webkit-text-decoration-skip: objects; + text-decoration-skip: objects; + transition: color + var(--mod-link-animation-duration, var(--spectrum-link-animation-duration)) + ease-in-out; + cursor: pointer; + color: var( + --highcontrast-link-text-color-primary-default, + var( + --mod-link-text-color-primary-default, + var(--spectrum-link-text-color-primary-default) + ) + ); + outline: none; + -webkit-text-decoration: underline; + text-decoration: underline; } a:active { - color: var( - --highcontrast-link-text-color-primary-active, - var( - --mod-link-text-color-primary-active, - var(--spectrum-link-text-color-primary-active) - ) - ); + color: var( + --highcontrast-link-text-color-primary-active, + var( + --mod-link-text-color-primary-active, + var(--spectrum-link-text-color-primary-active) + ) + ); } a:focus-visible { - color: var( - --highcontrast-link-text-color-primary-focus, - var( - --mod-link-text-color-primary-focus, - var(--spectrum-link-text-color-primary-focus) - ) - ); - -webkit-text-decoration: underline double; - text-decoration: underline double; - text-decoration-color: inherit; - text-decoration-color: var(--highcontrast-link-focus-color, inherit); + color: var( + --highcontrast-link-text-color-primary-focus, + var( + --mod-link-text-color-primary-focus, + var(--spectrum-link-text-color-primary-focus) + ) + ); + -webkit-text-decoration: underline double; + text-decoration: underline double; + text-decoration-color: inherit; + text-decoration-color: var(--highcontrast-link-focus-color, inherit); } -:host([variant='secondary']) a { - color: var( - --highcontrast-link-text-color-secondary-default, - var( - --mod-link-text-color-secondary-default, - var(--spectrum-link-text-color-secondary-default) - ) - ); +:host([variant="secondary"]) a { + color: var( + --highcontrast-link-text-color-secondary-default, + var( + --mod-link-text-color-secondary-default, + var(--spectrum-link-text-color-secondary-default) + ) + ); } -:host([variant='secondary']) a:active { - color: var( - --highcontrast-link-text-color-secondary-active, - var( - --mod-link-text-color-secondary-active, - var(--spectrum-link-text-color-secondary-active) - ) - ); +:host([variant="secondary"]) a:active { + color: var( + --highcontrast-link-text-color-secondary-active, + var( + --mod-link-text-color-secondary-active, + var(--spectrum-link-text-color-secondary-active) + ) + ); } -:host([variant='secondary']) a:focus { - color: var( - --highcontrast-link-text-color-secondary-focus, - var( - --mod-link-text-color-secondary-focus, - var(--spectrum-link-text-color-secondary-focus) - ) - ); +:host([variant="secondary"]) a:focus { + color: var( + --highcontrast-link-text-color-secondary-focus, + var( + --mod-link-text-color-secondary-focus, + var(--spectrum-link-text-color-secondary-focus) + ) + ); } :host([quiet]) a { - -webkit-text-decoration: none; - text-decoration: none; + -webkit-text-decoration: none; + text-decoration: none; } -:host([static-color='white']) a, -:host([static-color='white']) a:active, -:host([static-color='white']) a:focus { - color: var( - --highcontrast-link-text-color-white, - var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)) - ); +:host([static-color="white"]) a, +:host([static-color="white"]) a:active, +:host([static-color="white"]) a:focus { + color: var( + --highcontrast-link-text-color-white, + var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)) + ); } -:host([static-color='black']) a, -:host([static-color='black']) a:active, -:host([static-color='black']) a:focus { - color: var( - --highcontrast-link-text-color-black, - var(--mod-link-text-color-black, var(--spectrum-link-text-color-black)) - ); +:host([static-color="black"]) a, +:host([static-color="black"]) a:active, +:host([static-color="black"]) a:focus { + color: var( + --highcontrast-link-text-color-black, + var(--mod-link-text-color-black, var(--spectrum-link-text-color-black)) + ); } @media (hover: hover) { - a:hover { - color: var( - --highcontrast-link-text-color-primary-hover, - var( - --mod-link-text-color-primary-hover, - var(--spectrum-link-text-color-primary-hover) - ) - ); - } - - :host([variant='secondary']) a:hover { - color: var( - --highcontrast-link-text-color-secondary-hover, - var( - --mod-link-text-color-secondary-hover, - var(--spectrum-link-text-color-secondary-hover) - ) - ); - } - - :host([quiet]) a:hover { - -webkit-text-decoration: underline; - text-decoration: underline; - } - - :host([static-color='white']) a:hover { - color: var( - --highcontrast-link-text-color-white, - var( - --mod-link-text-color-white, - var(--spectrum-link-text-color-white) - ) - ); - } - - :host([static-color='black']) a:hover { - color: var( - --highcontrast-link-text-color-black, - var( - --mod-link-text-color-black, - var(--spectrum-link-text-color-black) - ) - ); - } + a:hover { + color: var( + --highcontrast-link-text-color-primary-hover, + var( + --mod-link-text-color-primary-hover, + var(--spectrum-link-text-color-primary-hover) + ) + ); + } + + :host([variant="secondary"]) a:hover { + color: var( + --highcontrast-link-text-color-secondary-hover, + var( + --mod-link-text-color-secondary-hover, + var(--spectrum-link-text-color-secondary-hover) + ) + ); + } + + :host([quiet]) a:hover { + -webkit-text-decoration: underline; + text-decoration: underline; + } + + :host([static-color="white"]) a:hover { + color: var( + --highcontrast-link-text-color-white, + var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)) + ); + } + + :host([static-color="black"]) a:hover { + color: var( + --highcontrast-link-text-color-black, + var(--mod-link-text-color-black, var(--spectrum-link-text-color-black)) + ); + } } diff --git a/packages/menu/src/menu-overrides.css b/packages/menu/src/menu-overrides.css index 652c22dd08..57f02dbed6 100644 --- a/packages/menu/src/menu-overrides.css +++ b/packages/menu/src/menu-overrides.css @@ -12,393 +12,367 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-menu-item-top-to-action: var(--system-menu-item-top-to-action); - --spectrum-menu-item-top-to-checkbox: var( - --system-menu-item-top-to-checkbox - ); - --spectrum-menu-item-label-line-height: var( - --system-menu-item-label-line-height - ); - --spectrum-menu-item-label-line-height-cjk: var( - --system-menu-item-label-line-height-cjk - ); - --spectrum-menu-item-label-to-description-spacing: var( - --system-menu-item-label-to-description-spacing - ); - --spectrum-menu-item-focus-indicator-width: var( - --system-menu-item-focus-indicator-width - ); - --spectrum-menu-item-focus-indicator-color: var( - --system-menu-item-focus-indicator-color - ); - --spectrum-menu-item-label-to-value-area-min-spacing: var( - --system-menu-item-label-to-value-area-min-spacing - ); - --spectrum-menu-item-label-content-color-default: var( - --system-menu-item-label-content-color-default - ); - --spectrum-menu-item-label-content-color-hover: var( - --system-menu-item-label-content-color-hover - ); - --spectrum-menu-item-label-content-color-down: var( - --system-menu-item-label-content-color-down - ); - --spectrum-menu-item-label-content-color-focus: var( - --system-menu-item-label-content-color-focus - ); - --spectrum-menu-item-label-icon-color-default: var( - --system-menu-item-label-icon-color-default - ); - --spectrum-menu-item-label-icon-color-hover: var( - --system-menu-item-label-icon-color-hover - ); - --spectrum-menu-item-label-icon-color-down: var( - --system-menu-item-label-icon-color-down - ); - --spectrum-menu-item-label-icon-color-focus: var( - --system-menu-item-label-icon-color-focus - ); - --spectrum-menu-item-label-content-color-disabled: var( - --system-menu-item-label-content-color-disabled - ); - --spectrum-menu-item-label-icon-color-disabled: var( - --system-menu-item-label-icon-color-disabled - ); - --spectrum-menu-item-description-line-height: var( - --system-menu-item-description-line-height - ); - --spectrum-menu-item-description-line-height-cjk: var( - --system-menu-item-description-line-height-cjk - ); - --spectrum-menu-item-description-color-default: var( - --system-menu-item-description-color-default - ); - --spectrum-menu-item-description-color-hover: var( - --system-menu-item-description-color-hover - ); - --spectrum-menu-item-description-color-down: var( - --system-menu-item-description-color-down - ); - --spectrum-menu-item-description-color-focus: var( - --system-menu-item-description-color-focus - ); - --spectrum-menu-item-description-color-disabled: var( - --system-menu-item-description-color-disabled - ); - --spectrum-menu-section-header-line-height: var( - --system-menu-section-header-line-height - ); - --spectrum-menu-section-header-line-height-cjk: var( - --system-menu-section-header-line-height-cjk - ); - --spectrum-menu-section-header-font-weight: var( - --system-menu-section-header-font-weight - ); - --spectrum-menu-section-header-color: var( - --system-menu-section-header-color - ); - --spectrum-menu-collapsible-icon-color: var( - --system-menu-collapsible-icon-color - ); - --spectrum-menu-checkmark-icon-color-default: var( - --system-menu-checkmark-icon-color-default - ); - --spectrum-menu-checkmark-icon-color-hover: var( - --system-menu-checkmark-icon-color-hover - ); - --spectrum-menu-checkmark-icon-color-down: var( - --system-menu-checkmark-icon-color-down - ); - --spectrum-menu-checkmark-icon-color-focus: var( - --system-menu-checkmark-icon-color-focus - ); - --spectrum-menu-drillin-icon-color-default: var( - --system-menu-drillin-icon-color-default - ); - --spectrum-menu-drillin-icon-color-hover: var( - --system-menu-drillin-icon-color-hover - ); - --spectrum-menu-drillin-icon-color-down: var( - --system-menu-drillin-icon-color-down - ); - --spectrum-menu-drillin-icon-color-focus: var( - --system-menu-drillin-icon-color-focus - ); - --spectrum-menu-item-value-color-default: var( - --system-menu-item-value-color-default - ); - --spectrum-menu-item-value-color-hover: var( - --system-menu-item-value-color-hover - ); - --spectrum-menu-item-value-color-down: var( - --system-menu-item-value-color-down - ); - --spectrum-menu-item-value-color-focus: var( - --system-menu-item-value-color-focus - ); - --spectrum-menu-checkmark-display-hidden: var( - --system-menu-checkmark-display-hidden - ); - --spectrum-menu-checkmark-display-shown: var( - --system-menu-checkmark-display-shown - ); - --spectrum-menu-checkmark-display: var(--system-menu-checkmark-display); - --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: var( - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start - ); - --spectrum-menu-item-background-color-default: var( - --system-menu-item-background-color-default - ); - --spectrum-menu-item-background-color-hover: var( - --system-menu-item-background-color-hover - ); - --spectrum-menu-item-background-color-down: var( - --system-menu-item-background-color-down - ); - --spectrum-menu-item-background-color-key-focus: var( - --system-menu-item-background-color-key-focus - ); - --spectrum-menu-item-min-height: var(--system-menu-item-min-height); - --spectrum-menu-item-icon-height: var(--system-menu-item-icon-height); - --spectrum-menu-item-icon-width: var(--system-menu-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var(--system-menu-back-icon-margin); + --spectrum-menu-item-top-to-action: var(--system-menu-item-top-to-action); + --spectrum-menu-item-top-to-checkbox: var(--system-menu-item-top-to-checkbox); + --spectrum-menu-item-label-line-height: var( + --system-menu-item-label-line-height + ); + --spectrum-menu-item-label-line-height-cjk: var( + --system-menu-item-label-line-height-cjk + ); + --spectrum-menu-item-label-to-description-spacing: var( + --system-menu-item-label-to-description-spacing + ); + --spectrum-menu-item-focus-indicator-width: var( + --system-menu-item-focus-indicator-width + ); + --spectrum-menu-item-focus-indicator-color: var( + --system-menu-item-focus-indicator-color + ); + --spectrum-menu-item-label-to-value-area-min-spacing: var( + --system-menu-item-label-to-value-area-min-spacing + ); + --spectrum-menu-item-label-content-color-default: var( + --system-menu-item-label-content-color-default + ); + --spectrum-menu-item-label-content-color-hover: var( + --system-menu-item-label-content-color-hover + ); + --spectrum-menu-item-label-content-color-down: var( + --system-menu-item-label-content-color-down + ); + --spectrum-menu-item-label-content-color-focus: var( + --system-menu-item-label-content-color-focus + ); + --spectrum-menu-item-label-icon-color-default: var( + --system-menu-item-label-icon-color-default + ); + --spectrum-menu-item-label-icon-color-hover: var( + --system-menu-item-label-icon-color-hover + ); + --spectrum-menu-item-label-icon-color-down: var( + --system-menu-item-label-icon-color-down + ); + --spectrum-menu-item-label-icon-color-focus: var( + --system-menu-item-label-icon-color-focus + ); + --spectrum-menu-item-label-content-color-disabled: var( + --system-menu-item-label-content-color-disabled + ); + --spectrum-menu-item-label-icon-color-disabled: var( + --system-menu-item-label-icon-color-disabled + ); + --spectrum-menu-item-description-line-height: var( + --system-menu-item-description-line-height + ); + --spectrum-menu-item-description-line-height-cjk: var( + --system-menu-item-description-line-height-cjk + ); + --spectrum-menu-item-description-color-default: var( + --system-menu-item-description-color-default + ); + --spectrum-menu-item-description-color-hover: var( + --system-menu-item-description-color-hover + ); + --spectrum-menu-item-description-color-down: var( + --system-menu-item-description-color-down + ); + --spectrum-menu-item-description-color-focus: var( + --system-menu-item-description-color-focus + ); + --spectrum-menu-item-description-color-disabled: var( + --system-menu-item-description-color-disabled + ); + --spectrum-menu-section-header-line-height: var( + --system-menu-section-header-line-height + ); + --spectrum-menu-section-header-line-height-cjk: var( + --system-menu-section-header-line-height-cjk + ); + --spectrum-menu-section-header-font-weight: var( + --system-menu-section-header-font-weight + ); + --spectrum-menu-section-header-color: var(--system-menu-section-header-color); + --spectrum-menu-collapsible-icon-color: var( + --system-menu-collapsible-icon-color + ); + --spectrum-menu-checkmark-icon-color-default: var( + --system-menu-checkmark-icon-color-default + ); + --spectrum-menu-checkmark-icon-color-hover: var( + --system-menu-checkmark-icon-color-hover + ); + --spectrum-menu-checkmark-icon-color-down: var( + --system-menu-checkmark-icon-color-down + ); + --spectrum-menu-checkmark-icon-color-focus: var( + --system-menu-checkmark-icon-color-focus + ); + --spectrum-menu-drillin-icon-color-default: var( + --system-menu-drillin-icon-color-default + ); + --spectrum-menu-drillin-icon-color-hover: var( + --system-menu-drillin-icon-color-hover + ); + --spectrum-menu-drillin-icon-color-down: var( + --system-menu-drillin-icon-color-down + ); + --spectrum-menu-drillin-icon-color-focus: var( + --system-menu-drillin-icon-color-focus + ); + --spectrum-menu-item-value-color-default: var( + --system-menu-item-value-color-default + ); + --spectrum-menu-item-value-color-hover: var( + --system-menu-item-value-color-hover + ); + --spectrum-menu-item-value-color-down: var( + --system-menu-item-value-color-down + ); + --spectrum-menu-item-value-color-focus: var( + --system-menu-item-value-color-focus + ); + --spectrum-menu-checkmark-display-hidden: var( + --system-menu-checkmark-display-hidden + ); + --spectrum-menu-checkmark-display-shown: var( + --system-menu-checkmark-display-shown + ); + --spectrum-menu-checkmark-display: var(--system-menu-checkmark-display); + --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: var( + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start + ); + --spectrum-menu-item-background-color-default: var( + --system-menu-item-background-color-default + ); + --spectrum-menu-item-background-color-hover: var( + --system-menu-item-background-color-hover + ); + --spectrum-menu-item-background-color-down: var( + --system-menu-item-background-color-down + ); + --spectrum-menu-item-background-color-key-focus: var( + --system-menu-item-background-color-key-focus + ); + --spectrum-menu-item-min-height: var(--system-menu-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-item-icon-width); + --spectrum-menu-item-label-font-size: var(--system-menu-item-label-font-size); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var(--system-menu-item-text-to-control); + --spectrum-menu-item-description-font-size: var( + --system-menu-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var(--system-menu-item-checkmark-width); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var(--system-menu-back-icon-margin); } :host { - --spectrum-menu-item-min-height: var(--system-menu-size-m-item-min-height); - --spectrum-menu-item-icon-height: var( - --system-menu-size-m-item-icon-height - ); - --spectrum-menu-item-icon-width: var(--system-menu-size-m-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-size-m-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-size-m-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-size-m-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-size-m-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-size-m-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-size-m-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-size-m-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-size-m-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-size-m-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-size-m-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-size-m-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-size-m-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-size-m-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var( - --system-menu-size-m-back-icon-margin - ); + --spectrum-menu-item-min-height: var(--system-menu-size-m-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-m-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-m-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-size-m-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-size-m-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-size-m-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-size-m-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-size-m-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-size-m-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-size-m-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-size-m-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-size-m-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-size-m-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-size-m-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-size-m-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-size-m-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var(--system-menu-size-m-back-icon-margin); } -:host([size='s']) { - --spectrum-menu-item-min-height: var(--system-menu-size-s-item-min-height); - --spectrum-menu-item-icon-height: var( - --system-menu-size-s-item-icon-height - ); - --spectrum-menu-item-icon-width: var(--system-menu-size-s-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-size-s-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-size-s-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-size-s-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-size-s-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-size-s-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-size-s-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-size-s-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-size-s-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-size-s-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-size-s-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-size-s-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-size-s-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-size-s-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var( - --system-menu-size-s-back-icon-margin - ); +:host([size="s"]) { + --spectrum-menu-item-min-height: var(--system-menu-size-s-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-s-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-s-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-size-s-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-size-s-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-size-s-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-size-s-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-size-s-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-size-s-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-size-s-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-size-s-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-size-s-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-size-s-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-size-s-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-size-s-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-size-s-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var(--system-menu-size-s-back-icon-margin); } -:host([size='l']) { - --spectrum-menu-item-min-height: var(--system-menu-size-l-item-min-height); - --spectrum-menu-item-icon-height: var( - --system-menu-size-l-item-icon-height - ); - --spectrum-menu-item-icon-width: var(--system-menu-size-l-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-size-l-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-size-l-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-size-l-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-size-l-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-size-l-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-size-l-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-size-l-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-size-l-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-size-l-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-size-l-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-size-l-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-size-l-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-size-l-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var( - --system-menu-size-l-back-icon-margin - ); +:host([size="l"]) { + --spectrum-menu-item-min-height: var(--system-menu-size-l-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-l-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-l-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-size-l-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-size-l-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-size-l-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-size-l-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-size-l-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-size-l-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-size-l-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-size-l-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-size-l-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-size-l-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-size-l-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-size-l-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-size-l-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var(--system-menu-size-l-back-icon-margin); } -:host([size='xl']) { - --spectrum-menu-item-min-height: var(--system-menu-size-xl-item-min-height); - --spectrum-menu-item-icon-height: var( - --system-menu-size-xl-item-icon-height - ); - --spectrum-menu-item-icon-width: var(--system-menu-size-xl-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-size-xl-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-size-xl-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-size-xl-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-size-xl-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-size-xl-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-size-xl-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-size-xl-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-size-xl-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-size-xl-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-size-xl-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-size-xl-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-size-xl-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-size-xl-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var( - --system-menu-size-xl-back-icon-margin - ); +:host([size="xl"]) { + --spectrum-menu-item-min-height: var(--system-menu-size-xl-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-xl-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-xl-item-icon-width); + --spectrum-menu-item-label-font-size: var( + --system-menu-size-xl-item-label-font-size + ); + --spectrum-menu-item-label-text-to-visual: var( + --system-menu-size-xl-item-label-text-to-visual + ); + --spectrum-menu-item-label-inline-edge-to-content: var( + --system-menu-size-xl-item-label-inline-edge-to-content + ); + --spectrum-menu-item-top-edge-to-text: var( + --system-menu-size-xl-item-top-edge-to-text + ); + --spectrum-menu-item-bottom-edge-to-text: var( + --system-menu-size-xl-item-bottom-edge-to-text + ); + --spectrum-menu-item-text-to-control: var( + --system-menu-size-xl-item-text-to-control + ); + --spectrum-menu-item-description-font-size: var( + --system-menu-size-xl-item-description-font-size + ); + --spectrum-menu-section-header-font-size: var( + --system-menu-size-xl-section-header-font-size + ); + --spectrum-menu-section-header-min-width: var( + --system-menu-size-xl-section-header-min-width + ); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var( + --system-menu-size-xl-item-selectable-edge-to-text-not-selected + ); + --spectrum-menu-item-checkmark-height: var( + --system-menu-size-xl-item-checkmark-height + ); + --spectrum-menu-item-checkmark-width: var( + --system-menu-size-xl-item-checkmark-width + ); + --spectrum-menu-item-top-to-checkmark: var( + --system-menu-size-xl-item-top-to-checkmark + ); + --spectrum-menu-back-icon-margin: var(--system-menu-size-xl-back-icon-margin); } diff --git a/packages/menu/src/spectrum-checkmark.css b/packages/menu/src/spectrum-checkmark.css index ba4415e974..0586d17cc1 100644 --- a/packages/menu/src/spectrum-checkmark.css +++ b/packages/menu/src/spectrum-checkmark.css @@ -12,140 +12,139 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .checkmark { - display: var( - --mod-menu-checkmark-display, - var(--spectrum-menu-checkmark-display) - ); - block-size: var( - --mod-menu-item-checkmark-height, - var(--spectrum-menu-item-checkmark-height) - ); - inline-size: var( - --mod-menu-item-checkmark-width, - var(--spectrum-menu-item-checkmark-width) - ); - fill: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-default, - var(--spectrum-menu-checkmark-icon-color-default) - ) - ); - color: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-default, - var(--spectrum-menu-checkmark-icon-color-default) - ) - ); - opacity: 1; - grid-area: checkmarkArea; - align-self: start; - margin-block-start: calc( - var( - --mod-menu-item-top-to-checkmark, - var(--spectrum-menu-item-top-to-checkmark) - ) - - var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ) - ); - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); + display: var( + --mod-menu-checkmark-display, + var(--spectrum-menu-checkmark-display) + ); + block-size: var( + --mod-menu-item-checkmark-height, + var(--spectrum-menu-item-checkmark-height) + ); + inline-size: var( + --mod-menu-item-checkmark-width, + var(--spectrum-menu-item-checkmark-width) + ); + fill: var( + --highcontrast-menu-checkmark-icon-color-default, + var( + --mod-menu-checkmark-icon-color-default, + var(--spectrum-menu-checkmark-icon-color-default) + ) + ); + color: var( + --highcontrast-menu-checkmark-icon-color-default, + var( + --mod-menu-checkmark-icon-color-default, + var(--spectrum-menu-checkmark-icon-color-default) + ) + ); + opacity: 1; + grid-area: checkmarkArea; + align-self: start; + margin-block-start: calc( + var( + --mod-menu-item-top-to-checkmark, + var(--spectrum-menu-item-top-to-checkmark) + ) - + var( + --mod-menu-item-top-edge-to-text, + var(--spectrum-menu-item-top-edge-to-text) + ) + ); + margin-inline-end: var( + --mod-menu-item-text-to-control, + var(--spectrum-menu-item-text-to-control) + ); } .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); + display: block; } diff --git a/packages/menu/src/spectrum-chevron.css b/packages/menu/src/spectrum-chevron.css index 3c9d2f9745..007f85917a 100644 --- a/packages/menu/src/spectrum-chevron.css +++ b/packages/menu/src/spectrum-chevron.css @@ -12,105 +12,104 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .chevron { - block-size: var(--spectrum-menu-item-checkmark-height); - inline-size: var(--spectrum-menu-item-checkmark-width); - grid-area: chevronArea; - align-self: center; - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); + block-size: var(--spectrum-menu-item-checkmark-height); + inline-size: var(--spectrum-menu-item-checkmark-width); + grid-area: chevronArea; + align-self: center; + margin-inline-end: var( + --mod-menu-item-text-to-control, + var(--spectrum-menu-item-text-to-control) + ); } .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); + display: block; } diff --git a/packages/menu/src/spectrum-menu-divider.css b/packages/menu/src/spectrum-menu-divider.css index b3b061edeb..df4e074f26 100644 --- a/packages/menu/src/spectrum-menu-divider.css +++ b/packages/menu/src/spectrum-menu-divider.css @@ -12,114 +12,114 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium); - inline-size: auto; - margin-block: var( - --mod-menu-section-divider-margin-block, - max( - 0px, - ( - var(--spectrum-menu-item-section-divider-height) - - var(--spectrum-menu-divider-thickness) - ) / 2 - ) - ); - margin-inline: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - overflow: visible; + --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium); + inline-size: auto; + margin-block: var( + --mod-menu-section-divider-margin-block, + max( + 0px, + ( + var(--spectrum-menu-item-section-divider-height) - + var(--spectrum-menu-divider-thickness) + ) / + 2 + ) + ); + margin-inline: var( + --mod-menu-item-label-inline-edge-to-content, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + overflow: visible; } .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); + display: block; } diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css index 721ef2aeac..4e8330cf6e 100644 --- a/packages/menu/src/spectrum-menu-item.css +++ b/packages/menu/src/spectrum-menu-item.css @@ -11,869 +11,868 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -::slotted([slot='icon']) { - fill: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-label-icon-color-default, - var(--spectrum-menu-item-label-icon-color-default) - ) - ); - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-label-icon-color-default, - var(--spectrum-menu-item-label-icon-color-default) - ) - ); - grid-area: iconArea; - align-self: start; -} - -::slotted([slot='icon']) { - margin-inline-end: var( - --mod-menu-item-label-text-to-visual, - var(--spectrum-menu-item-label-text-to-visual) - ); +::slotted([slot="icon"]) { + fill: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-item-label-icon-color-default, + var(--spectrum-menu-item-label-icon-color-default) + ) + ); + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-item-label-icon-color-default, + var(--spectrum-menu-item-label-icon-color-default) + ) + ); + grid-area: iconArea; + align-self: start; +} + +::slotted([slot="icon"]) { + margin-inline-end: var( + --mod-menu-item-label-text-to-visual, + var(--spectrum-menu-item-label-text-to-visual) + ); } :host { - cursor: pointer; - box-sizing: border-box; - background-color: var( - --highcontrast-menu-item-background-color-default, - var( - --mod-menu-item-background-color-default, - var(--spectrum-menu-item-background-color-default) - ) - ); - line-height: var( - --mod-menu-item-label-line-height, - var(--spectrum-menu-item-label-line-height) - ); - min-block-size: var( - --mod-menu-item-min-height, - var(--spectrum-menu-item-min-height) - ); - padding-block-start: var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ); - padding-block-end: var( - --mod-menu-item-bottom-edge-to-text, - var(--spectrum-menu-item-bottom-edge-to-text) - ); - padding-inline: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - grid-template: - '. chevronAreaCollapsible . headingIconArea sectionHeadingArea . . .' 1fr - 'selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn' - '. . . . descriptionArea . . .' - '. . . . submenuArea . . .' - / auto auto auto auto 1fr auto auto auto; - align-items: center; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - display: grid; - position: relative; + cursor: pointer; + box-sizing: border-box; + background-color: var( + --highcontrast-menu-item-background-color-default, + var( + --mod-menu-item-background-color-default, + var(--spectrum-menu-item-background-color-default) + ) + ); + line-height: var( + --mod-menu-item-label-line-height, + var(--spectrum-menu-item-label-line-height) + ); + min-block-size: var( + --mod-menu-item-min-height, + var(--spectrum-menu-item-min-height) + ); + padding-block-start: var( + --mod-menu-item-top-edge-to-text, + var(--spectrum-menu-item-top-edge-to-text) + ); + padding-block-end: var( + --mod-menu-item-bottom-edge-to-text, + var(--spectrum-menu-item-bottom-edge-to-text) + ); + padding-inline: var( + --mod-menu-item-label-inline-edge-to-content, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + grid-template: + ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . ." 1fr + "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn" + ". . . . descriptionArea . . ." + ". . . . submenuArea . . ." + / auto auto auto auto 1fr auto auto auto; + align-items: center; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + display: grid; + position: relative; } .spectrum-Menu-itemCheckbox { - --mod-checkbox-top-to-text: 0; - --mod-checkbox-text-to-control: 0; - min-block-size: 0; + --mod-checkbox-top-to-text: 0; + --mod-checkbox-text-to-control: 0; + min-block-size: 0; } .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box { - margin-block-start: var( - --mod-menu-item-top-to-checkbox, - var(--spectrum-menu-item-top-to-checkbox) - ); - margin-block-end: 0; - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); + margin-block-start: var( + --mod-menu-item-top-to-checkbox, + var(--spectrum-menu-item-top-to-checkbox) + ); + margin-block-end: 0; + margin-inline-end: var( + --mod-menu-item-text-to-control, + var(--spectrum-menu-item-text-to-control) + ); } .spectrum-Menu-itemSwitch { - min-block-size: 0; + min-block-size: 0; } .spectrum-Menu-itemSwitch .spectrum-Switch-switch { - margin-block-start: var( - --mod-menu-item-top-to-action, - var(--spectrum-menu-item-top-to-action) - ); - margin-block-end: 0; + margin-block-start: var( + --mod-menu-item-top-to-action, + var(--spectrum-menu-item-top-to-action) + ); + margin-block-end: 0; } #label { - grid-area: submenuItemLabelArea; + grid-area: submenuItemLabelArea; } -::slotted([slot='value']) { - grid-area: submenuItemValueArea; +::slotted([slot="value"]) { + grid-area: submenuItemValueArea; } :host([focused]), :host(:focus) { - background-color: var( - --highcontrast-menu-item-background-color-focus, - var( - --mod-menu-item-background-color-key-focus, - var(--spectrum-menu-item-background-color-key-focus) - ) - ); - outline: none; + background-color: var( + --highcontrast-menu-item-background-color-focus, + var( + --mod-menu-item-background-color-key-focus, + var(--spectrum-menu-item-background-color-key-focus) + ) + ); + outline: none; } :host([focused]) > #label, :host(:focus) > #label { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-content-color-focus, - var(--spectrum-menu-item-label-content-color-focus) - ) - ); -} - -:host([focused]) > [name='description']::slotted(*), -:host(:focus) > [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-description-color-focus, - var(--spectrum-menu-item-description-color-focus) - ) - ); -} - -:host([focused]) > ::slotted([slot='value']), -:host(:focus) > ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-value-color-focus, - var(--spectrum-menu-item-value-color-focus) - ) - ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-content-color-focus, + var(--spectrum-menu-item-label-content-color-focus) + ) + ); +} + +:host([focused]) > [name="description"]::slotted(*), +:host(:focus) > [name="description"]::slotted(*) { + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-description-color-focus, + var(--spectrum-menu-item-description-color-focus) + ) + ); +} + +:host([focused]) > ::slotted([slot="value"]), +:host(:focus) > ::slotted([slot="value"]) { + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-value-color-focus, + var(--spectrum-menu-item-value-color-focus) + ) + ); } :host([focused]) > .icon:not(.chevron, .checkmark), :host(:focus) > .icon:not(.chevron, .checkmark) { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-focus, - var(--spectrum-menu-item-label-icon-color-focus) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-focus, - var(--spectrum-menu-item-label-icon-color-focus) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-icon-color-focus, + var(--spectrum-menu-item-label-icon-color-focus) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-icon-color-focus, + var(--spectrum-menu-item-label-icon-color-focus) + ) + ); } :host([focused]) > .chevron, :host(:focus) > .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-collapsible-icon-color, + var(--spectrum-menu-collapsible-icon-color) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-collapsible-icon-color, + var(--spectrum-menu-collapsible-icon-color) + ) + ); } :host([focused]) > .checkmark, :host(:focus) > .checkmark { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-focus, - var(--spectrum-menu-checkmark-icon-color-focus) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-focus, - var(--spectrum-menu-checkmark-icon-color-focus) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-checkmark-icon-color-focus, + var(--spectrum-menu-checkmark-icon-color-focus) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-checkmark-icon-color-focus, + var(--spectrum-menu-checkmark-icon-color-focus) + ) + ); } :host:dir(rtl), -:host([dir='rtl']) { - --spectrum-menu-item-focus-indicator-direction-scalar: -1; +:host([dir="rtl"]) { + --spectrum-menu-item-focus-indicator-direction-scalar: -1; } :host(:is(:active, [active])) { - background-color: var( - --highcontrast-menu-item-background-color-focus, - var( - --mod-menu-item-background-color-down, - var(--spectrum-menu-item-background-color-down) - ) - ); + background-color: var( + --highcontrast-menu-item-background-color-focus, + var( + --mod-menu-item-background-color-down, + var(--spectrum-menu-item-background-color-down) + ) + ); } :host(:is(:active, [active])) > #label { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-content-color-down, - var(--spectrum-menu-item-label-content-color-down) - ) - ); -} - -:host(:is(:active, [active])) > [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-description-color-down, - var(--spectrum-menu-item-description-color-down) - ) - ); -} - -:host(:is(:active, [active])) > ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-value-color-down, - var(--spectrum-menu-item-value-color-down) - ) - ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-content-color-down, + var(--spectrum-menu-item-label-content-color-down) + ) + ); +} + +:host(:is(:active, [active])) > [name="description"]::slotted(*) { + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-description-color-down, + var(--spectrum-menu-item-description-color-down) + ) + ); +} + +:host(:is(:active, [active])) > ::slotted([slot="value"]) { + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-value-color-down, + var(--spectrum-menu-item-value-color-down) + ) + ); } :host(:is(:active, [active])) > .icon:not(.chevron, .checkmark) { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-down, - var(--spectrum-menu-item-label-icon-color-down) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-down, - var(--spectrum-menu-item-label-icon-color-down) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-icon-color-down, + var(--spectrum-menu-item-label-icon-color-down) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-icon-color-down, + var(--spectrum-menu-item-label-icon-color-down) + ) + ); } :host(:is(:active, [active])) > .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-collapsible-icon-color, + var(--spectrum-menu-collapsible-icon-color) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-collapsible-icon-color, + var(--spectrum-menu-collapsible-icon-color) + ) + ); } :host(:is(:active, [active])) > .checkmark { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-down, - var(--spectrum-menu-checkmark-icon-color-down) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-down, - var(--spectrum-menu-checkmark-icon-color-down) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-checkmark-icon-color-down, + var(--spectrum-menu-checkmark-icon-color-down) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-checkmark-icon-color-down, + var(--spectrum-menu-checkmark-icon-color-down) + ) + ); } :host([disabled]), -:host([aria-disabled='true']) { - background-color: initial; +:host([aria-disabled="true"]) { + background-color: initial; } :host([disabled]) #label, -:host([disabled]) ::slotted([slot='value']), -:host([aria-disabled='true']) #label, -:host([aria-disabled='true']) ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-content-color-disabled, - var(--spectrum-menu-item-label-content-color-disabled) - ) - ); -} - -:host([disabled]) [name='description']::slotted(*), -:host([aria-disabled='true']) [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-description-color-disabled, - var(--spectrum-menu-item-description-color-disabled) - ) - ); -} - -:host([disabled]) ::slotted([slot='icon']), -:host([aria-disabled='true']) ::slotted([slot='icon']) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); - fill: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); +:host([disabled]) ::slotted([slot="value"]), +:host([aria-disabled="true"]) #label, +:host([aria-disabled="true"]) ::slotted([slot="value"]) { + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-content-color-disabled, + var(--spectrum-menu-item-label-content-color-disabled) + ) + ); +} + +:host([disabled]) [name="description"]::slotted(*), +:host([aria-disabled="true"]) [name="description"]::slotted(*) { + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-description-color-disabled, + var(--spectrum-menu-item-description-color-disabled) + ) + ); +} + +:host([disabled]) ::slotted([slot="icon"]), +:host([aria-disabled="true"]) ::slotted([slot="icon"]) { + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-icon-color-disabled, + var(--spectrum-menu-item-label-icon-color-disabled) + ) + ); + fill: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-icon-color-disabled, + var(--spectrum-menu-item-label-icon-color-disabled) + ) + ); } :host([focused]) .spectrum-Menu-back, :host([focused]) { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); } :host .is-selectableMultiple { - align-items: start; + align-items: start; } .is-selectableMultiple .spectrum-Menu-itemCheckbox { - grid-area: checkmarkArea; + grid-area: checkmarkArea; } .spectrum-Menu-itemSelection { - grid-area: selectedArea; + grid-area: selectedArea; } #label { - --mod-switch-control-label-spacing: 0; - --mod-switch-spacing-top-to-label: 0; - font-size: var( - --mod-menu-item-label-font-size, - var(--spectrum-menu-item-label-font-size) - ); - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-label-content-color-default, - var(--spectrum-menu-item-label-content-color-default) - ) - ); - hyphens: auto; - overflow-wrap: break-word; - grid-area: labelArea; -} - -::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-value-color-default, - var(--spectrum-menu-item-value-color-default) - ) - ); - font-size: var( - --mod-menu-item-label-font-size, - var(--spectrum-menu-item-label-font-size) - ); - grid-area: valueArea; - justify-self: end; + --mod-switch-control-label-spacing: 0; + --mod-switch-spacing-top-to-label: 0; + font-size: var( + --mod-menu-item-label-font-size, + var(--spectrum-menu-item-label-font-size) + ); + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-item-label-content-color-default, + var(--spectrum-menu-item-label-content-color-default) + ) + ); + hyphens: auto; + overflow-wrap: break-word; + grid-area: labelArea; +} + +::slotted([slot="value"]) { + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-item-value-color-default, + var(--spectrum-menu-item-value-color-default) + ) + ); + font-size: var( + --mod-menu-item-label-font-size, + var(--spectrum-menu-item-label-font-size) + ); + grid-area: valueArea; + justify-self: end; } .spectrum-Menu-itemActions, -::slotted([slot='value']) { - align-self: start; - margin-inline-start: var( - --mod-menu-item-label-to-value-area-min-spacing, - var(--spectrum-menu-item-label-to-value-area-min-spacing) - ); +::slotted([slot="value"]) { + align-self: start; + margin-inline-start: var( + --mod-menu-item-label-to-value-area-min-spacing, + var(--spectrum-menu-item-label-to-value-area-min-spacing) + ); } .spectrum-Menu-itemActions { - grid-area: actionsArea; -} - -[name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-description-color-default, - var(--spectrum-menu-item-description-color-default) - ) - ); - font-size: var( - --mod-menu-item-description-font-size, - var(--spectrum-menu-item-description-font-size) - ); - hyphens: auto; - overflow-wrap: break-word; - line-height: var( - --mod-menu-item-description-line-height, - var(--spectrum-menu-item-description-line-height) - ); - grid-area: descriptionArea; - margin-block-start: var( - --mod-menu-item-label-to-description-spacing, - var(--spectrum-menu-item-label-to-description-spacing) - ); + grid-area: actionsArea; +} + +[name="description"]::slotted(*) { + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-item-description-color-default, + var(--spectrum-menu-item-description-color-default) + ) + ); + font-size: var( + --mod-menu-item-description-font-size, + var(--spectrum-menu-item-description-font-size) + ); + hyphens: auto; + overflow-wrap: break-word; + line-height: var( + --mod-menu-item-description-line-height, + var(--spectrum-menu-item-description-line-height) + ); + grid-area: descriptionArea; + margin-block-start: var( + --mod-menu-item-label-to-description-spacing, + var(--spectrum-menu-item-label-to-description-spacing) + ); } :host([no-wrap]) #label { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .spectrum-Menu-item--collapsible.is-open { - padding-block-end: 0; + padding-block-end: 0; } .spectrum-Menu-item--collapsible.is-open .chevron { - transform: rotate(90deg); + transform: rotate(90deg); } :host([focused]) .spectrum-Menu-item--collapsible.is-open, :host(:is(:active, [active])) .spectrum-Menu-item--collapsible.is-open, .spectrum-Menu-item--collapsible.is-open:focus { - background-color: var( - --highcontrast-menu-item-background-color-default, - var( - --mod-menu-item-background-color-default, - var(--spectrum-menu-item-background-color-default) - ) - ); -} - -.spectrum-Menu-item--collapsible ::slotted([slot='icon']) { - grid-area: headingIconArea; -} - -.spectrum-Menu-item--collapsible > ::slotted([slot='icon']) { - padding-block-start: var( - --mod-menu-section-header-top-edge-to-text, - var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ) - ); - padding-block-end: var( - --mod-menu-section-header-bottom-edge-to-text, - var( - --mod-menu-item-bottom-edge-to-text, - var(--spectrum-menu-item-bottom-edge-to-text) - ) - ); + background-color: var( + --highcontrast-menu-item-background-color-default, + var( + --mod-menu-item-background-color-default, + var(--spectrum-menu-item-background-color-default) + ) + ); +} + +.spectrum-Menu-item--collapsible ::slotted([slot="icon"]) { + grid-area: headingIconArea; +} + +.spectrum-Menu-item--collapsible > ::slotted([slot="icon"]) { + padding-block-start: var( + --mod-menu-section-header-top-edge-to-text, + var( + --mod-menu-item-top-edge-to-text, + var(--spectrum-menu-item-top-edge-to-text) + ) + ); + padding-block-end: var( + --mod-menu-section-header-bottom-edge-to-text, + var( + --mod-menu-item-bottom-edge-to-text, + var(--spectrum-menu-item-bottom-edge-to-text) + ) + ); } .spectrum-Menu-item--collapsible .chevron { - grid-area: chevronAreaCollapsible; + grid-area: chevronAreaCollapsible; } :host([has-submenu]) .chevron { - fill: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-drillin-icon-color-default, - var(--spectrum-menu-drillin-icon-color-default) - ) - ); - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-drillin-icon-color-default, - var(--spectrum-menu-drillin-icon-color-default) - ) - ); - grid-area: chevronAreaDrillIn; - margin-inline-start: var( - --mod-menu-item-label-to-value-area-min-spacing, - var(--spectrum-menu-item-label-to-value-area-min-spacing) - ); - margin-inline-end: 0; + fill: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-drillin-icon-color-default, + var(--spectrum-menu-drillin-icon-color-default) + ) + ); + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-drillin-icon-color-default, + var(--spectrum-menu-drillin-icon-color-default) + ) + ); + grid-area: chevronAreaDrillIn; + margin-inline-start: var( + --mod-menu-item-label-to-value-area-min-spacing, + var(--spectrum-menu-item-label-to-value-area-min-spacing) + ); + margin-inline-end: 0; } :host([has-submenu]) .is-open { - --spectrum-menu-item-background-color-default: var( - --highcontrast-menu-item-selected-background-color, - var( - --mod-menu-item-background-color-hover, - var(--spectrum-menu-item-background-color-hover) - ) - ); + --spectrum-menu-item-background-color-default: var( + --highcontrast-menu-item-selected-background-color, + var( + --mod-menu-item-background-color-hover, + var(--spectrum-menu-item-background-color-hover) + ) + ); } :host([has-submenu]) .is-open .icon:not(.chevron, .checkmark) { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-hover, - var(--spectrum-menu-item-label-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-hover, - var(--spectrum-menu-item-label-icon-color-hover) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-icon-color-hover, + var(--spectrum-menu-item-label-icon-color-hover) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-icon-color-hover, + var(--spectrum-menu-item-label-icon-color-hover) + ) + ); } :host([has-submenu]) .is-open .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-hover, - var(--spectrum-menu-drillin-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-hover, - var(--spectrum-menu-drillin-icon-color-hover) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-drillin-icon-color-hover, + var(--spectrum-menu-drillin-icon-color-hover) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-drillin-icon-color-hover, + var(--spectrum-menu-drillin-icon-color-hover) + ) + ); } :host([has-submenu]) .is-open .checkmark { - fill: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-hover, - var(--spectrum-menu-checkmark-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-hover, - var(--spectrum-menu-checkmark-icon-color-hover) - ) - ); + fill: var( + --highcontrast-menu-checkmark-icon-color-default, + var( + --mod-menu-checkmark-icon-color-hover, + var(--spectrum-menu-checkmark-icon-color-hover) + ) + ); + color: var( + --highcontrast-menu-checkmark-icon-color-default, + var( + --mod-menu-checkmark-icon-color-hover, + var(--spectrum-menu-checkmark-icon-color-hover) + ) + ); } @media (hover: hover) { - :host(:hover) { - background-color: var( - --highcontrast-menu-item-background-color-focus, - var( - --mod-menu-item-background-color-hover, - var(--spectrum-menu-item-background-color-hover) - ) - ); - } - - :host(:hover) > #label { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-content-color-hover, - var(--spectrum-menu-item-label-content-color-hover) - ) - ); - } - - :host(:hover) > [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-description-color-hover, - var(--spectrum-menu-item-description-color-hover) - ) - ); - } - - :host(:hover) > ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-value-color-hover, - var(--spectrum-menu-item-value-color-hover) - ) - ); - } - - :host(:hover) > .icon:not(.chevron, .checkmark) { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-hover, - var(--spectrum-menu-item-label-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-hover, - var(--spectrum-menu-item-label-icon-color-hover) - ) - ); - } - - :host(:hover) > .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); - } - - :host(:hover) > .checkmark { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-hover, - var(--spectrum-menu-checkmark-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-hover, - var(--spectrum-menu-checkmark-icon-color-hover) - ) - ); - } - - :host([disabled]:hover), - :host([aria-disabled='true']:hover) { - cursor: default; - background-color: initial; - } - - :host([disabled]:hover) #label, - :host([disabled]:hover) ::slotted([slot='value']), - :host([aria-disabled='true']:hover) #label, - :host([aria-disabled='true']:hover) ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-content-color-disabled, - var(--spectrum-menu-item-label-content-color-disabled) - ) - ); - } - - :host([disabled]:hover) [name='description']::slotted(*), - :host([aria-disabled='true']:hover) [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-description-color-disabled, - var(--spectrum-menu-item-description-color-disabled) - ) - ); - } - - :host([disabled]:hover) ::slotted([slot='icon']), - :host([aria-disabled='true']:hover) ::slotted([slot='icon']) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); - fill: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); - } - - .spectrum-Menu-item--collapsible.is-open:hover { - background-color: var( - --highcontrast-menu-item-background-color-default, - var( - --mod-menu-item-background-color-default, - var(--spectrum-menu-item-background-color-default) - ) - ); - } - - :host([has-submenu]:hover) .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-hover, - var(--spectrum-menu-drillin-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-hover, - var(--spectrum-menu-drillin-icon-color-hover) - ) - ); - } + :host(:hover) { + background-color: var( + --highcontrast-menu-item-background-color-focus, + var( + --mod-menu-item-background-color-hover, + var(--spectrum-menu-item-background-color-hover) + ) + ); + } + + :host(:hover) > #label { + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-content-color-hover, + var(--spectrum-menu-item-label-content-color-hover) + ) + ); + } + + :host(:hover) > [name="description"]::slotted(*) { + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-description-color-hover, + var(--spectrum-menu-item-description-color-hover) + ) + ); + } + + :host(:hover) > ::slotted([slot="value"]) { + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-value-color-hover, + var(--spectrum-menu-item-value-color-hover) + ) + ); + } + + :host(:hover) > .icon:not(.chevron, .checkmark) { + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-icon-color-hover, + var(--spectrum-menu-item-label-icon-color-hover) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-item-label-icon-color-hover, + var(--spectrum-menu-item-label-icon-color-hover) + ) + ); + } + + :host(:hover) > .chevron { + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-collapsible-icon-color, + var(--spectrum-menu-collapsible-icon-color) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-collapsible-icon-color, + var(--spectrum-menu-collapsible-icon-color) + ) + ); + } + + :host(:hover) > .checkmark { + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-checkmark-icon-color-hover, + var(--spectrum-menu-checkmark-icon-color-hover) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-checkmark-icon-color-hover, + var(--spectrum-menu-checkmark-icon-color-hover) + ) + ); + } + + :host([disabled]:hover), + :host([aria-disabled="true"]:hover) { + cursor: default; + background-color: initial; + } + + :host([disabled]:hover) #label, + :host([disabled]:hover) ::slotted([slot="value"]), + :host([aria-disabled="true"]:hover) #label, + :host([aria-disabled="true"]:hover) ::slotted([slot="value"]) { + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-content-color-disabled, + var(--spectrum-menu-item-label-content-color-disabled) + ) + ); + } + + :host([disabled]:hover) [name="description"]::slotted(*), + :host([aria-disabled="true"]:hover) [name="description"]::slotted(*) { + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-description-color-disabled, + var(--spectrum-menu-item-description-color-disabled) + ) + ); + } + + :host([disabled]:hover) ::slotted([slot="icon"]), + :host([aria-disabled="true"]:hover) ::slotted([slot="icon"]) { + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-icon-color-disabled, + var(--spectrum-menu-item-label-icon-color-disabled) + ) + ); + fill: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-icon-color-disabled, + var(--spectrum-menu-item-label-icon-color-disabled) + ) + ); + } + + .spectrum-Menu-item--collapsible.is-open:hover { + background-color: var( + --highcontrast-menu-item-background-color-default, + var( + --mod-menu-item-background-color-default, + var(--spectrum-menu-item-background-color-default) + ) + ); + } + + :host([has-submenu]:hover) .chevron { + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-drillin-icon-color-hover, + var(--spectrum-menu-drillin-icon-color-hover) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-drillin-icon-color-hover, + var(--spectrum-menu-drillin-icon-color-hover) + ) + ); + } } :host([has-submenu][focused]) .chevron, :host([has-submenu]:focus) .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-focus, - var(--spectrum-menu-drillin-icon-color-focus) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-focus, - var(--spectrum-menu-drillin-icon-color-focus) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-drillin-icon-color-focus, + var(--spectrum-menu-drillin-icon-color-focus) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-drillin-icon-color-focus, + var(--spectrum-menu-drillin-icon-color-focus) + ) + ); } :host([has-submenu]:is(:active, [active])) .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-down, - var(--spectrum-menu-drillin-icon-color-down) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-down, - var(--spectrum-menu-drillin-icon-color-down) - ) - ); + fill: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-drillin-icon-color-down, + var(--spectrum-menu-drillin-icon-color-down) + ) + ); + color: var( + --highcontrast-menu-item-color-focus, + var( + --mod-menu-drillin-icon-color-down, + var(--spectrum-menu-drillin-icon-color-down) + ) + ); } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } :host([focused]) .spectrum-Menu-backButton { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); + display: block; } diff --git a/packages/menu/src/spectrum-menu-sectionHeading.css b/packages/menu/src/spectrum-menu-sectionHeading.css index 4353e1d6ea..9dfee37ba4 100644 --- a/packages/menu/src/spectrum-menu-sectionHeading.css +++ b/packages/menu/src/spectrum-menu-sectionHeading.css @@ -12,144 +12,143 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); } .header { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-section-header-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - min-inline-size: var( - --mod-menu-section-header-min-width, - var(--spectrum-menu-section-header-min-width) - ); - padding-block-start: var( - --mod-menu-section-header-top-edge-to-text, - var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ) - ); - padding-block-end: var( - --mod-menu-section-header-bottom-edge-to-text, - var( - --mod-menu-item-bottom-edge-to-text, - var(--spectrum-menu-item-bottom-edge-to-text) - ) - ); - padding-inline: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1; - display: block; + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-section-header-color, + var(--spectrum-menu-section-header-color) + ) + ); + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); + min-inline-size: var( + --mod-menu-section-header-min-width, + var(--spectrum-menu-section-header-min-width) + ); + padding-block-start: var( + --mod-menu-section-header-top-edge-to-text, + var( + --mod-menu-item-top-edge-to-text, + var(--spectrum-menu-item-top-edge-to-text) + ) + ); + padding-block-end: var( + --mod-menu-section-header-bottom-edge-to-text, + var( + --mod-menu-item-bottom-edge-to-text, + var(--spectrum-menu-item-bottom-edge-to-text) + ) + ); + padding-inline: var( + --mod-menu-item-label-inline-edge-to-content, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1; + display: block; } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-back .header { - padding: 0; + padding: 0; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); + display: block; } diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css index bb8e42baf1..b0044249b2 100644 --- a/packages/menu/src/spectrum-menu.css +++ b/packages/menu/src/spectrum-menu.css @@ -12,238 +12,237 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-menu-item-background-color-default: ButtonFace; - --highcontrast-menu-item-color-default: ButtonText; - --highcontrast-menu-item-background-color-focus: Highlight; - --highcontrast-menu-item-color-focus: HighlightText; - --highcontrast-menu-checkmark-icon-color-default: Highlight; - --highcontrast-menu-item-color-disabled: GrayText; - --highcontrast-menu-item-focus-indicator-color: Highlight; - --highcontrast-menu-item-selected-background-color: Highlight; - --highcontrast-menu-item-selected-color: HighlightText; - } + :host { + --highcontrast-menu-item-background-color-default: ButtonFace; + --highcontrast-menu-item-color-default: ButtonText; + --highcontrast-menu-item-background-color-focus: Highlight; + --highcontrast-menu-item-color-focus: HighlightText; + --highcontrast-menu-checkmark-icon-color-default: Highlight; + --highcontrast-menu-item-color-disabled: GrayText; + --highcontrast-menu-item-focus-indicator-color: Highlight; + --highcontrast-menu-item-selected-background-color: Highlight; + --highcontrast-menu-item-selected-color: HighlightText; + } - @supports (color: SelectedItem) { - :host { - --highcontrast-menu-item-selected-background-color: SelectedItem; - --highcontrast-menu-item-selected-color: SelectedItemText; - } - } + @supports (color: SelectedItem) { + :host { + --highcontrast-menu-item-selected-background-color: SelectedItem; + --highcontrast-menu-item-selected-color: SelectedItemText; + } + } } :host { - inline-size: auto; - inline-size: var(--mod-menu-inline-size, auto); - box-sizing: border-box; - margin: 0; - padding: 0; - list-style-type: none; - display: inline-block; - overflow: auto; + inline-size: auto; + inline-size: var(--mod-menu-inline-size, auto); + box-sizing: border-box; + margin: 0; + padding: 0; + list-style-type: none; + display: inline-block; + overflow: auto; } :host:lang(ja), :host:lang(ko), :host:lang(zh) { - --spectrum-menu-item-label-line-height: var( - --mod-menu-item-label-line-height-cjk, - var(--spectrum-menu-item-label-line-height-cjk) - ); - --spectrum-menu-item-description-line-height: var( - --mod-menu-item-description-line-height-cjk, - var(--spectrum-menu-item-description-line-height-cjk) - ); - --spectrum-menu-section-header-line-height: var( - --mod-menu-section-header-line-height-cjk, - var(--spectrum-menu-section-header-line-height-cjk) - ); + --spectrum-menu-item-label-line-height: var( + --mod-menu-item-label-line-height-cjk, + var(--spectrum-menu-item-label-line-height-cjk) + ); + --spectrum-menu-item-description-line-height: var( + --mod-menu-item-description-line-height-cjk, + var(--spectrum-menu-item-description-line-height-cjk) + ); + --spectrum-menu-section-header-line-height: var( + --mod-menu-section-header-line-height-cjk, + var(--spectrum-menu-section-header-line-height-cjk) + ); } :host([selects]) ::slotted(sp-menu-item) { - --spectrum-menu-checkmark-display: var( - --spectrum-menu-checkmark-display-hidden - ); - padding-inline-start: var( - --mod-menu-item-selectable-edge-to-text-not-selected, - var(--spectrum-menu-item-selectable-edge-to-text-not-selected) - ); + --spectrum-menu-checkmark-display: var( + --spectrum-menu-checkmark-display-hidden + ); + padding-inline-start: var( + --mod-menu-item-selectable-edge-to-text-not-selected, + var(--spectrum-menu-item-selectable-edge-to-text-not-selected) + ); } :host([selects]) ::slotted(sp-menu-item[selected]) { - --spectrum-menu-checkmark-display: var( - --spectrum-menu-checkmark-display-shown - ); - padding-inline-start: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); + --spectrum-menu-checkmark-display: var( + --spectrum-menu-checkmark-display-shown + ); + padding-inline-start: var( + --mod-menu-item-label-inline-edge-to-content, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); } .spectrum-Menu-backIcon { - margin-block: var( - --mod-menu-back-icon-margin-block, - var(--spectrum-menu-back-icon-margin) - ); - margin-inline: var( - --mod-menu-back-icon-margin-inline, - var(--spectrum-menu-back-icon-margin) - ); - fill: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-icon-color-default, - var(--spectrum-menu-section-header-color) - ) - ); - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-icon-color-default, - var(--spectrum-menu-section-header-color) - ) - ); + margin-block: var( + --mod-menu-back-icon-margin-block, + var(--spectrum-menu-back-icon-margin) + ); + margin-inline: var( + --mod-menu-back-icon-margin-inline, + var(--spectrum-menu-back-icon-margin) + ); + fill: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-icon-color-default, + var(--spectrum-menu-section-header-color) + ) + ); + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-icon-color-default, + var(--spectrum-menu-section-header-color) + ) + ); } .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + 1 + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); } .spectrum-Menu-sectionHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-section-header-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - min-inline-size: var( - --mod-menu-section-header-min-width, - var(--spectrum-menu-section-header-min-width) - ); - padding-block-start: var( - --mod-menu-section-header-top-edge-to-text, - var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ) - ); - padding-block-end: var( - --mod-menu-section-header-bottom-edge-to-text, - var( - --mod-menu-item-bottom-edge-to-text, - var(--spectrum-menu-item-bottom-edge-to-text) - ) - ); - padding-inline: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1; - display: block; + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-section-header-color, + var(--spectrum-menu-section-header-color) + ) + ); + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); + min-inline-size: var( + --mod-menu-section-header-min-width, + var(--spectrum-menu-section-header-min-width) + ); + padding-block-start: var( + --mod-menu-section-header-top-edge-to-text, + var( + --mod-menu-item-top-edge-to-text, + var(--spectrum-menu-item-top-edge-to-text) + ) + ); + padding-block-end: var( + --mod-menu-section-header-bottom-edge-to-text, + var( + --mod-menu-item-bottom-edge-to-text, + var(--spectrum-menu-item-bottom-edge-to-text) + ) + ); + padding-inline: var( + --mod-menu-item-label-inline-edge-to-content, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1; + display: block; } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-back .spectrum-Menu-sectionHeading { - padding: 0; + padding: 0; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); + display: block; } diff --git a/packages/meter/src/meter-overrides.css b/packages/meter/src/meter-overrides.css index e872c53860..a0a6d36be4 100644 --- a/packages/meter/src/meter-overrides.css +++ b/packages/meter/src/meter-overrides.css @@ -12,31 +12,27 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-meter-min-width: var(--system-meter-min-width); - --spectrum-meter-max-width: var(--system-meter-max-width); - --spectrum-meter-inline-size: var(--system-meter-inline-size); - --spectrum-meter-top-to-text: var(--system-meter-top-to-text); - --spectrum-meter-fill-color-positive: var( - --system-meter-fill-color-positive - ); - --spectrum-meter-fill-color-notice: var(--system-meter-fill-color-notice); - --spectrum-meter-fill-color-negative: var( - --system-meter-fill-color-negative - ); - --spectrum-meter-thickness: var(--system-meter-thickness); - --spectrum-meter-font-size: var(--system-meter-font-size); + --spectrum-meter-min-width: var(--system-meter-min-width); + --spectrum-meter-max-width: var(--system-meter-max-width); + --spectrum-meter-inline-size: var(--system-meter-inline-size); + --spectrum-meter-top-to-text: var(--system-meter-top-to-text); + --spectrum-meter-fill-color-positive: var(--system-meter-fill-color-positive); + --spectrum-meter-fill-color-notice: var(--system-meter-fill-color-notice); + --spectrum-meter-fill-color-negative: var(--system-meter-fill-color-negative); + --spectrum-meter-thickness: var(--system-meter-thickness); + --spectrum-meter-font-size: var(--system-meter-font-size); } -:host([size='s']) { - --spectrum-meter-thickness: var(--system-meter-size-s-thickness); - --spectrum-meter-inline-size: var(--system-meter-size-s-inline-size); - --spectrum-meter-font-size: var(--system-meter-size-s-font-size); - --spectrum-meter-top-to-text: var(--system-meter-size-s-top-to-text); +:host([size="s"]) { + --spectrum-meter-thickness: var(--system-meter-size-s-thickness); + --spectrum-meter-inline-size: var(--system-meter-size-s-inline-size); + --spectrum-meter-font-size: var(--system-meter-size-s-font-size); + --spectrum-meter-top-to-text: var(--system-meter-size-s-top-to-text); } -:host([size='l']) { - --spectrum-meter-thickness: var(--system-meter-size-l-thickness); - --spectrum-meter-inline-size: var(--system-meter-size-l-inline-size); - --spectrum-meter-font-size: var(--system-meter-size-l-font-size); - --spectrum-meter-top-to-text: var(--system-meter-size-l-top-to-text); +:host([size="l"]) { + --spectrum-meter-thickness: var(--system-meter-size-l-thickness); + --spectrum-meter-inline-size: var(--system-meter-size-l-inline-size); + --spectrum-meter-font-size: var(--system-meter-size-l-font-size); + --spectrum-meter-top-to-text: var(--system-meter-size-l-top-to-text); } diff --git a/packages/meter/src/progress-bar-overrides.css b/packages/meter/src/progress-bar-overrides.css index e32f60e60f..7f40bac93b 100644 --- a/packages/meter/src/progress-bar-overrides.css +++ b/packages/meter/src/progress-bar-overrides.css @@ -12,111 +12,97 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-progressbar-animation-ease-in-out-indeterminate: var( - --system-progress-bar-animation-ease-in-out-indeterminate - ); - --spectrum-progressbar-animation-duration-indeterminate: var( - --system-progress-bar-animation-duration-indeterminate - ); - --spectrum-progressbar-corner-radius: var( - --system-progress-bar-corner-radius - ); - --spectrum-progressbar-fill-size-indeterminate: var( - --system-progress-bar-fill-size-indeterminate - ); - --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); - --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); - --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); - --spectrum-progressbar-line-height-cjk: var( - --system-progress-bar-line-height-cjk - ); - --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); - --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); - --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); - --spectrum-progressbar-spacing-label-to-progressbar: var( - --system-progress-bar-spacing-label-to - ); - --spectrum-progressbar-spacing-label-to-text: var( - --system-progress-bar-spacing-label-to-text - ); - --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); - --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); - --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); - --spectrum-progressbar-label-and-value-white: var( - --system-progress-bar-label-and-value-white - ); - --spectrum-progressbar-track-color-white: var( - --system-progress-bar-track-color-white - ); - --spectrum-progressbar-fill-color-white: var( - --system-progress-bar-fill-color-white - ); - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-default - ); - --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-spacing-top-to-text - ); + --spectrum-progressbar-animation-ease-in-out-indeterminate: var( + --system-progress-bar-animation-ease-in-out-indeterminate + ); + --spectrum-progressbar-animation-duration-indeterminate: var( + --system-progress-bar-animation-duration-indeterminate + ); + --spectrum-progressbar-corner-radius: var( + --system-progress-bar-corner-radius + ); + --spectrum-progressbar-fill-size-indeterminate: var( + --system-progress-bar-fill-size-indeterminate + ); + --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); + --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); + --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); + --spectrum-progressbar-line-height-cjk: var( + --system-progress-bar-line-height-cjk + ); + --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); + --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); + --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); + --spectrum-progressbar-spacing-label-to-progressbar: var( + --system-progress-bar-spacing-label-to + ); + --spectrum-progressbar-spacing-label-to-text: var( + --system-progress-bar-spacing-label-to-text + ); + --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); + --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); + --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); + --spectrum-progressbar-label-and-value-white: var( + --system-progress-bar-label-and-value-white + ); + --spectrum-progressbar-track-color-white: var( + --system-progress-bar-track-color-white + ); + --spectrum-progressbar-fill-color-white: var( + --system-progress-bar-fill-color-white + ); + --spectrum-progressbar-size-default: var(--system-progress-bar-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-spacing-top-to-text + ); } .spectrum-ProgressBar--sizeM { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-m-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-m-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-m-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-m-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-m-size-default + ); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-m-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-m-thickness); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-m-spacing-top-to-text + ); } .spectrum-ProgressBar--sizeS { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-s-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-s-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-s-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-s-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-s-size-default + ); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-s-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-s-thickness); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-s-spacing-top-to-text + ); } .spectrum-ProgressBar--sizeL { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-l-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-l-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-l-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-l-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-l-size-default + ); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-l-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-l-thickness); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-l-spacing-top-to-text + ); } .spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-xl-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-xl-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-xl-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-xl-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-xl-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-xl-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-xl-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-xl-spacing-top-to-text + ); } diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index e35d60f894..7017c7e164 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -12,40 +12,40 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-progressbar-size-default: var( - --mod-meter-inline-size, - var(--spectrum-meter-inline-size) - ); - --mod-progressbar-max-size: var( - --mod-meter-max-width, - var(--spectrum-meter-max-width) - ); - --mod-progressbar-min-size: var( - --mod-meter-min-width, - var(--spectrum-meter-min-width) - ); - --mod-progressbar-thickness: var(--spectrum-meter-thickness); - --mod-progressbar-font-size: var(--spectrum-meter-font-size); - --mod-progressbar-spacing-top-to-text: var(--spectrum-meter-top-to-text); + --mod-progressbar-size-default: var( + --mod-meter-inline-size, + var(--spectrum-meter-inline-size) + ); + --mod-progressbar-max-size: var( + --mod-meter-max-width, + var(--spectrum-meter-max-width) + ); + --mod-progressbar-min-size: var( + --mod-meter-min-width, + var(--spectrum-meter-min-width) + ); + --mod-progressbar-thickness: var(--spectrum-meter-thickness); + --mod-progressbar-font-size: var(--spectrum-meter-font-size); + --mod-progressbar-spacing-top-to-text: var(--spectrum-meter-top-to-text); } -:host([variant='positive']) { - --mod-progressbar-fill-color: var( - --mod-meter-fill-color-positive, - var(--spectrum-meter-fill-color-positive) - ); +:host([variant="positive"]) { + --mod-progressbar-fill-color: var( + --mod-meter-fill-color-positive, + var(--spectrum-meter-fill-color-positive) + ); } -:host([variant='notice']) { - --mod-progressbar-fill-color: var( - --mod-meter-fill-color-notice, - var(--spectrum-meter-fill-color-notice) - ); +:host([variant="notice"]) { + --mod-progressbar-fill-color: var( + --mod-meter-fill-color-notice, + var(--spectrum-meter-fill-color-notice) + ); } -:host([variant='negative']) { - --mod-progressbar-fill-color: var( - --mod-meter-fill-color-negative, - var(--spectrum-meter-fill-color-negative) - ); +:host([variant="negative"]) { + --mod-progressbar-fill-color: var( + --mod-meter-fill-color-negative, + var(--spectrum-meter-fill-color-negative) + ); } diff --git a/packages/meter/src/spectrum-progress-bar.css b/packages/meter/src/spectrum-progress-bar.css index f8e10b8fbc..557ae2416d 100644 --- a/packages/meter/src/spectrum-progress-bar.css +++ b/packages/meter/src/spectrum-progress-bar.css @@ -12,49 +12,49 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - font-size: var( - --mod-progressbar-font-size, - var(--spectrum-progressbar-font-size) - ); - vertical-align: top; - inline-size: var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ); - max-inline-size: var( - --mod-progressbar-max-size, - var(--spectrum-progressbar-max-size) - ); - min-inline-size: var( - --mod-progressbar-min-size, - var(--spectrum-progressbar-min-size) - ); - flex-flow: wrap; - justify-content: space-between; - align-items: center; - display: inline-flex; - position: relative; + font-size: var( + --mod-progressbar-font-size, + var(--spectrum-progressbar-font-size) + ); + vertical-align: top; + inline-size: var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-size-default) + ); + max-inline-size: var( + --mod-progressbar-max-size, + var(--spectrum-progressbar-max-size) + ); + min-inline-size: var( + --mod-progressbar-min-size, + var(--spectrum-progressbar-min-size) + ); + flex-flow: wrap; + justify-content: space-between; + align-items: center; + display: inline-flex; + position: relative; } .label, .percentage { - text-align: start; - line-height: var( - --mod-progressbar-line-height, - var(--spectrum-progressbar-line-height) - ); - color: var( - --mod-progressbar-text-color, - var(--spectrum-progressbar-text-color) - ); - margin-block-start: var( - --mod-progressbar-spacing-top-to-text, - var(--spectrum-progressbar-spacing-top-to-text) - ); - margin-block-end: var( - --mod-progressbar-spacing-label-to-progressbar, - var(--spectrum-progressbar-spacing-label-to-progressbar) - ); + text-align: start; + line-height: var( + --mod-progressbar-line-height, + var(--spectrum-progressbar-line-height) + ); + color: var( + --mod-progressbar-text-color, + var(--spectrum-progressbar-text-color) + ); + margin-block-start: var( + --mod-progressbar-spacing-top-to-text, + var(--spectrum-progressbar-spacing-top-to-text) + ); + margin-block-end: var( + --mod-progressbar-spacing-label-to-progressbar, + var(--spectrum-progressbar-spacing-label-to-progressbar) + ); } .label:lang(ja), @@ -63,183 +63,179 @@ governing permissions and limitations under the License. .percentage:lang(ja), .percentage:lang(ko), .percentage:lang(zh) { - line-height: var( - --mod-progressbar-line-height-cjk, - var(--spectrum-progressbar-line-height-cjk) - ); + line-height: var( + --mod-progressbar-line-height-cjk, + var(--spectrum-progressbar-line-height-cjk) + ); } .label { - flex: 1; + flex: 1; } .percentage { - align-self: flex-start; - margin-inline-start: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + align-self: flex-start; + margin-inline-start: var( + --mod-progressbar-spacing-label-to-text, + var(--spectrum-progressbar-spacing-label-to-text) + ); } .track { - inline-size: 100%; - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) - ); - border-radius: var(--spectrum-progressbar-corner-radius); - background: var( - --highcontrast-progressbar-track-color, - var( - --mod-progressbar-track-color, - var(--spectrum-progressbar-track-color) - ) - ); - overflow: hidden; + inline-size: 100%; + block-size: var( + --mod-progressbar-thickness, + var(--spectrum-progressbar-thickness) + ); + border-radius: var(--spectrum-progressbar-corner-radius); + background: var( + --highcontrast-progressbar-track-color, + var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)) + ); + overflow: hidden; } .fill { - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) - ); - background: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color, - var(--spectrum-progressbar-fill-color) - ) - ); - border: none; - transition: width 1s; + block-size: var( + --mod-progressbar-thickness, + var(--spectrum-progressbar-thickness) + ); + background: var( + --highcontrast-progressbar-fill-color, + var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)) + ); + border: none; + transition: width 1s; } :host([indeterminate]) .fill { - inline-size: var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) - ); - animation-timing-function: var( - --mod-progressbar-animation-ease-in-out-indeterminate, - var(--spectrum-progressbar-animation-ease-in-out-indeterminate) - ); - will-change: transform; - animation-name: indeterminate-loop-ltr; - animation-duration: var( - --mod-progressbar-animation-duration-indeterminate, - var(--spectrum-progressbar-animation-duration-indeterminate) - ); - animation-iteration-count: infinite; - position: relative; + inline-size: var( + --mod-progressbar-fill-size-indeterminate, + var(--spectrum-progressbar-fill-size-indeterminate) + ); + animation-timing-function: var( + --mod-progressbar-animation-ease-in-out-indeterminate, + var(--spectrum-progressbar-animation-ease-in-out-indeterminate) + ); + will-change: transform; + animation-name: indeterminate-loop-ltr; + animation-duration: var( + --mod-progressbar-animation-duration-indeterminate, + var(--spectrum-progressbar-animation-duration-indeterminate) + ); + animation-iteration-count: infinite; + position: relative; } :host([indeterminate]) .fill:dir(rtl), -:host([dir='rtl'][indeterminate]) .fill { - animation-name: indeterminate-loop-rtl; +:host([dir="rtl"][indeterminate]) .fill { + animation-name: indeterminate-loop-rtl; } :host([side-label]) { - flex-flow: row; - justify-content: space-between; - display: inline-flex; + flex-flow: row; + justify-content: space-between; + display: inline-flex; } :host([side-label]) .track { - flex: 1 1 - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ); + flex: 1 1 + var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-size-default) + ); } :host([side-label]) .label { - flex-grow: 0; - margin-block-end: 0; - margin-inline-end: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + flex-grow: 0; + margin-block-end: 0; + margin-inline-end: var( + --mod-progressbar-spacing-label-to-text, + var(--spectrum-progressbar-spacing-label-to-text) + ); } :host([side-label]) .percentage { - text-align: end; - order: 3; - margin-block-end: 0; - margin-inline-start: var( - --mod-spacing-progressbar-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + text-align: end; + order: 3; + margin-block-end: 0; + margin-inline-start: var( + --mod-spacing-progressbar-label-to-text, + var(--spectrum-progressbar-spacing-label-to-text) + ); } -:host([static-color='white']) .fill { - background: var( - --mod-progressbar-fill-color-white, - var(--spectrum-progressbar-fill-color-white) - ); +:host([static-color="white"]) .fill { + background: var( + --mod-progressbar-fill-color-white, + var(--spectrum-progressbar-fill-color-white) + ); } -:host([static-color='white']) .fill, -:host([static-color='white']) .label, -:host([static-color='white']) .percentage { - color: var( - --mod-progressbar-label-and-value-white, - var(--spectrum-progressbar-label-and-value-white) - ); +:host([static-color="white"]) .fill, +:host([static-color="white"]) .label, +:host([static-color="white"]) .percentage { + color: var( + --mod-progressbar-label-and-value-white, + var(--spectrum-progressbar-label-and-value-white) + ); } -:host([static-color='white']) .track { - background: var(--spectrum-progressbar-track-color-white); +:host([static-color="white"]) .track { + background: var(--spectrum-progressbar-track-color-white); } @keyframes indeterminate-loop-ltr { - 0% { - transform: translate( - calc( - var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) - ) * -1 - ) - ); - } - - to { - transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) - ); - } + 0% { + transform: translate( + calc( + var( + --mod-progressbar-fill-size-indeterminate, + var(--spectrum-progressbar-fill-size-indeterminate) + ) * + -1 + ) + ); + } + + to { + transform: translate( + var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-size-default) + ) + ); + } } @keyframes indeterminate-loop-rtl { - 0% { - transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-fill-size-indeterminate) - ) - ); - } - - to { - transform: translate( - calc( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) * -1 - ) - ); - } + 0% { + transform: translate( + var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-fill-size-indeterminate) + ) + ); + } + + to { + transform: translate( + calc( + var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-size-default) + ) * + -1 + ) + ); + } } @media (forced-colors: active) { - .track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - forced-color-adjust: none; - border: 1px solid ButtonText; - } + .track { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + forced-color-adjust: none; + border: 1px solid ButtonText; + } } diff --git a/packages/modal/src/modal-overrides.css b/packages/modal/src/modal-overrides.css index da4e74817b..55a5bf12cb 100644 --- a/packages/modal/src/modal-overrides.css +++ b/packages/modal/src/modal-overrides.css @@ -12,26 +12,26 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-modal-confirm-exit-animation-delay: var( - --system-modal-confirm-exit-animation-delay - ); - --spectrum-modal-fullscreen-margin: var(--system-modal-fullscreen-margin); - --spectrum-modal-max-height: var(--system-modal-max-height); - --spectrum-modal-max-width: var(--system-modal-max-width); - --spectrum-modal-background-color: var(--system-modal-background-color); - --spectrum-modal-confirm-border-radius: var( - --system-modal-confirm-border-radius - ); - --spectrum-modal-confirm-exit-animation-duration: var( - --system-modal-confirm-exit-animation-duration - ); - --spectrum-modal-confirm-entry-animation-duration: var( - --system-modal-confirm-entry-animation-duration - ); - --spectrum-modal-confirm-entry-animation-delay: var( - --system-modal-confirm-entry-animation-delay - ); - --spectrum-modal-transition-animation-duration: var( - --system-modal-transition-animation-duration - ); + --spectrum-modal-confirm-exit-animation-delay: var( + --system-modal-confirm-exit-animation-delay + ); + --spectrum-modal-fullscreen-margin: var(--system-modal-fullscreen-margin); + --spectrum-modal-max-height: var(--system-modal-max-height); + --spectrum-modal-max-width: var(--system-modal-max-width); + --spectrum-modal-background-color: var(--system-modal-background-color); + --spectrum-modal-confirm-border-radius: var( + --system-modal-confirm-border-radius + ); + --spectrum-modal-confirm-exit-animation-duration: var( + --system-modal-confirm-exit-animation-duration + ); + --spectrum-modal-confirm-entry-animation-duration: var( + --system-modal-confirm-entry-animation-duration + ); + --spectrum-modal-confirm-entry-animation-delay: var( + --system-modal-confirm-entry-animation-delay + ); + --spectrum-modal-transition-animation-duration: var( + --system-modal-transition-animation-duration + ); } diff --git a/packages/modal/src/spectrum-modal-wrapper.css b/packages/modal/src/spectrum-modal-wrapper.css index 325ecd48cc..240766e212 100644 --- a/packages/modal/src/spectrum-modal-wrapper.css +++ b/packages/modal/src/spectrum-modal-wrapper.css @@ -12,42 +12,42 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - inline-size: 100vw; - block-size: 100vh; - block-size: -webkit-fill-available; - block-size: stretch; - visibility: hidden; - pointer-events: none; - z-index: 1; - transition: visibility 0s linear - var( - --mod-modal-transition-animation-duration, - var(--spectrum-modal-transition-animation-duration) - ); - justify-content: center; - align-items: center; - display: flex; - position: fixed; - inset-block-start: 0; - inset-inline-start: 0; + box-sizing: border-box; + inline-size: 100vw; + block-size: 100vh; + block-size: -webkit-fill-available; + block-size: stretch; + visibility: hidden; + pointer-events: none; + z-index: 1; + transition: visibility 0s linear + var( + --mod-modal-transition-animation-duration, + var(--spectrum-modal-transition-animation-duration) + ); + justify-content: center; + align-items: center; + display: flex; + position: fixed; + inset-block-start: 0; + inset-inline-start: 0; } :host([open]) { - visibility: visible; + visibility: visible; } @media only screen and (device-height <= 350px), - only screen and (device-width <= 400px) { - :host([responsive]) { - inline-size: 100%; - block-size: 100%; - max-inline-size: 100%; - max-block-size: 100%; - border-radius: 0; - } + only screen and (device-width <= 400px) { + :host([responsive]) { + inline-size: 100%; + block-size: 100%; + max-inline-size: 100%; + max-block-size: 100%; + border-radius: 0; + } - :host([responsive]) { - margin-block-start: 0; - } + :host([responsive]) { + margin-block-start: 0; + } } diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css index fcd925ba52..53f9e6a363 100644 --- a/packages/modal/src/spectrum-modal.css +++ b/packages/modal/src/spectrum-modal.css @@ -12,175 +12,169 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .modal { - pointer-events: none; - visibility: hidden; - opacity: 0; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; + transition: + transform + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + opacity + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + visibility 0s linear + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ); } :host([open]) .modal { - pointer-events: auto; - visibility: visible; - opacity: 1; - transition-delay: 0s; - transition-delay: var( - --mod-overlay-animation-duration-opened, - var(--spectrum-animation-duration-0, 0s) - ); + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: 0s; + transition-delay: var( + --mod-overlay-animation-duration-opened, + var(--spectrum-animation-duration-0, 0s) + ); } .modal { - transform: translateY( - var( - --mod-modal-confirm-entry-animation-distance, - var(--spectrum-modal-confirm-entry-animation-distance) - ) - ); - z-index: 1; - max-block-size: var( - --mod-modal-max-height, - var(--spectrum-modal-max-height) - ); - max-inline-size: var( - --mod-modal-max-width, - var(--spectrum-modal-max-width) - ); - background: var( - --mod-modal-background-color, - var(--spectrum-modal-background-color) - ); - border-radius: var( - --mod-modal-confirm-border-radius, - var(--spectrum-modal-confirm-border-radius) - ); - pointer-events: auto; - transition: - opacity - var( - --mod-modal-confirm-exit-animation-duration, - var(--spectrum-modal-confirm-exit-animation-duration) - ) - var(--spectrum-animation-ease-in) - var( - --mod-modal-confirm-exit-animation-delay, - var(--spectrum-modal-confirm-exit-animation-delay) - ), - visibility 0s linear - calc( - var( - --mod-modal-confirm-exit-animation-delay, - var(--spectrum-modal-confirm-exit-animation-delay) - ) + - var( - --mod-modal-confirm-exit-animation-duration, - var(--spectrum-modal-confirm-exit-animation-duration) - ) - ), - transform 0s linear - calc( - var( - --mod-modal-confirm-exit-animation-delay, - var(--spectrum-modal-confirm-exit-animation-delay) - ) + - var( - --mod-modal-confirm-exit-animation-duration, - var(--spectrum-modal-confirm-exit-animation-duration) - ) - ); - outline: none; - overflow: hidden; + transform: translateY( + var( + --mod-modal-confirm-entry-animation-distance, + var(--spectrum-modal-confirm-entry-animation-distance) + ) + ); + z-index: 1; + max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height)); + max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width)); + background: var( + --mod-modal-background-color, + var(--spectrum-modal-background-color) + ); + border-radius: var( + --mod-modal-confirm-border-radius, + var(--spectrum-modal-confirm-border-radius) + ); + pointer-events: auto; + transition: + opacity + var( + --mod-modal-confirm-exit-animation-duration, + var(--spectrum-modal-confirm-exit-animation-duration) + ) + var(--spectrum-animation-ease-in) + var( + --mod-modal-confirm-exit-animation-delay, + var(--spectrum-modal-confirm-exit-animation-delay) + ), + visibility 0s linear + calc( + var( + --mod-modal-confirm-exit-animation-delay, + var(--spectrum-modal-confirm-exit-animation-delay) + ) + + var( + --mod-modal-confirm-exit-animation-duration, + var(--spectrum-modal-confirm-exit-animation-duration) + ) + ), + transform 0s linear + calc( + var( + --mod-modal-confirm-exit-animation-delay, + var(--spectrum-modal-confirm-exit-animation-delay) + ) + + var( + --mod-modal-confirm-exit-animation-duration, + var(--spectrum-modal-confirm-exit-animation-duration) + ) + ); + outline: none; + overflow: hidden; } :host([open]) .modal { - transition: - transform - var( - --mod-modal-confirm-entry-animation-duration, - var(--spectrum-modal-confirm-entry-animation-duration) - ) - var(--spectrum-animation-ease-out) - var( - --mod-modal-confirm-entry-animation-delay, - var(--spectrum-modal-confirm-entry-animation-delay) - ), - opacity - var( - --mod-modal-confirm-entry-animation-duration, - var(--spectrum-modal-confirm-entry-animation-duration) - ) - var(--spectrum-animation-ease-out) - var( - --mod-modal-confirm-entry-animation-delay, - var(--spectrum-modal-confirm-entry-animation-delay) - ); - transform: translateY(0); + transition: + transform + var( + --mod-modal-confirm-entry-animation-duration, + var(--spectrum-modal-confirm-entry-animation-duration) + ) + var(--spectrum-animation-ease-out) + var( + --mod-modal-confirm-entry-animation-delay, + var(--spectrum-modal-confirm-entry-animation-delay) + ), + opacity + var( + --mod-modal-confirm-entry-animation-duration, + var(--spectrum-modal-confirm-entry-animation-duration) + ) + var(--spectrum-animation-ease-out) + var( + --mod-modal-confirm-entry-animation-delay, + var(--spectrum-modal-confirm-entry-animation-delay) + ); + transform: translateY(0); } @media only screen and (device-height <= 350px), - only screen and (device-width <= 400px) { - :host([responsive]) .modal { - inline-size: 100%; - block-size: 100%; - max-inline-size: 100%; - max-block-size: 100%; - border-radius: 0; - } + only screen and (device-width <= 400px) { + :host([responsive]) .modal { + inline-size: 100%; + block-size: 100%; + max-inline-size: 100%; + max-block-size: 100%; + border-radius: 0; + } } .fullscreen { - max-inline-size: none; - max-block-size: none; - position: fixed; - inset-block-start: var( - --mod-modal-fullscreen-margin, - var(--spectrum-modal-fullscreen-margin) - ); - inset-block-end: var( - --mod-modal-fullscreen-margin, - var(--spectrum-modal-fullscreen-margin) - ); - inset-inline-start: var( - --mod-modal-fullscreen-margin, - var(--spectrum-modal-fullscreen-margin) - ); - inset-inline-end: var( - --mod-modal-fullscreen-margin, - var(--spectrum-modal-fullscreen-margin) - ); + max-inline-size: none; + max-block-size: none; + position: fixed; + inset-block-start: var( + --mod-modal-fullscreen-margin, + var(--spectrum-modal-fullscreen-margin) + ); + inset-block-end: var( + --mod-modal-fullscreen-margin, + var(--spectrum-modal-fullscreen-margin) + ); + inset-inline-start: var( + --mod-modal-fullscreen-margin, + var(--spectrum-modal-fullscreen-margin) + ); + inset-inline-end: var( + --mod-modal-fullscreen-margin, + var(--spectrum-modal-fullscreen-margin) + ); } .fullscreenTakeover { - max-inline-size: none; - max-block-size: none; - box-sizing: border-box; - border: none; - border-radius: 0; - position: fixed; - inset: 0; + max-inline-size: none; + max-block-size: none; + box-sizing: border-box; + border: none; + border-radius: 0; + position: fixed; + inset: 0; } .fullscreenTakeover, :host([open]) .fullscreenTakeover { - transform: none; + transform: none; } diff --git a/packages/number-field/src/number-field-overrides.css b/packages/number-field/src/number-field-overrides.css index 64a2b4e35c..23de3970be 100644 --- a/packages/number-field/src/number-field-overrides.css +++ b/packages/number-field/src/number-field-overrides.css @@ -12,117 +12,117 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-stepper-border-width: var(--system-stepper-border-width); - --spectrum-stepper-border-color: var(--system-stepper-border-color); - --spectrum-stepper-border-color-hover: var( - --system-stepper-border-color-hover - ); - --spectrum-stepper-border-color-focus: var( - --system-stepper-border-color-focus - ); - --spectrum-stepper-border-color-focus-hover: var( - --system-stepper-border-color-focus-hover - ); - --spectrum-stepper-border-color-keyboard-focus: var( - --system-stepper-border-color-keyboard-focus - ); - --spectrum-stepper-border-radius: var(--system-stepper-border-radius); - --spectrum-stepper-min-width-multiplier: var( - --system-stepper-min-width-multiplier - ); - --spectrum-stepper-animation-duration: var( - --system-stepper-animation-duration - ); - --spectrum-stepper-buttons-border-style: var( - --system-stepper-buttons-border-style - ); - --spectrum-stepper-buttons-border-width: var( - --system-stepper-buttons-border-width - ); - --spectrum-stepper-buttons-border-color: var( - --system-stepper-buttons-border-color - ); - --spectrum-stepper-buttons-background-color: var( - --system-stepper-buttons-background-color - ); - --spectrum-stepper-buttons-border-color-hover: var( - --system-stepper-buttons-border-color-hover - ); - --spectrum-stepper-buttons-border-color-focus: var( - --system-stepper-buttons-border-color-focus - ); - --spectrum-stepper-buttons-border-color-keyboard-focus: var( - --system-stepper-buttons-border-color-keyboard-focus - ); - --spectrum-stepper-button-padding: var(--system-stepper-button-padding); - --spectrum-stepper-button-border-radius-reset: var( - --system-stepper-button-border-radius-reset - ); - --spectrum-stepper-button-border-width: var( - --system-stepper-button-border-width - ); - --spectrum-stepper-button-background-color-focus: var( - --system-stepper-button-background-color-focus - ); - --spectrum-stepper-button-background-color-keyboard-focus: var( - --system-stepper-button-background-color-keyboard-focus - ); - --spectrum-stepper-border-color-invalid: var( - --system-stepper-border-color-invalid - ); - --spectrum-stepper-border-color-hover-invalid: var( - --system-stepper-border-color-hover-invalid - ); - --spectrum-stepper-border-color-focus-invalid: var( - --system-stepper-border-color-focus-invalid - ); - --spectrum-stepper-border-color-focus-hover-invalid: var( - --system-stepper-border-color-focus-hover-invalid - ); - --spectrum-stepper-border-color-keyboard-focus-invalid: var( - --system-stepper-border-color-keyboard-focus-invalid - ); - --spectrum-stepper-focus-indicator-width: var( - --system-stepper-focus-indicator-width - ); - --spectrum-stepper-focus-indicator-gap: var( - --system-stepper-focus-indicator-gap - ); - --spectrum-stepper-focus-indicator-color: var( - --system-stepper-focus-indicator-color - ); - --spectrum-stepper-button-border-color-quiet: var( - --system-stepper-button-border-color-quiet - ); - --spectrum-stepper-button-border-color-disabled: var( - --system-stepper-button-border-color-disabled - ); - --spectrum-stepper-button-border-width-disabled: var( - --system-stepper-button-border-width-disabled - ); - --spectrum-stepper-buttons-background-color-disabled: var( - --system-stepper-buttons-background-color-disabled - ); - --spectrum-stepper-button-width: var(--system-stepper-button-width); - --spectrum-stepper-height: var(--system-stepper-height); + --spectrum-stepper-border-width: var(--system-stepper-border-width); + --spectrum-stepper-border-color: var(--system-stepper-border-color); + --spectrum-stepper-border-color-hover: var( + --system-stepper-border-color-hover + ); + --spectrum-stepper-border-color-focus: var( + --system-stepper-border-color-focus + ); + --spectrum-stepper-border-color-focus-hover: var( + --system-stepper-border-color-focus-hover + ); + --spectrum-stepper-border-color-keyboard-focus: var( + --system-stepper-border-color-keyboard-focus + ); + --spectrum-stepper-border-radius: var(--system-stepper-border-radius); + --spectrum-stepper-min-width-multiplier: var( + --system-stepper-min-width-multiplier + ); + --spectrum-stepper-animation-duration: var( + --system-stepper-animation-duration + ); + --spectrum-stepper-buttons-border-style: var( + --system-stepper-buttons-border-style + ); + --spectrum-stepper-buttons-border-width: var( + --system-stepper-buttons-border-width + ); + --spectrum-stepper-buttons-border-color: var( + --system-stepper-buttons-border-color + ); + --spectrum-stepper-buttons-background-color: var( + --system-stepper-buttons-background-color + ); + --spectrum-stepper-buttons-border-color-hover: var( + --system-stepper-buttons-border-color-hover + ); + --spectrum-stepper-buttons-border-color-focus: var( + --system-stepper-buttons-border-color-focus + ); + --spectrum-stepper-buttons-border-color-keyboard-focus: var( + --system-stepper-buttons-border-color-keyboard-focus + ); + --spectrum-stepper-button-padding: var(--system-stepper-button-padding); + --spectrum-stepper-button-border-radius-reset: var( + --system-stepper-button-border-radius-reset + ); + --spectrum-stepper-button-border-width: var( + --system-stepper-button-border-width + ); + --spectrum-stepper-button-background-color-focus: var( + --system-stepper-button-background-color-focus + ); + --spectrum-stepper-button-background-color-keyboard-focus: var( + --system-stepper-button-background-color-keyboard-focus + ); + --spectrum-stepper-border-color-invalid: var( + --system-stepper-border-color-invalid + ); + --spectrum-stepper-border-color-hover-invalid: var( + --system-stepper-border-color-hover-invalid + ); + --spectrum-stepper-border-color-focus-invalid: var( + --system-stepper-border-color-focus-invalid + ); + --spectrum-stepper-border-color-focus-hover-invalid: var( + --system-stepper-border-color-focus-hover-invalid + ); + --spectrum-stepper-border-color-keyboard-focus-invalid: var( + --system-stepper-border-color-keyboard-focus-invalid + ); + --spectrum-stepper-focus-indicator-width: var( + --system-stepper-focus-indicator-width + ); + --spectrum-stepper-focus-indicator-gap: var( + --system-stepper-focus-indicator-gap + ); + --spectrum-stepper-focus-indicator-color: var( + --system-stepper-focus-indicator-color + ); + --spectrum-stepper-button-border-color-quiet: var( + --system-stepper-button-border-color-quiet + ); + --spectrum-stepper-button-border-color-disabled: var( + --system-stepper-button-border-color-disabled + ); + --spectrum-stepper-button-border-width-disabled: var( + --system-stepper-button-border-width-disabled + ); + --spectrum-stepper-buttons-background-color-disabled: var( + --system-stepper-buttons-background-color-disabled + ); + --spectrum-stepper-button-width: var(--system-stepper-button-width); + --spectrum-stepper-height: var(--system-stepper-height); } -:host([size='s']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-s-button-width); - --spectrum-stepper-height: var(--system-stepper-size-s-height); +:host([size="s"]) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-s-button-width); + --spectrum-stepper-height: var(--system-stepper-size-s-height); } -:host([size='m']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-m-button-width); - --spectrum-stepper-height: var(--system-stepper-size-m-height); +:host([size="m"]) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-m-button-width); + --spectrum-stepper-height: var(--system-stepper-size-m-height); } -:host([size='l']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-l-button-width); - --spectrum-stepper-height: var(--system-stepper-size-l-height); +:host([size="l"]) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-l-button-width); + --spectrum-stepper-height: var(--system-stepper-size-l-height); } -:host([size='xl']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); - --spectrum-stepper-height: var(--system-stepper-size-xl-height); +:host([size="xl"]) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); + --spectrum-stepper-height: var(--system-stepper-size-xl-height); } diff --git a/packages/number-field/src/spectrum-number-field.css b/packages/number-field/src/spectrum-number-field.css index f85c15210c..0d5139bdee 100644 --- a/packages/number-field/src/spectrum-number-field.css +++ b/packages/number-field/src/spectrum-number-field.css @@ -12,537 +12,532 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #textfield { - --spectrum-stepper-width: calc( - var(--mod-stepper-height, var(--spectrum-stepper-height)) * - var( - --mod-stepper-min-width-multiplier, - var(--spectrum-stepper-min-width-multiplier) - ) + - var( - --mod-stepper-button-width, - var(--spectrum-stepper-button-width) - ) + - var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ) * 2 - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color, - var( - --mod-stepper-buttons-border-color, - var(--spectrum-stepper-buttons-border-color) - ) - ); - --mod-infield-button-border-width: var( - --mod-stepper-button-border-width, - var(--spectrum-stepper-button-border-width) - ); - --mod-infield-button-border-radius-reset: var( - --spectrum-stepper-button-border-radius-reset - ); - --mod-textfield-border-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - border-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - flex-flow: row; - display: inline-flex; - position: relative; + --spectrum-stepper-width: calc( + var(--mod-stepper-height, var(--spectrum-stepper-height)) * + var( + --mod-stepper-min-width-multiplier, + var(--spectrum-stepper-min-width-multiplier) + ) + + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2 + ); + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color, + var( + --mod-stepper-buttons-border-color, + var(--spectrum-stepper-buttons-border-color) + ) + ); + --mod-infield-button-border-width: var( + --mod-stepper-button-border-width, + var(--spectrum-stepper-button-border-width) + ); + --mod-infield-button-border-radius-reset: var( + --spectrum-stepper-button-border-radius-reset + ); + --mod-textfield-border-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); + inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); + block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); + border-radius: var( + --mod-stepper-border-radius, + var(--spectrum-stepper-border-radius) + ); + border-color: var( + --highcontrast-stepper-border-color, + var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + ); + flex-flow: row; + display: inline-flex; + position: relative; } #textfield:before { - content: ''; + content: ""; } #textfield:after { - content: ''; - inline-size: 100%; - block-size: var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) - ); - position: absolute; - inset-block-end: calc( - ( - var( - --mod-stepper-focus-indicator-gap, - var(--spectrum-stepper-focus-indicator-gap) - ) + - var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) - ) - ) * -1 - ); - inset-inline-start: 0; + content: ""; + inline-size: 100%; + block-size: var( + --mod-stepper-focus-indicator-width, + var(--spectrum-stepper-focus-indicator-width) + ); + position: absolute; + inset-block-end: calc( + ( + var( + --mod-stepper-focus-indicator-gap, + var(--spectrum-stepper-focus-indicator-gap) + ) + + var( + --mod-stepper-focus-indicator-width, + var(--spectrum-stepper-focus-indicator-width) + ) + ) * + -1 + ); + inset-inline-start: 0; } :host([focused]) #textfield, #textfield:focus { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-border-color-focus, - var(--spectrum-stepper-border-color-focus) - ) - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-buttons-border-color-focus, - var(--spectrum-stepper-buttons-border-color-focus) - ) - ); + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-border-color-focus, + var(--spectrum-stepper-border-color-focus) + ) + ); + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-buttons-border-color-focus, + var(--spectrum-stepper-buttons-border-color-focus) + ) + ); } :host([focused]:not([disabled])) #textfield .input, :host(:not([disabled])) #textfield:focus .input { - outline: none; + outline: none; } :host([focused]:not([disabled])) #textfield .buttons, :host([focused]:not([disabled])) #textfield .input, :host(:not([disabled])) #textfield:focus .buttons, :host(:not([disabled])) #textfield:focus .input { - border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-border-color-focus, - var(--spectrum-stepper-border-color-focus) - ) - ); + border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-border-color-focus, + var(--spectrum-stepper-border-color-focus) + ) + ); } :host([keyboard-focused]) #textfield, #textfield:focus-visible { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-buttons-border-color-keyboard-focus, - var(--spectrum-stepper-buttons-border-color-keyboard-focus) - ) - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-buttons-border-color-keyboard-focus, - var(--spectrum-stepper-buttons-border-color-keyboard-focus) - ) - ); + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus, + var( + --mod-stepper-buttons-border-color-keyboard-focus, + var(--spectrum-stepper-buttons-border-color-keyboard-focus) + ) + ); + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus, + var( + --mod-stepper-buttons-border-color-keyboard-focus, + var(--spectrum-stepper-buttons-border-color-keyboard-focus) + ) + ); } :host([keyboard-focused]:not([disabled])) #textfield, :host(:not([disabled])) #textfield:focus-visible { - outline: var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) - ) - solid; - outline-color: var( - --highcontrast-stepper-focus-indicator-color, - var( - --mod-stepper-focus-indicator-color, - var(--spectrum-stepper-focus-indicator-color) - ) - ); - outline-offset: var( - --mod-stepper-focus-indicator-gap, - var(--spectrum-stepper-focus-indicator-gap) - ); + outline: var( + --mod-stepper-focus-indicator-width, + var(--spectrum-stepper-focus-indicator-width) + ) + solid; + outline-color: var( + --highcontrast-stepper-focus-indicator-color, + var( + --mod-stepper-focus-indicator-color, + var(--spectrum-stepper-focus-indicator-color) + ) + ); + outline-offset: var( + --mod-stepper-focus-indicator-gap, + var(--spectrum-stepper-focus-indicator-gap) + ); } :host([keyboard-focused]:not([disabled])) #textfield .input, :host(:not([disabled])) #textfield:focus-visible .input { - outline: none; + outline: none; } :host([keyboard-focused]:not([disabled])) #textfield .buttons, :host([keyboard-focused]:not([disabled])) #textfield .input, :host(:not([disabled])) #textfield:focus-visible .buttons, :host(:not([disabled])) #textfield:focus-visible .input { - border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-border-color-keyboard-focus, - var(--spectrum-stepper-border-color-keyboard-focus) - ) - ); + border-color: var( + --highcontrast-stepper-border-color-keyboard-focus, + var( + --mod-stepper-border-color-keyboard-focus, + var(--spectrum-stepper-border-color-keyboard-focus) + ) + ); } :host([invalid]:not([disabled])) #textfield { - --mod-stepper-border-color: var( - --mod-stepper-border-color-invalid, - var(--spectrum-stepper-border-color-invalid) - ); - --mod-stepper-border-color-hover: var( - --mod-stepper-border-color-hover-invalid, - var(--spectrum-stepper-border-color-hover-invalid) - ); - --mod-stepper-border-color-focus: var( - --mod-stepper-border-color-focus-invalid, - var(--spectrum-stepper-border-color-focus-invalid) - ); - --mod-stepper-border-color-focus-hover: var( - --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-stepper-border-color-focus-hover-invalid) - ); - --mod-stepper-border-color-keyboard-focus: var( - --mod-stepper-border-color-keyboard-focus-invalid, - var(--spectrum-stepper-border-color-keyboard-focus-invalid) - ); - --mod-infield-button-border-color: var( - --mod-stepper-border-color-invalid, - var(--spectrum-stepper-border-color-invalid) - ); - --mod-textfield-icon-spacing-inline-start-invalid: 0; + --mod-stepper-border-color: var( + --mod-stepper-border-color-invalid, + var(--spectrum-stepper-border-color-invalid) + ); + --mod-stepper-border-color-hover: var( + --mod-stepper-border-color-hover-invalid, + var(--spectrum-stepper-border-color-hover-invalid) + ); + --mod-stepper-border-color-focus: var( + --mod-stepper-border-color-focus-invalid, + var(--spectrum-stepper-border-color-focus-invalid) + ); + --mod-stepper-border-color-focus-hover: var( + --mod-stepper-border-color-focus-hover-invalid, + var(--spectrum-stepper-border-color-focus-hover-invalid) + ); + --mod-stepper-border-color-keyboard-focus: var( + --mod-stepper-border-color-keyboard-focus-invalid, + var(--spectrum-stepper-border-color-keyboard-focus-invalid) + ); + --mod-infield-button-border-color: var( + --mod-stepper-border-color-invalid, + var(--spectrum-stepper-border-color-invalid) + ); + --mod-textfield-icon-spacing-inline-start-invalid: 0; } :host([invalid][focused]:not([disabled])) #textfield, :host([invalid]:not([disabled])) #textfield:focus { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-focus-invalid, - var(--spectrum-stepper-border-color-focus-invalid) - ); + --mod-infield-button-border-color: var( + --mod-stepper-border-color-focus-invalid, + var(--spectrum-stepper-border-color-focus-invalid) + ); } :host([invalid][keyboard-focused]:not([disabled])) #textfield, :host([invalid]:not([disabled])) #textfield:focus-visible { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-keyboard-focus-invalid, - var(--spectrum-stepper-border-color-keyboard-focus-invalid) - ); + --mod-infield-button-border-color: var( + --mod-stepper-border-color-keyboard-focus-invalid, + var(--spectrum-stepper-border-color-keyboard-focus-invalid) + ); } :host([disabled]) #textfield { - --mod-stepper-border-color: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-hover: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-focus: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-focus-hover: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-keyboard-focus: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-buttons-background-color: var( - --spectrum-stepper-buttons-background-color-disabled - ); - --mod-infield-button-border-width: var( - --spectrum-stepper-button-border-width-disabled - ); - --mod-infield-button-border-color: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-textfield-border-color-disabled: var( - --spectrum-stepper-button-border-color-disabled - ); + --mod-stepper-border-color: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-border-color-hover: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-border-color-focus: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-border-color-focus-hover: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-border-color-keyboard-focus: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-stepper-buttons-background-color: var( + --spectrum-stepper-buttons-background-color-disabled + ); + --mod-infield-button-border-width: var( + --spectrum-stepper-button-border-width-disabled + ); + --mod-infield-button-border-color: var( + --spectrum-stepper-button-border-color-disabled + ); + --mod-textfield-border-color-disabled: var( + --spectrum-stepper-button-border-color-disabled + ); } #textfield .input { - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - border-inline-end-width: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; + border-color: var( + --highcontrast-stepper-border-color, + var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + ); + border-inline-end-width: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } #textfield.hide-stepper .input { - border-inline-end-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - border-start-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - border-end-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); + border-inline-end-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); + border-start-end-radius: var( + --mod-stepper-border-radius, + var(--spectrum-stepper-border-radius) + ); + border-end-end-radius: var( + --mod-stepper-border-radius, + var(--spectrum-stepper-border-radius) + ); } #textfield .buttons { - box-sizing: border-box; - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - inline-size: var( - --mod-stepper-button-width, - var(--spectrum-stepper-button-width) - ); - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - border-style: var( - --mod-stepper-buttons-border-style, - var(--spectrum-stepper-buttons-border-style) - ); - border-width: var( - --highcontrast-stepper-buttons-border-width, - var( - --mod-stepper-buttons-border-width, - var(--spectrum-stepper-buttons-border-width) - ) - ); - background-color: var( - --highcontrast-stepper-buttons-background-color, - var( - --mod-stepper-buttons-background-color, - var(--spectrum-stepper-buttons-background-color) - ) - ); - transition: border-color - var( - --mod-stepper-animation-duration, - var(--spectrum-stepper-animation-duration) - ) - ease-in-out; - border-inline-start-width: 0; - border-start-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - border-end-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - flex-direction: column; - justify-content: center; - display: flex; + box-sizing: border-box; + block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); + inline-size: var( + --mod-stepper-button-width, + var(--spectrum-stepper-button-width) + ); + border-color: var( + --highcontrast-stepper-border-color, + var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + ); + border-style: var( + --mod-stepper-buttons-border-style, + var(--spectrum-stepper-buttons-border-style) + ); + border-width: var( + --highcontrast-stepper-buttons-border-width, + var( + --mod-stepper-buttons-border-width, + var(--spectrum-stepper-buttons-border-width) + ) + ); + background-color: var( + --highcontrast-stepper-buttons-background-color, + var( + --mod-stepper-buttons-background-color, + var(--spectrum-stepper-buttons-background-color) + ) + ); + transition: border-color + var( + --mod-stepper-animation-duration, + var(--spectrum-stepper-animation-duration) + ) + ease-in-out; + border-inline-start-width: 0; + border-start-end-radius: var( + --mod-stepper-border-radius, + var(--spectrum-stepper-border-radius) + ); + border-end-end-radius: var( + --mod-stepper-border-radius, + var(--spectrum-stepper-border-radius) + ); + flex-direction: column; + justify-content: center; + display: flex; } :host([quiet]) #textfield { - border-start-start-radius: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: 0; + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; } :host([quiet]) #textfield .input { - --mod-textfield-focus-indicator-color: transparent; + --mod-textfield-focus-indicator-color: transparent; } :host([quiet]) #textfield.hide-stepper .input { - border-inline-end-width: 0; - border-end-end-radius: 0; + border-inline-end-width: 0; + border-end-end-radius: 0; } :host([quiet]) #textfield .buttons { - --mod-infield-button-border-color: transparent; - border-width: 0; - border-block-end-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - border-block-end-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - border-block-end-style: solid; - border-end-end-radius: 0; + --mod-infield-button-border-color: transparent; + border-width: 0; + border-block-end-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); + border-block-end-color: var( + --highcontrast-stepper-border-color, + var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) + ); + border-block-end-style: solid; + border-end-end-radius: 0; } :host([quiet]) #textfield .button { - --mod-infield-button-width-stacked: var( - --mod-stepper-button-width-quiet, - var(--spectrum-stepper-button-width) - ); - --mod-infield-button-border-color: var( - --mod-stepper-border-color-quiet, - var(--spectrum-stepper-button-border-color-quiet) - ); - --mod-infield-button-stacked-bottom-border-block-end-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - --mod-infield-button-stacked-bottom-border-radius-end-end: 0; - --mod-infield-button-stacked-bottom-border-radius-end-start: 0; - --mod-infield-button-fill-justify-content: flex-end; - padding: 0; + --mod-infield-button-width-stacked: var( + --mod-stepper-button-width-quiet, + var(--spectrum-stepper-button-width) + ); + --mod-infield-button-border-color: var( + --mod-stepper-border-color-quiet, + var(--spectrum-stepper-button-border-color-quiet) + ); + --mod-infield-button-stacked-bottom-border-block-end-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); + --mod-infield-button-stacked-bottom-border-radius-end-end: 0; + --mod-infield-button-stacked-bottom-border-radius-end-start: 0; + --mod-infield-button-fill-justify-content: flex-end; + padding: 0; } :host([quiet]) #textfield .buttons, :host([quiet]) #textfield .input { - background-color: initial; + background-color: initial; } :host([quiet][focused]) #textfield, :host([quiet]) #textfield:focus { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-border-color-focus, - var(--spectrum-stepper-border-color-focus) - ) - ); + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-focus, + var( + --mod-stepper-border-color-focus, + var(--spectrum-stepper-border-color-focus) + ) + ); } :host([quiet][keyboard-focused]:not([disabled])) #textfield { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-border-color-keyboard-focus, - var(--spectrum-stepper-border-color-keyboard-focus) - ) - ); - outline: none; + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-keyboard-focus, + var( + --mod-stepper-border-color-keyboard-focus, + var(--spectrum-stepper-border-color-keyboard-focus) + ) + ); + outline: none; } :host([quiet][keyboard-focused]:not([disabled])) #textfield:after { - background-color: var( - --highcontrast-stepper-focus-indicator-color, - var( - --mod-stepper-focus-indicator-color, - var(--spectrum-stepper-focus-indicator-color) - ) - ); + background-color: var( + --highcontrast-stepper-focus-indicator-color, + var( + --mod-stepper-focus-indicator-color, + var(--spectrum-stepper-focus-indicator-color) + ) + ); } @media (hover: hover) { - :host(:hover:not([disabled])) #textfield { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-hover, - var( - --mod-stepper-border-color-hover, - var(--spectrum-stepper-border-color-hover) - ) - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, - var( - --mod-stepper-buttons-border-color-hover, - var(--spectrum-stepper-buttons-border-color-hover) - ) - ); - } - - :host([focused]:hover) #textfield, - :host(:hover) #textfield:focus { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-focus-hover, - var( - --mod-stepper-buttons-border-color-focus-hover, - var(--spectrum-stepper-buttons-border-color-focus-hover) - ) - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus-hover, - var( - --mod-stepper-buttons-border-color-focus-hover, - var(--spectrum-stepper-buttons-border-color-focus-hover) - ) - ); - } - - :host([focused]:hover) #textfield .buttons, - :host([focused]:hover) #textfield .input, - :host(:hover) #textfield:focus .buttons, - :host(:hover) #textfield:focus .input { - border-color: var( - --highcontrast-stepper-border-color-focus-hover, - var( - --mod-stepper-border-color-focus-hover, - var(--spectrum-stepper-border-color-focus-hover) - ) - ); - } - - :host([invalid]:not([disabled]):hover) #textfield { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-hover-invalid, - var(--spectrum-stepper-border-color-hover-invalid) - ); - } - - :host([invalid][focused]:not([disabled]):hover) #textfield, - :host([invalid]:not([disabled]):hover) #textfield:focus { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-stepper-border-color-focus-hover-invalid) - ); - } - - :host([quiet]:not([disabled]):hover) #textfield { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, - var( - --mod-stepper-border-color-hover, - var(--spectrum-stepper-border-color-hover) - ) - ); - } - - :host([quiet]:not([disabled]):hover) #textfield .buttons { - background-color: initial; - } - - :host([quiet][focused]:hover) #textfield, - :host([quiet]:hover) #textfield:focus { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus-hover, - var( - --mod-stepper-border-color-focus-hover, - var(--spectrum-stepper-border-color-focus-hover) - ) - ); - } - - :host([quiet][keyboard-focused]:not([disabled]):hover) #textfield { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, - var( - --mod-stepper-border-color-hover, - var(--spectrum-stepper-border-color-hover) - ) - ); - } + :host(:hover:not([disabled])) #textfield { + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-hover, + var( + --mod-stepper-border-color-hover, + var(--spectrum-stepper-border-color-hover) + ) + ); + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-hover, + var( + --mod-stepper-buttons-border-color-hover, + var(--spectrum-stepper-buttons-border-color-hover) + ) + ); + } + + :host([focused]:hover) #textfield, + :host(:hover) #textfield:focus { + --mod-stepper-border-color: var( + --highcontrast-stepper-border-color-focus-hover, + var( + --mod-stepper-buttons-border-color-focus-hover, + var(--spectrum-stepper-buttons-border-color-focus-hover) + ) + ); + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-focus-hover, + var( + --mod-stepper-buttons-border-color-focus-hover, + var(--spectrum-stepper-buttons-border-color-focus-hover) + ) + ); + } + + :host([focused]:hover) #textfield .buttons, + :host([focused]:hover) #textfield .input, + :host(:hover) #textfield:focus .buttons, + :host(:hover) #textfield:focus .input { + border-color: var( + --highcontrast-stepper-border-color-focus-hover, + var( + --mod-stepper-border-color-focus-hover, + var(--spectrum-stepper-border-color-focus-hover) + ) + ); + } + + :host([invalid]:not([disabled]):hover) #textfield { + --mod-infield-button-border-color: var( + --mod-stepper-border-color-hover-invalid, + var(--spectrum-stepper-border-color-hover-invalid) + ); + } + + :host([invalid][focused]:not([disabled]):hover) #textfield, + :host([invalid]:not([disabled]):hover) #textfield:focus { + --mod-infield-button-border-color: var( + --mod-stepper-border-color-focus-hover-invalid, + var(--spectrum-stepper-border-color-focus-hover-invalid) + ); + } + + :host([quiet]:not([disabled]):hover) #textfield { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-hover, + var( + --mod-stepper-border-color-hover, + var(--spectrum-stepper-border-color-hover) + ) + ); + } + + :host([quiet]:not([disabled]):hover) #textfield .buttons { + background-color: initial; + } + + :host([quiet][focused]:hover) #textfield, + :host([quiet]:hover) #textfield:focus { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-focus-hover, + var( + --mod-stepper-border-color-focus-hover, + var(--spectrum-stepper-border-color-focus-hover) + ) + ); + } + + :host([quiet][keyboard-focused]:not([disabled]):hover) #textfield { + --mod-infield-button-border-color: var( + --highcontrast-stepper-border-color-hover, + var( + --mod-stepper-border-color-hover, + var(--spectrum-stepper-border-color-hover) + ) + ); + } } @media (forced-colors: active) { - :host { - --highcontrast-stepper-border-color: CanvasText; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: CanvasText; - --highcontrast-stepper-button-background-color-default: Canvas; - --highcontrast-stepper-button-background-color-hover: Canvas; - --highcontrast-stepper-button-background-color-focus: Canvas; - --highcontrast-stepper-button-background-color-keyboard-focus: Canvas; - --highcontrast-stepper-focus-indicator-color: Highlight; - } - - :host([invalid]) #textfield { - --highcontrast-stepper-border-color: Highlight; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: Highlight; - --highcontrast-infield-button-border-color: Highlight; - } - - :host([disabled]) #textfield { - --highcontrast-stepper-border-color: GrayText; - --highcontrast-infield-button-border-color: GrayText; - --highcontrast-stepper-buttons-border-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - } + :host { + --highcontrast-stepper-border-color: CanvasText; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: CanvasText; + --highcontrast-stepper-button-background-color-default: Canvas; + --highcontrast-stepper-button-background-color-hover: Canvas; + --highcontrast-stepper-button-background-color-focus: Canvas; + --highcontrast-stepper-button-background-color-keyboard-focus: Canvas; + --highcontrast-stepper-focus-indicator-color: Highlight; + } + + :host([invalid]) #textfield { + --highcontrast-stepper-border-color: Highlight; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: Highlight; + --highcontrast-infield-button-border-color: Highlight; + } + + :host([disabled]) #textfield { + --highcontrast-stepper-border-color: GrayText; + --highcontrast-infield-button-border-color: GrayText; + --highcontrast-stepper-buttons-border-width: var( + --mod-stepper-border-width, + var(--spectrum-stepper-border-width) + ); + } } diff --git a/packages/picker-button/src/picker-button-overrides.css b/packages/picker-button/src/picker-button-overrides.css index 5ef0a6e107..c686d0a71f 100644 --- a/packages/picker-button/src/picker-button-overrides.css +++ b/packages/picker-button/src/picker-button-overrides.css @@ -12,147 +12,143 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .root { - --spectrum-picker-button-background-color: var( - --system-picker-button-background-color - ); - --spectrum-picker-button-background-color-hover: var( - --system-picker-button-background-color-hover - ); - --spectrum-picker-button-background-color-down: var( - --system-picker-button-background-color-down - ); - --spectrum-picker-button-background-color-key-focus: var( - --system-picker-button-background-color-key-focus - ); - --spectrum-picker-button-border-color: var( - --system-picker-button-border-color - ); - --spectrum-picker-button-border-radius: var( - --system-picker-button-border-radius - ); - --spectrum-picker-button-border-radius-rounded-sided: var( - --system-picker-button-border-radius-rounded-sided - ); - --spectrum-picker-button-border-radius-sided: var( - --system-picker-button-border-radius-sided - ); - --spectrum-picker-button-border-width: var( - --system-picker-button-border-width - ); - --spectrum-picker-button-height: var(--system-picker-button-height); - --spectrum-picker-button-width: var(--system-picker-button-width); - --spectrum-picker-button-gap: var(--system-picker-button-gap); - --spectrum-picker-button-padding: var(--system-picker-button-padding); - --spectrum-picker-button-label-padding: var( - --system-picker-button-label-padding - ); - --spectrum-picker-button-fill-padding: var( - --system-picker-button-fill-padding - ); - --spectrum-picker-button-border-radius-rounded: var( - --system-picker-button-border-radius-rounded - ); - --spectrum-picker-button-icon-color: var(--system-picker-button-icon-color); - --spectrum-picker-button-icon-color-hover: var( - --system-picker-button-icon-color-hover - ); - --spectrum-picker-button-icon-color-down: var( - --system-picker-button-icon-color-down - ); - --spectrum-picker-button-icon-color-key-focus: var( - --system-picker-button-icon-color-key-focus - ); - --spectrum-picker-button-font-color: var(--system-picker-button-font-color); - --spectrum-picker-button-font-color-hover: var( - --system-picker-button-font-color-hover - ); - --spectrum-picker-button-font-color-down: var( - --system-picker-button-font-color-down - ); - --spectrum-picker-button-font-color-key-focus: var( - --system-picker-button-font-color-key-focus - ); - --spectrum-picker-button-font-family: var( - --system-picker-button-font-family - ); - --spectrum-picker-button-font-style: var(--system-picker-button-font-style); - --spectrum-picker-button-font-weight: var( - --system-picker-button-font-weight - ); - --spectrum-picker-button-font-size: var(--system-picker-button-font-size); - --spectrum-picker-button-background-animation-duration: var( - --system-picker-button-background-animation-duration - ); - --spectrum-picker-button-background-color-disabled: var( - --system-picker-button-background-color-disabled - ); - --spectrum-picker-button-background-color-hover-disabled: var( - --system-picker-button-background-color-hover-disabled - ); - --spectrum-picker-button-background-color-down-disabled: var( - --system-picker-button-background-color-down-disabled - ); - --spectrum-picker-button-border-color-disabled: var( - --system-picker-button-border-color-disabled - ); - --spectrum-picker-button-font-color-disabled: var( - --system-picker-button-font-color-disabled - ); - --spectrum-picker-button-font-color-hover-disabled: var( - --system-picker-button-font-color-hover-disabled - ); - --spectrum-picker-button-font-color-down-disabled: var( - --system-picker-button-font-color-down-disabled - ); - --spectrum-picker-button-icon-color-disabled: var( - --system-picker-button-icon-color-disabled - ); - --spectrum-picker-button-icon-color-hover-disabled: var( - --system-picker-button-icon-color-hover-disabled - ); - --spectrum-picker-button-icon-color-down-disabled: var( - --system-picker-button-icon-color-down-disabled - ); + --spectrum-picker-button-background-color: var( + --system-picker-button-background-color + ); + --spectrum-picker-button-background-color-hover: var( + --system-picker-button-background-color-hover + ); + --spectrum-picker-button-background-color-down: var( + --system-picker-button-background-color-down + ); + --spectrum-picker-button-background-color-key-focus: var( + --system-picker-button-background-color-key-focus + ); + --spectrum-picker-button-border-color: var( + --system-picker-button-border-color + ); + --spectrum-picker-button-border-radius: var( + --system-picker-button-border-radius + ); + --spectrum-picker-button-border-radius-rounded-sided: var( + --system-picker-button-border-radius-rounded-sided + ); + --spectrum-picker-button-border-radius-sided: var( + --system-picker-button-border-radius-sided + ); + --spectrum-picker-button-border-width: var( + --system-picker-button-border-width + ); + --spectrum-picker-button-height: var(--system-picker-button-height); + --spectrum-picker-button-width: var(--system-picker-button-width); + --spectrum-picker-button-gap: var(--system-picker-button-gap); + --spectrum-picker-button-padding: var(--system-picker-button-padding); + --spectrum-picker-button-label-padding: var( + --system-picker-button-label-padding + ); + --spectrum-picker-button-fill-padding: var( + --system-picker-button-fill-padding + ); + --spectrum-picker-button-border-radius-rounded: var( + --system-picker-button-border-radius-rounded + ); + --spectrum-picker-button-icon-color: var(--system-picker-button-icon-color); + --spectrum-picker-button-icon-color-hover: var( + --system-picker-button-icon-color-hover + ); + --spectrum-picker-button-icon-color-down: var( + --system-picker-button-icon-color-down + ); + --spectrum-picker-button-icon-color-key-focus: var( + --system-picker-button-icon-color-key-focus + ); + --spectrum-picker-button-font-color: var(--system-picker-button-font-color); + --spectrum-picker-button-font-color-hover: var( + --system-picker-button-font-color-hover + ); + --spectrum-picker-button-font-color-down: var( + --system-picker-button-font-color-down + ); + --spectrum-picker-button-font-color-key-focus: var( + --system-picker-button-font-color-key-focus + ); + --spectrum-picker-button-font-family: var(--system-picker-button-font-family); + --spectrum-picker-button-font-style: var(--system-picker-button-font-style); + --spectrum-picker-button-font-weight: var(--system-picker-button-font-weight); + --spectrum-picker-button-font-size: var(--system-picker-button-font-size); + --spectrum-picker-button-background-animation-duration: var( + --system-picker-button-background-animation-duration + ); + --spectrum-picker-button-background-color-disabled: var( + --system-picker-button-background-color-disabled + ); + --spectrum-picker-button-background-color-hover-disabled: var( + --system-picker-button-background-color-hover-disabled + ); + --spectrum-picker-button-background-color-down-disabled: var( + --system-picker-button-background-color-down-disabled + ); + --spectrum-picker-button-border-color-disabled: var( + --system-picker-button-border-color-disabled + ); + --spectrum-picker-button-font-color-disabled: var( + --system-picker-button-font-color-disabled + ); + --spectrum-picker-button-font-color-hover-disabled: var( + --system-picker-button-font-color-hover-disabled + ); + --spectrum-picker-button-font-color-down-disabled: var( + --system-picker-button-font-color-down-disabled + ); + --spectrum-picker-button-icon-color-disabled: var( + --system-picker-button-icon-color-disabled + ); + --spectrum-picker-button-icon-color-hover-disabled: var( + --system-picker-button-icon-color-hover-disabled + ); + --spectrum-picker-button-icon-color-down-disabled: var( + --system-picker-button-icon-color-down-disabled + ); } -:host([size='s']) .root { - --spectrum-picker-button-height: var(--system-picker-button-size-s-height); - --spectrum-picker-button-width: var(--system-picker-button-size-s-width); - --spectrum-picker-button-label-padding: var( - --system-picker-button-size-s-label-padding - ); - --spectrum-picker-button-font-size: var( - --system-picker-button-size-s-font-size - ); - --spectrum-picker-button-fill-padding: var( - --system-picker-button-size-s-fill-padding - ); +:host([size="s"]) .root { + --spectrum-picker-button-height: var(--system-picker-button-size-s-height); + --spectrum-picker-button-width: var(--system-picker-button-size-s-width); + --spectrum-picker-button-label-padding: var( + --system-picker-button-size-s-label-padding + ); + --spectrum-picker-button-font-size: var( + --system-picker-button-size-s-font-size + ); + --spectrum-picker-button-fill-padding: var( + --system-picker-button-size-s-fill-padding + ); } -:host([size='l']) .root { - --spectrum-picker-button-height: var(--system-picker-button-size-l-height); - --spectrum-picker-button-width: var(--system-picker-button-size-l-width); - --spectrum-picker-button-label-padding: var( - --system-picker-button-size-l-label-padding - ); - --spectrum-picker-button-font-size: var( - --system-picker-button-size-l-font-size - ); - --spectrum-picker-button-fill-padding: var( - --system-picker-button-size-l-fill-padding - ); +:host([size="l"]) .root { + --spectrum-picker-button-height: var(--system-picker-button-size-l-height); + --spectrum-picker-button-width: var(--system-picker-button-size-l-width); + --spectrum-picker-button-label-padding: var( + --system-picker-button-size-l-label-padding + ); + --spectrum-picker-button-font-size: var( + --system-picker-button-size-l-font-size + ); + --spectrum-picker-button-fill-padding: var( + --system-picker-button-size-l-fill-padding + ); } -:host([size='xl']) .root { - --spectrum-picker-button-height: var(--system-picker-button-size-xl-height); - --spectrum-picker-button-width: var(--system-picker-button-size-xl-width); - --spectrum-picker-button-label-padding: var( - --system-picker-button-size-xl-label-padding - ); - --spectrum-picker-button-font-size: var( - --system-picker-button-size-xl-font-size - ); - --spectrum-picker-button-fill-padding: var( - --system-picker-button-size-xl-fill-padding - ); +:host([size="xl"]) .root { + --spectrum-picker-button-height: var(--system-picker-button-size-xl-height); + --spectrum-picker-button-width: var(--system-picker-button-size-xl-width); + --spectrum-picker-button-label-padding: var( + --system-picker-button-size-xl-label-padding + ); + --spectrum-picker-button-font-size: var( + --system-picker-button-size-xl-font-size + ); + --spectrum-picker-button-fill-padding: var( + --system-picker-button-size-xl-fill-padding + ); } diff --git a/packages/picker-button/src/spectrum-picker-button.css b/packages/picker-button/src/spectrum-picker-button.css index 4e5736eb06..37b41d4bcb 100644 --- a/packages/picker-button/src/spectrum-picker-button.css +++ b/packages/picker-button/src/spectrum-picker-button.css @@ -12,353 +12,350 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .root { - background-color: initial; - block-size: var( - --mod-picker-button-width, - var(--spectrum-picker-button-width) - ); - box-sizing: border-box; - padding: var( - --mod-picker-button-padding, - var(--spectrum-picker-button-padding) - ); - border-style: none; - justify-content: center; - align-items: center; - display: flex; + background-color: initial; + block-size: var( + --mod-picker-button-width, + var(--spectrum-picker-button-width) + ); + box-sizing: border-box; + padding: var( + --mod-picker-button-padding, + var(--spectrum-picker-button-padding) + ); + border-style: none; + justify-content: center; + align-items: center; + display: flex; } @media (hover: hover) { - .root:hover .spectrum-PickerButton-fill { - background-color: var( - --mod-picker-button-background-color-hover, - var(--spectrum-picker-button-background-color-hover) - ); - } + .root:hover .spectrum-PickerButton-fill { + background-color: var( + --mod-picker-button-background-color-hover, + var(--spectrum-picker-button-background-color-hover) + ); + } - .root:hover .spectrum-PickerButton-label { - color: var( - --mod-picker-button-font-color-hover, - var(--spectrum-picker-button-font-color-hover) - ); - } + .root:hover .spectrum-PickerButton-label { + color: var( + --mod-picker-button-font-color-hover, + var(--spectrum-picker-button-font-color-hover) + ); + } - .root:hover .spectrum-PickerButton-icon { - color: var( - --mod-picker-button-icon-color-hover, - var(--spectrum-picker-button-icon-color-hover) - ); - } + .root:hover .spectrum-PickerButton-icon { + color: var( + --mod-picker-button-icon-color-hover, + var(--spectrum-picker-button-icon-color-hover) + ); + } } :host([open]) .root .spectrum-PickerButton-fill, :host(:is(:active, [active])) .root .spectrum-PickerButton-fill { - background-color: var( - --mod-picker-button-background-color-down, - var(--spectrum-picker-button-background-color-down) - ); + background-color: var( + --mod-picker-button-background-color-down, + var(--spectrum-picker-button-background-color-down) + ); } :host([open]) .root .spectrum-PickerButton-label, :host(:is(:active, [active])) .root .spectrum-PickerButton-label { - color: var( - --mod-picker-button-font-color-down, - var(--spectrum-picker-button-font-color-down) - ); + color: var( + --mod-picker-button-font-color-down, + var(--spectrum-picker-button-font-color-down) + ); } :host([open]) .root .spectrum-PickerButton-icon, :host(:is(:active, [active])) .root .spectrum-PickerButton-icon { - color: var( - --mod-picker-button-icon-color-down, - var(--spectrum-picker-button-icon-color-down) - ); + color: var( + --mod-picker-button-icon-color-down, + var(--spectrum-picker-button-icon-color-down) + ); } :host([focused]) .root .spectrum-PickerButton-fill, .root.is-keyboardFocused .spectrum-PickerButton-fill, .root:focus .spectrum-PickerButton-fill, .root:focus-visible .spectrum-PickerButton-fill { - background-color: var( - --mod-picker-button-background-color-key-focus, - var(--spectrum-picker-button-background-color-key-focus) - ); + background-color: var( + --mod-picker-button-background-color-key-focus, + var(--spectrum-picker-button-background-color-key-focus) + ); } :host([focused]) .root .spectrum-PickerButton-label, .root.is-keyboardFocused .spectrum-PickerButton-label, .root:focus .spectrum-PickerButton-label, .root:focus-visible .spectrum-PickerButton-label { - color: var( - --mod-picker-button-font-color-key-focus, - var(--spectrum-picker-button-font-color-key-focus) - ); + color: var( + --mod-picker-button-font-color-key-focus, + var(--spectrum-picker-button-font-color-key-focus) + ); } :host([focused]) .root .spectrum-PickerButton-icon, .root.is-keyboardFocused .spectrum-PickerButton-icon, .root:focus .spectrum-PickerButton-icon, .root:focus-visible .spectrum-PickerButton-icon { - color: var( - --mod-picker-button-icon-color-key-focus, - var(--spectrum-picker-button-icon-color-key-focus) - ); + color: var( + --mod-picker-button-icon-color-key-focus, + var(--spectrum-picker-button-icon-color-key-focus) + ); } .root.is-disabled, :host([disabled]) .root { - --mod-picker-button-background-color: var( - --mod-picker-button-background-color-disabled, - var(--spectrum-picker-button-background-color-disabled) - ); - --mod-picker-button-background-color-hover: var( - --mod-picker-button-background-color-hover-disabled, - var(--spectrum-picker-button-background-color-hover-disabled) - ); - --mod-picker-button-background-color-down: var( - --mod-picker-button-background-color-down-disabled, - var(--spectrum-picker-button-background-color-down-disabled) - ); - --mod-picker-button-border-color: var( - --mod-picker-button-border-color-disabled, - var(--spectrum-picker-button-border-color-disabled) - ); - --mod-picker-button-font-color: var( - --mod-picker-button-font-color-disabled, - var(--spectrum-picker-button-font-color-disabled) - ); - --mod-picker-button-font-color-hover: var( - --mod-picker-button-font-color-hover-disabled, - var(--spectrum-picker-button-font-color-hover-disabled) - ); - --mod-picker-button-font-color-down: var( - --mod-picker-button-font-color-down-disabled, - var(--spectrum-picker-button-font-color-down-disabled) - ); - --mod-picker-button-icon-color: var( - --mod-picker-button-icon-color-disabled, - var(--spectrum-picker-button-icon-color-disabled) - ); - --mod-picker-button-icon-color-hover: var( - --mod-picker-button-icon-color-hover-disabled, - var(--spectrum-picker-button-icon-color-hover-disabled) - ); - --mod-picker-button-icon-color-down: var( - --mod-picker-button-icon-color-down-disabled, - var(--spectrum-picker-button-icon-color-down-disabled) - ); + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-disabled, + var(--spectrum-picker-button-background-color-disabled) + ); + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-disabled, + var(--spectrum-picker-button-background-color-hover-disabled) + ); + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-disabled, + var(--spectrum-picker-button-background-color-down-disabled) + ); + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-disabled, + var(--spectrum-picker-button-border-color-disabled) + ); + --mod-picker-button-font-color: var( + --mod-picker-button-font-color-disabled, + var(--spectrum-picker-button-font-color-disabled) + ); + --mod-picker-button-font-color-hover: var( + --mod-picker-button-font-color-hover-disabled, + var(--spectrum-picker-button-font-color-hover-disabled) + ); + --mod-picker-button-font-color-down: var( + --mod-picker-button-font-color-down-disabled, + var(--spectrum-picker-button-font-color-down-disabled) + ); + --mod-picker-button-icon-color: var( + --mod-picker-button-icon-color-disabled, + var(--spectrum-picker-button-icon-color-disabled) + ); + --mod-picker-button-icon-color-hover: var( + --mod-picker-button-icon-color-hover-disabled, + var(--spectrum-picker-button-icon-color-hover-disabled) + ); + --mod-picker-button-icon-color-down: var( + --mod-picker-button-icon-color-down-disabled, + var(--spectrum-picker-button-icon-color-down-disabled) + ); } :host([quiet]) .root { - --mod-picker-button-background-color: var( - --mod-picker-button-background-color-quiet, - transparent - ); - --mod-picker-button-background-color-hover: var( - --mod-picker-button-background-color-hover-quiet, - transparent - ); - --mod-picker-button-background-color-down: var( - --mod-picker-button-background-color-down-quiet, - transparent - ); - --mod-picker-button-background-color-key-focus: var( - --mod-picker-button-background-color-key-focus-quiet, - transparent - ); - --mod-picker-button-border-color: var( - --mod-picker-button-border-color-quiet, - transparent - ); + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-quiet, + transparent + ); + --mod-picker-button-background-color-hover: var( + --mod-picker-button-background-color-hover-quiet, + transparent + ); + --mod-picker-button-background-color-down: var( + --mod-picker-button-background-color-down-quiet, + transparent + ); + --mod-picker-button-background-color-key-focus: var( + --mod-picker-button-background-color-key-focus-quiet, + transparent + ); + --mod-picker-button-border-color: var( + --mod-picker-button-border-color-quiet, + transparent + ); } :host([quiet]) .root.is-disabled, :host([quiet][disabled]) .root { - --mod-picker-button-background-color: var( - --mod-picker-button-background-color-quiet, - transparent - ); + --mod-picker-button-background-color: var( + --mod-picker-button-background-color-quiet, + transparent + ); } -:host([position='right']) .spectrum-PickerButton-fill { - border-start-start-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) - ); - border-end-start-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) - ); +:host([position="right"]) .spectrum-PickerButton-fill { + border-start-start-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); + border-end-start-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); } -:host([position='right'][rounded]) .spectrum-PickerButton-fill { - border-start-start-radius: var( - --mod-picker-button-border-radius-rounded-sided, - var(--spectrum-picker-button-border-radius-rounded-sided) - ); - border-end-start-radius: var( - --mod-picker-button-border-radius-rounded-sided, - var(--spectrum-picker-button-border-radius-rounded-sided) - ); +:host([position="right"][rounded]) .spectrum-PickerButton-fill { + border-start-start-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); + border-end-start-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); } -:host([position='left']) .spectrum-PickerButton-fill { - border-start-end-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) - ); - border-end-end-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) - ); +:host([position="left"]) .spectrum-PickerButton-fill { + border-start-end-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); + border-end-end-radius: var( + --mod-picker-button-border-radius-sided, + var(--spectrum-picker-button-border-radius-sided) + ); } -:host([position='left'][rounded]) .spectrum-PickerButton-fill { - border-start-end-radius: var( - --mod-picker-button-border-radius-rounded-sided, - var(--spectrum-picker-button-border-radius-rounded-sided) - ); - border-end-end-radius: var( - --mod-picker-button-border-radius-rounded-sided, - var(--spectrum-picker-button-border-radius-rounded-sided) - ); +:host([position="left"][rounded]) .spectrum-PickerButton-fill { + border-start-end-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); + border-end-end-radius: var( + --mod-picker-button-border-radius-rounded-sided, + var(--spectrum-picker-button-border-radius-rounded-sided) + ); } .spectrum-PickerButton-label { - color: var( - --mod-picker-button-font-color, - var(--spectrum-picker-button-font-color) - ); - white-space: nowrap; - font-family: var( - --mod-picker-button-font-family, - var(--spectrum-picker-button-font-family) - ); - font-style: var( - --mod-picker-button-font-style, - var(--spectrum-picker-button-font-style) - ); - font-weight: var( - --mod-picker-button-font-weight, - var(--spectrum-picker-button-font-weight) - ); - font-size: var( - --mod-picker-button-font-size, - var(--spectrum-picker-button-font-size) - ); - flex: auto; - padding-block-start: var( - --mod-picker-button-label-padding, - var(--spectrum-picker-button-label-padding) - ); - padding-block-end: var( - --mod-picker-button-label-padding, - var(--spectrum-picker-button-label-padding) - ); - overflow: hidden; + color: var( + --mod-picker-button-font-color, + var(--spectrum-picker-button-font-color) + ); + white-space: nowrap; + font-family: var( + --mod-picker-button-font-family, + var(--spectrum-picker-button-font-family) + ); + font-style: var( + --mod-picker-button-font-style, + var(--spectrum-picker-button-font-style) + ); + font-weight: var( + --mod-picker-button-font-weight, + var(--spectrum-picker-button-font-weight) + ); + font-size: var( + --mod-picker-button-font-size, + var(--spectrum-picker-button-font-size) + ); + flex: auto; + padding-block-start: var( + --mod-picker-button-label-padding, + var(--spectrum-picker-button-label-padding) + ); + padding-block-end: var( + --mod-picker-button-label-padding, + var(--spectrum-picker-button-label-padding) + ); + overflow: hidden; } .spectrum-PickerButton-fill { - box-sizing: border-box; - block-size: 100%; - inline-size: 100%; - justify-content: center; - align-items: center; - gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); - background-color: var( - --mod-picker-button-background-color, - var(--spectrum-picker-button-background-color) - ); - border-color: var( - --mod-picker-button-border-color, - var(--spectrum-picker-button-border-color) - ); - border-width: var( - --mod-picker-button-border-width, - var(--spectrum-picker-button-border-width) - ); - padding: calc( - var( - --mod-picker-button-fill-padding, - var(--spectrum-picker-button-fill-padding) - ) - - var( - --mod-picker-button-padding, - var(--spectrum-picker-button-padding) - ) - - var( - --mod-picker-button-border-width, - var(--spectrum-picker-button-border-width) - ) - ); - transition: border-color - var( - --mod-picker-button-background-animation-duration, - var(--spectrum-picker-button-background-animation-duration) - ) - ease-in-out; - border-style: solid; - border-start-start-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - border-start-end-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - border-end-end-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - border-end-start-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - display: flex; + box-sizing: border-box; + block-size: 100%; + inline-size: 100%; + justify-content: center; + align-items: center; + gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); + background-color: var( + --mod-picker-button-background-color, + var(--spectrum-picker-button-background-color) + ); + border-color: var( + --mod-picker-button-border-color, + var(--spectrum-picker-button-border-color) + ); + border-width: var( + --mod-picker-button-border-width, + var(--spectrum-picker-button-border-width) + ); + padding: calc( + var( + --mod-picker-button-fill-padding, + var(--spectrum-picker-button-fill-padding) + ) - + var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - + var( + --mod-picker-button-border-width, + var(--spectrum-picker-button-border-width) + ) + ); + transition: border-color + var( + --mod-picker-button-background-animation-duration, + var(--spectrum-picker-button-background-animation-duration) + ) + ease-in-out; + border-style: solid; + border-start-start-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + border-end-end-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + border-end-start-radius: var( + --mod-picker-button-border-radius, + var(--spectrum-picker-button-border-radius) + ); + display: flex; } .spectrum-PickerButton-icon { - color: var( - --mod-picker-button-icon-color, - var(--spectrum-picker-button-icon-color) - ); - flex-shrink: 0; + color: var( + --mod-picker-button-icon-color, + var(--spectrum-picker-button-icon-color) + ); + flex-shrink: 0; } :host([rounded]) .spectrum-PickerButton-fill { - border-start-start-radius: var( - --mod-picker-button-border-radius-rounded, - var(--spectrum-picker-button-border-radius-rounded) - ); - border-start-end-radius: var( - --mod-picker-button-border-radius-rounded, - var(--spectrum-picker-button-border-radius-rounded) - ); - border-end-end-radius: var( - --mod-picker-button-border-radius-rounded, - var(--spectrum-picker-button-border-radius-rounded) - ); - border-end-start-radius: var( - --mod-picker-button-border-radius-rounded, - var(--spectrum-picker-button-border-radius-rounded) - ); + border-start-start-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + border-start-end-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + border-end-end-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); + border-end-start-radius: var( + --mod-picker-button-border-radius-rounded, + var(--spectrum-picker-button-border-radius-rounded) + ); } .uiicononly { - inline-size: var( - --mod-picker-button-height, - var(--spectrum-picker-button-height) - ); + inline-size: var( + --mod-picker-button-height, + var(--spectrum-picker-button-height) + ); } .uiicononly .spectrum-PickerButton-label { - display: none; + display: none; } .uiicononly .spectrum-PickerButton-fill { - padding: 0; + padding: 0; } .textuiicon .spectrum-PickerButton-fill { - inline-size: auto; + inline-size: auto; } diff --git a/packages/picker/src/picker-overrides.css b/packages/picker/src/picker-overrides.css index 670397798a..18979100b4 100644 --- a/packages/picker/src/picker-overrides.css +++ b/packages/picker/src/picker-overrides.css @@ -12,274 +12,266 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-picker-background-color-default: var( - --system-picker-background-color-default - ); - --spectrum-picker-background-color-default-open: var( - --system-picker-background-color-default-open - ); - --spectrum-picker-background-color-active: var( - --system-picker-background-color-active - ); - --spectrum-picker-background-color-hover: var( - --system-picker-background-color-hover - ); - --spectrum-picker-background-color-hover-open: var( - --system-picker-background-color-hover-open - ); - --spectrum-picker-background-color-key-focus: var( - --system-picker-background-color-key-focus - ); - --spectrum-picker-border-color-default: var( - --system-picker-border-color-default - ); - --spectrum-picker-border-color-default-open: var( - --system-picker-border-color-default-open - ); - --spectrum-picker-border-color-hover: var( - --system-picker-border-color-hover - ); - --spectrum-picker-border-color-hover-open: var( - --system-picker-border-color-hover-open - ); - --spectrum-picker-border-color-active: var( - --system-picker-border-color-active - ); - --spectrum-picker-border-color-key-focus: var( - --system-picker-border-color-key-focus - ); - --spectrum-picker-border-width: var(--system-picker-border-width); - --spectrum-picker-font-size: var(--system-picker-font-size); - --spectrum-picker-font-weight: var(--system-picker-font-weight); - --spectrum-picker-placeholder-font-style: var( - --system-picker-placeholder-font-style - ); - --spectrum-picker-line-height: var(--system-picker-line-height); - --spectrum-picker-block-size: var(--system-picker-block-size); - --spectrum-picker-inline-size: var(--system-picker-inline-size); - --spectrum-picker-border-radius: var(--system-picker-border-radius); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-spacing-edge-to-text - ); - --spectrum-picker-spacing-edge-to-text-quiet: var( - --system-picker-spacing-edge-to-text-quiet - ); - --spectrum-picker-spacing-label-to-picker: var( - --system-picker-spacing-label-to - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-spacing-edge-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var( - --system-picker-spacing-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-animation-duration: var( - --system-picker-animation-duration - ); - --spectrum-picker-font-color-default: var( - --system-picker-font-color-default - ); - --spectrum-picker-font-color-default-open: var( - --system-picker-font-color-default-open - ); - --spectrum-picker-font-color-hover: var(--system-picker-font-color-hover); - --spectrum-picker-font-color-hover-open: var( - --system-picker-font-color-hover-open - ); - --spectrum-picker-font-color-active: var(--system-picker-font-color-active); - --spectrum-picker-font-color-key-focus: var( - --system-picker-font-color-key-focus - ); - --spectrum-picker-icon-color-default: var( - --system-picker-icon-color-default - ); - --spectrum-picker-icon-color-default-open: var( - --system-picker-icon-color-default-open - ); - --spectrum-picker-icon-color-hover: var(--system-picker-icon-color-hover); - --spectrum-picker-icon-color-hover-open: var( - --system-picker-icon-color-hover-open - ); - --spectrum-picker-icon-color-active: var(--system-picker-icon-color-active); - --spectrum-picker-icon-color-key-focus: var( - --system-picker-icon-color-key-focus - ); - --spectrum-picker-border-color-error-default: var( - --system-picker-border-color-error-default - ); - --spectrum-picker-border-color-error-default-open: var( - --system-picker-border-color-error-default-open - ); - --spectrum-picker-border-color-error-hover: var( - --system-picker-border-color-error-hover - ); - --spectrum-picker-border-color-error-hover-open: var( - --system-picker-border-color-error-hover-open - ); - --spectrum-picker-border-color-error-active: var( - --system-picker-border-color-error-active - ); - --spectrum-picker-border-color-error-key-focus: var( - --system-picker-border-color-error-key-focus - ); - --spectrum-picker-icon-color-error: var(--system-picker-icon-color-error); - --spectrum-picker-background-color-disabled: var( - --system-picker-background-color-disabled - ); - --spectrum-picker-font-color-disabled: var( - --system-picker-font-color-disabled - ); - --spectrum-picker-icon-color-disabled: var( - --system-picker-icon-color-disabled - ); - --spectrum-picker-focus-indicator-gap: var( - --system-picker-focus-indicator-gap - ); - --spectrum-picker-focus-indicator-thickness: var( - --system-picker-focus-indicator-thickness - ); - --spectrum-picker-focus-indicator-color: var( - --system-picker-focus-indicator-color - ); + --spectrum-picker-background-color-default: var( + --system-picker-background-color-default + ); + --spectrum-picker-background-color-default-open: var( + --system-picker-background-color-default-open + ); + --spectrum-picker-background-color-active: var( + --system-picker-background-color-active + ); + --spectrum-picker-background-color-hover: var( + --system-picker-background-color-hover + ); + --spectrum-picker-background-color-hover-open: var( + --system-picker-background-color-hover-open + ); + --spectrum-picker-background-color-key-focus: var( + --system-picker-background-color-key-focus + ); + --spectrum-picker-border-color-default: var( + --system-picker-border-color-default + ); + --spectrum-picker-border-color-default-open: var( + --system-picker-border-color-default-open + ); + --spectrum-picker-border-color-hover: var(--system-picker-border-color-hover); + --spectrum-picker-border-color-hover-open: var( + --system-picker-border-color-hover-open + ); + --spectrum-picker-border-color-active: var( + --system-picker-border-color-active + ); + --spectrum-picker-border-color-key-focus: var( + --system-picker-border-color-key-focus + ); + --spectrum-picker-border-width: var(--system-picker-border-width); + --spectrum-picker-font-size: var(--system-picker-font-size); + --spectrum-picker-font-weight: var(--system-picker-font-weight); + --spectrum-picker-placeholder-font-style: var( + --system-picker-placeholder-font-style + ); + --spectrum-picker-line-height: var(--system-picker-line-height); + --spectrum-picker-block-size: var(--system-picker-block-size); + --spectrum-picker-inline-size: var(--system-picker-inline-size); + --spectrum-picker-border-radius: var(--system-picker-border-radius); + --spectrum-picker-spacing-top-to-text: var( + --system-picker-spacing-top-to-text + ); + --spectrum-picker-spacing-bottom-to-text: var( + --system-picker-spacing-bottom-to-text + ); + --spectrum-picker-spacing-edge-to-text: var( + --system-picker-spacing-edge-to-text + ); + --spectrum-picker-spacing-edge-to-text-quiet: var( + --system-picker-spacing-edge-to-text-quiet + ); + --spectrum-picker-spacing-label-to-picker: var( + --system-picker-spacing-label-to + ); + --spectrum-picker-spacing-text-to-icon: var( + --system-picker-spacing-text-to-icon + ); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --system-picker-spacing-text-to-icon-inline-end + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --system-picker-spacing-icon-to-disclosure-icon + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --system-picker-spacing-label-to-quiet + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --system-picker-spacing-top-to-alert-icon + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --system-picker-spacing-top-to-progress-circle + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --system-picker-spacing-top-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --system-picker-spacing-edge-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var( + --system-picker-spacing-edge-to-disclosure-icon-quiet + ); + --spectrum-picker-animation-duration: var(--system-picker-animation-duration); + --spectrum-picker-font-color-default: var(--system-picker-font-color-default); + --spectrum-picker-font-color-default-open: var( + --system-picker-font-color-default-open + ); + --spectrum-picker-font-color-hover: var(--system-picker-font-color-hover); + --spectrum-picker-font-color-hover-open: var( + --system-picker-font-color-hover-open + ); + --spectrum-picker-font-color-active: var(--system-picker-font-color-active); + --spectrum-picker-font-color-key-focus: var( + --system-picker-font-color-key-focus + ); + --spectrum-picker-icon-color-default: var(--system-picker-icon-color-default); + --spectrum-picker-icon-color-default-open: var( + --system-picker-icon-color-default-open + ); + --spectrum-picker-icon-color-hover: var(--system-picker-icon-color-hover); + --spectrum-picker-icon-color-hover-open: var( + --system-picker-icon-color-hover-open + ); + --spectrum-picker-icon-color-active: var(--system-picker-icon-color-active); + --spectrum-picker-icon-color-key-focus: var( + --system-picker-icon-color-key-focus + ); + --spectrum-picker-border-color-error-default: var( + --system-picker-border-color-error-default + ); + --spectrum-picker-border-color-error-default-open: var( + --system-picker-border-color-error-default-open + ); + --spectrum-picker-border-color-error-hover: var( + --system-picker-border-color-error-hover + ); + --spectrum-picker-border-color-error-hover-open: var( + --system-picker-border-color-error-hover-open + ); + --spectrum-picker-border-color-error-active: var( + --system-picker-border-color-error-active + ); + --spectrum-picker-border-color-error-key-focus: var( + --system-picker-border-color-error-key-focus + ); + --spectrum-picker-icon-color-error: var(--system-picker-icon-color-error); + --spectrum-picker-background-color-disabled: var( + --system-picker-background-color-disabled + ); + --spectrum-picker-font-color-disabled: var( + --system-picker-font-color-disabled + ); + --spectrum-picker-icon-color-disabled: var( + --system-picker-icon-color-disabled + ); + --spectrum-picker-focus-indicator-gap: var( + --system-picker-focus-indicator-gap + ); + --spectrum-picker-focus-indicator-thickness: var( + --system-picker-focus-indicator-thickness + ); + --spectrum-picker-focus-indicator-color: var( + --system-picker-focus-indicator-color + ); } -:host([size='s']) { - --spectrum-picker-font-size: var(--system-picker-size-s-font-size); - --spectrum-picker-block-size: var(--system-picker-size-s-block-size); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-size-s-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-size-s-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-size-s-spacing-edge-to-text - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-size-s-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-size-s-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-size-s-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-size-s-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-size-s-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-size-s-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-size-s-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-size-s-spacing-edge-to-disclosure-icon - ); +:host([size="s"]) { + --spectrum-picker-font-size: var(--system-picker-size-s-font-size); + --spectrum-picker-block-size: var(--system-picker-size-s-block-size); + --spectrum-picker-spacing-top-to-text: var( + --system-picker-size-s-spacing-top-to-text + ); + --spectrum-picker-spacing-bottom-to-text: var( + --system-picker-size-s-spacing-bottom-to-text + ); + --spectrum-picker-spacing-edge-to-text: var( + --system-picker-size-s-spacing-edge-to-text + ); + --spectrum-picker-spacing-text-to-icon: var( + --system-picker-size-s-spacing-text-to-icon + ); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --system-picker-size-s-spacing-text-to-icon-inline-end + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --system-picker-size-s-spacing-icon-to-disclosure-icon + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --system-picker-size-s-spacing-label-to-quiet + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --system-picker-size-s-spacing-top-to-alert-icon + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --system-picker-size-s-spacing-top-to-progress-circle + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --system-picker-size-s-spacing-top-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --system-picker-size-s-spacing-edge-to-disclosure-icon + ); } -:host([size='l']) { - --spectrum-picker-font-size: var(--system-picker-size-l-font-size); - --spectrum-picker-block-size: var(--system-picker-size-l-block-size); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-size-l-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-size-l-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-size-l-spacing-edge-to-text - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-size-l-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-size-l-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-size-l-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-size-l-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-size-l-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-size-l-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-size-l-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-size-l-spacing-edge-to-disclosure-icon - ); +:host([size="l"]) { + --spectrum-picker-font-size: var(--system-picker-size-l-font-size); + --spectrum-picker-block-size: var(--system-picker-size-l-block-size); + --spectrum-picker-spacing-top-to-text: var( + --system-picker-size-l-spacing-top-to-text + ); + --spectrum-picker-spacing-bottom-to-text: var( + --system-picker-size-l-spacing-bottom-to-text + ); + --spectrum-picker-spacing-edge-to-text: var( + --system-picker-size-l-spacing-edge-to-text + ); + --spectrum-picker-spacing-text-to-icon: var( + --system-picker-size-l-spacing-text-to-icon + ); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --system-picker-size-l-spacing-text-to-icon-inline-end + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --system-picker-size-l-spacing-icon-to-disclosure-icon + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --system-picker-size-l-spacing-label-to-quiet + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --system-picker-size-l-spacing-top-to-alert-icon + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --system-picker-size-l-spacing-top-to-progress-circle + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --system-picker-size-l-spacing-top-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --system-picker-size-l-spacing-edge-to-disclosure-icon + ); } -:host([size='xl']) { - --spectrum-picker-font-size: var(--system-picker-size-xl-font-size); - --spectrum-picker-block-size: var(--system-picker-size-xl-block-size); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-size-xl-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-size-xl-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-size-xl-spacing-edge-to-text - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-size-xl-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-size-xl-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-size-xl-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-size-xl-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-size-xl-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-size-xl-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-size-xl-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-size-xl-spacing-edge-to-disclosure-icon - ); +:host([size="xl"]) { + --spectrum-picker-font-size: var(--system-picker-size-xl-font-size); + --spectrum-picker-block-size: var(--system-picker-size-xl-block-size); + --spectrum-picker-spacing-top-to-text: var( + --system-picker-size-xl-spacing-top-to-text + ); + --spectrum-picker-spacing-bottom-to-text: var( + --system-picker-size-xl-spacing-bottom-to-text + ); + --spectrum-picker-spacing-edge-to-text: var( + --system-picker-size-xl-spacing-edge-to-text + ); + --spectrum-picker-spacing-text-to-icon: var( + --system-picker-size-xl-spacing-text-to-icon + ); + --spectrum-picker-spacing-text-to-icon-inline-end: var( + --system-picker-size-xl-spacing-text-to-icon-inline-end + ); + --spectrum-picker-spacing-icon-to-disclosure-icon: var( + --system-picker-size-xl-spacing-icon-to-disclosure-icon + ); + --spectrum-picker-spacing-label-to-picker-quiet: var( + --system-picker-size-xl-spacing-label-to-quiet + ); + --spectrum-picker-spacing-top-to-alert-icon: var( + --system-picker-size-xl-spacing-top-to-alert-icon + ); + --spectrum-picker-spacing-top-to-progress-circle: var( + --system-picker-size-xl-spacing-top-to-progress-circle + ); + --spectrum-picker-spacing-top-to-disclosure-icon: var( + --system-picker-size-xl-spacing-top-to-disclosure-icon + ); + --spectrum-picker-spacing-edge-to-disclosure-icon: var( + --system-picker-size-xl-spacing-edge-to-disclosure-icon + ); } diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css index 278f7253f2..4a234f8e28 100644 --- a/packages/picker/src/spectrum-picker.css +++ b/packages/picker/src/spectrum-picker.css @@ -12,821 +12,804 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #button { - cursor: pointer; - -webkit-user-select: none; - user-select: none; - font-family: var( - --mod-button-font-family, - var( - --mod-sans-font-family-stack, - var(--spectrum-sans-font-family-stack) - ) - ); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - line-height: var( - --mod-button-line-height, - var(--mod-line-height-100, var(--spectrum-line-height-100)) - ); - text-transform: none; - vertical-align: top; - -webkit-appearance: button; - transition: - background - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - border-color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - box-shadow - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out; - justify-content: center; - align-items: center; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - position: relative; - overflow: visible; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + font-family: var( + --mod-button-font-family, + var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)) + ); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: var( + --mod-button-line-height, + var(--mod-line-height-100, var(--spectrum-line-height-100)) + ); + text-transform: none; + vertical-align: top; + -webkit-appearance: button; + transition: + background + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + border-color + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + color + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out, + box-shadow + var( + --mod-button-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ) + ease-out; + justify-content: center; + align-items: center; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + position: relative; + overflow: visible; } #button::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } #button:focus { - outline: none; + outline: none; } @media (forced-colors: active) { - :host { - --highcontrast-picker-focus-indicator-color: Highlight; - --highcontrast-picker-border-color-default: ButtonBorder; - --highcontrast-picker-border-color-hover: Highlight; - --highcontrast-picker-border-color-disabled: GrayText; - --highcontrast-picker-content-color-default: ButtonText; - --highcontrast-picker-content-color-disabled: GrayText; - --highcontrast-picker-background-color: ButtonFace; - } - - #button.is-keyboardFocused, - #button:focus-visible { - --highcontrast-picker-border-color-hover: ButtonText; - } - - #button .label, - #button:after { - forced-color-adjust: none; - } + :host { + --highcontrast-picker-focus-indicator-color: Highlight; + --highcontrast-picker-border-color-default: ButtonBorder; + --highcontrast-picker-border-color-hover: Highlight; + --highcontrast-picker-border-color-disabled: GrayText; + --highcontrast-picker-content-color-default: ButtonText; + --highcontrast-picker-content-color-disabled: GrayText; + --highcontrast-picker-background-color: ButtonFace; + } + + #button.is-keyboardFocused, + #button:focus-visible { + --highcontrast-picker-border-color-hover: ButtonText; + } + + #button .label, + #button:after { + forced-color-adjust: none; + } } #button { - box-sizing: border-box; - max-inline-size: 100%; - min-inline-size: calc( - var(--spectrum-picker-minimum-width-multiplier) * - var(--mod-picker-block-size, var(--spectrum-picker-block-size)) - ); - inline-size: var( - --mod-picker-inline-size, - var(--spectrum-picker-inline-size) - ); - block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); - border-width: var( - --mod-picker-border-width, - var(--spectrum-picker-border-width) - ); - border-radius: var( - --mod-picker-border-radius, - var(--spectrum-picker-border-radius) - ); - transition: - background-color - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ), - box-shadow - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ), - border-color - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ) - ease-in-out; - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-default, - var(--spectrum-picker-font-color-default) - ) - ); - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-default, - var(--spectrum-picker-background-color-default) - ) - ); - border-style: solid; - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-default, - var(--spectrum-picker-border-color-default) - ) - ); - margin-block-start: var( - --mod-picker-spacing-label-to-picker, - var(--spectrum-picker-spacing-label-to-picker) - ); - padding-block: 0; - padding-inline-start: var( - --mod-picker-spacing-edge-to-text, - var(--spectrum-picker-spacing-edge-to-text) - ); - padding-inline-end: var( - --mod-picker-spacing-edge-to-disclosure-icon, - var(--spectrum-picker-spacing-edge-to-disclosure-icon) - ); - display: flex; + box-sizing: border-box; + max-inline-size: 100%; + min-inline-size: calc( + var(--spectrum-picker-minimum-width-multiplier) * + var(--mod-picker-block-size, var(--spectrum-picker-block-size)) + ); + inline-size: var( + --mod-picker-inline-size, + var(--spectrum-picker-inline-size) + ); + block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); + border-width: var( + --mod-picker-border-width, + var(--spectrum-picker-border-width) + ); + border-radius: var( + --mod-picker-border-radius, + var(--spectrum-picker-border-radius) + ); + transition: + background-color + var( + --mod-picker-animation-duration, + var(--spectrum-picker-animation-duration) + ), + box-shadow + var( + --mod-picker-animation-duration, + var(--spectrum-picker-animation-duration) + ), + border-color + var( + --mod-picker-animation-duration, + var(--spectrum-picker-animation-duration) + ) + ease-in-out; + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-default, + var(--spectrum-picker-font-color-default) + ) + ); + background-color: var( + --highcontrast-picker-background-color, + var( + --mod-picker-background-color-default, + var(--spectrum-picker-background-color-default) + ) + ); + border-style: solid; + border-color: var( + --highcontrast-picker-border-color-default, + var( + --mod-picker-border-color-default, + var(--spectrum-picker-border-color-default) + ) + ); + margin-block-start: var( + --mod-picker-spacing-label-to-picker, + var(--spectrum-picker-spacing-label-to-picker) + ); + padding-block: 0; + padding-inline-start: var( + --mod-picker-spacing-edge-to-text, + var(--spectrum-picker-spacing-edge-to-text) + ); + padding-inline-end: var( + --mod-picker-spacing-edge-to-disclosure-icon, + var(--spectrum-picker-spacing-edge-to-disclosure-icon) + ); + display: flex; } #button:after { - pointer-events: none; - content: ''; - block-size: calc( - 100% + - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) * 2 + - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * - 2 - ); - inline-size: calc( - 100% + - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) * 2 + - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * - 2 - ); - border-style: solid; - border-width: var( - --mod-picker-focus-indicator-thickness, - var(--spectrum-picker-focus-indicator-thickness) - ); - border-radius: calc( - var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) + - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - border-color: #0000; - margin-block-start: calc( - ( - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) + - var( - --mod-picker-focus-indicator-thickness, - var(--spectrum-picker-focus-indicator-thickness) - ) + - var( - --mod-picker-border-width, - var(--spectrum-picker-border-width) - ) - ) * -1 - ); - margin-inline-start: calc( - ( - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) + - var( - --mod-picker-focus-indicator-thickness, - var(--spectrum-picker-focus-indicator-thickness) - ) + - var( - --mod-picker-border-width, - var(--spectrum-picker-border-width) - ) - ) * -1 - ); - position: absolute; - inset-block: 0; - inset-inline: 0; + pointer-events: none; + content: ""; + block-size: calc( + 100% + + var( + --mod-picker-focus-indicator-gap, + var(--spectrum-picker-focus-indicator-gap) + ) * + 2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * + 2 + ); + inline-size: calc( + 100% + + var( + --mod-picker-focus-indicator-gap, + var(--spectrum-picker-focus-indicator-gap) + ) * + 2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * + 2 + ); + border-style: solid; + border-width: var( + --mod-picker-focus-indicator-thickness, + var(--spectrum-picker-focus-indicator-thickness) + ); + border-radius: calc( + var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + + var( + --mod-picker-focus-indicator-gap, + var(--spectrum-picker-focus-indicator-gap) + ) + + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) + ); + border-color: #0000; + margin-block-start: calc( + ( + var( + --mod-picker-focus-indicator-gap, + var(--spectrum-picker-focus-indicator-gap) + ) + + var( + --mod-picker-focus-indicator-thickness, + var(--spectrum-picker-focus-indicator-thickness) + ) + + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) + ) * + -1 + ); + margin-inline-start: calc( + ( + var( + --mod-picker-focus-indicator-gap, + var(--spectrum-picker-focus-indicator-gap) + ) + + var( + --mod-picker-focus-indicator-thickness, + var(--spectrum-picker-focus-indicator-thickness) + ) + + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) + ) * + -1 + ); + position: absolute; + inset-block: 0; + inset-inline: 0; } #button:active { - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-active, - var(--spectrum-picker-background-color-active) - ) - ); - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-active, - var(--spectrum-picker-border-color-active) - ) - ); + background-color: var( + --highcontrast-picker-background-color, + var( + --mod-picker-background-color-active, + var(--spectrum-picker-background-color-active) + ) + ); + border-color: var( + --highcontrast-picker-border-color-default, + var(--mod-picker-border-active, var(--spectrum-picker-border-color-active)) + ); } #button:active:after { - border-color: #0000; + border-color: #0000; } #button.placeholder:active .label { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-active, - var(--spectrum-picker-font-color-active) - ) - ); + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-active, + var(--spectrum-picker-font-color-active) + ) + ); } #button.is-keyboardFocused, #button:focus-visible { - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-key-focus, - var(--spectrum-picker-background-color-key-focus) - ) - ); - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-key-focus, - var(--spectrum-picker-border-color-key-focus) - ) - ); - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-key-focus, - var(--spectrum-picker-font-color-key-focus) - ) - ); - outline: none; + background-color: var( + --highcontrast-picker-background-color, + var( + --mod-picker-background-color-key-focus, + var(--spectrum-picker-background-color-key-focus) + ) + ); + border-color: var( + --highcontrast-picker-border-color-default, + var( + --mod-picker-border-color-key-focus, + var(--spectrum-picker-border-color-key-focus) + ) + ); + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-key-focus, + var(--spectrum-picker-font-color-key-focus) + ) + ); + outline: none; } #button.is-keyboardFocused:after, #button:focus-visible:after { - border-color: var( - --highcontrast-picker-focus-indicator-color, - var( - --mod-picker-focus-indicator-color, - var(--spectrum-picker-focus-indicator-color) - ) - ); + border-color: var( + --highcontrast-picker-focus-indicator-color, + var( + --mod-picker-focus-indicator-color, + var(--spectrum-picker-focus-indicator-color) + ) + ); } #button.is-keyboardFocused.placeholder, #button.placeholder:focus-visible { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-key-focus, - var(--spectrum-picker-font-color-key-focus) - ) - ); + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-key-focus, + var(--spectrum-picker-font-color-key-focus) + ) + ); } #button.is-keyboardFocused .picker, #button:focus-visible .picker { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-key-focus, - var(--spectrum-picker-icon-color-key-focus) - ) - ); + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-icon-color-key-focus, + var(--spectrum-picker-icon-color-key-focus) + ) + ); } :host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-default-open, - var(--spectrum-picker-font-color-default-open) - ) - ); - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-default-open, - var(--spectrum-picker-background-color-default-open) - ) - ); - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-default-open, - var(--spectrum-picker-border-color-default-open) - ) - ); + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-default-open, + var(--spectrum-picker-font-color-default-open) + ) + ); + background-color: var( + --highcontrast-picker-background-color, + var( + --mod-picker-background-color-default-open, + var(--spectrum-picker-background-color-default-open) + ) + ); + border-color: var( + --highcontrast-picker-border-color-default, + var( + --mod-picker-border-default-open, + var(--spectrum-picker-border-color-default-open) + ) + ); } :host([open]) - #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) - .picker { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-default-open, - var(--spectrum-picker-icon-color-default-open) - ) - ); + #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) + .picker { + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-icon-color-default-open, + var(--spectrum-picker-icon-color-default-open) + ) + ); } :host([invalid]) #button:not(:disabled, .is-disabled) { - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-error-default, - var(--spectrum-picker-border-color-error-default) - ) - ); + border-color: var( + --highcontrast-picker-border-color-default, + var( + --mod-picker-border-color-error-default, + var(--spectrum-picker-border-color-error-default) + ) + ); } :host([invalid]) #button:not(:disabled, .is-disabled) .validation-icon { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-error, - var(--spectrum-picker-icon-color-error) - ) - ); + color: var( + --highcontrast-picker-content-color-default, + var(--mod-picker-icon-color-error, var(--spectrum-picker-icon-color-error)) + ); } :host([invalid]) #button:not(:disabled, .is-disabled):active { - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-error-active, - var(--spectrum-picker-border-color-error-active) - ) - ); + border-color: var( + --highcontrast-picker-border-color-default, + var( + --mod-picker-border-color-error-active, + var(--spectrum-picker-border-color-error-active) + ) + ); } :host([invalid][open]) #button:not(:disabled, .is-disabled) { - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-error-default-open, - var(--spectrum-picker-border-color-error-default-open) - ) - ); + border-color: var( + --highcontrast-picker-border-color-default, + var( + --mod-picker-border-color-error-default-open, + var(--spectrum-picker-border-color-error-default-open) + ) + ); } :host([invalid]) #button.is-keyboardFocused:not(:disabled, .is-disabled), :host([invalid]) #button:not(:disabled, .is-disabled):focus-visible { - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-error-key-focus, - var(--spectrum-picker-border-color-error-key-focus) - ) - ); + border-color: var( + --highcontrast-picker-border-color-default, + var( + --mod-picker-border-color-error-key-focus, + var(--spectrum-picker-border-color-error-key-focus) + ) + ); } :host([pending]) #button .picker { - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-icon-color-disabled, - var(--spectrum-picker-icon-color-disabled) - ) - ); + color: var( + --highcontrast-picker-content-color-disabled, + var( + --mod-picker-icon-color-disabled, + var(--spectrum-picker-icon-color-disabled) + ) + ); } :host([invalid]) #button .label, :host([pending]) #button .label { - margin-inline-end: var( - --mod-picker-spacing-text-to-icon-inline-end, - var( - --mod-picker-spacing-text-to-alert-icon-inline-start, - var(--spectrum-picker-spacing-text-to-icon-inline-end) - ) - ); + margin-inline-end: var( + --mod-picker-spacing-text-to-icon-inline-end, + var( + --mod-picker-spacing-text-to-alert-icon-inline-start, + var(--spectrum-picker-spacing-text-to-icon-inline-end) + ) + ); } .icon { - flex-shrink: 0; - margin-inline-end: var( - --mod-picker-spacing-text-to-icon, - var(--spectrum-picker-spacing-text-to-icon) - ); + flex-shrink: 0; + margin-inline-end: var( + --mod-picker-spacing-text-to-icon, + var(--spectrum-picker-spacing-text-to-icon) + ); } .label { - white-space: nowrap; - font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); - line-height: var( - --mod-picker-line-height, - var(--spectrum-picker-line-height) - ); - font-weight: var( - --mod-picker-font-weight, - var(--spectrum-picker-font-weight) - ); - text-overflow: ellipsis; - text-align: start; - flex: auto; - padding-block-start: var( - --mod-picker-spacing-top-to-text, - var(--spectrum-picker-spacing-top-to-text) - ); - padding-block-end: calc( - var( - --mod-picker-spacing-bottom-to-text, - var(--spectrum-picker-spacing-bottom-to-text) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - overflow: hidden; + white-space: nowrap; + font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); + line-height: var( + --mod-picker-line-height, + var(--spectrum-picker-line-height) + ); + font-weight: var( + --mod-picker-font-weight, + var(--spectrum-picker-font-weight) + ); + text-overflow: ellipsis; + text-align: start; + flex: auto; + padding-block-start: var( + --mod-picker-spacing-top-to-text, + var(--spectrum-picker-spacing-top-to-text) + ); + padding-block-end: calc( + var( + --mod-picker-spacing-bottom-to-text, + var(--spectrum-picker-spacing-bottom-to-text) + ) - + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) + ); + overflow: hidden; } .label.placeholder { - font-weight: var( - --mod-picker-placeholder-font-weight, - var(--spectrum-picker-font-weight) - ); - font-style: var( - --mod-picker-placeholder-font-style, - var(--spectrum-picker-placeholder-font-style) - ); - transition: color - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ) - ease-in-out; - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-default, - var(--spectrum-picker-font-color-default) - ) - ); + font-weight: var( + --mod-picker-placeholder-font-weight, + var(--spectrum-picker-font-weight) + ); + font-style: var( + --mod-picker-placeholder-font-style, + var(--spectrum-picker-placeholder-font-style) + ); + transition: color + var( + --mod-picker-animation-duration, + var(--spectrum-picker-animation-duration) + ) + ease-in-out; + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-default, + var(--spectrum-picker-font-color-default) + ) + ); } .label.placeholder:active { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-active, - var(--spectrum-picker-font-color-active) - ) - ); + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-active, + var(--spectrum-picker-font-color-active) + ) + ); } .picker { - vertical-align: top; - transition: color - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ) - ease-out; - margin-inline-start: var( - --mod-picker-spacing-icon-to-disclosure-icon, - var(--spectrum-picker-spacing-icon-to-disclosure-icon) - ); - margin-block: var( - --mod-picker-spacing-top-to-disclosure-icon, - var(--spectrum-picker-spacing-top-to-disclosure-icon) - ); - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-default, - var(--spectrum-picker-icon-color-default) - ) - ); - flex-shrink: 0; - display: inline-block; - position: relative; + vertical-align: top; + transition: color + var( + --mod-picker-animation-duration, + var(--spectrum-picker-animation-duration) + ) + ease-out; + margin-inline-start: var( + --mod-picker-spacing-icon-to-disclosure-icon, + var(--spectrum-picker-spacing-icon-to-disclosure-icon) + ); + margin-block: var( + --mod-picker-spacing-top-to-disclosure-icon, + var(--spectrum-picker-spacing-top-to-disclosure-icon) + ); + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-icon-color-default, + var(--spectrum-picker-icon-color-default) + ) + ); + flex-shrink: 0; + display: inline-block; + position: relative; } .picker:active { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-active, - var(--spectrum-picker-icon-color-active) - ) - ); + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-icon-color-active, + var(--spectrum-picker-icon-color-active) + ) + ); } .validation-icon { - margin-block-start: calc( - var( - --mod-picker-spacing-top-to-alert-icon, - var(--spectrum-picker-spacing-top-to-alert-icon) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - margin-block-end: calc( - var( - --mod-picker-spacing-top-to-alert-icon, - var(--spectrum-picker-spacing-top-to-alert-icon) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); + margin-block-start: calc( + var( + --mod-picker-spacing-top-to-alert-icon, + var(--spectrum-picker-spacing-top-to-alert-icon) + ) - + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) + ); + margin-block-end: calc( + var( + --mod-picker-spacing-top-to-alert-icon, + var(--spectrum-picker-spacing-top-to-alert-icon) + ) - + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) + ); } #button .progress-circle { - margin-block-start: calc( - var( - --mod-picker-spacing-top-to-progress-circle, - var(--spectrum-picker-spacing-top-to-progress-circle) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - margin-block-end: calc( - var( - --mod-picker-spacing-top-to-progress-circle, - var(--spectrum-picker-spacing-top-to-progress-circle) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); + margin-block-start: calc( + var( + --mod-picker-spacing-top-to-progress-circle, + var(--spectrum-picker-spacing-top-to-progress-circle) + ) - + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) + ); + margin-block-end: calc( + var( + --mod-picker-spacing-top-to-progress-circle, + var(--spectrum-picker-spacing-top-to-progress-circle) + ) - + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) + ); } .label ~ .picker { - margin-inline-start: var( - --mod-picker-spacing-text-to-icon, - var(--spectrum-picker-spacing-text-to-icon) - ); + margin-inline-start: var( + --mod-picker-spacing-text-to-icon, + var(--spectrum-picker-spacing-text-to-icon) + ); } :host([quiet]) #button { - inline-size: auto; - min-inline-size: 0; - padding-inline: var( - --mod-picker-spacing-edge-to-text-quiet, - var(--spectrum-picker-spacing-edge-to-text-quiet) - ); - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-default, - var(--spectrum-picker-font-color-default) - ) - ); - background-color: initial; - background-color: var(--highcontrast-picker-background-color, transparent); - border: none; - border-radius: 0; - margin-block-start: calc( - var( - --mod-picker-spacing-label-to-picker-quiet, - var(--spectrum-picker-spacing-label-to-picker-quiet) - ) + 1px - ); + inline-size: auto; + min-inline-size: 0; + padding-inline: var( + --mod-picker-spacing-edge-to-text-quiet, + var(--spectrum-picker-spacing-edge-to-text-quiet) + ); + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-default, + var(--spectrum-picker-font-color-default) + ) + ); + background-color: initial; + background-color: var(--highcontrast-picker-background-color, transparent); + border: none; + border-radius: 0; + margin-block-start: calc( + var( + --mod-picker-spacing-label-to-picker-quiet, + var(--spectrum-picker-spacing-label-to-picker-quiet) + ) + + 1px + ); } :host([quiet]) #button.label-inline { - margin-block-start: 0; + margin-block-start: 0; } :host([quiet]) #button .picker { - margin-inline-end: var( - --mod-picker-spacing-edge-to-disclosure-icon-quiet, - var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet) - ); + margin-inline-end: var( + --mod-picker-spacing-edge-to-disclosure-icon-quiet, + var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet) + ); } :host([quiet]) #button:after { - block-size: auto; - inline-size: auto; - border: none; + block-size: auto; + inline-size: auto; + border: none; } @media (hover: hover) { - #button:hover { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-hover, - var(--spectrum-picker-font-color-hover) - ) - ); - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-hover, - var(--spectrum-picker-background-color-hover) - ) - ); - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-hover, - var(--spectrum-picker-border-color-hover) - ) - ); - } - - #button:hover .picker { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-hover, - var(--spectrum-picker-icon-color-hover) - ) - ); - } - - :host([open]) - #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-hover-open, - var(--spectrum-picker-font-color-hover-open) - ) - ); - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-hover-open, - var(--spectrum-picker-background-color-hover-open) - ) - ); - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-hover-open, - var(--spectrum-picker-border-color-hover-open) - ) - ); - } - - :host([open]) - #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover - .picker { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-hover-open, - var(--spectrum-picker-icon-color-hover-open) - ) - ); - } - - :host([invalid]) #button:not(:disabled, .is-disabled):hover { - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-error-hover, - var(--spectrum-picker-border-color-error-hover) - ) - ); - } - - :host([invalid][open]) #button:not(:disabled, .is-disabled):hover { - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-error-hover-open, - var(--spectrum-picker-border-color-error-hover-open) - ) - ); - } - - .label.placeholder:hover { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-hover, - var(--spectrum-picker-font-color-hover) - ) - ); - } - - :host([quiet]) #button:hover { - background-color: initial; - background-color: var( - --highcontrast-picker-background-color, - transparent - ); - } + #button:hover { + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-hover, + var(--spectrum-picker-font-color-hover) + ) + ); + background-color: var( + --highcontrast-picker-background-color, + var( + --mod-picker-background-color-hover, + var(--spectrum-picker-background-color-hover) + ) + ); + border-color: var( + --highcontrast-picker-border-color-hover, + var( + --mod-picker-border-color-hover, + var(--spectrum-picker-border-color-hover) + ) + ); + } + + #button:hover .picker { + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-icon-color-hover, + var(--spectrum-picker-icon-color-hover) + ) + ); + } + + :host([open]) + #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover { + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-hover-open, + var(--spectrum-picker-font-color-hover-open) + ) + ); + background-color: var( + --highcontrast-picker-background-color, + var( + --mod-picker-background-color-hover-open, + var(--spectrum-picker-background-color-hover-open) + ) + ); + border-color: var( + --highcontrast-picker-border-color-hover, + var( + --mod-picker-border-color-hover-open, + var(--spectrum-picker-border-color-hover-open) + ) + ); + } + + :host([open]) + #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover + .picker { + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-icon-color-hover-open, + var(--spectrum-picker-icon-color-hover-open) + ) + ); + } + + :host([invalid]) #button:not(:disabled, .is-disabled):hover { + border-color: var( + --highcontrast-picker-border-color-hover, + var( + --mod-picker-border-color-error-hover, + var(--spectrum-picker-border-color-error-hover) + ) + ); + } + + :host([invalid][open]) #button:not(:disabled, .is-disabled):hover { + border-color: var( + --highcontrast-picker-border-color-hover, + var( + --mod-picker-border-color-error-hover-open, + var(--spectrum-picker-border-color-error-hover-open) + ) + ); + } + + .label.placeholder:hover { + color: var( + --highcontrast-picker-content-color-default, + var( + --mod-picker-font-color-hover, + var(--spectrum-picker-font-color-hover) + ) + ); + } + + :host([quiet]) #button:hover { + background-color: initial; + background-color: var(--highcontrast-picker-background-color, transparent); + } } :host([quiet]) #button.is-keyboardFocused, :host([quiet]) #button:focus-visible { - background-color: initial; - background-color: var(--highcontrast-picker-background-color, transparent); + background-color: initial; + background-color: var(--highcontrast-picker-background-color, transparent); } :host([quiet]) #button.is-keyboardFocused:after, :host([quiet]) #button:focus-visible:after { - box-shadow: 0 - var( - --mod-picker-focus-indicator-thickness, - var(--spectrum-picker-focus-indicator-thickness) - ) - 0 0 - var( - --highcontrast-picker-focus-indicator-color, - var( - --mod-picker-focus-indicator-color, - var(--spectrum-picker-focus-indicator-color) - ) - ); - margin: calc( - ( - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) + - var( - --mod-picker-border-width, - var(--spectrum-picker-border-width) - ) - ) * -1 - ) - 0; - border: none; - border-radius: 0; + box-shadow: 0 + var( + --mod-picker-focus-indicator-thickness, + var(--spectrum-picker-focus-indicator-thickness) + ) + 0 0 + var( + --highcontrast-picker-focus-indicator-color, + var( + --mod-picker-focus-indicator-color, + var(--spectrum-picker-focus-indicator-color) + ) + ); + margin: calc( + ( + var( + --mod-picker-focus-indicator-gap, + var(--spectrum-picker-focus-indicator-gap) + ) + + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) + ) * + -1 + ) + 0; + border: none; + border-radius: 0; } :host([quiet][open]) #button, :host([quiet][disabled]) #button#button, :host([quiet]) #button#button:disabled, :host([quiet]) #button:active { - background-color: initial; - background-color: var(--highcontrast-picker-background-color, transparent); + background-color: initial; + background-color: var(--highcontrast-picker-background-color, transparent); } .label-inline { - vertical-align: top; - display: inline-flex; + vertical-align: top; + display: inline-flex; } :host([disabled]) #button, #button:disabled { - cursor: default; - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-disabled, - var(--spectrum-picker-background-color-disabled) - ) - ); - border-color: #0000; - border-color: var(--highcontrast-picker-border-color-disabled, transparent); - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-font-color-disabled, - var(--spectrum-picker-font-color-disabled) - ) - ); + cursor: default; + background-color: var( + --highcontrast-picker-background-color, + var( + --mod-picker-background-color-disabled, + var(--spectrum-picker-background-color-disabled) + ) + ); + border-color: #0000; + border-color: var(--highcontrast-picker-border-color-disabled, transparent); + color: var( + --highcontrast-picker-content-color-disabled, + var( + --mod-picker-font-color-disabled, + var(--spectrum-picker-font-color-disabled) + ) + ); } :host([disabled]) #button .icon, @@ -835,22 +818,22 @@ governing permissions and limitations under the License. #button:disabled .icon, #button:disabled .picker, #button:disabled .validation-icon { - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-icon-color-disabled, - var(--spectrum-picker-icon-color-disabled) - ) - ); + color: var( + --highcontrast-picker-content-color-disabled, + var( + --mod-picker-icon-color-disabled, + var(--spectrum-picker-icon-color-disabled) + ) + ); } :host([disabled]) #button .label.placeholder, #button:disabled .label.placeholder { - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-font-color-disabled, - var(--spectrum-picker-font-color-disabled) - ) - ); + color: var( + --highcontrast-picker-content-color-disabled, + var( + --mod-picker-font-color-disabled, + var(--spectrum-picker-font-color-disabled) + ) + ); } diff --git a/packages/popover/src/popover-overrides.css b/packages/popover/src/popover-overrides.css index f6f23988a8..ce40c6489c 100644 --- a/packages/popover/src/popover-overrides.css +++ b/packages/popover/src/popover-overrides.css @@ -12,28 +12,26 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-popover-border-width: var(--system-popover-border-width); - --spectrum-popover-animation-distance: var( - --system-popover-animation-distance - ); - --spectrum-popover-background-color: var(--system-popover-background-color); - --spectrum-popover-border-color: var(--system-popover-border-color); - --spectrum-popover-content-area-spacing-vertical: var( - --system-popover-content-area-spacing-vertical - ); - --spectrum-popover-shadow-horizontal: var( - --system-popover-shadow-horizontal - ); - --spectrum-popover-shadow-vertical: var(--system-popover-shadow-vertical); - --spectrum-popover-shadow-blur: var(--system-popover-shadow-blur); - --spectrum-popover-shadow-color: var(--system-popover-shadow-color); - --spectrum-popover-corner-radius: var(--system-popover-corner-radius); - --spectrum-popover-pointer-width: var(--system-popover-pointer-width); - --spectrum-popover-pointer-height: var(--system-popover-pointer-height); - --spectrum-popover-pointer-edge-offset: var( - --system-popover-pointer-edge-offset - ); - --spectrum-popover-pointer-edge-spacing: var( - --system-popover-pointer-edge-spacing - ); + --spectrum-popover-border-width: var(--system-popover-border-width); + --spectrum-popover-animation-distance: var( + --system-popover-animation-distance + ); + --spectrum-popover-background-color: var(--system-popover-background-color); + --spectrum-popover-border-color: var(--system-popover-border-color); + --spectrum-popover-content-area-spacing-vertical: var( + --system-popover-content-area-spacing-vertical + ); + --spectrum-popover-shadow-horizontal: var(--system-popover-shadow-horizontal); + --spectrum-popover-shadow-vertical: var(--system-popover-shadow-vertical); + --spectrum-popover-shadow-blur: var(--system-popover-shadow-blur); + --spectrum-popover-shadow-color: var(--system-popover-shadow-color); + --spectrum-popover-corner-radius: var(--system-popover-corner-radius); + --spectrum-popover-pointer-width: var(--system-popover-pointer-width); + --spectrum-popover-pointer-height: var(--system-popover-pointer-height); + --spectrum-popover-pointer-edge-offset: var( + --system-popover-pointer-edge-offset + ); + --spectrum-popover-pointer-edge-spacing: var( + --system-popover-pointer-edge-spacing + ); } diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index 4ebdf34af8..1783d5deef 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -12,490 +12,467 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - pointer-events: none; - visibility: hidden; - opacity: 0; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; + transition: + transform + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + opacity + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + visibility 0s linear + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ); } :host([open]) { - pointer-events: auto; - visibility: visible; - opacity: 1; - transition-delay: 0s; - transition-delay: var( - --mod-overlay-animation-duration-opened, - var(--spectrum-animation-duration-0, 0s) - ); + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: 0s; + transition-delay: var( + --mod-overlay-animation-duration-opened, + var(--spectrum-animation-duration-0, 0s) + ); } @media (forced-colors: active) { - :host { - --highcontrast-popover-border-color: CanvasText; - } + :host { + --highcontrast-popover-border-color: CanvasText; + } } :host { - --spectrum-popover-filter: drop-shadow( - var( - --mod-popover-shadow-horizontal, - var(--spectrum-popover-shadow-horizontal) - ) - var( - --mod-popover-shadow-vertical, - var(--spectrum-popover-shadow-vertical) - ) - var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) - var( - --mod-popover-shadow-color, - var(--spectrum-popover-shadow-color) - ) - ); - box-sizing: border-box; - padding: var( - --mod-popover-content-area-spacing-vertical, - var(--spectrum-popover-content-area-spacing-vertical) - ) - 0; - border-radius: var( - --mod-popover-corner-radius, - var(--spectrum-popover-corner-radius) - ); - border-style: solid; - border-color: var( - --highcontrast-popover-border-color, - var(--mod-popover-border-color, var(--spectrum-popover-border-color)) - ); - border-width: var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ); - background-color: var( - --mod-popover-background-color, - var(--spectrum-popover-background-color) - ); - filter: var(--mod-popover-filter, var(--spectrum-popover-filter)); - outline: none; - flex-direction: column; - display: inline-flex; - position: absolute; + --spectrum-popover-filter: drop-shadow( + var( + --mod-popover-shadow-horizontal, + var(--spectrum-popover-shadow-horizontal) + ) + var( + --mod-popover-shadow-vertical, + var(--spectrum-popover-shadow-vertical) + ) + var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) + var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color)) + ); + box-sizing: border-box; + padding: var( + --mod-popover-content-area-spacing-vertical, + var(--spectrum-popover-content-area-spacing-vertical) + ) + 0; + border-radius: var( + --mod-popover-corner-radius, + var(--spectrum-popover-corner-radius) + ); + border-style: solid; + border-color: var( + --highcontrast-popover-border-color, + var(--mod-popover-border-color, var(--spectrum-popover-border-color)) + ); + border-width: var( + --mod-popover-border-width, + var(--spectrum-popover-border-width) + ); + background-color: var( + --mod-popover-background-color, + var(--spectrum-popover-background-color) + ); + filter: var(--mod-popover-filter, var(--spectrum-popover-filter)); + outline: none; + flex-direction: column; + display: inline-flex; + position: absolute; } :host([tip]) #tip .triangle { - stroke-linecap: square; - stroke-linejoin: miter; - fill: var( - --highcontrast-popover-background-color, - var( - --mod-popover-background-color, - var(--spectrum-popover-background-color) - ) - ); - stroke: var( - --highcontrast-popover-border-color, - var(--mod-popover-border-color, var(--spectrum-popover-border-color)) - ); - stroke-width: var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ); + stroke-linecap: square; + stroke-linejoin: miter; + fill: var( + --highcontrast-popover-background-color, + var( + --mod-popover-background-color, + var(--spectrum-popover-background-color) + ) + ); + stroke: var( + --highcontrast-popover-border-color, + var(--mod-popover-border-color, var(--spectrum-popover-border-color)) + ); + stroke-width: var( + --mod-popover-border-width, + var(--spectrum-popover-border-width) + ); } * { - --mod-popover-filter: none; + --mod-popover-filter: none; } :host([tip]) .spectrum-Popover--top-end, :host([tip]) .spectrum-Popover--top-left, :host([tip]) .spectrum-Popover--top-right, :host([tip]) .spectrum-Popover--top-start, -:host([placement*='top'][tip]) { - margin-block-end: calc( - var( - --mod-popover-pointer-height, - var(--spectrum-popover-pointer-height) - ) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); +:host([placement*="top"][tip]) { + margin-block-end: calc( + var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - + var(--mod-popover-border-width, var(--spectrum-popover-border-width)) + ); } :host([open]) .spectrum-Popover--top-end, :host([open]) .spectrum-Popover--top-left, :host([open]) .spectrum-Popover--top-right, :host([open]) .spectrum-Popover--top-start, -:host([placement*='top'][open]) { - transform: translateY( - calc( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) * -1 - ) - ); +:host([placement*="top"][open]) { + transform: translateY( + calc( + var( + --mod-popover-animation-distance, + var(--spectrum-popover-animation-distance) + ) * + -1 + ) + ); } :host([tip]) .spectrum-Popover--bottom-end, :host([tip]) .spectrum-Popover--bottom-left, :host([tip]) .spectrum-Popover--bottom-right, :host([tip]) .spectrum-Popover--bottom-start, -:host([placement*='bottom'][tip]) { - margin-block-start: calc( - var( - --mod-popover-pointer-height, - var(--spectrum-popover-pointer-height) - ) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); +:host([placement*="bottom"][tip]) { + margin-block-start: calc( + var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - + var(--mod-popover-border-width, var(--spectrum-popover-border-width)) + ); } :host([open]) .spectrum-Popover--bottom-end, :host([open]) .spectrum-Popover--bottom-left, :host([open]) .spectrum-Popover--bottom-right, :host([open]) .spectrum-Popover--bottom-start, -:host([placement*='bottom'][open]) { - transform: translateY( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) - ); +:host([placement*="bottom"][open]) { + transform: translateY( + var( + --mod-popover-animation-distance, + var(--spectrum-popover-animation-distance) + ) + ); } :host([tip]) .spectrum-Popover--right-bottom, :host([tip]) .spectrum-Popover--right-top, -:host([placement*='right'][tip]) { - margin-left: calc( - var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); +:host([placement*="right"][tip]) { + margin-left: calc( + var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - + var(--mod-popover-border-width, var(--spectrum-popover-border-width)) + ); } :host([open]) .spectrum-Popover--right-bottom, :host([open]) .spectrum-Popover--right-top, -:host([placement*='right'][open]) { - transform: translateX( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) - ); +:host([placement*="right"][open]) { + transform: translateX( + var( + --mod-popover-animation-distance, + var(--spectrum-popover-animation-distance) + ) + ); } :host([tip]) .spectrum-Popover--left-bottom, :host([tip]) .spectrum-Popover--left-top, -:host([placement*='left'][tip]) { - margin-right: calc( - var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); +:host([placement*="left"][tip]) { + margin-right: calc( + var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - + var(--mod-popover-border-width, var(--spectrum-popover-border-width)) + ); } :host([open]) .spectrum-Popover--left-bottom, :host([open]) .spectrum-Popover--left-top, -:host([placement*='left'][open]) { - transform: translateX( - calc( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) * -1 - ) - ); +:host([placement*="left"][open]) { + transform: translateX( + calc( + var( + --mod-popover-animation-distance, + var(--spectrum-popover-animation-distance) + ) * + -1 + ) + ); } :host([tip]) .spectrum-Popover--start-bottom, :host([tip]) .spectrum-Popover--start-top, :host([tip]) .spectrum-Popover--start { - margin-inline-end: calc( - var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); + margin-inline-end: calc( + var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - + var(--mod-popover-border-width, var(--spectrum-popover-border-width)) + ); } :host([open]) .spectrum-Popover--start-bottom, :host([open]) .spectrum-Popover--start-top, :host([open]) .spectrum-Popover--start { - transform: translateX( - calc( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) * -1 - ) - ); + transform: translateX( + calc( + var( + --mod-popover-animation-distance, + var(--spectrum-popover-animation-distance) + ) * + -1 + ) + ); } :host([open]) .spectrum-Popover--start-bottom:dir(rtl), :host([open]) .spectrum-Popover--start-top:dir(rtl), :host([open]) .spectrum-Popover--start:dir(rtl), -:host([dir='rtl'][open]) .spectrum-Popover--start-bottom, -:host([dir='rtl'][open]) .spectrum-Popover--start-top, -:host([dir='rtl'][open]) .spectrum-Popover--start { - transform: translateX( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) - ); +:host([dir="rtl"][open]) .spectrum-Popover--start-bottom, +:host([dir="rtl"][open]) .spectrum-Popover--start-top, +:host([dir="rtl"][open]) .spectrum-Popover--start { + transform: translateX( + var( + --mod-popover-animation-distance, + var(--spectrum-popover-animation-distance) + ) + ); } :host([tip]) .spectrum-Popover--end-bottom, :host([tip]) .spectrum-Popover--end-top, :host([tip]) .spectrum-Popover--end { - margin-inline-start: calc( - var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); + margin-inline-start: calc( + var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - + var(--mod-popover-border-width, var(--spectrum-popover-border-width)) + ); } :host([open]) .spectrum-Popover--end-bottom, :host([open]) .spectrum-Popover--end-top, :host([open]) .spectrum-Popover--end { - transform: translateX( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) - ); + transform: translateX( + var( + --mod-popover-animation-distance, + var(--spectrum-popover-animation-distance) + ) + ); } :host([open]) .spectrum-Popover--end-bottom:dir(rtl), :host([open]) .spectrum-Popover--end-top:dir(rtl), :host([open]) .spectrum-Popover--end:dir(rtl), -:host([dir='rtl'][open]) .spectrum-Popover--end-bottom, -:host([dir='rtl'][open]) .spectrum-Popover--end-top, -:host([dir='rtl'][open]) .spectrum-Popover--end { - transform: translateX( - calc( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) * -1 - ) - ); +:host([dir="rtl"][open]) .spectrum-Popover--end-bottom, +:host([dir="rtl"][open]) .spectrum-Popover--end-top, +:host([dir="rtl"][open]) .spectrum-Popover--end { + transform: translateX( + calc( + var( + --mod-popover-animation-distance, + var(--spectrum-popover-animation-distance) + ) * + -1 + ) + ); } :host([tip]) #tip, -:host([tip][placement*='bottom']) #tip, +:host([tip][placement*="bottom"]) #tip, :host([tip]) .spectrum-Popover--bottom-end #tip, :host([tip]) .spectrum-Popover--bottom-left #tip, :host([tip]) .spectrum-Popover--bottom-right #tip, :host([tip]) .spectrum-Popover--bottom-start #tip, -:host([tip][placement*='top']) #tip, +:host([tip][placement*="top"]) #tip, :host([tip]) .spectrum-Popover--top-end #tip, :host([tip]) .spectrum-Popover--top-left #tip, :host([tip]) .spectrum-Popover--top-right #tip, :host([tip]) .spectrum-Popover--top-start #tip { - inline-size: var( - --mod-popover-pointer-width, - var(--spectrum-popover-pointer-width) - ); - block-size: var( - --mod-popover-pointer-height, - var(--spectrum-popover-pointer-height) - ); - margin: auto; - position: absolute; - inset-block-start: 100%; - inset-inline: 0; - transform: translate(0); + inline-size: var( + --mod-popover-pointer-width, + var(--spectrum-popover-pointer-width) + ); + block-size: var( + --mod-popover-pointer-height, + var(--spectrum-popover-pointer-height) + ); + margin: auto; + position: absolute; + inset-block-start: 100%; + inset-inline: 0; + transform: translate(0); } :host([tip]) .spectrum-Popover--top-left #tip { - inset-inline: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ) - auto; + inset-inline: var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ) + auto; } :host([tip]) .spectrum-Popover--top-right #tip { - inset-inline: auto - var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + inset-inline: auto + var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ); } :host([tip]) .spectrum-Popover--top-start #tip { - margin-inline-start: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + margin-inline-start: var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ); } :host([tip]) .spectrum-Popover--top-end #tip { - margin-inline-end: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + margin-inline-end: var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ); } -:host([tip][placement*='bottom']) #tip, +:host([tip][placement*="bottom"]) #tip, :host([tip]) .spectrum-Popover--bottom-end #tip, :host([tip]) .spectrum-Popover--bottom-left #tip, :host([tip]) .spectrum-Popover--bottom-right #tip, :host([tip]) .spectrum-Popover--bottom-start #tip { - inset-block: auto 100%; - transform: scaleY(-1); + inset-block: auto 100%; + transform: scaleY(-1); } :host([tip]) .spectrum-Popover--bottom-left #tip { - inset-inline: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ) - auto; + inset-inline: var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ) + auto; } :host([tip]) .spectrum-Popover--bottom-right #tip { - inset-inline: auto - var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + inset-inline: auto + var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ); } :host([tip]) .spectrum-Popover--bottom-start #tip { - margin-inline-start: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + margin-inline-start: var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ); } :host([tip]) .spectrum-Popover--bottom-end #tip { - margin-inline-end: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + margin-inline-end: var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ); } :host([tip]) .spectrum-Popover--end #tip, :host([tip]) .spectrum-Popover--end-bottom #tip, :host([tip]) .spectrum-Popover--end-top #tip, -:host([tip][placement*='left']) #tip, +:host([tip][placement*="left"]) #tip, :host([tip]) .spectrum-Popover--left-bottom #tip, :host([tip]) .spectrum-Popover--left-top #tip, -:host([tip][placement*='right']) #tip, +:host([tip][placement*="right"]) #tip, :host([tip]) .spectrum-Popover--right-bottom #tip, :host([tip]) .spectrum-Popover--right-top #tip, :host([tip]) .spectrum-Popover--start #tip, :host([tip]) .spectrum-Popover--start-bottom #tip, :host([tip]) .spectrum-Popover--start-top #tip { - inline-size: var( - --mod-popover-pointer-height, - var(--spectrum-popover-pointer-height) - ); - block-size: var( - --mod-popover-pointer-width, - var(--spectrum-popover-pointer-width) - ); - inset-block: 0; -} - -:host([tip][placement*='left']) #tip, + inline-size: var( + --mod-popover-pointer-height, + var(--spectrum-popover-pointer-height) + ); + block-size: var( + --mod-popover-pointer-width, + var(--spectrum-popover-pointer-width) + ); + inset-block: 0; +} + +:host([tip][placement*="left"]) #tip, :host([tip]) .spectrum-Popover--left-bottom #tip, :host([tip]) .spectrum-Popover--left-top #tip { - left: 100%; - right: auto; + left: 100%; + right: auto; } -:host([tip][placement*='right']) #tip, +:host([tip][placement*="right"]) #tip, :host([tip]) .spectrum-Popover--right-bottom #tip, :host([tip]) .spectrum-Popover--right-top #tip { - left: auto; - right: 100%; - transform: scaleX(-1); + left: auto; + right: 100%; + transform: scaleX(-1); } :host([tip]) .spectrum-Popover--end-top #tip, :host([tip]) .spectrum-Popover--left-top #tip, :host([tip]) .spectrum-Popover--right-top #tip, :host([tip]) .spectrum-Popover--start-top #tip { - inset-block: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ) - auto; + inset-block: var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ) + auto; } :host([tip]) .spectrum-Popover--end-bottom #tip, :host([tip]) .spectrum-Popover--left-bottom #tip, :host([tip]) .spectrum-Popover--right-bottom #tip, :host([tip]) .spectrum-Popover--start-bottom #tip { - inset-block: auto - var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + inset-block: auto + var( + --mod-popover-pointer-edge-spacing, + var(--spectrum-popover-pointer-edge-spacing) + ); } :host([tip]) .spectrum-Popover--start #tip, :host([tip]) .spectrum-Popover--start-bottom #tip, :host([tip]) .spectrum-Popover--start-top #tip { - margin-inline-start: 100%; + margin-inline-start: 100%; } :host([tip]) .spectrum-Popover--start #tip:dir(rtl), :host([tip]) .spectrum-Popover--start-bottom #tip:dir(rtl), :host([tip]) .spectrum-Popover--start-top #tip:dir(rtl), -:host([dir='rtl'][tip]) .spectrum-Popover--start #tip, -:host([dir='rtl'][tip]) .spectrum-Popover--start-bottom #tip, -:host([dir='rtl'][tip]) .spectrum-Popover--start-top #tip { - transform: none; +:host([dir="rtl"][tip]) .spectrum-Popover--start #tip, +:host([dir="rtl"][tip]) .spectrum-Popover--start-bottom #tip, +:host([dir="rtl"][tip]) .spectrum-Popover--start-top #tip { + transform: none; } :host([tip]) .spectrum-Popover--end #tip, :host([tip]) .spectrum-Popover--end-bottom #tip, :host([tip]) .spectrum-Popover--end-top #tip { - margin-inline-end: 100%; - transform: scaleX(-1); + margin-inline-end: 100%; + transform: scaleX(-1); } :host([tip]) .spectrum-Popover--end #tip:dir(rtl), :host([tip]) .spectrum-Popover--end-bottom #tip:dir(rtl), :host([tip]) .spectrum-Popover--end-top #tip:dir(rtl), -:host([dir='rtl'][tip]) .spectrum-Popover--end #tip, -:host([dir='rtl'][tip]) .spectrum-Popover--end-bottom #tip, -:host([dir='rtl'][tip]) .spectrum-Popover--end-top #tip { - transform: scaleX(1); +:host([dir="rtl"][tip]) .spectrum-Popover--end #tip, +:host([dir="rtl"][tip]) .spectrum-Popover--end-bottom #tip, +:host([dir="rtl"][tip]) .spectrum-Popover--end-top #tip { + transform: scaleX(1); } diff --git a/packages/progress-bar/src/progress-bar-overrides.css b/packages/progress-bar/src/progress-bar-overrides.css index 55c099e7ca..c233aeb2b5 100644 --- a/packages/progress-bar/src/progress-bar-overrides.css +++ b/packages/progress-bar/src/progress-bar-overrides.css @@ -12,111 +12,97 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-progressbar-animation-ease-in-out-indeterminate: var( - --system-progress-bar-animation-ease-in-out-indeterminate - ); - --spectrum-progressbar-animation-duration-indeterminate: var( - --system-progress-bar-animation-duration-indeterminate - ); - --spectrum-progressbar-corner-radius: var( - --system-progress-bar-corner-radius - ); - --spectrum-progressbar-fill-size-indeterminate: var( - --system-progress-bar-fill-size-indeterminate - ); - --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); - --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); - --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); - --spectrum-progressbar-line-height-cjk: var( - --system-progress-bar-line-height-cjk - ); - --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); - --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); - --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); - --spectrum-progressbar-spacing-label-to-progressbar: var( - --system-progress-bar-spacing-label-to - ); - --spectrum-progressbar-spacing-label-to-text: var( - --system-progress-bar-spacing-label-to-text - ); - --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); - --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); - --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); - --spectrum-progressbar-label-and-value-white: var( - --system-progress-bar-label-and-value-white - ); - --spectrum-progressbar-track-color-white: var( - --system-progress-bar-track-color-white - ); - --spectrum-progressbar-fill-color-white: var( - --system-progress-bar-fill-color-white - ); - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-default - ); - --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-spacing-top-to-text - ); + --spectrum-progressbar-animation-ease-in-out-indeterminate: var( + --system-progress-bar-animation-ease-in-out-indeterminate + ); + --spectrum-progressbar-animation-duration-indeterminate: var( + --system-progress-bar-animation-duration-indeterminate + ); + --spectrum-progressbar-corner-radius: var( + --system-progress-bar-corner-radius + ); + --spectrum-progressbar-fill-size-indeterminate: var( + --system-progress-bar-fill-size-indeterminate + ); + --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); + --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); + --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); + --spectrum-progressbar-line-height-cjk: var( + --system-progress-bar-line-height-cjk + ); + --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); + --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); + --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); + --spectrum-progressbar-spacing-label-to-progressbar: var( + --system-progress-bar-spacing-label-to + ); + --spectrum-progressbar-spacing-label-to-text: var( + --system-progress-bar-spacing-label-to-text + ); + --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); + --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); + --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); + --spectrum-progressbar-label-and-value-white: var( + --system-progress-bar-label-and-value-white + ); + --spectrum-progressbar-track-color-white: var( + --system-progress-bar-track-color-white + ); + --spectrum-progressbar-fill-color-white: var( + --system-progress-bar-fill-color-white + ); + --spectrum-progressbar-size-default: var(--system-progress-bar-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-spacing-top-to-text + ); } :host { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-m-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-m-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-m-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-m-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-m-size-default + ); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-m-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-m-thickness); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-m-spacing-top-to-text + ); } -:host([size='s']) { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-s-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-s-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-s-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-s-spacing-top-to-text - ); +:host([size="s"]) { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-s-size-default + ); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-s-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-s-thickness); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-s-spacing-top-to-text + ); } -:host([size='l']) { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-l-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-l-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-l-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-l-spacing-top-to-text - ); +:host([size="l"]) { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-l-size-default + ); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-l-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-l-thickness); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-l-spacing-top-to-text + ); } -:host([size='xl']) { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-xl-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-xl-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-xl-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-xl-spacing-top-to-text - ); +:host([size="xl"]) { + --spectrum-progressbar-size-default: var( + --system-progress-bar-size-xl-size-default + ); + --spectrum-progressbar-font-size: var( + --system-progress-bar-size-xl-font-size + ); + --spectrum-progressbar-thickness: var( + --system-progress-bar-size-xl-thickness + ); + --spectrum-progressbar-spacing-top-to-text: var( + --system-progress-bar-size-xl-spacing-top-to-text + ); } diff --git a/packages/progress-bar/src/spectrum-progress-bar.css b/packages/progress-bar/src/spectrum-progress-bar.css index f8e10b8fbc..557ae2416d 100644 --- a/packages/progress-bar/src/spectrum-progress-bar.css +++ b/packages/progress-bar/src/spectrum-progress-bar.css @@ -12,49 +12,49 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - font-size: var( - --mod-progressbar-font-size, - var(--spectrum-progressbar-font-size) - ); - vertical-align: top; - inline-size: var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ); - max-inline-size: var( - --mod-progressbar-max-size, - var(--spectrum-progressbar-max-size) - ); - min-inline-size: var( - --mod-progressbar-min-size, - var(--spectrum-progressbar-min-size) - ); - flex-flow: wrap; - justify-content: space-between; - align-items: center; - display: inline-flex; - position: relative; + font-size: var( + --mod-progressbar-font-size, + var(--spectrum-progressbar-font-size) + ); + vertical-align: top; + inline-size: var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-size-default) + ); + max-inline-size: var( + --mod-progressbar-max-size, + var(--spectrum-progressbar-max-size) + ); + min-inline-size: var( + --mod-progressbar-min-size, + var(--spectrum-progressbar-min-size) + ); + flex-flow: wrap; + justify-content: space-between; + align-items: center; + display: inline-flex; + position: relative; } .label, .percentage { - text-align: start; - line-height: var( - --mod-progressbar-line-height, - var(--spectrum-progressbar-line-height) - ); - color: var( - --mod-progressbar-text-color, - var(--spectrum-progressbar-text-color) - ); - margin-block-start: var( - --mod-progressbar-spacing-top-to-text, - var(--spectrum-progressbar-spacing-top-to-text) - ); - margin-block-end: var( - --mod-progressbar-spacing-label-to-progressbar, - var(--spectrum-progressbar-spacing-label-to-progressbar) - ); + text-align: start; + line-height: var( + --mod-progressbar-line-height, + var(--spectrum-progressbar-line-height) + ); + color: var( + --mod-progressbar-text-color, + var(--spectrum-progressbar-text-color) + ); + margin-block-start: var( + --mod-progressbar-spacing-top-to-text, + var(--spectrum-progressbar-spacing-top-to-text) + ); + margin-block-end: var( + --mod-progressbar-spacing-label-to-progressbar, + var(--spectrum-progressbar-spacing-label-to-progressbar) + ); } .label:lang(ja), @@ -63,183 +63,179 @@ governing permissions and limitations under the License. .percentage:lang(ja), .percentage:lang(ko), .percentage:lang(zh) { - line-height: var( - --mod-progressbar-line-height-cjk, - var(--spectrum-progressbar-line-height-cjk) - ); + line-height: var( + --mod-progressbar-line-height-cjk, + var(--spectrum-progressbar-line-height-cjk) + ); } .label { - flex: 1; + flex: 1; } .percentage { - align-self: flex-start; - margin-inline-start: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + align-self: flex-start; + margin-inline-start: var( + --mod-progressbar-spacing-label-to-text, + var(--spectrum-progressbar-spacing-label-to-text) + ); } .track { - inline-size: 100%; - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) - ); - border-radius: var(--spectrum-progressbar-corner-radius); - background: var( - --highcontrast-progressbar-track-color, - var( - --mod-progressbar-track-color, - var(--spectrum-progressbar-track-color) - ) - ); - overflow: hidden; + inline-size: 100%; + block-size: var( + --mod-progressbar-thickness, + var(--spectrum-progressbar-thickness) + ); + border-radius: var(--spectrum-progressbar-corner-radius); + background: var( + --highcontrast-progressbar-track-color, + var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)) + ); + overflow: hidden; } .fill { - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) - ); - background: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color, - var(--spectrum-progressbar-fill-color) - ) - ); - border: none; - transition: width 1s; + block-size: var( + --mod-progressbar-thickness, + var(--spectrum-progressbar-thickness) + ); + background: var( + --highcontrast-progressbar-fill-color, + var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)) + ); + border: none; + transition: width 1s; } :host([indeterminate]) .fill { - inline-size: var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) - ); - animation-timing-function: var( - --mod-progressbar-animation-ease-in-out-indeterminate, - var(--spectrum-progressbar-animation-ease-in-out-indeterminate) - ); - will-change: transform; - animation-name: indeterminate-loop-ltr; - animation-duration: var( - --mod-progressbar-animation-duration-indeterminate, - var(--spectrum-progressbar-animation-duration-indeterminate) - ); - animation-iteration-count: infinite; - position: relative; + inline-size: var( + --mod-progressbar-fill-size-indeterminate, + var(--spectrum-progressbar-fill-size-indeterminate) + ); + animation-timing-function: var( + --mod-progressbar-animation-ease-in-out-indeterminate, + var(--spectrum-progressbar-animation-ease-in-out-indeterminate) + ); + will-change: transform; + animation-name: indeterminate-loop-ltr; + animation-duration: var( + --mod-progressbar-animation-duration-indeterminate, + var(--spectrum-progressbar-animation-duration-indeterminate) + ); + animation-iteration-count: infinite; + position: relative; } :host([indeterminate]) .fill:dir(rtl), -:host([dir='rtl'][indeterminate]) .fill { - animation-name: indeterminate-loop-rtl; +:host([dir="rtl"][indeterminate]) .fill { + animation-name: indeterminate-loop-rtl; } :host([side-label]) { - flex-flow: row; - justify-content: space-between; - display: inline-flex; + flex-flow: row; + justify-content: space-between; + display: inline-flex; } :host([side-label]) .track { - flex: 1 1 - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ); + flex: 1 1 + var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-size-default) + ); } :host([side-label]) .label { - flex-grow: 0; - margin-block-end: 0; - margin-inline-end: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + flex-grow: 0; + margin-block-end: 0; + margin-inline-end: var( + --mod-progressbar-spacing-label-to-text, + var(--spectrum-progressbar-spacing-label-to-text) + ); } :host([side-label]) .percentage { - text-align: end; - order: 3; - margin-block-end: 0; - margin-inline-start: var( - --mod-spacing-progressbar-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + text-align: end; + order: 3; + margin-block-end: 0; + margin-inline-start: var( + --mod-spacing-progressbar-label-to-text, + var(--spectrum-progressbar-spacing-label-to-text) + ); } -:host([static-color='white']) .fill { - background: var( - --mod-progressbar-fill-color-white, - var(--spectrum-progressbar-fill-color-white) - ); +:host([static-color="white"]) .fill { + background: var( + --mod-progressbar-fill-color-white, + var(--spectrum-progressbar-fill-color-white) + ); } -:host([static-color='white']) .fill, -:host([static-color='white']) .label, -:host([static-color='white']) .percentage { - color: var( - --mod-progressbar-label-and-value-white, - var(--spectrum-progressbar-label-and-value-white) - ); +:host([static-color="white"]) .fill, +:host([static-color="white"]) .label, +:host([static-color="white"]) .percentage { + color: var( + --mod-progressbar-label-and-value-white, + var(--spectrum-progressbar-label-and-value-white) + ); } -:host([static-color='white']) .track { - background: var(--spectrum-progressbar-track-color-white); +:host([static-color="white"]) .track { + background: var(--spectrum-progressbar-track-color-white); } @keyframes indeterminate-loop-ltr { - 0% { - transform: translate( - calc( - var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) - ) * -1 - ) - ); - } - - to { - transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) - ); - } + 0% { + transform: translate( + calc( + var( + --mod-progressbar-fill-size-indeterminate, + var(--spectrum-progressbar-fill-size-indeterminate) + ) * + -1 + ) + ); + } + + to { + transform: translate( + var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-size-default) + ) + ); + } } @keyframes indeterminate-loop-rtl { - 0% { - transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-fill-size-indeterminate) - ) - ); - } - - to { - transform: translate( - calc( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) * -1 - ) - ); - } + 0% { + transform: translate( + var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-fill-size-indeterminate) + ) + ); + } + + to { + transform: translate( + calc( + var( + --mod-progressbar-size-default, + var(--spectrum-progressbar-size-default) + ) * + -1 + ) + ); + } } @media (forced-colors: active) { - .track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - forced-color-adjust: none; - border: 1px solid ButtonText; - } + .track { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + forced-color-adjust: none; + border: 1px solid ButtonText; + } } diff --git a/packages/progress-circle/src/progress-circle-overrides.css b/packages/progress-circle/src/progress-circle-overrides.css index 3bc4f00712..15b60c02f2 100644 --- a/packages/progress-circle/src/progress-circle-overrides.css +++ b/packages/progress-circle/src/progress-circle-overrides.css @@ -12,37 +12,35 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-progress-circle-track-border-color: var( - --system-progress-circle-track-border-color - ); - --spectrum-progress-circle-fill-border-color: var( - --system-progress-circle-fill-border-color - ); - --spectrum-progress-circle-track-border-color-over-background: var( - --system-progress-circle-track-border-color-over-background - ); - --spectrum-progress-circle-fill-border-color-over-background: var( - --system-progress-circle-fill-border-color-over-background - ); - --spectrum-progress-circle-size: var(--system-progress-circle-size); - --spectrum-progress-circle-thickness: var( - --system-progress-circle-thickness - ); - --spectrum-progress-circle-track-border-style: var( - --system-progress-circle-track-border-style - ); + --spectrum-progress-circle-track-border-color: var( + --system-progress-circle-track-border-color + ); + --spectrum-progress-circle-fill-border-color: var( + --system-progress-circle-fill-border-color + ); + --spectrum-progress-circle-track-border-color-over-background: var( + --system-progress-circle-track-border-color-over-background + ); + --spectrum-progress-circle-fill-border-color-over-background: var( + --system-progress-circle-fill-border-color-over-background + ); + --spectrum-progress-circle-size: var(--system-progress-circle-size); + --spectrum-progress-circle-thickness: var(--system-progress-circle-thickness); + --spectrum-progress-circle-track-border-style: var( + --system-progress-circle-track-border-style + ); } -:host([size='s']) { - --spectrum-progress-circle-size: var(--system-progress-circle-small-size); - --spectrum-progress-circle-thickness: var( - --system-progress-circle-small-thickness - ); +:host([size="s"]) { + --spectrum-progress-circle-size: var(--system-progress-circle-small-size); + --spectrum-progress-circle-thickness: var( + --system-progress-circle-small-thickness + ); } -:host([size='l']) { - --spectrum-progress-circle-size: var(--system-progress-circle-large-size); - --spectrum-progress-circle-thickness: var( - --system-progress-circle-large-thickness - ); +:host([size="l"]) { + --spectrum-progress-circle-size: var(--system-progress-circle-large-size); + --spectrum-progress-circle-thickness: var( + --system-progress-circle-large-thickness + ); } diff --git a/packages/progress-circle/src/spectrum-progress-circle.css b/packages/progress-circle/src/spectrum-progress-circle.css index 1a56055ddd..cdb3b49adf 100644 --- a/packages/progress-circle/src/spectrum-progress-circle.css +++ b/packages/progress-circle/src/spectrum-progress-circle.css @@ -12,649 +12,649 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-progress-circle-fill-border-color: Highlight; - --highcontrast-progress-circle-fill-border-color-over-background: Highlight; - } - - .track { - --spectrum-progress-circle-track-border-style: double; - } + :host { + --highcontrast-progress-circle-fill-border-color: Highlight; + --highcontrast-progress-circle-fill-border-color-over-background: Highlight; + } + + .track { + --spectrum-progress-circle-track-border-style: double; + } } :host { - position: var(--mod-progress-circle-position, relative); - direction: ltr; - display: inline-block; - position: relative; - transform: translateZ(0); + position: var(--mod-progress-circle-position, relative); + direction: ltr; + display: inline-block; + position: relative; + transform: translateZ(0); } :host, .track { - inline-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - block-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); + inline-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + block-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); } .track { - box-sizing: border-box; - border-style: var( - --highcontrast-progress-circle-track-border-style, - var( - --mod-progress-circle-track-border-style, - var(--spectrum-progress-circle-track-border-style) - ) - ); - border-width: var( - --mod-progress-circle-thickness, - var(--spectrum-progress-circle-thickness) - ); - border-radius: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - border-color: var( - --mod-progress-circle-track-border-color, - var(--spectrum-progress-circle-track-border-color) - ); + box-sizing: border-box; + border-style: var( + --highcontrast-progress-circle-track-border-style, + var( + --mod-progress-circle-track-border-style, + var(--spectrum-progress-circle-track-border-style) + ) + ); + border-width: var( + --mod-progress-circle-thickness, + var(--spectrum-progress-circle-thickness) + ); + border-radius: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + border-color: var( + --mod-progress-circle-track-border-color, + var(--spectrum-progress-circle-track-border-color) + ); } .fills { - inline-size: 100%; - block-size: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } .fill { - box-sizing: border-box; - inline-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - block-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - border-style: solid; - border-width: var( - --mod-progress-circle-thickness, - var(--spectrum-progress-circle-thickness) - ); - border-radius: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - border-color: var( - --highcontrast-progress-circle-fill-border-color, - var( - --mod-progress-circle-fill-border-color, - var(--spectrum-progress-circle-fill-border-color) - ) - ); + box-sizing: border-box; + inline-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + block-size: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + border-style: solid; + border-width: var( + --mod-progress-circle-thickness, + var(--spectrum-progress-circle-thickness) + ); + border-radius: var( + --mod-progress-circle-size, + var(--spectrum-progress-circle-size) + ); + border-color: var( + --highcontrast-progress-circle-fill-border-color, + var( + --mod-progress-circle-fill-border-color, + var(--spectrum-progress-circle-fill-border-color) + ) + ); } -:host([static-color='white']) .track { - border-color: var( - --mod-progress-circle-track-border-color-over-background, - var(--spectrum-progress-circle-track-border-color-over-background) - ); +:host([static-color="white"]) .track { + border-color: var( + --mod-progress-circle-track-border-color-over-background, + var(--spectrum-progress-circle-track-border-color-over-background) + ); } -:host([static-color='white']) .fill { - border-color: var( - --highcontrast-progress-circle-fill-border-color-over-background, - var( - --mod-progress-circle-fill-border-color-over-background, - var(--spectrum-progress-circle-fill-border-color-over-background) - ) - ); +:host([static-color="white"]) .fill { + border-color: var( + --highcontrast-progress-circle-fill-border-color-over-background, + var( + --mod-progress-circle-fill-border-color-over-background, + var(--spectrum-progress-circle-fill-border-color-over-background) + ) + ); } .fillMask1, .fillMask2 { - inline-size: 50%; - block-size: 100%; - transform-origin: 100%; - position: absolute; - overflow: hidden; - transform: rotate(180deg); + inline-size: 50%; + block-size: 100%; + transform-origin: 100%; + position: absolute; + overflow: hidden; + transform: rotate(180deg); } .fillSubMask1, .fillSubMask2 { - inline-size: 100%; - block-size: 100%; - transform-origin: 100%; - overflow: hidden; - transform: rotate(-180deg); + inline-size: 100%; + block-size: 100%; + transform-origin: 100%; + overflow: hidden; + transform: rotate(-180deg); } .fillMask2 { - transform: rotate(0); + transform: rotate(0); } :host([indeterminate]) .fills { - will-change: transform; - transform-origin: center; - animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite - spectrum-fills-rotate; - transform: translateZ(0); + will-change: transform; + transform-origin: center; + animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite + spectrum-fills-rotate; + transform: translateZ(0); } :host([indeterminate]) .fillSubMask1 { - will-change: transform; - animation: 1s linear infinite spectrum-fill-mask-1; - transform: translateZ(0); + will-change: transform; + animation: 1s linear infinite spectrum-fill-mask-1; + transform: translateZ(0); } :host([indeterminate]) .fillSubMask2 { - will-change: transform; - animation: 1s linear infinite spectrum-fill-mask-2; - transform: translateZ(0); + will-change: transform; + animation: 1s linear infinite spectrum-fill-mask-2; + transform: translateZ(0); } .fill-submask-2 { - animation: 1s linear infinite spectrum-fill-mask-2; + animation: 1s linear infinite spectrum-fill-mask-2; } @keyframes spectrum-fill-mask-1 { - 0% { - transform: rotate(90deg); - } + 0% { + transform: rotate(90deg); + } - 1.69% { - transform: rotate(72.3deg); - } + 1.69% { + transform: rotate(72.3deg); + } - 3.39% { - transform: rotate(55.5deg); - } + 3.39% { + transform: rotate(55.5deg); + } - 5.08% { - transform: rotate(40.3deg); - } + 5.08% { + transform: rotate(40.3deg); + } - 6.78% { - transform: rotate(25deg); - } + 6.78% { + transform: rotate(25deg); + } - 8.47% { - transform: rotate(10.6deg); - } + 8.47% { + transform: rotate(10.6deg); + } - 10.17% { - transform: rotate(0); - } + 10.17% { + transform: rotate(0); + } - 11.86% { - transform: rotate(0); - } + 11.86% { + transform: rotate(0); + } - 13.56% { - transform: rotate(0); - } + 13.56% { + transform: rotate(0); + } - 15.25% { - transform: rotate(0); - } + 15.25% { + transform: rotate(0); + } - 16.95% { - transform: rotate(0); - } + 16.95% { + transform: rotate(0); + } - 18.64% { - transform: rotate(0); - } + 18.64% { + transform: rotate(0); + } - 20.34% { - transform: rotate(0); - } + 20.34% { + transform: rotate(0); + } - 22.03% { - transform: rotate(0); - } + 22.03% { + transform: rotate(0); + } - 23.73% { - transform: rotate(0); - } + 23.73% { + transform: rotate(0); + } - 25.42% { - transform: rotate(0); - } + 25.42% { + transform: rotate(0); + } - 27.12% { - transform: rotate(0); - } + 27.12% { + transform: rotate(0); + } - 28.81% { - transform: rotate(0); - } + 28.81% { + transform: rotate(0); + } - 30.51% { - transform: rotate(0); - } + 30.51% { + transform: rotate(0); + } - 32.2% { - transform: rotate(0); - } + 32.2% { + transform: rotate(0); + } - 33.9% { - transform: rotate(0); - } + 33.9% { + transform: rotate(0); + } - 35.59% { - transform: rotate(0); - } + 35.59% { + transform: rotate(0); + } - 37.29% { - transform: rotate(0); - } + 37.29% { + transform: rotate(0); + } - 38.98% { - transform: rotate(0); - } + 38.98% { + transform: rotate(0); + } - 40.68% { - transform: rotate(0); - } + 40.68% { + transform: rotate(0); + } - 42.37% { - transform: rotate(5.3deg); - } + 42.37% { + transform: rotate(5.3deg); + } - 44.07% { - transform: rotate(13.4deg); - } + 44.07% { + transform: rotate(13.4deg); + } - 45.76% { - transform: rotate(20.6deg); - } + 45.76% { + transform: rotate(20.6deg); + } - 47.46% { - transform: rotate(29deg); - } + 47.46% { + transform: rotate(29deg); + } - 49.15% { - transform: rotate(36.5deg); - } + 49.15% { + transform: rotate(36.5deg); + } - 50.85% { - transform: rotate(42.6deg); - } + 50.85% { + transform: rotate(42.6deg); + } - 52.54% { - transform: rotate(48.8deg); - } + 52.54% { + transform: rotate(48.8deg); + } - 54.24% { - transform: rotate(54.2deg); - } + 54.24% { + transform: rotate(54.2deg); + } - 55.93% { - transform: rotate(59.4deg); - } + 55.93% { + transform: rotate(59.4deg); + } - 57.63% { - transform: rotate(63.2deg); - } + 57.63% { + transform: rotate(63.2deg); + } - 59.32% { - transform: rotate(67.2deg); - } + 59.32% { + transform: rotate(67.2deg); + } - 61.02% { - transform: rotate(70.8deg); - } + 61.02% { + transform: rotate(70.8deg); + } - 62.71% { - transform: rotate(73.8deg); - } + 62.71% { + transform: rotate(73.8deg); + } - 64.41% { - transform: rotate(76.2deg); - } + 64.41% { + transform: rotate(76.2deg); + } - 66.1% { - transform: rotate(78.7deg); - } + 66.1% { + transform: rotate(78.7deg); + } - 67.8% { - transform: rotate(80.6deg); - } + 67.8% { + transform: rotate(80.6deg); + } - 69.49% { - transform: rotate(82.6deg); - } + 69.49% { + transform: rotate(82.6deg); + } - 71.19% { - transform: rotate(83.7deg); - } + 71.19% { + transform: rotate(83.7deg); + } - 72.88% { - transform: rotate(85deg); - } + 72.88% { + transform: rotate(85deg); + } - 74.58% { - transform: rotate(86.3deg); - } + 74.58% { + transform: rotate(86.3deg); + } - 76.27% { - transform: rotate(87deg); - } + 76.27% { + transform: rotate(87deg); + } - 77.97% { - transform: rotate(87.7deg); - } + 77.97% { + transform: rotate(87.7deg); + } - 79.66% { - transform: rotate(88.3deg); - } + 79.66% { + transform: rotate(88.3deg); + } - 81.36% { - transform: rotate(88.6deg); - } + 81.36% { + transform: rotate(88.6deg); + } - 83.05% { - transform: rotate(89.2deg); - } + 83.05% { + transform: rotate(89.2deg); + } - 84.75% { - transform: rotate(89.2deg); - } + 84.75% { + transform: rotate(89.2deg); + } - 86.44% { - transform: rotate(89.5deg); - } + 86.44% { + transform: rotate(89.5deg); + } - 88.14% { - transform: rotate(89.9deg); - } + 88.14% { + transform: rotate(89.9deg); + } - 89.83% { - transform: rotate(89.7deg); - } + 89.83% { + transform: rotate(89.7deg); + } - 91.53% { - transform: rotate(90.1deg); - } + 91.53% { + transform: rotate(90.1deg); + } - 93.22% { - transform: rotate(90.2deg); - } + 93.22% { + transform: rotate(90.2deg); + } - 94.92% { - transform: rotate(90.1deg); - } + 94.92% { + transform: rotate(90.1deg); + } - 96.61% { - transform: rotate(90deg); - } + 96.61% { + transform: rotate(90deg); + } - 98.31% { - transform: rotate(89.8deg); - } + 98.31% { + transform: rotate(89.8deg); + } - to { - transform: rotate(90deg); - } + to { + transform: rotate(90deg); + } } @keyframes spectrum-fill-mask-2 { - 0% { - transform: rotate(180deg); - } + 0% { + transform: rotate(180deg); + } - 1.69% { - transform: rotate(180deg); - } + 1.69% { + transform: rotate(180deg); + } - 3.39% { - transform: rotate(180deg); - } + 3.39% { + transform: rotate(180deg); + } - 5.08% { - transform: rotate(180deg); - } + 5.08% { + transform: rotate(180deg); + } - 6.78% { - transform: rotate(180deg); - } + 6.78% { + transform: rotate(180deg); + } - 8.47% { - transform: rotate(180deg); - } + 8.47% { + transform: rotate(180deg); + } - 10.17% { - transform: rotate(179.2deg); - } + 10.17% { + transform: rotate(179.2deg); + } - 11.86% { - transform: rotate(164deg); - } + 11.86% { + transform: rotate(164deg); + } - 13.56% { - transform: rotate(151.8deg); - } + 13.56% { + transform: rotate(151.8deg); + } - 15.25% { - transform: rotate(140.8deg); - } + 15.25% { + transform: rotate(140.8deg); + } - 16.95% { - transform: rotate(130.3deg); - } + 16.95% { + transform: rotate(130.3deg); + } - 18.64% { - transform: rotate(120.4deg); - } + 18.64% { + transform: rotate(120.4deg); + } - 20.34% { - transform: rotate(110.8deg); - } + 20.34% { + transform: rotate(110.8deg); + } - 22.03% { - transform: rotate(101.6deg); - } + 22.03% { + transform: rotate(101.6deg); + } - 23.73% { - transform: rotate(93.5deg); - } + 23.73% { + transform: rotate(93.5deg); + } - 25.42% { - transform: rotate(85.4deg); - } + 25.42% { + transform: rotate(85.4deg); + } - 27.12% { - transform: rotate(78.1deg); - } + 27.12% { + transform: rotate(78.1deg); + } - 28.81% { - transform: rotate(71.2deg); - } + 28.81% { + transform: rotate(71.2deg); + } - 30.51% { - transform: rotate(89.1deg); - } + 30.51% { + transform: rotate(89.1deg); + } - 32.2% { - transform: rotate(105.5deg); - } + 32.2% { + transform: rotate(105.5deg); + } - 33.9% { - transform: rotate(121.3deg); - } + 33.9% { + transform: rotate(121.3deg); + } - 35.59% { - transform: rotate(135.5deg); - } + 35.59% { + transform: rotate(135.5deg); + } - 37.29% { - transform: rotate(148.4deg); - } + 37.29% { + transform: rotate(148.4deg); + } - 38.98% { - transform: rotate(161deg); - } + 38.98% { + transform: rotate(161deg); + } - 40.68% { - transform: rotate(173.5deg); - } + 40.68% { + transform: rotate(173.5deg); + } - 42.37% { - transform: rotate(180deg); - } + 42.37% { + transform: rotate(180deg); + } - 44.07% { - transform: rotate(180deg); - } + 44.07% { + transform: rotate(180deg); + } - 45.76% { - transform: rotate(180deg); - } + 45.76% { + transform: rotate(180deg); + } - 47.46% { - transform: rotate(180deg); - } + 47.46% { + transform: rotate(180deg); + } - 49.15% { - transform: rotate(180deg); - } + 49.15% { + transform: rotate(180deg); + } - 50.85% { - transform: rotate(180deg); - } + 50.85% { + transform: rotate(180deg); + } - 52.54% { - transform: rotate(180deg); - } + 52.54% { + transform: rotate(180deg); + } - 54.24% { - transform: rotate(180deg); - } + 54.24% { + transform: rotate(180deg); + } - 55.93% { - transform: rotate(180deg); - } + 55.93% { + transform: rotate(180deg); + } - 57.63% { - transform: rotate(180deg); - } + 57.63% { + transform: rotate(180deg); + } - 59.32% { - transform: rotate(180deg); - } + 59.32% { + transform: rotate(180deg); + } - 61.02% { - transform: rotate(180deg); - } + 61.02% { + transform: rotate(180deg); + } - 62.71% { - transform: rotate(180deg); - } + 62.71% { + transform: rotate(180deg); + } - 64.41% { - transform: rotate(180deg); - } + 64.41% { + transform: rotate(180deg); + } - 66.1% { - transform: rotate(180deg); - } + 66.1% { + transform: rotate(180deg); + } - 67.8% { - transform: rotate(180deg); - } + 67.8% { + transform: rotate(180deg); + } - 69.49% { - transform: rotate(180deg); - } + 69.49% { + transform: rotate(180deg); + } - 71.19% { - transform: rotate(180deg); - } + 71.19% { + transform: rotate(180deg); + } - 72.88% { - transform: rotate(180deg); - } + 72.88% { + transform: rotate(180deg); + } - 74.58% { - transform: rotate(180deg); - } + 74.58% { + transform: rotate(180deg); + } - 76.27% { - transform: rotate(180deg); - } + 76.27% { + transform: rotate(180deg); + } - 77.97% { - transform: rotate(180deg); - } + 77.97% { + transform: rotate(180deg); + } - 79.66% { - transform: rotate(180deg); - } + 79.66% { + transform: rotate(180deg); + } - 81.36% { - transform: rotate(180deg); - } + 81.36% { + transform: rotate(180deg); + } - 83.05% { - transform: rotate(180deg); - } + 83.05% { + transform: rotate(180deg); + } - 84.75% { - transform: rotate(180deg); - } + 84.75% { + transform: rotate(180deg); + } - 86.44% { - transform: rotate(180deg); - } + 86.44% { + transform: rotate(180deg); + } - 88.14% { - transform: rotate(180deg); - } + 88.14% { + transform: rotate(180deg); + } - 89.83% { - transform: rotate(180deg); - } + 89.83% { + transform: rotate(180deg); + } - 91.53% { - transform: rotate(180deg); - } + 91.53% { + transform: rotate(180deg); + } - 93.22% { - transform: rotate(180deg); - } + 93.22% { + transform: rotate(180deg); + } - 94.92% { - transform: rotate(180deg); - } + 94.92% { + transform: rotate(180deg); + } - 96.61% { - transform: rotate(180deg); - } + 96.61% { + transform: rotate(180deg); + } - 98.31% { - transform: rotate(180deg); - } + 98.31% { + transform: rotate(180deg); + } - to { - transform: rotate(180deg); - } + to { + transform: rotate(180deg); + } } @keyframes spectrum-fills-rotate { - 0% { - transform: rotate(-90deg); - } + 0% { + transform: rotate(-90deg); + } - to { - transform: rotate(270deg); - } + to { + transform: rotate(270deg); + } } diff --git a/packages/radio/src/radio-overrides.css b/packages/radio/src/radio-overrides.css index ed45be6af0..3790c199b6 100644 --- a/packages/radio/src/radio-overrides.css +++ b/packages/radio/src/radio-overrides.css @@ -12,199 +12,181 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-radio-button-border-color-default: var( - --system-radio-button-border-color-default - ); - --spectrum-radio-button-border-color-hover: var( - --system-radio-button-border-color-hover - ); - --spectrum-radio-button-border-color-down: var( - --system-radio-button-border-color-down - ); - --spectrum-radio-button-border-color-focus: var( - --system-radio-button-border-color-focus - ); - --spectrum-radio-neutral-content-color: var( - --system-radio-neutral-content-color - ); - --spectrum-radio-neutral-content-color-hover: var( - --system-radio-neutral-content-color-hover - ); - --spectrum-radio-neutral-content-color-down: var( - --system-radio-neutral-content-color-down - ); - --spectrum-radio-neutral-content-color-focus: var( - --system-radio-neutral-content-color-focus - ); - --spectrum-radio-focus-indicator-thickness: var( - --system-radio-focus-indicator-thickness - ); - --spectrum-radio-focus-indicator-gap: var( - --system-radio-focus-indicator-gap - ); - --spectrum-radio-focus-indicator-color: var( - --system-radio-focus-indicator-color - ); - --spectrum-radio-disabled-content-color: var( - --system-radio-disabled-content-color - ); - --spectrum-radio-disabled-border-color: var( - --system-radio-disabled-border-color - ); - --spectrum-radio-emphasized-accent-color: var( - --system-radio-emphasized-accent-color - ); - --spectrum-radio-emphasized-accent-color-hover: var( - --system-radio-emphasized-accent-color-hover - ); - --spectrum-radio-emphasized-accent-color-down: var( - --system-radio-emphasized-accent-color-down - ); - --spectrum-radio-emphasized-accent-color-focus: var( - --system-radio-emphasized-accent-color-focus - ); - --spectrum-radio-border-width: var(--system-radio-border-width); - --spectrum-radio-button-background-color: var( - --system-radio-button-background-color - ); - --spectrum-radio-button-checked-border-color-default: var( - --system-radio-button-checked-border-color-default - ); - --spectrum-radio-button-checked-border-color-hover: var( - --system-radio-button-checked-border-color-hover - ); - --spectrum-radio-button-checked-border-color-down: var( - --system-radio-button-checked-border-color-down - ); - --spectrum-radio-button-checked-border-color-focus: var( - --system-radio-button-checked-border-color-focus - ); - --spectrum-radio-line-height: var(--system-radio-line-height); - --spectrum-radio-animation-duration: var(--system-radio-animation-duration); - --spectrum-radio-height: var(--system-radio-height); - --spectrum-radio-button-control-size: var( - --system-radio-button-control-size - ); - --spectrum-radio-text-to-control: var(--system-radio-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-font-size); + --spectrum-radio-button-border-color-default: var( + --system-radio-button-border-color-default + ); + --spectrum-radio-button-border-color-hover: var( + --system-radio-button-border-color-hover + ); + --spectrum-radio-button-border-color-down: var( + --system-radio-button-border-color-down + ); + --spectrum-radio-button-border-color-focus: var( + --system-radio-button-border-color-focus + ); + --spectrum-radio-neutral-content-color: var( + --system-radio-neutral-content-color + ); + --spectrum-radio-neutral-content-color-hover: var( + --system-radio-neutral-content-color-hover + ); + --spectrum-radio-neutral-content-color-down: var( + --system-radio-neutral-content-color-down + ); + --spectrum-radio-neutral-content-color-focus: var( + --system-radio-neutral-content-color-focus + ); + --spectrum-radio-focus-indicator-thickness: var( + --system-radio-focus-indicator-thickness + ); + --spectrum-radio-focus-indicator-gap: var(--system-radio-focus-indicator-gap); + --spectrum-radio-focus-indicator-color: var( + --system-radio-focus-indicator-color + ); + --spectrum-radio-disabled-content-color: var( + --system-radio-disabled-content-color + ); + --spectrum-radio-disabled-border-color: var( + --system-radio-disabled-border-color + ); + --spectrum-radio-emphasized-accent-color: var( + --system-radio-emphasized-accent-color + ); + --spectrum-radio-emphasized-accent-color-hover: var( + --system-radio-emphasized-accent-color-hover + ); + --spectrum-radio-emphasized-accent-color-down: var( + --system-radio-emphasized-accent-color-down + ); + --spectrum-radio-emphasized-accent-color-focus: var( + --system-radio-emphasized-accent-color-focus + ); + --spectrum-radio-border-width: var(--system-radio-border-width); + --spectrum-radio-button-background-color: var( + --system-radio-button-background-color + ); + --spectrum-radio-button-checked-border-color-default: var( + --system-radio-button-checked-border-color-default + ); + --spectrum-radio-button-checked-border-color-hover: var( + --system-radio-button-checked-border-color-hover + ); + --spectrum-radio-button-checked-border-color-down: var( + --system-radio-button-checked-border-color-down + ); + --spectrum-radio-button-checked-border-color-focus: var( + --system-radio-button-checked-border-color-focus + ); + --spectrum-radio-line-height: var(--system-radio-line-height); + --spectrum-radio-animation-duration: var(--system-radio-animation-duration); + --spectrum-radio-height: var(--system-radio-height); + --spectrum-radio-button-control-size: var(--system-radio-button-control-size); + --spectrum-radio-text-to-control: var(--system-radio-text-to-control); + --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-label-bottom-to-text + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-button-top-to-control + ); + --spectrum-radio-font-size: var(--system-radio-font-size); } :host(:lang(ja)) { - --spectrum-radio-line-height-cjk: var( - --system-radio-lang-ja-line-height-cjk - ); + --spectrum-radio-line-height-cjk: var(--system-radio-lang-ja-line-height-cjk); } :host(:lang(zh)) { - --spectrum-radio-line-height-cjk: var( - --system-radio-lang-zh-line-height-cjk - ); + --spectrum-radio-line-height-cjk: var(--system-radio-lang-zh-line-height-cjk); } :host(:lang(ko)) { - --spectrum-radio-line-height-cjk: var( - --system-radio-lang-ko-line-height-cjk - ); + --spectrum-radio-line-height-cjk: var(--system-radio-lang-ko-line-height-cjk); } :host { - --spectrum-radio-height: var(--system-radio-size-m-height); - --spectrum-radio-button-control-size: var( - --system-radio-size-m-button-control-size - ); - --spectrum-radio-text-to-control: var( - --system-radio-size-m-text-to-control - ); - --spectrum-radio-label-top-to-text: var( - --system-radio-size-m-label-top-to-text - ); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-m-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-size-m-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-size-m-font-size); + --spectrum-radio-height: var(--system-radio-size-m-height); + --spectrum-radio-button-control-size: var( + --system-radio-size-m-button-control-size + ); + --spectrum-radio-text-to-control: var(--system-radio-size-m-text-to-control); + --spectrum-radio-label-top-to-text: var( + --system-radio-size-m-label-top-to-text + ); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-size-m-label-bottom-to-text + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-size-m-button-top-to-control + ); + --spectrum-radio-font-size: var(--system-radio-size-m-font-size); } -:host([size='s']) { - --spectrum-radio-height: var(--system-radio-size-s-height); - --spectrum-radio-button-control-size: var( - --system-radio-size-s-button-control-size - ); - --spectrum-radio-text-to-control: var( - --system-radio-size-s-text-to-control - ); - --spectrum-radio-label-top-to-text: var( - --system-radio-size-s-label-top-to-text - ); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-s-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-size-s-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-size-s-font-size); +:host([size="s"]) { + --spectrum-radio-height: var(--system-radio-size-s-height); + --spectrum-radio-button-control-size: var( + --system-radio-size-s-button-control-size + ); + --spectrum-radio-text-to-control: var(--system-radio-size-s-text-to-control); + --spectrum-radio-label-top-to-text: var( + --system-radio-size-s-label-top-to-text + ); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-size-s-label-bottom-to-text + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-size-s-button-top-to-control + ); + --spectrum-radio-font-size: var(--system-radio-size-s-font-size); } -:host([size='l']) { - --spectrum-radio-height: var(--system-radio-size-l-height); - --spectrum-radio-button-control-size: var( - --system-radio-size-l-button-control-size - ); - --spectrum-radio-text-to-control: var( - --system-radio-size-l-text-to-control - ); - --spectrum-radio-label-top-to-text: var( - --system-radio-size-l-label-top-to-text - ); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-l-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-size-l-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-size-l-font-size); +:host([size="l"]) { + --spectrum-radio-height: var(--system-radio-size-l-height); + --spectrum-radio-button-control-size: var( + --system-radio-size-l-button-control-size + ); + --spectrum-radio-text-to-control: var(--system-radio-size-l-text-to-control); + --spectrum-radio-label-top-to-text: var( + --system-radio-size-l-label-top-to-text + ); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-size-l-label-bottom-to-text + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-size-l-button-top-to-control + ); + --spectrum-radio-font-size: var(--system-radio-size-l-font-size); } -:host([size='xl']) { - --spectrum-radio-height: var(--system-radio-size-xl-height); - --spectrum-radio-button-control-size: var( - --system-radio-size-xl-button-control-size - ); - --spectrum-radio-text-to-control: var( - --system-radio-size-xl-text-to-control - ); - --spectrum-radio-label-top-to-text: var( - --system-radio-size-xl-label-top-to-text - ); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-xl-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-size-xl-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-size-xl-font-size); +:host([size="xl"]) { + --spectrum-radio-height: var(--system-radio-size-xl-height); + --spectrum-radio-button-control-size: var( + --system-radio-size-xl-button-control-size + ); + --spectrum-radio-text-to-control: var(--system-radio-size-xl-text-to-control); + --spectrum-radio-label-top-to-text: var( + --system-radio-size-xl-label-top-to-text + ); + --spectrum-radio-label-bottom-to-text: var( + --system-radio-size-xl-label-bottom-to-text + ); + --spectrum-radio-button-top-to-control: var( + --system-radio-size-xl-button-top-to-control + ); + --spectrum-radio-font-size: var(--system-radio-size-xl-font-size); } :host([emphasized]) { - --spectrum-radio-button-checked-border-color-default: var( - --system-radio-emphasized-button-checked-border-color-default - ); - --spectrum-radio-button-checked-border-color-hover: var( - --system-radio-emphasized-button-checked-border-color-hover - ); - --spectrum-radio-button-checked-border-color-down: var( - --system-radio-emphasized-button-checked-border-color-down - ); - --spectrum-radio-button-checked-border-color-focus: var( - --system-radio-emphasized-button-checked-border-color-focus - ); + --spectrum-radio-button-checked-border-color-default: var( + --system-radio-emphasized-button-checked-border-color-default + ); + --spectrum-radio-button-checked-border-color-hover: var( + --system-radio-emphasized-button-checked-border-color-hover + ); + --spectrum-radio-button-checked-border-color-down: var( + --system-radio-emphasized-button-checked-border-color-down + ); + --spectrum-radio-button-checked-border-color-focus: var( + --system-radio-emphasized-button-checked-border-color-focus + ); } diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index 00c7ce3b70..61d028a8de 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -12,433 +12,427 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-radio-neutral-content-color: CanvasText; - --highcontrast-radio-neutral-content-color-hover: CanvasText; - --highcontrast-radio-neutral-content-color-down: CanvasText; - --highcontrast-radio-neutral-content-color-focus: CanvasText; - --highcontrast-radio-button-border-color-default: ButtonText; - --highcontrast-radio-button-border-color-hover: Highlight; - --highcontrast-radio-button-border-color-down: ButtonText; - --highcontrast-radio-button-border-color-focus: Highlight; - --highcontrast-radio-emphasized-accent-color: ButtonText; - --highcontrast-radio-emphasized-accent-color-hover: Highlight; - --highcontrast-radio-emphasized-accent-color-down: ButtonText; - --highcontrast-radio-emphasized-accent-color-focus: Highlight; - --highcontrast-radio-button-checked-border-color-default: Highlight; - --highcontrast-radio-button-checked-border-color-hover: Highlight; - --highcontrast-radio-button-checked-border-color-down: Highlight; - --highcontrast-radio-button-checked-border-color-focus: Highlight; - --highcontrast-radio-disabled-content-color: GrayText; - --highcontrast-radio-disabled-border-color: GrayText; - --highcontrast-radio-focus-indicator-color: CanvasText; - } - - #button:after { - forced-color-adjust: none; - } + :host { + --highcontrast-radio-neutral-content-color: CanvasText; + --highcontrast-radio-neutral-content-color-hover: CanvasText; + --highcontrast-radio-neutral-content-color-down: CanvasText; + --highcontrast-radio-neutral-content-color-focus: CanvasText; + --highcontrast-radio-button-border-color-default: ButtonText; + --highcontrast-radio-button-border-color-hover: Highlight; + --highcontrast-radio-button-border-color-down: ButtonText; + --highcontrast-radio-button-border-color-focus: Highlight; + --highcontrast-radio-emphasized-accent-color: ButtonText; + --highcontrast-radio-emphasized-accent-color-hover: Highlight; + --highcontrast-radio-emphasized-accent-color-down: ButtonText; + --highcontrast-radio-emphasized-accent-color-focus: Highlight; + --highcontrast-radio-button-checked-border-color-default: Highlight; + --highcontrast-radio-button-checked-border-color-hover: Highlight; + --highcontrast-radio-button-checked-border-color-down: Highlight; + --highcontrast-radio-button-checked-border-color-focus: Highlight; + --highcontrast-radio-disabled-content-color: GrayText; + --highcontrast-radio-disabled-border-color: GrayText; + --highcontrast-radio-focus-indicator-color: CanvasText; + } + + #button:after { + forced-color-adjust: none; + } } :host { - vertical-align: top; - min-block-size: var(--mod-radio-height, var(--spectrum-radio-height)); - max-inline-size: 100%; - align-items: flex-start; - display: inline-flex; - position: relative; + vertical-align: top; + min-block-size: var(--mod-radio-height, var(--spectrum-radio-height)); + max-inline-size: 100%; + align-items: flex-start; + display: inline-flex; + position: relative; } :host(:active) #button:before { - border-color: var( - --highcontrast-radio-button-border-color-down, - var( - --mod-radio-button-border-color-down, - var(--spectrum-radio-button-border-color-down) - ) - ); + border-color: var( + --highcontrast-radio-button-border-color-down, + var( + --mod-radio-button-border-color-down, + var(--spectrum-radio-button-border-color-down) + ) + ); } :host(:active[checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-button-checked-border-color-down, - var( - --mod-radio-button-checked-border-color-down, - var(--spectrum-radio-button-checked-border-color-down) - ) - ); + border-color: var( + --highcontrast-radio-button-checked-border-color-down, + var( + --mod-radio-button-checked-border-color-down, + var(--spectrum-radio-button-checked-border-color-down) + ) + ); } :host(:active) #label { - color: var( - --highcontrast-radio-neutral-content-color-down, - var( - --mod-radio-neutral-content-color-down, - var(--spectrum-radio-neutral-content-color-down) - ) - ); + color: var( + --highcontrast-radio-neutral-content-color-down, + var( + --mod-radio-neutral-content-color-down, + var(--spectrum-radio-neutral-content-color-down) + ) + ); } :host(:focus-visible) #button:before { - border-color: var( - --highcontrast-radio-button-border-color-focus, - var( - --mod-radio-button-border-color-focus, - var(--spectrum-radio-button-border-color-focus) - ) - ); + border-color: var( + --highcontrast-radio-button-border-color-focus, + var( + --mod-radio-button-border-color-focus, + var(--spectrum-radio-button-border-color-focus) + ) + ); } :host(:focus-visible) #button:after { - border-style: solid; - border-color: var( - --highcontrast-radio-focus-indicator-color, - var( - --mod-radio-focus-indicator-color, - var(--spectrum-radio-focus-indicator-color) - ) - ); - border-width: var( - --mod-radio-focus-indicator-thickness, - var(--spectrum-radio-focus-indicator-thickness) - ); - inline-size: calc( - var(--spectrum-radio-button-control-size) + - var(--spectrum-radio-focus-indicator-gap) * 2 - ); - block-size: calc( - var(--spectrum-radio-button-control-size) + - var(--spectrum-radio-focus-indicator-gap) * 2 - ); + border-style: solid; + border-color: var( + --highcontrast-radio-focus-indicator-color, + var( + --mod-radio-focus-indicator-color, + var(--spectrum-radio-focus-indicator-color) + ) + ); + border-width: var( + --mod-radio-focus-indicator-thickness, + var(--spectrum-radio-focus-indicator-thickness) + ); + inline-size: calc( + var(--spectrum-radio-button-control-size) + + var(--spectrum-radio-focus-indicator-gap) * 2 + ); + block-size: calc( + var(--spectrum-radio-button-control-size) + + var(--spectrum-radio-focus-indicator-gap) * 2 + ); } :host(:focus-visible[checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-button-checked-border-color-focus, - var( - --mod-radio-button-checked-border-color-focus, - var(--spectrum-radio-button-checked-border-color-focus) - ) - ); + border-color: var( + --highcontrast-radio-button-checked-border-color-focus, + var( + --mod-radio-button-checked-border-color-focus, + var(--spectrum-radio-button-checked-border-color-focus) + ) + ); } :host(:focus-visible) #label { - color: var( - --highcontrast-radio-neutral-content-color-focus, - var( - --mod-radio-neutral-content-color-focus, - var(--spectrum-radio-neutral-content-color-focus) - ) - ); + color: var( + --highcontrast-radio-neutral-content-color-focus, + var( + --mod-radio-neutral-content-color-focus, + var(--spectrum-radio-neutral-content-color-focus) + ) + ); } :host([readonly]) #input:read-only { - cursor: auto; + cursor: auto; } :host([readonly]) #button { - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - position: fixed; - inset-block-end: 100%; - inset-inline-end: 100%; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + position: fixed; + inset-block-end: 100%; + inset-inline-end: 100%; } :host([readonly][checked][disabled]) #input ~ #label, :host([readonly][disabled]) #input ~ #label, :host([readonly]) #label { - color: var( - --highcontrast-radio-neutral-content-color, - var( - --mod-radio-neutral-content-color, - var(--spectrum-radio-neutral-content-color) - ) - ); - margin-inline-start: 0; + color: var( + --highcontrast-radio-neutral-content-color, + var( + --mod-radio-neutral-content-color, + var(--spectrum-radio-neutral-content-color) + ) + ); + margin-inline-start: 0; } :host([emphasized][checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-emphasized-accent-color, - var( - --mod-radio-emphasized-accent-color, - var(--spectrum-radio-emphasized-accent-color) - ) - ); + border-color: var( + --highcontrast-radio-emphasized-accent-color, + var( + --mod-radio-emphasized-accent-color, + var(--spectrum-radio-emphasized-accent-color) + ) + ); } @media (hover: hover) { - :host(:hover) #button:before { - border-color: var( - --highcontrast-radio-button-border-color-hover, - var( - --mod-radio-button-border-color-hover, - var(--spectrum-radio-button-border-color-hover) - ) - ); - } - - :host([checked]:hover) #input + #button:before { - border-color: var( - --highcontrast-radio-button-checked-border-color-hover, - var( - --mod-radio-button-checked-border-color-hover, - var(--spectrum-radio-button-checked-border-color-hover) - ) - ); - } - - :host(:hover) #label { - color: var( - --highcontrast-radio-neutral-content-color-hover, - var( - --mod-radio-neutral-content-color-hover, - var(--spectrum-radio-neutral-content-color-hover) - ) - ); - } - - :host([emphasized][checked]:hover) #input + #button:before { - border-color: var( - --highcontrast-radio-emphasized-accent-color-hover, - var( - --mod-radio-emphasized-accent-color-hover, - var(--spectrum-radio-emphasized-accent-color-hover) - ) - ); - } + :host(:hover) #button:before { + border-color: var( + --highcontrast-radio-button-border-color-hover, + var( + --mod-radio-button-border-color-hover, + var(--spectrum-radio-button-border-color-hover) + ) + ); + } + + :host([checked]:hover) #input + #button:before { + border-color: var( + --highcontrast-radio-button-checked-border-color-hover, + var( + --mod-radio-button-checked-border-color-hover, + var(--spectrum-radio-button-checked-border-color-hover) + ) + ); + } + + :host(:hover) #label { + color: var( + --highcontrast-radio-neutral-content-color-hover, + var( + --mod-radio-neutral-content-color-hover, + var(--spectrum-radio-neutral-content-color-hover) + ) + ); + } + + :host([emphasized][checked]:hover) #input + #button:before { + border-color: var( + --highcontrast-radio-emphasized-accent-color-hover, + var( + --mod-radio-emphasized-accent-color-hover, + var(--spectrum-radio-emphasized-accent-color-hover) + ) + ); + } } :host([emphasized]:active[checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-emphasized-accent-color-down, - var( - --mod-radio-emphasized-accent-color-down, - var(--spectrum-radio-emphasized-accent-color-down) - ) - ); + border-color: var( + --highcontrast-radio-emphasized-accent-color-down, + var( + --mod-radio-emphasized-accent-color-down, + var(--spectrum-radio-emphasized-accent-color-down) + ) + ); } :host([emphasized]:focus-visible[checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-emphasized-accent-color-focus, - var( - --mod-radio-emphasized-accent-color-focus, - var(--spectrum-radio-emphasized-accent-color-focus) - ) - ); + border-color: var( + --highcontrast-radio-emphasized-accent-color-focus, + var( + --mod-radio-emphasized-accent-color-focus, + var(--spectrum-radio-emphasized-accent-color-focus) + ) + ); } :host([checked][disabled]) #input + #button:before, :host([disabled]) #input + #button:before { - border-color: var( - --highcontrast-radio-disabled-border-color, - var( - --mod-radio-disabled-border-color, - var(--spectrum-radio-disabled-border-color) - ) - ); + border-color: var( + --highcontrast-radio-disabled-border-color, + var( + --mod-radio-disabled-border-color, + var(--spectrum-radio-disabled-border-color) + ) + ); } :host([checked][disabled]) #input ~ #label, :host([disabled]) #input ~ #label { - color: var( - --highcontrast-radio-disabled-content-color, - var( - --mod-radio-disabled-content-color, - var(--spectrum-radio-disabled-content-color) - ) - ); + color: var( + --highcontrast-radio-disabled-content-color, + var( + --mod-radio-disabled-content-color, + var(--spectrum-radio-disabled-content-color) + ) + ); } #input { - font-family: inherit; - font-size: 100%; - line-height: var( - --mod-radio-line-height, - var(--spectrum-radio-line-height) - ); - box-sizing: border-box; - inline-size: 100%; - block-size: 100%; - opacity: 0; - z-index: 1; - cursor: pointer; - margin: 0; - padding: 0; - position: absolute; - overflow: visible; + font-family: inherit; + font-size: 100%; + line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); + box-sizing: border-box; + inline-size: 100%; + block-size: 100%; + opacity: 0; + z-index: 1; + cursor: pointer; + margin: 0; + padding: 0; + position: absolute; + overflow: visible; } :host([disabled]) #input { - cursor: default; + cursor: default; } :host([checked]) #input + #button:before { - border-width: calc( - var(--spectrum-radio-button-control-size) / 2 - - var(--spectrum-radio-button-selection-indicator) / 2 - ); - border-color: var( - --highcontrast-radio-button-checked-border-color-default, - var( - --mod-radio-button-checked-border-color-default, - var(--spectrum-radio-button-checked-border-color-default) - ) - ); + border-width: calc( + var(--spectrum-radio-button-control-size) / 2 - + var(--spectrum-radio-button-selection-indicator) / 2 + ); + border-color: var( + --highcontrast-radio-button-checked-border-color-default, + var( + --mod-radio-button-checked-border-color-default, + var(--spectrum-radio-button-checked-border-color-default) + ) + ); } #input:focus-visible + #button:after { - border-width: var( - --mod-radio-focus-indicator-thickness, - var(--spectrum-radio-focus-indicator-thickness) - ); - border-color: var( - --highcontrast-radio-focus-indicator-color, - var( - --mod-radio-focus-indicator-color, - var(--spectrum-radio-focus-indicator-color) - ) - ); - inline-size: calc( - var(--spectrum-radio-button-control-size) + - var(--spectrum-radio-focus-indicator-gap) * 2 - ); - block-size: calc( - var(--spectrum-radio-button-control-size) + - var(--spectrum-radio-focus-indicator-gap) * 2 - ); - border-style: solid; + border-width: var( + --mod-radio-focus-indicator-thickness, + var(--spectrum-radio-focus-indicator-thickness) + ); + border-color: var( + --highcontrast-radio-focus-indicator-color, + var( + --mod-radio-focus-indicator-color, + var(--spectrum-radio-focus-indicator-color) + ) + ); + inline-size: calc( + var(--spectrum-radio-button-control-size) + + var(--spectrum-radio-focus-indicator-gap) * 2 + ); + block-size: calc( + var(--spectrum-radio-button-control-size) + + var(--spectrum-radio-focus-indicator-gap) * 2 + ); + border-style: solid; } #label { - text-align: start; - font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size)); - color: var( - --highcontrast-radio-neutral-content-color, - var( - --mod-radio-neutral-content-color, - var(--spectrum-radio-neutral-content-color) - ) - ); - line-height: var( - --mod-radio-line-height, - var(--spectrum-radio-line-height) - ); - transition: color - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-in-out; - margin-block-start: var(--spectrum-radio-label-top-to-text); - margin-block-end: var(--spectrum-radio-label-bottom-to-text); - margin-inline-start: var( - --mod-radio-text-to-control, - var(--spectrum-radio-text-to-control) - ); + text-align: start; + font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size)); + color: var( + --highcontrast-radio-neutral-content-color, + var( + --mod-radio-neutral-content-color, + var(--spectrum-radio-neutral-content-color) + ) + ); + line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); + transition: color + var( + --mod-radio-animation-duration, + var(--spectrum-radio-animation-duration) + ) + ease-in-out; + margin-block-start: var(--spectrum-radio-label-top-to-text); + margin-block-end: var(--spectrum-radio-label-bottom-to-text); + margin-inline-start: var( + --mod-radio-text-to-control, + var(--spectrum-radio-text-to-control) + ); } #label:lang(ja), #label:lang(ko), #label:lang(zh) { - line-height: var( - --mod-radio-line-height-cjk, - var(--spectrum-radio-line-height-cjk) - ); + line-height: var( + --mod-radio-line-height-cjk, + var(--spectrum-radio-line-height-cjk) + ); } #button { - box-sizing: border-box; - inline-size: var( - --mod-radio-button-control-size, - var(--spectrum-radio-button-control-size) - ); - block-size: var( - --mod-radio-button-control-size, - var(--spectrum-radio-button-control-size) - ); - flex-grow: 0; - flex-shrink: 0; - margin-block-start: var( - --mod-radio-button-top-to-control, - var(--spectrum-radio-button-top-to-control) - ); - position: relative; + box-sizing: border-box; + inline-size: var( + --mod-radio-button-control-size, + var(--spectrum-radio-button-control-size) + ); + block-size: var( + --mod-radio-button-control-size, + var(--spectrum-radio-button-control-size) + ); + flex-grow: 0; + flex-shrink: 0; + margin-block-start: var( + --mod-radio-button-top-to-control, + var(--spectrum-radio-button-top-to-control) + ); + position: relative; } #button:before { - z-index: 0; - content: ''; - box-sizing: border-box; - inline-size: var( - --mod-radio-button-control-size, - var(--spectrum-radio-button-control-size) - ); - block-size: var( - --mod-radio-button-control-size, - var(--spectrum-radio-button-control-size) - ); - background-color: var( - --highcontrast-radio-button-background-color, - var( - --mod-radio-button-background-color, - var(--spectrum-radio-button-background-color) - ) - ); - border-width: var( - --mod-radio-border-width, - var(--spectrum-radio-border-width) - ); - border-color: var( - --highcontrast-radio-button-border-color-default, - var( - --mod-radio-button-border-color-default, - var(--spectrum-radio-button-border-color-default) - ) - ); - transition: - border - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-in-out, - box-shadow - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-in-out; - border-style: solid; - border-radius: 50%; - display: block; - position: absolute; + z-index: 0; + content: ""; + box-sizing: border-box; + inline-size: var( + --mod-radio-button-control-size, + var(--spectrum-radio-button-control-size) + ); + block-size: var( + --mod-radio-button-control-size, + var(--spectrum-radio-button-control-size) + ); + background-color: var( + --highcontrast-radio-button-background-color, + var( + --mod-radio-button-background-color, + var(--spectrum-radio-button-background-color) + ) + ); + border-width: var( + --mod-radio-border-width, + var(--spectrum-radio-border-width) + ); + border-color: var( + --highcontrast-radio-button-border-color-default, + var( + --mod-radio-button-border-color-default, + var(--spectrum-radio-button-border-color-default) + ) + ); + transition: + border + var( + --mod-radio-animation-duration, + var(--spectrum-radio-animation-duration) + ) + ease-in-out, + box-shadow + var( + --mod-radio-animation-duration, + var(--spectrum-radio-animation-duration) + ) + ease-in-out; + border-style: solid; + border-radius: 50%; + display: block; + position: absolute; } #button:after { - content: ''; - transition: - opacity - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-out, - margin - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-out; - border-radius: 50%; - display: block; - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translateX(-50%) translateY(-50%); + content: ""; + transition: + opacity + var( + --mod-radio-animation-duration, + var(--spectrum-radio-animation-duration) + ) + ease-out, + margin + var( + --mod-radio-animation-duration, + var(--spectrum-radio-animation-duration) + ) + ease-out; + border-radius: 50%; + display: block; + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translateX(-50%) translateY(-50%); } :host:dir(rtl) #button:after, -:host([dir='rtl']) #button:after { - transform: translateX(50%) translateY(-50%); +:host([dir="rtl"]) #button:after { + transform: translateX(50%) translateY(-50%); } diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css index d5d425a56d..ae68ab72ac 100644 --- a/packages/search/src/search-overrides.css +++ b/packages/search/src/search-overrides.css @@ -12,112 +12,100 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-search-border-color-default: var( - --system-search-border-color-default - ); - --spectrum-search-border-color-hover: var( - --system-search-border-color-hover - ); - --spectrum-search-border-color-focus: var( - --system-search-border-color-focus - ); - --spectrum-search-border-color-focus-hover: var( - --system-search-border-color-focus-hover - ); - --spectrum-search-border-color-key-focus: var( - --system-search-border-color-key-focus - ); - --spectrum-search-inline-size: var(--system-search-inline-size); - --spectrum-search-min-inline-multiplier: var( - --system-search-min-inline-multiplier - ); - --spectrum-search-to-help-text: var(--system-search-to-help-text); - --spectrum-search-top-to-text: var(--system-search-top-to-text); - --spectrum-search-bottom-to-text: var(--system-search-bottom-to-text); - --spectrum-search-focus-indicator-thickness: var( - --system-search-focus-indicator-thickness - ); - --spectrum-search-focus-indicator-gap: var( - --system-search-focus-indicator-gap - ); - --spectrum-search-focus-indicator-color: var( - --system-search-focus-indicator-color - ); - --spectrum-search-font-family: var(--system-search-font-family); - --spectrum-search-font-weight: var(--system-search-font-weight); - --spectrum-search-font-style: var(--system-search-font-style); - --spectrum-search-line-height: var(--system-search-line-height); - --spectrum-search-color-default: var(--system-search-color-default); - --spectrum-search-color-hover: var(--system-search-color-hover); - --spectrum-search-color-focus: var(--system-search-color-focus); - --spectrum-search-color-focus-hover: var(--system-search-color-focus-hover); - --spectrum-search-color-key-focus: var(--system-search-color-key-focus); - --spectrum-search-border-width: var(--system-search-border-width); - --spectrum-search-background-color: var(--system-search-background-color); - --spectrum-search-color-disabled: var(--system-search-color-disabled); - --spectrum-search-background-color-disabled: var( - --system-search-background-color-disabled - ); - --spectrum-search-border-color-disabled: var( - --system-search-border-color-disabled - ); - --spectrum-search-border-radius: var(--system-search-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-edge-to-visual); - --spectrum-search-block-size: var(--system-search-block-size); - --spectrum-search-icon-size: var(--system-search-icon-size); - --spectrum-search-text-to-icon: var(--system-search-text-to-icon); + --spectrum-search-border-color-default: var( + --system-search-border-color-default + ); + --spectrum-search-border-color-hover: var(--system-search-border-color-hover); + --spectrum-search-border-color-focus: var(--system-search-border-color-focus); + --spectrum-search-border-color-focus-hover: var( + --system-search-border-color-focus-hover + ); + --spectrum-search-border-color-key-focus: var( + --system-search-border-color-key-focus + ); + --spectrum-search-inline-size: var(--system-search-inline-size); + --spectrum-search-min-inline-multiplier: var( + --system-search-min-inline-multiplier + ); + --spectrum-search-to-help-text: var(--system-search-to-help-text); + --spectrum-search-top-to-text: var(--system-search-top-to-text); + --spectrum-search-bottom-to-text: var(--system-search-bottom-to-text); + --spectrum-search-focus-indicator-thickness: var( + --system-search-focus-indicator-thickness + ); + --spectrum-search-focus-indicator-gap: var( + --system-search-focus-indicator-gap + ); + --spectrum-search-focus-indicator-color: var( + --system-search-focus-indicator-color + ); + --spectrum-search-font-family: var(--system-search-font-family); + --spectrum-search-font-weight: var(--system-search-font-weight); + --spectrum-search-font-style: var(--system-search-font-style); + --spectrum-search-line-height: var(--system-search-line-height); + --spectrum-search-color-default: var(--system-search-color-default); + --spectrum-search-color-hover: var(--system-search-color-hover); + --spectrum-search-color-focus: var(--system-search-color-focus); + --spectrum-search-color-focus-hover: var(--system-search-color-focus-hover); + --spectrum-search-color-key-focus: var(--system-search-color-key-focus); + --spectrum-search-border-width: var(--system-search-border-width); + --spectrum-search-background-color: var(--system-search-background-color); + --spectrum-search-color-disabled: var(--system-search-color-disabled); + --spectrum-search-background-color-disabled: var( + --system-search-background-color-disabled + ); + --spectrum-search-border-color-disabled: var( + --system-search-border-color-disabled + ); + --spectrum-search-border-radius: var(--system-search-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-edge-to-visual); + --spectrum-search-block-size: var(--system-search-block-size); + --spectrum-search-icon-size: var(--system-search-icon-size); + --spectrum-search-text-to-icon: var(--system-search-text-to-icon); } -:host([size='m']) #textfield { - --spectrum-search-border-radius: var(--system-search-size-m-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-m-edge-to-visual - ); - --spectrum-search-block-size: var(--system-search-size-m-block-size); - --spectrum-search-icon-size: var(--system-search-size-m-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-m-text-to-icon); +:host([size="m"]) #textfield { + --spectrum-search-border-radius: var(--system-search-size-m-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-size-m-edge-to-visual); + --spectrum-search-block-size: var(--system-search-size-m-block-size); + --spectrum-search-icon-size: var(--system-search-size-m-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-m-text-to-icon); } -: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 - ); - --spectrum-search-block-size: var(--system-search-size-s-block-size); - --spectrum-search-icon-size: var(--system-search-size-s-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-s-text-to-icon); +: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); + --spectrum-search-block-size: var(--system-search-size-s-block-size); + --spectrum-search-icon-size: var(--system-search-size-s-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-s-text-to-icon); } -:host([size='l']) #textfield { - --spectrum-search-border-radius: var(--system-search-size-l-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-l-edge-to-visual - ); - --spectrum-search-block-size: var(--system-search-size-l-block-size); - --spectrum-search-icon-size: var(--system-search-size-l-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-l-text-to-icon); +:host([size="l"]) #textfield { + --spectrum-search-border-radius: var(--system-search-size-l-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-size-l-edge-to-visual); + --spectrum-search-block-size: var(--system-search-size-l-block-size); + --spectrum-search-icon-size: var(--system-search-size-l-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-l-text-to-icon); } -:host([size='xl']) #textfield { - --spectrum-search-border-radius: var(--system-search-size-xl-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-xl-edge-to-visual - ); - --spectrum-search-block-size: var(--system-search-size-xl-block-size); - --spectrum-search-icon-size: var(--system-search-size-xl-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-xl-text-to-icon); +:host([size="xl"]) #textfield { + --spectrum-search-border-radius: var(--system-search-size-xl-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-size-xl-edge-to-visual); + --spectrum-search-block-size: var(--system-search-size-xl-block-size); + --spectrum-search-icon-size: var(--system-search-size-xl-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-xl-text-to-icon); } :host([quiet]) { - --spectrum-search-background-color: var( - --system-search-quiet-background-color - ); - --spectrum-search-background-color-disabled: var( - --system-search-quiet-background-color-disabled - ); - --spectrum-search-border-color-disabled: var( - --system-search-quiet-border-color-disabled - ); - --spectrum-search-border-radius: var(--system-search-quiet-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-quiet-edge-to-visual); + --spectrum-search-background-color: var( + --system-search-quiet-background-color + ); + --spectrum-search-background-color-disabled: var( + --system-search-quiet-background-color-disabled + ); + --spectrum-search-border-color-disabled: var( + --system-search-quiet-border-color-disabled + ); + --spectrum-search-border-radius: var(--system-search-quiet-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-quiet-edge-to-visual); } diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css index 964aed202b..e4a6171d9f 100644 --- a/packages/search/src/spectrum-search.css +++ b/packages/search/src/spectrum-search.css @@ -12,295 +12,289 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - #textfield #textfield, - #textfield #textfield .input { - --highcontrast-search-color-default: CanvasText; - --highcontrast-search-color-hover: CanvasText; - --highcontrast-search-color-focus: CanvasText; - --highcontrast-search-color-disabled: GrayText; - } + #textfield #textfield, + #textfield #textfield .input { + --highcontrast-search-color-default: CanvasText; + --highcontrast-search-color-hover: CanvasText; + --highcontrast-search-color-focus: CanvasText; + --highcontrast-search-color-disabled: GrayText; + } - #textfield #button .spectrum-ClearButton-fill { - forced-color-adjust: none; - background-color: initial; - } + #textfield #button .spectrum-ClearButton-fill { + forced-color-adjust: none; + background-color: initial; + } } #textfield { - --spectrum-search-button-inline-size: var(--spectrum-search-block-size); - --spectrum-search-min-inline-size: calc( - var(--spectrum-search-min-inline-multiplier) * - var(--spectrum-search-block-size) - ); - --mod-textfield-font-family: var( - --mod-search-font-family, - var(--spectrum-search-font-family) - ); - --mod-textfield-font-weight: var( - --mod-search-font-weight, - var(--spectrum-search-font-weight) - ); - --mod-textfield-corner-radius: var( - --mod-search-border-radius, - var(--spectrum-search-border-radius) - ); - --mod-textfield-border-width: var( - --mod-search-border-width, - var(--spectrum-search-border-width) - ); - --mod-textfield-focus-indicator-gap: var( - --mod-search-focus-indicator-gap, - var(--spectrum-search-focus-indicator-gap) - ); - --mod-textfield-focus-indicator-width: var( - --mod-search-focus-indicator-thickness, - var(--spectrum-search-focus-indicator-thickness) - ); - --mod-textfield-focus-indicator-color: var( - --mod-search-focus-indicator-color, - var(--spectrum-search-focus-indicator-color) - ); - --mod-textfield-text-color-default: var( - --mod-search-color-default, - var(--spectrum-search-color-default) - ); - --mod-textfield-text-color-hover: var( - --mod-search-color-hover, - var(--spectrum-search-color-hover) - ); - --mod-textfield-text-color-focus: var( - --mod-search-color-focus, - var(--spectrum-search-color-focus) - ); - --mod-textfield-text-color-focus-hover: var( - --mod-search-color-focus-hover, - var(--spectrum-search-color-focus-hover) - ); - --mod-textfield-text-color-keyboard-focus: var( - --mod-search-color-key-focus, - var(--spectrum-search-color-key-focus) - ); - --mod-textfield-text-color-disabled: var( - --mod-search-color-disabled, - var(--spectrum-search-color-disabled) - ); - --mod-textfield-border-color: var( - --mod-search-border-color-default, - var(--spectrum-search-border-color-default) - ); - --mod-textfield-border-color-hover: var( - --mod-search-border-color-hover, - var(--spectrum-search-border-color-hover) - ); - --mod-textfield-border-color-focus: var( - --mod-search-border-color-focus, - var(--spectrum-search-border-color-focus) - ); - --mod-textfield-border-color-focus-hover: var( - --mod-search-border-color-focus-hover, - var(--spectrum-search-border-color-focus-hover) - ); - --mod-textfield-border-color-keyboard-focus: var( - --mod-search-border-color-key-focus, - var(--spectrum-search-border-color-key-focus) - ); - --mod-textfield-border-color-disabled: var( - --mod-search-border-color-disabled, - var(--spectrum-search-border-color-disabled) - ); - --mod-textfield-background-color: var( - --mod-search-background-color, - var(--spectrum-search-background-color) - ); - --mod-textfield-background-color-disabled: var( - --mod-search-background-color-disabled, - var(--spectrum-search-background-color-disabled) - ); - inline-size: var( - --mod-search-inline-size, - var(--spectrum-search-inline-size) - ); - min-inline-size: var( - --mod-search-min-inline-size, - var(--spectrum-search-min-inline-size) - ); - display: inline-block; - position: relative; + --spectrum-search-button-inline-size: var(--spectrum-search-block-size); + --spectrum-search-min-inline-size: calc( + var(--spectrum-search-min-inline-multiplier) * + var(--spectrum-search-block-size) + ); + --mod-textfield-font-family: var( + --mod-search-font-family, + var(--spectrum-search-font-family) + ); + --mod-textfield-font-weight: var( + --mod-search-font-weight, + var(--spectrum-search-font-weight) + ); + --mod-textfield-corner-radius: var( + --mod-search-border-radius, + var(--spectrum-search-border-radius) + ); + --mod-textfield-border-width: var( + --mod-search-border-width, + var(--spectrum-search-border-width) + ); + --mod-textfield-focus-indicator-gap: var( + --mod-search-focus-indicator-gap, + var(--spectrum-search-focus-indicator-gap) + ); + --mod-textfield-focus-indicator-width: var( + --mod-search-focus-indicator-thickness, + var(--spectrum-search-focus-indicator-thickness) + ); + --mod-textfield-focus-indicator-color: var( + --mod-search-focus-indicator-color, + var(--spectrum-search-focus-indicator-color) + ); + --mod-textfield-text-color-default: var( + --mod-search-color-default, + var(--spectrum-search-color-default) + ); + --mod-textfield-text-color-hover: var( + --mod-search-color-hover, + var(--spectrum-search-color-hover) + ); + --mod-textfield-text-color-focus: var( + --mod-search-color-focus, + var(--spectrum-search-color-focus) + ); + --mod-textfield-text-color-focus-hover: var( + --mod-search-color-focus-hover, + var(--spectrum-search-color-focus-hover) + ); + --mod-textfield-text-color-keyboard-focus: var( + --mod-search-color-key-focus, + var(--spectrum-search-color-key-focus) + ); + --mod-textfield-text-color-disabled: var( + --mod-search-color-disabled, + var(--spectrum-search-color-disabled) + ); + --mod-textfield-border-color: var( + --mod-search-border-color-default, + var(--spectrum-search-border-color-default) + ); + --mod-textfield-border-color-hover: var( + --mod-search-border-color-hover, + var(--spectrum-search-border-color-hover) + ); + --mod-textfield-border-color-focus: var( + --mod-search-border-color-focus, + var(--spectrum-search-border-color-focus) + ); + --mod-textfield-border-color-focus-hover: var( + --mod-search-border-color-focus-hover, + var(--spectrum-search-border-color-focus-hover) + ); + --mod-textfield-border-color-keyboard-focus: var( + --mod-search-border-color-key-focus, + var(--spectrum-search-border-color-key-focus) + ); + --mod-textfield-border-color-disabled: var( + --mod-search-border-color-disabled, + var(--spectrum-search-border-color-disabled) + ); + --mod-textfield-background-color: var( + --mod-search-background-color, + var(--spectrum-search-background-color) + ); + --mod-textfield-background-color-disabled: var( + --mod-search-background-color-disabled, + var(--spectrum-search-background-color-disabled) + ); + inline-size: var( + --mod-search-inline-size, + var(--spectrum-search-inline-size) + ); + min-inline-size: var( + --mod-search-min-inline-size, + var(--spectrum-search-min-inline-size) + ); + display: inline-block; + position: relative; } #textfield .spectrum-HelpText { - margin-block-start: var( - --mod-search-to-help-text, - var(--spectrum-search-to-help-text) - ); + margin-block-start: var( + --mod-search-to-help-text, + var(--spectrum-search-to-help-text) + ); } #button { - position: absolute; - inset-block-start: 0; - inset-inline-end: 0; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; } #button, #button .spectrum-ClearButton-fill { - border-radius: var( - --mod-search-border-radius, - var(--spectrum-search-border-radius) - ); + border-radius: var( + --mod-search-border-radius, + var(--spectrum-search-border-radius) + ); } #textfield.is-disabled #button { - display: none; + display: none; } #textfield { - inline-size: 100%; + inline-size: 100%; } .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-default, - var(--mod-search-color-default, var(--spectrum-search-color-default)) - ); - color: var(--spectrum-search-color); - margin-block: auto; - display: block; - position: absolute; - inset-block: 0; + --spectrum-search-color: var( + --highcontrast-search-color-default, + var(--mod-search-color-default, var(--spectrum-search-color-default)) + ); + color: var(--spectrum-search-color); + margin-block: auto; + display: block; + position: absolute; + inset-block: 0; } #textfield.is-focused .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-focus, - var(--mod-search-color-focus, var(--spectrum-search-color-focus)) - ); + --spectrum-search-color: var( + --highcontrast-search-color-focus, + var(--mod-search-color-focus, var(--spectrum-search-color-focus)) + ); } #textfield.is-keyboardFocused .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-focus, - var( - --mod-search-color-key-focus, - var(--spectrum-search-color-key-focus) - ) - ); + --spectrum-search-color: var( + --highcontrast-search-color-focus, + var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus)) + ); } #textfield.is-disabled .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-disabled, - var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)) - ); + --spectrum-search-color: var( + --highcontrast-search-color-disabled, + var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)) + ); } @media (hover: hover) { - #textfield:hover .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-hover, - var(--mod-search-color-hover, var(--spectrum-search-color-hover)) - ); - } + #textfield:hover .icon-search { + --spectrum-search-color: var( + --highcontrast-search-color-hover, + var(--mod-search-color-hover, var(--spectrum-search-color-hover)) + ); + } - #textfield.is-focused:hover .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-focus, - var( - --mod-search-color-focus-hover, - var(--spectrum-search-color-focus-hover) - ) - ); - } + #textfield.is-focused:hover .icon-search { + --spectrum-search-color: var( + --highcontrast-search-color-focus, + var( + --mod-search-color-focus-hover, + var(--spectrum-search-color-focus-hover) + ) + ); + } - #textfield.is-disabled:hover .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-disabled, - var( - --mod-search-color-disabled, - var(--spectrum-search-color-disabled) - ) - ); - } + #textfield.is-disabled:hover .icon-search { + --spectrum-search-color: var( + --highcontrast-search-color-disabled, + var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)) + ); + } } .input { - appearance: none; - block-size: var(--mod-search-block-size, var(--spectrum-search-block-size)); - font-style: var(--mod-search-font-style, var(--spectrum-search-font-style)); - line-height: var( - --mod-search-line-height, - var(--spectrum-search-line-height) - ); - padding-block-start: calc( - var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) - ); - padding-block-end: calc( - var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) - ); + appearance: none; + block-size: var(--mod-search-block-size, var(--spectrum-search-block-size)); + font-style: var(--mod-search-font-style, var(--spectrum-search-font-style)); + line-height: var( + --mod-search-line-height, + var(--spectrum-search-line-height) + ); + padding-block-start: calc( + var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - + var(--mod-search-border-width, var(--spectrum-search-border-width)) + ); + padding-block-end: calc( + var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - + var(--mod-search-border-width, var(--spectrum-search-border-width)) + ); } .input::-webkit-search-cancel-button, .input::-webkit-search-decoration { - appearance: none; + appearance: none; } :host(:not([quiet])) #textfield .icon-search { - inset-inline-start: var( - --mod-search-edge-to-visual, - var(--spectrum-search-edge-to-visual) - ); + inset-inline-start: var( + --mod-search-edge-to-visual, + var(--spectrum-search-edge-to-visual) + ); } :host(:not([quiet])) #textfield .input { - padding-inline-start: calc( - var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) + - var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + - var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) - ); - padding-inline-end: calc( - var( - --mod-search-button-inline-size, - var(--spectrum-search-button-inline-size) - ) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) - ); + padding-inline-start: calc( + var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - + var(--mod-search-border-width, var(--spectrum-search-border-width)) + + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) + ); + padding-inline-end: calc( + var( + --mod-search-button-inline-size, + var(--spectrum-search-button-inline-size) + ) - + var(--mod-search-border-width, var(--spectrum-search-border-width)) + ); } :host([quiet]) { - --spectrum-search-quiet-button-offset: var( - --mod-search-quiet-button-offset, - calc( - var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 - - var(--mod-search-icon-size, var(--spectrum-search-icon-size)) / - 2 - ) - ); + --spectrum-search-quiet-button-offset: var( + --mod-search-quiet-button-offset, + calc( + var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 - + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) / 2 + ) + ); } :host([quiet]) #button .spectrum-ClearButton-icon { - transform: translateX(var(--spectrum-search-quiet-button-offset)); + transform: translateX(var(--spectrum-search-quiet-button-offset)); } :host([quiet]) #textfield .input { - border-radius: var( - --mod-search-border-radius, - var(--spectrum-search-border-radius) - ); - padding-block-start: var( - --mod-search-top-to-text, - var(--spectrum-search-top-to-text) - ); - padding-inline-start: calc( - var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + - var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + - var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) - ); - padding-inline-end: calc( - var( - --mod-search-button-inline-size, - var(--spectrum-search-button-inline-size) - ) - var(--spectrum-search-quiet-button-offset) - ); + border-radius: var( + --mod-search-border-radius, + var(--spectrum-search-border-radius) + ); + padding-block-start: var( + --mod-search-top-to-text, + var(--spectrum-search-top-to-text) + ); + padding-inline-start: calc( + var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) + ); + padding-inline-end: calc( + var( + --mod-search-button-inline-size, + var(--spectrum-search-button-inline-size) + ) - + var(--spectrum-search-quiet-button-offset) + ); } diff --git a/packages/sidenav/src/sidenav-heading-overrides.css b/packages/sidenav/src/sidenav-heading-overrides.css index 67fdc46170..bdd1d8af59 100644 --- a/packages/sidenav/src/sidenav-heading-overrides.css +++ b/packages/sidenav/src/sidenav-heading-overrides.css @@ -12,171 +12,159 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #list { - --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); - --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); - --spectrum-sidenav-focus-ring-color: var( - --system-side-nav-focus-ring-color - ); - --spectrum-sidenav-min-height: var(--system-side-nav-min-height); - --spectrum-sidenav-width: var(--system-side-nav-width); - --spectrum-sidenav-min-width: var(--system-side-nav-min-width); - --spectrum-sidenav-max-width: var(--system-side-nav-max-width); - --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); - --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); - --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); - --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); - --spectrum-sidenav-gap: var(--system-side-nav-gap); - --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); - --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); - --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); - --spectrum-sidenav-start-to-content-second-level: var( - --system-side-nav-start-to-content-second-level - ); - --spectrum-sidenav-start-to-content-third-level: var( - --system-side-nav-start-to-content-third-level - ); - --spectrum-sidenav-start-to-content-with-icon-second-level: var( - --system-side-nav-start-to-content-with-icon-second-level - ); - --spectrum-sidenav-start-to-content-with-icon-third-level: var( - --system-side-nav-start-to-content-with-icon-third-level - ); - --spectrum-sidenav-heading-top-margin: var( - --system-side-nav-heading-top-margin - ); - --spectrum-sidenav-heading-bottom-margin: var( - --system-side-nav-heading-bottom-margin - ); - --spectrum-sidenav-background-disabled: var( - --system-side-nav-background-disabled - ); - --spectrum-sidenav-background-default: var( - --system-side-nav-background-default - ); - --spectrum-sidenav-background-hover: var( - --system-side-nav-background-hover - ); - --spectrum-sidenav-item-background-down: var( - --system-side-nav-item-background-down - ); - --spectrum-sidenav-background-key-focus: var( - --system-side-nav-background-key-focus - ); - --spectrum-sidenav-item-background-default-selected: var( - --system-side-nav-item-background-default-selected - ); - --spectrum-sidenav-background-hover-selected: var( - --system-side-nav-background-hover-selected - ); - --spectrum-sidenav-item-background-down-selected: var( - --system-side-nav-item-background-down-selected - ); - --spectrum-sidenav-background-key-focus-selected: var( - --system-side-nav-background-key-focus-selected - ); - --spectrum-sidenav-header-color: var(--system-side-nav-header-color); - --spectrum-sidenav-content-disabled-color: var( - --system-side-nav-content-disabled-color - ); - --spectrum-sidenav-content-color-default: var( - --system-side-nav-content-color-default - ); - --spectrum-sidenav-content-color-hover: var( - --system-side-nav-content-color-hover - ); - --spectrum-sidenav-content-color-down: var( - --system-side-nav-content-color-down - ); - --spectrum-sidenav-content-color-key-focus: var( - --system-side-nav-content-color-key-focus - ); - --spectrum-sidenav-content-color-default-selected: var( - --system-side-nav-content-color-default-selected - ); - --spectrum-sidenav-content-color-hover-selected: var( - --system-side-nav-content-color-hover-selected - ); - --spectrum-sidenav-content-color-down-selected: var( - --system-side-nav-content-color-down-selected - ); - --spectrum-sidenav-content-color-key-focus-selected: var( - --system-side-nav-content-color-key-focus-selected - ); - --spectrum-sidenav-text-font-family: var( - --system-side-nav-text-font-family - ); - --spectrum-sidenav-text-font-weight: var( - --system-side-nav-text-font-weight - ); - --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); - --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); - --spectrum-sidenav-text-line-height: var( - --system-side-nav-text-line-height - ); - --spectrum-sidenav-top-level-font-family: var( - --system-side-nav-top-level-font-family - ); - --spectrum-sidenav-top-level-font-weight: var( - --system-side-nav-top-level-font-weight - ); - --spectrum-sidenav-top-level-font-style: var( - --system-side-nav-top-level-font-style - ); - --spectrum-sidenav-top-level-font-size: var( - --system-side-nav-top-level-font-size - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-top-level-line-height - ); - --spectrum-sidenav-header-font-family: var( - --system-side-nav-header-font-family - ); - --spectrum-sidenav-header-font-weight: var( - --system-side-nav-header-font-weight - ); - --spectrum-sidenav-header-font-style: var( - --system-side-nav-header-font-style - ); - --spectrum-sidenav-header-font-size: var( - --system-side-nav-header-font-size - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-header-line-height - ); + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var(--system-side-nav-focus-ring-color); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var( + --system-side-nav-start-to-content-second-level + ); + --spectrum-sidenav-start-to-content-third-level: var( + --system-side-nav-start-to-content-third-level + ); + --spectrum-sidenav-start-to-content-with-icon-second-level: var( + --system-side-nav-start-to-content-with-icon-second-level + ); + --spectrum-sidenav-start-to-content-with-icon-third-level: var( + --system-side-nav-start-to-content-with-icon-third-level + ); + --spectrum-sidenav-heading-top-margin: var( + --system-side-nav-heading-top-margin + ); + --spectrum-sidenav-heading-bottom-margin: var( + --system-side-nav-heading-bottom-margin + ); + --spectrum-sidenav-background-disabled: var( + --system-side-nav-background-disabled + ); + --spectrum-sidenav-background-default: var( + --system-side-nav-background-default + ); + --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover); + --spectrum-sidenav-item-background-down: var( + --system-side-nav-item-background-down + ); + --spectrum-sidenav-background-key-focus: var( + --system-side-nav-background-key-focus + ); + --spectrum-sidenav-item-background-default-selected: var( + --system-side-nav-item-background-default-selected + ); + --spectrum-sidenav-background-hover-selected: var( + --system-side-nav-background-hover-selected + ); + --spectrum-sidenav-item-background-down-selected: var( + --system-side-nav-item-background-down-selected + ); + --spectrum-sidenav-background-key-focus-selected: var( + --system-side-nav-background-key-focus-selected + ); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var( + --system-side-nav-content-disabled-color + ); + --spectrum-sidenav-content-color-default: var( + --system-side-nav-content-color-default + ); + --spectrum-sidenav-content-color-hover: var( + --system-side-nav-content-color-hover + ); + --spectrum-sidenav-content-color-down: var( + --system-side-nav-content-color-down + ); + --spectrum-sidenav-content-color-key-focus: var( + --system-side-nav-content-color-key-focus + ); + --spectrum-sidenav-content-color-default-selected: var( + --system-side-nav-content-color-default-selected + ); + --spectrum-sidenav-content-color-hover-selected: var( + --system-side-nav-content-color-hover-selected + ); + --spectrum-sidenav-content-color-down-selected: var( + --system-side-nav-content-color-down-selected + ); + --spectrum-sidenav-content-color-key-focus-selected: var( + --system-side-nav-content-color-key-focus-selected + ); + --spectrum-sidenav-text-font-family: var(--system-side-nav-text-font-family); + --spectrum-sidenav-text-font-weight: var(--system-side-nav-text-font-weight); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var(--system-side-nav-text-line-height); + --spectrum-sidenav-top-level-font-family: var( + --system-side-nav-top-level-font-family + ); + --spectrum-sidenav-top-level-font-weight: var( + --system-side-nav-top-level-font-weight + ); + --spectrum-sidenav-top-level-font-style: var( + --system-side-nav-top-level-font-style + ); + --spectrum-sidenav-top-level-font-size: var( + --system-side-nav-top-level-font-size + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-top-level-line-height + ); + --spectrum-sidenav-header-font-family: var( + --system-side-nav-header-font-family + ); + --spectrum-sidenav-header-font-weight: var( + --system-side-nav-header-font-weight + ); + --spectrum-sidenav-header-font-style: var( + --system-side-nav-header-font-style + ); + --spectrum-sidenav-header-font-size: var(--system-side-nav-header-font-size); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-header-line-height + ); } #list:lang(ja) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ja-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ja-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ja-header-line-height - ); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ja-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ja-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ja-header-line-height + ); } #list:lang(zh) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-zh-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-zh-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-zh-header-line-height - ); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-zh-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-zh-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-zh-header-line-height + ); } #list:lang(ko) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ko-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ko-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ko-header-line-height - ); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ko-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ko-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ko-header-line-height + ); } diff --git a/packages/sidenav/src/sidenav-item-overrides.css b/packages/sidenav/src/sidenav-item-overrides.css index 67fdc46170..bdd1d8af59 100644 --- a/packages/sidenav/src/sidenav-item-overrides.css +++ b/packages/sidenav/src/sidenav-item-overrides.css @@ -12,171 +12,159 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #list { - --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); - --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); - --spectrum-sidenav-focus-ring-color: var( - --system-side-nav-focus-ring-color - ); - --spectrum-sidenav-min-height: var(--system-side-nav-min-height); - --spectrum-sidenav-width: var(--system-side-nav-width); - --spectrum-sidenav-min-width: var(--system-side-nav-min-width); - --spectrum-sidenav-max-width: var(--system-side-nav-max-width); - --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); - --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); - --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); - --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); - --spectrum-sidenav-gap: var(--system-side-nav-gap); - --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); - --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); - --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); - --spectrum-sidenav-start-to-content-second-level: var( - --system-side-nav-start-to-content-second-level - ); - --spectrum-sidenav-start-to-content-third-level: var( - --system-side-nav-start-to-content-third-level - ); - --spectrum-sidenav-start-to-content-with-icon-second-level: var( - --system-side-nav-start-to-content-with-icon-second-level - ); - --spectrum-sidenav-start-to-content-with-icon-third-level: var( - --system-side-nav-start-to-content-with-icon-third-level - ); - --spectrum-sidenav-heading-top-margin: var( - --system-side-nav-heading-top-margin - ); - --spectrum-sidenav-heading-bottom-margin: var( - --system-side-nav-heading-bottom-margin - ); - --spectrum-sidenav-background-disabled: var( - --system-side-nav-background-disabled - ); - --spectrum-sidenav-background-default: var( - --system-side-nav-background-default - ); - --spectrum-sidenav-background-hover: var( - --system-side-nav-background-hover - ); - --spectrum-sidenav-item-background-down: var( - --system-side-nav-item-background-down - ); - --spectrum-sidenav-background-key-focus: var( - --system-side-nav-background-key-focus - ); - --spectrum-sidenav-item-background-default-selected: var( - --system-side-nav-item-background-default-selected - ); - --spectrum-sidenav-background-hover-selected: var( - --system-side-nav-background-hover-selected - ); - --spectrum-sidenav-item-background-down-selected: var( - --system-side-nav-item-background-down-selected - ); - --spectrum-sidenav-background-key-focus-selected: var( - --system-side-nav-background-key-focus-selected - ); - --spectrum-sidenav-header-color: var(--system-side-nav-header-color); - --spectrum-sidenav-content-disabled-color: var( - --system-side-nav-content-disabled-color - ); - --spectrum-sidenav-content-color-default: var( - --system-side-nav-content-color-default - ); - --spectrum-sidenav-content-color-hover: var( - --system-side-nav-content-color-hover - ); - --spectrum-sidenav-content-color-down: var( - --system-side-nav-content-color-down - ); - --spectrum-sidenav-content-color-key-focus: var( - --system-side-nav-content-color-key-focus - ); - --spectrum-sidenav-content-color-default-selected: var( - --system-side-nav-content-color-default-selected - ); - --spectrum-sidenav-content-color-hover-selected: var( - --system-side-nav-content-color-hover-selected - ); - --spectrum-sidenav-content-color-down-selected: var( - --system-side-nav-content-color-down-selected - ); - --spectrum-sidenav-content-color-key-focus-selected: var( - --system-side-nav-content-color-key-focus-selected - ); - --spectrum-sidenav-text-font-family: var( - --system-side-nav-text-font-family - ); - --spectrum-sidenav-text-font-weight: var( - --system-side-nav-text-font-weight - ); - --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); - --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); - --spectrum-sidenav-text-line-height: var( - --system-side-nav-text-line-height - ); - --spectrum-sidenav-top-level-font-family: var( - --system-side-nav-top-level-font-family - ); - --spectrum-sidenav-top-level-font-weight: var( - --system-side-nav-top-level-font-weight - ); - --spectrum-sidenav-top-level-font-style: var( - --system-side-nav-top-level-font-style - ); - --spectrum-sidenav-top-level-font-size: var( - --system-side-nav-top-level-font-size - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-top-level-line-height - ); - --spectrum-sidenav-header-font-family: var( - --system-side-nav-header-font-family - ); - --spectrum-sidenav-header-font-weight: var( - --system-side-nav-header-font-weight - ); - --spectrum-sidenav-header-font-style: var( - --system-side-nav-header-font-style - ); - --spectrum-sidenav-header-font-size: var( - --system-side-nav-header-font-size - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-header-line-height - ); + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var(--system-side-nav-focus-ring-color); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var( + --system-side-nav-start-to-content-second-level + ); + --spectrum-sidenav-start-to-content-third-level: var( + --system-side-nav-start-to-content-third-level + ); + --spectrum-sidenav-start-to-content-with-icon-second-level: var( + --system-side-nav-start-to-content-with-icon-second-level + ); + --spectrum-sidenav-start-to-content-with-icon-third-level: var( + --system-side-nav-start-to-content-with-icon-third-level + ); + --spectrum-sidenav-heading-top-margin: var( + --system-side-nav-heading-top-margin + ); + --spectrum-sidenav-heading-bottom-margin: var( + --system-side-nav-heading-bottom-margin + ); + --spectrum-sidenav-background-disabled: var( + --system-side-nav-background-disabled + ); + --spectrum-sidenav-background-default: var( + --system-side-nav-background-default + ); + --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover); + --spectrum-sidenav-item-background-down: var( + --system-side-nav-item-background-down + ); + --spectrum-sidenav-background-key-focus: var( + --system-side-nav-background-key-focus + ); + --spectrum-sidenav-item-background-default-selected: var( + --system-side-nav-item-background-default-selected + ); + --spectrum-sidenav-background-hover-selected: var( + --system-side-nav-background-hover-selected + ); + --spectrum-sidenav-item-background-down-selected: var( + --system-side-nav-item-background-down-selected + ); + --spectrum-sidenav-background-key-focus-selected: var( + --system-side-nav-background-key-focus-selected + ); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var( + --system-side-nav-content-disabled-color + ); + --spectrum-sidenav-content-color-default: var( + --system-side-nav-content-color-default + ); + --spectrum-sidenav-content-color-hover: var( + --system-side-nav-content-color-hover + ); + --spectrum-sidenav-content-color-down: var( + --system-side-nav-content-color-down + ); + --spectrum-sidenav-content-color-key-focus: var( + --system-side-nav-content-color-key-focus + ); + --spectrum-sidenav-content-color-default-selected: var( + --system-side-nav-content-color-default-selected + ); + --spectrum-sidenav-content-color-hover-selected: var( + --system-side-nav-content-color-hover-selected + ); + --spectrum-sidenav-content-color-down-selected: var( + --system-side-nav-content-color-down-selected + ); + --spectrum-sidenav-content-color-key-focus-selected: var( + --system-side-nav-content-color-key-focus-selected + ); + --spectrum-sidenav-text-font-family: var(--system-side-nav-text-font-family); + --spectrum-sidenav-text-font-weight: var(--system-side-nav-text-font-weight); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var(--system-side-nav-text-line-height); + --spectrum-sidenav-top-level-font-family: var( + --system-side-nav-top-level-font-family + ); + --spectrum-sidenav-top-level-font-weight: var( + --system-side-nav-top-level-font-weight + ); + --spectrum-sidenav-top-level-font-style: var( + --system-side-nav-top-level-font-style + ); + --spectrum-sidenav-top-level-font-size: var( + --system-side-nav-top-level-font-size + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-top-level-line-height + ); + --spectrum-sidenav-header-font-family: var( + --system-side-nav-header-font-family + ); + --spectrum-sidenav-header-font-weight: var( + --system-side-nav-header-font-weight + ); + --spectrum-sidenav-header-font-style: var( + --system-side-nav-header-font-style + ); + --spectrum-sidenav-header-font-size: var(--system-side-nav-header-font-size); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-header-line-height + ); } #list:lang(ja) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ja-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ja-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ja-header-line-height - ); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ja-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ja-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ja-header-line-height + ); } #list:lang(zh) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-zh-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-zh-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-zh-header-line-height - ); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-zh-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-zh-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-zh-header-line-height + ); } #list:lang(ko) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ko-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ko-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ko-header-line-height - ); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ko-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ko-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ko-header-line-height + ); } diff --git a/packages/sidenav/src/sidenav-overrides.css b/packages/sidenav/src/sidenav-overrides.css index 1486c7807e..3fb6ea9afc 100644 --- a/packages/sidenav/src/sidenav-overrides.css +++ b/packages/sidenav/src/sidenav-overrides.css @@ -12,171 +12,159 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); - --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); - --spectrum-sidenav-focus-ring-color: var( - --system-side-nav-focus-ring-color - ); - --spectrum-sidenav-min-height: var(--system-side-nav-min-height); - --spectrum-sidenav-width: var(--system-side-nav-width); - --spectrum-sidenav-min-width: var(--system-side-nav-min-width); - --spectrum-sidenav-max-width: var(--system-side-nav-max-width); - --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); - --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); - --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); - --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); - --spectrum-sidenav-gap: var(--system-side-nav-gap); - --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); - --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); - --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); - --spectrum-sidenav-start-to-content-second-level: var( - --system-side-nav-start-to-content-second-level - ); - --spectrum-sidenav-start-to-content-third-level: var( - --system-side-nav-start-to-content-third-level - ); - --spectrum-sidenav-start-to-content-with-icon-second-level: var( - --system-side-nav-start-to-content-with-icon-second-level - ); - --spectrum-sidenav-start-to-content-with-icon-third-level: var( - --system-side-nav-start-to-content-with-icon-third-level - ); - --spectrum-sidenav-heading-top-margin: var( - --system-side-nav-heading-top-margin - ); - --spectrum-sidenav-heading-bottom-margin: var( - --system-side-nav-heading-bottom-margin - ); - --spectrum-sidenav-background-disabled: var( - --system-side-nav-background-disabled - ); - --spectrum-sidenav-background-default: var( - --system-side-nav-background-default - ); - --spectrum-sidenav-background-hover: var( - --system-side-nav-background-hover - ); - --spectrum-sidenav-item-background-down: var( - --system-side-nav-item-background-down - ); - --spectrum-sidenav-background-key-focus: var( - --system-side-nav-background-key-focus - ); - --spectrum-sidenav-item-background-default-selected: var( - --system-side-nav-item-background-default-selected - ); - --spectrum-sidenav-background-hover-selected: var( - --system-side-nav-background-hover-selected - ); - --spectrum-sidenav-item-background-down-selected: var( - --system-side-nav-item-background-down-selected - ); - --spectrum-sidenav-background-key-focus-selected: var( - --system-side-nav-background-key-focus-selected - ); - --spectrum-sidenav-header-color: var(--system-side-nav-header-color); - --spectrum-sidenav-content-disabled-color: var( - --system-side-nav-content-disabled-color - ); - --spectrum-sidenav-content-color-default: var( - --system-side-nav-content-color-default - ); - --spectrum-sidenav-content-color-hover: var( - --system-side-nav-content-color-hover - ); - --spectrum-sidenav-content-color-down: var( - --system-side-nav-content-color-down - ); - --spectrum-sidenav-content-color-key-focus: var( - --system-side-nav-content-color-key-focus - ); - --spectrum-sidenav-content-color-default-selected: var( - --system-side-nav-content-color-default-selected - ); - --spectrum-sidenav-content-color-hover-selected: var( - --system-side-nav-content-color-hover-selected - ); - --spectrum-sidenav-content-color-down-selected: var( - --system-side-nav-content-color-down-selected - ); - --spectrum-sidenav-content-color-key-focus-selected: var( - --system-side-nav-content-color-key-focus-selected - ); - --spectrum-sidenav-text-font-family: var( - --system-side-nav-text-font-family - ); - --spectrum-sidenav-text-font-weight: var( - --system-side-nav-text-font-weight - ); - --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); - --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); - --spectrum-sidenav-text-line-height: var( - --system-side-nav-text-line-height - ); - --spectrum-sidenav-top-level-font-family: var( - --system-side-nav-top-level-font-family - ); - --spectrum-sidenav-top-level-font-weight: var( - --system-side-nav-top-level-font-weight - ); - --spectrum-sidenav-top-level-font-style: var( - --system-side-nav-top-level-font-style - ); - --spectrum-sidenav-top-level-font-size: var( - --system-side-nav-top-level-font-size - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-top-level-line-height - ); - --spectrum-sidenav-header-font-family: var( - --system-side-nav-header-font-family - ); - --spectrum-sidenav-header-font-weight: var( - --system-side-nav-header-font-weight - ); - --spectrum-sidenav-header-font-style: var( - --system-side-nav-header-font-style - ); - --spectrum-sidenav-header-font-size: var( - --system-side-nav-header-font-size - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-header-line-height - ); + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var(--system-side-nav-focus-ring-color); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var( + --system-side-nav-start-to-content-second-level + ); + --spectrum-sidenav-start-to-content-third-level: var( + --system-side-nav-start-to-content-third-level + ); + --spectrum-sidenav-start-to-content-with-icon-second-level: var( + --system-side-nav-start-to-content-with-icon-second-level + ); + --spectrum-sidenav-start-to-content-with-icon-third-level: var( + --system-side-nav-start-to-content-with-icon-third-level + ); + --spectrum-sidenav-heading-top-margin: var( + --system-side-nav-heading-top-margin + ); + --spectrum-sidenav-heading-bottom-margin: var( + --system-side-nav-heading-bottom-margin + ); + --spectrum-sidenav-background-disabled: var( + --system-side-nav-background-disabled + ); + --spectrum-sidenav-background-default: var( + --system-side-nav-background-default + ); + --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover); + --spectrum-sidenav-item-background-down: var( + --system-side-nav-item-background-down + ); + --spectrum-sidenav-background-key-focus: var( + --system-side-nav-background-key-focus + ); + --spectrum-sidenav-item-background-default-selected: var( + --system-side-nav-item-background-default-selected + ); + --spectrum-sidenav-background-hover-selected: var( + --system-side-nav-background-hover-selected + ); + --spectrum-sidenav-item-background-down-selected: var( + --system-side-nav-item-background-down-selected + ); + --spectrum-sidenav-background-key-focus-selected: var( + --system-side-nav-background-key-focus-selected + ); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var( + --system-side-nav-content-disabled-color + ); + --spectrum-sidenav-content-color-default: var( + --system-side-nav-content-color-default + ); + --spectrum-sidenav-content-color-hover: var( + --system-side-nav-content-color-hover + ); + --spectrum-sidenav-content-color-down: var( + --system-side-nav-content-color-down + ); + --spectrum-sidenav-content-color-key-focus: var( + --system-side-nav-content-color-key-focus + ); + --spectrum-sidenav-content-color-default-selected: var( + --system-side-nav-content-color-default-selected + ); + --spectrum-sidenav-content-color-hover-selected: var( + --system-side-nav-content-color-hover-selected + ); + --spectrum-sidenav-content-color-down-selected: var( + --system-side-nav-content-color-down-selected + ); + --spectrum-sidenav-content-color-key-focus-selected: var( + --system-side-nav-content-color-key-focus-selected + ); + --spectrum-sidenav-text-font-family: var(--system-side-nav-text-font-family); + --spectrum-sidenav-text-font-weight: var(--system-side-nav-text-font-weight); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var(--system-side-nav-text-line-height); + --spectrum-sidenav-top-level-font-family: var( + --system-side-nav-top-level-font-family + ); + --spectrum-sidenav-top-level-font-weight: var( + --system-side-nav-top-level-font-weight + ); + --spectrum-sidenav-top-level-font-style: var( + --system-side-nav-top-level-font-style + ); + --spectrum-sidenav-top-level-font-size: var( + --system-side-nav-top-level-font-size + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-top-level-line-height + ); + --spectrum-sidenav-header-font-family: var( + --system-side-nav-header-font-family + ); + --spectrum-sidenav-header-font-weight: var( + --system-side-nav-header-font-weight + ); + --spectrum-sidenav-header-font-style: var( + --system-side-nav-header-font-style + ); + --spectrum-sidenav-header-font-size: var(--system-side-nav-header-font-size); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-header-line-height + ); } :host:lang(ja) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ja-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ja-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ja-header-line-height - ); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ja-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ja-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ja-header-line-height + ); } :host:lang(zh) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-zh-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-zh-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-zh-header-line-height - ); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-zh-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-zh-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-zh-header-line-height + ); } :host:lang(ko) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ko-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ko-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ko-header-line-height - ); + --spectrum-sidenav-text-line-height: var( + --system-side-nav-lang-ko-text-line-height + ); + --spectrum-sidenav-top-level-line-height: var( + --system-side-nav-lang-ko-top-level-line-height + ); + --spectrum-sidenav-header-line-height: var( + --system-side-nav-lang-ko-header-line-height + ); } diff --git a/packages/sidenav/src/spectrum-sidenav-heading.css b/packages/sidenav/src/spectrum-sidenav-heading.css index cf11a8385a..5937ef0c78 100644 --- a/packages/sidenav/src/spectrum-sidenav-heading.css +++ b/packages/sidenav/src/spectrum-sidenav-heading.css @@ -12,52 +12,50 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - #list .spectrum-Icon { - forced-color-adjust: preserve-parent-color; - } + #list .spectrum-Icon { + forced-color-adjust: preserve-parent-color; + } } #list { - flex-direction: column; - margin: 0; - padding: 0; - list-style-type: none; - display: flex; + flex-direction: column; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; } #heading { - padding-inline: var( - --mod-sidenav-inline-padding, - var(--spectrum-sidenav-inline-padding) - ); - color: var( - --mod-sidenav-header-color, - var(--spectrum-sidenav-header-color) - ); - font-size: var( - --mod-sidenav-header-font-size, - var(--spectrum-sidenav-header-font-size) - ); - font-weight: var( - --mod-sidenav-header-font-weight, - var(--spectrum-sidenav-header-font-weight) - ); - font-style: var( - --mod-sidenav-header-font-style, - var(--spectrum-sidenav-header-font-style) - ); - line-height: var( - --mod-sidenav-header-line-height, - var(--spectrum-sidenav-header-line-height) - ); - margin-block-start: calc( - var( - --mod-sidenav-heading-top-margin, - var(--spectrum-sidenav-heading-top-margin) - ) - var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)) - ); - margin-block-end: var( - --mod-sidenav-heading-bottom-margin, - var(--spectrum-sidenav-heading-bottom-margin) - ); + padding-inline: var( + --mod-sidenav-inline-padding, + var(--spectrum-sidenav-inline-padding) + ); + color: var(--mod-sidenav-header-color, var(--spectrum-sidenav-header-color)); + font-size: var( + --mod-sidenav-header-font-size, + var(--spectrum-sidenav-header-font-size) + ); + font-weight: var( + --mod-sidenav-header-font-weight, + var(--spectrum-sidenav-header-font-weight) + ); + font-style: var( + --mod-sidenav-header-font-style, + var(--spectrum-sidenav-header-font-style) + ); + line-height: var( + --mod-sidenav-header-line-height, + var(--spectrum-sidenav-header-line-height) + ); + margin-block-start: calc( + var( + --mod-sidenav-heading-top-margin, + var(--spectrum-sidenav-heading-top-margin) + ) - + var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)) + ); + margin-block-end: var( + --mod-sidenav-heading-bottom-margin, + var(--spectrum-sidenav-heading-bottom-margin) + ); } diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css index cf619e7cd1..5a43f2dc5b 100644 --- a/packages/sidenav/src/spectrum-sidenav-item.css +++ b/packages/sidenav/src/spectrum-sidenav-item.css @@ -12,341 +12,335 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - #list ::slotted([slot='icon']) { - forced-color-adjust: preserve-parent-color; - } + #list ::slotted([slot="icon"]) { + forced-color-adjust: preserve-parent-color; + } - :host { - --highcontrast-sidenav-content-disabled-color: GrayText; - --highcontrast-sidenav-focus-ring-color: Highlight; - --highcontrast-sidenav-content-color-default-selected: SelectedItemText; - --highcontrast-sidenav-item-background-default-selected: SelectedItem; - --highcontrast-sidenav-background-key-focus-selected: Highlight; - --highcontrast-sidenav-background-hover-selected: Highlight; - --highcontrast-sidenav-item-background-down-selected: Highlight; - --highcontrast-sidenav-item-background-down: Highlight; - --highcontrast-sidenav-background-hover: Highlight; - --highcontrast-sidenav-content-color-hover: HighlightText; - --highcontrast-sidenav-background-key-focus: Highlight; - --highcontrast-sidenav-top-level-font-color: ButtonText; - --highcontrast-sidenav-content-color-default: ButtonText; - --highcontrast-sidenav-content-color-down: HighlightText; - forced-color-adjust: none; - } + :host { + --highcontrast-sidenav-content-disabled-color: GrayText; + --highcontrast-sidenav-focus-ring-color: Highlight; + --highcontrast-sidenav-content-color-default-selected: SelectedItemText; + --highcontrast-sidenav-item-background-default-selected: SelectedItem; + --highcontrast-sidenav-background-key-focus-selected: Highlight; + --highcontrast-sidenav-background-hover-selected: Highlight; + --highcontrast-sidenav-item-background-down-selected: Highlight; + --highcontrast-sidenav-item-background-down: Highlight; + --highcontrast-sidenav-background-hover: Highlight; + --highcontrast-sidenav-content-color-hover: HighlightText; + --highcontrast-sidenav-background-key-focus: Highlight; + --highcontrast-sidenav-top-level-font-color: ButtonText; + --highcontrast-sidenav-content-color-default: ButtonText; + --highcontrast-sidenav-content-color-down: HighlightText; + forced-color-adjust: none; + } } #list { - flex-direction: column; - margin: 0; - padding: 0; - list-style-type: none; - display: flex; + flex-direction: column; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; } :host { - margin-inline: 0; - list-style-type: none; + margin-inline: 0; + list-style-type: none; } :host([disabled]) #item-link { - background-color: var( - --highcontrast-sidenav-background-disabled, - var( - --mod-sidenav-background-disabled, - var(--spectrum-sidenav-background-disabled) - ) - ); - color: var( - --highcontrast-sidenav-content-disabled-color, - var( - --mod-sidenav-content-disabled-color, - var(--spectrum-sidenav-content-disabled-color) - ) - ); - cursor: default; - pointer-events: none; + background-color: var( + --highcontrast-sidenav-background-disabled, + var( + --mod-sidenav-background-disabled, + var(--spectrum-sidenav-background-disabled) + ) + ); + color: var( + --highcontrast-sidenav-content-disabled-color, + var( + --mod-sidenav-content-disabled-color, + var(--spectrum-sidenav-content-disabled-color) + ) + ); + cursor: default; + pointer-events: none; } :host([selected]) #item-link { - background-color: var( - --highcontrast-sidenav-item-background-default-selected, - var( - --mod-sidenav-item-background-default-selected, - var(--spectrum-sidenav-item-background-default-selected) - ) - ); - color: var( - --highcontrast-sidenav-content-color-default-selected, - var( - --mod-sidenav-content-color-default-selected, - var(--spectrum-sidenav-content-color-default-selected) - ) - ); + background-color: var( + --highcontrast-sidenav-item-background-default-selected, + var( + --mod-sidenav-item-background-default-selected, + var(--spectrum-sidenav-item-background-default-selected) + ) + ); + color: var( + --highcontrast-sidenav-content-color-default-selected, + var( + --mod-sidenav-content-color-default-selected, + var(--spectrum-sidenav-content-color-default-selected) + ) + ); } :host([selected]) #item-link:active { - background-color: var( - --highcontrast-sidenav-item-background-down-selected, - var( - --mod-sidenav-item-background-down-selected, - var(--spectrum-sidenav-item-background-down-selected) - ) - ); - color: var( - --mod-sidenav-content-color-down-selected, - var(--spectrum-sidenav-content-color-down-selected) - ); + background-color: var( + --highcontrast-sidenav-item-background-down-selected, + var( + --mod-sidenav-item-background-down-selected, + var(--spectrum-sidenav-item-background-down-selected) + ) + ); + color: var( + --mod-sidenav-content-color-down-selected, + var(--spectrum-sidenav-content-color-down-selected) + ); } :host([selected]) #item-link.is-keyboardFocused, :host([selected]) #item-link:focus-visible { - background-color: var( - --highcontrast-sidenav-background-key-focus-selected, - var( - --mod-sidenav-background-key-focus-selected, - var(--spectrum-sidenav-background-key-focus-selected) - ) - ); - color: var( - --mod-sidenav-content-color-key-focus-selected, - var(--spectrum-sidenav-content-color-key-focus-selected) - ); + background-color: var( + --highcontrast-sidenav-background-key-focus-selected, + var( + --mod-sidenav-background-key-focus-selected, + var(--spectrum-sidenav-background-key-focus-selected) + ) + ); + color: var( + --mod-sidenav-content-color-key-focus-selected, + var(--spectrum-sidenav-content-color-key-focus-selected) + ); } #item-link { - padding-inline: var( - --mod-sidenav-inline-padding, - var(--spectrum-sidenav-inline-padding) - ); - box-sizing: border-box; - word-break: break-word; - hyphens: auto; - cursor: pointer; - transition: - background-color var(--spectrum-animation-duration-100) ease-out, - color var(--spectrum-animation-duration-100) ease-out; - border-radius: var( - --mod-sidenav-border-radius, - var(--spectrum-sidenav-border-radius) - ); - background-color: var( - --highcontrast-sidenav-background-default, - var( - --mod-sidenav-background-default, - var(--spectrum-sidenav-background-default) - ) - ); - color: var( - --highcontrast-sidenav-content-color-default, - var( - --mod-sidenav-content-color-default, - var(--spectrum-sidenav-content-color-default) - ) - ); - inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width)); - min-inline-size: var( - --mod-sidenav-min-width, - var(--spectrum-sidenav-min-width) - ); - max-inline-size: var( - --mod-sidenav-max-width, - var(--spectrum-sidenav-max-width) - ); - min-block-size: var( - --mod-sidenav-min-height, - var(--spectrum-sidenav-min-height) - ); - font-family: var( - --mod-sidenav-text-font-family, - var(--spectrum-sidenav-text-font-family) - ); - font-size: var( - --mod-sidenav-text-font-size, - var(--spectrum-sidenav-text-font-size) - ); - font-weight: var( - --mod-sidenav-text-font-weight, - var(--spectrum-sidenav-text-font-weight) - ); - font-style: var( - --mod-sidenav-text-font-style, - var(--spectrum-sidenav-text-font-style) - ); - line-height: var( - --mod-sidenav-text-line-height, - var(--spectrum-sidenav-text-line-height) - ); - justify-content: start; - margin-block-end: var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)); - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - position: relative; + padding-inline: var( + --mod-sidenav-inline-padding, + var(--spectrum-sidenav-inline-padding) + ); + box-sizing: border-box; + word-break: break-word; + hyphens: auto; + cursor: pointer; + transition: + background-color var(--spectrum-animation-duration-100) ease-out, + color var(--spectrum-animation-duration-100) ease-out; + border-radius: var( + --mod-sidenav-border-radius, + var(--spectrum-sidenav-border-radius) + ); + background-color: var( + --highcontrast-sidenav-background-default, + var( + --mod-sidenav-background-default, + var(--spectrum-sidenav-background-default) + ) + ); + color: var( + --highcontrast-sidenav-content-color-default, + var( + --mod-sidenav-content-color-default, + var(--spectrum-sidenav-content-color-default) + ) + ); + inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width)); + min-inline-size: var( + --mod-sidenav-min-width, + var(--spectrum-sidenav-min-width) + ); + max-inline-size: var( + --mod-sidenav-max-width, + var(--spectrum-sidenav-max-width) + ); + min-block-size: var( + --mod-sidenav-min-height, + var(--spectrum-sidenav-min-height) + ); + font-family: var( + --mod-sidenav-text-font-family, + var(--spectrum-sidenav-text-font-family) + ); + font-size: var( + --mod-sidenav-text-font-size, + var(--spectrum-sidenav-text-font-size) + ); + font-weight: var( + --mod-sidenav-text-font-weight, + var(--spectrum-sidenav-text-font-weight) + ); + font-style: var( + --mod-sidenav-text-font-style, + var(--spectrum-sidenav-text-font-style) + ); + line-height: var( + --mod-sidenav-text-line-height, + var(--spectrum-sidenav-text-line-height) + ); + justify-content: start; + margin-block-end: var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)); + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + position: relative; } #item-link #link-text { - margin-block-start: var( - --mod-sidenav-top-to-label, - var(--spectrum-sidenav-top-to-label) - ); - margin-block-end: var( - --mod-sidenav-bottom-to-label, - var(--spectrum-sidenav-bottom-to-label) - ); + margin-block-start: var( + --mod-sidenav-top-to-label, + var(--spectrum-sidenav-top-to-label) + ); + margin-block-end: var( + --mod-sidenav-bottom-to-label, + var(--spectrum-sidenav-bottom-to-label) + ); } -#item-link ::slotted([slot='icon']) { - inline-size: var( - --mod-sidenav-icon-size, - var(--spectrum-sidenav-icon-size) - ); - block-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); - flex-shrink: 0; - margin-block-start: var( - --mod-sidenav-top-to-icon, - var(--spectrum-sidenav-top-to-icon) - ); - margin-inline-end: var( - --mod-sidenav-icon-spacing, - var(--spectrum-sidenav-icon-spacing) - ); +#item-link ::slotted([slot="icon"]) { + inline-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); + block-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); + flex-shrink: 0; + margin-block-start: var( + --mod-sidenav-top-to-icon, + var(--spectrum-sidenav-top-to-icon) + ); + margin-inline-end: var( + --mod-sidenav-icon-spacing, + var(--spectrum-sidenav-icon-spacing) + ); } @media (hover: hover) { - :host([selected]) #item-link:hover { - background-color: var( - --highcontrast-sidenav-background-hover-selected, - var( - --mod-sidenav-background-hover-selected, - var(--spectrum-sidenav-background-hover-selected) - ) - ); - color: var( - --mod-sidenav-content-color-hover-selected, - var(--spectrum-sidenav-content-color-hover-selected) - ); - } + :host([selected]) #item-link:hover { + background-color: var( + --highcontrast-sidenav-background-hover-selected, + var( + --mod-sidenav-background-hover-selected, + var(--spectrum-sidenav-background-hover-selected) + ) + ); + color: var( + --mod-sidenav-content-color-hover-selected, + var(--spectrum-sidenav-content-color-hover-selected) + ); + } - #item-link:hover { - background-color: var( - --highcontrast-sidenav-background-hover, - var( - --mod-sidenav-background-hover, - var(--spectrum-sidenav-background-hover) - ) - ); - color: var( - --highcontrast-sidenav-content-color-hover, - var( - --mod-sidenav-content-color-hover, - var(--spectrum-sidenav-content-color-hover) - ) - ); - } + #item-link:hover { + background-color: var( + --highcontrast-sidenav-background-hover, + var( + --mod-sidenav-background-hover, + var(--spectrum-sidenav-background-hover) + ) + ); + color: var( + --highcontrast-sidenav-content-color-hover, + var( + --mod-sidenav-content-color-hover, + var(--spectrum-sidenav-content-color-hover) + ) + ); + } } #item-link:active { - background-color: var( - --highcontrast-sidenav-item-background-down, - var( - --mod-sidenav-item-background-down, - var(--spectrum-sidenav-item-background-down) - ) - ); - color: var( - --highcontrast-sidenav-content-color-down, - var( - --mod-sidenav-content-color-down, - var(--spectrum-sidenav-content-color-down) - ) - ); + background-color: var( + --highcontrast-sidenav-item-background-down, + var( + --mod-sidenav-item-background-down, + var(--spectrum-sidenav-item-background-down) + ) + ); + color: var( + --highcontrast-sidenav-content-color-down, + var( + --mod-sidenav-content-color-down, + var(--spectrum-sidenav-content-color-down) + ) + ); } #item-link.is-keyboardFocused, #item-link:focus-visible { - outline: var( - --highcontrast-sidenav-focus-ring-color, - var( - --mod-sidenav-focus-ring-color, - var(--spectrum-sidenav-focus-ring-color) - ) - ) - solid - var( - --mod-sidenav-focus-ring-size, - var(--spectrum-sidenav-focus-ring-size) - ); - outline-offset: var( - --mod-sidenav-focus-ring-gap, - var(--spectrum-sidenav-focus-ring-gap) - ); - background-color: var( - --highcontrast-sidenav-background-key-focus, - var( - --mod-sidenav-background-key-focus, - var(--spectrum-sidenav-background-key-focus) - ) - ); - color: var( - --highcontrast-sidenav-content-color-key-focus, - var( - --mod-sidenav-content-color-key-focus, - var(--spectrum-sidenav-content-color-key-focus) - ) - ); + outline: var( + --highcontrast-sidenav-focus-ring-color, + var( + --mod-sidenav-focus-ring-color, + var(--spectrum-sidenav-focus-ring-color) + ) + ) + solid + var(--mod-sidenav-focus-ring-size, var(--spectrum-sidenav-focus-ring-size)); + outline-offset: var( + --mod-sidenav-focus-ring-gap, + var(--spectrum-sidenav-focus-ring-gap) + ); + background-color: var( + --highcontrast-sidenav-background-key-focus, + var( + --mod-sidenav-background-key-focus, + var(--spectrum-sidenav-background-key-focus) + ) + ); + color: var( + --highcontrast-sidenav-content-color-key-focus, + var( + --mod-sidenav-content-color-key-focus, + var(--spectrum-sidenav-content-color-key-focus) + ) + ); } #item-link[data-level] { - font-family: var( - --mod-sidenav-top-level-font-family, - var(--spectrum-sidenav-top-level-font-family) - ); - font-weight: var( - --mod-sidenav-top-level-font-weight, - var(--spectrum-sidenav-top-level-font-weight) - ); - font-style: var( - --mod-sidenav-top-level-font-style, - var(--spectrum-sidenav-top-level-font-style) - ); - font-size: var( - --mod-sidenav-top-level-font-size, - var(--spectrum-sidenav-top-level-font-size) - ); - line-height: var( - --mod-sidenav-top-level-line-height, - var(--spectrum-sidenav-top-level-line-height) - ); + font-family: var( + --mod-sidenav-top-level-font-family, + var(--spectrum-sidenav-top-level-font-family) + ); + font-weight: var( + --mod-sidenav-top-level-font-weight, + var(--spectrum-sidenav-top-level-font-weight) + ); + font-style: var( + --mod-sidenav-top-level-font-style, + var(--spectrum-sidenav-top-level-font-style) + ); + font-size: var( + --mod-sidenav-top-level-font-size, + var(--spectrum-sidenav-top-level-font-size) + ); + line-height: var( + --mod-sidenav-top-level-line-height, + var(--spectrum-sidenav-top-level-line-height) + ); } -#item-link:not([data-level='0']) { - font-weight: var( - --mod-sidenav-text-font-weight, - var(--spectrum-sidenav-text-font-weight) - ); - padding-inline-start: var( - --mod-sidenav-start-to-content-second-level, - var(--spectrum-sidenav-start-to-content-second-level) - ); +#item-link:not([data-level="0"]) { + font-weight: var( + --mod-sidenav-text-font-weight, + var(--spectrum-sidenav-text-font-weight) + ); + padding-inline-start: var( + --mod-sidenav-start-to-content-second-level, + var(--spectrum-sidenav-start-to-content-second-level) + ); } -#item-link[data-level='2'] { - padding-inline-start: var( - --mod-sidenav-start-to-content-third-level, - var(--spectrum-sidenav-start-to-content-third-level) - ); +#item-link[data-level="2"] { + padding-inline-start: var( + --mod-sidenav-start-to-content-third-level, + var(--spectrum-sidenav-start-to-content-third-level) + ); } -.spectrum-SideNav--hasIcon#item-link:not([data-level='0']) { - padding-inline-start: var( - --mod-sidenav-start-to-content-with-icon-second-level, - var(--spectrum-sidenav-start-to-content-with-icon-second-level) - ); +.spectrum-SideNav--hasIcon#item-link:not([data-level="0"]) { + padding-inline-start: var( + --mod-sidenav-start-to-content-with-icon-second-level, + var(--spectrum-sidenav-start-to-content-with-icon-second-level) + ); } -.spectrum-SideNav--hasIcon#item-link[data-level='2'] { - padding-inline-start: var( - --mod-sidenav-start-to-content-with-icon-third-level, - var(--spectrum-sidenav-start-to-content-with-icon-third-level) - ); +.spectrum-SideNav--hasIcon#item-link[data-level="2"] { + padding-inline-start: var( + --mod-sidenav-start-to-content-with-icon-third-level, + var(--spectrum-sidenav-start-to-content-with-icon-third-level) + ); } diff --git a/packages/sidenav/src/spectrum-sidenav.css b/packages/sidenav/src/spectrum-sidenav.css index 77cb05b687..959ff370ed 100644 --- a/packages/sidenav/src/spectrum-sidenav.css +++ b/packages/sidenav/src/spectrum-sidenav.css @@ -12,15 +12,15 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - .spectrum-Icon { - forced-color-adjust: preserve-parent-color; - } + .spectrum-Icon { + forced-color-adjust: preserve-parent-color; + } } :host { - flex-direction: column; - margin: 0; - padding: 0; - list-style-type: none; - display: flex; + flex-direction: column; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; } diff --git a/packages/slider/src/slider-overrides.css b/packages/slider/src/slider-overrides.css index 0df16264ea..fb94844549 100644 --- a/packages/slider/src/slider-overrides.css +++ b/packages/slider/src/slider-overrides.css @@ -12,204 +12,192 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-slider-track-color: var(--system-slider-track-color); - --spectrum-slider-track-fill-color: var(--system-slider-track-fill-color); - --spectrum-slider-ramp-track-color: var(--system-slider-ramp-track-color); - --spectrum-slider-ramp-track-color-disabled: var( - --system-slider-ramp-track-color-disabled - ); - --spectrum-slider-handle-background-color: var( - --system-slider-handle-background-color - ); - --spectrum-slider-handle-background-color-disabled: var( - --system-slider-handle-background-color-disabled - ); - --spectrum-slider-ramp-handle-background-color: var( - --system-slider-ramp-handle-background-color - ); - --spectrum-slider-ticks-handle-background-color: var( - --system-slider-ticks-handle-background-color - ); - --spectrum-slider-handle-border-color: var( - --system-slider-handle-border-color - ); - --spectrum-slider-handle-disabled-background-color: var( - --system-slider-handle-disabled-background-color - ); - --spectrum-slider-tick-mark-color: var(--system-slider-tick-mark-color); - --spectrum-slider-handle-border-color-hover: var( - --system-slider-handle-border-color-hover - ); - --spectrum-slider-handle-border-color-down: var( - --system-slider-handle-border-color-down - ); - --spectrum-slider-handle-border-color-key-focus: var( - --system-slider-handle-border-color-key-focus - ); - --spectrum-slider-handle-focus-ring-color-key-focus: var( - --system-slider-handle-focus-ring-color-key-focus - ); - --spectrum-slider-value-inline-size: var(--system-slider-value-inline-size); - --spectrum-slider-ramp-track-block-size: var( - --system-slider-ramp-track-block-size - ); - --spectrum-slider-cjk-line-height: var(--system-slider-cjk-line-height); - --spectrum-slider-min-size: var(--system-slider-min-size); - --spectrum-slider-track-corner-radius: var( - --system-slider-track-corner-radius - ); - --spectrum-slider-label-margin-start: var( - --system-slider-label-margin-start - ); - --spectrum-slider-handle-border-width: var( - --system-slider-handle-border-width - ); - --spectrum-slider-track-fill-thickness: var( - --system-slider-track-fill-thickness - ); - --spectrum-slider-tick-mark-width: var(--system-slider-tick-mark-width); - --spectrum-slider-tick-mark-border-radius: var( - --system-slider-tick-mark-border-radius - ); - --spectrum-slider-tick-handle-background-color: var( - --system-slider-tick-handle-background-color - ); - --spectrum-slider-track-color-disabled: var( - --system-slider-track-color-disabled - ); - --spectrum-slider-track-fill-color-disabled: var( - --system-slider-track-fill-color-disabled - ); - --spectrum-slider-handle-border-color-disabled: var( - --system-slider-handle-border-color-disabled - ); - --spectrum-slider-label-text-color: var(--system-slider-label-text-color); - --spectrum-slider-tick-label-color: var(--system-slider-tick-label-color); - --spectrum-slider-label-text-color-disabled: var( - --system-slider-label-text-color-disabled - ); - --spectrum-slider-tick-mark-color-disabled: var( - --system-slider-tick-mark-color-disabled - ); - --spectrum-slider-ramp-handle-border-color-active: var( - --system-slider-ramp-handle-border-color-active - ); - --spectrum-slider-track-handleoffset: var( - --system-slider-track-handleoffset - ); - --spectrum-slider-range-track-reset: var(--system-slider-range-track-reset); - --spectrum-slider-font-size: var(--system-slider-font-size); - --spectrum-slider-handle-size: var(--system-slider-handle-size); - --spectrum-slider-control-height: var(--system-slider-control-height); - --spectrum-slider-handle-border-radius: var( - --system-slider-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var(--system-slider-label-top-to-text); - --spectrum-slider-control-to-field-label: var( - --system-slider-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-value-side-padding-inline - ); + --spectrum-slider-track-color: var(--system-slider-track-color); + --spectrum-slider-track-fill-color: var(--system-slider-track-fill-color); + --spectrum-slider-ramp-track-color: var(--system-slider-ramp-track-color); + --spectrum-slider-ramp-track-color-disabled: var( + --system-slider-ramp-track-color-disabled + ); + --spectrum-slider-handle-background-color: var( + --system-slider-handle-background-color + ); + --spectrum-slider-handle-background-color-disabled: var( + --system-slider-handle-background-color-disabled + ); + --spectrum-slider-ramp-handle-background-color: var( + --system-slider-ramp-handle-background-color + ); + --spectrum-slider-ticks-handle-background-color: var( + --system-slider-ticks-handle-background-color + ); + --spectrum-slider-handle-border-color: var( + --system-slider-handle-border-color + ); + --spectrum-slider-handle-disabled-background-color: var( + --system-slider-handle-disabled-background-color + ); + --spectrum-slider-tick-mark-color: var(--system-slider-tick-mark-color); + --spectrum-slider-handle-border-color-hover: var( + --system-slider-handle-border-color-hover + ); + --spectrum-slider-handle-border-color-down: var( + --system-slider-handle-border-color-down + ); + --spectrum-slider-handle-border-color-key-focus: var( + --system-slider-handle-border-color-key-focus + ); + --spectrum-slider-handle-focus-ring-color-key-focus: var( + --system-slider-handle-focus-ring-color-key-focus + ); + --spectrum-slider-value-inline-size: var(--system-slider-value-inline-size); + --spectrum-slider-ramp-track-block-size: var( + --system-slider-ramp-track-block-size + ); + --spectrum-slider-cjk-line-height: var(--system-slider-cjk-line-height); + --spectrum-slider-min-size: var(--system-slider-min-size); + --spectrum-slider-track-corner-radius: var( + --system-slider-track-corner-radius + ); + --spectrum-slider-label-margin-start: var(--system-slider-label-margin-start); + --spectrum-slider-handle-border-width: var( + --system-slider-handle-border-width + ); + --spectrum-slider-track-fill-thickness: var( + --system-slider-track-fill-thickness + ); + --spectrum-slider-tick-mark-width: var(--system-slider-tick-mark-width); + --spectrum-slider-tick-mark-border-radius: var( + --system-slider-tick-mark-border-radius + ); + --spectrum-slider-tick-handle-background-color: var( + --system-slider-tick-handle-background-color + ); + --spectrum-slider-track-color-disabled: var( + --system-slider-track-color-disabled + ); + --spectrum-slider-track-fill-color-disabled: var( + --system-slider-track-fill-color-disabled + ); + --spectrum-slider-handle-border-color-disabled: var( + --system-slider-handle-border-color-disabled + ); + --spectrum-slider-label-text-color: var(--system-slider-label-text-color); + --spectrum-slider-tick-label-color: var(--system-slider-tick-label-color); + --spectrum-slider-label-text-color-disabled: var( + --system-slider-label-text-color-disabled + ); + --spectrum-slider-tick-mark-color-disabled: var( + --system-slider-tick-mark-color-disabled + ); + --spectrum-slider-ramp-handle-border-color-active: var( + --system-slider-ramp-handle-border-color-active + ); + --spectrum-slider-track-handleoffset: var(--system-slider-track-handleoffset); + --spectrum-slider-range-track-reset: var(--system-slider-range-track-reset); + --spectrum-slider-font-size: var(--system-slider-font-size); + --spectrum-slider-handle-size: var(--system-slider-handle-size); + --spectrum-slider-control-height: var(--system-slider-control-height); + --spectrum-slider-handle-border-radius: var( + --system-slider-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var(--system-slider-label-top-to-text); + --spectrum-slider-control-to-field-label: var( + --system-slider-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-value-side-padding-inline + ); } :host { - --spectrum-slider-font-size: var(--system-slider-size-m-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-m-handle-size); - --spectrum-slider-control-height: var( - --system-slider-size-m-control-height - ); - --spectrum-slider-handle-border-radius: var( - --system-slider-size-m-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-size-m-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var( - --system-slider-size-m-label-top-to-text - ); - --spectrum-slider-control-to-field-label: var( - --system-slider-size-m-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-size-m-value-side-padding-inline - ); + --spectrum-slider-font-size: var(--system-slider-size-m-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-m-handle-size); + --spectrum-slider-control-height: var(--system-slider-size-m-control-height); + --spectrum-slider-handle-border-radius: var( + --system-slider-size-m-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-size-m-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var( + --system-slider-size-m-label-top-to-text + ); + --spectrum-slider-control-to-field-label: var( + --system-slider-size-m-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-size-m-value-side-padding-inline + ); } -:host([size='s']) { - --spectrum-slider-font-size: var(--system-slider-size-s-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-s-handle-size); - --spectrum-slider-control-height: var( - --system-slider-size-s-control-height - ); - --spectrum-slider-handle-border-radius: var( - --system-slider-size-s-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-size-s-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var( - --system-slider-size-s-label-top-to-text - ); - --spectrum-slider-control-to-field-label: var( - --system-slider-size-s-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-size-s-value-side-padding-inline - ); +:host([size="s"]) { + --spectrum-slider-font-size: var(--system-slider-size-s-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-s-handle-size); + --spectrum-slider-control-height: var(--system-slider-size-s-control-height); + --spectrum-slider-handle-border-radius: var( + --system-slider-size-s-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-size-s-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var( + --system-slider-size-s-label-top-to-text + ); + --spectrum-slider-control-to-field-label: var( + --system-slider-size-s-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-size-s-value-side-padding-inline + ); } -:host([size='l']) { - --spectrum-slider-font-size: var(--system-slider-size-l-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-l-handle-size); - --spectrum-slider-control-height: var( - --system-slider-size-l-control-height - ); - --spectrum-slider-handle-border-radius: var( - --system-slider-size-l-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-size-l-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var( - --system-slider-size-l-label-top-to-text - ); - --spectrum-slider-control-to-field-label: var( - --system-slider-size-l-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-size-l-value-side-padding-inline - ); - --spectrum-slider-value-inline-size: var( - --system-slider-size-l-value-inline-size - ); +:host([size="l"]) { + --spectrum-slider-font-size: var(--system-slider-size-l-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-l-handle-size); + --spectrum-slider-control-height: var(--system-slider-size-l-control-height); + --spectrum-slider-handle-border-radius: var( + --system-slider-size-l-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-size-l-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var( + --system-slider-size-l-label-top-to-text + ); + --spectrum-slider-control-to-field-label: var( + --system-slider-size-l-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-size-l-value-side-padding-inline + ); + --spectrum-slider-value-inline-size: var( + --system-slider-size-l-value-inline-size + ); } -:host([size='xl']) { - --spectrum-slider-font-size: var(--system-slider-size-xl-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-xl-handle-size); - --spectrum-slider-control-height: var( - --system-slider-size-xl-control-height - ); - --spectrum-slider-handle-border-radius: var( - --system-slider-size-xl-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-size-xl-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var( - --system-slider-size-xl-label-top-to-text - ); - --spectrum-slider-control-to-field-label: var( - --system-slider-size-xl-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-size-xl-value-side-padding-inline - ); - --spectrum-slider-value-inline-size: var( - --system-slider-size-xl-value-inline-size - ); +:host([size="xl"]) { + --spectrum-slider-font-size: var(--system-slider-size-xl-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-xl-handle-size); + --spectrum-slider-control-height: var(--system-slider-size-xl-control-height); + --spectrum-slider-handle-border-radius: var( + --system-slider-size-xl-handle-border-radius + ); + --spectrum-slider-handle-border-width-down: var( + --system-slider-size-xl-handle-border-width-down + ); + --spectrum-slider-label-top-to-text: var( + --system-slider-size-xl-label-top-to-text + ); + --spectrum-slider-control-to-field-label: var( + --system-slider-size-xl-control-to-field-label + ); + --spectrum-slider-value-side-padding-inline: var( + --system-slider-size-xl-value-side-padding-inline + ); + --spectrum-slider-value-inline-size: var( + --system-slider-size-xl-value-inline-size + ); } diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css index 587985a295..4299c329b5 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -12,1030 +12,969 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-slider-handle-margin-left: calc( - var(--spectrum-slider-handle-size) / -2 - ); - --spectrum-slider-input-left: calc( - var(--spectrum-slider-handle-margin-left) / 4 - ); - --spectrum-slider-controls-margin: calc( - var(--spectrum-slider-handle-size) / 2 - ); - --spectrum-slider-track-margin-offset: calc( - var(--spectrum-slider-controls-margin) * -1 - ); - --spectrum-slider-track-middle-handleoffset: calc( - var(--spectrum-slider-track-handleoffset) + - var(--spectrum-slider-handle-size) / 2 - ); - --spectrum-slider-input-top-size: calc( - var(--spectrum-slider-handle-size) / -2 / 4 - ); - z-index: 0; - min-inline-size: var( - --mod-slider-min-size, - var(--spectrum-slider-min-size) - ); - -webkit-user-select: none; - user-select: none; - display: block; - position: relative; + --spectrum-slider-handle-margin-left: calc( + var(--spectrum-slider-handle-size) / -2 + ); + --spectrum-slider-input-left: calc( + var(--spectrum-slider-handle-margin-left) / 4 + ); + --spectrum-slider-controls-margin: calc( + var(--spectrum-slider-handle-size) / 2 + ); + --spectrum-slider-track-margin-offset: calc( + var(--spectrum-slider-controls-margin) * -1 + ); + --spectrum-slider-track-middle-handleoffset: calc( + var(--spectrum-slider-track-handleoffset) + + var(--spectrum-slider-handle-size) / 2 + ); + --spectrum-slider-input-top-size: calc( + var(--spectrum-slider-handle-size) / -2 / 4 + ); + z-index: 0; + min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size)); + -webkit-user-select: none; + user-select: none; + display: block; + position: relative; } :host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +:host([dir="rtl"]) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } :host:not(.spectrum-Slider--sideLabel) - #label-container - + #track:has(.spectrum-Slider-ramp) { - margin-block-start: calc( - var( - --mod-slider-ramp-track-height, - var(--spectrum-slider-ramp-track-block-size) - ) / 2 - ); + #label-container + + #track:has(.spectrum-Slider-ramp) { + margin-block-start: calc( + var( + --mod-slider-ramp-track-height, + var(--spectrum-slider-ramp-track-block-size) + ) / + 2 + ); } .spectrum-Slider--sideLabel { - align-items: center; - display: flex; + align-items: center; + display: flex; } .spectrum-Slider--sideLabel #label-container { - margin-block-start: 0; + margin-block-start: 0; } .spectrum-Slider--sideLabel #label-container #label { - margin-inline-end: var( - --mod-slider-value-side-padding-inline, - var(--spectrum-slider-value-side-padding-inline) - ); + margin-inline-end: var( + --mod-slider-value-side-padding-inline, + var(--spectrum-slider-value-side-padding-inline) + ); } .spectrum-Slider--sideLabel #label-container + #track { - margin-block-start: 0; + margin-block-start: 0; } .spectrum-Slider--sideLabel #controls { - margin-inline-end: var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ); + margin-inline-end: var( + --mod-slider-controls-margin, + var(--spectrum-slider-controls-margin) + ); } .spectrum-Slider--sideLabel #value { - inline-size: var( - --mod-slider-value-inline-size, - var(--spectrum-slider-value-inline-size) - ); - text-align: start; - margin-inline-start: var( - --mod-slider-value-side-padding-inline, - var(--spectrum-slider-value-side-padding-inline) - ); + inline-size: var( + --mod-slider-value-inline-size, + var(--spectrum-slider-value-inline-size) + ); + text-align: start; + margin-inline-start: var( + --mod-slider-value-side-padding-inline, + var(--spectrum-slider-value-side-padding-inline) + ); } #controls { - box-sizing: border-box; - cursor: pointer; - z-index: auto; - inline-size: calc( - 100% - - var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ) * 2 - ); - block-size: var( - --mod-slider-control-height, - var(--spectrum-slider-control-height) - ); - vertical-align: top; - margin-inline-start: var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ); - display: inline-block; - position: relative; + box-sizing: border-box; + cursor: pointer; + z-index: auto; + inline-size: calc( + 100% - + var( + --mod-slider-controls-margin, + var(--spectrum-slider-controls-margin) + ) * + 2 + ); + block-size: var( + --mod-slider-control-height, + var(--spectrum-slider-control-height) + ); + vertical-align: top; + margin-inline-start: var( + --mod-slider-controls-margin, + var(--spectrum-slider-controls-margin) + ); + display: inline-block; + position: relative; } #controls:not(:has(.ticks)) { - align-items: center; - display: flex; + align-items: center; + display: flex; } #label-container + #track { - margin-block-start: calc( - var(--spectrum-slider-control-to-field-label) * -1 - ); + margin-block-start: calc(var(--spectrum-slider-control-to-field-label) * -1); } :host([tick-labels]) { - margin-block-end: var( - --mod-slider-control-height, - var(--spectrum-slider-control-height) - ); -} - -:host([variant='tick']) .handle { - background-color: var( - --highcontrast-slider-tick-handle-background-color, - var( - --mod-slider-tick-handle-background-color, - var(--spectrum-slider-tick-handle-background-color) - ) - ); -} - -:host([variant='tick']) #controls { - margin-block-start: calc( - var(--spectrum-text-to-visual-75) - - var( - --mod-slider-tick-mark-height, - var(--spectrum-slider-tick-mark-height) - ) / 2 - - var( - --mod-slider-track-thickness, - var(--spectrum-slider-track-thickness) - ) / 2 - ); -} - -:host([variant='tick']) .tickLabel { - margin-block-start: calc( - var( - --mod-slider-tick-mark-height, - var(--spectrum-slider-tick-mark-height) - ) + var(--spectrum-text-to-visual-75) - ); + margin-block-end: var( + --mod-slider-control-height, + var(--spectrum-slider-control-height) + ); +} + +:host([variant="tick"]) .handle { + background-color: var( + --highcontrast-slider-tick-handle-background-color, + var( + --mod-slider-tick-handle-background-color, + var(--spectrum-slider-tick-handle-background-color) + ) + ); +} + +:host([variant="tick"]) #controls { + margin-block-start: calc( + var(--spectrum-text-to-visual-75) - + var( + --mod-slider-tick-mark-height, + var(--spectrum-slider-tick-mark-height) + ) / + 2 - + var( + --mod-slider-track-thickness, + var(--spectrum-slider-track-thickness) + ) / + 2 + ); +} + +:host([variant="tick"]) .tickLabel { + margin-block-start: calc( + var( + --mod-slider-tick-mark-height, + var(--spectrum-slider-tick-mark-height) + ) + + var(--spectrum-text-to-visual-75) + ); } .fill, .track { - block-size: var( - --mod-slider-track-fill-thickness, - var(--spectrum-slider-track-fill-thickness) - ); - box-sizing: border-box; - z-index: 1; - pointer-events: none; - margin-inline-start: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: var( - --mod-slider-handle-gap, - var(--spectrum-slider-handle-gap) - ); - position: absolute; - inset-block-start: calc( - var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / - 2 - - var( - --mod-slider-track-fill-thickness, - var(--spectrum-slider-track-fill-thickness) - ) / 2 - ); - inset-inline: 0 auto; + block-size: var( + --mod-slider-track-fill-thickness, + var(--spectrum-slider-track-fill-thickness) + ); + box-sizing: border-box; + z-index: 1; + pointer-events: none; + margin-inline-start: var( + --mod-slider-track-margin-offset, + var(--spectrum-slider-track-margin-offset) + ); + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: var( + --mod-slider-handle-gap, + var(--spectrum-slider-handle-gap) + ); + position: absolute; + inset-block-start: calc( + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / + 2 - + var( + --mod-slider-track-fill-thickness, + var(--spectrum-slider-track-fill-thickness) + ) / + 2 + ); + inset-inline: 0 auto; } .fill:before, .track:before { - content: ''; - block-size: 100%; - border-start-start-radius: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: 0; - display: block; + content: ""; + block-size: 100%; + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; + display: block; } .track:first-of-type:before { - border-start-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); + border-start-start-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); + border-end-start-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); } .track:last-of-type:before { - border-start-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); + border-start-end-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); + border-end-end-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); } .track:before { - background: var( - --highcontrast-slider-track-color-static, - var(--mod-slider-track-color, var(--spectrum-slider-track-color)) - ); + background: var( + --highcontrast-slider-track-color-static, + var(--mod-slider-track-color, var(--spectrum-slider-track-color)) + ); } .track ~ .track { - margin-inline-start: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); - margin-inline-end: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - padding-block: 0; - padding-inline-start: var( - --mod-slider-track-handleoffset, - var(--spectrum-slider-track-handleoffset) - ); - padding-inline-end: 0; - inset-inline-start: auto; - inset-inline-end: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); -} - -:host([variant='range']) .track ~ .track { - padding-inline: var( - --mod-slider-track-middle-handleoffset, - var(--spectrum-slider-track-middle-handleoffset) - ) - var( - --mod-slider-track-middle-handleoffset, - var(--spectrum-slider-track-middle-handleoffset) - ); - margin-inline: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); - inset-inline: auto; -} - -:host([variant='range']) #value { - -webkit-user-select: text; - user-select: text; -} - -:host([variant='range']) .track:first-of-type { - margin-inline-start: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - padding-inline-start: 0; - padding-inline-end: var( - --mod-slider-track-handleoffset, - var(--spectrum-slider-track-handleoffset) - ); - inset-inline-start: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); - inset-inline-end: auto; -} - -:host([variant='range']) .track:first-of-type:before { - border-start-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); -} - -:host([variant='range']) .track:last-of-type { - margin-inline-end: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - padding-inline-start: var(--spectrum-slider-track-handleoffset); - padding-inline-end: 0; - inset-inline-start: auto; - inset-inline-end: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); -} - -:host([variant='range']) .track:last-of-type:before { - border-start-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); -} - -:host([variant='range']) .track:not(:first-of-type, :last-of-type):before { - background: var( - --highcontrast-slider-filled-track-fill-color, - var( - --mod-slider-track-fill-color, - var(--spectrum-slider-track-fill-color) - ) - ); + margin-inline-start: var( + --mod-slider-range-track-reset, + var(--spectrum-slider-range-track-reset) + ); + margin-inline-end: var( + --mod-slider-track-margin-offset, + var(--spectrum-slider-track-margin-offset) + ); + padding-block: 0; + padding-inline-start: var( + --mod-slider-track-handleoffset, + var(--spectrum-slider-track-handleoffset) + ); + padding-inline-end: 0; + inset-inline-start: auto; + inset-inline-end: var( + --mod-slider-range-track-reset, + var(--spectrum-slider-range-track-reset) + ); +} + +:host([variant="range"]) .track ~ .track { + padding-inline: var( + --mod-slider-track-middle-handleoffset, + var(--spectrum-slider-track-middle-handleoffset) + ) + var( + --mod-slider-track-middle-handleoffset, + var(--spectrum-slider-track-middle-handleoffset) + ); + margin-inline: var( + --mod-slider-range-track-reset, + var(--spectrum-slider-range-track-reset) + ); + inset-inline: auto; +} + +:host([variant="range"]) #value { + -webkit-user-select: text; + user-select: text; +} + +:host([variant="range"]) .track:first-of-type { + margin-inline-start: var( + --mod-slider-track-margin-offset, + var(--spectrum-slider-track-margin-offset) + ); + padding-inline-start: 0; + padding-inline-end: var( + --mod-slider-track-handleoffset, + var(--spectrum-slider-track-handleoffset) + ); + inset-inline-start: var( + --mod-slider-range-track-reset, + var(--spectrum-slider-range-track-reset) + ); + inset-inline-end: auto; +} + +:host([variant="range"]) .track:first-of-type:before { + border-start-start-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); + border-end-start-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); +} + +:host([variant="range"]) .track:last-of-type { + margin-inline-end: var( + --mod-slider-track-margin-offset, + var(--spectrum-slider-track-margin-offset) + ); + padding-inline-start: var(--spectrum-slider-track-handleoffset); + padding-inline-end: 0; + inset-inline-start: auto; + inset-inline-end: var( + --mod-slider-range-track-reset, + var(--spectrum-slider-range-track-reset) + ); +} + +:host([variant="range"]) .track:last-of-type:before { + border-start-end-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); + border-end-end-radius: var( + --mod-slider-track-corner-radius, + var(--spectrum-slider-track-corner-radius) + ); +} + +:host([variant="range"]) .track:not(:first-of-type, :last-of-type):before { + background: var( + --highcontrast-slider-filled-track-fill-color, + var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)) + ); } .fill { - margin-inline-start: 0; - padding-block: 0; - padding-inline-start: calc( - var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ) + - var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)) - ); - padding-inline-end: 0; + margin-inline-start: 0; + padding-block: 0; + padding-inline-start: calc( + var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)) + ); + padding-inline-end: 0; } .fill:before { - background: var( - --highcontrast-slider-filled-track-fill-color, - var( - --mod-slider-track-fill-color, - var(--spectrum-slider-track-fill-color) - ) - ); + background: var( + --highcontrast-slider-filled-track-fill-color, + var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)) + ); } .offset { - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: calc( - var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ) + - var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)) - ); + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: calc( + var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)) + ); } #ramp { - block-size: var( - --mod-slider-ramp-track-height, - var(--spectrum-slider-ramp-track-block-size) - ); - position: absolute; - inset-inline-start: var( - --spectrum-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - inset-inline-end: var( - --spectrum-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); + block-size: var( + --mod-slider-ramp-track-height, + var(--spectrum-slider-ramp-track-block-size) + ); + position: absolute; + inset-inline-start: var( + --spectrum-slider-track-margin-offset, + var(--spectrum-slider-track-margin-offset) + ); + inset-inline-end: var( + --spectrum-slider-track-margin-offset, + var(--spectrum-slider-track-margin-offset) + ); } #ramp svg { - inline-size: 100%; - block-size: 100%; - transform: var(--spectrum-logical-rotation,); + inline-size: 100%; + block-size: 100%; + transform: var(--spectrum-logical-rotation,); } #ramp path { - fill: var( - --highcontrast-slider-ramp-track-color, - var( - --mod-slider-ramp-track-color, - var(--spectrum-slider-ramp-track-color) - ) - ); + fill: var( + --highcontrast-slider-ramp-track-color, + var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)) + ); } .handle { - z-index: 2; - box-sizing: border-box; - inline-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - block-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - margin-block: 0; - margin-inline: calc( - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / - -2 - ) - 0; - border-width: var( - --mod-slider-handle-border-width, - var(--spectrum-slider-handle-border-width) - ); - border-radius: var( - --mod-slider-handle-border-radius, - var(--spectrum-slider-handle-border-radius) - ); - transition: border-width - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; - background: var( - --highcontrast-slider-handle-background-color, - var( - --mod-slider-handle-background-color, - var(--spectrum-slider-handle-background-color) - ) - ); - border-style: solid; - border-color: var( - --highcontrast-slider-handle-border-color, - var( - --mod-slider-handle-border-color, - var(--spectrum-slider-handle-border-color) - ) - ); - outline: none; - display: inline-block; - position: absolute; - inset-block-start: calc( - var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / - 2 - - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / - 2 - ); - inset-inline-start: 0; + z-index: 2; + box-sizing: border-box; + inline-size: var( + --mod-slider-handle-size, + var(--spectrum-slider-handle-size) + ); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + margin-block: 0; + margin-inline: calc( + var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2 + ) + 0; + border-width: var( + --mod-slider-handle-border-width, + var(--spectrum-slider-handle-border-width) + ); + border-radius: var( + --mod-slider-handle-border-radius, + var(--spectrum-slider-handle-border-radius) + ); + transition: border-width + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out; + background: var( + --highcontrast-slider-handle-background-color, + var( + --mod-slider-handle-background-color, + var(--spectrum-slider-handle-background-color) + ) + ); + border-style: solid; + border-color: var( + --highcontrast-slider-handle-border-color, + var( + --mod-slider-handle-border-color, + var(--spectrum-slider-handle-border-color) + ) + ); + outline: none; + display: inline-block; + position: absolute; + inset-block-start: calc( + var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / + 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2 + ); + inset-inline-start: 0; } .handle.dragging, .handle:active { - border-width: var( - --mod-slider-handle-border-width-down, - var(--spectrum-slider-handle-border-width-down) - ); - border-color: var( - --highcontrast-slider-handle-border-color-down, - var( - --mod-slider-handle-border-color-down, - var(--spectrum-slider-handle-border-color-down) - ) - ); + border-width: var( + --mod-slider-handle-border-width-down, + var(--spectrum-slider-handle-border-width-down) + ); + border-color: var( + --highcontrast-slider-handle-border-color-down, + var( + --mod-slider-handle-border-color-down, + var(--spectrum-slider-handle-border-color-down) + ) + ); } .handle.dragging, .handle.handle-highlight, .handle.is-tophandle, .handle:active { - z-index: 3; + z-index: 3; } .handle:before { - content: ''; - inline-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - block-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - transition: - box-shadow - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out, - inline-size - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out, - block-size - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out; - border-radius: 100%; - display: block; - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); + content: ""; + inline-size: var( + --mod-slider-handle-size, + var(--spectrum-slider-handle-size) + ); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + transition: + box-shadow + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-out, + inline-size + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-out, + block-size + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-out; + border-radius: 100%; + display: block; + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); } :host:dir(rtl) .handle:before, -:host([dir='rtl']) .handle:before { - transform: translate(50%, -50%); +:host([dir="rtl"]) .handle:before { + transform: translate(50%, -50%); } .handle.handle-highlight { - border-color: var( - --highcontrast-slider-handle-border-color-key-focus, - var( - --mod-slider-handle-border-color-key-focus, - var(--spectrum-slider-handle-border-color-key-focus) - ) - ); + border-color: var( + --highcontrast-slider-handle-border-color-key-focus, + var( + --mod-slider-handle-border-color-key-focus, + var(--spectrum-slider-handle-border-color-key-focus) + ) + ); } .handle.handle-highlight:before { - inline-size: calc( - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * - 2 - ); - block-size: calc( - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * - 2 - ); - box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) - var( - --highcontrast-slider-handle-focus-ring-color-key-focus, - var( - --mod-slider-handle-focus-ring-color-key-focus, - var(--spectrum-slider-handle-focus-ring-color-key-focus) - ) - ); + inline-size: calc( + var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2 + ); + block-size: calc( + var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2 + ); + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) + var( + --highcontrast-slider-handle-focus-ring-color-key-focus, + var( + --mod-slider-handle-focus-ring-color-key-focus, + var(--spectrum-slider-handle-focus-ring-color-key-focus) + ) + ); } .handle.dragging { - background: var( - --highcontrast-slider-handle-background-color, - var( - --mod-slider-handle-background-color, - var(--spectrum-slider-handle-background-color) - ) - ); - border-color: var( - --highcontrast-slider-handle-border-color-down, - var( - --mod-slider-handle-border-color-down, - var(--spectrum-slider-handle-border-color-down) - ) - ); + background: var( + --highcontrast-slider-handle-background-color, + var( + --mod-slider-handle-background-color, + var(--spectrum-slider-handle-background-color) + ) + ); + border-color: var( + --highcontrast-slider-handle-border-color-down, + var( + --mod-slider-handle-border-color-down, + var(--spectrum-slider-handle-border-color-down) + ) + ); } .input { - pointer-events: none; - cursor: default; - inline-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - block-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - appearance: none; - opacity: 0.000001; - background: none; - border: 0; - margin: 0; - padding: 0; - position: absolute; - inset-block-start: var( - --mod-slider-input-top-size, - var(--spectrum-slider-input-top-size) - ); - inset-inline-start: var( - --mod-slider-input-left, - var(--spectrum-slider-input-left) - ); - overflow: hidden; + pointer-events: none; + cursor: default; + inline-size: var( + --mod-slider-handle-size, + var(--spectrum-slider-handle-size) + ); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + appearance: none; + opacity: 0.000001; + background: none; + border: 0; + margin: 0; + padding: 0; + position: absolute; + inset-block-start: var( + --mod-slider-input-top-size, + var(--spectrum-slider-input-top-size) + ); + inset-inline-start: var( + --mod-slider-input-left, + var(--spectrum-slider-input-left) + ); + overflow: hidden; } .input:focus { - outline: none; + outline: none; } #label-container { - inline-size: auto; - font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - color: var( - --highcontrast-slider-label-text-color, - var( - --mod-slider-label-text-color, - var(--spectrum-slider-label-text-color) - ) - ); - align-items: center; - margin-block-start: var( - --mod-slider-label-top-to-text, - var(--spectrum-slider-label-top-to-text) - ); - display: flex; - position: relative; + inline-size: auto; + font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + color: var( + --highcontrast-slider-label-text-color, + var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color)) + ); + align-items: center; + margin-block-start: var( + --mod-slider-label-top-to-text, + var(--spectrum-slider-label-top-to-text) + ); + display: flex; + position: relative; } #label-container:lang(ja), #label-container:lang(ko), #label-container:lang(zh) { - line-height: var( - --mod-slider-cjk-line-height, - var(--spectrum-slider-cjk-line-height) - ); + line-height: var( + --mod-slider-cjk-line-height, + var(--spectrum-slider-cjk-line-height) + ); } #label { - font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); - flex-grow: 1; - padding-inline-start: 0; + font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); + flex-grow: 1; + padding-inline-start: 0; } #value { - cursor: default; - font-feature-settings: 'tnum'; - text-align: end; - flex-grow: 0; - margin-inline-start: var( - --mod-slider-label-margin-start, - var(--spectrum-slider-label-margin-start) - ); - padding-inline-end: 0; + cursor: default; + font-feature-settings: "tnum"; + text-align: end; + flex-grow: 0; + margin-inline-start: var( + --mod-slider-label-margin-start, + var(--spectrum-slider-label-margin-start) + ); + padding-inline-end: 0; } .ticks { - z-index: 0; - margin-inline: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - justify-content: space-between; - display: flex; + z-index: 0; + margin-inline: var( + --mod-slider-track-margin-offset, + var(--spectrum-slider-track-margin-offset) + ); + justify-content: space-between; + display: flex; } .ticks ~ .handleContainer .handle { - background: var( - --mod-slider-ticks-handle-background-color, - var(--spectrum-slider-ticks-handle-background-color) - ); + background: var( + --mod-slider-ticks-handle-background-color, + var(--spectrum-slider-ticks-handle-background-color) + ); } .tick { - position: relative; - inset-block-start: calc( - var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / - 2 - - var( - --mod-slider-tick-mark-height, - var(--spectrum-slider-tick-mark-height) - ) / 2 - ); + position: relative; + inset-block-start: calc( + var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / + 2 - + var( + --mod-slider-tick-mark-height, + var(--spectrum-slider-tick-mark-height) + ) / + 2 + ); } .tick, .tick:after { - inline-size: var( - --mod-slider-tick-mark-width, - var(--spectrum-slider-tick-mark-width) - ); + inline-size: var( + --mod-slider-tick-mark-width, + var(--spectrum-slider-tick-mark-width) + ); } .tick:after { - content: ''; - block-size: var( - --mod-slider-tick-mark-height, - var(--spectrum-slider-tick-mark-height) - ); - border-radius: var( - --mod-slider-tick-mark-border-radius, - var(--spectrum-slider-tick-mark-border-radius) - ); - background-color: var( - --highcontrast-slider-tick-mark-color, - var( - --mod-slider-tick-mark-color, - var(--spectrum-slider-tick-mark-color) - ) - ); - display: block; - position: absolute; - inset-block-start: 0; - inset-inline-start: calc( - 50% - - var( - --mod-slider-tick-mark-width, - var(--spectrum-slider-tick-mark-width) - ) / 2 - ); + content: ""; + block-size: var( + --mod-slider-tick-mark-height, + var(--spectrum-slider-tick-mark-height) + ); + border-radius: var( + --mod-slider-tick-mark-border-radius, + var(--spectrum-slider-tick-mark-border-radius) + ); + background-color: var( + --highcontrast-slider-tick-mark-color, + var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)) + ); + display: block; + position: absolute; + inset-block-start: 0; + inset-inline-start: calc( + 50% - + var( + --mod-slider-tick-mark-width, + var(--spectrum-slider-tick-mark-width) + ) / + 2 + ); } .tick .tickLabel { - font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - color: var( - --highcontrast-slider-label-text-color, - var( - --mod-slider-tick-label-color, - var(--spectrum-slider-tick-label-color) - ) - ); - justify-content: center; - align-items: center; - display: flex; + font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + color: var( + --highcontrast-slider-label-text-color, + var(--mod-slider-tick-label-color, var(--spectrum-slider-tick-label-color)) + ); + justify-content: center; + align-items: center; + display: flex; } .tick:first-of-type .tickLabel, .tick:last-of-type .tickLabel { - margin-inline: 0; - display: block; - position: absolute; + margin-inline: 0; + display: block; + position: absolute; } .tick:first-of-type { - inset-inline-start: calc( - var( - --mod-slider-tick-mark-width, - var(--spectrum-slider-tick-mark-width) - ) / -2 - ); + inset-inline-start: calc( + var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / + -2 + ); } .tick:first-of-type .tickLabel { - inset-inline-start: 0; + inset-inline-start: 0; } .tick:last-of-type { - inset-inline-end: calc( - var( - --mod-slider-tick-mark-width, - var(--spectrum-slider-tick-mark-width) - ) / -2 - ); + inset-inline-end: calc( + var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / + -2 + ); } .tick:last-of-type .tickLabel { - inset-inline-end: 0; + inset-inline-end: 0; } .handleContainer, .trackContainer { - inline-size: calc(100% + var(--spectrum-slider-handle-size)); - margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1); - position: absolute; - inset-block-start: 0; + inline-size: calc(100% + var(--spectrum-slider-handle-size)); + margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1); + position: absolute; + inset-block-start: 0; } .trackContainer { - block-size: var( - --mod-slider-control-height, - var(--spectrum-slider-control-height) - ); - overflow: hidden; + block-size: var( + --mod-slider-control-height, + var(--spectrum-slider-control-height) + ); + overflow: hidden; } .track:not(:has(~ .spectrum-Slider-fill)):before { - background: var( - --highcontrast-slider-track-color, - var(--mod-slider-track-color, var(--spectrum-slider-track-color)) - ); -} - -:host([variant='filled']) .track:first-child:before { - background: var( - --highcontrast-slider-filled-track-fill-color, - var( - --mod-slider-track-fill-color, - var(--spectrum-slider-track-fill-color) - ) - ); -} - -:host([variant='ramp']) .handle { - background: var( - --mod-slider-ramp-handle-background-color, - var( - --highcontrast-slider-ramp-handle-background-color, - var(--spectrum-slider-ramp-handle-background-color) - ) - ); - box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) - var( - --highcontrast-slider-ramp-handle-border-color-active, - var( - --mod-sectrum-slider-ramp-handle-border-color-active, - var(--spectrum-slider-ramp-handle-border-color-active) - ) - ); + background: var( + --highcontrast-slider-track-color, + var(--mod-slider-track-color, var(--spectrum-slider-track-color)) + ); +} + +:host([variant="filled"]) .track:first-child:before { + background: var( + --highcontrast-slider-filled-track-fill-color, + var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)) + ); +} + +:host([variant="ramp"]) .handle { + background: var( + --mod-slider-ramp-handle-background-color, + var( + --highcontrast-slider-ramp-handle-background-color, + var(--spectrum-slider-ramp-handle-background-color) + ) + ); + box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) + var( + --highcontrast-slider-ramp-handle-border-color-active, + var( + --mod-sectrum-slider-ramp-handle-border-color-active, + var(--spectrum-slider-ramp-handle-border-color-active) + ) + ); } :host([disabled]), :host([disabled]) #controls { - cursor: default; + cursor: default; } :host([disabled]) #label-container, :host([disabled]) .tickLabel { - color: var( - --highcontrast-slider-label-text-color-disabled, - var( - --mod-slider-label-text-color-disabled, - var(--spectrum-slider-label-text-color-disabled) - ) - ); + color: var( + --highcontrast-slider-label-text-color-disabled, + var( + --mod-slider-label-text-color-disabled, + var(--spectrum-slider-label-text-color-disabled) + ) + ); } :host([disabled]) .handle { - pointer-events: none; - cursor: default; - background: var( - --highcontrast-slider-handle-disabled-background-color, - var( - --mod-slider-handle-disabled-background-color, - var(--spectrum-slider-handle-disabled-background-color) - ) - ); - border-color: var( - --highcontrast-slider-handle-border-color-disabled, - var( - --mod-slider-handle-border-color-disabled, - var(--spectrum-slider-handle-border-color-disabled) - ) - ); + pointer-events: none; + cursor: default; + background: var( + --highcontrast-slider-handle-disabled-background-color, + var( + --mod-slider-handle-disabled-background-color, + var(--spectrum-slider-handle-disabled-background-color) + ) + ); + border-color: var( + --highcontrast-slider-handle-border-color-disabled, + var( + --mod-slider-handle-border-color-disabled, + var(--spectrum-slider-handle-border-color-disabled) + ) + ); } :host([disabled]) .handle:active { - background: var( - --highcontrast-slider-handle-background-color-disabled, - var( - --mod-slider-handle-background-color-disabled, - var(--spectrum-slider-handle-background-color-disabled) - ) - ); - border-color: var( - --highcontrast-disabled-border-color, - var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)) - ); + background: var( + --highcontrast-slider-handle-background-color-disabled, + var( + --mod-slider-handle-background-color-disabled, + var(--spectrum-slider-handle-background-color-disabled) + ) + ); + border-color: var( + --highcontrast-disabled-border-color, + var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)) + ); } @media (hover: hover) { - .handle:hover { - border-color: var( - --highcontrast-slider-handle-border-color-hover, - var( - --mod-slider-handle-border-color-hover, - var(--spectrum-slider-handle-border-color-hover) - ) - ); - } - - :host([disabled]) .handle:hover { - background: var( - --highcontrast-slider-handle-background-color-disabled, - var( - --mod-slider-handle-background-color-disabled, - var(--spectrum-slider-handle-background-color-disabled) - ) - ); - border-color: var( - --highcontrast-disabled-border-color, - var( - --mod-disabled-border-color, - var(--spectrum-disabled-border-color) - ) - ); - } + .handle:hover { + border-color: var( + --highcontrast-slider-handle-border-color-hover, + var( + --mod-slider-handle-border-color-hover, + var(--spectrum-slider-handle-border-color-hover) + ) + ); + } + + :host([disabled]) .handle:hover { + background: var( + --highcontrast-slider-handle-background-color-disabled, + var( + --mod-slider-handle-background-color-disabled, + var(--spectrum-slider-handle-background-color-disabled) + ) + ); + border-color: var( + --highcontrast-disabled-border-color, + var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)) + ); + } } :host([disabled]) .track:before { - background: var( - --highcontrast-slider-track-color-disabled, - var( - --mod-slider-track-color-disabled, - var(--spectrum-slider-track-color-disabled) - ) - ); + background: var( + --highcontrast-slider-track-color-disabled, + var( + --mod-slider-track-color-disabled, + var(--spectrum-slider-track-color-disabled) + ) + ); } :host([disabled]) .fill:before, -:host([disabled][variant='filled']) .track:first-child:before { - background: var( - --highcontrast-slider-track-fill-color-disabled, - var( - --mod-slider-track-fill-color-disabled, - var(--spectrum-slider-track-fill-color-disabled) - ) - ); +:host([disabled][variant="filled"]) .track:first-child:before { + background: var( + --highcontrast-slider-track-fill-color-disabled, + var( + --mod-slider-track-fill-color-disabled, + var(--spectrum-slider-track-fill-color-disabled) + ) + ); } :host([disabled]) #ramp path { - fill: var( - --highcontrast-slider-ramp-track-color-disabled, - var( - --mod-slider-ramp-track-color-disabled, - var(--spectrum-slider-ramp-track-color-disabled) - ) - ); + fill: var( + --highcontrast-slider-ramp-track-color-disabled, + var( + --mod-slider-ramp-track-color-disabled, + var(--spectrum-slider-ramp-track-color-disabled) + ) + ); } :host([disabled]) .tick:after { - background-color: var( - --highcontrast-slider-tick-mark-color-disabled, - var( - --mod-slider-tick-mark-color-disabled, - var(--spectrum-slider-tick-mark-color-disabled) - ) - ); -} - -:host([disabled][variant='range']) - .track:not(:first-of-type, :last-of-type):before { - background: var( - --highcontrast-slider-track-color-disabled, - var( - --mod-slider-track-color-disabled, - var(--spectrum-slider-track-color-disabled) - ) - ); + background-color: var( + --highcontrast-slider-tick-mark-color-disabled, + var( + --mod-slider-tick-mark-color-disabled, + var(--spectrum-slider-tick-mark-color-disabled) + ) + ); +} + +:host([disabled][variant="range"]) + .track:not(:first-of-type, :last-of-type):before { + background: var( + --highcontrast-slider-track-color-disabled, + var( + --mod-slider-track-color-disabled, + var(--spectrum-slider-track-color-disabled) + ) + ); } @media (forced-colors: active) { - :host { - --highcontrast-slider-track-color: ButtonText; - --highcontrast-slider-track-color-disabled: GrayText; - --highcontrast-slider-track-color-static: ButtonText; - --highcontrast-slider-track-fill-color: ButtonText; - --highcontrast-slider-track-fill-color-disabled: GrayText; - --highcontrast-slider-filled-track-fill-color: Highlight; - --highcontrast-slider-ramp-track-color: ButtonText; - --highcontrast-slider-ramp-track-color-disabled: GrayText; - --highcontrast-slider-tick-mark-color: ButtonText; - --highcontrast-slider-tick-mark-color-disabled: GrayText; - --highcontrast-slider-handle-border-color: ButtonText; - --highcontrast-slider-handle-border-color-hover: Highlight; - --highcontrast-slider-handle-border-color-down: Highlight; - --highcontrast-slider-handle-border-color-key-focus: Highlight; - --highcontrast-slider-handle-border-color-disabled: GrayText; - --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; - --highcontrast-slider-handle-background-color: ButtonFace; - --highcontrast-slider-handle-background-color-disabled: GrayText; - --highcontrast-slider-handle-disabled-background-color: GrayText; - --highcontrast-slider-ramp-handle-border-color-active: ButtonFace; - --highcontrast-slider-ramp-handle-background-color: ButtonFace; - --highcontrast-slider-label-text-color: CanvasText; - --highcontrast-slider-label-text-color-disabled: GrayText; - } - - .handle.handle-highlight:before, - :host([variant='ramp']) .handle { - forced-color-adjust: none; - } - - :host([focus-within]) - .js-focus-within:not( - .is-disabled, - .spectrum-Slider--filled, - .spectrum-Slider--range - ) - #controls, - :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) - #controls.handle-highlight, - :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) - #controls:active, - :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) - #controls:focus-within, - :host([focus-within]):not( - .is-disabled, - .spectrum-Slider--filled, - .spectrum-Slider--range - ).js-focus-within - #controls { - --highcontrast-slider-track-fill-color: Highlight; - --highcontrast-slider-track-color: Highlight; - --highcontrast-slider-handle-border-color: Highlight; - --highcontrast-slider-ramp-track-color: Highlight; - --highcontrast-slider-tick-mark-color: Highlight; - } - - @media (hover: hover) { - :host:not( - .is-disabled, - .spectrum-Slider--filled, - .spectrum-Slider--range - ) - #controls:hover { - --highcontrast-slider-track-fill-color: Highlight; - --highcontrast-slider-track-color: Highlight; - --highcontrast-slider-handle-border-color: Highlight; - --highcontrast-slider-ramp-track-color: Highlight; - --highcontrast-slider-tick-mark-color: Highlight; - } - } - - :host([disabled]) #ramp + .handle { - background-color: ButtonFace; - fill: ButtonFace; - } + :host { + --highcontrast-slider-track-color: ButtonText; + --highcontrast-slider-track-color-disabled: GrayText; + --highcontrast-slider-track-color-static: ButtonText; + --highcontrast-slider-track-fill-color: ButtonText; + --highcontrast-slider-track-fill-color-disabled: GrayText; + --highcontrast-slider-filled-track-fill-color: Highlight; + --highcontrast-slider-ramp-track-color: ButtonText; + --highcontrast-slider-ramp-track-color-disabled: GrayText; + --highcontrast-slider-tick-mark-color: ButtonText; + --highcontrast-slider-tick-mark-color-disabled: GrayText; + --highcontrast-slider-handle-border-color: ButtonText; + --highcontrast-slider-handle-border-color-hover: Highlight; + --highcontrast-slider-handle-border-color-down: Highlight; + --highcontrast-slider-handle-border-color-key-focus: Highlight; + --highcontrast-slider-handle-border-color-disabled: GrayText; + --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; + --highcontrast-slider-handle-background-color: ButtonFace; + --highcontrast-slider-handle-background-color-disabled: GrayText; + --highcontrast-slider-handle-disabled-background-color: GrayText; + --highcontrast-slider-ramp-handle-border-color-active: ButtonFace; + --highcontrast-slider-ramp-handle-background-color: ButtonFace; + --highcontrast-slider-label-text-color: CanvasText; + --highcontrast-slider-label-text-color-disabled: GrayText; + } + + .handle.handle-highlight:before, + :host([variant="ramp"]) .handle { + forced-color-adjust: none; + } + + :host([focus-within]) + .js-focus-within:not( + .is-disabled, + .spectrum-Slider--filled, + .spectrum-Slider--range + ) + #controls, + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) + #controls.handle-highlight, + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) + #controls:active, + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) + #controls:focus-within, + :host([focus-within]):not( + .is-disabled, + .spectrum-Slider--filled, + .spectrum-Slider--range + ).js-focus-within + #controls { + --highcontrast-slider-track-fill-color: Highlight; + --highcontrast-slider-track-color: Highlight; + --highcontrast-slider-handle-border-color: Highlight; + --highcontrast-slider-ramp-track-color: Highlight; + --highcontrast-slider-tick-mark-color: Highlight; + } + + @media (hover: hover) { + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) + #controls:hover { + --highcontrast-slider-track-fill-color: Highlight; + --highcontrast-slider-track-color: Highlight; + --highcontrast-slider-handle-border-color: Highlight; + --highcontrast-slider-ramp-track-color: Highlight; + --highcontrast-slider-tick-mark-color: Highlight; + } + } + + :host([disabled]) #ramp + .handle { + background-color: ButtonFace; + fill: ButtonFace; + } } diff --git a/packages/split-view/src/spectrum-split-view.css b/packages/split-view/src/spectrum-split-view.css index bd59407e2e..db484f7fdf 100644 --- a/packages/split-view/src/spectrum-split-view.css +++ b/packages/split-view/src/spectrum-split-view.css @@ -12,403 +12,404 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - display: flex; - overflow: hidden; + display: flex; + overflow: hidden; } ::slotted(*) { - block-size: 100%; - background-color: var( - --mod-splitview-background-color, - var(--spectrum-splitview-background-color) - ); - color: var( - --mod-splitview-content-color, - var(--spectrum-splitview-content-color) - ); + block-size: 100%; + background-color: var( + --mod-splitview-background-color, + var(--spectrum-splitview-background-color) + ); + color: var( + --mod-splitview-content-color, + var(--spectrum-splitview-content-color) + ); } #gripper { - content: ''; - border-radius: var( - --mod-splitview-gripper-border-radius, - var(--spectrum-splitview-gripper-border-radius) - ); - border-style: solid; - border-color: var( - --highcontrast-splitview-handle-background-color, - var( - --mod-splitview-handle-background-color, - var(--spectrum-splitview-handle-background-color) - ) - ); - touch-action: none; - inline-size: var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ); - block-size: var( - --mod-splitview-gripper-height, - var(--spectrum-splitview-gripper-height) - ); - border-block-width: var( - --mod-splitview-gripper-border-width-vertical, - var(--spectrum-splitview-gripper-border-width-vertical) - ); - border-inline-width: var( - --mod-splitview-gripper-border-width-horizontal, - var(--spectrum-splitview-gripper-border-width-horizontal) - ); - display: block; - position: absolute; - inset-block-start: 50%; - inset-inline-start: calc( - ( - var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ) + - ( - 2 * - var( - --mod-splitview-gripper-border-width-vertical, - var( - --spectrum-splitview-gripper-border-width-vertical - ) - ) - ) - - var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ) - ) / 2 * -1 - ); - transform: translateY(-50%); + content: ""; + border-radius: var( + --mod-splitview-gripper-border-radius, + var(--spectrum-splitview-gripper-border-radius) + ); + border-style: solid; + border-color: var( + --highcontrast-splitview-handle-background-color, + var( + --mod-splitview-handle-background-color, + var(--spectrum-splitview-handle-background-color) + ) + ); + touch-action: none; + inline-size: var( + --mod-splitview-gripper-width, + var(--spectrum-splitview-gripper-width) + ); + block-size: var( + --mod-splitview-gripper-height, + var(--spectrum-splitview-gripper-height) + ); + border-block-width: var( + --mod-splitview-gripper-border-width-vertical, + var(--spectrum-splitview-gripper-border-width-vertical) + ); + border-inline-width: var( + --mod-splitview-gripper-border-width-horizontal, + var(--spectrum-splitview-gripper-border-width-horizontal) + ); + display: block; + position: absolute; + inset-block-start: 50%; + inset-inline-start: calc( + ( + var( + --mod-splitview-gripper-width, + var(--spectrum-splitview-gripper-width) + ) + + ( + 2 * + var( + --mod-splitview-gripper-border-width-vertical, + var(--spectrum-splitview-gripper-border-width-vertical) + ) + ) - + var( + --mod-splitview-gripper-width, + var(--spectrum-splitview-gripper-width) + ) + ) / + 2 * -1 + ); + transform: translateY(-50%); } #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color, - var( - --mod-splitview-handle-background-color, - var(--spectrum-splitview-handle-background-color) - ) - ); + background-color: var( + --highcontrast-splitview-handle-background-color, + var( + --mod-splitview-handle-background-color, + var(--spectrum-splitview-handle-background-color) + ) + ); } #splitter { - background-color: var( - --highcontrast-splitview-handle-background-color, - var( - --mod-splitview-handle-background-color, - var(--spectrum-splitview-handle-background-color) - ) - ); - -webkit-user-select: none; - user-select: none; - inline-size: var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ); - block-size: 100%; - z-index: 1; - position: relative; + background-color: var( + --highcontrast-splitview-handle-background-color, + var( + --mod-splitview-handle-background-color, + var(--spectrum-splitview-handle-background-color) + ) + ); + -webkit-user-select: none; + user-select: none; + inline-size: var( + --mod-splitview-handle-width, + var(--spectrum-splitview-handle-width) + ); + block-size: 100%; + z-index: 1; + position: relative; } #splitter.is-collapsed-end #gripper:before, #splitter.is-collapsed-start #gripper:before { - content: ''; - inline-size: var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ); - block-size: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: calc( - 50% - - var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ) / 2 - ); + content: ""; + inline-size: var( + --mod-splitview-handle-width, + var(--spectrum-splitview-handle-width) + ); + block-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: calc( + 50% - + var( + --mod-splitview-handle-width, + var(--spectrum-splitview-handle-width) + ) / + 2 + ); } #splitter.is-collapsed-start #gripper { - inset-inline-start: 0; + inset-inline-start: 0; } #splitter.is-collapsed-end #gripper { - inset-inline: auto 0; + inset-inline: auto 0; } :host([resizable]) #splitter.is-hovered { - background-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); + background-color: var( + --highcontrast-splitview-handle-background-color-hover, + var( + --mod-splitview-handle-background-color-hover, + var(--spectrum-splitview-handle-background-color-hover) + ) + ); } :host([resizable]) #splitter.is-hovered #gripper { - border-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); + border-color: var( + --highcontrast-splitview-handle-background-color-hover, + var( + --mod-splitview-handle-background-color-hover, + var(--spectrum-splitview-handle-background-color-hover) + ) + ); } :host([resizable]) #splitter.is-hovered #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); + background-color: var( + --highcontrast-splitview-handle-background-color-hover, + var( + --mod-splitview-handle-background-color-hover, + var(--spectrum-splitview-handle-background-color-hover) + ) + ); } @media (hover: hover) { - :host([resizable]) #splitter:hover { - background-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); - } + :host([resizable]) #splitter:hover { + background-color: var( + --highcontrast-splitview-handle-background-color-hover, + var( + --mod-splitview-handle-background-color-hover, + var(--spectrum-splitview-handle-background-color-hover) + ) + ); + } - :host([resizable]) #splitter:hover #gripper { - border-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); - } + :host([resizable]) #splitter:hover #gripper { + border-color: var( + --highcontrast-splitview-handle-background-color-hover, + var( + --mod-splitview-handle-background-color-hover, + var(--spectrum-splitview-handle-background-color-hover) + ) + ); + } - :host([resizable]) #splitter:hover #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); - } + :host([resizable]) #splitter:hover #gripper:before { + background-color: var( + --highcontrast-splitview-handle-background-color-hover, + var( + --mod-splitview-handle-background-color-hover, + var(--spectrum-splitview-handle-background-color-hover) + ) + ); + } } :host([resizable]) #splitter.is-active, :host([resizable]) #splitter:active { - background-color: var( - --highcontrast-splitview-handle-background-color-down, - var( - --mod-splitview-handle-background-color-down, - var(--spectrum-splitview-handle-background-color-down) - ) - ); + background-color: var( + --highcontrast-splitview-handle-background-color-down, + var( + --mod-splitview-handle-background-color-down, + var(--spectrum-splitview-handle-background-color-down) + ) + ); } :host([resizable]) #splitter.is-active #gripper, :host([resizable]) #splitter:active #gripper { - border-color: var( - --highcontrast-splitview-handle-background-color-down, - var( - --mod-splitview-handle-background-color-down, - var(--spectrum-splitview-handle-background-color-down) - ) - ); + border-color: var( + --highcontrast-splitview-handle-background-color-down, + var( + --mod-splitview-handle-background-color-down, + var(--spectrum-splitview-handle-background-color-down) + ) + ); } :host([resizable]) #splitter.is-active #gripper:before, :host([resizable]) #splitter:active #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color-down, - var( - --mod-splitview-handle-background-color-down, - var(--spectrum-splitview-handle-background-color-down) - ) - ); + background-color: var( + --highcontrast-splitview-handle-background-color-down, + var( + --mod-splitview-handle-background-color-down, + var(--spectrum-splitview-handle-background-color-down) + ) + ); } :host([resizable]) #splitter:focus { - outline: none; + outline: none; } :host([resizable]) #splitter:focus-visible { - background-color: var( - --highcontrast-splitview-handle-background-color-focus, - var( - --mod-splitview-handle-background-color-focus, - var(--spectrum-splitview-handle-background-color-focus) - ) - ); - outline: none; + background-color: var( + --highcontrast-splitview-handle-background-color-focus, + var( + --mod-splitview-handle-background-color-focus, + var(--spectrum-splitview-handle-background-color-focus) + ) + ); + outline: none; } :host([resizable]) #splitter:focus-visible #gripper { - border-color: var( - --highcontrast-splitview-handle-background-color-focus, - var( - --mod-splitview-handle-background-color-focus, - var(--spectrum-splitview-handle-background-color-focus) - ) - ); - box-shadow: 0 0 0 1px - var( - --highcontrast-splitview-handle-background-color-focus, - var( - --mod-splitview-handle-background-color-focus, - var(--spectrum-splitview-handle-background-color-focus) - ) - ); + border-color: var( + --highcontrast-splitview-handle-background-color-focus, + var( + --mod-splitview-handle-background-color-focus, + var(--spectrum-splitview-handle-background-color-focus) + ) + ); + box-shadow: 0 0 0 1px + var( + --highcontrast-splitview-handle-background-color-focus, + var( + --mod-splitview-handle-background-color-focus, + var(--spectrum-splitview-handle-background-color-focus) + ) + ); } :host([resizable]) #splitter:focus-visible #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color-focus, - var( - --mod-splitview-handle-background-color-focus, - var(--spectrum-splitview-handle-background-color-focus) - ) - ); + background-color: var( + --highcontrast-splitview-handle-background-color-focus, + var( + --mod-splitview-handle-background-color-focus, + var(--spectrum-splitview-handle-background-color-focus) + ) + ); } :host([vertical]) { - flex-direction: column; + flex-direction: column; } :host([vertical]) ::slotted(*) { - block-size: auto; - inline-size: var( - --mod-splitview-vertical-width, - var(--spectrum-splitview-vertical-width) - ); + block-size: auto; + inline-size: var( + --mod-splitview-vertical-width, + var(--spectrum-splitview-vertical-width) + ); } :host([vertical]) #gripper { - transform: translate( - calc( - var( - --mod-splitview-vertical-gripper-width, - var(--spectrum-splitview-vertical-gripper-width) - ) * -1 - ) - ); - inline-size: var( - --mod-splitview-gripper-height, - var(--spectrum-splitview-gripper-height) - ); - block-size: var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ); - border-block-width: var( - --mod-splitview-gripper-border-width-horizontal, - var(--spectrum-splitview-gripper-border-width-horizontal) - ); - border-inline-width: var( - --mod-splitview-gripper-border-width-vertical, - var(--spectrum-splitview-gripper-border-width-vertical) - ); - inset-block-start: calc( - ( - var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ) + - ( - 2 * - var( - --mod-splitview-gripper-border-width-vertical, - var( - --spectrum-splitview-gripper-border-width-vertical - ) - ) - ) - - var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ) - ) / 2 * -1 - ); - inset-inline-start: var( - --mod-splitview-vertical-gripper-width, - var(--spectrum-splitview-vertical-gripper-width) - ); + transform: translate( + calc( + var( + --mod-splitview-vertical-gripper-width, + var(--spectrum-splitview-vertical-gripper-width) + ) * + -1 + ) + ); + inline-size: var( + --mod-splitview-gripper-height, + var(--spectrum-splitview-gripper-height) + ); + block-size: var( + --mod-splitview-gripper-width, + var(--spectrum-splitview-gripper-width) + ); + border-block-width: var( + --mod-splitview-gripper-border-width-horizontal, + var(--spectrum-splitview-gripper-border-width-horizontal) + ); + border-inline-width: var( + --mod-splitview-gripper-border-width-vertical, + var(--spectrum-splitview-gripper-border-width-vertical) + ); + inset-block-start: calc( + ( + var( + --mod-splitview-gripper-width, + var(--spectrum-splitview-gripper-width) + ) + + ( + 2 * + var( + --mod-splitview-gripper-border-width-vertical, + var(--spectrum-splitview-gripper-border-width-vertical) + ) + ) - + var( + --mod-splitview-gripper-width, + var(--spectrum-splitview-gripper-width) + ) + ) / + 2 * -1 + ); + inset-inline-start: var( + --mod-splitview-vertical-gripper-width, + var(--spectrum-splitview-vertical-gripper-width) + ); } :host([vertical]) #splitter { - inline-size: var( - --mod-splitview-vertical-width, - var(--spectrum-splitview-vertical-width) - ); - block-size: var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ); + inline-size: var( + --mod-splitview-vertical-width, + var(--spectrum-splitview-vertical-width) + ); + block-size: var( + --mod-splitview-handle-width, + var(--spectrum-splitview-handle-width) + ); } :host([vertical]) #splitter.is-collapsed-end #gripper, :host([vertical]) #splitter.is-collapsed-start #gripper { - inset-inline-start: var( - --mod-splitview-vertical-gripper-width, - var(--spectrum-splitview-vertical-gripper-width) - ); + inset-inline-start: var( + --mod-splitview-vertical-gripper-width, + var(--spectrum-splitview-vertical-gripper-width) + ); } :host([vertical]) #splitter.is-collapsed-end #gripper:before, :host([vertical]) #splitter.is-collapsed-start #gripper:before { - inline-size: var( - --mod-splitview-vertical-gripper-outer-width, - var(--spectrum-splitview-vertical-gripper-outer-width) - ); - block-size: var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ); - inset-block-start: calc( - var( - --mod-splitview-vertical-gripper-width, - var(--spectrum-splitview-vertical-gripper-width) - ) - - var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ) / 2 - ); - inset-inline-start: var( - --mod-splitview-vertical-gripper-reset, - var(--spectrum-splitview-vertical-gripper-reset) - ); + inline-size: var( + --mod-splitview-vertical-gripper-outer-width, + var(--spectrum-splitview-vertical-gripper-outer-width) + ); + block-size: var( + --mod-splitview-handle-width, + var(--spectrum-splitview-handle-width) + ); + inset-block-start: calc( + var( + --mod-splitview-vertical-gripper-width, + var(--spectrum-splitview-vertical-gripper-width) + ) - + var( + --mod-splitview-handle-width, + var(--spectrum-splitview-handle-width) + ) / + 2 + ); + inset-inline-start: var( + --mod-splitview-vertical-gripper-reset, + var(--spectrum-splitview-vertical-gripper-reset) + ); } :host([vertical]) #splitter.is-collapsed-start #gripper { - inset-block-start: var( - --mod-splitview-vertical-gripper-reset, - var(--spectrum-splitview-vertical-gripper-reset) - ); + inset-block-start: var( + --mod-splitview-vertical-gripper-reset, + var(--spectrum-splitview-vertical-gripper-reset) + ); } :host([vertical]) #splitter.is-collapsed-end #gripper { - inset-block-start: auto; - inset-block-end: var( - --mod-splitview-vertical-gripper-reset, - var(--spectrum-splitview-vertical-gripper-reset) - ); + inset-block-start: auto; + inset-block-end: var( + --mod-splitview-vertical-gripper-reset, + var(--spectrum-splitview-vertical-gripper-reset) + ); } @media (forced-colors: active) { - :host { - --highcontrast-splitview-handle-background-color: CanvasText; - --highcontrast-splitview-handle-background-color-hover: CanvasText; - --highcontrast-splitview-handle-background-color-down: CanvasText; - --highcontrast-splitview-handle-background-color-focus: Highlight; - } + :host { + --highcontrast-splitview-handle-background-color: CanvasText; + --highcontrast-splitview-handle-background-color-hover: CanvasText; + --highcontrast-splitview-handle-background-color-down: CanvasText; + --highcontrast-splitview-handle-background-color-focus: Highlight; + } } diff --git a/packages/split-view/src/split-view-overrides.css b/packages/split-view/src/split-view-overrides.css index bf8a6170f7..b218f152aa 100644 --- a/packages/split-view/src/split-view-overrides.css +++ b/packages/split-view/src/split-view-overrides.css @@ -12,46 +12,42 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-splitview-vertical-width: var( - --system-split-view-vertical-width - ); - --spectrum-splitview-vertical-gripper-width: var( - --system-split-view-vertical-gripper-width - ); - --spectrum-splitview-vertical-gripper-outer-width: var( - --system-split-view-vertical-gripper-outer-width - ); - --spectrum-splitview-vertical-gripper-reset: var( - --system-split-view-vertical-gripper-reset - ); - --spectrum-splitview-background-color: var( - --system-split-view-background-color - ); - --spectrum-splitview-content-color: var(--system-split-view-content-color); - --spectrum-splitview-handle-background-color: var( - --system-split-view-handle-background-color - ); - --spectrum-splitview-handle-background-color-hover: var( - --system-split-view-handle-background-color-hover - ); - --spectrum-splitview-handle-background-color-down: var( - --system-split-view-handle-background-color-down - ); - --spectrum-splitview-handle-background-color-focus: var( - --system-split-view-handle-background-color-focus - ); - --spectrum-splitview-handle-width: var(--system-split-view-handle-width); - --spectrum-splitview-gripper-border-radius: var( - --system-split-view-gripper-border-radius - ); - --spectrum-splitview-gripper-width: var(--system-split-view-gripper-width); - --spectrum-splitview-gripper-height: var( - --system-split-view-gripper-height - ); - --spectrum-splitview-gripper-border-width-horizontal: var( - --system-split-view-gripper-border-width-horizontal - ); - --spectrum-splitview-gripper-border-width-vertical: var( - --system-split-view-gripper-border-width-vertical - ); + --spectrum-splitview-vertical-width: var(--system-split-view-vertical-width); + --spectrum-splitview-vertical-gripper-width: var( + --system-split-view-vertical-gripper-width + ); + --spectrum-splitview-vertical-gripper-outer-width: var( + --system-split-view-vertical-gripper-outer-width + ); + --spectrum-splitview-vertical-gripper-reset: var( + --system-split-view-vertical-gripper-reset + ); + --spectrum-splitview-background-color: var( + --system-split-view-background-color + ); + --spectrum-splitview-content-color: var(--system-split-view-content-color); + --spectrum-splitview-handle-background-color: var( + --system-split-view-handle-background-color + ); + --spectrum-splitview-handle-background-color-hover: var( + --system-split-view-handle-background-color-hover + ); + --spectrum-splitview-handle-background-color-down: var( + --system-split-view-handle-background-color-down + ); + --spectrum-splitview-handle-background-color-focus: var( + --system-split-view-handle-background-color-focus + ); + --spectrum-splitview-handle-width: var(--system-split-view-handle-width); + --spectrum-splitview-gripper-border-radius: var( + --system-split-view-gripper-border-radius + ); + --spectrum-splitview-gripper-width: var(--system-split-view-gripper-width); + --spectrum-splitview-gripper-height: var(--system-split-view-gripper-height); + --spectrum-splitview-gripper-border-width-horizontal: var( + --system-split-view-gripper-border-width-horizontal + ); + --spectrum-splitview-gripper-border-width-vertical: var( + --system-split-view-gripper-border-width-vertical + ); } diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css index 801a523072..36ed87093e 100644 --- a/packages/status-light/src/spectrum-status-light.css +++ b/packages/status-light/src/spectrum-status-light.css @@ -12,251 +12,251 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir]) { - min-block-size: var( - --mod-statuslight-height, - var(--spectrum-statuslight-height) - ); - box-sizing: border-box; - font-size: var( - --mod-statuslight-font-size, - var(--spectrum-statuslight-font-size) - ); - font-weight: var( - --mod-statuslight-font-weight, - var(--spectrum-statuslight-font-weight) - ); - line-height: var( - --mod-statuslight-line-height, - var(--spectrum-statuslight-line-height) - ); - color: var( - --highcontrast-statuslight-content-color-default, - var( - --mod-statuslight-content-color-default, - var(--spectrum-statuslight-content-color-default) - ) - ); - flex-direction: row; - align-items: flex-start; - padding-block-start: var( - --mod-statuslight-spacing-top-to-label, - var(--spectrum-statuslight-spacing-top-to-label) - ); - padding-block-end: var( - --mod-statuslight-spacing-bottom-to-label, - var(--spectrum-statuslight-spacing-bottom-to-label) - ); - padding-inline: 0; - display: flex; + min-block-size: var( + --mod-statuslight-height, + var(--spectrum-statuslight-height) + ); + box-sizing: border-box; + font-size: var( + --mod-statuslight-font-size, + var(--spectrum-statuslight-font-size) + ); + font-weight: var( + --mod-statuslight-font-weight, + var(--spectrum-statuslight-font-weight) + ); + line-height: var( + --mod-statuslight-line-height, + var(--spectrum-statuslight-line-height) + ); + color: var( + --highcontrast-statuslight-content-color-default, + var( + --mod-statuslight-content-color-default, + var(--spectrum-statuslight-content-color-default) + ) + ); + flex-direction: row; + align-items: flex-start; + padding-block-start: var( + --mod-statuslight-spacing-top-to-label, + var(--spectrum-statuslight-spacing-top-to-label) + ); + padding-block-end: var( + --mod-statuslight-spacing-bottom-to-label, + var(--spectrum-statuslight-spacing-bottom-to-label) + ); + padding-inline: 0; + display: flex; } :host(:lang(ja)), :host(:lang(ko)), :host(:lang(zh)) { - line-height: var( - --mod-statuslight-line-height-cjk, - var(--spectrum-statuslight-line-height-cjk) - ); + line-height: var( + --mod-statuslight-line-height-cjk, + var(--spectrum-statuslight-line-height-cjk) + ); } :host:before { - --spectrum-statuslight-spacing-computed-top-to-dot: calc( - var( - --mod-statuslight-spacing-top-to-dot, - var(--spectrum-statuslight-spacing-top-to-dot) - ) - - var( - --mod-statuslight-spacing-top-to-label, - var(--spectrum-statuslight-spacing-top-to-label) - ) - ); - content: ''; - inline-size: var( - --mod-statuslight-dot-size, - var(--spectrum-statuslight-dot-size) - ); - block-size: var( - --mod-statuslight-dot-size, - var(--spectrum-statuslight-dot-size) - ); - border-radius: var( - --mod-statuslight-corner-radius, - var(--spectrum-statuslight-corner-radius) - ); - flex-grow: 0; - flex-shrink: 0; - margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); - margin-inline-end: var( - --mod-statuslight-spacing-dot-to-label, - var(--spectrum-statuslight-spacing-dot-to-label) - ); - display: inline-block; + --spectrum-statuslight-spacing-computed-top-to-dot: calc( + var( + --mod-statuslight-spacing-top-to-dot, + var(--spectrum-statuslight-spacing-top-to-dot) + ) - + var( + --mod-statuslight-spacing-top-to-label, + var(--spectrum-statuslight-spacing-top-to-label) + ) + ); + content: ""; + inline-size: var( + --mod-statuslight-dot-size, + var(--spectrum-statuslight-dot-size) + ); + block-size: var( + --mod-statuslight-dot-size, + var(--spectrum-statuslight-dot-size) + ); + border-radius: var( + --mod-statuslight-corner-radius, + var(--spectrum-statuslight-corner-radius) + ); + flex-grow: 0; + flex-shrink: 0; + margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); + margin-inline-end: var( + --mod-statuslight-spacing-dot-to-label, + var(--spectrum-statuslight-spacing-dot-to-label) + ); + display: inline-block; } -:host([variant='neutral']) { - color: var( - --highcontrast-statuslight-subdued-content-color-default, - var( - --mod-statuslight-subdued-content-color-default, - var(--spectrum-statuslight-subdued-content-color-default) - ) - ); - font-style: italic; +:host([variant="neutral"]) { + color: var( + --highcontrast-statuslight-subdued-content-color-default, + var( + --mod-statuslight-subdued-content-color-default, + var(--spectrum-statuslight-subdued-content-color-default) + ) + ); + font-style: italic; } -:host([variant='neutral']):before { - background-color: var( - --mod-statuslight-semantic-neutral-color, - var(--spectrum-statuslight-semantic-neutral-color) - ); +:host([variant="neutral"]):before { + background-color: var( + --mod-statuslight-semantic-neutral-color, + var(--spectrum-statuslight-semantic-neutral-color) + ); } .spectrum-StatusLight--accent:before { - background-color: var( - --mod-statuslight-semantic-accent-color, - var(--spectrum-statuslight-semantic-accent-color) - ); + background-color: var( + --mod-statuslight-semantic-accent-color, + var(--spectrum-statuslight-semantic-accent-color) + ); } -:host([variant='info']):before { - background-color: var( - --mod-statuslight-semantic-info-color, - var(--spectrum-statuslight-semantic-info-color) - ); +:host([variant="info"]):before { + background-color: var( + --mod-statuslight-semantic-info-color, + var(--spectrum-statuslight-semantic-info-color) + ); } -:host([variant='negative']):before { - background-color: var( - --mod-statuslight-semantic-negative-color, - var(--spectrum-statuslight-semantic-negative-color) - ); +:host([variant="negative"]):before { + background-color: var( + --mod-statuslight-semantic-negative-color, + var(--spectrum-statuslight-semantic-negative-color) + ); } -:host([variant='notice']):before { - background-color: var( - --mod-statuslight-semantic-notice-color, - var(--spectrum-statuslight-semantic-notice-color) - ); +:host([variant="notice"]):before { + background-color: var( + --mod-statuslight-semantic-notice-color, + var(--spectrum-statuslight-semantic-notice-color) + ); } -:host([variant='positive']):before { - background-color: var( - --mod-statuslight-semantic-positive-color, - var(--spectrum-statuslight-semantic-positive-color) - ); +:host([variant="positive"]):before { + background-color: var( + --mod-statuslight-semantic-positive-color, + var(--spectrum-statuslight-semantic-positive-color) + ); } .spectrum-StatusLight--gray:before { - background-color: var( - --mod-statuslight-nonsemantic-gray-color, - var(--spectrum-statuslight-nonsemantic-gray-color) - ); + background-color: var( + --mod-statuslight-nonsemantic-gray-color, + var(--spectrum-statuslight-nonsemantic-gray-color) + ); } .spectrum-StatusLight--red:before { - background-color: var( - --mod-statuslight-nonsemantic-red-color, - var(--spectrum-statuslight-nonsemantic-red-color) - ); + background-color: var( + --mod-statuslight-nonsemantic-red-color, + var(--spectrum-statuslight-nonsemantic-red-color) + ); } .spectrum-StatusLight--orange:before { - background-color: var( - --mod-statuslight-nonsemantic-orange-color, - var(--spectrum-statuslight-nonsemantic-orange-color) - ); + background-color: var( + --mod-statuslight-nonsemantic-orange-color, + var(--spectrum-statuslight-nonsemantic-orange-color) + ); } -:host([variant='yellow']):before { - background-color: var( - --mod-statuslight-nonsemantic-yellow-color, - var(--spectrum-statuslight-nonsemantic-yellow-color) - ); +:host([variant="yellow"]):before { + background-color: var( + --mod-statuslight-nonsemantic-yellow-color, + var(--spectrum-statuslight-nonsemantic-yellow-color) + ); } -:host([variant='chartreuse']):before { - background-color: var( - --mod-statuslight-nonsemantic-chartreuse-color, - var(--spectrum-statuslight-nonsemantic-chartreuse-color) - ); +:host([variant="chartreuse"]):before { + background-color: var( + --mod-statuslight-nonsemantic-chartreuse-color, + var(--spectrum-statuslight-nonsemantic-chartreuse-color) + ); } -:host([variant='celery']):before { - background-color: var( - --mod-statuslight-nonsemantic-celery-color, - var(--spectrum-statuslight-nonsemantic-celery-color) - ); +:host([variant="celery"]):before { + background-color: var( + --mod-statuslight-nonsemantic-celery-color, + var(--spectrum-statuslight-nonsemantic-celery-color) + ); } .spectrum-StatusLight--green:before { - background-color: var( - --mod-statuslight-nonsemantic-green-color, - var(--spectrum-statuslight-nonsemantic-green-color) - ); + background-color: var( + --mod-statuslight-nonsemantic-green-color, + var(--spectrum-statuslight-nonsemantic-green-color) + ); } -:host([variant='seafoam']):before { - background-color: var( - --mod-statuslight-nonsemantic-seafoam-color, - var(--spectrum-statuslight-nonsemantic-seafoam-color) - ); +:host([variant="seafoam"]):before { + background-color: var( + --mod-statuslight-nonsemantic-seafoam-color, + var(--spectrum-statuslight-nonsemantic-seafoam-color) + ); } .spectrum-StatusLight--cyan:before { - background-color: var( - --mod-statuslight-nonsemantic-cyan-color, - var(--spectrum-statuslight-nonsemantic-cyan-color) - ); + background-color: var( + --mod-statuslight-nonsemantic-cyan-color, + var(--spectrum-statuslight-nonsemantic-cyan-color) + ); } .spectrum-StatusLight--blue:before { - background-color: var( - --mod-statuslight-nonsemantic-blue-color, - var(--spectrum-statuslight-nonsemantic-blue-color) - ); + background-color: var( + --mod-statuslight-nonsemantic-blue-color, + var(--spectrum-statuslight-nonsemantic-blue-color) + ); } -:host([variant='indigo']):before { - background-color: var( - --mod-statuslight-nonsemantic-indigo-color, - var(--spectrum-statuslight-nonsemantic-indigo-color) - ); +:host([variant="indigo"]):before { + background-color: var( + --mod-statuslight-nonsemantic-indigo-color, + var(--spectrum-statuslight-nonsemantic-indigo-color) + ); } -:host([variant='purple']):before { - background-color: var( - --mod-statuslight-nonsemantic-purple-color, - var(--spectrum-statuslight-nonsemantic-purple-color) - ); +:host([variant="purple"]):before { + background-color: var( + --mod-statuslight-nonsemantic-purple-color, + var(--spectrum-statuslight-nonsemantic-purple-color) + ); } -:host([variant='fuchsia']):before { - background-color: var( - --mod-statuslight-nonsemantic-fuchsia-color, - var(--spectrum-statuslight-nonsemantic-fuchsia-color) - ); +:host([variant="fuchsia"]):before { + background-color: var( + --mod-statuslight-nonsemantic-fuchsia-color, + var(--spectrum-statuslight-nonsemantic-fuchsia-color) + ); } -:host([variant='magenta']):before { - background-color: var( - --mod-statuslight-nonsemantic-magenta-color, - var(--spectrum-statuslight-nonsemantic-magenta-color) - ); +:host([variant="magenta"]):before { + background-color: var( + --mod-statuslight-nonsemantic-magenta-color, + var(--spectrum-statuslight-nonsemantic-magenta-color) + ); } @media (forced-colors: active) { - :host([dir]) { - --highcontrast-statuslight-content-color-default: CanvasText; - --highcontrast-statuslight-subdued-content-color-default: CanvasText; - forced-color-adjust: none; - } + :host([dir]) { + --highcontrast-statuslight-content-color-default: CanvasText; + --highcontrast-statuslight-subdued-content-color-default: CanvasText; + forced-color-adjust: none; + } - :host:before { - forced-color-adjust: none; - border: var( - --mod-statuslight-border-width, - var(--spectrum-statuslight-border-width) - ) - solid ButtonText; - } + :host:before { + forced-color-adjust: none; + border: var( + --mod-statuslight-border-width, + var(--spectrum-statuslight-border-width) + ) + solid ButtonText; + } } diff --git a/packages/status-light/src/status-light-overrides.css b/packages/status-light/src/status-light-overrides.css index 9e4b38fe6c..39862fbdb1 100644 --- a/packages/status-light/src/status-light-overrides.css +++ b/packages/status-light/src/status-light-overrides.css @@ -12,178 +12,168 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir]) { - --spectrum-statuslight-corner-radius: var( - --system-status-light-corner-radius - ); - --spectrum-statuslight-font-weight: var(--system-status-light-font-weight); - --spectrum-statuslight-border-width: var( - --system-status-light-border-width - ); - --spectrum-statuslight-height: var(--system-status-light-height); - --spectrum-statuslight-dot-size: var(--system-status-light-dot-size); - --spectrum-statuslight-line-height: var(--system-status-light-line-height); - --spectrum-statuslight-line-height-cjk: var( - --system-status-light-line-height-cjk - ); - --spectrum-statuslight-font-size: var(--system-status-light-font-size); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-spacing-bottom-to-label - ); - --spectrum-statuslight-content-color-default: var( - --system-status-light-content-color-default - ); - --spectrum-statuslight-subdued-content-color-default: var( - --system-status-light-subdued-content-color-default - ); - --spectrum-statuslight-semantic-neutral-color: var( - --system-status-light-semantic-neutral-color - ); - --spectrum-statuslight-semantic-accent-color: var( - --system-status-light-semantic-accent-color - ); - --spectrum-statuslight-semantic-negative-color: var( - --system-status-light-semantic-negative-color - ); - --spectrum-statuslight-semantic-info-color: var( - --system-status-light-semantic-info-color - ); - --spectrum-statuslight-semantic-notice-color: var( - --system-status-light-semantic-notice-color - ); - --spectrum-statuslight-semantic-positive-color: var( - --system-status-light-semantic-positive-color - ); - --spectrum-statuslight-nonsemantic-gray-color: var( - --system-status-light-nonsemantic-gray-color - ); - --spectrum-statuslight-nonsemantic-red-color: var( - --system-status-light-nonsemantic-red-color - ); - --spectrum-statuslight-nonsemantic-orange-color: var( - --system-status-light-nonsemantic-orange-color - ); - --spectrum-statuslight-nonsemantic-yellow-color: var( - --system-status-light-nonsemantic-yellow-color - ); - --spectrum-statuslight-nonsemantic-chartreuse-color: var( - --system-status-light-nonsemantic-chartreuse-color - ); - --spectrum-statuslight-nonsemantic-celery-color: var( - --system-status-light-nonsemantic-celery-color - ); - --spectrum-statuslight-nonsemantic-green-color: var( - --system-status-light-nonsemantic-green-color - ); - --spectrum-statuslight-nonsemantic-seafoam-color: var( - --system-status-light-nonsemantic-seafoam-color - ); - --spectrum-statuslight-nonsemantic-cyan-color: var( - --system-status-light-nonsemantic-cyan-color - ); - --spectrum-statuslight-nonsemantic-blue-color: var( - --system-status-light-nonsemantic-blue-color - ); - --spectrum-statuslight-nonsemantic-indigo-color: var( - --system-status-light-nonsemantic-indigo-color - ); - --spectrum-statuslight-nonsemantic-purple-color: var( - --system-status-light-nonsemantic-purple-color - ); - --spectrum-statuslight-nonsemantic-fuchsia-color: var( - --system-status-light-nonsemantic-fuchsia-color - ); - --spectrum-statuslight-nonsemantic-magenta-color: var( - --system-status-light-nonsemantic-magenta-color - ); + --spectrum-statuslight-corner-radius: var( + --system-status-light-corner-radius + ); + --spectrum-statuslight-font-weight: var(--system-status-light-font-weight); + --spectrum-statuslight-border-width: var(--system-status-light-border-width); + --spectrum-statuslight-height: var(--system-status-light-height); + --spectrum-statuslight-dot-size: var(--system-status-light-dot-size); + --spectrum-statuslight-line-height: var(--system-status-light-line-height); + --spectrum-statuslight-line-height-cjk: var( + --system-status-light-line-height-cjk + ); + --spectrum-statuslight-font-size: var(--system-status-light-font-size); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-spacing-bottom-to-label + ); + --spectrum-statuslight-content-color-default: var( + --system-status-light-content-color-default + ); + --spectrum-statuslight-subdued-content-color-default: var( + --system-status-light-subdued-content-color-default + ); + --spectrum-statuslight-semantic-neutral-color: var( + --system-status-light-semantic-neutral-color + ); + --spectrum-statuslight-semantic-accent-color: var( + --system-status-light-semantic-accent-color + ); + --spectrum-statuslight-semantic-negative-color: var( + --system-status-light-semantic-negative-color + ); + --spectrum-statuslight-semantic-info-color: var( + --system-status-light-semantic-info-color + ); + --spectrum-statuslight-semantic-notice-color: var( + --system-status-light-semantic-notice-color + ); + --spectrum-statuslight-semantic-positive-color: var( + --system-status-light-semantic-positive-color + ); + --spectrum-statuslight-nonsemantic-gray-color: var( + --system-status-light-nonsemantic-gray-color + ); + --spectrum-statuslight-nonsemantic-red-color: var( + --system-status-light-nonsemantic-red-color + ); + --spectrum-statuslight-nonsemantic-orange-color: var( + --system-status-light-nonsemantic-orange-color + ); + --spectrum-statuslight-nonsemantic-yellow-color: var( + --system-status-light-nonsemantic-yellow-color + ); + --spectrum-statuslight-nonsemantic-chartreuse-color: var( + --system-status-light-nonsemantic-chartreuse-color + ); + --spectrum-statuslight-nonsemantic-celery-color: var( + --system-status-light-nonsemantic-celery-color + ); + --spectrum-statuslight-nonsemantic-green-color: var( + --system-status-light-nonsemantic-green-color + ); + --spectrum-statuslight-nonsemantic-seafoam-color: var( + --system-status-light-nonsemantic-seafoam-color + ); + --spectrum-statuslight-nonsemantic-cyan-color: var( + --system-status-light-nonsemantic-cyan-color + ); + --spectrum-statuslight-nonsemantic-blue-color: var( + --system-status-light-nonsemantic-blue-color + ); + --spectrum-statuslight-nonsemantic-indigo-color: var( + --system-status-light-nonsemantic-indigo-color + ); + --spectrum-statuslight-nonsemantic-purple-color: var( + --system-status-light-nonsemantic-purple-color + ); + --spectrum-statuslight-nonsemantic-fuchsia-color: var( + --system-status-light-nonsemantic-fuchsia-color + ); + --spectrum-statuslight-nonsemantic-magenta-color: var( + --system-status-light-nonsemantic-magenta-color + ); } -:host([size='s']) { - --spectrum-statuslight-height: var(--system-status-light-size-s-height); - --spectrum-statuslight-dot-size: var(--system-status-light-size-s-dot-size); - --spectrum-statuslight-font-size: var( - --system-status-light-size-s-font-size - ); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-size-s-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-size-s-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-size-s-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-size-s-spacing-bottom-to-label - ); +:host([size="s"]) { + --spectrum-statuslight-height: var(--system-status-light-size-s-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-s-dot-size); + --spectrum-statuslight-font-size: var(--system-status-light-size-s-font-size); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-size-s-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-size-s-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-size-s-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-size-s-spacing-bottom-to-label + ); } :host { - --spectrum-statuslight-height: var(--system-status-light-size-m-height); - --spectrum-statuslight-dot-size: var(--system-status-light-size-m-dot-size); - --spectrum-statuslight-font-size: var( - --system-status-light-size-m-font-size - ); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-size-m-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-size-m-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-size-m-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-size-m-spacing-bottom-to-label - ); + --spectrum-statuslight-height: var(--system-status-light-size-m-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-m-dot-size); + --spectrum-statuslight-font-size: var(--system-status-light-size-m-font-size); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-size-m-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-size-m-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-size-m-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-size-m-spacing-bottom-to-label + ); } -:host([size='l']) { - --spectrum-statuslight-height: var(--system-status-light-size-l-height); - --spectrum-statuslight-dot-size: var(--system-status-light-size-l-dot-size); - --spectrum-statuslight-font-size: var( - --system-status-light-size-l-font-size - ); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-size-l-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-size-l-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-size-l-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-size-l-spacing-bottom-to-label - ); +:host([size="l"]) { + --spectrum-statuslight-height: var(--system-status-light-size-l-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-l-dot-size); + --spectrum-statuslight-font-size: var(--system-status-light-size-l-font-size); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-size-l-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-size-l-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-size-l-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-size-l-spacing-bottom-to-label + ); } -:host([size='xl']) { - --spectrum-statuslight-height: var(--system-status-light-size-xl-height); - --spectrum-statuslight-dot-size: var( - --system-status-light-size-xl-dot-size - ); - --spectrum-statuslight-font-size: var( - --system-status-light-size-xl-font-size - ); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-size-xl-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-size-xl-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-size-xl-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-size-xl-spacing-bottom-to-label - ); +:host([size="xl"]) { + --spectrum-statuslight-height: var(--system-status-light-size-xl-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-xl-dot-size); + --spectrum-statuslight-font-size: var( + --system-status-light-size-xl-font-size + ); + --spectrum-statuslight-spacing-dot-to-label: var( + --system-status-light-size-xl-spacing-dot-to-label + ); + --spectrum-statuslight-spacing-top-to-dot: var( + --system-status-light-size-xl-spacing-top-to-dot + ); + --spectrum-statuslight-spacing-top-to-label: var( + --system-status-light-size-xl-spacing-top-to-label + ); + --spectrum-statuslight-spacing-bottom-to-label: var( + --system-status-light-size-xl-spacing-bottom-to-label + ); } diff --git a/packages/swatch/src/spectrum-swatch-group.css b/packages/swatch/src/spectrum-swatch-group.css index e0a56e8fc6..3ec987a080 100644 --- a/packages/swatch/src/spectrum-swatch-group.css +++ b/packages/swatch/src/spectrum-swatch-group.css @@ -12,26 +12,26 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - justify-content: flex-start; - align-items: flex-start; - gap: var( - --mod-swatchgroup-spacing-regular, - var(--spectrum-swatchgroup-spacing-regular) - ); - flex-flow: wrap; - display: inline-flex; + justify-content: flex-start; + align-items: flex-start; + gap: var( + --mod-swatchgroup-spacing-regular, + var(--spectrum-swatchgroup-spacing-regular) + ); + flex-flow: wrap; + display: inline-flex; } -:host([density='compact']) { - gap: var( - --mod-swatchgroup-spacing-compact, - var(--spectrum-swatchgroup-spacing-compact) - ); +:host([density="compact"]) { + gap: var( + --mod-swatchgroup-spacing-compact, + var(--spectrum-swatchgroup-spacing-compact) + ); } -:host([density='spacious']) { - gap: var( - --mod-swatchgroup-spacing-spacious, - var(--spectrum-swatchgroup-spacing-spacious) - ); +:host([density="spacious"]) { + gap: var( + --mod-swatchgroup-spacing-spacious, + var(--spectrum-swatchgroup-spacing-spacious) + ); } diff --git a/packages/swatch/src/spectrum-swatch.css b/packages/swatch/src/spectrum-swatch.css index 2af7c1ac63..a494973dc9 100644 --- a/packages/swatch/src/spectrum-swatch.css +++ b/packages/swatch/src/spectrum-swatch.css @@ -12,395 +12,387 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-swatch-disabled-icon-color: GrayText; - --highcontrast-swatch-focus-indicator-color: ButtonText; - --highcontrast-swatch-background-color-selected: Background; - --highcontrast-swatch-border-color-selected: Highlight; - --highcontrast-swatch-border-color: ButtonText; - --highcontrast-swatch-fill-foreground-color: ButtonText; - } + :host { + --highcontrast-swatch-disabled-icon-color: GrayText; + --highcontrast-swatch-focus-indicator-color: ButtonText; + --highcontrast-swatch-background-color-selected: Background; + --highcontrast-swatch-border-color-selected: Highlight; + --highcontrast-swatch-border-color: ButtonText; + --highcontrast-swatch-fill-foreground-color: ButtonText; + } - .fill { - forced-color-adjust: none; - } + .fill { + forced-color-adjust: none; + } - :host([disabled]), - :host([disabled]) { - --highcontrast-swatch-border-color: GrayText; - } + :host([disabled]), + :host([disabled]) { + --highcontrast-swatch-border-color: GrayText; + } } :host { - inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); - block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); - -webkit-user-select: none; - user-select: none; - outline: none; - justify-content: center; - align-items: center; - display: flex; - position: relative; + inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); + block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); + -webkit-user-select: none; + user-select: none; + outline: none; + justify-content: center; + align-items: center; + display: flex; + position: relative; } .disabledIcon { - inline-size: var( - --mod-swatch-disabled-icon-size, - var(--spectrum-swatch-disabled-icon-size) - ); - block-size: var( - --mod-swatch-disabled-icon-size, - var(--spectrum-swatch-disabled-icon-size) - ); + inline-size: var( + --mod-swatch-disabled-icon-size, + var(--spectrum-swatch-disabled-icon-size) + ); + block-size: var( + --mod-swatch-disabled-icon-size, + var(--spectrum-swatch-disabled-icon-size) + ); } :host, :host:before { - border-radius: var( - --mod-swatch-border-radius, - var(--spectrum-swatch-border-radius) - ); + border-radius: var( + --mod-swatch-border-radius, + var(--spectrum-swatch-border-radius) + ); } :host([selected]) { - background-color: var( - --highcontrast-swatch-background-color-selected, - var( - --mod-swatch-inner-border-color-selected, - var(--spectrum-swatch-inner-border-color-selected) - ) - ); + background-color: var( + --highcontrast-swatch-background-color-selected, + var( + --mod-swatch-inner-border-color-selected, + var(--spectrum-swatch-inner-border-color-selected) + ) + ); } :host([selected]) .fill { - clip-path: polygon( - calc( - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - calc( - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ), - calc( - 100% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - calc( - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ), - calc( - 100% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - calc( - 100% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ), - calc( - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - calc( - 100% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - ); - border-radius: 0; + clip-path: polygon( + calc( + var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ) * + 2 + ) + calc( + var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ) * + 2 + ), + calc( + 100% - + var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ) * + 2 + ) + calc( + var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ) * + 2 + ), + calc( + 100% - + var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ) * + 2 + ) + calc( + 100% - + var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ) * + 2 + ), + calc( + var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ) * + 2 + ) + calc( + 100% - + var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ) * + 2 + ) + ); + border-radius: 0; } :host([selected]) .fill:before { - box-shadow: none; - border-radius: 0; + box-shadow: none; + border-radius: 0; } :host([selected]):before { - opacity: 1; + opacity: 1; } :host .is-image .fill:before { - background-color: initial; + background-color: initial; } :host([mixed-value]) .fill { - background: none; - background: var(--spectrum-picked-color, transparent); + background: none; + background: var(--spectrum-picked-color, transparent); } :host([mixed-value]) .mixedValueIcon { - color: var(--spectrum-swatch-dash-icon-color); - display: block; + color: var(--spectrum-swatch-dash-icon-color); + display: block; } :host([nothing]) .fill { - background-color: initial; - background-color: var(--spectrum-picked-color, transparent); - background-image: none; + background-color: initial; + background-color: var(--spectrum-picked-color, transparent); + background-image: none; } :host([nothing]) .fill:after { - inline-size: var( - --mod-swatch-slash-thickness, - var(--spectrum-swatch-slash-thickness) - ); - content: ''; - block-size: 200%; - background: var( - --highcontrast-swatch-fill-foreground-color, - var( - --mod-swatch-slash-icon-color, - var(--spectrum-swatch-slash-icon-color) - ) - ); - position: absolute; - transform: rotate(-45deg); -} - -:host([nothing][shape='rectangle']) .fill:after { - transform: rotate(-25deg); + inline-size: var( + --mod-swatch-slash-thickness, + var(--spectrum-swatch-slash-thickness) + ); + content: ""; + block-size: 200%; + background: var( + --highcontrast-swatch-fill-foreground-color, + var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color)) + ); + position: absolute; + transform: rotate(-45deg); +} + +:host([nothing][shape="rectangle"]) .fill:after { + transform: rotate(-25deg); } :host([disabled]) .disabledIcon, :host([disabled]) .disabledIcon { - display: block; + display: block; } :host:before { - content: ''; - border-width: var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ); - border-style: solid; - border-color: var( - --highcontrast-swatch-border-color-selected, - var( - --mod-swatch-border-color-selected, - var(--spectrum-swatch-border-color-selected) - ) - ); - opacity: 0; - pointer-events: none; - position: absolute; - inset: 0; + content: ""; + border-width: var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ); + border-style: solid; + border-color: var( + --highcontrast-swatch-border-color-selected, + var( + --mod-swatch-border-color-selected, + var(--spectrum-swatch-border-color-selected) + ) + ); + opacity: 0; + pointer-events: none; + position: absolute; + inset: 0; } :host:after { - content: ''; - inset: calc( - var( - --mod-swatch-focus-indicator-gap, - var(--spectrum-swatch-focus-indicator-gap) - ) * -2 - ); - opacity: 0; - border-width: var( - --mod-swatch-focus-indicator-thickness, - var(--spectrum-swatch-focus-indicator-thickness) - ); - border-style: solid; - border-color: var( - --highcontrast-swatch-focus-indicator-color, - var( - --mod-swatch-focus-indicator-color, - var(--spectrum-swatch-focus-indicator-color) - ) - ); - border-radius: var( - --mod-swatch-focus-indicator-border-radius, - var(--spectrum-swatch-focus-indicator-border-radius) - ); - transition: opacity - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; - position: absolute; + content: ""; + inset: calc( + var( + --mod-swatch-focus-indicator-gap, + var(--spectrum-swatch-focus-indicator-gap) + ) * + -2 + ); + opacity: 0; + border-width: var( + --mod-swatch-focus-indicator-thickness, + var(--spectrum-swatch-focus-indicator-thickness) + ); + border-style: solid; + border-color: var( + --highcontrast-swatch-focus-indicator-color, + var( + --mod-swatch-focus-indicator-color, + var(--spectrum-swatch-focus-indicator-color) + ) + ); + border-radius: var( + --mod-swatch-focus-indicator-border-radius, + var(--spectrum-swatch-focus-indicator-border-radius) + ); + transition: opacity + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out; + position: absolute; } :host(:focus-visible):after { - opacity: 1; + opacity: 1; } .fill { - inline-size: 100%; - block-size: 100%; - box-sizing: border-box; - border-radius: var( - --mod-swatch-border-radius, - var(--spectrum-swatch-border-radius) - ); - justify-content: center; - align-items: center; - display: flex; - position: relative; - overflow: hidden; + inline-size: 100%; + block-size: 100%; + box-sizing: border-box; + border-radius: var( + --mod-swatch-border-radius, + var(--spectrum-swatch-border-radius) + ); + justify-content: center; + align-items: center; + display: flex; + position: relative; + overflow: hidden; } .fill:before { - content: ''; - z-index: 0; - box-shadow: inset 0 0 0 - var( - --mod-swatch-border-thickness, - var(--spectrum-swatch-border-thickness) - ) - var( - --highcontrast-swatch-border-color, - var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)) - ); - border-radius: var( - --mod-swatch-border-radius, - var(--spectrum-swatch-border-radius) - ); - position: absolute; - inset: 0; -} - -:host([border='none']) .fill:before, + content: ""; + z-index: 0; + box-shadow: inset 0 0 0 + var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) + var( + --highcontrast-swatch-border-color, + var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)) + ); + border-radius: var( + --mod-swatch-border-radius, + var(--spectrum-swatch-border-radius) + ); + position: absolute; + inset: 0; +} + +:host([border="none"]) .fill:before, .fill:before { - background-color: initial; - background-color: var(--spectrum-picked-color, transparent); + background-color: initial; + background-color: var(--spectrum-picked-color, transparent); } -:host([border='none']) .fill:before { - box-shadow: none; +:host([border="none"]) .fill:before { + box-shadow: none; } -:host([border='light']) .fill:before { - box-shadow: inset 0 0 0 - var( - --mod-swatch-border-thickness, - var(--spectrum-swatch-border-thickness) - ) - var( - --highcontrast-swatch-border-color-light, - var( - --mod-swatch-border-color-light, - var(--spectrum-swatch-border-color-light) - ) - ); +:host([border="light"]) .fill:before { + box-shadow: inset 0 0 0 + var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) + var( + --highcontrast-swatch-border-color-light, + var( + --mod-swatch-border-color-light, + var(--spectrum-swatch-border-color-light) + ) + ); } .mixedValueIcon { - pointer-events: none; - color: #0000; - color: var(--spectrum-picked-color, transparent); - display: none; + pointer-events: none; + color: #0000; + color: var(--spectrum-picked-color, transparent); + display: none; } .disabledIcon { - z-index: 1; - pointer-events: none; - color: var( - --highcontrast-swatch-disabled-icon-color, - var( - --mod-swatch-disabled-icon-color, - var(--spectrum-swatch-disabled-icon-color) - ) - ); - stroke: var( - --highcontrast-swatch-disabled-icon-color, - var( - --mod-swatch-disabled-icon-color, - var(--spectrum-swatch-disabled-icon-color) - ) - ); - display: none; - position: relative; + z-index: 1; + pointer-events: none; + color: var( + --highcontrast-swatch-disabled-icon-color, + var( + --mod-swatch-disabled-icon-color, + var(--spectrum-swatch-disabled-icon-color) + ) + ); + stroke: var( + --highcontrast-swatch-disabled-icon-color, + var( + --mod-swatch-disabled-icon-color, + var(--spectrum-swatch-disabled-icon-color) + ) + ); + display: none; + position: relative; } .disabledIcon path:first-child { - fill: var( - --highcontrast-swatch-disabled-icon-color, - var( - --mod-swatch-disabled-icon-color, - var(--spectrum-swatch-disabled-icon-color) - ) - ); + fill: var( + --highcontrast-swatch-disabled-icon-color, + var( + --mod-swatch-disabled-icon-color, + var(--spectrum-swatch-disabled-icon-color) + ) + ); } .disabledIcon path:last-child { - fill: var( - --mod-swatch-icon-border-color, - var(--spectrum-swatch-icon-border-color) - ); -} - -:host([shape='rectangle']) { - inline-size: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2); -} - -:host([rounding='none']), -:host([rounding='none']) .fill, -:host([rounding='none']) .fill:before, -:host([rounding='none'][selected]) .fill, -:host([rounding='none'][selected]) .fill:before, -:host([rounding='none']):after, -:host([rounding='none']):before { - border-radius: 0; -} - -:host([rounding='full'][selected]:not([shape='rectangle'])) .fill, -:host([rounding='full'][selected]:not([shape='rectangle'])) .fill:before, -:host([rounding='full']:not([shape='rectangle'])), -:host([rounding='full']:not([shape='rectangle'])) .fill, -:host([rounding='full']:not([shape='rectangle'])) .fill:before, -:host([rounding='full']:not([shape='rectangle'])):after, -:host([rounding='full']:not([shape='rectangle'])):before { - border-radius: 100%; -} - -:host([rounding='full'][selected]:not([shape='rectangle'])) .fill { - clip-path: circle( - calc( - 50% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - at 50% 50% - ); -} - -::slotted([slot='image']) { - object-fit: contain; - inline-size: 100%; - block-size: 100%; - transition: - width - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - height - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; + fill: var( + --mod-swatch-icon-border-color, + var(--spectrum-swatch-icon-border-color) + ); +} + +:host([shape="rectangle"]) { + inline-size: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2); +} + +:host([rounding="none"]), +:host([rounding="none"]) .fill, +:host([rounding="none"]) .fill:before, +:host([rounding="none"][selected]) .fill, +:host([rounding="none"][selected]) .fill:before, +:host([rounding="none"]):after, +:host([rounding="none"]):before { + border-radius: 0; +} + +:host([rounding="full"][selected]:not([shape="rectangle"])) .fill, +:host([rounding="full"][selected]:not([shape="rectangle"])) .fill:before, +:host([rounding="full"]:not([shape="rectangle"])), +:host([rounding="full"]:not([shape="rectangle"])) .fill, +:host([rounding="full"]:not([shape="rectangle"])) .fill:before, +:host([rounding="full"]:not([shape="rectangle"])):after, +:host([rounding="full"]:not([shape="rectangle"])):before { + border-radius: 100%; +} + +:host([rounding="full"][selected]:not([shape="rectangle"])) .fill { + clip-path: circle( + calc( + 50% - + var( + --mod-swatch-border-thickness-selected, + var(--spectrum-swatch-border-thickness-selected) + ) * + 2 + ) + at 50% 50% + ); +} + +::slotted([slot="image"]) { + object-fit: contain; + inline-size: 100%; + block-size: 100%; + transition: + width + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out, + height + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out; } diff --git a/packages/swatch/src/swatch-group-overrides.css b/packages/swatch/src/swatch-group-overrides.css index 74e554f225..721ee46352 100644 --- a/packages/swatch/src/swatch-group-overrides.css +++ b/packages/swatch/src/swatch-group-overrides.css @@ -12,13 +12,13 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-swatchgroup-spacing-compact: var( - --system-swatch-group-spacing-compact - ); - --spectrum-swatchgroup-spacing-regular: var( - --system-swatch-group-spacing-regular - ); - --spectrum-swatchgroup-spacing-spacious: var( - --system-swatch-group-spacing-spacious - ); + --spectrum-swatchgroup-spacing-compact: var( + --system-swatch-group-spacing-compact + ); + --spectrum-swatchgroup-spacing-regular: var( + --system-swatch-group-spacing-regular + ); + --spectrum-swatchgroup-spacing-spacious: var( + --system-swatch-group-spacing-spacious + ); } diff --git a/packages/swatch/src/swatch-overrides.css b/packages/swatch/src/swatch-overrides.css index 82354bbb92..cb227db6bf 100644 --- a/packages/swatch/src/swatch-overrides.css +++ b/packages/swatch/src/swatch-overrides.css @@ -11,89 +11,85 @@ */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([size='l']) { - --spectrum-swatch-size: var(--system-swatch-size-l-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-l-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-l-slash-thickness - ); +:host([size="l"]) { + --spectrum-swatch-size: var(--system-swatch-size-l-size); + --spectrum-swatch-disabled-icon-size: var( + --system-swatch-size-l-disabled-icon-size + ); + --spectrum-swatch-slash-thickness: var( + --system-swatch-size-l-slash-thickness + ); } -:host([size='s']) { - --spectrum-swatch-size: var(--system-swatch-size-s-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-s-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-s-slash-thickness - ); +:host([size="s"]) { + --spectrum-swatch-size: var(--system-swatch-size-s-size); + --spectrum-swatch-disabled-icon-size: var( + --system-swatch-size-s-disabled-icon-size + ); + --spectrum-swatch-slash-thickness: var( + --system-swatch-size-s-slash-thickness + ); } -:host([size='xs']) { - --spectrum-swatch-size: var(--system-swatch-size-xs-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-xs-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-xs-slash-thickness - ); +:host([size="xs"]) { + --spectrum-swatch-size: var(--system-swatch-size-xs-size); + --spectrum-swatch-disabled-icon-size: var( + --system-swatch-size-xs-disabled-icon-size + ); + --spectrum-swatch-slash-thickness: var( + --system-swatch-size-xs-slash-thickness + ); } :host { - --spectrum-swatch-size: var(--system-swatch-size-m-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-m-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-m-slash-thickness - ); + --spectrum-swatch-size: var(--system-swatch-size-m-size); + --spectrum-swatch-disabled-icon-size: var( + --system-swatch-size-m-disabled-icon-size + ); + --spectrum-swatch-slash-thickness: var( + --system-swatch-size-m-slash-thickness + ); } :host { - --spectrum-swatch-border-radius: var(--system-swatch-border-radius); - --spectrum-swatch-focus-indicator-border-radius: var( - --system-swatch-focus-indicator-border-radius - ); - --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness); - --spectrum-swatch-border-thickness-selected: var( - --system-swatch-border-thickness-selected - ); - --spectrum-swatch-focus-indicator-thickness: var( - --system-swatch-focus-indicator-thickness - ); - --spectrum-swatch-focus-indicator-gap: var( - --system-swatch-focus-indicator-gap - ); - --spectrum-swatch-border-color-opacity: var( - --system-swatch-border-color-opacity - ); - --spectrum-swatch-border-color-light-opacity: var( - --system-swatch-border-color-light-opacity - ); - --spectrum-swatch-border-color: var(--system-swatch-border-color); - --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color); - --spectrum-swatch-border-color-light: var( - --system-swatch-border-color-light - ); - --spectrum-swatch-border-color-selected: var( - --system-swatch-border-color-selected - ); - --spectrum-swatch-inner-border-color-selected: var( - --system-swatch-inner-border-color-selected - ); - --spectrum-swatch-disabled-icon-color: var( - --system-swatch-disabled-icon-color - ); - --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color); - --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color); - --spectrum-swatch-focus-indicator-color: var( - --system-swatch-focus-indicator-color - ); - --spectrum-swatch-size: var(--system-swatch-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness); + --spectrum-swatch-border-radius: var(--system-swatch-border-radius); + --spectrum-swatch-focus-indicator-border-radius: var( + --system-swatch-focus-indicator-border-radius + ); + --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness); + --spectrum-swatch-border-thickness-selected: var( + --system-swatch-border-thickness-selected + ); + --spectrum-swatch-focus-indicator-thickness: var( + --system-swatch-focus-indicator-thickness + ); + --spectrum-swatch-focus-indicator-gap: var( + --system-swatch-focus-indicator-gap + ); + --spectrum-swatch-border-color-opacity: var( + --system-swatch-border-color-opacity + ); + --spectrum-swatch-border-color-light-opacity: var( + --system-swatch-border-color-light-opacity + ); + --spectrum-swatch-border-color: var(--system-swatch-border-color); + --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color); + --spectrum-swatch-border-color-light: var(--system-swatch-border-color-light); + --spectrum-swatch-border-color-selected: var( + --system-swatch-border-color-selected + ); + --spectrum-swatch-inner-border-color-selected: var( + --system-swatch-inner-border-color-selected + ); + --spectrum-swatch-disabled-icon-color: var( + --system-swatch-disabled-icon-color + ); + --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color); + --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color); + --spectrum-swatch-focus-indicator-color: var( + --system-swatch-focus-indicator-color + ); + --spectrum-swatch-size: var(--system-swatch-size); + --spectrum-swatch-disabled-icon-size: var(--system-swatch-disabled-icon-size); + --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness); } diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css index 2dcc0d89f1..5993d665f0 100644 --- a/packages/switch/src/spectrum-switch.css +++ b/packages/switch/src/spectrum-switch.css @@ -12,661 +12,625 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-switch-focus-indicator-thickness: var( - --mod-focus-indicator-thickness, - var(--spectrum-focus-indicator-thickness) - ); - min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height)); - max-inline-size: 100%; - vertical-align: top; - align-items: flex-start; - display: inline-flex; - position: relative; + --spectrum-switch-focus-indicator-thickness: var( + --mod-focus-indicator-thickness, + var(--spectrum-focus-indicator-thickness) + ); + min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height)); + max-inline-size: 100%; + vertical-align: top; + align-items: flex-start; + display: inline-flex; + position: relative; } #input { - box-sizing: border-box; - inline-size: 100%; - block-size: 100%; - opacity: 0; - z-index: 1; - cursor: pointer; - margin: 0; - padding: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + box-sizing: border-box; + inline-size: 100%; + block-size: 100%; + opacity: 0; + z-index: 1; + cursor: pointer; + margin: 0; + padding: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } :host([checked]) #input + #switch:before { - transform: translateX( - calc( - var( - --mod-switch-control-width, - var(--spectrum-switch-control-width) - ) - 100% - ) - ); + transform: translateX( + calc( + var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - + 100% + ) + ); } :host([checked]) #input + #switch:dir(rtl):before, -:host([dir='rtl'][checked]) #input + #switch:before { - transform: translateX( - calc( - ( - var( - --mod-switch-control-width, - var(--spectrum-switch-control-width) - ) - 100% - ) * -1 - ) - ); +:host([dir="rtl"][checked]) #input + #switch:before { + transform: translateX( + calc( + ( + var( + --mod-switch-control-width, + var(--spectrum-switch-control-width) + ) - + 100% + ) * + -1 + ) + ); } :host([disabled]) #input, :host([disabled]) #input { - cursor: default; + cursor: default; } #input:focus-visible + #switch:after { - margin: calc( - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1 - ); + margin: calc( + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1 + ); } #label { - color: var( - --highcontrast-switch-label-color-default, - var( - --mod-switch-label-color-default, - var(--spectrum-switch-label-color-default) - ) - ); - margin-inline: var( - --mod-switch-control-label-spacing, - var(--spectrum-switch-control-label-spacing) - ); - font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - transition: color - var( - --mod-animation-duration-200, - var(--spectrum-animation-duration-200) - ) - ease-in-out; - margin-block-start: var( - --mod-switch-spacing-top-to-label, - var(--spectrum-switch-spacing-top-to-label) - ); - margin-block-end: 0; + color: var( + --highcontrast-switch-label-color-default, + var( + --mod-switch-label-color-default, + var(--spectrum-switch-label-color-default) + ) + ); + margin-inline: var( + --mod-switch-control-label-spacing, + var(--spectrum-switch-control-label-spacing) + ); + font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + transition: color + var(--mod-animation-duration-200, var(--spectrum-animation-duration-200)) + ease-in-out; + margin-block-start: var( + --mod-switch-spacing-top-to-label, + var(--spectrum-switch-spacing-top-to-label) + ); + margin-block-end: 0; } #switch { - box-sizing: border-box; - inline-size: var( - --mod-switch-control-width, - var(--spectrum-switch-control-width) - ); - margin-block: calc( - var(--mod-switch-height, var(--spectrum-switch-min-height)) - - var( - --mod-switch-control-height, - var(--spectrum-switch-control-height) - ) - - var( - --mod-switch-spacing-top-to-control, - var(--spectrum-switch-spacing-top-to-control) - ) - ); - vertical-align: middle; - transition: - background - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - border - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; - block-size: var( - --mod-switch-control-height, - var(--spectrum-switch-control-height) - ); - border-radius: calc( - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / - 2 - ); - flex-grow: 0; - flex-shrink: 0; - margin-inline: 0; - display: inline-block; - position: relative; - inset-inline: 0; + box-sizing: border-box; + inline-size: var( + --mod-switch-control-width, + var(--spectrum-switch-control-width) + ); + margin-block: calc( + var(--mod-switch-height, var(--spectrum-switch-min-height)) - + var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - + var( + --mod-switch-spacing-top-to-control, + var(--spectrum-switch-spacing-top-to-control) + ) + ); + vertical-align: middle; + transition: + background + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out, + border + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out; + block-size: var( + --mod-switch-control-height, + var(--spectrum-switch-control-height) + ); + border-radius: calc( + var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2 + ); + flex-grow: 0; + flex-shrink: 0; + margin-inline: 0; + display: inline-block; + position: relative; + inset-inline: 0; } #switch:before { - box-sizing: border-box; - transition: - background - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - border - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - transform - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - box-shadow - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; - inline-size: var( - --mod-switch-control-height, - var(--spectrum-switch-control-height) - ); - block-size: var( - --mod-switch-control-height, - var(--spectrum-switch-control-height) - ); - border-width: var(--mod-border-width-200, var(--spectrum-border-width-200)); - border-radius: calc( - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / - 2 - ); - border-style: solid; + box-sizing: border-box; + transition: + background + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out, + border + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out, + transform + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out, + box-shadow + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-in-out; + inline-size: var( + --mod-switch-control-height, + var(--spectrum-switch-control-height) + ); + block-size: var( + --mod-switch-control-height, + var(--spectrum-switch-control-height) + ); + border-width: var(--mod-border-width-200, var(--spectrum-border-width-200)); + border-radius: calc( + var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2 + ); + border-style: solid; } #switch:after, #switch:before { - content: ''; - display: block; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + content: ""; + display: block; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } #switch:after { - border-radius: calc( - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / - 2 + - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * - 2 - ); - transition: - opacity - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out, - margin - var( - --spectrum-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out; - margin: 0; - inset-block-end: 0; - inset-inline-end: 0; + border-radius: calc( + var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / + 2 + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * + 2 + ); + transition: + opacity + var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) + ease-out, + margin + var( + --spectrum-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ease-out; + margin: 0; + inset-block-end: 0; + inset-inline-end: 0; } #switch { - background-color: var( - --highcontrast-switch-background-color, - var( - --mod-switch-background-color, - var(--spectrum-switch-background-color) - ) - ); + background-color: var( + --highcontrast-switch-background-color, + var(--mod-switch-background-color, var(--spectrum-switch-background-color)) + ); } #switch:before { - background-color: var( - --highcontrast-switch-handle-background-color, - var( - --mod-switch-handle-background-color, - var(--spectrum-switch-handle-background-color) - ) - ); - border-color: var( - --highcontrast-switch-handle-border-color-default, - var( - --mod-switch-handle-border-color-default, - var(--spectrum-switch-handle-border-color-default) - ) - ); + background-color: var( + --highcontrast-switch-handle-background-color, + var( + --mod-switch-handle-background-color, + var(--spectrum-switch-handle-background-color) + ) + ); + border-color: var( + --highcontrast-switch-handle-border-color-default, + var( + --mod-switch-handle-border-color-default, + var(--spectrum-switch-handle-border-color-default) + ) + ); } :host(:active) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-down, - var( - --mod-switch-handle-border-color-down, - var(--spectrum-switch-handle-border-color-down) - ) - ); + border-color: var( + --highcontrast-switch-handle-border-color-down, + var( + --mod-switch-handle-border-color-down, + var(--spectrum-switch-handle-border-color-down) + ) + ); } :host(:active) #input ~ #label { - color: var( - --highcontrast-switch-label-color-down, - var( - --mod-switch-label-color-down, - var(--spectrum-switch-label-color-down) - ) - ); + color: var( + --highcontrast-switch-label-color-down, + var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down)) + ); } :host(:active[checked]) #input:enabled + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-down, - var( - --mod-switch-background-color-selected-down, - var(--spectrum-switch-background-color-selected-down) - ) - ); + background-color: var( + --highcontrast-switch-background-color-selected-down, + var( + --mod-switch-background-color-selected-down, + var(--spectrum-switch-background-color-selected-down) + ) + ); } :host(:active[checked]) #input:enabled + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-down, - var( - --mod-switch-handle-border-color-selected-down, - var(--spectrum-switch-handle-border-color-selected-down) - ) - ); + border-color: var( + --highcontrast-switch-handle-border-color-selected-down, + var( + --mod-switch-handle-border-color-selected-down, + var(--spectrum-switch-handle-border-color-selected-down) + ) + ); } #input:focus-visible + #switch:after { - box-shadow: 0 0 0 - var( - --mod-switch-focus-indicator-thickness, - var( - --mod-focus-indicator-thickness, - var(--spectrum-switch-focus-indicator-thickness) - ) - ) - var( - --highcontrast-switch-focus-indicator-color, - var( - --mod-switch-focus-indicator-color, - var(--spectrum-switch-focus-indicator-color) - ) - ); + box-shadow: 0 0 0 + var( + --mod-switch-focus-indicator-thickness, + var( + --mod-focus-indicator-thickness, + var(--spectrum-switch-focus-indicator-thickness) + ) + ) + var( + --highcontrast-switch-focus-indicator-color, + var( + --mod-switch-focus-indicator-color, + var(--spectrum-switch-focus-indicator-color) + ) + ); } #input:focus-visible + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-focus, - var( - --mod-switch-handle-border-color-focus, - var(--spectrum-switch-handle-border-color-focus) - ) - ); + border-color: var( + --highcontrast-switch-handle-border-color-focus, + var( + --mod-switch-handle-border-color-focus, + var(--spectrum-switch-handle-border-color-focus) + ) + ); } :host([checked]) #input:focus-visible + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-focus, - var( - --mod-switch-background-color-selected-focus, - var(--spectrum-switch-background-color-selected-focus) - ) - ); + background-color: var( + --highcontrast-switch-background-color-selected-focus, + var( + --mod-switch-background-color-selected-focus, + var(--spectrum-switch-background-color-selected-focus) + ) + ); } :host([checked]) #input:focus-visible + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-focus, - var( - --mod-switch-handle-border-color-selected-focus, - var(--spectrum-switch-handle-border-color-selected-focus) - ) - ); + border-color: var( + --highcontrast-switch-handle-border-color-selected-focus, + var( + --mod-switch-handle-border-color-selected-focus, + var(--spectrum-switch-handle-border-color-selected-focus) + ) + ); } #input:focus-visible ~ #label { - color: var( - --highcontrast-switch-label-color-focus, - var( - --mod-switch-label-color-focus, - var(--spectrum-switch-label-color-focus) - ) - ); + color: var( + --highcontrast-switch-label-color-focus, + var( + --mod-switch-label-color-focus, + var(--spectrum-switch-label-color-focus) + ) + ); } @media (hover: hover) { - :host(:hover) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-hover, - var( - --mod-switch-handle-border-color-hover, - var(--spectrum-switch-handle-border-color-hover) - ) - ); - box-shadow: none; - } - - :host(:hover) #input ~ #label { - color: var( - --highcontrast-switch-label-color-hover, - var( - --mod-switch-label-color-hover, - var(--spectrum-switch-label-color-hover) - ) - ); - } - - :host([checked]:hover) #input:enabled + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-hover, - var( - --mod-switch-background-color-selected-hover, - var(--spectrum-switch-background-color-selected-hover) - ) - ); - } - - :host([checked]:hover) #input:enabled + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-hover, - var( - --mod-switch-handle-border-color-selected-hover, - var(--spectrum-switch-handle-border-color-selected-hover) - ) - ); - } - - :host([disabled]:hover) #input + #switch, - :host([disabled]:hover) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-disabled, - var( - --mod-switch-background-color-disabled, - var(--spectrum-switch-background-color-disabled) - ) - ); - } - - :host([disabled]:hover) #input + #switch:before, - :host([disabled]:hover) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-disabled, - var( - --mod-switch-handle-border-color-disabled, - var(--spectrum-switch-handle-border-color-disabled) - ) - ); - } - - :host([disabled]:hover) #input ~ #label, - :host([disabled]:hover) #input ~ #label { - color: var( - --highcontrast-switch-label-color-disabled, - var( - --mod-switch-label-color-disabled, - var(--spectrum-switch-label-color-disabled) - ) - ); - } - - :host([disabled][checked]:hover) #input + #switch, - :host([disabled][checked]:hover) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-disabled, - var( - --mod-switch-background-color-selected-disabled, - var(--spectrum-switch-background-color-selected-disabled) - ) - ); - } - - :host([disabled][checked]:hover) #input + #switch:before, - :host([disabled][checked]:hover) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-disabled, - var( - --mod-switch-handle-border-color-disabled, - var(--spectrum-switch-handle-border-color-disabled) - ) - ); - } - - :host([disabled][checked]:hover) #input ~ #label, - :host([disabled][checked]:hover) #input ~ #label { - color: var( - --highcontrast-switch-label-color-disabled, - var( - --mod-switch-label-color-disabled, - var(--spectrum-switch-label-color-disabled) - ) - ); - } - - :host(:hover) #input:focus-visible + #switch:after { - box-shadow: 0 0 0 - var( - --mod-switch-focus-indicator-thickness, - var( - --mod-focus-indicator-thickness, - var(--spectrum-switch-focus-indicator-thickness) - ) - ) - var( - --highcontrast-switch-focus-indicator-color, - var( - --mod-switch-focus-indicator-color, - var(--spectrum-switch-focus-indicator-color) - ) - ); - } - - :host(:hover) #input:focus-visible + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-focus, - var( - --mod-switch-handle-border-color-focus, - var(--spectrum-switch-handle-border-color-focus) - ) - ); - } - - :host([checked]:hover) #input:focus-visible + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-focus, - var( - --mod-switch-background-color-selected-focus, - var(--spectrum-switch-background-color-selected-focus) - ) - ); - } - - :host([checked]:hover) #input:focus-visible + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-focus, - var( - --mod-switch-handle-border-color-selected-focus, - var(--spectrum-switch-handle-border-color-selected-focus) - ) - ); - } - - :host(:hover) #input:focus-visible ~ #label { - color: var( - --highcontrast-switch-label-color-focus, - var( - --mod-switch-label-color-focus, - var(--spectrum-switch-label-color-focus) - ) - ); - } + :host(:hover) #input + #switch:before { + border-color: var( + --highcontrast-switch-handle-border-color-hover, + var( + --mod-switch-handle-border-color-hover, + var(--spectrum-switch-handle-border-color-hover) + ) + ); + box-shadow: none; + } + + :host(:hover) #input ~ #label { + color: var( + --highcontrast-switch-label-color-hover, + var( + --mod-switch-label-color-hover, + var(--spectrum-switch-label-color-hover) + ) + ); + } + + :host([checked]:hover) #input:enabled + #switch { + background-color: var( + --highcontrast-switch-background-color-selected-hover, + var( + --mod-switch-background-color-selected-hover, + var(--spectrum-switch-background-color-selected-hover) + ) + ); + } + + :host([checked]:hover) #input:enabled + #switch:before { + border-color: var( + --highcontrast-switch-handle-border-color-selected-hover, + var( + --mod-switch-handle-border-color-selected-hover, + var(--spectrum-switch-handle-border-color-selected-hover) + ) + ); + } + + :host([disabled]:hover) #input + #switch, + :host([disabled]:hover) #input + #switch { + background-color: var( + --highcontrast-switch-background-color-disabled, + var( + --mod-switch-background-color-disabled, + var(--spectrum-switch-background-color-disabled) + ) + ); + } + + :host([disabled]:hover) #input + #switch:before, + :host([disabled]:hover) #input + #switch:before { + border-color: var( + --highcontrast-switch-handle-border-color-disabled, + var( + --mod-switch-handle-border-color-disabled, + var(--spectrum-switch-handle-border-color-disabled) + ) + ); + } + + :host([disabled]:hover) #input ~ #label, + :host([disabled]:hover) #input ~ #label { + color: var( + --highcontrast-switch-label-color-disabled, + var( + --mod-switch-label-color-disabled, + var(--spectrum-switch-label-color-disabled) + ) + ); + } + + :host([disabled][checked]:hover) #input + #switch, + :host([disabled][checked]:hover) #input + #switch { + background-color: var( + --highcontrast-switch-background-color-selected-disabled, + var( + --mod-switch-background-color-selected-disabled, + var(--spectrum-switch-background-color-selected-disabled) + ) + ); + } + + :host([disabled][checked]:hover) #input + #switch:before, + :host([disabled][checked]:hover) #input + #switch:before { + border-color: var( + --highcontrast-switch-handle-border-color-disabled, + var( + --mod-switch-handle-border-color-disabled, + var(--spectrum-switch-handle-border-color-disabled) + ) + ); + } + + :host([disabled][checked]:hover) #input ~ #label, + :host([disabled][checked]:hover) #input ~ #label { + color: var( + --highcontrast-switch-label-color-disabled, + var( + --mod-switch-label-color-disabled, + var(--spectrum-switch-label-color-disabled) + ) + ); + } + + :host(:hover) #input:focus-visible + #switch:after { + box-shadow: 0 0 0 + var( + --mod-switch-focus-indicator-thickness, + var( + --mod-focus-indicator-thickness, + var(--spectrum-switch-focus-indicator-thickness) + ) + ) + var( + --highcontrast-switch-focus-indicator-color, + var( + --mod-switch-focus-indicator-color, + var(--spectrum-switch-focus-indicator-color) + ) + ); + } + + :host(:hover) #input:focus-visible + #switch:before { + border-color: var( + --highcontrast-switch-handle-border-color-focus, + var( + --mod-switch-handle-border-color-focus, + var(--spectrum-switch-handle-border-color-focus) + ) + ); + } + + :host([checked]:hover) #input:focus-visible + #switch { + background-color: var( + --highcontrast-switch-background-color-selected-focus, + var( + --mod-switch-background-color-selected-focus, + var(--spectrum-switch-background-color-selected-focus) + ) + ); + } + + :host([checked]:hover) #input:focus-visible + #switch:before { + border-color: var( + --highcontrast-switch-handle-border-color-selected-focus, + var( + --mod-switch-handle-border-color-selected-focus, + var(--spectrum-switch-handle-border-color-selected-focus) + ) + ); + } + + :host(:hover) #input:focus-visible ~ #label { + color: var( + --highcontrast-switch-label-color-focus, + var( + --mod-switch-label-color-focus, + var(--spectrum-switch-label-color-focus) + ) + ); + } } :host([checked]) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-default, - var( - --mod-switch-background-color-selected-default, - var(--spectrum-switch-background-color-selected-default) - ) - ); + background-color: var( + --highcontrast-switch-background-color-selected-default, + var( + --mod-switch-background-color-selected-default, + var(--spectrum-switch-background-color-selected-default) + ) + ); } :host([checked]) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-default, - var( - --mod-switch-handle-border-color-selected-default, - var(--spectrum-switch-handle-border-color-selected-default) - ) - ); + border-color: var( + --highcontrast-switch-handle-border-color-selected-default, + var( + --mod-switch-handle-border-color-selected-default, + var(--spectrum-switch-handle-border-color-selected-default) + ) + ); } :host([disabled]) #input + #switch, :host([disabled]) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-disabled, - var( - --mod-switch-background-color-disabled, - var(--spectrum-switch-background-color-disabled) - ) - ); + background-color: var( + --highcontrast-switch-background-color-disabled, + var( + --mod-switch-background-color-disabled, + var(--spectrum-switch-background-color-disabled) + ) + ); } :host([disabled]) #input + #switch:before, :host([disabled]) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-disabled, - var( - --mod-switch-handle-border-color-disabled, - var(--spectrum-switch-handle-border-color-disabled) - ) - ); + border-color: var( + --highcontrast-switch-handle-border-color-disabled, + var( + --mod-switch-handle-border-color-disabled, + var(--spectrum-switch-handle-border-color-disabled) + ) + ); } :host([disabled][checked]) #input + #switch, :host([disabled][checked]) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-disabled, - var( - --mod-switch-background-color-selected-disabled, - var(--spectrum-switch-background-color-selected-disabled) - ) - ); + background-color: var( + --highcontrast-switch-background-color-selected-disabled, + var( + --mod-switch-background-color-selected-disabled, + var(--spectrum-switch-background-color-selected-disabled) + ) + ); } :host([disabled][checked]) #input + #switch:before, :host([disabled][checked]) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-disabled, - var( - --mod-switch-handle-border-color-disabled, - var(--spectrum-switch-handle-border-color-disabled) - ) - ); + border-color: var( + --highcontrast-switch-handle-border-color-disabled, + var( + --mod-switch-handle-border-color-disabled, + var(--spectrum-switch-handle-border-color-disabled) + ) + ); } :host([disabled]) #input ~ #label, :host([disabled]) #input ~ #label { - color: var( - --highcontrast-switch-label-color-disabled, - var( - --mod-switch-label-color-disabled, - var(--spectrum-switch-label-color-disabled) - ) - ); + color: var( + --highcontrast-switch-label-color-disabled, + var( + --mod-switch-label-color-disabled, + var(--spectrum-switch-label-color-disabled) + ) + ); } @media (forced-colors: active) { - :host { - --highcontrast-switch-label-color-default: ButtonText; - --highcontrast-switch-label-color-hover: ButtonText; - --highcontrast-switch-label-color-down: ButtonText; - --highcontrast-switch-label-color-focus: ButtonText; - --highcontrast-switch-label-color-disabled: GrayText; - --highcontrast-switch-handle-background-color: ButtonFace; - --highcontrast-switch-handle-border-color-default: ButtonText; - --highcontrast-switch-handle-border-color-hover: Highlight; - --highcontrast-switch-handle-border-color-down: Highlight; - --highcontrast-switch-handle-border-color-focus: Highlight; - --highcontrast-switch-handle-border-color-disabled: Highlight; - --highcontrast-switch-handle-border-color-selected-default: Highlight; - --highcontrast-switch-handle-border-color-selected-hover: Highlight; - --highcontrast-switch-handle-border-color-selected-down: Highlight; - --highcontrast-switch-handle-border-color-selected-focus: Highlight; - --highcontrast-switch-background-color: ButtonFace; - --highcontrast-switch-background-color-selected-default: Highlight; - --highcontrast-switch-background-color-selected-hover: Highlight; - --highcontrast-switch-background-color-selected-down: Highlight; - --highcontrast-switch-background-color-selected-focus: Highlight; - --highcontrast-switch-background-color-selected-disabled: Highlight; - --highcontrast-switch-focus-indicator-color: ButtonText; - forced-color-adjust: none; - } - - #input:not(:checked) + #switch { - box-shadow: inset 0 0 0 1px ButtonText; - } - - @media (hover: hover) { - :host(:hover) #input:not(:checked) + #switch { - box-shadow: inset 0 0 0 1px Highlight; - } - - :host([disabled][checked]:hover) #input + #switch, - :host([disabled][checked]:hover) #input + #switch { - background-color: GrayText; - box-shadow: inset 0 0 0 1px GrayText; - } - - :host([disabled][checked]:hover) #input + #switch:before, - :host([disabled][checked]:hover) #input + #switch:before { - background-color: ButtonFace; - border-color: GrayText; - } - } - - :host([disabled]) #input:not(:checked) + #switch, - :host([disabled]) #input:not(:checked) + #switch { - background-color: ButtonFace; - box-shadow: inset 0 0 0 1px GrayText; - } - - :host([disabled]) #input:not(:checked) + #switch:before, - :host([disabled]) #input:not(:checked) + #switch:before { - background-color: ButtonFace; - border-color: GrayText; - } - - :host([disabled][checked]) #input + #switch, - :host([disabled][checked]) #input + #switch { - background-color: GrayText; - box-shadow: inset 0 0 0 1px GrayText; - } - - :host([disabled][checked]) #input + #switch:before, - :host([disabled][checked]) #input + #switch:before { - background-color: ButtonFace; - border-color: GrayText; - } - - :host([disabled]) #input ~ #label, - :host([disabled]) #input ~ #label { - color: GrayText; - } + :host { + --highcontrast-switch-label-color-default: ButtonText; + --highcontrast-switch-label-color-hover: ButtonText; + --highcontrast-switch-label-color-down: ButtonText; + --highcontrast-switch-label-color-focus: ButtonText; + --highcontrast-switch-label-color-disabled: GrayText; + --highcontrast-switch-handle-background-color: ButtonFace; + --highcontrast-switch-handle-border-color-default: ButtonText; + --highcontrast-switch-handle-border-color-hover: Highlight; + --highcontrast-switch-handle-border-color-down: Highlight; + --highcontrast-switch-handle-border-color-focus: Highlight; + --highcontrast-switch-handle-border-color-disabled: Highlight; + --highcontrast-switch-handle-border-color-selected-default: Highlight; + --highcontrast-switch-handle-border-color-selected-hover: Highlight; + --highcontrast-switch-handle-border-color-selected-down: Highlight; + --highcontrast-switch-handle-border-color-selected-focus: Highlight; + --highcontrast-switch-background-color: ButtonFace; + --highcontrast-switch-background-color-selected-default: Highlight; + --highcontrast-switch-background-color-selected-hover: Highlight; + --highcontrast-switch-background-color-selected-down: Highlight; + --highcontrast-switch-background-color-selected-focus: Highlight; + --highcontrast-switch-background-color-selected-disabled: Highlight; + --highcontrast-switch-focus-indicator-color: ButtonText; + forced-color-adjust: none; + } + + #input:not(:checked) + #switch { + box-shadow: inset 0 0 0 1px ButtonText; + } + + @media (hover: hover) { + :host(:hover) #input:not(:checked) + #switch { + box-shadow: inset 0 0 0 1px Highlight; + } + + :host([disabled][checked]:hover) #input + #switch, + :host([disabled][checked]:hover) #input + #switch { + background-color: GrayText; + box-shadow: inset 0 0 0 1px GrayText; + } + + :host([disabled][checked]:hover) #input + #switch:before, + :host([disabled][checked]:hover) #input + #switch:before { + background-color: ButtonFace; + border-color: GrayText; + } + } + + :host([disabled]) #input:not(:checked) + #switch, + :host([disabled]) #input:not(:checked) + #switch { + background-color: ButtonFace; + box-shadow: inset 0 0 0 1px GrayText; + } + + :host([disabled]) #input:not(:checked) + #switch:before, + :host([disabled]) #input:not(:checked) + #switch:before { + background-color: ButtonFace; + border-color: GrayText; + } + + :host([disabled][checked]) #input + #switch, + :host([disabled][checked]) #input + #switch { + background-color: GrayText; + box-shadow: inset 0 0 0 1px GrayText; + } + + :host([disabled][checked]) #input + #switch:before, + :host([disabled][checked]) #input + #switch:before { + background-color: ButtonFace; + border-color: GrayText; + } + + :host([disabled]) #input ~ #label, + :host([disabled]) #input ~ #label { + color: GrayText; + } } diff --git a/packages/switch/src/switch-overrides.css b/packages/switch/src/switch-overrides.css index 93e1dcb225..7e061206f6 100644 --- a/packages/switch/src/switch-overrides.css +++ b/packages/switch/src/switch-overrides.css @@ -12,173 +12,165 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-switch-handle-border-color-default: var( - --system-switch-handle-border-color-default - ); - --spectrum-switch-handle-border-color-hover: var( - --system-switch-handle-border-color-hover - ); - --spectrum-switch-handle-border-color-down: var( - --system-switch-handle-border-color-down - ); - --spectrum-switch-handle-border-color-focus: var( - --system-switch-handle-border-color-focus - ); - --spectrum-switch-handle-border-color-selected-default: var( - --system-switch-handle-border-color-selected-default - ); - --spectrum-switch-handle-border-color-selected-hover: var( - --system-switch-handle-border-color-selected-hover - ); - --spectrum-switch-handle-border-color-selected-down: var( - --system-switch-handle-border-color-selected-down - ); - --spectrum-switch-handle-border-color-selected-focus: var( - --system-switch-handle-border-color-selected-focus - ); - --spectrum-switch-label-color-default: var( - --system-switch-label-color-default - ); - --spectrum-switch-label-color-hover: var(--system-switch-label-color-hover); - --spectrum-switch-label-color-down: var(--system-switch-label-color-down); - --spectrum-switch-label-color-focus: var(--system-switch-label-color-focus); - --spectrum-switch-label-color-disabled: var( - --system-switch-label-color-disabled - ); - --spectrum-switch-background-color: var(--system-switch-background-color); - --spectrum-switch-background-color-disabled: var( - --system-switch-background-color-disabled - ); - --spectrum-switch-background-color-selected-disabled: var( - --system-switch-background-color-selected-disabled - ); - --spectrum-switch-background-color-selected-default: var( - --system-switch-background-color-selected-default - ); - --spectrum-switch-background-color-selected-hover: var( - --system-switch-background-color-selected-hover - ); - --spectrum-switch-background-color-selected-down: var( - --system-switch-background-color-selected-down - ); - --spectrum-switch-background-color-selected-focus: var( - --system-switch-background-color-selected-focus - ); - --spectrum-switch-focus-indicator-thickness: var( - --system-switch-focus-indicator-thickness - ); - --spectrum-switch-focus-indicator-color: var( - --system-switch-focus-indicator-color - ); - --spectrum-switch-handle-background-color: var( - --system-switch-handle-background-color - ); - --spectrum-switch-handle-border-color-disabled: var( - --system-switch-handle-border-color-disabled - ); + --spectrum-switch-handle-border-color-default: var( + --system-switch-handle-border-color-default + ); + --spectrum-switch-handle-border-color-hover: var( + --system-switch-handle-border-color-hover + ); + --spectrum-switch-handle-border-color-down: var( + --system-switch-handle-border-color-down + ); + --spectrum-switch-handle-border-color-focus: var( + --system-switch-handle-border-color-focus + ); + --spectrum-switch-handle-border-color-selected-default: var( + --system-switch-handle-border-color-selected-default + ); + --spectrum-switch-handle-border-color-selected-hover: var( + --system-switch-handle-border-color-selected-hover + ); + --spectrum-switch-handle-border-color-selected-down: var( + --system-switch-handle-border-color-selected-down + ); + --spectrum-switch-handle-border-color-selected-focus: var( + --system-switch-handle-border-color-selected-focus + ); + --spectrum-switch-label-color-default: var( + --system-switch-label-color-default + ); + --spectrum-switch-label-color-hover: var(--system-switch-label-color-hover); + --spectrum-switch-label-color-down: var(--system-switch-label-color-down); + --spectrum-switch-label-color-focus: var(--system-switch-label-color-focus); + --spectrum-switch-label-color-disabled: var( + --system-switch-label-color-disabled + ); + --spectrum-switch-background-color: var(--system-switch-background-color); + --spectrum-switch-background-color-disabled: var( + --system-switch-background-color-disabled + ); + --spectrum-switch-background-color-selected-disabled: var( + --system-switch-background-color-selected-disabled + ); + --spectrum-switch-background-color-selected-default: var( + --system-switch-background-color-selected-default + ); + --spectrum-switch-background-color-selected-hover: var( + --system-switch-background-color-selected-hover + ); + --spectrum-switch-background-color-selected-down: var( + --system-switch-background-color-selected-down + ); + --spectrum-switch-background-color-selected-focus: var( + --system-switch-background-color-selected-focus + ); + --spectrum-switch-focus-indicator-thickness: var( + --system-switch-focus-indicator-thickness + ); + --spectrum-switch-focus-indicator-color: var( + --system-switch-focus-indicator-color + ); + --spectrum-switch-handle-background-color: var( + --system-switch-handle-background-color + ); + --spectrum-switch-handle-border-color-disabled: var( + --system-switch-handle-border-color-disabled + ); } :host([disabled]) { - --spectrum-switch-label-color-default: var( - --system-switch-disabled-label-color-default - ); + --spectrum-switch-label-color-default: var( + --system-switch-disabled-label-color-default + ); } :host([emphasized]) { - --spectrum-switch-background-color-selected-default: var( - --system-switch-emphasized-background-color-selected-default - ); - --spectrum-switch-background-color-selected-hover: var( - --system-switch-emphasized-background-color-selected-hover - ); - --spectrum-switch-background-color-selected-down: var( - --system-switch-emphasized-background-color-selected-down - ); - --spectrum-switch-background-color-selected-focus: var( - --system-switch-emphasized-background-color-selected-focus - ); - --spectrum-switch-handle-border-color-selected-default: var( - --system-switch-emphasized-handle-border-color-selected-default - ); - --spectrum-switch-handle-border-color-selected-hover: var( - --system-switch-emphasized-handle-border-color-selected-hover - ); - --spectrum-switch-handle-border-color-selected-down: var( - --system-switch-emphasized-handle-border-color-selected-down - ); - --spectrum-switch-handle-border-color-selected-focus: var( - --system-switch-emphasized-handle-border-color-selected-focus - ); + --spectrum-switch-background-color-selected-default: var( + --system-switch-emphasized-background-color-selected-default + ); + --spectrum-switch-background-color-selected-hover: var( + --system-switch-emphasized-background-color-selected-hover + ); + --spectrum-switch-background-color-selected-down: var( + --system-switch-emphasized-background-color-selected-down + ); + --spectrum-switch-background-color-selected-focus: var( + --system-switch-emphasized-background-color-selected-focus + ); + --spectrum-switch-handle-border-color-selected-default: var( + --system-switch-emphasized-handle-border-color-selected-default + ); + --spectrum-switch-handle-border-color-selected-hover: var( + --system-switch-emphasized-handle-border-color-selected-hover + ); + --spectrum-switch-handle-border-color-selected-down: var( + --system-switch-emphasized-handle-border-color-selected-down + ); + --spectrum-switch-handle-border-color-selected-focus: var( + --system-switch-emphasized-handle-border-color-selected-focus + ); } -:host([size='s']) { - --spectrum-switch-min-height: var(--system-switch-size-s-min-height); - --spectrum-switch-control-width: var(--system-switch-size-s-control-width); - --spectrum-switch-control-height: var( - --system-switch-size-s-control-height - ); - --spectrum-switch-control-label-spacing: var( - --system-switch-size-s-control-label-spacing - ); - --spectrum-switch-spacing-top-to-control: var( - --system-switch-size-s-spacing-top-to-control - ); - --spectrum-switch-spacing-top-to-label: var( - --system-switch-size-s-spacing-top-to-label - ); - --spectrum-switch-font-size: var(--system-switch-size-s-font-size); +:host([size="s"]) { + --spectrum-switch-min-height: var(--system-switch-size-s-min-height); + --spectrum-switch-control-width: var(--system-switch-size-s-control-width); + --spectrum-switch-control-height: var(--system-switch-size-s-control-height); + --spectrum-switch-control-label-spacing: var( + --system-switch-size-s-control-label-spacing + ); + --spectrum-switch-spacing-top-to-control: var( + --system-switch-size-s-spacing-top-to-control + ); + --spectrum-switch-spacing-top-to-label: var( + --system-switch-size-s-spacing-top-to-label + ); + --spectrum-switch-font-size: var(--system-switch-size-s-font-size); } :host { - --spectrum-switch-min-height: var(--system-switch-size-m-min-height); - --spectrum-switch-control-width: var(--system-switch-size-m-control-width); - --spectrum-switch-control-height: var( - --system-switch-size-m-control-height - ); - --spectrum-switch-control-label-spacing: var( - --system-switch-size-m-control-label-spacing - ); - --spectrum-switch-spacing-top-to-control: var( - --system-switch-size-m-spacing-top-to-control - ); - --spectrum-switch-spacing-top-to-label: var( - --system-switch-size-m-spacing-top-to-label - ); - --spectrum-switch-font-size: var(--system-switch-size-m-font-size); + --spectrum-switch-min-height: var(--system-switch-size-m-min-height); + --spectrum-switch-control-width: var(--system-switch-size-m-control-width); + --spectrum-switch-control-height: var(--system-switch-size-m-control-height); + --spectrum-switch-control-label-spacing: var( + --system-switch-size-m-control-label-spacing + ); + --spectrum-switch-spacing-top-to-control: var( + --system-switch-size-m-spacing-top-to-control + ); + --spectrum-switch-spacing-top-to-label: var( + --system-switch-size-m-spacing-top-to-label + ); + --spectrum-switch-font-size: var(--system-switch-size-m-font-size); } -:host([size='l']) { - --spectrum-switch-min-height: var(--system-switch-size-l-min-height); - --spectrum-switch-control-width: var(--system-switch-size-l-control-width); - --spectrum-switch-control-height: var( - --system-switch-size-l-control-height - ); - --spectrum-switch-control-label-spacing: var( - --system-switch-size-l-control-label-spacing - ); - --spectrum-switch-spacing-top-to-control: var( - --system-switch-size-l-spacing-top-to-control - ); - --spectrum-switch-spacing-top-to-label: var( - --system-switch-size-l-spacing-top-to-label - ); - --spectrum-switch-font-size: var(--system-switch-size-l-font-size); +:host([size="l"]) { + --spectrum-switch-min-height: var(--system-switch-size-l-min-height); + --spectrum-switch-control-width: var(--system-switch-size-l-control-width); + --spectrum-switch-control-height: var(--system-switch-size-l-control-height); + --spectrum-switch-control-label-spacing: var( + --system-switch-size-l-control-label-spacing + ); + --spectrum-switch-spacing-top-to-control: var( + --system-switch-size-l-spacing-top-to-control + ); + --spectrum-switch-spacing-top-to-label: var( + --system-switch-size-l-spacing-top-to-label + ); + --spectrum-switch-font-size: var(--system-switch-size-l-font-size); } -:host([size='xl']) { - --spectrum-switch-min-height: var(--system-switch-size-xl-min-height); - --spectrum-switch-control-width: var(--system-switch-size-xl-control-width); - --spectrum-switch-control-height: var( - --system-switch-size-xl-control-height - ); - --spectrum-switch-control-label-spacing: var( - --system-switch-size-xl-control-label-spacing - ); - --spectrum-switch-spacing-top-to-control: var( - --system-switch-size-xl-spacing-top-to-control - ); - --spectrum-switch-spacing-top-to-label: var( - --system-switch-size-xl-spacing-top-to-label - ); - --spectrum-switch-font-size: var(--system-switch-size-xl-font-size); +:host([size="xl"]) { + --spectrum-switch-min-height: var(--system-switch-size-xl-min-height); + --spectrum-switch-control-width: var(--system-switch-size-xl-control-width); + --spectrum-switch-control-height: var(--system-switch-size-xl-control-height); + --spectrum-switch-control-label-spacing: var( + --system-switch-size-xl-control-label-spacing + ); + --spectrum-switch-spacing-top-to-control: var( + --system-switch-size-xl-spacing-top-to-control + ); + --spectrum-switch-spacing-top-to-label: var( + --system-switch-size-xl-spacing-top-to-label + ); + --spectrum-switch-font-size: var(--system-switch-size-xl-font-size); } diff --git a/packages/table/src/spectrum-table-body.css b/packages/table/src/spectrum-table-body.css index 6ee65c89a5..1bbb07f62f 100644 --- a/packages/table/src/spectrum-table-body.css +++ b/packages/table/src/spectrum-table-body.css @@ -12,30 +12,30 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - border-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); - border: none; - position: relative; + border-radius: var( + --mod-table-border-radius, + var(--spectrum-table-border-radius) + ); + border: none; + position: relative; } :host([drop-target]) { - --spectrum-table-border-color: transparent; - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-drop-zone-outline-color, - var(--spectrum-table-drop-zone-outline-color) - ) - ); + --spectrum-table-border-color: transparent; + outline-width: var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ); + outline-style: solid; + outline-color: var( + --highcontrast-table-focus-indicator-color, + var( + --mod-table-drop-zone-outline-color, + var(--spectrum-table-drop-zone-outline-color) + ) + ); } :host { - display: table-row-group; + display: table-row-group; } diff --git a/packages/table/src/spectrum-table-cell.css b/packages/table/src/spectrum-table-cell.css index 5ddcf20ffc..0c24f4c3c3 100644 --- a/packages/table/src/spectrum-table-cell.css +++ b/packages/table/src/spectrum-table-cell.css @@ -12,130 +12,132 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - forced-color-adjust: none; - } + :host { + forced-color-adjust: none; + } } -:host([align='center']) { - text-align: center; +:host([align="center"]) { + text-align: center; } -:host([align='end']) { - text-align: end; +:host([align="end"]) { + text-align: end; } :host { - border-block-start: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-divider-color, - var(--mod-table-divider-color, var(--spectrum-table-divider-color)) - ); + border-block-start: var( + --mod-table-border-width, + var(--spectrum-table-border-width) + ) + solid + var( + --highcontrast-table-divider-color, + var(--mod-table-divider-color, var(--spectrum-table-divider-color)) + ); } :host { - box-sizing: border-box; - font-size: var( - --mod-table-row-font-size, - var(--spectrum-table-row-font-size) - ); - font-weight: var( - --mod-table-row-font-weight, - var(--spectrum-table-row-font-weight) - ); - line-height: var( - --mod-table-row-line-height, - var(--spectrum-table-row-line-height) - ); - vertical-align: var( - --mod-table-default-vertical-align, - var(--spectrum-table-default-vertical-align) - ); - color: var( - --highcontrast-table-row-text-color, - var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)) - ); - background-color: var(--spectrum-table-cell-background-color); - block-size: var( - --mod-table-min-row-height, - var(--spectrum-table-min-row-height) - ); - padding-block-start: calc( - var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - padding-block-end: var( - --mod-table-row-bottom-to-text, - var(--spectrum-table-row-bottom-to-text) - ); - padding-inline: calc( - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - - var( - --mod-table-outer-border-inline-width, - var(--spectrum-table-outer-border-inline-width) - ) - ); + box-sizing: border-box; + font-size: var( + --mod-table-row-font-size, + var(--spectrum-table-row-font-size) + ); + font-weight: var( + --mod-table-row-font-weight, + var(--spectrum-table-row-font-weight) + ); + line-height: var( + --mod-table-row-line-height, + var(--spectrum-table-row-line-height) + ); + vertical-align: var( + --mod-table-default-vertical-align, + var(--spectrum-table-default-vertical-align) + ); + color: var( + --highcontrast-table-row-text-color, + var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)) + ); + background-color: var(--spectrum-table-cell-background-color); + block-size: var( + --mod-table-min-row-height, + var(--spectrum-table-min-row-height) + ); + padding-block-start: calc( + var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - + var(--mod-table-border-width, var(--spectrum-table-border-width)) + ); + padding-block-end: var( + --mod-table-row-bottom-to-text, + var(--spectrum-table-row-bottom-to-text) + ); + padding-inline: calc( + var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - + var( + --mod-table-outer-border-inline-width, + var(--spectrum-table-outer-border-inline-width) + ) + ); } :host { - position: relative; + position: relative; } :host([focused]), :host(:focus-visible) { - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-cell-focus-indicator-color, - var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-focus-indicator-color, - var(--spectrum-table-focus-indicator-color) - ) - ) - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px) - ); + outline-width: var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ); + outline-style: solid; + outline-color: var( + --highcontrast-table-cell-focus-indicator-color, + var( + --highcontrast-table-focus-indicator-color, + var( + --mod-table-focus-indicator-color, + var(--spectrum-table-focus-indicator-color) + ) + ) + ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * + -1 + ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * + -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px) + ); } .divider { - border-inline-end: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-divider-color, - var(--mod-table-divider-color, var(--spectrum-table-divider-color)) - ); + border-inline-end: var( + --mod-table-border-width, + var(--spectrum-table-border-width) + ) + solid + var( + --highcontrast-table-divider-color, + var(--mod-table-divider-color, var(--spectrum-table-divider-color)) + ); } :host { - display: table-cell; + display: table-cell; } .spectrum-Table-cell--collapsible { - padding-block: 0; - padding-inline-start: calc( - var(--spectrum-table-row-tier, 0px) * - var(--spectrum-table-collapsible-tier-indent) - ); + padding-block: 0; + padding-inline-start: calc( + var(--spectrum-table-row-tier, 0px) * + var(--spectrum-table-collapsible-tier-indent) + ); } diff --git a/packages/table/src/spectrum-table-checkbox-cell.css b/packages/table/src/spectrum-table-checkbox-cell.css index 0ffde28e3f..bdc2a97380 100644 --- a/packages/table/src/spectrum-table-checkbox-cell.css +++ b/packages/table/src/spectrum-table-checkbox-cell.css @@ -12,225 +12,221 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host(:not([head-cell])) { - forced-color-adjust: none; - } + :host(:not([head-cell])) { + forced-color-adjust: none; + } } :host([head-cell]) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color, - var( - --mod-table-icon-color-default, - var(--spectrum-table-icon-color-default) - ) - ); - box-sizing: border-box; - text-align: start; - vertical-align: var( - --mod-table-header-vertical-align, - var(--spectrum-table-header-vertical-align) - ); - font-family: var( - --mod-table-header-font-family, - var(--spectrum-table-row-font-family) - ); - font-size: var( - --mod-table-header-font-size, - var(--spectrum-table-row-font-size) - ); - font-weight: var( - --mod-table-header-font-weight, - var(--spectrum-table-header-font-weight) - ); - line-height: var( - --mod-table-header-line-height, - var(--spectrum-table-row-line-height) - ); - text-transform: none; - text-transform: var(--mod-table-header-text-transform, none); - block-size: var( - --mod-table-min-header-height, - var(--spectrum-table-min-header-height) - ); - padding-block: var( - --mod-table-header-top-to-text, - var(--spectrum-table-header-top-to-text) - ) - var( - --mod-table-header-bottom-to-text, - var(--spectrum-table-header-bottom-to-text) - ); - padding-inline: var( - --mod-table-cell-inline-space, - var(--spectrum-table-cell-inline-space) - ); - color: var( - --mod-table-header-text-color, - var(--spectrum-table-header-text-color) - ); - background-color: var( - --mod-table-header-background-color, - var(--spectrum-table-header-background-color) - ); - transition: color - var( - --highcontrast-table-transition-duration, - var( - --mod-table-transition-duration, - var(--spectrum-table-transition-duration) - ) - ) - ease-in-out; - cursor: auto; - cursor: var(--mod-table-cursor-header-default, initial); - border-radius: 0; - outline: 0; + --spectrum-table-icon-color: var( + --highcontrast-table-icon-color, + var( + --mod-table-icon-color-default, + var(--spectrum-table-icon-color-default) + ) + ); + box-sizing: border-box; + text-align: start; + vertical-align: var( + --mod-table-header-vertical-align, + var(--spectrum-table-header-vertical-align) + ); + font-family: var( + --mod-table-header-font-family, + var(--spectrum-table-row-font-family) + ); + font-size: var( + --mod-table-header-font-size, + var(--spectrum-table-row-font-size) + ); + font-weight: var( + --mod-table-header-font-weight, + var(--spectrum-table-header-font-weight) + ); + line-height: var( + --mod-table-header-line-height, + var(--spectrum-table-row-line-height) + ); + text-transform: none; + text-transform: var(--mod-table-header-text-transform, none); + block-size: var( + --mod-table-min-header-height, + var(--spectrum-table-min-header-height) + ); + padding-block: var( + --mod-table-header-top-to-text, + var(--spectrum-table-header-top-to-text) + ) + var( + --mod-table-header-bottom-to-text, + var(--spectrum-table-header-bottom-to-text) + ); + padding-inline: var( + --mod-table-cell-inline-space, + var(--spectrum-table-cell-inline-space) + ); + color: var( + --mod-table-header-text-color, + var(--spectrum-table-header-text-color) + ); + background-color: var( + --mod-table-header-background-color, + var(--spectrum-table-header-background-color) + ); + transition: color + var( + --highcontrast-table-transition-duration, + var( + --mod-table-transition-duration, + var(--spectrum-table-transition-duration) + ) + ) + ease-in-out; + cursor: auto; + cursor: var(--mod-table-cursor-header-default, initial); + border-radius: 0; + outline: 0; } :host(:not([head-cell])) { - border-block-start: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-divider-color, - var(--mod-table-divider-color, var(--spectrum-table-divider-color)) - ); + border-block-start: var( + --mod-table-border-width, + var(--spectrum-table-border-width) + ) + solid + var( + --highcontrast-table-divider-color, + var(--mod-table-divider-color, var(--spectrum-table-divider-color)) + ); } :host(:not([head-cell])) { - box-sizing: border-box; - font-size: var( - --mod-table-row-font-size, - var(--spectrum-table-row-font-size) - ); - font-weight: var( - --mod-table-row-font-weight, - var(--spectrum-table-row-font-weight) - ); - line-height: var( - --mod-table-row-line-height, - var(--spectrum-table-row-line-height) - ); - vertical-align: var( - --mod-table-default-vertical-align, - var(--spectrum-table-default-vertical-align) - ); - color: var( - --highcontrast-table-row-text-color, - var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)) - ); - background-color: var(--spectrum-table-cell-background-color); - block-size: var( - --mod-table-min-row-height, - var(--spectrum-table-min-row-height) - ); - padding-block-start: calc( - var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - padding-block-end: var( - --mod-table-row-bottom-to-text, - var(--spectrum-table-row-bottom-to-text) - ); - padding-inline: calc( - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - - var( - --mod-table-outer-border-inline-width, - var(--spectrum-table-outer-border-inline-width) - ) - ); + box-sizing: border-box; + font-size: var( + --mod-table-row-font-size, + var(--spectrum-table-row-font-size) + ); + font-weight: var( + --mod-table-row-font-weight, + var(--spectrum-table-row-font-weight) + ); + line-height: var( + --mod-table-row-line-height, + var(--spectrum-table-row-line-height) + ); + vertical-align: var( + --mod-table-default-vertical-align, + var(--spectrum-table-default-vertical-align) + ); + color: var( + --highcontrast-table-row-text-color, + var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)) + ); + background-color: var(--spectrum-table-cell-background-color); + block-size: var( + --mod-table-min-row-height, + var(--spectrum-table-min-row-height) + ); + padding-block-start: calc( + var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - + var(--mod-table-border-width, var(--spectrum-table-border-width)) + ); + padding-block-end: var( + --mod-table-row-bottom-to-text, + var(--spectrum-table-row-bottom-to-text) + ); + padding-inline: calc( + var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - + var( + --mod-table-outer-border-inline-width, + var(--spectrum-table-outer-border-inline-width) + ) + ); } :host(:not([head-cell])), :host([head-cell]) { - position: relative; + position: relative; } :host(:not([head-cell])[focused]), :host(:not([head-cell]):focus-visible), :host([head-cell][focused]), :host([head-cell]:focus-visible) { - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-cell-focus-indicator-color, - var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-focus-indicator-color, - var(--spectrum-table-focus-indicator-color) - ) - ) - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px) - ); + outline-width: var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ); + outline-style: solid; + outline-color: var( + --highcontrast-table-cell-focus-indicator-color, + var( + --highcontrast-table-focus-indicator-color, + var( + --mod-table-focus-indicator-color, + var(--spectrum-table-focus-indicator-color) + ) + ) + ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * + -1 + ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * + -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px) + ); } :host(:host) { - inline-size: var(--spectrum-checkbox-control-size-small); - padding-block: 0; - padding-inline-end: calc( - var( - --mod-table-checkbox-to-text, - var(--spectrum-table-checkbox-to-text) - ) - - var( - --mod-table-edge-to-content, - var(--spectrum-table-edge-to-content) - ) - ); + inline-size: var(--spectrum-checkbox-control-size-small); + padding-block: 0; + padding-inline-end: calc( + var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - + var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) + ); } :host(:host) sp-checkbox { - --mod-checkbox-spacing: 0px; - min-block-size: 0; + --mod-checkbox-spacing: 0px; + min-block-size: 0; } :host(:host:not([head-cell])) sp-checkbox { - margin-block-start: calc( - var( - --mod-table-row-checkbox-block-spacing, - var(--spectrum-table-row-checkbox-block-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - margin-block-end: var( - --mod-table-row-checkbox-block-spacing, - var(--spectrum-table-row-checkbox-block-spacing) - ); + margin-block-start: calc( + var( + --mod-table-row-checkbox-block-spacing, + var(--spectrum-table-row-checkbox-block-spacing) + ) - + var(--mod-table-border-width, var(--spectrum-table-border-width)) + ); + margin-block-end: var( + --mod-table-row-checkbox-block-spacing, + var(--spectrum-table-row-checkbox-block-spacing) + ); } :host(:host[head-cell]) sp-checkbox { - margin-block-start: calc( - var( - --mod-table-header-checkbox-block-spacing, - var(--spectrum-table-header-checkbox-block-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - margin-block-end: var( - --mod-table-header-checkbox-block-spacing, - var(--spectrum-table-header-checkbox-block-spacing) - ); + margin-block-start: calc( + var( + --mod-table-header-checkbox-block-spacing, + var(--spectrum-table-header-checkbox-block-spacing) + ) - + var(--mod-table-border-width, var(--spectrum-table-border-width)) + ); + margin-block-end: var( + --mod-table-header-checkbox-block-spacing, + var(--spectrum-table-header-checkbox-block-spacing) + ); } :host(:not([head-cell])), :host([head-cell]) { - display: table-cell; + display: table-cell; } diff --git a/packages/table/src/spectrum-table-head-cell.css b/packages/table/src/spectrum-table-head-cell.css index 57bac6b077..529ca68db5 100644 --- a/packages/table/src/spectrum-table-head-cell.css +++ b/packages/table/src/spectrum-table-head-cell.css @@ -12,228 +12,221 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .sortedIcon { - vertical-align: initial; - transition: transform - var( - --highcontrast-table-transition-duration, - var( - --mod-table-transition-duration, - var(--spectrum-table-transition-duration) - ) - ) - ease-in-out; - margin-inline-start: var(--mod-table-sort-icon-inline-start-spacing, 0); - margin-inline-end: var( - --mod-table-sort-icon-inline-end-spacing, - var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text)) - ); - display: none; + vertical-align: initial; + transition: transform + var( + --highcontrast-table-transition-duration, + var( + --mod-table-transition-duration, + var(--spectrum-table-transition-duration) + ) + ) + ease-in-out; + margin-inline-start: var(--mod-table-sort-icon-inline-start-spacing, 0); + margin-inline-end: var( + --mod-table-sort-icon-inline-end-spacing, + var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text)) + ); + display: none; } :host { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color, - var( - --mod-table-icon-color-default, - var(--spectrum-table-icon-color-default) - ) - ); - box-sizing: border-box; - text-align: start; - vertical-align: var( - --mod-table-header-vertical-align, - var(--spectrum-table-header-vertical-align) - ); - font-family: var( - --mod-table-header-font-family, - var(--spectrum-table-row-font-family) - ); - font-size: var( - --mod-table-header-font-size, - var(--spectrum-table-row-font-size) - ); - font-weight: var( - --mod-table-header-font-weight, - var(--spectrum-table-header-font-weight) - ); - line-height: var( - --mod-table-header-line-height, - var(--spectrum-table-row-line-height) - ); - text-transform: none; - text-transform: var(--mod-table-header-text-transform, none); - block-size: var( - --mod-table-min-header-height, - var(--spectrum-table-min-header-height) - ); - padding-block: var( - --mod-table-header-top-to-text, - var(--spectrum-table-header-top-to-text) - ) - var( - --mod-table-header-bottom-to-text, - var(--spectrum-table-header-bottom-to-text) - ); - padding-inline: var( - --mod-table-cell-inline-space, - var(--spectrum-table-cell-inline-space) - ); - color: var( - --mod-table-header-text-color, - var(--spectrum-table-header-text-color) - ); - background-color: var( - --mod-table-header-background-color, - var(--spectrum-table-header-background-color) - ); - transition: color - var( - --highcontrast-table-transition-duration, - var( - --mod-table-transition-duration, - var(--spectrum-table-transition-duration) - ) - ) - ease-in-out; - cursor: auto; - cursor: var(--mod-table-cursor-header-default, initial); - border-radius: 0; - outline: 0; + --spectrum-table-icon-color: var( + --highcontrast-table-icon-color, + var( + --mod-table-icon-color-default, + var(--spectrum-table-icon-color-default) + ) + ); + box-sizing: border-box; + text-align: start; + vertical-align: var( + --mod-table-header-vertical-align, + var(--spectrum-table-header-vertical-align) + ); + font-family: var( + --mod-table-header-font-family, + var(--spectrum-table-row-font-family) + ); + font-size: var( + --mod-table-header-font-size, + var(--spectrum-table-row-font-size) + ); + font-weight: var( + --mod-table-header-font-weight, + var(--spectrum-table-header-font-weight) + ); + line-height: var( + --mod-table-header-line-height, + var(--spectrum-table-row-line-height) + ); + text-transform: none; + text-transform: var(--mod-table-header-text-transform, none); + block-size: var( + --mod-table-min-header-height, + var(--spectrum-table-min-header-height) + ); + padding-block: var( + --mod-table-header-top-to-text, + var(--spectrum-table-header-top-to-text) + ) + var( + --mod-table-header-bottom-to-text, + var(--spectrum-table-header-bottom-to-text) + ); + padding-inline: var( + --mod-table-cell-inline-space, + var(--spectrum-table-cell-inline-space) + ); + color: var( + --mod-table-header-text-color, + var(--spectrum-table-header-text-color) + ); + background-color: var( + --mod-table-header-background-color, + var(--spectrum-table-header-background-color) + ); + transition: color + var( + --highcontrast-table-transition-duration, + var( + --mod-table-transition-duration, + var(--spectrum-table-transition-duration) + ) + ) + ease-in-out; + cursor: auto; + cursor: var(--mod-table-cursor-header-default, initial); + border-radius: 0; + outline: 0; } .spectrum-Table-menuIcon, .sortedIcon { - color: var(--spectrum-table-icon-color); + color: var(--spectrum-table-icon-color); } :host([sortable]) { - cursor: pointer; - cursor: var(--mod-table-cursor-header-sortable, pointer); + cursor: pointer; + cursor: var(--mod-table-cursor-header-sortable, pointer); } :host([sortable][active]) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-active, - var(--spectrum-table-icon-color-active) - ) - ); + --spectrum-table-icon-color: var( + --highcontrast-table-icon-color-focus, + var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active)) + ); } :host([sortable]:focus) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-focus, - var(--spectrum-table-icon-color-focus) - ) - ); + --spectrum-table-icon-color: var( + --highcontrast-table-icon-color-focus, + var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-focus)) + ); } :host([sortable]) .is-keyboardFocused, :host([sortable]:focus-visible) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-key-focus, - var(--spectrum-table-icon-color-key-focus) - ) - ); + --spectrum-table-icon-color: var( + --highcontrast-table-icon-color-focus, + var( + --mod-table-icon-color-key-focus, + var(--spectrum-table-icon-color-key-focus) + ) + ); } -:host([sort-direction='asc']) .sortedIcon, -:host([sort-direction='desc']) .sortedIcon { - display: inline-block; +:host([sort-direction="asc"]) .sortedIcon, +:host([sort-direction="desc"]) .sortedIcon { + display: inline-block; } -:host([sort-direction='asc']) .sortedIcon { - transform: rotate(-90deg); +:host([sort-direction="asc"]) .sortedIcon { + transform: rotate(-90deg); } :host { - position: relative; + position: relative; } :host([focused]), :host(:focus-visible) { - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-cell-focus-indicator-color, - var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-focus-indicator-color, - var(--spectrum-table-focus-indicator-color) - ) - ) - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px) - ); + outline-width: var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ); + outline-style: solid; + outline-color: var( + --highcontrast-table-cell-focus-indicator-color, + var( + --highcontrast-table-focus-indicator-color, + var( + --mod-table-focus-indicator-color, + var(--spectrum-table-focus-indicator-color) + ) + ) + ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * + -1 + ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * + -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px) + ); } :host .spectrum-Table-checkboxCell .spectrum-Table-checkbox { - margin-block-start: calc( - var( - --mod-table-header-checkbox-block-spacing, - var(--spectrum-table-header-checkbox-block-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - margin-block-end: var( - --mod-table-header-checkbox-block-spacing, - var(--spectrum-table-header-checkbox-block-spacing) - ); + margin-block-start: calc( + var( + --mod-table-header-checkbox-block-spacing, + var(--spectrum-table-header-checkbox-block-spacing) + ) - + var(--mod-table-border-width, var(--spectrum-table-border-width)) + ); + margin-block-end: var( + --mod-table-header-checkbox-block-spacing, + var(--spectrum-table-header-checkbox-block-spacing) + ); } :host { - display: table-cell; + display: table-cell; } :host .spectrum-Table-scroller { - border-block-end: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); + border-block-end: var( + --mod-table-border-width, + var(--spectrum-table-border-width) + ) + solid + var( + --highcontrast-table-border-color, + var(--mod-table-border-color, var(--spectrum-table-border-color)) + ); } @media (hover: hover) { - :host([sortable]:hover) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-hover, - var(--spectrum-table-icon-color-hover) - ) - ); - } - - :host([sortable]:focus):hover { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-focus-hover, - var(--spectrum-table-icon-color-focus-hover) - ) - ); - } + :host([sortable]:hover) { + --spectrum-table-icon-color: var( + --highcontrast-table-icon-color-focus, + var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover)) + ); + } + + :host([sortable]:focus):hover { + --spectrum-table-icon-color: var( + --highcontrast-table-icon-color-focus, + var( + --mod-table-icon-color-focus-hover, + var(--spectrum-table-icon-color-focus-hover) + ) + ); + } } diff --git a/packages/table/src/spectrum-table-head.css b/packages/table/src/spectrum-table-head.css index d093c53484..263587102d 100644 --- a/packages/table/src/spectrum-table-head.css +++ b/packages/table/src/spectrum-table-head.css @@ -12,11 +12,11 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - display: table-header-group; + display: table-header-group; } :host .spectrum-Table-scroller { - z-index: 1; - position: sticky; - inset-block-start: 0; + z-index: 1; + position: sticky; + inset-block-start: 0; } diff --git a/packages/table/src/spectrum-table-row.css b/packages/table/src/spectrum-table-row.css index 85ff8f0591..df62fdb86c 100644 --- a/packages/table/src/spectrum-table-row.css +++ b/packages/table/src/spectrum-table-row.css @@ -12,573 +12,573 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host([focused]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before, - :host(:focus-visible) - .spectrum-Table-checkbox - .spectrum-Checkbox-box:before { - outline: var(--highcontrast-table-row-text-color-hover) 1px solid; - } - - @media (hover: hover) { - :host(:hover) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { - outline: var(--highcontrast-table-row-text-color-hover) 1px solid; - } - } - - :host([drop-target]) .spectrum-Table-body, - :host([drop-target]), - :host([selected]) { - --highcontrast-table-cell-focus-indicator-color: var( - --highcontrast-table-selected-row-text-color - ); - --highcontrast-table-cell-focus-extra-offset: 1px; - } - - :host([drop-target]) - .spectrum-Table-body - .spectrum-Table-checkbox - .spectrum-Checkbox-box:before, - :host([drop-target]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before, - :host([selected]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { - outline: var(--highcontrast-table-selected-row-text-color) 1px solid; - } + :host([focused]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before, + :host(:focus-visible) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { + outline: var(--highcontrast-table-row-text-color-hover) 1px solid; + } + + @media (hover: hover) { + :host(:hover) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { + outline: var(--highcontrast-table-row-text-color-hover) 1px solid; + } + } + + :host([drop-target]) .spectrum-Table-body, + :host([drop-target]), + :host([selected]) { + --highcontrast-table-cell-focus-indicator-color: var( + --highcontrast-table-selected-row-text-color + ); + --highcontrast-table-cell-focus-extra-offset: 1px; + } + + :host([drop-target]) + .spectrum-Table-body + .spectrum-Table-checkbox + .spectrum-Checkbox-box:before, + :host([drop-target]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before, + :host([selected]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { + outline: var(--highcontrast-table-selected-row-text-color) 1px solid; + } } :host(:first-child) .spectrum-Table-body ::slotted(*) { - border-block-start: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); + border-block-start: var( + --mod-table-border-width, + var(--spectrum-table-border-width) + ) + solid + var( + --highcontrast-table-border-color, + var(--mod-table-border-color, var(--spectrum-table-border-color)) + ); } :host(:last-child) .spectrum-Table-body ::slotted(*) { - border-block-end: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); + border-block-end: var( + --mod-table-border-width, + var(--spectrum-table-border-width) + ) + solid + var( + --highcontrast-table-border-color, + var(--mod-table-border-color, var(--spectrum-table-border-color)) + ); } :host .spectrum-Table-body ::slotted(:first-child) { - border-inline-start: var( - --mod-table-outer-border-inline-width, - var(--spectrum-table-outer-border-inline-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); + border-inline-start: var( + --mod-table-outer-border-inline-width, + var(--spectrum-table-outer-border-inline-width) + ) + solid + var( + --highcontrast-table-border-color, + var(--mod-table-border-color, var(--spectrum-table-border-color)) + ); } :host .spectrum-Table-body ::slotted(:last-child) { - border-inline-end: var( - --mod-table-outer-border-inline-width, - var(--spectrum-table-outer-border-inline-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); + border-inline-end: var( + --mod-table-outer-border-inline-width, + var(--spectrum-table-outer-border-inline-width) + ) + solid + var( + --highcontrast-table-border-color, + var(--mod-table-border-color, var(--spectrum-table-border-color)) + ); } :host(:first-child) ::slotted(:first-child) { - border-start-start-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-start-start-radius: var( + --mod-table-border-radius, + var(--spectrum-table-border-radius) + ); } :host(:first-child) ::slotted(:last-child) { - border-start-end-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-start-end-radius: var( + --mod-table-border-radius, + var(--spectrum-table-border-radius) + ); } :host(:last-child) ::slotted(:first-child) { - border-end-start-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-end-start-radius: var( + --mod-table-border-radius, + var(--spectrum-table-border-radius) + ); } :host(:last-child) ::slotted(:last-child) { - border-end-end-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-end-end-radius: var( + --mod-table-border-radius, + var(--spectrum-table-border-radius) + ); } :host { - transition: background-color - var( - --highcontrast-table-transition-duration, - var( - --mod-table-transition-duration, - var(--spectrum-table-transition-duration) - ) - ) - ease-in-out; - cursor: pointer; - cursor: var(--mod-table-cursor-row-default, pointer); - border-block-start: none; - position: relative; + transition: background-color + var( + --highcontrast-table-transition-duration, + var( + --mod-table-transition-duration, + var(--spectrum-table-transition-duration) + ) + ) + ease-in-out; + cursor: pointer; + cursor: var(--mod-table-cursor-row-default, pointer); + border-block-start: none; + position: relative; } :host(:first-child) { - border-start-start-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); - border-start-end-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-start-start-radius: var( + --mod-table-border-radius, + var(--spectrum-table-border-radius) + ); + border-start-end-radius: var( + --mod-table-border-radius, + var(--spectrum-table-border-radius) + ); } :host(:last-child) { - border-end-end-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); - border-end-start-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-end-end-radius: var( + --mod-table-border-radius, + var(--spectrum-table-border-radius) + ); + border-end-start-radius: var( + --mod-table-border-radius, + var(--spectrum-table-border-radius) + ); } :host(:focus) { - outline: 0; + outline: 0; } :host([focused]), :host(:focus-visible) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-row-text-color-hover - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-row-text-color-hover - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color-hover, - var( - --mod-table-row-background-color-hover, - var(--spectrum-table-row-background-color-hover) - ) - ); + --highcontrast-table-row-text-color: var( + --highcontrast-table-row-text-color-hover + ); + --highcontrast-table-icon-color: var( + --highcontrast-table-row-text-color-hover + ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-row-background-color-hover, + var( + --mod-table-row-background-color-hover, + var(--spectrum-table-row-background-color-hover) + ) + ); } :host:active { - --highcontrast-table-row-text-color: var( - --highcontrast-table-row-text-color-hover - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-row-text-color-hover - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color-hover, - var( - --mod-table-row-active-color, - var(--spectrum-table-row-active-color) - ) - ); + --highcontrast-table-row-text-color: var( + --highcontrast-table-row-text-color-hover + ); + --highcontrast-table-icon-color: var( + --highcontrast-table-row-text-color-hover + ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-row-background-color-hover, + var(--mod-table-row-active-color, var(--spectrum-table-row-active-color)) + ); } :host([selected]) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-selected-row-text-color - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-selected-row-text-color - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-selected-row-background-color, - var(--spectrum-table-selected-cell-background-color) - ); + --highcontrast-table-row-text-color: var( + --highcontrast-table-selected-row-text-color + ); + --highcontrast-table-icon-color: var( + --highcontrast-table-selected-row-text-color + ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-selected-row-background-color, + var(--spectrum-table-selected-cell-background-color) + ); } :host([selected][focused]), :host([selected]:focus-visible) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-selected-row-text-color-focus - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-selected-row-text-color-focus - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-selected-row-background-color-focus, - var(--spectrum-table-selected-cell-background-color-focus) - ); + --highcontrast-table-row-text-color: var( + --highcontrast-table-selected-row-text-color-focus + ); + --highcontrast-table-icon-color: var( + --highcontrast-table-selected-row-text-color-focus + ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-selected-row-background-color-focus, + var(--spectrum-table-selected-cell-background-color-focus) + ); } :host([drop-target]) .spectrum-Table-body, :host([drop-target]) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-selected-row-text-color - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-selected-row-text-color - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-selected-row-background-color, - var( - --mod-table-drop-zone-background-color, - var(--spectrum-table-drop-zone-background-color) - ) - ); + --highcontrast-table-row-text-color: var( + --highcontrast-table-selected-row-text-color + ); + --highcontrast-table-icon-color: var( + --highcontrast-table-selected-row-text-color + ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-selected-row-background-color, + var( + --mod-table-drop-zone-background-color, + var(--spectrum-table-drop-zone-background-color) + ) + ); } :host([drop-target]) { - --spectrum-table-border-color: var( - --highcontrast-table-focus-indicator-color, - transparent - ); - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-drop-zone-outline-color, - var(--spectrum-table-drop-zone-outline-color) - ) - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - ); + --spectrum-table-border-color: var( + --highcontrast-table-focus-indicator-color, + transparent + ); + outline-width: var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ); + outline-style: solid; + outline-color: var( + --highcontrast-table-focus-indicator-color, + var( + --mod-table-drop-zone-outline-color, + var(--spectrum-table-drop-zone-outline-color) + ) + ); + outline-offset: calc( + var( + --mod-table-focus-indicator-thickness, + var(--spectrum-table-focus-indicator-thickness) + ) * + -1 + ); } :host([drop-target]) ::slotted(*) { - border-block-start-color: var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-drop-zone-outline-color, - var(--spectrum-table-drop-zone-outline-color) - ) - ); + border-block-start-color: var( + --highcontrast-table-focus-indicator-color, + var( + --mod-table-drop-zone-outline-color, + var(--spectrum-table-drop-zone-outline-color) + ) + ); } .spectrum-Table-row--summary { - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color, - var( - --mod-table-summary-row-background-color, - var(--spectrum-table-summary-row-background-color) - ) - ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-row-background-color, + var( + --mod-table-summary-row-background-color, + var(--spectrum-table-summary-row-background-color) + ) + ); } .spectrum-Table-row--summary ::slotted(*) { - font-weight: var( - --mod-table-summary-row-font-weight, - var(--spectrum-table-summary-row-font-weight) - ); - font-size: var( - --mod-table-summary-row-font-size, - var(--spectrum-table-row-font-size) - ); - font-family: var( - --mod-table-summary-row-font-family, - var(--spectrum-table-row-font-family) - ); - font-style: var( - --mod-table-summary-row-font-style, - var(--spectrum-table-row-font-style) - ); - line-height: var( - --mod-table-summary-row-line-height, - var(--spectrum-table-row-line-height) - ); - color: var( - --highcontrast-table-row-text-color, - var( - --mod-table-summary-row-text-color, - var(--spectrum-table-row-text-color) - ) - ); + font-weight: var( + --mod-table-summary-row-font-weight, + var(--spectrum-table-summary-row-font-weight) + ); + font-size: var( + --mod-table-summary-row-font-size, + var(--spectrum-table-row-font-size) + ); + font-family: var( + --mod-table-summary-row-font-family, + var(--spectrum-table-row-font-family) + ); + font-style: var( + --mod-table-summary-row-font-style, + var(--spectrum-table-row-font-style) + ); + line-height: var( + --mod-table-summary-row-line-height, + var(--spectrum-table-row-line-height) + ); + color: var( + --highcontrast-table-row-text-color, + var( + --mod-table-summary-row-text-color, + var(--spectrum-table-row-text-color) + ) + ); } .spectrum-Table-row--sectionHeader { - --spectrum-table-cell-background-color: var( - --highcontrast-table-section-header-background-color, - var( - --mod-table-section-header-background-color, - var(--spectrum-table-section-header-background-color) - ) - ); - cursor: auto; - cursor: var(--mod-table-cursor-section-header, initial); + --spectrum-table-cell-background-color: var( + --highcontrast-table-section-header-background-color, + var( + --mod-table-section-header-background-color, + var(--spectrum-table-section-header-background-color) + ) + ); + cursor: auto; + cursor: var(--mod-table-cursor-section-header, initial); } .spectrum-Table-row--sectionHeader ::slotted(*) { - font-weight: var( - --mod-table-section-header-font-weight, - var(--spectrum-table-section-header-font-weight) - ); - text-align: start; - block-size: var( - --mod-table-section-header-min-height, - var(--spectrum-table-section-header-min-height) - ); - font-size: var( - --mod-table-section-header-font-size, - var(--spectrum-table-row-font-size) - ); - font-family: var( - --mod-table-section-header-font-family, - var(--spectrum-table-row-font-family) - ); - font-style: var( - --mod-table-section-header-font-style, - var(--spectrum-table-row-font-style) - ); - line-height: var( - --mod-table-section-header-line-height, - var(--spectrum-table-row-line-height) - ); - color: var( - --highcontrast-table-section-header-text-color, - var( - --mod-table-section-header-text-color, - var(--spectrum-table-row-text-color) - ) - ); - padding-block-start: calc( - var( - --mod-table-section-header-block-start-spacing, - var(--spectrum-table-section-header-block-start-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - padding-block-end: calc( - var( - --mod-table-section-header-block-end-spacing, - var(--spectrum-table-section-header-block-end-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); + font-weight: var( + --mod-table-section-header-font-weight, + var(--spectrum-table-section-header-font-weight) + ); + text-align: start; + block-size: var( + --mod-table-section-header-min-height, + var(--spectrum-table-section-header-min-height) + ); + font-size: var( + --mod-table-section-header-font-size, + var(--spectrum-table-row-font-size) + ); + font-family: var( + --mod-table-section-header-font-family, + var(--spectrum-table-row-font-family) + ); + font-style: var( + --mod-table-section-header-font-style, + var(--spectrum-table-row-font-style) + ); + line-height: var( + --mod-table-section-header-line-height, + var(--spectrum-table-row-line-height) + ); + color: var( + --highcontrast-table-section-header-text-color, + var( + --mod-table-section-header-text-color, + var(--spectrum-table-row-text-color) + ) + ); + padding-block-start: calc( + var( + --mod-table-section-header-block-start-spacing, + var(--spectrum-table-section-header-block-start-spacing) + ) - + var(--mod-table-border-width, var(--spectrum-table-border-width)) + ); + padding-block-end: calc( + var( + --mod-table-section-header-block-end-spacing, + var(--spectrum-table-section-header-block-end-spacing) + ) - + var(--mod-table-border-width, var(--spectrum-table-border-width)) + ); } :host { - display: table-row; + display: table-row; } :host(:first-child) .spectrum-Table-scroller .spectrum-Table-body ::slotted(*) { - border-block-start: none; - border-radius: 0; + border-block-start: none; + border-radius: 0; } :host(:last-child) .spectrum-Table-scroller .spectrum-Table-body ::slotted(*) { - border-block-end: none; - border-radius: 0; + border-block-end: none; + border-radius: 0; } :host .spectrum-Table-scroller .spectrum-Table-body ::slotted(:first-child) { - border-inline-start: none; + border-inline-start: none; } :host .spectrum-Table-scroller .spectrum-Table-body ::slotted(:last-child) { - border-inline-end: none; + border-inline-end: none; } .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 0; + --spectrum-table-row-tier: 0; } -:host([data-tier='1']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 1; +:host([data-tier="1"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 1; } -:host([data-tier='2']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 2; +:host([data-tier="2"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 2; } -:host([data-tier='3']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 3; +:host([data-tier="3"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 3; } -:host([data-tier='4']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 4; +:host([data-tier="4"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 4; } -:host([data-tier='5']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 5; +:host([data-tier="5"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 5; } -:host([data-tier='6']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 6; +:host([data-tier="6"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 6; } .spectrum-Table-row--collapsible .spectrum-Table-checkboxCell { - padding-inline-end: 0; + padding-inline-end: 0; } .spectrum-Table-row--collapsible.is-last-tier - .spectrum-Table-cell--collapsible { - padding-inline-start: calc( - var(--spectrum-table-row-tier) * - var(--spectrum-table-collapsible-tier-indent) + - var( - --mod-table-disclosure-icon-size, - var(--spectrum-table-disclosure-icon-size) - ) + - var( - --mod-table-collapsible-disclosure-inline-spacing, - var(--spectrum-table-collapsible-disclosure-inline-spacing) - ) * 2 - ); + .spectrum-Table-cell--collapsible { + padding-inline-start: calc( + var(--spectrum-table-row-tier) * + var(--spectrum-table-collapsible-tier-indent) + + var( + --mod-table-disclosure-icon-size, + var(--spectrum-table-disclosure-icon-size) + ) + + var( + --mod-table-collapsible-disclosure-inline-spacing, + var(--spectrum-table-collapsible-disclosure-inline-spacing) + ) * + 2 + ); } .spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-disclosureIcon { - display: none; + display: none; } .spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon { - margin-inline: var( - --mod-table-collapsible-disclosure-inline-spacing, - var(--spectrum-table-collapsible-disclosure-inline-spacing) - ); - margin-block-start: max( - 0px, - calc( - ( - var( - --mod-table-min-row-height, - var(--spectrum-table-min-row-height) - ) - - var( - --mod-table-disclosure-icon-size, - var(--spectrum-table-disclosure-icon-size) - ) - ) / 2 - ) - ); + margin-inline: var( + --mod-table-collapsible-disclosure-inline-spacing, + var(--spectrum-table-collapsible-disclosure-inline-spacing) + ); + margin-block-start: max( + 0px, + calc( + ( + var( + --mod-table-min-row-height, + var(--spectrum-table-min-row-height) + ) - + var( + --mod-table-disclosure-icon-size, + var(--spectrum-table-disclosure-icon-size) + ) + ) / + 2 + ) + ); } :host([hidden]) .spectrum-Table-row--collapsible { - display: none; + display: none; } @media (hover: hover) { - :host(:hover) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-row-text-color-hover - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-row-text-color-hover - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color-hover, - var( - --mod-table-row-background-color-hover, - var(--spectrum-table-row-background-color-hover) - ) - ); - } - - :host([selected]:hover) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-selected-row-text-color-focus - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-selected-row-text-color-focus - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-selected-row-background-color-focus, - var(--spectrum-table-selected-cell-background-color-focus) - ); - } - - .spectrum-Table-row--sectionHeader:hover { - --highcontrast-table-row-text-color: var( - --highcontrast-table-section-header-text-color - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-section-header-background-color, - var( - --mod-table-section-header-background-color, - var(--spectrum-table-section-header-background-color) - ) - ); - } + :host(:hover) { + --highcontrast-table-row-text-color: var( + --highcontrast-table-row-text-color-hover + ); + --highcontrast-table-icon-color: var( + --highcontrast-table-row-text-color-hover + ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-row-background-color-hover, + var( + --mod-table-row-background-color-hover, + var(--spectrum-table-row-background-color-hover) + ) + ); + } + + :host([selected]:hover) { + --highcontrast-table-row-text-color: var( + --highcontrast-table-selected-row-text-color-focus + ); + --highcontrast-table-icon-color: var( + --highcontrast-table-selected-row-text-color-focus + ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-selected-row-background-color-focus, + var(--spectrum-table-selected-cell-background-color-focus) + ); + } + + .spectrum-Table-row--sectionHeader:hover { + --highcontrast-table-row-text-color: var( + --highcontrast-table-section-header-text-color + ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-section-header-background-color, + var( + --mod-table-section-header-background-color, + var(--spectrum-table-section-header-background-color) + ) + ); + } } .spectrum-Table-row--thumbnail { - --table-thumbnail-cell-block-spacing: var( - --mod-table-thumbnail-block-spacing, - var(--spectrum-table-thumbnail-block-spacing) - ); - --table-thumbnail-inner-content-block-spacing: max( - 0px, - calc( - ( - var( - --mod-table-thumbnail-size, - var(--spectrum-table-thumbnail-size) - ) - - ( - var( - --mod-table-row-line-height, - var(--spectrum-table-row-line-height) - ) * - var( - --mod-table-header-font-size, - var(--spectrum-table-row-font-size) - ) - ) - ) / 2 - ) - ); + --table-thumbnail-cell-block-spacing: var( + --mod-table-thumbnail-block-spacing, + var(--spectrum-table-thumbnail-block-spacing) + ); + --table-thumbnail-inner-content-block-spacing: max( + 0px, + calc( + ( + var( + --mod-table-thumbnail-size, + var(--spectrum-table-thumbnail-size) + ) - + ( + var( + --mod-table-row-line-height, + var(--spectrum-table-row-line-height) + ) * + var( + --mod-table-header-font-size, + var(--spectrum-table-row-font-size) + ) + ) + ) / + 2 + ) + ); } .spectrum-Table-row--thumbnail ::slotted(*) { - padding-block: calc( - var(--table-thumbnail-cell-block-spacing) + - var(--table-thumbnail-inner-content-block-spacing) - ); + padding-block: calc( + var(--table-thumbnail-cell-block-spacing) + + var(--table-thumbnail-inner-content-block-spacing) + ); } .spectrum-Table-row--thumbnail .spectrum-Table-cell--thumbnail { - padding-block: 0; + padding-block: 0; } .spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible { - --table-thumbnail-inner-minimum-block-spacing: max( - 0px, - calc( - ( - var( - --mod-table-disclosure-icon-size, - var(--spectrum-table-disclosure-icon-size) - ) - - var( - --mod-table-thumbnail-size, - var(--spectrum-table-thumbnail-size) - ) - ) / 2 - ) - ); - --table-thumbnail-cell-block-spacing: max( - var( - --mod-table-thumbnail-block-spacing, - var(--spectrum-table-thumbnail-block-spacing) - ), - var(--table-thumbnail-inner-minimum-block-spacing) - ); + --table-thumbnail-inner-minimum-block-spacing: max( + 0px, + calc( + ( + var( + --mod-table-disclosure-icon-size, + var(--spectrum-table-disclosure-icon-size) + ) - + var( + --mod-table-thumbnail-size, + var(--spectrum-table-thumbnail-size) + ) + ) / + 2 + ) + ); + --table-thumbnail-cell-block-spacing: max( + var( + --mod-table-thumbnail-block-spacing, + var(--spectrum-table-thumbnail-block-spacing) + ), + var(--table-thumbnail-inner-minimum-block-spacing) + ); } diff --git a/packages/table/src/spectrum-table.css b/packages/table/src/spectrum-table.css index 5bd999c628..f024bd026d 100644 --- a/packages/table/src/spectrum-table.css +++ b/packages/table/src/spectrum-table.css @@ -12,324 +12,322 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-table-row-background-color: Canvas; - --highcontrast-table-row-text-color: CanvasText; - --highcontrast-table-divider-color: CanvasText; - --highcontrast-table-border-color: CanvasText; - --highcontrast-table-icon-color: CanvasText; - --highcontrast-table-icon-color-focus: Highlight; - --highcontrast-table-selected-row-background-color: Highlight; - --highcontrast-table-selected-row-text-color: HighlightText; - --highcontrast-table-selected-row-text-color-default: HighlightText; - --highcontrast-table-selected-row-background-color-focus: Highlight; - --highcontrast-table-selected-row-text-color-focus: HighlightText; - --highcontrast-table-row-background-color-hover: Highlight; - --highcontrast-table-row-text-color-hover: HighlightText; - --highcontrast-table-section-header-text-color: Canvas; - --highcontrast-table-section-header-background-color: CanvasText; - --highcontrast-table-focus-indicator-color: Highlight; - --highcontrast-table-transition-duration: 0; - } + :host { + --highcontrast-table-row-background-color: Canvas; + --highcontrast-table-row-text-color: CanvasText; + --highcontrast-table-divider-color: CanvasText; + --highcontrast-table-border-color: CanvasText; + --highcontrast-table-icon-color: CanvasText; + --highcontrast-table-icon-color-focus: Highlight; + --highcontrast-table-selected-row-background-color: Highlight; + --highcontrast-table-selected-row-text-color: HighlightText; + --highcontrast-table-selected-row-text-color-default: HighlightText; + --highcontrast-table-selected-row-background-color-focus: Highlight; + --highcontrast-table-selected-row-text-color-focus: HighlightText; + --highcontrast-table-row-background-color-hover: Highlight; + --highcontrast-table-row-text-color-hover: HighlightText; + --highcontrast-table-section-header-text-color: Canvas; + --highcontrast-table-section-header-background-color: CanvasText; + --highcontrast-table-focus-indicator-color: Highlight; + --highcontrast-table-transition-duration: 0; + } - @supports (color: SelectedItem) { - :host { - --highcontrast-table-selected-row-background-color: SelectedItem; - --highcontrast-table-selected-row-text-color: SelectedItemText; - --highcontrast-table-selected-row-text-color-default: SelectedItemText; - } - } + @supports (color: SelectedItem) { + :host { + --highcontrast-table-selected-row-background-color: SelectedItem; + --highcontrast-table-selected-row-text-color: SelectedItemText; + --highcontrast-table-selected-row-text-color-default: SelectedItemText; + } + } } :host { - --mod-thumbnail-size: var( - --mod-table-thumbnail-size, - var(--spectrum-table-thumbnail-size) - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color, - var( - --mod-table-row-background-color, - var(--spectrum-table-row-background-color) - ) - ); - --spectrum-table-selected-cell-background-color: var( - --highcontrast-table-selected-row-background-color, - var( - --mod-table-selected-row-background-color-non-emphasized, - var(--spectrum-table-selected-row-background-color-non-emphasized) - ) - ); - --spectrum-table-selected-cell-background-color-focus: var( - --highcontrast-table-selected-row-background-color-focus, - var( - --mod-table-selected-row-background-color-non-emphasized-focus, - var( - --spectrum-table-selected-row-background-color-non-emphasized-focus - ) - ) - ); + --mod-thumbnail-size: var( + --mod-table-thumbnail-size, + var(--spectrum-table-thumbnail-size) + ); + --spectrum-table-cell-background-color: var( + --highcontrast-table-row-background-color, + var( + --mod-table-row-background-color, + var(--spectrum-table-row-background-color) + ) + ); + --spectrum-table-selected-cell-background-color: var( + --highcontrast-table-selected-row-background-color, + var( + --mod-table-selected-row-background-color-non-emphasized, + var(--spectrum-table-selected-row-background-color-non-emphasized) + ) + ); + --spectrum-table-selected-cell-background-color-focus: var( + --highcontrast-table-selected-row-background-color-focus, + var( + --mod-table-selected-row-background-color-non-emphasized-focus, + var(--spectrum-table-selected-row-background-color-non-emphasized-focus) + ) + ); } :host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +:host([dir="rtl"]) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } :host:not(.spectrum-Table-scroller) { - border-collapse: initial; - border-spacing: 0; + border-collapse: initial; + border-spacing: 0; } :host:not(.spectrum-Table-scroller) { - display: table; + display: table; } -:host([density='compact']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--compact, - var(--spectrum-table-row-height-medium-compact) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--compact, - var(--spectrum-table-row-top-to-text-medium-compact) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--compact, - var(--spectrum-table-row-bottom-to-text-medium-compact) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--compact, - var(--spectrum-table-row-checkbox-to-top-medium-compact) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-compact, - var(--spectrum-table-thumbnail-to-top-minimum-medium-compact) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-compact, - var(--spectrum-thumbnail-size-200) - ); +:host([density="compact"]) { + --spectrum-table-min-row-height: var( + --mod-table-min-row-height--compact, + var(--spectrum-table-row-height-medium-compact) + ); + --spectrum-table-row-top-to-text: var( + --mod-table-row-top-to-text--compact, + var(--spectrum-table-row-top-to-text-medium-compact) + ); + --spectrum-table-row-bottom-to-text: var( + --mod-table-row-bottom-to-text--compact, + var(--spectrum-table-row-bottom-to-text-medium-compact) + ); + --spectrum-table-row-checkbox-block-spacing: var( + --mod-table-row-checkbox-block-spacing--compact, + var(--spectrum-table-row-checkbox-to-top-medium-compact) + ); + --spectrum-table-thumbnail-block-spacing: var( + --mod-table-thumbnail-block-spacing-compact, + var(--spectrum-table-thumbnail-to-top-minimum-medium-compact) + ); + --spectrum-table-thumbnail-size: var( + --mod-table-thumbnail-size-compact, + var(--spectrum-thumbnail-size-200) + ); } -:host([density='compact'][size='s']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--compact, - var(--spectrum-table-row-height-small-compact) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--compact, - var(--spectrum-table-row-top-to-text-small-compact) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--compact, - var(--spectrum-table-row-bottom-to-text-small-compact) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--compact, - var(--spectrum-table-row-checkbox-to-top-small-compact) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-compact, - var(--spectrum-table-thumbnail-to-top-minimum-small-compact) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-compact, - var(--spectrum-thumbnail-size-50) - ); +:host([density="compact"][size="s"]) { + --spectrum-table-min-row-height: var( + --mod-table-min-row-height--compact, + var(--spectrum-table-row-height-small-compact) + ); + --spectrum-table-row-top-to-text: var( + --mod-table-row-top-to-text--compact, + var(--spectrum-table-row-top-to-text-small-compact) + ); + --spectrum-table-row-bottom-to-text: var( + --mod-table-row-bottom-to-text--compact, + var(--spectrum-table-row-bottom-to-text-small-compact) + ); + --spectrum-table-row-checkbox-block-spacing: var( + --mod-table-row-checkbox-block-spacing--compact, + var(--spectrum-table-row-checkbox-to-top-small-compact) + ); + --spectrum-table-thumbnail-block-spacing: var( + --mod-table-thumbnail-block-spacing-compact, + var(--spectrum-table-thumbnail-to-top-minimum-small-compact) + ); + --spectrum-table-thumbnail-size: var( + --mod-table-thumbnail-size-compact, + var(--spectrum-thumbnail-size-50) + ); } -:host([density='compact'][size='l']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--compact, - var(--spectrum-table-row-height-large-compact) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--compact, - var(--spectrum-table-row-top-to-text-large-compact) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--compact, - var(--spectrum-table-row-bottom-to-text-large-compact) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--compact, - var(--spectrum-table-row-checkbox-to-top-large-compact) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-compact, - var(--spectrum-table-thumbnail-to-top-minimum-large-compact) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-compact, - var(--spectrum-thumbnail-size-300) - ); +:host([density="compact"][size="l"]) { + --spectrum-table-min-row-height: var( + --mod-table-min-row-height--compact, + var(--spectrum-table-row-height-large-compact) + ); + --spectrum-table-row-top-to-text: var( + --mod-table-row-top-to-text--compact, + var(--spectrum-table-row-top-to-text-large-compact) + ); + --spectrum-table-row-bottom-to-text: var( + --mod-table-row-bottom-to-text--compact, + var(--spectrum-table-row-bottom-to-text-large-compact) + ); + --spectrum-table-row-checkbox-block-spacing: var( + --mod-table-row-checkbox-block-spacing--compact, + var(--spectrum-table-row-checkbox-to-top-large-compact) + ); + --spectrum-table-thumbnail-block-spacing: var( + --mod-table-thumbnail-block-spacing-compact, + var(--spectrum-table-thumbnail-to-top-minimum-large-compact) + ); + --spectrum-table-thumbnail-size: var( + --mod-table-thumbnail-size-compact, + var(--spectrum-thumbnail-size-300) + ); } -:host([density='compact'][size='xl']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--compact, - var(--spectrum-table-row-height-extra-large-compact) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--compact, - var(--spectrum-table-row-top-to-text-extra-large-compact) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--compact, - var(--spectrum-table-row-bottom-to-text-extra-large-compact) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--compact, - var(--spectrum-table-row-checkbox-to-top-extra-large-compact) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-compact, - var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-compact, - var(--spectrum-thumbnail-size-500) - ); +:host([density="compact"][size="xl"]) { + --spectrum-table-min-row-height: var( + --mod-table-min-row-height--compact, + var(--spectrum-table-row-height-extra-large-compact) + ); + --spectrum-table-row-top-to-text: var( + --mod-table-row-top-to-text--compact, + var(--spectrum-table-row-top-to-text-extra-large-compact) + ); + --spectrum-table-row-bottom-to-text: var( + --mod-table-row-bottom-to-text--compact, + var(--spectrum-table-row-bottom-to-text-extra-large-compact) + ); + --spectrum-table-row-checkbox-block-spacing: var( + --mod-table-row-checkbox-block-spacing--compact, + var(--spectrum-table-row-checkbox-to-top-extra-large-compact) + ); + --spectrum-table-thumbnail-block-spacing: var( + --mod-table-thumbnail-block-spacing-compact, + var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact) + ); + --spectrum-table-thumbnail-size: var( + --mod-table-thumbnail-size-compact, + var(--spectrum-thumbnail-size-500) + ); } -:host([density='spacious']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--spacious, - var(--spectrum-table-row-height-medium-spacious) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--spacious, - var(--spectrum-table-row-top-to-text-medium-spacious) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--spacious, - var(--spectrum-table-row-bottom-to-text-medium-spacious) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--spacious, - var(--spectrum-table-row-checkbox-to-top-medium-spacious) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-spacious, - var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-spacious, - var(--spectrum-thumbnail-size-500) - ); +:host([density="spacious"]) { + --spectrum-table-min-row-height: var( + --mod-table-min-row-height--spacious, + var(--spectrum-table-row-height-medium-spacious) + ); + --spectrum-table-row-top-to-text: var( + --mod-table-row-top-to-text--spacious, + var(--spectrum-table-row-top-to-text-medium-spacious) + ); + --spectrum-table-row-bottom-to-text: var( + --mod-table-row-bottom-to-text--spacious, + var(--spectrum-table-row-bottom-to-text-medium-spacious) + ); + --spectrum-table-row-checkbox-block-spacing: var( + --mod-table-row-checkbox-block-spacing--spacious, + var(--spectrum-table-row-checkbox-to-top-medium-spacious) + ); + --spectrum-table-thumbnail-block-spacing: var( + --mod-table-thumbnail-block-spacing-spacious, + var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious) + ); + --spectrum-table-thumbnail-size: var( + --mod-table-thumbnail-size-spacious, + var(--spectrum-thumbnail-size-500) + ); } -:host([density='spacious'][size='s']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--spacious, - var(--spectrum-table-row-height-small-spacious) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--spacious, - var(--spectrum-table-row-top-to-text-small-spacious) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--spacious, - var(--spectrum-table-row-bottom-to-text-small-spacious) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--spacious, - var(--spectrum-table-row-checkbox-to-top-small-spacious) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-spacious, - var(--spectrum-table-thumbnail-to-top-minimum-small-spacious) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-spacious, - var(--spectrum-thumbnail-size-300) - ); +:host([density="spacious"][size="s"]) { + --spectrum-table-min-row-height: var( + --mod-table-min-row-height--spacious, + var(--spectrum-table-row-height-small-spacious) + ); + --spectrum-table-row-top-to-text: var( + --mod-table-row-top-to-text--spacious, + var(--spectrum-table-row-top-to-text-small-spacious) + ); + --spectrum-table-row-bottom-to-text: var( + --mod-table-row-bottom-to-text--spacious, + var(--spectrum-table-row-bottom-to-text-small-spacious) + ); + --spectrum-table-row-checkbox-block-spacing: var( + --mod-table-row-checkbox-block-spacing--spacious, + var(--spectrum-table-row-checkbox-to-top-small-spacious) + ); + --spectrum-table-thumbnail-block-spacing: var( + --mod-table-thumbnail-block-spacing-spacious, + var(--spectrum-table-thumbnail-to-top-minimum-small-spacious) + ); + --spectrum-table-thumbnail-size: var( + --mod-table-thumbnail-size-spacious, + var(--spectrum-thumbnail-size-300) + ); } -:host([density='spacious'][size='l']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--spacious, - var(--spectrum-table-row-height-large-spacious) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--spacious, - var(--spectrum-table-row-top-to-text-large-spacious) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--spacious, - var(--spectrum-table-row-bottom-to-text-large-spacious) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--spacious, - var(--spectrum-table-row-checkbox-to-top-large-spacious) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-spacious, - var(--spectrum-table-thumbnail-to-top-minimum-large-spacious) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-spacious, - var(--spectrum-thumbnail-size-700) - ); +:host([density="spacious"][size="l"]) { + --spectrum-table-min-row-height: var( + --mod-table-min-row-height--spacious, + var(--spectrum-table-row-height-large-spacious) + ); + --spectrum-table-row-top-to-text: var( + --mod-table-row-top-to-text--spacious, + var(--spectrum-table-row-top-to-text-large-spacious) + ); + --spectrum-table-row-bottom-to-text: var( + --mod-table-row-bottom-to-text--spacious, + var(--spectrum-table-row-bottom-to-text-large-spacious) + ); + --spectrum-table-row-checkbox-block-spacing: var( + --mod-table-row-checkbox-block-spacing--spacious, + var(--spectrum-table-row-checkbox-to-top-large-spacious) + ); + --spectrum-table-thumbnail-block-spacing: var( + --mod-table-thumbnail-block-spacing-spacious, + var(--spectrum-table-thumbnail-to-top-minimum-large-spacious) + ); + --spectrum-table-thumbnail-size: var( + --mod-table-thumbnail-size-spacious, + var(--spectrum-thumbnail-size-700) + ); } -:host([density='spacious'][size='xl']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--spacious, - var(--spectrum-table-row-height-extra-large-spacious) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--spacious, - var(--spectrum-table-row-top-to-text-extra-large-spacious) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--spacious, - var(--spectrum-table-row-bottom-to-text-extra-large-spacious) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--spacious, - var(--spectrum-table-row-checkbox-to-top-extra-large-spacious) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-spacious, - var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-spacious, - var(--spectrum-thumbnail-size-800) - ); +:host([density="spacious"][size="xl"]) { + --spectrum-table-min-row-height: var( + --mod-table-min-row-height--spacious, + var(--spectrum-table-row-height-extra-large-spacious) + ); + --spectrum-table-row-top-to-text: var( + --mod-table-row-top-to-text--spacious, + var(--spectrum-table-row-top-to-text-extra-large-spacious) + ); + --spectrum-table-row-bottom-to-text: var( + --mod-table-row-bottom-to-text--spacious, + var(--spectrum-table-row-bottom-to-text-extra-large-spacious) + ); + --spectrum-table-row-checkbox-block-spacing: var( + --mod-table-row-checkbox-block-spacing--spacious, + var(--spectrum-table-row-checkbox-to-top-extra-large-spacious) + ); + --spectrum-table-thumbnail-block-spacing: var( + --mod-table-thumbnail-block-spacing-spacious, + var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious) + ); + --spectrum-table-thumbnail-size: var( + --mod-table-thumbnail-size-spacious, + var(--spectrum-thumbnail-size-800) + ); } :host([emphasized]) { - --spectrum-table-selected-cell-background-color: var( - --highcontrast-table-selected-row-background-color, - var( - --mod-table-selected-row-background-color, - var(--spectrum-table-selected-row-background-color) - ) - ); - --spectrum-table-selected-cell-background-color-focus: var( - --highcontrast-table-selected-row-background-color-focus, - var( - --mod-table-selected-row-background-color-focus, - var(--spectrum-table-selected-row-background-color-focus) - ) - ); + --spectrum-table-selected-cell-background-color: var( + --highcontrast-table-selected-row-background-color, + var( + --mod-table-selected-row-background-color, + var(--spectrum-table-selected-row-background-color) + ) + ); + --spectrum-table-selected-cell-background-color-focus: var( + --highcontrast-table-selected-row-background-color-focus, + var( + --mod-table-selected-row-background-color-focus, + var(--spectrum-table-selected-row-background-color-focus) + ) + ); } :host([quiet]) { - --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, 0px); - --spectrum-table-outer-border-inline-width: var( - --mod-table-outer-border-inline-width--quiet, - 0px - ); - --spectrum-table-header-background-color: var( - --mod-table-header-background-color--quiet, - var(--spectrum-transparent-white-100) - ); - --spectrum-table-row-background-color: var( - --mod-table-row-background-color--quiet, - var(--spectrum-transparent-white-100) - ); + --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, 0px); + --spectrum-table-outer-border-inline-width: var( + --mod-table-outer-border-inline-width--quiet, + 0px + ); + --spectrum-table-header-background-color: var( + --mod-table-header-background-color--quiet, + var(--spectrum-transparent-white-100) + ); + --spectrum-table-row-background-color: var( + --mod-table-row-background-color--quiet, + var(--spectrum-transparent-white-100) + ); } diff --git a/packages/table/src/table-overrides.css b/packages/table/src/table-overrides.css index ec09c68a16..5bc0046bc9 100644 --- a/packages/table/src/table-overrides.css +++ b/packages/table/src/table-overrides.css @@ -12,459 +12,445 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-table-header-top-to-text: var(--system-table-header-top-to-text); - --spectrum-table-header-bottom-to-text: var( - --system-table-header-bottom-to-text - ); - --spectrum-table-min-header-height: var(--system-table-min-header-height); - --spectrum-table-min-row-height: var(--system-table-min-row-height); - --spectrum-table-row-top-to-text: var(--system-table-row-top-to-text); - --spectrum-table-row-bottom-to-text: var(--system-table-row-bottom-to-text); - --spectrum-table-cell-inline-space: var(--system-table-cell-inline-space); - --spectrum-table-border-radius: var(--system-table-border-radius); - --spectrum-table-border-width: var(--system-table-border-width); - --spectrum-table-outer-border-inline-width: var( - --system-table-outer-border-inline-width - ); - --spectrum-table-icon-to-text: var(--system-table-icon-to-text); - --spectrum-table-default-vertical-align: var( - --system-table-default-vertical-align - ); - --spectrum-table-header-vertical-align: var( - --system-table-header-vertical-align - ); - --spectrum-table-header-font-weight: var(--system-table-header-font-weight); - --spectrum-table-row-font-family: var(--system-table-row-font-family); - --spectrum-table-row-font-weight: var(--system-table-row-font-weight); - --spectrum-table-row-font-style: var(--system-table-row-font-style); - --spectrum-table-row-font-size: var(--system-table-row-font-size); - --spectrum-table-row-line-height: var(--system-table-row-line-height); - --spectrum-table-border-color: var(--system-table-border-color); - --spectrum-table-divider-color: var(--system-table-divider-color); - --spectrum-table-header-background-color: var( - --system-table-header-background-color - ); - --spectrum-table-header-text-color: var(--system-table-header-text-color); - --spectrum-table-row-background-color: var( - --system-table-row-background-color - ); - --spectrum-table-row-text-color: var(--system-table-row-text-color); - --spectrum-table-selected-row-background-color: var( - --system-table-selected-row-background-color - ); - --spectrum-table-selected-row-background-color-non-emphasized: var( - --system-table-selected-row-background-color-non-emphasized - ); - --spectrum-table-row-background-color-hover: var( - --system-table-row-background-color-hover - ); - --spectrum-table-row-active-color: var(--system-table-row-active-color); - --spectrum-table-selected-row-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --spectrum-table-selected-row-background-color-non-emphasized-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --spectrum-table-icon-color-default: var(--system-table-icon-color-default); - --spectrum-table-icon-color-hover: var(--system-table-icon-color-hover); - --spectrum-table-icon-color-active: var(--system-table-icon-color-active); - --spectrum-table-icon-color-focus: var(--system-table-icon-color-focus); - --spectrum-table-icon-color-focus-hover: var( - --system-table-icon-color-focus-hover - ); - --spectrum-table-icon-color-key-focus: var( - --system-table-icon-color-key-focus - ); - --spectrum-table-header-checkbox-block-spacing: var( - --system-table-header-checkbox-block-spacing - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-row-checkbox-block-spacing - ); - --spectrum-table-focus-indicator-thickness: var( - --system-table-focus-indicator-thickness - ); - --spectrum-table-focus-indicator-color: var( - --system-table-focus-indicator-color - ); - --spectrum-table-drop-zone-background-color: var( - --system-table-drop-zone-background-color - ); - --spectrum-table-drop-zone-outline-color: var( - --system-table-drop-zone-outline-color - ); - --spectrum-table-transition-duration: var( - --system-table-transition-duration - ); - --spectrum-table-summary-row-font-weight: var( - --system-table-summary-row-font-weight - ); - --spectrum-table-summary-row-background-color: var( - --system-table-summary-row-background-color - ); - --spectrum-table-section-header-min-height: var( - --system-table-section-header-min-height - ); - --spectrum-table-section-header-block-start-spacing: var( - --system-table-section-header-block-start-spacing - ); - --spectrum-table-section-header-block-end-spacing: var( - --system-table-section-header-block-end-spacing - ); - --spectrum-table-section-header-font-weight: var( - --system-table-section-header-font-weight - ); - --spectrum-table-section-header-background-color: var( - --system-table-section-header-background-color - ); - --spectrum-table-collapsible-tier-indent: var( - --system-table-collapsible-tier-indent - ); - --spectrum-table-collapsible-disclosure-inline-spacing: var( - --system-table-collapsible-disclosure-inline-spacing - ); - --spectrum-table-disclosure-icon-size: var( - --system-table-disclosure-icon-size - ); - --spectrum-table-collapsible-icon-animation-duration: var( - --system-table-collapsible-icon-animation-duration - ); - --spectrum-table-thumbnail-to-text: var(--system-table-thumbnail-to-text); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var(--system-table-thumbnail-size); - --spectrum-table-cell-background-color: var( - --system-table-cell-background-color - ); - --spectrum-table-selected-cell-background-color: var( - --system-table-selected-cell-background-color - ); - --spectrum-table-selected-cell-background-color-focus: var( - --system-table-selected-cell-background-color-focus - ); + --spectrum-table-header-top-to-text: var(--system-table-header-top-to-text); + --spectrum-table-header-bottom-to-text: var( + --system-table-header-bottom-to-text + ); + --spectrum-table-min-header-height: var(--system-table-min-header-height); + --spectrum-table-min-row-height: var(--system-table-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-row-bottom-to-text); + --spectrum-table-cell-inline-space: var(--system-table-cell-inline-space); + --spectrum-table-border-radius: var(--system-table-border-radius); + --spectrum-table-border-width: var(--system-table-border-width); + --spectrum-table-outer-border-inline-width: var( + --system-table-outer-border-inline-width + ); + --spectrum-table-icon-to-text: var(--system-table-icon-to-text); + --spectrum-table-default-vertical-align: var( + --system-table-default-vertical-align + ); + --spectrum-table-header-vertical-align: var( + --system-table-header-vertical-align + ); + --spectrum-table-header-font-weight: var(--system-table-header-font-weight); + --spectrum-table-row-font-family: var(--system-table-row-font-family); + --spectrum-table-row-font-weight: var(--system-table-row-font-weight); + --spectrum-table-row-font-style: var(--system-table-row-font-style); + --spectrum-table-row-font-size: var(--system-table-row-font-size); + --spectrum-table-row-line-height: var(--system-table-row-line-height); + --spectrum-table-border-color: var(--system-table-border-color); + --spectrum-table-divider-color: var(--system-table-divider-color); + --spectrum-table-header-background-color: var( + --system-table-header-background-color + ); + --spectrum-table-header-text-color: var(--system-table-header-text-color); + --spectrum-table-row-background-color: var( + --system-table-row-background-color + ); + --spectrum-table-row-text-color: var(--system-table-row-text-color); + --spectrum-table-selected-row-background-color: var( + --system-table-selected-row-background-color + ); + --spectrum-table-selected-row-background-color-non-emphasized: var( + --system-table-selected-row-background-color-non-emphasized + ); + --spectrum-table-row-background-color-hover: var( + --system-table-row-background-color-hover + ); + --spectrum-table-row-active-color: var(--system-table-row-active-color); + --spectrum-table-selected-row-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --spectrum-table-selected-row-background-color-non-emphasized-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus + ); + --spectrum-table-icon-color-default: var(--system-table-icon-color-default); + --spectrum-table-icon-color-hover: var(--system-table-icon-color-hover); + --spectrum-table-icon-color-active: var(--system-table-icon-color-active); + --spectrum-table-icon-color-focus: var(--system-table-icon-color-focus); + --spectrum-table-icon-color-focus-hover: var( + --system-table-icon-color-focus-hover + ); + --spectrum-table-icon-color-key-focus: var( + --system-table-icon-color-key-focus + ); + --spectrum-table-header-checkbox-block-spacing: var( + --system-table-header-checkbox-block-spacing + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-row-checkbox-block-spacing + ); + --spectrum-table-focus-indicator-thickness: var( + --system-table-focus-indicator-thickness + ); + --spectrum-table-focus-indicator-color: var( + --system-table-focus-indicator-color + ); + --spectrum-table-drop-zone-background-color: var( + --system-table-drop-zone-background-color + ); + --spectrum-table-drop-zone-outline-color: var( + --system-table-drop-zone-outline-color + ); + --spectrum-table-transition-duration: var(--system-table-transition-duration); + --spectrum-table-summary-row-font-weight: var( + --system-table-summary-row-font-weight + ); + --spectrum-table-summary-row-background-color: var( + --system-table-summary-row-background-color + ); + --spectrum-table-section-header-min-height: var( + --system-table-section-header-min-height + ); + --spectrum-table-section-header-block-start-spacing: var( + --system-table-section-header-block-start-spacing + ); + --spectrum-table-section-header-block-end-spacing: var( + --system-table-section-header-block-end-spacing + ); + --spectrum-table-section-header-font-weight: var( + --system-table-section-header-font-weight + ); + --spectrum-table-section-header-background-color: var( + --system-table-section-header-background-color + ); + --spectrum-table-collapsible-tier-indent: var( + --system-table-collapsible-tier-indent + ); + --spectrum-table-collapsible-disclosure-inline-spacing: var( + --system-table-collapsible-disclosure-inline-spacing + ); + --spectrum-table-disclosure-icon-size: var( + --system-table-disclosure-icon-size + ); + --spectrum-table-collapsible-icon-animation-duration: var( + --system-table-collapsible-icon-animation-duration + ); + --spectrum-table-thumbnail-to-text: var(--system-table-thumbnail-to-text); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var(--system-table-thumbnail-size); + --spectrum-table-cell-background-color: var( + --system-table-cell-background-color + ); + --spectrum-table-selected-cell-background-color: var( + --system-table-selected-cell-background-color + ); + --spectrum-table-selected-cell-background-color-focus: var( + --system-table-selected-cell-background-color-focus + ); } -:host([size='s']) { - --spectrum-table-min-header-height: var( - --system-table-size-s-min-header-height - ); - --spectrum-table-header-top-to-text: var( - --system-table-size-s-header-top-to-text - ); - --spectrum-table-header-bottom-to-text: var( - --system-table-size-s-header-bottom-to-text - ); - --spectrum-table-min-row-height: var(--system-table-size-s-min-row-height); - --spectrum-table-row-top-to-text: var( - --system-table-size-s-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-size-s-row-bottom-to-text - ); - --spectrum-table-icon-to-text: var(--system-table-size-s-icon-to-text); - --spectrum-table-row-font-size: var(--system-table-size-s-row-font-size); - --spectrum-table-header-checkbox-block-spacing: var( - --system-table-size-s-header-checkbox-block-spacing - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-size-s-row-checkbox-block-spacing - ); - --spectrum-table-section-header-min-height: var( - --system-table-size-s-section-header-min-height - ); - --spectrum-table-section-header-block-start-spacing: var( - --system-table-size-s-section-header-block-start-spacing - ); - --spectrum-table-section-header-block-end-spacing: var( - --system-table-size-s-section-header-block-end-spacing - ); - --spectrum-table-disclosure-icon-size: var( - --system-table-size-s-disclosure-icon-size - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-size-s-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-to-text: var( - --system-table-size-s-thumbnail-to-text - ); - --spectrum-table-thumbnail-size: var(--system-table-size-s-thumbnail-size); +:host([size="s"]) { + --spectrum-table-min-header-height: var( + --system-table-size-s-min-header-height + ); + --spectrum-table-header-top-to-text: var( + --system-table-size-s-header-top-to-text + ); + --spectrum-table-header-bottom-to-text: var( + --system-table-size-s-header-bottom-to-text + ); + --spectrum-table-min-row-height: var(--system-table-size-s-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-size-s-row-top-to-text); + --spectrum-table-row-bottom-to-text: var( + --system-table-size-s-row-bottom-to-text + ); + --spectrum-table-icon-to-text: var(--system-table-size-s-icon-to-text); + --spectrum-table-row-font-size: var(--system-table-size-s-row-font-size); + --spectrum-table-header-checkbox-block-spacing: var( + --system-table-size-s-header-checkbox-block-spacing + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-size-s-row-checkbox-block-spacing + ); + --spectrum-table-section-header-min-height: var( + --system-table-size-s-section-header-min-height + ); + --spectrum-table-section-header-block-start-spacing: var( + --system-table-size-s-section-header-block-start-spacing + ); + --spectrum-table-section-header-block-end-spacing: var( + --system-table-size-s-section-header-block-end-spacing + ); + --spectrum-table-disclosure-icon-size: var( + --system-table-size-s-disclosure-icon-size + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-size-s-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-to-text: var( + --system-table-size-s-thumbnail-to-text + ); + --spectrum-table-thumbnail-size: var(--system-table-size-s-thumbnail-size); } -:host([size='l']) { - --spectrum-table-min-header-height: var( - --system-table-size-l-min-header-height - ); - --spectrum-table-header-top-to-text: var( - --system-table-size-l-header-top-to-text - ); - --spectrum-table-header-bottom-to-text: var( - --system-table-size-l-header-bottom-to-text - ); - --spectrum-table-min-row-height: var(--system-table-size-l-min-row-height); - --spectrum-table-row-top-to-text: var( - --system-table-size-l-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-size-l-row-bottom-to-text - ); - --spectrum-table-icon-to-text: var(--system-table-size-l-icon-to-text); - --spectrum-table-row-font-size: var(--system-table-size-l-row-font-size); - --spectrum-table-header-checkbox-block-spacing: var( - --system-table-size-l-header-checkbox-block-spacing - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-size-l-row-checkbox-block-spacing - ); - --spectrum-table-section-header-min-height: var( - --system-table-size-l-section-header-min-height - ); - --spectrum-table-section-header-block-start-spacing: var( - --system-table-size-l-section-header-block-start-spacing - ); - --spectrum-table-section-header-block-end-spacing: var( - --system-table-size-l-section-header-block-end-spacing - ); - --spectrum-table-disclosure-icon-size: var( - --system-table-size-l-disclosure-icon-size - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-size-l-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-to-text: var( - --system-table-size-l-thumbnail-to-text - ); - --spectrum-table-thumbnail-size: var(--system-table-size-l-thumbnail-size); +:host([size="l"]) { + --spectrum-table-min-header-height: var( + --system-table-size-l-min-header-height + ); + --spectrum-table-header-top-to-text: var( + --system-table-size-l-header-top-to-text + ); + --spectrum-table-header-bottom-to-text: var( + --system-table-size-l-header-bottom-to-text + ); + --spectrum-table-min-row-height: var(--system-table-size-l-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-size-l-row-top-to-text); + --spectrum-table-row-bottom-to-text: var( + --system-table-size-l-row-bottom-to-text + ); + --spectrum-table-icon-to-text: var(--system-table-size-l-icon-to-text); + --spectrum-table-row-font-size: var(--system-table-size-l-row-font-size); + --spectrum-table-header-checkbox-block-spacing: var( + --system-table-size-l-header-checkbox-block-spacing + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-size-l-row-checkbox-block-spacing + ); + --spectrum-table-section-header-min-height: var( + --system-table-size-l-section-header-min-height + ); + --spectrum-table-section-header-block-start-spacing: var( + --system-table-size-l-section-header-block-start-spacing + ); + --spectrum-table-section-header-block-end-spacing: var( + --system-table-size-l-section-header-block-end-spacing + ); + --spectrum-table-disclosure-icon-size: var( + --system-table-size-l-disclosure-icon-size + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-size-l-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-to-text: var( + --system-table-size-l-thumbnail-to-text + ); + --spectrum-table-thumbnail-size: var(--system-table-size-l-thumbnail-size); } -:host([size='xl']) { - --spectrum-table-min-header-height: var( - --system-table-size-xl-min-header-height - ); - --spectrum-table-header-top-to-text: var( - --system-table-size-xl-header-top-to-text - ); - --spectrum-table-header-bottom-to-text: var( - --system-table-size-xl-header-bottom-to-text - ); - --spectrum-table-min-row-height: var(--system-table-size-xl-min-row-height); - --spectrum-table-row-top-to-text: var( - --system-table-size-xl-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-size-xl-row-bottom-to-text - ); - --spectrum-table-icon-to-text: var(--system-table-size-xl-icon-to-text); - --spectrum-table-row-font-size: var(--system-table-size-xl-row-font-size); - --spectrum-table-header-checkbox-block-spacing: var( - --system-table-size-xl-header-checkbox-block-spacing - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-size-xl-row-checkbox-block-spacing - ); - --spectrum-table-section-header-min-height: var( - --system-table-size-xl-section-header-min-height - ); - --spectrum-table-section-header-block-start-spacing: var( - --system-table-size-xl-section-header-block-start-spacing - ); - --spectrum-table-section-header-block-end-spacing: var( - --system-table-size-xl-section-header-block-end-spacing - ); - --spectrum-table-disclosure-icon-size: var( - --system-table-size-xl-disclosure-icon-size - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-size-xl-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-to-text: var( - --system-table-size-xl-thumbnail-to-text - ); - --spectrum-table-thumbnail-size: var(--system-table-size-xl-thumbnail-size); +:host([size="xl"]) { + --spectrum-table-min-header-height: var( + --system-table-size-xl-min-header-height + ); + --spectrum-table-header-top-to-text: var( + --system-table-size-xl-header-top-to-text + ); + --spectrum-table-header-bottom-to-text: var( + --system-table-size-xl-header-bottom-to-text + ); + --spectrum-table-min-row-height: var(--system-table-size-xl-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-size-xl-row-top-to-text); + --spectrum-table-row-bottom-to-text: var( + --system-table-size-xl-row-bottom-to-text + ); + --spectrum-table-icon-to-text: var(--system-table-size-xl-icon-to-text); + --spectrum-table-row-font-size: var(--system-table-size-xl-row-font-size); + --spectrum-table-header-checkbox-block-spacing: var( + --system-table-size-xl-header-checkbox-block-spacing + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-size-xl-row-checkbox-block-spacing + ); + --spectrum-table-section-header-min-height: var( + --system-table-size-xl-section-header-min-height + ); + --spectrum-table-section-header-block-start-spacing: var( + --system-table-size-xl-section-header-block-start-spacing + ); + --spectrum-table-section-header-block-end-spacing: var( + --system-table-size-xl-section-header-block-end-spacing + ); + --spectrum-table-disclosure-icon-size: var( + --system-table-size-xl-disclosure-icon-size + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-size-xl-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-to-text: var( + --system-table-size-xl-thumbnail-to-text + ); + --spectrum-table-thumbnail-size: var(--system-table-size-xl-thumbnail-size); } -:host([density='compact']) { - --spectrum-table-min-row-height: var(--system-table-compact-min-row-height); - --spectrum-table-row-top-to-text: var( - --system-table-compact-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-compact-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-compact-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-compact-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var(--system-table-compact-thumbnail-size); +:host([density="compact"]) { + --spectrum-table-min-row-height: var(--system-table-compact-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-compact-row-top-to-text); + --spectrum-table-row-bottom-to-text: var( + --system-table-compact-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-compact-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-compact-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var(--system-table-compact-thumbnail-size); } -:host([density='compact'][size='s']) { - --spectrum-table-min-row-height: var( - --system-table-compact-size-s-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-compact-size-s-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-compact-size-s-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-compact-size-s-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-compact-size-s-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-compact-size-s-thumbnail-size - ); +:host([density="compact"][size="s"]) { + --spectrum-table-min-row-height: var( + --system-table-compact-size-s-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-compact-size-s-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-compact-size-s-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-compact-size-s-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-compact-size-s-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-compact-size-s-thumbnail-size + ); } -:host([density='compact'][size='l']) { - --spectrum-table-min-row-height: var( - --system-table-compact-size-l-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-compact-size-l-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-compact-size-l-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-compact-size-l-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-compact-size-l-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-compact-size-l-thumbnail-size - ); +:host([density="compact"][size="l"]) { + --spectrum-table-min-row-height: var( + --system-table-compact-size-l-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-compact-size-l-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-compact-size-l-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-compact-size-l-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-compact-size-l-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-compact-size-l-thumbnail-size + ); } -:host([density='compact'][size='xl']) { - --spectrum-table-min-row-height: var( - --system-table-compact-size-xl-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-compact-size-xl-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-compact-size-xl-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-compact-size-xl-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-compact-size-xl-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-compact-size-xl-thumbnail-size - ); +:host([density="compact"][size="xl"]) { + --spectrum-table-min-row-height: var( + --system-table-compact-size-xl-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-compact-size-xl-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-compact-size-xl-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-compact-size-xl-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-compact-size-xl-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-compact-size-xl-thumbnail-size + ); } -:host([density='spacious']) { - --spectrum-table-min-row-height: var( - --system-table-spacious-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-spacious-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-spacious-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-spacious-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-spacious-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-spacious-thumbnail-size - ); +:host([density="spacious"]) { + --spectrum-table-min-row-height: var(--system-table-spacious-min-row-height); + --spectrum-table-row-top-to-text: var( + --system-table-spacious-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-spacious-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-spacious-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-spacious-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var(--system-table-spacious-thumbnail-size); } -:host([density='spacious'][size='s']) { - --spectrum-table-min-row-height: var( - --system-table-spacious-size-s-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-spacious-size-s-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-spacious-size-s-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-spacious-size-s-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-spacious-size-s-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-spacious-size-s-thumbnail-size - ); +:host([density="spacious"][size="s"]) { + --spectrum-table-min-row-height: var( + --system-table-spacious-size-s-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-spacious-size-s-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-spacious-size-s-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-spacious-size-s-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-spacious-size-s-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-spacious-size-s-thumbnail-size + ); } -:host([density='spacious'][size='l']) { - --spectrum-table-min-row-height: var( - --system-table-spacious-size-l-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-spacious-size-l-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-spacious-size-l-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-spacious-size-l-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-spacious-size-l-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-spacious-size-l-thumbnail-size - ); +:host([density="spacious"][size="l"]) { + --spectrum-table-min-row-height: var( + --system-table-spacious-size-l-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-spacious-size-l-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-spacious-size-l-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-spacious-size-l-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-spacious-size-l-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-spacious-size-l-thumbnail-size + ); } -:host([density='spacious'][size='xl']) { - --spectrum-table-min-row-height: var( - --system-table-spacious-size-xl-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-spacious-size-xl-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-spacious-size-xl-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-spacious-size-xl-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-spacious-size-xl-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-spacious-size-xl-thumbnail-size - ); +:host([density="spacious"][size="xl"]) { + --spectrum-table-min-row-height: var( + --system-table-spacious-size-xl-min-row-height + ); + --spectrum-table-row-top-to-text: var( + --system-table-spacious-size-xl-row-top-to-text + ); + --spectrum-table-row-bottom-to-text: var( + --system-table-spacious-size-xl-row-bottom-to-text + ); + --spectrum-table-row-checkbox-block-spacing: var( + --system-table-spacious-size-xl-row-checkbox-block-spacing + ); + --spectrum-table-thumbnail-block-spacing: var( + --system-table-spacious-size-xl-thumbnail-block-spacing + ); + --spectrum-table-thumbnail-size: var( + --system-table-spacious-size-xl-thumbnail-size + ); } :host([emphasized]) { - --spectrum-table-selected-cell-background-color: var( - --system-table-emphasized-selected-cell-background-color - ); - --spectrum-table-selected-cell-background-color-focus: var( - --system-table-emphasized-selected-cell-background-color-focus - ); + --spectrum-table-selected-cell-background-color: var( + --system-table-emphasized-selected-cell-background-color + ); + --spectrum-table-selected-cell-background-color-focus: var( + --system-table-emphasized-selected-cell-background-color-focus + ); } :host([quiet]) { - --spectrum-table-border-radius: var(--system-table-quiet-border-radius); - --spectrum-table-outer-border-inline-width: var( - --system-table-quiet-outer-border-inline-width - ); - --spectrum-table-header-background-color: var( - --system-table-quiet-header-background-color - ); - --spectrum-table-row-background-color: var( - --system-table-quiet-row-background-color - ); + --spectrum-table-border-radius: var(--system-table-quiet-border-radius); + --spectrum-table-outer-border-inline-width: var( + --system-table-quiet-outer-border-inline-width + ); + --spectrum-table-header-background-color: var( + --system-table-quiet-header-background-color + ); + --spectrum-table-row-background-color: var( + --system-table-quiet-row-background-color + ); } diff --git a/packages/tabs/src/spectrum-tab.css b/packages/tabs/src/spectrum-tab.css index 116924dce8..8032470d3b 100644 --- a/packages/tabs/src/spectrum-tab.css +++ b/packages/tabs/src/spectrum-tab.css @@ -12,153 +12,153 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - block-size: calc( - var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) - ); - z-index: 1; - white-space: nowrap; - color: var( - --highcontrast-tabs-color, - var(--mod-tabs-color, var(--spectrum-tabs-color)) - ); - transition: color - var( - --mod-tabs-animation-duration, - var(--spectrum-tabs-animation-duration) - ) - ease-out; - cursor: pointer; - outline: none; - -webkit-text-decoration: none; - text-decoration: none; - position: relative; + box-sizing: border-box; + block-size: calc( + var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - + var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) + ); + z-index: 1; + white-space: nowrap; + color: var( + --highcontrast-tabs-color, + var(--mod-tabs-color, var(--spectrum-tabs-color)) + ); + transition: color + var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) + ease-out; + cursor: pointer; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; } -::slotted([slot='icon']) { - block-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); - inline-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); - margin-block-start: var( - --mod-tabs-top-to-icon, - var(--spectrum-tabs-top-to-icon) - ); +::slotted([slot="icon"]) { + block-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); + inline-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); + margin-block-start: var( + --mod-tabs-top-to-icon, + var(--spectrum-tabs-top-to-icon) + ); } -[name='icon'] + #item-label { - margin-inline-start: var( - --mod-tabs-icon-to-text, - var(--spectrum-tabs-icon-to-text) - ); +[name="icon"] + #item-label { + margin-inline-start: var( + --mod-tabs-icon-to-text, + var(--spectrum-tabs-icon-to-text) + ); } :host:before { - content: ''; - box-sizing: border-box; - block-size: calc( - 100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) - ); - inline-size: calc( - 100% + - var( - --mod-tabs-focus-indicator-gap, - var(--spectrum-tabs-focus-indicator-gap) - ) * 2 - ); - border: var( - --mod-tabs-focus-indicator-width, - var(--spectrum-tabs-focus-indicator-width) - ) - solid transparent; - border-radius: var( - --mod-tabs-focus-indicator-border-radius, - var(--spectrum-tabs-focus-indicator-border-radius) - ); - pointer-events: none; - position: absolute; - inset-block-start: calc( - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2 - ); - inset-inline-start: calc( - var( - --mod-tabs-focus-indicator-gap, - var(--spectrum-tabs-focus-indicator-gap) - ) * -1 - ); - inset-inline-end: calc( - var( - --mod-tabs-focus-indicator-gap, - var(--spectrum-tabs-focus-indicator-gap) - ) * -1 - ); + content: ""; + box-sizing: border-box; + block-size: calc( + 100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) + ); + inline-size: calc( + 100% + + var( + --mod-tabs-focus-indicator-gap, + var(--spectrum-tabs-focus-indicator-gap) + ) * + 2 + ); + border: var( + --mod-tabs-focus-indicator-width, + var(--spectrum-tabs-focus-indicator-width) + ) + solid transparent; + border-radius: var( + --mod-tabs-focus-indicator-border-radius, + var(--spectrum-tabs-focus-indicator-border-radius) + ); + pointer-events: none; + position: absolute; + inset-block-start: calc( + var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2 + ); + inset-inline-start: calc( + var( + --mod-tabs-focus-indicator-gap, + var(--spectrum-tabs-focus-indicator-gap) + ) * + -1 + ); + inset-inline-end: calc( + var( + --mod-tabs-focus-indicator-gap, + var(--spectrum-tabs-focus-indicator-gap) + ) * + -1 + ); } @media (hover: hover) { - :host(:hover) { - color: var( - --highcontrast-tabs-color-hover, - var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover)) - ); - } + :host(:hover) { + color: var( + --highcontrast-tabs-color-hover, + var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover)) + ); + } } :host([selected]) { - color: var( - --highcontrast-tabs-color-selected, - var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)) - ); + color: var( + --highcontrast-tabs-color-selected, + var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)) + ); } :host([disabled]) { - cursor: default; - color: var( - --highcontrast-tabs-color-disabled, - var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)) - ); + cursor: default; + color: var( + --highcontrast-tabs-color-disabled, + var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)) + ); } :host([disabled]) #item-label { - cursor: default; + cursor: default; } :host(:focus-visible) { - color: var( - --highcontrast-tabs-color-key-focus, - var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)) - ); + color: var( + --highcontrast-tabs-color-key-focus, + var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)) + ); } :host(:focus-visible):before { - border-color: var( - --highcontrast-tabs-focus-indicator-color, - var( - --mod-tabs-focus-indicator-color, - var(--spectrum-tabs-focus-indicator-color) - ) - ); + border-color: var( + --highcontrast-tabs-focus-indicator-color, + var( + --mod-tabs-focus-indicator-color, + var(--spectrum-tabs-focus-indicator-color) + ) + ); } #item-label { - cursor: pointer; - vertical-align: top; - font-family: var(--mod-tabs-font-family, var(--spectrum-tabs-font-family)); - font-style: var(--mod-tabs-font-style, var(--spectrum-tabs-font-style)); - font-size: var(--mod-tabs-font-size, var(--spectrum-tabs-font-size)); - font-weight: var(--mod-tabs-font-weight, var(--spectrum-tabs-font-weight)); - line-height: var(--mod-tabs-line-height, var(--spectrum-tabs-line-height)); - margin-block-start: var( - --mod-tabs-top-to-text, - var(--spectrum-tabs-top-to-text) - ); - margin-block-end: var( - --mod-tabs-bottom-to-text, - var(--spectrum-tabs-bottom-to-text) - ); - -webkit-text-decoration: none; - text-decoration: none; - display: inline-block; + cursor: pointer; + vertical-align: top; + font-family: var(--mod-tabs-font-family, var(--spectrum-tabs-font-family)); + font-style: var(--mod-tabs-font-style, var(--spectrum-tabs-font-style)); + font-size: var(--mod-tabs-font-size, var(--spectrum-tabs-font-size)); + font-weight: var(--mod-tabs-font-weight, var(--spectrum-tabs-font-weight)); + line-height: var(--mod-tabs-line-height, var(--spectrum-tabs-line-height)); + margin-block-start: var( + --mod-tabs-top-to-text, + var(--spectrum-tabs-top-to-text) + ); + margin-block-end: var( + --mod-tabs-bottom-to-text, + var(--spectrum-tabs-bottom-to-text) + ); + -webkit-text-decoration: none; + text-decoration: none; + display: inline-block; } #item-label:empty { - display: none; + display: none; } diff --git a/packages/tabs/src/spectrum-tabs-sizes.css b/packages/tabs/src/spectrum-tabs-sizes.css index 0794c4005b..9073d1d112 100644 --- a/packages/tabs/src/spectrum-tabs-sizes.css +++ b/packages/tabs/src/spectrum-tabs-sizes.css @@ -11,59 +11,59 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([size='s']) #list.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-small) - ); - --spectrum-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-small) - ); - --spectrum-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-small) - ); - --spectrum-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-small) - ); +:host([size="s"]) #list.spectrum-Tabs--compact { + --spectrum-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-small) + ); + --spectrum-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-small) + ); + --spectrum-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-small) + ); + --spectrum-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-small) + ); } -:host([size='l']) #list.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-large) - ); - --spectrum-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-large) - ); - --spectrum-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-large) - ); - --spectrum-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-large) - ); +:host([size="l"]) #list.spectrum-Tabs--compact { + --spectrum-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-large) + ); + --spectrum-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-large) + ); + --spectrum-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-large) + ); + --spectrum-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-large) + ); } -:host([size='xl']) #list.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-extra-large) - ); - --spectrum-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-extra-large) - ); - --spectrum-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-extra-large) - ); - --spectrum-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large) - ); +:host([size="xl"]) #list.spectrum-Tabs--compact { + --spectrum-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-extra-large) + ); + --spectrum-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-extra-large) + ); + --spectrum-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-extra-large) + ); + --spectrum-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large) + ); } diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css index b1f3f3a08c..6e181050b2 100644 --- a/packages/tabs/src/spectrum-tabs.css +++ b/packages/tabs/src/spectrum-tabs.css @@ -12,279 +12,270 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #list { - z-index: 0; - vertical-align: top; - background: linear-gradient( - to - var( - --mod-tabs-list-background-direction, - var(--spectrum-tabs-list-background-direction) - ), - var( - --highcontrast-tabs-divider-background-color, - var( - --mod-tabs-divider-background-color, - var(--spectrum-tabs-divider-background-color) - ) - ) - 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), - transparent - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) - ); - margin: 0; - padding-block: 0; - display: flex; - position: relative; + z-index: 0; + vertical-align: top; + background: linear-gradient( + to + var( + --mod-tabs-list-background-direction, + var(--spectrum-tabs-list-background-direction) + ), + var( + --highcontrast-tabs-divider-background-color, + var( + --mod-tabs-divider-background-color, + var(--spectrum-tabs-divider-background-color) + ) + ) + 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), + transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) + ); + margin: 0; + padding-block: 0; + display: flex; + position: relative; } :host([emphasized]) #list { - --mod-tabs-color-selected: var( - --mod-tabs-color-selected-emphasized, - var(--spectrum-tabs-color-selected) - ); - --mod-tabs-color-hover: var( - --mod-tabs-color-hover-emphasized, - var(--spectrum-tabs-color-hover) - ); - --mod-tabs-color-key-focus: var( - --mod-tabs-color-key-focus-emphasized, - var(--spectrum-tabs-color-key-focus) - ); - --mod-tabs-selection-indicator-color: var( - --mod-tabs-selection-indicator-color-emphasized, - var(--spectrum-tabs-selection-indicator-color) - ); + --mod-tabs-color-selected: var( + --mod-tabs-color-selected-emphasized, + var(--spectrum-tabs-color-selected) + ); + --mod-tabs-color-hover: var( + --mod-tabs-color-hover-emphasized, + var(--spectrum-tabs-color-hover) + ); + --mod-tabs-color-key-focus: var( + --mod-tabs-color-key-focus-emphasized, + var(--spectrum-tabs-color-key-focus) + ); + --mod-tabs-selection-indicator-color: var( + --mod-tabs-selection-indicator-color-emphasized, + var(--spectrum-tabs-selection-indicator-color) + ); } ::slotted([selected]:not([slot])) { - color: var( - --highcontrast-tabs-color-selected, - var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)) - ); + color: var( + --highcontrast-tabs-color-selected, + var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)) + ); } ::slotted([disabled]:not([slot])) { - cursor: default; - color: var( - --highcontrast-tabs-color-disabled, - var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)) - ); + cursor: default; + color: var( + --highcontrast-tabs-color-disabled, + var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)) + ); } #selection-indicator { - background-color: var( - --highcontrast-tabs-selection-indicator-color, - var( - --mod-tabs-selection-indicator-color, - var(--spectrum-tabs-selection-indicator-color) - ) - ); - z-index: 0; - transition: transform - var( - --mod-tabs-animation-duration, - var(--spectrum-tabs-animation-duration) - ) - var(--mod-tabs-animation-ease, var(--spectrum-tabs-animation-ease)); - transform-origin: 0 0; - border-radius: var( - --mod-tabs-divider-border-radius, - var(--spectrum-tabs-divider-border-radius) - ); - position: absolute; - inset-inline-start: 0; + background-color: var( + --highcontrast-tabs-selection-indicator-color, + var( + --mod-tabs-selection-indicator-color, + var(--spectrum-tabs-selection-indicator-color) + ) + ); + z-index: 0; + transition: transform + var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) + var(--mod-tabs-animation-ease, var(--spectrum-tabs-animation-ease)); + transform-origin: 0 0; + border-radius: var( + --mod-tabs-divider-border-radius, + var(--spectrum-tabs-divider-border-radius) + ); + position: absolute; + inset-inline-start: 0; } -:host([direction^='horizontal']) #list { - align-items: center; +:host([direction^="horizontal"]) #list { + align-items: center; } -:host([direction^='horizontal']) #list ::slotted(:not([slot])) { - vertical-align: top; +:host([direction^="horizontal"]) #list ::slotted(:not([slot])) { + vertical-align: top; } -:host([direction^='horizontal']) ::slotted(:not(:first-child)) { - margin-inline-start: var( - --mod-tabs-item-horizontal-spacing, - var(--spectrum-tabs-item-horizontal-spacing) - ); +:host([direction^="horizontal"]) ::slotted(:not(:first-child)) { + margin-inline-start: var( + --mod-tabs-item-horizontal-spacing, + var(--spectrum-tabs-item-horizontal-spacing) + ); } -:host([direction^='horizontal']) #list #selection-indicator { - block-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)); - position: absolute; - inset-block-end: 0; +:host([direction^="horizontal"]) #list #selection-indicator { + block-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)); + position: absolute; + inset-block-end: 0; } -:host([direction^='horizontal'][compact]) #list { - box-sizing: initial; - align-items: end; +:host([direction^="horizontal"][compact]) #list { + box-sizing: initial; + align-items: end; } :host([quiet]) #list { - background: none; - border-color: #0000; - display: inline-flex; + background: none; + border-color: #0000; + display: inline-flex; } :host([quiet]) #selection-indicator { - padding-inline-start: var( - --mod-tabs-start-to-item-quiet, - var(--spectrum-tabs-start-to-item-quiet) - ); + padding-inline-start: var( + --mod-tabs-start-to-item-quiet, + var(--spectrum-tabs-start-to-item-quiet) + ); } -:host([direction^='vertical']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - right - ); +:host([direction^="vertical"]) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical, + right + ); } -:host([direction^='vertical']) #list, -:host([direction^='vertical-right']) #list { - flex-direction: column; - padding: 0; - display: inline-flex; +:host([direction^="vertical"]) #list, +:host([direction^="vertical-right"]) #list { + flex-direction: column; + padding: 0; + display: inline-flex; } -:host([direction^='vertical-right'][quiet]) #list, -:host([direction^='vertical'][quiet]) #list { - border-color: #0000; +:host([direction^="vertical-right"][quiet]) #list, +:host([direction^="vertical"][quiet]) #list { + border-color: #0000; } -:host([direction^='vertical']) #list ::slotted(:not([slot])), -:host([direction^='vertical-right']) #list ::slotted(:not([slot])) { - block-size: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)); - line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)); - margin-block-end: var( - --mod-tabs-item-vertical-spacing, - var(--spectrum-tabs-item-vertical-spacing) - ); - margin-inline-start: var( - --mod-tabs-start-to-edge, - var(--spectrum-tabs-start-to-edge) - ); - margin-inline-end: var( - --mod-tabs-start-to-edge, - var(--spectrum-tabs-start-to-edge) - ); - padding-block: 0; +:host([direction^="vertical"]) #list ::slotted(:not([slot])), +:host([direction^="vertical-right"]) #list ::slotted(:not([slot])) { + block-size: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)); + line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)); + margin-block-end: var( + --mod-tabs-item-vertical-spacing, + var(--spectrum-tabs-item-vertical-spacing) + ); + margin-inline-start: var( + --mod-tabs-start-to-edge, + var(--spectrum-tabs-start-to-edge) + ); + margin-inline-end: var( + --mod-tabs-start-to-edge, + var(--spectrum-tabs-start-to-edge) + ); + padding-block: 0; } -:host([direction^='vertical']) #list ::slotted(:not([slot])):before, -:host([direction^='vertical-right']) #list ::slotted(:not([slot])):before { - inset-inline-start: calc( - var( - --mod-tabs-focus-indicator-gap, - var(--spectrum-tabs-focus-indicator-gap) - ) * -1 - ); +:host([direction^="vertical"]) #list ::slotted(:not([slot])):before, +:host([direction^="vertical-right"]) #list ::slotted(:not([slot])):before { + inset-inline-start: calc( + var( + --mod-tabs-focus-indicator-gap, + var(--spectrum-tabs-focus-indicator-gap) + ) * + -1 + ); } -:host([direction^='vertical']) #list #selection-indicator, -:host([direction^='vertical-right']) #list #selection-indicator { - inline-size: var( - --mod-tabs-divider-size, - var(--spectrum-tabs-divider-size) - ); - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; +:host([direction^="vertical"]) #list #selection-indicator, +:host([direction^="vertical-right"]) #list #selection-indicator { + inline-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)); + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } -:host([direction^='vertical-right']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical-right, - left - ); +:host([direction^="vertical-right"]) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical-right, + left + ); } -:host([direction^='vertical-right']) #list #selection-indicator { - inset-inline: auto 0; +:host([direction^="vertical-right"]) #list #selection-indicator { + inset-inline: auto 0; } -:host([direction^='vertical']) #list:dir(rtl), -:host([dir='rtl'][direction^='vertical']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - left - ); +:host([direction^="vertical"]) #list:dir(rtl), +:host([dir="rtl"][direction^="vertical"]) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical, + left + ); } -:host([direction^='vertical-right']) #list:dir(rtl), -:host([dir='rtl'][direction^='vertical-right']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - right - ); +:host([direction^="vertical-right"]) #list:dir(rtl), +:host([dir="rtl"][direction^="vertical-right"]) #list { + --mod-tabs-list-background-direction: var( + --mod-tabs-list-background-direction-vertical, + right + ); } :host([compact]) #list { - --spectrum-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-medium) - ); - --spectrum-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-medium) - ); - --spectrum-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-medium) - ); - --spectrum-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-medium) - ); + --spectrum-tabs-item-height: var( + --mod-tabs-item-height-compact, + var(--spectrum-tab-item-compact-height-medium) + ); + --spectrum-tabs-top-to-text: var( + --mod-tabs-top-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-medium) + ); + --spectrum-tabs-bottom-to-text: var( + --mod-tabs-bottom-to-text-compact, + var(--spectrum-tab-item-top-to-text-compact-medium) + ); + --spectrum-tabs-top-to-icon: var( + --mod-tabs-top-to-icon-compact, + var(--spectrum-tab-item-top-to-workflow-icon-compact-medium) + ); } @media (forced-colors: active) { - #list { - --highcontrast-tabs-divider-background-color: var(--spectrum-gray-500); - --highcontrast-tabs-selection-indicator-color: Highlight; - --highcontrast-tabs-focus-indicator-color: CanvasText; - --highcontrast-tabs-focus-indicator-background-color: Highlight; - --highcontrast-tabs-color: ButtonText; - --highcontrast-tabs-color-hover: ButtonText; - --highcontrast-tabs-color-selected: HighlightText; - --highcontrast-tabs-color-key-focus: ButtonText; - --highcontrast-tabs-color-disabled: GrayText; - forced-color-adjust: none; - } + #list { + --highcontrast-tabs-divider-background-color: var(--spectrum-gray-500); + --highcontrast-tabs-selection-indicator-color: Highlight; + --highcontrast-tabs-focus-indicator-color: CanvasText; + --highcontrast-tabs-focus-indicator-background-color: Highlight; + --highcontrast-tabs-color: ButtonText; + --highcontrast-tabs-color-hover: ButtonText; + --highcontrast-tabs-color-selected: HighlightText; + --highcontrast-tabs-color-key-focus: ButtonText; + --highcontrast-tabs-color-disabled: GrayText; + forced-color-adjust: none; + } - #list ::slotted([selected]:not([slot])):before { - background-color: var( - --highcontrast-tabs-focus-indicator-background-color - ); - } + #list ::slotted([selected]:not([slot])):before { + background-color: var(--highcontrast-tabs-focus-indicator-background-color); + } - :host([direction^='vertical'][compact]) - #list - #list - ::slotted(:not([slot])):before { - block-size: 100%; - inset-block-start: 0; - } + :host([direction^="vertical"][compact]) + #list + #list + ::slotted(:not([slot])):before { + block-size: 100%; + inset-block-start: 0; + } - :host([quiet]) #list { - background: linear-gradient( - to - var( - --mod-tabs-list-background-direction, - var(--spectrum-tabs-list-background-direction) - ), - var( - --highcontrast-tabs-divider-background-color, - var( - --mod-tabs-divider-background-color, - var(--spectrum-tabs-divider-background-color) - ) - ) - 0 - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), - transparent - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) - ); - } + :host([quiet]) #list { + background: linear-gradient( + to + var( + --mod-tabs-list-background-direction, + var(--spectrum-tabs-list-background-direction) + ), + var( + --highcontrast-tabs-divider-background-color, + var( + --mod-tabs-divider-background-color, + var(--spectrum-tabs-divider-background-color) + ) + ) + 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), + transparent + var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) + ); + } } diff --git a/packages/tabs/src/tabs-overrides.css b/packages/tabs/src/tabs-overrides.css index 455c65120b..26834aa50c 100644 --- a/packages/tabs/src/tabs-overrides.css +++ b/packages/tabs/src/tabs-overrides.css @@ -12,65 +12,63 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #list { - --spectrum-tabs-font-weight: var(--system-tabs-font-weight); - --spectrum-tabs-item-height: var(--system-tabs-item-height); - --spectrum-tabs-item-horizontal-spacing: var( - --system-tabs-item-horizontal-spacing - ); - --spectrum-tabs-item-vertical-spacing: var( - --system-tabs-item-vertical-spacing - ); - --spectrum-tabs-start-to-edge: var(--system-tabs-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-top-to-icon); - --spectrum-tabs-color: var(--system-tabs-color); - --spectrum-tabs-color-selected: var(--system-tabs-color-selected); - --spectrum-tabs-color-hover: var(--system-tabs-color-hover); - --spectrum-tabs-color-key-focus: var(--system-tabs-color-key-focus); - --spectrum-tabs-color-disabled: var(--system-tabs-color-disabled); - --spectrum-tabs-font-family: var(--system-tabs-font-family); - --spectrum-tabs-font-style: var(--system-tabs-font-style); - --spectrum-tabs-font-size: var(--system-tabs-font-size); - --spectrum-tabs-line-height: var(--system-tabs-line-height); - --spectrum-tabs-focus-indicator-width: var( - --system-tabs-focus-indicator-width - ); - --spectrum-tabs-focus-indicator-border-radius: var( - --system-tabs-focus-indicator-border-radius - ); - --spectrum-tabs-focus-indicator-gap: var(--system-tabs-focus-indicator-gap); - --spectrum-tabs-focus-indicator-color: var( - --system-tabs-focus-indicator-color - ); - --spectrum-tabs-selection-indicator-color: var( - --system-tabs-selection-indicator-color - ); - --spectrum-tabs-list-background-direction: var( - --system-tabs-list-background-direction - ); - --spectrum-tabs-divider-background-color: var( - --system-tabs-divider-background-color - ); - --spectrum-tabs-divider-size: var(--system-tabs-divider-size); - --spectrum-tabs-divider-border-radius: var( - --system-tabs-divider-border-radius - ); - --spectrum-tabs-animation-duration: var(--system-tabs-animation-duration); - --spectrum-tabs-animation-ease: var(--system-tabs-animation-ease); + --spectrum-tabs-font-weight: var(--system-tabs-font-weight); + --spectrum-tabs-item-height: var(--system-tabs-item-height); + --spectrum-tabs-item-horizontal-spacing: var( + --system-tabs-item-horizontal-spacing + ); + --spectrum-tabs-item-vertical-spacing: var( + --system-tabs-item-vertical-spacing + ); + --spectrum-tabs-start-to-edge: var(--system-tabs-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-top-to-icon); + --spectrum-tabs-color: var(--system-tabs-color); + --spectrum-tabs-color-selected: var(--system-tabs-color-selected); + --spectrum-tabs-color-hover: var(--system-tabs-color-hover); + --spectrum-tabs-color-key-focus: var(--system-tabs-color-key-focus); + --spectrum-tabs-color-disabled: var(--system-tabs-color-disabled); + --spectrum-tabs-font-family: var(--system-tabs-font-family); + --spectrum-tabs-font-style: var(--system-tabs-font-style); + --spectrum-tabs-font-size: var(--system-tabs-font-size); + --spectrum-tabs-line-height: var(--system-tabs-line-height); + --spectrum-tabs-focus-indicator-width: var( + --system-tabs-focus-indicator-width + ); + --spectrum-tabs-focus-indicator-border-radius: var( + --system-tabs-focus-indicator-border-radius + ); + --spectrum-tabs-focus-indicator-gap: var(--system-tabs-focus-indicator-gap); + --spectrum-tabs-focus-indicator-color: var( + --system-tabs-focus-indicator-color + ); + --spectrum-tabs-selection-indicator-color: var( + --system-tabs-selection-indicator-color + ); + --spectrum-tabs-list-background-direction: var( + --system-tabs-list-background-direction + ); + --spectrum-tabs-divider-background-color: var( + --system-tabs-divider-background-color + ); + --spectrum-tabs-divider-size: var(--system-tabs-divider-size); + --spectrum-tabs-divider-border-radius: var( + --system-tabs-divider-border-radius + ); + --spectrum-tabs-animation-duration: var(--system-tabs-animation-duration); + --spectrum-tabs-animation-ease: var(--system-tabs-animation-ease); } :host([emphasized]) #list { - --spectrum-tabs-color-selected: var( - --system-tabs-emphasized-color-selected - ); - --spectrum-tabs-color-hover: var(--system-tabs-emphasized-color-hover); - --spectrum-tabs-color-key-focus: var( - --system-tabs-emphasized-color-key-focus - ); - --spectrum-tabs-selection-indicator-color: var( - --system-tabs-emphasized-selection-indicator-color - ); + --spectrum-tabs-color-selected: var(--system-tabs-emphasized-color-selected); + --spectrum-tabs-color-hover: var(--system-tabs-emphasized-color-hover); + --spectrum-tabs-color-key-focus: var( + --system-tabs-emphasized-color-key-focus + ); + --spectrum-tabs-selection-indicator-color: var( + --system-tabs-emphasized-selection-indicator-color + ); } diff --git a/packages/tabs/src/tabs-sizes-overrides.css b/packages/tabs/src/tabs-sizes-overrides.css index 695c157fe6..4a322f2d61 100644 --- a/packages/tabs/src/tabs-sizes-overrides.css +++ b/packages/tabs/src/tabs-sizes-overrides.css @@ -11,62 +11,62 @@ */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([size='s']) #list { - --spectrum-tabs-item-height: var(--system-tabs-size-s-item-height); - --spectrum-tabs-item-horizontal-spacing: var( - --system-tabs-size-s-item-horizontal-spacing - ); - --spectrum-tabs-item-vertical-spacing: var( - --system-tabs-size-s-item-vertical-spacing - ); - --spectrum-tabs-start-to-edge: var(--system-tabs-size-s-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-size-s-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-size-s-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-size-s-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-size-s-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-size-s-top-to-icon); - --spectrum-tabs-focus-indicator-gap: var( - --system-tabs-size-s-focus-indicator-gap - ); - --spectrum-tabs-font-size: var(--system-tabs-size-s-font-size); +:host([size="s"]) #list { + --spectrum-tabs-item-height: var(--system-tabs-size-s-item-height); + --spectrum-tabs-item-horizontal-spacing: var( + --system-tabs-size-s-item-horizontal-spacing + ); + --spectrum-tabs-item-vertical-spacing: var( + --system-tabs-size-s-item-vertical-spacing + ); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-s-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-s-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-s-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-s-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-s-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-s-top-to-icon); + --spectrum-tabs-focus-indicator-gap: var( + --system-tabs-size-s-focus-indicator-gap + ); + --spectrum-tabs-font-size: var(--system-tabs-size-s-font-size); } -:host([size='l']) #list { - --spectrum-tabs-item-height: var(--system-tabs-size-l-item-height); - --spectrum-tabs-item-horizontal-spacing: var( - --system-tabs-size-l-item-horizontal-spacing - ); - --spectrum-tabs-item-vertical-spacing: var( - --system-tabs-size-l-item-vertical-spacing - ); - --spectrum-tabs-start-to-edge: var(--system-tabs-size-l-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-size-l-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-size-l-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-size-l-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-size-l-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-size-l-top-to-icon); - --spectrum-tabs-focus-indicator-gap: var( - --system-tabs-size-l-focus-indicator-gap - ); - --spectrum-tabs-font-size: var(--system-tabs-size-l-font-size); +:host([size="l"]) #list { + --spectrum-tabs-item-height: var(--system-tabs-size-l-item-height); + --spectrum-tabs-item-horizontal-spacing: var( + --system-tabs-size-l-item-horizontal-spacing + ); + --spectrum-tabs-item-vertical-spacing: var( + --system-tabs-size-l-item-vertical-spacing + ); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-l-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-l-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-l-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-l-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-l-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-l-top-to-icon); + --spectrum-tabs-focus-indicator-gap: var( + --system-tabs-size-l-focus-indicator-gap + ); + --spectrum-tabs-font-size: var(--system-tabs-size-l-font-size); } -:host([size='xl']) #list { - --spectrum-tabs-item-height: var(--system-tabs-size-xl-item-height); - --spectrum-tabs-item-horizontal-spacing: var( - --system-tabs-size-xl-item-horizontal-spacing - ); - --spectrum-tabs-item-vertical-spacing: var( - --system-tabs-size-xl-item-vertical-spacing - ); - --spectrum-tabs-start-to-edge: var(--system-tabs-size-xl-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-size-xl-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-size-xl-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-size-xl-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-size-xl-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-size-xl-top-to-icon); - --spectrum-tabs-focus-indicator-gap: var( - --system-tabs-size-xl-focus-indicator-gap - ); - --spectrum-tabs-font-size: var(--system-tabs-size-xl-font-size); +:host([size="xl"]) #list { + --spectrum-tabs-item-height: var(--system-tabs-size-xl-item-height); + --spectrum-tabs-item-horizontal-spacing: var( + --system-tabs-size-xl-item-horizontal-spacing + ); + --spectrum-tabs-item-vertical-spacing: var( + --system-tabs-size-xl-item-vertical-spacing + ); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-xl-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-xl-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-xl-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-xl-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-xl-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-xl-top-to-icon); + --spectrum-tabs-focus-indicator-gap: var( + --system-tabs-size-xl-focus-indicator-gap + ); + --spectrum-tabs-font-size: var(--system-tabs-size-xl-font-size); } diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css index 403695cb53..42d404f6a9 100644 --- a/packages/tags/src/spectrum-tag.css +++ b/packages/tags/src/spectrum-tag.css @@ -12,738 +12,725 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - border-color: var( - --highcontrast-tag-border-color, - var(--mod-tag-border-color, var(--spectrum-tag-border-color)) - ); - background-color: var( - --highcontrast-tag-background-color, - var(--mod-tag-background-color, var(--spectrum-tag-background-color)) - ); - color: var( - --highcontrast-tag-content-color, - var(--mod-tag-content-color, var(--spectrum-tag-content-color)) - ); - border-radius: var( - --mod-tag-corner-radius, - var(--spectrum-tag-corner-radius) - ); - border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width)); - block-size: var(--mod-tag-height, var(--spectrum-tag-height)); - box-sizing: border-box; - vertical-align: bottom; - max-inline-size: 100%; - -webkit-user-select: none; - user-select: none; - transition: - border-color - var( - --mod-tag-animation-duration, - var(--spectrum-tag-animation-duration) - ) - ease-in-out, - color - var( - --mod-tag-animation-duration, - var(--spectrum-tag-animation-duration) - ) - ease-in-out, - box-shadow - var( - --mod-tag-animation-duration, - var(--spectrum-tag-animation-duration) - ) - ease-in-out, - background-color - var( - --mod-tag-animation-duration, - var(--spectrum-tag-animation-duration) - ) - ease-in-out; - border-style: solid; - outline: none; - align-items: center; - padding-inline-start: calc( - var( - --mod-tag-spacing-inline-start, - var(--spectrum-tag-spacing-inline-start) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - padding-inline-end: 0; - display: inline-flex; - position: relative; + border-color: var( + --highcontrast-tag-border-color, + var(--mod-tag-border-color, var(--spectrum-tag-border-color)) + ); + background-color: var( + --highcontrast-tag-background-color, + var(--mod-tag-background-color, var(--spectrum-tag-background-color)) + ); + color: var( + --highcontrast-tag-content-color, + var(--mod-tag-content-color, var(--spectrum-tag-content-color)) + ); + border-radius: var( + --mod-tag-corner-radius, + var(--spectrum-tag-corner-radius) + ); + border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width)); + block-size: var(--mod-tag-height, var(--spectrum-tag-height)); + box-sizing: border-box; + vertical-align: bottom; + max-inline-size: 100%; + -webkit-user-select: none; + user-select: none; + transition: + border-color + var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) + ease-in-out, + color + var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) + ease-in-out, + box-shadow + var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) + ease-in-out, + background-color + var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) + ease-in-out; + border-style: solid; + outline: none; + align-items: center; + padding-inline-start: calc( + var( + --mod-tag-spacing-inline-start, + var(--spectrum-tag-spacing-inline-start) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + padding-inline-end: 0; + display: inline-flex; + position: relative; } -::slotted([slot='icon']) { - block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); - inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); - flex-shrink: 0; - margin-block-start: calc( - var( - --mod-tag-icon-spacing-block-start, - var(--spectrum-tag-icon-spacing-block-start) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - margin-block-end: calc( - var( - --mod-tag-icon-spacing-block-end, - var(--spectrum-tag-icon-spacing-block-end) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - margin-inline-end: var( - --mod-tag-icon-spacing-inline-end, - var(--spectrum-tag-icon-spacing-inline-end) - ); +::slotted([slot="icon"]) { + block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); + inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); + flex-shrink: 0; + margin-block-start: calc( + var( + --mod-tag-icon-spacing-block-start, + var(--spectrum-tag-icon-spacing-block-start) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + margin-block-end: calc( + var( + --mod-tag-icon-spacing-block-end, + var(--spectrum-tag-icon-spacing-block-end) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + margin-inline-end: var( + --mod-tag-icon-spacing-inline-end, + var(--spectrum-tag-icon-spacing-inline-end) + ); } -::slotted([slot='avatar']) { - margin-block-start: calc( - var( - --mod-tag-avatar-spacing-block-start, - var(--spectrum-tag-avatar-spacing-block-start) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - margin-block-end: calc( - var( - --mod-tag-avatar-spacing-block-end, - var(--spectrum-tag-avatar-spacing-block-end) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - margin-inline-end: var( - --mod-tag-avatar-spacing-inline-end, - var(--spectrum-tag-avatar-spacing-inline-end) - ); +::slotted([slot="avatar"]) { + margin-block-start: calc( + var( + --mod-tag-avatar-spacing-block-start, + var(--spectrum-tag-avatar-spacing-block-start) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + margin-block-end: calc( + var( + --mod-tag-avatar-spacing-block-end, + var(--spectrum-tag-avatar-spacing-block-end) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + margin-inline-end: var( + --mod-tag-avatar-spacing-inline-end, + var(--spectrum-tag-avatar-spacing-inline-end) + ); } .clear-button { - --mod-clear-button-width: fit-content; - --spectrum-clearbutton-fill-size: fit-content; - --spectrum-clearbutton-fill-background-color: transparent; - box-sizing: border-box; - color: currentColor; - margin-inline-start: calc( - var( - --mod-tag-clear-button-spacing-inline-start, - var(--spectrum-tag-clear-button-spacing-inline-start) - ) + - var( - --mod-tag-label-spacing-inline-end, - var(--spectrum-tag-label-spacing-inline-end) - ) * -1 - ); - margin-inline-end: calc( - var( - --mod-tag-clear-button-spacing-inline-end, - var(--spectrum-tag-clear-button-spacing-inline-end) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - padding-block-start: calc( - var( - --mod-tag-clear-button-spacing-block, - var(--spectrum-tag-clear-button-spacing-block) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - padding-block-end: calc( - var( - --mod-tag-clear-button-spacing-block, - var(--spectrum-tag-clear-button-spacing-block) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); + --mod-clear-button-width: fit-content; + --spectrum-clearbutton-fill-size: fit-content; + --spectrum-clearbutton-fill-background-color: transparent; + box-sizing: border-box; + color: currentColor; + margin-inline-start: calc( + var( + --mod-tag-clear-button-spacing-inline-start, + var(--spectrum-tag-clear-button-spacing-inline-start) + ) + + var( + --mod-tag-label-spacing-inline-end, + var(--spectrum-tag-label-spacing-inline-end) + ) * + -1 + ); + margin-inline-end: calc( + var( + --mod-tag-clear-button-spacing-inline-end, + var(--spectrum-tag-clear-button-spacing-inline-end) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + padding-block-start: calc( + var( + --mod-tag-clear-button-spacing-block, + var(--spectrum-tag-clear-button-spacing-block) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + padding-block-end: calc( + var( + --mod-tag-clear-button-spacing-block, + var(--spectrum-tag-clear-button-spacing-block) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); } .clear-button .spectrum-ClearButton-fill { - background-color: var( - --mod-clearbutton-fill-background-color, - var(--spectrum-clearbutton-fill-background-color) - ); - inline-size: var( - --mod-clearbutton-fill-size, - var(--spectrum-clearbutton-fill-size) - ); - block-size: var( - --mod-clearbutton-fill-size, - var(--spectrum-clearbutton-fill-size) - ); + background-color: var( + --mod-clearbutton-fill-background-color, + var(--spectrum-clearbutton-fill-background-color) + ); + inline-size: var( + --mod-clearbutton-fill-size, + var(--spectrum-clearbutton-fill-size) + ); + block-size: var( + --mod-clearbutton-fill-size, + var(--spectrum-clearbutton-fill-size) + ); } .label { - block-size: 100%; - box-sizing: border-box; - line-height: var( - --mod-tag-label-line-height, - var(--spectrum-tag-label-line-height) - ); - font-weight: var( - --mod-tag-label-font-weight, - var(--spectrum-tag-label-font-weight) - ); - font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size)); - cursor: default; - white-space: nowrap; - text-overflow: ellipsis; - flex: auto; - margin-inline-end: calc( - var( - --mod-tag-label-spacing-inline-end, - var(--spectrum-tag-label-spacing-inline-end) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - padding-block-start: calc( - var( - --mod-tag-label-spacing-block, - var(--spectrum-tag-label-spacing-block) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - overflow: hidden; + block-size: 100%; + box-sizing: border-box; + line-height: var( + --mod-tag-label-line-height, + var(--spectrum-tag-label-line-height) + ); + font-weight: var( + --mod-tag-label-font-weight, + var(--spectrum-tag-label-font-weight) + ); + font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size)); + cursor: default; + white-space: nowrap; + text-overflow: ellipsis; + flex: auto; + margin-inline-end: calc( + var( + --mod-tag-label-spacing-inline-end, + var(--spectrum-tag-label-spacing-inline-end) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + padding-block-start: calc( + var( + --mod-tag-label-spacing-block, + var(--spectrum-tag-label-spacing-block) + ) - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + overflow: hidden; } :host(:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-active, - var( - --mod-tag-border-color-active, - var(--spectrum-tag-border-color-active) - ) - ); - background-color: var( - --highcontrast-tag-background-color-active, - var( - --mod-tag-background-color-active, - var(--spectrum-tag-background-color-active) - ) - ); - color: var( - --highcontrast-tag-content-color-active, - var( - --mod-tag-content-color-active, - var(--spectrum-tag-content-color-active) - ) - ); + border-color: var( + --highcontrast-tag-border-color-active, + var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active)) + ); + background-color: var( + --highcontrast-tag-background-color-active, + var( + --mod-tag-background-color-active, + var(--spectrum-tag-background-color-active) + ) + ); + color: var( + --highcontrast-tag-content-color-active, + var( + --mod-tag-content-color-active, + var(--spectrum-tag-content-color-active) + ) + ); } :host([focused]), :host(:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-focus, - var( - --mod-tag-border-color-focus, - var(--spectrum-tag-border-color-focus) - ) - ); - background-color: var( - --highcontrast-tag-background-color-focus, - var( - --mod-tag-background-color-focus, - var(--spectrum-tag-background-color-focus) - ) - ); - color: var( - --highcontrast-tag-content-color-focus, - var( - --mod-tag-content-color-focus, - var(--spectrum-tag-content-color-focus) - ) - ); + border-color: var( + --highcontrast-tag-border-color-focus, + var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus)) + ); + background-color: var( + --highcontrast-tag-background-color-focus, + var( + --mod-tag-background-color-focus, + var(--spectrum-tag-background-color-focus) + ) + ); + color: var( + --highcontrast-tag-content-color-focus, + var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus)) + ); } :host([focused]):after, :host(:focus-visible):after { - content: ''; - border-color: var( - --highcontrast-tag-focus-ring-color, - var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color)) - ); - border-radius: calc( - var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - border-width: var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ); - pointer-events: none; - border-style: solid; - display: inline-block; - position: absolute; - inset-block-start: calc( - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - - var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ) - ); - inset-block-end: calc( - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - - var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ) - ); - inset-inline-start: calc( - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - - var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ) - ); - inset-inline-end: calc( - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - - var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ) - ); + content: ""; + border-color: var( + --highcontrast-tag-focus-ring-color, + var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color)) + ); + border-radius: calc( + var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) + ); + border-width: var( + --mod-tag-focus-ring-thickness, + var(--spectrum-tag-focus-ring-thickness) + ); + pointer-events: none; + border-style: solid; + display: inline-block; + position: absolute; + inset-block-start: calc( + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - + var( + --mod-tag-focus-ring-thickness, + var(--spectrum-tag-focus-ring-thickness) + ) + ); + inset-block-end: calc( + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - + var( + --mod-tag-focus-ring-thickness, + var(--spectrum-tag-focus-ring-thickness) + ) + ); + inset-inline-start: calc( + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - + var( + --mod-tag-focus-ring-thickness, + var(--spectrum-tag-focus-ring-thickness) + ) + ); + inset-inline-end: calc( + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - + var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - + var( + --mod-tag-focus-ring-thickness, + var(--spectrum-tag-focus-ring-thickness) + ) + ); } :host([selected]) { - border-color: var( - --highcontrast-tag-border-color-selected, - var( - --mod-tag-border-color-selected, - var(--spectrum-tag-border-color-selected) - ) - ); - background-color: var( - --highcontrast-tag-background-color-selected, - var( - --mod-tag-background-color-selected, - var(--spectrum-tag-background-color-selected) - ) - ); - color: var( - --highcontrast-tag-content-color-selected, - var( - --mod-tag-content-color-selected, - var(--spectrum-tag-content-color-selected) - ) - ); + border-color: var( + --highcontrast-tag-border-color-selected, + var( + --mod-tag-border-color-selected, + var(--spectrum-tag-border-color-selected) + ) + ); + background-color: var( + --highcontrast-tag-background-color-selected, + var( + --mod-tag-background-color-selected, + var(--spectrum-tag-background-color-selected) + ) + ); + color: var( + --highcontrast-tag-content-color-selected, + var( + --mod-tag-content-color-selected, + var(--spectrum-tag-content-color-selected) + ) + ); } :host([selected]:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-selected-active, - var( - --mod-tag-border-color-selected-active, - var(--spectrum-tag-border-color-selected-active) - ) - ); - background-color: var( - --highcontrast-tag-background-color-selected-active, - var( - --mod-tag-background-color-selected-active, - var(--spectrum-tag-background-color-selected-active) - ) - ); + border-color: var( + --highcontrast-tag-border-color-selected-active, + var( + --mod-tag-border-color-selected-active, + var(--spectrum-tag-border-color-selected-active) + ) + ); + background-color: var( + --highcontrast-tag-background-color-selected-active, + var( + --mod-tag-background-color-selected-active, + var(--spectrum-tag-background-color-selected-active) + ) + ); } :host([selected][focused]), :host([selected]:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-selected-focus, - var( - --mod-tag-border-color-selected-focus, - var(--spectrum-tag-border-color-selected-focus) - ) - ); - background-color: var( - --highcontrast-tag-background-color-selected-focus, - var( - --mod-tag-background-color-selected-focus, - var(--spectrum-tag-background-color-selected-focus) - ) - ); + border-color: var( + --highcontrast-tag-border-color-selected-focus, + var( + --mod-tag-border-color-selected-focus, + var(--spectrum-tag-border-color-selected-focus) + ) + ); + background-color: var( + --highcontrast-tag-background-color-selected-focus, + var( + --mod-tag-background-color-selected-focus, + var(--spectrum-tag-background-color-selected-focus) + ) + ); } :host([invalid]) { - border-color: var( - --highcontrast-tag-border-color-invalid, - var( - --mod-tag-border-color-invalid, - var(--spectrum-tag-border-color-invalid) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid, - var( - --mod-tag-content-color-invalid, - var(--spectrum-tag-content-color-invalid) - ) - ); + border-color: var( + --highcontrast-tag-border-color-invalid, + var( + --mod-tag-border-color-invalid, + var(--spectrum-tag-border-color-invalid) + ) + ); + color: var( + --highcontrast-tag-content-color-invalid, + var( + --mod-tag-content-color-invalid, + var(--spectrum-tag-content-color-invalid) + ) + ); } :host([invalid]:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-invalid-active, - var( - --mod-tag-border-color-invalid-active, - var(--spectrum-tag-border-color-invalid-active) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-active, - var( - --mod-tag-content-color-invalid-active, - var(--spectrum-tag-content-color-invalid-active) - ) - ); + border-color: var( + --highcontrast-tag-border-color-invalid-active, + var( + --mod-tag-border-color-invalid-active, + var(--spectrum-tag-border-color-invalid-active) + ) + ); + color: var( + --highcontrast-tag-content-color-invalid-active, + var( + --mod-tag-content-color-invalid-active, + var(--spectrum-tag-content-color-invalid-active) + ) + ); } :host([invalid][focused]), :host([invalid]:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-invalid-focus, - var( - --mod-tag-border-color-invalid-focus, - var(--spectrum-tag-border-color-invalid-focus) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-focus, - var( - --mod-tag-content-color-invalid-focus, - var(--spectrum-tag-content-color-invalid-focus) - ) - ); + border-color: var( + --highcontrast-tag-border-color-invalid-focus, + var( + --mod-tag-border-color-invalid-focus, + var(--spectrum-tag-border-color-invalid-focus) + ) + ); + color: var( + --highcontrast-tag-content-color-invalid-focus, + var( + --mod-tag-content-color-invalid-focus, + var(--spectrum-tag-content-color-invalid-focus) + ) + ); } :host([invalid][selected]) { - border-color: var( - --highcontrast-tag-border-color-invalid-selected, - var( - --mod-tag-border-color-invalid-selected, - var(--spectrum-tag-border-color-invalid-selected) - ) - ); - background-color: var( - --highcontrast-tag-background-color-invalid-selected, - var( - --mod-tag-background-color-invalid-selected, - var(--spectrum-tag-background-color-invalid-selected) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-selected, - var( - --mod-tag-content-color-invalid-selected, - var(--spectrum-tag-content-color-invalid-selected) - ) - ); + border-color: var( + --highcontrast-tag-border-color-invalid-selected, + var( + --mod-tag-border-color-invalid-selected, + var(--spectrum-tag-border-color-invalid-selected) + ) + ); + background-color: var( + --highcontrast-tag-background-color-invalid-selected, + var( + --mod-tag-background-color-invalid-selected, + var(--spectrum-tag-background-color-invalid-selected) + ) + ); + color: var( + --highcontrast-tag-content-color-invalid-selected, + var( + --mod-tag-content-color-invalid-selected, + var(--spectrum-tag-content-color-invalid-selected) + ) + ); } :host([invalid][selected]:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-invalid-selected-active, - var( - --mod-tag-border-color-invalid-selected-active, - var(--spectrum-tag-border-color-invalid-selected-active) - ) - ); - background-color: var( - --highcontrast-tag-background-color-invalid-selected-active, - var( - --mod-tag-background-color-invalid-selected-active, - var(--spectrum-tag-background-color-invalid-selected-active) - ) - ); + border-color: var( + --highcontrast-tag-border-color-invalid-selected-active, + var( + --mod-tag-border-color-invalid-selected-active, + var(--spectrum-tag-border-color-invalid-selected-active) + ) + ); + background-color: var( + --highcontrast-tag-background-color-invalid-selected-active, + var( + --mod-tag-background-color-invalid-selected-active, + var(--spectrum-tag-background-color-invalid-selected-active) + ) + ); } :host([invalid][selected][focused]), :host([invalid][selected]:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-invalid-selected-focus, - var( - --mod-tag-border-color-invalid-selected-focus, - var(--spectrum-tag-border-color-invalid-selected-focus) - ) - ); - background-color: var( - --highcontrast-tag-background-color-invalid-selected-focus, - var( - --mod-tag-background-color-invalid-selected-focus, - var(--spectrum-tag-background-color-invalid-selected-focus) - ) - ); + border-color: var( + --highcontrast-tag-border-color-invalid-selected-focus, + var( + --mod-tag-border-color-invalid-selected-focus, + var(--spectrum-tag-border-color-invalid-selected-focus) + ) + ); + background-color: var( + --highcontrast-tag-background-color-invalid-selected-focus, + var( + --mod-tag-background-color-invalid-selected-focus, + var(--spectrum-tag-background-color-invalid-selected-focus) + ) + ); } :host([emphasized]) { - border-color: var( - --highcontrast-tag-border-color-emphasized, - var( - --mod-tag-border-color-emphasized, - var(--spectrum-tag-border-color-emphasized) - ) - ); - background-color: var( - --highcontrast-tag-background-color-emphasized, - var( - --mod-tag-background-color-emphasized, - var(--spectrum-tag-background-color-emphasized) - ) - ); - color: var( - --highcontrast-tag-content-color-emphasized, - var( - --mod-tag-content-color-emphasized, - var(--spectrum-tag-content-color-emphasized) - ) - ); + border-color: var( + --highcontrast-tag-border-color-emphasized, + var( + --mod-tag-border-color-emphasized, + var(--spectrum-tag-border-color-emphasized) + ) + ); + background-color: var( + --highcontrast-tag-background-color-emphasized, + var( + --mod-tag-background-color-emphasized, + var(--spectrum-tag-background-color-emphasized) + ) + ); + color: var( + --highcontrast-tag-content-color-emphasized, + var( + --mod-tag-content-color-emphasized, + var(--spectrum-tag-content-color-emphasized) + ) + ); } @media (hover: hover) { - :host(:hover) { - border-color: var( - --highcontrast-tag-border-color-hover, - var( - --mod-tag-border-color-hover, - var(--spectrum-tag-border-color-hover) - ) - ); - background-color: var( - --highcontrast-tag-background-color-hover, - var( - --mod-tag-background-color-hover, - var(--spectrum-tag-background-color-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-hover, - var( - --mod-tag-content-color-hover, - var(--spectrum-tag-content-color-hover) - ) - ); - } - - :host([selected]:hover) { - border-color: var( - --highcontrast-tag-border-color-selected-hover, - var( - --mod-tag-border-color-selected-hover, - var(--spectrum-tag-border-color-selected-hover) - ) - ); - background-color: var( - --highcontrast-tag-background-color-selected-hover, - var( - --mod-tag-background-color-selected-hover, - var(--spectrum-tag-background-color-selected-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-selected, - var( - --mod-tag-content-color-selected, - var(--spectrum-tag-content-color-selected) - ) - ); - } - - :host([invalid]:hover) { - border-color: var( - --highcontrast-tag-border-color-invalid-hover, - var( - --mod-tag-border-color-invalid-hover, - var(--spectrum-tag-border-color-invalid-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-hover, - var( - --mod-tag-content-color-invalid-hover, - var(--spectrum-tag-content-color-invalid-hover) - ) - ); - } - - :host([invalid][selected]:hover) { - border-color: var( - --highcontrast-tag-border-color-invalid-selected-hover, - var( - --mod-tag-border-color-invalid-selected-hover, - var(--spectrum-tag-border-color-invalid-selected-hover) - ) - ); - background-color: var( - --highcontrast-tag-background-color-invalid-selected-hover, - var( - --mod-tag-background-color-invalid-selected-hover, - var(--spectrum-tag-background-color-invalid-selected-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-selected, - var( - --mod-tag-content-color-invalid-selected, - var(--spectrum-tag-content-color-invalid-selected) - ) - ); - } - - :host([emphasized]:hover) { - border-color: var( - --highcontrast-tag-border-color-emphasized-hover, - var( - --mod-tag-border-color-emphasized-hover, - var(--spectrum-tag-border-color-emphasized-hover) - ) - ); - background-color: var( - --highcontrast-tag-background-color-emphasized-hover, - var( - --mod-tag-background-color-emphasized-hover, - var(--spectrum-tag-background-color-emphasized-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-emphasized, - var( - --mod-tag-content-color-emphasized, - var(--spectrum-tag-content-color-emphasized) - ) - ); - } + :host(:hover) { + border-color: var( + --highcontrast-tag-border-color-hover, + var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover)) + ); + background-color: var( + --highcontrast-tag-background-color-hover, + var( + --mod-tag-background-color-hover, + var(--spectrum-tag-background-color-hover) + ) + ); + color: var( + --highcontrast-tag-content-color-hover, + var( + --mod-tag-content-color-hover, + var(--spectrum-tag-content-color-hover) + ) + ); + } + + :host([selected]:hover) { + border-color: var( + --highcontrast-tag-border-color-selected-hover, + var( + --mod-tag-border-color-selected-hover, + var(--spectrum-tag-border-color-selected-hover) + ) + ); + background-color: var( + --highcontrast-tag-background-color-selected-hover, + var( + --mod-tag-background-color-selected-hover, + var(--spectrum-tag-background-color-selected-hover) + ) + ); + color: var( + --highcontrast-tag-content-color-selected, + var( + --mod-tag-content-color-selected, + var(--spectrum-tag-content-color-selected) + ) + ); + } + + :host([invalid]:hover) { + border-color: var( + --highcontrast-tag-border-color-invalid-hover, + var( + --mod-tag-border-color-invalid-hover, + var(--spectrum-tag-border-color-invalid-hover) + ) + ); + color: var( + --highcontrast-tag-content-color-invalid-hover, + var( + --mod-tag-content-color-invalid-hover, + var(--spectrum-tag-content-color-invalid-hover) + ) + ); + } + + :host([invalid][selected]:hover) { + border-color: var( + --highcontrast-tag-border-color-invalid-selected-hover, + var( + --mod-tag-border-color-invalid-selected-hover, + var(--spectrum-tag-border-color-invalid-selected-hover) + ) + ); + background-color: var( + --highcontrast-tag-background-color-invalid-selected-hover, + var( + --mod-tag-background-color-invalid-selected-hover, + var(--spectrum-tag-background-color-invalid-selected-hover) + ) + ); + color: var( + --highcontrast-tag-content-color-invalid-selected, + var( + --mod-tag-content-color-invalid-selected, + var(--spectrum-tag-content-color-invalid-selected) + ) + ); + } + + :host([emphasized]:hover) { + border-color: var( + --highcontrast-tag-border-color-emphasized-hover, + var( + --mod-tag-border-color-emphasized-hover, + var(--spectrum-tag-border-color-emphasized-hover) + ) + ); + background-color: var( + --highcontrast-tag-background-color-emphasized-hover, + var( + --mod-tag-background-color-emphasized-hover, + var(--spectrum-tag-background-color-emphasized-hover) + ) + ); + color: var( + --highcontrast-tag-content-color-emphasized, + var( + --mod-tag-content-color-emphasized, + var(--spectrum-tag-content-color-emphasized) + ) + ); + } } :host([emphasized]:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-emphasized-active, - var( - --mod-tag-border-color-emphasized-active, - var(--spectrum-tag-border-color-emphasized-active) - ) - ); - background-color: var( - --highcontrast-tag-background-color-emphasized-active, - var( - --mod-tag-background-color-emphasized-active, - var(--spectrum-tag-background-color-emphasized-active) - ) - ); + border-color: var( + --highcontrast-tag-border-color-emphasized-active, + var( + --mod-tag-border-color-emphasized-active, + var(--spectrum-tag-border-color-emphasized-active) + ) + ); + background-color: var( + --highcontrast-tag-background-color-emphasized-active, + var( + --mod-tag-background-color-emphasized-active, + var(--spectrum-tag-background-color-emphasized-active) + ) + ); } :host([emphasized][focused]), :host([emphasized]:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-emphasized-focus, - var( - --mod-tag-border-color-emphasized-focus, - var(--spectrum-tag-border-color-emphasized-focus) - ) - ); - background-color: var( - --highcontrast-tag-background-color-emphasized-focus, - var( - --mod-tag-background-color-emphasized-focus, - var(--spectrum-tag-background-color-emphasized-focus) - ) - ); + border-color: var( + --highcontrast-tag-border-color-emphasized-focus, + var( + --mod-tag-border-color-emphasized-focus, + var(--spectrum-tag-border-color-emphasized-focus) + ) + ); + background-color: var( + --highcontrast-tag-background-color-emphasized-focus, + var( + --mod-tag-background-color-emphasized-focus, + var(--spectrum-tag-background-color-emphasized-focus) + ) + ); } :host([disabled]) { - border-color: var( - --highcontrast-tag-border-color-disabled, - var( - --mod-tag-border-color-disabled, - var(--spectrum-tag-border-color-disabled) - ) - ); - background-color: var( - --highcontrast-tag-background-color-disabled, - var( - --mod-tag-background-color-disabled, - var(--spectrum-tag-background-color-disabled) - ) - ); - color: var( - --highcontrast-tag-content-color-disabled, - var( - --mod-tag-content-color-disabled, - var(--spectrum-tag-content-color-disabled) - ) - ); - pointer-events: none; + border-color: var( + --highcontrast-tag-border-color-disabled, + var( + --mod-tag-border-color-disabled, + var(--spectrum-tag-border-color-disabled) + ) + ); + background-color: var( + --highcontrast-tag-background-color-disabled, + var( + --mod-tag-background-color-disabled, + var(--spectrum-tag-background-color-disabled) + ) + ); + color: var( + --highcontrast-tag-content-color-disabled, + var( + --mod-tag-content-color-disabled, + var(--spectrum-tag-content-color-disabled) + ) + ); + pointer-events: none; } -:host([disabled]) ::slotted([slot='avatar']) { - opacity: var( - --mod-avatar-opacity-disabled, - var(--spectrum-avatar-opacity-disabled) - ); +:host([disabled]) ::slotted([slot="avatar"]) { + opacity: var( + --mod-avatar-opacity-disabled, + var(--spectrum-avatar-opacity-disabled) + ); } @media (forced-colors: active) { - :host { - --highcontrast-tag-border-color: ButtonText; - --highcontrast-tag-border-color-hover: ButtonText; - --highcontrast-tag-border-color-active: ButtonText; - --highcontrast-tag-border-color-focus: Highlight; - --highcontrast-tag-background-color: ButtonFace; - --highcontrast-tag-background-color-hover: ButtonFace; - --highcontrast-tag-background-color-active: ButtonFace; - --highcontrast-tag-background-color-focus: ButtonFace; - --highcontrast-tag-content-color: ButtonText; - --highcontrast-tag-content-color-hover: ButtonText; - --highcontrast-tag-content-color-active: ButtonText; - --highcontrast-tag-content-color-focus: ButtonText; - --highcontrast-tag-focus-ring-color: Highlight; - forced-color-adjust: none; - } - - :host([selected]) { - --highcontrast-tag-border-color-selected: Highlight; - --highcontrast-tag-border-color-selected-hover: Highlight; - --highcontrast-tag-border-color-selected-active: Highlight; - --highcontrast-tag-border-color-selected-focus: Highlight; - --highcontrast-tag-background-color-selected: Highlight; - --highcontrast-tag-background-color-selected-hover: Highlight; - --highcontrast-tag-background-color-selected-active: Highlight; - --highcontrast-tag-background-color-selected-focus: Highlight; - --highcontrast-tag-content-color-selected: HighlightText; - } - - :host([disabled]) { - --highcontrast-tag-border-color-disabled: GrayText; - --highcontrast-tag-background-color-disabled: ButtonFace; - --highcontrast-tag-content-color-disabled: GrayText; - } - - :host([invalid]) { - --highcontrast-tag-border-color-invalid: Highlight; - --highcontrast-tag-border-color-invalid-hover: Highlight; - --highcontrast-tag-border-color-invalid-active: Highlight; - --highcontrast-tag-border-color-invalid-focus: Highlight; - --highcontrast-tag-content-color-invalid: CanvasText; - --highcontrast-tag-content-color-invalid-hover: CanvasText; - --highcontrast-tag-content-color-invalid-active: CanvasText; - --highcontrast-tag-content-color-invalid-focus: CanvasText; - } - - :host([invalid][selected]) { - --highcontrast-tag-border-color-invalid-selected: Highlight; - --highcontrast-tag-border-color-invalid-selected-hover: Highlight; - --highcontrast-tag-border-color-invalid-selected-focus: Highlight; - --highcontrast-tag-border-color-invalid-selected-active: Highlight; - --highcontrast-tag-background-color-invalid-selected: Highlight; - --highcontrast-tag-background-color-invalid-selected-hover: Highlight; - --highcontrast-tag-background-color-invalid-selected-active: Highlight; - --highcontrast-tag-background-color-invalid-selected-focus: Highlight; - --highcontrast-tag-content-color-invalid-selected: HighlightText; - } - - :host([emphasized]) { - --highcontrast-tag-border-color-emphasized: Highlight; - --highcontrast-tag-border-color-emphasized-hover: Highlight; - --highcontrast-tag-border-color-emphasized-active: Highlight; - --highcontrast-tag-border-color-emphasized-focus: Highlight; - --highcontrast-tag-background-color-emphasized: ButtonFace; - --highcontrast-tag-background-color-emphasized-hover: ButtonFace; - --highcontrast-tag-background-color-emphasized-active: ButtonFace; - --highcontrast-tag-background-color-emphasized-focus: ButtonFace; - --highcontrast-tag-content-color-emphasized: CanvasText; - } + :host { + --highcontrast-tag-border-color: ButtonText; + --highcontrast-tag-border-color-hover: ButtonText; + --highcontrast-tag-border-color-active: ButtonText; + --highcontrast-tag-border-color-focus: Highlight; + --highcontrast-tag-background-color: ButtonFace; + --highcontrast-tag-background-color-hover: ButtonFace; + --highcontrast-tag-background-color-active: ButtonFace; + --highcontrast-tag-background-color-focus: ButtonFace; + --highcontrast-tag-content-color: ButtonText; + --highcontrast-tag-content-color-hover: ButtonText; + --highcontrast-tag-content-color-active: ButtonText; + --highcontrast-tag-content-color-focus: ButtonText; + --highcontrast-tag-focus-ring-color: Highlight; + forced-color-adjust: none; + } + + :host([selected]) { + --highcontrast-tag-border-color-selected: Highlight; + --highcontrast-tag-border-color-selected-hover: Highlight; + --highcontrast-tag-border-color-selected-active: Highlight; + --highcontrast-tag-border-color-selected-focus: Highlight; + --highcontrast-tag-background-color-selected: Highlight; + --highcontrast-tag-background-color-selected-hover: Highlight; + --highcontrast-tag-background-color-selected-active: Highlight; + --highcontrast-tag-background-color-selected-focus: Highlight; + --highcontrast-tag-content-color-selected: HighlightText; + } + + :host([disabled]) { + --highcontrast-tag-border-color-disabled: GrayText; + --highcontrast-tag-background-color-disabled: ButtonFace; + --highcontrast-tag-content-color-disabled: GrayText; + } + + :host([invalid]) { + --highcontrast-tag-border-color-invalid: Highlight; + --highcontrast-tag-border-color-invalid-hover: Highlight; + --highcontrast-tag-border-color-invalid-active: Highlight; + --highcontrast-tag-border-color-invalid-focus: Highlight; + --highcontrast-tag-content-color-invalid: CanvasText; + --highcontrast-tag-content-color-invalid-hover: CanvasText; + --highcontrast-tag-content-color-invalid-active: CanvasText; + --highcontrast-tag-content-color-invalid-focus: CanvasText; + } + + :host([invalid][selected]) { + --highcontrast-tag-border-color-invalid-selected: Highlight; + --highcontrast-tag-border-color-invalid-selected-hover: Highlight; + --highcontrast-tag-border-color-invalid-selected-focus: Highlight; + --highcontrast-tag-border-color-invalid-selected-active: Highlight; + --highcontrast-tag-background-color-invalid-selected: Highlight; + --highcontrast-tag-background-color-invalid-selected-hover: Highlight; + --highcontrast-tag-background-color-invalid-selected-active: Highlight; + --highcontrast-tag-background-color-invalid-selected-focus: Highlight; + --highcontrast-tag-content-color-invalid-selected: HighlightText; + } + + :host([emphasized]) { + --highcontrast-tag-border-color-emphasized: Highlight; + --highcontrast-tag-border-color-emphasized-hover: Highlight; + --highcontrast-tag-border-color-emphasized-active: Highlight; + --highcontrast-tag-border-color-emphasized-focus: Highlight; + --highcontrast-tag-background-color-emphasized: ButtonFace; + --highcontrast-tag-background-color-emphasized-hover: ButtonFace; + --highcontrast-tag-background-color-emphasized-active: ButtonFace; + --highcontrast-tag-background-color-emphasized-focus: ButtonFace; + --highcontrast-tag-content-color-emphasized: CanvasText; + } } diff --git a/packages/tags/src/spectrum-tags.css b/packages/tags/src/spectrum-tags.css index 1af81362f9..4dc8ec4f34 100644 --- a/packages/tags/src/spectrum-tags.css +++ b/packages/tags/src/spectrum-tags.css @@ -12,20 +12,20 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - flex-wrap: wrap; - margin: 0; - padding: 0; - list-style: none; - display: inline-flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style: none; + display: inline-flex; } ::slotted(*) { - margin-block: var( - --mod-tag-group-item-margin-block, - var(--spectrum-tag-group-item-margin-block) - ); - margin-inline: var( - --mod-tag-group-item-margin-inline, - var(--spectrum-tag-group-item-margin-inline) - ); + margin-block: var( + --mod-tag-group-item-margin-block, + var(--spectrum-tag-group-item-margin-block) + ); + margin-inline: var( + --mod-tag-group-item-margin-inline, + var(--spectrum-tag-group-item-margin-inline) + ); } diff --git a/packages/tags/src/tag-overrides.css b/packages/tags/src/tag-overrides.css index 92c47e8592..a64d99e040 100644 --- a/packages/tags/src/tag-overrides.css +++ b/packages/tags/src/tag-overrides.css @@ -12,345 +12,337 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-tag-border-color: var(--system-tag-border-color); - --spectrum-tag-border-color-hover: var(--system-tag-border-color-hover); - --spectrum-tag-border-color-active: var(--system-tag-border-color-active); - --spectrum-tag-border-color-focus: var(--system-tag-border-color-focus); - --spectrum-tag-size-small-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --spectrum-tag-size-medium-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --spectrum-tag-size-large-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --spectrum-tag-background-color: var(--system-tag-background-color); - --spectrum-tag-background-color-hover: var( - --system-tag-background-color-hover - ); - --spectrum-tag-background-color-active: var( - --system-tag-background-color-active - ); - --spectrum-tag-background-color-focus: var( - --system-tag-background-color-focus - ); - --spectrum-tag-content-color: var(--system-tag-content-color); - --spectrum-tag-content-color-hover: var(--system-tag-content-color-hover); - --spectrum-tag-content-color-active: var(--system-tag-content-color-active); - --spectrum-tag-content-color-focus: var(--system-tag-content-color-focus); - --spectrum-tag-border-color-selected: var( - --system-tag-border-color-selected - ); - --spectrum-tag-border-color-selected-hover: var( - --system-tag-border-color-selected-hover - ); - --spectrum-tag-border-color-selected-active: var( - --system-tag-border-color-selected-active - ); - --spectrum-tag-border-color-selected-focus: var( - --system-tag-border-color-selected-focus - ); - --spectrum-tag-border-color-disabled: var( - --system-tag-border-color-disabled - ); - --spectrum-tag-background-color-disabled: var( - --system-tag-background-color-disabled - ); - --spectrum-tag-size-small-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --spectrum-tag-size-small-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --spectrum-tag-size-medium-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --spectrum-tag-size-medium-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --spectrum-tag-size-large-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --spectrum-tag-size-large-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); - --spectrum-avatar-opacity-disabled: var( - --system-tag-avatar-opacity-disabled - ); - --spectrum-tag-animation-duration: var(--system-tag-animation-duration); - --spectrum-tag-border-width: var(--system-tag-border-width); - --spectrum-tag-focus-ring-thickness: var(--system-tag-focus-ring-thickness); - --spectrum-tag-focus-ring-gap: var(--system-tag-focus-ring-gap); - --spectrum-tag-focus-ring-color: var(--system-tag-focus-ring-color); - --spectrum-tag-label-line-height: var(--system-tag-label-line-height); - --spectrum-tag-label-font-weight: var(--system-tag-label-font-weight); - --spectrum-tag-content-color-selected: var( - --system-tag-content-color-selected - ); - --spectrum-tag-background-color-selected: var( - --system-tag-background-color-selected - ); - --spectrum-tag-background-color-selected-hover: var( - --system-tag-background-color-selected-hover - ); - --spectrum-tag-background-color-selected-active: var( - --system-tag-background-color-selected-active - ); - --spectrum-tag-background-color-selected-focus: var( - --system-tag-background-color-selected-focus - ); - --spectrum-tag-border-color-invalid: var(--system-tag-border-color-invalid); - --spectrum-tag-border-color-invalid-hover: var( - --system-tag-border-color-invalid-hover - ); - --spectrum-tag-border-color-invalid-active: var( - --system-tag-border-color-invalid-active - ); - --spectrum-tag-border-color-invalid-focus: var( - --system-tag-border-color-invalid-focus - ); - --spectrum-tag-content-color-invalid: var( - --system-tag-content-color-invalid - ); - --spectrum-tag-content-color-invalid-hover: var( - --system-tag-content-color-invalid-hover - ); - --spectrum-tag-content-color-invalid-active: var( - --system-tag-content-color-invalid-active - ); - --spectrum-tag-content-color-invalid-focus: var( - --system-tag-content-color-invalid-focus - ); - --spectrum-tag-border-color-invalid-selected: var( - --system-tag-border-color-invalid-selected - ); - --spectrum-tag-border-color-invalid-selected-hover: var( - --system-tag-border-color-invalid-selected-hover - ); - --spectrum-tag-border-color-invalid-selected-focus: var( - --system-tag-border-color-invalid-selected-focus - ); - --spectrum-tag-border-color-invalid-selected-active: var( - --system-tag-border-color-invalid-selected-active - ); - --spectrum-tag-background-color-invalid-selected: var( - --system-tag-background-color-invalid-selected - ); - --spectrum-tag-background-color-invalid-selected-hover: var( - --system-tag-background-color-invalid-selected-hover - ); - --spectrum-tag-background-color-invalid-selected-active: var( - --system-tag-background-color-invalid-selected-active - ); - --spectrum-tag-background-color-invalid-selected-focus: var( - --system-tag-background-color-invalid-selected-focus - ); - --spectrum-tag-content-color-invalid-selected: var( - --system-tag-content-color-invalid-selected - ); - --spectrum-tag-border-color-emphasized: var( - --system-tag-border-color-emphasized - ); - --spectrum-tag-border-color-emphasized-hover: var( - --system-tag-border-color-emphasized-hover - ); - --spectrum-tag-border-color-emphasized-active: var( - --system-tag-border-color-emphasized-active - ); - --spectrum-tag-border-color-emphasized-focus: var( - --system-tag-border-color-emphasized-focus - ); - --spectrum-tag-background-color-emphasized: var( - --system-tag-background-color-emphasized - ); - --spectrum-tag-background-color-emphasized-hover: var( - --system-tag-background-color-emphasized-hover - ); - --spectrum-tag-background-color-emphasized-active: var( - --system-tag-background-color-emphasized-active - ); - --spectrum-tag-background-color-emphasized-focus: var( - --system-tag-background-color-emphasized-focus - ); - --spectrum-tag-content-color-emphasized: var( - --system-tag-content-color-emphasized - ); - --spectrum-tag-content-color-disabled: var( - --system-tag-content-color-disabled - ); - --spectrum-tag-icon-spacing-inline-end: var( - --system-tag-icon-spacing-inline-end - ); - --spectrum-tag-icon-size: var(--system-tag-icon-size); - --spectrum-tag-icon-spacing-block-start: var( - --system-tag-icon-spacing-block-start - ); - --spectrum-tag-icon-spacing-block-end: var( - --system-tag-icon-spacing-block-end - ); - --spectrum-tag-avatar-spacing-block-start: var( - --system-tag-avatar-spacing-block-start - ); - --spectrum-tag-avatar-spacing-block-end: var( - --system-tag-avatar-spacing-block-end - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --system-tag-avatar-spacing-inline-end - ); - --spectrum-tag-label-spacing-block: var(--system-tag-label-spacing-block); - --spectrum-tag-clear-button-spacing-inline-start: var( - --system-tag-clear-button-spacing-inline-start - ); - --spectrum-tag-height: var(--system-tag-height); - --spectrum-tag-font-size: var(--system-tag-font-size); - --spectrum-tag-clear-button-spacing-block: var( - --system-tag-clear-button-spacing-block - ); - --spectrum-tag-corner-radius: var(--system-tag-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var( - --system-tag-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --system-tag-clear-button-spacing-inline-end - ); + --spectrum-tag-border-color: var(--system-tag-border-color); + --spectrum-tag-border-color-hover: var(--system-tag-border-color-hover); + --spectrum-tag-border-color-active: var(--system-tag-border-color-active); + --spectrum-tag-border-color-focus: var(--system-tag-border-color-focus); + --spectrum-tag-size-small-corner-radius: var( + --system-tag-size-small-corner-radius + ); + --spectrum-tag-size-medium-corner-radius: var( + --system-tag-size-medium-corner-radius + ); + --spectrum-tag-size-large-corner-radius: var( + --system-tag-size-large-corner-radius + ); + --spectrum-tag-background-color: var(--system-tag-background-color); + --spectrum-tag-background-color-hover: var( + --system-tag-background-color-hover + ); + --spectrum-tag-background-color-active: var( + --system-tag-background-color-active + ); + --spectrum-tag-background-color-focus: var( + --system-tag-background-color-focus + ); + --spectrum-tag-content-color: var(--system-tag-content-color); + --spectrum-tag-content-color-hover: var(--system-tag-content-color-hover); + --spectrum-tag-content-color-active: var(--system-tag-content-color-active); + --spectrum-tag-content-color-focus: var(--system-tag-content-color-focus); + --spectrum-tag-border-color-selected: var(--system-tag-border-color-selected); + --spectrum-tag-border-color-selected-hover: var( + --system-tag-border-color-selected-hover + ); + --spectrum-tag-border-color-selected-active: var( + --system-tag-border-color-selected-active + ); + --spectrum-tag-border-color-selected-focus: var( + --system-tag-border-color-selected-focus + ); + --spectrum-tag-border-color-disabled: var(--system-tag-border-color-disabled); + --spectrum-tag-background-color-disabled: var( + --system-tag-background-color-disabled + ); + --spectrum-tag-size-small-spacing-inline-start: var( + --system-tag-size-small-spacing-inline-start + ); + --spectrum-tag-size-small-label-spacing-inline-end: var( + --system-tag-size-small-label-spacing-inline-end + ); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --system-tag-size-small-clear-button-spacing-inline-end + ); + --spectrum-tag-size-medium-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --spectrum-tag-size-medium-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --spectrum-tag-size-large-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start + ); + --spectrum-tag-size-large-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end + ); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end + ); + --spectrum-avatar-opacity-disabled: var(--system-tag-avatar-opacity-disabled); + --spectrum-tag-animation-duration: var(--system-tag-animation-duration); + --spectrum-tag-border-width: var(--system-tag-border-width); + --spectrum-tag-focus-ring-thickness: var(--system-tag-focus-ring-thickness); + --spectrum-tag-focus-ring-gap: var(--system-tag-focus-ring-gap); + --spectrum-tag-focus-ring-color: var(--system-tag-focus-ring-color); + --spectrum-tag-label-line-height: var(--system-tag-label-line-height); + --spectrum-tag-label-font-weight: var(--system-tag-label-font-weight); + --spectrum-tag-content-color-selected: var( + --system-tag-content-color-selected + ); + --spectrum-tag-background-color-selected: var( + --system-tag-background-color-selected + ); + --spectrum-tag-background-color-selected-hover: var( + --system-tag-background-color-selected-hover + ); + --spectrum-tag-background-color-selected-active: var( + --system-tag-background-color-selected-active + ); + --spectrum-tag-background-color-selected-focus: var( + --system-tag-background-color-selected-focus + ); + --spectrum-tag-border-color-invalid: var(--system-tag-border-color-invalid); + --spectrum-tag-border-color-invalid-hover: var( + --system-tag-border-color-invalid-hover + ); + --spectrum-tag-border-color-invalid-active: var( + --system-tag-border-color-invalid-active + ); + --spectrum-tag-border-color-invalid-focus: var( + --system-tag-border-color-invalid-focus + ); + --spectrum-tag-content-color-invalid: var(--system-tag-content-color-invalid); + --spectrum-tag-content-color-invalid-hover: var( + --system-tag-content-color-invalid-hover + ); + --spectrum-tag-content-color-invalid-active: var( + --system-tag-content-color-invalid-active + ); + --spectrum-tag-content-color-invalid-focus: var( + --system-tag-content-color-invalid-focus + ); + --spectrum-tag-border-color-invalid-selected: var( + --system-tag-border-color-invalid-selected + ); + --spectrum-tag-border-color-invalid-selected-hover: var( + --system-tag-border-color-invalid-selected-hover + ); + --spectrum-tag-border-color-invalid-selected-focus: var( + --system-tag-border-color-invalid-selected-focus + ); + --spectrum-tag-border-color-invalid-selected-active: var( + --system-tag-border-color-invalid-selected-active + ); + --spectrum-tag-background-color-invalid-selected: var( + --system-tag-background-color-invalid-selected + ); + --spectrum-tag-background-color-invalid-selected-hover: var( + --system-tag-background-color-invalid-selected-hover + ); + --spectrum-tag-background-color-invalid-selected-active: var( + --system-tag-background-color-invalid-selected-active + ); + --spectrum-tag-background-color-invalid-selected-focus: var( + --system-tag-background-color-invalid-selected-focus + ); + --spectrum-tag-content-color-invalid-selected: var( + --system-tag-content-color-invalid-selected + ); + --spectrum-tag-border-color-emphasized: var( + --system-tag-border-color-emphasized + ); + --spectrum-tag-border-color-emphasized-hover: var( + --system-tag-border-color-emphasized-hover + ); + --spectrum-tag-border-color-emphasized-active: var( + --system-tag-border-color-emphasized-active + ); + --spectrum-tag-border-color-emphasized-focus: var( + --system-tag-border-color-emphasized-focus + ); + --spectrum-tag-background-color-emphasized: var( + --system-tag-background-color-emphasized + ); + --spectrum-tag-background-color-emphasized-hover: var( + --system-tag-background-color-emphasized-hover + ); + --spectrum-tag-background-color-emphasized-active: var( + --system-tag-background-color-emphasized-active + ); + --spectrum-tag-background-color-emphasized-focus: var( + --system-tag-background-color-emphasized-focus + ); + --spectrum-tag-content-color-emphasized: var( + --system-tag-content-color-emphasized + ); + --spectrum-tag-content-color-disabled: var( + --system-tag-content-color-disabled + ); + --spectrum-tag-icon-spacing-inline-end: var( + --system-tag-icon-spacing-inline-end + ); + --spectrum-tag-icon-size: var(--system-tag-icon-size); + --spectrum-tag-icon-spacing-block-start: var( + --system-tag-icon-spacing-block-start + ); + --spectrum-tag-icon-spacing-block-end: var( + --system-tag-icon-spacing-block-end + ); + --spectrum-tag-avatar-spacing-block-start: var( + --system-tag-avatar-spacing-block-start + ); + --spectrum-tag-avatar-spacing-block-end: var( + --system-tag-avatar-spacing-block-end + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --system-tag-avatar-spacing-inline-end + ); + --spectrum-tag-label-spacing-block: var(--system-tag-label-spacing-block); + --spectrum-tag-clear-button-spacing-inline-start: var( + --system-tag-clear-button-spacing-inline-start + ); + --spectrum-tag-height: var(--system-tag-height); + --spectrum-tag-font-size: var(--system-tag-font-size); + --spectrum-tag-clear-button-spacing-block: var( + --system-tag-clear-button-spacing-block + ); + --spectrum-tag-corner-radius: var(--system-tag-corner-radius); + --spectrum-tag-spacing-inline-start: var(--system-tag-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var( + --system-tag-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --system-tag-clear-button-spacing-inline-end + ); } -:host([size='s']) { - --spectrum-tag-height: var(--system-tag-size-s-height); - --spectrum-tag-font-size: var(--system-tag-size-s-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-s-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var( - --system-tag-size-s-clear-button-spacing-inline-start - ); - --spectrum-tag-clear-button-spacing-block: var( - --system-tag-size-s-clear-button-spacing-block - ); - --spectrum-tag-icon-spacing-block-start: var( - --system-tag-size-s-icon-spacing-block-start - ); - --spectrum-tag-icon-spacing-block-end: var( - --system-tag-size-s-icon-spacing-block-end - ); - --spectrum-tag-icon-spacing-inline-end: var( - --system-tag-size-s-icon-spacing-inline-end - ); - --spectrum-tag-avatar-spacing-block-start: var( - --system-tag-size-s-avatar-spacing-block-start - ); - --spectrum-tag-avatar-spacing-block-end: var( - --system-tag-size-s-avatar-spacing-block-end - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --system-tag-size-s-avatar-spacing-inline-end - ); - --spectrum-tag-label-spacing-block: var( - --system-tag-size-s-label-spacing-block - ); - --spectrum-tag-corner-radius: var(--system-tag-size-s-corner-radius); - --spectrum-tag-spacing-inline-start: var( - --system-tag-size-s-spacing-inline-start - ); - --spectrum-tag-label-spacing-inline-end: var( - --system-tag-size-s-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --system-tag-size-s-clear-button-spacing-inline-end - ); +:host([size="s"]) { + --spectrum-tag-height: var(--system-tag-size-s-height); + --spectrum-tag-font-size: var(--system-tag-size-s-font-size); + --spectrum-tag-icon-size: var(--system-tag-size-s-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var( + --system-tag-size-s-clear-button-spacing-inline-start + ); + --spectrum-tag-clear-button-spacing-block: var( + --system-tag-size-s-clear-button-spacing-block + ); + --spectrum-tag-icon-spacing-block-start: var( + --system-tag-size-s-icon-spacing-block-start + ); + --spectrum-tag-icon-spacing-block-end: var( + --system-tag-size-s-icon-spacing-block-end + ); + --spectrum-tag-icon-spacing-inline-end: var( + --system-tag-size-s-icon-spacing-inline-end + ); + --spectrum-tag-avatar-spacing-block-start: var( + --system-tag-size-s-avatar-spacing-block-start + ); + --spectrum-tag-avatar-spacing-block-end: var( + --system-tag-size-s-avatar-spacing-block-end + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --system-tag-size-s-avatar-spacing-inline-end + ); + --spectrum-tag-label-spacing-block: var( + --system-tag-size-s-label-spacing-block + ); + --spectrum-tag-corner-radius: var(--system-tag-size-s-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --system-tag-size-s-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --system-tag-size-s-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --system-tag-size-s-clear-button-spacing-inline-end + ); } :host { - --spectrum-tag-height: var(--system-tag-size-m-height); - --spectrum-tag-font-size: var(--system-tag-size-m-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-m-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var( - --system-tag-size-m-clear-button-spacing-inline-start - ); - --spectrum-tag-clear-button-spacing-block: var( - --system-tag-size-m-clear-button-spacing-block - ); - --spectrum-tag-icon-spacing-block-start: var( - --system-tag-size-m-icon-spacing-block-start - ); - --spectrum-tag-icon-spacing-block-end: var( - --system-tag-size-m-icon-spacing-block-end - ); - --spectrum-tag-icon-spacing-inline-end: var( - --system-tag-size-m-icon-spacing-inline-end - ); - --spectrum-tag-avatar-spacing-block-start: var( - --system-tag-size-m-avatar-spacing-block-start - ); - --spectrum-tag-avatar-spacing-block-end: var( - --system-tag-size-m-avatar-spacing-block-end - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --system-tag-size-m-avatar-spacing-inline-end - ); - --spectrum-tag-label-spacing-block: var( - --system-tag-size-m-label-spacing-block - ); - --spectrum-tag-corner-radius: var(--system-tag-size-m-corner-radius); - --spectrum-tag-spacing-inline-start: var( - --system-tag-size-m-spacing-inline-start - ); - --spectrum-tag-label-spacing-inline-end: var( - --system-tag-size-m-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --system-tag-size-m-clear-button-spacing-inline-end - ); + --spectrum-tag-height: var(--system-tag-size-m-height); + --spectrum-tag-font-size: var(--system-tag-size-m-font-size); + --spectrum-tag-icon-size: var(--system-tag-size-m-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var( + --system-tag-size-m-clear-button-spacing-inline-start + ); + --spectrum-tag-clear-button-spacing-block: var( + --system-tag-size-m-clear-button-spacing-block + ); + --spectrum-tag-icon-spacing-block-start: var( + --system-tag-size-m-icon-spacing-block-start + ); + --spectrum-tag-icon-spacing-block-end: var( + --system-tag-size-m-icon-spacing-block-end + ); + --spectrum-tag-icon-spacing-inline-end: var( + --system-tag-size-m-icon-spacing-inline-end + ); + --spectrum-tag-avatar-spacing-block-start: var( + --system-tag-size-m-avatar-spacing-block-start + ); + --spectrum-tag-avatar-spacing-block-end: var( + --system-tag-size-m-avatar-spacing-block-end + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --system-tag-size-m-avatar-spacing-inline-end + ); + --spectrum-tag-label-spacing-block: var( + --system-tag-size-m-label-spacing-block + ); + --spectrum-tag-corner-radius: var(--system-tag-size-m-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --system-tag-size-m-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --system-tag-size-m-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --system-tag-size-m-clear-button-spacing-inline-end + ); } -:host([size='l']) { - --spectrum-tag-height: var(--system-tag-size-l-height); - --spectrum-tag-font-size: var(--system-tag-size-l-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-l-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var( - --system-tag-size-l-clear-button-spacing-inline-start - ); - --spectrum-tag-clear-button-spacing-block: var( - --system-tag-size-l-clear-button-spacing-block - ); - --spectrum-tag-icon-spacing-block-start: var( - --system-tag-size-l-icon-spacing-block-start - ); - --spectrum-tag-icon-spacing-block-end: var( - --system-tag-size-l-icon-spacing-block-end - ); - --spectrum-tag-icon-spacing-inline-end: var( - --system-tag-size-l-icon-spacing-inline-end - ); - --spectrum-tag-avatar-spacing-block-start: var( - --system-tag-size-l-avatar-spacing-block-start - ); - --spectrum-tag-avatar-spacing-block-end: var( - --system-tag-size-l-avatar-spacing-block-end - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --system-tag-size-l-avatar-spacing-inline-end - ); - --spectrum-tag-label-spacing-block: var( - --system-tag-size-l-label-spacing-block - ); - --spectrum-tag-corner-radius: var(--system-tag-size-l-corner-radius); - --spectrum-tag-spacing-inline-start: var( - --system-tag-size-l-spacing-inline-start - ); - --spectrum-tag-label-spacing-inline-end: var( - --system-tag-size-l-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --system-tag-size-l-clear-button-spacing-inline-end - ); +:host([size="l"]) { + --spectrum-tag-height: var(--system-tag-size-l-height); + --spectrum-tag-font-size: var(--system-tag-size-l-font-size); + --spectrum-tag-icon-size: var(--system-tag-size-l-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var( + --system-tag-size-l-clear-button-spacing-inline-start + ); + --spectrum-tag-clear-button-spacing-block: var( + --system-tag-size-l-clear-button-spacing-block + ); + --spectrum-tag-icon-spacing-block-start: var( + --system-tag-size-l-icon-spacing-block-start + ); + --spectrum-tag-icon-spacing-block-end: var( + --system-tag-size-l-icon-spacing-block-end + ); + --spectrum-tag-icon-spacing-inline-end: var( + --system-tag-size-l-icon-spacing-inline-end + ); + --spectrum-tag-avatar-spacing-block-start: var( + --system-tag-size-l-avatar-spacing-block-start + ); + --spectrum-tag-avatar-spacing-block-end: var( + --system-tag-size-l-avatar-spacing-block-end + ); + --spectrum-tag-avatar-spacing-inline-end: var( + --system-tag-size-l-avatar-spacing-inline-end + ); + --spectrum-tag-label-spacing-block: var( + --system-tag-size-l-label-spacing-block + ); + --spectrum-tag-corner-radius: var(--system-tag-size-l-corner-radius); + --spectrum-tag-spacing-inline-start: var( + --system-tag-size-l-spacing-inline-start + ); + --spectrum-tag-label-spacing-inline-end: var( + --system-tag-size-l-label-spacing-inline-end + ); + --spectrum-tag-clear-button-spacing-inline-end: var( + --system-tag-size-l-clear-button-spacing-inline-end + ); } diff --git a/packages/tags/src/tags-overrides.css b/packages/tags/src/tags-overrides.css index 7b87e2f6fa..c6048e98af 100644 --- a/packages/tags/src/tags-overrides.css +++ b/packages/tags/src/tags-overrides.css @@ -12,10 +12,10 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-tag-group-item-margin-block: var( - --system-tag-group-item-margin-block - ); - --spectrum-tag-group-item-margin-inline: var( - --system-tag-group-item-margin-inline - ); + --spectrum-tag-group-item-margin-block: var( + --system-tag-group-item-margin-block + ); + --spectrum-tag-group-item-margin-inline: var( + --system-tag-group-item-margin-inline + ); } diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 88a6b3d23c..2ad61b054b 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -12,845 +12,829 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #textfield { - --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); - text-overflow: ellipsis; - inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width)); - grid-template-rows: auto auto auto; - grid-template-columns: auto auto; - margin: 0; - display: inline-grid; - position: relative; - overflow: visible; + --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); + text-overflow: ellipsis; + inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width)); + grid-template-rows: auto auto auto; + grid-template-columns: auto auto; + margin: 0; + display: inline-grid; + position: relative; + overflow: visible; } :host([quiet]) #textfield:after { - content: ''; - pointer-events: none; - inline-size: 100%; - block-size: var( - --mod-textfield-focus-indicator-width, - var(--spectrum-textfield-focus-indicator-width) - ); - position: absolute; - inset-block-end: calc( - ( - var( - --mod-textfield-focus-indicator-gap, - var(--spectrum-textfield-focus-indicator-gap) - ) + - var( - --mod-textfield-focus-indicator-width, - var(--spectrum-textfield-focus-indicator-width) - ) - ) * -1 - ); - inset-inline-start: 0; + content: ""; + pointer-events: none; + inline-size: 100%; + block-size: var( + --mod-textfield-focus-indicator-width, + var(--spectrum-textfield-focus-indicator-width) + ); + position: absolute; + inset-block-end: calc( + ( + var( + --mod-textfield-focus-indicator-gap, + var(--spectrum-textfield-focus-indicator-gap) + ) + + var( + --mod-textfield-focus-indicator-width, + var(--spectrum-textfield-focus-indicator-width) + ) + ) * + -1 + ); + inset-inline-start: 0; } :host([quiet][focused]) #textfield:after { - background-color: var( - --highcontrast-textfield-focus-indicator-color, - var( - --mod-textfield-focus-indicator-color, - var(--spectrum-textfield-focus-indicator-color) - ) - ); + background-color: var( + --highcontrast-textfield-focus-indicator-color, + var( + --mod-textfield-focus-indicator-color, + var(--spectrum-textfield-focus-indicator-color) + ) + ); } :host([quiet][invalid]) #textfield .input { - padding-inline-end: calc( - var( - --mod-textfield-icon-spacing-inline-start-invalid, - var(--spectrum-textfield-icon-spacing-inline-start-invalid) - ) + - var( - --mod-textfield-icon-size-invalid, - var(--spectrum-textfield-icon-size-invalid) - ) - ); + padding-inline-end: calc( + var( + --mod-textfield-icon-spacing-inline-start-invalid, + var(--spectrum-textfield-icon-spacing-inline-start-invalid) + ) + + var( + --mod-textfield-icon-size-invalid, + var(--spectrum-textfield-icon-size-invalid) + ) + ); } :host([quiet][valid]) #textfield .input { - padding-inline-end: calc( - var( - --mod-textfield-icon-spacing-inline-start-valid, - var(--spectrum-textfield-icon-spacing-inline-start-valid) - ) + - var( - --mod-textfield-icon-size-valid, - var(--spectrum-textfield-icon-size-valid) - ) - ); + padding-inline-end: calc( + var( + --mod-textfield-icon-spacing-inline-start-valid, + var(--spectrum-textfield-icon-spacing-inline-start-valid) + ) + + var( + --mod-textfield-icon-size-valid, + var(--spectrum-textfield-icon-size-valid) + ) + ); } :host([invalid]) #textfield .icon, :host([valid]) #textfield .icon { - pointer-events: all; - grid-area: 2 / 2; - margin-inline-start: auto; - position: absolute; - inset-block-start: 0; + pointer-events: all; + grid-area: 2 / 2; + margin-inline-start: auto; + position: absolute; + inset-block-start: 0; } #textfield.spectrum-Textfield--sideLabel .icon { - grid-area: 1 / 2 / span 1 / span 1; + grid-area: 1 / 2 / span 1 / span 1; } :host([valid]) #textfield .icon { - color: var( - --highcontrast-textfield-icon-color-valid, - var( - --mod-textfield-icon-color-valid, - var(--spectrum-textfield-icon-color-valid) - ) - ); - inset-block-start: var( - --mod-textfield-icon-spacing-block-valid, - var(--spectrum-textfield-icon-spacing-block-valid) - ); - inset-block-end: var( - --mod-textfield-icon-spacing-block-valid, - var(--spectrum-textfield-icon-spacing-block-valid) - ); - inset-inline-end: var( - --mod-textfield-icon-spacing-inline-end-valid, - var(--spectrum-textfield-icon-spacing-inline-end-valid) - ); + color: var( + --highcontrast-textfield-icon-color-valid, + var( + --mod-textfield-icon-color-valid, + var(--spectrum-textfield-icon-color-valid) + ) + ); + inset-block-start: var( + --mod-textfield-icon-spacing-block-valid, + var(--spectrum-textfield-icon-spacing-block-valid) + ); + inset-block-end: var( + --mod-textfield-icon-spacing-block-valid, + var(--spectrum-textfield-icon-spacing-block-valid) + ); + inset-inline-end: var( + --mod-textfield-icon-spacing-inline-end-valid, + var(--spectrum-textfield-icon-spacing-inline-end-valid) + ); } :host([invalid]) #textfield .icon { - block-size: var( - --mod-textfield-icon-size-invalid, - var(--spectrum-textfield-icon-size-invalid) - ); - inline-size: var( - --mod-textfield-icon-size-invalid, - var(--spectrum-textfield-icon-size-invalid) - ); - color: var( - --highcontrast-textfield-icon-color-invalid, - var( - --mod-textfield-icon-color-invalid, - var(--spectrum-textfield-icon-color-invalid) - ) - ); - inset-block-start: var( - --mod-textfield-icon-spacing-block-invalid, - var(--spectrum-textfield-icon-spacing-block-invalid) - ); - inset-block-end: var( - --mod-textfield-icon-spacing-block-invalid, - var(--spectrum-textfield-icon-spacing-block-invalid) - ); - inset-inline-end: var( - --mod-textfield-icon-spacing-inline-end-invalid, - var(--spectrum-textfield-icon-spacing-inline-end-invalid) - ); + block-size: var( + --mod-textfield-icon-size-invalid, + var(--spectrum-textfield-icon-size-invalid) + ); + inline-size: var( + --mod-textfield-icon-size-invalid, + var(--spectrum-textfield-icon-size-invalid) + ); + color: var( + --highcontrast-textfield-icon-color-invalid, + var( + --mod-textfield-icon-color-invalid, + var(--spectrum-textfield-icon-color-invalid) + ) + ); + inset-block-start: var( + --mod-textfield-icon-spacing-block-invalid, + var(--spectrum-textfield-icon-spacing-block-invalid) + ); + inset-block-end: var( + --mod-textfield-icon-spacing-block-invalid, + var(--spectrum-textfield-icon-spacing-block-invalid) + ); + inset-inline-end: var( + --mod-textfield-icon-spacing-inline-end-invalid, + var(--spectrum-textfield-icon-spacing-inline-end-invalid) + ); } :host([disabled]) #textfield .icon, :host([readonly]) #textfield .icon { - color: #0000; + color: #0000; } :host([quiet]) .icon { - padding-inline-end: 0; + padding-inline-end: 0; } :host([quiet][valid]) .icon { - inset-inline-end: var( - --mod-textfield-icon-spacing-inline-end-quiet-valid, - var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid) - ); + inset-inline-end: var( + --mod-textfield-icon-spacing-inline-end-quiet-valid, + var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid) + ); } :host([quiet][invalid]) .icon { - inset-inline-end: var( - --mod-textfield-icon-spacing-inline-end-quiet-invalid, - var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid) - ); + inset-inline-end: var( + --mod-textfield-icon-spacing-inline-end-quiet-invalid, + var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid) + ); } #textfield .spectrum-FieldLabel { - grid-area: 1 / 1 / auto / span 1; - margin-block-end: var( - --mod-textfield-label-spacing-block, - var(--spectrum-textfield-label-spacing-block) - ); + grid-area: 1 / 1 / auto / span 1; + margin-block-end: var( + --mod-textfield-label-spacing-block, + var(--spectrum-textfield-label-spacing-block) + ); } :host([quiet]) .spectrum-FieldLabel { - margin-block-end: var( - --mod-textfield-label-spacing-block-quiet, - var(--spectrum-textfield-label-spacing-block-quiet) - ); + margin-block-end: var( + --mod-textfield-label-spacing-block-quiet, + var(--spectrum-textfield-label-spacing-block-quiet) + ); } :host([disabled]) .spectrum-FieldLabel { - color: var(--spectrum-textfield-text-color-disabled); + color: var(--spectrum-textfield-text-color-disabled); } #textfield .spectrum-HelpText { - grid-area: 3 / 1 / auto / span 2; - margin-block-start: var( - --mod-textfield-helptext-spacing-block, - var(--spectrum-textfield-helptext-spacing-block) - ); + grid-area: 3 / 1 / auto / span 2; + margin-block-start: var( + --mod-textfield-helptext-spacing-block, + var(--spectrum-textfield-helptext-spacing-block) + ); } .spectrum-Textfield-characterCount { - inline-size: auto; - font-size: var( - --mod-textfield-character-count-font-size, - var(--spectrum-textfield-character-count-font-size) - ); - font-family: var( - --mod-textfield-character-count-font-family, - var(--spectrum-textfield-character-count-font-family) - ); - font-weight: var( - --mod-textfield-character-count-font-weight, - var(--spectrum-textfield-character-count-font-weight) - ); - grid-area: 1 / 2 / auto / span 1; - justify-content: flex-end; - align-items: flex-end; - margin-block-end: var( - --mod-textfield-character-count-spacing-block, - var(--spectrum-textfield-character-count-spacing-block) - ); - margin-inline-start: var( - --mod-textfield-character-count-spacing-inline, - var(--spectrum-textfield-character-count-spacing-inline) - ); - margin-inline-end: 0; - padding-inline-end: calc( - var( - --mod-textfield-corner-radius, - var(--spectrum-textfield-corner-radius) - ) / 2 - ); - display: inline-flex; + inline-size: auto; + font-size: var( + --mod-textfield-character-count-font-size, + var(--spectrum-textfield-character-count-font-size) + ); + font-family: var( + --mod-textfield-character-count-font-family, + var(--spectrum-textfield-character-count-font-family) + ); + font-weight: var( + --mod-textfield-character-count-font-weight, + var(--spectrum-textfield-character-count-font-weight) + ); + grid-area: 1 / 2 / auto / span 1; + justify-content: flex-end; + align-items: flex-end; + margin-block-end: var( + --mod-textfield-character-count-spacing-block, + var(--spectrum-textfield-character-count-spacing-block) + ); + margin-inline-start: var( + --mod-textfield-character-count-spacing-inline, + var(--spectrum-textfield-character-count-spacing-inline) + ); + margin-inline-end: 0; + padding-inline-end: calc( + var( + --mod-textfield-corner-radius, + var(--spectrum-textfield-corner-radius) + ) / + 2 + ); + display: inline-flex; } :host([quiet]) .spectrum-Textfield-characterCount { - margin-block-end: var( - --mod-textfield-character-count-spacing-block-quiet, - var(--spectrum-textfield-character-count-spacing-block-quiet) - ); + margin-block-end: var( + --mod-textfield-character-count-spacing-block-quiet, + var(--spectrum-textfield-character-count-spacing-block-quiet) + ); } .input { - line-height: var(--spectrum-textfield-input-line-height); - box-sizing: border-box; - inline-size: 100%; - min-inline-size: var( - --mod-textfield-min-width, - var(--spectrum-textfield-min-width) - ); - block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); - padding-block-start: calc( - var( - --mod-textfield-spacing-block-start, - var(--spectrum-textfield-spacing-block-start) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); - padding-block-end: calc( - var( - --mod-textfield-spacing-block-end, - var(--spectrum-textfield-spacing-block-end) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); - padding-inline: calc( - var( - --mod-textfield-spacing-inline, - var(--spectrum-textfield-spacing-inline) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); - vertical-align: top; - background-color: var( - --mod-textfield-background-color, - var(--spectrum-textfield-background-color) - ); - border-color: var( - --highcontrast-textfield-border-color, - var( - --mod-textfield-border-color, - var(--spectrum-textfield-border-color) - ) - ); - border-style: solid; - border-width: var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ); - border-radius: var( - --mod-textfield-corner-radius, - var(--spectrum-textfield-corner-radius) - ); - transition: border-color - var( - --mod-texfield-animation-duration, - var(--spectrum-texfield-animation-duration) - ) - ease-in-out; - font-size: var( - --mod-textfield-placeholder-font-size, - var(--spectrum-textfield-placeholder-font-size) - ); - font-family: var( - --mod-textfield-font-family, - var(--spectrum-textfield-font-family) - ); - font-weight: var( - --mod-textfield-font-weight, - var(--spectrum-textfield-font-weight) - ); - color: var( - --highcontrast-textfield-text-color-default, - var( - --mod-textfield-text-color-default, - var(--spectrum-textfield-text-color-default) - ) - ); - text-overflow: ellipsis; - appearance: none; - outline: none; - grid-area: 2 / 1 / auto / span 2; - margin: 0; -} - -:host([type='number']) .input { - -moz-appearance: textfield; -} - -:host([type='number']) .input::-webkit-inner-spin-button, -:host([type='number']) .input::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; + line-height: var(--spectrum-textfield-input-line-height); + box-sizing: border-box; + inline-size: 100%; + min-inline-size: var( + --mod-textfield-min-width, + var(--spectrum-textfield-min-width) + ); + block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); + padding-block-start: calc( + var( + --mod-textfield-spacing-block-start, + var(--spectrum-textfield-spacing-block-start) + ) - + var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) + ); + padding-block-end: calc( + var( + --mod-textfield-spacing-block-end, + var(--spectrum-textfield-spacing-block-end) + ) - + var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) + ); + padding-inline: calc( + var( + --mod-textfield-spacing-inline, + var(--spectrum-textfield-spacing-inline) + ) - + var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) + ); + vertical-align: top; + background-color: var( + --mod-textfield-background-color, + var(--spectrum-textfield-background-color) + ); + border-color: var( + --highcontrast-textfield-border-color, + var(--mod-textfield-border-color, var(--spectrum-textfield-border-color)) + ); + border-style: solid; + border-width: var( + --mod-textfield-border-width, + var(--spectrum-textfield-border-width) + ); + border-radius: var( + --mod-textfield-corner-radius, + var(--spectrum-textfield-corner-radius) + ); + transition: border-color + var( + --mod-texfield-animation-duration, + var(--spectrum-texfield-animation-duration) + ) + ease-in-out; + font-size: var( + --mod-textfield-placeholder-font-size, + var(--spectrum-textfield-placeholder-font-size) + ); + font-family: var( + --mod-textfield-font-family, + var(--spectrum-textfield-font-family) + ); + font-weight: var( + --mod-textfield-font-weight, + var(--spectrum-textfield-font-weight) + ); + color: var( + --highcontrast-textfield-text-color-default, + var( + --mod-textfield-text-color-default, + var(--spectrum-textfield-text-color-default) + ) + ); + text-overflow: ellipsis; + appearance: none; + outline: none; + grid-area: 2 / 1 / auto / span 2; + margin: 0; +} + +:host([type="number"]) .input { + -moz-appearance: textfield; +} + +:host([type="number"]) .input::-webkit-inner-spin-button, +:host([type="number"]) .input::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; } .input:-moz-ui-invalid { - box-shadow: none; + box-shadow: none; } .input::placeholder { - opacity: 1; - font-size: var( - --mod-textfield-placeholder-font-size, - var(--spectrum-textfield-placeholder-font-size) - ); - font-family: var( - --mod-textfield-font-family, - var(--spectrum-textfield-font-family) - ); - font-weight: var( - --mod-textfield-font-weight, - var(--spectrum-textfield-font-weight) - ); - color: var( - --highcontrast-textfield-text-color-default, - var( - --mod-textfield-text-color-default, - var(--spectrum-textfield-text-color-default) - ) - ); - transition: color - var( - --mod-texfield-animation-duration, - var(--spectrum-texfield-animation-duration) - ) - ease-in-out; + opacity: 1; + font-size: var( + --mod-textfield-placeholder-font-size, + var(--spectrum-textfield-placeholder-font-size) + ); + font-family: var( + --mod-textfield-font-family, + var(--spectrum-textfield-font-family) + ); + font-weight: var( + --mod-textfield-font-weight, + var(--spectrum-textfield-font-weight) + ); + color: var( + --highcontrast-textfield-text-color-default, + var( + --mod-textfield-text-color-default, + var(--spectrum-textfield-text-color-default) + ) + ); + transition: color + var( + --mod-texfield-animation-duration, + var(--spectrum-texfield-animation-duration) + ) + ease-in-out; } .input:lang(ja)::placeholder, .input:lang(ko)::placeholder, .input:lang(zh)::placeholder { - font-style: normal; + font-style: normal; } :host([focused]) .input, .input:focus { - border-color: var( - --highcontrast-textfield-border-color-focus, - var( - --mod-textfield-border-color-focus, - var(--spectrum-textfield-border-color-focus) - ) - ); + border-color: var( + --highcontrast-textfield-border-color-focus, + var( + --mod-textfield-border-color-focus, + var(--spectrum-textfield-border-color-focus) + ) + ); } :host([focused]) .input, :host([focused]) .input::placeholder, .input:focus, .input:focus::placeholder { - color: var( - --highcontrast-textfield-text-color-focus, - var( - --mod-textfield-text-color-focus, - var(--spectrum-textfield-text-color-focus) - ) - ); + color: var( + --highcontrast-textfield-text-color-focus, + var( + --mod-textfield-text-color-focus, + var(--spectrum-textfield-text-color-focus) + ) + ); } :host([focused]) .input { - border-color: var( - --highcontrast-textfield-border-color-keyboard-focus, - var( - --mod-textfield-border-color-keyboard-focus, - var(--spectrum-textfield-border-color-keyboard-focus) - ) - ); - outline: var( - --mod-textfield-focus-indicator-width, - var(--spectrum-textfield-focus-indicator-width) - ) - solid; - outline-color: var( - --highcontrast-textfield-focus-indicator-color, - var( - --mod-textfield-focus-indicator-color, - var(--spectrum-textfield-focus-indicator-color) - ) - ); - outline-offset: var( - --mod-textfield-focus-indicator-gap, - var(--spectrum-textfield-focus-indicator-gap) - ); + border-color: var( + --highcontrast-textfield-border-color-keyboard-focus, + var( + --mod-textfield-border-color-keyboard-focus, + var(--spectrum-textfield-border-color-keyboard-focus) + ) + ); + outline: var( + --mod-textfield-focus-indicator-width, + var(--spectrum-textfield-focus-indicator-width) + ) + solid; + outline-color: var( + --highcontrast-textfield-focus-indicator-color, + var( + --mod-textfield-focus-indicator-color, + var(--spectrum-textfield-focus-indicator-color) + ) + ); + outline-offset: var( + --mod-textfield-focus-indicator-gap, + var(--spectrum-textfield-focus-indicator-gap) + ); } :host([focused]) .input, :host([focused]) .input::placeholder { - color: var( - --highcontrast-textfield-text-color-keyboard-focus, - var( - --mod-textfield-text-color-keyboard-focus, - var(--spectrum-textfield-text-color-keyboard-focus) - ) - ); + color: var( + --highcontrast-textfield-text-color-keyboard-focus, + var( + --mod-textfield-text-color-keyboard-focus, + var(--spectrum-textfield-text-color-keyboard-focus) + ) + ); } :host([valid]) .input { - color: var( - --highcontrast-textfield-text-color-valid, - var( - --mod-textfield-text-color-valid, - var(--spectrum-textfield-text-color-valid) - ) - ); - padding-inline-end: calc( - var( - --mod-textfield-icon-spacing-inline-start-valid, - var(--spectrum-textfield-icon-spacing-inline-start-valid) - ) + - var( - --mod-textfield-icon-size-valid, - var(--spectrum-textfield-icon-size-valid) - ) + - var( - --mod-textfield-icon-spacing-inline-end-valid, - var(--spectrum-textfield-icon-spacing-inline-end-valid) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); + color: var( + --highcontrast-textfield-text-color-valid, + var( + --mod-textfield-text-color-valid, + var(--spectrum-textfield-text-color-valid) + ) + ); + padding-inline-end: calc( + var( + --mod-textfield-icon-spacing-inline-start-valid, + var(--spectrum-textfield-icon-spacing-inline-start-valid) + ) + + var( + --mod-textfield-icon-size-valid, + var(--spectrum-textfield-icon-size-valid) + ) + + var( + --mod-textfield-icon-spacing-inline-end-valid, + var(--spectrum-textfield-icon-spacing-inline-end-valid) + ) - + var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) + ); } :host([invalid]) .input { - color: var( - --highcontrast-textfield-text-color-invalid, - var( - --mod-textfield-text-color-invalid, - var(--spectrum-textfield-text-color-invalid) - ) - ); - border-color: var( - --highcontrast-textfield-border-color-invalid-default, - var( - --mod-textfield-border-color-invalid-default, - var(--spectrum-textfield-border-color-invalid-default) - ) - ); - padding-inline-end: calc( - var( - --mod-textfield-icon-spacing-inline-start-invalid, - var(--spectrum-textfield-icon-spacing-inline-start-invalid) - ) + - var( - --mod-textfield-icon-size-invalid, - var(--spectrum-textfield-icon-size-invalid) - ) + - var( - --mod-textfield-icon-spacing-inline-end-invalid, - var(--spectrum-textfield-icon-spacing-inline-end-invalid) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); + color: var( + --highcontrast-textfield-text-color-invalid, + var( + --mod-textfield-text-color-invalid, + var(--spectrum-textfield-text-color-invalid) + ) + ); + border-color: var( + --highcontrast-textfield-border-color-invalid-default, + var( + --mod-textfield-border-color-invalid-default, + var(--spectrum-textfield-border-color-invalid-default) + ) + ); + padding-inline-end: calc( + var( + --mod-textfield-icon-spacing-inline-start-invalid, + var(--spectrum-textfield-icon-spacing-inline-start-invalid) + ) + + var( + --mod-textfield-icon-size-invalid, + var(--spectrum-textfield-icon-size-invalid) + ) + + var( + --mod-textfield-icon-spacing-inline-end-invalid, + var(--spectrum-textfield-icon-spacing-inline-end-invalid) + ) - + var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)) + ); } :host([invalid]) .input:focus, :host([invalid][focused]) .input, :host([invalid]:focus) .input { - border-color: var( - --highcontrast-textfield-border-color-invalid-focus, - var( - --mod-textfield-border-color-invalid-focus, - var(--spectrum-textfield-border-color-invalid-focus) - ) - ); + border-color: var( + --highcontrast-textfield-border-color-invalid-focus, + var( + --mod-textfield-border-color-invalid-focus, + var(--spectrum-textfield-border-color-invalid-focus) + ) + ); } :host([invalid]) .input:focus-visible, :host([invalid][focused]) .input { - border-color: var( - --highcontrast-textfield-border-color-invalid-keyboard-focus, - var( - --mod-textfield-border-color-invalid-keyboard-focus, - var(--spectrum-textfield-border-color-invalid-keyboard-focus) - ) - ); + border-color: var( + --highcontrast-textfield-border-color-invalid-keyboard-focus, + var( + --mod-textfield-border-color-invalid-keyboard-focus, + var(--spectrum-textfield-border-color-invalid-keyboard-focus) + ) + ); } .input:disabled, :host([disabled]) #textfield .input { - background-color: var( - --mod-textfield-background-color-disabled, - var(--spectrum-textfield-background-color-disabled) - ); - resize: none; - opacity: 1; - border-color: #0000; + background-color: var( + --mod-textfield-background-color-disabled, + var(--spectrum-textfield-background-color-disabled) + ); + resize: none; + opacity: 1; + border-color: #0000; } .input:disabled, .input:disabled::placeholder, :host([disabled]) #textfield .input, :host([disabled]) #textfield .input::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); + color: var( + --highcontrast-textfield-text-color-disabled, + var( + --mod-textfield-text-color-disabled, + var(--spectrum-textfield-text-color-disabled) + ) + ); } :host([quiet]) .input { - padding-block-start: var( - --mod-textfield-spacing-block-start, - var(--spectrum-textfield-spacing-block-start) - ); - padding-inline: var( - --mod-textfield-spacing-inline-quiet, - var(--spectrum-textfield-spacing-inline-quiet) - ); - background-color: initial; - resize: none; - border-block-start-width: 0; - border-inline-width: 0; - border-radius: 0; - outline: none; - margin-block-end: var( - --mod-textfield-spacing-block-quiet, - var(--spectrum-textfield-spacing-block-quiet) - ); - overflow-y: hidden; + padding-block-start: var( + --mod-textfield-spacing-block-start, + var(--spectrum-textfield-spacing-block-start) + ); + padding-inline: var( + --mod-textfield-spacing-inline-quiet, + var(--spectrum-textfield-spacing-inline-quiet) + ); + background-color: initial; + resize: none; + border-block-start-width: 0; + border-inline-width: 0; + border-radius: 0; + outline: none; + margin-block-end: var( + --mod-textfield-spacing-block-quiet, + var(--spectrum-textfield-spacing-block-quiet) + ); + overflow-y: hidden; } :host([quiet][disabled]) .input, .input:disabled { - background-color: initial; - border-color: var( - --mod-textfield-border-color-disabled, - var(--spectrum-textfield-border-color-disabled) - ); + background-color: initial; + border-color: var( + --mod-textfield-border-color-disabled, + var(--spectrum-textfield-border-color-disabled) + ); } :host([quiet][disabled]) .input, :host([quiet][disabled]) .input::placeholder, .input:disabled, .input:disabled::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); + color: var( + --highcontrast-textfield-text-color-disabled, + var( + --mod-textfield-text-color-disabled, + var(--spectrum-textfield-text-color-disabled) + ) + ); } .input:read-only, :host([readonly]) #textfield .input { - background-color: initial; - color: var( - --highcontrast-textfield-text-color-readonly, - var( - --mod-textfield-text-color-readonly, - var(--spectrum-textfield-text-color-readonly) - ) - ); - border-color: #0000; - outline: none; + background-color: initial; + color: var( + --highcontrast-textfield-text-color-readonly, + var( + --mod-textfield-text-color-readonly, + var(--spectrum-textfield-text-color-readonly) + ) + ); + border-color: #0000; + outline: none; } .input:read-only::placeholder, :host([readonly]) #textfield .input::placeholder { - color: var( - --highcontrast-textfield-text-color-readonly, - var( - --mod-textfield-text-color-readonly, - var(--spectrum-textfield-text-color-readonly) - ) - ); - background-color: initial; + color: var( + --highcontrast-textfield-text-color-readonly, + var( + --mod-textfield-text-color-readonly, + var(--spectrum-textfield-text-color-readonly) + ) + ); + background-color: initial; } @media (hover: hover) { - .input:hover, - #textfield:hover .input { - border-color: var( - --highcontrast-textfield-border-color-hover, - var( - --mod-textfield-border-color-hover, - var(--spectrum-textfield-border-color-hover) - ) - ); - } - - .input:hover, - .input:hover::placeholder, - #textfield:hover .input, - #textfield:hover .input::placeholder { - color: var( - --highcontrast-textfield-text-color-hover, - var( - --mod-textfield-text-color-hover, - var(--spectrum-textfield-text-color-hover) - ) - ); - } - - :host([focused]) .input:hover, - .input:focus:hover { - border-color: var( - --highcontrast-textfield-border-color-focus-hover, - var( - --mod-textfield-border-color-focus-hover, - var(--spectrum-textfield-border-color-focus-hover) - ) - ); - } - - :host([focused]) .input:hover, - :host([focused]) .input:hover::placeholder, - .input:focus:hover, - .input:focus:hover::placeholder { - color: var( - --highcontrast-textfield-text-color-focus-hover, - var( - --mod-textfield-text-color-focus-hover, - var(--spectrum-textfield-text-color-focus-hover) - ) - ); - } - - :host([invalid]) .input:hover:not(.is-disabled), - :host([invalid]:hover):not(.is-disabled) .input { - border-color: var( - --highcontrast-textfield-border-color-invalid-hover, - var( - --mod-textfield-border-color-invalid-hover, - var(--spectrum-textfield-border-color-invalid-hover) - ) - ); - } - - :host([invalid]) .input:focus:hover, - :host([invalid][focused]) .input:hover, - :host([invalid]:focus) .input:hover { - border-color: var( - --highcontrast-textfield-border-color-invalid-focus-hover, - var( - --mod-textfield-border-color-invalid-focus-hover, - var(--spectrum-textfield-border-color-invalid-focus-hover) - ) - ); - } - - :host([disabled]) #textfield:hover .input { - background-color: var( - --mod-textfield-background-color-disabled, - var(--spectrum-textfield-background-color-disabled) - ); - resize: none; - opacity: 1; - border-color: #0000; - } - - :host([quiet][disabled]:hover) .input, - :host([disabled]) #textfield:hover .input, - :host([disabled]) #textfield:hover .input::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); - } - - :host([quiet][disabled]:hover) .input { - background-color: initial; - border-color: var( - --mod-textfield-border-color-disabled, - var(--spectrum-textfield-border-color-disabled) - ); - } - - :host([quiet][disabled]:hover) .input::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); - } - - :host([readonly]) #textfield:hover .input { - border-color: #0000; - outline: none; - } - - :host([readonly]) #textfield:hover .input, - :host([readonly]) #textfield:hover .input::placeholder { - background-color: initial; - color: var( - --highcontrast-textfield-text-color-readonly, - var( - --mod-textfield-text-color-readonly, - var(--spectrum-textfield-text-color-readonly) - ) - ); - } + .input:hover, + #textfield:hover .input { + border-color: var( + --highcontrast-textfield-border-color-hover, + var( + --mod-textfield-border-color-hover, + var(--spectrum-textfield-border-color-hover) + ) + ); + } + + .input:hover, + .input:hover::placeholder, + #textfield:hover .input, + #textfield:hover .input::placeholder { + color: var( + --highcontrast-textfield-text-color-hover, + var( + --mod-textfield-text-color-hover, + var(--spectrum-textfield-text-color-hover) + ) + ); + } + + :host([focused]) .input:hover, + .input:focus:hover { + border-color: var( + --highcontrast-textfield-border-color-focus-hover, + var( + --mod-textfield-border-color-focus-hover, + var(--spectrum-textfield-border-color-focus-hover) + ) + ); + } + + :host([focused]) .input:hover, + :host([focused]) .input:hover::placeholder, + .input:focus:hover, + .input:focus:hover::placeholder { + color: var( + --highcontrast-textfield-text-color-focus-hover, + var( + --mod-textfield-text-color-focus-hover, + var(--spectrum-textfield-text-color-focus-hover) + ) + ); + } + + :host([invalid]) .input:hover:not(.is-disabled), + :host([invalid]:hover):not(.is-disabled) .input { + border-color: var( + --highcontrast-textfield-border-color-invalid-hover, + var( + --mod-textfield-border-color-invalid-hover, + var(--spectrum-textfield-border-color-invalid-hover) + ) + ); + } + + :host([invalid]) .input:focus:hover, + :host([invalid][focused]) .input:hover, + :host([invalid]:focus) .input:hover { + border-color: var( + --highcontrast-textfield-border-color-invalid-focus-hover, + var( + --mod-textfield-border-color-invalid-focus-hover, + var(--spectrum-textfield-border-color-invalid-focus-hover) + ) + ); + } + + :host([disabled]) #textfield:hover .input { + background-color: var( + --mod-textfield-background-color-disabled, + var(--spectrum-textfield-background-color-disabled) + ); + resize: none; + opacity: 1; + border-color: #0000; + } + + :host([quiet][disabled]:hover) .input, + :host([disabled]) #textfield:hover .input, + :host([disabled]) #textfield:hover .input::placeholder { + color: var( + --highcontrast-textfield-text-color-disabled, + var( + --mod-textfield-text-color-disabled, + var(--spectrum-textfield-text-color-disabled) + ) + ); + } + + :host([quiet][disabled]:hover) .input { + background-color: initial; + border-color: var( + --mod-textfield-border-color-disabled, + var(--spectrum-textfield-border-color-disabled) + ); + } + + :host([quiet][disabled]:hover) .input::placeholder { + color: var( + --highcontrast-textfield-text-color-disabled, + var( + --mod-textfield-text-color-disabled, + var(--spectrum-textfield-text-color-disabled) + ) + ); + } + + :host([readonly]) #textfield:hover .input { + border-color: #0000; + outline: none; + } + + :host([readonly]) #textfield:hover .input, + :host([readonly]) #textfield:hover .input::placeholder { + background-color: initial; + color: var( + --highcontrast-textfield-text-color-readonly, + var( + --mod-textfield-text-color-readonly, + var(--spectrum-textfield-text-color-readonly) + ) + ); + } } .spectrum-Textfield--sideLabel { - grid-template-rows: auto auto; - grid-template-columns: auto auto auto; + grid-template-rows: auto auto; + grid-template-columns: auto auto auto; } .spectrum-Textfield--sideLabel:after { - grid-area: 1 / 2 / span 1 / span 1; + grid-area: 1 / 2 / span 1 / span 1; } .spectrum-Textfield--sideLabel .spectrum-FieldLabel { - grid-area: 1 / 1 / span 2 / span 1; - margin-inline-end: var( - --mod-textfield-label-spacing-inline-side-label, - var(--spectrum-textfield-label-spacing-inline-side-label) - ); + grid-area: 1 / 1 / span 2 / span 1; + margin-inline-end: var( + --mod-textfield-label-spacing-inline-side-label, + var(--spectrum-textfield-label-spacing-inline-side-label) + ); } .spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount { - grid-area: 1 / 3 / auto / span 1; - align-items: flex-start; - margin-block-start: var( - --mod-textfield-character-count-spacing-block-side, - var(--spectrum-textfield-character-count-spacing-block-side) - ); - margin-inline-start: var( - --mod-textfield-character-count-spacing-inline-side, - var(--spectrum-textfield-character-count-spacing-inline-side) - ); + grid-area: 1 / 3 / auto / span 1; + align-items: flex-start; + margin-block-start: var( + --mod-textfield-character-count-spacing-block-side, + var(--spectrum-textfield-character-count-spacing-block-side) + ); + margin-inline-start: var( + --mod-textfield-character-count-spacing-inline-side, + var(--spectrum-textfield-character-count-spacing-inline-side) + ); } .spectrum-Textfield--sideLabel .spectrum-HelpText { - grid-area: 2 / 2 / auto / span 1; + grid-area: 2 / 2 / auto / span 1; } .spectrum-Textfield--sideLabel .input, .spectrum-Textfield--sideLabel .icon { - grid-area: 1 / 2 / span 1 / span 1; + grid-area: 1 / 2 / span 1 / span 1; } :host([multiline]) { - --spectrum-textfield-input-line-height: normal; + --spectrum-textfield-input-line-height: normal; } :host([multiline]) .input { - min-inline-size: var( - --mod-text-area-min-inline-size, - var(--spectrum-text-area-min-inline-size) - ); - min-block-size: var( - --mod-text-area-min-block-size, - var(--spectrum-text-area-min-block-size) - ); - resize: inherit; + min-inline-size: var( + --mod-text-area-min-inline-size, + var(--spectrum-text-area-min-inline-size) + ); + min-block-size: var( + --mod-text-area-min-block-size, + var(--spectrum-text-area-min-block-size) + ); + resize: inherit; } :host([multiline][grows]) .input { - grid-row: 2; + grid-row: 2; } :host([multiline][grows]) .spectrum-Textfield--sideLabel .input { - grid-row: 1; + grid-row: 1; } :host([multiline][quiet]) .input { - min-block-size: var( - --mod-text-area-min-block-size-quiet, - var(--spectrum-text-area-min-block-size-quiet) - ); - resize: none; - overflow-y: hidden; + min-block-size: var( + --mod-text-area-min-block-size-quiet, + var(--spectrum-text-area-min-block-size-quiet) + ); + resize: none; + overflow-y: hidden; } @media (forced-colors: active) { - :host { - --highcontrast-textfield-border-color-hover: Highlight; - --highcontrast-textfield-border-color-focus: Highlight; - --highcontrast-textfield-border-color-keyboard-focus: CanvasText; - --highcontrast-textfield-focus-indicator-color: Highlight; - --highcontrast-textfield-border-color-invalid-default: Highlight; - --highcontrast-textfield-border-color-invalid-hover: Highlight; - --highcontrast-textfield-border-color-invalid-focus: Highlight; - --highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight; - --highcontrast-textfield-text-color-valid: CanvasText; - --highcontrast-textfield-text-color-invalid: CanvasText; - } - - #textfield .input { - --highcontrast-textfield-text-color-default: CanvasText; - --highcontrast-textfield-text-color-hover: CanvasText; - --highcontrast-textfield-text-color-keyboard-focus: CanvasText; - --highcontrast-textfield-text-color-disabled: GrayText; - --highcontrast-textfield-text-color-readonly: CanvasText; - } - - #textfield .input::placeholder { - --highcontrast-textfield-text-color-default: GrayText; - --highcontrast-textfield-text-color-hover: GrayText; - --highcontrast-textfield-text-color-keyboard-focus: GrayText; - --highcontrast-textfield-text-color-disabled: GrayText; - --highcontrast-textfield-text-color-readonly: CanvasText; - } + :host { + --highcontrast-textfield-border-color-hover: Highlight; + --highcontrast-textfield-border-color-focus: Highlight; + --highcontrast-textfield-border-color-keyboard-focus: CanvasText; + --highcontrast-textfield-focus-indicator-color: Highlight; + --highcontrast-textfield-border-color-invalid-default: Highlight; + --highcontrast-textfield-border-color-invalid-hover: Highlight; + --highcontrast-textfield-border-color-invalid-focus: Highlight; + --highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight; + --highcontrast-textfield-text-color-valid: CanvasText; + --highcontrast-textfield-text-color-invalid: CanvasText; + } + + #textfield .input { + --highcontrast-textfield-text-color-default: CanvasText; + --highcontrast-textfield-text-color-hover: CanvasText; + --highcontrast-textfield-text-color-keyboard-focus: CanvasText; + --highcontrast-textfield-text-color-disabled: GrayText; + --highcontrast-textfield-text-color-readonly: CanvasText; + } + + #textfield .input::placeholder { + --highcontrast-textfield-text-color-default: GrayText; + --highcontrast-textfield-text-color-hover: GrayText; + --highcontrast-textfield-text-color-keyboard-focus: GrayText; + --highcontrast-textfield-text-color-disabled: GrayText; + --highcontrast-textfield-text-color-readonly: CanvasText; + } } diff --git a/packages/textfield/src/textfield-overrides.css b/packages/textfield/src/textfield-overrides.css index 33537fecb1..3a05dc193f 100644 --- a/packages/textfield/src/textfield-overrides.css +++ b/packages/textfield/src/textfield-overrides.css @@ -12,404 +12,402 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-textfield-border-color: var(--system-textfield-border-color); - --spectrum-textfield-border-color-hover: var( - --system-textfield-border-color-hover - ); - --spectrum-textfield-border-color-focus: var( - --system-textfield-border-color-focus - ); - --spectrum-textfield-border-color-focus-hover: var( - --system-textfield-border-color-focus-hover - ); - --spectrum-textfield-border-color-keyboard-focus: var( - --system-textfield-border-color-keyboard-focus - ); - --spectrum-textfield-border-width: var(--system-textfield-border-width); - --spectrum-texfield-animation-duration: var( - --system-textfield-texfield-animation-duration - ); - --spectrum-textfield-width: var(--system-textfield-width); - --spectrum-textfield-min-width: var(--system-textfield-min-width); - --spectrum-textfield-corner-radius: var(--system-textfield-corner-radius); - --spectrum-textfield-spacing-inline-quiet: var( - --system-textfield-spacing-inline-quiet - ); - --spectrum-textfield-spacing-block-start: var( - --system-textfield-spacing-block-start - ); - --spectrum-textfield-spacing-block-end: var( - --system-textfield-spacing-block-end - ); - --spectrum-textfield-spacing-block-quiet: var( - --system-textfield-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-block: var( - --system-textfield-label-spacing-block - ); - --spectrum-textfield-helptext-spacing-block: var( - --system-textfield-helptext-spacing-block - ); - --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var( - --system-textfield-icon-spacing-inline-end-quiet-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var( - --system-textfield-icon-spacing-inline-end-quiet-valid - ); - --spectrum-textfield-font-family: var(--system-textfield-font-family); - --spectrum-textfield-font-weight: var(--system-textfield-font-weight); - --spectrum-textfield-character-count-font-family: var( - --system-textfield-character-count-font-family - ); - --spectrum-textfield-character-count-font-weight: var( - --system-textfield-character-count-font-weight - ); - --spectrum-textfield-character-count-spacing-inline: var( - --system-textfield-character-count-spacing-inline - ); - --spectrum-textfield-character-count-spacing-inline-side: var( - --system-textfield-character-count-spacing-inline-side - ); - --spectrum-textfield-focus-indicator-width: var( - --system-textfield-focus-indicator-width - ); - --spectrum-textfield-focus-indicator-gap: var( - --system-textfield-focus-indicator-gap - ); - --spectrum-textfield-background-color: var( - --system-textfield-background-color - ); - --spectrum-textfield-text-color-default: var( - --system-textfield-text-color-default - ); - --spectrum-textfield-text-color-hover: var( - --system-textfield-text-color-hover - ); - --spectrum-textfield-text-color-focus: var( - --system-textfield-text-color-focus - ); - --spectrum-textfield-text-color-focus-hover: var( - --system-textfield-text-color-focus-hover - ); - --spectrum-textfield-text-color-keyboard-focus: var( - --system-textfield-text-color-keyboard-focus - ); - --spectrum-textfield-text-color-readonly: var( - --system-textfield-text-color-readonly - ); - --spectrum-textfield-background-color-disabled: var( - --system-textfield-background-color-disabled - ); - --spectrum-textfield-border-color-disabled: var( - --system-textfield-border-color-disabled - ); - --spectrum-textfield-text-color-disabled: var( - --system-textfield-text-color-disabled - ); - --spectrum-textfield-border-color-invalid-default: var( - --system-textfield-border-color-invalid-default - ); - --spectrum-textfield-border-color-invalid-hover: var( - --system-textfield-border-color-invalid-hover - ); - --spectrum-textfield-border-color-invalid-focus: var( - --system-textfield-border-color-invalid-focus - ); - --spectrum-textfield-border-color-invalid-focus-hover: var( - --system-textfield-border-color-invalid-focus-hover - ); - --spectrum-textfield-border-color-invalid-keyboard-focus: var( - --system-textfield-border-color-invalid-keyboard-focus - ); - --spectrum-textfield-icon-color-invalid: var( - --system-textfield-icon-color-invalid - ); - --spectrum-textfield-text-color-invalid: var( - --system-textfield-text-color-invalid - ); - --spectrum-textfield-text-color-valid: var( - --system-textfield-text-color-valid - ); - --spectrum-textfield-icon-color-valid: var( - --system-textfield-icon-color-valid - ); - --spectrum-textfield-focus-indicator-color: var( - --system-textfield-focus-indicator-color - ); - --spectrum-text-area-min-inline-size: var( - --system-textfield-text-area-min-inline-size - ); - --spectrum-text-area-min-block-size: var( - --system-textfield-text-area-min-block-size - ); - --spectrum-textfield-height: var(--system-textfield-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var(--system-textfield-spacing-inline); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-text-area-min-block-size-quiet - ); + --spectrum-textfield-border-color: var(--system-textfield-border-color); + --spectrum-textfield-border-color-hover: var( + --system-textfield-border-color-hover + ); + --spectrum-textfield-border-color-focus: var( + --system-textfield-border-color-focus + ); + --spectrum-textfield-border-color-focus-hover: var( + --system-textfield-border-color-focus-hover + ); + --spectrum-textfield-border-color-keyboard-focus: var( + --system-textfield-border-color-keyboard-focus + ); + --spectrum-textfield-border-width: var(--system-textfield-border-width); + --spectrum-texfield-animation-duration: var( + --system-textfield-texfield-animation-duration + ); + --spectrum-textfield-width: var(--system-textfield-width); + --spectrum-textfield-min-width: var(--system-textfield-min-width); + --spectrum-textfield-corner-radius: var(--system-textfield-corner-radius); + --spectrum-textfield-spacing-inline-quiet: var( + --system-textfield-spacing-inline-quiet + ); + --spectrum-textfield-spacing-block-start: var( + --system-textfield-spacing-block-start + ); + --spectrum-textfield-spacing-block-end: var( + --system-textfield-spacing-block-end + ); + --spectrum-textfield-spacing-block-quiet: var( + --system-textfield-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-block: var( + --system-textfield-label-spacing-block + ); + --spectrum-textfield-helptext-spacing-block: var( + --system-textfield-helptext-spacing-block + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var( + --system-textfield-icon-spacing-inline-end-quiet-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var( + --system-textfield-icon-spacing-inline-end-quiet-valid + ); + --spectrum-textfield-font-family: var(--system-textfield-font-family); + --spectrum-textfield-font-weight: var(--system-textfield-font-weight); + --spectrum-textfield-character-count-font-family: var( + --system-textfield-character-count-font-family + ); + --spectrum-textfield-character-count-font-weight: var( + --system-textfield-character-count-font-weight + ); + --spectrum-textfield-character-count-spacing-inline: var( + --system-textfield-character-count-spacing-inline + ); + --spectrum-textfield-character-count-spacing-inline-side: var( + --system-textfield-character-count-spacing-inline-side + ); + --spectrum-textfield-focus-indicator-width: var( + --system-textfield-focus-indicator-width + ); + --spectrum-textfield-focus-indicator-gap: var( + --system-textfield-focus-indicator-gap + ); + --spectrum-textfield-background-color: var( + --system-textfield-background-color + ); + --spectrum-textfield-text-color-default: var( + --system-textfield-text-color-default + ); + --spectrum-textfield-text-color-hover: var( + --system-textfield-text-color-hover + ); + --spectrum-textfield-text-color-focus: var( + --system-textfield-text-color-focus + ); + --spectrum-textfield-text-color-focus-hover: var( + --system-textfield-text-color-focus-hover + ); + --spectrum-textfield-text-color-keyboard-focus: var( + --system-textfield-text-color-keyboard-focus + ); + --spectrum-textfield-text-color-readonly: var( + --system-textfield-text-color-readonly + ); + --spectrum-textfield-background-color-disabled: var( + --system-textfield-background-color-disabled + ); + --spectrum-textfield-border-color-disabled: var( + --system-textfield-border-color-disabled + ); + --spectrum-textfield-text-color-disabled: var( + --system-textfield-text-color-disabled + ); + --spectrum-textfield-border-color-invalid-default: var( + --system-textfield-border-color-invalid-default + ); + --spectrum-textfield-border-color-invalid-hover: var( + --system-textfield-border-color-invalid-hover + ); + --spectrum-textfield-border-color-invalid-focus: var( + --system-textfield-border-color-invalid-focus + ); + --spectrum-textfield-border-color-invalid-focus-hover: var( + --system-textfield-border-color-invalid-focus-hover + ); + --spectrum-textfield-border-color-invalid-keyboard-focus: var( + --system-textfield-border-color-invalid-keyboard-focus + ); + --spectrum-textfield-icon-color-invalid: var( + --system-textfield-icon-color-invalid + ); + --spectrum-textfield-text-color-invalid: var( + --system-textfield-text-color-invalid + ); + --spectrum-textfield-text-color-valid: var( + --system-textfield-text-color-valid + ); + --spectrum-textfield-icon-color-valid: var( + --system-textfield-icon-color-valid + ); + --spectrum-textfield-focus-indicator-color: var( + --system-textfield-focus-indicator-color + ); + --spectrum-text-area-min-inline-size: var( + --system-textfield-text-area-min-inline-size + ); + --spectrum-text-area-min-block-size: var( + --system-textfield-text-area-min-block-size + ); + --spectrum-textfield-height: var(--system-textfield-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var(--system-textfield-spacing-inline); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var(--system-textfield-icon-size-valid); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-text-area-min-block-size-quiet + ); } -:host([size='s']) { - --spectrum-textfield-height: var(--system-textfield-size-s-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-s-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-s-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-s-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-s-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-s-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-s-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-s-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-s-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-s-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-s-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-s-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-s-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-s-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-s-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-s-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-s-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-s-text-area-min-block-size-quiet - ); +:host([size="s"]) { + --spectrum-textfield-height: var(--system-textfield-size-s-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-size-s-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-size-s-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-size-s-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var( + --system-textfield-size-s-spacing-inline + ); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-size-s-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var( + --system-textfield-size-s-icon-size-valid + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-size-s-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-size-s-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-size-s-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-size-s-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-size-s-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-size-s-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-size-s-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-size-s-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-size-s-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-size-s-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-size-s-text-area-min-block-size-quiet + ); } :host { - --spectrum-textfield-height: var(--system-textfield-size-m-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-m-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-m-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-m-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-m-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-m-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-m-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-m-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-m-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-m-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-m-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-m-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-m-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-m-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-m-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-m-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-m-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-m-text-area-min-block-size-quiet - ); + --spectrum-textfield-height: var(--system-textfield-size-m-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-size-m-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-size-m-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-size-m-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var( + --system-textfield-size-m-spacing-inline + ); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-size-m-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var( + --system-textfield-size-m-icon-size-valid + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-size-m-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-size-m-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-size-m-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-size-m-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-size-m-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-size-m-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-size-m-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-size-m-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-size-m-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-size-m-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-size-m-text-area-min-block-size-quiet + ); } -:host([size='l']) { - --spectrum-textfield-height: var(--system-textfield-size-l-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-l-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-l-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-l-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-l-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-l-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-l-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-l-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-l-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-l-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-l-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-l-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-l-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-l-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-l-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-l-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-l-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-l-text-area-min-block-size-quiet - ); +:host([size="l"]) { + --spectrum-textfield-height: var(--system-textfield-size-l-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-size-l-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-size-l-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-size-l-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var( + --system-textfield-size-l-spacing-inline + ); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-size-l-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var( + --system-textfield-size-l-icon-size-valid + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-size-l-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-size-l-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-size-l-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-size-l-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-size-l-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-size-l-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-size-l-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-size-l-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-size-l-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-size-l-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-size-l-text-area-min-block-size-quiet + ); } -:host([size='xl']) { - --spectrum-textfield-height: var(--system-textfield-size-xl-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-xl-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-xl-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-xl-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-xl-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-xl-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-xl-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-xl-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-xl-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-xl-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-xl-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-xl-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-xl-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-xl-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-xl-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-xl-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-xl-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-xl-text-area-min-block-size-quiet - ); +:host([size="xl"]) { + --spectrum-textfield-height: var(--system-textfield-size-xl-height); + --spectrum-textfield-label-spacing-block-quiet: var( + --system-textfield-size-xl-label-spacing-block-quiet + ); + --spectrum-textfield-label-spacing-inline-side-label: var( + --system-textfield-size-xl-label-spacing-inline-side-label + ); + --spectrum-textfield-placeholder-font-size: var( + --system-textfield-size-xl-placeholder-font-size + ); + --spectrum-textfield-spacing-inline: var( + --system-textfield-size-xl-spacing-inline + ); + --spectrum-textfield-icon-size-invalid: var( + --system-textfield-size-xl-icon-size-invalid + ); + --spectrum-textfield-icon-size-valid: var( + --system-textfield-size-xl-icon-size-valid + ); + --spectrum-textfield-icon-spacing-inline-end-invalid: var( + --system-textfield-size-xl-icon-spacing-inline-end-invalid + ); + --spectrum-textfield-icon-spacing-inline-end-valid: var( + --system-textfield-size-xl-icon-spacing-inline-end-valid + ); + --spectrum-textfield-icon-spacing-block-invalid: var( + --system-textfield-size-xl-icon-spacing-block-invalid + ); + --spectrum-textfield-icon-spacing-block-valid: var( + --system-textfield-size-xl-icon-spacing-block-valid + ); + --spectrum-textfield-icon-spacing-inline-start-invalid: var( + --system-textfield-size-xl-icon-spacing-inline-start-invalid + ); + --spectrum-textfield-icon-spacing-inline-start-valid: var( + --system-textfield-size-xl-icon-spacing-inline-start-valid + ); + --spectrum-textfield-character-count-font-size: var( + --system-textfield-size-xl-character-count-font-size + ); + --spectrum-textfield-character-count-spacing-block: var( + --system-textfield-size-xl-character-count-spacing-block + ); + --spectrum-textfield-character-count-spacing-block-quiet: var( + --system-textfield-size-xl-character-count-spacing-block-quiet + ); + --spectrum-textfield-character-count-spacing-block-side: var( + --system-textfield-size-xl-character-count-spacing-block-side + ); + --spectrum-text-area-min-block-size-quiet: var( + --system-textfield-size-xl-text-area-min-block-size-quiet + ); } diff --git a/packages/thumbnail/src/spectrum-thumbnail.css b/packages/thumbnail/src/spectrum-thumbnail.css index d26a0f383a..190be69568 100644 --- a/packages/thumbnail/src/spectrum-thumbnail.css +++ b/packages/thumbnail/src/spectrum-thumbnail.css @@ -12,351 +12,348 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); - --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); - --spectrum-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) - ); - --spectrum-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); - --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); - --spectrum-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); - --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --spectrum-thumbnail-border-width-selected: var( - --spectrum-border-width-200 - ); - --spectrum-thumbnail-border-color-selected: var( - --spectrum-accent-color-800 - ); - --spectrum-thumbnail-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --spectrum-thumbnail-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --spectrum-thumbnail-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --spectrum-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); + --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75); + --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); + --spectrum-thumbnail-border-color-rgba: rgba( + var(--spectrum-gray-800-rgb), + var(--spectrum-thumbnail-border-opacity) + ); + --spectrum-thumbnail-layer-border-width-inner: var( + --spectrum-border-width-400 + ); + --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); + --spectrum-thumbnail-layer-border-width-outer: var( + --spectrum-border-width-100 + ); + --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --spectrum-thumbnail-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-thumbnail-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-thumbnail-color-opacity-disabled: var( + --spectrum-thumbnail-opacity-disabled + ); } -:host([size='50']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); +:host([size="50"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); } -:host([size='75']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); +:host([size="75"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); } -:host([size='100']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); +:host([size="100"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); } -:host([size='200']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); +:host([size="200"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); } -:host([size='300']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); +:host([size="300"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); } -:host([size='400']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); +:host([size="400"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); } -:host([size='500']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); +:host([size="500"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); } -:host([size='600']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); +:host([size="600"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); } -:host([size='700']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); +:host([size="700"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); } -:host([size='800']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); +:host([size="800"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); } -:host([size='900']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); +:host([size="900"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); } -:host([size='1000']) { - --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); +:host([size="1000"]) { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); } :host { - inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); - block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); - vertical-align: top; - z-index: 0; - margin: 0; - padding: 0; - display: block; - position: relative; - overflow: hidden; + inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); + block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); + vertical-align: top; + z-index: 0; + margin: 0; + padding: 0; + display: block; + position: relative; + overflow: hidden; } :host, :host:before { - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) + ); } :host:before { - content: ''; - z-index: 2; - inline-size: 100%; - block-size: 100%; - box-shadow: inset 0 0 0 - var( - --mod-thumbnail-border-width, - var(--spectrum-thumbnail-border-width) - ) - var( - --highcontrast-thumbnail-border-color, - var( - --mod-thumbnail-border-color, - var(--spectrum-thumbnail-border-color-rgba) - ) - ); - position: absolute; + content: ""; + z-index: 2; + inline-size: 100%; + block-size: 100%; + box-shadow: inset 0 0 0 + var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) + var( + --highcontrast-thumbnail-border-color, + var( + --mod-thumbnail-border-color, + var(--spectrum-thumbnail-border-color-rgba) + ) + ); + position: absolute; } :host([disabled]) { - opacity: var( - --mod-thumbnail-color-opacity-disabled, - var(--spectrum-thumbnail-color-opacity-disabled) - ); + opacity: var( + --mod-thumbnail-color-opacity-disabled, + var(--spectrum-thumbnail-color-opacity-disabled) + ); } :host([focused]) { - overflow: visible; + overflow: visible; } :host([focused]):after { - content: ''; - border-style: solid; - border-width: var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ); - border-color: var( - --highcontrast-thumbnail-focus-indicator-color, - var( - --mod-thumbnail-focus-indicator-color, - var(--spectrum-thumbnail-focus-indicator-color) - ) - ); - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); - position: absolute; - inset-block-start: calc( - ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) - ) * -1 - ); - inset-block-end: calc( - ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) - ) * -1 - ); - inset-inline-start: calc( - ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) - ) * -1 - ); - inset-inline-end: calc( - ( - var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-thumbnail-focus-indicator-gap) - ) + - var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-thumbnail-focus-indicator-thickness) - ) - ) * -1 - ); + content: ""; + border-style: solid; + border-width: var( + --mod-thumbnail-focus-indicator-thickness, + var(--spectrum-thumbnail-focus-indicator-thickness) + ); + border-color: var( + --highcontrast-thumbnail-focus-indicator-color, + var( + --mod-thumbnail-focus-indicator-color, + var(--spectrum-thumbnail-focus-indicator-color) + ) + ); + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) + ); + position: absolute; + inset-block-start: calc( + ( + var( + --mod-thumbnail-focus-indicator-gap, + var(--spectrum-thumbnail-focus-indicator-gap) + ) + + var( + --mod-thumbnail-focus-indicator-thickness, + var(--spectrum-thumbnail-focus-indicator-thickness) + ) + ) * + -1 + ); + inset-block-end: calc( + ( + var( + --mod-thumbnail-focus-indicator-gap, + var(--spectrum-thumbnail-focus-indicator-gap) + ) + + var( + --mod-thumbnail-focus-indicator-thickness, + var(--spectrum-thumbnail-focus-indicator-thickness) + ) + ) * + -1 + ); + inset-inline-start: calc( + ( + var( + --mod-thumbnail-focus-indicator-gap, + var(--spectrum-thumbnail-focus-indicator-gap) + ) + + var( + --mod-thumbnail-focus-indicator-thickness, + var(--spectrum-thumbnail-focus-indicator-thickness) + ) + ) * + -1 + ); + inset-inline-end: calc( + ( + var( + --mod-thumbnail-focus-indicator-gap, + var(--spectrum-thumbnail-focus-indicator-gap) + ) + + var( + --mod-thumbnail-focus-indicator-thickness, + var(--spectrum-thumbnail-focus-indicator-thickness) + ) + ) * + -1 + ); } :host([focused]) .image-wrapper { - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); - overflow: hidden; + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) + ); + overflow: hidden; } :host([layer]) { - border-style: solid; - border-width: var( - --mod-thumbnail-layer-border-width-outer, - var(--spectrum-thumbnail-layer-border-width-outer) - ); - border-color: var( - --highcontrast-thumbnail-layer-border-color-outer, - var( - --mod-thumbnail-layer-border-color-outer, - var(--spectrum-thumbnail-layer-border-color-outer) - ) - ); - box-sizing: border-box; - justify-content: center; - align-items: center; - display: flex; + border-style: solid; + border-width: var( + --mod-thumbnail-layer-border-width-outer, + var(--spectrum-thumbnail-layer-border-width-outer) + ); + border-color: var( + --highcontrast-thumbnail-layer-border-color-outer, + var( + --mod-thumbnail-layer-border-color-outer, + var(--spectrum-thumbnail-layer-border-color-outer) + ) + ); + box-sizing: border-box; + justify-content: center; + align-items: center; + display: flex; } :host([layer]):before { - content: none; + content: none; } :host([layer][selected]) { - outline-style: solid; - outline-color: var( - --highcontrast-thumbnail-border-color-selected, - var( - --mod-thumbnail-border-color-selected, - var(--spectrum-thumbnail-border-color-selected) - ) - ); - outline-width: var( - --mod-thumbnail-border-width-selected, - var(--spectrum-thumbnail-border-width-selected) - ); - outline-offset: calc( - var( - --mod-thumbnail-border-width-selected, - var(--spectrum-thumbnail-border-width-selected) - ) - - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - ); + outline-style: solid; + outline-color: var( + --highcontrast-thumbnail-border-color-selected, + var( + --mod-thumbnail-border-color-selected, + var(--spectrum-thumbnail-border-color-selected) + ) + ); + outline-width: var( + --mod-thumbnail-border-width-selected, + var(--spectrum-thumbnail-border-width-selected) + ); + outline-offset: calc( + var( + --mod-thumbnail-border-width-selected, + var(--spectrum-thumbnail-border-width-selected) + ) - + var( + --mod-thumbnail-layer-border-width-inner, + var(--spectrum-thumbnail-layer-border-width-inner) + ) + ); } .layer-inner { - inline-size: calc( - var(--spectrum-thumbnail-size) - - ( - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - ) * 2 - ); - block-size: calc( - var(--spectrum-thumbnail-size) - - ( - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - ) * 2 - ); - outline-style: solid; - outline-color: var( - --highcontrast-thumbnail-layer-border-color-inner, - var( - --mod-thumbnail-layer-border-color-inner, - var(--spectrum-thumbnail-layer-border-color-inner) - ) - ); - outline-width: calc( - var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-thumbnail-layer-border-width-inner) - ) - - var( - --mod-thumbnail-layer-border-width-outer, - var(--spectrum-thumbnail-layer-border-width-outer) - ) - ); - justify-content: center; - align-items: center; - display: flex; + inline-size: calc( + var(--spectrum-thumbnail-size) - + ( + var( + --mod-thumbnail-layer-border-width-inner, + var(--spectrum-thumbnail-layer-border-width-inner) + ) + ) * + 2 + ); + block-size: calc( + var(--spectrum-thumbnail-size) - + ( + var( + --mod-thumbnail-layer-border-width-inner, + var(--spectrum-thumbnail-layer-border-width-inner) + ) + ) * + 2 + ); + outline-style: solid; + outline-color: var( + --highcontrast-thumbnail-layer-border-color-inner, + var( + --mod-thumbnail-layer-border-color-inner, + var(--spectrum-thumbnail-layer-border-color-inner) + ) + ); + outline-width: calc( + var( + --mod-thumbnail-layer-border-width-inner, + var(--spectrum-thumbnail-layer-border-width-inner) + ) - + var( + --mod-thumbnail-layer-border-width-outer, + var(--spectrum-thumbnail-layer-border-width-outer) + ) + ); + justify-content: center; + align-items: center; + display: flex; } .image-wrapper { - inline-size: 100%; - block-size: 100%; - justify-content: center; - align-items: center; - display: flex; + inline-size: 100%; + block-size: 100%; + justify-content: center; + align-items: center; + display: flex; } ::slotted(*) { - max-block-size: 100%; - max-inline-size: 100%; - z-index: 1; - position: relative; + max-block-size: 100%; + max-inline-size: 100%; + z-index: 1; + position: relative; } :host([cover]) ::slotted(*) { - block-size: 100%; - inline-size: 100%; - object-fit: cover; - object-position: center; + block-size: 100%; + inline-size: 100%; + object-fit: cover; + object-position: center; } .background { - z-index: 0; - block-size: 100%; - inline-size: 100%; - border-radius: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); - background-position: 50%; - background-size: cover; - position: absolute; - inset-block: 0; - inset-inline: 0; + z-index: 0; + block-size: 100%; + inline-size: 100%; + border-radius: var( + --mod-thumbnail-border-radius, + var(--spectrum-thumbnail-border-radius) + ); + background-position: 50%; + background-size: cover; + position: absolute; + inset-block: 0; + inset-inline: 0; } @media (forced-colors: active) { - :host { - --highcontrast-thumbnail-border-color-selected: Highlight; - --highcontrast-thumbnail-focus-indicator-color: Highlight; - --highcontrast-thumbnail-border-color: CanvasText; - --highcontrast-thumbnail-layer-border-color-inner: Canvas; - --highcontrast-thumbnail-layer-border-color-outer: CanvasText; - forced-color-adjust: none; - } + :host { + --highcontrast-thumbnail-border-color-selected: Highlight; + --highcontrast-thumbnail-focus-indicator-color: Highlight; + --highcontrast-thumbnail-border-color: CanvasText; + --highcontrast-thumbnail-layer-border-color-inner: Canvas; + --highcontrast-thumbnail-layer-border-color-outer: CanvasText; + forced-color-adjust: none; + } } diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css index 06a2738fbe..08e09a9cb6 100644 --- a/packages/toast/src/spectrum-toast.css +++ b/packages/toast/src/spectrum-toast.css @@ -12,256 +12,244 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-toast-border-color: ButtonText; - border: var( - --mod-toast-border-width, - var(--spectrum-toast-border-width) - ) - solid var(--highcontrast-toast-border-color, transparent); - } + :host { + --highcontrast-toast-border-color: ButtonText; + border: var(--mod-toast-border-width, var(--spectrum-toast-border-width)) + solid var(--highcontrast-toast-border-color, transparent); + } } :host { - box-sizing: border-box; - min-block-size: var( - --mod-toast-block-size, - var(--spectrum-toast-block-size) - ); - max-inline-size: var( - --mod-toast-max-inline-size, - var(--spectrum-toast-max-inline-size) - ); - border-radius: var( - --mod-toast-corner-radius, - var(--spectrum-toast-corner-radius) - ); - font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size)); - font-weight: var( - --mod-toast-font-weight, - var(--spectrum-toast-font-weight) - ); - -webkit-font-smoothing: antialiased; - background-color: var( - --highcontrast-toast-background-color-default, - var( - --mod-toast-background-color-default, - var(--spectrum-toast-background-color-default) - ) - ); - color: var( - --highcontrast-toast-background-color-default, - var( - --mod-toast-background-color-default, - var(--spectrum-toast-background-color-default) - ) - ); - overflow-wrap: anywhere; - flex-direction: row; - align-items: stretch; - padding-inline-start: var( - --mod-toast-spacing-start-edge-to-text-and-icon, - var(--spectrum-toast-spacing-start-edge-to-text-and-icon) - ); - display: inline-flex; -} - -:host([variant='negative']) { - background-color: var( - --highcontrast-toast-negative-background-color-default, - var( - --mod-toast-negative-background-color-default, - var(--spectrum-toast-negative-background-color-default) - ) - ); -} - -:host([variant='negative']), -:host([variant='negative']) .closeButton:focus-visible:not(:active) { - color: var( - --highcontrast-toast-negative-background-color-default, - var( - --mod-toast-negative-background-color-default, - var(--spectrum-toast-negative-background-color-default) - ) - ); -} - -:host([variant='info']) { - background-color: var( - --highcontrast-toast-informative-background-color-default, - var( - --mod-toast-informative-background-color-default, - var(--spectrum-toast-informative-background-color-default) - ) - ); -} - -:host([variant='info']), -:host([variant='info']) .closeButton:focus-visible:not(:active) { - color: var( - --highcontrast-toast-informative-background-color-default, - var( - --mod-toast-informative-background-color-default, - var(--spectrum-toast-informative-background-color-default) - ) - ); -} - -:host([variant='positive']) { - background-color: var( - --highcontrast-toast-positive-background-color-default, - var( - --mod-toast-positive-background-color-default, - var(--spectrum-toast-positive-background-color-default) - ) - ); -} - -:host([variant='positive']), -:host([variant='positive']) .closeButton:focus-visible:not(:active) { - color: var( - --highcontrast-toast-positive-background-color-default, - var( - --mod-toast-positive-background-color-default, - var(--spectrum-toast-positive-background-color-default) - ) - ); + box-sizing: border-box; + min-block-size: var(--mod-toast-block-size, var(--spectrum-toast-block-size)); + max-inline-size: var( + --mod-toast-max-inline-size, + var(--spectrum-toast-max-inline-size) + ); + border-radius: var( + --mod-toast-corner-radius, + var(--spectrum-toast-corner-radius) + ); + font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size)); + font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight)); + -webkit-font-smoothing: antialiased; + background-color: var( + --highcontrast-toast-background-color-default, + var( + --mod-toast-background-color-default, + var(--spectrum-toast-background-color-default) + ) + ); + color: var( + --highcontrast-toast-background-color-default, + var( + --mod-toast-background-color-default, + var(--spectrum-toast-background-color-default) + ) + ); + overflow-wrap: anywhere; + flex-direction: row; + align-items: stretch; + padding-inline-start: var( + --mod-toast-spacing-start-edge-to-text-and-icon, + var(--spectrum-toast-spacing-start-edge-to-text-and-icon) + ); + display: inline-flex; +} + +:host([variant="negative"]) { + background-color: var( + --highcontrast-toast-negative-background-color-default, + var( + --mod-toast-negative-background-color-default, + var(--spectrum-toast-negative-background-color-default) + ) + ); +} + +:host([variant="negative"]), +:host([variant="negative"]) .closeButton:focus-visible:not(:active) { + color: var( + --highcontrast-toast-negative-background-color-default, + var( + --mod-toast-negative-background-color-default, + var(--spectrum-toast-negative-background-color-default) + ) + ); +} + +:host([variant="info"]) { + background-color: var( + --highcontrast-toast-informative-background-color-default, + var( + --mod-toast-informative-background-color-default, + var(--spectrum-toast-informative-background-color-default) + ) + ); +} + +:host([variant="info"]), +:host([variant="info"]) .closeButton:focus-visible:not(:active) { + color: var( + --highcontrast-toast-informative-background-color-default, + var( + --mod-toast-informative-background-color-default, + var(--spectrum-toast-informative-background-color-default) + ) + ); +} + +:host([variant="positive"]) { + background-color: var( + --highcontrast-toast-positive-background-color-default, + var( + --mod-toast-positive-background-color-default, + var(--spectrum-toast-positive-background-color-default) + ) + ); +} + +:host([variant="positive"]), +:host([variant="positive"]) .closeButton:focus-visible:not(:active) { + color: var( + --highcontrast-toast-positive-background-color-default, + var( + --mod-toast-positive-background-color-default, + var(--spectrum-toast-positive-background-color-default) + ) + ); } .type { - flex-grow: 0; - flex-shrink: 0; - margin-block-start: var( - --mod-toast-spacing-top-edge-to-icon, - var(--spectrum-toast-spacing-top-edge-to-icon) - ); - margin-inline-start: 0; - margin-inline-end: var( - --mod-toast-spacing-icon-to-text, - var(--spectrum-toast-spacing-icon-to-text) - ); + flex-grow: 0; + flex-shrink: 0; + margin-block-start: var( + --mod-toast-spacing-top-edge-to-icon, + var(--spectrum-toast-spacing-top-edge-to-icon) + ); + margin-inline-start: 0; + margin-inline-end: var( + --mod-toast-spacing-icon-to-text, + var(--spectrum-toast-spacing-icon-to-text) + ); } .content, .type { - color: var( - --highcontrast-toast-text-and-icon-color, - var( - --mod-toast-text-and-icon-color, - var(--spectrum-toast-text-and-icon-color) - ) - ); + color: var( + --highcontrast-toast-text-and-icon-color, + var( + --mod-toast-text-and-icon-color, + var(--spectrum-toast-text-and-icon-color) + ) + ); } .content { - box-sizing: border-box; - line-height: var( - --mod-toast-line-height, - var(--spectrum-toast-line-height) - ); - text-align: start; - flex: auto; - padding-block-start: calc( - var( - --mod-toast-spacing-top-edge-to-text, - var(--spectrum-toast-spacing-top-edge-to-text) - ) - - var( - --mod-toast-spacing-block-start, - var(--spectrum-toast-spacing-block-start) - ) - ); - padding-block-end: calc( - var( - --mod-toast-spacing-bottom-edge-to-text, - var(--spectrum-toast-spacing-bottom-edge-to-text) - ) - - var( - --mod-toast-spacing-block-end, - var(--spectrum-toast-spacing-block-end) - ) - ); - padding-inline-start: 0; - padding-inline-end: var( - --mod-toast-spacing-text-to-action-button-horizontal, - var(--spectrum-toast-spacing-text-to-action-button-horizontal) - ); - display: inline-block; + box-sizing: border-box; + line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height)); + text-align: start; + flex: auto; + padding-block-start: calc( + var( + --mod-toast-spacing-top-edge-to-text, + var(--spectrum-toast-spacing-top-edge-to-text) + ) - + var( + --mod-toast-spacing-block-start, + var(--spectrum-toast-spacing-block-start) + ) + ); + padding-block-end: calc( + var( + --mod-toast-spacing-bottom-edge-to-text, + var(--spectrum-toast-spacing-bottom-edge-to-text) + ) - + var( + --mod-toast-spacing-block-end, + var(--spectrum-toast-spacing-block-end) + ) + ); + padding-inline-start: 0; + padding-inline-end: var( + --mod-toast-spacing-text-to-action-button-horizontal, + var(--spectrum-toast-spacing-text-to-action-button-horizontal) + ); + display: inline-block; } .content:lang(ja), .content:lang(ko), .content:lang(zh) { - line-height: var( - --mod-toast-line-height-cjk, - var(--spectrum-toast-line-height-cjk) - ); + line-height: var( + --mod-toast-line-height-cjk, + var(--spectrum-toast-line-height-cjk) + ); } .buttons { - border-inline-start-color: var( - --mod-toast-divider-color, - var(--spectrum-toast-divider-color) - ); - flex: none; - align-items: flex-start; - margin-block-start: var( - --mod-toast-spacing-top-edge-to-divider, - var(--spectrum-toast-spacing-top-edge-to-divider) - ); - margin-block-end: var( - --mod-toast-spacing-bottom-edge-to-divider, - var(--spectrum-toast-spacing-bottom-edge-to-divider) - ); - padding-inline-end: var( - --mod-toast-spacing-close-button, - var(--spectrum-toast-spacing-close-button) - ); - display: flex; + border-inline-start-color: var( + --mod-toast-divider-color, + var(--spectrum-toast-divider-color) + ); + flex: none; + align-items: flex-start; + margin-block-start: var( + --mod-toast-spacing-top-edge-to-divider, + var(--spectrum-toast-spacing-top-edge-to-divider) + ); + margin-block-end: var( + --mod-toast-spacing-bottom-edge-to-divider, + var(--spectrum-toast-spacing-bottom-edge-to-divider) + ); + padding-inline-end: var( + --mod-toast-spacing-close-button, + var(--spectrum-toast-spacing-close-button) + ); + display: flex; } .buttons .spectrum-CloseButton { - align-self: flex-start; + align-self: flex-start; } .body { - flex-wrap: wrap; - flex: auto; - align-self: center; - align-items: center; - padding-block-start: var( - --mod-toast-spacing-block-start, - var(--spectrum-toast-spacing-block-start) - ); - padding-block-end: var( - --mod-toast-spacing-block-end, - var(--spectrum-toast-spacing-block-end) - ); - display: flex; -} - -.body ::slotted([slot='action']) { - margin-inline-start: auto; - margin-inline-end: var( - --mod-toast-spacing-text-and-action-button-to-divider, - var(--spectrum-toast-spacing-text-and-action-button-to-divider) - ); -} - -.body ::slotted([slot='action']:dir(rtl)), -:host([dir='rtl']) .body ::slotted([slot='action']) { - margin-inline-end: var( - --mod-toast-spacing-text-and-action-button-to-divider, - var(--spectrum-toast-spacing-text-and-action-button-to-divider) - ); + flex-wrap: wrap; + flex: auto; + align-self: center; + align-items: center; + padding-block-start: var( + --mod-toast-spacing-block-start, + var(--spectrum-toast-spacing-block-start) + ); + padding-block-end: var( + --mod-toast-spacing-block-end, + var(--spectrum-toast-spacing-block-end) + ); + display: flex; +} + +.body ::slotted([slot="action"]) { + margin-inline-start: auto; + margin-inline-end: var( + --mod-toast-spacing-text-and-action-button-to-divider, + var(--spectrum-toast-spacing-text-and-action-button-to-divider) + ); +} + +.body ::slotted([slot="action"]:dir(rtl)), +:host([dir="rtl"]) .body ::slotted([slot="action"]) { + margin-inline-end: var( + --mod-toast-spacing-text-and-action-button-to-divider, + var(--spectrum-toast-spacing-text-and-action-button-to-divider) + ); } .body + .buttons { - border-inline-start-style: solid; - border-inline-start-width: 1px; - padding-inline-start: var( - --mod-toast-spacing-close-button, - var(--spectrum-toast-spacing-close-button) - ); + border-inline-start-style: solid; + border-inline-start-width: 1px; + padding-inline-start: var( + --mod-toast-spacing-close-button, + var(--spectrum-toast-spacing-close-button) + ); } diff --git a/packages/toast/src/toast-overrides.css b/packages/toast/src/toast-overrides.css index bfc90e3680..cf018c8ae4 100644 --- a/packages/toast/src/toast-overrides.css +++ b/packages/toast/src/toast-overrides.css @@ -12,62 +12,58 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-toast-background-color-default: var( - --system-toast-background-color-default - ); - --spectrum-toast-font-weight: var(--system-toast-font-weight); - --spectrum-toast-font-size: var(--system-toast-font-size); - --spectrum-toast-corner-radius: var(--system-toast-corner-radius); - --spectrum-toast-block-size: var(--system-toast-block-size); - --spectrum-toast-max-inline-size: var(--system-toast-max-inline-size); - --spectrum-toast-border-width: var(--system-toast-border-width); - --spectrum-toast-line-height: var(--system-toast-line-height); - --spectrum-toast-line-height-cjk: var(--system-toast-line-height-cjk); - --spectrum-toast-spacing-icon-to-text: var( - --system-toast-spacing-icon-to-text - ); - --spectrum-toast-spacing-start-edge-to-text-and-icon: var( - --system-toast-spacing-start-edge-to-text-and-icon - ); - --spectrum-toast-spacing-text-and-action-button-to-divider: var( - --system-toast-spacing-text-and-action-button-to-divider - ); - --spectrum-toast-spacing-top-edge-to-divider: var( - --system-toast-spacing-top-edge-to-divider - ); - --spectrum-toast-spacing-bottom-edge-to-divider: var( - --system-toast-spacing-bottom-edge-to-divider - ); - --spectrum-toast-spacing-top-edge-to-icon: var( - --system-toast-spacing-top-edge-to-icon - ); - --spectrum-toast-spacing-text-to-action-button-horizontal: var( - --system-toast-spacing-text-to-action-button-horizontal - ); - --spectrum-toast-spacing-close-button: var( - --system-toast-spacing-close-button - ); - --spectrum-toast-spacing-block-start: var( - --system-toast-spacing-block-start - ); - --spectrum-toast-spacing-block-end: var(--system-toast-spacing-block-end); - --spectrum-toast-spacing-top-edge-to-text: var( - --system-toast-spacing-top-edge-to-text - ); - --spectrum-toast-spacing-bottom-edge-to-text: var( - --system-toast-spacing-bottom-edge-to-text - ); - --spectrum-toast-negative-background-color-default: var( - --system-toast-negative-background-color-default - ); - --spectrum-toast-positive-background-color-default: var( - --system-toast-positive-background-color-default - ); - --spectrum-toast-informative-background-color-default: var( - --system-toast-informative-background-color-default - ); - --spectrum-toast-text-and-icon-color: var( - --system-toast-text-and-icon-color - ); - --spectrum-toast-divider-color: var(--system-toast-divider-color); + --spectrum-toast-background-color-default: var( + --system-toast-background-color-default + ); + --spectrum-toast-font-weight: var(--system-toast-font-weight); + --spectrum-toast-font-size: var(--system-toast-font-size); + --spectrum-toast-corner-radius: var(--system-toast-corner-radius); + --spectrum-toast-block-size: var(--system-toast-block-size); + --spectrum-toast-max-inline-size: var(--system-toast-max-inline-size); + --spectrum-toast-border-width: var(--system-toast-border-width); + --spectrum-toast-line-height: var(--system-toast-line-height); + --spectrum-toast-line-height-cjk: var(--system-toast-line-height-cjk); + --spectrum-toast-spacing-icon-to-text: var( + --system-toast-spacing-icon-to-text + ); + --spectrum-toast-spacing-start-edge-to-text-and-icon: var( + --system-toast-spacing-start-edge-to-text-and-icon + ); + --spectrum-toast-spacing-text-and-action-button-to-divider: var( + --system-toast-spacing-text-and-action-button-to-divider + ); + --spectrum-toast-spacing-top-edge-to-divider: var( + --system-toast-spacing-top-edge-to-divider + ); + --spectrum-toast-spacing-bottom-edge-to-divider: var( + --system-toast-spacing-bottom-edge-to-divider + ); + --spectrum-toast-spacing-top-edge-to-icon: var( + --system-toast-spacing-top-edge-to-icon + ); + --spectrum-toast-spacing-text-to-action-button-horizontal: var( + --system-toast-spacing-text-to-action-button-horizontal + ); + --spectrum-toast-spacing-close-button: var( + --system-toast-spacing-close-button + ); + --spectrum-toast-spacing-block-start: var(--system-toast-spacing-block-start); + --spectrum-toast-spacing-block-end: var(--system-toast-spacing-block-end); + --spectrum-toast-spacing-top-edge-to-text: var( + --system-toast-spacing-top-edge-to-text + ); + --spectrum-toast-spacing-bottom-edge-to-text: var( + --system-toast-spacing-bottom-edge-to-text + ); + --spectrum-toast-negative-background-color-default: var( + --system-toast-negative-background-color-default + ); + --spectrum-toast-positive-background-color-default: var( + --system-toast-positive-background-color-default + ); + --spectrum-toast-informative-background-color-default: var( + --system-toast-informative-background-color-default + ); + --spectrum-toast-text-and-icon-color: var(--system-toast-text-and-icon-color); + --spectrum-toast-divider-color: var(--system-toast-divider-color); } diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css index 5f133656b3..1d8cd7a2bd 100644 --- a/packages/tooltip/src/spectrum-tooltip.css +++ b/packages/tooltip/src/spectrum-tooltip.css @@ -12,265 +12,265 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #tooltip { - pointer-events: none; - visibility: hidden; - opacity: 0; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; + transition: + transform + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + opacity + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + visibility 0s linear + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ); } :host([open]) #tooltip { - pointer-events: auto; - visibility: visible; - opacity: 1; - transition-delay: 0s; - transition-delay: var( - --mod-overlay-animation-duration-opened, - var(--spectrum-animation-duration-0, 0s) - ); + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: 0s; + transition-delay: var( + --mod-overlay-animation-duration-opened, + var(--spectrum-animation-duration-0, 0s) + ); } @media (forced-colors: active) { - #tooltip { - border: 1px solid #0000; - } + #tooltip { + border: 1px solid #0000; + } - #tip { - --highcontrast-tooltip-background-color-default: CanvasText; - --highcontrast-tooltip-background-color-informative: CanvasText; - --highcontrast-tooltip-background-color-positive: CanvasText; - --highcontrast-tooltip-background-color-negative: CanvasText; - forced-color-adjust: none; - } + #tip { + --highcontrast-tooltip-background-color-default: CanvasText; + --highcontrast-tooltip-background-color-informative: CanvasText; + --highcontrast-tooltip-background-color-positive: CanvasText; + --highcontrast-tooltip-background-color-negative: CanvasText; + forced-color-adjust: none; + } } #tooltip { - box-sizing: border-box; - vertical-align: top; - inline-size: auto; - padding-inline: var( - --mod-tooltip-spacing-inline, - var(--spectrum-tooltip-spacing-inline) - ); - border-radius: var( - --mod-tooltip-border-radius, - var(--spectrum-tooltip-border-radius) - ); - block-size: auto; - min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); - max-inline-size: var( - --mod-tooltip-max-inline-size, - var(--spectrum-tooltip-max-inline-size) - ); - background-color: var( - --highcontrast-tooltip-background-color-default, - var( - --mod-tooltip-background-color-default, - var(--spectrum-tooltip-background-color-default) - ) - ); - color: var( - --mod-tooltip-content-color, - var(--spectrum-tooltip-content-color) - ); - font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); - font-weight: var( - --mod-tooltip-font-weight, - var(--spectrum-tooltip-font-weight) - ); - line-height: var( - --mod-tooltip-line-height, - var(--spectrum-tooltip-line-height) - ); - word-break: break-word; - -webkit-font-smoothing: antialiased; - cursor: default; - -webkit-user-select: none; - user-select: none; - flex-direction: row; - align-items: center; - display: inline-flex; - position: relative; + box-sizing: border-box; + vertical-align: top; + inline-size: auto; + padding-inline: var( + --mod-tooltip-spacing-inline, + var(--spectrum-tooltip-spacing-inline) + ); + border-radius: var( + --mod-tooltip-border-radius, + var(--spectrum-tooltip-border-radius) + ); + block-size: auto; + min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); + max-inline-size: var( + --mod-tooltip-max-inline-size, + var(--spectrum-tooltip-max-inline-size) + ); + background-color: var( + --highcontrast-tooltip-background-color-default, + var( + --mod-tooltip-background-color-default, + var(--spectrum-tooltip-background-color-default) + ) + ); + color: var( + --mod-tooltip-content-color, + var(--spectrum-tooltip-content-color) + ); + font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); + font-weight: var( + --mod-tooltip-font-weight, + var(--spectrum-tooltip-font-weight) + ); + line-height: var( + --mod-tooltip-line-height, + var(--spectrum-tooltip-line-height) + ); + word-break: break-word; + -webkit-font-smoothing: antialiased; + cursor: default; + -webkit-user-select: none; + user-select: none; + flex-direction: row; + align-items: center; + display: inline-flex; + position: relative; } :host(:lang(ja)) #tooltip, :host(:lang(ko)) #tooltip, :host(:lang(zh)) #tooltip { - line-height: var( - --mod-tooltip-cjk-line-height, - var(--spectrum-tooltip-cjk-line-height) - ); + line-height: var( + --mod-tooltip-cjk-line-height, + var(--spectrum-tooltip-cjk-line-height) + ); } #tooltip p { - margin: 0; + margin: 0; } -:host([variant='info']) #tooltip { - background-color: var( - --highcontrast-tooltip-background-color-informative, - var( - --mod-tooltip-background-color-informative, - var(--spectrum-tooltip-background-color-informative) - ) - ); +:host([variant="info"]) #tooltip { + background-color: var( + --highcontrast-tooltip-background-color-informative, + var( + --mod-tooltip-background-color-informative, + var(--spectrum-tooltip-background-color-informative) + ) + ); } -:host([variant='positive']) #tooltip { - background-color: var( - --highcontrast-tooltip-background-color-positive, - var( - --mod-tooltip-background-color-positive, - var(--spectrum-tooltip-background-color-positive) - ) - ); +:host([variant="positive"]) #tooltip { + background-color: var( + --highcontrast-tooltip-background-color-positive, + var( + --mod-tooltip-background-color-positive, + var(--spectrum-tooltip-background-color-positive) + ) + ); } -:host([variant='negative']) #tooltip { - background-color: var( - --highcontrast-tooltip-background-color-negative, - var( - --mod-tooltip-background-color-negative, - var(--spectrum-tooltip-background-color-negative) - ) - ); +:host([variant="negative"]) #tooltip { + background-color: var( + --highcontrast-tooltip-background-color-negative, + var( + --mod-tooltip-background-color-negative, + var(--spectrum-tooltip-background-color-negative) + ) + ); } #tip { - block-size: var( - --mod-tooltip-tip-square-size, - var(--spectrum-tooltip-tip-square-size) - ); - inline-size: var( - --mod-tooltip-tip-square-size, - var(--spectrum-tooltip-tip-square-size) - ); - inset-block-start: 100%; - background-color: var( - --highcontrast-tooltip-background-color-default, - var( - --mod-tooltip-background-color-default, - var(--spectrum-tooltip-background-color-default) - ) - ); - clip-path: polygon( - 0 - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ), - 50% - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ), - 100% - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - ); - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -:host([variant='info']) #tooltip #tip { - background-color: var( - --highcontrast-tooltip-background-color-informative, - var( - --mod-tooltip-background-color-informative, - var(--spectrum-tooltip-background-color-informative) - ) - ); -} - -:host([variant='positive']) #tooltip #tip { - background-color: var( - --highcontrast-tooltip-background-color-positive, - var( - --mod-tooltip-background-color-positive, - var(--spectrum-tooltip-background-color-positive) - ) - ); -} - -:host([variant='negative']) #tooltip #tip { - background-color: var( - --highcontrast-tooltip-background-color-negative, - var( - --mod-tooltip-background-color-negative, - var(--spectrum-tooltip-background-color-negative) - ) - ); -} - -:host([placement*='top']) #tooltip #tip, + block-size: var( + --mod-tooltip-tip-square-size, + var(--spectrum-tooltip-tip-square-size) + ); + inline-size: var( + --mod-tooltip-tip-square-size, + var(--spectrum-tooltip-tip-square-size) + ); + inset-block-start: 100%; + background-color: var( + --highcontrast-tooltip-background-color-default, + var( + --mod-tooltip-background-color-default, + var(--spectrum-tooltip-background-color-default) + ) + ); + clip-path: polygon( + 0 + calc( + 0% - + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ), + 50% + var( + --mod-tooltip-tip-height-percentage, + var(--spectrum-tooltip-tip-height-percentage) + ), + 100% + calc( + 0% - + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + ); + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +:host([variant="info"]) #tooltip #tip { + background-color: var( + --highcontrast-tooltip-background-color-informative, + var( + --mod-tooltip-background-color-informative, + var(--spectrum-tooltip-background-color-informative) + ) + ); +} + +:host([variant="positive"]) #tooltip #tip { + background-color: var( + --highcontrast-tooltip-background-color-positive, + var( + --mod-tooltip-background-color-positive, + var(--spectrum-tooltip-background-color-positive) + ) + ); +} + +:host([variant="negative"]) #tooltip #tip { + background-color: var( + --highcontrast-tooltip-background-color-negative, + var( + --mod-tooltip-background-color-negative, + var(--spectrum-tooltip-background-color-negative) + ) + ); +} + +:host([placement*="top"]) #tooltip #tip, .spectrum-Tooltip--top-end #tip, .spectrum-Tooltip--top-left #tip, .spectrum-Tooltip--top-right #tip, .spectrum-Tooltip--top-start #tip { - inset-block-start: 100%; + inset-block-start: 100%; } -:host([placement*='bottom']) #tooltip #tip, +:host([placement*="bottom"]) #tooltip #tip, .spectrum-Tooltip--bottom-end #tip, .spectrum-Tooltip--bottom-left #tip, .spectrum-Tooltip--bottom-right #tip, .spectrum-Tooltip--bottom-start #tip { - clip-path: polygon( - 50% - calc( - 100% - - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - ), - 0 - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ), - 100% - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - ); - inset-block: auto 100%; + clip-path: polygon( + 50% + calc( + 100% - + var( + --mod-tooltip-tip-height-percentage, + var(--spectrum-tooltip-tip-height-percentage) + ) + ), + 0 + calc( + 100% + + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ), + 100% + calc( + 100% + + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + ); + inset-block: auto 100%; } .spectrum-Tooltip--bottom-end #tip, @@ -281,80 +281,80 @@ governing permissions and limitations under the License. .spectrum-Tooltip--top-left #tip, .spectrum-Tooltip--top-right #tip, .spectrum-Tooltip--top-start #tip { - transform: none; + transform: none; } .spectrum-Tooltip--bottom-left #tip, .spectrum-Tooltip--top-left #tip { - inset-inline-start: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); + inset-inline-start: var( + --mod-tooltip-pointer-corner-spacing, + var(--spectrum-tooltip-pointer-corner-spacing) + ); } .spectrum-Tooltip--bottom-right #tip, .spectrum-Tooltip--top-right #tip { - inset-inline: auto - var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); + inset-inline: auto + var( + --mod-tooltip-pointer-corner-spacing, + var(--spectrum-tooltip-pointer-corner-spacing) + ); } .spectrum-Tooltip--bottom-start #tip, .spectrum-Tooltip--top-start #tip { - inset-inline: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ) - auto; + inset-inline: var( + --mod-tooltip-pointer-corner-spacing, + var(--spectrum-tooltip-pointer-corner-spacing) + ) + auto; } .spectrum-Tooltip--bottom-start #tip:dir(rtl), .spectrum-Tooltip--top-start #tip:dir(rtl), -:host([dir='rtl']) .spectrum-Tooltip--bottom-start #tip, -:host([dir='rtl']) .spectrum-Tooltip--top-start #tip { - right: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); - left: auto; +:host([dir="rtl"]) .spectrum-Tooltip--bottom-start #tip, +:host([dir="rtl"]) .spectrum-Tooltip--top-start #tip { + right: var( + --mod-tooltip-pointer-corner-spacing, + var(--spectrum-tooltip-pointer-corner-spacing) + ); + left: auto; } .spectrum-Tooltip--bottom-end #tip, .spectrum-Tooltip--top-end #tip { - inset-inline: auto - var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); + inset-inline: auto + var( + --mod-tooltip-pointer-corner-spacing, + var(--spectrum-tooltip-pointer-corner-spacing) + ); } .spectrum-Tooltip--bottom-end #tip:dir(rtl), .spectrum-Tooltip--top-end #tip:dir(rtl), -:host([dir='rtl']) .spectrum-Tooltip--bottom-end #tip, -:host([dir='rtl']) .spectrum-Tooltip--top-end #tip { - left: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); - right: auto; +:host([dir="rtl"]) .spectrum-Tooltip--bottom-end #tip, +:host([dir="rtl"]) .spectrum-Tooltip--top-end #tip { + left: var( + --mod-tooltip-pointer-corner-spacing, + var(--spectrum-tooltip-pointer-corner-spacing) + ); + right: auto; } .spectrum-Tooltip--end #tip, .spectrum-Tooltip--end-bottom #tip, .spectrum-Tooltip--end-top #tip, -:host([placement*='left']) #tooltip #tip, +:host([placement*="left"]) #tooltip #tip, .spectrum-Tooltip--left-bottom #tip, .spectrum-Tooltip--left-top #tip, -:host([placement*='right']) #tooltip #tip, +:host([placement*="right"]) #tooltip #tip, .spectrum-Tooltip--right-bottom #tip, .spectrum-Tooltip--right-top #tip, .spectrum-Tooltip--start #tip, .spectrum-Tooltip--start-bottom #tip, .spectrum-Tooltip--start-top #tip { - inset-block-start: 50%; - transform: translateY(-50%); + inset-block-start: 50%; + transform: translateY(-50%); } .spectrum-Tooltip--end-bottom #tip, @@ -365,395 +365,384 @@ governing permissions and limitations under the License. .spectrum-Tooltip--right-top #tip, .spectrum-Tooltip--start-bottom #tip, .spectrum-Tooltip--start-top #tip { - inset-block-start: auto; - transform: none; + inset-block-start: auto; + transform: none; } .spectrum-Tooltip--end #tip, .spectrum-Tooltip--end-bottom #tip, .spectrum-Tooltip--end-top #tip, -:host([placement*='right']) #tooltip #tip, +:host([placement*="right"]) #tooltip #tip, .spectrum-Tooltip--right-bottom #tip, .spectrum-Tooltip--right-top #tip { - clip-path: polygon( - calc( - 100% - - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - ) - 50%, - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 100%, - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 0 - ); - inset-inline: auto 100%; -} - -:host([placement*='left']) #tooltip #tip, + clip-path: polygon( + calc( + 100% - + var( + --mod-tooltip-tip-height-percentage, + var(--spectrum-tooltip-tip-height-percentage) + ) + ) + 50%, + calc( + 100% + + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + 100%, + calc( + 100% + + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + 0 + ); + inset-inline: auto 100%; +} + +:host([placement*="left"]) #tooltip #tip, .spectrum-Tooltip--left-bottom #tip, .spectrum-Tooltip--left-top #tip, .spectrum-Tooltip--start #tip, .spectrum-Tooltip--start-bottom #tip, .spectrum-Tooltip--start-top #tip { - clip-path: polygon( - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 0, - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 100%, - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - 50% - ); - inset-inline-start: 100%; + clip-path: polygon( + calc( + 0% - + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + 0, + calc( + 0% - + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + 100%, + var( + --mod-tooltip-tip-height-percentage, + var(--spectrum-tooltip-tip-height-percentage) + ) + 50% + ); + inset-inline-start: 100%; } .spectrum-Tooltip--end-top #tip, .spectrum-Tooltip--left-top #tip, .spectrum-Tooltip--right-top #tip, .spectrum-Tooltip--start-top #tip { - inset-block-start: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); + inset-block-start: var( + --mod-tooltip-pointer-corner-spacing, + var(--spectrum-tooltip-pointer-corner-spacing) + ); } .spectrum-Tooltip--end-bottom #tip, .spectrum-Tooltip--left-bottom #tip, .spectrum-Tooltip--right-bottom #tip, .spectrum-Tooltip--start-bottom #tip { - inset-block-end: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); + inset-block-end: var( + --mod-tooltip-pointer-corner-spacing, + var(--spectrum-tooltip-pointer-corner-spacing) + ); } .spectrum-Tooltip--end #tip:dir(rtl), .spectrum-Tooltip--end-bottom #tip:dir(rtl), .spectrum-Tooltip--end-top #tip:dir(rtl), -:host([placement*='left']) #tooltip #tip:dir(rtl), +:host([placement*="left"]) #tooltip #tip:dir(rtl), .spectrum-Tooltip--left-bottom #tip:dir(rtl), .spectrum-Tooltip--left-top #tip:dir(rtl), -:host([dir='rtl']) .spectrum-Tooltip--end #tip, -:host([dir='rtl']) .spectrum-Tooltip--end-bottom #tip, -:host([dir='rtl']) .spectrum-Tooltip--end-top #tip, -:host([dir='rtl'][placement*='left']) #tooltip #tip, -:host([dir='rtl']) .spectrum-Tooltip--left-bottom #tip, -:host([dir='rtl']) .spectrum-Tooltip--left-top #tip { - clip-path: polygon( - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 0, - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 100%, - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - 50% - ); - left: 100%; - right: auto; -} - -:host([placement*='right']) #tooltip #tip:dir(rtl), +:host([dir="rtl"]) .spectrum-Tooltip--end #tip, +:host([dir="rtl"]) .spectrum-Tooltip--end-bottom #tip, +:host([dir="rtl"]) .spectrum-Tooltip--end-top #tip, +:host([dir="rtl"][placement*="left"]) #tooltip #tip, +:host([dir="rtl"]) .spectrum-Tooltip--left-bottom #tip, +:host([dir="rtl"]) .spectrum-Tooltip--left-top #tip { + clip-path: polygon( + calc( + 0% - + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + 0, + calc( + 0% - + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + 100%, + var( + --mod-tooltip-tip-height-percentage, + var(--spectrum-tooltip-tip-height-percentage) + ) + 50% + ); + left: 100%; + right: auto; +} + +:host([placement*="right"]) #tooltip #tip:dir(rtl), .spectrum-Tooltip--right-bottom #tip:dir(rtl), .spectrum-Tooltip--right-top #tip:dir(rtl), .spectrum-Tooltip--start #tip:dir(rtl), .spectrum-Tooltip--start-bottom #tip:dir(rtl), .spectrum-Tooltip--start-top #tip:dir(rtl), -:host([dir='rtl'][placement*='right']) #tooltip #tip, -:host([dir='rtl']) .spectrum-Tooltip--right-bottom #tip, -:host([dir='rtl']) .spectrum-Tooltip--right-top #tip, -:host([dir='rtl']) .spectrum-Tooltip--start #tip, -:host([dir='rtl']) .spectrum-Tooltip--start-bottom #tip, -:host([dir='rtl']) .spectrum-Tooltip--start-top #tip { - clip-path: polygon( - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - 50%, - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 100%, - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 0 - ); - left: auto; - right: 100%; -} - -::slotted([slot='icon']) { - inline-size: var( - --mod-tooltip-icon-width, - var(--spectrum-tooltip-icon-width) - ); - block-size: var( - --mod-tooltip-icon-height, - var(--spectrum-tooltip-icon-height) - ); - flex-shrink: 0; - align-self: flex-start; - margin-block-start: var( - --mod-tooltip-icon-spacing-block-start, - var(--spectrum-tooltip-icon-spacing-block-start) - ); - margin-inline-start: calc( - var( - --mod-tooltip-icon-spacing-inline-start, - var(--spectrum-tooltip-icon-spacing-inline-start) - ) - - var( - --mod-tooltip-spacing-inline, - var(--spectrum-tooltip-spacing-inline) - ) - ); - margin-inline-end: var( - --mod-tooltip-icon-spacing-inline-end, - var(--spectrum-tooltip-icon-spacing-inline-end) - ); +:host([dir="rtl"][placement*="right"]) #tooltip #tip, +:host([dir="rtl"]) .spectrum-Tooltip--right-bottom #tip, +:host([dir="rtl"]) .spectrum-Tooltip--right-top #tip, +:host([dir="rtl"]) .spectrum-Tooltip--start #tip, +:host([dir="rtl"]) .spectrum-Tooltip--start-bottom #tip, +:host([dir="rtl"]) .spectrum-Tooltip--start-top #tip { + clip-path: polygon( + var( + --mod-tooltip-tip-height-percentage, + var(--spectrum-tooltip-tip-height-percentage) + ) + 50%, + calc( + 100% + + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + 100%, + calc( + 100% + + var( + --mod-tooltip-tip-antialiasing-inset, + var(--spectrum-tooltip-tip-antialiasing-inset) + ) + ) + 0 + ); + left: auto; + right: 100%; +} + +::slotted([slot="icon"]) { + inline-size: var( + --mod-tooltip-icon-width, + var(--spectrum-tooltip-icon-width) + ); + block-size: var( + --mod-tooltip-icon-height, + var(--spectrum-tooltip-icon-height) + ); + flex-shrink: 0; + align-self: flex-start; + margin-block-start: var( + --mod-tooltip-icon-spacing-block-start, + var(--spectrum-tooltip-icon-spacing-block-start) + ); + margin-inline-start: calc( + var( + --mod-tooltip-icon-spacing-inline-start, + var(--spectrum-tooltip-icon-spacing-inline-start) + ) - + var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)) + ); + margin-inline-end: var( + --mod-tooltip-icon-spacing-inline-end, + var(--spectrum-tooltip-icon-spacing-inline-end) + ); } #label { - line-height: var( - --mod-tooltip-line-height, - var(--spectrum-tooltip-line-height) - ); - margin-block-start: var( - --mod-tooltip-spacing-block-start, - var(--spectrum-tooltip-spacing-block-start) - ); - margin-block-end: var( - --mod-tooltip-spacing-block-end, - var(--spectrum-tooltip-spacing-block-end) - ); + line-height: var( + --mod-tooltip-line-height, + var(--spectrum-tooltip-line-height) + ); + margin-block-start: var( + --mod-tooltip-spacing-block-start, + var(--spectrum-tooltip-spacing-block-start) + ); + margin-block-end: var( + --mod-tooltip-spacing-block-end, + var(--spectrum-tooltip-spacing-block-end) + ); } #tooltip, -:host([placement*='top']) #tooltip, +:host([placement*="top"]) #tooltip, .spectrum-Tooltip--top-end, .spectrum-Tooltip--top-left, .spectrum-Tooltip--top-right, .spectrum-Tooltip--top-start { - margin-block-end: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); + margin-block-end: calc( + var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) + ); } :host([open]) .spectrum-Tooltip--top-end, :host([open]) .spectrum-Tooltip--top-left, :host([open]) .spectrum-Tooltip--top-right, :host([open]) .spectrum-Tooltip--top-start, -:host([placement*='top'][open]) #tooltip, +:host([placement*="top"][open]) #tooltip, :host([open]) #tooltip { - transform: translateY( - calc( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) * -1 - ) - ); -} - -:host([placement*='bottom']) #tooltip, + transform: translateY( + calc( + var( + --mod-tooltip-animation-distance, + var(--spectrum-tooltip-animation-distance) + ) * + -1 + ) + ); +} + +:host([placement*="bottom"]) #tooltip, .spectrum-Tooltip--bottom-end, .spectrum-Tooltip--bottom-left, .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start { - margin-block-start: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); + margin-block-start: calc( + var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) + ); } :host([open]) .spectrum-Tooltip--bottom-end, :host([open]) .spectrum-Tooltip--bottom-left, :host([open]) .spectrum-Tooltip--bottom-right, :host([open]) .spectrum-Tooltip--bottom-start, -:host([placement*='bottom'][open]) #tooltip { - transform: translateY( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) - ); +:host([placement*="bottom"][open]) #tooltip { + transform: translateY( + var( + --mod-tooltip-animation-distance, + var(--spectrum-tooltip-animation-distance) + ) + ); } -:host([placement*='right']) #tooltip, +:host([placement*="right"]) #tooltip, .spectrum-Tooltip--right-bottom, .spectrum-Tooltip--right-top { - margin-left: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); + margin-left: calc( + var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) + ); } :host([open]) .spectrum-Tooltip--right-bottom, :host([open]) .spectrum-Tooltip--right-top, -:host([placement*='right'][open]) #tooltip { - transform: translateX( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) - ); +:host([placement*="right"][open]) #tooltip { + transform: translateX( + var( + --mod-tooltip-animation-distance, + var(--spectrum-tooltip-animation-distance) + ) + ); } -:host([placement*='left']) #tooltip, +:host([placement*="left"]) #tooltip, .spectrum-Tooltip--left-bottom, .spectrum-Tooltip--left-top { - margin-right: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); + margin-right: calc( + var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) + ); } :host([open]) .spectrum-Tooltip--left-bottom, :host([open]) .spectrum-Tooltip--left-top, -:host([placement*='left'][open]) #tooltip { - transform: translateX( - calc( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) * -1 - ) - ); +:host([placement*="left"][open]) #tooltip { + transform: translateX( + calc( + var( + --mod-tooltip-animation-distance, + var(--spectrum-tooltip-animation-distance) + ) * + -1 + ) + ); } .spectrum-Tooltip--start, .spectrum-Tooltip--start-bottom, .spectrum-Tooltip--start-top { - margin-inline-end: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); + margin-inline-end: calc( + var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) + ); } :host([open]) .spectrum-Tooltip--start-bottom, :host([open]) .spectrum-Tooltip--start-top, :host([open]) .spectrum-Tooltip--start { - transform: translateX( - calc( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) * -1 - ) - ); + transform: translateX( + calc( + var( + --mod-tooltip-animation-distance, + var(--spectrum-tooltip-animation-distance) + ) * + -1 + ) + ); } :host([open]) .spectrum-Tooltip--start-bottom:dir(rtl), :host([open]) .spectrum-Tooltip--start-top:dir(rtl), :host([open]) .spectrum-Tooltip--start:dir(rtl), -:host([dir='rtl'][open]) .spectrum-Tooltip--start-bottom, -:host([dir='rtl'][open]) .spectrum-Tooltip--start-top, -:host([dir='rtl'][open]) .spectrum-Tooltip--start { - transform: translateX( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) - ); +:host([dir="rtl"][open]) .spectrum-Tooltip--start-bottom, +:host([dir="rtl"][open]) .spectrum-Tooltip--start-top, +:host([dir="rtl"][open]) .spectrum-Tooltip--start { + transform: translateX( + var( + --mod-tooltip-animation-distance, + var(--spectrum-tooltip-animation-distance) + ) + ); } .spectrum-Tooltip--end, .spectrum-Tooltip--end-bottom, .spectrum-Tooltip--end-top { - margin-inline-start: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); + margin-inline-start: calc( + var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) + ); } :host([open]) .spectrum-Tooltip--end-bottom, :host([open]) .spectrum-Tooltip--end-top, :host([open]) .spectrum-Tooltip--end { - transform: translateX( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) - ); + transform: translateX( + var( + --mod-tooltip-animation-distance, + var(--spectrum-tooltip-animation-distance) + ) + ); } :host([open]) .spectrum-Tooltip--end-bottom:dir(rtl), :host([open]) .spectrum-Tooltip--end-top:dir(rtl), :host([open]) .spectrum-Tooltip--end:dir(rtl), -:host([dir='rtl'][open]) .spectrum-Tooltip--end-bottom, -:host([dir='rtl'][open]) .spectrum-Tooltip--end-top, -:host([dir='rtl'][open]) .spectrum-Tooltip--end { - transform: translateX( - calc( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) * -1 - ) - ); +:host([dir="rtl"][open]) .spectrum-Tooltip--end-bottom, +:host([dir="rtl"][open]) .spectrum-Tooltip--end-top, +:host([dir="rtl"][open]) .spectrum-Tooltip--end { + transform: translateX( + calc( + var( + --mod-tooltip-animation-distance, + var(--spectrum-tooltip-animation-distance) + ) * + -1 + ) + ); } diff --git a/packages/tooltip/src/tooltip-overrides.css b/packages/tooltip/src/tooltip-overrides.css index 2b78b654c7..87a5cd9799 100644 --- a/packages/tooltip/src/tooltip-overrides.css +++ b/packages/tooltip/src/tooltip-overrides.css @@ -12,61 +12,59 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var( - --system-tooltip-backgound-color-default-neutral - ); - --spectrum-tooltip-animation-duration: var( - --system-tooltip-animation-duration - ); - --spectrum-tooltip-margin: var(--system-tooltip-margin); - --spectrum-tooltip-height: var(--system-tooltip-height); - --spectrum-tooltip-max-inline-size: var(--system-tooltip-max-inline-size); - --spectrum-tooltip-border-radius: var(--system-tooltip-border-radius); - --spectrum-tooltip-icon-width: var(--system-tooltip-icon-width); - --spectrum-tooltip-icon-height: var(--system-tooltip-icon-height); - --spectrum-tooltip-font-size: var(--system-tooltip-font-size); - --spectrum-tooltip-line-height: var(--system-tooltip-line-height); - --spectrum-tooltip-cjk-line-height: var(--system-tooltip-cjk-line-height); - --spectrum-tooltip-font-weight: var(--system-tooltip-font-weight); - --spectrum-tooltip-spacing-inline: var(--system-tooltip-spacing-inline); - --spectrum-tooltip-spacing-block-start: var( - --system-tooltip-spacing-block-start - ); - --spectrum-tooltip-spacing-block-end: var( - --system-tooltip-spacing-block-end - ); - --spectrum-tooltip-icon-spacing-inline-start: var( - --system-tooltip-icon-spacing-inline-start - ); - --spectrum-tooltip-icon-spacing-inline-end: var( - --system-tooltip-icon-spacing-inline-end - ); - --spectrum-tooltip-icon-spacing-block-start: var( - --system-tooltip-icon-spacing-block-start - ); - --spectrum-tooltip-background-color-informative: var( - --system-tooltip-background-color-informative - ); - --spectrum-tooltip-background-color-positive: var( - --system-tooltip-background-color-positive - ); - --spectrum-tooltip-background-color-negative: var( - --system-tooltip-background-color-negative - ); - --spectrum-tooltip-content-color: var(--system-tooltip-content-color); - --spectrum-tooltip-tip-inline-size: var(--system-tooltip-tip-inline-size); - --spectrum-tooltip-tip-block-size: var(--system-tooltip-tip-block-size); - --spectrum-tooltip-tip-square-size: var(--system-tooltip-tip-square-size); - --spectrum-tooltip-tip-height-percentage: var( - --system-tooltip-tip-height-percentage - ); - --spectrum-tooltip-tip-antialiasing-inset: var( - --system-tooltip-tip-antialiasing-inset - ); - --spectrum-tooltip-pointer-corner-spacing: var( - --system-tooltip-pointer-corner-spacing - ); - --spectrum-tooltip-background-color-default: var( - --system-tooltip-background-color-default - ); + --spectrum-tooltip-backgound-color-default-neutral: var( + --system-tooltip-backgound-color-default-neutral + ); + --spectrum-tooltip-animation-duration: var( + --system-tooltip-animation-duration + ); + --spectrum-tooltip-margin: var(--system-tooltip-margin); + --spectrum-tooltip-height: var(--system-tooltip-height); + --spectrum-tooltip-max-inline-size: var(--system-tooltip-max-inline-size); + --spectrum-tooltip-border-radius: var(--system-tooltip-border-radius); + --spectrum-tooltip-icon-width: var(--system-tooltip-icon-width); + --spectrum-tooltip-icon-height: var(--system-tooltip-icon-height); + --spectrum-tooltip-font-size: var(--system-tooltip-font-size); + --spectrum-tooltip-line-height: var(--system-tooltip-line-height); + --spectrum-tooltip-cjk-line-height: var(--system-tooltip-cjk-line-height); + --spectrum-tooltip-font-weight: var(--system-tooltip-font-weight); + --spectrum-tooltip-spacing-inline: var(--system-tooltip-spacing-inline); + --spectrum-tooltip-spacing-block-start: var( + --system-tooltip-spacing-block-start + ); + --spectrum-tooltip-spacing-block-end: var(--system-tooltip-spacing-block-end); + --spectrum-tooltip-icon-spacing-inline-start: var( + --system-tooltip-icon-spacing-inline-start + ); + --spectrum-tooltip-icon-spacing-inline-end: var( + --system-tooltip-icon-spacing-inline-end + ); + --spectrum-tooltip-icon-spacing-block-start: var( + --system-tooltip-icon-spacing-block-start + ); + --spectrum-tooltip-background-color-informative: var( + --system-tooltip-background-color-informative + ); + --spectrum-tooltip-background-color-positive: var( + --system-tooltip-background-color-positive + ); + --spectrum-tooltip-background-color-negative: var( + --system-tooltip-background-color-negative + ); + --spectrum-tooltip-content-color: var(--system-tooltip-content-color); + --spectrum-tooltip-tip-inline-size: var(--system-tooltip-tip-inline-size); + --spectrum-tooltip-tip-block-size: var(--system-tooltip-tip-block-size); + --spectrum-tooltip-tip-square-size: var(--system-tooltip-tip-square-size); + --spectrum-tooltip-tip-height-percentage: var( + --system-tooltip-tip-height-percentage + ); + --spectrum-tooltip-tip-antialiasing-inset: var( + --system-tooltip-tip-antialiasing-inset + ); + --spectrum-tooltip-pointer-corner-spacing: var( + --system-tooltip-pointer-corner-spacing + ); + --spectrum-tooltip-background-color-default: var( + --system-tooltip-background-color-default + ); } diff --git a/packages/tray/src/spectrum-tray-wrapper.css b/packages/tray/src/spectrum-tray-wrapper.css index b6dfcc2a85..ca7cf90d32 100644 --- a/packages/tray/src/spectrum-tray-wrapper.css +++ b/packages/tray/src/spectrum-tray-wrapper.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - inline-size: 100%; - justify-content: center; - display: flex; - position: fixed; - inset-block-end: 0; - inset-inline-start: 0; + inline-size: 100%; + justify-content: center; + display: flex; + position: fixed; + inset-block-end: 0; + inset-inline-start: 0; } diff --git a/packages/tray/src/spectrum-tray.css b/packages/tray/src/spectrum-tray.css index b805794541..4d5c263d60 100644 --- a/packages/tray/src/spectrum-tray.css +++ b/packages/tray/src/spectrum-tray.css @@ -12,127 +12,127 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .tray { - --mod-modal-max-width: 100%; - inline-size: 100%; - max-inline-size: 100%; - max-block-size: calc( - 100vh - - var( - --mod-tray-spacing-edge-to-tray-safe-zone, - var(--spectrum-tray-spacing-edge-to-tray-safe-zone) - ) - ); - box-sizing: border-box; - border-radius: 0; - border-radius: var(--mod-tray-corner-radius-portrait, 0) - var(--mod-tray-corner-radius-portrait, 0) 0 0; - transition: - opacity - var( - --mod-tray-exit-animation-duration, - var(--spectrum-tray-exit-animation-duration) - ) - cubic-bezier(0.5, 0, 1, 1) - var( - --mod-tray-exit-animation-delay, - var(--spectrum-tray-exit-animation-delay) - ), - visibility - var( - --mod-tray-exit-animation-duration, - var(--spectrum-tray-exit-animation-duration) - ) - linear - calc( - var( - --mod-tray-exit-animation-delay, - var(--spectrum-tray-exit-animation-delay) - ) + - var( - --mod-tray-exit-animation-duration, - var(--spectrum-tray-exit-animation-duration) - ) - ), - transform - var( - --mod-tray-exit-animation-duration, - var(--spectrum-tray-exit-animation-duration) - ) - cubic-bezier(0.5, 0, 1, 1) - var( - --mod-tray-exit-animation-delay, - var(--spectrum-tray-exit-animation-delay) - ); - background-color: var( - --highcontrast-tray-background-color, - var(--mod-tray-background-color, var(--spectrum-tray-background-color)) - ); - outline: none; - margin-block-start: var( - --mod-tray-spacing-edge-to-tray-safe-zone, - var(--spectrum-tray-spacing-edge-to-tray-safe-zone) - ); - padding-block-start: var( - --mod-tray-top-to-content-area, - var(--spectrum-tray-top-to-content-area) - ); - padding-block-end: var( - --mod-tray-bottom-to-content-area, - var(--spectrum-tray-top-to-content-area) - ); - overflow: auto; - transform: translateY(100%); + --mod-modal-max-width: 100%; + inline-size: 100%; + max-inline-size: 100%; + max-block-size: calc( + 100vh - + var( + --mod-tray-spacing-edge-to-tray-safe-zone, + var(--spectrum-tray-spacing-edge-to-tray-safe-zone) + ) + ); + box-sizing: border-box; + border-radius: 0; + border-radius: var(--mod-tray-corner-radius-portrait, 0) + var(--mod-tray-corner-radius-portrait, 0) 0 0; + transition: + opacity + var( + --mod-tray-exit-animation-duration, + var(--spectrum-tray-exit-animation-duration) + ) + cubic-bezier(0.5, 0, 1, 1) + var( + --mod-tray-exit-animation-delay, + var(--spectrum-tray-exit-animation-delay) + ), + visibility + var( + --mod-tray-exit-animation-duration, + var(--spectrum-tray-exit-animation-duration) + ) + linear + calc( + var( + --mod-tray-exit-animation-delay, + var(--spectrum-tray-exit-animation-delay) + ) + + var( + --mod-tray-exit-animation-duration, + var(--spectrum-tray-exit-animation-duration) + ) + ), + transform + var( + --mod-tray-exit-animation-duration, + var(--spectrum-tray-exit-animation-duration) + ) + cubic-bezier(0.5, 0, 1, 1) + var( + --mod-tray-exit-animation-delay, + var(--spectrum-tray-exit-animation-delay) + ); + background-color: var( + --highcontrast-tray-background-color, + var(--mod-tray-background-color, var(--spectrum-tray-background-color)) + ); + outline: none; + margin-block-start: var( + --mod-tray-spacing-edge-to-tray-safe-zone, + var(--spectrum-tray-spacing-edge-to-tray-safe-zone) + ); + padding-block-start: var( + --mod-tray-top-to-content-area, + var(--spectrum-tray-top-to-content-area) + ); + padding-block-end: var( + --mod-tray-bottom-to-content-area, + var(--spectrum-tray-top-to-content-area) + ); + overflow: auto; + transform: translateY(100%); } :host([open]) .tray { - transition: - transform - var( - --mod-tray-entry-animation-duration, - var(--spectrum-tray-entry-animation-duration) - ) - cubic-bezier(0, 0, 0.4, 1) - var( - --mod-tray-entry-animation-delay, - var(--spectrum-tray-entry-animation-delay) - ), - opacity - var( - --spectrum-tray-entry-animation-duration, - var(--mod-tray-entry-animation-duration) - ) - cubic-bezier(0, 0, 0.4, 1) - var( - --mod-tray-entry-animation-delay, - var(--spectrum-tray-entry-animation-delay) - ); - transform: translateY(0); + transition: + transform + var( + --mod-tray-entry-animation-duration, + var(--spectrum-tray-entry-animation-duration) + ) + cubic-bezier(0, 0, 0.4, 1) + var( + --mod-tray-entry-animation-delay, + var(--spectrum-tray-entry-animation-delay) + ), + opacity + var( + --spectrum-tray-entry-animation-duration, + var(--mod-tray-entry-animation-duration) + ) + cubic-bezier(0, 0, 0.4, 1) + var( + --mod-tray-entry-animation-delay, + var(--spectrum-tray-entry-animation-delay) + ); + transform: translateY(0); } @media screen and (orientation: landscape) { - .tray { - max-inline-size: var( - --mod-tray-max-inline-size, - var(--spectrum-tray-max-inline-size) - ); - border-start-start-radius: var( - --mod-tray-corner-radius, - var(--spectrum-tray-corner-radius) - ); - border-start-end-radius: var( - --mod-tray-corner-radius, - var(--spectrum-tray-corner-radius) - ); - } + .tray { + max-inline-size: var( + --mod-tray-max-inline-size, + var(--spectrum-tray-max-inline-size) + ); + border-start-start-radius: var( + --mod-tray-corner-radius, + var(--spectrum-tray-corner-radius) + ); + border-start-end-radius: var( + --mod-tray-corner-radius, + var(--spectrum-tray-corner-radius) + ); + } } @media (forced-colors: active) { - .tray { - --highcontrast-tray-background-color: Canvas; - border: solid; - } + .tray { + --highcontrast-tray-background-color: Canvas; + border: solid; + } - .tray ::slotted(*) { - border: none; - } + .tray ::slotted(*) { + border: none; + } } diff --git a/packages/tray/src/tray-overrides.css b/packages/tray/src/tray-overrides.css index e4675d827c..9c19c1307e 100644 --- a/packages/tray/src/tray-overrides.css +++ b/packages/tray/src/tray-overrides.css @@ -12,22 +12,20 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-tray-exit-animation-delay: var( - --system-tray-exit-animation-delay - ); - --spectrum-tray-entry-animation-delay: var( - --system-tray-entry-animation-delay - ); - --spectrum-tray-max-inline-size: var(--system-tray-max-inline-size); - --spectrum-tray-spacing-edge-to-tray-safe-zone: var( - --system-tray-spacing-edge-to-safe-zone - ); - --spectrum-tray-entry-animation-duration: var( - --system-tray-entry-animation-duration - ); - --spectrum-tray-exit-animation-duration: var( - --system-tray-exit-animation-duration - ); - --spectrum-tray-corner-radius: var(--system-tray-corner-radius); - --spectrum-tray-background-color: var(--system-tray-background-color); + --spectrum-tray-exit-animation-delay: var(--system-tray-exit-animation-delay); + --spectrum-tray-entry-animation-delay: var( + --system-tray-entry-animation-delay + ); + --spectrum-tray-max-inline-size: var(--system-tray-max-inline-size); + --spectrum-tray-spacing-edge-to-tray-safe-zone: var( + --system-tray-spacing-edge-to-safe-zone + ); + --spectrum-tray-entry-animation-duration: var( + --system-tray-entry-animation-duration + ); + --spectrum-tray-exit-animation-duration: var( + --system-tray-exit-animation-duration + ); + --spectrum-tray-corner-radius: var(--system-tray-corner-radius); + --spectrum-tray-background-color: var(--system-tray-background-color); } diff --git a/packages/underlay/src/spectrum-underlay.css b/packages/underlay/src/spectrum-underlay.css index e2732e8653..c99ed55edf 100644 --- a/packages/underlay/src/spectrum-underlay.css +++ b/packages/underlay/src/spectrum-underlay.css @@ -12,95 +12,93 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - pointer-events: none; - visibility: hidden; - opacity: 0; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: + transform 0.13s ease-in-out, + opacity 0.13s ease-in-out, + visibility 0s linear 0.13s; + transition: + transform + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + opacity + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ) + ease-in-out, + visibility 0s linear + var( + --mod-overlay-animation-duration, + var(--spectrum-animation-duration-100, 0.13s) + ); } :host([open]) { - pointer-events: auto; - visibility: visible; - opacity: 1; - transition-delay: 0s; - transition-delay: var( - --mod-overlay-animation-duration-opened, - var(--spectrum-animation-duration-0, 0s) - ); + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: 0s; + transition-delay: var( + --mod-overlay-animation-duration-opened, + var(--spectrum-animation-duration-0, 0s) + ); } :host { - background-color: var( - --mod-underlay-background-color, - var(--spectrum-underlay-background-color) - ); - z-index: 1; - transition: - opacity - var( - --mod-underlay-background-exit-animation-duration, - var(--spectrum-underlay-background-exit-animation-duration) - ) - var( - --mod-underlay-background-exit-animation-ease, - var(--spectrum-underlay-background-exit-animation-ease) - ) - var( - --mod-underlay-background-exit-animation-delay, - var(--spectrum-underlay-background-exit-animation-delay) - ), - visibility 0s linear - calc( - var( - --mod-underlay-background-exit-animation-delay, - var(--spectrum-underlay-background-exit-animation-delay) - ) + - var( - --mod-underlay-background-exit-animation-duration, - var( - --spectrum-underlay-background-exit-animation-duration - ) - ) - ); - position: fixed; - inset-block: 0; - inset-inline: 0; - overflow: hidden; + background-color: var( + --mod-underlay-background-color, + var(--spectrum-underlay-background-color) + ); + z-index: 1; + transition: + opacity + var( + --mod-underlay-background-exit-animation-duration, + var(--spectrum-underlay-background-exit-animation-duration) + ) + var( + --mod-underlay-background-exit-animation-ease, + var(--spectrum-underlay-background-exit-animation-ease) + ) + var( + --mod-underlay-background-exit-animation-delay, + var(--spectrum-underlay-background-exit-animation-delay) + ), + visibility 0s linear + calc( + var( + --mod-underlay-background-exit-animation-delay, + var(--spectrum-underlay-background-exit-animation-delay) + ) + + var( + --mod-underlay-background-exit-animation-duration, + var(--spectrum-underlay-background-exit-animation-duration) + ) + ); + position: fixed; + inset-block: 0; + inset-inline: 0; + overflow: hidden; } :host([open]) { - transition: opacity - var( - --mod-underlay-background-entry-animation-duration, - var(--spectrum-underlay-background-entry-animation-duration) - ) - var( - --mod-underlay-background-entry-animation-ease, - var(--spectrum-underlay-background-entry-animation-ease) - ) - var( - --mod-underlay-background-entry-animation-delay, - var(--spectrum-underlay-background-entry-animation-delay) - ); + transition: opacity + var( + --mod-underlay-background-entry-animation-duration, + var(--spectrum-underlay-background-entry-animation-duration) + ) + var( + --mod-underlay-background-entry-animation-ease, + var(--spectrum-underlay-background-entry-animation-ease) + ) + var( + --mod-underlay-background-entry-animation-delay, + var(--spectrum-underlay-background-entry-animation-delay) + ); } diff --git a/packages/underlay/src/underlay-overrides.css b/packages/underlay/src/underlay-overrides.css index 12ae6f7f93..edc4342fd0 100644 --- a/packages/underlay/src/underlay-overrides.css +++ b/packages/underlay/src/underlay-overrides.css @@ -12,25 +12,23 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-underlay-background-entry-animation-delay: var( - --system-underlay-background-entry-animation-delay - ); - --spectrum-underlay-background-exit-animation-ease: var( - --system-underlay-background-exit-animation-ease - ); - --spectrum-underlay-background-entry-animation-ease: var( - --system-underlay-background-entry-animation-ease - ); - --spectrum-underlay-background-entry-animation-duration: var( - --system-underlay-background-entry-animation-duration - ); - --spectrum-underlay-background-exit-animation-duration: var( - --system-underlay-background-exit-animation-duration - ); - --spectrum-underlay-background-exit-animation-delay: var( - --system-underlay-background-exit-animation-delay - ); - --spectrum-underlay-background-color: var( - --system-underlay-background-color - ); + --spectrum-underlay-background-entry-animation-delay: var( + --system-underlay-background-entry-animation-delay + ); + --spectrum-underlay-background-exit-animation-ease: var( + --system-underlay-background-exit-animation-ease + ); + --spectrum-underlay-background-entry-animation-ease: var( + --system-underlay-background-entry-animation-ease + ); + --spectrum-underlay-background-entry-animation-duration: var( + --system-underlay-background-entry-animation-duration + ); + --spectrum-underlay-background-exit-animation-duration: var( + --system-underlay-background-exit-animation-duration + ); + --spectrum-underlay-background-exit-animation-delay: var( + --system-underlay-background-exit-animation-delay + ); + --spectrum-underlay-background-color: var(--system-underlay-background-color); } diff --git a/storybook/utils/setCustomElementsManifestWithOptions.js b/storybook/utils/setCustomElementsManifestWithOptions.js index 1180660c6b..6a0eb5fc7c 100644 --- a/storybook/utils/setCustomElementsManifestWithOptions.js +++ b/storybook/utils/setCustomElementsManifestWithOptions.js @@ -9,30 +9,27 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { setCustomElementsManifest } from '@storybook/web-components'; +import { setCustomElementsManifest } from "@storybook/web-components"; export const setCustomElementsManifestWithOptions = ( - customElements, - options + customElements, + options, ) => { - const { privateFields = true } = options; + const { privateFields = true } = options; - if (!privateFields) { - customElements?.modules?.forEach((module) => { - module?.declarations?.forEach((declaration) => { - Object.keys(declaration).forEach((key) => { - if (Array.isArray(declaration[key])) { - declaration[key] = declaration[key].filter((member) => { - return ( - !member.privacy?.includes('private') && - !member.privacy?.includes('protected') - ); - }); - } - }); - }); - }); - } + if (!privateFields) { + customElements?.modules?.forEach((module) => { + module?.declarations?.forEach((declaration) => { + Object.keys(declaration).forEach((key) => { + if (Array.isArray(declaration[key])) { + declaration[key] = declaration[key].filter((member) => { + return !member.privacy?.includes("private"); + }); + } + }); + }); + }); + } - return setCustomElementsManifest(customElements); + return setCustomElementsManifest(customElements); }; diff --git a/stylelint.config.js b/stylelint.config.js new file mode 100644 index 0000000000..d34808fd00 --- /dev/null +++ b/stylelint.config.js @@ -0,0 +1,193 @@ +/* +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. +*/ +module.exports = { + allowEmptyInput: true, + cache: true, + defaultSeverity: "warning", + extends: ["stylelint-config-standard"], + plugins: [ + "stylelint-header", + "stylelint-selector-bem-pattern", + "stylelint-order", + "stylelint-use-logical", + "stylelint-high-performance-animation", + ], + rules: { + /** -------------------------------------------------------------- + * Disabled rules + * -------------------------------------------------------------- */ + "custom-property-empty-line-before": null, + "declaration-block-no-redundant-longhand-properties": null, + "declaration-empty-line-before": null, + "import-notation": null, + "no-descending-specificity": null, + "no-duplicate-selectors": null, + + /** -------------------------------------------------------------- + * Customized rule settings + * -------------------------------------------------------------- */ + /** @note use floats for opacity because it minifies better than percent */ + "alpha-value-notation": ["percentage", { exceptProperties: ["opacity"] }], + "at-rule-empty-line-before": [ + "always", + { + except: ["blockless-after-blockless", "first-nested"], + ignore: ["after-comment", "first-nested"], + ignoreAtRules: ["extend"], + }, + ], + "at-rule-no-unknown": [ + true, + { + ignoreAtRules: ["extend", "each", "include", "mixin"], + }, + ], + "block-no-empty": [ + true, + { + ignore: ["comments"], + }, + ], + "color-function-notation": ["modern", { ignore: ["with-var-inside"] }], + "comment-empty-line-before": [ + "always", + { + except: ["first-nested"], + ignore: ["after-comment", "stylelint-commands"], + // don't require a newline before a passthrough flag + ignoreComments: [/^@?passthroughs?/], + }, + ], + "custom-property-pattern": [/^(spectrum|mod|highcontrast|system|_)/, {}], + "declaration-block-no-duplicate-custom-properties": true, + "declaration-property-value-no-unknown": [ + true, + { + ignoreProperties: { + color: ["CanvasText"], + "forced-color-adjust": ["preserve-parent-color"], + }, + }, + ], + "declaration-block-no-shorthand-property-overrides": true, + "function-no-unknown": [ + true, + { + severity: "warning", + }, + ], + "length-zero-no-unit": [true, { ignore: "custom-properties" }], + "max-nesting-depth": [3, { severity: "warning" }], + "property-no-unknown": [ + true, + { + checkPrefixed: true, + }, + ], + "rule-empty-line-before": [ + "always", + { + except: ["first-nested"], + ignore: ["after-comment"], + }, + ], + "selector-attribute-quotes": "always", + "selector-class-pattern": [ + "^(spectrum-|is-|u-)[A-Za-z0-9-]+", + { + resolveNestedSelectors: true, + }, + ], + "selector-not-notation": "complex", + "selector-pseudo-element-colon-notation": ["single", {}], + "selector-type-no-unknown": [true, { ignore: ["custom-elements"] }], + "value-keyword-case": [ + "lower", + { + camelCaseSvgKeywords: true, + ignoreKeywords: ["Transparent", "Text"], + }, + ], + "value-no-vendor-prefix": [ + true, + { + disableFix: true, + severity: "warning", + }, + ], + + /** -------------------------------------------------------------- + * Plugins + * -------------------------------------------------------------- */ + "csstools/use-logical": true, + "header/header": [ + "config/license.js", + { + nonMatchingTolerance: 0.8, + }, + { + fix: true, + }, + ], + "order/order": ["custom-properties", "declarations"], + "plugin/selector-bem-pattern": [ + { + preset: "suit", + presetOptions: { namespace: "spectrum" }, + utilitySelectors: /^\.(is|u)-[A-z0-9]+$/, + componentName: /^[A-Z][A-z0-9]+$/, + }, + { + severity: "warning", + }, + ], + /** Performance */ + "plugin/no-low-performance-animation-properties": [ + true, + { severity: "warning" }, + ], + }, + /** -------------------------------------------------------------- + * Overrides + * -------------------------------------------------------------- */ + overrides: [ + { + files: ["storybook/assets/*.css"], + rules: { + "custom-property-pattern": null, + "color-function-notation": null, + "spectrum-tools/no-unused-custom-properties": null, + "spectrum-tools/no-unknown-custom-properties": null, + }, + }, + { + files: [ + "packages/**/src/spectrum-*.css", + "tools/**/src/spectrum-*.css", + "tools/styles/**/*.css", + ], + extends: [], + rules: { + "header/header": [ + "config/license.js", + { + nonMatchingTolerance: 0.8, + }, + { + fix: true, + }, + ], + }, + }, + ], +}; diff --git a/tools/.eslintrc.json b/tools/.eslintrc.json index 0f8451dd20..bac92cda00 100644 --- a/tools/.eslintrc.json +++ b/tools/.eslintrc.json @@ -1,121 +1,122 @@ { - "root": true, - "env": { - "browser": true, - "node": false, - "es6": true - }, - "parser": "@typescript-eslint/parser", - "plugins": [ - "@typescript-eslint", - "notice", - "@spectrum-web-components", - "require-extensions" - ], - "extends": [ - "plugin:@typescript-eslint/recommended", - "prettier", - "plugin:lit-a11y/recommended", - "plugin:require-extensions/recommended" - ], - "rules": { - "no-debugger": 2, - "no-console": [ - "error", - { - "allow": ["warn", "error"] - } - ], - "@spectrum-web-components/prevent-argument-names": [ - "error", - ["e", "ev", "evt", "err"] - ], - "@spectrum-web-components/document-active-element": ["error"], - "notice/notice": [ - "error", - { - "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.", - "templateFile": "config/license.js" - } - ], - "@typescript-eslint/explicit-function-return-type": [ - 1, - { - "allowExpressions": true - } - ], - "sort-imports": [ - "error", - { - "ignoreCase": true, - "ignoreDeclarationSort": true, - "ignoreMemberSort": false, - "allowSeparatedGroups": false - } - ], - "lit-a11y/click-events-have-key-events": [ - "error", - { - "allowList": [ - "sp-button", - "sp-action-button", - "sp-checkbox", - "sp-radio", - "sp-switch", - "sp-menu-item", - "sp-clear-button", - "sp-underlay" - ] - } - ], - "@typescript-eslint/no-unused-vars": [ - "error", - { - "argsIgnorePattern": "^_" - } - ] - }, - "overrides": [ - { - "files": ["*.test.ts", "*.stories.ts", "**/benchmark/*.ts"], - "rules": { - "@spectrum-web-components/document-active-element": ["off"], - "lit-a11y/no-autofocus": ["off"], - "lit-a11y/tabindex-no-positive": ["off"] - } - }, - { - "files": ["**/icons/*.ts", "**/src/elements/*.ts"], - "rules": { - "sort-imports": ["off"] - } - }, - { - "files": ["*.stories.ts"], - "rules": { - "no-console": ["off"] - } - }, - { - "files": ["Picker.ts"], - "rules": { - "lit-a11y/click-events-have-key-events": [ - "error", - { - "allowList": [ - "sp-button", - "sp-action-button", - "sp-checkbox", - "sp-radio", - "sp-switch", - "sp-menu-item", - "sp-clear-button", - "sp-underlay", - "sp-popover" - ] - } - ] - } - } - ] + "root": true, + "env": { + "browser": true, + "node": false, + "es6": true + }, + "parser": "@typescript-eslint/parser", + "plugins": [ + "@typescript-eslint", + "notice", + "@spectrum-web-components", + "require-extensions" + ], + "extends": [ + "../.eslintrc.json", + "plugin:@typescript-eslint/recommended", + "prettier", + "plugin:lit-a11y/recommended", + "plugin:require-extensions/recommended" + ], + "rules": { + "no-debugger": 2, + "no-console": [ + "error", + { + "allow": ["warn", "error"] + } + ], + "@spectrum-web-components/prevent-argument-names": [ + "error", + ["e", "ev", "evt", "err"] + ], + "@spectrum-web-components/document-active-element": ["error"], + "notice/notice": [ + "error", + { + "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.", + "templateFile": "config/license.js" + } + ], + "@typescript-eslint/explicit-function-return-type": [ + 1, + { + "allowExpressions": true + } + ], + "sort-imports": [ + "error", + { + "ignoreCase": true, + "ignoreDeclarationSort": true, + "ignoreMemberSort": false, + "allowSeparatedGroups": false + } + ], + "lit-a11y/click-events-have-key-events": [ + "error", + { + "allowList": [ + "sp-button", + "sp-action-button", + "sp-checkbox", + "sp-radio", + "sp-switch", + "sp-menu-item", + "sp-clear-button", + "sp-underlay" + ] + } + ], + "@typescript-eslint/no-unused-vars": [ + "error", + { + "argsIgnorePattern": "^_" + } + ] + }, + "overrides": [ + { + "files": ["*.test.ts", "*.stories.ts", "**/benchmark/*.ts"], + "rules": { + "@spectrum-web-components/document-active-element": ["off"], + "lit-a11y/no-autofocus": ["off"], + "lit-a11y/tabindex-no-positive": ["off"] + } + }, + { + "files": ["**/icons/*.ts", "**/src/elements/*.ts"], + "rules": { + "sort-imports": ["off"] + } + }, + { + "files": ["*.stories.ts"], + "rules": { + "no-console": ["off"] + } + }, + { + "files": ["Picker.ts"], + "rules": { + "lit-a11y/click-events-have-key-events": [ + "error", + { + "allowList": [ + "sp-button", + "sp-action-button", + "sp-checkbox", + "sp-radio", + "sp-switch", + "sp-menu-item", + "sp-clear-button", + "sp-underlay", + "sp-popover" + ] + } + ] + } + } + ] } diff --git a/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css index 1d8e8c61f3..39b19c45d6 100644 --- a/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css +++ b/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css @@ -12,16 +12,12 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-opacity-checkerboard-dark: var( - --system-opacity-checkerboard-dark - ); - --spectrum-opacity-checkerboard-light: var( - --system-opacity-checkerboard-light - ); - --spectrum-opacity-checkerboard-size: var( - --system-opacity-checkerboard-size - ); - --spectrum-opacity-checkerboard-position: var( - --system-opacity-checkerboard-position - ); + --spectrum-opacity-checkerboard-dark: var(--system-opacity-checkerboard-dark); + --spectrum-opacity-checkerboard-light: var( + --system-opacity-checkerboard-light + ); + --spectrum-opacity-checkerboard-size: var(--system-opacity-checkerboard-size); + --spectrum-opacity-checkerboard-position: var( + --system-opacity-checkerboard-position + ); } diff --git a/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css index 2c75c4afd3..e7db0aca4f 100644 --- a/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css +++ b/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css @@ -12,16 +12,12 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .opacity-checkerboard { - --spectrum-opacity-checkerboard-dark: var( - --system-opacity-checkerboard-dark - ); - --spectrum-opacity-checkerboard-light: var( - --system-opacity-checkerboard-light - ); - --spectrum-opacity-checkerboard-size: var( - --system-opacity-checkerboard-size - ); - --spectrum-opacity-checkerboard-position: var( - --system-opacity-checkerboard-position - ); + --spectrum-opacity-checkerboard-dark: var(--system-opacity-checkerboard-dark); + --spectrum-opacity-checkerboard-light: var( + --system-opacity-checkerboard-light + ); + --spectrum-opacity-checkerboard-size: var(--system-opacity-checkerboard-size); + --spectrum-opacity-checkerboard-position: var( + --system-opacity-checkerboard-position + ); } diff --git a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css index 844adb9d69..9bce4dfb58 100644 --- a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css @@ -12,38 +12,40 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - background: repeating-conic-gradient( - var( - --mod-opacity-checkerboard-light, - var(--spectrum-opacity-checkerboard-light) - ) - 0 25%, - var( - --mod-opacity-checkerboard-dark, - var(--spectrum-opacity-checkerboard-dark) - ) - 0 50% - ) - var( - --mod-opacity-checkerboard-position, - var(--spectrum-opacity-checkerboard-position) - ) / - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ) - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ); + background: repeating-conic-gradient( + var( + --mod-opacity-checkerboard-light, + var(--spectrum-opacity-checkerboard-light) + ) + 0 25%, + var( + --mod-opacity-checkerboard-dark, + var(--spectrum-opacity-checkerboard-dark) + ) + 0 50% + ) + var( + --mod-opacity-checkerboard-position, + var(--spectrum-opacity-checkerboard-position) + ) / + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * + 2 + ) + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * + 2 + ); } @media (forced-colors: active) { - :host { - forced-color-adjust: none; - } + :host { + forced-color-adjust: none; + } } diff --git a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css index 0f55fda1b4..350cd70ebe 100644 --- a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css @@ -12,38 +12,40 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .opacity-checkerboard { - background: repeating-conic-gradient( - var( - --mod-opacity-checkerboard-light, - var(--spectrum-opacity-checkerboard-light) - ) - 0 25%, - var( - --mod-opacity-checkerboard-dark, - var(--spectrum-opacity-checkerboard-dark) - ) - 0 50% - ) - var( - --mod-opacity-checkerboard-position, - var(--spectrum-opacity-checkerboard-position) - ) / - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ) - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ); + background: repeating-conic-gradient( + var( + --mod-opacity-checkerboard-light, + var(--spectrum-opacity-checkerboard-light) + ) + 0 25%, + var( + --mod-opacity-checkerboard-dark, + var(--spectrum-opacity-checkerboard-dark) + ) + 0 50% + ) + var( + --mod-opacity-checkerboard-position, + var(--spectrum-opacity-checkerboard-position) + ) / + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * + 2 + ) + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * + 2 + ); } @media (forced-colors: active) { - .opacity-checkerboard { - forced-color-adjust: none; - } + .opacity-checkerboard { + forced-color-adjust: none; + } } diff --git a/tools/styles/express/spectrum-core-global.css b/tools/styles/express/spectrum-core-global.css index 4156844d04..4171cf10da 100644 --- a/tools/styles/express/spectrum-core-global.css +++ b/tools/styles/express/spectrum-core-global.css @@ -1,3245 +1,3201 @@ :root, :host { - --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-animation-duration-0: 0s; - --spectrum-global-animation-duration-100: 0.13s; - --spectrum-global-animation-duration-200: 0.16s; - --spectrum-global-animation-duration-300: 0.19s; - --spectrum-global-animation-duration-400: 0.22s; - --spectrum-global-animation-duration-500: 0.25s; - --spectrum-global-animation-duration-600: 0.3s; - --spectrum-global-animation-duration-700: 0.35s; - --spectrum-global-animation-duration-800: 0.4s; - --spectrum-global-animation-duration-900: 0.45s; - --spectrum-global-animation-duration-1000: 0.5s; - --spectrum-global-animation-duration-2000: 1s; - --spectrum-global-animation-duration-4000: 2s; - --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-static-black-rgb: 0, 0, 0; - --spectrum-global-color-static-black: rgb( - var(--spectrum-global-color-static-black-rgb) - ); - --spectrum-global-color-static-white-rgb: 255, 255, 255; - --spectrum-global-color-static-white: rgb( - var(--spectrum-global-color-static-white-rgb) - ); - --spectrum-global-color-static-blue-rgb: 0, 87, 191; - --spectrum-global-color-static-blue: rgb( - var(--spectrum-global-color-static-blue-rgb) - ); - --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-50: rgb( - var(--spectrum-global-color-static-gray-50-rgb) - ); - --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-75: rgb( - var(--spectrum-global-color-static-gray-75-rgb) - ); - --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-100: rgb( - var(--spectrum-global-color-static-gray-100-rgb) - ); - --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; - --spectrum-global-color-static-gray-200: rgb( - var(--spectrum-global-color-static-gray-200-rgb) - ); - --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; - --spectrum-global-color-static-gray-300: rgb( - var(--spectrum-global-color-static-gray-300-rgb) - ); - --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; - --spectrum-global-color-static-gray-400: rgb( - var(--spectrum-global-color-static-gray-400-rgb) - ); - --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; - --spectrum-global-color-static-gray-500: rgb( - var(--spectrum-global-color-static-gray-500-rgb) - ); - --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; - --spectrum-global-color-static-gray-600: rgb( - var(--spectrum-global-color-static-gray-600-rgb) - ); - --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; - --spectrum-global-color-static-gray-700: rgb( - var(--spectrum-global-color-static-gray-700-rgb) - ); - --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-static-gray-800: rgb( - var(--spectrum-global-color-static-gray-800-rgb) - ); - --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-static-gray-900: rgb( - var(--spectrum-global-color-static-gray-900-rgb) - ); - --spectrum-global-color-static-red-400-rgb: 237, 64, 48; - --spectrum-global-color-static-red-400: rgb( - var(--spectrum-global-color-static-red-400-rgb) - ); - --spectrum-global-color-static-red-500-rgb: 217, 28, 21; - --spectrum-global-color-static-red-500: rgb( - var(--spectrum-global-color-static-red-500-rgb) - ); - --spectrum-global-color-static-red-600-rgb: 187, 2, 2; - --spectrum-global-color-static-red-600: rgb( - var(--spectrum-global-color-static-red-600-rgb) - ); - --spectrum-global-color-static-red-700-rgb: 154, 0, 0; - --spectrum-global-color-static-red-700: rgb( - var(--spectrum-global-color-static-red-700-rgb) - ); - --spectrum-global-color-static-red-800-rgb: 124, 0, 0; - --spectrum-global-color-static-red-800: rgb( - var(--spectrum-global-color-static-red-800-rgb) - ); - --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; - --spectrum-global-color-static-orange-400: rgb( - var(--spectrum-global-color-static-orange-400-rgb) - ); - --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; - --spectrum-global-color-static-orange-500: rgb( - var(--spectrum-global-color-static-orange-500-rgb) - ); - --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; - --spectrum-global-color-static-orange-600: rgb( - var(--spectrum-global-color-static-orange-600-rgb) - ); - --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; - --spectrum-global-color-static-orange-700: rgb( - var(--spectrum-global-color-static-orange-700-rgb) - ); - --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; - --spectrum-global-color-static-orange-800: rgb( - var(--spectrum-global-color-static-orange-800-rgb) - ); - --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; - --spectrum-global-color-static-yellow-200: rgb( - var(--spectrum-global-color-static-yellow-200-rgb) - ); - --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; - --spectrum-global-color-static-yellow-300: rgb( - var(--spectrum-global-color-static-yellow-300-rgb) - ); - --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; - --spectrum-global-color-static-yellow-400: rgb( - var(--spectrum-global-color-static-yellow-400-rgb) - ); - --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; - --spectrum-global-color-static-yellow-500: rgb( - var(--spectrum-global-color-static-yellow-500-rgb) - ); - --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; - --spectrum-global-color-static-yellow-600: rgb( - var(--spectrum-global-color-static-yellow-600-rgb) - ); - --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; - --spectrum-global-color-static-yellow-700: rgb( - var(--spectrum-global-color-static-yellow-700-rgb) - ); - --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; - --spectrum-global-color-static-yellow-800: rgb( - var(--spectrum-global-color-static-yellow-800-rgb) - ); - --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; - --spectrum-global-color-static-chartreuse-300: rgb( - var(--spectrum-global-color-static-chartreuse-300-rgb) - ); - --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; - --spectrum-global-color-static-chartreuse-400: rgb( - var(--spectrum-global-color-static-chartreuse-400-rgb) - ); - --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; - --spectrum-global-color-static-chartreuse-500: rgb( - var(--spectrum-global-color-static-chartreuse-500-rgb) - ); - --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; - --spectrum-global-color-static-chartreuse-600: rgb( - var(--spectrum-global-color-static-chartreuse-600-rgb) - ); - --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; - --spectrum-global-color-static-chartreuse-700: rgb( - var(--spectrum-global-color-static-chartreuse-700-rgb) - ); - --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; - --spectrum-global-color-static-chartreuse-800: rgb( - var(--spectrum-global-color-static-chartreuse-800-rgb) - ); - --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; - --spectrum-global-color-static-celery-200: rgb( - var(--spectrum-global-color-static-celery-200-rgb) - ); - --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; - --spectrum-global-color-static-celery-300: rgb( - var(--spectrum-global-color-static-celery-300-rgb) - ); - --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; - --spectrum-global-color-static-celery-400: rgb( - var(--spectrum-global-color-static-celery-400-rgb) - ); - --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; - --spectrum-global-color-static-celery-500: rgb( - var(--spectrum-global-color-static-celery-500-rgb) - ); - --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; - --spectrum-global-color-static-celery-600: rgb( - var(--spectrum-global-color-static-celery-600-rgb) - ); - --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; - --spectrum-global-color-static-celery-700: rgb( - var(--spectrum-global-color-static-celery-700-rgb) - ); - --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; - --spectrum-global-color-static-celery-800: rgb( - var(--spectrum-global-color-static-celery-800-rgb) - ); - --spectrum-global-color-static-green-400-rgb: 29, 169, 115; - --spectrum-global-color-static-green-400: rgb( - var(--spectrum-global-color-static-green-400-rgb) - ); - --spectrum-global-color-static-green-500-rgb: 0, 148, 97; - --spectrum-global-color-static-green-500: rgb( - var(--spectrum-global-color-static-green-500-rgb) - ); - --spectrum-global-color-static-green-600-rgb: 0, 126, 80; - --spectrum-global-color-static-green-600: rgb( - var(--spectrum-global-color-static-green-600-rgb) - ); - --spectrum-global-color-static-green-700-rgb: 0, 105, 65; - --spectrum-global-color-static-green-700: rgb( - var(--spectrum-global-color-static-green-700-rgb) - ); - --spectrum-global-color-static-green-800-rgb: 0, 86, 53; - --spectrum-global-color-static-green-800: rgb( - var(--spectrum-global-color-static-green-800-rgb) - ); - --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; - --spectrum-global-color-static-seafoam-200: rgb( - var(--spectrum-global-color-static-seafoam-200-rgb) - ); - --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; - --spectrum-global-color-static-seafoam-300: rgb( - var(--spectrum-global-color-static-seafoam-300-rgb) - ); - --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; - --spectrum-global-color-static-seafoam-400: rgb( - var(--spectrum-global-color-static-seafoam-400-rgb) - ); - --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; - --spectrum-global-color-static-seafoam-500: rgb( - var(--spectrum-global-color-static-seafoam-500-rgb) - ); - --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; - --spectrum-global-color-static-seafoam-600: rgb( - var(--spectrum-global-color-static-seafoam-600-rgb) - ); - --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; - --spectrum-global-color-static-seafoam-700: rgb( - var(--spectrum-global-color-static-seafoam-700-rgb) - ); - --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; - --spectrum-global-color-static-seafoam-800: rgb( - var(--spectrum-global-color-static-seafoam-800-rgb) - ); - --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; - --spectrum-global-color-static-blue-200: rgb( - var(--spectrum-global-color-static-blue-200-rgb) - ); - --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; - --spectrum-global-color-static-blue-300: rgb( - var(--spectrum-global-color-static-blue-300-rgb) - ); - --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; - --spectrum-global-color-static-blue-400: rgb( - var(--spectrum-global-color-static-blue-400-rgb) - ); - --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; - --spectrum-global-color-static-blue-500: rgb( - var(--spectrum-global-color-static-blue-500-rgb) - ); - --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; - --spectrum-global-color-static-blue-600: rgb( - var(--spectrum-global-color-static-blue-600-rgb) - ); - --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; - --spectrum-global-color-static-blue-700: rgb( - var(--spectrum-global-color-static-blue-700-rgb) - ); - --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; - --spectrum-global-color-static-blue-800: rgb( - var(--spectrum-global-color-static-blue-800-rgb) - ); - --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; - --spectrum-global-color-static-indigo-200: rgb( - var(--spectrum-global-color-static-indigo-200-rgb) - ); - --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; - --spectrum-global-color-static-indigo-300: rgb( - var(--spectrum-global-color-static-indigo-300-rgb) - ); - --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; - --spectrum-global-color-static-indigo-400: rgb( - var(--spectrum-global-color-static-indigo-400-rgb) - ); - --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; - --spectrum-global-color-static-indigo-500: rgb( - var(--spectrum-global-color-static-indigo-500-rgb) - ); - --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; - --spectrum-global-color-static-indigo-600: rgb( - var(--spectrum-global-color-static-indigo-600-rgb) - ); - --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-700: rgb( - var(--spectrum-global-color-static-indigo-700-rgb) - ); - --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-800: rgb( - var(--spectrum-global-color-static-indigo-800-rgb) - ); - --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; - --spectrum-global-color-static-purple-400: rgb( - var(--spectrum-global-color-static-purple-400-rgb) - ); - --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; - --spectrum-global-color-static-purple-500: rgb( - var(--spectrum-global-color-static-purple-500-rgb) - ); - --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; - --spectrum-global-color-static-purple-600: rgb( - var(--spectrum-global-color-static-purple-600-rgb) - ); - --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; - --spectrum-global-color-static-purple-700: rgb( - var(--spectrum-global-color-static-purple-700-rgb) - ); - --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; - --spectrum-global-color-static-purple-800: rgb( - var(--spectrum-global-color-static-purple-800-rgb) - ); - --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; - --spectrum-global-color-static-fuchsia-400: rgb( - var(--spectrum-global-color-static-fuchsia-400-rgb) - ); - --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; - --spectrum-global-color-static-fuchsia-500: rgb( - var(--spectrum-global-color-static-fuchsia-500-rgb) - ); - --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; - --spectrum-global-color-static-fuchsia-600: rgb( - var(--spectrum-global-color-static-fuchsia-600-rgb) - ); - --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; - --spectrum-global-color-static-fuchsia-700: rgb( - var(--spectrum-global-color-static-fuchsia-700-rgb) - ); - --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; - --spectrum-global-color-static-fuchsia-800: rgb( - var(--spectrum-global-color-static-fuchsia-800-rgb) - ); - --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; - --spectrum-global-color-static-magenta-200: rgb( - var(--spectrum-global-color-static-magenta-200-rgb) - ); - --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; - --spectrum-global-color-static-magenta-300: rgb( - var(--spectrum-global-color-static-magenta-300-rgb) - ); - --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; - --spectrum-global-color-static-magenta-400: rgb( - var(--spectrum-global-color-static-magenta-400-rgb) - ); - --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; - --spectrum-global-color-static-magenta-500: rgb( - var(--spectrum-global-color-static-magenta-500-rgb) - ); - --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; - --spectrum-global-color-static-magenta-600: rgb( - var(--spectrum-global-color-static-magenta-600-rgb) - ); - --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; - --spectrum-global-color-static-magenta-700: rgb( - var(--spectrum-global-color-static-magenta-700-rgb) - ); - --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; - --spectrum-global-color-static-magenta-800: rgb( - var(--spectrum-global-color-static-magenta-800-rgb) - ); - --spectrum-global-color-static-transparent-white-200: #ffffff1a; - --spectrum-global-color-static-transparent-white-300: #ffffff40; - --spectrum-global-color-static-transparent-white-400: #fff6; - --spectrum-global-color-static-transparent-white-500: #ffffff8c; - --spectrum-global-color-static-transparent-white-600: #ffffffb3; - --spectrum-global-color-static-transparent-white-700: #fffc; - --spectrum-global-color-static-transparent-white-800: #ffffffe6; - --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; - --spectrum-global-color-static-transparent-white-900: rgb( - var(--spectrum-global-color-static-transparent-white-900-rgb) - ); - --spectrum-global-color-static-transparent-black-200: #0000001a; - --spectrum-global-color-static-transparent-black-300: #00000040; - --spectrum-global-color-static-transparent-black-400: #0006; - --spectrum-global-color-static-transparent-black-500: #0000008c; - --spectrum-global-color-static-transparent-black-600: #000000b3; - --spectrum-global-color-static-transparent-black-700: #000c; - --spectrum-global-color-static-transparent-black-800: #000000e6; - --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; - --spectrum-global-color-static-transparent-black-900: rgb( - var(--spectrum-global-color-static-transparent-black-900-rgb) - ); - --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, - #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, - #1a4b83, #1a3979, #1a266f, #191264, #180057; - --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, - #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, - #196b47, #105c45, #094d41, #033f3e, #00313a; - --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, - #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, - #71167c, #560f74, #370b6e, #000968; - --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, - #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, - #3ea8a6, #208288, #076769, #00494b, #002c2d; - --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, - #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, - #397aa8, #1c5796, #163771, #10194d; - --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, - #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, - #2f74b3, #265191, #163670, #0b194c; - --spectrum-semantic-cta-background-color-default: var( - --spectrum-global-color-static-indigo-600 - ); - --spectrum-semantic-cta-background-color-hover: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-semantic-cta-background-color-down: var( - --spectrum-global-color-static-indigo-800 - ); - --spectrum-semantic-cta-background-color-key-focus: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-semantic-emphasized-border-color-default: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-semantic-emphasized-border-color-hover: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-semantic-emphasized-border-color-down: var( - --spectrum-global-color-indigo-700 - ); - --spectrum-semantic-emphasized-border-color-key-focus: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-semantic-neutral-background-color-default: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-negative-background-color: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-color-default: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-color-hover: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-dark: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-border-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-icon-color: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-status-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-text-color-large: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-text-color-small: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-text-color-small-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-color-key-focus: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-background-color-default: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-background-color-hover: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-negative-background-color-down: var( - --spectrum-global-color-static-red-800 - ); - --spectrum-semantic-negative-background-color-key-focus: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-notice-background-color: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-color-default: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-color-dark: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-border-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-icon-color: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-status-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-text-color-large: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-text-color-small: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-color-down: var( - --spectrum-global-color-orange-700 - ); - --spectrum-semantic-notice-color-key-focus: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-background-color-default: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-background-color-hover: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-notice-background-color-down: var( - --spectrum-global-color-static-orange-800 - ); - --spectrum-semantic-notice-background-color-key-focus: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-positive-background-color: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-color-default: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-color-dark: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-border-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-icon-color: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-status-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-text-color-large: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-text-color-small: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-color-down: var( - --spectrum-global-color-green-700 - ); - --spectrum-semantic-positive-color-key-focus: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-background-color-default: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-background-color-hover: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-positive-background-color-down: var( - --spectrum-global-color-static-green-800 - ); - --spectrum-semantic-positive-background-color-key-focus: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-informative-background-color: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-color-dark: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-border-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-icon-color: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-status-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-text-color-large: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-text-color-small: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-informative-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-informative-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-informative-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-neutral-background-color-hover: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-neutral-background-color-down: var( - --spectrum-global-color-static-gray-900 - ); - --spectrum-semantic-neutral-background-color-key-focus: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-presence-color-1: var( - --spectrum-global-color-static-red-500 - ); - --spectrum-semantic-presence-color-2: var( - --spectrum-global-color-static-orange-400 - ); - --spectrum-semantic-presence-color-3: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; - --spectrum-semantic-presence-color-4: rgb( - var(--spectrum-semantic-presence-color-4-rgb) - ); - --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; - --spectrum-semantic-presence-color-5: rgb( - var(--spectrum-semantic-presence-color-5-rgb) - ); - --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; - --spectrum-semantic-presence-color-6: rgb( - var(--spectrum-semantic-presence-color-6-rgb) - ); - --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; - --spectrum-semantic-presence-color-7: rgb( - var(--spectrum-semantic-presence-color-7-rgb) - ); - --spectrum-semantic-presence-color-8: var( - --spectrum-global-color-static-fuchsia-600 - ); - --spectrum-global-dimension-static-percent-50: 50%; - --spectrum-global-dimension-static-percent-70: 70%; - --spectrum-global-dimension-static-percent-100: 100%; - --spectrum-global-dimension-static-breakpoint-xsmall: 304px; - --spectrum-global-dimension-static-breakpoint-small: 768px; - --spectrum-global-dimension-static-breakpoint-medium: 1280px; - --spectrum-global-dimension-static-breakpoint-large: 1768px; - --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; - --spectrum-global-dimension-static-grid-columns: 12; - --spectrum-global-dimension-static-grid-fluid-width: 100%; - --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; - --spectrum-global-dimension-static-size-0: 0px; - --spectrum-global-dimension-static-size-10: 1px; - --spectrum-global-dimension-static-size-25: 2px; - --spectrum-global-dimension-static-size-40: 3px; - --spectrum-global-dimension-static-size-50: 4px; - --spectrum-global-dimension-static-size-65: 5px; - --spectrum-global-dimension-static-size-75: 6px; - --spectrum-global-dimension-static-size-85: 7px; - --spectrum-global-dimension-static-size-100: 8px; - --spectrum-global-dimension-static-size-115: 9px; - --spectrum-global-dimension-static-size-125: 10px; - --spectrum-global-dimension-static-size-130: 11px; - --spectrum-global-dimension-static-size-150: 12px; - --spectrum-global-dimension-static-size-160: 13px; - --spectrum-global-dimension-static-size-175: 14px; - --spectrum-global-dimension-static-size-185: 15px; - --spectrum-global-dimension-static-size-200: 16px; - --spectrum-global-dimension-static-size-225: 18px; - --spectrum-global-dimension-static-size-250: 20px; - --spectrum-global-dimension-static-size-275: 22px; - --spectrum-global-dimension-static-size-300: 24px; - --spectrum-global-dimension-static-size-325: 26px; - --spectrum-global-dimension-static-size-350: 28px; - --spectrum-global-dimension-static-size-400: 32px; - --spectrum-global-dimension-static-size-450: 36px; - --spectrum-global-dimension-static-size-500: 40px; - --spectrum-global-dimension-static-size-550: 44px; - --spectrum-global-dimension-static-size-600: 48px; - --spectrum-global-dimension-static-size-700: 56px; - --spectrum-global-dimension-static-size-800: 64px; - --spectrum-global-dimension-static-size-900: 72px; - --spectrum-global-dimension-static-size-1000: 80px; - --spectrum-global-dimension-static-size-1200: 96px; - --spectrum-global-dimension-static-size-1700: 136px; - --spectrum-global-dimension-static-size-2400: 192px; - --spectrum-global-dimension-static-size-2500: 200px; - --spectrum-global-dimension-static-size-2600: 208px; - --spectrum-global-dimension-static-size-2800: 224px; - --spectrum-global-dimension-static-size-3200: 256px; - --spectrum-global-dimension-static-size-3400: 272px; - --spectrum-global-dimension-static-size-3500: 280px; - --spectrum-global-dimension-static-size-3600: 288px; - --spectrum-global-dimension-static-size-3800: 304px; - --spectrum-global-dimension-static-size-4600: 368px; - --spectrum-global-dimension-static-size-5000: 400px; - --spectrum-global-dimension-static-size-6000: 480px; - --spectrum-global-dimension-static-size-16000: 1280px; - --spectrum-global-dimension-static-font-size-50: 11px; - --spectrum-global-dimension-static-font-size-75: 12px; - --spectrum-global-dimension-static-font-size-100: 14px; - --spectrum-global-dimension-static-font-size-150: 15px; - --spectrum-global-dimension-static-font-size-200: 16px; - --spectrum-global-dimension-static-font-size-300: 18px; - --spectrum-global-dimension-static-font-size-400: 20px; - --spectrum-global-dimension-static-font-size-500: 22px; - --spectrum-global-dimension-static-font-size-600: 25px; - --spectrum-global-dimension-static-font-size-700: 28px; - --spectrum-global-dimension-static-font-size-800: 32px; - --spectrum-global-dimension-static-font-size-900: 36px; - --spectrum-global-dimension-static-font-size-1000: 40px; - --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro', - Georgia, serif; - --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace; - --spectrum-global-font-weight-thin: 100; - --spectrum-global-font-weight-ultra-light: 200; - --spectrum-global-font-weight-light: 300; - --spectrum-global-font-weight-regular: 400; - --spectrum-global-font-weight-medium: 500; - --spectrum-global-font-weight-semi-bold: 600; - --spectrum-global-font-weight-bold: 700; - --spectrum-global-font-weight-extra-bold: 800; - --spectrum-global-font-weight-black: 900; - --spectrum-global-font-style-regular: normal; - --spectrum-global-font-style-italic: italic; - --spectrum-global-font-letter-spacing-none: 0; - --spectrum-global-font-letter-spacing-small: 0.0125em; - --spectrum-global-font-letter-spacing-han: 0.05em; - --spectrum-global-font-letter-spacing-medium: 0.06em; - --spectrum-global-font-line-height-large: 1.7; - --spectrum-global-font-line-height-medium: 1.5; - --spectrum-global-font-line-height-small: 1.3; - --spectrum-global-font-multiplier-0: 0em; - --spectrum-global-font-multiplier-25: 0.25em; - --spectrum-global-font-multiplier-75: 0.75em; - --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif'; - --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, - source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif'; - --spectrum-global-font-font-family-ko: adobe-clean-han-korean, - source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif'; - --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, - 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Osaka', YuGothic, - 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', - 'sans-serif'; - --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-loupe-entry-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-loupe-exit-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-strong-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-margin-bottom: var( - --spectrum-global-font-multiplier-25 - ); - --spectrum-alias-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-body-text-font-family: var( - --spectrum-global-font-family-base - ); - --spectrum-alias-body-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-body-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-body-margin-bottom: var( - --spectrum-global-font-multiplier-75 - ); - --spectrum-alias-detail-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-light: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-font-family: var( - --spectrum-global-font-family-code - ); - --spectrum-alias-code-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-code-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-code-margin-bottom: var( - --spectrum-global-font-multiplier-0 - ); - --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); - --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); - --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); - --spectrum-alias-font-family-zhhans: var( - --spectrum-global-font-font-family-zhhans - ); - --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); - --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); - --spectrum-alias-font-family-condensed: var( - --spectrum-global-font-font-family-condensed - ); - --spectrum-alias-button-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-component-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-han-component-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-serif-text-font-family: var( - --spectrum-global-font-family-serif - ); - --spectrum-alias-han-heading-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-han-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-han-heading-text-font-weight-light-emphasis: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-body-text-line-height: var( - --spectrum-global-font-line-height-large - ); - --spectrum-alias-han-body-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-body-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-subheading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-subheading-text-font-weight-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-detail-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); + --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-animation-duration-0: 0s; + --spectrum-global-animation-duration-100: 0.13s; + --spectrum-global-animation-duration-200: 0.16s; + --spectrum-global-animation-duration-300: 0.19s; + --spectrum-global-animation-duration-400: 0.22s; + --spectrum-global-animation-duration-500: 0.25s; + --spectrum-global-animation-duration-600: 0.3s; + --spectrum-global-animation-duration-700: 0.35s; + --spectrum-global-animation-duration-800: 0.4s; + --spectrum-global-animation-duration-900: 0.45s; + --spectrum-global-animation-duration-1000: 0.5s; + --spectrum-global-animation-duration-2000: 1s; + --spectrum-global-animation-duration-4000: 2s; + --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-static-black-rgb: 0, 0, 0; + --spectrum-global-color-static-black: rgb( + var(--spectrum-global-color-static-black-rgb) + ); + --spectrum-global-color-static-white-rgb: 255, 255, 255; + --spectrum-global-color-static-white: rgb( + var(--spectrum-global-color-static-white-rgb) + ); + --spectrum-global-color-static-blue-rgb: 0, 87, 191; + --spectrum-global-color-static-blue: rgb( + var(--spectrum-global-color-static-blue-rgb) + ); + --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-50: rgb( + var(--spectrum-global-color-static-gray-50-rgb) + ); + --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-75: rgb( + var(--spectrum-global-color-static-gray-75-rgb) + ); + --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-100: rgb( + var(--spectrum-global-color-static-gray-100-rgb) + ); + --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; + --spectrum-global-color-static-gray-200: rgb( + var(--spectrum-global-color-static-gray-200-rgb) + ); + --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; + --spectrum-global-color-static-gray-300: rgb( + var(--spectrum-global-color-static-gray-300-rgb) + ); + --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; + --spectrum-global-color-static-gray-400: rgb( + var(--spectrum-global-color-static-gray-400-rgb) + ); + --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; + --spectrum-global-color-static-gray-500: rgb( + var(--spectrum-global-color-static-gray-500-rgb) + ); + --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; + --spectrum-global-color-static-gray-600: rgb( + var(--spectrum-global-color-static-gray-600-rgb) + ); + --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; + --spectrum-global-color-static-gray-700: rgb( + var(--spectrum-global-color-static-gray-700-rgb) + ); + --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-static-gray-800: rgb( + var(--spectrum-global-color-static-gray-800-rgb) + ); + --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-static-gray-900: rgb( + var(--spectrum-global-color-static-gray-900-rgb) + ); + --spectrum-global-color-static-red-400-rgb: 237, 64, 48; + --spectrum-global-color-static-red-400: rgb( + var(--spectrum-global-color-static-red-400-rgb) + ); + --spectrum-global-color-static-red-500-rgb: 217, 28, 21; + --spectrum-global-color-static-red-500: rgb( + var(--spectrum-global-color-static-red-500-rgb) + ); + --spectrum-global-color-static-red-600-rgb: 187, 2, 2; + --spectrum-global-color-static-red-600: rgb( + var(--spectrum-global-color-static-red-600-rgb) + ); + --spectrum-global-color-static-red-700-rgb: 154, 0, 0; + --spectrum-global-color-static-red-700: rgb( + var(--spectrum-global-color-static-red-700-rgb) + ); + --spectrum-global-color-static-red-800-rgb: 124, 0, 0; + --spectrum-global-color-static-red-800: rgb( + var(--spectrum-global-color-static-red-800-rgb) + ); + --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; + --spectrum-global-color-static-orange-400: rgb( + var(--spectrum-global-color-static-orange-400-rgb) + ); + --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; + --spectrum-global-color-static-orange-500: rgb( + var(--spectrum-global-color-static-orange-500-rgb) + ); + --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; + --spectrum-global-color-static-orange-600: rgb( + var(--spectrum-global-color-static-orange-600-rgb) + ); + --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; + --spectrum-global-color-static-orange-700: rgb( + var(--spectrum-global-color-static-orange-700-rgb) + ); + --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; + --spectrum-global-color-static-orange-800: rgb( + var(--spectrum-global-color-static-orange-800-rgb) + ); + --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; + --spectrum-global-color-static-yellow-200: rgb( + var(--spectrum-global-color-static-yellow-200-rgb) + ); + --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; + --spectrum-global-color-static-yellow-300: rgb( + var(--spectrum-global-color-static-yellow-300-rgb) + ); + --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; + --spectrum-global-color-static-yellow-400: rgb( + var(--spectrum-global-color-static-yellow-400-rgb) + ); + --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; + --spectrum-global-color-static-yellow-500: rgb( + var(--spectrum-global-color-static-yellow-500-rgb) + ); + --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; + --spectrum-global-color-static-yellow-600: rgb( + var(--spectrum-global-color-static-yellow-600-rgb) + ); + --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; + --spectrum-global-color-static-yellow-700: rgb( + var(--spectrum-global-color-static-yellow-700-rgb) + ); + --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; + --spectrum-global-color-static-yellow-800: rgb( + var(--spectrum-global-color-static-yellow-800-rgb) + ); + --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; + --spectrum-global-color-static-chartreuse-300: rgb( + var(--spectrum-global-color-static-chartreuse-300-rgb) + ); + --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; + --spectrum-global-color-static-chartreuse-400: rgb( + var(--spectrum-global-color-static-chartreuse-400-rgb) + ); + --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; + --spectrum-global-color-static-chartreuse-500: rgb( + var(--spectrum-global-color-static-chartreuse-500-rgb) + ); + --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; + --spectrum-global-color-static-chartreuse-600: rgb( + var(--spectrum-global-color-static-chartreuse-600-rgb) + ); + --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; + --spectrum-global-color-static-chartreuse-700: rgb( + var(--spectrum-global-color-static-chartreuse-700-rgb) + ); + --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; + --spectrum-global-color-static-chartreuse-800: rgb( + var(--spectrum-global-color-static-chartreuse-800-rgb) + ); + --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; + --spectrum-global-color-static-celery-200: rgb( + var(--spectrum-global-color-static-celery-200-rgb) + ); + --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; + --spectrum-global-color-static-celery-300: rgb( + var(--spectrum-global-color-static-celery-300-rgb) + ); + --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; + --spectrum-global-color-static-celery-400: rgb( + var(--spectrum-global-color-static-celery-400-rgb) + ); + --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; + --spectrum-global-color-static-celery-500: rgb( + var(--spectrum-global-color-static-celery-500-rgb) + ); + --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; + --spectrum-global-color-static-celery-600: rgb( + var(--spectrum-global-color-static-celery-600-rgb) + ); + --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; + --spectrum-global-color-static-celery-700: rgb( + var(--spectrum-global-color-static-celery-700-rgb) + ); + --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; + --spectrum-global-color-static-celery-800: rgb( + var(--spectrum-global-color-static-celery-800-rgb) + ); + --spectrum-global-color-static-green-400-rgb: 29, 169, 115; + --spectrum-global-color-static-green-400: rgb( + var(--spectrum-global-color-static-green-400-rgb) + ); + --spectrum-global-color-static-green-500-rgb: 0, 148, 97; + --spectrum-global-color-static-green-500: rgb( + var(--spectrum-global-color-static-green-500-rgb) + ); + --spectrum-global-color-static-green-600-rgb: 0, 126, 80; + --spectrum-global-color-static-green-600: rgb( + var(--spectrum-global-color-static-green-600-rgb) + ); + --spectrum-global-color-static-green-700-rgb: 0, 105, 65; + --spectrum-global-color-static-green-700: rgb( + var(--spectrum-global-color-static-green-700-rgb) + ); + --spectrum-global-color-static-green-800-rgb: 0, 86, 53; + --spectrum-global-color-static-green-800: rgb( + var(--spectrum-global-color-static-green-800-rgb) + ); + --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; + --spectrum-global-color-static-seafoam-200: rgb( + var(--spectrum-global-color-static-seafoam-200-rgb) + ); + --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; + --spectrum-global-color-static-seafoam-300: rgb( + var(--spectrum-global-color-static-seafoam-300-rgb) + ); + --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; + --spectrum-global-color-static-seafoam-400: rgb( + var(--spectrum-global-color-static-seafoam-400-rgb) + ); + --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; + --spectrum-global-color-static-seafoam-500: rgb( + var(--spectrum-global-color-static-seafoam-500-rgb) + ); + --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; + --spectrum-global-color-static-seafoam-600: rgb( + var(--spectrum-global-color-static-seafoam-600-rgb) + ); + --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; + --spectrum-global-color-static-seafoam-700: rgb( + var(--spectrum-global-color-static-seafoam-700-rgb) + ); + --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; + --spectrum-global-color-static-seafoam-800: rgb( + var(--spectrum-global-color-static-seafoam-800-rgb) + ); + --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; + --spectrum-global-color-static-blue-200: rgb( + var(--spectrum-global-color-static-blue-200-rgb) + ); + --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; + --spectrum-global-color-static-blue-300: rgb( + var(--spectrum-global-color-static-blue-300-rgb) + ); + --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; + --spectrum-global-color-static-blue-400: rgb( + var(--spectrum-global-color-static-blue-400-rgb) + ); + --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; + --spectrum-global-color-static-blue-500: rgb( + var(--spectrum-global-color-static-blue-500-rgb) + ); + --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; + --spectrum-global-color-static-blue-600: rgb( + var(--spectrum-global-color-static-blue-600-rgb) + ); + --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; + --spectrum-global-color-static-blue-700: rgb( + var(--spectrum-global-color-static-blue-700-rgb) + ); + --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; + --spectrum-global-color-static-blue-800: rgb( + var(--spectrum-global-color-static-blue-800-rgb) + ); + --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; + --spectrum-global-color-static-indigo-200: rgb( + var(--spectrum-global-color-static-indigo-200-rgb) + ); + --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; + --spectrum-global-color-static-indigo-300: rgb( + var(--spectrum-global-color-static-indigo-300-rgb) + ); + --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; + --spectrum-global-color-static-indigo-400: rgb( + var(--spectrum-global-color-static-indigo-400-rgb) + ); + --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; + --spectrum-global-color-static-indigo-500: rgb( + var(--spectrum-global-color-static-indigo-500-rgb) + ); + --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; + --spectrum-global-color-static-indigo-600: rgb( + var(--spectrum-global-color-static-indigo-600-rgb) + ); + --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-700: rgb( + var(--spectrum-global-color-static-indigo-700-rgb) + ); + --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-800: rgb( + var(--spectrum-global-color-static-indigo-800-rgb) + ); + --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; + --spectrum-global-color-static-purple-400: rgb( + var(--spectrum-global-color-static-purple-400-rgb) + ); + --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; + --spectrum-global-color-static-purple-500: rgb( + var(--spectrum-global-color-static-purple-500-rgb) + ); + --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; + --spectrum-global-color-static-purple-600: rgb( + var(--spectrum-global-color-static-purple-600-rgb) + ); + --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; + --spectrum-global-color-static-purple-700: rgb( + var(--spectrum-global-color-static-purple-700-rgb) + ); + --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; + --spectrum-global-color-static-purple-800: rgb( + var(--spectrum-global-color-static-purple-800-rgb) + ); + --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; + --spectrum-global-color-static-fuchsia-400: rgb( + var(--spectrum-global-color-static-fuchsia-400-rgb) + ); + --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; + --spectrum-global-color-static-fuchsia-500: rgb( + var(--spectrum-global-color-static-fuchsia-500-rgb) + ); + --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; + --spectrum-global-color-static-fuchsia-600: rgb( + var(--spectrum-global-color-static-fuchsia-600-rgb) + ); + --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; + --spectrum-global-color-static-fuchsia-700: rgb( + var(--spectrum-global-color-static-fuchsia-700-rgb) + ); + --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; + --spectrum-global-color-static-fuchsia-800: rgb( + var(--spectrum-global-color-static-fuchsia-800-rgb) + ); + --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; + --spectrum-global-color-static-magenta-200: rgb( + var(--spectrum-global-color-static-magenta-200-rgb) + ); + --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; + --spectrum-global-color-static-magenta-300: rgb( + var(--spectrum-global-color-static-magenta-300-rgb) + ); + --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; + --spectrum-global-color-static-magenta-400: rgb( + var(--spectrum-global-color-static-magenta-400-rgb) + ); + --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; + --spectrum-global-color-static-magenta-500: rgb( + var(--spectrum-global-color-static-magenta-500-rgb) + ); + --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; + --spectrum-global-color-static-magenta-600: rgb( + var(--spectrum-global-color-static-magenta-600-rgb) + ); + --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; + --spectrum-global-color-static-magenta-700: rgb( + var(--spectrum-global-color-static-magenta-700-rgb) + ); + --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; + --spectrum-global-color-static-magenta-800: rgb( + var(--spectrum-global-color-static-magenta-800-rgb) + ); + --spectrum-global-color-static-transparent-white-200: #ffffff1a; + --spectrum-global-color-static-transparent-white-300: #ffffff40; + --spectrum-global-color-static-transparent-white-400: #fff6; + --spectrum-global-color-static-transparent-white-500: #ffffff8c; + --spectrum-global-color-static-transparent-white-600: #ffffffb3; + --spectrum-global-color-static-transparent-white-700: #fffc; + --spectrum-global-color-static-transparent-white-800: #ffffffe6; + --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; + --spectrum-global-color-static-transparent-white-900: rgb( + var(--spectrum-global-color-static-transparent-white-900-rgb) + ); + --spectrum-global-color-static-transparent-black-200: #0000001a; + --spectrum-global-color-static-transparent-black-300: #00000040; + --spectrum-global-color-static-transparent-black-400: #0006; + --spectrum-global-color-static-transparent-black-500: #0000008c; + --spectrum-global-color-static-transparent-black-600: #000000b3; + --spectrum-global-color-static-transparent-black-700: #000c; + --spectrum-global-color-static-transparent-black-800: #000000e6; + --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; + --spectrum-global-color-static-transparent-black-900: rgb( + var(--spectrum-global-color-static-transparent-black-900-rgb) + ); + --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, + #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, + #1a4b83, #1a3979, #1a266f, #191264, #180057; + --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, #a4e16d, + #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, #196b47, + #105c45, #094d41, #033f3e, #00313a; + --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, + #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, + #71167c, #560f74, #370b6e, #000968; + --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, + #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, + #3ea8a6, #208288, #076769, #00494b, #002c2d; + --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, + #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, + #397aa8, #1c5796, #163771, #10194d; + --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, + #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, + #2f74b3, #265191, #163670, #0b194c; + --spectrum-semantic-cta-background-color-default: var( + --spectrum-global-color-static-indigo-600 + ); + --spectrum-semantic-cta-background-color-hover: var( + --spectrum-global-color-static-indigo-700 + ); + --spectrum-semantic-cta-background-color-down: var( + --spectrum-global-color-static-indigo-800 + ); + --spectrum-semantic-cta-background-color-key-focus: var( + --spectrum-global-color-static-indigo-700 + ); + --spectrum-semantic-emphasized-border-color-default: var( + --spectrum-global-color-indigo-500 + ); + --spectrum-semantic-emphasized-border-color-hover: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-semantic-emphasized-border-color-down: var( + --spectrum-global-color-indigo-700 + ); + --spectrum-semantic-emphasized-border-color-key-focus: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-semantic-neutral-background-color-default: var( + --spectrum-global-color-static-gray-800 + ); + --spectrum-semantic-negative-background-color: var( + --spectrum-global-color-static-red-600 + ); + --spectrum-semantic-negative-color-default: var( + --spectrum-global-color-red-500 + ); + --spectrum-semantic-negative-color-hover: var( + --spectrum-global-color-red-600 + ); + --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-border-color: var( + --spectrum-global-color-red-400 + ); + --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-status-color: var( + --spectrum-global-color-red-400 + ); + --spectrum-semantic-negative-text-color-large: var( + --spectrum-global-color-red-500 + ); + --spectrum-semantic-negative-text-color-small: var( + --spectrum-global-color-red-600 + ); + --spectrum-semantic-negative-text-color-small-hover: var( + --spectrum-global-color-red-700 + ); + --spectrum-semantic-negative-text-color-small-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-semantic-negative-text-color-small-key-focus: var( + --spectrum-global-color-red-600 + ); + --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-color-key-focus: var( + --spectrum-global-color-red-400 + ); + --spectrum-semantic-negative-background-color-default: var( + --spectrum-global-color-static-red-600 + ); + --spectrum-semantic-negative-background-color-hover: var( + --spectrum-global-color-static-red-700 + ); + --spectrum-semantic-negative-background-color-down: var( + --spectrum-global-color-static-red-800 + ); + --spectrum-semantic-negative-background-color-key-focus: var( + --spectrum-global-color-static-red-700 + ); + --spectrum-semantic-notice-background-color: var( + --spectrum-global-color-static-orange-600 + ); + --spectrum-semantic-notice-color-default: var( + --spectrum-global-color-orange-500 + ); + --spectrum-semantic-notice-color-dark: var( + --spectrum-global-color-orange-600 + ); + --spectrum-semantic-notice-border-color: var( + --spectrum-global-color-orange-400 + ); + --spectrum-semantic-notice-icon-color: var( + --spectrum-global-color-orange-600 + ); + --spectrum-semantic-notice-status-color: var( + --spectrum-global-color-orange-400 + ); + --spectrum-semantic-notice-text-color-large: var( + --spectrum-global-color-orange-500 + ); + --spectrum-semantic-notice-text-color-small: var( + --spectrum-global-color-orange-600 + ); + --spectrum-semantic-notice-color-down: var( + --spectrum-global-color-orange-700 + ); + --spectrum-semantic-notice-color-key-focus: var( + --spectrum-global-color-orange-400 + ); + --spectrum-semantic-notice-background-color-default: var( + --spectrum-global-color-static-orange-600 + ); + --spectrum-semantic-notice-background-color-hover: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-semantic-notice-background-color-down: var( + --spectrum-global-color-static-orange-800 + ); + --spectrum-semantic-notice-background-color-key-focus: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-semantic-positive-background-color: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-semantic-positive-color-default: var( + --spectrum-global-color-green-500 + ); + --spectrum-semantic-positive-color-dark: var( + --spectrum-global-color-green-600 + ); + --spectrum-semantic-positive-border-color: var( + --spectrum-global-color-green-400 + ); + --spectrum-semantic-positive-icon-color: var( + --spectrum-global-color-green-600 + ); + --spectrum-semantic-positive-status-color: var( + --spectrum-global-color-green-400 + ); + --spectrum-semantic-positive-text-color-large: var( + --spectrum-global-color-green-500 + ); + --spectrum-semantic-positive-text-color-small: var( + --spectrum-global-color-green-600 + ); + --spectrum-semantic-positive-color-down: var( + --spectrum-global-color-green-700 + ); + --spectrum-semantic-positive-color-key-focus: var( + --spectrum-global-color-green-400 + ); + --spectrum-semantic-positive-background-color-default: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-semantic-positive-background-color-hover: var( + --spectrum-global-color-static-green-700 + ); + --spectrum-semantic-positive-background-color-down: var( + --spectrum-global-color-static-green-800 + ); + --spectrum-semantic-positive-background-color-key-focus: var( + --spectrum-global-color-static-green-700 + ); + --spectrum-semantic-informative-background-color: var( + --spectrum-global-color-static-blue-600 + ); + --spectrum-semantic-informative-color-default: var( + --spectrum-global-color-blue-500 + ); + --spectrum-semantic-informative-color-dark: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-informative-border-color: var( + --spectrum-global-color-blue-400 + ); + --spectrum-semantic-informative-icon-color: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-informative-status-color: var( + --spectrum-global-color-blue-400 + ); + --spectrum-semantic-informative-text-color-large: var( + --spectrum-global-color-blue-500 + ); + --spectrum-semantic-informative-text-color-small: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-informative-color-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-semantic-informative-color-key-focus: var( + --spectrum-global-color-blue-400 + ); + --spectrum-semantic-informative-background-color-default: var( + --spectrum-global-color-static-blue-600 + ); + --spectrum-semantic-informative-background-color-hover: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-informative-background-color-down: var( + --spectrum-global-color-static-blue-800 + ); + --spectrum-semantic-informative-background-color-key-focus: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-neutral-background-color-hover: var( + --spectrum-global-color-static-gray-800 + ); + --spectrum-semantic-neutral-background-color-down: var( + --spectrum-global-color-static-gray-900 + ); + --spectrum-semantic-neutral-background-color-key-focus: var( + --spectrum-global-color-static-gray-800 + ); + --spectrum-semantic-presence-color-1: var( + --spectrum-global-color-static-red-500 + ); + --spectrum-semantic-presence-color-2: var( + --spectrum-global-color-static-orange-400 + ); + --spectrum-semantic-presence-color-3: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; + --spectrum-semantic-presence-color-4: rgb( + var(--spectrum-semantic-presence-color-4-rgb) + ); + --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; + --spectrum-semantic-presence-color-5: rgb( + var(--spectrum-semantic-presence-color-5-rgb) + ); + --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; + --spectrum-semantic-presence-color-6: rgb( + var(--spectrum-semantic-presence-color-6-rgb) + ); + --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; + --spectrum-semantic-presence-color-7: rgb( + var(--spectrum-semantic-presence-color-7-rgb) + ); + --spectrum-semantic-presence-color-8: var( + --spectrum-global-color-static-fuchsia-600 + ); + --spectrum-global-dimension-static-percent-50: 50%; + --spectrum-global-dimension-static-percent-70: 70%; + --spectrum-global-dimension-static-percent-100: 100%; + --spectrum-global-dimension-static-breakpoint-xsmall: 304px; + --spectrum-global-dimension-static-breakpoint-small: 768px; + --spectrum-global-dimension-static-breakpoint-medium: 1280px; + --spectrum-global-dimension-static-breakpoint-large: 1768px; + --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; + --spectrum-global-dimension-static-grid-columns: 12; + --spectrum-global-dimension-static-grid-fluid-width: 100%; + --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; + --spectrum-global-dimension-static-size-0: 0px; + --spectrum-global-dimension-static-size-10: 1px; + --spectrum-global-dimension-static-size-25: 2px; + --spectrum-global-dimension-static-size-40: 3px; + --spectrum-global-dimension-static-size-50: 4px; + --spectrum-global-dimension-static-size-65: 5px; + --spectrum-global-dimension-static-size-75: 6px; + --spectrum-global-dimension-static-size-85: 7px; + --spectrum-global-dimension-static-size-100: 8px; + --spectrum-global-dimension-static-size-115: 9px; + --spectrum-global-dimension-static-size-125: 10px; + --spectrum-global-dimension-static-size-130: 11px; + --spectrum-global-dimension-static-size-150: 12px; + --spectrum-global-dimension-static-size-160: 13px; + --spectrum-global-dimension-static-size-175: 14px; + --spectrum-global-dimension-static-size-185: 15px; + --spectrum-global-dimension-static-size-200: 16px; + --spectrum-global-dimension-static-size-225: 18px; + --spectrum-global-dimension-static-size-250: 20px; + --spectrum-global-dimension-static-size-275: 22px; + --spectrum-global-dimension-static-size-300: 24px; + --spectrum-global-dimension-static-size-325: 26px; + --spectrum-global-dimension-static-size-350: 28px; + --spectrum-global-dimension-static-size-400: 32px; + --spectrum-global-dimension-static-size-450: 36px; + --spectrum-global-dimension-static-size-500: 40px; + --spectrum-global-dimension-static-size-550: 44px; + --spectrum-global-dimension-static-size-600: 48px; + --spectrum-global-dimension-static-size-700: 56px; + --spectrum-global-dimension-static-size-800: 64px; + --spectrum-global-dimension-static-size-900: 72px; + --spectrum-global-dimension-static-size-1000: 80px; + --spectrum-global-dimension-static-size-1200: 96px; + --spectrum-global-dimension-static-size-1700: 136px; + --spectrum-global-dimension-static-size-2400: 192px; + --spectrum-global-dimension-static-size-2500: 200px; + --spectrum-global-dimension-static-size-2600: 208px; + --spectrum-global-dimension-static-size-2800: 224px; + --spectrum-global-dimension-static-size-3200: 256px; + --spectrum-global-dimension-static-size-3400: 272px; + --spectrum-global-dimension-static-size-3500: 280px; + --spectrum-global-dimension-static-size-3600: 288px; + --spectrum-global-dimension-static-size-3800: 304px; + --spectrum-global-dimension-static-size-4600: 368px; + --spectrum-global-dimension-static-size-5000: 400px; + --spectrum-global-dimension-static-size-6000: 480px; + --spectrum-global-dimension-static-size-16000: 1280px; + --spectrum-global-dimension-static-font-size-50: 11px; + --spectrum-global-dimension-static-font-size-75: 12px; + --spectrum-global-dimension-static-font-size-100: 14px; + --spectrum-global-dimension-static-font-size-150: 15px; + --spectrum-global-dimension-static-font-size-200: 16px; + --spectrum-global-dimension-static-font-size-300: 18px; + --spectrum-global-dimension-static-font-size-400: 20px; + --spectrum-global-dimension-static-font-size-500: 22px; + --spectrum-global-dimension-static-font-size-600: 25px; + --spectrum-global-dimension-static-font-size-700: 28px; + --spectrum-global-dimension-static-font-size-800: 32px; + --spectrum-global-dimension-static-font-size-900: 36px; + --spectrum-global-dimension-static-font-size-1000: 40px; + --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, + "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-family-serif: adobe-clean-serif, "Source Serif Pro", + Georgia, serif; + --spectrum-global-font-family-code: "Source Code Pro", Monaco, monospace; + --spectrum-global-font-weight-thin: 100; + --spectrum-global-font-weight-ultra-light: 200; + --spectrum-global-font-weight-light: 300; + --spectrum-global-font-weight-regular: 400; + --spectrum-global-font-weight-medium: 500; + --spectrum-global-font-weight-semi-bold: 600; + --spectrum-global-font-weight-bold: 700; + --spectrum-global-font-weight-extra-bold: 800; + --spectrum-global-font-weight-black: 900; + --spectrum-global-font-style-regular: normal; + --spectrum-global-font-style-italic: italic; + --spectrum-global-font-letter-spacing-none: 0; + --spectrum-global-font-letter-spacing-small: 0.0125em; + --spectrum-global-font-letter-spacing-han: 0.05em; + --spectrum-global-font-letter-spacing-medium: 0.06em; + --spectrum-global-font-line-height-large: 1.7; + --spectrum-global-font-line-height-medium: 1.5; + --spectrum-global-font-line-height-small: 1.3; + --spectrum-global-font-multiplier-0: 0em; + --spectrum-global-font-multiplier-25: 0.25em; + --spectrum-global-font-multiplier-75: 0.75em; + --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, + "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, + "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, + source-han-traditional, "MingLiu", "Heiti TC Light", "sans-serif"; + --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, + source-han-simplified-c, "SimSun", "Heiti SC Light", "sans-serif"; + --spectrum-global-font-font-family-ko: adobe-clean-han-korean, + source-han-korean, "Malgun Gothic", "Apple Gothic", "sans-serif"; + --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, + "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", YuGothic, + "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", + "sans-serif"; + --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, + source-han-traditional, "MingLiu", "Heiti TC Light", adobe-clean, + "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-alias-border-size-thin: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-border-size-thick: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-size-thicker: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-size-thickest: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thin: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-offset-thick: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-offset-thicker: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thickest: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-baseline: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-grid-gutter-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-gutter-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-gutter-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-gutter-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-gutter-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-margin-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-margin-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-margin-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-margin-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-margin-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-layout-region-margin-bottom-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-layout-region-margin-bottom-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-radial-reaction-size-default: var( + --spectrum-global-dimension-static-size-550 + ); + --spectrum-alias-focus-ring-gap: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-focus-ring-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-loupe-entry-animation-duration: var( + --spectrum-global-animation-duration-300 + ); + --spectrum-alias-loupe-exit-animation-duration: var( + --spectrum-global-animation-duration-300 + ); + --spectrum-alias-heading-text-font-weight-regular: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-heavy: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-heading-text-font-weight-regular-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-light: var( + --spectrum-global-font-weight-light + ); + --spectrum-alias-heading-text-font-weight-light-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-heading-text-font-weight-heavy-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-quiet: var( + --spectrum-global-font-weight-light + ); + --spectrum-alias-heading-text-font-weight-quiet-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-heading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-strong-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-margin-bottom: var( + --spectrum-global-font-multiplier-25 + ); + --spectrum-alias-subheading-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-subheading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-body-text-font-family: var( + --spectrum-global-font-family-base + ); + --spectrum-alias-body-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-body-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-body-text-font-weight-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-body-margin-bottom: var( + --spectrum-global-font-multiplier-75 + ); + --spectrum-alias-detail-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-detail-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-detail-text-font-weight-light: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-detail-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-heading-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-article-heading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-heading-text-font-weight-quiet: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-article-heading-text-font-weight-quiet-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-article-body-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-article-body-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-subheading-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-article-subheading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-detail-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-article-detail-text-font-weight-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-code-text-font-family: var( + --spectrum-global-font-family-code + ); + --spectrum-alias-code-text-font-weight-regular: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-code-text-font-weight-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-code-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0); + --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); + --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); + --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); + --spectrum-alias-font-family-zhhans: var( + --spectrum-global-font-font-family-zhhans + ); + --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); + --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); + --spectrum-alias-font-family-condensed: var( + --spectrum-global-font-font-family-condensed + ); + --spectrum-alias-button-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-component-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-han-component-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-serif-text-font-family: var( + --spectrum-global-font-family-serif + ); + --spectrum-alias-han-heading-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-han-heading-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var( + --spectrum-global-font-weight-extra-bold + ); + --spectrum-alias-han-heading-text-font-weight-regular-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-heading-text-font-weight-light: var( + --spectrum-global-font-weight-light + ); + --spectrum-alias-han-heading-text-font-weight-light-emphasis: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-han-heading-text-font-weight-light-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-heading-text-font-weight-heavy: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-body-text-line-height: var( + --spectrum-global-font-line-height-large + ); + --spectrum-alias-han-body-text-font-weight-regular: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-han-body-text-font-weight-emphasis: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-body-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-subheading-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-subheading-text-font-weight-emphasis: var( + --spectrum-global-font-weight-extra-bold + ); + --spectrum-alias-han-subheading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-detail-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-han-detail-text-font-weight-emphasis: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-detail-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); } :root, :host { - --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); - --spectrum-alias-item-rounded-border-radius-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-border-radius-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-border-radius-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-border-radius-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-text-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-item-text-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-item-text-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-item-text-size-xl: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-item-text-padding-top-s: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-item-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-text-padding-top-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-text-padding-bottom-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-text-padding-bottom-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-icon-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-top-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-icon-padding-bottom-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-bottom-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-bottom-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-bottom-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); - --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); - --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); - --spectrum-alias-item-rounded-padding-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-padding-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-padding-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-padding-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-icononly-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icononly-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icononly-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icononly-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-gap-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-gap-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-gap-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-control-gap-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-workflow-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-workflow-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); - --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); - --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-mark-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-ui-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-ui-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-ui-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-ui-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-clearbutton-gap-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-clearbutton-gap-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-workflow-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-rounded-workflow-padding-left-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-padding-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-top-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-bottom-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-bottom-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-bottom-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-mark-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-mark-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-1-size-s: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-item-control-1-size-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-2-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-2-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-2-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-control-2-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-2-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-2-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-3-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-3-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-3-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-3-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-3-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-3-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-mark-size-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-size-l: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-item-mark-size-xl: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-heading-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-xxl-text-size: var( - --spectrum-global-dimension-font-size-1100 - ); - --spectrum-alias-heading-xl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-l-text-size: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-m-text-size: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-xxl-margin-top: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-xl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-l-margin-top: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-m-margin-top: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-heading-han-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-han-xxl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-han-xl-text-size: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-l-text-size: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-han-m-text-size: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-han-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-han-xxl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-xl-margin-top: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-han-l-margin-top: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-han-m-margin-top: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-component-border-radius: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-component-border-radius-quiet: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-component-focusring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-gap-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-size-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-focusring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-quiet-focusline-gap: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-radius-xsmall: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-border-radius-small: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-border-radius-regular: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-border-radius-medium: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-border-radius-large: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-border-radius-xlarge: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-focus-ring-border-radius-xsmall: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-focus-ring-border-radius-medium: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-focus-ring-border-radius-large: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-focus-ring-border-radius-xlarge: var( - --spectrum-global-dimension-size-350 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-two-size-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-two-size-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-control-two-size-xl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-control-two-size-xxl: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-control-two-border-radius-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-control-two-border-radius-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-control-two-border-radius-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-control-two-border-radius-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-border-radius-xxl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-control-two-focus-ring-border-radius-s: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-control-two-focus-ring-border-radius-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-two-focus-ring-border-radius-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xxl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-three-height-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-control-three-height-xl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-control-three-width-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-infieldbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-infieldbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-infieldbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-infieldbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-infieldbutton-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-padding-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-padding-l: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-padding-xl: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-border-radius: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-infieldbutton-border-radius-sided: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-infieldbutton-border-size: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-infieldbutton-fill-padding-s: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-infieldbutton-fill-padding-m: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-infieldbutton-fill-padding-l: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-infieldbutton-fill-padding-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-infieldbutton-full-height-s: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-infieldbutton-full-height-m: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-infieldbutton-full-height-l: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-infieldbutton-full-height-xl: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-infieldbutton-half-height-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-infieldbutton-half-height-m: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-infieldbutton-half-height-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-infieldbutton-half-height-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-stepperbutton-gap: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-width-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-stepperbutton-width-m: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-stepperbutton-width-l: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-stepperbutton-width-xl: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-stepperbutton-icon-x-offset-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-x-offset-m: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-stepperbutton-icon-x-offset-l: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-stepperbutton-icon-x-offset-xl: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-s: 0; - --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: 0; - --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: 0; - --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: 0; - --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: 0; - --spectrum-alias-stepperbutton-radius-touching: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-clearbutton-icon-margin-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-clearbutton-border-radius: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-pickerbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-pickerbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-pickerbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-label-padding-y-s: 0; - --spectrum-alias-pickerbutton-label-padding-y-m: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-pickerbutton-label-padding-y-l: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-pickerbutton-label-padding-y-xl: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-pickerbutton-border-radius-rounded: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-border-radius-rounded-sided: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-search-border-radius: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-combobox-quiet-button-offset-x: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-thumbnail-border-radius-small: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-focus-ring-gap-small: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size-small: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-border-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-avatar-border-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-actiongroup-button-gap: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-compact: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-actiongroup-button-gap-quiet: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-quiet-compact: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-search-padding-left-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-search-padding-left-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-search-padding-left-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-tag-border-radius: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-tag-border-size-default: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-border-size-disabled: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-border-size-key-focus: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-padding-right-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-tag-padding-right-m: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-tag-padding-right-l: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-250); - --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-300); - --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-400); - --spectrum-alias-tag-font-size-s: var( - --spectrum-global-dimension-font-size-50 - ); - --spectrum-alias-tag-font-size-m: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-tag-font-size-l: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-tag-text-padding-top-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-text-padding-top-l: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-175); - --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-200); - --spectrum-alias-tag-icon-margin-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-tag-icon-margin-top-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-icon-margin-top-l: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-clearbutton-width-s: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-tag-clearbutton-width-m: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-tag-clearbutton-width-l: var( - --spectrum-global-dimension-size-350 - ); - --spectrum-alias-tag-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-30 - ); - --spectrum-alias-tag-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-tag-focusring-gap: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-colorloupe-width: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-colorloupe-height: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-search-border-radius-quiet: 0; - --spectrum-alias-percent-50: 50%; - --spectrum-alias-percent-70: 70%; - --spectrum-alias-percent-100: 100%; - --spectrum-alias-breakpoint-xsmall: 304px; - --spectrum-alias-breakpoint-small: 768px; - --spectrum-alias-breakpoint-medium: 1280px; - --spectrum-alias-breakpoint-large: 1768px; - --spectrum-alias-breakpoint-xlarge: 2160px; - --spectrum-alias-grid-columns: 12; - --spectrum-alias-grid-fluid-width: 100%; - --spectrum-alias-grid-fixed-max-width: 1280px; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); - --spectrum-alias-dropshadow-offset-y: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-font-size-default: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-layout-label-gap-size: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-pill-button-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-pill-button-text-baseline: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-single-line-height: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-single-line-width: var( - --spectrum-global-dimension-size-2400 - ); - --spectrum-alias-workflow-icon-size-s: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-workflow-icon-size-m: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-workflow-icon-size-xl: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-alert-size-75: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-alert-size-100: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-ui-icon-alert-size-200: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-ui-icon-alert-size-300: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-height: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-width: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-width: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-ui-icon-cornertriangle-size-75: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-200: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-ui-icon-asterisk-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-100: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); - --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); - --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); - --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); - --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); - --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); - --spectrum-alias-tag-border-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-icon-margin-right-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-right-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-icon-margin-right-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-focusring-size: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-tag-focusring-gap-selected: var( - --spectrum-global-dimension-size-25 - ); + --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); + --spectrum-alias-item-rounded-border-radius-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-rounded-border-radius-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-rounded-border-radius-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-rounded-border-radius-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-item-text-size-s: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-item-text-size-m: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-item-text-size-l: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-item-text-size-xl: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-item-text-padding-top-s: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-item-text-padding-top-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-text-padding-top-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-text-padding-bottom-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-text-padding-bottom-l: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-text-padding-bottom-xl: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-icon-padding-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icon-padding-top-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icon-padding-top-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icon-padding-top-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-icon-padding-bottom-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icon-padding-bottom-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icon-padding-bottom-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icon-padding-bottom-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-rounded-padding-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-rounded-padding-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-rounded-padding-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-rounded-padding-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-item-icononly-padding-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icononly-padding-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icononly-padding-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icononly-padding-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-gap-s: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-gap-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-gap-l: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-control-gap-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-workflow-icon-gap-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-workflow-icon-gap-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-workflow-icon-gap-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-workflow-icon-gap-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-ui-icon-gap-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-ui-icon-gap-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-ui-icon-gap-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-clearbutton-gap-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-clearbutton-gap-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-clearbutton-gap-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-clearbutton-gap-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-workflow-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-workflow-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-workflow-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-rounded-workflow-padding-left-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-rounded-workflow-padding-left-l: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-mark-padding-top-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-item-mark-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-mark-padding-top-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-mark-padding-bottom-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-item-mark-padding-bottom-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-mark-padding-bottom-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-mark-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-mark-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-mark-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-control-1-size-s: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-item-control-1-size-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-2-size-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-control-2-size-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-control-2-size-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-control-2-size-xxl: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-control-2-border-radius-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-2-border-radius-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-control-2-border-radius-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-2-border-radius-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-2-border-radius-xxl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-2-padding-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-2-padding-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-2-padding-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-2-padding-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-control-3-height-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-control-3-height-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-control-3-height-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-control-3-border-radius-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-3-border-radius-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-control-3-border-radius-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-3-border-radius-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-3-padding-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-3-padding-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-3-padding-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-padding-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275); + --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325); + --spectrum-alias-heading-xxxl-text-size: var( + --spectrum-global-dimension-font-size-1300 + ); + --spectrum-alias-heading-xxl-text-size: var( + --spectrum-global-dimension-font-size-1100 + ); + --spectrum-alias-heading-xl-text-size: var( + --spectrum-global-dimension-font-size-900 + ); + --spectrum-alias-heading-l-text-size: var( + --spectrum-global-dimension-font-size-700 + ); + --spectrum-alias-heading-m-text-size: var( + --spectrum-global-dimension-font-size-500 + ); + --spectrum-alias-heading-s-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-heading-xs-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-xxs-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-xxxl-margin-top: var( + --spectrum-global-dimension-font-size-1200 + ); + --spectrum-alias-heading-xxl-margin-top: var( + --spectrum-global-dimension-font-size-900 + ); + --spectrum-alias-heading-xl-margin-top: var( + --spectrum-global-dimension-font-size-800 + ); + --spectrum-alias-heading-l-margin-top: var( + --spectrum-global-dimension-font-size-600 + ); + --spectrum-alias-heading-m-margin-top: var( + --spectrum-global-dimension-font-size-400 + ); + --spectrum-alias-heading-s-margin-top: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-xs-margin-top: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-xxs-margin-top: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-heading-han-xxxl-text-size: var( + --spectrum-global-dimension-font-size-1300 + ); + --spectrum-alias-heading-han-xxl-text-size: var( + --spectrum-global-dimension-font-size-900 + ); + --spectrum-alias-heading-han-xl-text-size: var( + --spectrum-global-dimension-font-size-800 + ); + --spectrum-alias-heading-han-l-text-size: var( + --spectrum-global-dimension-font-size-600 + ); + --spectrum-alias-heading-han-m-text-size: var( + --spectrum-global-dimension-font-size-400 + ); + --spectrum-alias-heading-han-s-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-heading-han-xs-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-han-xxs-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-han-xxxl-margin-top: var( + --spectrum-global-dimension-font-size-1200 + ); + --spectrum-alias-heading-han-xxl-margin-top: var( + --spectrum-global-dimension-font-size-800 + ); + --spectrum-alias-heading-han-xl-margin-top: var( + --spectrum-global-dimension-font-size-700 + ); + --spectrum-alias-heading-han-l-margin-top: var( + --spectrum-global-dimension-font-size-500 + ); + --spectrum-alias-heading-han-m-margin-top: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-heading-han-s-margin-top: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-han-xs-margin-top: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-han-xxs-margin-top: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-component-border-radius: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-component-border-radius-quiet: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-component-focusring-gap: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-component-focusring-gap-emphasized: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-component-focusring-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-component-focusring-size-emphasized: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-input-focusring-gap: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-input-quiet-focusline-gap: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-radius-xsmall: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-border-radius-small: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-border-radius-regular: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-border-radius-medium: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-border-radius-large: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-border-radius-xlarge: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-focus-ring-border-radius-xsmall: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-focus-ring-border-radius-medium: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-focus-ring-border-radius-large: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-focus-ring-border-radius-xlarge: var( + --spectrum-global-dimension-size-350 + ); + --spectrum-alias-control-two-size-s: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-control-two-size-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-control-two-size-l: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-control-two-size-xl: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-control-two-size-xxl: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-control-two-border-radius-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-control-two-border-radius-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-control-two-border-radius-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-control-two-border-radius-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-control-two-border-radius-xxl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-control-two-focus-ring-border-radius-s: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-control-two-focus-ring-border-radius-m: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-control-two-focus-ring-border-radius-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-control-two-focus-ring-border-radius-xl: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-control-two-focus-ring-border-radius-xxl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-control-three-height-s: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-control-three-height-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-control-three-height-l: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-control-three-height-xl: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-control-three-width-s: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-infieldbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-infieldbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-infieldbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-infieldbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-infieldbutton-padding-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-padding-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-padding-l: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-padding-xl: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-border-radius: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-infieldbutton-border-radius-sided: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-infieldbutton-border-size: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-infieldbutton-fill-padding-s: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-infieldbutton-fill-padding-m: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-infieldbutton-fill-padding-l: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-infieldbutton-fill-padding-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-infieldbutton-full-height-s: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-infieldbutton-full-height-m: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-infieldbutton-full-height-l: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-infieldbutton-full-height-xl: var( + --spectrum-global-dimension-size-500 + ); + --spectrum-alias-infieldbutton-half-height-s: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-infieldbutton-half-height-m: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-infieldbutton-half-height-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-infieldbutton-half-height-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-stepperbutton-gap: var(--spectrum-global-dimension-size-25); + --spectrum-alias-stepperbutton-width-s: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-stepperbutton-width-m: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-stepperbutton-width-l: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-stepperbutton-width-xl: var( + --spectrum-global-dimension-size-325 + ); + --spectrum-alias-stepperbutton-icon-x-offset-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-icon-x-offset-m: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-stepperbutton-icon-x-offset-l: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-stepperbutton-icon-x-offset-xl: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-s: 0; + --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: 0; + --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: 0; + --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: 0; + --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: 0; + --spectrum-alias-stepperbutton-radius-touching: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-clearbutton-icon-margin-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-clearbutton-icon-margin-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-clearbutton-icon-margin-l: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-clearbutton-icon-margin-xl: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-clearbutton-border-radius: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-pickerbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-pickerbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-pickerbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-label-padding-y-s: 0; + --spectrum-alias-pickerbutton-label-padding-y-m: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-pickerbutton-label-padding-y-l: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-pickerbutton-label-padding-y-xl: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-pickerbutton-border-radius-rounded: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-border-radius-rounded-sided: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-search-border-radius: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-combobox-quiet-button-offset-x: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-thumbnail-border-radius-small: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-focus-ring-gap-small: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-focus-ring-size-small: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-input-border-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-avatar-border-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-actiongroup-button-gap: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-compact: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-actiongroup-button-gap-quiet: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-quiet-compact: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-search-padding-left-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-search-padding-left-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-search-padding-left-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-search-padding-left-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-tag-border-radius: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-border-size-default: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-border-size-disabled: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-border-size-key-focus: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-padding-right-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-tag-padding-right-m: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-tag-padding-right-l: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-250); + --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-font-size-s: var( + --spectrum-global-dimension-font-size-50 + ); + --spectrum-alias-tag-font-size-m: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-tag-font-size-l: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-tag-text-padding-top-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-text-padding-top-l: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-175); + --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-tag-icon-margin-top-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-tag-icon-margin-top-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-icon-margin-top-l: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-clearbutton-width-s: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-tag-clearbutton-width-m: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-tag-clearbutton-width-l: var( + --spectrum-global-dimension-size-350 + ); + --spectrum-alias-tag-clearbutton-icon-margin-s: var( + --spectrum-global-dimension-size-30 + ); + --spectrum-alias-tag-clearbutton-icon-margin-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-clearbutton-icon-margin-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-focusring-border-radius: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-tag-focusring-gap: var(--spectrum-global-dimension-size-25); + --spectrum-alias-colorloupe-width: var( + --spectrum-global-dimension-static-size-450 + ); + --spectrum-alias-colorloupe-height: var( + --spectrum-global-dimension-static-size-550 + ); + --spectrum-alias-search-border-radius-quiet: 0; + --spectrum-alias-percent-50: 50%; + --spectrum-alias-percent-70: 70%; + --spectrum-alias-percent-100: 100%; + --spectrum-alias-breakpoint-xsmall: 304px; + --spectrum-alias-breakpoint-small: 768px; + --spectrum-alias-breakpoint-medium: 1280px; + --spectrum-alias-breakpoint-large: 1768px; + --spectrum-alias-breakpoint-xlarge: 2160px; + --spectrum-alias-grid-columns: 12; + --spectrum-alias-grid-fluid-width: 100%; + --spectrum-alias-grid-fixed-max-width: 1280px; + --spectrum-alias-border-size-thin: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-border-size-thick: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-size-thicker: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-size-thickest: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thin: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-offset-thick: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-offset-thicker: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thickest: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-baseline: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-grid-gutter-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-gutter-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-gutter-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-gutter-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-gutter-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-margin-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-margin-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-margin-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-margin-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-margin-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-layout-region-margin-bottom-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-layout-region-margin-bottom-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-radial-reaction-size-default: var( + --spectrum-global-dimension-static-size-550 + ); + --spectrum-alias-focus-ring-gap: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-focus-ring-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); + --spectrum-alias-dropshadow-offset-y: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-font-size-default: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-layout-label-gap-size: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-pill-button-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-pill-button-text-baseline: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-single-line-height: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-single-line-width: var( + --spectrum-global-dimension-size-2400 + ); + --spectrum-alias-workflow-icon-size-s: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-workflow-icon-size-m: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-workflow-icon-size-xl: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-ui-icon-alert-size-75: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-ui-icon-alert-size-100: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-ui-icon-alert-size-200: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-ui-icon-alert-size-300: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-height: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-width: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-width: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-ui-icon-cornertriangle-size-75: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-ui-icon-cornertriangle-size-200: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-ui-icon-asterisk-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-asterisk-size-100: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); + --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); + --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); + --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); + --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); + --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-border-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-icon-margin-right-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-margin-right-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-icon-margin-right-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25); + --spectrum-alias-tag-focusring-gap-selected: var( + --spectrum-global-dimension-size-25 + ); } :root, :host { - --spectrum-alias-colorhandle-outer-border-color: #0000006b; - --spectrum-alias-component-text-color-selected-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-text-color-selected-hover: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-selected-down: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-selected-key-focus: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-selected-mouse-focus: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-icon-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-icon-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-hover: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-component-background-color-down: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-component-background-color-key-focus: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-component-background-color-quiet-hover: var( - --spectrum-alias-component-background-color-hover - ); - --spectrum-alias-component-background-color-quiet-down: var( - --spectrum-alias-component-background-color-down - ); - --spectrum-alias-component-background-color-quiet-key-focus: var( - --spectrum-alias-component-background-color-key-focus - ); - --spectrum-alias-component-background-color-selected-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-background-color-selected-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-background-color-selected-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-background-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-border-color-default: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-component-border-color-hover: var( - --spectrum-alias-component-background-color-hover - ); - --spectrum-alias-component-border-color-down: var( - --spectrum-alias-component-background-color-down - ); - --spectrum-alias-component-border-color-key-focus: var( - --spectrum-alias-component-background-color-key-focus - ); - --spectrum-alias-component-border-color-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-border-color-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-component-border-color-selected-down: var( - --spectrum-alias-component-background-color-selected-down - ); - --spectrum-alias-component-border-color-selected-key-focus: var( - --spectrum-alias-component-background-color-selected-key-focus - ); - --spectrum-alias-component-border-color-quiet-key-focus: var( - --spectrum-alias-component-background-color-quiet-default - ); - --spectrum-alias-component-border-color-quiet-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-border-color-quiet-selected-hover: var( - --spectrum-alias-component-background-color-quiet-selected-hover - ); - --spectrum-alias-component-border-color-quiet-selected-down: var( - --spectrum-alias-component-background-color-quiet-selected-down - ); - --spectrum-alias-component-border-color-quiet-selected-key-focus: var( - --spectrum-alias-component-background-color-quiet-selected-key-focus - ); - --spectrum-alias-toggle-background-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-default: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-hover: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-down: var( - --spectrum-global-color-indigo-700 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-toggle-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-border-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-border-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-border-color-default: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tag-border-color-hover: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-tag-border-color-down: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-tag-border-color-key-focus: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-tag-border-color-disabled-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-border-color-error-key-focus: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-focusring-border-color-key-focus: var( - --spectrum-alias-focus-ring-color - ); - --spectrum-alias-tag-background-color-disabled: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-tag-background-color-default: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-tag-background-color-hover: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tag-background-color-down: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-tag-background-color-key-focus: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tag-background-color-error-default: var( - --spectrum-alias-tag-background-color-default - ); - --spectrum-alias-tag-background-color-error-hover: var( - --spectrum-alias-tag-background-color-hover - ); - --spectrum-alias-tag-background-color-error-down: var( - --spectrum-alias-tag-background-color-down - ); - --spectrum-alias-tag-background-color-error-key-focus: var( - --spectrum-alias-tag-background-color-key-focus - ); - --spectrum-alias-avatar-border-color-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-avatar-border-color-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-avatar-border-color-selected-down: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-avatar-border-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-link-primary-text-color-default: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-link-primary-text-color-hover: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-link-primary-text-color-down: var( - --spectrum-global-color-indigo-700 - ); - --spectrum-alias-link-primary-text-color-key-focus: var( - --spectrum-alias-text-color-key-focus - ); - --spectrum-alias-link-secondary-text-color-default: var( - --spectrum-alias-text-color - ); - --spectrum-alias-link-secondary-text-color-hover: var( - --spectrum-alias-link-primary-text-color-hover - ); - --spectrum-alias-link-secondary-text-color-down: var( - --spectrum-alias-link-primary-text-color-down - ); - --spectrum-alias-link-secondary-text-color-key-focus: var( - --spectrum-alias-link-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-background-color-default: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-default: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-default: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-secondary-background-color-default: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-default: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-default: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-negative-background-color-default: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-default: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-default: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-input-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-input-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-input-border-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-input-border-color-mouse-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-input-border-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-input-border-color-invalid-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-yellow-background-color-default: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-yellow-background-color-hover: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-yellow-background-color-key-focus: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-yellow-background-color-down: var( - --spectrum-global-color-static-yellow-600 - ); - --spectrum-alias-infieldbutton-background-color: transparent; - --spectrum-alias-infieldbutton-fill-border-color-default: transparent; - --spectrum-alias-infieldbutton-fill-border-color-hover: transparent; - --spectrum-alias-infieldbutton-fill-border-color-down: transparent; - --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: transparent; - --spectrum-alias-infieldbutton-fill-border-color-key-focus: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-default: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-default: #0000001a; - --spectrum-alias-actionbutton-staticBlack-border-color-hover: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-down: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; - --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; - --spectrum-alias-actionbutton-staticWhite-border-color-default: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-default: #ffffff1a; - --spectrum-alias-actionbutton-staticWhite-border-color-hover: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-down: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; - --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; - --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); - --spectrum-alias-thumbnail-darksquare-background-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-thumbnail-lightsquare-background-color: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-tabs-divider-background-color-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tabs-divider-background-color-quiet: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-tabitem-text-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-tabitem-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-down: var( - --spectrum-alias-text-color-down - ); - --spectrum-alias-tabitem-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-mouse-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-selected-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tabitem-text-color-selected-hover: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-down: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-default: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-down: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tabitem-selection-indicator-color-emphasized: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-icon-color-disabled: var( - --spectrum-alias-text-color-disabled - ); - --spectrum-alias-tabitem-icon-color-default: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-icon-color-hover: var( - --spectrum-alias-tabitem-text-color-hover - ); - --spectrum-alias-tabitem-icon-color-down: var( - --spectrum-alias-tabitem-text-color-down - ); - --spectrum-alias-tabitem-icon-color-key-focus: var( - --spectrum-alias-tabitem-text-color-hover - ); - --spectrum-alias-tabitem-icon-color-mouse-focus: var( - --spectrum-alias-tabitem-text-color-down - ); - --spectrum-alias-tabitem-icon-color-selected: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-icon-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-icon-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-alias-assetcard-overlay-background-color: #6d73f633; - --spectrum-alias-assetcard-border-color-selected: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-alias-assetcard-border-color-selected-hover: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-alias-assetcard-border-color-selected-down: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-transparent-blue-background-color-mouse-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-transparent-red-background-color-hover: #9a000026; - --spectrum-alias-transparent-red-background-color-down: #7c00004d; - --spectrum-alias-transparent-red-background-color-key-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color-mouse-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-component-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-key-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-mouse-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-text-color-emphasized-selected-hover: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-down: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-error-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-component-text-color-error-hover: var( - --spectrum-semantic-negative-text-color-small-hover - ); - --spectrum-alias-component-text-color-error-down: var( - --spectrum-semantic-negative-text-color-small-down - ); - --spectrum-alias-component-text-color-error-key-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error-mouse-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error: var( - --spectrum-alias-component-text-color-error-default - ); - --spectrum-alias-component-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-component-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color: var( - --spectrum-alias-component-icon-color-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-icon-color-emphasized-selected-hover: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-down: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-quiet-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-selected-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-component-background-color: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-component-background-color-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet: var( - --spectrum-alias-component-background-color-quiet-default - ); - --spectrum-alias-component-background-color-quiet-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-component-background-color-quiet-selected-down: var( - --spectrum-alias-component-background-color-selected-down - ); - --spectrum-alias-component-background-color-quiet-selected-key-focus: var( - --spectrum-alias-component-background-color-selected-key-focus - ); - --spectrum-alias-component-background-color-quiet-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-background-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-background-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-background-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-background-color-emphasized-selected: var( - --spectrum-alias-component-background-color-emphasized-selected-default - ); - --spectrum-alias-component-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-component-border-color-quiet-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color: var( - --spectrum-alias-component-border-color-default - ); - --spectrum-alias-component-border-color-selected: var( - --spectrum-alias-component-border-color-selected-default - ); - --spectrum-alias-component-border-color-quiet-default: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-hover: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-down: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet: var( - --spectrum-alias-component-border-color-quiet-default - ); - --spectrum-alias-component-border-color-quiet-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-border-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-border-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-border-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-border-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-border-color-emphasized-selected: var( - --spectrum-alias-component-border-color-emphasized-selected-default - ); - --spectrum-alias-tag-border-color-error-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-error-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-selected: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-border-color: var( - --spectrum-alias-tag-border-color-default - ); - --spectrum-alias-tag-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-tag-border-color-error: var( - --spectrum-alias-tag-border-color-error-default - ); - --spectrum-alias-tag-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tag-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); - --spectrum-alias-tag-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-tag-text-color: var( - --spectrum-alias-tag-text-color-default - ); - --spectrum-alias-tag-text-color-error-default: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-text-color-error-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-key-focus: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error: var( - --spectrum-alias-tag-text-color-error-default - ); - --spectrum-alias-tag-text-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); - --spectrum-alias-tag-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); - --spectrum-alias-tag-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-tag-icon-color: var( - --spectrum-alias-tag-icon-color-default - ); - --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); - --spectrum-alias-tag-icon-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color: var( - --spectrum-alias-tag-background-color-default - ); - --spectrum-alias-tag-background-color-error: var( - --spectrum-alias-tag-background-color-error-default - ); - --spectrum-alias-tag-background-color-error-selected-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-background-color-error-selected-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-background-color-error-selected: var( - --spectrum-alias-tag-background-color-error-selected-default - ); - --spectrum-alias-tag-background-color-selected-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-tag-background-color-selected-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-tag-background-color-selected-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-focusring-border-color-default: transparent; - --spectrum-alias-tag-focusring-border-color-disabled: transparent; - --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( - --spectrum-alias-focus-ring-color - ); - --spectrum-alias-tag-focusring-border-color: var( - --spectrum-alias-tag-focusring-border-color-default - ); - --spectrum-alias-avatar-border-color: var( - --spectrum-alias-avatar-border-color-default - ); - --spectrum-alias-avatar-border-color-selected: var( - --spectrum-alias-avatar-border-color-selected-default - ); - --spectrum-alias-toggle-background-color: var( - --spectrum-alias-toggle-background-color-default - ); - --spectrum-alias-toggle-background-color-emphasized-selected: var( - --spectrum-alias-toggle-background-color-emphasized-selected-default - ); - --spectrum-alias-toggle-border-color: var( - --spectrum-alias-toggle-border-color-default - ); - --spectrum-alias-toggle-icon-color-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-toggle-icon-color-emphasized-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-button-primary-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-button-primary-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color: var( - --spectrum-alias-button-primary-background-color-default - ); - --spectrum-alias-button-primary-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-border-color-hover: var( - --spectrum-alias-button-primary-background-color-hover - ); - --spectrum-alias-button-primary-border-color-down: var( - --spectrum-alias-button-primary-background-color-down - ); - --spectrum-alias-button-primary-border-color-key-focus: var( - --spectrum-alias-button-primary-background-color-key-focus - ); - --spectrum-alias-button-primary-border-color: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-hover: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-down: var( - --spectrum-alias-button-primary-text-color-down - ); - --spectrum-alias-button-primary-icon-color-key-focus: var( - --spectrum-alias-button-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-icon-color: var( - --spectrum-alias-button-primary-icon-color-default - ); - --spectrum-alias-button-secondary-background-color-hover: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color-down: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-secondary-background-color-key-focus: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color: var( - --spectrum-alias-button-secondary-background-color-default - ); - --spectrum-alias-button-secondary-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-border-color-hover: var( - --spectrum-alias-button-secondary-background-color-hover - ); - --spectrum-alias-button-secondary-border-color-down: var( - --spectrum-alias-button-secondary-background-color-down - ); - --spectrum-alias-button-secondary-border-color-key-focus: var( - --spectrum-alias-button-secondary-background-color-key-focus - ); - --spectrum-alias-button-secondary-border-color: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-hover: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-down: var( - --spectrum-alias-button-secondary-text-color-down - ); - --spectrum-alias-button-secondary-icon-color-key-focus: var( - --spectrum-alias-button-secondary-text-color-key-focus - ); - --spectrum-alias-button-secondary-icon-color: var( - --spectrum-alias-button-secondary-icon-color-default - ); - --spectrum-alias-button-negative-background-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-background-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color: var( - --spectrum-alias-button-negative-background-color-default - ); - --spectrum-alias-button-negative-border-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-border-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-hover: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-down: var( - --spectrum-alias-button-negative-text-color-down - ); - --spectrum-alias-button-negative-icon-color-key-focus: var( - --spectrum-alias-button-negative-text-color-key-focus - ); - --spectrum-alias-button-negative-icon-color: var( - --spectrum-alias-button-negative-icon-color-default - ); - --spectrum-alias-input-border-color-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-input-border-color-quiet-disabled: var( - --spectrum-alias-border-color-mid - ); - --spectrum-alias-input-border-color: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-input-border-color-invalid-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-input-border-color-invalid-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-down: var( - --spectrum-semantic-negative-color-down - ); - --spectrum-alias-input-border-color-invalid-mouse-focus: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid: var( - --spectrum-alias-input-border-color-invalid-default - ); - --spectrum-alias-background-color-yellow-default: var( - --spectrum-global-color-static-yellow-300 - ); - --spectrum-alias-background-color-yellow-hover: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-key-focus: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-down: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-background-color-yellow: var( - --spectrum-alias-background-color-yellow-default - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-tabitem-text-color: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-selected: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-icon-color: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-background-color-default: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-background-color-transparent: transparent; - --spectrum-alias-background-color-overbackground-down: #fff3; - --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; - --spectrum-alias-background-color-quiet-overbackground-down: #fff3; - --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; - --spectrum-alias-background-color-quickactions-overlay: #0003; - --spectrum-alias-placeholder-text-color: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-placeholder-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-selected: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); - --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-mouse-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); - --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); - --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); - --spectrum-alias-text-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-text-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-text-color-overbackground-disabled: #fff3; - --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; - --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); - --spectrum-alias-link-primary-text-color: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color: var( - --spectrum-alias-link-secondary-text-color-default - ); - --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-alias-border-color-mouse-focus: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-border-color-extralight: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); - --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); - --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-darker-default: var( - --spectrum-global-color-gray-600 - ); - --spectrum-alias-border-color-darker-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-darker-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-transparent: transparent; - --spectrum-alias-border-color-translucent-dark: #0000000d; - --spectrum-alias-border-color-translucent-darker: #0000001a; - --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); - --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); - --spectrum-alias-track-fill-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-disabled: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-track-color-overbackground: #fff3; - --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-icon-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); - --spectrum-alias-icon-color-overbackground-disabled: #fff3; - --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; - --spectrum-alias-icon-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-selected-neutral-subdued: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); - --spectrum-alias-icon-color-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-icon-color-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-icon-color-selected-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-image-opacity-disabled: var( - --spectrum-global-color-opacity-30 - ); - --spectrum-alias-toolbar-background-color: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-code-highlight-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-code-highlight-background-color: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-code-highlight-color-keyword: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-section: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-code-highlight-color-literal: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-attribute: var( - --spectrum-global-color-seafoam-600 - ); - --spectrum-alias-code-highlight-color-class: var( - --spectrum-global-color-magenta-600 - ); - --spectrum-alias-code-highlight-color-variable: var( - --spectrum-global-color-purple-600 - ); - --spectrum-alias-code-highlight-color-title: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-code-highlight-color-string: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-function: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-comment: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-categorical-color-1: var( - --spectrum-global-color-static-seafoam-200 - ); - --spectrum-alias-categorical-color-2: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-alias-categorical-color-3: var( - --spectrum-global-color-static-orange-500 - ); - --spectrum-alias-categorical-color-4: var( - --spectrum-global-color-static-magenta-500 - ); - --spectrum-alias-categorical-color-5: var( - --spectrum-global-color-static-indigo-200 - ); - --spectrum-alias-categorical-color-6: var( - --spectrum-global-color-static-celery-200 - ); - --spectrum-alias-categorical-color-7: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-categorical-color-8: var( - --spectrum-global-color-static-purple-800 - ); - --spectrum-alias-categorical-color-9: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-categorical-color-10: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-alias-categorical-color-11: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-alias-categorical-color-12: var( - --spectrum-global-color-static-chartreuse-300 - ); - --spectrum-alias-categorical-color-13: var( - --spectrum-global-color-static-blue-200 - ); - --spectrum-alias-categorical-color-14: var( - --spectrum-global-color-static-fuchsia-500 - ); - --spectrum-alias-categorical-color-15: var( - --spectrum-global-color-static-magenta-200 - ); - --spectrum-alias-categorical-color-16: var( - --spectrum-global-color-static-yellow-200 - ); + --spectrum-alias-colorhandle-outer-border-color: #0000006b; + --spectrum-alias-component-text-color-selected-default: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-component-text-color-selected-hover: var( + --spectrum-alias-component-text-color-selected-default + ); + --spectrum-alias-component-text-color-selected-down: var( + --spectrum-alias-component-text-color-selected-default + ); + --spectrum-alias-component-text-color-selected-key-focus: var( + --spectrum-alias-component-text-color-selected-default + ); + --spectrum-alias-component-text-color-selected-mouse-focus: var( + --spectrum-alias-component-text-color-selected-default + ); + --spectrum-alias-component-icon-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-component-icon-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-component-background-color-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-hover: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-component-background-color-down: var( + --spectrum-global-color-gray-400 + ); + --spectrum-alias-component-background-color-key-focus: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-component-background-color-quiet-hover: var( + --spectrum-alias-component-background-color-hover + ); + --spectrum-alias-component-background-color-quiet-down: var( + --spectrum-alias-component-background-color-down + ); + --spectrum-alias-component-background-color-quiet-key-focus: var( + --spectrum-alias-component-background-color-key-focus + ); + --spectrum-alias-component-background-color-selected-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-component-background-color-selected-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-component-background-color-selected-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-component-background-color-selected-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-component-border-color-default: var( + --spectrum-alias-component-background-color-default + ); + --spectrum-alias-component-border-color-hover: var( + --spectrum-alias-component-background-color-hover + ); + --spectrum-alias-component-border-color-down: var( + --spectrum-alias-component-background-color-down + ); + --spectrum-alias-component-border-color-key-focus: var( + --spectrum-alias-component-background-color-key-focus + ); + --spectrum-alias-component-border-color-selected-default: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-border-color-selected-hover: var( + --spectrum-alias-component-background-color-selected-hover + ); + --spectrum-alias-component-border-color-selected-down: var( + --spectrum-alias-component-background-color-selected-down + ); + --spectrum-alias-component-border-color-selected-key-focus: var( + --spectrum-alias-component-background-color-selected-key-focus + ); + --spectrum-alias-component-border-color-quiet-key-focus: var( + --spectrum-alias-component-background-color-quiet-default + ); + --spectrum-alias-component-border-color-quiet-selected-default: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-border-color-quiet-selected-hover: var( + --spectrum-alias-component-background-color-quiet-selected-hover + ); + --spectrum-alias-component-border-color-quiet-selected-down: var( + --spectrum-alias-component-background-color-quiet-selected-down + ); + --spectrum-alias-component-border-color-quiet-selected-key-focus: var( + --spectrum-alias-component-background-color-quiet-selected-key-focus + ); + --spectrum-alias-toggle-background-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-background-color-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-toggle-background-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-toggle-background-color-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-default: var( + --spectrum-global-color-indigo-500 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-hover: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-down: var( + --spectrum-global-color-indigo-700 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-toggle-border-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-border-color-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-toggle-border-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-toggle-border-color-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-border-color-default: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-tag-border-color-hover: var( + --spectrum-global-color-gray-400 + ); + --spectrum-alias-tag-border-color-down: var(--spectrum-global-color-gray-500); + --spectrum-alias-tag-border-color-key-focus: var( + --spectrum-global-color-gray-400 + ); + --spectrum-alias-tag-border-color-disabled-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-border-color-error-key-focus: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-focusring-border-color-key-focus: var( + --spectrum-alias-focus-ring-color + ); + --spectrum-alias-tag-background-color-disabled: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-tag-background-color-default: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-tag-background-color-hover: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-tag-background-color-down: var( + --spectrum-global-color-gray-400 + ); + --spectrum-alias-tag-background-color-key-focus: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-tag-background-color-error-default: var( + --spectrum-alias-tag-background-color-default + ); + --spectrum-alias-tag-background-color-error-hover: var( + --spectrum-alias-tag-background-color-hover + ); + --spectrum-alias-tag-background-color-error-down: var( + --spectrum-alias-tag-background-color-down + ); + --spectrum-alias-tag-background-color-error-key-focus: var( + --spectrum-alias-tag-background-color-key-focus + ); + --spectrum-alias-avatar-border-color-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-default: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-avatar-border-color-selected-hover: var( + --spectrum-alias-component-background-color-selected-hover + ); + --spectrum-alias-avatar-border-color-selected-down: var( + --spectrum-alias-component-background-color-selected-hover + ); + --spectrum-alias-avatar-border-color-selected-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-link-primary-text-color-default: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-link-primary-text-color-hover: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-link-primary-text-color-down: var( + --spectrum-global-color-indigo-700 + ); + --spectrum-alias-link-primary-text-color-key-focus: var( + --spectrum-alias-text-color-key-focus + ); + --spectrum-alias-link-secondary-text-color-default: var( + --spectrum-alias-text-color + ); + --spectrum-alias-link-secondary-text-color-hover: var( + --spectrum-alias-link-primary-text-color-hover + ); + --spectrum-alias-link-secondary-text-color-down: var( + --spectrum-alias-link-primary-text-color-down + ); + --spectrum-alias-link-secondary-text-color-key-focus: var( + --spectrum-alias-link-primary-text-color-key-focus + ); + --spectrum-alias-button-primary-background-color-default: var( + --spectrum-alias-button-primary-border-color-default + ); + --spectrum-alias-button-primary-text-color-default: var( + --spectrum-alias-button-primary-text-color-hover + ); + --spectrum-alias-button-primary-icon-color-default: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-secondary-background-color-default: var( + --spectrum-alias-button-secondary-border-color-default + ); + --spectrum-alias-button-secondary-text-color-default: var( + --spectrum-alias-button-secondary-text-color-hover + ); + --spectrum-alias-button-secondary-icon-color-default: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-negative-background-color-default: var( + --spectrum-alias-button-negative-border-color-default + ); + --spectrum-alias-button-negative-text-color-default: var( + --spectrum-alias-button-negative-text-color-hover + ); + --spectrum-alias-button-negative-icon-color-default: var( + --spectrum-alias-button-negative-text-color-default + ); + --spectrum-alias-input-border-color-default: var( + --spectrum-alias-border-color + ); + --spectrum-alias-input-border-color-hover: var( + --spectrum-alias-border-color-hover + ); + --spectrum-alias-input-border-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-input-border-color-mouse-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-input-border-color-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-input-border-color-invalid-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-yellow-background-color-default: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-alias-yellow-background-color-hover: var( + --spectrum-global-color-static-yellow-500 + ); + --spectrum-alias-yellow-background-color-key-focus: var( + --spectrum-global-color-static-yellow-500 + ); + --spectrum-alias-yellow-background-color-down: var( + --spectrum-global-color-static-yellow-600 + ); + --spectrum-alias-infieldbutton-background-color: transparent; + --spectrum-alias-infieldbutton-fill-border-color-default: transparent; + --spectrum-alias-infieldbutton-fill-border-color-hover: transparent; + --spectrum-alias-infieldbutton-fill-border-color-down: transparent; + --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: transparent; + --spectrum-alias-infieldbutton-fill-border-color-key-focus: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( + --spectrum-global-color-gray-400 + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: var( + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-default: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-default: #0000001a; + --spectrum-alias-actionbutton-staticBlack-border-color-hover: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-down: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; + --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; + --spectrum-alias-actionbutton-staticWhite-border-color-default: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-default: #ffffff1a; + --spectrum-alias-actionbutton-staticWhite-border-color-hover: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-down: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; + --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; + --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-thumbnail-darksquare-background-color: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-thumbnail-lightsquare-background-color: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-tabs-divider-background-color-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tabs-divider-background-color-quiet: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-tabitem-text-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-tabitem-text-color-hover: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tabitem-text-color-down: var( + --spectrum-alias-text-color-down + ); + --spectrum-alias-tabitem-text-color-key-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tabitem-text-color-mouse-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tabitem-text-color-selected-default: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tabitem-text-color-selected-hover: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected-down: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected-key-focus: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected-mouse-focus: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-default: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-down: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-selection-indicator-color-default: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tabitem-selection-indicator-color-emphasized: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-icon-color-disabled: var( + --spectrum-alias-text-color-disabled + ); + --spectrum-alias-tabitem-icon-color-default: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-icon-color-hover: var( + --spectrum-alias-tabitem-text-color-hover + ); + --spectrum-alias-tabitem-icon-color-down: var( + --spectrum-alias-tabitem-text-color-down + ); + --spectrum-alias-tabitem-icon-color-key-focus: var( + --spectrum-alias-tabitem-text-color-hover + ); + --spectrum-alias-tabitem-icon-color-mouse-focus: var( + --spectrum-alias-tabitem-text-color-down + ); + --spectrum-alias-tabitem-icon-color-selected: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-icon-color-emphasized: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-icon-color-emphasized-selected: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-global-color-indigo-500 + ); + --spectrum-alias-assetcard-overlay-background-color: #6d73f633; + --spectrum-alias-assetcard-border-color-selected: var( + --spectrum-global-color-indigo-500 + ); + --spectrum-alias-assetcard-border-color-selected-hover: var( + --spectrum-global-color-indigo-500 + ); + --spectrum-alias-assetcard-border-color-selected-down: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-transparent-blue-background-color-mouse-focus: var( + --spectrum-alias-transparent-blue-background-color-hover + ); + --spectrum-alias-transparent-blue-background-color: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-transparent-red-background-color-hover: #9a000026; + --spectrum-alias-transparent-red-background-color-down: #7c00004d; + --spectrum-alias-transparent-red-background-color-key-focus: var( + --spectrum-alias-transparent-red-background-color-hover + ); + --spectrum-alias-transparent-red-background-color-mouse-focus: var( + --spectrum-alias-transparent-red-background-color-hover + ); + --spectrum-alias-transparent-red-background-color: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-component-text-color-disabled: var( + --spectrum-global-color-gray-500 + ); + --spectrum-alias-component-text-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-component-text-color-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-component-text-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-component-text-color-key-focus: var( + --spectrum-alias-component-text-color-hover + ); + --spectrum-alias-component-text-color-mouse-focus: var( + --spectrum-alias-component-text-color-hover + ); + --spectrum-alias-component-text-color: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-component-text-color-selected: var( + --spectrum-alias-component-text-color-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-default: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-component-text-color-emphasized-selected-hover: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-down: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-key-focus: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-error-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-component-text-color-error-hover: var( + --spectrum-semantic-negative-text-color-small-hover + ); + --spectrum-alias-component-text-color-error-down: var( + --spectrum-semantic-negative-text-color-small-down + ); + --spectrum-alias-component-text-color-error-key-focus: var( + --spectrum-semantic-negative-text-color-small-key-focus + ); + --spectrum-alias-component-text-color-error-mouse-focus: var( + --spectrum-semantic-negative-text-color-small-key-focus + ); + --spectrum-alias-component-text-color-error: var( + --spectrum-alias-component-text-color-error-default + ); + --spectrum-alias-component-icon-color-disabled: var( + --spectrum-alias-icon-color-disabled + ); + --spectrum-alias-component-icon-color-hover: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-component-icon-color-down: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-component-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-component-icon-color-mouse-focus: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-component-icon-color: var( + --spectrum-alias-component-icon-color-default + ); + --spectrum-alias-component-icon-color-emphasized-selected-default: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-component-icon-color-emphasized-selected-hover: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-icon-color-emphasized-selected-down: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-icon-color-emphasized-selected: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-quiet-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet-selected-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-component-background-color: var( + --spectrum-alias-component-background-color-default + ); + --spectrum-alias-component-background-color-selected: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-background-color-quiet-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet: var( + --spectrum-alias-component-background-color-quiet-default + ); + --spectrum-alias-component-background-color-quiet-selected-default: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-background-color-quiet-selected-hover: var( + --spectrum-alias-component-background-color-selected-hover + ); + --spectrum-alias-component-background-color-quiet-selected-down: var( + --spectrum-alias-component-background-color-selected-down + ); + --spectrum-alias-component-background-color-quiet-selected-key-focus: var( + --spectrum-alias-component-background-color-selected-key-focus + ); + --spectrum-alias-component-background-color-quiet-selected: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-background-color-emphasized-selected-default: var( + --spectrum-semantic-cta-background-color-default + ); + --spectrum-alias-component-background-color-emphasized-selected-hover: var( + --spectrum-semantic-cta-background-color-hover + ); + --spectrum-alias-component-background-color-emphasized-selected-down: var( + --spectrum-semantic-cta-background-color-down + ); + --spectrum-alias-component-background-color-emphasized-selected-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus + ); + --spectrum-alias-component-background-color-emphasized-selected: var( + --spectrum-alias-component-background-color-emphasized-selected-default + ); + --spectrum-alias-component-border-color-disabled: var( + --spectrum-alias-border-color-disabled + ); + --spectrum-alias-component-border-color-quiet-disabled: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color: var( + --spectrum-alias-component-border-color-default + ); + --spectrum-alias-component-border-color-selected: var( + --spectrum-alias-component-border-color-selected-default + ); + --spectrum-alias-component-border-color-quiet-default: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-quiet-hover: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-quiet-down: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-quiet: var( + --spectrum-alias-component-border-color-quiet-default + ); + --spectrum-alias-component-border-color-quiet-selected: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-border-color-emphasized-selected-default: var( + --spectrum-semantic-cta-background-color-default + ); + --spectrum-alias-component-border-color-emphasized-selected-hover: var( + --spectrum-semantic-cta-background-color-hover + ); + --spectrum-alias-component-border-color-emphasized-selected-down: var( + --spectrum-semantic-cta-background-color-down + ); + --spectrum-alias-component-border-color-emphasized-selected-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus + ); + --spectrum-alias-component-border-color-emphasized-selected: var( + --spectrum-alias-component-border-color-emphasized-selected-default + ); + --spectrum-alias-tag-border-color-error-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-error-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-selected: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-border-color: var( + --spectrum-alias-tag-border-color-default + ); + --spectrum-alias-tag-border-color-disabled: var( + --spectrum-alias-border-color-disabled + ); + --spectrum-alias-tag-border-color-error: var( + --spectrum-alias-tag-border-color-error-default + ); + --spectrum-alias-tag-text-color-default: var( + --spectrum-alias-label-text-color + ); + --spectrum-alias-tag-text-color-hover: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tag-text-color-key-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tag-text-color-disabled: var( + --spectrum-global-color-gray-500 + ); + --spectrum-alias-tag-text-color: var(--spectrum-alias-tag-text-color-default); + --spectrum-alias-tag-text-color-error-default: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-text-color-error-hover: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-key-focus: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error: var( + --spectrum-alias-tag-text-color-error-default + ); + --spectrum-alias-tag-text-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tag-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tag-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tag-icon-color-disabled: var( + --spectrum-alias-icon-color-disabled + ); + --spectrum-alias-tag-icon-color: var(--spectrum-alias-tag-icon-color-default); + --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-icon-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color: var( + --spectrum-alias-tag-background-color-default + ); + --spectrum-alias-tag-background-color-error: var( + --spectrum-alias-tag-background-color-error-default + ); + --spectrum-alias-tag-background-color-error-selected-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-background-color-error-selected-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-key-focus: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-background-color-error-selected: var( + --spectrum-alias-tag-background-color-error-selected-default + ); + --spectrum-alias-tag-background-color-selected-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-tag-background-color-selected-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-tag-background-color-selected-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-focusring-border-color-default: transparent; + --spectrum-alias-tag-focusring-border-color-disabled: transparent; + --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( + --spectrum-alias-focus-ring-color + ); + --spectrum-alias-tag-focusring-border-color: var( + --spectrum-alias-tag-focusring-border-color-default + ); + --spectrum-alias-avatar-border-color: var( + --spectrum-alias-avatar-border-color-default + ); + --spectrum-alias-avatar-border-color-selected: var( + --spectrum-alias-avatar-border-color-selected-default + ); + --spectrum-alias-toggle-background-color: var( + --spectrum-alias-toggle-background-color-default + ); + --spectrum-alias-toggle-background-color-emphasized-selected: var( + --spectrum-alias-toggle-background-color-emphasized-selected-default + ); + --spectrum-alias-toggle-border-color: var( + --spectrum-alias-toggle-border-color-default + ); + --spectrum-alias-toggle-icon-color-selected: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-toggle-icon-color-emphasized-selected: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-button-primary-background-color-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-button-primary-background-color-key-focus: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color: var( + --spectrum-alias-button-primary-background-color-default + ); + --spectrum-alias-button-primary-border-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-border-color-hover: var( + --spectrum-alias-button-primary-background-color-hover + ); + --spectrum-alias-button-primary-border-color-down: var( + --spectrum-alias-button-primary-background-color-down + ); + --spectrum-alias-button-primary-border-color-key-focus: var( + --spectrum-alias-button-primary-background-color-key-focus + ); + --spectrum-alias-button-primary-border-color: var( + --spectrum-alias-button-primary-border-color-default + ); + --spectrum-alias-button-primary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-primary-icon-color-hover: var( + --spectrum-alias-button-primary-text-color-hover + ); + --spectrum-alias-button-primary-icon-color-down: var( + --spectrum-alias-button-primary-text-color-down + ); + --spectrum-alias-button-primary-icon-color-key-focus: var( + --spectrum-alias-button-primary-text-color-key-focus + ); + --spectrum-alias-button-primary-icon-color: var( + --spectrum-alias-button-primary-icon-color-default + ); + --spectrum-alias-button-secondary-background-color-hover: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color-down: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-secondary-background-color-key-focus: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color: var( + --spectrum-alias-button-secondary-background-color-default + ); + --spectrum-alias-button-secondary-border-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-border-color-hover: var( + --spectrum-alias-button-secondary-background-color-hover + ); + --spectrum-alias-button-secondary-border-color-down: var( + --spectrum-alias-button-secondary-background-color-down + ); + --spectrum-alias-button-secondary-border-color-key-focus: var( + --spectrum-alias-button-secondary-background-color-key-focus + ); + --spectrum-alias-button-secondary-border-color: var( + --spectrum-alias-button-secondary-border-color-default + ); + --spectrum-alias-button-secondary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-secondary-icon-color-hover: var( + --spectrum-alias-button-secondary-text-color-hover + ); + --spectrum-alias-button-secondary-icon-color-down: var( + --spectrum-alias-button-secondary-text-color-down + ); + --spectrum-alias-button-secondary-icon-color-key-focus: var( + --spectrum-alias-button-secondary-text-color-key-focus + ); + --spectrum-alias-button-secondary-icon-color: var( + --spectrum-alias-button-secondary-icon-color-default + ); + --spectrum-alias-button-negative-background-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-background-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color: var( + --spectrum-alias-button-negative-background-color-default + ); + --spectrum-alias-button-negative-border-color-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-border-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color: var( + --spectrum-alias-button-negative-border-color-default + ); + --spectrum-alias-button-negative-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color: var( + --spectrum-alias-button-negative-text-color-default + ); + --spectrum-alias-button-negative-icon-color-hover: var( + --spectrum-alias-button-negative-text-color-hover + ); + --spectrum-alias-button-negative-icon-color-down: var( + --spectrum-alias-button-negative-text-color-down + ); + --spectrum-alias-button-negative-icon-color-key-focus: var( + --spectrum-alias-button-negative-text-color-key-focus + ); + --spectrum-alias-button-negative-icon-color: var( + --spectrum-alias-button-negative-icon-color-default + ); + --spectrum-alias-input-border-color-disabled: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-input-border-color-quiet-disabled: var( + --spectrum-alias-border-color-mid + ); + --spectrum-alias-input-border-color: var( + --spectrum-alias-input-border-color-default + ); + --spectrum-alias-input-border-color-invalid-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-input-border-color-invalid-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-input-border-color-invalid-down: var( + --spectrum-semantic-negative-color-down + ); + --spectrum-alias-input-border-color-invalid-mouse-focus: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-input-border-color-invalid: var( + --spectrum-alias-input-border-color-invalid-default + ); + --spectrum-alias-background-color-yellow-default: var( + --spectrum-global-color-static-yellow-300 + ); + --spectrum-alias-background-color-yellow-hover: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-alias-background-color-yellow-key-focus: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-alias-background-color-yellow-down: var( + --spectrum-global-color-static-yellow-500 + ); + --spectrum-alias-background-color-yellow: var( + --spectrum-alias-background-color-yellow-default + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-tabitem-text-color: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-text-color-selected: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-icon-color: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-background-color-default: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-background-color-transparent: transparent; + --spectrum-alias-background-color-overbackground-down: #fff3; + --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; + --spectrum-alias-background-color-quiet-overbackground-down: #fff3; + --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; + --spectrum-alias-background-color-quickactions-overlay: #0003; + --spectrum-alias-placeholder-text-color: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-placeholder-text-color-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-placeholder-text-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-placeholder-text-color-selected: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); + --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-mouse-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); + --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-selected-neutral: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-text-color-overbackground: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-text-color-overbackground-disabled: #fff3; + --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; + --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); + --spectrum-alias-link-primary-text-color: var( + --spectrum-alias-link-primary-text-color-default + ); + --spectrum-alias-link-secondary-text-color: var( + --spectrum-alias-link-secondary-text-color-default + ); + --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-key-focus: var( + --spectrum-global-color-blue-400 + ); + --spectrum-alias-border-color-mouse-focus: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-extralight: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); + --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-darker-default: var( + --spectrum-global-color-gray-600 + ); + --spectrum-alias-border-color-darker-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-border-color-darker-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-border-color-transparent: transparent; + --spectrum-alias-border-color-translucent-dark: #0000000d; + --spectrum-alias-border-color-translucent-darker: #0000001a; + --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); + --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); + --spectrum-alias-track-fill-color-overbackground: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300); + --spectrum-alias-track-color-overbackground: #fff3; + --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-icon-color-overbackground: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); + --spectrum-alias-icon-color-overbackground-disabled: #fff3; + --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; + --spectrum-alias-icon-color-selected-neutral: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-icon-color-selected-neutral-subdued: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-icon-color-selected-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-icon-color-selected-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-alias-icon-color-selected-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-image-opacity-disabled: var( + --spectrum-global-color-opacity-30 + ); + --spectrum-alias-toolbar-background-color: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-code-highlight-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-code-highlight-background-color: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-code-highlight-color-keyword: var( + --spectrum-global-color-fuchsia-600 + ); + --spectrum-alias-code-highlight-color-section: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-code-highlight-color-literal: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-code-highlight-color-attribute: var( + --spectrum-global-color-seafoam-600 + ); + --spectrum-alias-code-highlight-color-class: var( + --spectrum-global-color-magenta-600 + ); + --spectrum-alias-code-highlight-color-variable: var( + --spectrum-global-color-purple-600 + ); + --spectrum-alias-code-highlight-color-title: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-code-highlight-color-string: var( + --spectrum-global-color-fuchsia-600 + ); + --spectrum-alias-code-highlight-color-function: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-code-highlight-color-comment: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-categorical-color-1: var( + --spectrum-global-color-static-seafoam-200 + ); + --spectrum-alias-categorical-color-2: var( + --spectrum-global-color-static-indigo-700 + ); + --spectrum-alias-categorical-color-3: var( + --spectrum-global-color-static-orange-500 + ); + --spectrum-alias-categorical-color-4: var( + --spectrum-global-color-static-magenta-500 + ); + --spectrum-alias-categorical-color-5: var( + --spectrum-global-color-static-indigo-200 + ); + --spectrum-alias-categorical-color-6: var( + --spectrum-global-color-static-celery-200 + ); + --spectrum-alias-categorical-color-7: var( + --spectrum-global-color-static-blue-500 + ); + --spectrum-alias-categorical-color-8: var( + --spectrum-global-color-static-purple-800 + ); + --spectrum-alias-categorical-color-9: var( + --spectrum-global-color-static-yellow-500 + ); + --spectrum-alias-categorical-color-10: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-alias-categorical-color-11: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-alias-categorical-color-12: var( + --spectrum-global-color-static-chartreuse-300 + ); + --spectrum-alias-categorical-color-13: var( + --spectrum-global-color-static-blue-200 + ); + --spectrum-alias-categorical-color-14: var( + --spectrum-global-color-static-fuchsia-500 + ); + --spectrum-alias-categorical-color-15: var( + --spectrum-global-color-static-magenta-200 + ); + --spectrum-alias-categorical-color-16: var( + --spectrum-global-color-static-yellow-200 + ); } diff --git a/tools/styles/express/spectrum-scale-large.css b/tools/styles/express/spectrum-scale-large.css index 5650eb9ef0..ba309a7618 100644 --- a/tools/styles/express/spectrum-scale-large.css +++ b/tools/styles/express/spectrum-scale-large.css @@ -1,280 +1,280 @@ :root, :host { - --spectrum-global-dimension-scale-factor: 1.25; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 3px; - --spectrum-global-dimension-size-40: 4px; - --spectrum-global-dimension-size-50: 5px; - --spectrum-global-dimension-size-65: 6px; - --spectrum-global-dimension-size-75: 8px; - --spectrum-global-dimension-size-85: 9px; - --spectrum-global-dimension-size-100: 10px; - --spectrum-global-dimension-size-115: 11px; - --spectrum-global-dimension-size-125: 13px; - --spectrum-global-dimension-size-130: 14px; - --spectrum-global-dimension-size-150: 15px; - --spectrum-global-dimension-size-160: 16px; - --spectrum-global-dimension-size-175: 18px; - --spectrum-global-dimension-size-185: 19px; - --spectrum-global-dimension-size-200: 20px; - --spectrum-global-dimension-size-225: 22px; - --spectrum-global-dimension-size-250: 25px; - --spectrum-global-dimension-size-275: 28px; - --spectrum-global-dimension-size-300: 30px; - --spectrum-global-dimension-size-325: 32px; - --spectrum-global-dimension-size-350: 35px; - --spectrum-global-dimension-size-400: 40px; - --spectrum-global-dimension-size-450: 45px; - --spectrum-global-dimension-size-500: 50px; - --spectrum-global-dimension-size-550: 56px; - --spectrum-global-dimension-size-600: 60px; - --spectrum-global-dimension-size-650: 65px; - --spectrum-global-dimension-size-675: 68px; - --spectrum-global-dimension-size-700: 70px; - --spectrum-global-dimension-size-750: 75px; - --spectrum-global-dimension-size-800: 80px; - --spectrum-global-dimension-size-900: 90px; - --spectrum-global-dimension-size-1000: 100px; - --spectrum-global-dimension-size-1125: 112px; - --spectrum-global-dimension-size-1200: 120px; - --spectrum-global-dimension-size-1250: 125px; - --spectrum-global-dimension-size-1600: 160px; - --spectrum-global-dimension-size-1700: 170px; - --spectrum-global-dimension-size-1800: 180px; - --spectrum-global-dimension-size-2000: 200px; - --spectrum-global-dimension-size-2400: 240px; - --spectrum-global-dimension-size-2500: 250px; - --spectrum-global-dimension-size-3000: 300px; - --spectrum-global-dimension-size-3400: 340px; - --spectrum-global-dimension-size-3600: 360px; - --spectrum-global-dimension-size-4600: 460px; - --spectrum-global-dimension-size-5000: 500px; - --spectrum-global-dimension-size-6000: 600px; - --spectrum-global-dimension-font-size-25: 12px; - --spectrum-global-dimension-font-size-50: 13px; - --spectrum-global-dimension-font-size-75: 15px; - --spectrum-global-dimension-font-size-100: 17px; - --spectrum-global-dimension-font-size-150: 18px; - --spectrum-global-dimension-font-size-200: 19px; - --spectrum-global-dimension-font-size-300: 22px; - --spectrum-global-dimension-font-size-400: 24px; - --spectrum-global-dimension-font-size-500: 27px; - --spectrum-global-dimension-font-size-600: 31px; - --spectrum-global-dimension-font-size-700: 34px; - --spectrum-global-dimension-font-size-800: 39px; - --spectrum-global-dimension-font-size-900: 44px; - --spectrum-global-dimension-font-size-1000: 49px; - --spectrum-global-dimension-font-size-1100: 55px; - --spectrum-global-dimension-font-size-1200: 62px; - --spectrum-global-dimension-font-size-1300: 70px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; - --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-item-control-3-width-l: 41px; - --spectrum-alias-item-control-3-width-xl: 46px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-alias-focus-ring-border-radius-regular - ); - --spectrum-alias-focus-ring-border-radius-small: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-focus-ring-border-radius-regular: 12px; - --spectrum-alias-control-three-width-m: 34px; - --spectrum-alias-control-three-width-l: 38px; - --spectrum-alias-control-three-width-xl: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-tag-text-padding-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-avatar-size-100: 26px; - --spectrum-alias-avatar-size-400: 36px; - --spectrum-alias-avatar-size-600: 46px; - --spectrum-colorwheel-min-width: var( - --spectrum-global-dimension-static-size-2600 - ); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-xs-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-75 - ); + --spectrum-global-dimension-scale-factor: 1.25; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 3px; + --spectrum-global-dimension-size-40: 4px; + --spectrum-global-dimension-size-50: 5px; + --spectrum-global-dimension-size-65: 6px; + --spectrum-global-dimension-size-75: 8px; + --spectrum-global-dimension-size-85: 9px; + --spectrum-global-dimension-size-100: 10px; + --spectrum-global-dimension-size-115: 11px; + --spectrum-global-dimension-size-125: 13px; + --spectrum-global-dimension-size-130: 14px; + --spectrum-global-dimension-size-150: 15px; + --spectrum-global-dimension-size-160: 16px; + --spectrum-global-dimension-size-175: 18px; + --spectrum-global-dimension-size-185: 19px; + --spectrum-global-dimension-size-200: 20px; + --spectrum-global-dimension-size-225: 22px; + --spectrum-global-dimension-size-250: 25px; + --spectrum-global-dimension-size-275: 28px; + --spectrum-global-dimension-size-300: 30px; + --spectrum-global-dimension-size-325: 32px; + --spectrum-global-dimension-size-350: 35px; + --spectrum-global-dimension-size-400: 40px; + --spectrum-global-dimension-size-450: 45px; + --spectrum-global-dimension-size-500: 50px; + --spectrum-global-dimension-size-550: 56px; + --spectrum-global-dimension-size-600: 60px; + --spectrum-global-dimension-size-650: 65px; + --spectrum-global-dimension-size-675: 68px; + --spectrum-global-dimension-size-700: 70px; + --spectrum-global-dimension-size-750: 75px; + --spectrum-global-dimension-size-800: 80px; + --spectrum-global-dimension-size-900: 90px; + --spectrum-global-dimension-size-1000: 100px; + --spectrum-global-dimension-size-1125: 112px; + --spectrum-global-dimension-size-1200: 120px; + --spectrum-global-dimension-size-1250: 125px; + --spectrum-global-dimension-size-1600: 160px; + --spectrum-global-dimension-size-1700: 170px; + --spectrum-global-dimension-size-1800: 180px; + --spectrum-global-dimension-size-2000: 200px; + --spectrum-global-dimension-size-2400: 240px; + --spectrum-global-dimension-size-2500: 250px; + --spectrum-global-dimension-size-3000: 300px; + --spectrum-global-dimension-size-3400: 340px; + --spectrum-global-dimension-size-3600: 360px; + --spectrum-global-dimension-size-4600: 460px; + --spectrum-global-dimension-size-5000: 500px; + --spectrum-global-dimension-size-6000: 600px; + --spectrum-global-dimension-font-size-25: 12px; + --spectrum-global-dimension-font-size-50: 13px; + --spectrum-global-dimension-font-size-75: 15px; + --spectrum-global-dimension-font-size-100: 17px; + --spectrum-global-dimension-font-size-150: 18px; + --spectrum-global-dimension-font-size-200: 19px; + --spectrum-global-dimension-font-size-300: 22px; + --spectrum-global-dimension-font-size-400: 24px; + --spectrum-global-dimension-font-size-500: 27px; + --spectrum-global-dimension-font-size-600: 31px; + --spectrum-global-dimension-font-size-700: 34px; + --spectrum-global-dimension-font-size-800: 39px; + --spectrum-global-dimension-font-size-900: 44px; + --spectrum-global-dimension-font-size-1000: 49px; + --spectrum-global-dimension-font-size-1100: 55px; + --spectrum-global-dimension-font-size-1200: 62px; + --spectrum-global-dimension-font-size-1300: 70px; + --spectrum-alias-item-text-padding-top-l: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-text-padding-bottom-s: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-workflow-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; + --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; + --spectrum-alias-item-mark-padding-top-m: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-mark-padding-bottom-m: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-mark-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-1-size-l: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-1-size-xl: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-2-size-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-3-height-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-3-width-s: var( + --spectrum-global-dimension-size-325 + ); + --spectrum-alias-item-control-3-width-m: var( + --spectrum-global-dimension-static-size-450 + ); + --spectrum-alias-item-control-3-width-l: 41px; + --spectrum-alias-item-control-3-width-xl: 46px; + --spectrum-alias-item-mark-size-m: var( + --spectrum-global-dimension-static-size-325 + ); + --spectrum-alias-component-focusring-border-radius: var( + --spectrum-alias-focus-ring-border-radius-regular + ); + --spectrum-alias-focus-ring-border-radius-small: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-focus-ring-border-radius-regular: 12px; + --spectrum-alias-control-three-width-m: 34px; + --spectrum-alias-control-three-width-l: 38px; + --spectrum-alias-control-three-width-xl: var( + --spectrum-global-dimension-static-size-550 + ); + --spectrum-alias-tag-text-padding-top-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-275 + ); + --spectrum-alias-focus-ring-radius-default: var( + --spectrum-global-dimension-static-size-115 + ); + --spectrum-alias-workflow-icon-size-l: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-ui-icon-chevron-size-75: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-chevron-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-chevron-size-200: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-chevron-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-chevron-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-chevron-size-500: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-checkmark-size-50: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-checkmark-size-75: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-checkmark-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-checkmark-size-200: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-checkmark-size-500: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-checkmark-size-600: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-ui-icon-dash-size-50: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-dash-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-dash-size-100: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-dash-size-200: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-dash-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-dash-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-dash-size-500: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-dash-size-600: var( + --spectrum-global-dimension-static-size-275 + ); + --spectrum-alias-ui-icon-cross-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-cross-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-cross-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-cross-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-cross-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-cross-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-cross-size-600: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-arrow-size-75: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-arrow-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-arrow-size-200: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-arrow-size-500: var( + --spectrum-global-dimension-static-size-275 + ); + --spectrum-alias-ui-icon-arrow-size-600: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-ui-icon-cornertriangle-size-100: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-ui-icon-cornertriangle-size-300: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-asterisk-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-asterisk-size-300: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-avatar-size-100: 26px; + --spectrum-alias-avatar-size-400: 36px; + --spectrum-alias-avatar-size-600: 46px; + --spectrum-colorwheel-min-width: var( + --spectrum-global-dimension-static-size-2600 + ); + --spectrum-dialog-confirm-title-text-size: var( + --spectrum-alias-heading-xs-text-size + ); + --spectrum-dialog-confirm-description-text-size: var( + --spectrum-global-dimension-font-size-75 + ); } diff --git a/tools/styles/express/spectrum-scale-medium.css b/tools/styles/express/spectrum-scale-medium.css index ff17b1a3fa..b5b4baebbd 100644 --- a/tools/styles/express/spectrum-scale-medium.css +++ b/tools/styles/express/spectrum-scale-medium.css @@ -1,282 +1,280 @@ :root, :host { - --spectrum-global-dimension-scale-factor: 1; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 2px; - --spectrum-global-dimension-size-40: 3px; - --spectrum-global-dimension-size-50: 4px; - --spectrum-global-dimension-size-65: 5px; - --spectrum-global-dimension-size-75: 6px; - --spectrum-global-dimension-size-85: 7px; - --spectrum-global-dimension-size-100: 8px; - --spectrum-global-dimension-size-115: 9px; - --spectrum-global-dimension-size-125: 10px; - --spectrum-global-dimension-size-130: 11px; - --spectrum-global-dimension-size-150: 12px; - --spectrum-global-dimension-size-160: 13px; - --spectrum-global-dimension-size-175: 14px; - --spectrum-global-dimension-size-185: 15px; - --spectrum-global-dimension-size-200: 16px; - --spectrum-global-dimension-size-225: 18px; - --spectrum-global-dimension-size-250: 20px; - --spectrum-global-dimension-size-275: 22px; - --spectrum-global-dimension-size-300: 24px; - --spectrum-global-dimension-size-325: 26px; - --spectrum-global-dimension-size-350: 28px; - --spectrum-global-dimension-size-400: 32px; - --spectrum-global-dimension-size-450: 36px; - --spectrum-global-dimension-size-500: 40px; - --spectrum-global-dimension-size-550: 44px; - --spectrum-global-dimension-size-600: 48px; - --spectrum-global-dimension-size-650: 52px; - --spectrum-global-dimension-size-675: 54px; - --spectrum-global-dimension-size-700: 56px; - --spectrum-global-dimension-size-750: 60px; - --spectrum-global-dimension-size-800: 64px; - --spectrum-global-dimension-size-900: 72px; - --spectrum-global-dimension-size-1000: 80px; - --spectrum-global-dimension-size-1125: 90px; - --spectrum-global-dimension-size-1200: 96px; - --spectrum-global-dimension-size-1250: 100px; - --spectrum-global-dimension-size-1600: 128px; - --spectrum-global-dimension-size-1700: 136px; - --spectrum-global-dimension-size-1800: 144px; - --spectrum-global-dimension-size-2000: 160px; - --spectrum-global-dimension-size-2400: 192px; - --spectrum-global-dimension-size-2500: 200px; - --spectrum-global-dimension-size-3000: 240px; - --spectrum-global-dimension-size-3400: 272px; - --spectrum-global-dimension-size-3600: 288px; - --spectrum-global-dimension-size-4600: 368px; - --spectrum-global-dimension-size-5000: 400px; - --spectrum-global-dimension-size-6000: 480px; - --spectrum-global-dimension-font-size-25: 10px; - --spectrum-global-dimension-font-size-50: 11px; - --spectrum-global-dimension-font-size-75: 12px; - --spectrum-global-dimension-font-size-100: 14px; - --spectrum-global-dimension-font-size-150: 15px; - --spectrum-global-dimension-font-size-200: 16px; - --spectrum-global-dimension-font-size-300: 18px; - --spectrum-global-dimension-font-size-400: 20px; - --spectrum-global-dimension-font-size-500: 22px; - --spectrum-global-dimension-font-size-600: 25px; - --spectrum-global-dimension-font-size-700: 28px; - --spectrum-global-dimension-font-size-800: 32px; - --spectrum-global-dimension-font-size-900: 36px; - --spectrum-global-dimension-font-size-1000: 40px; - --spectrum-global-dimension-font-size-1100: 45px; - --spectrum-global-dimension-font-size-1200: 50px; - --spectrum-global-dimension-font-size-1300: 60px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-width-s: 23px; - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-item-control-3-width-l: 29px; - --spectrum-alias-item-control-3-width-xl: 33px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-focus-ring-border-radius-small: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-three-width-m: 28px; - --spectrum-alias-control-three-width-l: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-control-three-width-xl: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-tag-text-padding-top-s: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); - --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); - --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-s-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-100 - ); + --spectrum-global-dimension-scale-factor: 1; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 2px; + --spectrum-global-dimension-size-40: 3px; + --spectrum-global-dimension-size-50: 4px; + --spectrum-global-dimension-size-65: 5px; + --spectrum-global-dimension-size-75: 6px; + --spectrum-global-dimension-size-85: 7px; + --spectrum-global-dimension-size-100: 8px; + --spectrum-global-dimension-size-115: 9px; + --spectrum-global-dimension-size-125: 10px; + --spectrum-global-dimension-size-130: 11px; + --spectrum-global-dimension-size-150: 12px; + --spectrum-global-dimension-size-160: 13px; + --spectrum-global-dimension-size-175: 14px; + --spectrum-global-dimension-size-185: 15px; + --spectrum-global-dimension-size-200: 16px; + --spectrum-global-dimension-size-225: 18px; + --spectrum-global-dimension-size-250: 20px; + --spectrum-global-dimension-size-275: 22px; + --spectrum-global-dimension-size-300: 24px; + --spectrum-global-dimension-size-325: 26px; + --spectrum-global-dimension-size-350: 28px; + --spectrum-global-dimension-size-400: 32px; + --spectrum-global-dimension-size-450: 36px; + --spectrum-global-dimension-size-500: 40px; + --spectrum-global-dimension-size-550: 44px; + --spectrum-global-dimension-size-600: 48px; + --spectrum-global-dimension-size-650: 52px; + --spectrum-global-dimension-size-675: 54px; + --spectrum-global-dimension-size-700: 56px; + --spectrum-global-dimension-size-750: 60px; + --spectrum-global-dimension-size-800: 64px; + --spectrum-global-dimension-size-900: 72px; + --spectrum-global-dimension-size-1000: 80px; + --spectrum-global-dimension-size-1125: 90px; + --spectrum-global-dimension-size-1200: 96px; + --spectrum-global-dimension-size-1250: 100px; + --spectrum-global-dimension-size-1600: 128px; + --spectrum-global-dimension-size-1700: 136px; + --spectrum-global-dimension-size-1800: 144px; + --spectrum-global-dimension-size-2000: 160px; + --spectrum-global-dimension-size-2400: 192px; + --spectrum-global-dimension-size-2500: 200px; + --spectrum-global-dimension-size-3000: 240px; + --spectrum-global-dimension-size-3400: 272px; + --spectrum-global-dimension-size-3600: 288px; + --spectrum-global-dimension-size-4600: 368px; + --spectrum-global-dimension-size-5000: 400px; + --spectrum-global-dimension-size-6000: 480px; + --spectrum-global-dimension-font-size-25: 10px; + --spectrum-global-dimension-font-size-50: 11px; + --spectrum-global-dimension-font-size-75: 12px; + --spectrum-global-dimension-font-size-100: 14px; + --spectrum-global-dimension-font-size-150: 15px; + --spectrum-global-dimension-font-size-200: 16px; + --spectrum-global-dimension-font-size-300: 18px; + --spectrum-global-dimension-font-size-400: 20px; + --spectrum-global-dimension-font-size-500: 22px; + --spectrum-global-dimension-font-size-600: 25px; + --spectrum-global-dimension-font-size-700: 28px; + --spectrum-global-dimension-font-size-800: 32px; + --spectrum-global-dimension-font-size-900: 36px; + --spectrum-global-dimension-font-size-1000: 40px; + --spectrum-global-dimension-font-size-1100: 45px; + --spectrum-global-dimension-font-size-1200: 50px; + --spectrum-global-dimension-font-size-1300: 60px; + --spectrum-alias-item-text-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-text-padding-bottom-s: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-item-workflow-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-rounded-workflow-padding-left-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; + --spectrum-alias-item-mark-padding-top-m: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-item-mark-padding-bottom-m: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-item-mark-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-1-size-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-1-size-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-2-size-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-height-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-width-s: 23px; + --spectrum-alias-item-control-3-width-m: var( + --spectrum-global-dimension-static-size-325 + ); + --spectrum-alias-item-control-3-width-l: 29px; + --spectrum-alias-item-control-3-width-xl: 33px; + --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250); + --spectrum-alias-component-focusring-border-radius: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-focus-ring-border-radius-small: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-focus-ring-border-radius-regular: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-control-three-width-m: 28px; + --spectrum-alias-control-three-width-l: var( + --spectrum-global-dimension-static-size-450 + ); + --spectrum-alias-control-three-width-xl: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-tag-text-padding-top-s: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-focus-ring-radius-default: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-workflow-icon-size-l: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-chevron-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-chevron-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-chevron-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-chevron-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-chevron-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-chevron-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-50: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-checkmark-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-checkmark-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-checkmark-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-checkmark-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-checkmark-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-600: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-dash-size-50: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-dash-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-dash-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-dash-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-dash-size-300: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-dash-size-400: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-dash-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-dash-size-600: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-cross-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-cross-size-100: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-cross-size-200: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-cross-size-300: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-cross-size-400: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-cross-size-500: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-cross-size-600: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-arrow-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-arrow-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-arrow-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-arrow-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-500: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-arrow-size-600: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-ui-icon-cornertriangle-size-100: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-ui-icon-cornertriangle-size-300: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-ui-icon-asterisk-size-200: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-asterisk-size-300: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); + --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); + --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); + --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); + --spectrum-dialog-confirm-title-text-size: var( + --spectrum-alias-heading-s-text-size + ); + --spectrum-dialog-confirm-description-text-size: var( + --spectrum-global-dimension-font-size-100 + ); } diff --git a/tools/styles/express/spectrum-theme-dark.css b/tools/styles/express/spectrum-theme-dark.css index 8a2ccfcbcf..6871520c0e 100644 --- a/tools/styles/express/spectrum-theme-dark.css +++ b/tools/styles/express/spectrum-theme-dark.css @@ -1,300 +1,298 @@ :root, :host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 34, 184, 51; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 68, 202, 73; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 105, 220, 99; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 142, 235, 127; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 228, 194, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 244, 213, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 249, 232, 92; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 252, 246, 187; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 237, 87, 149; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 249, 114, 167; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 255, 143, 185; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 243; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 172, 111, 249; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 187, 135, 251; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 202, 159, 252; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 124, 129, 251; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 145, 149, 255; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 167, 170, 255; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 246, 88, 67; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 255, 117, 94; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 255, 149, 129; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 244, 129, 12; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 254, 154, 46; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 255, 181, 88; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 253, 206, 136; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 18, 162, 108; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 43, 180, 125; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 67, 199, 143; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 94, 217, 162; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 52, 143, 244; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 84, 163, 246; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 114, 183, 249; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 143, 202, 252; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 29, 29, 29; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 38, 38, 38; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 50, 50, 50; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 63, 63, 63; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 84, 84, 84; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 112, 112, 112; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 178, 178, 178; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 209, 209, 209; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 235, 235, 235; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 255, 255, 255; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-avatar-border-color-default: #ffffff1a; - --spectrum-alias-avatar-border-color-hover: #ffffff40; - --spectrum-alias-avatar-border-color-down: #fff6; - --spectrum-alias-avatar-border-color-key-focus: #ffffff40; - --spectrum-alias-avatar-border-color-selected-disabled: #ffffff1a; - --spectrum-alias-transparent-blue-background-color-default: #7c81fb26; - --spectrum-alias-transparent-blue-background-color-hover: #9195ff26; - --spectrum-alias-transparent-blue-background-color-down: #a7aaff26; - --spectrum-alias-transparent-blue-background-color-key-focus: #9195ff26; - --spectrum-alias-border-color-selected: #ffffffe6; - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-modal-overlay: #00000080; - --spectrum-alias-dropshadow-color: #00000080; - --spectrum-alias-background-color-hover-overlay: #ffffff0f; - --spectrum-alias-highlight-hover: #ffffff12; - --spectrum-alias-highlight-down: #ffffff1a; - --spectrum-alias-highlight-selected: #54a3f626; - --spectrum-alias-highlight-selected-hover: #54a3f640; - --spectrum-alias-text-highlight-color: #54a3f640; - --spectrum-alias-background-color-quickactions: #323232e6; - --spectrum-alias-border-color-translucent: #ffffff1a; - --spectrum-alias-radial-reaction-color-default: #ebebeb99; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-50 - ); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: 0.9; + --spectrum-global-color-opacity-80: 0.8; + --spectrum-global-color-opacity-70: 0.7; + --spectrum-global-color-opacity-60: 0.6; + --spectrum-global-color-opacity-55: 0.55; + --spectrum-global-color-opacity-50: 0.5; + --spectrum-global-color-opacity-42: 0.42; + --spectrum-global-color-opacity-40: 0.4; + --spectrum-global-color-opacity-30: 0.3; + --spectrum-global-color-opacity-25: 0.25; + --spectrum-global-color-opacity-20: 0.2; + --spectrum-global-color-opacity-15: 0.15; + --spectrum-global-color-opacity-10: 0.1; + --spectrum-global-color-opacity-8: 0.08; + --spectrum-global-color-opacity-7: 0.07; + --spectrum-global-color-opacity-6: 0.06; + --spectrum-global-color-opacity-5: 0.05; + --spectrum-global-color-opacity-4: 0.04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 34, 184, 51; + --spectrum-global-color-celery-400: rgb( + var(--spectrum-global-color-celery-400-rgb) + ); + --spectrum-global-color-celery-500-rgb: 68, 202, 73; + --spectrum-global-color-celery-500: rgb( + var(--spectrum-global-color-celery-500-rgb) + ); + --spectrum-global-color-celery-600-rgb: 105, 220, 99; + --spectrum-global-color-celery-600: rgb( + var(--spectrum-global-color-celery-600-rgb) + ); + --spectrum-global-color-celery-700-rgb: 142, 235, 127; + --spectrum-global-color-celery-700: rgb( + var(--spectrum-global-color-celery-700-rgb) + ); + --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; + --spectrum-global-color-chartreuse-400: rgb( + var(--spectrum-global-color-chartreuse-400-rgb) + ); + --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; + --spectrum-global-color-chartreuse-500: rgb( + var(--spectrum-global-color-chartreuse-500-rgb) + ); + --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; + --spectrum-global-color-chartreuse-600: rgb( + var(--spectrum-global-color-chartreuse-600-rgb) + ); + --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; + --spectrum-global-color-chartreuse-700: rgb( + var(--spectrum-global-color-chartreuse-700-rgb) + ); + --spectrum-global-color-yellow-400-rgb: 228, 194, 0; + --spectrum-global-color-yellow-400: rgb( + var(--spectrum-global-color-yellow-400-rgb) + ); + --spectrum-global-color-yellow-500-rgb: 244, 213, 0; + --spectrum-global-color-yellow-500: rgb( + var(--spectrum-global-color-yellow-500-rgb) + ); + --spectrum-global-color-yellow-600-rgb: 249, 232, 92; + --spectrum-global-color-yellow-600: rgb( + var(--spectrum-global-color-yellow-600-rgb) + ); + --spectrum-global-color-yellow-700-rgb: 252, 246, 187; + --spectrum-global-color-yellow-700: rgb( + var(--spectrum-global-color-yellow-700-rgb) + ); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb( + var(--spectrum-global-color-magenta-400-rgb) + ); + --spectrum-global-color-magenta-500-rgb: 237, 87, 149; + --spectrum-global-color-magenta-500: rgb( + var(--spectrum-global-color-magenta-500-rgb) + ); + --spectrum-global-color-magenta-600-rgb: 249, 114, 167; + --spectrum-global-color-magenta-600: rgb( + var(--spectrum-global-color-magenta-600-rgb) + ); + --spectrum-global-color-magenta-700-rgb: 255, 143, 185; + --spectrum-global-color-magenta-700: rgb( + var(--spectrum-global-color-magenta-700-rgb) + ); + --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; + --spectrum-global-color-fuchsia-400: rgb( + var(--spectrum-global-color-fuchsia-400-rgb) + ); + --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; + --spectrum-global-color-fuchsia-500: rgb( + var(--spectrum-global-color-fuchsia-500-rgb) + ); + --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; + --spectrum-global-color-fuchsia-600: rgb( + var(--spectrum-global-color-fuchsia-600-rgb) + ); + --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; + --spectrum-global-color-fuchsia-700: rgb( + var(--spectrum-global-color-fuchsia-700-rgb) + ); + --spectrum-global-color-purple-400-rgb: 157, 87, 243; + --spectrum-global-color-purple-400: rgb( + var(--spectrum-global-color-purple-400-rgb) + ); + --spectrum-global-color-purple-500-rgb: 172, 111, 249; + --spectrum-global-color-purple-500: rgb( + var(--spectrum-global-color-purple-500-rgb) + ); + --spectrum-global-color-purple-600-rgb: 187, 135, 251; + --spectrum-global-color-purple-600: rgb( + var(--spectrum-global-color-purple-600-rgb) + ); + --spectrum-global-color-purple-700-rgb: 202, 159, 252; + --spectrum-global-color-purple-700: rgb( + var(--spectrum-global-color-purple-700-rgb) + ); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb( + var(--spectrum-global-color-indigo-400-rgb) + ); + --spectrum-global-color-indigo-500-rgb: 124, 129, 251; + --spectrum-global-color-indigo-500: rgb( + var(--spectrum-global-color-indigo-500-rgb) + ); + --spectrum-global-color-indigo-600-rgb: 145, 149, 255; + --spectrum-global-color-indigo-600: rgb( + var(--spectrum-global-color-indigo-600-rgb) + ); + --spectrum-global-color-indigo-700-rgb: 167, 170, 255; + --spectrum-global-color-indigo-700: rgb( + var(--spectrum-global-color-indigo-700-rgb) + ); + --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; + --spectrum-global-color-seafoam-400: rgb( + var(--spectrum-global-color-seafoam-400-rgb) + ); + --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; + --spectrum-global-color-seafoam-500: rgb( + var(--spectrum-global-color-seafoam-500-rgb) + ); + --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; + --spectrum-global-color-seafoam-600: rgb( + var(--spectrum-global-color-seafoam-600-rgb) + ); + --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; + --spectrum-global-color-seafoam-700: rgb( + var(--spectrum-global-color-seafoam-700-rgb) + ); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb( + var(--spectrum-global-color-red-400-rgb) + ); + --spectrum-global-color-red-500-rgb: 246, 88, 67; + --spectrum-global-color-red-500: rgb( + var(--spectrum-global-color-red-500-rgb) + ); + --spectrum-global-color-red-600-rgb: 255, 117, 94; + --spectrum-global-color-red-600: rgb( + var(--spectrum-global-color-red-600-rgb) + ); + --spectrum-global-color-red-700-rgb: 255, 149, 129; + --spectrum-global-color-red-700: rgb( + var(--spectrum-global-color-red-700-rgb) + ); + --spectrum-global-color-orange-400-rgb: 244, 129, 12; + --spectrum-global-color-orange-400: rgb( + var(--spectrum-global-color-orange-400-rgb) + ); + --spectrum-global-color-orange-500-rgb: 254, 154, 46; + --spectrum-global-color-orange-500: rgb( + var(--spectrum-global-color-orange-500-rgb) + ); + --spectrum-global-color-orange-600-rgb: 255, 181, 88; + --spectrum-global-color-orange-600: rgb( + var(--spectrum-global-color-orange-600-rgb) + ); + --spectrum-global-color-orange-700-rgb: 253, 206, 136; + --spectrum-global-color-orange-700: rgb( + var(--spectrum-global-color-orange-700-rgb) + ); + --spectrum-global-color-green-400-rgb: 18, 162, 108; + --spectrum-global-color-green-400: rgb( + var(--spectrum-global-color-green-400-rgb) + ); + --spectrum-global-color-green-500-rgb: 43, 180, 125; + --spectrum-global-color-green-500: rgb( + var(--spectrum-global-color-green-500-rgb) + ); + --spectrum-global-color-green-600-rgb: 67, 199, 143; + --spectrum-global-color-green-600: rgb( + var(--spectrum-global-color-green-600-rgb) + ); + --spectrum-global-color-green-700-rgb: 94, 217, 162; + --spectrum-global-color-green-700: rgb( + var(--spectrum-global-color-green-700-rgb) + ); + --spectrum-global-color-blue-400-rgb: 52, 143, 244; + --spectrum-global-color-blue-400: rgb( + var(--spectrum-global-color-blue-400-rgb) + ); + --spectrum-global-color-blue-500-rgb: 84, 163, 246; + --spectrum-global-color-blue-500: rgb( + var(--spectrum-global-color-blue-500-rgb) + ); + --spectrum-global-color-blue-600-rgb: 114, 183, 249; + --spectrum-global-color-blue-600: rgb( + var(--spectrum-global-color-blue-600-rgb) + ); + --spectrum-global-color-blue-700-rgb: 143, 202, 252; + --spectrum-global-color-blue-700: rgb( + var(--spectrum-global-color-blue-700-rgb) + ); + --spectrum-global-color-gray-50-rgb: 29, 29, 29; + --spectrum-global-color-gray-50: rgb( + var(--spectrum-global-color-gray-50-rgb) + ); + --spectrum-global-color-gray-75-rgb: 38, 38, 38; + --spectrum-global-color-gray-75: rgb( + var(--spectrum-global-color-gray-75-rgb) + ); + --spectrum-global-color-gray-100-rgb: 50, 50, 50; + --spectrum-global-color-gray-100: rgb( + var(--spectrum-global-color-gray-100-rgb) + ); + --spectrum-global-color-gray-200-rgb: 63, 63, 63; + --spectrum-global-color-gray-200: rgb( + var(--spectrum-global-color-gray-200-rgb) + ); + --spectrum-global-color-gray-300-rgb: 84, 84, 84; + --spectrum-global-color-gray-300: rgb( + var(--spectrum-global-color-gray-300-rgb) + ); + --spectrum-global-color-gray-400-rgb: 112, 112, 112; + --spectrum-global-color-gray-400: rgb( + var(--spectrum-global-color-gray-400-rgb) + ); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb( + var(--spectrum-global-color-gray-500-rgb) + ); + --spectrum-global-color-gray-600-rgb: 178, 178, 178; + --spectrum-global-color-gray-600: rgb( + var(--spectrum-global-color-gray-600-rgb) + ); + --spectrum-global-color-gray-700-rgb: 209, 209, 209; + --spectrum-global-color-gray-700: rgb( + var(--spectrum-global-color-gray-700-rgb) + ); + --spectrum-global-color-gray-800-rgb: 235, 235, 235; + --spectrum-global-color-gray-800: rgb( + var(--spectrum-global-color-gray-800-rgb) + ); + --spectrum-global-color-gray-900-rgb: 255, 255, 255; + --spectrum-global-color-gray-900: rgb( + var(--spectrum-global-color-gray-900-rgb) + ); + --spectrum-alias-avatar-border-color-default: #ffffff1a; + --spectrum-alias-avatar-border-color-hover: #ffffff40; + --spectrum-alias-avatar-border-color-down: #fff6; + --spectrum-alias-avatar-border-color-key-focus: #ffffff40; + --spectrum-alias-avatar-border-color-selected-disabled: #ffffff1a; + --spectrum-alias-transparent-blue-background-color-default: #7c81fb26; + --spectrum-alias-transparent-blue-background-color-hover: #9195ff26; + --spectrum-alias-transparent-blue-background-color-down: #a7aaff26; + --spectrum-alias-transparent-blue-background-color-key-focus: #9195ff26; + --spectrum-alias-border-color-selected: #ffffffe6; + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-modal-overlay: #00000080; + --spectrum-alias-dropshadow-color: #00000080; + --spectrum-alias-background-color-hover-overlay: #ffffff0f; + --spectrum-alias-highlight-hover: #ffffff12; + --spectrum-alias-highlight-down: #ffffff1a; + --spectrum-alias-highlight-selected: #54a3f626; + --spectrum-alias-highlight-selected-hover: #54a3f640; + --spectrum-alias-text-highlight-color: #54a3f640; + --spectrum-alias-background-color-quickactions: #323232e6; + --spectrum-alias-border-color-translucent: #ffffff1a; + --spectrum-alias-radial-reaction-color-default: #ebebeb99; + --spectrum-alias-pasteboard-background-color: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-separator-color: var( + --spectrum-global-color-gray-50 + ); } diff --git a/tools/styles/express/spectrum-theme-light.css b/tools/styles/express/spectrum-theme-light.css index e15a59ccb8..feed3e9d33 100644 --- a/tools/styles/express/spectrum-theme-light.css +++ b/tools/styles/express/spectrum-theme-light.css @@ -1,300 +1,298 @@ :root, :host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 39, 187, 54; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 7, 167, 33; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 0, 145, 18; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 0, 124, 15; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 232, 198, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 215, 179, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 196, 159, 0; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 176, 140, 0; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 200, 34, 105; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 173, 9, 85; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 142, 0, 69; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 244; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 137, 61, 231; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 115, 38, 211; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 93, 19, 183; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 82, 88, 228; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 64, 70, 202; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 50, 54, 168; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 211, 21, 16; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 180, 0, 0; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 147, 0, 0; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 246, 133, 17; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 228, 111, 0; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 203, 93, 0; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 177, 76, 0; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 143, 93; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 0, 122, 77; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 0, 101, 62; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 0, 81, 50; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 20, 122, 243; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 2, 101, 220; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 0, 84, 182; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 0, 68, 145; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 253, 253, 253; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 248, 248, 248; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 230, 230, 230; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 213, 213, 213; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 177, 177, 177; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 109, 109, 109; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 70, 70, 70; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-avatar-border-color-default: #0000001a; - --spectrum-alias-avatar-border-color-hover: #00000040; - --spectrum-alias-avatar-border-color-down: #0006; - --spectrum-alias-avatar-border-color-key-focus: #00000040; - --spectrum-alias-avatar-border-color-selected-disabled: #0000001a; - --spectrum-alias-transparent-blue-background-color-default: #5258e426; - --spectrum-alias-transparent-blue-background-color-hover: #4046ca26; - --spectrum-alias-transparent-blue-background-color-down: #3236a826; - --spectrum-alias-transparent-blue-background-color-key-focus: #4046ca26; - --spectrum-alias-border-color-selected: #000000e6; - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-background-color-modal-overlay: #0006; - --spectrum-alias-dropshadow-color: #00000026; - --spectrum-alias-background-color-hover-overlay: #0000000a; - --spectrum-alias-highlight-hover: #0000000f; - --spectrum-alias-highlight-down: #0000001a; - --spectrum-alias-highlight-selected: #0265dc1a; - --spectrum-alias-highlight-selected-hover: #0265dc33; - --spectrum-alias-text-highlight-color: #0265dc33; - --spectrum-alias-background-color-quickactions: #f8f8f8e6; - --spectrum-alias-border-color-translucent: #0000001a; - --spectrum-alias-radial-reaction-color-default: #2229; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-300 - ); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: 0.9; + --spectrum-global-color-opacity-80: 0.8; + --spectrum-global-color-opacity-70: 0.7; + --spectrum-global-color-opacity-60: 0.6; + --spectrum-global-color-opacity-55: 0.55; + --spectrum-global-color-opacity-50: 0.5; + --spectrum-global-color-opacity-42: 0.42; + --spectrum-global-color-opacity-40: 0.4; + --spectrum-global-color-opacity-30: 0.3; + --spectrum-global-color-opacity-25: 0.25; + --spectrum-global-color-opacity-20: 0.2; + --spectrum-global-color-opacity-15: 0.15; + --spectrum-global-color-opacity-10: 0.1; + --spectrum-global-color-opacity-8: 0.08; + --spectrum-global-color-opacity-7: 0.07; + --spectrum-global-color-opacity-6: 0.06; + --spectrum-global-color-opacity-5: 0.05; + --spectrum-global-color-opacity-4: 0.04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 39, 187, 54; + --spectrum-global-color-celery-400: rgb( + var(--spectrum-global-color-celery-400-rgb) + ); + --spectrum-global-color-celery-500-rgb: 7, 167, 33; + --spectrum-global-color-celery-500: rgb( + var(--spectrum-global-color-celery-500-rgb) + ); + --spectrum-global-color-celery-600-rgb: 0, 145, 18; + --spectrum-global-color-celery-600: rgb( + var(--spectrum-global-color-celery-600-rgb) + ); + --spectrum-global-color-celery-700-rgb: 0, 124, 15; + --spectrum-global-color-celery-700: rgb( + var(--spectrum-global-color-celery-700-rgb) + ); + --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; + --spectrum-global-color-chartreuse-400: rgb( + var(--spectrum-global-color-chartreuse-400-rgb) + ); + --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; + --spectrum-global-color-chartreuse-500: rgb( + var(--spectrum-global-color-chartreuse-500-rgb) + ); + --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; + --spectrum-global-color-chartreuse-600: rgb( + var(--spectrum-global-color-chartreuse-600-rgb) + ); + --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; + --spectrum-global-color-chartreuse-700: rgb( + var(--spectrum-global-color-chartreuse-700-rgb) + ); + --spectrum-global-color-yellow-400-rgb: 232, 198, 0; + --spectrum-global-color-yellow-400: rgb( + var(--spectrum-global-color-yellow-400-rgb) + ); + --spectrum-global-color-yellow-500-rgb: 215, 179, 0; + --spectrum-global-color-yellow-500: rgb( + var(--spectrum-global-color-yellow-500-rgb) + ); + --spectrum-global-color-yellow-600-rgb: 196, 159, 0; + --spectrum-global-color-yellow-600: rgb( + var(--spectrum-global-color-yellow-600-rgb) + ); + --spectrum-global-color-yellow-700-rgb: 176, 140, 0; + --spectrum-global-color-yellow-700: rgb( + var(--spectrum-global-color-yellow-700-rgb) + ); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb( + var(--spectrum-global-color-magenta-400-rgb) + ); + --spectrum-global-color-magenta-500-rgb: 200, 34, 105; + --spectrum-global-color-magenta-500: rgb( + var(--spectrum-global-color-magenta-500-rgb) + ); + --spectrum-global-color-magenta-600-rgb: 173, 9, 85; + --spectrum-global-color-magenta-600: rgb( + var(--spectrum-global-color-magenta-600-rgb) + ); + --spectrum-global-color-magenta-700-rgb: 142, 0, 69; + --spectrum-global-color-magenta-700: rgb( + var(--spectrum-global-color-magenta-700-rgb) + ); + --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; + --spectrum-global-color-fuchsia-400: rgb( + var(--spectrum-global-color-fuchsia-400-rgb) + ); + --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; + --spectrum-global-color-fuchsia-500: rgb( + var(--spectrum-global-color-fuchsia-500-rgb) + ); + --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; + --spectrum-global-color-fuchsia-600: rgb( + var(--spectrum-global-color-fuchsia-600-rgb) + ); + --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; + --spectrum-global-color-fuchsia-700: rgb( + var(--spectrum-global-color-fuchsia-700-rgb) + ); + --spectrum-global-color-purple-400-rgb: 157, 87, 244; + --spectrum-global-color-purple-400: rgb( + var(--spectrum-global-color-purple-400-rgb) + ); + --spectrum-global-color-purple-500-rgb: 137, 61, 231; + --spectrum-global-color-purple-500: rgb( + var(--spectrum-global-color-purple-500-rgb) + ); + --spectrum-global-color-purple-600-rgb: 115, 38, 211; + --spectrum-global-color-purple-600: rgb( + var(--spectrum-global-color-purple-600-rgb) + ); + --spectrum-global-color-purple-700-rgb: 93, 19, 183; + --spectrum-global-color-purple-700: rgb( + var(--spectrum-global-color-purple-700-rgb) + ); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb( + var(--spectrum-global-color-indigo-400-rgb) + ); + --spectrum-global-color-indigo-500-rgb: 82, 88, 228; + --spectrum-global-color-indigo-500: rgb( + var(--spectrum-global-color-indigo-500-rgb) + ); + --spectrum-global-color-indigo-600-rgb: 64, 70, 202; + --spectrum-global-color-indigo-600: rgb( + var(--spectrum-global-color-indigo-600-rgb) + ); + --spectrum-global-color-indigo-700-rgb: 50, 54, 168; + --spectrum-global-color-indigo-700: rgb( + var(--spectrum-global-color-indigo-700-rgb) + ); + --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; + --spectrum-global-color-seafoam-400: rgb( + var(--spectrum-global-color-seafoam-400-rgb) + ); + --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; + --spectrum-global-color-seafoam-500: rgb( + var(--spectrum-global-color-seafoam-500-rgb) + ); + --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; + --spectrum-global-color-seafoam-600: rgb( + var(--spectrum-global-color-seafoam-600-rgb) + ); + --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; + --spectrum-global-color-seafoam-700: rgb( + var(--spectrum-global-color-seafoam-700-rgb) + ); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb( + var(--spectrum-global-color-red-400-rgb) + ); + --spectrum-global-color-red-500-rgb: 211, 21, 16; + --spectrum-global-color-red-500: rgb( + var(--spectrum-global-color-red-500-rgb) + ); + --spectrum-global-color-red-600-rgb: 180, 0, 0; + --spectrum-global-color-red-600: rgb( + var(--spectrum-global-color-red-600-rgb) + ); + --spectrum-global-color-red-700-rgb: 147, 0, 0; + --spectrum-global-color-red-700: rgb( + var(--spectrum-global-color-red-700-rgb) + ); + --spectrum-global-color-orange-400-rgb: 246, 133, 17; + --spectrum-global-color-orange-400: rgb( + var(--spectrum-global-color-orange-400-rgb) + ); + --spectrum-global-color-orange-500-rgb: 228, 111, 0; + --spectrum-global-color-orange-500: rgb( + var(--spectrum-global-color-orange-500-rgb) + ); + --spectrum-global-color-orange-600-rgb: 203, 93, 0; + --spectrum-global-color-orange-600: rgb( + var(--spectrum-global-color-orange-600-rgb) + ); + --spectrum-global-color-orange-700-rgb: 177, 76, 0; + --spectrum-global-color-orange-700: rgb( + var(--spectrum-global-color-orange-700-rgb) + ); + --spectrum-global-color-green-400-rgb: 0, 143, 93; + --spectrum-global-color-green-400: rgb( + var(--spectrum-global-color-green-400-rgb) + ); + --spectrum-global-color-green-500-rgb: 0, 122, 77; + --spectrum-global-color-green-500: rgb( + var(--spectrum-global-color-green-500-rgb) + ); + --spectrum-global-color-green-600-rgb: 0, 101, 62; + --spectrum-global-color-green-600: rgb( + var(--spectrum-global-color-green-600-rgb) + ); + --spectrum-global-color-green-700-rgb: 0, 81, 50; + --spectrum-global-color-green-700: rgb( + var(--spectrum-global-color-green-700-rgb) + ); + --spectrum-global-color-blue-400-rgb: 20, 122, 243; + --spectrum-global-color-blue-400: rgb( + var(--spectrum-global-color-blue-400-rgb) + ); + --spectrum-global-color-blue-500-rgb: 2, 101, 220; + --spectrum-global-color-blue-500: rgb( + var(--spectrum-global-color-blue-500-rgb) + ); + --spectrum-global-color-blue-600-rgb: 0, 84, 182; + --spectrum-global-color-blue-600: rgb( + var(--spectrum-global-color-blue-600-rgb) + ); + --spectrum-global-color-blue-700-rgb: 0, 68, 145; + --spectrum-global-color-blue-700: rgb( + var(--spectrum-global-color-blue-700-rgb) + ); + --spectrum-global-color-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-gray-50: rgb( + var(--spectrum-global-color-gray-50-rgb) + ); + --spectrum-global-color-gray-75-rgb: 253, 253, 253; + --spectrum-global-color-gray-75: rgb( + var(--spectrum-global-color-gray-75-rgb) + ); + --spectrum-global-color-gray-100-rgb: 248, 248, 248; + --spectrum-global-color-gray-100: rgb( + var(--spectrum-global-color-gray-100-rgb) + ); + --spectrum-global-color-gray-200-rgb: 230, 230, 230; + --spectrum-global-color-gray-200: rgb( + var(--spectrum-global-color-gray-200-rgb) + ); + --spectrum-global-color-gray-300-rgb: 213, 213, 213; + --spectrum-global-color-gray-300: rgb( + var(--spectrum-global-color-gray-300-rgb) + ); + --spectrum-global-color-gray-400-rgb: 177, 177, 177; + --spectrum-global-color-gray-400: rgb( + var(--spectrum-global-color-gray-400-rgb) + ); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb( + var(--spectrum-global-color-gray-500-rgb) + ); + --spectrum-global-color-gray-600-rgb: 109, 109, 109; + --spectrum-global-color-gray-600: rgb( + var(--spectrum-global-color-gray-600-rgb) + ); + --spectrum-global-color-gray-700-rgb: 70, 70, 70; + --spectrum-global-color-gray-700: rgb( + var(--spectrum-global-color-gray-700-rgb) + ); + --spectrum-global-color-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-gray-800: rgb( + var(--spectrum-global-color-gray-800-rgb) + ); + --spectrum-global-color-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-gray-900: rgb( + var(--spectrum-global-color-gray-900-rgb) + ); + --spectrum-alias-avatar-border-color-default: #0000001a; + --spectrum-alias-avatar-border-color-hover: #00000040; + --spectrum-alias-avatar-border-color-down: #0006; + --spectrum-alias-avatar-border-color-key-focus: #00000040; + --spectrum-alias-avatar-border-color-selected-disabled: #0000001a; + --spectrum-alias-transparent-blue-background-color-default: #5258e426; + --spectrum-alias-transparent-blue-background-color-hover: #4046ca26; + --spectrum-alias-transparent-blue-background-color-down: #3236a826; + --spectrum-alias-transparent-blue-background-color-key-focus: #4046ca26; + --spectrum-alias-border-color-selected: #000000e6; + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-background-color-modal-overlay: #0006; + --spectrum-alias-dropshadow-color: #00000026; + --spectrum-alias-background-color-hover-overlay: #0000000a; + --spectrum-alias-highlight-hover: #0000000f; + --spectrum-alias-highlight-down: #0000001a; + --spectrum-alias-highlight-selected: #0265dc1a; + --spectrum-alias-highlight-selected-hover: #0265dc33; + --spectrum-alias-text-highlight-color: #0265dc33; + --spectrum-alias-background-color-quickactions: #f8f8f8e6; + --spectrum-alias-border-color-translucent: #0000001a; + --spectrum-alias-radial-reaction-color-default: #2229; + --spectrum-alias-pasteboard-background-color: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-separator-color: var( + --spectrum-global-color-gray-300 + ); } diff --git a/tools/styles/fonts.css b/tools/styles/fonts.css index ef47aa872e..c1ca10ec53 100755 --- a/tools/styles/fonts.css +++ b/tools/styles/fonts.css @@ -1,142 +1,142 @@ .spectrum-Typography { - font-family: var(--spectrum-font-family); - font-style: var(--spectrum-font-style); - font-size: var(--spectrum-font-size); + font-family: var(--spectrum-font-family); + font-style: var(--spectrum-font-style); + font-size: var(--spectrum-font-size); } .spectrum-Typography:lang(ar) { - font-family: var(--spectrum-font-family-ar); + font-family: var(--spectrum-font-family-ar); } .spectrum-Typography:lang(he) { - font-family: var(--spectrum-font-family-he); + font-family: var(--spectrum-font-family-he); } .spectrum-Typography .spectrum-Heading { - --spectrum-heading-margin-start: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-top-multiplier) - ); - --spectrum-heading-margin-end: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-bottom-multiplier) - ); + --spectrum-heading-margin-start: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-top-multiplier) + ); + --spectrum-heading-margin-end: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-bottom-multiplier) + ); } .spectrum-Typography .spectrum-Body { - --spectrum-body-margin-end: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); + --spectrum-body-margin-end: calc( + var(--mod-body-font-size, var(--spectrum-body-font-size)) * + var(--spectrum-body-margin-multiplier) + ); } .spectrum-Typography .spectrum-Detail { - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); + --spectrum-detail-margin-start: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-top-multiplier) + ); + --spectrum-detail-margin-end: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-bottom-multiplier) + ); } .spectrum-Heading { - font-family: var( - --mod-heading-sans-serif-font-family, - var(--spectrum-heading-sans-serif-font-family) - ); - font-style: var( - --mod-heading-sans-serif-font-style, - var(--spectrum-heading-sans-serif-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-font-weight, - var(--spectrum-heading-sans-serif-font-weight) - ); - font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); - color: var( - --highcontrast-heading-font-color, - var(--mod-heading-font-color, var(--spectrum-heading-font-color)) - ); - line-height: var( - --mod-heading-line-height, - var(--spectrum-heading-line-height) - ); - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start, 0) - ); - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end, 0) - ); + font-family: var( + --mod-heading-sans-serif-font-family, + var(--spectrum-heading-sans-serif-font-family) + ); + font-style: var( + --mod-heading-sans-serif-font-style, + var(--spectrum-heading-sans-serif-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-font-weight, + var(--spectrum-heading-sans-serif-font-weight) + ); + font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); + color: var( + --highcontrast-heading-font-color, + var(--mod-heading-font-color, var(--spectrum-heading-font-color)) + ); + line-height: var( + --mod-heading-line-height, + var(--spectrum-heading-line-height) + ); + margin-block-start: var( + --mod-heading-margin-start, + var(--spectrum-heading-margin-start, 0) + ); + margin-block-end: var( + --mod-heading-margin-end, + var(--spectrum-heading-margin-end, 0) + ); } .spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong { - font-style: var( - --mod-heading-sans-serif-strong-font-style, - var(--spectrum-heading-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-font-weight, - var(--spectrum-heading-sans-serif-strong-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-strong-font-style, + var(--spectrum-heading-sans-serif-strong-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-strong-font-weight, + var(--spectrum-heading-sans-serif-strong-font-weight) + ); } .spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em { - font-style: var( - --mod-heading-sans-serif-emphasized-font-style, - var(--spectrum-heading-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-emphasized-font-weight, - var(--spectrum-heading-sans-serif-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-emphasized-font-style, + var(--spectrum-heading-sans-serif-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-emphasized-font-weight, + var(--spectrum-heading-sans-serif-emphasized-font-weight) + ); } .spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em { - font-style: var( - --mod-heading-sans-serif-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-strong-emphasized-font-style, + var(--spectrum-heading-sans-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-strong-emphasized-font-weight, + var(--spectrum-heading-sans-serif-strong-emphasized-font-weight) + ); } .spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh) { - font-family: var( - --mod-heading-cjk-font-family, - var(--spectrum-heading-cjk-font-family) - ); - font-style: var( - --mod-heading-cjk-font-style, - var(--spectrum-heading-cjk-font-style) - ); - font-weight: var( - --mod-heading-cjk-font-weight, - var(--spectrum-heading-cjk-font-weight) - ); - font-size: var( - --mod-heading-cjk-font-size, - var(--spectrum-heading-cjk-font-size) - ); - line-height: var( - --mod-heading-cjk-line-height, - var(--spectrum-heading-cjk-line-height) - ); - letter-spacing: var( - --mod-heading-cjk-letter-spacing, - var(--spectrum-heading-cjk-letter-spacing) - ); + font-family: var( + --mod-heading-cjk-font-family, + var(--spectrum-heading-cjk-font-family) + ); + font-style: var( + --mod-heading-cjk-font-style, + var(--spectrum-heading-cjk-font-style) + ); + font-weight: var( + --mod-heading-cjk-font-weight, + var(--spectrum-heading-cjk-font-weight) + ); + font-size: var( + --mod-heading-cjk-font-size, + var(--spectrum-heading-cjk-font-size) + ); + line-height: var( + --mod-heading-cjk-line-height, + var(--spectrum-heading-cjk-line-height) + ); + letter-spacing: var( + --mod-heading-cjk-letter-spacing, + var(--spectrum-heading-cjk-letter-spacing) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, @@ -145,14 +145,14 @@ .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em { - font-style: var( - --mod-heading-cjk-emphasized-font-style, - var(--spectrum-heading-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-emphasized-font-weight, - var(--spectrum-heading-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-emphasized-font-style, + var(--spectrum-heading-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-emphasized-font-weight, + var(--spectrum-heading-cjk-emphasized-font-weight) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-strong, @@ -161,14 +161,14 @@ .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong { - font-style: var( - --mod-heading-cjk-strong-font-style, - var(--spectrum-heading-cjk-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-font-weight, - var(--spectrum-heading-cjk-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-strong-font-style, + var(--spectrum-heading-cjk-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-strong-font-weight, + var(--spectrum-heading-cjk-strong-font-weight) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, @@ -180,75 +180,75 @@ .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-strong-emphasized-font-style, - var(--spectrum-heading-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-strong-emphasized-font-style, + var(--spectrum-heading-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-strong-emphasized-font-weight) + ); } .spectrum-Heading--heavy { - font-style: var( - --mod-heading-sans-serif-heavy-font-style, - var(--spectrum-heading-sans-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-font-weight, - var(--spectrum-heading-sans-serif-heavy-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-font-style, + var(--spectrum-heading-sans-serif-heavy-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-font-weight, + var(--spectrum-heading-sans-serif-heavy-font-weight) + ); } .spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-sans-serif-heavy-strong-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-strong-font-style, + var(--spectrum-heading-sans-serif-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-strong-font-weight, + var(--spectrum-heading-sans-serif-heavy-strong-font-weight) + ); } .spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em { - font-style: var( - --mod-heading-sans-serif-heavy-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-emphasized-font-style, + var(--spectrum-heading-sans-serif-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-emphasized-font-weight, + var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight) + ); } .spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-strong-emphasized-font-style, + var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh) { - font-style: var( - --mod-heading-cjk-heavy-font-style, - var(--spectrum-heading-cjk-heavy-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-font-weight, - var(--spectrum-heading-cjk-heavy-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-font-style, + var(--spectrum-heading-cjk-heavy-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-font-weight, + var(--spectrum-heading-cjk-heavy-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, @@ -257,14 +257,14 @@ .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em { - font-style: var( - --mod-heading-cjk-heavy-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-emphasized-font-style, + var(--spectrum-heading-cjk-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-emphasized-font-weight, + var(--spectrum-heading-cjk-heavy-emphasized-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, @@ -273,97 +273,97 @@ .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong { - font-style: var( - --mod-heading-cjk-heavy-strong-font-style, - var(--spectrum-heading-cjk-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-font-weight, - var(--spectrum-heading-cjk-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-strong-font-style, + var(--spectrum-heading-cjk-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-strong-font-weight, + var(--spectrum-heading-cjk-heavy-strong-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-heavy-strong-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-strong-emphasized-font-style, + var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--light { - font-style: var( - --mod-heading-sans-serif-light-font-style, - var(--spectrum-heading-sans-serif-light-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-font-weight, - var(--spectrum-heading-sans-serif-light-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-font-style, + var(--spectrum-heading-sans-serif-light-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-font-weight, + var(--spectrum-heading-sans-serif-light-font-weight) + ); } .spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em { - font-style: var( - --mod-heading-sans-serif-light-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-emphasized-font-style, + var(--spectrum-heading-sans-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-emphasized-font-weight, + var(--spectrum-heading-sans-serif-light-emphasized-font-weight) + ); } .spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong { - font-style: var( - --mod-heading-sans-serif-light-strong-font-style, - var(--spectrum-heading-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-font-weight, - var(--spectrum-heading-sans-serif-light-strong-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-strong-font-style, + var(--spectrum-heading-sans-serif-light-strong-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-strong-font-weight, + var(--spectrum-heading-sans-serif-light-strong-font-weight) + ); } .spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em { - font-style: var( - --mod-heading-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-strong-emphasized-font-style, + var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-strong-emphasized-font-weight, + var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh) { - font-style: var( - --mod-heading-cjk-light-font-style, - var(--spectrum-heading-cjk-light-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-font-weight, - var(--spectrum-heading-cjk-light-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-font-style, + var(--spectrum-heading-cjk-light-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-font-weight, + var(--spectrum-heading-cjk-light-font-weight) + ); } .spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, @@ -372,14 +372,14 @@ .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong { - font-style: var( - --mod-heading-cjk-light-strong-font-style, - var(--spectrum-heading-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-font-weight, - var(--spectrum-heading-cjk-light-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-strong-font-style, + var(--spectrum-heading-cjk-light-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-strong-font-weight, + var(--spectrum-heading-cjk-light-strong-font-weight) + ); } .spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, @@ -388,277 +388,277 @@ .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em { - font-style: var( - --mod-heading-cjk-light-emphasized-font-style, - var(--spectrum-heading-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-emphasized-font-weight, - var(--spectrum-heading-cjk-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-emphasized-font-style, + var(--spectrum-heading-cjk-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-emphasized-font-weight, + var(--spectrum-heading-cjk-light-emphasized-font-weight) + ); } .spectrum-Heading--light:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-light-strong-emphasized-font-style, - var(--spectrum-heading-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-strong-emphasized-font-style, + var(--spectrum-heading-cjk-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) + ); } .spectrum-Heading--serif { - font-family: var( - --mod-heading-serif-font-family, - var(--spectrum-heading-serif-font-family) - ); - font-style: var( - --mod-heading-serif-font-style, - var(--spectrum-heading-serif-font-style) - ); - font-weight: var( - --mod-heading-serif-font-weight, - var(--spectrum-heading-serif-font-weight) - ); + font-family: var( + --mod-heading-serif-font-family, + var(--spectrum-heading-serif-font-family) + ); + font-style: var( + --mod-heading-serif-font-style, + var(--spectrum-heading-serif-font-style) + ); + font-weight: var( + --mod-heading-serif-font-weight, + var(--spectrum-heading-serif-font-weight) + ); } .spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em { - font-style: var( - --mod-heading-serif-emphasized-font-style, - var(--spectrum-heading-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-emphasized-font-weight, - var(--spectrum-heading-serif-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-emphasized-font-style, + var(--spectrum-heading-serif-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-emphasized-font-weight, + var(--spectrum-heading-serif-emphasized-font-weight) + ); } .spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong { - font-style: var( - --mod-heading-serif-strong-font-style, - var(--spectrum-heading-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-font-weight, - var(--spectrum-heading-serif-strong-font-weight) - ); + font-style: var( + --mod-heading-serif-strong-font-style, + var(--spectrum-heading-serif-strong-font-style) + ); + font-weight: var( + --mod-heading-serif-strong-font-weight, + var(--spectrum-heading-serif-strong-font-weight) + ); } .spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em { - font-style: var( - --mod-heading-serif-strong-emphasized-font-style, - var(--spectrum-heading-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-emphasized-font-weight, - var(--spectrum-heading-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-strong-emphasized-font-style, + var(--spectrum-heading-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-strong-emphasized-font-weight, + var(--spectrum-heading-serif-strong-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy { - font-style: var( - --mod-heading-serif-heavy-font-style, - var(--spectrum-heading-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-font-weight, - var(--spectrum-heading-serif-heavy-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-font-style, + var(--spectrum-heading-serif-heavy-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-font-weight, + var(--spectrum-heading-serif-heavy-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-serif-heavy-strong-font-style, - var(--spectrum-heading-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-font-weight, - var(--spectrum-heading-serif-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-strong-font-style, + var(--spectrum-heading-serif-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-strong-font-weight, + var(--spectrum-heading-serif-heavy-strong-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em { - font-style: var( - --mod-heading-serif-heavy-emphasized-font-style, - var(--spectrum-heading-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-emphasized-font-style, + var(--spectrum-heading-serif-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-emphasized-font-weight, + var(--spectrum-heading-serif-heavy-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-strong-emphasized-font-style, + var(--spectrum-heading-serif-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light { - font-style: var( - --mod-heading-serif-light-font-style, - var(--spectrum-heading-serif-light-font-style) - ); - font-weight: var( - --mod-heading-serif-light-font-weight, - var(--spectrum-heading-serif-light-font-weight) - ); + font-style: var( + --mod-heading-serif-light-font-style, + var(--spectrum-heading-serif-light-font-style) + ); + font-weight: var( + --mod-heading-serif-light-font-weight, + var(--spectrum-heading-serif-light-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em { - font-style: var( - --mod-heading-serif-light-emphasized-font-style, - var(--spectrum-heading-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-emphasized-font-weight, - var(--spectrum-heading-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-light-emphasized-font-style, + var(--spectrum-heading-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-light-emphasized-font-weight, + var(--spectrum-heading-serif-light-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong { - font-style: var( - --mod-heading-serif-light-strong-font-style, - var(--spectrum-heading-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-font-weight, - var(--spectrum-heading-serif-light-strong-font-weight) - ); + font-style: var( + --mod-heading-serif-light-strong-font-style, + var(--spectrum-heading-serif-light-strong-font-style) + ); + font-weight: var( + --mod-heading-serif-light-strong-font-weight, + var(--spectrum-heading-serif-light-strong-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em { - font-style: var( - --mod-heading-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-light-strong-emphasized-font-style, + var(--spectrum-heading-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-light-strong-emphasized-font-weight, + var(--spectrum-heading-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Body { - font-family: var( - --mod-body-sans-serif-font-family, - var(--spectrum-body-sans-serif-font-family) - ); - font-style: var( - --mod-body-sans-serif-font-style, - var(--spectrum-body-sans-serif-font-style) - ); - font-weight: var( - --mod-body-sans-serif-font-weight, - var(--spectrum-body-sans-serif-font-weight) - ); - font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); - color: var( - --highcontrast-body-font-color, - var(--mod-body-font-color, var(--spectrum-body-font-color)) - ); - line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); - margin-block-start: var( - --mod-body-margin-start, - var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) - ); - margin-block-end: var( - --mod-body-margin-end, - var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) - ); + font-family: var( + --mod-body-sans-serif-font-family, + var(--spectrum-body-sans-serif-font-family) + ); + font-style: var( + --mod-body-sans-serif-font-style, + var(--spectrum-body-sans-serif-font-style) + ); + font-weight: var( + --mod-body-sans-serif-font-weight, + var(--spectrum-body-sans-serif-font-weight) + ); + font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); + color: var( + --highcontrast-body-font-color, + var(--mod-body-font-color, var(--spectrum-body-font-color)) + ); + line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); + margin-block-start: var( + --mod-body-margin-start, + var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) + ); + margin-block-end: var( + --mod-body-margin-end, + var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) + ); } .spectrum-Body .spectrum-Body-strong, .spectrum-Body strong { - font-style: var( - --mod-body-sans-serif-strong-font-style, - var(--spectrum-body-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-font-weight, - var(--spectrum-body-sans-serif-strong-font-weight) - ); + font-style: var( + --mod-body-sans-serif-strong-font-style, + var(--spectrum-body-sans-serif-strong-font-style) + ); + font-weight: var( + --mod-body-sans-serif-strong-font-weight, + var(--spectrum-body-sans-serif-strong-font-weight) + ); } .spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em { - font-style: var( - --mod-body-sans-serif-emphasized-font-style, - var(--spectrum-body-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-emphasized-font-weight, - var(--spectrum-body-sans-serif-emphasized-font-weight) - ); + font-style: var( + --mod-body-sans-serif-emphasized-font-style, + var(--spectrum-body-sans-serif-emphasized-font-style) + ); + font-weight: var( + --mod-body-sans-serif-emphasized-font-weight, + var(--spectrum-body-sans-serif-emphasized-font-weight) + ); } .spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em { - font-style: var( - --mod-body-sans-serif-strong-emphasized-font-style, - var(--spectrum-body-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-emphasized-font-weight, - var(--spectrum-body-sans-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-sans-serif-strong-emphasized-font-style, + var(--spectrum-body-sans-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-sans-serif-strong-emphasized-font-weight, + var(--spectrum-body-sans-serif-strong-emphasized-font-weight) + ); } .spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh) { - font-family: var( - --mod-body-cjk-font-family, - var(--spectrum-body-cjk-font-family) - ); - font-style: var( - --mod-body-cjk-font-style, - var(--spectrum-body-cjk-font-style) - ); - font-weight: var( - --mod-body-cjk-font-weight, - var(--spectrum-body-cjk-font-weight) - ); - line-height: var( - --mod-body-cjk-line-height, - var(--spectrum-body-cjk-line-height) - ); - letter-spacing: var( - --mod-body-cjk-letter-spacing, - var(--spectrum-body-cjk-letter-spacing) - ); + font-family: var( + --mod-body-cjk-font-family, + var(--spectrum-body-cjk-font-family) + ); + font-style: var( + --mod-body-cjk-font-style, + var(--spectrum-body-cjk-font-style) + ); + font-weight: var( + --mod-body-cjk-font-weight, + var(--spectrum-body-cjk-font-weight) + ); + line-height: var( + --mod-body-cjk-line-height, + var(--spectrum-body-cjk-line-height) + ); + letter-spacing: var( + --mod-body-cjk-letter-spacing, + var(--spectrum-body-cjk-letter-spacing) + ); } .spectrum-Body:lang(ja) .spectrum-Body-strong, @@ -667,14 +667,14 @@ .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong { - font-style: var( - --mod-body-cjk-strong-font-style, - var(--spectrum-body-cjk-strong-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-font-weight, - var(--spectrum-body-cjk-strong-font-weight) - ); + font-style: var( + --mod-body-cjk-strong-font-style, + var(--spectrum-body-cjk-strong-font-style) + ); + font-weight: var( + --mod-body-cjk-strong-font-weight, + var(--spectrum-body-cjk-strong-font-weight) + ); } .spectrum-Body:lang(ja) .spectrum-Body-emphasized, @@ -683,14 +683,14 @@ .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em { - font-style: var( - --mod-body-cjk-emphasized-font-style, - var(--spectrum-body-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-emphasized-font-weight, - var(--spectrum-body-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-body-cjk-emphasized-font-style, + var(--spectrum-body-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-body-cjk-emphasized-font-weight, + var(--spectrum-body-cjk-emphasized-font-weight) + ); } .spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, @@ -702,161 +702,161 @@ .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em { - font-style: var( - --mod-body-cjk-strong-emphasized-font-style, - var(--spectrum-body-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-emphasized-font-weight, - var(--spectrum-body-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-cjk-strong-emphasized-font-style, + var(--spectrum-body-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-cjk-strong-emphasized-font-weight, + var(--spectrum-body-cjk-strong-emphasized-font-weight) + ); } .spectrum-Body--serif { - font-family: var( - --mod-body-serif-font-family, - var(--spectrum-body-serif-font-family) - ); - font-weight: var( - --mod-body-serif-font-weight, - var(--spectrum-body-serif-font-weight) - ); - font-style: var( - --mod-body-serif-font-style, - var(--spectrum-body-serif-font-style) - ); + font-family: var( + --mod-body-serif-font-family, + var(--spectrum-body-serif-font-family) + ); + font-weight: var( + --mod-body-serif-font-weight, + var(--spectrum-body-serif-font-weight) + ); + font-style: var( + --mod-body-serif-font-style, + var(--spectrum-body-serif-font-style) + ); } .spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong { - font-style: var( - --mod-body-serif-strong-font-style, - var(--spectrum-body-serif-strong-font-style) - ); - font-weight: var( - --mod-body-serif-strong-font-weight, - var(--spectrum-body-serif-strong-font-weight) - ); + font-style: var( + --mod-body-serif-strong-font-style, + var(--spectrum-body-serif-strong-font-style) + ); + font-weight: var( + --mod-body-serif-strong-font-weight, + var(--spectrum-body-serif-strong-font-weight) + ); } .spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em { - font-style: var( - --mod-body-serif-emphasized-font-style, - var(--spectrum-body-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-emphasized-font-weight, - var(--spectrum-body-serif-emphasized-font-weight) - ); + font-style: var( + --mod-body-serif-emphasized-font-style, + var(--spectrum-body-serif-emphasized-font-style) + ); + font-weight: var( + --mod-body-serif-emphasized-font-weight, + var(--spectrum-body-serif-emphasized-font-weight) + ); } .spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em { - font-style: var( - --mod-body-serif-strong-emphasized-font-style, - var(--spectrum-body-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-strong-emphasized-font-weight, - var(--spectrum-body-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-serif-strong-emphasized-font-style, + var(--spectrum-body-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-serif-strong-emphasized-font-weight, + var(--spectrum-body-serif-strong-emphasized-font-weight) + ); } .spectrum-Detail { - font-family: var( - --mod-detail-sans-serif-font-family, - var(--spectrum-detail-sans-serif-font-family) - ); - font-style: var( - --mod-detail-sans-serif-font-style, - var(--spectrum-detail-sans-serif-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-font-weight, - var(--spectrum-detail-sans-serif-font-weight) - ); - font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); - color: var( - --highcontrast-detail-font-color, - var(--mod-detail-font-color, var(--spectrum-detail-font-color)) - ); - line-height: var( - --mod-detail-line-height, - var(--spectrum-detail-line-height) - ); - letter-spacing: var( - --mod-detail-letter-spacing, - var(--spectrum-detail-letter-spacing) - ); - text-transform: uppercase; - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start, 0) - ); - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end, 0) - ); + font-family: var( + --mod-detail-sans-serif-font-family, + var(--spectrum-detail-sans-serif-font-family) + ); + font-style: var( + --mod-detail-sans-serif-font-style, + var(--spectrum-detail-sans-serif-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-font-weight, + var(--spectrum-detail-sans-serif-font-weight) + ); + font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); + color: var( + --highcontrast-detail-font-color, + var(--mod-detail-font-color, var(--spectrum-detail-font-color)) + ); + line-height: var( + --mod-detail-line-height, + var(--spectrum-detail-line-height) + ); + letter-spacing: var( + --mod-detail-letter-spacing, + var(--spectrum-detail-letter-spacing) + ); + text-transform: uppercase; + margin-block-start: var( + --mod-detail-margin-start, + var(--spectrum-detail-margin-start, 0) + ); + margin-block-end: var( + --mod-detail-margin-end, + var(--spectrum-detail-margin-end, 0) + ); } .spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong { - font-style: var( - --mod-detail-sans-serif-strong-font-style, - var(--spectrum-detail-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-font-weight, - var(--spectrum-detail-sans-serif-strong-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-strong-font-style, + var(--spectrum-detail-sans-serif-strong-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-strong-font-weight, + var(--spectrum-detail-sans-serif-strong-font-weight) + ); } .spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em { - font-style: var( - --mod-detail-sans-serif-emphasized-font-style, - var(--spectrum-detail-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-emphasized-font-weight, - var(--spectrum-detail-sans-serif-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-emphasized-font-style, + var(--spectrum-detail-sans-serif-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-emphasized-font-weight, + var(--spectrum-detail-sans-serif-emphasized-font-weight) + ); } .spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em { - font-style: var( - --mod-detail-sans-serif-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-strong-emphasized-font-style, + var(--spectrum-detail-sans-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-strong-emphasized-font-weight, + var(--spectrum-detail-sans-serif-strong-emphasized-font-weight) + ); } .spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh) { - font-family: var( - --mod-detail-cjk-font-family, - var(--spectrum-detail-cjk-font-family) - ); - font-style: var( - --mod-detail-cjk-font-style, - var(--spectrum-detail-cjk-font-style) - ); - font-weight: var( - --mod-detail-cjk-font-weight, - var(--spectrum-detail-cjk-font-weight) - ); - line-height: var( - --mod-detail-cjk-line-height, - var(--spectrum-detail-cjk-line-height) - ); + font-family: var( + --mod-detail-cjk-font-family, + var(--spectrum-detail-cjk-font-family) + ); + font-style: var( + --mod-detail-cjk-font-style, + var(--spectrum-detail-cjk-font-style) + ); + font-weight: var( + --mod-detail-cjk-font-weight, + var(--spectrum-detail-cjk-font-weight) + ); + line-height: var( + --mod-detail-cjk-line-height, + var(--spectrum-detail-cjk-line-height) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-strong, @@ -865,14 +865,14 @@ .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong { - font-style: var( - --mod-detail-cjk-strong-font-style, - var(--spectrum-detail-cjk-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-font-weight, - var(--spectrum-detail-cjk-strong-font-weight) - ); + font-style: var( + --mod-detail-cjk-strong-font-style, + var(--spectrum-detail-cjk-strong-font-style) + ); + font-weight: var( + --mod-detail-cjk-strong-font-weight, + var(--spectrum-detail-cjk-strong-font-weight) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, @@ -881,14 +881,14 @@ .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em { - font-style: var( - --mod-detail-cjk-emphasized-font-style, - var(--spectrum-detail-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-emphasized-font-weight, - var(--spectrum-detail-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-emphasized-font-style, + var(--spectrum-detail-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-emphasized-font-weight, + var(--spectrum-detail-cjk-emphasized-font-weight) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, @@ -900,127 +900,127 @@ .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em { - font-style: var( - --mod-detail-cjk-strong-emphasized-font-style, - var(--spectrum-detail-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-strong-emphasized-font-style, + var(--spectrum-detail-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-strong-emphasized-font-weight, + var(--spectrum-detail-cjk-strong-emphasized-font-weight) + ); } .spectrum-Detail--serif { - font-family: var( - --mod-detail-serif-font-family, - var(--spectrum-detail-serif-font-family) - ); - font-style: var( - --mod-detail-serif-font-style, - var(--spectrum-detail-serif-font-style) - ); - font-weight: var( - --mod-detail-serif-font-weight, - var(--spectrum-detail-serif-font-weight) - ); + font-family: var( + --mod-detail-serif-font-family, + var(--spectrum-detail-serif-font-family) + ); + font-style: var( + --mod-detail-serif-font-style, + var(--spectrum-detail-serif-font-style) + ); + font-weight: var( + --mod-detail-serif-font-weight, + var(--spectrum-detail-serif-font-weight) + ); } .spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong { - font-style: var( - --mod-detail-serif-strong-font-style, - var(--spectrum-detail-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-font-weight, - var(--spectrum-detail-serif-strong-font-weight) - ); + font-style: var( + --mod-detail-serif-strong-font-style, + var(--spectrum-detail-serif-strong-font-style) + ); + font-weight: var( + --mod-detail-serif-strong-font-weight, + var(--spectrum-detail-serif-strong-font-weight) + ); } .spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em { - font-style: var( - --mod-detail-serif-emphasized-font-style, - var(--spectrum-detail-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-emphasized-font-weight, - var(--spectrum-detail-serif-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-emphasized-font-style, + var(--spectrum-detail-serif-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-emphasized-font-weight, + var(--spectrum-detail-serif-emphasized-font-weight) + ); } .spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em { - font-style: var( - --mod-detail-serif-strong-emphasized-font-style, - var(--spectrum-detail-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-emphasized-font-weight, - var(--spectrum-detail-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-strong-emphasized-font-style, + var(--spectrum-detail-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-strong-emphasized-font-weight, + var(--spectrum-detail-serif-strong-emphasized-font-weight) + ); } .spectrum-Detail--light { - font-style: var( - --mod-detail-sans-serif-light-font-style, - var(--spectrum-detail-sans-serif-light-font-style) - ); - font-weight: var( - --spectrum-detail-sans-serif-light-font-weight, - var(--spectrum-detail-sans-serif-light-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-font-style, + var(--spectrum-detail-sans-serif-light-font-style) + ); + font-weight: var( + --spectrum-detail-sans-serif-light-font-weight, + var(--spectrum-detail-sans-serif-light-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong { - font-style: var( - --mod-detail-sans-serif-light-strong-font-style, - var(--spectrum-detail-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-font-weight, - var(--spectrum-detail-sans-serif-light-strong-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-strong-font-style, + var(--spectrum-detail-sans-serif-light-strong-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-strong-font-weight, + var(--spectrum-detail-sans-serif-light-strong-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em { - font-style: var( - --mod-detail-sans-serif-light-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-emphasized-font-style, + var(--spectrum-detail-sans-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-emphasized-font-weight, + var(--spectrum-detail-sans-serif-light-emphasized-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em { - font-style: var( - --mod-detail-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-strong-emphasized-font-style, + var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-strong-emphasized-font-weight, + var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh) { - font-style: var( - --mod-detail-cjk-light-font-style, - var(--spectrum-detail-cjk-light-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-font-weight, - var(--spectrum-detail-cjk-light-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-font-style, + var(--spectrum-detail-cjk-light-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-font-weight, + var(--spectrum-detail-cjk-light-font-weight) + ); } .spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, @@ -1029,14 +1029,14 @@ .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong { - font-style: var( - --mod-detail-cjk-light-strong-font-style, - var(--spectrum-detail-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-font-weight, - var(--spectrum-detail-cjk-light-strong-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-strong-font-style, + var(--spectrum-detail-cjk-light-strong-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-strong-font-weight, + var(--spectrum-detail-cjk-light-strong-font-weight) + ); } .spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, @@ -1045,161 +1045,161 @@ .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em { - font-style: var( - --mod-detail-cjk-light-emphasized-font-style, - var(--spectrum-detail-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-emphasized-font-weight, - var(--spectrum-detail-cjk-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-emphasized-font-style, + var(--spectrum-detail-cjk-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-emphasized-font-weight, + var(--spectrum-detail-cjk-light-emphasized-font-weight) + ); } .spectrum-Detail--light:lang(ja) - .spectrum-Detail-strong.spectrum-Detail-emphasized, + .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) - .spectrum-Detail-strong.spectrum-Detail-emphasized, + .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) - .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var( - --mod-detail-cjk-light-strong-emphasized-font-style, - var(--spectrum-detail-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) - ); + .spectrum-Detail-strong.spectrum-Detail-emphasized { + font-style: var( + --mod-detail-cjk-light-strong-emphasized-font-style, + var(--spectrum-detail-cjk-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-strong-emphasized-font-weight, + var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light { - font-style: var( - --mod-detail-serif-light-font-style, - var(--spectrum-detail-serif-light-font-style) - ); - font-weight: var( - --mod-detail-serif-light-font-weight, - var(--spectrum-detail-serif-light-font-weight) - ); + font-style: var( + --mod-detail-serif-light-font-style, + var(--spectrum-detail-serif-light-font-style) + ); + font-weight: var( + --mod-detail-serif-light-font-weight, + var(--spectrum-detail-serif-light-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong { - font-style: var( - --mod-detail-serif-light-strong-font-style, - var(--spectrum-detail-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-font-weight, - var(--spectrum-detail-serif-light-strong-font-weight) - ); + font-style: var( + --mod-detail-serif-light-strong-font-style, + var(--spectrum-detail-serif-light-strong-font-style) + ); + font-weight: var( + --mod-detail-serif-light-strong-font-weight, + var(--spectrum-detail-serif-light-strong-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em { - font-style: var( - --mod-detail-serif-light-emphasized-font-style, - var(--spectrum-detail-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-emphasized-font-weight, - var(--spectrum-detail-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-light-emphasized-font-style, + var(--spectrum-detail-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-light-emphasized-font-weight, + var(--spectrum-detail-serif-light-emphasized-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light - .spectrum-Detail-strong.spectrum-Body-emphasized, + .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em { - font-style: var( - --mod-detail-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-light-strong-emphasized-font-style, + var(--spectrum-detail-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-light-strong-emphasized-font-weight, + var(--spectrum-detail-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Code { - font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); - font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); - font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); - font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); - line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); - color: var( - --highcontrast-code-font-color, - var(--mod-code-font-color, var(--spectrum-code-font-color)) - ); - margin-block-start: var( - --mod-code-margin-start, - var(--spectrum-code-margin-end, 0) - ); - margin-block-end: var( - --mod-code-margin-end, - var(--spectrum-code-margin-end, 0) - ); + font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); + font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); + font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); + font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); + line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); + color: var( + --highcontrast-code-font-color, + var(--mod-code-font-color, var(--spectrum-code-font-color)) + ); + margin-block-start: var( + --mod-code-margin-start, + var(--spectrum-code-margin-end, 0) + ); + margin-block-end: var( + --mod-code-margin-end, + var(--spectrum-code-margin-end, 0) + ); } .spectrum-Code .spectrum-Code-strong, .spectrum-Code strong { - font-style: var( - --mod-code-strong-font-style, - var(--spectrum-code-strong-font-style) - ); - font-weight: var( - --mod-code-strong-font-weight, - var(--spectrum-code-strong-font-weight) - ); + font-style: var( + --mod-code-strong-font-style, + var(--spectrum-code-strong-font-style) + ); + font-weight: var( + --mod-code-strong-font-weight, + var(--spectrum-code-strong-font-weight) + ); } .spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em { - font-style: var( - --mod-code-emphasized-font-style, - var(--spectrum-code-emphasized-font-style) - ); - font-weight: var( - --mod-code-emphasized-font-weight, - var(--spectrum-code-emphasized-font-weight) - ); + font-style: var( + --mod-code-emphasized-font-style, + var(--spectrum-code-emphasized-font-style) + ); + font-weight: var( + --mod-code-emphasized-font-weight, + var(--spectrum-code-emphasized-font-weight) + ); } .spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em { - font-style: var( - --mod-code-strong-emphasized-font-style, - var(--spectrum-code-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-strong-emphasized-font-weight, - var(--spectrum-code-strong-emphasized-font-weight) - ); + font-style: var( + --mod-code-strong-emphasized-font-style, + var(--spectrum-code-strong-emphasized-font-style) + ); + font-weight: var( + --mod-code-strong-emphasized-font-weight, + var(--spectrum-code-strong-emphasized-font-weight) + ); } .spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh) { - font-family: var( - --mod-code-cjk-font-family, - var(--spectrum-code-cjk-font-family) - ); - font-style: var( - --mod-code-cjk-font-style, - var(--spectrum-code-cjk-font-style) - ); - font-weight: var( - --mod-code-cjk-font-weight, - var(--spectrum-code-cjk-font-weight) - ); - line-height: var( - --mod-code-cjk-line-height, - var(--spectrum-code-cjk-line-height) - ); - letter-spacing: var( - --mod-code-cjk-letter-spacing, - var(--spectrum-code-cjk-letter-spacing) - ); + font-family: var( + --mod-code-cjk-font-family, + var(--spectrum-code-cjk-font-family) + ); + font-style: var( + --mod-code-cjk-font-style, + var(--spectrum-code-cjk-font-style) + ); + font-weight: var( + --mod-code-cjk-font-weight, + var(--spectrum-code-cjk-font-weight) + ); + line-height: var( + --mod-code-cjk-line-height, + var(--spectrum-code-cjk-line-height) + ); + letter-spacing: var( + --mod-code-cjk-letter-spacing, + var(--spectrum-code-cjk-letter-spacing) + ); } .spectrum-Code:lang(ja) .spectrum-Code-strong, @@ -1208,14 +1208,14 @@ .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong { - font-style: var( - --mod-code-cjk-strong-font-style, - var(--spectrum-code-cjk-strong-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-font-weight, - var(--spectrum-code-cjk-strong-font-weight) - ); + font-style: var( + --mod-code-cjk-strong-font-style, + var(--spectrum-code-cjk-strong-font-style) + ); + font-weight: var( + --mod-code-cjk-strong-font-weight, + var(--spectrum-code-cjk-strong-font-weight) + ); } .spectrum-Code:lang(ja) .spectrum-Code-emphasized, @@ -1224,14 +1224,14 @@ .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em { - font-style: var( - --mod-code-cjk-emphasized-font-style, - var(--spectrum-code-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-emphasized-font-weight, - var(--spectrum-code-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-code-cjk-emphasized-font-style, + var(--spectrum-code-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-code-cjk-emphasized-font-weight, + var(--spectrum-code-cjk-emphasized-font-weight) + ); } .spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, @@ -1243,176 +1243,164 @@ .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em { - font-style: var( - --mod-code-cjk-strong-emphasized-font-style, - var(--spectrum-code-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-emphasized-font-weight, - var(--spectrum-code-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-code-cjk-strong-emphasized-font-style, + var(--spectrum-code-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-code-cjk-strong-emphasized-font-weight, + var(--spectrum-code-cjk-strong-emphasized-font-weight) + ); } .spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var( - --system-heading-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var( - --system-heading-serif-font-family - ); - --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); - --spectrum-heading-cjk-letter-spacing: var( - --system-heading-cjk-letter-spacing - ); - --spectrum-heading-font-color: var(--system-heading-font-color); - --spectrum-heading-font-size: var(--system-heading-font-size); - --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); + --spectrum-heading-sans-serif-font-family: var( + --system-heading-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var(--system-heading-serif-font-family); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var( + --system-heading-cjk-letter-spacing + ); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); } .spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxs-cjk-font-size + ); } .spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xs-cjk-font-size); } .spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--system-heading-size-s-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-s-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-s-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-s-cjk-font-size); } .spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--system-heading-size-m-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-m-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-m-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-m-cjk-font-size); } .spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--system-heading-size-l-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-l-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-l-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-l-cjk-font-size); } .spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xl-cjk-font-size); } .spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxl-cjk-font-size + ); } .spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxxl-cjk-font-size + ); } .spectrum-Body { - --spectrum-body-sans-serif-font-family: var( - --system-body-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--system-body-serif-font-family); - --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); - --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); - --spectrum-body-font-color: var(--system-body-font-color); - --spectrum-body-font-size: var(--system-body-font-size); + --spectrum-body-sans-serif-font-family: var( + --system-body-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-font-size); } .spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--system-body-size-xs-font-size); + --spectrum-body-font-size: var(--system-body-size-xs-font-size); } .spectrum-Body--sizeS { - --spectrum-body-font-size: var(--system-body-size-s-font-size); + --spectrum-body-font-size: var(--system-body-size-s-font-size); } .spectrum-Body--sizeM { - --spectrum-body-font-size: var(--system-body-size-m-font-size); + --spectrum-body-font-size: var(--system-body-size-m-font-size); } .spectrum-Body--sizeL { - --spectrum-body-font-size: var(--system-body-size-l-font-size); + --spectrum-body-font-size: var(--system-body-size-l-font-size); } .spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--system-body-size-xl-font-size); + --spectrum-body-font-size: var(--system-body-size-xl-font-size); } .spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--system-body-size-xxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxl-font-size); } .spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); } .spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var( - --system-detail-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); - --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); - --spectrum-detail-font-color: var(--system-detail-font-color); - --spectrum-detail-font-size: var(--system-detail-font-size); + --spectrum-detail-sans-serif-font-family: var( + --system-detail-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-font-size); } .spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--system-detail-size-s-font-size); + --spectrum-detail-font-size: var(--system-detail-size-s-font-size); } .spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--system-detail-size-m-font-size); + --spectrum-detail-font-size: var(--system-detail-size-m-font-size); } .spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--system-detail-size-l-font-size); + --spectrum-detail-font-size: var(--system-detail-size-l-font-size); } .spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); } .spectrum-Code { - --spectrum-code-font-family: var(--system-code-font-family); - --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); - --spectrum-code-font-color: var(--system-code-font-color); - --spectrum-code-font-size: var(--system-code-font-size); + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-font-size); } .spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--system-code-size-xs-font-size); + --spectrum-code-font-size: var(--system-code-size-xs-font-size); } .spectrum-Code--sizeS { - --spectrum-code-font-size: var(--system-code-size-s-font-size); + --spectrum-code-font-size: var(--system-code-size-s-font-size); } .spectrum-Code--sizeM { - --spectrum-code-font-size: var(--system-code-size-m-font-size); + --spectrum-code-font-size: var(--system-code-size-m-font-size); } .spectrum-Code--sizeL { - --spectrum-code-font-size: var(--system-code-size-l-font-size); + --spectrum-code-font-size: var(--system-code-size-l-font-size); } .spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--system-code-size-xl-font-size); + --spectrum-code-font-size: var(--system-code-size-xl-font-size); } diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css index 7df98ecf56..918cdd2fcd 100644 --- a/tools/styles/spectrum-core-global.css +++ b/tools/styles/spectrum-core-global.css @@ -1,3241 +1,3199 @@ :root, :host { - --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-animation-duration-0: 0s; - --spectrum-global-animation-duration-100: 0.13s; - --spectrum-global-animation-duration-200: 0.16s; - --spectrum-global-animation-duration-300: 0.19s; - --spectrum-global-animation-duration-400: 0.22s; - --spectrum-global-animation-duration-500: 0.25s; - --spectrum-global-animation-duration-600: 0.3s; - --spectrum-global-animation-duration-700: 0.35s; - --spectrum-global-animation-duration-800: 0.4s; - --spectrum-global-animation-duration-900: 0.45s; - --spectrum-global-animation-duration-1000: 0.5s; - --spectrum-global-animation-duration-2000: 1s; - --spectrum-global-animation-duration-4000: 2s; - --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-static-black-rgb: 0, 0, 0; - --spectrum-global-color-static-black: rgb( - var(--spectrum-global-color-static-black-rgb) - ); - --spectrum-global-color-static-white-rgb: 255, 255, 255; - --spectrum-global-color-static-white: rgb( - var(--spectrum-global-color-static-white-rgb) - ); - --spectrum-global-color-static-blue-rgb: 0, 87, 191; - --spectrum-global-color-static-blue: rgb( - var(--spectrum-global-color-static-blue-rgb) - ); - --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-50: rgb( - var(--spectrum-global-color-static-gray-50-rgb) - ); - --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-75: rgb( - var(--spectrum-global-color-static-gray-75-rgb) - ); - --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-100: rgb( - var(--spectrum-global-color-static-gray-100-rgb) - ); - --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; - --spectrum-global-color-static-gray-200: rgb( - var(--spectrum-global-color-static-gray-200-rgb) - ); - --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; - --spectrum-global-color-static-gray-300: rgb( - var(--spectrum-global-color-static-gray-300-rgb) - ); - --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; - --spectrum-global-color-static-gray-400: rgb( - var(--spectrum-global-color-static-gray-400-rgb) - ); - --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; - --spectrum-global-color-static-gray-500: rgb( - var(--spectrum-global-color-static-gray-500-rgb) - ); - --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; - --spectrum-global-color-static-gray-600: rgb( - var(--spectrum-global-color-static-gray-600-rgb) - ); - --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; - --spectrum-global-color-static-gray-700: rgb( - var(--spectrum-global-color-static-gray-700-rgb) - ); - --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-static-gray-800: rgb( - var(--spectrum-global-color-static-gray-800-rgb) - ); - --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-static-gray-900: rgb( - var(--spectrum-global-color-static-gray-900-rgb) - ); - --spectrum-global-color-static-red-400-rgb: 237, 64, 48; - --spectrum-global-color-static-red-400: rgb( - var(--spectrum-global-color-static-red-400-rgb) - ); - --spectrum-global-color-static-red-500-rgb: 217, 28, 21; - --spectrum-global-color-static-red-500: rgb( - var(--spectrum-global-color-static-red-500-rgb) - ); - --spectrum-global-color-static-red-600-rgb: 187, 2, 2; - --spectrum-global-color-static-red-600: rgb( - var(--spectrum-global-color-static-red-600-rgb) - ); - --spectrum-global-color-static-red-700-rgb: 154, 0, 0; - --spectrum-global-color-static-red-700: rgb( - var(--spectrum-global-color-static-red-700-rgb) - ); - --spectrum-global-color-static-red-800-rgb: 124, 0, 0; - --spectrum-global-color-static-red-800: rgb( - var(--spectrum-global-color-static-red-800-rgb) - ); - --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; - --spectrum-global-color-static-orange-400: rgb( - var(--spectrum-global-color-static-orange-400-rgb) - ); - --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; - --spectrum-global-color-static-orange-500: rgb( - var(--spectrum-global-color-static-orange-500-rgb) - ); - --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; - --spectrum-global-color-static-orange-600: rgb( - var(--spectrum-global-color-static-orange-600-rgb) - ); - --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; - --spectrum-global-color-static-orange-700: rgb( - var(--spectrum-global-color-static-orange-700-rgb) - ); - --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; - --spectrum-global-color-static-orange-800: rgb( - var(--spectrum-global-color-static-orange-800-rgb) - ); - --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; - --spectrum-global-color-static-yellow-200: rgb( - var(--spectrum-global-color-static-yellow-200-rgb) - ); - --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; - --spectrum-global-color-static-yellow-300: rgb( - var(--spectrum-global-color-static-yellow-300-rgb) - ); - --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; - --spectrum-global-color-static-yellow-400: rgb( - var(--spectrum-global-color-static-yellow-400-rgb) - ); - --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; - --spectrum-global-color-static-yellow-500: rgb( - var(--spectrum-global-color-static-yellow-500-rgb) - ); - --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; - --spectrum-global-color-static-yellow-600: rgb( - var(--spectrum-global-color-static-yellow-600-rgb) - ); - --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; - --spectrum-global-color-static-yellow-700: rgb( - var(--spectrum-global-color-static-yellow-700-rgb) - ); - --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; - --spectrum-global-color-static-yellow-800: rgb( - var(--spectrum-global-color-static-yellow-800-rgb) - ); - --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; - --spectrum-global-color-static-chartreuse-300: rgb( - var(--spectrum-global-color-static-chartreuse-300-rgb) - ); - --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; - --spectrum-global-color-static-chartreuse-400: rgb( - var(--spectrum-global-color-static-chartreuse-400-rgb) - ); - --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; - --spectrum-global-color-static-chartreuse-500: rgb( - var(--spectrum-global-color-static-chartreuse-500-rgb) - ); - --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; - --spectrum-global-color-static-chartreuse-600: rgb( - var(--spectrum-global-color-static-chartreuse-600-rgb) - ); - --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; - --spectrum-global-color-static-chartreuse-700: rgb( - var(--spectrum-global-color-static-chartreuse-700-rgb) - ); - --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; - --spectrum-global-color-static-chartreuse-800: rgb( - var(--spectrum-global-color-static-chartreuse-800-rgb) - ); - --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; - --spectrum-global-color-static-celery-200: rgb( - var(--spectrum-global-color-static-celery-200-rgb) - ); - --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; - --spectrum-global-color-static-celery-300: rgb( - var(--spectrum-global-color-static-celery-300-rgb) - ); - --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; - --spectrum-global-color-static-celery-400: rgb( - var(--spectrum-global-color-static-celery-400-rgb) - ); - --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; - --spectrum-global-color-static-celery-500: rgb( - var(--spectrum-global-color-static-celery-500-rgb) - ); - --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; - --spectrum-global-color-static-celery-600: rgb( - var(--spectrum-global-color-static-celery-600-rgb) - ); - --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; - --spectrum-global-color-static-celery-700: rgb( - var(--spectrum-global-color-static-celery-700-rgb) - ); - --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; - --spectrum-global-color-static-celery-800: rgb( - var(--spectrum-global-color-static-celery-800-rgb) - ); - --spectrum-global-color-static-green-400-rgb: 29, 169, 115; - --spectrum-global-color-static-green-400: rgb( - var(--spectrum-global-color-static-green-400-rgb) - ); - --spectrum-global-color-static-green-500-rgb: 0, 148, 97; - --spectrum-global-color-static-green-500: rgb( - var(--spectrum-global-color-static-green-500-rgb) - ); - --spectrum-global-color-static-green-600-rgb: 0, 126, 80; - --spectrum-global-color-static-green-600: rgb( - var(--spectrum-global-color-static-green-600-rgb) - ); - --spectrum-global-color-static-green-700-rgb: 0, 105, 65; - --spectrum-global-color-static-green-700: rgb( - var(--spectrum-global-color-static-green-700-rgb) - ); - --spectrum-global-color-static-green-800-rgb: 0, 86, 53; - --spectrum-global-color-static-green-800: rgb( - var(--spectrum-global-color-static-green-800-rgb) - ); - --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; - --spectrum-global-color-static-seafoam-200: rgb( - var(--spectrum-global-color-static-seafoam-200-rgb) - ); - --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; - --spectrum-global-color-static-seafoam-300: rgb( - var(--spectrum-global-color-static-seafoam-300-rgb) - ); - --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; - --spectrum-global-color-static-seafoam-400: rgb( - var(--spectrum-global-color-static-seafoam-400-rgb) - ); - --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; - --spectrum-global-color-static-seafoam-500: rgb( - var(--spectrum-global-color-static-seafoam-500-rgb) - ); - --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; - --spectrum-global-color-static-seafoam-600: rgb( - var(--spectrum-global-color-static-seafoam-600-rgb) - ); - --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; - --spectrum-global-color-static-seafoam-700: rgb( - var(--spectrum-global-color-static-seafoam-700-rgb) - ); - --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; - --spectrum-global-color-static-seafoam-800: rgb( - var(--spectrum-global-color-static-seafoam-800-rgb) - ); - --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; - --spectrum-global-color-static-blue-200: rgb( - var(--spectrum-global-color-static-blue-200-rgb) - ); - --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; - --spectrum-global-color-static-blue-300: rgb( - var(--spectrum-global-color-static-blue-300-rgb) - ); - --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; - --spectrum-global-color-static-blue-400: rgb( - var(--spectrum-global-color-static-blue-400-rgb) - ); - --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; - --spectrum-global-color-static-blue-500: rgb( - var(--spectrum-global-color-static-blue-500-rgb) - ); - --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; - --spectrum-global-color-static-blue-600: rgb( - var(--spectrum-global-color-static-blue-600-rgb) - ); - --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; - --spectrum-global-color-static-blue-700: rgb( - var(--spectrum-global-color-static-blue-700-rgb) - ); - --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; - --spectrum-global-color-static-blue-800: rgb( - var(--spectrum-global-color-static-blue-800-rgb) - ); - --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; - --spectrum-global-color-static-indigo-200: rgb( - var(--spectrum-global-color-static-indigo-200-rgb) - ); - --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; - --spectrum-global-color-static-indigo-300: rgb( - var(--spectrum-global-color-static-indigo-300-rgb) - ); - --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; - --spectrum-global-color-static-indigo-400: rgb( - var(--spectrum-global-color-static-indigo-400-rgb) - ); - --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; - --spectrum-global-color-static-indigo-500: rgb( - var(--spectrum-global-color-static-indigo-500-rgb) - ); - --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; - --spectrum-global-color-static-indigo-600: rgb( - var(--spectrum-global-color-static-indigo-600-rgb) - ); - --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-700: rgb( - var(--spectrum-global-color-static-indigo-700-rgb) - ); - --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-800: rgb( - var(--spectrum-global-color-static-indigo-800-rgb) - ); - --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; - --spectrum-global-color-static-purple-400: rgb( - var(--spectrum-global-color-static-purple-400-rgb) - ); - --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; - --spectrum-global-color-static-purple-500: rgb( - var(--spectrum-global-color-static-purple-500-rgb) - ); - --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; - --spectrum-global-color-static-purple-600: rgb( - var(--spectrum-global-color-static-purple-600-rgb) - ); - --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; - --spectrum-global-color-static-purple-700: rgb( - var(--spectrum-global-color-static-purple-700-rgb) - ); - --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; - --spectrum-global-color-static-purple-800: rgb( - var(--spectrum-global-color-static-purple-800-rgb) - ); - --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; - --spectrum-global-color-static-fuchsia-400: rgb( - var(--spectrum-global-color-static-fuchsia-400-rgb) - ); - --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; - --spectrum-global-color-static-fuchsia-500: rgb( - var(--spectrum-global-color-static-fuchsia-500-rgb) - ); - --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; - --spectrum-global-color-static-fuchsia-600: rgb( - var(--spectrum-global-color-static-fuchsia-600-rgb) - ); - --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; - --spectrum-global-color-static-fuchsia-700: rgb( - var(--spectrum-global-color-static-fuchsia-700-rgb) - ); - --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; - --spectrum-global-color-static-fuchsia-800: rgb( - var(--spectrum-global-color-static-fuchsia-800-rgb) - ); - --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; - --spectrum-global-color-static-magenta-200: rgb( - var(--spectrum-global-color-static-magenta-200-rgb) - ); - --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; - --spectrum-global-color-static-magenta-300: rgb( - var(--spectrum-global-color-static-magenta-300-rgb) - ); - --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; - --spectrum-global-color-static-magenta-400: rgb( - var(--spectrum-global-color-static-magenta-400-rgb) - ); - --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; - --spectrum-global-color-static-magenta-500: rgb( - var(--spectrum-global-color-static-magenta-500-rgb) - ); - --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; - --spectrum-global-color-static-magenta-600: rgb( - var(--spectrum-global-color-static-magenta-600-rgb) - ); - --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; - --spectrum-global-color-static-magenta-700: rgb( - var(--spectrum-global-color-static-magenta-700-rgb) - ); - --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; - --spectrum-global-color-static-magenta-800: rgb( - var(--spectrum-global-color-static-magenta-800-rgb) - ); - --spectrum-global-color-static-transparent-white-200: #ffffff1a; - --spectrum-global-color-static-transparent-white-300: #ffffff40; - --spectrum-global-color-static-transparent-white-400: #fff6; - --spectrum-global-color-static-transparent-white-500: #ffffff8c; - --spectrum-global-color-static-transparent-white-600: #ffffffb3; - --spectrum-global-color-static-transparent-white-700: #fffc; - --spectrum-global-color-static-transparent-white-800: #ffffffe6; - --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; - --spectrum-global-color-static-transparent-white-900: rgb( - var(--spectrum-global-color-static-transparent-white-900-rgb) - ); - --spectrum-global-color-static-transparent-black-200: #0000001a; - --spectrum-global-color-static-transparent-black-300: #00000040; - --spectrum-global-color-static-transparent-black-400: #0006; - --spectrum-global-color-static-transparent-black-500: #0000008c; - --spectrum-global-color-static-transparent-black-600: #000000b3; - --spectrum-global-color-static-transparent-black-700: #000c; - --spectrum-global-color-static-transparent-black-800: #000000e6; - --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; - --spectrum-global-color-static-transparent-black-900: rgb( - var(--spectrum-global-color-static-transparent-black-900-rgb) - ); - --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, - #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, - #1a4b83, #1a3979, #1a266f, #191264, #180057; - --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, - #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, - #196b47, #105c45, #094d41, #033f3e, #00313a; - --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, - #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, - #71167c, #560f74, #370b6e, #000968; - --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, - #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, - #3ea8a6, #208288, #076769, #00494b, #002c2d; - --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, - #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, - #397aa8, #1c5796, #163771, #10194d; - --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, - #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, - #2f74b3, #265191, #163670, #0b194c; - --spectrum-semantic-negative-background-color: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-color-default: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-color-hover: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-dark: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-border-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-icon-color: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-status-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-text-color-large: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-text-color-small: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-text-color-small-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-color-key-focus: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-background-color-default: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-background-color-hover: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-negative-background-color-down: var( - --spectrum-global-color-static-red-800 - ); - --spectrum-semantic-negative-background-color-key-focus: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-notice-background-color: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-color-default: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-color-dark: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-border-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-icon-color: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-status-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-text-color-large: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-text-color-small: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-color-down: var( - --spectrum-global-color-orange-700 - ); - --spectrum-semantic-notice-color-key-focus: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-background-color-default: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-background-color-hover: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-notice-background-color-down: var( - --spectrum-global-color-static-orange-800 - ); - --spectrum-semantic-notice-background-color-key-focus: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-positive-background-color: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-color-default: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-color-dark: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-border-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-icon-color: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-status-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-text-color-large: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-text-color-small: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-color-down: var( - --spectrum-global-color-green-700 - ); - --spectrum-semantic-positive-color-key-focus: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-background-color-default: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-background-color-hover: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-positive-background-color-down: var( - --spectrum-global-color-static-green-800 - ); - --spectrum-semantic-positive-background-color-key-focus: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-informative-background-color: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-color-dark: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-border-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-icon-color: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-status-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-text-color-large: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-text-color-small: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-informative-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-informative-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-informative-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-cta-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-cta-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-cta-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-cta-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-emphasized-border-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-emphasized-border-color-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-emphasized-border-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-emphasized-border-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-neutral-background-color-default: var( - --spectrum-global-color-static-gray-700 - ); - --spectrum-semantic-neutral-background-color-hover: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-neutral-background-color-down: var( - --spectrum-global-color-static-gray-900 - ); - --spectrum-semantic-neutral-background-color-key-focus: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-presence-color-1: var( - --spectrum-global-color-static-red-500 - ); - --spectrum-semantic-presence-color-2: var( - --spectrum-global-color-static-orange-400 - ); - --spectrum-semantic-presence-color-3: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; - --spectrum-semantic-presence-color-4: rgb( - var(--spectrum-semantic-presence-color-4-rgb) - ); - --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; - --spectrum-semantic-presence-color-5: rgb( - var(--spectrum-semantic-presence-color-5-rgb) - ); - --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; - --spectrum-semantic-presence-color-6: rgb( - var(--spectrum-semantic-presence-color-6-rgb) - ); - --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; - --spectrum-semantic-presence-color-7: rgb( - var(--spectrum-semantic-presence-color-7-rgb) - ); - --spectrum-semantic-presence-color-8: var( - --spectrum-global-color-static-fuchsia-600 - ); - --spectrum-global-dimension-static-percent-50: 50%; - --spectrum-global-dimension-static-percent-70: 70%; - --spectrum-global-dimension-static-percent-100: 100%; - --spectrum-global-dimension-static-breakpoint-xsmall: 304px; - --spectrum-global-dimension-static-breakpoint-small: 768px; - --spectrum-global-dimension-static-breakpoint-medium: 1280px; - --spectrum-global-dimension-static-breakpoint-large: 1768px; - --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; - --spectrum-global-dimension-static-grid-columns: 12; - --spectrum-global-dimension-static-grid-fluid-width: 100%; - --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; - --spectrum-global-dimension-static-size-0: 0px; - --spectrum-global-dimension-static-size-10: 1px; - --spectrum-global-dimension-static-size-25: 2px; - --spectrum-global-dimension-static-size-40: 3px; - --spectrum-global-dimension-static-size-50: 4px; - --spectrum-global-dimension-static-size-65: 5px; - --spectrum-global-dimension-static-size-75: 6px; - --spectrum-global-dimension-static-size-85: 7px; - --spectrum-global-dimension-static-size-100: 8px; - --spectrum-global-dimension-static-size-115: 9px; - --spectrum-global-dimension-static-size-125: 10px; - --spectrum-global-dimension-static-size-130: 11px; - --spectrum-global-dimension-static-size-150: 12px; - --spectrum-global-dimension-static-size-160: 13px; - --spectrum-global-dimension-static-size-175: 14px; - --spectrum-global-dimension-static-size-185: 15px; - --spectrum-global-dimension-static-size-200: 16px; - --spectrum-global-dimension-static-size-225: 18px; - --spectrum-global-dimension-static-size-250: 20px; - --spectrum-global-dimension-static-size-275: 22px; - --spectrum-global-dimension-static-size-300: 24px; - --spectrum-global-dimension-static-size-325: 26px; - --spectrum-global-dimension-static-size-350: 28px; - --spectrum-global-dimension-static-size-400: 32px; - --spectrum-global-dimension-static-size-450: 36px; - --spectrum-global-dimension-static-size-500: 40px; - --spectrum-global-dimension-static-size-550: 44px; - --spectrum-global-dimension-static-size-600: 48px; - --spectrum-global-dimension-static-size-700: 56px; - --spectrum-global-dimension-static-size-800: 64px; - --spectrum-global-dimension-static-size-900: 72px; - --spectrum-global-dimension-static-size-1000: 80px; - --spectrum-global-dimension-static-size-1200: 96px; - --spectrum-global-dimension-static-size-1700: 136px; - --spectrum-global-dimension-static-size-2400: 192px; - --spectrum-global-dimension-static-size-2500: 200px; - --spectrum-global-dimension-static-size-2600: 208px; - --spectrum-global-dimension-static-size-2800: 224px; - --spectrum-global-dimension-static-size-3200: 256px; - --spectrum-global-dimension-static-size-3400: 272px; - --spectrum-global-dimension-static-size-3500: 280px; - --spectrum-global-dimension-static-size-3600: 288px; - --spectrum-global-dimension-static-size-3800: 304px; - --spectrum-global-dimension-static-size-4600: 368px; - --spectrum-global-dimension-static-size-5000: 400px; - --spectrum-global-dimension-static-size-6000: 480px; - --spectrum-global-dimension-static-size-16000: 1280px; - --spectrum-global-dimension-static-font-size-50: 11px; - --spectrum-global-dimension-static-font-size-75: 12px; - --spectrum-global-dimension-static-font-size-100: 14px; - --spectrum-global-dimension-static-font-size-150: 15px; - --spectrum-global-dimension-static-font-size-200: 16px; - --spectrum-global-dimension-static-font-size-300: 18px; - --spectrum-global-dimension-static-font-size-400: 20px; - --spectrum-global-dimension-static-font-size-500: 22px; - --spectrum-global-dimension-static-font-size-600: 25px; - --spectrum-global-dimension-static-font-size-700: 28px; - --spectrum-global-dimension-static-font-size-800: 32px; - --spectrum-global-dimension-static-font-size-900: 36px; - --spectrum-global-dimension-static-font-size-1000: 40px; - --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro', - Georgia, serif; - --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace; - --spectrum-global-font-weight-thin: 100; - --spectrum-global-font-weight-ultra-light: 200; - --spectrum-global-font-weight-light: 300; - --spectrum-global-font-weight-regular: 400; - --spectrum-global-font-weight-medium: 500; - --spectrum-global-font-weight-semi-bold: 600; - --spectrum-global-font-weight-bold: 700; - --spectrum-global-font-weight-extra-bold: 800; - --spectrum-global-font-weight-black: 900; - --spectrum-global-font-style-regular: normal; - --spectrum-global-font-style-italic: italic; - --spectrum-global-font-letter-spacing-none: 0; - --spectrum-global-font-letter-spacing-small: 0.0125em; - --spectrum-global-font-letter-spacing-han: 0.05em; - --spectrum-global-font-letter-spacing-medium: 0.06em; - --spectrum-global-font-line-height-large: 1.7; - --spectrum-global-font-line-height-medium: 1.5; - --spectrum-global-font-line-height-small: 1.3; - --spectrum-global-font-multiplier-0: 0em; - --spectrum-global-font-multiplier-25: 0.25em; - --spectrum-global-font-multiplier-75: 0.75em; - --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif'; - --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, - source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif'; - --spectrum-global-font-font-family-ko: adobe-clean-han-korean, - source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif'; - --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, - 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Osaka', YuGothic, - 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', - 'sans-serif'; - --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-loupe-entry-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-loupe-exit-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-heading-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-strong-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-margin-bottom: var( - --spectrum-global-font-multiplier-25 - ); - --spectrum-alias-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-body-text-font-family: var( - --spectrum-global-font-family-base - ); - --spectrum-alias-body-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-body-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-body-margin-bottom: var( - --spectrum-global-font-multiplier-75 - ); - --spectrum-alias-detail-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-light: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-font-family: var( - --spectrum-global-font-family-code - ); - --spectrum-alias-code-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-code-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-code-margin-bottom: var( - --spectrum-global-font-multiplier-0 - ); - --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); - --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); - --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); - --spectrum-alias-font-family-zhhans: var( - --spectrum-global-font-font-family-zhhans - ); - --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); - --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); - --spectrum-alias-font-family-condensed: var( - --spectrum-global-font-font-family-condensed - ); - --spectrum-alias-button-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-component-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-han-component-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-serif-text-font-family: var( - --spectrum-global-font-family-serif - ); - --spectrum-alias-han-heading-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-han-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-han-heading-text-font-weight-light-emphasis: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-body-text-line-height: var( - --spectrum-global-font-line-height-large - ); - --spectrum-alias-han-body-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-body-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-subheading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-subheading-text-font-weight-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-detail-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); + --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-animation-duration-0: 0s; + --spectrum-global-animation-duration-100: 0.13s; + --spectrum-global-animation-duration-200: 0.16s; + --spectrum-global-animation-duration-300: 0.19s; + --spectrum-global-animation-duration-400: 0.22s; + --spectrum-global-animation-duration-500: 0.25s; + --spectrum-global-animation-duration-600: 0.3s; + --spectrum-global-animation-duration-700: 0.35s; + --spectrum-global-animation-duration-800: 0.4s; + --spectrum-global-animation-duration-900: 0.45s; + --spectrum-global-animation-duration-1000: 0.5s; + --spectrum-global-animation-duration-2000: 1s; + --spectrum-global-animation-duration-4000: 2s; + --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-static-black-rgb: 0, 0, 0; + --spectrum-global-color-static-black: rgb( + var(--spectrum-global-color-static-black-rgb) + ); + --spectrum-global-color-static-white-rgb: 255, 255, 255; + --spectrum-global-color-static-white: rgb( + var(--spectrum-global-color-static-white-rgb) + ); + --spectrum-global-color-static-blue-rgb: 0, 87, 191; + --spectrum-global-color-static-blue: rgb( + var(--spectrum-global-color-static-blue-rgb) + ); + --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-50: rgb( + var(--spectrum-global-color-static-gray-50-rgb) + ); + --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-75: rgb( + var(--spectrum-global-color-static-gray-75-rgb) + ); + --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-100: rgb( + var(--spectrum-global-color-static-gray-100-rgb) + ); + --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; + --spectrum-global-color-static-gray-200: rgb( + var(--spectrum-global-color-static-gray-200-rgb) + ); + --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; + --spectrum-global-color-static-gray-300: rgb( + var(--spectrum-global-color-static-gray-300-rgb) + ); + --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; + --spectrum-global-color-static-gray-400: rgb( + var(--spectrum-global-color-static-gray-400-rgb) + ); + --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; + --spectrum-global-color-static-gray-500: rgb( + var(--spectrum-global-color-static-gray-500-rgb) + ); + --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; + --spectrum-global-color-static-gray-600: rgb( + var(--spectrum-global-color-static-gray-600-rgb) + ); + --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; + --spectrum-global-color-static-gray-700: rgb( + var(--spectrum-global-color-static-gray-700-rgb) + ); + --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-static-gray-800: rgb( + var(--spectrum-global-color-static-gray-800-rgb) + ); + --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-static-gray-900: rgb( + var(--spectrum-global-color-static-gray-900-rgb) + ); + --spectrum-global-color-static-red-400-rgb: 237, 64, 48; + --spectrum-global-color-static-red-400: rgb( + var(--spectrum-global-color-static-red-400-rgb) + ); + --spectrum-global-color-static-red-500-rgb: 217, 28, 21; + --spectrum-global-color-static-red-500: rgb( + var(--spectrum-global-color-static-red-500-rgb) + ); + --spectrum-global-color-static-red-600-rgb: 187, 2, 2; + --spectrum-global-color-static-red-600: rgb( + var(--spectrum-global-color-static-red-600-rgb) + ); + --spectrum-global-color-static-red-700-rgb: 154, 0, 0; + --spectrum-global-color-static-red-700: rgb( + var(--spectrum-global-color-static-red-700-rgb) + ); + --spectrum-global-color-static-red-800-rgb: 124, 0, 0; + --spectrum-global-color-static-red-800: rgb( + var(--spectrum-global-color-static-red-800-rgb) + ); + --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; + --spectrum-global-color-static-orange-400: rgb( + var(--spectrum-global-color-static-orange-400-rgb) + ); + --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; + --spectrum-global-color-static-orange-500: rgb( + var(--spectrum-global-color-static-orange-500-rgb) + ); + --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; + --spectrum-global-color-static-orange-600: rgb( + var(--spectrum-global-color-static-orange-600-rgb) + ); + --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; + --spectrum-global-color-static-orange-700: rgb( + var(--spectrum-global-color-static-orange-700-rgb) + ); + --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; + --spectrum-global-color-static-orange-800: rgb( + var(--spectrum-global-color-static-orange-800-rgb) + ); + --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; + --spectrum-global-color-static-yellow-200: rgb( + var(--spectrum-global-color-static-yellow-200-rgb) + ); + --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; + --spectrum-global-color-static-yellow-300: rgb( + var(--spectrum-global-color-static-yellow-300-rgb) + ); + --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; + --spectrum-global-color-static-yellow-400: rgb( + var(--spectrum-global-color-static-yellow-400-rgb) + ); + --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; + --spectrum-global-color-static-yellow-500: rgb( + var(--spectrum-global-color-static-yellow-500-rgb) + ); + --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; + --spectrum-global-color-static-yellow-600: rgb( + var(--spectrum-global-color-static-yellow-600-rgb) + ); + --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; + --spectrum-global-color-static-yellow-700: rgb( + var(--spectrum-global-color-static-yellow-700-rgb) + ); + --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; + --spectrum-global-color-static-yellow-800: rgb( + var(--spectrum-global-color-static-yellow-800-rgb) + ); + --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; + --spectrum-global-color-static-chartreuse-300: rgb( + var(--spectrum-global-color-static-chartreuse-300-rgb) + ); + --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; + --spectrum-global-color-static-chartreuse-400: rgb( + var(--spectrum-global-color-static-chartreuse-400-rgb) + ); + --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; + --spectrum-global-color-static-chartreuse-500: rgb( + var(--spectrum-global-color-static-chartreuse-500-rgb) + ); + --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; + --spectrum-global-color-static-chartreuse-600: rgb( + var(--spectrum-global-color-static-chartreuse-600-rgb) + ); + --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; + --spectrum-global-color-static-chartreuse-700: rgb( + var(--spectrum-global-color-static-chartreuse-700-rgb) + ); + --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; + --spectrum-global-color-static-chartreuse-800: rgb( + var(--spectrum-global-color-static-chartreuse-800-rgb) + ); + --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; + --spectrum-global-color-static-celery-200: rgb( + var(--spectrum-global-color-static-celery-200-rgb) + ); + --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; + --spectrum-global-color-static-celery-300: rgb( + var(--spectrum-global-color-static-celery-300-rgb) + ); + --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; + --spectrum-global-color-static-celery-400: rgb( + var(--spectrum-global-color-static-celery-400-rgb) + ); + --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; + --spectrum-global-color-static-celery-500: rgb( + var(--spectrum-global-color-static-celery-500-rgb) + ); + --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; + --spectrum-global-color-static-celery-600: rgb( + var(--spectrum-global-color-static-celery-600-rgb) + ); + --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; + --spectrum-global-color-static-celery-700: rgb( + var(--spectrum-global-color-static-celery-700-rgb) + ); + --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; + --spectrum-global-color-static-celery-800: rgb( + var(--spectrum-global-color-static-celery-800-rgb) + ); + --spectrum-global-color-static-green-400-rgb: 29, 169, 115; + --spectrum-global-color-static-green-400: rgb( + var(--spectrum-global-color-static-green-400-rgb) + ); + --spectrum-global-color-static-green-500-rgb: 0, 148, 97; + --spectrum-global-color-static-green-500: rgb( + var(--spectrum-global-color-static-green-500-rgb) + ); + --spectrum-global-color-static-green-600-rgb: 0, 126, 80; + --spectrum-global-color-static-green-600: rgb( + var(--spectrum-global-color-static-green-600-rgb) + ); + --spectrum-global-color-static-green-700-rgb: 0, 105, 65; + --spectrum-global-color-static-green-700: rgb( + var(--spectrum-global-color-static-green-700-rgb) + ); + --spectrum-global-color-static-green-800-rgb: 0, 86, 53; + --spectrum-global-color-static-green-800: rgb( + var(--spectrum-global-color-static-green-800-rgb) + ); + --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; + --spectrum-global-color-static-seafoam-200: rgb( + var(--spectrum-global-color-static-seafoam-200-rgb) + ); + --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; + --spectrum-global-color-static-seafoam-300: rgb( + var(--spectrum-global-color-static-seafoam-300-rgb) + ); + --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; + --spectrum-global-color-static-seafoam-400: rgb( + var(--spectrum-global-color-static-seafoam-400-rgb) + ); + --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; + --spectrum-global-color-static-seafoam-500: rgb( + var(--spectrum-global-color-static-seafoam-500-rgb) + ); + --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; + --spectrum-global-color-static-seafoam-600: rgb( + var(--spectrum-global-color-static-seafoam-600-rgb) + ); + --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; + --spectrum-global-color-static-seafoam-700: rgb( + var(--spectrum-global-color-static-seafoam-700-rgb) + ); + --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; + --spectrum-global-color-static-seafoam-800: rgb( + var(--spectrum-global-color-static-seafoam-800-rgb) + ); + --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; + --spectrum-global-color-static-blue-200: rgb( + var(--spectrum-global-color-static-blue-200-rgb) + ); + --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; + --spectrum-global-color-static-blue-300: rgb( + var(--spectrum-global-color-static-blue-300-rgb) + ); + --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; + --spectrum-global-color-static-blue-400: rgb( + var(--spectrum-global-color-static-blue-400-rgb) + ); + --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; + --spectrum-global-color-static-blue-500: rgb( + var(--spectrum-global-color-static-blue-500-rgb) + ); + --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; + --spectrum-global-color-static-blue-600: rgb( + var(--spectrum-global-color-static-blue-600-rgb) + ); + --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; + --spectrum-global-color-static-blue-700: rgb( + var(--spectrum-global-color-static-blue-700-rgb) + ); + --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; + --spectrum-global-color-static-blue-800: rgb( + var(--spectrum-global-color-static-blue-800-rgb) + ); + --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; + --spectrum-global-color-static-indigo-200: rgb( + var(--spectrum-global-color-static-indigo-200-rgb) + ); + --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; + --spectrum-global-color-static-indigo-300: rgb( + var(--spectrum-global-color-static-indigo-300-rgb) + ); + --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; + --spectrum-global-color-static-indigo-400: rgb( + var(--spectrum-global-color-static-indigo-400-rgb) + ); + --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; + --spectrum-global-color-static-indigo-500: rgb( + var(--spectrum-global-color-static-indigo-500-rgb) + ); + --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; + --spectrum-global-color-static-indigo-600: rgb( + var(--spectrum-global-color-static-indigo-600-rgb) + ); + --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-700: rgb( + var(--spectrum-global-color-static-indigo-700-rgb) + ); + --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-800: rgb( + var(--spectrum-global-color-static-indigo-800-rgb) + ); + --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; + --spectrum-global-color-static-purple-400: rgb( + var(--spectrum-global-color-static-purple-400-rgb) + ); + --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; + --spectrum-global-color-static-purple-500: rgb( + var(--spectrum-global-color-static-purple-500-rgb) + ); + --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; + --spectrum-global-color-static-purple-600: rgb( + var(--spectrum-global-color-static-purple-600-rgb) + ); + --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; + --spectrum-global-color-static-purple-700: rgb( + var(--spectrum-global-color-static-purple-700-rgb) + ); + --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; + --spectrum-global-color-static-purple-800: rgb( + var(--spectrum-global-color-static-purple-800-rgb) + ); + --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; + --spectrum-global-color-static-fuchsia-400: rgb( + var(--spectrum-global-color-static-fuchsia-400-rgb) + ); + --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; + --spectrum-global-color-static-fuchsia-500: rgb( + var(--spectrum-global-color-static-fuchsia-500-rgb) + ); + --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; + --spectrum-global-color-static-fuchsia-600: rgb( + var(--spectrum-global-color-static-fuchsia-600-rgb) + ); + --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; + --spectrum-global-color-static-fuchsia-700: rgb( + var(--spectrum-global-color-static-fuchsia-700-rgb) + ); + --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; + --spectrum-global-color-static-fuchsia-800: rgb( + var(--spectrum-global-color-static-fuchsia-800-rgb) + ); + --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; + --spectrum-global-color-static-magenta-200: rgb( + var(--spectrum-global-color-static-magenta-200-rgb) + ); + --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; + --spectrum-global-color-static-magenta-300: rgb( + var(--spectrum-global-color-static-magenta-300-rgb) + ); + --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; + --spectrum-global-color-static-magenta-400: rgb( + var(--spectrum-global-color-static-magenta-400-rgb) + ); + --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; + --spectrum-global-color-static-magenta-500: rgb( + var(--spectrum-global-color-static-magenta-500-rgb) + ); + --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; + --spectrum-global-color-static-magenta-600: rgb( + var(--spectrum-global-color-static-magenta-600-rgb) + ); + --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; + --spectrum-global-color-static-magenta-700: rgb( + var(--spectrum-global-color-static-magenta-700-rgb) + ); + --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; + --spectrum-global-color-static-magenta-800: rgb( + var(--spectrum-global-color-static-magenta-800-rgb) + ); + --spectrum-global-color-static-transparent-white-200: #ffffff1a; + --spectrum-global-color-static-transparent-white-300: #ffffff40; + --spectrum-global-color-static-transparent-white-400: #fff6; + --spectrum-global-color-static-transparent-white-500: #ffffff8c; + --spectrum-global-color-static-transparent-white-600: #ffffffb3; + --spectrum-global-color-static-transparent-white-700: #fffc; + --spectrum-global-color-static-transparent-white-800: #ffffffe6; + --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; + --spectrum-global-color-static-transparent-white-900: rgb( + var(--spectrum-global-color-static-transparent-white-900-rgb) + ); + --spectrum-global-color-static-transparent-black-200: #0000001a; + --spectrum-global-color-static-transparent-black-300: #00000040; + --spectrum-global-color-static-transparent-black-400: #0006; + --spectrum-global-color-static-transparent-black-500: #0000008c; + --spectrum-global-color-static-transparent-black-600: #000000b3; + --spectrum-global-color-static-transparent-black-700: #000c; + --spectrum-global-color-static-transparent-black-800: #000000e6; + --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; + --spectrum-global-color-static-transparent-black-900: rgb( + var(--spectrum-global-color-static-transparent-black-900-rgb) + ); + --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, + #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, + #1a4b83, #1a3979, #1a266f, #191264, #180057; + --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, #a4e16d, + #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, #196b47, + #105c45, #094d41, #033f3e, #00313a; + --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, + #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, + #71167c, #560f74, #370b6e, #000968; + --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, + #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, + #3ea8a6, #208288, #076769, #00494b, #002c2d; + --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, + #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, + #397aa8, #1c5796, #163771, #10194d; + --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, + #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, + #2f74b3, #265191, #163670, #0b194c; + --spectrum-semantic-negative-background-color: var( + --spectrum-global-color-static-red-600 + ); + --spectrum-semantic-negative-color-default: var( + --spectrum-global-color-red-500 + ); + --spectrum-semantic-negative-color-hover: var( + --spectrum-global-color-red-600 + ); + --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-border-color: var( + --spectrum-global-color-red-400 + ); + --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-status-color: var( + --spectrum-global-color-red-400 + ); + --spectrum-semantic-negative-text-color-large: var( + --spectrum-global-color-red-500 + ); + --spectrum-semantic-negative-text-color-small: var( + --spectrum-global-color-red-600 + ); + --spectrum-semantic-negative-text-color-small-hover: var( + --spectrum-global-color-red-700 + ); + --spectrum-semantic-negative-text-color-small-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-semantic-negative-text-color-small-key-focus: var( + --spectrum-global-color-red-600 + ); + --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-color-key-focus: var( + --spectrum-global-color-red-400 + ); + --spectrum-semantic-negative-background-color-default: var( + --spectrum-global-color-static-red-600 + ); + --spectrum-semantic-negative-background-color-hover: var( + --spectrum-global-color-static-red-700 + ); + --spectrum-semantic-negative-background-color-down: var( + --spectrum-global-color-static-red-800 + ); + --spectrum-semantic-negative-background-color-key-focus: var( + --spectrum-global-color-static-red-700 + ); + --spectrum-semantic-notice-background-color: var( + --spectrum-global-color-static-orange-600 + ); + --spectrum-semantic-notice-color-default: var( + --spectrum-global-color-orange-500 + ); + --spectrum-semantic-notice-color-dark: var( + --spectrum-global-color-orange-600 + ); + --spectrum-semantic-notice-border-color: var( + --spectrum-global-color-orange-400 + ); + --spectrum-semantic-notice-icon-color: var( + --spectrum-global-color-orange-600 + ); + --spectrum-semantic-notice-status-color: var( + --spectrum-global-color-orange-400 + ); + --spectrum-semantic-notice-text-color-large: var( + --spectrum-global-color-orange-500 + ); + --spectrum-semantic-notice-text-color-small: var( + --spectrum-global-color-orange-600 + ); + --spectrum-semantic-notice-color-down: var( + --spectrum-global-color-orange-700 + ); + --spectrum-semantic-notice-color-key-focus: var( + --spectrum-global-color-orange-400 + ); + --spectrum-semantic-notice-background-color-default: var( + --spectrum-global-color-static-orange-600 + ); + --spectrum-semantic-notice-background-color-hover: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-semantic-notice-background-color-down: var( + --spectrum-global-color-static-orange-800 + ); + --spectrum-semantic-notice-background-color-key-focus: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-semantic-positive-background-color: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-semantic-positive-color-default: var( + --spectrum-global-color-green-500 + ); + --spectrum-semantic-positive-color-dark: var( + --spectrum-global-color-green-600 + ); + --spectrum-semantic-positive-border-color: var( + --spectrum-global-color-green-400 + ); + --spectrum-semantic-positive-icon-color: var( + --spectrum-global-color-green-600 + ); + --spectrum-semantic-positive-status-color: var( + --spectrum-global-color-green-400 + ); + --spectrum-semantic-positive-text-color-large: var( + --spectrum-global-color-green-500 + ); + --spectrum-semantic-positive-text-color-small: var( + --spectrum-global-color-green-600 + ); + --spectrum-semantic-positive-color-down: var( + --spectrum-global-color-green-700 + ); + --spectrum-semantic-positive-color-key-focus: var( + --spectrum-global-color-green-400 + ); + --spectrum-semantic-positive-background-color-default: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-semantic-positive-background-color-hover: var( + --spectrum-global-color-static-green-700 + ); + --spectrum-semantic-positive-background-color-down: var( + --spectrum-global-color-static-green-800 + ); + --spectrum-semantic-positive-background-color-key-focus: var( + --spectrum-global-color-static-green-700 + ); + --spectrum-semantic-informative-background-color: var( + --spectrum-global-color-static-blue-600 + ); + --spectrum-semantic-informative-color-default: var( + --spectrum-global-color-blue-500 + ); + --spectrum-semantic-informative-color-dark: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-informative-border-color: var( + --spectrum-global-color-blue-400 + ); + --spectrum-semantic-informative-icon-color: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-informative-status-color: var( + --spectrum-global-color-blue-400 + ); + --spectrum-semantic-informative-text-color-large: var( + --spectrum-global-color-blue-500 + ); + --spectrum-semantic-informative-text-color-small: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-informative-color-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-semantic-informative-color-key-focus: var( + --spectrum-global-color-blue-400 + ); + --spectrum-semantic-informative-background-color-default: var( + --spectrum-global-color-static-blue-600 + ); + --spectrum-semantic-informative-background-color-hover: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-informative-background-color-down: var( + --spectrum-global-color-static-blue-800 + ); + --spectrum-semantic-informative-background-color-key-focus: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-cta-background-color-default: var( + --spectrum-global-color-static-blue-600 + ); + --spectrum-semantic-cta-background-color-hover: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-cta-background-color-down: var( + --spectrum-global-color-static-blue-800 + ); + --spectrum-semantic-cta-background-color-key-focus: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-emphasized-border-color-default: var( + --spectrum-global-color-blue-500 + ); + --spectrum-semantic-emphasized-border-color-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-emphasized-border-color-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-semantic-emphasized-border-color-key-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-neutral-background-color-default: var( + --spectrum-global-color-static-gray-700 + ); + --spectrum-semantic-neutral-background-color-hover: var( + --spectrum-global-color-static-gray-800 + ); + --spectrum-semantic-neutral-background-color-down: var( + --spectrum-global-color-static-gray-900 + ); + --spectrum-semantic-neutral-background-color-key-focus: var( + --spectrum-global-color-static-gray-800 + ); + --spectrum-semantic-presence-color-1: var( + --spectrum-global-color-static-red-500 + ); + --spectrum-semantic-presence-color-2: var( + --spectrum-global-color-static-orange-400 + ); + --spectrum-semantic-presence-color-3: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; + --spectrum-semantic-presence-color-4: rgb( + var(--spectrum-semantic-presence-color-4-rgb) + ); + --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; + --spectrum-semantic-presence-color-5: rgb( + var(--spectrum-semantic-presence-color-5-rgb) + ); + --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; + --spectrum-semantic-presence-color-6: rgb( + var(--spectrum-semantic-presence-color-6-rgb) + ); + --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; + --spectrum-semantic-presence-color-7: rgb( + var(--spectrum-semantic-presence-color-7-rgb) + ); + --spectrum-semantic-presence-color-8: var( + --spectrum-global-color-static-fuchsia-600 + ); + --spectrum-global-dimension-static-percent-50: 50%; + --spectrum-global-dimension-static-percent-70: 70%; + --spectrum-global-dimension-static-percent-100: 100%; + --spectrum-global-dimension-static-breakpoint-xsmall: 304px; + --spectrum-global-dimension-static-breakpoint-small: 768px; + --spectrum-global-dimension-static-breakpoint-medium: 1280px; + --spectrum-global-dimension-static-breakpoint-large: 1768px; + --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; + --spectrum-global-dimension-static-grid-columns: 12; + --spectrum-global-dimension-static-grid-fluid-width: 100%; + --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; + --spectrum-global-dimension-static-size-0: 0px; + --spectrum-global-dimension-static-size-10: 1px; + --spectrum-global-dimension-static-size-25: 2px; + --spectrum-global-dimension-static-size-40: 3px; + --spectrum-global-dimension-static-size-50: 4px; + --spectrum-global-dimension-static-size-65: 5px; + --spectrum-global-dimension-static-size-75: 6px; + --spectrum-global-dimension-static-size-85: 7px; + --spectrum-global-dimension-static-size-100: 8px; + --spectrum-global-dimension-static-size-115: 9px; + --spectrum-global-dimension-static-size-125: 10px; + --spectrum-global-dimension-static-size-130: 11px; + --spectrum-global-dimension-static-size-150: 12px; + --spectrum-global-dimension-static-size-160: 13px; + --spectrum-global-dimension-static-size-175: 14px; + --spectrum-global-dimension-static-size-185: 15px; + --spectrum-global-dimension-static-size-200: 16px; + --spectrum-global-dimension-static-size-225: 18px; + --spectrum-global-dimension-static-size-250: 20px; + --spectrum-global-dimension-static-size-275: 22px; + --spectrum-global-dimension-static-size-300: 24px; + --spectrum-global-dimension-static-size-325: 26px; + --spectrum-global-dimension-static-size-350: 28px; + --spectrum-global-dimension-static-size-400: 32px; + --spectrum-global-dimension-static-size-450: 36px; + --spectrum-global-dimension-static-size-500: 40px; + --spectrum-global-dimension-static-size-550: 44px; + --spectrum-global-dimension-static-size-600: 48px; + --spectrum-global-dimension-static-size-700: 56px; + --spectrum-global-dimension-static-size-800: 64px; + --spectrum-global-dimension-static-size-900: 72px; + --spectrum-global-dimension-static-size-1000: 80px; + --spectrum-global-dimension-static-size-1200: 96px; + --spectrum-global-dimension-static-size-1700: 136px; + --spectrum-global-dimension-static-size-2400: 192px; + --spectrum-global-dimension-static-size-2500: 200px; + --spectrum-global-dimension-static-size-2600: 208px; + --spectrum-global-dimension-static-size-2800: 224px; + --spectrum-global-dimension-static-size-3200: 256px; + --spectrum-global-dimension-static-size-3400: 272px; + --spectrum-global-dimension-static-size-3500: 280px; + --spectrum-global-dimension-static-size-3600: 288px; + --spectrum-global-dimension-static-size-3800: 304px; + --spectrum-global-dimension-static-size-4600: 368px; + --spectrum-global-dimension-static-size-5000: 400px; + --spectrum-global-dimension-static-size-6000: 480px; + --spectrum-global-dimension-static-size-16000: 1280px; + --spectrum-global-dimension-static-font-size-50: 11px; + --spectrum-global-dimension-static-font-size-75: 12px; + --spectrum-global-dimension-static-font-size-100: 14px; + --spectrum-global-dimension-static-font-size-150: 15px; + --spectrum-global-dimension-static-font-size-200: 16px; + --spectrum-global-dimension-static-font-size-300: 18px; + --spectrum-global-dimension-static-font-size-400: 20px; + --spectrum-global-dimension-static-font-size-500: 22px; + --spectrum-global-dimension-static-font-size-600: 25px; + --spectrum-global-dimension-static-font-size-700: 28px; + --spectrum-global-dimension-static-font-size-800: 32px; + --spectrum-global-dimension-static-font-size-900: 36px; + --spectrum-global-dimension-static-font-size-1000: 40px; + --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, + "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-family-serif: adobe-clean-serif, "Source Serif Pro", + Georgia, serif; + --spectrum-global-font-family-code: "Source Code Pro", Monaco, monospace; + --spectrum-global-font-weight-thin: 100; + --spectrum-global-font-weight-ultra-light: 200; + --spectrum-global-font-weight-light: 300; + --spectrum-global-font-weight-regular: 400; + --spectrum-global-font-weight-medium: 500; + --spectrum-global-font-weight-semi-bold: 600; + --spectrum-global-font-weight-bold: 700; + --spectrum-global-font-weight-extra-bold: 800; + --spectrum-global-font-weight-black: 900; + --spectrum-global-font-style-regular: normal; + --spectrum-global-font-style-italic: italic; + --spectrum-global-font-letter-spacing-none: 0; + --spectrum-global-font-letter-spacing-small: 0.0125em; + --spectrum-global-font-letter-spacing-han: 0.05em; + --spectrum-global-font-letter-spacing-medium: 0.06em; + --spectrum-global-font-line-height-large: 1.7; + --spectrum-global-font-line-height-medium: 1.5; + --spectrum-global-font-line-height-small: 1.3; + --spectrum-global-font-multiplier-0: 0em; + --spectrum-global-font-multiplier-25: 0.25em; + --spectrum-global-font-multiplier-75: 0.75em; + --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, + "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, + "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, + source-han-traditional, "MingLiu", "Heiti TC Light", "sans-serif"; + --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, + source-han-simplified-c, "SimSun", "Heiti SC Light", "sans-serif"; + --spectrum-global-font-font-family-ko: adobe-clean-han-korean, + source-han-korean, "Malgun Gothic", "Apple Gothic", "sans-serif"; + --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, + "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", YuGothic, + "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", + "sans-serif"; + --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, + source-han-traditional, "MingLiu", "Heiti TC Light", adobe-clean, + "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-alias-border-size-thin: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-border-size-thick: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-size-thicker: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-size-thickest: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thin: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-offset-thick: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-offset-thicker: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thickest: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-baseline: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-grid-gutter-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-gutter-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-gutter-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-gutter-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-gutter-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-margin-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-margin-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-margin-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-margin-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-margin-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-layout-region-margin-bottom-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-layout-region-margin-bottom-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-radial-reaction-size-default: var( + --spectrum-global-dimension-static-size-550 + ); + --spectrum-alias-focus-ring-gap: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-focus-ring-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-loupe-entry-animation-duration: var( + --spectrum-global-animation-duration-300 + ); + --spectrum-alias-loupe-exit-animation-duration: var( + --spectrum-global-animation-duration-300 + ); + --spectrum-alias-heading-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-heading-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-heading-text-font-weight-regular-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-light: var( + --spectrum-global-font-weight-light + ); + --spectrum-alias-heading-text-font-weight-light-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-heading-text-font-weight-heavy: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-heavy-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-quiet: var( + --spectrum-global-font-weight-light + ); + --spectrum-alias-heading-text-font-weight-quiet-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-heading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-strong-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-margin-bottom: var( + --spectrum-global-font-multiplier-25 + ); + --spectrum-alias-subheading-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-subheading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-body-text-font-family: var( + --spectrum-global-font-family-base + ); + --spectrum-alias-body-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-body-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-body-text-font-weight-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-body-margin-bottom: var( + --spectrum-global-font-multiplier-75 + ); + --spectrum-alias-detail-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-detail-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-detail-text-font-weight-light: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-detail-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-heading-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-article-heading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-heading-text-font-weight-quiet: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-article-heading-text-font-weight-quiet-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-article-body-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-article-body-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-subheading-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-article-subheading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-detail-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-article-detail-text-font-weight-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-code-text-font-family: var( + --spectrum-global-font-family-code + ); + --spectrum-alias-code-text-font-weight-regular: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-code-text-font-weight-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-code-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0); + --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); + --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); + --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); + --spectrum-alias-font-family-zhhans: var( + --spectrum-global-font-font-family-zhhans + ); + --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); + --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); + --spectrum-alias-font-family-condensed: var( + --spectrum-global-font-font-family-condensed + ); + --spectrum-alias-button-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-component-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-han-component-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-serif-text-font-family: var( + --spectrum-global-font-family-serif + ); + --spectrum-alias-han-heading-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-han-heading-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var( + --spectrum-global-font-weight-extra-bold + ); + --spectrum-alias-han-heading-text-font-weight-regular-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-heading-text-font-weight-light: var( + --spectrum-global-font-weight-light + ); + --spectrum-alias-han-heading-text-font-weight-light-emphasis: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-han-heading-text-font-weight-light-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-heading-text-font-weight-heavy: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-body-text-line-height: var( + --spectrum-global-font-line-height-large + ); + --spectrum-alias-han-body-text-font-weight-regular: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-han-body-text-font-weight-emphasis: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-body-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-subheading-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-subheading-text-font-weight-emphasis: var( + --spectrum-global-font-weight-extra-bold + ); + --spectrum-alias-han-subheading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-detail-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-han-detail-text-font-weight-emphasis: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-detail-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); } :root, :host { - --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); - --spectrum-alias-item-rounded-border-radius-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-border-radius-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-border-radius-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-border-radius-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-text-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-item-text-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-item-text-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-item-text-size-xl: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-item-text-padding-top-s: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-item-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-text-padding-top-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-text-padding-bottom-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-text-padding-bottom-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-icon-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-top-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-icon-padding-bottom-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-bottom-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-bottom-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-bottom-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); - --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); - --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); - --spectrum-alias-item-rounded-padding-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-padding-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-padding-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-padding-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-icononly-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icononly-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icononly-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icononly-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-gap-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-gap-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-gap-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-control-gap-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-workflow-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-workflow-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); - --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); - --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-mark-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-ui-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-ui-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-ui-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-ui-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-clearbutton-gap-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-clearbutton-gap-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-workflow-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-rounded-workflow-padding-left-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-padding-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-top-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-bottom-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-bottom-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-bottom-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-mark-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-mark-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-1-size-s: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-item-control-1-size-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-2-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-2-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-2-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-control-2-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-2-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-2-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-3-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-3-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-3-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-3-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-3-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-3-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-mark-size-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-size-l: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-item-mark-size-xl: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-heading-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-xxl-text-size: var( - --spectrum-global-dimension-font-size-1100 - ); - --spectrum-alias-heading-xl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-l-text-size: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-m-text-size: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-xxl-margin-top: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-xl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-l-margin-top: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-m-margin-top: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-heading-han-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-han-xxl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-han-xl-text-size: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-l-text-size: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-han-m-text-size: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-han-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-han-xxl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-xl-margin-top: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-han-l-margin-top: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-han-m-margin-top: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-component-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-component-border-radius-quiet: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-component-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-component-focusring-gap-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-component-focusring-size-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-input-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-input-quiet-focusline-gap: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-control-two-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-two-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-two-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-control-two-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-control-two-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-control-two-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-control-two-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-control-two-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-control-two-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-focus-ring-border-radius-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-focus-ring-border-radius-m: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-control-two-focus-ring-border-radius-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xxl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-three-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-infieldbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-infieldbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-infieldbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-infieldbutton-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-border-radius-sided: 0; - --spectrum-alias-infieldbutton-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-infieldbutton-fill-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-fill-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-infieldbutton-fill-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-infieldbutton-fill-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-infieldbutton-padding-s: 0; - --spectrum-alias-infieldbutton-padding-m: 0; - --spectrum-alias-infieldbutton-padding-l: 0; - --spectrum-alias-infieldbutton-padding-xl: 0; - --spectrum-alias-infieldbutton-full-height-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-infieldbutton-full-height-m: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-infieldbutton-full-height-l: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-infieldbutton-full-height-xl: var( - --spectrum-global-dimension-size-600 - ); - --spectrum-alias-infieldbutton-half-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-infieldbutton-half-height-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-infieldbutton-half-height-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-infieldbutton-half-height-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-stepperbutton-gap: 0; - --spectrum-alias-stepperbutton-width-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-stepperbutton-width-m: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-stepperbutton-width-l: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-stepperbutton-width-xl: var( - --spectrum-global-dimension-size-450 - ); - --spectrum-alias-stepperbutton-icon-x-offset-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-x-offset-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-stepperbutton-icon-x-offset-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-stepperbutton-icon-x-offset-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-s: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-radius-touching: 0; - --spectrum-alias-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-clearbutton-icon-margin-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-clearbutton-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-pickerbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-pickerbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-pickerbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-pickerbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-pickerbutton-label-padding-y-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-label-padding-y-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-pickerbutton-label-padding-y-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-pickerbutton-label-padding-y-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-border-radius-rounded: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0; - --spectrum-alias-search-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-search-border-radius-quiet: 0; - --spectrum-alias-combobox-quiet-button-offset-x: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-thumbnail-border-radius-small: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-actiongroup-button-gap: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-compact: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-actiongroup-button-gap-quiet: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-quiet-compact: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-search-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-search-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-search-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-percent-50: 50%; - --spectrum-alias-percent-70: 70%; - --spectrum-alias-percent-100: 100%; - --spectrum-alias-breakpoint-xsmall: 304px; - --spectrum-alias-breakpoint-small: 768px; - --spectrum-alias-breakpoint-medium: 1280px; - --spectrum-alias-breakpoint-large: 1768px; - --spectrum-alias-breakpoint-xlarge: 2160px; - --spectrum-alias-grid-columns: 12; - --spectrum-alias-grid-fluid-width: 100%; - --spectrum-alias-grid-fixed-max-width: 1280px; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-gap-small: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-focus-ring-size-small: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); - --spectrum-alias-dropshadow-offset-y: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-font-size-default: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-layout-label-gap-size: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-pill-button-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-pill-button-text-baseline: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-border-radius-xsmall: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-border-radius-small: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-border-radius-regular: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-border-radius-medium: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-border-radius-large: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-border-radius-xlarge: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-focus-ring-border-radius-xsmall: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-focus-ring-border-radius-small: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-focus-ring-border-radius-medium: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-focus-ring-border-radius-large: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-focus-ring-border-radius-xlarge: var( - --spectrum-global-dimension-size-350 - ); - --spectrum-alias-single-line-height: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-single-line-width: var( - --spectrum-global-dimension-size-2400 - ); - --spectrum-alias-workflow-icon-size-s: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-workflow-icon-size-m: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-workflow-icon-size-xl: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-alert-size-75: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-alert-size-100: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-ui-icon-alert-size-200: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-ui-icon-alert-size-300: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-height: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-width: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-width: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-ui-icon-cornertriangle-size-75: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-200: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-ui-icon-asterisk-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-100: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); - --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); - --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); - --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); - --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); - --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); - --spectrum-alias-avatar-border-size: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-tag-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-border-size-default: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-tag-border-size-key-focus: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-border-size-disabled: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-tag-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-tag-padding-right-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-padding-right-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-tag-padding-right-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-tag-font-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-tag-font-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-tag-font-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-tag-text-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-tag-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200); - --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225); - --spectrum-alias-tag-icon-margin-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-icon-margin-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-tag-icon-margin-right-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-right-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-icon-margin-right-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-clearbutton-width-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-tag-clearbutton-width-m: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-tag-clearbutton-width-l: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-tag-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-tag-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-tag-focusring-size: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-tag-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-tag-focusring-gap-selected: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-colorloupe-width: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-colorloupe-height: var( - --spectrum-global-dimension-static-size-800 - ); + --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); + --spectrum-alias-item-rounded-border-radius-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-rounded-border-radius-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-rounded-border-radius-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-rounded-border-radius-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-item-text-size-s: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-item-text-size-m: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-item-text-size-l: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-item-text-size-xl: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-item-text-padding-top-s: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-item-text-padding-top-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-text-padding-top-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-text-padding-bottom-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-text-padding-bottom-l: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-text-padding-bottom-xl: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-icon-padding-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icon-padding-top-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icon-padding-top-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icon-padding-top-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-icon-padding-bottom-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icon-padding-bottom-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icon-padding-bottom-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icon-padding-bottom-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-rounded-padding-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-rounded-padding-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-rounded-padding-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-rounded-padding-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-item-icononly-padding-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icononly-padding-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icononly-padding-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icononly-padding-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-gap-s: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-gap-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-gap-l: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-control-gap-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-workflow-icon-gap-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-workflow-icon-gap-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-workflow-icon-gap-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-workflow-icon-gap-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-ui-icon-gap-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-ui-icon-gap-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-ui-icon-gap-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-clearbutton-gap-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-clearbutton-gap-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-clearbutton-gap-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-clearbutton-gap-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-workflow-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-workflow-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-workflow-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-rounded-workflow-padding-left-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-rounded-workflow-padding-left-l: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-mark-padding-top-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-item-mark-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-mark-padding-top-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-mark-padding-bottom-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-item-mark-padding-bottom-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-mark-padding-bottom-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-mark-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-mark-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-mark-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-control-1-size-s: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-item-control-1-size-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-2-size-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-control-2-size-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-control-2-size-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-control-2-size-xxl: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-control-2-border-radius-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-2-border-radius-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-control-2-border-radius-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-2-border-radius-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-2-border-radius-xxl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-2-padding-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-2-padding-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-2-padding-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-2-padding-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-control-3-height-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-control-3-height-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-control-3-height-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-control-3-border-radius-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-3-border-radius-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-control-3-border-radius-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-3-border-radius-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-3-padding-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-3-padding-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-3-padding-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-padding-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275); + --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325); + --spectrum-alias-heading-xxxl-text-size: var( + --spectrum-global-dimension-font-size-1300 + ); + --spectrum-alias-heading-xxl-text-size: var( + --spectrum-global-dimension-font-size-1100 + ); + --spectrum-alias-heading-xl-text-size: var( + --spectrum-global-dimension-font-size-900 + ); + --spectrum-alias-heading-l-text-size: var( + --spectrum-global-dimension-font-size-700 + ); + --spectrum-alias-heading-m-text-size: var( + --spectrum-global-dimension-font-size-500 + ); + --spectrum-alias-heading-s-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-heading-xs-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-xxs-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-xxxl-margin-top: var( + --spectrum-global-dimension-font-size-1200 + ); + --spectrum-alias-heading-xxl-margin-top: var( + --spectrum-global-dimension-font-size-900 + ); + --spectrum-alias-heading-xl-margin-top: var( + --spectrum-global-dimension-font-size-800 + ); + --spectrum-alias-heading-l-margin-top: var( + --spectrum-global-dimension-font-size-600 + ); + --spectrum-alias-heading-m-margin-top: var( + --spectrum-global-dimension-font-size-400 + ); + --spectrum-alias-heading-s-margin-top: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-xs-margin-top: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-xxs-margin-top: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-heading-han-xxxl-text-size: var( + --spectrum-global-dimension-font-size-1300 + ); + --spectrum-alias-heading-han-xxl-text-size: var( + --spectrum-global-dimension-font-size-900 + ); + --spectrum-alias-heading-han-xl-text-size: var( + --spectrum-global-dimension-font-size-800 + ); + --spectrum-alias-heading-han-l-text-size: var( + --spectrum-global-dimension-font-size-600 + ); + --spectrum-alias-heading-han-m-text-size: var( + --spectrum-global-dimension-font-size-400 + ); + --spectrum-alias-heading-han-s-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-heading-han-xs-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-han-xxs-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-han-xxxl-margin-top: var( + --spectrum-global-dimension-font-size-1200 + ); + --spectrum-alias-heading-han-xxl-margin-top: var( + --spectrum-global-dimension-font-size-800 + ); + --spectrum-alias-heading-han-xl-margin-top: var( + --spectrum-global-dimension-font-size-700 + ); + --spectrum-alias-heading-han-l-margin-top: var( + --spectrum-global-dimension-font-size-500 + ); + --spectrum-alias-heading-han-m-margin-top: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-heading-han-s-margin-top: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-han-xs-margin-top: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-han-xxs-margin-top: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-component-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-component-border-radius-quiet: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-component-focusring-gap: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-component-focusring-gap-emphasized: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-component-focusring-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-component-focusring-size-emphasized: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-input-border-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-input-focusring-gap: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-input-quiet-focusline-gap: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-control-two-size-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-control-two-size-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-control-two-size-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-control-two-size-xxl: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-control-two-border-radius-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-control-two-border-radius-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-control-two-border-radius-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-control-two-border-radius-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-control-two-border-radius-xxl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-control-two-focus-ring-border-radius-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-control-two-focus-ring-border-radius-m: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-control-two-focus-ring-border-radius-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-control-two-focus-ring-border-radius-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-control-two-focus-ring-border-radius-xxl: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-control-three-height-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-control-three-height-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-control-three-height-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-infieldbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-infieldbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-infieldbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-infieldbutton-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-border-radius-sided: 0; + --spectrum-alias-infieldbutton-border-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-infieldbutton-fill-padding-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-fill-padding-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-infieldbutton-fill-padding-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-infieldbutton-fill-padding-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-infieldbutton-padding-s: 0; + --spectrum-alias-infieldbutton-padding-m: 0; + --spectrum-alias-infieldbutton-padding-l: 0; + --spectrum-alias-infieldbutton-padding-xl: 0; + --spectrum-alias-infieldbutton-full-height-s: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-infieldbutton-full-height-m: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-infieldbutton-full-height-l: var( + --spectrum-global-dimension-size-500 + ); + --spectrum-alias-infieldbutton-full-height-xl: var( + --spectrum-global-dimension-size-600 + ); + --spectrum-alias-infieldbutton-half-height-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-infieldbutton-half-height-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-infieldbutton-half-height-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-infieldbutton-half-height-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-stepperbutton-gap: 0; + --spectrum-alias-stepperbutton-width-s: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-stepperbutton-width-m: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-stepperbutton-width-l: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-stepperbutton-width-xl: var( + --spectrum-global-dimension-size-450 + ); + --spectrum-alias-stepperbutton-icon-x-offset-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-icon-x-offset-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-stepperbutton-icon-x-offset-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-stepperbutton-icon-x-offset-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-s: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-radius-touching: 0; + --spectrum-alias-clearbutton-icon-margin-s: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-clearbutton-icon-margin-m: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-clearbutton-icon-margin-l: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-clearbutton-icon-margin-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-clearbutton-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-pickerbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-pickerbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-pickerbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-pickerbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-pickerbutton-label-padding-y-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-pickerbutton-label-padding-y-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-pickerbutton-label-padding-y-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-pickerbutton-label-padding-y-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-border-radius-rounded: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0; + --spectrum-alias-search-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-search-border-radius-quiet: 0; + --spectrum-alias-combobox-quiet-button-offset-x: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-thumbnail-border-radius-small: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-actiongroup-button-gap: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-compact: var( + --spectrum-global-dimension-size-0 + ); + --spectrum-alias-actiongroup-button-gap-quiet: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-quiet-compact: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-search-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-search-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-search-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-percent-50: 50%; + --spectrum-alias-percent-70: 70%; + --spectrum-alias-percent-100: 100%; + --spectrum-alias-breakpoint-xsmall: 304px; + --spectrum-alias-breakpoint-small: 768px; + --spectrum-alias-breakpoint-medium: 1280px; + --spectrum-alias-breakpoint-large: 1768px; + --spectrum-alias-breakpoint-xlarge: 2160px; + --spectrum-alias-grid-columns: 12; + --spectrum-alias-grid-fluid-width: 100%; + --spectrum-alias-grid-fixed-max-width: 1280px; + --spectrum-alias-border-size-thin: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-border-size-thick: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-size-thicker: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-size-thickest: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thin: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-offset-thick: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-offset-thicker: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thickest: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-baseline: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-grid-gutter-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-gutter-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-gutter-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-gutter-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-gutter-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-margin-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-margin-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-margin-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-margin-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-margin-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-layout-region-margin-bottom-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-layout-region-margin-bottom-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-radial-reaction-size-default: var( + --spectrum-global-dimension-static-size-550 + ); + --spectrum-alias-focus-ring-gap: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-focus-ring-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-focus-ring-gap-small: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-focus-ring-size-small: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); + --spectrum-alias-dropshadow-offset-y: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-font-size-default: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-layout-label-gap-size: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-pill-button-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-pill-button-text-baseline: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-border-radius-xsmall: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-border-radius-small: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-border-radius-regular: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-border-radius-medium: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-border-radius-large: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-border-radius-xlarge: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-focus-ring-border-radius-xsmall: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-focus-ring-border-radius-small: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-focus-ring-border-radius-medium: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-focus-ring-border-radius-large: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-focus-ring-border-radius-xlarge: var( + --spectrum-global-dimension-size-350 + ); + --spectrum-alias-single-line-height: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-single-line-width: var( + --spectrum-global-dimension-size-2400 + ); + --spectrum-alias-workflow-icon-size-s: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-workflow-icon-size-m: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-workflow-icon-size-xl: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-ui-icon-alert-size-75: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-ui-icon-alert-size-100: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-ui-icon-alert-size-200: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-ui-icon-alert-size-300: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-height: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-width: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-width: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-ui-icon-cornertriangle-size-75: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-ui-icon-cornertriangle-size-200: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-ui-icon-asterisk-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-asterisk-size-100: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); + --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); + --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); + --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); + --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); + --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); + --spectrum-alias-avatar-border-size: var(--spectrum-global-dimension-size-0); + --spectrum-alias-tag-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-border-size-default: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-tag-border-size-key-focus: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-border-size-disabled: var( + --spectrum-global-dimension-size-0 + ); + --spectrum-alias-tag-border-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-tag-padding-right-s: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-padding-right-m: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-tag-padding-right-l: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-font-size-s: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-tag-font-size-m: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-tag-font-size-l: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-tag-text-padding-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-text-padding-top-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-tag-text-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200); + --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225); + --spectrum-alias-tag-icon-margin-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-icon-margin-top-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-margin-top-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-tag-icon-margin-right-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-margin-right-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-icon-margin-right-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-clearbutton-width-s: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-tag-clearbutton-width-m: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-tag-clearbutton-width-l: var( + --spectrum-global-dimension-size-500 + ); + --spectrum-alias-tag-clearbutton-icon-margin-s: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-clearbutton-icon-margin-m: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-tag-clearbutton-icon-margin-l: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25); + --spectrum-alias-tag-focusring-gap: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-tag-focusring-gap-selected: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-colorloupe-width: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-colorloupe-height: var( + --spectrum-global-dimension-static-size-800 + ); } :root, :host { - --spectrum-alias-colorhandle-outer-border-color: #0000006b; - --spectrum-alias-transparent-blue-background-color-hover: #0057be26; - --spectrum-alias-transparent-blue-background-color-down: #0048994d; - --spectrum-alias-transparent-blue-background-color-key-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color-mouse-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-transparent-red-background-color-hover: #9a000026; - --spectrum-alias-transparent-red-background-color-down: #7c00004d; - --spectrum-alias-transparent-red-background-color-key-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color-mouse-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-component-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-key-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-mouse-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected-default: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected-hover: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-selected-down: var( - --spectrum-alias-component-text-color-down - ); - --spectrum-alias-component-text-color-selected-key-focus: var( - --spectrum-alias-component-text-color-key-focus - ); - --spectrum-alias-component-text-color-selected-mouse-focus: var( - --spectrum-alias-component-text-color-mouse-focus - ); - --spectrum-alias-component-text-color-selected: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-text-color-emphasized-selected-hover: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-down: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-error-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-component-text-color-error-hover: var( - --spectrum-semantic-negative-text-color-small-hover - ); - --spectrum-alias-component-text-color-error-down: var( - --spectrum-semantic-negative-text-color-small-down - ); - --spectrum-alias-component-text-color-error-key-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error-mouse-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error: var( - --spectrum-alias-component-text-color-error-default - ); - --spectrum-alias-component-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-component-icon-color-default: var( - --spectrum-alias-icon-color - ); - --spectrum-alias-component-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color: var( - --spectrum-alias-component-icon-color-default - ); - --spectrum-alias-component-icon-color-selected: var( - --spectrum-alias-icon-color-selected-neutral-subdued - ); - --spectrum-alias-component-icon-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-icon-color-emphasized-selected-hover: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-down: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-quiet-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-selected-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-component-background-color-default: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-component-background-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-component-background-color-selected-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-hover: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-key-focus: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-down: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-component-background-color-quiet-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet: var( - --spectrum-alias-component-background-color-quiet-default - ); - --spectrum-alias-component-background-color-quiet-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-component-background-color-quiet-selected-down: var( - --spectrum-alias-component-background-color-selected-down - ); - --spectrum-alias-component-background-color-quiet-selected-key-focus: var( - --spectrum-alias-component-background-color-selected-key-focus - ); - --spectrum-alias-component-background-color-quiet-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-background-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-background-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-background-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-background-color-emphasized-selected: var( - --spectrum-alias-component-background-color-emphasized-selected-default - ); - --spectrum-alias-component-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-component-border-color-quiet-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-component-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-component-border-color-down: var( - --spectrum-alias-border-color-down - ); - --spectrum-alias-component-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color: var( - --spectrum-alias-component-border-color-default - ); - --spectrum-alias-component-border-color-selected-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-component-border-color-selected-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-component-border-color-selected-down: var( - --spectrum-alias-border-color-down - ); - --spectrum-alias-component-border-color-selected-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-selected: var( - --spectrum-alias-component-border-color-selected-default - ); - --spectrum-alias-component-border-color-quiet-default: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-hover: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-down: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-quiet: var( - --spectrum-alias-component-border-color-quiet-default - ); - --spectrum-alias-component-border-color-quiet-selected-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-hover: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-quiet-selected: var( - --spectrum-alias-component-border-color-quiet-selected-default - ); - --spectrum-alias-component-border-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-border-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-border-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-border-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-border-color-emphasized-selected: var( - --spectrum-alias-component-border-color-emphasized-selected-default - ); - --spectrum-alias-tag-border-color-default: var( - --spectrum-alias-border-color-darker-default - ); - --spectrum-alias-tag-border-color-hover: var( - --spectrum-alias-border-color-darker-hover - ); - --spectrum-alias-tag-border-color-down: var( - --spectrum-alias-border-color-darker-hover - ); - --spectrum-alias-tag-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-tag-border-color-error-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-error-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-tag-border-color-error-selected: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-border-color: var( - --spectrum-alias-tag-border-color-default - ); - --spectrum-alias-tag-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-tag-border-color-error: var( - --spectrum-alias-tag-border-color-error-default - ); - --spectrum-alias-tag-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tag-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); - --spectrum-alias-tag-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-tag-text-color: var( - --spectrum-alias-tag-text-color-default - ); - --spectrum-alias-tag-text-color-error-default: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-text-color-error-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-key-focus: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error: var( - --spectrum-alias-tag-text-color-error-default - ); - --spectrum-alias-tag-text-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); - --spectrum-alias-tag-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); - --spectrum-alias-tag-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-tag-icon-color: var( - --spectrum-alias-tag-icon-color-default - ); - --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); - --spectrum-alias-tag-icon-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color: var( - --spectrum-alias-tag-background-color-default - ); - --spectrum-alias-tag-background-color-error-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-error-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error: var( - --spectrum-alias-tag-background-color-error-default - ); - --spectrum-alias-tag-background-color-error-selected-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-background-color-error-selected-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-background-color-error-selected: var( - --spectrum-alias-tag-background-color-error-selected-default - ); - --spectrum-alias-tag-background-color-selected-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-tag-background-color-selected-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-tag-background-color-selected-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-focusring-border-color-default: transparent; - --spectrum-alias-tag-focusring-border-color-key-focus: transparent; - --spectrum-alias-tag-focusring-border-color-disabled: transparent; - --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( - --spectrum-alias-focus-ring-color - ); - --spectrum-alias-tag-focusring-border-color: var( - --spectrum-alias-tag-focusring-border-color-default - ); - --spectrum-alias-avatar-border-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-down: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color: var( - --spectrum-alias-avatar-border-color-default - ); - --spectrum-alias-avatar-border-color-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-down: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected: var( - --spectrum-alias-avatar-border-color-selected-default - ); - --spectrum-alias-avatar-border-color-selected-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-toggle-background-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-toggle-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color: var( - --spectrum-alias-toggle-background-color-default - ); - --spectrum-alias-toggle-background-color-emphasized-selected-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected: var( - --spectrum-alias-toggle-background-color-emphasized-selected-default - ); - --spectrum-alias-toggle-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-toggle-border-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-border-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color: var( - --spectrum-alias-toggle-border-color-default - ); - --spectrum-alias-toggle-icon-color-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-toggle-icon-color-emphasized-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-button-primary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-primary-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-button-primary-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color: var( - --spectrum-alias-button-primary-background-color-default - ); - --spectrum-alias-button-primary-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-border-color-hover: var( - --spectrum-alias-button-primary-background-color-hover - ); - --spectrum-alias-button-primary-border-color-down: var( - --spectrum-alias-button-primary-background-color-down - ); - --spectrum-alias-button-primary-border-color-key-focus: var( - --spectrum-alias-button-primary-background-color-key-focus - ); - --spectrum-alias-button-primary-border-color: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-default: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-hover: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-down: var( - --spectrum-alias-button-primary-text-color-down - ); - --spectrum-alias-button-primary-icon-color-key-focus: var( - --spectrum-alias-button-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-icon-color: var( - --spectrum-alias-button-primary-icon-color-default - ); - --spectrum-alias-button-secondary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-secondary-background-color-hover: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color-down: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-secondary-background-color-key-focus: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color: var( - --spectrum-alias-button-secondary-background-color-default - ); - --spectrum-alias-button-secondary-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-border-color-hover: var( - --spectrum-alias-button-secondary-background-color-hover - ); - --spectrum-alias-button-secondary-border-color-down: var( - --spectrum-alias-button-secondary-background-color-down - ); - --spectrum-alias-button-secondary-border-color-key-focus: var( - --spectrum-alias-button-secondary-background-color-key-focus - ); - --spectrum-alias-button-secondary-border-color: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-default: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-hover: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-down: var( - --spectrum-alias-button-secondary-text-color-down - ); - --spectrum-alias-button-secondary-icon-color-key-focus: var( - --spectrum-alias-button-secondary-text-color-key-focus - ); - --spectrum-alias-button-secondary-icon-color: var( - --spectrum-alias-button-secondary-icon-color-default - ); - --spectrum-alias-button-negative-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-negative-background-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-background-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color: var( - --spectrum-alias-button-negative-background-color-default - ); - --spectrum-alias-button-negative-border-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-border-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-default: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-hover: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-down: var( - --spectrum-alias-button-negative-text-color-down - ); - --spectrum-alias-button-negative-icon-color-key-focus: var( - --spectrum-alias-button-negative-text-color-key-focus - ); - --spectrum-alias-button-negative-icon-color: var( - --spectrum-alias-button-negative-icon-color-default - ); - --spectrum-alias-input-border-color-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-input-border-color-quiet-disabled: var( - --spectrum-alias-border-color-mid - ); - --spectrum-alias-input-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-input-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-input-border-color-down: var( - --spectrum-alias-border-color-mouse-focus - ); - --spectrum-alias-input-border-color-mouse-focus: var( - --spectrum-alias-border-color-mouse-focus - ); - --spectrum-alias-input-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-input-border-color: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-input-border-color-invalid-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-input-border-color-invalid-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-down: var( - --spectrum-semantic-negative-color-down - ); - --spectrum-alias-input-border-color-invalid-mouse-focus: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-input-border-color-invalid: var( - --spectrum-alias-input-border-color-invalid-default - ); - --spectrum-alias-background-color-yellow-default: var( - --spectrum-global-color-static-yellow-300 - ); - --spectrum-alias-background-color-yellow-hover: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-key-focus: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-down: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-background-color-yellow: var( - --spectrum-alias-background-color-yellow-default - ); - --spectrum-alias-infieldbutton-background-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-infieldbutton-fill-border-color-default: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-infieldbutton-fill-border-color-hover: var( - --spectrum-alias-input-border-color-hover - ); - --spectrum-alias-infieldbutton-fill-border-color-down: var( - --spectrum-alias-input-border-color-down - ); - --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var( - --spectrum-alias-input-border-color-mouse-focus - ); - --spectrum-alias-infieldbutton-fill-border-color-key-focus: var( - --spectrum-alias-input-border-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( - --spectrum-alias-component-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( - --spectrum-alias-component-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( - --spectrum-alias-component-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006; - --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c; - --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3; - --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; - --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c; - --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; - --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6; - --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c; - --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3; - --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; - --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c; - --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; - --spectrum-alias-tabs-divider-background-color-default: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tabs-divider-background-color-quiet: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-tabitem-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tabitem-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-down: var( - --spectrum-alias-text-color-down - ); - --spectrum-alias-tabitem-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-mouse-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-selected-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tabitem-text-color-selected-hover: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-down: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-down: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-default: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-emphasized: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-icon-color-disabled: var( - --spectrum-alias-text-color-disabled - ); - --spectrum-alias-tabitem-icon-color-default: var( - --spectrum-alias-icon-color - ); - --spectrum-alias-tabitem-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tabitem-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-tabitem-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tabitem-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-tabitem-icon-color: var( - --spectrum-alias-tabitem-icon-color-default - ); - --spectrum-alias-tabitem-icon-color-selected: var( - --spectrum-alias-icon-color-selected-neutral - ); - --spectrum-alias-tabitem-icon-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-icon-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a; - --spectrum-alias-assetcard-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-border-color-selected-hover: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-border-color-selected-down: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-background-color-default: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-background-color-transparent: transparent; - --spectrum-alias-background-color-overbackground-down: #fff3; - --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; - --spectrum-alias-background-color-quiet-overbackground-down: #fff3; - --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; - --spectrum-alias-background-color-quickactions-overlay: #0003; - --spectrum-alias-placeholder-text-color: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-placeholder-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-selected: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); - --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-mouse-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); - --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); - --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); - --spectrum-alias-text-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-text-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-text-color-overbackground-disabled: #fff3; - --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; - --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); - --spectrum-alias-link-primary-text-color-default: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-link-primary-text-color-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-link-primary-text-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-link-primary-text-color-key-focus: var( - --spectrum-alias-text-color-key-focus - ); - --spectrum-alias-link-primary-text-color: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color-default: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color-hover: var( - --spectrum-alias-link-primary-text-color-hover - ); - --spectrum-alias-link-secondary-text-color-down: var( - --spectrum-alias-link-primary-text-color-down - ); - --spectrum-alias-link-secondary-text-color-key-focus: var( - --spectrum-alias-link-primary-text-color-key-focus - ); - --spectrum-alias-link-secondary-text-color: var( - --spectrum-alias-link-secondary-text-color-default - ); - --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-alias-border-color-mouse-focus: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-border-color-extralight: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); - --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); - --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-darker-default: var( - --spectrum-global-color-gray-600 - ); - --spectrum-alias-border-color-darker-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-darker-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-transparent: transparent; - --spectrum-alias-border-color-translucent-dark: #0000000d; - --spectrum-alias-border-color-translucent-darker: #0000001a; - --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); - --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); - --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); - --spectrum-alias-track-fill-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-disabled: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-thumbnail-darksquare-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-thumbnail-lightsquare-background-color: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-overbackground: #fff3; - --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-icon-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); - --spectrum-alias-icon-color-overbackground-disabled: #fff3; - --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; - --spectrum-alias-icon-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-selected-neutral-subdued: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); - --spectrum-alias-icon-color-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-icon-color-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-icon-color-selected-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-image-opacity-disabled: var( - --spectrum-global-color-opacity-30 - ); - --spectrum-alias-toolbar-background-color: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-code-highlight-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-code-highlight-background-color: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-code-highlight-color-keyword: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-section: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-code-highlight-color-literal: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-attribute: var( - --spectrum-global-color-seafoam-600 - ); - --spectrum-alias-code-highlight-color-class: var( - --spectrum-global-color-magenta-600 - ); - --spectrum-alias-code-highlight-color-variable: var( - --spectrum-global-color-purple-600 - ); - --spectrum-alias-code-highlight-color-title: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-code-highlight-color-string: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-function: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-comment: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-categorical-color-1: var( - --spectrum-global-color-static-seafoam-200 - ); - --spectrum-alias-categorical-color-2: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-alias-categorical-color-3: var( - --spectrum-global-color-static-orange-500 - ); - --spectrum-alias-categorical-color-4: var( - --spectrum-global-color-static-magenta-500 - ); - --spectrum-alias-categorical-color-5: var( - --spectrum-global-color-static-indigo-200 - ); - --spectrum-alias-categorical-color-6: var( - --spectrum-global-color-static-celery-200 - ); - --spectrum-alias-categorical-color-7: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-categorical-color-8: var( - --spectrum-global-color-static-purple-800 - ); - --spectrum-alias-categorical-color-9: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-categorical-color-10: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-alias-categorical-color-11: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-alias-categorical-color-12: var( - --spectrum-global-color-static-chartreuse-300 - ); - --spectrum-alias-categorical-color-13: var( - --spectrum-global-color-static-blue-200 - ); - --spectrum-alias-categorical-color-14: var( - --spectrum-global-color-static-fuchsia-500 - ); - --spectrum-alias-categorical-color-15: var( - --spectrum-global-color-static-magenta-200 - ); - --spectrum-alias-categorical-color-16: var( - --spectrum-global-color-static-yellow-200 - ); + --spectrum-alias-colorhandle-outer-border-color: #0000006b; + --spectrum-alias-transparent-blue-background-color-hover: #0057be26; + --spectrum-alias-transparent-blue-background-color-down: #0048994d; + --spectrum-alias-transparent-blue-background-color-key-focus: var( + --spectrum-alias-transparent-blue-background-color-hover + ); + --spectrum-alias-transparent-blue-background-color-mouse-focus: var( + --spectrum-alias-transparent-blue-background-color-hover + ); + --spectrum-alias-transparent-blue-background-color: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-transparent-red-background-color-hover: #9a000026; + --spectrum-alias-transparent-red-background-color-down: #7c00004d; + --spectrum-alias-transparent-red-background-color-key-focus: var( + --spectrum-alias-transparent-red-background-color-hover + ); + --spectrum-alias-transparent-red-background-color-mouse-focus: var( + --spectrum-alias-transparent-red-background-color-hover + ); + --spectrum-alias-transparent-red-background-color: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-component-text-color-disabled: var( + --spectrum-global-color-gray-500 + ); + --spectrum-alias-component-text-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-component-text-color-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-component-text-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-component-text-color-key-focus: var( + --spectrum-alias-component-text-color-hover + ); + --spectrum-alias-component-text-color-mouse-focus: var( + --spectrum-alias-component-text-color-hover + ); + --spectrum-alias-component-text-color: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-component-text-color-selected-default: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-component-text-color-selected-hover: var( + --spectrum-alias-component-text-color-hover + ); + --spectrum-alias-component-text-color-selected-down: var( + --spectrum-alias-component-text-color-down + ); + --spectrum-alias-component-text-color-selected-key-focus: var( + --spectrum-alias-component-text-color-key-focus + ); + --spectrum-alias-component-text-color-selected-mouse-focus: var( + --spectrum-alias-component-text-color-mouse-focus + ); + --spectrum-alias-component-text-color-selected: var( + --spectrum-alias-component-text-color-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-default: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-component-text-color-emphasized-selected-hover: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-down: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-key-focus: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-error-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-component-text-color-error-hover: var( + --spectrum-semantic-negative-text-color-small-hover + ); + --spectrum-alias-component-text-color-error-down: var( + --spectrum-semantic-negative-text-color-small-down + ); + --spectrum-alias-component-text-color-error-key-focus: var( + --spectrum-semantic-negative-text-color-small-key-focus + ); + --spectrum-alias-component-text-color-error-mouse-focus: var( + --spectrum-semantic-negative-text-color-small-key-focus + ); + --spectrum-alias-component-text-color-error: var( + --spectrum-alias-component-text-color-error-default + ); + --spectrum-alias-component-icon-color-disabled: var( + --spectrum-alias-icon-color-disabled + ); + --spectrum-alias-component-icon-color-default: var( + --spectrum-alias-icon-color + ); + --spectrum-alias-component-icon-color-hover: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-component-icon-color-down: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-component-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-component-icon-color-mouse-focus: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-component-icon-color: var( + --spectrum-alias-component-icon-color-default + ); + --spectrum-alias-component-icon-color-selected: var( + --spectrum-alias-icon-color-selected-neutral-subdued + ); + --spectrum-alias-component-icon-color-emphasized-selected-default: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-component-icon-color-emphasized-selected-hover: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-icon-color-emphasized-selected-down: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-icon-color-emphasized-selected: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-quiet-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet-selected-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-component-background-color-default: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-component-background-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-component-background-color-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-component-background-color: var( + --spectrum-alias-component-background-color-default + ); + --spectrum-alias-component-background-color-selected-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-selected-hover: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-selected-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-selected-key-focus: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-selected: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-background-color-quiet-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet-hover: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet-down: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-component-background-color-quiet-key-focus: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet: var( + --spectrum-alias-component-background-color-quiet-default + ); + --spectrum-alias-component-background-color-quiet-selected-default: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-background-color-quiet-selected-hover: var( + --spectrum-alias-component-background-color-selected-hover + ); + --spectrum-alias-component-background-color-quiet-selected-down: var( + --spectrum-alias-component-background-color-selected-down + ); + --spectrum-alias-component-background-color-quiet-selected-key-focus: var( + --spectrum-alias-component-background-color-selected-key-focus + ); + --spectrum-alias-component-background-color-quiet-selected: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-background-color-emphasized-selected-default: var( + --spectrum-semantic-cta-background-color-default + ); + --spectrum-alias-component-background-color-emphasized-selected-hover: var( + --spectrum-semantic-cta-background-color-hover + ); + --spectrum-alias-component-background-color-emphasized-selected-down: var( + --spectrum-semantic-cta-background-color-down + ); + --spectrum-alias-component-background-color-emphasized-selected-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus + ); + --spectrum-alias-component-background-color-emphasized-selected: var( + --spectrum-alias-component-background-color-emphasized-selected-default + ); + --spectrum-alias-component-border-color-disabled: var( + --spectrum-alias-border-color-disabled + ); + --spectrum-alias-component-border-color-quiet-disabled: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-default: var( + --spectrum-alias-border-color + ); + --spectrum-alias-component-border-color-hover: var( + --spectrum-alias-border-color-hover + ); + --spectrum-alias-component-border-color-down: var( + --spectrum-alias-border-color-down + ); + --spectrum-alias-component-border-color-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-component-border-color: var( + --spectrum-alias-component-border-color-default + ); + --spectrum-alias-component-border-color-selected-default: var( + --spectrum-alias-border-color + ); + --spectrum-alias-component-border-color-selected-hover: var( + --spectrum-alias-border-color-hover + ); + --spectrum-alias-component-border-color-selected-down: var( + --spectrum-alias-border-color-down + ); + --spectrum-alias-component-border-color-selected-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-component-border-color-selected: var( + --spectrum-alias-component-border-color-selected-default + ); + --spectrum-alias-component-border-color-quiet-default: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-quiet-hover: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-quiet-down: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-quiet-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-component-border-color-quiet: var( + --spectrum-alias-component-border-color-quiet-default + ); + --spectrum-alias-component-border-color-quiet-selected-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-border-color-quiet-selected-hover: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-border-color-quiet-selected-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-border-color-quiet-selected-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-component-border-color-quiet-selected: var( + --spectrum-alias-component-border-color-quiet-selected-default + ); + --spectrum-alias-component-border-color-emphasized-selected-default: var( + --spectrum-semantic-cta-background-color-default + ); + --spectrum-alias-component-border-color-emphasized-selected-hover: var( + --spectrum-semantic-cta-background-color-hover + ); + --spectrum-alias-component-border-color-emphasized-selected-down: var( + --spectrum-semantic-cta-background-color-down + ); + --spectrum-alias-component-border-color-emphasized-selected-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus + ); + --spectrum-alias-component-border-color-emphasized-selected: var( + --spectrum-alias-component-border-color-emphasized-selected-default + ); + --spectrum-alias-tag-border-color-default: var( + --spectrum-alias-border-color-darker-default + ); + --spectrum-alias-tag-border-color-hover: var( + --spectrum-alias-border-color-darker-hover + ); + --spectrum-alias-tag-border-color-down: var( + --spectrum-alias-border-color-darker-hover + ); + --spectrum-alias-tag-border-color-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-tag-border-color-error-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-error-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-tag-border-color-error-selected: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-border-color: var( + --spectrum-alias-tag-border-color-default + ); + --spectrum-alias-tag-border-color-disabled: var( + --spectrum-alias-border-color-disabled + ); + --spectrum-alias-tag-border-color-error: var( + --spectrum-alias-tag-border-color-error-default + ); + --spectrum-alias-tag-text-color-default: var( + --spectrum-alias-label-text-color + ); + --spectrum-alias-tag-text-color-hover: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tag-text-color-key-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tag-text-color-disabled: var( + --spectrum-global-color-gray-500 + ); + --spectrum-alias-tag-text-color: var(--spectrum-alias-tag-text-color-default); + --spectrum-alias-tag-text-color-error-default: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-text-color-error-hover: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-key-focus: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error: var( + --spectrum-alias-tag-text-color-error-default + ); + --spectrum-alias-tag-text-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tag-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tag-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tag-icon-color-disabled: var( + --spectrum-alias-icon-color-disabled + ); + --spectrum-alias-tag-icon-color: var(--spectrum-alias-tag-icon-color-default); + --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-icon-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-background-color-default: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-background-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color: var( + --spectrum-alias-tag-background-color-default + ); + --spectrum-alias-tag-background-color-error-default: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-error-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-error-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-background-color-error-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-error: var( + --spectrum-alias-tag-background-color-error-default + ); + --spectrum-alias-tag-background-color-error-selected-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-background-color-error-selected-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-key-focus: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-background-color-error-selected: var( + --spectrum-alias-tag-background-color-error-selected-default + ); + --spectrum-alias-tag-background-color-selected-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-tag-background-color-selected-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-tag-background-color-selected-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-focusring-border-color-default: transparent; + --spectrum-alias-tag-focusring-border-color-key-focus: transparent; + --spectrum-alias-tag-focusring-border-color-disabled: transparent; + --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( + --spectrum-alias-focus-ring-color + ); + --spectrum-alias-tag-focusring-border-color: var( + --spectrum-alias-tag-focusring-border-color-default + ); + --spectrum-alias-avatar-border-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-hover: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-down: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-key-focus: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color: var( + --spectrum-alias-avatar-border-color-default + ); + --spectrum-alias-avatar-border-color-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-hover: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-down: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-key-focus: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected: var( + --spectrum-alias-avatar-border-color-selected-default + ); + --spectrum-alias-avatar-border-color-selected-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-toggle-background-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-toggle-background-color-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-background-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-toggle-background-color-key-focus: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-background-color: var( + --spectrum-alias-toggle-background-color-default + ); + --spectrum-alias-toggle-background-color-emphasized-selected-default: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-toggle-background-color-emphasized-selected: var( + --spectrum-alias-toggle-background-color-emphasized-selected-default + ); + --spectrum-alias-toggle-border-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-toggle-border-color-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-border-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-toggle-border-color-key-focus: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-border-color: var( + --spectrum-alias-toggle-border-color-default + ); + --spectrum-alias-toggle-icon-color-selected: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-toggle-icon-color-emphasized-selected: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-button-primary-background-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-button-primary-background-color-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-button-primary-background-color-key-focus: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color: var( + --spectrum-alias-button-primary-background-color-default + ); + --spectrum-alias-button-primary-border-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-border-color-hover: var( + --spectrum-alias-button-primary-background-color-hover + ); + --spectrum-alias-button-primary-border-color-down: var( + --spectrum-alias-button-primary-background-color-down + ); + --spectrum-alias-button-primary-border-color-key-focus: var( + --spectrum-alias-button-primary-background-color-key-focus + ); + --spectrum-alias-button-primary-border-color: var( + --spectrum-alias-button-primary-border-color-default + ); + --spectrum-alias-button-primary-text-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-primary-icon-color-default: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-primary-icon-color-hover: var( + --spectrum-alias-button-primary-text-color-hover + ); + --spectrum-alias-button-primary-icon-color-down: var( + --spectrum-alias-button-primary-text-color-down + ); + --spectrum-alias-button-primary-icon-color-key-focus: var( + --spectrum-alias-button-primary-text-color-key-focus + ); + --spectrum-alias-button-primary-icon-color: var( + --spectrum-alias-button-primary-icon-color-default + ); + --spectrum-alias-button-secondary-background-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-button-secondary-background-color-hover: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color-down: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-secondary-background-color-key-focus: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color: var( + --spectrum-alias-button-secondary-background-color-default + ); + --spectrum-alias-button-secondary-border-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-border-color-hover: var( + --spectrum-alias-button-secondary-background-color-hover + ); + --spectrum-alias-button-secondary-border-color-down: var( + --spectrum-alias-button-secondary-background-color-down + ); + --spectrum-alias-button-secondary-border-color-key-focus: var( + --spectrum-alias-button-secondary-background-color-key-focus + ); + --spectrum-alias-button-secondary-border-color: var( + --spectrum-alias-button-secondary-border-color-default + ); + --spectrum-alias-button-secondary-text-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-secondary-icon-color-default: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-secondary-icon-color-hover: var( + --spectrum-alias-button-secondary-text-color-hover + ); + --spectrum-alias-button-secondary-icon-color-down: var( + --spectrum-alias-button-secondary-text-color-down + ); + --spectrum-alias-button-secondary-icon-color-key-focus: var( + --spectrum-alias-button-secondary-text-color-key-focus + ); + --spectrum-alias-button-secondary-icon-color: var( + --spectrum-alias-button-secondary-icon-color-default + ); + --spectrum-alias-button-negative-background-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-button-negative-background-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-background-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color: var( + --spectrum-alias-button-negative-background-color-default + ); + --spectrum-alias-button-negative-border-color-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-border-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color: var( + --spectrum-alias-button-negative-border-color-default + ); + --spectrum-alias-button-negative-text-color-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color: var( + --spectrum-alias-button-negative-text-color-default + ); + --spectrum-alias-button-negative-icon-color-default: var( + --spectrum-alias-button-negative-text-color-default + ); + --spectrum-alias-button-negative-icon-color-hover: var( + --spectrum-alias-button-negative-text-color-hover + ); + --spectrum-alias-button-negative-icon-color-down: var( + --spectrum-alias-button-negative-text-color-down + ); + --spectrum-alias-button-negative-icon-color-key-focus: var( + --spectrum-alias-button-negative-text-color-key-focus + ); + --spectrum-alias-button-negative-icon-color: var( + --spectrum-alias-button-negative-icon-color-default + ); + --spectrum-alias-input-border-color-disabled: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-input-border-color-quiet-disabled: var( + --spectrum-alias-border-color-mid + ); + --spectrum-alias-input-border-color-default: var( + --spectrum-alias-border-color + ); + --spectrum-alias-input-border-color-hover: var( + --spectrum-alias-border-color-hover + ); + --spectrum-alias-input-border-color-down: var( + --spectrum-alias-border-color-mouse-focus + ); + --spectrum-alias-input-border-color-mouse-focus: var( + --spectrum-alias-border-color-mouse-focus + ); + --spectrum-alias-input-border-color-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-input-border-color: var( + --spectrum-alias-input-border-color-default + ); + --spectrum-alias-input-border-color-invalid-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-input-border-color-invalid-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-input-border-color-invalid-down: var( + --spectrum-semantic-negative-color-down + ); + --spectrum-alias-input-border-color-invalid-mouse-focus: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-input-border-color-invalid-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-input-border-color-invalid: var( + --spectrum-alias-input-border-color-invalid-default + ); + --spectrum-alias-background-color-yellow-default: var( + --spectrum-global-color-static-yellow-300 + ); + --spectrum-alias-background-color-yellow-hover: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-alias-background-color-yellow-key-focus: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-alias-background-color-yellow-down: var( + --spectrum-global-color-static-yellow-500 + ); + --spectrum-alias-background-color-yellow: var( + --spectrum-alias-background-color-yellow-default + ); + --spectrum-alias-infieldbutton-background-color: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-infieldbutton-fill-border-color-default: var( + --spectrum-alias-input-border-color-default + ); + --spectrum-alias-infieldbutton-fill-border-color-hover: var( + --spectrum-alias-input-border-color-hover + ); + --spectrum-alias-infieldbutton-fill-border-color-down: var( + --spectrum-alias-input-border-color-down + ); + --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var( + --spectrum-alias-input-border-color-mouse-focus + ); + --spectrum-alias-infieldbutton-fill-border-color-key-focus: var( + --spectrum-alias-input-border-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( + --spectrum-alias-component-background-color-default + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( + --spectrum-alias-component-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( + --spectrum-alias-component-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( + --spectrum-alias-component-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006; + --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3; + --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; + --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; + --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6; + --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3; + --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; + --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; + --spectrum-alias-tabs-divider-background-color-default: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-tabs-divider-background-color-quiet: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-tabitem-text-color-default: var( + --spectrum-alias-label-text-color + ); + --spectrum-alias-tabitem-text-color-hover: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tabitem-text-color-down: var( + --spectrum-alias-text-color-down + ); + --spectrum-alias-tabitem-text-color-key-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tabitem-text-color-mouse-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tabitem-text-color: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-text-color-selected-default: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tabitem-text-color-selected-hover: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected-down: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected-key-focus: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected-mouse-focus: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-default: var( + --spectrum-global-color-static-blue-500 + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-down: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-selection-indicator-color-default: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-selection-indicator-color-emphasized: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-icon-color-disabled: var( + --spectrum-alias-text-color-disabled + ); + --spectrum-alias-tabitem-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tabitem-icon-color-hover: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tabitem-icon-color-down: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-tabitem-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tabitem-icon-color-mouse-focus: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-tabitem-icon-color: var( + --spectrum-alias-tabitem-icon-color-default + ); + --spectrum-alias-tabitem-icon-color-selected: var( + --spectrum-alias-icon-color-selected-neutral + ); + --spectrum-alias-tabitem-icon-color-emphasized: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-icon-color-emphasized-selected: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a; + --spectrum-alias-assetcard-border-color-selected: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-assetcard-border-color-selected-hover: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-assetcard-border-color-selected-down: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-background-color-default: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-background-color-transparent: transparent; + --spectrum-alias-background-color-overbackground-down: #fff3; + --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; + --spectrum-alias-background-color-quiet-overbackground-down: #fff3; + --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; + --spectrum-alias-background-color-quickactions-overlay: #0003; + --spectrum-alias-placeholder-text-color: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-placeholder-text-color-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-placeholder-text-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-placeholder-text-color-selected: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); + --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-mouse-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); + --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-selected-neutral: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-text-color-overbackground: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-text-color-overbackground-disabled: #fff3; + --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; + --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); + --spectrum-alias-link-primary-text-color-default: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-link-primary-text-color-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-link-primary-text-color-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-alias-link-primary-text-color-key-focus: var( + --spectrum-alias-text-color-key-focus + ); + --spectrum-alias-link-primary-text-color: var( + --spectrum-alias-link-primary-text-color-default + ); + --spectrum-alias-link-secondary-text-color-default: var( + --spectrum-alias-link-primary-text-color-default + ); + --spectrum-alias-link-secondary-text-color-hover: var( + --spectrum-alias-link-primary-text-color-hover + ); + --spectrum-alias-link-secondary-text-color-down: var( + --spectrum-alias-link-primary-text-color-down + ); + --spectrum-alias-link-secondary-text-color-key-focus: var( + --spectrum-alias-link-primary-text-color-key-focus + ); + --spectrum-alias-link-secondary-text-color: var( + --spectrum-alias-link-secondary-text-color-default + ); + --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-key-focus: var( + --spectrum-global-color-blue-400 + ); + --spectrum-alias-border-color-mouse-focus: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-extralight: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); + --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-darker-default: var( + --spectrum-global-color-gray-600 + ); + --spectrum-alias-border-color-darker-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-border-color-darker-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-border-color-transparent: transparent; + --spectrum-alias-border-color-translucent-dark: #0000000d; + --spectrum-alias-border-color-translucent-darker: #0000001a; + --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); + --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); + --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-track-fill-color-overbackground: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300); + --spectrum-alias-thumbnail-darksquare-background-color: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-thumbnail-lightsquare-background-color: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-track-color-overbackground: #fff3; + --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-icon-color-overbackground: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); + --spectrum-alias-icon-color-overbackground-disabled: #fff3; + --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; + --spectrum-alias-icon-color-selected-neutral: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-icon-color-selected-neutral-subdued: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-icon-color-selected-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-icon-color-selected-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-alias-icon-color-selected-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-image-opacity-disabled: var( + --spectrum-global-color-opacity-30 + ); + --spectrum-alias-toolbar-background-color: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-code-highlight-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-code-highlight-background-color: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-code-highlight-color-keyword: var( + --spectrum-global-color-fuchsia-600 + ); + --spectrum-alias-code-highlight-color-section: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-code-highlight-color-literal: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-code-highlight-color-attribute: var( + --spectrum-global-color-seafoam-600 + ); + --spectrum-alias-code-highlight-color-class: var( + --spectrum-global-color-magenta-600 + ); + --spectrum-alias-code-highlight-color-variable: var( + --spectrum-global-color-purple-600 + ); + --spectrum-alias-code-highlight-color-title: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-code-highlight-color-string: var( + --spectrum-global-color-fuchsia-600 + ); + --spectrum-alias-code-highlight-color-function: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-code-highlight-color-comment: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-categorical-color-1: var( + --spectrum-global-color-static-seafoam-200 + ); + --spectrum-alias-categorical-color-2: var( + --spectrum-global-color-static-indigo-700 + ); + --spectrum-alias-categorical-color-3: var( + --spectrum-global-color-static-orange-500 + ); + --spectrum-alias-categorical-color-4: var( + --spectrum-global-color-static-magenta-500 + ); + --spectrum-alias-categorical-color-5: var( + --spectrum-global-color-static-indigo-200 + ); + --spectrum-alias-categorical-color-6: var( + --spectrum-global-color-static-celery-200 + ); + --spectrum-alias-categorical-color-7: var( + --spectrum-global-color-static-blue-500 + ); + --spectrum-alias-categorical-color-8: var( + --spectrum-global-color-static-purple-800 + ); + --spectrum-alias-categorical-color-9: var( + --spectrum-global-color-static-yellow-500 + ); + --spectrum-alias-categorical-color-10: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-alias-categorical-color-11: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-alias-categorical-color-12: var( + --spectrum-global-color-static-chartreuse-300 + ); + --spectrum-alias-categorical-color-13: var( + --spectrum-global-color-static-blue-200 + ); + --spectrum-alias-categorical-color-14: var( + --spectrum-global-color-static-fuchsia-500 + ); + --spectrum-alias-categorical-color-15: var( + --spectrum-global-color-static-magenta-200 + ); + --spectrum-alias-categorical-color-16: var( + --spectrum-global-color-static-yellow-200 + ); } diff --git a/tools/styles/spectrum-scale-large.css b/tools/styles/spectrum-scale-large.css index 42038762ff..4ee6ecb975 100644 --- a/tools/styles/spectrum-scale-large.css +++ b/tools/styles/spectrum-scale-large.css @@ -1,291 +1,291 @@ :root, :host { - --spectrum-global-dimension-scale-factor: 1.25; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 3px; - --spectrum-global-dimension-size-40: 4px; - --spectrum-global-dimension-size-50: 5px; - --spectrum-global-dimension-size-65: 6px; - --spectrum-global-dimension-size-75: 8px; - --spectrum-global-dimension-size-85: 9px; - --spectrum-global-dimension-size-100: 10px; - --spectrum-global-dimension-size-115: 11px; - --spectrum-global-dimension-size-125: 13px; - --spectrum-global-dimension-size-130: 14px; - --spectrum-global-dimension-size-150: 15px; - --spectrum-global-dimension-size-160: 16px; - --spectrum-global-dimension-size-175: 18px; - --spectrum-global-dimension-size-185: 19px; - --spectrum-global-dimension-size-200: 20px; - --spectrum-global-dimension-size-225: 22px; - --spectrum-global-dimension-size-250: 25px; - --spectrum-global-dimension-size-275: 28px; - --spectrum-global-dimension-size-300: 30px; - --spectrum-global-dimension-size-325: 32px; - --spectrum-global-dimension-size-350: 35px; - --spectrum-global-dimension-size-400: 40px; - --spectrum-global-dimension-size-450: 45px; - --spectrum-global-dimension-size-500: 50px; - --spectrum-global-dimension-size-550: 56px; - --spectrum-global-dimension-size-600: 60px; - --spectrum-global-dimension-size-650: 65px; - --spectrum-global-dimension-size-675: 68px; - --spectrum-global-dimension-size-700: 70px; - --spectrum-global-dimension-size-750: 75px; - --spectrum-global-dimension-size-800: 80px; - --spectrum-global-dimension-size-900: 90px; - --spectrum-global-dimension-size-1000: 100px; - --spectrum-global-dimension-size-1125: 112px; - --spectrum-global-dimension-size-1200: 120px; - --spectrum-global-dimension-size-1250: 125px; - --spectrum-global-dimension-size-1600: 160px; - --spectrum-global-dimension-size-1700: 170px; - --spectrum-global-dimension-size-1800: 180px; - --spectrum-global-dimension-size-2000: 200px; - --spectrum-global-dimension-size-2400: 240px; - --spectrum-global-dimension-size-2500: 250px; - --spectrum-global-dimension-size-3000: 300px; - --spectrum-global-dimension-size-3400: 340px; - --spectrum-global-dimension-size-3600: 360px; - --spectrum-global-dimension-size-4600: 460px; - --spectrum-global-dimension-size-5000: 500px; - --spectrum-global-dimension-size-6000: 600px; - --spectrum-global-dimension-font-size-25: 12px; - --spectrum-global-dimension-font-size-50: 13px; - --spectrum-global-dimension-font-size-75: 15px; - --spectrum-global-dimension-font-size-100: 17px; - --spectrum-global-dimension-font-size-150: 18px; - --spectrum-global-dimension-font-size-200: 19px; - --spectrum-global-dimension-font-size-300: 22px; - --spectrum-global-dimension-font-size-400: 24px; - --spectrum-global-dimension-font-size-500: 27px; - --spectrum-global-dimension-font-size-600: 31px; - --spectrum-global-dimension-font-size-700: 34px; - --spectrum-global-dimension-font-size-800: 39px; - --spectrum-global-dimension-font-size-900: 44px; - --spectrum-global-dimension-font-size-1000: 49px; - --spectrum-global-dimension-font-size-1100: 55px; - --spectrum-global-dimension-font-size-1200: 62px; - --spectrum-global-dimension-font-size-1300: 70px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; - --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-item-control-3-width-l: 41px; - --spectrum-alias-item-control-3-width-xl: 46px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-three-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-control-three-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-control-three-width-l: 41px; - --spectrum-alias-control-three-width-xl: 46px; - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-avatar-size-100: 26px; - --spectrum-alias-avatar-size-400: 36px; - --spectrum-alias-avatar-size-600: 46px; - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-colorwheel-min-width: var( - --spectrum-global-dimension-static-size-2600 - ); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-xs-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-75 - ); + --spectrum-global-dimension-scale-factor: 1.25; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 3px; + --spectrum-global-dimension-size-40: 4px; + --spectrum-global-dimension-size-50: 5px; + --spectrum-global-dimension-size-65: 6px; + --spectrum-global-dimension-size-75: 8px; + --spectrum-global-dimension-size-85: 9px; + --spectrum-global-dimension-size-100: 10px; + --spectrum-global-dimension-size-115: 11px; + --spectrum-global-dimension-size-125: 13px; + --spectrum-global-dimension-size-130: 14px; + --spectrum-global-dimension-size-150: 15px; + --spectrum-global-dimension-size-160: 16px; + --spectrum-global-dimension-size-175: 18px; + --spectrum-global-dimension-size-185: 19px; + --spectrum-global-dimension-size-200: 20px; + --spectrum-global-dimension-size-225: 22px; + --spectrum-global-dimension-size-250: 25px; + --spectrum-global-dimension-size-275: 28px; + --spectrum-global-dimension-size-300: 30px; + --spectrum-global-dimension-size-325: 32px; + --spectrum-global-dimension-size-350: 35px; + --spectrum-global-dimension-size-400: 40px; + --spectrum-global-dimension-size-450: 45px; + --spectrum-global-dimension-size-500: 50px; + --spectrum-global-dimension-size-550: 56px; + --spectrum-global-dimension-size-600: 60px; + --spectrum-global-dimension-size-650: 65px; + --spectrum-global-dimension-size-675: 68px; + --spectrum-global-dimension-size-700: 70px; + --spectrum-global-dimension-size-750: 75px; + --spectrum-global-dimension-size-800: 80px; + --spectrum-global-dimension-size-900: 90px; + --spectrum-global-dimension-size-1000: 100px; + --spectrum-global-dimension-size-1125: 112px; + --spectrum-global-dimension-size-1200: 120px; + --spectrum-global-dimension-size-1250: 125px; + --spectrum-global-dimension-size-1600: 160px; + --spectrum-global-dimension-size-1700: 170px; + --spectrum-global-dimension-size-1800: 180px; + --spectrum-global-dimension-size-2000: 200px; + --spectrum-global-dimension-size-2400: 240px; + --spectrum-global-dimension-size-2500: 250px; + --spectrum-global-dimension-size-3000: 300px; + --spectrum-global-dimension-size-3400: 340px; + --spectrum-global-dimension-size-3600: 360px; + --spectrum-global-dimension-size-4600: 460px; + --spectrum-global-dimension-size-5000: 500px; + --spectrum-global-dimension-size-6000: 600px; + --spectrum-global-dimension-font-size-25: 12px; + --spectrum-global-dimension-font-size-50: 13px; + --spectrum-global-dimension-font-size-75: 15px; + --spectrum-global-dimension-font-size-100: 17px; + --spectrum-global-dimension-font-size-150: 18px; + --spectrum-global-dimension-font-size-200: 19px; + --spectrum-global-dimension-font-size-300: 22px; + --spectrum-global-dimension-font-size-400: 24px; + --spectrum-global-dimension-font-size-500: 27px; + --spectrum-global-dimension-font-size-600: 31px; + --spectrum-global-dimension-font-size-700: 34px; + --spectrum-global-dimension-font-size-800: 39px; + --spectrum-global-dimension-font-size-900: 44px; + --spectrum-global-dimension-font-size-1000: 49px; + --spectrum-global-dimension-font-size-1100: 55px; + --spectrum-global-dimension-font-size-1200: 62px; + --spectrum-global-dimension-font-size-1300: 70px; + --spectrum-alias-item-text-padding-top-l: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-text-padding-bottom-s: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-workflow-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; + --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; + --spectrum-alias-item-mark-padding-top-m: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-mark-padding-bottom-m: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-mark-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-1-size-l: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-1-size-xl: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-2-size-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-3-height-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-3-width-s: var( + --spectrum-global-dimension-size-325 + ); + --spectrum-alias-item-control-3-width-m: var( + --spectrum-global-dimension-static-size-450 + ); + --spectrum-alias-item-control-3-width-l: 41px; + --spectrum-alias-item-control-3-width-xl: 46px; + --spectrum-alias-item-mark-size-m: var( + --spectrum-global-dimension-static-size-325 + ); + --spectrum-alias-component-focusring-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-control-two-size-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-control-three-height-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-control-three-width-s: var( + --spectrum-global-dimension-size-325 + ); + --spectrum-alias-control-three-width-m: var( + --spectrum-global-dimension-static-size-450 + ); + --spectrum-alias-control-three-width-l: 41px; + --spectrum-alias-control-three-width-xl: 46px; + --spectrum-alias-search-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-focus-ring-border-radius-regular: var( + --spectrum-global-dimension-static-size-115 + ); + --spectrum-alias-focus-ring-radius-default: var( + --spectrum-global-dimension-static-size-115 + ); + --spectrum-alias-workflow-icon-size-l: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-ui-icon-chevron-size-75: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-chevron-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-chevron-size-200: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-chevron-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-chevron-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-chevron-size-500: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-checkmark-size-50: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-checkmark-size-75: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-checkmark-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-checkmark-size-200: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-checkmark-size-500: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-checkmark-size-600: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-ui-icon-dash-size-50: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-dash-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-dash-size-100: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-dash-size-200: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-dash-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-dash-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-dash-size-500: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-dash-size-600: var( + --spectrum-global-dimension-static-size-275 + ); + --spectrum-alias-ui-icon-cross-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-cross-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-cross-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-cross-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-cross-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-cross-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-cross-size-600: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-arrow-size-75: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-arrow-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-arrow-size-200: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-arrow-size-500: var( + --spectrum-global-dimension-static-size-275 + ); + --spectrum-alias-ui-icon-arrow-size-600: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-ui-icon-cornertriangle-size-100: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-ui-icon-cornertriangle-size-300: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-asterisk-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-asterisk-size-300: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-avatar-size-100: 26px; + --spectrum-alias-avatar-size-400: 36px; + --spectrum-alias-avatar-size-600: 46px; + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-tag-focusring-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-colorwheel-min-width: var( + --spectrum-global-dimension-static-size-2600 + ); + --spectrum-dialog-confirm-title-text-size: var( + --spectrum-alias-heading-xs-text-size + ); + --spectrum-dialog-confirm-description-text-size: var( + --spectrum-global-dimension-font-size-75 + ); } diff --git a/tools/styles/spectrum-scale-medium.css b/tools/styles/spectrum-scale-medium.css index 67c09f4f63..80e28a3e7b 100644 --- a/tools/styles/spectrum-scale-medium.css +++ b/tools/styles/spectrum-scale-medium.css @@ -1,287 +1,285 @@ :root, :host { - --spectrum-global-dimension-scale-factor: 1; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 2px; - --spectrum-global-dimension-size-40: 3px; - --spectrum-global-dimension-size-50: 4px; - --spectrum-global-dimension-size-65: 5px; - --spectrum-global-dimension-size-75: 6px; - --spectrum-global-dimension-size-85: 7px; - --spectrum-global-dimension-size-100: 8px; - --spectrum-global-dimension-size-115: 9px; - --spectrum-global-dimension-size-125: 10px; - --spectrum-global-dimension-size-130: 11px; - --spectrum-global-dimension-size-150: 12px; - --spectrum-global-dimension-size-160: 13px; - --spectrum-global-dimension-size-175: 14px; - --spectrum-global-dimension-size-185: 15px; - --spectrum-global-dimension-size-200: 16px; - --spectrum-global-dimension-size-225: 18px; - --spectrum-global-dimension-size-250: 20px; - --spectrum-global-dimension-size-275: 22px; - --spectrum-global-dimension-size-300: 24px; - --spectrum-global-dimension-size-325: 26px; - --spectrum-global-dimension-size-350: 28px; - --spectrum-global-dimension-size-400: 32px; - --spectrum-global-dimension-size-450: 36px; - --spectrum-global-dimension-size-500: 40px; - --spectrum-global-dimension-size-550: 44px; - --spectrum-global-dimension-size-600: 48px; - --spectrum-global-dimension-size-650: 52px; - --spectrum-global-dimension-size-675: 54px; - --spectrum-global-dimension-size-700: 56px; - --spectrum-global-dimension-size-750: 60px; - --spectrum-global-dimension-size-800: 64px; - --spectrum-global-dimension-size-900: 72px; - --spectrum-global-dimension-size-1000: 80px; - --spectrum-global-dimension-size-1125: 90px; - --spectrum-global-dimension-size-1200: 96px; - --spectrum-global-dimension-size-1250: 100px; - --spectrum-global-dimension-size-1600: 128px; - --spectrum-global-dimension-size-1700: 136px; - --spectrum-global-dimension-size-1800: 144px; - --spectrum-global-dimension-size-2000: 160px; - --spectrum-global-dimension-size-2400: 192px; - --spectrum-global-dimension-size-2500: 200px; - --spectrum-global-dimension-size-3000: 240px; - --spectrum-global-dimension-size-3400: 272px; - --spectrum-global-dimension-size-3600: 288px; - --spectrum-global-dimension-size-4600: 368px; - --spectrum-global-dimension-size-5000: 400px; - --spectrum-global-dimension-size-6000: 480px; - --spectrum-global-dimension-font-size-25: 10px; - --spectrum-global-dimension-font-size-50: 11px; - --spectrum-global-dimension-font-size-75: 12px; - --spectrum-global-dimension-font-size-100: 14px; - --spectrum-global-dimension-font-size-150: 15px; - --spectrum-global-dimension-font-size-200: 16px; - --spectrum-global-dimension-font-size-300: 18px; - --spectrum-global-dimension-font-size-400: 20px; - --spectrum-global-dimension-font-size-500: 22px; - --spectrum-global-dimension-font-size-600: 25px; - --spectrum-global-dimension-font-size-700: 28px; - --spectrum-global-dimension-font-size-800: 32px; - --spectrum-global-dimension-font-size-900: 36px; - --spectrum-global-dimension-font-size-1000: 40px; - --spectrum-global-dimension-font-size-1100: 45px; - --spectrum-global-dimension-font-size-1200: 50px; - --spectrum-global-dimension-font-size-1300: 60px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-width-s: 23px; - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-item-control-3-width-l: 29px; - --spectrum-alias-item-control-3-width-xl: 33px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-three-width-s: 23px; - --spectrum-alias-control-three-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-control-three-width-l: 29px; - --spectrum-alias-control-three-width-xl: 33px; - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); - --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); - --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-s-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-100 - ); + --spectrum-global-dimension-scale-factor: 1; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 2px; + --spectrum-global-dimension-size-40: 3px; + --spectrum-global-dimension-size-50: 4px; + --spectrum-global-dimension-size-65: 5px; + --spectrum-global-dimension-size-75: 6px; + --spectrum-global-dimension-size-85: 7px; + --spectrum-global-dimension-size-100: 8px; + --spectrum-global-dimension-size-115: 9px; + --spectrum-global-dimension-size-125: 10px; + --spectrum-global-dimension-size-130: 11px; + --spectrum-global-dimension-size-150: 12px; + --spectrum-global-dimension-size-160: 13px; + --spectrum-global-dimension-size-175: 14px; + --spectrum-global-dimension-size-185: 15px; + --spectrum-global-dimension-size-200: 16px; + --spectrum-global-dimension-size-225: 18px; + --spectrum-global-dimension-size-250: 20px; + --spectrum-global-dimension-size-275: 22px; + --spectrum-global-dimension-size-300: 24px; + --spectrum-global-dimension-size-325: 26px; + --spectrum-global-dimension-size-350: 28px; + --spectrum-global-dimension-size-400: 32px; + --spectrum-global-dimension-size-450: 36px; + --spectrum-global-dimension-size-500: 40px; + --spectrum-global-dimension-size-550: 44px; + --spectrum-global-dimension-size-600: 48px; + --spectrum-global-dimension-size-650: 52px; + --spectrum-global-dimension-size-675: 54px; + --spectrum-global-dimension-size-700: 56px; + --spectrum-global-dimension-size-750: 60px; + --spectrum-global-dimension-size-800: 64px; + --spectrum-global-dimension-size-900: 72px; + --spectrum-global-dimension-size-1000: 80px; + --spectrum-global-dimension-size-1125: 90px; + --spectrum-global-dimension-size-1200: 96px; + --spectrum-global-dimension-size-1250: 100px; + --spectrum-global-dimension-size-1600: 128px; + --spectrum-global-dimension-size-1700: 136px; + --spectrum-global-dimension-size-1800: 144px; + --spectrum-global-dimension-size-2000: 160px; + --spectrum-global-dimension-size-2400: 192px; + --spectrum-global-dimension-size-2500: 200px; + --spectrum-global-dimension-size-3000: 240px; + --spectrum-global-dimension-size-3400: 272px; + --spectrum-global-dimension-size-3600: 288px; + --spectrum-global-dimension-size-4600: 368px; + --spectrum-global-dimension-size-5000: 400px; + --spectrum-global-dimension-size-6000: 480px; + --spectrum-global-dimension-font-size-25: 10px; + --spectrum-global-dimension-font-size-50: 11px; + --spectrum-global-dimension-font-size-75: 12px; + --spectrum-global-dimension-font-size-100: 14px; + --spectrum-global-dimension-font-size-150: 15px; + --spectrum-global-dimension-font-size-200: 16px; + --spectrum-global-dimension-font-size-300: 18px; + --spectrum-global-dimension-font-size-400: 20px; + --spectrum-global-dimension-font-size-500: 22px; + --spectrum-global-dimension-font-size-600: 25px; + --spectrum-global-dimension-font-size-700: 28px; + --spectrum-global-dimension-font-size-800: 32px; + --spectrum-global-dimension-font-size-900: 36px; + --spectrum-global-dimension-font-size-1000: 40px; + --spectrum-global-dimension-font-size-1100: 45px; + --spectrum-global-dimension-font-size-1200: 50px; + --spectrum-global-dimension-font-size-1300: 60px; + --spectrum-alias-item-text-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-text-padding-bottom-s: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-item-workflow-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-rounded-workflow-padding-left-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; + --spectrum-alias-item-mark-padding-top-m: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-item-mark-padding-bottom-m: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-item-mark-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-1-size-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-1-size-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-2-size-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-height-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-width-s: 23px; + --spectrum-alias-item-control-3-width-m: var( + --spectrum-global-dimension-static-size-325 + ); + --spectrum-alias-item-control-3-width-l: 29px; + --spectrum-alias-item-control-3-width-xl: 33px; + --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250); + --spectrum-alias-component-focusring-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-control-two-size-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-control-three-height-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-control-three-width-s: 23px; + --spectrum-alias-control-three-width-m: var( + --spectrum-global-dimension-static-size-325 + ); + --spectrum-alias-control-three-width-l: 29px; + --spectrum-alias-control-three-width-xl: 33px; + --spectrum-alias-search-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-focus-ring-border-radius-regular: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-focus-ring-radius-default: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-workflow-icon-size-l: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-chevron-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-chevron-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-chevron-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-chevron-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-chevron-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-chevron-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-50: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-checkmark-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-checkmark-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-checkmark-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-checkmark-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-checkmark-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-600: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-dash-size-50: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-dash-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-dash-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-dash-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-dash-size-300: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-dash-size-400: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-dash-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-dash-size-600: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-cross-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-cross-size-100: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-cross-size-200: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-cross-size-300: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-cross-size-400: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-cross-size-500: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-cross-size-600: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-arrow-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-arrow-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-arrow-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-arrow-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-500: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-arrow-size-600: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-ui-icon-cornertriangle-size-100: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-ui-icon-cornertriangle-size-300: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-ui-icon-asterisk-size-200: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-asterisk-size-300: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); + --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); + --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-tag-focusring-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); + --spectrum-dialog-confirm-title-text-size: var( + --spectrum-alias-heading-s-text-size + ); + --spectrum-dialog-confirm-description-text-size: var( + --spectrum-global-dimension-font-size-100 + ); } diff --git a/tools/styles/spectrum-theme-dark.css b/tools/styles/spectrum-theme-dark.css index e677ccfb4d..351c88840e 100644 --- a/tools/styles/spectrum-theme-dark.css +++ b/tools/styles/spectrum-theme-dark.css @@ -1,293 +1,289 @@ :root, :host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 34, 184, 51; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 68, 202, 73; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 105, 220, 99; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 142, 235, 127; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 228, 194, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 244, 213, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 249, 232, 92; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 252, 246, 187; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 237, 87, 149; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 249, 114, 167; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 255, 143, 185; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 243; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 172, 111, 249; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 187, 135, 251; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 202, 159, 252; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 124, 129, 251; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 145, 149, 255; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 167, 170, 255; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 246, 88, 67; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 255, 117, 94; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 255, 149, 129; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 244, 129, 12; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 254, 154, 46; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 255, 181, 88; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 253, 206, 136; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 18, 162, 108; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 43, 180, 125; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 67, 199, 143; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 94, 217, 162; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 52, 143, 244; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 84, 163, 246; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 114, 183, 249; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 143, 202, 252; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 29, 29, 29; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 38, 38, 38; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 50, 50, 50; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 63, 63, 63; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 84, 84, 84; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 112, 112, 112; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 178, 178, 178; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 209, 209, 209; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 235, 235, 235; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 255, 255, 255; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-modal-overlay: #00000080; - --spectrum-alias-dropshadow-color: #00000080; - --spectrum-alias-background-color-hover-overlay: #ffffff0f; - --spectrum-alias-highlight-hover: #ffffff12; - --spectrum-alias-highlight-down: #ffffff1a; - --spectrum-alias-highlight-selected: #54a3f626; - --spectrum-alias-highlight-selected-hover: #54a3f640; - --spectrum-alias-text-highlight-color: #54a3f640; - --spectrum-alias-background-color-quickactions: #323232e6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-border-color-translucent: #ffffff1a; - --spectrum-alias-radial-reaction-color-default: #ebebeb99; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-50 - ); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: 0.9; + --spectrum-global-color-opacity-80: 0.8; + --spectrum-global-color-opacity-70: 0.7; + --spectrum-global-color-opacity-60: 0.6; + --spectrum-global-color-opacity-55: 0.55; + --spectrum-global-color-opacity-50: 0.5; + --spectrum-global-color-opacity-42: 0.42; + --spectrum-global-color-opacity-40: 0.4; + --spectrum-global-color-opacity-30: 0.3; + --spectrum-global-color-opacity-25: 0.25; + --spectrum-global-color-opacity-20: 0.2; + --spectrum-global-color-opacity-15: 0.15; + --spectrum-global-color-opacity-10: 0.1; + --spectrum-global-color-opacity-8: 0.08; + --spectrum-global-color-opacity-7: 0.07; + --spectrum-global-color-opacity-6: 0.06; + --spectrum-global-color-opacity-5: 0.05; + --spectrum-global-color-opacity-4: 0.04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 34, 184, 51; + --spectrum-global-color-celery-400: rgb( + var(--spectrum-global-color-celery-400-rgb) + ); + --spectrum-global-color-celery-500-rgb: 68, 202, 73; + --spectrum-global-color-celery-500: rgb( + var(--spectrum-global-color-celery-500-rgb) + ); + --spectrum-global-color-celery-600-rgb: 105, 220, 99; + --spectrum-global-color-celery-600: rgb( + var(--spectrum-global-color-celery-600-rgb) + ); + --spectrum-global-color-celery-700-rgb: 142, 235, 127; + --spectrum-global-color-celery-700: rgb( + var(--spectrum-global-color-celery-700-rgb) + ); + --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; + --spectrum-global-color-chartreuse-400: rgb( + var(--spectrum-global-color-chartreuse-400-rgb) + ); + --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; + --spectrum-global-color-chartreuse-500: rgb( + var(--spectrum-global-color-chartreuse-500-rgb) + ); + --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; + --spectrum-global-color-chartreuse-600: rgb( + var(--spectrum-global-color-chartreuse-600-rgb) + ); + --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; + --spectrum-global-color-chartreuse-700: rgb( + var(--spectrum-global-color-chartreuse-700-rgb) + ); + --spectrum-global-color-yellow-400-rgb: 228, 194, 0; + --spectrum-global-color-yellow-400: rgb( + var(--spectrum-global-color-yellow-400-rgb) + ); + --spectrum-global-color-yellow-500-rgb: 244, 213, 0; + --spectrum-global-color-yellow-500: rgb( + var(--spectrum-global-color-yellow-500-rgb) + ); + --spectrum-global-color-yellow-600-rgb: 249, 232, 92; + --spectrum-global-color-yellow-600: rgb( + var(--spectrum-global-color-yellow-600-rgb) + ); + --spectrum-global-color-yellow-700-rgb: 252, 246, 187; + --spectrum-global-color-yellow-700: rgb( + var(--spectrum-global-color-yellow-700-rgb) + ); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb( + var(--spectrum-global-color-magenta-400-rgb) + ); + --spectrum-global-color-magenta-500-rgb: 237, 87, 149; + --spectrum-global-color-magenta-500: rgb( + var(--spectrum-global-color-magenta-500-rgb) + ); + --spectrum-global-color-magenta-600-rgb: 249, 114, 167; + --spectrum-global-color-magenta-600: rgb( + var(--spectrum-global-color-magenta-600-rgb) + ); + --spectrum-global-color-magenta-700-rgb: 255, 143, 185; + --spectrum-global-color-magenta-700: rgb( + var(--spectrum-global-color-magenta-700-rgb) + ); + --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; + --spectrum-global-color-fuchsia-400: rgb( + var(--spectrum-global-color-fuchsia-400-rgb) + ); + --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; + --spectrum-global-color-fuchsia-500: rgb( + var(--spectrum-global-color-fuchsia-500-rgb) + ); + --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; + --spectrum-global-color-fuchsia-600: rgb( + var(--spectrum-global-color-fuchsia-600-rgb) + ); + --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; + --spectrum-global-color-fuchsia-700: rgb( + var(--spectrum-global-color-fuchsia-700-rgb) + ); + --spectrum-global-color-purple-400-rgb: 157, 87, 243; + --spectrum-global-color-purple-400: rgb( + var(--spectrum-global-color-purple-400-rgb) + ); + --spectrum-global-color-purple-500-rgb: 172, 111, 249; + --spectrum-global-color-purple-500: rgb( + var(--spectrum-global-color-purple-500-rgb) + ); + --spectrum-global-color-purple-600-rgb: 187, 135, 251; + --spectrum-global-color-purple-600: rgb( + var(--spectrum-global-color-purple-600-rgb) + ); + --spectrum-global-color-purple-700-rgb: 202, 159, 252; + --spectrum-global-color-purple-700: rgb( + var(--spectrum-global-color-purple-700-rgb) + ); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb( + var(--spectrum-global-color-indigo-400-rgb) + ); + --spectrum-global-color-indigo-500-rgb: 124, 129, 251; + --spectrum-global-color-indigo-500: rgb( + var(--spectrum-global-color-indigo-500-rgb) + ); + --spectrum-global-color-indigo-600-rgb: 145, 149, 255; + --spectrum-global-color-indigo-600: rgb( + var(--spectrum-global-color-indigo-600-rgb) + ); + --spectrum-global-color-indigo-700-rgb: 167, 170, 255; + --spectrum-global-color-indigo-700: rgb( + var(--spectrum-global-color-indigo-700-rgb) + ); + --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; + --spectrum-global-color-seafoam-400: rgb( + var(--spectrum-global-color-seafoam-400-rgb) + ); + --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; + --spectrum-global-color-seafoam-500: rgb( + var(--spectrum-global-color-seafoam-500-rgb) + ); + --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; + --spectrum-global-color-seafoam-600: rgb( + var(--spectrum-global-color-seafoam-600-rgb) + ); + --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; + --spectrum-global-color-seafoam-700: rgb( + var(--spectrum-global-color-seafoam-700-rgb) + ); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb( + var(--spectrum-global-color-red-400-rgb) + ); + --spectrum-global-color-red-500-rgb: 246, 88, 67; + --spectrum-global-color-red-500: rgb( + var(--spectrum-global-color-red-500-rgb) + ); + --spectrum-global-color-red-600-rgb: 255, 117, 94; + --spectrum-global-color-red-600: rgb( + var(--spectrum-global-color-red-600-rgb) + ); + --spectrum-global-color-red-700-rgb: 255, 149, 129; + --spectrum-global-color-red-700: rgb( + var(--spectrum-global-color-red-700-rgb) + ); + --spectrum-global-color-orange-400-rgb: 244, 129, 12; + --spectrum-global-color-orange-400: rgb( + var(--spectrum-global-color-orange-400-rgb) + ); + --spectrum-global-color-orange-500-rgb: 254, 154, 46; + --spectrum-global-color-orange-500: rgb( + var(--spectrum-global-color-orange-500-rgb) + ); + --spectrum-global-color-orange-600-rgb: 255, 181, 88; + --spectrum-global-color-orange-600: rgb( + var(--spectrum-global-color-orange-600-rgb) + ); + --spectrum-global-color-orange-700-rgb: 253, 206, 136; + --spectrum-global-color-orange-700: rgb( + var(--spectrum-global-color-orange-700-rgb) + ); + --spectrum-global-color-green-400-rgb: 18, 162, 108; + --spectrum-global-color-green-400: rgb( + var(--spectrum-global-color-green-400-rgb) + ); + --spectrum-global-color-green-500-rgb: 43, 180, 125; + --spectrum-global-color-green-500: rgb( + var(--spectrum-global-color-green-500-rgb) + ); + --spectrum-global-color-green-600-rgb: 67, 199, 143; + --spectrum-global-color-green-600: rgb( + var(--spectrum-global-color-green-600-rgb) + ); + --spectrum-global-color-green-700-rgb: 94, 217, 162; + --spectrum-global-color-green-700: rgb( + var(--spectrum-global-color-green-700-rgb) + ); + --spectrum-global-color-blue-400-rgb: 52, 143, 244; + --spectrum-global-color-blue-400: rgb( + var(--spectrum-global-color-blue-400-rgb) + ); + --spectrum-global-color-blue-500-rgb: 84, 163, 246; + --spectrum-global-color-blue-500: rgb( + var(--spectrum-global-color-blue-500-rgb) + ); + --spectrum-global-color-blue-600-rgb: 114, 183, 249; + --spectrum-global-color-blue-600: rgb( + var(--spectrum-global-color-blue-600-rgb) + ); + --spectrum-global-color-blue-700-rgb: 143, 202, 252; + --spectrum-global-color-blue-700: rgb( + var(--spectrum-global-color-blue-700-rgb) + ); + --spectrum-global-color-gray-50-rgb: 29, 29, 29; + --spectrum-global-color-gray-50: rgb( + var(--spectrum-global-color-gray-50-rgb) + ); + --spectrum-global-color-gray-75-rgb: 38, 38, 38; + --spectrum-global-color-gray-75: rgb( + var(--spectrum-global-color-gray-75-rgb) + ); + --spectrum-global-color-gray-100-rgb: 50, 50, 50; + --spectrum-global-color-gray-100: rgb( + var(--spectrum-global-color-gray-100-rgb) + ); + --spectrum-global-color-gray-200-rgb: 63, 63, 63; + --spectrum-global-color-gray-200: rgb( + var(--spectrum-global-color-gray-200-rgb) + ); + --spectrum-global-color-gray-300-rgb: 84, 84, 84; + --spectrum-global-color-gray-300: rgb( + var(--spectrum-global-color-gray-300-rgb) + ); + --spectrum-global-color-gray-400-rgb: 112, 112, 112; + --spectrum-global-color-gray-400: rgb( + var(--spectrum-global-color-gray-400-rgb) + ); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb( + var(--spectrum-global-color-gray-500-rgb) + ); + --spectrum-global-color-gray-600-rgb: 178, 178, 178; + --spectrum-global-color-gray-600: rgb( + var(--spectrum-global-color-gray-600-rgb) + ); + --spectrum-global-color-gray-700-rgb: 209, 209, 209; + --spectrum-global-color-gray-700: rgb( + var(--spectrum-global-color-gray-700-rgb) + ); + --spectrum-global-color-gray-800-rgb: 235, 235, 235; + --spectrum-global-color-gray-800: rgb( + var(--spectrum-global-color-gray-800-rgb) + ); + --spectrum-global-color-gray-900-rgb: 255, 255, 255; + --spectrum-global-color-gray-900: rgb( + var(--spectrum-global-color-gray-900-rgb) + ); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-modal-overlay: #00000080; + --spectrum-alias-dropshadow-color: #00000080; + --spectrum-alias-background-color-hover-overlay: #ffffff0f; + --spectrum-alias-highlight-hover: #ffffff12; + --spectrum-alias-highlight-down: #ffffff1a; + --spectrum-alias-highlight-selected: #54a3f626; + --spectrum-alias-highlight-selected-hover: #54a3f640; + --spectrum-alias-text-highlight-color: #54a3f640; + --spectrum-alias-background-color-quickactions: #323232e6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-border-color-translucent: #ffffff1a; + --spectrum-alias-radial-reaction-color-default: #ebebeb99; + --spectrum-alias-pasteboard-background-color: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-separator-color: var( + --spectrum-global-color-gray-50 + ); } diff --git a/tools/styles/spectrum-theme-darkest.css b/tools/styles/spectrum-theme-darkest.css index 9092657aa7..529a7e08b2 100644 --- a/tools/styles/spectrum-theme-darkest.css +++ b/tools/styles/spectrum-theme-darkest.css @@ -1,293 +1,289 @@ :root, :host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 13, 171, 37; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 45, 191, 58; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 80, 208, 82; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 115, 224, 107; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 138, 180, 3; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 154, 198, 11; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 170, 216, 22; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 187, 232, 41; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 216, 181, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 233, 199, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 247, 216, 4; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 249, 233, 97; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 209, 43, 114; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 227, 69, 137; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 241, 97, 156; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 252, 124, 173; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 191, 43, 191; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 211, 65, 213; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 228, 91, 229; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 239, 120, 238; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 145, 70, 236; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 162, 94, 246; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 178, 119, 250; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 192, 143, 252; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 90, 96, 235; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 110, 115, 246; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 132, 136, 253; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 153, 157, 255; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 146, 140; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 165, 159; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 26, 185, 178; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 66, 202, 195; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 221, 33, 24; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 238, 67, 49; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 249, 99, 76; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 255, 129, 107; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 232, 116, 0; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 249, 137, 23; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 255, 162, 59; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 255, 188, 102; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 149, 98; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 28, 168, 114; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 52, 187, 132; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 75, 205, 149; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 29, 128, 245; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 64, 150, 243; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 94, 170, 247; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 124, 189, 250; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 0, 0, 0; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 14, 14, 14; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 29, 29, 29; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 48, 48, 48; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 75, 75, 75; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 106, 106, 106; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 141, 141, 141; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 176, 176, 176; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 208, 208, 208; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 235, 235, 235; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 255, 255, 255; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-modal-overlay: #0009; - --spectrum-alias-dropshadow-color: #000c; - --spectrum-alias-background-color-hover-overlay: #ffffff14; - --spectrum-alias-highlight-hover: #ffffff14; - --spectrum-alias-highlight-down: #ffffff26; - --spectrum-alias-highlight-selected: #4096f333; - --spectrum-alias-highlight-selected-hover: #4096f34d; - --spectrum-alias-text-highlight-color: #4096f34d; - --spectrum-alias-background-color-quickactions: #1d1d1de6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-border-color-translucent: #ffffff1a; - --spectrum-alias-radial-reaction-color-default: #ebebeb99; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-50 - ); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: 0.9; + --spectrum-global-color-opacity-80: 0.8; + --spectrum-global-color-opacity-70: 0.7; + --spectrum-global-color-opacity-60: 0.6; + --spectrum-global-color-opacity-55: 0.55; + --spectrum-global-color-opacity-50: 0.5; + --spectrum-global-color-opacity-42: 0.42; + --spectrum-global-color-opacity-40: 0.4; + --spectrum-global-color-opacity-30: 0.3; + --spectrum-global-color-opacity-25: 0.25; + --spectrum-global-color-opacity-20: 0.2; + --spectrum-global-color-opacity-15: 0.15; + --spectrum-global-color-opacity-10: 0.1; + --spectrum-global-color-opacity-8: 0.08; + --spectrum-global-color-opacity-7: 0.07; + --spectrum-global-color-opacity-6: 0.06; + --spectrum-global-color-opacity-5: 0.05; + --spectrum-global-color-opacity-4: 0.04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 13, 171, 37; + --spectrum-global-color-celery-400: rgb( + var(--spectrum-global-color-celery-400-rgb) + ); + --spectrum-global-color-celery-500-rgb: 45, 191, 58; + --spectrum-global-color-celery-500: rgb( + var(--spectrum-global-color-celery-500-rgb) + ); + --spectrum-global-color-celery-600-rgb: 80, 208, 82; + --spectrum-global-color-celery-600: rgb( + var(--spectrum-global-color-celery-600-rgb) + ); + --spectrum-global-color-celery-700-rgb: 115, 224, 107; + --spectrum-global-color-celery-700: rgb( + var(--spectrum-global-color-celery-700-rgb) + ); + --spectrum-global-color-chartreuse-400-rgb: 138, 180, 3; + --spectrum-global-color-chartreuse-400: rgb( + var(--spectrum-global-color-chartreuse-400-rgb) + ); + --spectrum-global-color-chartreuse-500-rgb: 154, 198, 11; + --spectrum-global-color-chartreuse-500: rgb( + var(--spectrum-global-color-chartreuse-500-rgb) + ); + --spectrum-global-color-chartreuse-600-rgb: 170, 216, 22; + --spectrum-global-color-chartreuse-600: rgb( + var(--spectrum-global-color-chartreuse-600-rgb) + ); + --spectrum-global-color-chartreuse-700-rgb: 187, 232, 41; + --spectrum-global-color-chartreuse-700: rgb( + var(--spectrum-global-color-chartreuse-700-rgb) + ); + --spectrum-global-color-yellow-400-rgb: 216, 181, 0; + --spectrum-global-color-yellow-400: rgb( + var(--spectrum-global-color-yellow-400-rgb) + ); + --spectrum-global-color-yellow-500-rgb: 233, 199, 0; + --spectrum-global-color-yellow-500: rgb( + var(--spectrum-global-color-yellow-500-rgb) + ); + --spectrum-global-color-yellow-600-rgb: 247, 216, 4; + --spectrum-global-color-yellow-600: rgb( + var(--spectrum-global-color-yellow-600-rgb) + ); + --spectrum-global-color-yellow-700-rgb: 249, 233, 97; + --spectrum-global-color-yellow-700: rgb( + var(--spectrum-global-color-yellow-700-rgb) + ); + --spectrum-global-color-magenta-400-rgb: 209, 43, 114; + --spectrum-global-color-magenta-400: rgb( + var(--spectrum-global-color-magenta-400-rgb) + ); + --spectrum-global-color-magenta-500-rgb: 227, 69, 137; + --spectrum-global-color-magenta-500: rgb( + var(--spectrum-global-color-magenta-500-rgb) + ); + --spectrum-global-color-magenta-600-rgb: 241, 97, 156; + --spectrum-global-color-magenta-600: rgb( + var(--spectrum-global-color-magenta-600-rgb) + ); + --spectrum-global-color-magenta-700-rgb: 252, 124, 173; + --spectrum-global-color-magenta-700: rgb( + var(--spectrum-global-color-magenta-700-rgb) + ); + --spectrum-global-color-fuchsia-400-rgb: 191, 43, 191; + --spectrum-global-color-fuchsia-400: rgb( + var(--spectrum-global-color-fuchsia-400-rgb) + ); + --spectrum-global-color-fuchsia-500-rgb: 211, 65, 213; + --spectrum-global-color-fuchsia-500: rgb( + var(--spectrum-global-color-fuchsia-500-rgb) + ); + --spectrum-global-color-fuchsia-600-rgb: 228, 91, 229; + --spectrum-global-color-fuchsia-600: rgb( + var(--spectrum-global-color-fuchsia-600-rgb) + ); + --spectrum-global-color-fuchsia-700-rgb: 239, 120, 238; + --spectrum-global-color-fuchsia-700: rgb( + var(--spectrum-global-color-fuchsia-700-rgb) + ); + --spectrum-global-color-purple-400-rgb: 145, 70, 236; + --spectrum-global-color-purple-400: rgb( + var(--spectrum-global-color-purple-400-rgb) + ); + --spectrum-global-color-purple-500-rgb: 162, 94, 246; + --spectrum-global-color-purple-500: rgb( + var(--spectrum-global-color-purple-500-rgb) + ); + --spectrum-global-color-purple-600-rgb: 178, 119, 250; + --spectrum-global-color-purple-600: rgb( + var(--spectrum-global-color-purple-600-rgb) + ); + --spectrum-global-color-purple-700-rgb: 192, 143, 252; + --spectrum-global-color-purple-700: rgb( + var(--spectrum-global-color-purple-700-rgb) + ); + --spectrum-global-color-indigo-400-rgb: 90, 96, 235; + --spectrum-global-color-indigo-400: rgb( + var(--spectrum-global-color-indigo-400-rgb) + ); + --spectrum-global-color-indigo-500-rgb: 110, 115, 246; + --spectrum-global-color-indigo-500: rgb( + var(--spectrum-global-color-indigo-500-rgb) + ); + --spectrum-global-color-indigo-600-rgb: 132, 136, 253; + --spectrum-global-color-indigo-600: rgb( + var(--spectrum-global-color-indigo-600-rgb) + ); + --spectrum-global-color-indigo-700-rgb: 153, 157, 255; + --spectrum-global-color-indigo-700: rgb( + var(--spectrum-global-color-indigo-700-rgb) + ); + --spectrum-global-color-seafoam-400-rgb: 0, 146, 140; + --spectrum-global-color-seafoam-400: rgb( + var(--spectrum-global-color-seafoam-400-rgb) + ); + --spectrum-global-color-seafoam-500-rgb: 0, 165, 159; + --spectrum-global-color-seafoam-500: rgb( + var(--spectrum-global-color-seafoam-500-rgb) + ); + --spectrum-global-color-seafoam-600-rgb: 26, 185, 178; + --spectrum-global-color-seafoam-600: rgb( + var(--spectrum-global-color-seafoam-600-rgb) + ); + --spectrum-global-color-seafoam-700-rgb: 66, 202, 195; + --spectrum-global-color-seafoam-700: rgb( + var(--spectrum-global-color-seafoam-700-rgb) + ); + --spectrum-global-color-red-400-rgb: 221, 33, 24; + --spectrum-global-color-red-400: rgb( + var(--spectrum-global-color-red-400-rgb) + ); + --spectrum-global-color-red-500-rgb: 238, 67, 49; + --spectrum-global-color-red-500: rgb( + var(--spectrum-global-color-red-500-rgb) + ); + --spectrum-global-color-red-600-rgb: 249, 99, 76; + --spectrum-global-color-red-600: rgb( + var(--spectrum-global-color-red-600-rgb) + ); + --spectrum-global-color-red-700-rgb: 255, 129, 107; + --spectrum-global-color-red-700: rgb( + var(--spectrum-global-color-red-700-rgb) + ); + --spectrum-global-color-orange-400-rgb: 232, 116, 0; + --spectrum-global-color-orange-400: rgb( + var(--spectrum-global-color-orange-400-rgb) + ); + --spectrum-global-color-orange-500-rgb: 249, 137, 23; + --spectrum-global-color-orange-500: rgb( + var(--spectrum-global-color-orange-500-rgb) + ); + --spectrum-global-color-orange-600-rgb: 255, 162, 59; + --spectrum-global-color-orange-600: rgb( + var(--spectrum-global-color-orange-600-rgb) + ); + --spectrum-global-color-orange-700-rgb: 255, 188, 102; + --spectrum-global-color-orange-700: rgb( + var(--spectrum-global-color-orange-700-rgb) + ); + --spectrum-global-color-green-400-rgb: 0, 149, 98; + --spectrum-global-color-green-400: rgb( + var(--spectrum-global-color-green-400-rgb) + ); + --spectrum-global-color-green-500-rgb: 28, 168, 114; + --spectrum-global-color-green-500: rgb( + var(--spectrum-global-color-green-500-rgb) + ); + --spectrum-global-color-green-600-rgb: 52, 187, 132; + --spectrum-global-color-green-600: rgb( + var(--spectrum-global-color-green-600-rgb) + ); + --spectrum-global-color-green-700-rgb: 75, 205, 149; + --spectrum-global-color-green-700: rgb( + var(--spectrum-global-color-green-700-rgb) + ); + --spectrum-global-color-blue-400-rgb: 29, 128, 245; + --spectrum-global-color-blue-400: rgb( + var(--spectrum-global-color-blue-400-rgb) + ); + --spectrum-global-color-blue-500-rgb: 64, 150, 243; + --spectrum-global-color-blue-500: rgb( + var(--spectrum-global-color-blue-500-rgb) + ); + --spectrum-global-color-blue-600-rgb: 94, 170, 247; + --spectrum-global-color-blue-600: rgb( + var(--spectrum-global-color-blue-600-rgb) + ); + --spectrum-global-color-blue-700-rgb: 124, 189, 250; + --spectrum-global-color-blue-700: rgb( + var(--spectrum-global-color-blue-700-rgb) + ); + --spectrum-global-color-gray-50-rgb: 0, 0, 0; + --spectrum-global-color-gray-50: rgb( + var(--spectrum-global-color-gray-50-rgb) + ); + --spectrum-global-color-gray-75-rgb: 14, 14, 14; + --spectrum-global-color-gray-75: rgb( + var(--spectrum-global-color-gray-75-rgb) + ); + --spectrum-global-color-gray-100-rgb: 29, 29, 29; + --spectrum-global-color-gray-100: rgb( + var(--spectrum-global-color-gray-100-rgb) + ); + --spectrum-global-color-gray-200-rgb: 48, 48, 48; + --spectrum-global-color-gray-200: rgb( + var(--spectrum-global-color-gray-200-rgb) + ); + --spectrum-global-color-gray-300-rgb: 75, 75, 75; + --spectrum-global-color-gray-300: rgb( + var(--spectrum-global-color-gray-300-rgb) + ); + --spectrum-global-color-gray-400-rgb: 106, 106, 106; + --spectrum-global-color-gray-400: rgb( + var(--spectrum-global-color-gray-400-rgb) + ); + --spectrum-global-color-gray-500-rgb: 141, 141, 141; + --spectrum-global-color-gray-500: rgb( + var(--spectrum-global-color-gray-500-rgb) + ); + --spectrum-global-color-gray-600-rgb: 176, 176, 176; + --spectrum-global-color-gray-600: rgb( + var(--spectrum-global-color-gray-600-rgb) + ); + --spectrum-global-color-gray-700-rgb: 208, 208, 208; + --spectrum-global-color-gray-700: rgb( + var(--spectrum-global-color-gray-700-rgb) + ); + --spectrum-global-color-gray-800-rgb: 235, 235, 235; + --spectrum-global-color-gray-800: rgb( + var(--spectrum-global-color-gray-800-rgb) + ); + --spectrum-global-color-gray-900-rgb: 255, 255, 255; + --spectrum-global-color-gray-900: rgb( + var(--spectrum-global-color-gray-900-rgb) + ); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-modal-overlay: #0009; + --spectrum-alias-dropshadow-color: #000c; + --spectrum-alias-background-color-hover-overlay: #ffffff14; + --spectrum-alias-highlight-hover: #ffffff14; + --spectrum-alias-highlight-down: #ffffff26; + --spectrum-alias-highlight-selected: #4096f333; + --spectrum-alias-highlight-selected-hover: #4096f34d; + --spectrum-alias-text-highlight-color: #4096f34d; + --spectrum-alias-background-color-quickactions: #1d1d1de6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-border-color-translucent: #ffffff1a; + --spectrum-alias-radial-reaction-color-default: #ebebeb99; + --spectrum-alias-pasteboard-background-color: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-separator-color: var( + --spectrum-global-color-gray-50 + ); } diff --git a/tools/styles/spectrum-theme-light.css b/tools/styles/spectrum-theme-light.css index 99414590fb..87288410fd 100644 --- a/tools/styles/spectrum-theme-light.css +++ b/tools/styles/spectrum-theme-light.css @@ -1,293 +1,289 @@ :root, :host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 39, 187, 54; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 7, 167, 33; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 0, 145, 18; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 0, 124, 15; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 232, 198, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 215, 179, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 196, 159, 0; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 176, 140, 0; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 200, 34, 105; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 173, 9, 85; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 142, 0, 69; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 244; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 137, 61, 231; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 115, 38, 211; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 93, 19, 183; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 82, 88, 228; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 64, 70, 202; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 50, 54, 168; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 211, 21, 16; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 180, 0, 0; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 147, 0, 0; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 246, 133, 17; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 228, 111, 0; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 203, 93, 0; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 177, 76, 0; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 143, 93; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 0, 122, 77; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 0, 101, 62; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 0, 81, 50; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 20, 122, 243; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 2, 101, 220; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 0, 84, 182; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 0, 68, 145; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 253, 253, 253; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 248, 248, 248; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 230, 230, 230; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 213, 213, 213; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 177, 177, 177; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 109, 109, 109; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 70, 70, 70; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-background-color-modal-overlay: #0006; - --spectrum-alias-dropshadow-color: #00000026; - --spectrum-alias-background-color-hover-overlay: #0000000a; - --spectrum-alias-highlight-hover: #0000000f; - --spectrum-alias-highlight-down: #0000001a; - --spectrum-alias-highlight-selected: #0265dc1a; - --spectrum-alias-highlight-selected-hover: #0265dc33; - --spectrum-alias-text-highlight-color: #0265dc33; - --spectrum-alias-background-color-quickactions: #f8f8f8e6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-translucent: #0000001a; - --spectrum-alias-radial-reaction-color-default: #2229; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-300 - ); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: 0.9; + --spectrum-global-color-opacity-80: 0.8; + --spectrum-global-color-opacity-70: 0.7; + --spectrum-global-color-opacity-60: 0.6; + --spectrum-global-color-opacity-55: 0.55; + --spectrum-global-color-opacity-50: 0.5; + --spectrum-global-color-opacity-42: 0.42; + --spectrum-global-color-opacity-40: 0.4; + --spectrum-global-color-opacity-30: 0.3; + --spectrum-global-color-opacity-25: 0.25; + --spectrum-global-color-opacity-20: 0.2; + --spectrum-global-color-opacity-15: 0.15; + --spectrum-global-color-opacity-10: 0.1; + --spectrum-global-color-opacity-8: 0.08; + --spectrum-global-color-opacity-7: 0.07; + --spectrum-global-color-opacity-6: 0.06; + --spectrum-global-color-opacity-5: 0.05; + --spectrum-global-color-opacity-4: 0.04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 39, 187, 54; + --spectrum-global-color-celery-400: rgb( + var(--spectrum-global-color-celery-400-rgb) + ); + --spectrum-global-color-celery-500-rgb: 7, 167, 33; + --spectrum-global-color-celery-500: rgb( + var(--spectrum-global-color-celery-500-rgb) + ); + --spectrum-global-color-celery-600-rgb: 0, 145, 18; + --spectrum-global-color-celery-600: rgb( + var(--spectrum-global-color-celery-600-rgb) + ); + --spectrum-global-color-celery-700-rgb: 0, 124, 15; + --spectrum-global-color-celery-700: rgb( + var(--spectrum-global-color-celery-700-rgb) + ); + --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; + --spectrum-global-color-chartreuse-400: rgb( + var(--spectrum-global-color-chartreuse-400-rgb) + ); + --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; + --spectrum-global-color-chartreuse-500: rgb( + var(--spectrum-global-color-chartreuse-500-rgb) + ); + --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; + --spectrum-global-color-chartreuse-600: rgb( + var(--spectrum-global-color-chartreuse-600-rgb) + ); + --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; + --spectrum-global-color-chartreuse-700: rgb( + var(--spectrum-global-color-chartreuse-700-rgb) + ); + --spectrum-global-color-yellow-400-rgb: 232, 198, 0; + --spectrum-global-color-yellow-400: rgb( + var(--spectrum-global-color-yellow-400-rgb) + ); + --spectrum-global-color-yellow-500-rgb: 215, 179, 0; + --spectrum-global-color-yellow-500: rgb( + var(--spectrum-global-color-yellow-500-rgb) + ); + --spectrum-global-color-yellow-600-rgb: 196, 159, 0; + --spectrum-global-color-yellow-600: rgb( + var(--spectrum-global-color-yellow-600-rgb) + ); + --spectrum-global-color-yellow-700-rgb: 176, 140, 0; + --spectrum-global-color-yellow-700: rgb( + var(--spectrum-global-color-yellow-700-rgb) + ); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb( + var(--spectrum-global-color-magenta-400-rgb) + ); + --spectrum-global-color-magenta-500-rgb: 200, 34, 105; + --spectrum-global-color-magenta-500: rgb( + var(--spectrum-global-color-magenta-500-rgb) + ); + --spectrum-global-color-magenta-600-rgb: 173, 9, 85; + --spectrum-global-color-magenta-600: rgb( + var(--spectrum-global-color-magenta-600-rgb) + ); + --spectrum-global-color-magenta-700-rgb: 142, 0, 69; + --spectrum-global-color-magenta-700: rgb( + var(--spectrum-global-color-magenta-700-rgb) + ); + --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; + --spectrum-global-color-fuchsia-400: rgb( + var(--spectrum-global-color-fuchsia-400-rgb) + ); + --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; + --spectrum-global-color-fuchsia-500: rgb( + var(--spectrum-global-color-fuchsia-500-rgb) + ); + --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; + --spectrum-global-color-fuchsia-600: rgb( + var(--spectrum-global-color-fuchsia-600-rgb) + ); + --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; + --spectrum-global-color-fuchsia-700: rgb( + var(--spectrum-global-color-fuchsia-700-rgb) + ); + --spectrum-global-color-purple-400-rgb: 157, 87, 244; + --spectrum-global-color-purple-400: rgb( + var(--spectrum-global-color-purple-400-rgb) + ); + --spectrum-global-color-purple-500-rgb: 137, 61, 231; + --spectrum-global-color-purple-500: rgb( + var(--spectrum-global-color-purple-500-rgb) + ); + --spectrum-global-color-purple-600-rgb: 115, 38, 211; + --spectrum-global-color-purple-600: rgb( + var(--spectrum-global-color-purple-600-rgb) + ); + --spectrum-global-color-purple-700-rgb: 93, 19, 183; + --spectrum-global-color-purple-700: rgb( + var(--spectrum-global-color-purple-700-rgb) + ); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb( + var(--spectrum-global-color-indigo-400-rgb) + ); + --spectrum-global-color-indigo-500-rgb: 82, 88, 228; + --spectrum-global-color-indigo-500: rgb( + var(--spectrum-global-color-indigo-500-rgb) + ); + --spectrum-global-color-indigo-600-rgb: 64, 70, 202; + --spectrum-global-color-indigo-600: rgb( + var(--spectrum-global-color-indigo-600-rgb) + ); + --spectrum-global-color-indigo-700-rgb: 50, 54, 168; + --spectrum-global-color-indigo-700: rgb( + var(--spectrum-global-color-indigo-700-rgb) + ); + --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; + --spectrum-global-color-seafoam-400: rgb( + var(--spectrum-global-color-seafoam-400-rgb) + ); + --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; + --spectrum-global-color-seafoam-500: rgb( + var(--spectrum-global-color-seafoam-500-rgb) + ); + --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; + --spectrum-global-color-seafoam-600: rgb( + var(--spectrum-global-color-seafoam-600-rgb) + ); + --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; + --spectrum-global-color-seafoam-700: rgb( + var(--spectrum-global-color-seafoam-700-rgb) + ); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb( + var(--spectrum-global-color-red-400-rgb) + ); + --spectrum-global-color-red-500-rgb: 211, 21, 16; + --spectrum-global-color-red-500: rgb( + var(--spectrum-global-color-red-500-rgb) + ); + --spectrum-global-color-red-600-rgb: 180, 0, 0; + --spectrum-global-color-red-600: rgb( + var(--spectrum-global-color-red-600-rgb) + ); + --spectrum-global-color-red-700-rgb: 147, 0, 0; + --spectrum-global-color-red-700: rgb( + var(--spectrum-global-color-red-700-rgb) + ); + --spectrum-global-color-orange-400-rgb: 246, 133, 17; + --spectrum-global-color-orange-400: rgb( + var(--spectrum-global-color-orange-400-rgb) + ); + --spectrum-global-color-orange-500-rgb: 228, 111, 0; + --spectrum-global-color-orange-500: rgb( + var(--spectrum-global-color-orange-500-rgb) + ); + --spectrum-global-color-orange-600-rgb: 203, 93, 0; + --spectrum-global-color-orange-600: rgb( + var(--spectrum-global-color-orange-600-rgb) + ); + --spectrum-global-color-orange-700-rgb: 177, 76, 0; + --spectrum-global-color-orange-700: rgb( + var(--spectrum-global-color-orange-700-rgb) + ); + --spectrum-global-color-green-400-rgb: 0, 143, 93; + --spectrum-global-color-green-400: rgb( + var(--spectrum-global-color-green-400-rgb) + ); + --spectrum-global-color-green-500-rgb: 0, 122, 77; + --spectrum-global-color-green-500: rgb( + var(--spectrum-global-color-green-500-rgb) + ); + --spectrum-global-color-green-600-rgb: 0, 101, 62; + --spectrum-global-color-green-600: rgb( + var(--spectrum-global-color-green-600-rgb) + ); + --spectrum-global-color-green-700-rgb: 0, 81, 50; + --spectrum-global-color-green-700: rgb( + var(--spectrum-global-color-green-700-rgb) + ); + --spectrum-global-color-blue-400-rgb: 20, 122, 243; + --spectrum-global-color-blue-400: rgb( + var(--spectrum-global-color-blue-400-rgb) + ); + --spectrum-global-color-blue-500-rgb: 2, 101, 220; + --spectrum-global-color-blue-500: rgb( + var(--spectrum-global-color-blue-500-rgb) + ); + --spectrum-global-color-blue-600-rgb: 0, 84, 182; + --spectrum-global-color-blue-600: rgb( + var(--spectrum-global-color-blue-600-rgb) + ); + --spectrum-global-color-blue-700-rgb: 0, 68, 145; + --spectrum-global-color-blue-700: rgb( + var(--spectrum-global-color-blue-700-rgb) + ); + --spectrum-global-color-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-gray-50: rgb( + var(--spectrum-global-color-gray-50-rgb) + ); + --spectrum-global-color-gray-75-rgb: 253, 253, 253; + --spectrum-global-color-gray-75: rgb( + var(--spectrum-global-color-gray-75-rgb) + ); + --spectrum-global-color-gray-100-rgb: 248, 248, 248; + --spectrum-global-color-gray-100: rgb( + var(--spectrum-global-color-gray-100-rgb) + ); + --spectrum-global-color-gray-200-rgb: 230, 230, 230; + --spectrum-global-color-gray-200: rgb( + var(--spectrum-global-color-gray-200-rgb) + ); + --spectrum-global-color-gray-300-rgb: 213, 213, 213; + --spectrum-global-color-gray-300: rgb( + var(--spectrum-global-color-gray-300-rgb) + ); + --spectrum-global-color-gray-400-rgb: 177, 177, 177; + --spectrum-global-color-gray-400: rgb( + var(--spectrum-global-color-gray-400-rgb) + ); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb( + var(--spectrum-global-color-gray-500-rgb) + ); + --spectrum-global-color-gray-600-rgb: 109, 109, 109; + --spectrum-global-color-gray-600: rgb( + var(--spectrum-global-color-gray-600-rgb) + ); + --spectrum-global-color-gray-700-rgb: 70, 70, 70; + --spectrum-global-color-gray-700: rgb( + var(--spectrum-global-color-gray-700-rgb) + ); + --spectrum-global-color-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-gray-800: rgb( + var(--spectrum-global-color-gray-800-rgb) + ); + --spectrum-global-color-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-gray-900: rgb( + var(--spectrum-global-color-gray-900-rgb) + ); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-background-color-modal-overlay: #0006; + --spectrum-alias-dropshadow-color: #00000026; + --spectrum-alias-background-color-hover-overlay: #0000000a; + --spectrum-alias-highlight-hover: #0000000f; + --spectrum-alias-highlight-down: #0000001a; + --spectrum-alias-highlight-selected: #0265dc1a; + --spectrum-alias-highlight-selected-hover: #0265dc33; + --spectrum-alias-text-highlight-color: #0265dc33; + --spectrum-alias-background-color-quickactions: #f8f8f8e6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-border-color-translucent: #0000001a; + --spectrum-alias-radial-reaction-color-default: #2229; + --spectrum-alias-pasteboard-background-color: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-separator-color: var( + --spectrum-global-color-gray-300 + ); } diff --git a/tools/styles/spectrum-theme-lightest.css b/tools/styles/spectrum-theme-lightest.css index 0075ba7bb1..2c0c0ab594 100644 --- a/tools/styles/spectrum-theme-lightest.css +++ b/tools/styles/spectrum-theme-lightest.css @@ -1,293 +1,289 @@ :root, :host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 48, 193, 61; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 15, 172, 38; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 0, 150, 20; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 0, 128, 15; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 157, 203, 13; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 139, 182, 4; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 122, 162, 0; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 106, 141, 0; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 238, 205, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 221, 185, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 201, 164, 0; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 181, 144, 0; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 226, 68, 135; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 205, 40, 111; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 179, 15, 89; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 149, 0, 72; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 211, 63, 212; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 188, 39, 187; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 163, 10, 163; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 135, 0, 136; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 161, 93, 246; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 142, 67, 234; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 120, 43, 216; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 98, 23, 190; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 109, 115, 246; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 87, 93, 232; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 68, 74, 208; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 53, 58, 176; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 166, 160; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 145, 139; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 0, 124, 118; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 0, 103, 99; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 237, 64, 48; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 217, 28, 21; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 187, 2, 2; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 154, 0, 0; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 250, 139, 26; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 233, 117, 0; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 209, 97, 0; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 182, 80, 0; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 148, 97; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 0, 126, 80; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 0, 105, 65; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 0, 86, 53; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 27, 127, 245; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 4, 105, 227; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 0, 87, 190; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 0, 72, 153; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 255, 255, 255; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 255, 255, 255; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 235, 235, 235; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 217, 217, 217; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 179, 179, 179; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 146, 146, 146; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 110, 110, 110; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 71, 71, 71; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-background-color-modal-overlay: #0006; - --spectrum-alias-dropshadow-color: #00000026; - --spectrum-alias-background-color-hover-overlay: #0000000a; - --spectrum-alias-highlight-hover: #0000000f; - --spectrum-alias-highlight-down: #0000001a; - --spectrum-alias-highlight-selected: #0469e31a; - --spectrum-alias-highlight-selected-hover: #0469e333; - --spectrum-alias-text-highlight-color: #0469e333; - --spectrum-alias-background-color-quickactions: #ffffffe6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-translucent: #0000001a; - --spectrum-alias-radial-reaction-color-default: #2229; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-300 - ); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: 0.9; + --spectrum-global-color-opacity-80: 0.8; + --spectrum-global-color-opacity-70: 0.7; + --spectrum-global-color-opacity-60: 0.6; + --spectrum-global-color-opacity-55: 0.55; + --spectrum-global-color-opacity-50: 0.5; + --spectrum-global-color-opacity-42: 0.42; + --spectrum-global-color-opacity-40: 0.4; + --spectrum-global-color-opacity-30: 0.3; + --spectrum-global-color-opacity-25: 0.25; + --spectrum-global-color-opacity-20: 0.2; + --spectrum-global-color-opacity-15: 0.15; + --spectrum-global-color-opacity-10: 0.1; + --spectrum-global-color-opacity-8: 0.08; + --spectrum-global-color-opacity-7: 0.07; + --spectrum-global-color-opacity-6: 0.06; + --spectrum-global-color-opacity-5: 0.05; + --spectrum-global-color-opacity-4: 0.04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 48, 193, 61; + --spectrum-global-color-celery-400: rgb( + var(--spectrum-global-color-celery-400-rgb) + ); + --spectrum-global-color-celery-500-rgb: 15, 172, 38; + --spectrum-global-color-celery-500: rgb( + var(--spectrum-global-color-celery-500-rgb) + ); + --spectrum-global-color-celery-600-rgb: 0, 150, 20; + --spectrum-global-color-celery-600: rgb( + var(--spectrum-global-color-celery-600-rgb) + ); + --spectrum-global-color-celery-700-rgb: 0, 128, 15; + --spectrum-global-color-celery-700: rgb( + var(--spectrum-global-color-celery-700-rgb) + ); + --spectrum-global-color-chartreuse-400-rgb: 157, 203, 13; + --spectrum-global-color-chartreuse-400: rgb( + var(--spectrum-global-color-chartreuse-400-rgb) + ); + --spectrum-global-color-chartreuse-500-rgb: 139, 182, 4; + --spectrum-global-color-chartreuse-500: rgb( + var(--spectrum-global-color-chartreuse-500-rgb) + ); + --spectrum-global-color-chartreuse-600-rgb: 122, 162, 0; + --spectrum-global-color-chartreuse-600: rgb( + var(--spectrum-global-color-chartreuse-600-rgb) + ); + --spectrum-global-color-chartreuse-700-rgb: 106, 141, 0; + --spectrum-global-color-chartreuse-700: rgb( + var(--spectrum-global-color-chartreuse-700-rgb) + ); + --spectrum-global-color-yellow-400-rgb: 238, 205, 0; + --spectrum-global-color-yellow-400: rgb( + var(--spectrum-global-color-yellow-400-rgb) + ); + --spectrum-global-color-yellow-500-rgb: 221, 185, 0; + --spectrum-global-color-yellow-500: rgb( + var(--spectrum-global-color-yellow-500-rgb) + ); + --spectrum-global-color-yellow-600-rgb: 201, 164, 0; + --spectrum-global-color-yellow-600: rgb( + var(--spectrum-global-color-yellow-600-rgb) + ); + --spectrum-global-color-yellow-700-rgb: 181, 144, 0; + --spectrum-global-color-yellow-700: rgb( + var(--spectrum-global-color-yellow-700-rgb) + ); + --spectrum-global-color-magenta-400-rgb: 226, 68, 135; + --spectrum-global-color-magenta-400: rgb( + var(--spectrum-global-color-magenta-400-rgb) + ); + --spectrum-global-color-magenta-500-rgb: 205, 40, 111; + --spectrum-global-color-magenta-500: rgb( + var(--spectrum-global-color-magenta-500-rgb) + ); + --spectrum-global-color-magenta-600-rgb: 179, 15, 89; + --spectrum-global-color-magenta-600: rgb( + var(--spectrum-global-color-magenta-600-rgb) + ); + --spectrum-global-color-magenta-700-rgb: 149, 0, 72; + --spectrum-global-color-magenta-700: rgb( + var(--spectrum-global-color-magenta-700-rgb) + ); + --spectrum-global-color-fuchsia-400-rgb: 211, 63, 212; + --spectrum-global-color-fuchsia-400: rgb( + var(--spectrum-global-color-fuchsia-400-rgb) + ); + --spectrum-global-color-fuchsia-500-rgb: 188, 39, 187; + --spectrum-global-color-fuchsia-500: rgb( + var(--spectrum-global-color-fuchsia-500-rgb) + ); + --spectrum-global-color-fuchsia-600-rgb: 163, 10, 163; + --spectrum-global-color-fuchsia-600: rgb( + var(--spectrum-global-color-fuchsia-600-rgb) + ); + --spectrum-global-color-fuchsia-700-rgb: 135, 0, 136; + --spectrum-global-color-fuchsia-700: rgb( + var(--spectrum-global-color-fuchsia-700-rgb) + ); + --spectrum-global-color-purple-400-rgb: 161, 93, 246; + --spectrum-global-color-purple-400: rgb( + var(--spectrum-global-color-purple-400-rgb) + ); + --spectrum-global-color-purple-500-rgb: 142, 67, 234; + --spectrum-global-color-purple-500: rgb( + var(--spectrum-global-color-purple-500-rgb) + ); + --spectrum-global-color-purple-600-rgb: 120, 43, 216; + --spectrum-global-color-purple-600: rgb( + var(--spectrum-global-color-purple-600-rgb) + ); + --spectrum-global-color-purple-700-rgb: 98, 23, 190; + --spectrum-global-color-purple-700: rgb( + var(--spectrum-global-color-purple-700-rgb) + ); + --spectrum-global-color-indigo-400-rgb: 109, 115, 246; + --spectrum-global-color-indigo-400: rgb( + var(--spectrum-global-color-indigo-400-rgb) + ); + --spectrum-global-color-indigo-500-rgb: 87, 93, 232; + --spectrum-global-color-indigo-500: rgb( + var(--spectrum-global-color-indigo-500-rgb) + ); + --spectrum-global-color-indigo-600-rgb: 68, 74, 208; + --spectrum-global-color-indigo-600: rgb( + var(--spectrum-global-color-indigo-600-rgb) + ); + --spectrum-global-color-indigo-700-rgb: 53, 58, 176; + --spectrum-global-color-indigo-700: rgb( + var(--spectrum-global-color-indigo-700-rgb) + ); + --spectrum-global-color-seafoam-400-rgb: 0, 166, 160; + --spectrum-global-color-seafoam-400: rgb( + var(--spectrum-global-color-seafoam-400-rgb) + ); + --spectrum-global-color-seafoam-500-rgb: 0, 145, 139; + --spectrum-global-color-seafoam-500: rgb( + var(--spectrum-global-color-seafoam-500-rgb) + ); + --spectrum-global-color-seafoam-600-rgb: 0, 124, 118; + --spectrum-global-color-seafoam-600: rgb( + var(--spectrum-global-color-seafoam-600-rgb) + ); + --spectrum-global-color-seafoam-700-rgb: 0, 103, 99; + --spectrum-global-color-seafoam-700: rgb( + var(--spectrum-global-color-seafoam-700-rgb) + ); + --spectrum-global-color-red-400-rgb: 237, 64, 48; + --spectrum-global-color-red-400: rgb( + var(--spectrum-global-color-red-400-rgb) + ); + --spectrum-global-color-red-500-rgb: 217, 28, 21; + --spectrum-global-color-red-500: rgb( + var(--spectrum-global-color-red-500-rgb) + ); + --spectrum-global-color-red-600-rgb: 187, 2, 2; + --spectrum-global-color-red-600: rgb( + var(--spectrum-global-color-red-600-rgb) + ); + --spectrum-global-color-red-700-rgb: 154, 0, 0; + --spectrum-global-color-red-700: rgb( + var(--spectrum-global-color-red-700-rgb) + ); + --spectrum-global-color-orange-400-rgb: 250, 139, 26; + --spectrum-global-color-orange-400: rgb( + var(--spectrum-global-color-orange-400-rgb) + ); + --spectrum-global-color-orange-500-rgb: 233, 117, 0; + --spectrum-global-color-orange-500: rgb( + var(--spectrum-global-color-orange-500-rgb) + ); + --spectrum-global-color-orange-600-rgb: 209, 97, 0; + --spectrum-global-color-orange-600: rgb( + var(--spectrum-global-color-orange-600-rgb) + ); + --spectrum-global-color-orange-700-rgb: 182, 80, 0; + --spectrum-global-color-orange-700: rgb( + var(--spectrum-global-color-orange-700-rgb) + ); + --spectrum-global-color-green-400-rgb: 0, 148, 97; + --spectrum-global-color-green-400: rgb( + var(--spectrum-global-color-green-400-rgb) + ); + --spectrum-global-color-green-500-rgb: 0, 126, 80; + --spectrum-global-color-green-500: rgb( + var(--spectrum-global-color-green-500-rgb) + ); + --spectrum-global-color-green-600-rgb: 0, 105, 65; + --spectrum-global-color-green-600: rgb( + var(--spectrum-global-color-green-600-rgb) + ); + --spectrum-global-color-green-700-rgb: 0, 86, 53; + --spectrum-global-color-green-700: rgb( + var(--spectrum-global-color-green-700-rgb) + ); + --spectrum-global-color-blue-400-rgb: 27, 127, 245; + --spectrum-global-color-blue-400: rgb( + var(--spectrum-global-color-blue-400-rgb) + ); + --spectrum-global-color-blue-500-rgb: 4, 105, 227; + --spectrum-global-color-blue-500: rgb( + var(--spectrum-global-color-blue-500-rgb) + ); + --spectrum-global-color-blue-600-rgb: 0, 87, 190; + --spectrum-global-color-blue-600: rgb( + var(--spectrum-global-color-blue-600-rgb) + ); + --spectrum-global-color-blue-700-rgb: 0, 72, 153; + --spectrum-global-color-blue-700: rgb( + var(--spectrum-global-color-blue-700-rgb) + ); + --spectrum-global-color-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-gray-50: rgb( + var(--spectrum-global-color-gray-50-rgb) + ); + --spectrum-global-color-gray-75-rgb: 255, 255, 255; + --spectrum-global-color-gray-75: rgb( + var(--spectrum-global-color-gray-75-rgb) + ); + --spectrum-global-color-gray-100-rgb: 255, 255, 255; + --spectrum-global-color-gray-100: rgb( + var(--spectrum-global-color-gray-100-rgb) + ); + --spectrum-global-color-gray-200-rgb: 235, 235, 235; + --spectrum-global-color-gray-200: rgb( + var(--spectrum-global-color-gray-200-rgb) + ); + --spectrum-global-color-gray-300-rgb: 217, 217, 217; + --spectrum-global-color-gray-300: rgb( + var(--spectrum-global-color-gray-300-rgb) + ); + --spectrum-global-color-gray-400-rgb: 179, 179, 179; + --spectrum-global-color-gray-400: rgb( + var(--spectrum-global-color-gray-400-rgb) + ); + --spectrum-global-color-gray-500-rgb: 146, 146, 146; + --spectrum-global-color-gray-500: rgb( + var(--spectrum-global-color-gray-500-rgb) + ); + --spectrum-global-color-gray-600-rgb: 110, 110, 110; + --spectrum-global-color-gray-600: rgb( + var(--spectrum-global-color-gray-600-rgb) + ); + --spectrum-global-color-gray-700-rgb: 71, 71, 71; + --spectrum-global-color-gray-700: rgb( + var(--spectrum-global-color-gray-700-rgb) + ); + --spectrum-global-color-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-gray-800: rgb( + var(--spectrum-global-color-gray-800-rgb) + ); + --spectrum-global-color-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-gray-900: rgb( + var(--spectrum-global-color-gray-900-rgb) + ); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-background-color-modal-overlay: #0006; + --spectrum-alias-dropshadow-color: #00000026; + --spectrum-alias-background-color-hover-overlay: #0000000a; + --spectrum-alias-highlight-hover: #0000000f; + --spectrum-alias-highlight-down: #0000001a; + --spectrum-alias-highlight-selected: #0469e31a; + --spectrum-alias-highlight-selected-hover: #0469e333; + --spectrum-alias-text-highlight-color: #0469e333; + --spectrum-alias-background-color-quickactions: #ffffffe6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-border-color-translucent: #0000001a; + --spectrum-alias-radial-reaction-color-default: #2229; + --spectrum-alias-pasteboard-background-color: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-separator-color: var( + --spectrum-global-color-gray-300 + ); } diff --git a/tools/styles/spectrum-two/spectrum-core-global.css b/tools/styles/spectrum-two/spectrum-core-global.css index 7df98ecf56..918cdd2fcd 100644 --- a/tools/styles/spectrum-two/spectrum-core-global.css +++ b/tools/styles/spectrum-two/spectrum-core-global.css @@ -1,3241 +1,3199 @@ :root, :host { - --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-animation-duration-0: 0s; - --spectrum-global-animation-duration-100: 0.13s; - --spectrum-global-animation-duration-200: 0.16s; - --spectrum-global-animation-duration-300: 0.19s; - --spectrum-global-animation-duration-400: 0.22s; - --spectrum-global-animation-duration-500: 0.25s; - --spectrum-global-animation-duration-600: 0.3s; - --spectrum-global-animation-duration-700: 0.35s; - --spectrum-global-animation-duration-800: 0.4s; - --spectrum-global-animation-duration-900: 0.45s; - --spectrum-global-animation-duration-1000: 0.5s; - --spectrum-global-animation-duration-2000: 1s; - --spectrum-global-animation-duration-4000: 2s; - --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-static-black-rgb: 0, 0, 0; - --spectrum-global-color-static-black: rgb( - var(--spectrum-global-color-static-black-rgb) - ); - --spectrum-global-color-static-white-rgb: 255, 255, 255; - --spectrum-global-color-static-white: rgb( - var(--spectrum-global-color-static-white-rgb) - ); - --spectrum-global-color-static-blue-rgb: 0, 87, 191; - --spectrum-global-color-static-blue: rgb( - var(--spectrum-global-color-static-blue-rgb) - ); - --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-50: rgb( - var(--spectrum-global-color-static-gray-50-rgb) - ); - --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-75: rgb( - var(--spectrum-global-color-static-gray-75-rgb) - ); - --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-100: rgb( - var(--spectrum-global-color-static-gray-100-rgb) - ); - --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; - --spectrum-global-color-static-gray-200: rgb( - var(--spectrum-global-color-static-gray-200-rgb) - ); - --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; - --spectrum-global-color-static-gray-300: rgb( - var(--spectrum-global-color-static-gray-300-rgb) - ); - --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; - --spectrum-global-color-static-gray-400: rgb( - var(--spectrum-global-color-static-gray-400-rgb) - ); - --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; - --spectrum-global-color-static-gray-500: rgb( - var(--spectrum-global-color-static-gray-500-rgb) - ); - --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; - --spectrum-global-color-static-gray-600: rgb( - var(--spectrum-global-color-static-gray-600-rgb) - ); - --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; - --spectrum-global-color-static-gray-700: rgb( - var(--spectrum-global-color-static-gray-700-rgb) - ); - --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-static-gray-800: rgb( - var(--spectrum-global-color-static-gray-800-rgb) - ); - --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-static-gray-900: rgb( - var(--spectrum-global-color-static-gray-900-rgb) - ); - --spectrum-global-color-static-red-400-rgb: 237, 64, 48; - --spectrum-global-color-static-red-400: rgb( - var(--spectrum-global-color-static-red-400-rgb) - ); - --spectrum-global-color-static-red-500-rgb: 217, 28, 21; - --spectrum-global-color-static-red-500: rgb( - var(--spectrum-global-color-static-red-500-rgb) - ); - --spectrum-global-color-static-red-600-rgb: 187, 2, 2; - --spectrum-global-color-static-red-600: rgb( - var(--spectrum-global-color-static-red-600-rgb) - ); - --spectrum-global-color-static-red-700-rgb: 154, 0, 0; - --spectrum-global-color-static-red-700: rgb( - var(--spectrum-global-color-static-red-700-rgb) - ); - --spectrum-global-color-static-red-800-rgb: 124, 0, 0; - --spectrum-global-color-static-red-800: rgb( - var(--spectrum-global-color-static-red-800-rgb) - ); - --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; - --spectrum-global-color-static-orange-400: rgb( - var(--spectrum-global-color-static-orange-400-rgb) - ); - --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; - --spectrum-global-color-static-orange-500: rgb( - var(--spectrum-global-color-static-orange-500-rgb) - ); - --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; - --spectrum-global-color-static-orange-600: rgb( - var(--spectrum-global-color-static-orange-600-rgb) - ); - --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; - --spectrum-global-color-static-orange-700: rgb( - var(--spectrum-global-color-static-orange-700-rgb) - ); - --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; - --spectrum-global-color-static-orange-800: rgb( - var(--spectrum-global-color-static-orange-800-rgb) - ); - --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; - --spectrum-global-color-static-yellow-200: rgb( - var(--spectrum-global-color-static-yellow-200-rgb) - ); - --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; - --spectrum-global-color-static-yellow-300: rgb( - var(--spectrum-global-color-static-yellow-300-rgb) - ); - --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; - --spectrum-global-color-static-yellow-400: rgb( - var(--spectrum-global-color-static-yellow-400-rgb) - ); - --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; - --spectrum-global-color-static-yellow-500: rgb( - var(--spectrum-global-color-static-yellow-500-rgb) - ); - --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; - --spectrum-global-color-static-yellow-600: rgb( - var(--spectrum-global-color-static-yellow-600-rgb) - ); - --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; - --spectrum-global-color-static-yellow-700: rgb( - var(--spectrum-global-color-static-yellow-700-rgb) - ); - --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; - --spectrum-global-color-static-yellow-800: rgb( - var(--spectrum-global-color-static-yellow-800-rgb) - ); - --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; - --spectrum-global-color-static-chartreuse-300: rgb( - var(--spectrum-global-color-static-chartreuse-300-rgb) - ); - --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; - --spectrum-global-color-static-chartreuse-400: rgb( - var(--spectrum-global-color-static-chartreuse-400-rgb) - ); - --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; - --spectrum-global-color-static-chartreuse-500: rgb( - var(--spectrum-global-color-static-chartreuse-500-rgb) - ); - --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; - --spectrum-global-color-static-chartreuse-600: rgb( - var(--spectrum-global-color-static-chartreuse-600-rgb) - ); - --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; - --spectrum-global-color-static-chartreuse-700: rgb( - var(--spectrum-global-color-static-chartreuse-700-rgb) - ); - --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; - --spectrum-global-color-static-chartreuse-800: rgb( - var(--spectrum-global-color-static-chartreuse-800-rgb) - ); - --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; - --spectrum-global-color-static-celery-200: rgb( - var(--spectrum-global-color-static-celery-200-rgb) - ); - --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; - --spectrum-global-color-static-celery-300: rgb( - var(--spectrum-global-color-static-celery-300-rgb) - ); - --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; - --spectrum-global-color-static-celery-400: rgb( - var(--spectrum-global-color-static-celery-400-rgb) - ); - --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; - --spectrum-global-color-static-celery-500: rgb( - var(--spectrum-global-color-static-celery-500-rgb) - ); - --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; - --spectrum-global-color-static-celery-600: rgb( - var(--spectrum-global-color-static-celery-600-rgb) - ); - --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; - --spectrum-global-color-static-celery-700: rgb( - var(--spectrum-global-color-static-celery-700-rgb) - ); - --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; - --spectrum-global-color-static-celery-800: rgb( - var(--spectrum-global-color-static-celery-800-rgb) - ); - --spectrum-global-color-static-green-400-rgb: 29, 169, 115; - --spectrum-global-color-static-green-400: rgb( - var(--spectrum-global-color-static-green-400-rgb) - ); - --spectrum-global-color-static-green-500-rgb: 0, 148, 97; - --spectrum-global-color-static-green-500: rgb( - var(--spectrum-global-color-static-green-500-rgb) - ); - --spectrum-global-color-static-green-600-rgb: 0, 126, 80; - --spectrum-global-color-static-green-600: rgb( - var(--spectrum-global-color-static-green-600-rgb) - ); - --spectrum-global-color-static-green-700-rgb: 0, 105, 65; - --spectrum-global-color-static-green-700: rgb( - var(--spectrum-global-color-static-green-700-rgb) - ); - --spectrum-global-color-static-green-800-rgb: 0, 86, 53; - --spectrum-global-color-static-green-800: rgb( - var(--spectrum-global-color-static-green-800-rgb) - ); - --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; - --spectrum-global-color-static-seafoam-200: rgb( - var(--spectrum-global-color-static-seafoam-200-rgb) - ); - --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; - --spectrum-global-color-static-seafoam-300: rgb( - var(--spectrum-global-color-static-seafoam-300-rgb) - ); - --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; - --spectrum-global-color-static-seafoam-400: rgb( - var(--spectrum-global-color-static-seafoam-400-rgb) - ); - --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; - --spectrum-global-color-static-seafoam-500: rgb( - var(--spectrum-global-color-static-seafoam-500-rgb) - ); - --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; - --spectrum-global-color-static-seafoam-600: rgb( - var(--spectrum-global-color-static-seafoam-600-rgb) - ); - --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; - --spectrum-global-color-static-seafoam-700: rgb( - var(--spectrum-global-color-static-seafoam-700-rgb) - ); - --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; - --spectrum-global-color-static-seafoam-800: rgb( - var(--spectrum-global-color-static-seafoam-800-rgb) - ); - --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; - --spectrum-global-color-static-blue-200: rgb( - var(--spectrum-global-color-static-blue-200-rgb) - ); - --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; - --spectrum-global-color-static-blue-300: rgb( - var(--spectrum-global-color-static-blue-300-rgb) - ); - --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; - --spectrum-global-color-static-blue-400: rgb( - var(--spectrum-global-color-static-blue-400-rgb) - ); - --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; - --spectrum-global-color-static-blue-500: rgb( - var(--spectrum-global-color-static-blue-500-rgb) - ); - --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; - --spectrum-global-color-static-blue-600: rgb( - var(--spectrum-global-color-static-blue-600-rgb) - ); - --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; - --spectrum-global-color-static-blue-700: rgb( - var(--spectrum-global-color-static-blue-700-rgb) - ); - --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; - --spectrum-global-color-static-blue-800: rgb( - var(--spectrum-global-color-static-blue-800-rgb) - ); - --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; - --spectrum-global-color-static-indigo-200: rgb( - var(--spectrum-global-color-static-indigo-200-rgb) - ); - --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; - --spectrum-global-color-static-indigo-300: rgb( - var(--spectrum-global-color-static-indigo-300-rgb) - ); - --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; - --spectrum-global-color-static-indigo-400: rgb( - var(--spectrum-global-color-static-indigo-400-rgb) - ); - --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; - --spectrum-global-color-static-indigo-500: rgb( - var(--spectrum-global-color-static-indigo-500-rgb) - ); - --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; - --spectrum-global-color-static-indigo-600: rgb( - var(--spectrum-global-color-static-indigo-600-rgb) - ); - --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-700: rgb( - var(--spectrum-global-color-static-indigo-700-rgb) - ); - --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-800: rgb( - var(--spectrum-global-color-static-indigo-800-rgb) - ); - --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; - --spectrum-global-color-static-purple-400: rgb( - var(--spectrum-global-color-static-purple-400-rgb) - ); - --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; - --spectrum-global-color-static-purple-500: rgb( - var(--spectrum-global-color-static-purple-500-rgb) - ); - --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; - --spectrum-global-color-static-purple-600: rgb( - var(--spectrum-global-color-static-purple-600-rgb) - ); - --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; - --spectrum-global-color-static-purple-700: rgb( - var(--spectrum-global-color-static-purple-700-rgb) - ); - --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; - --spectrum-global-color-static-purple-800: rgb( - var(--spectrum-global-color-static-purple-800-rgb) - ); - --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; - --spectrum-global-color-static-fuchsia-400: rgb( - var(--spectrum-global-color-static-fuchsia-400-rgb) - ); - --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; - --spectrum-global-color-static-fuchsia-500: rgb( - var(--spectrum-global-color-static-fuchsia-500-rgb) - ); - --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; - --spectrum-global-color-static-fuchsia-600: rgb( - var(--spectrum-global-color-static-fuchsia-600-rgb) - ); - --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; - --spectrum-global-color-static-fuchsia-700: rgb( - var(--spectrum-global-color-static-fuchsia-700-rgb) - ); - --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; - --spectrum-global-color-static-fuchsia-800: rgb( - var(--spectrum-global-color-static-fuchsia-800-rgb) - ); - --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; - --spectrum-global-color-static-magenta-200: rgb( - var(--spectrum-global-color-static-magenta-200-rgb) - ); - --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; - --spectrum-global-color-static-magenta-300: rgb( - var(--spectrum-global-color-static-magenta-300-rgb) - ); - --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; - --spectrum-global-color-static-magenta-400: rgb( - var(--spectrum-global-color-static-magenta-400-rgb) - ); - --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; - --spectrum-global-color-static-magenta-500: rgb( - var(--spectrum-global-color-static-magenta-500-rgb) - ); - --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; - --spectrum-global-color-static-magenta-600: rgb( - var(--spectrum-global-color-static-magenta-600-rgb) - ); - --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; - --spectrum-global-color-static-magenta-700: rgb( - var(--spectrum-global-color-static-magenta-700-rgb) - ); - --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; - --spectrum-global-color-static-magenta-800: rgb( - var(--spectrum-global-color-static-magenta-800-rgb) - ); - --spectrum-global-color-static-transparent-white-200: #ffffff1a; - --spectrum-global-color-static-transparent-white-300: #ffffff40; - --spectrum-global-color-static-transparent-white-400: #fff6; - --spectrum-global-color-static-transparent-white-500: #ffffff8c; - --spectrum-global-color-static-transparent-white-600: #ffffffb3; - --spectrum-global-color-static-transparent-white-700: #fffc; - --spectrum-global-color-static-transparent-white-800: #ffffffe6; - --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; - --spectrum-global-color-static-transparent-white-900: rgb( - var(--spectrum-global-color-static-transparent-white-900-rgb) - ); - --spectrum-global-color-static-transparent-black-200: #0000001a; - --spectrum-global-color-static-transparent-black-300: #00000040; - --spectrum-global-color-static-transparent-black-400: #0006; - --spectrum-global-color-static-transparent-black-500: #0000008c; - --spectrum-global-color-static-transparent-black-600: #000000b3; - --spectrum-global-color-static-transparent-black-700: #000c; - --spectrum-global-color-static-transparent-black-800: #000000e6; - --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; - --spectrum-global-color-static-transparent-black-900: rgb( - var(--spectrum-global-color-static-transparent-black-900-rgb) - ); - --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, - #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, - #1a4b83, #1a3979, #1a266f, #191264, #180057; - --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, - #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, - #196b47, #105c45, #094d41, #033f3e, #00313a; - --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, - #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, - #71167c, #560f74, #370b6e, #000968; - --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, - #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, - #3ea8a6, #208288, #076769, #00494b, #002c2d; - --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, - #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, - #397aa8, #1c5796, #163771, #10194d; - --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, - #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, - #2f74b3, #265191, #163670, #0b194c; - --spectrum-semantic-negative-background-color: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-color-default: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-color-hover: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-dark: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-border-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-icon-color: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-status-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-text-color-large: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-text-color-small: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-text-color-small-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-color-key-focus: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-background-color-default: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-background-color-hover: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-negative-background-color-down: var( - --spectrum-global-color-static-red-800 - ); - --spectrum-semantic-negative-background-color-key-focus: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-notice-background-color: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-color-default: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-color-dark: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-border-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-icon-color: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-status-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-text-color-large: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-text-color-small: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-color-down: var( - --spectrum-global-color-orange-700 - ); - --spectrum-semantic-notice-color-key-focus: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-background-color-default: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-background-color-hover: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-notice-background-color-down: var( - --spectrum-global-color-static-orange-800 - ); - --spectrum-semantic-notice-background-color-key-focus: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-positive-background-color: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-color-default: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-color-dark: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-border-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-icon-color: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-status-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-text-color-large: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-text-color-small: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-color-down: var( - --spectrum-global-color-green-700 - ); - --spectrum-semantic-positive-color-key-focus: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-background-color-default: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-background-color-hover: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-positive-background-color-down: var( - --spectrum-global-color-static-green-800 - ); - --spectrum-semantic-positive-background-color-key-focus: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-informative-background-color: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-color-dark: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-border-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-icon-color: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-status-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-text-color-large: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-text-color-small: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-informative-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-informative-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-informative-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-cta-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-cta-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-cta-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-cta-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-emphasized-border-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-emphasized-border-color-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-emphasized-border-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-emphasized-border-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-neutral-background-color-default: var( - --spectrum-global-color-static-gray-700 - ); - --spectrum-semantic-neutral-background-color-hover: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-neutral-background-color-down: var( - --spectrum-global-color-static-gray-900 - ); - --spectrum-semantic-neutral-background-color-key-focus: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-presence-color-1: var( - --spectrum-global-color-static-red-500 - ); - --spectrum-semantic-presence-color-2: var( - --spectrum-global-color-static-orange-400 - ); - --spectrum-semantic-presence-color-3: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; - --spectrum-semantic-presence-color-4: rgb( - var(--spectrum-semantic-presence-color-4-rgb) - ); - --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; - --spectrum-semantic-presence-color-5: rgb( - var(--spectrum-semantic-presence-color-5-rgb) - ); - --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; - --spectrum-semantic-presence-color-6: rgb( - var(--spectrum-semantic-presence-color-6-rgb) - ); - --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; - --spectrum-semantic-presence-color-7: rgb( - var(--spectrum-semantic-presence-color-7-rgb) - ); - --spectrum-semantic-presence-color-8: var( - --spectrum-global-color-static-fuchsia-600 - ); - --spectrum-global-dimension-static-percent-50: 50%; - --spectrum-global-dimension-static-percent-70: 70%; - --spectrum-global-dimension-static-percent-100: 100%; - --spectrum-global-dimension-static-breakpoint-xsmall: 304px; - --spectrum-global-dimension-static-breakpoint-small: 768px; - --spectrum-global-dimension-static-breakpoint-medium: 1280px; - --spectrum-global-dimension-static-breakpoint-large: 1768px; - --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; - --spectrum-global-dimension-static-grid-columns: 12; - --spectrum-global-dimension-static-grid-fluid-width: 100%; - --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; - --spectrum-global-dimension-static-size-0: 0px; - --spectrum-global-dimension-static-size-10: 1px; - --spectrum-global-dimension-static-size-25: 2px; - --spectrum-global-dimension-static-size-40: 3px; - --spectrum-global-dimension-static-size-50: 4px; - --spectrum-global-dimension-static-size-65: 5px; - --spectrum-global-dimension-static-size-75: 6px; - --spectrum-global-dimension-static-size-85: 7px; - --spectrum-global-dimension-static-size-100: 8px; - --spectrum-global-dimension-static-size-115: 9px; - --spectrum-global-dimension-static-size-125: 10px; - --spectrum-global-dimension-static-size-130: 11px; - --spectrum-global-dimension-static-size-150: 12px; - --spectrum-global-dimension-static-size-160: 13px; - --spectrum-global-dimension-static-size-175: 14px; - --spectrum-global-dimension-static-size-185: 15px; - --spectrum-global-dimension-static-size-200: 16px; - --spectrum-global-dimension-static-size-225: 18px; - --spectrum-global-dimension-static-size-250: 20px; - --spectrum-global-dimension-static-size-275: 22px; - --spectrum-global-dimension-static-size-300: 24px; - --spectrum-global-dimension-static-size-325: 26px; - --spectrum-global-dimension-static-size-350: 28px; - --spectrum-global-dimension-static-size-400: 32px; - --spectrum-global-dimension-static-size-450: 36px; - --spectrum-global-dimension-static-size-500: 40px; - --spectrum-global-dimension-static-size-550: 44px; - --spectrum-global-dimension-static-size-600: 48px; - --spectrum-global-dimension-static-size-700: 56px; - --spectrum-global-dimension-static-size-800: 64px; - --spectrum-global-dimension-static-size-900: 72px; - --spectrum-global-dimension-static-size-1000: 80px; - --spectrum-global-dimension-static-size-1200: 96px; - --spectrum-global-dimension-static-size-1700: 136px; - --spectrum-global-dimension-static-size-2400: 192px; - --spectrum-global-dimension-static-size-2500: 200px; - --spectrum-global-dimension-static-size-2600: 208px; - --spectrum-global-dimension-static-size-2800: 224px; - --spectrum-global-dimension-static-size-3200: 256px; - --spectrum-global-dimension-static-size-3400: 272px; - --spectrum-global-dimension-static-size-3500: 280px; - --spectrum-global-dimension-static-size-3600: 288px; - --spectrum-global-dimension-static-size-3800: 304px; - --spectrum-global-dimension-static-size-4600: 368px; - --spectrum-global-dimension-static-size-5000: 400px; - --spectrum-global-dimension-static-size-6000: 480px; - --spectrum-global-dimension-static-size-16000: 1280px; - --spectrum-global-dimension-static-font-size-50: 11px; - --spectrum-global-dimension-static-font-size-75: 12px; - --spectrum-global-dimension-static-font-size-100: 14px; - --spectrum-global-dimension-static-font-size-150: 15px; - --spectrum-global-dimension-static-font-size-200: 16px; - --spectrum-global-dimension-static-font-size-300: 18px; - --spectrum-global-dimension-static-font-size-400: 20px; - --spectrum-global-dimension-static-font-size-500: 22px; - --spectrum-global-dimension-static-font-size-600: 25px; - --spectrum-global-dimension-static-font-size-700: 28px; - --spectrum-global-dimension-static-font-size-800: 32px; - --spectrum-global-dimension-static-font-size-900: 36px; - --spectrum-global-dimension-static-font-size-1000: 40px; - --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro', - Georgia, serif; - --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace; - --spectrum-global-font-weight-thin: 100; - --spectrum-global-font-weight-ultra-light: 200; - --spectrum-global-font-weight-light: 300; - --spectrum-global-font-weight-regular: 400; - --spectrum-global-font-weight-medium: 500; - --spectrum-global-font-weight-semi-bold: 600; - --spectrum-global-font-weight-bold: 700; - --spectrum-global-font-weight-extra-bold: 800; - --spectrum-global-font-weight-black: 900; - --spectrum-global-font-style-regular: normal; - --spectrum-global-font-style-italic: italic; - --spectrum-global-font-letter-spacing-none: 0; - --spectrum-global-font-letter-spacing-small: 0.0125em; - --spectrum-global-font-letter-spacing-han: 0.05em; - --spectrum-global-font-letter-spacing-medium: 0.06em; - --spectrum-global-font-line-height-large: 1.7; - --spectrum-global-font-line-height-medium: 1.5; - --spectrum-global-font-line-height-small: 1.3; - --spectrum-global-font-multiplier-0: 0em; - --spectrum-global-font-multiplier-25: 0.25em; - --spectrum-global-font-multiplier-75: 0.75em; - --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif'; - --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, - source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif'; - --spectrum-global-font-font-family-ko: adobe-clean-han-korean, - source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif'; - --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, - 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Osaka', YuGothic, - 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', - 'sans-serif'; - --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-loupe-entry-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-loupe-exit-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-heading-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-strong-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-margin-bottom: var( - --spectrum-global-font-multiplier-25 - ); - --spectrum-alias-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-body-text-font-family: var( - --spectrum-global-font-family-base - ); - --spectrum-alias-body-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-body-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-body-margin-bottom: var( - --spectrum-global-font-multiplier-75 - ); - --spectrum-alias-detail-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-light: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-font-family: var( - --spectrum-global-font-family-code - ); - --spectrum-alias-code-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-code-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-code-margin-bottom: var( - --spectrum-global-font-multiplier-0 - ); - --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); - --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); - --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); - --spectrum-alias-font-family-zhhans: var( - --spectrum-global-font-font-family-zhhans - ); - --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); - --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); - --spectrum-alias-font-family-condensed: var( - --spectrum-global-font-font-family-condensed - ); - --spectrum-alias-button-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-component-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-han-component-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-serif-text-font-family: var( - --spectrum-global-font-family-serif - ); - --spectrum-alias-han-heading-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-han-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-han-heading-text-font-weight-light-emphasis: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-body-text-line-height: var( - --spectrum-global-font-line-height-large - ); - --spectrum-alias-han-body-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-body-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-subheading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-subheading-text-font-weight-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-detail-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); + --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-animation-duration-0: 0s; + --spectrum-global-animation-duration-100: 0.13s; + --spectrum-global-animation-duration-200: 0.16s; + --spectrum-global-animation-duration-300: 0.19s; + --spectrum-global-animation-duration-400: 0.22s; + --spectrum-global-animation-duration-500: 0.25s; + --spectrum-global-animation-duration-600: 0.3s; + --spectrum-global-animation-duration-700: 0.35s; + --spectrum-global-animation-duration-800: 0.4s; + --spectrum-global-animation-duration-900: 0.45s; + --spectrum-global-animation-duration-1000: 0.5s; + --spectrum-global-animation-duration-2000: 1s; + --spectrum-global-animation-duration-4000: 2s; + --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-static-black-rgb: 0, 0, 0; + --spectrum-global-color-static-black: rgb( + var(--spectrum-global-color-static-black-rgb) + ); + --spectrum-global-color-static-white-rgb: 255, 255, 255; + --spectrum-global-color-static-white: rgb( + var(--spectrum-global-color-static-white-rgb) + ); + --spectrum-global-color-static-blue-rgb: 0, 87, 191; + --spectrum-global-color-static-blue: rgb( + var(--spectrum-global-color-static-blue-rgb) + ); + --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-50: rgb( + var(--spectrum-global-color-static-gray-50-rgb) + ); + --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-75: rgb( + var(--spectrum-global-color-static-gray-75-rgb) + ); + --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-100: rgb( + var(--spectrum-global-color-static-gray-100-rgb) + ); + --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; + --spectrum-global-color-static-gray-200: rgb( + var(--spectrum-global-color-static-gray-200-rgb) + ); + --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; + --spectrum-global-color-static-gray-300: rgb( + var(--spectrum-global-color-static-gray-300-rgb) + ); + --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; + --spectrum-global-color-static-gray-400: rgb( + var(--spectrum-global-color-static-gray-400-rgb) + ); + --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; + --spectrum-global-color-static-gray-500: rgb( + var(--spectrum-global-color-static-gray-500-rgb) + ); + --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; + --spectrum-global-color-static-gray-600: rgb( + var(--spectrum-global-color-static-gray-600-rgb) + ); + --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; + --spectrum-global-color-static-gray-700: rgb( + var(--spectrum-global-color-static-gray-700-rgb) + ); + --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-static-gray-800: rgb( + var(--spectrum-global-color-static-gray-800-rgb) + ); + --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-static-gray-900: rgb( + var(--spectrum-global-color-static-gray-900-rgb) + ); + --spectrum-global-color-static-red-400-rgb: 237, 64, 48; + --spectrum-global-color-static-red-400: rgb( + var(--spectrum-global-color-static-red-400-rgb) + ); + --spectrum-global-color-static-red-500-rgb: 217, 28, 21; + --spectrum-global-color-static-red-500: rgb( + var(--spectrum-global-color-static-red-500-rgb) + ); + --spectrum-global-color-static-red-600-rgb: 187, 2, 2; + --spectrum-global-color-static-red-600: rgb( + var(--spectrum-global-color-static-red-600-rgb) + ); + --spectrum-global-color-static-red-700-rgb: 154, 0, 0; + --spectrum-global-color-static-red-700: rgb( + var(--spectrum-global-color-static-red-700-rgb) + ); + --spectrum-global-color-static-red-800-rgb: 124, 0, 0; + --spectrum-global-color-static-red-800: rgb( + var(--spectrum-global-color-static-red-800-rgb) + ); + --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; + --spectrum-global-color-static-orange-400: rgb( + var(--spectrum-global-color-static-orange-400-rgb) + ); + --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; + --spectrum-global-color-static-orange-500: rgb( + var(--spectrum-global-color-static-orange-500-rgb) + ); + --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; + --spectrum-global-color-static-orange-600: rgb( + var(--spectrum-global-color-static-orange-600-rgb) + ); + --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; + --spectrum-global-color-static-orange-700: rgb( + var(--spectrum-global-color-static-orange-700-rgb) + ); + --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; + --spectrum-global-color-static-orange-800: rgb( + var(--spectrum-global-color-static-orange-800-rgb) + ); + --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; + --spectrum-global-color-static-yellow-200: rgb( + var(--spectrum-global-color-static-yellow-200-rgb) + ); + --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; + --spectrum-global-color-static-yellow-300: rgb( + var(--spectrum-global-color-static-yellow-300-rgb) + ); + --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; + --spectrum-global-color-static-yellow-400: rgb( + var(--spectrum-global-color-static-yellow-400-rgb) + ); + --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; + --spectrum-global-color-static-yellow-500: rgb( + var(--spectrum-global-color-static-yellow-500-rgb) + ); + --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; + --spectrum-global-color-static-yellow-600: rgb( + var(--spectrum-global-color-static-yellow-600-rgb) + ); + --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; + --spectrum-global-color-static-yellow-700: rgb( + var(--spectrum-global-color-static-yellow-700-rgb) + ); + --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; + --spectrum-global-color-static-yellow-800: rgb( + var(--spectrum-global-color-static-yellow-800-rgb) + ); + --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; + --spectrum-global-color-static-chartreuse-300: rgb( + var(--spectrum-global-color-static-chartreuse-300-rgb) + ); + --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; + --spectrum-global-color-static-chartreuse-400: rgb( + var(--spectrum-global-color-static-chartreuse-400-rgb) + ); + --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; + --spectrum-global-color-static-chartreuse-500: rgb( + var(--spectrum-global-color-static-chartreuse-500-rgb) + ); + --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; + --spectrum-global-color-static-chartreuse-600: rgb( + var(--spectrum-global-color-static-chartreuse-600-rgb) + ); + --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; + --spectrum-global-color-static-chartreuse-700: rgb( + var(--spectrum-global-color-static-chartreuse-700-rgb) + ); + --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; + --spectrum-global-color-static-chartreuse-800: rgb( + var(--spectrum-global-color-static-chartreuse-800-rgb) + ); + --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; + --spectrum-global-color-static-celery-200: rgb( + var(--spectrum-global-color-static-celery-200-rgb) + ); + --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; + --spectrum-global-color-static-celery-300: rgb( + var(--spectrum-global-color-static-celery-300-rgb) + ); + --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; + --spectrum-global-color-static-celery-400: rgb( + var(--spectrum-global-color-static-celery-400-rgb) + ); + --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; + --spectrum-global-color-static-celery-500: rgb( + var(--spectrum-global-color-static-celery-500-rgb) + ); + --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; + --spectrum-global-color-static-celery-600: rgb( + var(--spectrum-global-color-static-celery-600-rgb) + ); + --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; + --spectrum-global-color-static-celery-700: rgb( + var(--spectrum-global-color-static-celery-700-rgb) + ); + --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; + --spectrum-global-color-static-celery-800: rgb( + var(--spectrum-global-color-static-celery-800-rgb) + ); + --spectrum-global-color-static-green-400-rgb: 29, 169, 115; + --spectrum-global-color-static-green-400: rgb( + var(--spectrum-global-color-static-green-400-rgb) + ); + --spectrum-global-color-static-green-500-rgb: 0, 148, 97; + --spectrum-global-color-static-green-500: rgb( + var(--spectrum-global-color-static-green-500-rgb) + ); + --spectrum-global-color-static-green-600-rgb: 0, 126, 80; + --spectrum-global-color-static-green-600: rgb( + var(--spectrum-global-color-static-green-600-rgb) + ); + --spectrum-global-color-static-green-700-rgb: 0, 105, 65; + --spectrum-global-color-static-green-700: rgb( + var(--spectrum-global-color-static-green-700-rgb) + ); + --spectrum-global-color-static-green-800-rgb: 0, 86, 53; + --spectrum-global-color-static-green-800: rgb( + var(--spectrum-global-color-static-green-800-rgb) + ); + --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; + --spectrum-global-color-static-seafoam-200: rgb( + var(--spectrum-global-color-static-seafoam-200-rgb) + ); + --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; + --spectrum-global-color-static-seafoam-300: rgb( + var(--spectrum-global-color-static-seafoam-300-rgb) + ); + --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; + --spectrum-global-color-static-seafoam-400: rgb( + var(--spectrum-global-color-static-seafoam-400-rgb) + ); + --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; + --spectrum-global-color-static-seafoam-500: rgb( + var(--spectrum-global-color-static-seafoam-500-rgb) + ); + --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; + --spectrum-global-color-static-seafoam-600: rgb( + var(--spectrum-global-color-static-seafoam-600-rgb) + ); + --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; + --spectrum-global-color-static-seafoam-700: rgb( + var(--spectrum-global-color-static-seafoam-700-rgb) + ); + --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; + --spectrum-global-color-static-seafoam-800: rgb( + var(--spectrum-global-color-static-seafoam-800-rgb) + ); + --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; + --spectrum-global-color-static-blue-200: rgb( + var(--spectrum-global-color-static-blue-200-rgb) + ); + --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; + --spectrum-global-color-static-blue-300: rgb( + var(--spectrum-global-color-static-blue-300-rgb) + ); + --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; + --spectrum-global-color-static-blue-400: rgb( + var(--spectrum-global-color-static-blue-400-rgb) + ); + --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; + --spectrum-global-color-static-blue-500: rgb( + var(--spectrum-global-color-static-blue-500-rgb) + ); + --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; + --spectrum-global-color-static-blue-600: rgb( + var(--spectrum-global-color-static-blue-600-rgb) + ); + --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; + --spectrum-global-color-static-blue-700: rgb( + var(--spectrum-global-color-static-blue-700-rgb) + ); + --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; + --spectrum-global-color-static-blue-800: rgb( + var(--spectrum-global-color-static-blue-800-rgb) + ); + --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; + --spectrum-global-color-static-indigo-200: rgb( + var(--spectrum-global-color-static-indigo-200-rgb) + ); + --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; + --spectrum-global-color-static-indigo-300: rgb( + var(--spectrum-global-color-static-indigo-300-rgb) + ); + --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; + --spectrum-global-color-static-indigo-400: rgb( + var(--spectrum-global-color-static-indigo-400-rgb) + ); + --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; + --spectrum-global-color-static-indigo-500: rgb( + var(--spectrum-global-color-static-indigo-500-rgb) + ); + --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; + --spectrum-global-color-static-indigo-600: rgb( + var(--spectrum-global-color-static-indigo-600-rgb) + ); + --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-700: rgb( + var(--spectrum-global-color-static-indigo-700-rgb) + ); + --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-800: rgb( + var(--spectrum-global-color-static-indigo-800-rgb) + ); + --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; + --spectrum-global-color-static-purple-400: rgb( + var(--spectrum-global-color-static-purple-400-rgb) + ); + --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; + --spectrum-global-color-static-purple-500: rgb( + var(--spectrum-global-color-static-purple-500-rgb) + ); + --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; + --spectrum-global-color-static-purple-600: rgb( + var(--spectrum-global-color-static-purple-600-rgb) + ); + --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; + --spectrum-global-color-static-purple-700: rgb( + var(--spectrum-global-color-static-purple-700-rgb) + ); + --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; + --spectrum-global-color-static-purple-800: rgb( + var(--spectrum-global-color-static-purple-800-rgb) + ); + --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; + --spectrum-global-color-static-fuchsia-400: rgb( + var(--spectrum-global-color-static-fuchsia-400-rgb) + ); + --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; + --spectrum-global-color-static-fuchsia-500: rgb( + var(--spectrum-global-color-static-fuchsia-500-rgb) + ); + --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; + --spectrum-global-color-static-fuchsia-600: rgb( + var(--spectrum-global-color-static-fuchsia-600-rgb) + ); + --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; + --spectrum-global-color-static-fuchsia-700: rgb( + var(--spectrum-global-color-static-fuchsia-700-rgb) + ); + --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; + --spectrum-global-color-static-fuchsia-800: rgb( + var(--spectrum-global-color-static-fuchsia-800-rgb) + ); + --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; + --spectrum-global-color-static-magenta-200: rgb( + var(--spectrum-global-color-static-magenta-200-rgb) + ); + --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; + --spectrum-global-color-static-magenta-300: rgb( + var(--spectrum-global-color-static-magenta-300-rgb) + ); + --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; + --spectrum-global-color-static-magenta-400: rgb( + var(--spectrum-global-color-static-magenta-400-rgb) + ); + --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; + --spectrum-global-color-static-magenta-500: rgb( + var(--spectrum-global-color-static-magenta-500-rgb) + ); + --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; + --spectrum-global-color-static-magenta-600: rgb( + var(--spectrum-global-color-static-magenta-600-rgb) + ); + --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; + --spectrum-global-color-static-magenta-700: rgb( + var(--spectrum-global-color-static-magenta-700-rgb) + ); + --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; + --spectrum-global-color-static-magenta-800: rgb( + var(--spectrum-global-color-static-magenta-800-rgb) + ); + --spectrum-global-color-static-transparent-white-200: #ffffff1a; + --spectrum-global-color-static-transparent-white-300: #ffffff40; + --spectrum-global-color-static-transparent-white-400: #fff6; + --spectrum-global-color-static-transparent-white-500: #ffffff8c; + --spectrum-global-color-static-transparent-white-600: #ffffffb3; + --spectrum-global-color-static-transparent-white-700: #fffc; + --spectrum-global-color-static-transparent-white-800: #ffffffe6; + --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; + --spectrum-global-color-static-transparent-white-900: rgb( + var(--spectrum-global-color-static-transparent-white-900-rgb) + ); + --spectrum-global-color-static-transparent-black-200: #0000001a; + --spectrum-global-color-static-transparent-black-300: #00000040; + --spectrum-global-color-static-transparent-black-400: #0006; + --spectrum-global-color-static-transparent-black-500: #0000008c; + --spectrum-global-color-static-transparent-black-600: #000000b3; + --spectrum-global-color-static-transparent-black-700: #000c; + --spectrum-global-color-static-transparent-black-800: #000000e6; + --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; + --spectrum-global-color-static-transparent-black-900: rgb( + var(--spectrum-global-color-static-transparent-black-900-rgb) + ); + --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, + #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, + #1a4b83, #1a3979, #1a266f, #191264, #180057; + --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, #a4e16d, + #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, #196b47, + #105c45, #094d41, #033f3e, #00313a; + --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, + #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, + #71167c, #560f74, #370b6e, #000968; + --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, + #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, + #3ea8a6, #208288, #076769, #00494b, #002c2d; + --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, + #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, + #397aa8, #1c5796, #163771, #10194d; + --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, + #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, + #2f74b3, #265191, #163670, #0b194c; + --spectrum-semantic-negative-background-color: var( + --spectrum-global-color-static-red-600 + ); + --spectrum-semantic-negative-color-default: var( + --spectrum-global-color-red-500 + ); + --spectrum-semantic-negative-color-hover: var( + --spectrum-global-color-red-600 + ); + --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-border-color: var( + --spectrum-global-color-red-400 + ); + --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-status-color: var( + --spectrum-global-color-red-400 + ); + --spectrum-semantic-negative-text-color-large: var( + --spectrum-global-color-red-500 + ); + --spectrum-semantic-negative-text-color-small: var( + --spectrum-global-color-red-600 + ); + --spectrum-semantic-negative-text-color-small-hover: var( + --spectrum-global-color-red-700 + ); + --spectrum-semantic-negative-text-color-small-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-semantic-negative-text-color-small-key-focus: var( + --spectrum-global-color-red-600 + ); + --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-color-key-focus: var( + --spectrum-global-color-red-400 + ); + --spectrum-semantic-negative-background-color-default: var( + --spectrum-global-color-static-red-600 + ); + --spectrum-semantic-negative-background-color-hover: var( + --spectrum-global-color-static-red-700 + ); + --spectrum-semantic-negative-background-color-down: var( + --spectrum-global-color-static-red-800 + ); + --spectrum-semantic-negative-background-color-key-focus: var( + --spectrum-global-color-static-red-700 + ); + --spectrum-semantic-notice-background-color: var( + --spectrum-global-color-static-orange-600 + ); + --spectrum-semantic-notice-color-default: var( + --spectrum-global-color-orange-500 + ); + --spectrum-semantic-notice-color-dark: var( + --spectrum-global-color-orange-600 + ); + --spectrum-semantic-notice-border-color: var( + --spectrum-global-color-orange-400 + ); + --spectrum-semantic-notice-icon-color: var( + --spectrum-global-color-orange-600 + ); + --spectrum-semantic-notice-status-color: var( + --spectrum-global-color-orange-400 + ); + --spectrum-semantic-notice-text-color-large: var( + --spectrum-global-color-orange-500 + ); + --spectrum-semantic-notice-text-color-small: var( + --spectrum-global-color-orange-600 + ); + --spectrum-semantic-notice-color-down: var( + --spectrum-global-color-orange-700 + ); + --spectrum-semantic-notice-color-key-focus: var( + --spectrum-global-color-orange-400 + ); + --spectrum-semantic-notice-background-color-default: var( + --spectrum-global-color-static-orange-600 + ); + --spectrum-semantic-notice-background-color-hover: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-semantic-notice-background-color-down: var( + --spectrum-global-color-static-orange-800 + ); + --spectrum-semantic-notice-background-color-key-focus: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-semantic-positive-background-color: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-semantic-positive-color-default: var( + --spectrum-global-color-green-500 + ); + --spectrum-semantic-positive-color-dark: var( + --spectrum-global-color-green-600 + ); + --spectrum-semantic-positive-border-color: var( + --spectrum-global-color-green-400 + ); + --spectrum-semantic-positive-icon-color: var( + --spectrum-global-color-green-600 + ); + --spectrum-semantic-positive-status-color: var( + --spectrum-global-color-green-400 + ); + --spectrum-semantic-positive-text-color-large: var( + --spectrum-global-color-green-500 + ); + --spectrum-semantic-positive-text-color-small: var( + --spectrum-global-color-green-600 + ); + --spectrum-semantic-positive-color-down: var( + --spectrum-global-color-green-700 + ); + --spectrum-semantic-positive-color-key-focus: var( + --spectrum-global-color-green-400 + ); + --spectrum-semantic-positive-background-color-default: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-semantic-positive-background-color-hover: var( + --spectrum-global-color-static-green-700 + ); + --spectrum-semantic-positive-background-color-down: var( + --spectrum-global-color-static-green-800 + ); + --spectrum-semantic-positive-background-color-key-focus: var( + --spectrum-global-color-static-green-700 + ); + --spectrum-semantic-informative-background-color: var( + --spectrum-global-color-static-blue-600 + ); + --spectrum-semantic-informative-color-default: var( + --spectrum-global-color-blue-500 + ); + --spectrum-semantic-informative-color-dark: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-informative-border-color: var( + --spectrum-global-color-blue-400 + ); + --spectrum-semantic-informative-icon-color: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-informative-status-color: var( + --spectrum-global-color-blue-400 + ); + --spectrum-semantic-informative-text-color-large: var( + --spectrum-global-color-blue-500 + ); + --spectrum-semantic-informative-text-color-small: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-informative-color-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-semantic-informative-color-key-focus: var( + --spectrum-global-color-blue-400 + ); + --spectrum-semantic-informative-background-color-default: var( + --spectrum-global-color-static-blue-600 + ); + --spectrum-semantic-informative-background-color-hover: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-informative-background-color-down: var( + --spectrum-global-color-static-blue-800 + ); + --spectrum-semantic-informative-background-color-key-focus: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-cta-background-color-default: var( + --spectrum-global-color-static-blue-600 + ); + --spectrum-semantic-cta-background-color-hover: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-cta-background-color-down: var( + --spectrum-global-color-static-blue-800 + ); + --spectrum-semantic-cta-background-color-key-focus: var( + --spectrum-global-color-static-blue-700 + ); + --spectrum-semantic-emphasized-border-color-default: var( + --spectrum-global-color-blue-500 + ); + --spectrum-semantic-emphasized-border-color-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-emphasized-border-color-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-semantic-emphasized-border-color-key-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-semantic-neutral-background-color-default: var( + --spectrum-global-color-static-gray-700 + ); + --spectrum-semantic-neutral-background-color-hover: var( + --spectrum-global-color-static-gray-800 + ); + --spectrum-semantic-neutral-background-color-down: var( + --spectrum-global-color-static-gray-900 + ); + --spectrum-semantic-neutral-background-color-key-focus: var( + --spectrum-global-color-static-gray-800 + ); + --spectrum-semantic-presence-color-1: var( + --spectrum-global-color-static-red-500 + ); + --spectrum-semantic-presence-color-2: var( + --spectrum-global-color-static-orange-400 + ); + --spectrum-semantic-presence-color-3: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; + --spectrum-semantic-presence-color-4: rgb( + var(--spectrum-semantic-presence-color-4-rgb) + ); + --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; + --spectrum-semantic-presence-color-5: rgb( + var(--spectrum-semantic-presence-color-5-rgb) + ); + --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; + --spectrum-semantic-presence-color-6: rgb( + var(--spectrum-semantic-presence-color-6-rgb) + ); + --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; + --spectrum-semantic-presence-color-7: rgb( + var(--spectrum-semantic-presence-color-7-rgb) + ); + --spectrum-semantic-presence-color-8: var( + --spectrum-global-color-static-fuchsia-600 + ); + --spectrum-global-dimension-static-percent-50: 50%; + --spectrum-global-dimension-static-percent-70: 70%; + --spectrum-global-dimension-static-percent-100: 100%; + --spectrum-global-dimension-static-breakpoint-xsmall: 304px; + --spectrum-global-dimension-static-breakpoint-small: 768px; + --spectrum-global-dimension-static-breakpoint-medium: 1280px; + --spectrum-global-dimension-static-breakpoint-large: 1768px; + --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; + --spectrum-global-dimension-static-grid-columns: 12; + --spectrum-global-dimension-static-grid-fluid-width: 100%; + --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; + --spectrum-global-dimension-static-size-0: 0px; + --spectrum-global-dimension-static-size-10: 1px; + --spectrum-global-dimension-static-size-25: 2px; + --spectrum-global-dimension-static-size-40: 3px; + --spectrum-global-dimension-static-size-50: 4px; + --spectrum-global-dimension-static-size-65: 5px; + --spectrum-global-dimension-static-size-75: 6px; + --spectrum-global-dimension-static-size-85: 7px; + --spectrum-global-dimension-static-size-100: 8px; + --spectrum-global-dimension-static-size-115: 9px; + --spectrum-global-dimension-static-size-125: 10px; + --spectrum-global-dimension-static-size-130: 11px; + --spectrum-global-dimension-static-size-150: 12px; + --spectrum-global-dimension-static-size-160: 13px; + --spectrum-global-dimension-static-size-175: 14px; + --spectrum-global-dimension-static-size-185: 15px; + --spectrum-global-dimension-static-size-200: 16px; + --spectrum-global-dimension-static-size-225: 18px; + --spectrum-global-dimension-static-size-250: 20px; + --spectrum-global-dimension-static-size-275: 22px; + --spectrum-global-dimension-static-size-300: 24px; + --spectrum-global-dimension-static-size-325: 26px; + --spectrum-global-dimension-static-size-350: 28px; + --spectrum-global-dimension-static-size-400: 32px; + --spectrum-global-dimension-static-size-450: 36px; + --spectrum-global-dimension-static-size-500: 40px; + --spectrum-global-dimension-static-size-550: 44px; + --spectrum-global-dimension-static-size-600: 48px; + --spectrum-global-dimension-static-size-700: 56px; + --spectrum-global-dimension-static-size-800: 64px; + --spectrum-global-dimension-static-size-900: 72px; + --spectrum-global-dimension-static-size-1000: 80px; + --spectrum-global-dimension-static-size-1200: 96px; + --spectrum-global-dimension-static-size-1700: 136px; + --spectrum-global-dimension-static-size-2400: 192px; + --spectrum-global-dimension-static-size-2500: 200px; + --spectrum-global-dimension-static-size-2600: 208px; + --spectrum-global-dimension-static-size-2800: 224px; + --spectrum-global-dimension-static-size-3200: 256px; + --spectrum-global-dimension-static-size-3400: 272px; + --spectrum-global-dimension-static-size-3500: 280px; + --spectrum-global-dimension-static-size-3600: 288px; + --spectrum-global-dimension-static-size-3800: 304px; + --spectrum-global-dimension-static-size-4600: 368px; + --spectrum-global-dimension-static-size-5000: 400px; + --spectrum-global-dimension-static-size-6000: 480px; + --spectrum-global-dimension-static-size-16000: 1280px; + --spectrum-global-dimension-static-font-size-50: 11px; + --spectrum-global-dimension-static-font-size-75: 12px; + --spectrum-global-dimension-static-font-size-100: 14px; + --spectrum-global-dimension-static-font-size-150: 15px; + --spectrum-global-dimension-static-font-size-200: 16px; + --spectrum-global-dimension-static-font-size-300: 18px; + --spectrum-global-dimension-static-font-size-400: 20px; + --spectrum-global-dimension-static-font-size-500: 22px; + --spectrum-global-dimension-static-font-size-600: 25px; + --spectrum-global-dimension-static-font-size-700: 28px; + --spectrum-global-dimension-static-font-size-800: 32px; + --spectrum-global-dimension-static-font-size-900: 36px; + --spectrum-global-dimension-static-font-size-1000: 40px; + --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, + "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-family-serif: adobe-clean-serif, "Source Serif Pro", + Georgia, serif; + --spectrum-global-font-family-code: "Source Code Pro", Monaco, monospace; + --spectrum-global-font-weight-thin: 100; + --spectrum-global-font-weight-ultra-light: 200; + --spectrum-global-font-weight-light: 300; + --spectrum-global-font-weight-regular: 400; + --spectrum-global-font-weight-medium: 500; + --spectrum-global-font-weight-semi-bold: 600; + --spectrum-global-font-weight-bold: 700; + --spectrum-global-font-weight-extra-bold: 800; + --spectrum-global-font-weight-black: 900; + --spectrum-global-font-style-regular: normal; + --spectrum-global-font-style-italic: italic; + --spectrum-global-font-letter-spacing-none: 0; + --spectrum-global-font-letter-spacing-small: 0.0125em; + --spectrum-global-font-letter-spacing-han: 0.05em; + --spectrum-global-font-letter-spacing-medium: 0.06em; + --spectrum-global-font-line-height-large: 1.7; + --spectrum-global-font-line-height-medium: 1.5; + --spectrum-global-font-line-height-small: 1.3; + --spectrum-global-font-multiplier-0: 0em; + --spectrum-global-font-multiplier-25: 0.25em; + --spectrum-global-font-multiplier-75: 0.75em; + --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, + "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, + "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, + source-han-traditional, "MingLiu", "Heiti TC Light", "sans-serif"; + --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, + source-han-simplified-c, "SimSun", "Heiti SC Light", "sans-serif"; + --spectrum-global-font-font-family-ko: adobe-clean-han-korean, + source-han-korean, "Malgun Gothic", "Apple Gothic", "sans-serif"; + --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, + "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", YuGothic, + "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", + "sans-serif"; + --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, + source-han-traditional, "MingLiu", "Heiti TC Light", adobe-clean, + "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-alias-border-size-thin: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-border-size-thick: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-size-thicker: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-size-thickest: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thin: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-offset-thick: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-offset-thicker: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thickest: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-baseline: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-grid-gutter-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-gutter-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-gutter-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-gutter-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-gutter-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-margin-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-margin-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-margin-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-margin-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-margin-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-layout-region-margin-bottom-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-layout-region-margin-bottom-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-radial-reaction-size-default: var( + --spectrum-global-dimension-static-size-550 + ); + --spectrum-alias-focus-ring-gap: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-focus-ring-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-loupe-entry-animation-duration: var( + --spectrum-global-animation-duration-300 + ); + --spectrum-alias-loupe-exit-animation-duration: var( + --spectrum-global-animation-duration-300 + ); + --spectrum-alias-heading-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-heading-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-heading-text-font-weight-regular-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-light: var( + --spectrum-global-font-weight-light + ); + --spectrum-alias-heading-text-font-weight-light-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-heading-text-font-weight-heavy: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-heavy-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-quiet: var( + --spectrum-global-font-weight-light + ); + --spectrum-alias-heading-text-font-weight-quiet-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-heading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-text-font-weight-strong-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-heading-margin-bottom: var( + --spectrum-global-font-multiplier-25 + ); + --spectrum-alias-subheading-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-subheading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-body-text-font-family: var( + --spectrum-global-font-family-base + ); + --spectrum-alias-body-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-body-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-body-text-font-weight-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-body-margin-bottom: var( + --spectrum-global-font-multiplier-75 + ); + --spectrum-alias-detail-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-detail-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-detail-text-font-weight-light: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-detail-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-heading-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-article-heading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-heading-text-font-weight-quiet: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-article-heading-text-font-weight-quiet-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-article-body-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-article-body-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-subheading-text-font-weight: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-article-subheading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-article-detail-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-article-detail-text-font-weight-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-code-text-font-family: var( + --spectrum-global-font-family-code + ); + --spectrum-alias-code-text-font-weight-regular: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-code-text-font-weight-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-code-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0); + --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); + --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); + --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); + --spectrum-alias-font-family-zhhans: var( + --spectrum-global-font-font-family-zhhans + ); + --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); + --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); + --spectrum-alias-font-family-condensed: var( + --spectrum-global-font-font-family-condensed + ); + --spectrum-alias-button-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-component-text-line-height: var( + --spectrum-global-font-line-height-small + ); + --spectrum-alias-han-component-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-serif-text-font-family: var( + --spectrum-global-font-family-serif + ); + --spectrum-alias-han-heading-text-line-height: var( + --spectrum-global-font-line-height-medium + ); + --spectrum-alias-han-heading-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var( + --spectrum-global-font-weight-extra-bold + ); + --spectrum-alias-han-heading-text-font-weight-regular-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-heading-text-font-weight-light: var( + --spectrum-global-font-weight-light + ); + --spectrum-alias-han-heading-text-font-weight-light-emphasis: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-han-heading-text-font-weight-light-strong: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-heading-text-font-weight-heavy: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-body-text-line-height: var( + --spectrum-global-font-line-height-large + ); + --spectrum-alias-han-body-text-font-weight-regular: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-han-body-text-font-weight-emphasis: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-body-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-subheading-text-font-weight-regular: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-subheading-text-font-weight-emphasis: var( + --spectrum-global-font-weight-extra-bold + ); + --spectrum-alias-han-subheading-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); + --spectrum-alias-han-detail-text-font-weight: var( + --spectrum-global-font-weight-regular + ); + --spectrum-alias-han-detail-text-font-weight-emphasis: var( + --spectrum-global-font-weight-bold + ); + --spectrum-alias-han-detail-text-font-weight-strong: var( + --spectrum-global-font-weight-black + ); } :root, :host { - --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); - --spectrum-alias-item-rounded-border-radius-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-border-radius-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-border-radius-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-border-radius-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-text-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-item-text-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-item-text-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-item-text-size-xl: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-item-text-padding-top-s: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-item-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-text-padding-top-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-text-padding-bottom-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-text-padding-bottom-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-icon-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-top-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-icon-padding-bottom-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-bottom-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-bottom-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-bottom-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); - --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); - --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); - --spectrum-alias-item-rounded-padding-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-padding-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-padding-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-padding-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-icononly-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icononly-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icononly-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icononly-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-gap-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-gap-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-gap-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-control-gap-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-workflow-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-workflow-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); - --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); - --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-mark-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-ui-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-ui-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-ui-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-ui-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-clearbutton-gap-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-clearbutton-gap-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-workflow-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-rounded-workflow-padding-left-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-padding-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-top-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-bottom-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-bottom-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-bottom-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-mark-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-mark-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-1-size-s: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-item-control-1-size-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-2-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-2-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-2-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-control-2-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-2-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-2-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-3-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-3-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-3-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-3-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-3-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-3-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-mark-size-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-size-l: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-item-mark-size-xl: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-heading-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-xxl-text-size: var( - --spectrum-global-dimension-font-size-1100 - ); - --spectrum-alias-heading-xl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-l-text-size: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-m-text-size: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-xxl-margin-top: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-xl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-l-margin-top: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-m-margin-top: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-heading-han-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-han-xxl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-han-xl-text-size: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-l-text-size: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-han-m-text-size: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-han-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-han-xxl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-xl-margin-top: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-han-l-margin-top: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-han-m-margin-top: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-component-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-component-border-radius-quiet: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-component-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-component-focusring-gap-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-component-focusring-size-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-input-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-input-quiet-focusline-gap: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-control-two-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-two-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-two-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-control-two-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-control-two-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-control-two-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-control-two-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-control-two-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-control-two-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-focus-ring-border-radius-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-focus-ring-border-radius-m: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-control-two-focus-ring-border-radius-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xxl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-three-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-infieldbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-infieldbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-infieldbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-infieldbutton-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-border-radius-sided: 0; - --spectrum-alias-infieldbutton-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-infieldbutton-fill-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-fill-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-infieldbutton-fill-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-infieldbutton-fill-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-infieldbutton-padding-s: 0; - --spectrum-alias-infieldbutton-padding-m: 0; - --spectrum-alias-infieldbutton-padding-l: 0; - --spectrum-alias-infieldbutton-padding-xl: 0; - --spectrum-alias-infieldbutton-full-height-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-infieldbutton-full-height-m: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-infieldbutton-full-height-l: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-infieldbutton-full-height-xl: var( - --spectrum-global-dimension-size-600 - ); - --spectrum-alias-infieldbutton-half-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-infieldbutton-half-height-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-infieldbutton-half-height-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-infieldbutton-half-height-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-stepperbutton-gap: 0; - --spectrum-alias-stepperbutton-width-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-stepperbutton-width-m: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-stepperbutton-width-l: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-stepperbutton-width-xl: var( - --spectrum-global-dimension-size-450 - ); - --spectrum-alias-stepperbutton-icon-x-offset-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-x-offset-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-stepperbutton-icon-x-offset-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-stepperbutton-icon-x-offset-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-s: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-radius-touching: 0; - --spectrum-alias-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-clearbutton-icon-margin-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-clearbutton-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-pickerbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-pickerbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-pickerbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-pickerbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-pickerbutton-label-padding-y-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-label-padding-y-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-pickerbutton-label-padding-y-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-pickerbutton-label-padding-y-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-border-radius-rounded: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0; - --spectrum-alias-search-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-search-border-radius-quiet: 0; - --spectrum-alias-combobox-quiet-button-offset-x: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-thumbnail-border-radius-small: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-actiongroup-button-gap: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-compact: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-actiongroup-button-gap-quiet: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-quiet-compact: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-search-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-search-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-search-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-percent-50: 50%; - --spectrum-alias-percent-70: 70%; - --spectrum-alias-percent-100: 100%; - --spectrum-alias-breakpoint-xsmall: 304px; - --spectrum-alias-breakpoint-small: 768px; - --spectrum-alias-breakpoint-medium: 1280px; - --spectrum-alias-breakpoint-large: 1768px; - --spectrum-alias-breakpoint-xlarge: 2160px; - --spectrum-alias-grid-columns: 12; - --spectrum-alias-grid-fluid-width: 100%; - --spectrum-alias-grid-fixed-max-width: 1280px; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-gap-small: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-focus-ring-size-small: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); - --spectrum-alias-dropshadow-offset-y: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-font-size-default: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-layout-label-gap-size: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-pill-button-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-pill-button-text-baseline: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-border-radius-xsmall: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-border-radius-small: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-border-radius-regular: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-border-radius-medium: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-border-radius-large: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-border-radius-xlarge: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-focus-ring-border-radius-xsmall: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-focus-ring-border-radius-small: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-focus-ring-border-radius-medium: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-focus-ring-border-radius-large: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-focus-ring-border-radius-xlarge: var( - --spectrum-global-dimension-size-350 - ); - --spectrum-alias-single-line-height: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-single-line-width: var( - --spectrum-global-dimension-size-2400 - ); - --spectrum-alias-workflow-icon-size-s: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-workflow-icon-size-m: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-workflow-icon-size-xl: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-alert-size-75: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-alert-size-100: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-ui-icon-alert-size-200: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-ui-icon-alert-size-300: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-height: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-width: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-width: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-ui-icon-cornertriangle-size-75: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-200: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-ui-icon-asterisk-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-100: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); - --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); - --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); - --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); - --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); - --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); - --spectrum-alias-avatar-border-size: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-tag-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-border-size-default: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-tag-border-size-key-focus: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-border-size-disabled: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-tag-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-tag-padding-right-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-padding-right-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-tag-padding-right-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-tag-font-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-tag-font-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-tag-font-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-tag-text-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-tag-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200); - --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225); - --spectrum-alias-tag-icon-margin-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-icon-margin-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-tag-icon-margin-right-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-right-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-icon-margin-right-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-clearbutton-width-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-tag-clearbutton-width-m: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-tag-clearbutton-width-l: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-tag-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-tag-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-tag-focusring-size: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-tag-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-tag-focusring-gap-selected: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-colorloupe-width: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-colorloupe-height: var( - --spectrum-global-dimension-static-size-800 - ); + --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); + --spectrum-alias-item-rounded-border-radius-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-rounded-border-radius-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-rounded-border-radius-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-rounded-border-radius-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-item-text-size-s: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-item-text-size-m: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-item-text-size-l: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-item-text-size-xl: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-item-text-padding-top-s: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-item-text-padding-top-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-text-padding-top-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-text-padding-bottom-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-text-padding-bottom-l: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-text-padding-bottom-xl: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-icon-padding-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icon-padding-top-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icon-padding-top-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icon-padding-top-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-icon-padding-bottom-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icon-padding-bottom-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icon-padding-bottom-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icon-padding-bottom-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-rounded-padding-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-rounded-padding-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-rounded-padding-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-rounded-padding-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-item-icononly-padding-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-icononly-padding-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-icononly-padding-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-icononly-padding-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-gap-s: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-gap-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-gap-l: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-control-gap-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-workflow-icon-gap-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-workflow-icon-gap-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-workflow-icon-gap-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-workflow-icon-gap-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-ui-icon-gap-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-ui-icon-gap-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-ui-icon-gap-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-clearbutton-gap-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-item-clearbutton-gap-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-clearbutton-gap-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-clearbutton-gap-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-workflow-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-workflow-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-workflow-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-rounded-workflow-padding-left-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-rounded-workflow-padding-left-l: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-mark-padding-top-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-item-mark-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-mark-padding-top-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-mark-padding-bottom-s: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-item-mark-padding-bottom-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-mark-padding-bottom-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-item-mark-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-mark-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-mark-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-control-1-size-s: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-item-control-1-size-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-2-size-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-control-2-size-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-control-2-size-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-control-2-size-xxl: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-item-control-2-border-radius-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-2-border-radius-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-control-2-border-radius-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-2-border-radius-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-2-border-radius-xxl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-2-padding-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-2-padding-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-2-padding-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-2-padding-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-control-3-height-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-control-3-height-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-item-control-3-height-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-item-control-3-border-radius-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-3-border-radius-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-item-control-3-border-radius-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-item-control-3-border-radius-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-3-padding-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-item-control-3-padding-m: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-control-3-padding-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-padding-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275); + --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325); + --spectrum-alias-heading-xxxl-text-size: var( + --spectrum-global-dimension-font-size-1300 + ); + --spectrum-alias-heading-xxl-text-size: var( + --spectrum-global-dimension-font-size-1100 + ); + --spectrum-alias-heading-xl-text-size: var( + --spectrum-global-dimension-font-size-900 + ); + --spectrum-alias-heading-l-text-size: var( + --spectrum-global-dimension-font-size-700 + ); + --spectrum-alias-heading-m-text-size: var( + --spectrum-global-dimension-font-size-500 + ); + --spectrum-alias-heading-s-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-heading-xs-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-xxs-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-xxxl-margin-top: var( + --spectrum-global-dimension-font-size-1200 + ); + --spectrum-alias-heading-xxl-margin-top: var( + --spectrum-global-dimension-font-size-900 + ); + --spectrum-alias-heading-xl-margin-top: var( + --spectrum-global-dimension-font-size-800 + ); + --spectrum-alias-heading-l-margin-top: var( + --spectrum-global-dimension-font-size-600 + ); + --spectrum-alias-heading-m-margin-top: var( + --spectrum-global-dimension-font-size-400 + ); + --spectrum-alias-heading-s-margin-top: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-xs-margin-top: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-xxs-margin-top: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-heading-han-xxxl-text-size: var( + --spectrum-global-dimension-font-size-1300 + ); + --spectrum-alias-heading-han-xxl-text-size: var( + --spectrum-global-dimension-font-size-900 + ); + --spectrum-alias-heading-han-xl-text-size: var( + --spectrum-global-dimension-font-size-800 + ); + --spectrum-alias-heading-han-l-text-size: var( + --spectrum-global-dimension-font-size-600 + ); + --spectrum-alias-heading-han-m-text-size: var( + --spectrum-global-dimension-font-size-400 + ); + --spectrum-alias-heading-han-s-text-size: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-heading-han-xs-text-size: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-han-xxs-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-han-xxxl-margin-top: var( + --spectrum-global-dimension-font-size-1200 + ); + --spectrum-alias-heading-han-xxl-margin-top: var( + --spectrum-global-dimension-font-size-800 + ); + --spectrum-alias-heading-han-xl-margin-top: var( + --spectrum-global-dimension-font-size-700 + ); + --spectrum-alias-heading-han-l-margin-top: var( + --spectrum-global-dimension-font-size-500 + ); + --spectrum-alias-heading-han-m-margin-top: var( + --spectrum-global-dimension-font-size-300 + ); + --spectrum-alias-heading-han-s-margin-top: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-heading-han-xs-margin-top: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-heading-han-xxs-margin-top: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-component-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-component-border-radius-quiet: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-component-focusring-gap: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-component-focusring-gap-emphasized: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-component-focusring-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-component-focusring-size-emphasized: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-input-border-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-input-focusring-gap: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-input-quiet-focusline-gap: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-control-two-size-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-control-two-size-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-control-two-size-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-control-two-size-xxl: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-control-two-border-radius-s: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-control-two-border-radius-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-control-two-border-radius-l: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-control-two-border-radius-xl: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-control-two-border-radius-xxl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-control-two-focus-ring-border-radius-s: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-control-two-focus-ring-border-radius-m: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-control-two-focus-ring-border-radius-l: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-control-two-focus-ring-border-radius-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-control-two-focus-ring-border-radius-xxl: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-control-three-height-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-control-three-height-l: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-control-three-height-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-infieldbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-infieldbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-infieldbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-infieldbutton-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-border-radius-sided: 0; + --spectrum-alias-infieldbutton-border-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-infieldbutton-fill-padding-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-infieldbutton-fill-padding-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-infieldbutton-fill-padding-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-infieldbutton-fill-padding-xl: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-infieldbutton-padding-s: 0; + --spectrum-alias-infieldbutton-padding-m: 0; + --spectrum-alias-infieldbutton-padding-l: 0; + --spectrum-alias-infieldbutton-padding-xl: 0; + --spectrum-alias-infieldbutton-full-height-s: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-infieldbutton-full-height-m: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-infieldbutton-full-height-l: var( + --spectrum-global-dimension-size-500 + ); + --spectrum-alias-infieldbutton-full-height-xl: var( + --spectrum-global-dimension-size-600 + ); + --spectrum-alias-infieldbutton-half-height-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-infieldbutton-half-height-m: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-infieldbutton-half-height-l: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-infieldbutton-half-height-xl: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-stepperbutton-gap: 0; + --spectrum-alias-stepperbutton-width-s: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-stepperbutton-width-m: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-stepperbutton-width-l: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-stepperbutton-width-xl: var( + --spectrum-global-dimension-size-450 + ); + --spectrum-alias-stepperbutton-icon-x-offset-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-icon-x-offset-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-stepperbutton-icon-x-offset-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-stepperbutton-icon-x-offset-xl: var( + --spectrum-global-dimension-size-130 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-s: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var( + --spectrum-global-dimension-size-40 + ); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-stepperbutton-radius-touching: 0; + --spectrum-alias-clearbutton-icon-margin-s: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-clearbutton-icon-margin-m: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-clearbutton-icon-margin-l: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-clearbutton-icon-margin-xl: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-clearbutton-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-pickerbutton-icon-margin-y-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-pickerbutton-icon-margin-y-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-pickerbutton-icon-margin-y-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-pickerbutton-icon-margin-y-xl: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-pickerbutton-label-padding-y-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-pickerbutton-label-padding-y-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-pickerbutton-label-padding-y-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-pickerbutton-label-padding-y-xl: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-pickerbutton-border-radius-rounded: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0; + --spectrum-alias-search-border-radius: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-search-border-radius-quiet: 0; + --spectrum-alias-combobox-quiet-button-offset-x: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-thumbnail-border-radius-small: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-actiongroup-button-gap: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-compact: var( + --spectrum-global-dimension-size-0 + ); + --spectrum-alias-actiongroup-button-gap-quiet: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-actiongroup-button-gap-quiet-compact: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-search-padding-left-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-search-padding-left-l: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-search-padding-left-xl: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-percent-50: 50%; + --spectrum-alias-percent-70: 70%; + --spectrum-alias-percent-100: 100%; + --spectrum-alias-breakpoint-xsmall: 304px; + --spectrum-alias-breakpoint-small: 768px; + --spectrum-alias-breakpoint-medium: 1280px; + --spectrum-alias-breakpoint-large: 1768px; + --spectrum-alias-breakpoint-xlarge: 2160px; + --spectrum-alias-grid-columns: 12; + --spectrum-alias-grid-fluid-width: 100%; + --spectrum-alias-grid-fixed-max-width: 1280px; + --spectrum-alias-border-size-thin: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-border-size-thick: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-size-thicker: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-size-thickest: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thin: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-border-offset-thick: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-border-offset-thicker: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-border-offset-thickest: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-baseline: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-grid-gutter-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-gutter-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-gutter-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-gutter-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-gutter-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-margin-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-margin-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-margin-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-margin-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-margin-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-grid-layout-region-margin-bottom-small: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var( + --spectrum-global-dimension-static-size-400 + ); + --spectrum-alias-grid-layout-region-margin-bottom-large: var( + --spectrum-global-dimension-static-size-500 + ); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-radial-reaction-size-default: var( + --spectrum-global-dimension-static-size-550 + ); + --spectrum-alias-focus-ring-gap: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-focus-ring-size: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-focus-ring-gap-small: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-focus-ring-size-small: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); + --spectrum-alias-dropshadow-offset-y: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-font-size-default: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-layout-label-gap-size: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-pill-button-text-size: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-pill-button-text-baseline: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-border-radius-xsmall: var( + --spectrum-global-dimension-size-10 + ); + --spectrum-alias-border-radius-small: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-border-radius-regular: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-border-radius-medium: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-border-radius-large: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-border-radius-xlarge: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-focus-ring-border-radius-xsmall: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-focus-ring-border-radius-small: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-focus-ring-border-radius-medium: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-focus-ring-border-radius-large: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-focus-ring-border-radius-xlarge: var( + --spectrum-global-dimension-size-350 + ); + --spectrum-alias-single-line-height: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-single-line-width: var( + --spectrum-global-dimension-size-2400 + ); + --spectrum-alias-workflow-icon-size-s: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-workflow-icon-size-m: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-workflow-icon-size-xl: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-ui-icon-alert-size-75: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-ui-icon-alert-size-100: var( + --spectrum-global-dimension-size-225 + ); + --spectrum-alias-ui-icon-alert-size-200: var( + --spectrum-global-dimension-size-250 + ); + --spectrum-alias-ui-icon-alert-size-300: var( + --spectrum-global-dimension-size-275 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-height: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-width: var( + --spectrum-global-dimension-size-200 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-width: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-ui-icon-cornertriangle-size-75: var( + --spectrum-global-dimension-size-65 + ); + --spectrum-alias-ui-icon-cornertriangle-size-200: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-ui-icon-asterisk-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-asterisk-size-100: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); + --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); + --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); + --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); + --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); + --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); + --spectrum-alias-avatar-border-size: var(--spectrum-global-dimension-size-0); + --spectrum-alias-tag-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-border-size-default: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-tag-border-size-key-focus: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-tag-border-size-disabled: var( + --spectrum-global-dimension-size-0 + ); + --spectrum-alias-tag-border-size: var( + --spectrum-global-dimension-static-size-10 + ); + --spectrum-alias-tag-padding-right-s: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-padding-right-m: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-tag-padding-right-l: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-font-size-s: var( + --spectrum-global-dimension-font-size-75 + ); + --spectrum-alias-tag-font-size-m: var( + --spectrum-global-dimension-font-size-100 + ); + --spectrum-alias-tag-font-size-l: var( + --spectrum-global-dimension-font-size-200 + ); + --spectrum-alias-tag-text-padding-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-text-padding-top-m: var( + --spectrum-global-dimension-size-75 + ); + --spectrum-alias-tag-text-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200); + --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225); + --spectrum-alias-tag-icon-margin-top-s: var( + --spectrum-global-dimension-size-50 + ); + --spectrum-alias-tag-icon-margin-top-m: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-margin-top-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-tag-icon-margin-right-s: var( + --spectrum-global-dimension-size-85 + ); + --spectrum-alias-tag-icon-margin-right-m: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-icon-margin-right-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-tag-clearbutton-width-s: var( + --spectrum-global-dimension-size-300 + ); + --spectrum-alias-tag-clearbutton-width-m: var( + --spectrum-global-dimension-size-400 + ); + --spectrum-alias-tag-clearbutton-width-l: var( + --spectrum-global-dimension-size-500 + ); + --spectrum-alias-tag-clearbutton-icon-margin-s: var( + --spectrum-global-dimension-size-100 + ); + --spectrum-alias-tag-clearbutton-icon-margin-m: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-tag-clearbutton-icon-margin-l: var( + --spectrum-global-dimension-size-185 + ); + --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25); + --spectrum-alias-tag-focusring-gap: var( + --spectrum-global-dimension-static-size-0 + ); + --spectrum-alias-tag-focusring-gap-selected: var( + --spectrum-global-dimension-size-25 + ); + --spectrum-alias-colorloupe-width: var( + --spectrum-global-dimension-static-size-600 + ); + --spectrum-alias-colorloupe-height: var( + --spectrum-global-dimension-static-size-800 + ); } :root, :host { - --spectrum-alias-colorhandle-outer-border-color: #0000006b; - --spectrum-alias-transparent-blue-background-color-hover: #0057be26; - --spectrum-alias-transparent-blue-background-color-down: #0048994d; - --spectrum-alias-transparent-blue-background-color-key-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color-mouse-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-transparent-red-background-color-hover: #9a000026; - --spectrum-alias-transparent-red-background-color-down: #7c00004d; - --spectrum-alias-transparent-red-background-color-key-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color-mouse-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-component-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-key-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-mouse-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected-default: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected-hover: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-selected-down: var( - --spectrum-alias-component-text-color-down - ); - --spectrum-alias-component-text-color-selected-key-focus: var( - --spectrum-alias-component-text-color-key-focus - ); - --spectrum-alias-component-text-color-selected-mouse-focus: var( - --spectrum-alias-component-text-color-mouse-focus - ); - --spectrum-alias-component-text-color-selected: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-text-color-emphasized-selected-hover: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-down: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-error-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-component-text-color-error-hover: var( - --spectrum-semantic-negative-text-color-small-hover - ); - --spectrum-alias-component-text-color-error-down: var( - --spectrum-semantic-negative-text-color-small-down - ); - --spectrum-alias-component-text-color-error-key-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error-mouse-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error: var( - --spectrum-alias-component-text-color-error-default - ); - --spectrum-alias-component-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-component-icon-color-default: var( - --spectrum-alias-icon-color - ); - --spectrum-alias-component-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color: var( - --spectrum-alias-component-icon-color-default - ); - --spectrum-alias-component-icon-color-selected: var( - --spectrum-alias-icon-color-selected-neutral-subdued - ); - --spectrum-alias-component-icon-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-icon-color-emphasized-selected-hover: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-down: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-quiet-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-selected-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-component-background-color-default: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-component-background-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-component-background-color-selected-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-hover: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-key-focus: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-down: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-component-background-color-quiet-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet: var( - --spectrum-alias-component-background-color-quiet-default - ); - --spectrum-alias-component-background-color-quiet-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-component-background-color-quiet-selected-down: var( - --spectrum-alias-component-background-color-selected-down - ); - --spectrum-alias-component-background-color-quiet-selected-key-focus: var( - --spectrum-alias-component-background-color-selected-key-focus - ); - --spectrum-alias-component-background-color-quiet-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-background-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-background-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-background-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-background-color-emphasized-selected: var( - --spectrum-alias-component-background-color-emphasized-selected-default - ); - --spectrum-alias-component-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-component-border-color-quiet-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-component-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-component-border-color-down: var( - --spectrum-alias-border-color-down - ); - --spectrum-alias-component-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color: var( - --spectrum-alias-component-border-color-default - ); - --spectrum-alias-component-border-color-selected-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-component-border-color-selected-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-component-border-color-selected-down: var( - --spectrum-alias-border-color-down - ); - --spectrum-alias-component-border-color-selected-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-selected: var( - --spectrum-alias-component-border-color-selected-default - ); - --spectrum-alias-component-border-color-quiet-default: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-hover: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-down: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-quiet: var( - --spectrum-alias-component-border-color-quiet-default - ); - --spectrum-alias-component-border-color-quiet-selected-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-hover: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-quiet-selected: var( - --spectrum-alias-component-border-color-quiet-selected-default - ); - --spectrum-alias-component-border-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-border-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-border-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-border-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-border-color-emphasized-selected: var( - --spectrum-alias-component-border-color-emphasized-selected-default - ); - --spectrum-alias-tag-border-color-default: var( - --spectrum-alias-border-color-darker-default - ); - --spectrum-alias-tag-border-color-hover: var( - --spectrum-alias-border-color-darker-hover - ); - --spectrum-alias-tag-border-color-down: var( - --spectrum-alias-border-color-darker-hover - ); - --spectrum-alias-tag-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-tag-border-color-error-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-error-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-tag-border-color-error-selected: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-border-color: var( - --spectrum-alias-tag-border-color-default - ); - --spectrum-alias-tag-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-tag-border-color-error: var( - --spectrum-alias-tag-border-color-error-default - ); - --spectrum-alias-tag-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tag-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); - --spectrum-alias-tag-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-tag-text-color: var( - --spectrum-alias-tag-text-color-default - ); - --spectrum-alias-tag-text-color-error-default: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-text-color-error-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-key-focus: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error: var( - --spectrum-alias-tag-text-color-error-default - ); - --spectrum-alias-tag-text-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); - --spectrum-alias-tag-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); - --spectrum-alias-tag-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-tag-icon-color: var( - --spectrum-alias-tag-icon-color-default - ); - --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); - --spectrum-alias-tag-icon-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color: var( - --spectrum-alias-tag-background-color-default - ); - --spectrum-alias-tag-background-color-error-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-error-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error: var( - --spectrum-alias-tag-background-color-error-default - ); - --spectrum-alias-tag-background-color-error-selected-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-background-color-error-selected-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-background-color-error-selected: var( - --spectrum-alias-tag-background-color-error-selected-default - ); - --spectrum-alias-tag-background-color-selected-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-tag-background-color-selected-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-tag-background-color-selected-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-focusring-border-color-default: transparent; - --spectrum-alias-tag-focusring-border-color-key-focus: transparent; - --spectrum-alias-tag-focusring-border-color-disabled: transparent; - --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( - --spectrum-alias-focus-ring-color - ); - --spectrum-alias-tag-focusring-border-color: var( - --spectrum-alias-tag-focusring-border-color-default - ); - --spectrum-alias-avatar-border-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-down: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color: var( - --spectrum-alias-avatar-border-color-default - ); - --spectrum-alias-avatar-border-color-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-down: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected: var( - --spectrum-alias-avatar-border-color-selected-default - ); - --spectrum-alias-avatar-border-color-selected-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-toggle-background-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-toggle-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color: var( - --spectrum-alias-toggle-background-color-default - ); - --spectrum-alias-toggle-background-color-emphasized-selected-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected: var( - --spectrum-alias-toggle-background-color-emphasized-selected-default - ); - --spectrum-alias-toggle-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-toggle-border-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-border-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color: var( - --spectrum-alias-toggle-border-color-default - ); - --spectrum-alias-toggle-icon-color-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-toggle-icon-color-emphasized-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-button-primary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-primary-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-button-primary-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color: var( - --spectrum-alias-button-primary-background-color-default - ); - --spectrum-alias-button-primary-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-border-color-hover: var( - --spectrum-alias-button-primary-background-color-hover - ); - --spectrum-alias-button-primary-border-color-down: var( - --spectrum-alias-button-primary-background-color-down - ); - --spectrum-alias-button-primary-border-color-key-focus: var( - --spectrum-alias-button-primary-background-color-key-focus - ); - --spectrum-alias-button-primary-border-color: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-default: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-hover: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-down: var( - --spectrum-alias-button-primary-text-color-down - ); - --spectrum-alias-button-primary-icon-color-key-focus: var( - --spectrum-alias-button-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-icon-color: var( - --spectrum-alias-button-primary-icon-color-default - ); - --spectrum-alias-button-secondary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-secondary-background-color-hover: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color-down: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-secondary-background-color-key-focus: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color: var( - --spectrum-alias-button-secondary-background-color-default - ); - --spectrum-alias-button-secondary-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-border-color-hover: var( - --spectrum-alias-button-secondary-background-color-hover - ); - --spectrum-alias-button-secondary-border-color-down: var( - --spectrum-alias-button-secondary-background-color-down - ); - --spectrum-alias-button-secondary-border-color-key-focus: var( - --spectrum-alias-button-secondary-background-color-key-focus - ); - --spectrum-alias-button-secondary-border-color: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-default: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-hover: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-down: var( - --spectrum-alias-button-secondary-text-color-down - ); - --spectrum-alias-button-secondary-icon-color-key-focus: var( - --spectrum-alias-button-secondary-text-color-key-focus - ); - --spectrum-alias-button-secondary-icon-color: var( - --spectrum-alias-button-secondary-icon-color-default - ); - --spectrum-alias-button-negative-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-negative-background-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-background-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color: var( - --spectrum-alias-button-negative-background-color-default - ); - --spectrum-alias-button-negative-border-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-border-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-default: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-hover: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-down: var( - --spectrum-alias-button-negative-text-color-down - ); - --spectrum-alias-button-negative-icon-color-key-focus: var( - --spectrum-alias-button-negative-text-color-key-focus - ); - --spectrum-alias-button-negative-icon-color: var( - --spectrum-alias-button-negative-icon-color-default - ); - --spectrum-alias-input-border-color-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-input-border-color-quiet-disabled: var( - --spectrum-alias-border-color-mid - ); - --spectrum-alias-input-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-input-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-input-border-color-down: var( - --spectrum-alias-border-color-mouse-focus - ); - --spectrum-alias-input-border-color-mouse-focus: var( - --spectrum-alias-border-color-mouse-focus - ); - --spectrum-alias-input-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-input-border-color: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-input-border-color-invalid-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-input-border-color-invalid-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-down: var( - --spectrum-semantic-negative-color-down - ); - --spectrum-alias-input-border-color-invalid-mouse-focus: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-input-border-color-invalid: var( - --spectrum-alias-input-border-color-invalid-default - ); - --spectrum-alias-background-color-yellow-default: var( - --spectrum-global-color-static-yellow-300 - ); - --spectrum-alias-background-color-yellow-hover: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-key-focus: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-down: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-background-color-yellow: var( - --spectrum-alias-background-color-yellow-default - ); - --spectrum-alias-infieldbutton-background-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-infieldbutton-fill-border-color-default: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-infieldbutton-fill-border-color-hover: var( - --spectrum-alias-input-border-color-hover - ); - --spectrum-alias-infieldbutton-fill-border-color-down: var( - --spectrum-alias-input-border-color-down - ); - --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var( - --spectrum-alias-input-border-color-mouse-focus - ); - --spectrum-alias-infieldbutton-fill-border-color-key-focus: var( - --spectrum-alias-input-border-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( - --spectrum-alias-component-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( - --spectrum-alias-component-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( - --spectrum-alias-component-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006; - --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c; - --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3; - --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; - --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c; - --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; - --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6; - --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c; - --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3; - --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; - --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c; - --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; - --spectrum-alias-tabs-divider-background-color-default: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tabs-divider-background-color-quiet: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-tabitem-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tabitem-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-down: var( - --spectrum-alias-text-color-down - ); - --spectrum-alias-tabitem-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-mouse-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-selected-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tabitem-text-color-selected-hover: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-down: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-down: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-default: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-emphasized: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-icon-color-disabled: var( - --spectrum-alias-text-color-disabled - ); - --spectrum-alias-tabitem-icon-color-default: var( - --spectrum-alias-icon-color - ); - --spectrum-alias-tabitem-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tabitem-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-tabitem-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tabitem-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-tabitem-icon-color: var( - --spectrum-alias-tabitem-icon-color-default - ); - --spectrum-alias-tabitem-icon-color-selected: var( - --spectrum-alias-icon-color-selected-neutral - ); - --spectrum-alias-tabitem-icon-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-icon-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a; - --spectrum-alias-assetcard-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-border-color-selected-hover: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-border-color-selected-down: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-background-color-default: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-background-color-transparent: transparent; - --spectrum-alias-background-color-overbackground-down: #fff3; - --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; - --spectrum-alias-background-color-quiet-overbackground-down: #fff3; - --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; - --spectrum-alias-background-color-quickactions-overlay: #0003; - --spectrum-alias-placeholder-text-color: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-placeholder-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-selected: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); - --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-mouse-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); - --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); - --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); - --spectrum-alias-text-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-text-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-text-color-overbackground-disabled: #fff3; - --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; - --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); - --spectrum-alias-link-primary-text-color-default: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-link-primary-text-color-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-link-primary-text-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-link-primary-text-color-key-focus: var( - --spectrum-alias-text-color-key-focus - ); - --spectrum-alias-link-primary-text-color: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color-default: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color-hover: var( - --spectrum-alias-link-primary-text-color-hover - ); - --spectrum-alias-link-secondary-text-color-down: var( - --spectrum-alias-link-primary-text-color-down - ); - --spectrum-alias-link-secondary-text-color-key-focus: var( - --spectrum-alias-link-primary-text-color-key-focus - ); - --spectrum-alias-link-secondary-text-color: var( - --spectrum-alias-link-secondary-text-color-default - ); - --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-alias-border-color-mouse-focus: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-border-color-extralight: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); - --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); - --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-darker-default: var( - --spectrum-global-color-gray-600 - ); - --spectrum-alias-border-color-darker-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-darker-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-transparent: transparent; - --spectrum-alias-border-color-translucent-dark: #0000000d; - --spectrum-alias-border-color-translucent-darker: #0000001a; - --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); - --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); - --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); - --spectrum-alias-track-fill-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-disabled: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-thumbnail-darksquare-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-thumbnail-lightsquare-background-color: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-overbackground: #fff3; - --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-icon-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); - --spectrum-alias-icon-color-overbackground-disabled: #fff3; - --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; - --spectrum-alias-icon-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-selected-neutral-subdued: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); - --spectrum-alias-icon-color-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-icon-color-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-icon-color-selected-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-image-opacity-disabled: var( - --spectrum-global-color-opacity-30 - ); - --spectrum-alias-toolbar-background-color: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-code-highlight-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-code-highlight-background-color: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-code-highlight-color-keyword: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-section: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-code-highlight-color-literal: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-attribute: var( - --spectrum-global-color-seafoam-600 - ); - --spectrum-alias-code-highlight-color-class: var( - --spectrum-global-color-magenta-600 - ); - --spectrum-alias-code-highlight-color-variable: var( - --spectrum-global-color-purple-600 - ); - --spectrum-alias-code-highlight-color-title: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-code-highlight-color-string: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-function: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-comment: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-categorical-color-1: var( - --spectrum-global-color-static-seafoam-200 - ); - --spectrum-alias-categorical-color-2: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-alias-categorical-color-3: var( - --spectrum-global-color-static-orange-500 - ); - --spectrum-alias-categorical-color-4: var( - --spectrum-global-color-static-magenta-500 - ); - --spectrum-alias-categorical-color-5: var( - --spectrum-global-color-static-indigo-200 - ); - --spectrum-alias-categorical-color-6: var( - --spectrum-global-color-static-celery-200 - ); - --spectrum-alias-categorical-color-7: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-categorical-color-8: var( - --spectrum-global-color-static-purple-800 - ); - --spectrum-alias-categorical-color-9: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-categorical-color-10: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-alias-categorical-color-11: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-alias-categorical-color-12: var( - --spectrum-global-color-static-chartreuse-300 - ); - --spectrum-alias-categorical-color-13: var( - --spectrum-global-color-static-blue-200 - ); - --spectrum-alias-categorical-color-14: var( - --spectrum-global-color-static-fuchsia-500 - ); - --spectrum-alias-categorical-color-15: var( - --spectrum-global-color-static-magenta-200 - ); - --spectrum-alias-categorical-color-16: var( - --spectrum-global-color-static-yellow-200 - ); + --spectrum-alias-colorhandle-outer-border-color: #0000006b; + --spectrum-alias-transparent-blue-background-color-hover: #0057be26; + --spectrum-alias-transparent-blue-background-color-down: #0048994d; + --spectrum-alias-transparent-blue-background-color-key-focus: var( + --spectrum-alias-transparent-blue-background-color-hover + ); + --spectrum-alias-transparent-blue-background-color-mouse-focus: var( + --spectrum-alias-transparent-blue-background-color-hover + ); + --spectrum-alias-transparent-blue-background-color: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-transparent-red-background-color-hover: #9a000026; + --spectrum-alias-transparent-red-background-color-down: #7c00004d; + --spectrum-alias-transparent-red-background-color-key-focus: var( + --spectrum-alias-transparent-red-background-color-hover + ); + --spectrum-alias-transparent-red-background-color-mouse-focus: var( + --spectrum-alias-transparent-red-background-color-hover + ); + --spectrum-alias-transparent-red-background-color: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-component-text-color-disabled: var( + --spectrum-global-color-gray-500 + ); + --spectrum-alias-component-text-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-component-text-color-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-component-text-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-component-text-color-key-focus: var( + --spectrum-alias-component-text-color-hover + ); + --spectrum-alias-component-text-color-mouse-focus: var( + --spectrum-alias-component-text-color-hover + ); + --spectrum-alias-component-text-color: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-component-text-color-selected-default: var( + --spectrum-alias-component-text-color-default + ); + --spectrum-alias-component-text-color-selected-hover: var( + --spectrum-alias-component-text-color-hover + ); + --spectrum-alias-component-text-color-selected-down: var( + --spectrum-alias-component-text-color-down + ); + --spectrum-alias-component-text-color-selected-key-focus: var( + --spectrum-alias-component-text-color-key-focus + ); + --spectrum-alias-component-text-color-selected-mouse-focus: var( + --spectrum-alias-component-text-color-mouse-focus + ); + --spectrum-alias-component-text-color-selected: var( + --spectrum-alias-component-text-color-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-default: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-component-text-color-emphasized-selected-hover: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-down: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-key-focus: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-emphasized-selected: var( + --spectrum-alias-component-text-color-emphasized-selected-default + ); + --spectrum-alias-component-text-color-error-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-component-text-color-error-hover: var( + --spectrum-semantic-negative-text-color-small-hover + ); + --spectrum-alias-component-text-color-error-down: var( + --spectrum-semantic-negative-text-color-small-down + ); + --spectrum-alias-component-text-color-error-key-focus: var( + --spectrum-semantic-negative-text-color-small-key-focus + ); + --spectrum-alias-component-text-color-error-mouse-focus: var( + --spectrum-semantic-negative-text-color-small-key-focus + ); + --spectrum-alias-component-text-color-error: var( + --spectrum-alias-component-text-color-error-default + ); + --spectrum-alias-component-icon-color-disabled: var( + --spectrum-alias-icon-color-disabled + ); + --spectrum-alias-component-icon-color-default: var( + --spectrum-alias-icon-color + ); + --spectrum-alias-component-icon-color-hover: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-component-icon-color-down: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-component-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-component-icon-color-mouse-focus: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-component-icon-color: var( + --spectrum-alias-component-icon-color-default + ); + --spectrum-alias-component-icon-color-selected: var( + --spectrum-alias-icon-color-selected-neutral-subdued + ); + --spectrum-alias-component-icon-color-emphasized-selected-default: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-component-icon-color-emphasized-selected-hover: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-icon-color-emphasized-selected-down: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-icon-color-emphasized-selected: var( + --spectrum-alias-component-icon-color-emphasized-selected-default + ); + --spectrum-alias-component-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-quiet-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet-selected-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-component-background-color-default: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-component-background-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-component-background-color-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-component-background-color: var( + --spectrum-alias-component-background-color-default + ); + --spectrum-alias-component-background-color-selected-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-selected-hover: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-selected-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-selected-key-focus: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-background-color-selected: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-background-color-quiet-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet-hover: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet-down: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-component-background-color-quiet-key-focus: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-component-background-color-quiet: var( + --spectrum-alias-component-background-color-quiet-default + ); + --spectrum-alias-component-background-color-quiet-selected-default: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-background-color-quiet-selected-hover: var( + --spectrum-alias-component-background-color-selected-hover + ); + --spectrum-alias-component-background-color-quiet-selected-down: var( + --spectrum-alias-component-background-color-selected-down + ); + --spectrum-alias-component-background-color-quiet-selected-key-focus: var( + --spectrum-alias-component-background-color-selected-key-focus + ); + --spectrum-alias-component-background-color-quiet-selected: var( + --spectrum-alias-component-background-color-selected-default + ); + --spectrum-alias-component-background-color-emphasized-selected-default: var( + --spectrum-semantic-cta-background-color-default + ); + --spectrum-alias-component-background-color-emphasized-selected-hover: var( + --spectrum-semantic-cta-background-color-hover + ); + --spectrum-alias-component-background-color-emphasized-selected-down: var( + --spectrum-semantic-cta-background-color-down + ); + --spectrum-alias-component-background-color-emphasized-selected-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus + ); + --spectrum-alias-component-background-color-emphasized-selected: var( + --spectrum-alias-component-background-color-emphasized-selected-default + ); + --spectrum-alias-component-border-color-disabled: var( + --spectrum-alias-border-color-disabled + ); + --spectrum-alias-component-border-color-quiet-disabled: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-default: var( + --spectrum-alias-border-color + ); + --spectrum-alias-component-border-color-hover: var( + --spectrum-alias-border-color-hover + ); + --spectrum-alias-component-border-color-down: var( + --spectrum-alias-border-color-down + ); + --spectrum-alias-component-border-color-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-component-border-color: var( + --spectrum-alias-component-border-color-default + ); + --spectrum-alias-component-border-color-selected-default: var( + --spectrum-alias-border-color + ); + --spectrum-alias-component-border-color-selected-hover: var( + --spectrum-alias-border-color-hover + ); + --spectrum-alias-component-border-color-selected-down: var( + --spectrum-alias-border-color-down + ); + --spectrum-alias-component-border-color-selected-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-component-border-color-selected: var( + --spectrum-alias-component-border-color-selected-default + ); + --spectrum-alias-component-border-color-quiet-default: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-quiet-hover: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-quiet-down: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-component-border-color-quiet-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-component-border-color-quiet: var( + --spectrum-alias-component-border-color-quiet-default + ); + --spectrum-alias-component-border-color-quiet-selected-default: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-border-color-quiet-selected-hover: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-border-color-quiet-selected-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-component-border-color-quiet-selected-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-component-border-color-quiet-selected: var( + --spectrum-alias-component-border-color-quiet-selected-default + ); + --spectrum-alias-component-border-color-emphasized-selected-default: var( + --spectrum-semantic-cta-background-color-default + ); + --spectrum-alias-component-border-color-emphasized-selected-hover: var( + --spectrum-semantic-cta-background-color-hover + ); + --spectrum-alias-component-border-color-emphasized-selected-down: var( + --spectrum-semantic-cta-background-color-down + ); + --spectrum-alias-component-border-color-emphasized-selected-key-focus: var( + --spectrum-semantic-cta-background-color-key-focus + ); + --spectrum-alias-component-border-color-emphasized-selected: var( + --spectrum-alias-component-border-color-emphasized-selected-default + ); + --spectrum-alias-tag-border-color-default: var( + --spectrum-alias-border-color-darker-default + ); + --spectrum-alias-tag-border-color-hover: var( + --spectrum-alias-border-color-darker-hover + ); + --spectrum-alias-tag-border-color-down: var( + --spectrum-alias-border-color-darker-hover + ); + --spectrum-alias-tag-border-color-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-tag-border-color-error-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-error-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-border-color-error-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-tag-border-color-error-selected: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-border-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-border-color: var( + --spectrum-alias-tag-border-color-default + ); + --spectrum-alias-tag-border-color-disabled: var( + --spectrum-alias-border-color-disabled + ); + --spectrum-alias-tag-border-color-error: var( + --spectrum-alias-tag-border-color-error-default + ); + --spectrum-alias-tag-text-color-default: var( + --spectrum-alias-label-text-color + ); + --spectrum-alias-tag-text-color-hover: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tag-text-color-key-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tag-text-color-disabled: var( + --spectrum-global-color-gray-500 + ); + --spectrum-alias-tag-text-color: var(--spectrum-alias-tag-text-color-default); + --spectrum-alias-tag-text-color-error-default: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-text-color-error-hover: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error-key-focus: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-tag-text-color-error: var( + --spectrum-alias-tag-text-color-error-default + ); + --spectrum-alias-tag-text-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tag-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tag-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tag-icon-color-disabled: var( + --spectrum-alias-icon-color-disabled + ); + --spectrum-alias-tag-icon-color: var(--spectrum-alias-tag-icon-color-default); + --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-icon-color-selected: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-background-color-default: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-background-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color: var( + --spectrum-alias-tag-background-color-default + ); + --spectrum-alias-tag-background-color-error-default: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-error-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-error-down: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-tag-background-color-error-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-tag-background-color-error: var( + --spectrum-alias-tag-background-color-error-default + ); + --spectrum-alias-tag-background-color-error-selected-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-tag-background-color-error-selected-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-down: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-tag-background-color-error-selected-key-focus: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-tag-background-color-error-selected: var( + --spectrum-alias-tag-background-color-error-selected-default + ); + --spectrum-alias-tag-background-color-selected-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-tag-background-color-selected-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-tag-background-color-selected-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected-key-focus: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tag-background-color-selected: var( + --spectrum-alias-tag-background-color-selected-default + ); + --spectrum-alias-tag-focusring-border-color-default: transparent; + --spectrum-alias-tag-focusring-border-color-key-focus: transparent; + --spectrum-alias-tag-focusring-border-color-disabled: transparent; + --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( + --spectrum-alias-focus-ring-color + ); + --spectrum-alias-tag-focusring-border-color: var( + --spectrum-alias-tag-focusring-border-color-default + ); + --spectrum-alias-avatar-border-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-hover: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-down: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-key-focus: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color: var( + --spectrum-alias-avatar-border-color-default + ); + --spectrum-alias-avatar-border-color-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-hover: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-down: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected-key-focus: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-avatar-border-color-selected: var( + --spectrum-alias-avatar-border-color-selected-default + ); + --spectrum-alias-avatar-border-color-selected-disabled: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-toggle-background-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-toggle-background-color-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-background-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-toggle-background-color-key-focus: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-background-color: var( + --spectrum-alias-toggle-background-color-default + ); + --spectrum-alias-toggle-background-color-emphasized-selected-default: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-toggle-background-color-emphasized-selected: var( + --spectrum-alias-toggle-background-color-emphasized-selected-default + ); + --spectrum-alias-toggle-border-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-toggle-border-color-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-border-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-toggle-border-color-key-focus: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-toggle-border-color: var( + --spectrum-alias-toggle-border-color-default + ); + --spectrum-alias-toggle-icon-color-selected: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-toggle-icon-color-emphasized-selected: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-button-primary-background-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-button-primary-background-color-hover: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-button-primary-background-color-key-focus: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-background-color: var( + --spectrum-alias-button-primary-background-color-default + ); + --spectrum-alias-button-primary-border-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-border-color-hover: var( + --spectrum-alias-button-primary-background-color-hover + ); + --spectrum-alias-button-primary-border-color-down: var( + --spectrum-alias-button-primary-background-color-down + ); + --spectrum-alias-button-primary-border-color-key-focus: var( + --spectrum-alias-button-primary-background-color-key-focus + ); + --spectrum-alias-button-primary-border-color: var( + --spectrum-alias-button-primary-border-color-default + ); + --spectrum-alias-button-primary-text-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-primary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-primary-text-color: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-primary-icon-color-default: var( + --spectrum-alias-button-primary-text-color-default + ); + --spectrum-alias-button-primary-icon-color-hover: var( + --spectrum-alias-button-primary-text-color-hover + ); + --spectrum-alias-button-primary-icon-color-down: var( + --spectrum-alias-button-primary-text-color-down + ); + --spectrum-alias-button-primary-icon-color-key-focus: var( + --spectrum-alias-button-primary-text-color-key-focus + ); + --spectrum-alias-button-primary-icon-color: var( + --spectrum-alias-button-primary-icon-color-default + ); + --spectrum-alias-button-secondary-background-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-button-secondary-background-color-hover: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color-down: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-button-secondary-background-color-key-focus: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-background-color: var( + --spectrum-alias-button-secondary-background-color-default + ); + --spectrum-alias-button-secondary-border-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-border-color-hover: var( + --spectrum-alias-button-secondary-background-color-hover + ); + --spectrum-alias-button-secondary-border-color-down: var( + --spectrum-alias-button-secondary-background-color-down + ); + --spectrum-alias-button-secondary-border-color-key-focus: var( + --spectrum-alias-button-secondary-background-color-key-focus + ); + --spectrum-alias-button-secondary-border-color: var( + --spectrum-alias-button-secondary-border-color-default + ); + --spectrum-alias-button-secondary-text-color-default: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-button-secondary-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-secondary-text-color: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-secondary-icon-color-default: var( + --spectrum-alias-button-secondary-text-color-default + ); + --spectrum-alias-button-secondary-icon-color-hover: var( + --spectrum-alias-button-secondary-text-color-hover + ); + --spectrum-alias-button-secondary-icon-color-down: var( + --spectrum-alias-button-secondary-text-color-down + ); + --spectrum-alias-button-secondary-icon-color-key-focus: var( + --spectrum-alias-button-secondary-text-color-key-focus + ); + --spectrum-alias-button-secondary-icon-color: var( + --spectrum-alias-button-secondary-icon-color-default + ); + --spectrum-alias-button-negative-background-color-default: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-button-negative-background-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-background-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-background-color: var( + --spectrum-alias-button-negative-background-color-default + ); + --spectrum-alias-button-negative-border-color-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-hover: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color-down: var( + --spectrum-global-color-red-700 + ); + --spectrum-alias-button-negative-border-color-key-focus: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-border-color: var( + --spectrum-alias-button-negative-border-color-default + ); + --spectrum-alias-button-negative-text-color-default: var( + --spectrum-semantic-negative-text-color-small + ); + --spectrum-alias-button-negative-text-color-hover: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-down: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color-key-focus: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-button-negative-text-color: var( + --spectrum-alias-button-negative-text-color-default + ); + --spectrum-alias-button-negative-icon-color-default: var( + --spectrum-alias-button-negative-text-color-default + ); + --spectrum-alias-button-negative-icon-color-hover: var( + --spectrum-alias-button-negative-text-color-hover + ); + --spectrum-alias-button-negative-icon-color-down: var( + --spectrum-alias-button-negative-text-color-down + ); + --spectrum-alias-button-negative-icon-color-key-focus: var( + --spectrum-alias-button-negative-text-color-key-focus + ); + --spectrum-alias-button-negative-icon-color: var( + --spectrum-alias-button-negative-icon-color-default + ); + --spectrum-alias-input-border-color-disabled: var( + --spectrum-alias-border-color-transparent + ); + --spectrum-alias-input-border-color-quiet-disabled: var( + --spectrum-alias-border-color-mid + ); + --spectrum-alias-input-border-color-default: var( + --spectrum-alias-border-color + ); + --spectrum-alias-input-border-color-hover: var( + --spectrum-alias-border-color-hover + ); + --spectrum-alias-input-border-color-down: var( + --spectrum-alias-border-color-mouse-focus + ); + --spectrum-alias-input-border-color-mouse-focus: var( + --spectrum-alias-border-color-mouse-focus + ); + --spectrum-alias-input-border-color-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-input-border-color: var( + --spectrum-alias-input-border-color-default + ); + --spectrum-alias-input-border-color-invalid-default: var( + --spectrum-semantic-negative-color-default + ); + --spectrum-alias-input-border-color-invalid-hover: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-input-border-color-invalid-down: var( + --spectrum-semantic-negative-color-down + ); + --spectrum-alias-input-border-color-invalid-mouse-focus: var( + --spectrum-semantic-negative-color-hover + ); + --spectrum-alias-input-border-color-invalid-key-focus: var( + --spectrum-alias-border-color-key-focus + ); + --spectrum-alias-input-border-color-invalid: var( + --spectrum-alias-input-border-color-invalid-default + ); + --spectrum-alias-background-color-yellow-default: var( + --spectrum-global-color-static-yellow-300 + ); + --spectrum-alias-background-color-yellow-hover: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-alias-background-color-yellow-key-focus: var( + --spectrum-global-color-static-yellow-400 + ); + --spectrum-alias-background-color-yellow-down: var( + --spectrum-global-color-static-yellow-500 + ); + --spectrum-alias-background-color-yellow: var( + --spectrum-alias-background-color-yellow-default + ); + --spectrum-alias-infieldbutton-background-color: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-infieldbutton-fill-border-color-default: var( + --spectrum-alias-input-border-color-default + ); + --spectrum-alias-infieldbutton-fill-border-color-hover: var( + --spectrum-alias-input-border-color-hover + ); + --spectrum-alias-infieldbutton-fill-border-color-down: var( + --spectrum-alias-input-border-color-down + ); + --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var( + --spectrum-alias-input-border-color-mouse-focus + ); + --spectrum-alias-infieldbutton-fill-border-color-key-focus: var( + --spectrum-alias-input-border-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( + --spectrum-alias-component-background-color-default + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( + --spectrum-alias-component-background-color-hover + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( + --spectrum-alias-component-background-color-down + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( + --spectrum-alias-component-background-color-key-focus + ); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( + --spectrum-alias-component-background-color-disabled + ); + --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006; + --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3; + --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; + --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; + --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6; + --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3; + --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; + --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; + --spectrum-alias-tabs-divider-background-color-default: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-tabs-divider-background-color-quiet: var( + --spectrum-alias-background-color-transparent + ); + --spectrum-alias-tabitem-text-color-default: var( + --spectrum-alias-label-text-color + ); + --spectrum-alias-tabitem-text-color-hover: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tabitem-text-color-down: var( + --spectrum-alias-text-color-down + ); + --spectrum-alias-tabitem-text-color-key-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tabitem-text-color-mouse-focus: var( + --spectrum-alias-text-color-hover + ); + --spectrum-alias-tabitem-text-color: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-text-color-selected-default: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-tabitem-text-color-selected-hover: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected-down: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected-key-focus: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected-mouse-focus: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-selected: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-default: var( + --spectrum-global-color-static-blue-500 + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-down: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-text-color-emphasized-selected: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-selection-indicator-color-default: var( + --spectrum-alias-tabitem-text-color-selected-default + ); + --spectrum-alias-tabitem-selection-indicator-color-emphasized: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-tabitem-icon-color-disabled: var( + --spectrum-alias-text-color-disabled + ); + --spectrum-alias-tabitem-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tabitem-icon-color-hover: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tabitem-icon-color-down: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-tabitem-icon-color-key-focus: var( + --spectrum-alias-icon-color-hover + ); + --spectrum-alias-tabitem-icon-color-mouse-focus: var( + --spectrum-alias-icon-color-down + ); + --spectrum-alias-tabitem-icon-color: var( + --spectrum-alias-tabitem-icon-color-default + ); + --spectrum-alias-tabitem-icon-color-selected: var( + --spectrum-alias-icon-color-selected-neutral + ); + --spectrum-alias-tabitem-icon-color-emphasized: var( + --spectrum-alias-tabitem-text-color-default + ); + --spectrum-alias-tabitem-icon-color-emphasized-selected: var( + --spectrum-alias-tabitem-text-color-emphasized-selected-default + ); + --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a; + --spectrum-alias-assetcard-border-color-selected: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-assetcard-border-color-selected-hover: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-assetcard-border-color-selected-down: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-background-color-default: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-disabled: var( + --spectrum-global-color-gray-200 + ); + --spectrum-alias-background-color-transparent: transparent; + --spectrum-alias-background-color-overbackground-down: #fff3; + --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; + --spectrum-alias-background-color-quiet-overbackground-down: #fff3; + --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; + --spectrum-alias-background-color-quickactions-overlay: #0003; + --spectrum-alias-placeholder-text-color: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-placeholder-text-color-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-placeholder-text-color-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-placeholder-text-color-selected: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); + --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-mouse-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); + --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-selected-neutral: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-text-color-overbackground: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-text-color-overbackground-disabled: #fff3; + --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; + --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); + --spectrum-alias-link-primary-text-color-default: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-link-primary-text-color-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-link-primary-text-color-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-alias-link-primary-text-color-key-focus: var( + --spectrum-alias-text-color-key-focus + ); + --spectrum-alias-link-primary-text-color: var( + --spectrum-alias-link-primary-text-color-default + ); + --spectrum-alias-link-secondary-text-color-default: var( + --spectrum-alias-link-primary-text-color-default + ); + --spectrum-alias-link-secondary-text-color-hover: var( + --spectrum-alias-link-primary-text-color-hover + ); + --spectrum-alias-link-secondary-text-color-down: var( + --spectrum-alias-link-primary-text-color-down + ); + --spectrum-alias-link-secondary-text-color-key-focus: var( + --spectrum-alias-link-primary-text-color-key-focus + ); + --spectrum-alias-link-secondary-text-color: var( + --spectrum-alias-link-secondary-text-color-default + ); + --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-key-focus: var( + --spectrum-global-color-blue-400 + ); + --spectrum-alias-border-color-mouse-focus: var( + --spectrum-global-color-blue-500 + ); + --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-extralight: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); + --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-darker-default: var( + --spectrum-global-color-gray-600 + ); + --spectrum-alias-border-color-darker-hover: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-border-color-darker-down: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-border-color-transparent: transparent; + --spectrum-alias-border-color-translucent-dark: #0000000d; + --spectrum-alias-border-color-translucent-darker: #0000001a; + --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); + --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); + --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-track-fill-color-overbackground: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300); + --spectrum-alias-thumbnail-darksquare-background-color: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-thumbnail-lightsquare-background-color: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-track-color-overbackground: #fff3; + --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-icon-color-overbackground: var( + --spectrum-global-color-static-white + ); + --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); + --spectrum-alias-icon-color-overbackground-disabled: #fff3; + --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; + --spectrum-alias-icon-color-selected-neutral: var( + --spectrum-global-color-gray-900 + ); + --spectrum-alias-icon-color-selected-neutral-subdued: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-icon-color-selected-hover: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-icon-color-selected-down: var( + --spectrum-global-color-blue-700 + ); + --spectrum-alias-icon-color-selected-focus: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-image-opacity-disabled: var( + --spectrum-global-color-opacity-30 + ); + --spectrum-alias-toolbar-background-color: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-code-highlight-color-default: var( + --spectrum-global-color-gray-800 + ); + --spectrum-alias-code-highlight-background-color: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-code-highlight-color-keyword: var( + --spectrum-global-color-fuchsia-600 + ); + --spectrum-alias-code-highlight-color-section: var( + --spectrum-global-color-red-600 + ); + --spectrum-alias-code-highlight-color-literal: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-code-highlight-color-attribute: var( + --spectrum-global-color-seafoam-600 + ); + --spectrum-alias-code-highlight-color-class: var( + --spectrum-global-color-magenta-600 + ); + --spectrum-alias-code-highlight-color-variable: var( + --spectrum-global-color-purple-600 + ); + --spectrum-alias-code-highlight-color-title: var( + --spectrum-global-color-indigo-600 + ); + --spectrum-alias-code-highlight-color-string: var( + --spectrum-global-color-fuchsia-600 + ); + --spectrum-alias-code-highlight-color-function: var( + --spectrum-global-color-blue-600 + ); + --spectrum-alias-code-highlight-color-comment: var( + --spectrum-global-color-gray-700 + ); + --spectrum-alias-categorical-color-1: var( + --spectrum-global-color-static-seafoam-200 + ); + --spectrum-alias-categorical-color-2: var( + --spectrum-global-color-static-indigo-700 + ); + --spectrum-alias-categorical-color-3: var( + --spectrum-global-color-static-orange-500 + ); + --spectrum-alias-categorical-color-4: var( + --spectrum-global-color-static-magenta-500 + ); + --spectrum-alias-categorical-color-5: var( + --spectrum-global-color-static-indigo-200 + ); + --spectrum-alias-categorical-color-6: var( + --spectrum-global-color-static-celery-200 + ); + --spectrum-alias-categorical-color-7: var( + --spectrum-global-color-static-blue-500 + ); + --spectrum-alias-categorical-color-8: var( + --spectrum-global-color-static-purple-800 + ); + --spectrum-alias-categorical-color-9: var( + --spectrum-global-color-static-yellow-500 + ); + --spectrum-alias-categorical-color-10: var( + --spectrum-global-color-static-orange-700 + ); + --spectrum-alias-categorical-color-11: var( + --spectrum-global-color-static-green-600 + ); + --spectrum-alias-categorical-color-12: var( + --spectrum-global-color-static-chartreuse-300 + ); + --spectrum-alias-categorical-color-13: var( + --spectrum-global-color-static-blue-200 + ); + --spectrum-alias-categorical-color-14: var( + --spectrum-global-color-static-fuchsia-500 + ); + --spectrum-alias-categorical-color-15: var( + --spectrum-global-color-static-magenta-200 + ); + --spectrum-alias-categorical-color-16: var( + --spectrum-global-color-static-yellow-200 + ); } diff --git a/tools/styles/spectrum-two/spectrum-scale-large.css b/tools/styles/spectrum-two/spectrum-scale-large.css index 42038762ff..4ee6ecb975 100644 --- a/tools/styles/spectrum-two/spectrum-scale-large.css +++ b/tools/styles/spectrum-two/spectrum-scale-large.css @@ -1,291 +1,291 @@ :root, :host { - --spectrum-global-dimension-scale-factor: 1.25; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 3px; - --spectrum-global-dimension-size-40: 4px; - --spectrum-global-dimension-size-50: 5px; - --spectrum-global-dimension-size-65: 6px; - --spectrum-global-dimension-size-75: 8px; - --spectrum-global-dimension-size-85: 9px; - --spectrum-global-dimension-size-100: 10px; - --spectrum-global-dimension-size-115: 11px; - --spectrum-global-dimension-size-125: 13px; - --spectrum-global-dimension-size-130: 14px; - --spectrum-global-dimension-size-150: 15px; - --spectrum-global-dimension-size-160: 16px; - --spectrum-global-dimension-size-175: 18px; - --spectrum-global-dimension-size-185: 19px; - --spectrum-global-dimension-size-200: 20px; - --spectrum-global-dimension-size-225: 22px; - --spectrum-global-dimension-size-250: 25px; - --spectrum-global-dimension-size-275: 28px; - --spectrum-global-dimension-size-300: 30px; - --spectrum-global-dimension-size-325: 32px; - --spectrum-global-dimension-size-350: 35px; - --spectrum-global-dimension-size-400: 40px; - --spectrum-global-dimension-size-450: 45px; - --spectrum-global-dimension-size-500: 50px; - --spectrum-global-dimension-size-550: 56px; - --spectrum-global-dimension-size-600: 60px; - --spectrum-global-dimension-size-650: 65px; - --spectrum-global-dimension-size-675: 68px; - --spectrum-global-dimension-size-700: 70px; - --spectrum-global-dimension-size-750: 75px; - --spectrum-global-dimension-size-800: 80px; - --spectrum-global-dimension-size-900: 90px; - --spectrum-global-dimension-size-1000: 100px; - --spectrum-global-dimension-size-1125: 112px; - --spectrum-global-dimension-size-1200: 120px; - --spectrum-global-dimension-size-1250: 125px; - --spectrum-global-dimension-size-1600: 160px; - --spectrum-global-dimension-size-1700: 170px; - --spectrum-global-dimension-size-1800: 180px; - --spectrum-global-dimension-size-2000: 200px; - --spectrum-global-dimension-size-2400: 240px; - --spectrum-global-dimension-size-2500: 250px; - --spectrum-global-dimension-size-3000: 300px; - --spectrum-global-dimension-size-3400: 340px; - --spectrum-global-dimension-size-3600: 360px; - --spectrum-global-dimension-size-4600: 460px; - --spectrum-global-dimension-size-5000: 500px; - --spectrum-global-dimension-size-6000: 600px; - --spectrum-global-dimension-font-size-25: 12px; - --spectrum-global-dimension-font-size-50: 13px; - --spectrum-global-dimension-font-size-75: 15px; - --spectrum-global-dimension-font-size-100: 17px; - --spectrum-global-dimension-font-size-150: 18px; - --spectrum-global-dimension-font-size-200: 19px; - --spectrum-global-dimension-font-size-300: 22px; - --spectrum-global-dimension-font-size-400: 24px; - --spectrum-global-dimension-font-size-500: 27px; - --spectrum-global-dimension-font-size-600: 31px; - --spectrum-global-dimension-font-size-700: 34px; - --spectrum-global-dimension-font-size-800: 39px; - --spectrum-global-dimension-font-size-900: 44px; - --spectrum-global-dimension-font-size-1000: 49px; - --spectrum-global-dimension-font-size-1100: 55px; - --spectrum-global-dimension-font-size-1200: 62px; - --spectrum-global-dimension-font-size-1300: 70px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; - --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-item-control-3-width-l: 41px; - --spectrum-alias-item-control-3-width-xl: 46px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-three-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-control-three-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-control-three-width-l: 41px; - --spectrum-alias-control-three-width-xl: 46px; - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-avatar-size-100: 26px; - --spectrum-alias-avatar-size-400: 36px; - --spectrum-alias-avatar-size-600: 46px; - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-colorwheel-min-width: var( - --spectrum-global-dimension-static-size-2600 - ); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-xs-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-75 - ); + --spectrum-global-dimension-scale-factor: 1.25; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 3px; + --spectrum-global-dimension-size-40: 4px; + --spectrum-global-dimension-size-50: 5px; + --spectrum-global-dimension-size-65: 6px; + --spectrum-global-dimension-size-75: 8px; + --spectrum-global-dimension-size-85: 9px; + --spectrum-global-dimension-size-100: 10px; + --spectrum-global-dimension-size-115: 11px; + --spectrum-global-dimension-size-125: 13px; + --spectrum-global-dimension-size-130: 14px; + --spectrum-global-dimension-size-150: 15px; + --spectrum-global-dimension-size-160: 16px; + --spectrum-global-dimension-size-175: 18px; + --spectrum-global-dimension-size-185: 19px; + --spectrum-global-dimension-size-200: 20px; + --spectrum-global-dimension-size-225: 22px; + --spectrum-global-dimension-size-250: 25px; + --spectrum-global-dimension-size-275: 28px; + --spectrum-global-dimension-size-300: 30px; + --spectrum-global-dimension-size-325: 32px; + --spectrum-global-dimension-size-350: 35px; + --spectrum-global-dimension-size-400: 40px; + --spectrum-global-dimension-size-450: 45px; + --spectrum-global-dimension-size-500: 50px; + --spectrum-global-dimension-size-550: 56px; + --spectrum-global-dimension-size-600: 60px; + --spectrum-global-dimension-size-650: 65px; + --spectrum-global-dimension-size-675: 68px; + --spectrum-global-dimension-size-700: 70px; + --spectrum-global-dimension-size-750: 75px; + --spectrum-global-dimension-size-800: 80px; + --spectrum-global-dimension-size-900: 90px; + --spectrum-global-dimension-size-1000: 100px; + --spectrum-global-dimension-size-1125: 112px; + --spectrum-global-dimension-size-1200: 120px; + --spectrum-global-dimension-size-1250: 125px; + --spectrum-global-dimension-size-1600: 160px; + --spectrum-global-dimension-size-1700: 170px; + --spectrum-global-dimension-size-1800: 180px; + --spectrum-global-dimension-size-2000: 200px; + --spectrum-global-dimension-size-2400: 240px; + --spectrum-global-dimension-size-2500: 250px; + --spectrum-global-dimension-size-3000: 300px; + --spectrum-global-dimension-size-3400: 340px; + --spectrum-global-dimension-size-3600: 360px; + --spectrum-global-dimension-size-4600: 460px; + --spectrum-global-dimension-size-5000: 500px; + --spectrum-global-dimension-size-6000: 600px; + --spectrum-global-dimension-font-size-25: 12px; + --spectrum-global-dimension-font-size-50: 13px; + --spectrum-global-dimension-font-size-75: 15px; + --spectrum-global-dimension-font-size-100: 17px; + --spectrum-global-dimension-font-size-150: 18px; + --spectrum-global-dimension-font-size-200: 19px; + --spectrum-global-dimension-font-size-300: 22px; + --spectrum-global-dimension-font-size-400: 24px; + --spectrum-global-dimension-font-size-500: 27px; + --spectrum-global-dimension-font-size-600: 31px; + --spectrum-global-dimension-font-size-700: 34px; + --spectrum-global-dimension-font-size-800: 39px; + --spectrum-global-dimension-font-size-900: 44px; + --spectrum-global-dimension-font-size-1000: 49px; + --spectrum-global-dimension-font-size-1100: 55px; + --spectrum-global-dimension-font-size-1200: 62px; + --spectrum-global-dimension-font-size-1300: 70px; + --spectrum-alias-item-text-padding-top-l: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-text-padding-bottom-s: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-workflow-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; + --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; + --spectrum-alias-item-mark-padding-top-m: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-mark-padding-bottom-m: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-item-mark-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-1-size-l: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-1-size-xl: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-item-control-2-size-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-3-height-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-item-control-3-width-s: var( + --spectrum-global-dimension-size-325 + ); + --spectrum-alias-item-control-3-width-m: var( + --spectrum-global-dimension-static-size-450 + ); + --spectrum-alias-item-control-3-width-l: 41px; + --spectrum-alias-item-control-3-width-xl: 46px; + --spectrum-alias-item-mark-size-m: var( + --spectrum-global-dimension-static-size-325 + ); + --spectrum-alias-component-focusring-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-control-two-size-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-control-three-height-s: var( + --spectrum-global-dimension-size-160 + ); + --spectrum-alias-control-three-width-s: var( + --spectrum-global-dimension-size-325 + ); + --spectrum-alias-control-three-width-m: var( + --spectrum-global-dimension-static-size-450 + ); + --spectrum-alias-control-three-width-l: 41px; + --spectrum-alias-control-three-width-xl: 46px; + --spectrum-alias-search-padding-left-m: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-focus-ring-border-radius-regular: var( + --spectrum-global-dimension-static-size-115 + ); + --spectrum-alias-focus-ring-radius-default: var( + --spectrum-global-dimension-static-size-115 + ); + --spectrum-alias-workflow-icon-size-l: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-ui-icon-chevron-size-75: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-chevron-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-chevron-size-200: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-chevron-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-chevron-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-chevron-size-500: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-checkmark-size-50: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-checkmark-size-75: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-checkmark-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-checkmark-size-200: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-checkmark-size-500: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-checkmark-size-600: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-ui-icon-dash-size-50: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-dash-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-dash-size-100: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-dash-size-200: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-dash-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-dash-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-dash-size-500: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-dash-size-600: var( + --spectrum-global-dimension-static-size-275 + ); + --spectrum-alias-ui-icon-cross-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-cross-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-cross-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-cross-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-cross-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-cross-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-cross-size-600: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-arrow-size-75: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-arrow-size-100: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-arrow-size-200: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-300: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-400: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-arrow-size-500: var( + --spectrum-global-dimension-static-size-275 + ); + --spectrum-alias-ui-icon-arrow-size-600: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-ui-icon-cornertriangle-size-100: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-ui-icon-cornertriangle-size-300: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-asterisk-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-asterisk-size-300: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-avatar-size-100: 26px; + --spectrum-alias-avatar-size-400: 36px; + --spectrum-alias-avatar-size-600: 46px; + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-300 + ); + --spectrum-alias-tag-focusring-border-radius: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-colorwheel-min-width: var( + --spectrum-global-dimension-static-size-2600 + ); + --spectrum-dialog-confirm-title-text-size: var( + --spectrum-alias-heading-xs-text-size + ); + --spectrum-dialog-confirm-description-text-size: var( + --spectrum-global-dimension-font-size-75 + ); } diff --git a/tools/styles/spectrum-two/spectrum-scale-medium.css b/tools/styles/spectrum-two/spectrum-scale-medium.css index 67c09f4f63..80e28a3e7b 100644 --- a/tools/styles/spectrum-two/spectrum-scale-medium.css +++ b/tools/styles/spectrum-two/spectrum-scale-medium.css @@ -1,287 +1,285 @@ :root, :host { - --spectrum-global-dimension-scale-factor: 1; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 2px; - --spectrum-global-dimension-size-40: 3px; - --spectrum-global-dimension-size-50: 4px; - --spectrum-global-dimension-size-65: 5px; - --spectrum-global-dimension-size-75: 6px; - --spectrum-global-dimension-size-85: 7px; - --spectrum-global-dimension-size-100: 8px; - --spectrum-global-dimension-size-115: 9px; - --spectrum-global-dimension-size-125: 10px; - --spectrum-global-dimension-size-130: 11px; - --spectrum-global-dimension-size-150: 12px; - --spectrum-global-dimension-size-160: 13px; - --spectrum-global-dimension-size-175: 14px; - --spectrum-global-dimension-size-185: 15px; - --spectrum-global-dimension-size-200: 16px; - --spectrum-global-dimension-size-225: 18px; - --spectrum-global-dimension-size-250: 20px; - --spectrum-global-dimension-size-275: 22px; - --spectrum-global-dimension-size-300: 24px; - --spectrum-global-dimension-size-325: 26px; - --spectrum-global-dimension-size-350: 28px; - --spectrum-global-dimension-size-400: 32px; - --spectrum-global-dimension-size-450: 36px; - --spectrum-global-dimension-size-500: 40px; - --spectrum-global-dimension-size-550: 44px; - --spectrum-global-dimension-size-600: 48px; - --spectrum-global-dimension-size-650: 52px; - --spectrum-global-dimension-size-675: 54px; - --spectrum-global-dimension-size-700: 56px; - --spectrum-global-dimension-size-750: 60px; - --spectrum-global-dimension-size-800: 64px; - --spectrum-global-dimension-size-900: 72px; - --spectrum-global-dimension-size-1000: 80px; - --spectrum-global-dimension-size-1125: 90px; - --spectrum-global-dimension-size-1200: 96px; - --spectrum-global-dimension-size-1250: 100px; - --spectrum-global-dimension-size-1600: 128px; - --spectrum-global-dimension-size-1700: 136px; - --spectrum-global-dimension-size-1800: 144px; - --spectrum-global-dimension-size-2000: 160px; - --spectrum-global-dimension-size-2400: 192px; - --spectrum-global-dimension-size-2500: 200px; - --spectrum-global-dimension-size-3000: 240px; - --spectrum-global-dimension-size-3400: 272px; - --spectrum-global-dimension-size-3600: 288px; - --spectrum-global-dimension-size-4600: 368px; - --spectrum-global-dimension-size-5000: 400px; - --spectrum-global-dimension-size-6000: 480px; - --spectrum-global-dimension-font-size-25: 10px; - --spectrum-global-dimension-font-size-50: 11px; - --spectrum-global-dimension-font-size-75: 12px; - --spectrum-global-dimension-font-size-100: 14px; - --spectrum-global-dimension-font-size-150: 15px; - --spectrum-global-dimension-font-size-200: 16px; - --spectrum-global-dimension-font-size-300: 18px; - --spectrum-global-dimension-font-size-400: 20px; - --spectrum-global-dimension-font-size-500: 22px; - --spectrum-global-dimension-font-size-600: 25px; - --spectrum-global-dimension-font-size-700: 28px; - --spectrum-global-dimension-font-size-800: 32px; - --spectrum-global-dimension-font-size-900: 36px; - --spectrum-global-dimension-font-size-1000: 40px; - --spectrum-global-dimension-font-size-1100: 45px; - --spectrum-global-dimension-font-size-1200: 50px; - --spectrum-global-dimension-font-size-1300: 60px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-width-s: 23px; - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-item-control-3-width-l: 29px; - --spectrum-alias-item-control-3-width-xl: 33px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-three-width-s: 23px; - --spectrum-alias-control-three-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-control-three-width-l: 29px; - --spectrum-alias-control-three-width-xl: 33px; - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); - --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); - --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-s-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-100 - ); + --spectrum-global-dimension-scale-factor: 1; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 2px; + --spectrum-global-dimension-size-40: 3px; + --spectrum-global-dimension-size-50: 4px; + --spectrum-global-dimension-size-65: 5px; + --spectrum-global-dimension-size-75: 6px; + --spectrum-global-dimension-size-85: 7px; + --spectrum-global-dimension-size-100: 8px; + --spectrum-global-dimension-size-115: 9px; + --spectrum-global-dimension-size-125: 10px; + --spectrum-global-dimension-size-130: 11px; + --spectrum-global-dimension-size-150: 12px; + --spectrum-global-dimension-size-160: 13px; + --spectrum-global-dimension-size-175: 14px; + --spectrum-global-dimension-size-185: 15px; + --spectrum-global-dimension-size-200: 16px; + --spectrum-global-dimension-size-225: 18px; + --spectrum-global-dimension-size-250: 20px; + --spectrum-global-dimension-size-275: 22px; + --spectrum-global-dimension-size-300: 24px; + --spectrum-global-dimension-size-325: 26px; + --spectrum-global-dimension-size-350: 28px; + --spectrum-global-dimension-size-400: 32px; + --spectrum-global-dimension-size-450: 36px; + --spectrum-global-dimension-size-500: 40px; + --spectrum-global-dimension-size-550: 44px; + --spectrum-global-dimension-size-600: 48px; + --spectrum-global-dimension-size-650: 52px; + --spectrum-global-dimension-size-675: 54px; + --spectrum-global-dimension-size-700: 56px; + --spectrum-global-dimension-size-750: 60px; + --spectrum-global-dimension-size-800: 64px; + --spectrum-global-dimension-size-900: 72px; + --spectrum-global-dimension-size-1000: 80px; + --spectrum-global-dimension-size-1125: 90px; + --spectrum-global-dimension-size-1200: 96px; + --spectrum-global-dimension-size-1250: 100px; + --spectrum-global-dimension-size-1600: 128px; + --spectrum-global-dimension-size-1700: 136px; + --spectrum-global-dimension-size-1800: 144px; + --spectrum-global-dimension-size-2000: 160px; + --spectrum-global-dimension-size-2400: 192px; + --spectrum-global-dimension-size-2500: 200px; + --spectrum-global-dimension-size-3000: 240px; + --spectrum-global-dimension-size-3400: 272px; + --spectrum-global-dimension-size-3600: 288px; + --spectrum-global-dimension-size-4600: 368px; + --spectrum-global-dimension-size-5000: 400px; + --spectrum-global-dimension-size-6000: 480px; + --spectrum-global-dimension-font-size-25: 10px; + --spectrum-global-dimension-font-size-50: 11px; + --spectrum-global-dimension-font-size-75: 12px; + --spectrum-global-dimension-font-size-100: 14px; + --spectrum-global-dimension-font-size-150: 15px; + --spectrum-global-dimension-font-size-200: 16px; + --spectrum-global-dimension-font-size-300: 18px; + --spectrum-global-dimension-font-size-400: 20px; + --spectrum-global-dimension-font-size-500: 22px; + --spectrum-global-dimension-font-size-600: 25px; + --spectrum-global-dimension-font-size-700: 28px; + --spectrum-global-dimension-font-size-800: 32px; + --spectrum-global-dimension-font-size-900: 36px; + --spectrum-global-dimension-font-size-1000: 40px; + --spectrum-global-dimension-font-size-1100: 45px; + --spectrum-global-dimension-font-size-1200: 50px; + --spectrum-global-dimension-font-size-1300: 60px; + --spectrum-alias-item-text-padding-top-l: var( + --spectrum-global-dimension-size-115 + ); + --spectrum-alias-item-text-padding-bottom-s: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-item-workflow-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-rounded-workflow-padding-left-m: var( + --spectrum-global-dimension-size-175 + ); + --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; + --spectrum-alias-item-mark-padding-top-m: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-item-mark-padding-bottom-m: var( + --spectrum-global-dimension-static-size-75 + ); + --spectrum-alias-item-mark-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-1-size-l: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-1-size-xl: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-item-control-2-size-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-height-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-item-control-3-width-s: 23px; + --spectrum-alias-item-control-3-width-m: var( + --spectrum-global-dimension-static-size-325 + ); + --spectrum-alias-item-control-3-width-l: 29px; + --spectrum-alias-item-control-3-width-xl: 33px; + --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250); + --spectrum-alias-component-focusring-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-control-two-size-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-control-three-height-s: var( + --spectrum-global-dimension-size-150 + ); + --spectrum-alias-control-three-width-s: 23px; + --spectrum-alias-control-three-width-m: var( + --spectrum-global-dimension-static-size-325 + ); + --spectrum-alias-control-three-width-l: 29px; + --spectrum-alias-control-three-width-xl: 33px; + --spectrum-alias-search-padding-left-m: var( + --spectrum-global-dimension-size-125 + ); + --spectrum-alias-focus-ring-border-radius-regular: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-focus-ring-radius-default: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-workflow-icon-size-l: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-chevron-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-chevron-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-chevron-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-chevron-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-chevron-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-chevron-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-50: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-checkmark-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-checkmark-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-checkmark-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-checkmark-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-checkmark-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-checkmark-size-600: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-dash-size-50: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-dash-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-dash-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-dash-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-dash-size-300: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-dash-size-400: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-dash-size-500: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-dash-size-600: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-cross-size-75: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-cross-size-100: var( + --spectrum-global-dimension-static-size-100 + ); + --spectrum-alias-ui-icon-cross-size-200: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-cross-size-300: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-cross-size-400: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-cross-size-500: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-cross-size-600: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-75: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-arrow-size-100: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-arrow-size-200: var( + --spectrum-global-dimension-static-size-150 + ); + --spectrum-alias-ui-icon-arrow-size-300: var( + --spectrum-global-dimension-static-size-175 + ); + --spectrum-alias-ui-icon-arrow-size-400: var( + --spectrum-global-dimension-static-size-200 + ); + --spectrum-alias-ui-icon-arrow-size-500: var( + --spectrum-global-dimension-static-size-225 + ); + --spectrum-alias-ui-icon-arrow-size-600: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var( + --spectrum-global-dimension-static-size-50 + ); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var( + --spectrum-global-dimension-static-size-25 + ); + --spectrum-alias-ui-icon-cornertriangle-size-100: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-alias-ui-icon-cornertriangle-size-300: var( + --spectrum-global-dimension-static-size-85 + ); + --spectrum-alias-ui-icon-asterisk-size-200: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-ui-icon-asterisk-size-300: var( + --spectrum-global-dimension-static-size-125 + ); + --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); + --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); + --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); + --spectrum-alias-tag-icon-size-l: var( + --spectrum-global-dimension-static-size-250 + ); + --spectrum-alias-tag-focusring-border-radius: var( + --spectrum-global-dimension-static-size-65 + ); + --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); + --spectrum-dialog-confirm-title-text-size: var( + --spectrum-alias-heading-s-text-size + ); + --spectrum-dialog-confirm-description-text-size: var( + --spectrum-global-dimension-font-size-100 + ); } diff --git a/tools/styles/spectrum-two/spectrum-theme-dark.css b/tools/styles/spectrum-two/spectrum-theme-dark.css index e677ccfb4d..351c88840e 100644 --- a/tools/styles/spectrum-two/spectrum-theme-dark.css +++ b/tools/styles/spectrum-two/spectrum-theme-dark.css @@ -1,293 +1,289 @@ :root, :host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 34, 184, 51; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 68, 202, 73; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 105, 220, 99; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 142, 235, 127; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 228, 194, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 244, 213, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 249, 232, 92; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 252, 246, 187; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 237, 87, 149; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 249, 114, 167; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 255, 143, 185; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 243; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 172, 111, 249; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 187, 135, 251; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 202, 159, 252; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 124, 129, 251; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 145, 149, 255; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 167, 170, 255; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 246, 88, 67; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 255, 117, 94; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 255, 149, 129; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 244, 129, 12; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 254, 154, 46; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 255, 181, 88; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 253, 206, 136; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 18, 162, 108; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 43, 180, 125; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 67, 199, 143; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 94, 217, 162; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 52, 143, 244; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 84, 163, 246; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 114, 183, 249; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 143, 202, 252; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 29, 29, 29; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 38, 38, 38; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 50, 50, 50; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 63, 63, 63; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 84, 84, 84; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 112, 112, 112; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 178, 178, 178; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 209, 209, 209; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 235, 235, 235; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 255, 255, 255; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-modal-overlay: #00000080; - --spectrum-alias-dropshadow-color: #00000080; - --spectrum-alias-background-color-hover-overlay: #ffffff0f; - --spectrum-alias-highlight-hover: #ffffff12; - --spectrum-alias-highlight-down: #ffffff1a; - --spectrum-alias-highlight-selected: #54a3f626; - --spectrum-alias-highlight-selected-hover: #54a3f640; - --spectrum-alias-text-highlight-color: #54a3f640; - --spectrum-alias-background-color-quickactions: #323232e6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-border-color-translucent: #ffffff1a; - --spectrum-alias-radial-reaction-color-default: #ebebeb99; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-50 - ); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: 0.9; + --spectrum-global-color-opacity-80: 0.8; + --spectrum-global-color-opacity-70: 0.7; + --spectrum-global-color-opacity-60: 0.6; + --spectrum-global-color-opacity-55: 0.55; + --spectrum-global-color-opacity-50: 0.5; + --spectrum-global-color-opacity-42: 0.42; + --spectrum-global-color-opacity-40: 0.4; + --spectrum-global-color-opacity-30: 0.3; + --spectrum-global-color-opacity-25: 0.25; + --spectrum-global-color-opacity-20: 0.2; + --spectrum-global-color-opacity-15: 0.15; + --spectrum-global-color-opacity-10: 0.1; + --spectrum-global-color-opacity-8: 0.08; + --spectrum-global-color-opacity-7: 0.07; + --spectrum-global-color-opacity-6: 0.06; + --spectrum-global-color-opacity-5: 0.05; + --spectrum-global-color-opacity-4: 0.04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 34, 184, 51; + --spectrum-global-color-celery-400: rgb( + var(--spectrum-global-color-celery-400-rgb) + ); + --spectrum-global-color-celery-500-rgb: 68, 202, 73; + --spectrum-global-color-celery-500: rgb( + var(--spectrum-global-color-celery-500-rgb) + ); + --spectrum-global-color-celery-600-rgb: 105, 220, 99; + --spectrum-global-color-celery-600: rgb( + var(--spectrum-global-color-celery-600-rgb) + ); + --spectrum-global-color-celery-700-rgb: 142, 235, 127; + --spectrum-global-color-celery-700: rgb( + var(--spectrum-global-color-celery-700-rgb) + ); + --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; + --spectrum-global-color-chartreuse-400: rgb( + var(--spectrum-global-color-chartreuse-400-rgb) + ); + --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; + --spectrum-global-color-chartreuse-500: rgb( + var(--spectrum-global-color-chartreuse-500-rgb) + ); + --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; + --spectrum-global-color-chartreuse-600: rgb( + var(--spectrum-global-color-chartreuse-600-rgb) + ); + --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; + --spectrum-global-color-chartreuse-700: rgb( + var(--spectrum-global-color-chartreuse-700-rgb) + ); + --spectrum-global-color-yellow-400-rgb: 228, 194, 0; + --spectrum-global-color-yellow-400: rgb( + var(--spectrum-global-color-yellow-400-rgb) + ); + --spectrum-global-color-yellow-500-rgb: 244, 213, 0; + --spectrum-global-color-yellow-500: rgb( + var(--spectrum-global-color-yellow-500-rgb) + ); + --spectrum-global-color-yellow-600-rgb: 249, 232, 92; + --spectrum-global-color-yellow-600: rgb( + var(--spectrum-global-color-yellow-600-rgb) + ); + --spectrum-global-color-yellow-700-rgb: 252, 246, 187; + --spectrum-global-color-yellow-700: rgb( + var(--spectrum-global-color-yellow-700-rgb) + ); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb( + var(--spectrum-global-color-magenta-400-rgb) + ); + --spectrum-global-color-magenta-500-rgb: 237, 87, 149; + --spectrum-global-color-magenta-500: rgb( + var(--spectrum-global-color-magenta-500-rgb) + ); + --spectrum-global-color-magenta-600-rgb: 249, 114, 167; + --spectrum-global-color-magenta-600: rgb( + var(--spectrum-global-color-magenta-600-rgb) + ); + --spectrum-global-color-magenta-700-rgb: 255, 143, 185; + --spectrum-global-color-magenta-700: rgb( + var(--spectrum-global-color-magenta-700-rgb) + ); + --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; + --spectrum-global-color-fuchsia-400: rgb( + var(--spectrum-global-color-fuchsia-400-rgb) + ); + --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; + --spectrum-global-color-fuchsia-500: rgb( + var(--spectrum-global-color-fuchsia-500-rgb) + ); + --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; + --spectrum-global-color-fuchsia-600: rgb( + var(--spectrum-global-color-fuchsia-600-rgb) + ); + --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; + --spectrum-global-color-fuchsia-700: rgb( + var(--spectrum-global-color-fuchsia-700-rgb) + ); + --spectrum-global-color-purple-400-rgb: 157, 87, 243; + --spectrum-global-color-purple-400: rgb( + var(--spectrum-global-color-purple-400-rgb) + ); + --spectrum-global-color-purple-500-rgb: 172, 111, 249; + --spectrum-global-color-purple-500: rgb( + var(--spectrum-global-color-purple-500-rgb) + ); + --spectrum-global-color-purple-600-rgb: 187, 135, 251; + --spectrum-global-color-purple-600: rgb( + var(--spectrum-global-color-purple-600-rgb) + ); + --spectrum-global-color-purple-700-rgb: 202, 159, 252; + --spectrum-global-color-purple-700: rgb( + var(--spectrum-global-color-purple-700-rgb) + ); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb( + var(--spectrum-global-color-indigo-400-rgb) + ); + --spectrum-global-color-indigo-500-rgb: 124, 129, 251; + --spectrum-global-color-indigo-500: rgb( + var(--spectrum-global-color-indigo-500-rgb) + ); + --spectrum-global-color-indigo-600-rgb: 145, 149, 255; + --spectrum-global-color-indigo-600: rgb( + var(--spectrum-global-color-indigo-600-rgb) + ); + --spectrum-global-color-indigo-700-rgb: 167, 170, 255; + --spectrum-global-color-indigo-700: rgb( + var(--spectrum-global-color-indigo-700-rgb) + ); + --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; + --spectrum-global-color-seafoam-400: rgb( + var(--spectrum-global-color-seafoam-400-rgb) + ); + --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; + --spectrum-global-color-seafoam-500: rgb( + var(--spectrum-global-color-seafoam-500-rgb) + ); + --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; + --spectrum-global-color-seafoam-600: rgb( + var(--spectrum-global-color-seafoam-600-rgb) + ); + --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; + --spectrum-global-color-seafoam-700: rgb( + var(--spectrum-global-color-seafoam-700-rgb) + ); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb( + var(--spectrum-global-color-red-400-rgb) + ); + --spectrum-global-color-red-500-rgb: 246, 88, 67; + --spectrum-global-color-red-500: rgb( + var(--spectrum-global-color-red-500-rgb) + ); + --spectrum-global-color-red-600-rgb: 255, 117, 94; + --spectrum-global-color-red-600: rgb( + var(--spectrum-global-color-red-600-rgb) + ); + --spectrum-global-color-red-700-rgb: 255, 149, 129; + --spectrum-global-color-red-700: rgb( + var(--spectrum-global-color-red-700-rgb) + ); + --spectrum-global-color-orange-400-rgb: 244, 129, 12; + --spectrum-global-color-orange-400: rgb( + var(--spectrum-global-color-orange-400-rgb) + ); + --spectrum-global-color-orange-500-rgb: 254, 154, 46; + --spectrum-global-color-orange-500: rgb( + var(--spectrum-global-color-orange-500-rgb) + ); + --spectrum-global-color-orange-600-rgb: 255, 181, 88; + --spectrum-global-color-orange-600: rgb( + var(--spectrum-global-color-orange-600-rgb) + ); + --spectrum-global-color-orange-700-rgb: 253, 206, 136; + --spectrum-global-color-orange-700: rgb( + var(--spectrum-global-color-orange-700-rgb) + ); + --spectrum-global-color-green-400-rgb: 18, 162, 108; + --spectrum-global-color-green-400: rgb( + var(--spectrum-global-color-green-400-rgb) + ); + --spectrum-global-color-green-500-rgb: 43, 180, 125; + --spectrum-global-color-green-500: rgb( + var(--spectrum-global-color-green-500-rgb) + ); + --spectrum-global-color-green-600-rgb: 67, 199, 143; + --spectrum-global-color-green-600: rgb( + var(--spectrum-global-color-green-600-rgb) + ); + --spectrum-global-color-green-700-rgb: 94, 217, 162; + --spectrum-global-color-green-700: rgb( + var(--spectrum-global-color-green-700-rgb) + ); + --spectrum-global-color-blue-400-rgb: 52, 143, 244; + --spectrum-global-color-blue-400: rgb( + var(--spectrum-global-color-blue-400-rgb) + ); + --spectrum-global-color-blue-500-rgb: 84, 163, 246; + --spectrum-global-color-blue-500: rgb( + var(--spectrum-global-color-blue-500-rgb) + ); + --spectrum-global-color-blue-600-rgb: 114, 183, 249; + --spectrum-global-color-blue-600: rgb( + var(--spectrum-global-color-blue-600-rgb) + ); + --spectrum-global-color-blue-700-rgb: 143, 202, 252; + --spectrum-global-color-blue-700: rgb( + var(--spectrum-global-color-blue-700-rgb) + ); + --spectrum-global-color-gray-50-rgb: 29, 29, 29; + --spectrum-global-color-gray-50: rgb( + var(--spectrum-global-color-gray-50-rgb) + ); + --spectrum-global-color-gray-75-rgb: 38, 38, 38; + --spectrum-global-color-gray-75: rgb( + var(--spectrum-global-color-gray-75-rgb) + ); + --spectrum-global-color-gray-100-rgb: 50, 50, 50; + --spectrum-global-color-gray-100: rgb( + var(--spectrum-global-color-gray-100-rgb) + ); + --spectrum-global-color-gray-200-rgb: 63, 63, 63; + --spectrum-global-color-gray-200: rgb( + var(--spectrum-global-color-gray-200-rgb) + ); + --spectrum-global-color-gray-300-rgb: 84, 84, 84; + --spectrum-global-color-gray-300: rgb( + var(--spectrum-global-color-gray-300-rgb) + ); + --spectrum-global-color-gray-400-rgb: 112, 112, 112; + --spectrum-global-color-gray-400: rgb( + var(--spectrum-global-color-gray-400-rgb) + ); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb( + var(--spectrum-global-color-gray-500-rgb) + ); + --spectrum-global-color-gray-600-rgb: 178, 178, 178; + --spectrum-global-color-gray-600: rgb( + var(--spectrum-global-color-gray-600-rgb) + ); + --spectrum-global-color-gray-700-rgb: 209, 209, 209; + --spectrum-global-color-gray-700: rgb( + var(--spectrum-global-color-gray-700-rgb) + ); + --spectrum-global-color-gray-800-rgb: 235, 235, 235; + --spectrum-global-color-gray-800: rgb( + var(--spectrum-global-color-gray-800-rgb) + ); + --spectrum-global-color-gray-900-rgb: 255, 255, 255; + --spectrum-global-color-gray-900: rgb( + var(--spectrum-global-color-gray-900-rgb) + ); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-75 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-modal-overlay: #00000080; + --spectrum-alias-dropshadow-color: #00000080; + --spectrum-alias-background-color-hover-overlay: #ffffff0f; + --spectrum-alias-highlight-hover: #ffffff12; + --spectrum-alias-highlight-down: #ffffff1a; + --spectrum-alias-highlight-selected: #54a3f626; + --spectrum-alias-highlight-selected-hover: #54a3f640; + --spectrum-alias-text-highlight-color: #54a3f640; + --spectrum-alias-background-color-quickactions: #323232e6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-border-color-translucent: #ffffff1a; + --spectrum-alias-radial-reaction-color-default: #ebebeb99; + --spectrum-alias-pasteboard-background-color: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-separator-color: var( + --spectrum-global-color-gray-50 + ); } diff --git a/tools/styles/spectrum-two/spectrum-theme-light.css b/tools/styles/spectrum-two/spectrum-theme-light.css index 99414590fb..87288410fd 100644 --- a/tools/styles/spectrum-two/spectrum-theme-light.css +++ b/tools/styles/spectrum-two/spectrum-theme-light.css @@ -1,293 +1,289 @@ :root, :host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 39, 187, 54; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 7, 167, 33; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 0, 145, 18; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 0, 124, 15; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 232, 198, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 215, 179, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 196, 159, 0; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 176, 140, 0; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 200, 34, 105; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 173, 9, 85; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 142, 0, 69; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 244; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 137, 61, 231; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 115, 38, 211; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 93, 19, 183; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 82, 88, 228; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 64, 70, 202; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 50, 54, 168; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 211, 21, 16; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 180, 0, 0; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 147, 0, 0; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 246, 133, 17; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 228, 111, 0; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 203, 93, 0; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 177, 76, 0; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 143, 93; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 0, 122, 77; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 0, 101, 62; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 0, 81, 50; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 20, 122, 243; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 2, 101, 220; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 0, 84, 182; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 0, 68, 145; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 253, 253, 253; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 248, 248, 248; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 230, 230, 230; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 213, 213, 213; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 177, 177, 177; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 109, 109, 109; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 70, 70, 70; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-background-color-modal-overlay: #0006; - --spectrum-alias-dropshadow-color: #00000026; - --spectrum-alias-background-color-hover-overlay: #0000000a; - --spectrum-alias-highlight-hover: #0000000f; - --spectrum-alias-highlight-down: #0000001a; - --spectrum-alias-highlight-selected: #0265dc1a; - --spectrum-alias-highlight-selected-hover: #0265dc33; - --spectrum-alias-text-highlight-color: #0265dc33; - --spectrum-alias-background-color-quickactions: #f8f8f8e6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-translucent: #0000001a; - --spectrum-alias-radial-reaction-color-default: #2229; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-300 - ); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.1; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: 0.9; + --spectrum-global-color-opacity-80: 0.8; + --spectrum-global-color-opacity-70: 0.7; + --spectrum-global-color-opacity-60: 0.6; + --spectrum-global-color-opacity-55: 0.55; + --spectrum-global-color-opacity-50: 0.5; + --spectrum-global-color-opacity-42: 0.42; + --spectrum-global-color-opacity-40: 0.4; + --spectrum-global-color-opacity-30: 0.3; + --spectrum-global-color-opacity-25: 0.25; + --spectrum-global-color-opacity-20: 0.2; + --spectrum-global-color-opacity-15: 0.15; + --spectrum-global-color-opacity-10: 0.1; + --spectrum-global-color-opacity-8: 0.08; + --spectrum-global-color-opacity-7: 0.07; + --spectrum-global-color-opacity-6: 0.06; + --spectrum-global-color-opacity-5: 0.05; + --spectrum-global-color-opacity-4: 0.04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 39, 187, 54; + --spectrum-global-color-celery-400: rgb( + var(--spectrum-global-color-celery-400-rgb) + ); + --spectrum-global-color-celery-500-rgb: 7, 167, 33; + --spectrum-global-color-celery-500: rgb( + var(--spectrum-global-color-celery-500-rgb) + ); + --spectrum-global-color-celery-600-rgb: 0, 145, 18; + --spectrum-global-color-celery-600: rgb( + var(--spectrum-global-color-celery-600-rgb) + ); + --spectrum-global-color-celery-700-rgb: 0, 124, 15; + --spectrum-global-color-celery-700: rgb( + var(--spectrum-global-color-celery-700-rgb) + ); + --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; + --spectrum-global-color-chartreuse-400: rgb( + var(--spectrum-global-color-chartreuse-400-rgb) + ); + --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; + --spectrum-global-color-chartreuse-500: rgb( + var(--spectrum-global-color-chartreuse-500-rgb) + ); + --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; + --spectrum-global-color-chartreuse-600: rgb( + var(--spectrum-global-color-chartreuse-600-rgb) + ); + --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; + --spectrum-global-color-chartreuse-700: rgb( + var(--spectrum-global-color-chartreuse-700-rgb) + ); + --spectrum-global-color-yellow-400-rgb: 232, 198, 0; + --spectrum-global-color-yellow-400: rgb( + var(--spectrum-global-color-yellow-400-rgb) + ); + --spectrum-global-color-yellow-500-rgb: 215, 179, 0; + --spectrum-global-color-yellow-500: rgb( + var(--spectrum-global-color-yellow-500-rgb) + ); + --spectrum-global-color-yellow-600-rgb: 196, 159, 0; + --spectrum-global-color-yellow-600: rgb( + var(--spectrum-global-color-yellow-600-rgb) + ); + --spectrum-global-color-yellow-700-rgb: 176, 140, 0; + --spectrum-global-color-yellow-700: rgb( + var(--spectrum-global-color-yellow-700-rgb) + ); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb( + var(--spectrum-global-color-magenta-400-rgb) + ); + --spectrum-global-color-magenta-500-rgb: 200, 34, 105; + --spectrum-global-color-magenta-500: rgb( + var(--spectrum-global-color-magenta-500-rgb) + ); + --spectrum-global-color-magenta-600-rgb: 173, 9, 85; + --spectrum-global-color-magenta-600: rgb( + var(--spectrum-global-color-magenta-600-rgb) + ); + --spectrum-global-color-magenta-700-rgb: 142, 0, 69; + --spectrum-global-color-magenta-700: rgb( + var(--spectrum-global-color-magenta-700-rgb) + ); + --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; + --spectrum-global-color-fuchsia-400: rgb( + var(--spectrum-global-color-fuchsia-400-rgb) + ); + --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; + --spectrum-global-color-fuchsia-500: rgb( + var(--spectrum-global-color-fuchsia-500-rgb) + ); + --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; + --spectrum-global-color-fuchsia-600: rgb( + var(--spectrum-global-color-fuchsia-600-rgb) + ); + --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; + --spectrum-global-color-fuchsia-700: rgb( + var(--spectrum-global-color-fuchsia-700-rgb) + ); + --spectrum-global-color-purple-400-rgb: 157, 87, 244; + --spectrum-global-color-purple-400: rgb( + var(--spectrum-global-color-purple-400-rgb) + ); + --spectrum-global-color-purple-500-rgb: 137, 61, 231; + --spectrum-global-color-purple-500: rgb( + var(--spectrum-global-color-purple-500-rgb) + ); + --spectrum-global-color-purple-600-rgb: 115, 38, 211; + --spectrum-global-color-purple-600: rgb( + var(--spectrum-global-color-purple-600-rgb) + ); + --spectrum-global-color-purple-700-rgb: 93, 19, 183; + --spectrum-global-color-purple-700: rgb( + var(--spectrum-global-color-purple-700-rgb) + ); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb( + var(--spectrum-global-color-indigo-400-rgb) + ); + --spectrum-global-color-indigo-500-rgb: 82, 88, 228; + --spectrum-global-color-indigo-500: rgb( + var(--spectrum-global-color-indigo-500-rgb) + ); + --spectrum-global-color-indigo-600-rgb: 64, 70, 202; + --spectrum-global-color-indigo-600: rgb( + var(--spectrum-global-color-indigo-600-rgb) + ); + --spectrum-global-color-indigo-700-rgb: 50, 54, 168; + --spectrum-global-color-indigo-700: rgb( + var(--spectrum-global-color-indigo-700-rgb) + ); + --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; + --spectrum-global-color-seafoam-400: rgb( + var(--spectrum-global-color-seafoam-400-rgb) + ); + --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; + --spectrum-global-color-seafoam-500: rgb( + var(--spectrum-global-color-seafoam-500-rgb) + ); + --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; + --spectrum-global-color-seafoam-600: rgb( + var(--spectrum-global-color-seafoam-600-rgb) + ); + --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; + --spectrum-global-color-seafoam-700: rgb( + var(--spectrum-global-color-seafoam-700-rgb) + ); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb( + var(--spectrum-global-color-red-400-rgb) + ); + --spectrum-global-color-red-500-rgb: 211, 21, 16; + --spectrum-global-color-red-500: rgb( + var(--spectrum-global-color-red-500-rgb) + ); + --spectrum-global-color-red-600-rgb: 180, 0, 0; + --spectrum-global-color-red-600: rgb( + var(--spectrum-global-color-red-600-rgb) + ); + --spectrum-global-color-red-700-rgb: 147, 0, 0; + --spectrum-global-color-red-700: rgb( + var(--spectrum-global-color-red-700-rgb) + ); + --spectrum-global-color-orange-400-rgb: 246, 133, 17; + --spectrum-global-color-orange-400: rgb( + var(--spectrum-global-color-orange-400-rgb) + ); + --spectrum-global-color-orange-500-rgb: 228, 111, 0; + --spectrum-global-color-orange-500: rgb( + var(--spectrum-global-color-orange-500-rgb) + ); + --spectrum-global-color-orange-600-rgb: 203, 93, 0; + --spectrum-global-color-orange-600: rgb( + var(--spectrum-global-color-orange-600-rgb) + ); + --spectrum-global-color-orange-700-rgb: 177, 76, 0; + --spectrum-global-color-orange-700: rgb( + var(--spectrum-global-color-orange-700-rgb) + ); + --spectrum-global-color-green-400-rgb: 0, 143, 93; + --spectrum-global-color-green-400: rgb( + var(--spectrum-global-color-green-400-rgb) + ); + --spectrum-global-color-green-500-rgb: 0, 122, 77; + --spectrum-global-color-green-500: rgb( + var(--spectrum-global-color-green-500-rgb) + ); + --spectrum-global-color-green-600-rgb: 0, 101, 62; + --spectrum-global-color-green-600: rgb( + var(--spectrum-global-color-green-600-rgb) + ); + --spectrum-global-color-green-700-rgb: 0, 81, 50; + --spectrum-global-color-green-700: rgb( + var(--spectrum-global-color-green-700-rgb) + ); + --spectrum-global-color-blue-400-rgb: 20, 122, 243; + --spectrum-global-color-blue-400: rgb( + var(--spectrum-global-color-blue-400-rgb) + ); + --spectrum-global-color-blue-500-rgb: 2, 101, 220; + --spectrum-global-color-blue-500: rgb( + var(--spectrum-global-color-blue-500-rgb) + ); + --spectrum-global-color-blue-600-rgb: 0, 84, 182; + --spectrum-global-color-blue-600: rgb( + var(--spectrum-global-color-blue-600-rgb) + ); + --spectrum-global-color-blue-700-rgb: 0, 68, 145; + --spectrum-global-color-blue-700: rgb( + var(--spectrum-global-color-blue-700-rgb) + ); + --spectrum-global-color-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-gray-50: rgb( + var(--spectrum-global-color-gray-50-rgb) + ); + --spectrum-global-color-gray-75-rgb: 253, 253, 253; + --spectrum-global-color-gray-75: rgb( + var(--spectrum-global-color-gray-75-rgb) + ); + --spectrum-global-color-gray-100-rgb: 248, 248, 248; + --spectrum-global-color-gray-100: rgb( + var(--spectrum-global-color-gray-100-rgb) + ); + --spectrum-global-color-gray-200-rgb: 230, 230, 230; + --spectrum-global-color-gray-200: rgb( + var(--spectrum-global-color-gray-200-rgb) + ); + --spectrum-global-color-gray-300-rgb: 213, 213, 213; + --spectrum-global-color-gray-300: rgb( + var(--spectrum-global-color-gray-300-rgb) + ); + --spectrum-global-color-gray-400-rgb: 177, 177, 177; + --spectrum-global-color-gray-400: rgb( + var(--spectrum-global-color-gray-400-rgb) + ); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb( + var(--spectrum-global-color-gray-500-rgb) + ); + --spectrum-global-color-gray-600-rgb: 109, 109, 109; + --spectrum-global-color-gray-600: rgb( + var(--spectrum-global-color-gray-600-rgb) + ); + --spectrum-global-color-gray-700-rgb: 70, 70, 70; + --spectrum-global-color-gray-700: rgb( + var(--spectrum-global-color-gray-700-rgb) + ); + --spectrum-global-color-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-gray-800: rgb( + var(--spectrum-global-color-gray-800-rgb) + ); + --spectrum-global-color-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-gray-900: rgb( + var(--spectrum-global-color-gray-900-rgb) + ); + --spectrum-alias-background-color-primary: var( + --spectrum-global-color-gray-50 + ); + --spectrum-alias-background-color-secondary: var( + --spectrum-global-color-gray-100 + ); + --spectrum-alias-background-color-tertiary: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-background-color-modal-overlay: #0006; + --spectrum-alias-dropshadow-color: #00000026; + --spectrum-alias-background-color-hover-overlay: #0000000a; + --spectrum-alias-highlight-hover: #0000000f; + --spectrum-alias-highlight-down: #0000001a; + --spectrum-alias-highlight-selected: #0265dc1a; + --spectrum-alias-highlight-selected-hover: #0265dc33; + --spectrum-alias-text-highlight-color: #0265dc33; + --spectrum-alias-background-color-quickactions: #f8f8f8e6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-border-color-translucent: #0000001a; + --spectrum-alias-radial-reaction-color-default: #2229; + --spectrum-alias-pasteboard-background-color: var( + --spectrum-global-color-gray-300 + ); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-separator-color: var( + --spectrum-global-color-gray-300 + ); } diff --git a/tools/styles/src/body-overrides.css b/tools/styles/src/body-overrides.css index b2e1c5a7a0..e0c582ffc3 100644 --- a/tools/styles/src/body-overrides.css +++ b/tools/styles/src/body-overrides.css @@ -12,40 +12,40 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Body { - --spectrum-body-sans-serif-font-family: var( - --system-body-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--system-body-serif-font-family); - --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); - --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); - --spectrum-body-font-color: var(--system-body-font-color); - --spectrum-body-font-size: var(--system-body-font-size); + --spectrum-body-sans-serif-font-family: var( + --system-body-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-font-size); } .spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--system-body-size-xs-font-size); + --spectrum-body-font-size: var(--system-body-size-xs-font-size); } .spectrum-Body--sizeS { - --spectrum-body-font-size: var(--system-body-size-s-font-size); + --spectrum-body-font-size: var(--system-body-size-s-font-size); } .spectrum-Body--sizeM { - --spectrum-body-font-size: var(--system-body-size-m-font-size); + --spectrum-body-font-size: var(--system-body-size-m-font-size); } .spectrum-Body--sizeL { - --spectrum-body-font-size: var(--system-body-size-l-font-size); + --spectrum-body-font-size: var(--system-body-size-l-font-size); } .spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--system-body-size-xl-font-size); + --spectrum-body-font-size: var(--system-body-size-xl-font-size); } .spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--system-body-size-xxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxl-font-size); } .spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); } diff --git a/tools/styles/src/code-overrides.css b/tools/styles/src/code-overrides.css index 58d3804499..f63166ae2b 100644 --- a/tools/styles/src/code-overrides.css +++ b/tools/styles/src/code-overrides.css @@ -12,28 +12,28 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Code { - --spectrum-code-font-family: var(--system-code-font-family); - --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); - --spectrum-code-font-color: var(--system-code-font-color); - --spectrum-code-font-size: var(--system-code-font-size); + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-font-size); } .spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--system-code-size-xs-font-size); + --spectrum-code-font-size: var(--system-code-size-xs-font-size); } .spectrum-Code--sizeS { - --spectrum-code-font-size: var(--system-code-size-s-font-size); + --spectrum-code-font-size: var(--system-code-size-s-font-size); } .spectrum-Code--sizeM { - --spectrum-code-font-size: var(--system-code-size-m-font-size); + --spectrum-code-font-size: var(--system-code-size-m-font-size); } .spectrum-Code--sizeL { - --spectrum-code-font-size: var(--system-code-size-l-font-size); + --spectrum-code-font-size: var(--system-code-size-l-font-size); } .spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--system-code-size-xl-font-size); + --spectrum-code-font-size: var(--system-code-size-xl-font-size); } diff --git a/tools/styles/src/detail-overrides.css b/tools/styles/src/detail-overrides.css index 9aff846cc8..59a880b9c7 100644 --- a/tools/styles/src/detail-overrides.css +++ b/tools/styles/src/detail-overrides.css @@ -12,27 +12,27 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var( - --system-detail-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); - --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); - --spectrum-detail-font-color: var(--system-detail-font-color); - --spectrum-detail-font-size: var(--system-detail-font-size); + --spectrum-detail-sans-serif-font-family: var( + --system-detail-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-font-size); } .spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--system-detail-size-s-font-size); + --spectrum-detail-font-size: var(--system-detail-size-s-font-size); } .spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--system-detail-size-m-font-size); + --spectrum-detail-font-size: var(--system-detail-size-m-font-size); } .spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--system-detail-size-l-font-size); + --spectrum-detail-font-size: var(--system-detail-size-l-font-size); } .spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); } diff --git a/tools/styles/src/heading-overrides.css b/tools/styles/src/heading-overrides.css index 0ec47c8faf..4e9b7dd65c 100644 --- a/tools/styles/src/heading-overrides.css +++ b/tools/styles/src/heading-overrides.css @@ -12,73 +12,61 @@ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var( - --system-heading-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var( - --system-heading-serif-font-family - ); - --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); - --spectrum-heading-cjk-letter-spacing: var( - --system-heading-cjk-letter-spacing - ); - --spectrum-heading-font-color: var(--system-heading-font-color); - --spectrum-heading-font-size: var(--system-heading-font-size); - --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); + --spectrum-heading-sans-serif-font-family: var( + --system-heading-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var(--system-heading-serif-font-family); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var( + --system-heading-cjk-letter-spacing + ); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); } .spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxs-cjk-font-size + ); } .spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xs-cjk-font-size); } .spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--system-heading-size-s-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-s-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-s-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-s-cjk-font-size); } .spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--system-heading-size-m-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-m-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-m-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-m-cjk-font-size); } .spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--system-heading-size-l-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-l-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-l-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-l-cjk-font-size); } .spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xl-cjk-font-size); } .spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxl-cjk-font-size + ); } .spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxxl-cjk-font-size + ); } diff --git a/tools/styles/src/spectrum-body.css b/tools/styles/src/spectrum-body.css index 3b75f4b56c..a431380aa3 100644 --- a/tools/styles/src/spectrum-body.css +++ b/tools/styles/src/spectrum-body.css @@ -12,107 +12,107 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography .spectrum-Body { - --spectrum-body-margin-end: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); + --spectrum-body-margin-end: calc( + var(--mod-body-font-size, var(--spectrum-body-font-size)) * + var(--spectrum-body-margin-multiplier) + ); } @media (forced-colors: active) { - .spectrum-Body { - --highcontrast-body-font-color: Text; - } + .spectrum-Body { + --highcontrast-body-font-color: Text; + } } .spectrum-Body { - font-family: var( - --mod-body-sans-serif-font-family, - var(--spectrum-body-sans-serif-font-family) - ); - font-style: var( - --mod-body-sans-serif-font-style, - var(--spectrum-body-sans-serif-font-style) - ); - font-weight: var( - --mod-body-sans-serif-font-weight, - var(--spectrum-body-sans-serif-font-weight) - ); - font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); - color: var( - --highcontrast-body-font-color, - var(--mod-body-font-color, var(--spectrum-body-font-color)) - ); - line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); - margin-block-start: var( - --mod-body-margin-start, - var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) - ); - margin-block-end: var( - --mod-body-margin-end, - var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) - ); + font-family: var( + --mod-body-sans-serif-font-family, + var(--spectrum-body-sans-serif-font-family) + ); + font-style: var( + --mod-body-sans-serif-font-style, + var(--spectrum-body-sans-serif-font-style) + ); + font-weight: var( + --mod-body-sans-serif-font-weight, + var(--spectrum-body-sans-serif-font-weight) + ); + font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); + color: var( + --highcontrast-body-font-color, + var(--mod-body-font-color, var(--spectrum-body-font-color)) + ); + line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); + margin-block-start: var( + --mod-body-margin-start, + var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) + ); + margin-block-end: var( + --mod-body-margin-end, + var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) + ); } .spectrum-Body .spectrum-Body-strong, .spectrum-Body strong { - font-style: var( - --mod-body-sans-serif-strong-font-style, - var(--spectrum-body-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-font-weight, - var(--spectrum-body-sans-serif-strong-font-weight) - ); + font-style: var( + --mod-body-sans-serif-strong-font-style, + var(--spectrum-body-sans-serif-strong-font-style) + ); + font-weight: var( + --mod-body-sans-serif-strong-font-weight, + var(--spectrum-body-sans-serif-strong-font-weight) + ); } .spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em { - font-style: var( - --mod-body-sans-serif-emphasized-font-style, - var(--spectrum-body-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-emphasized-font-weight, - var(--spectrum-body-sans-serif-emphasized-font-weight) - ); + font-style: var( + --mod-body-sans-serif-emphasized-font-style, + var(--spectrum-body-sans-serif-emphasized-font-style) + ); + font-weight: var( + --mod-body-sans-serif-emphasized-font-weight, + var(--spectrum-body-sans-serif-emphasized-font-weight) + ); } .spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em { - font-style: var( - --mod-body-sans-serif-strong-emphasized-font-style, - var(--spectrum-body-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-emphasized-font-weight, - var(--spectrum-body-sans-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-sans-serif-strong-emphasized-font-style, + var(--spectrum-body-sans-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-sans-serif-strong-emphasized-font-weight, + var(--spectrum-body-sans-serif-strong-emphasized-font-weight) + ); } .spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh) { - font-family: var( - --mod-body-cjk-font-family, - var(--spectrum-body-cjk-font-family) - ); - font-style: var( - --mod-body-cjk-font-style, - var(--spectrum-body-cjk-font-style) - ); - font-weight: var( - --mod-body-cjk-font-weight, - var(--spectrum-body-cjk-font-weight) - ); - line-height: var( - --mod-body-cjk-line-height, - var(--spectrum-body-cjk-line-height) - ); - letter-spacing: var( - --mod-body-cjk-letter-spacing, - var(--spectrum-body-cjk-letter-spacing) - ); + font-family: var( + --mod-body-cjk-font-family, + var(--spectrum-body-cjk-font-family) + ); + font-style: var( + --mod-body-cjk-font-style, + var(--spectrum-body-cjk-font-style) + ); + font-weight: var( + --mod-body-cjk-font-weight, + var(--spectrum-body-cjk-font-weight) + ); + line-height: var( + --mod-body-cjk-line-height, + var(--spectrum-body-cjk-line-height) + ); + letter-spacing: var( + --mod-body-cjk-letter-spacing, + var(--spectrum-body-cjk-letter-spacing) + ); } .spectrum-Body:lang(ja) .spectrum-Body-strong, @@ -121,14 +121,14 @@ governing permissions and limitations under the License. .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong { - font-style: var( - --mod-body-cjk-strong-font-style, - var(--spectrum-body-cjk-strong-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-font-weight, - var(--spectrum-body-cjk-strong-font-weight) - ); + font-style: var( + --mod-body-cjk-strong-font-style, + var(--spectrum-body-cjk-strong-font-style) + ); + font-weight: var( + --mod-body-cjk-strong-font-weight, + var(--spectrum-body-cjk-strong-font-weight) + ); } .spectrum-Body:lang(ja) .spectrum-Body-emphasized, @@ -137,14 +137,14 @@ governing permissions and limitations under the License. .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em { - font-style: var( - --mod-body-cjk-emphasized-font-style, - var(--spectrum-body-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-emphasized-font-weight, - var(--spectrum-body-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-body-cjk-emphasized-font-style, + var(--spectrum-body-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-body-cjk-emphasized-font-weight, + var(--spectrum-body-cjk-emphasized-font-weight) + ); } .spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, @@ -156,87 +156,87 @@ governing permissions and limitations under the License. .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em { - font-style: var( - --mod-body-cjk-strong-emphasized-font-style, - var(--spectrum-body-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-emphasized-font-weight, - var(--spectrum-body-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-cjk-strong-emphasized-font-style, + var(--spectrum-body-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-cjk-strong-emphasized-font-weight, + var(--spectrum-body-cjk-strong-emphasized-font-weight) + ); } .spectrum-Body--serif { - font-family: var( - --mod-body-serif-font-family, - var(--spectrum-body-serif-font-family) - ); - font-weight: var( - --mod-body-serif-font-weight, - var(--spectrum-body-serif-font-weight) - ); - font-style: var( - --mod-body-serif-font-style, - var(--spectrum-body-serif-font-style) - ); + font-family: var( + --mod-body-serif-font-family, + var(--spectrum-body-serif-font-family) + ); + font-weight: var( + --mod-body-serif-font-weight, + var(--spectrum-body-serif-font-weight) + ); + font-style: var( + --mod-body-serif-font-style, + var(--spectrum-body-serif-font-style) + ); } .spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong { - font-style: var( - --mod-body-serif-strong-font-style, - var(--spectrum-body-serif-strong-font-style) - ); - font-weight: var( - --mod-body-serif-strong-font-weight, - var(--spectrum-body-serif-strong-font-weight) - ); + font-style: var( + --mod-body-serif-strong-font-style, + var(--spectrum-body-serif-strong-font-style) + ); + font-weight: var( + --mod-body-serif-strong-font-weight, + var(--spectrum-body-serif-strong-font-weight) + ); } .spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em { - font-style: var( - --mod-body-serif-emphasized-font-style, - var(--spectrum-body-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-emphasized-font-weight, - var(--spectrum-body-serif-emphasized-font-weight) - ); + font-style: var( + --mod-body-serif-emphasized-font-style, + var(--spectrum-body-serif-emphasized-font-style) + ); + font-weight: var( + --mod-body-serif-emphasized-font-weight, + var(--spectrum-body-serif-emphasized-font-weight) + ); } .spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em { - font-style: var( - --mod-body-serif-strong-emphasized-font-style, - var(--spectrum-body-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-strong-emphasized-font-weight, - var(--spectrum-body-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-serif-strong-emphasized-font-style, + var(--spectrum-body-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-serif-strong-emphasized-font-weight, + var(--spectrum-body-serif-strong-emphasized-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized { - font-style: var( - --mod-detail-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-strong-emphasized-font-style, + var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-strong-emphasized-font-weight, + var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light - .spectrum-Detail-strong.spectrum-Body-emphasized { - font-style: var( - --mod-detail-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-serif-light-strong-emphasized-font-weight) - ); + .spectrum-Detail-strong.spectrum-Body-emphasized { + font-style: var( + --mod-detail-serif-light-strong-emphasized-font-style, + var(--spectrum-detail-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-light-strong-emphasized-font-weight, + var(--spectrum-detail-serif-light-strong-emphasized-font-weight) + ); } diff --git a/tools/styles/src/spectrum-code.css b/tools/styles/src/spectrum-code.css index a628316dbc..0e17798885 100644 --- a/tools/styles/src/spectrum-code.css +++ b/tools/styles/src/spectrum-code.css @@ -12,91 +12,91 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - .spectrum-Code { - --highcontrast-code-font-color: Text; - } + .spectrum-Code { + --highcontrast-code-font-color: Text; + } } .spectrum-Code { - font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); - font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); - font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); - font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); - line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); - color: var( - --highcontrast-code-font-color, - var(--mod-code-font-color, var(--spectrum-code-font-color)) - ); - margin-block-start: var( - --mod-code-margin-start, - var(--spectrum-code-margin-end, 0) - ); - margin-block-end: var( - --mod-code-margin-end, - var(--spectrum-code-margin-end, 0) - ); + font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); + font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); + font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); + font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); + line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); + color: var( + --highcontrast-code-font-color, + var(--mod-code-font-color, var(--spectrum-code-font-color)) + ); + margin-block-start: var( + --mod-code-margin-start, + var(--spectrum-code-margin-end, 0) + ); + margin-block-end: var( + --mod-code-margin-end, + var(--spectrum-code-margin-end, 0) + ); } .spectrum-Code .spectrum-Code-strong, .spectrum-Code strong { - font-style: var( - --mod-code-strong-font-style, - var(--spectrum-code-strong-font-style) - ); - font-weight: var( - --mod-code-strong-font-weight, - var(--spectrum-code-strong-font-weight) - ); + font-style: var( + --mod-code-strong-font-style, + var(--spectrum-code-strong-font-style) + ); + font-weight: var( + --mod-code-strong-font-weight, + var(--spectrum-code-strong-font-weight) + ); } .spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em { - font-style: var( - --mod-code-emphasized-font-style, - var(--spectrum-code-emphasized-font-style) - ); - font-weight: var( - --mod-code-emphasized-font-weight, - var(--spectrum-code-emphasized-font-weight) - ); + font-style: var( + --mod-code-emphasized-font-style, + var(--spectrum-code-emphasized-font-style) + ); + font-weight: var( + --mod-code-emphasized-font-weight, + var(--spectrum-code-emphasized-font-weight) + ); } .spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em { - font-style: var( - --mod-code-strong-emphasized-font-style, - var(--spectrum-code-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-strong-emphasized-font-weight, - var(--spectrum-code-strong-emphasized-font-weight) - ); + font-style: var( + --mod-code-strong-emphasized-font-style, + var(--spectrum-code-strong-emphasized-font-style) + ); + font-weight: var( + --mod-code-strong-emphasized-font-weight, + var(--spectrum-code-strong-emphasized-font-weight) + ); } .spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh) { - font-family: var( - --mod-code-cjk-font-family, - var(--spectrum-code-cjk-font-family) - ); - font-style: var( - --mod-code-cjk-font-style, - var(--spectrum-code-cjk-font-style) - ); - font-weight: var( - --mod-code-cjk-font-weight, - var(--spectrum-code-cjk-font-weight) - ); - line-height: var( - --mod-code-cjk-line-height, - var(--spectrum-code-cjk-line-height) - ); - letter-spacing: var( - --mod-code-cjk-letter-spacing, - var(--spectrum-code-cjk-letter-spacing) - ); + font-family: var( + --mod-code-cjk-font-family, + var(--spectrum-code-cjk-font-family) + ); + font-style: var( + --mod-code-cjk-font-style, + var(--spectrum-code-cjk-font-style) + ); + font-weight: var( + --mod-code-cjk-font-weight, + var(--spectrum-code-cjk-font-weight) + ); + line-height: var( + --mod-code-cjk-line-height, + var(--spectrum-code-cjk-line-height) + ); + letter-spacing: var( + --mod-code-cjk-letter-spacing, + var(--spectrum-code-cjk-letter-spacing) + ); } .spectrum-Code:lang(ja) .spectrum-Code-strong, @@ -105,14 +105,14 @@ governing permissions and limitations under the License. .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong { - font-style: var( - --mod-code-cjk-strong-font-style, - var(--spectrum-code-cjk-strong-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-font-weight, - var(--spectrum-code-cjk-strong-font-weight) - ); + font-style: var( + --mod-code-cjk-strong-font-style, + var(--spectrum-code-cjk-strong-font-style) + ); + font-weight: var( + --mod-code-cjk-strong-font-weight, + var(--spectrum-code-cjk-strong-font-weight) + ); } .spectrum-Code:lang(ja) .spectrum-Code-emphasized, @@ -121,14 +121,14 @@ governing permissions and limitations under the License. .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em { - font-style: var( - --mod-code-cjk-emphasized-font-style, - var(--spectrum-code-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-emphasized-font-weight, - var(--spectrum-code-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-code-cjk-emphasized-font-style, + var(--spectrum-code-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-code-cjk-emphasized-font-weight, + var(--spectrum-code-cjk-emphasized-font-weight) + ); } .spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, @@ -140,12 +140,12 @@ governing permissions and limitations under the License. .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em { - font-style: var( - --mod-code-cjk-strong-emphasized-font-style, - var(--spectrum-code-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-emphasized-font-weight, - var(--spectrum-code-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-code-cjk-strong-emphasized-font-style, + var(--spectrum-code-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-code-cjk-strong-emphasized-font-weight, + var(--spectrum-code-cjk-strong-emphasized-font-weight) + ); } diff --git a/tools/styles/src/spectrum-detail.css b/tools/styles/src/spectrum-detail.css index 17d6726a3d..0e7fcb702c 100644 --- a/tools/styles/src/spectrum-detail.css +++ b/tools/styles/src/spectrum-detail.css @@ -12,115 +12,115 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography .spectrum-Detail { - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); + --spectrum-detail-margin-start: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-top-multiplier) + ); + --spectrum-detail-margin-end: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-bottom-multiplier) + ); } @media (forced-colors: active) { - .spectrum-Detail { - --highcontrast-detail-font-color: Text; - } + .spectrum-Detail { + --highcontrast-detail-font-color: Text; + } } .spectrum-Detail { - font-family: var( - --mod-detail-sans-serif-font-family, - var(--spectrum-detail-sans-serif-font-family) - ); - font-style: var( - --mod-detail-sans-serif-font-style, - var(--spectrum-detail-sans-serif-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-font-weight, - var(--spectrum-detail-sans-serif-font-weight) - ); - font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); - color: var( - --highcontrast-detail-font-color, - var(--mod-detail-font-color, var(--spectrum-detail-font-color)) - ); - line-height: var( - --mod-detail-line-height, - var(--spectrum-detail-line-height) - ); - letter-spacing: var( - --mod-detail-letter-spacing, - var(--spectrum-detail-letter-spacing) - ); - text-transform: uppercase; - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start, 0) - ); - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end, 0) - ); + font-family: var( + --mod-detail-sans-serif-font-family, + var(--spectrum-detail-sans-serif-font-family) + ); + font-style: var( + --mod-detail-sans-serif-font-style, + var(--spectrum-detail-sans-serif-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-font-weight, + var(--spectrum-detail-sans-serif-font-weight) + ); + font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); + color: var( + --highcontrast-detail-font-color, + var(--mod-detail-font-color, var(--spectrum-detail-font-color)) + ); + line-height: var( + --mod-detail-line-height, + var(--spectrum-detail-line-height) + ); + letter-spacing: var( + --mod-detail-letter-spacing, + var(--spectrum-detail-letter-spacing) + ); + text-transform: uppercase; + margin-block-start: var( + --mod-detail-margin-start, + var(--spectrum-detail-margin-start, 0) + ); + margin-block-end: var( + --mod-detail-margin-end, + var(--spectrum-detail-margin-end, 0) + ); } .spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong { - font-style: var( - --mod-detail-sans-serif-strong-font-style, - var(--spectrum-detail-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-font-weight, - var(--spectrum-detail-sans-serif-strong-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-strong-font-style, + var(--spectrum-detail-sans-serif-strong-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-strong-font-weight, + var(--spectrum-detail-sans-serif-strong-font-weight) + ); } .spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em { - font-style: var( - --mod-detail-sans-serif-emphasized-font-style, - var(--spectrum-detail-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-emphasized-font-weight, - var(--spectrum-detail-sans-serif-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-emphasized-font-style, + var(--spectrum-detail-sans-serif-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-emphasized-font-weight, + var(--spectrum-detail-sans-serif-emphasized-font-weight) + ); } .spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em { - font-style: var( - --mod-detail-sans-serif-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-strong-emphasized-font-style, + var(--spectrum-detail-sans-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-strong-emphasized-font-weight, + var(--spectrum-detail-sans-serif-strong-emphasized-font-weight) + ); } .spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh) { - font-family: var( - --mod-detail-cjk-font-family, - var(--spectrum-detail-cjk-font-family) - ); - font-style: var( - --mod-detail-cjk-font-style, - var(--spectrum-detail-cjk-font-style) - ); - font-weight: var( - --mod-detail-cjk-font-weight, - var(--spectrum-detail-cjk-font-weight) - ); - line-height: var( - --mod-detail-cjk-line-height, - var(--spectrum-detail-cjk-line-height) - ); + font-family: var( + --mod-detail-cjk-font-family, + var(--spectrum-detail-cjk-font-family) + ); + font-style: var( + --mod-detail-cjk-font-style, + var(--spectrum-detail-cjk-font-style) + ); + font-weight: var( + --mod-detail-cjk-font-weight, + var(--spectrum-detail-cjk-font-weight) + ); + line-height: var( + --mod-detail-cjk-line-height, + var(--spectrum-detail-cjk-line-height) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-strong, @@ -129,14 +129,14 @@ governing permissions and limitations under the License. .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong { - font-style: var( - --mod-detail-cjk-strong-font-style, - var(--spectrum-detail-cjk-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-font-weight, - var(--spectrum-detail-cjk-strong-font-weight) - ); + font-style: var( + --mod-detail-cjk-strong-font-style, + var(--spectrum-detail-cjk-strong-font-style) + ); + font-weight: var( + --mod-detail-cjk-strong-font-weight, + var(--spectrum-detail-cjk-strong-font-weight) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, @@ -145,14 +145,14 @@ governing permissions and limitations under the License. .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em { - font-style: var( - --mod-detail-cjk-emphasized-font-style, - var(--spectrum-detail-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-emphasized-font-weight, - var(--spectrum-detail-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-emphasized-font-style, + var(--spectrum-detail-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-emphasized-font-weight, + var(--spectrum-detail-cjk-emphasized-font-weight) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, @@ -164,127 +164,127 @@ governing permissions and limitations under the License. .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em { - font-style: var( - --mod-detail-cjk-strong-emphasized-font-style, - var(--spectrum-detail-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-strong-emphasized-font-style, + var(--spectrum-detail-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-strong-emphasized-font-weight, + var(--spectrum-detail-cjk-strong-emphasized-font-weight) + ); } .spectrum-Detail--serif { - font-family: var( - --mod-detail-serif-font-family, - var(--spectrum-detail-serif-font-family) - ); - font-style: var( - --mod-detail-serif-font-style, - var(--spectrum-detail-serif-font-style) - ); - font-weight: var( - --mod-detail-serif-font-weight, - var(--spectrum-detail-serif-font-weight) - ); + font-family: var( + --mod-detail-serif-font-family, + var(--spectrum-detail-serif-font-family) + ); + font-style: var( + --mod-detail-serif-font-style, + var(--spectrum-detail-serif-font-style) + ); + font-weight: var( + --mod-detail-serif-font-weight, + var(--spectrum-detail-serif-font-weight) + ); } .spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong { - font-style: var( - --mod-detail-serif-strong-font-style, - var(--spectrum-detail-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-font-weight, - var(--spectrum-detail-serif-strong-font-weight) - ); + font-style: var( + --mod-detail-serif-strong-font-style, + var(--spectrum-detail-serif-strong-font-style) + ); + font-weight: var( + --mod-detail-serif-strong-font-weight, + var(--spectrum-detail-serif-strong-font-weight) + ); } .spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em { - font-style: var( - --mod-detail-serif-emphasized-font-style, - var(--spectrum-detail-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-emphasized-font-weight, - var(--spectrum-detail-serif-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-emphasized-font-style, + var(--spectrum-detail-serif-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-emphasized-font-weight, + var(--spectrum-detail-serif-emphasized-font-weight) + ); } .spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em { - font-style: var( - --mod-detail-serif-strong-emphasized-font-style, - var(--spectrum-detail-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-emphasized-font-weight, - var(--spectrum-detail-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-strong-emphasized-font-style, + var(--spectrum-detail-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-strong-emphasized-font-weight, + var(--spectrum-detail-serif-strong-emphasized-font-weight) + ); } .spectrum-Detail--light { - font-style: var( - --mod-detail-sans-serif-light-font-style, - var(--spectrum-detail-sans-serif-light-font-style) - ); - font-weight: var( - --spectrum-detail-sans-serif-light-font-weight, - var(--spectrum-detail-sans-serif-light-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-font-style, + var(--spectrum-detail-sans-serif-light-font-style) + ); + font-weight: var( + --spectrum-detail-sans-serif-light-font-weight, + var(--spectrum-detail-sans-serif-light-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong { - font-style: var( - --mod-detail-sans-serif-light-strong-font-style, - var(--spectrum-detail-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-font-weight, - var(--spectrum-detail-sans-serif-light-strong-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-strong-font-style, + var(--spectrum-detail-sans-serif-light-strong-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-strong-font-weight, + var(--spectrum-detail-sans-serif-light-strong-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em { - font-style: var( - --mod-detail-sans-serif-light-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-emphasized-font-style, + var(--spectrum-detail-sans-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-emphasized-font-weight, + var(--spectrum-detail-sans-serif-light-emphasized-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em { - font-style: var( - --mod-detail-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-strong-emphasized-font-style, + var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-strong-emphasized-font-weight, + var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh) { - font-style: var( - --mod-detail-cjk-light-font-style, - var(--spectrum-detail-cjk-light-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-font-weight, - var(--spectrum-detail-cjk-light-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-font-style, + var(--spectrum-detail-cjk-light-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-font-weight, + var(--spectrum-detail-cjk-light-font-weight) + ); } .spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, @@ -293,14 +293,14 @@ governing permissions and limitations under the License. .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong { - font-style: var( - --mod-detail-cjk-light-strong-font-style, - var(--spectrum-detail-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-font-weight, - var(--spectrum-detail-cjk-light-strong-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-strong-font-style, + var(--spectrum-detail-cjk-light-strong-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-strong-font-weight, + var(--spectrum-detail-cjk-light-strong-font-weight) + ); } .spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, @@ -309,77 +309,77 @@ governing permissions and limitations under the License. .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em { - font-style: var( - --mod-detail-cjk-light-emphasized-font-style, - var(--spectrum-detail-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-emphasized-font-weight, - var(--spectrum-detail-cjk-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-emphasized-font-style, + var(--spectrum-detail-cjk-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-emphasized-font-weight, + var(--spectrum-detail-cjk-light-emphasized-font-weight) + ); } .spectrum-Detail--light:lang(ja) - .spectrum-Detail-strong.spectrum-Detail-emphasized, + .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) - .spectrum-Detail-strong.spectrum-Detail-emphasized, + .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) - .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var( - --mod-detail-cjk-light-strong-emphasized-font-style, - var(--spectrum-detail-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) - ); + .spectrum-Detail-strong.spectrum-Detail-emphasized { + font-style: var( + --mod-detail-cjk-light-strong-emphasized-font-style, + var(--spectrum-detail-cjk-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-strong-emphasized-font-weight, + var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light { - font-style: var( - --mod-detail-serif-light-font-style, - var(--spectrum-detail-serif-light-font-style) - ); - font-weight: var( - --mod-detail-serif-light-font-weight, - var(--spectrum-detail-serif-light-font-weight) - ); + font-style: var( + --mod-detail-serif-light-font-style, + var(--spectrum-detail-serif-light-font-style) + ); + font-weight: var( + --mod-detail-serif-light-font-weight, + var(--spectrum-detail-serif-light-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong { - font-style: var( - --mod-detail-serif-light-strong-font-style, - var(--spectrum-detail-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-font-weight, - var(--spectrum-detail-serif-light-strong-font-weight) - ); + font-style: var( + --mod-detail-serif-light-strong-font-style, + var(--spectrum-detail-serif-light-strong-font-style) + ); + font-weight: var( + --mod-detail-serif-light-strong-font-weight, + var(--spectrum-detail-serif-light-strong-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em { - font-style: var( - --mod-detail-serif-light-emphasized-font-style, - var(--spectrum-detail-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-emphasized-font-weight, - var(--spectrum-detail-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-light-emphasized-font-style, + var(--spectrum-detail-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-light-emphasized-font-weight, + var(--spectrum-detail-serif-light-emphasized-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light - .spectrum-Detail-strong.spectrum-Body-emphasized, + .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em { - font-style: var( - --mod-detail-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-light-strong-emphasized-font-style, + var(--spectrum-detail-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-light-strong-emphasized-font-weight, + var(--spectrum-detail-serif-light-strong-emphasized-font-weight) + ); } diff --git a/tools/styles/src/spectrum-heading.css b/tools/styles/src/spectrum-heading.css index e7d20131d7..f021c8de8e 100644 --- a/tools/styles/src/spectrum-heading.css +++ b/tools/styles/src/spectrum-heading.css @@ -12,118 +12,118 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography .spectrum-Heading { - --spectrum-heading-margin-start: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-top-multiplier) - ); - --spectrum-heading-margin-end: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-bottom-multiplier) - ); + --spectrum-heading-margin-start: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-top-multiplier) + ); + --spectrum-heading-margin-end: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-bottom-multiplier) + ); } @media (forced-colors: active) { - .spectrum-Heading { - --highcontrast-heading-font-color: Text; - } + .spectrum-Heading { + --highcontrast-heading-font-color: Text; + } } .spectrum-Heading { - font-family: var( - --mod-heading-sans-serif-font-family, - var(--spectrum-heading-sans-serif-font-family) - ); - font-style: var( - --mod-heading-sans-serif-font-style, - var(--spectrum-heading-sans-serif-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-font-weight, - var(--spectrum-heading-sans-serif-font-weight) - ); - font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); - color: var( - --highcontrast-heading-font-color, - var(--mod-heading-font-color, var(--spectrum-heading-font-color)) - ); - line-height: var( - --mod-heading-line-height, - var(--spectrum-heading-line-height) - ); - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start, 0) - ); - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end, 0) - ); + font-family: var( + --mod-heading-sans-serif-font-family, + var(--spectrum-heading-sans-serif-font-family) + ); + font-style: var( + --mod-heading-sans-serif-font-style, + var(--spectrum-heading-sans-serif-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-font-weight, + var(--spectrum-heading-sans-serif-font-weight) + ); + font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); + color: var( + --highcontrast-heading-font-color, + var(--mod-heading-font-color, var(--spectrum-heading-font-color)) + ); + line-height: var( + --mod-heading-line-height, + var(--spectrum-heading-line-height) + ); + margin-block-start: var( + --mod-heading-margin-start, + var(--spectrum-heading-margin-start, 0) + ); + margin-block-end: var( + --mod-heading-margin-end, + var(--spectrum-heading-margin-end, 0) + ); } .spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong { - font-style: var( - --mod-heading-sans-serif-strong-font-style, - var(--spectrum-heading-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-font-weight, - var(--spectrum-heading-sans-serif-strong-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-strong-font-style, + var(--spectrum-heading-sans-serif-strong-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-strong-font-weight, + var(--spectrum-heading-sans-serif-strong-font-weight) + ); } .spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em { - font-style: var( - --mod-heading-sans-serif-emphasized-font-style, - var(--spectrum-heading-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-emphasized-font-weight, - var(--spectrum-heading-sans-serif-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-emphasized-font-style, + var(--spectrum-heading-sans-serif-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-emphasized-font-weight, + var(--spectrum-heading-sans-serif-emphasized-font-weight) + ); } .spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em { - font-style: var( - --mod-heading-sans-serif-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-strong-emphasized-font-style, + var(--spectrum-heading-sans-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-strong-emphasized-font-weight, + var(--spectrum-heading-sans-serif-strong-emphasized-font-weight) + ); } .spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh) { - font-family: var( - --mod-heading-cjk-font-family, - var(--spectrum-heading-cjk-font-family) - ); - font-style: var( - --mod-heading-cjk-font-style, - var(--spectrum-heading-cjk-font-style) - ); - font-weight: var( - --mod-heading-cjk-font-weight, - var(--spectrum-heading-cjk-font-weight) - ); - font-size: var( - --mod-heading-cjk-font-size, - var(--spectrum-heading-cjk-font-size) - ); - line-height: var( - --mod-heading-cjk-line-height, - var(--spectrum-heading-cjk-line-height) - ); - letter-spacing: var( - --mod-heading-cjk-letter-spacing, - var(--spectrum-heading-cjk-letter-spacing) - ); + font-family: var( + --mod-heading-cjk-font-family, + var(--spectrum-heading-cjk-font-family) + ); + font-style: var( + --mod-heading-cjk-font-style, + var(--spectrum-heading-cjk-font-style) + ); + font-weight: var( + --mod-heading-cjk-font-weight, + var(--spectrum-heading-cjk-font-weight) + ); + font-size: var( + --mod-heading-cjk-font-size, + var(--spectrum-heading-cjk-font-size) + ); + line-height: var( + --mod-heading-cjk-line-height, + var(--spectrum-heading-cjk-line-height) + ); + letter-spacing: var( + --mod-heading-cjk-letter-spacing, + var(--spectrum-heading-cjk-letter-spacing) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, @@ -132,14 +132,14 @@ governing permissions and limitations under the License. .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em { - font-style: var( - --mod-heading-cjk-emphasized-font-style, - var(--spectrum-heading-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-emphasized-font-weight, - var(--spectrum-heading-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-emphasized-font-style, + var(--spectrum-heading-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-emphasized-font-weight, + var(--spectrum-heading-cjk-emphasized-font-weight) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-strong, @@ -148,14 +148,14 @@ governing permissions and limitations under the License. .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong { - font-style: var( - --mod-heading-cjk-strong-font-style, - var(--spectrum-heading-cjk-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-font-weight, - var(--spectrum-heading-cjk-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-strong-font-style, + var(--spectrum-heading-cjk-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-strong-font-weight, + var(--spectrum-heading-cjk-strong-font-weight) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, @@ -167,75 +167,75 @@ governing permissions and limitations under the License. .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-strong-emphasized-font-style, - var(--spectrum-heading-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-strong-emphasized-font-style, + var(--spectrum-heading-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-strong-emphasized-font-weight) + ); } .spectrum-Heading--heavy { - font-style: var( - --mod-heading-sans-serif-heavy-font-style, - var(--spectrum-heading-sans-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-font-weight, - var(--spectrum-heading-sans-serif-heavy-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-font-style, + var(--spectrum-heading-sans-serif-heavy-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-font-weight, + var(--spectrum-heading-sans-serif-heavy-font-weight) + ); } .spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-sans-serif-heavy-strong-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-strong-font-style, + var(--spectrum-heading-sans-serif-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-strong-font-weight, + var(--spectrum-heading-sans-serif-heavy-strong-font-weight) + ); } .spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em { - font-style: var( - --mod-heading-sans-serif-heavy-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-emphasized-font-style, + var(--spectrum-heading-sans-serif-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-emphasized-font-weight, + var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight) + ); } .spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-strong-emphasized-font-style, + var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh) { - font-style: var( - --mod-heading-cjk-heavy-font-style, - var(--spectrum-heading-cjk-heavy-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-font-weight, - var(--spectrum-heading-cjk-heavy-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-font-style, + var(--spectrum-heading-cjk-heavy-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-font-weight, + var(--spectrum-heading-cjk-heavy-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, @@ -244,14 +244,14 @@ governing permissions and limitations under the License. .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em { - font-style: var( - --mod-heading-cjk-heavy-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-emphasized-font-style, + var(--spectrum-heading-cjk-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-emphasized-font-weight, + var(--spectrum-heading-cjk-heavy-emphasized-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, @@ -260,97 +260,97 @@ governing permissions and limitations under the License. .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong { - font-style: var( - --mod-heading-cjk-heavy-strong-font-style, - var(--spectrum-heading-cjk-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-font-weight, - var(--spectrum-heading-cjk-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-strong-font-style, + var(--spectrum-heading-cjk-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-strong-font-weight, + var(--spectrum-heading-cjk-heavy-strong-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-heavy-strong-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-strong-emphasized-font-style, + var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--light { - font-style: var( - --mod-heading-sans-serif-light-font-style, - var(--spectrum-heading-sans-serif-light-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-font-weight, - var(--spectrum-heading-sans-serif-light-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-font-style, + var(--spectrum-heading-sans-serif-light-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-font-weight, + var(--spectrum-heading-sans-serif-light-font-weight) + ); } .spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em { - font-style: var( - --mod-heading-sans-serif-light-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-emphasized-font-style, + var(--spectrum-heading-sans-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-emphasized-font-weight, + var(--spectrum-heading-sans-serif-light-emphasized-font-weight) + ); } .spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong { - font-style: var( - --mod-heading-sans-serif-light-strong-font-style, - var(--spectrum-heading-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-font-weight, - var(--spectrum-heading-sans-serif-light-strong-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-strong-font-style, + var(--spectrum-heading-sans-serif-light-strong-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-strong-font-weight, + var(--spectrum-heading-sans-serif-light-strong-font-weight) + ); } .spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em { - font-style: var( - --mod-heading-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-strong-emphasized-font-style, + var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-strong-emphasized-font-weight, + var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh) { - font-style: var( - --mod-heading-cjk-light-font-style, - var(--spectrum-heading-cjk-light-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-font-weight, - var(--spectrum-heading-cjk-light-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-font-style, + var(--spectrum-heading-cjk-light-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-font-weight, + var(--spectrum-heading-cjk-light-font-weight) + ); } .spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, @@ -359,14 +359,14 @@ governing permissions and limitations under the License. .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong { - font-style: var( - --mod-heading-cjk-light-strong-font-style, - var(--spectrum-heading-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-font-weight, - var(--spectrum-heading-cjk-light-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-strong-font-style, + var(--spectrum-heading-cjk-light-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-strong-font-weight, + var(--spectrum-heading-cjk-light-strong-font-weight) + ); } .spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, @@ -375,184 +375,184 @@ governing permissions and limitations under the License. .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em { - font-style: var( - --mod-heading-cjk-light-emphasized-font-style, - var(--spectrum-heading-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-emphasized-font-weight, - var(--spectrum-heading-cjk-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-emphasized-font-style, + var(--spectrum-heading-cjk-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-emphasized-font-weight, + var(--spectrum-heading-cjk-light-emphasized-font-weight) + ); } .spectrum-Heading--light:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-light-strong-emphasized-font-style, - var(--spectrum-heading-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-strong-emphasized-font-style, + var(--spectrum-heading-cjk-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) + ); } .spectrum-Heading--serif { - font-family: var( - --mod-heading-serif-font-family, - var(--spectrum-heading-serif-font-family) - ); - font-style: var( - --mod-heading-serif-font-style, - var(--spectrum-heading-serif-font-style) - ); - font-weight: var( - --mod-heading-serif-font-weight, - var(--spectrum-heading-serif-font-weight) - ); + font-family: var( + --mod-heading-serif-font-family, + var(--spectrum-heading-serif-font-family) + ); + font-style: var( + --mod-heading-serif-font-style, + var(--spectrum-heading-serif-font-style) + ); + font-weight: var( + --mod-heading-serif-font-weight, + var(--spectrum-heading-serif-font-weight) + ); } .spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em { - font-style: var( - --mod-heading-serif-emphasized-font-style, - var(--spectrum-heading-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-emphasized-font-weight, - var(--spectrum-heading-serif-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-emphasized-font-style, + var(--spectrum-heading-serif-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-emphasized-font-weight, + var(--spectrum-heading-serif-emphasized-font-weight) + ); } .spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong { - font-style: var( - --mod-heading-serif-strong-font-style, - var(--spectrum-heading-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-font-weight, - var(--spectrum-heading-serif-strong-font-weight) - ); + font-style: var( + --mod-heading-serif-strong-font-style, + var(--spectrum-heading-serif-strong-font-style) + ); + font-weight: var( + --mod-heading-serif-strong-font-weight, + var(--spectrum-heading-serif-strong-font-weight) + ); } .spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em { - font-style: var( - --mod-heading-serif-strong-emphasized-font-style, - var(--spectrum-heading-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-emphasized-font-weight, - var(--spectrum-heading-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-strong-emphasized-font-style, + var(--spectrum-heading-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-strong-emphasized-font-weight, + var(--spectrum-heading-serif-strong-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy { - font-style: var( - --mod-heading-serif-heavy-font-style, - var(--spectrum-heading-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-font-weight, - var(--spectrum-heading-serif-heavy-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-font-style, + var(--spectrum-heading-serif-heavy-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-font-weight, + var(--spectrum-heading-serif-heavy-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-serif-heavy-strong-font-style, - var(--spectrum-heading-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-font-weight, - var(--spectrum-heading-serif-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-strong-font-style, + var(--spectrum-heading-serif-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-strong-font-weight, + var(--spectrum-heading-serif-heavy-strong-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em { - font-style: var( - --mod-heading-serif-heavy-emphasized-font-style, - var(--spectrum-heading-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-emphasized-font-style, + var(--spectrum-heading-serif-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-emphasized-font-weight, + var(--spectrum-heading-serif-heavy-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-strong-emphasized-font-style, + var(--spectrum-heading-serif-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light { - font-style: var( - --mod-heading-serif-light-font-style, - var(--spectrum-heading-serif-light-font-style) - ); - font-weight: var( - --mod-heading-serif-light-font-weight, - var(--spectrum-heading-serif-light-font-weight) - ); + font-style: var( + --mod-heading-serif-light-font-style, + var(--spectrum-heading-serif-light-font-style) + ); + font-weight: var( + --mod-heading-serif-light-font-weight, + var(--spectrum-heading-serif-light-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em { - font-style: var( - --mod-heading-serif-light-emphasized-font-style, - var(--spectrum-heading-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-emphasized-font-weight, - var(--spectrum-heading-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-light-emphasized-font-style, + var(--spectrum-heading-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-light-emphasized-font-weight, + var(--spectrum-heading-serif-light-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong { - font-style: var( - --mod-heading-serif-light-strong-font-style, - var(--spectrum-heading-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-font-weight, - var(--spectrum-heading-serif-light-strong-font-weight) - ); + font-style: var( + --mod-heading-serif-light-strong-font-style, + var(--spectrum-heading-serif-light-strong-font-style) + ); + font-weight: var( + --mod-heading-serif-light-strong-font-weight, + var(--spectrum-heading-serif-light-strong-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em { - font-style: var( - --mod-heading-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-light-strong-emphasized-font-style, + var(--spectrum-heading-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-light-strong-emphasized-font-weight, + var(--spectrum-heading-serif-light-strong-emphasized-font-weight) + ); } diff --git a/tools/styles/src/spectrum-lang.css b/tools/styles/src/spectrum-lang.css index 15535783fc..7759cf8e46 100644 --- a/tools/styles/src/spectrum-lang.css +++ b/tools/styles/src/spectrum-lang.css @@ -12,40 +12,40 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography:lang(ar) { - font-family: var(--spectrum-font-family-ar); + font-family: var(--spectrum-font-family-ar); } .spectrum-Typography:lang(he) { - font-family: var(--spectrum-font-family-he); + font-family: var(--spectrum-font-family-he); } .spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh) { - font-family: var( - --mod-heading-cjk-font-family, - var(--spectrum-heading-cjk-font-family) - ); - font-style: var( - --mod-heading-cjk-font-style, - var(--spectrum-heading-cjk-font-style) - ); - font-weight: var( - --mod-heading-cjk-font-weight, - var(--spectrum-heading-cjk-font-weight) - ); - font-size: var( - --mod-heading-cjk-font-size, - var(--spectrum-heading-cjk-font-size) - ); - line-height: var( - --mod-heading-cjk-line-height, - var(--spectrum-heading-cjk-line-height) - ); - letter-spacing: var( - --mod-heading-cjk-letter-spacing, - var(--spectrum-heading-cjk-letter-spacing) - ); + font-family: var( + --mod-heading-cjk-font-family, + var(--spectrum-heading-cjk-font-family) + ); + font-style: var( + --mod-heading-cjk-font-style, + var(--spectrum-heading-cjk-font-style) + ); + font-weight: var( + --mod-heading-cjk-font-weight, + var(--spectrum-heading-cjk-font-weight) + ); + font-size: var( + --mod-heading-cjk-font-size, + var(--spectrum-heading-cjk-font-size) + ); + line-height: var( + --mod-heading-cjk-line-height, + var(--spectrum-heading-cjk-line-height) + ); + letter-spacing: var( + --mod-heading-cjk-letter-spacing, + var(--spectrum-heading-cjk-letter-spacing) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, @@ -54,14 +54,14 @@ governing permissions and limitations under the License. .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em { - font-style: var( - --mod-heading-cjk-emphasized-font-style, - var(--spectrum-heading-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-emphasized-font-weight, - var(--spectrum-heading-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-emphasized-font-style, + var(--spectrum-heading-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-emphasized-font-weight, + var(--spectrum-heading-cjk-emphasized-font-weight) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-strong, @@ -70,14 +70,14 @@ governing permissions and limitations under the License. .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong { - font-style: var( - --mod-heading-cjk-strong-font-style, - var(--spectrum-heading-cjk-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-font-weight, - var(--spectrum-heading-cjk-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-strong-font-style, + var(--spectrum-heading-cjk-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-strong-font-weight, + var(--spectrum-heading-cjk-strong-font-weight) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, @@ -89,27 +89,27 @@ governing permissions and limitations under the License. .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-strong-emphasized-font-style, - var(--spectrum-heading-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-strong-emphasized-font-style, + var(--spectrum-heading-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-strong-emphasized-font-weight) + ); } .spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh) { - font-style: var( - --mod-heading-cjk-heavy-font-style, - var(--spectrum-heading-cjk-heavy-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-font-weight, - var(--spectrum-heading-cjk-heavy-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-font-style, + var(--spectrum-heading-cjk-heavy-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-font-weight, + var(--spectrum-heading-cjk-heavy-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, @@ -118,14 +118,14 @@ governing permissions and limitations under the License. .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em { - font-style: var( - --mod-heading-cjk-heavy-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-emphasized-font-style, + var(--spectrum-heading-cjk-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-emphasized-font-weight, + var(--spectrum-heading-cjk-heavy-emphasized-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, @@ -134,49 +134,49 @@ governing permissions and limitations under the License. .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong { - font-style: var( - --mod-heading-cjk-heavy-strong-font-style, - var(--spectrum-heading-cjk-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-font-weight, - var(--spectrum-heading-cjk-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-strong-font-style, + var(--spectrum-heading-cjk-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-strong-font-weight, + var(--spectrum-heading-cjk-heavy-strong-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-heavy-strong-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-strong-emphasized-font-style, + var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh) { - font-style: var( - --mod-heading-cjk-light-font-style, - var(--spectrum-heading-cjk-light-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-font-weight, - var(--spectrum-heading-cjk-light-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-font-style, + var(--spectrum-heading-cjk-light-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-font-weight, + var(--spectrum-heading-cjk-light-font-weight) + ); } .spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, @@ -185,14 +185,14 @@ governing permissions and limitations under the License. .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong { - font-style: var( - --mod-heading-cjk-light-strong-font-style, - var(--spectrum-heading-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-font-weight, - var(--spectrum-heading-cjk-light-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-strong-font-style, + var(--spectrum-heading-cjk-light-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-strong-font-weight, + var(--spectrum-heading-cjk-light-strong-font-weight) + ); } .spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, @@ -201,61 +201,61 @@ governing permissions and limitations under the License. .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em { - font-style: var( - --mod-heading-cjk-light-emphasized-font-style, - var(--spectrum-heading-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-emphasized-font-weight, - var(--spectrum-heading-cjk-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-emphasized-font-style, + var(--spectrum-heading-cjk-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-emphasized-font-weight, + var(--spectrum-heading-cjk-light-emphasized-font-weight) + ); } .spectrum-Heading--light:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-light-strong-emphasized-font-style, - var(--spectrum-heading-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-strong-emphasized-font-style, + var(--spectrum-heading-cjk-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) + ); } .spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh) { - font-family: var( - --mod-body-cjk-font-family, - var(--spectrum-body-cjk-font-family) - ); - font-style: var( - --mod-body-cjk-font-style, - var(--spectrum-body-cjk-font-style) - ); - font-weight: var( - --mod-body-cjk-font-weight, - var(--spectrum-body-cjk-font-weight) - ); - line-height: var( - --mod-body-cjk-line-height, - var(--spectrum-body-cjk-line-height) - ); - letter-spacing: var( - --mod-body-cjk-letter-spacing, - var(--spectrum-body-cjk-letter-spacing) - ); + font-family: var( + --mod-body-cjk-font-family, + var(--spectrum-body-cjk-font-family) + ); + font-style: var( + --mod-body-cjk-font-style, + var(--spectrum-body-cjk-font-style) + ); + font-weight: var( + --mod-body-cjk-font-weight, + var(--spectrum-body-cjk-font-weight) + ); + line-height: var( + --mod-body-cjk-line-height, + var(--spectrum-body-cjk-line-height) + ); + letter-spacing: var( + --mod-body-cjk-letter-spacing, + var(--spectrum-body-cjk-letter-spacing) + ); } .spectrum-Body:lang(ja) .spectrum-Body-strong, @@ -264,14 +264,14 @@ governing permissions and limitations under the License. .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong { - font-style: var( - --mod-body-cjk-strong-font-style, - var(--spectrum-body-cjk-strong-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-font-weight, - var(--spectrum-body-cjk-strong-font-weight) - ); + font-style: var( + --mod-body-cjk-strong-font-style, + var(--spectrum-body-cjk-strong-font-style) + ); + font-weight: var( + --mod-body-cjk-strong-font-weight, + var(--spectrum-body-cjk-strong-font-weight) + ); } .spectrum-Body:lang(ja) .spectrum-Body-emphasized, @@ -280,14 +280,14 @@ governing permissions and limitations under the License. .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em { - font-style: var( - --mod-body-cjk-emphasized-font-style, - var(--spectrum-body-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-emphasized-font-weight, - var(--spectrum-body-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-body-cjk-emphasized-font-style, + var(--spectrum-body-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-body-cjk-emphasized-font-weight, + var(--spectrum-body-cjk-emphasized-font-weight) + ); } .spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, @@ -299,35 +299,35 @@ governing permissions and limitations under the License. .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em { - font-style: var( - --mod-body-cjk-strong-emphasized-font-style, - var(--spectrum-body-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-emphasized-font-weight, - var(--spectrum-body-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-cjk-strong-emphasized-font-style, + var(--spectrum-body-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-cjk-strong-emphasized-font-weight, + var(--spectrum-body-cjk-strong-emphasized-font-weight) + ); } .spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh) { - font-family: var( - --mod-detail-cjk-font-family, - var(--spectrum-detail-cjk-font-family) - ); - font-style: var( - --mod-detail-cjk-font-style, - var(--spectrum-detail-cjk-font-style) - ); - font-weight: var( - --mod-detail-cjk-font-weight, - var(--spectrum-detail-cjk-font-weight) - ); - line-height: var( - --mod-detail-cjk-line-height, - var(--spectrum-detail-cjk-line-height) - ); + font-family: var( + --mod-detail-cjk-font-family, + var(--spectrum-detail-cjk-font-family) + ); + font-style: var( + --mod-detail-cjk-font-style, + var(--spectrum-detail-cjk-font-style) + ); + font-weight: var( + --mod-detail-cjk-font-weight, + var(--spectrum-detail-cjk-font-weight) + ); + line-height: var( + --mod-detail-cjk-line-height, + var(--spectrum-detail-cjk-line-height) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-strong, @@ -336,14 +336,14 @@ governing permissions and limitations under the License. .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong { - font-style: var( - --mod-detail-cjk-strong-font-style, - var(--spectrum-detail-cjk-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-font-weight, - var(--spectrum-detail-cjk-strong-font-weight) - ); + font-style: var( + --mod-detail-cjk-strong-font-style, + var(--spectrum-detail-cjk-strong-font-style) + ); + font-weight: var( + --mod-detail-cjk-strong-font-weight, + var(--spectrum-detail-cjk-strong-font-weight) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, @@ -352,14 +352,14 @@ governing permissions and limitations under the License. .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em { - font-style: var( - --mod-detail-cjk-emphasized-font-style, - var(--spectrum-detail-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-emphasized-font-weight, - var(--spectrum-detail-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-emphasized-font-style, + var(--spectrum-detail-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-emphasized-font-weight, + var(--spectrum-detail-cjk-emphasized-font-weight) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, @@ -371,27 +371,27 @@ governing permissions and limitations under the License. .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em { - font-style: var( - --mod-detail-cjk-strong-emphasized-font-style, - var(--spectrum-detail-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-strong-emphasized-font-style, + var(--spectrum-detail-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-strong-emphasized-font-weight, + var(--spectrum-detail-cjk-strong-emphasized-font-weight) + ); } .spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh) { - font-style: var( - --mod-detail-cjk-light-font-style, - var(--spectrum-detail-cjk-light-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-font-weight, - var(--spectrum-detail-cjk-light-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-font-style, + var(--spectrum-detail-cjk-light-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-font-weight, + var(--spectrum-detail-cjk-light-font-weight) + ); } .spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, @@ -400,14 +400,14 @@ governing permissions and limitations under the License. .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong { - font-style: var( - --mod-detail-cjk-light-strong-font-style, - var(--spectrum-detail-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-font-weight, - var(--spectrum-detail-cjk-light-strong-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-strong-font-style, + var(--spectrum-detail-cjk-light-strong-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-strong-font-weight, + var(--spectrum-detail-cjk-light-strong-font-weight) + ); } .spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, @@ -416,55 +416,55 @@ governing permissions and limitations under the License. .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em { - font-style: var( - --mod-detail-cjk-light-emphasized-font-style, - var(--spectrum-detail-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-emphasized-font-weight, - var(--spectrum-detail-cjk-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-emphasized-font-style, + var(--spectrum-detail-cjk-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-emphasized-font-weight, + var(--spectrum-detail-cjk-light-emphasized-font-weight) + ); } .spectrum-Detail--light:lang(ja) - .spectrum-Detail-strong.spectrum-Detail-emphasized, + .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) - .spectrum-Detail-strong.spectrum-Detail-emphasized, + .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) - .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var( - --mod-detail-cjk-light-strong-emphasized-font-style, - var(--spectrum-detail-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) - ); + .spectrum-Detail-strong.spectrum-Detail-emphasized { + font-style: var( + --mod-detail-cjk-light-strong-emphasized-font-style, + var(--spectrum-detail-cjk-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-strong-emphasized-font-weight, + var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) + ); } .spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh) { - font-family: var( - --mod-code-cjk-font-family, - var(--spectrum-code-cjk-font-family) - ); - font-style: var( - --mod-code-cjk-font-style, - var(--spectrum-code-cjk-font-style) - ); - font-weight: var( - --mod-code-cjk-font-weight, - var(--spectrum-code-cjk-font-weight) - ); - line-height: var( - --mod-code-cjk-line-height, - var(--spectrum-code-cjk-line-height) - ); - letter-spacing: var( - --mod-code-cjk-letter-spacing, - var(--spectrum-code-cjk-letter-spacing) - ); + font-family: var( + --mod-code-cjk-font-family, + var(--spectrum-code-cjk-font-family) + ); + font-style: var( + --mod-code-cjk-font-style, + var(--spectrum-code-cjk-font-style) + ); + font-weight: var( + --mod-code-cjk-font-weight, + var(--spectrum-code-cjk-font-weight) + ); + line-height: var( + --mod-code-cjk-line-height, + var(--spectrum-code-cjk-line-height) + ); + letter-spacing: var( + --mod-code-cjk-letter-spacing, + var(--spectrum-code-cjk-letter-spacing) + ); } .spectrum-Code:lang(ja) .spectrum-Code-strong, @@ -473,14 +473,14 @@ governing permissions and limitations under the License. .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong { - font-style: var( - --mod-code-cjk-strong-font-style, - var(--spectrum-code-cjk-strong-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-font-weight, - var(--spectrum-code-cjk-strong-font-weight) - ); + font-style: var( + --mod-code-cjk-strong-font-style, + var(--spectrum-code-cjk-strong-font-style) + ); + font-weight: var( + --mod-code-cjk-strong-font-weight, + var(--spectrum-code-cjk-strong-font-weight) + ); } .spectrum-Code:lang(ja) .spectrum-Code-emphasized, @@ -489,14 +489,14 @@ governing permissions and limitations under the License. .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em { - font-style: var( - --mod-code-cjk-emphasized-font-style, - var(--spectrum-code-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-emphasized-font-weight, - var(--spectrum-code-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-code-cjk-emphasized-font-style, + var(--spectrum-code-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-code-cjk-emphasized-font-weight, + var(--spectrum-code-cjk-emphasized-font-weight) + ); } .spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, @@ -508,12 +508,12 @@ governing permissions and limitations under the License. .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em { - font-style: var( - --mod-code-cjk-strong-emphasized-font-style, - var(--spectrum-code-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-emphasized-font-weight, - var(--spectrum-code-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-code-cjk-strong-emphasized-font-style, + var(--spectrum-code-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-code-cjk-strong-emphasized-font-weight, + var(--spectrum-code-cjk-strong-emphasized-font-weight) + ); } diff --git a/tools/styles/src/spectrum-typography.css b/tools/styles/src/spectrum-typography.css index 7e3e87e1f5..141e3e8807 100644 --- a/tools/styles/src/spectrum-typography.css +++ b/tools/styles/src/spectrum-typography.css @@ -12,44 +12,44 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography { - font-family: var(--spectrum-font-family); - font-style: var(--spectrum-font-style); - font-size: var(--spectrum-font-size); + font-family: var(--spectrum-font-family); + font-style: var(--spectrum-font-style); + font-size: var(--spectrum-font-size); } .spectrum-Typography:lang(ar) { - font-family: var(--spectrum-font-family-ar); + font-family: var(--spectrum-font-family-ar); } .spectrum-Typography:lang(he) { - font-family: var(--spectrum-font-family-he); + font-family: var(--spectrum-font-family-he); } .spectrum-Typography .spectrum-Heading { - --spectrum-heading-margin-start: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-top-multiplier) - ); - --spectrum-heading-margin-end: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-bottom-multiplier) - ); + --spectrum-heading-margin-start: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-top-multiplier) + ); + --spectrum-heading-margin-end: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-bottom-multiplier) + ); } .spectrum-Typography .spectrum-Body { - --spectrum-body-margin-end: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); + --spectrum-body-margin-end: calc( + var(--mod-body-font-size, var(--spectrum-body-font-size)) * + var(--spectrum-body-margin-multiplier) + ); } .spectrum-Typography .spectrum-Detail { - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); + --spectrum-detail-margin-start: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-top-multiplier) + ); + --spectrum-detail-margin-end: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-bottom-multiplier) + ); } diff --git a/tools/styles/tokens-v2/dark-vars.css b/tools/styles/tokens-v2/dark-vars.css index 86db64dee7..a41e839332 100644 --- a/tools/styles/tokens-v2/dark-vars.css +++ b/tools/styles/tokens-v2/dark-vars.css @@ -1,1031 +1,1001 @@ :host, :root { - --spectrum-overlay-opacity: 0.6; - --spectrum-background-layer-2-color: var(--spectrum-gray-75); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-500 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-400 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-800 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-700 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-800 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-700 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-800 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-700 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-800 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-700 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-900 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-500); - --spectrum-red-background-color-default: var(--spectrum-red-800); - --spectrum-orange-background-color-default: var(--spectrum-orange-900); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-1000 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-900); - --spectrum-green-background-color-default: var(--spectrum-green-800); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-800); - --spectrum-blue-background-color-default: var(--spectrum-blue-800); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-800); - --spectrum-purple-background-color-default: var(--spectrum-purple-800); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-800); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-800); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-900); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-900); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-background-elevated-color: var(--spectrum-gray-75); - --spectrum-background-pasteboard-color: var(--spectrum-gray-25); - --spectrum-brown-visual-color: var(--spectrum-brown-900); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); - --spectrum-pink-visual-color: var(--spectrum-pink-900); - --spectrum-silver-visual-color: var(--spectrum-silver-900); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); - --spectrum-brown-background-color-default: var(--spectrum-brown-800); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800); - --spectrum-pink-background-color-default: var(--spectrum-pink-800); - --spectrum-silver-background-color-default: var(--spectrum-silver-800); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-800 - ); - --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-100-opacity: 0.36; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); - --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-200-opacity: 0.48; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); - --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-300-opacity: 0.6; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-300 - ); - --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300); - --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300); - --spectrum-green-subtle-background-color-default: var(--spectrum-green-300); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-300 - ); - --spectrum-red-subtle-background-color-default: var(--spectrum-red-300); - --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-300 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-300 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-300 - ); - --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-300 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-300 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-300 - ); - --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-300 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-300 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-300 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-300 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-300 - ); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-25-rgb: 255, 255, 255; - --spectrum-transparent-white-25-opacity: 0; - --spectrum-transparent-white-25: rgba( - var(--spectrum-transparent-white-25-rgb), - var(--spectrum-transparent-white-25-opacity) - ); - --spectrum-transparent-white-50-rgb: 255, 255, 255; - --spectrum-transparent-white-50-opacity: 0.04; - --spectrum-transparent-white-50: rgba( - var(--spectrum-transparent-white-50-rgb), - var(--spectrum-transparent-white-50-opacity) - ); - --spectrum-transparent-white-75-rgb: 255, 255, 255; - --spectrum-transparent-white-75-opacity: 0.07; - --spectrum-transparent-white-75: rgba( - var(--spectrum-transparent-white-75-rgb), - var(--spectrum-transparent-white-75-opacity) - ); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0.11; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.14; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.17; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.21; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.39; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.51; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.66; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.85; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900-opacity: 0.94; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb), - var(--spectrum-transparent-white-900-opacity) - ); - --spectrum-transparent-white-1000-rgb: 255, 255, 255; - --spectrum-transparent-white-1000: rgba( - var(--spectrum-transparent-white-1000-rgb) - ); - --spectrum-transparent-black-25-rgb: 0, 0, 0; - --spectrum-transparent-black-25-opacity: 0; - --spectrum-transparent-black-25: rgba( - var(--spectrum-transparent-black-25-rgb), - var(--spectrum-transparent-black-25-opacity) - ); - --spectrum-transparent-black-50-rgb: 0, 0, 0; - --spectrum-transparent-black-50-opacity: 0.03; - --spectrum-transparent-black-50: rgba( - var(--spectrum-transparent-black-50-rgb), - var(--spectrum-transparent-black-50-opacity) - ); - --spectrum-transparent-black-75-rgb: 0, 0, 0; - --spectrum-transparent-black-75-opacity: 0.05; - --spectrum-transparent-black-75: rgba( - var(--spectrum-transparent-black-75-rgb), - var(--spectrum-transparent-black-75-opacity) - ); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0.09; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.12; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.15; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.22; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.44; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.56; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.69; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.84; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900-opacity: 0.93; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb), - var(--spectrum-transparent-black-900-opacity) - ); - --spectrum-gray-25-rgb: 17, 17, 17; - --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); - --spectrum-gray-50-rgb: 27, 27, 27; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 34, 34, 34; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 44, 44, 44; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 50, 50, 50; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 57, 57, 57; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 68, 68, 68; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 109, 109, 109; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 138, 138, 138; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 175, 175, 175; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 219, 219, 219; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 242, 242, 242; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-gray-1000-rgb: 255, 255, 255; - --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); - --spectrum-blue-100-rgb: 14, 23, 63; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 15, 28, 82; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 12, 33, 117; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 18, 45, 154; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 26, 58, 195; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 37, 73, 229; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 52, 91, 248; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 69, 110, 254; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 86, 129, 255; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 105, 149, 254; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 124, 169, 252; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 152, 192, 252; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 181, 213, 253; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 213, 231, 254; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-blue-1500-rgb: 238, 245, 255; - --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); - --spectrum-blue-1600-rgb: 255, 255, 255; - --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); - --spectrum-red-100-rgb: 54, 10, 3; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 68, 13, 5; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 87, 17, 7; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 115, 24, 11; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 147, 31, 17; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 177, 38, 23; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 205, 46, 29; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 230, 54, 35; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 252, 67, 46; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 103, 86; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 134, 120; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 167, 157; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 196, 189; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 222, 219; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-red-1500-rgb: 255, 242, 240; - --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); - --spectrum-red-1600-rgb: 255, 255, 255; - --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); - --spectrum-orange-100-rgb: 49, 16, 0; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 61, 21, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 80, 27, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 106, 36, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 135, 47, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 162, 59, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 185, 73, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 205, 86, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 224, 100, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 243, 117, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 255, 137, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 255, 173, 45; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 201, 116; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 225, 178; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-orange-1500-rgb: 255, 243, 225; - --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); - --spectrum-orange-1600-rgb: 255, 255, 255; - --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); - --spectrum-yellow-100-rgb: 37, 23, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 47, 29, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 61, 39, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 83, 52, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 107, 67, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 130, 82, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 151, 97, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 169, 110, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 186, 124, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 203, 141, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 218, 159, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 235, 183, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 249, 206, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 255, 230, 86; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-yellow-1500-rgb: 255, 246, 195; - --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); - --spectrum-yellow-1600-rgb: 255, 255, 255; - --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); - --spectrum-chartreuse-100-rgb: 23, 28, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 30, 36, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 39, 47, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 53, 63, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 68, 82, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 83, 100, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 97, 116, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 109, 131, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 122, 147, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 136, 164, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 151, 181, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 169, 203, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 187, 225, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 219, 240, 117; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-chartreuse-1500-rgb: 242, 249, 206; - --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); - --spectrum-chartreuse-1600-rgb: 255, 255, 255; - --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); - --spectrum-celery-100-rgb: 11, 31, 0; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 15, 38, 0; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 21, 51, 1; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 31, 67, 4; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 41, 86, 8; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 50, 105, 11; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 60, 122, 15; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 69, 138, 19; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 78, 154, 23; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 88, 172, 28; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 100, 190, 35; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 116, 213, 46; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 136, 234, 65; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 170, 251, 112; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-celery-1500-rgb: 222, 255, 198; - --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); - --spectrum-celery-1600-rgb: 255, 255, 255; - --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); - --spectrum-green-100-rgb: 0, 30, 23; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 0, 38, 29; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 51, 38; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 68, 48; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 2, 87, 58; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 3, 106, 67; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 4, 124, 75; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 6, 140, 82; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 9, 157, 89; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 14, 175, 98; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 24, 193, 110; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 57, 215, 134; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 126, 231, 172; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 189, 241, 208; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-green-1500-rgb: 229, 250, 236; - --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); - --spectrum-green-1600-rgb: 255, 255, 255; - --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); - --spectrum-seafoam-100-rgb: 0, 30, 27; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 0, 39, 35; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 0, 50, 44; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 0, 67, 59; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 2, 86, 75; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 4, 105, 89; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 6, 122, 103; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 8, 138, 116; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 10, 154, 128; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 12, 173, 142; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 14, 190, 156; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 29, 214, 176; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 122, 229, 203; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 186, 241, 222; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-seafoam-1500-rgb: 229, 249, 243; - --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); - --spectrum-seafoam-1600-rgb: 255, 255, 255; - --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); - --spectrum-cyan-100-rgb: 0, 29, 39; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 36, 49; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 48, 65; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 64, 88; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 82, 113; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 3, 99, 140; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 8, 115, 168; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 15, 128, 194; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 24, 142, 220; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 38, 159, 244; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 63, 177, 255; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 107, 199, 255; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 152, 219, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 195, 236, 252; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-cyan-1500-rgb: 230, 248, 253; - --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); - --spectrum-cyan-1600-rgb: 255, 255, 255; - --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); - --spectrum-indigo-100-rgb: 30, 0, 93; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 35, 0, 110; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 47, 0, 140; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 62, 12, 174; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 79, 30, 209; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 95, 52, 235; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 109, 75, 248; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 119, 97, 252; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 128, 119, 254; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 139, 141, 254; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 153, 161, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 176, 186, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 199, 208, 255; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 223, 228, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-indigo-1500-rgb: 243, 244, 255; - --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); - --spectrum-indigo-1600-rgb: 255, 255, 255; - --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); - --spectrum-purple-100-rgb: 41, 0, 79; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 50, 0, 96; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 64, 0, 122; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 83, 0, 159; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 107, 6, 195; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 130, 34, 215; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 148, 62, 224; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 161, 84, 229; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 173, 105, 233; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 186, 127, 237; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 197, 149, 240; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 212, 176, 244; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 225, 201, 247; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 238, 224, 250; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-purple-1500-rgb: 248, 243, 253; - --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); - --spectrum-purple-1600-rgb: 255, 255, 255; - --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); - --spectrum-fuchsia-100-rgb: 50, 0, 61; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 61, 0, 74; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 79, 0, 95; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 102, 9, 120; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 127, 23, 146; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 151, 38, 170; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 173, 51, 192; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 192, 64, 212; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 213, 73, 235; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 232, 91, 253; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 240, 122, 255; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 245, 159, 255; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 248, 191, 255; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 251, 219, 255; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-fuchsia-1500-rgb: 253, 241, 255; - --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); - --spectrum-fuchsia-1600-rgb: 255, 255, 255; - --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); - --spectrum-magenta-100-rgb: 59, 0, 22; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 74, 0, 27; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 93, 0, 34; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 123, 0, 45; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 152, 7, 60; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 181, 19, 76; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 207, 31, 92; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 231, 41, 105; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 255, 51, 119; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 96, 149; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 128, 171; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 163, 194; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 193, 214; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 220, 232; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-magenta-1500-rgb: 255, 241, 246; - --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); - --spectrum-magenta-1600-rgb: 255, 255, 255; - --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); - --spectrum-pink-100-rgb: 58, 0, 37; - --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); - --spectrum-pink-200-rgb: 71, 0, 44; - --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); - --spectrum-pink-300-rgb: 90, 0, 57; - --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); - --spectrum-pink-400-rgb: 115, 7, 75; - --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); - --spectrum-pink-500-rgb: 143, 18, 97; - --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); - --spectrum-pink-600-rgb: 171, 29, 119; - --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); - --spectrum-pink-700-rgb: 196, 39, 138; - --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); - --spectrum-pink-800-rgb: 220, 47, 156; - --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); - --spectrum-pink-900-rgb: 236, 67, 175; - --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); - --spectrum-pink-1000-rgb: 251, 90, 196; - --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); - --spectrum-pink-1100-rgb: 255, 122, 210; - --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); - --spectrum-pink-1200-rgb: 255, 159, 223; - --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); - --spectrum-pink-1300-rgb: 255, 191, 234; - --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); - --spectrum-pink-1400-rgb: 255, 219, 243; - --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); - --spectrum-pink-1500-rgb: 255, 241, 250; - --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); - --spectrum-pink-1600-rgb: 255, 255, 255; - --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); - --spectrum-turquoise-100-rgb: 0, 30, 33; - --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); - --spectrum-turquoise-200-rgb: 0, 37, 41; - --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); - --spectrum-turquoise-300-rgb: 0, 49, 54; - --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); - --spectrum-turquoise-400-rgb: 0, 66, 72; - --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); - --spectrum-turquoise-500-rgb: 3, 84, 92; - --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); - --spectrum-turquoise-600-rgb: 5, 103, 112; - --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); - --spectrum-turquoise-700-rgb: 7, 120, 131; - --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); - --spectrum-turquoise-800-rgb: 9, 135, 147; - --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); - --spectrum-turquoise-900-rgb: 11, 151, 164; - --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); - --spectrum-turquoise-1000-rgb: 13, 168, 182; - --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); - --spectrum-turquoise-1100-rgb: 16, 186, 202; - --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); - --spectrum-turquoise-1200-rgb: 64, 208, 220; - --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); - --spectrum-turquoise-1300-rgb: 128, 225, 231; - --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); - --spectrum-turquoise-1400-rgb: 183, 240, 240; - --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); - --spectrum-turquoise-1500-rgb: 228, 249, 249; - --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); - --spectrum-turquoise-1600-rgb: 255, 255, 255; - --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); - --spectrum-brown-100-rgb: 35, 24, 8; - --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); - --spectrum-brown-200-rgb: 44, 31, 11; - --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); - --spectrum-brown-300-rgb: 58, 40, 14; - --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); - --spectrum-brown-400-rgb: 78, 55, 19; - --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); - --spectrum-brown-500-rgb: 98, 71, 30; - --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); - --spectrum-brown-600-rgb: 115, 88, 47; - --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); - --spectrum-brown-700-rgb: 132, 104, 61; - --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); - --spectrum-brown-800-rgb: 148, 118, 73; - --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); - --spectrum-brown-900-rgb: 163, 132, 84; - --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); - --spectrum-brown-1000-rgb: 181, 147, 98; - --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); - --spectrum-brown-1100-rgb: 199, 163, 112; - --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); - --spectrum-brown-1200-rgb: 222, 185, 130; - --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); - --spectrum-brown-1300-rgb: 232, 207, 169; - --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); - --spectrum-brown-1400-rgb: 242, 227, 206; - --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); - --spectrum-brown-1500-rgb: 250, 244, 236; - --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); - --spectrum-brown-1600-rgb: 255, 255, 255; - --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); - --spectrum-silver-100-rgb: 26, 26, 26; - --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); - --spectrum-silver-200-rgb: 33, 33, 33; - --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); - --spectrum-silver-300-rgb: 44, 44, 44; - --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); - --spectrum-silver-400-rgb: 59, 59, 59; - --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); - --spectrum-silver-500-rgb: 76, 76, 76; - --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); - --spectrum-silver-600-rgb: 92, 92, 92; - --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); - --spectrum-silver-700-rgb: 108, 108, 108; - --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); - --spectrum-silver-800-rgb: 123, 123, 123; - --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); - --spectrum-silver-900-rgb: 137, 137, 137; - --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); - --spectrum-silver-1000-rgb: 152, 152, 152; - --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); - --spectrum-silver-1100-rgb: 169, 169, 169; - --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); - --spectrum-silver-1200-rgb: 190, 190, 190; - --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); - --spectrum-silver-1300-rgb: 211, 211, 211; - --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); - --spectrum-silver-1400-rgb: 229, 229, 229; - --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); - --spectrum-silver-1500-rgb: 244, 244, 244; - --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); - --spectrum-silver-1600-rgb: 255, 255, 255; - --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); - --spectrum-cinnamon-100-rgb: 48, 17, 4; - --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); - --spectrum-cinnamon-200-rgb: 59, 21, 5; - --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); - --spectrum-cinnamon-300-rgb: 79, 28, 7; - --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); - --spectrum-cinnamon-400-rgb: 100, 41, 15; - --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); - --spectrum-cinnamon-500-rgb: 122, 57, 28; - --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); - --spectrum-cinnamon-600-rgb: 143, 74, 40; - --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); - --spectrum-cinnamon-700-rgb: 163, 88, 52; - --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); - --spectrum-cinnamon-800-rgb: 179, 103, 64; - --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); - --spectrum-cinnamon-900-rgb: 192, 119, 80; - --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); - --spectrum-cinnamon-1000-rgb: 206, 136, 99; - --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); - --spectrum-cinnamon-1100-rgb: 220, 154, 118; - --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); - --spectrum-cinnamon-1200-rgb: 232, 179, 149; - --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); - --spectrum-cinnamon-1300-rgb: 239, 203, 183; - --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); - --spectrum-cinnamon-1400-rgb: 246, 225, 214; - --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); - --spectrum-cinnamon-1500-rgb: 252, 244, 239; - --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); - --spectrum-cinnamon-1600-rgb: 255, 255, 255; - --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-300 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-300 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-300 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-300 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-300 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); + --spectrum-overlay-opacity: 0.6; + --spectrum-background-layer-2-color: var(--spectrum-gray-75); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-500); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-400 + ); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-800); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-700); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-700); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-700 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-800 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-700 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-700 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-700 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-800 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-700 + ); + --spectrum-negative-background-color-down: var(--spectrum-negative-color-700); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-700 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-800 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-700 + ); + --spectrum-positive-background-color-down: var(--spectrum-positive-color-700); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-700 + ); + --spectrum-notice-background-color-default: var(--spectrum-notice-color-900); + --spectrum-gray-background-color-default: var(--spectrum-gray-500); + --spectrum-red-background-color-default: var(--spectrum-red-800); + --spectrum-orange-background-color-default: var(--spectrum-orange-900); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-1000 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-900); + --spectrum-green-background-color-default: var(--spectrum-green-800); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-800); + --spectrum-blue-background-color-default: var(--spectrum-blue-800); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-800); + --spectrum-purple-background-color-default: var(--spectrum-purple-800); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-800); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-800); + --spectrum-neutral-visual-color: var(--spectrum-gray-600); + --spectrum-accent-visual-color: var(--spectrum-accent-color-900); + --spectrum-informative-visual-color: var(--spectrum-informative-color-900); + --spectrum-negative-visual-color: var(--spectrum-negative-color-900); + --spectrum-notice-visual-color: var(--spectrum-notice-color-900); + --spectrum-positive-visual-color: var(--spectrum-positive-color-900); + --spectrum-gray-visual-color: var(--spectrum-gray-600); + --spectrum-red-visual-color: var(--spectrum-red-700); + --spectrum-orange-visual-color: var(--spectrum-orange-900); + --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color: var(--spectrum-celery-800); + --spectrum-green-visual-color: var(--spectrum-green-800); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color: var(--spectrum-cyan-900); + --spectrum-blue-visual-color: var(--spectrum-blue-900); + --spectrum-indigo-visual-color: var(--spectrum-indigo-900); + --spectrum-purple-visual-color: var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color: var(--spectrum-magenta-900); + --spectrum-background-elevated-color: var(--spectrum-gray-75); + --spectrum-background-pasteboard-color: var(--spectrum-gray-25); + --spectrum-brown-visual-color: var(--spectrum-brown-900); + --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); + --spectrum-pink-visual-color: var(--spectrum-pink-900); + --spectrum-silver-visual-color: var(--spectrum-silver-900); + --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); + --spectrum-brown-background-color-default: var(--spectrum-brown-800); + --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800); + --spectrum-pink-background-color-default: var(--spectrum-pink-800); + --spectrum-silver-background-color-default: var(--spectrum-silver-800); + --spectrum-turquoise-background-color-default: var(--spectrum-turquoise-800); + --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-100-opacity: 0.36; + --spectrum-drop-shadow-color-100: rgba( + var(--spectrum-drop-shadow-color-100-rgb), + var(--spectrum-drop-shadow-color-100-opacity) + ); + --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-200-opacity: 0.48; + --spectrum-drop-shadow-color-200: rgba( + var(--spectrum-drop-shadow-color-200-rgb), + var(--spectrum-drop-shadow-color-200-opacity) + ); + --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-300-opacity: 0.6; + --spectrum-drop-shadow-color-300: rgba( + var(--spectrum-drop-shadow-color-300-rgb), + var(--spectrum-drop-shadow-color-300-opacity) + ); + --spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-300); + --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300); + --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300); + --spectrum-green-subtle-background-color-default: var(--spectrum-green-300); + --spectrum-orange-subtle-background-color-default: var(--spectrum-orange-300); + --spectrum-red-subtle-background-color-default: var(--spectrum-red-300); + --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300); + --spectrum-cinnamon-subtle-background-color-default: var( + --spectrum-cinnamon-300 + ); + --spectrum-celery-subtle-background-color-default: var(--spectrum-celery-300); + --spectrum-chartreuse-subtle-background-color-default: var( + --spectrum-chartreuse-300 + ); + --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300); + --spectrum-fuchsia-subtle-background-color-default: var( + --spectrum-fuchsia-300 + ); + --spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-300); + --spectrum-magenta-subtle-background-color-default: var( + --spectrum-magenta-300 + ); + --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300); + --spectrum-purple-subtle-background-color-default: var(--spectrum-purple-300); + --spectrum-seafoam-subtle-background-color-default: var( + --spectrum-seafoam-300 + ); + --spectrum-silver-subtle-background-color-default: var(--spectrum-silver-300); + --spectrum-turquoise-subtle-background-color-default: var( + --spectrum-turquoise-300 + ); + --spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-300); + --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); + --spectrum-white-rgb: 255, 255, 255; + --spectrum-white: rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb: 255, 255, 255; + --spectrum-transparent-white-25-opacity: 0; + --spectrum-transparent-white-25: rgba( + var(--spectrum-transparent-white-25-rgb), + var(--spectrum-transparent-white-25-opacity) + ); + --spectrum-transparent-white-50-rgb: 255, 255, 255; + --spectrum-transparent-white-50-opacity: 0.04; + --spectrum-transparent-white-50: rgba( + var(--spectrum-transparent-white-50-rgb), + var(--spectrum-transparent-white-50-opacity) + ); + --spectrum-transparent-white-75-rgb: 255, 255, 255; + --spectrum-transparent-white-75-opacity: 0.07; + --spectrum-transparent-white-75: rgba( + var(--spectrum-transparent-white-75-rgb), + var(--spectrum-transparent-white-75-opacity) + ); + --spectrum-transparent-white-100-rgb: 255, 255, 255; + --spectrum-transparent-white-100-opacity: 0.11; + --spectrum-transparent-white-100: rgba( + var(--spectrum-transparent-white-100-rgb), + var(--spectrum-transparent-white-100-opacity) + ); + --spectrum-transparent-white-200-rgb: 255, 255, 255; + --spectrum-transparent-white-200-opacity: 0.14; + --spectrum-transparent-white-200: rgba( + var(--spectrum-transparent-white-200-rgb), + var(--spectrum-transparent-white-200-opacity) + ); + --spectrum-transparent-white-300-rgb: 255, 255, 255; + --spectrum-transparent-white-300-opacity: 0.17; + --spectrum-transparent-white-300: rgba( + var(--spectrum-transparent-white-300-rgb), + var(--spectrum-transparent-white-300-opacity) + ); + --spectrum-transparent-white-400-rgb: 255, 255, 255; + --spectrum-transparent-white-400-opacity: 0.21; + --spectrum-transparent-white-400: rgba( + var(--spectrum-transparent-white-400-rgb), + var(--spectrum-transparent-white-400-opacity) + ); + --spectrum-transparent-white-500-rgb: 255, 255, 255; + --spectrum-transparent-white-500-opacity: 0.39; + --spectrum-transparent-white-500: rgba( + var(--spectrum-transparent-white-500-rgb), + var(--spectrum-transparent-white-500-opacity) + ); + --spectrum-transparent-white-600-rgb: 255, 255, 255; + --spectrum-transparent-white-600-opacity: 0.51; + --spectrum-transparent-white-600: rgba( + var(--spectrum-transparent-white-600-rgb), + var(--spectrum-transparent-white-600-opacity) + ); + --spectrum-transparent-white-700-rgb: 255, 255, 255; + --spectrum-transparent-white-700-opacity: 0.66; + --spectrum-transparent-white-700: rgba( + var(--spectrum-transparent-white-700-rgb), + var(--spectrum-transparent-white-700-opacity) + ); + --spectrum-transparent-white-800-rgb: 255, 255, 255; + --spectrum-transparent-white-800-opacity: 0.85; + --spectrum-transparent-white-800: rgba( + var(--spectrum-transparent-white-800-rgb), + var(--spectrum-transparent-white-800-opacity) + ); + --spectrum-transparent-white-900-rgb: 255, 255, 255; + --spectrum-transparent-white-900-opacity: 0.94; + --spectrum-transparent-white-900: rgba( + var(--spectrum-transparent-white-900-rgb), + var(--spectrum-transparent-white-900-opacity) + ); + --spectrum-transparent-white-1000-rgb: 255, 255, 255; + --spectrum-transparent-white-1000: rgba( + var(--spectrum-transparent-white-1000-rgb) + ); + --spectrum-transparent-black-25-rgb: 0, 0, 0; + --spectrum-transparent-black-25-opacity: 0; + --spectrum-transparent-black-25: rgba( + var(--spectrum-transparent-black-25-rgb), + var(--spectrum-transparent-black-25-opacity) + ); + --spectrum-transparent-black-50-rgb: 0, 0, 0; + --spectrum-transparent-black-50-opacity: 0.03; + --spectrum-transparent-black-50: rgba( + var(--spectrum-transparent-black-50-rgb), + var(--spectrum-transparent-black-50-opacity) + ); + --spectrum-transparent-black-75-rgb: 0, 0, 0; + --spectrum-transparent-black-75-opacity: 0.05; + --spectrum-transparent-black-75: rgba( + var(--spectrum-transparent-black-75-rgb), + var(--spectrum-transparent-black-75-opacity) + ); + --spectrum-transparent-black-100-rgb: 0, 0, 0; + --spectrum-transparent-black-100-opacity: 0.09; + --spectrum-transparent-black-100: rgba( + var(--spectrum-transparent-black-100-rgb), + var(--spectrum-transparent-black-100-opacity) + ); + --spectrum-transparent-black-200-rgb: 0, 0, 0; + --spectrum-transparent-black-200-opacity: 0.12; + --spectrum-transparent-black-200: rgba( + var(--spectrum-transparent-black-200-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --spectrum-transparent-black-300-rgb: 0, 0, 0; + --spectrum-transparent-black-300-opacity: 0.15; + --spectrum-transparent-black-300: rgba( + var(--spectrum-transparent-black-300-rgb), + var(--spectrum-transparent-black-300-opacity) + ); + --spectrum-transparent-black-400-rgb: 0, 0, 0; + --spectrum-transparent-black-400-opacity: 0.22; + --spectrum-transparent-black-400: rgba( + var(--spectrum-transparent-black-400-rgb), + var(--spectrum-transparent-black-400-opacity) + ); + --spectrum-transparent-black-500-rgb: 0, 0, 0; + --spectrum-transparent-black-500-opacity: 0.44; + --spectrum-transparent-black-500: rgba( + var(--spectrum-transparent-black-500-rgb), + var(--spectrum-transparent-black-500-opacity) + ); + --spectrum-transparent-black-600-rgb: 0, 0, 0; + --spectrum-transparent-black-600-opacity: 0.56; + --spectrum-transparent-black-600: rgba( + var(--spectrum-transparent-black-600-rgb), + var(--spectrum-transparent-black-600-opacity) + ); + --spectrum-transparent-black-700-rgb: 0, 0, 0; + --spectrum-transparent-black-700-opacity: 0.69; + --spectrum-transparent-black-700: rgba( + var(--spectrum-transparent-black-700-rgb), + var(--spectrum-transparent-black-700-opacity) + ); + --spectrum-transparent-black-800-rgb: 0, 0, 0; + --spectrum-transparent-black-800-opacity: 0.84; + --spectrum-transparent-black-800: rgba( + var(--spectrum-transparent-black-800-rgb), + var(--spectrum-transparent-black-800-opacity) + ); + --spectrum-transparent-black-900-rgb: 0, 0, 0; + --spectrum-transparent-black-900-opacity: 0.93; + --spectrum-transparent-black-900: rgba( + var(--spectrum-transparent-black-900-rgb), + var(--spectrum-transparent-black-900-opacity) + ); + --spectrum-gray-25-rgb: 17, 17, 17; + --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb: 27, 27, 27; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 34, 34, 34; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 44, 44, 44; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 50, 50, 50; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 57, 57, 57; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 68, 68, 68; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 109, 109, 109; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 138, 138, 138; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 175, 175, 175; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 219, 219, 219; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 242, 242, 242; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb: 255, 255, 255; + --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb: 14, 23, 63; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 15, 28, 82; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 12, 33, 117; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 18, 45, 154; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 26, 58, 195; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 37, 73, 229; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 52, 91, 248; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 69, 110, 254; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 86, 129, 255; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 105, 149, 254; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 124, 169, 252; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 152, 192, 252; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 181, 213, 253; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 213, 231, 254; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb: 238, 245, 255; + --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb: 255, 255, 255; + --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb: 54, 10, 3; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 68, 13, 5; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 87, 17, 7; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 115, 24, 11; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 147, 31, 17; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 177, 38, 23; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 205, 46, 29; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 230, 54, 35; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 252, 67, 46; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 255, 103, 86; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 255, 134, 120; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 255, 167, 157; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 255, 196, 189; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 255, 222, 219; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb: 255, 242, 240; + --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb: 255, 255, 255; + --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb: 49, 16, 0; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 61, 21, 0; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 80, 27, 0; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 106, 36, 0; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 135, 47, 0; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 162, 59, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 185, 73, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 205, 86, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 224, 100, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 243, 117, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 255, 137, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 255, 173, 45; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 255, 201, 116; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 255, 225, 178; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb: 255, 243, 225; + --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb: 255, 255, 255; + --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb: 37, 23, 0; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 47, 29, 0; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 61, 39, 0; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 83, 52, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 107, 67, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 130, 82, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 151, 97, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 169, 110, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 186, 124, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 203, 141, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 218, 159, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 235, 183, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 249, 206, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 255, 230, 86; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb: 255, 246, 195; + --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb: 255, 255, 255; + --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb: 23, 28, 0; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 30, 36, 0; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 39, 47, 0; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 53, 63, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 68, 82, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 83, 100, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 97, 116, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 109, 131, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 122, 147, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 136, 164, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 151, 181, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 169, 203, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 187, 225, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 219, 240, 117; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb: 242, 249, 206; + --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb: 255, 255, 255; + --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb: 11, 31, 0; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 15, 38, 0; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 21, 51, 1; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 31, 67, 4; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 41, 86, 8; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 50, 105, 11; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 60, 122, 15; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 69, 138, 19; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 78, 154, 23; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 88, 172, 28; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 100, 190, 35; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 116, 213, 46; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 136, 234, 65; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 170, 251, 112; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb: 222, 255, 198; + --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb: 255, 255, 255; + --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb: 0, 30, 23; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 0, 38, 29; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 0, 51, 38; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 0, 68, 48; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 2, 87, 58; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 3, 106, 67; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 4, 124, 75; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 6, 140, 82; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 9, 157, 89; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 14, 175, 98; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 24, 193, 110; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 57, 215, 134; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 126, 231, 172; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 189, 241, 208; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb: 229, 250, 236; + --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb: 255, 255, 255; + --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb: 0, 30, 27; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 0, 39, 35; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 0, 50, 44; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 0, 67, 59; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 2, 86, 75; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 4, 105, 89; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 6, 122, 103; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 8, 138, 116; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 10, 154, 128; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 12, 173, 142; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 14, 190, 156; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 29, 214, 176; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 122, 229, 203; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 186, 241, 222; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb: 229, 249, 243; + --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb: 255, 255, 255; + --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb: 0, 29, 39; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 0, 36, 49; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 0, 48, 65; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 0, 64, 88; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 0, 82, 113; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 3, 99, 140; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 8, 115, 168; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 15, 128, 194; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 24, 142, 220; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 38, 159, 244; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 63, 177, 255; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 107, 199, 255; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 152, 219, 255; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 195, 236, 252; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb: 230, 248, 253; + --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb: 255, 255, 255; + --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb: 30, 0, 93; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 35, 0, 110; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 47, 0, 140; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 62, 12, 174; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 79, 30, 209; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 95, 52, 235; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 109, 75, 248; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 119, 97, 252; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 128, 119, 254; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 139, 141, 254; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 153, 161, 255; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 176, 186, 255; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 199, 208, 255; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 223, 228, 255; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb: 243, 244, 255; + --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb: 255, 255, 255; + --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb: 41, 0, 79; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 50, 0, 96; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 64, 0, 122; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 83, 0, 159; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 107, 6, 195; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 130, 34, 215; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 148, 62, 224; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 161, 84, 229; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 173, 105, 233; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 186, 127, 237; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 197, 149, 240; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 212, 176, 244; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 225, 201, 247; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 238, 224, 250; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb: 248, 243, 253; + --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb: 255, 255, 255; + --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb: 50, 0, 61; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 61, 0, 74; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 79, 0, 95; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 102, 9, 120; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 127, 23, 146; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 151, 38, 170; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 173, 51, 192; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 192, 64, 212; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 213, 73, 235; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 232, 91, 253; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 240, 122, 255; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 245, 159, 255; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 248, 191, 255; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 251, 219, 255; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb: 253, 241, 255; + --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb: 255, 255, 255; + --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb: 59, 0, 22; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 74, 0, 27; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 93, 0, 34; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 123, 0, 45; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 152, 7, 60; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 181, 19, 76; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 207, 31, 92; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 231, 41, 105; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 255, 51, 119; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 255, 96, 149; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 255, 128, 171; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 255, 163, 194; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 255, 193, 214; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 255, 220, 232; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb: 255, 241, 246; + --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb: 255, 255, 255; + --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb: 58, 0, 37; + --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb: 71, 0, 44; + --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb: 90, 0, 57; + --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb: 115, 7, 75; + --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb: 143, 18, 97; + --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb: 171, 29, 119; + --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb: 196, 39, 138; + --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb: 220, 47, 156; + --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb: 236, 67, 175; + --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb: 251, 90, 196; + --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb: 255, 122, 210; + --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb: 255, 159, 223; + --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb: 255, 191, 234; + --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb: 255, 219, 243; + --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb: 255, 241, 250; + --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb: 255, 255, 255; + --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb: 0, 30, 33; + --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb: 0, 37, 41; + --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb: 0, 49, 54; + --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb: 0, 66, 72; + --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb: 3, 84, 92; + --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb: 5, 103, 112; + --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb: 7, 120, 131; + --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb: 9, 135, 147; + --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb: 11, 151, 164; + --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb: 13, 168, 182; + --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb: 16, 186, 202; + --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb: 64, 208, 220; + --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb: 128, 225, 231; + --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb: 183, 240, 240; + --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb: 228, 249, 249; + --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb: 255, 255, 255; + --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb: 35, 24, 8; + --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb: 44, 31, 11; + --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb: 58, 40, 14; + --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb: 78, 55, 19; + --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb: 98, 71, 30; + --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb: 115, 88, 47; + --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb: 132, 104, 61; + --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb: 148, 118, 73; + --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb: 163, 132, 84; + --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb: 181, 147, 98; + --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb: 199, 163, 112; + --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb: 222, 185, 130; + --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb: 232, 207, 169; + --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb: 242, 227, 206; + --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb: 250, 244, 236; + --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb: 255, 255, 255; + --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb: 26, 26, 26; + --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb: 33, 33, 33; + --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb: 44, 44, 44; + --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb: 59, 59, 59; + --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb: 76, 76, 76; + --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb: 92, 92, 92; + --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb: 108, 108, 108; + --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb: 123, 123, 123; + --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb: 137, 137, 137; + --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb: 152, 152, 152; + --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb: 169, 169, 169; + --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb: 190, 190, 190; + --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb: 211, 211, 211; + --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb: 229, 229, 229; + --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb: 244, 244, 244; + --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb: 255, 255, 255; + --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb: 48, 17, 4; + --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb: 59, 21, 5; + --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb: 79, 28, 7; + --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb: 100, 41, 15; + --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb: 122, 57, 28; + --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb: 143, 74, 40; + --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb: 163, 88, 52; + --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb: 179, 103, 64; + --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb: 192, 119, 80; + --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb: 206, 136, 99; + --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb: 220, 154, 118; + --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb: 232, 179, 149; + --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb: 239, 203, 183; + --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb: 246, 225, 214; + --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb: 252, 244, 239; + --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb: 255, 255, 255; + --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); + --spectrum-negative-subdued-background-color-default: var( + --spectrum-negative-subtle-background-color-default + ); + --spectrum-accent-subtle-background-color-default: var( + --spectrum-accent-color-300 + ); + --spectrum-informative-subtle-background-color-default: var( + --spectrum-informative-color-300 + ); + --spectrum-positive-subtle-background-color-default: var( + --spectrum-positive-color-300 + ); + --spectrum-notice-subtle-background-color-default: var( + --spectrum-notice-color-300 + ); + --spectrum-negative-subtle-background-color-default: var( + --spectrum-negative-color-300 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.07 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); } diff --git a/tools/styles/tokens-v2/global-vars.css b/tools/styles/tokens-v2/global-vars.css index e007b99f35..2e6b713af3 100644 --- a/tools/styles/tokens-v2/global-vars.css +++ b/tools/styles/tokens-v2/global-vars.css @@ -1,1080 +1,1024 @@ :host, :root { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); - --spectrum-opacity-disabled: 0.3; - --spectrum-background-base-color: var(--spectrum-gray-25); - --spectrum-background-layer-1-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-900 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-neutral-subdued-content-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-accent-content-color-selected: var( - --spectrum-accent-content-color-down - ); - --spectrum-disabled-background-color: var(--spectrum-gray-100); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-100 - ); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-focus: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-content-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-400 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-400 - ); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var( - --spectrum-transparent-white-300 - ); - --spectrum-disabled-static-black-border-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-negative-border-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var( - --spectrum-negative-border-color-down - ); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-title-color: var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color: var( - --spectrum-drop-shadow-color-100 - ); - --spectrum-drop-shadow-emphasized-hover-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-elevated-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300); - --spectrum-static-black-text-color: var(--spectrum-black); - --spectrum-static-white-text-color: var(--spectrum-white); - --spectrum-track-color: var(--spectrum-gray-300); - --spectrum-static-black-track-color: var(--spectrum-transparent-black-300); - --spectrum-static-white-track-color: var(--spectrum-transparent-white-300); - --spectrum-static-black-track-indicator-color: var( - --spectrum-transparent-black-900 - ); - --spectrum-static-white-track-indicator-color: var( - --spectrum-transparent-white-900 - ); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var( - --spectrum-color-handle-inner-border-opacity - ); - --spectrum-color-handle-drop-shadow-color: var( - --spectrum-drop-shadow-color - ); - --spectrum-floating-action-button-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-floating-action-button-shadow-color: var( - --spectrum-floating-action-button-drop-shadow-color - ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-black-rgb: 0, 0, 0; - --spectrum-black: rgba(var(--spectrum-black-rgb)); - --spectrum-transparent-black-1000-rgb: 0, 0, 0; - --spectrum-transparent-black-1000: rgba( - var(--spectrum-transparent-black-1000-rgb) - ); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-to-top-text: var( - --spectrum-alert-banner-top-to-text - ); - --spectrum-alert-banner-to-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var( - --spectrum-corner-radius-medium-size-small - ); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: var( - --spectrum-corner-radius-medium-size-small - ); - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-drop-zone-cjk-title-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --spectrum-drop-zone-body-size: var( - --spectrum-illustrated-message-body-size - ); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-edge-to-content: 16px; - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var( - --spectrum-component-height-500 - ); - --spectrum-tab-item-compact-height-small: var( - --spectrum-component-height-75 - ); - --spectrum-tab-item-compact-height-medium: var( - --spectrum-component-height-100 - ); - --spectrum-tab-item-compact-height-large: var( - --spectrum-component-height-200 - ); - --spectrum-tab-item-compact-height-extra-large: var( - --spectrum-component-height-300 - ); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-corner-radius-0: 0px; - --spectrum-corner-radius-75: 4px; - --spectrum-corner-radius-100: 8px; - --spectrum-corner-radius-200: 10px; - --spectrum-corner-radius-300: 6px; - --spectrum-corner-radius-400: 7px; - --spectrum-corner-radius-500: 8px; - --spectrum-corner-radius-600: 9px; - --spectrum-corner-radius-700: 10px; - --spectrum-corner-radius-800: 16px; - --spectrum-corner-radius-1000: 0.5; - --spectrum-corner-radius-none: var(--spectrum-corner-radius-0); - --spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100); - --spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500); - --spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700); - --spectrum-corner-radius-extra-large-default: var( - --spectrum-corner-radius-800 - ); - --spectrum-corner-radius-full: var(--spectrum-corner-radius-1000); - --spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75); - --spectrum-corner-radius-small-size-medium: var( - --spectrum-corner-radius-100 - ); - --spectrum-corner-radius-small-size-large: var( - --spectrum-corner-radius-200 - ); - --spectrum-corner-radius-small-size-extra-large: var( - --spectrum-corner-radius-300 - ); - --spectrum-corner-radius-medium-size-extra-small: var( - --spectrum-corner-radius-300 - ); - --spectrum-corner-radius-medium-size-small: var( - --spectrum-corner-radius-400 - ); - --spectrum-corner-radius-medium-size-medium: var( - --spectrum-corner-radius-500 - ); - --spectrum-corner-radius-medium-size-large: var( - --spectrum-corner-radius-600 - ); - --spectrum-corner-radius-medium-size-extra-large: var( - --spectrum-corner-radius-700 - ); - --spectrum-drop-shadow-x: 0px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-100: 1px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-accent-color-1500: var(--spectrum-blue-1500); - --spectrum-accent-color-1600: var(--spectrum-blue-1600); - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-informative-color-1500: var(--spectrum-blue-1500); - --spectrum-informative-color-1600: var(--spectrum-blue-1600); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-negative-color-1500: var(--spectrum-red-1500); - --spectrum-negative-color-1600: var(--spectrum-red-1600); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-notice-color-1500: var(--spectrum-orange-1500); - --spectrum-notice-color-1600: var(--spectrum-orange-1600); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-positive-color-1500: var(--spectrum-green-1500); - --spectrum-positive-color-1600: var(--spectrum-green-1600); - --spectrum-negative-subdued-background-color-hover: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-down: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-key-focus: var( - --spectrum-negative-color-300 - ); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: Adobe Clean; - --spectrum-serif-font-family: Adobe Clean Serif; - --spectrum-cjk-font-family: Adobe Clean Han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-body-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: Source Code Pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); - --system: spectrum; + --spectrum-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color: var(--spectrum-white); + --spectrum-static-black-focus-indicator-color: var(--spectrum-black); + --spectrum-overlay-color: var(--spectrum-black); + --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); + --spectrum-opacity-disabled: 0.3; + --spectrum-background-base-color: var(--spectrum-gray-25); + --spectrum-background-layer-1-color: var(--spectrum-gray-50); + --spectrum-neutral-background-color-default: var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-background-color-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default: var( + --spectrum-gray-800 + ); + --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus: var( + --spectrum-gray-900 + ); + --spectrum-neutral-subdued-content-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-accent-content-color-selected: var( + --spectrum-accent-content-color-down + ); + --spectrum-disabled-background-color: var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color: var( + --spectrum-transparent-white-100 + ); + --spectrum-disabled-static-black-background-color: var( + --spectrum-transparent-black-100 + ); + --spectrum-background-opacity-default: 0; + --spectrum-background-opacity-hover: 0.1; + --spectrum-background-opacity-down: 0.1; + --spectrum-background-opacity-key-focus: 0.1; + --spectrum-neutral-content-color-default: var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-content-color-down: var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-focus: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); + --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800); + --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); + --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000); + --spectrum-negative-content-color-default: var(--spectrum-negative-color-900); + --spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-disabled-content-color: var(--spectrum-gray-400); + --spectrum-disabled-static-white-content-color: var( + --spectrum-transparent-white-400 + ); + --spectrum-disabled-static-black-content-color: var( + --spectrum-transparent-black-400 + ); + --spectrum-disabled-border-color: var(--spectrum-gray-300); + --spectrum-disabled-static-white-border-color: var( + --spectrum-transparent-white-300 + ); + --spectrum-disabled-static-black-border-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-negative-border-color-default: var(--spectrum-negative-color-900); + --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover: var( + --spectrum-negative-border-color-down + ); + --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-title-color: var(--spectrum-gray-900); + --spectrum-drop-shadow-emphasized-default-color: var( + --spectrum-drop-shadow-color-100 + ); + --spectrum-drop-shadow-emphasized-hover-color: var( + --spectrum-drop-shadow-color-200 + ); + --spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); + --spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300); + --spectrum-static-black-text-color: var(--spectrum-black); + --spectrum-static-white-text-color: var(--spectrum-white); + --spectrum-track-color: var(--spectrum-gray-300); + --spectrum-static-black-track-color: var(--spectrum-transparent-black-300); + --spectrum-static-white-track-color: var(--spectrum-transparent-white-300); + --spectrum-static-black-track-indicator-color: var( + --spectrum-transparent-black-900 + ); + --spectrum-static-white-track-indicator-color: var( + --spectrum-transparent-white-900 + ); + --spectrum-swatch-border-color: var(--spectrum-gray-900); + --spectrum-swatch-border-opacity: 0.51; + --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); + --spectrum-swatch-disabled-icon-border-opacity: 0.51; + --spectrum-thumbnail-border-color: var(--spectrum-gray-800); + --spectrum-thumbnail-border-opacity: 0.1; + --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); + --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); + --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); + --spectrum-color-area-border-color: var(--spectrum-gray-900); + --spectrum-color-area-border-opacity: 0.1; + --spectrum-color-slider-border-color: var(--spectrum-gray-900); + --spectrum-color-slider-border-opacity: 0.1; + --spectrum-color-loupe-drop-shadow-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); + --spectrum-color-loupe-outer-border: var(--spectrum-white); + --spectrum-card-selection-background-color: var(--spectrum-gray-100); + --spectrum-card-selection-background-color-opacity: 0.95; + --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity: 0.1; + --spectrum-drop-zone-background-color-opacity-filled: 0.3; + --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); + --spectrum-color-handle-inner-border-color: var(--spectrum-black); + --spectrum-color-handle-inner-border-opacity: 0.42; + --spectrum-color-handle-outer-border-color: var(--spectrum-black); + --spectrum-color-handle-outer-border-opacity: var( + --spectrum-color-handle-inner-border-opacity + ); + --spectrum-color-handle-drop-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-floating-action-button-drop-shadow-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-floating-action-button-shadow-color: var( + --spectrum-floating-action-button-drop-shadow-color + ); + --spectrum-table-row-hover-color: var(--spectrum-gray-900); + --spectrum-table-row-hover-opacity: 0.07; + --spectrum-table-selected-row-background-color: var( + --spectrum-informative-background-color-default + ); + --spectrum-table-selected-row-background-opacity: 0.1; + --spectrum-table-selected-row-background-color-non-emphasized: var( + --spectrum-neutral-background-color-selected-default + ); + --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; + --spectrum-table-row-down-opacity: 0.1; + --spectrum-table-selected-row-background-opacity-hover: 0.15; + --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; + --spectrum-black-rgb: 0, 0, 0; + --spectrum-black: rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-1000-rgb: 0, 0, 0; + --spectrum-transparent-black-1000: rgba( + var(--spectrum-transparent-black-1000-rgb) + ); + --spectrum-icon-color-inverse: var(--spectrum-gray-50); + --spectrum-icon-color-primary-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-asterisk-icon-size-75: 8px; + --spectrum-radio-button-selection-indicator: 4px; + --spectrum-field-label-top-margin-small: 0px; + --spectrum-field-label-to-component: 0px; + --spectrum-help-text-to-component: 0px; + --spectrum-status-light-dot-size-small: 8px; + --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; + --spectrum-action-button-edge-to-hold-icon-small: 3px; + --spectrum-button-minimum-width-multiplier: 2.25; + --spectrum-divider-thickness-small: 1px; + --spectrum-divider-thickness-medium: 2px; + --spectrum-divider-thickness-large: 4px; + --spectrum-swatch-rectangle-width-multiplier: 2; + --spectrum-swatch-slash-thickness-extra-small: 2px; + --spectrum-swatch-slash-thickness-small: 3px; + --spectrum-swatch-slash-thickness-medium: 4px; + --spectrum-swatch-slash-thickness-large: 5px; + --spectrum-progress-bar-minimum-width: 48px; + --spectrum-progress-bar-maximum-width: 768px; + --spectrum-meter-minimum-width: 48px; + --spectrum-meter-maximum-width: 768px; + --spectrum-meter-default-width: var(--spectrum-meter-width); + --spectrum-in-line-alert-minimum-width: 240px; + --spectrum-popover-tip-width: 16px; + --spectrum-popover-tip-height: 8px; + --spectrum-menu-item-label-to-description: 1px; + --spectrum-menu-item-section-divider-height: 8px; + --spectrum-slider-track-thickness: 2px; + --spectrum-slider-handle-gap: 4px; + --spectrum-picker-minimum-width-multiplier: 2; + --spectrum-picker-border-width: var(--spectrum-border-width-100); + --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclosure-icon-quiet + ); + --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; + --spectrum-text-field-minimum-width-multiplier: 1.5; + --spectrum-combo-box-minimum-width-multiplier: 2.5; + --spectrum-combo-box-quiet-minimum-width-multiplier: 2; + --spectrum-combo-box-visual-to-field-button-quiet: 0px; + --spectrum-alert-dialog-minimum-width: 288px; + --spectrum-alert-dialog-maximum-width: 480px; + --spectrum-contextual-help-minimum-width: 268px; + --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text: 0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; + --spectrum-alert-banner-to-top-workflow-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-to-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --spectrum-color-area-border-width: var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding: var( + --spectrum-corner-radius-medium-size-small + ); + --spectrum-color-wheel-color-area-margin: 12px; + --spectrum-color-slider-border-width: 1px; + --spectrum-color-slider-border-rounding: var( + --spectrum-corner-radius-medium-size-small + ); + --spectrum-floating-action-button-drop-shadow-blur: 12px; + --spectrum-floating-action-button-drop-shadow-y: 4px; + --spectrum-illustrated-message-maximum-width: 380px; + --spectrum-search-field-minimum-width-multiplier: 3; + --spectrum-color-loupe-height: 64px; + --spectrum-color-loupe-width: 48px; + --spectrum-color-loupe-bottom-to-color-handle: 12px; + --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); + --spectrum-color-loupe-inner-border-width: 1px; + --spectrum-color-loupe-drop-shadow-y: 2px; + --spectrum-color-loupe-drop-shadow-blur: 8px; + --spectrum-card-minimum-width: 100px; + --spectrum-card-preview-minimum-height: 130px; + --spectrum-card-selection-background-size: 40px; + --spectrum-drop-zone-width: 428px; + --spectrum-drop-zone-content-maximum-width: var( + --spectrum-illustrated-message-maximum-width + ); + --spectrum-drop-zone-border-dash-length: 8px; + --spectrum-drop-zone-border-dash-gap: 4px; + --spectrum-drop-zone-title-size: var( + --spectrum-illustrated-message-title-size + ); + --spectrum-drop-zone-cjk-title-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --spectrum-drop-zone-body-size: var(--spectrum-illustrated-message-body-size); + --spectrum-accordion-top-to-text-compact-small: 2px; + --spectrum-accordion-top-to-text-compact-medium: 4px; + --spectrum-accordion-disclosure-indicator-to-text: 0px; + --spectrum-accordion-edge-to-disclosure-indicator: 0px; + --spectrum-accordion-edge-to-text: 0px; + --spectrum-accordion-focus-indicator-gap: 0px; + --spectrum-color-handle-border-width: var(--spectrum-border-width-200); + --spectrum-color-handle-inner-border-width: 1px; + --spectrum-color-handle-outer-border-width: 1px; + --spectrum-color-handle-drop-shadow-x: 0; + --spectrum-color-handle-drop-shadow-y: 0; + --spectrum-color-handle-drop-shadow-blur: 0; + --spectrum-table-row-height-small-compact: var( + --spectrum-component-height-75 + ); + --spectrum-table-row-height-medium-compact: var( + --spectrum-component-height-100 + ); + --spectrum-table-row-height-large-compact: var( + --spectrum-component-height-200 + ); + --spectrum-table-row-height-extra-large-compact: var( + --spectrum-component-height-300 + ); + --spectrum-table-row-top-to-text-small-compact: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-table-row-top-to-text-medium-compact: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-table-row-top-to-text-large-compact: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-table-row-top-to-text-extra-large-compact: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-table-row-bottom-to-text-small-compact: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-table-row-bottom-to-text-medium-compact: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-table-row-bottom-to-text-large-compact: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-table-row-bottom-to-text-extra-large-compact: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-table-edge-to-content: 16px; + --spectrum-table-border-divider-width: 1px; + --spectrum-tab-item-height-small: var(--spectrum-component-height-200); + --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); + --spectrum-tab-item-height-large: var(--spectrum-component-height-400); + --spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500); + --spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75); + --spectrum-tab-item-compact-height-medium: var( + --spectrum-component-height-100 + ); + --spectrum-tab-item-compact-height-large: var( + --spectrum-component-height-200 + ); + --spectrum-tab-item-compact-height-extra-large: var( + --spectrum-component-height-300 + ); + --spectrum-tab-item-start-to-edge-quiet: 0px; + --spectrum-in-field-button-width-stacked-small: 20px; + --spectrum-in-field-button-width-stacked-medium: 28px; + --spectrum-in-field-button-width-stacked-large: 36px; + --spectrum-in-field-button-width-stacked-extra-large: 44px; + --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; + --spectrum-in-field-button-edge-to-fill: 0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --spectrum-corner-radius-0: 0px; + --spectrum-corner-radius-75: 4px; + --spectrum-corner-radius-100: 8px; + --spectrum-corner-radius-200: 10px; + --spectrum-corner-radius-300: 6px; + --spectrum-corner-radius-400: 7px; + --spectrum-corner-radius-500: 8px; + --spectrum-corner-radius-600: 9px; + --spectrum-corner-radius-700: 10px; + --spectrum-corner-radius-800: 16px; + --spectrum-corner-radius-1000: 0.5; + --spectrum-corner-radius-none: var(--spectrum-corner-radius-0); + --spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100); + --spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500); + --spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700); + --spectrum-corner-radius-extra-large-default: var( + --spectrum-corner-radius-800 + ); + --spectrum-corner-radius-full: var(--spectrum-corner-radius-1000); + --spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75); + --spectrum-corner-radius-small-size-medium: var(--spectrum-corner-radius-100); + --spectrum-corner-radius-small-size-large: var(--spectrum-corner-radius-200); + --spectrum-corner-radius-small-size-extra-large: var( + --spectrum-corner-radius-300 + ); + --spectrum-corner-radius-medium-size-extra-small: var( + --spectrum-corner-radius-300 + ); + --spectrum-corner-radius-medium-size-small: var(--spectrum-corner-radius-400); + --spectrum-corner-radius-medium-size-medium: var( + --spectrum-corner-radius-500 + ); + --spectrum-corner-radius-medium-size-large: var(--spectrum-corner-radius-600); + --spectrum-corner-radius-medium-size-extra-large: var( + --spectrum-corner-radius-700 + ); + --spectrum-drop-shadow-x: 0px; + --spectrum-android-elevation: 2dp; + --spectrum-spacing-50: 2px; + --spectrum-spacing-75: 4px; + --spectrum-spacing-100: 8px; + --spectrum-spacing-200: 12px; + --spectrum-spacing-300: 16px; + --spectrum-spacing-400: 24px; + --spectrum-spacing-500: 32px; + --spectrum-spacing-600: 40px; + --spectrum-spacing-700: 48px; + --spectrum-spacing-800: 64px; + --spectrum-spacing-900: 80px; + --spectrum-spacing-1000: 96px; + --spectrum-focus-indicator-thickness: 2px; + --spectrum-focus-indicator-gap: 2px; + --spectrum-border-width-100: 1px; + --spectrum-border-width-200: 2px; + --spectrum-border-width-400: 4px; + --spectrum-field-edge-to-text-quiet: 0px; + --spectrum-field-edge-to-visual-quiet: 0px; + --spectrum-field-edge-to-border-quiet: 0px; + --spectrum-field-edge-to-alert-icon-quiet: 0px; + --spectrum-field-edge-to-validation-icon-quiet: 0px; + --spectrum-text-underline-thickness: 1px; + --spectrum-text-underline-gap: 1px; + --spectrum-accent-color-100: var(--spectrum-blue-100); + --spectrum-accent-color-200: var(--spectrum-blue-200); + --spectrum-accent-color-300: var(--spectrum-blue-300); + --spectrum-accent-color-400: var(--spectrum-blue-400); + --spectrum-accent-color-500: var(--spectrum-blue-500); + --spectrum-accent-color-600: var(--spectrum-blue-600); + --spectrum-accent-color-700: var(--spectrum-blue-700); + --spectrum-accent-color-800: var(--spectrum-blue-800); + --spectrum-accent-color-900: var(--spectrum-blue-900); + --spectrum-accent-color-1000: var(--spectrum-blue-1000); + --spectrum-accent-color-1100: var(--spectrum-blue-1100); + --spectrum-accent-color-1200: var(--spectrum-blue-1200); + --spectrum-accent-color-1300: var(--spectrum-blue-1300); + --spectrum-accent-color-1400: var(--spectrum-blue-1400); + --spectrum-accent-color-1500: var(--spectrum-blue-1500); + --spectrum-accent-color-1600: var(--spectrum-blue-1600); + --spectrum-informative-color-100: var(--spectrum-blue-100); + --spectrum-informative-color-200: var(--spectrum-blue-200); + --spectrum-informative-color-300: var(--spectrum-blue-300); + --spectrum-informative-color-400: var(--spectrum-blue-400); + --spectrum-informative-color-500: var(--spectrum-blue-500); + --spectrum-informative-color-600: var(--spectrum-blue-600); + --spectrum-informative-color-700: var(--spectrum-blue-700); + --spectrum-informative-color-800: var(--spectrum-blue-800); + --spectrum-informative-color-900: var(--spectrum-blue-900); + --spectrum-informative-color-1000: var(--spectrum-blue-1000); + --spectrum-informative-color-1100: var(--spectrum-blue-1100); + --spectrum-informative-color-1200: var(--spectrum-blue-1200); + --spectrum-informative-color-1300: var(--spectrum-blue-1300); + --spectrum-informative-color-1400: var(--spectrum-blue-1400); + --spectrum-informative-color-1500: var(--spectrum-blue-1500); + --spectrum-informative-color-1600: var(--spectrum-blue-1600); + --spectrum-negative-color-100: var(--spectrum-red-100); + --spectrum-negative-color-200: var(--spectrum-red-200); + --spectrum-negative-color-300: var(--spectrum-red-300); + --spectrum-negative-color-400: var(--spectrum-red-400); + --spectrum-negative-color-500: var(--spectrum-red-500); + --spectrum-negative-color-600: var(--spectrum-red-600); + --spectrum-negative-color-700: var(--spectrum-red-700); + --spectrum-negative-color-800: var(--spectrum-red-800); + --spectrum-negative-color-900: var(--spectrum-red-900); + --spectrum-negative-color-1000: var(--spectrum-red-1000); + --spectrum-negative-color-1100: var(--spectrum-red-1100); + --spectrum-negative-color-1200: var(--spectrum-red-1200); + --spectrum-negative-color-1300: var(--spectrum-red-1300); + --spectrum-negative-color-1400: var(--spectrum-red-1400); + --spectrum-negative-color-1500: var(--spectrum-red-1500); + --spectrum-negative-color-1600: var(--spectrum-red-1600); + --spectrum-notice-color-100: var(--spectrum-orange-100); + --spectrum-notice-color-200: var(--spectrum-orange-200); + --spectrum-notice-color-300: var(--spectrum-orange-300); + --spectrum-notice-color-400: var(--spectrum-orange-400); + --spectrum-notice-color-500: var(--spectrum-orange-500); + --spectrum-notice-color-600: var(--spectrum-orange-600); + --spectrum-notice-color-700: var(--spectrum-orange-700); + --spectrum-notice-color-800: var(--spectrum-orange-800); + --spectrum-notice-color-900: var(--spectrum-orange-900); + --spectrum-notice-color-1000: var(--spectrum-orange-1000); + --spectrum-notice-color-1100: var(--spectrum-orange-1100); + --spectrum-notice-color-1200: var(--spectrum-orange-1200); + --spectrum-notice-color-1300: var(--spectrum-orange-1300); + --spectrum-notice-color-1400: var(--spectrum-orange-1400); + --spectrum-notice-color-1500: var(--spectrum-orange-1500); + --spectrum-notice-color-1600: var(--spectrum-orange-1600); + --spectrum-positive-color-100: var(--spectrum-green-100); + --spectrum-positive-color-200: var(--spectrum-green-200); + --spectrum-positive-color-300: var(--spectrum-green-300); + --spectrum-positive-color-400: var(--spectrum-green-400); + --spectrum-positive-color-500: var(--spectrum-green-500); + --spectrum-positive-color-600: var(--spectrum-green-600); + --spectrum-positive-color-700: var(--spectrum-green-700); + --spectrum-positive-color-800: var(--spectrum-green-800); + --spectrum-positive-color-900: var(--spectrum-green-900); + --spectrum-positive-color-1000: var(--spectrum-green-1000); + --spectrum-positive-color-1100: var(--spectrum-green-1100); + --spectrum-positive-color-1200: var(--spectrum-green-1200); + --spectrum-positive-color-1300: var(--spectrum-green-1300); + --spectrum-positive-color-1400: var(--spectrum-green-1400); + --spectrum-positive-color-1500: var(--spectrum-green-1500); + --spectrum-positive-color-1600: var(--spectrum-green-1600); + --spectrum-negative-subdued-background-color-hover: var( + --spectrum-negative-color-300 + ); + --spectrum-negative-subdued-background-color-down: var( + --spectrum-negative-color-300 + ); + --spectrum-negative-subdued-background-color-key-focus: var( + --spectrum-negative-color-300 + ); + --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); + --spectrum-sans-serif-font-family: Adobe Clean; + --spectrum-serif-font-family: Adobe Clean Serif; + --spectrum-cjk-font-family: Adobe Clean Han; + --spectrum-light-font-weight: 300; + --spectrum-regular-font-weight: 400; + --spectrum-medium-font-weight: 500; + --spectrum-bold-font-weight: 700; + --spectrum-extra-bold-font-weight: 800; + --spectrum-black-font-weight: 900; + --spectrum-italic-font-style: italic; + --spectrum-default-font-style: normal; + --spectrum-line-height-100: 1.3; + --spectrum-line-height-200: 1.5; + --spectrum-cjk-line-height-100: 1.5; + --spectrum-cjk-line-height-200: 1.7; + --spectrum-cjk-letter-spacing: 0.05em; + --spectrum-heading-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-heading-sans-serif-light-font-weight: var( + --spectrum-light-font-weight + ); + --spectrum-heading-sans-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-light-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-light-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-heading-cjk-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-light-emphasized-font-weight: var( + --spectrum-light-font-weight + ); + --spectrum-heading-sans-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-cjk-light-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-light-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-heading-cjk-light-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); + --spectrum-heading-size-xl: var(--spectrum-font-size-900); + --spectrum-heading-size-l: var(--spectrum-font-size-700); + --spectrum-heading-size-m: var(--spectrum-font-size-500); + --spectrum-heading-size-s: var(--spectrum-font-size-300); + --spectrum-heading-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); + --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); + --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); + --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); + --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-line-height: var(--spectrum-line-height-100); + --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier: 0.88888889; + --spectrum-heading-margin-bottom-multiplier: 0.25; + --spectrum-heading-color: var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-body-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-serif-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-body-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-cjk-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-body-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-body-size-xxxl: var(--spectrum-font-size-600); + --spectrum-body-size-xxl: var(--spectrum-font-size-500); + --spectrum-body-size-xl: var(--spectrum-font-size-400); + --spectrum-body-size-l: var(--spectrum-font-size-300); + --spectrum-body-size-m: var(--spectrum-font-size-200); + --spectrum-body-size-s: var(--spectrum-font-size-100); + --spectrum-body-size-xs: var(--spectrum-font-size-75); + --spectrum-body-line-height: var(--spectrum-line-height-200); + --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier: 0.75; + --spectrum-body-color: var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-light-strong-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-cjk-light-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-detail-cjk-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-detail-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-cjk-light-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-detail-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-light-strong-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-detail-cjk-light-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-size-xl: var(--spectrum-font-size-200); + --spectrum-detail-size-l: var(--spectrum-font-size-100); + --spectrum-detail-size-m: var(--spectrum-font-size-75); + --spectrum-detail-size-s: var(--spectrum-font-size-50); + --spectrum-detail-line-height: var(--spectrum-line-height-100); + --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-detail-margin-top-multiplier: 0.88888889; + --spectrum-detail-margin-bottom-multiplier: 0.25; + --spectrum-detail-letter-spacing: 0.06em; + --spectrum-detail-sans-serif-text-transform: uppercase; + --spectrum-detail-serif-text-transform: uppercase; + --spectrum-detail-color: var(--spectrum-gray-900); + --spectrum-code-font-family: Source Code Pro; + --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); + --spectrum-code-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-code-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-code-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-code-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-code-size-xl: var(--spectrum-font-size-400); + --spectrum-code-size-l: var(--spectrum-font-size-300); + --spectrum-code-size-m: var(--spectrum-font-size-200); + --spectrum-code-size-s: var(--spectrum-font-size-100); + --spectrum-code-size-xs: var(--spectrum-font-size-75); + --spectrum-code-line-height: var(--spectrum-line-height-200); + --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-code-color: var(--spectrum-gray-800); + --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0: 0ms; + --spectrum-animation-duration-100: 130ms; + --spectrum-animation-duration-200: 160ms; + --spectrum-animation-duration-300: 190ms; + --spectrum-animation-duration-400: 220ms; + --spectrum-animation-duration-500: 250ms; + --spectrum-animation-duration-600: 300ms; + --spectrum-animation-duration-700: 350ms; + --spectrum-animation-duration-800: 400ms; + --spectrum-animation-duration-900: 450ms; + --spectrum-animation-duration-1000: 500ms; + --spectrum-animation-duration-2000: 1000ms; + --spectrum-animation-duration-4000: 2000ms; + --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); + --spectrum-sans-font-family-stack: adobe-clean, + var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, + blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", + "Lucida Grande", sans-serif; + --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); + --spectrum-serif-font-family-stack: adobe-clean-serif, + var(--spectrum-serif-font-family), "Source Serif Pro", georgia, serif; + --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', monaco, monospace; + --spectrum-code-font-family-stack: "Source Code Pro", monaco, monospace; - --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", + -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, + "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", + -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, + "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-font-style: var(--spectrum-default-font-style); - --spectrum-font-size: var(--spectrum-font-size-100); + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-font-style: var(--spectrum-default-font-style); + --spectrum-font-size: var(--spectrum-font-size-100); - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, + var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font: var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; + --spectrum-docs-static-white-background-color: rgba( + var(--spectrum-docs-static-white-background-color-rgb) + ); + --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; + --spectrum-docs-static-black-background-color: rgba( + var(--spectrum-docs-static-black-background-color-rgb) + ); - --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); + --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } diff --git a/tools/styles/tokens-v2/index.css b/tools/styles/tokens-v2/index.css index 0a5a71eec6..e2c0d5a26a 100644 --- a/tools/styles/tokens-v2/index.css +++ b/tools/styles/tokens-v2/index.css @@ -1,4440 +1,4322 @@ :host, :root { - --spectrum-overlay-opacity: 0.6; - --spectrum-background-layer-2-color: var(--spectrum-gray-75); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-500 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-400 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-800 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-700 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-800 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-700 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-800 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-700 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-800 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-700 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-900 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-500); - --spectrum-red-background-color-default: var(--spectrum-red-800); - --spectrum-orange-background-color-default: var(--spectrum-orange-900); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-1000 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-900); - --spectrum-green-background-color-default: var(--spectrum-green-800); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-800); - --spectrum-blue-background-color-default: var(--spectrum-blue-800); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-800); - --spectrum-purple-background-color-default: var(--spectrum-purple-800); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-800); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-800); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-900); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-900); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-background-elevated-color: var(--spectrum-gray-75); - --spectrum-background-pasteboard-color: var(--spectrum-gray-25); - --spectrum-brown-visual-color: var(--spectrum-brown-900); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); - --spectrum-pink-visual-color: var(--spectrum-pink-900); - --spectrum-silver-visual-color: var(--spectrum-silver-900); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); - --spectrum-brown-background-color-default: var(--spectrum-brown-800); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800); - --spectrum-pink-background-color-default: var(--spectrum-pink-800); - --spectrum-silver-background-color-default: var(--spectrum-silver-800); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-800 - ); - --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-100-opacity: 0.36; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); - --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-200-opacity: 0.48; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); - --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-300-opacity: 0.6; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-300 - ); - --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300); - --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300); - --spectrum-green-subtle-background-color-default: var(--spectrum-green-300); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-300 - ); - --spectrum-red-subtle-background-color-default: var(--spectrum-red-300); - --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-300 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-300 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-300 - ); - --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-300 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-300 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-300 - ); - --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-300 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-300 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-300 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-300 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-300 - ); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-25-rgb: 255, 255, 255; - --spectrum-transparent-white-25-opacity: 0; - --spectrum-transparent-white-25: rgba( - var(--spectrum-transparent-white-25-rgb), - var(--spectrum-transparent-white-25-opacity) - ); - --spectrum-transparent-white-50-rgb: 255, 255, 255; - --spectrum-transparent-white-50-opacity: 0.04; - --spectrum-transparent-white-50: rgba( - var(--spectrum-transparent-white-50-rgb), - var(--spectrum-transparent-white-50-opacity) - ); - --spectrum-transparent-white-75-rgb: 255, 255, 255; - --spectrum-transparent-white-75-opacity: 0.07; - --spectrum-transparent-white-75: rgba( - var(--spectrum-transparent-white-75-rgb), - var(--spectrum-transparent-white-75-opacity) - ); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0.11; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.14; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.17; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.21; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.39; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.51; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.66; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.85; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900-opacity: 0.94; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb), - var(--spectrum-transparent-white-900-opacity) - ); - --spectrum-transparent-white-1000-rgb: 255, 255, 255; - --spectrum-transparent-white-1000: rgba( - var(--spectrum-transparent-white-1000-rgb) - ); - --spectrum-transparent-black-25-rgb: 0, 0, 0; - --spectrum-transparent-black-25-opacity: 0; - --spectrum-transparent-black-25: rgba( - var(--spectrum-transparent-black-25-rgb), - var(--spectrum-transparent-black-25-opacity) - ); - --spectrum-transparent-black-50-rgb: 0, 0, 0; - --spectrum-transparent-black-50-opacity: 0.03; - --spectrum-transparent-black-50: rgba( - var(--spectrum-transparent-black-50-rgb), - var(--spectrum-transparent-black-50-opacity) - ); - --spectrum-transparent-black-75-rgb: 0, 0, 0; - --spectrum-transparent-black-75-opacity: 0.05; - --spectrum-transparent-black-75: rgba( - var(--spectrum-transparent-black-75-rgb), - var(--spectrum-transparent-black-75-opacity) - ); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0.09; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.12; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.15; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.22; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.44; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.56; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.69; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.84; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900-opacity: 0.93; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb), - var(--spectrum-transparent-black-900-opacity) - ); - --spectrum-gray-25-rgb: 17, 17, 17; - --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); - --spectrum-gray-50-rgb: 27, 27, 27; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 34, 34, 34; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 44, 44, 44; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 50, 50, 50; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 57, 57, 57; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 68, 68, 68; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 109, 109, 109; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 138, 138, 138; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 175, 175, 175; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 219, 219, 219; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 242, 242, 242; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-gray-1000-rgb: 255, 255, 255; - --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); - --spectrum-blue-100-rgb: 14, 23, 63; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 15, 28, 82; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 12, 33, 117; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 18, 45, 154; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 26, 58, 195; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 37, 73, 229; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 52, 91, 248; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 69, 110, 254; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 86, 129, 255; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 105, 149, 254; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 124, 169, 252; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 152, 192, 252; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 181, 213, 253; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 213, 231, 254; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-blue-1500-rgb: 238, 245, 255; - --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); - --spectrum-blue-1600-rgb: 255, 255, 255; - --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); - --spectrum-red-100-rgb: 54, 10, 3; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 68, 13, 5; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 87, 17, 7; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 115, 24, 11; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 147, 31, 17; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 177, 38, 23; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 205, 46, 29; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 230, 54, 35; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 252, 67, 46; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 103, 86; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 134, 120; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 167, 157; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 196, 189; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 222, 219; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-red-1500-rgb: 255, 242, 240; - --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); - --spectrum-red-1600-rgb: 255, 255, 255; - --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); - --spectrum-orange-100-rgb: 49, 16, 0; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 61, 21, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 80, 27, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 106, 36, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 135, 47, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 162, 59, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 185, 73, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 205, 86, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 224, 100, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 243, 117, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 255, 137, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 255, 173, 45; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 201, 116; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 225, 178; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-orange-1500-rgb: 255, 243, 225; - --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); - --spectrum-orange-1600-rgb: 255, 255, 255; - --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); - --spectrum-yellow-100-rgb: 37, 23, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 47, 29, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 61, 39, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 83, 52, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 107, 67, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 130, 82, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 151, 97, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 169, 110, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 186, 124, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 203, 141, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 218, 159, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 235, 183, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 249, 206, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 255, 230, 86; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-yellow-1500-rgb: 255, 246, 195; - --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); - --spectrum-yellow-1600-rgb: 255, 255, 255; - --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); - --spectrum-chartreuse-100-rgb: 23, 28, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 30, 36, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 39, 47, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 53, 63, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 68, 82, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 83, 100, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 97, 116, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 109, 131, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 122, 147, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 136, 164, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 151, 181, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 169, 203, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 187, 225, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 219, 240, 117; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-chartreuse-1500-rgb: 242, 249, 206; - --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); - --spectrum-chartreuse-1600-rgb: 255, 255, 255; - --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); - --spectrum-celery-100-rgb: 11, 31, 0; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 15, 38, 0; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 21, 51, 1; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 31, 67, 4; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 41, 86, 8; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 50, 105, 11; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 60, 122, 15; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 69, 138, 19; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 78, 154, 23; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 88, 172, 28; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 100, 190, 35; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 116, 213, 46; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 136, 234, 65; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 170, 251, 112; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-celery-1500-rgb: 222, 255, 198; - --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); - --spectrum-celery-1600-rgb: 255, 255, 255; - --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); - --spectrum-green-100-rgb: 0, 30, 23; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 0, 38, 29; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 51, 38; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 68, 48; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 2, 87, 58; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 3, 106, 67; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 4, 124, 75; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 6, 140, 82; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 9, 157, 89; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 14, 175, 98; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 24, 193, 110; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 57, 215, 134; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 126, 231, 172; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 189, 241, 208; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-green-1500-rgb: 229, 250, 236; - --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); - --spectrum-green-1600-rgb: 255, 255, 255; - --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); - --spectrum-seafoam-100-rgb: 0, 30, 27; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 0, 39, 35; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 0, 50, 44; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 0, 67, 59; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 2, 86, 75; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 4, 105, 89; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 6, 122, 103; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 8, 138, 116; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 10, 154, 128; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 12, 173, 142; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 14, 190, 156; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 29, 214, 176; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 122, 229, 203; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 186, 241, 222; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-seafoam-1500-rgb: 229, 249, 243; - --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); - --spectrum-seafoam-1600-rgb: 255, 255, 255; - --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); - --spectrum-cyan-100-rgb: 0, 29, 39; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 36, 49; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 48, 65; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 64, 88; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 82, 113; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 3, 99, 140; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 8, 115, 168; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 15, 128, 194; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 24, 142, 220; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 38, 159, 244; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 63, 177, 255; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 107, 199, 255; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 152, 219, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 195, 236, 252; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-cyan-1500-rgb: 230, 248, 253; - --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); - --spectrum-cyan-1600-rgb: 255, 255, 255; - --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); - --spectrum-indigo-100-rgb: 30, 0, 93; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 35, 0, 110; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 47, 0, 140; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 62, 12, 174; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 79, 30, 209; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 95, 52, 235; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 109, 75, 248; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 119, 97, 252; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 128, 119, 254; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 139, 141, 254; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 153, 161, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 176, 186, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 199, 208, 255; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 223, 228, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-indigo-1500-rgb: 243, 244, 255; - --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); - --spectrum-indigo-1600-rgb: 255, 255, 255; - --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); - --spectrum-purple-100-rgb: 41, 0, 79; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 50, 0, 96; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 64, 0, 122; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 83, 0, 159; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 107, 6, 195; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 130, 34, 215; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 148, 62, 224; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 161, 84, 229; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 173, 105, 233; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 186, 127, 237; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 197, 149, 240; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 212, 176, 244; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 225, 201, 247; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 238, 224, 250; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-purple-1500-rgb: 248, 243, 253; - --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); - --spectrum-purple-1600-rgb: 255, 255, 255; - --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); - --spectrum-fuchsia-100-rgb: 50, 0, 61; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 61, 0, 74; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 79, 0, 95; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 102, 9, 120; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 127, 23, 146; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 151, 38, 170; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 173, 51, 192; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 192, 64, 212; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 213, 73, 235; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 232, 91, 253; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 240, 122, 255; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 245, 159, 255; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 248, 191, 255; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 251, 219, 255; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-fuchsia-1500-rgb: 253, 241, 255; - --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); - --spectrum-fuchsia-1600-rgb: 255, 255, 255; - --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); - --spectrum-magenta-100-rgb: 59, 0, 22; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 74, 0, 27; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 93, 0, 34; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 123, 0, 45; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 152, 7, 60; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 181, 19, 76; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 207, 31, 92; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 231, 41, 105; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 255, 51, 119; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 96, 149; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 128, 171; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 163, 194; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 193, 214; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 220, 232; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-magenta-1500-rgb: 255, 241, 246; - --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); - --spectrum-magenta-1600-rgb: 255, 255, 255; - --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); - --spectrum-pink-100-rgb: 58, 0, 37; - --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); - --spectrum-pink-200-rgb: 71, 0, 44; - --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); - --spectrum-pink-300-rgb: 90, 0, 57; - --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); - --spectrum-pink-400-rgb: 115, 7, 75; - --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); - --spectrum-pink-500-rgb: 143, 18, 97; - --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); - --spectrum-pink-600-rgb: 171, 29, 119; - --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); - --spectrum-pink-700-rgb: 196, 39, 138; - --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); - --spectrum-pink-800-rgb: 220, 47, 156; - --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); - --spectrum-pink-900-rgb: 236, 67, 175; - --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); - --spectrum-pink-1000-rgb: 251, 90, 196; - --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); - --spectrum-pink-1100-rgb: 255, 122, 210; - --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); - --spectrum-pink-1200-rgb: 255, 159, 223; - --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); - --spectrum-pink-1300-rgb: 255, 191, 234; - --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); - --spectrum-pink-1400-rgb: 255, 219, 243; - --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); - --spectrum-pink-1500-rgb: 255, 241, 250; - --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); - --spectrum-pink-1600-rgb: 255, 255, 255; - --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); - --spectrum-turquoise-100-rgb: 0, 30, 33; - --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); - --spectrum-turquoise-200-rgb: 0, 37, 41; - --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); - --spectrum-turquoise-300-rgb: 0, 49, 54; - --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); - --spectrum-turquoise-400-rgb: 0, 66, 72; - --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); - --spectrum-turquoise-500-rgb: 3, 84, 92; - --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); - --spectrum-turquoise-600-rgb: 5, 103, 112; - --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); - --spectrum-turquoise-700-rgb: 7, 120, 131; - --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); - --spectrum-turquoise-800-rgb: 9, 135, 147; - --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); - --spectrum-turquoise-900-rgb: 11, 151, 164; - --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); - --spectrum-turquoise-1000-rgb: 13, 168, 182; - --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); - --spectrum-turquoise-1100-rgb: 16, 186, 202; - --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); - --spectrum-turquoise-1200-rgb: 64, 208, 220; - --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); - --spectrum-turquoise-1300-rgb: 128, 225, 231; - --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); - --spectrum-turquoise-1400-rgb: 183, 240, 240; - --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); - --spectrum-turquoise-1500-rgb: 228, 249, 249; - --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); - --spectrum-turquoise-1600-rgb: 255, 255, 255; - --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); - --spectrum-brown-100-rgb: 35, 24, 8; - --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); - --spectrum-brown-200-rgb: 44, 31, 11; - --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); - --spectrum-brown-300-rgb: 58, 40, 14; - --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); - --spectrum-brown-400-rgb: 78, 55, 19; - --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); - --spectrum-brown-500-rgb: 98, 71, 30; - --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); - --spectrum-brown-600-rgb: 115, 88, 47; - --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); - --spectrum-brown-700-rgb: 132, 104, 61; - --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); - --spectrum-brown-800-rgb: 148, 118, 73; - --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); - --spectrum-brown-900-rgb: 163, 132, 84; - --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); - --spectrum-brown-1000-rgb: 181, 147, 98; - --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); - --spectrum-brown-1100-rgb: 199, 163, 112; - --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); - --spectrum-brown-1200-rgb: 222, 185, 130; - --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); - --spectrum-brown-1300-rgb: 232, 207, 169; - --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); - --spectrum-brown-1400-rgb: 242, 227, 206; - --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); - --spectrum-brown-1500-rgb: 250, 244, 236; - --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); - --spectrum-brown-1600-rgb: 255, 255, 255; - --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); - --spectrum-silver-100-rgb: 26, 26, 26; - --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); - --spectrum-silver-200-rgb: 33, 33, 33; - --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); - --spectrum-silver-300-rgb: 44, 44, 44; - --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); - --spectrum-silver-400-rgb: 59, 59, 59; - --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); - --spectrum-silver-500-rgb: 76, 76, 76; - --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); - --spectrum-silver-600-rgb: 92, 92, 92; - --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); - --spectrum-silver-700-rgb: 108, 108, 108; - --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); - --spectrum-silver-800-rgb: 123, 123, 123; - --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); - --spectrum-silver-900-rgb: 137, 137, 137; - --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); - --spectrum-silver-1000-rgb: 152, 152, 152; - --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); - --spectrum-silver-1100-rgb: 169, 169, 169; - --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); - --spectrum-silver-1200-rgb: 190, 190, 190; - --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); - --spectrum-silver-1300-rgb: 211, 211, 211; - --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); - --spectrum-silver-1400-rgb: 229, 229, 229; - --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); - --spectrum-silver-1500-rgb: 244, 244, 244; - --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); - --spectrum-silver-1600-rgb: 255, 255, 255; - --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); - --spectrum-cinnamon-100-rgb: 48, 17, 4; - --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); - --spectrum-cinnamon-200-rgb: 59, 21, 5; - --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); - --spectrum-cinnamon-300-rgb: 79, 28, 7; - --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); - --spectrum-cinnamon-400-rgb: 100, 41, 15; - --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); - --spectrum-cinnamon-500-rgb: 122, 57, 28; - --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); - --spectrum-cinnamon-600-rgb: 143, 74, 40; - --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); - --spectrum-cinnamon-700-rgb: 163, 88, 52; - --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); - --spectrum-cinnamon-800-rgb: 179, 103, 64; - --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); - --spectrum-cinnamon-900-rgb: 192, 119, 80; - --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); - --spectrum-cinnamon-1000-rgb: 206, 136, 99; - --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); - --spectrum-cinnamon-1100-rgb: 220, 154, 118; - --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); - --spectrum-cinnamon-1200-rgb: 232, 179, 149; - --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); - --spectrum-cinnamon-1300-rgb: 239, 203, 183; - --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); - --spectrum-cinnamon-1400-rgb: 246, 225, 214; - --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); - --spectrum-cinnamon-1500-rgb: 252, 244, 239; - --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); - --spectrum-cinnamon-1600-rgb: 255, 255, 255; - --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-300 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-300 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-300 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-300 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-300 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); + --spectrum-overlay-opacity: 0.6; + --spectrum-background-layer-2-color: var(--spectrum-gray-75); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-500); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-400 + ); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-800); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-700); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-700); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-700 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-800 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-700 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-700 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-700 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-800 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-700 + ); + --spectrum-negative-background-color-down: var(--spectrum-negative-color-700); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-700 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-800 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-700 + ); + --spectrum-positive-background-color-down: var(--spectrum-positive-color-700); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-700 + ); + --spectrum-notice-background-color-default: var(--spectrum-notice-color-900); + --spectrum-gray-background-color-default: var(--spectrum-gray-500); + --spectrum-red-background-color-default: var(--spectrum-red-800); + --spectrum-orange-background-color-default: var(--spectrum-orange-900); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-1000 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-900); + --spectrum-green-background-color-default: var(--spectrum-green-800); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-800); + --spectrum-blue-background-color-default: var(--spectrum-blue-800); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-800); + --spectrum-purple-background-color-default: var(--spectrum-purple-800); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-800); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-800); + --spectrum-neutral-visual-color: var(--spectrum-gray-600); + --spectrum-accent-visual-color: var(--spectrum-accent-color-900); + --spectrum-informative-visual-color: var(--spectrum-informative-color-900); + --spectrum-negative-visual-color: var(--spectrum-negative-color-900); + --spectrum-notice-visual-color: var(--spectrum-notice-color-900); + --spectrum-positive-visual-color: var(--spectrum-positive-color-900); + --spectrum-gray-visual-color: var(--spectrum-gray-600); + --spectrum-red-visual-color: var(--spectrum-red-700); + --spectrum-orange-visual-color: var(--spectrum-orange-900); + --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color: var(--spectrum-celery-800); + --spectrum-green-visual-color: var(--spectrum-green-800); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color: var(--spectrum-cyan-900); + --spectrum-blue-visual-color: var(--spectrum-blue-900); + --spectrum-indigo-visual-color: var(--spectrum-indigo-900); + --spectrum-purple-visual-color: var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color: var(--spectrum-magenta-900); + --spectrum-background-elevated-color: var(--spectrum-gray-75); + --spectrum-background-pasteboard-color: var(--spectrum-gray-25); + --spectrum-brown-visual-color: var(--spectrum-brown-900); + --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); + --spectrum-pink-visual-color: var(--spectrum-pink-900); + --spectrum-silver-visual-color: var(--spectrum-silver-900); + --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); + --spectrum-brown-background-color-default: var(--spectrum-brown-800); + --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800); + --spectrum-pink-background-color-default: var(--spectrum-pink-800); + --spectrum-silver-background-color-default: var(--spectrum-silver-800); + --spectrum-turquoise-background-color-default: var(--spectrum-turquoise-800); + --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-100-opacity: 0.36; + --spectrum-drop-shadow-color-100: rgba( + var(--spectrum-drop-shadow-color-100-rgb), + var(--spectrum-drop-shadow-color-100-opacity) + ); + --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-200-opacity: 0.48; + --spectrum-drop-shadow-color-200: rgba( + var(--spectrum-drop-shadow-color-200-rgb), + var(--spectrum-drop-shadow-color-200-opacity) + ); + --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-300-opacity: 0.6; + --spectrum-drop-shadow-color-300: rgba( + var(--spectrum-drop-shadow-color-300-rgb), + var(--spectrum-drop-shadow-color-300-opacity) + ); + --spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-300); + --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300); + --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300); + --spectrum-green-subtle-background-color-default: var(--spectrum-green-300); + --spectrum-orange-subtle-background-color-default: var(--spectrum-orange-300); + --spectrum-red-subtle-background-color-default: var(--spectrum-red-300); + --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300); + --spectrum-cinnamon-subtle-background-color-default: var( + --spectrum-cinnamon-300 + ); + --spectrum-celery-subtle-background-color-default: var(--spectrum-celery-300); + --spectrum-chartreuse-subtle-background-color-default: var( + --spectrum-chartreuse-300 + ); + --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300); + --spectrum-fuchsia-subtle-background-color-default: var( + --spectrum-fuchsia-300 + ); + --spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-300); + --spectrum-magenta-subtle-background-color-default: var( + --spectrum-magenta-300 + ); + --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300); + --spectrum-purple-subtle-background-color-default: var(--spectrum-purple-300); + --spectrum-seafoam-subtle-background-color-default: var( + --spectrum-seafoam-300 + ); + --spectrum-silver-subtle-background-color-default: var(--spectrum-silver-300); + --spectrum-turquoise-subtle-background-color-default: var( + --spectrum-turquoise-300 + ); + --spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-300); + --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); + --spectrum-white-rgb: 255, 255, 255; + --spectrum-white: rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb: 255, 255, 255; + --spectrum-transparent-white-25-opacity: 0; + --spectrum-transparent-white-25: rgba( + var(--spectrum-transparent-white-25-rgb), + var(--spectrum-transparent-white-25-opacity) + ); + --spectrum-transparent-white-50-rgb: 255, 255, 255; + --spectrum-transparent-white-50-opacity: 0.04; + --spectrum-transparent-white-50: rgba( + var(--spectrum-transparent-white-50-rgb), + var(--spectrum-transparent-white-50-opacity) + ); + --spectrum-transparent-white-75-rgb: 255, 255, 255; + --spectrum-transparent-white-75-opacity: 0.07; + --spectrum-transparent-white-75: rgba( + var(--spectrum-transparent-white-75-rgb), + var(--spectrum-transparent-white-75-opacity) + ); + --spectrum-transparent-white-100-rgb: 255, 255, 255; + --spectrum-transparent-white-100-opacity: 0.11; + --spectrum-transparent-white-100: rgba( + var(--spectrum-transparent-white-100-rgb), + var(--spectrum-transparent-white-100-opacity) + ); + --spectrum-transparent-white-200-rgb: 255, 255, 255; + --spectrum-transparent-white-200-opacity: 0.14; + --spectrum-transparent-white-200: rgba( + var(--spectrum-transparent-white-200-rgb), + var(--spectrum-transparent-white-200-opacity) + ); + --spectrum-transparent-white-300-rgb: 255, 255, 255; + --spectrum-transparent-white-300-opacity: 0.17; + --spectrum-transparent-white-300: rgba( + var(--spectrum-transparent-white-300-rgb), + var(--spectrum-transparent-white-300-opacity) + ); + --spectrum-transparent-white-400-rgb: 255, 255, 255; + --spectrum-transparent-white-400-opacity: 0.21; + --spectrum-transparent-white-400: rgba( + var(--spectrum-transparent-white-400-rgb), + var(--spectrum-transparent-white-400-opacity) + ); + --spectrum-transparent-white-500-rgb: 255, 255, 255; + --spectrum-transparent-white-500-opacity: 0.39; + --spectrum-transparent-white-500: rgba( + var(--spectrum-transparent-white-500-rgb), + var(--spectrum-transparent-white-500-opacity) + ); + --spectrum-transparent-white-600-rgb: 255, 255, 255; + --spectrum-transparent-white-600-opacity: 0.51; + --spectrum-transparent-white-600: rgba( + var(--spectrum-transparent-white-600-rgb), + var(--spectrum-transparent-white-600-opacity) + ); + --spectrum-transparent-white-700-rgb: 255, 255, 255; + --spectrum-transparent-white-700-opacity: 0.66; + --spectrum-transparent-white-700: rgba( + var(--spectrum-transparent-white-700-rgb), + var(--spectrum-transparent-white-700-opacity) + ); + --spectrum-transparent-white-800-rgb: 255, 255, 255; + --spectrum-transparent-white-800-opacity: 0.85; + --spectrum-transparent-white-800: rgba( + var(--spectrum-transparent-white-800-rgb), + var(--spectrum-transparent-white-800-opacity) + ); + --spectrum-transparent-white-900-rgb: 255, 255, 255; + --spectrum-transparent-white-900-opacity: 0.94; + --spectrum-transparent-white-900: rgba( + var(--spectrum-transparent-white-900-rgb), + var(--spectrum-transparent-white-900-opacity) + ); + --spectrum-transparent-white-1000-rgb: 255, 255, 255; + --spectrum-transparent-white-1000: rgba( + var(--spectrum-transparent-white-1000-rgb) + ); + --spectrum-transparent-black-25-rgb: 0, 0, 0; + --spectrum-transparent-black-25-opacity: 0; + --spectrum-transparent-black-25: rgba( + var(--spectrum-transparent-black-25-rgb), + var(--spectrum-transparent-black-25-opacity) + ); + --spectrum-transparent-black-50-rgb: 0, 0, 0; + --spectrum-transparent-black-50-opacity: 0.03; + --spectrum-transparent-black-50: rgba( + var(--spectrum-transparent-black-50-rgb), + var(--spectrum-transparent-black-50-opacity) + ); + --spectrum-transparent-black-75-rgb: 0, 0, 0; + --spectrum-transparent-black-75-opacity: 0.05; + --spectrum-transparent-black-75: rgba( + var(--spectrum-transparent-black-75-rgb), + var(--spectrum-transparent-black-75-opacity) + ); + --spectrum-transparent-black-100-rgb: 0, 0, 0; + --spectrum-transparent-black-100-opacity: 0.09; + --spectrum-transparent-black-100: rgba( + var(--spectrum-transparent-black-100-rgb), + var(--spectrum-transparent-black-100-opacity) + ); + --spectrum-transparent-black-200-rgb: 0, 0, 0; + --spectrum-transparent-black-200-opacity: 0.12; + --spectrum-transparent-black-200: rgba( + var(--spectrum-transparent-black-200-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --spectrum-transparent-black-300-rgb: 0, 0, 0; + --spectrum-transparent-black-300-opacity: 0.15; + --spectrum-transparent-black-300: rgba( + var(--spectrum-transparent-black-300-rgb), + var(--spectrum-transparent-black-300-opacity) + ); + --spectrum-transparent-black-400-rgb: 0, 0, 0; + --spectrum-transparent-black-400-opacity: 0.22; + --spectrum-transparent-black-400: rgba( + var(--spectrum-transparent-black-400-rgb), + var(--spectrum-transparent-black-400-opacity) + ); + --spectrum-transparent-black-500-rgb: 0, 0, 0; + --spectrum-transparent-black-500-opacity: 0.44; + --spectrum-transparent-black-500: rgba( + var(--spectrum-transparent-black-500-rgb), + var(--spectrum-transparent-black-500-opacity) + ); + --spectrum-transparent-black-600-rgb: 0, 0, 0; + --spectrum-transparent-black-600-opacity: 0.56; + --spectrum-transparent-black-600: rgba( + var(--spectrum-transparent-black-600-rgb), + var(--spectrum-transparent-black-600-opacity) + ); + --spectrum-transparent-black-700-rgb: 0, 0, 0; + --spectrum-transparent-black-700-opacity: 0.69; + --spectrum-transparent-black-700: rgba( + var(--spectrum-transparent-black-700-rgb), + var(--spectrum-transparent-black-700-opacity) + ); + --spectrum-transparent-black-800-rgb: 0, 0, 0; + --spectrum-transparent-black-800-opacity: 0.84; + --spectrum-transparent-black-800: rgba( + var(--spectrum-transparent-black-800-rgb), + var(--spectrum-transparent-black-800-opacity) + ); + --spectrum-transparent-black-900-rgb: 0, 0, 0; + --spectrum-transparent-black-900-opacity: 0.93; + --spectrum-transparent-black-900: rgba( + var(--spectrum-transparent-black-900-rgb), + var(--spectrum-transparent-black-900-opacity) + ); + --spectrum-gray-25-rgb: 17, 17, 17; + --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb: 27, 27, 27; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 34, 34, 34; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 44, 44, 44; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 50, 50, 50; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 57, 57, 57; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 68, 68, 68; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 109, 109, 109; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 138, 138, 138; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 175, 175, 175; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 219, 219, 219; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 242, 242, 242; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb: 255, 255, 255; + --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb: 14, 23, 63; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 15, 28, 82; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 12, 33, 117; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 18, 45, 154; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 26, 58, 195; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 37, 73, 229; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 52, 91, 248; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 69, 110, 254; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 86, 129, 255; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 105, 149, 254; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 124, 169, 252; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 152, 192, 252; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 181, 213, 253; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 213, 231, 254; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb: 238, 245, 255; + --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb: 255, 255, 255; + --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb: 54, 10, 3; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 68, 13, 5; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 87, 17, 7; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 115, 24, 11; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 147, 31, 17; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 177, 38, 23; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 205, 46, 29; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 230, 54, 35; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 252, 67, 46; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 255, 103, 86; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 255, 134, 120; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 255, 167, 157; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 255, 196, 189; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 255, 222, 219; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb: 255, 242, 240; + --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb: 255, 255, 255; + --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb: 49, 16, 0; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 61, 21, 0; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 80, 27, 0; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 106, 36, 0; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 135, 47, 0; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 162, 59, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 185, 73, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 205, 86, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 224, 100, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 243, 117, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 255, 137, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 255, 173, 45; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 255, 201, 116; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 255, 225, 178; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb: 255, 243, 225; + --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb: 255, 255, 255; + --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb: 37, 23, 0; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 47, 29, 0; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 61, 39, 0; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 83, 52, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 107, 67, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 130, 82, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 151, 97, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 169, 110, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 186, 124, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 203, 141, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 218, 159, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 235, 183, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 249, 206, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 255, 230, 86; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb: 255, 246, 195; + --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb: 255, 255, 255; + --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb: 23, 28, 0; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 30, 36, 0; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 39, 47, 0; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 53, 63, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 68, 82, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 83, 100, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 97, 116, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 109, 131, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 122, 147, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 136, 164, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 151, 181, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 169, 203, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 187, 225, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 219, 240, 117; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb: 242, 249, 206; + --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb: 255, 255, 255; + --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb: 11, 31, 0; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 15, 38, 0; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 21, 51, 1; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 31, 67, 4; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 41, 86, 8; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 50, 105, 11; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 60, 122, 15; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 69, 138, 19; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 78, 154, 23; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 88, 172, 28; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 100, 190, 35; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 116, 213, 46; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 136, 234, 65; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 170, 251, 112; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb: 222, 255, 198; + --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb: 255, 255, 255; + --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb: 0, 30, 23; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 0, 38, 29; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 0, 51, 38; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 0, 68, 48; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 2, 87, 58; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 3, 106, 67; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 4, 124, 75; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 6, 140, 82; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 9, 157, 89; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 14, 175, 98; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 24, 193, 110; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 57, 215, 134; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 126, 231, 172; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 189, 241, 208; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb: 229, 250, 236; + --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb: 255, 255, 255; + --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb: 0, 30, 27; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 0, 39, 35; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 0, 50, 44; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 0, 67, 59; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 2, 86, 75; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 4, 105, 89; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 6, 122, 103; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 8, 138, 116; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 10, 154, 128; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 12, 173, 142; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 14, 190, 156; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 29, 214, 176; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 122, 229, 203; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 186, 241, 222; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb: 229, 249, 243; + --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb: 255, 255, 255; + --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb: 0, 29, 39; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 0, 36, 49; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 0, 48, 65; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 0, 64, 88; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 0, 82, 113; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 3, 99, 140; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 8, 115, 168; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 15, 128, 194; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 24, 142, 220; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 38, 159, 244; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 63, 177, 255; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 107, 199, 255; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 152, 219, 255; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 195, 236, 252; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb: 230, 248, 253; + --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb: 255, 255, 255; + --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb: 30, 0, 93; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 35, 0, 110; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 47, 0, 140; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 62, 12, 174; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 79, 30, 209; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 95, 52, 235; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 109, 75, 248; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 119, 97, 252; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 128, 119, 254; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 139, 141, 254; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 153, 161, 255; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 176, 186, 255; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 199, 208, 255; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 223, 228, 255; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb: 243, 244, 255; + --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb: 255, 255, 255; + --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb: 41, 0, 79; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 50, 0, 96; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 64, 0, 122; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 83, 0, 159; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 107, 6, 195; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 130, 34, 215; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 148, 62, 224; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 161, 84, 229; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 173, 105, 233; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 186, 127, 237; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 197, 149, 240; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 212, 176, 244; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 225, 201, 247; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 238, 224, 250; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb: 248, 243, 253; + --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb: 255, 255, 255; + --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb: 50, 0, 61; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 61, 0, 74; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 79, 0, 95; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 102, 9, 120; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 127, 23, 146; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 151, 38, 170; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 173, 51, 192; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 192, 64, 212; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 213, 73, 235; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 232, 91, 253; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 240, 122, 255; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 245, 159, 255; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 248, 191, 255; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 251, 219, 255; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb: 253, 241, 255; + --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb: 255, 255, 255; + --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb: 59, 0, 22; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 74, 0, 27; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 93, 0, 34; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 123, 0, 45; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 152, 7, 60; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 181, 19, 76; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 207, 31, 92; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 231, 41, 105; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 255, 51, 119; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 255, 96, 149; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 255, 128, 171; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 255, 163, 194; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 255, 193, 214; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 255, 220, 232; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb: 255, 241, 246; + --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb: 255, 255, 255; + --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb: 58, 0, 37; + --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb: 71, 0, 44; + --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb: 90, 0, 57; + --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb: 115, 7, 75; + --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb: 143, 18, 97; + --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb: 171, 29, 119; + --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb: 196, 39, 138; + --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb: 220, 47, 156; + --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb: 236, 67, 175; + --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb: 251, 90, 196; + --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb: 255, 122, 210; + --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb: 255, 159, 223; + --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb: 255, 191, 234; + --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb: 255, 219, 243; + --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb: 255, 241, 250; + --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb: 255, 255, 255; + --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb: 0, 30, 33; + --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb: 0, 37, 41; + --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb: 0, 49, 54; + --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb: 0, 66, 72; + --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb: 3, 84, 92; + --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb: 5, 103, 112; + --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb: 7, 120, 131; + --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb: 9, 135, 147; + --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb: 11, 151, 164; + --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb: 13, 168, 182; + --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb: 16, 186, 202; + --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb: 64, 208, 220; + --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb: 128, 225, 231; + --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb: 183, 240, 240; + --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb: 228, 249, 249; + --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb: 255, 255, 255; + --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb: 35, 24, 8; + --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb: 44, 31, 11; + --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb: 58, 40, 14; + --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb: 78, 55, 19; + --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb: 98, 71, 30; + --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb: 115, 88, 47; + --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb: 132, 104, 61; + --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb: 148, 118, 73; + --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb: 163, 132, 84; + --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb: 181, 147, 98; + --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb: 199, 163, 112; + --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb: 222, 185, 130; + --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb: 232, 207, 169; + --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb: 242, 227, 206; + --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb: 250, 244, 236; + --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb: 255, 255, 255; + --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb: 26, 26, 26; + --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb: 33, 33, 33; + --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb: 44, 44, 44; + --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb: 59, 59, 59; + --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb: 76, 76, 76; + --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb: 92, 92, 92; + --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb: 108, 108, 108; + --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb: 123, 123, 123; + --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb: 137, 137, 137; + --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb: 152, 152, 152; + --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb: 169, 169, 169; + --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb: 190, 190, 190; + --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb: 211, 211, 211; + --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb: 229, 229, 229; + --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb: 244, 244, 244; + --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb: 255, 255, 255; + --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb: 48, 17, 4; + --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb: 59, 21, 5; + --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb: 79, 28, 7; + --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb: 100, 41, 15; + --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb: 122, 57, 28; + --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb: 143, 74, 40; + --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb: 163, 88, 52; + --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb: 179, 103, 64; + --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb: 192, 119, 80; + --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb: 206, 136, 99; + --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb: 220, 154, 118; + --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb: 232, 179, 149; + --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb: 239, 203, 183; + --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb: 246, 225, 214; + --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb: 252, 244, 239; + --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb: 255, 255, 255; + --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); + --spectrum-negative-subdued-background-color-default: var( + --spectrum-negative-subtle-background-color-default + ); + --spectrum-accent-subtle-background-color-default: var( + --spectrum-accent-color-300 + ); + --spectrum-informative-subtle-background-color-default: var( + --spectrum-informative-color-300 + ); + --spectrum-positive-subtle-background-color-default: var( + --spectrum-positive-color-300 + ); + --spectrum-notice-subtle-background-color-default: var( + --spectrum-notice-color-300 + ); + --spectrum-negative-subtle-background-color-default: var( + --spectrum-negative-color-300 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.07 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); } :host, :root { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); - --spectrum-opacity-disabled: 0.3; - --spectrum-background-base-color: var(--spectrum-gray-25); - --spectrum-background-layer-1-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-900 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-neutral-subdued-content-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-accent-content-color-selected: var( - --spectrum-accent-content-color-down - ); - --spectrum-disabled-background-color: var(--spectrum-gray-100); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-100 - ); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-focus: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-content-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-400 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-400 - ); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var( - --spectrum-transparent-white-300 - ); - --spectrum-disabled-static-black-border-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-negative-border-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var( - --spectrum-negative-border-color-down - ); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-title-color: var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color: var( - --spectrum-drop-shadow-color-100 - ); - --spectrum-drop-shadow-emphasized-hover-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-elevated-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300); - --spectrum-static-black-text-color: var(--spectrum-black); - --spectrum-static-white-text-color: var(--spectrum-white); - --spectrum-track-color: var(--spectrum-gray-300); - --spectrum-static-black-track-color: var(--spectrum-transparent-black-300); - --spectrum-static-white-track-color: var(--spectrum-transparent-white-300); - --spectrum-static-black-track-indicator-color: var( - --spectrum-transparent-black-900 - ); - --spectrum-static-white-track-indicator-color: var( - --spectrum-transparent-white-900 - ); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var( - --spectrum-color-handle-inner-border-opacity - ); - --spectrum-color-handle-drop-shadow-color: var( - --spectrum-drop-shadow-color - ); - --spectrum-floating-action-button-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-floating-action-button-shadow-color: var( - --spectrum-floating-action-button-drop-shadow-color - ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-black-rgb: 0, 0, 0; - --spectrum-black: rgba(var(--spectrum-black-rgb)); - --spectrum-transparent-black-1000-rgb: 0, 0, 0; - --spectrum-transparent-black-1000: rgba( - var(--spectrum-transparent-black-1000-rgb) - ); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-to-top-text: var( - --spectrum-alert-banner-top-to-text - ); - --spectrum-alert-banner-to-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var( - --spectrum-corner-radius-medium-size-small - ); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: var( - --spectrum-corner-radius-medium-size-small - ); - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-drop-zone-cjk-title-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --spectrum-drop-zone-body-size: var( - --spectrum-illustrated-message-body-size - ); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-edge-to-content: 16px; - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var( - --spectrum-component-height-500 - ); - --spectrum-tab-item-compact-height-small: var( - --spectrum-component-height-75 - ); - --spectrum-tab-item-compact-height-medium: var( - --spectrum-component-height-100 - ); - --spectrum-tab-item-compact-height-large: var( - --spectrum-component-height-200 - ); - --spectrum-tab-item-compact-height-extra-large: var( - --spectrum-component-height-300 - ); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-corner-radius-0: 0px; - --spectrum-corner-radius-75: 4px; - --spectrum-corner-radius-100: 8px; - --spectrum-corner-radius-200: 10px; - --spectrum-corner-radius-300: 6px; - --spectrum-corner-radius-400: 7px; - --spectrum-corner-radius-500: 8px; - --spectrum-corner-radius-600: 9px; - --spectrum-corner-radius-700: 10px; - --spectrum-corner-radius-800: 16px; - --spectrum-corner-radius-1000: 0.5; - --spectrum-corner-radius-none: var(--spectrum-corner-radius-0); - --spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100); - --spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500); - --spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700); - --spectrum-corner-radius-extra-large-default: var( - --spectrum-corner-radius-800 - ); - --spectrum-corner-radius-full: var(--spectrum-corner-radius-1000); - --spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75); - --spectrum-corner-radius-small-size-medium: var( - --spectrum-corner-radius-100 - ); - --spectrum-corner-radius-small-size-large: var( - --spectrum-corner-radius-200 - ); - --spectrum-corner-radius-small-size-extra-large: var( - --spectrum-corner-radius-300 - ); - --spectrum-corner-radius-medium-size-extra-small: var( - --spectrum-corner-radius-300 - ); - --spectrum-corner-radius-medium-size-small: var( - --spectrum-corner-radius-400 - ); - --spectrum-corner-radius-medium-size-medium: var( - --spectrum-corner-radius-500 - ); - --spectrum-corner-radius-medium-size-large: var( - --spectrum-corner-radius-600 - ); - --spectrum-corner-radius-medium-size-extra-large: var( - --spectrum-corner-radius-700 - ); - --spectrum-drop-shadow-x: 0px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-100: 1px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-accent-color-1500: var(--spectrum-blue-1500); - --spectrum-accent-color-1600: var(--spectrum-blue-1600); - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-informative-color-1500: var(--spectrum-blue-1500); - --spectrum-informative-color-1600: var(--spectrum-blue-1600); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-negative-color-1500: var(--spectrum-red-1500); - --spectrum-negative-color-1600: var(--spectrum-red-1600); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-notice-color-1500: var(--spectrum-orange-1500); - --spectrum-notice-color-1600: var(--spectrum-orange-1600); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-positive-color-1500: var(--spectrum-green-1500); - --spectrum-positive-color-1600: var(--spectrum-green-1600); - --spectrum-negative-subdued-background-color-hover: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-down: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-subdued-background-color-key-focus: var( - --spectrum-negative-color-300 - ); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: adobe clean; - --spectrum-serif-font-family: adobe clean serif; - --spectrum-cjk-font-family: adobe clean han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-sans-serif-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-body-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: source code pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); - --system: spectrum; + --spectrum-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color: var(--spectrum-white); + --spectrum-static-black-focus-indicator-color: var(--spectrum-black); + --spectrum-overlay-color: var(--spectrum-black); + --spectrum-drop-shadow-color: var(--spectrum-drop-shadow-color-100); + --spectrum-opacity-disabled: 0.3; + --spectrum-background-base-color: var(--spectrum-gray-25); + --spectrum-background-layer-1-color: var(--spectrum-gray-50); + --spectrum-neutral-background-color-default: var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-background-color-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default: var( + --spectrum-gray-800 + ); + --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus: var( + --spectrum-gray-900 + ); + --spectrum-neutral-subdued-content-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-accent-content-color-selected: var( + --spectrum-accent-content-color-down + ); + --spectrum-disabled-background-color: var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color: var( + --spectrum-transparent-white-100 + ); + --spectrum-disabled-static-black-background-color: var( + --spectrum-transparent-black-100 + ); + --spectrum-background-opacity-default: 0; + --spectrum-background-opacity-hover: 0.1; + --spectrum-background-opacity-down: 0.1; + --spectrum-background-opacity-key-focus: 0.1; + --spectrum-neutral-content-color-default: var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-content-color-down: var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-focus: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); + --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800); + --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); + --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000); + --spectrum-negative-content-color-default: var(--spectrum-negative-color-900); + --spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-disabled-content-color: var(--spectrum-gray-400); + --spectrum-disabled-static-white-content-color: var( + --spectrum-transparent-white-400 + ); + --spectrum-disabled-static-black-content-color: var( + --spectrum-transparent-black-400 + ); + --spectrum-disabled-border-color: var(--spectrum-gray-300); + --spectrum-disabled-static-white-border-color: var( + --spectrum-transparent-white-300 + ); + --spectrum-disabled-static-black-border-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-negative-border-color-default: var(--spectrum-negative-color-900); + --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover: var( + --spectrum-negative-border-color-down + ); + --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-title-color: var(--spectrum-gray-900); + --spectrum-drop-shadow-emphasized-default-color: var( + --spectrum-drop-shadow-color-100 + ); + --spectrum-drop-shadow-emphasized-hover-color: var( + --spectrum-drop-shadow-color-200 + ); + --spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); + --spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300); + --spectrum-static-black-text-color: var(--spectrum-black); + --spectrum-static-white-text-color: var(--spectrum-white); + --spectrum-track-color: var(--spectrum-gray-300); + --spectrum-static-black-track-color: var(--spectrum-transparent-black-300); + --spectrum-static-white-track-color: var(--spectrum-transparent-white-300); + --spectrum-static-black-track-indicator-color: var( + --spectrum-transparent-black-900 + ); + --spectrum-static-white-track-indicator-color: var( + --spectrum-transparent-white-900 + ); + --spectrum-swatch-border-color: var(--spectrum-gray-900); + --spectrum-swatch-border-opacity: 0.51; + --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); + --spectrum-swatch-disabled-icon-border-opacity: 0.51; + --spectrum-thumbnail-border-color: var(--spectrum-gray-800); + --spectrum-thumbnail-border-opacity: 0.1; + --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); + --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); + --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); + --spectrum-color-area-border-color: var(--spectrum-gray-900); + --spectrum-color-area-border-opacity: 0.1; + --spectrum-color-slider-border-color: var(--spectrum-gray-900); + --spectrum-color-slider-border-opacity: 0.1; + --spectrum-color-loupe-drop-shadow-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); + --spectrum-color-loupe-outer-border: var(--spectrum-white); + --spectrum-card-selection-background-color: var(--spectrum-gray-100); + --spectrum-card-selection-background-color-opacity: 0.95; + --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity: 0.1; + --spectrum-drop-zone-background-color-opacity-filled: 0.3; + --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); + --spectrum-color-handle-inner-border-color: var(--spectrum-black); + --spectrum-color-handle-inner-border-opacity: 0.42; + --spectrum-color-handle-outer-border-color: var(--spectrum-black); + --spectrum-color-handle-outer-border-opacity: var( + --spectrum-color-handle-inner-border-opacity + ); + --spectrum-color-handle-drop-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-floating-action-button-drop-shadow-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-floating-action-button-shadow-color: var( + --spectrum-floating-action-button-drop-shadow-color + ); + --spectrum-table-row-hover-color: var(--spectrum-gray-900); + --spectrum-table-row-hover-opacity: 0.07; + --spectrum-table-selected-row-background-color: var( + --spectrum-informative-background-color-default + ); + --spectrum-table-selected-row-background-opacity: 0.1; + --spectrum-table-selected-row-background-color-non-emphasized: var( + --spectrum-neutral-background-color-selected-default + ); + --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; + --spectrum-table-row-down-opacity: 0.1; + --spectrum-table-selected-row-background-opacity-hover: 0.15; + --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; + --spectrum-black-rgb: 0, 0, 0; + --spectrum-black: rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-1000-rgb: 0, 0, 0; + --spectrum-transparent-black-1000: rgba( + var(--spectrum-transparent-black-1000-rgb) + ); + --spectrum-icon-color-inverse: var(--spectrum-gray-50); + --spectrum-icon-color-primary-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-asterisk-icon-size-75: 8px; + --spectrum-radio-button-selection-indicator: 4px; + --spectrum-field-label-top-margin-small: 0px; + --spectrum-field-label-to-component: 0px; + --spectrum-help-text-to-component: 0px; + --spectrum-status-light-dot-size-small: 8px; + --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; + --spectrum-action-button-edge-to-hold-icon-small: 3px; + --spectrum-button-minimum-width-multiplier: 2.25; + --spectrum-divider-thickness-small: 1px; + --spectrum-divider-thickness-medium: 2px; + --spectrum-divider-thickness-large: 4px; + --spectrum-swatch-rectangle-width-multiplier: 2; + --spectrum-swatch-slash-thickness-extra-small: 2px; + --spectrum-swatch-slash-thickness-small: 3px; + --spectrum-swatch-slash-thickness-medium: 4px; + --spectrum-swatch-slash-thickness-large: 5px; + --spectrum-progress-bar-minimum-width: 48px; + --spectrum-progress-bar-maximum-width: 768px; + --spectrum-meter-minimum-width: 48px; + --spectrum-meter-maximum-width: 768px; + --spectrum-meter-default-width: var(--spectrum-meter-width); + --spectrum-in-line-alert-minimum-width: 240px; + --spectrum-popover-tip-width: 16px; + --spectrum-popover-tip-height: 8px; + --spectrum-menu-item-label-to-description: 1px; + --spectrum-menu-item-section-divider-height: 8px; + --spectrum-slider-track-thickness: 2px; + --spectrum-slider-handle-gap: 4px; + --spectrum-picker-minimum-width-multiplier: 2; + --spectrum-picker-border-width: var(--spectrum-border-width-100); + --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclosure-icon-quiet + ); + --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; + --spectrum-text-field-minimum-width-multiplier: 1.5; + --spectrum-combo-box-minimum-width-multiplier: 2.5; + --spectrum-combo-box-quiet-minimum-width-multiplier: 2; + --spectrum-combo-box-visual-to-field-button-quiet: 0px; + --spectrum-alert-dialog-minimum-width: 288px; + --spectrum-alert-dialog-maximum-width: 480px; + --spectrum-contextual-help-minimum-width: 268px; + --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text: 0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; + --spectrum-alert-banner-to-top-workflow-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-to-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --spectrum-color-area-border-width: var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding: var( + --spectrum-corner-radius-medium-size-small + ); + --spectrum-color-wheel-color-area-margin: 12px; + --spectrum-color-slider-border-width: 1px; + --spectrum-color-slider-border-rounding: var( + --spectrum-corner-radius-medium-size-small + ); + --spectrum-floating-action-button-drop-shadow-blur: 12px; + --spectrum-floating-action-button-drop-shadow-y: 4px; + --spectrum-illustrated-message-maximum-width: 380px; + --spectrum-search-field-minimum-width-multiplier: 3; + --spectrum-color-loupe-height: 64px; + --spectrum-color-loupe-width: 48px; + --spectrum-color-loupe-bottom-to-color-handle: 12px; + --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); + --spectrum-color-loupe-inner-border-width: 1px; + --spectrum-color-loupe-drop-shadow-y: 2px; + --spectrum-color-loupe-drop-shadow-blur: 8px; + --spectrum-card-minimum-width: 100px; + --spectrum-card-preview-minimum-height: 130px; + --spectrum-card-selection-background-size: 40px; + --spectrum-drop-zone-width: 428px; + --spectrum-drop-zone-content-maximum-width: var( + --spectrum-illustrated-message-maximum-width + ); + --spectrum-drop-zone-border-dash-length: 8px; + --spectrum-drop-zone-border-dash-gap: 4px; + --spectrum-drop-zone-title-size: var( + --spectrum-illustrated-message-title-size + ); + --spectrum-drop-zone-cjk-title-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --spectrum-drop-zone-body-size: var(--spectrum-illustrated-message-body-size); + --spectrum-accordion-top-to-text-compact-small: 2px; + --spectrum-accordion-top-to-text-compact-medium: 4px; + --spectrum-accordion-disclosure-indicator-to-text: 0px; + --spectrum-accordion-edge-to-disclosure-indicator: 0px; + --spectrum-accordion-edge-to-text: 0px; + --spectrum-accordion-focus-indicator-gap: 0px; + --spectrum-color-handle-border-width: var(--spectrum-border-width-200); + --spectrum-color-handle-inner-border-width: 1px; + --spectrum-color-handle-outer-border-width: 1px; + --spectrum-color-handle-drop-shadow-x: 0; + --spectrum-color-handle-drop-shadow-y: 0; + --spectrum-color-handle-drop-shadow-blur: 0; + --spectrum-table-row-height-small-compact: var( + --spectrum-component-height-75 + ); + --spectrum-table-row-height-medium-compact: var( + --spectrum-component-height-100 + ); + --spectrum-table-row-height-large-compact: var( + --spectrum-component-height-200 + ); + --spectrum-table-row-height-extra-large-compact: var( + --spectrum-component-height-300 + ); + --spectrum-table-row-top-to-text-small-compact: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-table-row-top-to-text-medium-compact: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-table-row-top-to-text-large-compact: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-table-row-top-to-text-extra-large-compact: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-table-row-bottom-to-text-small-compact: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-table-row-bottom-to-text-medium-compact: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-table-row-bottom-to-text-large-compact: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-table-row-bottom-to-text-extra-large-compact: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-table-edge-to-content: 16px; + --spectrum-table-border-divider-width: 1px; + --spectrum-tab-item-height-small: var(--spectrum-component-height-200); + --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); + --spectrum-tab-item-height-large: var(--spectrum-component-height-400); + --spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500); + --spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75); + --spectrum-tab-item-compact-height-medium: var( + --spectrum-component-height-100 + ); + --spectrum-tab-item-compact-height-large: var( + --spectrum-component-height-200 + ); + --spectrum-tab-item-compact-height-extra-large: var( + --spectrum-component-height-300 + ); + --spectrum-tab-item-start-to-edge-quiet: 0px; + --spectrum-in-field-button-width-stacked-small: 20px; + --spectrum-in-field-button-width-stacked-medium: 28px; + --spectrum-in-field-button-width-stacked-large: 36px; + --spectrum-in-field-button-width-stacked-extra-large: 44px; + --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; + --spectrum-in-field-button-edge-to-fill: 0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --spectrum-corner-radius-0: 0px; + --spectrum-corner-radius-75: 4px; + --spectrum-corner-radius-100: 8px; + --spectrum-corner-radius-200: 10px; + --spectrum-corner-radius-300: 6px; + --spectrum-corner-radius-400: 7px; + --spectrum-corner-radius-500: 8px; + --spectrum-corner-radius-600: 9px; + --spectrum-corner-radius-700: 10px; + --spectrum-corner-radius-800: 16px; + --spectrum-corner-radius-1000: 0.5; + --spectrum-corner-radius-none: var(--spectrum-corner-radius-0); + --spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100); + --spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500); + --spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700); + --spectrum-corner-radius-extra-large-default: var( + --spectrum-corner-radius-800 + ); + --spectrum-corner-radius-full: var(--spectrum-corner-radius-1000); + --spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75); + --spectrum-corner-radius-small-size-medium: var(--spectrum-corner-radius-100); + --spectrum-corner-radius-small-size-large: var(--spectrum-corner-radius-200); + --spectrum-corner-radius-small-size-extra-large: var( + --spectrum-corner-radius-300 + ); + --spectrum-corner-radius-medium-size-extra-small: var( + --spectrum-corner-radius-300 + ); + --spectrum-corner-radius-medium-size-small: var(--spectrum-corner-radius-400); + --spectrum-corner-radius-medium-size-medium: var( + --spectrum-corner-radius-500 + ); + --spectrum-corner-radius-medium-size-large: var(--spectrum-corner-radius-600); + --spectrum-corner-radius-medium-size-extra-large: var( + --spectrum-corner-radius-700 + ); + --spectrum-drop-shadow-x: 0px; + --spectrum-android-elevation: 2dp; + --spectrum-spacing-50: 2px; + --spectrum-spacing-75: 4px; + --spectrum-spacing-100: 8px; + --spectrum-spacing-200: 12px; + --spectrum-spacing-300: 16px; + --spectrum-spacing-400: 24px; + --spectrum-spacing-500: 32px; + --spectrum-spacing-600: 40px; + --spectrum-spacing-700: 48px; + --spectrum-spacing-800: 64px; + --spectrum-spacing-900: 80px; + --spectrum-spacing-1000: 96px; + --spectrum-focus-indicator-thickness: 2px; + --spectrum-focus-indicator-gap: 2px; + --spectrum-border-width-100: 1px; + --spectrum-border-width-200: 2px; + --spectrum-border-width-400: 4px; + --spectrum-field-edge-to-text-quiet: 0px; + --spectrum-field-edge-to-visual-quiet: 0px; + --spectrum-field-edge-to-border-quiet: 0px; + --spectrum-field-edge-to-alert-icon-quiet: 0px; + --spectrum-field-edge-to-validation-icon-quiet: 0px; + --spectrum-text-underline-thickness: 1px; + --spectrum-text-underline-gap: 1px; + --spectrum-accent-color-100: var(--spectrum-blue-100); + --spectrum-accent-color-200: var(--spectrum-blue-200); + --spectrum-accent-color-300: var(--spectrum-blue-300); + --spectrum-accent-color-400: var(--spectrum-blue-400); + --spectrum-accent-color-500: var(--spectrum-blue-500); + --spectrum-accent-color-600: var(--spectrum-blue-600); + --spectrum-accent-color-700: var(--spectrum-blue-700); + --spectrum-accent-color-800: var(--spectrum-blue-800); + --spectrum-accent-color-900: var(--spectrum-blue-900); + --spectrum-accent-color-1000: var(--spectrum-blue-1000); + --spectrum-accent-color-1100: var(--spectrum-blue-1100); + --spectrum-accent-color-1200: var(--spectrum-blue-1200); + --spectrum-accent-color-1300: var(--spectrum-blue-1300); + --spectrum-accent-color-1400: var(--spectrum-blue-1400); + --spectrum-accent-color-1500: var(--spectrum-blue-1500); + --spectrum-accent-color-1600: var(--spectrum-blue-1600); + --spectrum-informative-color-100: var(--spectrum-blue-100); + --spectrum-informative-color-200: var(--spectrum-blue-200); + --spectrum-informative-color-300: var(--spectrum-blue-300); + --spectrum-informative-color-400: var(--spectrum-blue-400); + --spectrum-informative-color-500: var(--spectrum-blue-500); + --spectrum-informative-color-600: var(--spectrum-blue-600); + --spectrum-informative-color-700: var(--spectrum-blue-700); + --spectrum-informative-color-800: var(--spectrum-blue-800); + --spectrum-informative-color-900: var(--spectrum-blue-900); + --spectrum-informative-color-1000: var(--spectrum-blue-1000); + --spectrum-informative-color-1100: var(--spectrum-blue-1100); + --spectrum-informative-color-1200: var(--spectrum-blue-1200); + --spectrum-informative-color-1300: var(--spectrum-blue-1300); + --spectrum-informative-color-1400: var(--spectrum-blue-1400); + --spectrum-informative-color-1500: var(--spectrum-blue-1500); + --spectrum-informative-color-1600: var(--spectrum-blue-1600); + --spectrum-negative-color-100: var(--spectrum-red-100); + --spectrum-negative-color-200: var(--spectrum-red-200); + --spectrum-negative-color-300: var(--spectrum-red-300); + --spectrum-negative-color-400: var(--spectrum-red-400); + --spectrum-negative-color-500: var(--spectrum-red-500); + --spectrum-negative-color-600: var(--spectrum-red-600); + --spectrum-negative-color-700: var(--spectrum-red-700); + --spectrum-negative-color-800: var(--spectrum-red-800); + --spectrum-negative-color-900: var(--spectrum-red-900); + --spectrum-negative-color-1000: var(--spectrum-red-1000); + --spectrum-negative-color-1100: var(--spectrum-red-1100); + --spectrum-negative-color-1200: var(--spectrum-red-1200); + --spectrum-negative-color-1300: var(--spectrum-red-1300); + --spectrum-negative-color-1400: var(--spectrum-red-1400); + --spectrum-negative-color-1500: var(--spectrum-red-1500); + --spectrum-negative-color-1600: var(--spectrum-red-1600); + --spectrum-notice-color-100: var(--spectrum-orange-100); + --spectrum-notice-color-200: var(--spectrum-orange-200); + --spectrum-notice-color-300: var(--spectrum-orange-300); + --spectrum-notice-color-400: var(--spectrum-orange-400); + --spectrum-notice-color-500: var(--spectrum-orange-500); + --spectrum-notice-color-600: var(--spectrum-orange-600); + --spectrum-notice-color-700: var(--spectrum-orange-700); + --spectrum-notice-color-800: var(--spectrum-orange-800); + --spectrum-notice-color-900: var(--spectrum-orange-900); + --spectrum-notice-color-1000: var(--spectrum-orange-1000); + --spectrum-notice-color-1100: var(--spectrum-orange-1100); + --spectrum-notice-color-1200: var(--spectrum-orange-1200); + --spectrum-notice-color-1300: var(--spectrum-orange-1300); + --spectrum-notice-color-1400: var(--spectrum-orange-1400); + --spectrum-notice-color-1500: var(--spectrum-orange-1500); + --spectrum-notice-color-1600: var(--spectrum-orange-1600); + --spectrum-positive-color-100: var(--spectrum-green-100); + --spectrum-positive-color-200: var(--spectrum-green-200); + --spectrum-positive-color-300: var(--spectrum-green-300); + --spectrum-positive-color-400: var(--spectrum-green-400); + --spectrum-positive-color-500: var(--spectrum-green-500); + --spectrum-positive-color-600: var(--spectrum-green-600); + --spectrum-positive-color-700: var(--spectrum-green-700); + --spectrum-positive-color-800: var(--spectrum-green-800); + --spectrum-positive-color-900: var(--spectrum-green-900); + --spectrum-positive-color-1000: var(--spectrum-green-1000); + --spectrum-positive-color-1100: var(--spectrum-green-1100); + --spectrum-positive-color-1200: var(--spectrum-green-1200); + --spectrum-positive-color-1300: var(--spectrum-green-1300); + --spectrum-positive-color-1400: var(--spectrum-green-1400); + --spectrum-positive-color-1500: var(--spectrum-green-1500); + --spectrum-positive-color-1600: var(--spectrum-green-1600); + --spectrum-negative-subdued-background-color-hover: var( + --spectrum-negative-color-300 + ); + --spectrum-negative-subdued-background-color-down: var( + --spectrum-negative-color-300 + ); + --spectrum-negative-subdued-background-color-key-focus: var( + --spectrum-negative-color-300 + ); + --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); + --spectrum-sans-serif-font-family: adobe clean; + --spectrum-serif-font-family: adobe clean serif; + --spectrum-cjk-font-family: adobe clean han; + --spectrum-light-font-weight: 300; + --spectrum-regular-font-weight: 400; + --spectrum-medium-font-weight: 500; + --spectrum-bold-font-weight: 700; + --spectrum-extra-bold-font-weight: 800; + --spectrum-black-font-weight: 900; + --spectrum-italic-font-style: italic; + --spectrum-default-font-style: normal; + --spectrum-line-height-100: 1.3; + --spectrum-line-height-200: 1.5; + --spectrum-cjk-line-height-100: 1.5; + --spectrum-cjk-line-height-200: 1.7; + --spectrum-cjk-letter-spacing: 0.05em; + --spectrum-heading-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-heading-sans-serif-light-font-weight: var( + --spectrum-light-font-weight + ); + --spectrum-heading-sans-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-light-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-light-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-heading-cjk-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-light-emphasized-font-weight: var( + --spectrum-light-font-weight + ); + --spectrum-heading-sans-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-cjk-light-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-light-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-heading-cjk-light-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); + --spectrum-heading-size-xl: var(--spectrum-font-size-900); + --spectrum-heading-size-l: var(--spectrum-font-size-700); + --spectrum-heading-size-m: var(--spectrum-font-size-500); + --spectrum-heading-size-s: var(--spectrum-font-size-300); + --spectrum-heading-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); + --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); + --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); + --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); + --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-line-height: var(--spectrum-line-height-100); + --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier: 0.88888889; + --spectrum-heading-margin-bottom-multiplier: 0.25; + --spectrum-heading-color: var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-body-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-serif-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-body-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-cjk-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-body-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-body-size-xxxl: var(--spectrum-font-size-600); + --spectrum-body-size-xxl: var(--spectrum-font-size-500); + --spectrum-body-size-xl: var(--spectrum-font-size-400); + --spectrum-body-size-l: var(--spectrum-font-size-300); + --spectrum-body-size-m: var(--spectrum-font-size-200); + --spectrum-body-size-s: var(--spectrum-font-size-100); + --spectrum-body-size-xs: var(--spectrum-font-size-75); + --spectrum-body-line-height: var(--spectrum-line-height-200); + --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier: 0.75; + --spectrum-body-color: var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-light-strong-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-cjk-light-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-detail-cjk-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-detail-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-cjk-light-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-detail-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-light-strong-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-detail-cjk-light-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-size-xl: var(--spectrum-font-size-200); + --spectrum-detail-size-l: var(--spectrum-font-size-100); + --spectrum-detail-size-m: var(--spectrum-font-size-75); + --spectrum-detail-size-s: var(--spectrum-font-size-50); + --spectrum-detail-line-height: var(--spectrum-line-height-100); + --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-detail-margin-top-multiplier: 0.88888889; + --spectrum-detail-margin-bottom-multiplier: 0.25; + --spectrum-detail-letter-spacing: 0.06em; + --spectrum-detail-sans-serif-text-transform: uppercase; + --spectrum-detail-serif-text-transform: uppercase; + --spectrum-detail-color: var(--spectrum-gray-900); + --spectrum-code-font-family: source code pro; + --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); + --spectrum-code-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-code-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-code-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-code-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-code-size-xl: var(--spectrum-font-size-400); + --spectrum-code-size-l: var(--spectrum-font-size-300); + --spectrum-code-size-m: var(--spectrum-font-size-200); + --spectrum-code-size-s: var(--spectrum-font-size-100); + --spectrum-code-size-xs: var(--spectrum-font-size-75); + --spectrum-code-line-height: var(--spectrum-line-height-200); + --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-code-color: var(--spectrum-gray-800); + --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0: 0ms; + --spectrum-animation-duration-100: 130ms; + --spectrum-animation-duration-200: 160ms; + --spectrum-animation-duration-300: 190ms; + --spectrum-animation-duration-400: 220ms; + --spectrum-animation-duration-500: 250ms; + --spectrum-animation-duration-600: 300ms; + --spectrum-animation-duration-700: 350ms; + --spectrum-animation-duration-800: 400ms; + --spectrum-animation-duration-900: 450ms; + --spectrum-animation-duration-1000: 500ms; + --spectrum-animation-duration-2000: 1000ms; + --spectrum-animation-duration-4000: 2000ms; + --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); + --spectrum-sans-font-family-stack: adobe-clean, + var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, + blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", + "Lucida Grande", sans-serif; + --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); + --spectrum-serif-font-family-stack: adobe-clean-serif, + var(--spectrum-serif-font-family), "Source Serif Pro", georgia, serif; + --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', monaco, monospace; + --spectrum-code-font-family-stack: "Source Code Pro", monaco, monospace; - --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", + -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, + "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", + -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, + "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-font-style: var(--spectrum-default-font-style); - --spectrum-font-size: var(--spectrum-font-size-100); + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-font-style: var(--spectrum-default-font-style); + --spectrum-font-size: var(--spectrum-font-size-100); - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, + var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font: var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; + --spectrum-docs-static-white-background-color: rgba( + var(--spectrum-docs-static-white-background-color-rgb) + ); + --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; + --spectrum-docs-static-black-background-color: rgba( + var(--spectrum-docs-static-black-background-color-rgb) + ); - --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); + --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } :host, :root { - --spectrum-workflow-icon-size-50: 16px; - --spectrum-workflow-icon-size-75: 18px; - --spectrum-workflow-icon-size-100: 24px; - --spectrum-workflow-icon-size-200: 28px; - --spectrum-workflow-icon-size-300: 30px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-s - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-accordion-top-to-text-spacious-small: 12px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-text-to-visual-50: 7px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-visual-400: 11px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 15px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 21px; - --spectrum-component-pill-edge-to-visual-300: 28px; - --spectrum-component-pill-edge-to-visual-only-75: 6px; - --spectrum-component-pill-edge-to-visual-only-100: 8px; - --spectrum-component-pill-edge-to-visual-only-200: 11px; - --spectrum-component-pill-edge-to-visual-only-300: 15px; - --spectrum-component-pill-edge-to-text-75: 17px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 24px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 9px; - --spectrum-component-edge-to-visual-75: 11px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 15px; - --spectrum-component-edge-to-visual-300: 20px; - --spectrum-component-edge-to-visual-only-50: 5px; - --spectrum-component-edge-to-visual-only-75: 6px; - --spectrum-component-edge-to-visual-only-100: 8px; - --spectrum-component-edge-to-visual-only-200: 11px; - --spectrum-component-edge-to-visual-only-300: 15px; - --spectrum-component-edge-to-text-50: 11px; - --spectrum-component-edge-to-text-75: 13px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 18px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 5px; - --spectrum-component-top-to-workflow-icon-75: 6px; - --spectrum-component-top-to-workflow-icon-100: 8px; - --spectrum-component-top-to-workflow-icon-200: 11px; - --spectrum-component-top-to-workflow-icon-300: 15px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; + --spectrum-workflow-icon-size-50: 16px; + --spectrum-workflow-icon-size-75: 18px; + --spectrum-workflow-icon-size-100: 24px; + --spectrum-workflow-icon-size-200: 28px; + --spectrum-workflow-icon-size-300: 30px; + --spectrum-arrow-icon-size-75: 12px; + --spectrum-arrow-icon-size-100: 14px; + --spectrum-arrow-icon-size-200: 16px; + --spectrum-arrow-icon-size-300: 16px; + --spectrum-arrow-icon-size-400: 18px; + --spectrum-arrow-icon-size-500: 22px; + --spectrum-arrow-icon-size-600: 24px; + --spectrum-asterisk-icon-size-100: 10px; + --spectrum-asterisk-icon-size-200: 12px; + --spectrum-asterisk-icon-size-300: 12px; + --spectrum-checkmark-icon-size-50: 12px; + --spectrum-checkmark-icon-size-75: 12px; + --spectrum-checkmark-icon-size-100: 14px; + --spectrum-checkmark-icon-size-200: 14px; + --spectrum-checkmark-icon-size-300: 16px; + --spectrum-checkmark-icon-size-400: 18px; + --spectrum-checkmark-icon-size-500: 20px; + --spectrum-checkmark-icon-size-600: 24px; + --spectrum-chevron-icon-size-50: 8px; + --spectrum-chevron-icon-size-75: 12px; + --spectrum-chevron-icon-size-100: 14px; + --spectrum-chevron-icon-size-200: 14px; + --spectrum-chevron-icon-size-300: 16px; + --spectrum-chevron-icon-size-400: 18px; + --spectrum-chevron-icon-size-500: 20px; + --spectrum-chevron-icon-size-600: 24px; + --spectrum-corner-triangle-icon-size-75: 6px; + --spectrum-corner-triangle-icon-size-100: 7px; + --spectrum-corner-triangle-icon-size-200: 8px; + --spectrum-corner-triangle-icon-size-300: 8px; + --spectrum-cross-icon-size-75: 10px; + --spectrum-cross-icon-size-100: 10px; + --spectrum-cross-icon-size-200: 12px; + --spectrum-cross-icon-size-300: 14px; + --spectrum-cross-icon-size-400: 16px; + --spectrum-cross-icon-size-500: 16px; + --spectrum-cross-icon-size-600: 18px; + --spectrum-dash-icon-size-50: 10px; + --spectrum-dash-icon-size-75: 10px; + --spectrum-dash-icon-size-100: 12px; + --spectrum-dash-icon-size-200: 14px; + --spectrum-dash-icon-size-300: 16px; + --spectrum-dash-icon-size-400: 18px; + --spectrum-dash-icon-size-500: 20px; + --spectrum-dash-icon-size-600: 22px; + --spectrum-checkbox-control-size-small: 16px; + --spectrum-checkbox-control-size-medium: 18px; + --spectrum-checkbox-control-size-large: 20px; + --spectrum-checkbox-control-size-extra-large: 22px; + --spectrum-checkbox-top-to-control-small: 7px; + --spectrum-checkbox-top-to-control-medium: 11px; + --spectrum-checkbox-top-to-control-large: 15px; + --spectrum-checkbox-top-to-control-extra-large: 19px; + --spectrum-switch-control-width-small: 32px; + --spectrum-switch-control-width-medium: 36px; + --spectrum-switch-control-width-large: 41px; + --spectrum-switch-control-width-extra-large: 46px; + --spectrum-switch-control-height-small: 16px; + --spectrum-switch-control-height-medium: 18px; + --spectrum-switch-control-height-large: 20px; + --spectrum-switch-control-height-extra-large: 22px; + --spectrum-switch-top-to-control-small: 7px; + --spectrum-switch-top-to-control-medium: 11px; + --spectrum-switch-top-to-control-large: 15px; + --spectrum-switch-top-to-control-extra-large: 19px; + --spectrum-radio-button-control-size-small: 16px; + --spectrum-radio-button-control-size-medium: 18px; + --spectrum-radio-button-control-size-large: 20px; + --spectrum-radio-button-control-size-extra-large: 22px; + --spectrum-radio-button-top-to-control-small: 7px; + --spectrum-radio-button-top-to-control-medium: 11px; + --spectrum-radio-button-top-to-control-large: 15px; + --spectrum-radio-button-top-to-control-extra-large: 19px; + --spectrum-field-label-text-to-asterisk-small: 5px; + --spectrum-field-label-text-to-asterisk-medium: 5px; + --spectrum-field-label-text-to-asterisk-large: 6px; + --spectrum-field-label-text-to-asterisk-extra-large: 6px; + --spectrum-field-label-top-to-asterisk-small: 11px; + --spectrum-field-label-top-to-asterisk-medium: 15px; + --spectrum-field-label-top-to-asterisk-large: 19px; + --spectrum-field-label-top-to-asterisk-extra-large: 24px; + --spectrum-field-label-top-margin-medium: 5px; + --spectrum-field-label-top-margin-large: 6px; + --spectrum-field-label-top-margin-extra-large: 6px; + --spectrum-field-label-to-component-quiet-small: -10px; + --spectrum-field-label-to-component-quiet-medium: -10px; + --spectrum-field-label-to-component-quiet-large: -15px; + --spectrum-field-label-to-component-quiet-extra-large: -19px; + --spectrum-help-text-top-to-workflow-icon-small: 5px; + --spectrum-help-text-top-to-workflow-icon-medium: 4px; + --spectrum-help-text-top-to-workflow-icon-large: 8px; + --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; + --spectrum-status-light-dot-size-medium: 10px; + --spectrum-status-light-dot-size-large: 12px; + --spectrum-status-light-dot-size-extra-large: 12px; + --spectrum-status-light-top-to-dot-small: 11px; + --spectrum-status-light-top-to-dot-medium: 15px; + --spectrum-status-light-top-to-dot-large: 19px; + --spectrum-status-light-top-to-dot-extra-large: 24px; + --spectrum-action-button-edge-to-hold-icon-medium: 5px; + --spectrum-action-button-edge-to-hold-icon-large: 6px; + --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; + --spectrum-tooltip-tip-width: 10px; + --spectrum-tooltip-tip-height: 5px; + --spectrum-tooltip-maximum-width: 200px; + --spectrum-progress-circle-size-small: 20px; + --spectrum-progress-circle-size-medium: 40px; + --spectrum-progress-circle-size-large: 80px; + --spectrum-progress-circle-thickness-small: 3px; + --spectrum-progress-circle-thickness-medium: 4px; + --spectrum-progress-circle-thickness-large: 5px; + --spectrum-toast-height: 56px; + --spectrum-toast-maximum-width: 420px; + --spectrum-toast-top-to-workflow-icon: 17px; + --spectrum-toast-top-to-text: 16px; + --spectrum-toast-bottom-to-text: 19px; + --spectrum-action-bar-height: 56px; + --spectrum-action-bar-top-to-item-counter: 16px; + --spectrum-swatch-size-extra-small: 20px; + --spectrum-swatch-size-small: 30px; + --spectrum-swatch-size-medium: 40px; + --spectrum-swatch-size-large: 50px; + --spectrum-progress-bar-thickness-small: 5px; + --spectrum-progress-bar-thickness-medium: 8px; + --spectrum-progress-bar-thickness-large: 10px; + --spectrum-progress-bar-thickness-extra-large: 13px; + --spectrum-meter-width: 240px; + --spectrum-meter-thickness-small: 5px; + --spectrum-meter-thickness-large: 8px; + --spectrum-tag-top-to-avatar-small: 5px; + --spectrum-tag-top-to-avatar-medium: 7px; + --spectrum-tag-top-to-avatar-large: 11px; + --spectrum-tag-top-to-cross-icon-small: 10px; + --spectrum-tag-top-to-cross-icon-medium: 15px; + --spectrum-tag-top-to-cross-icon-large: 19px; + --spectrum-popover-top-to-content-area: 5px; + --spectrum-menu-item-edge-to-content-not-selected-small: 24px; + --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; + --spectrum-menu-item-edge-to-content-not-selected-large: 47px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; + --spectrum-menu-item-top-to-disclosure-icon-small: 9px; + --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; + --spectrum-menu-item-top-to-disclosure-icon-large: 17px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; + --spectrum-menu-item-top-to-selected-icon-small: 9px; + --spectrum-menu-item-top-to-selected-icon-medium: 13px; + --spectrum-menu-item-top-to-selected-icon-large: 17px; + --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; + --spectrum-slider-control-height-small: 18px; + --spectrum-slider-control-height-medium: 20px; + --spectrum-slider-control-height-large: 22px; + --spectrum-slider-control-height-extra-large: 26px; + --spectrum-slider-handle-size-small: 18px; + --spectrum-slider-handle-size-medium: 20px; + --spectrum-slider-handle-size-large: 22px; + --spectrum-slider-handle-size-extra-large: 26px; + --spectrum-slider-handle-border-width-down-small: 7px; + --spectrum-slider-handle-border-width-down-medium: 8px; + --spectrum-slider-handle-border-width-down-large: 9px; + --spectrum-slider-handle-border-width-down-extra-large: 11px; + --spectrum-slider-bottom-to-handle-small: 6px; + --spectrum-slider-bottom-to-handle-medium: 10px; + --spectrum-slider-bottom-to-handle-large: 14px; + --spectrum-slider-bottom-to-handle-extra-large: 17px; + --spectrum-slider-control-to-field-label-small: 6px; + --spectrum-slider-control-to-field-label-medium: 10px; + --spectrum-slider-control-to-field-label-large: 14px; + --spectrum-slider-control-to-field-label-extra-large: 17px; + --spectrum-picker-visual-to-disclosure-icon-small: 9px; + --spectrum-picker-visual-to-disclosure-icon-medium: 10px; + --spectrum-picker-visual-to-disclosure-icon-large: 11px; + --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; + --spectrum-text-area-minimum-width: 140px; + --spectrum-text-area-minimum-height: 70px; + --spectrum-combo-box-visual-to-field-button-small: 9px; + --spectrum-combo-box-visual-to-field-button-medium: 10px; + --spectrum-combo-box-visual-to-field-button-large: 11px; + --spectrum-combo-box-visual-to-field-button-extra-large: 13px; + --spectrum-thumbnail-size-50: 20px; + --spectrum-thumbnail-size-75: 22px; + --spectrum-thumbnail-size-100: 26px; + --spectrum-thumbnail-size-200: 28px; + --spectrum-thumbnail-size-300: 32px; + --spectrum-thumbnail-size-400: 36px; + --spectrum-thumbnail-size-500: 40px; + --spectrum-thumbnail-size-600: 46px; + --spectrum-thumbnail-size-700: 50px; + --spectrum-thumbnail-size-800: 55px; + --spectrum-thumbnail-size-900: 62px; + --spectrum-thumbnail-size-1000: 70px; + --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); + --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); + --spectrum-opacity-checkerboard-square-size: 10px; + --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); + --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); + --spectrum-breadcrumbs-height-multiline: 84px; + --spectrum-breadcrumbs-top-to-text: 17px; + --spectrum-breadcrumbs-top-to-text-compact: 16px; + --spectrum-breadcrumbs-top-to-text-multiline: 15px; + --spectrum-breadcrumbs-bottom-to-text: 19px; + --spectrum-breadcrumbs-bottom-to-text-compact: 19px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; + --spectrum-breadcrumbs-start-edge-to-text: 9px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; + --spectrum-breadcrumbs-top-to-separator-icon: 25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; + --spectrum-breadcrumbs-top-to-truncated-menu: 10px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; + --spectrum-avatar-size-50: 20px; + --spectrum-avatar-size-75: 22px; + --spectrum-avatar-size-100: 26px; + --spectrum-avatar-size-200: 28px; + --spectrum-avatar-size-300: 32px; + --spectrum-avatar-size-400: 36px; + --spectrum-avatar-size-500: 40px; + --spectrum-avatar-size-600: 46px; + --spectrum-avatar-size-700: 50px; + --spectrum-alert-banner-minimum-height: 64px; + --spectrum-alert-banner-width: 680px; + --spectrum-alert-banner-top-to-workflow-icon: 21px; + --spectrum-alert-banner-top-to-text: 21px; + --spectrum-alert-banner-bottom-to-text: 22px; + --spectrum-rating-indicator-width: 22px; + --spectrum-rating-indicator-to-icon: 5px; + --spectrum-color-area-width: 240px; + --spectrum-color-area-minimum-width: 80px; + --spectrum-color-area-height: 240px; + --spectrum-color-area-minimum-height: 80px; + --spectrum-color-wheel-width: 240px; + --spectrum-color-wheel-minimum-width: 219px; + --spectrum-color-slider-length: 240px; + --spectrum-color-slider-minimum-length: 100px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-s + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); + --spectrum-coach-mark-width: 216px; + --spectrum-coach-mark-minimum-width: 216px; + --spectrum-coach-mark-maximum-width: 248px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; + --spectrum-coach-mark-media-height: 162px; + --spectrum-coach-mark-media-minimum-height: 121px; + --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); + --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); + --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); + --spectrum-accordion-top-to-text-regular-small: 7px; + --spectrum-accordion-small-top-to-text-spacious: 12px; + --spectrum-accordion-top-to-text-regular-medium: 9px; + --spectrum-accordion-top-to-text-spacious-medium: 14px; + --spectrum-accordion-top-to-text-compact-large: 7px; + --spectrum-accordion-top-to-text-regular-large: 12px; + --spectrum-accordion-top-to-text-spacious-large: 14px; + --spectrum-accordion-top-to-text-compact-extra-large: 7px; + --spectrum-accordion-top-to-text-regular-extra-large: 12px; + --spectrum-accordion-top-to-text-spacious-extra-large: 14px; + --spectrum-accordion-bottom-to-text-compact-small: 4px; + --spectrum-accordion-bottom-to-text-regular-small: 9px; + --spectrum-accordion-bottom-to-text-spacious-small: 14px; + --spectrum-accordion-bottom-to-text-compact-medium: 8px; + --spectrum-accordion-bottom-to-text-regular-medium: 13px; + --spectrum-accordion-bottom-to-text-spacious-medium: 18px; + --spectrum-accordion-bottom-to-text-compact-large: 9px; + --spectrum-accordion-bottom-to-text-regular-large: 14px; + --spectrum-accordion-bottom-to-text-spacious-large: 19px; + --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; + --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; + --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; + --spectrum-accordion-minimum-width: 250px; + --spectrum-accordion-content-area-top-to-content: 10px; + --spectrum-accordion-content-area-bottom-to-content: 20px; + --spectrum-color-handle-size: 20px; + --spectrum-color-handle-size-key-focus: 40px; + --spectrum-table-column-header-row-top-to-text-small: 10px; + --spectrum-table-column-header-row-top-to-text-medium: 9px; + --spectrum-table-column-header-row-top-to-text-large: 13px; + --spectrum-table-column-header-row-top-to-text-extra-large: 16px; + --spectrum-table-column-header-row-bottom-to-text-small: 11px; + --spectrum-table-column-header-row-bottom-to-text-medium: 10px; + --spectrum-table-column-header-row-bottom-to-text-large: 13px; + --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; + --spectrum-table-row-height-small-regular: 40px; + --spectrum-table-row-height-medium-regular: 50px; + --spectrum-table-row-height-large-regular: 60px; + --spectrum-table-row-height-extra-large-regular: 70px; + --spectrum-table-row-height-small-spacious: 50px; + --spectrum-table-row-height-medium-spacious: 60px; + --spectrum-table-row-height-large-spacious: 70px; + --spectrum-table-row-height-extra-large-spacious: 80px; + --spectrum-table-row-top-to-text-small-regular: 10px; + --spectrum-table-row-top-to-text-medium-regular: 14px; + --spectrum-table-row-top-to-text-large-regular: 18px; + --spectrum-table-row-top-to-text-extra-large-regular: 21px; + --spectrum-table-row-bottom-to-text-small-regular: 11px; + --spectrum-table-row-bottom-to-text-medium-regular: 15px; + --spectrum-table-row-bottom-to-text-large-regular: 18px; + --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; + --spectrum-table-row-top-to-text-small-spacious: 15px; + --spectrum-table-row-top-to-text-medium-spacious: 18px; + --spectrum-table-row-top-to-text-large-spacious: 23px; + --spectrum-table-row-top-to-text-extra-large-spacious: 26px; + --spectrum-table-row-bottom-to-text-small-spacious: 16px; + --spectrum-table-row-bottom-to-text-medium-spacious: 18px; + --spectrum-table-row-bottom-to-text-large-spacious: 23px; + --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; + --spectrum-table-checkbox-to-text: 30px; + --spectrum-table-header-row-checkbox-to-top-small: 14px; + --spectrum-table-header-row-checkbox-to-top-medium: 13px; + --spectrum-table-header-row-checkbox-to-top-large: 17px; + --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; + --spectrum-table-row-checkbox-to-top-small-compact: 9px; + --spectrum-table-row-checkbox-to-top-small-regular: 14px; + --spectrum-table-row-checkbox-to-top-small-spacious: 19px; + --spectrum-table-row-checkbox-to-top-medium-compact: 13px; + --spectrum-table-row-checkbox-to-top-medium-regular: 18px; + --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; + --spectrum-table-row-checkbox-to-top-large-compact: 17px; + --spectrum-table-row-checkbox-to-top-large-regular: 22px; + --spectrum-table-row-checkbox-to-top-large-spacious: 27px; + --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; + --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; + --spectrum-table-section-header-row-height-small: 30px; + --spectrum-table-section-header-row-height-medium: 40px; + --spectrum-table-section-header-row-height-large: 50px; + --spectrum-table-section-header-row-height-extra-large: 60px; + --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; + --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; + --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; + --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; + --spectrum-tab-item-to-tab-item-horizontal-small: 27px; + --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; + --spectrum-tab-item-to-tab-item-horizontal-large: 33px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; + --spectrum-tab-item-to-tab-item-vertical-small: 5px; + --spectrum-tab-item-to-tab-item-vertical-medium: 5px; + --spectrum-tab-item-to-tab-item-vertical-large: 6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; + --spectrum-tab-item-start-to-edge-small: 13px; + --spectrum-tab-item-start-to-edge-medium: 15px; + --spectrum-tab-item-start-to-edge-large: 17px; + --spectrum-tab-item-start-to-edge-extra-large: 19px; + --spectrum-tab-item-top-to-text-small: 14px; + --spectrum-tab-item-bottom-to-text-small: 15px; + --spectrum-tab-item-top-to-text-medium: 18px; + --spectrum-tab-item-bottom-to-text-medium: 19px; + --spectrum-tab-item-top-to-text-large: 22px; + --spectrum-tab-item-bottom-to-text-large: 22px; + --spectrum-tab-item-top-to-text-extra-large: 25px; + --spectrum-tab-item-bottom-to-text-extra-large: 25px; + --spectrum-tab-item-top-to-text-compact-small: 5px; + --spectrum-tab-item-bottom-to-text-compact-small: 6px; + --spectrum-tab-item-top-to-text-compact-medium: 9px; + --spectrum-tab-item-bottom-to-text-compact-medium: 10px; + --spectrum-tab-item-top-to-text-compact-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-large: 14px; + --spectrum-tab-item-top-to-text-compact-extra-large: 15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-small: 15px; + --spectrum-tab-item-top-to-workflow-icon-medium: 19px; + --spectrum-tab-item-top-to-workflow-icon-large: 23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; + --spectrum-tab-item-focus-indicator-gap-small: 9px; + --spectrum-tab-item-focus-indicator-gap-medium: 10px; + --spectrum-tab-item-focus-indicator-gap-large: 11px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; + --spectrum-side-navigation-width: 240px; + --spectrum-side-navigation-minimum-width: 200px; + --spectrum-side-navigation-maximum-width: 300px; + --spectrum-side-navigation-second-level-edge-to-text: 30px; + --spectrum-side-navigation-third-level-edge-to-text: 45px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; + --spectrum-side-navigation-item-to-item: 5px; + --spectrum-side-navigation-item-to-header: 30px; + --spectrum-side-navigation-header-to-item: 10px; + --spectrum-side-navigation-bottom-to-text: 10px; + --spectrum-tray-top-to-content-area: 5px; + --spectrum-accordion-top-to-text-spacious-small: 12px; + --spectrum-drop-shadow-y: 2px; + --spectrum-drop-shadow-blur: 6px; + --spectrum-text-to-visual-50: 7px; + --spectrum-text-to-visual-75: 7px; + --spectrum-text-to-visual-100: 8px; + --spectrum-text-to-visual-200: 9px; + --spectrum-text-to-visual-300: 10px; + --spectrum-text-to-visual-400: 11px; + --spectrum-text-to-control-75: 11px; + --spectrum-text-to-control-100: 13px; + --spectrum-text-to-control-200: 14px; + --spectrum-text-to-control-300: 16px; + --spectrum-component-height-50: 26px; + --spectrum-component-height-75: 30px; + --spectrum-component-height-100: 40px; + --spectrum-component-height-200: 50px; + --spectrum-component-height-300: 60px; + --spectrum-component-height-400: 70px; + --spectrum-component-height-500: 80px; + --spectrum-component-pill-edge-to-visual-75: 15px; + --spectrum-component-pill-edge-to-visual-100: 17px; + --spectrum-component-pill-edge-to-visual-200: 21px; + --spectrum-component-pill-edge-to-visual-300: 28px; + --spectrum-component-pill-edge-to-visual-only-75: 6px; + --spectrum-component-pill-edge-to-visual-only-100: 8px; + --spectrum-component-pill-edge-to-visual-only-200: 11px; + --spectrum-component-pill-edge-to-visual-only-300: 15px; + --spectrum-component-pill-edge-to-text-75: 17px; + --spectrum-component-pill-edge-to-text-100: 20px; + --spectrum-component-pill-edge-to-text-200: 24px; + --spectrum-component-pill-edge-to-text-300: 30px; + --spectrum-component-edge-to-visual-50: 9px; + --spectrum-component-edge-to-visual-75: 11px; + --spectrum-component-edge-to-visual-100: 12px; + --spectrum-component-edge-to-visual-200: 15px; + --spectrum-component-edge-to-visual-300: 20px; + --spectrum-component-edge-to-visual-only-50: 5px; + --spectrum-component-edge-to-visual-only-75: 6px; + --spectrum-component-edge-to-visual-only-100: 8px; + --spectrum-component-edge-to-visual-only-200: 11px; + --spectrum-component-edge-to-visual-only-300: 15px; + --spectrum-component-edge-to-text-50: 11px; + --spectrum-component-edge-to-text-75: 13px; + --spectrum-component-edge-to-text-100: 15px; + --spectrum-component-edge-to-text-200: 18px; + --spectrum-component-edge-to-text-300: 22px; + --spectrum-component-top-to-workflow-icon-50: 5px; + --spectrum-component-top-to-workflow-icon-75: 6px; + --spectrum-component-top-to-workflow-icon-100: 8px; + --spectrum-component-top-to-workflow-icon-200: 11px; + --spectrum-component-top-to-workflow-icon-300: 15px; + --spectrum-component-top-to-text-50: 4px; + --spectrum-component-top-to-text-75: 5px; + --spectrum-component-top-to-text-100: 8px; + --spectrum-component-top-to-text-200: 12px; + --spectrum-component-top-to-text-300: 15px; + --spectrum-component-bottom-to-text-50: 6px; + --spectrum-component-bottom-to-text-75: 6px; + --spectrum-component-bottom-to-text-100: 11px; + --spectrum-component-bottom-to-text-200: 14px; + --spectrum-component-bottom-to-text-300: 18px; + --spectrum-component-to-menu-small: 7px; + --spectrum-component-to-menu-medium: 8px; + --spectrum-component-to-menu-large: 9px; + --spectrum-component-to-menu-extra-large: 10px; + --spectrum-field-edge-to-disclosure-icon-75: 9px; + --spectrum-field-edge-to-disclosure-icon-100: 13px; + --spectrum-field-edge-to-disclosure-icon-200: 17px; + --spectrum-field-edge-to-disclosure-icon-300: 22px; + --spectrum-field-end-edge-to-disclosure-icon-75: 9px; + --spectrum-field-end-edge-to-disclosure-icon-100: 13px; + --spectrum-field-end-edge-to-disclosure-icon-200: 17px; + --spectrum-field-end-edge-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-disclosure-icon-75: 9px; + --spectrum-field-top-to-disclosure-icon-100: 13px; + --spectrum-field-top-to-disclosure-icon-200: 17px; + --spectrum-field-top-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-alert-icon-small: 5px; + --spectrum-field-top-to-alert-icon-medium: 9px; + --spectrum-field-top-to-alert-icon-large: 13px; + --spectrum-field-top-to-alert-icon-extra-large: 16px; + --spectrum-field-top-to-validation-icon-small: 9px; + --spectrum-field-top-to-validation-icon-medium: 13px; + --spectrum-field-top-to-validation-icon-large: 17px; + --spectrum-field-top-to-validation-icon-extra-large: 22px; + --spectrum-field-top-to-progress-circle-small: 7px; + --spectrum-field-top-to-progress-circle-medium: 12px; + --spectrum-field-top-to-progress-circle-large: 17px; + --spectrum-field-top-to-progress-circle-extra-large: 22px; + --spectrum-field-edge-to-alert-icon-small: 11px; + --spectrum-field-edge-to-alert-icon-medium: 15px; + --spectrum-field-edge-to-alert-icon-large: 19px; + --spectrum-field-edge-to-alert-icon-extra-large: 22px; + --spectrum-field-edge-to-validation-icon-small: 11px; + --spectrum-field-edge-to-validation-icon-medium: 15px; + --spectrum-field-edge-to-validation-icon-large: 19px; + --spectrum-field-edge-to-validation-icon-extra-large: 22px; + --spectrum-field-text-to-alert-icon-small: 10px; + --spectrum-field-text-to-alert-icon-medium: 15px; + --spectrum-field-text-to-alert-icon-large: 19px; + --spectrum-field-text-to-alert-icon-extra-large: 22px; + --spectrum-field-text-to-validation-icon-small: 10px; + --spectrum-field-text-to-validation-icon-medium: 15px; + --spectrum-field-text-to-validation-icon-large: 19px; + --spectrum-field-text-to-validation-icon-extra-large: 22px; + --spectrum-field-width: 240px; + --spectrum-character-count-to-field-quiet-small: -4px; + --spectrum-character-count-to-field-quiet-medium: -4px; + --spectrum-character-count-to-field-quiet-large: -4px; + --spectrum-character-count-to-field-quiet-extra-large: -5px; + --spectrum-side-label-character-count-to-field: 15px; + --spectrum-side-label-character-count-top-margin-small: 5px; + --spectrum-side-label-character-count-top-margin-medium: 10px; + --spectrum-side-label-character-count-top-margin-large: 14px; + --spectrum-side-label-character-count-top-margin-extra-large: 18px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; + --spectrum-navigational-indicator-top-to-back-icon-small: 7px; + --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; + --spectrum-navigational-indicator-top-to-back-icon-large: 16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; + --spectrum-color-control-track-width: 30px; + --spectrum-font-size-50: 13px; + --spectrum-font-size-75: 15px; + --spectrum-font-size-100: 17px; + --spectrum-font-size-200: 19px; + --spectrum-font-size-300: 22px; + --spectrum-font-size-400: 24px; + --spectrum-font-size-500: 27px; + --spectrum-font-size-600: 31px; + --spectrum-font-size-700: 34px; + --spectrum-font-size-800: 39px; + --spectrum-font-size-900: 44px; + --spectrum-font-size-1000: 49px; + --spectrum-font-size-1100: 55px; + --spectrum-font-size-1200: 62px; + --spectrum-font-size-1300: 70px; + --spectrum-slider-tick-mark-height: 13px; + --spectrum-slider-ramp-track-height: 20px; - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; + --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + --spectrum-colorwheel-colorarea-container-size: 182px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; + --spectrum-menu-item-checkmark-height-small: 12px; + --spectrum-menu-item-checkmark-height-medium: 14px; + --spectrum-menu-item-checkmark-height-large: 16px; + --spectrum-menu-item-checkmark-height-extra-large: 16px; - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; + --spectrum-menu-item-checkmark-width-small: 12px; + --spectrum-menu-item-checkmark-width-medium: 14px; + --spectrum-menu-item-checkmark-width-large: 16px; + --spectrum-menu-item-checkmark-width-extra-large: 16px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); + --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; + --spectrum-button-top-to-text-small: 6px; + --spectrum-button-bottom-to-text-small: 5px; + --spectrum-button-top-to-text-medium: 9px; + --spectrum-button-bottom-to-text-medium: 10px; + --spectrum-button-top-to-text-large: 12px; + --spectrum-button-bottom-to-text-large: 13px; + --spectrum-button-top-to-text-extra-large: 16px; + --spectrum-button-bottom-to-text-extra-large: 17px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); + --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; + --spectrum-coach-indicator-gap: 8px; + --spectrum-coach-indicator-ring-diameter: 20px; + --spectrum-coach-indicator-quiet-ring-diameter: 10px; - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; + --spectrum-coachmark-buttongroup-display: none; + --spectrum-coachmark-buttongroup-mobile-display: flex; + --spectrum-coachmark-menu-display: none; + --spectrum-coachmark-menu-mobile-display: inline-flex; + --spectrum-workflow-icon-size-xxl: 40px; + --spectrum-workflow-icon-size-xxs: 15px; - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; + --spectrum-dialog-confirm-entry-animation-distance: 25px; + --spectrum-dialog-confirm-hero-height: 160px; + --spectrum-dialog-confirm-border-radius: 5px; + --spectrum-dialog-confirm-title-text-size: 19px; + --spectrum-dialog-confirm-description-text-size: 15px; + --spectrum-dialog-confirm-padding-grid: 24px; - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; + --spectrum-datepicker-initial-width: 160px; + --spectrum-datepicker-generic-padding: 15px; + --spectrum-datepicker-dash-line-height: 30px; + --spectrum-datepicker-width-quiet-first: 90px; + --spectrum-datepicker-width-quiet-second: 20px; + --spectrum-datepicker-datetime-width-first: 45px; + --spectrum-datepicker-invalid-icon-to-button: 10px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; + --spectrum-datepicker-input-datetime-width: 30px; - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; + --spectrum-pagination-textfield-width: 60px; + --spectrum-pagination-item-inline-spacing: 6px; - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; + --spectrum-dial-border-radius: 20px; + --spectrum-dial-handle-position: 10px; + --spectrum-dial-handle-block-margin: 20px; + --spectrum-dial-handle-inline-margin: 20px; + --spectrum-dial-controls-margin: 10px; + --spectrum-dial-label-gap-y: 6px; + --spectrum-dial-label-container-top-to-text: 5px; - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); + --spectrum-assetcard-focus-ring-border-radius: 9px; + --spectrum-assetcard-selectionindicator-margin: 15px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xxs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - --spectrum-tooltip-animation-distance: 5px; + --spectrum-tooltip-animation-distance: 5px; - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; + --spectrum-ui-icon-medium-display: none; + --spectrum-ui-icon-large-display: block; - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); } :host, :root { - --spectrum-overlay-opacity: 0.4; - --spectrum-background-layer-2-color: var(--spectrum-gray-25); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-900 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-900 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-1000 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-900 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-600 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-500 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-800); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-background-elevated-color: var(--spectrum-gray-25); - --spectrum-background-pasteboard-color: var(--spectrum-gray-100); - --spectrum-brown-visual-color: var(--spectrum-brown-800); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); - --spectrum-pink-visual-color: var(--spectrum-pink-800); - --spectrum-silver-visual-color: var(--spectrum-silver-800); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); - --spectrum-brown-background-color-default: var(--spectrum-brown-900); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); - --spectrum-pink-background-color-default: var(--spectrum-pink-900); - --spectrum-silver-background-color-default: var(--spectrum-silver-900); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-900 - ); - --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-100-opacity: 0.12; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); - --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-200-opacity: 0.16; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); - --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-300-opacity: 0.2; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-100 - ); - --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100); - --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200); - --spectrum-green-subtle-background-color-default: var(--spectrum-green-200); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-200 - ); - --spectrum-red-subtle-background-color-default: var(--spectrum-red-200); - --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-200 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-200 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-200 - ); - --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-200 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-200 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-200 - ); - --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-200 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-200 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-200 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-200 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-200 - ); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-25-rgb: 255, 255, 255; - --spectrum-transparent-white-25-opacity: 0; - --spectrum-transparent-white-25: rgba( - var(--spectrum-transparent-white-25-rgb), - var(--spectrum-transparent-white-25-opacity) - ); - --spectrum-transparent-white-50-rgb: 255, 255, 255; - --spectrum-transparent-white-50-opacity: 0.04; - --spectrum-transparent-white-50: rgba( - var(--spectrum-transparent-white-50-rgb), - var(--spectrum-transparent-white-50-opacity) - ); - --spectrum-transparent-white-75-rgb: 255, 255, 255; - --spectrum-transparent-white-75-opacity: 0.07; - --spectrum-transparent-white-75: rgba( - var(--spectrum-transparent-white-75-rgb), - var(--spectrum-transparent-white-75-opacity) - ); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0.11; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.14; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.17; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.21; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.39; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.51; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.66; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.85; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900-opacity: 0.94; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb), - var(--spectrum-transparent-white-900-opacity) - ); - --spectrum-transparent-white-1000-rgb: 255, 255, 255; - --spectrum-transparent-white-1000: rgba( - var(--spectrum-transparent-white-1000-rgb) - ); - --spectrum-transparent-black-25-rgb: 0, 0, 0; - --spectrum-transparent-black-25-opacity: 0; - --spectrum-transparent-black-25: rgba( - var(--spectrum-transparent-black-25-rgb), - var(--spectrum-transparent-black-25-opacity) - ); - --spectrum-transparent-black-50-rgb: 0, 0, 0; - --spectrum-transparent-black-50-opacity: 0.03; - --spectrum-transparent-black-50: rgba( - var(--spectrum-transparent-black-50-rgb), - var(--spectrum-transparent-black-50-opacity) - ); - --spectrum-transparent-black-75-rgb: 0, 0, 0; - --spectrum-transparent-black-75-opacity: 0.05; - --spectrum-transparent-black-75: rgba( - var(--spectrum-transparent-black-75-rgb), - var(--spectrum-transparent-black-75-opacity) - ); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0.09; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.12; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.15; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.22; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.44; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.56; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.69; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.84; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900-opacity: 0.93; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb), - var(--spectrum-transparent-black-900-opacity) - ); - --spectrum-gray-25-rgb: 255, 255, 255; - --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); - --spectrum-gray-50-rgb: 248, 248, 248; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 243, 243, 243; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 233, 233, 233; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 225, 225, 225; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 218, 218, 218; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 198, 198, 198; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 143, 143, 143; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 113, 113, 113; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 80, 80, 80; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 41, 41, 41; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 19, 19, 19; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-gray-1000-rgb: 0, 0, 0; - --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); - --spectrum-blue-100-rgb: 245, 249, 255; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 229, 240, 254; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 203, 226, 254; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 172, 207, 253; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 142, 185, 252; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 114, 158, 253; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 93, 137, 255; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 75, 117, 255; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 59, 99, 251; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 39, 77, 234; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 29, 62, 207; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 21, 50, 173; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 16, 40, 140; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 12, 31, 105; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-blue-1500-rgb: 14, 24, 67; - --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); - --spectrum-blue-1600-rgb: 7, 11, 30; - --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); - --spectrum-red-100-rgb: 255, 246, 245; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 255, 235, 232; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 255, 214, 209; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 255, 188, 180; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 255, 157, 145; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 255, 118, 101; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 255, 81, 61; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 240, 56, 35; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 215, 50, 32; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 183, 40, 24; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 156, 33, 19; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 129, 27, 14; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 104, 21, 10; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 80, 16, 6; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-red-1500-rgb: 59, 11, 4; - --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); - --spectrum-red-1600-rgb: 29, 5, 2; - --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); - --spectrum-orange-100-rgb: 255, 246, 231; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 255, 236, 207; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 255, 218, 158; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 255, 193, 94; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 255, 162, 19; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 252, 125, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 232, 106, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 212, 91, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 194, 78, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 167, 62, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 144, 51, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 118, 41, 0; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 95, 32, 0; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 73, 24, 0; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-orange-1500-rgb: 52, 18, 0; - --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); - --spectrum-orange-1600-rgb: 25, 8, 0; - --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); - --spectrum-yellow-100-rgb: 255, 248, 204; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 255, 241, 151; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 255, 222, 44; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 245, 199, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 230, 175, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 210, 149, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 193, 131, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 175, 116, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 158, 102, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 134, 85, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 114, 72, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 93, 59, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 75, 47, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 56, 35, 0; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-yellow-1500-rgb: 40, 25, 0; - --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); - --spectrum-yellow-1600-rgb: 18, 11, 0; - --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); - --spectrum-chartreuse-100-rgb: 246, 251, 222; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 234, 246, 173; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 208, 236, 70; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 182, 219, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 163, 196, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 143, 172, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 128, 153, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 114, 137, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 102, 122, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 86, 103, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 73, 87, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 60, 71, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 47, 57, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 35, 43, 0; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-chartreuse-1500-rgb: 25, 30, 0; - --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); - --spectrum-chartreuse-1600-rgb: 11, 14, 0; - --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); - --spectrum-celery-100-rgb: 235, 255, 220; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 197, 255, 156; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 157, 247, 92; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 129, 228, 58; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 110, 206, 42; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 93, 180, 31; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 82, 161, 25; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 72, 144, 20; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 64, 129, 17; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 52, 109, 12; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 44, 92, 9; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 35, 75, 6; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 27, 60, 3; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 19, 46, 0; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-celery-1500-rgb: 12, 33, 0; - --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); - --spectrum-celery-1600-rgb: 4, 15, 0; - --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); - --spectrum-green-100-rgb: 237, 252, 241; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 215, 247, 225; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 173, 238, 197; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 107, 227, 162; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 43, 209, 125; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 18, 184, 103; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 11, 164, 93; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 7, 147, 85; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 5, 131, 78; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 3, 110, 69; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 2, 93, 60; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 1, 76, 52; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 0, 61, 44; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 0, 46, 34; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-green-1500-rgb: 0, 33, 25; - --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); - --spectrum-green-1600-rgb: 0, 15, 12; - --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); - --spectrum-seafoam-100-rgb: 235, 251, 246; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 211, 246, 234; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 169, 237, 216; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 92, 225, 194; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 16, 207, 169; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 13, 181, 149; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 11, 162, 134; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 9, 144, 120; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 7, 129, 109; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 5, 108, 92; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 3, 92, 80; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 1, 75, 67; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 0, 60, 54; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 0, 46, 40; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-seafoam-1500-rgb: 0, 33, 29; - --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); - --spectrum-seafoam-1600-rgb: 0, 15, 14; - --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); - --spectrum-cyan-100-rgb: 238, 250, 254; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 217, 244, 253; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 183, 231, 252; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 138, 213, 255; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 92, 192, 255; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 48, 167, 254; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 29, 149, 231; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 18, 134, 205; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 11, 120, 179; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 4, 102, 145; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 0, 87, 121; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 0, 71, 98; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 0, 57, 78; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 0, 43, 59; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-cyan-1500-rgb: 0, 31, 43; - --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); - --spectrum-cyan-1600-rgb: 0, 14, 20; - --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); - --spectrum-indigo-100-rgb: 247, 248, 255; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 235, 238, 255; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 216, 222, 255; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 192, 201, 255; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 167, 178, 255; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 145, 151, 254; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 132, 128, 254; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 122, 106, 253; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 113, 85, 250; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 99, 56, 238; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 84, 36, 219; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 69, 19, 191; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 55, 6, 160; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 42, 0, 129; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-indigo-1500-rgb: 31, 0, 98; - --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); - --spectrum-indigo-1600-rgb: 17, 0, 54; - --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); - --spectrum-purple-100-rgb: 251, 247, 254; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 244, 235, 252; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 235, 218, 249; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 221, 193, 246; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 208, 167, 243; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 191, 138, 238; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 178, 114, 235; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 166, 92, 231; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 154, 71, 226; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 134, 40, 217; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 115, 13, 204; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 93, 0, 177; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 75, 0, 144; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 59, 0, 111; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-purple-1500-rgb: 44, 0, 84; - --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); - --spectrum-purple-1600-rgb: 23, 0, 45; - --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); - --spectrum-fuchsia-100-rgb: 254, 246, 255; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 253, 233, 255; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 250, 211, 255; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 247, 181, 255; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 243, 147, 255; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 236, 105, 255; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 223, 77, 245; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 200, 68, 220; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 181, 57, 200; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 156, 40, 175; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 135, 27, 154; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 113, 15, 131; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 92, 4, 109; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 72, 0, 88; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-fuchsia-1500-rgb: 54, 0, 66; - --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); - --spectrum-fuchsia-1600-rgb: 29, 0, 35; - --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); - --spectrum-magenta-100-rgb: 255, 245, 248; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 255, 232, 240; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 255, 213, 227; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 255, 185, 208; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 255, 152, 187; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 255, 112, 159; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 255, 72, 133; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 240, 45, 110; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 217, 35, 97; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 186, 22, 80; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 163, 5, 62; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 136, 0, 51; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 111, 0, 40; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 86, 0, 30; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-magenta-1500-rgb: 64, 0, 22; - --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); - --spectrum-magenta-1600-rgb: 35, 0, 12; - --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); - --spectrum-pink-100-rgb: 255, 246, 252; - --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); - --spectrum-pink-200-rgb: 255, 232, 247; - --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); - --spectrum-pink-300-rgb: 255, 211, 240; - --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); - --spectrum-pink-400-rgb: 255, 181, 230; - --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); - --spectrum-pink-500-rgb: 255, 148, 219; - --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); - --spectrum-pink-600-rgb: 255, 103, 204; - --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); - --spectrum-pink-700-rgb: 242, 76, 184; - --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); - --spectrum-pink-800-rgb: 228, 52, 163; - --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); - --spectrum-pink-900-rgb: 206, 42, 146; - --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); - --spectrum-pink-1000-rgb: 176, 31, 123; - --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); - --spectrum-pink-1100-rgb: 152, 22, 104; - --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); - --spectrum-pink-1200-rgb: 128, 12, 85; - --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); - --spectrum-pink-1300-rgb: 105, 3, 68; - --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); - --spectrum-pink-1400-rgb: 83, 0, 53; - --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); - --spectrum-pink-1500-rgb: 62, 0, 39; - --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); - --spectrum-pink-1600-rgb: 33, 0, 21; - --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); - --spectrum-turquoise-100-rgb: 238, 251, 251; - --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); - --spectrum-turquoise-200-rgb: 209, 245, 245; - --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); - --spectrum-turquoise-300-rgb: 169, 236, 237; - --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); - --spectrum-turquoise-400-rgb: 111, 221, 228; - --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); - --spectrum-turquoise-500-rgb: 39, 202, 216; - --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); - --spectrum-turquoise-600-rgb: 15, 177, 192; - --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); - --spectrum-turquoise-700-rgb: 12, 158, 171; - --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); - --spectrum-turquoise-800-rgb: 10, 141, 153; - --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); - --spectrum-turquoise-900-rgb: 8, 126, 137; - --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); - --spectrum-turquoise-1000-rgb: 5, 107, 116; - --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); - --spectrum-turquoise-1100-rgb: 3, 90, 98; - --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); - --spectrum-turquoise-1200-rgb: 1, 74, 81; - --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); - --spectrum-turquoise-1300-rgb: 0, 59, 65; - --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); - --spectrum-turquoise-1400-rgb: 0, 44, 49; - --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); - --spectrum-turquoise-1500-rgb: 0, 32, 35; - --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); - --spectrum-turquoise-1600-rgb: 0, 15, 17; - --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); - --spectrum-brown-100-rgb: 252, 247, 242; - --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); - --spectrum-brown-200-rgb: 247, 238, 225; - --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); - --spectrum-brown-300-rgb: 239, 221, 195; - --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); - --spectrum-brown-400-rgb: 229, 200, 157; - --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); - --spectrum-brown-500-rgb: 214, 177, 123; - --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); - --spectrum-brown-600-rgb: 190, 155, 104; - --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); - --spectrum-brown-700-rgb: 171, 138, 90; - --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); - --spectrum-brown-800-rgb: 154, 123, 77; - --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); - --spectrum-brown-900-rgb: 139, 109, 66; - --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); - --spectrum-brown-1000-rgb: 119, 91, 50; - --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); - --spectrum-brown-1100-rgb: 103, 76, 35; - --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); - --spectrum-brown-1200-rgb: 88, 61, 21; - --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); - --spectrum-brown-1300-rgb: 70, 49, 17; - --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); - --spectrum-brown-1400-rgb: 52, 37, 13; - --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); - --spectrum-brown-1500-rgb: 38, 26, 9; - --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); - --spectrum-brown-1600-rgb: 16, 12, 4; - --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); - --spectrum-silver-100-rgb: 247, 247, 247; - --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); - --spectrum-silver-200-rgb: 239, 239, 239; - --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); - --spectrum-silver-300-rgb: 223, 223, 223; - --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); - --spectrum-silver-400-rgb: 204, 204, 204; - --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); - --spectrum-silver-500-rgb: 183, 183, 183; - --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); - --spectrum-silver-600-rgb: 160, 160, 160; - --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); - --spectrum-silver-700-rgb: 143, 143, 143; - --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); - --spectrum-silver-800-rgb: 128, 128, 128; - --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); - --spectrum-silver-900-rgb: 114, 114, 114; - --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); - --spectrum-silver-1000-rgb: 96, 96, 96; - --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); - --spectrum-silver-1100-rgb: 81, 81, 81; - --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); - --spectrum-silver-1200-rgb: 66, 66, 66; - --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); - --spectrum-silver-1300-rgb: 52, 52, 52; - --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); - --spectrum-silver-1400-rgb: 39, 39, 39; - --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); - --spectrum-silver-1500-rgb: 28, 28, 28; - --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); - --spectrum-silver-1600-rgb: 12, 12, 12; - --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); - --spectrum-cinnamon-100-rgb: 253, 247, 243; - --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); - --spectrum-cinnamon-200-rgb: 249, 236, 229; - --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); - --spectrum-cinnamon-300-rgb: 244, 218, 203; - --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); - --spectrum-cinnamon-400-rgb: 237, 196, 172; - --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); - --spectrum-cinnamon-500-rgb: 229, 170, 136; - --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); - --spectrum-cinnamon-600-rgb: 212, 145, 108; - --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); - --spectrum-cinnamon-700-rgb: 198, 126, 88; - --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); - --spectrum-cinnamon-800-rgb: 184, 109, 70; - --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); - --spectrum-cinnamon-900-rgb: 170, 94, 56; - --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); - --spectrum-cinnamon-1000-rgb: 147, 77, 43; - --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); - --spectrum-cinnamon-1100-rgb: 128, 62, 32; - --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); - --spectrum-cinnamon-1200-rgb: 110, 48, 21; - --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); - --spectrum-cinnamon-1300-rgb: 92, 35, 11; - --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); - --spectrum-cinnamon-1400-rgb: 72, 25, 6; - --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); - --spectrum-cinnamon-1500-rgb: 52, 18, 4; - --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); - --spectrum-cinnamon-1600-rgb: 24, 8, 2; - --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-200 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-200 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-200 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-200 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); + --spectrum-overlay-opacity: 0.4; + --spectrum-background-layer-2-color: var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-800 + ); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-900); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-900 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-1000 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-1000 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-1000 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-background-color-down: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-900 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-1000 + ); + --spectrum-positive-background-color-down: var( + --spectrum-positive-color-1000 + ); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-1000 + ); + --spectrum-notice-background-color-default: var(--spectrum-notice-color-600); + --spectrum-gray-background-color-default: var(--spectrum-gray-700); + --spectrum-red-background-color-default: var(--spectrum-red-900); + --spectrum-orange-background-color-default: var(--spectrum-orange-600); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-500 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-600); + --spectrum-green-background-color-default: var(--spectrum-green-900); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); + --spectrum-blue-background-color-default: var(--spectrum-blue-900); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); + --spectrum-purple-background-color-default: var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); + --spectrum-neutral-visual-color: var(--spectrum-gray-500); + --spectrum-accent-visual-color: var(--spectrum-accent-color-800); + --spectrum-informative-visual-color: var(--spectrum-informative-color-800); + --spectrum-negative-visual-color: var(--spectrum-negative-color-800); + --spectrum-notice-visual-color: var(--spectrum-notice-color-800); + --spectrum-positive-visual-color: var(--spectrum-positive-color-800); + --spectrum-gray-visual-color: var(--spectrum-gray-500); + --spectrum-red-visual-color: var(--spectrum-red-800); + --spectrum-orange-visual-color: var(--spectrum-orange-700); + --spectrum-yellow-visual-color: var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color: var(--spectrum-celery-700); + --spectrum-green-visual-color: var(--spectrum-green-700); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color: var(--spectrum-cyan-600); + --spectrum-blue-visual-color: var(--spectrum-blue-800); + --spectrum-indigo-visual-color: var(--spectrum-indigo-800); + --spectrum-purple-visual-color: var(--spectrum-purple-800); + --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); + --spectrum-magenta-visual-color: var(--spectrum-magenta-800); + --spectrum-background-elevated-color: var(--spectrum-gray-25); + --spectrum-background-pasteboard-color: var(--spectrum-gray-100); + --spectrum-brown-visual-color: var(--spectrum-brown-800); + --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); + --spectrum-pink-visual-color: var(--spectrum-pink-800); + --spectrum-silver-visual-color: var(--spectrum-silver-800); + --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); + --spectrum-brown-background-color-default: var(--spectrum-brown-900); + --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); + --spectrum-pink-background-color-default: var(--spectrum-pink-900); + --spectrum-silver-background-color-default: var(--spectrum-silver-900); + --spectrum-turquoise-background-color-default: var(--spectrum-turquoise-900); + --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-100-opacity: 0.12; + --spectrum-drop-shadow-color-100: rgba( + var(--spectrum-drop-shadow-color-100-rgb), + var(--spectrum-drop-shadow-color-100-opacity) + ); + --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-200-opacity: 0.16; + --spectrum-drop-shadow-color-200: rgba( + var(--spectrum-drop-shadow-color-200-rgb), + var(--spectrum-drop-shadow-color-200-opacity) + ); + --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-300-opacity: 0.2; + --spectrum-drop-shadow-color-300: rgba( + var(--spectrum-drop-shadow-color-300-rgb), + var(--spectrum-drop-shadow-color-300-opacity) + ); + --spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-100); + --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100); + --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200); + --spectrum-green-subtle-background-color-default: var(--spectrum-green-200); + --spectrum-orange-subtle-background-color-default: var(--spectrum-orange-200); + --spectrum-red-subtle-background-color-default: var(--spectrum-red-200); + --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200); + --spectrum-cinnamon-subtle-background-color-default: var( + --spectrum-cinnamon-200 + ); + --spectrum-celery-subtle-background-color-default: var(--spectrum-celery-200); + --spectrum-chartreuse-subtle-background-color-default: var( + --spectrum-chartreuse-200 + ); + --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200); + --spectrum-fuchsia-subtle-background-color-default: var( + --spectrum-fuchsia-200 + ); + --spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-200); + --spectrum-magenta-subtle-background-color-default: var( + --spectrum-magenta-200 + ); + --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200); + --spectrum-purple-subtle-background-color-default: var(--spectrum-purple-200); + --spectrum-seafoam-subtle-background-color-default: var( + --spectrum-seafoam-200 + ); + --spectrum-silver-subtle-background-color-default: var(--spectrum-silver-200); + --spectrum-turquoise-subtle-background-color-default: var( + --spectrum-turquoise-200 + ); + --spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-200); + --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); + --spectrum-white-rgb: 255, 255, 255; + --spectrum-white: rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb: 255, 255, 255; + --spectrum-transparent-white-25-opacity: 0; + --spectrum-transparent-white-25: rgba( + var(--spectrum-transparent-white-25-rgb), + var(--spectrum-transparent-white-25-opacity) + ); + --spectrum-transparent-white-50-rgb: 255, 255, 255; + --spectrum-transparent-white-50-opacity: 0.04; + --spectrum-transparent-white-50: rgba( + var(--spectrum-transparent-white-50-rgb), + var(--spectrum-transparent-white-50-opacity) + ); + --spectrum-transparent-white-75-rgb: 255, 255, 255; + --spectrum-transparent-white-75-opacity: 0.07; + --spectrum-transparent-white-75: rgba( + var(--spectrum-transparent-white-75-rgb), + var(--spectrum-transparent-white-75-opacity) + ); + --spectrum-transparent-white-100-rgb: 255, 255, 255; + --spectrum-transparent-white-100-opacity: 0.11; + --spectrum-transparent-white-100: rgba( + var(--spectrum-transparent-white-100-rgb), + var(--spectrum-transparent-white-100-opacity) + ); + --spectrum-transparent-white-200-rgb: 255, 255, 255; + --spectrum-transparent-white-200-opacity: 0.14; + --spectrum-transparent-white-200: rgba( + var(--spectrum-transparent-white-200-rgb), + var(--spectrum-transparent-white-200-opacity) + ); + --spectrum-transparent-white-300-rgb: 255, 255, 255; + --spectrum-transparent-white-300-opacity: 0.17; + --spectrum-transparent-white-300: rgba( + var(--spectrum-transparent-white-300-rgb), + var(--spectrum-transparent-white-300-opacity) + ); + --spectrum-transparent-white-400-rgb: 255, 255, 255; + --spectrum-transparent-white-400-opacity: 0.21; + --spectrum-transparent-white-400: rgba( + var(--spectrum-transparent-white-400-rgb), + var(--spectrum-transparent-white-400-opacity) + ); + --spectrum-transparent-white-500-rgb: 255, 255, 255; + --spectrum-transparent-white-500-opacity: 0.39; + --spectrum-transparent-white-500: rgba( + var(--spectrum-transparent-white-500-rgb), + var(--spectrum-transparent-white-500-opacity) + ); + --spectrum-transparent-white-600-rgb: 255, 255, 255; + --spectrum-transparent-white-600-opacity: 0.51; + --spectrum-transparent-white-600: rgba( + var(--spectrum-transparent-white-600-rgb), + var(--spectrum-transparent-white-600-opacity) + ); + --spectrum-transparent-white-700-rgb: 255, 255, 255; + --spectrum-transparent-white-700-opacity: 0.66; + --spectrum-transparent-white-700: rgba( + var(--spectrum-transparent-white-700-rgb), + var(--spectrum-transparent-white-700-opacity) + ); + --spectrum-transparent-white-800-rgb: 255, 255, 255; + --spectrum-transparent-white-800-opacity: 0.85; + --spectrum-transparent-white-800: rgba( + var(--spectrum-transparent-white-800-rgb), + var(--spectrum-transparent-white-800-opacity) + ); + --spectrum-transparent-white-900-rgb: 255, 255, 255; + --spectrum-transparent-white-900-opacity: 0.94; + --spectrum-transparent-white-900: rgba( + var(--spectrum-transparent-white-900-rgb), + var(--spectrum-transparent-white-900-opacity) + ); + --spectrum-transparent-white-1000-rgb: 255, 255, 255; + --spectrum-transparent-white-1000: rgba( + var(--spectrum-transparent-white-1000-rgb) + ); + --spectrum-transparent-black-25-rgb: 0, 0, 0; + --spectrum-transparent-black-25-opacity: 0; + --spectrum-transparent-black-25: rgba( + var(--spectrum-transparent-black-25-rgb), + var(--spectrum-transparent-black-25-opacity) + ); + --spectrum-transparent-black-50-rgb: 0, 0, 0; + --spectrum-transparent-black-50-opacity: 0.03; + --spectrum-transparent-black-50: rgba( + var(--spectrum-transparent-black-50-rgb), + var(--spectrum-transparent-black-50-opacity) + ); + --spectrum-transparent-black-75-rgb: 0, 0, 0; + --spectrum-transparent-black-75-opacity: 0.05; + --spectrum-transparent-black-75: rgba( + var(--spectrum-transparent-black-75-rgb), + var(--spectrum-transparent-black-75-opacity) + ); + --spectrum-transparent-black-100-rgb: 0, 0, 0; + --spectrum-transparent-black-100-opacity: 0.09; + --spectrum-transparent-black-100: rgba( + var(--spectrum-transparent-black-100-rgb), + var(--spectrum-transparent-black-100-opacity) + ); + --spectrum-transparent-black-200-rgb: 0, 0, 0; + --spectrum-transparent-black-200-opacity: 0.12; + --spectrum-transparent-black-200: rgba( + var(--spectrum-transparent-black-200-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --spectrum-transparent-black-300-rgb: 0, 0, 0; + --spectrum-transparent-black-300-opacity: 0.15; + --spectrum-transparent-black-300: rgba( + var(--spectrum-transparent-black-300-rgb), + var(--spectrum-transparent-black-300-opacity) + ); + --spectrum-transparent-black-400-rgb: 0, 0, 0; + --spectrum-transparent-black-400-opacity: 0.22; + --spectrum-transparent-black-400: rgba( + var(--spectrum-transparent-black-400-rgb), + var(--spectrum-transparent-black-400-opacity) + ); + --spectrum-transparent-black-500-rgb: 0, 0, 0; + --spectrum-transparent-black-500-opacity: 0.44; + --spectrum-transparent-black-500: rgba( + var(--spectrum-transparent-black-500-rgb), + var(--spectrum-transparent-black-500-opacity) + ); + --spectrum-transparent-black-600-rgb: 0, 0, 0; + --spectrum-transparent-black-600-opacity: 0.56; + --spectrum-transparent-black-600: rgba( + var(--spectrum-transparent-black-600-rgb), + var(--spectrum-transparent-black-600-opacity) + ); + --spectrum-transparent-black-700-rgb: 0, 0, 0; + --spectrum-transparent-black-700-opacity: 0.69; + --spectrum-transparent-black-700: rgba( + var(--spectrum-transparent-black-700-rgb), + var(--spectrum-transparent-black-700-opacity) + ); + --spectrum-transparent-black-800-rgb: 0, 0, 0; + --spectrum-transparent-black-800-opacity: 0.84; + --spectrum-transparent-black-800: rgba( + var(--spectrum-transparent-black-800-rgb), + var(--spectrum-transparent-black-800-opacity) + ); + --spectrum-transparent-black-900-rgb: 0, 0, 0; + --spectrum-transparent-black-900-opacity: 0.93; + --spectrum-transparent-black-900: rgba( + var(--spectrum-transparent-black-900-rgb), + var(--spectrum-transparent-black-900-opacity) + ); + --spectrum-gray-25-rgb: 255, 255, 255; + --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb: 248, 248, 248; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 243, 243, 243; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 233, 233, 233; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 225, 225, 225; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 218, 218, 218; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 198, 198, 198; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 143, 143, 143; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 113, 113, 113; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 80, 80, 80; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 41, 41, 41; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 19, 19, 19; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb: 0, 0, 0; + --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb: 245, 249, 255; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 229, 240, 254; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 203, 226, 254; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 172, 207, 253; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 142, 185, 252; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 114, 158, 253; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 93, 137, 255; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 75, 117, 255; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 59, 99, 251; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 39, 77, 234; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 29, 62, 207; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 21, 50, 173; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 16, 40, 140; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 12, 31, 105; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb: 14, 24, 67; + --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb: 7, 11, 30; + --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb: 255, 246, 245; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 255, 235, 232; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 255, 214, 209; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 255, 188, 180; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 255, 157, 145; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 255, 118, 101; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 255, 81, 61; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 240, 56, 35; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 215, 50, 32; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 183, 40, 24; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 156, 33, 19; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 129, 27, 14; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 104, 21, 10; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 80, 16, 6; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb: 59, 11, 4; + --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb: 29, 5, 2; + --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb: 255, 246, 231; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 255, 236, 207; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 255, 218, 158; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 255, 193, 94; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 255, 162, 19; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 252, 125, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 232, 106, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 212, 91, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 194, 78, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 167, 62, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 144, 51, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 118, 41, 0; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 95, 32, 0; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 73, 24, 0; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb: 52, 18, 0; + --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb: 25, 8, 0; + --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb: 255, 248, 204; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 255, 241, 151; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 255, 222, 44; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 245, 199, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 230, 175, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 210, 149, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 193, 131, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 175, 116, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 158, 102, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 134, 85, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 114, 72, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 93, 59, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 75, 47, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 56, 35, 0; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb: 40, 25, 0; + --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb: 18, 11, 0; + --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb: 246, 251, 222; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 234, 246, 173; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 208, 236, 70; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 182, 219, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 163, 196, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 143, 172, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 128, 153, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 114, 137, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 102, 122, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 86, 103, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 73, 87, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 60, 71, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 47, 57, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 35, 43, 0; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb: 25, 30, 0; + --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb: 11, 14, 0; + --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb: 235, 255, 220; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 197, 255, 156; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 157, 247, 92; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 129, 228, 58; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 110, 206, 42; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 93, 180, 31; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 82, 161, 25; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 72, 144, 20; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 64, 129, 17; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 52, 109, 12; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 44, 92, 9; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 35, 75, 6; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 27, 60, 3; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 19, 46, 0; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb: 12, 33, 0; + --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb: 4, 15, 0; + --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb: 237, 252, 241; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 215, 247, 225; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 173, 238, 197; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 107, 227, 162; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 43, 209, 125; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 18, 184, 103; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 11, 164, 93; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 7, 147, 85; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 5, 131, 78; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 3, 110, 69; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 2, 93, 60; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 1, 76, 52; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 0, 61, 44; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 0, 46, 34; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb: 0, 33, 25; + --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb: 0, 15, 12; + --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb: 235, 251, 246; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 211, 246, 234; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 169, 237, 216; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 92, 225, 194; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 16, 207, 169; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 13, 181, 149; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 11, 162, 134; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 9, 144, 120; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 7, 129, 109; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 5, 108, 92; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 3, 92, 80; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 1, 75, 67; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 0, 60, 54; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 0, 46, 40; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb: 0, 33, 29; + --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb: 0, 15, 14; + --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb: 238, 250, 254; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 217, 244, 253; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 183, 231, 252; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 138, 213, 255; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 92, 192, 255; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 48, 167, 254; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 29, 149, 231; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 18, 134, 205; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 11, 120, 179; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 4, 102, 145; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 0, 87, 121; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 0, 71, 98; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 0, 57, 78; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 0, 43, 59; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb: 0, 31, 43; + --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb: 0, 14, 20; + --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb: 247, 248, 255; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 235, 238, 255; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 216, 222, 255; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 192, 201, 255; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 167, 178, 255; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 145, 151, 254; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 132, 128, 254; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 122, 106, 253; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 113, 85, 250; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 99, 56, 238; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 84, 36, 219; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 69, 19, 191; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 55, 6, 160; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 42, 0, 129; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb: 31, 0, 98; + --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb: 17, 0, 54; + --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb: 251, 247, 254; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 244, 235, 252; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 235, 218, 249; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 221, 193, 246; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 208, 167, 243; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 191, 138, 238; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 178, 114, 235; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 166, 92, 231; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 154, 71, 226; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 134, 40, 217; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 115, 13, 204; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 93, 0, 177; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 75, 0, 144; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 59, 0, 111; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb: 44, 0, 84; + --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb: 23, 0, 45; + --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb: 254, 246, 255; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 253, 233, 255; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 250, 211, 255; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 247, 181, 255; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 243, 147, 255; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 236, 105, 255; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 223, 77, 245; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 200, 68, 220; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 181, 57, 200; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 156, 40, 175; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 135, 27, 154; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 113, 15, 131; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 92, 4, 109; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 72, 0, 88; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb: 54, 0, 66; + --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb: 29, 0, 35; + --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb: 255, 245, 248; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 255, 232, 240; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 255, 213, 227; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 255, 185, 208; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 255, 152, 187; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 255, 112, 159; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 255, 72, 133; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 240, 45, 110; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 217, 35, 97; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 186, 22, 80; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 163, 5, 62; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 136, 0, 51; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 111, 0, 40; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 86, 0, 30; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb: 64, 0, 22; + --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb: 35, 0, 12; + --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb: 255, 246, 252; + --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb: 255, 232, 247; + --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb: 255, 211, 240; + --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb: 255, 181, 230; + --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb: 255, 148, 219; + --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb: 255, 103, 204; + --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb: 242, 76, 184; + --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb: 228, 52, 163; + --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb: 206, 42, 146; + --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb: 176, 31, 123; + --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb: 152, 22, 104; + --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb: 128, 12, 85; + --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb: 105, 3, 68; + --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb: 83, 0, 53; + --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb: 62, 0, 39; + --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb: 33, 0, 21; + --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb: 238, 251, 251; + --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb: 209, 245, 245; + --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb: 169, 236, 237; + --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb: 111, 221, 228; + --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb: 39, 202, 216; + --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb: 15, 177, 192; + --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb: 12, 158, 171; + --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb: 10, 141, 153; + --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb: 8, 126, 137; + --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb: 5, 107, 116; + --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb: 3, 90, 98; + --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb: 1, 74, 81; + --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb: 0, 59, 65; + --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb: 0, 44, 49; + --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb: 0, 32, 35; + --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb: 0, 15, 17; + --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb: 252, 247, 242; + --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb: 247, 238, 225; + --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb: 239, 221, 195; + --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb: 229, 200, 157; + --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb: 214, 177, 123; + --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb: 190, 155, 104; + --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb: 171, 138, 90; + --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb: 154, 123, 77; + --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb: 139, 109, 66; + --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb: 119, 91, 50; + --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb: 103, 76, 35; + --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb: 88, 61, 21; + --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb: 70, 49, 17; + --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb: 52, 37, 13; + --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb: 38, 26, 9; + --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb: 16, 12, 4; + --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb: 247, 247, 247; + --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb: 239, 239, 239; + --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb: 223, 223, 223; + --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb: 204, 204, 204; + --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb: 183, 183, 183; + --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb: 160, 160, 160; + --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb: 143, 143, 143; + --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb: 128, 128, 128; + --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb: 114, 114, 114; + --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb: 96, 96, 96; + --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb: 81, 81, 81; + --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb: 66, 66, 66; + --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb: 52, 52, 52; + --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb: 39, 39, 39; + --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb: 28, 28, 28; + --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb: 12, 12, 12; + --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb: 253, 247, 243; + --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb: 249, 236, 229; + --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb: 244, 218, 203; + --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb: 237, 196, 172; + --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb: 229, 170, 136; + --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb: 212, 145, 108; + --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb: 198, 126, 88; + --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb: 184, 109, 70; + --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb: 170, 94, 56; + --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb: 147, 77, 43; + --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb: 128, 62, 32; + --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb: 110, 48, 21; + --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb: 92, 35, 11; + --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb: 72, 25, 6; + --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb: 52, 18, 4; + --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb: 24, 8, 2; + --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); + --spectrum-negative-subdued-background-color-default: var( + --spectrum-negative-subtle-background-color-default + ); + --spectrum-accent-subtle-background-color-default: var( + --spectrum-accent-color-200 + ); + --spectrum-informative-subtle-background-color-default: var( + --spectrum-informative-color-200 + ); + --spectrum-positive-subtle-background-color-default: var( + --spectrum-positive-color-200 + ); + --spectrum-notice-subtle-background-color-default: var( + --spectrum-notice-color-200 + ); + --spectrum-negative-subtle-background-color-default: var( + --spectrum-negative-color-200 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-black-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.06 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-1100 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-900 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); } :host, :root { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 20px; - --spectrum-workflow-icon-size-200: 22px; - --spectrum-workflow-icon-size-300: 26px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-m - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-accordion-top-to-text-spacious-small: 9px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-text-to-visual-50: 5px; - --spectrum-text-to-visual-75: 5px; - --spectrum-text-to-visual-100: 6px; - --spectrum-text-to-visual-200: 7px; - --spectrum-text-to-visual-300: 8px; - --spectrum-text-to-visual-400: 9px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 11px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 20px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 6px; - --spectrum-component-pill-edge-to-visual-only-200: 9px; - --spectrum-component-pill-edge-to-visual-only-300: 11px; - --spectrum-component-pill-edge-to-text-75: 13px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 23px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 8px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 14px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 6px; - --spectrum-component-edge-to-visual-only-200: 9px; - --spectrum-component-edge-to-visual-only-300: 11px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 10px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 17px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 6px; - --spectrum-component-top-to-workflow-icon-200: 9px; - --spectrum-component-top-to-workflow-icon-300: 11px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; + --spectrum-workflow-icon-size-50: 14px; + --spectrum-workflow-icon-size-75: 16px; + --spectrum-workflow-icon-size-100: 20px; + --spectrum-workflow-icon-size-200: 22px; + --spectrum-workflow-icon-size-300: 26px; + --spectrum-arrow-icon-size-75: 10px; + --spectrum-arrow-icon-size-100: 10px; + --spectrum-arrow-icon-size-200: 12px; + --spectrum-arrow-icon-size-300: 14px; + --spectrum-arrow-icon-size-400: 16px; + --spectrum-arrow-icon-size-500: 18px; + --spectrum-arrow-icon-size-600: 20px; + --spectrum-asterisk-icon-size-100: 8px; + --spectrum-asterisk-icon-size-200: 10px; + --spectrum-asterisk-icon-size-300: 10px; + --spectrum-checkmark-icon-size-50: 10px; + --spectrum-checkmark-icon-size-75: 10px; + --spectrum-checkmark-icon-size-100: 10px; + --spectrum-checkmark-icon-size-200: 12px; + --spectrum-checkmark-icon-size-300: 14px; + --spectrum-checkmark-icon-size-400: 16px; + --spectrum-checkmark-icon-size-500: 16px; + --spectrum-checkmark-icon-size-600: 18px; + --spectrum-chevron-icon-size-50: 6px; + --spectrum-chevron-icon-size-75: 10px; + --spectrum-chevron-icon-size-100: 10px; + --spectrum-chevron-icon-size-200: 12px; + --spectrum-chevron-icon-size-300: 14px; + --spectrum-chevron-icon-size-400: 16px; + --spectrum-chevron-icon-size-500: 16px; + --spectrum-chevron-icon-size-600: 18px; + --spectrum-corner-triangle-icon-size-75: 5px; + --spectrum-corner-triangle-icon-size-100: 5px; + --spectrum-corner-triangle-icon-size-200: 6px; + --spectrum-corner-triangle-icon-size-300: 7px; + --spectrum-cross-icon-size-75: 8px; + --spectrum-cross-icon-size-100: 8px; + --spectrum-cross-icon-size-200: 10px; + --spectrum-cross-icon-size-300: 12px; + --spectrum-cross-icon-size-400: 12px; + --spectrum-cross-icon-size-500: 14px; + --spectrum-cross-icon-size-600: 16px; + --spectrum-dash-icon-size-50: 8px; + --spectrum-dash-icon-size-75: 8px; + --spectrum-dash-icon-size-100: 10px; + --spectrum-dash-icon-size-200: 12px; + --spectrum-dash-icon-size-300: 12px; + --spectrum-dash-icon-size-400: 14px; + --spectrum-dash-icon-size-500: 16px; + --spectrum-dash-icon-size-600: 18px; + --spectrum-checkbox-control-size-small: 12px; + --spectrum-checkbox-control-size-medium: 14px; + --spectrum-checkbox-control-size-large: 16px; + --spectrum-checkbox-control-size-extra-large: 18px; + --spectrum-checkbox-top-to-control-small: 6px; + --spectrum-checkbox-top-to-control-medium: 9px; + --spectrum-checkbox-top-to-control-large: 12px; + --spectrum-checkbox-top-to-control-extra-large: 15px; + --spectrum-switch-control-width-small: 23px; + --spectrum-switch-control-width-medium: 26px; + --spectrum-switch-control-width-large: 29px; + --spectrum-switch-control-width-extra-large: 33px; + --spectrum-switch-control-height-small: 12px; + --spectrum-switch-control-height-medium: 14px; + --spectrum-switch-control-height-large: 16px; + --spectrum-switch-control-height-extra-large: 18px; + --spectrum-switch-top-to-control-small: 6px; + --spectrum-switch-top-to-control-medium: 9px; + --spectrum-switch-top-to-control-large: 12px; + --spectrum-switch-top-to-control-extra-large: 15px; + --spectrum-radio-button-control-size-small: 12px; + --spectrum-radio-button-control-size-medium: 14px; + --spectrum-radio-button-control-size-large: 16px; + --spectrum-radio-button-control-size-extra-large: 18px; + --spectrum-radio-button-top-to-control-small: 6px; + --spectrum-radio-button-top-to-control-medium: 9px; + --spectrum-radio-button-top-to-control-large: 12px; + --spectrum-radio-button-top-to-control-extra-large: 15px; + --spectrum-field-label-text-to-asterisk-small: 4px; + --spectrum-field-label-text-to-asterisk-medium: 4px; + --spectrum-field-label-text-to-asterisk-large: 5px; + --spectrum-field-label-text-to-asterisk-extra-large: 5px; + --spectrum-field-label-top-to-asterisk-small: 8px; + --spectrum-field-label-top-to-asterisk-medium: 12px; + --spectrum-field-label-top-to-asterisk-large: 15px; + --spectrum-field-label-top-to-asterisk-extra-large: 19px; + --spectrum-field-label-top-margin-medium: 4px; + --spectrum-field-label-top-margin-large: 5px; + --spectrum-field-label-top-margin-extra-large: 5px; + --spectrum-field-label-to-component-quiet-small: -8px; + --spectrum-field-label-to-component-quiet-medium: -8px; + --spectrum-field-label-to-component-quiet-large: -12px; + --spectrum-field-label-to-component-quiet-extra-large: -15px; + --spectrum-help-text-top-to-workflow-icon-small: 4px; + --spectrum-help-text-top-to-workflow-icon-medium: 3px; + --spectrum-help-text-top-to-workflow-icon-large: 6px; + --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; + --spectrum-status-light-dot-size-medium: 8px; + --spectrum-status-light-dot-size-large: 10px; + --spectrum-status-light-dot-size-extra-large: 10px; + --spectrum-status-light-top-to-dot-small: 8px; + --spectrum-status-light-top-to-dot-medium: 12px; + --spectrum-status-light-top-to-dot-large: 15px; + --spectrum-status-light-top-to-dot-extra-large: 19px; + --spectrum-action-button-edge-to-hold-icon-medium: 4px; + --spectrum-action-button-edge-to-hold-icon-large: 5px; + --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; + --spectrum-tooltip-tip-width: 8px; + --spectrum-tooltip-tip-height: 4px; + --spectrum-tooltip-maximum-width: 160px; + --spectrum-progress-circle-size-small: 16px; + --spectrum-progress-circle-size-medium: 32px; + --spectrum-progress-circle-size-large: 64px; + --spectrum-progress-circle-thickness-small: 2px; + --spectrum-progress-circle-thickness-medium: 3px; + --spectrum-progress-circle-thickness-large: 4px; + --spectrum-toast-height: 48px; + --spectrum-toast-maximum-width: 336px; + --spectrum-toast-top-to-workflow-icon: 15px; + --spectrum-toast-top-to-text: 14px; + --spectrum-toast-bottom-to-text: 17px; + --spectrum-action-bar-height: 48px; + --spectrum-action-bar-top-to-item-counter: 14px; + --spectrum-swatch-size-extra-small: 16px; + --spectrum-swatch-size-small: 24px; + --spectrum-swatch-size-medium: 32px; + --spectrum-swatch-size-large: 40px; + --spectrum-progress-bar-thickness-small: 4px; + --spectrum-progress-bar-thickness-medium: 6px; + --spectrum-progress-bar-thickness-large: 8px; + --spectrum-progress-bar-thickness-extra-large: 10px; + --spectrum-meter-width: 192px; + --spectrum-meter-thickness-small: 4px; + --spectrum-meter-thickness-large: 6px; + --spectrum-tag-top-to-avatar-small: 4px; + --spectrum-tag-top-to-avatar-medium: 6px; + --spectrum-tag-top-to-avatar-large: 9px; + --spectrum-tag-top-to-cross-icon-small: 8px; + --spectrum-tag-top-to-cross-icon-medium: 12px; + --spectrum-tag-top-to-cross-icon-large: 15px; + --spectrum-popover-top-to-content-area: 4px; + --spectrum-menu-item-edge-to-content-not-selected-small: 28px; + --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; + --spectrum-menu-item-edge-to-content-not-selected-large: 38px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; + --spectrum-menu-item-top-to-disclosure-icon-small: 7px; + --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; + --spectrum-menu-item-top-to-disclosure-icon-large: 14px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; + --spectrum-menu-item-top-to-selected-icon-small: 7px; + --spectrum-menu-item-top-to-selected-icon-medium: 11px; + --spectrum-menu-item-top-to-selected-icon-large: 14px; + --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; + --spectrum-slider-control-height-small: 14px; + --spectrum-slider-control-height-medium: 16px; + --spectrum-slider-control-height-large: 18px; + --spectrum-slider-control-height-extra-large: 20px; + --spectrum-slider-handle-size-small: 14px; + --spectrum-slider-handle-size-medium: 16px; + --spectrum-slider-handle-size-large: 18px; + --spectrum-slider-handle-size-extra-large: 20px; + --spectrum-slider-handle-border-width-down-small: 5px; + --spectrum-slider-handle-border-width-down-medium: 6px; + --spectrum-slider-handle-border-width-down-large: 7px; + --spectrum-slider-handle-border-width-down-extra-large: 8px; + --spectrum-slider-bottom-to-handle-small: 5px; + --spectrum-slider-bottom-to-handle-medium: 8px; + --spectrum-slider-bottom-to-handle-large: 11px; + --spectrum-slider-bottom-to-handle-extra-large: 14px; + --spectrum-slider-control-to-field-label-small: 5px; + --spectrum-slider-control-to-field-label-medium: 8px; + --spectrum-slider-control-to-field-label-large: 11px; + --spectrum-slider-control-to-field-label-extra-large: 14px; + --spectrum-picker-visual-to-disclosure-icon-small: 7px; + --spectrum-picker-visual-to-disclosure-icon-medium: 8px; + --spectrum-picker-visual-to-disclosure-icon-large: 9px; + --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; + --spectrum-text-area-minimum-width: 112px; + --spectrum-text-area-minimum-height: 56px; + --spectrum-combo-box-visual-to-field-button-small: 7px; + --spectrum-combo-box-visual-to-field-button-medium: 8px; + --spectrum-combo-box-visual-to-field-button-large: 9px; + --spectrum-combo-box-visual-to-field-button-extra-large: 10px; + --spectrum-thumbnail-size-50: 16px; + --spectrum-thumbnail-size-75: 18px; + --spectrum-thumbnail-size-100: 20px; + --spectrum-thumbnail-size-200: 22px; + --spectrum-thumbnail-size-300: 26px; + --spectrum-thumbnail-size-400: 28px; + --spectrum-thumbnail-size-500: 32px; + --spectrum-thumbnail-size-600: 36px; + --spectrum-thumbnail-size-700: 40px; + --spectrum-thumbnail-size-800: 44px; + --spectrum-thumbnail-size-900: 50px; + --spectrum-thumbnail-size-1000: 56px; + --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); + --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); + --spectrum-opacity-checkerboard-square-size: 8px; + --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); + --spectrum-breadcrumbs-height-multiline: 72px; + --spectrum-breadcrumbs-top-to-text: 13px; + --spectrum-breadcrumbs-top-to-text-compact: 11px; + --spectrum-breadcrumbs-top-to-text-multiline: 12px; + --spectrum-breadcrumbs-bottom-to-text: 15px; + --spectrum-breadcrumbs-bottom-to-text-compact: 12px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; + --spectrum-breadcrumbs-start-edge-to-text: 8px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; + --spectrum-breadcrumbs-top-to-separator-icon: 19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; + --spectrum-breadcrumbs-top-to-truncated-menu: 8px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; + --spectrum-avatar-size-50: 16px; + --spectrum-avatar-size-75: 18px; + --spectrum-avatar-size-100: 20px; + --spectrum-avatar-size-200: 22px; + --spectrum-avatar-size-300: 26px; + --spectrum-avatar-size-400: 28px; + --spectrum-avatar-size-500: 32px; + --spectrum-avatar-size-600: 36px; + --spectrum-avatar-size-700: 40px; + --spectrum-alert-banner-minimum-height: 48px; + --spectrum-alert-banner-width: 832px; + --spectrum-alert-banner-top-to-workflow-icon: 15px; + --spectrum-alert-banner-top-to-text: 14px; + --spectrum-alert-banner-bottom-to-text: 17px; + --spectrum-rating-indicator-width: 18px; + --spectrum-rating-indicator-to-icon: 4px; + --spectrum-color-area-width: 192px; + --spectrum-color-area-minimum-width: 64px; + --spectrum-color-area-height: 192px; + --spectrum-color-area-minimum-height: 64px; + --spectrum-color-wheel-width: 192px; + --spectrum-color-wheel-minimum-width: 175px; + --spectrum-color-slider-length: 192px; + --spectrum-color-slider-minimum-length: 80px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-m + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); + --spectrum-coach-mark-width: 296px; + --spectrum-coach-mark-minimum-width: 296px; + --spectrum-coach-mark-maximum-width: 380px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; + --spectrum-coach-mark-media-height: 222px; + --spectrum-coach-mark-media-minimum-height: 166px; + --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); + --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); + --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); + --spectrum-accordion-top-to-text-regular-small: 5px; + --spectrum-accordion-small-top-to-text-spacious: 9px; + --spectrum-accordion-top-to-text-regular-medium: 8px; + --spectrum-accordion-top-to-text-spacious-medium: 12px; + --spectrum-accordion-top-to-text-compact-large: 4px; + --spectrum-accordion-top-to-text-regular-large: 9px; + --spectrum-accordion-top-to-text-spacious-large: 12px; + --spectrum-accordion-top-to-text-compact-extra-large: 5px; + --spectrum-accordion-top-to-text-regular-extra-large: 9px; + --spectrum-accordion-top-to-text-spacious-extra-large: 13px; + --spectrum-accordion-bottom-to-text-compact-small: 2px; + --spectrum-accordion-bottom-to-text-regular-small: 7px; + --spectrum-accordion-bottom-to-text-spacious-small: 11px; + --spectrum-accordion-bottom-to-text-compact-medium: 5px; + --spectrum-accordion-bottom-to-text-regular-medium: 9px; + --spectrum-accordion-bottom-to-text-spacious-medium: 13px; + --spectrum-accordion-bottom-to-text-compact-large: 8px; + --spectrum-accordion-bottom-to-text-regular-large: 11px; + --spectrum-accordion-bottom-to-text-spacious-large: 16px; + --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; + --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; + --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; + --spectrum-accordion-minimum-width: 200px; + --spectrum-accordion-content-area-top-to-content: 8px; + --spectrum-accordion-content-area-bottom-to-content: 16px; + --spectrum-color-handle-size: 16px; + --spectrum-color-handle-size-key-focus: 32px; + --spectrum-table-column-header-row-top-to-text-small: 8px; + --spectrum-table-column-header-row-top-to-text-medium: 7px; + --spectrum-table-column-header-row-top-to-text-large: 10px; + --spectrum-table-column-header-row-top-to-text-extra-large: 13px; + --spectrum-table-column-header-row-bottom-to-text-small: 9px; + --spectrum-table-column-header-row-bottom-to-text-medium: 8px; + --spectrum-table-column-header-row-bottom-to-text-large: 10px; + --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; + --spectrum-table-row-height-small-regular: 32px; + --spectrum-table-row-height-medium-regular: 40px; + --spectrum-table-row-height-large-regular: 48px; + --spectrum-table-row-height-extra-large-regular: 56px; + --spectrum-table-row-height-small-spacious: 40px; + --spectrum-table-row-height-medium-spacious: 48px; + --spectrum-table-row-height-large-spacious: 56px; + --spectrum-table-row-height-extra-large-spacious: 64px; + --spectrum-table-row-top-to-text-small-regular: 8px; + --spectrum-table-row-top-to-text-medium-regular: 11px; + --spectrum-table-row-top-to-text-large-regular: 14px; + --spectrum-table-row-top-to-text-extra-large-regular: 17px; + --spectrum-table-row-bottom-to-text-small-regular: 9px; + --spectrum-table-row-bottom-to-text-medium-regular: 12px; + --spectrum-table-row-bottom-to-text-large-regular: 14px; + --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; + --spectrum-table-row-top-to-text-small-spacious: 12px; + --spectrum-table-row-top-to-text-medium-spacious: 15px; + --spectrum-table-row-top-to-text-large-spacious: 18px; + --spectrum-table-row-top-to-text-extra-large-spacious: 21px; + --spectrum-table-row-bottom-to-text-small-spacious: 13px; + --spectrum-table-row-bottom-to-text-medium-spacious: 16px; + --spectrum-table-row-bottom-to-text-large-spacious: 18px; + --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; + --spectrum-table-checkbox-to-text: 24px; + --spectrum-table-header-row-checkbox-to-top-small: 10px; + --spectrum-table-header-row-checkbox-to-top-medium: 9px; + --spectrum-table-header-row-checkbox-to-top-large: 12px; + --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; + --spectrum-table-row-checkbox-to-top-small-compact: 6px; + --spectrum-table-row-checkbox-to-top-small-regular: 10px; + --spectrum-table-row-checkbox-to-top-small-spacious: 14px; + --spectrum-table-row-checkbox-to-top-medium-compact: 9px; + --spectrum-table-row-checkbox-to-top-medium-regular: 13px; + --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; + --spectrum-table-row-checkbox-to-top-large-compact: 12px; + --spectrum-table-row-checkbox-to-top-large-regular: 16px; + --spectrum-table-row-checkbox-to-top-large-spacious: 20px; + --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; + --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; + --spectrum-table-section-header-row-height-small: 24px; + --spectrum-table-section-header-row-height-medium: 32px; + --spectrum-table-section-header-row-height-large: 40px; + --spectrum-table-section-header-row-height-extra-large: 48px; + --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; + --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; + --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; + --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; + --spectrum-tab-item-to-tab-item-horizontal-small: 21px; + --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; + --spectrum-tab-item-to-tab-item-horizontal-large: 27px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; + --spectrum-tab-item-to-tab-item-vertical-small: 4px; + --spectrum-tab-item-to-tab-item-vertical-medium: 4px; + --spectrum-tab-item-to-tab-item-vertical-large: 5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; + --spectrum-tab-item-start-to-edge-small: 12px; + --spectrum-tab-item-start-to-edge-medium: 12px; + --spectrum-tab-item-start-to-edge-large: 13px; + --spectrum-tab-item-start-to-edge-extra-large: 13px; + --spectrum-tab-item-top-to-text-small: 11px; + --spectrum-tab-item-bottom-to-text-small: 12px; + --spectrum-tab-item-top-to-text-medium: 14px; + --spectrum-tab-item-bottom-to-text-medium: 14px; + --spectrum-tab-item-top-to-text-large: 16px; + --spectrum-tab-item-bottom-to-text-large: 18px; + --spectrum-tab-item-top-to-text-extra-large: 19px; + --spectrum-tab-item-bottom-to-text-extra-large: 20px; + --spectrum-tab-item-top-to-text-compact-small: 4px; + --spectrum-tab-item-bottom-to-text-compact-small: 5px; + --spectrum-tab-item-top-to-text-compact-medium: 6px; + --spectrum-tab-item-bottom-to-text-compact-medium: 8px; + --spectrum-tab-item-top-to-text-compact-large: 10px; + --spectrum-tab-item-bottom-to-text-compact-large: 12px; + --spectrum-tab-item-top-to-text-compact-extra-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-small: 13px; + --spectrum-tab-item-top-to-workflow-icon-medium: 15px; + --spectrum-tab-item-top-to-workflow-icon-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; + --spectrum-tab-item-focus-indicator-gap-small: 7px; + --spectrum-tab-item-focus-indicator-gap-medium: 8px; + --spectrum-tab-item-focus-indicator-gap-large: 9px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; + --spectrum-side-navigation-width: 192px; + --spectrum-side-navigation-minimum-width: 160px; + --spectrum-side-navigation-maximum-width: 240px; + --spectrum-side-navigation-second-level-edge-to-text: 24px; + --spectrum-side-navigation-third-level-edge-to-text: 36px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; + --spectrum-side-navigation-item-to-item: 4px; + --spectrum-side-navigation-item-to-header: 24px; + --spectrum-side-navigation-header-to-item: 8px; + --spectrum-side-navigation-bottom-to-text: 8px; + --spectrum-tray-top-to-content-area: 4px; + --spectrum-accordion-top-to-text-spacious-small: 9px; + --spectrum-drop-shadow-y: 1px; + --spectrum-drop-shadow-blur: 4px; + --spectrum-text-to-visual-50: 5px; + --spectrum-text-to-visual-75: 5px; + --spectrum-text-to-visual-100: 6px; + --spectrum-text-to-visual-200: 7px; + --spectrum-text-to-visual-300: 8px; + --spectrum-text-to-visual-400: 9px; + --spectrum-text-to-control-75: 9px; + --spectrum-text-to-control-100: 10px; + --spectrum-text-to-control-200: 11px; + --spectrum-text-to-control-300: 13px; + --spectrum-component-height-50: 20px; + --spectrum-component-height-75: 24px; + --spectrum-component-height-100: 32px; + --spectrum-component-height-200: 40px; + --spectrum-component-height-300: 48px; + --spectrum-component-height-400: 56px; + --spectrum-component-height-500: 64px; + --spectrum-component-pill-edge-to-visual-75: 11px; + --spectrum-component-pill-edge-to-visual-100: 14px; + --spectrum-component-pill-edge-to-visual-200: 18px; + --spectrum-component-pill-edge-to-visual-300: 20px; + --spectrum-component-pill-edge-to-visual-only-75: 4px; + --spectrum-component-pill-edge-to-visual-only-100: 6px; + --spectrum-component-pill-edge-to-visual-only-200: 9px; + --spectrum-component-pill-edge-to-visual-only-300: 11px; + --spectrum-component-pill-edge-to-text-75: 13px; + --spectrum-component-pill-edge-to-text-100: 16px; + --spectrum-component-pill-edge-to-text-200: 20px; + --spectrum-component-pill-edge-to-text-300: 23px; + --spectrum-component-edge-to-visual-50: 7px; + --spectrum-component-edge-to-visual-75: 8px; + --spectrum-component-edge-to-visual-100: 10px; + --spectrum-component-edge-to-visual-200: 13px; + --spectrum-component-edge-to-visual-300: 14px; + --spectrum-component-edge-to-visual-only-50: 3px; + --spectrum-component-edge-to-visual-only-75: 4px; + --spectrum-component-edge-to-visual-only-100: 6px; + --spectrum-component-edge-to-visual-only-200: 9px; + --spectrum-component-edge-to-visual-only-300: 11px; + --spectrum-component-edge-to-text-50: 8px; + --spectrum-component-edge-to-text-75: 10px; + --spectrum-component-edge-to-text-100: 12px; + --spectrum-component-edge-to-text-200: 15px; + --spectrum-component-edge-to-text-300: 17px; + --spectrum-component-top-to-workflow-icon-50: 3px; + --spectrum-component-top-to-workflow-icon-75: 4px; + --spectrum-component-top-to-workflow-icon-100: 6px; + --spectrum-component-top-to-workflow-icon-200: 9px; + --spectrum-component-top-to-workflow-icon-300: 11px; + --spectrum-component-top-to-text-50: 3px; + --spectrum-component-top-to-text-75: 4px; + --spectrum-component-top-to-text-100: 6px; + --spectrum-component-top-to-text-200: 9px; + --spectrum-component-top-to-text-300: 12px; + --spectrum-component-bottom-to-text-50: 3px; + --spectrum-component-bottom-to-text-75: 5px; + --spectrum-component-bottom-to-text-100: 9px; + --spectrum-component-bottom-to-text-200: 11px; + --spectrum-component-bottom-to-text-300: 14px; + --spectrum-component-to-menu-small: 6px; + --spectrum-component-to-menu-medium: 6px; + --spectrum-component-to-menu-large: 7px; + --spectrum-component-to-menu-extra-large: 8px; + --spectrum-field-edge-to-disclosure-icon-75: 7px; + --spectrum-field-edge-to-disclosure-icon-100: 11px; + --spectrum-field-edge-to-disclosure-icon-200: 14px; + --spectrum-field-edge-to-disclosure-icon-300: 17px; + --spectrum-field-end-edge-to-disclosure-icon-75: 7px; + --spectrum-field-end-edge-to-disclosure-icon-100: 11px; + --spectrum-field-end-edge-to-disclosure-icon-200: 14px; + --spectrum-field-end-edge-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-disclosure-icon-75: 7px; + --spectrum-field-top-to-disclosure-icon-100: 11px; + --spectrum-field-top-to-disclosure-icon-200: 14px; + --spectrum-field-top-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-alert-icon-small: 4px; + --spectrum-field-top-to-alert-icon-medium: 7px; + --spectrum-field-top-to-alert-icon-large: 10px; + --spectrum-field-top-to-alert-icon-extra-large: 13px; + --spectrum-field-top-to-validation-icon-small: 7px; + --spectrum-field-top-to-validation-icon-medium: 11px; + --spectrum-field-top-to-validation-icon-large: 14px; + --spectrum-field-top-to-validation-icon-extra-large: 17px; + --spectrum-field-top-to-progress-circle-small: 4px; + --spectrum-field-top-to-progress-circle-medium: 8px; + --spectrum-field-top-to-progress-circle-large: 12px; + --spectrum-field-top-to-progress-circle-extra-large: 16px; + --spectrum-field-edge-to-alert-icon-small: 9px; + --spectrum-field-edge-to-alert-icon-medium: 12px; + --spectrum-field-edge-to-alert-icon-large: 15px; + --spectrum-field-edge-to-alert-icon-extra-large: 18px; + --spectrum-field-edge-to-validation-icon-small: 9px; + --spectrum-field-edge-to-validation-icon-medium: 12px; + --spectrum-field-edge-to-validation-icon-large: 15px; + --spectrum-field-edge-to-validation-icon-extra-large: 18px; + --spectrum-field-text-to-alert-icon-small: 8px; + --spectrum-field-text-to-alert-icon-medium: 12px; + --spectrum-field-text-to-alert-icon-large: 15px; + --spectrum-field-text-to-alert-icon-extra-large: 18px; + --spectrum-field-text-to-validation-icon-small: 8px; + --spectrum-field-text-to-validation-icon-medium: 12px; + --spectrum-field-text-to-validation-icon-large: 15px; + --spectrum-field-text-to-validation-icon-extra-large: 18px; + --spectrum-field-width: 192px; + --spectrum-character-count-to-field-quiet-small: -3px; + --spectrum-character-count-to-field-quiet-medium: -3px; + --spectrum-character-count-to-field-quiet-large: -3px; + --spectrum-character-count-to-field-quiet-extra-large: -4px; + --spectrum-side-label-character-count-to-field: 12px; + --spectrum-side-label-character-count-top-margin-small: 4px; + --spectrum-side-label-character-count-top-margin-medium: 8px; + --spectrum-side-label-character-count-top-margin-large: 11px; + --spectrum-side-label-character-count-top-margin-extra-large: 14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; + --spectrum-navigational-indicator-top-to-back-icon-small: 6px; + --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; + --spectrum-navigational-indicator-top-to-back-icon-large: 12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; + --spectrum-color-control-track-width: 24px; + --spectrum-font-size-50: 11px; + --spectrum-font-size-75: 12px; + --spectrum-font-size-100: 14px; + --spectrum-font-size-200: 16px; + --spectrum-font-size-300: 18px; + --spectrum-font-size-400: 20px; + --spectrum-font-size-500: 22px; + --spectrum-font-size-600: 25px; + --spectrum-font-size-700: 28px; + --spectrum-font-size-800: 32px; + --spectrum-font-size-900: 36px; + --spectrum-font-size-1000: 40px; + --spectrum-font-size-1100: 45px; + --spectrum-font-size-1200: 50px; + --spectrum-font-size-1300: 60px; + --spectrum-slider-tick-mark-height: 10px; + --spectrum-slider-ramp-track-height: 16px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; + --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; + --spectrum-menu-item-checkmark-height-small: 10px; + --spectrum-menu-item-checkmark-height-medium: 10px; + --spectrum-menu-item-checkmark-height-large: 12px; + --spectrum-menu-item-checkmark-height-extra-large: 14px; - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; + --spectrum-menu-item-checkmark-width-small: 10px; + --spectrum-menu-item-checkmark-width-medium: 10px; + --spectrum-menu-item-checkmark-width-large: 12px; + --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); + --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; + --spectrum-button-top-to-text-small: 5px; + --spectrum-button-bottom-to-text-small: 4px; + --spectrum-button-top-to-text-medium: 7px; + --spectrum-button-bottom-to-text-medium: 8px; + --spectrum-button-top-to-text-large: 10px; + --spectrum-button-bottom-to-text-large: 10px; + --spectrum-button-top-to-text-extra-large: 13px; + --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); + --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); + --spectrum-coach-indicator-gap: 6px; + --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; + --spectrum-coachmark-buttongroup-display: flex; + --spectrum-coachmark-buttongroup-mobile-display: none; + --spectrum-coachmark-menu-display: inline-flex; + --spectrum-coachmark-menu-mobile-display: none; + --spectrum-workflow-icon-size-xxl: 32px; + --spectrum-workflow-icon-size-xxs: 12px; - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start: 5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; + --spectrum-dialog-confirm-entry-animation-distance: 20px; + --spectrum-dialog-confirm-hero-height: 128px; + --spectrum-dialog-confirm-border-radius: 4px; + --spectrum-dialog-confirm-title-text-size: 18px; + --spectrum-dialog-confirm-description-text-size: 14px; + --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); + --spectrum-datepicker-initial-width: 128px; + --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height: 24px; + --spectrum-datepicker-width-quiet-first: 72px; + --spectrum-datepicker-width-quiet-second: 16px; + --spectrum-datepicker-datetime-width-first: 36px; + --spectrum-datepicker-invalid-icon-to-button: 8px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; + --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; + --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing: 5px; - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; + --spectrum-dial-border-radius: 16px; + --spectrum-dial-handle-position: 8px; + --spectrum-dial-handle-block-margin: 16px; + --spectrum-dial-handle-inline-margin: 16px; + --spectrum-dial-controls-margin: 8px; + --spectrum-dial-label-gap-y: 5px; + --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); + --spectrum-assetcard-focus-ring-border-radius: 8px; + --spectrum-assetcard-selectionindicator-margin: 12px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; + --spectrum-ui-icon-medium-display: block; + --spectrum-ui-icon-large-display: none; - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); } diff --git a/tools/styles/tokens-v2/large-vars.css b/tools/styles/tokens-v2/large-vars.css index 3d71f783c0..83e7f31361 100644 --- a/tools/styles/tokens-v2/large-vars.css +++ b/tools/styles/tokens-v2/large-vars.css @@ -1,646 +1,644 @@ :host, :root { - --spectrum-workflow-icon-size-50: 16px; - --spectrum-workflow-icon-size-75: 18px; - --spectrum-workflow-icon-size-100: 24px; - --spectrum-workflow-icon-size-200: 28px; - --spectrum-workflow-icon-size-300: 30px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-s - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-accordion-top-to-text-spacious-small: 12px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-text-to-visual-50: 7px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-visual-400: 11px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 15px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 21px; - --spectrum-component-pill-edge-to-visual-300: 28px; - --spectrum-component-pill-edge-to-visual-only-75: 6px; - --spectrum-component-pill-edge-to-visual-only-100: 8px; - --spectrum-component-pill-edge-to-visual-only-200: 11px; - --spectrum-component-pill-edge-to-visual-only-300: 15px; - --spectrum-component-pill-edge-to-text-75: 17px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 24px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 9px; - --spectrum-component-edge-to-visual-75: 11px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 15px; - --spectrum-component-edge-to-visual-300: 20px; - --spectrum-component-edge-to-visual-only-50: 5px; - --spectrum-component-edge-to-visual-only-75: 6px; - --spectrum-component-edge-to-visual-only-100: 8px; - --spectrum-component-edge-to-visual-only-200: 11px; - --spectrum-component-edge-to-visual-only-300: 15px; - --spectrum-component-edge-to-text-50: 11px; - --spectrum-component-edge-to-text-75: 13px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 18px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 5px; - --spectrum-component-top-to-workflow-icon-75: 6px; - --spectrum-component-top-to-workflow-icon-100: 8px; - --spectrum-component-top-to-workflow-icon-200: 11px; - --spectrum-component-top-to-workflow-icon-300: 15px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; + --spectrum-workflow-icon-size-50: 16px; + --spectrum-workflow-icon-size-75: 18px; + --spectrum-workflow-icon-size-100: 24px; + --spectrum-workflow-icon-size-200: 28px; + --spectrum-workflow-icon-size-300: 30px; + --spectrum-arrow-icon-size-75: 12px; + --spectrum-arrow-icon-size-100: 14px; + --spectrum-arrow-icon-size-200: 16px; + --spectrum-arrow-icon-size-300: 16px; + --spectrum-arrow-icon-size-400: 18px; + --spectrum-arrow-icon-size-500: 22px; + --spectrum-arrow-icon-size-600: 24px; + --spectrum-asterisk-icon-size-100: 10px; + --spectrum-asterisk-icon-size-200: 12px; + --spectrum-asterisk-icon-size-300: 12px; + --spectrum-checkmark-icon-size-50: 12px; + --spectrum-checkmark-icon-size-75: 12px; + --spectrum-checkmark-icon-size-100: 14px; + --spectrum-checkmark-icon-size-200: 14px; + --spectrum-checkmark-icon-size-300: 16px; + --spectrum-checkmark-icon-size-400: 18px; + --spectrum-checkmark-icon-size-500: 20px; + --spectrum-checkmark-icon-size-600: 24px; + --spectrum-chevron-icon-size-50: 8px; + --spectrum-chevron-icon-size-75: 12px; + --spectrum-chevron-icon-size-100: 14px; + --spectrum-chevron-icon-size-200: 14px; + --spectrum-chevron-icon-size-300: 16px; + --spectrum-chevron-icon-size-400: 18px; + --spectrum-chevron-icon-size-500: 20px; + --spectrum-chevron-icon-size-600: 24px; + --spectrum-corner-triangle-icon-size-75: 6px; + --spectrum-corner-triangle-icon-size-100: 7px; + --spectrum-corner-triangle-icon-size-200: 8px; + --spectrum-corner-triangle-icon-size-300: 8px; + --spectrum-cross-icon-size-75: 10px; + --spectrum-cross-icon-size-100: 10px; + --spectrum-cross-icon-size-200: 12px; + --spectrum-cross-icon-size-300: 14px; + --spectrum-cross-icon-size-400: 16px; + --spectrum-cross-icon-size-500: 16px; + --spectrum-cross-icon-size-600: 18px; + --spectrum-dash-icon-size-50: 10px; + --spectrum-dash-icon-size-75: 10px; + --spectrum-dash-icon-size-100: 12px; + --spectrum-dash-icon-size-200: 14px; + --spectrum-dash-icon-size-300: 16px; + --spectrum-dash-icon-size-400: 18px; + --spectrum-dash-icon-size-500: 20px; + --spectrum-dash-icon-size-600: 22px; + --spectrum-checkbox-control-size-small: 16px; + --spectrum-checkbox-control-size-medium: 18px; + --spectrum-checkbox-control-size-large: 20px; + --spectrum-checkbox-control-size-extra-large: 22px; + --spectrum-checkbox-top-to-control-small: 7px; + --spectrum-checkbox-top-to-control-medium: 11px; + --spectrum-checkbox-top-to-control-large: 15px; + --spectrum-checkbox-top-to-control-extra-large: 19px; + --spectrum-switch-control-width-small: 32px; + --spectrum-switch-control-width-medium: 36px; + --spectrum-switch-control-width-large: 41px; + --spectrum-switch-control-width-extra-large: 46px; + --spectrum-switch-control-height-small: 16px; + --spectrum-switch-control-height-medium: 18px; + --spectrum-switch-control-height-large: 20px; + --spectrum-switch-control-height-extra-large: 22px; + --spectrum-switch-top-to-control-small: 7px; + --spectrum-switch-top-to-control-medium: 11px; + --spectrum-switch-top-to-control-large: 15px; + --spectrum-switch-top-to-control-extra-large: 19px; + --spectrum-radio-button-control-size-small: 16px; + --spectrum-radio-button-control-size-medium: 18px; + --spectrum-radio-button-control-size-large: 20px; + --spectrum-radio-button-control-size-extra-large: 22px; + --spectrum-radio-button-top-to-control-small: 7px; + --spectrum-radio-button-top-to-control-medium: 11px; + --spectrum-radio-button-top-to-control-large: 15px; + --spectrum-radio-button-top-to-control-extra-large: 19px; + --spectrum-field-label-text-to-asterisk-small: 5px; + --spectrum-field-label-text-to-asterisk-medium: 5px; + --spectrum-field-label-text-to-asterisk-large: 6px; + --spectrum-field-label-text-to-asterisk-extra-large: 6px; + --spectrum-field-label-top-to-asterisk-small: 11px; + --spectrum-field-label-top-to-asterisk-medium: 15px; + --spectrum-field-label-top-to-asterisk-large: 19px; + --spectrum-field-label-top-to-asterisk-extra-large: 24px; + --spectrum-field-label-top-margin-medium: 5px; + --spectrum-field-label-top-margin-large: 6px; + --spectrum-field-label-top-margin-extra-large: 6px; + --spectrum-field-label-to-component-quiet-small: -10px; + --spectrum-field-label-to-component-quiet-medium: -10px; + --spectrum-field-label-to-component-quiet-large: -15px; + --spectrum-field-label-to-component-quiet-extra-large: -19px; + --spectrum-help-text-top-to-workflow-icon-small: 5px; + --spectrum-help-text-top-to-workflow-icon-medium: 4px; + --spectrum-help-text-top-to-workflow-icon-large: 8px; + --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; + --spectrum-status-light-dot-size-medium: 10px; + --spectrum-status-light-dot-size-large: 12px; + --spectrum-status-light-dot-size-extra-large: 12px; + --spectrum-status-light-top-to-dot-small: 11px; + --spectrum-status-light-top-to-dot-medium: 15px; + --spectrum-status-light-top-to-dot-large: 19px; + --spectrum-status-light-top-to-dot-extra-large: 24px; + --spectrum-action-button-edge-to-hold-icon-medium: 5px; + --spectrum-action-button-edge-to-hold-icon-large: 6px; + --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; + --spectrum-tooltip-tip-width: 10px; + --spectrum-tooltip-tip-height: 5px; + --spectrum-tooltip-maximum-width: 200px; + --spectrum-progress-circle-size-small: 20px; + --spectrum-progress-circle-size-medium: 40px; + --spectrum-progress-circle-size-large: 80px; + --spectrum-progress-circle-thickness-small: 3px; + --spectrum-progress-circle-thickness-medium: 4px; + --spectrum-progress-circle-thickness-large: 5px; + --spectrum-toast-height: 56px; + --spectrum-toast-maximum-width: 420px; + --spectrum-toast-top-to-workflow-icon: 17px; + --spectrum-toast-top-to-text: 16px; + --spectrum-toast-bottom-to-text: 19px; + --spectrum-action-bar-height: 56px; + --spectrum-action-bar-top-to-item-counter: 16px; + --spectrum-swatch-size-extra-small: 20px; + --spectrum-swatch-size-small: 30px; + --spectrum-swatch-size-medium: 40px; + --spectrum-swatch-size-large: 50px; + --spectrum-progress-bar-thickness-small: 5px; + --spectrum-progress-bar-thickness-medium: 8px; + --spectrum-progress-bar-thickness-large: 10px; + --spectrum-progress-bar-thickness-extra-large: 13px; + --spectrum-meter-width: 240px; + --spectrum-meter-thickness-small: 5px; + --spectrum-meter-thickness-large: 8px; + --spectrum-tag-top-to-avatar-small: 5px; + --spectrum-tag-top-to-avatar-medium: 7px; + --spectrum-tag-top-to-avatar-large: 11px; + --spectrum-tag-top-to-cross-icon-small: 10px; + --spectrum-tag-top-to-cross-icon-medium: 15px; + --spectrum-tag-top-to-cross-icon-large: 19px; + --spectrum-popover-top-to-content-area: 5px; + --spectrum-menu-item-edge-to-content-not-selected-small: 24px; + --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; + --spectrum-menu-item-edge-to-content-not-selected-large: 47px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; + --spectrum-menu-item-top-to-disclosure-icon-small: 9px; + --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; + --spectrum-menu-item-top-to-disclosure-icon-large: 17px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; + --spectrum-menu-item-top-to-selected-icon-small: 9px; + --spectrum-menu-item-top-to-selected-icon-medium: 13px; + --spectrum-menu-item-top-to-selected-icon-large: 17px; + --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; + --spectrum-slider-control-height-small: 18px; + --spectrum-slider-control-height-medium: 20px; + --spectrum-slider-control-height-large: 22px; + --spectrum-slider-control-height-extra-large: 26px; + --spectrum-slider-handle-size-small: 18px; + --spectrum-slider-handle-size-medium: 20px; + --spectrum-slider-handle-size-large: 22px; + --spectrum-slider-handle-size-extra-large: 26px; + --spectrum-slider-handle-border-width-down-small: 7px; + --spectrum-slider-handle-border-width-down-medium: 8px; + --spectrum-slider-handle-border-width-down-large: 9px; + --spectrum-slider-handle-border-width-down-extra-large: 11px; + --spectrum-slider-bottom-to-handle-small: 6px; + --spectrum-slider-bottom-to-handle-medium: 10px; + --spectrum-slider-bottom-to-handle-large: 14px; + --spectrum-slider-bottom-to-handle-extra-large: 17px; + --spectrum-slider-control-to-field-label-small: 6px; + --spectrum-slider-control-to-field-label-medium: 10px; + --spectrum-slider-control-to-field-label-large: 14px; + --spectrum-slider-control-to-field-label-extra-large: 17px; + --spectrum-picker-visual-to-disclosure-icon-small: 9px; + --spectrum-picker-visual-to-disclosure-icon-medium: 10px; + --spectrum-picker-visual-to-disclosure-icon-large: 11px; + --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; + --spectrum-text-area-minimum-width: 140px; + --spectrum-text-area-minimum-height: 70px; + --spectrum-combo-box-visual-to-field-button-small: 9px; + --spectrum-combo-box-visual-to-field-button-medium: 10px; + --spectrum-combo-box-visual-to-field-button-large: 11px; + --spectrum-combo-box-visual-to-field-button-extra-large: 13px; + --spectrum-thumbnail-size-50: 20px; + --spectrum-thumbnail-size-75: 22px; + --spectrum-thumbnail-size-100: 26px; + --spectrum-thumbnail-size-200: 28px; + --spectrum-thumbnail-size-300: 32px; + --spectrum-thumbnail-size-400: 36px; + --spectrum-thumbnail-size-500: 40px; + --spectrum-thumbnail-size-600: 46px; + --spectrum-thumbnail-size-700: 50px; + --spectrum-thumbnail-size-800: 55px; + --spectrum-thumbnail-size-900: 62px; + --spectrum-thumbnail-size-1000: 70px; + --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); + --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); + --spectrum-opacity-checkerboard-square-size: 10px; + --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); + --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); + --spectrum-breadcrumbs-height-multiline: 84px; + --spectrum-breadcrumbs-top-to-text: 17px; + --spectrum-breadcrumbs-top-to-text-compact: 16px; + --spectrum-breadcrumbs-top-to-text-multiline: 15px; + --spectrum-breadcrumbs-bottom-to-text: 19px; + --spectrum-breadcrumbs-bottom-to-text-compact: 19px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; + --spectrum-breadcrumbs-start-edge-to-text: 9px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; + --spectrum-breadcrumbs-top-to-separator-icon: 25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; + --spectrum-breadcrumbs-top-to-truncated-menu: 10px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; + --spectrum-avatar-size-50: 20px; + --spectrum-avatar-size-75: 22px; + --spectrum-avatar-size-100: 26px; + --spectrum-avatar-size-200: 28px; + --spectrum-avatar-size-300: 32px; + --spectrum-avatar-size-400: 36px; + --spectrum-avatar-size-500: 40px; + --spectrum-avatar-size-600: 46px; + --spectrum-avatar-size-700: 50px; + --spectrum-alert-banner-minimum-height: 64px; + --spectrum-alert-banner-width: 680px; + --spectrum-alert-banner-top-to-workflow-icon: 21px; + --spectrum-alert-banner-top-to-text: 21px; + --spectrum-alert-banner-bottom-to-text: 22px; + --spectrum-rating-indicator-width: 22px; + --spectrum-rating-indicator-to-icon: 5px; + --spectrum-color-area-width: 240px; + --spectrum-color-area-minimum-width: 80px; + --spectrum-color-area-height: 240px; + --spectrum-color-area-minimum-height: 80px; + --spectrum-color-wheel-width: 240px; + --spectrum-color-wheel-minimum-width: 219px; + --spectrum-color-slider-length: 240px; + --spectrum-color-slider-minimum-length: 100px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-s + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); + --spectrum-coach-mark-width: 216px; + --spectrum-coach-mark-minimum-width: 216px; + --spectrum-coach-mark-maximum-width: 248px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; + --spectrum-coach-mark-media-height: 162px; + --spectrum-coach-mark-media-minimum-height: 121px; + --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); + --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); + --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); + --spectrum-accordion-top-to-text-regular-small: 7px; + --spectrum-accordion-small-top-to-text-spacious: 12px; + --spectrum-accordion-top-to-text-regular-medium: 9px; + --spectrum-accordion-top-to-text-spacious-medium: 14px; + --spectrum-accordion-top-to-text-compact-large: 7px; + --spectrum-accordion-top-to-text-regular-large: 12px; + --spectrum-accordion-top-to-text-spacious-large: 14px; + --spectrum-accordion-top-to-text-compact-extra-large: 7px; + --spectrum-accordion-top-to-text-regular-extra-large: 12px; + --spectrum-accordion-top-to-text-spacious-extra-large: 14px; + --spectrum-accordion-bottom-to-text-compact-small: 4px; + --spectrum-accordion-bottom-to-text-regular-small: 9px; + --spectrum-accordion-bottom-to-text-spacious-small: 14px; + --spectrum-accordion-bottom-to-text-compact-medium: 8px; + --spectrum-accordion-bottom-to-text-regular-medium: 13px; + --spectrum-accordion-bottom-to-text-spacious-medium: 18px; + --spectrum-accordion-bottom-to-text-compact-large: 9px; + --spectrum-accordion-bottom-to-text-regular-large: 14px; + --spectrum-accordion-bottom-to-text-spacious-large: 19px; + --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; + --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; + --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; + --spectrum-accordion-minimum-width: 250px; + --spectrum-accordion-content-area-top-to-content: 10px; + --spectrum-accordion-content-area-bottom-to-content: 20px; + --spectrum-color-handle-size: 20px; + --spectrum-color-handle-size-key-focus: 40px; + --spectrum-table-column-header-row-top-to-text-small: 10px; + --spectrum-table-column-header-row-top-to-text-medium: 9px; + --spectrum-table-column-header-row-top-to-text-large: 13px; + --spectrum-table-column-header-row-top-to-text-extra-large: 16px; + --spectrum-table-column-header-row-bottom-to-text-small: 11px; + --spectrum-table-column-header-row-bottom-to-text-medium: 10px; + --spectrum-table-column-header-row-bottom-to-text-large: 13px; + --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; + --spectrum-table-row-height-small-regular: 40px; + --spectrum-table-row-height-medium-regular: 50px; + --spectrum-table-row-height-large-regular: 60px; + --spectrum-table-row-height-extra-large-regular: 70px; + --spectrum-table-row-height-small-spacious: 50px; + --spectrum-table-row-height-medium-spacious: 60px; + --spectrum-table-row-height-large-spacious: 70px; + --spectrum-table-row-height-extra-large-spacious: 80px; + --spectrum-table-row-top-to-text-small-regular: 10px; + --spectrum-table-row-top-to-text-medium-regular: 14px; + --spectrum-table-row-top-to-text-large-regular: 18px; + --spectrum-table-row-top-to-text-extra-large-regular: 21px; + --spectrum-table-row-bottom-to-text-small-regular: 11px; + --spectrum-table-row-bottom-to-text-medium-regular: 15px; + --spectrum-table-row-bottom-to-text-large-regular: 18px; + --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; + --spectrum-table-row-top-to-text-small-spacious: 15px; + --spectrum-table-row-top-to-text-medium-spacious: 18px; + --spectrum-table-row-top-to-text-large-spacious: 23px; + --spectrum-table-row-top-to-text-extra-large-spacious: 26px; + --spectrum-table-row-bottom-to-text-small-spacious: 16px; + --spectrum-table-row-bottom-to-text-medium-spacious: 18px; + --spectrum-table-row-bottom-to-text-large-spacious: 23px; + --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; + --spectrum-table-checkbox-to-text: 30px; + --spectrum-table-header-row-checkbox-to-top-small: 14px; + --spectrum-table-header-row-checkbox-to-top-medium: 13px; + --spectrum-table-header-row-checkbox-to-top-large: 17px; + --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; + --spectrum-table-row-checkbox-to-top-small-compact: 9px; + --spectrum-table-row-checkbox-to-top-small-regular: 14px; + --spectrum-table-row-checkbox-to-top-small-spacious: 19px; + --spectrum-table-row-checkbox-to-top-medium-compact: 13px; + --spectrum-table-row-checkbox-to-top-medium-regular: 18px; + --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; + --spectrum-table-row-checkbox-to-top-large-compact: 17px; + --spectrum-table-row-checkbox-to-top-large-regular: 22px; + --spectrum-table-row-checkbox-to-top-large-spacious: 27px; + --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; + --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; + --spectrum-table-section-header-row-height-small: 30px; + --spectrum-table-section-header-row-height-medium: 40px; + --spectrum-table-section-header-row-height-large: 50px; + --spectrum-table-section-header-row-height-extra-large: 60px; + --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; + --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; + --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; + --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; + --spectrum-tab-item-to-tab-item-horizontal-small: 27px; + --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; + --spectrum-tab-item-to-tab-item-horizontal-large: 33px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; + --spectrum-tab-item-to-tab-item-vertical-small: 5px; + --spectrum-tab-item-to-tab-item-vertical-medium: 5px; + --spectrum-tab-item-to-tab-item-vertical-large: 6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; + --spectrum-tab-item-start-to-edge-small: 13px; + --spectrum-tab-item-start-to-edge-medium: 15px; + --spectrum-tab-item-start-to-edge-large: 17px; + --spectrum-tab-item-start-to-edge-extra-large: 19px; + --spectrum-tab-item-top-to-text-small: 14px; + --spectrum-tab-item-bottom-to-text-small: 15px; + --spectrum-tab-item-top-to-text-medium: 18px; + --spectrum-tab-item-bottom-to-text-medium: 19px; + --spectrum-tab-item-top-to-text-large: 22px; + --spectrum-tab-item-bottom-to-text-large: 22px; + --spectrum-tab-item-top-to-text-extra-large: 25px; + --spectrum-tab-item-bottom-to-text-extra-large: 25px; + --spectrum-tab-item-top-to-text-compact-small: 5px; + --spectrum-tab-item-bottom-to-text-compact-small: 6px; + --spectrum-tab-item-top-to-text-compact-medium: 9px; + --spectrum-tab-item-bottom-to-text-compact-medium: 10px; + --spectrum-tab-item-top-to-text-compact-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-large: 14px; + --spectrum-tab-item-top-to-text-compact-extra-large: 15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-small: 15px; + --spectrum-tab-item-top-to-workflow-icon-medium: 19px; + --spectrum-tab-item-top-to-workflow-icon-large: 23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; + --spectrum-tab-item-focus-indicator-gap-small: 9px; + --spectrum-tab-item-focus-indicator-gap-medium: 10px; + --spectrum-tab-item-focus-indicator-gap-large: 11px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; + --spectrum-side-navigation-width: 240px; + --spectrum-side-navigation-minimum-width: 200px; + --spectrum-side-navigation-maximum-width: 300px; + --spectrum-side-navigation-second-level-edge-to-text: 30px; + --spectrum-side-navigation-third-level-edge-to-text: 45px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; + --spectrum-side-navigation-item-to-item: 5px; + --spectrum-side-navigation-item-to-header: 30px; + --spectrum-side-navigation-header-to-item: 10px; + --spectrum-side-navigation-bottom-to-text: 10px; + --spectrum-tray-top-to-content-area: 5px; + --spectrum-accordion-top-to-text-spacious-small: 12px; + --spectrum-drop-shadow-y: 2px; + --spectrum-drop-shadow-blur: 6px; + --spectrum-text-to-visual-50: 7px; + --spectrum-text-to-visual-75: 7px; + --spectrum-text-to-visual-100: 8px; + --spectrum-text-to-visual-200: 9px; + --spectrum-text-to-visual-300: 10px; + --spectrum-text-to-visual-400: 11px; + --spectrum-text-to-control-75: 11px; + --spectrum-text-to-control-100: 13px; + --spectrum-text-to-control-200: 14px; + --spectrum-text-to-control-300: 16px; + --spectrum-component-height-50: 26px; + --spectrum-component-height-75: 30px; + --spectrum-component-height-100: 40px; + --spectrum-component-height-200: 50px; + --spectrum-component-height-300: 60px; + --spectrum-component-height-400: 70px; + --spectrum-component-height-500: 80px; + --spectrum-component-pill-edge-to-visual-75: 15px; + --spectrum-component-pill-edge-to-visual-100: 17px; + --spectrum-component-pill-edge-to-visual-200: 21px; + --spectrum-component-pill-edge-to-visual-300: 28px; + --spectrum-component-pill-edge-to-visual-only-75: 6px; + --spectrum-component-pill-edge-to-visual-only-100: 8px; + --spectrum-component-pill-edge-to-visual-only-200: 11px; + --spectrum-component-pill-edge-to-visual-only-300: 15px; + --spectrum-component-pill-edge-to-text-75: 17px; + --spectrum-component-pill-edge-to-text-100: 20px; + --spectrum-component-pill-edge-to-text-200: 24px; + --spectrum-component-pill-edge-to-text-300: 30px; + --spectrum-component-edge-to-visual-50: 9px; + --spectrum-component-edge-to-visual-75: 11px; + --spectrum-component-edge-to-visual-100: 12px; + --spectrum-component-edge-to-visual-200: 15px; + --spectrum-component-edge-to-visual-300: 20px; + --spectrum-component-edge-to-visual-only-50: 5px; + --spectrum-component-edge-to-visual-only-75: 6px; + --spectrum-component-edge-to-visual-only-100: 8px; + --spectrum-component-edge-to-visual-only-200: 11px; + --spectrum-component-edge-to-visual-only-300: 15px; + --spectrum-component-edge-to-text-50: 11px; + --spectrum-component-edge-to-text-75: 13px; + --spectrum-component-edge-to-text-100: 15px; + --spectrum-component-edge-to-text-200: 18px; + --spectrum-component-edge-to-text-300: 22px; + --spectrum-component-top-to-workflow-icon-50: 5px; + --spectrum-component-top-to-workflow-icon-75: 6px; + --spectrum-component-top-to-workflow-icon-100: 8px; + --spectrum-component-top-to-workflow-icon-200: 11px; + --spectrum-component-top-to-workflow-icon-300: 15px; + --spectrum-component-top-to-text-50: 4px; + --spectrum-component-top-to-text-75: 5px; + --spectrum-component-top-to-text-100: 8px; + --spectrum-component-top-to-text-200: 12px; + --spectrum-component-top-to-text-300: 15px; + --spectrum-component-bottom-to-text-50: 6px; + --spectrum-component-bottom-to-text-75: 6px; + --spectrum-component-bottom-to-text-100: 11px; + --spectrum-component-bottom-to-text-200: 14px; + --spectrum-component-bottom-to-text-300: 18px; + --spectrum-component-to-menu-small: 7px; + --spectrum-component-to-menu-medium: 8px; + --spectrum-component-to-menu-large: 9px; + --spectrum-component-to-menu-extra-large: 10px; + --spectrum-field-edge-to-disclosure-icon-75: 9px; + --spectrum-field-edge-to-disclosure-icon-100: 13px; + --spectrum-field-edge-to-disclosure-icon-200: 17px; + --spectrum-field-edge-to-disclosure-icon-300: 22px; + --spectrum-field-end-edge-to-disclosure-icon-75: 9px; + --spectrum-field-end-edge-to-disclosure-icon-100: 13px; + --spectrum-field-end-edge-to-disclosure-icon-200: 17px; + --spectrum-field-end-edge-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-disclosure-icon-75: 9px; + --spectrum-field-top-to-disclosure-icon-100: 13px; + --spectrum-field-top-to-disclosure-icon-200: 17px; + --spectrum-field-top-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-alert-icon-small: 5px; + --spectrum-field-top-to-alert-icon-medium: 9px; + --spectrum-field-top-to-alert-icon-large: 13px; + --spectrum-field-top-to-alert-icon-extra-large: 16px; + --spectrum-field-top-to-validation-icon-small: 9px; + --spectrum-field-top-to-validation-icon-medium: 13px; + --spectrum-field-top-to-validation-icon-large: 17px; + --spectrum-field-top-to-validation-icon-extra-large: 22px; + --spectrum-field-top-to-progress-circle-small: 7px; + --spectrum-field-top-to-progress-circle-medium: 12px; + --spectrum-field-top-to-progress-circle-large: 17px; + --spectrum-field-top-to-progress-circle-extra-large: 22px; + --spectrum-field-edge-to-alert-icon-small: 11px; + --spectrum-field-edge-to-alert-icon-medium: 15px; + --spectrum-field-edge-to-alert-icon-large: 19px; + --spectrum-field-edge-to-alert-icon-extra-large: 22px; + --spectrum-field-edge-to-validation-icon-small: 11px; + --spectrum-field-edge-to-validation-icon-medium: 15px; + --spectrum-field-edge-to-validation-icon-large: 19px; + --spectrum-field-edge-to-validation-icon-extra-large: 22px; + --spectrum-field-text-to-alert-icon-small: 10px; + --spectrum-field-text-to-alert-icon-medium: 15px; + --spectrum-field-text-to-alert-icon-large: 19px; + --spectrum-field-text-to-alert-icon-extra-large: 22px; + --spectrum-field-text-to-validation-icon-small: 10px; + --spectrum-field-text-to-validation-icon-medium: 15px; + --spectrum-field-text-to-validation-icon-large: 19px; + --spectrum-field-text-to-validation-icon-extra-large: 22px; + --spectrum-field-width: 240px; + --spectrum-character-count-to-field-quiet-small: -4px; + --spectrum-character-count-to-field-quiet-medium: -4px; + --spectrum-character-count-to-field-quiet-large: -4px; + --spectrum-character-count-to-field-quiet-extra-large: -5px; + --spectrum-side-label-character-count-to-field: 15px; + --spectrum-side-label-character-count-top-margin-small: 5px; + --spectrum-side-label-character-count-top-margin-medium: 10px; + --spectrum-side-label-character-count-top-margin-large: 14px; + --spectrum-side-label-character-count-top-margin-extra-large: 18px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; + --spectrum-navigational-indicator-top-to-back-icon-small: 7px; + --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; + --spectrum-navigational-indicator-top-to-back-icon-large: 16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; + --spectrum-color-control-track-width: 30px; + --spectrum-font-size-50: 13px; + --spectrum-font-size-75: 15px; + --spectrum-font-size-100: 17px; + --spectrum-font-size-200: 19px; + --spectrum-font-size-300: 22px; + --spectrum-font-size-400: 24px; + --spectrum-font-size-500: 27px; + --spectrum-font-size-600: 31px; + --spectrum-font-size-700: 34px; + --spectrum-font-size-800: 39px; + --spectrum-font-size-900: 44px; + --spectrum-font-size-1000: 49px; + --spectrum-font-size-1100: 55px; + --spectrum-font-size-1200: 62px; + --spectrum-font-size-1300: 70px; + --spectrum-slider-tick-mark-height: 13px; + --spectrum-slider-ramp-track-height: 20px; - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; + --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + --spectrum-colorwheel-colorarea-container-size: 182px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; + --spectrum-menu-item-checkmark-height-small: 12px; + --spectrum-menu-item-checkmark-height-medium: 14px; + --spectrum-menu-item-checkmark-height-large: 16px; + --spectrum-menu-item-checkmark-height-extra-large: 16px; - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; + --spectrum-menu-item-checkmark-width-small: 12px; + --spectrum-menu-item-checkmark-width-medium: 14px; + --spectrum-menu-item-checkmark-width-large: 16px; + --spectrum-menu-item-checkmark-width-extra-large: 16px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); + --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; + --spectrum-button-top-to-text-small: 6px; + --spectrum-button-bottom-to-text-small: 5px; + --spectrum-button-top-to-text-medium: 9px; + --spectrum-button-bottom-to-text-medium: 10px; + --spectrum-button-top-to-text-large: 12px; + --spectrum-button-bottom-to-text-large: 13px; + --spectrum-button-top-to-text-extra-large: 16px; + --spectrum-button-bottom-to-text-extra-large: 17px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); + --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; + --spectrum-coach-indicator-gap: 8px; + --spectrum-coach-indicator-ring-diameter: 20px; + --spectrum-coach-indicator-quiet-ring-diameter: 10px; - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; + --spectrum-coachmark-buttongroup-display: none; + --spectrum-coachmark-buttongroup-mobile-display: flex; + --spectrum-coachmark-menu-display: none; + --spectrum-coachmark-menu-mobile-display: inline-flex; + --spectrum-workflow-icon-size-xxl: 40px; + --spectrum-workflow-icon-size-xxs: 15px; - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; + --spectrum-dialog-confirm-entry-animation-distance: 25px; + --spectrum-dialog-confirm-hero-height: 160px; + --spectrum-dialog-confirm-border-radius: 5px; + --spectrum-dialog-confirm-title-text-size: 19px; + --spectrum-dialog-confirm-description-text-size: 15px; + --spectrum-dialog-confirm-padding-grid: 24px; - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; + --spectrum-datepicker-initial-width: 160px; + --spectrum-datepicker-generic-padding: 15px; + --spectrum-datepicker-dash-line-height: 30px; + --spectrum-datepicker-width-quiet-first: 90px; + --spectrum-datepicker-width-quiet-second: 20px; + --spectrum-datepicker-datetime-width-first: 45px; + --spectrum-datepicker-invalid-icon-to-button: 10px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; + --spectrum-datepicker-input-datetime-width: 30px; - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; + --spectrum-pagination-textfield-width: 60px; + --spectrum-pagination-item-inline-spacing: 6px; - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; + --spectrum-dial-border-radius: 20px; + --spectrum-dial-handle-position: 10px; + --spectrum-dial-handle-block-margin: 20px; + --spectrum-dial-handle-inline-margin: 20px; + --spectrum-dial-controls-margin: 10px; + --spectrum-dial-label-gap-y: 6px; + --spectrum-dial-label-container-top-to-text: 5px; - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); + --spectrum-assetcard-focus-ring-border-radius: 9px; + --spectrum-assetcard-selectionindicator-margin: 15px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xxs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - --spectrum-tooltip-animation-distance: 5px; + --spectrum-tooltip-animation-distance: 5px; - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; + --spectrum-ui-icon-medium-display: none; + --spectrum-ui-icon-large-display: block; - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); } diff --git a/tools/styles/tokens-v2/light-vars.css b/tools/styles/tokens-v2/light-vars.css index 18cd1d732a..c7b506548c 100644 --- a/tools/styles/tokens-v2/light-vars.css +++ b/tools/styles/tokens-v2/light-vars.css @@ -1,1031 +1,1005 @@ :host, :root { - --spectrum-overlay-opacity: 0.4; - --spectrum-background-layer-2-color: var(--spectrum-gray-25); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-900 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-900 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-1000 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-900 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-600 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-500 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-800); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-background-elevated-color: var(--spectrum-gray-25); - --spectrum-background-pasteboard-color: var(--spectrum-gray-100); - --spectrum-brown-visual-color: var(--spectrum-brown-800); - --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); - --spectrum-pink-visual-color: var(--spectrum-pink-800); - --spectrum-silver-visual-color: var(--spectrum-silver-800); - --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); - --spectrum-brown-background-color-default: var(--spectrum-brown-900); - --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); - --spectrum-pink-background-color-default: var(--spectrum-pink-900); - --spectrum-silver-background-color-default: var(--spectrum-silver-900); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-900 - ); - --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-100-opacity: 0.12; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); - --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-200-opacity: 0.16; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); - --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-300-opacity: 0.2; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-100 - ); - --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100); - --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200); - --spectrum-green-subtle-background-color-default: var(--spectrum-green-200); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-200 - ); - --spectrum-red-subtle-background-color-default: var(--spectrum-red-200); - --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-200 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-200 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-200 - ); - --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-200 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-200 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-200 - ); - --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-200 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-200 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-200 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-200 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-200 - ); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-25-rgb: 255, 255, 255; - --spectrum-transparent-white-25-opacity: 0; - --spectrum-transparent-white-25: rgba( - var(--spectrum-transparent-white-25-rgb), - var(--spectrum-transparent-white-25-opacity) - ); - --spectrum-transparent-white-50-rgb: 255, 255, 255; - --spectrum-transparent-white-50-opacity: 0.04; - --spectrum-transparent-white-50: rgba( - var(--spectrum-transparent-white-50-rgb), - var(--spectrum-transparent-white-50-opacity) - ); - --spectrum-transparent-white-75-rgb: 255, 255, 255; - --spectrum-transparent-white-75-opacity: 0.07; - --spectrum-transparent-white-75: rgba( - var(--spectrum-transparent-white-75-rgb), - var(--spectrum-transparent-white-75-opacity) - ); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0.11; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.14; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.17; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.21; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.39; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.51; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.66; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.85; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900-opacity: 0.94; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb), - var(--spectrum-transparent-white-900-opacity) - ); - --spectrum-transparent-white-1000-rgb: 255, 255, 255; - --spectrum-transparent-white-1000: rgba( - var(--spectrum-transparent-white-1000-rgb) - ); - --spectrum-transparent-black-25-rgb: 0, 0, 0; - --spectrum-transparent-black-25-opacity: 0; - --spectrum-transparent-black-25: rgba( - var(--spectrum-transparent-black-25-rgb), - var(--spectrum-transparent-black-25-opacity) - ); - --spectrum-transparent-black-50-rgb: 0, 0, 0; - --spectrum-transparent-black-50-opacity: 0.03; - --spectrum-transparent-black-50: rgba( - var(--spectrum-transparent-black-50-rgb), - var(--spectrum-transparent-black-50-opacity) - ); - --spectrum-transparent-black-75-rgb: 0, 0, 0; - --spectrum-transparent-black-75-opacity: 0.05; - --spectrum-transparent-black-75: rgba( - var(--spectrum-transparent-black-75-rgb), - var(--spectrum-transparent-black-75-opacity) - ); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0.09; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.12; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.15; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.22; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.44; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.56; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.69; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.84; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900-opacity: 0.93; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb), - var(--spectrum-transparent-black-900-opacity) - ); - --spectrum-gray-25-rgb: 255, 255, 255; - --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); - --spectrum-gray-50-rgb: 248, 248, 248; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 243, 243, 243; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 233, 233, 233; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 225, 225, 225; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 218, 218, 218; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 198, 198, 198; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 143, 143, 143; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 113, 113, 113; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 80, 80, 80; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 41, 41, 41; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 19, 19, 19; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-gray-1000-rgb: 0, 0, 0; - --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); - --spectrum-blue-100-rgb: 245, 249, 255; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 229, 240, 254; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 203, 226, 254; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 172, 207, 253; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 142, 185, 252; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 114, 158, 253; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 93, 137, 255; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 75, 117, 255; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 59, 99, 251; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 39, 77, 234; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 29, 62, 207; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 21, 50, 173; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 16, 40, 140; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 12, 31, 105; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-blue-1500-rgb: 14, 24, 67; - --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); - --spectrum-blue-1600-rgb: 7, 11, 30; - --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); - --spectrum-red-100-rgb: 255, 246, 245; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 255, 235, 232; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 255, 214, 209; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 255, 188, 180; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 255, 157, 145; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 255, 118, 101; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 255, 81, 61; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 240, 56, 35; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 215, 50, 32; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 183, 40, 24; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 156, 33, 19; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 129, 27, 14; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 104, 21, 10; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 80, 16, 6; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-red-1500-rgb: 59, 11, 4; - --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); - --spectrum-red-1600-rgb: 29, 5, 2; - --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); - --spectrum-orange-100-rgb: 255, 246, 231; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 255, 236, 207; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 255, 218, 158; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 255, 193, 94; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 255, 162, 19; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 252, 125, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 232, 106, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 212, 91, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 194, 78, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 167, 62, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 144, 51, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 118, 41, 0; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 95, 32, 0; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 73, 24, 0; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-orange-1500-rgb: 52, 18, 0; - --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); - --spectrum-orange-1600-rgb: 25, 8, 0; - --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); - --spectrum-yellow-100-rgb: 255, 248, 204; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 255, 241, 151; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 255, 222, 44; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 245, 199, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 230, 175, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 210, 149, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 193, 131, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 175, 116, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 158, 102, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 134, 85, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 114, 72, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 93, 59, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 75, 47, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 56, 35, 0; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-yellow-1500-rgb: 40, 25, 0; - --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); - --spectrum-yellow-1600-rgb: 18, 11, 0; - --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); - --spectrum-chartreuse-100-rgb: 246, 251, 222; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 234, 246, 173; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 208, 236, 70; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 182, 219, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 163, 196, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 143, 172, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 128, 153, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 114, 137, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 102, 122, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 86, 103, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 73, 87, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 60, 71, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 47, 57, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 35, 43, 0; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-chartreuse-1500-rgb: 25, 30, 0; - --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); - --spectrum-chartreuse-1600-rgb: 11, 14, 0; - --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); - --spectrum-celery-100-rgb: 235, 255, 220; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 197, 255, 156; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 157, 247, 92; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 129, 228, 58; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 110, 206, 42; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 93, 180, 31; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 82, 161, 25; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 72, 144, 20; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 64, 129, 17; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 52, 109, 12; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 44, 92, 9; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 35, 75, 6; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 27, 60, 3; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 19, 46, 0; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-celery-1500-rgb: 12, 33, 0; - --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); - --spectrum-celery-1600-rgb: 4, 15, 0; - --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); - --spectrum-green-100-rgb: 237, 252, 241; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 215, 247, 225; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 173, 238, 197; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 107, 227, 162; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 43, 209, 125; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 18, 184, 103; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 11, 164, 93; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 7, 147, 85; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 5, 131, 78; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 3, 110, 69; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 2, 93, 60; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 1, 76, 52; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 0, 61, 44; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 0, 46, 34; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-green-1500-rgb: 0, 33, 25; - --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); - --spectrum-green-1600-rgb: 0, 15, 12; - --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); - --spectrum-seafoam-100-rgb: 235, 251, 246; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 211, 246, 234; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 169, 237, 216; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 92, 225, 194; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 16, 207, 169; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 13, 181, 149; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 11, 162, 134; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 9, 144, 120; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 7, 129, 109; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 5, 108, 92; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 3, 92, 80; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 1, 75, 67; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 0, 60, 54; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 0, 46, 40; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-seafoam-1500-rgb: 0, 33, 29; - --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); - --spectrum-seafoam-1600-rgb: 0, 15, 14; - --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); - --spectrum-cyan-100-rgb: 238, 250, 254; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 217, 244, 253; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 183, 231, 252; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 138, 213, 255; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 92, 192, 255; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 48, 167, 254; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 29, 149, 231; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 18, 134, 205; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 11, 120, 179; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 4, 102, 145; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 0, 87, 121; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 0, 71, 98; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 0, 57, 78; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 0, 43, 59; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-cyan-1500-rgb: 0, 31, 43; - --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); - --spectrum-cyan-1600-rgb: 0, 14, 20; - --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); - --spectrum-indigo-100-rgb: 247, 248, 255; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 235, 238, 255; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 216, 222, 255; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 192, 201, 255; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 167, 178, 255; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 145, 151, 254; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 132, 128, 254; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 122, 106, 253; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 113, 85, 250; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 99, 56, 238; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 84, 36, 219; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 69, 19, 191; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 55, 6, 160; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 42, 0, 129; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-indigo-1500-rgb: 31, 0, 98; - --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); - --spectrum-indigo-1600-rgb: 17, 0, 54; - --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); - --spectrum-purple-100-rgb: 251, 247, 254; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 244, 235, 252; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 235, 218, 249; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 221, 193, 246; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 208, 167, 243; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 191, 138, 238; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 178, 114, 235; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 166, 92, 231; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 154, 71, 226; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 134, 40, 217; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 115, 13, 204; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 93, 0, 177; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 75, 0, 144; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 59, 0, 111; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-purple-1500-rgb: 44, 0, 84; - --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); - --spectrum-purple-1600-rgb: 23, 0, 45; - --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); - --spectrum-fuchsia-100-rgb: 254, 246, 255; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 253, 233, 255; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 250, 211, 255; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 247, 181, 255; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 243, 147, 255; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 236, 105, 255; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 223, 77, 245; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 200, 68, 220; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 181, 57, 200; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 156, 40, 175; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 135, 27, 154; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 113, 15, 131; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 92, 4, 109; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 72, 0, 88; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-fuchsia-1500-rgb: 54, 0, 66; - --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); - --spectrum-fuchsia-1600-rgb: 29, 0, 35; - --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); - --spectrum-magenta-100-rgb: 255, 245, 248; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 255, 232, 240; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 255, 213, 227; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 255, 185, 208; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 255, 152, 187; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 255, 112, 159; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 255, 72, 133; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 240, 45, 110; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 217, 35, 97; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 186, 22, 80; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 163, 5, 62; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 136, 0, 51; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 111, 0, 40; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 86, 0, 30; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-magenta-1500-rgb: 64, 0, 22; - --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); - --spectrum-magenta-1600-rgb: 35, 0, 12; - --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); - --spectrum-pink-100-rgb: 255, 246, 252; - --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); - --spectrum-pink-200-rgb: 255, 232, 247; - --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); - --spectrum-pink-300-rgb: 255, 211, 240; - --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); - --spectrum-pink-400-rgb: 255, 181, 230; - --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); - --spectrum-pink-500-rgb: 255, 148, 219; - --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); - --spectrum-pink-600-rgb: 255, 103, 204; - --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); - --spectrum-pink-700-rgb: 242, 76, 184; - --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); - --spectrum-pink-800-rgb: 228, 52, 163; - --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); - --spectrum-pink-900-rgb: 206, 42, 146; - --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); - --spectrum-pink-1000-rgb: 176, 31, 123; - --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); - --spectrum-pink-1100-rgb: 152, 22, 104; - --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); - --spectrum-pink-1200-rgb: 128, 12, 85; - --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); - --spectrum-pink-1300-rgb: 105, 3, 68; - --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); - --spectrum-pink-1400-rgb: 83, 0, 53; - --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); - --spectrum-pink-1500-rgb: 62, 0, 39; - --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); - --spectrum-pink-1600-rgb: 33, 0, 21; - --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); - --spectrum-turquoise-100-rgb: 238, 251, 251; - --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); - --spectrum-turquoise-200-rgb: 209, 245, 245; - --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); - --spectrum-turquoise-300-rgb: 169, 236, 237; - --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); - --spectrum-turquoise-400-rgb: 111, 221, 228; - --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); - --spectrum-turquoise-500-rgb: 39, 202, 216; - --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); - --spectrum-turquoise-600-rgb: 15, 177, 192; - --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); - --spectrum-turquoise-700-rgb: 12, 158, 171; - --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); - --spectrum-turquoise-800-rgb: 10, 141, 153; - --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); - --spectrum-turquoise-900-rgb: 8, 126, 137; - --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); - --spectrum-turquoise-1000-rgb: 5, 107, 116; - --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); - --spectrum-turquoise-1100-rgb: 3, 90, 98; - --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); - --spectrum-turquoise-1200-rgb: 1, 74, 81; - --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); - --spectrum-turquoise-1300-rgb: 0, 59, 65; - --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); - --spectrum-turquoise-1400-rgb: 0, 44, 49; - --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); - --spectrum-turquoise-1500-rgb: 0, 32, 35; - --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); - --spectrum-turquoise-1600-rgb: 0, 15, 17; - --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); - --spectrum-brown-100-rgb: 252, 247, 242; - --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); - --spectrum-brown-200-rgb: 247, 238, 225; - --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); - --spectrum-brown-300-rgb: 239, 221, 195; - --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); - --spectrum-brown-400-rgb: 229, 200, 157; - --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); - --spectrum-brown-500-rgb: 214, 177, 123; - --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); - --spectrum-brown-600-rgb: 190, 155, 104; - --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); - --spectrum-brown-700-rgb: 171, 138, 90; - --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); - --spectrum-brown-800-rgb: 154, 123, 77; - --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); - --spectrum-brown-900-rgb: 139, 109, 66; - --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); - --spectrum-brown-1000-rgb: 119, 91, 50; - --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); - --spectrum-brown-1100-rgb: 103, 76, 35; - --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); - --spectrum-brown-1200-rgb: 88, 61, 21; - --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); - --spectrum-brown-1300-rgb: 70, 49, 17; - --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); - --spectrum-brown-1400-rgb: 52, 37, 13; - --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); - --spectrum-brown-1500-rgb: 38, 26, 9; - --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); - --spectrum-brown-1600-rgb: 16, 12, 4; - --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); - --spectrum-silver-100-rgb: 247, 247, 247; - --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); - --spectrum-silver-200-rgb: 239, 239, 239; - --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); - --spectrum-silver-300-rgb: 223, 223, 223; - --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); - --spectrum-silver-400-rgb: 204, 204, 204; - --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); - --spectrum-silver-500-rgb: 183, 183, 183; - --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); - --spectrum-silver-600-rgb: 160, 160, 160; - --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); - --spectrum-silver-700-rgb: 143, 143, 143; - --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); - --spectrum-silver-800-rgb: 128, 128, 128; - --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); - --spectrum-silver-900-rgb: 114, 114, 114; - --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); - --spectrum-silver-1000-rgb: 96, 96, 96; - --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); - --spectrum-silver-1100-rgb: 81, 81, 81; - --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); - --spectrum-silver-1200-rgb: 66, 66, 66; - --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); - --spectrum-silver-1300-rgb: 52, 52, 52; - --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); - --spectrum-silver-1400-rgb: 39, 39, 39; - --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); - --spectrum-silver-1500-rgb: 28, 28, 28; - --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); - --spectrum-silver-1600-rgb: 12, 12, 12; - --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); - --spectrum-cinnamon-100-rgb: 253, 247, 243; - --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); - --spectrum-cinnamon-200-rgb: 249, 236, 229; - --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); - --spectrum-cinnamon-300-rgb: 244, 218, 203; - --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); - --spectrum-cinnamon-400-rgb: 237, 196, 172; - --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); - --spectrum-cinnamon-500-rgb: 229, 170, 136; - --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); - --spectrum-cinnamon-600-rgb: 212, 145, 108; - --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); - --spectrum-cinnamon-700-rgb: 198, 126, 88; - --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); - --spectrum-cinnamon-800-rgb: 184, 109, 70; - --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); - --spectrum-cinnamon-900-rgb: 170, 94, 56; - --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); - --spectrum-cinnamon-1000-rgb: 147, 77, 43; - --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); - --spectrum-cinnamon-1100-rgb: 128, 62, 32; - --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); - --spectrum-cinnamon-1200-rgb: 110, 48, 21; - --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); - --spectrum-cinnamon-1300-rgb: 92, 35, 11; - --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); - --spectrum-cinnamon-1400-rgb: 72, 25, 6; - --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); - --spectrum-cinnamon-1500-rgb: 52, 18, 4; - --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); - --spectrum-cinnamon-1600-rgb: 24, 8, 2; - --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-200 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-200 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-200 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-200 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); + --spectrum-overlay-opacity: 0.4; + --spectrum-background-layer-2-color: var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-800 + ); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-900); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-900 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-1000 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-1000 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-1000 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-background-color-down: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-900 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-1000 + ); + --spectrum-positive-background-color-down: var( + --spectrum-positive-color-1000 + ); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-1000 + ); + --spectrum-notice-background-color-default: var(--spectrum-notice-color-600); + --spectrum-gray-background-color-default: var(--spectrum-gray-700); + --spectrum-red-background-color-default: var(--spectrum-red-900); + --spectrum-orange-background-color-default: var(--spectrum-orange-600); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-500 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-600); + --spectrum-green-background-color-default: var(--spectrum-green-900); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); + --spectrum-blue-background-color-default: var(--spectrum-blue-900); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); + --spectrum-purple-background-color-default: var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); + --spectrum-neutral-visual-color: var(--spectrum-gray-500); + --spectrum-accent-visual-color: var(--spectrum-accent-color-800); + --spectrum-informative-visual-color: var(--spectrum-informative-color-800); + --spectrum-negative-visual-color: var(--spectrum-negative-color-800); + --spectrum-notice-visual-color: var(--spectrum-notice-color-800); + --spectrum-positive-visual-color: var(--spectrum-positive-color-800); + --spectrum-gray-visual-color: var(--spectrum-gray-500); + --spectrum-red-visual-color: var(--spectrum-red-800); + --spectrum-orange-visual-color: var(--spectrum-orange-700); + --spectrum-yellow-visual-color: var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color: var(--spectrum-celery-700); + --spectrum-green-visual-color: var(--spectrum-green-700); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color: var(--spectrum-cyan-600); + --spectrum-blue-visual-color: var(--spectrum-blue-800); + --spectrum-indigo-visual-color: var(--spectrum-indigo-800); + --spectrum-purple-visual-color: var(--spectrum-purple-800); + --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); + --spectrum-magenta-visual-color: var(--spectrum-magenta-800); + --spectrum-background-elevated-color: var(--spectrum-gray-25); + --spectrum-background-pasteboard-color: var(--spectrum-gray-100); + --spectrum-brown-visual-color: var(--spectrum-brown-800); + --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); + --spectrum-pink-visual-color: var(--spectrum-pink-800); + --spectrum-silver-visual-color: var(--spectrum-silver-800); + --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); + --spectrum-brown-background-color-default: var(--spectrum-brown-900); + --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); + --spectrum-pink-background-color-default: var(--spectrum-pink-900); + --spectrum-silver-background-color-default: var(--spectrum-silver-900); + --spectrum-turquoise-background-color-default: var(--spectrum-turquoise-900); + --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-100-opacity: 0.12; + --spectrum-drop-shadow-color-100: rgba( + var(--spectrum-drop-shadow-color-100-rgb), + var(--spectrum-drop-shadow-color-100-opacity) + ); + --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-200-opacity: 0.16; + --spectrum-drop-shadow-color-200: rgba( + var(--spectrum-drop-shadow-color-200-rgb), + var(--spectrum-drop-shadow-color-200-opacity) + ); + --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-300-opacity: 0.2; + --spectrum-drop-shadow-color-300: rgba( + var(--spectrum-drop-shadow-color-300-rgb), + var(--spectrum-drop-shadow-color-300-opacity) + ); + --spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-100); + --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100); + --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200); + --spectrum-green-subtle-background-color-default: var(--spectrum-green-200); + --spectrum-orange-subtle-background-color-default: var(--spectrum-orange-200); + --spectrum-red-subtle-background-color-default: var(--spectrum-red-200); + --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200); + --spectrum-cinnamon-subtle-background-color-default: var( + --spectrum-cinnamon-200 + ); + --spectrum-celery-subtle-background-color-default: var(--spectrum-celery-200); + --spectrum-chartreuse-subtle-background-color-default: var( + --spectrum-chartreuse-200 + ); + --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200); + --spectrum-fuchsia-subtle-background-color-default: var( + --spectrum-fuchsia-200 + ); + --spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-200); + --spectrum-magenta-subtle-background-color-default: var( + --spectrum-magenta-200 + ); + --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200); + --spectrum-purple-subtle-background-color-default: var(--spectrum-purple-200); + --spectrum-seafoam-subtle-background-color-default: var( + --spectrum-seafoam-200 + ); + --spectrum-silver-subtle-background-color-default: var(--spectrum-silver-200); + --spectrum-turquoise-subtle-background-color-default: var( + --spectrum-turquoise-200 + ); + --spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-200); + --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); + --spectrum-white-rgb: 255, 255, 255; + --spectrum-white: rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb: 255, 255, 255; + --spectrum-transparent-white-25-opacity: 0; + --spectrum-transparent-white-25: rgba( + var(--spectrum-transparent-white-25-rgb), + var(--spectrum-transparent-white-25-opacity) + ); + --spectrum-transparent-white-50-rgb: 255, 255, 255; + --spectrum-transparent-white-50-opacity: 0.04; + --spectrum-transparent-white-50: rgba( + var(--spectrum-transparent-white-50-rgb), + var(--spectrum-transparent-white-50-opacity) + ); + --spectrum-transparent-white-75-rgb: 255, 255, 255; + --spectrum-transparent-white-75-opacity: 0.07; + --spectrum-transparent-white-75: rgba( + var(--spectrum-transparent-white-75-rgb), + var(--spectrum-transparent-white-75-opacity) + ); + --spectrum-transparent-white-100-rgb: 255, 255, 255; + --spectrum-transparent-white-100-opacity: 0.11; + --spectrum-transparent-white-100: rgba( + var(--spectrum-transparent-white-100-rgb), + var(--spectrum-transparent-white-100-opacity) + ); + --spectrum-transparent-white-200-rgb: 255, 255, 255; + --spectrum-transparent-white-200-opacity: 0.14; + --spectrum-transparent-white-200: rgba( + var(--spectrum-transparent-white-200-rgb), + var(--spectrum-transparent-white-200-opacity) + ); + --spectrum-transparent-white-300-rgb: 255, 255, 255; + --spectrum-transparent-white-300-opacity: 0.17; + --spectrum-transparent-white-300: rgba( + var(--spectrum-transparent-white-300-rgb), + var(--spectrum-transparent-white-300-opacity) + ); + --spectrum-transparent-white-400-rgb: 255, 255, 255; + --spectrum-transparent-white-400-opacity: 0.21; + --spectrum-transparent-white-400: rgba( + var(--spectrum-transparent-white-400-rgb), + var(--spectrum-transparent-white-400-opacity) + ); + --spectrum-transparent-white-500-rgb: 255, 255, 255; + --spectrum-transparent-white-500-opacity: 0.39; + --spectrum-transparent-white-500: rgba( + var(--spectrum-transparent-white-500-rgb), + var(--spectrum-transparent-white-500-opacity) + ); + --spectrum-transparent-white-600-rgb: 255, 255, 255; + --spectrum-transparent-white-600-opacity: 0.51; + --spectrum-transparent-white-600: rgba( + var(--spectrum-transparent-white-600-rgb), + var(--spectrum-transparent-white-600-opacity) + ); + --spectrum-transparent-white-700-rgb: 255, 255, 255; + --spectrum-transparent-white-700-opacity: 0.66; + --spectrum-transparent-white-700: rgba( + var(--spectrum-transparent-white-700-rgb), + var(--spectrum-transparent-white-700-opacity) + ); + --spectrum-transparent-white-800-rgb: 255, 255, 255; + --spectrum-transparent-white-800-opacity: 0.85; + --spectrum-transparent-white-800: rgba( + var(--spectrum-transparent-white-800-rgb), + var(--spectrum-transparent-white-800-opacity) + ); + --spectrum-transparent-white-900-rgb: 255, 255, 255; + --spectrum-transparent-white-900-opacity: 0.94; + --spectrum-transparent-white-900: rgba( + var(--spectrum-transparent-white-900-rgb), + var(--spectrum-transparent-white-900-opacity) + ); + --spectrum-transparent-white-1000-rgb: 255, 255, 255; + --spectrum-transparent-white-1000: rgba( + var(--spectrum-transparent-white-1000-rgb) + ); + --spectrum-transparent-black-25-rgb: 0, 0, 0; + --spectrum-transparent-black-25-opacity: 0; + --spectrum-transparent-black-25: rgba( + var(--spectrum-transparent-black-25-rgb), + var(--spectrum-transparent-black-25-opacity) + ); + --spectrum-transparent-black-50-rgb: 0, 0, 0; + --spectrum-transparent-black-50-opacity: 0.03; + --spectrum-transparent-black-50: rgba( + var(--spectrum-transparent-black-50-rgb), + var(--spectrum-transparent-black-50-opacity) + ); + --spectrum-transparent-black-75-rgb: 0, 0, 0; + --spectrum-transparent-black-75-opacity: 0.05; + --spectrum-transparent-black-75: rgba( + var(--spectrum-transparent-black-75-rgb), + var(--spectrum-transparent-black-75-opacity) + ); + --spectrum-transparent-black-100-rgb: 0, 0, 0; + --spectrum-transparent-black-100-opacity: 0.09; + --spectrum-transparent-black-100: rgba( + var(--spectrum-transparent-black-100-rgb), + var(--spectrum-transparent-black-100-opacity) + ); + --spectrum-transparent-black-200-rgb: 0, 0, 0; + --spectrum-transparent-black-200-opacity: 0.12; + --spectrum-transparent-black-200: rgba( + var(--spectrum-transparent-black-200-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --spectrum-transparent-black-300-rgb: 0, 0, 0; + --spectrum-transparent-black-300-opacity: 0.15; + --spectrum-transparent-black-300: rgba( + var(--spectrum-transparent-black-300-rgb), + var(--spectrum-transparent-black-300-opacity) + ); + --spectrum-transparent-black-400-rgb: 0, 0, 0; + --spectrum-transparent-black-400-opacity: 0.22; + --spectrum-transparent-black-400: rgba( + var(--spectrum-transparent-black-400-rgb), + var(--spectrum-transparent-black-400-opacity) + ); + --spectrum-transparent-black-500-rgb: 0, 0, 0; + --spectrum-transparent-black-500-opacity: 0.44; + --spectrum-transparent-black-500: rgba( + var(--spectrum-transparent-black-500-rgb), + var(--spectrum-transparent-black-500-opacity) + ); + --spectrum-transparent-black-600-rgb: 0, 0, 0; + --spectrum-transparent-black-600-opacity: 0.56; + --spectrum-transparent-black-600: rgba( + var(--spectrum-transparent-black-600-rgb), + var(--spectrum-transparent-black-600-opacity) + ); + --spectrum-transparent-black-700-rgb: 0, 0, 0; + --spectrum-transparent-black-700-opacity: 0.69; + --spectrum-transparent-black-700: rgba( + var(--spectrum-transparent-black-700-rgb), + var(--spectrum-transparent-black-700-opacity) + ); + --spectrum-transparent-black-800-rgb: 0, 0, 0; + --spectrum-transparent-black-800-opacity: 0.84; + --spectrum-transparent-black-800: rgba( + var(--spectrum-transparent-black-800-rgb), + var(--spectrum-transparent-black-800-opacity) + ); + --spectrum-transparent-black-900-rgb: 0, 0, 0; + --spectrum-transparent-black-900-opacity: 0.93; + --spectrum-transparent-black-900: rgba( + var(--spectrum-transparent-black-900-rgb), + var(--spectrum-transparent-black-900-opacity) + ); + --spectrum-gray-25-rgb: 255, 255, 255; + --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb: 248, 248, 248; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 243, 243, 243; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 233, 233, 233; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 225, 225, 225; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 218, 218, 218; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 198, 198, 198; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 143, 143, 143; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 113, 113, 113; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 80, 80, 80; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 41, 41, 41; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 19, 19, 19; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb: 0, 0, 0; + --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb: 245, 249, 255; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 229, 240, 254; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 203, 226, 254; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 172, 207, 253; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 142, 185, 252; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 114, 158, 253; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 93, 137, 255; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 75, 117, 255; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 59, 99, 251; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 39, 77, 234; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 29, 62, 207; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 21, 50, 173; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 16, 40, 140; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 12, 31, 105; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb: 14, 24, 67; + --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb: 7, 11, 30; + --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb: 255, 246, 245; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 255, 235, 232; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 255, 214, 209; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 255, 188, 180; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 255, 157, 145; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 255, 118, 101; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 255, 81, 61; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 240, 56, 35; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 215, 50, 32; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 183, 40, 24; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 156, 33, 19; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 129, 27, 14; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 104, 21, 10; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 80, 16, 6; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb: 59, 11, 4; + --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb: 29, 5, 2; + --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb: 255, 246, 231; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 255, 236, 207; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 255, 218, 158; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 255, 193, 94; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 255, 162, 19; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 252, 125, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 232, 106, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 212, 91, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 194, 78, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 167, 62, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 144, 51, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 118, 41, 0; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 95, 32, 0; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 73, 24, 0; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb: 52, 18, 0; + --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb: 25, 8, 0; + --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb: 255, 248, 204; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 255, 241, 151; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 255, 222, 44; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 245, 199, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 230, 175, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 210, 149, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 193, 131, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 175, 116, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 158, 102, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 134, 85, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 114, 72, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 93, 59, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 75, 47, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 56, 35, 0; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb: 40, 25, 0; + --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb: 18, 11, 0; + --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb: 246, 251, 222; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 234, 246, 173; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 208, 236, 70; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 182, 219, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 163, 196, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 143, 172, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 128, 153, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 114, 137, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 102, 122, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 86, 103, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 73, 87, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 60, 71, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 47, 57, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 35, 43, 0; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb: 25, 30, 0; + --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb: 11, 14, 0; + --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb: 235, 255, 220; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 197, 255, 156; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 157, 247, 92; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 129, 228, 58; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 110, 206, 42; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 93, 180, 31; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 82, 161, 25; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 72, 144, 20; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 64, 129, 17; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 52, 109, 12; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 44, 92, 9; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 35, 75, 6; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 27, 60, 3; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 19, 46, 0; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb: 12, 33, 0; + --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb: 4, 15, 0; + --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb: 237, 252, 241; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 215, 247, 225; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 173, 238, 197; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 107, 227, 162; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 43, 209, 125; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 18, 184, 103; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 11, 164, 93; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 7, 147, 85; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 5, 131, 78; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 3, 110, 69; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 2, 93, 60; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 1, 76, 52; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 0, 61, 44; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 0, 46, 34; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb: 0, 33, 25; + --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb: 0, 15, 12; + --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb: 235, 251, 246; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 211, 246, 234; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 169, 237, 216; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 92, 225, 194; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 16, 207, 169; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 13, 181, 149; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 11, 162, 134; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 9, 144, 120; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 7, 129, 109; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 5, 108, 92; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 3, 92, 80; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 1, 75, 67; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 0, 60, 54; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 0, 46, 40; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb: 0, 33, 29; + --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb: 0, 15, 14; + --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb: 238, 250, 254; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 217, 244, 253; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 183, 231, 252; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 138, 213, 255; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 92, 192, 255; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 48, 167, 254; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 29, 149, 231; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 18, 134, 205; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 11, 120, 179; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 4, 102, 145; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 0, 87, 121; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 0, 71, 98; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 0, 57, 78; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 0, 43, 59; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb: 0, 31, 43; + --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb: 0, 14, 20; + --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb: 247, 248, 255; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 235, 238, 255; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 216, 222, 255; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 192, 201, 255; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 167, 178, 255; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 145, 151, 254; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 132, 128, 254; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 122, 106, 253; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 113, 85, 250; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 99, 56, 238; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 84, 36, 219; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 69, 19, 191; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 55, 6, 160; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 42, 0, 129; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb: 31, 0, 98; + --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb: 17, 0, 54; + --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb: 251, 247, 254; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 244, 235, 252; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 235, 218, 249; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 221, 193, 246; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 208, 167, 243; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 191, 138, 238; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 178, 114, 235; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 166, 92, 231; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 154, 71, 226; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 134, 40, 217; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 115, 13, 204; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 93, 0, 177; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 75, 0, 144; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 59, 0, 111; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb: 44, 0, 84; + --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb: 23, 0, 45; + --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb: 254, 246, 255; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 253, 233, 255; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 250, 211, 255; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 247, 181, 255; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 243, 147, 255; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 236, 105, 255; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 223, 77, 245; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 200, 68, 220; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 181, 57, 200; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 156, 40, 175; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 135, 27, 154; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 113, 15, 131; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 92, 4, 109; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 72, 0, 88; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb: 54, 0, 66; + --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb: 29, 0, 35; + --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb: 255, 245, 248; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 255, 232, 240; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 255, 213, 227; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 255, 185, 208; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 255, 152, 187; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 255, 112, 159; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 255, 72, 133; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 240, 45, 110; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 217, 35, 97; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 186, 22, 80; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 163, 5, 62; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 136, 0, 51; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 111, 0, 40; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 86, 0, 30; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb: 64, 0, 22; + --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb: 35, 0, 12; + --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb: 255, 246, 252; + --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb: 255, 232, 247; + --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb: 255, 211, 240; + --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb: 255, 181, 230; + --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb: 255, 148, 219; + --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb: 255, 103, 204; + --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb: 242, 76, 184; + --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb: 228, 52, 163; + --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb: 206, 42, 146; + --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb: 176, 31, 123; + --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb: 152, 22, 104; + --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb: 128, 12, 85; + --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb: 105, 3, 68; + --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb: 83, 0, 53; + --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb: 62, 0, 39; + --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb: 33, 0, 21; + --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb: 238, 251, 251; + --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb: 209, 245, 245; + --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb: 169, 236, 237; + --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb: 111, 221, 228; + --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb: 39, 202, 216; + --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb: 15, 177, 192; + --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb: 12, 158, 171; + --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb: 10, 141, 153; + --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb: 8, 126, 137; + --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb: 5, 107, 116; + --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb: 3, 90, 98; + --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb: 1, 74, 81; + --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb: 0, 59, 65; + --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb: 0, 44, 49; + --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb: 0, 32, 35; + --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb: 0, 15, 17; + --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb: 252, 247, 242; + --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb: 247, 238, 225; + --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb: 239, 221, 195; + --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb: 229, 200, 157; + --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb: 214, 177, 123; + --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb: 190, 155, 104; + --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb: 171, 138, 90; + --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb: 154, 123, 77; + --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb: 139, 109, 66; + --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb: 119, 91, 50; + --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb: 103, 76, 35; + --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb: 88, 61, 21; + --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb: 70, 49, 17; + --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb: 52, 37, 13; + --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb: 38, 26, 9; + --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb: 16, 12, 4; + --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb: 247, 247, 247; + --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb: 239, 239, 239; + --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb: 223, 223, 223; + --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb: 204, 204, 204; + --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb: 183, 183, 183; + --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb: 160, 160, 160; + --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb: 143, 143, 143; + --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb: 128, 128, 128; + --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb: 114, 114, 114; + --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb: 96, 96, 96; + --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb: 81, 81, 81; + --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb: 66, 66, 66; + --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb: 52, 52, 52; + --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb: 39, 39, 39; + --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb: 28, 28, 28; + --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb: 12, 12, 12; + --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb: 253, 247, 243; + --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb: 249, 236, 229; + --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb: 244, 218, 203; + --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb: 237, 196, 172; + --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb: 229, 170, 136; + --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb: 212, 145, 108; + --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb: 198, 126, 88; + --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb: 184, 109, 70; + --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb: 170, 94, 56; + --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb: 147, 77, 43; + --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb: 128, 62, 32; + --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb: 110, 48, 21; + --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb: 92, 35, 11; + --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb: 72, 25, 6; + --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb: 52, 18, 4; + --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb: 24, 8, 2; + --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); + --spectrum-negative-subdued-background-color-default: var( + --spectrum-negative-subtle-background-color-default + ); + --spectrum-accent-subtle-background-color-default: var( + --spectrum-accent-color-200 + ); + --spectrum-informative-subtle-background-color-default: var( + --spectrum-informative-color-200 + ); + --spectrum-positive-subtle-background-color-default: var( + --spectrum-positive-color-200 + ); + --spectrum-notice-subtle-background-color-default: var( + --spectrum-notice-color-200 + ); + --spectrum-negative-subtle-background-color-default: var( + --spectrum-negative-color-200 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-black-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.06 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-1100 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-900 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); } diff --git a/tools/styles/tokens-v2/medium-vars.css b/tools/styles/tokens-v2/medium-vars.css index 6d4ef46ede..d9d4eef00f 100644 --- a/tools/styles/tokens-v2/medium-vars.css +++ b/tools/styles/tokens-v2/medium-vars.css @@ -1,648 +1,644 @@ :host, :root { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 20px; - --spectrum-workflow-icon-size-200: 22px; - --spectrum-workflow-icon-size-300: 26px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-m - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-accordion-top-to-text-spacious-small: 9px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-text-to-visual-50: 5px; - --spectrum-text-to-visual-75: 5px; - --spectrum-text-to-visual-100: 6px; - --spectrum-text-to-visual-200: 7px; - --spectrum-text-to-visual-300: 8px; - --spectrum-text-to-visual-400: 9px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 11px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 20px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 6px; - --spectrum-component-pill-edge-to-visual-only-200: 9px; - --spectrum-component-pill-edge-to-visual-only-300: 11px; - --spectrum-component-pill-edge-to-text-75: 13px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 23px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 8px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 14px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 6px; - --spectrum-component-edge-to-visual-only-200: 9px; - --spectrum-component-edge-to-visual-only-300: 11px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 10px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 17px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 6px; - --spectrum-component-top-to-workflow-icon-200: 9px; - --spectrum-component-top-to-workflow-icon-300: 11px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; + --spectrum-workflow-icon-size-50: 14px; + --spectrum-workflow-icon-size-75: 16px; + --spectrum-workflow-icon-size-100: 20px; + --spectrum-workflow-icon-size-200: 22px; + --spectrum-workflow-icon-size-300: 26px; + --spectrum-arrow-icon-size-75: 10px; + --spectrum-arrow-icon-size-100: 10px; + --spectrum-arrow-icon-size-200: 12px; + --spectrum-arrow-icon-size-300: 14px; + --spectrum-arrow-icon-size-400: 16px; + --spectrum-arrow-icon-size-500: 18px; + --spectrum-arrow-icon-size-600: 20px; + --spectrum-asterisk-icon-size-100: 8px; + --spectrum-asterisk-icon-size-200: 10px; + --spectrum-asterisk-icon-size-300: 10px; + --spectrum-checkmark-icon-size-50: 10px; + --spectrum-checkmark-icon-size-75: 10px; + --spectrum-checkmark-icon-size-100: 10px; + --spectrum-checkmark-icon-size-200: 12px; + --spectrum-checkmark-icon-size-300: 14px; + --spectrum-checkmark-icon-size-400: 16px; + --spectrum-checkmark-icon-size-500: 16px; + --spectrum-checkmark-icon-size-600: 18px; + --spectrum-chevron-icon-size-50: 6px; + --spectrum-chevron-icon-size-75: 10px; + --spectrum-chevron-icon-size-100: 10px; + --spectrum-chevron-icon-size-200: 12px; + --spectrum-chevron-icon-size-300: 14px; + --spectrum-chevron-icon-size-400: 16px; + --spectrum-chevron-icon-size-500: 16px; + --spectrum-chevron-icon-size-600: 18px; + --spectrum-corner-triangle-icon-size-75: 5px; + --spectrum-corner-triangle-icon-size-100: 5px; + --spectrum-corner-triangle-icon-size-200: 6px; + --spectrum-corner-triangle-icon-size-300: 7px; + --spectrum-cross-icon-size-75: 8px; + --spectrum-cross-icon-size-100: 8px; + --spectrum-cross-icon-size-200: 10px; + --spectrum-cross-icon-size-300: 12px; + --spectrum-cross-icon-size-400: 12px; + --spectrum-cross-icon-size-500: 14px; + --spectrum-cross-icon-size-600: 16px; + --spectrum-dash-icon-size-50: 8px; + --spectrum-dash-icon-size-75: 8px; + --spectrum-dash-icon-size-100: 10px; + --spectrum-dash-icon-size-200: 12px; + --spectrum-dash-icon-size-300: 12px; + --spectrum-dash-icon-size-400: 14px; + --spectrum-dash-icon-size-500: 16px; + --spectrum-dash-icon-size-600: 18px; + --spectrum-checkbox-control-size-small: 12px; + --spectrum-checkbox-control-size-medium: 14px; + --spectrum-checkbox-control-size-large: 16px; + --spectrum-checkbox-control-size-extra-large: 18px; + --spectrum-checkbox-top-to-control-small: 6px; + --spectrum-checkbox-top-to-control-medium: 9px; + --spectrum-checkbox-top-to-control-large: 12px; + --spectrum-checkbox-top-to-control-extra-large: 15px; + --spectrum-switch-control-width-small: 23px; + --spectrum-switch-control-width-medium: 26px; + --spectrum-switch-control-width-large: 29px; + --spectrum-switch-control-width-extra-large: 33px; + --spectrum-switch-control-height-small: 12px; + --spectrum-switch-control-height-medium: 14px; + --spectrum-switch-control-height-large: 16px; + --spectrum-switch-control-height-extra-large: 18px; + --spectrum-switch-top-to-control-small: 6px; + --spectrum-switch-top-to-control-medium: 9px; + --spectrum-switch-top-to-control-large: 12px; + --spectrum-switch-top-to-control-extra-large: 15px; + --spectrum-radio-button-control-size-small: 12px; + --spectrum-radio-button-control-size-medium: 14px; + --spectrum-radio-button-control-size-large: 16px; + --spectrum-radio-button-control-size-extra-large: 18px; + --spectrum-radio-button-top-to-control-small: 6px; + --spectrum-radio-button-top-to-control-medium: 9px; + --spectrum-radio-button-top-to-control-large: 12px; + --spectrum-radio-button-top-to-control-extra-large: 15px; + --spectrum-field-label-text-to-asterisk-small: 4px; + --spectrum-field-label-text-to-asterisk-medium: 4px; + --spectrum-field-label-text-to-asterisk-large: 5px; + --spectrum-field-label-text-to-asterisk-extra-large: 5px; + --spectrum-field-label-top-to-asterisk-small: 8px; + --spectrum-field-label-top-to-asterisk-medium: 12px; + --spectrum-field-label-top-to-asterisk-large: 15px; + --spectrum-field-label-top-to-asterisk-extra-large: 19px; + --spectrum-field-label-top-margin-medium: 4px; + --spectrum-field-label-top-margin-large: 5px; + --spectrum-field-label-top-margin-extra-large: 5px; + --spectrum-field-label-to-component-quiet-small: -8px; + --spectrum-field-label-to-component-quiet-medium: -8px; + --spectrum-field-label-to-component-quiet-large: -12px; + --spectrum-field-label-to-component-quiet-extra-large: -15px; + --spectrum-help-text-top-to-workflow-icon-small: 4px; + --spectrum-help-text-top-to-workflow-icon-medium: 3px; + --spectrum-help-text-top-to-workflow-icon-large: 6px; + --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; + --spectrum-status-light-dot-size-medium: 8px; + --spectrum-status-light-dot-size-large: 10px; + --spectrum-status-light-dot-size-extra-large: 10px; + --spectrum-status-light-top-to-dot-small: 8px; + --spectrum-status-light-top-to-dot-medium: 12px; + --spectrum-status-light-top-to-dot-large: 15px; + --spectrum-status-light-top-to-dot-extra-large: 19px; + --spectrum-action-button-edge-to-hold-icon-medium: 4px; + --spectrum-action-button-edge-to-hold-icon-large: 5px; + --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; + --spectrum-tooltip-tip-width: 8px; + --spectrum-tooltip-tip-height: 4px; + --spectrum-tooltip-maximum-width: 160px; + --spectrum-progress-circle-size-small: 16px; + --spectrum-progress-circle-size-medium: 32px; + --spectrum-progress-circle-size-large: 64px; + --spectrum-progress-circle-thickness-small: 2px; + --spectrum-progress-circle-thickness-medium: 3px; + --spectrum-progress-circle-thickness-large: 4px; + --spectrum-toast-height: 48px; + --spectrum-toast-maximum-width: 336px; + --spectrum-toast-top-to-workflow-icon: 15px; + --spectrum-toast-top-to-text: 14px; + --spectrum-toast-bottom-to-text: 17px; + --spectrum-action-bar-height: 48px; + --spectrum-action-bar-top-to-item-counter: 14px; + --spectrum-swatch-size-extra-small: 16px; + --spectrum-swatch-size-small: 24px; + --spectrum-swatch-size-medium: 32px; + --spectrum-swatch-size-large: 40px; + --spectrum-progress-bar-thickness-small: 4px; + --spectrum-progress-bar-thickness-medium: 6px; + --spectrum-progress-bar-thickness-large: 8px; + --spectrum-progress-bar-thickness-extra-large: 10px; + --spectrum-meter-width: 192px; + --spectrum-meter-thickness-small: 4px; + --spectrum-meter-thickness-large: 6px; + --spectrum-tag-top-to-avatar-small: 4px; + --spectrum-tag-top-to-avatar-medium: 6px; + --spectrum-tag-top-to-avatar-large: 9px; + --spectrum-tag-top-to-cross-icon-small: 8px; + --spectrum-tag-top-to-cross-icon-medium: 12px; + --spectrum-tag-top-to-cross-icon-large: 15px; + --spectrum-popover-top-to-content-area: 4px; + --spectrum-menu-item-edge-to-content-not-selected-small: 28px; + --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; + --spectrum-menu-item-edge-to-content-not-selected-large: 38px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; + --spectrum-menu-item-top-to-disclosure-icon-small: 7px; + --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; + --spectrum-menu-item-top-to-disclosure-icon-large: 14px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; + --spectrum-menu-item-top-to-selected-icon-small: 7px; + --spectrum-menu-item-top-to-selected-icon-medium: 11px; + --spectrum-menu-item-top-to-selected-icon-large: 14px; + --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; + --spectrum-slider-control-height-small: 14px; + --spectrum-slider-control-height-medium: 16px; + --spectrum-slider-control-height-large: 18px; + --spectrum-slider-control-height-extra-large: 20px; + --spectrum-slider-handle-size-small: 14px; + --spectrum-slider-handle-size-medium: 16px; + --spectrum-slider-handle-size-large: 18px; + --spectrum-slider-handle-size-extra-large: 20px; + --spectrum-slider-handle-border-width-down-small: 5px; + --spectrum-slider-handle-border-width-down-medium: 6px; + --spectrum-slider-handle-border-width-down-large: 7px; + --spectrum-slider-handle-border-width-down-extra-large: 8px; + --spectrum-slider-bottom-to-handle-small: 5px; + --spectrum-slider-bottom-to-handle-medium: 8px; + --spectrum-slider-bottom-to-handle-large: 11px; + --spectrum-slider-bottom-to-handle-extra-large: 14px; + --spectrum-slider-control-to-field-label-small: 5px; + --spectrum-slider-control-to-field-label-medium: 8px; + --spectrum-slider-control-to-field-label-large: 11px; + --spectrum-slider-control-to-field-label-extra-large: 14px; + --spectrum-picker-visual-to-disclosure-icon-small: 7px; + --spectrum-picker-visual-to-disclosure-icon-medium: 8px; + --spectrum-picker-visual-to-disclosure-icon-large: 9px; + --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; + --spectrum-text-area-minimum-width: 112px; + --spectrum-text-area-minimum-height: 56px; + --spectrum-combo-box-visual-to-field-button-small: 7px; + --spectrum-combo-box-visual-to-field-button-medium: 8px; + --spectrum-combo-box-visual-to-field-button-large: 9px; + --spectrum-combo-box-visual-to-field-button-extra-large: 10px; + --spectrum-thumbnail-size-50: 16px; + --spectrum-thumbnail-size-75: 18px; + --spectrum-thumbnail-size-100: 20px; + --spectrum-thumbnail-size-200: 22px; + --spectrum-thumbnail-size-300: 26px; + --spectrum-thumbnail-size-400: 28px; + --spectrum-thumbnail-size-500: 32px; + --spectrum-thumbnail-size-600: 36px; + --spectrum-thumbnail-size-700: 40px; + --spectrum-thumbnail-size-800: 44px; + --spectrum-thumbnail-size-900: 50px; + --spectrum-thumbnail-size-1000: 56px; + --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); + --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); + --spectrum-opacity-checkerboard-square-size: 8px; + --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); + --spectrum-breadcrumbs-height-multiline: 72px; + --spectrum-breadcrumbs-top-to-text: 13px; + --spectrum-breadcrumbs-top-to-text-compact: 11px; + --spectrum-breadcrumbs-top-to-text-multiline: 12px; + --spectrum-breadcrumbs-bottom-to-text: 15px; + --spectrum-breadcrumbs-bottom-to-text-compact: 12px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; + --spectrum-breadcrumbs-start-edge-to-text: 8px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; + --spectrum-breadcrumbs-top-to-separator-icon: 19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; + --spectrum-breadcrumbs-top-to-truncated-menu: 8px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; + --spectrum-avatar-size-50: 16px; + --spectrum-avatar-size-75: 18px; + --spectrum-avatar-size-100: 20px; + --spectrum-avatar-size-200: 22px; + --spectrum-avatar-size-300: 26px; + --spectrum-avatar-size-400: 28px; + --spectrum-avatar-size-500: 32px; + --spectrum-avatar-size-600: 36px; + --spectrum-avatar-size-700: 40px; + --spectrum-alert-banner-minimum-height: 48px; + --spectrum-alert-banner-width: 832px; + --spectrum-alert-banner-top-to-workflow-icon: 15px; + --spectrum-alert-banner-top-to-text: 14px; + --spectrum-alert-banner-bottom-to-text: 17px; + --spectrum-rating-indicator-width: 18px; + --spectrum-rating-indicator-to-icon: 4px; + --spectrum-color-area-width: 192px; + --spectrum-color-area-minimum-width: 64px; + --spectrum-color-area-height: 192px; + --spectrum-color-area-minimum-height: 64px; + --spectrum-color-wheel-width: 192px; + --spectrum-color-wheel-minimum-width: 175px; + --spectrum-color-slider-length: 192px; + --spectrum-color-slider-minimum-length: 80px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-m + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); + --spectrum-coach-mark-width: 296px; + --spectrum-coach-mark-minimum-width: 296px; + --spectrum-coach-mark-maximum-width: 380px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; + --spectrum-coach-mark-media-height: 222px; + --spectrum-coach-mark-media-minimum-height: 166px; + --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); + --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); + --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); + --spectrum-accordion-top-to-text-regular-small: 5px; + --spectrum-accordion-small-top-to-text-spacious: 9px; + --spectrum-accordion-top-to-text-regular-medium: 8px; + --spectrum-accordion-top-to-text-spacious-medium: 12px; + --spectrum-accordion-top-to-text-compact-large: 4px; + --spectrum-accordion-top-to-text-regular-large: 9px; + --spectrum-accordion-top-to-text-spacious-large: 12px; + --spectrum-accordion-top-to-text-compact-extra-large: 5px; + --spectrum-accordion-top-to-text-regular-extra-large: 9px; + --spectrum-accordion-top-to-text-spacious-extra-large: 13px; + --spectrum-accordion-bottom-to-text-compact-small: 2px; + --spectrum-accordion-bottom-to-text-regular-small: 7px; + --spectrum-accordion-bottom-to-text-spacious-small: 11px; + --spectrum-accordion-bottom-to-text-compact-medium: 5px; + --spectrum-accordion-bottom-to-text-regular-medium: 9px; + --spectrum-accordion-bottom-to-text-spacious-medium: 13px; + --spectrum-accordion-bottom-to-text-compact-large: 8px; + --spectrum-accordion-bottom-to-text-regular-large: 11px; + --spectrum-accordion-bottom-to-text-spacious-large: 16px; + --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; + --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; + --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; + --spectrum-accordion-minimum-width: 200px; + --spectrum-accordion-content-area-top-to-content: 8px; + --spectrum-accordion-content-area-bottom-to-content: 16px; + --spectrum-color-handle-size: 16px; + --spectrum-color-handle-size-key-focus: 32px; + --spectrum-table-column-header-row-top-to-text-small: 8px; + --spectrum-table-column-header-row-top-to-text-medium: 7px; + --spectrum-table-column-header-row-top-to-text-large: 10px; + --spectrum-table-column-header-row-top-to-text-extra-large: 13px; + --spectrum-table-column-header-row-bottom-to-text-small: 9px; + --spectrum-table-column-header-row-bottom-to-text-medium: 8px; + --spectrum-table-column-header-row-bottom-to-text-large: 10px; + --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; + --spectrum-table-row-height-small-regular: 32px; + --spectrum-table-row-height-medium-regular: 40px; + --spectrum-table-row-height-large-regular: 48px; + --spectrum-table-row-height-extra-large-regular: 56px; + --spectrum-table-row-height-small-spacious: 40px; + --spectrum-table-row-height-medium-spacious: 48px; + --spectrum-table-row-height-large-spacious: 56px; + --spectrum-table-row-height-extra-large-spacious: 64px; + --spectrum-table-row-top-to-text-small-regular: 8px; + --spectrum-table-row-top-to-text-medium-regular: 11px; + --spectrum-table-row-top-to-text-large-regular: 14px; + --spectrum-table-row-top-to-text-extra-large-regular: 17px; + --spectrum-table-row-bottom-to-text-small-regular: 9px; + --spectrum-table-row-bottom-to-text-medium-regular: 12px; + --spectrum-table-row-bottom-to-text-large-regular: 14px; + --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; + --spectrum-table-row-top-to-text-small-spacious: 12px; + --spectrum-table-row-top-to-text-medium-spacious: 15px; + --spectrum-table-row-top-to-text-large-spacious: 18px; + --spectrum-table-row-top-to-text-extra-large-spacious: 21px; + --spectrum-table-row-bottom-to-text-small-spacious: 13px; + --spectrum-table-row-bottom-to-text-medium-spacious: 16px; + --spectrum-table-row-bottom-to-text-large-spacious: 18px; + --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; + --spectrum-table-checkbox-to-text: 24px; + --spectrum-table-header-row-checkbox-to-top-small: 10px; + --spectrum-table-header-row-checkbox-to-top-medium: 9px; + --spectrum-table-header-row-checkbox-to-top-large: 12px; + --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; + --spectrum-table-row-checkbox-to-top-small-compact: 6px; + --spectrum-table-row-checkbox-to-top-small-regular: 10px; + --spectrum-table-row-checkbox-to-top-small-spacious: 14px; + --spectrum-table-row-checkbox-to-top-medium-compact: 9px; + --spectrum-table-row-checkbox-to-top-medium-regular: 13px; + --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; + --spectrum-table-row-checkbox-to-top-large-compact: 12px; + --spectrum-table-row-checkbox-to-top-large-regular: 16px; + --spectrum-table-row-checkbox-to-top-large-spacious: 20px; + --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; + --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; + --spectrum-table-section-header-row-height-small: 24px; + --spectrum-table-section-header-row-height-medium: 32px; + --spectrum-table-section-header-row-height-large: 40px; + --spectrum-table-section-header-row-height-extra-large: 48px; + --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; + --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; + --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; + --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; + --spectrum-tab-item-to-tab-item-horizontal-small: 21px; + --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; + --spectrum-tab-item-to-tab-item-horizontal-large: 27px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; + --spectrum-tab-item-to-tab-item-vertical-small: 4px; + --spectrum-tab-item-to-tab-item-vertical-medium: 4px; + --spectrum-tab-item-to-tab-item-vertical-large: 5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; + --spectrum-tab-item-start-to-edge-small: 12px; + --spectrum-tab-item-start-to-edge-medium: 12px; + --spectrum-tab-item-start-to-edge-large: 13px; + --spectrum-tab-item-start-to-edge-extra-large: 13px; + --spectrum-tab-item-top-to-text-small: 11px; + --spectrum-tab-item-bottom-to-text-small: 12px; + --spectrum-tab-item-top-to-text-medium: 14px; + --spectrum-tab-item-bottom-to-text-medium: 14px; + --spectrum-tab-item-top-to-text-large: 16px; + --spectrum-tab-item-bottom-to-text-large: 18px; + --spectrum-tab-item-top-to-text-extra-large: 19px; + --spectrum-tab-item-bottom-to-text-extra-large: 20px; + --spectrum-tab-item-top-to-text-compact-small: 4px; + --spectrum-tab-item-bottom-to-text-compact-small: 5px; + --spectrum-tab-item-top-to-text-compact-medium: 6px; + --spectrum-tab-item-bottom-to-text-compact-medium: 8px; + --spectrum-tab-item-top-to-text-compact-large: 10px; + --spectrum-tab-item-bottom-to-text-compact-large: 12px; + --spectrum-tab-item-top-to-text-compact-extra-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-small: 13px; + --spectrum-tab-item-top-to-workflow-icon-medium: 15px; + --spectrum-tab-item-top-to-workflow-icon-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; + --spectrum-tab-item-focus-indicator-gap-small: 7px; + --spectrum-tab-item-focus-indicator-gap-medium: 8px; + --spectrum-tab-item-focus-indicator-gap-large: 9px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; + --spectrum-side-navigation-width: 192px; + --spectrum-side-navigation-minimum-width: 160px; + --spectrum-side-navigation-maximum-width: 240px; + --spectrum-side-navigation-second-level-edge-to-text: 24px; + --spectrum-side-navigation-third-level-edge-to-text: 36px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; + --spectrum-side-navigation-item-to-item: 4px; + --spectrum-side-navigation-item-to-header: 24px; + --spectrum-side-navigation-header-to-item: 8px; + --spectrum-side-navigation-bottom-to-text: 8px; + --spectrum-tray-top-to-content-area: 4px; + --spectrum-accordion-top-to-text-spacious-small: 9px; + --spectrum-drop-shadow-y: 1px; + --spectrum-drop-shadow-blur: 4px; + --spectrum-text-to-visual-50: 5px; + --spectrum-text-to-visual-75: 5px; + --spectrum-text-to-visual-100: 6px; + --spectrum-text-to-visual-200: 7px; + --spectrum-text-to-visual-300: 8px; + --spectrum-text-to-visual-400: 9px; + --spectrum-text-to-control-75: 9px; + --spectrum-text-to-control-100: 10px; + --spectrum-text-to-control-200: 11px; + --spectrum-text-to-control-300: 13px; + --spectrum-component-height-50: 20px; + --spectrum-component-height-75: 24px; + --spectrum-component-height-100: 32px; + --spectrum-component-height-200: 40px; + --spectrum-component-height-300: 48px; + --spectrum-component-height-400: 56px; + --spectrum-component-height-500: 64px; + --spectrum-component-pill-edge-to-visual-75: 11px; + --spectrum-component-pill-edge-to-visual-100: 14px; + --spectrum-component-pill-edge-to-visual-200: 18px; + --spectrum-component-pill-edge-to-visual-300: 20px; + --spectrum-component-pill-edge-to-visual-only-75: 4px; + --spectrum-component-pill-edge-to-visual-only-100: 6px; + --spectrum-component-pill-edge-to-visual-only-200: 9px; + --spectrum-component-pill-edge-to-visual-only-300: 11px; + --spectrum-component-pill-edge-to-text-75: 13px; + --spectrum-component-pill-edge-to-text-100: 16px; + --spectrum-component-pill-edge-to-text-200: 20px; + --spectrum-component-pill-edge-to-text-300: 23px; + --spectrum-component-edge-to-visual-50: 7px; + --spectrum-component-edge-to-visual-75: 8px; + --spectrum-component-edge-to-visual-100: 10px; + --spectrum-component-edge-to-visual-200: 13px; + --spectrum-component-edge-to-visual-300: 14px; + --spectrum-component-edge-to-visual-only-50: 3px; + --spectrum-component-edge-to-visual-only-75: 4px; + --spectrum-component-edge-to-visual-only-100: 6px; + --spectrum-component-edge-to-visual-only-200: 9px; + --spectrum-component-edge-to-visual-only-300: 11px; + --spectrum-component-edge-to-text-50: 8px; + --spectrum-component-edge-to-text-75: 10px; + --spectrum-component-edge-to-text-100: 12px; + --spectrum-component-edge-to-text-200: 15px; + --spectrum-component-edge-to-text-300: 17px; + --spectrum-component-top-to-workflow-icon-50: 3px; + --spectrum-component-top-to-workflow-icon-75: 4px; + --spectrum-component-top-to-workflow-icon-100: 6px; + --spectrum-component-top-to-workflow-icon-200: 9px; + --spectrum-component-top-to-workflow-icon-300: 11px; + --spectrum-component-top-to-text-50: 3px; + --spectrum-component-top-to-text-75: 4px; + --spectrum-component-top-to-text-100: 6px; + --spectrum-component-top-to-text-200: 9px; + --spectrum-component-top-to-text-300: 12px; + --spectrum-component-bottom-to-text-50: 3px; + --spectrum-component-bottom-to-text-75: 5px; + --spectrum-component-bottom-to-text-100: 9px; + --spectrum-component-bottom-to-text-200: 11px; + --spectrum-component-bottom-to-text-300: 14px; + --spectrum-component-to-menu-small: 6px; + --spectrum-component-to-menu-medium: 6px; + --spectrum-component-to-menu-large: 7px; + --spectrum-component-to-menu-extra-large: 8px; + --spectrum-field-edge-to-disclosure-icon-75: 7px; + --spectrum-field-edge-to-disclosure-icon-100: 11px; + --spectrum-field-edge-to-disclosure-icon-200: 14px; + --spectrum-field-edge-to-disclosure-icon-300: 17px; + --spectrum-field-end-edge-to-disclosure-icon-75: 7px; + --spectrum-field-end-edge-to-disclosure-icon-100: 11px; + --spectrum-field-end-edge-to-disclosure-icon-200: 14px; + --spectrum-field-end-edge-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-disclosure-icon-75: 7px; + --spectrum-field-top-to-disclosure-icon-100: 11px; + --spectrum-field-top-to-disclosure-icon-200: 14px; + --spectrum-field-top-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-alert-icon-small: 4px; + --spectrum-field-top-to-alert-icon-medium: 7px; + --spectrum-field-top-to-alert-icon-large: 10px; + --spectrum-field-top-to-alert-icon-extra-large: 13px; + --spectrum-field-top-to-validation-icon-small: 7px; + --spectrum-field-top-to-validation-icon-medium: 11px; + --spectrum-field-top-to-validation-icon-large: 14px; + --spectrum-field-top-to-validation-icon-extra-large: 17px; + --spectrum-field-top-to-progress-circle-small: 4px; + --spectrum-field-top-to-progress-circle-medium: 8px; + --spectrum-field-top-to-progress-circle-large: 12px; + --spectrum-field-top-to-progress-circle-extra-large: 16px; + --spectrum-field-edge-to-alert-icon-small: 9px; + --spectrum-field-edge-to-alert-icon-medium: 12px; + --spectrum-field-edge-to-alert-icon-large: 15px; + --spectrum-field-edge-to-alert-icon-extra-large: 18px; + --spectrum-field-edge-to-validation-icon-small: 9px; + --spectrum-field-edge-to-validation-icon-medium: 12px; + --spectrum-field-edge-to-validation-icon-large: 15px; + --spectrum-field-edge-to-validation-icon-extra-large: 18px; + --spectrum-field-text-to-alert-icon-small: 8px; + --spectrum-field-text-to-alert-icon-medium: 12px; + --spectrum-field-text-to-alert-icon-large: 15px; + --spectrum-field-text-to-alert-icon-extra-large: 18px; + --spectrum-field-text-to-validation-icon-small: 8px; + --spectrum-field-text-to-validation-icon-medium: 12px; + --spectrum-field-text-to-validation-icon-large: 15px; + --spectrum-field-text-to-validation-icon-extra-large: 18px; + --spectrum-field-width: 192px; + --spectrum-character-count-to-field-quiet-small: -3px; + --spectrum-character-count-to-field-quiet-medium: -3px; + --spectrum-character-count-to-field-quiet-large: -3px; + --spectrum-character-count-to-field-quiet-extra-large: -4px; + --spectrum-side-label-character-count-to-field: 12px; + --spectrum-side-label-character-count-top-margin-small: 4px; + --spectrum-side-label-character-count-top-margin-medium: 8px; + --spectrum-side-label-character-count-top-margin-large: 11px; + --spectrum-side-label-character-count-top-margin-extra-large: 14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; + --spectrum-navigational-indicator-top-to-back-icon-small: 6px; + --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; + --spectrum-navigational-indicator-top-to-back-icon-large: 12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; + --spectrum-color-control-track-width: 24px; + --spectrum-font-size-50: 11px; + --spectrum-font-size-75: 12px; + --spectrum-font-size-100: 14px; + --spectrum-font-size-200: 16px; + --spectrum-font-size-300: 18px; + --spectrum-font-size-400: 20px; + --spectrum-font-size-500: 22px; + --spectrum-font-size-600: 25px; + --spectrum-font-size-700: 28px; + --spectrum-font-size-800: 32px; + --spectrum-font-size-900: 36px; + --spectrum-font-size-1000: 40px; + --spectrum-font-size-1100: 45px; + --spectrum-font-size-1200: 50px; + --spectrum-font-size-1300: 60px; + --spectrum-slider-tick-mark-height: 10px; + --spectrum-slider-ramp-track-height: 16px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; + --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; + --spectrum-menu-item-checkmark-height-small: 10px; + --spectrum-menu-item-checkmark-height-medium: 10px; + --spectrum-menu-item-checkmark-height-large: 12px; + --spectrum-menu-item-checkmark-height-extra-large: 14px; - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; + --spectrum-menu-item-checkmark-width-small: 10px; + --spectrum-menu-item-checkmark-width-medium: 10px; + --spectrum-menu-item-checkmark-width-large: 12px; + --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); + --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; + --spectrum-button-top-to-text-small: 5px; + --spectrum-button-bottom-to-text-small: 4px; + --spectrum-button-top-to-text-medium: 7px; + --spectrum-button-bottom-to-text-medium: 8px; + --spectrum-button-top-to-text-large: 10px; + --spectrum-button-bottom-to-text-large: 10px; + --spectrum-button-top-to-text-extra-large: 13px; + --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); + --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); + --spectrum-coach-indicator-gap: 6px; + --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; + --spectrum-coachmark-buttongroup-display: flex; + --spectrum-coachmark-buttongroup-mobile-display: none; + --spectrum-coachmark-menu-display: inline-flex; + --spectrum-coachmark-menu-mobile-display: none; + --spectrum-workflow-icon-size-xxl: 32px; + --spectrum-workflow-icon-size-xxs: 12px; - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start: 5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; + --spectrum-dialog-confirm-entry-animation-distance: 20px; + --spectrum-dialog-confirm-hero-height: 128px; + --spectrum-dialog-confirm-border-radius: 4px; + --spectrum-dialog-confirm-title-text-size: 18px; + --spectrum-dialog-confirm-description-text-size: 14px; + --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); + --spectrum-datepicker-initial-width: 128px; + --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height: 24px; + --spectrum-datepicker-width-quiet-first: 72px; + --spectrum-datepicker-width-quiet-second: 16px; + --spectrum-datepicker-datetime-width-first: 36px; + --spectrum-datepicker-invalid-icon-to-button: 8px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; + --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; + --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing: 5px; - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; + --spectrum-dial-border-radius: 16px; + --spectrum-dial-handle-position: 8px; + --spectrum-dial-handle-block-margin: 16px; + --spectrum-dial-handle-inline-margin: 16px; + --spectrum-dial-controls-margin: 8px; + --spectrum-dial-label-gap-y: 5px; + --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); + --spectrum-assetcard-focus-ring-border-radius: 8px; + --spectrum-assetcard-selectionindicator-margin: 12px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; + --spectrum-ui-icon-medium-display: block; + --spectrum-ui-icon-large-display: none; - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); } diff --git a/tools/styles/tokens-v2/spectrum/global-vars.css b/tools/styles/tokens-v2/spectrum/global-vars.css index 9c032dd2e8..9c11ae3cfd 100644 --- a/tools/styles/tokens-v2/spectrum/global-vars.css +++ b/tools/styles/tokens-v2/spectrum/global-vars.css @@ -1,7232 +1,6913 @@ :host, :root { - --system-accordion-item-width: var(--spectrum-accordion-minimum-width); - --system-accordion-disclosure-indicator-to-text-space: var( - --spectrum-accordion-disclosure-indicator-to-text - ); - --system-accordion-edge-to-disclosure-indicator-space: var( - --spectrum-accordion-edge-to-disclosure-indicator - ); - --system-accordion-edge-to-text-space: var( - --spectrum-accordion-edge-to-text - ); - --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-accordion-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-accordion-corner-radius: var(--spectrum-corner-radius-100); - --system-accordion-item-content-area-top-to-content: var( - --spectrum-accordion-content-area-top-to-content - ); - --system-accordion-item-content-area-bottom-to-content: var( - --spectrum-accordion-content-area-bottom-to-content - ); - --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --system-accordion-item-header-font-weight: var( - --spectrum-bold-font-weight - ); - --system-accordion-item-header-font-style: var( - --spectrum-default-font-style - ); - --system-accordion-item-header-line-height: 1.25; - --system-accordion-item-content-font: var( - --spectrum-sans-font-family-stack - ); - --system-accordion-item-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-accordion-item-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-accordion-item-content-line-height: var( - --spectrum-line-height-100 - ); - --system-accordion-background-color-default: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) - ); - --system-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) - ); - --system-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) - ); - --system-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) - ); - --system-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-accordion-item-header-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-color: var(--spectrum-body-color); - --system-accordion-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-accordion-divider-color: var(--spectrum-gray-200); - --system-accordion-item-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-content-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-height: var(--spectrum-component-height-200); - --system-accordion-size-m-item-height: var(--spectrum-component-height-200); - --system-accordion-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-size-m-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-size-m-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-item-header-font-size: var(--spectrum-font-size-300); - --system-accordion-size-m-item-header-font-size: var( - --spectrum-font-size-300 - ); - --system-accordion-item-content-font-size: var(--spectrum-body-size-s); - --system-accordion-size-m-item-content-font-size: var( - --spectrum-body-size-s - ); - --system-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-s-item-height: var(--spectrum-component-height-100); - --system-accordion-size-s-disclosure-indicator-height: var( - --spectrum-component-height-75 - ); - --system-accordion-size-s-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 - ); - --system-accordion-size-s-item-header-font-size: var( - --spectrum-font-size-200 - ); - --system-accordion-size-s-item-content-font-size: var( - --spectrum-body-size-xs - ); - --system-accordion-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small - ); - --system-accordion-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small - ); - --system-accordion-size-l-item-height: var(--spectrum-component-height-300); - --system-accordion-size-l-disclosure-indicator-height: var( - --spectrum-component-height-200 - ); - --system-accordion-size-l-component-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-accordion-size-l-item-header-font-size: var( - --spectrum-font-size-500 - ); - --system-accordion-size-l-item-content-font-size: var( - --spectrum-body-size-m - ); - --system-accordion-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-large - ); - --system-accordion-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-large - ); - --system-accordion-size-xl-item-height: var( - --spectrum-component-height-400 - ); - --system-accordion-size-xl-disclosure-indicator-height: var( - --spectrum-component-height-300 - ); - --system-accordion-size-xl-component-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-accordion-size-xl-item-header-font-size: var( - --spectrum-font-size-700 - ); - --system-accordion-size-xl-item-content-font-size: var( - --spectrum-body-size-l - ); - --system-accordion-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-extra-large - ); - --system-accordion-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-extra-large - ); - --system-accordion-compact-size-s-item-height: var( - --spectrum-component-height-75 - ); - --system-accordion-compact-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-small - ); - --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-small - ); - --system-accordion-compact-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-size-m-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-l-item-height: var( - --spectrum-component-height-200 - ); - --system-accordion-compact-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-large - ); - --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-large - ); - --system-accordion-compact-size-xl-item-height: var( - --spectrum-component-height-300 - ); - --system-accordion-compact-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-extra-large - ); - --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-extra-large - ); - --system-accordion-spacious-size-s-item-header-line-height: 1.25; - --system-accordion-spacious-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-small-top-to-text-spacious - ); - --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-small - ); - --system-accordion-spacious-item-header-line-height: 1.278; - --system-accordion-spacious-size-m-item-header-line-height: 1.278; - --system-accordion-spacious-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-l-item-header-line-height: 1.273; - --system-accordion-spacious-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-large - ); - --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-large - ); - --system-accordion-spacious-size-xl-item-header-line-height: 1.25; - --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-extra-large - ); - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-extra-large - ); + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text + ); + --system-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator + ); + --system-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content + ); + --system-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); + --system-accordion-item-header-font-style: var(--spectrum-default-font-style); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-accordion-item-content-line-height: var(--spectrum-line-height-100); + --system-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --system-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --system-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --system-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) + ); + --system-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-accordion-item-header-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-accordion-divider-color: var(--spectrum-gray-200); + --system-accordion-item-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-item-content-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-size-m-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-size-m-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var( + --spectrum-font-size-300 + ); + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var( + --spectrum-component-height-75 + ); + --system-accordion-size-s-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); + --system-accordion-size-s-item-header-font-size: var( + --spectrum-font-size-200 + ); + --system-accordion-size-s-item-content-font-size: var( + --spectrum-body-size-xs + ); + --system-accordion-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small + ); + --system-accordion-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small + ); + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var( + --spectrum-component-height-200 + ); + --system-accordion-size-l-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-accordion-size-l-item-header-font-size: var( + --spectrum-font-size-500 + ); + --system-accordion-size-l-item-content-font-size: var(--spectrum-body-size-m); + --system-accordion-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large + ); + --system-accordion-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large + ); + --system-accordion-size-xl-item-height: var(--spectrum-component-height-400); + --system-accordion-size-xl-disclosure-indicator-height: var( + --spectrum-component-height-300 + ); + --system-accordion-size-xl-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-accordion-size-xl-item-header-font-size: var( + --spectrum-font-size-700 + ); + --system-accordion-size-xl-item-content-font-size: var( + --spectrum-body-size-l + ); + --system-accordion-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large + ); + --system-accordion-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large + ); + --system-accordion-compact-size-s-item-height: var( + --spectrum-component-height-75 + ); + --system-accordion-compact-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small + ); + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small + ); + --system-accordion-compact-item-height: var(--spectrum-component-height-100); + --system-accordion-compact-size-m-item-height: var( + --spectrum-component-height-100 + ); + --system-accordion-compact-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-l-item-height: var( + --spectrum-component-height-200 + ); + --system-accordion-compact-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large + ); + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large + ); + --system-accordion-compact-size-xl-item-height: var( + --spectrum-component-height-300 + ); + --system-accordion-compact-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large + ); + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large + ); + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious + ); + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large + ); } :host, :root { - --system-action-bar-height: var(--spectrum-action-bar-height); - --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); - --system-action-bar-item-counter-line-height: var( - --spectrum-line-height-100 - ); - --system-action-bar-item-counter-color: var( - --spectrum-neutral-content-color-default - ); - --system-action-bar-item-counter-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-action-bar-popover-background-color: var(--spectrum-gray-25); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); - --system-action-bar-emphasized-background-color: var( - --spectrum-informative-background-color-default - ); - --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); - --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); - --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); - --system-action-bar-spacing-item-counter-top: var( - --spectrum-action-bar-top-to-item-counter - ); - --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); - --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); - --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var(--spectrum-line-height-100); + --system-action-bar-item-counter-color: var( + --spectrum-neutral-content-color-default + ); + --system-action-bar-item-counter-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-action-bar-popover-background-color: var(--spectrum-gray-25); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var( + --spectrum-informative-background-color-default + ); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var( + --spectrum-action-bar-top-to-item-counter + ); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); } :host, :root { - --system-action-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-action-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-action-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-action-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-action-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-action-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-action-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-action-button-background-color-default: var(--spectrum-gray-50); - --system-action-button-background-color-hover: var(--spectrum-gray-100); - --system-action-button-background-color-down: var(--spectrum-gray-200); - --system-action-button-background-color-focus: var(--spectrum-gray-100); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-background-color-disabled: transparent; - --system-action-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-action-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-100 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-100 - ); - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-selected-background-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-action-button-selected-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-hover: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-down: var(--spectrum-gray-50); - --system-action-button-selected-content-color-focus: var( - --spectrum-gray-50 - ); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-action-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-action-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-action-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-action-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-action-button-selected-emphasized-content-color-default: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-hover: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-down: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-default: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-hover: var( - --spectrum-transparent-black-600 - ); - --system-action-button-static-black-border-color-down: var( - --spectrum-transparent-black-700 - ); - --system-action-button-static-black-border-color-focus: var( - --spectrum-transparent-black-600 - ); - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-action-button-static-black-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-action-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-action-button-static-black-selected-background-color-default: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-background-color-down: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-background-color-focus: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-background-color-disabled: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-black-selected-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-selected-emphasized-background-color-default: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-emphasized-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-down: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-focus: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-static-black-selected-emphasized-content-color-hover: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-down: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-focus: var( - --spectrum-gray-900 - ); - --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-default: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-border-color-hover: var( - --spectrum-transparent-white-600 - ); - --system-action-button-static-white-border-color-down: var( - --spectrum-transparent-white-700 - ); - --system-action-button-static-white-border-color-focus: var( - --spectrum-transparent-white-600 - ); - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-action-button-static-white-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-action-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-action-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-background-color-disabled: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-selected-border-color-disabled: transparent; - --system-action-button-static-white-selected-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-white-selected-emphasized-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-emphasized-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-size-m-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-size-m-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-size-m-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-action-button-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-size-m-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-size-m-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-size-m-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-m-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-xs-min-width: calc( - var(--spectrum-component-edge-to-visual-only-50) * 2 + - var(--spectrum-workflow-icon-size-50) - ); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var( - --spectrum-text-to-visual-50 - ); - --system-action-button-size-xs-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-small - ); - --system-action-button-size-xs-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-50 - ); - --system-action-button-size-xs-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-50 - ); - --system-action-button-size-xs-edge-to-text-size: var( - --spectrum-component-edge-to-text-50 - ); - --system-action-button-size-s-min-width: calc( - var(--spectrum-component-edge-to-visual-only-75) * 2 + - var(--spectrum-workflow-icon-size-75) - ); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-action-button-size-s-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-small - ); - --system-action-button-size-s-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-75 - ); - --system-action-button-size-s-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-action-button-size-s-edge-to-text-size: var( - --spectrum-component-edge-to-text-75 - ); - --system-action-button-size-l-min-width: calc( - var(--spectrum-component-edge-to-visual-only-200) * 2 + - var(--spectrum-workflow-icon-size-200) - ); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-action-button-size-l-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-large - ); - --system-action-button-size-l-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-200 - ); - --system-action-button-size-l-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-action-button-size-l-edge-to-text-size: var( - --spectrum-component-edge-to-text-200 - ); - --system-action-button-size-xl-min-width: calc( - var(--spectrum-component-edge-to-visual-only-300) * 2 + - var(--spectrum-workflow-icon-size-300) - ); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-action-button-size-xl-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-large - ); - --system-action-button-size-xl-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-300 - ); - --system-action-button-size-xl-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-action-button-size-xl-edge-to-text-size: var( - --spectrum-component-edge-to-text-300 - ); + --system-action-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-action-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-action-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-action-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-action-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-action-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-action-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-action-button-background-color-default: var(--spectrum-gray-50); + --system-action-button-background-color-hover: var(--spectrum-gray-100); + --system-action-button-background-color-down: var(--spectrum-gray-200); + --system-action-button-background-color-focus: var(--spectrum-gray-100); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-background-color-disabled: transparent; + --system-action-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-action-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-action-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-action-button-selected-background-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-action-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-action-button-selected-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-selected-content-color-hover: var(--spectrum-gray-50); + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var(--spectrum-gray-50); + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-action-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-action-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-action-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-action-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-action-button-selected-emphasized-content-color-default: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-hover: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-down: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: var( + --spectrum-transparent-black-500 + ); + --system-action-button-static-black-border-color-hover: var( + --spectrum-transparent-black-600 + ); + --system-action-button-static-black-border-color-down: var( + --spectrum-transparent-black-700 + ); + --system-action-button-static-black-border-color-focus: var( + --spectrum-transparent-black-600 + ); + --system-action-button-static-black-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-action-button-static-black-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-down: var(--spectrum-black); + --system-action-button-static-black-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-action-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-action-button-static-black-selected-background-color-default: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-hover: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-background-color-down: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-background-color-focus: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-background-color-disabled: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-down: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-selected-emphasized-background-color-default: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-emphasized-background-color-hover: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-down: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-focus: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-static-black-selected-emphasized-content-color-hover: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-down: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-focus: var( + --spectrum-gray-900 + ); + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: var( + --spectrum-transparent-white-500 + ); + --system-action-button-static-white-border-color-hover: var( + --spectrum-transparent-white-600 + ); + --system-action-button-static-white-border-color-down: var( + --spectrum-transparent-white-700 + ); + --system-action-button-static-white-border-color-focus: var( + --spectrum-transparent-white-600 + ); + --system-action-button-static-white-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-action-button-static-white-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-down: var(--spectrum-white); + --system-action-button-static-white-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-action-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-action-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-background-color-disabled: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-down: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-white-selected-emphasized-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-emphasized-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-size-m-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-size-m-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-size-m-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-action-button-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-size-m-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-size-m-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-size-m-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-m-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-xs-min-width: calc( + var(--spectrum-component-edge-to-visual-only-50) * 2 + + var(--spectrum-workflow-icon-size-50) + ); + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var( + --spectrum-text-to-visual-50 + ); + --system-action-button-size-xs-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-small + ); + --system-action-button-size-xs-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-50 + ); + --system-action-button-size-xs-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-50 + ); + --system-action-button-size-xs-edge-to-text-size: var( + --spectrum-component-edge-to-text-50 + ); + --system-action-button-size-s-min-width: calc( + var(--spectrum-component-edge-to-visual-only-75) * 2 + + var(--spectrum-workflow-icon-size-75) + ); + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-action-button-size-s-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-small + ); + --system-action-button-size-s-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-75 + ); + --system-action-button-size-s-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-action-button-size-s-edge-to-text-size: var( + --spectrum-component-edge-to-text-75 + ); + --system-action-button-size-l-min-width: calc( + var(--spectrum-component-edge-to-visual-only-200) * 2 + + var(--spectrum-workflow-icon-size-200) + ); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-action-button-size-l-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-large + ); + --system-action-button-size-l-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-200 + ); + --system-action-button-size-l-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-action-button-size-l-edge-to-text-size: var( + --spectrum-component-edge-to-text-200 + ); + --system-action-button-size-xl-min-width: calc( + var(--spectrum-component-edge-to-visual-only-300) * 2 + + var(--spectrum-workflow-icon-size-300) + ); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-action-button-size-xl-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-large + ); + --system-action-button-size-xl-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-300 + ); + --system-action-button-size-xl-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-300 + ); + --system-action-button-size-xl-edge-to-text-size: var( + --spectrum-component-edge-to-text-300 + ); } :host, :root { - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-m-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xs-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-xs-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xs-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-xs-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); } :host, :root { - --system-alert-banner-neutral-background: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-alert-banner-min-height: var( - --spectrum-alert-banner-minimum-height - ); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --system-alert-banner-informative-background: var( - --spectrum-informative-background-color-default - ); - --system-alert-banner-negative-background: var( - --spectrum-negative-background-color-default - ); - --system-alert-banner-font-color: var(--spectrum-white); + --system-alert-banner-neutral-background: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --system-alert-banner-informative-background: var( + --spectrum-informative-background-color-default + ); + --system-alert-banner-negative-background: var( + --spectrum-negative-background-color-default + ); + --system-alert-banner-font-color: var(--spectrum-white); } :host, :root { - --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-dialog-warning-icon-color: var( - --spectrum-notice-visual-color - ); - --system-alert-dialog-error-icon-color: var( - --spectrum-negative-visual-color - ); - --system-alert-dialog-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-alert-dialog-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-alert-dialog-title-font-size: var( - --spectrum-alert-dialog-title-size - ); - --system-alert-dialog-title-line-height: var( - --spectrum-heading-line-height - ); - --system-alert-dialog-title-color: var(--spectrum-heading-color); - --system-alert-dialog-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-alert-dialog-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-alert-dialog-body-font-size: var( - --spectrum-alert-dialog-description-size - ); - --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --system-alert-dialog-body-color: var(--spectrum-body-color); - --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); + --system-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); + --system-alert-dialog-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-alert-dialog-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-alert-dialog-title-font-size: var( + --spectrum-alert-dialog-title-size + ); + --system-alert-dialog-title-line-height: var(--spectrum-heading-line-height); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-alert-dialog-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-alert-dialog-body-font-size: var( + --spectrum-alert-dialog-description-size + ); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); } :host, :root { - --system-asset-transition-duration: var(--spectrum-animation-duration-100); - --system-asset-folder-background-color: var(--spectrum-gray-200); - --system-asset-file-background-color: var(--spectrum-gray-25); - --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-200); + --system-asset-file-background-color: var(--spectrum-gray-25); + --system-asset-icon-outline-color: var(--spectrum-gray-500); } :host, :root { - --system-avatar-color-opacity: 1; - --system-avatar-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-block-size: var(--spectrum-avatar-size-100); - --system-avatar-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-avatar-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-avatar-color-opacity-disabled: var( - --spectrum-avatar-opacity-disabled - ); - --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); - --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); - --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); - --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); - --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); - --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); - --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); - --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); - --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); - --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); - --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); - --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); - --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); - --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); - --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); - --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); - --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-avatar-color-opacity-disabled: var( + --spectrum-avatar-opacity-disabled + ); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); } :host, :root { - --system-badge-corner-radius: var(--spectrum-corner-radius-100); - --system-badge-line-height: var(--spectrum-line-height-100); - --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-badge-label-icon-color: var(--spectrum-white); - --system-badge-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-badge-background-color-accent: var( - --spectrum-accent-background-color-default - ); - --system-badge-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-badge-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-badge-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-badge-background-color-notice: var( - --spectrum-notice-background-color-default - ); - --system-badge-background-color-gray: var( - --spectrum-gray-background-color-default - ); - --system-badge-background-color-red: var( - --spectrum-red-background-color-default - ); - --system-badge-background-color-orange: var( - --spectrum-orange-background-color-default - ); - --system-badge-background-color-yellow: var( - --spectrum-yellow-background-color-default - ); - --system-badge-background-color-chartreuse: var( - --spectrum-chartreuse-background-color-default - ); - --system-badge-background-color-celery: var( - --spectrum-celery-background-color-default - ); - --system-badge-background-color-green: var( - --spectrum-green-background-color-default - ); - --system-badge-background-color-seafoam: var( - --spectrum-seafoam-background-color-default - ); - --system-badge-background-color-cyan: var( - --spectrum-cyan-background-color-default - ); - --system-badge-background-color-blue: var( - --spectrum-blue-background-color-default - ); - --system-badge-background-color-indigo: var( - --spectrum-indigo-background-color-default - ); - --system-badge-background-color-purple: var( - --spectrum-purple-background-color-default - ); - --system-badge-background-color-fuchsia: var( - --spectrum-fuchsia-background-color-default - ); - --system-badge-background-color-magenta: var( - --spectrum-magenta-background-color-default - ); - --system-badge-height: var(--spectrum-component-height-100); - --system-badge-font-size: var(--spectrum-font-size-100); - --system-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-100 - ); - --system-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-100 - ); - --system-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-100 - ); - --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --system-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-100 - ); - --system-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-badge-orange-label-icon-color: var(--spectrum-black); - --system-badge-yellow-label-icon-color: var(--spectrum-black); - --system-badge-chartreuse-label-icon-color: var(--spectrum-black); - --system-badge-celery-label-icon-color: var(--spectrum-black); - --system-badge-gray-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-red-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-green-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-seafoam-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-cyan-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-blue-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-indigo-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-purple-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-fuchsia-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-magenta-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-size-s-height: var(--spectrum-component-height-75); - --system-badge-size-s-font-size: var(--spectrum-font-size-75); - --system-badge-size-s-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-75 - ); - --system-badge-size-s-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-75 - ); - --system-badge-size-s-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-75 - ); - --system-badge-size-s-workflow-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); - --system-badge-size-s-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-75 - ); - --system-badge-size-s-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-badge-size-s-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-badge-size-l-height: var(--spectrum-component-height-100); - --system-badge-size-l-font-size: var(--spectrum-font-size-200); - --system-badge-size-l-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-200 - ); - --system-badge-size-l-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-200 - ); - --system-badge-size-l-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-200 - ); - --system-badge-size-l-workflow-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); - --system-badge-size-l-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-200 - ); - --system-badge-size-l-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-badge-size-l-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-badge-size-xl-height: var(--spectrum-component-height-100); - --system-badge-size-xl-font-size: var(--spectrum-font-size-300); - --system-badge-size-xl-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-300 - ); - --system-badge-size-xl-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-300 - ); - --system-badge-size-xl-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-300 - ); - --system-badge-size-xl-workflow-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-badge-size-xl-icon-text-spacing: var( - --spectrum-text-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-badge-size-xl-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-300 - ); + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-badge-background-color-accent: var( + --spectrum-accent-background-color-default + ); + --system-badge-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-badge-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-badge-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-badge-background-color-notice: var( + --spectrum-notice-background-color-default + ); + --system-badge-background-color-gray: var( + --spectrum-gray-background-color-default + ); + --system-badge-background-color-red: var( + --spectrum-red-background-color-default + ); + --system-badge-background-color-orange: var( + --spectrum-orange-background-color-default + ); + --system-badge-background-color-yellow: var( + --spectrum-yellow-background-color-default + ); + --system-badge-background-color-chartreuse: var( + --spectrum-chartreuse-background-color-default + ); + --system-badge-background-color-celery: var( + --spectrum-celery-background-color-default + ); + --system-badge-background-color-green: var( + --spectrum-green-background-color-default + ); + --system-badge-background-color-seafoam: var( + --spectrum-seafoam-background-color-default + ); + --system-badge-background-color-cyan: var( + --spectrum-cyan-background-color-default + ); + --system-badge-background-color-blue: var( + --spectrum-blue-background-color-default + ); + --system-badge-background-color-indigo: var( + --spectrum-indigo-background-color-default + ); + --system-badge-background-color-purple: var( + --spectrum-purple-background-color-default + ); + --system-badge-background-color-fuchsia: var( + --spectrum-fuchsia-background-color-default + ); + --system-badge-background-color-magenta: var( + --spectrum-magenta-background-color-default + ); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-100 + ); + --system-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-100 + ); + --system-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-100 + ); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-100 + ); + --system-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-red-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-green-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-seafoam-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-cyan-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-blue-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-indigo-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-purple-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-fuchsia-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-magenta-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-75 + ); + --system-badge-size-s-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-75 + ); + --system-badge-size-s-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-75 + ); + --system-badge-size-s-workflow-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-75 + ); + --system-badge-size-s-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-badge-size-s-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-200 + ); + --system-badge-size-l-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-200 + ); + --system-badge-size-l-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-200 + ); + --system-badge-size-l-workflow-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-200 + ); + --system-badge-size-l-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-badge-size-l-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-300 + ); + --system-badge-size-xl-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-300 + ); + --system-badge-size-xl-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-300 + ); + --system-badge-size-xl-workflow-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-badge-size-xl-icon-text-spacing: var(--spectrum-text-to-visual-300); + --system-badge-size-xl-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-badge-size-xl-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-300 + ); } :host, :root { - --system-button-animation-duration: var(--spectrum-animation-duration-100); - --system-button-border-width: var(--spectrum-border-width-200); - --system-button-line-height: 1.2; - --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-button-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-button-background-color-default: var(--spectrum-gray-50); - --system-button-background-color-hover: var(--spectrum-gray-100); - --system-button-background-color-down: var(--spectrum-gray-200); - --system-button-background-color-focus: var(--spectrum-gray-100); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); - --system-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-accent-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 - ); - --system-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default - ); - --system-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down - ); - --system-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover - ); - --system-button-negative-background-color-down: var( - --spectrum-negative-background-color-down - ); - --system-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 - ); - --system-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 - ); - --system-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 - ); - --system-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default - ); - --system-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover - ); - --system-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down - ); - --system-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-gray-25); - --system-button-primary-content-color-hover: var(--spectrum-gray-25); - --system-button-primary-content-color-down: var(--spectrum-gray-25); - --system-button-primary-content-color-focus: var(--spectrum-gray-25); - --system-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-200 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-200 - ); - --system-button-primary-outline-border-color-default: var( - --spectrum-gray-800 - ); - --system-button-primary-outline-border-color-hover: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-100 - ); - --system-button-secondary-background-color-hover: var(--spectrum-gray-200); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-200); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-200 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-200 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-100); - --system-button-quiet-background-color-down: var(--spectrum-gray-200); - --system-button-quiet-background-color-focus: var(--spectrum-gray-100); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-button-static-white-selected-static-white-content-color-default: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-hover: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-down: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-focus: var( - --spectrum-black - ); - --system-button-static-white-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-600 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-1000 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-1000 - ); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-700 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-m-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-size-m-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-height: var(--spectrum-component-height-100); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-font-size: var(--spectrum-font-size-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-size-m-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --system-button-size-m-padding-label-to-icon: var( - --spectrum-text-to-visual-100 - ); - --system-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --system-button-size-m-top-to-text: var( - --spectrum-button-top-to-text-medium - ); - --system-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-size-m-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-size-m-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --system-button-size-m-intended-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-button-size-s-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-s-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--system-button-border-width) - ); - --system-button-size-s-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --system-button-size-s-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--system-button-border-width) - ); - --system-button-size-s-padding-label-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-button-size-s-top-to-text: var( - --spectrum-button-top-to-text-small - ); - --system-button-size-s-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --system-button-size-s-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-button-size-s-intended-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-button-size-l-min-width: calc( - var(--spectrum-component-height-200) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-l-border-radius: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-200) - - var(--system-button-border-width) - ); - --system-button-size-l-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-200 - ); - --system-button-size-l-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-200) - - var(--system-button-border-width) - ); - --system-button-size-l-padding-label-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-button-size-l-top-to-text: var( - --spectrum-button-top-to-text-large - ); - --system-button-size-l-bottom-to-text: var( - --spectrum-button-bottom-to-text-large - ); - --system-button-size-l-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-button-size-l-intended-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-button-size-xl-min-width: calc( - var(--spectrum-component-height-300) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-xl-border-radius: var( - --spectrum-component-pill-edge-to-text-300 - ); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-300 - ); - --system-button-size-xl-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-padding-label-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-button-size-xl-top-to-text: var( - --spectrum-button-top-to-text-extra-large - ); - --system-button-size-xl-bottom-to-text: var( - --spectrum-button-bottom-to-text-extra-large - ); - --system-button-size-xl-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-button-size-xl-intended-icon-size: var( - --spectrum-workflow-icon-size-300 - ); + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-background-color-default: var(--spectrum-gray-50); + --system-button-background-color-hover: var(--spectrum-gray-100); + --system-button-background-color-down: var(--spectrum-gray-200); + --system-button-background-color-focus: var(--spectrum-gray-100); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-gray-25); + --system-button-primary-content-color-hover: var(--spectrum-gray-25); + --system-button-primary-content-color-down: var(--spectrum-gray-25); + --system-button-primary-content-color-focus: var(--spectrum-gray-25); + --system-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-200 + ); + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-200 + ); + --system-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-button-primary-outline-border-color-hover: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var(--spectrum-gray-900); + --system-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-background-color-default: var(--spectrum-gray-100); + --system-button-secondary-background-color-hover: var(--spectrum-gray-200); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-200); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-200 + ); + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-200 + ); + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-200 + ); + --system-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-outline-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-border-color-default: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-outline-border-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-outline-border-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-button-static-white-selected-static-white-content-color-default: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-hover: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-down: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-focus: var( + --spectrum-black + ); + --system-button-static-white-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-1000 + ); + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-1000 + ); + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-1000 + ); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-border-color-default: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-border-color-hover: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-border-color-down: var( + --spectrum-transparent-black-700 + ); + --system-button-static-black-outline-border-color-focus: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-m-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-size-m-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-height: var(--spectrum-component-height-100); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-font-size: var(--spectrum-font-size-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-size-m-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --system-button-size-m-padding-label-to-icon: var( + --spectrum-text-to-visual-100 + ); + --system-button-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --system-button-size-m-bottom-to-text: var( + --spectrum-button-bottom-to-text-medium + ); + --system-button-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-size-m-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --system-button-size-m-intended-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-button-size-s-min-width: calc( + var(--spectrum-component-height-75) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-s-border-radius: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--system-button-border-width) + ); + --system-button-size-s-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --system-button-size-s-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--system-button-border-width) + ); + --system-button-size-s-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); + --system-button-size-s-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --system-button-size-s-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-button-size-s-intended-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-button-size-l-min-width: calc( + var(--spectrum-component-height-200) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-l-border-radius: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--system-button-border-width) + ); + --system-button-size-l-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-200 + ); + --system-button-size-l-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--system-button-border-width) + ); + --system-button-size-l-padding-label-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); + --system-button-size-l-bottom-to-text: var( + --spectrum-button-bottom-to-text-large + ); + --system-button-size-l-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-button-size-l-intended-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-button-size-xl-min-width: calc( + var(--spectrum-component-height-300) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-xl-border-radius: var( + --spectrum-component-pill-edge-to-text-300 + ); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-300 + ); + --system-button-size-xl-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-padding-label-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-button-size-xl-top-to-text: var( + --spectrum-button-top-to-text-extra-large + ); + --system-button-size-xl-bottom-to-text: var( + --spectrum-button-bottom-to-text-extra-large + ); + --system-button-size-xl-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-button-size-xl-intended-icon-size: var( + --spectrum-workflow-icon-size-300 + ); } :host, :root { - --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-s-spacing-horizontal: var( - --spectrum-spacing-200 - ); - --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); - --system-button-group-size-l-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-xl-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-m-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var(--spectrum-spacing-200); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-l-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); } :host, :root { - --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --system-breadcrumbs-block-size-compact: var( - --spectrum-breadcrumbs-height-compact - ); - --system-breadcrumbs-block-size-multiline: var( - --spectrum-breadcrumbs-height-multiline - ); - --system-breadcrumbs-line-height: var(--spectrum-line-height-100); - --system-breadcrumbs-font-size: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --system-breadcrumbs-font-family-compact: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-compact-current: var( - --spectrum-font-size-100 - ); - --system-breadcrumbs-font-family-compact-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --system-breadcrumbs-font-family-multiline: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-multiline-current: var( - --spectrum-font-size-300 - ); - --system-breadcrumbs-font-family-multiline-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-text-decoration-thickness: var( - --spectrum-text-underline-thickness - ); - --system-breadcrumbs-text-decoration-gap: var( - --spectrum-text-underline-gap - ); - --system-breadcrumbs-separator-spacing-inline: var( - --spectrum-text-to-visual-100 - ); - --system-breadcrumbs-text-spacing-block-start: var( - --spectrum-breadcrumbs-top-to-text - ); - --system-breadcrumbs-text-spacing-block-end: var( - --spectrum-breadcrumbs-bottom-to-text - ); - --system-breadcrumbs-icon-spacing-block: var( - --spectrum-breadcrumbs-top-to-separator-icon - ); - --system-breadcrumbs-text-spacing-block-start-compact: var( - --spectrum-breadcrumbs-top-to-text-compact - ); - --system-breadcrumbs-text-spacing-block-end-compact: var( - --spectrum-breadcrumbs-bottom-to-text-compact - ); - --system-breadcrumbs-icon-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-separator-icon-compact - ); - --system-breadcrumbs-text-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-end-multiline: var( - --spectrum-breadcrumbs-bottom-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-top-text-to-bottom-text - ); - --system-breadcrumbs-icon-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-separator-icon-multiline - ); - --system-breadcrumbs-icon-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline - ); - --system-breadcrumbs-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-text - ); - --system-breadcrumbs-inline-end: var( - --spectrum-breadcrumbs-end-edge-to-text - ); - --system-breadcrumbs-action-button-spacing-inline: var( - --spectrum-breadcrumbs-truncated-menu-to-separator-icon - ); - --system-breadcrumbs-action-button-spacing-block: var( - --spectrum-breadcrumbs-top-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-multiline: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-truncated-menu-to-bottom-text - ); - --system-breadcrumbs-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-breadcrumbs-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-breadcrumbs-item-link-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-breadcrumbs-text-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-text-color-current: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-separator-color: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-action-button-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-action-button-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var( + --spectrum-breadcrumbs-height-compact + ); + --system-breadcrumbs-block-size-multiline: var( + --spectrum-breadcrumbs-height-multiline + ); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-multiline-current: var( + --spectrum-font-size-300 + ); + --system-breadcrumbs-font-family-multiline-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-text-decoration-thickness: var( + --spectrum-text-underline-thickness + ); + --system-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); + --system-breadcrumbs-separator-spacing-inline: var( + --spectrum-text-to-visual-100 + ); + --system-breadcrumbs-text-spacing-block-start: var( + --spectrum-breadcrumbs-top-to-text + ); + --system-breadcrumbs-text-spacing-block-end: var( + --spectrum-breadcrumbs-bottom-to-text + ); + --system-breadcrumbs-icon-spacing-block: var( + --spectrum-breadcrumbs-top-to-separator-icon + ); + --system-breadcrumbs-text-spacing-block-start-compact: var( + --spectrum-breadcrumbs-top-to-text-compact + ); + --system-breadcrumbs-text-spacing-block-end-compact: var( + --spectrum-breadcrumbs-bottom-to-text-compact + ); + --system-breadcrumbs-icon-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-separator-icon-compact + ); + --system-breadcrumbs-text-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-end-multiline: var( + --spectrum-breadcrumbs-bottom-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-top-text-to-bottom-text + ); + --system-breadcrumbs-icon-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-separator-icon-multiline + ); + --system-breadcrumbs-icon-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline + ); + --system-breadcrumbs-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-text + ); + --system-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + --system-breadcrumbs-action-button-spacing-inline: var( + --spectrum-breadcrumbs-truncated-menu-to-separator-icon + ); + --system-breadcrumbs-action-button-spacing-block: var( + --spectrum-breadcrumbs-top-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-multiline: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-truncated-menu-to-bottom-text + ); + --system-breadcrumbs-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-breadcrumbs-item-link-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-breadcrumbs-text-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-text-color-current: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-separator-color: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-action-button-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-action-button-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); } :host, :root { - --system-checkbox-control-color-default: var(--spectrum-gray-600); - --system-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-checkbox-control-color-down: var(--spectrum-gray-800); - --system-checkbox-control-color-focus: var(--spectrum-gray-700); - --system-checkbox-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-checkbox-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-checkbox-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-checkbox-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-checkbox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-control-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-checkmark-color: var(--spectrum-gray-50); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var( - --spectrum-accent-color-900 - ); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-checkbox-control-selected-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-checkbox-control-selected-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-checkbox-control-selected-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: 2px; - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-size-m-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var( - --spectrum-checkbox-control-size-small - ); - --system-checkbox-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-checkbox-size-s-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var( - --spectrum-checkbox-control-size-large - ); - --system-checkbox-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-checkbox-size-l-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var( - --spectrum-checkbox-control-size-extra-large - ); - --system-checkbox-size-xl-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-checkbox-size-xl-text-to-control: var( - --spectrum-text-to-control-300 - ); + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-checkbox-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-checkbox-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-checkbox-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-checkbox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-control-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-checkmark-color: var(--spectrum-gray-50); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-checkbox-control-selected-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-checkbox-control-selected-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-checkbox-control-selected-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: 2px; + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var(--spectrum-animation-duration-100); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-size-m-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var( + --spectrum-checkbox-control-size-small + ); + --system-checkbox-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-checkbox-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var( + --spectrum-checkbox-control-size-large + ); + --system-checkbox-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-checkbox-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var( + --spectrum-checkbox-control-size-extra-large + ); + --system-checkbox-size-xl-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-checkbox-size-xl-text-to-control: var( + --spectrum-text-to-control-300 + ); } :host, :root { - --system-card-background-color: var(--spectrum-background-layer-2-color); - --system-card-body-spacing: var(--spectrum-spacing-400); - --system-card-title-padding-top: var(--spectrum-spacing-300); - --system-card-title-padding-right: var(--spectrum-spacing-400); - --system-card-content-margin-top: var(--spectrum-spacing-100); - --system-card-content-margin-bottom: var(--spectrum-spacing-300); - --system-card-footer-padding-top: var(--spectrum-spacing-100); - --system-card-subtitle-padding-right: var(--spectrum-spacing-100); - --system-card-border-width: var(--spectrum-border-width-100); - --system-card-corner-radius: var(--spectrum-corner-radius-100); - --system-card-border-color: var(--spectrum-gray-100); - --system-card-border-color-hover: var(--spectrum-gray-200); - --system-card-border-color-selected: var(--spectrum-blue-700); - --system-card-divider-color: var(--spectrum-gray-200); - --system-card-title-font-family: var(--spectrum-sans-font-family-stack); - --system-card-title-font-size: var(--spectrum-heading-size-xxs); - --system-card-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-card-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-card-title-line-height: var(--spectrum-heading-line-height); - --system-card-title-font-color: var(--spectrum-heading-color); - --system-card-body-font-family: var(--spectrum-sans-font-family-stack); - --system-card-body-font-size: var(--spectrum-body-size-s); - --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --system-card-body-line-height: var(--spectrum-body-line-height); - --system-card-body-font-color: var(--spectrum-body-color); - --system-card-actions-spacing: var(--spectrum-spacing-300); - --system-card-actions-size: var(--spectrum-card-selection-background-size); - --system-card-actions-border-radius: var(--spectrum-corner-radius-100); - --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --system-card-actions-background-color-opacity: var( - --spectrum-card-selection-background-color-opacity - ); - --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-card-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-card-selected-background-opacity: 0.1; - --system-card-preview-border-width-selected: var( - --spectrum-border-width-100 - ); - --system-card-preview-background-color: var(--spectrum-gray-100); - --system-card-preview-background-color-hover: var(--spectrum-gray-200); - --system-card-horizontal-body-padding: var(--spectrum-spacing-300); - --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); - --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); - --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-background-color-quiet: var(--spectrum-background-base-color); + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-100); + --system-card-border-color-hover: var(--spectrum-gray-200); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-200); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var( + --spectrum-card-selection-background-color-opacity + ); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var(--spectrum-border-width-100); + --system-card-preview-background-color: var(--spectrum-gray-100); + --system-card-preview-background-color-hover: var(--spectrum-gray-200); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); + --system-card-background-color-quiet: var(--spectrum-background-base-color); } :host, :root { - --system-clear-button-background-color: transparent; - --system-clear-button-background-color-hover: transparent; - --system-clear-button-background-color-down: transparent; - --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-size-m-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-size-m-width: var(--spectrum-component-height-100); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: transparent; - --system-clear-button-quiet-background-color-hover: transparent; - --system-clear-button-quiet-background-color-down: transparent; - --system-clear-button-quiet-background-color-key-focus: transparent; - --system-clear-button-over-background-icon-color: var(--spectrum-white); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-white - ); - --system-clear-button-over-background-background-color: transparent; - --system-clear-button-over-background-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-transparent-white-400 - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-background-color: transparent; + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-size-m-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-size-m-width: var(--spectrum-component-height-100); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: transparent; + --system-clear-button-quiet-background-color-hover: transparent; + --system-clear-button-quiet-background-color-down: transparent; + --system-clear-button-quiet-background-color-key-focus: transparent; + --system-clear-button-over-background-icon-color: var(--spectrum-white); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-white); + --system-clear-button-over-background-icon-color-down: var(--spectrum-white); + --system-clear-button-over-background-icon-color-key-focus: var( + --spectrum-white + ); + --system-clear-button-over-background-background-color: transparent; + --system-clear-button-over-background-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-clear-button-over-background-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-clear-button-over-background-background-color-key-focus: var( + --spectrum-transparent-white-400 + ); + --system-clear-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-hover: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-down: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-background-color: transparent; } :host, :root { - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-100); - --system-close-button-background-color-down: var(--spectrum-gray-200); - --system-close-button-background-color-focus: var(--spectrum-gray-100); - --system-close-button-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-close-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-close-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-close-button-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-close-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-close-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-close-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-close-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-close-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-500 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-icon-color-default: var( - --spectrum-white - ); - --system-close-button-static-white-icon-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-close-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-500 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-icon-color-default: var( - --spectrum-black - ); - --system-close-button-static-black-icon-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-close-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-100); + --system-close-button-background-color-down: var(--spectrum-gray-200); + --system-close-button-background-color-focus: var(--spectrum-gray-100); + --system-close-button-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-close-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-close-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-close-button-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-close-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-close-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-close-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-close-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-close-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-500 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-icon-color-default: var(--spectrum-white); + --system-close-button-static-white-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-close-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-500 + ); + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-icon-color-default: var(--spectrum-black); + --system-close-button-static-black-icon-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-close-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); } :host, :root { - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-25); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); - --system-coach-indicator-quiet-animation-name: pulse-quiet; + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-min-block-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --system-coach-indicator-block-size: var( + --system-coach-indicator-min-block-size + ); + --system-coach-indicator-ring-inline-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-block-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-25); + --system-coach-indicator-top: calc( + var(--system-coach-indicator-block-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-left: calc( + var(--system-coach-indicator-inline-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-coach-animation-indicator-ring-duration: var( + --spectrum-animation-duration-6000 + ); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var( + --spectrum-coach-indicator-quiet-ring-diameter + ); + --system-coach-indicator-quiet-animation-name: pulse-quiet; } :host, :root { - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var( + --spectrum-coach-mark-media-minimum-height + ); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var( + --spectrum-heading-serif-font-style + ); + --system-coach-mark-title-text-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var( + --spectrum-heading-line-height + ); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var( + --spectrum-coach-mark-pagination-body-size + ); + --system-coach-mark-step-to-bottom: var( + --spectrum-coach-mark-pagination-text-to-bottom-edge + ); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-coach-mark-buttongroup-spacing-horizontal: var( + --spectrum-spacing-100 + ); } :host, :root { - --system-color-area-border-radius: var( - --spectrum-color-area-border-rounding - ); - --system-color-area-border-color-rgb: 0, 0, 0; - --system-color-area-border-color-opacity: 0.1; - --system-color-area-border-color: rgba( - var(--system-color-area-border-color-rgb), - var(--system-color-area-border-color-opacity) - ); - --system-color-area-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-color-area-border-width: var(--spectrum-color-area-border-width); - --system-color-area-height: var(--spectrum-color-area-height); - --system-color-area-width: var(--spectrum-color-area-width); - --system-color-area-min-width: var(--spectrum-color-area-minimum-width); - --system-color-area-min-height: var(--spectrum-color-area-minimum-height); + --system-color-area-border-radius: var(--spectrum-color-area-border-rounding); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba( + var(--system-color-area-border-color-rgb), + var(--system-color-area-border-color-opacity) + ); + --system-color-area-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); } :host, :root { - --system-color-handle-size: var(--spectrum-color-handle-size); - --system-color-handle-focused-size: var( - --spectrum-color-handle-size-key-focus - ); - --system-color-handle-hitarea-size: var( - --spectrum-color-control-track-width - ); - --system-color-handle-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-color-handle-animation-easing: ease-in-out; - --system-color-handle-outer-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-outer-border-opacity) - ); - --system-color-handle-outer-border-width: var( - --spectrum-color-handle-outer-border-width - ); - --system-color-handle-inner-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-inner-border-opacity) - ); - --system-color-handle-inner-border-width: var( - --spectrum-color-handle-inner-border-width - ); - --system-color-handle-border-width: var( - --spectrum-color-handle-border-width - ); - --system-color-handle-border-color: var(--spectrum-white); - --system-color-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-color-handle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var( + --spectrum-color-handle-size-key-focus + ); + --system-color-handle-hitarea-size: var(--spectrum-color-control-track-width); + --system-color-handle-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-outer-border-opacity) + ); + --system-color-handle-outer-border-width: var( + --spectrum-color-handle-outer-border-width + ); + --system-color-handle-inner-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-inner-border-opacity) + ); + --system-color-handle-inner-border-width: var( + --spectrum-color-handle-inner-border-width + ); + --system-color-handle-border-width: var(--spectrum-color-handle-border-width); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-color-handle-fill-color-disabled: var( + --spectrum-disabled-background-color + ); } :host, :root { - --system-color-loupe-width: var(--spectrum-color-loupe-width); - --system-color-loupe-height: var(--spectrum-color-loupe-height); - --system-color-loupe-offset: var( - --spectrum-color-loupe-bottom-to-color-handle - ); - --system-color-loupe-animation-distance: 8px; - --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-color-loupe-drop-shadow-y: var( - --spectrum-color-loupe-drop-shadow-y - ); - --system-color-loupe-drop-shadow-blur: var( - --spectrum-color-loupe-drop-shadow-blur - ); - --system-color-loupe-drop-shadow-color: var( - --spectrum-color-loupe-drop-shadow-color - ); - --system-color-loupe-outer-border-width: var( - --spectrum-color-loupe-outer-border-width - ); - --system-color-loupe-inner-border-width: var( - --spectrum-color-loupe-inner-border-width - ); - --system-color-loupe-outer-border-color: var( - --spectrum-color-loupe-outer-border - ); - --system-color-loupe-inner-border-color: var( - --spectrum-color-loupe-inner-border - ); - --system-color-loupe-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-loupe-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var( + --spectrum-color-loupe-bottom-to-color-handle + ); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); + --system-color-loupe-drop-shadow-blur: var( + --spectrum-color-loupe-drop-shadow-blur + ); + --system-color-loupe-drop-shadow-color: var( + --spectrum-color-loupe-drop-shadow-color + ); + --system-color-loupe-outer-border-width: var( + --spectrum-color-loupe-outer-border-width + ); + --system-color-loupe-inner-border-width: var( + --spectrum-color-loupe-inner-border-width + ); + --system-color-loupe-outer-border-color: var( + --spectrum-color-loupe-outer-border + ); + --system-color-loupe-inner-border-color: var( + --spectrum-color-loupe-inner-border + ); + --system-color-loupe-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-loupe-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); } :host, :root { - --system-color-slider-handle-margin-block: var( - --spectrum-component-top-to-text-75 - ); - --system-color-slider-border-color-rgba: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-color-slider-border-opacity) - ); - --system-color-slider-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-color-slider-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-slider-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); + --system-color-slider-handle-margin-block: var( + --spectrum-component-top-to-text-75 + ); + --system-color-slider-border-color-rgba: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-color-slider-border-opacity) + ); + --system-color-slider-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-color-slider-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-slider-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); } :host, :root { - --system-color-wheel-width: var(--spectrum-color-wheel-width); - --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); - --system-color-wheel-height: var(--spectrum-color-wheel-width); - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); - --system-color-wheel-border-width: var(--spectrum-border-width-100); - --system-color-wheel-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-wheel-track-width: var(--spectrum-color-control-track-width); - --system-color-wheel-colorarea-margin: var( - --spectrum-color-wheel-color-area-margin - ); - --system-color-wheel-colorhandle-position: calc( - var(--system-color-wheel-width) / 2 - - var(--system-color-wheel-track-width) / 2 - ); + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var( + --spectrum-color-wheel-color-area-margin + ); + --system-color-wheel-colorhandle-position: calc( + var(--system-color-wheel-width) / 2 - + var(--system-color-wheel-track-width) / 2 + ); } :host, :root { - --system-combobox-border-color-default: var(--spectrum-gray-500); - --system-combobox-border-color-hover: var(--spectrum-gray-600); - --system-combobox-border-color-focus: var(--spectrum-gray-500); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --system-combobox-border-color-key-focus: var(--spectrum-gray-600); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large - ); + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var( + --spectrum-combo-box-minimum-width-multiplier + ); + --system-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var(--spectrum-field-label-to-component); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-size-m-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-size-m-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-size-m-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-size-m-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-size-m-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-combobox-size-s-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-combobox-size-s-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --system-combobox-size-s-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-combobox-size-s-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-combobox-size-l-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-combobox-size-l-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --system-combobox-size-l-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-combobox-size-l-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-combobox-size-xl-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-quiet-minimum-width-multiplier: var( + --spectrum-combo-box-quiet-minimum-width-multiplier + ); + --system-combobox-quiet-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --system-combobox-quiet-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-m-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-s-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-combobox-quiet-size-l-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-combobox-quiet-size-xl-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-extra-large + ); } :host, :root { - --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); - --system-contextual-help-link-spacing: var(--spectrum-spacing-300); - --system-contextual-help-heading-size: var( - --spectrum-contextual-help-title-size - ); - --system-contextual-help-heading-color: var(--spectrum-heading-color); - --system-contextual-help-body-color: var(--spectrum-body-color); + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-content-spacing: var(--spectrum-spacing-100); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var( + --spectrum-contextual-help-title-size + ); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); } :host, :root { - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 + ); + --system-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 + ); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-confirm-title-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc( + var(--spectrum-spacing-50) * -1 + ); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-close-button-size: var( + --spectrum-component-height-100 + ); + --system-dialog-confirm-close-button-padding: calc( + 26px - var(--spectrum-component-bottom-to-text-300) + ); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); } :host, :root { - --system-divider-background-color-small: var(--spectrum-gray-200); - --system-divider-background-color-medium: var(--spectrum-gray-200); - --system-divider-background-color-large: var(--spectrum-gray-800); - --system-divider-background-color-small-static-white: var( - --spectrum-transparent-white-400 - ); - --system-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-400 - ); - --system-divider-background-color-large-static-white: var( - --spectrum-transparent-white-900 - ); - --system-divider-background-color-small-static-black: var( - --spectrum-transparent-black-400 - ); - --system-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-400 - ); - --system-divider-background-color-large-static-black: var( - --spectrum-transparent-black-900 - ); + --system-divider-background-color-small: var(--spectrum-gray-200); + --system-divider-background-color-medium: var(--spectrum-gray-200); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-400 + ); + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-400 + ); + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-900 + ); + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-400 + ); + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-400 + ); + --system-divider-background-color-large-static-black: var( + --spectrum-transparent-black-900 + ); } :host, :root { - --system-drop-zone-padding: var(--spectrum-spacing-400); - --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); - --system-drop-zone-border-width: var(--spectrum-border-width-200); - --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --system-drop-zone-border-color: var(--spectrum-gray-200); - --system-drop-zone-heading-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-drop-zone-heading-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --system-drop-zone-heading-color: var(--spectrum-heading-color); - --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --system-drop-zone-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-drop-zone-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --system-drop-zone-body-line-height: var(--spectrum-body-line-height); - --system-drop-zone-body-color: var(--spectrum-body-color); - --system-drop-zone-background-color: var( - --spectrum-drop-zone-background-color-rgb - ); - --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --system-drop-zone-illustration-color-hover: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-height: var(--spectrum-component-height-300); - --system-drop-zone-content-max-width: var( - --spectrum-drop-zone-content-maximum-width - ); - --system-drop-zone-content-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-drop-zone-content-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-drop-zone-content-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-drop-zone-content-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --system-drop-zone-content-font-style: var(--spectrum-default-font-style); - --system-drop-zone-content-font-size: var(--spectrum-font-size-300); - --system-drop-zone-content-line-height: var(--spectrum-line-height-100); - --system-drop-zone-content-background-color: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-color: var(--spectrum-white); - --system-drop-zone-heading-font-size-cjk: var( - --spectrum-drop-zone-cjk-title-size - ); + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-200); + --system-drop-zone-heading-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-drop-zone-heading-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-drop-zone-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var( + --spectrum-drop-zone-background-color-rgb + ); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var( + --spectrum-drop-zone-content-maximum-width + ); + --system-drop-zone-content-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-drop-zone-content-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-drop-zone-content-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-drop-zone-content-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var( + --spectrum-drop-zone-cjk-title-size + ); } :host, :root { - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: '\002c'; + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: "\002c"; } :host, :root { - --system-field-label-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-field-label-font-weight: var(--spectrum-regular-font-weight); - --system-field-label-line-height: var(--spectrum-line-height-100); - --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-field-label-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-field-label-min-height: var(--spectrum-component-height-75); - --system-field-label-size-m-min-height: var(--spectrum-component-height-75); - --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-field-label-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-font-size: var(--spectrum-font-size-75); - --system-field-label-size-m-font-size: var(--spectrum-font-size-75); - --system-field-label-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-size-m-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-m-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-s-min-height: var(--spectrum-component-height-75); - --system-field-label-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-s-font-size: var(--spectrum-font-size-75); - --system-field-label-size-s-side-margin-block-start: var( - --spectrum-field-label-top-margin-small - ); - --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); - --system-field-label-size-s-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-small - ); - --system-field-label-size-l-min-height: var( - --spectrum-component-height-100 - ); - --system-field-label-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-field-label-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-field-label-size-l-font-size: var(--spectrum-font-size-100); - --system-field-label-size-l-side-margin-block-start: var( - --spectrum-field-label-top-margin-large - ); - --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-l-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-large - ); - --system-field-label-size-xl-min-height: var( - --spectrum-component-height-200 - ); - --system-field-label-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-field-label-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); - --system-field-label-size-xl-side-margin-block-start: var( - --spectrum-field-label-top-margin-extra-large - ); - --system-field-label-size-xl-side-padding-right: var( - --spectrum-spacing-200 - ); - --system-field-label-size-xl-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-extra-large - ); + --system-field-label-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-size-m-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-m-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var( + --spectrum-field-label-top-margin-small + ); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-small + ); + --system-field-label-size-l-min-height: var(--spectrum-component-height-100); + --system-field-label-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-field-label-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var( + --spectrum-field-label-top-margin-large + ); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-large + ); + --system-field-label-size-xl-min-height: var(--spectrum-component-height-200); + --system-field-label-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-field-label-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var( + --spectrum-field-label-top-margin-extra-large + ); + --system-field-label-size-xl-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-xl-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-extra-large + ); } :host, :root { - --system-help-text-line-height: var(--spectrum-line-height-100); - --system-help-text-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-help-text-neutral-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-neutral-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-negative-icon-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-disabled-content-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-disabled-icon-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-lang-ja-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-zh-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-ko-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-min-height: var(--spectrum-component-height-75); - --system-help-text-size-m-min-height: var(--spectrum-component-height-75); - --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-font-size: var(--spectrum-font-size-75); - --system-help-text-size-m-font-size: var(--spectrum-font-size-75); - --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-size-m-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75); - --system-help-text-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-s-min-height: var(--spectrum-component-height-75); - --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-help-text-size-s-font-size: var(--spectrum-font-size-75); - --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-s-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-small - ); - --system-help-text-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-l-min-height: var(--spectrum-component-height-100); - --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-help-text-size-l-font-size: var(--spectrum-font-size-100); - --system-help-text-size-l-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-help-text-size-l-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-large - ); - --system-help-text-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-help-text-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); - --system-help-text-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); - --system-help-text-size-xl-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-help-text-size-xl-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-extra-large - ); - --system-help-text-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-help-text-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-help-text-neutral-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-neutral-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-negative-icon-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-disabled-content-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-disabled-icon-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-lang-ja-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-zh-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-ko-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-size-m-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75); + --system-help-text-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-small + ); + --system-help-text-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var(--spectrum-text-to-visual-100); + --system-help-text-size-l-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-large + ); + --system-help-text-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-help-text-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var(--spectrum-text-to-visual-200); + --system-help-text-size-xl-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-extra-large + ); + --system-help-text-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-help-text-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); } :host, :root { - --system-illustrated-message-description-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-heading-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --system-illustrated-message-heading-to-description: var( - --spectrum-spacing-75 - ); - --system-illustrated-message-illustration-color: var( - --spectrum-neutral-visual-color - ); - --system-illustrated-message-illustration-accent-color: var( - --spectrum-accent-visual-color - ); - --system-illustrated-message-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-illustrated-message-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-title-size - ); - --system-illustrated-message-title-line-height: var( - --spectrum-heading-line-height - ); - --system-illustrated-message-title-color: var(--spectrum-heading-color); - --system-illustrated-message-description-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-description-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-illustrated-message-description-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-illustrated-message-description-font-size: var( - --spectrum-illustrated-message-body-size - ); - --system-illustrated-message-description-line-height: var( - --spectrum-body-line-height - ); - --system-illustrated-message-description-color: var(--spectrum-body-color); - --system-illustrated-message-lang-ja-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-zh-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-ko-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); + --system-illustrated-message-description-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-heading-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var( + --spectrum-spacing-75 + ); + --system-illustrated-message-illustration-color: var( + --spectrum-neutral-visual-color + ); + --system-illustrated-message-illustration-accent-color: var( + --spectrum-accent-visual-color + ); + --system-illustrated-message-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-illustrated-message-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-title-size + ); + --system-illustrated-message-title-line-height: var( + --spectrum-heading-line-height + ); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-description-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-illustrated-message-description-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-illustrated-message-description-font-size: var( + --spectrum-illustrated-message-body-size + ); + --system-illustrated-message-description-line-height: var( + --spectrum-body-line-height + ); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-zh-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-ko-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); } :host, :root { - --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); - --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); - --system-icon-size-s: var(--spectrum-workflow-icon-size-75); - --system-icon-size-m: var(--spectrum-workflow-icon-size-100); - --system-icon-size-l: var(--spectrum-workflow-icon-size-200); - --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); - --system-ui-icon-chevron-right-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-down-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-right-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-down-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-right-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-right-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-right-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-right-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-right-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-down-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-down-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-down-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-down-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-down-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-left-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-left-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-left-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-left-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-left-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-left-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-left-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-up-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-up-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-up-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-up-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-up-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-up-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-up-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-arrow-right-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-right-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-right-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-right-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-right-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-right-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-right-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-down-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-down-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-down-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-down-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-down-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-down-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-down-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-left-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-left-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-left-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-left-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-left-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-left-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-left-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); - --system-ui-icon-arrow-up-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-up-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-up-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-up-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-up-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-up-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-checkmark-50-icon-size: var( - --spectrum-checkmark-icon-size-50 - ); - --system-ui-icon-checkmark-75-icon-size: var( - --spectrum-checkmark-icon-size-75 - ); - --system-ui-icon-checkmark-100-icon-size: var( - --spectrum-checkmark-icon-size-100 - ); - --system-ui-icon-checkmark-200-icon-size: var( - --spectrum-checkmark-icon-size-200 - ); - --system-ui-icon-checkmark-300-icon-size: var( - --spectrum-checkmark-icon-size-300 - ); - --system-ui-icon-checkmark-400-icon-size: var( - --spectrum-checkmark-icon-size-400 - ); - --system-ui-icon-checkmark-500-icon-size: var( - --spectrum-checkmark-icon-size-500 - ); - --system-ui-icon-checkmark-600-icon-size: var( - --spectrum-checkmark-icon-size-600 - ); - --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); - --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); - --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); - --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); - --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); - --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); - --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); - --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); - --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); - --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); - --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); - --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); - --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); - --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); - --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); - --system-ui-icon-corner-triangle-75-icon-size: var( - --spectrum-corner-triangle-icon-size-75 - ); - --system-ui-icon-corner-triangle-100-icon-size: var( - --spectrum-corner-triangle-icon-size-100 - ); - --system-ui-icon-corner-triangle-200-icon-size: var( - --spectrum-corner-triangle-icon-size-200 - ); - --system-ui-icon-corner-triangle-300-icon-size: var( - --spectrum-corner-triangle-icon-size-300 - ); - --system-ui-icon-asterisk-75-icon-size: var( - --spectrum-asterisk-icon-size-75 - ); - --system-ui-icon-asterisk-100-icon-size: var( - --spectrum-asterisk-icon-size-100 - ); - --system-ui-icon-asterisk-200-icon-size: var( - --spectrum-asterisk-icon-size-200 - ); - --system-ui-icon-asterisk-300-icon-size: var( - --spectrum-asterisk-icon-size-300 - ); + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-down-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-right-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-down-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-right-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-right-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-right-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-right-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-right-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-down-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-down-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-down-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-down-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-down-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-left-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-left-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-left-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-left-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-left-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-left-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-left-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-up-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-up-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-up-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-up-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-up-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-up-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-up-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-arrow-right-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-right-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-right-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-right-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-right-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-right-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-right-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-down-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-down-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-down-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-down-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-down-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-down-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-down-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-left-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-left-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-left-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-left-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-left-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-left-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-left-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-up-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-up-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-up-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-up-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-up-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-checkmark-50-icon-size: var( + --spectrum-checkmark-icon-size-50 + ); + --system-ui-icon-checkmark-75-icon-size: var( + --spectrum-checkmark-icon-size-75 + ); + --system-ui-icon-checkmark-100-icon-size: var( + --spectrum-checkmark-icon-size-100 + ); + --system-ui-icon-checkmark-200-icon-size: var( + --spectrum-checkmark-icon-size-200 + ); + --system-ui-icon-checkmark-300-icon-size: var( + --spectrum-checkmark-icon-size-300 + ); + --system-ui-icon-checkmark-400-icon-size: var( + --spectrum-checkmark-icon-size-400 + ); + --system-ui-icon-checkmark-500-icon-size: var( + --spectrum-checkmark-icon-size-500 + ); + --system-ui-icon-checkmark-600-icon-size: var( + --spectrum-checkmark-icon-size-600 + ); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var( + --spectrum-corner-triangle-icon-size-75 + ); + --system-ui-icon-corner-triangle-100-icon-size: var( + --spectrum-corner-triangle-icon-size-100 + ); + --system-ui-icon-corner-triangle-200-icon-size: var( + --spectrum-corner-triangle-icon-size-200 + ); + --system-ui-icon-corner-triangle-300-icon-size: var( + --spectrum-corner-triangle-icon-size-300 + ); + --system-ui-icon-asterisk-75-icon-size: var(--spectrum-asterisk-icon-size-75); + --system-ui-icon-asterisk-100-icon-size: var( + --spectrum-asterisk-icon-size-100 + ); + --system-ui-icon-asterisk-200-icon-size: var( + --spectrum-asterisk-icon-size-200 + ); + --system-ui-icon-asterisk-300-icon-size: var( + --spectrum-asterisk-icon-size-300 + ); } :host, :root { - --system-infield-button-border-width: var(--spectrum-border-width-100); - --system-infield-button-border-color: inherit; - --system-infield-button-border-radius: var(--spectrum-corner-radius-100); - --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-background-color: var(--spectrum-gray-50); - --system-infield-button-background-color-hover: var(--spectrum-gray-100); - --system-infield-button-background-color-down: var(--spectrum-gray-200); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-100 - ); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-infield-button-edge-to-fill: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-infield-button-inner-edge-to-fill: var( - --spectrum-in-field-button-stacked-inner-edge-to-fill - ); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-hover: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-down: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-border-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-key-focus: var( - --spectrum-disabled-content-color - ); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-xl-height: var( - --spectrum-component-height-300 - ); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-top-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-bottom-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-top-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-bottom-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-top-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-bottom-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-top-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-bottom-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-quiet-background-color: transparent; - --system-infield-button-quiet-background-color-hover: transparent; - --system-infield-button-quiet-background-color-down: transparent; - --system-infield-button-quiet-background-color-key-focus: transparent; - --system-infield-button-quiet-infield-border-color: transparent; - --system-infield-button-quiet-border-width: 0; - --system-infield-button-quiet-disabled-background-color: transparent; - --system-infield-button-quiet-disabled-border-color: transparent; + --system-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-background-color: var(--spectrum-gray-50); + --system-infield-button-background-color-hover: var(--spectrum-gray-100); + --system-infield-button-background-color-down: var(--spectrum-gray-200); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-100); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-infield-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-infield-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-infield-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-hover: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-down: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-border-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-hover: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-down: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-key-focus: var( + --spectrum-disabled-content-color + ); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-xl-height: var(--spectrum-component-height-300); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-top-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-bottom-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-top-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-bottom-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-top-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-bottom-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-top-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-bottom-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; } :host, :root { - --system-link-animation-duration: var(--spectrum-animation-duration-100); - --system-link-text-color-primary-default: var( - --spectrum-accent-content-color-default - ); - --system-link-text-color-primary-hover: var( - --spectrum-accent-content-color-hover - ); - --system-link-text-color-primary-active: var( - --spectrum-accent-content-color-down - ); - --system-link-text-color-primary-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-link-text-color-secondary-default: var( - --spectrum-neutral-content-color-default - ); - --system-link-text-color-secondary-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-link-text-color-secondary-active: var( - --spectrum-neutral-content-color-down - ); - --system-link-text-color-secondary-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-link-text-color-white: var(--spectrum-white); - --system-link-text-color-black: var(--spectrum-black); + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var( + --spectrum-accent-content-color-default + ); + --system-link-text-color-primary-hover: var( + --spectrum-accent-content-color-hover + ); + --system-link-text-color-primary-active: var( + --spectrum-accent-content-color-down + ); + --system-link-text-color-primary-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-link-text-color-secondary-default: var( + --spectrum-neutral-content-color-default + ); + --system-link-text-color-secondary-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-link-text-color-secondary-active: var( + --spectrum-neutral-content-color-down + ); + --system-link-text-color-secondary-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); } :host, :root { - --system-menu-item-top-to-action: var(--spectrum-spacing-50); - --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - --system-menu-item-label-line-height: var(--spectrum-line-height-100); - --system-menu-item-label-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-label-to-description-spacing: var( - --spectrum-menu-item-label-to-description - ); - --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --system-menu-item-label-to-value-area-min-spacing: var( - --spectrum-spacing-100 - ); - --system-menu-item-label-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-label-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-description-line-height: var(--spectrum-line-height-100); - --system-menu-item-description-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-description-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-description-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-description-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-description-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-description-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-section-header-line-height: var(--spectrum-line-height-100); - --system-menu-section-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-menu-section-header-color: var(--spectrum-gray-900); - --system-menu-collapsible-icon-color: var(--spectrum-gray-900); - --system-menu-checkmark-icon-color-default: var( - --spectrum-accent-color-900 - ); - --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - --system-menu-drillin-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-drillin-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-drillin-icon-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-drillin-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-value-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-value-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-value-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-value-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-checkmark-display-hidden: none; - --system-menu-checkmark-display-shown: block; - --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( - var(--system-menu-item-label-inline-edge-to-content) + - var(--system-menu-item-checkmark-width) + - var(--system-menu-item-label-text-to-visual) + - var(--system-menu-item-focus-indicator-width) - ); - --system-menu-item-background-color-default: transparent; - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-1000-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-height: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-width: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-size-m-item-label-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-size-m-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-size-m-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-size-m-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-size-m-item-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-size-m-item-description-font-size: var( - --spectrum-font-size-75 - ); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-section-header-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-size-m-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-size-m-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-size-m-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-size-m-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-m-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); - --system-menu-size-s-item-icon-height: var( - --spectrum-workflow-icon-size-75 - ); - --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); - --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-item-label-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-menu-size-s-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-75 - ); - --system-menu-size-s-item-top-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-menu-size-s-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-menu-size-s-item-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-menu-size-s-item-description-font-size: var( - --spectrum-font-size-50 - ); - --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-section-header-min-width: var( - --spectrum-component-height-75 - ); - --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-small - ); - --system-menu-size-s-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-small - ); - --system-menu-size-s-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-small - ); - --system-menu-size-s-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-small - ); - --system-menu-size-s-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-small - ); - --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); - --system-menu-size-l-item-icon-height: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-icon-width: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); - --system-menu-size-l-item-label-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-menu-size-l-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-200 - ); - --system-menu-size-l-item-top-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-menu-size-l-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-menu-size-l-item-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-menu-size-l-item-description-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-size-l-section-header-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-l-section-header-min-width: var( - --spectrum-component-height-200 - ); - --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-large - ); - --system-menu-size-l-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-large - ); - --system-menu-size-l-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-large - ); - --system-menu-size-l-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-large - ); - --system-menu-size-l-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-large - ); - --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); - --system-menu-size-xl-item-icon-height: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-icon-width: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); - --system-menu-size-xl-item-label-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-menu-size-xl-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-300 - ); - --system-menu-size-xl-item-top-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-menu-size-xl-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-menu-size-xl-item-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-menu-size-xl-item-description-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-xl-section-header-font-size: var( - --spectrum-font-size-300 - ); - --system-menu-size-xl-section-header-min-width: var( - --spectrum-component-height-300 - ); - --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large - ); - --system-menu-size-xl-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-extra-large - ); - --system-menu-size-xl-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-extra-large - ); - --system-menu-size-xl-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-extra-large - ); - --system-menu-size-xl-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-extra-large - ); + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-item-label-to-description-spacing: var( + --spectrum-menu-item-label-to-description + ); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var( + --spectrum-spacing-100 + ); + --system-menu-item-label-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-label-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-description-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-description-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-description-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-description-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-description-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-drillin-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-drillin-icon-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-drillin-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-value-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-value-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-value-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-value-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-background-color-default: transparent; + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-1000-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-size-m-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-size-m-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-size-m-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-size-m-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-size-m-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-size-m-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-size-m-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-m-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-menu-size-s-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-75 + ); + --system-menu-size-s-item-top-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-menu-size-s-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-menu-size-s-item-text-to-control: var(--spectrum-text-to-control-75); + --system-menu-size-s-item-description-font-size: var(--spectrum-font-size-50); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var( + --spectrum-component-height-75 + ); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-small + ); + --system-menu-size-s-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-small + ); + --system-menu-size-s-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-small + ); + --system-menu-size-s-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-small + ); + --system-menu-size-s-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-icon-width: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-menu-size-l-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-200 + ); + --system-menu-size-l-item-top-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-menu-size-l-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-menu-size-l-item-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-menu-size-l-item-description-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-size-l-section-header-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-section-header-min-width: var( + --spectrum-component-height-200 + ); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-large + ); + --system-menu-size-l-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-large + ); + --system-menu-size-l-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-large + ); + --system-menu-size-l-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-large + ); + --system-menu-size-l-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-icon-width: var(--spectrum-workflow-icon-size-300); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-menu-size-xl-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-300 + ); + --system-menu-size-xl-item-top-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-menu-size-xl-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-menu-size-xl-item-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-menu-size-xl-item-description-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-xl-section-header-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-section-header-min-width: var( + --spectrum-component-height-300 + ); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large + ); + --system-menu-size-xl-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-extra-large + ); + --system-menu-size-xl-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-extra-large + ); + --system-menu-size-xl-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-extra-large + ); + --system-menu-size-xl-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); } :host, :root { - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-min-width: var(--spectrum-meter-minimum-width); + --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); + --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); + --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); + --system-meter-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); + --system-meter-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-font-size: var(--spectrum-font-size-100); + --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); + --system-meter-size-s-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); } :host, :root { - --system-modal-confirm-exit-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-modal-confirm-entry-animation-distance: var( - --spectrum-dialog-confirm-entry-animation-distance - ); - --system-modal-fullscreen-margin: 32px; - --system-modal-max-height: 90vh; - --system-modal-max-width: 90%; - --system-modal-background-color: var(--spectrum-background-layer-2-color); - --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --system-modal-confirm-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-modal-confirm-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-modal-confirm-entry-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-modal-transition-animation-duration: var( - --spectrum-animation-duration-100 - ); + --system-modal-confirm-exit-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-modal-confirm-entry-animation-distance: var( + --spectrum-dialog-confirm-entry-animation-distance + ); + --system-modal-fullscreen-margin: 32px; + --system-modal-max-height: 90vh; + --system-modal-max-width: 90%; + --system-modal-background-color: var(--spectrum-background-layer-2-color); + --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --system-modal-confirm-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-modal-confirm-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-modal-confirm-entry-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-modal-transition-animation-duration: var( + --spectrum-animation-duration-100 + ); } :host, :root { - --system-picker-background-color-default: var(--spectrum-gray-50); - --system-picker-background-color-default-open: var(--spectrum-gray-100); - --system-picker-background-color-active: var(--spectrum-gray-200); - --system-picker-background-color-hover: var(--spectrum-gray-100); - --system-picker-background-color-hover-open: var(--spectrum-gray-100); - --system-picker-background-color-key-focus: var(--spectrum-gray-100); - --system-picker-border-color-default: var(--spectrum-gray-500); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-picker-border-width: var(--spectrum-border-width-100); - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); + --system-picker-background-color-default: var(--spectrum-gray-50); + --system-picker-background-color-default-open: var(--spectrum-gray-100); + --system-picker-background-color-active: var(--spectrum-gray-200); + --system-picker-background-color-hover: var(--spectrum-gray-100); + --system-picker-background-color-hover-open: var(--spectrum-gray-100); + --system-picker-background-color-key-focus: var(--spectrum-gray-100); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --system-picker-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-font-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-icon-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --system-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --system-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --system-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --system-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --system-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-medium + ); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-picker-size-s-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-picker-size-s-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-picker-size-s-spacing-text-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-picker-size-s-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --system-picker-size-s-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-picker-size-s-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-picker-size-s-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-picker-size-s-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-small + ); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-picker-size-l-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-picker-size-l-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-picker-size-l-spacing-text-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-picker-size-l-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --system-picker-size-l-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-picker-size-l-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-picker-size-l-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-picker-size-l-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-large + ); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-picker-size-xl-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-picker-size-xl-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-picker-size-xl-spacing-text-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --system-picker-size-xl-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-picker-size-xl-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-extra-large + ); } :host, :root { - --system-picker-button-background-color: var(--spectrum-gray-50); - --system-picker-button-background-color-hover: var(--spectrum-gray-100); - --system-picker-button-background-color-down: var(--spectrum-gray-200); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-100); - --system-picker-button-border-color: inherit; - --system-picker-button-border-radius: var(--spectrum-corner-radius-100); - --system-picker-button-border-radius-rounded-sided: 0; - --system-picker-button-border-radius-sided: 0; - --system-picker-button-border-width: var(--spectrum-border-width-100); - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-100 - ); - --system-picker-button-border-radius-rounded: var( - --spectrum-corner-radius-500 - ); - --system-picker-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-font-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-hover-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-down-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-font-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-75 - ); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var( - --spectrum-text-to-visual-200 - ); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-200 - ); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var( - --spectrum-text-to-visual-300 - ); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-300 - ); + --system-picker-button-background-color: var(--spectrum-gray-50); + --system-picker-button-background-color-hover: var(--spectrum-gray-100); + --system-picker-button-background-color-down: var(--spectrum-gray-200); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-100); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 + ); + --system-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-500 + ); + --system-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-hover-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-down-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-font-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 + ); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var( + --spectrum-text-to-visual-200 + ); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 + ); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var( + --spectrum-text-to-visual-300 + ); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 + ); } :host, :root { - --system-popover-border-width: var(--spectrum-border-width-100); - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var( - --spectrum-popover-top-to-content-area - ); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc( - var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / - 2 - ); - --system-popover-pointer-edge-spacing: calc( - var(--system-popover-pointer-edge-offset) - - var(--spectrum-popover-tip-width) / 2 - ); + --system-popover-border-width: var(--spectrum-border-width-100); + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var( + --spectrum-popover-top-to-content-area + ); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc( + var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2 + ); + --system-popover-pointer-edge-spacing: calc( + var(--system-popover-pointer-edge-offset) - + var(--spectrum-popover-tip-width) / 2 + ); } :host, :root { - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-progress-bar-track-color: var(--spectrum-gray-200); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-400 - ); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); + --system-progress-bar-animation-ease-in-out-indeterminate: var( + --spectrum-animation-ease-in-out + ); + --system-progress-bar-animation-duration-indeterminate: var( + --spectrum-animation-duration-2000 + ); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); + --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); + --system-progress-bar-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-progress-bar-track-color: var(--spectrum-gray-200); + --system-progress-bar-fill-color: var(--spectrum-accent-color-900); + --system-progress-bar-label-and-value-white: var(--spectrum-white); + --system-progress-bar-track-color-white: var( + --spectrum-transparent-white-400 + ); + --system-progress-bar-fill-color-white: var(--spectrum-white); + --system-progress-bar-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-m-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-m-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-m-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-s-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-s-thickness: var( + --spectrum-progress-bar-thickness-small + ); + --system-progress-bar-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-l-size-default: var( + --system-progress-bar-size-2500 + ); + --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); + --system-progress-bar-size-l-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-progress-bar-size-xl-size-default: var( + --system-progress-bar-size-2800 + ); + --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); + --system-progress-bar-size-xl-thickness: var( + --spectrum-progress-bar-thickness-extra-large + ); + --system-progress-bar-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); } :host, :root { - --system-progress-circle-track-border-color: var(--spectrum-gray-200); - --system-progress-circle-fill-border-color: var( - --spectrum-accent-content-color-default - ); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-400 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-1000 - ); - --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --system-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-track-border-style: solid; - --system-progress-circle-small-size: var( - --spectrum-progress-circle-size-small - ); - --system-progress-circle-small-thickness: var( - --spectrum-progress-circle-thickness-small - ); - --system-progress-circle-medium-size: var( - --spectrum-progress-circle-size-medium - ); - --system-progress-circle-medium-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-large-size: var( - --spectrum-progress-circle-size-large - ); - --system-progress-circle-large-thickness: var( - --spectrum-progress-circle-thickness-large - ); + --system-progress-circle-track-border-color: var(--spectrum-gray-200); + --system-progress-circle-fill-border-color: var( + --spectrum-accent-content-color-default + ); + --system-progress-circle-track-border-color-over-background: var( + --spectrum-transparent-white-400 + ); + --system-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-1000 + ); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var( + --spectrum-progress-circle-size-small + ); + --system-progress-circle-small-thickness: var( + --spectrum-progress-circle-thickness-small + ); + --system-progress-circle-medium-size: var( + --spectrum-progress-circle-size-medium + ); + --system-progress-circle-medium-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-large-size: var( + --spectrum-progress-circle-size-large + ); + --system-progress-circle-large-thickness: var( + --spectrum-progress-circle-thickness-large + ); } :host, :root { - --system-radio-button-border-color-default: var(--spectrum-gray-600); - --system-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-radio-button-border-color-down: var(--spectrum-gray-800); - --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-focus + ); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-size-m-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-size-m-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-size-m-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var( + --spectrum-radio-button-control-size-small + ); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-radio-size-s-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-radio-size-s-button-top-to-control: var( + --spectrum-radio-button-top-to-control-small + ); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var( + --spectrum-radio-button-control-size-large + ); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-radio-size-l-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-radio-size-l-button-top-to-control: var( + --spectrum-radio-button-top-to-control-large + ); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var( + --spectrum-radio-button-control-size-extra-large + ); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-radio-size-xl-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-radio-size-xl-button-top-to-control: var( + --spectrum-radio-button-top-to-control-extra-large + ); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-radio-emphasized-button-checked-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-button-checked-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-button-checked-border-color-focus: var( + --spectrum-accent-color-1000 + ); } :host, :root { - --system-search-border-color-default: var(--spectrum-gray-500); - --system-search-border-color-hover: var(--spectrum-gray-600); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-25); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 - ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-edge-to-visual-200 - ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 - ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var( + --spectrum-search-field-minimum-width-multiplier + ); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var(--spectrum-neutral-content-color-default); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-25); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-size-m-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var( + --spectrum-field-edge-to-visual-quiet + ); } :host, :root { - --system-side-nav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-side-nav-min-height: var(--spectrum-component-height-100); - --system-side-nav-width: 100%; - --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); - --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); - --system-side-nav-border-radius: var(--spectrum-corner-radius-100); - --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); - --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); - --system-side-nav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); - --system-side-nav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); - --system-side-nav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --system-side-nav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --system-side-nav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --system-side-nav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --system-side-nav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --system-side-nav-background-disabled: transparent; - --system-side-nav-background-default: transparent; - --system-side-nav-background-hover: var(--spectrum-gray-100); - --system-side-nav-item-background-down: var(--spectrum-gray-200); - --system-side-nav-background-key-focus: var(--spectrum-gray-100); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-100 - ); - --system-side-nav-background-hover-selected: var(--spectrum-gray-200); - --system-side-nav-item-background-down-selected: var(--spectrum-gray-200); - --system-side-nav-background-key-focus-selected: var(--spectrum-gray-100); - --system-side-nav-header-color: var(--spectrum-gray-600); - --system-side-nav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-side-nav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); - --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); - --system-side-nav-text-font-style: var(--spectrum-default-font-style); - --system-side-nav-text-font-size: var(--spectrum-font-size-100); - --system-side-nav-text-line-height: var(--spectrum-line-height-100); - --system-side-nav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); - --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); - --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); - --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); - --system-side-nav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); - --system-side-nav-header-font-style: var(--spectrum-default-font-style); - --system-side-nav-header-font-size: var(--spectrum-font-size-75); - --system-side-nav-header-line-height: var(--spectrum-line-height-100); - --system-side-nav-lang-ja-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-header-line-height: var( - --spectrum-cjk-line-height-100 - ); + --system-side-nav-focus-ring-size: var(--spectrum-focus-indicator-thickness); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var(--spectrum-component-edge-to-text-100); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --system-side-nav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --system-side-nav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --system-side-nav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --system-side-nav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-100); + --system-side-nav-item-background-down: var(--spectrum-gray-200); + --system-side-nav-background-key-focus: var(--spectrum-gray-100); + --system-side-nav-item-background-default-selected: var(--spectrum-gray-100); + --system-side-nav-background-hover-selected: var(--spectrum-gray-200); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-200); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-100); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-side-nav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-header-line-height: var( + --spectrum-cjk-line-height-100 + ); } :host, :root { - --system-slider-track-color: var(--spectrum-gray-200); - --system-slider-track-fill-color: var(--spectrum-gray-700); - --system-slider-ramp-track-color: var(--spectrum-gray-400); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-100); - --system-slider-handle-background-color: transparent; - --system-slider-handle-background-color-disabled: transparent; - --system-slider-ramp-handle-background-color: var(--spectrum-gray-75); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-75); - --system-slider-handle-border-color: var(--spectrum-gray-700); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-75); - --system-slider-tick-mark-color: var(--spectrum-gray-200); - --system-slider-handle-border-color-hover: var(--spectrum-gray-800); - --system-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); - --system-slider-value-inline-size: 18px; - --system-slider-ramp-track-block-size: var( - --spectrum-slider-ramp-track-height - ); - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: 2px; - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-track-fill-thickness: var( - --spectrum-slider-track-thickness - ); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-track-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-handle-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-slider-label-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-tick-label-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-label-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-slider-tick-mark-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-size-m-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-size-m-handle-size: var( - --spectrum-slider-handle-size-medium - ); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-size-m-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-500); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-500 - ); - --system-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-size-m-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-size-m-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-m-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var( - --spectrum-slider-handle-size-small - ); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-500 - ); - --system-slider-size-s-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-small - ); - --system-slider-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-size-s-control-to-field-label: var( - --spectrum-slider-control-to-field-label-small - ); - --system-slider-size-s-value-side-padding-inline: var( - --spectrum-spacing-100 - ); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var( - --spectrum-slider-handle-size-large - ); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-500) * 4 - ); - --system-slider-size-l-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-large - ); - --system-slider-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-slider-size-l-control-to-field-label: var( - --spectrum-slider-control-to-field-label-large - ); - --system-slider-size-l-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var( - --spectrum-slider-handle-size-extra-large - ); - --system-slider-size-xl-control-height: var( - --spectrum-component-height-300 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-500) * 4 - ); - --system-slider-size-xl-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-extra-large - ); - --system-slider-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-slider-size-xl-control-to-field-label: var( - --spectrum-slider-control-to-field-label-extra-large - ); - --system-slider-size-xl-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-xl-value-inline-size: 22px; + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-100); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-75); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-75); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); + --system-slider-value-inline-size: 18px; + --system-slider-ramp-track-block-size: var( + --spectrum-slider-ramp-track-height + ); + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: 2px; + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-track-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-handle-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-slider-label-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-tick-label-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-label-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-slider-tick-mark-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --system-slider-size-m-handle-border-radius: var( + --spectrum-corner-radius-500 + ); + --system-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-size-m-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-size-m-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var(--spectrum-slider-handle-size-small); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var( + --spectrum-corner-radius-500 + ); + --system-slider-size-s-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-small + ); + --system-slider-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-size-s-control-to-field-label: var( + --spectrum-slider-control-to-field-label-small + ); + --system-slider-size-s-value-side-padding-inline: var(--spectrum-spacing-100); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var(--spectrum-slider-handle-size-large); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-500) * 4 + ); + --system-slider-size-l-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-large + ); + --system-slider-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-slider-size-l-control-to-field-label: var( + --spectrum-slider-control-to-field-label-large + ); + --system-slider-size-l-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var( + --spectrum-slider-handle-size-extra-large + ); + --system-slider-size-xl-control-height: var(--spectrum-component-height-300); + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-500) * 4 + ); + --system-slider-size-xl-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-extra-large + ); + --system-slider-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-slider-size-xl-control-to-field-label: var( + --spectrum-slider-control-to-field-label-extra-large + ); + --system-slider-size-xl-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-xl-value-inline-size: 22px; } :host, :root { - --system-split-view-vertical-width: 100%; - --system-split-view-vertical-gripper-width: 50%; - --system-split-view-vertical-gripper-outer-width: 100%; - --system-split-view-vertical-gripper-reset: 0; - --system-split-view-background-color: var(--spectrum-gray-75); - --system-split-view-content-color: var(--spectrum-body-color); - --system-split-view-handle-background-color: var(--spectrum-gray-200); - --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); - --system-split-view-handle-background-color-down: var(--spectrum-gray-800); - --system-split-view-handle-background-color-focus: var( - --spectrum-focus-indicator-color - ); - --system-split-view-handle-width: var(--spectrum-border-width-200); - --system-split-view-gripper-border-radius: 2px; - --system-split-view-gripper-width: var(--spectrum-border-width-400); - --system-split-view-gripper-height: 16px; - --system-split-view-gripper-border-width-horizontal: 3px; - --system-split-view-gripper-border-width-vertical: var( - --spectrum-border-width-400 - ); + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-75); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-200); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: 2px; + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); } :host, :root { - --system-status-light-corner-radius: 50%; - --system-status-light-font-weight: 400; - --system-status-light-border-width: var(--spectrum-border-width-100); - --system-status-light-line-height: var(--spectrum-line-height-100); - --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-status-light-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-status-light-subdued-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-status-light-semantic-neutral-color: var( - --spectrum-neutral-visual-color - ); - --system-status-light-semantic-accent-color: var( - --spectrum-accent-visual-color - ); - --system-status-light-semantic-negative-color: var( - --spectrum-negative-visual-color - ); - --system-status-light-semantic-info-color: var( - --spectrum-informative-visual-color - ); - --system-status-light-semantic-notice-color: var( - --spectrum-notice-visual-color - ); - --system-status-light-semantic-positive-color: var( - --spectrum-positive-visual-color - ); - --system-status-light-nonsemantic-gray-color: var( - --spectrum-gray-visual-color - ); - --system-status-light-nonsemantic-red-color: var( - --spectrum-red-visual-color - ); - --system-status-light-nonsemantic-orange-color: var( - --spectrum-orange-visual-color - ); - --system-status-light-nonsemantic-yellow-color: var( - --spectrum-yellow-visual-color - ); - --system-status-light-nonsemantic-chartreuse-color: var( - --spectrum-chartreuse-visual-color - ); - --system-status-light-nonsemantic-celery-color: var( - --spectrum-celery-visual-color - ); - --system-status-light-nonsemantic-green-color: var( - --spectrum-green-visual-color - ); - --system-status-light-nonsemantic-seafoam-color: var( - --spectrum-seafoam-visual-color - ); - --system-status-light-nonsemantic-cyan-color: var( - --spectrum-cyan-visual-color - ); - --system-status-light-nonsemantic-blue-color: var( - --spectrum-blue-visual-color - ); - --system-status-light-nonsemantic-indigo-color: var( - --spectrum-indigo-visual-color - ); - --system-status-light-nonsemantic-purple-color: var( - --spectrum-purple-visual-color - ); - --system-status-light-nonsemantic-fuchsia-color: var( - --spectrum-fuchsia-visual-color - ); - --system-status-light-nonsemantic-magenta-color: var( - --spectrum-magenta-visual-color - ); - --system-status-light-height: var(--spectrum-component-height-100); - --system-status-light-size-m-height: var(--spectrum-component-height-100); - --system-status-light-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-size-m-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-font-size: var(--spectrum-font-size-100); - --system-status-light-size-m-font-size: var(--spectrum-font-size-100); - --system-status-light-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-size-m-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-size-m-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-m-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-s-height: var(--spectrum-component-height-75); - --system-status-light-size-s-dot-size: var( - --spectrum-status-light-dot-size-small - ); - --system-status-light-size-s-font-size: var(--spectrum-font-size-75); - --system-status-light-size-s-spacing-dot-to-label: var( - --spectrum-text-to-visual-75 - ); - --system-status-light-size-s-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-small - ); - --system-status-light-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-status-light-size-s-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-75 - ); - --system-status-light-size-l-height: var(--spectrum-component-height-200); - --system-status-light-size-l-dot-size: var( - --spectrum-status-light-dot-size-large - ); - --system-status-light-size-l-font-size: var(--spectrum-font-size-200); - --system-status-light-size-l-spacing-dot-to-label: var( - --spectrum-text-to-visual-200 - ); - --system-status-light-size-l-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-large - ); - --system-status-light-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-status-light-size-l-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-200 - ); - --system-status-light-size-xl-height: var(--spectrum-component-height-300); - --system-status-light-size-xl-dot-size: var( - --spectrum-status-light-dot-size-extra-large - ); - --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); - --system-status-light-size-xl-spacing-dot-to-label: var( - --spectrum-text-to-visual-300 - ); - --system-status-light-size-xl-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-extra-large - ); - --system-status-light-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-status-light-size-xl-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-300 - ); + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-status-light-subdued-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-status-light-semantic-neutral-color: var( + --spectrum-neutral-visual-color + ); + --system-status-light-semantic-accent-color: var( + --spectrum-accent-visual-color + ); + --system-status-light-semantic-negative-color: var( + --spectrum-negative-visual-color + ); + --system-status-light-semantic-info-color: var( + --spectrum-informative-visual-color + ); + --system-status-light-semantic-notice-color: var( + --spectrum-notice-visual-color + ); + --system-status-light-semantic-positive-color: var( + --spectrum-positive-visual-color + ); + --system-status-light-nonsemantic-gray-color: var( + --spectrum-gray-visual-color + ); + --system-status-light-nonsemantic-red-color: var(--spectrum-red-visual-color); + --system-status-light-nonsemantic-orange-color: var( + --spectrum-orange-visual-color + ); + --system-status-light-nonsemantic-yellow-color: var( + --spectrum-yellow-visual-color + ); + --system-status-light-nonsemantic-chartreuse-color: var( + --spectrum-chartreuse-visual-color + ); + --system-status-light-nonsemantic-celery-color: var( + --spectrum-celery-visual-color + ); + --system-status-light-nonsemantic-green-color: var( + --spectrum-green-visual-color + ); + --system-status-light-nonsemantic-seafoam-color: var( + --spectrum-seafoam-visual-color + ); + --system-status-light-nonsemantic-cyan-color: var( + --spectrum-cyan-visual-color + ); + --system-status-light-nonsemantic-blue-color: var( + --spectrum-blue-visual-color + ); + --system-status-light-nonsemantic-indigo-color: var( + --spectrum-indigo-visual-color + ); + --system-status-light-nonsemantic-purple-color: var( + --spectrum-purple-visual-color + ); + --system-status-light-nonsemantic-fuchsia-color: var( + --spectrum-fuchsia-visual-color + ); + --system-status-light-nonsemantic-magenta-color: var( + --spectrum-magenta-visual-color + ); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var(--spectrum-status-light-dot-size-medium); + --system-status-light-size-m-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-size-m-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-size-m-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-size-m-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-size-s-height: var(--spectrum-component-height-75); + --system-status-light-size-s-dot-size: var( + --spectrum-status-light-dot-size-small + ); + --system-status-light-size-s-font-size: var(--spectrum-font-size-75); + --system-status-light-size-s-spacing-dot-to-label: var( + --spectrum-text-to-visual-75 + ); + --system-status-light-size-s-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-small + ); + --system-status-light-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-status-light-size-s-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-75 + ); + --system-status-light-size-l-height: var(--spectrum-component-height-200); + --system-status-light-size-l-dot-size: var( + --spectrum-status-light-dot-size-large + ); + --system-status-light-size-l-font-size: var(--spectrum-font-size-200); + --system-status-light-size-l-spacing-dot-to-label: var( + --spectrum-text-to-visual-200 + ); + --system-status-light-size-l-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-large + ); + --system-status-light-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-status-light-size-l-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-200 + ); + --system-status-light-size-xl-height: var(--spectrum-component-height-300); + --system-status-light-size-xl-dot-size: var( + --spectrum-status-light-dot-size-extra-large + ); + --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); + --system-status-light-size-xl-spacing-dot-to-label: var( + --spectrum-text-to-visual-300 + ); + --system-status-light-size-xl-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-extra-large + ); + --system-status-light-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-status-light-size-xl-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-300 + ); } :host, :root { - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-background-color: var(--spectrum-gray-25); - --system-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-900 - ); - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: 0px; - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default - ); - --system-stepper-border-color-hover-invalid: var( - --spectrum-negative-border-color-hover - ); - --system-stepper-border-color-focus-invalid: var( - --spectrum-negative-border-color-focus - ); - --system-stepper-border-color-focus-hover-invalid: var( - --spectrum-negative-border-color-focus-hover - ); - --system-stepper-border-color-keyboard-focus-invalid: var( - --spectrum-negative-border-color-key-focus - ); - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-disabled: var(--spectrum-gray-100); - --system-stepper-button-border-width-disabled: var( - --spectrum-border-width-100 - ); - --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-background-color: var(--spectrum-gray-25); + --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --system-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-stepper-button-border-radius-reset: 0px; + --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-stepper-border-color-hover-invalid: var( + --spectrum-negative-border-color-hover + ); + --system-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-stepper-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-stepper-button-border-color-disabled: var(--spectrum-gray-100); + --system-stepper-button-border-width-disabled: var( + --spectrum-border-width-100 + ); + --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); + --system-stepper-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-size-m-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-s-button-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-size-l-button-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); } :host, :root { - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-1000-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); - --system-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --system-swatch-disabled-icon-color: var(--spectrum-gray-25); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba( + var(--spectrum-gray-1000-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-icon-border-color: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-border-color-light: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-light-opacity) + ); + --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-inner-border-color-selected: var(--spectrum-gray-25); + --system-swatch-disabled-icon-color: var(--spectrum-gray-25); + --system-swatch-dash-icon-color: var(--spectrum-gray-800); + --system-swatch-slash-icon-color: var(--spectrum-red-900); + --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-swatch-size: var(--spectrum-swatch-size-medium); + --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); + --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-size-m-disabled-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-m-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); + --system-swatch-size-xs-disabled-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-swatch-size-xs-slash-thickness: var( + --spectrum-swatch-slash-thickness-extra-small + ); + --system-swatch-size-s-size: var(--spectrum-swatch-size-small); + --system-swatch-size-s-disabled-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-swatch-size-s-slash-thickness: var( + --spectrum-swatch-slash-thickness-small + ); + --system-swatch-size-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-swatch-size-l-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); } :host, :root { - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); } :host, :root { - --system-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-opacity-checkerboard-position: left top; + --system-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-opacity-checkerboard-position: left top; } :host, :root { - --system-switch-handle-border-color-default: var(--spectrum-gray-600); - --system-switch-handle-border-color-hover: var(--spectrum-gray-700); - --system-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-700 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-800 - ); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-800 - ); - --system-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-switch-label-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-switch-label-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-switch-label-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-switch-label-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color: var(--spectrum-gray-200); - --system-switch-background-color-disabled: var(--spectrum-gray-200); - --system-switch-background-color-selected-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color-selected-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-switch-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-switch-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-switch-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-switch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-switch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-switch-handle-background-color: var(--spectrum-gray-50); - --system-switch-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-disabled-label-color-default: var( - --spectrum-disabled-content-color - ); - --system-switch-emphasized-background-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-background-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-background-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-background-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-handle-border-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-handle-border-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-control-width: var(--spectrum-switch-control-width-medium); - --system-switch-size-m-control-width: var( - --spectrum-switch-control-width-medium - ); - --system-switch-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-size-m-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-control-label-spacing: var(--spectrum-text-to-control-100); - --system-switch-size-m-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --system-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-size-m-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-font-size: var(--spectrum-font-size-100); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var( - --spectrum-switch-control-width-small - ); - --system-switch-size-s-control-height: var( - --spectrum-switch-control-height-small - ); - --system-switch-size-s-control-label-spacing: var( - --spectrum-text-to-control-75 - ); - --system-switch-size-s-spacing-top-to-control: var( - --spectrum-switch-top-to-control-small - ); - --system-switch-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var( - --spectrum-switch-control-width-large - ); - --system-switch-size-l-control-height: var( - --spectrum-switch-control-height-large - ); - --system-switch-size-l-control-label-spacing: var( - --spectrum-text-to-control-200 - ); - --system-switch-size-l-spacing-top-to-control: var( - --spectrum-switch-top-to-control-large - ); - --system-switch-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var( - --spectrum-switch-control-width-extra-large - ); - --system-switch-size-xl-control-height: var( - --spectrum-switch-control-height-extra-large - ); - --system-switch-size-xl-control-label-spacing: var( - --spectrum-text-to-control-300 - ); - --system-switch-size-xl-spacing-top-to-control: var( - --spectrum-switch-top-to-control-extra-large - ); - --system-switch-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); + --system-switch-handle-border-color-default: var(--spectrum-gray-600); + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + --system-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); + --system-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-switch-label-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color: var(--spectrum-gray-200); + --system-switch-background-color-disabled: var(--spectrum-gray-200); + --system-switch-background-color-selected-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color-selected-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-switch-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-switch-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-switch-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-switch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-switch-handle-background-color: var(--spectrum-gray-50); + --system-switch-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-disabled-label-color-default: var( + --spectrum-disabled-content-color + ); + --system-switch-emphasized-background-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-background-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-background-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-background-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-handle-border-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-handle-border-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-control-width: var(--spectrum-switch-control-width-medium); + --system-switch-size-m-control-width: var( + --spectrum-switch-control-width-medium + ); + --system-switch-control-height: var(--spectrum-switch-control-height-medium); + --system-switch-size-m-control-height: var( + --spectrum-switch-control-height-medium + ); + --system-switch-control-label-spacing: var(--spectrum-text-to-control-100); + --system-switch-size-m-control-label-spacing: var( + --spectrum-text-to-control-100 + ); + --system-switch-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-size-m-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-font-size: var(--spectrum-font-size-100); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var( + --spectrum-switch-control-width-small + ); + --system-switch-size-s-control-height: var( + --spectrum-switch-control-height-small + ); + --system-switch-size-s-control-label-spacing: var( + --spectrum-text-to-control-75 + ); + --system-switch-size-s-spacing-top-to-control: var( + --spectrum-switch-top-to-control-small + ); + --system-switch-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var( + --spectrum-switch-control-width-large + ); + --system-switch-size-l-control-height: var( + --spectrum-switch-control-height-large + ); + --system-switch-size-l-control-label-spacing: var( + --spectrum-text-to-control-200 + ); + --system-switch-size-l-spacing-top-to-control: var( + --spectrum-switch-top-to-control-large + ); + --system-switch-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var( + --spectrum-switch-control-width-extra-large + ); + --system-switch-size-xl-control-height: var( + --spectrum-switch-control-height-extra-large + ); + --system-switch-size-xl-control-label-spacing: var( + --spectrum-text-to-control-300 + ); + --system-switch-size-xl-spacing-top-to-control: var( + --spectrum-switch-top-to-control-extra-large + ); + --system-switch-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); } :host, :root { - --system-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-medium - ); - --system-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-medium - ); - --system-table-min-header-height: var(--spectrum-component-height-100); - --system-table-min-row-height: var( - --spectrum-table-row-height-medium-regular - ); - --system-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-regular - ); - --system-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-regular - ); - --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --system-table-border-radius: var(--spectrum-corner-radius-100); - --system-table-border-width: var(--spectrum-table-border-divider-width); - --system-table-outer-border-inline-width: var( - --spectrum-table-border-divider-width - ); - --system-table-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-default-vertical-align: top; - --system-table-header-vertical-align: middle; - --system-table-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-row-font-family: var(--spectrum-sans-font-family-stack); - --system-table-row-font-weight: var(--spectrum-regular-font-weight); - --system-table-row-font-style: var(--spectrum-default-font-style); - --system-table-row-font-size: var(--spectrum-font-size-100); - --system-table-row-line-height: var(--spectrum-line-height-100); - --system-table-border-color: var(--spectrum-gray-200); - --system-table-divider-color: var(--spectrum-gray-200); - --system-table-header-background-color: var( - --spectrum-transparent-white-25 - ); - --system-table-header-text-color: var(--spectrum-body-color); - --system-table-row-background-color: var(--spectrum-gray-25); - --system-table-row-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-table-selected-row-background-color: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity) - ); - --system-table-selected-row-background-color-non-emphasized: rgba( - var(--spectrum-gray-700-rgb), - var(--spectrum-table-selected-row-background-opacity-non-emphasized) - ); - --system-table-row-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-hover-opacity) - ); - --system-table-row-active-color: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-down-opacity) - ); - --system-table-selected-row-background-color-focus: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity-hover) - ); - --system-table-selected-row-background-color-non-emphasized-focus: rgba( - var(--spectrum-gray-700-rgb), - var( - --spectrum-table-selected-row-background-opacity-non-emphasized-hover - ) - ); - --system-table-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-table-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-icon-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-icon-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-medium - ); - --system-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-regular - ); - --system-table-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-table-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color-rgb), - var(--spectrum-drop-zone-background-color-opacity) - ); - --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - --system-table-transition-duration: var(--spectrum-animation-duration-100); - --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --system-table-summary-row-background-color: var(--spectrum-gray-100); - --system-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-medium - ); - --system-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-100 - ); - --system-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-100 - ); - --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-section-header-background-color: var(--spectrum-gray-100); - --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --system-table-collapsible-disclosure-inline-spacing: 0px; - --system-table-disclosure-icon-size: var(--spectrum-component-height-100); - --system-table-collapsible-icon-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-regular - ); - --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - --system-table-cell-background-color: var( - --system-table-row-background-color - ); - --system-table-selected-cell-background-color: var( - --system-table-selected-row-background-color-non-emphasized - ); - --system-table-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --system-table-size-s-min-header-height: var( - --spectrum-component-height-100 - ); - --system-table-size-s-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-small - ); - --system-table-size-s-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-small - ); - --system-table-size-s-min-row-height: var( - --spectrum-table-row-height-small-regular - ); - --system-table-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-regular - ); - --system-table-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-regular - ); - --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-row-font-size: var(--spectrum-font-size-75); - --system-table-size-s-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-small - ); - --system-table-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-regular - ); - --system-table-size-s-section-header-min-height: var( - --spectrum-table-section-header-row-height-small - ); - --system-table-size-s-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-75 - ); - --system-table-size-s-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-75 - ); - --system-table-size-s-disclosure-icon-size: var( - --spectrum-component-height-75 - ); - --system-table-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-regular - ); - --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-size-l-min-header-height: var( - --spectrum-component-height-200 - ); - --system-table-size-l-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-large - ); - --system-table-size-l-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-large - ); - --system-table-size-l-min-row-height: var( - --spectrum-table-row-height-large-regular - ); - --system-table-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-regular - ); - --system-table-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-regular - ); - --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-row-font-size: var(--spectrum-font-size-200); - --system-table-size-l-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-large - ); - --system-table-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-regular - ); - --system-table-size-l-section-header-min-height: var( - --spectrum-table-section-header-row-height-large - ); - --system-table-size-l-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-200 - ); - --system-table-size-l-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-200 - ); - --system-table-size-l-disclosure-icon-size: var( - --spectrum-component-height-200 - ); - --system-table-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-regular - ); - --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-size-xl-min-header-height: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-extra-large - ); - --system-table-size-xl-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-extra-large - ); - --system-table-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-regular - ); - --system-table-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-regular - ); - --system-table-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-regular - ); - --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); - --system-table-size-xl-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-extra-large - ); - --system-table-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-regular - ); - --system-table-size-xl-section-header-min-height: var( - --spectrum-table-section-header-row-height-extra-large - ); - --system-table-size-xl-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-300 - ); - --system-table-size-xl-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-300 - ); - --system-table-size-xl-disclosure-icon-size: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular - ); - --system-table-size-xl-thumbnail-to-text: var( - --spectrum-text-to-visual-300 - ); - --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); - --system-table-compact-min-row-height: var( - --spectrum-table-row-height-medium-compact - ); - --system-table-compact-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-compact - ); - --system-table-compact-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-compact - ); - --system-table-compact-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-compact - ); - --system-table-compact-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-compact - ); - --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-compact-size-s-min-row-height: var( - --spectrum-table-row-height-small-compact - ); - --system-table-compact-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-compact - ); - --system-table-compact-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-compact - ); - --system-table-compact-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-compact - ); - --system-table-compact-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-compact - ); - --system-table-compact-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-50 - ); - --system-table-compact-size-l-min-row-height: var( - --spectrum-table-row-height-large-compact - ); - --system-table-compact-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-compact - ); - --system-table-compact-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-compact - ); - --system-table-compact-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-compact - ); - --system-table-compact-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-compact - ); - --system-table-compact-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-compact-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-compact - ); - --system-table-compact-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-500 - ); - --system-table-spacious-min-row-height: var( - --spectrum-table-row-height-medium-spacious - ); - --system-table-spacious-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-spacious - ); - --system-table-spacious-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-spacious - ); - --system-table-spacious-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-spacious - ); - --system-table-spacious-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-spacious - ); - --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-spacious-size-s-min-row-height: var( - --spectrum-table-row-height-small-spacious - ); - --system-table-spacious-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-spacious - ); - --system-table-spacious-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-spacious - ); - --system-table-spacious-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-spacious - ); - --system-table-spacious-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-spacious - ); - --system-table-spacious-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-spacious-size-l-min-row-height: var( - --spectrum-table-row-height-large-spacious - ); - --system-table-spacious-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-spacious - ); - --system-table-spacious-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-spacious - ); - --system-table-spacious-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-spacious - ); - --system-table-spacious-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-spacious - ); - --system-table-spacious-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-700 - ); - --system-table-spacious-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-spacious - ); - --system-table-spacious-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-800 - ); - --system-table-emphasized-selected-cell-background-color: var( - --system-table-selected-row-background-color - ); - --system-table-emphasized-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --system-table-quiet-border-radius: 0px; - --system-table-quiet-outer-border-inline-width: 0px; - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-25 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-25 - ); + --system-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --system-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --system-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --system-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-200); + --system-table-divider-color: var(--spectrum-gray-200); + --system-table-header-background-color: var(--spectrum-transparent-white-25); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-25); + --system-table-row-text-color: var(--spectrum-neutral-content-color-default); + --system-table-selected-row-background-color: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity) + ); + --system-table-selected-row-background-color-non-emphasized: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized) + ); + --system-table-row-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-hover-opacity) + ); + --system-table-row-active-color: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-down-opacity) + ); + --system-table-selected-row-background-color-focus: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity-hover) + ); + --system-table-selected-row-background-color-non-emphasized-focus: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover) + ); + --system-table-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-table-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-table-icon-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-table-icon-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-medium + ); + --system-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-regular + ); + --system-table-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color-rgb), + var(--spectrum-drop-zone-background-color-opacity) + ); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-100); + --system-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-medium + ); + --system-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 + ); + --system-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 + ); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-100); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-regular + ); + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var( + --system-table-row-background-color + ); + --system-table-selected-cell-background-color: var( + --system-table-selected-row-background-color-non-emphasized + ); + --system-table-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus + ); + --system-table-size-s-min-header-height: var(--spectrum-component-height-100); + --system-table-size-s-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-small + ); + --system-table-size-s-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-small + ); + --system-table-size-s-min-row-height: var( + --spectrum-table-row-height-small-regular + ); + --system-table-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-regular + ); + --system-table-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-regular + ); + --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-row-font-size: var(--spectrum-font-size-75); + --system-table-size-s-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-small + ); + --system-table-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-regular + ); + --system-table-size-s-section-header-min-height: var( + --spectrum-table-section-header-row-height-small + ); + --system-table-size-s-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-75 + ); + --system-table-size-s-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-75 + ); + --system-table-size-s-disclosure-icon-size: var( + --spectrum-component-height-75 + ); + --system-table-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-regular + ); + --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-size-l-min-header-height: var(--spectrum-component-height-200); + --system-table-size-l-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-large + ); + --system-table-size-l-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-large + ); + --system-table-size-l-min-row-height: var( + --spectrum-table-row-height-large-regular + ); + --system-table-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-regular + ); + --system-table-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-regular + ); + --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-row-font-size: var(--spectrum-font-size-200); + --system-table-size-l-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-large + ); + --system-table-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-regular + ); + --system-table-size-l-section-header-min-height: var( + --spectrum-table-section-header-row-height-large + ); + --system-table-size-l-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-200 + ); + --system-table-size-l-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-200 + ); + --system-table-size-l-disclosure-icon-size: var( + --spectrum-component-height-200 + ); + --system-table-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-regular + ); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-extra-large + ); + --system-table-size-xl-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-extra-large + ); + --system-table-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-regular + ); + --system-table-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-regular + ); + --system-table-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-regular + ); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-extra-large + ); + --system-table-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-regular + ); + --system-table-size-xl-section-header-min-height: var( + --spectrum-table-section-header-row-height-extra-large + ); + --system-table-size-xl-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-300 + ); + --system-table-size-xl-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-300 + ); + --system-table-size-xl-disclosure-icon-size: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular + ); + --system-table-size-xl-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var( + --spectrum-table-row-height-medium-compact + ); + --system-table-compact-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-compact + ); + --system-table-compact-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-compact + ); + --system-table-compact-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-compact + ); + --system-table-compact-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-compact + ); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var( + --spectrum-table-row-height-small-compact + ); + --system-table-compact-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-compact + ); + --system-table-compact-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-compact + ); + --system-table-compact-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-compact + ); + --system-table-compact-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-compact + ); + --system-table-compact-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-50 + ); + --system-table-compact-size-l-min-row-height: var( + --spectrum-table-row-height-large-compact + ); + --system-table-compact-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-compact + ); + --system-table-compact-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-compact + ); + --system-table-compact-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-compact + ); + --system-table-compact-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-compact + ); + --system-table-compact-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-compact-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-compact + ); + --system-table-compact-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-500 + ); + --system-table-spacious-min-row-height: var( + --spectrum-table-row-height-medium-spacious + ); + --system-table-spacious-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-spacious + ); + --system-table-spacious-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-spacious + ); + --system-table-spacious-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-spacious + ); + --system-table-spacious-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-spacious + ); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var( + --spectrum-table-row-height-small-spacious + ); + --system-table-spacious-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-spacious + ); + --system-table-spacious-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-spacious + ); + --system-table-spacious-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-spacious + ); + --system-table-spacious-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-spacious + ); + --system-table-spacious-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-spacious-size-l-min-row-height: var( + --spectrum-table-row-height-large-spacious + ); + --system-table-spacious-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-spacious + ); + --system-table-spacious-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-spacious + ); + --system-table-spacious-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-spacious + ); + --system-table-spacious-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-spacious + ); + --system-table-spacious-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-700 + ); + --system-table-spacious-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-spacious + ); + --system-table-spacious-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-800 + ); + --system-table-emphasized-selected-cell-background-color: var( + --system-table-selected-row-background-color + ); + --system-table-emphasized-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-25 + ); + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-25 + ); } :host, :root { - --system-tabs-font-weight: var(--spectrum-regular-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-medium - ); - --system-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-medium - ); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-medium - ); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-medium - ); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tabs-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-tabs-focus-indicator-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-medium - ); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-200); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-small - ); - --system-tabs-size-s-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-small - ); - --system-tabs-size-s-start-to-edge: var( - --spectrum-tab-item-start-to-edge-small - ); - --system-tabs-size-s-top-to-text: var( - --spectrum-tab-item-top-to-text-small - ); - --system-tabs-size-s-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-small - ); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-small - ); - --system-tabs-size-s-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-small - ); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-large - ); - --system-tabs-size-l-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-large - ); - --system-tabs-size-l-start-to-edge: var( - --spectrum-tab-item-start-to-edge-large - ); - --system-tabs-size-l-top-to-text: var( - --spectrum-tab-item-top-to-text-large - ); - --system-tabs-size-l-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-large - ); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-large - ); - --system-tabs-size-l-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-large - ); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var( - --spectrum-tab-item-height-extra-large - ); - --system-tabs-size-xl-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-extra-large - ); - --system-tabs-size-xl-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-extra-large - ); - --system-tabs-size-xl-start-to-edge: var( - --spectrum-tab-item-start-to-edge-extra-large - ); - --system-tabs-size-xl-top-to-text: var( - --spectrum-tab-item-top-to-text-extra-large - ); - --system-tabs-size-xl-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-extra-large - ); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-extra-large - ); - --system-tabs-size-xl-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-extra-large - ); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var( - --spectrum-accent-content-color-default - ); - --system-tabs-emphasized-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-tabs-emphasized-color-key-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-tabs-emphasized-selection-indicator-color: var( - --spectrum-accent-content-color-default - ); + --system-tabs-font-weight: var(--spectrum-regular-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --system-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-200); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --system-tabs-size-s-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); + --system-tabs-size-s-start-to-edge: var( + --spectrum-tab-item-start-to-edge-small + ); + --system-tabs-size-s-top-to-text: var(--spectrum-tab-item-top-to-text-small); + --system-tabs-size-s-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-small + ); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); + --system-tabs-size-s-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --system-tabs-size-l-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); + --system-tabs-size-l-start-to-edge: var( + --spectrum-tab-item-start-to-edge-large + ); + --system-tabs-size-l-top-to-text: var(--spectrum-tab-item-top-to-text-large); + --system-tabs-size-l-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-large + ); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); + --system-tabs-size-l-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var( + --spectrum-tab-item-height-extra-large + ); + --system-tabs-size-xl-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --system-tabs-size-xl-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --system-tabs-size-xl-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); + --system-tabs-size-xl-top-to-text: var( + --spectrum-tab-item-top-to-text-extra-large + ); + --system-tabs-size-xl-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-extra-large + ); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-extra-large + ); + --system-tabs-size-xl-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-extra-large + ); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var( + --spectrum-accent-content-color-default + ); + --system-tabs-emphasized-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-tabs-emphasized-color-key-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-tabs-emphasized-selection-indicator-color: var( + --spectrum-accent-content-color-default + ); } :host, :root { - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-background-color: var(--spectrum-gray-50); - --system-tag-background-color-hover: var(--spectrum-gray-50); - --system-tag-background-color-active: var(--spectrum-gray-100); - --system-tag-background-color-focus: var(--spectrum-gray-50); - --system-tag-content-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-tag-content-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tag-content-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tag-content-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tag-border-color-selected: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-tag-border-color-selected-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-tag-border-color-selected-active: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-tag-border-color-selected-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); - --system-tag-border-color-disabled: transparent; - --system-tag-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-tag-size-small-spacing-inline-start: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-75 - ); - --system-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-medium-spacing-inline-start: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-100 - ); - --system-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-large-spacing-inline-start: var( - --spectrum-component-edge-to-visual-200 - ); - --system-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-200 - ); - --system-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-200 - ); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-25); - --system-tag-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-tag-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-tag-background-color-selected-active: var( - --spectrum-neutral-background-color-selected-down - ); - --system-tag-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var( - --spectrum-negative-color-1000 - ); - --system-tag-border-color-invalid-active: var( - --spectrum-negative-color-1100 - ); - --system-tag-border-color-invalid-focus: var( - --spectrum-negative-color-1000 - ); - --system-tag-content-color-invalid: var( - --spectrum-negative-content-color-default - ); - --system-tag-content-color-invalid-hover: var( - --spectrum-negative-content-color-hover - ); - --system-tag-content-color-invalid-active: var( - --spectrum-negative-content-color-down - ); - --system-tag-content-color-invalid-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-tag-border-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-border-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-border-color-invalid-selected-focus: var( - --spectrum-negative-background-color-down - ); - --system-tag-border-color-invalid-selected-active: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-background-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-background-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-background-color-invalid-selected-active: var( - --spectrum-negative-background-color-down - ); - --system-tag-background-color-invalid-selected-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-border-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-border-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-border-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-background-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-background-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-background-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-background-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-m-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-icon-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-size-m-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --system-tag-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-size-m-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-size-m-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-m-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --system-tag-size-s-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --system-tag-size-s-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --system-tag-size-s-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --system-tag-size-s-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --system-tag-size-s-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-large - ); - --system-tag-size-l-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-label-spacing-block: var( - --spectrum-component-top-to-text-200 - ); - --system-tag-size-l-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --system-tag-size-l-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --system-tag-size-l-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --system-tag-size-l-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-background-color: var(--spectrum-gray-50); + --system-tag-background-color-hover: var(--spectrum-gray-50); + --system-tag-background-color-active: var(--spectrum-gray-100); + --system-tag-background-color-focus: var(--spectrum-gray-50); + --system-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-tag-border-color-disabled: transparent; + --system-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-25); + --system-tag-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-tag-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-tag-background-color-selected-active: var( + --spectrum-neutral-background-color-selected-down + ); + --system-tag-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); + --system-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); + --system-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); + --system-tag-content-color-invalid: var( + --spectrum-negative-content-color-default + ); + --system-tag-content-color-invalid-hover: var( + --spectrum-negative-content-color-hover + ); + --system-tag-content-color-invalid-active: var( + --spectrum-negative-content-color-down + ); + --system-tag-content-color-invalid-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-tag-border-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-border-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-border-color-invalid-selected-focus: var( + --spectrum-negative-background-color-down + ); + --system-tag-border-color-invalid-selected-active: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-background-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-background-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-background-color-invalid-selected-active: var( + --spectrum-negative-background-color-down + ); + --system-tag-background-color-invalid-selected-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-border-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-border-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-border-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-background-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-background-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-background-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-background-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-size-m-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-size-m-label-spacing-block: var( + --spectrum-component-top-to-text-100 + ); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var( + --system-tag-size-medium-corner-radius + ); + --system-tag-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-size-m-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-size-m-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-m-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-small + ); + --system-tag-size-s-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-label-spacing-block: var( + --spectrum-component-top-to-text-75 + ); + --system-tag-size-s-corner-radius: var(--system-tag-size-small-corner-radius); + --system-tag-size-s-spacing-inline-start: var( + --system-tag-size-small-spacing-inline-start + ); + --system-tag-size-s-label-spacing-inline-end: var( + --system-tag-size-small-label-spacing-inline-end + ); + --system-tag-size-s-clear-button-spacing-inline-end: var( + --system-tag-size-small-clear-button-spacing-inline-end + ); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large + ); + --system-tag-size-l-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-label-spacing-block: var( + --spectrum-component-top-to-text-200 + ); + --system-tag-size-l-corner-radius: var(--system-tag-size-large-corner-radius); + --system-tag-size-l-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start + ); + --system-tag-size-l-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end + ); + --system-tag-size-l-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end + ); } :host, :root { - --system-tag-group-item-margin-block: var(--spectrum-spacing-75); - --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); } :host, :root { - --system-textfield-border-color: var(--spectrum-gray-500); - --system-textfield-border-color-hover: var(--spectrum-gray-600); - --system-textfield-border-color-focus: var(--spectrum-gray-800); - --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-textfield-background-color: var(--spectrum-gray-25); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); + --system-textfield-border-color: var(--spectrum-gray-500); + --system-textfield-border-color-hover: var(--spectrum-gray-600); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-texfield-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-textfield-width: 240px; + --system-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 + ); + --system-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet + ); + --system-textfield-label-spacing-block: var( + --spectrum-field-label-to-component + ); + --system-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component + ); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet + ); + --system-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet + ); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight + ); + --system-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 + ); + --system-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field + ); + --system-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-25); + --system-textfield-text-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus + ); + --system-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-textfield-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-textfield-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + --system-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-textfield-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width + ); + --system-textfield-text-area-min-block-size: var( + --spectrum-text-area-minimum-height + ); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-size-m-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-m-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-size-m-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --system-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-size-m-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); + --system-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-m-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-size-m-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-size-m-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-m-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); + --system-textfield-size-s-placeholder-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 + ); + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-textfield-size-l-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-l-placeholder-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-l-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-l-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 + ); + --system-textfield-size-l-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 + ); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large + ); + --system-textfield-size-l-character-count-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-size-l-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-size-l-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large + ); + --system-textfield-size-l-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large + ); + --system-textfield-size-l-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 + ); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-textfield-size-xl-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-xl-placeholder-font-size: var( + --spectrum-font-size-300 + ); + --system-textfield-size-xl-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-xl-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 + ); + --system-textfield-size-xl-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 + ); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large + ); + --system-textfield-size-xl-character-count-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-xl-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 + ); + --system-textfield-size-xl-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large + ); + --system-textfield-size-xl-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large + ); + --system-textfield-size-xl-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 + ); } :host, :root { - --system-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-border-radius: 2px; - --system-thumbnail-border-width: var(--spectrum-border-width-100); - --system-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) - ); - --system-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); - --system-thumbnail-layer-border-color-inner: var(--spectrum-white); - --system-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); - --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); - --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); - --system-thumbnail-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-thumbnail-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); - --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); - --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); - --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); - --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); - --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); - --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); - --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); - --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); - --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); - --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); - --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); + --system-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-border-radius: 2px; + --system-thumbnail-border-width: var(--spectrum-border-width-100); + --system-thumbnail-border-color-rgba: rgba( + var(--spectrum-gray-800-rgb), + var(--spectrum-thumbnail-border-opacity) + ); + --system-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); + --system-thumbnail-layer-border-color-inner: var(--spectrum-white); + --system-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); + --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --system-thumbnail-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-thumbnail-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-thumbnail-color-opacity-disabled: var( + --spectrum-thumbnail-opacity-disabled + ); + --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); + --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); + --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); + --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); + --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); + --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); + --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); + --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); + --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); + --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); + --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); } :host, :root { - --system-toast-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); - --system-toast-divider-color: var(--spectrum-transparent-white-400); + --system-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --system-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --system-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-400); } :host, :root { - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var( - --spectrum-component-top-to-text-75 - ); - --system-tooltip-spacing-block-end: var( - --spectrum-component-bottom-to-text-75 - ); - --system-tooltip-icon-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tooltip-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-tooltip-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-tooltip-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var( - --system-tooltip-backgound-color-default-neutral - ); + --system-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); } :host, :root { - --system-tray-exit-animation-delay: 0ms; - --system-tray-entry-animation-delay: 160ms; - --system-tray-max-inline-size: 375px; - --system-tray-spacing-edge-to-safe-zone: 64px; - --system-tray-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-tray-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-tray-corner-radius: var(--spectrum-corner-radius-100); - --system-tray-background-color: var(--spectrum-background-layer-2-color); + --system-tray-exit-animation-delay: 0ms; + --system-tray-entry-animation-delay: 160ms; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var(--spectrum-animation-duration-100); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); } :host, :root { - --system-underlay-background-entry-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-underlay-background-exit-animation-ease: var( - --spectrum-animation-ease-in - ); - --system-underlay-background-entry-animation-ease: var( - --spectrum-animation-ease-out - ); - --system-underlay-background-entry-animation-duration: var( - --spectrum-animation-duration-600 - ); - --system-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-300 - ); - --system-underlay-background-exit-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-underlay-background-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-overlay-opacity) - ); + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out + ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); } :host, :root { - --system-heading-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-heading-font-color: var(--spectrum-heading-color); - --system-heading-font-size: var(--spectrum-heading-size-m); - --system-heading-size-m-font-size: var(--spectrum-heading-size-m); - --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); - --system-heading-size-xxs-cjk-font-size: var( - --spectrum-heading-cjk-size-xxs - ); - --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); - --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); - --system-heading-size-s-font-size: var(--spectrum-heading-size-s); - --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); - --system-heading-size-l-font-size: var(--spectrum-heading-size-l); - --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); - --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); - --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); - --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); - --system-heading-size-xxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxl - ); - --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); - --system-heading-size-xxxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxxl - ); - --system-body-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-body-font-color: var(--spectrum-body-color); - --system-body-font-size: var(--spectrum-body-size-m); - --system-body-size-m-font-size: var(--spectrum-body-size-m); - --system-body-size-xs-font-size: var(--spectrum-body-size-xs); - --system-body-size-s-font-size: var(--spectrum-body-size-s); - --system-body-size-l-font-size: var(--spectrum-body-size-l); - --system-body-size-xl-font-size: var(--spectrum-body-size-xl); - --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); - --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); - --system-detail-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-detail-font-color: var(--spectrum-detail-color); - --system-detail-font-size: var(--spectrum-detail-size-m); - --system-detail-size-m-font-size: var(--spectrum-detail-size-m); - --system-detail-size-s-font-size: var(--spectrum-detail-size-s); - --system-detail-size-l-font-size: var(--spectrum-detail-size-l); - --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); - --system-code-font-family: var(--spectrum-code-font-family-stack); - --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-code-font-color: var(--spectrum-code-color); - --system-code-font-size: var(--spectrum-code-size-m); - --system-code-size-m-font-size: var(--spectrum-code-size-m); - --system-code-size-xs-font-size: var(--spectrum-code-size-xs); - --system-code-size-s-font-size: var(--spectrum-code-size-s); - --system-code-size-l-font-size: var(--spectrum-code-size-l); - --system-code-size-xl-font-size: var(--spectrum-code-size-xl); + --system-heading-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxxl + ); + --system-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); } diff --git a/tools/styles/tokens/dark-vars.css b/tools/styles/tokens/dark-vars.css index f006dae9a3..b6f01293d5 100644 --- a/tools/styles/tokens/dark-vars.css +++ b/tools/styles/tokens/dark-vars.css @@ -1,499 +1,489 @@ :host, :root { - --spectrum-overlay-opacity: 0.5; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.5; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); - --spectrum-background-base-color: var(--spectrum-gray-50); - --spectrum-background-layer-1-color: var(--spectrum-gray-75); - --spectrum-background-layer-2-color: var(--spectrum-gray-100); - --spectrum-neutral-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-400 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-300 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-500 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-400); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-300); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-400 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-500 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-400 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-300 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-400 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-500 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-400 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-400 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-500 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-400 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-300 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-400 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-800 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-800); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-900 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-800); - --spectrum-green-background-color-default: var(--spectrum-green-700); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); - --spectrum-blue-background-color-default: var(--spectrum-blue-700); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); - --spectrum-purple-background-color-default: var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-700); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-gray-50-rgb: 29, 29, 29; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 38, 38, 38; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 50, 50, 50; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 63, 63, 63; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 84, 84, 84; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 112, 112, 112; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 144, 144, 144; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 178, 178, 178; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 209, 209, 209; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 235, 235, 235; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 255, 255, 255; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb: 0, 56, 119; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 0, 65, 138; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 0, 77, 163; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 0, 89, 194; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 3, 103, 224; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 19, 121, 243; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 52, 143, 244; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 84, 163, 246; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 114, 183, 249; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 143, 202, 252; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 174, 219, 254; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 204, 233, 255; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 232, 246, 255; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 255, 255, 255; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb: 123, 0, 0; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 141, 0, 0; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 165, 0, 0; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 190, 4, 3; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 215, 25, 19; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 234, 56, 41; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 246, 88, 67; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 255, 117, 94; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 255, 149, 129; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 176, 161; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 201, 189; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 222, 216; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 241, 238; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 255, 255; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb: 102, 37, 0; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 117, 45, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 137, 55, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 158, 66, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 180, 78, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 202, 93, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 225, 109, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 244, 129, 12; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 254, 154, 46; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 255, 181, 88; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 253, 206, 136; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 255, 225, 179; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 242, 221; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 253, 249; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb: 76, 54, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 88, 64, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 103, 76, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 119, 89, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 136, 104, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 155, 120, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 174, 137, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 192, 156, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 211, 174, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 228, 194, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 244, 213, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 249, 232, 92; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 252, 246, 187; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 255, 255, 255; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb: 48, 64, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 55, 74, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 65, 87, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 76, 102, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 89, 118, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 102, 136, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 117, 154, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 132, 173, 1; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 148, 192, 8; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 166, 211, 18; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 184, 229, 37; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 205, 245, 71; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 231, 254, 154; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 255, 255, 255; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb: 0, 69, 10; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 0, 80, 12; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 0, 94, 14; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 0, 109, 15; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 0, 127, 15; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 0, 145, 18; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 4, 165, 30; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 34, 184, 51; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 68, 202, 73; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 105, 220, 99; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 142, 235, 127; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 180, 247, 162; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 221, 253, 211; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 255, 255, 255; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb: 4, 67, 41; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 0, 78, 47; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 92, 56; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 108, 67; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 0, 125, 78; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 0, 143, 93; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 18, 162, 108; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 43, 180, 125; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 67, 199, 143; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 94, 217, 162; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 129, 233, 184; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 177, 244, 209; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 223, 250, 234; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 254, 255, 252; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb: 18, 65, 63; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 14, 76, 73; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 4, 90, 87; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 0, 105, 101; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 0, 122, 117; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 0, 140, 135; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 0, 158, 152; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 3, 178, 171; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 54, 197, 189; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 93, 214, 207; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 132, 230, 223; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 176, 242, 236; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 223, 249, 246; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 254, 255, 254; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb: 0, 61, 98; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 71, 111; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 85, 127; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 100, 145; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 116, 162; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 0, 134, 180; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 0, 153, 198; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 14, 173, 215; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 44, 193, 230; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 84, 211, 241; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 127, 228, 249; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 167, 241, 255; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 215, 250, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 255, 255, 255; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb: 40, 44, 140; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 47, 52, 163; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 57, 63, 187; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 70, 75, 211; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 85, 91, 231; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 104, 109, 244; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 124, 129, 251; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 145, 149, 255; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 167, 170, 255; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 188, 190, 255; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 208, 210, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 226, 228, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 243, 243, 254; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 255, 255, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb: 76, 13, 157; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 89, 17, 177; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 105, 28, 200; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 122, 45, 218; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 140, 65, 233; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 157, 87, 243; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 172, 111, 249; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 187, 135, 251; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 202, 159, 252; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 215, 182, 254; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 228, 204, 254; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 239, 223, 255; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 249, 240, 255; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 255, 253, 255; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb: 107, 3, 106; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 123, 0, 123; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 144, 0, 145; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 165, 13, 166; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 185, 37, 185; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 205, 57, 206; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 223, 81, 224; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 235, 110, 236; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 244, 140, 242; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 250, 168, 245; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 254, 194, 248; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 255, 219, 250; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 255, 239, 252; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 255, 253, 255; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb: 118, 0, 58; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 137, 0, 66; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 160, 0, 77; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 182, 18, 90; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 203, 38, 109; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 222, 61, 130; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 237, 87, 149; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 249, 114, 167; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 255, 143, 185; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 172, 202; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 198, 218; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 221, 233; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 240, 245; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 252, 253; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); + --spectrum-overlay-opacity: 0.5; + --spectrum-drop-shadow-color-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-opacity: 0.5; + --spectrum-drop-shadow-color: rgba( + var(--spectrum-drop-shadow-color-rgb), + var(--spectrum-drop-shadow-color-opacity) + ); + --spectrum-background-base-color: var(--spectrum-gray-50); + --spectrum-background-layer-1-color: var(--spectrum-gray-75); + --spectrum-background-layer-2-color: var(--spectrum-gray-100); + --spectrum-neutral-background-color-default: var(--spectrum-gray-400); + --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); + --spectrum-neutral-background-color-down: var(--spectrum-gray-200); + --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-300 + ); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-500); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-400); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-300); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-400 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-500 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-400 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-300 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-400 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-500 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-400 + ); + --spectrum-negative-background-color-down: var(--spectrum-negative-color-300); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-400 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-500 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-400 + ); + --spectrum-positive-background-color-down: var(--spectrum-positive-color-300); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-400 + ); + --spectrum-notice-background-color-default: var(--spectrum-notice-color-800); + --spectrum-gray-background-color-default: var(--spectrum-gray-700); + --spectrum-red-background-color-default: var(--spectrum-red-700); + --spectrum-orange-background-color-default: var(--spectrum-orange-800); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-900 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-800); + --spectrum-green-background-color-default: var(--spectrum-green-700); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); + --spectrum-blue-background-color-default: var(--spectrum-blue-700); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); + --spectrum-purple-background-color-default: var(--spectrum-purple-700); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); + --spectrum-neutral-visual-color: var(--spectrum-gray-600); + --spectrum-accent-visual-color: var(--spectrum-accent-color-900); + --spectrum-informative-visual-color: var(--spectrum-informative-color-900); + --spectrum-negative-visual-color: var(--spectrum-negative-color-700); + --spectrum-notice-visual-color: var(--spectrum-notice-color-900); + --spectrum-positive-visual-color: var(--spectrum-positive-color-800); + --spectrum-gray-visual-color: var(--spectrum-gray-600); + --spectrum-red-visual-color: var(--spectrum-red-700); + --spectrum-orange-visual-color: var(--spectrum-orange-900); + --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color: var(--spectrum-celery-800); + --spectrum-green-visual-color: var(--spectrum-green-800); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color: var(--spectrum-cyan-900); + --spectrum-blue-visual-color: var(--spectrum-blue-900); + --spectrum-indigo-visual-color: var(--spectrum-indigo-900); + --spectrum-purple-visual-color: var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color: var(--spectrum-magenta-900); + --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); + --spectrum-gray-50-rgb: 29, 29, 29; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 38, 38, 38; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 50, 50, 50; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 63, 63, 63; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 84, 84, 84; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 112, 112, 112; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 144, 144, 144; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 178, 178, 178; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 209, 209, 209; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 235, 235, 235; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 255, 255, 255; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb: 0, 56, 119; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 0, 65, 138; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 0, 77, 163; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 0, 89, 194; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 3, 103, 224; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 19, 121, 243; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 52, 143, 244; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 84, 163, 246; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 114, 183, 249; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 143, 202, 252; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 174, 219, 254; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 204, 233, 255; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 232, 246, 255; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 255, 255, 255; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb: 123, 0, 0; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 141, 0, 0; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 165, 0, 0; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 190, 4, 3; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 215, 25, 19; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 234, 56, 41; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 246, 88, 67; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 255, 117, 94; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 255, 149, 129; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 255, 176, 161; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 255, 201, 189; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 255, 222, 216; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 255, 241, 238; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 255, 255, 255; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb: 102, 37, 0; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 117, 45, 0; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 137, 55, 0; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 158, 66, 0; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 180, 78, 0; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 202, 93, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 225, 109, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 244, 129, 12; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 254, 154, 46; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 255, 181, 88; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 253, 206, 136; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 255, 225, 179; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 255, 242, 221; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 255, 253, 249; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb: 76, 54, 0; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 88, 64, 0; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 103, 76, 0; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 119, 89, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 136, 104, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 155, 120, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 174, 137, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 192, 156, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 211, 174, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 228, 194, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 244, 213, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 249, 232, 92; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 252, 246, 187; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 255, 255, 255; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb: 48, 64, 0; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 55, 74, 0; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 65, 87, 0; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 76, 102, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 89, 118, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 102, 136, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 117, 154, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 132, 173, 1; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 148, 192, 8; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 166, 211, 18; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 184, 229, 37; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 205, 245, 71; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 231, 254, 154; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 255, 255, 255; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb: 0, 69, 10; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 0, 80, 12; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 0, 94, 14; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 0, 109, 15; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 0, 127, 15; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 0, 145, 18; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 4, 165, 30; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 34, 184, 51; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 68, 202, 73; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 105, 220, 99; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 142, 235, 127; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 180, 247, 162; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 221, 253, 211; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 255, 255, 255; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb: 4, 67, 41; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 0, 78, 47; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 0, 92, 56; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 0, 108, 67; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 0, 125, 78; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 0, 143, 93; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 18, 162, 108; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 43, 180, 125; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 67, 199, 143; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 94, 217, 162; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 129, 233, 184; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 177, 244, 209; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 223, 250, 234; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 254, 255, 252; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb: 18, 65, 63; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 14, 76, 73; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 4, 90, 87; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 0, 105, 101; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 0, 122, 117; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 0, 140, 135; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 0, 158, 152; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 3, 178, 171; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 54, 197, 189; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 93, 214, 207; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 132, 230, 223; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 176, 242, 236; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 223, 249, 246; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 254, 255, 254; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb: 0, 61, 98; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 0, 71, 111; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 0, 85, 127; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 0, 100, 145; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 0, 116, 162; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 0, 134, 180; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 0, 153, 198; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 14, 173, 215; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 44, 193, 230; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 84, 211, 241; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 127, 228, 249; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 167, 241, 255; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 215, 250, 255; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 255, 255, 255; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb: 40, 44, 140; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 47, 52, 163; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 57, 63, 187; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 70, 75, 211; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 85, 91, 231; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 104, 109, 244; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 124, 129, 251; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 145, 149, 255; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 167, 170, 255; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 188, 190, 255; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 208, 210, 255; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 226, 228, 255; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 243, 243, 254; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 255, 255, 255; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb: 76, 13, 157; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 89, 17, 177; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 105, 28, 200; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 122, 45, 218; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 140, 65, 233; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 157, 87, 243; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 172, 111, 249; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 187, 135, 251; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 202, 159, 252; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 215, 182, 254; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 228, 204, 254; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 239, 223, 255; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 249, 240, 255; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 255, 253, 255; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb: 107, 3, 106; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 123, 0, 123; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 144, 0, 145; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 165, 13, 166; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 185, 37, 185; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 205, 57, 206; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 223, 81, 224; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 235, 110, 236; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 244, 140, 242; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 250, 168, 245; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 254, 194, 248; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 255, 219, 250; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 255, 239, 252; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 255, 253, 255; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb: 118, 0, 58; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 137, 0, 66; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 160, 0, 77; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 182, 18, 90; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 203, 38, 109; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 222, 61, 130; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 237, 87, 149; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 249, 114, 167; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 255, 143, 185; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 255, 172, 202; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 255, 198, 218; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 255, 221, 233; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 255, 240, 245; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 255, 252, 253; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); } diff --git a/tools/styles/tokens/darkest-vars.css b/tools/styles/tokens/darkest-vars.css index 0762b84cc4..cbc6badd1f 100644 --- a/tools/styles/tokens/darkest-vars.css +++ b/tools/styles/tokens/darkest-vars.css @@ -1,499 +1,489 @@ :host, :root { - --spectrum-overlay-opacity: 0.6; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.8; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); - --spectrum-background-base-color: var(--spectrum-gray-50); - --spectrum-background-layer-1-color: var(--spectrum-gray-75); - --spectrum-background-layer-2-color: var(--spectrum-gray-100); - --spectrum-neutral-background-color-default: var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-400 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-300 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-600 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-500); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-400); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-500 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-600 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-500 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-400 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-500 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-600 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-500 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-400 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-500 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-600 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-500 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-400 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-500 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-800 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-700); - --spectrum-orange-background-color-default: var(--spectrum-orange-800); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-900 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-800); - --spectrum-green-background-color-default: var(--spectrum-green-700); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); - --spectrum-blue-background-color-default: var(--spectrum-blue-700); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); - --spectrum-purple-background-color-default: var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); - --spectrum-neutral-visual-color: var(--spectrum-gray-600); - --spectrum-accent-visual-color: var(--spectrum-accent-color-900); - --spectrum-informative-visual-color: var(--spectrum-informative-color-900); - --spectrum-negative-visual-color: var(--spectrum-negative-color-700); - --spectrum-notice-visual-color: var(--spectrum-notice-color-900); - --spectrum-positive-visual-color: var(--spectrum-positive-color-800); - --spectrum-gray-visual-color: var(--spectrum-gray-600); - --spectrum-red-visual-color: var(--spectrum-red-700); - --spectrum-orange-visual-color: var(--spectrum-orange-900); - --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color: var(--spectrum-celery-800); - --spectrum-green-visual-color: var(--spectrum-green-800); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color: var(--spectrum-cyan-900); - --spectrum-blue-visual-color: var(--spectrum-blue-900); - --spectrum-indigo-visual-color: var(--spectrum-indigo-900); - --spectrum-purple-visual-color: var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color: var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); - --spectrum-gray-50-rgb: 0, 0, 0; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 14, 14, 14; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 29, 29, 29; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 48, 48, 48; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 75, 75, 75; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 106, 106, 106; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 141, 141, 141; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 176, 176, 176; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 208, 208, 208; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 235, 235, 235; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 255, 255, 255; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb: 0, 38, 81; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 0, 50, 106; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 0, 64, 135; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 0, 78, 166; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 0, 92, 200; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 6, 108, 231; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 29, 128, 245; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 64, 150, 243; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 94, 170, 247; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 124, 189, 250; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 152, 206, 253; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 179, 222, 254; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 206, 234, 255; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 227, 243, 255; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb: 87, 0, 0; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 110, 0, 0; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 138, 0, 0; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 167, 0, 0; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 196, 7, 6; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 221, 33, 24; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 238, 67, 49; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 249, 99, 76; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 255, 129, 107; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 255, 158, 140; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 255, 183, 169; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 255, 205, 195; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 255, 223, 217; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 255, 237, 234; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb: 72, 24, 1; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 92, 32, 0; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 115, 43, 0; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 138, 55, 0; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 162, 68, 0; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 186, 82, 0; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 210, 98, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 232, 116, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 249, 137, 23; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 255, 162, 59; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 255, 188, 102; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 253, 210, 145; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 255, 226, 181; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 255, 239, 213; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb: 53, 36, 0; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 68, 47, 0; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 86, 62, 0; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 103, 77, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 122, 92, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 141, 108, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 161, 126, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 180, 144, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 199, 162, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 216, 181, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 233, 199, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 247, 216, 4; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 249, 233, 97; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 252, 243, 170; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb: 32, 43, 0; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 42, 56, 0; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 54, 72, 0; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 66, 88, 0; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 79, 105, 0; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 93, 123, 0; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 107, 142, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 122, 161, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 138, 180, 3; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 154, 198, 11; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 170, 216, 22; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 187, 232, 41; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 205, 246, 72; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 225, 253, 132; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb: 0, 47, 7; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 0, 61, 9; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 0, 77, 12; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 0, 95, 15; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 0, 113, 15; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 0, 132, 15; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 0, 151, 20; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 13, 171, 37; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 45, 191, 58; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 80, 208, 82; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 115, 224, 107; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 147, 237, 131; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 180, 247, 162; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 213, 252, 202; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb: 10, 44, 28; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 7, 59, 36; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 0, 76, 46; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 0, 93, 57; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 0, 111, 69; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 0, 130, 82; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 0, 149, 98; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 28, 168, 114; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 52, 187, 132; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 75, 205, 149; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 103, 222, 168; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 137, 236, 188; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 177, 244, 209; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 214, 249, 228; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb: 18, 43, 42; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 19, 57, 55; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 16, 73, 70; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 3, 91, 88; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 0, 108, 104; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 0, 127, 121; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 0, 146, 140; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 0, 165, 159; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 26, 185, 178; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 66, 202, 195; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 102, 218, 211; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 139, 232, 225; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 179, 242, 237; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 215, 248, 244; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb: 0, 41, 68; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 0, 54, 88; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 0, 69, 108; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 0, 86, 128; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 0, 103, 147; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 0, 121, 167; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 0, 140, 186; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 4, 160, 205; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 23, 180, 221; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 57, 199, 234; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 96, 216, 243; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 134, 230, 250; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 170, 242, 255; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 206, 249, 255; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb: 26, 29, 97; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 35, 39, 125; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 46, 50, 158; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 58, 63, 189; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 73, 78, 216; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 90, 96, 235; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 110, 115, 246; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 132, 136, 253; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 153, 157, 255; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 174, 177, 255; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 194, 196, 255; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 212, 213, 255; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 227, 228, 255; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 240, 240, 255; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb: 50, 16, 104; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 67, 13, 140; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 86, 16, 173; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 106, 29, 200; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 126, 49, 222; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 145, 70, 236; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 162, 94, 246; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 178, 119, 250; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 192, 143, 252; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 206, 166, 253; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 219, 188, 254; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 230, 207, 255; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 240, 224, 255; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 248, 237, 255; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb: 70, 14, 68; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 93, 9, 92; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 120, 0, 120; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 146, 0, 147; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 169, 19, 170; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 191, 43, 191; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 211, 65, 213; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 228, 91, 229; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 239, 120, 238; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 246, 149, 243; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 251, 175, 246; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 254, 199, 248; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 255, 220, 250; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 255, 235, 252; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb: 83, 3, 41; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 106, 0, 52; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 133, 0, 65; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 161, 0, 78; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 186, 22, 93; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 209, 43, 114; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 227, 69, 137; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 241, 97, 156; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 252, 124, 173; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 255, 152, 191; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 255, 179, 207; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 255, 202, 221; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 255, 221, 233; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 255, 236, 243; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); + --spectrum-overlay-opacity: 0.6; + --spectrum-drop-shadow-color-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-opacity: 0.8; + --spectrum-drop-shadow-color: rgba( + var(--spectrum-drop-shadow-color-rgb), + var(--spectrum-drop-shadow-color-opacity) + ); + --spectrum-background-base-color: var(--spectrum-gray-50); + --spectrum-background-layer-1-color: var(--spectrum-gray-75); + --spectrum-background-layer-2-color: var(--spectrum-gray-100); + --spectrum-neutral-background-color-default: var(--spectrum-gray-400); + --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); + --spectrum-neutral-background-color-down: var(--spectrum-gray-200); + --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-300 + ); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-600); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-500); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-400); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-500 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-600 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-500 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-400 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-500 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-600 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-500 + ); + --spectrum-negative-background-color-down: var(--spectrum-negative-color-400); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-500 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-600 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-500 + ); + --spectrum-positive-background-color-down: var(--spectrum-positive-color-400); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-500 + ); + --spectrum-notice-background-color-default: var(--spectrum-notice-color-800); + --spectrum-gray-background-color-default: var(--spectrum-gray-700); + --spectrum-red-background-color-default: var(--spectrum-red-700); + --spectrum-orange-background-color-default: var(--spectrum-orange-800); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-900 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-800); + --spectrum-green-background-color-default: var(--spectrum-green-700); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); + --spectrum-blue-background-color-default: var(--spectrum-blue-700); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); + --spectrum-purple-background-color-default: var(--spectrum-purple-700); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); + --spectrum-neutral-visual-color: var(--spectrum-gray-600); + --spectrum-accent-visual-color: var(--spectrum-accent-color-900); + --spectrum-informative-visual-color: var(--spectrum-informative-color-900); + --spectrum-negative-visual-color: var(--spectrum-negative-color-700); + --spectrum-notice-visual-color: var(--spectrum-notice-color-900); + --spectrum-positive-visual-color: var(--spectrum-positive-color-800); + --spectrum-gray-visual-color: var(--spectrum-gray-600); + --spectrum-red-visual-color: var(--spectrum-red-700); + --spectrum-orange-visual-color: var(--spectrum-orange-900); + --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color: var(--spectrum-celery-800); + --spectrum-green-visual-color: var(--spectrum-green-800); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color: var(--spectrum-cyan-900); + --spectrum-blue-visual-color: var(--spectrum-blue-900); + --spectrum-indigo-visual-color: var(--spectrum-indigo-900); + --spectrum-purple-visual-color: var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color: var(--spectrum-magenta-900); + --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); + --spectrum-gray-50-rgb: 0, 0, 0; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 14, 14, 14; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 29, 29, 29; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 48, 48, 48; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 75, 75, 75; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 106, 106, 106; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 141, 141, 141; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 176, 176, 176; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 208, 208, 208; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 235, 235, 235; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 255, 255, 255; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb: 0, 38, 81; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 0, 50, 106; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 0, 64, 135; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 0, 78, 166; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 0, 92, 200; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 6, 108, 231; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 29, 128, 245; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 64, 150, 243; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 94, 170, 247; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 124, 189, 250; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 152, 206, 253; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 179, 222, 254; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 206, 234, 255; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 227, 243, 255; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb: 87, 0, 0; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 110, 0, 0; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 138, 0, 0; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 167, 0, 0; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 196, 7, 6; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 221, 33, 24; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 238, 67, 49; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 249, 99, 76; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 255, 129, 107; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 255, 158, 140; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 255, 183, 169; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 255, 205, 195; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 255, 223, 217; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 255, 237, 234; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb: 72, 24, 1; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 92, 32, 0; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 115, 43, 0; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 138, 55, 0; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 162, 68, 0; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 186, 82, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 210, 98, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 232, 116, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 249, 137, 23; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 255, 162, 59; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 255, 188, 102; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 253, 210, 145; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 255, 226, 181; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 255, 239, 213; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb: 53, 36, 0; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 68, 47, 0; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 86, 62, 0; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 103, 77, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 122, 92, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 141, 108, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 161, 126, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 180, 144, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 199, 162, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 216, 181, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 233, 199, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 247, 216, 4; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 249, 233, 97; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 252, 243, 170; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb: 32, 43, 0; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 42, 56, 0; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 54, 72, 0; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 66, 88, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 79, 105, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 93, 123, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 107, 142, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 122, 161, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 138, 180, 3; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 154, 198, 11; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 170, 216, 22; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 187, 232, 41; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 205, 246, 72; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 225, 253, 132; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb: 0, 47, 7; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 0, 61, 9; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 0, 77, 12; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 0, 95, 15; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 0, 113, 15; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 0, 132, 15; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 0, 151, 20; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 13, 171, 37; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 45, 191, 58; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 80, 208, 82; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 115, 224, 107; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 147, 237, 131; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 180, 247, 162; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 213, 252, 202; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb: 10, 44, 28; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 7, 59, 36; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 0, 76, 46; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 0, 93, 57; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 0, 111, 69; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 0, 130, 82; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 0, 149, 98; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 28, 168, 114; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 52, 187, 132; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 75, 205, 149; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 103, 222, 168; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 137, 236, 188; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 177, 244, 209; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 214, 249, 228; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb: 18, 43, 42; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 19, 57, 55; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 16, 73, 70; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 3, 91, 88; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 0, 108, 104; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 0, 127, 121; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 0, 146, 140; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 0, 165, 159; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 26, 185, 178; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 66, 202, 195; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 102, 218, 211; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 139, 232, 225; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 179, 242, 237; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 215, 248, 244; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb: 0, 41, 68; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 0, 54, 88; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 0, 69, 108; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 0, 86, 128; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 0, 103, 147; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 0, 121, 167; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 0, 140, 186; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 4, 160, 205; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 23, 180, 221; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 57, 199, 234; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 96, 216, 243; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 134, 230, 250; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 170, 242, 255; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 206, 249, 255; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb: 26, 29, 97; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 35, 39, 125; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 46, 50, 158; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 58, 63, 189; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 73, 78, 216; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 90, 96, 235; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 110, 115, 246; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 132, 136, 253; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 153, 157, 255; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 174, 177, 255; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 194, 196, 255; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 212, 213, 255; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 227, 228, 255; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 240, 240, 255; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb: 50, 16, 104; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 67, 13, 140; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 86, 16, 173; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 106, 29, 200; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 126, 49, 222; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 145, 70, 236; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 162, 94, 246; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 178, 119, 250; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 192, 143, 252; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 206, 166, 253; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 219, 188, 254; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 230, 207, 255; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 240, 224, 255; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 248, 237, 255; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb: 70, 14, 68; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 93, 9, 92; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 120, 0, 120; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 146, 0, 147; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 169, 19, 170; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 191, 43, 191; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 211, 65, 213; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 228, 91, 229; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 239, 120, 238; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 246, 149, 243; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 251, 175, 246; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 254, 199, 248; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 255, 220, 250; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 255, 235, 252; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb: 83, 3, 41; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 106, 0, 52; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 133, 0, 65; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 161, 0, 78; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 186, 22, 93; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 209, 43, 114; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 227, 69, 137; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 241, 97, 156; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 252, 124, 173; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 255, 152, 191; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 255, 179, 207; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 255, 202, 221; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 255, 221, 233; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 255, 236, 243; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); } diff --git a/tools/styles/tokens/express/custom-large-vars.css b/tools/styles/tokens/express/custom-large-vars.css index b5e1ea6d01..5ed721cf73 100644 --- a/tools/styles/tokens/express/custom-large-vars.css +++ b/tools/styles/tokens/express/custom-large-vars.css @@ -1,11 +1,11 @@ :host, :root { - --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; + --spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0"; + --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; - --spectrum-dialog-confirm-border-radius: 8px; + --spectrum-dialog-confirm-border-radius: 8px; - --spectrum-dial-border-radius: 15px; + --spectrum-dial-border-radius: 15px; - --spectrum-assetcard-focus-ring-border-radius: 12px; + --spectrum-assetcard-focus-ring-border-radius: 12px; } diff --git a/tools/styles/tokens/express/custom-medium-vars.css b/tools/styles/tokens/express/custom-medium-vars.css index 031b3e02a4..85a31e0261 100644 --- a/tools/styles/tokens/express/custom-medium-vars.css +++ b/tools/styles/tokens/express/custom-medium-vars.css @@ -1,11 +1,11 @@ :host, :root { - --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; + --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - --spectrum-dialog-confirm-border-radius: 6px; + --spectrum-dialog-confirm-border-radius: 6px; - --spectrum-dial-border-radius: 12px; + --spectrum-dial-border-radius: 12px; - --spectrum-assetcard-focus-ring-border-radius: 10px; + --spectrum-assetcard-focus-ring-border-radius: 10px; } diff --git a/tools/styles/tokens/express/custom-vars.css b/tools/styles/tokens/express/custom-vars.css index a331202e96..491fbe01b4 100644 --- a/tools/styles/tokens/express/custom-vars.css +++ b/tools/styles/tokens/express/custom-vars.css @@ -1,4 +1,4 @@ :host, :root { - --system: express; + --system: express; } diff --git a/tools/styles/tokens/express/dark-vars.css b/tools/styles/tokens/express/dark-vars.css index 667dfefee0..e11302c6c4 100644 --- a/tools/styles/tokens/express/dark-vars.css +++ b/tools/styles/tokens/express/dark-vars.css @@ -1,14 +1,12 @@ :host, :root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); + --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); + --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-indigo-700 + ); } diff --git a/tools/styles/tokens/express/darkest-vars.css b/tools/styles/tokens/express/darkest-vars.css index 667dfefee0..e11302c6c4 100644 --- a/tools/styles/tokens/express/darkest-vars.css +++ b/tools/styles/tokens/express/darkest-vars.css @@ -1,14 +1,12 @@ :host, :root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); + --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); + --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-indigo-700 + ); } diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css index c778395840..81fe201749 100644 --- a/tools/styles/tokens/express/global-vars.css +++ b/tools/styles/tokens/express/global-vars.css @@ -1,7288 +1,6955 @@ :host, :root { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-900 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-900 - ); - --spectrum-slider-track-thickness: 4px; - --spectrum-slider-handle-gap: 0px; - --spectrum-picker-border-width: 0; - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px; - --spectrum-in-field-button-edge-to-fill: 4px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px; - --spectrum-border-width-100: 2px; - --spectrum-accent-color-100: var(--spectrum-indigo-100); - --spectrum-accent-color-200: var(--spectrum-indigo-200); - --spectrum-accent-color-300: var(--spectrum-indigo-300); - --spectrum-accent-color-400: var(--spectrum-indigo-400); - --spectrum-accent-color-500: var(--spectrum-indigo-500); - --spectrum-accent-color-600: var(--spectrum-indigo-600); - --spectrum-accent-color-700: var(--spectrum-indigo-700); - --spectrum-accent-color-800: var(--spectrum-indigo-800); - --spectrum-accent-color-900: var(--spectrum-indigo-900); - --spectrum-accent-color-1000: var(--spectrum-indigo-1000); - --spectrum-accent-color-1100: var(--spectrum-indigo-1100); - --spectrum-accent-color-1200: var(--spectrum-indigo-1200); - --spectrum-accent-color-1300: var(--spectrum-indigo-1300); - --spectrum-accent-color-1400: var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --system: express; + --spectrum-neutral-background-color-selected-default: var( + --spectrum-gray-800 + ); + --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus: var( + --spectrum-gray-900 + ); + --spectrum-slider-track-thickness: 4px; + --spectrum-slider-handle-gap: 0px; + --spectrum-picker-border-width: 0; + --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px; + --spectrum-in-field-button-edge-to-fill: 4px; + --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px; + --spectrum-border-width-100: 2px; + --spectrum-accent-color-100: var(--spectrum-indigo-100); + --spectrum-accent-color-200: var(--spectrum-indigo-200); + --spectrum-accent-color-300: var(--spectrum-indigo-300); + --spectrum-accent-color-400: var(--spectrum-indigo-400); + --spectrum-accent-color-500: var(--spectrum-indigo-500); + --spectrum-accent-color-600: var(--spectrum-indigo-600); + --spectrum-accent-color-700: var(--spectrum-indigo-700); + --spectrum-accent-color-800: var(--spectrum-indigo-800); + --spectrum-accent-color-900: var(--spectrum-indigo-900); + --spectrum-accent-color-1000: var(--spectrum-indigo-1000); + --spectrum-accent-color-1100: var(--spectrum-indigo-1100); + --spectrum-accent-color-1200: var(--spectrum-indigo-1200); + --spectrum-accent-color-1300: var(--spectrum-indigo-1300); + --spectrum-accent-color-1400: var(--spectrum-indigo-1400); + --spectrum-heading-sans-serif-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --system: express; } :host, :root { - --system-accordion-item-width: var(--spectrum-accordion-minimum-width); - --system-accordion-disclosure-indicator-to-text-space: var( - --spectrum-accordion-disclosure-indicator-to-text - ); - --system-accordion-edge-to-disclosure-indicator-space: var( - --spectrum-accordion-edge-to-disclosure-indicator - ); - --system-accordion-edge-to-text-space: var( - --spectrum-accordion-edge-to-text - ); - --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-accordion-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-accordion-corner-radius: var(--spectrum-corner-radius-100); - --system-accordion-item-content-area-top-to-content: var( - --spectrum-accordion-content-area-top-to-content - ); - --system-accordion-item-content-area-bottom-to-content: var( - --spectrum-accordion-content-area-bottom-to-content - ); - --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --system-accordion-item-header-font-weight: var( - --spectrum-bold-font-weight - ); - --system-accordion-item-header-font-style: var( - --spectrum-default-font-style - ); - --system-accordion-item-header-line-height: 1.25; - --system-accordion-item-content-font: var( - --spectrum-sans-font-family-stack - ); - --system-accordion-item-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-accordion-item-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-accordion-item-content-line-height: var( - --spectrum-line-height-100 - ); - --system-accordion-background-color-default: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) - ); - --system-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) - ); - --system-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) - ); - --system-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) - ); - --system-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-accordion-item-header-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-color: var(--spectrum-body-color); - --system-accordion-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-accordion-divider-color: var(--spectrum-gray-300); - --system-accordion-item-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-content-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-height: var(--spectrum-component-height-200); - --system-accordion-size-m-item-height: var(--spectrum-component-height-200); - --system-accordion-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-size-m-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-size-m-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-item-header-font-size: var(--spectrum-font-size-300); - --system-accordion-size-m-item-header-font-size: var( - --spectrum-font-size-300 - ); - --system-accordion-item-content-font-size: var(--spectrum-body-size-s); - --system-accordion-size-m-item-content-font-size: var( - --spectrum-body-size-s - ); - --system-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-s-item-height: var(--spectrum-component-height-100); - --system-accordion-size-s-disclosure-indicator-height: var( - --spectrum-component-height-75 - ); - --system-accordion-size-s-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 - ); - --system-accordion-size-s-item-header-font-size: var( - --spectrum-font-size-200 - ); - --system-accordion-size-s-item-content-font-size: var( - --spectrum-body-size-xs - ); - --system-accordion-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small - ); - --system-accordion-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small - ); - --system-accordion-size-l-item-height: var(--spectrum-component-height-300); - --system-accordion-size-l-disclosure-indicator-height: var( - --spectrum-component-height-200 - ); - --system-accordion-size-l-component-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-accordion-size-l-item-header-font-size: var( - --spectrum-font-size-500 - ); - --system-accordion-size-l-item-content-font-size: var( - --spectrum-body-size-m - ); - --system-accordion-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-large - ); - --system-accordion-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-large - ); - --system-accordion-size-xl-item-height: var( - --spectrum-component-height-400 - ); - --system-accordion-size-xl-disclosure-indicator-height: var( - --spectrum-component-height-300 - ); - --system-accordion-size-xl-component-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-accordion-size-xl-item-header-font-size: var( - --spectrum-font-size-700 - ); - --system-accordion-size-xl-item-content-font-size: var( - --spectrum-body-size-l - ); - --system-accordion-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-extra-large - ); - --system-accordion-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-extra-large - ); - --system-accordion-compact-size-s-item-height: var( - --spectrum-component-height-75 - ); - --system-accordion-compact-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-small - ); - --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-small - ); - --system-accordion-compact-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-size-m-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-l-item-height: var( - --spectrum-component-height-200 - ); - --system-accordion-compact-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-large - ); - --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-large - ); - --system-accordion-compact-size-xl-item-height: var( - --spectrum-component-height-300 - ); - --system-accordion-compact-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-extra-large - ); - --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-extra-large - ); - --system-accordion-spacious-size-s-item-header-line-height: 1.25; - --system-accordion-spacious-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-small-top-to-text-spacious - ); - --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-small - ); - --system-accordion-spacious-item-header-line-height: 1.278; - --system-accordion-spacious-size-m-item-header-line-height: 1.278; - --system-accordion-spacious-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-l-item-header-line-height: 1.273; - --system-accordion-spacious-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-large - ); - --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-large - ); - --system-accordion-spacious-size-xl-item-header-line-height: 1.25; - --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-extra-large - ); - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-extra-large - ); + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text + ); + --system-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator + ); + --system-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content + ); + --system-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); + --system-accordion-item-header-font-style: var(--spectrum-default-font-style); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-accordion-item-content-line-height: var(--spectrum-line-height-100); + --system-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --system-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --system-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --system-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) + ); + --system-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-accordion-item-header-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-accordion-item-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-item-content-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-size-m-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-size-m-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var( + --spectrum-font-size-300 + ); + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var( + --spectrum-component-height-75 + ); + --system-accordion-size-s-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); + --system-accordion-size-s-item-header-font-size: var( + --spectrum-font-size-200 + ); + --system-accordion-size-s-item-content-font-size: var( + --spectrum-body-size-xs + ); + --system-accordion-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small + ); + --system-accordion-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small + ); + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var( + --spectrum-component-height-200 + ); + --system-accordion-size-l-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-accordion-size-l-item-header-font-size: var( + --spectrum-font-size-500 + ); + --system-accordion-size-l-item-content-font-size: var(--spectrum-body-size-m); + --system-accordion-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large + ); + --system-accordion-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large + ); + --system-accordion-size-xl-item-height: var(--spectrum-component-height-400); + --system-accordion-size-xl-disclosure-indicator-height: var( + --spectrum-component-height-300 + ); + --system-accordion-size-xl-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-accordion-size-xl-item-header-font-size: var( + --spectrum-font-size-700 + ); + --system-accordion-size-xl-item-content-font-size: var( + --spectrum-body-size-l + ); + --system-accordion-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large + ); + --system-accordion-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large + ); + --system-accordion-compact-size-s-item-height: var( + --spectrum-component-height-75 + ); + --system-accordion-compact-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small + ); + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small + ); + --system-accordion-compact-item-height: var(--spectrum-component-height-100); + --system-accordion-compact-size-m-item-height: var( + --spectrum-component-height-100 + ); + --system-accordion-compact-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-l-item-height: var( + --spectrum-component-height-200 + ); + --system-accordion-compact-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large + ); + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large + ); + --system-accordion-compact-size-xl-item-height: var( + --spectrum-component-height-300 + ); + --system-accordion-compact-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large + ); + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large + ); + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious + ); + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large + ); } :host, :root { - --system-action-bar-height: var(--spectrum-action-bar-height); - --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); - --system-action-bar-item-counter-line-height: var( - --spectrum-line-height-100 - ); - --system-action-bar-item-counter-color: var( - --spectrum-neutral-content-color-default - ); - --system-action-bar-item-counter-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-action-bar-popover-background-color: var(--spectrum-gray-50); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); - --system-action-bar-emphasized-background-color: var( - --spectrum-informative-background-color-default - ); - --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); - --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); - --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); - --system-action-bar-spacing-item-counter-top: var( - --spectrum-action-bar-top-to-item-counter - ); - --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); - --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); - --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var(--spectrum-line-height-100); + --system-action-bar-item-counter-color: var( + --spectrum-neutral-content-color-default + ); + --system-action-bar-item-counter-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var( + --spectrum-informative-background-color-default + ); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var( + --spectrum-action-bar-top-to-item-counter + ); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); } :host, :root { - --system-action-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-action-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-action-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-action-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-action-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-action-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-action-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-action-button-background-color-default: var(--spectrum-gray-200); - --system-action-button-background-color-hover: var(--spectrum-gray-300); - --system-action-button-background-color-down: var(--spectrum-gray-400); - --system-action-button-background-color-focus: var(--spectrum-gray-300); - --system-action-button-border-color-default: transparent; - --system-action-button-border-color-hover: transparent; - --system-action-button-border-color-down: transparent; - --system-action-button-border-color-focus: transparent; - --system-action-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-action-button-border-color-disabled: transparent; - --system-action-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-action-button-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-400 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-selected-background-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-action-button-selected-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-hover: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-down: var(--spectrum-gray-50); - --system-action-button-selected-content-color-focus: var( - --spectrum-gray-50 - ); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-action-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-action-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-action-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-action-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-action-button-selected-emphasized-content-color-default: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-hover: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-down: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-default: transparent; - --system-action-button-static-black-border-color-hover: transparent; - --system-action-button-static-black-border-color-down: transparent; - --system-action-button-static-black-border-color-focus: transparent; - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-action-button-static-black-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-action-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-action-button-static-black-selected-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-action-button-static-black-selected-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-black-selected-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-selected-emphasized-background-color-default: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-emphasized-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-down: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-focus: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-static-black-selected-emphasized-content-color-hover: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-down: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-focus: var( - --spectrum-gray-900 - ); - --system-action-button-static-white-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-default: transparent; - --system-action-button-static-white-border-color-hover: transparent; - --system-action-button-static-white-border-color-down: transparent; - --system-action-button-static-white-border-color-focus: transparent; - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-action-button-static-white-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-action-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-action-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-action-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-disabled: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-selected-border-color-disabled: transparent; - --system-action-button-static-white-selected-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-white-selected-emphasized-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-emphasized-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-size-m-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-size-m-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-action-button-size-m-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-size-m-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-size-m-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-m-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-xs-min-width: calc( - var(--spectrum-component-edge-to-visual-only-50) * 2 + - var(--spectrum-workflow-icon-size-50) - ); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var( - --spectrum-text-to-visual-50 - ); - --system-action-button-size-xs-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-small - ); - --system-action-button-size-xs-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-50 - ); - --system-action-button-size-xs-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-50 - ); - --system-action-button-size-xs-edge-to-text-size: var( - --spectrum-component-edge-to-text-50 - ); - --system-action-button-size-s-min-width: calc( - var(--spectrum-component-edge-to-visual-only-75) * 2 + - var(--spectrum-workflow-icon-size-75) - ); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-action-button-size-s-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-small - ); - --system-action-button-size-s-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-75 - ); - --system-action-button-size-s-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-action-button-size-s-edge-to-text-size: var( - --spectrum-component-edge-to-text-75 - ); - --system-action-button-size-l-min-width: calc( - var(--spectrum-component-edge-to-visual-only-200) * 2 + - var(--spectrum-workflow-icon-size-200) - ); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-action-button-size-l-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-large - ); - --system-action-button-size-l-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-200 - ); - --system-action-button-size-l-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-action-button-size-l-edge-to-text-size: var( - --spectrum-component-edge-to-text-200 - ); - --system-action-button-size-xl-min-width: calc( - var(--spectrum-component-edge-to-visual-only-300) * 2 + - var(--spectrum-workflow-icon-size-300) - ); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-action-button-size-xl-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-large - ); - --system-action-button-size-xl-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-300 - ); - --system-action-button-size-xl-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-action-button-size-xl-edge-to-text-size: var( - --spectrum-component-edge-to-text-300 - ); + --system-action-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-action-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-action-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-action-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-action-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-action-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-action-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-action-button-background-color-default: var(--spectrum-gray-200); + --system-action-button-background-color-hover: var(--spectrum-gray-300); + --system-action-button-background-color-down: var(--spectrum-gray-400); + --system-action-button-background-color-focus: var(--spectrum-gray-300); + --system-action-button-border-color-default: transparent; + --system-action-button-border-color-hover: transparent; + --system-action-button-border-color-down: transparent; + --system-action-button-border-color-focus: transparent; + --system-action-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-action-button-border-color-disabled: transparent; + --system-action-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-action-button-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-400); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-action-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-action-button-selected-background-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-action-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-action-button-selected-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-selected-content-color-hover: var(--spectrum-gray-50); + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var(--spectrum-gray-50); + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-action-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-action-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-action-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-action-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-action-button-selected-emphasized-content-color-default: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-hover: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-down: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: transparent; + --system-action-button-static-black-border-color-hover: transparent; + --system-action-button-static-black-border-color-down: transparent; + --system-action-button-static-black-border-color-focus: transparent; + --system-action-button-static-black-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-action-button-static-black-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-down: var(--spectrum-black); + --system-action-button-static-black-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-action-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-action-button-static-black-selected-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-action-button-static-black-selected-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-disabled: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-down: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-selected-emphasized-background-color-default: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-emphasized-background-color-hover: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-down: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-focus: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-static-black-selected-emphasized-content-color-hover: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-down: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-focus: var( + --spectrum-gray-900 + ); + --system-action-button-static-white-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: transparent; + --system-action-button-static-white-border-color-hover: transparent; + --system-action-button-static-white-border-color-down: transparent; + --system-action-button-static-white-border-color-focus: transparent; + --system-action-button-static-white-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-action-button-static-white-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-down: var(--spectrum-white); + --system-action-button-static-white-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-action-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-action-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-action-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-disabled: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-down: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-white-selected-emphasized-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-emphasized-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-size-m-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-size-m-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-action-button-size-m-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-size-m-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-size-m-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-m-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-xs-min-width: calc( + var(--spectrum-component-edge-to-visual-only-50) * 2 + + var(--spectrum-workflow-icon-size-50) + ); + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var( + --spectrum-text-to-visual-50 + ); + --system-action-button-size-xs-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-small + ); + --system-action-button-size-xs-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-50 + ); + --system-action-button-size-xs-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-50 + ); + --system-action-button-size-xs-edge-to-text-size: var( + --spectrum-component-edge-to-text-50 + ); + --system-action-button-size-s-min-width: calc( + var(--spectrum-component-edge-to-visual-only-75) * 2 + + var(--spectrum-workflow-icon-size-75) + ); + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-action-button-size-s-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-small + ); + --system-action-button-size-s-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-75 + ); + --system-action-button-size-s-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-action-button-size-s-edge-to-text-size: var( + --spectrum-component-edge-to-text-75 + ); + --system-action-button-size-l-min-width: calc( + var(--spectrum-component-edge-to-visual-only-200) * 2 + + var(--spectrum-workflow-icon-size-200) + ); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-action-button-size-l-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-large + ); + --system-action-button-size-l-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-200 + ); + --system-action-button-size-l-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-action-button-size-l-edge-to-text-size: var( + --spectrum-component-edge-to-text-200 + ); + --system-action-button-size-xl-min-width: calc( + var(--spectrum-component-edge-to-visual-only-300) * 2 + + var(--spectrum-workflow-icon-size-300) + ); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-action-button-size-xl-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-large + ); + --system-action-button-size-xl-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-300 + ); + --system-action-button-size-xl-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-300 + ); + --system-action-button-size-xl-edge-to-text-size: var( + --spectrum-component-edge-to-text-300 + ); } :host, :root { - --system-action-group-gap-size-compact: var(--spectrum-spacing-50); - --system-action-group-horizontal-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) - ); - --system-action-group-vertical-spacing-compact: calc( - -1px * var(--spectrum-spacing-50) - ); - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-m-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xs-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-xs-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); + --system-action-group-gap-size-compact: var(--spectrum-spacing-50); + --system-action-group-horizontal-spacing-compact: calc( + -1px * var(--spectrum-spacing-50) + ); + --system-action-group-vertical-spacing-compact: calc( + -1px * var(--spectrum-spacing-50) + ); + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xs-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-xs-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); } :host, :root { - --system-alert-banner-neutral-background: var( - --spectrum-neutral-background-color-default - ); - --system-alert-banner-min-height: var( - --spectrum-alert-banner-minimum-height - ); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --system-alert-banner-informative-background: var( - --spectrum-informative-background-color-default - ); - --system-alert-banner-negative-background: var( - --spectrum-negative-background-color-default - ); - --system-alert-banner-font-color: var(--spectrum-white); + --system-alert-banner-neutral-background: var( + --spectrum-neutral-background-color-default + ); + --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --system-alert-banner-informative-background: var( + --spectrum-informative-background-color-default + ); + --system-alert-banner-negative-background: var( + --spectrum-negative-background-color-default + ); + --system-alert-banner-font-color: var(--spectrum-white); } :host, :root { - --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-dialog-warning-icon-color: var( - --spectrum-notice-visual-color - ); - --system-alert-dialog-error-icon-color: var( - --spectrum-negative-visual-color - ); - --system-alert-dialog-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-alert-dialog-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-alert-dialog-title-font-size: var( - --spectrum-alert-dialog-title-size - ); - --system-alert-dialog-title-line-height: var( - --spectrum-heading-line-height - ); - --system-alert-dialog-title-color: var(--spectrum-heading-color); - --system-alert-dialog-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-alert-dialog-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-alert-dialog-body-font-size: var( - --spectrum-alert-dialog-description-size - ); - --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --system-alert-dialog-body-color: var(--spectrum-body-color); - --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); + --system-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); + --system-alert-dialog-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-alert-dialog-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-alert-dialog-title-font-size: var( + --spectrum-alert-dialog-title-size + ); + --system-alert-dialog-title-line-height: var(--spectrum-heading-line-height); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-alert-dialog-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-alert-dialog-body-font-size: var( + --spectrum-alert-dialog-description-size + ); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); } :host, :root { - --system-asset-transition-duration: var(--spectrum-animation-duration-100); - --system-asset-folder-background-color: var(--spectrum-gray-300); - --system-asset-file-background-color: var(--spectrum-gray-50); - --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); } :host, :root { - --system-avatar-color-opacity: 1; - --system-avatar-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-block-size: var(--spectrum-avatar-size-100); - --system-avatar-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-avatar-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-avatar-color-opacity-disabled: var( - --spectrum-avatar-opacity-disabled - ); - --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); - --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); - --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); - --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); - --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); - --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); - --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); - --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); - --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); - --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); - --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); - --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); - --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); - --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); - --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); - --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); - --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-avatar-color-opacity-disabled: var( + --spectrum-avatar-opacity-disabled + ); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); } :host, :root { - --system-badge-corner-radius: var(--spectrum-corner-radius-100); - --system-badge-line-height: var(--spectrum-line-height-100); - --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-badge-label-icon-color: var(--spectrum-white); - --system-badge-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-badge-background-color-accent: var( - --spectrum-accent-background-color-default - ); - --system-badge-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-badge-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-badge-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-badge-background-color-notice: var( - --spectrum-notice-background-color-default - ); - --system-badge-background-color-gray: var( - --spectrum-gray-background-color-default - ); - --system-badge-background-color-red: var( - --spectrum-red-background-color-default - ); - --system-badge-background-color-orange: var( - --spectrum-orange-background-color-default - ); - --system-badge-background-color-yellow: var( - --spectrum-yellow-background-color-default - ); - --system-badge-background-color-chartreuse: var( - --spectrum-chartreuse-background-color-default - ); - --system-badge-background-color-celery: var( - --spectrum-celery-background-color-default - ); - --system-badge-background-color-green: var( - --spectrum-green-background-color-default - ); - --system-badge-background-color-seafoam: var( - --spectrum-seafoam-background-color-default - ); - --system-badge-background-color-cyan: var( - --spectrum-cyan-background-color-default - ); - --system-badge-background-color-blue: var( - --spectrum-blue-background-color-default - ); - --system-badge-background-color-indigo: var( - --spectrum-indigo-background-color-default - ); - --system-badge-background-color-purple: var( - --spectrum-purple-background-color-default - ); - --system-badge-background-color-fuchsia: var( - --spectrum-fuchsia-background-color-default - ); - --system-badge-background-color-magenta: var( - --spectrum-magenta-background-color-default - ); - --system-badge-height: var(--spectrum-component-height-100); - --system-badge-font-size: var(--spectrum-font-size-100); - --system-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-100 - ); - --system-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-100 - ); - --system-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-100 - ); - --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --system-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-100 - ); - --system-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-badge-orange-label-icon-color: var(--spectrum-black); - --system-badge-yellow-label-icon-color: var(--spectrum-black); - --system-badge-chartreuse-label-icon-color: var(--spectrum-black); - --system-badge-celery-label-icon-color: var(--spectrum-black); - --system-badge-gray-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-red-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-green-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-seafoam-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-cyan-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-blue-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-indigo-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-purple-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-fuchsia-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-magenta-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-size-s-height: var(--spectrum-component-height-75); - --system-badge-size-s-font-size: var(--spectrum-font-size-75); - --system-badge-size-s-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-75 - ); - --system-badge-size-s-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-75 - ); - --system-badge-size-s-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-75 - ); - --system-badge-size-s-workflow-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); - --system-badge-size-s-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-75 - ); - --system-badge-size-s-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-badge-size-s-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-badge-size-l-height: var(--spectrum-component-height-100); - --system-badge-size-l-font-size: var(--spectrum-font-size-200); - --system-badge-size-l-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-200 - ); - --system-badge-size-l-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-200 - ); - --system-badge-size-l-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-200 - ); - --system-badge-size-l-workflow-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); - --system-badge-size-l-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-200 - ); - --system-badge-size-l-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-badge-size-l-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-badge-size-xl-height: var(--spectrum-component-height-100); - --system-badge-size-xl-font-size: var(--spectrum-font-size-300); - --system-badge-size-xl-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-300 - ); - --system-badge-size-xl-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-300 - ); - --system-badge-size-xl-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-300 - ); - --system-badge-size-xl-workflow-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-badge-size-xl-icon-text-spacing: var( - --spectrum-text-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-badge-size-xl-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-300 - ); + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-badge-background-color-accent: var( + --spectrum-accent-background-color-default + ); + --system-badge-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-badge-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-badge-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-badge-background-color-notice: var( + --spectrum-notice-background-color-default + ); + --system-badge-background-color-gray: var( + --spectrum-gray-background-color-default + ); + --system-badge-background-color-red: var( + --spectrum-red-background-color-default + ); + --system-badge-background-color-orange: var( + --spectrum-orange-background-color-default + ); + --system-badge-background-color-yellow: var( + --spectrum-yellow-background-color-default + ); + --system-badge-background-color-chartreuse: var( + --spectrum-chartreuse-background-color-default + ); + --system-badge-background-color-celery: var( + --spectrum-celery-background-color-default + ); + --system-badge-background-color-green: var( + --spectrum-green-background-color-default + ); + --system-badge-background-color-seafoam: var( + --spectrum-seafoam-background-color-default + ); + --system-badge-background-color-cyan: var( + --spectrum-cyan-background-color-default + ); + --system-badge-background-color-blue: var( + --spectrum-blue-background-color-default + ); + --system-badge-background-color-indigo: var( + --spectrum-indigo-background-color-default + ); + --system-badge-background-color-purple: var( + --spectrum-purple-background-color-default + ); + --system-badge-background-color-fuchsia: var( + --spectrum-fuchsia-background-color-default + ); + --system-badge-background-color-magenta: var( + --spectrum-magenta-background-color-default + ); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-100 + ); + --system-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-100 + ); + --system-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-100 + ); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-100 + ); + --system-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-red-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-green-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-seafoam-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-cyan-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-blue-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-indigo-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-purple-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-fuchsia-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-magenta-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-75 + ); + --system-badge-size-s-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-75 + ); + --system-badge-size-s-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-75 + ); + --system-badge-size-s-workflow-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-75 + ); + --system-badge-size-s-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-badge-size-s-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-200 + ); + --system-badge-size-l-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-200 + ); + --system-badge-size-l-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-200 + ); + --system-badge-size-l-workflow-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-200 + ); + --system-badge-size-l-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-badge-size-l-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-300 + ); + --system-badge-size-xl-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-300 + ); + --system-badge-size-xl-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-300 + ); + --system-badge-size-xl-workflow-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-badge-size-xl-icon-text-spacing: var(--spectrum-text-to-visual-300); + --system-badge-size-xl-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-badge-size-xl-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-300 + ); } :host, :root { - --system-button-animation-duration: var(--spectrum-animation-duration-100); - --system-button-border-width: var(--spectrum-border-width-200); - --system-button-line-height: 1.2; - --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-button-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-button-background-color-default: var(--spectrum-gray-200); - --system-button-background-color-hover: var(--spectrum-gray-300); - --system-button-background-color-down: var(--spectrum-gray-400); - --system-button-background-color-focus: var(--spectrum-gray-300); - --system-button-border-color-default: transparent; - --system-button-border-color-hover: transparent; - --system-button-border-color-down: transparent; - --system-button-border-color-focus: transparent; - --system-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-border-color-disabled: transparent; - --system-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-accent-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 - ); - --system-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default - ); - --system-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down - ); - --system-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover - ); - --system-button-negative-background-color-down: var( - --spectrum-negative-background-color-down - ); - --system-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 - ); - --system-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 - ); - --system-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 - ); - --system-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default - ); - --system-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover - ); - --system-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down - ); - --system-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-white); - --system-button-primary-content-color-hover: var(--spectrum-white); - --system-button-primary-content-color-down: var(--spectrum-white); - --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-border-color-default: var( - --spectrum-gray-800 - ); - --system-button-primary-outline-border-color-hover: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-100); - --system-button-quiet-background-color-down: var(--spectrum-gray-200); - --system-button-quiet-background-color-focus: var(--spectrum-gray-100); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-static-white-content-color-default: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-hover: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-down: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-focus: var( - --spectrum-black - ); - --system-button-static-white-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-m-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-size-m-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-height: var(--spectrum-component-height-100); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-font-size: var(--spectrum-font-size-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-size-m-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --system-button-size-m-padding-label-to-icon: var( - --spectrum-text-to-visual-100 - ); - --system-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --system-button-size-m-top-to-text: var( - --spectrum-button-top-to-text-medium - ); - --system-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-size-m-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-size-m-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --system-button-size-m-intended-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-button-size-s-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-s-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--system-button-border-width) - ); - --system-button-size-s-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --system-button-size-s-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--system-button-border-width) - ); - --system-button-size-s-padding-label-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-button-size-s-top-to-text: var( - --spectrum-button-top-to-text-small - ); - --system-button-size-s-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --system-button-size-s-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-button-size-s-intended-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-button-size-l-min-width: calc( - var(--spectrum-component-height-200) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-l-border-radius: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-200) - - var(--system-button-border-width) - ); - --system-button-size-l-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-200 - ); - --system-button-size-l-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-200) - - var(--system-button-border-width) - ); - --system-button-size-l-padding-label-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-button-size-l-top-to-text: var( - --spectrum-button-top-to-text-large - ); - --system-button-size-l-bottom-to-text: var( - --spectrum-button-bottom-to-text-large - ); - --system-button-size-l-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-button-size-l-intended-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-button-size-xl-min-width: calc( - var(--spectrum-component-height-300) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-xl-border-radius: var( - --spectrum-component-pill-edge-to-text-300 - ); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-300 - ); - --system-button-size-xl-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-padding-label-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-button-size-xl-top-to-text: var( - --spectrum-button-top-to-text-extra-large - ); - --system-button-size-xl-bottom-to-text: var( - --spectrum-button-bottom-to-text-extra-large - ); - --system-button-size-xl-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-button-size-xl-intended-icon-size: var( - --spectrum-workflow-icon-size-300 - ); + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-background-color-default: var(--spectrum-gray-200); + --system-button-background-color-hover: var(--spectrum-gray-300); + --system-button-background-color-down: var(--spectrum-gray-400); + --system-button-background-color-focus: var(--spectrum-gray-300); + --system-button-border-color-default: transparent; + --system-button-border-color-hover: transparent; + --system-button-border-color-down: transparent; + --system-button-border-color-focus: transparent; + --system-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-border-color-disabled: transparent; + --system-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-white); + --system-button-primary-content-color-hover: var(--spectrum-white); + --system-button-primary-content-color-down: var(--spectrum-white); + --system-button-primary-content-color-focus: var(--spectrum-white); + --system-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-button-primary-outline-border-color-hover: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var(--spectrum-gray-900); + --system-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-background-color-default: var(--spectrum-gray-200); + --system-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-selected-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-static-white-content-color-default: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-hover: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-down: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-focus: var( + --spectrum-black + ); + --system-button-static-white-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-m-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-size-m-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-height: var(--spectrum-component-height-100); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-font-size: var(--spectrum-font-size-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-size-m-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --system-button-size-m-padding-label-to-icon: var( + --spectrum-text-to-visual-100 + ); + --system-button-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --system-button-size-m-bottom-to-text: var( + --spectrum-button-bottom-to-text-medium + ); + --system-button-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-size-m-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --system-button-size-m-intended-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-button-size-s-min-width: calc( + var(--spectrum-component-height-75) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-s-border-radius: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--system-button-border-width) + ); + --system-button-size-s-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --system-button-size-s-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--system-button-border-width) + ); + --system-button-size-s-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); + --system-button-size-s-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --system-button-size-s-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-button-size-s-intended-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-button-size-l-min-width: calc( + var(--spectrum-component-height-200) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-l-border-radius: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--system-button-border-width) + ); + --system-button-size-l-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-200 + ); + --system-button-size-l-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--system-button-border-width) + ); + --system-button-size-l-padding-label-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); + --system-button-size-l-bottom-to-text: var( + --spectrum-button-bottom-to-text-large + ); + --system-button-size-l-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-button-size-l-intended-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-button-size-xl-min-width: calc( + var(--spectrum-component-height-300) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-xl-border-radius: var( + --spectrum-component-pill-edge-to-text-300 + ); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-300 + ); + --system-button-size-xl-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-padding-label-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-button-size-xl-top-to-text: var( + --spectrum-button-top-to-text-extra-large + ); + --system-button-size-xl-bottom-to-text: var( + --spectrum-button-bottom-to-text-extra-large + ); + --system-button-size-xl-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-button-size-xl-intended-icon-size: var( + --spectrum-workflow-icon-size-300 + ); } :host, :root { - --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-s-spacing-horizontal: var( - --spectrum-spacing-200 - ); - --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); - --system-button-group-size-l-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-xl-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-m-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var(--spectrum-spacing-200); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-l-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); } :host, :root { - --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --system-breadcrumbs-block-size-compact: var( - --spectrum-breadcrumbs-height-compact - ); - --system-breadcrumbs-block-size-multiline: var( - --spectrum-breadcrumbs-height-multiline - ); - --system-breadcrumbs-line-height: var(--spectrum-line-height-100); - --system-breadcrumbs-font-size: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --system-breadcrumbs-font-family-compact: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-compact-current: var( - --spectrum-font-size-100 - ); - --system-breadcrumbs-font-family-compact-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --system-breadcrumbs-font-family-multiline: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-multiline-current: var( - --spectrum-font-size-300 - ); - --system-breadcrumbs-font-family-multiline-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-text-decoration-thickness: var( - --spectrum-text-underline-thickness - ); - --system-breadcrumbs-text-decoration-gap: var( - --spectrum-text-underline-gap - ); - --system-breadcrumbs-separator-spacing-inline: var( - --spectrum-text-to-visual-100 - ); - --system-breadcrumbs-text-spacing-block-start: var( - --spectrum-breadcrumbs-top-to-text - ); - --system-breadcrumbs-text-spacing-block-end: var( - --spectrum-breadcrumbs-bottom-to-text - ); - --system-breadcrumbs-icon-spacing-block: var( - --spectrum-breadcrumbs-top-to-separator-icon - ); - --system-breadcrumbs-text-spacing-block-start-compact: var( - --spectrum-breadcrumbs-top-to-text-compact - ); - --system-breadcrumbs-text-spacing-block-end-compact: var( - --spectrum-breadcrumbs-bottom-to-text-compact - ); - --system-breadcrumbs-icon-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-separator-icon-compact - ); - --system-breadcrumbs-text-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-end-multiline: var( - --spectrum-breadcrumbs-bottom-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-top-text-to-bottom-text - ); - --system-breadcrumbs-icon-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-separator-icon-multiline - ); - --system-breadcrumbs-icon-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline - ); - --system-breadcrumbs-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-text - ); - --system-breadcrumbs-inline-end: var( - --spectrum-breadcrumbs-end-edge-to-text - ); - --system-breadcrumbs-action-button-spacing-inline: var( - --spectrum-breadcrumbs-truncated-menu-to-separator-icon - ); - --system-breadcrumbs-action-button-spacing-block: var( - --spectrum-breadcrumbs-top-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-multiline: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-truncated-menu-to-bottom-text - ); - --system-breadcrumbs-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-breadcrumbs-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-breadcrumbs-item-link-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-breadcrumbs-text-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-text-color-current: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-separator-color: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-action-button-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-action-button-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var( + --spectrum-breadcrumbs-height-compact + ); + --system-breadcrumbs-block-size-multiline: var( + --spectrum-breadcrumbs-height-multiline + ); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-multiline-current: var( + --spectrum-font-size-300 + ); + --system-breadcrumbs-font-family-multiline-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-text-decoration-thickness: var( + --spectrum-text-underline-thickness + ); + --system-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); + --system-breadcrumbs-separator-spacing-inline: var( + --spectrum-text-to-visual-100 + ); + --system-breadcrumbs-text-spacing-block-start: var( + --spectrum-breadcrumbs-top-to-text + ); + --system-breadcrumbs-text-spacing-block-end: var( + --spectrum-breadcrumbs-bottom-to-text + ); + --system-breadcrumbs-icon-spacing-block: var( + --spectrum-breadcrumbs-top-to-separator-icon + ); + --system-breadcrumbs-text-spacing-block-start-compact: var( + --spectrum-breadcrumbs-top-to-text-compact + ); + --system-breadcrumbs-text-spacing-block-end-compact: var( + --spectrum-breadcrumbs-bottom-to-text-compact + ); + --system-breadcrumbs-icon-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-separator-icon-compact + ); + --system-breadcrumbs-text-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-end-multiline: var( + --spectrum-breadcrumbs-bottom-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-top-text-to-bottom-text + ); + --system-breadcrumbs-icon-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-separator-icon-multiline + ); + --system-breadcrumbs-icon-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline + ); + --system-breadcrumbs-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-text + ); + --system-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + --system-breadcrumbs-action-button-spacing-inline: var( + --spectrum-breadcrumbs-truncated-menu-to-separator-icon + ); + --system-breadcrumbs-action-button-spacing-block: var( + --spectrum-breadcrumbs-top-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-multiline: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-truncated-menu-to-bottom-text + ); + --system-breadcrumbs-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-breadcrumbs-item-link-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-breadcrumbs-text-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-text-color-current: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-separator-color: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-action-button-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-action-button-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); } :host, :root { - --system-checkbox-control-color-default: var(--spectrum-gray-800); - --system-checkbox-control-color-hover: var(--spectrum-gray-900); - --system-checkbox-control-color-down: var(--spectrum-gray-900); - --system-checkbox-control-color-focus: var(--spectrum-gray-900); - --system-checkbox-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-checkbox-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-checkbox-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-checkbox-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-checkbox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-control-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-checkmark-color: var(--spectrum-gray-75); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var( - --spectrum-accent-color-900 - ); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-checkbox-control-selected-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-checkbox-control-selected-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-checkbox-control-selected-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-size-m-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var( - --spectrum-checkbox-control-size-small - ); - --system-checkbox-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-checkbox-size-s-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var( - --spectrum-checkbox-control-size-large - ); - --system-checkbox-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-checkbox-size-l-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var( - --spectrum-checkbox-control-size-extra-large - ); - --system-checkbox-size-xl-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-checkbox-size-xl-text-to-control: var( - --spectrum-text-to-control-300 - ); + --system-checkbox-control-color-default: var(--spectrum-gray-800); + --system-checkbox-control-color-hover: var(--spectrum-gray-900); + --system-checkbox-control-color-down: var(--spectrum-gray-900); + --system-checkbox-control-color-focus: var(--spectrum-gray-900); + --system-checkbox-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-checkbox-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-checkbox-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-checkbox-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-checkbox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-control-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-checkbox-control-selected-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-checkbox-control-selected-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-checkbox-control-selected-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var(--spectrum-animation-duration-100); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-size-m-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var( + --spectrum-checkbox-control-size-small + ); + --system-checkbox-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-checkbox-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var( + --spectrum-checkbox-control-size-large + ); + --system-checkbox-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-checkbox-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var( + --spectrum-checkbox-control-size-extra-large + ); + --system-checkbox-size-xl-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-checkbox-size-xl-text-to-control: var( + --spectrum-text-to-control-300 + ); } :host, :root { - --system-card-background-color: var(--spectrum-background-layer-2-color); - --system-card-body-spacing: var(--spectrum-spacing-400); - --system-card-title-padding-top: var(--spectrum-spacing-300); - --system-card-title-padding-right: var(--spectrum-spacing-400); - --system-card-content-margin-top: var(--spectrum-spacing-100); - --system-card-content-margin-bottom: var(--spectrum-spacing-300); - --system-card-footer-padding-top: var(--spectrum-spacing-100); - --system-card-subtitle-padding-right: var(--spectrum-spacing-100); - --system-card-border-width: var(--spectrum-border-width-100); - --system-card-corner-radius: var(--spectrum-corner-radius-100); - --system-card-border-color: var(--spectrum-gray-200); - --system-card-border-color-hover: var(--spectrum-gray-300); - --system-card-border-color-selected: var(--spectrum-blue-700); - --system-card-divider-color: var(--spectrum-gray-300); - --system-card-title-font-family: var(--spectrum-sans-font-family-stack); - --system-card-title-font-size: var(--spectrum-heading-size-xxs); - --system-card-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-card-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-card-title-line-height: var(--spectrum-heading-line-height); - --system-card-title-font-color: var(--spectrum-heading-color); - --system-card-body-font-family: var(--spectrum-sans-font-family-stack); - --system-card-body-font-size: var(--spectrum-body-size-s); - --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --system-card-body-line-height: var(--spectrum-body-line-height); - --system-card-body-font-color: var(--spectrum-body-color); - --system-card-actions-spacing: var(--spectrum-spacing-300); - --system-card-actions-size: var(--spectrum-card-selection-background-size); - --system-card-actions-border-radius: var(--spectrum-corner-radius-100); - --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --system-card-actions-background-color-opacity: var( - --spectrum-card-selection-background-color-opacity - ); - --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-card-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-card-selected-background-opacity: 0.1; - --system-card-preview-border-width-selected: var( - --spectrum-border-width-100 - ); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); - --system-card-preview-background-color-hover: var(--spectrum-gray-300); - --system-card-horizontal-body-padding: var(--spectrum-spacing-300); - --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); - --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); - --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-background-color-quiet: var(--spectrum-background-base-color); + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var( + --spectrum-card-selection-background-color-opacity + ); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var(--spectrum-border-width-100); + --system-card-preview-background-color: var(--spectrum-background-base-color); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); + --system-card-background-color-quiet: var(--spectrum-background-base-color); } :host, :root { - --system-clear-button-background-color: var(--spectrum-gray-200); - --system-clear-button-background-color-hover: var(--spectrum-gray-300); - --system-clear-button-background-color-down: var(--spectrum-gray-400); - --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-size-m-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-size-m-width: var(--spectrum-component-height-100); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: transparent; - --system-clear-button-quiet-background-color-hover: transparent; - --system-clear-button-quiet-background-color-down: transparent; - --system-clear-button-quiet-background-color-key-focus: transparent; - --system-clear-button-over-background-icon-color: var(--spectrum-white); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-white - ); - --system-clear-button-over-background-background-color: transparent; - --system-clear-button-over-background-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-background-color: transparent; + --system-clear-button-background-color: var(--spectrum-gray-200); + --system-clear-button-background-color-hover: var(--spectrum-gray-300); + --system-clear-button-background-color-down: var(--spectrum-gray-400); + --system-clear-button-background-color-key-focus: var(--spectrum-gray-300); + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-size-m-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-size-m-width: var(--spectrum-component-height-100); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: transparent; + --system-clear-button-quiet-background-color-hover: transparent; + --system-clear-button-quiet-background-color-down: transparent; + --system-clear-button-quiet-background-color-key-focus: transparent; + --system-clear-button-over-background-icon-color: var(--spectrum-white); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-white); + --system-clear-button-over-background-icon-color-down: var(--spectrum-white); + --system-clear-button-over-background-icon-color-key-focus: var( + --spectrum-white + ); + --system-clear-button-over-background-background-color: transparent; + --system-clear-button-over-background-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-clear-button-over-background-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-clear-button-over-background-background-color-key-focus: var( + --spectrum-transparent-white-300 + ); + --system-clear-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-hover: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-down: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-background-color: transparent; } :host, :root { - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-300); - --system-close-button-background-color-down: var(--spectrum-gray-400); - --system-close-button-background-color-focus: var(--spectrum-gray-300); - --system-close-button-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-close-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-close-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-close-button-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-close-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-close-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-close-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-close-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-close-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-icon-color-default: var( - --spectrum-white - ); - --system-close-button-static-white-icon-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-close-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-icon-color-default: var( - --spectrum-black - ); - --system-close-button-static-black-icon-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-close-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-300); + --system-close-button-background-color-down: var(--spectrum-gray-400); + --system-close-button-background-color-focus: var(--spectrum-gray-300); + --system-close-button-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-close-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-close-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-close-button-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-close-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-close-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-close-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-close-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-close-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-icon-color-default: var(--spectrum-white); + --system-close-button-static-white-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-close-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-icon-color-default: var(--spectrum-black); + --system-close-button-static-black-icon-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-close-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); } :host, :root { - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); - --system-coach-indicator-quiet-animation-name: pulse-quiet; + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-min-block-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --system-coach-indicator-block-size: var( + --system-coach-indicator-min-block-size + ); + --system-coach-indicator-ring-inline-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-block-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --system-coach-indicator-top: calc( + var(--system-coach-indicator-block-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-left: calc( + var(--system-coach-indicator-inline-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-coach-animation-indicator-ring-duration: var( + --spectrum-animation-duration-6000 + ); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var( + --spectrum-coach-indicator-quiet-ring-diameter + ); + --system-coach-indicator-quiet-animation-name: pulse-quiet; } :host, :root { - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var( + --spectrum-coach-mark-media-minimum-height + ); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var( + --spectrum-heading-serif-font-style + ); + --system-coach-mark-title-text-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var( + --spectrum-heading-line-height + ); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var( + --spectrum-coach-mark-pagination-body-size + ); + --system-coach-mark-step-to-bottom: var( + --spectrum-coach-mark-pagination-text-to-bottom-edge + ); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-coach-mark-buttongroup-spacing-horizontal: var( + --spectrum-spacing-100 + ); } :host, :root { - --system-color-area-border-radius: var( - --spectrum-color-area-border-rounding - ); - --system-color-area-border-color-rgb: 0, 0, 0; - --system-color-area-border-color-opacity: 0.1; - --system-color-area-border-color: rgba( - var(--system-color-area-border-color-rgb), - var(--system-color-area-border-color-opacity) - ); - --system-color-area-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-color-area-border-width: var(--spectrum-color-area-border-width); - --system-color-area-height: var(--spectrum-color-area-height); - --system-color-area-width: var(--spectrum-color-area-width); - --system-color-area-min-width: var(--spectrum-color-area-minimum-width); - --system-color-area-min-height: var(--spectrum-color-area-minimum-height); + --system-color-area-border-radius: var(--spectrum-color-area-border-rounding); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba( + var(--system-color-area-border-color-rgb), + var(--system-color-area-border-color-opacity) + ); + --system-color-area-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); } :host, :root { - --system-color-handle-size: var(--spectrum-color-handle-size); - --system-color-handle-focused-size: var( - --spectrum-color-handle-size-key-focus - ); - --system-color-handle-hitarea-size: var( - --spectrum-color-control-track-width - ); - --system-color-handle-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-color-handle-animation-easing: ease-in-out; - --system-color-handle-outer-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-outer-border-opacity) - ); - --system-color-handle-outer-border-width: var( - --spectrum-color-handle-outer-border-width - ); - --system-color-handle-inner-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-inner-border-opacity) - ); - --system-color-handle-inner-border-width: var( - --spectrum-color-handle-inner-border-width - ); - --system-color-handle-border-width: var( - --spectrum-color-handle-border-width - ); - --system-color-handle-border-color: var(--spectrum-white); - --system-color-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-color-handle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var( + --spectrum-color-handle-size-key-focus + ); + --system-color-handle-hitarea-size: var(--spectrum-color-control-track-width); + --system-color-handle-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-outer-border-opacity) + ); + --system-color-handle-outer-border-width: var( + --spectrum-color-handle-outer-border-width + ); + --system-color-handle-inner-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-inner-border-opacity) + ); + --system-color-handle-inner-border-width: var( + --spectrum-color-handle-inner-border-width + ); + --system-color-handle-border-width: var(--spectrum-color-handle-border-width); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-color-handle-fill-color-disabled: var( + --spectrum-disabled-background-color + ); } :host, :root { - --system-color-loupe-width: var(--spectrum-color-loupe-width); - --system-color-loupe-height: var(--spectrum-color-loupe-height); - --system-color-loupe-offset: var( - --spectrum-color-loupe-bottom-to-color-handle - ); - --system-color-loupe-animation-distance: 8px; - --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-color-loupe-drop-shadow-y: var( - --spectrum-color-loupe-drop-shadow-y - ); - --system-color-loupe-drop-shadow-blur: var( - --spectrum-color-loupe-drop-shadow-blur - ); - --system-color-loupe-drop-shadow-color: var( - --spectrum-color-loupe-drop-shadow-color - ); - --system-color-loupe-outer-border-width: var( - --spectrum-color-loupe-outer-border-width - ); - --system-color-loupe-inner-border-width: var( - --spectrum-color-loupe-inner-border-width - ); - --system-color-loupe-outer-border-color: var( - --spectrum-color-loupe-outer-border - ); - --system-color-loupe-inner-border-color: var( - --spectrum-color-loupe-inner-border - ); - --system-color-loupe-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-loupe-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var( + --spectrum-color-loupe-bottom-to-color-handle + ); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); + --system-color-loupe-drop-shadow-blur: var( + --spectrum-color-loupe-drop-shadow-blur + ); + --system-color-loupe-drop-shadow-color: var( + --spectrum-color-loupe-drop-shadow-color + ); + --system-color-loupe-outer-border-width: var( + --spectrum-color-loupe-outer-border-width + ); + --system-color-loupe-inner-border-width: var( + --spectrum-color-loupe-inner-border-width + ); + --system-color-loupe-outer-border-color: var( + --spectrum-color-loupe-outer-border + ); + --system-color-loupe-inner-border-color: var( + --spectrum-color-loupe-inner-border + ); + --system-color-loupe-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-loupe-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); } :host, :root { - --system-color-slider-handle-margin-block: var( - --spectrum-component-top-to-text-75 - ); - --system-color-slider-border-color-rgba: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-color-slider-border-opacity) - ); - --system-color-slider-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-color-slider-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-slider-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); + --system-color-slider-handle-margin-block: var( + --spectrum-component-top-to-text-75 + ); + --system-color-slider-border-color-rgba: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-color-slider-border-opacity) + ); + --system-color-slider-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-color-slider-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-slider-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); } :host, :root { - --system-color-wheel-width: var(--spectrum-color-wheel-width); - --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); - --system-color-wheel-height: var(--spectrum-color-wheel-width); - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); - --system-color-wheel-border-width: var(--spectrum-border-width-100); - --system-color-wheel-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-wheel-track-width: var(--spectrum-color-control-track-width); - --system-color-wheel-colorarea-margin: var( - --spectrum-color-wheel-color-area-margin - ); - --system-color-wheel-colorhandle-position: calc( - var(--system-color-wheel-width) / 2 - - var(--system-color-wheel-track-width) / 2 - ); + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var( + --spectrum-color-wheel-color-area-margin + ); + --system-color-wheel-colorhandle-position: calc( + var(--system-color-wheel-width) / 2 - + var(--system-color-wheel-track-width) / 2 + ); } :host, :root { - --system-combobox-border-color-default: var(--spectrum-gray-400); - --system-combobox-border-color-hover: var(--spectrum-gray-500); - --system-combobox-border-color-focus: var(--spectrum-gray-900); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --system-combobox-border-color-key-focus: var(--spectrum-gray-900); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large - ); + --system-combobox-border-color-default: var(--spectrum-gray-400); + --system-combobox-border-color-hover: var(--spectrum-gray-500); + --system-combobox-border-color-focus: var(--spectrum-gray-900); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-800); + --system-combobox-border-color-key-focus: var(--spectrum-gray-900); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var( + --spectrum-combo-box-minimum-width-multiplier + ); + --system-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var(--spectrum-field-label-to-component); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-size-m-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-size-m-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-size-m-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-size-m-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-size-m-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-combobox-size-s-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-combobox-size-s-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --system-combobox-size-s-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-combobox-size-s-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-combobox-size-l-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-combobox-size-l-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --system-combobox-size-l-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-combobox-size-l-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-combobox-size-xl-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-quiet-minimum-width-multiplier: var( + --spectrum-combo-box-quiet-minimum-width-multiplier + ); + --system-combobox-quiet-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --system-combobox-quiet-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-m-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-s-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-combobox-quiet-size-l-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-combobox-quiet-size-xl-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-extra-large + ); } :host, :root { - --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); - --system-contextual-help-link-spacing: var(--spectrum-spacing-300); - --system-contextual-help-heading-size: var( - --spectrum-contextual-help-title-size - ); - --system-contextual-help-heading-color: var(--spectrum-heading-color); - --system-contextual-help-body-color: var(--spectrum-body-color); + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-content-spacing: var(--spectrum-spacing-100); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var( + --spectrum-contextual-help-title-size + ); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); } :host, :root { - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 + ); + --system-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 + ); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-confirm-title-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc( + var(--spectrum-spacing-50) * -1 + ); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-close-button-size: var( + --spectrum-component-height-100 + ); + --system-dialog-confirm-close-button-padding: calc( + 26px - var(--spectrum-component-bottom-to-text-300) + ); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); } :host, :root { - --system-divider-background-color-small: var(--spectrum-gray-300); - --system-divider-background-color-medium: var(--spectrum-gray-300); - --system-divider-background-color-large: var(--spectrum-gray-800); - --system-divider-background-color-small-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-large-static-white: var( - --spectrum-transparent-white-800 - ); - --system-divider-background-color-small-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-large-static-black: var( - --spectrum-transparent-black-800 - ); + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-800 + ); + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-large-static-black: var( + --spectrum-transparent-black-800 + ); } :host, :root { - --system-drop-zone-padding: var(--spectrum-spacing-400); - --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); - --system-drop-zone-border-width: var(--spectrum-border-width-200); - --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-drop-zone-heading-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-drop-zone-heading-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --system-drop-zone-heading-color: var(--spectrum-heading-color); - --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --system-drop-zone-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-drop-zone-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --system-drop-zone-body-line-height: var(--spectrum-body-line-height); - --system-drop-zone-body-color: var(--spectrum-body-color); - --system-drop-zone-background-color: var( - --spectrum-drop-zone-background-color-rgb - ); - --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --system-drop-zone-illustration-color-hover: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-height: var(--spectrum-component-height-300); - --system-drop-zone-content-max-width: var( - --spectrum-drop-zone-content-maximum-width - ); - --system-drop-zone-content-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-drop-zone-content-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-drop-zone-content-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-drop-zone-content-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --system-drop-zone-content-font-style: var(--spectrum-default-font-style); - --system-drop-zone-content-font-size: var(--spectrum-font-size-300); - --system-drop-zone-content-line-height: var(--spectrum-line-height-100); - --system-drop-zone-content-background-color: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-color: var(--spectrum-white); - --system-drop-zone-heading-font-size-cjk: var( - --spectrum-drop-zone-cjk-title-size - ); + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-drop-zone-heading-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-drop-zone-heading-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-drop-zone-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var( + --spectrum-drop-zone-background-color-rgb + ); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var( + --spectrum-drop-zone-content-maximum-width + ); + --system-drop-zone-content-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-drop-zone-content-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-drop-zone-content-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-drop-zone-content-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var( + --spectrum-drop-zone-cjk-title-size + ); } :host, :root { - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: '\002c'; + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: "\002c"; } :host, :root { - --system-field-label-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-field-label-font-weight: var(--spectrum-regular-font-weight); - --system-field-label-line-height: var(--spectrum-line-height-100); - --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-field-label-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-field-label-min-height: var(--spectrum-component-height-75); - --system-field-label-size-m-min-height: var(--spectrum-component-height-75); - --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-field-label-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-font-size: var(--spectrum-font-size-75); - --system-field-label-size-m-font-size: var(--spectrum-font-size-75); - --system-field-label-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-size-m-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-m-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-s-min-height: var(--spectrum-component-height-75); - --system-field-label-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-s-font-size: var(--spectrum-font-size-75); - --system-field-label-size-s-side-margin-block-start: var( - --spectrum-field-label-top-margin-small - ); - --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); - --system-field-label-size-s-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-small - ); - --system-field-label-size-l-min-height: var( - --spectrum-component-height-100 - ); - --system-field-label-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-field-label-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-field-label-size-l-font-size: var(--spectrum-font-size-100); - --system-field-label-size-l-side-margin-block-start: var( - --spectrum-field-label-top-margin-large - ); - --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-l-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-large - ); - --system-field-label-size-xl-min-height: var( - --spectrum-component-height-200 - ); - --system-field-label-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-field-label-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); - --system-field-label-size-xl-side-margin-block-start: var( - --spectrum-field-label-top-margin-extra-large - ); - --system-field-label-size-xl-side-padding-right: var( - --spectrum-spacing-200 - ); - --system-field-label-size-xl-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-extra-large - ); + --system-field-label-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-size-m-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-m-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var( + --spectrum-field-label-top-margin-small + ); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-small + ); + --system-field-label-size-l-min-height: var(--spectrum-component-height-100); + --system-field-label-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-field-label-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var( + --spectrum-field-label-top-margin-large + ); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-large + ); + --system-field-label-size-xl-min-height: var(--spectrum-component-height-200); + --system-field-label-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-field-label-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var( + --spectrum-field-label-top-margin-extra-large + ); + --system-field-label-size-xl-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-xl-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-extra-large + ); } :host, :root { - --system-help-text-line-height: var(--spectrum-line-height-100); - --system-help-text-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-help-text-neutral-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-neutral-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-negative-icon-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-disabled-content-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-disabled-icon-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-lang-ja-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-zh-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-ko-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-min-height: var(--spectrum-component-height-75); - --system-help-text-size-m-min-height: var(--spectrum-component-height-75); - --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-font-size: var(--spectrum-font-size-75); - --system-help-text-size-m-font-size: var(--spectrum-font-size-75); - --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-size-m-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75); - --system-help-text-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-s-min-height: var(--spectrum-component-height-75); - --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-help-text-size-s-font-size: var(--spectrum-font-size-75); - --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-s-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-small - ); - --system-help-text-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-l-min-height: var(--spectrum-component-height-100); - --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-help-text-size-l-font-size: var(--spectrum-font-size-100); - --system-help-text-size-l-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-help-text-size-l-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-large - ); - --system-help-text-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-help-text-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); - --system-help-text-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); - --system-help-text-size-xl-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-help-text-size-xl-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-extra-large - ); - --system-help-text-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-help-text-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-help-text-neutral-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-neutral-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-negative-icon-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-disabled-content-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-disabled-icon-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-lang-ja-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-zh-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-ko-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-size-m-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75); + --system-help-text-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-small + ); + --system-help-text-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var(--spectrum-text-to-visual-100); + --system-help-text-size-l-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-large + ); + --system-help-text-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-help-text-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var(--spectrum-text-to-visual-200); + --system-help-text-size-xl-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-extra-large + ); + --system-help-text-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-help-text-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); } :host, :root { - --system-illustrated-message-description-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-heading-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --system-illustrated-message-heading-to-description: var( - --spectrum-spacing-75 - ); - --system-illustrated-message-illustration-color: var( - --spectrum-neutral-visual-color - ); - --system-illustrated-message-illustration-accent-color: var( - --spectrum-accent-visual-color - ); - --system-illustrated-message-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-illustrated-message-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-title-size - ); - --system-illustrated-message-title-line-height: var( - --spectrum-heading-line-height - ); - --system-illustrated-message-title-color: var(--spectrum-heading-color); - --system-illustrated-message-description-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-description-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-illustrated-message-description-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-illustrated-message-description-font-size: var( - --spectrum-illustrated-message-body-size - ); - --system-illustrated-message-description-line-height: var( - --spectrum-body-line-height - ); - --system-illustrated-message-description-color: var(--spectrum-body-color); - --system-illustrated-message-lang-ja-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-zh-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-ko-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); + --system-illustrated-message-description-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-heading-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var( + --spectrum-spacing-75 + ); + --system-illustrated-message-illustration-color: var( + --spectrum-neutral-visual-color + ); + --system-illustrated-message-illustration-accent-color: var( + --spectrum-accent-visual-color + ); + --system-illustrated-message-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-illustrated-message-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-title-size + ); + --system-illustrated-message-title-line-height: var( + --spectrum-heading-line-height + ); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-description-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-illustrated-message-description-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-illustrated-message-description-font-size: var( + --spectrum-illustrated-message-body-size + ); + --system-illustrated-message-description-line-height: var( + --spectrum-body-line-height + ); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-zh-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-ko-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); } :host, :root { - --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); - --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); - --system-icon-size-s: var(--spectrum-workflow-icon-size-75); - --system-icon-size-m: var(--spectrum-workflow-icon-size-100); - --system-icon-size-l: var(--spectrum-workflow-icon-size-200); - --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); - --system-ui-icon-chevron-right-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-down-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-right-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-down-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-right-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-down-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-right-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-down-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-right-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-down-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-right-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-down-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-right-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-down-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-left-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-left-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-left-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-left-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-left-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-left-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-left-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-up-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-up-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-up-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-up-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-up-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-up-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-up-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-arrow-right-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-right-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-right-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-right-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-right-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-right-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-right-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-down-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-down-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-down-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-down-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-down-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-down-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-down-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-left-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-left-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-left-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-left-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-left-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-left-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-left-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); - --system-ui-icon-arrow-up-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-up-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-up-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-up-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-up-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-up-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-checkmark-50-icon-size: var( - --spectrum-checkmark-icon-size-50 - ); - --system-ui-icon-checkmark-75-icon-size: var( - --spectrum-checkmark-icon-size-75 - ); - --system-ui-icon-checkmark-100-icon-size: var( - --spectrum-checkmark-icon-size-100 - ); - --system-ui-icon-checkmark-200-icon-size: var( - --spectrum-checkmark-icon-size-200 - ); - --system-ui-icon-checkmark-300-icon-size: var( - --spectrum-checkmark-icon-size-300 - ); - --system-ui-icon-checkmark-400-icon-size: var( - --spectrum-checkmark-icon-size-400 - ); - --system-ui-icon-checkmark-500-icon-size: var( - --spectrum-checkmark-icon-size-500 - ); - --system-ui-icon-checkmark-600-icon-size: var( - --spectrum-checkmark-icon-size-600 - ); - --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); - --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); - --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); - --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); - --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); - --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); - --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); - --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); - --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); - --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); - --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); - --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); - --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); - --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); - --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); - --system-ui-icon-corner-triangle-75-icon-size: var( - --spectrum-corner-triangle-icon-size-75 - ); - --system-ui-icon-corner-triangle-100-icon-size: var( - --spectrum-corner-triangle-icon-size-100 - ); - --system-ui-icon-corner-triangle-200-icon-size: var( - --spectrum-corner-triangle-icon-size-200 - ); - --system-ui-icon-corner-triangle-300-icon-size: var( - --spectrum-corner-triangle-icon-size-300 - ); - --system-ui-icon-asterisk-75-icon-size: var( - --spectrum-asterisk-icon-size-75 - ); - --system-ui-icon-asterisk-100-icon-size: var( - --spectrum-asterisk-icon-size-100 - ); - --system-ui-icon-asterisk-200-icon-size: var( - --spectrum-asterisk-icon-size-200 - ); - --system-ui-icon-asterisk-300-icon-size: var( - --spectrum-asterisk-icon-size-300 - ); + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-down-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-right-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-down-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-right-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-down-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-right-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-down-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-right-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-down-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-right-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-down-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-right-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-down-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-left-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-left-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-left-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-left-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-left-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-left-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-left-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-up-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-up-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-up-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-up-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-up-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-up-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-up-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-arrow-right-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-right-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-right-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-right-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-right-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-right-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-right-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-down-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-down-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-down-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-down-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-down-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-down-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-down-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-left-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-left-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-left-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-left-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-left-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-left-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-left-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-up-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-up-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-up-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-up-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-up-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-checkmark-50-icon-size: var( + --spectrum-checkmark-icon-size-50 + ); + --system-ui-icon-checkmark-75-icon-size: var( + --spectrum-checkmark-icon-size-75 + ); + --system-ui-icon-checkmark-100-icon-size: var( + --spectrum-checkmark-icon-size-100 + ); + --system-ui-icon-checkmark-200-icon-size: var( + --spectrum-checkmark-icon-size-200 + ); + --system-ui-icon-checkmark-300-icon-size: var( + --spectrum-checkmark-icon-size-300 + ); + --system-ui-icon-checkmark-400-icon-size: var( + --spectrum-checkmark-icon-size-400 + ); + --system-ui-icon-checkmark-500-icon-size: var( + --spectrum-checkmark-icon-size-500 + ); + --system-ui-icon-checkmark-600-icon-size: var( + --spectrum-checkmark-icon-size-600 + ); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var( + --spectrum-corner-triangle-icon-size-75 + ); + --system-ui-icon-corner-triangle-100-icon-size: var( + --spectrum-corner-triangle-icon-size-100 + ); + --system-ui-icon-corner-triangle-200-icon-size: var( + --spectrum-corner-triangle-icon-size-200 + ); + --system-ui-icon-corner-triangle-300-icon-size: var( + --spectrum-corner-triangle-icon-size-300 + ); + --system-ui-icon-asterisk-75-icon-size: var(--spectrum-asterisk-icon-size-75); + --system-ui-icon-asterisk-100-icon-size: var( + --spectrum-asterisk-icon-size-100 + ); + --system-ui-icon-asterisk-200-icon-size: var( + --spectrum-asterisk-icon-size-200 + ); + --system-ui-icon-asterisk-300-icon-size: var( + --spectrum-asterisk-icon-size-300 + ); } :host, :root { - --system-infield-button-border-width: 0; - --system-infield-button-border-color: transparent; - --system-infield-button-border-radius: var(--spectrum-corner-radius-75); - --system-infield-button-border-radius-reset: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-stacked-top-border-radius-start-start: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --spectrum-corner-radius-75 - ); - --system-infield-button-background-color: var(--spectrum-gray-200); - --system-infield-button-background-color-hover: var(--spectrum-gray-300); - --system-infield-button-background-color-down: var(--spectrum-gray-400); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-300 - ); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-infield-button-edge-to-fill: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-infield-button-inner-edge-to-fill: var( - --spectrum-in-field-button-stacked-inner-edge-to-fill - ); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-hover: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-down: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-border-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-key-focus: var( - --spectrum-disabled-content-color - ); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-xl-height: var( - --spectrum-component-height-300 - ); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-top-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-bottom-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-top-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-bottom-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-top-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-bottom-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-top-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-bottom-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-quiet-background-color: transparent; - --system-infield-button-quiet-background-color-hover: transparent; - --system-infield-button-quiet-background-color-down: transparent; - --system-infield-button-quiet-background-color-key-focus: transparent; - --system-infield-button-quiet-infield-border-color: transparent; - --system-infield-button-quiet-border-width: 0; - --system-infield-button-quiet-disabled-background-color: transparent; - --system-infield-button-quiet-disabled-border-color: transparent; + --system-infield-button-border-width: 0; + --system-infield-button-border-color: transparent; + --system-infield-button-border-radius: var(--spectrum-corner-radius-75); + --system-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); + --system-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-corner-radius-75 + ); + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-corner-radius-75 + ); + --system-infield-button-background-color: var(--spectrum-gray-200); + --system-infield-button-background-color-hover: var(--spectrum-gray-300); + --system-infield-button-background-color-down: var(--spectrum-gray-400); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-300); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-infield-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-infield-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-infield-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-hover: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-down: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-border-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-hover: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-down: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-key-focus: var( + --spectrum-disabled-content-color + ); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-xl-height: var(--spectrum-component-height-300); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-top-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-bottom-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-top-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-bottom-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-top-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-bottom-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-top-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-bottom-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; } :host, :root { - --system-link-animation-duration: var(--spectrum-animation-duration-100); - --system-link-text-color-primary-default: var( - --spectrum-accent-content-color-default - ); - --system-link-text-color-primary-hover: var( - --spectrum-accent-content-color-hover - ); - --system-link-text-color-primary-active: var( - --spectrum-accent-content-color-down - ); - --system-link-text-color-primary-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-link-text-color-secondary-default: var( - --spectrum-neutral-content-color-default - ); - --system-link-text-color-secondary-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-link-text-color-secondary-active: var( - --spectrum-neutral-content-color-down - ); - --system-link-text-color-secondary-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-link-text-color-white: var(--spectrum-white); - --system-link-text-color-black: var(--spectrum-black); + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var( + --spectrum-accent-content-color-default + ); + --system-link-text-color-primary-hover: var( + --spectrum-accent-content-color-hover + ); + --system-link-text-color-primary-active: var( + --spectrum-accent-content-color-down + ); + --system-link-text-color-primary-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-link-text-color-secondary-default: var( + --spectrum-neutral-content-color-default + ); + --system-link-text-color-secondary-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-link-text-color-secondary-active: var( + --spectrum-neutral-content-color-down + ); + --system-link-text-color-secondary-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); } :host, :root { - --system-menu-item-top-to-action: var(--spectrum-spacing-50); - --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - --system-menu-item-label-line-height: var(--spectrum-line-height-100); - --system-menu-item-label-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-label-to-description-spacing: var( - --spectrum-menu-item-label-to-description - ); - --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --system-menu-item-label-to-value-area-min-spacing: var( - --spectrum-spacing-100 - ); - --system-menu-item-label-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-label-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-description-line-height: var(--spectrum-line-height-100); - --system-menu-item-description-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-description-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-description-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-description-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-description-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-description-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-section-header-line-height: var(--spectrum-line-height-100); - --system-menu-section-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-menu-section-header-color: var(--spectrum-gray-900); - --system-menu-collapsible-icon-color: var(--spectrum-gray-900); - --system-menu-checkmark-icon-color-default: var( - --spectrum-accent-color-900 - ); - --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - --system-menu-drillin-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-drillin-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-drillin-icon-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-drillin-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-value-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-value-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-value-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-value-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-checkmark-display-hidden: none; - --system-menu-checkmark-display-shown: block; - --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( - var(--system-menu-item-label-inline-edge-to-content) + - var(--system-menu-item-checkmark-width) + - var(--system-menu-item-label-text-to-visual) + - var(--system-menu-item-focus-indicator-width) - ); - --system-menu-item-background-color-default: transparent; - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-height: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-width: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-size-m-item-label-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-size-m-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-size-m-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-size-m-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-size-m-item-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-size-m-item-description-font-size: var( - --spectrum-font-size-75 - ); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-section-header-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-size-m-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-size-m-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-size-m-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-size-m-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-m-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); - --system-menu-size-s-item-icon-height: var( - --spectrum-workflow-icon-size-75 - ); - --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); - --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-item-label-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-menu-size-s-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-75 - ); - --system-menu-size-s-item-top-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-menu-size-s-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-menu-size-s-item-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-menu-size-s-item-description-font-size: var( - --spectrum-font-size-50 - ); - --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-section-header-min-width: var( - --spectrum-component-height-75 - ); - --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-small - ); - --system-menu-size-s-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-small - ); - --system-menu-size-s-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-small - ); - --system-menu-size-s-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-small - ); - --system-menu-size-s-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-small - ); - --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); - --system-menu-size-l-item-icon-height: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-icon-width: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); - --system-menu-size-l-item-label-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-menu-size-l-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-200 - ); - --system-menu-size-l-item-top-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-menu-size-l-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-menu-size-l-item-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-menu-size-l-item-description-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-size-l-section-header-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-l-section-header-min-width: var( - --spectrum-component-height-200 - ); - --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-large - ); - --system-menu-size-l-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-large - ); - --system-menu-size-l-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-large - ); - --system-menu-size-l-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-large - ); - --system-menu-size-l-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-large - ); - --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); - --system-menu-size-xl-item-icon-height: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-icon-width: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); - --system-menu-size-xl-item-label-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-menu-size-xl-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-300 - ); - --system-menu-size-xl-item-top-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-menu-size-xl-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-menu-size-xl-item-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-menu-size-xl-item-description-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-xl-section-header-font-size: var( - --spectrum-font-size-300 - ); - --system-menu-size-xl-section-header-min-width: var( - --spectrum-component-height-300 - ); - --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large - ); - --system-menu-size-xl-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-extra-large - ); - --system-menu-size-xl-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-extra-large - ); - --system-menu-size-xl-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-extra-large - ); - --system-menu-size-xl-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-extra-large - ); + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-item-label-to-description-spacing: var( + --spectrum-menu-item-label-to-description + ); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var( + --spectrum-spacing-100 + ); + --system-menu-item-label-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-label-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-description-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-description-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-description-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-description-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-description-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-drillin-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-drillin-icon-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-drillin-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-value-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-value-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-value-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-value-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-background-color-default: transparent; + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-size-m-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-size-m-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-size-m-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-size-m-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-size-m-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-size-m-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-size-m-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-m-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-menu-size-s-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-75 + ); + --system-menu-size-s-item-top-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-menu-size-s-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-menu-size-s-item-text-to-control: var(--spectrum-text-to-control-75); + --system-menu-size-s-item-description-font-size: var(--spectrum-font-size-50); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var( + --spectrum-component-height-75 + ); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-small + ); + --system-menu-size-s-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-small + ); + --system-menu-size-s-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-small + ); + --system-menu-size-s-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-small + ); + --system-menu-size-s-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-icon-width: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-menu-size-l-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-200 + ); + --system-menu-size-l-item-top-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-menu-size-l-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-menu-size-l-item-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-menu-size-l-item-description-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-size-l-section-header-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-section-header-min-width: var( + --spectrum-component-height-200 + ); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-large + ); + --system-menu-size-l-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-large + ); + --system-menu-size-l-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-large + ); + --system-menu-size-l-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-large + ); + --system-menu-size-l-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-icon-width: var(--spectrum-workflow-icon-size-300); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-menu-size-xl-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-300 + ); + --system-menu-size-xl-item-top-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-menu-size-xl-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-menu-size-xl-item-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-menu-size-xl-item-description-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-xl-section-header-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-section-header-min-width: var( + --spectrum-component-height-300 + ); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large + ); + --system-menu-size-xl-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-extra-large + ); + --system-menu-size-xl-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-extra-large + ); + --system-menu-size-xl-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-extra-large + ); + --system-menu-size-xl-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); } :host, :root { - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-min-width: var(--spectrum-meter-minimum-width); + --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); + --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); + --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); + --system-meter-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); + --system-meter-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-font-size: var(--spectrum-font-size-100); + --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); + --system-meter-size-s-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); } :host, :root { - --system-modal-confirm-exit-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-modal-confirm-entry-animation-distance: var( - --spectrum-dialog-confirm-entry-animation-distance - ); - --system-modal-fullscreen-margin: 32px; - --system-modal-max-height: 90vh; - --system-modal-max-width: 90%; - --system-modal-background-color: var(--spectrum-gray-100); - --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --system-modal-confirm-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-modal-confirm-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-modal-confirm-entry-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-modal-transition-animation-duration: var( - --spectrum-animation-duration-100 - ); + --system-modal-confirm-exit-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-modal-confirm-entry-animation-distance: var( + --spectrum-dialog-confirm-entry-animation-distance + ); + --system-modal-fullscreen-margin: 32px; + --system-modal-max-height: 90vh; + --system-modal-max-width: 90%; + --system-modal-background-color: var(--spectrum-gray-100); + --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --system-modal-confirm-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-modal-confirm-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-modal-confirm-entry-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-modal-transition-animation-duration: var( + --spectrum-animation-duration-100 + ); } :host, :root { - --system-picker-background-color-default: var(--spectrum-gray-200); - --system-picker-background-color-default-open: var(--spectrum-gray-300); - --system-picker-background-color-active: var(--spectrum-gray-400); - --system-picker-background-color-hover: var(--spectrum-gray-300); - --system-picker-background-color-hover-open: var(--spectrum-gray-300); - --system-picker-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-border-color-default: transparent; - --system-picker-border-color-default-open: transparent; - --system-picker-border-color-hover: transparent; - --system-picker-border-color-hover-open: transparent; - --system-picker-border-color-active: transparent; - --system-picker-border-color-key-focus: transparent; - --system-picker-border-width: 0px; - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); + --system-picker-background-color-default: var(--spectrum-gray-200); + --system-picker-background-color-default-open: var(--spectrum-gray-300); + --system-picker-background-color-active: var(--spectrum-gray-400); + --system-picker-background-color-hover: var(--spectrum-gray-300); + --system-picker-background-color-hover-open: var(--spectrum-gray-300); + --system-picker-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-border-color-default: transparent; + --system-picker-border-color-default-open: transparent; + --system-picker-border-color-hover: transparent; + --system-picker-border-color-hover-open: transparent; + --system-picker-border-color-active: transparent; + --system-picker-border-color-key-focus: transparent; + --system-picker-border-width: 0px; + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --system-picker-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-font-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-icon-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --system-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --system-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --system-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --system-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --system-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-medium + ); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-picker-size-s-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-picker-size-s-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-picker-size-s-spacing-text-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-picker-size-s-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --system-picker-size-s-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-picker-size-s-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-picker-size-s-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-picker-size-s-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-small + ); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-picker-size-l-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-picker-size-l-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-picker-size-l-spacing-text-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-picker-size-l-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --system-picker-size-l-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-picker-size-l-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-picker-size-l-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-picker-size-l-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-large + ); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-picker-size-xl-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-picker-size-xl-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-picker-size-xl-spacing-text-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --system-picker-size-xl-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-picker-size-xl-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-extra-large + ); } :host, :root { - --system-picker-button-background-color: var(--spectrum-gray-200); - --system-picker-button-background-color-hover: var(--spectrum-gray-300); - --system-picker-button-background-color-down: var(--spectrum-gray-400); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); - --system-picker-button-border-color: none; - --system-picker-button-border-radius: var(--spectrum-corner-radius-75); - --system-picker-button-border-radius-rounded-sided: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-border-radius-sided: var( - --spectrum-corner-radius-75 - ); - --system-picker-button-border-width: 0px; - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-100 - ); - --system-picker-button-border-radius-rounded: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-font-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-hover-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-down-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-font-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-75 - ); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var( - --spectrum-text-to-visual-200 - ); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-200 - ); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var( - --spectrum-text-to-visual-300 - ); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-300 - ); + --system-picker-button-background-color: var(--spectrum-gray-200); + --system-picker-button-background-color-hover: var(--spectrum-gray-300); + --system-picker-button-background-color-down: var(--spectrum-gray-400); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --system-picker-button-border-color: none; + --system-picker-button-border-radius: var(--spectrum-corner-radius-75); + --system-picker-button-border-radius-rounded-sided: var( + --spectrum-corner-radius-200 + ); + --system-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --system-picker-button-border-width: 0px; + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 + ); + --system-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 + ); + --system-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-hover-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-down-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-font-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 + ); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var( + --spectrum-text-to-visual-200 + ); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 + ); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var( + --spectrum-text-to-visual-300 + ); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 + ); } :host, :root { - --system-popover-border-width: 0; - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var( - --spectrum-popover-top-to-content-area - ); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc( - var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / - 2 - ); - --system-popover-pointer-edge-spacing: calc( - var(--system-popover-pointer-edge-offset) - - var(--spectrum-popover-tip-width) / 2 - ); + --system-popover-border-width: 0; + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var( + --spectrum-popover-top-to-content-area + ); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc( + var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2 + ); + --system-popover-pointer-edge-spacing: calc( + var(--system-popover-pointer-edge-offset) - + var(--spectrum-popover-tip-width) / 2 + ); } :host, :root { - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); + --system-progress-bar-animation-ease-in-out-indeterminate: var( + --spectrum-animation-ease-in-out + ); + --system-progress-bar-animation-duration-indeterminate: var( + --spectrum-animation-duration-2000 + ); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); + --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); + --system-progress-bar-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-progress-bar-track-color: var(--spectrum-gray-300); + --system-progress-bar-fill-color: var(--spectrum-accent-color-900); + --system-progress-bar-label-and-value-white: var(--spectrum-white); + --system-progress-bar-track-color-white: var( + --spectrum-transparent-white-300 + ); + --system-progress-bar-fill-color-white: var(--spectrum-white); + --system-progress-bar-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-m-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-m-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-m-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-s-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-s-thickness: var( + --spectrum-progress-bar-thickness-small + ); + --system-progress-bar-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-l-size-default: var( + --system-progress-bar-size-2500 + ); + --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); + --system-progress-bar-size-l-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-progress-bar-size-xl-size-default: var( + --system-progress-bar-size-2800 + ); + --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); + --system-progress-bar-size-xl-thickness: var( + --spectrum-progress-bar-thickness-extra-large + ); + --system-progress-bar-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); } :host, :root { - --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --system-progress-circle-fill-border-color: var( - --spectrum-accent-content-color-default - ); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-300 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-900 - ); - --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --system-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-track-border-style: solid; - --system-progress-circle-small-size: var( - --spectrum-progress-circle-size-small - ); - --system-progress-circle-small-thickness: var( - --spectrum-progress-circle-thickness-small - ); - --system-progress-circle-medium-size: var( - --spectrum-progress-circle-size-medium - ); - --system-progress-circle-medium-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-large-size: var( - --spectrum-progress-circle-size-large - ); - --system-progress-circle-large-thickness: var( - --spectrum-progress-circle-thickness-large - ); + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-fill-border-color: var( + --spectrum-accent-content-color-default + ); + --system-progress-circle-track-border-color-over-background: var( + --spectrum-transparent-white-300 + ); + --system-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-900 + ); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var( + --spectrum-progress-circle-size-small + ); + --system-progress-circle-small-thickness: var( + --spectrum-progress-circle-thickness-small + ); + --system-progress-circle-medium-size: var( + --spectrum-progress-circle-size-medium + ); + --system-progress-circle-medium-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-large-size: var( + --spectrum-progress-circle-size-large + ); + --system-progress-circle-large-thickness: var( + --spectrum-progress-circle-thickness-large + ); } :host, :root { - --system-radio-button-border-color-default: var(--spectrum-gray-800); - --system-radio-button-border-color-hover: var(--spectrum-gray-900); - --system-radio-button-border-color-down: var(--spectrum-gray-900); - --system-radio-button-border-color-focus: var(--spectrum-gray-900); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); + --system-radio-button-border-color-default: var(--spectrum-gray-800); + --system-radio-button-border-color-hover: var(--spectrum-gray-900); + --system-radio-button-border-color-down: var(--spectrum-gray-900); + --system-radio-button-border-color-focus: var(--spectrum-gray-900); + --system-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-focus + ); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-size-m-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-size-m-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-size-m-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var( + --spectrum-radio-button-control-size-small + ); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-radio-size-s-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-radio-size-s-button-top-to-control: var( + --spectrum-radio-button-top-to-control-small + ); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var( + --spectrum-radio-button-control-size-large + ); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-radio-size-l-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-radio-size-l-button-top-to-control: var( + --spectrum-radio-button-top-to-control-large + ); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var( + --spectrum-radio-button-control-size-extra-large + ); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-radio-size-xl-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-radio-size-xl-button-top-to-control: var( + --spectrum-radio-button-top-to-control-extra-large + ); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-radio-emphasized-button-checked-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-button-checked-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-button-checked-border-color-focus: var( + --spectrum-accent-color-1000 + ); } :host, :root { - --system-search-border-color-default: var(--spectrum-gray-400); - --system-search-border-color-hover: var(--spectrum-gray-500); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-50); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --system-search-size-m-border-radius: calc( - var(--spectrum-component-height-100) / 2 - ); - --system-search-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-s-border-radius: calc( - var(--spectrum-component-height-75) / 2 - ); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-size-l-border-radius: calc( - var(--spectrum-component-height-200) / 2 - ); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-200 - ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: calc( - var(--spectrum-component-height-300) / 2 - ); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-pill-edge-to-visual-300 - ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); + --system-search-border-color-default: var(--spectrum-gray-400); + --system-search-border-color-hover: var(--spectrum-gray-500); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var( + --spectrum-search-field-minimum-width-multiplier + ); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var(--spectrum-neutral-content-color-default); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-radius: calc(var(--spectrum-component-height-100) / 2); + --system-search-size-m-border-radius: calc( + var(--spectrum-component-height-100) / 2 + ); + --system-search-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-search-size-m-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-s-border-radius: calc( + var(--spectrum-component-height-75) / 2 + ); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-size-l-border-radius: calc( + var(--spectrum-component-height-200) / 2 + ); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: calc( + var(--spectrum-component-height-300) / 2 + ); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-300 + ); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var( + --spectrum-field-edge-to-visual-quiet + ); } :host, :root { - --system-side-nav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-side-nav-min-height: var(--spectrum-component-height-100); - --system-side-nav-width: 100%; - --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); - --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); - --system-side-nav-border-radius: var(--spectrum-corner-radius-100); - --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); - --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); - --system-side-nav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); - --system-side-nav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); - --system-side-nav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --system-side-nav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --system-side-nav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --system-side-nav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --system-side-nav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --system-side-nav-background-disabled: transparent; - --system-side-nav-background-default: transparent; - --system-side-nav-background-hover: var(--spectrum-gray-200); - --system-side-nav-item-background-down: var(--spectrum-gray-300); - --system-side-nav-background-key-focus: var(--spectrum-gray-200); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-200 - ); - --system-side-nav-background-hover-selected: var(--spectrum-gray-300); - --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); - --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); - --system-side-nav-header-color: var(--spectrum-gray-600); - --system-side-nav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-side-nav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); - --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); - --system-side-nav-text-font-style: var(--spectrum-default-font-style); - --system-side-nav-text-font-size: var(--spectrum-font-size-100); - --system-side-nav-text-line-height: var(--spectrum-line-height-100); - --system-side-nav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); - --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); - --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); - --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); - --system-side-nav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); - --system-side-nav-header-font-style: var(--spectrum-default-font-style); - --system-side-nav-header-font-size: var(--spectrum-font-size-75); - --system-side-nav-header-line-height: var(--spectrum-line-height-100); - --system-side-nav-lang-ja-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-header-line-height: var( - --spectrum-cjk-line-height-100 - ); + --system-side-nav-focus-ring-size: var(--spectrum-focus-indicator-thickness); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var(--spectrum-component-edge-to-text-100); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --system-side-nav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --system-side-nav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --system-side-nav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --system-side-nav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var(--spectrum-gray-200); + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-side-nav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-header-line-height: var( + --spectrum-cjk-line-height-100 + ); } :host, :root { - --system-slider-track-color: var(--spectrum-gray-200); - --system-slider-track-fill-color: var(--spectrum-gray-600); - --system-slider-ramp-track-color: var(--spectrum-gray-300); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); - --system-slider-handle-border-color: var(--spectrum-gray-800); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); - --system-slider-tick-mark-color: var(--spectrum-gray-200); - --system-slider-handle-border-color-hover: var(--spectrum-gray-900); - --system-slider-handle-border-color-down: var(--spectrum-gray-900); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); - --system-slider-value-inline-size: 18px; - --system-slider-ramp-track-block-size: var( - --spectrum-slider-ramp-track-height - ); - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-track-fill-thickness: var( - --spectrum-slider-track-thickness - ); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-track-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-handle-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-slider-label-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-tick-label-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-label-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-slider-tick-mark-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-size-m-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-size-m-handle-size: var( - --spectrum-slider-handle-size-medium - ); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-size-m-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-size-m-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-size-m-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-m-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var( - --spectrum-slider-handle-size-small - ); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-small - ); - --system-slider-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-size-s-control-to-field-label: var( - --spectrum-slider-control-to-field-label-small - ); - --system-slider-size-s-value-side-padding-inline: var( - --spectrum-spacing-100 - ); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var( - --spectrum-slider-handle-size-large - ); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-l-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-large - ); - --system-slider-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-slider-size-l-control-to-field-label: var( - --spectrum-slider-control-to-field-label-large - ); - --system-slider-size-l-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var( - --spectrum-slider-handle-size-extra-large - ); - --system-slider-size-xl-control-height: var( - --spectrum-component-height-300 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-extra-large - ); - --system-slider-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-slider-size-xl-control-to-field-label: var( - --spectrum-slider-control-to-field-label-extra-large - ); - --system-slider-size-xl-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-xl-value-inline-size: 22px; + --system-slider-track-color: var(--spectrum-gray-200); + --system-slider-track-fill-color: var(--spectrum-gray-600); + --system-slider-ramp-track-color: var(--spectrum-gray-300); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-background-color-disabled: var(--spectrum-gray-50); + --system-slider-ramp-handle-background-color: var(--spectrum-gray-50); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --system-slider-handle-border-color: var(--spectrum-gray-800); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --system-slider-tick-mark-color: var(--spectrum-gray-200); + --system-slider-handle-border-color-hover: var(--spectrum-gray-900); + --system-slider-handle-border-color-down: var(--spectrum-gray-900); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-900); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); + --system-slider-value-inline-size: 18px; + --system-slider-ramp-track-block-size: var( + --spectrum-slider-ramp-track-height + ); + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-track-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-handle-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-slider-label-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-tick-label-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-label-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-slider-tick-mark-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-m-handle-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-size-m-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-size-m-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var(--spectrum-slider-handle-size-small); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-slider-size-s-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-small + ); + --system-slider-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-size-s-control-to-field-label: var( + --spectrum-slider-control-to-field-label-small + ); + --system-slider-size-s-value-side-padding-inline: var(--spectrum-spacing-100); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var(--spectrum-slider-handle-size-large); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-l-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-large + ); + --system-slider-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-slider-size-l-control-to-field-label: var( + --spectrum-slider-control-to-field-label-large + ); + --system-slider-size-l-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var( + --spectrum-slider-handle-size-extra-large + ); + --system-slider-size-xl-control-height: var(--spectrum-component-height-300); + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-xl-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-extra-large + ); + --system-slider-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-slider-size-xl-control-to-field-label: var( + --spectrum-slider-control-to-field-label-extra-large + ); + --system-slider-size-xl-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-xl-value-inline-size: 22px; } :host, :root { - --system-split-view-vertical-width: 100%; - --system-split-view-vertical-gripper-width: 50%; - --system-split-view-vertical-gripper-outer-width: 100%; - --system-split-view-vertical-gripper-reset: 0; - --system-split-view-background-color: var(--spectrum-gray-100); - --system-split-view-content-color: var(--spectrum-body-color); - --system-split-view-handle-background-color: var(--spectrum-gray-300); - --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); - --system-split-view-handle-background-color-down: var(--spectrum-gray-800); - --system-split-view-handle-background-color-focus: var( - --spectrum-focus-indicator-color - ); - --system-split-view-handle-width: var(--spectrum-border-width-200); - --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); - --system-split-view-gripper-width: var(--spectrum-border-width-400); - --system-split-view-gripper-height: 16px; - --system-split-view-gripper-border-width-horizontal: 3px; - --system-split-view-gripper-border-width-vertical: var( - --spectrum-border-width-400 - ); + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-100); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-300); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); } :host, :root { - --system-status-light-corner-radius: 50%; - --system-status-light-font-weight: 400; - --system-status-light-border-width: var(--spectrum-border-width-100); - --system-status-light-line-height: var(--spectrum-line-height-100); - --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-status-light-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-status-light-subdued-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-status-light-semantic-neutral-color: var( - --spectrum-neutral-visual-color - ); - --system-status-light-semantic-accent-color: var( - --spectrum-accent-visual-color - ); - --system-status-light-semantic-negative-color: var( - --spectrum-negative-visual-color - ); - --system-status-light-semantic-info-color: var( - --spectrum-informative-visual-color - ); - --system-status-light-semantic-notice-color: var( - --spectrum-notice-visual-color - ); - --system-status-light-semantic-positive-color: var( - --spectrum-positive-visual-color - ); - --system-status-light-nonsemantic-gray-color: var( - --spectrum-gray-visual-color - ); - --system-status-light-nonsemantic-red-color: var( - --spectrum-red-visual-color - ); - --system-status-light-nonsemantic-orange-color: var( - --spectrum-orange-visual-color - ); - --system-status-light-nonsemantic-yellow-color: var( - --spectrum-yellow-visual-color - ); - --system-status-light-nonsemantic-chartreuse-color: var( - --spectrum-chartreuse-visual-color - ); - --system-status-light-nonsemantic-celery-color: var( - --spectrum-celery-visual-color - ); - --system-status-light-nonsemantic-green-color: var( - --spectrum-green-visual-color - ); - --system-status-light-nonsemantic-seafoam-color: var( - --spectrum-seafoam-visual-color - ); - --system-status-light-nonsemantic-cyan-color: var( - --spectrum-cyan-visual-color - ); - --system-status-light-nonsemantic-blue-color: var( - --spectrum-blue-visual-color - ); - --system-status-light-nonsemantic-indigo-color: var( - --spectrum-indigo-visual-color - ); - --system-status-light-nonsemantic-purple-color: var( - --spectrum-purple-visual-color - ); - --system-status-light-nonsemantic-fuchsia-color: var( - --spectrum-fuchsia-visual-color - ); - --system-status-light-nonsemantic-magenta-color: var( - --spectrum-magenta-visual-color - ); - --system-status-light-height: var(--spectrum-component-height-100); - --system-status-light-size-m-height: var(--spectrum-component-height-100); - --system-status-light-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-size-m-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-font-size: var(--spectrum-font-size-100); - --system-status-light-size-m-font-size: var(--spectrum-font-size-100); - --system-status-light-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-size-m-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-size-m-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-m-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-s-height: var(--spectrum-component-height-75); - --system-status-light-size-s-dot-size: var( - --spectrum-status-light-dot-size-small - ); - --system-status-light-size-s-font-size: var(--spectrum-font-size-75); - --system-status-light-size-s-spacing-dot-to-label: var( - --spectrum-text-to-visual-75 - ); - --system-status-light-size-s-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-small - ); - --system-status-light-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-status-light-size-s-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-75 - ); - --system-status-light-size-l-height: var(--spectrum-component-height-200); - --system-status-light-size-l-dot-size: var( - --spectrum-status-light-dot-size-large - ); - --system-status-light-size-l-font-size: var(--spectrum-font-size-200); - --system-status-light-size-l-spacing-dot-to-label: var( - --spectrum-text-to-visual-200 - ); - --system-status-light-size-l-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-large - ); - --system-status-light-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-status-light-size-l-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-200 - ); - --system-status-light-size-xl-height: var(--spectrum-component-height-300); - --system-status-light-size-xl-dot-size: var( - --spectrum-status-light-dot-size-extra-large - ); - --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); - --system-status-light-size-xl-spacing-dot-to-label: var( - --spectrum-text-to-visual-300 - ); - --system-status-light-size-xl-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-extra-large - ); - --system-status-light-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-status-light-size-xl-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-300 - ); + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-status-light-subdued-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-status-light-semantic-neutral-color: var( + --spectrum-neutral-visual-color + ); + --system-status-light-semantic-accent-color: var( + --spectrum-accent-visual-color + ); + --system-status-light-semantic-negative-color: var( + --spectrum-negative-visual-color + ); + --system-status-light-semantic-info-color: var( + --spectrum-informative-visual-color + ); + --system-status-light-semantic-notice-color: var( + --spectrum-notice-visual-color + ); + --system-status-light-semantic-positive-color: var( + --spectrum-positive-visual-color + ); + --system-status-light-nonsemantic-gray-color: var( + --spectrum-gray-visual-color + ); + --system-status-light-nonsemantic-red-color: var(--spectrum-red-visual-color); + --system-status-light-nonsemantic-orange-color: var( + --spectrum-orange-visual-color + ); + --system-status-light-nonsemantic-yellow-color: var( + --spectrum-yellow-visual-color + ); + --system-status-light-nonsemantic-chartreuse-color: var( + --spectrum-chartreuse-visual-color + ); + --system-status-light-nonsemantic-celery-color: var( + --spectrum-celery-visual-color + ); + --system-status-light-nonsemantic-green-color: var( + --spectrum-green-visual-color + ); + --system-status-light-nonsemantic-seafoam-color: var( + --spectrum-seafoam-visual-color + ); + --system-status-light-nonsemantic-cyan-color: var( + --spectrum-cyan-visual-color + ); + --system-status-light-nonsemantic-blue-color: var( + --spectrum-blue-visual-color + ); + --system-status-light-nonsemantic-indigo-color: var( + --spectrum-indigo-visual-color + ); + --system-status-light-nonsemantic-purple-color: var( + --spectrum-purple-visual-color + ); + --system-status-light-nonsemantic-fuchsia-color: var( + --spectrum-fuchsia-visual-color + ); + --system-status-light-nonsemantic-magenta-color: var( + --spectrum-magenta-visual-color + ); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var(--spectrum-status-light-dot-size-medium); + --system-status-light-size-m-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-size-m-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-size-m-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-size-m-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-size-s-height: var(--spectrum-component-height-75); + --system-status-light-size-s-dot-size: var( + --spectrum-status-light-dot-size-small + ); + --system-status-light-size-s-font-size: var(--spectrum-font-size-75); + --system-status-light-size-s-spacing-dot-to-label: var( + --spectrum-text-to-visual-75 + ); + --system-status-light-size-s-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-small + ); + --system-status-light-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-status-light-size-s-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-75 + ); + --system-status-light-size-l-height: var(--spectrum-component-height-200); + --system-status-light-size-l-dot-size: var( + --spectrum-status-light-dot-size-large + ); + --system-status-light-size-l-font-size: var(--spectrum-font-size-200); + --system-status-light-size-l-spacing-dot-to-label: var( + --spectrum-text-to-visual-200 + ); + --system-status-light-size-l-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-large + ); + --system-status-light-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-status-light-size-l-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-200 + ); + --system-status-light-size-xl-height: var(--spectrum-component-height-300); + --system-status-light-size-xl-dot-size: var( + --spectrum-status-light-dot-size-extra-large + ); + --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); + --system-status-light-size-xl-spacing-dot-to-label: var( + --spectrum-text-to-visual-300 + ); + --system-status-light-size-xl-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-extra-large + ); + --system-status-light-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-status-light-size-xl-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-300 + ); } :host, :root { - --system-stepper-border-width: var(--spectrum-border-width-200); - --system-stepper-border-color: var(--spectrum-gray-400); - --system-stepper-border-color-hover: var(--spectrum-gray-500); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); - --system-stepper-buttons-border-style: solid; - --system-stepper-buttons-border-width: var(--spectrum-border-width-200); - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color: transparent; - --system-stepper-buttons-border-color-hover: transparent; - --system-stepper-buttons-border-color-focus: transparent; - --system-stepper-buttons-border-color-keyboard-focus: transparent; - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-stepper-button-border-width: 0; - --system-stepper-border-color-invalid: transparent; - --system-stepper-border-color-hover-invalid: transparent; - --system-stepper-border-color-focus-invalid: transparent; - --system-stepper-border-color-focus-hover-invalid: transparent; - --system-stepper-border-color-keyboard-focus-invalid: transparent; - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); - --system-stepper-button-border-width-disabled: 0; - --system-stepper-buttons-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-300 - ); - --system-stepper-button-background-color-focus: var(--spectrum-gray-400); + --system-stepper-border-width: var(--spectrum-border-width-200); + --system-stepper-border-color: var(--spectrum-gray-400); + --system-stepper-border-color-hover: var(--spectrum-gray-500); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-900); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: solid; + --system-stepper-buttons-border-width: var(--spectrum-border-width-200); + --system-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-stepper-buttons-border-color: transparent; + --system-stepper-buttons-border-color-hover: transparent; + --system-stepper-buttons-border-color-focus: transparent; + --system-stepper-buttons-border-color-keyboard-focus: transparent; + --system-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-stepper-button-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-stepper-button-border-width: 0; + --system-stepper-border-color-invalid: transparent; + --system-stepper-border-color-hover-invalid: transparent; + --system-stepper-border-color-focus-invalid: transparent; + --system-stepper-border-color-focus-hover-invalid: transparent; + --system-stepper-border-color-keyboard-focus-invalid: transparent; + --system-stepper-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); + --system-stepper-button-border-width-disabled: 0; + --system-stepper-buttons-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-stepper-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-size-m-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-s-button-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-size-l-button-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-300 + ); + --system-stepper-button-background-color-focus: var(--spectrum-gray-400); } :host, :root { - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); - --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba( + var(--spectrum-gray-900-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-icon-border-color: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-border-color-light: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-light-opacity) + ); + --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --system-swatch-disabled-icon-color: var(--spectrum-gray-50); + --system-swatch-dash-icon-color: var(--spectrum-gray-800); + --system-swatch-slash-icon-color: var(--spectrum-red-900); + --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-swatch-size: var(--spectrum-swatch-size-medium); + --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); + --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-size-m-disabled-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-m-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); + --system-swatch-size-xs-disabled-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-swatch-size-xs-slash-thickness: var( + --spectrum-swatch-slash-thickness-extra-small + ); + --system-swatch-size-s-size: var(--spectrum-swatch-size-small); + --system-swatch-size-s-disabled-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-swatch-size-s-slash-thickness: var( + --spectrum-swatch-slash-thickness-small + ); + --system-swatch-size-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-swatch-size-l-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); } :host, :root { - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); } :host, :root { - --system-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-opacity-checkerboard-position: left top; + --system-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-opacity-checkerboard-position: left top; } :host, :root { - --system-switch-handle-border-color-default: var(--spectrum-gray-800); - --system-switch-handle-border-color-hover: var(--spectrum-gray-900); - --system-switch-handle-border-color-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-focus: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-800 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-900 - ); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-900 - ); - --system-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-switch-label-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-switch-label-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-switch-label-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-switch-label-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color: var(--spectrum-gray-300); - --system-switch-background-color-disabled: var(--spectrum-gray-300); - --system-switch-background-color-selected-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color-selected-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-switch-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-switch-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-switch-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-switch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-switch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-switch-handle-background-color: var(--spectrum-gray-75); - --system-switch-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-disabled-label-color-default: var( - --spectrum-disabled-content-color - ); - --system-switch-emphasized-background-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-background-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-background-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-background-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-handle-border-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-handle-border-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-control-width: var(--spectrum-switch-control-width-medium); - --system-switch-size-m-control-width: var( - --spectrum-switch-control-width-medium - ); - --system-switch-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-size-m-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-control-label-spacing: var(--spectrum-text-to-control-100); - --system-switch-size-m-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --system-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-size-m-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-font-size: var(--spectrum-font-size-100); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var( - --spectrum-switch-control-width-small - ); - --system-switch-size-s-control-height: var( - --spectrum-switch-control-height-small - ); - --system-switch-size-s-control-label-spacing: var( - --spectrum-text-to-control-75 - ); - --system-switch-size-s-spacing-top-to-control: var( - --spectrum-switch-top-to-control-small - ); - --system-switch-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var( - --spectrum-switch-control-width-large - ); - --system-switch-size-l-control-height: var( - --spectrum-switch-control-height-large - ); - --system-switch-size-l-control-label-spacing: var( - --spectrum-text-to-control-200 - ); - --system-switch-size-l-spacing-top-to-control: var( - --spectrum-switch-top-to-control-large - ); - --system-switch-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var( - --spectrum-switch-control-width-extra-large - ); - --system-switch-size-xl-control-height: var( - --spectrum-switch-control-height-extra-large - ); - --system-switch-size-xl-control-label-spacing: var( - --spectrum-text-to-control-300 - ); - --system-switch-size-xl-spacing-top-to-control: var( - --spectrum-switch-top-to-control-extra-large - ); - --system-switch-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); + --system-switch-handle-border-color-default: var(--spectrum-gray-800); + --system-switch-handle-border-color-hover: var(--spectrum-gray-900); + --system-switch-handle-border-color-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-focus: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-800 + ); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); + --system-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); + --system-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-switch-label-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-background-color-selected-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color-selected-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-switch-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-switch-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-switch-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-switch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-switch-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-disabled-label-color-default: var( + --spectrum-disabled-content-color + ); + --system-switch-emphasized-background-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-background-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-background-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-background-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-handle-border-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-handle-border-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-control-width: var(--spectrum-switch-control-width-medium); + --system-switch-size-m-control-width: var( + --spectrum-switch-control-width-medium + ); + --system-switch-control-height: var(--spectrum-switch-control-height-medium); + --system-switch-size-m-control-height: var( + --spectrum-switch-control-height-medium + ); + --system-switch-control-label-spacing: var(--spectrum-text-to-control-100); + --system-switch-size-m-control-label-spacing: var( + --spectrum-text-to-control-100 + ); + --system-switch-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-size-m-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-font-size: var(--spectrum-font-size-100); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var( + --spectrum-switch-control-width-small + ); + --system-switch-size-s-control-height: var( + --spectrum-switch-control-height-small + ); + --system-switch-size-s-control-label-spacing: var( + --spectrum-text-to-control-75 + ); + --system-switch-size-s-spacing-top-to-control: var( + --spectrum-switch-top-to-control-small + ); + --system-switch-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var( + --spectrum-switch-control-width-large + ); + --system-switch-size-l-control-height: var( + --spectrum-switch-control-height-large + ); + --system-switch-size-l-control-label-spacing: var( + --spectrum-text-to-control-200 + ); + --system-switch-size-l-spacing-top-to-control: var( + --spectrum-switch-top-to-control-large + ); + --system-switch-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var( + --spectrum-switch-control-width-extra-large + ); + --system-switch-size-xl-control-height: var( + --spectrum-switch-control-height-extra-large + ); + --system-switch-size-xl-control-label-spacing: var( + --spectrum-text-to-control-300 + ); + --system-switch-size-xl-spacing-top-to-control: var( + --spectrum-switch-top-to-control-extra-large + ); + --system-switch-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); } :host, :root { - --system-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-medium - ); - --system-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-medium - ); - --system-table-min-header-height: var(--spectrum-component-height-100); - --system-table-min-row-height: var( - --spectrum-table-row-height-medium-regular - ); - --system-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-regular - ); - --system-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-regular - ); - --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --system-table-border-radius: var(--spectrum-corner-radius-100); - --system-table-border-width: var(--spectrum-table-border-divider-width); - --system-table-outer-border-inline-width: var( - --spectrum-table-border-divider-width - ); - --system-table-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-default-vertical-align: top; - --system-table-header-vertical-align: middle; - --system-table-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-row-font-family: var(--spectrum-sans-font-family-stack); - --system-table-row-font-weight: var(--spectrum-regular-font-weight); - --system-table-row-font-style: var(--spectrum-default-font-style); - --system-table-row-font-size: var(--spectrum-font-size-100); - --system-table-row-line-height: var(--spectrum-line-height-100); - --system-table-border-color: var(--spectrum-gray-300); - --system-table-divider-color: var(--spectrum-gray-300); - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-header-text-color: var(--spectrum-body-color); - --system-table-row-background-color: var(--spectrum-gray-50); - --system-table-row-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-table-selected-row-background-color: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity) - ); - --system-table-selected-row-background-color-non-emphasized: rgba( - var(--spectrum-gray-700-rgb), - var(--spectrum-table-selected-row-background-opacity-non-emphasized) - ); - --system-table-row-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-hover-opacity) - ); - --system-table-row-active-color: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-down-opacity) - ); - --system-table-selected-row-background-color-focus: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity-hover) - ); - --system-table-selected-row-background-color-non-emphasized-focus: rgba( - var(--spectrum-gray-700-rgb), - var( - --spectrum-table-selected-row-background-opacity-non-emphasized-hover - ) - ); - --system-table-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-table-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-icon-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --system-table-icon-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-medium - ); - --system-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-regular - ); - --system-table-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-table-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color-rgb), - var(--spectrum-drop-zone-background-color-opacity) - ); - --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - --system-table-transition-duration: var(--spectrum-animation-duration-100); - --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --system-table-summary-row-background-color: var(--spectrum-gray-200); - --system-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-medium - ); - --system-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-100 - ); - --system-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-100 - ); - --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --system-table-collapsible-disclosure-inline-spacing: 0px; - --system-table-disclosure-icon-size: var(--spectrum-component-height-100); - --system-table-collapsible-icon-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-regular - ); - --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - --system-table-cell-background-color: var( - --system-table-row-background-color - ); - --system-table-selected-cell-background-color: var( - --system-table-selected-row-background-color-non-emphasized - ); - --system-table-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --system-table-size-s-min-header-height: var( - --spectrum-component-height-100 - ); - --system-table-size-s-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-small - ); - --system-table-size-s-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-small - ); - --system-table-size-s-min-row-height: var( - --spectrum-table-row-height-small-regular - ); - --system-table-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-regular - ); - --system-table-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-regular - ); - --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-row-font-size: var(--spectrum-font-size-75); - --system-table-size-s-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-small - ); - --system-table-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-regular - ); - --system-table-size-s-section-header-min-height: var( - --spectrum-table-section-header-row-height-small - ); - --system-table-size-s-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-75 - ); - --system-table-size-s-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-75 - ); - --system-table-size-s-disclosure-icon-size: var( - --spectrum-component-height-75 - ); - --system-table-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-regular - ); - --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-size-l-min-header-height: var( - --spectrum-component-height-200 - ); - --system-table-size-l-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-large - ); - --system-table-size-l-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-large - ); - --system-table-size-l-min-row-height: var( - --spectrum-table-row-height-large-regular - ); - --system-table-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-regular - ); - --system-table-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-regular - ); - --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-row-font-size: var(--spectrum-font-size-200); - --system-table-size-l-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-large - ); - --system-table-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-regular - ); - --system-table-size-l-section-header-min-height: var( - --spectrum-table-section-header-row-height-large - ); - --system-table-size-l-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-200 - ); - --system-table-size-l-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-200 - ); - --system-table-size-l-disclosure-icon-size: var( - --spectrum-component-height-200 - ); - --system-table-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-regular - ); - --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-size-xl-min-header-height: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-extra-large - ); - --system-table-size-xl-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-extra-large - ); - --system-table-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-regular - ); - --system-table-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-regular - ); - --system-table-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-regular - ); - --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); - --system-table-size-xl-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-extra-large - ); - --system-table-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-regular - ); - --system-table-size-xl-section-header-min-height: var( - --spectrum-table-section-header-row-height-extra-large - ); - --system-table-size-xl-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-300 - ); - --system-table-size-xl-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-300 - ); - --system-table-size-xl-disclosure-icon-size: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular - ); - --system-table-size-xl-thumbnail-to-text: var( - --spectrum-text-to-visual-300 - ); - --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); - --system-table-compact-min-row-height: var( - --spectrum-table-row-height-medium-compact - ); - --system-table-compact-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-compact - ); - --system-table-compact-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-compact - ); - --system-table-compact-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-compact - ); - --system-table-compact-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-compact - ); - --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-compact-size-s-min-row-height: var( - --spectrum-table-row-height-small-compact - ); - --system-table-compact-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-compact - ); - --system-table-compact-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-compact - ); - --system-table-compact-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-compact - ); - --system-table-compact-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-compact - ); - --system-table-compact-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-50 - ); - --system-table-compact-size-l-min-row-height: var( - --spectrum-table-row-height-large-compact - ); - --system-table-compact-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-compact - ); - --system-table-compact-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-compact - ); - --system-table-compact-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-compact - ); - --system-table-compact-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-compact - ); - --system-table-compact-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-compact-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-compact - ); - --system-table-compact-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-500 - ); - --system-table-spacious-min-row-height: var( - --spectrum-table-row-height-medium-spacious - ); - --system-table-spacious-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-spacious - ); - --system-table-spacious-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-spacious - ); - --system-table-spacious-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-spacious - ); - --system-table-spacious-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-spacious - ); - --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-spacious-size-s-min-row-height: var( - --spectrum-table-row-height-small-spacious - ); - --system-table-spacious-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-spacious - ); - --system-table-spacious-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-spacious - ); - --system-table-spacious-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-spacious - ); - --system-table-spacious-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-spacious - ); - --system-table-spacious-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-spacious-size-l-min-row-height: var( - --spectrum-table-row-height-large-spacious - ); - --system-table-spacious-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-spacious - ); - --system-table-spacious-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-spacious - ); - --system-table-spacious-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-spacious - ); - --system-table-spacious-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-spacious - ); - --system-table-spacious-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-700 - ); - --system-table-spacious-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-spacious - ); - --system-table-spacious-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-800 - ); - --system-table-emphasized-selected-cell-background-color: var( - --system-table-selected-row-background-color - ); - --system-table-emphasized-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --system-table-quiet-border-radius: 0px; - --system-table-quiet-outer-border-inline-width: 0px; - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-100 - ); + --system-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --system-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --system-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --system-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-header-background-color: var(--spectrum-transparent-white-100); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-row-text-color: var(--spectrum-neutral-content-color-default); + --system-table-selected-row-background-color: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity) + ); + --system-table-selected-row-background-color-non-emphasized: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized) + ); + --system-table-row-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-hover-opacity) + ); + --system-table-row-active-color: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-down-opacity) + ); + --system-table-selected-row-background-color-focus: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity-hover) + ); + --system-table-selected-row-background-color-non-emphasized-focus: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover) + ); + --system-table-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-table-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-table-icon-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-focus + ); + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-focus-hover + ); + --system-table-icon-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-medium + ); + --system-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-regular + ); + --system-table-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color-rgb), + var(--spectrum-drop-zone-background-color-opacity) + ); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-medium + ); + --system-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 + ); + --system-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 + ); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-regular + ); + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var( + --system-table-row-background-color + ); + --system-table-selected-cell-background-color: var( + --system-table-selected-row-background-color-non-emphasized + ); + --system-table-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus + ); + --system-table-size-s-min-header-height: var(--spectrum-component-height-100); + --system-table-size-s-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-small + ); + --system-table-size-s-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-small + ); + --system-table-size-s-min-row-height: var( + --spectrum-table-row-height-small-regular + ); + --system-table-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-regular + ); + --system-table-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-regular + ); + --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-row-font-size: var(--spectrum-font-size-75); + --system-table-size-s-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-small + ); + --system-table-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-regular + ); + --system-table-size-s-section-header-min-height: var( + --spectrum-table-section-header-row-height-small + ); + --system-table-size-s-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-75 + ); + --system-table-size-s-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-75 + ); + --system-table-size-s-disclosure-icon-size: var( + --spectrum-component-height-75 + ); + --system-table-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-regular + ); + --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-size-l-min-header-height: var(--spectrum-component-height-200); + --system-table-size-l-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-large + ); + --system-table-size-l-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-large + ); + --system-table-size-l-min-row-height: var( + --spectrum-table-row-height-large-regular + ); + --system-table-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-regular + ); + --system-table-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-regular + ); + --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-row-font-size: var(--spectrum-font-size-200); + --system-table-size-l-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-large + ); + --system-table-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-regular + ); + --system-table-size-l-section-header-min-height: var( + --spectrum-table-section-header-row-height-large + ); + --system-table-size-l-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-200 + ); + --system-table-size-l-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-200 + ); + --system-table-size-l-disclosure-icon-size: var( + --spectrum-component-height-200 + ); + --system-table-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-regular + ); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-extra-large + ); + --system-table-size-xl-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-extra-large + ); + --system-table-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-regular + ); + --system-table-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-regular + ); + --system-table-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-regular + ); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-extra-large + ); + --system-table-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-regular + ); + --system-table-size-xl-section-header-min-height: var( + --spectrum-table-section-header-row-height-extra-large + ); + --system-table-size-xl-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-300 + ); + --system-table-size-xl-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-300 + ); + --system-table-size-xl-disclosure-icon-size: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular + ); + --system-table-size-xl-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var( + --spectrum-table-row-height-medium-compact + ); + --system-table-compact-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-compact + ); + --system-table-compact-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-compact + ); + --system-table-compact-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-compact + ); + --system-table-compact-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-compact + ); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var( + --spectrum-table-row-height-small-compact + ); + --system-table-compact-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-compact + ); + --system-table-compact-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-compact + ); + --system-table-compact-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-compact + ); + --system-table-compact-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-compact + ); + --system-table-compact-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-50 + ); + --system-table-compact-size-l-min-row-height: var( + --spectrum-table-row-height-large-compact + ); + --system-table-compact-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-compact + ); + --system-table-compact-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-compact + ); + --system-table-compact-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-compact + ); + --system-table-compact-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-compact + ); + --system-table-compact-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-compact-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-compact + ); + --system-table-compact-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-500 + ); + --system-table-spacious-min-row-height: var( + --spectrum-table-row-height-medium-spacious + ); + --system-table-spacious-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-spacious + ); + --system-table-spacious-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-spacious + ); + --system-table-spacious-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-spacious + ); + --system-table-spacious-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-spacious + ); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var( + --spectrum-table-row-height-small-spacious + ); + --system-table-spacious-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-spacious + ); + --system-table-spacious-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-spacious + ); + --system-table-spacious-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-spacious + ); + --system-table-spacious-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-spacious + ); + --system-table-spacious-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-spacious-size-l-min-row-height: var( + --spectrum-table-row-height-large-spacious + ); + --system-table-spacious-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-spacious + ); + --system-table-spacious-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-spacious + ); + --system-table-spacious-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-spacious + ); + --system-table-spacious-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-spacious + ); + --system-table-spacious-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-700 + ); + --system-table-spacious-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-spacious + ); + --system-table-spacious-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-800 + ); + --system-table-emphasized-selected-cell-background-color: var( + --system-table-selected-row-background-color + ); + --system-table-emphasized-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-100 + ); } :host, :root { - --system-tabs-font-weight: var(--spectrum-bold-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-medium - ); - --system-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-medium - ); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-medium - ); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-medium - ); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tabs-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-tabs-focus-indicator-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-medium - ); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-300); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-small - ); - --system-tabs-size-s-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-small - ); - --system-tabs-size-s-start-to-edge: var( - --spectrum-tab-item-start-to-edge-small - ); - --system-tabs-size-s-top-to-text: var( - --spectrum-tab-item-top-to-text-small - ); - --system-tabs-size-s-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-small - ); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-small - ); - --system-tabs-size-s-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-small - ); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-large - ); - --system-tabs-size-l-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-large - ); - --system-tabs-size-l-start-to-edge: var( - --spectrum-tab-item-start-to-edge-large - ); - --system-tabs-size-l-top-to-text: var( - --spectrum-tab-item-top-to-text-large - ); - --system-tabs-size-l-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-large - ); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-large - ); - --system-tabs-size-l-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-large - ); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var( - --spectrum-tab-item-height-extra-large - ); - --system-tabs-size-xl-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-extra-large - ); - --system-tabs-size-xl-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-extra-large - ); - --system-tabs-size-xl-start-to-edge: var( - --spectrum-tab-item-start-to-edge-extra-large - ); - --system-tabs-size-xl-top-to-text: var( - --spectrum-tab-item-top-to-text-extra-large - ); - --system-tabs-size-xl-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-extra-large - ); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-extra-large - ); - --system-tabs-size-xl-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-extra-large - ); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var( - --spectrum-accent-content-color-default - ); - --system-tabs-emphasized-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-tabs-emphasized-color-key-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-tabs-emphasized-selection-indicator-color: var( - --spectrum-accent-content-color-default - ); + --system-tabs-font-weight: var(--spectrum-bold-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --system-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --system-tabs-size-s-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); + --system-tabs-size-s-start-to-edge: var( + --spectrum-tab-item-start-to-edge-small + ); + --system-tabs-size-s-top-to-text: var(--spectrum-tab-item-top-to-text-small); + --system-tabs-size-s-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-small + ); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); + --system-tabs-size-s-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --system-tabs-size-l-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); + --system-tabs-size-l-start-to-edge: var( + --spectrum-tab-item-start-to-edge-large + ); + --system-tabs-size-l-top-to-text: var(--spectrum-tab-item-top-to-text-large); + --system-tabs-size-l-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-large + ); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); + --system-tabs-size-l-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var( + --spectrum-tab-item-height-extra-large + ); + --system-tabs-size-xl-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --system-tabs-size-xl-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --system-tabs-size-xl-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); + --system-tabs-size-xl-top-to-text: var( + --spectrum-tab-item-top-to-text-extra-large + ); + --system-tabs-size-xl-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-extra-large + ); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-extra-large + ); + --system-tabs-size-xl-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-extra-large + ); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var( + --spectrum-accent-content-color-default + ); + --system-tabs-emphasized-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-tabs-emphasized-color-key-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-tabs-emphasized-selection-indicator-color: var( + --spectrum-accent-content-color-default + ); } :host, :root { - --system-tag-border-color: var(--spectrum-gray-300); - --system-tag-border-color-hover: var(--spectrum-gray-400); - --system-tag-border-color-active: var(--spectrum-gray-500); - --system-tag-border-color-focus: var(--spectrum-gray-400); - --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --system-tag-size-medium-corner-radius: var( - --spectrum-component-height-100 - ); - --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); - --system-tag-background-color: transparent; - --system-tag-background-color-hover: var(--spectrum-gray-300); - --system-tag-background-color-active: var(--spectrum-gray-400); - --system-tag-background-color-focus: var(--spectrum-gray-300); - --system-tag-content-color: var(--spectrum-neutral-content-color-default); - --system-tag-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-tag-content-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-tag-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-tag-border-color-selected: var( - --spectrum-neutral-background-color-default - ); - --system-tag-border-color-selected-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-tag-border-color-selected-active: var( - --spectrum-neutral-background-color-down - ); - --system-tag-border-color-selected-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); - --system-tag-background-color-disabled: transparent; - --system-tag-size-small-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-75 - ); - --system-tag-size-medium-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-100 - ); - --system-tag-size-large-spacing-inline-start: var( - --spectrum-component-pill-edge-to-visual-200 - ); - --system-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-pill-edge-to-visual-200 - ); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-tag-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-tag-background-color-selected-active: var( - --spectrum-neutral-background-color-selected-down - ); - --system-tag-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var( - --spectrum-negative-color-1000 - ); - --system-tag-border-color-invalid-active: var( - --spectrum-negative-color-1100 - ); - --system-tag-border-color-invalid-focus: var( - --spectrum-negative-color-1000 - ); - --system-tag-content-color-invalid: var( - --spectrum-negative-content-color-default - ); - --system-tag-content-color-invalid-hover: var( - --spectrum-negative-content-color-hover - ); - --system-tag-content-color-invalid-active: var( - --spectrum-negative-content-color-down - ); - --system-tag-content-color-invalid-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-tag-border-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-border-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-border-color-invalid-selected-focus: var( - --spectrum-negative-background-color-down - ); - --system-tag-border-color-invalid-selected-active: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-background-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-background-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-background-color-invalid-selected-active: var( - --spectrum-negative-background-color-down - ); - --system-tag-background-color-invalid-selected-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-border-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-border-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-border-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-background-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-background-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-background-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-background-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-m-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-icon-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-size-m-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --system-tag-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-size-m-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-size-m-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-m-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --system-tag-size-s-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --system-tag-size-s-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --system-tag-size-s-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --system-tag-size-s-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --system-tag-size-s-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-large - ); - --system-tag-size-l-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-label-spacing-block: var( - --spectrum-component-top-to-text-200 - ); - --system-tag-size-l-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --system-tag-size-l-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --system-tag-size-l-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --system-tag-size-l-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); + --system-tag-border-color: var(--spectrum-gray-300); + --system-tag-border-color-hover: var(--spectrum-gray-400); + --system-tag-border-color-active: var(--spectrum-gray-500); + --system-tag-border-color-focus: var(--spectrum-gray-400); + --system-tag-size-small-corner-radius: var(--spectrum-component-height-75); + --system-tag-size-medium-corner-radius: var(--spectrum-component-height-100); + --system-tag-size-large-corner-radius: var(--spectrum-component-height-200); + --system-tag-background-color: transparent; + --system-tag-background-color-hover: var(--spectrum-gray-300); + --system-tag-background-color-active: var(--spectrum-gray-400); + --system-tag-background-color-focus: var(--spectrum-gray-300); + --system-tag-content-color: var(--spectrum-neutral-content-color-default); + --system-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); + --system-tag-content-color-active: var(--spectrum-neutral-content-color-down); + --system-tag-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-tag-border-color-selected: var( + --spectrum-neutral-background-color-default + ); + --system-tag-border-color-selected-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-tag-border-color-selected-active: var( + --spectrum-neutral-background-color-down + ); + --system-tag-border-color-selected-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-tag-border-color-disabled: var(--spectrum-disabled-border-color); + --system-tag-background-color-disabled: transparent; + --system-tag-size-small-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-tag-size-medium-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-tag-size-large-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-tag-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-tag-background-color-selected-active: var( + --spectrum-neutral-background-color-selected-down + ); + --system-tag-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); + --system-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); + --system-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); + --system-tag-content-color-invalid: var( + --spectrum-negative-content-color-default + ); + --system-tag-content-color-invalid-hover: var( + --spectrum-negative-content-color-hover + ); + --system-tag-content-color-invalid-active: var( + --spectrum-negative-content-color-down + ); + --system-tag-content-color-invalid-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-tag-border-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-border-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-border-color-invalid-selected-focus: var( + --spectrum-negative-background-color-down + ); + --system-tag-border-color-invalid-selected-active: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-background-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-background-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-background-color-invalid-selected-active: var( + --spectrum-negative-background-color-down + ); + --system-tag-background-color-invalid-selected-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-border-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-border-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-border-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-background-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-background-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-background-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-background-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-size-m-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-size-m-label-spacing-block: var( + --spectrum-component-top-to-text-100 + ); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var( + --system-tag-size-medium-corner-radius + ); + --system-tag-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-size-m-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-size-m-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-m-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-small + ); + --system-tag-size-s-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-label-spacing-block: var( + --spectrum-component-top-to-text-75 + ); + --system-tag-size-s-corner-radius: var(--system-tag-size-small-corner-radius); + --system-tag-size-s-spacing-inline-start: var( + --system-tag-size-small-spacing-inline-start + ); + --system-tag-size-s-label-spacing-inline-end: var( + --system-tag-size-small-label-spacing-inline-end + ); + --system-tag-size-s-clear-button-spacing-inline-end: var( + --system-tag-size-small-clear-button-spacing-inline-end + ); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large + ); + --system-tag-size-l-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-label-spacing-block: var( + --spectrum-component-top-to-text-200 + ); + --system-tag-size-l-corner-radius: var(--system-tag-size-large-corner-radius); + --system-tag-size-l-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start + ); + --system-tag-size-l-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end + ); + --system-tag-size-l-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end + ); } :host, :root { - --system-tag-group-item-margin-block: var(--spectrum-spacing-75); - --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); } :host, :root { - --system-textfield-border-color: var(--spectrum-gray-400); - --system-textfield-border-color-hover: var(--spectrum-gray-500); - --system-textfield-border-color-focus: var(--spectrum-gray-800); - --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-200); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); + --system-textfield-border-color: var(--spectrum-gray-400); + --system-textfield-border-color-hover: var(--spectrum-gray-500); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-200); + --system-textfield-texfield-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-textfield-width: 240px; + --system-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 + ); + --system-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet + ); + --system-textfield-label-spacing-block: var( + --spectrum-field-label-to-component + ); + --system-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component + ); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet + ); + --system-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet + ); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight + ); + --system-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 + ); + --system-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field + ); + --system-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-50); + --system-textfield-text-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus + ); + --system-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-textfield-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-textfield-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + --system-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-textfield-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width + ); + --system-textfield-text-area-min-block-size: var( + --spectrum-text-area-minimum-height + ); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-size-m-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-m-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-size-m-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --system-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-size-m-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); + --system-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-m-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-size-m-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-size-m-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-m-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); + --system-textfield-size-s-placeholder-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 + ); + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-textfield-size-l-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-l-placeholder-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-l-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-l-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 + ); + --system-textfield-size-l-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 + ); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large + ); + --system-textfield-size-l-character-count-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-size-l-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-size-l-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large + ); + --system-textfield-size-l-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large + ); + --system-textfield-size-l-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 + ); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-textfield-size-xl-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-xl-placeholder-font-size: var( + --spectrum-font-size-300 + ); + --system-textfield-size-xl-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-xl-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 + ); + --system-textfield-size-xl-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 + ); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large + ); + --system-textfield-size-xl-character-count-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-xl-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 + ); + --system-textfield-size-xl-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large + ); + --system-textfield-size-xl-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large + ); + --system-textfield-size-xl-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 + ); } :host, :root { - --system-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --system-thumbnail-border-width: var(--spectrum-border-width-100); - --system-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) - ); - --system-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); - --system-thumbnail-layer-border-color-inner: var(--spectrum-white); - --system-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); - --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); - --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); - --system-thumbnail-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-thumbnail-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); - --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); - --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); - --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); - --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); - --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); - --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); - --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); - --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); - --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); - --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); - --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); + --system-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); + --system-thumbnail-border-width: var(--spectrum-border-width-100); + --system-thumbnail-border-color-rgba: rgba( + var(--spectrum-gray-800-rgb), + var(--spectrum-thumbnail-border-opacity) + ); + --system-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); + --system-thumbnail-layer-border-color-inner: var(--spectrum-white); + --system-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); + --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --system-thumbnail-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-thumbnail-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-thumbnail-color-opacity-disabled: var( + --spectrum-thumbnail-opacity-disabled + ); + --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); + --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); + --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); + --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); + --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); + --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); + --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); + --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); + --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); + --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); + --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); } :host, :root { - --system-toast-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); - --system-toast-divider-color: var(--spectrum-transparent-white-300); + --system-toast-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --system-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --system-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); } :host, :root { - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-background-color-default - ); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var( - --spectrum-component-top-to-text-75 - ); - --system-tooltip-spacing-block-end: var( - --spectrum-component-bottom-to-text-75 - ); - --system-tooltip-icon-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tooltip-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-tooltip-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-tooltip-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var( - --system-tooltip-backgound-color-default-neutral - ); + --system-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-background-color-default + ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); } :host, :root { - --system-tray-exit-animation-delay: 0ms; - --system-tray-entry-animation-delay: 160ms; - --system-tray-max-inline-size: 375px; - --system-tray-spacing-edge-to-safe-zone: 64px; - --system-tray-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-tray-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-tray-corner-radius: var(--spectrum-corner-radius-100); - --system-tray-background-color: var(--spectrum-background-layer-2-color); + --system-tray-exit-animation-delay: 0ms; + --system-tray-entry-animation-delay: 160ms; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var(--spectrum-animation-duration-100); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); } :host, :root { - --system-underlay-background-entry-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-underlay-background-exit-animation-ease: var( - --spectrum-animation-ease-in - ); - --system-underlay-background-entry-animation-ease: var( - --spectrum-animation-ease-out - ); - --system-underlay-background-entry-animation-duration: var( - --spectrum-animation-duration-600 - ); - --system-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-300 - ); - --system-underlay-background-exit-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-underlay-background-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-overlay-opacity) - ); + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out + ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); } :host, :root { - --system-heading-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-heading-font-color: var(--spectrum-heading-color); - --system-heading-font-size: var(--spectrum-heading-size-m); - --system-heading-size-m-font-size: var(--spectrum-heading-size-m); - --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); - --system-heading-size-xxs-cjk-font-size: var( - --spectrum-heading-cjk-size-xxs - ); - --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); - --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); - --system-heading-size-s-font-size: var(--spectrum-heading-size-s); - --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); - --system-heading-size-l-font-size: var(--spectrum-heading-size-l); - --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); - --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); - --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); - --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); - --system-heading-size-xxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxl - ); - --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); - --system-heading-size-xxxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxxl - ); - --system-body-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-body-font-color: var(--spectrum-body-color); - --system-body-font-size: var(--spectrum-body-size-m); - --system-body-size-m-font-size: var(--spectrum-body-size-m); - --system-body-size-xs-font-size: var(--spectrum-body-size-xs); - --system-body-size-s-font-size: var(--spectrum-body-size-s); - --system-body-size-l-font-size: var(--spectrum-body-size-l); - --system-body-size-xl-font-size: var(--spectrum-body-size-xl); - --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); - --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); - --system-detail-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-detail-font-color: var(--spectrum-detail-color); - --system-detail-font-size: var(--spectrum-detail-size-m); - --system-detail-size-m-font-size: var(--spectrum-detail-size-m); - --system-detail-size-s-font-size: var(--spectrum-detail-size-s); - --system-detail-size-l-font-size: var(--spectrum-detail-size-l); - --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); - --system-code-font-family: var(--spectrum-code-font-family-stack); - --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-code-font-color: var(--spectrum-code-color); - --system-code-font-size: var(--spectrum-code-size-m); - --system-code-size-m-font-size: var(--spectrum-code-size-m); - --system-code-size-xs-font-size: var(--spectrum-code-size-xs); - --system-code-size-s-font-size: var(--spectrum-code-size-s); - --system-code-size-l-font-size: var(--spectrum-code-size-l); - --system-code-size-xl-font-size: var(--spectrum-code-size-xl); + --system-heading-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxxl + ); + --system-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); } diff --git a/tools/styles/tokens/express/large-vars.css b/tools/styles/tokens/express/large-vars.css index 2b61a137b6..e975f85476 100644 --- a/tools/styles/tokens/express/large-vars.css +++ b/tools/styles/tokens/express/large-vars.css @@ -1,69 +1,69 @@ :host, :root { - --spectrum-checkbox-control-size-small: 18px; - --spectrum-checkbox-control-size-medium: 20px; - --spectrum-checkbox-control-size-large: 22px; - --spectrum-checkbox-control-size-extra-large: 26px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 10px; - --spectrum-checkbox-top-to-control-large: 14px; - --spectrum-checkbox-top-to-control-extra-large: 17px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 18px; - --spectrum-switch-control-height-medium: 20px; - --spectrum-switch-control-height-large: 22px; - --spectrum-switch-control-height-extra-large: 26px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 10px; - --spectrum-switch-top-to-control-large: 14px; - --spectrum-switch-top-to-control-extra-large: 17px; - --spectrum-radio-button-control-size-small: 18px; - --spectrum-radio-button-control-size-medium: 20px; - --spectrum-radio-button-control-size-large: 22px; - --spectrum-radio-button-control-size-extra-large: 26px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 10px; - --spectrum-radio-button-top-to-control-large: 14px; - --spectrum-radio-button-top-to-control-extra-large: 17px; - --spectrum-slider-control-height-small: 22px; - --spectrum-slider-control-height-medium: 24px; - --spectrum-slider-control-height-large: 28px; - --spectrum-slider-control-height-extra-large: 30px; - --spectrum-slider-handle-size-small: 22px; - --spectrum-slider-handle-size-medium: 24px; - --spectrum-slider-handle-size-large: 28px; - --spectrum-slider-handle-size-extra-large: 30px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 4px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 12px; - --spectrum-slider-bottom-to-handle-extra-large: 15px; - --spectrum-corner-radius-75: 4px; - --spectrum-corner-radius-100: 8px; - --spectrum-corner-radius-200: 16px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; - --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; + --spectrum-checkbox-control-size-small: 18px; + --spectrum-checkbox-control-size-medium: 20px; + --spectrum-checkbox-control-size-large: 22px; + --spectrum-checkbox-control-size-extra-large: 26px; + --spectrum-checkbox-top-to-control-small: 6px; + --spectrum-checkbox-top-to-control-medium: 10px; + --spectrum-checkbox-top-to-control-large: 14px; + --spectrum-checkbox-top-to-control-extra-large: 17px; + --spectrum-switch-control-width-small: 32px; + --spectrum-switch-control-width-medium: 36px; + --spectrum-switch-control-width-large: 41px; + --spectrum-switch-control-width-extra-large: 46px; + --spectrum-switch-control-height-small: 18px; + --spectrum-switch-control-height-medium: 20px; + --spectrum-switch-control-height-large: 22px; + --spectrum-switch-control-height-extra-large: 26px; + --spectrum-switch-top-to-control-small: 6px; + --spectrum-switch-top-to-control-medium: 10px; + --spectrum-switch-top-to-control-large: 14px; + --spectrum-switch-top-to-control-extra-large: 17px; + --spectrum-radio-button-control-size-small: 18px; + --spectrum-radio-button-control-size-medium: 20px; + --spectrum-radio-button-control-size-large: 22px; + --spectrum-radio-button-control-size-extra-large: 26px; + --spectrum-radio-button-top-to-control-small: 6px; + --spectrum-radio-button-top-to-control-medium: 10px; + --spectrum-radio-button-top-to-control-large: 14px; + --spectrum-radio-button-top-to-control-extra-large: 17px; + --spectrum-slider-control-height-small: 22px; + --spectrum-slider-control-height-medium: 24px; + --spectrum-slider-control-height-large: 28px; + --spectrum-slider-control-height-extra-large: 30px; + --spectrum-slider-handle-size-small: 22px; + --spectrum-slider-handle-size-medium: 24px; + --spectrum-slider-handle-size-large: 28px; + --spectrum-slider-handle-size-extra-large: 30px; + --spectrum-slider-handle-border-width-down-small: var( + --spectrum-border-width-200 + ); + --spectrum-slider-handle-border-width-down-medium: var( + --spectrum-border-width-200 + ); + --spectrum-slider-handle-border-width-down-large: var( + --spectrum-border-width-200 + ); + --spectrum-slider-handle-border-width-down-extra-large: var( + --spectrum-border-width-200 + ); + --spectrum-slider-bottom-to-handle-small: 4px; + --spectrum-slider-bottom-to-handle-medium: 8px; + --spectrum-slider-bottom-to-handle-large: 12px; + --spectrum-slider-bottom-to-handle-extra-large: 15px; + --spectrum-corner-radius-75: 4px; + --spectrum-corner-radius-100: 8px; + --spectrum-corner-radius-200: 16px; + --spectrum-drop-shadow-x: 0px; + --spectrum-drop-shadow-y: 4px; + --spectrum-drop-shadow-blur: 16px; + --spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0"; + --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; - --spectrum-dialog-confirm-border-radius: 8px; + --spectrum-dialog-confirm-border-radius: 8px; - --spectrum-dial-border-radius: 15px; + --spectrum-dial-border-radius: 15px; - --spectrum-assetcard-focus-ring-border-radius: 12px; + --spectrum-assetcard-focus-ring-border-radius: 12px; } diff --git a/tools/styles/tokens/express/light-vars.css b/tools/styles/tokens/express/light-vars.css index 04b10578e0..a8ce40ded4 100644 --- a/tools/styles/tokens/express/light-vars.css +++ b/tools/styles/tokens/express/light-vars.css @@ -1,16 +1,12 @@ :host, :root { - --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); - --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); + --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); - --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-900 - ); - --spectrum-assetcard-border-color-selected-down: var( - --spectrum-indigo-1000 - ); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-900 - ); + --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-indigo-900 + ); } diff --git a/tools/styles/tokens/express/medium-vars.css b/tools/styles/tokens/express/medium-vars.css index c2677d2479..4113cd9189 100644 --- a/tools/styles/tokens/express/medium-vars.css +++ b/tools/styles/tokens/express/medium-vars.css @@ -1,69 +1,69 @@ :host, :root { - --spectrum-checkbox-control-size-small: 14px; - --spectrum-checkbox-control-size-medium: 16px; - --spectrum-checkbox-control-size-large: 18px; - --spectrum-checkbox-control-size-extra-large: 20px; - --spectrum-checkbox-top-to-control-small: 5px; - --spectrum-checkbox-top-to-control-medium: 8px; - --spectrum-checkbox-top-to-control-large: 11px; - --spectrum-checkbox-top-to-control-extra-large: 14px; - --spectrum-switch-control-width-small: 25px; - --spectrum-switch-control-width-medium: 28px; - --spectrum-switch-control-width-large: 32px; - --spectrum-switch-control-width-extra-large: 35px; - --spectrum-switch-control-height-small: 14px; - --spectrum-switch-control-height-medium: 16px; - --spectrum-switch-control-height-large: 18px; - --spectrum-switch-control-height-extra-large: 20px; - --spectrum-switch-top-to-control-small: 5px; - --spectrum-switch-top-to-control-medium: 8px; - --spectrum-switch-top-to-control-large: 11px; - --spectrum-switch-top-to-control-extra-large: 14px; - --spectrum-radio-button-control-size-small: 14px; - --spectrum-radio-button-control-size-medium: 16px; - --spectrum-radio-button-control-size-large: 18px; - --spectrum-radio-button-control-size-extra-large: 20px; - --spectrum-radio-button-top-to-control-small: 5px; - --spectrum-radio-button-top-to-control-medium: 8px; - --spectrum-radio-button-top-to-control-large: 11px; - --spectrum-radio-button-top-to-control-extra-large: 14px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 24px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 24px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-bottom-to-handle-small: 3px; - --spectrum-slider-bottom-to-handle-medium: 6px; - --spectrum-slider-bottom-to-handle-large: 9px; - --spectrum-slider-bottom-to-handle-extra-large: 12px; - --spectrum-corner-radius-75: 3px; - --spectrum-corner-radius-100: 6px; - --spectrum-corner-radius-200: 12px; - --spectrum-drop-shadow-x: 0px; - --spectrum-drop-shadow-y: 4px; - --spectrum-drop-shadow-blur: 16px; - --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; + --spectrum-checkbox-control-size-small: 14px; + --spectrum-checkbox-control-size-medium: 16px; + --spectrum-checkbox-control-size-large: 18px; + --spectrum-checkbox-control-size-extra-large: 20px; + --spectrum-checkbox-top-to-control-small: 5px; + --spectrum-checkbox-top-to-control-medium: 8px; + --spectrum-checkbox-top-to-control-large: 11px; + --spectrum-checkbox-top-to-control-extra-large: 14px; + --spectrum-switch-control-width-small: 25px; + --spectrum-switch-control-width-medium: 28px; + --spectrum-switch-control-width-large: 32px; + --spectrum-switch-control-width-extra-large: 35px; + --spectrum-switch-control-height-small: 14px; + --spectrum-switch-control-height-medium: 16px; + --spectrum-switch-control-height-large: 18px; + --spectrum-switch-control-height-extra-large: 20px; + --spectrum-switch-top-to-control-small: 5px; + --spectrum-switch-top-to-control-medium: 8px; + --spectrum-switch-top-to-control-large: 11px; + --spectrum-switch-top-to-control-extra-large: 14px; + --spectrum-radio-button-control-size-small: 14px; + --spectrum-radio-button-control-size-medium: 16px; + --spectrum-radio-button-control-size-large: 18px; + --spectrum-radio-button-control-size-extra-large: 20px; + --spectrum-radio-button-top-to-control-small: 5px; + --spectrum-radio-button-top-to-control-medium: 8px; + --spectrum-radio-button-top-to-control-large: 11px; + --spectrum-radio-button-top-to-control-extra-large: 14px; + --spectrum-slider-control-height-small: 18px; + --spectrum-slider-control-height-medium: 20px; + --spectrum-slider-control-height-large: 22px; + --spectrum-slider-control-height-extra-large: 24px; + --spectrum-slider-handle-size-small: 18px; + --spectrum-slider-handle-size-medium: 20px; + --spectrum-slider-handle-size-large: 22px; + --spectrum-slider-handle-size-extra-large: 24px; + --spectrum-slider-handle-border-width-down-small: var( + --spectrum-border-width-200 + ); + --spectrum-slider-handle-border-width-down-medium: var( + --spectrum-border-width-200 + ); + --spectrum-slider-handle-border-width-down-large: var( + --spectrum-border-width-200 + ); + --spectrum-slider-handle-border-width-down-extra-large: var( + --spectrum-border-width-200 + ); + --spectrum-slider-bottom-to-handle-small: 3px; + --spectrum-slider-bottom-to-handle-medium: 6px; + --spectrum-slider-bottom-to-handle-large: 9px; + --spectrum-slider-bottom-to-handle-extra-large: 12px; + --spectrum-corner-radius-75: 3px; + --spectrum-corner-radius-100: 6px; + --spectrum-corner-radius-200: 12px; + --spectrum-drop-shadow-x: 0px; + --spectrum-drop-shadow-y: 4px; + --spectrum-drop-shadow-blur: 16px; + --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - --spectrum-dialog-confirm-border-radius: 6px; + --spectrum-dialog-confirm-border-radius: 6px; - --spectrum-dial-border-radius: 12px; + --spectrum-dial-border-radius: 12px; - --spectrum-assetcard-focus-ring-border-radius: 10px; + --spectrum-assetcard-focus-ring-border-radius: 10px; } diff --git a/tools/styles/tokens/global-vars.css b/tools/styles/tokens/global-vars.css index 4fe2d66fd4..125645ab20 100644 --- a/tools/styles/tokens/global-vars.css +++ b/tools/styles/tokens/global-vars.css @@ -1,972 +1,928 @@ :host, :root { - --spectrum-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-static-white-focus-indicator-color: var(--spectrum-white); - --spectrum-static-black-focus-indicator-color: var(--spectrum-black); - --spectrum-overlay-color: var(--spectrum-black); - --spectrum-opacity-disabled: 0.3; - --spectrum-neutral-subdued-content-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --spectrum-accent-content-color-selected: var( - --spectrum-accent-content-color-down - ); - --spectrum-disabled-background-color: var(--spectrum-gray-200); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-200 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-200 - ); - --spectrum-background-opacity-default: 0; - --spectrum-background-opacity-hover: 0.1; - --spectrum-background-opacity-down: 0.1; - --spectrum-background-opacity-key-focus: 0.1; - --spectrum-neutral-content-color-default: var(--spectrum-gray-800); - --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-content-color-focus-hover: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-focus: var( - --spectrum-neutral-content-color-down - ); - --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); - --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900); - --spectrum-neutral-subdued-content-color-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); - --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down: var(--spectrum-accent-color-1100); - --spectrum-accent-content-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-content-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-content-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-500 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-500 - ); - --spectrum-disabled-border-color: var(--spectrum-gray-300); - --spectrum-disabled-static-white-border-color: var( - --spectrum-transparent-white-300 - ); - --spectrum-disabled-static-black-border-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-negative-border-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-border-color-focus-hover: var( - --spectrum-negative-border-color-down - ); - --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-negative-border-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-swatch-border-color: var(--spectrum-gray-900); - --spectrum-swatch-border-opacity: 0.51; - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); - --spectrum-swatch-disabled-icon-border-opacity: 0.51; - --spectrum-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color: var(--spectrum-gray-900); - --spectrum-color-area-border-opacity: 0.1; - --spectrum-color-slider-border-color: var(--spectrum-gray-900); - --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); - --spectrum-color-loupe-outer-border: var(--spectrum-white); - --spectrum-card-selection-background-color: var(--spectrum-gray-100); - --spectrum-card-selection-background-color-opacity: 0.95; - --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-background-color-opacity: 0.1; - --spectrum-drop-zone-background-color-opacity-filled: 0.3; - --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); - --spectrum-color-handle-inner-border-color: var(--spectrum-black); - --spectrum-color-handle-inner-border-opacity: 0.42; - --spectrum-color-handle-outer-border-color: var(--spectrum-black); - --spectrum-color-handle-outer-border-opacity: var( - --spectrum-color-handle-inner-border-opacity - ); - --spectrum-color-handle-drop-shadow-color: var( - --spectrum-drop-shadow-color - ); - --spectrum-floating-action-button-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); - --spectrum-floating-action-button-shadow-color: var( - --spectrum-floating-action-button-drop-shadow-color - ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; - --spectrum-white-rgb: 255, 255, 255; - --spectrum-white: rgba(var(--spectrum-white-rgb)); - --spectrum-transparent-white-100-rgb: 255, 255, 255; - --spectrum-transparent-white-100-opacity: 0; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - --spectrum-transparent-white-200-rgb: 255, 255, 255; - --spectrum-transparent-white-200-opacity: 0.1; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); - --spectrum-transparent-white-300-rgb: 255, 255, 255; - --spectrum-transparent-white-300-opacity: 0.25; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); - --spectrum-transparent-white-400-rgb: 255, 255, 255; - --spectrum-transparent-white-400-opacity: 0.4; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); - --spectrum-transparent-white-500-rgb: 255, 255, 255; - --spectrum-transparent-white-500-opacity: 0.55; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); - --spectrum-transparent-white-600-rgb: 255, 255, 255; - --spectrum-transparent-white-600-opacity: 0.7; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); - --spectrum-transparent-white-700-rgb: 255, 255, 255; - --spectrum-transparent-white-700-opacity: 0.8; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); - --spectrum-transparent-white-800-rgb: 255, 255, 255; - --spectrum-transparent-white-800-opacity: 0.9; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); - --spectrum-transparent-white-900-rgb: 255, 255, 255; - --spectrum-transparent-white-900: rgba( - var(--spectrum-transparent-white-900-rgb) - ); - --spectrum-black-rgb: 0, 0, 0; - --spectrum-black: rgba(var(--spectrum-black-rgb)); - --spectrum-transparent-black-100-rgb: 0, 0, 0; - --spectrum-transparent-black-100-opacity: 0; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); - --spectrum-transparent-black-200-rgb: 0, 0, 0; - --spectrum-transparent-black-200-opacity: 0.1; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --spectrum-transparent-black-300-rgb: 0, 0, 0; - --spectrum-transparent-black-300-opacity: 0.25; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); - --spectrum-transparent-black-400-rgb: 0, 0, 0; - --spectrum-transparent-black-400-opacity: 0.4; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); - --spectrum-transparent-black-500-rgb: 0, 0, 0; - --spectrum-transparent-black-500-opacity: 0.55; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); - --spectrum-transparent-black-600-rgb: 0, 0, 0; - --spectrum-transparent-black-600-opacity: 0.7; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); - --spectrum-transparent-black-700-rgb: 0, 0, 0; - --spectrum-transparent-black-700-opacity: 0.8; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); - --spectrum-transparent-black-800-rgb: 0, 0, 0; - --spectrum-transparent-black-800-opacity: 0.9; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); - --spectrum-transparent-black-900-rgb: 0, 0, 0; - --spectrum-transparent-black-900: rgba( - var(--spectrum-transparent-black-900-rgb) - ); - --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); - --spectrum-asterisk-icon-size-75: 8px; - --spectrum-radio-button-selection-indicator: 4px; - --spectrum-field-label-top-margin-small: 0px; - --spectrum-field-label-to-component: 0px; - --spectrum-help-text-to-component: 0px; - --spectrum-status-light-dot-size-small: 8px; - --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; - --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --spectrum-swatch-rectangle-width-multiplier: 2; - --spectrum-swatch-slash-thickness-extra-small: 2px; - --spectrum-swatch-slash-thickness-small: 3px; - --spectrum-swatch-slash-thickness-medium: 4px; - --spectrum-swatch-slash-thickness-large: 5px; - --spectrum-progress-bar-minimum-width: 48px; - --spectrum-progress-bar-maximum-width: 768px; - --spectrum-meter-minimum-width: 48px; - --spectrum-meter-maximum-width: 768px; - --spectrum-meter-default-width: var(--spectrum-meter-width); - --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; - --spectrum-text-field-minimum-width-multiplier: 1.5; - --spectrum-combo-box-minimum-width-multiplier: 2.5; - --spectrum-combo-box-quiet-minimum-width-multiplier: 2; - --spectrum-combo-box-visual-to-field-button-quiet: 0px; - --spectrum-alert-dialog-minimum-width: 288px; - --spectrum-alert-dialog-maximum-width: 480px; - --spectrum-contextual-help-minimum-width: 268px; - --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); - --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); - --spectrum-breadcrumbs-end-edge-to-text: 0px; - --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; - --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; - --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; - --spectrum-alert-banner-to-top-workflow-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --spectrum-alert-banner-to-top-text: var( - --spectrum-alert-banner-top-to-text - ); - --spectrum-alert-banner-to-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --spectrum-color-area-border-width: var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100); - --spectrum-color-wheel-color-area-margin: 12px; - --spectrum-color-slider-border-width: 1px; - --spectrum-color-slider-border-rounding: 4px; - --spectrum-floating-action-button-drop-shadow-blur: 12px; - --spectrum-floating-action-button-drop-shadow-y: 4px; - --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 3; - --spectrum-color-loupe-height: 64px; - --spectrum-color-loupe-width: 48px; - --spectrum-color-loupe-bottom-to-color-handle: 12px; - --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); - --spectrum-color-loupe-inner-border-width: 1px; - --spectrum-color-loupe-drop-shadow-y: 2px; - --spectrum-color-loupe-drop-shadow-blur: 8px; - --spectrum-card-minimum-width: 100px; - --spectrum-card-preview-minimum-height: 130px; - --spectrum-card-selection-background-size: 40px; - --spectrum-drop-zone-width: 428px; - --spectrum-drop-zone-content-maximum-width: var( - --spectrum-illustrated-message-maximum-width - ); - --spectrum-drop-zone-border-dash-length: 8px; - --spectrum-drop-zone-border-dash-gap: 4px; - --spectrum-drop-zone-title-size: var( - --spectrum-illustrated-message-title-size - ); - --spectrum-drop-zone-cjk-title-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --spectrum-drop-zone-body-size: var( - --spectrum-illustrated-message-body-size - ); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; - --spectrum-color-handle-border-width: var(--spectrum-border-width-200); - --spectrum-color-handle-inner-border-width: 1px; - --spectrum-color-handle-outer-border-width: 1px; - --spectrum-color-handle-drop-shadow-x: 0; - --spectrum-color-handle-drop-shadow-y: 0; - --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-edge-to-content: 16px; - --spectrum-table-border-divider-width: 1px; - --spectrum-tab-item-height-small: var(--spectrum-component-height-200); - --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); - --spectrum-tab-item-height-large: var(--spectrum-component-height-400); - --spectrum-tab-item-height-extra-large: var( - --spectrum-component-height-500 - ); - --spectrum-tab-item-compact-height-small: var( - --spectrum-component-height-75 - ); - --spectrum-tab-item-compact-height-medium: var( - --spectrum-component-height-100 - ); - --spectrum-tab-item-compact-height-large: var( - --spectrum-component-height-200 - ); - --spectrum-tab-item-compact-height-extra-large: var( - --spectrum-component-height-300 - ); - --spectrum-tab-item-start-to-edge-quiet: 0px; - --spectrum-in-field-button-width-stacked-small: 20px; - --spectrum-in-field-button-width-stacked-medium: 28px; - --spectrum-in-field-button-width-stacked-large: 36px; - --spectrum-in-field-button-width-stacked-extra-large: 44px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; - --spectrum-android-elevation: 2dp; - --spectrum-spacing-50: 2px; - --spectrum-spacing-75: 4px; - --spectrum-spacing-100: 8px; - --spectrum-spacing-200: 12px; - --spectrum-spacing-300: 16px; - --spectrum-spacing-400: 24px; - --spectrum-spacing-500: 32px; - --spectrum-spacing-600: 40px; - --spectrum-spacing-700: 48px; - --spectrum-spacing-800: 64px; - --spectrum-spacing-900: 80px; - --spectrum-spacing-1000: 96px; - --spectrum-focus-indicator-thickness: 2px; - --spectrum-focus-indicator-gap: 2px; - --spectrum-border-width-200: 2px; - --spectrum-border-width-400: 4px; - --spectrum-field-edge-to-text-quiet: 0px; - --spectrum-field-edge-to-visual-quiet: 0px; - --spectrum-field-edge-to-border-quiet: 0px; - --spectrum-field-edge-to-alert-icon-quiet: 0px; - --spectrum-field-edge-to-validation-icon-quiet: 0px; - --spectrum-text-underline-thickness: 1px; - --spectrum-text-underline-gap: 1px; - --spectrum-informative-color-100: var(--spectrum-blue-100); - --spectrum-informative-color-200: var(--spectrum-blue-200); - --spectrum-informative-color-300: var(--spectrum-blue-300); - --spectrum-informative-color-400: var(--spectrum-blue-400); - --spectrum-informative-color-500: var(--spectrum-blue-500); - --spectrum-informative-color-600: var(--spectrum-blue-600); - --spectrum-informative-color-700: var(--spectrum-blue-700); - --spectrum-informative-color-800: var(--spectrum-blue-800); - --spectrum-informative-color-900: var(--spectrum-blue-900); - --spectrum-informative-color-1000: var(--spectrum-blue-1000); - --spectrum-informative-color-1100: var(--spectrum-blue-1100); - --spectrum-informative-color-1200: var(--spectrum-blue-1200); - --spectrum-informative-color-1300: var(--spectrum-blue-1300); - --spectrum-informative-color-1400: var(--spectrum-blue-1400); - --spectrum-negative-color-100: var(--spectrum-red-100); - --spectrum-negative-color-200: var(--spectrum-red-200); - --spectrum-negative-color-300: var(--spectrum-red-300); - --spectrum-negative-color-400: var(--spectrum-red-400); - --spectrum-negative-color-500: var(--spectrum-red-500); - --spectrum-negative-color-600: var(--spectrum-red-600); - --spectrum-negative-color-700: var(--spectrum-red-700); - --spectrum-negative-color-800: var(--spectrum-red-800); - --spectrum-negative-color-900: var(--spectrum-red-900); - --spectrum-negative-color-1000: var(--spectrum-red-1000); - --spectrum-negative-color-1100: var(--spectrum-red-1100); - --spectrum-negative-color-1200: var(--spectrum-red-1200); - --spectrum-negative-color-1300: var(--spectrum-red-1300); - --spectrum-negative-color-1400: var(--spectrum-red-1400); - --spectrum-notice-color-100: var(--spectrum-orange-100); - --spectrum-notice-color-200: var(--spectrum-orange-200); - --spectrum-notice-color-300: var(--spectrum-orange-300); - --spectrum-notice-color-400: var(--spectrum-orange-400); - --spectrum-notice-color-500: var(--spectrum-orange-500); - --spectrum-notice-color-600: var(--spectrum-orange-600); - --spectrum-notice-color-700: var(--spectrum-orange-700); - --spectrum-notice-color-800: var(--spectrum-orange-800); - --spectrum-notice-color-900: var(--spectrum-orange-900); - --spectrum-notice-color-1000: var(--spectrum-orange-1000); - --spectrum-notice-color-1100: var(--spectrum-orange-1100); - --spectrum-notice-color-1200: var(--spectrum-orange-1200); - --spectrum-notice-color-1300: var(--spectrum-orange-1300); - --spectrum-notice-color-1400: var(--spectrum-orange-1400); - --spectrum-positive-color-100: var(--spectrum-green-100); - --spectrum-positive-color-200: var(--spectrum-green-200); - --spectrum-positive-color-300: var(--spectrum-green-300); - --spectrum-positive-color-400: var(--spectrum-green-400); - --spectrum-positive-color-500: var(--spectrum-green-500); - --spectrum-positive-color-600: var(--spectrum-green-600); - --spectrum-positive-color-700: var(--spectrum-green-700); - --spectrum-positive-color-800: var(--spectrum-green-800); - --spectrum-positive-color-900: var(--spectrum-green-900); - --spectrum-positive-color-1000: var(--spectrum-green-1000); - --spectrum-positive-color-1100: var(--spectrum-green-1100); - --spectrum-positive-color-1200: var(--spectrum-green-1200); - --spectrum-positive-color-1300: var(--spectrum-green-1300); - --spectrum-positive-color-1400: var(--spectrum-green-1400); - --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: Adobe Clean; - --spectrum-serif-font-family: Adobe Clean Serif; - --spectrum-cjk-font-family: Adobe Clean Han; - --spectrum-light-font-weight: 300; - --spectrum-regular-font-weight: 400; - --spectrum-medium-font-weight: 500; - --spectrum-bold-font-weight: 700; - --spectrum-extra-bold-font-weight: 800; - --spectrum-black-font-weight: 900; - --spectrum-italic-font-style: italic; - --spectrum-default-font-style: normal; - --spectrum-line-height-100: 1.3; - --spectrum-line-height-200: 1.5; - --spectrum-cjk-line-height-100: 1.5; - --spectrum-cjk-line-height-200: 1.7; - --spectrum-cjk-letter-spacing: 0.05em; - --spectrum-heading-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-heading-sans-serif-light-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); - --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); - --spectrum-heading-sans-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-light-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-serif-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-cjk-heavy-strong-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-emphasized-font-weight: var( - --spectrum-light-font-weight - ); - --spectrum-heading-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-heading-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-light-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-heading-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); - --spectrum-heading-size-xl: var(--spectrum-font-size-900); - --spectrum-heading-size-l: var(--spectrum-font-size-700); - --spectrum-heading-size-m: var(--spectrum-font-size-500); - --spectrum-heading-size-s: var(--spectrum-font-size-300); - --spectrum-heading-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); - --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); - --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); - --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); - --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); - --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); - --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); - --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); - --spectrum-heading-line-height: var(--spectrum-line-height-100); - --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-heading-margin-top-multiplier: 0.88888889; - --spectrum-heading-margin-bottom-multiplier: 0.25; - --spectrum-heading-color: var(--spectrum-gray-900); - --spectrum-body-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-serif-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-body-sans-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-body-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-body-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-body-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-body-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-body-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-body-size-xxxl: var(--spectrum-font-size-600); - --spectrum-body-size-xxl: var(--spectrum-font-size-500); - --spectrum-body-size-xl: var(--spectrum-font-size-400); - --spectrum-body-size-l: var(--spectrum-font-size-300); - --spectrum-body-size-m: var(--spectrum-font-size-200); - --spectrum-body-size-s: var(--spectrum-font-size-100); - --spectrum-body-size-xs: var(--spectrum-font-size-75); - --spectrum-body-line-height: var(--spectrum-line-height-200); - --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-body-margin-multiplier: 0.75; - --spectrum-body-color: var(--spectrum-gray-800); - --spectrum-detail-sans-serif-font-family: var( - --spectrum-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); - --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); - --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); - --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); - --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-strong-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-detail-sans-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-serif-light-strong-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-cjk-light-strong-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-cjk-light-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-sans-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-detail-serif-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-detail-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-serif-light-strong-emphasized-font-weight: var( - --spectrum-regular-font-weight - ); - --spectrum-detail-serif-light-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( - --spectrum-extra-bold-font-weight - ); - --spectrum-detail-cjk-light-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-detail-size-xl: var(--spectrum-font-size-200); - --spectrum-detail-size-l: var(--spectrum-font-size-100); - --spectrum-detail-size-m: var(--spectrum-font-size-75); - --spectrum-detail-size-s: var(--spectrum-font-size-50); - --spectrum-detail-line-height: var(--spectrum-line-height-100); - --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-detail-margin-top-multiplier: 0.88888889; - --spectrum-detail-margin-bottom-multiplier: 0.25; - --spectrum-detail-letter-spacing: 0.06em; - --spectrum-detail-sans-serif-text-transform: uppercase; - --spectrum-detail-serif-text-transform: uppercase; - --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: Source Code Pro; - --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); - --spectrum-code-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); - --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); - --spectrum-code-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); - --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); - --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); - --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); - --spectrum-code-cjk-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-cjk-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-strong-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-code-strong-emphasized-font-style: var( - --spectrum-italic-font-style - ); - --spectrum-code-cjk-strong-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-code-cjk-strong-emphasized-font-style: var( - --spectrum-default-font-style - ); - --spectrum-code-size-xl: var(--spectrum-font-size-400); - --spectrum-code-size-l: var(--spectrum-font-size-300); - --spectrum-code-size-m: var(--spectrum-font-size-200); - --spectrum-code-size-s: var(--spectrum-font-size-100); - --spectrum-code-size-xs: var(--spectrum-font-size-75); - --spectrum-code-line-height: var(--spectrum-line-height-200); - --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); - --spectrum-code-color: var(--spectrum-gray-800); + --spectrum-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color: var(--spectrum-white); + --spectrum-static-black-focus-indicator-color: var(--spectrum-black); + --spectrum-overlay-color: var(--spectrum-black); + --spectrum-opacity-disabled: 0.3; + --spectrum-neutral-subdued-content-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-accent-content-color-selected: var( + --spectrum-accent-content-color-down + ); + --spectrum-disabled-background-color: var(--spectrum-gray-200); + --spectrum-disabled-static-white-background-color: var( + --spectrum-transparent-white-200 + ); + --spectrum-disabled-static-black-background-color: var( + --spectrum-transparent-black-200 + ); + --spectrum-background-opacity-default: 0; + --spectrum-background-opacity-hover: 0.1; + --spectrum-background-opacity-down: 0.1; + --spectrum-background-opacity-key-focus: 0.1; + --spectrum-neutral-content-color-default: var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-content-color-down: var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-focus: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); + --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-key-focus: var(--spectrum-gray-800); + --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); + --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-down: var(--spectrum-accent-color-1100); + --spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000); + --spectrum-negative-content-color-default: var(--spectrum-negative-color-900); + --spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-down: var(--spectrum-negative-color-1100); + --spectrum-negative-content-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-disabled-content-color: var(--spectrum-gray-400); + --spectrum-disabled-static-white-content-color: var( + --spectrum-transparent-white-500 + ); + --spectrum-disabled-static-black-content-color: var( + --spectrum-transparent-black-500 + ); + --spectrum-disabled-border-color: var(--spectrum-gray-300); + --spectrum-disabled-static-white-border-color: var( + --spectrum-transparent-white-300 + ); + --spectrum-disabled-static-black-border-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-negative-border-color-default: var(--spectrum-negative-color-900); + --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover: var( + --spectrum-negative-border-color-down + ); + --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-swatch-border-color: var(--spectrum-gray-900); + --spectrum-swatch-border-opacity: 0.51; + --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); + --spectrum-swatch-disabled-icon-border-opacity: 0.51; + --spectrum-thumbnail-border-color: var(--spectrum-gray-800); + --spectrum-thumbnail-border-opacity: 0.1; + --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); + --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); + --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); + --spectrum-color-area-border-color: var(--spectrum-gray-900); + --spectrum-color-area-border-opacity: 0.1; + --spectrum-color-slider-border-color: var(--spectrum-gray-900); + --spectrum-color-slider-border-opacity: 0.1; + --spectrum-color-loupe-drop-shadow-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); + --spectrum-color-loupe-outer-border: var(--spectrum-white); + --spectrum-card-selection-background-color: var(--spectrum-gray-100); + --spectrum-card-selection-background-color-opacity: 0.95; + --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity: 0.1; + --spectrum-drop-zone-background-color-opacity-filled: 0.3; + --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); + --spectrum-color-handle-inner-border-color: var(--spectrum-black); + --spectrum-color-handle-inner-border-opacity: 0.42; + --spectrum-color-handle-outer-border-color: var(--spectrum-black); + --spectrum-color-handle-outer-border-opacity: var( + --spectrum-color-handle-inner-border-opacity + ); + --spectrum-color-handle-drop-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-floating-action-button-drop-shadow-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-floating-action-button-shadow-color: var( + --spectrum-floating-action-button-drop-shadow-color + ); + --spectrum-table-row-hover-color: var(--spectrum-gray-900); + --spectrum-table-row-hover-opacity: 0.07; + --spectrum-table-selected-row-background-color: var( + --spectrum-informative-background-color-default + ); + --spectrum-table-selected-row-background-opacity: 0.1; + --spectrum-table-selected-row-background-color-non-emphasized: var( + --spectrum-neutral-background-color-selected-default + ); + --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; + --spectrum-table-row-down-opacity: 0.1; + --spectrum-table-selected-row-background-opacity-hover: 0.15; + --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; + --spectrum-white-rgb: 255, 255, 255; + --spectrum-white: rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-100-rgb: 255, 255, 255; + --spectrum-transparent-white-100-opacity: 0; + --spectrum-transparent-white-100: rgba( + var(--spectrum-transparent-white-100-rgb), + var(--spectrum-transparent-white-100-opacity) + ); + --spectrum-transparent-white-200-rgb: 255, 255, 255; + --spectrum-transparent-white-200-opacity: 0.1; + --spectrum-transparent-white-200: rgba( + var(--spectrum-transparent-white-200-rgb), + var(--spectrum-transparent-white-200-opacity) + ); + --spectrum-transparent-white-300-rgb: 255, 255, 255; + --spectrum-transparent-white-300-opacity: 0.25; + --spectrum-transparent-white-300: rgba( + var(--spectrum-transparent-white-300-rgb), + var(--spectrum-transparent-white-300-opacity) + ); + --spectrum-transparent-white-400-rgb: 255, 255, 255; + --spectrum-transparent-white-400-opacity: 0.4; + --spectrum-transparent-white-400: rgba( + var(--spectrum-transparent-white-400-rgb), + var(--spectrum-transparent-white-400-opacity) + ); + --spectrum-transparent-white-500-rgb: 255, 255, 255; + --spectrum-transparent-white-500-opacity: 0.55; + --spectrum-transparent-white-500: rgba( + var(--spectrum-transparent-white-500-rgb), + var(--spectrum-transparent-white-500-opacity) + ); + --spectrum-transparent-white-600-rgb: 255, 255, 255; + --spectrum-transparent-white-600-opacity: 0.7; + --spectrum-transparent-white-600: rgba( + var(--spectrum-transparent-white-600-rgb), + var(--spectrum-transparent-white-600-opacity) + ); + --spectrum-transparent-white-700-rgb: 255, 255, 255; + --spectrum-transparent-white-700-opacity: 0.8; + --spectrum-transparent-white-700: rgba( + var(--spectrum-transparent-white-700-rgb), + var(--spectrum-transparent-white-700-opacity) + ); + --spectrum-transparent-white-800-rgb: 255, 255, 255; + --spectrum-transparent-white-800-opacity: 0.9; + --spectrum-transparent-white-800: rgba( + var(--spectrum-transparent-white-800-rgb), + var(--spectrum-transparent-white-800-opacity) + ); + --spectrum-transparent-white-900-rgb: 255, 255, 255; + --spectrum-transparent-white-900: rgba( + var(--spectrum-transparent-white-900-rgb) + ); + --spectrum-black-rgb: 0, 0, 0; + --spectrum-black: rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-100-rgb: 0, 0, 0; + --spectrum-transparent-black-100-opacity: 0; + --spectrum-transparent-black-100: rgba( + var(--spectrum-transparent-black-100-rgb), + var(--spectrum-transparent-black-100-opacity) + ); + --spectrum-transparent-black-200-rgb: 0, 0, 0; + --spectrum-transparent-black-200-opacity: 0.1; + --spectrum-transparent-black-200: rgba( + var(--spectrum-transparent-black-200-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --spectrum-transparent-black-300-rgb: 0, 0, 0; + --spectrum-transparent-black-300-opacity: 0.25; + --spectrum-transparent-black-300: rgba( + var(--spectrum-transparent-black-300-rgb), + var(--spectrum-transparent-black-300-opacity) + ); + --spectrum-transparent-black-400-rgb: 0, 0, 0; + --spectrum-transparent-black-400-opacity: 0.4; + --spectrum-transparent-black-400: rgba( + var(--spectrum-transparent-black-400-rgb), + var(--spectrum-transparent-black-400-opacity) + ); + --spectrum-transparent-black-500-rgb: 0, 0, 0; + --spectrum-transparent-black-500-opacity: 0.55; + --spectrum-transparent-black-500: rgba( + var(--spectrum-transparent-black-500-rgb), + var(--spectrum-transparent-black-500-opacity) + ); + --spectrum-transparent-black-600-rgb: 0, 0, 0; + --spectrum-transparent-black-600-opacity: 0.7; + --spectrum-transparent-black-600: rgba( + var(--spectrum-transparent-black-600-rgb), + var(--spectrum-transparent-black-600-opacity) + ); + --spectrum-transparent-black-700-rgb: 0, 0, 0; + --spectrum-transparent-black-700-opacity: 0.8; + --spectrum-transparent-black-700: rgba( + var(--spectrum-transparent-black-700-rgb), + var(--spectrum-transparent-black-700-opacity) + ); + --spectrum-transparent-black-800-rgb: 0, 0, 0; + --spectrum-transparent-black-800-opacity: 0.9; + --spectrum-transparent-black-800: rgba( + var(--spectrum-transparent-black-800-rgb), + var(--spectrum-transparent-black-800-opacity) + ); + --spectrum-transparent-black-900-rgb: 0, 0, 0; + --spectrum-transparent-black-900: rgba( + var(--spectrum-transparent-black-900-rgb) + ); + --spectrum-icon-color-inverse: var(--spectrum-gray-50); + --spectrum-icon-color-primary-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-asterisk-icon-size-75: 8px; + --spectrum-radio-button-selection-indicator: 4px; + --spectrum-field-label-top-margin-small: 0px; + --spectrum-field-label-to-component: 0px; + --spectrum-help-text-to-component: 0px; + --spectrum-status-light-dot-size-small: 8px; + --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; + --spectrum-action-button-edge-to-hold-icon-small: 3px; + --spectrum-button-minimum-width-multiplier: 2.25; + --spectrum-divider-thickness-small: 1px; + --spectrum-divider-thickness-medium: 2px; + --spectrum-divider-thickness-large: 4px; + --spectrum-swatch-rectangle-width-multiplier: 2; + --spectrum-swatch-slash-thickness-extra-small: 2px; + --spectrum-swatch-slash-thickness-small: 3px; + --spectrum-swatch-slash-thickness-medium: 4px; + --spectrum-swatch-slash-thickness-large: 5px; + --spectrum-progress-bar-minimum-width: 48px; + --spectrum-progress-bar-maximum-width: 768px; + --spectrum-meter-minimum-width: 48px; + --spectrum-meter-maximum-width: 768px; + --spectrum-meter-default-width: var(--spectrum-meter-width); + --spectrum-in-line-alert-minimum-width: 240px; + --spectrum-popover-tip-width: 16px; + --spectrum-popover-tip-height: 8px; + --spectrum-menu-item-label-to-description: 1px; + --spectrum-menu-item-section-divider-height: 8px; + --spectrum-picker-minimum-width-multiplier: 2; + --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclosure-icon-quiet + ); + --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; + --spectrum-text-field-minimum-width-multiplier: 1.5; + --spectrum-combo-box-minimum-width-multiplier: 2.5; + --spectrum-combo-box-quiet-minimum-width-multiplier: 2; + --spectrum-combo-box-visual-to-field-button-quiet: 0px; + --spectrum-alert-dialog-minimum-width: 288px; + --spectrum-alert-dialog-maximum-width: 480px; + --spectrum-contextual-help-minimum-width: 268px; + --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text: 0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; + --spectrum-alert-banner-to-top-workflow-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-to-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --spectrum-color-area-border-width: var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100); + --spectrum-color-wheel-color-area-margin: 12px; + --spectrum-color-slider-border-width: 1px; + --spectrum-color-slider-border-rounding: 4px; + --spectrum-floating-action-button-drop-shadow-blur: 12px; + --spectrum-floating-action-button-drop-shadow-y: 4px; + --spectrum-illustrated-message-maximum-width: 380px; + --spectrum-search-field-minimum-width-multiplier: 3; + --spectrum-color-loupe-height: 64px; + --spectrum-color-loupe-width: 48px; + --spectrum-color-loupe-bottom-to-color-handle: 12px; + --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); + --spectrum-color-loupe-inner-border-width: 1px; + --spectrum-color-loupe-drop-shadow-y: 2px; + --spectrum-color-loupe-drop-shadow-blur: 8px; + --spectrum-card-minimum-width: 100px; + --spectrum-card-preview-minimum-height: 130px; + --spectrum-card-selection-background-size: 40px; + --spectrum-drop-zone-width: 428px; + --spectrum-drop-zone-content-maximum-width: var( + --spectrum-illustrated-message-maximum-width + ); + --spectrum-drop-zone-border-dash-length: 8px; + --spectrum-drop-zone-border-dash-gap: 4px; + --spectrum-drop-zone-title-size: var( + --spectrum-illustrated-message-title-size + ); + --spectrum-drop-zone-cjk-title-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --spectrum-drop-zone-body-size: var(--spectrum-illustrated-message-body-size); + --spectrum-accordion-top-to-text-compact-small: 2px; + --spectrum-accordion-top-to-text-compact-medium: 4px; + --spectrum-accordion-disclosure-indicator-to-text: 0px; + --spectrum-accordion-edge-to-disclosure-indicator: 0px; + --spectrum-accordion-edge-to-text: 0px; + --spectrum-accordion-focus-indicator-gap: 0px; + --spectrum-color-handle-border-width: var(--spectrum-border-width-200); + --spectrum-color-handle-inner-border-width: 1px; + --spectrum-color-handle-outer-border-width: 1px; + --spectrum-color-handle-drop-shadow-x: 0; + --spectrum-color-handle-drop-shadow-y: 0; + --spectrum-color-handle-drop-shadow-blur: 0; + --spectrum-table-row-height-small-compact: var( + --spectrum-component-height-75 + ); + --spectrum-table-row-height-medium-compact: var( + --spectrum-component-height-100 + ); + --spectrum-table-row-height-large-compact: var( + --spectrum-component-height-200 + ); + --spectrum-table-row-height-extra-large-compact: var( + --spectrum-component-height-300 + ); + --spectrum-table-row-top-to-text-small-compact: var( + --spectrum-component-top-to-text-75 + ); + --spectrum-table-row-top-to-text-medium-compact: var( + --spectrum-component-top-to-text-100 + ); + --spectrum-table-row-top-to-text-large-compact: var( + --spectrum-component-top-to-text-200 + ); + --spectrum-table-row-top-to-text-extra-large-compact: var( + --spectrum-component-top-to-text-300 + ); + --spectrum-table-row-bottom-to-text-small-compact: var( + --spectrum-component-bottom-to-text-75 + ); + --spectrum-table-row-bottom-to-text-medium-compact: var( + --spectrum-component-bottom-to-text-100 + ); + --spectrum-table-row-bottom-to-text-large-compact: var( + --spectrum-component-bottom-to-text-200 + ); + --spectrum-table-row-bottom-to-text-extra-large-compact: var( + --spectrum-component-bottom-to-text-300 + ); + --spectrum-table-edge-to-content: 16px; + --spectrum-table-border-divider-width: 1px; + --spectrum-tab-item-height-small: var(--spectrum-component-height-200); + --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); + --spectrum-tab-item-height-large: var(--spectrum-component-height-400); + --spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500); + --spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75); + --spectrum-tab-item-compact-height-medium: var( + --spectrum-component-height-100 + ); + --spectrum-tab-item-compact-height-large: var( + --spectrum-component-height-200 + ); + --spectrum-tab-item-compact-height-extra-large: var( + --spectrum-component-height-300 + ); + --spectrum-tab-item-start-to-edge-quiet: 0px; + --spectrum-in-field-button-width-stacked-small: 20px; + --spectrum-in-field-button-width-stacked-medium: 28px; + --spectrum-in-field-button-width-stacked-large: 36px; + --spectrum-in-field-button-width-stacked-extra-large: 44px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; + --spectrum-android-elevation: 2dp; + --spectrum-spacing-50: 2px; + --spectrum-spacing-75: 4px; + --spectrum-spacing-100: 8px; + --spectrum-spacing-200: 12px; + --spectrum-spacing-300: 16px; + --spectrum-spacing-400: 24px; + --spectrum-spacing-500: 32px; + --spectrum-spacing-600: 40px; + --spectrum-spacing-700: 48px; + --spectrum-spacing-800: 64px; + --spectrum-spacing-900: 80px; + --spectrum-spacing-1000: 96px; + --spectrum-focus-indicator-thickness: 2px; + --spectrum-focus-indicator-gap: 2px; + --spectrum-border-width-200: 2px; + --spectrum-border-width-400: 4px; + --spectrum-field-edge-to-text-quiet: 0px; + --spectrum-field-edge-to-visual-quiet: 0px; + --spectrum-field-edge-to-border-quiet: 0px; + --spectrum-field-edge-to-alert-icon-quiet: 0px; + --spectrum-field-edge-to-validation-icon-quiet: 0px; + --spectrum-text-underline-thickness: 1px; + --spectrum-text-underline-gap: 1px; + --spectrum-informative-color-100: var(--spectrum-blue-100); + --spectrum-informative-color-200: var(--spectrum-blue-200); + --spectrum-informative-color-300: var(--spectrum-blue-300); + --spectrum-informative-color-400: var(--spectrum-blue-400); + --spectrum-informative-color-500: var(--spectrum-blue-500); + --spectrum-informative-color-600: var(--spectrum-blue-600); + --spectrum-informative-color-700: var(--spectrum-blue-700); + --spectrum-informative-color-800: var(--spectrum-blue-800); + --spectrum-informative-color-900: var(--spectrum-blue-900); + --spectrum-informative-color-1000: var(--spectrum-blue-1000); + --spectrum-informative-color-1100: var(--spectrum-blue-1100); + --spectrum-informative-color-1200: var(--spectrum-blue-1200); + --spectrum-informative-color-1300: var(--spectrum-blue-1300); + --spectrum-informative-color-1400: var(--spectrum-blue-1400); + --spectrum-negative-color-100: var(--spectrum-red-100); + --spectrum-negative-color-200: var(--spectrum-red-200); + --spectrum-negative-color-300: var(--spectrum-red-300); + --spectrum-negative-color-400: var(--spectrum-red-400); + --spectrum-negative-color-500: var(--spectrum-red-500); + --spectrum-negative-color-600: var(--spectrum-red-600); + --spectrum-negative-color-700: var(--spectrum-red-700); + --spectrum-negative-color-800: var(--spectrum-red-800); + --spectrum-negative-color-900: var(--spectrum-red-900); + --spectrum-negative-color-1000: var(--spectrum-red-1000); + --spectrum-negative-color-1100: var(--spectrum-red-1100); + --spectrum-negative-color-1200: var(--spectrum-red-1200); + --spectrum-negative-color-1300: var(--spectrum-red-1300); + --spectrum-negative-color-1400: var(--spectrum-red-1400); + --spectrum-notice-color-100: var(--spectrum-orange-100); + --spectrum-notice-color-200: var(--spectrum-orange-200); + --spectrum-notice-color-300: var(--spectrum-orange-300); + --spectrum-notice-color-400: var(--spectrum-orange-400); + --spectrum-notice-color-500: var(--spectrum-orange-500); + --spectrum-notice-color-600: var(--spectrum-orange-600); + --spectrum-notice-color-700: var(--spectrum-orange-700); + --spectrum-notice-color-800: var(--spectrum-orange-800); + --spectrum-notice-color-900: var(--spectrum-orange-900); + --spectrum-notice-color-1000: var(--spectrum-orange-1000); + --spectrum-notice-color-1100: var(--spectrum-orange-1100); + --spectrum-notice-color-1200: var(--spectrum-orange-1200); + --spectrum-notice-color-1300: var(--spectrum-orange-1300); + --spectrum-notice-color-1400: var(--spectrum-orange-1400); + --spectrum-positive-color-100: var(--spectrum-green-100); + --spectrum-positive-color-200: var(--spectrum-green-200); + --spectrum-positive-color-300: var(--spectrum-green-300); + --spectrum-positive-color-400: var(--spectrum-green-400); + --spectrum-positive-color-500: var(--spectrum-green-500); + --spectrum-positive-color-600: var(--spectrum-green-600); + --spectrum-positive-color-700: var(--spectrum-green-700); + --spectrum-positive-color-800: var(--spectrum-green-800); + --spectrum-positive-color-900: var(--spectrum-green-900); + --spectrum-positive-color-1000: var(--spectrum-green-1000); + --spectrum-positive-color-1100: var(--spectrum-green-1100); + --spectrum-positive-color-1200: var(--spectrum-green-1200); + --spectrum-positive-color-1300: var(--spectrum-green-1300); + --spectrum-positive-color-1400: var(--spectrum-green-1400); + --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); + --spectrum-sans-serif-font-family: Adobe Clean; + --spectrum-serif-font-family: Adobe Clean Serif; + --spectrum-cjk-font-family: Adobe Clean Han; + --spectrum-light-font-weight: 300; + --spectrum-regular-font-weight: 400; + --spectrum-medium-font-weight: 500; + --spectrum-bold-font-weight: 700; + --spectrum-extra-bold-font-weight: 800; + --spectrum-black-font-weight: 900; + --spectrum-italic-font-style: italic; + --spectrum-default-font-style: normal; + --spectrum-line-height-100: 1.3; + --spectrum-line-height-200: 1.5; + --spectrum-cjk-line-height-100: 1.5; + --spectrum-cjk-line-height-200: 1.7; + --spectrum-cjk-letter-spacing: 0.05em; + --spectrum-heading-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-heading-sans-serif-light-font-weight: var( + --spectrum-light-font-weight + ); + --spectrum-heading-sans-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-serif-light-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-light-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-light-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-heading-cjk-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-light-emphasized-font-weight: var( + --spectrum-light-font-weight + ); + --spectrum-heading-sans-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-cjk-light-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-light-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-heading-cjk-light-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); + --spectrum-heading-size-xl: var(--spectrum-font-size-900); + --spectrum-heading-size-l: var(--spectrum-font-size-700); + --spectrum-heading-size-m: var(--spectrum-font-size-500); + --spectrum-heading-size-s: var(--spectrum-font-size-300); + --spectrum-heading-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); + --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); + --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); + --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); + --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-line-height: var(--spectrum-line-height-100); + --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier: 0.88888889; + --spectrum-heading-margin-bottom-multiplier: 0.25; + --spectrum-heading-color: var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-body-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-serif-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-body-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-cjk-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-body-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-body-size-xxxl: var(--spectrum-font-size-600); + --spectrum-body-size-xxl: var(--spectrum-font-size-500); + --spectrum-body-size-xl: var(--spectrum-font-size-400); + --spectrum-body-size-l: var(--spectrum-font-size-300); + --spectrum-body-size-m: var(--spectrum-font-size-200); + --spectrum-body-size-s: var(--spectrum-font-size-100); + --spectrum-body-size-xs: var(--spectrum-font-size-75); + --spectrum-body-line-height: var(--spectrum-line-height-200); + --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier: 0.75; + --spectrum-body-color: var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-light-strong-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-cjk-light-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-detail-cjk-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-detail-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-cjk-light-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-detail-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-light-strong-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-detail-cjk-light-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-size-xl: var(--spectrum-font-size-200); + --spectrum-detail-size-l: var(--spectrum-font-size-100); + --spectrum-detail-size-m: var(--spectrum-font-size-75); + --spectrum-detail-size-s: var(--spectrum-font-size-50); + --spectrum-detail-line-height: var(--spectrum-line-height-100); + --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-detail-margin-top-multiplier: 0.88888889; + --spectrum-detail-margin-bottom-multiplier: 0.25; + --spectrum-detail-letter-spacing: 0.06em; + --spectrum-detail-sans-serif-text-transform: uppercase; + --spectrum-detail-serif-text-transform: uppercase; + --spectrum-detail-color: var(--spectrum-gray-900); + --spectrum-code-font-family: Source Code Pro; + --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); + --spectrum-code-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-code-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-code-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-code-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-code-size-xl: var(--spectrum-font-size-400); + --spectrum-code-size-l: var(--spectrum-font-size-300); + --spectrum-code-size-m: var(--spectrum-font-size-200); + --spectrum-code-size-s: var(--spectrum-font-size-100); + --spectrum-code-size-xs: var(--spectrum-font-size-75); + --spectrum-code-line-height: var(--spectrum-line-height-200); + --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-code-color: var(--spectrum-gray-800); } diff --git a/tools/styles/tokens/large-vars.css b/tools/styles/tokens/large-vars.css index 7b52485a2c..fd65f32310 100644 --- a/tools/styles/tokens/large-vars.css +++ b/tools/styles/tokens/large-vars.css @@ -1,494 +1,494 @@ :host, :root { - --spectrum-workflow-icon-size-50: 18px; - --spectrum-workflow-icon-size-75: 20px; - --spectrum-workflow-icon-size-100: 22px; - --spectrum-workflow-icon-size-200: 24px; - --spectrum-workflow-icon-size-300: 28px; - --spectrum-arrow-icon-size-75: 12px; - --spectrum-arrow-icon-size-100: 14px; - --spectrum-arrow-icon-size-200: 16px; - --spectrum-arrow-icon-size-300: 16px; - --spectrum-arrow-icon-size-400: 18px; - --spectrum-arrow-icon-size-500: 22px; - --spectrum-arrow-icon-size-600: 24px; - --spectrum-asterisk-icon-size-100: 10px; - --spectrum-asterisk-icon-size-200: 12px; - --spectrum-asterisk-icon-size-300: 12px; - --spectrum-checkmark-icon-size-50: 12px; - --spectrum-checkmark-icon-size-75: 12px; - --spectrum-checkmark-icon-size-100: 14px; - --spectrum-checkmark-icon-size-200: 14px; - --spectrum-checkmark-icon-size-300: 16px; - --spectrum-checkmark-icon-size-400: 18px; - --spectrum-checkmark-icon-size-500: 20px; - --spectrum-checkmark-icon-size-600: 24px; - --spectrum-chevron-icon-size-50: 8px; - --spectrum-chevron-icon-size-75: 12px; - --spectrum-chevron-icon-size-100: 14px; - --spectrum-chevron-icon-size-200: 14px; - --spectrum-chevron-icon-size-300: 16px; - --spectrum-chevron-icon-size-400: 18px; - --spectrum-chevron-icon-size-500: 20px; - --spectrum-chevron-icon-size-600: 24px; - --spectrum-corner-triangle-icon-size-75: 6px; - --spectrum-corner-triangle-icon-size-100: 7px; - --spectrum-corner-triangle-icon-size-200: 8px; - --spectrum-corner-triangle-icon-size-300: 8px; - --spectrum-cross-icon-size-75: 10px; - --spectrum-cross-icon-size-100: 10px; - --spectrum-cross-icon-size-200: 12px; - --spectrum-cross-icon-size-300: 14px; - --spectrum-cross-icon-size-400: 16px; - --spectrum-cross-icon-size-500: 16px; - --spectrum-cross-icon-size-600: 18px; - --spectrum-dash-icon-size-50: 10px; - --spectrum-dash-icon-size-75: 10px; - --spectrum-dash-icon-size-100: 12px; - --spectrum-dash-icon-size-200: 14px; - --spectrum-dash-icon-size-300: 16px; - --spectrum-dash-icon-size-400: 18px; - --spectrum-dash-icon-size-500: 20px; - --spectrum-dash-icon-size-600: 22px; - --spectrum-field-label-text-to-asterisk-small: 5px; - --spectrum-field-label-text-to-asterisk-medium: 5px; - --spectrum-field-label-text-to-asterisk-large: 6px; - --spectrum-field-label-text-to-asterisk-extra-large: 6px; - --spectrum-field-label-top-to-asterisk-small: 11px; - --spectrum-field-label-top-to-asterisk-medium: 15px; - --spectrum-field-label-top-to-asterisk-large: 19px; - --spectrum-field-label-top-to-asterisk-extra-large: 24px; - --spectrum-field-label-top-margin-medium: 5px; - --spectrum-field-label-top-margin-large: 6px; - --spectrum-field-label-top-margin-extra-large: 6px; - --spectrum-field-label-to-component-quiet-small: -10px; - --spectrum-field-label-to-component-quiet-medium: -10px; - --spectrum-field-label-to-component-quiet-large: -15px; - --spectrum-field-label-to-component-quiet-extra-large: -19px; - --spectrum-help-text-top-to-workflow-icon-small: 5px; - --spectrum-help-text-top-to-workflow-icon-medium: 4px; - --spectrum-help-text-top-to-workflow-icon-large: 8px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; - --spectrum-status-light-dot-size-medium: 10px; - --spectrum-status-light-dot-size-large: 12px; - --spectrum-status-light-dot-size-extra-large: 12px; - --spectrum-status-light-top-to-dot-small: 11px; - --spectrum-status-light-top-to-dot-medium: 15px; - --spectrum-status-light-top-to-dot-large: 19px; - --spectrum-status-light-top-to-dot-extra-large: 24px; - --spectrum-action-button-edge-to-hold-icon-medium: 5px; - --spectrum-action-button-edge-to-hold-icon-large: 6px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 200px; - --spectrum-progress-circle-size-small: 20px; - --spectrum-progress-circle-size-medium: 40px; - --spectrum-progress-circle-size-large: 80px; - --spectrum-progress-circle-thickness-small: 3px; - --spectrum-progress-circle-thickness-medium: 4px; - --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 56px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 17px; - --spectrum-toast-top-to-text: 16px; - --spectrum-toast-bottom-to-text: 19px; - --spectrum-action-bar-height: 56px; - --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; - --spectrum-progress-bar-thickness-small: 5px; - --spectrum-progress-bar-thickness-medium: 8px; - --spectrum-progress-bar-thickness-large: 10px; - --spectrum-progress-bar-thickness-extra-large: 13px; - --spectrum-meter-width: 240px; - --spectrum-meter-thickness-small: 5px; - --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; - --spectrum-text-area-minimum-width: 140px; - --spectrum-text-area-minimum-height: 70px; - --spectrum-combo-box-visual-to-field-button-small: 9px; - --spectrum-combo-box-visual-to-field-button-medium: 10px; - --spectrum-combo-box-visual-to-field-button-large: 11px; - --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size: 10px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); - --spectrum-breadcrumbs-height-multiline: 84px; - --spectrum-breadcrumbs-top-to-text: 17px; - --spectrum-breadcrumbs-top-to-text-compact: 16px; - --spectrum-breadcrumbs-top-to-text-multiline: 15px; - --spectrum-breadcrumbs-bottom-to-text: 19px; - --spectrum-breadcrumbs-bottom-to-text-compact: 19px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; - --spectrum-breadcrumbs-start-edge-to-text: 9px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; - --spectrum-breadcrumbs-top-to-separator-icon: 25px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; - --spectrum-breadcrumbs-top-to-truncated-menu: 10px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; - --spectrum-alert-banner-minimum-height: 64px; - --spectrum-alert-banner-width: 680px; - --spectrum-alert-banner-top-to-workflow-icon: 21px; - --spectrum-alert-banner-top-to-text: 21px; - --spectrum-alert-banner-bottom-to-text: 22px; - --spectrum-rating-indicator-width: 22px; - --spectrum-rating-indicator-to-icon: 5px; - --spectrum-color-area-width: 240px; - --spectrum-color-area-minimum-width: 80px; - --spectrum-color-area-height: 240px; - --spectrum-color-area-minimum-height: 80px; - --spectrum-color-wheel-width: 240px; - --spectrum-color-wheel-minimum-width: 219px; - --spectrum-color-slider-length: 240px; - --spectrum-color-slider-minimum-length: 100px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-s - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-width: 216px; - --spectrum-coach-mark-minimum-width: 216px; - --spectrum-coach-mark-maximum-width: 248px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; - --spectrum-coach-mark-media-height: 162px; - --spectrum-coach-mark-media-minimum-height: 121px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; - --spectrum-color-handle-size: 20px; - --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; - --spectrum-tab-item-to-tab-item-horizontal-small: 27px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; - --spectrum-tab-item-to-tab-item-horizontal-large: 33px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; - --spectrum-tab-item-to-tab-item-vertical-small: 5px; - --spectrum-tab-item-to-tab-item-vertical-medium: 5px; - --spectrum-tab-item-to-tab-item-vertical-large: 6px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; - --spectrum-tab-item-start-to-edge-small: 13px; - --spectrum-tab-item-start-to-edge-medium: 15px; - --spectrum-tab-item-start-to-edge-large: 17px; - --spectrum-tab-item-start-to-edge-extra-large: 19px; - --spectrum-tab-item-top-to-text-small: 14px; - --spectrum-tab-item-bottom-to-text-small: 15px; - --spectrum-tab-item-top-to-text-medium: 18px; - --spectrum-tab-item-bottom-to-text-medium: 19px; - --spectrum-tab-item-top-to-text-large: 22px; - --spectrum-tab-item-bottom-to-text-large: 22px; - --spectrum-tab-item-top-to-text-extra-large: 25px; - --spectrum-tab-item-bottom-to-text-extra-large: 25px; - --spectrum-tab-item-top-to-text-compact-small: 5px; - --spectrum-tab-item-bottom-to-text-compact-small: 6px; - --spectrum-tab-item-top-to-text-compact-medium: 9px; - --spectrum-tab-item-bottom-to-text-compact-medium: 10px; - --spectrum-tab-item-top-to-text-compact-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-large: 14px; - --spectrum-tab-item-top-to-text-compact-extra-large: 15px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-small: 15px; - --spectrum-tab-item-top-to-workflow-icon-medium: 19px; - --spectrum-tab-item-top-to-workflow-icon-large: 23px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; - --spectrum-tab-item-focus-indicator-gap-small: 9px; - --spectrum-tab-item-focus-indicator-gap-medium: 10px; - --spectrum-tab-item-focus-indicator-gap-large: 11px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; - --spectrum-side-navigation-width: 240px; - --spectrum-side-navigation-minimum-width: 200px; - --spectrum-side-navigation-maximum-width: 300px; - --spectrum-side-navigation-second-level-edge-to-text: 30px; - --spectrum-side-navigation-third-level-edge-to-text: 45px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; - --spectrum-side-navigation-item-to-item: 5px; - --spectrum-side-navigation-item-to-header: 30px; - --spectrum-side-navigation-header-to-item: 10px; - --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; - --spectrum-accordion-top-to-text-spacious-small: 12px; - --spectrum-text-to-visual-50: 8px; - --spectrum-text-to-visual-75: 9px; - --spectrum-text-to-visual-100: 10px; - --spectrum-text-to-visual-200: 11px; - --spectrum-text-to-visual-300: 13px; - --spectrum-text-to-control-75: 11px; - --spectrum-text-to-control-100: 13px; - --spectrum-text-to-control-200: 14px; - --spectrum-text-to-control-300: 16px; - --spectrum-component-height-50: 26px; - --spectrum-component-height-75: 30px; - --spectrum-component-height-100: 40px; - --spectrum-component-height-200: 50px; - --spectrum-component-height-300: 60px; - --spectrum-component-height-400: 70px; - --spectrum-component-height-500: 80px; - --spectrum-component-pill-edge-to-visual-75: 13px; - --spectrum-component-pill-edge-to-visual-100: 17px; - --spectrum-component-pill-edge-to-visual-200: 22px; - --spectrum-component-pill-edge-to-visual-300: 27px; - --spectrum-component-pill-edge-to-visual-only-75: 5px; - --spectrum-component-pill-edge-to-visual-only-100: 9px; - --spectrum-component-pill-edge-to-visual-only-200: 13px; - --spectrum-component-pill-edge-to-visual-only-300: 16px; - --spectrum-component-pill-edge-to-text-75: 15px; - --spectrum-component-pill-edge-to-text-100: 20px; - --spectrum-component-pill-edge-to-text-200: 25px; - --spectrum-component-pill-edge-to-text-300: 30px; - --spectrum-component-edge-to-visual-50: 7px; - --spectrum-component-edge-to-visual-75: 9px; - --spectrum-component-edge-to-visual-100: 12px; - --spectrum-component-edge-to-visual-200: 16px; - --spectrum-component-edge-to-visual-300: 19px; - --spectrum-component-edge-to-visual-only-50: 4px; - --spectrum-component-edge-to-visual-only-75: 5px; - --spectrum-component-edge-to-visual-only-100: 9px; - --spectrum-component-edge-to-visual-only-200: 13px; - --spectrum-component-edge-to-visual-only-300: 16px; - --spectrum-component-edge-to-text-50: 10px; - --spectrum-component-edge-to-text-75: 11px; - --spectrum-component-edge-to-text-100: 15px; - --spectrum-component-edge-to-text-200: 19px; - --spectrum-component-edge-to-text-300: 22px; - --spectrum-component-top-to-workflow-icon-50: 4px; - --spectrum-component-top-to-workflow-icon-75: 5px; - --spectrum-component-top-to-workflow-icon-100: 9px; - --spectrum-component-top-to-workflow-icon-200: 13px; - --spectrum-component-top-to-workflow-icon-300: 16px; - --spectrum-component-top-to-text-50: 4px; - --spectrum-component-top-to-text-75: 5px; - --spectrum-component-top-to-text-100: 8px; - --spectrum-component-top-to-text-200: 12px; - --spectrum-component-top-to-text-300: 15px; - --spectrum-component-bottom-to-text-50: 6px; - --spectrum-component-bottom-to-text-75: 6px; - --spectrum-component-bottom-to-text-100: 11px; - --spectrum-component-bottom-to-text-200: 14px; - --spectrum-component-bottom-to-text-300: 18px; - --spectrum-component-to-menu-small: 7px; - --spectrum-component-to-menu-medium: 8px; - --spectrum-component-to-menu-large: 9px; - --spectrum-component-to-menu-extra-large: 10px; - --spectrum-field-edge-to-disclosure-icon-75: 9px; - --spectrum-field-edge-to-disclosure-icon-100: 13px; - --spectrum-field-edge-to-disclosure-icon-200: 17px; - --spectrum-field-edge-to-disclosure-icon-300: 22px; - --spectrum-field-end-edge-to-disclosure-icon-75: 9px; - --spectrum-field-end-edge-to-disclosure-icon-100: 13px; - --spectrum-field-end-edge-to-disclosure-icon-200: 17px; - --spectrum-field-end-edge-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-disclosure-icon-75: 9px; - --spectrum-field-top-to-disclosure-icon-100: 13px; - --spectrum-field-top-to-disclosure-icon-200: 17px; - --spectrum-field-top-to-disclosure-icon-300: 22px; - --spectrum-field-top-to-alert-icon-small: 5px; - --spectrum-field-top-to-alert-icon-medium: 9px; - --spectrum-field-top-to-alert-icon-large: 13px; - --spectrum-field-top-to-alert-icon-extra-large: 16px; - --spectrum-field-top-to-validation-icon-small: 9px; - --spectrum-field-top-to-validation-icon-medium: 13px; - --spectrum-field-top-to-validation-icon-large: 17px; - --spectrum-field-top-to-validation-icon-extra-large: 22px; - --spectrum-field-top-to-progress-circle-small: 7px; - --spectrum-field-top-to-progress-circle-medium: 12px; - --spectrum-field-top-to-progress-circle-large: 17px; - --spectrum-field-top-to-progress-circle-extra-large: 22px; - --spectrum-field-edge-to-alert-icon-small: 11px; - --spectrum-field-edge-to-alert-icon-medium: 15px; - --spectrum-field-edge-to-alert-icon-large: 19px; - --spectrum-field-edge-to-alert-icon-extra-large: 22px; - --spectrum-field-edge-to-validation-icon-small: 11px; - --spectrum-field-edge-to-validation-icon-medium: 15px; - --spectrum-field-edge-to-validation-icon-large: 19px; - --spectrum-field-edge-to-validation-icon-extra-large: 22px; - --spectrum-field-text-to-alert-icon-small: 10px; - --spectrum-field-text-to-alert-icon-medium: 15px; - --spectrum-field-text-to-alert-icon-large: 19px; - --spectrum-field-text-to-alert-icon-extra-large: 22px; - --spectrum-field-text-to-validation-icon-small: 10px; - --spectrum-field-text-to-validation-icon-medium: 15px; - --spectrum-field-text-to-validation-icon-large: 19px; - --spectrum-field-text-to-validation-icon-extra-large: 22px; - --spectrum-field-width: 240px; - --spectrum-character-count-to-field-quiet-small: -4px; - --spectrum-character-count-to-field-quiet-medium: -4px; - --spectrum-character-count-to-field-quiet-large: -4px; - --spectrum-character-count-to-field-quiet-extra-large: -5px; - --spectrum-side-label-character-count-to-field: 15px; - --spectrum-side-label-character-count-top-margin-small: 5px; - --spectrum-side-label-character-count-top-margin-medium: 10px; - --spectrum-side-label-character-count-top-margin-large: 14px; - --spectrum-side-label-character-count-top-margin-extra-large: 18px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; - --spectrum-navigational-indicator-top-to-back-icon-small: 7px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; - --spectrum-navigational-indicator-top-to-back-icon-large: 16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; - --spectrum-color-control-track-width: 30px; - --spectrum-font-size-50: 13px; - --spectrum-font-size-75: 15px; - --spectrum-font-size-100: 17px; - --spectrum-font-size-200: 19px; - --spectrum-font-size-300: 22px; - --spectrum-font-size-400: 24px; - --spectrum-font-size-500: 27px; - --spectrum-font-size-600: 31px; - --spectrum-font-size-700: 34px; - --spectrum-font-size-800: 39px; - --spectrum-font-size-900: 44px; - --spectrum-font-size-1000: 49px; - --spectrum-font-size-1100: 55px; - --spectrum-font-size-1200: 62px; - --spectrum-font-size-1300: 70px; + --spectrum-workflow-icon-size-50: 18px; + --spectrum-workflow-icon-size-75: 20px; + --spectrum-workflow-icon-size-100: 22px; + --spectrum-workflow-icon-size-200: 24px; + --spectrum-workflow-icon-size-300: 28px; + --spectrum-arrow-icon-size-75: 12px; + --spectrum-arrow-icon-size-100: 14px; + --spectrum-arrow-icon-size-200: 16px; + --spectrum-arrow-icon-size-300: 16px; + --spectrum-arrow-icon-size-400: 18px; + --spectrum-arrow-icon-size-500: 22px; + --spectrum-arrow-icon-size-600: 24px; + --spectrum-asterisk-icon-size-100: 10px; + --spectrum-asterisk-icon-size-200: 12px; + --spectrum-asterisk-icon-size-300: 12px; + --spectrum-checkmark-icon-size-50: 12px; + --spectrum-checkmark-icon-size-75: 12px; + --spectrum-checkmark-icon-size-100: 14px; + --spectrum-checkmark-icon-size-200: 14px; + --spectrum-checkmark-icon-size-300: 16px; + --spectrum-checkmark-icon-size-400: 18px; + --spectrum-checkmark-icon-size-500: 20px; + --spectrum-checkmark-icon-size-600: 24px; + --spectrum-chevron-icon-size-50: 8px; + --spectrum-chevron-icon-size-75: 12px; + --spectrum-chevron-icon-size-100: 14px; + --spectrum-chevron-icon-size-200: 14px; + --spectrum-chevron-icon-size-300: 16px; + --spectrum-chevron-icon-size-400: 18px; + --spectrum-chevron-icon-size-500: 20px; + --spectrum-chevron-icon-size-600: 24px; + --spectrum-corner-triangle-icon-size-75: 6px; + --spectrum-corner-triangle-icon-size-100: 7px; + --spectrum-corner-triangle-icon-size-200: 8px; + --spectrum-corner-triangle-icon-size-300: 8px; + --spectrum-cross-icon-size-75: 10px; + --spectrum-cross-icon-size-100: 10px; + --spectrum-cross-icon-size-200: 12px; + --spectrum-cross-icon-size-300: 14px; + --spectrum-cross-icon-size-400: 16px; + --spectrum-cross-icon-size-500: 16px; + --spectrum-cross-icon-size-600: 18px; + --spectrum-dash-icon-size-50: 10px; + --spectrum-dash-icon-size-75: 10px; + --spectrum-dash-icon-size-100: 12px; + --spectrum-dash-icon-size-200: 14px; + --spectrum-dash-icon-size-300: 16px; + --spectrum-dash-icon-size-400: 18px; + --spectrum-dash-icon-size-500: 20px; + --spectrum-dash-icon-size-600: 22px; + --spectrum-field-label-text-to-asterisk-small: 5px; + --spectrum-field-label-text-to-asterisk-medium: 5px; + --spectrum-field-label-text-to-asterisk-large: 6px; + --spectrum-field-label-text-to-asterisk-extra-large: 6px; + --spectrum-field-label-top-to-asterisk-small: 11px; + --spectrum-field-label-top-to-asterisk-medium: 15px; + --spectrum-field-label-top-to-asterisk-large: 19px; + --spectrum-field-label-top-to-asterisk-extra-large: 24px; + --spectrum-field-label-top-margin-medium: 5px; + --spectrum-field-label-top-margin-large: 6px; + --spectrum-field-label-top-margin-extra-large: 6px; + --spectrum-field-label-to-component-quiet-small: -10px; + --spectrum-field-label-to-component-quiet-medium: -10px; + --spectrum-field-label-to-component-quiet-large: -15px; + --spectrum-field-label-to-component-quiet-extra-large: -19px; + --spectrum-help-text-top-to-workflow-icon-small: 5px; + --spectrum-help-text-top-to-workflow-icon-medium: 4px; + --spectrum-help-text-top-to-workflow-icon-large: 8px; + --spectrum-help-text-top-to-workflow-icon-extra-large: 11px; + --spectrum-status-light-dot-size-medium: 10px; + --spectrum-status-light-dot-size-large: 12px; + --spectrum-status-light-dot-size-extra-large: 12px; + --spectrum-status-light-top-to-dot-small: 11px; + --spectrum-status-light-top-to-dot-medium: 15px; + --spectrum-status-light-top-to-dot-large: 19px; + --spectrum-status-light-top-to-dot-extra-large: 24px; + --spectrum-action-button-edge-to-hold-icon-medium: 5px; + --spectrum-action-button-edge-to-hold-icon-large: 6px; + --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; + --spectrum-tooltip-tip-width: 10px; + --spectrum-tooltip-tip-height: 5px; + --spectrum-tooltip-maximum-width: 200px; + --spectrum-progress-circle-size-small: 20px; + --spectrum-progress-circle-size-medium: 40px; + --spectrum-progress-circle-size-large: 80px; + --spectrum-progress-circle-thickness-small: 3px; + --spectrum-progress-circle-thickness-medium: 4px; + --spectrum-progress-circle-thickness-large: 5px; + --spectrum-toast-height: 56px; + --spectrum-toast-maximum-width: 420px; + --spectrum-toast-top-to-workflow-icon: 17px; + --spectrum-toast-top-to-text: 16px; + --spectrum-toast-bottom-to-text: 19px; + --spectrum-action-bar-height: 56px; + --spectrum-action-bar-top-to-item-counter: 16px; + --spectrum-swatch-size-extra-small: 20px; + --spectrum-swatch-size-small: 30px; + --spectrum-swatch-size-medium: 40px; + --spectrum-swatch-size-large: 50px; + --spectrum-progress-bar-thickness-small: 5px; + --spectrum-progress-bar-thickness-medium: 8px; + --spectrum-progress-bar-thickness-large: 10px; + --spectrum-progress-bar-thickness-extra-large: 13px; + --spectrum-meter-width: 240px; + --spectrum-meter-thickness-small: 5px; + --spectrum-meter-thickness-large: 8px; + --spectrum-tag-top-to-avatar-small: 5px; + --spectrum-tag-top-to-avatar-medium: 7px; + --spectrum-tag-top-to-avatar-large: 11px; + --spectrum-tag-top-to-cross-icon-small: 10px; + --spectrum-tag-top-to-cross-icon-medium: 15px; + --spectrum-tag-top-to-cross-icon-large: 19px; + --spectrum-popover-top-to-content-area: 5px; + --spectrum-menu-item-edge-to-content-not-selected-small: 24px; + --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; + --spectrum-menu-item-edge-to-content-not-selected-large: 47px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; + --spectrum-menu-item-top-to-disclosure-icon-small: 9px; + --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; + --spectrum-menu-item-top-to-disclosure-icon-large: 17px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; + --spectrum-menu-item-top-to-selected-icon-small: 9px; + --spectrum-menu-item-top-to-selected-icon-medium: 13px; + --spectrum-menu-item-top-to-selected-icon-large: 17px; + --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; + --spectrum-slider-control-to-field-label-small: 6px; + --spectrum-slider-control-to-field-label-medium: 10px; + --spectrum-slider-control-to-field-label-large: 14px; + --spectrum-slider-control-to-field-label-extra-large: 17px; + --spectrum-picker-visual-to-disclosure-icon-small: 9px; + --spectrum-picker-visual-to-disclosure-icon-medium: 10px; + --spectrum-picker-visual-to-disclosure-icon-large: 11px; + --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; + --spectrum-text-area-minimum-width: 140px; + --spectrum-text-area-minimum-height: 70px; + --spectrum-combo-box-visual-to-field-button-small: 9px; + --spectrum-combo-box-visual-to-field-button-medium: 10px; + --spectrum-combo-box-visual-to-field-button-large: 11px; + --spectrum-combo-box-visual-to-field-button-extra-large: 13px; + --spectrum-thumbnail-size-50: 20px; + --spectrum-thumbnail-size-75: 22px; + --spectrum-thumbnail-size-100: 26px; + --spectrum-thumbnail-size-200: 28px; + --spectrum-thumbnail-size-300: 32px; + --spectrum-thumbnail-size-400: 36px; + --spectrum-thumbnail-size-500: 40px; + --spectrum-thumbnail-size-600: 46px; + --spectrum-thumbnail-size-700: 50px; + --spectrum-thumbnail-size-800: 55px; + --spectrum-thumbnail-size-900: 62px; + --spectrum-thumbnail-size-1000: 70px; + --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); + --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); + --spectrum-opacity-checkerboard-square-size: 10px; + --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); + --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); + --spectrum-breadcrumbs-height-multiline: 84px; + --spectrum-breadcrumbs-top-to-text: 17px; + --spectrum-breadcrumbs-top-to-text-compact: 16px; + --spectrum-breadcrumbs-top-to-text-multiline: 15px; + --spectrum-breadcrumbs-bottom-to-text: 19px; + --spectrum-breadcrumbs-bottom-to-text-compact: 19px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; + --spectrum-breadcrumbs-start-edge-to-text: 9px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; + --spectrum-breadcrumbs-top-to-separator-icon: 25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; + --spectrum-breadcrumbs-top-to-truncated-menu: 10px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; + --spectrum-avatar-size-50: 20px; + --spectrum-avatar-size-75: 22px; + --spectrum-avatar-size-100: 26px; + --spectrum-avatar-size-200: 28px; + --spectrum-avatar-size-300: 32px; + --spectrum-avatar-size-400: 36px; + --spectrum-avatar-size-500: 40px; + --spectrum-avatar-size-600: 46px; + --spectrum-avatar-size-700: 50px; + --spectrum-alert-banner-minimum-height: 64px; + --spectrum-alert-banner-width: 680px; + --spectrum-alert-banner-top-to-workflow-icon: 21px; + --spectrum-alert-banner-top-to-text: 21px; + --spectrum-alert-banner-bottom-to-text: 22px; + --spectrum-rating-indicator-width: 22px; + --spectrum-rating-indicator-to-icon: 5px; + --spectrum-color-area-width: 240px; + --spectrum-color-area-minimum-width: 80px; + --spectrum-color-area-height: 240px; + --spectrum-color-area-minimum-height: 80px; + --spectrum-color-wheel-width: 240px; + --spectrum-color-wheel-minimum-width: 219px; + --spectrum-color-slider-length: 240px; + --spectrum-color-slider-minimum-length: 100px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-s + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); + --spectrum-coach-mark-width: 216px; + --spectrum-coach-mark-minimum-width: 216px; + --spectrum-coach-mark-maximum-width: 248px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; + --spectrum-coach-mark-media-height: 162px; + --spectrum-coach-mark-media-minimum-height: 121px; + --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); + --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); + --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); + --spectrum-accordion-top-to-text-regular-small: 7px; + --spectrum-accordion-small-top-to-text-spacious: 12px; + --spectrum-accordion-top-to-text-regular-medium: 9px; + --spectrum-accordion-top-to-text-spacious-medium: 14px; + --spectrum-accordion-top-to-text-compact-large: 7px; + --spectrum-accordion-top-to-text-regular-large: 12px; + --spectrum-accordion-top-to-text-spacious-large: 14px; + --spectrum-accordion-top-to-text-compact-extra-large: 7px; + --spectrum-accordion-top-to-text-regular-extra-large: 12px; + --spectrum-accordion-top-to-text-spacious-extra-large: 14px; + --spectrum-accordion-bottom-to-text-compact-small: 4px; + --spectrum-accordion-bottom-to-text-regular-small: 9px; + --spectrum-accordion-bottom-to-text-spacious-small: 14px; + --spectrum-accordion-bottom-to-text-compact-medium: 8px; + --spectrum-accordion-bottom-to-text-regular-medium: 13px; + --spectrum-accordion-bottom-to-text-spacious-medium: 18px; + --spectrum-accordion-bottom-to-text-compact-large: 9px; + --spectrum-accordion-bottom-to-text-regular-large: 14px; + --spectrum-accordion-bottom-to-text-spacious-large: 19px; + --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; + --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; + --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; + --spectrum-accordion-minimum-width: 250px; + --spectrum-accordion-content-area-top-to-content: 10px; + --spectrum-accordion-content-area-bottom-to-content: 20px; + --spectrum-color-handle-size: 20px; + --spectrum-color-handle-size-key-focus: 40px; + --spectrum-table-column-header-row-top-to-text-small: 10px; + --spectrum-table-column-header-row-top-to-text-medium: 9px; + --spectrum-table-column-header-row-top-to-text-large: 13px; + --spectrum-table-column-header-row-top-to-text-extra-large: 16px; + --spectrum-table-column-header-row-bottom-to-text-small: 11px; + --spectrum-table-column-header-row-bottom-to-text-medium: 10px; + --spectrum-table-column-header-row-bottom-to-text-large: 13px; + --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; + --spectrum-table-row-height-small-regular: 40px; + --spectrum-table-row-height-medium-regular: 50px; + --spectrum-table-row-height-large-regular: 60px; + --spectrum-table-row-height-extra-large-regular: 70px; + --spectrum-table-row-height-small-spacious: 50px; + --spectrum-table-row-height-medium-spacious: 60px; + --spectrum-table-row-height-large-spacious: 70px; + --spectrum-table-row-height-extra-large-spacious: 80px; + --spectrum-table-row-top-to-text-small-regular: 10px; + --spectrum-table-row-top-to-text-medium-regular: 14px; + --spectrum-table-row-top-to-text-large-regular: 18px; + --spectrum-table-row-top-to-text-extra-large-regular: 21px; + --spectrum-table-row-bottom-to-text-small-regular: 11px; + --spectrum-table-row-bottom-to-text-medium-regular: 15px; + --spectrum-table-row-bottom-to-text-large-regular: 18px; + --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; + --spectrum-table-row-top-to-text-small-spacious: 15px; + --spectrum-table-row-top-to-text-medium-spacious: 18px; + --spectrum-table-row-top-to-text-large-spacious: 23px; + --spectrum-table-row-top-to-text-extra-large-spacious: 26px; + --spectrum-table-row-bottom-to-text-small-spacious: 16px; + --spectrum-table-row-bottom-to-text-medium-spacious: 18px; + --spectrum-table-row-bottom-to-text-large-spacious: 23px; + --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; + --spectrum-table-checkbox-to-text: 30px; + --spectrum-table-header-row-checkbox-to-top-small: 14px; + --spectrum-table-header-row-checkbox-to-top-medium: 13px; + --spectrum-table-header-row-checkbox-to-top-large: 17px; + --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; + --spectrum-table-row-checkbox-to-top-small-compact: 9px; + --spectrum-table-row-checkbox-to-top-small-regular: 14px; + --spectrum-table-row-checkbox-to-top-small-spacious: 19px; + --spectrum-table-row-checkbox-to-top-medium-compact: 13px; + --spectrum-table-row-checkbox-to-top-medium-regular: 18px; + --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; + --spectrum-table-row-checkbox-to-top-large-compact: 17px; + --spectrum-table-row-checkbox-to-top-large-regular: 22px; + --spectrum-table-row-checkbox-to-top-large-spacious: 27px; + --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; + --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; + --spectrum-table-section-header-row-height-small: 30px; + --spectrum-table-section-header-row-height-medium: 40px; + --spectrum-table-section-header-row-height-large: 50px; + --spectrum-table-section-header-row-height-extra-large: 60px; + --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; + --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; + --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; + --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; + --spectrum-tab-item-to-tab-item-horizontal-small: 27px; + --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; + --spectrum-tab-item-to-tab-item-horizontal-large: 33px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; + --spectrum-tab-item-to-tab-item-vertical-small: 5px; + --spectrum-tab-item-to-tab-item-vertical-medium: 5px; + --spectrum-tab-item-to-tab-item-vertical-large: 6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; + --spectrum-tab-item-start-to-edge-small: 13px; + --spectrum-tab-item-start-to-edge-medium: 15px; + --spectrum-tab-item-start-to-edge-large: 17px; + --spectrum-tab-item-start-to-edge-extra-large: 19px; + --spectrum-tab-item-top-to-text-small: 14px; + --spectrum-tab-item-bottom-to-text-small: 15px; + --spectrum-tab-item-top-to-text-medium: 18px; + --spectrum-tab-item-bottom-to-text-medium: 19px; + --spectrum-tab-item-top-to-text-large: 22px; + --spectrum-tab-item-bottom-to-text-large: 22px; + --spectrum-tab-item-top-to-text-extra-large: 25px; + --spectrum-tab-item-bottom-to-text-extra-large: 25px; + --spectrum-tab-item-top-to-text-compact-small: 5px; + --spectrum-tab-item-bottom-to-text-compact-small: 6px; + --spectrum-tab-item-top-to-text-compact-medium: 9px; + --spectrum-tab-item-bottom-to-text-compact-medium: 10px; + --spectrum-tab-item-top-to-text-compact-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-large: 14px; + --spectrum-tab-item-top-to-text-compact-extra-large: 15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-small: 15px; + --spectrum-tab-item-top-to-workflow-icon-medium: 19px; + --spectrum-tab-item-top-to-workflow-icon-large: 23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; + --spectrum-tab-item-focus-indicator-gap-small: 9px; + --spectrum-tab-item-focus-indicator-gap-medium: 10px; + --spectrum-tab-item-focus-indicator-gap-large: 11px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; + --spectrum-side-navigation-width: 240px; + --spectrum-side-navigation-minimum-width: 200px; + --spectrum-side-navigation-maximum-width: 300px; + --spectrum-side-navigation-second-level-edge-to-text: 30px; + --spectrum-side-navigation-third-level-edge-to-text: 45px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; + --spectrum-side-navigation-item-to-item: 5px; + --spectrum-side-navigation-item-to-header: 30px; + --spectrum-side-navigation-header-to-item: 10px; + --spectrum-side-navigation-bottom-to-text: 10px; + --spectrum-tray-top-to-content-area: 5px; + --spectrum-accordion-top-to-text-spacious-small: 12px; + --spectrum-text-to-visual-50: 8px; + --spectrum-text-to-visual-75: 9px; + --spectrum-text-to-visual-100: 10px; + --spectrum-text-to-visual-200: 11px; + --spectrum-text-to-visual-300: 13px; + --spectrum-text-to-control-75: 11px; + --spectrum-text-to-control-100: 13px; + --spectrum-text-to-control-200: 14px; + --spectrum-text-to-control-300: 16px; + --spectrum-component-height-50: 26px; + --spectrum-component-height-75: 30px; + --spectrum-component-height-100: 40px; + --spectrum-component-height-200: 50px; + --spectrum-component-height-300: 60px; + --spectrum-component-height-400: 70px; + --spectrum-component-height-500: 80px; + --spectrum-component-pill-edge-to-visual-75: 13px; + --spectrum-component-pill-edge-to-visual-100: 17px; + --spectrum-component-pill-edge-to-visual-200: 22px; + --spectrum-component-pill-edge-to-visual-300: 27px; + --spectrum-component-pill-edge-to-visual-only-75: 5px; + --spectrum-component-pill-edge-to-visual-only-100: 9px; + --spectrum-component-pill-edge-to-visual-only-200: 13px; + --spectrum-component-pill-edge-to-visual-only-300: 16px; + --spectrum-component-pill-edge-to-text-75: 15px; + --spectrum-component-pill-edge-to-text-100: 20px; + --spectrum-component-pill-edge-to-text-200: 25px; + --spectrum-component-pill-edge-to-text-300: 30px; + --spectrum-component-edge-to-visual-50: 7px; + --spectrum-component-edge-to-visual-75: 9px; + --spectrum-component-edge-to-visual-100: 12px; + --spectrum-component-edge-to-visual-200: 16px; + --spectrum-component-edge-to-visual-300: 19px; + --spectrum-component-edge-to-visual-only-50: 4px; + --spectrum-component-edge-to-visual-only-75: 5px; + --spectrum-component-edge-to-visual-only-100: 9px; + --spectrum-component-edge-to-visual-only-200: 13px; + --spectrum-component-edge-to-visual-only-300: 16px; + --spectrum-component-edge-to-text-50: 10px; + --spectrum-component-edge-to-text-75: 11px; + --spectrum-component-edge-to-text-100: 15px; + --spectrum-component-edge-to-text-200: 19px; + --spectrum-component-edge-to-text-300: 22px; + --spectrum-component-top-to-workflow-icon-50: 4px; + --spectrum-component-top-to-workflow-icon-75: 5px; + --spectrum-component-top-to-workflow-icon-100: 9px; + --spectrum-component-top-to-workflow-icon-200: 13px; + --spectrum-component-top-to-workflow-icon-300: 16px; + --spectrum-component-top-to-text-50: 4px; + --spectrum-component-top-to-text-75: 5px; + --spectrum-component-top-to-text-100: 8px; + --spectrum-component-top-to-text-200: 12px; + --spectrum-component-top-to-text-300: 15px; + --spectrum-component-bottom-to-text-50: 6px; + --spectrum-component-bottom-to-text-75: 6px; + --spectrum-component-bottom-to-text-100: 11px; + --spectrum-component-bottom-to-text-200: 14px; + --spectrum-component-bottom-to-text-300: 18px; + --spectrum-component-to-menu-small: 7px; + --spectrum-component-to-menu-medium: 8px; + --spectrum-component-to-menu-large: 9px; + --spectrum-component-to-menu-extra-large: 10px; + --spectrum-field-edge-to-disclosure-icon-75: 9px; + --spectrum-field-edge-to-disclosure-icon-100: 13px; + --spectrum-field-edge-to-disclosure-icon-200: 17px; + --spectrum-field-edge-to-disclosure-icon-300: 22px; + --spectrum-field-end-edge-to-disclosure-icon-75: 9px; + --spectrum-field-end-edge-to-disclosure-icon-100: 13px; + --spectrum-field-end-edge-to-disclosure-icon-200: 17px; + --spectrum-field-end-edge-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-disclosure-icon-75: 9px; + --spectrum-field-top-to-disclosure-icon-100: 13px; + --spectrum-field-top-to-disclosure-icon-200: 17px; + --spectrum-field-top-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-alert-icon-small: 5px; + --spectrum-field-top-to-alert-icon-medium: 9px; + --spectrum-field-top-to-alert-icon-large: 13px; + --spectrum-field-top-to-alert-icon-extra-large: 16px; + --spectrum-field-top-to-validation-icon-small: 9px; + --spectrum-field-top-to-validation-icon-medium: 13px; + --spectrum-field-top-to-validation-icon-large: 17px; + --spectrum-field-top-to-validation-icon-extra-large: 22px; + --spectrum-field-top-to-progress-circle-small: 7px; + --spectrum-field-top-to-progress-circle-medium: 12px; + --spectrum-field-top-to-progress-circle-large: 17px; + --spectrum-field-top-to-progress-circle-extra-large: 22px; + --spectrum-field-edge-to-alert-icon-small: 11px; + --spectrum-field-edge-to-alert-icon-medium: 15px; + --spectrum-field-edge-to-alert-icon-large: 19px; + --spectrum-field-edge-to-alert-icon-extra-large: 22px; + --spectrum-field-edge-to-validation-icon-small: 11px; + --spectrum-field-edge-to-validation-icon-medium: 15px; + --spectrum-field-edge-to-validation-icon-large: 19px; + --spectrum-field-edge-to-validation-icon-extra-large: 22px; + --spectrum-field-text-to-alert-icon-small: 10px; + --spectrum-field-text-to-alert-icon-medium: 15px; + --spectrum-field-text-to-alert-icon-large: 19px; + --spectrum-field-text-to-alert-icon-extra-large: 22px; + --spectrum-field-text-to-validation-icon-small: 10px; + --spectrum-field-text-to-validation-icon-medium: 15px; + --spectrum-field-text-to-validation-icon-large: 19px; + --spectrum-field-text-to-validation-icon-extra-large: 22px; + --spectrum-field-width: 240px; + --spectrum-character-count-to-field-quiet-small: -4px; + --spectrum-character-count-to-field-quiet-medium: -4px; + --spectrum-character-count-to-field-quiet-large: -4px; + --spectrum-character-count-to-field-quiet-extra-large: -5px; + --spectrum-side-label-character-count-to-field: 15px; + --spectrum-side-label-character-count-top-margin-small: 5px; + --spectrum-side-label-character-count-top-margin-medium: 10px; + --spectrum-side-label-character-count-top-margin-large: 14px; + --spectrum-side-label-character-count-top-margin-extra-large: 18px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; + --spectrum-navigational-indicator-top-to-back-icon-small: 7px; + --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; + --spectrum-navigational-indicator-top-to-back-icon-large: 16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; + --spectrum-color-control-track-width: 30px; + --spectrum-font-size-50: 13px; + --spectrum-font-size-75: 15px; + --spectrum-font-size-100: 17px; + --spectrum-font-size-200: 19px; + --spectrum-font-size-300: 22px; + --spectrum-font-size-400: 24px; + --spectrum-font-size-500: 27px; + --spectrum-font-size-600: 31px; + --spectrum-font-size-700: 34px; + --spectrum-font-size-800: 39px; + --spectrum-font-size-900: 44px; + --spectrum-font-size-1000: 49px; + --spectrum-font-size-1100: 55px; + --spectrum-font-size-1200: 62px; + --spectrum-font-size-1300: 70px; } diff --git a/tools/styles/tokens/light-vars.css b/tools/styles/tokens/light-vars.css index f0ac943937..e0e43ea8b0 100644 --- a/tools/styles/tokens/light-vars.css +++ b/tools/styles/tokens/light-vars.css @@ -1,499 +1,493 @@ :host, :root { - --spectrum-overlay-opacity: 0.4; - --spectrum-drop-shadow-color-rgb: 0, 0, 0; - --spectrum-drop-shadow-color-opacity: 0.15; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); - --spectrum-background-base-color: var(--spectrum-gray-200); - --spectrum-background-layer-1-color: var(--spectrum-gray-100); - --spectrum-background-layer-2-color: var(--spectrum-gray-50); - --spectrum-neutral-background-color-default: var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); - --spectrum-neutral-background-color-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-600 - ); - --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-700); - --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-700 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-900 - ); - --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down: var(--spectrum-accent-color-1100); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-900 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-1000 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-1100 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-1000 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-1000 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-1100 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-1000 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-900 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-1000 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-1100 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-600 - ); - --spectrum-gray-background-color-default: var(--spectrum-gray-700); - --spectrum-red-background-color-default: var(--spectrum-red-900); - --spectrum-orange-background-color-default: var(--spectrum-orange-600); - --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-500 - ); - --spectrum-celery-background-color-default: var(--spectrum-celery-600); - --spectrum-green-background-color-default: var(--spectrum-green-900); - --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); - --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); - --spectrum-blue-background-color-default: var(--spectrum-blue-900); - --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); - --spectrum-purple-background-color-default: var(--spectrum-purple-900); - --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); - --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); - --spectrum-neutral-visual-color: var(--spectrum-gray-500); - --spectrum-accent-visual-color: var(--spectrum-accent-color-800); - --spectrum-informative-visual-color: var(--spectrum-informative-color-800); - --spectrum-negative-visual-color: var(--spectrum-negative-color-800); - --spectrum-notice-visual-color: var(--spectrum-notice-color-700); - --spectrum-positive-visual-color: var(--spectrum-positive-color-700); - --spectrum-gray-visual-color: var(--spectrum-gray-500); - --spectrum-red-visual-color: var(--spectrum-red-800); - --spectrum-orange-visual-color: var(--spectrum-orange-700); - --spectrum-yellow-visual-color: var(--spectrum-yellow-600); - --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); - --spectrum-celery-visual-color: var(--spectrum-celery-700); - --spectrum-green-visual-color: var(--spectrum-green-700); - --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); - --spectrum-cyan-visual-color: var(--spectrum-cyan-600); - --spectrum-blue-visual-color: var(--spectrum-blue-800); - --spectrum-indigo-visual-color: var(--spectrum-indigo-800); - --spectrum-purple-visual-color: var(--spectrum-purple-800); - --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); - --spectrum-magenta-visual-color: var(--spectrum-magenta-800); - --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); - --spectrum-gray-50-rgb: 255, 255, 255; - --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb: 253, 253, 253; - --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb: 248, 248, 248; - --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb: 230, 230, 230; - --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb: 213, 213, 213; - --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb: 177, 177, 177; - --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb: 144, 144, 144; - --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb: 109, 109, 109; - --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb: 70, 70, 70; - --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb: 34, 34, 34; - --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb: 0, 0, 0; - --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb: 224, 242, 255; - --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb: 202, 232, 255; - --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb: 181, 222, 255; - --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb: 150, 206, 253; - --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb: 120, 187, 250; - --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb: 89, 167, 246; - --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb: 56, 146, 243; - --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb: 20, 122, 243; - --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb: 2, 101, 220; - --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb: 0, 84, 182; - --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb: 0, 68, 145; - --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb: 0, 53, 113; - --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb: 0, 39, 84; - --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb: 0, 28, 60; - --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb: 255, 235, 231; - --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb: 255, 221, 214; - --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb: 255, 205, 195; - --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb: 255, 183, 169; - --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb: 255, 155, 136; - --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb: 255, 124, 101; - --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb: 247, 92, 70; - --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb: 234, 56, 41; - --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb: 211, 21, 16; - --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb: 180, 0, 0; - --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb: 147, 0, 0; - --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb: 116, 0, 0; - --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb: 89, 0, 0; - --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb: 67, 0, 0; - --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb: 255, 236, 204; - --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb: 255, 223, 173; - --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb: 253, 210, 145; - --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb: 255, 187, 99; - --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb: 255, 160, 55; - --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb: 246, 133, 17; - --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb: 228, 111, 0; - --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb: 203, 93, 0; - --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb: 177, 76, 0; - --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb: 149, 61, 0; - --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb: 122, 47, 0; - --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb: 97, 35, 0; - --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb: 73, 25, 1; - --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb: 53, 18, 1; - --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb: 251, 241, 152; - --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb: 248, 231, 80; - --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb: 248, 217, 4; - --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb: 232, 198, 0; - --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb: 215, 179, 0; - --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb: 196, 159, 0; - --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb: 176, 140, 0; - --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb: 155, 120, 0; - --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb: 133, 102, 0; - --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb: 112, 83, 0; - --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb: 91, 67, 0; - --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb: 72, 51, 0; - --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb: 54, 37, 0; - --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb: 40, 26, 0; - --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb: 219, 252, 110; - --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb: 203, 244, 67; - --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb: 188, 233, 42; - --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb: 170, 216, 22; - --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb: 152, 197, 10; - --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb: 135, 177, 3; - --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb: 118, 156, 0; - --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb: 103, 136, 0; - --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb: 87, 116, 0; - --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb: 72, 96, 0; - --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb: 58, 77, 0; - --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb: 44, 59, 0; - --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb: 33, 44, 0; - --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb: 24, 31, 0; - --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb: 205, 252, 191; - --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb: 174, 246, 157; - --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb: 150, 238, 133; - --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb: 114, 224, 106; - --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb: 78, 207, 80; - --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb: 39, 187, 54; - --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb: 7, 167, 33; - --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb: 0, 145, 18; - --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb: 0, 124, 15; - --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb: 0, 103, 15; - --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb: 0, 83, 13; - --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb: 0, 64, 10; - --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb: 0, 48, 7; - --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb: 0, 34, 5; - --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb: 206, 248, 224; - --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb: 173, 244, 206; - --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb: 137, 236, 188; - --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb: 103, 222, 168; - --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb: 73, 204, 147; - --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb: 47, 184, 128; - --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb: 21, 164, 110; - --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb: 0, 143, 93; - --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb: 0, 122, 77; - --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb: 0, 101, 62; - --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb: 0, 81, 50; - --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb: 5, 63, 39; - --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb: 10, 46, 29; - --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb: 10, 32, 21; - --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb: 206, 247, 243; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 170, 241, 234; - --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb: 140, 233, 226; - --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb: 101, 218, 210; - --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb: 63, 201, 193; - --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb: 15, 181, 174; - --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb: 0, 161, 154; - --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb: 0, 140, 135; - --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb: 0, 119, 114; - --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb: 0, 99, 95; - --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb: 12, 79, 76; - --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb: 18, 60, 58; - --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb: 18, 44, 43; - --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb: 15, 31, 30; - --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb: 197, 248, 255; - --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb: 164, 240, 255; - --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb: 136, 231, 250; - --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb: 96, 216, 243; - --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb: 51, 197, 232; - --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb: 18, 176, 218; - --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb: 1, 156, 200; - --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb: 0, 134, 180; - --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb: 0, 113, 159; - --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb: 0, 93, 137; - --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb: 0, 74, 115; - --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb: 0, 57, 93; - --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb: 0, 42, 70; - --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb: 0, 30, 51; - --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb: 237, 238, 255; - --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb: 224, 226, 255; - --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb: 211, 213, 255; - --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb: 193, 196, 255; - --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb: 172, 175, 255; - --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb: 149, 153, 255; - --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb: 126, 132, 252; - --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb: 104, 109, 244; - --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb: 82, 88, 228; - --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb: 64, 70, 202; - --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb: 50, 54, 168; - --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb: 38, 41, 134; - --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb: 27, 30, 100; - --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb: 20, 22, 72; - --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb: 246, 235, 255; - --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb: 238, 221, 255; - --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb: 230, 208, 255; - --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb: 219, 187, 254; - --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb: 204, 164, 253; - --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb: 189, 139, 252; - --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb: 174, 114, 249; - --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb: 157, 87, 244; - --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb: 137, 61, 231; - --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb: 115, 38, 211; - --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb: 93, 19, 183; - --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb: 71, 12, 148; - --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb: 51, 16, 106; - --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb: 35, 15, 73; - --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb: 255, 233, 252; - --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb: 255, 218, 250; - --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb: 254, 199, 248; - --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb: 251, 174, 246; - --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb: 245, 146, 243; - --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb: 237, 116, 237; - --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb: 224, 85, 226; - --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb: 205, 58, 206; - --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb: 182, 34, 183; - --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb: 157, 3, 158; - --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb: 128, 0, 129; - --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb: 100, 6, 100; - --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb: 71, 14, 70; - --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb: 50, 13, 49; - --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb: 255, 234, 241; - --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb: 255, 220, 232; - --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb: 255, 202, 221; - --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb: 255, 178, 206; - --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb: 255, 149, 189; - --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb: 250, 119, 170; - --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb: 239, 90, 152; - --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb: 222, 61, 130; - --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb: 200, 34, 105; - --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb: 173, 9, 85; - --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb: 142, 0, 69; - --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb: 112, 0, 55; - --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb: 84, 3, 42; - --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb: 60, 6, 29; - --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); - --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); - --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); - --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); + --spectrum-overlay-opacity: 0.4; + --spectrum-drop-shadow-color-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-opacity: 0.15; + --spectrum-drop-shadow-color: rgba( + var(--spectrum-drop-shadow-color-rgb), + var(--spectrum-drop-shadow-color-opacity) + ); + --spectrum-background-base-color: var(--spectrum-gray-200); + --spectrum-background-layer-1-color: var(--spectrum-gray-100); + --spectrum-background-layer-2-color: var(--spectrum-gray-50); + --spectrum-neutral-background-color-default: var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-background-color-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-600); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-700 + ); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-900); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-1100); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-900 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-1000 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-1100 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-1000 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-background-color-down: var( + --spectrum-negative-color-1100 + ); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-900 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-1000 + ); + --spectrum-positive-background-color-down: var( + --spectrum-positive-color-1100 + ); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-1000 + ); + --spectrum-notice-background-color-default: var(--spectrum-notice-color-600); + --spectrum-gray-background-color-default: var(--spectrum-gray-700); + --spectrum-red-background-color-default: var(--spectrum-red-900); + --spectrum-orange-background-color-default: var(--spectrum-orange-600); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-500 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-600); + --spectrum-green-background-color-default: var(--spectrum-green-900); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); + --spectrum-blue-background-color-default: var(--spectrum-blue-900); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); + --spectrum-purple-background-color-default: var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); + --spectrum-neutral-visual-color: var(--spectrum-gray-500); + --spectrum-accent-visual-color: var(--spectrum-accent-color-800); + --spectrum-informative-visual-color: var(--spectrum-informative-color-800); + --spectrum-negative-visual-color: var(--spectrum-negative-color-800); + --spectrum-notice-visual-color: var(--spectrum-notice-color-700); + --spectrum-positive-visual-color: var(--spectrum-positive-color-700); + --spectrum-gray-visual-color: var(--spectrum-gray-500); + --spectrum-red-visual-color: var(--spectrum-red-800); + --spectrum-orange-visual-color: var(--spectrum-orange-700); + --spectrum-yellow-visual-color: var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color: var(--spectrum-celery-700); + --spectrum-green-visual-color: var(--spectrum-green-700); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color: var(--spectrum-cyan-600); + --spectrum-blue-visual-color: var(--spectrum-blue-800); + --spectrum-indigo-visual-color: var(--spectrum-indigo-800); + --spectrum-purple-visual-color: var(--spectrum-purple-800); + --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); + --spectrum-magenta-visual-color: var(--spectrum-magenta-800); + --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); + --spectrum-gray-50-rgb: 255, 255, 255; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 253, 253, 253; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 248, 248, 248; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 230, 230, 230; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 213, 213, 213; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 177, 177, 177; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 144, 144, 144; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 109, 109, 109; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 70, 70, 70; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 34, 34, 34; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 0, 0, 0; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb: 224, 242, 255; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 202, 232, 255; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 181, 222, 255; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 150, 206, 253; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 120, 187, 250; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 89, 167, 246; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 56, 146, 243; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 20, 122, 243; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 2, 101, 220; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 0, 84, 182; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 0, 68, 145; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 0, 53, 113; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 0, 39, 84; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 0, 28, 60; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb: 255, 235, 231; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 255, 221, 214; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 255, 205, 195; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 255, 183, 169; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 255, 155, 136; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 255, 124, 101; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 247, 92, 70; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 234, 56, 41; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 211, 21, 16; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 180, 0, 0; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 147, 0, 0; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 116, 0, 0; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 89, 0, 0; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 67, 0, 0; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb: 255, 236, 204; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 255, 223, 173; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 253, 210, 145; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 255, 187, 99; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 255, 160, 55; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 246, 133, 17; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 228, 111, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 203, 93, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 177, 76, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 149, 61, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 122, 47, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 97, 35, 0; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 73, 25, 1; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 53, 18, 1; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb: 251, 241, 152; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 248, 231, 80; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 248, 217, 4; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 232, 198, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 215, 179, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 196, 159, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 176, 140, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 155, 120, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 133, 102, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 112, 83, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 91, 67, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 72, 51, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 54, 37, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 40, 26, 0; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb: 219, 252, 110; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 203, 244, 67; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 188, 233, 42; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 170, 216, 22; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 152, 197, 10; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 135, 177, 3; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 118, 156, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 103, 136, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 87, 116, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 72, 96, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 58, 77, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 44, 59, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 33, 44, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 24, 31, 0; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb: 205, 252, 191; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 174, 246, 157; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 150, 238, 133; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 114, 224, 106; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 78, 207, 80; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 39, 187, 54; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 7, 167, 33; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 0, 145, 18; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 0, 124, 15; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 0, 103, 15; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 0, 83, 13; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 0, 64, 10; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 0, 48, 7; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 0, 34, 5; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb: 206, 248, 224; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 173, 244, 206; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 137, 236, 188; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 103, 222, 168; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 73, 204, 147; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 47, 184, 128; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 21, 164, 110; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 0, 143, 93; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 0, 122, 77; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 0, 101, 62; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 0, 81, 50; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 5, 63, 39; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 10, 46, 29; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 10, 32, 21; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb: 206, 247, 243; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 170, 241, 234; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 140, 233, 226; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 101, 218, 210; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 63, 201, 193; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 15, 181, 174; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 0, 161, 154; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 0, 140, 135; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 0, 119, 114; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 0, 99, 95; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 12, 79, 76; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 18, 60, 58; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 18, 44, 43; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 15, 31, 30; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb: 197, 248, 255; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 164, 240, 255; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 136, 231, 250; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 96, 216, 243; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 51, 197, 232; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 18, 176, 218; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 1, 156, 200; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 0, 134, 180; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 0, 113, 159; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 0, 93, 137; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 0, 74, 115; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 0, 57, 93; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 0, 42, 70; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 0, 30, 51; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb: 237, 238, 255; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 224, 226, 255; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 211, 213, 255; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 193, 196, 255; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 172, 175, 255; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 149, 153, 255; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 126, 132, 252; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 104, 109, 244; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 82, 88, 228; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 64, 70, 202; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 50, 54, 168; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 38, 41, 134; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 27, 30, 100; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 20, 22, 72; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb: 246, 235, 255; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 238, 221, 255; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 230, 208, 255; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 219, 187, 254; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 204, 164, 253; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 189, 139, 252; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 174, 114, 249; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 157, 87, 244; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 137, 61, 231; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 115, 38, 211; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 93, 19, 183; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 71, 12, 148; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 51, 16, 106; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 35, 15, 73; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb: 255, 233, 252; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 255, 218, 250; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 254, 199, 248; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 251, 174, 246; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 245, 146, 243; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 237, 116, 237; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 224, 85, 226; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 205, 58, 206; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 182, 34, 183; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 157, 3, 158; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 128, 0, 129; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 100, 6, 100; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 71, 14, 70; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 50, 13, 49; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb: 255, 234, 241; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 255, 220, 232; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 255, 202, 221; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 255, 178, 206; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 255, 149, 189; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 250, 119, 170; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 239, 90, 152; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 222, 61, 130; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 200, 34, 105; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 173, 9, 85; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 142, 0, 69; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 112, 0, 55; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 84, 3, 42; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 60, 6, 29; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); } diff --git a/tools/styles/tokens/medium-vars.css b/tools/styles/tokens/medium-vars.css index 6a8961b90e..fa2bac75ef 100644 --- a/tools/styles/tokens/medium-vars.css +++ b/tools/styles/tokens/medium-vars.css @@ -1,494 +1,494 @@ :host, :root { - --spectrum-workflow-icon-size-50: 14px; - --spectrum-workflow-icon-size-75: 16px; - --spectrum-workflow-icon-size-100: 18px; - --spectrum-workflow-icon-size-200: 20px; - --spectrum-workflow-icon-size-300: 22px; - --spectrum-arrow-icon-size-75: 10px; - --spectrum-arrow-icon-size-100: 10px; - --spectrum-arrow-icon-size-200: 12px; - --spectrum-arrow-icon-size-300: 14px; - --spectrum-arrow-icon-size-400: 16px; - --spectrum-arrow-icon-size-500: 18px; - --spectrum-arrow-icon-size-600: 20px; - --spectrum-asterisk-icon-size-100: 8px; - --spectrum-asterisk-icon-size-200: 10px; - --spectrum-asterisk-icon-size-300: 10px; - --spectrum-checkmark-icon-size-50: 10px; - --spectrum-checkmark-icon-size-75: 10px; - --spectrum-checkmark-icon-size-100: 10px; - --spectrum-checkmark-icon-size-200: 12px; - --spectrum-checkmark-icon-size-300: 14px; - --spectrum-checkmark-icon-size-400: 16px; - --spectrum-checkmark-icon-size-500: 16px; - --spectrum-checkmark-icon-size-600: 18px; - --spectrum-chevron-icon-size-50: 6px; - --spectrum-chevron-icon-size-75: 10px; - --spectrum-chevron-icon-size-100: 10px; - --spectrum-chevron-icon-size-200: 12px; - --spectrum-chevron-icon-size-300: 14px; - --spectrum-chevron-icon-size-400: 16px; - --spectrum-chevron-icon-size-500: 16px; - --spectrum-chevron-icon-size-600: 18px; - --spectrum-corner-triangle-icon-size-75: 5px; - --spectrum-corner-triangle-icon-size-100: 5px; - --spectrum-corner-triangle-icon-size-200: 6px; - --spectrum-corner-triangle-icon-size-300: 7px; - --spectrum-cross-icon-size-75: 8px; - --spectrum-cross-icon-size-100: 8px; - --spectrum-cross-icon-size-200: 10px; - --spectrum-cross-icon-size-300: 12px; - --spectrum-cross-icon-size-400: 12px; - --spectrum-cross-icon-size-500: 14px; - --spectrum-cross-icon-size-600: 16px; - --spectrum-dash-icon-size-50: 8px; - --spectrum-dash-icon-size-75: 8px; - --spectrum-dash-icon-size-100: 10px; - --spectrum-dash-icon-size-200: 12px; - --spectrum-dash-icon-size-300: 12px; - --spectrum-dash-icon-size-400: 14px; - --spectrum-dash-icon-size-500: 16px; - --spectrum-dash-icon-size-600: 18px; - --spectrum-field-label-text-to-asterisk-small: 4px; - --spectrum-field-label-text-to-asterisk-medium: 4px; - --spectrum-field-label-text-to-asterisk-large: 5px; - --spectrum-field-label-text-to-asterisk-extra-large: 5px; - --spectrum-field-label-top-to-asterisk-small: 8px; - --spectrum-field-label-top-to-asterisk-medium: 12px; - --spectrum-field-label-top-to-asterisk-large: 15px; - --spectrum-field-label-top-to-asterisk-extra-large: 19px; - --spectrum-field-label-top-margin-medium: 4px; - --spectrum-field-label-top-margin-large: 5px; - --spectrum-field-label-top-margin-extra-large: 5px; - --spectrum-field-label-to-component-quiet-small: -8px; - --spectrum-field-label-to-component-quiet-medium: -8px; - --spectrum-field-label-to-component-quiet-large: -12px; - --spectrum-field-label-to-component-quiet-extra-large: -15px; - --spectrum-help-text-top-to-workflow-icon-small: 4px; - --spectrum-help-text-top-to-workflow-icon-medium: 3px; - --spectrum-help-text-top-to-workflow-icon-large: 6px; - --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; - --spectrum-status-light-dot-size-medium: 8px; - --spectrum-status-light-dot-size-large: 10px; - --spectrum-status-light-dot-size-extra-large: 10px; - --spectrum-status-light-top-to-dot-small: 8px; - --spectrum-status-light-top-to-dot-medium: 12px; - --spectrum-status-light-top-to-dot-large: 15px; - --spectrum-status-light-top-to-dot-extra-large: 19px; - --spectrum-action-button-edge-to-hold-icon-medium: 4px; - --spectrum-action-button-edge-to-hold-icon-large: 5px; - --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 8px; - --spectrum-tooltip-tip-height: 4px; - --spectrum-tooltip-maximum-width: 160px; - --spectrum-progress-circle-size-small: 16px; - --spectrum-progress-circle-size-medium: 32px; - --spectrum-progress-circle-size-large: 64px; - --spectrum-progress-circle-thickness-small: 2px; - --spectrum-progress-circle-thickness-medium: 3px; - --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 48px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 15px; - --spectrum-toast-top-to-text: 14px; - --spectrum-toast-bottom-to-text: 17px; - --spectrum-action-bar-height: 48px; - --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; - --spectrum-progress-bar-thickness-small: 4px; - --spectrum-progress-bar-thickness-medium: 6px; - --spectrum-progress-bar-thickness-large: 8px; - --spectrum-progress-bar-thickness-extra-large: 10px; - --spectrum-meter-width: 192px; - --spectrum-meter-thickness-small: 4px; - --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; - --spectrum-text-area-minimum-width: 112px; - --spectrum-text-area-minimum-height: 56px; - --spectrum-combo-box-visual-to-field-button-small: 7px; - --spectrum-combo-box-visual-to-field-button-medium: 8px; - --spectrum-combo-box-visual-to-field-button-large: 9px; - --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; - --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); - --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size: 8px; - --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); - --spectrum-breadcrumbs-height-multiline: 72px; - --spectrum-breadcrumbs-top-to-text: 13px; - --spectrum-breadcrumbs-top-to-text-compact: 11px; - --spectrum-breadcrumbs-top-to-text-multiline: 12px; - --spectrum-breadcrumbs-bottom-to-text: 15px; - --spectrum-breadcrumbs-bottom-to-text-compact: 12px; - --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; - --spectrum-breadcrumbs-start-edge-to-text: 8px; - --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; - --spectrum-breadcrumbs-top-to-separator-icon: 19px; - --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; - --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; - --spectrum-breadcrumbs-top-to-truncated-menu: 8px; - --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; - --spectrum-alert-banner-minimum-height: 48px; - --spectrum-alert-banner-width: 832px; - --spectrum-alert-banner-top-to-workflow-icon: 15px; - --spectrum-alert-banner-top-to-text: 14px; - --spectrum-alert-banner-bottom-to-text: 17px; - --spectrum-rating-indicator-width: 18px; - --spectrum-rating-indicator-to-icon: 4px; - --spectrum-color-area-width: 192px; - --spectrum-color-area-minimum-width: 64px; - --spectrum-color-area-height: 192px; - --spectrum-color-area-minimum-height: 64px; - --spectrum-color-wheel-width: 192px; - --spectrum-color-wheel-minimum-width: 175px; - --spectrum-color-slider-length: 192px; - --spectrum-color-slider-minimum-length: 80px; - --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); - --spectrum-illustrated-message-cjk-title-size: var( - --spectrum-heading-cjk-size-m - ); - --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-width: 296px; - --spectrum-coach-mark-minimum-width: 296px; - --spectrum-coach-mark-maximum-width: 380px; - --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); - --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; - --spectrum-coach-mark-media-height: 222px; - --spectrum-coach-mark-media-minimum-height: 166px; - --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; - --spectrum-color-handle-size: 16px; - --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; - --spectrum-tab-item-to-tab-item-horizontal-small: 21px; - --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; - --spectrum-tab-item-to-tab-item-horizontal-large: 27px; - --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; - --spectrum-tab-item-to-tab-item-vertical-small: 4px; - --spectrum-tab-item-to-tab-item-vertical-medium: 4px; - --spectrum-tab-item-to-tab-item-vertical-large: 5px; - --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; - --spectrum-tab-item-start-to-edge-small: 12px; - --spectrum-tab-item-start-to-edge-medium: 12px; - --spectrum-tab-item-start-to-edge-large: 13px; - --spectrum-tab-item-start-to-edge-extra-large: 13px; - --spectrum-tab-item-top-to-text-small: 11px; - --spectrum-tab-item-bottom-to-text-small: 12px; - --spectrum-tab-item-top-to-text-medium: 14px; - --spectrum-tab-item-bottom-to-text-medium: 14px; - --spectrum-tab-item-top-to-text-large: 16px; - --spectrum-tab-item-bottom-to-text-large: 18px; - --spectrum-tab-item-top-to-text-extra-large: 19px; - --spectrum-tab-item-bottom-to-text-extra-large: 20px; - --spectrum-tab-item-top-to-text-compact-small: 4px; - --spectrum-tab-item-bottom-to-text-compact-small: 5px; - --spectrum-tab-item-top-to-text-compact-medium: 6px; - --spectrum-tab-item-bottom-to-text-compact-medium: 8px; - --spectrum-tab-item-top-to-text-compact-large: 10px; - --spectrum-tab-item-bottom-to-text-compact-large: 12px; - --spectrum-tab-item-top-to-text-compact-extra-large: 12px; - --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; - --spectrum-tab-item-top-to-workflow-icon-small: 13px; - --spectrum-tab-item-top-to-workflow-icon-medium: 15px; - --spectrum-tab-item-top-to-workflow-icon-large: 17px; - --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; - --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; - --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; - --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; - --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; - --spectrum-tab-item-focus-indicator-gap-small: 7px; - --spectrum-tab-item-focus-indicator-gap-medium: 8px; - --spectrum-tab-item-focus-indicator-gap-large: 9px; - --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; - --spectrum-side-navigation-width: 192px; - --spectrum-side-navigation-minimum-width: 160px; - --spectrum-side-navigation-maximum-width: 240px; - --spectrum-side-navigation-second-level-edge-to-text: 24px; - --spectrum-side-navigation-third-level-edge-to-text: 36px; - --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; - --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; - --spectrum-side-navigation-item-to-item: 4px; - --spectrum-side-navigation-item-to-header: 24px; - --spectrum-side-navigation-header-to-item: 8px; - --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; - --spectrum-accordion-top-to-text-spacious-small: 9px; - --spectrum-text-to-visual-50: 6px; - --spectrum-text-to-visual-75: 7px; - --spectrum-text-to-visual-100: 8px; - --spectrum-text-to-visual-200: 9px; - --spectrum-text-to-visual-300: 10px; - --spectrum-text-to-control-75: 9px; - --spectrum-text-to-control-100: 10px; - --spectrum-text-to-control-200: 11px; - --spectrum-text-to-control-300: 13px; - --spectrum-component-height-50: 20px; - --spectrum-component-height-75: 24px; - --spectrum-component-height-100: 32px; - --spectrum-component-height-200: 40px; - --spectrum-component-height-300: 48px; - --spectrum-component-height-400: 56px; - --spectrum-component-height-500: 64px; - --spectrum-component-pill-edge-to-visual-75: 10px; - --spectrum-component-pill-edge-to-visual-100: 14px; - --spectrum-component-pill-edge-to-visual-200: 18px; - --spectrum-component-pill-edge-to-visual-300: 21px; - --spectrum-component-pill-edge-to-visual-only-75: 4px; - --spectrum-component-pill-edge-to-visual-only-100: 7px; - --spectrum-component-pill-edge-to-visual-only-200: 10px; - --spectrum-component-pill-edge-to-visual-only-300: 13px; - --spectrum-component-pill-edge-to-text-75: 12px; - --spectrum-component-pill-edge-to-text-100: 16px; - --spectrum-component-pill-edge-to-text-200: 20px; - --spectrum-component-pill-edge-to-text-300: 24px; - --spectrum-component-edge-to-visual-50: 6px; - --spectrum-component-edge-to-visual-75: 7px; - --spectrum-component-edge-to-visual-100: 10px; - --spectrum-component-edge-to-visual-200: 13px; - --spectrum-component-edge-to-visual-300: 15px; - --spectrum-component-edge-to-visual-only-50: 3px; - --spectrum-component-edge-to-visual-only-75: 4px; - --spectrum-component-edge-to-visual-only-100: 7px; - --spectrum-component-edge-to-visual-only-200: 10px; - --spectrum-component-edge-to-visual-only-300: 13px; - --spectrum-component-edge-to-text-50: 8px; - --spectrum-component-edge-to-text-75: 9px; - --spectrum-component-edge-to-text-100: 12px; - --spectrum-component-edge-to-text-200: 15px; - --spectrum-component-edge-to-text-300: 18px; - --spectrum-component-top-to-workflow-icon-50: 3px; - --spectrum-component-top-to-workflow-icon-75: 4px; - --spectrum-component-top-to-workflow-icon-100: 7px; - --spectrum-component-top-to-workflow-icon-200: 10px; - --spectrum-component-top-to-workflow-icon-300: 13px; - --spectrum-component-top-to-text-50: 3px; - --spectrum-component-top-to-text-75: 4px; - --spectrum-component-top-to-text-100: 6px; - --spectrum-component-top-to-text-200: 9px; - --spectrum-component-top-to-text-300: 12px; - --spectrum-component-bottom-to-text-50: 3px; - --spectrum-component-bottom-to-text-75: 5px; - --spectrum-component-bottom-to-text-100: 9px; - --spectrum-component-bottom-to-text-200: 11px; - --spectrum-component-bottom-to-text-300: 14px; - --spectrum-component-to-menu-small: 6px; - --spectrum-component-to-menu-medium: 6px; - --spectrum-component-to-menu-large: 7px; - --spectrum-component-to-menu-extra-large: 8px; - --spectrum-field-edge-to-disclosure-icon-75: 7px; - --spectrum-field-edge-to-disclosure-icon-100: 11px; - --spectrum-field-edge-to-disclosure-icon-200: 14px; - --spectrum-field-edge-to-disclosure-icon-300: 17px; - --spectrum-field-end-edge-to-disclosure-icon-75: 7px; - --spectrum-field-end-edge-to-disclosure-icon-100: 11px; - --spectrum-field-end-edge-to-disclosure-icon-200: 14px; - --spectrum-field-end-edge-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-disclosure-icon-75: 7px; - --spectrum-field-top-to-disclosure-icon-100: 11px; - --spectrum-field-top-to-disclosure-icon-200: 14px; - --spectrum-field-top-to-disclosure-icon-300: 17px; - --spectrum-field-top-to-alert-icon-small: 4px; - --spectrum-field-top-to-alert-icon-medium: 7px; - --spectrum-field-top-to-alert-icon-large: 10px; - --spectrum-field-top-to-alert-icon-extra-large: 13px; - --spectrum-field-top-to-validation-icon-small: 7px; - --spectrum-field-top-to-validation-icon-medium: 11px; - --spectrum-field-top-to-validation-icon-large: 14px; - --spectrum-field-top-to-validation-icon-extra-large: 17px; - --spectrum-field-top-to-progress-circle-small: 4px; - --spectrum-field-top-to-progress-circle-medium: 8px; - --spectrum-field-top-to-progress-circle-large: 12px; - --spectrum-field-top-to-progress-circle-extra-large: 16px; - --spectrum-field-edge-to-alert-icon-small: 9px; - --spectrum-field-edge-to-alert-icon-medium: 12px; - --spectrum-field-edge-to-alert-icon-large: 15px; - --spectrum-field-edge-to-alert-icon-extra-large: 18px; - --spectrum-field-edge-to-validation-icon-small: 9px; - --spectrum-field-edge-to-validation-icon-medium: 12px; - --spectrum-field-edge-to-validation-icon-large: 15px; - --spectrum-field-edge-to-validation-icon-extra-large: 18px; - --spectrum-field-text-to-alert-icon-small: 8px; - --spectrum-field-text-to-alert-icon-medium: 12px; - --spectrum-field-text-to-alert-icon-large: 15px; - --spectrum-field-text-to-alert-icon-extra-large: 18px; - --spectrum-field-text-to-validation-icon-small: 8px; - --spectrum-field-text-to-validation-icon-medium: 12px; - --spectrum-field-text-to-validation-icon-large: 15px; - --spectrum-field-text-to-validation-icon-extra-large: 18px; - --spectrum-field-width: 192px; - --spectrum-character-count-to-field-quiet-small: -3px; - --spectrum-character-count-to-field-quiet-medium: -3px; - --spectrum-character-count-to-field-quiet-large: -3px; - --spectrum-character-count-to-field-quiet-extra-large: -4px; - --spectrum-side-label-character-count-to-field: 12px; - --spectrum-side-label-character-count-top-margin-small: 4px; - --spectrum-side-label-character-count-top-margin-medium: 8px; - --spectrum-side-label-character-count-top-margin-large: 11px; - --spectrum-side-label-character-count-top-margin-extra-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; - --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; - --spectrum-navigational-indicator-top-to-back-icon-small: 6px; - --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; - --spectrum-navigational-indicator-top-to-back-icon-large: 12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; - --spectrum-color-control-track-width: 24px; - --spectrum-font-size-50: 11px; - --spectrum-font-size-75: 12px; - --spectrum-font-size-100: 14px; - --spectrum-font-size-200: 16px; - --spectrum-font-size-300: 18px; - --spectrum-font-size-400: 20px; - --spectrum-font-size-500: 22px; - --spectrum-font-size-600: 25px; - --spectrum-font-size-700: 28px; - --spectrum-font-size-800: 32px; - --spectrum-font-size-900: 36px; - --spectrum-font-size-1000: 40px; - --spectrum-font-size-1100: 45px; - --spectrum-font-size-1200: 50px; - --spectrum-font-size-1300: 60px; + --spectrum-workflow-icon-size-50: 14px; + --spectrum-workflow-icon-size-75: 16px; + --spectrum-workflow-icon-size-100: 18px; + --spectrum-workflow-icon-size-200: 20px; + --spectrum-workflow-icon-size-300: 22px; + --spectrum-arrow-icon-size-75: 10px; + --spectrum-arrow-icon-size-100: 10px; + --spectrum-arrow-icon-size-200: 12px; + --spectrum-arrow-icon-size-300: 14px; + --spectrum-arrow-icon-size-400: 16px; + --spectrum-arrow-icon-size-500: 18px; + --spectrum-arrow-icon-size-600: 20px; + --spectrum-asterisk-icon-size-100: 8px; + --spectrum-asterisk-icon-size-200: 10px; + --spectrum-asterisk-icon-size-300: 10px; + --spectrum-checkmark-icon-size-50: 10px; + --spectrum-checkmark-icon-size-75: 10px; + --spectrum-checkmark-icon-size-100: 10px; + --spectrum-checkmark-icon-size-200: 12px; + --spectrum-checkmark-icon-size-300: 14px; + --spectrum-checkmark-icon-size-400: 16px; + --spectrum-checkmark-icon-size-500: 16px; + --spectrum-checkmark-icon-size-600: 18px; + --spectrum-chevron-icon-size-50: 6px; + --spectrum-chevron-icon-size-75: 10px; + --spectrum-chevron-icon-size-100: 10px; + --spectrum-chevron-icon-size-200: 12px; + --spectrum-chevron-icon-size-300: 14px; + --spectrum-chevron-icon-size-400: 16px; + --spectrum-chevron-icon-size-500: 16px; + --spectrum-chevron-icon-size-600: 18px; + --spectrum-corner-triangle-icon-size-75: 5px; + --spectrum-corner-triangle-icon-size-100: 5px; + --spectrum-corner-triangle-icon-size-200: 6px; + --spectrum-corner-triangle-icon-size-300: 7px; + --spectrum-cross-icon-size-75: 8px; + --spectrum-cross-icon-size-100: 8px; + --spectrum-cross-icon-size-200: 10px; + --spectrum-cross-icon-size-300: 12px; + --spectrum-cross-icon-size-400: 12px; + --spectrum-cross-icon-size-500: 14px; + --spectrum-cross-icon-size-600: 16px; + --spectrum-dash-icon-size-50: 8px; + --spectrum-dash-icon-size-75: 8px; + --spectrum-dash-icon-size-100: 10px; + --spectrum-dash-icon-size-200: 12px; + --spectrum-dash-icon-size-300: 12px; + --spectrum-dash-icon-size-400: 14px; + --spectrum-dash-icon-size-500: 16px; + --spectrum-dash-icon-size-600: 18px; + --spectrum-field-label-text-to-asterisk-small: 4px; + --spectrum-field-label-text-to-asterisk-medium: 4px; + --spectrum-field-label-text-to-asterisk-large: 5px; + --spectrum-field-label-text-to-asterisk-extra-large: 5px; + --spectrum-field-label-top-to-asterisk-small: 8px; + --spectrum-field-label-top-to-asterisk-medium: 12px; + --spectrum-field-label-top-to-asterisk-large: 15px; + --spectrum-field-label-top-to-asterisk-extra-large: 19px; + --spectrum-field-label-top-margin-medium: 4px; + --spectrum-field-label-top-margin-large: 5px; + --spectrum-field-label-top-margin-extra-large: 5px; + --spectrum-field-label-to-component-quiet-small: -8px; + --spectrum-field-label-to-component-quiet-medium: -8px; + --spectrum-field-label-to-component-quiet-large: -12px; + --spectrum-field-label-to-component-quiet-extra-large: -15px; + --spectrum-help-text-top-to-workflow-icon-small: 4px; + --spectrum-help-text-top-to-workflow-icon-medium: 3px; + --spectrum-help-text-top-to-workflow-icon-large: 6px; + --spectrum-help-text-top-to-workflow-icon-extra-large: 9px; + --spectrum-status-light-dot-size-medium: 8px; + --spectrum-status-light-dot-size-large: 10px; + --spectrum-status-light-dot-size-extra-large: 10px; + --spectrum-status-light-top-to-dot-small: 8px; + --spectrum-status-light-top-to-dot-medium: 12px; + --spectrum-status-light-top-to-dot-large: 15px; + --spectrum-status-light-top-to-dot-extra-large: 19px; + --spectrum-action-button-edge-to-hold-icon-medium: 4px; + --spectrum-action-button-edge-to-hold-icon-large: 5px; + --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; + --spectrum-tooltip-tip-width: 8px; + --spectrum-tooltip-tip-height: 4px; + --spectrum-tooltip-maximum-width: 160px; + --spectrum-progress-circle-size-small: 16px; + --spectrum-progress-circle-size-medium: 32px; + --spectrum-progress-circle-size-large: 64px; + --spectrum-progress-circle-thickness-small: 2px; + --spectrum-progress-circle-thickness-medium: 3px; + --spectrum-progress-circle-thickness-large: 4px; + --spectrum-toast-height: 48px; + --spectrum-toast-maximum-width: 336px; + --spectrum-toast-top-to-workflow-icon: 15px; + --spectrum-toast-top-to-text: 14px; + --spectrum-toast-bottom-to-text: 17px; + --spectrum-action-bar-height: 48px; + --spectrum-action-bar-top-to-item-counter: 14px; + --spectrum-swatch-size-extra-small: 16px; + --spectrum-swatch-size-small: 24px; + --spectrum-swatch-size-medium: 32px; + --spectrum-swatch-size-large: 40px; + --spectrum-progress-bar-thickness-small: 4px; + --spectrum-progress-bar-thickness-medium: 6px; + --spectrum-progress-bar-thickness-large: 8px; + --spectrum-progress-bar-thickness-extra-large: 10px; + --spectrum-meter-width: 192px; + --spectrum-meter-thickness-small: 4px; + --spectrum-meter-thickness-large: 6px; + --spectrum-tag-top-to-avatar-small: 4px; + --spectrum-tag-top-to-avatar-medium: 6px; + --spectrum-tag-top-to-avatar-large: 9px; + --spectrum-tag-top-to-cross-icon-small: 8px; + --spectrum-tag-top-to-cross-icon-medium: 12px; + --spectrum-tag-top-to-cross-icon-large: 15px; + --spectrum-popover-top-to-content-area: 4px; + --spectrum-menu-item-edge-to-content-not-selected-small: 28px; + --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; + --spectrum-menu-item-edge-to-content-not-selected-large: 38px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; + --spectrum-menu-item-top-to-disclosure-icon-small: 7px; + --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; + --spectrum-menu-item-top-to-disclosure-icon-large: 14px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; + --spectrum-menu-item-top-to-selected-icon-small: 7px; + --spectrum-menu-item-top-to-selected-icon-medium: 11px; + --spectrum-menu-item-top-to-selected-icon-large: 14px; + --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; + --spectrum-slider-control-to-field-label-small: 5px; + --spectrum-slider-control-to-field-label-medium: 8px; + --spectrum-slider-control-to-field-label-large: 11px; + --spectrum-slider-control-to-field-label-extra-large: 14px; + --spectrum-picker-visual-to-disclosure-icon-small: 7px; + --spectrum-picker-visual-to-disclosure-icon-medium: 8px; + --spectrum-picker-visual-to-disclosure-icon-large: 9px; + --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; + --spectrum-text-area-minimum-width: 112px; + --spectrum-text-area-minimum-height: 56px; + --spectrum-combo-box-visual-to-field-button-small: 7px; + --spectrum-combo-box-visual-to-field-button-medium: 8px; + --spectrum-combo-box-visual-to-field-button-large: 9px; + --spectrum-combo-box-visual-to-field-button-extra-large: 10px; + --spectrum-thumbnail-size-50: 16px; + --spectrum-thumbnail-size-75: 18px; + --spectrum-thumbnail-size-100: 20px; + --spectrum-thumbnail-size-200: 22px; + --spectrum-thumbnail-size-300: 26px; + --spectrum-thumbnail-size-400: 28px; + --spectrum-thumbnail-size-500: 32px; + --spectrum-thumbnail-size-600: 36px; + --spectrum-thumbnail-size-700: 40px; + --spectrum-thumbnail-size-800: 44px; + --spectrum-thumbnail-size-900: 50px; + --spectrum-thumbnail-size-1000: 56px; + --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); + --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); + --spectrum-opacity-checkerboard-square-size: 8px; + --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); + --spectrum-breadcrumbs-height-multiline: 72px; + --spectrum-breadcrumbs-top-to-text: 13px; + --spectrum-breadcrumbs-top-to-text-compact: 11px; + --spectrum-breadcrumbs-top-to-text-multiline: 12px; + --spectrum-breadcrumbs-bottom-to-text: 15px; + --spectrum-breadcrumbs-bottom-to-text-compact: 12px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; + --spectrum-breadcrumbs-start-edge-to-text: 8px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; + --spectrum-breadcrumbs-top-to-separator-icon: 19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; + --spectrum-breadcrumbs-top-to-truncated-menu: 8px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; + --spectrum-avatar-size-50: 16px; + --spectrum-avatar-size-75: 18px; + --spectrum-avatar-size-100: 20px; + --spectrum-avatar-size-200: 22px; + --spectrum-avatar-size-300: 26px; + --spectrum-avatar-size-400: 28px; + --spectrum-avatar-size-500: 32px; + --spectrum-avatar-size-600: 36px; + --spectrum-avatar-size-700: 40px; + --spectrum-alert-banner-minimum-height: 48px; + --spectrum-alert-banner-width: 832px; + --spectrum-alert-banner-top-to-workflow-icon: 15px; + --spectrum-alert-banner-top-to-text: 14px; + --spectrum-alert-banner-bottom-to-text: 17px; + --spectrum-rating-indicator-width: 18px; + --spectrum-rating-indicator-to-icon: 4px; + --spectrum-color-area-width: 192px; + --spectrum-color-area-minimum-width: 64px; + --spectrum-color-area-height: 192px; + --spectrum-color-area-minimum-height: 64px; + --spectrum-color-wheel-width: 192px; + --spectrum-color-wheel-minimum-width: 175px; + --spectrum-color-slider-length: 192px; + --spectrum-color-slider-minimum-length: 80px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-m + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); + --spectrum-coach-mark-width: 296px; + --spectrum-coach-mark-minimum-width: 296px; + --spectrum-coach-mark-maximum-width: 380px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; + --spectrum-coach-mark-media-height: 222px; + --spectrum-coach-mark-media-minimum-height: 166px; + --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); + --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); + --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); + --spectrum-accordion-top-to-text-regular-small: 5px; + --spectrum-accordion-small-top-to-text-spacious: 9px; + --spectrum-accordion-top-to-text-regular-medium: 8px; + --spectrum-accordion-top-to-text-spacious-medium: 12px; + --spectrum-accordion-top-to-text-compact-large: 4px; + --spectrum-accordion-top-to-text-regular-large: 9px; + --spectrum-accordion-top-to-text-spacious-large: 12px; + --spectrum-accordion-top-to-text-compact-extra-large: 5px; + --spectrum-accordion-top-to-text-regular-extra-large: 9px; + --spectrum-accordion-top-to-text-spacious-extra-large: 13px; + --spectrum-accordion-bottom-to-text-compact-small: 2px; + --spectrum-accordion-bottom-to-text-regular-small: 7px; + --spectrum-accordion-bottom-to-text-spacious-small: 11px; + --spectrum-accordion-bottom-to-text-compact-medium: 5px; + --spectrum-accordion-bottom-to-text-regular-medium: 9px; + --spectrum-accordion-bottom-to-text-spacious-medium: 13px; + --spectrum-accordion-bottom-to-text-compact-large: 8px; + --spectrum-accordion-bottom-to-text-regular-large: 11px; + --spectrum-accordion-bottom-to-text-spacious-large: 16px; + --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; + --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; + --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; + --spectrum-accordion-minimum-width: 200px; + --spectrum-accordion-content-area-top-to-content: 8px; + --spectrum-accordion-content-area-bottom-to-content: 16px; + --spectrum-color-handle-size: 16px; + --spectrum-color-handle-size-key-focus: 32px; + --spectrum-table-column-header-row-top-to-text-small: 8px; + --spectrum-table-column-header-row-top-to-text-medium: 7px; + --spectrum-table-column-header-row-top-to-text-large: 10px; + --spectrum-table-column-header-row-top-to-text-extra-large: 13px; + --spectrum-table-column-header-row-bottom-to-text-small: 9px; + --spectrum-table-column-header-row-bottom-to-text-medium: 8px; + --spectrum-table-column-header-row-bottom-to-text-large: 10px; + --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; + --spectrum-table-row-height-small-regular: 32px; + --spectrum-table-row-height-medium-regular: 40px; + --spectrum-table-row-height-large-regular: 48px; + --spectrum-table-row-height-extra-large-regular: 56px; + --spectrum-table-row-height-small-spacious: 40px; + --spectrum-table-row-height-medium-spacious: 48px; + --spectrum-table-row-height-large-spacious: 56px; + --spectrum-table-row-height-extra-large-spacious: 64px; + --spectrum-table-row-top-to-text-small-regular: 8px; + --spectrum-table-row-top-to-text-medium-regular: 11px; + --spectrum-table-row-top-to-text-large-regular: 14px; + --spectrum-table-row-top-to-text-extra-large-regular: 17px; + --spectrum-table-row-bottom-to-text-small-regular: 9px; + --spectrum-table-row-bottom-to-text-medium-regular: 12px; + --spectrum-table-row-bottom-to-text-large-regular: 14px; + --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; + --spectrum-table-row-top-to-text-small-spacious: 12px; + --spectrum-table-row-top-to-text-medium-spacious: 15px; + --spectrum-table-row-top-to-text-large-spacious: 18px; + --spectrum-table-row-top-to-text-extra-large-spacious: 21px; + --spectrum-table-row-bottom-to-text-small-spacious: 13px; + --spectrum-table-row-bottom-to-text-medium-spacious: 16px; + --spectrum-table-row-bottom-to-text-large-spacious: 18px; + --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; + --spectrum-table-checkbox-to-text: 24px; + --spectrum-table-header-row-checkbox-to-top-small: 10px; + --spectrum-table-header-row-checkbox-to-top-medium: 9px; + --spectrum-table-header-row-checkbox-to-top-large: 12px; + --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; + --spectrum-table-row-checkbox-to-top-small-compact: 6px; + --spectrum-table-row-checkbox-to-top-small-regular: 10px; + --spectrum-table-row-checkbox-to-top-small-spacious: 14px; + --spectrum-table-row-checkbox-to-top-medium-compact: 9px; + --spectrum-table-row-checkbox-to-top-medium-regular: 13px; + --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; + --spectrum-table-row-checkbox-to-top-large-compact: 12px; + --spectrum-table-row-checkbox-to-top-large-regular: 16px; + --spectrum-table-row-checkbox-to-top-large-spacious: 20px; + --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; + --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; + --spectrum-table-section-header-row-height-small: 24px; + --spectrum-table-section-header-row-height-medium: 32px; + --spectrum-table-section-header-row-height-large: 40px; + --spectrum-table-section-header-row-height-extra-large: 48px; + --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; + --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; + --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; + --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; + --spectrum-tab-item-to-tab-item-horizontal-small: 21px; + --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; + --spectrum-tab-item-to-tab-item-horizontal-large: 27px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; + --spectrum-tab-item-to-tab-item-vertical-small: 4px; + --spectrum-tab-item-to-tab-item-vertical-medium: 4px; + --spectrum-tab-item-to-tab-item-vertical-large: 5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; + --spectrum-tab-item-start-to-edge-small: 12px; + --spectrum-tab-item-start-to-edge-medium: 12px; + --spectrum-tab-item-start-to-edge-large: 13px; + --spectrum-tab-item-start-to-edge-extra-large: 13px; + --spectrum-tab-item-top-to-text-small: 11px; + --spectrum-tab-item-bottom-to-text-small: 12px; + --spectrum-tab-item-top-to-text-medium: 14px; + --spectrum-tab-item-bottom-to-text-medium: 14px; + --spectrum-tab-item-top-to-text-large: 16px; + --spectrum-tab-item-bottom-to-text-large: 18px; + --spectrum-tab-item-top-to-text-extra-large: 19px; + --spectrum-tab-item-bottom-to-text-extra-large: 20px; + --spectrum-tab-item-top-to-text-compact-small: 4px; + --spectrum-tab-item-bottom-to-text-compact-small: 5px; + --spectrum-tab-item-top-to-text-compact-medium: 6px; + --spectrum-tab-item-bottom-to-text-compact-medium: 8px; + --spectrum-tab-item-top-to-text-compact-large: 10px; + --spectrum-tab-item-bottom-to-text-compact-large: 12px; + --spectrum-tab-item-top-to-text-compact-extra-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-small: 13px; + --spectrum-tab-item-top-to-workflow-icon-medium: 15px; + --spectrum-tab-item-top-to-workflow-icon-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; + --spectrum-tab-item-focus-indicator-gap-small: 7px; + --spectrum-tab-item-focus-indicator-gap-medium: 8px; + --spectrum-tab-item-focus-indicator-gap-large: 9px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; + --spectrum-side-navigation-width: 192px; + --spectrum-side-navigation-minimum-width: 160px; + --spectrum-side-navigation-maximum-width: 240px; + --spectrum-side-navigation-second-level-edge-to-text: 24px; + --spectrum-side-navigation-third-level-edge-to-text: 36px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; + --spectrum-side-navigation-item-to-item: 4px; + --spectrum-side-navigation-item-to-header: 24px; + --spectrum-side-navigation-header-to-item: 8px; + --spectrum-side-navigation-bottom-to-text: 8px; + --spectrum-tray-top-to-content-area: 4px; + --spectrum-accordion-top-to-text-spacious-small: 9px; + --spectrum-text-to-visual-50: 6px; + --spectrum-text-to-visual-75: 7px; + --spectrum-text-to-visual-100: 8px; + --spectrum-text-to-visual-200: 9px; + --spectrum-text-to-visual-300: 10px; + --spectrum-text-to-control-75: 9px; + --spectrum-text-to-control-100: 10px; + --spectrum-text-to-control-200: 11px; + --spectrum-text-to-control-300: 13px; + --spectrum-component-height-50: 20px; + --spectrum-component-height-75: 24px; + --spectrum-component-height-100: 32px; + --spectrum-component-height-200: 40px; + --spectrum-component-height-300: 48px; + --spectrum-component-height-400: 56px; + --spectrum-component-height-500: 64px; + --spectrum-component-pill-edge-to-visual-75: 10px; + --spectrum-component-pill-edge-to-visual-100: 14px; + --spectrum-component-pill-edge-to-visual-200: 18px; + --spectrum-component-pill-edge-to-visual-300: 21px; + --spectrum-component-pill-edge-to-visual-only-75: 4px; + --spectrum-component-pill-edge-to-visual-only-100: 7px; + --spectrum-component-pill-edge-to-visual-only-200: 10px; + --spectrum-component-pill-edge-to-visual-only-300: 13px; + --spectrum-component-pill-edge-to-text-75: 12px; + --spectrum-component-pill-edge-to-text-100: 16px; + --spectrum-component-pill-edge-to-text-200: 20px; + --spectrum-component-pill-edge-to-text-300: 24px; + --spectrum-component-edge-to-visual-50: 6px; + --spectrum-component-edge-to-visual-75: 7px; + --spectrum-component-edge-to-visual-100: 10px; + --spectrum-component-edge-to-visual-200: 13px; + --spectrum-component-edge-to-visual-300: 15px; + --spectrum-component-edge-to-visual-only-50: 3px; + --spectrum-component-edge-to-visual-only-75: 4px; + --spectrum-component-edge-to-visual-only-100: 7px; + --spectrum-component-edge-to-visual-only-200: 10px; + --spectrum-component-edge-to-visual-only-300: 13px; + --spectrum-component-edge-to-text-50: 8px; + --spectrum-component-edge-to-text-75: 9px; + --spectrum-component-edge-to-text-100: 12px; + --spectrum-component-edge-to-text-200: 15px; + --spectrum-component-edge-to-text-300: 18px; + --spectrum-component-top-to-workflow-icon-50: 3px; + --spectrum-component-top-to-workflow-icon-75: 4px; + --spectrum-component-top-to-workflow-icon-100: 7px; + --spectrum-component-top-to-workflow-icon-200: 10px; + --spectrum-component-top-to-workflow-icon-300: 13px; + --spectrum-component-top-to-text-50: 3px; + --spectrum-component-top-to-text-75: 4px; + --spectrum-component-top-to-text-100: 6px; + --spectrum-component-top-to-text-200: 9px; + --spectrum-component-top-to-text-300: 12px; + --spectrum-component-bottom-to-text-50: 3px; + --spectrum-component-bottom-to-text-75: 5px; + --spectrum-component-bottom-to-text-100: 9px; + --spectrum-component-bottom-to-text-200: 11px; + --spectrum-component-bottom-to-text-300: 14px; + --spectrum-component-to-menu-small: 6px; + --spectrum-component-to-menu-medium: 6px; + --spectrum-component-to-menu-large: 7px; + --spectrum-component-to-menu-extra-large: 8px; + --spectrum-field-edge-to-disclosure-icon-75: 7px; + --spectrum-field-edge-to-disclosure-icon-100: 11px; + --spectrum-field-edge-to-disclosure-icon-200: 14px; + --spectrum-field-edge-to-disclosure-icon-300: 17px; + --spectrum-field-end-edge-to-disclosure-icon-75: 7px; + --spectrum-field-end-edge-to-disclosure-icon-100: 11px; + --spectrum-field-end-edge-to-disclosure-icon-200: 14px; + --spectrum-field-end-edge-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-disclosure-icon-75: 7px; + --spectrum-field-top-to-disclosure-icon-100: 11px; + --spectrum-field-top-to-disclosure-icon-200: 14px; + --spectrum-field-top-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-alert-icon-small: 4px; + --spectrum-field-top-to-alert-icon-medium: 7px; + --spectrum-field-top-to-alert-icon-large: 10px; + --spectrum-field-top-to-alert-icon-extra-large: 13px; + --spectrum-field-top-to-validation-icon-small: 7px; + --spectrum-field-top-to-validation-icon-medium: 11px; + --spectrum-field-top-to-validation-icon-large: 14px; + --spectrum-field-top-to-validation-icon-extra-large: 17px; + --spectrum-field-top-to-progress-circle-small: 4px; + --spectrum-field-top-to-progress-circle-medium: 8px; + --spectrum-field-top-to-progress-circle-large: 12px; + --spectrum-field-top-to-progress-circle-extra-large: 16px; + --spectrum-field-edge-to-alert-icon-small: 9px; + --spectrum-field-edge-to-alert-icon-medium: 12px; + --spectrum-field-edge-to-alert-icon-large: 15px; + --spectrum-field-edge-to-alert-icon-extra-large: 18px; + --spectrum-field-edge-to-validation-icon-small: 9px; + --spectrum-field-edge-to-validation-icon-medium: 12px; + --spectrum-field-edge-to-validation-icon-large: 15px; + --spectrum-field-edge-to-validation-icon-extra-large: 18px; + --spectrum-field-text-to-alert-icon-small: 8px; + --spectrum-field-text-to-alert-icon-medium: 12px; + --spectrum-field-text-to-alert-icon-large: 15px; + --spectrum-field-text-to-alert-icon-extra-large: 18px; + --spectrum-field-text-to-validation-icon-small: 8px; + --spectrum-field-text-to-validation-icon-medium: 12px; + --spectrum-field-text-to-validation-icon-large: 15px; + --spectrum-field-text-to-validation-icon-extra-large: 18px; + --spectrum-field-width: 192px; + --spectrum-character-count-to-field-quiet-small: -3px; + --spectrum-character-count-to-field-quiet-medium: -3px; + --spectrum-character-count-to-field-quiet-large: -3px; + --spectrum-character-count-to-field-quiet-extra-large: -4px; + --spectrum-side-label-character-count-to-field: 12px; + --spectrum-side-label-character-count-top-margin-small: 4px; + --spectrum-side-label-character-count-top-margin-medium: 8px; + --spectrum-side-label-character-count-top-margin-large: 11px; + --spectrum-side-label-character-count-top-margin-extra-large: 14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; + --spectrum-navigational-indicator-top-to-back-icon-small: 6px; + --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; + --spectrum-navigational-indicator-top-to-back-icon-large: 12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; + --spectrum-color-control-track-width: 24px; + --spectrum-font-size-50: 11px; + --spectrum-font-size-75: 12px; + --spectrum-font-size-100: 14px; + --spectrum-font-size-200: 16px; + --spectrum-font-size-300: 18px; + --spectrum-font-size-400: 20px; + --spectrum-font-size-500: 22px; + --spectrum-font-size-600: 25px; + --spectrum-font-size-700: 28px; + --spectrum-font-size-800: 32px; + --spectrum-font-size-900: 36px; + --spectrum-font-size-1000: 40px; + --spectrum-font-size-1100: 45px; + --spectrum-font-size-1200: 50px; + --spectrum-font-size-1300: 60px; } diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index b2b6c63ca3..c3ecd440f7 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -1,111 +1,109 @@ :host, :root { - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; + --spectrum-slider-tick-mark-height: 13px; + --spectrum-slider-ramp-track-height: 20px; + + --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + --spectrum-colorwheel-colorarea-container-size: 182px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; + + --spectrum-menu-item-checkmark-height-small: 12px; + --spectrum-menu-item-checkmark-height-medium: 14px; + --spectrum-menu-item-checkmark-height-large: 16px; + --spectrum-menu-item-checkmark-height-extra-large: 16px; + + --spectrum-menu-item-checkmark-width-small: 12px; + --spectrum-menu-item-checkmark-width-medium: 14px; + --spectrum-menu-item-checkmark-width-large: 16px; + --spectrum-menu-item-checkmark-width-extra-large: 16px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small: 6px; + --spectrum-button-bottom-to-text-small: 5px; + --spectrum-button-top-to-text-medium: 9px; + --spectrum-button-bottom-to-text-medium: 10px; + --spectrum-button-top-to-text-large: 12px; + --spectrum-button-bottom-to-text-large: 13px; + --spectrum-button-top-to-text-extra-large: 16px; + --spectrum-button-bottom-to-text-extra-large: 17px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap: 8px; + --spectrum-coach-indicator-ring-diameter: 20px; + --spectrum-coach-indicator-quiet-ring-diameter: 10px; + + --spectrum-coachmark-buttongroup-display: none; + --spectrum-coachmark-buttongroup-mobile-display: flex; + --spectrum-coachmark-menu-display: none; + --spectrum-coachmark-menu-mobile-display: inline-flex; + + --spectrum-well-padding: 20px; + --spectrum-well-margin-top: 5px; + --spectrum-well-min-width: 300px; + --spectrum-well-border-radius: 5px; + --spectrum-workflow-icon-size-xxl: 40px; + --spectrum-workflow-icon-size-xxs: 15px; + + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; + + --spectrum-dialog-confirm-entry-animation-distance: 25px; + --spectrum-dialog-confirm-hero-height: 160px; + --spectrum-dialog-confirm-border-radius: 5px; + --spectrum-dialog-confirm-title-text-size: 19px; + --spectrum-dialog-confirm-description-text-size: 15px; + --spectrum-dialog-confirm-padding-grid: 24px; + + --spectrum-datepicker-initial-width: 160px; + --spectrum-datepicker-generic-padding: 15px; + --spectrum-datepicker-dash-line-height: 30px; + --spectrum-datepicker-width-quiet-first: 90px; + --spectrum-datepicker-width-quiet-second: 20px; + --spectrum-datepicker-datetime-width-first: 45px; + --spectrum-datepicker-invalid-icon-to-button: 10px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; + --spectrum-datepicker-input-datetime-width: 30px; + + --spectrum-pagination-textfield-width: 60px; + --spectrum-pagination-item-inline-spacing: 6px; + + --spectrum-dial-border-radius: 20px; + --spectrum-dial-handle-position: 10px; + --spectrum-dial-handle-block-margin: 20px; + --spectrum-dial-handle-inline-margin: 20px; + --spectrum-dial-controls-margin: 10px; + --spectrum-dial-label-gap-y: 6px; + --spectrum-dial-label-container-top-to-text: 5px; + + --spectrum-assetcard-focus-ring-border-radius: 9px; + --spectrum-assetcard-selectionindicator-margin: 15px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xxs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance: 5px; + + --spectrum-ui-icon-medium-display: none; + --spectrum-ui-icon-large-display: block; } diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 4da4c86aef..0025999478 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -1,112 +1,108 @@ :host, :root { - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; + --spectrum-slider-tick-mark-height: 10px; + --spectrum-slider-ramp-track-height: 16px; + + --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size: 144px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; + + --spectrum-menu-item-checkmark-height-small: 10px; + --spectrum-menu-item-checkmark-height-medium: 10px; + --spectrum-menu-item-checkmark-height-large: 12px; + --spectrum-menu-item-checkmark-height-extra-large: 14px; + + --spectrum-menu-item-checkmark-width-small: 10px; + --spectrum-menu-item-checkmark-width-medium: 10px; + --spectrum-menu-item-checkmark-width-large: 12px; + --spectrum-menu-item-checkmark-width-extra-large: 14px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small: 5px; + --spectrum-button-bottom-to-text-small: 4px; + --spectrum-button-top-to-text-medium: 7px; + --spectrum-button-bottom-to-text-medium: 8px; + --spectrum-button-top-to-text-large: 10px; + --spectrum-button-bottom-to-text-large: 10px; + --spectrum-button-top-to-text-extra-large: 13px; + --spectrum-button-bottom-to-text-extra-large: 13px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap: 6px; + --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display: flex; + --spectrum-coachmark-buttongroup-mobile-display: none; + --spectrum-coachmark-menu-display: inline-flex; + --spectrum-coachmark-menu-mobile-display: none; + --spectrum-well-padding: var(--spectrum-spacing-300); + --spectrum-well-margin-top: var(--spectrum-spacing-75); + --spectrum-well-min-width: 240px; + --spectrum-well-border-radius: var(--spectrum-spacing-75); + --spectrum-workflow-icon-size-xxl: 32px; + --spectrum-workflow-icon-size-xxs: 12px; + + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start: 5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; + + --spectrum-dialog-confirm-entry-animation-distance: 20px; + --spectrum-dialog-confirm-hero-height: 128px; + --spectrum-dialog-confirm-border-radius: 4px; + --spectrum-dialog-confirm-title-text-size: 18px; + --spectrum-dialog-confirm-description-text-size: 14px; + --spectrum-dialog-confirm-padding-grid: 40px; + + --spectrum-datepicker-initial-width: 128px; + --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height: 24px; + --spectrum-datepicker-width-quiet-first: 72px; + --spectrum-datepicker-width-quiet-second: 16px; + --spectrum-datepicker-datetime-width-first: 36px; + --spectrum-datepicker-invalid-icon-to-button: 8px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; + --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing: 5px; + + --spectrum-dial-border-radius: 16px; + --spectrum-dial-handle-position: 8px; + --spectrum-dial-handle-block-margin: 16px; + --spectrum-dial-handle-inline-margin: 16px; + --spectrum-dial-controls-margin: 8px; + --spectrum-dial-label-gap-y: 5px; + --spectrum-dial-label-container-top-to-text: 4px; + + --spectrum-assetcard-focus-ring-border-radius: 8px; + --spectrum-assetcard-selectionindicator-margin: 12px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display: block; + --spectrum-ui-icon-large-display: none; } diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 228b94e430..a3c040debb 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -1,47 +1,47 @@ :host, :root { - --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --system: spectrum; + --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0: 0ms; + --spectrum-animation-duration-100: 130ms; + --spectrum-animation-duration-200: 160ms; + --spectrum-animation-duration-300: 190ms; + --spectrum-animation-duration-400: 220ms; + --spectrum-animation-duration-500: 250ms; + --spectrum-animation-duration-600: 300ms; + --spectrum-animation-duration-700: 350ms; + --spectrum-animation-duration-800: 400ms; + --spectrum-animation-duration-900: 450ms; + --spectrum-animation-duration-1000: 500ms; + --spectrum-animation-duration-2000: 1000ms; + --spectrum-animation-duration-4000: 2000ms; + --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); + --spectrum-sans-font-family-stack: adobe-clean, + var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", + "Lucida Grande", sans-serif; + --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); + --spectrum-serif-font-family-stack: adobe-clean-serif, + var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; + --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, + var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font: var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; + --spectrum-docs-static-white-background-color: rgba( + var(--spectrum-docs-static-white-background-color-rgb) + ); + --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; + --spectrum-docs-static-black-background-color: rgba( + var(--spectrum-docs-static-black-background-color-rgb) + ); } diff --git a/tools/styles/tokens/spectrum/dark-vars.css b/tools/styles/tokens/spectrum/dark-vars.css index e7f6691893..c6c4732f89 100644 --- a/tools/styles/tokens/spectrum/dark-vars.css +++ b/tools/styles/tokens/spectrum/dark-vars.css @@ -1,102 +1,98 @@ :host, :root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); + --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; + --spectrum-menu-item-background-color-default-opacity: 0; + --spectrum-menu-item-background-color-default: rgba( + var(--spectrum-menu-item-background-color-default-rgb), + var(--spectrum-menu-item-background-color-default-opacity) + ); + --spectrum-menu-item-background-color-hover: var( + --spectrum-transparent-white-200 + ); + --spectrum-menu-item-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-menu-item-background-color-key-focus: var( + --spectrum-transparent-white-200 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.07 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); } diff --git a/tools/styles/tokens/spectrum/darkest-vars.css b/tools/styles/tokens/spectrum/darkest-vars.css index 22469fd947..7025d87572 100644 --- a/tools/styles/tokens/spectrum/darkest-vars.css +++ b/tools/styles/tokens/spectrum/darkest-vars.css @@ -1,103 +1,99 @@ :host, :root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-700); + --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; + --spectrum-menu-item-background-color-default-opacity: 0; + --spectrum-menu-item-background-color-default: rgba( + var(--spectrum-menu-item-background-color-default-rgb), + var(--spectrum-menu-item-background-color-default-opacity) + ); + --spectrum-menu-item-background-color-hover: var( + --spectrum-transparent-white-200 + ); + --spectrum-menu-item-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-menu-item-background-color-key-focus: var( + --spectrum-transparent-white-200 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.08 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-calendar-day-background-color-down: rgba( + var(--spectrum-white-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.08 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.08 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); } diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index 0f2af34c27..d8a3acd65d 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -1,7344 +1,7019 @@ :host, :root { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-800 - ); - --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-800 - ); - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; - --spectrum-in-field-button-edge-to-fill: 0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --spectrum-corner-radius-75: 2px; - --spectrum-drop-shadow-x: 0px; - --spectrum-border-width-100: 1px; - --spectrum-accent-color-100: var(--spectrum-blue-100); - --spectrum-accent-color-200: var(--spectrum-blue-200); - --spectrum-accent-color-300: var(--spectrum-blue-300); - --spectrum-accent-color-400: var(--spectrum-blue-400); - --spectrum-accent-color-500: var(--spectrum-blue-500); - --spectrum-accent-color-600: var(--spectrum-blue-600); - --spectrum-accent-color-700: var(--spectrum-blue-700); - --spectrum-accent-color-800: var(--spectrum-blue-800); - --spectrum-accent-color-900: var(--spectrum-blue-900); - --spectrum-accent-color-1000: var(--spectrum-blue-1000); - --spectrum-accent-color-1100: var(--spectrum-blue-1100); - --spectrum-accent-color-1200: var(--spectrum-blue-1200); - --spectrum-accent-color-1300: var(--spectrum-blue-1300); - --spectrum-accent-color-1400: var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); - --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --system: spectrum; - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-neutral-background-color-selected-default: var( + --spectrum-gray-700 + ); + --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus: var( + --spectrum-gray-800 + ); + --spectrum-slider-track-thickness: 2px; + --spectrum-slider-handle-gap: 4px; + --spectrum-picker-border-width: var(--spectrum-border-width-100); + --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; + --spectrum-in-field-button-edge-to-fill: 0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --spectrum-corner-radius-75: 2px; + --spectrum-drop-shadow-x: 0px; + --spectrum-border-width-100: 1px; + --spectrum-accent-color-100: var(--spectrum-blue-100); + --spectrum-accent-color-200: var(--spectrum-blue-200); + --spectrum-accent-color-300: var(--spectrum-blue-300); + --spectrum-accent-color-400: var(--spectrum-blue-400); + --spectrum-accent-color-500: var(--spectrum-blue-500); + --spectrum-accent-color-600: var(--spectrum-blue-600); + --spectrum-accent-color-700: var(--spectrum-blue-700); + --spectrum-accent-color-800: var(--spectrum-blue-800); + --spectrum-accent-color-900: var(--spectrum-blue-900); + --spectrum-accent-color-1000: var(--spectrum-blue-1000); + --spectrum-accent-color-1100: var(--spectrum-blue-1100); + --spectrum-accent-color-1200: var(--spectrum-blue-1200); + --spectrum-accent-color-1300: var(--spectrum-blue-1300); + --spectrum-accent-color-1400: var(--spectrum-blue-1400); + --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-heading-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --system: spectrum; + --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0: 0ms; + --spectrum-animation-duration-100: 130ms; + --spectrum-animation-duration-200: 160ms; + --spectrum-animation-duration-300: 190ms; + --spectrum-animation-duration-400: 220ms; + --spectrum-animation-duration-500: 250ms; + --spectrum-animation-duration-600: 300ms; + --spectrum-animation-duration-700: 350ms; + --spectrum-animation-duration-800: 400ms; + --spectrum-animation-duration-900: 450ms; + --spectrum-animation-duration-1000: 500ms; + --spectrum-animation-duration-2000: 1000ms; + --spectrum-animation-duration-4000: 2000ms; + --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); + --spectrum-sans-font-family-stack: adobe-clean, + var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", + "Lucida Grande", sans-serif; + --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); + --spectrum-serif-font-family-stack: adobe-clean-serif, + var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; + --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); - --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, + var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font: var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; + --spectrum-docs-static-white-background-color: rgba( + var(--spectrum-docs-static-white-background-color-rgb) + ); + --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; + --spectrum-docs-static-black-background-color: rgba( + var(--spectrum-docs-static-black-background-color-rgb) + ); } :host, :root { - --system-accordion-item-width: var(--spectrum-accordion-minimum-width); - --system-accordion-disclosure-indicator-to-text-space: var( - --spectrum-accordion-disclosure-indicator-to-text - ); - --system-accordion-edge-to-disclosure-indicator-space: var( - --spectrum-accordion-edge-to-disclosure-indicator - ); - --system-accordion-edge-to-text-space: var( - --spectrum-accordion-edge-to-text - ); - --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-accordion-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-accordion-corner-radius: var(--spectrum-corner-radius-100); - --system-accordion-item-content-area-top-to-content: var( - --spectrum-accordion-content-area-top-to-content - ); - --system-accordion-item-content-area-bottom-to-content: var( - --spectrum-accordion-content-area-bottom-to-content - ); - --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --system-accordion-item-header-font-weight: var( - --spectrum-bold-font-weight - ); - --system-accordion-item-header-font-style: var( - --spectrum-default-font-style - ); - --system-accordion-item-header-line-height: 1.25; - --system-accordion-item-content-font: var( - --spectrum-sans-font-family-stack - ); - --system-accordion-item-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-accordion-item-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-accordion-item-content-line-height: var( - --spectrum-line-height-100 - ); - --system-accordion-background-color-default: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-default) - ); - --system-accordion-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-hover) - ); - --system-accordion-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-down) - ); - --system-accordion-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-background-opacity-key-focus) - ); - --system-accordion-item-header-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-accordion-item-header-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-accordion-item-header-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-accordion-item-header-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-accordion-item-header-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-accordion-item-content-color: var(--spectrum-body-color); - --system-accordion-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-accordion-divider-color: var(--spectrum-gray-300); - --system-accordion-item-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-content-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-accordion-item-height: var(--spectrum-component-height-200); - --system-accordion-size-m-item-height: var(--spectrum-component-height-200); - --system-accordion-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-size-m-disclosure-indicator-height: var( - --spectrum-component-height-100 - ); - --system-accordion-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-size-m-component-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-accordion-item-header-font-size: var(--spectrum-font-size-300); - --system-accordion-size-m-item-header-font-size: var( - --spectrum-font-size-300 - ); - --system-accordion-item-content-font-size: var(--spectrum-body-size-s); - --system-accordion-size-m-item-content-font-size: var( - --spectrum-body-size-s - ); - --system-accordion-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-medium - ); - --system-accordion-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-medium - ); - --system-accordion-size-s-item-height: var(--spectrum-component-height-100); - --system-accordion-size-s-disclosure-indicator-height: var( - --spectrum-component-height-75 - ); - --system-accordion-size-s-component-edge-to-text: var( - --spectrum-component-edge-to-text-50 - ); - --system-accordion-size-s-item-header-font-size: var( - --spectrum-font-size-200 - ); - --system-accordion-size-s-item-content-font-size: var( - --spectrum-body-size-xs - ); - --system-accordion-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-small - ); - --system-accordion-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-small - ); - --system-accordion-size-l-item-height: var(--spectrum-component-height-300); - --system-accordion-size-l-disclosure-indicator-height: var( - --spectrum-component-height-200 - ); - --system-accordion-size-l-component-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-accordion-size-l-item-header-font-size: var( - --spectrum-font-size-500 - ); - --system-accordion-size-l-item-content-font-size: var( - --spectrum-body-size-m - ); - --system-accordion-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-large - ); - --system-accordion-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-large - ); - --system-accordion-size-xl-item-height: var( - --spectrum-component-height-400 - ); - --system-accordion-size-xl-disclosure-indicator-height: var( - --spectrum-component-height-300 - ); - --system-accordion-size-xl-component-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-accordion-size-xl-item-header-font-size: var( - --spectrum-font-size-700 - ); - --system-accordion-size-xl-item-content-font-size: var( - --spectrum-body-size-l - ); - --system-accordion-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-regular-extra-large - ); - --system-accordion-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-regular-extra-large - ); - --system-accordion-compact-size-s-item-height: var( - --spectrum-component-height-75 - ); - --system-accordion-compact-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-small - ); - --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-small - ); - --system-accordion-compact-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-size-m-item-height: var( - --spectrum-component-height-100 - ); - --system-accordion-compact-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-medium - ); - --system-accordion-compact-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-medium - ); - --system-accordion-compact-size-l-item-height: var( - --spectrum-component-height-200 - ); - --system-accordion-compact-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-large - ); - --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-large - ); - --system-accordion-compact-size-xl-item-height: var( - --spectrum-component-height-300 - ); - --system-accordion-compact-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-compact-extra-large - ); - --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-compact-extra-large - ); - --system-accordion-spacious-size-s-item-header-line-height: 1.25; - --system-accordion-spacious-size-s-item-header-top-to-text-space: var( - --spectrum-accordion-small-top-to-text-spacious - ); - --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-small - ); - --system-accordion-spacious-item-header-line-height: 1.278; - --system-accordion-spacious-size-m-item-header-line-height: 1.278; - --system-accordion-spacious-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-medium - ); - --system-accordion-spacious-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-medium - ); - --system-accordion-spacious-size-l-item-header-line-height: 1.273; - --system-accordion-spacious-size-l-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-large - ); - --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-large - ); - --system-accordion-spacious-size-xl-item-header-line-height: 1.25; - --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( - --spectrum-accordion-top-to-text-spacious-extra-large - ); - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( - --spectrum-accordion-bottom-to-text-spacious-extra-large - ); + --system-accordion-item-width: var(--spectrum-accordion-minimum-width); + --system-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text + ); + --system-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator + ); + --system-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); + --system-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-accordion-corner-radius: var(--spectrum-corner-radius-100); + --system-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content + ); + --system-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --system-accordion-item-header-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); + --system-accordion-item-header-font-style: var(--spectrum-default-font-style); + --system-accordion-item-header-line-height: 1.25; + --system-accordion-item-content-font: var(--spectrum-sans-font-family-stack); + --system-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-accordion-item-content-line-height: var(--spectrum-line-height-100); + --system-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --system-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --system-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --system-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) + ); + --system-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-accordion-item-header-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-accordion-item-content-color: var(--spectrum-body-color); + --system-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-accordion-divider-color: var(--spectrum-gray-300); + --system-accordion-item-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-item-content-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-accordion-item-height: var(--spectrum-component-height-200); + --system-accordion-size-m-item-height: var(--spectrum-component-height-200); + --system-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-size-m-disclosure-indicator-height: var( + --spectrum-component-height-100 + ); + --system-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-size-m-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-accordion-item-header-font-size: var(--spectrum-font-size-300); + --system-accordion-size-m-item-header-font-size: var( + --spectrum-font-size-300 + ); + --system-accordion-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-size-m-item-content-font-size: var(--spectrum-body-size-s); + --system-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --system-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --system-accordion-size-s-item-height: var(--spectrum-component-height-100); + --system-accordion-size-s-disclosure-indicator-height: var( + --spectrum-component-height-75 + ); + --system-accordion-size-s-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); + --system-accordion-size-s-item-header-font-size: var( + --spectrum-font-size-200 + ); + --system-accordion-size-s-item-content-font-size: var( + --spectrum-body-size-xs + ); + --system-accordion-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small + ); + --system-accordion-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small + ); + --system-accordion-size-l-item-height: var(--spectrum-component-height-300); + --system-accordion-size-l-disclosure-indicator-height: var( + --spectrum-component-height-200 + ); + --system-accordion-size-l-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-accordion-size-l-item-header-font-size: var( + --spectrum-font-size-500 + ); + --system-accordion-size-l-item-content-font-size: var(--spectrum-body-size-m); + --system-accordion-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large + ); + --system-accordion-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large + ); + --system-accordion-size-xl-item-height: var(--spectrum-component-height-400); + --system-accordion-size-xl-disclosure-indicator-height: var( + --spectrum-component-height-300 + ); + --system-accordion-size-xl-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-accordion-size-xl-item-header-font-size: var( + --spectrum-font-size-700 + ); + --system-accordion-size-xl-item-content-font-size: var( + --spectrum-body-size-l + ); + --system-accordion-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large + ); + --system-accordion-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large + ); + --system-accordion-compact-size-s-item-height: var( + --spectrum-component-height-75 + ); + --system-accordion-compact-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small + ); + --system-accordion-compact-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small + ); + --system-accordion-compact-item-height: var(--spectrum-component-height-100); + --system-accordion-compact-size-m-item-height: var( + --spectrum-component-height-100 + ); + --system-accordion-compact-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --system-accordion-compact-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); + --system-accordion-compact-size-l-item-height: var( + --spectrum-component-height-200 + ); + --system-accordion-compact-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large + ); + --system-accordion-compact-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large + ); + --system-accordion-compact-size-xl-item-height: var( + --spectrum-component-height-300 + ); + --system-accordion-compact-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large + ); + --system-accordion-compact-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large + ); + --system-accordion-spacious-size-s-item-header-line-height: 1.25; + --system-accordion-spacious-size-s-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious + ); + --system-accordion-spacious-size-s-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); + --system-accordion-spacious-item-header-line-height: 1.278; + --system-accordion-spacious-size-m-item-header-line-height: 1.278; + --system-accordion-spacious-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --system-accordion-spacious-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-m-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); + --system-accordion-spacious-size-l-item-header-line-height: 1.273; + --system-accordion-spacious-size-l-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --system-accordion-spacious-size-l-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); + --system-accordion-spacious-size-xl-item-header-line-height: 1.25; + --system-accordion-spacious-size-xl-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --system-accordion-spacious-size-xl-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large + ); } :host, :root { - --system-action-bar-height: var(--spectrum-action-bar-height); - --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); - --system-action-bar-item-counter-line-height: var( - --spectrum-line-height-100 - ); - --system-action-bar-item-counter-color: var( - --spectrum-neutral-content-color-default - ); - --system-action-bar-item-counter-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-action-bar-popover-background-color: var(--spectrum-gray-50); - --system-action-bar-popover-border-color: var(--spectrum-gray-400); - --system-action-bar-emphasized-background-color: var( - --spectrum-informative-background-color-default - ); - --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); - --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); - --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); - --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); - --system-action-bar-spacing-item-counter-top: var( - --spectrum-action-bar-top-to-item-counter - ); - --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); - --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); - --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); - --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); + --system-action-bar-height: var(--spectrum-action-bar-height); + --system-action-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-action-bar-item-counter-font-size: var(--spectrum-font-size-100); + --system-action-bar-item-counter-line-height: var(--spectrum-line-height-100); + --system-action-bar-item-counter-color: var( + --spectrum-neutral-content-color-default + ); + --system-action-bar-item-counter-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-action-bar-popover-background-color: var(--spectrum-gray-50); + --system-action-bar-popover-border-color: var(--spectrum-gray-400); + --system-action-bar-emphasized-background-color: var( + --spectrum-informative-background-color-default + ); + --system-action-bar-emphasized-item-counter-color: var(--spectrum-white); + --system-action-bar-spacing-outer-edge: var(--spectrum-spacing-300); + --system-action-bar-spacing-close-button-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-start: var(--spectrum-spacing-100); + --system-action-bar-spacing-close-button-end: var(--spectrum-spacing-75); + --system-action-bar-spacing-item-counter-top: var( + --spectrum-action-bar-top-to-item-counter + ); + --system-action-bar-spacing-item-counter-end: var(--spectrum-spacing-400); + --system-action-bar-spacing-action-group-top: var(--spectrum-spacing-100); + --system-action-bar-spacing-action-group-end: var(--spectrum-spacing-100); + --system-action-bar-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color); } :host, :root { - --system-action-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-action-button-border-radius: var(--spectrum-corner-radius-100); - --system-action-button-border-width: var(--spectrum-border-width-100); - --system-action-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-action-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-action-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-action-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-action-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-action-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-action-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-action-button-background-color-default: var(--spectrum-gray-75); - --system-action-button-background-color-hover: var(--spectrum-gray-200); - --system-action-button-background-color-down: var(--spectrum-gray-300); - --system-action-button-background-color-focus: var(--spectrum-gray-200); - --system-action-button-border-color-default: var(--spectrum-gray-400); - --system-action-button-border-color-hover: var(--spectrum-gray-500); - --system-action-button-border-color-down: var(--spectrum-gray-600); - --system-action-button-border-color-focus: var(--spectrum-gray-500); - --system-action-button-background-color-disabled: transparent; - --system-action-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-action-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-action-button-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-height: var(--spectrum-component-height-100); - --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); - --system-action-button-font-size: var(--spectrum-font-size-100); - --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); - --system-action-button-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-quiet-background-color-default: transparent; - --system-action-button-quiet-background-color-hover: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-down: var( - --spectrum-gray-300 - ); - --system-action-button-quiet-background-color-focus: var( - --spectrum-gray-200 - ); - --system-action-button-quiet-background-color-disabled: transparent; - --system-action-button-quiet-border-color-default: transparent; - --system-action-button-quiet-border-color-hover: transparent; - --system-action-button-quiet-border-color-down: transparent; - --system-action-button-quiet-border-color-focus: transparent; - --system-action-button-quiet-border-color-disabled: transparent; - --system-action-button-selected-background-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-action-button-selected-background-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-action-button-selected-background-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-action-button-selected-background-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-action-button-selected-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-hover: var( - --spectrum-gray-50 - ); - --system-action-button-selected-content-color-down: var(--spectrum-gray-50); - --system-action-button-selected-content-color-focus: var( - --spectrum-gray-50 - ); - --system-action-button-selected-border-color-default: transparent; - --system-action-button-selected-border-color-hover: transparent; - --system-action-button-selected-border-color-down: transparent; - --system-action-button-selected-border-color-focus: transparent; - --system-action-button-selected-border-color-disabled: transparent; - --system-action-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-action-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-action-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-action-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-action-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-action-button-selected-emphasized-content-color-default: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-hover: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-down: var( - --spectrum-white - ); - --system-action-button-selected-emphasized-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-quiet-border-color-default: transparent; - --system-action-button-static-white-quiet-border-color-default: transparent; - --system-action-button-static-black-quiet-border-color-hover: transparent; - --system-action-button-static-white-quiet-border-color-hover: transparent; - --system-action-button-static-black-quiet-border-color-down: transparent; - --system-action-button-static-white-quiet-border-color-down: transparent; - --system-action-button-static-black-quiet-border-color-focus: transparent; - --system-action-button-static-white-quiet-border-color-focus: transparent; - --system-action-button-static-black-quiet-border-color-disabled: transparent; - --system-action-button-static-white-quiet-border-color-disabled: transparent; - --system-action-button-static-black-background-color-default: transparent; - --system-action-button-static-black-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-action-button-static-black-background-color-disabled: transparent; - --system-action-button-static-black-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-action-button-static-black-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-action-button-static-black-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-action-button-static-black-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-action-button-static-black-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-action-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-action-button-static-black-selected-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-action-button-static-black-selected-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-background-color-disabled: var( - --spectrum-transparent-black-200 - ); - --system-action-button-static-black-selected-border-color-disabled: transparent; - --system-action-button-static-black-selected-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-black-selected-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-black-selected-emphasized-background-color-default: var( - --spectrum-transparent-black-900 - ); - --system-action-button-static-black-selected-emphasized-background-color-hover: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-down: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-background-color-focus: var( - --spectrum-transparent-black-1000 - ); - --system-action-button-static-black-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-static-black-selected-emphasized-content-color-hover: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-down: var( - --spectrum-gray-900 - ); - --system-action-button-static-black-selected-emphasized-content-color-focus: var( - --spectrum-gray-900 - ); - --system-action-button-static-white-background-color-default: transparent; - --system-action-button-static-white-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-action-button-static-white-background-color-disabled: transparent; - --system-action-button-static-white-border-color-default: var( - --spectrum-transparent-white-400 - ); - --system-action-button-static-white-border-color-hover: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-border-color-down: var( - --spectrum-transparent-white-600 - ); - --system-action-button-static-white-border-color-focus: var( - --spectrum-transparent-white-500 - ); - --system-action-button-static-white-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-action-button-static-white-content-color-default: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-hover: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-down: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-focus: var( - --spectrum-white - ); - --system-action-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-action-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-action-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-action-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-background-color-disabled: var( - --spectrum-transparent-white-200 - ); - --system-action-button-static-white-selected-border-color-disabled: transparent; - --system-action-button-static-white-selected-content-color-default: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-hover: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-down: var( - --spectrum-black - ); - --system-action-button-static-white-selected-content-color-focus: var( - --spectrum-black - ); - --system-action-button-static-white-selected-emphasized-background-color-default: var( - --spectrum-transparent-white-900 - ); - --system-action-button-static-white-selected-emphasized-background-color-hover: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-down: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-background-color-focus: var( - --spectrum-transparent-white-1000 - ); - --system-action-button-static-white-selected-emphasized-content-color-default: var( - --spectrum-gray-50 - ); - --system-action-button-size-m-min-width: calc( - var(--spectrum-component-edge-to-visual-only-100) * 2 + - var(--spectrum-workflow-icon-size-100) - ); - --system-action-button-size-m-height: var(--spectrum-component-height-100); - --system-action-button-size-m-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-action-button-size-m-font-size: var(--spectrum-font-size-100); - --system-action-button-size-m-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-action-button-size-m-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-medium - ); - --system-action-button-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-size-m-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-100 - ); - --system-action-button-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-size-m-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-action-button-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-m-edge-to-text-size: var( - --spectrum-component-edge-to-text-100 - ); - --system-action-button-size-xs-min-width: calc( - var(--spectrum-component-edge-to-visual-only-50) * 2 + - var(--spectrum-workflow-icon-size-50) - ); - --system-action-button-size-xs-height: var(--spectrum-component-height-50); - --system-action-button-size-xs-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); - --system-action-button-size-xs-text-to-visual: var( - --spectrum-text-to-visual-50 - ); - --system-action-button-size-xs-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-small - ); - --system-action-button-size-xs-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-50 - ); - --system-action-button-size-xs-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-50 - ); - --system-action-button-size-xs-edge-to-text-size: var( - --spectrum-component-edge-to-text-50 - ); - --system-action-button-size-s-min-width: calc( - var(--spectrum-component-edge-to-visual-only-75) * 2 + - var(--spectrum-workflow-icon-size-75) - ); - --system-action-button-size-s-height: var(--spectrum-component-height-75); - --system-action-button-size-s-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-action-button-size-s-font-size: var(--spectrum-font-size-75); - --system-action-button-size-s-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-action-button-size-s-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-small - ); - --system-action-button-size-s-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-75 - ); - --system-action-button-size-s-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-action-button-size-s-edge-to-text-size: var( - --spectrum-component-edge-to-text-75 - ); - --system-action-button-size-l-min-width: calc( - var(--spectrum-component-edge-to-visual-only-200) * 2 + - var(--spectrum-workflow-icon-size-200) - ); - --system-action-button-size-l-height: var(--spectrum-component-height-200); - --system-action-button-size-l-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-action-button-size-l-font-size: var(--spectrum-font-size-200); - --system-action-button-size-l-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-action-button-size-l-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-large - ); - --system-action-button-size-l-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-200 - ); - --system-action-button-size-l-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-action-button-size-l-edge-to-text-size: var( - --spectrum-component-edge-to-text-200 - ); - --system-action-button-size-xl-min-width: calc( - var(--spectrum-component-edge-to-visual-only-300) * 2 + - var(--spectrum-workflow-icon-size-300) - ); - --system-action-button-size-xl-height: var(--spectrum-component-height-300); - --system-action-button-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-action-button-size-xl-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-action-button-size-xl-edge-to-hold-icon: var( - --spectrum-action-button-edge-to-hold-icon-extra-large - ); - --system-action-button-size-xl-edge-to-visual-size: var( - --spectrum-component-edge-to-visual-300 - ); - --system-action-button-size-xl-edge-to-visual-only-size: var( - --spectrum-component-edge-to-visual-only-300 - ); - --system-action-button-size-xl-edge-to-text-size: var( - --spectrum-component-edge-to-text-300 - ); + --system-action-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-action-button-border-radius: var(--spectrum-corner-radius-100); + --system-action-button-border-width: var(--spectrum-border-width-100); + --system-action-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-action-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-action-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-action-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-action-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-action-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-action-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-action-button-background-color-default: var(--spectrum-gray-75); + --system-action-button-background-color-hover: var(--spectrum-gray-200); + --system-action-button-background-color-down: var(--spectrum-gray-300); + --system-action-button-background-color-focus: var(--spectrum-gray-200); + --system-action-button-border-color-default: var(--spectrum-gray-400); + --system-action-button-border-color-hover: var(--spectrum-gray-500); + --system-action-button-border-color-down: var(--spectrum-gray-600); + --system-action-button-border-color-focus: var(--spectrum-gray-500); + --system-action-button-background-color-disabled: transparent; + --system-action-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-action-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-action-button-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-height: var(--spectrum-component-height-100); + --system-action-button-icon-size: var(--spectrum-workflow-icon-size-100); + --system-action-button-font-size: var(--spectrum-font-size-100); + --system-action-button-text-to-visual: var(--spectrum-text-to-visual-100); + --system-action-button-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-quiet-background-color-default: transparent; + --system-action-button-quiet-background-color-hover: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-down: var(--spectrum-gray-300); + --system-action-button-quiet-background-color-focus: var(--spectrum-gray-200); + --system-action-button-quiet-background-color-disabled: transparent; + --system-action-button-quiet-border-color-default: transparent; + --system-action-button-quiet-border-color-hover: transparent; + --system-action-button-quiet-border-color-down: transparent; + --system-action-button-quiet-border-color-focus: transparent; + --system-action-button-quiet-border-color-disabled: transparent; + --system-action-button-selected-background-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-action-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-action-button-selected-background-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-action-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-action-button-selected-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-selected-content-color-hover: var(--spectrum-gray-50); + --system-action-button-selected-content-color-down: var(--spectrum-gray-50); + --system-action-button-selected-content-color-focus: var(--spectrum-gray-50); + --system-action-button-selected-border-color-default: transparent; + --system-action-button-selected-border-color-hover: transparent; + --system-action-button-selected-border-color-down: transparent; + --system-action-button-selected-border-color-focus: transparent; + --system-action-button-selected-border-color-disabled: transparent; + --system-action-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-action-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-action-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-action-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-action-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-action-button-selected-emphasized-content-color-default: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-hover: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-down: var( + --spectrum-white + ); + --system-action-button-selected-emphasized-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-quiet-border-color-default: transparent; + --system-action-button-static-white-quiet-border-color-default: transparent; + --system-action-button-static-black-quiet-border-color-hover: transparent; + --system-action-button-static-white-quiet-border-color-hover: transparent; + --system-action-button-static-black-quiet-border-color-down: transparent; + --system-action-button-static-white-quiet-border-color-down: transparent; + --system-action-button-static-black-quiet-border-color-focus: transparent; + --system-action-button-static-white-quiet-border-color-focus: transparent; + --system-action-button-static-black-quiet-border-color-disabled: transparent; + --system-action-button-static-white-quiet-border-color-disabled: transparent; + --system-action-button-static-black-background-color-default: transparent; + --system-action-button-static-black-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-action-button-static-black-background-color-disabled: transparent; + --system-action-button-static-black-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-action-button-static-black-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-action-button-static-black-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-action-button-static-black-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-action-button-static-black-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-action-button-static-black-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-down: var(--spectrum-black); + --system-action-button-static-black-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-action-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-action-button-static-black-selected-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-action-button-static-black-selected-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-background-color-disabled: var( + --spectrum-transparent-black-200 + ); + --system-action-button-static-black-selected-border-color-disabled: transparent; + --system-action-button-static-black-selected-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-down: var( + --spectrum-white + ); + --system-action-button-static-black-selected-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-black-selected-emphasized-background-color-default: var( + --spectrum-transparent-black-900 + ); + --system-action-button-static-black-selected-emphasized-background-color-hover: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-down: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-background-color-focus: var( + --spectrum-transparent-black-1000 + ); + --system-action-button-static-black-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-static-black-selected-emphasized-content-color-hover: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-down: var( + --spectrum-gray-900 + ); + --system-action-button-static-black-selected-emphasized-content-color-focus: var( + --spectrum-gray-900 + ); + --system-action-button-static-white-background-color-default: transparent; + --system-action-button-static-white-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-action-button-static-white-background-color-disabled: transparent; + --system-action-button-static-white-border-color-default: var( + --spectrum-transparent-white-400 + ); + --system-action-button-static-white-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-action-button-static-white-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-action-button-static-white-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --system-action-button-static-white-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-action-button-static-white-content-color-default: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-hover: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-down: var(--spectrum-white); + --system-action-button-static-white-content-color-focus: var( + --spectrum-white + ); + --system-action-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-action-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-action-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-action-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-background-color-disabled: var( + --spectrum-transparent-white-200 + ); + --system-action-button-static-white-selected-border-color-disabled: transparent; + --system-action-button-static-white-selected-content-color-default: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-hover: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-down: var( + --spectrum-black + ); + --system-action-button-static-white-selected-content-color-focus: var( + --spectrum-black + ); + --system-action-button-static-white-selected-emphasized-background-color-default: var( + --spectrum-transparent-white-900 + ); + --system-action-button-static-white-selected-emphasized-background-color-hover: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-down: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-background-color-focus: var( + --spectrum-transparent-white-1000 + ); + --system-action-button-static-white-selected-emphasized-content-color-default: var( + --spectrum-gray-50 + ); + --system-action-button-size-m-min-width: calc( + var(--spectrum-component-edge-to-visual-only-100) * 2 + + var(--spectrum-workflow-icon-size-100) + ); + --system-action-button-size-m-height: var(--spectrum-component-height-100); + --system-action-button-size-m-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-action-button-size-m-font-size: var(--spectrum-font-size-100); + --system-action-button-size-m-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-action-button-size-m-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-medium + ); + --system-action-button-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-size-m-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-100 + ); + --system-action-button-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-size-m-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-action-button-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-m-edge-to-text-size: var( + --spectrum-component-edge-to-text-100 + ); + --system-action-button-size-xs-min-width: calc( + var(--spectrum-component-edge-to-visual-only-50) * 2 + + var(--spectrum-workflow-icon-size-50) + ); + --system-action-button-size-xs-height: var(--spectrum-component-height-50); + --system-action-button-size-xs-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-action-button-size-xs-font-size: var(--spectrum-font-size-50); + --system-action-button-size-xs-text-to-visual: var( + --spectrum-text-to-visual-50 + ); + --system-action-button-size-xs-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-small + ); + --system-action-button-size-xs-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-50 + ); + --system-action-button-size-xs-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-50 + ); + --system-action-button-size-xs-edge-to-text-size: var( + --spectrum-component-edge-to-text-50 + ); + --system-action-button-size-s-min-width: calc( + var(--spectrum-component-edge-to-visual-only-75) * 2 + + var(--spectrum-workflow-icon-size-75) + ); + --system-action-button-size-s-height: var(--spectrum-component-height-75); + --system-action-button-size-s-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-action-button-size-s-font-size: var(--spectrum-font-size-75); + --system-action-button-size-s-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-action-button-size-s-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-small + ); + --system-action-button-size-s-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-75 + ); + --system-action-button-size-s-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-action-button-size-s-edge-to-text-size: var( + --spectrum-component-edge-to-text-75 + ); + --system-action-button-size-l-min-width: calc( + var(--spectrum-component-edge-to-visual-only-200) * 2 + + var(--spectrum-workflow-icon-size-200) + ); + --system-action-button-size-l-height: var(--spectrum-component-height-200); + --system-action-button-size-l-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-action-button-size-l-font-size: var(--spectrum-font-size-200); + --system-action-button-size-l-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-action-button-size-l-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-large + ); + --system-action-button-size-l-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-200 + ); + --system-action-button-size-l-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-action-button-size-l-edge-to-text-size: var( + --spectrum-component-edge-to-text-200 + ); + --system-action-button-size-xl-min-width: calc( + var(--spectrum-component-edge-to-visual-only-300) * 2 + + var(--spectrum-workflow-icon-size-300) + ); + --system-action-button-size-xl-height: var(--spectrum-component-height-300); + --system-action-button-size-xl-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-action-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-action-button-size-xl-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-action-button-size-xl-edge-to-hold-icon: var( + --spectrum-action-button-edge-to-hold-icon-extra-large + ); + --system-action-button-size-xl-edge-to-visual-size: var( + --spectrum-component-edge-to-visual-300 + ); + --system-action-button-size-xl-edge-to-visual-only-size: var( + --spectrum-component-edge-to-visual-only-300 + ); + --system-action-button-size-xl-edge-to-text-size: var( + --spectrum-component-edge-to-text-300 + ); } :host, :root { - --system-action-group-gap-size-compact: 0; - --system-action-group-horizontal-spacing-compact: -1px; - --system-action-group-vertical-spacing-compact: -1px; - --system-action-group-button-spacing-reset: 0; - --system-action-group-border-radius-reset: 0; - --system-action-group-border-radius: var(--spectrum-corner-radius-100); - --system-action-group-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-m-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); - --system-action-group-size-m-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-l-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xl-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); - --system-action-group-size-xs-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-horizontal-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-xs-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); - --system-action-group-size-s-vertical-spacing-regular: var( - --spectrum-spacing-75 - ); + --system-action-group-gap-size-compact: 0; + --system-action-group-horizontal-spacing-compact: -1px; + --system-action-group-vertical-spacing-compact: -1px; + --system-action-group-button-spacing-reset: 0; + --system-action-group-border-radius-reset: 0; + --system-action-group-border-radius: var(--spectrum-corner-radius-100); + --system-action-group-horizontal-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-horizontal-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-vertical-spacing-regular: var(--spectrum-spacing-100); + --system-action-group-size-m-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-l-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xl-vertical-spacing-regular: var( + --spectrum-spacing-100 + ); + --system-action-group-size-xs-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-horizontal-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-xs-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); + --system-action-group-size-s-vertical-spacing-regular: var( + --spectrum-spacing-75 + ); } :host, :root { - --system-alert-banner-neutral-background: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-alert-banner-min-height: var( - --spectrum-alert-banner-minimum-height - ); - --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --system-alert-banner-size: auto; - --system-alert-banner-font-size: var(--spectrum-font-size-100); - --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --system-alert-banner-start-edge: var(--spectrum-spacing-300); - --system-alert-banner-text-to-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --system-alert-banner-top-icon: var( - --spectrum-alert-banner-top-to-workflow-icon - ); - --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --system-alert-banner-bottom-text: var( - --spectrum-alert-banner-bottom-to-text - ); - --system-alert-banner-informative-background: var( - --spectrum-informative-background-color-default - ); - --system-alert-banner-negative-background: var( - --spectrum-negative-background-color-default - ); - --system-alert-banner-font-color: var(--spectrum-white); + --system-alert-banner-neutral-background: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); + --system-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); + --system-alert-banner-size: auto; + --system-alert-banner-font-size: var(--spectrum-font-size-100); + --system-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); + --system-alert-banner-start-edge: var(--spectrum-spacing-300); + --system-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); + --system-alert-banner-text-to-divider: var(--spectrum-spacing-300); + --system-alert-banner-top-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --system-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); + --system-alert-banner-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --system-alert-banner-informative-background: var( + --spectrum-informative-background-color-default + ); + --system-alert-banner-negative-background: var( + --spectrum-negative-background-color-default + ); + --system-alert-banner-font-color: var(--spectrum-white); } :host, :root { - --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); - --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); - --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); - --system-alert-dialog-warning-icon-color: var( - --spectrum-notice-visual-color - ); - --system-alert-dialog-error-icon-color: var( - --spectrum-negative-visual-color - ); - --system-alert-dialog-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-alert-dialog-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-alert-dialog-title-font-size: var( - --spectrum-alert-dialog-title-size - ); - --system-alert-dialog-title-line-height: var( - --spectrum-heading-line-height - ); - --system-alert-dialog-title-color: var(--spectrum-heading-color); - --system-alert-dialog-body-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-alert-dialog-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-alert-dialog-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-alert-dialog-body-font-size: var( - --spectrum-alert-dialog-description-size - ); - --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); - --system-alert-dialog-body-color: var(--spectrum-body-color); - --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); + --system-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --system-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --system-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --system-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); + --system-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); + --system-alert-dialog-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-alert-dialog-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-alert-dialog-title-font-size: var( + --spectrum-alert-dialog-title-size + ); + --system-alert-dialog-title-line-height: var(--spectrum-heading-line-height); + --system-alert-dialog-title-color: var(--spectrum-heading-color); + --system-alert-dialog-body-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-alert-dialog-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-alert-dialog-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-alert-dialog-body-font-size: var( + --spectrum-alert-dialog-description-size + ); + --system-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --system-alert-dialog-body-color: var(--spectrum-body-color); + --system-alert-dialog-title-to-divider: var(--spectrum-spacing-200); + --system-alert-dialog-divider-to-description: var(--spectrum-spacing-300); + --system-alert-dialog-title-to-icon: var(--spectrum-spacing-300); } :host, :root { - --system-asset-transition-duration: var(--spectrum-animation-duration-100); - --system-asset-folder-background-color: var(--spectrum-gray-300); - --system-asset-file-background-color: var(--spectrum-gray-50); - --system-asset-icon-outline-color: var(--spectrum-gray-500); + --system-asset-transition-duration: var(--spectrum-animation-duration-100); + --system-asset-folder-background-color: var(--spectrum-gray-300); + --system-asset-file-background-color: var(--spectrum-gray-50); + --system-asset-icon-outline-color: var(--spectrum-gray-500); } :host, :root { - --system-avatar-color-opacity: 1; - --system-avatar-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-block-size: var(--spectrum-avatar-size-100); - --system-avatar-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-avatar-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-avatar-color-opacity-disabled: var( - --spectrum-avatar-opacity-disabled - ); - --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); - --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); - --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); - --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); - --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); - --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); - --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); - --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); - --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); - --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); - --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); - --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); - --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); - --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); - --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); - --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); - --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); - --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); + --system-avatar-color-opacity: 1; + --system-avatar-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-block-size: var(--spectrum-avatar-size-100); + --system-avatar-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-avatar-color-opacity-disabled: var( + --spectrum-avatar-opacity-disabled + ); + --system-avatar-size-50-inline-size: var(--spectrum-avatar-size-50); + --system-avatar-size-50-block-size: var(--spectrum-avatar-size-50); + --system-avatar-size-75-inline-size: var(--spectrum-avatar-size-75); + --system-avatar-size-75-block-size: var(--spectrum-avatar-size-75); + --system-avatar-size-100-inline-size: var(--spectrum-avatar-size-100); + --system-avatar-size-100-block-size: var(--spectrum-avatar-size-100); + --system-avatar-size-200-inline-size: var(--spectrum-avatar-size-200); + --system-avatar-size-200-block-size: var(--spectrum-avatar-size-200); + --system-avatar-size-300-inline-size: var(--spectrum-avatar-size-300); + --system-avatar-size-300-block-size: var(--spectrum-avatar-size-300); + --system-avatar-size-400-inline-size: var(--spectrum-avatar-size-400); + --system-avatar-size-400-block-size: var(--spectrum-avatar-size-400); + --system-avatar-size-500-inline-size: var(--spectrum-avatar-size-500); + --system-avatar-size-500-block-size: var(--spectrum-avatar-size-500); + --system-avatar-size-600-inline-size: var(--spectrum-avatar-size-600); + --system-avatar-size-600-block-size: var(--spectrum-avatar-size-600); + --system-avatar-size-700-inline-size: var(--spectrum-avatar-size-700); + --system-avatar-size-700-block-size: var(--spectrum-avatar-size-700); } :host, :root { - --system-badge-corner-radius: var(--spectrum-corner-radius-100); - --system-badge-line-height: var(--spectrum-line-height-100); - --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-badge-label-icon-color: var(--spectrum-white); - --system-badge-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-badge-background-color-accent: var( - --spectrum-accent-background-color-default - ); - --system-badge-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-badge-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-badge-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-badge-background-color-notice: var( - --spectrum-notice-background-color-default - ); - --system-badge-background-color-gray: var( - --spectrum-gray-background-color-default - ); - --system-badge-background-color-red: var( - --spectrum-red-background-color-default - ); - --system-badge-background-color-orange: var( - --spectrum-orange-background-color-default - ); - --system-badge-background-color-yellow: var( - --spectrum-yellow-background-color-default - ); - --system-badge-background-color-chartreuse: var( - --spectrum-chartreuse-background-color-default - ); - --system-badge-background-color-celery: var( - --spectrum-celery-background-color-default - ); - --system-badge-background-color-green: var( - --spectrum-green-background-color-default - ); - --system-badge-background-color-seafoam: var( - --spectrum-seafoam-background-color-default - ); - --system-badge-background-color-cyan: var( - --spectrum-cyan-background-color-default - ); - --system-badge-background-color-blue: var( - --spectrum-blue-background-color-default - ); - --system-badge-background-color-indigo: var( - --spectrum-indigo-background-color-default - ); - --system-badge-background-color-purple: var( - --spectrum-purple-background-color-default - ); - --system-badge-background-color-fuchsia: var( - --spectrum-fuchsia-background-color-default - ); - --system-badge-background-color-magenta: var( - --spectrum-magenta-background-color-default - ); - --system-badge-height: var(--spectrum-component-height-100); - --system-badge-font-size: var(--spectrum-font-size-100); - --system-badge-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-100 - ); - --system-badge-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-100 - ); - --system-badge-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-100 - ); - --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); - --system-badge-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-100 - ); - --system-badge-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-badge-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-100 - ); - --system-badge-orange-label-icon-color: var(--spectrum-black); - --system-badge-yellow-label-icon-color: var(--spectrum-black); - --system-badge-chartreuse-label-icon-color: var(--spectrum-black); - --system-badge-celery-label-icon-color: var(--spectrum-black); - --system-badge-gray-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-red-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-green-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-seafoam-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-cyan-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-blue-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-indigo-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-purple-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-fuchsia-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-magenta-label-icon-color: var( - --spectrum-badge-label-icon-color-primary - ); - --system-badge-size-s-height: var(--spectrum-component-height-75); - --system-badge-size-s-font-size: var(--spectrum-font-size-75); - --system-badge-size-s-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-75 - ); - --system-badge-size-s-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-75 - ); - --system-badge-size-s-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-75 - ); - --system-badge-size-s-workflow-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); - --system-badge-size-s-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-75 - ); - --system-badge-size-s-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-badge-size-s-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-75 - ); - --system-badge-size-l-height: var(--spectrum-component-height-100); - --system-badge-size-l-font-size: var(--spectrum-font-size-200); - --system-badge-size-l-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-200 - ); - --system-badge-size-l-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-200 - ); - --system-badge-size-l-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-200 - ); - --system-badge-size-l-workflow-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); - --system-badge-size-l-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-200 - ); - --system-badge-size-l-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-badge-size-l-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-200 - ); - --system-badge-size-xl-height: var(--spectrum-component-height-100); - --system-badge-size-xl-font-size: var(--spectrum-font-size-300); - --system-badge-size-xl-label-spacing-vertical-top: var( - --spectrum-component-top-to-text-300 - ); - --system-badge-size-xl-label-spacing-vertical-bottom: var( - --spectrum-component-bottom-to-text-300 - ); - --system-badge-size-xl-label-spacing-horizontal: var( - --spectrum-component-edge-to-text-300 - ); - --system-badge-size-xl-workflow-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-badge-size-xl-icon-text-spacing: var( - --spectrum-text-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-horizontal: var( - --spectrum-component-edge-to-visual-300 - ); - --system-badge-size-xl-icon-spacing-vertical-top: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-badge-size-xl-icon-only-spacing-horizontal: var( - --spectrum-component-edge-to-visual-only-300 - ); + --system-badge-corner-radius: var(--spectrum-corner-radius-100); + --system-badge-line-height: var(--spectrum-line-height-100); + --system-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-badge-label-icon-color: var(--spectrum-white); + --system-badge-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-badge-background-color-accent: var( + --spectrum-accent-background-color-default + ); + --system-badge-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-badge-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-badge-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-badge-background-color-notice: var( + --spectrum-notice-background-color-default + ); + --system-badge-background-color-gray: var( + --spectrum-gray-background-color-default + ); + --system-badge-background-color-red: var( + --spectrum-red-background-color-default + ); + --system-badge-background-color-orange: var( + --spectrum-orange-background-color-default + ); + --system-badge-background-color-yellow: var( + --spectrum-yellow-background-color-default + ); + --system-badge-background-color-chartreuse: var( + --spectrum-chartreuse-background-color-default + ); + --system-badge-background-color-celery: var( + --spectrum-celery-background-color-default + ); + --system-badge-background-color-green: var( + --spectrum-green-background-color-default + ); + --system-badge-background-color-seafoam: var( + --spectrum-seafoam-background-color-default + ); + --system-badge-background-color-cyan: var( + --spectrum-cyan-background-color-default + ); + --system-badge-background-color-blue: var( + --spectrum-blue-background-color-default + ); + --system-badge-background-color-indigo: var( + --spectrum-indigo-background-color-default + ); + --system-badge-background-color-purple: var( + --spectrum-purple-background-color-default + ); + --system-badge-background-color-fuchsia: var( + --spectrum-fuchsia-background-color-default + ); + --system-badge-background-color-magenta: var( + --spectrum-magenta-background-color-default + ); + --system-badge-height: var(--spectrum-component-height-100); + --system-badge-font-size: var(--spectrum-font-size-100); + --system-badge-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-100 + ); + --system-badge-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-100 + ); + --system-badge-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-100 + ); + --system-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); + --system-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); + --system-badge-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-100 + ); + --system-badge-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-badge-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-100 + ); + --system-badge-orange-label-icon-color: var(--spectrum-black); + --system-badge-yellow-label-icon-color: var(--spectrum-black); + --system-badge-chartreuse-label-icon-color: var(--spectrum-black); + --system-badge-celery-label-icon-color: var(--spectrum-black); + --system-badge-gray-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-red-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-green-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-seafoam-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-cyan-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-blue-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-indigo-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-purple-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-fuchsia-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-magenta-label-icon-color: var( + --spectrum-badge-label-icon-color-primary + ); + --system-badge-size-s-height: var(--spectrum-component-height-75); + --system-badge-size-s-font-size: var(--spectrum-font-size-75); + --system-badge-size-s-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-75 + ); + --system-badge-size-s-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-75 + ); + --system-badge-size-s-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-75 + ); + --system-badge-size-s-workflow-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-badge-size-s-icon-text-spacing: var(--spectrum-text-to-visual-75); + --system-badge-size-s-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-75 + ); + --system-badge-size-s-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-badge-size-s-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-75 + ); + --system-badge-size-l-height: var(--spectrum-component-height-100); + --system-badge-size-l-font-size: var(--spectrum-font-size-200); + --system-badge-size-l-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-200 + ); + --system-badge-size-l-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-200 + ); + --system-badge-size-l-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-200 + ); + --system-badge-size-l-workflow-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-badge-size-l-icon-text-spacing: var(--spectrum-text-to-visual-200); + --system-badge-size-l-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-200 + ); + --system-badge-size-l-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-badge-size-l-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-200 + ); + --system-badge-size-xl-height: var(--spectrum-component-height-100); + --system-badge-size-xl-font-size: var(--spectrum-font-size-300); + --system-badge-size-xl-label-spacing-vertical-top: var( + --spectrum-component-top-to-text-300 + ); + --system-badge-size-xl-label-spacing-vertical-bottom: var( + --spectrum-component-bottom-to-text-300 + ); + --system-badge-size-xl-label-spacing-horizontal: var( + --spectrum-component-edge-to-text-300 + ); + --system-badge-size-xl-workflow-icon-size: var( + --spectrum-workflow-icon-size-300 + ); + --system-badge-size-xl-icon-text-spacing: var(--spectrum-text-to-visual-300); + --system-badge-size-xl-icon-spacing-horizontal: var( + --spectrum-component-edge-to-visual-300 + ); + --system-badge-size-xl-icon-spacing-vertical-top: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-badge-size-xl-icon-only-spacing-horizontal: var( + --spectrum-component-edge-to-visual-only-300 + ); } :host, :root { - --system-button-animation-duration: var(--spectrum-animation-duration-100); - --system-button-border-width: var(--spectrum-border-width-200); - --system-button-line-height: 1.2; - --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-button-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-button-background-color-default: var(--spectrum-gray-75); - --system-button-background-color-hover: var(--spectrum-gray-200); - --system-button-background-color-down: var(--spectrum-gray-300); - --system-button-background-color-focus: var(--spectrum-gray-200); - --system-button-border-color-default: var(--spectrum-gray-400); - --system-button-border-color-hover: var(--spectrum-gray-500); - --system-button-border-color-down: var(--spectrum-gray-600); - --system-button-border-color-focus: var(--spectrum-gray-500); - --system-button-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-background-color-disabled: transparent; - --system-button-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-accent-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-accent-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-accent-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-accent-border-color-default: transparent; - --system-button-accent-border-color-hover: transparent; - --system-button-accent-border-color-down: transparent; - --system-button-accent-border-color-focus: transparent; - --system-button-accent-content-color-default: var(--spectrum-white); - --system-button-accent-content-color-hover: var(--spectrum-white); - --system-button-accent-content-color-down: var(--spectrum-white); - --system-button-accent-content-color-focus: var(--spectrum-white); - --system-button-accent-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-accent-border-color-disabled: transparent; - --system-button-accent-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-accent-outline-background-color-default: transparent; - --system-button-accent-outline-background-color-hover: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-background-color-down: var( - --spectrum-accent-color-300 - ); - --system-button-accent-outline-background-color-focus: var( - --spectrum-accent-color-200 - ); - --system-button-accent-outline-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-button-accent-outline-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-button-accent-outline-border-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-button-accent-outline-content-color-default: var( - --spectrum-accent-content-color-default - ); - --system-button-accent-outline-content-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-button-accent-outline-content-color-down: var( - --spectrum-accent-content-color-down - ); - --system-button-accent-outline-content-color-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-button-accent-outline-background-color-disabled: transparent; - --system-button-accent-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-accent-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-button-negative-background-color-hover: var( - --spectrum-negative-background-color-hover - ); - --system-button-negative-background-color-down: var( - --spectrum-negative-background-color-down - ); - --system-button-negative-background-color-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-button-negative-border-color-default: transparent; - --system-button-negative-border-color-hover: transparent; - --system-button-negative-border-color-down: transparent; - --system-button-negative-border-color-focus: transparent; - --system-button-negative-content-color-default: var(--spectrum-white); - --system-button-negative-content-color-hover: var(--spectrum-white); - --system-button-negative-content-color-down: var(--spectrum-white); - --system-button-negative-content-color-focus: var(--spectrum-white); - --system-button-negative-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-negative-border-color-disabled: transparent; - --system-button-negative-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-negative-outline-background-color-default: transparent; - --system-button-negative-outline-background-color-hover: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-background-color-down: var( - --spectrum-negative-color-300 - ); - --system-button-negative-outline-background-color-focus: var( - --spectrum-negative-color-200 - ); - --system-button-negative-outline-border-color-default: var( - --spectrum-negative-color-900 - ); - --system-button-negative-outline-border-color-hover: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-border-color-down: var( - --spectrum-negative-color-1100 - ); - --system-button-negative-outline-border-color-focus: var( - --spectrum-negative-color-1000 - ); - --system-button-negative-outline-content-color-default: var( - --spectrum-negative-content-color-default - ); - --system-button-negative-outline-content-color-hover: var( - --spectrum-negative-content-color-hover - ); - --system-button-negative-outline-content-color-down: var( - --spectrum-negative-content-color-down - ); - --system-button-negative-outline-content-color-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-button-negative-outline-background-color-disabled: transparent; - --system-button-negative-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-negative-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-background-color-default: var( - --spectrum-neutral-background-color-default - ); - --system-button-primary-background-color-hover: var( - --spectrum-neutral-background-color-hover - ); - --system-button-primary-background-color-down: var( - --spectrum-neutral-background-color-down - ); - --system-button-primary-background-color-focus: var( - --spectrum-neutral-background-color-key-focus - ); - --system-button-primary-border-color-default: transparent; - --system-button-primary-border-color-hover: transparent; - --system-button-primary-border-color-down: transparent; - --system-button-primary-border-color-focus: transparent; - --system-button-primary-content-color-default: var(--spectrum-white); - --system-button-primary-content-color-hover: var(--spectrum-white); - --system-button-primary-content-color-down: var(--spectrum-white); - --system-button-primary-content-color-focus: var(--spectrum-white); - --system-button-primary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-primary-border-color-disabled: transparent; - --system-button-primary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-primary-outline-background-color-default: transparent; - --system-button-primary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-primary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-primary-outline-border-color-default: var( - --spectrum-gray-800 - ); - --system-button-primary-outline-border-color-hover: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); - --system-button-primary-outline-border-color-focus: var( - --spectrum-gray-900 - ); - --system-button-primary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-primary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-primary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-primary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-primary-outline-background-color-disabled: transparent; - --system-button-primary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-primary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-background-color-default: var( - --spectrum-gray-200 - ); - --system-button-secondary-background-color-hover: var(--spectrum-gray-300); - --system-button-secondary-background-color-down: var(--spectrum-gray-400); - --system-button-secondary-background-color-focus: var(--spectrum-gray-300); - --system-button-secondary-border-color-default: transparent; - --system-button-secondary-border-color-hover: transparent; - --system-button-secondary-border-color-down: transparent; - --system-button-secondary-border-color-focus: transparent; - --system-button-secondary-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-secondary-border-color-disabled: transparent; - --system-button-secondary-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-secondary-outline-background-color-default: transparent; - --system-button-secondary-outline-background-color-hover: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-background-color-down: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-background-color-focus: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-default: var( - --spectrum-gray-300 - ); - --system-button-secondary-outline-border-color-hover: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-border-color-down: var( - --spectrum-gray-500 - ); - --system-button-secondary-outline-border-color-focus: var( - --spectrum-gray-400 - ); - --system-button-secondary-outline-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-button-secondary-outline-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-button-secondary-outline-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-button-secondary-outline-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-button-secondary-outline-background-color-disabled: transparent; - --system-button-secondary-outline-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-button-secondary-outline-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-button-quiet-background-color-default: transparent; - --system-button-quiet-background-color-hover: var(--spectrum-gray-100); - --system-button-quiet-background-color-down: var(--spectrum-gray-200); - --system-button-quiet-background-color-focus: var(--spectrum-gray-100); - --system-button-quiet-border-color-default: transparent; - --system-button-quiet-border-color-hover: transparent; - --system-button-quiet-border-color-down: transparent; - --system-button-quiet-border-color-focus: transparent; - --system-button-quiet-background-color-disabled: transparent; - --system-button-quiet-border-color-disabled: transparent; - --system-button-selected-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-button-selected-background-color-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-button-selected-background-color-down: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-button-selected-background-color-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); - --system-button-selected-border-color-default: transparent; - --system-button-selected-border-color-hover: transparent; - --system-button-selected-border-color-down: transparent; - --system-button-selected-border-color-focus: transparent; - --system-button-selected-content-color-default: var(--spectrum-white); - --system-button-selected-content-color-hover: var(--spectrum-white); - --system-button-selected-content-color-down: var(--spectrum-white); - --system-button-selected-content-color-focus: var(--spectrum-white); - --system-button-selected-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-button-selected-border-color-disabled: transparent; - --system-button-selected-emphasized-background-color-default: var( - --spectrum-accent-background-color-default - ); - --system-button-selected-emphasized-background-color-hover: var( - --spectrum-accent-background-color-hover - ); - --system-button-selected-emphasized-background-color-down: var( - --spectrum-accent-background-color-down - ); - --system-button-selected-emphasized-background-color-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-button-static-black-quiet-border-color-default: transparent; - --system-button-static-white-quiet-border-color-default: transparent; - --system-button-static-black-quiet-border-color-hover: transparent; - --system-button-static-white-quiet-border-color-hover: transparent; - --system-button-static-black-quiet-border-color-down: transparent; - --system-button-static-white-quiet-border-color-down: transparent; - --system-button-static-black-quiet-border-color-focus: transparent; - --system-button-static-white-quiet-border-color-focus: transparent; - --system-button-static-black-quiet-border-color-disabled: transparent; - --system-button-static-white-quiet-border-color-disabled: transparent; - --system-button-static-white-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-border-color-default: transparent; - --system-button-static-white-border-color-hover: transparent; - --system-button-static-white-border-color-down: transparent; - --system-button-static-white-border-color-focus: transparent; - --system-button-static-white-content-color-default: var(--spectrum-black); - --system-button-static-white-content-color-hover: var(--spectrum-black); - --system-button-static-white-content-color-down: var(--spectrum-black); - --system-button-static-white-content-color-focus: var(--spectrum-black); - --system-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-border-color-disabled: transparent; - --system-button-static-white-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-outline-background-color-default: transparent; - --system-button-static-white-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-outline-border-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-outline-border-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-border-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-outline-background-color-disabled: transparent; - --system-button-static-white-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-selected-background-color-default: var( - --spectrum-transparent-white-800 - ); - --system-button-static-white-selected-background-color-hover: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-down: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-background-color-focus: var( - --spectrum-transparent-white-900 - ); - --system-button-static-white-selected-static-white-content-color-default: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-hover: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-down: var( - --spectrum-black - ); - --system-button-static-white-selected-static-white-content-color-focus: var( - --spectrum-black - ); - --system-button-static-white-selected-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-selected-border-color-disabled: transparent; - --system-button-static-white-secondary-background-color-default: var( - --spectrum-transparent-white-200 - ); - --system-button-static-white-secondary-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-border-color-default: transparent; - --system-button-static-white-secondary-border-color-hover: transparent; - --system-button-static-white-secondary-border-color-down: transparent; - --system-button-static-white-secondary-border-color-focus: transparent; - --system-button-static-white-secondary-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-background-color-disabled: var( - --spectrum-disabled-static-white-background-color - ); - --system-button-static-white-secondary-border-color-disabled: transparent; - --system-button-static-white-secondary-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-white-secondary-outline-background-color-default: transparent; - --system-button-static-white-secondary-outline-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-default: var( - --spectrum-transparent-white-300 - ); - --system-button-static-white-secondary-outline-border-color-hover: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-border-color-down: var( - --spectrum-transparent-white-500 - ); - --system-button-static-white-secondary-outline-border-color-focus: var( - --spectrum-transparent-white-400 - ); - --system-button-static-white-secondary-outline-content-color-default: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-hover: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-down: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-content-color-focus: var( - --spectrum-white - ); - --system-button-static-white-secondary-outline-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-button-static-white-secondary-outline-background-color-disabled: transparent; - --system-button-static-white-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-white-border-color - ); - --system-button-static-white-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-button-static-black-background-color-default: var( - --spectrum-transparent-black-800 - ); - --system-button-static-black-background-color-hover: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-down: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-background-color-focus: var( - --spectrum-transparent-black-900 - ); - --system-button-static-black-border-color-default: transparent; - --system-button-static-black-border-color-hover: transparent; - --system-button-static-black-border-color-down: transparent; - --system-button-static-black-border-color-focus: transparent; - --system-button-static-black-content-color-default: var(--spectrum-white); - --system-button-static-black-content-color-hover: var(--spectrum-white); - --system-button-static-black-content-color-down: var(--spectrum-white); - --system-button-static-black-content-color-focus: var(--spectrum-white); - --system-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-border-color-disabled: transparent; - --system-button-static-black-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-outline-background-color-default: transparent; - --system-button-static-black-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-outline-border-color-default: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-outline-border-color-hover: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-border-color-down: var( - --spectrum-transparent-black-600 - ); - --system-button-static-black-outline-border-color-focus: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-outline-background-color-disabled: transparent; - --system-button-static-black-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-background-color-default: var( - --spectrum-transparent-black-200 - ); - --system-button-static-black-secondary-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-border-color-default: transparent; - --system-button-static-black-secondary-border-color-hover: transparent; - --system-button-static-black-secondary-border-color-down: transparent; - --system-button-static-black-secondary-border-color-focus: transparent; - --system-button-static-black-secondary-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-background-color-disabled: var( - --spectrum-disabled-static-black-background-color - ); - --system-button-static-black-secondary-border-color-disabled: transparent; - --system-button-static-black-secondary-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-static-black-secondary-outline-background-color-default: transparent; - --system-button-static-black-secondary-outline-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-default: var( - --spectrum-transparent-black-300 - ); - --system-button-static-black-secondary-outline-border-color-hover: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-border-color-down: var( - --spectrum-transparent-black-500 - ); - --system-button-static-black-secondary-outline-border-color-focus: var( - --spectrum-transparent-black-400 - ); - --system-button-static-black-secondary-outline-content-color-default: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-hover: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-down: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-content-color-focus: var( - --spectrum-black - ); - --system-button-static-black-secondary-outline-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-button-static-black-secondary-outline-background-color-disabled: transparent; - --system-button-static-black-secondary-outline-border-color-disabled: var( - --spectrum-disabled-static-black-border-color - ); - --system-button-static-black-secondary-outline-content-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-button-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-m-min-width: calc( - var(--spectrum-component-height-100) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-size-m-border-radius: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-button-height: var(--spectrum-component-height-100); - --system-button-size-m-height: var(--spectrum-component-height-100); - --system-button-font-size: var(--spectrum-font-size-100); - --system-button-size-m-font-size: var(--spectrum-font-size-100); - --system-button-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-100) - - var(--system-button-border-width) - ); - --system-button-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-size-m-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-100 - ); - --system-button-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-size-m-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-100) - - var(--system-button-border-width) - ); - --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --system-button-size-m-padding-label-to-icon: var( - --spectrum-text-to-visual-100 - ); - --system-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --system-button-size-m-top-to-text: var( - --spectrum-button-top-to-text-medium - ); - --system-button-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-size-m-bottom-to-text: var( - --spectrum-button-bottom-to-text-medium - ); - --system-button-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-size-m-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); - --system-button-size-m-intended-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-button-size-s-min-width: calc( - var(--spectrum-component-height-75) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-s-border-radius: var( - --spectrum-component-pill-edge-to-text-75 - ); - --system-button-size-s-height: var(--spectrum-component-height-75); - --system-button-size-s-font-size: var(--spectrum-font-size-75); - --system-button-size-s-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-75) - - var(--system-button-border-width) - ); - --system-button-size-s-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-75 - ); - --system-button-size-s-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-75) - - var(--system-button-border-width) - ); - --system-button-size-s-padding-label-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-button-size-s-top-to-text: var( - --spectrum-button-top-to-text-small - ); - --system-button-size-s-bottom-to-text: var( - --spectrum-button-bottom-to-text-small - ); - --system-button-size-s-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-button-size-s-intended-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-button-size-l-min-width: calc( - var(--spectrum-component-height-200) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-l-border-radius: var( - --spectrum-component-pill-edge-to-text-200 - ); - --system-button-size-l-height: var(--spectrum-component-height-200); - --system-button-size-l-font-size: var(--spectrum-font-size-200); - --system-button-size-l-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-200) - - var(--system-button-border-width) - ); - --system-button-size-l-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-200 - ); - --system-button-size-l-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-200) - - var(--system-button-border-width) - ); - --system-button-size-l-padding-label-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-button-size-l-top-to-text: var( - --spectrum-button-top-to-text-large - ); - --system-button-size-l-bottom-to-text: var( - --spectrum-button-bottom-to-text-large - ); - --system-button-size-l-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-button-size-l-intended-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-button-size-xl-min-width: calc( - var(--spectrum-component-height-300) * - var(--spectrum-button-minimum-width-multiplier) - ); - --system-button-size-xl-border-radius: var( - --spectrum-component-pill-edge-to-text-300 - ); - --system-button-size-xl-height: var(--spectrum-component-height-300); - --system-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-button-size-xl-edge-to-visual: calc( - var(--spectrum-component-pill-edge-to-visual-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-edge-to-visual-only: var( - --spectrum-component-pill-edge-to-visual-only-300 - ); - --system-button-size-xl-edge-to-text: calc( - var(--spectrum-component-pill-edge-to-text-300) - - var(--system-button-border-width) - ); - --system-button-size-xl-padding-label-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-button-size-xl-top-to-text: var( - --spectrum-button-top-to-text-extra-large - ); - --system-button-size-xl-bottom-to-text: var( - --spectrum-button-bottom-to-text-extra-large - ); - --system-button-size-xl-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-300 - ); - --system-button-size-xl-intended-icon-size: var( - --spectrum-workflow-icon-size-300 - ); + --system-button-animation-duration: var(--spectrum-animation-duration-100); + --system-button-border-width: var(--spectrum-border-width-200); + --system-button-line-height: 1.2; + --system-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-button-focus-ring-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-button-background-color-default: var(--spectrum-gray-75); + --system-button-background-color-hover: var(--spectrum-gray-200); + --system-button-background-color-down: var(--spectrum-gray-300); + --system-button-background-color-focus: var(--spectrum-gray-200); + --system-button-border-color-default: var(--spectrum-gray-400); + --system-button-border-color-hover: var(--spectrum-gray-500); + --system-button-border-color-down: var(--spectrum-gray-600); + --system-button-border-color-focus: var(--spectrum-gray-500); + --system-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-background-color-disabled: transparent; + --system-button-border-color-disabled: var(--spectrum-disabled-border-color); + --system-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-accent-border-color-default: transparent; + --system-button-accent-border-color-hover: transparent; + --system-button-accent-border-color-down: transparent; + --system-button-accent-border-color-focus: transparent; + --system-button-accent-content-color-default: var(--spectrum-white); + --system-button-accent-content-color-hover: var(--spectrum-white); + --system-button-accent-content-color-down: var(--spectrum-white); + --system-button-accent-content-color-focus: var(--spectrum-white); + --system-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-accent-border-color-disabled: transparent; + --system-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-accent-outline-background-color-default: transparent; + --system-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-button-accent-outline-background-color-disabled: transparent; + --system-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-button-negative-border-color-default: transparent; + --system-button-negative-border-color-hover: transparent; + --system-button-negative-border-color-down: transparent; + --system-button-negative-border-color-focus: transparent; + --system-button-negative-content-color-default: var(--spectrum-white); + --system-button-negative-content-color-hover: var(--spectrum-white); + --system-button-negative-content-color-down: var(--spectrum-white); + --system-button-negative-content-color-focus: var(--spectrum-white); + --system-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-negative-border-color-disabled: transparent; + --system-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-negative-outline-background-color-default: transparent; + --system-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-button-negative-outline-background-color-disabled: transparent; + --system-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-button-primary-border-color-default: transparent; + --system-button-primary-border-color-hover: transparent; + --system-button-primary-border-color-down: transparent; + --system-button-primary-border-color-focus: transparent; + --system-button-primary-content-color-default: var(--spectrum-white); + --system-button-primary-content-color-hover: var(--spectrum-white); + --system-button-primary-content-color-down: var(--spectrum-white); + --system-button-primary-content-color-focus: var(--spectrum-white); + --system-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-primary-border-color-disabled: transparent; + --system-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-primary-outline-background-color-default: transparent; + --system-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-button-primary-outline-border-color-hover: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-down: var(--spectrum-gray-900); + --system-button-primary-outline-border-color-focus: var(--spectrum-gray-900); + --system-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-primary-outline-background-color-disabled: transparent; + --system-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-background-color-default: var(--spectrum-gray-200); + --system-button-secondary-background-color-hover: var(--spectrum-gray-300); + --system-button-secondary-background-color-down: var(--spectrum-gray-400); + --system-button-secondary-background-color-focus: var(--spectrum-gray-300); + --system-button-secondary-border-color-default: transparent; + --system-button-secondary-border-color-hover: transparent; + --system-button-secondary-border-color-down: transparent; + --system-button-secondary-border-color-focus: transparent; + --system-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-secondary-border-color-disabled: transparent; + --system-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-secondary-outline-background-color-default: transparent; + --system-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-border-color-down: var(--spectrum-gray-500); + --system-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-button-secondary-outline-background-color-disabled: transparent; + --system-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-button-quiet-background-color-default: transparent; + --system-button-quiet-background-color-hover: var(--spectrum-gray-100); + --system-button-quiet-background-color-down: var(--spectrum-gray-200); + --system-button-quiet-background-color-focus: var(--spectrum-gray-100); + --system-button-quiet-border-color-default: transparent; + --system-button-quiet-border-color-hover: transparent; + --system-button-quiet-border-color-down: transparent; + --system-button-quiet-border-color-focus: transparent; + --system-button-quiet-background-color-disabled: transparent; + --system-button-quiet-border-color-disabled: transparent; + --system-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-button-selected-border-color-default: transparent; + --system-button-selected-border-color-hover: transparent; + --system-button-selected-border-color-down: transparent; + --system-button-selected-border-color-focus: transparent; + --system-button-selected-content-color-default: var(--spectrum-white); + --system-button-selected-content-color-hover: var(--spectrum-white); + --system-button-selected-content-color-down: var(--spectrum-white); + --system-button-selected-content-color-focus: var(--spectrum-white); + --system-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-button-selected-border-color-disabled: transparent; + --system-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-button-static-black-quiet-border-color-default: transparent; + --system-button-static-white-quiet-border-color-default: transparent; + --system-button-static-black-quiet-border-color-hover: transparent; + --system-button-static-white-quiet-border-color-hover: transparent; + --system-button-static-black-quiet-border-color-down: transparent; + --system-button-static-white-quiet-border-color-down: transparent; + --system-button-static-black-quiet-border-color-focus: transparent; + --system-button-static-white-quiet-border-color-focus: transparent; + --system-button-static-black-quiet-border-color-disabled: transparent; + --system-button-static-white-quiet-border-color-disabled: transparent; + --system-button-static-white-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-border-color-default: transparent; + --system-button-static-white-border-color-hover: transparent; + --system-button-static-white-border-color-down: transparent; + --system-button-static-white-border-color-focus: transparent; + --system-button-static-white-content-color-default: var(--spectrum-black); + --system-button-static-white-content-color-hover: var(--spectrum-black); + --system-button-static-white-content-color-down: var(--spectrum-black); + --system-button-static-white-content-color-focus: var(--spectrum-black); + --system-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-border-color-disabled: transparent; + --system-button-static-white-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-outline-background-color-default: transparent; + --system-button-static-white-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-outline-background-color-disabled: transparent; + --system-button-static-white-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-button-static-white-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-button-static-white-selected-static-white-content-color-default: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-hover: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-down: var( + --spectrum-black + ); + --system-button-static-white-selected-static-white-content-color-focus: var( + --spectrum-black + ); + --system-button-static-white-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-selected-border-color-disabled: transparent; + --system-button-static-white-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-button-static-white-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-border-color-default: transparent; + --system-button-static-white-secondary-border-color-hover: transparent; + --system-button-static-white-secondary-border-color-down: transparent; + --system-button-static-white-secondary-border-color-focus: transparent; + --system-button-static-white-secondary-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-button-static-white-secondary-border-color-disabled: transparent; + --system-button-static-white-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-white-secondary-outline-background-color-default: transparent; + --system-button-static-white-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-button-static-white-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-button-static-white-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-button-static-white-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-button-static-white-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-button-static-white-secondary-outline-background-color-disabled: transparent; + --system-button-static-white-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-button-static-white-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-button-static-black-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-button-static-black-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-button-static-black-border-color-default: transparent; + --system-button-static-black-border-color-hover: transparent; + --system-button-static-black-border-color-down: transparent; + --system-button-static-black-border-color-focus: transparent; + --system-button-static-black-content-color-default: var(--spectrum-white); + --system-button-static-black-content-color-hover: var(--spectrum-white); + --system-button-static-black-content-color-down: var(--spectrum-white); + --system-button-static-black-content-color-focus: var(--spectrum-white); + --system-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-border-color-disabled: transparent; + --system-button-static-black-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-outline-background-color-default: transparent; + --system-button-static-black-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-button-static-black-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-outline-background-color-disabled: transparent; + --system-button-static-black-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-button-static-black-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-border-color-default: transparent; + --system-button-static-black-secondary-border-color-hover: transparent; + --system-button-static-black-secondary-border-color-down: transparent; + --system-button-static-black-secondary-border-color-focus: transparent; + --system-button-static-black-secondary-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-button-static-black-secondary-border-color-disabled: transparent; + --system-button-static-black-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-static-black-secondary-outline-background-color-default: transparent; + --system-button-static-black-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-button-static-black-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-button-static-black-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-button-static-black-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-button-static-black-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-button-static-black-secondary-outline-background-color-disabled: transparent; + --system-button-static-black-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-button-static-black-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-button-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-m-min-width: calc( + var(--spectrum-component-height-100) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-size-m-border-radius: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-button-height: var(--spectrum-component-height-100); + --system-button-size-m-height: var(--spectrum-component-height-100); + --system-button-font-size: var(--spectrum-font-size-100); + --system-button-size-m-font-size: var(--spectrum-font-size-100); + --system-button-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-100) - + var(--system-button-border-width) + ); + --system-button-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-size-m-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-100 + ); + --system-button-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-size-m-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-100) - + var(--system-button-border-width) + ); + --system-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --system-button-size-m-padding-label-to-icon: var( + --spectrum-text-to-visual-100 + ); + --system-button-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-size-m-top-to-text: var(--spectrum-button-top-to-text-medium); + --system-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --system-button-size-m-bottom-to-text: var( + --spectrum-button-bottom-to-text-medium + ); + --system-button-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-size-m-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); + --system-button-size-m-intended-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-button-size-s-min-width: calc( + var(--spectrum-component-height-75) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-s-border-radius: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-button-size-s-height: var(--spectrum-component-height-75); + --system-button-size-s-font-size: var(--spectrum-font-size-75); + --system-button-size-s-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-75) - + var(--system-button-border-width) + ); + --system-button-size-s-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-75 + ); + --system-button-size-s-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-75) - + var(--system-button-border-width) + ); + --system-button-size-s-padding-label-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-button-size-s-top-to-text: var(--spectrum-button-top-to-text-small); + --system-button-size-s-bottom-to-text: var( + --spectrum-button-bottom-to-text-small + ); + --system-button-size-s-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-button-size-s-intended-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-button-size-l-min-width: calc( + var(--spectrum-component-height-200) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-l-border-radius: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-button-size-l-height: var(--spectrum-component-height-200); + --system-button-size-l-font-size: var(--spectrum-font-size-200); + --system-button-size-l-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-200) - + var(--system-button-border-width) + ); + --system-button-size-l-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-200 + ); + --system-button-size-l-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-200) - + var(--system-button-border-width) + ); + --system-button-size-l-padding-label-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-button-size-l-top-to-text: var(--spectrum-button-top-to-text-large); + --system-button-size-l-bottom-to-text: var( + --spectrum-button-bottom-to-text-large + ); + --system-button-size-l-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-button-size-l-intended-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-button-size-xl-min-width: calc( + var(--spectrum-component-height-300) * + var(--spectrum-button-minimum-width-multiplier) + ); + --system-button-size-xl-border-radius: var( + --spectrum-component-pill-edge-to-text-300 + ); + --system-button-size-xl-height: var(--spectrum-component-height-300); + --system-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-button-size-xl-edge-to-visual: calc( + var(--spectrum-component-pill-edge-to-visual-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-edge-to-visual-only: var( + --spectrum-component-pill-edge-to-visual-only-300 + ); + --system-button-size-xl-edge-to-text: calc( + var(--spectrum-component-pill-edge-to-text-300) - + var(--system-button-border-width) + ); + --system-button-size-xl-padding-label-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-button-size-xl-top-to-text: var( + --spectrum-button-top-to-text-extra-large + ); + --system-button-size-xl-bottom-to-text: var( + --spectrum-button-bottom-to-text-extra-large + ); + --system-button-size-xl-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --system-button-size-xl-intended-icon-size: var( + --spectrum-workflow-icon-size-300 + ); } :host, :root { - --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-s-spacing-horizontal: var( - --spectrum-spacing-200 - ); - --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); - --system-button-group-size-l-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); - --system-button-group-size-xl-spacing-horizontal: var( - --spectrum-spacing-300 - ); - --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-m-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-m-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-s-spacing-horizontal: var(--spectrum-spacing-200); + --system-button-group-size-s-spacing-vertical: var(--spectrum-spacing-200); + --system-button-group-size-l-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-l-spacing-vertical: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-horizontal: var(--spectrum-spacing-300); + --system-button-group-size-xl-spacing-vertical: var(--spectrum-spacing-300); } :host, :root { - --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --system-breadcrumbs-block-size-compact: var( - --spectrum-breadcrumbs-height-compact - ); - --system-breadcrumbs-block-size-multiline: var( - --spectrum-breadcrumbs-height-multiline - ); - --system-breadcrumbs-line-height: var(--spectrum-line-height-100); - --system-breadcrumbs-font-size: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); - --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); - --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --system-breadcrumbs-font-family-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --system-breadcrumbs-font-family-compact: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-compact-current: var( - --spectrum-font-size-100 - ); - --system-breadcrumbs-font-family-compact-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-compact-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --system-breadcrumbs-font-family-multiline: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline: var( - --spectrum-regular-font-weight - ); - --system-breadcrumbs-font-size-multiline-current: var( - --spectrum-font-size-300 - ); - --system-breadcrumbs-font-family-multiline-current: var( - --spectrum-sans-font-family-stack - ); - --system-breadcrumbs-font-weight-multiline-current: var( - --spectrum-bold-font-weight - ); - --system-breadcrumbs-text-decoration-thickness: var( - --spectrum-text-underline-thickness - ); - --system-breadcrumbs-text-decoration-gap: var( - --spectrum-text-underline-gap - ); - --system-breadcrumbs-separator-spacing-inline: var( - --spectrum-text-to-visual-100 - ); - --system-breadcrumbs-text-spacing-block-start: var( - --spectrum-breadcrumbs-top-to-text - ); - --system-breadcrumbs-text-spacing-block-end: var( - --spectrum-breadcrumbs-bottom-to-text - ); - --system-breadcrumbs-icon-spacing-block: var( - --spectrum-breadcrumbs-top-to-separator-icon - ); - --system-breadcrumbs-text-spacing-block-start-compact: var( - --spectrum-breadcrumbs-top-to-text-compact - ); - --system-breadcrumbs-text-spacing-block-end-compact: var( - --spectrum-breadcrumbs-bottom-to-text-compact - ); - --system-breadcrumbs-icon-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-separator-icon-compact - ); - --system-breadcrumbs-text-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-end-multiline: var( - --spectrum-breadcrumbs-bottom-to-text-multiline - ); - --system-breadcrumbs-text-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-top-text-to-bottom-text - ); - --system-breadcrumbs-icon-spacing-block-start-multiline: var( - --spectrum-breadcrumbs-top-to-separator-icon-multiline - ); - --system-breadcrumbs-icon-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline - ); - --system-breadcrumbs-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-text - ); - --system-breadcrumbs-inline-end: var( - --spectrum-breadcrumbs-end-edge-to-text - ); - --system-breadcrumbs-action-button-spacing-inline: var( - --spectrum-breadcrumbs-truncated-menu-to-separator-icon - ); - --system-breadcrumbs-action-button-spacing-block: var( - --spectrum-breadcrumbs-top-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-compact: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-inline-start: var( - --spectrum-breadcrumbs-start-edge-to-truncated-menu - ); - --system-breadcrumbs-action-button-spacing-block-multiline: var( - --spectrum-breadcrumbs-top-to-truncated-menu-compact - ); - --system-breadcrumbs-action-button-spacing-block-between-multiline: var( - --spectrum-breadcrumbs-truncated-menu-to-bottom-text - ); - --system-breadcrumbs-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-breadcrumbs-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-breadcrumbs-item-link-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-breadcrumbs-text-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-text-color-current: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-separator-color: var( - --spectrum-neutral-content-color-default - ); - --system-breadcrumbs-action-button-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-breadcrumbs-action-button-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-breadcrumbs-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); + --system-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); + --system-breadcrumbs-block-size-compact: var( + --spectrum-breadcrumbs-height-compact + ); + --system-breadcrumbs-block-size-multiline: var( + --spectrum-breadcrumbs-height-multiline + ); + --system-breadcrumbs-line-height: var(--spectrum-line-height-100); + --system-breadcrumbs-font-size: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); + --system-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --system-breadcrumbs-font-family-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); + --system-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); + --system-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); + --system-breadcrumbs-font-family-compact-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-compact-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); + --system-breadcrumbs-font-family-multiline: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline: var( + --spectrum-regular-font-weight + ); + --system-breadcrumbs-font-size-multiline-current: var( + --spectrum-font-size-300 + ); + --system-breadcrumbs-font-family-multiline-current: var( + --spectrum-sans-font-family-stack + ); + --system-breadcrumbs-font-weight-multiline-current: var( + --spectrum-bold-font-weight + ); + --system-breadcrumbs-text-decoration-thickness: var( + --spectrum-text-underline-thickness + ); + --system-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); + --system-breadcrumbs-separator-spacing-inline: var( + --spectrum-text-to-visual-100 + ); + --system-breadcrumbs-text-spacing-block-start: var( + --spectrum-breadcrumbs-top-to-text + ); + --system-breadcrumbs-text-spacing-block-end: var( + --spectrum-breadcrumbs-bottom-to-text + ); + --system-breadcrumbs-icon-spacing-block: var( + --spectrum-breadcrumbs-top-to-separator-icon + ); + --system-breadcrumbs-text-spacing-block-start-compact: var( + --spectrum-breadcrumbs-top-to-text-compact + ); + --system-breadcrumbs-text-spacing-block-end-compact: var( + --spectrum-breadcrumbs-bottom-to-text-compact + ); + --system-breadcrumbs-icon-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-separator-icon-compact + ); + --system-breadcrumbs-text-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-end-multiline: var( + --spectrum-breadcrumbs-bottom-to-text-multiline + ); + --system-breadcrumbs-text-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-top-text-to-bottom-text + ); + --system-breadcrumbs-icon-spacing-block-start-multiline: var( + --spectrum-breadcrumbs-top-to-separator-icon-multiline + ); + --system-breadcrumbs-icon-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline + ); + --system-breadcrumbs-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-text + ); + --system-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + --system-breadcrumbs-action-button-spacing-inline: var( + --spectrum-breadcrumbs-truncated-menu-to-separator-icon + ); + --system-breadcrumbs-action-button-spacing-block: var( + --spectrum-breadcrumbs-top-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-compact: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-inline-start: var( + --spectrum-breadcrumbs-start-edge-to-truncated-menu + ); + --system-breadcrumbs-action-button-spacing-block-multiline: var( + --spectrum-breadcrumbs-top-to-truncated-menu-compact + ); + --system-breadcrumbs-action-button-spacing-block-between-multiline: var( + --spectrum-breadcrumbs-truncated-menu-to-bottom-text + ); + --system-breadcrumbs-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-breadcrumbs-item-link-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-breadcrumbs-text-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-text-color-current: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-separator-color: var( + --spectrum-neutral-content-color-default + ); + --system-breadcrumbs-action-button-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-breadcrumbs-action-button-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-breadcrumbs-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); } :host, :root { - --system-checkbox-control-color-default: var(--spectrum-gray-600); - --system-checkbox-control-color-hover: var(--spectrum-gray-700); - --system-checkbox-control-color-down: var(--spectrum-gray-800); - --system-checkbox-control-color-focus: var(--spectrum-gray-700); - --system-checkbox-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-checkbox-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-checkbox-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-checkbox-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-checkbox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-checkbox-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-control-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-checkbox-checkmark-color: var(--spectrum-gray-75); - --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); - --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); - --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --system-checkbox-emphasized-color-default: var( - --spectrum-accent-color-900 - ); - --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); - --system-checkbox-control-selected-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-checkbox-control-selected-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-checkbox-control-selected-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-checkbox-control-selected-color-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-checkbox-line-height: var(--spectrum-line-height-100); - --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-checkbox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-checkbox-border-width: var(--spectrum-border-width-200); - --system-checkbox-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-checkbox-font-size: var(--spectrum-font-size-100); - --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); - --system-checkbox-height: var(--spectrum-component-height-100); - --system-checkbox-size-m-height: var(--spectrum-component-height-100); - --system-checkbox-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-size-m-control-size: var( - --spectrum-checkbox-control-size-medium - ); - --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --system-checkbox-size-m-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); - --system-checkbox-size-m-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); - --system-checkbox-size-s-height: var(--spectrum-component-height-75); - --system-checkbox-size-s-control-size: var( - --spectrum-checkbox-control-size-small - ); - --system-checkbox-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-checkbox-size-s-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); - --system-checkbox-size-l-height: var(--spectrum-component-height-200); - --system-checkbox-size-l-control-size: var( - --spectrum-checkbox-control-size-large - ); - --system-checkbox-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-checkbox-size-l-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); - --system-checkbox-size-xl-height: var(--spectrum-component-height-300); - --system-checkbox-size-xl-control-size: var( - --spectrum-checkbox-control-size-extra-large - ); - --system-checkbox-size-xl-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-checkbox-size-xl-text-to-control: var( - --spectrum-text-to-control-300 - ); + --system-checkbox-control-color-default: var(--spectrum-gray-600); + --system-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-checkbox-control-color-down: var(--spectrum-gray-800); + --system-checkbox-control-color-focus: var(--spectrum-gray-700); + --system-checkbox-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-checkbox-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-checkbox-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-checkbox-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-checkbox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-checkbox-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-control-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-checkbox-checkmark-color: var(--spectrum-gray-75); + --system-checkbox-invalid-color-default: var(--spectrum-negative-color-900); + --system-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); + --system-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --system-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); + --system-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); + --system-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); + --system-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); + --system-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --system-checkbox-control-selected-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-checkbox-control-selected-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-checkbox-control-selected-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-checkbox-control-selected-color-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-checkbox-line-height: var(--spectrum-line-height-100); + --system-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --system-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-checkbox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-checkbox-border-width: var(--spectrum-border-width-200); + --system-checkbox-animation-duration: var(--spectrum-animation-duration-100); + --system-checkbox-font-size: var(--spectrum-font-size-100); + --system-checkbox-size-m-font-size: var(--spectrum-font-size-100); + --system-checkbox-height: var(--spectrum-component-height-100); + --system-checkbox-size-m-height: var(--spectrum-component-height-100); + --system-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --system-checkbox-size-m-control-size: var( + --spectrum-checkbox-control-size-medium + ); + --system-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --system-checkbox-size-m-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-checkbox-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-checkbox-size-s-font-size: var(--spectrum-font-size-75); + --system-checkbox-size-s-height: var(--spectrum-component-height-75); + --system-checkbox-size-s-control-size: var( + --spectrum-checkbox-control-size-small + ); + --system-checkbox-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-checkbox-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-checkbox-size-l-font-size: var(--spectrum-font-size-200); + --system-checkbox-size-l-height: var(--spectrum-component-height-200); + --system-checkbox-size-l-control-size: var( + --spectrum-checkbox-control-size-large + ); + --system-checkbox-size-l-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-checkbox-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-checkbox-size-xl-font-size: var(--spectrum-font-size-300); + --system-checkbox-size-xl-height: var(--spectrum-component-height-300); + --system-checkbox-size-xl-control-size: var( + --spectrum-checkbox-control-size-extra-large + ); + --system-checkbox-size-xl-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-checkbox-size-xl-text-to-control: var( + --spectrum-text-to-control-300 + ); } :host, :root { - --system-card-background-color: var(--spectrum-background-layer-2-color); - --system-card-body-spacing: var(--spectrum-spacing-400); - --system-card-title-padding-top: var(--spectrum-spacing-300); - --system-card-title-padding-right: var(--spectrum-spacing-400); - --system-card-content-margin-top: var(--spectrum-spacing-100); - --system-card-content-margin-bottom: var(--spectrum-spacing-300); - --system-card-footer-padding-top: var(--spectrum-spacing-100); - --system-card-subtitle-padding-right: var(--spectrum-spacing-100); - --system-card-border-width: var(--spectrum-border-width-100); - --system-card-corner-radius: var(--spectrum-corner-radius-100); - --system-card-border-color: var(--spectrum-gray-200); - --system-card-border-color-hover: var(--spectrum-gray-300); - --system-card-border-color-selected: var(--spectrum-blue-700); - --system-card-divider-color: var(--spectrum-gray-300); - --system-card-title-font-family: var(--spectrum-sans-font-family-stack); - --system-card-title-font-size: var(--spectrum-heading-size-xxs); - --system-card-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-card-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-card-title-line-height: var(--spectrum-heading-line-height); - --system-card-title-font-color: var(--spectrum-heading-color); - --system-card-body-font-family: var(--spectrum-sans-font-family-stack); - --system-card-body-font-size: var(--spectrum-body-size-s); - --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); - --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); - --system-card-body-line-height: var(--spectrum-body-line-height); - --system-card-body-font-color: var(--spectrum-body-color); - --system-card-actions-spacing: var(--spectrum-spacing-300); - --system-card-actions-size: var(--spectrum-card-selection-background-size); - --system-card-actions-border-radius: var(--spectrum-corner-radius-100); - --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); - --system-card-actions-background-color-opacity: var( - --spectrum-card-selection-background-color-opacity - ); - --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); - --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); - --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-card-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-card-selected-background-opacity: 0.1; - --system-card-preview-border-width-selected: var( - --spectrum-border-width-100 - ); - --system-card-preview-background-color: var( - --spectrum-background-base-color - ); - --system-card-preview-background-color-hover: var(--spectrum-gray-300); - --system-card-horizontal-body-padding: var(--spectrum-spacing-300); - --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); - --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); - --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-background-color-quiet: var(--spectrum-background-base-color); + --system-card-background-color: var(--spectrum-background-layer-2-color); + --system-card-body-spacing: var(--spectrum-spacing-400); + --system-card-title-padding-top: var(--spectrum-spacing-300); + --system-card-title-padding-right: var(--spectrum-spacing-400); + --system-card-content-margin-top: var(--spectrum-spacing-100); + --system-card-content-margin-bottom: var(--spectrum-spacing-300); + --system-card-footer-padding-top: var(--spectrum-spacing-100); + --system-card-subtitle-padding-right: var(--spectrum-spacing-100); + --system-card-border-width: var(--spectrum-border-width-100); + --system-card-corner-radius: var(--spectrum-corner-radius-100); + --system-card-border-color: var(--spectrum-gray-200); + --system-card-border-color-hover: var(--spectrum-gray-300); + --system-card-border-color-selected: var(--spectrum-blue-700); + --system-card-divider-color: var(--spectrum-gray-300); + --system-card-title-font-family: var(--spectrum-sans-font-family-stack); + --system-card-title-font-size: var(--spectrum-heading-size-xxs); + --system-card-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-card-title-font-style: var(--spectrum-heading-sans-serif-font-style); + --system-card-title-line-height: var(--spectrum-heading-line-height); + --system-card-title-font-color: var(--spectrum-heading-color); + --system-card-body-font-family: var(--spectrum-sans-font-family-stack); + --system-card-body-font-size: var(--spectrum-body-size-s); + --system-card-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + --system-card-body-font-style: var(--spectrum-body-sans-serif-font-style); + --system-card-body-line-height: var(--spectrum-body-line-height); + --system-card-body-font-color: var(--spectrum-body-color); + --system-card-actions-spacing: var(--spectrum-spacing-300); + --system-card-actions-size: var(--spectrum-card-selection-background-size); + --system-card-actions-border-radius: var(--spectrum-corner-radius-100); + --system-card-actions-background-color-rgb: var(--spectrum-gray-100-rgb); + --system-card-actions-background-color-opacity: var( + --spectrum-card-selection-background-color-opacity + ); + --system-card-actions-drop-shadow-color: var(--spectrum-drop-shadow-color); + --system-card-actions-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-card-actions-drop-shadow-y: var(--spectrum-drop-shadow-y); + --system-card-actions-drop-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-card-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-card-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-card-selected-background-opacity: 0.1; + --system-card-preview-border-width-selected: var(--spectrum-border-width-100); + --system-card-preview-background-color: var(--spectrum-background-base-color); + --system-card-preview-background-color-hover: var(--spectrum-gray-300); + --system-card-horizontal-body-padding: var(--spectrum-spacing-300); + --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); + --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); + --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); + --system-card-background-color-quiet: var(--spectrum-background-base-color); } :host, :root { - --system-clear-button-background-color: transparent; - --system-clear-button-background-color-hover: transparent; - --system-clear-button-background-color-down: transparent; - --system-clear-button-background-color-key-focus: transparent; - --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); - --system-clear-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-clear-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-clear-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-clear-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-clear-button-height: var(--spectrum-component-height-100); - --system-clear-button-size-m-height: var(--spectrum-component-height-100); - --system-clear-button-width: var(--spectrum-component-height-100); - --system-clear-button-size-m-width: var(--spectrum-component-height-100); - --system-clear-button-size-s-height: var(--spectrum-component-height-75); - --system-clear-button-size-s-width: var(--spectrum-component-height-75); - --system-clear-button-size-l-height: var(--spectrum-component-height-200); - --system-clear-button-size-l-width: var(--spectrum-component-height-200); - --system-clear-button-size-xl-height: var(--spectrum-component-height-300); - --system-clear-button-size-xl-width: var(--spectrum-component-height-300); - --system-clear-button-quiet-background-color: transparent; - --system-clear-button-quiet-background-color-hover: transparent; - --system-clear-button-quiet-background-color-down: transparent; - --system-clear-button-quiet-background-color-key-focus: transparent; - --system-clear-button-over-background-icon-color: var(--spectrum-white); - --system-clear-button-over-background-icon-color-hover: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-down: var( - --spectrum-white - ); - --system-clear-button-over-background-icon-color-key-focus: var( - --spectrum-white - ); - --system-clear-button-over-background-background-color: transparent; - --system-clear-button-over-background-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-over-background-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-clear-button-over-background-background-color-key-focus: var( - --spectrum-transparent-white-300 - ); - --system-clear-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-clear-button-disabled-background-color: transparent; + --system-clear-button-background-color: transparent; + --system-clear-button-background-color-hover: transparent; + --system-clear-button-background-color-down: transparent; + --system-clear-button-background-color-key-focus: transparent; + --system-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-clear-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-clear-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-clear-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-clear-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-clear-button-height: var(--spectrum-component-height-100); + --system-clear-button-size-m-height: var(--spectrum-component-height-100); + --system-clear-button-width: var(--spectrum-component-height-100); + --system-clear-button-size-m-width: var(--spectrum-component-height-100); + --system-clear-button-size-s-height: var(--spectrum-component-height-75); + --system-clear-button-size-s-width: var(--spectrum-component-height-75); + --system-clear-button-size-l-height: var(--spectrum-component-height-200); + --system-clear-button-size-l-width: var(--spectrum-component-height-200); + --system-clear-button-size-xl-height: var(--spectrum-component-height-300); + --system-clear-button-size-xl-width: var(--spectrum-component-height-300); + --system-clear-button-quiet-background-color: transparent; + --system-clear-button-quiet-background-color-hover: transparent; + --system-clear-button-quiet-background-color-down: transparent; + --system-clear-button-quiet-background-color-key-focus: transparent; + --system-clear-button-over-background-icon-color: var(--spectrum-white); + --system-clear-button-over-background-icon-color-hover: var(--spectrum-white); + --system-clear-button-over-background-icon-color-down: var(--spectrum-white); + --system-clear-button-over-background-icon-color-key-focus: var( + --spectrum-white + ); + --system-clear-button-over-background-background-color: transparent; + --system-clear-button-over-background-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-clear-button-over-background-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-clear-button-over-background-background-color-key-focus: var( + --spectrum-transparent-white-300 + ); + --system-clear-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-hover: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-icon-color-down: var( + --spectrum-disabled-content-color + ); + --system-clear-button-disabled-background-color: transparent; } :host, :root { - --system-close-button-background-color-default: transparent; - --system-close-button-background-color-hover: var(--spectrum-gray-200); - --system-close-button-background-color-down: var(--spectrum-gray-300); - --system-close-button-background-color-focus: var(--spectrum-gray-200); - --system-close-button-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-close-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-close-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-close-button-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-close-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-close-button-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-close-button-focus-indicator-gap: var( - --spectrum-focus-indicator-gap - ); - --system-close-button-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-close-button-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-close-button-static-white-static-background-color-default: transparent; - --system-close-button-static-white-static-background-color-hover: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-static-background-color-down: var( - --spectrum-transparent-white-400 - ); - --system-close-button-static-white-static-background-color-focus: var( - --spectrum-transparent-white-300 - ); - --system-close-button-static-white-icon-color-default: var( - --spectrum-white - ); - --system-close-button-static-white-icon-color-disabled: var( - --spectrum-disabled-static-white-content-color - ); - --system-close-button-static-white-focus-indicator-color: var( - --spectrum-static-white-focus-indicator-color - ); - --system-close-button-static-black-static-background-color-default: transparent; - --system-close-button-static-black-static-background-color-hover: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-static-background-color-down: var( - --spectrum-transparent-black-400 - ); - --system-close-button-static-black-static-background-color-focus: var( - --spectrum-transparent-black-300 - ); - --system-close-button-static-black-icon-color-default: var( - --spectrum-black - ); - --system-close-button-static-black-icon-color-disabled: var( - --spectrum-disabled-static-black-content-color - ); - --system-close-button-static-black-focus-indicator-color: var( - --spectrum-static-black-focus-indicator-color - ); - --system-close-button-size: var(--spectrum-component-height-100); - --system-close-button-size-m-size: var(--spectrum-component-height-100); - --system-close-button-size-s-size: var(--spectrum-component-height-75); - --system-close-button-size-l-size: var(--spectrum-component-height-200); - --system-close-button-size-xl-size: var(--spectrum-component-height-300); + --system-close-button-background-color-default: transparent; + --system-close-button-background-color-hover: var(--spectrum-gray-200); + --system-close-button-background-color-down: var(--spectrum-gray-300); + --system-close-button-background-color-focus: var(--spectrum-gray-200); + --system-close-button-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-close-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-close-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-close-button-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-close-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-close-button-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-close-button-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --system-close-button-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-close-button-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-close-button-static-white-static-background-color-default: transparent; + --system-close-button-static-white-static-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-static-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-close-button-static-white-static-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-close-button-static-white-icon-color-default: var(--spectrum-white); + --system-close-button-static-white-icon-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-close-button-static-white-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-close-button-static-black-static-background-color-default: transparent; + --system-close-button-static-black-static-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-static-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-close-button-static-black-static-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-close-button-static-black-icon-color-default: var(--spectrum-black); + --system-close-button-static-black-icon-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-close-button-static-black-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-close-button-size: var(--spectrum-component-height-100); + --system-close-button-size-m-size: var(--spectrum-component-height-100); + --system-close-button-size-s-size: var(--spectrum-component-height-75); + --system-close-button-size-l-size: var(--spectrum-component-height-200); + --system-close-button-size-xl-size: var(--spectrum-component-height-300); } :host, :root { - --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); - --system-coach-indicator-min-inline-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-min-block-size: calc( - var(--spectrum-coach-indicator-ring-diameter) * 3 - ); - --system-coach-indicator-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --system-coach-indicator-block-size: var( - --system-coach-indicator-min-block-size - ); - --system-coach-indicator-ring-inline-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-block-size: var( - --spectrum-coach-indicator-ring-diameter - ); - --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --system-coach-indicator-top: calc( - var(--system-coach-indicator-block-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-left: calc( - var(--system-coach-indicator-inline-size) / 3 - - var(--system-coach-indicator-ring-border-size) - ); - --system-coach-indicator-coach-animation-indicator-ring-duration: var( - --spectrum-animation-duration-6000 - ); - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; - --system-coach-indicator-animation-name: pulse; - --system-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --system-coach-indicator-animation-keyframe-0-scale: 1; - --system-coach-indicator-animation-keyframe-0-opacity: 0; - --system-coach-indicator-animation-keyframe-50-scale: 1.5; - --system-coach-indicator-animation-keyframe-50-opacity: 1; - --system-coach-indicator-animation-keyframe-100-scale: 2; - --system-coach-indicator-animation-keyframe-100-opacity: 0; - --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; - --system-coach-indicator-quiet-quiet-ring-diameter-size: var( - --spectrum-coach-indicator-quiet-ring-diameter - ); - --system-coach-indicator-quiet-animation-name: pulse-quiet; + --system-coach-indicator-ring-border-size: var(--spectrum-border-width-200); + --system-coach-indicator-min-inline-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-min-block-size: calc( + var(--spectrum-coach-indicator-ring-diameter) * 3 + ); + --system-coach-indicator-inline-size: var( + --system-coach-indicator-min-inline-size + ); + --system-coach-indicator-block-size: var( + --system-coach-indicator-min-block-size + ); + --system-coach-indicator-ring-inline-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-block-size: var( + --spectrum-coach-indicator-ring-diameter + ); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --system-coach-indicator-top: calc( + var(--system-coach-indicator-block-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-left: calc( + var(--system-coach-indicator-inline-size) / 3 - + var(--system-coach-indicator-ring-border-size) + ); + --system-coach-indicator-coach-animation-indicator-ring-duration: var( + --spectrum-animation-duration-6000 + ); + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5; + --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66; + --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1; + --system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33; + --system-coach-indicator-animation-name: pulse; + --system-coach-indicator-inner-animation-delay-multiple: var( + --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple + ); + --system-coach-indicator-animation-keyframe-0-scale: 1; + --system-coach-indicator-animation-keyframe-0-opacity: 0; + --system-coach-indicator-animation-keyframe-50-scale: 1.5; + --system-coach-indicator-animation-keyframe-50-opacity: 1; + --system-coach-indicator-animation-keyframe-100-scale: 2; + --system-coach-indicator-animation-keyframe-100-opacity: 0; + --system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + --system-coach-indicator-quiet-quiet-ring-diameter-size: var( + --spectrum-coach-indicator-quiet-ring-diameter + ); + --system-coach-indicator-quiet-animation-name: pulse-quiet; } :host, :root { - --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); - --system-coach-mark-width: var(--spectrum-coach-mark-width); - --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); - --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); - --system-coach-mark-media-min-height: var( - --spectrum-coach-mark-media-minimum-height - ); - --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); - --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); - --system-coach-mark-header-to-body: var(--spectrum-spacing-200); - --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); - --system-coach-mark-title-color: var(--spectrum-heading-color); - --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-title-font-style: var( - --spectrum-heading-serif-font-style - ); - --system-coach-mark-title-text-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); - --system-coach-mark-title-text-line-height: var( - --spectrum-heading-line-height - ); - --system-coach-mark-content-font-color: var(--spectrum-body-color); - --system-coach-mark-content-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-content-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-content-line-height: var(--spectrum-body-line-height); - --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); - --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); - --system-coach-mark-step-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); - --system-coach-mark-step-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-coach-mark-step-line-height: var(--spectrum-body-line-height); - --system-coach-mark-step-font-size: var( - --spectrum-coach-mark-pagination-body-size - ); - --system-coach-mark-step-to-bottom: var( - --spectrum-coach-mark-pagination-text-to-bottom-edge - ); - --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); - --system-coach-mark-popover-corner-radius: var( - --spectrum-corner-radius-100 - ); - --system-coach-mark-buttongroup-spacing-horizontal: var( - --spectrum-spacing-100 - ); + --system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width); + --system-coach-mark-width: var(--spectrum-coach-mark-width); + --system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width); + --system-coach-mark-media-height: var(--spectrum-coach-mark-media-height); + --system-coach-mark-media-min-height: var( + --spectrum-coach-mark-media-minimum-height + ); + --system-coach-mark-padding: var(--spectrum-coach-mark-edge-to-content); + --system-coach-mark-heading-to-action-button: var(--spectrum-spacing-300); + --system-coach-mark-header-to-body: var(--spectrum-spacing-200); + --system-coach-mark-body-to-footer: var(--spectrum-spacing-300); + --system-coach-mark-title-color: var(--spectrum-heading-color); + --system-coach-mark-title-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-title-font-style: var( + --spectrum-heading-serif-font-style + ); + --system-coach-mark-title-text-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-coach-mark-title-font-size: var(--spectrum-coach-mark-title-size); + --system-coach-mark-title-text-line-height: var( + --spectrum-heading-line-height + ); + --system-coach-mark-content-font-color: var(--spectrum-body-color); + --system-coach-mark-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-content-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-content-line-height: var(--spectrum-body-line-height); + --system-coach-mark-content-font-size: var(--spectrum-coach-mark-body-size); + --system-coach-mark-step-color: var(--spectrum-coach-mark-pagination-color); + --system-coach-mark-step-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-coach-mark-step-font-family: var(--spectrum-sans-serif-font); + --system-coach-mark-step-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-coach-mark-step-line-height: var(--spectrum-body-line-height); + --system-coach-mark-step-font-size: var( + --spectrum-coach-mark-pagination-body-size + ); + --system-coach-mark-step-to-bottom: var( + --spectrum-coach-mark-pagination-text-to-bottom-edge + ); + --system-coach-mark-popover-border-width: var(--spectrum-border-width-100); + --system-coach-mark-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-coach-mark-buttongroup-spacing-horizontal: var( + --spectrum-spacing-100 + ); } :host, :root { - --system-color-area-border-radius: var( - --spectrum-color-area-border-rounding - ); - --system-color-area-border-color-rgb: 0, 0, 0; - --system-color-area-border-color-opacity: 0.1; - --system-color-area-border-color: rgba( - var(--system-color-area-border-color-rgb), - var(--system-color-area-border-color-opacity) - ); - --system-color-area-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-color-area-border-width: var(--spectrum-color-area-border-width); - --system-color-area-height: var(--spectrum-color-area-height); - --system-color-area-width: var(--spectrum-color-area-width); - --system-color-area-min-width: var(--spectrum-color-area-minimum-width); - --system-color-area-min-height: var(--spectrum-color-area-minimum-height); + --system-color-area-border-radius: var(--spectrum-color-area-border-rounding); + --system-color-area-border-color-rgb: 0, 0, 0; + --system-color-area-border-color-opacity: 0.1; + --system-color-area-border-color: rgba( + var(--system-color-area-border-color-rgb), + var(--system-color-area-border-color-opacity) + ); + --system-color-area-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-color-area-border-width: var(--spectrum-color-area-border-width); + --system-color-area-height: var(--spectrum-color-area-height); + --system-color-area-width: var(--spectrum-color-area-width); + --system-color-area-min-width: var(--spectrum-color-area-minimum-width); + --system-color-area-min-height: var(--spectrum-color-area-minimum-height); } :host, :root { - --system-color-handle-size: var(--spectrum-color-handle-size); - --system-color-handle-focused-size: var( - --spectrum-color-handle-size-key-focus - ); - --system-color-handle-hitarea-size: var( - --spectrum-color-control-track-width - ); - --system-color-handle-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-color-handle-animation-easing: ease-in-out; - --system-color-handle-outer-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-outer-border-opacity) - ); - --system-color-handle-outer-border-width: var( - --spectrum-color-handle-outer-border-width - ); - --system-color-handle-inner-border-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-color-handle-inner-border-opacity) - ); - --system-color-handle-inner-border-width: var( - --spectrum-color-handle-inner-border-width - ); - --system-color-handle-border-width: var( - --spectrum-color-handle-border-width - ); - --system-color-handle-border-color: var(--spectrum-white); - --system-color-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-color-handle-fill-color-disabled: var( - --spectrum-disabled-background-color - ); + --system-color-handle-size: var(--spectrum-color-handle-size); + --system-color-handle-focused-size: var( + --spectrum-color-handle-size-key-focus + ); + --system-color-handle-hitarea-size: var(--spectrum-color-control-track-width); + --system-color-handle-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-color-handle-animation-easing: ease-in-out; + --system-color-handle-outer-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-outer-border-opacity) + ); + --system-color-handle-outer-border-width: var( + --spectrum-color-handle-outer-border-width + ); + --system-color-handle-inner-border-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-color-handle-inner-border-opacity) + ); + --system-color-handle-inner-border-width: var( + --spectrum-color-handle-inner-border-width + ); + --system-color-handle-border-width: var(--spectrum-color-handle-border-width); + --system-color-handle-border-color: var(--spectrum-white); + --system-color-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-color-handle-fill-color-disabled: var( + --spectrum-disabled-background-color + ); } :host, :root { - --system-color-loupe-width: var(--spectrum-color-loupe-width); - --system-color-loupe-height: var(--spectrum-color-loupe-height); - --system-color-loupe-offset: var( - --spectrum-color-loupe-bottom-to-color-handle - ); - --system-color-loupe-animation-distance: 8px; - --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); - --system-color-loupe-drop-shadow-y: var( - --spectrum-color-loupe-drop-shadow-y - ); - --system-color-loupe-drop-shadow-blur: var( - --spectrum-color-loupe-drop-shadow-blur - ); - --system-color-loupe-drop-shadow-color: var( - --spectrum-color-loupe-drop-shadow-color - ); - --system-color-loupe-outer-border-width: var( - --spectrum-color-loupe-outer-border-width - ); - --system-color-loupe-inner-border-width: var( - --spectrum-color-loupe-inner-border-width - ); - --system-color-loupe-outer-border-color: var( - --spectrum-color-loupe-outer-border - ); - --system-color-loupe-inner-border-color: var( - --spectrum-color-loupe-inner-border - ); - --system-color-loupe-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-loupe-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); + --system-color-loupe-width: var(--spectrum-color-loupe-width); + --system-color-loupe-height: var(--spectrum-color-loupe-height); + --system-color-loupe-offset: var( + --spectrum-color-loupe-bottom-to-color-handle + ); + --system-color-loupe-animation-distance: 8px; + --system-color-loupe-drop-shadow-x: var(--spectrum-drop-shadow-x); + --system-color-loupe-drop-shadow-y: var(--spectrum-color-loupe-drop-shadow-y); + --system-color-loupe-drop-shadow-blur: var( + --spectrum-color-loupe-drop-shadow-blur + ); + --system-color-loupe-drop-shadow-color: var( + --spectrum-color-loupe-drop-shadow-color + ); + --system-color-loupe-outer-border-width: var( + --spectrum-color-loupe-outer-border-width + ); + --system-color-loupe-inner-border-width: var( + --spectrum-color-loupe-inner-border-width + ); + --system-color-loupe-outer-border-color: var( + --spectrum-color-loupe-outer-border + ); + --system-color-loupe-inner-border-color: var( + --spectrum-color-loupe-inner-border + ); + --system-color-loupe-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-loupe-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); } :host, :root { - --system-color-slider-handle-margin-block: var( - --spectrum-component-top-to-text-75 - ); - --system-color-slider-border-color-rgba: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-color-slider-border-opacity) - ); - --system-color-slider-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-color-slider-checkerboard-dark-color: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-color-slider-checkerboard-light-color: var( - --spectrum-opacity-checkerboard-square-light - ); + --system-color-slider-handle-margin-block: var( + --spectrum-component-top-to-text-75 + ); + --system-color-slider-border-color-rgba: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-color-slider-border-opacity) + ); + --system-color-slider-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-color-slider-checkerboard-dark-color: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-color-slider-checkerboard-light-color: var( + --spectrum-opacity-checkerboard-square-light + ); } :host, :root { - --system-color-wheel-width: var(--spectrum-color-wheel-width); - --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); - --system-color-wheel-height: var(--spectrum-color-wheel-width); - --system-color-wheel-border-color: var(--spectrum-transparent-black-200); - --system-color-wheel-border-width: var(--spectrum-border-width-100); - --system-color-wheel-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-color-wheel-track-width: var(--spectrum-color-control-track-width); - --system-color-wheel-colorarea-margin: var( - --spectrum-color-wheel-color-area-margin - ); - --system-color-wheel-colorhandle-position: calc( - var(--system-color-wheel-width) / 2 - - var(--system-color-wheel-track-width) / 2 - ); + --system-color-wheel-width: var(--spectrum-color-wheel-width); + --system-color-wheel-min-width: var(--spectrum-color-wheel-minimum-width); + --system-color-wheel-height: var(--spectrum-color-wheel-width); + --system-color-wheel-border-color: var(--spectrum-transparent-black-200); + --system-color-wheel-border-width: var(--spectrum-border-width-100); + --system-color-wheel-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-color-wheel-track-width: var(--spectrum-color-control-track-width); + --system-color-wheel-colorarea-margin: var( + --spectrum-color-wheel-color-area-margin + ); + --system-color-wheel-colorhandle-position: calc( + var(--system-color-wheel-width) / 2 - + var(--system-color-wheel-track-width) / 2 + ); } :host, :root { - --system-combobox-border-color-default: var(--spectrum-gray-500); - --system-combobox-border-color-hover: var(--spectrum-gray-600); - --system-combobox-border-color-focus: var(--spectrum-gray-500); - --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --system-combobox-border-color-key-focus: var(--spectrum-gray-600); - --system-combobox-inline-size: var(--spectrum-field-width); - --system-combobox-minimum-width-multiplier: var( - --spectrum-combo-box-minimum-width-multiplier - ); - --system-combobox-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-combobox-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-combobox-border-radius: var(--spectrum-corner-radius-100); - --system-combobox-border-width: var(--spectrum-border-width-100); - --system-combobox-spacing-label-to: var( - --spectrum-field-label-to-component - ); - --system-combobox-font-style: var(--spectrum-default-font-style); - --system-combobox-line-height: var(--spectrum-line-height-100); - --system-combobox-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-combobox-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-combobox-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-combobox-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-combobox-border-color-invalid-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-combobox-block-size: var(--spectrum-component-height-100); - --system-combobox-size-m-block-size: var(--spectrum-component-height-100); - --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-combobox-font-size: var(--spectrum-font-size-100); - --system-combobox-size-m-font-size: var(--spectrum-font-size-100); - --system-combobox-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-size-m-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-medium - ); - --system-combobox-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-combobox-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-size-m-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-combobox-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-size-m-spacing-edge-to-menu: var( - --spectrum-component-to-menu-medium - ); - --system-combobox-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-size-m-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-combobox-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-size-m-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-combobox-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-m-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-combobox-size-s-block-size: var(--spectrum-component-height-75); - --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-combobox-size-s-font-size: var(--spectrum-font-size-75); - --system-combobox-size-s-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-small - ); - --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-combobox-size-s-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-combobox-size-s-spacing-edge-to-menu: var( - --spectrum-component-to-menu-small - ); - --system-combobox-size-s-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-combobox-size-s-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-combobox-size-s-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-s-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-combobox-size-l-block-size: var(--spectrum-component-height-200); - --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-combobox-size-l-font-size: var(--spectrum-font-size-200); - --system-combobox-size-l-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-large - ); - --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-combobox-size-l-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-combobox-size-l-spacing-edge-to-menu: var( - --spectrum-component-to-menu-large - ); - --system-combobox-size-l-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-combobox-size-l-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-combobox-size-l-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-l-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); - --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); - --system-combobox-size-xl-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-combobox-size-xl-block-spacing-edge-to-alert: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-combobox-size-xl-spacing-edge-to-menu: var( - --spectrum-component-to-menu-extra-large - ); - --system-combobox-size-xl-spacing-block-start-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-combobox-size-xl-spacing-block-end-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-combobox-quiet-minimum-width-multiplier: var( - --spectrum-combo-box-quiet-minimum-width-multiplier - ); - --system-combobox-quiet-spacing-inline-icon-to-button: var( - --spectrum-combo-box-visual-to-field-button-quiet - ); - --system-combobox-quiet-spacing-inline-start-edge-to-text: var( - --spectrum-field-edge-to-text-quiet - ); - --system-combobox-quiet-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-m-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-combobox-quiet-size-s-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-combobox-quiet-size-l-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-combobox-quiet-size-xl-spacing-label-to: var( - --spectrum-field-label-to-component-quiet-extra-large - ); + --system-combobox-border-color-default: var(--spectrum-gray-500); + --system-combobox-border-color-hover: var(--spectrum-gray-600); + --system-combobox-border-color-focus: var(--spectrum-gray-500); + --system-combobox-border-color-focus-hover: var(--spectrum-gray-600); + --system-combobox-border-color-key-focus: var(--spectrum-gray-600); + --system-combobox-inline-size: var(--spectrum-field-width); + --system-combobox-minimum-width-multiplier: var( + --spectrum-combo-box-minimum-width-multiplier + ); + --system-combobox-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-combobox-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-combobox-border-radius: var(--spectrum-corner-radius-100); + --system-combobox-border-width: var(--spectrum-border-width-100); + --system-combobox-spacing-label-to: var(--spectrum-field-label-to-component); + --system-combobox-font-style: var(--spectrum-default-font-style); + --system-combobox-line-height: var(--spectrum-line-height-100); + --system-combobox-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-combobox-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-combobox-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-combobox-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-combobox-border-color-invalid-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-combobox-block-size: var(--spectrum-component-height-100); + --system-combobox-size-m-block-size: var(--spectrum-component-height-100); + --system-combobox-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-combobox-font-size: var(--spectrum-font-size-100); + --system-combobox-size-m-font-size: var(--spectrum-font-size-100); + --system-combobox-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-size-m-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-medium + ); + --system-combobox-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-size-m-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-combobox-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-size-m-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-combobox-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-size-m-spacing-edge-to-menu: var( + --spectrum-component-to-menu-medium + ); + --system-combobox-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-size-m-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-combobox-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-size-m-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-combobox-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-m-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-combobox-size-s-block-size: var(--spectrum-component-height-75); + --system-combobox-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-combobox-size-s-font-size: var(--spectrum-font-size-75); + --system-combobox-size-s-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-small + ); + --system-combobox-size-s-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-combobox-size-s-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-combobox-size-s-spacing-edge-to-menu: var( + --spectrum-component-to-menu-small + ); + --system-combobox-size-s-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-combobox-size-s-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-combobox-size-s-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-s-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-combobox-size-l-block-size: var(--spectrum-component-height-200); + --system-combobox-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-combobox-size-l-font-size: var(--spectrum-font-size-200); + --system-combobox-size-l-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-large + ); + --system-combobox-size-l-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-combobox-size-l-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-combobox-size-l-spacing-edge-to-menu: var( + --spectrum-component-to-menu-large + ); + --system-combobox-size-l-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-combobox-size-l-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-combobox-size-l-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-l-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-combobox-size-xl-block-size: var(--spectrum-component-height-300); + --system-combobox-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-combobox-size-xl-font-size: var(--spectrum-font-size-300); + --system-combobox-size-xl-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-combobox-size-xl-block-spacing-edge-to-alert: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-combobox-size-xl-spacing-edge-to-menu: var( + --spectrum-component-to-menu-extra-large + ); + --system-combobox-size-xl-spacing-block-start-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-combobox-size-xl-spacing-block-end-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-start-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-size-xl-spacing-inline-end-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-combobox-quiet-minimum-width-multiplier: var( + --spectrum-combo-box-quiet-minimum-width-multiplier + ); + --system-combobox-quiet-spacing-inline-icon-to-button: var( + --spectrum-combo-box-visual-to-field-button-quiet + ); + --system-combobox-quiet-spacing-inline-start-edge-to-text: var( + --spectrum-field-edge-to-text-quiet + ); + --system-combobox-quiet-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-m-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-combobox-quiet-size-s-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-combobox-quiet-size-l-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-combobox-quiet-size-xl-spacing-label-to: var( + --spectrum-field-label-to-component-quiet-extra-large + ); } :host, :root { - --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); - --system-contextual-help-link-spacing: var(--spectrum-spacing-300); - --system-contextual-help-heading-size: var( - --spectrum-contextual-help-title-size - ); - --system-contextual-help-heading-color: var(--spectrum-heading-color); - --system-contextual-help-body-color: var(--spectrum-body-color); + --system-contextual-help-padding: var(--spectrum-spacing-400); + --system-contextual-help-content-spacing: var(--spectrum-spacing-100); + --system-contextual-help-link-spacing: var(--spectrum-spacing-300); + --system-contextual-help-heading-size: var( + --spectrum-contextual-help-title-size + ); + --system-contextual-help-heading-color: var(--spectrum-heading-color); + --system-contextual-help-body-color: var(--spectrum-body-color); } :host, :root { - --system-dialog-fullscreen-header-text-size: 28px; - --system-dialog-min-inline-size: 288px; - --system-dialog-confirm-small-width: 400px; - --system-dialog-confirm-medium-width: 480px; - --system-dialog-confirm-large-width: 640px; - --system-dialog-confirm-divider-block-spacing-start: var( - --spectrum-spacing-300 - ); - --system-dialog-confirm-divider-block-spacing-end: var( - --spectrum-spacing-200 - ); - --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); - --system-dialog-confirm-description-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-confirm-title-text-line-height: var( - --spectrum-line-height-100 - ); - --system-dialog-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --system-dialog-confirm-description-margin: calc( - var(--spectrum-spacing-50) * -1 - ); - --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); - --system-dialog-confirm-gap-size: var( - --spectrum-component-pill-edge-to-text-100 - ); - --system-dialog-confirm-buttongroup-padding-top: var( - --spectrum-spacing-600 - ); - --system-dialog-confirm-close-button-size: var( - --spectrum-component-height-100 - ); - --system-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-component-bottom-to-text-300) - ); - --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); + --system-dialog-fullscreen-header-text-size: 28px; + --system-dialog-min-inline-size: 288px; + --system-dialog-confirm-small-width: 400px; + --system-dialog-confirm-medium-width: 480px; + --system-dialog-confirm-large-width: 640px; + --system-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 + ); + --system-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 + ); + --system-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --system-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --system-dialog-confirm-description-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-confirm-title-text-line-height: var( + --spectrum-line-height-100 + ); + --system-dialog-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --system-dialog-confirm-description-margin: calc( + var(--spectrum-spacing-50) * -1 + ); + --system-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-gap-size: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); + --system-dialog-confirm-close-button-size: var( + --spectrum-component-height-100 + ); + --system-dialog-confirm-close-button-padding: calc( + 26px - var(--spectrum-component-bottom-to-text-300) + ); + --system-dialog-confirm-divider-height: var(--spectrum-spacing-50); } :host, :root { - --system-divider-background-color-small: var(--spectrum-gray-300); - --system-divider-background-color-medium: var(--spectrum-gray-300); - --system-divider-background-color-large: var(--spectrum-gray-800); - --system-divider-background-color-small-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-medium-static-white: var( - --spectrum-transparent-white-300 - ); - --system-divider-background-color-large-static-white: var( - --spectrum-transparent-white-800 - ); - --system-divider-background-color-small-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-medium-static-black: var( - --spectrum-transparent-black-300 - ); - --system-divider-background-color-large-static-black: var( - --spectrum-transparent-black-800 - ); + --system-divider-background-color-small: var(--spectrum-gray-300); + --system-divider-background-color-medium: var(--spectrum-gray-300); + --system-divider-background-color-large: var(--spectrum-gray-800); + --system-divider-background-color-small-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-medium-static-white: var( + --spectrum-transparent-white-300 + ); + --system-divider-background-color-large-static-white: var( + --spectrum-transparent-white-800 + ); + --system-divider-background-color-small-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-medium-static-black: var( + --spectrum-transparent-black-300 + ); + --system-divider-background-color-large-static-black: var( + --spectrum-transparent-black-800 + ); } :host, :root { - --system-drop-zone-padding: var(--spectrum-spacing-400); - --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); - --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); - --system-drop-zone-border-width: var(--spectrum-border-width-200); - --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --system-drop-zone-border-color: var(--spectrum-gray-300); - --system-drop-zone-heading-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-heading-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-drop-zone-heading-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); - --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); - --system-drop-zone-heading-color: var(--spectrum-heading-color); - --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); - --system-drop-zone-body-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-drop-zone-body-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); - --system-drop-zone-body-line-height: var(--spectrum-body-line-height); - --system-drop-zone-body-color: var(--spectrum-body-color); - --system-drop-zone-background-color: var( - --spectrum-drop-zone-background-color-rgb - ); - --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); - --system-drop-zone-illustration-color-hover: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-height: var(--spectrum-component-height-300); - --system-drop-zone-content-max-width: var( - --spectrum-drop-zone-content-maximum-width - ); - --system-drop-zone-content-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-drop-zone-content-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-drop-zone-content-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-drop-zone-content-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); - --system-drop-zone-content-font-style: var(--spectrum-default-font-style); - --system-drop-zone-content-font-size: var(--spectrum-font-size-300); - --system-drop-zone-content-line-height: var(--spectrum-line-height-100); - --system-drop-zone-content-background-color: var( - --spectrum-accent-visual-color - ); - --system-drop-zone-content-color: var(--spectrum-white); - --system-drop-zone-heading-font-size-cjk: var( - --spectrum-drop-zone-cjk-title-size - ); + --system-drop-zone-padding: var(--spectrum-spacing-400); + --system-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + --system-drop-zone-heading-to-body: var(--spectrum-spacing-75); + --system-drop-zone-border-width: var(--spectrum-border-width-200); + --system-drop-zone-corner-radius: var(--spectrum-corner-radius-100); + --system-drop-zone-border-color: var(--spectrum-gray-300); + --system-drop-zone-heading-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-drop-zone-heading-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + --system-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + --system-drop-zone-heading-color: var(--spectrum-heading-color); + --system-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + --system-drop-zone-body-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-drop-zone-body-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + --system-drop-zone-body-line-height: var(--spectrum-body-line-height); + --system-drop-zone-body-color: var(--spectrum-body-color); + --system-drop-zone-background-color: var( + --spectrum-drop-zone-background-color-rgb + ); + --system-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + --system-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --system-drop-zone-illustration-color-hover: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-height: var(--spectrum-component-height-300); + --system-drop-zone-content-max-width: var( + --spectrum-drop-zone-content-maximum-width + ); + --system-drop-zone-content-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-drop-zone-content-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-drop-zone-content-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-drop-zone-content-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --system-drop-zone-content-font-style: var(--spectrum-default-font-style); + --system-drop-zone-content-font-size: var(--spectrum-font-size-300); + --system-drop-zone-content-line-height: var(--spectrum-line-height-100); + --system-drop-zone-content-background-color: var( + --spectrum-accent-visual-color + ); + --system-drop-zone-content-color: var(--spectrum-white); + --system-drop-zone-heading-font-size-cjk: var( + --spectrum-drop-zone-cjk-title-size + ); } :host, :root { - --system-field-group-margin: var(--spectrum-spacing-300); - --system-field-group-readonly-delimiter: '\002c'; + --system-field-group-margin: var(--spectrum-spacing-300); + --system-field-group-readonly-delimiter: "\002c"; } :host, :root { - --system-field-label-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-field-label-font-weight: var(--spectrum-regular-font-weight); - --system-field-label-line-height: var(--spectrum-line-height-100); - --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-field-label-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-field-label-min-height: var(--spectrum-component-height-75); - --system-field-label-size-m-min-height: var(--spectrum-component-height-75); - --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-field-label-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-font-size: var(--spectrum-font-size-75); - --system-field-label-size-m-font-size: var(--spectrum-font-size-75); - --system-field-label-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-size-m-side-margin-block-start: var( - --spectrum-field-label-top-margin-medium - ); - --system-field-label-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-m-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-medium - ); - --system-field-label-size-s-min-height: var(--spectrum-component-height-75); - --system-field-label-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-field-label-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-field-label-size-s-font-size: var(--spectrum-font-size-75); - --system-field-label-size-s-side-margin-block-start: var( - --spectrum-field-label-top-margin-small - ); - --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); - --system-field-label-size-s-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-small - ); - --system-field-label-size-l-min-height: var( - --spectrum-component-height-100 - ); - --system-field-label-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-field-label-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-field-label-size-l-font-size: var(--spectrum-font-size-100); - --system-field-label-size-l-side-margin-block-start: var( - --spectrum-field-label-top-margin-large - ); - --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); - --system-field-label-size-l-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-large - ); - --system-field-label-size-xl-min-height: var( - --spectrum-component-height-200 - ); - --system-field-label-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-field-label-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); - --system-field-label-size-xl-side-margin-block-start: var( - --spectrum-field-label-top-margin-extra-large - ); - --system-field-label-size-xl-side-padding-right: var( - --spectrum-spacing-200 - ); - --system-field-label-size-xl-text-to-asterisk: var( - --spectrum-field-label-text-to-asterisk-extra-large - ); + --system-field-label-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-field-label-font-weight: var(--spectrum-regular-font-weight); + --system-field-label-line-height: var(--spectrum-line-height-100); + --system-field-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-field-label-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-field-label-min-height: var(--spectrum-component-height-75); + --system-field-label-size-m-min-height: var(--spectrum-component-height-75); + --system-field-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-field-label-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-font-size: var(--spectrum-font-size-75); + --system-field-label-size-m-font-size: var(--spectrum-font-size-75); + --system-field-label-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-size-m-side-margin-block-start: var( + --spectrum-field-label-top-margin-medium + ); + --system-field-label-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-m-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-m-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-medium + ); + --system-field-label-size-s-min-height: var(--spectrum-component-height-75); + --system-field-label-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-field-label-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-field-label-size-s-font-size: var(--spectrum-font-size-75); + --system-field-label-size-s-side-margin-block-start: var( + --spectrum-field-label-top-margin-small + ); + --system-field-label-size-s-side-padding-right: var(--spectrum-spacing-100); + --system-field-label-size-s-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-small + ); + --system-field-label-size-l-min-height: var(--spectrum-component-height-100); + --system-field-label-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-field-label-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-field-label-size-l-font-size: var(--spectrum-font-size-100); + --system-field-label-size-l-side-margin-block-start: var( + --spectrum-field-label-top-margin-large + ); + --system-field-label-size-l-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-l-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-large + ); + --system-field-label-size-xl-min-height: var(--spectrum-component-height-200); + --system-field-label-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-field-label-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-field-label-size-xl-font-size: var(--spectrum-font-size-200); + --system-field-label-size-xl-side-margin-block-start: var( + --spectrum-field-label-top-margin-extra-large + ); + --system-field-label-size-xl-side-padding-right: var(--spectrum-spacing-200); + --system-field-label-size-xl-text-to-asterisk: var( + --spectrum-field-label-text-to-asterisk-extra-large + ); } :host, :root { - --system-help-text-line-height: var(--spectrum-line-height-100); - --system-help-text-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-help-text-neutral-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-neutral-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-help-text-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-negative-icon-color-default: var( - --spectrum-negative-color-900 - ); - --system-help-text-disabled-content-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-disabled-icon-color-default: var( - --system-help-text-disabled-content-color - ); - --system-help-text-lang-ja-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-zh-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-lang-ko-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-help-text-min-height: var(--spectrum-component-height-75); - --system-help-text-size-m-min-height: var(--spectrum-component-height-75); - --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-help-text-font-size: var(--spectrum-font-size-75); - --system-help-text-size-m-font-size: var(--spectrum-font-size-75); - --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-size-m-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-medium - ); - --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75); - --system-help-text-size-m-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-m-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-s-min-height: var(--spectrum-component-height-75); - --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-help-text-size-s-font-size: var(--spectrum-font-size-75); - --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); - --system-help-text-size-s-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-small - ); - --system-help-text-size-s-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-help-text-size-s-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-help-text-size-l-min-height: var(--spectrum-component-height-100); - --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-help-text-size-l-font-size: var(--spectrum-font-size-100); - --system-help-text-size-l-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-help-text-size-l-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-large - ); - --system-help-text-size-l-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-help-text-size-l-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); - --system-help-text-size-xl-icon-size: var( - --spectrum-workflow-icon-size-300 - ); - --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); - --system-help-text-size-xl-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-help-text-size-xl-top-to-workflow-icon: var( - --spectrum-help-text-top-to-workflow-icon-extra-large - ); - --system-help-text-size-xl-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-help-text-size-xl-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); + --system-help-text-line-height: var(--spectrum-line-height-100); + --system-help-text-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-disabled-content-color: var( + --spectrum-disabled-content-color + ); + --system-help-text-neutral-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-neutral-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-help-text-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-negative-icon-color-default: var( + --spectrum-negative-color-900 + ); + --system-help-text-disabled-content-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-disabled-icon-color-default: var( + --system-help-text-disabled-content-color + ); + --system-help-text-lang-ja-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-zh-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-lang-ko-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-help-text-min-height: var(--spectrum-component-height-75); + --system-help-text-size-m-min-height: var(--spectrum-component-height-75); + --system-help-text-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-help-text-font-size: var(--spectrum-font-size-75); + --system-help-text-size-m-font-size: var(--spectrum-font-size-75); + --system-help-text-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-m-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-size-m-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-medium + ); + --system-help-text-top-to-text: var(--spectrum-component-top-to-text-75); + --system-help-text-size-m-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-m-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-s-min-height: var(--spectrum-component-height-75); + --system-help-text-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-help-text-size-s-font-size: var(--spectrum-font-size-75); + --system-help-text-size-s-text-to-visual: var(--spectrum-text-to-visual-75); + --system-help-text-size-s-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-small + ); + --system-help-text-size-s-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-help-text-size-s-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-help-text-size-l-min-height: var(--spectrum-component-height-100); + --system-help-text-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-help-text-size-l-font-size: var(--spectrum-font-size-100); + --system-help-text-size-l-text-to-visual: var(--spectrum-text-to-visual-100); + --system-help-text-size-l-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-large + ); + --system-help-text-size-l-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-help-text-size-l-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-help-text-size-xl-min-height: var(--spectrum-component-height-200); + --system-help-text-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-help-text-size-xl-font-size: var(--spectrum-font-size-200); + --system-help-text-size-xl-text-to-visual: var(--spectrum-text-to-visual-200); + --system-help-text-size-xl-top-to-workflow-icon: var( + --spectrum-help-text-top-to-workflow-icon-extra-large + ); + --system-help-text-size-xl-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-help-text-size-xl-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); } :host, :root { - --system-illustrated-message-description-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-heading-max-inline-size: var( - --spectrum-illustrated-message-maximum-width - ); - --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); - --system-illustrated-message-heading-to-description: var( - --spectrum-spacing-75 - ); - --system-illustrated-message-illustration-color: var( - --spectrum-neutral-visual-color - ); - --system-illustrated-message-illustration-accent-color: var( - --spectrum-accent-visual-color - ); - --system-illustrated-message-title-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-title-font-weight: var( - --spectrum-heading-sans-serif-font-weight - ); - --system-illustrated-message-title-font-style: var( - --spectrum-heading-sans-serif-font-style - ); - --system-illustrated-message-title-font-size: var( - --spectrum-illustrated-message-title-size - ); - --system-illustrated-message-title-line-height: var( - --spectrum-heading-line-height - ); - --system-illustrated-message-title-color: var(--spectrum-heading-color); - --system-illustrated-message-description-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-illustrated-message-description-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-illustrated-message-description-font-style: var( - --spectrum-body-sans-serif-font-style - ); - --system-illustrated-message-description-font-size: var( - --spectrum-illustrated-message-body-size - ); - --system-illustrated-message-description-line-height: var( - --spectrum-body-line-height - ); - --system-illustrated-message-description-color: var(--spectrum-body-color); - --system-illustrated-message-lang-ja-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-zh-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); - --system-illustrated-message-lang-ko-title-font-size: var( - --spectrum-illustrated-message-cjk-title-size - ); + --system-illustrated-message-description-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-heading-max-inline-size: var( + --spectrum-illustrated-message-maximum-width + ); + --system-illustrated-message-title-to-heading: var(--spectrum-spacing-400); + --system-illustrated-message-heading-to-description: var( + --spectrum-spacing-75 + ); + --system-illustrated-message-illustration-color: var( + --spectrum-neutral-visual-color + ); + --system-illustrated-message-illustration-accent-color: var( + --spectrum-accent-visual-color + ); + --system-illustrated-message-title-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-title-font-weight: var( + --spectrum-heading-sans-serif-font-weight + ); + --system-illustrated-message-title-font-style: var( + --spectrum-heading-sans-serif-font-style + ); + --system-illustrated-message-title-font-size: var( + --spectrum-illustrated-message-title-size + ); + --system-illustrated-message-title-line-height: var( + --spectrum-heading-line-height + ); + --system-illustrated-message-title-color: var(--spectrum-heading-color); + --system-illustrated-message-description-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-illustrated-message-description-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-illustrated-message-description-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --system-illustrated-message-description-font-size: var( + --spectrum-illustrated-message-body-size + ); + --system-illustrated-message-description-line-height: var( + --spectrum-body-line-height + ); + --system-illustrated-message-description-color: var(--spectrum-body-color); + --system-illustrated-message-lang-ja-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-zh-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --system-illustrated-message-lang-ko-title-font-size: var( + --spectrum-illustrated-message-cjk-title-size + ); } :host, :root { - --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); - --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); - --system-icon-size-s: var(--spectrum-workflow-icon-size-75); - --system-icon-size-m: var(--spectrum-workflow-icon-size-100); - --system-icon-size-l: var(--spectrum-workflow-icon-size-200); - --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); - --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); - --system-ui-icon-chevron-right-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-down-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-right-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-down-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-right-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-down-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-right-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-down-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-right-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-down-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-right-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-down-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-right-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-down-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-left-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-left-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-left-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-left-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-left-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-left-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-left-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-chevron-up-50-icon-size: var( - --spectrum-chevron-icon-size-50 - ); - --system-ui-icon-chevron-up-75-icon-size: var( - --spectrum-chevron-icon-size-75 - ); - --system-ui-icon-chevron-up-100-icon-size: var( - --spectrum-chevron-icon-size-100 - ); - --system-ui-icon-chevron-up-200-icon-size: var( - --spectrum-chevron-icon-size-200 - ); - --system-ui-icon-chevron-up-300-icon-size: var( - --spectrum-chevron-icon-size-300 - ); - --system-ui-icon-chevron-up-400-icon-size: var( - --spectrum-chevron-icon-size-400 - ); - --system-ui-icon-chevron-up-500-icon-size: var( - --spectrum-chevron-icon-size-500 - ); - --system-ui-icon-arrow-right-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-right-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-right-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-right-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-right-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-right-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-right-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-down-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-down-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-down-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-down-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-down-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-down-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-down-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-left-75-icon-size: var( - --spectrum-arrow-icon-size-75 - ); - --system-ui-icon-arrow-left-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-left-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-left-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-left-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-left-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-left-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); - --system-ui-icon-arrow-up-100-icon-size: var( - --spectrum-arrow-icon-size-100 - ); - --system-ui-icon-arrow-up-200-icon-size: var( - --spectrum-arrow-icon-size-200 - ); - --system-ui-icon-arrow-up-300-icon-size: var( - --spectrum-arrow-icon-size-300 - ); - --system-ui-icon-arrow-up-400-icon-size: var( - --spectrum-arrow-icon-size-400 - ); - --system-ui-icon-arrow-up-500-icon-size: var( - --spectrum-arrow-icon-size-500 - ); - --system-ui-icon-arrow-up-600-icon-size: var( - --spectrum-arrow-icon-size-600 - ); - --system-ui-icon-checkmark-50-icon-size: var( - --spectrum-checkmark-icon-size-50 - ); - --system-ui-icon-checkmark-75-icon-size: var( - --spectrum-checkmark-icon-size-75 - ); - --system-ui-icon-checkmark-100-icon-size: var( - --spectrum-checkmark-icon-size-100 - ); - --system-ui-icon-checkmark-200-icon-size: var( - --spectrum-checkmark-icon-size-200 - ); - --system-ui-icon-checkmark-300-icon-size: var( - --spectrum-checkmark-icon-size-300 - ); - --system-ui-icon-checkmark-400-icon-size: var( - --spectrum-checkmark-icon-size-400 - ); - --system-ui-icon-checkmark-500-icon-size: var( - --spectrum-checkmark-icon-size-500 - ); - --system-ui-icon-checkmark-600-icon-size: var( - --spectrum-checkmark-icon-size-600 - ); - --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); - --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); - --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); - --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); - --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); - --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); - --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); - --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); - --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); - --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); - --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); - --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); - --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); - --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); - --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); - --system-ui-icon-corner-triangle-75-icon-size: var( - --spectrum-corner-triangle-icon-size-75 - ); - --system-ui-icon-corner-triangle-100-icon-size: var( - --spectrum-corner-triangle-icon-size-100 - ); - --system-ui-icon-corner-triangle-200-icon-size: var( - --spectrum-corner-triangle-icon-size-200 - ); - --system-ui-icon-corner-triangle-300-icon-size: var( - --spectrum-corner-triangle-icon-size-300 - ); - --system-ui-icon-asterisk-75-icon-size: var( - --spectrum-asterisk-icon-size-75 - ); - --system-ui-icon-asterisk-100-icon-size: var( - --spectrum-asterisk-icon-size-100 - ); - --system-ui-icon-asterisk-200-icon-size: var( - --spectrum-asterisk-icon-size-200 - ); - --system-ui-icon-asterisk-300-icon-size: var( - --spectrum-asterisk-icon-size-300 - ); + --system-icon-size-xxs: var(--spectrum-workflow-icon-size-xxs); + --system-icon-size-xs: var(--spectrum-workflow-icon-size-50); + --system-icon-size-s: var(--spectrum-workflow-icon-size-75); + --system-icon-size-m: var(--spectrum-workflow-icon-size-100); + --system-icon-size-l: var(--spectrum-workflow-icon-size-200); + --system-icon-size-xl: var(--spectrum-workflow-icon-size-300); + --system-icon-size-xxl: var(--spectrum-workflow-icon-size-xxl); + --system-ui-icon-chevron-right-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-down-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-right-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-down-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-right-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-down-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-right-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-down-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-right-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-down-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-right-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-down-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-right-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-down-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-left-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-left-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-left-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-left-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-left-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-left-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-left-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-chevron-up-50-icon-size: var( + --spectrum-chevron-icon-size-50 + ); + --system-ui-icon-chevron-up-75-icon-size: var( + --spectrum-chevron-icon-size-75 + ); + --system-ui-icon-chevron-up-100-icon-size: var( + --spectrum-chevron-icon-size-100 + ); + --system-ui-icon-chevron-up-200-icon-size: var( + --spectrum-chevron-icon-size-200 + ); + --system-ui-icon-chevron-up-300-icon-size: var( + --spectrum-chevron-icon-size-300 + ); + --system-ui-icon-chevron-up-400-icon-size: var( + --spectrum-chevron-icon-size-400 + ); + --system-ui-icon-chevron-up-500-icon-size: var( + --spectrum-chevron-icon-size-500 + ); + --system-ui-icon-arrow-right-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-right-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-right-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-right-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-right-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-right-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-right-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-down-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-down-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-down-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-down-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-down-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-down-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-down-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-left-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-left-100-icon-size: var( + --spectrum-arrow-icon-size-100 + ); + --system-ui-icon-arrow-left-200-icon-size: var( + --spectrum-arrow-icon-size-200 + ); + --system-ui-icon-arrow-left-300-icon-size: var( + --spectrum-arrow-icon-size-300 + ); + --system-ui-icon-arrow-left-400-icon-size: var( + --spectrum-arrow-icon-size-400 + ); + --system-ui-icon-arrow-left-500-icon-size: var( + --spectrum-arrow-icon-size-500 + ); + --system-ui-icon-arrow-left-600-icon-size: var( + --spectrum-arrow-icon-size-600 + ); + --system-ui-icon-arrow-up-75-icon-size: var(--spectrum-arrow-icon-size-75); + --system-ui-icon-arrow-up-100-icon-size: var(--spectrum-arrow-icon-size-100); + --system-ui-icon-arrow-up-200-icon-size: var(--spectrum-arrow-icon-size-200); + --system-ui-icon-arrow-up-300-icon-size: var(--spectrum-arrow-icon-size-300); + --system-ui-icon-arrow-up-400-icon-size: var(--spectrum-arrow-icon-size-400); + --system-ui-icon-arrow-up-500-icon-size: var(--spectrum-arrow-icon-size-500); + --system-ui-icon-arrow-up-600-icon-size: var(--spectrum-arrow-icon-size-600); + --system-ui-icon-checkmark-50-icon-size: var( + --spectrum-checkmark-icon-size-50 + ); + --system-ui-icon-checkmark-75-icon-size: var( + --spectrum-checkmark-icon-size-75 + ); + --system-ui-icon-checkmark-100-icon-size: var( + --spectrum-checkmark-icon-size-100 + ); + --system-ui-icon-checkmark-200-icon-size: var( + --spectrum-checkmark-icon-size-200 + ); + --system-ui-icon-checkmark-300-icon-size: var( + --spectrum-checkmark-icon-size-300 + ); + --system-ui-icon-checkmark-400-icon-size: var( + --spectrum-checkmark-icon-size-400 + ); + --system-ui-icon-checkmark-500-icon-size: var( + --spectrum-checkmark-icon-size-500 + ); + --system-ui-icon-checkmark-600-icon-size: var( + --spectrum-checkmark-icon-size-600 + ); + --system-ui-icon-dash-50-icon-size: var(--spectrum-dash-icon-size-50); + --system-ui-icon-dash-75-icon-size: var(--spectrum-dash-icon-size-75); + --system-ui-icon-dash-100-icon-size: var(--spectrum-dash-icon-size-100); + --system-ui-icon-dash-200-icon-size: var(--spectrum-dash-icon-size-200); + --system-ui-icon-dash-300-icon-size: var(--spectrum-dash-icon-size-300); + --system-ui-icon-dash-400-icon-size: var(--spectrum-dash-icon-size-400); + --system-ui-icon-dash-500-icon-size: var(--spectrum-dash-icon-size-500); + --system-ui-icon-dash-600-icon-size: var(--spectrum-dash-icon-size-600); + --system-ui-icon-cross-75-icon-size: var(--spectrum-cross-icon-size-75); + --system-ui-icon-cross-100-icon-size: var(--spectrum-cross-icon-size-100); + --system-ui-icon-cross-200-icon-size: var(--spectrum-cross-icon-size-200); + --system-ui-icon-cross-300-icon-size: var(--spectrum-cross-icon-size-300); + --system-ui-icon-cross-400-icon-size: var(--spectrum-cross-icon-size-400); + --system-ui-icon-cross-500-icon-size: var(--spectrum-cross-icon-size-500); + --system-ui-icon-cross-600-icon-size: var(--spectrum-cross-icon-size-600); + --system-ui-icon-corner-triangle-75-icon-size: var( + --spectrum-corner-triangle-icon-size-75 + ); + --system-ui-icon-corner-triangle-100-icon-size: var( + --spectrum-corner-triangle-icon-size-100 + ); + --system-ui-icon-corner-triangle-200-icon-size: var( + --spectrum-corner-triangle-icon-size-200 + ); + --system-ui-icon-corner-triangle-300-icon-size: var( + --spectrum-corner-triangle-icon-size-300 + ); + --system-ui-icon-asterisk-75-icon-size: var(--spectrum-asterisk-icon-size-75); + --system-ui-icon-asterisk-100-icon-size: var( + --spectrum-asterisk-icon-size-100 + ); + --system-ui-icon-asterisk-200-icon-size: var( + --spectrum-asterisk-icon-size-200 + ); + --system-ui-icon-asterisk-300-icon-size: var( + --spectrum-asterisk-icon-size-300 + ); } :host, :root { - --system-infield-button-border-width: var(--spectrum-border-width-100); - --system-infield-button-border-color: inherit; - --system-infield-button-border-radius: var(--spectrum-corner-radius-100); - --system-infield-button-border-radius-reset: 0; - --system-infield-button-stacked-top-border-radius-start-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-stacked-bottom-border-radius-end-start: var( - --system-infield-button-border-radius-reset - ); - --system-infield-button-background-color: var(--spectrum-gray-75); - --system-infield-button-background-color-hover: var(--spectrum-gray-200); - --system-infield-button-background-color-down: var(--spectrum-gray-300); - --system-infield-button-background-color-key-focus: var( - --spectrum-gray-200 - ); - --system-infield-button-height: var(--spectrum-component-height-100); - --system-infield-button-width: var(--spectrum-component-height-100); - --system-infield-button-stacked-border-radius-reset: var( - --spectrum-in-field-button-fill-stacked-inner-border-rounding - ); - --system-infield-button-edge-to-fill: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-infield-button-inner-edge-to-fill: var( - --spectrum-in-field-button-stacked-inner-edge-to-fill - ); - --system-infield-button-fill-padding: 0px; - --system-infield-button-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium - ); - --system-infield-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-infield-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-infield-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-infield-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-infield-button-fill-justify-content: center; - --system-infield-button-disabled-background-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-hover: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-background-color-down: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-border-color: var( - --spectrum-disabled-background-color - ); - --system-infield-button-disabled-icon-color: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-hover: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-down: var( - --spectrum-disabled-content-color - ); - --system-infield-button-disabled-icon-color-key-focus: var( - --spectrum-disabled-content-color - ); - --system-infield-button-size-s-height: var(--spectrum-component-height-75); - --system-infield-button-size-s-width: var(--spectrum-component-height-75); - --system-infield-button-size-s-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-s-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small - ); - --system-infield-button-size-l-height: var(--spectrum-component-height-200); - --system-infield-button-size-l-width: var(--spectrum-component-height-200); - --system-infield-button-size-l-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-l-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large - ); - --system-infield-button-size-xl-height: var( - --spectrum-component-height-300 - ); - --system-infield-button-size-xl-width: var(--spectrum-component-height-300); - --system-infield-button-size-xl-stacked-fill-padding-inline: var( - --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-outer: var( - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-size-xl-stacked-fill-padding-inner: var( - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large - ); - --system-infield-button-top-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-bottom-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-infield-button-top-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-bottom-size-s-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-infield-button-top-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-bottom-size-l-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-infield-button-top-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-bottom-size-xl-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-infield-button-quiet-background-color: transparent; - --system-infield-button-quiet-background-color-hover: transparent; - --system-infield-button-quiet-background-color-down: transparent; - --system-infield-button-quiet-background-color-key-focus: transparent; - --system-infield-button-quiet-infield-border-color: transparent; - --system-infield-button-quiet-border-width: 0; - --system-infield-button-quiet-disabled-background-color: transparent; - --system-infield-button-quiet-disabled-border-color: transparent; + --system-infield-button-border-width: var(--spectrum-border-width-100); + --system-infield-button-border-color: inherit; + --system-infield-button-border-radius: var(--spectrum-corner-radius-100); + --system-infield-button-border-radius-reset: 0; + --system-infield-button-stacked-top-border-radius-start-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-stacked-bottom-border-radius-end-start: var( + --system-infield-button-border-radius-reset + ); + --system-infield-button-background-color: var(--spectrum-gray-75); + --system-infield-button-background-color-hover: var(--spectrum-gray-200); + --system-infield-button-background-color-down: var(--spectrum-gray-300); + --system-infield-button-background-color-key-focus: var(--spectrum-gray-200); + --system-infield-button-height: var(--spectrum-component-height-100); + --system-infield-button-width: var(--spectrum-component-height-100); + --system-infield-button-stacked-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-infield-button-edge-to-fill: var( + --spectrum-in-field-button-edge-to-fill + ); + --system-infield-button-inner-edge-to-fill: var( + --spectrum-in-field-button-stacked-inner-edge-to-fill + ); + --system-infield-button-fill-padding: 0px; + --system-infield-button-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium + ); + --system-infield-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-infield-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-infield-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-infield-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-infield-button-fill-justify-content: center; + --system-infield-button-disabled-background-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-hover: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-background-color-down: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-border-color: var( + --spectrum-disabled-background-color + ); + --system-infield-button-disabled-icon-color: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-hover: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-down: var( + --spectrum-disabled-content-color + ); + --system-infield-button-disabled-icon-color-key-focus: var( + --spectrum-disabled-content-color + ); + --system-infield-button-size-s-height: var(--spectrum-component-height-75); + --system-infield-button-size-s-width: var(--spectrum-component-height-75); + --system-infield-button-size-s-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-s-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small + ); + --system-infield-button-size-l-height: var(--spectrum-component-height-200); + --system-infield-button-size-l-width: var(--spectrum-component-height-200); + --system-infield-button-size-l-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-l-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large + ); + --system-infield-button-size-xl-height: var(--spectrum-component-height-300); + --system-infield-button-size-xl-width: var(--spectrum-component-height-300); + --system-infield-button-size-xl-stacked-fill-padding-inline: var( + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-outer: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-size-xl-stacked-fill-padding-inner: var( + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large + ); + --system-infield-button-top-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-bottom-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-infield-button-top-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-bottom-size-s-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-infield-button-top-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-bottom-size-l-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-infield-button-top-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-bottom-size-xl-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-infield-button-quiet-background-color: transparent; + --system-infield-button-quiet-background-color-hover: transparent; + --system-infield-button-quiet-background-color-down: transparent; + --system-infield-button-quiet-background-color-key-focus: transparent; + --system-infield-button-quiet-infield-border-color: transparent; + --system-infield-button-quiet-border-width: 0; + --system-infield-button-quiet-disabled-background-color: transparent; + --system-infield-button-quiet-disabled-border-color: transparent; } :host, :root { - --system-link-animation-duration: var(--spectrum-animation-duration-100); - --system-link-text-color-primary-default: var( - --spectrum-accent-content-color-default - ); - --system-link-text-color-primary-hover: var( - --spectrum-accent-content-color-hover - ); - --system-link-text-color-primary-active: var( - --spectrum-accent-content-color-down - ); - --system-link-text-color-primary-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-link-text-color-secondary-default: var( - --spectrum-neutral-content-color-default - ); - --system-link-text-color-secondary-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-link-text-color-secondary-active: var( - --spectrum-neutral-content-color-down - ); - --system-link-text-color-secondary-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-link-text-color-white: var(--spectrum-white); - --system-link-text-color-black: var(--spectrum-black); + --system-link-animation-duration: var(--spectrum-animation-duration-100); + --system-link-text-color-primary-default: var( + --spectrum-accent-content-color-default + ); + --system-link-text-color-primary-hover: var( + --spectrum-accent-content-color-hover + ); + --system-link-text-color-primary-active: var( + --spectrum-accent-content-color-down + ); + --system-link-text-color-primary-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-link-text-color-secondary-default: var( + --spectrum-neutral-content-color-default + ); + --system-link-text-color-secondary-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-link-text-color-secondary-active: var( + --spectrum-neutral-content-color-down + ); + --system-link-text-color-secondary-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-link-text-color-white: var(--spectrum-white); + --system-link-text-color-black: var(--spectrum-black); } :host, :root { - --system-menu-item-top-to-action: var(--spectrum-spacing-50); - --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); - --system-menu-item-label-line-height: var(--spectrum-line-height-100); - --system-menu-item-label-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-label-to-description-spacing: var( - --spectrum-menu-item-label-to-description - ); - --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); - --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); - --system-menu-item-label-to-value-area-min-spacing: var( - --spectrum-spacing-100 - ); - --system-menu-item-label-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-menu-item-label-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-menu-item-label-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-menu-item-label-icon-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-menu-item-label-content-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-label-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-item-description-line-height: var(--spectrum-line-height-100); - --system-menu-item-description-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-item-description-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-description-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-description-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-description-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-description-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-menu-section-header-line-height: var(--spectrum-line-height-100); - --system-menu-section-header-line-height-cjk: var( - --spectrum-cjk-line-height-100 - ); - --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-menu-section-header-color: var(--spectrum-gray-900); - --system-menu-collapsible-icon-color: var(--spectrum-gray-900); - --system-menu-checkmark-icon-color-default: var( - --spectrum-accent-color-900 - ); - --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); - --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); - --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); - --system-menu-drillin-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-drillin-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-drillin-icon-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-drillin-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-item-value-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-menu-item-value-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-menu-item-value-color-down: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-menu-item-value-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-menu-checkmark-display-hidden: none; - --system-menu-checkmark-display-shown: block; - --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( - var(--system-menu-item-label-inline-edge-to-content) + - var(--system-menu-item-checkmark-width) + - var(--system-menu-item-label-text-to-visual) + - var(--system-menu-item-focus-indicator-width) - ); - --system-menu-item-background-color-default: transparent; - --system-menu-item-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-down: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-background-color-key-focus: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-transparent-black-200-opacity) - ); - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-height: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-size-m-item-icon-width: var( - --spectrum-workflow-icon-size-100 - ); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-size-m-item-label-text-to-visual: var( - --spectrum-text-to-visual-100 - ); - --system-menu-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-size-m-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-100 - ); - --system-menu-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-size-m-item-top-edge-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-menu-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-size-m-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-size-m-item-text-to-control: var( - --spectrum-text-to-control-100 - ); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-size-m-item-description-font-size: var( - --spectrum-font-size-75 - ); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-size-m-section-header-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-size-m-section-header-min-width: var( - --spectrum-component-height-100 - ); - --system-menu-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium - ); - --system-menu-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-size-m-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-medium - ); - --system-menu-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-size-m-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-medium - ); - --system-menu-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-size-m-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-medium - ); - --system-menu-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-m-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-medium - ); - --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); - --system-menu-size-s-item-icon-height: var( - --spectrum-workflow-icon-size-75 - ); - --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); - --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-item-label-text-to-visual: var( - --spectrum-text-to-visual-75 - ); - --system-menu-size-s-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-75 - ); - --system-menu-size-s-item-top-edge-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-menu-size-s-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-menu-size-s-item-text-to-control: var( - --spectrum-text-to-control-75 - ); - --system-menu-size-s-item-description-font-size: var( - --spectrum-font-size-50 - ); - --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); - --system-menu-size-s-section-header-min-width: var( - --spectrum-component-height-75 - ); - --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-small - ); - --system-menu-size-s-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-small - ); - --system-menu-size-s-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-small - ); - --system-menu-size-s-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-small - ); - --system-menu-size-s-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-small - ); - --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); - --system-menu-size-l-item-icon-height: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-icon-width: var( - --spectrum-workflow-icon-size-200 - ); - --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); - --system-menu-size-l-item-label-text-to-visual: var( - --spectrum-text-to-visual-200 - ); - --system-menu-size-l-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-200 - ); - --system-menu-size-l-item-top-edge-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-menu-size-l-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-menu-size-l-item-text-to-control: var( - --spectrum-text-to-control-200 - ); - --system-menu-size-l-item-description-font-size: var( - --spectrum-font-size-100 - ); - --system-menu-size-l-section-header-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-l-section-header-min-width: var( - --spectrum-component-height-200 - ); - --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-large - ); - --system-menu-size-l-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-large - ); - --system-menu-size-l-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-large - ); - --system-menu-size-l-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-large - ); - --system-menu-size-l-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-large - ); - --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); - --system-menu-size-xl-item-icon-height: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-icon-width: var( - --spectrum-workflow-icon-size-300 - ); - --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); - --system-menu-size-xl-item-label-text-to-visual: var( - --spectrum-text-to-visual-300 - ); - --system-menu-size-xl-item-label-inline-edge-to-content: var( - --spectrum-component-edge-to-text-300 - ); - --system-menu-size-xl-item-top-edge-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-menu-size-xl-item-bottom-edge-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-menu-size-xl-item-text-to-control: var( - --spectrum-text-to-control-300 - ); - --system-menu-size-xl-item-description-font-size: var( - --spectrum-font-size-200 - ); - --system-menu-size-xl-section-header-font-size: var( - --spectrum-font-size-300 - ); - --system-menu-size-xl-section-header-min-width: var( - --spectrum-component-height-300 - ); - --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large - ); - --system-menu-size-xl-item-checkmark-height: var( - --spectrum-menu-item-checkmark-height-extra-large - ); - --system-menu-size-xl-item-checkmark-width: var( - --spectrum-menu-item-checkmark-width-extra-large - ); - --system-menu-size-xl-item-top-to-checkmark: var( - --spectrum-menu-item-top-to-selected-icon-extra-large - ); - --system-menu-size-xl-back-icon-margin: var( - --spectrum-navigational-indicator-top-to-back-icon-extra-large - ); + --system-menu-item-top-to-action: var(--spectrum-spacing-50); + --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --system-menu-item-label-line-height: var(--spectrum-line-height-100); + --system-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-menu-item-label-to-description-spacing: var( + --spectrum-menu-item-label-to-description + ); + --system-menu-item-focus-indicator-width: var(--spectrum-border-width-200); + --system-menu-item-focus-indicator-color: var(--spectrum-blue-800); + --system-menu-item-label-to-value-area-min-spacing: var( + --spectrum-spacing-100 + ); + --system-menu-item-label-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-menu-item-label-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-menu-item-label-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-menu-item-label-icon-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-menu-item-label-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-label-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-item-description-line-height: var(--spectrum-line-height-100); + --system-menu-item-description-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-item-description-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-description-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-description-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-description-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-description-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-menu-section-header-line-height: var(--spectrum-line-height-100); + --system-menu-section-header-line-height-cjk: var( + --spectrum-cjk-line-height-100 + ); + --system-menu-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-menu-section-header-color: var(--spectrum-gray-900); + --system-menu-collapsible-icon-color: var(--spectrum-gray-900); + --system-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); + --system-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000); + --system-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100); + --system-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000); + --system-menu-drillin-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-drillin-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-drillin-icon-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-drillin-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-item-value-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-menu-item-value-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-menu-item-value-color-down: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-menu-item-value-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-menu-checkmark-display-hidden: none; + --system-menu-checkmark-display-shown: block; + --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); + --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc( + var(--system-menu-item-label-inline-edge-to-content) + + var(--system-menu-item-checkmark-width) + + var(--system-menu-item-label-text-to-visual) + + var(--system-menu-item-focus-indicator-width) + ); + --system-menu-item-background-color-default: transparent; + --system-menu-item-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var( + --spectrum-text-to-visual-100 + ); + --system-menu-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-size-m-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-100 + ); + --system-menu-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-size-m-item-top-edge-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-menu-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-size-m-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var( + --spectrum-text-to-control-100 + ); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-size-m-section-header-min-width: var( + --spectrum-component-height-100 + ); + --system-menu-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium + ); + --system-menu-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-size-m-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-medium + ); + --system-menu-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-size-m-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-medium + ); + --system-menu-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-size-m-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-medium + ); + --system-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-m-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); + --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); + --system-menu-size-s-item-icon-height: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); + --system-menu-size-s-item-label-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-item-label-text-to-visual: var( + --spectrum-text-to-visual-75 + ); + --system-menu-size-s-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-75 + ); + --system-menu-size-s-item-top-edge-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-menu-size-s-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-menu-size-s-item-text-to-control: var(--spectrum-text-to-control-75); + --system-menu-size-s-item-description-font-size: var(--spectrum-font-size-50); + --system-menu-size-s-section-header-font-size: var(--spectrum-font-size-75); + --system-menu-size-s-section-header-min-width: var( + --spectrum-component-height-75 + ); + --system-menu-size-s-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-small + ); + --system-menu-size-s-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-small + ); + --system-menu-size-s-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-small + ); + --system-menu-size-s-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-small + ); + --system-menu-size-s-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); + --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); + --system-menu-size-l-item-icon-height: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-icon-width: var(--spectrum-workflow-icon-size-200); + --system-menu-size-l-item-label-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-item-label-text-to-visual: var( + --spectrum-text-to-visual-200 + ); + --system-menu-size-l-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-200 + ); + --system-menu-size-l-item-top-edge-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-menu-size-l-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-menu-size-l-item-text-to-control: var( + --spectrum-text-to-control-200 + ); + --system-menu-size-l-item-description-font-size: var( + --spectrum-font-size-100 + ); + --system-menu-size-l-section-header-font-size: var(--spectrum-font-size-200); + --system-menu-size-l-section-header-min-width: var( + --spectrum-component-height-200 + ); + --system-menu-size-l-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-large + ); + --system-menu-size-l-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-large + ); + --system-menu-size-l-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-large + ); + --system-menu-size-l-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-large + ); + --system-menu-size-l-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); + --system-menu-size-xl-item-min-height: var(--spectrum-component-height-300); + --system-menu-size-xl-item-icon-height: var( + --spectrum-workflow-icon-size-300 + ); + --system-menu-size-xl-item-icon-width: var(--spectrum-workflow-icon-size-300); + --system-menu-size-xl-item-label-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-item-label-text-to-visual: var( + --spectrum-text-to-visual-300 + ); + --system-menu-size-xl-item-label-inline-edge-to-content: var( + --spectrum-component-edge-to-text-300 + ); + --system-menu-size-xl-item-top-edge-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-menu-size-xl-item-bottom-edge-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-menu-size-xl-item-text-to-control: var( + --spectrum-text-to-control-300 + ); + --system-menu-size-xl-item-description-font-size: var( + --spectrum-font-size-200 + ); + --system-menu-size-xl-section-header-font-size: var(--spectrum-font-size-300); + --system-menu-size-xl-section-header-min-width: var( + --spectrum-component-height-300 + ); + --system-menu-size-xl-item-selectable-edge-to-text-not-selected: var( + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large + ); + --system-menu-size-xl-item-checkmark-height: var( + --spectrum-menu-item-checkmark-height-extra-large + ); + --system-menu-size-xl-item-checkmark-width: var( + --spectrum-menu-item-checkmark-width-extra-large + ); + --system-menu-size-xl-item-top-to-checkmark: var( + --spectrum-menu-item-top-to-selected-icon-extra-large + ); + --system-menu-size-xl-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); } :host, :root { - --system-meter-min-width: var(--spectrum-meter-minimum-width); - --system-meter-max-width: var(--spectrum-meter-maximum-width); - --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); - --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); - --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); - --system-meter-thickness: var(--spectrum-meter-thickness-large); - --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); - --system-meter-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); - --system-meter-font-size: var(--spectrum-font-size-100); - --system-meter-size-l-font-size: var(--spectrum-font-size-100); - --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); - --system-meter-size-l-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); - --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); - --system-meter-size-s-font-size: var(--spectrum-font-size-75); - --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); + --system-meter-min-width: var(--spectrum-meter-minimum-width); + --system-meter-max-width: var(--spectrum-meter-maximum-width); + --system-meter-fill-color-positive: var(--spectrum-positive-visual-color); + --system-meter-fill-color-notice: var(--spectrum-notice-visual-color); + --system-meter-fill-color-negative: var(--spectrum-negative-visual-color); + --system-meter-thickness: var(--spectrum-meter-thickness-large); + --system-meter-size-l-thickness: var(--spectrum-meter-thickness-large); + --system-meter-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-size-l-inline-size: var(--spectrum-progressbar-size-2500); + --system-meter-font-size: var(--spectrum-font-size-100); + --system-meter-size-l-font-size: var(--spectrum-font-size-100); + --system-meter-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-l-top-to-text: var(--spectrum-component-top-to-text-200); + --system-meter-size-s-thickness: var(--spectrum-meter-thickness-small); + --system-meter-size-s-inline-size: var(--spectrum-progressbar-size-2400); + --system-meter-size-s-font-size: var(--spectrum-font-size-75); + --system-meter-size-s-top-to-text: var(--spectrum-component-top-to-text-75); } :host, :root { - --system-modal-confirm-exit-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-modal-confirm-entry-animation-distance: var( - --spectrum-dialog-confirm-entry-animation-distance - ); - --system-modal-fullscreen-margin: 32px; - --system-modal-max-height: 90vh; - --system-modal-max-width: 90%; - --system-modal-background-color: var(--spectrum-gray-100); - --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); - --system-modal-confirm-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-modal-confirm-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-modal-confirm-entry-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-modal-transition-animation-duration: var( - --spectrum-animation-duration-100 - ); + --system-modal-confirm-exit-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-modal-confirm-entry-animation-distance: var( + --spectrum-dialog-confirm-entry-animation-distance + ); + --system-modal-fullscreen-margin: 32px; + --system-modal-max-height: 90vh; + --system-modal-max-width: 90%; + --system-modal-background-color: var(--spectrum-gray-100); + --system-modal-confirm-border-radius: var(--spectrum-corner-radius-100); + --system-modal-confirm-exit-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-modal-confirm-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-modal-confirm-entry-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-modal-transition-animation-duration: var( + --spectrum-animation-duration-100 + ); } :host, :root { - --system-picker-background-color-default: var(--spectrum-gray-75); - --system-picker-background-color-default-open: var(--spectrum-gray-200); - --system-picker-background-color-active: var(--spectrum-gray-300); - --system-picker-background-color-hover: var(--spectrum-gray-200); - --system-picker-background-color-hover-open: var(--spectrum-gray-200); - --system-picker-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-border-color-default: var(--spectrum-gray-500); - --system-picker-border-color-default-open: var(--spectrum-gray-500); - --system-picker-border-color-hover: var(--spectrum-gray-600); - --system-picker-border-color-hover-open: var(--spectrum-gray-600); - --system-picker-border-color-active: var(--spectrum-gray-700); - --system-picker-border-color-key-focus: var(--spectrum-gray-600); - --system-picker-border-width: var(--spectrum-border-width-100); - --system-picker-font-size: var(--spectrum-font-size-100); - --system-picker-font-weight: var(--spectrum-regular-font-weight); - --system-picker-placeholder-font-style: var(--spectrum-default-font-style); - --system-picker-line-height: var(--spectrum-line-height-100); - --system-picker-block-size: var(--spectrum-component-height-100); - --system-picker-inline-size: var(--spectrum-field-width); - --system-picker-border-radius: var(--spectrum-corner-radius-100); - --system-picker-spacing-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-picker-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-picker-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-100 - ); - --system-picker-spacing-edge-to-text-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); - --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --system-picker-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-picker-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-medium - ); - --system-picker-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-picker-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-picker-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-medium - ); - --system-picker-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-100 - ); - --system-picker-spacing-edge-to-disclosure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclousure-icon-quiet - ); - --system-picker-animation-duration: var(--spectrum-animation-duration-100); - --system-picker-font-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-font-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-font-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-font-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-icon-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-picker-icon-color-default-open: var( - --spectrum-neutral-content-color-focus - ); - --system-picker-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-icon-color-hover-open: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-picker-icon-color-active: var( - --spectrum-neutral-content-color-down - ); - --system-picker-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-border-color-error-default: var( - --spectrum-negative-border-color-default - ); - --system-picker-border-color-error-default-open: var( - --spectrum-negative-border-color-focus - ); - --system-picker-border-color-error-hover: var( - --spectrum-negative-border-color-hover - ); - --system-picker-border-color-error-hover-open: var( - --spectrum-negative-border-color-focus-hover - ); - --system-picker-border-color-error-active: var( - --spectrum-negative-border-color-down - ); - --system-picker-border-color-error-key-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-picker-icon-color-error: var(--spectrum-negative-visual-color); - --system-picker-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-picker-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-picker-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-medium - ); - --system-picker-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-size-s-block-size: var(--spectrum-component-height-75); - --system-picker-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-picker-size-s-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-picker-size-s-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-75 - ); - --system-picker-size-s-spacing-text-to-icon: var( - --spectrum-text-to-visual-75 - ); - --system-picker-size-s-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-picker-size-s-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-small - ); - --system-picker-size-s-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-picker-size-s-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-picker-size-s-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-small - ); - --system-picker-size-s-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-75 - ); - --system-picker-size-s-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-75 - ); - --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-small - ); - --system-picker-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-size-l-block-size: var(--spectrum-component-height-200); - --system-picker-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-picker-size-l-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-picker-size-l-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-200 - ); - --system-picker-size-l-spacing-text-to-icon: var( - --spectrum-text-to-visual-200 - ); - --system-picker-size-l-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-picker-size-l-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-large - ); - --system-picker-size-l-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-picker-size-l-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-picker-size-l-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-large - ); - --system-picker-size-l-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-200 - ); - --system-picker-size-l-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-200 - ); - --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-large - ); - --system-picker-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-size-xl-block-size: var(--spectrum-component-height-300); - --system-picker-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-picker-size-xl-spacing-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-picker-size-xl-spacing-edge-to-text: var( - --spectrum-component-edge-to-text-300 - ); - --system-picker-size-xl-spacing-text-to-icon: var( - --spectrum-text-to-visual-300 - ); - --system-picker-size-xl-spacing-text-to-icon-inline-end: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( - --spectrum-picker-visual-to-disclosure-icon-extra-large - ); - --system-picker-size-xl-spacing-label-to-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-picker-size-xl-spacing-top-to-alert-icon: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-picker-size-xl-spacing-top-to-progress-circle: var( - --spectrum-field-top-to-progress-circle-extra-large - ); - --system-picker-size-xl-spacing-top-to-disclosure-icon: var( - --spectrum-field-top-to-disclosure-icon-300 - ); - --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( - --spectrum-field-end-edge-to-disclosure-icon-300 - ); - --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( - --spectrum-component-to-menu-extra-large - ); + --system-picker-background-color-default: var(--spectrum-gray-75); + --system-picker-background-color-default-open: var(--spectrum-gray-200); + --system-picker-background-color-active: var(--spectrum-gray-300); + --system-picker-background-color-hover: var(--spectrum-gray-200); + --system-picker-background-color-hover-open: var(--spectrum-gray-200); + --system-picker-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-border-color-default: var(--spectrum-gray-500); + --system-picker-border-color-default-open: var(--spectrum-gray-500); + --system-picker-border-color-hover: var(--spectrum-gray-600); + --system-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-picker-border-color-active: var(--spectrum-gray-700); + --system-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-picker-border-width: var(--spectrum-border-width-100); + --system-picker-font-size: var(--spectrum-font-size-100); + --system-picker-font-weight: var(--spectrum-regular-font-weight); + --system-picker-placeholder-font-style: var(--spectrum-default-font-style); + --system-picker-line-height: var(--spectrum-line-height-100); + --system-picker-block-size: var(--spectrum-component-height-100); + --system-picker-inline-size: var(--spectrum-field-width); + --system-picker-border-radius: var(--spectrum-corner-radius-100); + --system-picker-spacing-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-picker-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-picker-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --system-picker-spacing-edge-to-text-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-picker-spacing-label-to: var(--spectrum-field-label-to-component); + --system-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); + --system-picker-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-picker-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-medium + ); + --system-picker-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-picker-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-picker-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-medium + ); + --system-picker-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-100 + ); + --system-picker-spacing-edge-to-disclosure-icon-quiet: var( + --spectrum-picker-end-edge-to-disclousure-icon-quiet + ); + --system-picker-animation-duration: var(--spectrum-animation-duration-100); + --system-picker-font-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-font-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-font-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-font-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-icon-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-picker-icon-color-default-open: var( + --spectrum-neutral-content-color-focus + ); + --system-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --system-picker-icon-color-hover-open: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-picker-icon-color-active: var(--spectrum-neutral-content-color-down); + --system-picker-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-border-color-error-default: var( + --spectrum-negative-border-color-default + ); + --system-picker-border-color-error-default-open: var( + --spectrum-negative-border-color-focus + ); + --system-picker-border-color-error-hover: var( + --spectrum-negative-border-color-hover + ); + --system-picker-border-color-error-hover-open: var( + --spectrum-negative-border-color-focus-hover + ); + --system-picker-border-color-error-active: var( + --spectrum-negative-border-color-down + ); + --system-picker-border-color-error-key-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-picker-icon-color-error: var(--spectrum-negative-visual-color); + --system-picker-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-font-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-icon-color-disabled: var(--spectrum-disabled-content-color); + --system-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-picker-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-picker-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-medium + ); + --system-picker-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-size-s-block-size: var(--spectrum-component-height-75); + --system-picker-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-picker-size-s-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-picker-size-s-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --system-picker-size-s-spacing-text-to-icon: var( + --spectrum-text-to-visual-75 + ); + --system-picker-size-s-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-picker-size-s-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-small + ); + --system-picker-size-s-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-picker-size-s-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-picker-size-s-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-small + ); + --system-picker-size-s-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-75 + ); + --system-picker-size-s-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-75 + ); + --system-picker-size-s-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-small + ); + --system-picker-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-size-l-block-size: var(--spectrum-component-height-200); + --system-picker-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-picker-size-l-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-picker-size-l-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --system-picker-size-l-spacing-text-to-icon: var( + --spectrum-text-to-visual-200 + ); + --system-picker-size-l-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-picker-size-l-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-large + ); + --system-picker-size-l-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-picker-size-l-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-picker-size-l-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-large + ); + --system-picker-size-l-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-200 + ); + --system-picker-size-l-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-200 + ); + --system-picker-size-l-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-large + ); + --system-picker-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-size-xl-block-size: var(--spectrum-component-height-300); + --system-picker-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-picker-size-xl-spacing-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-picker-size-xl-spacing-edge-to-text: var( + --spectrum-component-edge-to-text-300 + ); + --system-picker-size-xl-spacing-text-to-icon: var( + --spectrum-text-to-visual-300 + ); + --system-picker-size-xl-spacing-text-to-icon-inline-end: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-icon-to-disclosure-icon: var( + --spectrum-picker-visual-to-disclosure-icon-extra-large + ); + --system-picker-size-xl-spacing-label-to-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-picker-size-xl-spacing-top-to-alert-icon: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-picker-size-xl-spacing-top-to-progress-circle: var( + --spectrum-field-top-to-progress-circle-extra-large + ); + --system-picker-size-xl-spacing-top-to-disclosure-icon: var( + --spectrum-field-top-to-disclosure-icon-300 + ); + --system-picker-size-xl-spacing-edge-to-disclosure-icon: var( + --spectrum-field-end-edge-to-disclosure-icon-300 + ); + --system-picker-size-xl-next-to-popover-bottom-open-spacing-to-popover: var( + --spectrum-component-to-menu-extra-large + ); } :host, :root { - --system-picker-button-background-color: var(--spectrum-gray-75); - --system-picker-button-background-color-hover: var(--spectrum-gray-200); - --system-picker-button-background-color-down: var(--spectrum-gray-300); - --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); - --system-picker-button-border-color: inherit; - --system-picker-button-border-radius: var(--spectrum-corner-radius-100); - --system-picker-button-border-radius-rounded-sided: 0; - --system-picker-button-border-radius-sided: 0; - --system-picker-button-border-width: var(--spectrum-border-width-100); - --system-picker-button-height: var(--spectrum-component-height-100); - --system-picker-button-width: var(--spectrum-component-height-100); - --system-picker-button-gap: var(--spectrum-text-to-visual-50); - --system-picker-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --system-picker-button-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-100 - ); - --system-picker-button-border-radius-rounded: var( - --spectrum-corner-radius-200 - ); - --system-picker-button-icon-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-icon-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-icon-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-icon-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-color: var( - --spectrum-neutral-content-color-default - ); - --system-picker-button-font-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-picker-button-font-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-picker-button-font-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --system-picker-button-font-style: var(--spectrum-default-font-style); - --system-picker-button-font-weight: var( - --spectrum-body-sans-serif-font-weight - ); - --system-picker-button-font-size: var(--spectrum-font-size-100); - --system-picker-button-background-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-picker-button-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-hover-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-background-color-down-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-picker-button-font-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-font-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-hover-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-icon-color-down-disabled: var( - --spectrum-disabled-content-color - ); - --system-picker-button-size-s-height: var(--spectrum-component-height-75); - --system-picker-button-size-s-width: var(--spectrum-component-height-75); - --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); - --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); - --system-picker-button-size-s-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-75 - ); - --system-picker-button-size-l-height: var(--spectrum-component-height-200); - --system-picker-button-size-l-width: var(--spectrum-component-height-200); - --system-picker-button-size-l-label-padding: var( - --spectrum-text-to-visual-200 - ); - --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); - --system-picker-button-size-l-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-200 - ); - --system-picker-button-size-xl-height: var(--spectrum-component-height-300); - --system-picker-button-size-xl-width: var(--spectrum-component-height-300); - --system-picker-button-size-xl-label-padding: var( - --spectrum-text-to-visual-300 - ); - --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); - --system-picker-button-size-xl-fill-padding: var( - --spectrum-field-edge-to-disclosure-icon-300 - ); + --system-picker-button-background-color: var(--spectrum-gray-75); + --system-picker-button-background-color-hover: var(--spectrum-gray-200); + --system-picker-button-background-color-down: var(--spectrum-gray-300); + --system-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --system-picker-button-border-color: inherit; + --system-picker-button-border-radius: var(--spectrum-corner-radius-100); + --system-picker-button-border-radius-rounded-sided: 0; + --system-picker-button-border-radius-sided: 0; + --system-picker-button-border-width: var(--spectrum-border-width-100); + --system-picker-button-height: var(--spectrum-component-height-100); + --system-picker-button-width: var(--spectrum-component-height-100); + --system-picker-button-gap: var(--spectrum-text-to-visual-50); + --system-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-picker-button-label-padding: var(--spectrum-text-to-visual-50); + --system-picker-button-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-100 + ); + --system-picker-button-border-radius-rounded: var( + --spectrum-corner-radius-200 + ); + --system-picker-button-icon-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-icon-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-icon-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-icon-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-color: var( + --spectrum-neutral-content-color-default + ); + --system-picker-button-font-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-picker-button-font-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-picker-button-font-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-picker-button-font-family: var(--spectrum-sans-font-family-stack); + --system-picker-button-font-style: var(--spectrum-default-font-style); + --system-picker-button-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --system-picker-button-font-size: var(--spectrum-font-size-100); + --system-picker-button-background-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-picker-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-hover-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-background-color-down-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-picker-button-font-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-font-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-hover-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-icon-color-down-disabled: var( + --spectrum-disabled-content-color + ); + --system-picker-button-size-s-height: var(--spectrum-component-height-75); + --system-picker-button-size-s-width: var(--spectrum-component-height-75); + --system-picker-button-size-s-label-padding: var(--spectrum-spacing-75); + --system-picker-button-size-s-font-size: var(--spectrum-font-size-75); + --system-picker-button-size-s-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-75 + ); + --system-picker-button-size-l-height: var(--spectrum-component-height-200); + --system-picker-button-size-l-width: var(--spectrum-component-height-200); + --system-picker-button-size-l-label-padding: var( + --spectrum-text-to-visual-200 + ); + --system-picker-button-size-l-font-size: var(--spectrum-font-size-200); + --system-picker-button-size-l-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-200 + ); + --system-picker-button-size-xl-height: var(--spectrum-component-height-300); + --system-picker-button-size-xl-width: var(--spectrum-component-height-300); + --system-picker-button-size-xl-label-padding: var( + --spectrum-text-to-visual-300 + ); + --system-picker-button-size-xl-font-size: var(--spectrum-font-size-300); + --system-picker-button-size-xl-fill-padding: var( + --spectrum-field-edge-to-disclosure-icon-300 + ); } :host, :root { - --system-popover-border-width: var(--spectrum-border-width-100); - --system-popover-animation-distance: var(--spectrum-spacing-100); - --system-popover-background-color: var(--spectrum-background-layer-2-color); - --system-popover-border-color: var(--spectrum-gray-400); - --system-popover-content-area-spacing-vertical: var( - --spectrum-popover-top-to-content-area - ); - --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --system-popover-shadow-color: var(--spectrum-drop-shadow-color); - --system-popover-corner-radius: var(--spectrum-corner-radius-100); - --system-popover-pointer-width: var(--spectrum-popover-tip-width); - --system-popover-pointer-height: var(--spectrum-popover-tip-height); - --system-popover-pointer-edge-offset: calc( - var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / - 2 - ); - --system-popover-pointer-edge-spacing: calc( - var(--system-popover-pointer-edge-offset) - - var(--spectrum-popover-tip-width) / 2 - ); + --system-popover-border-width: var(--spectrum-border-width-100); + --system-popover-animation-distance: var(--spectrum-spacing-100); + --system-popover-background-color: var(--spectrum-background-layer-2-color); + --system-popover-border-color: var(--spectrum-gray-400); + --system-popover-content-area-spacing-vertical: var( + --spectrum-popover-top-to-content-area + ); + --system-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); + --system-popover-shadow-vertical: var(--spectrum-drop-shadow-y); + --system-popover-shadow-blur: var(--spectrum-drop-shadow-blur); + --system-popover-shadow-color: var(--spectrum-drop-shadow-color); + --system-popover-corner-radius: var(--spectrum-corner-radius-100); + --system-popover-pointer-width: var(--spectrum-popover-tip-width); + --system-popover-pointer-height: var(--spectrum-popover-tip-height); + --system-popover-pointer-edge-offset: calc( + var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) / 2 + ); + --system-popover-pointer-edge-spacing: calc( + var(--system-popover-pointer-edge-offset) - + var(--spectrum-popover-tip-width) / 2 + ); } :host, :root { - --system-progress-bar-animation-ease-in-out-indeterminate: var( - --spectrum-animation-ease-in-out - ); - --system-progress-bar-animation-duration-indeterminate: var( - --spectrum-animation-duration-2000 - ); - --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); - --system-progress-bar-fill-size-indeterminate: 70%; - --system-progress-bar-size-2400: 192px; - --system-progress-bar-size-2500: 200px; - --system-progress-bar-size-2800: 224px; - --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); - --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); - --system-progress-bar-line-height: var(--spectrum-line-height-100); - --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); - --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); - --system-progress-bar-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-progress-bar-track-color: var(--spectrum-gray-300); - --system-progress-bar-fill-color: var(--spectrum-accent-color-900); - --system-progress-bar-label-and-value-white: var(--spectrum-white); - --system-progress-bar-track-color-white: var( - --spectrum-transparent-white-300 - ); - --system-progress-bar-fill-color-white: var(--spectrum-white); - --system-progress-bar-size-default: var(--system-progress-bar-size-2400); - --system-progress-bar-size-m-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); - --system-progress-bar-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-m-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-m-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-s-size-default: var( - --system-progress-bar-size-2400 - ); - --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); - --system-progress-bar-size-s-thickness: var( - --spectrum-progress-bar-thickness-small - ); - --system-progress-bar-size-s-spacing-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-progress-bar-size-l-size-default: var( - --system-progress-bar-size-2500 - ); - --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); - --system-progress-bar-size-l-thickness: var( - --spectrum-progress-bar-thickness-large - ); - --system-progress-bar-size-l-spacing-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-progress-bar-size-xl-size-default: var( - --system-progress-bar-size-2800 - ); - --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); - --system-progress-bar-size-xl-thickness: var( - --spectrum-progress-bar-thickness-extra-large - ); - --system-progress-bar-size-xl-spacing-top-to-text: var( - --spectrum-component-top-to-text-300 - ); + --system-progress-bar-animation-ease-in-out-indeterminate: var( + --spectrum-animation-ease-in-out + ); + --system-progress-bar-animation-duration-indeterminate: var( + --spectrum-animation-duration-2000 + ); + --system-progress-bar-corner-radius: var(--spectrum-corner-radius-100); + --system-progress-bar-fill-size-indeterminate: 70%; + --system-progress-bar-size-2400: 192px; + --system-progress-bar-size-2500: 200px; + --system-progress-bar-size-2800: 224px; + --system-progress-bar-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-progress-bar-min-size: var(--spectrum-progress-bar-minimum-width); + --system-progress-bar-max-size: var(--spectrum-progress-bar-maximum-width); + --system-progress-bar-line-height: var(--spectrum-line-height-100); + --system-progress-bar-spacing-label-to: var(--spectrum-spacing-75); + --system-progress-bar-spacing-label-to-text: var(--spectrum-spacing-200); + --system-progress-bar-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-progress-bar-track-color: var(--spectrum-gray-300); + --system-progress-bar-fill-color: var(--spectrum-accent-color-900); + --system-progress-bar-label-and-value-white: var(--spectrum-white); + --system-progress-bar-track-color-white: var( + --spectrum-transparent-white-300 + ); + --system-progress-bar-fill-color-white: var(--spectrum-white); + --system-progress-bar-size-default: var(--system-progress-bar-size-2400); + --system-progress-bar-size-m-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-m-font-size: var(--spectrum-font-size-75); + --system-progress-bar-thickness: var(--spectrum-progress-bar-thickness-large); + --system-progress-bar-size-m-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-m-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-s-size-default: var( + --system-progress-bar-size-2400 + ); + --system-progress-bar-size-s-font-size: var(--spectrum-font-size-75); + --system-progress-bar-size-s-thickness: var( + --spectrum-progress-bar-thickness-small + ); + --system-progress-bar-size-s-spacing-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-progress-bar-size-l-size-default: var( + --system-progress-bar-size-2500 + ); + --system-progress-bar-size-l-font-size: var(--spectrum-font-size-100); + --system-progress-bar-size-l-thickness: var( + --spectrum-progress-bar-thickness-large + ); + --system-progress-bar-size-l-spacing-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-progress-bar-size-xl-size-default: var( + --system-progress-bar-size-2800 + ); + --system-progress-bar-size-xl-font-size: var(--spectrum-font-size-200); + --system-progress-bar-size-xl-thickness: var( + --spectrum-progress-bar-thickness-extra-large + ); + --system-progress-bar-size-xl-spacing-top-to-text: var( + --spectrum-component-top-to-text-300 + ); } :host, :root { - --system-progress-circle-track-border-color: var(--spectrum-gray-300); - --system-progress-circle-fill-border-color: var( - --spectrum-accent-content-color-default - ); - --system-progress-circle-track-border-color-over-background: var( - --spectrum-transparent-white-300 - ); - --system-progress-circle-fill-border-color-over-background: var( - --spectrum-transparent-white-900 - ); - --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --system-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-track-border-style: solid; - --system-progress-circle-small-size: var( - --spectrum-progress-circle-size-small - ); - --system-progress-circle-small-thickness: var( - --spectrum-progress-circle-thickness-small - ); - --system-progress-circle-medium-size: var( - --spectrum-progress-circle-size-medium - ); - --system-progress-circle-medium-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --system-progress-circle-large-size: var( - --spectrum-progress-circle-size-large - ); - --system-progress-circle-large-thickness: var( - --spectrum-progress-circle-thickness-large - ); + --system-progress-circle-track-border-color: var(--spectrum-gray-300); + --system-progress-circle-fill-border-color: var( + --spectrum-accent-content-color-default + ); + --system-progress-circle-track-border-color-over-background: var( + --spectrum-transparent-white-300 + ); + --system-progress-circle-fill-border-color-over-background: var( + --spectrum-transparent-white-900 + ); + --system-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --system-progress-circle-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-track-border-style: solid; + --system-progress-circle-small-size: var( + --spectrum-progress-circle-size-small + ); + --system-progress-circle-small-thickness: var( + --spectrum-progress-circle-thickness-small + ); + --system-progress-circle-medium-size: var( + --spectrum-progress-circle-size-medium + ); + --system-progress-circle-medium-thickness: var( + --spectrum-progress-circle-thickness-medium + ); + --system-progress-circle-large-size: var( + --spectrum-progress-circle-size-large + ); + --system-progress-circle-large-thickness: var( + --spectrum-progress-circle-thickness-large + ); } :host, :root { - --system-radio-button-border-color-default: var(--spectrum-gray-600); - --system-radio-button-border-color-hover: var(--spectrum-gray-700); - --system-radio-button-border-color-down: var(--spectrum-gray-800); - --system-radio-button-border-color-focus: var(--spectrum-gray-700); - --system-radio-neutral-content-color: var( - --spectrum-neutral-content-color-default - ); - --system-radio-neutral-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-radio-neutral-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-radio-neutral-content-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-radio-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-radio-disabled-content-color: var( - --spectrum-disabled-content-color - ); - --system-radio-disabled-border-color: var( - --spectrum-disabled-content-color - ); - --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --system-radio-emphasized-accent-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-accent-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-accent-color-focus: var( - --spectrum-accent-color-1000 - ); - --system-radio-border-width: var(--spectrum-border-width-200); - --system-radio-button-background-color: var(--spectrum-gray-50); - --system-radio-button-checked-border-color-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-radio-button-checked-border-color-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-radio-button-checked-border-color-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-radio-button-checked-border-color-focus: var( - --spectrum-neutral-background-color-selected-focus - ); - --system-radio-line-height: var(--spectrum-line-height-100); - --system-radio-animation-duration: var(--spectrum-animation-duration-100); - --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-radio-height: var(--spectrum-component-height-100); - --system-radio-size-m-height: var(--spectrum-component-height-100); - --system-radio-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-size-m-button-control-size: var( - --spectrum-radio-button-control-size-medium - ); - --system-radio-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); - --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); - --system-radio-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-radio-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-size-m-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-radio-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-size-m-button-top-to-control: var( - --spectrum-radio-button-top-to-control-medium - ); - --system-radio-font-size: var(--spectrum-font-size-100); - --system-radio-size-m-font-size: var(--spectrum-font-size-100); - --system-radio-size-s-height: var(--spectrum-component-height-75); - --system-radio-size-s-button-control-size: var( - --spectrum-radio-button-control-size-small - ); - --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); - --system-radio-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-radio-size-s-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-75 - ); - --system-radio-size-s-button-top-to-control: var( - --spectrum-radio-button-top-to-control-small - ); - --system-radio-size-s-font-size: var(--spectrum-font-size-75); - --system-radio-size-l-height: var(--spectrum-component-height-200); - --system-radio-size-l-button-control-size: var( - --spectrum-radio-button-control-size-large - ); - --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); - --system-radio-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-radio-size-l-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-200 - ); - --system-radio-size-l-button-top-to-control: var( - --spectrum-radio-button-top-to-control-large - ); - --system-radio-size-l-font-size: var(--spectrum-font-size-200); - --system-radio-size-xl-height: var(--spectrum-component-height-300); - --system-radio-size-xl-button-control-size: var( - --spectrum-radio-button-control-size-extra-large - ); - --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); - --system-radio-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-300 - ); - --system-radio-size-xl-label-bottom-to-text: var( - --spectrum-component-bottom-to-text-300 - ); - --system-radio-size-xl-button-top-to-control: var( - --spectrum-radio-button-top-to-control-extra-large - ); - --system-radio-size-xl-font-size: var(--spectrum-font-size-300); - --system-radio-emphasized-button-checked-border-color-default: var( - --spectrum-accent-color-900 - ); - --system-radio-emphasized-button-checked-border-color-hover: var( - --spectrum-accent-color-1000 - ); - --system-radio-emphasized-button-checked-border-color-down: var( - --spectrum-accent-color-1100 - ); - --system-radio-emphasized-button-checked-border-color-focus: var( - --spectrum-accent-color-1000 - ); + --system-radio-button-border-color-default: var(--spectrum-gray-600); + --system-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-radio-button-border-color-down: var(--spectrum-gray-800); + --system-radio-button-border-color-focus: var(--spectrum-gray-700); + --system-radio-neutral-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-radio-neutral-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-radio-neutral-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-radio-neutral-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-radio-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-radio-disabled-content-color: var(--spectrum-disabled-content-color); + --system-radio-disabled-border-color: var(--spectrum-disabled-content-color); + --system-radio-emphasized-accent-color: var(--spectrum-accent-color-900); + --system-radio-emphasized-accent-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-accent-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-accent-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-radio-border-width: var(--spectrum-border-width-200); + --system-radio-button-background-color: var(--spectrum-gray-50); + --system-radio-button-checked-border-color-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-radio-button-checked-border-color-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-radio-button-checked-border-color-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-radio-button-checked-border-color-focus: var( + --spectrum-neutral-background-color-selected-focus + ); + --system-radio-line-height: var(--spectrum-line-height-100); + --system-radio-animation-duration: var(--spectrum-animation-duration-100); + --system-radio-lang-ja-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-zh-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-lang-ko-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-radio-height: var(--spectrum-component-height-100); + --system-radio-size-m-height: var(--spectrum-component-height-100); + --system-radio-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-size-m-button-control-size: var( + --spectrum-radio-button-control-size-medium + ); + --system-radio-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-size-m-text-to-control: var(--spectrum-text-to-control-100); + --system-radio-label-top-to-text: var(--spectrum-component-top-to-text-100); + --system-radio-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-radio-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-size-m-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-100 + ); + --system-radio-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-size-m-button-top-to-control: var( + --spectrum-radio-button-top-to-control-medium + ); + --system-radio-font-size: var(--spectrum-font-size-100); + --system-radio-size-m-font-size: var(--spectrum-font-size-100); + --system-radio-size-s-height: var(--spectrum-component-height-75); + --system-radio-size-s-button-control-size: var( + --spectrum-radio-button-control-size-small + ); + --system-radio-size-s-text-to-control: var(--spectrum-text-to-control-75); + --system-radio-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-radio-size-s-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-75 + ); + --system-radio-size-s-button-top-to-control: var( + --spectrum-radio-button-top-to-control-small + ); + --system-radio-size-s-font-size: var(--spectrum-font-size-75); + --system-radio-size-l-height: var(--spectrum-component-height-200); + --system-radio-size-l-button-control-size: var( + --spectrum-radio-button-control-size-large + ); + --system-radio-size-l-text-to-control: var(--spectrum-text-to-control-200); + --system-radio-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-radio-size-l-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-200 + ); + --system-radio-size-l-button-top-to-control: var( + --spectrum-radio-button-top-to-control-large + ); + --system-radio-size-l-font-size: var(--spectrum-font-size-200); + --system-radio-size-xl-height: var(--spectrum-component-height-300); + --system-radio-size-xl-button-control-size: var( + --spectrum-radio-button-control-size-extra-large + ); + --system-radio-size-xl-text-to-control: var(--spectrum-text-to-control-300); + --system-radio-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-300 + ); + --system-radio-size-xl-label-bottom-to-text: var( + --spectrum-component-bottom-to-text-300 + ); + --system-radio-size-xl-button-top-to-control: var( + --spectrum-radio-button-top-to-control-extra-large + ); + --system-radio-size-xl-font-size: var(--spectrum-font-size-300); + --system-radio-emphasized-button-checked-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-radio-emphasized-button-checked-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-radio-emphasized-button-checked-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-radio-emphasized-button-checked-border-color-focus: var( + --spectrum-accent-color-1000 + ); } :host, :root { - --system-search-border-color-default: var(--spectrum-gray-500); - --system-search-border-color-hover: var(--spectrum-gray-600); - --system-search-border-color-focus: var(--spectrum-gray-800); - --system-search-border-color-focus-hover: var(--spectrum-gray-900); - --system-search-border-color-key-focus: var(--spectrum-gray-900); - --system-search-inline-size: var(--spectrum-field-width); - --system-search-min-inline-multiplier: var( - --spectrum-search-field-minimum-width-multiplier - ); - --system-search-to-help-text: var(--spectrum-help-text-to-component); - --system-search-top-to-text: var(--spectrum-component-top-to-text-100); - --system-search-bottom-to-text: var( - --spectrum-component-bottom-to-text-100 - ); - --system-search-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-search-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-search-font-family: var(--spectrum-sans-font-family-stack); - --system-search-font-weight: var(--spectrum-regular-font-weight); - --system-search-font-style: var(--spectrum-default-font-style); - --system-search-line-height: var(--spectrum-line-height-100); - --system-search-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-search-color-hover: var(--spectrum-neutral-content-color-hover); - --system-search-color-focus: var(--spectrum-neutral-content-color-focus); - --system-search-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-search-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-search-border-width: var(--spectrum-border-width-100); - --system-search-background-color: var(--spectrum-gray-50); - --system-search-color-disabled: var(--spectrum-disabled-content-color); - --system-search-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-search-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); - --system-search-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-size-m-edge-to-visual: var( - --spectrum-component-edge-to-visual-100 - ); - --system-search-block-size: var(--spectrum-component-height-100); - --system-search-size-m-block-size: var(--spectrum-component-height-100); - --system-search-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-search-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); - --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-s-edge-to-visual: var( - --spectrum-component-edge-to-visual-75 - ); - --system-search-size-s-block-size: var(--spectrum-component-height-75); - --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); - --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-l-edge-to-visual: var( - --spectrum-component-edge-to-visual-200 - ); - --system-search-size-l-block-size: var(--spectrum-component-height-200); - --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); - --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); - --system-search-size-xl-edge-to-visual: var( - --spectrum-component-edge-to-visual-300 - ); - --system-search-size-xl-block-size: var(--spectrum-component-height-300); - --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); - --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); - --system-search-quiet-background-color: transparent; - --system-search-quiet-background-color-disabled: transparent; - --system-search-quiet-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-search-quiet-border-radius: 0; - --system-search-quiet-edge-to-visual: var( - --spectrum-field-edge-to-visual-quiet - ); + --system-search-border-color-default: var(--spectrum-gray-500); + --system-search-border-color-hover: var(--spectrum-gray-600); + --system-search-border-color-focus: var(--spectrum-gray-800); + --system-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-search-border-color-key-focus: var(--spectrum-gray-900); + --system-search-inline-size: var(--spectrum-field-width); + --system-search-min-inline-multiplier: var( + --spectrum-search-field-minimum-width-multiplier + ); + --system-search-to-help-text: var(--spectrum-help-text-to-component); + --system-search-top-to-text: var(--spectrum-component-top-to-text-100); + --system-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --system-search-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-search-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-search-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-search-font-family: var(--spectrum-sans-font-family-stack); + --system-search-font-weight: var(--spectrum-regular-font-weight); + --system-search-font-style: var(--spectrum-default-font-style); + --system-search-line-height: var(--spectrum-line-height-100); + --system-search-color-default: var(--spectrum-neutral-content-color-default); + --system-search-color-hover: var(--spectrum-neutral-content-color-hover); + --system-search-color-focus: var(--spectrum-neutral-content-color-focus); + --system-search-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-search-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-search-border-width: var(--spectrum-border-width-100); + --system-search-background-color: var(--spectrum-gray-50); + --system-search-color-disabled: var(--spectrum-disabled-content-color); + --system-search-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-search-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-m-border-radius: var(--spectrum-corner-radius-100); + --system-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --system-search-size-m-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-search-block-size: var(--spectrum-component-height-100); + --system-search-size-m-block-size: var(--spectrum-component-height-100); + --system-search-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-search-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-m-text-to-icon: var(--spectrum-text-to-visual-100); + --system-search-size-s-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-s-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-search-size-s-block-size: var(--spectrum-component-height-75); + --system-search-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-search-size-s-text-to-icon: var(--spectrum-text-to-visual-75); + --system-search-size-l-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-l-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-search-size-l-block-size: var(--spectrum-component-height-200); + --system-search-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-search-size-l-text-to-icon: var(--spectrum-text-to-visual-200); + --system-search-size-xl-border-radius: var(--spectrum-corner-radius-100); + --system-search-size-xl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); + --system-search-size-xl-block-size: var(--spectrum-component-height-300); + --system-search-size-xl-icon-size: var(--spectrum-workflow-icon-size-300); + --system-search-size-xl-text-to-icon: var(--spectrum-text-to-visual-300); + --system-search-quiet-background-color: transparent; + --system-search-quiet-background-color-disabled: transparent; + --system-search-quiet-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-search-quiet-border-radius: 0; + --system-search-quiet-edge-to-visual: var( + --spectrum-field-edge-to-visual-quiet + ); } :host, :root { - --system-side-nav-focus-ring-size: var( - --spectrum-focus-indicator-thickness - ); - --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-side-nav-min-height: var(--spectrum-component-height-100); - --system-side-nav-width: 100%; - --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); - --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); - --system-side-nav-border-radius: var(--spectrum-corner-radius-100); - --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); - --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); - --system-side-nav-inline-padding: var( - --spectrum-component-edge-to-text-100 - ); - --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); - --system-side-nav-top-to-icon: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); - --system-side-nav-bottom-to-label: var( - --spectrum-side-navigation-bottom-to-text - ); - --system-side-nav-start-to-content-second-level: var( - --spectrum-side-navigation-second-level-edge-to-text - ); - --system-side-nav-start-to-content-third-level: var( - --spectrum-side-navigation-third-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-second-level: var( - --spectrum-side-navigation-with-icon-second-level-edge-to-text - ); - --system-side-nav-start-to-content-with-icon-third-level: var( - --spectrum-side-navigation-with-icon-third-level-edge-to-text - ); - --system-side-nav-heading-top-margin: var( - --spectrum-side-navigation-item-to-header - ); - --system-side-nav-heading-bottom-margin: var( - --spectrum-side-navigation-header-to-item - ); - --system-side-nav-background-disabled: transparent; - --system-side-nav-background-default: transparent; - --system-side-nav-background-hover: var(--spectrum-gray-200); - --system-side-nav-item-background-down: var(--spectrum-gray-300); - --system-side-nav-background-key-focus: var(--spectrum-gray-200); - --system-side-nav-item-background-default-selected: var( - --spectrum-gray-200 - ); - --system-side-nav-background-hover-selected: var(--spectrum-gray-300); - --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); - --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); - --system-side-nav-header-color: var(--spectrum-gray-600); - --system-side-nav-content-disabled-color: var( - --spectrum-disabled-content-color - ); - --system-side-nav-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-content-color-default-selected: var( - --spectrum-neutral-content-color-default - ); - --system-side-nav-content-color-hover-selected: var( - --spectrum-neutral-content-color-hover - ); - --system-side-nav-content-color-down-selected: var( - --spectrum-neutral-content-color-down - ); - --system-side-nav-content-color-key-focus-selected: var( - --spectrum-neutral-content-color-key-focus - ); - --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); - --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); - --system-side-nav-text-font-style: var(--spectrum-default-font-style); - --system-side-nav-text-font-size: var(--spectrum-font-size-100); - --system-side-nav-text-line-height: var(--spectrum-line-height-100); - --system-side-nav-top-level-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); - --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); - --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); - --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); - --system-side-nav-header-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); - --system-side-nav-header-font-style: var(--spectrum-default-font-style); - --system-side-nav-header-font-size: var(--spectrum-font-size-75); - --system-side-nav-header-line-height: var(--spectrum-line-height-100); - --system-side-nav-lang-ja-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-text-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-top-level-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ja-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-zh-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - --system-side-nav-lang-ko-header-line-height: var( - --spectrum-cjk-line-height-100 - ); + --system-side-nav-focus-ring-size: var(--spectrum-focus-indicator-thickness); + --system-side-nav-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-side-nav-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-side-nav-min-height: var(--spectrum-component-height-100); + --system-side-nav-width: 100%; + --system-side-nav-min-width: var(--spectrum-side-navigation-minimum-width); + --system-side-nav-max-width: var(--spectrum-side-navigation-maximum-width); + --system-side-nav-border-radius: var(--spectrum-corner-radius-100); + --system-side-nav-icon-size: var(--spectrum-workflow-icon-size-100); + --system-side-nav-icon-spacing: var(--spectrum-text-to-visual-100); + --system-side-nav-inline-padding: var(--spectrum-component-edge-to-text-100); + --system-side-nav-gap: var(--spectrum-side-navigation-item-to-item); + --system-side-nav-top-to-icon: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-side-nav-top-to-label: var(--spectrum-component-top-to-text-100); + --system-side-nav-bottom-to-label: var( + --spectrum-side-navigation-bottom-to-text + ); + --system-side-nav-start-to-content-second-level: var( + --spectrum-side-navigation-second-level-edge-to-text + ); + --system-side-nav-start-to-content-third-level: var( + --spectrum-side-navigation-third-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-second-level: var( + --spectrum-side-navigation-with-icon-second-level-edge-to-text + ); + --system-side-nav-start-to-content-with-icon-third-level: var( + --spectrum-side-navigation-with-icon-third-level-edge-to-text + ); + --system-side-nav-heading-top-margin: var( + --spectrum-side-navigation-item-to-header + ); + --system-side-nav-heading-bottom-margin: var( + --spectrum-side-navigation-header-to-item + ); + --system-side-nav-background-disabled: transparent; + --system-side-nav-background-default: transparent; + --system-side-nav-background-hover: var(--spectrum-gray-200); + --system-side-nav-item-background-down: var(--spectrum-gray-300); + --system-side-nav-background-key-focus: var(--spectrum-gray-200); + --system-side-nav-item-background-default-selected: var(--spectrum-gray-200); + --system-side-nav-background-hover-selected: var(--spectrum-gray-300); + --system-side-nav-item-background-down-selected: var(--spectrum-gray-300); + --system-side-nav-background-key-focus-selected: var(--spectrum-gray-200); + --system-side-nav-header-color: var(--spectrum-gray-600); + --system-side-nav-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --system-side-nav-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-content-color-default-selected: var( + --spectrum-neutral-content-color-default + ); + --system-side-nav-content-color-hover-selected: var( + --spectrum-neutral-content-color-hover + ); + --system-side-nav-content-color-down-selected: var( + --spectrum-neutral-content-color-down + ); + --system-side-nav-content-color-key-focus-selected: var( + --spectrum-neutral-content-color-key-focus + ); + --system-side-nav-text-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-text-font-weight: var(--spectrum-regular-font-weight); + --system-side-nav-text-font-style: var(--spectrum-default-font-style); + --system-side-nav-text-font-size: var(--spectrum-font-size-100); + --system-side-nav-text-line-height: var(--spectrum-line-height-100); + --system-side-nav-top-level-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-side-nav-top-level-font-weight: var(--spectrum-bold-font-weight); + --system-side-nav-top-level-font-style: var(--spectrum-default-font-style); + --system-side-nav-top-level-font-size: var(--spectrum-font-size-100); + --system-side-nav-top-level-line-height: var(--spectrum-line-height-100); + --system-side-nav-header-font-family: var(--spectrum-sans-font-family-stack); + --system-side-nav-header-font-weight: var(--spectrum-medium-font-weight); + --system-side-nav-header-font-style: var(--spectrum-default-font-style); + --system-side-nav-header-font-size: var(--spectrum-font-size-75); + --system-side-nav-header-line-height: var(--spectrum-line-height-100); + --system-side-nav-lang-ja-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-text-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-top-level-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ja-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-zh-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --system-side-nav-lang-ko-header-line-height: var( + --spectrum-cjk-line-height-100 + ); } :host, :root { - --system-slider-track-color: var(--spectrum-gray-300); - --system-slider-track-fill-color: var(--spectrum-gray-700); - --system-slider-ramp-track-color: var(--spectrum-gray-400); - --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --system-slider-handle-background-color: transparent; - --system-slider-handle-background-color-disabled: transparent; - --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --system-slider-handle-border-color: var(--spectrum-gray-700); - --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --system-slider-tick-mark-color: var(--spectrum-gray-300); - --system-slider-handle-border-color-hover: var(--spectrum-gray-800); - --system-slider-handle-border-color-down: var(--spectrum-gray-800); - --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --system-slider-handle-focus-ring-color-key-focus: var( - --spectrum-focus-indicator-color - ); - --system-slider-value-inline-size: 18px; - --system-slider-ramp-track-block-size: var( - --spectrum-slider-ramp-track-height - ); - --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-slider-min-size: var(--spectrum-spacing-900); - --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); - --system-slider-label-margin-start: var(--spectrum-spacing-300); - --system-slider-handle-border-width: var(--spectrum-border-width-200); - --system-slider-track-fill-thickness: var( - --spectrum-slider-track-thickness - ); - --system-slider-tick-mark-width: var(--spectrum-border-width-200); - --system-slider-tick-mark-border-radius: 2px; - --system-slider-tick-handle-background-color: var(--spectrum-gray-75); - --system-slider-track-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-track-fill-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-handle-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-slider-label-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-tick-label-color: var( - --spectrum-neutral-content-color-default - ); - --system-slider-label-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-slider-tick-mark-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); - --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --system-slider-range-track-reset: 0; - --system-slider-font-size: var(--spectrum-font-size-75); - --system-slider-size-m-font-size: var(--spectrum-font-size-75); - --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); - --system-slider-size-m-handle-size: var( - --spectrum-slider-handle-size-medium - ); - --system-slider-control-height: var(--spectrum-component-height-100); - --system-slider-size-m-control-height: var(--spectrum-component-height-100); - --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); - --system-slider-size-m-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-size-m-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-medium - ); - --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); - --system-slider-size-m-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-size-m-control-to-field-label: var( - --spectrum-slider-control-to-field-label-medium - ); - --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); - --system-slider-size-m-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-s-font-size: var(--spectrum-font-size-75); - --system-slider-size-s-handle-size: var( - --spectrum-slider-handle-size-small - ); - --system-slider-size-s-control-height: var(--spectrum-component-height-75); - --system-slider-size-s-handle-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-slider-size-s-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-small - ); - --system-slider-size-s-label-top-to-text: var( - --spectrum-component-top-to-text-75 - ); - --system-slider-size-s-control-to-field-label: var( - --spectrum-slider-control-to-field-label-small - ); - --system-slider-size-s-value-side-padding-inline: var( - --spectrum-spacing-100 - ); - --system-slider-size-l-font-size: var(--spectrum-font-size-100); - --system-slider-size-l-handle-size: var( - --spectrum-slider-handle-size-large - ); - --system-slider-size-l-control-height: var(--spectrum-component-height-200); - --system-slider-size-l-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-l-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-large - ); - --system-slider-size-l-label-top-to-text: var( - --spectrum-component-top-to-text-100 - ); - --system-slider-size-l-control-to-field-label: var( - --spectrum-slider-control-to-field-label-large - ); - --system-slider-size-l-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-l-value-inline-size: 18px; - --system-slider-size-xl-font-size: var(--spectrum-font-size-200); - --system-slider-size-xl-handle-size: var( - --spectrum-slider-handle-size-extra-large - ); - --system-slider-size-xl-control-height: var( - --spectrum-component-height-300 - ); - --system-slider-size-xl-handle-border-radius: calc( - var(--spectrum-corner-radius-200) * 4 - ); - --system-slider-size-xl-handle-border-width-down: var( - --spectrum-slider-handle-border-width-down-extra-large - ); - --system-slider-size-xl-label-top-to-text: var( - --spectrum-component-top-to-text-200 - ); - --system-slider-size-xl-control-to-field-label: var( - --spectrum-slider-control-to-field-label-extra-large - ); - --system-slider-size-xl-value-side-padding-inline: var( - --spectrum-spacing-200 - ); - --system-slider-size-xl-value-inline-size: 22px; + --system-slider-track-color: var(--spectrum-gray-300); + --system-slider-track-fill-color: var(--spectrum-gray-700); + --system-slider-ramp-track-color: var(--spectrum-gray-400); + --system-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --system-slider-handle-background-color: transparent; + --system-slider-handle-background-color-disabled: transparent; + --system-slider-ramp-handle-background-color: var(--spectrum-gray-100); + --system-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --system-slider-handle-border-color: var(--spectrum-gray-700); + --system-slider-handle-disabled-background-color: var(--spectrum-gray-100); + --system-slider-tick-mark-color: var(--spectrum-gray-300); + --system-slider-handle-border-color-hover: var(--spectrum-gray-800); + --system-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --system-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); + --system-slider-value-inline-size: 18px; + --system-slider-ramp-track-block-size: var( + --spectrum-slider-ramp-track-height + ); + --system-slider-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-slider-min-size: var(--spectrum-spacing-900); + --system-slider-track-corner-radius: var(--spectrum-corner-radius-75); + --system-slider-label-margin-start: var(--spectrum-spacing-300); + --system-slider-handle-border-width: var(--spectrum-border-width-200); + --system-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); + --system-slider-tick-mark-width: var(--spectrum-border-width-200); + --system-slider-tick-mark-border-radius: 2px; + --system-slider-tick-handle-background-color: var(--spectrum-gray-75); + --system-slider-track-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-track-fill-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-handle-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-slider-label-text-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-tick-label-color: var( + --spectrum-neutral-content-color-default + ); + --system-slider-label-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-slider-tick-mark-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); + --system-slider-track-handleoffset: var(--spectrum-slider-handle-gap); + --system-slider-range-track-reset: 0; + --system-slider-font-size: var(--spectrum-font-size-75); + --system-slider-size-m-font-size: var(--spectrum-font-size-75); + --system-slider-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-size-m-handle-size: var(--spectrum-slider-handle-size-medium); + --system-slider-control-height: var(--spectrum-component-height-100); + --system-slider-size-m-control-height: var(--spectrum-component-height-100); + --system-slider-handle-border-radius: var(--spectrum-corner-radius-200); + --system-slider-size-m-handle-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-slider-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-size-m-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-medium + ); + --system-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); + --system-slider-size-m-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-size-m-control-to-field-label: var( + --spectrum-slider-control-to-field-label-medium + ); + --system-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-m-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-s-font-size: var(--spectrum-font-size-75); + --system-slider-size-s-handle-size: var(--spectrum-slider-handle-size-small); + --system-slider-size-s-control-height: var(--spectrum-component-height-75); + --system-slider-size-s-handle-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-slider-size-s-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-small + ); + --system-slider-size-s-label-top-to-text: var( + --spectrum-component-top-to-text-75 + ); + --system-slider-size-s-control-to-field-label: var( + --spectrum-slider-control-to-field-label-small + ); + --system-slider-size-s-value-side-padding-inline: var(--spectrum-spacing-100); + --system-slider-size-l-font-size: var(--spectrum-font-size-100); + --system-slider-size-l-handle-size: var(--spectrum-slider-handle-size-large); + --system-slider-size-l-control-height: var(--spectrum-component-height-200); + --system-slider-size-l-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-l-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-large + ); + --system-slider-size-l-label-top-to-text: var( + --spectrum-component-top-to-text-100 + ); + --system-slider-size-l-control-to-field-label: var( + --spectrum-slider-control-to-field-label-large + ); + --system-slider-size-l-value-side-padding-inline: var(--spectrum-spacing-200); + --system-slider-size-l-value-inline-size: 18px; + --system-slider-size-xl-font-size: var(--spectrum-font-size-200); + --system-slider-size-xl-handle-size: var( + --spectrum-slider-handle-size-extra-large + ); + --system-slider-size-xl-control-height: var(--spectrum-component-height-300); + --system-slider-size-xl-handle-border-radius: calc( + var(--spectrum-corner-radius-200) * 4 + ); + --system-slider-size-xl-handle-border-width-down: var( + --spectrum-slider-handle-border-width-down-extra-large + ); + --system-slider-size-xl-label-top-to-text: var( + --spectrum-component-top-to-text-200 + ); + --system-slider-size-xl-control-to-field-label: var( + --spectrum-slider-control-to-field-label-extra-large + ); + --system-slider-size-xl-value-side-padding-inline: var( + --spectrum-spacing-200 + ); + --system-slider-size-xl-value-inline-size: 22px; } :host, :root { - --system-split-view-vertical-width: 100%; - --system-split-view-vertical-gripper-width: 50%; - --system-split-view-vertical-gripper-outer-width: 100%; - --system-split-view-vertical-gripper-reset: 0; - --system-split-view-background-color: var(--spectrum-gray-100); - --system-split-view-content-color: var(--spectrum-body-color); - --system-split-view-handle-background-color: var(--spectrum-gray-300); - --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); - --system-split-view-handle-background-color-down: var(--spectrum-gray-800); - --system-split-view-handle-background-color-focus: var( - --spectrum-focus-indicator-color - ); - --system-split-view-handle-width: var(--spectrum-border-width-200); - --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); - --system-split-view-gripper-width: var(--spectrum-border-width-400); - --system-split-view-gripper-height: 16px; - --system-split-view-gripper-border-width-horizontal: 3px; - --system-split-view-gripper-border-width-vertical: var( - --spectrum-border-width-400 - ); + --system-split-view-vertical-width: 100%; + --system-split-view-vertical-gripper-width: 50%; + --system-split-view-vertical-gripper-outer-width: 100%; + --system-split-view-vertical-gripper-reset: 0; + --system-split-view-background-color: var(--spectrum-gray-100); + --system-split-view-content-color: var(--spectrum-body-color); + --system-split-view-handle-background-color: var(--spectrum-gray-300); + --system-split-view-handle-background-color-hover: var(--spectrum-gray-400); + --system-split-view-handle-background-color-down: var(--spectrum-gray-800); + --system-split-view-handle-background-color-focus: var( + --spectrum-focus-indicator-color + ); + --system-split-view-handle-width: var(--spectrum-border-width-200); + --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75); + --system-split-view-gripper-width: var(--spectrum-border-width-400); + --system-split-view-gripper-height: 16px; + --system-split-view-gripper-border-width-horizontal: 3px; + --system-split-view-gripper-border-width-vertical: var( + --spectrum-border-width-400 + ); } :host, :root { - --system-status-light-corner-radius: 50%; - --system-status-light-font-weight: 400; - --system-status-light-border-width: var(--spectrum-border-width-100); - --system-status-light-line-height: var(--spectrum-line-height-100); - --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-status-light-content-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-status-light-subdued-content-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-status-light-semantic-neutral-color: var( - --spectrum-neutral-visual-color - ); - --system-status-light-semantic-accent-color: var( - --spectrum-accent-visual-color - ); - --system-status-light-semantic-negative-color: var( - --spectrum-negative-visual-color - ); - --system-status-light-semantic-info-color: var( - --spectrum-informative-visual-color - ); - --system-status-light-semantic-notice-color: var( - --spectrum-notice-visual-color - ); - --system-status-light-semantic-positive-color: var( - --spectrum-positive-visual-color - ); - --system-status-light-nonsemantic-gray-color: var( - --spectrum-gray-visual-color - ); - --system-status-light-nonsemantic-red-color: var( - --spectrum-red-visual-color - ); - --system-status-light-nonsemantic-orange-color: var( - --spectrum-orange-visual-color - ); - --system-status-light-nonsemantic-yellow-color: var( - --spectrum-yellow-visual-color - ); - --system-status-light-nonsemantic-chartreuse-color: var( - --spectrum-chartreuse-visual-color - ); - --system-status-light-nonsemantic-celery-color: var( - --spectrum-celery-visual-color - ); - --system-status-light-nonsemantic-green-color: var( - --spectrum-green-visual-color - ); - --system-status-light-nonsemantic-seafoam-color: var( - --spectrum-seafoam-visual-color - ); - --system-status-light-nonsemantic-cyan-color: var( - --spectrum-cyan-visual-color - ); - --system-status-light-nonsemantic-blue-color: var( - --spectrum-blue-visual-color - ); - --system-status-light-nonsemantic-indigo-color: var( - --spectrum-indigo-visual-color - ); - --system-status-light-nonsemantic-purple-color: var( - --spectrum-purple-visual-color - ); - --system-status-light-nonsemantic-fuchsia-color: var( - --spectrum-fuchsia-visual-color - ); - --system-status-light-nonsemantic-magenta-color: var( - --spectrum-magenta-visual-color - ); - --system-status-light-height: var(--spectrum-component-height-100); - --system-status-light-size-m-height: var(--spectrum-component-height-100); - --system-status-light-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-size-m-dot-size: var( - --spectrum-status-light-dot-size-medium - ); - --system-status-light-font-size: var(--spectrum-font-size-100); - --system-status-light-size-m-font-size: var(--spectrum-font-size-100); - --system-status-light-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-size-m-spacing-dot-to-label: var( - --spectrum-text-to-visual-100 - ); - --system-status-light-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-size-m-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-medium - ); - --system-status-light-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-status-light-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-m-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-100 - ); - --system-status-light-size-s-height: var(--spectrum-component-height-75); - --system-status-light-size-s-dot-size: var( - --spectrum-status-light-dot-size-small - ); - --system-status-light-size-s-font-size: var(--spectrum-font-size-75); - --system-status-light-size-s-spacing-dot-to-label: var( - --spectrum-text-to-visual-75 - ); - --system-status-light-size-s-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-small - ); - --system-status-light-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-status-light-size-s-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-75 - ); - --system-status-light-size-l-height: var(--spectrum-component-height-200); - --system-status-light-size-l-dot-size: var( - --spectrum-status-light-dot-size-large - ); - --system-status-light-size-l-font-size: var(--spectrum-font-size-200); - --system-status-light-size-l-spacing-dot-to-label: var( - --spectrum-text-to-visual-200 - ); - --system-status-light-size-l-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-large - ); - --system-status-light-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-status-light-size-l-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-200 - ); - --system-status-light-size-xl-height: var(--spectrum-component-height-300); - --system-status-light-size-xl-dot-size: var( - --spectrum-status-light-dot-size-extra-large - ); - --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); - --system-status-light-size-xl-spacing-dot-to-label: var( - --spectrum-text-to-visual-300 - ); - --system-status-light-size-xl-spacing-top-to-dot: var( - --spectrum-status-light-top-to-dot-extra-large - ); - --system-status-light-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-status-light-size-xl-spacing-bottom-to-label: var( - --spectrum-component-bottom-to-text-300 - ); + --system-status-light-corner-radius: 50%; + --system-status-light-font-weight: 400; + --system-status-light-border-width: var(--spectrum-border-width-100); + --system-status-light-line-height: var(--spectrum-line-height-100); + --system-status-light-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-status-light-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-status-light-subdued-content-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-status-light-semantic-neutral-color: var( + --spectrum-neutral-visual-color + ); + --system-status-light-semantic-accent-color: var( + --spectrum-accent-visual-color + ); + --system-status-light-semantic-negative-color: var( + --spectrum-negative-visual-color + ); + --system-status-light-semantic-info-color: var( + --spectrum-informative-visual-color + ); + --system-status-light-semantic-notice-color: var( + --spectrum-notice-visual-color + ); + --system-status-light-semantic-positive-color: var( + --spectrum-positive-visual-color + ); + --system-status-light-nonsemantic-gray-color: var( + --spectrum-gray-visual-color + ); + --system-status-light-nonsemantic-red-color: var(--spectrum-red-visual-color); + --system-status-light-nonsemantic-orange-color: var( + --spectrum-orange-visual-color + ); + --system-status-light-nonsemantic-yellow-color: var( + --spectrum-yellow-visual-color + ); + --system-status-light-nonsemantic-chartreuse-color: var( + --spectrum-chartreuse-visual-color + ); + --system-status-light-nonsemantic-celery-color: var( + --spectrum-celery-visual-color + ); + --system-status-light-nonsemantic-green-color: var( + --spectrum-green-visual-color + ); + --system-status-light-nonsemantic-seafoam-color: var( + --spectrum-seafoam-visual-color + ); + --system-status-light-nonsemantic-cyan-color: var( + --spectrum-cyan-visual-color + ); + --system-status-light-nonsemantic-blue-color: var( + --spectrum-blue-visual-color + ); + --system-status-light-nonsemantic-indigo-color: var( + --spectrum-indigo-visual-color + ); + --system-status-light-nonsemantic-purple-color: var( + --spectrum-purple-visual-color + ); + --system-status-light-nonsemantic-fuchsia-color: var( + --spectrum-fuchsia-visual-color + ); + --system-status-light-nonsemantic-magenta-color: var( + --spectrum-magenta-visual-color + ); + --system-status-light-height: var(--spectrum-component-height-100); + --system-status-light-size-m-height: var(--spectrum-component-height-100); + --system-status-light-dot-size: var(--spectrum-status-light-dot-size-medium); + --system-status-light-size-m-dot-size: var( + --spectrum-status-light-dot-size-medium + ); + --system-status-light-font-size: var(--spectrum-font-size-100); + --system-status-light-size-m-font-size: var(--spectrum-font-size-100); + --system-status-light-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-size-m-spacing-dot-to-label: var( + --spectrum-text-to-visual-100 + ); + --system-status-light-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-size-m-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-medium + ); + --system-status-light-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-status-light-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-size-m-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-100 + ); + --system-status-light-size-s-height: var(--spectrum-component-height-75); + --system-status-light-size-s-dot-size: var( + --spectrum-status-light-dot-size-small + ); + --system-status-light-size-s-font-size: var(--spectrum-font-size-75); + --system-status-light-size-s-spacing-dot-to-label: var( + --spectrum-text-to-visual-75 + ); + --system-status-light-size-s-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-small + ); + --system-status-light-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-status-light-size-s-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-75 + ); + --system-status-light-size-l-height: var(--spectrum-component-height-200); + --system-status-light-size-l-dot-size: var( + --spectrum-status-light-dot-size-large + ); + --system-status-light-size-l-font-size: var(--spectrum-font-size-200); + --system-status-light-size-l-spacing-dot-to-label: var( + --spectrum-text-to-visual-200 + ); + --system-status-light-size-l-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-large + ); + --system-status-light-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-status-light-size-l-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-200 + ); + --system-status-light-size-xl-height: var(--spectrum-component-height-300); + --system-status-light-size-xl-dot-size: var( + --spectrum-status-light-dot-size-extra-large + ); + --system-status-light-size-xl-font-size: var(--spectrum-font-size-300); + --system-status-light-size-xl-spacing-dot-to-label: var( + --spectrum-text-to-visual-300 + ); + --system-status-light-size-xl-spacing-top-to-dot: var( + --spectrum-status-light-top-to-dot-extra-large + ); + --system-status-light-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-status-light-size-xl-spacing-bottom-to-label: var( + --spectrum-component-bottom-to-text-300 + ); } :host, :root { - --system-stepper-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color: var(--spectrum-gray-500); - --system-stepper-border-color-hover: var(--spectrum-gray-600); - --system-stepper-border-color-focus: var(--spectrum-gray-800); - --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-stepper-border-radius: var(--spectrum-corner-radius-100); - --system-stepper-min-width-multiplier: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-stepper-animation-duration: var(--spectrum-animation-duration-100); - --system-stepper-buttons-border-style: none; - --system-stepper-buttons-border-width: 0; - --system-stepper-buttons-background-color: var(--spectrum-gray-50); - --system-stepper-buttons-border-color: var(--spectrum-gray-500); - --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --system-stepper-buttons-border-color-keyboard-focus: var( - --spectrum-gray-900 - ); - --system-stepper-button-padding: var( - --spectrum-in-field-button-edge-to-fill - ); - --system-stepper-button-border-radius-reset: 0px; - --system-stepper-button-border-width: var(--spectrum-border-width-100); - --system-stepper-border-color-invalid: var( - --spectrum-negative-border-color-default - ); - --system-stepper-border-color-hover-invalid: var( - --spectrum-negative-border-color-hover - ); - --system-stepper-border-color-focus-invalid: var( - --spectrum-negative-border-color-focus - ); - --system-stepper-border-color-focus-hover-invalid: var( - --spectrum-negative-border-color-focus-hover - ); - --system-stepper-border-color-keyboard-focus-invalid: var( - --spectrum-negative-border-color-key-focus - ); - --system-stepper-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-stepper-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); - --system-stepper-button-border-width-disabled: var( - --spectrum-border-width-100 - ); - --system-stepper-buttons-background-color-disabled: var( - --spectrum-gray-100 - ); - --system-stepper-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-size-m-button-width: var( - --spectrum-in-field-button-width-stacked-medium - ); - --system-stepper-height: var(--spectrum-component-height-100); - --system-stepper-size-m-height: var(--spectrum-component-height-100); - --system-stepper-size-s-button-width: var( - --spectrum-in-field-button-width-stacked-small - ); - --system-stepper-size-s-height: var(--spectrum-component-height-75); - --system-stepper-size-l-button-width: var( - --spectrum-in-field-button-width-stacked-large - ); - --system-stepper-size-l-height: var(--spectrum-component-height-200); - --system-stepper-size-xl-button-width: var( - --spectrum-in-field-button-width-stacked-extra-large - ); - --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-stepper-button-background-color-keyboard-focus: var( - --spectrum-gray-200 - ); + --system-stepper-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color: var(--spectrum-gray-500); + --system-stepper-border-color-hover: var(--spectrum-gray-600); + --system-stepper-border-color-focus: var(--spectrum-gray-800); + --system-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-stepper-border-radius: var(--spectrum-corner-radius-100); + --system-stepper-min-width-multiplier: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-stepper-animation-duration: var(--spectrum-animation-duration-100); + --system-stepper-buttons-border-style: none; + --system-stepper-buttons-border-width: 0; + --system-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --system-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-stepper-button-padding: var(--spectrum-in-field-button-edge-to-fill); + --system-stepper-button-border-radius-reset: 0px; + --system-stepper-button-border-width: var(--spectrum-border-width-100); + --system-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-stepper-border-color-hover-invalid: var( + --spectrum-negative-border-color-hover + ); + --system-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-stepper-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-stepper-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-stepper-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-stepper-button-border-color-disabled: var(--spectrum-gray-200); + --system-stepper-button-border-width-disabled: var( + --spectrum-border-width-100 + ); + --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-100); + --system-stepper-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-size-m-button-width: var( + --spectrum-in-field-button-width-stacked-medium + ); + --system-stepper-height: var(--spectrum-component-height-100); + --system-stepper-size-m-height: var(--spectrum-component-height-100); + --system-stepper-size-s-button-width: var( + --spectrum-in-field-button-width-stacked-small + ); + --system-stepper-size-s-height: var(--spectrum-component-height-75); + --system-stepper-size-l-button-width: var( + --spectrum-in-field-button-width-stacked-large + ); + --system-stepper-size-l-height: var(--spectrum-component-height-200); + --system-stepper-size-xl-button-width: var( + --spectrum-in-field-button-width-stacked-extra-large + ); + --system-stepper-size-xl-height: var(--spectrum-component-height-300); + --system-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-200 + ); } :host, :root { - --system-swatch-border-radius: var(--spectrum-corner-radius-100); - --system-swatch-focus-indicator-border-radius: var( - --spectrum-corner-radius-200 - ); - --system-swatch-border-thickness: var(--spectrum-border-width-100); - --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --system-swatch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-opacity: 0.51; - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color: rgba( - var(--spectrum-gray-900-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-icon-border-color: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-opacity) - ); - --system-swatch-border-color-light: rgba( - var(--spectrum-black-rgb), - var(--system-swatch-border-color-light-opacity) - ); - --system-swatch-border-color-selected: var(--spectrum-gray-900); - --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --system-swatch-disabled-icon-color: var(--spectrum-gray-50); - --system-swatch-dash-icon-color: var(--spectrum-gray-800); - --system-swatch-slash-icon-color: var(--spectrum-red-900); - --system-swatch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-swatch-size: var(--spectrum-swatch-size-medium); - --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); - --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --system-swatch-size-m-disabled-icon-size: var( - --spectrum-workflow-icon-size-100 - ); - --system-swatch-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-m-slash-thickness: var( - --spectrum-swatch-slash-thickness-medium - ); - --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); - --system-swatch-size-xs-disabled-icon-size: var( - --spectrum-workflow-icon-size-50 - ); - --system-swatch-size-xs-slash-thickness: var( - --spectrum-swatch-slash-thickness-extra-small - ); - --system-swatch-size-s-size: var(--spectrum-swatch-size-small); - --system-swatch-size-s-disabled-icon-size: var( - --spectrum-workflow-icon-size-75 - ); - --system-swatch-size-s-slash-thickness: var( - --spectrum-swatch-slash-thickness-small - ); - --system-swatch-size-l-size: var(--spectrum-swatch-size-large); - --system-swatch-size-l-disabled-icon-size: var( - --spectrum-workflow-icon-size-200 - ); - --system-swatch-size-l-slash-thickness: var( - --spectrum-swatch-slash-thickness-large - ); + --system-swatch-border-radius: var(--spectrum-corner-radius-100); + --system-swatch-focus-indicator-border-radius: var( + --spectrum-corner-radius-200 + ); + --system-swatch-border-thickness: var(--spectrum-border-width-100); + --system-swatch-border-thickness-selected: var(--spectrum-border-width-200); + --system-swatch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba( + var(--spectrum-gray-900-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-icon-border-color: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-opacity) + ); + --system-swatch-border-color-light: rgba( + var(--spectrum-black-rgb), + var(--system-swatch-border-color-light-opacity) + ); + --system-swatch-border-color-selected: var(--spectrum-gray-900); + --system-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --system-swatch-disabled-icon-color: var(--spectrum-gray-50); + --system-swatch-dash-icon-color: var(--spectrum-gray-800); + --system-swatch-slash-icon-color: var(--spectrum-red-900); + --system-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-swatch-size: var(--spectrum-swatch-size-medium); + --system-swatch-size-m-size: var(--spectrum-swatch-size-medium); + --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); + --system-swatch-size-m-disabled-icon-size: var( + --spectrum-workflow-icon-size-100 + ); + --system-swatch-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-m-slash-thickness: var( + --spectrum-swatch-slash-thickness-medium + ); + --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small); + --system-swatch-size-xs-disabled-icon-size: var( + --spectrum-workflow-icon-size-50 + ); + --system-swatch-size-xs-slash-thickness: var( + --spectrum-swatch-slash-thickness-extra-small + ); + --system-swatch-size-s-size: var(--spectrum-swatch-size-small); + --system-swatch-size-s-disabled-icon-size: var( + --spectrum-workflow-icon-size-75 + ); + --system-swatch-size-s-slash-thickness: var( + --spectrum-swatch-slash-thickness-small + ); + --system-swatch-size-l-size: var(--spectrum-swatch-size-large); + --system-swatch-size-l-disabled-icon-size: var( + --spectrum-workflow-icon-size-200 + ); + --system-swatch-size-l-slash-thickness: var( + --spectrum-swatch-slash-thickness-large + ); } :host, :root { - --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); - --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); - --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); + --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); + --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); + --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); } :host, :root { - --system-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --system-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --system-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --system-opacity-checkerboard-position: left top; + --system-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --system-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --system-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --system-opacity-checkerboard-position: left top; } :host, :root { - --system-switch-handle-border-color-default: var(--spectrum-gray-600); - --system-switch-handle-border-color-hover: var(--spectrum-gray-700); - --system-switch-handle-border-color-down: var(--spectrum-gray-800); - --system-switch-handle-border-color-focus: var(--spectrum-gray-700); - --system-switch-handle-border-color-selected-default: var( - --spectrum-gray-700 - ); - --system-switch-handle-border-color-selected-hover: var( - --spectrum-gray-800 - ); - --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --system-switch-handle-border-color-selected-focus: var( - --spectrum-gray-800 - ); - --system-switch-label-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-switch-label-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-switch-label-color-down: var( - --spectrum-neutral-content-color-down - ); - --system-switch-label-color-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-switch-label-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color: var(--spectrum-gray-300); - --system-switch-background-color-disabled: var(--spectrum-gray-300); - --system-switch-background-color-selected-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-background-color-selected-default: var( - --spectrum-neutral-background-color-selected-default - ); - --system-switch-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-switch-background-color-selected-down: var( - --spectrum-neutral-background-color-selected-down - ); - --system-switch-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-switch-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-switch-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-switch-handle-background-color: var(--spectrum-gray-75); - --system-switch-handle-border-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-switch-disabled-label-color-default: var( - --spectrum-disabled-content-color - ); - --system-switch-emphasized-background-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-background-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-background-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-background-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-default: var( - --spectrum-accent-color-900 - ); - --system-switch-emphasized-handle-border-color-selected-hover: var( - --spectrum-accent-color-1000 - ); - --system-switch-emphasized-handle-border-color-selected-down: var( - --spectrum-accent-color-1100 - ); - --system-switch-emphasized-handle-border-color-selected-focus: var( - --spectrum-accent-color-1000 - ); - --system-switch-min-height: var(--spectrum-component-height-100); - --system-switch-size-m-min-height: var(--spectrum-component-height-100); - --system-switch-control-width: var(--spectrum-switch-control-width-medium); - --system-switch-size-m-control-width: var( - --spectrum-switch-control-width-medium - ); - --system-switch-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-size-m-control-height: var( - --spectrum-switch-control-height-medium - ); - --system-switch-control-label-spacing: var(--spectrum-text-to-control-100); - --system-switch-size-m-control-label-spacing: var( - --spectrum-text-to-control-100 - ); - --system-switch-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-size-m-spacing-top-to-control: var( - --spectrum-switch-top-to-control-medium - ); - --system-switch-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-size-m-spacing-top-to-label: var( - --spectrum-component-top-to-text-100 - ); - --system-switch-font-size: var(--spectrum-font-size-100); - --system-switch-size-m-font-size: var(--spectrum-font-size-100); - --system-switch-size-s-min-height: var(--spectrum-component-height-75); - --system-switch-size-s-control-width: var( - --spectrum-switch-control-width-small - ); - --system-switch-size-s-control-height: var( - --spectrum-switch-control-height-small - ); - --system-switch-size-s-control-label-spacing: var( - --spectrum-text-to-control-75 - ); - --system-switch-size-s-spacing-top-to-control: var( - --spectrum-switch-top-to-control-small - ); - --system-switch-size-s-spacing-top-to-label: var( - --spectrum-component-top-to-text-75 - ); - --system-switch-size-s-font-size: var(--spectrum-font-size-75); - --system-switch-size-l-min-height: var(--spectrum-component-height-200); - --system-switch-size-l-control-width: var( - --spectrum-switch-control-width-large - ); - --system-switch-size-l-control-height: var( - --spectrum-switch-control-height-large - ); - --system-switch-size-l-control-label-spacing: var( - --spectrum-text-to-control-200 - ); - --system-switch-size-l-spacing-top-to-control: var( - --spectrum-switch-top-to-control-large - ); - --system-switch-size-l-spacing-top-to-label: var( - --spectrum-component-top-to-text-200 - ); - --system-switch-size-l-font-size: var(--spectrum-font-size-200); - --system-switch-size-xl-min-height: var(--spectrum-component-height-300); - --system-switch-size-xl-control-width: var( - --spectrum-switch-control-width-extra-large - ); - --system-switch-size-xl-control-height: var( - --spectrum-switch-control-height-extra-large - ); - --system-switch-size-xl-control-label-spacing: var( - --spectrum-text-to-control-300 - ); - --system-switch-size-xl-spacing-top-to-control: var( - --spectrum-switch-top-to-control-extra-large - ); - --system-switch-size-xl-spacing-top-to-label: var( - --spectrum-component-top-to-text-300 - ); - --system-switch-size-xl-font-size: var(--spectrum-font-size-300); + --system-switch-handle-border-color-default: var(--spectrum-gray-600); + --system-switch-handle-border-color-hover: var(--spectrum-gray-700); + --system-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-switch-handle-border-color-focus: var(--spectrum-gray-700); + --system-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); + --system-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --system-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + --system-switch-label-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-switch-label-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-switch-label-color-down: var(--spectrum-neutral-content-color-down); + --system-switch-label-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-switch-label-color-disabled: var(--spectrum-disabled-content-color); + --system-switch-background-color: var(--spectrum-gray-300); + --system-switch-background-color-disabled: var(--spectrum-gray-300); + --system-switch-background-color-selected-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-background-color-selected-default: var( + --spectrum-neutral-background-color-selected-default + ); + --system-switch-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-switch-background-color-selected-down: var( + --spectrum-neutral-background-color-selected-down + ); + --system-switch-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-switch-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-switch-handle-background-color: var(--spectrum-gray-75); + --system-switch-handle-border-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-switch-disabled-label-color-default: var( + --spectrum-disabled-content-color + ); + --system-switch-emphasized-background-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-background-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-background-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-background-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-default: var( + --spectrum-accent-color-900 + ); + --system-switch-emphasized-handle-border-color-selected-hover: var( + --spectrum-accent-color-1000 + ); + --system-switch-emphasized-handle-border-color-selected-down: var( + --spectrum-accent-color-1100 + ); + --system-switch-emphasized-handle-border-color-selected-focus: var( + --spectrum-accent-color-1000 + ); + --system-switch-min-height: var(--spectrum-component-height-100); + --system-switch-size-m-min-height: var(--spectrum-component-height-100); + --system-switch-control-width: var(--spectrum-switch-control-width-medium); + --system-switch-size-m-control-width: var( + --spectrum-switch-control-width-medium + ); + --system-switch-control-height: var(--spectrum-switch-control-height-medium); + --system-switch-size-m-control-height: var( + --spectrum-switch-control-height-medium + ); + --system-switch-control-label-spacing: var(--spectrum-text-to-control-100); + --system-switch-size-m-control-label-spacing: var( + --spectrum-text-to-control-100 + ); + --system-switch-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-size-m-spacing-top-to-control: var( + --spectrum-switch-top-to-control-medium + ); + --system-switch-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-size-m-spacing-top-to-label: var( + --spectrum-component-top-to-text-100 + ); + --system-switch-font-size: var(--spectrum-font-size-100); + --system-switch-size-m-font-size: var(--spectrum-font-size-100); + --system-switch-size-s-min-height: var(--spectrum-component-height-75); + --system-switch-size-s-control-width: var( + --spectrum-switch-control-width-small + ); + --system-switch-size-s-control-height: var( + --spectrum-switch-control-height-small + ); + --system-switch-size-s-control-label-spacing: var( + --spectrum-text-to-control-75 + ); + --system-switch-size-s-spacing-top-to-control: var( + --spectrum-switch-top-to-control-small + ); + --system-switch-size-s-spacing-top-to-label: var( + --spectrum-component-top-to-text-75 + ); + --system-switch-size-s-font-size: var(--spectrum-font-size-75); + --system-switch-size-l-min-height: var(--spectrum-component-height-200); + --system-switch-size-l-control-width: var( + --spectrum-switch-control-width-large + ); + --system-switch-size-l-control-height: var( + --spectrum-switch-control-height-large + ); + --system-switch-size-l-control-label-spacing: var( + --spectrum-text-to-control-200 + ); + --system-switch-size-l-spacing-top-to-control: var( + --spectrum-switch-top-to-control-large + ); + --system-switch-size-l-spacing-top-to-label: var( + --spectrum-component-top-to-text-200 + ); + --system-switch-size-l-font-size: var(--spectrum-font-size-200); + --system-switch-size-xl-min-height: var(--spectrum-component-height-300); + --system-switch-size-xl-control-width: var( + --spectrum-switch-control-width-extra-large + ); + --system-switch-size-xl-control-height: var( + --spectrum-switch-control-height-extra-large + ); + --system-switch-size-xl-control-label-spacing: var( + --spectrum-text-to-control-300 + ); + --system-switch-size-xl-spacing-top-to-control: var( + --spectrum-switch-top-to-control-extra-large + ); + --system-switch-size-xl-spacing-top-to-label: var( + --spectrum-component-top-to-text-300 + ); + --system-switch-size-xl-font-size: var(--spectrum-font-size-300); } :host, :root { - --system-table-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-medium - ); - --system-table-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-medium - ); - --system-table-min-header-height: var(--spectrum-component-height-100); - --system-table-min-row-height: var( - --spectrum-table-row-height-medium-regular - ); - --system-table-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-regular - ); - --system-table-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-regular - ); - --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); - --system-table-border-radius: var(--spectrum-corner-radius-100); - --system-table-border-width: var(--spectrum-table-border-divider-width); - --system-table-outer-border-inline-width: var( - --spectrum-table-border-divider-width - ); - --system-table-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-default-vertical-align: top; - --system-table-header-vertical-align: middle; - --system-table-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-row-font-family: var(--spectrum-sans-font-family-stack); - --system-table-row-font-weight: var(--spectrum-regular-font-weight); - --system-table-row-font-style: var(--spectrum-default-font-style); - --system-table-row-font-size: var(--spectrum-font-size-100); - --system-table-row-line-height: var(--spectrum-line-height-100); - --system-table-border-color: var(--spectrum-gray-300); - --system-table-divider-color: var(--spectrum-gray-300); - --system-table-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-header-text-color: var(--spectrum-body-color); - --system-table-row-background-color: var(--spectrum-gray-50); - --system-table-row-text-color: var( - --spectrum-neutral-content-color-default - ); - --system-table-selected-row-background-color: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity) - ); - --system-table-selected-row-background-color-non-emphasized: rgba( - var(--spectrum-gray-700-rgb), - var(--spectrum-table-selected-row-background-opacity-non-emphasized) - ); - --system-table-row-background-color-hover: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-hover-opacity) - ); - --system-table-row-active-color: rgba( - var(--spectrum-gray-900-rgb), - var(--spectrum-table-row-down-opacity) - ); - --system-table-selected-row-background-color-focus: rgba( - var(--spectrum-blue-900-rgb), - var(--spectrum-table-selected-row-background-opacity-hover) - ); - --system-table-selected-row-background-color-non-emphasized-focus: rgba( - var(--spectrum-gray-700-rgb), - var( - --spectrum-table-selected-row-background-opacity-non-emphasized-hover - ) - ); - --system-table-icon-color-default: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-table-icon-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-table-icon-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-table-icon-color-focus: var( - --spectrum-neutral-subdued-content-color-focus - ); - --system-table-icon-color-focus-hover: var( - --spectrum-neutral-subdued-content-focus-hover - ); - --system-table-icon-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-table-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-medium - ); - --system-table-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-regular - ); - --system-table-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-table-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color-rgb), - var(--spectrum-drop-zone-background-color-opacity) - ); - --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); - --system-table-transition-duration: var(--spectrum-animation-duration-100); - --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --system-table-summary-row-background-color: var(--spectrum-gray-200); - --system-table-section-header-min-height: var( - --spectrum-table-section-header-row-height-medium - ); - --system-table-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-100 - ); - --system-table-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-100 - ); - --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --system-table-section-header-background-color: var(--spectrum-gray-200); - --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); - --system-table-collapsible-disclosure-inline-spacing: 0px; - --system-table-disclosure-icon-size: var(--spectrum-component-height-100); - --system-table-collapsible-icon-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-regular - ); - --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - --system-table-cell-background-color: var( - --system-table-row-background-color - ); - --system-table-selected-cell-background-color: var( - --system-table-selected-row-background-color-non-emphasized - ); - --system-table-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --system-table-size-s-min-header-height: var( - --spectrum-component-height-100 - ); - --system-table-size-s-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-small - ); - --system-table-size-s-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-small - ); - --system-table-size-s-min-row-height: var( - --spectrum-table-row-height-small-regular - ); - --system-table-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-regular - ); - --system-table-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-regular - ); - --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-row-font-size: var(--spectrum-font-size-75); - --system-table-size-s-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-small - ); - --system-table-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-regular - ); - --system-table-size-s-section-header-min-height: var( - --spectrum-table-section-header-row-height-small - ); - --system-table-size-s-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-75 - ); - --system-table-size-s-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-75 - ); - --system-table-size-s-disclosure-icon-size: var( - --spectrum-component-height-75 - ); - --system-table-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-regular - ); - --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); - --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-size-l-min-header-height: var( - --spectrum-component-height-200 - ); - --system-table-size-l-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-large - ); - --system-table-size-l-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-large - ); - --system-table-size-l-min-row-height: var( - --spectrum-table-row-height-large-regular - ); - --system-table-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-regular - ); - --system-table-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-regular - ); - --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-row-font-size: var(--spectrum-font-size-200); - --system-table-size-l-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-large - ); - --system-table-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-regular - ); - --system-table-size-l-section-header-min-height: var( - --spectrum-table-section-header-row-height-large - ); - --system-table-size-l-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-200 - ); - --system-table-size-l-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-200 - ); - --system-table-size-l-disclosure-icon-size: var( - --spectrum-component-height-200 - ); - --system-table-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-regular - ); - --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); - --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-size-xl-min-header-height: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-header-top-to-text: var( - --spectrum-table-column-header-row-top-to-text-extra-large - ); - --system-table-size-xl-header-bottom-to-text: var( - --spectrum-table-column-header-row-bottom-to-text-extra-large - ); - --system-table-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-regular - ); - --system-table-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-regular - ); - --system-table-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-regular - ); - --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); - --system-table-size-xl-header-checkbox-block-spacing: var( - --spectrum-table-header-row-checkbox-to-top-extra-large - ); - --system-table-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-regular - ); - --system-table-size-xl-section-header-min-height: var( - --spectrum-table-section-header-row-height-extra-large - ); - --system-table-size-xl-section-header-block-start-spacing: var( - --spectrum-component-top-to-text-300 - ); - --system-table-size-xl-section-header-block-end-spacing: var( - --spectrum-component-bottom-to-text-300 - ); - --system-table-size-xl-disclosure-icon-size: var( - --spectrum-component-height-300 - ); - --system-table-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular - ); - --system-table-size-xl-thumbnail-to-text: var( - --spectrum-text-to-visual-300 - ); - --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); - --system-table-compact-min-row-height: var( - --spectrum-table-row-height-medium-compact - ); - --system-table-compact-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-compact - ); - --system-table-compact-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-compact - ); - --system-table-compact-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-compact - ); - --system-table-compact-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-compact - ); - --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); - --system-table-compact-size-s-min-row-height: var( - --spectrum-table-row-height-small-compact - ); - --system-table-compact-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-compact - ); - --system-table-compact-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-compact - ); - --system-table-compact-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-compact - ); - --system-table-compact-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-compact - ); - --system-table-compact-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-50 - ); - --system-table-compact-size-l-min-row-height: var( - --spectrum-table-row-height-large-compact - ); - --system-table-compact-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-compact - ); - --system-table-compact-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-compact - ); - --system-table-compact-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-compact - ); - --system-table-compact-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-compact - ); - --system-table-compact-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-compact-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-compact - ); - --system-table-compact-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-compact - ); - --system-table-compact-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact - ); - --system-table-compact-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-500 - ); - --system-table-spacious-min-row-height: var( - --spectrum-table-row-height-medium-spacious - ); - --system-table-spacious-row-top-to-text: var( - --spectrum-table-row-top-to-text-medium-spacious - ); - --system-table-spacious-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-medium-spacious - ); - --system-table-spacious-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-medium-spacious - ); - --system-table-spacious-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-medium-spacious - ); - --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-table-spacious-size-s-min-row-height: var( - --spectrum-table-row-height-small-spacious - ); - --system-table-spacious-size-s-row-top-to-text: var( - --spectrum-table-row-top-to-text-small-spacious - ); - --system-table-spacious-size-s-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-small-spacious - ); - --system-table-spacious-size-s-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-small-spacious - ); - --system-table-spacious-size-s-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-small-spacious - ); - --system-table-spacious-size-s-thumbnail-size: var( - --spectrum-thumbnail-size-300 - ); - --system-table-spacious-size-l-min-row-height: var( - --spectrum-table-row-height-large-spacious - ); - --system-table-spacious-size-l-row-top-to-text: var( - --spectrum-table-row-top-to-text-large-spacious - ); - --system-table-spacious-size-l-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-large-spacious - ); - --system-table-spacious-size-l-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-large-spacious - ); - --system-table-spacious-size-l-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-large-spacious - ); - --system-table-spacious-size-l-thumbnail-size: var( - --spectrum-thumbnail-size-700 - ); - --system-table-spacious-size-xl-min-row-height: var( - --spectrum-table-row-height-extra-large-spacious - ); - --system-table-spacious-size-xl-row-top-to-text: var( - --spectrum-table-row-top-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-bottom-to-text: var( - --spectrum-table-row-bottom-to-text-extra-large-spacious - ); - --system-table-spacious-size-xl-row-checkbox-block-spacing: var( - --spectrum-table-row-checkbox-to-top-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-block-spacing: var( - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious - ); - --system-table-spacious-size-xl-thumbnail-size: var( - --spectrum-thumbnail-size-800 - ); - --system-table-emphasized-selected-cell-background-color: var( - --system-table-selected-row-background-color - ); - --system-table-emphasized-selected-cell-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --system-table-quiet-border-radius: 0px; - --system-table-quiet-outer-border-inline-width: 0px; - --system-table-quiet-header-background-color: var( - --spectrum-transparent-white-100 - ); - --system-table-quiet-row-background-color: var( - --spectrum-transparent-white-100 - ); + --system-table-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-medium + ); + --system-table-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-medium + ); + --system-table-min-header-height: var(--spectrum-component-height-100); + --system-table-min-row-height: var( + --spectrum-table-row-height-medium-regular + ); + --system-table-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-regular + ); + --system-table-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-regular + ); + --system-table-cell-inline-space: var(--spectrum-table-edge-to-content); + --system-table-border-radius: var(--spectrum-corner-radius-100); + --system-table-border-width: var(--spectrum-table-border-divider-width); + --system-table-outer-border-inline-width: var( + --spectrum-table-border-divider-width + ); + --system-table-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-default-vertical-align: top; + --system-table-header-vertical-align: middle; + --system-table-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-row-font-family: var(--spectrum-sans-font-family-stack); + --system-table-row-font-weight: var(--spectrum-regular-font-weight); + --system-table-row-font-style: var(--spectrum-default-font-style); + --system-table-row-font-size: var(--spectrum-font-size-100); + --system-table-row-line-height: var(--spectrum-line-height-100); + --system-table-border-color: var(--spectrum-gray-300); + --system-table-divider-color: var(--spectrum-gray-300); + --system-table-header-background-color: var(--spectrum-transparent-white-100); + --system-table-header-text-color: var(--spectrum-body-color); + --system-table-row-background-color: var(--spectrum-gray-50); + --system-table-row-text-color: var(--spectrum-neutral-content-color-default); + --system-table-selected-row-background-color: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity) + ); + --system-table-selected-row-background-color-non-emphasized: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized) + ); + --system-table-row-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-hover-opacity) + ); + --system-table-row-active-color: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-table-row-down-opacity) + ); + --system-table-selected-row-background-color-focus: rgba( + var(--spectrum-blue-900-rgb), + var(--spectrum-table-selected-row-background-opacity-hover) + ); + --system-table-selected-row-background-color-non-emphasized-focus: rgba( + var(--spectrum-gray-700-rgb), + var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover) + ); + --system-table-icon-color-default: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-table-icon-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-table-icon-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-table-icon-color-focus: var( + --spectrum-neutral-subdued-content-color-focus + ); + --system-table-icon-color-focus-hover: var( + --spectrum-neutral-subdued-content-focus-hover + ); + --system-table-icon-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-table-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-medium + ); + --system-table-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-regular + ); + --system-table-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-table-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-table-drop-zone-background-color: rgba( + var(--spectrum-drop-zone-background-color-rgb), + var(--spectrum-drop-zone-background-color-opacity) + ); + --system-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + --system-table-transition-duration: var(--spectrum-animation-duration-100); + --system-table-summary-row-font-weight: var(--spectrum-bold-font-weight); + --system-table-summary-row-background-color: var(--spectrum-gray-200); + --system-table-section-header-min-height: var( + --spectrum-table-section-header-row-height-medium + ); + --system-table-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-100 + ); + --system-table-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-100 + ); + --system-table-section-header-font-weight: var(--spectrum-bold-font-weight); + --system-table-section-header-background-color: var(--spectrum-gray-200); + --system-table-collapsible-tier-indent: var(--spectrum-spacing-300); + --system-table-collapsible-disclosure-inline-spacing: 0px; + --system-table-disclosure-icon-size: var(--spectrum-component-height-100); + --system-table-collapsible-icon-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-table-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-regular + ); + --system-table-thumbnail-size: var(--spectrum-thumbnail-size-300); + --system-table-cell-background-color: var( + --system-table-row-background-color + ); + --system-table-selected-cell-background-color: var( + --system-table-selected-row-background-color-non-emphasized + ); + --system-table-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-non-emphasized-focus + ); + --system-table-size-s-min-header-height: var(--spectrum-component-height-100); + --system-table-size-s-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-small + ); + --system-table-size-s-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-small + ); + --system-table-size-s-min-row-height: var( + --spectrum-table-row-height-small-regular + ); + --system-table-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-regular + ); + --system-table-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-regular + ); + --system-table-size-s-icon-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-row-font-size: var(--spectrum-font-size-75); + --system-table-size-s-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-small + ); + --system-table-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-regular + ); + --system-table-size-s-section-header-min-height: var( + --spectrum-table-section-header-row-height-small + ); + --system-table-size-s-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-75 + ); + --system-table-size-s-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-75 + ); + --system-table-size-s-disclosure-icon-size: var( + --spectrum-component-height-75 + ); + --system-table-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-regular + ); + --system-table-size-s-thumbnail-to-text: var(--spectrum-text-to-visual-100); + --system-table-size-s-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-size-l-min-header-height: var(--spectrum-component-height-200); + --system-table-size-l-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-large + ); + --system-table-size-l-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-large + ); + --system-table-size-l-min-row-height: var( + --spectrum-table-row-height-large-regular + ); + --system-table-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-regular + ); + --system-table-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-regular + ); + --system-table-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-row-font-size: var(--spectrum-font-size-200); + --system-table-size-l-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-large + ); + --system-table-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-regular + ); + --system-table-size-l-section-header-min-height: var( + --spectrum-table-section-header-row-height-large + ); + --system-table-size-l-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-200 + ); + --system-table-size-l-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-200 + ); + --system-table-size-l-disclosure-icon-size: var( + --spectrum-component-height-200 + ); + --system-table-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-regular + ); + --system-table-size-l-thumbnail-to-text: var(--spectrum-text-to-visual-200); + --system-table-size-l-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-size-xl-min-header-height: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-header-top-to-text: var( + --spectrum-table-column-header-row-top-to-text-extra-large + ); + --system-table-size-xl-header-bottom-to-text: var( + --spectrum-table-column-header-row-bottom-to-text-extra-large + ); + --system-table-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-regular + ); + --system-table-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-regular + ); + --system-table-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-regular + ); + --system-table-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-row-font-size: var(--spectrum-font-size-300); + --system-table-size-xl-header-checkbox-block-spacing: var( + --spectrum-table-header-row-checkbox-to-top-extra-large + ); + --system-table-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-regular + ); + --system-table-size-xl-section-header-min-height: var( + --spectrum-table-section-header-row-height-extra-large + ); + --system-table-size-xl-section-header-block-start-spacing: var( + --spectrum-component-top-to-text-300 + ); + --system-table-size-xl-section-header-block-end-spacing: var( + --spectrum-component-bottom-to-text-300 + ); + --system-table-size-xl-disclosure-icon-size: var( + --spectrum-component-height-300 + ); + --system-table-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular + ); + --system-table-size-xl-thumbnail-to-text: var(--spectrum-text-to-visual-300); + --system-table-size-xl-thumbnail-size: var(--spectrum-thumbnail-size-700); + --system-table-compact-min-row-height: var( + --spectrum-table-row-height-medium-compact + ); + --system-table-compact-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-compact + ); + --system-table-compact-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-compact + ); + --system-table-compact-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-compact + ); + --system-table-compact-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-compact + ); + --system-table-compact-thumbnail-size: var(--spectrum-thumbnail-size-200); + --system-table-compact-size-s-min-row-height: var( + --spectrum-table-row-height-small-compact + ); + --system-table-compact-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-compact + ); + --system-table-compact-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-compact + ); + --system-table-compact-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-compact + ); + --system-table-compact-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-compact + ); + --system-table-compact-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-50 + ); + --system-table-compact-size-l-min-row-height: var( + --spectrum-table-row-height-large-compact + ); + --system-table-compact-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-compact + ); + --system-table-compact-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-compact + ); + --system-table-compact-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-compact + ); + --system-table-compact-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-compact + ); + --system-table-compact-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-compact-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-compact + ); + --system-table-compact-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-compact + ); + --system-table-compact-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact + ); + --system-table-compact-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-500 + ); + --system-table-spacious-min-row-height: var( + --spectrum-table-row-height-medium-spacious + ); + --system-table-spacious-row-top-to-text: var( + --spectrum-table-row-top-to-text-medium-spacious + ); + --system-table-spacious-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-medium-spacious + ); + --system-table-spacious-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-medium-spacious + ); + --system-table-spacious-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-medium-spacious + ); + --system-table-spacious-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-table-spacious-size-s-min-row-height: var( + --spectrum-table-row-height-small-spacious + ); + --system-table-spacious-size-s-row-top-to-text: var( + --spectrum-table-row-top-to-text-small-spacious + ); + --system-table-spacious-size-s-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-small-spacious + ); + --system-table-spacious-size-s-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-small-spacious + ); + --system-table-spacious-size-s-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-small-spacious + ); + --system-table-spacious-size-s-thumbnail-size: var( + --spectrum-thumbnail-size-300 + ); + --system-table-spacious-size-l-min-row-height: var( + --spectrum-table-row-height-large-spacious + ); + --system-table-spacious-size-l-row-top-to-text: var( + --spectrum-table-row-top-to-text-large-spacious + ); + --system-table-spacious-size-l-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-large-spacious + ); + --system-table-spacious-size-l-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-large-spacious + ); + --system-table-spacious-size-l-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-large-spacious + ); + --system-table-spacious-size-l-thumbnail-size: var( + --spectrum-thumbnail-size-700 + ); + --system-table-spacious-size-xl-min-row-height: var( + --spectrum-table-row-height-extra-large-spacious + ); + --system-table-spacious-size-xl-row-top-to-text: var( + --spectrum-table-row-top-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-bottom-to-text: var( + --spectrum-table-row-bottom-to-text-extra-large-spacious + ); + --system-table-spacious-size-xl-row-checkbox-block-spacing: var( + --spectrum-table-row-checkbox-to-top-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-block-spacing: var( + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious + ); + --system-table-spacious-size-xl-thumbnail-size: var( + --spectrum-thumbnail-size-800 + ); + --system-table-emphasized-selected-cell-background-color: var( + --system-table-selected-row-background-color + ); + --system-table-emphasized-selected-cell-background-color-focus: var( + --system-table-selected-row-background-color-focus + ); + --system-table-quiet-border-radius: 0px; + --system-table-quiet-outer-border-inline-width: 0px; + --system-table-quiet-header-background-color: var( + --spectrum-transparent-white-100 + ); + --system-table-quiet-row-background-color: var( + --spectrum-transparent-white-100 + ); } :host, :root { - --system-tabs-font-weight: var(--spectrum-default-font-weight); - --system-tabs-item-height: var(--spectrum-tab-item-height-medium); - --system-tabs-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-medium - ); - --system-tabs-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-medium - ); - --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); - --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); - --system-tabs-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-medium - ); - --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); - --system-tabs-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-medium - ); - --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); - --system-tabs-color-selected: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tabs-color-key-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tabs-color-disabled: var(--spectrum-gray-500); - --system-tabs-font-family: var(--spectrum-sans-font-family-stack); - --system-tabs-font-style: var(--spectrum-default-font-style); - --system-tabs-font-size: var(--spectrum-font-size-100); - --system-tabs-line-height: var(--spectrum-line-height-100); - --system-tabs-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-tabs-focus-indicator-border-radius: var( - --spectrum-corner-radius-100 - ); - --system-tabs-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-medium - ); - --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --system-tabs-selection-indicator-color: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tabs-list-background-direction: top; - --system-tabs-divider-background-color: var(--spectrum-gray-300); - --system-tabs-divider-size: var(--spectrum-border-width-200); - --system-tabs-divider-border-radius: 1px; - --system-tabs-animation-duration: var(--spectrum-animation-duration-100); - --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); - --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); - --system-tabs-size-s-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-small - ); - --system-tabs-size-s-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-small - ); - --system-tabs-size-s-start-to-edge: var( - --spectrum-tab-item-start-to-edge-small - ); - --system-tabs-size-s-top-to-text: var( - --spectrum-tab-item-top-to-text-small - ); - --system-tabs-size-s-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-small - ); - --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); - --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); - --system-tabs-size-s-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-small - ); - --system-tabs-size-s-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-small - ); - --system-tabs-size-s-font-size: var(--spectrum-font-size-75); - --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); - --system-tabs-size-l-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-large - ); - --system-tabs-size-l-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-large - ); - --system-tabs-size-l-start-to-edge: var( - --spectrum-tab-item-start-to-edge-large - ); - --system-tabs-size-l-top-to-text: var( - --spectrum-tab-item-top-to-text-large - ); - --system-tabs-size-l-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-large - ); - --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); - --system-tabs-size-l-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-large - ); - --system-tabs-size-l-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-large - ); - --system-tabs-size-l-font-size: var(--spectrum-font-size-200); - --system-tabs-size-xl-item-height: var( - --spectrum-tab-item-height-extra-large - ); - --system-tabs-size-xl-item-horizontal-spacing: var( - --spectrum-tab-item-to-tab-item-horizontal-extra-large - ); - --system-tabs-size-xl-item-vertical-spacing: var( - --spectrum-tab-item-to-tab-item-vertical-extra-large - ); - --system-tabs-size-xl-start-to-edge: var( - --spectrum-tab-item-start-to-edge-extra-large - ); - --system-tabs-size-xl-top-to-text: var( - --spectrum-tab-item-top-to-text-extra-large - ); - --system-tabs-size-xl-bottom-to-text: var( - --spectrum-tab-item-bottom-to-text-extra-large - ); - --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); - --system-tabs-size-xl-top-to-icon: var( - --spectrum-tab-item-top-to-workflow-icon-extra-large - ); - --system-tabs-size-xl-focus-indicator-gap: var( - --spectrum-tab-item-focus-indicator-gap-extra-large - ); - --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); - --system-tabs-emphasized-color-selected: var( - --spectrum-accent-content-color-default - ); - --system-tabs-emphasized-color-hover: var( - --spectrum-accent-content-color-hover - ); - --system-tabs-emphasized-color-key-focus: var( - --spectrum-accent-content-color-key-focus - ); - --system-tabs-emphasized-selection-indicator-color: var( - --spectrum-accent-content-color-default - ); + --system-tabs-font-weight: var(--spectrum-default-font-weight); + --system-tabs-item-height: var(--spectrum-tab-item-height-medium); + --system-tabs-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-medium + ); + --system-tabs-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-medium + ); + --system-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium); + --system-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium); + --system-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium); + --system-tabs-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tabs-icon-to-text: var(--spectrum-text-to-visual-100); + --system-tabs-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-medium + ); + --system-tabs-color: var(--spectrum-neutral-subdued-content-color-default); + --system-tabs-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tabs-color-key-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tabs-color-disabled: var(--spectrum-gray-500); + --system-tabs-font-family: var(--spectrum-sans-font-family-stack); + --system-tabs-font-style: var(--spectrum-default-font-style); + --system-tabs-font-size: var(--spectrum-font-size-100); + --system-tabs-line-height: var(--spectrum-line-height-100); + --system-tabs-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-tabs-focus-indicator-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-tabs-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-medium + ); + --system-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --system-tabs-selection-indicator-color: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tabs-list-background-direction: top; + --system-tabs-divider-background-color: var(--spectrum-gray-300); + --system-tabs-divider-size: var(--spectrum-border-width-200); + --system-tabs-divider-border-radius: 1px; + --system-tabs-animation-duration: var(--spectrum-animation-duration-100); + --system-tabs-animation-ease: var(--spectrum-animation-ease-in-out); + --system-tabs-size-s-item-height: var(--spectrum-tab-item-height-small); + --system-tabs-size-s-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-small + ); + --system-tabs-size-s-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-small + ); + --system-tabs-size-s-start-to-edge: var( + --spectrum-tab-item-start-to-edge-small + ); + --system-tabs-size-s-top-to-text: var(--spectrum-tab-item-top-to-text-small); + --system-tabs-size-s-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-small + ); + --system-tabs-size-s-icon-size: var(--spectrum-workflow-icon-size-50); + --system-tabs-size-s-icon-to-text: var(--spectrum-text-to-visual-75); + --system-tabs-size-s-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-small + ); + --system-tabs-size-s-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-small + ); + --system-tabs-size-s-font-size: var(--spectrum-font-size-75); + --system-tabs-size-l-item-height: var(--spectrum-tab-item-height-large); + --system-tabs-size-l-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-large + ); + --system-tabs-size-l-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-large + ); + --system-tabs-size-l-start-to-edge: var( + --spectrum-tab-item-start-to-edge-large + ); + --system-tabs-size-l-top-to-text: var(--spectrum-tab-item-top-to-text-large); + --system-tabs-size-l-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-large + ); + --system-tabs-size-l-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tabs-size-l-icon-to-text: var(--spectrum-text-to-visual-200); + --system-tabs-size-l-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-large + ); + --system-tabs-size-l-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-large + ); + --system-tabs-size-l-font-size: var(--spectrum-font-size-200); + --system-tabs-size-xl-item-height: var( + --spectrum-tab-item-height-extra-large + ); + --system-tabs-size-xl-item-horizontal-spacing: var( + --spectrum-tab-item-to-tab-item-horizontal-extra-large + ); + --system-tabs-size-xl-item-vertical-spacing: var( + --spectrum-tab-item-to-tab-item-vertical-extra-large + ); + --system-tabs-size-xl-start-to-edge: var( + --spectrum-tab-item-start-to-edge-extra-large + ); + --system-tabs-size-xl-top-to-text: var( + --spectrum-tab-item-top-to-text-extra-large + ); + --system-tabs-size-xl-bottom-to-text: var( + --spectrum-tab-item-bottom-to-text-extra-large + ); + --system-tabs-size-xl-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tabs-size-xl-icon-to-text: var(--spectrum-text-to-visual-300); + --system-tabs-size-xl-top-to-icon: var( + --spectrum-tab-item-top-to-workflow-icon-extra-large + ); + --system-tabs-size-xl-focus-indicator-gap: var( + --spectrum-tab-item-focus-indicator-gap-extra-large + ); + --system-tabs-size-xl-font-size: var(--spectrum-font-size-300); + --system-tabs-emphasized-color-selected: var( + --spectrum-accent-content-color-default + ); + --system-tabs-emphasized-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-tabs-emphasized-color-key-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-tabs-emphasized-selection-indicator-color: var( + --spectrum-accent-content-color-default + ); } :host, :root { - --system-tag-border-color: var(--spectrum-gray-700); - --system-tag-border-color-hover: var(--spectrum-gray-800); - --system-tag-border-color-active: var(--spectrum-gray-900); - --system-tag-border-color-focus: var(--spectrum-gray-800); - --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - --system-tag-background-color: var(--spectrum-gray-75); - --system-tag-background-color-hover: var(--spectrum-gray-75); - --system-tag-background-color-active: var(--spectrum-gray-200); - --system-tag-background-color-focus: var(--spectrum-gray-75); - --system-tag-content-color: var( - --spectrum-neutral-subdued-content-color-default - ); - --system-tag-content-color-hover: var( - --spectrum-neutral-subdued-content-color-hover - ); - --system-tag-content-color-active: var( - --spectrum-neutral-subdued-content-color-down - ); - --system-tag-content-color-focus: var( - --spectrum-neutral-subdued-content-color-key-focus - ); - --system-tag-border-color-selected: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-tag-border-color-selected-hover: var( - --spectrum-neutral-subdued-background-color-hover - ); - --system-tag-border-color-selected-active: var( - --spectrum-neutral-subdued-background-color-down - ); - --system-tag-border-color-selected-focus: var( - --spectrum-neutral-subdued-background-color-key-focus - ); - --system-tag-border-color-disabled: transparent; - --system-tag-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-tag-size-small-spacing-inline-start: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-small-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-75 - ); - --system-tag-size-small-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-75 - ); - --system-tag-size-medium-spacing-inline-start: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-medium-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-100 - ); - --system-tag-size-medium-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-100 - ); - --system-tag-size-large-spacing-inline-start: var( - --spectrum-component-edge-to-visual-200 - ); - --system-tag-size-large-label-spacing-inline-end: var( - --spectrum-component-edge-to-text-200 - ); - --system-tag-size-large-clear-button-spacing-inline-end: var( - --spectrum-component-edge-to-visual-200 - ); - --system-tag-avatar-opacity-disabled: 0.3; - --system-tag-animation-duration: var(--spectrum-animation-duration-100); - --system-tag-border-width: var(--spectrum-border-width-100); - --system-tag-focus-ring-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); - --system-tag-label-line-height: var(--spectrum-line-height-100); - --system-tag-label-font-weight: var(--spectrum-regular-font-weight); - --system-tag-content-color-selected: var(--spectrum-gray-50); - --system-tag-background-color-selected: var( - --spectrum-neutral-background-color-selected-default - ); - --system-tag-background-color-selected-hover: var( - --spectrum-neutral-background-color-selected-hover - ); - --system-tag-background-color-selected-active: var( - --spectrum-neutral-background-color-selected-down - ); - --system-tag-background-color-selected-focus: var( - --spectrum-neutral-background-color-selected-key-focus - ); - --system-tag-border-color-invalid: var(--spectrum-negative-color-900); - --system-tag-border-color-invalid-hover: var( - --spectrum-negative-color-1000 - ); - --system-tag-border-color-invalid-active: var( - --spectrum-negative-color-1100 - ); - --system-tag-border-color-invalid-focus: var( - --spectrum-negative-color-1000 - ); - --system-tag-content-color-invalid: var( - --spectrum-negative-content-color-default - ); - --system-tag-content-color-invalid-hover: var( - --spectrum-negative-content-color-hover - ); - --system-tag-content-color-invalid-active: var( - --spectrum-negative-content-color-down - ); - --system-tag-content-color-invalid-focus: var( - --spectrum-negative-content-color-key-focus - ); - --system-tag-border-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-border-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-border-color-invalid-selected-focus: var( - --spectrum-negative-background-color-down - ); - --system-tag-border-color-invalid-selected-active: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-background-color-invalid-selected: var( - --spectrum-negative-background-color-default - ); - --system-tag-background-color-invalid-selected-hover: var( - --spectrum-negative-background-color-hover - ); - --system-tag-background-color-invalid-selected-active: var( - --spectrum-negative-background-color-down - ); - --system-tag-background-color-invalid-selected-focus: var( - --spectrum-negative-background-color-key-focus - ); - --system-tag-content-color-invalid-selected: var(--spectrum-white); - --system-tag-border-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-border-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-border-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-border-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-background-color-emphasized: var( - --spectrum-accent-background-color-default - ); - --system-tag-background-color-emphasized-hover: var( - --spectrum-accent-background-color-hover - ); - --system-tag-background-color-emphasized-active: var( - --spectrum-accent-background-color-down - ); - --system-tag-background-color-emphasized-focus: var( - --spectrum-accent-background-color-key-focus - ); - --system-tag-content-color-emphasized: var(--spectrum-white); - --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); - --system-tag-height: var(--spectrum-component-height-100); - --system-tag-size-m-height: var(--spectrum-component-height-100); - --system-tag-font-size: var(--spectrum-font-size-100); - --system-tag-size-m-font-size: var(--spectrum-font-size-100); - --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); - --system-tag-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-size-m-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-100 - ); - --system-tag-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-size-m-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-medium - ); - --system-tag-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-size-m-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-100 - ); - --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-icon-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-size-m-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-medium - ); - --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); - --system-tag-size-m-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-100 - ); - --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); - --system-tag-size-m-label-spacing-block: var( - --spectrum-component-top-to-text-100 - ); - --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); - --system-tag-size-m-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --system-tag-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-size-m-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --system-tag-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-size-m-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --system-tag-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-m-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --system-tag-size-s-height: var(--spectrum-component-height-75); - --system-tag-size-s-font-size: var(--spectrum-font-size-75); - --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); - --system-tag-size-s-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-small - ); - --system-tag-size-s-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tag-size-s-icon-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-small - ); - --system-tag-size-s-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-75 - ); - --system-tag-size-s-label-spacing-block: var( - --spectrum-component-top-to-text-75 - ); - --system-tag-size-s-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --system-tag-size-s-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --system-tag-size-s-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --system-tag-size-s-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --system-tag-size-l-height: var(--spectrum-component-height-200); - --system-tag-size-l-font-size: var(--spectrum-font-size-200); - --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); - --system-tag-size-l-clear-button-spacing-inline-start: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-clear-button-spacing-block: var( - --spectrum-tag-top-to-cross-icon-large - ); - --system-tag-size-l-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-block-end: var( - --spectrum-component-top-to-workflow-icon-200 - ); - --system-tag-size-l-icon-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-avatar-spacing-block-start: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-block-end: var( - --spectrum-tag-top-to-avatar-large - ); - --system-tag-size-l-avatar-spacing-inline-end: var( - --spectrum-text-to-visual-200 - ); - --system-tag-size-l-label-spacing-block: var( - --spectrum-component-top-to-text-200 - ); - --system-tag-size-l-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --system-tag-size-l-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --system-tag-size-l-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --system-tag-size-l-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); + --system-tag-border-color: var(--spectrum-gray-700); + --system-tag-border-color-hover: var(--spectrum-gray-800); + --system-tag-border-color-active: var(--spectrum-gray-900); + --system-tag-border-color-focus: var(--spectrum-gray-800); + --system-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + --system-tag-background-color: var(--spectrum-gray-75); + --system-tag-background-color-hover: var(--spectrum-gray-75); + --system-tag-background-color-active: var(--spectrum-gray-200); + --system-tag-background-color-focus: var(--spectrum-gray-75); + --system-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-tag-border-color-disabled: transparent; + --system-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); + --system-tag-avatar-opacity-disabled: 0.3; + --system-tag-animation-duration: var(--spectrum-animation-duration-100); + --system-tag-border-width: var(--spectrum-border-width-100); + --system-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --system-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --system-tag-focus-ring-color: var(--spectrum-focus-indicator-color); + --system-tag-label-line-height: var(--spectrum-line-height-100); + --system-tag-label-font-weight: var(--spectrum-regular-font-weight); + --system-tag-content-color-selected: var(--spectrum-gray-50); + --system-tag-background-color-selected: var( + --spectrum-neutral-background-color-selected-default + ); + --system-tag-background-color-selected-hover: var( + --spectrum-neutral-background-color-selected-hover + ); + --system-tag-background-color-selected-active: var( + --spectrum-neutral-background-color-selected-down + ); + --system-tag-background-color-selected-focus: var( + --spectrum-neutral-background-color-selected-key-focus + ); + --system-tag-border-color-invalid: var(--spectrum-negative-color-900); + --system-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000); + --system-tag-border-color-invalid-active: var(--spectrum-negative-color-1100); + --system-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000); + --system-tag-content-color-invalid: var( + --spectrum-negative-content-color-default + ); + --system-tag-content-color-invalid-hover: var( + --spectrum-negative-content-color-hover + ); + --system-tag-content-color-invalid-active: var( + --spectrum-negative-content-color-down + ); + --system-tag-content-color-invalid-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-tag-border-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-border-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-border-color-invalid-selected-focus: var( + --spectrum-negative-background-color-down + ); + --system-tag-border-color-invalid-selected-active: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-background-color-invalid-selected: var( + --spectrum-negative-background-color-default + ); + --system-tag-background-color-invalid-selected-hover: var( + --spectrum-negative-background-color-hover + ); + --system-tag-background-color-invalid-selected-active: var( + --spectrum-negative-background-color-down + ); + --system-tag-background-color-invalid-selected-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-tag-content-color-invalid-selected: var(--spectrum-white); + --system-tag-border-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-border-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-border-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-border-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-background-color-emphasized: var( + --spectrum-accent-background-color-default + ); + --system-tag-background-color-emphasized-hover: var( + --spectrum-accent-background-color-hover + ); + --system-tag-background-color-emphasized-active: var( + --spectrum-accent-background-color-down + ); + --system-tag-background-color-emphasized-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-tag-content-color-emphasized: var(--spectrum-white); + --system-tag-content-color-disabled: var(--spectrum-disabled-content-color); + --system-tag-height: var(--spectrum-component-height-100); + --system-tag-size-m-height: var(--spectrum-component-height-100); + --system-tag-font-size: var(--spectrum-font-size-100); + --system-tag-size-m-font-size: var(--spectrum-font-size-100); + --system-tag-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-size-m-icon-size: var(--spectrum-workflow-icon-size-100); + --system-tag-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-size-m-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-100 + ); + --system-tag-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-size-m-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-medium + ); + --system-tag-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-size-m-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --system-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-icon-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-size-m-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-medium + ); + --system-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100); + --system-tag-size-m-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-100 + ); + --system-tag-label-spacing-block: var(--spectrum-component-top-to-text-100); + --system-tag-size-m-label-spacing-block: var( + --spectrum-component-top-to-text-100 + ); + --system-tag-corner-radius: var(--system-tag-size-medium-corner-radius); + --system-tag-size-m-corner-radius: var( + --system-tag-size-medium-corner-radius + ); + --system-tag-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-size-m-spacing-inline-start: var( + --system-tag-size-medium-spacing-inline-start + ); + --system-tag-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-size-m-label-spacing-inline-end: var( + --system-tag-size-medium-label-spacing-inline-end + ); + --system-tag-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-m-clear-button-spacing-inline-end: var( + --system-tag-size-medium-clear-button-spacing-inline-end + ); + --system-tag-size-s-height: var(--spectrum-component-height-75); + --system-tag-size-s-font-size: var(--spectrum-font-size-75); + --system-tag-size-s-icon-size: var(--spectrum-workflow-icon-size-75); + --system-tag-size-s-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-small + ); + --system-tag-size-s-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tag-size-s-icon-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-small + ); + --system-tag-size-s-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-75 + ); + --system-tag-size-s-label-spacing-block: var( + --spectrum-component-top-to-text-75 + ); + --system-tag-size-s-corner-radius: var(--system-tag-size-small-corner-radius); + --system-tag-size-s-spacing-inline-start: var( + --system-tag-size-small-spacing-inline-start + ); + --system-tag-size-s-label-spacing-inline-end: var( + --system-tag-size-small-label-spacing-inline-end + ); + --system-tag-size-s-clear-button-spacing-inline-end: var( + --system-tag-size-small-clear-button-spacing-inline-end + ); + --system-tag-size-l-height: var(--spectrum-component-height-200); + --system-tag-size-l-font-size: var(--spectrum-font-size-200); + --system-tag-size-l-icon-size: var(--spectrum-workflow-icon-size-200); + --system-tag-size-l-clear-button-spacing-inline-start: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-clear-button-spacing-block: var( + --spectrum-tag-top-to-cross-icon-large + ); + --system-tag-size-l-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-block-end: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --system-tag-size-l-icon-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-avatar-spacing-block-start: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-block-end: var( + --spectrum-tag-top-to-avatar-large + ); + --system-tag-size-l-avatar-spacing-inline-end: var( + --spectrum-text-to-visual-200 + ); + --system-tag-size-l-label-spacing-block: var( + --spectrum-component-top-to-text-200 + ); + --system-tag-size-l-corner-radius: var(--system-tag-size-large-corner-radius); + --system-tag-size-l-spacing-inline-start: var( + --system-tag-size-large-spacing-inline-start + ); + --system-tag-size-l-label-spacing-inline-end: var( + --system-tag-size-large-label-spacing-inline-end + ); + --system-tag-size-l-clear-button-spacing-inline-end: var( + --system-tag-size-large-clear-button-spacing-inline-end + ); } :host, :root { - --system-tag-group-item-margin-block: var(--spectrum-spacing-75); - --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); + --system-tag-group-item-margin-block: var(--spectrum-spacing-75); + --system-tag-group-item-margin-inline: var(--spectrum-spacing-75); } :host, :root { - --system-textfield-border-color: var(--spectrum-gray-500); - --system-textfield-border-color-hover: var(--spectrum-gray-600); - --system-textfield-border-color-focus: var(--spectrum-gray-800); - --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --system-textfield-border-width: var(--spectrum-border-width-100); - --system-textfield-texfield-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-textfield-width: 240px; - --system-textfield-min-width: var( - --spectrum-text-field-minimum-width-multiplier - ); - --system-textfield-corner-radius: var(--spectrum-corner-radius-100); - --system-textfield-spacing-inline-quiet: var( - --spectrum-field-edge-to-text-quiet - ); - --system-textfield-spacing-block-start: var( - --spectrum-component-top-to-text-100 - ); - --system-textfield-spacing-block-end: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-spacing-block-quiet: var( - --spectrum-field-edge-to-border-quiet - ); - --system-textfield-label-spacing-block: var( - --spectrum-field-label-to-component - ); - --system-textfield-helptext-spacing-block: var( - --spectrum-help-text-to-component - ); - --system-textfield-icon-spacing-inline-end-quiet-invalid: var( - --spectrum-field-edge-to-alert-icon-quiet - ); - --system-textfield-icon-spacing-inline-end-quiet-valid: var( - --spectrum-field-edge-to-validation-icon-quiet - ); - --system-textfield-font-family: var(--spectrum-sans-font-family-stack); - --system-textfield-font-weight: var(--spectrum-regular-font-weight); - --system-textfield-character-count-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-textfield-character-count-font-weight: var( - --spectrum-regular-font-weight - ); - --system-textfield-character-count-spacing-inline: var( - --spectrum-spacing-200 - ); - --system-textfield-character-count-spacing-inline-side: var( - --spectrum-side-label-character-count-to-field - ); - --system-textfield-focus-indicator-width: var( - --spectrum-focus-indicator-thickness - ); - --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-textfield-background-color: var(--spectrum-gray-50); - --system-textfield-text-color-default: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-hover: var( - --spectrum-neutral-content-color-hover - ); - --system-textfield-text-color-focus: var( - --spectrum-neutral-content-color-focus - ); - --system-textfield-text-color-focus-hover: var( - --spectrum-neutral-content-color-focus-hover - ); - --system-textfield-text-color-keyboard-focus: var( - --spectrum-neutral-content-color-key-focus - ); - --system-textfield-text-color-readonly: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-background-color-disabled: var( - --spectrum-disabled-background-color - ); - --system-textfield-border-color-disabled: var( - --spectrum-disabled-border-color - ); - --system-textfield-text-color-disabled: var( - --spectrum-disabled-content-color - ); - --system-textfield-border-color-invalid-default: var( - --spectrum-negative-border-color-default - ); - --system-textfield-border-color-invalid-hover: var( - --spectrum-negative-border-color-hover - ); - --system-textfield-border-color-invalid-focus: var( - --spectrum-negative-border-color-focus - ); - --system-textfield-border-color-invalid-focus-hover: var( - --spectrum-negative-border-color-focus-hover - ); - --system-textfield-border-color-invalid-keyboard-focus: var( - --spectrum-negative-border-color-key-focus - ); - --system-textfield-icon-color-invalid: var( - --spectrum-negative-visual-color - ); - --system-textfield-text-color-invalid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-text-color-valid: var( - --spectrum-neutral-content-color-default - ); - --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); - --system-textfield-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-textfield-text-area-min-inline-size: var( - --spectrum-text-area-minimum-width - ); - --system-textfield-text-area-min-block-size: var( - --spectrum-text-area-minimum-height - ); - --system-textfield-height: var(--spectrum-component-height-100); - --system-textfield-size-m-height: var(--spectrum-component-height-100); - --system-textfield-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-size-m-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-medium - ); - --system-textfield-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-m-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); - --system-textfield-size-m-placeholder-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-size-m-spacing-inline: var( - --spectrum-component-edge-to-text-100 - ); - --system-textfield-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-size-m-icon-size-invalid: var( - --spectrum-workflow-icon-size-100 - ); - --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); - --system-textfield-size-m-icon-size-valid: var( - --spectrum-checkmark-icon-size-100 - ); - --system-textfield-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-medium - ); - --system-textfield-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-medium - ); - --system-textfield-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-medium - ); - --system-textfield-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-medium - ); - --system-textfield-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-size-m-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-medium - ); - --system-textfield-character-count-font-size: var(--spectrum-font-size-75); - --system-textfield-size-m-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-m-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-size-m-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-medium - ); - --system-textfield-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-size-m-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-medium - ); - --system-textfield-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-m-text-area-min-block-size-quiet: var( - --spectrum-component-height-100 - ); - --system-textfield-size-s-height: var(--spectrum-component-height-75); - --system-textfield-size-s-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-small - ); - --system-textfield-size-s-label-spacing-inline-side-label: var( - --spectrum-spacing-100 - ); - --system-textfield-size-s-placeholder-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-spacing-inline: var( - --spectrum-component-edge-to-text-75 - ); - --system-textfield-size-s-icon-size-invalid: var( - --spectrum-workflow-icon-size-75 - ); - --system-textfield-size-s-icon-size-valid: var( - --spectrum-checkmark-icon-size-75 - ); - --system-textfield-size-s-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-small - ); - --system-textfield-size-s-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-small - ); - --system-textfield-size-s-character-count-font-size: var( - --spectrum-font-size-75 - ); - --system-textfield-size-s-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-75 - ); - --system-textfield-size-s-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-small - ); - --system-textfield-size-s-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-small - ); - --system-textfield-size-s-text-area-min-block-size-quiet: var( - --spectrum-component-height-75 - ); - --system-textfield-size-l-height: var(--spectrum-component-height-200); - --system-textfield-size-l-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-large - ); - --system-textfield-size-l-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-l-placeholder-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-l-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-l-icon-size-invalid: var( - --spectrum-workflow-icon-size-200 - ); - --system-textfield-size-l-icon-size-valid: var( - --spectrum-checkmark-icon-size-200 - ); - --system-textfield-size-l-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-large - ); - --system-textfield-size-l-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-large - ); - --system-textfield-size-l-character-count-font-size: var( - --spectrum-font-size-100 - ); - --system-textfield-size-l-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-100 - ); - --system-textfield-size-l-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-large - ); - --system-textfield-size-l-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-large - ); - --system-textfield-size-l-text-area-min-block-size-quiet: var( - --spectrum-component-height-200 - ); - --system-textfield-size-xl-height: var(--spectrum-component-height-300); - --system-textfield-size-xl-label-spacing-block-quiet: var( - --spectrum-field-label-to-component-quiet-extra-large - ); - --system-textfield-size-xl-label-spacing-inline-side-label: var( - --spectrum-spacing-200 - ); - --system-textfield-size-xl-placeholder-font-size: var( - --spectrum-font-size-300 - ); - --system-textfield-size-xl-spacing-inline: var( - --spectrum-component-edge-to-text-200 - ); - --system-textfield-size-xl-icon-size-invalid: var( - --spectrum-workflow-icon-size-300 - ); - --system-textfield-size-xl-icon-size-valid: var( - --spectrum-checkmark-icon-size-300 - ); - --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( - --spectrum-field-edge-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-end-valid: var( - --spectrum-field-edge-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-invalid: var( - --spectrum-field-top-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-block-valid: var( - --spectrum-field-top-to-validation-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( - --spectrum-field-text-to-alert-icon-extra-large - ); - --system-textfield-size-xl-icon-spacing-inline-start-valid: var( - --spectrum-field-text-to-validation-icon-extra-large - ); - --system-textfield-size-xl-character-count-font-size: var( - --spectrum-font-size-200 - ); - --system-textfield-size-xl-character-count-spacing-block: var( - --spectrum-component-bottom-to-text-200 - ); - --system-textfield-size-xl-character-count-spacing-block-quiet: var( - --spectrum-character-count-to-field-quiet-extra-large - ); - --system-textfield-size-xl-character-count-spacing-block-side: var( - --spectrum-side-label-character-count-top-margin-extra-large - ); - --system-textfield-size-xl-text-area-min-block-size-quiet: var( - --spectrum-component-height-300 - ); + --system-textfield-border-color: var(--spectrum-gray-500); + --system-textfield-border-color-hover: var(--spectrum-gray-600); + --system-textfield-border-color-focus: var(--spectrum-gray-800); + --system-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --system-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --system-textfield-border-width: var(--spectrum-border-width-100); + --system-textfield-texfield-animation-duration: var( + --spectrum-animation-duration-100 + ); + --system-textfield-width: 240px; + --system-textfield-min-width: var( + --spectrum-text-field-minimum-width-multiplier + ); + --system-textfield-corner-radius: var(--spectrum-corner-radius-100); + --system-textfield-spacing-inline-quiet: var( + --spectrum-field-edge-to-text-quiet + ); + --system-textfield-spacing-block-start: var( + --spectrum-component-top-to-text-100 + ); + --system-textfield-spacing-block-end: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-spacing-block-quiet: var( + --spectrum-field-edge-to-border-quiet + ); + --system-textfield-label-spacing-block: var( + --spectrum-field-label-to-component + ); + --system-textfield-helptext-spacing-block: var( + --spectrum-help-text-to-component + ); + --system-textfield-icon-spacing-inline-end-quiet-invalid: var( + --spectrum-field-edge-to-alert-icon-quiet + ); + --system-textfield-icon-spacing-inline-end-quiet-valid: var( + --spectrum-field-edge-to-validation-icon-quiet + ); + --system-textfield-font-family: var(--spectrum-sans-font-family-stack); + --system-textfield-font-weight: var(--spectrum-regular-font-weight); + --system-textfield-character-count-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-textfield-character-count-font-weight: var( + --spectrum-regular-font-weight + ); + --system-textfield-character-count-spacing-inline: var( + --spectrum-spacing-200 + ); + --system-textfield-character-count-spacing-inline-side: var( + --spectrum-side-label-character-count-to-field + ); + --system-textfield-focus-indicator-width: var( + --spectrum-focus-indicator-thickness + ); + --system-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-textfield-background-color: var(--spectrum-gray-50); + --system-textfield-text-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-textfield-text-color-focus: var( + --spectrum-neutral-content-color-focus + ); + --system-textfield-text-color-focus-hover: var( + --spectrum-neutral-content-color-focus-hover + ); + --system-textfield-text-color-keyboard-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-textfield-text-color-readonly: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-textfield-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-textfield-text-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-textfield-border-color-invalid-default: var( + --spectrum-negative-border-color-default + ); + --system-textfield-border-color-invalid-hover: var( + --spectrum-negative-border-color-hover + ); + --system-textfield-border-color-invalid-focus: var( + --spectrum-negative-border-color-focus + ); + --system-textfield-border-color-invalid-focus-hover: var( + --spectrum-negative-border-color-focus-hover + ); + --system-textfield-border-color-invalid-keyboard-focus: var( + --spectrum-negative-border-color-key-focus + ); + --system-textfield-icon-color-invalid: var(--spectrum-negative-visual-color); + --system-textfield-text-color-invalid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-text-color-valid: var( + --spectrum-neutral-content-color-default + ); + --system-textfield-icon-color-valid: var(--spectrum-positive-visual-color); + --system-textfield-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-textfield-text-area-min-inline-size: var( + --spectrum-text-area-minimum-width + ); + --system-textfield-text-area-min-block-size: var( + --spectrum-text-area-minimum-height + ); + --system-textfield-height: var(--spectrum-component-height-100); + --system-textfield-size-m-height: var(--spectrum-component-height-100); + --system-textfield-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-size-m-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-medium + ); + --system-textfield-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-m-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-placeholder-font-size: var(--spectrum-font-size-100); + --system-textfield-size-m-placeholder-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-spacing-inline: var(--spectrum-component-edge-to-text-100); + --system-textfield-size-m-spacing-inline: var( + --spectrum-component-edge-to-text-100 + ); + --system-textfield-icon-size-invalid: var(--spectrum-workflow-icon-size-100); + --system-textfield-size-m-icon-size-invalid: var( + --spectrum-workflow-icon-size-100 + ); + --system-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100); + --system-textfield-size-m-icon-size-valid: var( + --spectrum-checkmark-icon-size-100 + ); + --system-textfield-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-medium + ); + --system-textfield-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-medium + ); + --system-textfield-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-medium + ); + --system-textfield-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-medium + ); + --system-textfield-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-size-m-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-medium + ); + --system-textfield-character-count-font-size: var(--spectrum-font-size-75); + --system-textfield-size-m-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-m-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-size-m-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-medium + ); + --system-textfield-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-size-m-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-medium + ); + --system-textfield-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-m-text-area-min-block-size-quiet: var( + --spectrum-component-height-100 + ); + --system-textfield-size-s-height: var(--spectrum-component-height-75); + --system-textfield-size-s-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-small + ); + --system-textfield-size-s-label-spacing-inline-side-label: var( + --spectrum-spacing-100 + ); + --system-textfield-size-s-placeholder-font-size: var(--spectrum-font-size-75); + --system-textfield-size-s-spacing-inline: var( + --spectrum-component-edge-to-text-75 + ); + --system-textfield-size-s-icon-size-invalid: var( + --spectrum-workflow-icon-size-75 + ); + --system-textfield-size-s-icon-size-valid: var( + --spectrum-checkmark-icon-size-75 + ); + --system-textfield-size-s-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-small + ); + --system-textfield-size-s-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-small + ); + --system-textfield-size-s-character-count-font-size: var( + --spectrum-font-size-75 + ); + --system-textfield-size-s-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-75 + ); + --system-textfield-size-s-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-small + ); + --system-textfield-size-s-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-small + ); + --system-textfield-size-s-text-area-min-block-size-quiet: var( + --spectrum-component-height-75 + ); + --system-textfield-size-l-height: var(--spectrum-component-height-200); + --system-textfield-size-l-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-large + ); + --system-textfield-size-l-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-l-placeholder-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-l-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-l-icon-size-invalid: var( + --spectrum-workflow-icon-size-200 + ); + --system-textfield-size-l-icon-size-valid: var( + --spectrum-checkmark-icon-size-200 + ); + --system-textfield-size-l-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-large + ); + --system-textfield-size-l-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-large + ); + --system-textfield-size-l-character-count-font-size: var( + --spectrum-font-size-100 + ); + --system-textfield-size-l-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-100 + ); + --system-textfield-size-l-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-large + ); + --system-textfield-size-l-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-large + ); + --system-textfield-size-l-text-area-min-block-size-quiet: var( + --spectrum-component-height-200 + ); + --system-textfield-size-xl-height: var(--spectrum-component-height-300); + --system-textfield-size-xl-label-spacing-block-quiet: var( + --spectrum-field-label-to-component-quiet-extra-large + ); + --system-textfield-size-xl-label-spacing-inline-side-label: var( + --spectrum-spacing-200 + ); + --system-textfield-size-xl-placeholder-font-size: var( + --spectrum-font-size-300 + ); + --system-textfield-size-xl-spacing-inline: var( + --spectrum-component-edge-to-text-200 + ); + --system-textfield-size-xl-icon-size-invalid: var( + --spectrum-workflow-icon-size-300 + ); + --system-textfield-size-xl-icon-size-valid: var( + --spectrum-checkmark-icon-size-300 + ); + --system-textfield-size-xl-icon-spacing-inline-end-invalid: var( + --spectrum-field-edge-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-end-valid: var( + --spectrum-field-edge-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-invalid: var( + --spectrum-field-top-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-block-valid: var( + --spectrum-field-top-to-validation-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-invalid: var( + --spectrum-field-text-to-alert-icon-extra-large + ); + --system-textfield-size-xl-icon-spacing-inline-start-valid: var( + --spectrum-field-text-to-validation-icon-extra-large + ); + --system-textfield-size-xl-character-count-font-size: var( + --spectrum-font-size-200 + ); + --system-textfield-size-xl-character-count-spacing-block: var( + --spectrum-component-bottom-to-text-200 + ); + --system-textfield-size-xl-character-count-spacing-block-quiet: var( + --spectrum-character-count-to-field-quiet-extra-large + ); + --system-textfield-size-xl-character-count-spacing-block-side: var( + --spectrum-side-label-character-count-top-margin-extra-large + ); + --system-textfield-size-xl-text-area-min-block-size-quiet: var( + --spectrum-component-height-300 + ); } :host, :root { - --system-thumbnail-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); - --system-thumbnail-border-width: var(--spectrum-border-width-100); - --system-thumbnail-border-color-rgba: rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) - ); - --system-thumbnail-layer-border-width-inner: var( - --spectrum-border-width-400 - ); - --system-thumbnail-layer-border-color-inner: var(--spectrum-white); - --system-thumbnail-layer-border-width-outer: var( - --spectrum-border-width-100 - ); - --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); - --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); - --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); - --system-thumbnail-focus-indicator-thickness: var( - --spectrum-focus-indicator-thickness - ); - --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-thumbnail-focus-indicator-color: var( - --spectrum-focus-indicator-color - ); - --system-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); - --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); - --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); - --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); - --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); - --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); - --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); - --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); - --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); - --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); - --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); - --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); - --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); + --system-thumbnail-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-border-radius: var(--spectrum-corner-radius-75); + --system-thumbnail-border-width: var(--spectrum-border-width-100); + --system-thumbnail-border-color-rgba: rgba( + var(--spectrum-gray-800-rgb), + var(--spectrum-thumbnail-border-opacity) + ); + --system-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); + --system-thumbnail-layer-border-color-inner: var(--spectrum-white); + --system-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); + --system-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + --system-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --system-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + --system-thumbnail-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --system-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --system-thumbnail-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --system-thumbnail-color-opacity-disabled: var( + --spectrum-thumbnail-opacity-disabled + ); + --system-thumbnail-size-50-size: var(--spectrum-thumbnail-size-50); + --system-thumbnail-size-75-size: var(--spectrum-thumbnail-size-75); + --system-thumbnail-size-100-size: var(--spectrum-thumbnail-size-100); + --system-thumbnail-size-200-size: var(--spectrum-thumbnail-size-200); + --system-thumbnail-size-300-size: var(--spectrum-thumbnail-size-300); + --system-thumbnail-size-400-size: var(--spectrum-thumbnail-size-400); + --system-thumbnail-size-500-size: var(--spectrum-thumbnail-size-500); + --system-thumbnail-size-600-size: var(--spectrum-thumbnail-size-600); + --system-thumbnail-size-700-size: var(--spectrum-thumbnail-size-700); + --system-thumbnail-size-800-size: var(--spectrum-thumbnail-size-800); + --system-thumbnail-size-900-size: var(--spectrum-thumbnail-size-900); + --system-thumbnail-size-1000-size: var(--spectrum-thumbnail-size-1000); } :host, :root { - --system-toast-background-color-default: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-toast-font-weight: var(--spectrum-regular-font-weight); - --system-toast-font-size: var(--spectrum-font-size-100); - --system-toast-corner-radius: var(--spectrum-corner-radius-100); - --system-toast-block-size: var(--spectrum-toast-height); - --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); - --system-toast-border-width: var(--spectrum-border-width-100); - --system-toast-line-height: var(--spectrum-line-height-100); - --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); - --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); - --system-toast-spacing-start-edge-to-text-and-icon: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-text-and-action-button-to-divider: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-icon: var( - --spectrum-toast-top-to-workflow-icon - ); - --system-toast-spacing-text-to-action-button-horizontal: var( - --spectrum-spacing-300 - ); - --system-toast-spacing-close-button: var(--spectrum-spacing-100); - --system-toast-spacing-block-start: var(--spectrum-spacing-100); - --system-toast-spacing-block-end: var(--spectrum-spacing-100); - --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); - --system-toast-spacing-bottom-edge-to-text: var( - --spectrum-toast-bottom-to-text - ); - --system-toast-negative-background-color-default: var( - --spectrum-negative-background-color-default - ); - --system-toast-positive-background-color-default: var( - --spectrum-positive-background-color-default - ); - --system-toast-informative-background-color-default: var( - --spectrum-informative-background-color-default - ); - --system-toast-text-and-icon-color: var(--spectrum-white); - --system-toast-divider-color: var(--spectrum-transparent-white-300); + --system-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-toast-font-weight: var(--spectrum-regular-font-weight); + --system-toast-font-size: var(--spectrum-font-size-100); + --system-toast-corner-radius: var(--spectrum-corner-radius-100); + --system-toast-block-size: var(--spectrum-toast-height); + --system-toast-max-inline-size: var(--spectrum-toast-maximum-width); + --system-toast-border-width: var(--spectrum-border-width-100); + --system-toast-line-height: var(--spectrum-line-height-100); + --system-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); + --system-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --system-toast-spacing-start-edge-to-text-and-icon: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-text-and-action-button-to-divider: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-icon: var( + --spectrum-toast-top-to-workflow-icon + ); + --system-toast-spacing-text-to-action-button-horizontal: var( + --spectrum-spacing-300 + ); + --system-toast-spacing-close-button: var(--spectrum-spacing-100); + --system-toast-spacing-block-start: var(--spectrum-spacing-100); + --system-toast-spacing-block-end: var(--spectrum-spacing-100); + --system-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); + --system-toast-spacing-bottom-edge-to-text: var( + --spectrum-toast-bottom-to-text + ); + --system-toast-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-toast-positive-background-color-default: var( + --spectrum-positive-background-color-default + ); + --system-toast-informative-background-color-default: var( + --spectrum-informative-background-color-default + ); + --system-toast-text-and-icon-color: var(--spectrum-white); + --system-toast-divider-color: var(--spectrum-transparent-white-300); } :host, :root { - --system-tooltip-backgound-color-default-neutral: var( - --spectrum-neutral-subdued-background-color-default - ); - --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); - --system-tooltip-margin: 0px; - --system-tooltip-height: var(--spectrum-component-height-75); - --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --system-tooltip-border-radius: var(--spectrum-corner-radius-100); - --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --system-tooltip-font-size: var(--spectrum-font-size-75); - --system-tooltip-line-height: var(--spectrum-line-height-100); - --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --system-tooltip-font-weight: var(--spectrum-regular-font-weight); - --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - --system-tooltip-spacing-block-start: var( - --spectrum-component-top-to-text-75 - ); - --system-tooltip-spacing-block-end: var( - --spectrum-component-bottom-to-text-75 - ); - --system-tooltip-icon-spacing-inline-start: var( - --spectrum-text-to-visual-75 - ); - --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --system-tooltip-icon-spacing-block-start: var( - --spectrum-component-top-to-workflow-icon-75 - ); - --system-tooltip-background-color-informative: var( - --spectrum-informative-background-color-default - ); - --system-tooltip-background-color-positive: var( - --spectrum-positive-background-color-default - ); - --system-tooltip-background-color-negative: var( - --spectrum-negative-background-color-default - ); - --system-tooltip-content-color: var(--spectrum-white); - --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); - --system-tooltip-tip-height-percentage: 50%; - --system-tooltip-tip-antialiasing-inset: 0.5px; - --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - --system-tooltip-background-color-default: var( - --system-tooltip-backgound-color-default-neutral - ); + --system-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --system-tooltip-margin: 0px; + --system-tooltip-height: var(--spectrum-component-height-75); + --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --system-tooltip-border-radius: var(--spectrum-corner-radius-100); + --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --system-tooltip-font-size: var(--spectrum-font-size-75); + --system-tooltip-line-height: var(--spectrum-line-height-100); + --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --system-tooltip-font-weight: var(--spectrum-regular-font-weight); + --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + --system-tooltip-spacing-block-start: var( + --spectrum-component-top-to-text-75 + ); + --system-tooltip-spacing-block-end: var( + --spectrum-component-bottom-to-text-75 + ); + --system-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --system-tooltip-icon-spacing-block-start: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --system-tooltip-background-color-informative: var( + --spectrum-informative-background-color-default + ); + --system-tooltip-background-color-positive: var( + --spectrum-positive-background-color-default + ); + --system-tooltip-background-color-negative: var( + --spectrum-negative-background-color-default + ); + --system-tooltip-content-color: var(--spectrum-white); + --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size); + --system-tooltip-tip-height-percentage: 50%; + --system-tooltip-tip-antialiasing-inset: 0.5px; + --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + --system-tooltip-background-color-default: var( + --system-tooltip-backgound-color-default-neutral + ); } :host, :root { - --system-tray-exit-animation-delay: 0ms; - --system-tray-entry-animation-delay: 160ms; - --system-tray-max-inline-size: 375px; - --system-tray-spacing-edge-to-safe-zone: 64px; - --system-tray-entry-animation-duration: var( - --spectrum-animation-duration-500 - ); - --system-tray-exit-animation-duration: var( - --spectrum-animation-duration-100 - ); - --system-tray-corner-radius: var(--spectrum-corner-radius-100); - --system-tray-background-color: var(--spectrum-background-layer-2-color); + --system-tray-exit-animation-delay: 0ms; + --system-tray-entry-animation-delay: 160ms; + --system-tray-max-inline-size: 375px; + --system-tray-spacing-edge-to-safe-zone: 64px; + --system-tray-entry-animation-duration: var( + --spectrum-animation-duration-500 + ); + --system-tray-exit-animation-duration: var(--spectrum-animation-duration-100); + --system-tray-corner-radius: var(--spectrum-corner-radius-100); + --system-tray-background-color: var(--spectrum-background-layer-2-color); } :host, :root { - --system-underlay-background-entry-animation-delay: var( - --spectrum-animation-duration-0 - ); - --system-underlay-background-exit-animation-ease: var( - --spectrum-animation-ease-in - ); - --system-underlay-background-entry-animation-ease: var( - --spectrum-animation-ease-out - ); - --system-underlay-background-entry-animation-duration: var( - --spectrum-animation-duration-600 - ); - --system-underlay-background-exit-animation-duration: var( - --spectrum-animation-duration-300 - ); - --system-underlay-background-exit-animation-delay: var( - --spectrum-animation-duration-200 - ); - --system-underlay-background-color: rgba( - var(--spectrum-black-rgb), - var(--spectrum-overlay-opacity) - ); + --system-underlay-background-entry-animation-delay: var( + --spectrum-animation-duration-0 + ); + --system-underlay-background-exit-animation-ease: var( + --spectrum-animation-ease-in + ); + --system-underlay-background-entry-animation-ease: var( + --spectrum-animation-ease-out + ); + --system-underlay-background-entry-animation-duration: var( + --spectrum-animation-duration-600 + ); + --system-underlay-background-exit-animation-duration: var( + --spectrum-animation-duration-300 + ); + --system-underlay-background-exit-animation-delay: var( + --spectrum-animation-duration-200 + ); + --system-underlay-background-color: rgba( + var(--spectrum-black-rgb), + var(--spectrum-overlay-opacity) + ); } :host, :root { - --system-heading-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-heading-font-color: var(--spectrum-heading-color); - --system-heading-font-size: var(--spectrum-heading-size-m); - --system-heading-size-m-font-size: var(--spectrum-heading-size-m); - --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); - --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); - --system-heading-size-xxs-cjk-font-size: var( - --spectrum-heading-cjk-size-xxs - ); - --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); - --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); - --system-heading-size-s-font-size: var(--spectrum-heading-size-s); - --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); - --system-heading-size-l-font-size: var(--spectrum-heading-size-l); - --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); - --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); - --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); - --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); - --system-heading-size-xxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxl - ); - --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); - --system-heading-size-xxxl-cjk-font-size: var( - --spectrum-heading-cjk-size-xxxl - ); - --system-body-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-body-font-color: var(--spectrum-body-color); - --system-body-font-size: var(--spectrum-body-size-m); - --system-body-size-m-font-size: var(--spectrum-body-size-m); - --system-body-size-xs-font-size: var(--spectrum-body-size-xs); - --system-body-size-s-font-size: var(--spectrum-body-size-s); - --system-body-size-l-font-size: var(--spectrum-body-size-l); - --system-body-size-xl-font-size: var(--spectrum-body-size-xl); - --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); - --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); - --system-detail-sans-serif-font-family: var( - --spectrum-sans-font-family-stack - ); - --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); - --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); - --system-detail-font-color: var(--spectrum-detail-color); - --system-detail-font-size: var(--spectrum-detail-size-m); - --system-detail-size-m-font-size: var(--spectrum-detail-size-m); - --system-detail-size-s-font-size: var(--spectrum-detail-size-s); - --system-detail-size-l-font-size: var(--spectrum-detail-size-l); - --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); - --system-code-font-family: var(--spectrum-code-font-family-stack); - --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); - --system-code-font-color: var(--spectrum-code-color); - --system-code-font-size: var(--spectrum-code-size-m); - --system-code-size-m-font-size: var(--spectrum-code-size-m); - --system-code-size-xs-font-size: var(--spectrum-code-size-xs); - --system-code-size-s-font-size: var(--spectrum-code-size-s); - --system-code-size-l-font-size: var(--spectrum-code-size-l); - --system-code-size-xl-font-size: var(--spectrum-code-size-xl); + --system-heading-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-heading-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-heading-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-heading-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-heading-font-color: var(--spectrum-heading-color); + --system-heading-font-size: var(--spectrum-heading-size-m); + --system-heading-size-m-font-size: var(--spectrum-heading-size-m); + --system-heading-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-m-cjk-font-size: var(--spectrum-heading-cjk-size-m); + --system-heading-size-xxs-font-size: var(--spectrum-heading-size-xxs); + --system-heading-size-xxs-cjk-font-size: var(--spectrum-heading-cjk-size-xxs); + --system-heading-size-xs-font-size: var(--spectrum-heading-size-xs); + --system-heading-size-xs-cjk-font-size: var(--spectrum-heading-cjk-size-xs); + --system-heading-size-s-font-size: var(--spectrum-heading-size-s); + --system-heading-size-s-cjk-font-size: var(--spectrum-heading-cjk-size-s); + --system-heading-size-l-font-size: var(--spectrum-heading-size-l); + --system-heading-size-l-cjk-font-size: var(--spectrum-heading-cjk-size-l); + --system-heading-size-xl-font-size: var(--spectrum-heading-size-xl); + --system-heading-size-xl-cjk-font-size: var(--spectrum-heading-cjk-size-xl); + --system-heading-size-xxl-font-size: var(--spectrum-heading-size-xxl); + --system-heading-size-xxl-cjk-font-size: var(--spectrum-heading-cjk-size-xxl); + --system-heading-size-xxxl-font-size: var(--spectrum-heading-size-xxxl); + --system-heading-size-xxxl-cjk-font-size: var( + --spectrum-heading-cjk-size-xxxl + ); + --system-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --system-body-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-body-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-body-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-body-font-color: var(--spectrum-body-color); + --system-body-font-size: var(--spectrum-body-size-m); + --system-body-size-m-font-size: var(--spectrum-body-size-m); + --system-body-size-xs-font-size: var(--spectrum-body-size-xs); + --system-body-size-s-font-size: var(--spectrum-body-size-s); + --system-body-size-l-font-size: var(--spectrum-body-size-l); + --system-body-size-xl-font-size: var(--spectrum-body-size-xl); + --system-body-size-xxl-font-size: var(--spectrum-body-size-xxl); + --system-body-size-xxxl-font-size: var(--spectrum-body-size-xxxl); + --system-detail-sans-serif-font-family: var( + --spectrum-sans-font-family-stack + ); + --system-detail-serif-font-family: var(--spectrum-serif-font-family-stack); + --system-detail-cjk-font-family: var(--spectrum-cjk-font-family-stack); + --system-detail-font-color: var(--spectrum-detail-color); + --system-detail-font-size: var(--spectrum-detail-size-m); + --system-detail-size-m-font-size: var(--spectrum-detail-size-m); + --system-detail-size-s-font-size: var(--spectrum-detail-size-s); + --system-detail-size-l-font-size: var(--spectrum-detail-size-l); + --system-detail-size-xl-font-size: var(--spectrum-detail-size-xl); + --system-code-font-family: var(--spectrum-code-font-family-stack); + --system-code-cjk-letter-spacing: var(--spectrum-cjk-letter-spacing); + --system-code-font-color: var(--spectrum-code-color); + --system-code-font-size: var(--spectrum-code-size-m); + --system-code-size-m-font-size: var(--spectrum-code-size-m); + --system-code-size-xs-font-size: var(--spectrum-code-size-xs); + --system-code-size-s-font-size: var(--spectrum-code-size-s); + --system-code-size-l-font-size: var(--spectrum-code-size-l); + --system-code-size-xl-font-size: var(--spectrum-code-size-xl); } diff --git a/tools/styles/tokens/spectrum/large-vars.css b/tools/styles/tokens/spectrum/large-vars.css index f63d46216e..95b4217e3f 100644 --- a/tools/styles/tokens/spectrum/large-vars.css +++ b/tools/styles/tokens/spectrum/large-vars.css @@ -1,159 +1,157 @@ :host, :root { - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 32px; - --spectrum-switch-control-width-medium: 36px; - --spectrum-switch-control-width-large: 41px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 16px; - --spectrum-switch-control-height-medium: 18px; - --spectrum-switch-control-height-large: 20px; - --spectrum-switch-control-height-extra-large: 22px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-corner-radius-100: 5px; - --spectrum-corner-radius-200: 10px; - --spectrum-drop-shadow-y: 2px; - --spectrum-drop-shadow-blur: 6px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-well-padding: 20px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-border-radius: 5px; - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-tooltip-animation-distance: 5px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; + --spectrum-checkbox-control-size-small: 16px; + --spectrum-checkbox-control-size-medium: 18px; + --spectrum-checkbox-control-size-large: 20px; + --spectrum-checkbox-control-size-extra-large: 22px; + --spectrum-checkbox-top-to-control-small: 7px; + --spectrum-checkbox-top-to-control-medium: 11px; + --spectrum-checkbox-top-to-control-large: 15px; + --spectrum-checkbox-top-to-control-extra-large: 19px; + --spectrum-switch-control-width-small: 32px; + --spectrum-switch-control-width-medium: 36px; + --spectrum-switch-control-width-large: 41px; + --spectrum-switch-control-width-extra-large: 46px; + --spectrum-switch-control-height-small: 16px; + --spectrum-switch-control-height-medium: 18px; + --spectrum-switch-control-height-large: 20px; + --spectrum-switch-control-height-extra-large: 22px; + --spectrum-switch-top-to-control-small: 7px; + --spectrum-switch-top-to-control-medium: 11px; + --spectrum-switch-top-to-control-large: 15px; + --spectrum-switch-top-to-control-extra-large: 19px; + --spectrum-radio-button-control-size-small: 16px; + --spectrum-radio-button-control-size-medium: 18px; + --spectrum-radio-button-control-size-large: 20px; + --spectrum-radio-button-control-size-extra-large: 22px; + --spectrum-radio-button-top-to-control-small: 7px; + --spectrum-radio-button-top-to-control-medium: 11px; + --spectrum-radio-button-top-to-control-large: 15px; + --spectrum-radio-button-top-to-control-extra-large: 19px; + --spectrum-slider-control-height-small: 18px; + --spectrum-slider-control-height-medium: 20px; + --spectrum-slider-control-height-large: 22px; + --spectrum-slider-control-height-extra-large: 26px; + --spectrum-slider-handle-size-small: 18px; + --spectrum-slider-handle-size-medium: 20px; + --spectrum-slider-handle-size-large: 22px; + --spectrum-slider-handle-size-extra-large: 26px; + --spectrum-slider-handle-border-width-down-small: 7px; + --spectrum-slider-handle-border-width-down-medium: 8px; + --spectrum-slider-handle-border-width-down-large: 9px; + --spectrum-slider-handle-border-width-down-extra-large: 11px; + --spectrum-slider-bottom-to-handle-small: 6px; + --spectrum-slider-bottom-to-handle-medium: 10px; + --spectrum-slider-bottom-to-handle-large: 14px; + --spectrum-slider-bottom-to-handle-extra-large: 17px; + --spectrum-corner-radius-100: 5px; + --spectrum-corner-radius-200: 10px; + --spectrum-drop-shadow-y: 2px; + --spectrum-drop-shadow-blur: 6px; + --spectrum-slider-tick-mark-height: 13px; + --spectrum-slider-ramp-track-height: 20px; + + --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; + --spectrum-colorwheel-colorarea-container-size: 182px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; + + --spectrum-menu-item-checkmark-height-small: 12px; + --spectrum-menu-item-checkmark-height-medium: 14px; + --spectrum-menu-item-checkmark-height-large: 16px; + --spectrum-menu-item-checkmark-height-extra-large: 16px; + + --spectrum-menu-item-checkmark-width-small: 12px; + --spectrum-menu-item-checkmark-width-medium: 14px; + --spectrum-menu-item-checkmark-width-large: 16px; + --spectrum-menu-item-checkmark-width-extra-large: 16px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small: 6px; + --spectrum-button-bottom-to-text-small: 5px; + --spectrum-button-top-to-text-medium: 9px; + --spectrum-button-bottom-to-text-medium: 10px; + --spectrum-button-top-to-text-large: 12px; + --spectrum-button-bottom-to-text-large: 13px; + --spectrum-button-top-to-text-extra-large: 16px; + --spectrum-button-bottom-to-text-extra-large: 17px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap: 8px; + --spectrum-coach-indicator-ring-diameter: 20px; + --spectrum-coach-indicator-quiet-ring-diameter: 10px; + + --spectrum-coachmark-buttongroup-display: none; + --spectrum-coachmark-buttongroup-mobile-display: flex; + --spectrum-coachmark-menu-display: none; + --spectrum-coachmark-menu-mobile-display: inline-flex; + + --spectrum-well-padding: 20px; + --spectrum-well-margin-top: 5px; + --spectrum-well-min-width: 300px; + --spectrum-well-border-radius: 5px; + --spectrum-workflow-icon-size-xxl: 40px; + --spectrum-workflow-icon-size-xxs: 15px; + + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; + + --spectrum-dialog-confirm-entry-animation-distance: 25px; + --spectrum-dialog-confirm-hero-height: 160px; + --spectrum-dialog-confirm-border-radius: 5px; + --spectrum-dialog-confirm-title-text-size: 19px; + --spectrum-dialog-confirm-description-text-size: 15px; + --spectrum-dialog-confirm-padding-grid: 24px; + + --spectrum-datepicker-initial-width: 160px; + --spectrum-datepicker-generic-padding: 15px; + --spectrum-datepicker-dash-line-height: 30px; + --spectrum-datepicker-width-quiet-first: 90px; + --spectrum-datepicker-width-quiet-second: 20px; + --spectrum-datepicker-datetime-width-first: 45px; + --spectrum-datepicker-invalid-icon-to-button: 10px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; + --spectrum-datepicker-input-datetime-width: 30px; + + --spectrum-pagination-textfield-width: 60px; + --spectrum-pagination-item-inline-spacing: 6px; + + --spectrum-dial-border-radius: 20px; + --spectrum-dial-handle-position: 10px; + --spectrum-dial-handle-block-margin: 20px; + --spectrum-dial-handle-inline-margin: 20px; + --spectrum-dial-controls-margin: 10px; + --spectrum-dial-label-gap-y: 6px; + --spectrum-dial-label-container-top-to-text: 5px; + + --spectrum-assetcard-focus-ring-border-radius: 9px; + --spectrum-assetcard-selectionindicator-margin: 15px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xxs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance: 5px; + + --spectrum-ui-icon-medium-display: none; + --spectrum-ui-icon-large-display: block; } diff --git a/tools/styles/tokens/spectrum/light-vars.css b/tools/styles/tokens/spectrum/light-vars.css index 423a2abd73..69451e5785 100644 --- a/tools/styles/tokens/spectrum/light-vars.css +++ b/tools/styles/tokens/spectrum/light-vars.css @@ -1,102 +1,98 @@ :host, :root { - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); - --spectrum-dropindicator-color: var(--spectrum-blue-800); + --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; + --spectrum-menu-item-background-color-default-opacity: 0; + --spectrum-menu-item-background-color-default: rgba( + var(--spectrum-menu-item-background-color-default-rgb), + var(--spectrum-menu-item-background-color-default-opacity) + ); + --spectrum-menu-item-background-color-hover: var( + --spectrum-transparent-black-200 + ); + --spectrum-menu-item-background-color-down: var( + --spectrum-transparent-black-200 + ); + --spectrum-menu-item-background-color-key-focus: var( + --spectrum-transparent-black-200 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-black-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: var(--spectrum-black-rgb); + --spectrum-well-border-color: var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.06 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-1100 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-900 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); } diff --git a/tools/styles/tokens/spectrum/medium-vars.css b/tools/styles/tokens/spectrum/medium-vars.css index 2e813d2af1..3ee464c9b5 100644 --- a/tools/styles/tokens/spectrum/medium-vars.css +++ b/tools/styles/tokens/spectrum/medium-vars.css @@ -1,160 +1,156 @@ :host, :root { - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 23px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 29px; - --spectrum-switch-control-width-extra-large: 33px; - --spectrum-switch-control-height-small: 12px; - --spectrum-switch-control-height-medium: 14px; - --spectrum-switch-control-height-large: 16px; - --spectrum-switch-control-height-extra-large: 18px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-corner-radius-100: 4px; - --spectrum-corner-radius-200: 8px; - --spectrum-drop-shadow-y: 1px; - --spectrum-drop-shadow-blur: 4px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); - - --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); - --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - --spectrum-well-padding: var(--spectrum-spacing-300); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-title-text-size: 18px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-padding-grid: 40px; - - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - --spectrum-pagination-item-inline-spacing: 5px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-label-gap-y: 5px; - --spectrum-dial-label-container-top-to-text: 4px; - - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; + --spectrum-checkbox-control-size-small: 12px; + --spectrum-checkbox-control-size-medium: 14px; + --spectrum-checkbox-control-size-large: 16px; + --spectrum-checkbox-control-size-extra-large: 18px; + --spectrum-checkbox-top-to-control-small: 6px; + --spectrum-checkbox-top-to-control-medium: 9px; + --spectrum-checkbox-top-to-control-large: 12px; + --spectrum-checkbox-top-to-control-extra-large: 15px; + --spectrum-switch-control-width-small: 23px; + --spectrum-switch-control-width-medium: 26px; + --spectrum-switch-control-width-large: 29px; + --spectrum-switch-control-width-extra-large: 33px; + --spectrum-switch-control-height-small: 12px; + --spectrum-switch-control-height-medium: 14px; + --spectrum-switch-control-height-large: 16px; + --spectrum-switch-control-height-extra-large: 18px; + --spectrum-switch-top-to-control-small: 6px; + --spectrum-switch-top-to-control-medium: 9px; + --spectrum-switch-top-to-control-large: 12px; + --spectrum-switch-top-to-control-extra-large: 15px; + --spectrum-radio-button-control-size-small: 12px; + --spectrum-radio-button-control-size-medium: 14px; + --spectrum-radio-button-control-size-large: 16px; + --spectrum-radio-button-control-size-extra-large: 18px; + --spectrum-radio-button-top-to-control-small: 6px; + --spectrum-radio-button-top-to-control-medium: 9px; + --spectrum-radio-button-top-to-control-large: 12px; + --spectrum-radio-button-top-to-control-extra-large: 15px; + --spectrum-slider-control-height-small: 14px; + --spectrum-slider-control-height-medium: 16px; + --spectrum-slider-control-height-large: 18px; + --spectrum-slider-control-height-extra-large: 20px; + --spectrum-slider-handle-size-small: 14px; + --spectrum-slider-handle-size-medium: 16px; + --spectrum-slider-handle-size-large: 18px; + --spectrum-slider-handle-size-extra-large: 20px; + --spectrum-slider-handle-border-width-down-small: 5px; + --spectrum-slider-handle-border-width-down-medium: 6px; + --spectrum-slider-handle-border-width-down-large: 7px; + --spectrum-slider-handle-border-width-down-extra-large: 8px; + --spectrum-slider-bottom-to-handle-small: 5px; + --spectrum-slider-bottom-to-handle-medium: 8px; + --spectrum-slider-bottom-to-handle-large: 11px; + --spectrum-slider-bottom-to-handle-extra-large: 14px; + --spectrum-corner-radius-100: 4px; + --spectrum-corner-radius-200: 8px; + --spectrum-drop-shadow-y: 1px; + --spectrum-drop-shadow-blur: 4px; + --spectrum-slider-tick-mark-height: 10px; + --spectrum-slider-ramp-track-height: 16px; + + --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size: 144px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; + + --spectrum-menu-item-checkmark-height-small: 10px; + --spectrum-menu-item-checkmark-height-medium: 10px; + --spectrum-menu-item-checkmark-height-large: 12px; + --spectrum-menu-item-checkmark-height-extra-large: 14px; + + --spectrum-menu-item-checkmark-width-small: 10px; + --spectrum-menu-item-checkmark-width-medium: 10px; + --spectrum-menu-item-checkmark-width-large: 12px; + --spectrum-menu-item-checkmark-width-extra-large: 14px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small: 5px; + --spectrum-button-bottom-to-text-small: 4px; + --spectrum-button-top-to-text-medium: 7px; + --spectrum-button-bottom-to-text-medium: 8px; + --spectrum-button-top-to-text-large: 10px; + --spectrum-button-bottom-to-text-large: 10px; + --spectrum-button-top-to-text-extra-large: 13px; + --spectrum-button-bottom-to-text-extra-large: 13px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap: 6px; + --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display: flex; + --spectrum-coachmark-buttongroup-mobile-display: none; + --spectrum-coachmark-menu-display: inline-flex; + --spectrum-coachmark-menu-mobile-display: none; + --spectrum-well-padding: var(--spectrum-spacing-300); + --spectrum-well-margin-top: var(--spectrum-spacing-75); + --spectrum-well-min-width: 240px; + --spectrum-well-border-radius: var(--spectrum-spacing-75); + --spectrum-workflow-icon-size-xxl: 32px; + --spectrum-workflow-icon-size-xxs: 12px; + + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start: 5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; + + --spectrum-dialog-confirm-entry-animation-distance: 20px; + --spectrum-dialog-confirm-hero-height: 128px; + --spectrum-dialog-confirm-border-radius: 4px; + --spectrum-dialog-confirm-title-text-size: 18px; + --spectrum-dialog-confirm-description-text-size: 14px; + --spectrum-dialog-confirm-padding-grid: 40px; + + --spectrum-datepicker-initial-width: 128px; + --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height: 24px; + --spectrum-datepicker-width-quiet-first: 72px; + --spectrum-datepicker-width-quiet-second: 16px; + --spectrum-datepicker-datetime-width-first: 36px; + --spectrum-datepicker-invalid-icon-to-button: 8px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; + --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing: 5px; + + --spectrum-dial-border-radius: 16px; + --spectrum-dial-handle-position: 8px; + --spectrum-dial-handle-block-margin: 16px; + --spectrum-dial-handle-inline-margin: 16px; + --spectrum-dial-controls-margin: 8px; + --spectrum-dial-label-gap-y: 5px; + --spectrum-dial-label-container-top-to-text: 4px; + + --spectrum-assetcard-focus-ring-border-radius: 8px; + --spectrum-assetcard-selectionindicator-margin: 12px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display: block; + --spectrum-ui-icon-large-display: none; } diff --git a/tools/styles/typography.css b/tools/styles/typography.css index ef47aa872e..c1ca10ec53 100644 --- a/tools/styles/typography.css +++ b/tools/styles/typography.css @@ -1,142 +1,142 @@ .spectrum-Typography { - font-family: var(--spectrum-font-family); - font-style: var(--spectrum-font-style); - font-size: var(--spectrum-font-size); + font-family: var(--spectrum-font-family); + font-style: var(--spectrum-font-style); + font-size: var(--spectrum-font-size); } .spectrum-Typography:lang(ar) { - font-family: var(--spectrum-font-family-ar); + font-family: var(--spectrum-font-family-ar); } .spectrum-Typography:lang(he) { - font-family: var(--spectrum-font-family-he); + font-family: var(--spectrum-font-family-he); } .spectrum-Typography .spectrum-Heading { - --spectrum-heading-margin-start: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-top-multiplier) - ); - --spectrum-heading-margin-end: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-bottom-multiplier) - ); + --spectrum-heading-margin-start: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-top-multiplier) + ); + --spectrum-heading-margin-end: calc( + var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * + var(--spectrum-heading-margin-bottom-multiplier) + ); } .spectrum-Typography .spectrum-Body { - --spectrum-body-margin-end: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); + --spectrum-body-margin-end: calc( + var(--mod-body-font-size, var(--spectrum-body-font-size)) * + var(--spectrum-body-margin-multiplier) + ); } .spectrum-Typography .spectrum-Detail { - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); + --spectrum-detail-margin-start: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-top-multiplier) + ); + --spectrum-detail-margin-end: calc( + var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * + var(--spectrum-detail-margin-bottom-multiplier) + ); } .spectrum-Heading { - font-family: var( - --mod-heading-sans-serif-font-family, - var(--spectrum-heading-sans-serif-font-family) - ); - font-style: var( - --mod-heading-sans-serif-font-style, - var(--spectrum-heading-sans-serif-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-font-weight, - var(--spectrum-heading-sans-serif-font-weight) - ); - font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); - color: var( - --highcontrast-heading-font-color, - var(--mod-heading-font-color, var(--spectrum-heading-font-color)) - ); - line-height: var( - --mod-heading-line-height, - var(--spectrum-heading-line-height) - ); - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start, 0) - ); - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end, 0) - ); + font-family: var( + --mod-heading-sans-serif-font-family, + var(--spectrum-heading-sans-serif-font-family) + ); + font-style: var( + --mod-heading-sans-serif-font-style, + var(--spectrum-heading-sans-serif-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-font-weight, + var(--spectrum-heading-sans-serif-font-weight) + ); + font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); + color: var( + --highcontrast-heading-font-color, + var(--mod-heading-font-color, var(--spectrum-heading-font-color)) + ); + line-height: var( + --mod-heading-line-height, + var(--spectrum-heading-line-height) + ); + margin-block-start: var( + --mod-heading-margin-start, + var(--spectrum-heading-margin-start, 0) + ); + margin-block-end: var( + --mod-heading-margin-end, + var(--spectrum-heading-margin-end, 0) + ); } .spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong { - font-style: var( - --mod-heading-sans-serif-strong-font-style, - var(--spectrum-heading-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-font-weight, - var(--spectrum-heading-sans-serif-strong-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-strong-font-style, + var(--spectrum-heading-sans-serif-strong-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-strong-font-weight, + var(--spectrum-heading-sans-serif-strong-font-weight) + ); } .spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em { - font-style: var( - --mod-heading-sans-serif-emphasized-font-style, - var(--spectrum-heading-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-emphasized-font-weight, - var(--spectrum-heading-sans-serif-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-emphasized-font-style, + var(--spectrum-heading-sans-serif-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-emphasized-font-weight, + var(--spectrum-heading-sans-serif-emphasized-font-weight) + ); } .spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em { - font-style: var( - --mod-heading-sans-serif-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-strong-emphasized-font-style, + var(--spectrum-heading-sans-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-strong-emphasized-font-weight, + var(--spectrum-heading-sans-serif-strong-emphasized-font-weight) + ); } .spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh) { - font-family: var( - --mod-heading-cjk-font-family, - var(--spectrum-heading-cjk-font-family) - ); - font-style: var( - --mod-heading-cjk-font-style, - var(--spectrum-heading-cjk-font-style) - ); - font-weight: var( - --mod-heading-cjk-font-weight, - var(--spectrum-heading-cjk-font-weight) - ); - font-size: var( - --mod-heading-cjk-font-size, - var(--spectrum-heading-cjk-font-size) - ); - line-height: var( - --mod-heading-cjk-line-height, - var(--spectrum-heading-cjk-line-height) - ); - letter-spacing: var( - --mod-heading-cjk-letter-spacing, - var(--spectrum-heading-cjk-letter-spacing) - ); + font-family: var( + --mod-heading-cjk-font-family, + var(--spectrum-heading-cjk-font-family) + ); + font-style: var( + --mod-heading-cjk-font-style, + var(--spectrum-heading-cjk-font-style) + ); + font-weight: var( + --mod-heading-cjk-font-weight, + var(--spectrum-heading-cjk-font-weight) + ); + font-size: var( + --mod-heading-cjk-font-size, + var(--spectrum-heading-cjk-font-size) + ); + line-height: var( + --mod-heading-cjk-line-height, + var(--spectrum-heading-cjk-line-height) + ); + letter-spacing: var( + --mod-heading-cjk-letter-spacing, + var(--spectrum-heading-cjk-letter-spacing) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, @@ -145,14 +145,14 @@ .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em { - font-style: var( - --mod-heading-cjk-emphasized-font-style, - var(--spectrum-heading-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-emphasized-font-weight, - var(--spectrum-heading-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-emphasized-font-style, + var(--spectrum-heading-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-emphasized-font-weight, + var(--spectrum-heading-cjk-emphasized-font-weight) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-strong, @@ -161,14 +161,14 @@ .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong { - font-style: var( - --mod-heading-cjk-strong-font-style, - var(--spectrum-heading-cjk-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-font-weight, - var(--spectrum-heading-cjk-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-strong-font-style, + var(--spectrum-heading-cjk-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-strong-font-weight, + var(--spectrum-heading-cjk-strong-font-weight) + ); } .spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, @@ -180,75 +180,75 @@ .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-strong-emphasized-font-style, - var(--spectrum-heading-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-strong-emphasized-font-style, + var(--spectrum-heading-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-strong-emphasized-font-weight) + ); } .spectrum-Heading--heavy { - font-style: var( - --mod-heading-sans-serif-heavy-font-style, - var(--spectrum-heading-sans-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-font-weight, - var(--spectrum-heading-sans-serif-heavy-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-font-style, + var(--spectrum-heading-sans-serif-heavy-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-font-weight, + var(--spectrum-heading-sans-serif-heavy-font-weight) + ); } .spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-sans-serif-heavy-strong-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-strong-font-style, + var(--spectrum-heading-sans-serif-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-strong-font-weight, + var(--spectrum-heading-sans-serif-heavy-strong-font-weight) + ); } .spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em { - font-style: var( - --mod-heading-sans-serif-heavy-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-emphasized-font-style, + var(--spectrum-heading-sans-serif-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-emphasized-font-weight, + var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight) + ); } .spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-heavy-strong-emphasized-font-style, + var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh) { - font-style: var( - --mod-heading-cjk-heavy-font-style, - var(--spectrum-heading-cjk-heavy-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-font-weight, - var(--spectrum-heading-cjk-heavy-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-font-style, + var(--spectrum-heading-cjk-heavy-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-font-weight, + var(--spectrum-heading-cjk-heavy-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, @@ -257,14 +257,14 @@ .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em { - font-style: var( - --mod-heading-cjk-heavy-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-emphasized-font-style, + var(--spectrum-heading-cjk-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-emphasized-font-weight, + var(--spectrum-heading-cjk-heavy-emphasized-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, @@ -273,97 +273,97 @@ .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong { - font-style: var( - --mod-heading-cjk-heavy-strong-font-style, - var(--spectrum-heading-cjk-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-font-weight, - var(--spectrum-heading-cjk-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-strong-font-style, + var(--spectrum-heading-cjk-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-strong-font-weight, + var(--spectrum-heading-cjk-heavy-strong-font-weight) + ); } .spectrum-Heading--heavy:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-heavy-strong-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-heavy-strong-emphasized-font-style, + var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--light { - font-style: var( - --mod-heading-sans-serif-light-font-style, - var(--spectrum-heading-sans-serif-light-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-font-weight, - var(--spectrum-heading-sans-serif-light-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-font-style, + var(--spectrum-heading-sans-serif-light-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-font-weight, + var(--spectrum-heading-sans-serif-light-font-weight) + ); } .spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em { - font-style: var( - --mod-heading-sans-serif-light-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-emphasized-font-style, + var(--spectrum-heading-sans-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-emphasized-font-weight, + var(--spectrum-heading-sans-serif-light-emphasized-font-weight) + ); } .spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong { - font-style: var( - --mod-heading-sans-serif-light-strong-font-style, - var(--spectrum-heading-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-font-weight, - var(--spectrum-heading-sans-serif-light-strong-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-strong-font-style, + var(--spectrum-heading-sans-serif-light-strong-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-strong-font-weight, + var(--spectrum-heading-sans-serif-light-strong-font-weight) + ); } .spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em { - font-style: var( - --mod-heading-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-sans-serif-light-strong-emphasized-font-style, + var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-sans-serif-light-strong-emphasized-font-weight, + var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh) { - font-style: var( - --mod-heading-cjk-light-font-style, - var(--spectrum-heading-cjk-light-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-font-weight, - var(--spectrum-heading-cjk-light-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-font-style, + var(--spectrum-heading-cjk-light-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-font-weight, + var(--spectrum-heading-cjk-light-font-weight) + ); } .spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, @@ -372,14 +372,14 @@ .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong { - font-style: var( - --mod-heading-cjk-light-strong-font-style, - var(--spectrum-heading-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-font-weight, - var(--spectrum-heading-cjk-light-strong-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-strong-font-style, + var(--spectrum-heading-cjk-light-strong-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-strong-font-weight, + var(--spectrum-heading-cjk-light-strong-font-weight) + ); } .spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, @@ -388,277 +388,277 @@ .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em { - font-style: var( - --mod-heading-cjk-light-emphasized-font-style, - var(--spectrum-heading-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-emphasized-font-weight, - var(--spectrum-heading-cjk-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-emphasized-font-style, + var(--spectrum-heading-cjk-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-emphasized-font-weight, + var(--spectrum-heading-cjk-light-emphasized-font-weight) + ); } .spectrum-Heading--light:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-light-strong-emphasized-font-style, - var(--spectrum-heading-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-cjk-light-strong-emphasized-font-style, + var(--spectrum-heading-cjk-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-cjk-light-strong-emphasized-font-weight, + var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) + ); } .spectrum-Heading--serif { - font-family: var( - --mod-heading-serif-font-family, - var(--spectrum-heading-serif-font-family) - ); - font-style: var( - --mod-heading-serif-font-style, - var(--spectrum-heading-serif-font-style) - ); - font-weight: var( - --mod-heading-serif-font-weight, - var(--spectrum-heading-serif-font-weight) - ); + font-family: var( + --mod-heading-serif-font-family, + var(--spectrum-heading-serif-font-family) + ); + font-style: var( + --mod-heading-serif-font-style, + var(--spectrum-heading-serif-font-style) + ); + font-weight: var( + --mod-heading-serif-font-weight, + var(--spectrum-heading-serif-font-weight) + ); } .spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em { - font-style: var( - --mod-heading-serif-emphasized-font-style, - var(--spectrum-heading-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-emphasized-font-weight, - var(--spectrum-heading-serif-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-emphasized-font-style, + var(--spectrum-heading-serif-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-emphasized-font-weight, + var(--spectrum-heading-serif-emphasized-font-weight) + ); } .spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong { - font-style: var( - --mod-heading-serif-strong-font-style, - var(--spectrum-heading-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-font-weight, - var(--spectrum-heading-serif-strong-font-weight) - ); + font-style: var( + --mod-heading-serif-strong-font-style, + var(--spectrum-heading-serif-strong-font-style) + ); + font-weight: var( + --mod-heading-serif-strong-font-weight, + var(--spectrum-heading-serif-strong-font-weight) + ); } .spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em { - font-style: var( - --mod-heading-serif-strong-emphasized-font-style, - var(--spectrum-heading-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-emphasized-font-weight, - var(--spectrum-heading-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-strong-emphasized-font-style, + var(--spectrum-heading-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-strong-emphasized-font-weight, + var(--spectrum-heading-serif-strong-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy { - font-style: var( - --mod-heading-serif-heavy-font-style, - var(--spectrum-heading-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-font-weight, - var(--spectrum-heading-serif-heavy-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-font-style, + var(--spectrum-heading-serif-heavy-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-font-weight, + var(--spectrum-heading-serif-heavy-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-serif-heavy-strong-font-style, - var(--spectrum-heading-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-font-weight, - var(--spectrum-heading-serif-heavy-strong-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-strong-font-style, + var(--spectrum-heading-serif-heavy-strong-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-strong-font-weight, + var(--spectrum-heading-serif-heavy-strong-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em { - font-style: var( - --mod-heading-serif-heavy-emphasized-font-style, - var(--spectrum-heading-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-emphasized-font-style, + var(--spectrum-heading-serif-heavy-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-emphasized-font-weight, + var(--spectrum-heading-serif-heavy-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--heavy - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-heavy-strong-emphasized-font-style, + var(--spectrum-heading-serif-heavy-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-heavy-strong-emphasized-font-weight, + var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light { - font-style: var( - --mod-heading-serif-light-font-style, - var(--spectrum-heading-serif-light-font-style) - ); - font-weight: var( - --mod-heading-serif-light-font-weight, - var(--spectrum-heading-serif-light-font-weight) - ); + font-style: var( + --mod-heading-serif-light-font-style, + var(--spectrum-heading-serif-light-font-style) + ); + font-weight: var( + --mod-heading-serif-light-font-weight, + var(--spectrum-heading-serif-light-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em { - font-style: var( - --mod-heading-serif-light-emphasized-font-style, - var(--spectrum-heading-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-emphasized-font-weight, - var(--spectrum-heading-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-light-emphasized-font-style, + var(--spectrum-heading-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-light-emphasized-font-weight, + var(--spectrum-heading-serif-light-emphasized-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong { - font-style: var( - --mod-heading-serif-light-strong-font-style, - var(--spectrum-heading-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-font-weight, - var(--spectrum-heading-serif-light-strong-font-weight) - ); + font-style: var( + --mod-heading-serif-light-strong-font-style, + var(--spectrum-heading-serif-light-strong-font-style) + ); + font-weight: var( + --mod-heading-serif-light-strong-font-weight, + var(--spectrum-heading-serif-light-strong-font-weight) + ); } .spectrum-Heading--serif.spectrum-Heading--light - .spectrum-Heading-strong.spectrum-Heading-emphasized, + .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em { - font-style: var( - --mod-heading-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-heading-serif-light-strong-emphasized-font-style, + var(--spectrum-heading-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-heading-serif-light-strong-emphasized-font-weight, + var(--spectrum-heading-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Body { - font-family: var( - --mod-body-sans-serif-font-family, - var(--spectrum-body-sans-serif-font-family) - ); - font-style: var( - --mod-body-sans-serif-font-style, - var(--spectrum-body-sans-serif-font-style) - ); - font-weight: var( - --mod-body-sans-serif-font-weight, - var(--spectrum-body-sans-serif-font-weight) - ); - font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); - color: var( - --highcontrast-body-font-color, - var(--mod-body-font-color, var(--spectrum-body-font-color)) - ); - line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); - margin-block-start: var( - --mod-body-margin-start, - var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) - ); - margin-block-end: var( - --mod-body-margin-end, - var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) - ); + font-family: var( + --mod-body-sans-serif-font-family, + var(--spectrum-body-sans-serif-font-family) + ); + font-style: var( + --mod-body-sans-serif-font-style, + var(--spectrum-body-sans-serif-font-style) + ); + font-weight: var( + --mod-body-sans-serif-font-weight, + var(--spectrum-body-sans-serif-font-weight) + ); + font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); + color: var( + --highcontrast-body-font-color, + var(--mod-body-font-color, var(--spectrum-body-font-color)) + ); + line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); + margin-block-start: var( + --mod-body-margin-start, + var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) + ); + margin-block-end: var( + --mod-body-margin-end, + var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) + ); } .spectrum-Body .spectrum-Body-strong, .spectrum-Body strong { - font-style: var( - --mod-body-sans-serif-strong-font-style, - var(--spectrum-body-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-font-weight, - var(--spectrum-body-sans-serif-strong-font-weight) - ); + font-style: var( + --mod-body-sans-serif-strong-font-style, + var(--spectrum-body-sans-serif-strong-font-style) + ); + font-weight: var( + --mod-body-sans-serif-strong-font-weight, + var(--spectrum-body-sans-serif-strong-font-weight) + ); } .spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em { - font-style: var( - --mod-body-sans-serif-emphasized-font-style, - var(--spectrum-body-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-emphasized-font-weight, - var(--spectrum-body-sans-serif-emphasized-font-weight) - ); + font-style: var( + --mod-body-sans-serif-emphasized-font-style, + var(--spectrum-body-sans-serif-emphasized-font-style) + ); + font-weight: var( + --mod-body-sans-serif-emphasized-font-weight, + var(--spectrum-body-sans-serif-emphasized-font-weight) + ); } .spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em { - font-style: var( - --mod-body-sans-serif-strong-emphasized-font-style, - var(--spectrum-body-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-emphasized-font-weight, - var(--spectrum-body-sans-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-sans-serif-strong-emphasized-font-style, + var(--spectrum-body-sans-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-sans-serif-strong-emphasized-font-weight, + var(--spectrum-body-sans-serif-strong-emphasized-font-weight) + ); } .spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh) { - font-family: var( - --mod-body-cjk-font-family, - var(--spectrum-body-cjk-font-family) - ); - font-style: var( - --mod-body-cjk-font-style, - var(--spectrum-body-cjk-font-style) - ); - font-weight: var( - --mod-body-cjk-font-weight, - var(--spectrum-body-cjk-font-weight) - ); - line-height: var( - --mod-body-cjk-line-height, - var(--spectrum-body-cjk-line-height) - ); - letter-spacing: var( - --mod-body-cjk-letter-spacing, - var(--spectrum-body-cjk-letter-spacing) - ); + font-family: var( + --mod-body-cjk-font-family, + var(--spectrum-body-cjk-font-family) + ); + font-style: var( + --mod-body-cjk-font-style, + var(--spectrum-body-cjk-font-style) + ); + font-weight: var( + --mod-body-cjk-font-weight, + var(--spectrum-body-cjk-font-weight) + ); + line-height: var( + --mod-body-cjk-line-height, + var(--spectrum-body-cjk-line-height) + ); + letter-spacing: var( + --mod-body-cjk-letter-spacing, + var(--spectrum-body-cjk-letter-spacing) + ); } .spectrum-Body:lang(ja) .spectrum-Body-strong, @@ -667,14 +667,14 @@ .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong { - font-style: var( - --mod-body-cjk-strong-font-style, - var(--spectrum-body-cjk-strong-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-font-weight, - var(--spectrum-body-cjk-strong-font-weight) - ); + font-style: var( + --mod-body-cjk-strong-font-style, + var(--spectrum-body-cjk-strong-font-style) + ); + font-weight: var( + --mod-body-cjk-strong-font-weight, + var(--spectrum-body-cjk-strong-font-weight) + ); } .spectrum-Body:lang(ja) .spectrum-Body-emphasized, @@ -683,14 +683,14 @@ .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em { - font-style: var( - --mod-body-cjk-emphasized-font-style, - var(--spectrum-body-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-emphasized-font-weight, - var(--spectrum-body-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-body-cjk-emphasized-font-style, + var(--spectrum-body-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-body-cjk-emphasized-font-weight, + var(--spectrum-body-cjk-emphasized-font-weight) + ); } .spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, @@ -702,161 +702,161 @@ .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em { - font-style: var( - --mod-body-cjk-strong-emphasized-font-style, - var(--spectrum-body-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-emphasized-font-weight, - var(--spectrum-body-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-cjk-strong-emphasized-font-style, + var(--spectrum-body-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-cjk-strong-emphasized-font-weight, + var(--spectrum-body-cjk-strong-emphasized-font-weight) + ); } .spectrum-Body--serif { - font-family: var( - --mod-body-serif-font-family, - var(--spectrum-body-serif-font-family) - ); - font-weight: var( - --mod-body-serif-font-weight, - var(--spectrum-body-serif-font-weight) - ); - font-style: var( - --mod-body-serif-font-style, - var(--spectrum-body-serif-font-style) - ); + font-family: var( + --mod-body-serif-font-family, + var(--spectrum-body-serif-font-family) + ); + font-weight: var( + --mod-body-serif-font-weight, + var(--spectrum-body-serif-font-weight) + ); + font-style: var( + --mod-body-serif-font-style, + var(--spectrum-body-serif-font-style) + ); } .spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong { - font-style: var( - --mod-body-serif-strong-font-style, - var(--spectrum-body-serif-strong-font-style) - ); - font-weight: var( - --mod-body-serif-strong-font-weight, - var(--spectrum-body-serif-strong-font-weight) - ); + font-style: var( + --mod-body-serif-strong-font-style, + var(--spectrum-body-serif-strong-font-style) + ); + font-weight: var( + --mod-body-serif-strong-font-weight, + var(--spectrum-body-serif-strong-font-weight) + ); } .spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em { - font-style: var( - --mod-body-serif-emphasized-font-style, - var(--spectrum-body-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-emphasized-font-weight, - var(--spectrum-body-serif-emphasized-font-weight) - ); + font-style: var( + --mod-body-serif-emphasized-font-style, + var(--spectrum-body-serif-emphasized-font-style) + ); + font-weight: var( + --mod-body-serif-emphasized-font-weight, + var(--spectrum-body-serif-emphasized-font-weight) + ); } .spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em { - font-style: var( - --mod-body-serif-strong-emphasized-font-style, - var(--spectrum-body-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-strong-emphasized-font-weight, - var(--spectrum-body-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-body-serif-strong-emphasized-font-style, + var(--spectrum-body-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-body-serif-strong-emphasized-font-weight, + var(--spectrum-body-serif-strong-emphasized-font-weight) + ); } .spectrum-Detail { - font-family: var( - --mod-detail-sans-serif-font-family, - var(--spectrum-detail-sans-serif-font-family) - ); - font-style: var( - --mod-detail-sans-serif-font-style, - var(--spectrum-detail-sans-serif-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-font-weight, - var(--spectrum-detail-sans-serif-font-weight) - ); - font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); - color: var( - --highcontrast-detail-font-color, - var(--mod-detail-font-color, var(--spectrum-detail-font-color)) - ); - line-height: var( - --mod-detail-line-height, - var(--spectrum-detail-line-height) - ); - letter-spacing: var( - --mod-detail-letter-spacing, - var(--spectrum-detail-letter-spacing) - ); - text-transform: uppercase; - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start, 0) - ); - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end, 0) - ); + font-family: var( + --mod-detail-sans-serif-font-family, + var(--spectrum-detail-sans-serif-font-family) + ); + font-style: var( + --mod-detail-sans-serif-font-style, + var(--spectrum-detail-sans-serif-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-font-weight, + var(--spectrum-detail-sans-serif-font-weight) + ); + font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); + color: var( + --highcontrast-detail-font-color, + var(--mod-detail-font-color, var(--spectrum-detail-font-color)) + ); + line-height: var( + --mod-detail-line-height, + var(--spectrum-detail-line-height) + ); + letter-spacing: var( + --mod-detail-letter-spacing, + var(--spectrum-detail-letter-spacing) + ); + text-transform: uppercase; + margin-block-start: var( + --mod-detail-margin-start, + var(--spectrum-detail-margin-start, 0) + ); + margin-block-end: var( + --mod-detail-margin-end, + var(--spectrum-detail-margin-end, 0) + ); } .spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong { - font-style: var( - --mod-detail-sans-serif-strong-font-style, - var(--spectrum-detail-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-font-weight, - var(--spectrum-detail-sans-serif-strong-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-strong-font-style, + var(--spectrum-detail-sans-serif-strong-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-strong-font-weight, + var(--spectrum-detail-sans-serif-strong-font-weight) + ); } .spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em { - font-style: var( - --mod-detail-sans-serif-emphasized-font-style, - var(--spectrum-detail-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-emphasized-font-weight, - var(--spectrum-detail-sans-serif-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-emphasized-font-style, + var(--spectrum-detail-sans-serif-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-emphasized-font-weight, + var(--spectrum-detail-sans-serif-emphasized-font-weight) + ); } .spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em { - font-style: var( - --mod-detail-sans-serif-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-strong-emphasized-font-style, + var(--spectrum-detail-sans-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-strong-emphasized-font-weight, + var(--spectrum-detail-sans-serif-strong-emphasized-font-weight) + ); } .spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh) { - font-family: var( - --mod-detail-cjk-font-family, - var(--spectrum-detail-cjk-font-family) - ); - font-style: var( - --mod-detail-cjk-font-style, - var(--spectrum-detail-cjk-font-style) - ); - font-weight: var( - --mod-detail-cjk-font-weight, - var(--spectrum-detail-cjk-font-weight) - ); - line-height: var( - --mod-detail-cjk-line-height, - var(--spectrum-detail-cjk-line-height) - ); + font-family: var( + --mod-detail-cjk-font-family, + var(--spectrum-detail-cjk-font-family) + ); + font-style: var( + --mod-detail-cjk-font-style, + var(--spectrum-detail-cjk-font-style) + ); + font-weight: var( + --mod-detail-cjk-font-weight, + var(--spectrum-detail-cjk-font-weight) + ); + line-height: var( + --mod-detail-cjk-line-height, + var(--spectrum-detail-cjk-line-height) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-strong, @@ -865,14 +865,14 @@ .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong { - font-style: var( - --mod-detail-cjk-strong-font-style, - var(--spectrum-detail-cjk-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-font-weight, - var(--spectrum-detail-cjk-strong-font-weight) - ); + font-style: var( + --mod-detail-cjk-strong-font-style, + var(--spectrum-detail-cjk-strong-font-style) + ); + font-weight: var( + --mod-detail-cjk-strong-font-weight, + var(--spectrum-detail-cjk-strong-font-weight) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, @@ -881,14 +881,14 @@ .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em { - font-style: var( - --mod-detail-cjk-emphasized-font-style, - var(--spectrum-detail-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-emphasized-font-weight, - var(--spectrum-detail-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-emphasized-font-style, + var(--spectrum-detail-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-emphasized-font-weight, + var(--spectrum-detail-cjk-emphasized-font-weight) + ); } .spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, @@ -900,127 +900,127 @@ .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em { - font-style: var( - --mod-detail-cjk-strong-emphasized-font-style, - var(--spectrum-detail-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-strong-emphasized-font-style, + var(--spectrum-detail-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-strong-emphasized-font-weight, + var(--spectrum-detail-cjk-strong-emphasized-font-weight) + ); } .spectrum-Detail--serif { - font-family: var( - --mod-detail-serif-font-family, - var(--spectrum-detail-serif-font-family) - ); - font-style: var( - --mod-detail-serif-font-style, - var(--spectrum-detail-serif-font-style) - ); - font-weight: var( - --mod-detail-serif-font-weight, - var(--spectrum-detail-serif-font-weight) - ); + font-family: var( + --mod-detail-serif-font-family, + var(--spectrum-detail-serif-font-family) + ); + font-style: var( + --mod-detail-serif-font-style, + var(--spectrum-detail-serif-font-style) + ); + font-weight: var( + --mod-detail-serif-font-weight, + var(--spectrum-detail-serif-font-weight) + ); } .spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong { - font-style: var( - --mod-detail-serif-strong-font-style, - var(--spectrum-detail-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-font-weight, - var(--spectrum-detail-serif-strong-font-weight) - ); + font-style: var( + --mod-detail-serif-strong-font-style, + var(--spectrum-detail-serif-strong-font-style) + ); + font-weight: var( + --mod-detail-serif-strong-font-weight, + var(--spectrum-detail-serif-strong-font-weight) + ); } .spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em { - font-style: var( - --mod-detail-serif-emphasized-font-style, - var(--spectrum-detail-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-emphasized-font-weight, - var(--spectrum-detail-serif-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-emphasized-font-style, + var(--spectrum-detail-serif-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-emphasized-font-weight, + var(--spectrum-detail-serif-emphasized-font-weight) + ); } .spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em { - font-style: var( - --mod-detail-serif-strong-emphasized-font-style, - var(--spectrum-detail-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-emphasized-font-weight, - var(--spectrum-detail-serif-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-strong-emphasized-font-style, + var(--spectrum-detail-serif-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-strong-emphasized-font-weight, + var(--spectrum-detail-serif-strong-emphasized-font-weight) + ); } .spectrum-Detail--light { - font-style: var( - --mod-detail-sans-serif-light-font-style, - var(--spectrum-detail-sans-serif-light-font-style) - ); - font-weight: var( - --spectrum-detail-sans-serif-light-font-weight, - var(--spectrum-detail-sans-serif-light-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-font-style, + var(--spectrum-detail-sans-serif-light-font-style) + ); + font-weight: var( + --spectrum-detail-sans-serif-light-font-weight, + var(--spectrum-detail-sans-serif-light-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong { - font-style: var( - --mod-detail-sans-serif-light-strong-font-style, - var(--spectrum-detail-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-font-weight, - var(--spectrum-detail-sans-serif-light-strong-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-strong-font-style, + var(--spectrum-detail-sans-serif-light-strong-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-strong-font-weight, + var(--spectrum-detail-sans-serif-light-strong-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em { - font-style: var( - --mod-detail-sans-serif-light-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-emphasized-font-style, + var(--spectrum-detail-sans-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-emphasized-font-weight, + var(--spectrum-detail-sans-serif-light-emphasized-font-weight) + ); } .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em { - font-style: var( - --mod-detail-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-sans-serif-light-strong-emphasized-font-style, + var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-sans-serif-light-strong-emphasized-font-weight, + var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh) { - font-style: var( - --mod-detail-cjk-light-font-style, - var(--spectrum-detail-cjk-light-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-font-weight, - var(--spectrum-detail-cjk-light-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-font-style, + var(--spectrum-detail-cjk-light-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-font-weight, + var(--spectrum-detail-cjk-light-font-weight) + ); } .spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, @@ -1029,14 +1029,14 @@ .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong { - font-style: var( - --mod-detail-cjk-light-strong-font-style, - var(--spectrum-detail-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-font-weight, - var(--spectrum-detail-cjk-light-strong-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-strong-font-style, + var(--spectrum-detail-cjk-light-strong-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-strong-font-weight, + var(--spectrum-detail-cjk-light-strong-font-weight) + ); } .spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, @@ -1045,161 +1045,161 @@ .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em { - font-style: var( - --mod-detail-cjk-light-emphasized-font-style, - var(--spectrum-detail-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-emphasized-font-weight, - var(--spectrum-detail-cjk-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-cjk-light-emphasized-font-style, + var(--spectrum-detail-cjk-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-emphasized-font-weight, + var(--spectrum-detail-cjk-light-emphasized-font-weight) + ); } .spectrum-Detail--light:lang(ja) - .spectrum-Detail-strong.spectrum-Detail-emphasized, + .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) - .spectrum-Detail-strong.spectrum-Detail-emphasized, + .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) - .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var( - --mod-detail-cjk-light-strong-emphasized-font-style, - var(--spectrum-detail-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) - ); + .spectrum-Detail-strong.spectrum-Detail-emphasized { + font-style: var( + --mod-detail-cjk-light-strong-emphasized-font-style, + var(--spectrum-detail-cjk-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-cjk-light-strong-emphasized-font-weight, + var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light { - font-style: var( - --mod-detail-serif-light-font-style, - var(--spectrum-detail-serif-light-font-style) - ); - font-weight: var( - --mod-detail-serif-light-font-weight, - var(--spectrum-detail-serif-light-font-weight) - ); + font-style: var( + --mod-detail-serif-light-font-style, + var(--spectrum-detail-serif-light-font-style) + ); + font-weight: var( + --mod-detail-serif-light-font-weight, + var(--spectrum-detail-serif-light-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong { - font-style: var( - --mod-detail-serif-light-strong-font-style, - var(--spectrum-detail-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-font-weight, - var(--spectrum-detail-serif-light-strong-font-weight) - ); + font-style: var( + --mod-detail-serif-light-strong-font-style, + var(--spectrum-detail-serif-light-strong-font-style) + ); + font-weight: var( + --mod-detail-serif-light-strong-font-weight, + var(--spectrum-detail-serif-light-strong-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em { - font-style: var( - --mod-detail-serif-light-emphasized-font-style, - var(--spectrum-detail-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-emphasized-font-weight, - var(--spectrum-detail-serif-light-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-light-emphasized-font-style, + var(--spectrum-detail-serif-light-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-light-emphasized-font-weight, + var(--spectrum-detail-serif-light-emphasized-font-weight) + ); } .spectrum-Detail--serif.spectrum-Detail--light - .spectrum-Detail-strong.spectrum-Body-emphasized, + .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em { - font-style: var( - --mod-detail-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-serif-light-strong-emphasized-font-weight) - ); + font-style: var( + --mod-detail-serif-light-strong-emphasized-font-style, + var(--spectrum-detail-serif-light-strong-emphasized-font-style) + ); + font-weight: var( + --mod-detail-serif-light-strong-emphasized-font-weight, + var(--spectrum-detail-serif-light-strong-emphasized-font-weight) + ); } .spectrum-Code { - font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); - font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); - font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); - font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); - line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); - color: var( - --highcontrast-code-font-color, - var(--mod-code-font-color, var(--spectrum-code-font-color)) - ); - margin-block-start: var( - --mod-code-margin-start, - var(--spectrum-code-margin-end, 0) - ); - margin-block-end: var( - --mod-code-margin-end, - var(--spectrum-code-margin-end, 0) - ); + font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); + font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); + font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); + font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); + line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); + color: var( + --highcontrast-code-font-color, + var(--mod-code-font-color, var(--spectrum-code-font-color)) + ); + margin-block-start: var( + --mod-code-margin-start, + var(--spectrum-code-margin-end, 0) + ); + margin-block-end: var( + --mod-code-margin-end, + var(--spectrum-code-margin-end, 0) + ); } .spectrum-Code .spectrum-Code-strong, .spectrum-Code strong { - font-style: var( - --mod-code-strong-font-style, - var(--spectrum-code-strong-font-style) - ); - font-weight: var( - --mod-code-strong-font-weight, - var(--spectrum-code-strong-font-weight) - ); + font-style: var( + --mod-code-strong-font-style, + var(--spectrum-code-strong-font-style) + ); + font-weight: var( + --mod-code-strong-font-weight, + var(--spectrum-code-strong-font-weight) + ); } .spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em { - font-style: var( - --mod-code-emphasized-font-style, - var(--spectrum-code-emphasized-font-style) - ); - font-weight: var( - --mod-code-emphasized-font-weight, - var(--spectrum-code-emphasized-font-weight) - ); + font-style: var( + --mod-code-emphasized-font-style, + var(--spectrum-code-emphasized-font-style) + ); + font-weight: var( + --mod-code-emphasized-font-weight, + var(--spectrum-code-emphasized-font-weight) + ); } .spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em { - font-style: var( - --mod-code-strong-emphasized-font-style, - var(--spectrum-code-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-strong-emphasized-font-weight, - var(--spectrum-code-strong-emphasized-font-weight) - ); + font-style: var( + --mod-code-strong-emphasized-font-style, + var(--spectrum-code-strong-emphasized-font-style) + ); + font-weight: var( + --mod-code-strong-emphasized-font-weight, + var(--spectrum-code-strong-emphasized-font-weight) + ); } .spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh) { - font-family: var( - --mod-code-cjk-font-family, - var(--spectrum-code-cjk-font-family) - ); - font-style: var( - --mod-code-cjk-font-style, - var(--spectrum-code-cjk-font-style) - ); - font-weight: var( - --mod-code-cjk-font-weight, - var(--spectrum-code-cjk-font-weight) - ); - line-height: var( - --mod-code-cjk-line-height, - var(--spectrum-code-cjk-line-height) - ); - letter-spacing: var( - --mod-code-cjk-letter-spacing, - var(--spectrum-code-cjk-letter-spacing) - ); + font-family: var( + --mod-code-cjk-font-family, + var(--spectrum-code-cjk-font-family) + ); + font-style: var( + --mod-code-cjk-font-style, + var(--spectrum-code-cjk-font-style) + ); + font-weight: var( + --mod-code-cjk-font-weight, + var(--spectrum-code-cjk-font-weight) + ); + line-height: var( + --mod-code-cjk-line-height, + var(--spectrum-code-cjk-line-height) + ); + letter-spacing: var( + --mod-code-cjk-letter-spacing, + var(--spectrum-code-cjk-letter-spacing) + ); } .spectrum-Code:lang(ja) .spectrum-Code-strong, @@ -1208,14 +1208,14 @@ .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong { - font-style: var( - --mod-code-cjk-strong-font-style, - var(--spectrum-code-cjk-strong-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-font-weight, - var(--spectrum-code-cjk-strong-font-weight) - ); + font-style: var( + --mod-code-cjk-strong-font-style, + var(--spectrum-code-cjk-strong-font-style) + ); + font-weight: var( + --mod-code-cjk-strong-font-weight, + var(--spectrum-code-cjk-strong-font-weight) + ); } .spectrum-Code:lang(ja) .spectrum-Code-emphasized, @@ -1224,14 +1224,14 @@ .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em { - font-style: var( - --mod-code-cjk-emphasized-font-style, - var(--spectrum-code-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-emphasized-font-weight, - var(--spectrum-code-cjk-emphasized-font-weight) - ); + font-style: var( + --mod-code-cjk-emphasized-font-style, + var(--spectrum-code-cjk-emphasized-font-style) + ); + font-weight: var( + --mod-code-cjk-emphasized-font-weight, + var(--spectrum-code-cjk-emphasized-font-weight) + ); } .spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, @@ -1243,176 +1243,164 @@ .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em { - font-style: var( - --mod-code-cjk-strong-emphasized-font-style, - var(--spectrum-code-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-emphasized-font-weight, - var(--spectrum-code-cjk-strong-emphasized-font-weight) - ); + font-style: var( + --mod-code-cjk-strong-emphasized-font-style, + var(--spectrum-code-cjk-strong-emphasized-font-style) + ); + font-weight: var( + --mod-code-cjk-strong-emphasized-font-weight, + var(--spectrum-code-cjk-strong-emphasized-font-weight) + ); } .spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var( - --system-heading-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var( - --system-heading-serif-font-family - ); - --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); - --spectrum-heading-cjk-letter-spacing: var( - --system-heading-cjk-letter-spacing - ); - --spectrum-heading-font-color: var(--system-heading-font-color); - --spectrum-heading-font-size: var(--system-heading-font-size); - --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); + --spectrum-heading-sans-serif-font-family: var( + --system-heading-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var(--system-heading-serif-font-family); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var( + --system-heading-cjk-letter-spacing + ); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); } .spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxs-cjk-font-size + ); } .spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xs-cjk-font-size); } .spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--system-heading-size-s-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-s-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-s-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-s-cjk-font-size); } .spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--system-heading-size-m-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-m-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-m-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-m-cjk-font-size); } .spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--system-heading-size-l-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-l-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-l-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-l-cjk-font-size); } .spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xl-cjk-font-size); } .spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxl-cjk-font-size + ); } .spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var( + --system-heading-size-xxxl-cjk-font-size + ); } .spectrum-Body { - --spectrum-body-sans-serif-font-family: var( - --system-body-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--system-body-serif-font-family); - --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); - --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); - --spectrum-body-font-color: var(--system-body-font-color); - --spectrum-body-font-size: var(--system-body-font-size); + --spectrum-body-sans-serif-font-family: var( + --system-body-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-font-size); } .spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--system-body-size-xs-font-size); + --spectrum-body-font-size: var(--system-body-size-xs-font-size); } .spectrum-Body--sizeS { - --spectrum-body-font-size: var(--system-body-size-s-font-size); + --spectrum-body-font-size: var(--system-body-size-s-font-size); } .spectrum-Body--sizeM { - --spectrum-body-font-size: var(--system-body-size-m-font-size); + --spectrum-body-font-size: var(--system-body-size-m-font-size); } .spectrum-Body--sizeL { - --spectrum-body-font-size: var(--system-body-size-l-font-size); + --spectrum-body-font-size: var(--system-body-size-l-font-size); } .spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--system-body-size-xl-font-size); + --spectrum-body-font-size: var(--system-body-size-xl-font-size); } .spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--system-body-size-xxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxl-font-size); } .spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); } .spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var( - --system-detail-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); - --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); - --spectrum-detail-font-color: var(--system-detail-font-color); - --spectrum-detail-font-size: var(--system-detail-font-size); + --spectrum-detail-sans-serif-font-family: var( + --system-detail-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-font-size); } .spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--system-detail-size-s-font-size); + --spectrum-detail-font-size: var(--system-detail-size-s-font-size); } .spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--system-detail-size-m-font-size); + --spectrum-detail-font-size: var(--system-detail-size-m-font-size); } .spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--system-detail-size-l-font-size); + --spectrum-detail-font-size: var(--system-detail-size-l-font-size); } .spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); } .spectrum-Code { - --spectrum-code-font-family: var(--system-code-font-family); - --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); - --spectrum-code-font-color: var(--system-code-font-color); - --spectrum-code-font-size: var(--system-code-font-size); + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-font-size); } .spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--system-code-size-xs-font-size); + --spectrum-code-font-size: var(--system-code-size-xs-font-size); } .spectrum-Code--sizeS { - --spectrum-code-font-size: var(--system-code-size-s-font-size); + --spectrum-code-font-size: var(--system-code-size-s-font-size); } .spectrum-Code--sizeM { - --spectrum-code-font-size: var(--system-code-size-m-font-size); + --spectrum-code-font-size: var(--system-code-size-m-font-size); } .spectrum-Code--sizeL { - --spectrum-code-font-size: var(--system-code-size-l-font-size); + --spectrum-code-font-size: var(--system-code-size-l-font-size); } .spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--system-code-size-xl-font-size); + --spectrum-code-font-size: var(--system-code-size-xl-font-size); } diff --git a/tsconfig.json b/tsconfig.json index 48e132c7f1..8a62b65f8d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,27 +1,28 @@ { - "compilerOptions": { - "allowSyntheticDefaultImports": true, - "baseUrl": "./packages", - "declaration": true, - "emitDeclarationOnly": true, - "experimentalDecorators": true, - "importHelpers": true, - "inlineSources": true, - "isolatedModules": true, - "lib": ["es2018", "dom", "dom.iterable"], - "module": "esNext", - "moduleResolution": "node", - "noImplicitOverride": true, - "noImplicitReturns": true, - "noUnusedParameters": true, - "noUnusedLocals": true, - "rootDir": ".", - "skipLibCheck": true, - "strict": true, - "sourceMap": true, - "target": "es2018", - "types": ["mocha", "chai", "sinon", "node", "swc"], - "resolveJsonModule": true - }, - "include": ["./global.d.ts"] + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "baseUrl": "./packages", + "declaration": true, + "emitDeclarationOnly": true, + "experimentalDecorators": true, + "forceConsistentCasingInFileNames": true, + "importHelpers": true, + "inlineSources": true, + "isolatedModules": true, + "lib": ["es2018", "dom", "dom.iterable"], + "module": "esNext", + "moduleResolution": "node", + "noImplicitOverride": true, + "noImplicitReturns": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "resolveJsonModule": true, + "rootDir": ".", + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "target": "es2018", + "types": ["mocha", "chai", "sinon", "node", "swc"] + }, + "include": ["./global.d.ts"] } diff --git a/yarn.lock b/yarn.lock index 157eee9a84..09d8d27799 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2547,6 +2547,11 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f" integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g== +"@eslint/js@8.57.1": + version "8.57.1" + resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2" + integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q== + "@esm-bundle/chai@^4.3.4-fix.0": version "4.3.4-fix.0" resolved "https://registry.yarnpkg.com/@esm-bundle/chai/-/chai-4.3.4-fix.0.tgz#3084cff7eb46d741749f47f3a48dbbdcbaf30a92" @@ -2708,6 +2713,15 @@ debug "^4.3.1" minimatch "^3.0.5" +"@humanwhocodes/config-array@^0.13.0": + version "0.13.0" + resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748" + integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw== + dependencies: + "@humanwhocodes/object-schema" "^2.0.3" + debug "^4.3.1" + minimatch "^3.0.5" + "@humanwhocodes/module-importer@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c" @@ -2718,7 +2732,7 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/momoa/-/momoa-2.0.4.tgz#8b9e7a629651d15009c3587d07a222deeb829385" integrity sha512-RE815I4arJFtt+FVeU1Tgp9/Xvecacji8w/V6XtXsWWH/wz/eNkNbhb+ny/+PlVZjV0rxQpRSQKNKE3lcktHEA== -"@humanwhocodes/object-schema@^2.0.2": +"@humanwhocodes/object-schema@^2.0.2", "@humanwhocodes/object-schema@^2.0.3": version "2.0.3" resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3" integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA== @@ -7304,6 +7318,17 @@ semver "^7.6.0" ts-api-utils "^1.3.0" +"@typescript-eslint/parser@^6.7.5": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b" + integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ== + dependencies: + "@typescript-eslint/scope-manager" "6.21.0" + "@typescript-eslint/types" "6.21.0" + "@typescript-eslint/typescript-estree" "6.21.0" + "@typescript-eslint/visitor-keys" "6.21.0" + debug "^4.3.4" + "@typescript-eslint/parser@^7.0.0", "@typescript-eslint/parser@^7.0.2": version "7.8.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.8.0.tgz#1e1db30c8ab832caffee5f37e677dbcb9357ddc8" @@ -7323,6 +7348,14 @@ "@typescript-eslint/types" "5.62.0" "@typescript-eslint/visitor-keys" "5.62.0" +"@typescript-eslint/scope-manager@6.21.0": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1" + integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg== + dependencies: + "@typescript-eslint/types" "6.21.0" + "@typescript-eslint/visitor-keys" "6.21.0" + "@typescript-eslint/scope-manager@7.8.0": version "7.8.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.8.0.tgz#bb19096d11ec6b87fb6640d921df19b813e02047" @@ -7354,6 +7387,11 @@ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f" integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ== +"@typescript-eslint/types@6.21.0": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d" + integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg== + "@typescript-eslint/types@7.8.0": version "7.8.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.8.0.tgz#1fd2577b3ad883b769546e2d1ef379f929a7091d" @@ -7377,6 +7415,20 @@ semver "^7.3.7" tsutils "^3.21.0" +"@typescript-eslint/typescript-estree@6.21.0": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46" + integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ== + dependencies: + "@typescript-eslint/types" "6.21.0" + "@typescript-eslint/visitor-keys" "6.21.0" + debug "^4.3.4" + globby "^11.1.0" + is-glob "^4.0.3" + minimatch "9.0.3" + semver "^7.5.4" + ts-api-utils "^1.0.1" + "@typescript-eslint/typescript-estree@7.8.0": version "7.8.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.8.0.tgz#b028a9226860b66e623c1ee55cc2464b95d2987c" @@ -7450,6 +7502,14 @@ "@typescript-eslint/types" "5.62.0" eslint-visitor-keys "^3.3.0" +"@typescript-eslint/visitor-keys@6.21.0": + version "6.21.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47" + integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A== + dependencies: + "@typescript-eslint/types" "6.21.0" + eslint-visitor-keys "^3.4.1" + "@typescript-eslint/visitor-keys@7.8.0": version "7.8.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.8.0.tgz#7285aab991da8bee411a42edbd5db760d22fdd91" @@ -9691,7 +9751,7 @@ chalk@5.3.0, chalk@^5.0.0, chalk@^5.0.1, chalk@^5.1.2, chalk@^5.2.0, chalk@^5.3. resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385" integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w== -chalk@^1.0.0: +chalk@^1.0.0, chalk@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A== @@ -10345,16 +10405,16 @@ common-path-prefix@^3.0.0: resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0" integrity sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w== +common-tags@^1.4.0, common-tags@^1.8.2: + version "1.8.2" + resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6" + integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA== + common-tags@^1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937" integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw== -common-tags@^1.8.2: - version "1.8.2" - resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6" - integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA== - commondir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" @@ -11686,6 +11746,11 @@ dir-glob@^3.0.1: dependencies: path-type "^4.0.0" +dlv@^1.1.0: + version "1.1.3" + resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79" + integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA== + dns-packet@^5.2.2: version "5.4.0" resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.4.0.tgz#1f88477cf9f27e78a213fb6d118ae38e759a879b" @@ -12463,6 +12528,13 @@ escodegen@^2.0.0, escodegen@^2.1.0: optionalDependencies: source-map "~0.6.1" +eslint-compat-utils@^0.6.0: + version "0.6.4" + resolved "https://registry.yarnpkg.com/eslint-compat-utils/-/eslint-compat-utils-0.6.4.tgz#173d305132da755ac3612cccab03e1b2e14235ed" + integrity sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw== + dependencies: + semver "^7.5.4" + eslint-config-airbnb-base@^15.0.0: version "15.0.0" resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz#6b09add90ac79c2f8d723a2580e07f3925afd236" @@ -12501,6 +12573,13 @@ eslint-import-resolver-node@^0.3.9: is-core-module "^2.13.0" resolve "^1.22.4" +eslint-json-compat-utils@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/eslint-json-compat-utils/-/eslint-json-compat-utils-0.2.1.tgz#32931d42c723da383712f25177a2c57b9ef5f079" + integrity sha512-YzEodbDyW8DX8bImKhAcCeu/L31Dd/70Bidx2Qex9OFUtgzXLqtfWL4Hr5fM/aCCB8QUZLuJur0S9k6UfgFkfg== + dependencies: + esquery "^1.6.0" + eslint-module-utils@^2.8.0: version "2.8.1" resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34" @@ -12563,6 +12642,20 @@ eslint-plugin-jsdoc@^50.6.1: spdx-expression-parse "^4.0.0" synckit "^0.9.1" +eslint-plugin-jsonc@^2.18.2: + version "2.18.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.18.2.tgz#893520feb35d343e7438e2fb57fad179ef3ff6aa" + integrity sha512-SDhJiSsWt3nItl/UuIv+ti4g3m4gpGkmnUJS9UWR3TrpyNsIcnJoBRD7Kof6cM4Rk3L0wrmY5Tm3z7ZPjR2uGg== + dependencies: + "@eslint-community/eslint-utils" "^4.2.0" + eslint-compat-utils "^0.6.0" + eslint-json-compat-utils "^0.2.1" + espree "^9.6.1" + graphemer "^1.4.0" + jsonc-eslint-parser "^2.0.4" + natural-compare "^1.4.0" + synckit "^0.6.0" + eslint-plugin-lit-a11y@^2.2.2: version "2.4.1" resolved "https://registry.yarnpkg.com/eslint-plugin-lit-a11y/-/eslint-plugin-lit-a11y-2.4.1.tgz#cdae1761322a675427eff82c8c0e8f8aa4fdf3ba" @@ -12669,7 +12762,7 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1: esrecurse "^4.3.0" estraverse "^4.1.1" -eslint-scope@^7.2.2: +eslint-scope@^7.1.1, eslint-scope@^7.2.2: version "7.2.2" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f" integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg== @@ -12682,7 +12775,7 @@ eslint-visitor-keys@^2.1.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== -eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3: +eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3: version "3.4.3" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== @@ -12736,6 +12829,50 @@ eslint@^8.23.0: strip-ansi "^6.0.1" text-table "^0.2.0" +eslint@^8.52.0, eslint@^8.7.0: + version "8.57.1" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9" + integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA== + dependencies: + "@eslint-community/eslint-utils" "^4.2.0" + "@eslint-community/regexpp" "^4.6.1" + "@eslint/eslintrc" "^2.1.4" + "@eslint/js" "8.57.1" + "@humanwhocodes/config-array" "^0.13.0" + "@humanwhocodes/module-importer" "^1.0.1" + "@nodelib/fs.walk" "^1.2.8" + "@ungap/structured-clone" "^1.2.0" + ajv "^6.12.4" + chalk "^4.0.0" + cross-spawn "^7.0.2" + debug "^4.3.2" + doctrine "^3.0.0" + escape-string-regexp "^4.0.0" + eslint-scope "^7.2.2" + eslint-visitor-keys "^3.4.3" + espree "^9.6.1" + esquery "^1.4.2" + esutils "^2.0.2" + fast-deep-equal "^3.1.3" + file-entry-cache "^6.0.1" + find-up "^5.0.0" + glob-parent "^6.0.2" + globals "^13.19.0" + graphemer "^1.4.0" + ignore "^5.2.0" + imurmurhash "^0.1.4" + is-glob "^4.0.0" + is-path-inside "^3.0.3" + js-yaml "^4.1.0" + json-stable-stringify-without-jsonify "^1.0.1" + levn "^0.4.1" + lodash.merge "^4.6.2" + minimatch "^3.1.2" + natural-compare "^1.4.0" + optionator "^0.9.3" + strip-ansi "^6.0.1" + text-table "^0.2.0" + esm-import-transformer@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/esm-import-transformer/-/esm-import-transformer-3.0.2.tgz#0ccc2a9cb0e793e4b148ecb4064e2d52bb15580b" @@ -12752,7 +12889,7 @@ espree@^10.1.0, espree@^10.3.0: acorn-jsx "^5.3.2" eslint-visitor-keys "^4.2.0" -espree@^9.6.0, espree@^9.6.1: +espree@^9.0.0, espree@^9.3.1, espree@^9.6.0, espree@^9.6.1: version "9.6.1" resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f" integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ== @@ -12766,6 +12903,13 @@ esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0: resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== +esquery@^1.4.0, esquery@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7" + integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg== + dependencies: + estraverse "^5.1.0" + esquery@^1.4.2: version "1.5.0" resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b" @@ -12773,13 +12917,6 @@ esquery@^1.4.2: dependencies: estraverse "^5.1.0" -esquery@^1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7" - integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg== - dependencies: - estraverse "^5.1.0" - esrecurse@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921" @@ -16933,6 +17070,16 @@ json5@^2.2.0, json5@^2.2.2, json5@^2.2.3: resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== +jsonc-eslint-parser@^2.0.4: + version "2.4.0" + resolved "https://registry.yarnpkg.com/jsonc-eslint-parser/-/jsonc-eslint-parser-2.4.0.tgz#74ded53f9d716e8d0671bd167bf5391f452d5461" + integrity sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg== + dependencies: + acorn "^8.5.0" + eslint-visitor-keys "^3.0.0" + espree "^9.0.0" + semver "^7.3.5" + jsonc-parser@3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76" @@ -17875,7 +18022,7 @@ lodash.memoize@^4.1.2: resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= -lodash.merge@^4.6.2: +lodash.merge@^4.6.0, lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== @@ -17925,7 +18072,7 @@ lodash.upperfirst@^4.3.1: resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce" integrity sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg== -lodash@4.17.21, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0: +lodash@4.17.21, lodash@>=4.17.21, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -17999,11 +18146,24 @@ logform@^2.3.2, logform@^2.4.0: safe-stable-stringify "^2.3.1" triple-beam "^1.3.0" +loglevel-colored-level-prefix@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/loglevel-colored-level-prefix/-/loglevel-colored-level-prefix-1.0.0.tgz#6a40218fdc7ae15fc76c3d0f3e676c465388603e" + integrity sha512-u45Wcxxc+SdAlh4yeF/uKlC1SPUPCy0gullSNKXod5I4bmifzk+Q4lSLExNEVn19tGaJipbZ4V4jbFn79/6mVA== + dependencies: + chalk "^1.1.3" + loglevel "^1.4.1" + loglevel-plugin-prefix@^0.8.4: version "0.8.4" resolved "https://registry.yarnpkg.com/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz#2fe0e05f1a820317d98d8c123e634c1bd84ff644" integrity sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g== +loglevel@^1.4.1: + version "1.9.2" + resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.2.tgz#c2e028d6c757720107df4e64508530db6621ba08" + integrity sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg== + loglevel@^1.6.0: version "1.9.1" resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.1.tgz#d63976ac9bcd03c7c873116d41c2a85bafff1be7" @@ -21390,6 +21550,11 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1" integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew== +picocolors@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== + picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -21615,6 +21780,14 @@ possible-typed-array-names@^1.0.0: resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f" integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q== +postcss-bem-linter@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/postcss-bem-linter/-/postcss-bem-linter-4.0.1.tgz#aca52d792a711ca2976530241532d798879c4e3b" + integrity sha512-jTG3uMo6n2YyxLBPLsRN+5R9djNJZ3mirAugvnYbZaZOwPmLb/MaQ2uql0fSdVYegjZBmX8tW5B0mfZigiXZ9Q== + dependencies: + minimatch "^3.1.2" + postcss-resolve-nested-selector "^0.1.1" + postcss-calc@^8.2.3: version "8.2.4" resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5" @@ -22053,6 +22226,11 @@ postcss-selector-parser@^6.0.16: cssesc "^3.0.0" util-deprecate "^1.0.2" +postcss-sorting@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-8.0.2.tgz#6393385ece272baf74bee9820fb1b58098e4eeca" + integrity sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q== + postcss-svgo@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d" @@ -22115,6 +22293,15 @@ postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.38: picocolors "^1.0.0" source-map-js "^1.2.0" +postcss@^8.4.24, postcss@^8.4.32: + version "8.4.49" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19" + integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA== + dependencies: + nanoid "^3.3.7" + picocolors "^1.1.1" + source-map-js "^1.2.1" + posthtml-attrs-parser@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/posthtml-attrs-parser/-/posthtml-attrs-parser-1.1.0.tgz#e8d798f1dbea5911c4042d565100a406e0b823e6" @@ -22198,6 +22385,24 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== +prettier-eslint@^16.1.2: + version "16.3.0" + resolved "https://registry.yarnpkg.com/prettier-eslint/-/prettier-eslint-16.3.0.tgz#8f7bbc863f35939948e386eafe72ffd653b2d80b" + integrity sha512-Lh102TIFCr11PJKUMQ2kwNmxGhTsv/KzUg9QYF2Gkw259g/kPgndZDWavk7/ycbRvj2oz4BPZ1gCU8bhfZH/Xg== + dependencies: + "@typescript-eslint/parser" "^6.7.5" + common-tags "^1.4.0" + dlv "^1.1.0" + eslint "^8.7.0" + indent-string "^4.0.0" + lodash.merge "^4.6.0" + loglevel-colored-level-prefix "^1.0.0" + prettier "^3.0.1" + pretty-format "^29.7.0" + require-relative "^0.8.7" + typescript "^5.2.2" + vue-eslint-parser "^9.1.0" + prettier-linter-helpers@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" @@ -22220,6 +22425,11 @@ prettier@^3.0.0: resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368" integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A== +prettier@^3.0.1, prettier@^3.1.0: + version "3.4.2" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f" + integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ== + pretty-bytes@^5.3.0, pretty-bytes@^5.5.0: version "5.6.0" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" @@ -23214,6 +23424,11 @@ require-package-name@^2.0.1: resolved "https://registry.yarnpkg.com/require-package-name/-/require-package-name-2.0.1.tgz#c11e97276b65b8e2923f75dabf5fb2ef0c3841b9" integrity sha512-uuoJ1hU/k6M0779t3VMVIYpb2VMJk05cehCaABFhXaibcbvfgR8wKiozLjVFSzJPmQMRqIcO0HMyTFqfV09V6Q== +require-relative@^0.8.7: + version "0.8.7" + resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de" + integrity sha512-AKGr4qvHiryxRb19m3PsLRGuKVAbJLUD7E6eOaHkfKhwc+vSgVOCY5xNvm9EkolBKTOf0GrQAZKLimOCz81Khg== + requireindex@^1.2.0, requireindex@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef" @@ -23797,7 +24012,7 @@ semver@7.6.0, semver@^7.1.1, semver@^7.3.2, semver@^7.5.3, semver@^7.5.4: dependencies: lru-cache "^6.0.0" -semver@7.6.3, semver@^7.6.3: +semver@7.6.3, semver@^7.3.6, semver@^7.6.3: version "7.6.3" resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143" integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A== @@ -24302,6 +24517,11 @@ source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0: resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af" integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg== +source-map-js@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46" + integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== + source-map-support@0.5.21, source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.20: version "0.5.21" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f" @@ -24950,6 +25170,42 @@ stylelint-config-standard@^36.0.0: dependencies: stylelint-config-recommended "^14.0.0" +stylelint-header@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/stylelint-header/-/stylelint-header-2.0.1.tgz#b467c493e4c2759b338168e71187b4fe0bd8c266" + integrity sha512-3V7+jXceM/c5d6EdcWb2zqaNuj0Hh37HlUFoSDFEgSqKPVUZka8sgntgbSkdf/AbUT6yEx3F/c1FkaG+eRxQtQ== + dependencies: + string-similarity "^4.0.4" + +stylelint-high-performance-animation@^1.10.0: + version "1.10.0" + resolved "https://registry.yarnpkg.com/stylelint-high-performance-animation/-/stylelint-high-performance-animation-1.10.0.tgz#2c0b67320fc6d978ee9b532d6feffc708e86979d" + integrity sha512-YzNI+E6taN8pwgaM0INazRg4tw23VA17KNMKUVdOeohpnpSyJLBnLVT9NkRcaCFLodK/67smS5VZK+Qe4Ohrvw== + dependencies: + postcss-value-parser "^4.2.0" + +stylelint-order@^6.0.4: + version "6.0.4" + resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-6.0.4.tgz#3e80d876c61a98d2640de181433686f24284748b" + integrity sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA== + dependencies: + postcss "^8.4.32" + postcss-sorting "^8.0.2" + +stylelint-selector-bem-pattern@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/stylelint-selector-bem-pattern/-/stylelint-selector-bem-pattern-4.0.1.tgz#4d92c244b61481320f74e9578a76d013b714207c" + integrity sha512-zpyC52/aqwbxbtliyTKdV3gv+h/ExZUTIn7tKMt9nfILtMhYIeJNF5a3UE1dtv9L826ulXU+83YA83Ymx3jW0A== + dependencies: + lodash ">=4.17.21" + postcss "^8.4.24" + postcss-bem-linter "^4.0.1" + +stylelint-use-logical@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/stylelint-use-logical/-/stylelint-use-logical-2.1.2.tgz#60296915cc27aa1292fbff9a29391c9a1d877563" + integrity sha512-4ffvPNk/swH4KS3izExWuzQOuzLmi0gb0uOhvxWJ20vDA5W5xKCjcHHtLoAj1kKvTIX6eGIN5xGtaVin9PD0wg== + stylelint@^16.0.0, stylelint@^16.4.0: version "16.5.0" resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.5.0.tgz#4e3aff7cc2294fa54da729b972a6c38bf2a584a0" @@ -25088,6 +25344,13 @@ synchronous-promise@^2.0.15: resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.17.tgz#38901319632f946c982152586f2caf8ddc25c032" integrity sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g== +synckit@^0.6.0: + version "0.6.2" + resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.6.2.tgz#e1540b97825f2855f7170b98276e8463167f33eb" + integrity sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA== + dependencies: + tslib "^2.3.1" + synckit@^0.8.6: version "0.8.8" resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7" @@ -25713,6 +25976,11 @@ truncate-utf8-bytes@^1.0.0: dependencies: utf8-byte-length "^1.0.1" +ts-api-utils@^1.0.1: + version "1.4.3" + resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.3.tgz#bfc2215fe6528fecab2b0fba570a2e8a4263b064" + integrity sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw== + ts-api-utils@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1" @@ -25964,6 +26232,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== +typescript@^5.2.2: + version "5.7.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.2.tgz#3169cf8c4c8a828cde53ba9ecb3d2b1d5dd67be6" + integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg== + typescript@^5.3.3: version "5.3.3" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37" @@ -26785,6 +27058,19 @@ vscode-uri@^2.1.2: resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c" integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A== +vue-eslint-parser@^9.1.0: + version "9.4.3" + resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz#9b04b22c71401f1e8bca9be7c3e3416a4bde76a8" + integrity sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg== + dependencies: + debug "^4.3.4" + eslint-scope "^7.1.1" + eslint-visitor-keys "^3.3.0" + espree "^9.3.1" + esquery "^1.4.0" + lodash "^4.17.21" + semver "^7.3.6" + w3c-hr-time@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd" From a8f59d9e471cebd19cc5ad5ccb277de5ff1de6f3 Mon Sep 17 00:00:00 2001 From: Casey Eickhoff Date: Thu, 19 Dec 2024 15:41:57 -0700 Subject: [PATCH 2/9] chore: updated prettier, stylelint, and eslint to align with css --- .eslintrc.json | 10 +- .vscode/settings.json | 8 +- projects/documentation/e2e/published.spec.ts | 81 +- projects/documentation/src/components.ts | 155 ++- .../src/components/adobe-logo.ts | 68 +- .../src/components/code-example.ts | 423 ++++---- .../src/components/copy-to-clipboard.ts | 138 +-- .../src/components/demo-container.ts | 84 +- .../documentation/src/components/extras.ts | 6 +- .../documentation/src/components/layout.ts | 957 +++++++++--------- .../src/components/search-index.ts | 121 ++- .../documentation/src/components/settings.ts | 8 +- .../src/components/side-nav-search.ts | 405 ++++---- .../documentation/src/components/side-nav.ts | 152 ++- projects/documentation/src/getting-started.ts | 4 +- projects/documentation/src/global.d.ts | 68 +- projects/documentation/src/index.ts | 26 +- projects/documentation/src/router.ts | 70 +- projects/documentation/src/utils/templates.ts | 22 +- 19 files changed, 1375 insertions(+), 1431 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 2a6a614611..0cca8797d4 100755 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,7 @@ "node": true }, "extends": [ - "plugin:prettier/recommended", + // "plugin:prettier/recommended", "plugin:lit-a11y/recommended", "plugin:require-extensions/recommended", "eslint:recommended", @@ -148,7 +148,6 @@ "error", { "blankLine": "always", "next": "return", "prev": "*" } ], - "brace-style": ["warn", "stroustrup", { "allowSingleLine": true }], "curly": ["error", "all"], "func-call-spacing": ["warn", "never"], "import/extensions": [ @@ -189,13 +188,6 @@ "templateFile": "config/license.js" } ], - // "prettier/prettier": [ - // "error", - // { - // "parser": "flow", - // "singleQuote": true - // } - // ], "quotes": ["warn", "double"], "semi": ["warn", "always"], "sort-imports": [ diff --git a/.vscode/settings.json b/.vscode/settings.json index 3170c8cde1..26fda2f538 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -13,7 +13,7 @@ "**/*.test-vrt.ts": true }, "editor.tabSize": 2, - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", + "editor.defaultFormatter": "dbaeumer.vscode-eslint", "editor.formatOnType": false, "editor.formatOnPaste": true, "editor.formatOnSave": true, @@ -34,14 +34,14 @@ "source.organizeImports": "explicit" }, "editor.colorDecorators": true, - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "[javascript]": { "editor.codeActionsOnSave": { "source.organizeImports": "explicit" }, "editor.colorDecorators": true, - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "[markdown]": { "editor.defaultFormatter": "DavidAnson.vscode-markdownlint" @@ -162,7 +162,7 @@ ], "js/ts.implicitProjectConfig.experimentalDecorators": true, "postcss.validate": false, - "prettier.configPath": ".prettierrc", + "prettier.configPath": ".prettierrc.yaml", "prettier.ignorePath": ".prettierignore", "prettier.prettierPath": "node_modules/prettier", "stylelint.enable": true, diff --git a/projects/documentation/e2e/published.spec.ts b/projects/documentation/e2e/published.spec.ts index 2d543309b5..a823f75e0a 100644 --- a/projects/documentation/e2e/published.spec.ts +++ b/projects/documentation/e2e/published.spec.ts @@ -9,46 +9,43 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { expect, Page, test } from '@playwright/test'; - -test.describe('search and go', () => { - const startURL = 'https://opensource.adobe.com/spectrum-web-components/'; - const menuSelector = - '#search-container sp-overlay[open] > sp-popover > sp-menu > sp-menu-group:nth-child(1)'; - const searchFor = async ( - searchString: string, - page: Page - ): Promise => { - await page.keyboard.type(searchString, { delay: 100 }); - const menu = await page.locator(menuSelector); - await page.keyboard.press('ArrowDown'); - await expect(menu).toBeFocused(); - await page.keyboard.press('Enter'); - }; - - test.beforeEach(async ({ page }) => { - await page.goto(startURL); - - // Click the get started link. - const searchField = await page.getByRole('searchbox', { - name: 'Search', - }); - - await searchField.focus(); - }); - - test('component: accordion', async ({ page }) => { - await searchFor('accordion', page); - await expect(page).toHaveURL(/accordion/); - }); - - test('tool: base', async ({ page }) => { - await searchFor('base', page); - await expect(page).toHaveURL(/base/); - }); - - test('guide: getting-started', async ({ page }) => { - await searchFor('getting started', page); - await expect(page).toHaveURL(/getting-started/); - }); +import { expect, Page, test } from "@playwright/test"; + +test.describe("search and go", () => { + const startURL = "https://opensource.adobe.com/spectrum-web-components/"; + const menuSelector = + "#search-container sp-overlay[open] > sp-popover > sp-menu > sp-menu-group:nth-child(1)"; + const searchFor = async (searchString: string, page: Page): Promise => { + await page.keyboard.type(searchString, { delay: 100 }); + const menu = await page.locator(menuSelector); + await page.keyboard.press("ArrowDown"); + await expect(menu).toBeFocused(); + await page.keyboard.press("Enter"); + }; + + test.beforeEach(async ({ page }) => { + await page.goto(startURL); + + // Click the get started link. + const searchField = await page.getByRole("searchbox", { + name: "Search", + }); + + await searchField.focus(); + }); + + test("component: accordion", async ({ page }) => { + await searchFor("accordion", page); + await expect(page).toHaveURL(/accordion/); + }); + + test("tool: base", async ({ page }) => { + await searchFor("base", page); + await expect(page).toHaveURL(/base/); + }); + + test("guide: getting-started", async ({ page }) => { + await searchFor("getting started", page); + await expect(page).toHaveURL(/getting-started/); + }); }); diff --git a/projects/documentation/src/components.ts b/projects/documentation/src/components.ts index 94a475397d..a9402027ba 100644 --- a/projects/documentation/src/components.ts +++ b/projects/documentation/src/components.ts @@ -10,65 +10,65 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import './router.js'; -import './components/demo-container.js'; -import '@spectrum-web-components/tabs/sp-tab-panel.js'; -import '@spectrum-web-components/tabs/sp-tab.js'; -import '@spectrum-web-components/tabs/sp-tabs.js'; -import '@spectrum-web-components/top-nav/sp-top-nav.js'; -import '@spectrum-web-components/top-nav/sp-top-nav-item.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-remove.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-star.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-save-floppy.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-stopwatch.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-user-activity.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js'; -import '@spectrum-web-components/table/sp-table.js'; -import '@spectrum-web-components/table/sp-table-body.js'; -import '@spectrum-web-components/table/sp-table-cell.js'; -import '@spectrum-web-components/table/sp-table-checkbox-cell.js'; -import '@spectrum-web-components/table/sp-table-head.js'; -import '@spectrum-web-components/table/sp-table-head-cell.js'; -import '@spectrum-web-components/table/sp-table-row.js'; -import '@spectrum-web-components/field-group/sp-field-group.js'; -import '@spectrum-web-components/field-label/sp-field-label.js'; -import '@spectrum-web-components/textfield/sp-textfield.js'; -import '@spectrum-web-components/number-field/sp-number-field.js'; -import '@spectrum-web-components/card/sp-card.js'; -import '@spectrum-web-components/icon/sp-icon.js'; +import "./router.js"; +import "./components/demo-container.js"; +import "@spectrum-web-components/tabs/sp-tab-panel.js"; +import "@spectrum-web-components/tabs/sp-tab.js"; +import "@spectrum-web-components/tabs/sp-tabs.js"; +import "@spectrum-web-components/top-nav/sp-top-nav.js"; +import "@spectrum-web-components/top-nav/sp-top-nav-item.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-add.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-remove.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-star.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-close.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-more.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-save-floppy.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-stopwatch.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-user-activity.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js"; +import "@spectrum-web-components/table/sp-table.js"; +import "@spectrum-web-components/table/sp-table-body.js"; +import "@spectrum-web-components/table/sp-table-cell.js"; +import "@spectrum-web-components/table/sp-table-checkbox-cell.js"; +import "@spectrum-web-components/table/sp-table-head.js"; +import "@spectrum-web-components/table/sp-table-head-cell.js"; +import "@spectrum-web-components/table/sp-table-row.js"; +import "@spectrum-web-components/field-group/sp-field-group.js"; +import "@spectrum-web-components/field-label/sp-field-label.js"; +import "@spectrum-web-components/textfield/sp-textfield.js"; +import "@spectrum-web-components/number-field/sp-number-field.js"; +import "@spectrum-web-components/card/sp-card.js"; +import "@spectrum-web-components/icon/sp-icon.js"; -if ('requestIdleCallback' in window) { - requestIdleCallback(() => { - import('@spectrum-web-components/bundle/elements.js'); - import('@spectrum-web-components/grid/sp-grid.js'); - }); +if ("requestIdleCallback" in window) { + requestIdleCallback(() => { + import("@spectrum-web-components/bundle/elements.js"); + import("@spectrum-web-components/grid/sp-grid.js"); + }); } else { - requestAnimationFrame(() => { - import('@spectrum-web-components/bundle/elements.js'); - import('@spectrum-web-components/grid/sp-grid.js'); - }); + requestAnimationFrame(() => { + import("@spectrum-web-components/bundle/elements.js"); + import("@spectrum-web-components/grid/sp-grid.js"); + }); } class StyledElement extends HTMLElement { - constructor() { - super(); - this.attachShadow({ mode: 'open' }); - (this.shadowRoot as ShadowRoot).innerHTML = ` + constructor() { + super(); + this.attachShadow({ mode: "open" }); + (this.shadowRoot as ShadowRoot).innerHTML = ` `; - } + } } -customElements.define('styled-element', StyledElement); +customElements.define("styled-element", StyledElement); document - .querySelector('sp-tab-panel[value="api"]') - ?.addEventListener('click', (event: Event) => { - const path = event.composedPath(); - const row = path.find( - (el) => - (el as Element).localName === 'sp-table-row' && - (el as Element).id - ) as HTMLElement; - if (row) { - location.hash = row.id; - (event.target as HTMLElement).dispatchEvent( - new CustomEvent('copy-text', { - bubbles: true, - composed: true, - detail: { - text: row.dataset.value, - message: `${row.dataset.name} copied to clipboard!`, - }, - }) - ); - } - }); + .querySelector('sp-tab-panel[value="api"]') + ?.addEventListener("click", (event: Event) => { + const path = event.composedPath(); + const row = path.find( + (el) => + (el as Element).localName === "sp-table-row" && (el as Element).id, + ) as HTMLElement; + if (row) { + location.hash = row.id; + (event.target as HTMLElement).dispatchEvent( + new CustomEvent("copy-text", { + bubbles: true, + composed: true, + detail: { + text: row.dataset.value, + message: `${row.dataset.name} copied to clipboard!`, + }, + }), + ); + } + }); diff --git a/projects/documentation/src/components/adobe-logo.ts b/projects/documentation/src/components/adobe-logo.ts index 52357e7c9e..a89ff5aae2 100644 --- a/projects/documentation/src/components/adobe-logo.ts +++ b/projects/documentation/src/components/adobe-logo.ts @@ -11,43 +11,43 @@ governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - LitElement, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + LitElement, +} from "@spectrum-web-components/base"; import { - customElement, - property, -} from '@spectrum-web-components/base/src/decorators.js'; -import logoStyles from './adobe-logo.css'; + customElement, + property, +} from "@spectrum-web-components/base/src/decorators.js"; +import logoStyles from "./adobe-logo.css"; -@customElement('docs-spectrum-logo') +@customElement("docs-spectrum-logo") export class SpectrumLogo extends LitElement { - @property({ type: String }) - public size: string = '36px'; + @property({ type: String }) + public size: string = "36px"; - public static override get styles(): CSSResultArray { - return [logoStyles]; - } + public static override get styles(): CSSResultArray { + return [logoStyles]; + } - override render() { - return html` - - - - `; - } + override render() { + return html` + + + + `; + } } diff --git a/projects/documentation/src/components/code-example.ts b/projects/documentation/src/components/code-example.ts index d0fed103db..6a59b6c9dc 100644 --- a/projects/documentation/src/components/code-example.ts +++ b/projects/documentation/src/components/code-example.ts @@ -10,226 +10,211 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +import "@spectrum-web-components/action-button/sp-action-button.js"; import { - CSSResultArray, - html, - LitElement, - TemplateResult, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + LitElement, + TemplateResult, +} from "@spectrum-web-components/base"; import { - customElement, - property, - query, -} from '@spectrum-web-components/base/src/decorators.js'; -import { toHtmlTemplateString } from '../utils/templates.js'; -import Styles from './code-example.css'; -import StylesLight from './code-example-light.css'; -import StylesDark from './code-example-dark.css'; -import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared'; -import '@spectrum-web-components/action-button/sp-action-button.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js'; -import { copyNode } from './copy-to-clipboard.js'; -import { TrackTheme } from './layout.js'; -import { Color } from '@spectrum-web-components/theme'; - -@customElement('code-example') + customElement, + property, + query, +} from "@spectrum-web-components/base/src/decorators.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js"; +import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared"; +import { Color } from "@spectrum-web-components/theme"; +import { toHtmlTemplateString } from "../utils/templates.js"; +import StylesDark from "./code-example-dark.css"; +import StylesLight from "./code-example-light.css"; +import Styles from "./code-example.css"; +import { copyNode } from "./copy-to-clipboard.js"; +import { TrackTheme } from "./layout.js"; + +@customElement("code-example") export class CodeExample extends FocusVisiblePolyfillMixin(LitElement) { - @query('#markup') - private markup?: HTMLDivElement; - - @query('.demo-example') - private demo?: HTMLDivElement; - - @property() - public codeTheme: 'dark' | 'light' = 'light'; - - @property({ type: Boolean }) - public preprocessed = false; - - @property({ type: Boolean, attribute: 'no-demo' }) - public noDemo = false; - - private prismjsLoaded = false; - - public static override get styles(): CSSResultArray { - return [Styles]; - } - - private get codeSlot(): Element | this { - const code = [...(this.children || [])].find( - (child) => child.slot === 'code' - ); - - return code || this; - } - - public get highlightedHTML(): string { - const el = this.codeSlot; - - return el.innerHTML || ''; - } - - public get liveHTML(): string { - const el = this.codeSlot; - - return el.textContent || ''; - } - - public get language(): 'markup' | 'javascript' { - if (this.classList.contains('language-javascript')) { - return 'javascript'; - } - - return 'markup'; - } - - public get showDemo() { - if (this.noDemo) { - return false; - } - - return ( - this.classList.contains('language-html') || - this.classList.contains('language-html-live') - ); - } - - private get highlightedCode(): TemplateResult { - const highlightedHTML = this.preprocessed - ? this.highlightedHTML - : window.Prism.highlight( - this.liveHTML, - window.Prism.languages[this.language], - this.language - ); - - const code = toHtmlTemplateString(highlightedHTML); - - return html` - 
${code}
- `; - } - - private liveHTMLTransferred = false; - - private get renderedCode(): TemplateResult { - if ( - this.classList.contains('language-html-live') && - !this.liveHTMLTransferred - ) { - const demo = - this.querySelector('[slot="demo"]') || - document.createElement('div'); - demo.slot = 'demo'; - demo.innerHTML = this.liveHTML; - this.append(demo); - this.liveHTMLTransferred = true; - } - - return toHtmlTemplateString(this.liveHTML); - } - - protected override shouldUpdate(): boolean { - if (this.preprocessed || this.prismjsLoaded) { - return true; - } - if (!this.preprocessed) { - import('prismjs').then(() => { - this.prismjsLoaded = true; - this.requestUpdate(); - }); - } - - return false; - } - - protected override render(): TemplateResult { - // highlighedCode needs to happen first in case the HTML is live and - // needs to be placed into the light DOM - const { highlightedCode, renderedCode } = this; - - return html` - ${this.showDemo - ? html` -
- ${renderedCode} -
- ` - : undefined} - - ${highlightedCode} -
- - - Copy to Clipboard - -
- - - `; - } - - private copyToClipboard(): void { - copyNode(this); - } - - private shouldManageTabOrderForScrolling = (): void => { - [this.markup, this.demo].map((el) => { - if (!el) { - return; - } - const { offsetWidth, scrollWidth } = el; - if (offsetWidth < scrollWidth) { - el.tabIndex = 0; - } else { - el.removeAttribute('tabindex'); - } - }); - }; - - protected override updated(): void { - setTimeout(this.shouldManageTabOrderForScrolling); - } - - private trackTheme(): void { - const queryThemeEvent = new CustomEvent('sp-track-theme', { - bubbles: true, - composed: true, - detail: { - callback: (color: Color) => { - this.codeTheme = color.startsWith('light') - ? 'light' - : 'dark'; - }, - }, - cancelable: true, - }); - this.dispatchEvent(queryThemeEvent); - } - - public override connectedCallback(): void { - super.connectedCallback(); - window.addEventListener( - 'resize', - this.shouldManageTabOrderForScrolling - ); - this.trackTheme(); - } - - public override disconnectedCallback(): void { - window.removeEventListener( - 'resize', - this.shouldManageTabOrderForScrolling - ); - this.trackTheme(); - super.disconnectedCallback(); - } + @query("#markup") + private markup?: HTMLDivElement; + + @query(".demo-example") + private demo?: HTMLDivElement; + + @property() + public codeTheme: "dark" | "light" = "light"; + + @property({ type: Boolean }) + public preprocessed = false; + + @property({ type: Boolean, attribute: "no-demo" }) + public noDemo = false; + + private prismjsLoaded = false; + + public static override get styles(): CSSResultArray { + return [Styles]; + } + + private get codeSlot(): Element | this { + const code = [...(this.children || [])].find( + (child) => child.slot === "code", + ); + + return code || this; + } + + public get highlightedHTML(): string { + const el = this.codeSlot; + + return el.innerHTML || ""; + } + + public get liveHTML(): string { + const el = this.codeSlot; + + return el.textContent || ""; + } + + public get language(): "markup" | "javascript" { + if (this.classList.contains("language-javascript")) { + return "javascript"; + } + + return "markup"; + } + + public get showDemo() { + if (this.noDemo) { + return false; + } + + return ( + this.classList.contains("language-html") || + this.classList.contains("language-html-live") + ); + } + + private get highlightedCode(): TemplateResult { + const highlightedHTML = this.preprocessed + ? this.highlightedHTML + : window.Prism.highlight( + this.liveHTML, + window.Prism.languages[this.language], + this.language, + ); + + const code = toHtmlTemplateString(highlightedHTML); + + return html` 
${code}
`; + } + + private liveHTMLTransferred = false; + + private get renderedCode(): TemplateResult { + if ( + this.classList.contains("language-html-live") && + !this.liveHTMLTransferred + ) { + const demo = + this.querySelector('[slot="demo"]') || document.createElement("div"); + demo.slot = "demo"; + demo.innerHTML = this.liveHTML; + this.append(demo); + this.liveHTMLTransferred = true; + } + + return toHtmlTemplateString(this.liveHTML); + } + + protected override shouldUpdate(): boolean { + if (this.preprocessed || this.prismjsLoaded) { + return true; + } + if (!this.preprocessed) { + import("prismjs").then(() => { + this.prismjsLoaded = true; + this.requestUpdate(); + }); + } + + return false; + } + + protected override render(): TemplateResult { + // highlighedCode needs to happen first in case the HTML is live and + // needs to be placed into the light DOM + const { highlightedCode, renderedCode } = this; + + return html` + ${this.showDemo + ? html` +
+ ${renderedCode} +
+ ` + : undefined} + + ${highlightedCode} +
+ + + Copy to Clipboard + +
+ + + `; + } + + private copyToClipboard(): void { + copyNode(this); + } + + private shouldManageTabOrderForScrolling = (): void => { + [this.markup, this.demo].map((el) => { + if (!el) { + return; + } + const { offsetWidth, scrollWidth } = el; + if (offsetWidth < scrollWidth) { + el.tabIndex = 0; + } else { + el.removeAttribute("tabindex"); + } + }); + }; + + protected override updated(): void { + setTimeout(this.shouldManageTabOrderForScrolling); + } + + private trackTheme(): void { + const queryThemeEvent = new CustomEvent("sp-track-theme", { + bubbles: true, + composed: true, + detail: { + callback: (color: Color) => { + this.codeTheme = color.startsWith("light") ? "light" : "dark"; + }, + }, + cancelable: true, + }); + this.dispatchEvent(queryThemeEvent); + } + + public override connectedCallback(): void { + super.connectedCallback(); + window.addEventListener("resize", this.shouldManageTabOrderForScrolling); + this.trackTheme(); + } + + public override disconnectedCallback(): void { + window.removeEventListener("resize", this.shouldManageTabOrderForScrolling); + this.trackTheme(); + super.disconnectedCallback(); + } } diff --git a/projects/documentation/src/components/copy-to-clipboard.ts b/projects/documentation/src/components/copy-to-clipboard.ts index 9f0fcff388..5713639fe6 100644 --- a/projects/documentation/src/components/copy-to-clipboard.ts +++ b/projects/documentation/src/components/copy-to-clipboard.ts @@ -10,47 +10,47 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ function createNode(text: string): Element { - const node = document.createElement('pre'); - node.style.width = '1px'; - node.style.height = '1px'; - node.style.position = 'fixed'; - node.style.top = '5px'; - node.textContent = text; - - return node; + const node = document.createElement("pre"); + node.style.width = "1px"; + node.style.height = "1px"; + node.style.position = "fixed"; + node.style.top = "5px"; + node.textContent = text; + + return node; } export function copyNode(node: Element): Promise { - const text: string | null = node.textContent; - if (!text) { - return Promise.reject(new Error('Node has no text content')); - } - /** - * include import statements both for the element being documented and any other - * top level elements used that would otherwise not be imported directly in the element. - */ - const customElements = extractNodeCustomElements(text); - const importStatements = generateImportStatements(customElements); - const fullCopiedText = `${importStatements}\n${node.textContent}`; - if ('clipboard' in navigator) { - return navigator.clipboard.writeText(fullCopiedText || ''); - } - - const selection = getSelection(); - if (selection == null) { - return Promise.reject(new Error()); - } - - selection.removeAllRanges(); - - const range = document.createRange(); - range.selectNodeContents(node); - selection.addRange(range); - - document.execCommand('copy'); - selection.removeAllRanges(); - - return Promise.resolve(); + const text: string | null = node.textContent; + if (!text) { + return Promise.reject(new Error("Node has no text content")); + } + /** + * include import statements both for the element being documented and any other + * top level elements used that would otherwise not be imported directly in the element. + */ + const customElements = extractNodeCustomElements(text); + const importStatements = generateImportStatements(customElements); + const fullCopiedText = `${importStatements}\n${node.textContent}`; + if ("clipboard" in navigator) { + return navigator.clipboard.writeText(fullCopiedText || ""); + } + + const selection = getSelection(); + if (selection == null) { + return Promise.reject(new Error()); + } + + selection.removeAllRanges(); + + const range = document.createRange(); + range.selectNodeContents(node); + selection.addRange(range); + + document.execCommand("copy"); + selection.removeAllRanges(); + + return Promise.resolve(); } /** @@ -59,14 +59,14 @@ export function copyNode(node: Element): Promise { * @returns customElements which need to be added to the import statements */ function extractNodeCustomElements(text: string): Set { - const customElements = new Set(); - const regex = /(); + const regex = / { * @returns list of import statements of each element */ function generateImportStatements(elements: Set): string { - let imports = ''; - elements.forEach((element) => { - const elementName = element.substring(3); // Remove the 'sp-' prefix - if (element.includes('sp-icon')) { - imports += `import '@spectrum-web-components/icons-workflow/icons/${element}.js';\n`; - } else { - imports += `import '@spectrum-web-components/${elementName}/${element}.js';\n`; - } - }); - - return imports; + let imports = ""; + elements.forEach((element) => { + const elementName = element.substring(3); // Remove the 'sp-' prefix + if (element.includes("sp-icon")) { + imports += `import '@spectrum-web-components/icons-workflow/icons/${element}.js';\n`; + } else { + imports += `import '@spectrum-web-components/${elementName}/${element}.js';\n`; + } + }); + + return imports; } export function copyText(text: string): Promise { - if ('clipboard' in navigator) { - return navigator.clipboard.writeText(text); - } + if ("clipboard" in navigator) { + return navigator.clipboard.writeText(text); + } - const body = document.body; - if (!body) { - return Promise.reject(new Error()); - } + const body = document.body; + if (!body) { + return Promise.reject(new Error()); + } - const node = createNode(text); - body.appendChild(node); - copyNode(node); - body.removeChild(node); + const node = createNode(text); + body.appendChild(node); + copyNode(node); + body.removeChild(node); - return Promise.resolve(); + return Promise.resolve(); } diff --git a/projects/documentation/src/components/demo-container.ts b/projects/documentation/src/components/demo-container.ts index dd6c40db56..924223ca11 100644 --- a/projects/documentation/src/components/demo-container.ts +++ b/projects/documentation/src/components/demo-container.ts @@ -11,50 +11,50 @@ governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - SpectrumElement, - TemplateResult, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + SpectrumElement, + TemplateResult, +} from "@spectrum-web-components/base"; import { - customElement, - property, - query, -} from '@spectrum-web-components/base/src/decorators.js'; -import { ResizeController } from '@lit-labs/observers/resize-controller.js'; + customElement, + property, + query, +} from "@spectrum-web-components/base/src/decorators.js"; +import { ResizeController } from "@lit-labs/observers/resize-controller.js"; -import styles from './demo-container.css'; +import styles from "./demo-container.css"; -@customElement('demo-container') +@customElement("demo-container") export class DemoContainer extends SpectrumElement { - public static override get styles(): CSSResultArray { - return [styles]; - } - - @property({ type: Boolean, reflect: true }) - scrollable = false; - - @query('.wrapper') - wrapper!: HTMLDivElement; - - resizeController = new ResizeController(this, { - callback: () => this.shouldUpdateScrollableState(), - }); - - public shouldUpdateScrollableState = (): void => { - const { offsetHeight, scrollHeight } = this; - this.scrollable = offsetHeight < scrollHeight; - }; - - public override render(): TemplateResult { - return html` -
- -
- `; - } - - public override firstUpdated(): void { - this.resizeController.observe(this.wrapper); - } + public static override get styles(): CSSResultArray { + return [styles]; + } + + @property({ type: Boolean, reflect: true }) + scrollable = false; + + @query(".wrapper") + wrapper!: HTMLDivElement; + + resizeController = new ResizeController(this, { + callback: () => this.shouldUpdateScrollableState(), + }); + + public shouldUpdateScrollableState = (): void => { + const { offsetHeight, scrollHeight } = this; + this.scrollable = offsetHeight < scrollHeight; + }; + + public override render(): TemplateResult { + return html` +
+ +
+ `; + } + + public override firstUpdated(): void { + this.resizeController.observe(this.wrapper); + } } diff --git a/projects/documentation/src/components/extras.ts b/projects/documentation/src/components/extras.ts index 8aee50dbcb..4286008d3a 100644 --- a/projects/documentation/src/components/extras.ts +++ b/projects/documentation/src/components/extras.ts @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/sidenav/sp-sidenav.js'; -import '@spectrum-web-components/sidenav/sp-sidenav-item.js'; -import '@spectrum-web-components/underlay/sp-underlay.js'; +import "@spectrum-web-components/sidenav/sp-sidenav.js"; +import "@spectrum-web-components/sidenav/sp-sidenav-item.js"; +import "@spectrum-web-components/underlay/sp-underlay.js"; diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts index 1440b757ee..307541ae3d 100644 --- a/projects/documentation/src/components/layout.ts +++ b/projects/documentation/src/components/layout.ts @@ -11,521 +11,500 @@ governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - LitElement, - PropertyValues, - TemplateResult, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + LitElement, + PropertyValues, + TemplateResult, +} from "@spectrum-web-components/base"; import { - property, - queryAsync, - state, -} from '@spectrum-web-components/base/src/decorators.js'; -import '@spectrum-web-components/theme/sp-theme.js'; + property, + queryAsync, + state, +} from "@spectrum-web-components/base/src/decorators.js"; +import "@spectrum-web-components/theme/sp-theme.js"; import type { - Color, - Scale, - SystemVariant, - Theme, -} from '@spectrum-web-components/theme'; -import type { Picker } from '@spectrum-web-components/picker'; -import '@spectrum-web-components/button/sp-button.js'; -import '@spectrum-web-components/action-button/sp-action-button.js'; -import '@spectrum-web-components/link/sp-link.js'; -import '@spectrum-web-components/divider/sp-divider.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js'; + Color, + Scale, + SystemVariant, + Theme, +} from "@spectrum-web-components/theme"; +import type { Picker } from "@spectrum-web-components/picker"; +import "@spectrum-web-components/button/sp-button.js"; +import "@spectrum-web-components/action-button/sp-action-button.js"; +import "@spectrum-web-components/link/sp-link.js"; +import "@spectrum-web-components/divider/sp-divider.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js"; import { - type OverlayTriggerOptions, - trigger, -} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js'; + type OverlayTriggerOptions, + trigger, +} from "@spectrum-web-components/overlay/src/overlay-trigger-directive.js"; -import './adobe-logo.js'; -import type { CodeExample } from './code-example.js'; -import './code-example.js'; -import { copyText } from './copy-to-clipboard.js'; +import "./adobe-logo.js"; +import type { CodeExample } from "./code-example.js"; +import "./code-example.js"; +import { copyText } from "./copy-to-clipboard.js"; -import layoutStyles from './layout.css'; +import layoutStyles from "./layout.css"; import { - DARK_MODE, - IS_MOBILE, -} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js'; - -const SWC_THEME_COLOR_KEY = 'swc-docs:theme:color'; -const SWC_THEME_SCALE_KEY = 'swc-docs:theme:scale'; -const SWC_THEME_THEME_KEY = 'swc-docs:theme:theme'; -const SWC_THEME_SYSTEM_KEY = 'swc-docs:theme:system'; -const SWC_THEME_DIR_KEY = 'swc-docs:theme:dir'; -const COLOR_FALLBACK = matchMedia(DARK_MODE).matches ? 'dark' : 'light'; -const SCALE_FALLBACK = matchMedia(IS_MOBILE).matches ? 'large' : 'medium'; -const SYSTEM_FALLBACK = 'spectrum'; -const DIR_FALLBACK = 'ltr'; + DARK_MODE, + IS_MOBILE, +} from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js"; + +const SWC_THEME_COLOR_KEY = "swc-docs:theme:color"; +const SWC_THEME_SCALE_KEY = "swc-docs:theme:scale"; +const SWC_THEME_THEME_KEY = "swc-docs:theme:theme"; +const SWC_THEME_SYSTEM_KEY = "swc-docs:theme:system"; +const SWC_THEME_DIR_KEY = "swc-docs:theme:dir"; +const COLOR_FALLBACK = matchMedia(DARK_MODE).matches ? "dark" : "light"; +const SCALE_FALLBACK = matchMedia(IS_MOBILE).matches ? "large" : "medium"; +const SYSTEM_FALLBACK = "spectrum"; +const DIR_FALLBACK = "ltr"; const DEFAULT_COLOR = ( - window.localStorage - ? localStorage.getItem(SWC_THEME_COLOR_KEY) || COLOR_FALLBACK - : COLOR_FALLBACK + window.localStorage + ? localStorage.getItem(SWC_THEME_COLOR_KEY) || COLOR_FALLBACK + : COLOR_FALLBACK ) as Color; const DEFAULT_SCALE = ( - window.localStorage - ? localStorage.getItem(SWC_THEME_SCALE_KEY) || SCALE_FALLBACK - : SCALE_FALLBACK + window.localStorage + ? localStorage.getItem(SWC_THEME_SCALE_KEY) || SCALE_FALLBACK + : SCALE_FALLBACK ) as Scale; const DEFAULT_SYSTEM = ( - window.localStorage - ? localStorage.getItem(SWC_THEME_THEME_KEY) || - localStorage.getItem(SWC_THEME_SYSTEM_KEY) || - SYSTEM_FALLBACK - : SYSTEM_FALLBACK + window.localStorage + ? localStorage.getItem(SWC_THEME_THEME_KEY) || + localStorage.getItem(SWC_THEME_SYSTEM_KEY) || + SYSTEM_FALLBACK + : SYSTEM_FALLBACK ) as SystemVariant; const DEFAULT_DIR = ( - window.localStorage - ? localStorage.getItem(SWC_THEME_DIR_KEY) || DIR_FALLBACK - : DIR_FALLBACK -) as 'ltr' | 'rtl'; + window.localStorage + ? localStorage.getItem(SWC_THEME_DIR_KEY) || DIR_FALLBACK + : DIR_FALLBACK +) as "ltr" | "rtl"; -const isNarrowMediaQuery = matchMedia('screen and (max-width: 960px)'); +const isNarrowMediaQuery = matchMedia("screen and (max-width: 960px)"); const lazyStyleFragment = ( - name: Color | Scale, - system: SystemVariant + name: Color | Scale, + system: SystemVariant, ): void => { - const fragmentName = `${name}-${system}`; - switch (fragmentName) { - case 'dark-spectrum' || 'darkest-spectrum': - import('@spectrum-web-components/theme/theme-dark.js'); - break; - case 'light-spectrum' || 'lightest-spectrum': - import('@spectrum-web-components/theme/theme-light.js'); - break; - case 'medium-spectrum': - import('@spectrum-web-components/theme/scale-medium.js'); - break; - case 'large-spectrum': - import('@spectrum-web-components/theme/scale-large.js'); - break; - case 'dark-express' || 'darkest-express': - import('@spectrum-web-components/theme/express/theme-dark.js'); - break; - case 'light-express' || 'lightest-express': - import('@spectrum-web-components/theme/express/theme-light.js'); - break; - case 'medium-express': - import('@spectrum-web-components/theme/express/scale-medium.js'); - break; - case 'large-express': - import('@spectrum-web-components/theme/express/scale-large.js'); - break; - case 'light-spectrum-two': - import( - '@spectrum-web-components/theme/spectrum-two/theme-light-core-tokens.js' - ); - break; - case 'dark-spectrum-two': - import( - '@spectrum-web-components/theme/spectrum-two/theme-dark-core-tokens.js' - ); - break; - case 'medium-spectrum-two': - import( - '@spectrum-web-components/theme/spectrum-two/scale-medium-core-tokens.js' - ); - break; - case 'large-spectrum-two': - import( - '@spectrum-web-components/theme/spectrum-two/scale-large-core-tokens.js' - ); - break; - } + const fragmentName = `${name}-${system}`; + switch (fragmentName) { + case "dark-spectrum" || "darkest-spectrum": + import("@spectrum-web-components/theme/theme-dark.js"); + break; + case "light-spectrum" || "lightest-spectrum": + import("@spectrum-web-components/theme/theme-light.js"); + break; + case "medium-spectrum": + import("@spectrum-web-components/theme/scale-medium.js"); + break; + case "large-spectrum": + import("@spectrum-web-components/theme/scale-large.js"); + break; + case "dark-express" || "darkest-express": + import("@spectrum-web-components/theme/express/theme-dark.js"); + break; + case "light-express" || "lightest-express": + import("@spectrum-web-components/theme/express/theme-light.js"); + break; + case "medium-express": + import("@spectrum-web-components/theme/express/scale-medium.js"); + break; + case "large-express": + import("@spectrum-web-components/theme/express/scale-large.js"); + break; + case "light-spectrum-two": + import( + "@spectrum-web-components/theme/spectrum-two/theme-light-core-tokens.js" + ); + break; + case "dark-spectrum-two": + import( + "@spectrum-web-components/theme/spectrum-two/theme-dark-core-tokens.js" + ); + break; + case "medium-spectrum-two": + import( + "@spectrum-web-components/theme/spectrum-two/scale-medium-core-tokens.js" + ); + break; + case "large-spectrum-two": + import( + "@spectrum-web-components/theme/spectrum-two/scale-large-core-tokens.js" + ); + break; + } }; const loadDefaults = () => { - if ( - DEFAULT_COLOR !== COLOR_FALLBACK || - DEFAULT_SCALE !== SCALE_FALLBACK || - DEFAULT_SYSTEM !== SYSTEM_FALLBACK - ) { - lazyStyleFragment(DEFAULT_COLOR, DEFAULT_SYSTEM); - lazyStyleFragment(DEFAULT_SCALE, DEFAULT_SYSTEM); - } + if ( + DEFAULT_COLOR !== COLOR_FALLBACK || + DEFAULT_SCALE !== SCALE_FALLBACK || + DEFAULT_SYSTEM !== SYSTEM_FALLBACK + ) { + lazyStyleFragment(DEFAULT_COLOR, DEFAULT_SYSTEM); + lazyStyleFragment(DEFAULT_SCALE, DEFAULT_SYSTEM); + } }; export interface TrackTheme { - callback: (color: Color) => void; + callback: (color: Color) => void; } // @customElement('docs-page') export class LayoutElement extends LitElement { - public static override get styles(): CSSResultArray { - return [layoutStyles]; - } - - @state() - private alerts: Map< - HTMLElement, - { - count: number; - message: string; - element: (count: number, message: string) => TemplateResult; - } - > = new Map(); - - @property({ attribute: false }) - public color: Color = DEFAULT_COLOR; - - @property({ reflect: true }) - public override dir: 'ltr' | 'rtl' = DEFAULT_DIR; - - @property({ type: Boolean }) - public open = false; - - @state() - private isNarrow = isNarrowMediaQuery.matches; - - @property({ attribute: false }) - public theme: SystemVariant = DEFAULT_SYSTEM; - - @property({ attribute: false }) - public scale: Scale = DEFAULT_SCALE; - - @property({ attribute: false }) - public system: SystemVariant = DEFAULT_SYSTEM; - - @queryAsync('sp-theme') - private themeRoot!: Theme; - - public async startManagingContentDirection(el: HTMLElement): Promise { - (await this.themeRoot).startManagingContentDirection(el); - } - - public async stopManagingContentDirection(el: HTMLElement): Promise { - (await this.themeRoot).stopManagingContentDirection(el); - } - - private _themeTrackers = new Map(); - - private handleMatchMediaChange = (event: MediaQueryListEvent) => { - this.isNarrow = event.matches; - }; - - private closeSettings(event: Event & { target: HTMLElement }) { - event.target.parentElement?.dispatchEvent( - new Event('close', { bubbles: true }) - ); - } - - private updateColor(event: Event) { - this.color = (event.target as Picker).value as Color; - this._themeTrackers.forEach((tracker) => tracker(this.color)); - } - - private updateScale(event: Event) { - this.scale = (event.target as Picker).value as Scale; - } - - private updateSystem(event: Event) { - this.system = (event.target as Picker).value as SystemVariant; - } - - private updateDirection(event: Event) { - const dir = (event.target as Picker).value; - this.dir = dir === 'rtl' ? dir : 'ltr'; - document.documentElement.dir = this.dir; - } - - private handleTrackTheme(event: CustomEvent): void { - const target = event.composedPath()[0] as HTMLElement; - if (this._themeTrackers.has(target)) { - this._themeTrackers.delete(target); - } else { - this._themeTrackers.set(target, event.detail.callback); - const callback = this._themeTrackers.get(target); - if (callback) { - callback(this.color); - } - } - } - - private copyText( - event: CustomEvent<{ text: string; message: string }> - ): void { - copyText(event.detail.text); - this.addAlert(event); - } - - private addAlert(event: CustomEvent<{ message: string }>): void { - const target = event.composedPath()[0] as HTMLElement; - if (!this.alerts.has(target)) { - const close = () => { - this.alerts.delete(target); - target.focus(); - this.requestUpdate(); - }; - this.alerts.set(target, { - count: 0, - message: '', - /** - * does not allow a `timeout` of less that 6000 - * use this as a cheat to reset the timeout to 6000 for - * every additional alert. - */ - - element: (count: number, message: string) => { - import('@spectrum-web-components/toast/sp-toast.js'); - - return html` - - ${message} ${count > 1 ? `(${count} alerts)` : ''} - - `; - }, - }); - } - const alert = this.alerts.get(target); - this.alerts.set(target, { - element: alert!.element, - count: alert!.count + 1, - message: event.detail.message, - }); - this.requestUpdate(); - } - - private get sideNav(): TemplateResult { - const navContent = html` - - - - - `; - import('./side-nav.js'); - - return html` - - ${navContent} - - `; - } - - private get settingsContent(): TemplateResult { - import('@spectrum-web-components/underlay/sp-underlay.js'); - - return html` - - - `; - } - - private get manageTheme(): TemplateResult { - import('./settings.js'); - - return html` -
-
- System - - Spectrum - Express - - Spectrum 2 - - -
-
- Color - - Light - Dark - -
-
- Scale - - Medium - Large - -
-
- - Direction - - - LTR - RTL - -
-
- `; - } - - private get header(): TemplateResult { - const triggerOptions: Partial = { - overlayOptions: { - type: 'modal', - }, - insertionOptions: { - el: () => - this.shadowRoot?.querySelector('#body') as HTMLElement, - where: 'afterbegin', - }, - }; - - return html` -
- this.sideNav, triggerOptions)} - > - - - this.settingsContent, triggerOptions)} - > - - -
- `; - } - - override render() { - return html` - - ${this.isNarrow ? this.header : html``} -
- ${this.isNarrow ? html`` : this.sideNav} -
- ${!this.isNarrow ? this.manageTheme : ''} - -
-
- ${this.alerts.size - ? html` -
- ${[...this.alerts.values()].map((alert) => - alert.element(alert.count, alert.message) - )} -
- ` - : html``} - - `; - } - - protected override firstUpdated(): void { - loadDefaults(); - isNarrowMediaQuery.addEventListener( - 'change', - this.handleMatchMediaChange - ); - } - - override updated(changes: PropertyValues) { - let loadStyleFragments = false; - if (changes.has('color')) { - if (window.localStorage) { - localStorage.setItem(SWC_THEME_COLOR_KEY, this.color); - } - if (changes.get('color')) { - loadStyleFragments = true; - } - const examples = [ - ...this.querySelectorAll('code-example'), - ] as CodeExample[]; - examples.forEach((example) => { - example.codeTheme = this.color; - }); - ( - document.querySelector('html') as HTMLHtmlElement - ).style.colorScheme = this.color; - } - if (changes.has('scale')) { - if (window.localStorage) { - localStorage.setItem(SWC_THEME_SCALE_KEY, this.scale); - } - if (changes.get('scale')) { - loadStyleFragments = true; - } - } - if (changes.has('system')) { - if (window.localStorage) { - localStorage.setItem(SWC_THEME_SYSTEM_KEY, this.system); - } - if (changes.get('system')) { - loadStyleFragments = true; - } - } - if (changes.has('dir') && window.localStorage) { - localStorage.setItem(SWC_THEME_DIR_KEY, this.dir); - } - if (loadStyleFragments) { - lazyStyleFragment(this.color, this.system); - lazyStyleFragment(this.scale, this.system); - } - } + public static override get styles(): CSSResultArray { + return [layoutStyles]; + } + + @state() + private alerts: Map< + HTMLElement, + { + count: number; + message: string; + element: (count: number, message: string) => TemplateResult; + } + > = new Map(); + + @property({ attribute: false }) + public color: Color = DEFAULT_COLOR; + + @property({ reflect: true }) + public override dir: "ltr" | "rtl" = DEFAULT_DIR; + + @property({ type: Boolean }) + public open = false; + + @state() + private isNarrow = isNarrowMediaQuery.matches; + + @property({ attribute: false }) + public theme: SystemVariant = DEFAULT_SYSTEM; + + @property({ attribute: false }) + public scale: Scale = DEFAULT_SCALE; + + @property({ attribute: false }) + public system: SystemVariant = DEFAULT_SYSTEM; + + @queryAsync("sp-theme") + private themeRoot!: Theme; + + public async startManagingContentDirection(el: HTMLElement): Promise { + (await this.themeRoot).startManagingContentDirection(el); + } + + public async stopManagingContentDirection(el: HTMLElement): Promise { + (await this.themeRoot).stopManagingContentDirection(el); + } + + private _themeTrackers = new Map(); + + private handleMatchMediaChange = (event: MediaQueryListEvent) => { + this.isNarrow = event.matches; + }; + + private closeSettings(event: Event & { target: HTMLElement }) { + event.target.parentElement?.dispatchEvent( + new Event("close", { bubbles: true }), + ); + } + + private updateColor(event: Event) { + this.color = (event.target as Picker).value as Color; + this._themeTrackers.forEach((tracker) => tracker(this.color)); + } + + private updateScale(event: Event) { + this.scale = (event.target as Picker).value as Scale; + } + + private updateSystem(event: Event) { + this.system = (event.target as Picker).value as SystemVariant; + } + + private updateDirection(event: Event) { + const dir = (event.target as Picker).value; + this.dir = dir === "rtl" ? dir : "ltr"; + document.documentElement.dir = this.dir; + } + + private handleTrackTheme(event: CustomEvent): void { + const target = event.composedPath()[0] as HTMLElement; + if (this._themeTrackers.has(target)) { + this._themeTrackers.delete(target); + } else { + this._themeTrackers.set(target, event.detail.callback); + const callback = this._themeTrackers.get(target); + if (callback) { + callback(this.color); + } + } + } + + private copyText( + event: CustomEvent<{ text: string; message: string }>, + ): void { + copyText(event.detail.text); + this.addAlert(event); + } + + private addAlert(event: CustomEvent<{ message: string }>): void { + const target = event.composedPath()[0] as HTMLElement; + if (!this.alerts.has(target)) { + const close = () => { + this.alerts.delete(target); + target.focus(); + this.requestUpdate(); + }; + this.alerts.set(target, { + count: 0, + message: "", + /** + * does not allow a `timeout` of less that 6000 + * use this as a cheat to reset the timeout to 6000 for + * every additional alert. + */ + + element: (count: number, message: string) => { + import("@spectrum-web-components/toast/sp-toast.js"); + + return html` + + ${message} ${count > 1 ? `(${count} alerts)` : ""} + + `; + }, + }); + } + const alert = this.alerts.get(target); + this.alerts.set(target, { + element: alert!.element, + count: alert!.count + 1, + message: event.detail.message, + }); + this.requestUpdate(); + } + + private get sideNav(): TemplateResult { + const navContent = html` + + + + + `; + import("./side-nav.js"); + + return html` + + ${navContent} + + `; + } + + private get settingsContent(): TemplateResult { + import("@spectrum-web-components/underlay/sp-underlay.js"); + + return html` + + + `; + } + + private get manageTheme(): TemplateResult { + import("./settings.js"); + + return html` +
+
+ System + + Spectrum + Express + Spectrum 2 + +
+
+ Color + + Light + Dark + +
+
+ Scale + + Medium + Large + +
+
+ Direction + + LTR + RTL + +
+
+ `; + } + + private get header(): TemplateResult { + const triggerOptions: Partial = { + overlayOptions: { + type: "modal", + }, + insertionOptions: { + el: () => this.shadowRoot?.querySelector("#body") as HTMLElement, + where: "afterbegin", + }, + }; + + return html` +
+ this.sideNav, triggerOptions)} + > + + + this.settingsContent, triggerOptions)} + > + + +
+ `; + } + + override render() { + return html` + + ${this.isNarrow ? this.header : html``} +
+ ${this.isNarrow ? html`` : this.sideNav} +
+ ${!this.isNarrow ? this.manageTheme : ""} + +
+
+ ${this.alerts.size + ? html` +
+ ${[...this.alerts.values()].map((alert) => + alert.element(alert.count, alert.message), + )} +
+ ` + : html``} + + `; + } + + protected override firstUpdated(): void { + loadDefaults(); + isNarrowMediaQuery.addEventListener("change", this.handleMatchMediaChange); + } + + override updated(changes: PropertyValues) { + let loadStyleFragments = false; + if (changes.has("color")) { + if (window.localStorage) { + localStorage.setItem(SWC_THEME_COLOR_KEY, this.color); + } + if (changes.get("color")) { + loadStyleFragments = true; + } + const examples = [ + ...this.querySelectorAll("code-example"), + ] as CodeExample[]; + examples.forEach((example) => { + example.codeTheme = this.color; + }); + (document.querySelector("html") as HTMLHtmlElement).style.colorScheme = + this.color; + } + if (changes.has("scale")) { + if (window.localStorage) { + localStorage.setItem(SWC_THEME_SCALE_KEY, this.scale); + } + if (changes.get("scale")) { + loadStyleFragments = true; + } + } + if (changes.has("system")) { + if (window.localStorage) { + localStorage.setItem(SWC_THEME_SYSTEM_KEY, this.system); + } + if (changes.get("system")) { + loadStyleFragments = true; + } + } + if (changes.has("dir") && window.localStorage) { + localStorage.setItem(SWC_THEME_DIR_KEY, this.dir); + } + if (loadStyleFragments) { + lazyStyleFragment(this.color, this.system); + lazyStyleFragment(this.scale, this.system); + } + } } -customElements.define('docs-page', LayoutElement); +customElements.define("docs-page", LayoutElement); diff --git a/projects/documentation/src/components/search-index.ts b/projects/documentation/src/components/search-index.ts index 989ed97662..b14221a41e 100644 --- a/projects/documentation/src/components/search-index.ts +++ b/projects/documentation/src/components/search-index.ts @@ -10,84 +10,83 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import lunr from 'lunr'; -import '@spectrum-web-components/popover/sp-popover.js'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-group.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/illustrated-message/sp-illustrated-message.js'; +import lunr from "lunr"; +import "@spectrum-web-components/popover/sp-popover.js"; +import "@spectrum-web-components/menu/sp-menu.js"; +import "@spectrum-web-components/menu/sp-menu-group.js"; +import "@spectrum-web-components/menu/sp-menu-item.js"; +import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js"; let index: lunr.Index | undefined; export interface Result { - name: string; - label: string; - url: string; + name: string; + label: string; + url: string; } export interface ResultGroup { - name: string; - results: Result[]; - maxScore: number; + name: string; + results: Result[]; + maxScore: number; } function label(name: string): string { - return name.replace(/(?:^|-)\w/g, (match) => - match.toUpperCase().replace('-', ' ') - ); + return name.replace(/(?:^|-)\w/g, (match) => + match.toUpperCase().replace("-", " "), + ); } export async function search(value: string): Promise { - if (!index) { - const searchIndexURL = new URL('./searchIndex.json', import.meta.url) - .href; - const searchIndex = await (await fetch(searchIndexURL)).json(); - index = lunr.Index.load(searchIndex); - } + if (!index) { + const searchIndexURL = new URL("./searchIndex.json", import.meta.url).href; + const searchIndex = await (await fetch(searchIndexURL)).json(); + index = lunr.Index.load(searchIndex); + } - const collatedResults = new Map< - string, - { - maxScore: number; - results: Result[]; - } - >(); + const collatedResults = new Map< + string, + { + maxScore: number; + results: Result[]; + } + >(); - const search = index.search(value); - for (const item of search) { - const { category, name, url } = JSON.parse(item.ref); + const search = index.search(value); + for (const item of search) { + const { category, name, url } = JSON.parse(item.ref); - if (!collatedResults.has(category)) { - collatedResults.set(category, { - maxScore: 0, - results: [], - }); - } - const catagoryData = collatedResults.get(category); - if (catagoryData) { - catagoryData.maxScore = Math.max(catagoryData.maxScore, item.score); - catagoryData.results.push({ - name, - label: label(name), - url, - }); - } - } + if (!collatedResults.has(category)) { + collatedResults.set(category, { + maxScore: 0, + results: [], + }); + } + const catagoryData = collatedResults.get(category); + if (catagoryData) { + catagoryData.maxScore = Math.max(catagoryData.maxScore, item.score); + catagoryData.results.push({ + name, + label: label(name), + url, + }); + } + } - const result: ResultGroup[] = []; - for (const [name, { results, maxScore }] of collatedResults) { - result.push({ name, results, maxScore }); - } - result.sort((a, b) => { - if (a.maxScore < b.maxScore) { - return 1; - } - if (a.maxScore > b.maxScore) { - return -1; - } + const result: ResultGroup[] = []; + for (const [name, { results, maxScore }] of collatedResults) { + result.push({ name, results, maxScore }); + } + result.sort((a, b) => { + if (a.maxScore < b.maxScore) { + return 1; + } + if (a.maxScore > b.maxScore) { + return -1; + } - return 0; - }); + return 0; + }); - return result; + return result; } diff --git a/projects/documentation/src/components/settings.ts b/projects/documentation/src/components/settings.ts index 51d5965681..304a4db820 100644 --- a/projects/documentation/src/components/settings.ts +++ b/projects/documentation/src/components/settings.ts @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/field-label/sp-field-label.js'; -import '@spectrum-web-components/picker/sp-picker.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js'; +import "@spectrum-web-components/field-label/sp-field-label.js"; +import "@spectrum-web-components/picker/sp-picker.js"; +import "@spectrum-web-components/menu/sp-menu-item.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-close.js"; diff --git a/projects/documentation/src/components/side-nav-search.ts b/projects/documentation/src/components/side-nav-search.ts index dcdbe84eac..fcaef26f11 100644 --- a/projects/documentation/src/components/side-nav-search.ts +++ b/projects/documentation/src/components/side-nav-search.ts @@ -11,213 +11,210 @@ governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - LitElement, - PropertyValues, - TemplateResult, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + LitElement, + PropertyValues, + TemplateResult, +} from "@spectrum-web-components/base"; import { - customElement, - property, - query, -} from '@spectrum-web-components/base/src/decorators.js'; -import sideNavSearchMenuStyles from './side-nav-search.css'; -import type { Search } from '@spectrum-web-components/search'; -import type { Overlay } from '@spectrum-web-components/overlay'; -import type { Popover } from '@spectrum-web-components/popover'; -import type { ResultGroup } from './search-index.js'; -import { Menu } from '@spectrum-web-components/menu'; -import '@spectrum-web-components/overlay/sp-overlay.js'; -import '@spectrum-web-components/search/sp-search.js'; + customElement, + property, + query, +} from "@spectrum-web-components/base/src/decorators.js"; +import { Menu } from "@spectrum-web-components/menu"; +import type { Overlay } from "@spectrum-web-components/overlay"; +import "@spectrum-web-components/overlay/sp-overlay.js"; +import type { Popover } from "@spectrum-web-components/popover"; +import type { Search } from "@spectrum-web-components/search"; +import "@spectrum-web-components/search/sp-search.js"; +import type { ResultGroup } from "./search-index.js"; +import sideNavSearchMenuStyles from "./side-nav-search.css"; const stopPropagation = (event: Event): void => event.stopPropagation(); -@customElement('docs-search') +@customElement("docs-search") export class SearchComponent extends LitElement { - @query('sp-menu') - private menuEl!: Menu; - - @property({ type: Boolean }) - private open = false; - - @query('sp-overlay') - private overlayEl!: Overlay; - - @query('sp-popover') - private popoverEl!: Popover; - - @query('sp-search') - private searchField!: Search; - - public static override get styles(): CSSResultArray { - return [sideNavSearchMenuStyles]; - } - - @property({ type: Array }) - public results: ResultGroup[] = []; - - public override focus(): void { - this.searchField.focus(); - } - - private handleSearchPointerdown(): void { - const abortController = new AbortController(); - const { signal } = abortController; - const handlePointerup = () => { - this.overlayEl.manuallyKeepOpen(); - }; - const cleanup = () => abortController.abort(); - this.searchField.addEventListener('pointerup', handlePointerup, { - signal, - }); - document.addEventListener('pointerup', cleanup, { - signal, - }); - document.addEventListener('pointercancel', cleanup, { - signal, - }); - } - - private handleKeydown(event: KeyboardEvent) { - const { code } = event; - const shouldFocusResultsList = - code === 'ArrowDown' || code === 'ArrowUp'; - if (!shouldFocusResultsList) { - return; - } else { - event.preventDefault(); - } - this.focusResults({ shouldFocusResultsList }); - } - - private async focusResults({ - shouldFocusResultsList, - }: { - shouldFocusResultsList?: boolean; - }): Promise { - if (shouldFocusResultsList) { - this.menuEl.addEventListener( - 'focus', - () => { - this.menuEl.childItems[ - this.menuEl.focusedItemIndex - ].focused = true; - }, - { - once: true, - } - ); - this.menuEl.focus(); - } else { - this.popoverEl.focus(); - } - } - - private openPopover() { - this.open = true; - } - - private closePopover() { - this.open = false; - } - - handleSubmit(event: Event): void { - event.preventDefault(); - if (this.results.length < 0) { - return; - } - this.menuEl.focus(); - } - - private async updateSearchResults(): Promise { - const { value } = this.searchField; - if (value.length < 3 || !this.searchField.focused) { - this.closePopover(); - - return false; - } - - const searchParam = `${value.trim()}*`; - const search = await import('./search-index.js').then( - ({ search }) => search - ); - this.results = await search(searchParam); - - this.openPopover(); - - return this.results.length > 0; - } - - private handleMenuFocusout(event: FocusEvent) { - if (!this.menuEl.contains(event.relatedTarget as Node)) { - this.menuEl.childItems.forEach((item) => { - item.focused = false; - }); - } - } - - renderResults(): TemplateResult { - if (this.results.length > 0) { - return html` - - ${this.results.map( - (category) => html` - - ${category.name} - ${category.results.map( - (result) => html` - - ${result.label} - - ` - )} - - ` - )} - - `; - } else { - return html` - - `; - } - } - - override render(): TemplateResult { - return html` -
- - - - ${this.renderResults()} - - -
- `; - } - - protected override firstUpdated(_changedProperties: PropertyValues): void { - super.firstUpdated(_changedProperties); - this.addEventListener('blur', this.closePopover); - } + @query("sp-menu") + private menuEl!: Menu; + + @property({ type: Boolean }) + private open = false; + + @query("sp-overlay") + private overlayEl!: Overlay; + + @query("sp-popover") + private popoverEl!: Popover; + + @query("sp-search") + private searchField!: Search; + + public static override get styles(): CSSResultArray { + return [sideNavSearchMenuStyles]; + } + + @property({ type: Array }) + public results: ResultGroup[] = []; + + public override focus(): void { + this.searchField.focus(); + } + + private handleSearchPointerdown(): void { + const abortController = new AbortController(); + const { signal } = abortController; + const handlePointerup = () => { + this.overlayEl.manuallyKeepOpen(); + }; + const cleanup = () => abortController.abort(); + this.searchField.addEventListener("pointerup", handlePointerup, { + signal, + }); + document.addEventListener("pointerup", cleanup, { + signal, + }); + document.addEventListener("pointercancel", cleanup, { + signal, + }); + } + + private handleKeydown(event: KeyboardEvent) { + const { code } = event; + const shouldFocusResultsList = code === "ArrowDown" || code === "ArrowUp"; + if (!shouldFocusResultsList) { + return; + } else { + event.preventDefault(); + } + this.focusResults({ shouldFocusResultsList }); + } + + private async focusResults({ + shouldFocusResultsList, + }: { + shouldFocusResultsList?: boolean; + }): Promise { + if (shouldFocusResultsList) { + this.menuEl.addEventListener( + "focus", + () => { + this.menuEl.childItems[this.menuEl.focusedItemIndex].focused = true; + }, + { + once: true, + }, + ); + this.menuEl.focus(); + } else { + this.popoverEl.focus(); + } + } + + private openPopover() { + this.open = true; + } + + private closePopover() { + this.open = false; + } + + handleSubmit(event: Event): void { + event.preventDefault(); + if (this.results.length < 0) { + return; + } + this.menuEl.focus(); + } + + private async updateSearchResults(): Promise { + const { value } = this.searchField; + if (value.length < 3 || !this.searchField.focused) { + this.closePopover(); + + return false; + } + + const searchParam = `${value.trim()}*`; + const search = await import("./search-index.js").then( + ({ search }) => search, + ); + this.results = await search(searchParam); + + this.openPopover(); + + return this.results.length > 0; + } + + private handleMenuFocusout(event: FocusEvent) { + if (!this.menuEl.contains(event.relatedTarget as Node)) { + this.menuEl.childItems.forEach((item) => { + item.focused = false; + }); + } + } + + renderResults(): TemplateResult { + if (this.results.length > 0) { + return html` + + ${this.results.map( + (category) => html` + + ${category.name} + ${category.results.map( + (result) => html` + + ${result.label} + + `, + )} + + `, + )} + + `; + } else { + return html` + + `; + } + } + + override render(): TemplateResult { + return html` +
+ + + + ${this.renderResults()} + + +
+ `; + } + + protected override firstUpdated(_changedProperties: PropertyValues): void { + super.firstUpdated(_changedProperties); + this.addEventListener("blur", this.closePopover); + } } diff --git a/projects/documentation/src/components/side-nav.ts b/projects/documentation/src/components/side-nav.ts index 6a5e0d0104..8654d2d31c 100644 --- a/projects/documentation/src/components/side-nav.ts +++ b/projects/documentation/src/components/side-nav.ts @@ -10,93 +10,89 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - LitElement, - PropertyValues, - TemplateResult, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + LitElement, + PropertyValues, + TemplateResult, +} from "@spectrum-web-components/base"; import { - customElement, - property, -} from '@spectrum-web-components/base/src/decorators.js'; -import './side-nav-search.js'; -import sideNavStyles from './side-nav.css'; -import '@spectrum-web-components/sidenav/sp-sidenav.js'; -import '@spectrum-web-components/sidenav/sp-sidenav-item.js'; -import '@spectrum-web-components/underlay/sp-underlay.js'; + customElement, + property, +} from "@spectrum-web-components/base/src/decorators.js"; +import "./side-nav-search.js"; +import sideNavStyles from "./side-nav.css"; +import "@spectrum-web-components/sidenav/sp-sidenav.js"; +import "@spectrum-web-components/sidenav/sp-sidenav-item.js"; +import "@spectrum-web-components/underlay/sp-underlay.js"; -@customElement('docs-side-nav') +@customElement("docs-side-nav") export class SideNav extends LitElement { - public static override get styles(): CSSResultArray { - return [sideNavStyles]; - } + public static override get styles(): CSSResultArray { + return [sideNavStyles]; + } - @property({ type: Boolean, reflect: true }) - public open = false; + @property({ type: Boolean, reflect: true }) + public open = false; - public toggle() { - this.open = !this.open; - } + public toggle() { + this.open = !this.open; + } - @property({ type: Boolean }) - public isNarrow = false; + @property({ type: Boolean }) + public isNarrow = false; - public override focus() { - const target = document.querySelector( - '[slot="logo"]' - ) as HTMLAnchorElement; - if (!target) { - ( - this.shadowRoot!.querySelector('#logo')! as HTMLAnchorElement - ).focus(); + public override focus() { + const target = document.querySelector('[slot="logo"]') as HTMLAnchorElement; + if (!target) { + (this.shadowRoot!.querySelector("#logo")! as HTMLAnchorElement).focus(); - return; - } - target.focus(); - } + return; + } + target.focus(); + } - handleTransitionEvent(event: TransitionEvent): void { - this.dispatchEvent(new TransitionEvent(event.type)); - } + handleTransitionEvent(event: TransitionEvent): void { + this.dispatchEvent(new TransitionEvent(event.type)); + } - override render(): TemplateResult { - return html` - ${this.isNarrow - ? html` - - ` - : html``} - - `; - } + override render(): TemplateResult { + return html` + ${this.isNarrow + ? html` + + ` + : html``} + + `; + } - override updated(changes: PropertyValues) { - if (changes.has('open')) { - if (!this.open && changes.get('open')) { - this.dispatchEvent(new Event('close', { bubbles: true })); - } - } - } + override updated(changes: PropertyValues) { + if (changes.has("open")) { + if (!this.open && changes.get("open")) { + this.dispatchEvent(new Event("close", { bubbles: true })); + } + } + } } diff --git a/projects/documentation/src/getting-started.ts b/projects/documentation/src/getting-started.ts index e2e68f85ec..d22b824b26 100644 --- a/projects/documentation/src/getting-started.ts +++ b/projects/documentation/src/getting-started.ts @@ -10,5 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/theme/theme-lightest.js'; -import '@spectrum-web-components/theme/scale-medium.js'; +import "@spectrum-web-components/theme/theme-lightest.js"; +import "@spectrum-web-components/theme/scale-medium.js"; diff --git a/projects/documentation/src/global.d.ts b/projects/documentation/src/global.d.ts index cc9c7da40f..8db0f60277 100644 --- a/projects/documentation/src/global.d.ts +++ b/projects/documentation/src/global.d.ts @@ -10,19 +10,19 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -declare module '*.css' { - const content: CSSResultArray; - export default content; +declare module "*.css" { + const content: CSSResultArray; + export default content; } -declare module '@open-wc/polyfills-loader' { - function loadPolyfills(): Promise; - export default loadPolyfills; +declare module "@open-wc/polyfills-loader" { + function loadPolyfills(): Promise; + export default loadPolyfills; } -declare module 'element-closest' { - function polyfill(window: Window): void; - export default polyfill; +declare module "element-closest" { + function polyfill(window: Window): void; + export default polyfill; } // W3C Spec Draft http://wicg.github.io/netinfo/ @@ -34,23 +34,23 @@ declare interface WorkerNavigator extends NavigatorNetworkInformation {} // http://wicg.github.io/netinfo/#navigatornetworkinformation-interface declare interface NavigatorNetworkInformation { - readonly connection?: NetworkInformation; + readonly connection?: NetworkInformation; } // http://wicg.github.io/netinfo/#connection-types type ConnectionType = - | 'bluetooth' - | 'cellular' - | 'ethernet' - | 'mixed' - | 'none' - | 'other' - | 'unknown' - | 'wifi' - | 'wimax'; + | "bluetooth" + | "cellular" + | "ethernet" + | "mixed" + | "none" + | "other" + | "unknown" + | "wifi" + | "wimax"; // http://wicg.github.io/netinfo/#effectiveconnectiontype-enum -type EffectiveConnectionType = '2g' | '3g' | '4g' | 'slow-2g'; +type EffectiveConnectionType = "2g" | "3g" | "4g" | "slow-2g"; // http://wicg.github.io/netinfo/#dom-megabit type Megabit = number; @@ -59,18 +59,18 @@ type Millisecond = number; // http://wicg.github.io/netinfo/#networkinformation-interface interface NetworkInformation extends EventTarget { - // http://wicg.github.io/netinfo/#type-attribute - readonly type?: ConnectionType; - // http://wicg.github.io/netinfo/#effectivetype-attribute - readonly effectiveType?: EffectiveConnectionType; - // http://wicg.github.io/netinfo/#downlinkmax-attribute - readonly downlinkMax?: Megabit; - // http://wicg.github.io/netinfo/#downlink-attribute - readonly downlink?: Megabit; - // http://wicg.github.io/netinfo/#rtt-attribute - readonly rtt?: Millisecond; - // http://wicg.github.io/netinfo/#savedata-attribute - readonly saveData?: boolean; - // http://wicg.github.io/netinfo/#handling-changes-to-the-underlying-connection - onchange?: EventListener; + // http://wicg.github.io/netinfo/#type-attribute + readonly type?: ConnectionType; + // http://wicg.github.io/netinfo/#effectivetype-attribute + readonly effectiveType?: EffectiveConnectionType; + // http://wicg.github.io/netinfo/#downlinkmax-attribute + readonly downlinkMax?: Megabit; + // http://wicg.github.io/netinfo/#downlink-attribute + readonly downlink?: Megabit; + // http://wicg.github.io/netinfo/#rtt-attribute + readonly rtt?: Millisecond; + // http://wicg.github.io/netinfo/#savedata-attribute + readonly saveData?: boolean; + // http://wicg.github.io/netinfo/#handling-changes-to-the-underlying-connection + onchange?: EventListener; } diff --git a/projects/documentation/src/index.ts b/projects/documentation/src/index.ts index d939e2bc1a..2b04aaf08f 100644 --- a/projects/documentation/src/index.ts +++ b/projects/documentation/src/index.ts @@ -10,22 +10,22 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import './components/layout.js'; +import "./components/layout.js"; declare global { - interface Window { - spAlert(el: HTMLElement, message: string): void; - } + interface Window { + spAlert(el: HTMLElement, message: string): void; + } } window.spAlert = (el: HTMLElement, message: string): void => { - el.dispatchEvent( - new CustomEvent('alert', { - composed: true, - bubbles: true, - detail: { - message, - }, - }) - ); + el.dispatchEvent( + new CustomEvent("alert", { + composed: true, + bubbles: true, + detail: { + message, + }, + }), + ); }; diff --git a/projects/documentation/src/router.ts b/projects/documentation/src/router.ts index dcfe13a4bf..0bcec17269 100644 --- a/projects/documentation/src/router.ts +++ b/projects/documentation/src/router.ts @@ -10,40 +10,40 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { Tabs } from '@spectrum-web-components/tabs'; +import { Tabs } from "@spectrum-web-components/tabs"; -const tabs = document.querySelector('sp-tabs') as Tabs; -tabs.addEventListener('change', (event: Event) => { - const target = event.target as Tabs; - const { selected } = target; - const { pathname } = location; - const isAPI = pathname.search('api') > -1; - const isChangelog = pathname.search('changelog') > -1; - const parseURLRegex = /\/api\/?|\/changelog\/?/; - switch (selected) { - case 'api': { - if (isAPI) { - return; - } - const dest = pathname.replace(parseURLRegex, '/') + 'api/'; - history.pushState({}, document.title, dest); - break; - } - case 'changelog': { - if (isChangelog) { - return; - } - const dest = pathname.replace(parseURLRegex, '/') + 'changelog/'; - history.pushState({}, document.title, dest); - break; - } - case 'examples': { - if (!isAPI && !isChangelog) { - return; - } - const dest = pathname.replace(parseURLRegex, '/'); - history.pushState({}, document.title, dest); - break; - } - } +const tabs = document.querySelector("sp-tabs") as Tabs; +tabs.addEventListener("change", (event: Event) => { + const target = event.target as Tabs; + const { selected } = target; + const { pathname } = location; + const isAPI = pathname.search("api") > -1; + const isChangelog = pathname.search("changelog") > -1; + const parseURLRegex = /\/api\/?|\/changelog\/?/; + switch (selected) { + case "api": { + if (isAPI) { + return; + } + const dest = pathname.replace(parseURLRegex, "/") + "api/"; + history.pushState({}, document.title, dest); + break; + } + case "changelog": { + if (isChangelog) { + return; + } + const dest = pathname.replace(parseURLRegex, "/") + "changelog/"; + history.pushState({}, document.title, dest); + break; + } + case "examples": { + if (!isAPI && !isChangelog) { + return; + } + const dest = pathname.replace(parseURLRegex, "/"); + history.pushState({}, document.title, dest); + break; + } + } }); diff --git a/projects/documentation/src/utils/templates.ts b/projects/documentation/src/utils/templates.ts index 4c8ee1d6fa..b2fcbed155 100644 --- a/projects/documentation/src/utils/templates.ts +++ b/projects/documentation/src/utils/templates.ts @@ -11,22 +11,22 @@ governing permissions and limitations under the License. */ import { - css, - type CSSResultGroup, - html, - type TemplateResult, -} from '@spectrum-web-components/base'; + css, + type CSSResultGroup, + html, + type TemplateResult, +} from "@spectrum-web-components/base"; export function toHtmlTemplateString(code: string): TemplateResult { - const stringArray = [`${code}`] as string[] & { raw: string[] }; - stringArray.raw = [`${code}`]; + const stringArray = [`${code}`] as string[] & { raw: string[] }; + stringArray.raw = [`${code}`]; - return html(stringArray as TemplateStringsArray); + return html(stringArray as TemplateStringsArray); } export function toCssTemplateString(code: string): CSSResultGroup { - const stringArray = [`${code}`] as string[] & { raw: string[] }; - stringArray.raw = [`${code}`]; + const stringArray = [`${code}`] as string[] & { raw: string[] }; + stringArray.raw = [`${code}`]; - return css(stringArray as TemplateStringsArray); + return css(stringArray as TemplateStringsArray); } From 320834936f229294de9acdd8e1204296dad7f35b Mon Sep 17 00:00:00 2001 From: Casey Eickhoff Date: Thu, 19 Dec 2024 17:20:09 -0700 Subject: [PATCH 3/9] chore: resolve lint errors --- .eslintrc.json | 35 +- .vscode/settings.json | 61 +- packages/.eslintrc.json | 13 +- .../accordion-densities-compact.stories.ts | 16 +- .../accordion-densities-spacious.stories.ts | 16 +- .../stories/accordion-sizes.stories.ts | 16 +- .../accordion/stories/accordion.stories.ts | 56 +- packages/accordion/stories/template.ts | 2 +- packages/action-group/src/ActionGroup.ts | 1093 +++--- .../stories/action-group-tooltip.stories.ts | 712 ++-- .../action-group/test/action-group.test.ts | 2959 +++++++------- .../stories/action-menu-sizes.stories.ts | 32 +- .../stories/action-menu.stories.ts | 811 ++-- .../action-menu/test/action-menu-sync.test.ts | 14 +- packages/action-menu/test/action-menu.test.ts | 14 +- packages/action-menu/test/index.ts | 1550 ++++---- .../stories/alert-banner.stories.ts | 88 +- packages/alert-banner/stories/template.ts | 2 +- packages/asset/stories/asset.stories.ts | 28 +- packages/asset/test/asset.test.ts | 42 +- packages/avatar/stories/avatar.stories.ts | 94 +- packages/avatar/test/avatar.test.ts | 228 +- .../button-group/test/button-group.test.ts | 42 +- packages/button/test/clear-button.test.ts | 57 +- packages/button/test/close-button.test.ts | 57 +- packages/card/src/Card.ts | 655 ++-- packages/card/stories/card.stories.ts | 679 ++-- packages/checkbox/test/checkbox.test.ts | 707 ++-- packages/color-area/src/ColorArea.ts | 1124 +++--- packages/color-wheel/src/ColorWheel.ts | 838 ++-- packages/combobox/stories/index.ts | 590 +-- packages/combobox/stories/template.ts | 2 +- packages/contextual-help/stories/template.ts | 2 +- .../test/contextual-help.test.ts | 192 +- packages/dropzone/stories/dropzone.stories.ts | 329 +- packages/dropzone/test/dropzone.test.ts | 351 +- packages/help-text/src/HelpTextManager.ts | 230 +- packages/icon/stories/icon.stories.ts | 142 +- packages/icons-ui/stories/icons-ui.stories.ts | 192 +- packages/icons/test/icons.test.ts | 66 +- .../test/illustrated-message.test.ts | 58 +- packages/menu/stories/menu-group.stories.ts | 256 +- packages/menu/stories/menu-item.stories.ts | 132 +- packages/menu/stories/menu-sizes.stories.ts | 16 +- packages/menu/stories/menu.stories.ts | 729 ++-- packages/menu/stories/submenu.stories.ts | 766 ++-- .../number-field/test/number-field.test.ts | 3483 ++++++++--------- packages/overlay/src/OverlayTrigger.ts | 548 ++- packages/overlay/stories/overlay.stories.ts | 2664 ++++++------- packages/overlay/test/overlay-v1.test.ts | 1311 +++---- packages/overlay/test/overlay.test.ts | 1783 ++++----- .../picker-button/test/picker-button.test.ts | 61 +- .../picker/stories/picker-pending.stories.ts | 26 +- packages/split-view/src/SplitView.ts | 1152 +++--- .../swatch/stories/swatch-group.stories.ts | 289 +- packages/swatch/test/swatch-group.test.ts | 864 ++-- packages/switch/src/Switch.ts | 116 +- packages/table/src/Table.ts | 1289 +++--- packages/tags/src/Tag.ts | 353 +- packages/tags/stories/tags.stories.ts | 234 +- packages/textfield/test/textfield.test.ts | 2336 ++++++----- packages/thumbnail/test/thumbnail.test.ts | 144 +- packages/toast/src/Toast.ts | 668 ++-- packages/tooltip/stories/tooltip.stories.ts | 759 ++-- packages/top-nav/stories/top-nav.stories.ts | 238 +- packages/top-nav/test/top-nav.test.ts | 224 +- .../src/components/code-example.ts | 10 +- tools/base/src/Base.ts | 433 +- tools/base/src/condition-attribute-with-id.ts | 57 +- tools/base/src/sizedMixin.ts | 113 +- tools/grid/src/Grid.ts | 298 +- tools/grid/src/GridController.ts | 423 +- tools/grid/stories/grid.stories.ts | 467 ++- tools/reactive-controllers/src/Color.ts | 590 ++- .../src/ElementResolution.ts | 246 +- tools/reactive-controllers/src/FocusGroup.ts | 758 ++-- .../reactive-controllers/src/PendingState.ts | 137 +- .../src/RovingTabindex.ts | 144 +- tools/reactive-controllers/test/helpers.ts | 43 +- .../test/roving-tabindex-integration.test.ts | 532 ++- tools/shared/src/first-focusable-in.ts | 30 +- tools/shared/src/focusable.ts | 609 +-- .../shared/src/get-deep-element-from-point.ts | 31 +- tools/shared/src/like-anchor.ts | 153 +- tools/shared/src/observe-slot-presence.ts | 149 +- tools/shared/src/observe-slot-text.ts | 199 +- tools/shared/src/reparent-children.ts | 122 +- tools/shared/test/reparent-children.test.ts | 579 ++- tools/theme/src/Theme.ts | 945 +++-- tools/theme/stories/theme.stories.ts | 474 ++- tools/truncated/src/Truncated.ts | 353 +- 91 files changed, 20950 insertions(+), 21581 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 0cca8797d4..9229251980 100755 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,6 @@ "node": true }, "extends": [ - // "plugin:prettier/recommended", "plugin:lit-a11y/recommended", "plugin:require-extensions/recommended", "eslint:recommended", @@ -40,7 +39,9 @@ "pathPattern": ".*" }, { - "order": { "type": "asc" }, + "order": { + "type": "asc" + }, "pathPattern": ".*" } ], @@ -104,7 +105,9 @@ "pathPattern": "^repository$" }, { - "order": { "type": "asc" }, + "order": { + "type": "asc" + }, "pathPattern": ".*" } ] @@ -146,7 +149,11 @@ ], "@stylistic/padding-line-between-statements": [ "error", - { "blankLine": "always", "next": "return", "prev": "*" } + { + "blankLine": "always", + "next": "return", + "prev": "*" + } ], "curly": ["error", "all"], "func-call-spacing": ["warn", "never"], @@ -161,7 +168,10 @@ "indent": [ "warn", "tab", - { "SwitchCase": 1, "ignoredNodes": ["TemplateLiteral *"] } + { + "SwitchCase": 1, + "ignoredNodes": ["TemplateLiteral *"] + } ], "linebreak-style": ["warn", "unix"], "lit-a11y/click-events-have-key-events": [ @@ -179,7 +189,12 @@ ] } ], - "no-console": ["warn", { "allow": ["warn", "error"] }], + "no-console": [ + "warn", + { + "allow": ["warn", "error"] + } + ], "no-debugger": 2, "notice/notice": [ "error", @@ -188,7 +203,13 @@ "templateFile": "config/license.js" } ], - "quotes": ["warn", "double"], + "quotes": [ + "warn", + "double", + { + "avoidEscape": true + } + ], "semi": ["warn", "always"], "sort-imports": [ "error", diff --git a/.vscode/settings.json b/.vscode/settings.json index 26fda2f538..d337dbe7c8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,15 +1,29 @@ { "files.exclude": { - "**/*.css.ts": { "when": "$(basename)" }, + "**/*.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" }, - "packages/**/*.d.ts": { "when": "$(basename).ts" }, + "packages/**/*.js": { + "when": "$(basename).ts" + }, + "packages/**/*.dev.js": { + "when": "$(basename).js" + }, + "packages/**/*.d.ts": { + "when": "$(basename).ts" + }, "tools/**/*.js.map": true, - "tools/**/*.js": { "when": "$(basename).ts" }, - "tools/**/*.dev.js": { "when": "$(basename).js" }, - "tools/**/*.d.ts": { "when": "$(basename).ts" }, + "tools/**/*.js": { + "when": "$(basename).ts" + }, + "tools/**/*.dev.js": { + "when": "$(basename).js" + }, + "tools/**/*.d.ts": { + "when": "$(basename).ts" + }, "**/*.test-vrt.ts": true }, "editor.tabSize": 2, @@ -22,7 +36,6 @@ "editor.detectIndentation": false, "typescript.tsdk": "node_modules/typescript/lib", "lit-plugin.strict": true, - "eslint.workingDirectories": ["./packages", "./tools"], "[css]": { "editor.codeActionsOnSave": { "source.fixAll.stylelint": "explicit" @@ -96,25 +109,27 @@ "selector": "yaml" } ], - "cssVariables.lookupFiles": [ - "${workspaceFolder}/tokens/dist/index.css", - "${workspaceFolder}/tokens/**/*.css", - "${workspaceFolder}/components/*/index.css", - "${workspaceFolder}/components/*/themes/*.css" - ], + // "cssVariables.lookupFiles": [ + // "${workspaceFolder}/tokens/dist/index.css", + // "${workspaceFolder}/tokens/**/*.css", + // "${workspaceFolder}/components/*/index.css", + // "${workspaceFolder}/components/*/themes/*.css" + // ], "docthis.includeDescriptionTag": true, "docthis.inferTypesFromNames": true, "docthis.returnsTag": true, "editor.largeFileOptimizations": true, "editor.renderControlCharacters": true, - "emmet.includeLanguages": { - "postcss": "css" - }, - "emmet.syntaxProfiles": { - "postcss": "css" - }, "eslint.format.enable": true, "eslint.useESLintClass": true, + // "eslint.nodePath": "node_modules/eslint", + // "eslint.workingDirectories": ["./packages", "./tools"], + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact" + ], "files.associations": { "*.css": "postcss" }, @@ -172,8 +187,10 @@ "stylelint.reportNeedlessDisables": true, "stylelint.validate": ["css", "postcss"], "storyExplorer.storiesGlobs": [ - "components/*/stories/*.stories.js", - "components/*/stories/*.mdx" + "packages/*/stories/*.stories.js", + "packages/*/stories/*.mdx", + "tools/*/stories/*.stories.js", + "tools/*/stories/*.mdx" ], "workbench.editor.historyBasedLanguageDetection": false } diff --git a/packages/.eslintrc.json b/packages/.eslintrc.json index 1063414e8a..7818a2d9f4 100644 --- a/packages/.eslintrc.json +++ b/packages/.eslintrc.json @@ -15,11 +15,10 @@ "lit-a11y" ], "extends": [ - "../.eslintrc.json", - "plugin:@typescript-eslint/recommended", - "prettier", "plugin:lit-a11y/recommended", - "plugin:jsdoc/recommended-typescript" + "plugin:jsdoc/recommended-typescript", + "eslint:recommended", + "plugin:@typescript-eslint/recommended" ], "ignorePatterns": ["packages/**/*.css.ts"], "settings": { @@ -274,9 +273,9 @@ "error", { "ignoreCase": true, - "ignoreDeclarationSort": true, - "ignoreMemberSort": false, - "allowSeparatedGroups": false + "ignoreDeclarationSort": true + // "ignoreMemberSort": false, + // "allowSeparatedGroups": false } ], "lit-a11y/click-events-have-key-events": [ diff --git a/packages/accordion/stories/accordion-densities-compact.stories.ts b/packages/accordion/stories/accordion-densities-compact.stories.ts index d8a0aa0ea8..367f7c4321 100644 --- a/packages/accordion/stories/accordion-densities-compact.stories.ts +++ b/packages/accordion/stories/accordion-densities-compact.stories.ts @@ -10,19 +10,19 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { TemplateResult } from '@spectrum-web-components/base'; -import { AccordionMarkup } from './'; +import { TemplateResult } from "@spectrum-web-components/base"; +import { AccordionMarkup } from ".//index.js"; export default { - title: 'Accordion/Densities/Compact', - component: 'sp-accordion', + title: "Accordion/Densities/Compact", + component: "sp-accordion", }; export const s = (): TemplateResult => - AccordionMarkup({ density: 'compact', size: 's' }); + AccordionMarkup({ density: "compact", size: "s" }); export const m = (): TemplateResult => - AccordionMarkup({ density: 'compact', size: 'm' }); + AccordionMarkup({ density: "compact", size: "m" }); export const l = (): TemplateResult => - AccordionMarkup({ density: 'compact', size: 'l' }); + AccordionMarkup({ density: "compact", size: "l" }); export const xl = (): TemplateResult => - AccordionMarkup({ density: 'compact', size: 'xl' }); + AccordionMarkup({ density: "compact", size: "xl" }); diff --git a/packages/accordion/stories/accordion-densities-spacious.stories.ts b/packages/accordion/stories/accordion-densities-spacious.stories.ts index 45435a86c2..ba1f7c948f 100644 --- a/packages/accordion/stories/accordion-densities-spacious.stories.ts +++ b/packages/accordion/stories/accordion-densities-spacious.stories.ts @@ -10,19 +10,19 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { TemplateResult } from '@spectrum-web-components/base'; -import { AccordionMarkup } from './'; +import { TemplateResult } from "@spectrum-web-components/base"; +import { AccordionMarkup } from ".//index.js"; export default { - title: 'Accordion/Densities/Spacious', - component: 'sp-accordion', + title: "Accordion/Densities/Spacious", + component: "sp-accordion", }; export const s = (): TemplateResult => - AccordionMarkup({ density: 'spacious', size: 's' }); + AccordionMarkup({ density: "spacious", size: "s" }); export const m = (): TemplateResult => - AccordionMarkup({ density: 'spacious', size: 'm' }); + AccordionMarkup({ density: "spacious", size: "m" }); export const l = (): TemplateResult => - AccordionMarkup({ density: 'spacious', size: 'l' }); + AccordionMarkup({ density: "spacious", size: "l" }); export const xl = (): TemplateResult => - AccordionMarkup({ density: 'spacious', size: 'xl' }); + AccordionMarkup({ density: "spacious", size: "xl" }); diff --git a/packages/accordion/stories/accordion-sizes.stories.ts b/packages/accordion/stories/accordion-sizes.stories.ts index 16289d8c86..dca07bb6cb 100644 --- a/packages/accordion/stories/accordion-sizes.stories.ts +++ b/packages/accordion/stories/accordion-sizes.stories.ts @@ -10,15 +10,15 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { TemplateResult } from '@spectrum-web-components/base'; -import { AccordionMarkup } from './'; +import { TemplateResult } from "@spectrum-web-components/base"; +import { AccordionMarkup } from ".//index.js"; export default { - title: 'Accordion/Sizes', - component: 'sp-accordion', + title: "Accordion/Sizes", + component: "sp-accordion", }; -export const s = (): TemplateResult => AccordionMarkup({ size: 's' }); -export const m = (): TemplateResult => AccordionMarkup({ size: 'm' }); -export const l = (): TemplateResult => AccordionMarkup({ size: 'l' }); -export const xl = (): TemplateResult => AccordionMarkup({ size: 'xl' }); +export const s = (): TemplateResult => AccordionMarkup({ size: "s" }); +export const m = (): TemplateResult => AccordionMarkup({ size: "m" }); +export const l = (): TemplateResult => AccordionMarkup({ size: "l" }); +export const xl = (): TemplateResult => AccordionMarkup({ size: "xl" }); diff --git a/packages/accordion/stories/accordion.stories.ts b/packages/accordion/stories/accordion.stories.ts index cca26199d2..a944baa770 100644 --- a/packages/accordion/stories/accordion.stories.ts +++ b/packages/accordion/stories/accordion.stories.ts @@ -10,52 +10,52 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { TemplateResult } from '@spectrum-web-components/base'; -import { AccordionMarkup } from './'; -import { argTypes } from './args.js'; +import { TemplateResult } from "@spectrum-web-components/base"; +import { AccordionMarkup } from ".//index.js"; +import { argTypes } from "./args.js"; -import '@spectrum-web-components/accordion/sp-accordion.js'; -import '@spectrum-web-components/accordion/sp-accordion-item.js'; -import '@spectrum-web-components/link/sp-link.js'; +import "@spectrum-web-components/accordion/sp-accordion.js"; +import "@spectrum-web-components/accordion/sp-accordion-item.js"; +import "@spectrum-web-components/link/sp-link.js"; export default { - title: 'Accordion', - component: 'sp-accordion', - args: { - open: false, - size: 'm', - density: undefined, - }, - argTypes, + title: "Accordion", + component: "sp-accordion", + args: { + open: false, + size: "m", + density: undefined, + }, + argTypes, }; type Properties = { - allowMultiple?: boolean; - disabled?: boolean; - open?: boolean; - density?: 'compact' | 'spacious' | undefined; - size?: 's' | 'm' | 'l' | 'xl'; + allowMultiple?: boolean; + disabled?: boolean; + open?: boolean; + density?: "compact" | "spacious" | undefined; + size?: "s" | "m" | "l" | "xl"; }; export const Default = (args?: Properties): TemplateResult => - AccordionMarkup(args); + AccordionMarkup(args); export const Open = (args?: Properties): TemplateResult => - AccordionMarkup(args); + AccordionMarkup(args); Open.args = { - open: true, - allowMultiple: false, - disabled: false, + open: true, + allowMultiple: false, + disabled: false, }; export const AllowMultiple = (args?: Properties): TemplateResult => - AccordionMarkup(args); + AccordionMarkup(args); AllowMultiple.args = { - allowMultiple: true, + allowMultiple: true, }; export const Disabled = (args?: Properties): TemplateResult => - AccordionMarkup(args); + AccordionMarkup(args); Disabled.args = { - disabled: true, + disabled: true, }; diff --git a/packages/accordion/stories/template.ts b/packages/accordion/stories/template.ts index f0ffbf98e5..d7ecd29f11 100644 --- a/packages/accordion/stories/template.ts +++ b/packages/accordion/stories/template.ts @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { AccordionMarkup } from './'; +import { AccordionMarkup } from ".//index.js"; export const Template = AccordionMarkup; diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts index 78fbd874cb..0253222010 100644 --- a/packages/action-group/src/ActionGroup.ts +++ b/packages/action-group/src/ActionGroup.ts @@ -11,22 +11,22 @@ governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - PropertyValues, - SizedMixin, - SpectrumElement, - TemplateResult, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + PropertyValues, + SizedMixin, + SpectrumElement, + TemplateResult, +} from "@spectrum-web-components/base"; import { - property, - query, -} from '@spectrum-web-components/base/src/decorators.js'; -import type { ActionButton } from '@spectrum-web-components/action-button'; -import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js'; -import { MutationController } from '@lit-labs/observers/mutation-controller.js'; + property, + query, +} from "@spectrum-web-components/base/src/decorators.js"; +import type { ActionButton } from "@spectrum-web-components/action-button"; +import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js"; +import { MutationController } from "@lit-labs/observers/mutation-controller.js"; -import styles from './action-group.css.js'; +import styles from "./action-group.css.js"; const EMPTY_SELECTION: string[] = []; @@ -39,542 +39,533 @@ const EMPTY_SELECTION: string[] = []; * */ export class ActionGroup extends SizedMixin(SpectrumElement, { - validSizes: ['xs', 's', 'm', 'l', 'xl'], - noDefaultSize: true, + validSizes: ["xs", "s", "m", "l", "xl"], + noDefaultSize: true, }) { - public static override get styles(): CSSResultArray { - return [styles]; - } - /** - * Sets the list of action buttons in the group. - * Clears the element cache in the roving tabindex controller. - */ - public set buttons(buttons: ActionButton[]) { - /* c8 ignore next 1 */ - if (buttons === this.buttons) return; - - this._buttons = buttons; - this.rovingTabindexController.clearElementCache(); - } - - public get buttons(): ActionButton[] { - return this._buttons; - } - - /** - * The internal list of action buttons - */ - public _buttons: ActionButton[] = []; - - /** - * The CSS selector used to identify action buttons within the group. - */ - protected _buttonSelector = 'sp-action-button, sp-action-menu'; - - constructor() { - super(); - - /** - * Initializes the MutationController to observe changes in the child elements. - * Configures the controller to manage buttons when changes are detected. - */ - new MutationController(this, { - config: { - childList: true, - subtree: true, - }, - callback: () => { - this.manageButtons(); - }, - skipInitial: true, - }); - } - - /** - * Initializes the RovingTabindexController to manage focus within the action group. - * Configures the controller to determine the initial focus index and manage focusable elements. - */ - rovingTabindexController = new RovingTabindexController( - this, - { - /** - * Determines the initial focus index within the action group. - * Finds the first selected and enabled button, or the first enabled button if none are selected. - */ - focusInIndex: (elements: ActionButton[]) => { - let firstEnabledIndex = -1; - const firstSelectedIndex = elements.findIndex((el, index) => { - if (!elements[firstEnabledIndex] && !el.disabled) { - firstEnabledIndex = index; - } - - return el.selected && !el.disabled; - }); - - return elements[firstSelectedIndex] - ? firstSelectedIndex - : firstEnabledIndex; - }, - - /** - * Retrieves the list of action buttons within the group. - */ - elements: () => this.buttons, - isFocusableElement: (el: ActionButton) => !el.disabled, - } - ); - - /** - * When true, the action group is styled in a compact form. - */ - @property({ type: Boolean, reflect: true }) - public compact = false; - - /** - * When true, the action group is styled with emphasis. - */ - @property({ type: Boolean, reflect: true }) - public emphasized = false; - - /** - * When true, the action group items are justified to take up the full width. - */ - @property({ type: Boolean, reflect: true }) - public justified = false; - - /** - * The label for the action group. - */ - @property({ type: String }) - public label = ''; - - /** - * When true, the action group is styled with a quieter appearance. - */ - @property({ type: Boolean, reflect: true }) - public quiet = false; - - /** - * Defines the selection mode for the action group. - * Can be 'single' for single selection or 'multiple' for multiple selections. - */ - @property({ type: String }) - public selects: undefined | 'single' | 'multiple'; - - /** - * The static color variant to use for the action group. - * Can be 'white' or 'black'. - */ - @property({ reflect: true, attribute: 'static-color' }) - public staticColor?: 'white' | 'black'; - - /** - * When true, the action group is displayed vertically. - */ - @property({ type: Boolean, reflect: true }) - public vertical = false; - - /** - * The internal list of selected items. - */ - private _selected: string[] = EMPTY_SELECTION; - - /** - * The list of selected items. - */ - set selected(selected: string[]) { - this.requestUpdate('selected', this._selected); - this._selected = selected; - this.updateComplete.then(() => { - this.applySelects(); - this.manageChildren(); - }); - } - - @property({ type: Array }) - get selected(): string[] { - return this._selected; - } - - @query('slot') - slotElement!: HTMLSlotElement; - - /** - * Dispatches a 'change' event to notify listeners of the selection change. - * If the event is canceled, the selection state is reverted. - */ - private dispatchChange(old: string[]): void { - const applyDefault = this.dispatchEvent( - new Event('change', { - bubbles: true, - composed: true, - cancelable: true, - }) - ); - - if (!applyDefault) { - this.setSelected(old); - this.buttons.map((button) => { - button.selected = this.selected.includes(button.value); - }); - } - } - - /** - * Sets the selected items and optionally announces the change. - * If the selection is the same as the current selection, no action is taken. - * If announce is true, a 'change' event is dispatched. - */ - private setSelected(selected: string[], announce?: boolean): void { - /* c8 ignore next 1 */ - if (selected === this.selected) return; - - const old = this.selected; - - this.requestUpdate('selected', old); - this._selected = selected; - - if (!announce) return; - - this.dispatchChange(old); - } - - /** - * Sets focus on the action group using the roving tabindex controller. - */ - public override focus(options?: FocusOptions): void { - this.rovingTabindexController.focus(options); - } - - /** - * Deselects all selected buttons in the action group. - * Updates the selected state and tabindex of each button. - */ - private deselectSelectedButtons(): void { - this.buttons.forEach((button) => { - if (!button.selected) return; - - button.selected = false; - button.tabIndex = -1; - button.setAttribute( - this.selects ? 'aria-checked' : /* c8 ignore */ 'aria-pressed', - 'false' - ); - }); - } - - /** - * Handles the change event for an action button. - * Stops propagation and prevents the default action. - */ - private handleActionButtonChange(event: Event): void { - event.stopPropagation(); - event.preventDefault(); - } - - /** - * Handles the click event on an action button. - * Updates the selection state based on the selection mode (single or multiple). - */ - private handleClick(event: Event): void { - const target = event.target as ActionButton; - - if (typeof target.value === 'undefined') { - return; - } - - switch (this.selects) { - case 'single': { - // Deselect all buttons and select the clicked button - this.deselectSelectedButtons(); - target.selected = true; - target.tabIndex = 0; - target.setAttribute('aria-checked', 'true'); - this.setSelected([target.value], true); - break; - } - case 'multiple': { - // Toggle the selected state of the clicked button - const selected = [...this.selected]; - - target.selected = !target.selected; - target.setAttribute( - 'aria-checked', - target.selected ? 'true' : 'false' - ); - - if (target.selected) { - selected.push(target.value); - } else { - selected.splice(this.selected.indexOf(target.value), 1); - } - - this.setSelected(selected, true); - - // Update tabindex for all buttons - this.buttons.forEach((button) => { - button.tabIndex = -1; - }); - - target.tabIndex = 0; - - break; - } - default: - break; - } - } - - /** - * Applies the selection state to the action buttons. - * Waits for the manageSelects method to complete. - */ - private async applySelects(): Promise { - await this.manageSelects(true); - } - - /** - * Manages the selection state of the action buttons. - * Updates the role and aria attributes based on the selection mode. - */ - private async manageSelects(applied?: boolean): Promise { - if (!this.buttons.length) { - return; - } - - const options = this.buttons; - - switch (this.selects) { - case 'single': { - // Single selection mode, behaves as a radio group - this.setAttribute('role', 'radiogroup'); - const selections: ActionButton[] = []; - const updates = options.map(async (option) => { - await option.updateComplete; - option.setAttribute('role', 'radio'); - option.setAttribute( - 'aria-checked', - option.selected ? 'true' : 'false' - ); - - if (option.selected) { - selections.push(option); - } - }); - - if (applied) break; - - await Promise.all(updates); - - const selected = selections.map((button) => { - return button.value; - }); - - this.setSelected(selected || EMPTY_SELECTION); - break; - } - case 'multiple': { - // Multiple selection mode, remove role="radiogroup" if present - if (this.getAttribute('role') === 'radiogroup') { - this.removeAttribute('role'); - } - - const selection: string[] = []; - const selections: ActionButton[] = []; - const updates = options.map(async (option) => { - await option.updateComplete; - option.setAttribute('role', 'checkbox'); - option.setAttribute( - 'aria-checked', - option.selected ? 'true' : 'false' - ); - - if (option.selected) { - selection.push(option.value); - selections.push(option); - } - }); - - if (applied) break; - - await Promise.all(updates); - const selected = !!selection.length - ? selection - : EMPTY_SELECTION; - - this.setSelected(selected); - break; - } - default: - // Default behavior when user defines .selected - if (this.selected.length) { - const selections: ActionButton[] = []; - const updates = options.map(async (option) => { - await option.updateComplete; - option.setAttribute('role', 'button'); - - if (option.selected) { - option.setAttribute('aria-pressed', 'true'); - selections.push(option); - } else { - option.removeAttribute('aria-pressed'); - } - }); - - if (applied) break; - - await Promise.all(updates); - - this.setSelected( - selections.map((button) => { - return button.value; - }) - ); - } else { - // Set role to 'button' for all options - this.buttons.forEach((option) => { - option.setAttribute('role', 'button'); - }); - break; - } - } - - // When no other role is defined, use role="toolbar", which is appropriate with roving tabindex. - if (!this.hasAttribute('role')) { - this.setAttribute('role', 'toolbar'); - } - } - - protected override render(): TemplateResult { - return html` - - `; - } - - protected override firstUpdated(changes: PropertyValues): void { - super.firstUpdated(changes); - this.addEventListener('click', this.handleClick); - } - - protected override updated(changes: PropertyValues): void { - super.updated(changes); - - if (changes.has('selects')) { - this.manageSelects(); - this.manageChildren(); - - if (!!this.selects) { - this.shadowRoot.addEventListener( - 'change', - this.handleActionButtonChange - ); - } else { - this.shadowRoot.removeEventListener( - 'change', - this.handleActionButtonChange - ); - } - } - - if ( - changes.has('quiet') || - changes.has('emphasized') || - changes.has('size') || - changes.has('staticColor') - ) { - this.manageChildren(changes); - } - - // Update `aria-label` when `label` available or not first `updated` - if ( - changes.has('label') && - (this.label || typeof changes.get('label') !== 'undefined') - ) { - if (this.label.length) { - this.setAttribute('aria-label', this.label); - } else { - this.removeAttribute('aria-label'); - } - } - } - - /** - * Updates the properties of the action buttons based on the current state of the action group. - * Applies changes to quiet, emphasized, staticColor, selected, and size properties. - */ - private manageChildren(changes?: PropertyValues): void { - this.buttons.forEach((button) => { - if (this.quiet || changes?.get('quiet')) { - button.quiet = this.quiet; - } - - if (this.emphasized || changes?.get('emphasized')) { - button.emphasized = this.emphasized; - } - - if (this.staticColor || changes?.get('staticColor')) { - button.staticColor = this.staticColor; - } - - if (this.selects || !this.hasManaged) { - button.selected = this.selected.includes(button.value); - } - - if ( - this.size && - (this.size !== 'm' || - typeof changes?.get('size') !== 'undefined') - ) { - button.size = this.size; - } - }); - } - - // Indicates whether the action buttons have been managed. - private hasManaged = false; - - /** - * Manages the action buttons within the group. - * Updates the internal list of buttons and applies necessary properties. - */ - private manageButtons = (): void => { - if (!this.slotElement) { - return; - } - - const assignedElements = this.slotElement.assignedElements({ - flatten: true, - }); - const buttons = assignedElements.reduce((acc: unknown[], el) => { - if (el.matches(this._buttonSelector)) { - acc.push(el); - } else { - const buttonDescendents = Array.from( - el.querySelectorAll(`:scope > ${this._buttonSelector}`) - ); - - acc.push(...buttonDescendents); - } - - return acc; - }, []); - - this.buttons = buttons as ActionButton[]; - - if (this.selects || !this.hasManaged) { - // Merge selected buttons similar to element behavior + const currentlySelectedButtons: string[] = []; + + this.buttons.forEach((button: ActionButton) => { + if (button.selected) { + currentlySelectedButtons.push(button.value); + } + }); + this.setSelected(this.selected.concat(currentlySelectedButtons)); + } + + this.manageChildren(); + this.manageSelects(); + this.hasManaged = true; + }; } diff --git a/packages/action-group/stories/action-group-tooltip.stories.ts b/packages/action-group/stories/action-group-tooltip.stories.ts index 5697998ff9..605b6354fa 100644 --- a/packages/action-group/stories/action-group-tooltip.stories.ts +++ b/packages/action-group/stories/action-group-tooltip.stories.ts @@ -11,404 +11,388 @@ governing permissions and limitations under the License. */ import { - html, - nothing, - SpectrumElement, - TemplateResult, -} from '@spectrum-web-components/base'; -import { state } from '@spectrum-web-components/base/src/decorators.js'; -import { spreadProps } from '../../../test/lit-helpers.js'; + html, + nothing, + SpectrumElement, + TemplateResult, +} from "@spectrum-web-components/base"; +import { state } from "@spectrum-web-components/base/src/decorators.js"; +import { spreadProps } from "../../../test/lit-helpers.js"; -import '@spectrum-web-components/action-group/sp-action-group.js'; -import '@spectrum-web-components/action-button/sp-action-button.js'; -import '@spectrum-web-components/overlay/overlay-trigger.js'; -import '@spectrum-web-components/tooltip/sp-tooltip.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js'; -import { ActionGroup } from '@spectrum-web-components/action-group/src/ActionGroup.js'; +import "@spectrum-web-components/action-group/sp-action-group.js"; +import "@spectrum-web-components/action-button/sp-action-button.js"; +import "@spectrum-web-components/overlay/overlay-trigger.js"; +import "@spectrum-web-components/tooltip/sp-tooltip.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js"; +import { ActionGroup } from "@spectrum-web-components/action-group/src/ActionGroup.js"; export default { - title: 'Action Group/Tooltips', - component: 'sp-action-group', - args: { - compact: false, - emphasized: false, - justified: false, - quiet: false, - vertical: false, - selects: 'none', - size: 'm', - }, - argTypes: { - compact: { - name: 'compact', - description: - 'Visually joins the buttons together to clarify their relationship to one another.', - type: { name: 'boolean', required: false }, - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - emphasized: { - name: 'emphasized', - type: { name: 'boolean', required: false }, - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - justified: { - name: 'justified', - description: - 'Aligns the action group items to use all the available space on that line.', - type: { name: 'boolean', required: false }, - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - quiet: { - name: 'quiet', - type: { name: 'boolean', required: false }, - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - vertical: { - name: 'vertical', - description: 'Changes the orientation of the action group.', - type: { name: 'boolean', required: false }, - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - selects: { - name: 'selects', - description: - 'Whether the elements selects its children and how many it can select at a time.', - table: { - defaultValue: { summary: '' }, - }, - options: ['none', 'single', 'multiple'], - }, - size: { - name: 'size', - description: 'The size at which to display the action group.', - type: { name: 'string', required: true }, - table: { - type: { summary: '"s" | "m" | "l" | "xl"' }, - defaultValue: { summary: 'm' }, - }, - control: { - type: 'select', - options: ['s', 'm', 'l', 'xl'], - }, - }, - }, + title: "Action Group/Tooltips", + component: "sp-action-group", + args: { + compact: false, + emphasized: false, + justified: false, + quiet: false, + vertical: false, + selects: "none", + size: "m", + }, + argTypes: { + compact: { + name: "compact", + description: + "Visually joins the buttons together to clarify their relationship to one another.", + type: { name: "boolean", required: false }, + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + emphasized: { + name: "emphasized", + type: { name: "boolean", required: false }, + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + justified: { + name: "justified", + description: + "Aligns the action group items to use all the available space on that line.", + type: { name: "boolean", required: false }, + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + quiet: { + name: "quiet", + type: { name: "boolean", required: false }, + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + vertical: { + name: "vertical", + description: "Changes the orientation of the action group.", + type: { name: "boolean", required: false }, + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + selects: { + name: "selects", + description: + "Whether the elements selects its children and how many it can select at a time.", + table: { + defaultValue: { summary: "" }, + }, + options: ["none", "single", "multiple"], + }, + size: { + name: "size", + description: "The size at which to display the action group.", + type: { name: "string", required: true }, + table: { + type: { summary: '"s" | "m" | "l" | "xl"' }, + defaultValue: { summary: "m" }, + }, + control: { + type: "select", + options: ["s", "m", "l", "xl"], + }, + }, + }, }; interface Properties { - compact?: boolean; - emphasized?: boolean; - justified?: boolean; - quiet?: boolean; - vertical?: boolean; - selects?: 'none' | 'single' | 'multiple'; - size?: 's' | 'm' | 'l' | 'xl'; - [prop: string]: unknown; + compact?: boolean; + emphasized?: boolean; + justified?: boolean; + quiet?: boolean; + vertical?: boolean; + selects?: "none" | "single" | "multiple"; + size?: "s" | "m" | "l" | "xl"; + [prop: string]: unknown; } const template = (args: Properties): TemplateResult => { - requestAnimationFrame(() => { - const group = document.querySelector('sp-action-group') as ActionGroup; - const selectedDiv = group.nextElementSibling; + requestAnimationFrame(() => { + const group = document.querySelector("sp-action-group") as ActionGroup; + const selectedDiv = group.nextElementSibling; - if (selectedDiv) { - selectedDiv.textContent = `Selected: ${JSON.stringify( - group.selected - )}`; - } - }); + if (selectedDiv) { + selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`; + } + }); - return html` - { - const next = target.nextElementSibling as HTMLDivElement; + return html` + { + const next = target.nextElementSibling as HTMLDivElement; - next.textContent = `Selected: ${JSON.stringify( - target.selected - )}`; - }} - > - - Red - - This is a cool color. - - - - Green - - You wouldn't be wrong. - - - - - Blue - - The sky in spring. - - - Yellow - The sun at noon. - - - ${!!args.selects - ? html` -
Selected:
- ` - : nothing} - `; + next.textContent = `Selected: ${JSON.stringify(target.selected)}`; + }} + > + + Red + This is a cool color. + + + Green + You wouldn't be wrong. + + + + Blue + + The sky in spring. + + + Yellow + The sun at noon. + + + ${args.selects ? html`
Selected:
` : nothing} + `; }; export const selectsSingle = (args: Properties): TemplateResult => - template(args); + template(args); selectsSingle.args = { - compact: true, - emphasized: true, - selects: 'single', + compact: true, + emphasized: true, + selects: "single", }; export const selectsMultiple = (args: Properties): TemplateResult => - template(args); + template(args); selectsMultiple.args = { - compact: true, - emphasized: true, - selects: 'multiple', + compact: true, + emphasized: true, + selects: "multiple", }; export const justified = (args: Properties): TemplateResult => template(args); justified.args = { - compact: true, - emphasized: true, - justified: true, - selects: undefined, + compact: true, + emphasized: true, + justified: true, + selects: undefined, }; export const vertical = (args: Properties): TemplateResult => template(args); vertical.args = { - compact: true, - emphasized: true, - vertical: true, - selects: undefined, + compact: true, + emphasized: true, + vertical: true, + selects: undefined, }; class ActionGroupTooltips extends SpectrumElement { - @state() - alignment = 'left'; + @state() + alignment = "left"; - protected override render(): TemplateResult { - return html` - - { - this.alignment = 'left'; - }} - > - - - - - Left align - - - { - this.alignment = 'center'; - }} - > - - - - - Center align - - - { - this.alignment = 'right'; - }} - > - - - - - Right align - - - - `; - } + protected override render(): TemplateResult { + return html` + + { + this.alignment = "left"; + }} + > + + + + Left align + + { + this.alignment = "center"; + }} + > + + + + + Center align + + + { + this.alignment = "right"; + }} + > + + + + Right align + + + `; + } } -customElements.define('action-group-tooltips', ActionGroupTooltips); +customElements.define("action-group-tooltips", ActionGroupTooltips); export const controlled = (): TemplateResult => html` - + `; diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts index fb46760d20..fe2d018576 100644 --- a/packages/action-group/test/action-group.test.ts +++ b/packages/action-group/test/action-group.test.ts @@ -11,1575 +11,1514 @@ governing permissions and limitations under the License. */ import { - aTimeout, - elementUpdated, - expect, - fixture, - html, - nextFrame, - oneEvent, - waitUntil, -} from '@open-wc/testing'; - -import { ActionButton } from '@spectrum-web-components/action-button'; -import { MenuItem } from '@spectrum-web-components/menu'; -import { ActionMenu } from '@spectrum-web-components/action-menu'; -import '@spectrum-web-components/action-button/sp-action-button.js'; -import '@spectrum-web-components/action-menu/sp-action-menu.js'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/picker/sp-picker.js'; + aTimeout, + elementUpdated, + expect, + fixture, + html, + nextFrame, + oneEvent, + waitUntil, +} from "@open-wc/testing"; + +import { ActionButton } from "@spectrum-web-components/action-button"; +import { MenuItem } from "@spectrum-web-components/menu"; +import { ActionMenu } from "@spectrum-web-components/action-menu"; +import "@spectrum-web-components/action-button/sp-action-button.js"; +import "@spectrum-web-components/action-menu/sp-action-menu.js"; +import "@spectrum-web-components/menu/sp-menu.js"; +import "@spectrum-web-components/menu/sp-menu-item.js"; +import "@spectrum-web-components/picker/sp-picker.js"; import { - LitElement, - SpectrumElement, - TemplateResult, -} from '@spectrum-web-components/base'; -import '@spectrum-web-components/overlay/overlay-trigger.js'; -import '@spectrum-web-components/tooltip/sp-tooltip.js'; -import { ActionGroup } from '@spectrum-web-components/action-group'; + LitElement, + SpectrumElement, + TemplateResult, +} from "@spectrum-web-components/base"; +import "@spectrum-web-components/overlay/overlay-trigger.js"; +import "@spectrum-web-components/tooltip/sp-tooltip.js"; +import { ActionGroup } from "@spectrum-web-components/action-group"; import { - arrowDownEvent, - arrowLeftEvent, - arrowRightEvent, - arrowUpEvent, - endEvent, - homeEvent, - testForLitDevWarnings, -} from '../../../test/testing-helpers'; -import { sendKeys } from '@web/test-runner-commands'; -import '@spectrum-web-components/action-group/sp-action-group.js'; -import { controlled } from '../stories/action-group-tooltip.stories.js'; -import { spy } from 'sinon'; -import { sendMouse } from '../../../test/plugins/browser.js'; -import { HasActionMenuAsChild } from '../stories/action-group.stories.js'; -import '../stories/action-group.stories.js'; -import { isWebKit } from '@spectrum-web-components/shared'; -import sinon from 'sinon'; + arrowDownEvent, + arrowLeftEvent, + arrowRightEvent, + arrowUpEvent, + endEvent, + homeEvent, + testForLitDevWarnings, +} from "../../../test/testing-helpers.js"; +import { sendKeys } from "@web/test-runner-commands"; +import "@spectrum-web-components/action-group/sp-action-group.js"; +import { controlled } from "../stories/action-group-tooltip.stories.js"; +import { spy } from "sinon"; +import { sendMouse } from "../../../test/plugins/browser.js"; +import { HasActionMenuAsChild } from "../stories/action-group.stories.js"; +import "../stories/action-group.stories.js"; +import { isWebKit } from "@spectrum-web-components/shared"; +import sinon from "sinon"; class QuietActionGroup extends LitElement { - protected override render(): TemplateResult { - return html` - - - - - `; - } + protected override render(): TemplateResult { + return html` + + + + + `; + } } -customElements.define('quiet-action-group', QuietActionGroup); +customElements.define("quiet-action-group", QuietActionGroup); class EmphasizedActionGroup extends LitElement { - protected override render(): TemplateResult { - return html` - - - - - `; - } + protected override render(): TemplateResult { + return html` + + + + + `; + } } -customElements.define('emphasized-action-group', EmphasizedActionGroup); +customElements.define("emphasized-action-group", EmphasizedActionGroup); async function singleSelectedActionGroup( - selected: string[] + selected: string[], ): Promise { - const el = await fixture(html` - - - First - - -
- Second - - - `); - - return el; + const el = await fixture(html` + + First + +
+ Second + + + `); + + return el; } async function multipleSelectedActionGroup( - selected: string[] + selected: string[], ): Promise { - const el = await fixture(html` - - - First - - - Second - - - `); - - return el; + const el = await fixture(html` + + First + + Second + + + `); + + return el; } -describe('ActionGroup', () => { - it('does not throw an error if slotElement is null', async () => { - // To verify that this test is not evergreen, you can temporarily disable the safeguard - // clause in `manageButtons` by commenting out the following lines: - // if (!this.slotElement) { return; } - - const el = await fixture(html` - - First - Second - - `); - - // Stub the slotElement getter to return null - const slotElementStub = sinon.stub(el, 'slotElement').get(() => null); - - await elementUpdated(el); - - // trigger a slotchange event - while (el.firstChild) { - el.removeChild(el.firstChild); - } - await elementUpdated(el); - expect(el.children.length).to.equal(0); - slotElementStub.restore(); - }); +describe("ActionGroup", () => { + it("does not throw an error if slotElement is null", async () => { + // To verify that this test is not evergreen, you can temporarily disable the safeguard + // clause in `manageButtons` by commenting out the following lines: + // if (!this.slotElement) { return; } - it('loads empty action-group accessibly', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html` + + First + Second + + `); - await elementUpdated(el); + // Stub the slotElement getter to return null + const slotElementStub = sinon.stub(el, "slotElement").get(() => null); - await expect(el).to.be.accessible(); - }); + await elementUpdated(el); - it('loads action-group with action-menu accessibly', async () => { - const el = await fixture( - HasActionMenuAsChild({ label: 'Action Group' }) - ); + // trigger a slotchange event + while (el.firstChild) { + el.removeChild(el.firstChild); + } + await elementUpdated(el); + expect(el.children.length).to.equal(0); + slotElementStub.restore(); + }); - await elementUpdated(el); + it("loads empty action-group accessibly", async () => { + const el = await fixture(html` + + `); - await nextFrame(); - await nextFrame(); - await nextFrame(); - await nextFrame(); + await elementUpdated(el); - await expect(el).to.be.accessible(); - }); + await expect(el).to.be.accessible(); + }); - it('action-group with action-menu manages tabIndex correctly while using keyboard', async () => { - const el = await fixture( - HasActionMenuAsChild({ label: 'Action Group' }) - ); + it("loads action-group with action-menu accessibly", async () => { + const el = await fixture( + HasActionMenuAsChild({ label: "Action Group" }), + ); - await elementUpdated(el); + await elementUpdated(el); - await nextFrame(); - await nextFrame(); - await nextFrame(); - await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); - // press Tab to focus into the action-group - await sendKeys({ press: 'Tab' }); + await expect(el).to.be.accessible(); + }); - await elementUpdated(el); + it("action-group with action-menu manages tabIndex correctly while using keyboard", async () => { + const el = await fixture( + HasActionMenuAsChild({ label: "Action Group" }), + ); - // expect the first button to be focused - expect(document.activeElement?.id).to.equal('first'); + await elementUpdated(el); - // expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using Tab - expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0); - expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1); - expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1); - expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); - // navigate to the action-menu using the arrow keys - await sendKeys({ press: 'ArrowRight' }); - await sendKeys({ press: 'ArrowRight' }); - await sendKeys({ press: 'ArrowRight' }); + // press Tab to focus into the action-group + await sendKeys({ press: "Tab" }); - await elementUpdated(el); + await elementUpdated(el); - // expect the action-menu to be focused - expect((el.children[3] as ActionMenu)?.focused).to.be.true; + // expect the first button to be focused + expect(document.activeElement?.id).to.equal("first"); - // press Enter to open the action-menu - await sendKeys({ press: 'Enter' }); + // expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using Tab + expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0); + expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1); + expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1); + expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1); - const opened = oneEvent(el.children[3] as ActionMenu, 'sp-opened'); + // navigate to the action-menu using the arrow keys + await sendKeys({ press: "ArrowRight" }); + await sendKeys({ press: "ArrowRight" }); + await sendKeys({ press: "ArrowRight" }); - await elementUpdated(el.children[3]); - await opened; + await elementUpdated(el); - // expect the first menu item to be focused - const firstMenuItem = el.querySelector('#first-menu-item') as MenuItem; + // expect the action-menu to be focused + expect((el.children[3] as ActionMenu)?.focused).to.be.true; - expect(firstMenuItem?.focused).to.be.true; + // press Enter to open the action-menu + await sendKeys({ press: "Enter" }); - // navigate to the fourth menu item using the arrow keys - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'ArrowDown' }); + const opened = oneEvent(el.children[3] as ActionMenu, "sp-opened"); - // press Enter to select the fourth menu item - await sendKeys({ press: 'Enter' }); + await elementUpdated(el.children[3]); + await opened; - await elementUpdated(el.children[3]); + // expect the first menu item to be focused + const firstMenuItem = el.querySelector("#first-menu-item") as MenuItem; - await nextFrame(); - await nextFrame(); - await nextFrame(); - await nextFrame(); + expect(firstMenuItem?.focused).to.be.true; + + // navigate to the fourth menu item using the arrow keys + await sendKeys({ press: "ArrowDown" }); + await sendKeys({ press: "ArrowDown" }); + await sendKeys({ press: "ArrowDown" }); - // expect the second submenu item to be focused - const secondSubMenuItem = el.querySelector( - '#second-sub-menu-item' - ) as MenuItem; + // press Enter to select the fourth menu item + await sendKeys({ press: "Enter" }); - expect(secondSubMenuItem?.focused).to.be.true; + await elementUpdated(el.children[3]); - // press Enter to select the second submenu item - await sendKeys({ press: 'Enter' }); + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); - const closed = oneEvent(el.children[3] as ActionMenu, 'sp-closed'); + // expect the second submenu item to be focused + const secondSubMenuItem = el.querySelector( + "#second-sub-menu-item", + ) as MenuItem; - await elementUpdated(el.children[3]); + expect(secondSubMenuItem?.focused).to.be.true; - await closed; + // press Enter to select the second submenu item + await sendKeys({ press: "Enter" }); - // expect the action-menu to be focused - expect((el.children[3] as ActionMenu)?.focused).to.be.true; - }); + const closed = oneEvent(el.children[3] as ActionMenu, "sp-closed"); - it('action-group with action-menu manages tabIndex correctly while using mouse', async () => { - const el = await fixture( - HasActionMenuAsChild({ label: 'Action Group' }) - ); + await elementUpdated(el.children[3]); - await elementUpdated(el); + await closed; - await aTimeout(500); - - // get the bounding box of the first button - const firstButton = el.querySelector('#first') as ActionButton; - const rect = firstButton.getBoundingClientRect(); - - sendMouse({ - steps: [ - { - position: [ - rect.left + rect.width / 2, - rect.top + rect.height / 2, - ], - type: 'click', - }, - ], - }); - - await elementUpdated(el); - await aTimeout(500); - - // expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using mouse - expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0); - expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1); - expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1); - expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1); - - // click outside the action-group and it should loose focus and update the tabIndexes - sendMouse({ - steps: [ - { - position: [0, 0], - type: 'click', - }, - ], - }); - - await elementUpdated(el); - await aTimeout(500); - - // expect the first button to have a tabIndex of 0 and everything else to have a tabIndex of -1 - expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0); - expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1); - expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1); - expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1); - - // get the bounding box of the action-menu - const actionMenu = el.querySelector('#action-menu') as ActionMenu; - const actionMenuRect = actionMenu.getBoundingClientRect(); - - sendMouse({ - steps: [ - { - position: [ - actionMenuRect.left + actionMenuRect.width / 2, - actionMenuRect.top + actionMenuRect.height / 2, - ], - type: 'click', - }, - ], - }); - - await elementUpdated(el); - - const opened = oneEvent(el.children[3] as ActionMenu, 'sp-opened'); - - await opened; - - // use keyboard to navigate to the second menu item and select it - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Enter' }); - - const closed = oneEvent(el.children[3] as ActionMenu, 'sp-closed'); - - await closed; - - if (!isWebKit()) { - sendMouse({ - steps: [ - { - position: [0, 0], - type: 'click', - }, - ], - }); - } - - await aTimeout(500); - - expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0); - expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1); - expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1); - expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1); - }); - - testForLitDevWarnings( - async () => - await fixture(html` - - First - Second - Third - - `) - ); - it('loads default action-group accessibly', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - expect(el.getAttribute('aria-label')).to.equal('Default Group'); - expect(el.getAttribute('role')).to.equal('toolbar'); - expect(el.children[0].getAttribute('role')).to.equal('button'); - }); - it('applies `static-color` attribute to its children', async () => { - const el = await fixture(html` - - First - Second - - `); - const firstButton = el.querySelector('#first') as ActionButton; - const secondButton = el.querySelector('#second') as ActionButton; - - await elementUpdated(el); - - expect(firstButton.staticColor).to.equal('white'); - expect(secondButton.staticColor).to.equal('white'); - - el.staticColor = undefined; - - await elementUpdated(el); - - expect(firstButton.staticColor).to.be.undefined; - expect(secondButton.staticColor).to.be.undefined; - }); - it('manages "label"', async () => { - const testLabel = 'Testable action group'; - const el = await fixture(html` - - First - Second - - `); + // expect the action-menu to be focused + expect((el.children[3] as ActionMenu)?.focused).to.be.true; + }); - expect(el.getAttribute('aria-label')).to.equal(testLabel); - - el.label = ''; - - await elementUpdated(el); - - expect(el.hasAttribute('aria-label')).to.be.false; - }); - it('applies `quiet` attribute to its children', async () => { - const el = await fixture(html` - - First - Second - - `); - const firstButton = el.querySelector('#first') as ActionButton; - const secondButton = el.querySelector('#second') as ActionButton; - - await elementUpdated(el); - - expect(firstButton.hasAttribute('quiet')).to.be.true; - expect(firstButton.quiet).to.be.true; - expect(secondButton.hasAttribute('quiet')).to.be.true; - expect(secondButton.quiet).to.be.true; - }); - it('applies `quiet` attribute to its slotted children', async () => { - const el = await fixture(html` - - - First - - - Second - - - `); - const firstButton = el.querySelector('#first') as ActionButton; - const secondButton = el.querySelector('#second') as ActionButton; - - await elementUpdated(el); - - expect(firstButton.hasAttribute('quiet')).to.be.true; - expect(firstButton.quiet).to.be.true; - expect(secondButton.hasAttribute('quiet')).to.be.true; - expect(secondButton.quiet).to.be.true; - }); - it('applies `emphasized` attribute to its slotted children', async () => { - const el = await fixture(html` - - - First - - - Second - - - `); - const firstButton = el.querySelector('#first') as ActionButton; - const secondButton = el.querySelector('#second') as ActionButton; - - await elementUpdated(el); - - expect(firstButton.hasAttribute('emphasized')).to.be.true; - expect(firstButton.emphasized).to.be.true; - expect(secondButton.hasAttribute('emphasized')).to.be.true; - expect(secondButton.emphasized).to.be.true; - }); - it('applies `quiet` attribute to slotted children with overlays', async () => { - const el = await fixture(html` - - - - First - - - - - Second - - - - `); - const firstButton = el.querySelector('#first') as ActionButton; - const secondButton = el.querySelector('#second') as ActionButton; - - await elementUpdated(el); - - expect(firstButton.hasAttribute('quiet')).to.be.true; - expect(firstButton.quiet).to.be.true; - expect(secondButton.hasAttribute('quiet')).to.be.true; - expect(secondButton.quiet).to.be.true; - }); - it('applies `emphasized` attribute to slotted children with overlays', async () => { - const el = await fixture(html` - - - - First - - - - - Second - - - - `); - const firstButton = el.querySelector('#first') as ActionButton; - const secondButton = el.querySelector('#second') as ActionButton; - - await elementUpdated(el); - - expect(firstButton.hasAttribute('emphasized')).to.be.true; - expect(firstButton.emphasized).to.be.true; - expect(secondButton.hasAttribute('emphasized')).to.be.true; - expect(secondButton.emphasized).to.be.true; - }); - it('loads [selects="single"] action-group accessibly', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - expect(el.getAttribute('aria-label')).to.equal('Selects Single Group'); - expect(el.getAttribute('role')).to.equal('radiogroup'); - expect(el.children[0].getAttribute('role')).to.equal('radio'); - }); - it('loads [selects="single"] action-group w/ selection accessibly', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - }); - it('loads [selects="multiple"] action-group accessibly', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - expect(el.getAttribute('aria-label')).to.equal( - 'Selects Multiple Group' - ); - expect(el.getAttribute('role')).to.equal('toolbar'); - expect(el.children[0].getAttribute('role')).to.equal('checkbox'); - }); - it('loads [selects="multiple"] action-group w/ selection accessibly', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - }); - it('sets tab stop when [selects="single"] and the initial button is [disabled]', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - const secondButton = el.querySelector('.second') as ActionButton; + it("action-group with action-menu manages tabIndex correctly while using mouse", async () => { + const el = await fixture( + HasActionMenuAsChild({ label: "Action Group" }), + ); - await elementUpdated(el); + await elementUpdated(el); - expect(secondButton.hasAttribute('tabindex')); - expect(secondButton.getAttribute('tabindex')).to.equal('0'); - }); - it('surfaces [selects="single"] selection', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - - await elementUpdated(el); - - expect(el.selected, '"Third" selected').to.deep.equal(['Third']); - }); - it('manages [selects="single"] selection through multiple slots', async () => { - const test = await fixture(html` -
- First - Second - Third -
- `); - - const firstItem = test.querySelector( - 'sp-action-button' - ) as ActionButton; - const thirdItem = test.querySelector( - 'sp-action-button[selected]' - ) as ActionButton; - - const shadowRoot = test.attachShadow({ mode: 'open' }); - - shadowRoot.innerHTML = ` + await aTimeout(500); + + // get the bounding box of the first button + const firstButton = el.querySelector("#first") as ActionButton; + const rect = firstButton.getBoundingClientRect(); + + sendMouse({ + steps: [ + { + position: [rect.left + rect.width / 2, rect.top + rect.height / 2], + type: "click", + }, + ], + }); + + await elementUpdated(el); + await aTimeout(500); + + // expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using mouse + expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0); + expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1); + expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1); + expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1); + + // click outside the action-group and it should loose focus and update the tabIndexes + sendMouse({ + steps: [ + { + position: [0, 0], + type: "click", + }, + ], + }); + + await elementUpdated(el); + await aTimeout(500); + + // expect the first button to have a tabIndex of 0 and everything else to have a tabIndex of -1 + expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0); + expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1); + expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1); + expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1); + + // get the bounding box of the action-menu + const actionMenu = el.querySelector("#action-menu") as ActionMenu; + const actionMenuRect = actionMenu.getBoundingClientRect(); + + sendMouse({ + steps: [ + { + position: [ + actionMenuRect.left + actionMenuRect.width / 2, + actionMenuRect.top + actionMenuRect.height / 2, + ], + type: "click", + }, + ], + }); + + await elementUpdated(el); + + const opened = oneEvent(el.children[3] as ActionMenu, "sp-opened"); + + await opened; + + // use keyboard to navigate to the second menu item and select it + await sendKeys({ press: "ArrowDown" }); + await sendKeys({ press: "Enter" }); + + const closed = oneEvent(el.children[3] as ActionMenu, "sp-closed"); + + await closed; + + if (!isWebKit()) { + sendMouse({ + steps: [ + { + position: [0, 0], + type: "click", + }, + ], + }); + } + + await aTimeout(500); + + expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0); + expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1); + expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1); + expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1); + }); + + testForLitDevWarnings( + async () => + await fixture(html` + + First + Second + Third + + `), + ); + it("loads default action-group accessibly", async () => { + const el = await fixture(html` + + First + Second + Third + + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + expect(el.getAttribute("aria-label")).to.equal("Default Group"); + expect(el.getAttribute("role")).to.equal("toolbar"); + expect(el.children[0].getAttribute("role")).to.equal("button"); + }); + it("applies `static-color` attribute to its children", async () => { + const el = await fixture(html` + + First + Second + + `); + const firstButton = el.querySelector("#first") as ActionButton; + const secondButton = el.querySelector("#second") as ActionButton; + + await elementUpdated(el); + + expect(firstButton.staticColor).to.equal("white"); + expect(secondButton.staticColor).to.equal("white"); + + el.staticColor = undefined; + + await elementUpdated(el); + + expect(firstButton.staticColor).to.be.undefined; + expect(secondButton.staticColor).to.be.undefined; + }); + it('manages "label"', async () => { + const testLabel = "Testable action group"; + const el = await fixture(html` + + First + Second + + `); + + expect(el.getAttribute("aria-label")).to.equal(testLabel); + + el.label = ""; + + await elementUpdated(el); + + expect(el.hasAttribute("aria-label")).to.be.false; + }); + it("applies `quiet` attribute to its children", async () => { + const el = await fixture(html` + + First + Second + + `); + const firstButton = el.querySelector("#first") as ActionButton; + const secondButton = el.querySelector("#second") as ActionButton; + + await elementUpdated(el); + + expect(firstButton.hasAttribute("quiet")).to.be.true; + expect(firstButton.quiet).to.be.true; + expect(secondButton.hasAttribute("quiet")).to.be.true; + expect(secondButton.quiet).to.be.true; + }); + it("applies `quiet` attribute to its slotted children", async () => { + const el = await fixture(html` + + First + Second + + `); + const firstButton = el.querySelector("#first") as ActionButton; + const secondButton = el.querySelector("#second") as ActionButton; + + await elementUpdated(el); + + expect(firstButton.hasAttribute("quiet")).to.be.true; + expect(firstButton.quiet).to.be.true; + expect(secondButton.hasAttribute("quiet")).to.be.true; + expect(secondButton.quiet).to.be.true; + }); + it("applies `emphasized` attribute to its slotted children", async () => { + const el = await fixture(html` + + First + Second + + `); + const firstButton = el.querySelector("#first") as ActionButton; + const secondButton = el.querySelector("#second") as ActionButton; + + await elementUpdated(el); + + expect(firstButton.hasAttribute("emphasized")).to.be.true; + expect(firstButton.emphasized).to.be.true; + expect(secondButton.hasAttribute("emphasized")).to.be.true; + expect(secondButton.emphasized).to.be.true; + }); + it("applies `quiet` attribute to slotted children with overlays", async () => { + const el = await fixture(html` + + + First + + + + Second + + + + `); + const firstButton = el.querySelector("#first") as ActionButton; + const secondButton = el.querySelector("#second") as ActionButton; + + await elementUpdated(el); + + expect(firstButton.hasAttribute("quiet")).to.be.true; + expect(firstButton.quiet).to.be.true; + expect(secondButton.hasAttribute("quiet")).to.be.true; + expect(secondButton.quiet).to.be.true; + }); + it("applies `emphasized` attribute to slotted children with overlays", async () => { + const el = await fixture(html` + + + First + + + + Second + + + + `); + const firstButton = el.querySelector("#first") as ActionButton; + const secondButton = el.querySelector("#second") as ActionButton; + + await elementUpdated(el); + + expect(firstButton.hasAttribute("emphasized")).to.be.true; + expect(firstButton.emphasized).to.be.true; + expect(secondButton.hasAttribute("emphasized")).to.be.true; + expect(secondButton.emphasized).to.be.true; + }); + it('loads [selects="single"] action-group accessibly', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + expect(el.getAttribute("aria-label")).to.equal("Selects Single Group"); + expect(el.getAttribute("role")).to.equal("radiogroup"); + expect(el.children[0].getAttribute("role")).to.equal("radio"); + }); + it('loads [selects="single"] action-group w/ selection accessibly', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + }); + it('loads [selects="multiple"] action-group accessibly', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + expect(el.getAttribute("aria-label")).to.equal("Selects Multiple Group"); + expect(el.getAttribute("role")).to.equal("toolbar"); + expect(el.children[0].getAttribute("role")).to.equal("checkbox"); + }); + it('loads [selects="multiple"] action-group w/ selection accessibly', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + }); + it('sets tab stop when [selects="single"] and the initial button is [disabled]', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + const secondButton = el.querySelector(".second") as ActionButton; + + await elementUpdated(el); + + expect(secondButton.hasAttribute("tabindex")); + expect(secondButton.getAttribute("tabindex")).to.equal("0"); + }); + it('surfaces [selects="single"] selection', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + + await elementUpdated(el); + + expect(el.selected, '"Third" selected').to.deep.equal(["Third"]); + }); + it('manages [selects="single"] selection through multiple slots', async () => { + const test = await fixture(html` +
+ First + Second + Third +
+ `); + + const firstItem = test.querySelector("sp-action-button") as ActionButton; + const thirdItem = test.querySelector( + "sp-action-button[selected]", + ) as ActionButton; + + const shadowRoot = test.attachShadow({ mode: "open" }); + + shadowRoot.innerHTML = ` `; - const el = shadowRoot.querySelector('sp-action-group') as ActionGroup; - - await elementUpdated(el); - - expect(el.selected, '"Third" selected').to.deep.equal(['Third']); - expect(firstItem.selected).to.be.false; - expect(thirdItem.selected).to.be.true; - - firstItem.click(); - await elementUpdated(el); - - expect(el.selected, '"First" selected').to.deep.equal(['First']); - expect(firstItem.selected).to.be.true; - expect(thirdItem.selected).to.be.false; - }); - it('surfaces [selects="multiple"] selection', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - - await elementUpdated(el); - - expect(el.selected, '"Second" and "Third" selected').to.deep.equal([ - 'Second', - 'Third', - ]); - }); - it('does not select without [selects]', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - const thirdElement = el.querySelector('.third') as ActionButton; - - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - - thirdElement.click(); - - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - }); - it('selects via `click` while [selects="single"]', async () => { - const el = await fixture(html` - - First - - Second - - - Third - - - `); - const thirdElement = el.querySelector('.third') as ActionButton; - - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - expect(el.selected.includes('second')); - - thirdElement.click(); - - await elementUpdated(el); - - expect(thirdElement.selected, 'third child selected').to.be.true; - - await waitUntil( - () => el.selected.length === 1 && el.selected.includes('third'), - 'Updates value of `selected`' - ); - }); - it('selects via `click` while [selects="multiple"] selection', async () => { - const el = await fixture(html` - - - First - - Second - Third - - `); - const firstElement = el.querySelector('.first') as ActionButton; - const secondElement = el.querySelector('.second') as ActionButton; - const thirdElement = el.querySelector('.third') as ActionButton; - - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - expect(el.selected.includes('First')); - - firstElement.click(); - secondElement.click(); - thirdElement.click(); - - await elementUpdated(el); - - expect(secondElement.selected, 'second child selected').to.be.true; - expect(thirdElement.selected, 'third child selected').to.be.true; - - await waitUntil( - () => - el.selected.length === 2 && - el.selected.includes('Second') && - el.selected.includes('Third'), - 'Updates value of `selected`' - ); - }); - it('consumes descendant `change` events when `[selects]`', async () => { - const changeSpy = spy(); - const el = await fixture(html` - changeSpy()} - label="Selects Single Group" - selects="single" - > - First - - Second - - - Third - - - `); - const thirdElement = el.querySelector('.third') as ActionButton; - - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - expect(el.selected.includes('second')); - expect(changeSpy.callCount).to.equal(0); - - thirdElement.click(); - - await elementUpdated(el); - - expect(thirdElement.selected, 'third child selected').to.be.true; - expect(changeSpy.callCount).to.equal(1); - - await waitUntil( - () => el.selected.length === 1 && el.selected.includes('third'), - 'Updates value of `selected`' - ); - }); - it('does not respond to clicks on itself', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - - await elementUpdated(el); - expect(el.selected.length).to.equal(0); - - el.click(); - - await elementUpdated(el); - - expect(el.selected.length).to.equal(0); - }); - it('selection can be prevented', async () => { - const el = await fixture(html` - { - event.preventDefault(); - }} - > - First - Second - Third - - `); - const thirdElement = el.querySelector('.third') as ActionButton; - - await elementUpdated(el); - expect(el.selected.length).to.equal(0); - - thirdElement.click(); - - await elementUpdated(el); - - expect(thirdElement.selected, 'third child not selected').to.be.false; - expect(el.selected.length).to.equal(0); - }); - - it('selects user-passed value while [selects="single"]', async () => { - const el = await singleSelectedActionGroup(['first']); - - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - - const firstButton = el.querySelector('.first') as ActionButton; - const secondButton = el.querySelector('.second') as ActionButton; - - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button not selected').to.be.false; - - secondButton.click(); - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - expect(firstButton.selected, 'first button not selected').to.be.false; - expect(secondButton.selected, 'second button selected').to.be.true; - }); - - it('selects can be updated while [selects="single"]', async () => { - const el = await singleSelectedActionGroup(['first']); - - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - - const firstButton = el.querySelector('.first') as ActionButton; - const secondButton = el.querySelector('.second') as ActionButton; - - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button not selected').to.be.false; - - el.selected = ['second']; - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - expect(firstButton.selected, 'first button not selected').to.be.false; - expect(secondButton.selected, 'second button selected').to.be.true; - }); - - it('does not allow interaction with child content to interrupt the selection mechanism', async () => { - const el = await singleSelectedActionGroup([]); - - await elementUpdated(el); - expect(el.selected.length).to.equal(0); - - const firstButton = el.querySelector('.first') as ActionButton; - const secondButton = el.querySelector('.second') as ActionButton; - const icon = secondButton.querySelector('[slot=icon]') as HTMLElement; - - expect(firstButton.selected, 'first button selected').to.be.false; - expect(secondButton.selected, 'second button not selected').to.be.false; - - secondButton.click(); - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - expect(el.selected).to.deep.equal(['second']); - expect(firstButton.selected, 'first button not selected').to.be.false; - expect(secondButton.selected, 'second button selected').to.be.true; - - firstButton.click(); - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - expect(el.selected).to.deep.equal(['first']); - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button not selected').to.be.false; - - const rect = icon.getBoundingClientRect(); - - await sendMouse({ - steps: [ - { - type: 'click', - position: [ - rect.left + rect.width / 2, - rect.top + rect.height / 2, - ], - }, - ], - }); - icon.click(); - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - expect(el.selected).to.deep.equal(['second']); - expect(firstButton.selected, 'first button not selected').to.be.false; - expect(secondButton.selected, 'second button selected').to.be.true; - }); - - it('selects user-passed value while [selects="multiple"]', async () => { - const el = await fixture(html` - - - First - - - Second - - - Third - - - `); - - await elementUpdated(el); - - await Promise.all(el.buttons.map((button) => elementUpdated(button))); - - const firstButton = el.querySelector('.first') as ActionButton; - const secondButton = el.querySelector('.second') as ActionButton; - const thirdButton = el.querySelector('.third') as ActionButton; - - expect(el.selected.length).to.equal(2); - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button selected').to.be.true; - expect(thirdButton.selected, 'third button not selected').to.be.false; - - thirdButton.click(); - await elementUpdated(el); - - expect(el.selected.length).to.equal(3); - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button selected').to.be.true; - expect(thirdButton.selected, 'third button selected').to.be.true; - - firstButton.click(); - await elementUpdated(el); - - expect(el.selected.length).to.equal(2); - expect(firstButton.selected, 'first button not selected').to.be.false; - expect(secondButton.selected, 'second button selected').to.be.true; - expect(thirdButton.selected, 'third button selected').to.be.true; - }); - - it('selects can be updated while [selects="multiple"]', async () => { - const el = await fixture(html` - - - First - - - Second - - - Third - - - `); - - await elementUpdated(el); - - await Promise.all(el.buttons.map((button) => elementUpdated(button))); - - const firstButton = el.querySelector('.first') as ActionButton; - const secondButton = el.querySelector('.second') as ActionButton; - const thirdButton = el.querySelector('.third') as ActionButton; - - expect(el.selected.length).to.equal(2); - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button selected').to.be.true; - expect(thirdButton.selected, 'third button not selected').to.be.false; - - el.selected = ['first', 'second', 'third']; - await elementUpdated(el); - - expect(el.selected.length).to.equal(3); - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button selected').to.be.true; - expect(thirdButton.selected, 'third button selected').to.be.true; - - el.selected = ['second', 'third']; - await elementUpdated(el); - - expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2); - expect(firstButton.selected, 'first button not selected').to.be.false; - expect(secondButton.selected, 'second button selected').to.be.true; - expect(thirdButton.selected, 'third button selected').to.be.true; - }); - - it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality', async () => { - const el = await singleSelectedActionGroup(['first', 'second']); - - await elementUpdated(el); - expect(el.selected.length).to.equal(2); - - const firstButton = el.querySelector('.first') as ActionButton; - const secondButton = el.querySelector('.second') as ActionButton; - - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button selected').to.be.true; - - secondButton.click(); - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - expect(firstButton.selected, 'first button selected').to.be.false; - expect(secondButton.selected, 'second button selected').to.be.true; - }); - - it('Clicking button event should bubble up from inner label to outer button element', async () => { - const el = await fixture(html` - - - First - - - Second - - - `); - - await elementUpdated(el); - expect(el.selected.length).to.equal(2); - - const firstButtonEl = el.querySelector('.first') as ActionButton; - const firstSpanEl = firstButtonEl.shadowRoot.querySelector( - '#label' - ) as HTMLSpanElement; - const secondButtonEl = el.querySelector('.second') as ActionButton; - - expect(firstButtonEl.selected, 'first button selected').to.be.true; - expect(secondButtonEl.selected, 'second button selected').to.be.true; - - firstSpanEl.click(); // clicking inner span bubbles up and fires outer button click - await elementUpdated(el); - - expect(firstButtonEl.selected, 'first button selected').to.be.false; - expect(secondButtonEl.selected, 'second button selected').to.be.true; - - firstButtonEl.click(); // clicking outer action-button element fires own click event - await elementUpdated(el); - - expect(firstButtonEl.selected, 'first button selected').to.be.true; - expect(secondButtonEl.selected, 'second button selected').to.be.true; - }); - - it('only selects user-passed buttons if present in action-group while [selects="multiple"]', async () => { - const el = await multipleSelectedActionGroup(['second', 'fourth']); - - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - const secondButton = el.querySelector('.second') as ActionButton; - - expect(secondButton.selected, 'second button selected').to.be.true; - - const firstButton = el.querySelector('.first') as ActionButton; - - expect(firstButton.selected, 'first button selected').to.be.false; - }); - - it('selects user-passed values with no .selects value, but does not allow interaction afterwards', async () => { - const el = await fixture(html` - - - First - - - Second - - - `); - - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - const firstButton = el.querySelector('.first') as ActionButton; - const secondButton = el.querySelector('.second') as ActionButton; - - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button selected').to.be.false; - - secondButton.click(); - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - expect(firstButton.selected, 'first button selected').to.be.true; - expect(secondButton.selected, 'second button selected').to.be.false; - }); - - it('selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards', async () => { - const el = await fixture(html` - - - First - - - Second - - - `); - - await elementUpdated(el); - expect(el.getAttribute('role')).to.equal('toolbar'); - expect(el.selected.length).to.equal(2); - - const firstButton = el.querySelector('.first') as ActionButton; - - expect(firstButton.selected, 'first button selected').to.be.true; - expect(firstButton.hasAttribute('aria-checked')).to.be.false; - expect( - firstButton.getAttribute('aria-pressed'), - 'first button aria-pressed' - ).to.eq('true'); - expect(firstButton.getAttribute('role'), 'first button role').to.eq( - 'button' - ); - - const secondButton = el.querySelector('.second') as ActionButton; - - expect(secondButton.selected, 'second button selected').to.be.true; - expect(secondButton.hasAttribute('aria-checked')).to.be.false; - expect( - secondButton.getAttribute('aria-pressed'), - 'second button aria-pressed' - ).to.eq('true'); - expect(secondButton.getAttribute('role'), 'first button role').to.eq( - 'button' - ); - - firstButton.click(); - await elementUpdated(el); - - expect(el.selected.length).to.equal(2); - expect(firstButton.selected, 'first button selected').to.be.true; - expect(firstButton.hasAttribute('aria-checked')).to.be.false; - expect( - firstButton.getAttribute('aria-pressed'), - 'first button aria-pressed' - ).to.eq('true'); - expect(firstButton.getAttribute('role'), 'first button role').to.eq( - 'button' - ); - - expect(secondButton.selected, 'second button selected').to.be.true; - expect(secondButton.hasAttribute('aria-checked')).to.be.false; - expect( - secondButton.getAttribute('aria-pressed'), - 'second button aria-pressed' - ).to.eq('true'); - expect(secondButton.getAttribute('role'), 'first button role').to.eq( - 'button' - ); - }); - - it('will not change .selected state if event is prevented while [selects="multiple"]', async () => { - const el = await fixture(html` - { - event.preventDefault(); - }} - > - - First - - - Second - - - Third - - - `); - const firstElement = el.querySelector('.first') as ActionButton; - const secondElement = el.querySelector('.second') as ActionButton; - const thirdElement = el.querySelector('.third') as ActionButton; - - // checking if the first and second are selected - await elementUpdated(el); - expect(el.selected.length).to.equal(2); - expect(firstElement.selected, 'first child selected').to.be.true; - expect(secondElement.selected, 'second child selected').to.be.true; - - // making sure third element isn't selected - thirdElement.click(); - await elementUpdated(el); - expect(thirdElement.selected, 'third child not selected').to.be.false; - expect(el.selected.length).to.equal(2); - - // making sure already-selected elements are not de-selected - secondElement.click(); - await elementUpdated(el); - - expect(secondElement.selected, 'second element still selected').to.be - .true; - }); - - it('will not change .selected state if event is prevented while [selects="single"]', async () => { - const el = await fixture(html` - { - event.preventDefault(); - }} - > - - First - - - Second - - - `); - const firstElement = el.querySelector('.first') as ActionButton; - const secondElement = el.querySelector('.second') as ActionButton; - - // checking if the first element is selected - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - expect(firstElement.selected, 'first child selected').to.be.true; - - // making sure third element isn't selected - secondElement.click(); - - await elementUpdated(el); - - expect(secondElement.selected, 'second child not selected').to.be.false; - expect(el.selected.length).to.equal(1); - - // making sure already-selected elements are not de-selected - firstElement.click(); - await elementUpdated(el); - - expect(firstElement.selected, 'first element still selected').to.be - .true; - }); - - it('will not change .selected state if event is prevented while selects is undefined', async () => { - const el = await fixture(html` - { - event.preventDefault(); - }} - > - - First - - - Second - - - `); - const firstElement = el.querySelector('.first') as ActionButton; - const secondElement = el.querySelector('.second') as ActionButton; - - // checking if the first element is selected - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - expect(firstElement.selected, 'first child selected').to.be.true; - - secondElement.click(); - await elementUpdated(el); - - // state should be exactly the same - expect(el.selected.length).to.equal(1); - expect(firstElement.selected, 'first child selected').to.be.true; - expect(secondElement.selected, 'second child not selected').to.be.false; - }); - - it('manages a `size` attribute', async () => { - const el = await fixture(html` - - Button - - `); - - const button = el.querySelector('sp-action-button') as ActionButton; - - await elementUpdated(el); - expect(el.size).to.equal('xl'); - expect(button.size).to.equal('xl'); - expect(el.getAttribute('size')).to.equal('xl'); - expect(button.getAttribute('size')).to.equal('xl'); - el.removeAttribute('size'); - await elementUpdated(el); - expect(el.size).to.equal('m'); - expect(el.hasAttribute('size')).to.be.false; - expect(button.size).to.equal('m'); - expect(button.getAttribute('size')).to.equal('m'); - }); - - it('does not apply a default `size` attribute', async () => { - const el = await fixture(html` - - Button - - `); - - const button = el.querySelector('sp-action-button') as ActionButton; - - await elementUpdated(el); - expect(el.size).to.equal('m'); - expect(button.size).to.equal('m'); - expect(el.hasAttribute('size')).to.be.false; - expect(button.hasAttribute('size')).to.be.false; - }); - - it('will accept selected as a JSON string', async () => { - const el = await fixture(html` - - - First - - - Second - - - `); - - // checking if the first element is selected - await elementUpdated(el); - const firstElement = el.querySelector('.first') as ActionButton; - const secondElement = el.querySelector('.second') as ActionButton; - - expect(el.selected.length).to.equal(1); - expect(firstElement.selected, 'first child selected').to.be.true; - expect(secondElement.selected, 'second child selected').to.be.false; - }); - - it('accepts role attribute override', async () => { - const el = await fixture(html` - - Button - - `); - - // with a role of group, the role should not be overridden - await elementUpdated(el); - expect(el.getAttribute('role')).to.equal('group'); - - // setting selects to single should override role to radiogroup - el.setAttribute('selects', 'single'); - await elementUpdated(el); - expect(el.getAttribute('role')).to.equal('radiogroup'); - - // setting selects to multiple should override role to toolbar - el.setAttribute('selects', 'multiple'); - await elementUpdated(el); - expect(el.getAttribute('role')).to.equal('toolbar'); - - // by default, role should be toolbar - el.removeAttribute('role'); - el.removeAttribute('selects'); - await elementUpdated(el); - expect(el.getAttribute('role')).to.equal('toolbar'); - }); - - const acceptKeyboardInput = async (el: ActionGroup): Promise => { - const thirdElement = el.querySelector('.third') as ActionButton; - - await elementUpdated(el); - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('Second'); - - thirdElement.focus(); - thirdElement.click(); - - await elementUpdated(el); - - expect(thirdElement.selected, 'third child selected').to.be.true; - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('Third'); - - el.dispatchEvent(arrowRightEvent()); - await sendKeys({ press: 'Enter' }); - - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('First'); - - el.dispatchEvent(arrowLeftEvent()); - el.dispatchEvent(arrowUpEvent()); - await sendKeys({ press: 'Enter' }); - - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('Second'); - - el.dispatchEvent(endEvent()); - await sendKeys({ press: 'Enter' }); - - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('Third'); - - await sendKeys({ press: 'Enter' }); - - el.dispatchEvent(homeEvent()); - await sendKeys({ press: 'Enter' }); - - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('First'); - - el.dispatchEvent(arrowDownEvent()); - await sendKeys({ press: 'Enter' }); - - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('Second'); - }; - - it('accepts keybord input', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - - await acceptKeyboardInput(el); - }); - it('accepts keybord input with tooltip', async () => { - const el = await fixture(html` - - - First - - Definitely the first one. - - - - - Second - - - Not the first, not the last. - - - - - Third - - Select me. - - - `); - - await acceptKeyboardInput(el); - }); - it('accepts keybord input when [dir="ltr"]', async () => { - const el = await fixture(html` - - First - Second - Third - - `); - const thirdElement = el.querySelector('.third') as ActionButton; - - await elementUpdated(el); - expect(el.selected.length).to.equal(0); - - thirdElement.focus(); - thirdElement.click(); - - await elementUpdated(el); - - expect(thirdElement.selected, 'third child selected').to.be.true; - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('Third'); - - el.dispatchEvent(arrowRightEvent()); - await sendKeys({ press: 'Enter' }); - - await elementUpdated(el); - - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('First'); - - el.dispatchEvent(arrowUpEvent()); - await sendKeys({ press: 'Enter' }); - - expect(el.selected.length).to.equal(1); - expect(el.selected[0]).to.equal('Third'); - }); - it('processes `selects` correctly when mutations occur (because Overlays/Tooltips)', async () => { - const test = await fixture(controlled()); - const actionButtons = [ - ...test.shadowRoot.querySelectorAll('sp-action-button'), - ] as ActionButton[]; - - expect(actionButtons[0].selected).to.be.true; - expect(actionButtons[1].selected).to.be.false; - expect(actionButtons[2].selected).to.be.false; - - const changeSpy = spy(); - - test.addEventListener('change', () => changeSpy()); - const rect = actionButtons[1].getBoundingClientRect(); - - sendMouse({ - steps: [ - { - position: [ - rect.left + rect.width / 2, - rect.top + rect.height / 2, - ], - type: 'click', - }, - ], - }); - - await aTimeout(500); - - expect(actionButtons[0].selected).to.be.false; - expect(actionButtons[1].selected).to.be.true; - expect(actionButtons[2].selected).to.be.false; - }); + const el = shadowRoot.querySelector("sp-action-group") as ActionGroup; + + await elementUpdated(el); + + expect(el.selected, '"Third" selected').to.deep.equal(["Third"]); + expect(firstItem.selected).to.be.false; + expect(thirdItem.selected).to.be.true; + + firstItem.click(); + await elementUpdated(el); + + expect(el.selected, '"First" selected').to.deep.equal(["First"]); + expect(firstItem.selected).to.be.true; + expect(thirdItem.selected).to.be.false; + }); + it('surfaces [selects="multiple"] selection', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + + await elementUpdated(el); + + expect(el.selected, '"Second" and "Third" selected').to.deep.equal([ + "Second", + "Third", + ]); + }); + it("does not select without [selects]", async () => { + const el = await fixture(html` + + First + Second + Third + + `); + const thirdElement = el.querySelector(".third") as ActionButton; + + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + + thirdElement.click(); + + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + }); + it('selects via `click` while [selects="single"]', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + const thirdElement = el.querySelector(".third") as ActionButton; + + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + expect(el.selected.includes("second")); + + thirdElement.click(); + + await elementUpdated(el); + + expect(thirdElement.selected, "third child selected").to.be.true; + + await waitUntil( + () => el.selected.length === 1 && el.selected.includes("third"), + "Updates value of `selected`", + ); + }); + it('selects via `click` while [selects="multiple"] selection', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + const firstElement = el.querySelector(".first") as ActionButton; + const secondElement = el.querySelector(".second") as ActionButton; + const thirdElement = el.querySelector(".third") as ActionButton; + + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + expect(el.selected.includes("First")); + + firstElement.click(); + secondElement.click(); + thirdElement.click(); + + await elementUpdated(el); + + expect(secondElement.selected, "second child selected").to.be.true; + expect(thirdElement.selected, "third child selected").to.be.true; + + await waitUntil( + () => + el.selected.length === 2 && + el.selected.includes("Second") && + el.selected.includes("Third"), + "Updates value of `selected`", + ); + }); + it("consumes descendant `change` events when `[selects]`", async () => { + const changeSpy = spy(); + const el = await fixture(html` + changeSpy()} + label="Selects Single Group" + selects="single" + > + First + + Second + + + Third + + + `); + const thirdElement = el.querySelector(".third") as ActionButton; + + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + expect(el.selected.includes("second")); + expect(changeSpy.callCount).to.equal(0); + + thirdElement.click(); + + await elementUpdated(el); + + expect(thirdElement.selected, "third child selected").to.be.true; + expect(changeSpy.callCount).to.equal(1); + + await waitUntil( + () => el.selected.length === 1 && el.selected.includes("third"), + "Updates value of `selected`", + ); + }); + it("does not respond to clicks on itself", async () => { + const el = await fixture(html` + + First + Second + Third + + `); + + await elementUpdated(el); + expect(el.selected.length).to.equal(0); + + el.click(); + + await elementUpdated(el); + + expect(el.selected.length).to.equal(0); + }); + it("selection can be prevented", async () => { + const el = await fixture(html` + { + event.preventDefault(); + }} + > + First + Second + Third + + `); + const thirdElement = el.querySelector(".third") as ActionButton; + + await elementUpdated(el); + expect(el.selected.length).to.equal(0); + + thirdElement.click(); + + await elementUpdated(el); + + expect(thirdElement.selected, "third child not selected").to.be.false; + expect(el.selected.length).to.equal(0); + }); + + it('selects user-passed value while [selects="single"]', async () => { + const el = await singleSelectedActionGroup(["first"]); + + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + + const firstButton = el.querySelector(".first") as ActionButton; + const secondButton = el.querySelector(".second") as ActionButton; + + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button not selected").to.be.false; + + secondButton.click(); + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + expect(firstButton.selected, "first button not selected").to.be.false; + expect(secondButton.selected, "second button selected").to.be.true; + }); + + it('selects can be updated while [selects="single"]', async () => { + const el = await singleSelectedActionGroup(["first"]); + + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + + const firstButton = el.querySelector(".first") as ActionButton; + const secondButton = el.querySelector(".second") as ActionButton; + + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button not selected").to.be.false; + + el.selected = ["second"]; + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + expect(firstButton.selected, "first button not selected").to.be.false; + expect(secondButton.selected, "second button selected").to.be.true; + }); + + it("does not allow interaction with child content to interrupt the selection mechanism", async () => { + const el = await singleSelectedActionGroup([]); + + await elementUpdated(el); + expect(el.selected.length).to.equal(0); + + const firstButton = el.querySelector(".first") as ActionButton; + const secondButton = el.querySelector(".second") as ActionButton; + const icon = secondButton.querySelector("[slot=icon]") as HTMLElement; + + expect(firstButton.selected, "first button selected").to.be.false; + expect(secondButton.selected, "second button not selected").to.be.false; + + secondButton.click(); + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + expect(el.selected).to.deep.equal(["second"]); + expect(firstButton.selected, "first button not selected").to.be.false; + expect(secondButton.selected, "second button selected").to.be.true; + + firstButton.click(); + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + expect(el.selected).to.deep.equal(["first"]); + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button not selected").to.be.false; + + const rect = icon.getBoundingClientRect(); + + await sendMouse({ + steps: [ + { + type: "click", + position: [rect.left + rect.width / 2, rect.top + rect.height / 2], + }, + ], + }); + icon.click(); + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + expect(el.selected).to.deep.equal(["second"]); + expect(firstButton.selected, "first button not selected").to.be.false; + expect(secondButton.selected, "second button selected").to.be.true; + }); + + it('selects user-passed value while [selects="multiple"]', async () => { + const el = await fixture(html` + + First + + Second + + + Third + + + `); + + await elementUpdated(el); + + await Promise.all(el.buttons.map((button) => elementUpdated(button))); + + const firstButton = el.querySelector(".first") as ActionButton; + const secondButton = el.querySelector(".second") as ActionButton; + const thirdButton = el.querySelector(".third") as ActionButton; + + expect(el.selected.length).to.equal(2); + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button selected").to.be.true; + expect(thirdButton.selected, "third button not selected").to.be.false; + + thirdButton.click(); + await elementUpdated(el); + + expect(el.selected.length).to.equal(3); + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button selected").to.be.true; + expect(thirdButton.selected, "third button selected").to.be.true; + + firstButton.click(); + await elementUpdated(el); + + expect(el.selected.length).to.equal(2); + expect(firstButton.selected, "first button not selected").to.be.false; + expect(secondButton.selected, "second button selected").to.be.true; + expect(thirdButton.selected, "third button selected").to.be.true; + }); + + it('selects can be updated while [selects="multiple"]', async () => { + const el = await fixture(html` + + First + + Second + + + Third + + + `); + + await elementUpdated(el); + + await Promise.all(el.buttons.map((button) => elementUpdated(button))); + + const firstButton = el.querySelector(".first") as ActionButton; + const secondButton = el.querySelector(".second") as ActionButton; + const thirdButton = el.querySelector(".third") as ActionButton; + + expect(el.selected.length).to.equal(2); + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button selected").to.be.true; + expect(thirdButton.selected, "third button not selected").to.be.false; + + el.selected = ["first", "second", "third"]; + await elementUpdated(el); + + expect(el.selected.length).to.equal(3); + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button selected").to.be.true; + expect(thirdButton.selected, "third button selected").to.be.true; + + el.selected = ["second", "third"]; + await elementUpdated(el); + + expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2); + expect(firstButton.selected, "first button not selected").to.be.false; + expect(secondButton.selected, "second button selected").to.be.true; + expect(thirdButton.selected, "third button selected").to.be.true; + }); + + it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality', async () => { + const el = await singleSelectedActionGroup(["first", "second"]); + + await elementUpdated(el); + expect(el.selected.length).to.equal(2); + + const firstButton = el.querySelector(".first") as ActionButton; + const secondButton = el.querySelector(".second") as ActionButton; + + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button selected").to.be.true; + + secondButton.click(); + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + expect(firstButton.selected, "first button selected").to.be.false; + expect(secondButton.selected, "second button selected").to.be.true; + }); + + it("Clicking button event should bubble up from inner label to outer button element", async () => { + const el = await fixture(html` + + First + + Second + + + `); + + await elementUpdated(el); + expect(el.selected.length).to.equal(2); + + const firstButtonEl = el.querySelector(".first") as ActionButton; + const firstSpanEl = firstButtonEl.shadowRoot.querySelector( + "#label", + ) as HTMLSpanElement; + const secondButtonEl = el.querySelector(".second") as ActionButton; + + expect(firstButtonEl.selected, "first button selected").to.be.true; + expect(secondButtonEl.selected, "second button selected").to.be.true; + + firstSpanEl.click(); // clicking inner span bubbles up and fires outer button click + await elementUpdated(el); + + expect(firstButtonEl.selected, "first button selected").to.be.false; + expect(secondButtonEl.selected, "second button selected").to.be.true; + + firstButtonEl.click(); // clicking outer action-button element fires own click event + await elementUpdated(el); + + expect(firstButtonEl.selected, "first button selected").to.be.true; + expect(secondButtonEl.selected, "second button selected").to.be.true; + }); + + it('only selects user-passed buttons if present in action-group while [selects="multiple"]', async () => { + const el = await multipleSelectedActionGroup(["second", "fourth"]); + + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + const secondButton = el.querySelector(".second") as ActionButton; + + expect(secondButton.selected, "second button selected").to.be.true; + + const firstButton = el.querySelector(".first") as ActionButton; + + expect(firstButton.selected, "first button selected").to.be.false; + }); + + it("selects user-passed values with no .selects value, but does not allow interaction afterwards", async () => { + const el = await fixture(html` + + First + + Second + + + `); + + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + const firstButton = el.querySelector(".first") as ActionButton; + const secondButton = el.querySelector(".second") as ActionButton; + + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button selected").to.be.false; + + secondButton.click(); + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + expect(firstButton.selected, "first button selected").to.be.true; + expect(secondButton.selected, "second button selected").to.be.false; + }); + + it("selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards", async () => { + const el = await fixture(html` + + First + + Second + + + `); + + await elementUpdated(el); + expect(el.getAttribute("role")).to.equal("toolbar"); + expect(el.selected.length).to.equal(2); + + const firstButton = el.querySelector(".first") as ActionButton; + + expect(firstButton.selected, "first button selected").to.be.true; + expect(firstButton.hasAttribute("aria-checked")).to.be.false; + expect( + firstButton.getAttribute("aria-pressed"), + "first button aria-pressed", + ).to.eq("true"); + expect(firstButton.getAttribute("role"), "first button role").to.eq( + "button", + ); + + const secondButton = el.querySelector(".second") as ActionButton; + + expect(secondButton.selected, "second button selected").to.be.true; + expect(secondButton.hasAttribute("aria-checked")).to.be.false; + expect( + secondButton.getAttribute("aria-pressed"), + "second button aria-pressed", + ).to.eq("true"); + expect(secondButton.getAttribute("role"), "first button role").to.eq( + "button", + ); + + firstButton.click(); + await elementUpdated(el); + + expect(el.selected.length).to.equal(2); + expect(firstButton.selected, "first button selected").to.be.true; + expect(firstButton.hasAttribute("aria-checked")).to.be.false; + expect( + firstButton.getAttribute("aria-pressed"), + "first button aria-pressed", + ).to.eq("true"); + expect(firstButton.getAttribute("role"), "first button role").to.eq( + "button", + ); + + expect(secondButton.selected, "second button selected").to.be.true; + expect(secondButton.hasAttribute("aria-checked")).to.be.false; + expect( + secondButton.getAttribute("aria-pressed"), + "second button aria-pressed", + ).to.eq("true"); + expect(secondButton.getAttribute("role"), "first button role").to.eq( + "button", + ); + }); + + it('will not change .selected state if event is prevented while [selects="multiple"]', async () => { + const el = await fixture(html` + { + event.preventDefault(); + }} + > + First + + Second + + + Third + + + `); + const firstElement = el.querySelector(".first") as ActionButton; + const secondElement = el.querySelector(".second") as ActionButton; + const thirdElement = el.querySelector(".third") as ActionButton; + + // checking if the first and second are selected + await elementUpdated(el); + expect(el.selected.length).to.equal(2); + expect(firstElement.selected, "first child selected").to.be.true; + expect(secondElement.selected, "second child selected").to.be.true; + + // making sure third element isn't selected + thirdElement.click(); + await elementUpdated(el); + expect(thirdElement.selected, "third child not selected").to.be.false; + expect(el.selected.length).to.equal(2); + + // making sure already-selected elements are not de-selected + secondElement.click(); + await elementUpdated(el); + + expect(secondElement.selected, "second element still selected").to.be.true; + }); + + it('will not change .selected state if event is prevented while [selects="single"]', async () => { + const el = await fixture(html` + { + event.preventDefault(); + }} + > + First + + Second + + + `); + const firstElement = el.querySelector(".first") as ActionButton; + const secondElement = el.querySelector(".second") as ActionButton; + + // checking if the first element is selected + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + expect(firstElement.selected, "first child selected").to.be.true; + + // making sure third element isn't selected + secondElement.click(); + + await elementUpdated(el); + + expect(secondElement.selected, "second child not selected").to.be.false; + expect(el.selected.length).to.equal(1); + + // making sure already-selected elements are not de-selected + firstElement.click(); + await elementUpdated(el); + + expect(firstElement.selected, "first element still selected").to.be.true; + }); + + it("will not change .selected state if event is prevented while selects is undefined", async () => { + const el = await fixture(html` + { + event.preventDefault(); + }} + > + First + + Second + + + `); + const firstElement = el.querySelector(".first") as ActionButton; + const secondElement = el.querySelector(".second") as ActionButton; + + // checking if the first element is selected + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + expect(firstElement.selected, "first child selected").to.be.true; + + secondElement.click(); + await elementUpdated(el); + + // state should be exactly the same + expect(el.selected.length).to.equal(1); + expect(firstElement.selected, "first child selected").to.be.true; + expect(secondElement.selected, "second child not selected").to.be.false; + }); + + it("manages a `size` attribute", async () => { + const el = await fixture(html` + + Button + + `); + + const button = el.querySelector("sp-action-button") as ActionButton; + + await elementUpdated(el); + expect(el.size).to.equal("xl"); + expect(button.size).to.equal("xl"); + expect(el.getAttribute("size")).to.equal("xl"); + expect(button.getAttribute("size")).to.equal("xl"); + el.removeAttribute("size"); + await elementUpdated(el); + expect(el.size).to.equal("m"); + expect(el.hasAttribute("size")).to.be.false; + expect(button.size).to.equal("m"); + expect(button.getAttribute("size")).to.equal("m"); + }); + + it("does not apply a default `size` attribute", async () => { + const el = await fixture(html` + + Button + + `); + + const button = el.querySelector("sp-action-button") as ActionButton; + + await elementUpdated(el); + expect(el.size).to.equal("m"); + expect(button.size).to.equal("m"); + expect(el.hasAttribute("size")).to.be.false; + expect(button.hasAttribute("size")).to.be.false; + }); + + it("will accept selected as a JSON string", async () => { + const el = await fixture(html` + + First + + Second + + + `); + + // checking if the first element is selected + await elementUpdated(el); + const firstElement = el.querySelector(".first") as ActionButton; + const secondElement = el.querySelector(".second") as ActionButton; + + expect(el.selected.length).to.equal(1); + expect(firstElement.selected, "first child selected").to.be.true; + expect(secondElement.selected, "second child selected").to.be.false; + }); + + it("accepts role attribute override", async () => { + const el = await fixture(html` + + Button + + `); + + // with a role of group, the role should not be overridden + await elementUpdated(el); + expect(el.getAttribute("role")).to.equal("group"); + + // setting selects to single should override role to radiogroup + el.setAttribute("selects", "single"); + await elementUpdated(el); + expect(el.getAttribute("role")).to.equal("radiogroup"); + + // setting selects to multiple should override role to toolbar + el.setAttribute("selects", "multiple"); + await elementUpdated(el); + expect(el.getAttribute("role")).to.equal("toolbar"); + + // by default, role should be toolbar + el.removeAttribute("role"); + el.removeAttribute("selects"); + await elementUpdated(el); + expect(el.getAttribute("role")).to.equal("toolbar"); + }); + + const acceptKeyboardInput = async (el: ActionGroup): Promise => { + const thirdElement = el.querySelector(".third") as ActionButton; + + await elementUpdated(el); + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("Second"); + + thirdElement.focus(); + thirdElement.click(); + + await elementUpdated(el); + + expect(thirdElement.selected, "third child selected").to.be.true; + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("Third"); + + el.dispatchEvent(arrowRightEvent()); + await sendKeys({ press: "Enter" }); + + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("First"); + + el.dispatchEvent(arrowLeftEvent()); + el.dispatchEvent(arrowUpEvent()); + await sendKeys({ press: "Enter" }); + + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("Second"); + + el.dispatchEvent(endEvent()); + await sendKeys({ press: "Enter" }); + + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("Third"); + + await sendKeys({ press: "Enter" }); + + el.dispatchEvent(homeEvent()); + await sendKeys({ press: "Enter" }); + + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("First"); + + el.dispatchEvent(arrowDownEvent()); + await sendKeys({ press: "Enter" }); + + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("Second"); + }; + + it("accepts keybord input", async () => { + const el = await fixture(html` + + First + Second + Third + + `); + + await acceptKeyboardInput(el); + }); + it("accepts keybord input with tooltip", async () => { + const el = await fixture(html` + + + First + + Definitely the first one. + + + + Second + + Not the first, not the last. + + + + + Third + + Select me. + + + `); + + await acceptKeyboardInput(el); + }); + it('accepts keybord input when [dir="ltr"]', async () => { + const el = await fixture(html` + + First + Second + Third + + `); + const thirdElement = el.querySelector(".third") as ActionButton; + + await elementUpdated(el); + expect(el.selected.length).to.equal(0); + + thirdElement.focus(); + thirdElement.click(); + + await elementUpdated(el); + + expect(thirdElement.selected, "third child selected").to.be.true; + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("Third"); + + el.dispatchEvent(arrowRightEvent()); + await sendKeys({ press: "Enter" }); + + await elementUpdated(el); + + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("First"); + + el.dispatchEvent(arrowUpEvent()); + await sendKeys({ press: "Enter" }); + + expect(el.selected.length).to.equal(1); + expect(el.selected[0]).to.equal("Third"); + }); + it("processes `selects` correctly when mutations occur (because Overlays/Tooltips)", async () => { + const test = await fixture(controlled()); + const actionButtons = [ + ...test.shadowRoot.querySelectorAll("sp-action-button"), + ] as ActionButton[]; + + expect(actionButtons[0].selected).to.be.true; + expect(actionButtons[1].selected).to.be.false; + expect(actionButtons[2].selected).to.be.false; + + const changeSpy = spy(); + + test.addEventListener("change", () => changeSpy()); + const rect = actionButtons[1].getBoundingClientRect(); + + sendMouse({ + steps: [ + { + position: [rect.left + rect.width / 2, rect.top + rect.height / 2], + type: "click", + }, + ], + }); + + await aTimeout(500); + + expect(actionButtons[0].selected).to.be.false; + expect(actionButtons[1].selected).to.be.true; + expect(actionButtons[2].selected).to.be.false; + }); }); diff --git a/packages/action-menu/stories/action-menu-sizes.stories.ts b/packages/action-menu/stories/action-menu-sizes.stories.ts index ac301a7a04..92a449553a 100644 --- a/packages/action-menu/stories/action-menu-sizes.stories.ts +++ b/packages/action-menu/stories/action-menu-sizes.stories.ts @@ -9,35 +9,35 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { TemplateResult } from '@spectrum-web-components/base'; +import { TemplateResult } from "@spectrum-web-components/base"; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import { isOverlayOpen } from '../../overlay/stories/index.js'; -import '../../overlay/stories/index.js'; -import { ActionMenuMarkup } from './'; +import "@spectrum-web-components/menu/sp-menu.js"; +import "@spectrum-web-components/menu/sp-menu-item.js"; +import { isOverlayOpen } from "../../overlay/stories/index.js"; +import "../../overlay/stories/index.js"; +import { ActionMenuMarkup } from ".//index.js"; export default { - title: 'Action menu/Sizes', - component: 'sp-action-menu', + title: "Action menu/Sizes", + component: "sp-action-menu", }; -export const s = (): TemplateResult => ActionMenuMarkup({ size: 's' }); +export const s = (): TemplateResult => ActionMenuMarkup({ size: "s" }); export const sOpen = (): TemplateResult => - ActionMenuMarkup({ size: 's', open: true }); + ActionMenuMarkup({ size: "s", open: true }); sOpen.decorators = [isOverlayOpen]; -export const m = (): TemplateResult => ActionMenuMarkup({ size: 'm' }); +export const m = (): TemplateResult => ActionMenuMarkup({ size: "m" }); export const mOpen = (): TemplateResult => - ActionMenuMarkup({ size: 'm', open: true }); + ActionMenuMarkup({ size: "m", open: true }); mOpen.decorators = [isOverlayOpen]; -export const l = (): TemplateResult => ActionMenuMarkup({ size: 'l' }); +export const l = (): TemplateResult => ActionMenuMarkup({ size: "l" }); export const lOpen = (): TemplateResult => - ActionMenuMarkup({ size: 'l', open: true }); + ActionMenuMarkup({ size: "l", open: true }); lOpen.decorators = [isOverlayOpen]; -export const XL = (): TemplateResult => ActionMenuMarkup({ size: 'xl' }); +export const XL = (): TemplateResult => ActionMenuMarkup({ size: "xl" }); export const XLOpen = (): TemplateResult => - ActionMenuMarkup({ size: 'xl', open: true }); + ActionMenuMarkup({ size: "xl", open: true }); XLOpen.decorators = [isOverlayOpen]; diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts index accf49df88..fd624a45b6 100644 --- a/packages/action-menu/stories/action-menu.stories.ts +++ b/packages/action-menu/stories/action-menu.stories.ts @@ -9,503 +9,492 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; -import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; +import { html, TemplateResult } from "@spectrum-web-components/base"; +import { ifDefined } from "@spectrum-web-components/base/src/directives.js"; -import '@spectrum-web-components/action-menu/sp-action-menu.js'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/menu/sp-menu-group.js'; -import '@spectrum-web-components/menu/sp-menu-divider.js'; -import '@spectrum-web-components/tooltip/sp-tooltip.js'; -import { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js'; -import { ActionMenuMarkup } from './'; -import { makeOverBackground } from '../../button/stories/index.js'; -import { isOverlayOpen } from '../../overlay/stories/index.js'; +import "@spectrum-web-components/action-menu/sp-action-menu.js"; +import "@spectrum-web-components/menu/sp-menu.js"; +import "@spectrum-web-components/menu/sp-menu-item.js"; +import "@spectrum-web-components/menu/sp-menu-group.js"; +import "@spectrum-web-components/menu/sp-menu-divider.js"; +import "@spectrum-web-components/tooltip/sp-tooltip.js"; +import { slottableRequest } from "@spectrum-web-components/overlay/src/slottable-request-directive.js"; +import { ActionMenuMarkup } from ".//index.js"; +import { makeOverBackground } from "../../button/stories/index.js"; +import { isOverlayOpen } from "../../overlay/stories/index.js"; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js'; -import type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js'; -import { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js'; -import { Menu } from '@spectrum-web-components/menu'; -import type { ActionMenu } from '@spectrum-web-components/action-menu'; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js"; +import type { MenuItem } from "@spectrum-web-components/menu/src/MenuItem.js"; +import { Placement } from "@spectrum-web-components/overlay/src/overlay-types.js"; +import { Menu } from "@spectrum-web-components/menu"; +import type { ActionMenu } from "@spectrum-web-components/action-menu"; export default { - component: 'sp-action-menu', - title: 'Action menu', - argTypes: { - onChange: { action: 'change' }, - disabled: { - name: 'disabled', - type: { name: 'boolean', required: false }, - description: - 'Disable this control. It will not receive focus or events.', - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - open: { - name: 'open', - type: { name: 'boolean', required: false }, - description: 'Whether the menu is open or not.', - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: 'boolean', - }, - visibleLabel: { - name: 'Visible Label', - description: 'The placeholder content for the picker.', - type: { name: 'string', required: false }, - table: { - type: { summary: 'string' }, - defaultValue: { summary: '' }, - }, - control: 'text', - }, - tooltipDescription: { - name: 'Tooltip Description', - type: { name: 'string', required: false }, - description: 'Tooltip description', - table: { - type: { summary: 'string' }, - defaultValue: { summary: '' }, - }, - control: { - type: 'text', - }, - }, - tooltipPlacement: { - name: 'Tooltip Placement', - type: { name: 'string', required: false }, - description: 'Tooltip Placement.', - table: { - defaultValue: { summary: 'bottom' }, - }, - control: { - options: [ - 'auto', - 'auto-start', - 'auto-end', - 'top', - 'bottom', - 'right', - 'left', - 'top-start', - 'top-end', - 'bottom-start', - 'bottom-end', - 'right-start', - 'right-end', - 'left-start', - 'left-end', - 'none', - ], - type: 'select', - }, - }, - quiet: { - name: 'quiet', - type: { name: 'boolean', required: false }, - description: 'Quiet rendering', - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - staticColorValue: { - name: 'static-color', - type: { name: 'string', required: false }, - description: - 'The visual static color variant to apply to the button.', - table: { - type: { summary: 'string' }, - defaultValue: { summary: 'none' }, - }, - control: { - type: 'select', - labels: { - white: 'white', - black: 'black', - none: undefined, - }, - options: ['white', 'black', 'none'], - }, - }, - align: { - name: 'align', - type: { name: 'string', required: false }, - description: 'Alignment of the Action Menu', - table: { - defaultValue: { summary: 'start' }, - }, - control: { - type: 'select', - labels: { - start: 'start', - end: 'end', - }, - }, - options: ['start', 'end'], - }, - }, - args: { - align: 'start', - visibleLabel: 'More Actions', - disabled: false, - open: false, - quiet: false, - tooltipDescription: '', - tooltipPlacement: 'bottom', - static: undefined, - }, + component: "sp-action-menu", + title: "Action menu", + argTypes: { + onChange: { action: "change" }, + disabled: { + name: "disabled", + type: { name: "boolean", required: false }, + description: "Disable this control. It will not receive focus or events.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + open: { + name: "open", + type: { name: "boolean", required: false }, + description: "Whether the menu is open or not.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: "boolean", + }, + visibleLabel: { + name: "Visible Label", + description: "The placeholder content for the picker.", + type: { name: "string", required: false }, + table: { + type: { summary: "string" }, + defaultValue: { summary: "" }, + }, + control: "text", + }, + tooltipDescription: { + name: "Tooltip Description", + type: { name: "string", required: false }, + description: "Tooltip description", + table: { + type: { summary: "string" }, + defaultValue: { summary: "" }, + }, + control: { + type: "text", + }, + }, + tooltipPlacement: { + name: "Tooltip Placement", + type: { name: "string", required: false }, + description: "Tooltip Placement.", + table: { + defaultValue: { summary: "bottom" }, + }, + control: { + options: [ + "auto", + "auto-start", + "auto-end", + "top", + "bottom", + "right", + "left", + "top-start", + "top-end", + "bottom-start", + "bottom-end", + "right-start", + "right-end", + "left-start", + "left-end", + "none", + ], + type: "select", + }, + }, + quiet: { + name: "quiet", + type: { name: "boolean", required: false }, + description: "Quiet rendering", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + staticColorValue: { + name: "static-color", + type: { name: "string", required: false }, + description: "The visual static color variant to apply to the button.", + table: { + type: { summary: "string" }, + defaultValue: { summary: "none" }, + }, + control: { + type: "select", + labels: { + white: "white", + black: "black", + none: undefined, + }, + options: ["white", "black", "none"], + }, + }, + align: { + name: "align", + type: { name: "string", required: false }, + description: "Alignment of the Action Menu", + table: { + defaultValue: { summary: "start" }, + }, + control: { + type: "select", + labels: { + start: "start", + end: "end", + }, + }, + options: ["start", "end"], + }, + }, + args: { + align: "start", + visibleLabel: "More Actions", + disabled: false, + open: false, + quiet: false, + tooltipDescription: "", + tooltipPlacement: "bottom", + static: undefined, + }, }; interface StoryArgs { - align?: 'start' | 'end'; - visibleLabel?: string; - disabled?: boolean; - open?: boolean; - customIcon?: string | TemplateResult; - selects?: 'single'; - selected?: boolean; - quiet?: boolean; - staticValue?: 'white' | 'black' | undefined; - tooltipDescription?: string | 'none'; - tooltipPlacement?: Placement; + align?: "start" | "end"; + visibleLabel?: string; + disabled?: boolean; + open?: boolean; + customIcon?: string | TemplateResult; + selects?: "single"; + selected?: boolean; + quiet?: boolean; + staticValue?: "white" | "black" | undefined; + tooltipDescription?: string | "none"; + tooltipPlacement?: Placement; } const Template = (args: StoryArgs = {}): TemplateResult => - ActionMenuMarkup(args); + ActionMenuMarkup(args); export const Default = (args: StoryArgs = {}): TemplateResult => Template(args); export const staticWhite = (args: StoryArgs = {}): TemplateResult => - Template(args); + Template(args); staticWhite.args = { - staticValue: 'white', + staticValue: "white", }; staticWhite.decorators = [makeOverBackground()]; export const staticBlack = (args: StoryArgs = {}): TemplateResult => - Template(args); + Template(args); staticBlack.args = { - staticValue: 'black', + staticValue: "black", }; staticBlack.decorators = [makeOverBackground()]; export const quiet = (args: StoryArgs = {}): TemplateResult => Template(args); quiet.args = { - quiet: true, + quiet: true, }; export const labelOnly = ({ - align = 'start', - changeHandler = (() => undefined) as (event: Event) => void, - disabled = false, - open = false, - size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl', - selects = '' as 'single', - selected = false, + align = "start", + changeHandler = (() => undefined) as (event: Event) => void, + disabled = false, + open = false, + size = "m" as "m" | "s" | "l" | "xl" | "xxl", + selects = "" as "single", + selected = false, } = {}): TemplateResult => html` - { - navigator.clipboard.writeText(event.target.value); - changeHandler(event); - }} - .selects=${selects ? selects : undefined} - value=${selected ? 'Select Inverse' : ''} - style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)} - > - Label Only - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - + { + navigator.clipboard.writeText(event.target.value); + changeHandler(event); + }} + .selects=${selects ? selects : undefined} + value=${selected ? "Select Inverse" : ""} + style=${ifDefined(align === "end" ? "float: inline-end;" : undefined)} + > + Label Only + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + `; export const selects = (args: StoryArgs = {}): TemplateResult => - Template({ - ...args, - selects: 'single', - selected: true, - }); + Template({ + ...args, + selects: "single", + selected: true, + }); selects.args = { - open: true, + open: true, }; selects.decorators = [isOverlayOpen]; export const iconOnly = (args: StoryArgs = {}): TemplateResult => - Template(args); + Template(args); iconOnly.args = { - visibleLabel: '', + visibleLabel: "", }; export const tooltipDescriptionAndPlacement = ( - args: StoryArgs = {} + args: StoryArgs = {}, ): TemplateResult => Template(args); tooltipDescriptionAndPlacement.args = { - tooltipDescription: 'Your tooltip string here', - visibleLabel: '', - tooltipPlacement: 'bottom', + tooltipDescription: "Your tooltip string here", + visibleLabel: "", + tooltipPlacement: "bottom", } as StoryArgs; export const customIcon = (args: StoryArgs): TemplateResult => Template(args); customIcon.args = { - customIcon: html` - - `, - visibleLabel: '', + customIcon: html` `, + visibleLabel: "", }; -export const submenu = ({ align = 'start' } = {}): TemplateResult => { - return html` - - One - Two - - Select some items - - A - B - C - - - - `; +export const submenu = ({ align = "start" } = {}): TemplateResult => { + return html` + + One + Two + + Select some items + + A + B + C + + + + `; }; -export const controlled = ({ align = 'start' } = {}): TemplateResult => { - const state = { - snap: true, - grid: false, - guides: true, - latestChange: '', - }; +export const controlled = ({ align = "start" } = {}): TemplateResult => { + const state = { + snap: true, + grid: false, + guides: true, + latestChange: "", + }; - function toggle(prop: 'snap' | 'grid' | 'guides') { - return (event: Event): void => { - const item = event.target as MenuItem; + function toggle(prop: "snap" | "grid" | "guides") { + return (event: Event): void => { + const item = event.target as MenuItem; - state[prop] = !state[prop]; - // in Lit-based usage, this would be handled via render(): - // - item.selected = state[prop]; - }; - } - function onChange(event: Event): void { - state.latestChange = (event.target as MenuItem).value; - logState(); - } - function logState(): void { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - document.getElementById('state-json')!.textContent = - `application state: ${JSON.stringify(state)}`; - } + state[prop] = !state[prop]; + // in Lit-based usage, this would be handled via render(): + // + item.selected = state[prop]; + }; + } + function onChange(event: Event): void { + state.latestChange = (event.target as MenuItem).value; + logState(); + } + function logState(): void { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + document.getElementById("state-json")!.textContent = + `application state: ${JSON.stringify(state)}`; + } - return html` - - alert('action')}> - Non-selectable action - - - Snap - - - Show - event.preventDefault()} - > - - Grid - - - Guides - - - - - - `; + return html` + + alert("action")}> + Non-selectable action + + + Snap + + + Show + event.preventDefault()} + > + + Grid + + + Guides + + + + + + `; }; export const groups = ({ - align = 'start', - onChange, + align = "start", + onChange, }: { - align: 'start' | 'end'; - onChange(value: string): void; + align: "start" | "end"; + onChange(value: string): void; }): TemplateResult => html` - - onChange(value)} - open - style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)} - > - - cms - - Update All Content - - Refresh All XDs - - - ssg - Clear Cache - - - vrt - Contributions - Internal - Public - Patterns - All - - - - Logout - - + + onChange(value)} + open + style=${ifDefined(align === "end" ? "float: inline-end;" : undefined)} + > + + cms + + Update All Content + + Refresh All XDs + + + ssg + Clear Cache + + + vrt + Contributions + Internal + Public + Patterns + All + + + + Logout + + `; groups.decorators = [isOverlayOpen]; export const groupsWithSelects = ({ - onChange, + onChange, }: { - onChange(value: string): void; + onChange(value: string): void; }): TemplateResult => { - return html` - - onChange(value)} - label="Filter or Sort" - > - - Sort By - Name - Created - Modified - - - - Reverse Order - - - `; + return html` + + onChange(value)} + label="Filter or Sort" + > + + Sort By + Name + Created + Modified + + + + Reverse Order + + + `; }; groupsWithSelects.swc_vrt = { - skip: true, + skip: true, }; groupsWithSelects.parameters = { - // Disables Chromatic's snapshotting on a global level - chromatic: { disableSnapshot: true }, + // Disables Chromatic's snapshotting on a global level + chromatic: { disableSnapshot: true }, }; export const directive = (): TemplateResult => { - const renderSubmenu = (): TemplateResult => html` - Submenu Item 1 - Submenu Item 2 - Submenu Item 3 - Submenu Item 4 - `; - const renderOptions = (): TemplateResult => html` - Deselect - Select Inverse - - Feather... - - - Select and Mask... - - Save Selection - Make Work Path - `; + const renderSubmenu = (): TemplateResult => html` + Submenu Item 1 + Submenu Item 2 + Submenu Item 3 + Submenu Item 4 + `; + const renderOptions = (): TemplateResult => html` + Deselect + Select Inverse + + Feather... + + + Select and Mask... + + Save Selection + Make Work Path + `; - return html` - - - Select a Country with a very long label, too long in fact - - - `; + return html` + + + Select a Country with a very long label, too long in fact + + + `; }; directive.swc_vrt = { - skip: true, + skip: true, }; directive.parameters = { - // Disables Chromatic's snapshotting on a global level - chromatic: { disableSnapshot: true }, + // Disables Chromatic's snapshotting on a global level + chromatic: { disableSnapshot: true }, }; export const withScrollEvent = (): TemplateResult => { - function handleActionMenuScroll(): void { - console.log('attached action menu scroll listener'); - } + function handleActionMenuScroll(): void { + console.log("attached action menu scroll listener"); + } - function renderMenuItems(): TemplateResult[] { - return Array.from( - { length: 30 }, - (_, i) => html` - - This is an Action Menu Item ${i + 1} - - ` - ); - } + function renderMenuItems(): TemplateResult[] { + return Array.from( + { length: 30 }, + (_, i) => html` + + This is an Action Menu Item ${i + 1} + + `, + ); + } - return html` - - This is an Action Menu - ${renderMenuItems()} - - `; + return html` + + This is an Action Menu + ${renderMenuItems()} + + `; }; withScrollEvent.parameters = { - chromatic: { disableSnapshot: true }, + chromatic: { disableSnapshot: true }, }; diff --git a/packages/action-menu/test/action-menu-sync.test.ts b/packages/action-menu/test/action-menu-sync.test.ts index 50c3b70ed9..ffc1af88bd 100644 --- a/packages/action-menu/test/action-menu-sync.test.ts +++ b/packages/action-menu/test/action-menu-sync.test.ts @@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/action-menu/sync/sp-action-menu.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/menu/sp-menu-divider.js'; +import "@spectrum-web-components/action-menu/sync/sp-action-menu.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js"; +import "@spectrum-web-components/menu/sp-menu.js"; +import "@spectrum-web-components/menu/sp-menu-item.js"; +import "@spectrum-web-components/menu/sp-menu-divider.js"; -import { testActionMenu } from './'; +import { testActionMenu } from ".//index.js"; -testActionMenu('sync'); +testActionMenu("sync"); diff --git a/packages/action-menu/test/action-menu.test.ts b/packages/action-menu/test/action-menu.test.ts index 638b660289..35927c4987 100644 --- a/packages/action-menu/test/action-menu.test.ts +++ b/packages/action-menu/test/action-menu.test.ts @@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/action-menu/sp-action-menu.js'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/menu/sp-menu-divider.js'; +import "@spectrum-web-components/action-menu/sp-action-menu.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js"; +import "@spectrum-web-components/menu/sp-menu.js"; +import "@spectrum-web-components/menu/sp-menu-item.js"; +import "@spectrum-web-components/menu/sp-menu-divider.js"; -import { testActionMenu } from './'; +import { testActionMenu } from ".//index.js"; -testActionMenu('async'); +testActionMenu("async"); diff --git a/packages/action-menu/test/index.ts b/packages/action-menu/test/index.ts index 9237d68f0c..78d2b9245c 100644 --- a/packages/action-menu/test/index.ts +++ b/packages/action-menu/test/index.ts @@ -11,841 +11,809 @@ governing permissions and limitations under the License. */ import { - aTimeout, - elementUpdated, - expect, - html, - nextFrame, - oneEvent, -} from '@open-wc/testing'; -import { testForLitDevWarnings } from '../../../test/testing-helpers'; - -import { spy } from 'sinon'; - -import { ActionMenu } from '@spectrum-web-components/action-menu'; -import type { Menu, MenuItem } from '@spectrum-web-components/menu'; + aTimeout, + elementUpdated, + expect, + html, + nextFrame, + oneEvent, +} from "@open-wc/testing"; +import { testForLitDevWarnings } from "../../../test/testing-helpers.js"; + +import { spy } from "sinon"; + +import { ActionMenu } from "@spectrum-web-components/action-menu"; +import type { Menu, MenuItem } from "@spectrum-web-components/menu"; import { - fixture, - ignoreResizeObserverLoopError, -} from '../../../test/testing-helpers.js'; -import '@spectrum-web-components/dialog/sp-dialog-base.js'; + fixture, + ignoreResizeObserverLoopError, +} from "../../../test/testing-helpers.js"; +import "@spectrum-web-components/dialog/sp-dialog-base.js"; import { - iconOnly, - tooltipDescriptionAndPlacement, -} from '../stories/action-menu.stories.js'; -import { findDescribedNode } from '../../../test/testing-helpers-a11y.js'; -import type { Tooltip } from '@spectrum-web-components/tooltip'; -import { sendMouse } from '../../../test/plugins/browser.js'; -import type { TestablePicker } from '../../picker/test/index.js'; -import type { Overlay } from '@spectrum-web-components/overlay'; -import { sendKeys, setViewport } from '@web/test-runner-commands'; -import { TemplateResult } from '@spectrum-web-components/base'; -import { isWebKit } from '@spectrum-web-components/shared'; -import { SAFARI_FOCUS_RING_CLASS } from '@spectrum-web-components/picker/src/MobileController.js'; + iconOnly, + tooltipDescriptionAndPlacement, +} from "../stories/action-menu.stories.js"; +import { findDescribedNode } from "../../../test/testing-helpers-a11y.js"; +import type { Tooltip } from "@spectrum-web-components/tooltip"; +import { sendMouse } from "../../../test/plugins/browser.js"; +import type { TestablePicker } from "../../picker/test/index.js"; +import type { Overlay } from "@spectrum-web-components/overlay"; +import { sendKeys, setViewport } from "@web/test-runner-commands"; +import { TemplateResult } from "@spectrum-web-components/base"; +import { isWebKit } from "@spectrum-web-components/shared"; +import { SAFARI_FOCUS_RING_CLASS } from "@spectrum-web-components/picker/src/MobileController.js"; ignoreResizeObserverLoopError(before, after); const deprecatedActionMenuFixture = async (): Promise => - await fixture(html` - - - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - - `); + await fixture(html` + + + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + + `); const actionMenuFixture = async (): Promise => - await fixture(html` - - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - `); + await fixture(html` + + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + `); const actionSubmenuFixture = async (): Promise => - await fixture(html` - - One - Two - - B should be selected - - A - - B - - C - - - - `); - -export const testActionMenu = (mode: 'sync' | 'async'): void => { - describe(`Action menu: ${mode}`, () => { - testForLitDevWarnings(async () => await actionMenuFixture()); - it('loads', async () => { - const el = await actionMenuFixture(); - - await elementUpdated(el); - - expect(el).to.not.be.undefined; - - await expect(el).to.be.accessible(); - }); - it('loads - [slot="label"]', async () => { - const el = await fixture(html` - - More Actions - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - `); - - await elementUpdated(el); - await nextFrame(); - await nextFrame(); - - await expect(el).to.be.accessible(); - }); - it('loads - [custom icon]', async () => { - const el = await fixture(html` - - - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - `); - - await elementUpdated(el); - await nextFrame(); - await nextFrame(); - - await expect(el).to.be.accessible(); - }); - it('dispatches change events, no [href]', async () => { - const changeSpy = spy(); - - const el = await fixture(html` - { - changeSpy(value); - }} - > - - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - `); - - expect(changeSpy.callCount).to.equal(0); - expect(el.open).to.be.false; - - const menuItem2 = el.querySelector( - 'sp-menu-item:nth-child(2)' - ) as MenuItem; - const opened = oneEvent(el, 'sp-opened'); - - el.click(); - await elementUpdated(el); - await opened; - - expect(el.open).to.be.true; - - const closed = oneEvent(el, 'sp-closed'); - - menuItem2.click(); - await closed; - - expect(el.open).to.be.false; - expect(changeSpy.callCount).to.equal(1); - expect(changeSpy.calledWith('Deselect')).to.be.true; - }); - it('closes when Menu Item has [href]', async () => { - const changeSpy = spy(); - - const el = await fixture(html` - { - changeSpy(); - }} - > - - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - - Make Work Path - - - `); - - expect(changeSpy.callCount).to.equal(0); - expect(el.open).to.be.false; - - const menuItem2 = el.querySelector( - 'sp-menu-item:nth-child(2)' - ) as MenuItem; - - const opened = oneEvent(el, 'sp-opened'); - - el.click(); - await opened; - - expect(el.open).to.be.true; - - const closed = oneEvent(el, 'sp-closed'); - - menuItem2.click(); - await closed; - - expect(el.open).to.be.false; - expect(changeSpy.callCount).to.equal(0); - }); - it('can be `quiet`', async () => { - const el = await actionMenuFixture(); + await fixture(html` + + One + Two + + B should be selected + + A + B + C + + + + `); + +export const testActionMenu = (mode: "sync" | "async"): void => { + describe(`Action menu: ${mode}`, () => { + testForLitDevWarnings(async () => await actionMenuFixture()); + it("loads", async () => { + const el = await actionMenuFixture(); + + await elementUpdated(el); + + expect(el).to.not.be.undefined; + + await expect(el).to.be.accessible(); + }); + it('loads - [slot="label"]', async () => { + const el = await fixture(html` + + More Actions + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + `); + + await elementUpdated(el); + await nextFrame(); + await nextFrame(); + + await expect(el).to.be.accessible(); + }); + it("loads - [custom icon]", async () => { + const el = await fixture(html` + + + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + `); + + await elementUpdated(el); + await nextFrame(); + await nextFrame(); + + await expect(el).to.be.accessible(); + }); + it("dispatches change events, no [href]", async () => { + const changeSpy = spy(); + + const el = await fixture(html` + { + changeSpy(value); + }} + > + + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + `); + + expect(changeSpy.callCount).to.equal(0); + expect(el.open).to.be.false; + + const menuItem2 = el.querySelector( + "sp-menu-item:nth-child(2)", + ) as MenuItem; + const opened = oneEvent(el, "sp-opened"); + + el.click(); + await elementUpdated(el); + await opened; + + expect(el.open).to.be.true; + + const closed = oneEvent(el, "sp-closed"); + + menuItem2.click(); + await closed; + + expect(el.open).to.be.false; + expect(changeSpy.callCount).to.equal(1); + expect(changeSpy.calledWith("Deselect")).to.be.true; + }); + it("closes when Menu Item has [href]", async () => { + const changeSpy = spy(); + + const el = await fixture(html` + { + changeSpy(); + }} + > + + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + `); + + expect(changeSpy.callCount).to.equal(0); + expect(el.open).to.be.false; + + const menuItem2 = el.querySelector( + "sp-menu-item:nth-child(2)", + ) as MenuItem; + + const opened = oneEvent(el, "sp-opened"); + + el.click(); + await opened; + + expect(el.open).to.be.true; + + const closed = oneEvent(el, "sp-closed"); + + menuItem2.click(); + await closed; + + expect(el.open).to.be.false; + expect(changeSpy.callCount).to.equal(0); + }); + it("can be `quiet`", async () => { + const el = await actionMenuFixture(); - expect(el.quiet).to.be.false; + expect(el.quiet).to.be.false; - el.quiet = true; - await elementUpdated(el); + el.quiet = true; + await elementUpdated(el); - expect(el.quiet).to.be.true; - }); - it('can be `staticColor`', async () => { - const el = await actionMenuFixture(); + expect(el.quiet).to.be.true; + }); + it("can be `staticColor`", async () => { + const el = await actionMenuFixture(); - expect(el.staticColor == undefined).to.be.true; + expect(el.staticColor == undefined).to.be.true; - el.staticColor = 'black'; - await elementUpdated(el); + el.staticColor = "black"; + await elementUpdated(el); - expect(el.staticColor == 'black').to.be.true; + expect(el.staticColor == "black").to.be.true; - el.staticColor = 'white'; - await elementUpdated(el); + el.staticColor = "white"; + await elementUpdated(el); - expect(el.staticColor == 'white').to.be.true; - }); - it('stay `valid`', async () => { - const el = await actionMenuFixture(); + expect(el.staticColor == "white").to.be.true; + }); + it("stay `valid`", async () => { + const el = await actionMenuFixture(); - expect(el.invalid).to.be.false; + expect(el.invalid).to.be.false; - el.invalid = true; - await elementUpdated(el); + el.invalid = true; + await elementUpdated(el); - expect(el.invalid).to.be.false; - }); - it('focus()', async () => { - const el = await actionMenuFixture(); + expect(el.invalid).to.be.false; + }); + it("focus()", async () => { + const el = await actionMenuFixture(); - el.focus(); + el.focus(); - expect(document.activeElement).to.equal(el); - expect(el.shadowRoot.activeElement).to.equal(el.focusElement); + expect(document.activeElement).to.equal(el); + expect(el.shadowRoot.activeElement).to.equal(el.focusElement); - const opened = oneEvent(el, 'sp-opened'); + const opened = oneEvent(el, "sp-opened"); - el.open = true; - await opened; + el.open = true; + await opened; - const closed = oneEvent(el, 'sp-closed'); + const closed = oneEvent(el, "sp-closed"); - el.open = false; - await closed; + el.open = false; + await closed; - expect(document.activeElement).to.equal(el); - expect(el.shadowRoot.activeElement).to.equal(el.focusElement); - }); - it('manages focus-ring styles', async () => { - if (!isWebKit()) { - return; - } + expect(document.activeElement).to.equal(el); + expect(el.shadowRoot.activeElement).to.equal(el.focusElement); + }); + it("manages focus-ring styles", async () => { + if (!isWebKit()) { + return; + } - const el = await actionMenuFixture(); + const el = await actionMenuFixture(); - /** - * This is a hack to set the `isMobile` property to true so that we can test the MobileController - */ - el.isMobile.matches = true; - el.bindEvents(); + /** + * This is a hack to set the `isMobile` property to true so that we can test the MobileController + */ + el.isMobile.matches = true; + el.bindEvents(); - await setViewport({ width: 360, height: 640 }); - // Allow viewport update to propagate. - await nextFrame(); + await setViewport({ width: 360, height: 640 }); + // Allow viewport update to propagate. + await nextFrame(); - let opened = oneEvent(el, 'sp-opened'); + let opened = oneEvent(el, "sp-opened"); - const boundingRect = el.button.getBoundingClientRect(); + const boundingRect = el.button.getBoundingClientRect(); - sendMouse({ - steps: [ - { - type: 'click', - position: [ - boundingRect.x + boundingRect.width / 2, - boundingRect.y + boundingRect.height / 2, - ], - }, - ], - }); + sendMouse({ + steps: [ + { + type: "click", + position: [ + boundingRect.x + boundingRect.width / 2, + boundingRect.y + boundingRect.height / 2, + ], + }, + ], + }); - await opened; + await opened; - const tray = el.shadowRoot.querySelector('sp-tray'); + const tray = el.shadowRoot.querySelector("sp-tray"); - expect(tray).to.not.be.null; + expect(tray).to.not.be.null; - // Make a selection - let closed = oneEvent(el, 'sp-closed'); + // Make a selection + let closed = oneEvent(el, "sp-closed"); - const firstItem = el.querySelector('sp-menu-item') as MenuItem; + const firstItem = el.querySelector("sp-menu-item") as MenuItem; - firstItem.click(); + firstItem.click(); - await elementUpdated(el); - await closed; + await elementUpdated(el); + await closed; - // expect the tray to be closed - expect(el.open).to.be.false; + // expect the tray to be closed + expect(el.open).to.be.false; - const button = el.shadowRoot.querySelector( - '#button' - ) as HTMLButtonElement; + const button = el.shadowRoot.querySelector( + "#button", + ) as HTMLButtonElement; - expect(button).to.not.be.null; + expect(button).to.not.be.null; - // we should have SAFARI_FOCUS_RING_CLASS in the classList - expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be - .true; + // we should have SAFARI_FOCUS_RING_CLASS in the classList + expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.true; - // picker should still have focus - expect(document.activeElement === el).to.be.true; - - // click outside (0,0) - await sendMouse({ - steps: [ - { - type: 'click', - position: [0, 0], - }, - ], - }); - - // picker should not have focus - expect(document.activeElement === el).to.be.false; - - // Let's use keyboard to open the tray now - opened = oneEvent(el, 'sp-opened'); - await sendKeys({ - press: 'Tab', - }); - await sendKeys({ - press: 'Enter', - }); - await elementUpdated(el); - await opened; - - // Make a selection again - closed = oneEvent(el, 'sp-closed'); - firstItem.click(); - await elementUpdated(el); - await closed; - - // expect the tray to be closed - expect(el.open).to.be.false; - - // we should not have SAFARI_FOCUS_RING_CLASS in the classList - expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be - .false; - }); - it('opens unmeasured', async () => { - const el = await actionMenuFixture(); - - const button = el.button as HTMLButtonElement; - - expect(button).to.have.attribute('aria-haspopup', 'true'); - expect(button).to.not.have.attribute('aria-expanded', 'true'); - expect(button).to.not.have.attribute('aria-controls', 'menu'); - - el.click(); - await elementUpdated(el); - expect(el.open).to.be.true; - expect(button).to.have.attribute('aria-haspopup', 'true'); - expect(button).to.have.attribute('aria-expanded', 'true'); - expect(button).to.have.attribute('aria-controls', 'menu'); - }); - it('opens repeatedly with Menu in the correct location', async function () { - const el = await fixture( - iconOnly({ - ...iconOnly.args, - align: 'end', - }) - ); - - await elementUpdated(el); - - el.focus(); - await elementUpdated(el); - let opened = oneEvent(el, 'sp-opened'); - - await sendKeys({ press: 'ArrowRight' }); - await sendKeys({ press: 'ArrowLeft' }); - await sendKeys({ press: 'Space' }); - await opened; - - const firstRect = ( - el as unknown as { overlayElement: Overlay } - ).overlayElement.dialogEl.getBoundingClientRect(); - - let closed = oneEvent(el, 'sp-closed'); - - await sendKeys({ press: 'Space' }); - await closed; - - opened = oneEvent(el, 'sp-opened'); - await sendKeys({ press: 'Space' }); - await opened; - - const secondRect = ( - el as unknown as { overlayElement: Overlay } - ).overlayElement.dialogEl.getBoundingClientRect(); - - closed = oneEvent(el, 'sp-closed'); - await sendKeys({ press: 'Space' }); - await closed; - - expect(firstRect).to.deep.equal(secondRect); - }); - it('opens and selects in a single pointer button interaction', async () => { - const el = await actionMenuFixture(); - const thirdItem = el.querySelector( - 'sp-menu-item:nth-of-type(3)' - ) as MenuItem; - const boundingRect = el.button.getBoundingClientRect(); - - expect(el.value).to.not.equal(thirdItem.value); - const opened = oneEvent(el, 'sp-opened'); - - await sendMouse({ - steps: [ - { - type: 'move', - position: [ - boundingRect.x + boundingRect.width / 2, - boundingRect.y + boundingRect.height / 2, - ], - }, - { - type: 'down', - }, - ], - }); - await opened; - - const thirdItemRect = thirdItem.getBoundingClientRect(); - const closed = oneEvent(el, 'sp-closed'); - let selected = ''; - - el.addEventListener('change', (event: Event) => { - selected = (event.target as ActionMenu).value; - }); - await sendMouse({ - steps: [ - { - type: 'move', - position: [ - thirdItemRect.x + thirdItemRect.width / 2, - thirdItemRect.y + thirdItemRect.height / 2, - ], - }, - { - type: 'up', - }, - ], - }); - await closed; - - expect(el.open).to.be.false; - expect(selected).to.equal(thirdItem.value); - }); - it('has attribute aria-describedby', async () => { - const name = 'sp-picker'; - const description = 'Rendering a Picker'; - - const el = await fixture(html` - - Select Inverse - Feather... - ${description} - - `); - - await elementUpdated(el); - - await findDescribedNode(name, description); - }); - it('opens unmeasured with deprecated syntax', async () => { - const el = await deprecatedActionMenuFixture(); - - el.click(); - await elementUpdated(el); - expect(el.open).to.be.true; - }); - it('toggles open/close multiple time', async () => { - const el = await actionMenuFixture(); - - await elementUpdated(el); - - const button = el.button as HTMLButtonElement; - - expect(button).to.have.attribute('aria-haspopup', 'true'); - expect(button).to.have.attribute('aria-expanded', 'false'); - expect(button).not.to.have.attribute('aria-controls'); - - let opened = oneEvent(el, 'sp-opened'); - - el.open = true; - await opened; - - expect(el.open).to.be.true; - expect(button).to.have.attribute('aria-expanded', 'true'); - expect(button).to.have.attribute('aria-controls', 'menu'); - - let closed = oneEvent(el, 'sp-closed'); - - el.open = false; - await closed; - - expect(el.open).to.be.false; - expect(button).to.have.attribute('aria-expanded', 'false'); - expect(button).not.to.have.attribute('aria-controls'); - - opened = oneEvent(el, 'sp-opened'); - el.open = true; - await opened; - - expect(el.open).to.be.true; - expect(button).to.have.attribute('aria-expanded', 'true'); - expect(button).to.have.attribute('aria-controls', 'menu'); - - closed = oneEvent(el, 'sp-closed'); - el.open = false; - await closed; - - expect(el.open).to.be.false; - expect(button).to.have.attribute('aria-expanded', 'false'); - expect(button).not.to.have.attribute('aria-controls'); - }); - it('allows submenu items to be selected', async () => { - const root = await actionSubmenuFixture(); - const menuItem = root.querySelector('#item-with-submenu') as Menu; - const submenu = menuItem.querySelector( - 'sp-menu[slot="submenu"]' - ) as Menu; - const selectedItem = submenu.querySelector( - '#sub-selected-item' - ) as MenuItem; - - expect(selectedItem.selected, 'item should be initially selected') - .to.be.true; - - let opened = oneEvent(root, 'sp-opened'); - - root.click(); - await opened; - expect(root.open).to.be.true; - - opened = oneEvent(menuItem, 'sp-opened'); - menuItem.dispatchEvent( - new PointerEvent('pointerenter', { bubbles: true }) - ); - await opened; - - await elementUpdated(submenu); - expect( - selectedItem.selected, - 'initially selected item should maintain selection' - ).to.be.true; - }); - it('allows top-level selection state to change', async () => { - let selected = true; - const handleChange = ( - event: Event & { target: ActionMenu } - ): void => { - if (event.target.value === 'test') { - selected = !selected; - - event.target.updateComplete.then(() => { - event.target.value = selected ? 'test' : ''; - }); - } - }; - const root = await fixture(html` - - One - - Two - - - B should be selected - - A - - B - - C - - - - `); - - const unselectedItem = root.querySelector( - 'sp-menu-item' - ) as MenuItem; - const selectedItem = root.querySelector( - '#root-selected-item' - ) as MenuItem; - - expect(unselectedItem.textContent).to.include('One'); - expect(unselectedItem.selected).to.be.false; - expect(selectedItem.textContent).to.include('Two'); - expect(selectedItem.selected).to.be.true; - - let opened = oneEvent(root, 'sp-opened'); - - root.click(); - await opened; - - // close by clicking selected - // (with event listener: should set selected = false) - let closed = oneEvent(root, 'sp-closed'); - - selectedItem.click(); - await closed; - - expect(root.open).to.be.false; - opened = oneEvent(root, 'sp-opened'); - root.click(); - await opened; - - // close by clicking unselected - // (no event listener: should remain selected = false) - closed = oneEvent(root, 'sp-closed'); - unselectedItem.click(); - await closed; - - opened = oneEvent(root, 'sp-opened'); - root.click(); - await opened; - - expect(unselectedItem.textContent).to.include('One'); - expect(unselectedItem.selected).to.be.false; - expect(selectedItem.textContent).to.include('Two'); - expect(selectedItem.selected).to.be.false; - - // close by clicking selected - // (with event listener: should set selected = false) - closed = oneEvent(root, 'sp-closed'); - selectedItem.click(); - await closed; - - opened = oneEvent(root, 'sp-opened'); - root.click(); - await opened; - - expect(unselectedItem.textContent).to.include('One'); - expect(unselectedItem.selected).to.be.false; - expect(selectedItem.textContent).to.include('Two'); - expect(selectedItem.selected).to.be.true; - }); - it('shows tooltip', async function () { - const openSpy = spy(); - const el = await fixture( - tooltipDescriptionAndPlacement( - tooltipDescriptionAndPlacement.args - ) - ); - const tooltip = el.querySelector('sp-tooltip') as Tooltip; - const rect = el.getBoundingClientRect(); - - tooltip.addEventListener('sp-opened', () => openSpy()); - await elementUpdated(tooltip); - - await nextFrame(); - await nextFrame(); - - const overlay = tooltip.shadowRoot.querySelector( - 'sp-overlay' - ) as Overlay; - - await elementUpdated(overlay); - - expect(overlay.triggerElement === el.button).to.be.true; - let open = oneEvent(tooltip, 'sp-opened'); - - await sendMouse({ - steps: [ - { - position: [ - rect.left + rect.width / 2, - rect.top + rect.height / 2, - ], - type: 'move', - }, - ], - }); - await open; - - expect(tooltip.open).to.be.true; - - const close = oneEvent(tooltip, 'sp-closed'); - - open = oneEvent(el, 'sp-opened'); - await sendMouse({ - steps: [ - { - position: [ - rect.left + rect.width / 2, - rect.top + rect.height / 2, - ], - type: 'click', - }, - ], - }); - await close; - await open; - - expect(tooltip.open, 'tooltip still open').to.be.false; - expect(el.open, 'menu not open').to.be.true; - - const menu = (el as unknown as TestablePicker).optionsMenu; - const menuRect = menu.getBoundingClientRect(); - - await sendMouse({ - steps: [ - { - position: [ - menuRect.left + menuRect.width / 2, - menuRect.top + menuRect.height / 2, - ], - type: 'move', - }, - ], - }); - - await aTimeout(150); - - expect(openSpy.callCount).to.equal(1); - }); - it('opens, then closes, on subsequent clicks', async function () { - const el = await actionMenuFixture(); - const rect = el.getBoundingClientRect(); - - await nextFrame(); - await nextFrame(); - - const open = oneEvent(el, 'sp-opened'); - - await sendMouse({ - steps: [ - { - position: [ - rect.left + rect.width / 2, - rect.top + rect.height / 2, - ], - type: 'click', - }, - ], - }); - await open; - - expect(el.open).to.be.true; - await aTimeout(50); - expect(el.open).to.be.true; - - const close = oneEvent(el, 'sp-closed'); - - await sendMouse({ - steps: [ - { - position: [ - rect.left + rect.width / 2, - rect.top + rect.height / 2, - ], - type: 'click', - }, - ], - }); - await close; - - expect(el.open).to.be.false; - await aTimeout(50); - expect(el.open).to.be.false; - }); - it('should handle scroll event', async () => { - const renderMenuItems = (): TemplateResult[] => - Array.from( - { length: 30 }, - (_, i) => html` - - Menu Item ${i + 1} - - ` - ); - const handleActionMenuScroll = spy(); - const el = await fixture(html` - handleActionMenuScroll()}> - More Actions - Deselect - Select Inverse - Feather... - Select and Mask... - ${renderMenuItems()} - - `); - - await elementUpdated(el); - - expect(handleActionMenuScroll.called).to.be.false; - - el.dispatchEvent( - new Event('scroll', { cancelable: true, composed: true }) - ); - expect(handleActionMenuScroll).to.have.been.called; - }); - }); + // picker should still have focus + expect(document.activeElement === el).to.be.true; + + // click outside (0,0) + await sendMouse({ + steps: [ + { + type: "click", + position: [0, 0], + }, + ], + }); + + // picker should not have focus + expect(document.activeElement === el).to.be.false; + + // Let's use keyboard to open the tray now + opened = oneEvent(el, "sp-opened"); + await sendKeys({ + press: "Tab", + }); + await sendKeys({ + press: "Enter", + }); + await elementUpdated(el); + await opened; + + // Make a selection again + closed = oneEvent(el, "sp-closed"); + firstItem.click(); + await elementUpdated(el); + await closed; + + // expect the tray to be closed + expect(el.open).to.be.false; + + // we should not have SAFARI_FOCUS_RING_CLASS in the classList + expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.false; + }); + it("opens unmeasured", async () => { + const el = await actionMenuFixture(); + + const button = el.button as HTMLButtonElement; + + expect(button).to.have.attribute("aria-haspopup", "true"); + expect(button).to.not.have.attribute("aria-expanded", "true"); + expect(button).to.not.have.attribute("aria-controls", "menu"); + + el.click(); + await elementUpdated(el); + expect(el.open).to.be.true; + expect(button).to.have.attribute("aria-haspopup", "true"); + expect(button).to.have.attribute("aria-expanded", "true"); + expect(button).to.have.attribute("aria-controls", "menu"); + }); + it("opens repeatedly with Menu in the correct location", async function () { + const el = await fixture( + iconOnly({ + ...iconOnly.args, + align: "end", + }), + ); + + await elementUpdated(el); + + el.focus(); + await elementUpdated(el); + let opened = oneEvent(el, "sp-opened"); + + await sendKeys({ press: "ArrowRight" }); + await sendKeys({ press: "ArrowLeft" }); + await sendKeys({ press: "Space" }); + await opened; + + const firstRect = ( + el as unknown as { overlayElement: Overlay } + ).overlayElement.dialogEl.getBoundingClientRect(); + + let closed = oneEvent(el, "sp-closed"); + + await sendKeys({ press: "Space" }); + await closed; + + opened = oneEvent(el, "sp-opened"); + await sendKeys({ press: "Space" }); + await opened; + + const secondRect = ( + el as unknown as { overlayElement: Overlay } + ).overlayElement.dialogEl.getBoundingClientRect(); + + closed = oneEvent(el, "sp-closed"); + await sendKeys({ press: "Space" }); + await closed; + + expect(firstRect).to.deep.equal(secondRect); + }); + it("opens and selects in a single pointer button interaction", async () => { + const el = await actionMenuFixture(); + const thirdItem = el.querySelector( + "sp-menu-item:nth-of-type(3)", + ) as MenuItem; + const boundingRect = el.button.getBoundingClientRect(); + + expect(el.value).to.not.equal(thirdItem.value); + const opened = oneEvent(el, "sp-opened"); + + await sendMouse({ + steps: [ + { + type: "move", + position: [ + boundingRect.x + boundingRect.width / 2, + boundingRect.y + boundingRect.height / 2, + ], + }, + { + type: "down", + }, + ], + }); + await opened; + + const thirdItemRect = thirdItem.getBoundingClientRect(); + const closed = oneEvent(el, "sp-closed"); + let selected = ""; + + el.addEventListener("change", (event: Event) => { + selected = (event.target as ActionMenu).value; + }); + await sendMouse({ + steps: [ + { + type: "move", + position: [ + thirdItemRect.x + thirdItemRect.width / 2, + thirdItemRect.y + thirdItemRect.height / 2, + ], + }, + { + type: "up", + }, + ], + }); + await closed; + + expect(el.open).to.be.false; + expect(selected).to.equal(thirdItem.value); + }); + it("has attribute aria-describedby", async () => { + const name = "sp-picker"; + const description = "Rendering a Picker"; + + const el = await fixture(html` + + Select Inverse + Feather... + ${description} + + `); + + await elementUpdated(el); + + await findDescribedNode(name, description); + }); + it("opens unmeasured with deprecated syntax", async () => { + const el = await deprecatedActionMenuFixture(); + + el.click(); + await elementUpdated(el); + expect(el.open).to.be.true; + }); + it("toggles open/close multiple time", async () => { + const el = await actionMenuFixture(); + + await elementUpdated(el); + + const button = el.button as HTMLButtonElement; + + expect(button).to.have.attribute("aria-haspopup", "true"); + expect(button).to.have.attribute("aria-expanded", "false"); + expect(button).not.to.have.attribute("aria-controls"); + + let opened = oneEvent(el, "sp-opened"); + + el.open = true; + await opened; + + expect(el.open).to.be.true; + expect(button).to.have.attribute("aria-expanded", "true"); + expect(button).to.have.attribute("aria-controls", "menu"); + + let closed = oneEvent(el, "sp-closed"); + + el.open = false; + await closed; + + expect(el.open).to.be.false; + expect(button).to.have.attribute("aria-expanded", "false"); + expect(button).not.to.have.attribute("aria-controls"); + + opened = oneEvent(el, "sp-opened"); + el.open = true; + await opened; + + expect(el.open).to.be.true; + expect(button).to.have.attribute("aria-expanded", "true"); + expect(button).to.have.attribute("aria-controls", "menu"); + + closed = oneEvent(el, "sp-closed"); + el.open = false; + await closed; + + expect(el.open).to.be.false; + expect(button).to.have.attribute("aria-expanded", "false"); + expect(button).not.to.have.attribute("aria-controls"); + }); + it("allows submenu items to be selected", async () => { + const root = await actionSubmenuFixture(); + const menuItem = root.querySelector("#item-with-submenu") as Menu; + const submenu = menuItem.querySelector('sp-menu[slot="submenu"]') as Menu; + const selectedItem = submenu.querySelector( + "#sub-selected-item", + ) as MenuItem; + + expect(selectedItem.selected, "item should be initially selected").to.be + .true; + + let opened = oneEvent(root, "sp-opened"); + + root.click(); + await opened; + expect(root.open).to.be.true; + + opened = oneEvent(menuItem, "sp-opened"); + menuItem.dispatchEvent( + new PointerEvent("pointerenter", { bubbles: true }), + ); + await opened; + + await elementUpdated(submenu); + expect( + selectedItem.selected, + "initially selected item should maintain selection", + ).to.be.true; + }); + it("allows top-level selection state to change", async () => { + let selected = true; + const handleChange = (event: Event & { target: ActionMenu }): void => { + if (event.target.value === "test") { + selected = !selected; + + event.target.updateComplete.then(() => { + event.target.value = selected ? "test" : ""; + }); + } + }; + const root = await fixture(html` + + One + + Two + + + B should be selected + + A + B + C + + + + `); + + const unselectedItem = root.querySelector("sp-menu-item") as MenuItem; + const selectedItem = root.querySelector( + "#root-selected-item", + ) as MenuItem; + + expect(unselectedItem.textContent).to.include("One"); + expect(unselectedItem.selected).to.be.false; + expect(selectedItem.textContent).to.include("Two"); + expect(selectedItem.selected).to.be.true; + + let opened = oneEvent(root, "sp-opened"); + + root.click(); + await opened; + + // close by clicking selected + // (with event listener: should set selected = false) + let closed = oneEvent(root, "sp-closed"); + + selectedItem.click(); + await closed; + + expect(root.open).to.be.false; + opened = oneEvent(root, "sp-opened"); + root.click(); + await opened; + + // close by clicking unselected + // (no event listener: should remain selected = false) + closed = oneEvent(root, "sp-closed"); + unselectedItem.click(); + await closed; + + opened = oneEvent(root, "sp-opened"); + root.click(); + await opened; + + expect(unselectedItem.textContent).to.include("One"); + expect(unselectedItem.selected).to.be.false; + expect(selectedItem.textContent).to.include("Two"); + expect(selectedItem.selected).to.be.false; + + // close by clicking selected + // (with event listener: should set selected = false) + closed = oneEvent(root, "sp-closed"); + selectedItem.click(); + await closed; + + opened = oneEvent(root, "sp-opened"); + root.click(); + await opened; + + expect(unselectedItem.textContent).to.include("One"); + expect(unselectedItem.selected).to.be.false; + expect(selectedItem.textContent).to.include("Two"); + expect(selectedItem.selected).to.be.true; + }); + it("shows tooltip", async function () { + const openSpy = spy(); + const el = await fixture( + tooltipDescriptionAndPlacement(tooltipDescriptionAndPlacement.args), + ); + const tooltip = el.querySelector("sp-tooltip") as Tooltip; + const rect = el.getBoundingClientRect(); + + tooltip.addEventListener("sp-opened", () => openSpy()); + await elementUpdated(tooltip); + + await nextFrame(); + await nextFrame(); + + const overlay = tooltip.shadowRoot.querySelector("sp-overlay") as Overlay; + + await elementUpdated(overlay); + + expect(overlay.triggerElement === el.button).to.be.true; + let open = oneEvent(tooltip, "sp-opened"); + + await sendMouse({ + steps: [ + { + position: [rect.left + rect.width / 2, rect.top + rect.height / 2], + type: "move", + }, + ], + }); + await open; + + expect(tooltip.open).to.be.true; + + const close = oneEvent(tooltip, "sp-closed"); + + open = oneEvent(el, "sp-opened"); + await sendMouse({ + steps: [ + { + position: [rect.left + rect.width / 2, rect.top + rect.height / 2], + type: "click", + }, + ], + }); + await close; + await open; + + expect(tooltip.open, "tooltip still open").to.be.false; + expect(el.open, "menu not open").to.be.true; + + const menu = (el as unknown as TestablePicker).optionsMenu; + const menuRect = menu.getBoundingClientRect(); + + await sendMouse({ + steps: [ + { + position: [ + menuRect.left + menuRect.width / 2, + menuRect.top + menuRect.height / 2, + ], + type: "move", + }, + ], + }); + + await aTimeout(150); + + expect(openSpy.callCount).to.equal(1); + }); + it("opens, then closes, on subsequent clicks", async function () { + const el = await actionMenuFixture(); + const rect = el.getBoundingClientRect(); + + await nextFrame(); + await nextFrame(); + + const open = oneEvent(el, "sp-opened"); + + await sendMouse({ + steps: [ + { + position: [rect.left + rect.width / 2, rect.top + rect.height / 2], + type: "click", + }, + ], + }); + await open; + + expect(el.open).to.be.true; + await aTimeout(50); + expect(el.open).to.be.true; + + const close = oneEvent(el, "sp-closed"); + + await sendMouse({ + steps: [ + { + position: [rect.left + rect.width / 2, rect.top + rect.height / 2], + type: "click", + }, + ], + }); + await close; + + expect(el.open).to.be.false; + await aTimeout(50); + expect(el.open).to.be.false; + }); + it("should handle scroll event", async () => { + const renderMenuItems = (): TemplateResult[] => + Array.from( + { length: 30 }, + (_, i) => html` + + Menu Item ${i + 1} + + `, + ); + const handleActionMenuScroll = spy(); + const el = await fixture(html` + handleActionMenuScroll()}> + More Actions + Deselect + Select Inverse + Feather... + Select and Mask... + ${renderMenuItems()} + + `); + + await elementUpdated(el); + + expect(handleActionMenuScroll.called).to.be.false; + + el.dispatchEvent( + new Event("scroll", { cancelable: true, composed: true }), + ); + expect(handleActionMenuScroll).to.have.been.called; + }); + }); }; diff --git a/packages/alert-banner/stories/alert-banner.stories.ts b/packages/alert-banner/stories/alert-banner.stories.ts index 9ae9e736b1..90a326c8bc 100644 --- a/packages/alert-banner/stories/alert-banner.stories.ts +++ b/packages/alert-banner/stories/alert-banner.stories.ts @@ -10,67 +10,67 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; -import { AlertBannerVariants } from '@spectrum-web-components/alert-banner'; -import { AlertBannerMarkup } from './'; -import { argTypes } from './args.js'; +import { html, TemplateResult } from "@spectrum-web-components/base"; +import { AlertBannerVariants } from "@spectrum-web-components/alert-banner"; +import { AlertBannerMarkup } from ".//index.js"; +import { argTypes } from "./args.js"; interface Properties { - text: string; - variant: AlertBannerVariants; - dismissible: boolean; - open: boolean; - onClose?: (event: Event) => void; - actionLabel?: string; + text: string; + variant: AlertBannerVariants; + dismissible: boolean; + open: boolean; + onClose?: (event: Event) => void; + actionLabel?: string; } export default { - title: 'Alert Banner', - component: 'sp-alert-banner', - args: { - text: 'Your trial has expired', - dismissible: true, - open: true, - variant: 'neutral', - }, - argTypes, + title: "Alert Banner", + component: "sp-alert-banner", + args: { + text: "Your trial has expired", + dismissible: true, + open: true, + variant: "neutral", + }, + argTypes, }; export const Default = (args: Properties): TemplateResult => - AlertBannerMarkup(args); + AlertBannerMarkup(args); export const Info = (args: Properties): TemplateResult => - AlertBannerMarkup({ - ...args, - variant: 'info', - text: 'Your trial will expire in 3 days', - }); + AlertBannerMarkup({ + ...args, + variant: "info", + text: "Your trial will expire in 3 days", + }); export const Negative = (args: Properties): TemplateResult => - AlertBannerMarkup({ - ...args, - variant: 'negative', - text: 'Connection interrupted. Check your network to continue', - }); + AlertBannerMarkup({ + ...args, + variant: "negative", + text: "Connection interrupted. Check your network to continue", + }); export const TextWrapping = (args: Properties): TemplateResult => html` -
- ${AlertBannerMarkup({ - ...args, - variant: 'negative', - text: ` Your trial has expired. Please purchase to continue. +
+ ${AlertBannerMarkup({ + ...args, + variant: "negative", + text: ` Your trial has expired. Please purchase to continue. Your work has been saved and is ready for you to open again once you have purchased the software.`, - actionLabel: 'Purchase', - })} -
+ actionLabel: "Purchase", + })} +
`; export const Multilanguage = (args: Properties): TemplateResult => html` - ${AlertBannerMarkup({ - ...args, - variant: 'info', - text: `ستنتهي الفترة التجريبية الخاصة بك في الأسبوع المقبل`, - actionLabel: `اشتري الآن`, - })} + ${AlertBannerMarkup({ + ...args, + variant: "info", + text: `ستنتهي الفترة التجريبية الخاصة بك في الأسبوع المقبل`, + actionLabel: `اشتري الآن`, + })} `; diff --git a/packages/alert-banner/stories/template.ts b/packages/alert-banner/stories/template.ts index 8364fac639..9ef09e752c 100644 --- a/packages/alert-banner/stories/template.ts +++ b/packages/alert-banner/stories/template.ts @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { AlertBannerMarkup } from './'; +import { AlertBannerMarkup } from ".//index.js"; export const Template = AlertBannerMarkup; diff --git a/packages/asset/stories/asset.stories.ts b/packages/asset/stories/asset.stories.ts index e16e0e9613..5119e4e6d1 100644 --- a/packages/asset/stories/asset.stories.ts +++ b/packages/asset/stories/asset.stories.ts @@ -10,32 +10,28 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; +import { html, TemplateResult } from "@spectrum-web-components/base"; -import '@spectrum-web-components/asset/sp-asset.js'; -import { portrait } from '../../card/stories/images'; +import "@spectrum-web-components/asset/sp-asset.js"; +import { portrait } from "../../card/stories/images.js"; export default { - title: 'Asset', - component: 'sp-asset', + title: "Asset", + component: "sp-asset", }; export const Default = (): TemplateResult => { - return html` - - Demo Graphic - - `; + return html` + + Demo Graphic + + `; }; export const File = (): TemplateResult => { - return html` - - `; + return html` `; }; export const Folder = (): TemplateResult => { - return html` - - `; + return html` `; }; diff --git a/packages/asset/test/asset.test.ts b/packages/asset/test/asset.test.ts index 181afdde0a..2d23763009 100644 --- a/packages/asset/test/asset.test.ts +++ b/packages/asset/test/asset.test.ts @@ -10,33 +10,33 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { elementUpdated, expect, fixture } from '@open-wc/testing'; +import { elementUpdated, expect, fixture } from "@open-wc/testing"; -import { Asset } from '@spectrum-web-components/asset'; -import { testForLitDevWarnings } from '../../../test/testing-helpers'; -import { Default, File, Folder } from '../stories/asset.stories.js'; +import { Asset } from "@spectrum-web-components/asset"; +import { testForLitDevWarnings } from "../../../test/testing-helpers.js"; +import { Default, File, Folder } from "../stories/asset.stories.js"; -describe('Asset', () => { - testForLitDevWarnings(async () => await fixture(Default())); - it('loads default asset accessibly', async () => { - const el = await fixture(Default()); +describe("Asset", () => { + testForLitDevWarnings(async () => await fixture(Default())); + it("loads default asset accessibly", async () => { + const el = await fixture(Default()); - await elementUpdated(el); + await elementUpdated(el); - await expect(el).to.be.accessible(); - }); - it('loads [variant="file"] accessibly', async () => { - const el = await fixture(File()); + await expect(el).to.be.accessible(); + }); + it('loads [variant="file"] accessibly', async () => { + const el = await fixture(File()); - await elementUpdated(el); + await elementUpdated(el); - await expect(el).to.be.accessible(); - }); - it('loads [variant="folder"] accessibly', async () => { - const el = await fixture(Folder()); + await expect(el).to.be.accessible(); + }); + it('loads [variant="folder"] accessibly', async () => { + const el = await fixture(Folder()); - await elementUpdated(el); + await elementUpdated(el); - await expect(el).to.be.accessible(); - }); + await expect(el).to.be.accessible(); + }); }); diff --git a/packages/avatar/stories/avatar.stories.ts b/packages/avatar/stories/avatar.stories.ts index 76f9d8c7ab..c8a51c495c 100644 --- a/packages/avatar/stories/avatar.stories.ts +++ b/packages/avatar/stories/avatar.stories.ts @@ -9,79 +9,77 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; +import { html, TemplateResult } from "@spectrum-web-components/base"; -import '@spectrum-web-components/avatar/sp-avatar.js'; -import { AvatarSize } from '@spectrum-web-components/avatar'; -import { avatar } from './images'; +import "@spectrum-web-components/avatar/sp-avatar.js"; +import { AvatarSize } from "@spectrum-web-components/avatar"; +import { avatar } from "./images.js"; export default { - component: 'sp-avatar', - title: 'Avatar', - argTypes: { - disabled: { control: 'boolean' }, - label: { control: 'text' }, - src: { control: 'text' }, - }, - args: { - disabled: false, - label: 'Place dog', - src: avatar, - }, + component: "sp-avatar", + title: "Avatar", + argTypes: { + disabled: { control: "boolean" }, + label: { control: "text" }, + src: { control: "text" }, + }, + args: { + disabled: false, + label: "Place dog", + src: avatar, + }, }; interface StoryArgs { - disabled?: boolean; - label?: string; - src?: string; - size?: AvatarSize; + disabled?: boolean; + label?: string; + src?: string; + size?: AvatarSize; } const Template = ({ - label = 'Place Dog', - src = avatar, - size = 100, + label = "Place Dog", + src = avatar, + size = 100, }: StoryArgs = {}): TemplateResult => { - return html` - - `; + return html` `; }; const Link = ({ - disabled = false, - label = 'Place Dog', - src = avatar, - size = 100, + disabled = false, + label = "Place Dog", + src = avatar, + size = 100, }: StoryArgs = {}): TemplateResult => { - return html` - - `; + return html` + + `; }; export const size50 = (args: StoryArgs = {}): TemplateResult => - Template({ ...args, size: 50 }); + Template({ ...args, size: 50 }); export const size75 = (args: StoryArgs = {}): TemplateResult => - Template({ ...args, size: 75 }); + Template({ ...args, size: 75 }); export const size100 = (args: StoryArgs = {}): TemplateResult => - Template({ ...args, size: 100 }); + Template({ ...args, size: 100 }); export const size200 = (args: StoryArgs = {}): TemplateResult => - Template({ ...args, size: 200 }); + Template({ ...args, size: 200 }); export const size300 = (args: StoryArgs = {}): TemplateResult => - Template({ ...args, size: 300 }); + Template({ ...args, size: 300 }); export const size400 = (args: StoryArgs = {}): TemplateResult => - Template({ ...args, size: 400 }); + Template({ ...args, size: 400 }); export const size500 = (args: StoryArgs = {}): TemplateResult => - Template({ ...args, size: 500 }); + Template({ ...args, size: 500 }); export const size600 = (args: StoryArgs = {}): TemplateResult => - Template({ ...args, size: 600 }); + Template({ ...args, size: 600 }); export const size700 = (args: StoryArgs = {}): TemplateResult => - Template({ ...args, size: 700 }); + Template({ ...args, size: 700 }); export const linked = (args: StoryArgs = {}): TemplateResult => Link(args); export const disabled = (args: StoryArgs = {}): TemplateResult => Link(args); disabled.args = { disabled: true }; diff --git a/packages/avatar/test/avatar.test.ts b/packages/avatar/test/avatar.test.ts index 89f1d877a6..79af3fa6c1 100644 --- a/packages/avatar/test/avatar.test.ts +++ b/packages/avatar/test/avatar.test.ts @@ -8,118 +8,118 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import '@spectrum-web-components/avatar/sp-avatar.js'; -import { Avatar } from '@spectrum-web-components/avatar'; -import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; -import { testForLitDevWarnings } from '../../../test/testing-helpers'; - -describe('Avatar', () => { - testForLitDevWarnings( - async () => - await fixture(html` - - `) - ); - it('loads accessibly', async () => { - const el = await fixture(html` - - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - }); - it('loads accessibly with [href]', async () => { - const el = await fixture(html` - - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - }); - it('validates `size`', async () => { - const el = await fixture(html` - - `); - - await elementUpdated(el); - - expect(el.size).to.equal(100); - - el.setAttribute('size', '55'); - - await elementUpdated(el); - - expect(el.size).to.equal(100); - - el.setAttribute('size', '600'); - - await elementUpdated(el); - - expect(el.size).to.equal(600); - }); - it('loads with everything set', async () => { - const el = await fixture(html` - - `); - - await elementUpdated(el); - expect(el).to.not.be.undefined; - const imageEl = el.shadowRoot - ? (el.shadowRoot.querySelector('img') as HTMLImageElement) - : (el.querySelector('img') as HTMLImageElement); - - expect(imageEl.hasAttribute('alt')).to.be.true; - expect(imageEl.getAttribute('alt')).to.equal('Shantanu Narayen'); - }); - it('loads with no label', async () => { - const el = await fixture(html` - - `); - - await elementUpdated(el); - expect(el).to.not.be.undefined; - const imageEl = el.shadowRoot - ? (el.shadowRoot.querySelector('img') as HTMLImageElement) - : (el.querySelector('img') as HTMLImageElement); - - expect(imageEl.hasAttribute('alt')).to.be.false; - }); - it('can receive a `tabindex` without an `href`', async () => { - try { - const el = await fixture(html` - - `); - - await elementUpdated(el); - const focusEl = el.focusElement; - - expect(focusEl).to.exist; - } catch (error) { - expect(() => { - throw error; - }).to.throw('There should be no error.'); - } - }); +import "@spectrum-web-components/avatar/sp-avatar.js"; +import { Avatar } from "@spectrum-web-components/avatar"; +import { elementUpdated, expect, fixture, html } from "@open-wc/testing"; +import { testForLitDevWarnings } from "../../../test/testing-helpers.js"; + +describe("Avatar", () => { + testForLitDevWarnings( + async () => + await fixture(html` + + `), + ); + it("loads accessibly", async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + }); + it("loads accessibly with [href]", async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + }); + it("validates `size`", async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + + expect(el.size).to.equal(100); + + el.setAttribute("size", "55"); + + await elementUpdated(el); + + expect(el.size).to.equal(100); + + el.setAttribute("size", "600"); + + await elementUpdated(el); + + expect(el.size).to.equal(600); + }); + it("loads with everything set", async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + expect(el).to.not.be.undefined; + const imageEl = el.shadowRoot + ? (el.shadowRoot.querySelector("img") as HTMLImageElement) + : (el.querySelector("img") as HTMLImageElement); + + expect(imageEl.hasAttribute("alt")).to.be.true; + expect(imageEl.getAttribute("alt")).to.equal("Shantanu Narayen"); + }); + it("loads with no label", async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + expect(el).to.not.be.undefined; + const imageEl = el.shadowRoot + ? (el.shadowRoot.querySelector("img") as HTMLImageElement) + : (el.querySelector("img") as HTMLImageElement); + + expect(imageEl.hasAttribute("alt")).to.be.false; + }); + it("can receive a `tabindex` without an `href`", async () => { + try { + const el = await fixture(html` + + `); + + await elementUpdated(el); + const focusEl = el.focusElement; + + expect(focusEl).to.exist; + } catch (error) { + expect(() => { + throw error; + }).to.throw("There should be no error."); + } + }); }); diff --git a/packages/button-group/test/button-group.test.ts b/packages/button-group/test/button-group.test.ts index 8cb258df20..7c0e356dc9 100644 --- a/packages/button-group/test/button-group.test.ts +++ b/packages/button-group/test/button-group.test.ts @@ -10,31 +10,31 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { elementUpdated, expect, fixture } from '@open-wc/testing'; +import { elementUpdated, expect, fixture } from "@open-wc/testing"; -import '@spectrum-web-components/button-group/sp-button-group.js'; -import { ButtonGroup } from '..'; -import { buttons, buttonsVertical } from '../stories/button-group.stories.js'; -import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; +import "@spectrum-web-components/button-group/sp-button-group.js"; +import { ButtonGroup } from "../"; +import { testForLitDevWarnings } from "../../../test/testing-helpers.js"; +import { buttons, buttonsVertical } from "../stories/button-group.stories.js"; -describe('Buttongroup', () => { - testForLitDevWarnings( - async () => await fixture(buttons(buttons.args)) - ); - it('loads default button-group accessibly with sp-button', async () => { - const el = await fixture(buttons(buttons.args)); +describe("Buttongroup", () => { + testForLitDevWarnings( + async () => await fixture(buttons(buttons.args)), + ); + it("loads default button-group accessibly with sp-button", async () => { + const el = await fixture(buttons(buttons.args)); - await elementUpdated(el); + await elementUpdated(el); - await expect(el).to.be.accessible(); - }); - it('loads default button-group[vertial] accessibly with sp-button', async () => { - const el = await fixture( - buttonsVertical(buttonsVertical.args) - ); + await expect(el).to.be.accessible(); + }); + it("loads default button-group[vertial] accessibly with sp-button", async () => { + const el = await fixture( + buttonsVertical(buttonsVertical.args), + ); - await elementUpdated(el); + await elementUpdated(el); - await expect(el).to.be.accessible(); - }); + await expect(el).to.be.accessible(); + }); }); diff --git a/packages/button/test/clear-button.test.ts b/packages/button/test/clear-button.test.ts index 08d2d61225..ae0186845e 100644 --- a/packages/button/test/clear-button.test.ts +++ b/packages/button/test/clear-button.test.ts @@ -10,42 +10,27 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/button/sp-clear-button.js'; -import { ClearButton } from '@spectrum-web-components/button'; -import { expect, fixture, html } from '@open-wc/testing'; -import { testForLitDevWarnings } from '../../../test/testing-helpers'; +import "@spectrum-web-components/button/sp-clear-button.js"; +import { ClearButton } from "@spectrum-web-components/button"; +import { expect, fixture, html } from "@open-wc/testing"; +import { testForLitDevWarnings } from "../../../test/testing-helpers.js"; -describe('Clear Button', () => { - testForLitDevWarnings( - async () => - await fixture( - html` - - ` - ) - ); - ( - ['s', 'm', 'l', 'xl'] as ( - | 'xxs' - | 'xs' - | 's' - | 'm' - | 'l' - | 'xl' - | 'xxl' - )[] - ).map((size) => { - it(`loads - ${size}`, async () => { - const el = await fixture( - html` - - ` - ); +describe("Clear Button", () => { + testForLitDevWarnings( + async () => + await fixture(html` + + `), + ); + ( + ["s", "m", "l", "xl"] as ("xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl")[] + ).map((size) => { + it(`loads - ${size}`, async () => { + const el = await fixture(html` + + `); - await expect(el).to.be.accessible(); - }); - }); + await expect(el).to.be.accessible(); + }); + }); }); diff --git a/packages/button/test/close-button.test.ts b/packages/button/test/close-button.test.ts index 62b3e17bba..23b8829d81 100644 --- a/packages/button/test/close-button.test.ts +++ b/packages/button/test/close-button.test.ts @@ -10,42 +10,27 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/button/sp-close-button.js'; -import { CloseButton } from '@spectrum-web-components/button'; -import { expect, fixture, html } from '@open-wc/testing'; -import { testForLitDevWarnings } from '../../../test/testing-helpers'; +import "@spectrum-web-components/button/sp-close-button.js"; +import { CloseButton } from "@spectrum-web-components/button"; +import { expect, fixture, html } from "@open-wc/testing"; +import { testForLitDevWarnings } from "../../../test/testing-helpers.js"; -describe('Close Button', () => { - testForLitDevWarnings( - async () => - await fixture( - html` - - ` - ) - ); - ( - ['s', 'm', 'l', 'xl'] as ( - | 'xxs' - | 'xs' - | 's' - | 'm' - | 'l' - | 'xl' - | 'xxl' - )[] - ).map((size) => { - it(`loads - ${size}`, async () => { - const el = await fixture( - html` - - ` - ); +describe("Close Button", () => { + testForLitDevWarnings( + async () => + await fixture(html` + + `), + ); + ( + ["s", "m", "l", "xl"] as ("xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl")[] + ).map((size) => { + it(`loads - ${size}`, async () => { + const el = await fixture(html` + + `); - await expect(el).to.be.accessible(); - }); - }); + await expect(el).to.be.accessible(); + }); + }); }); diff --git a/packages/card/src/Card.ts b/packages/card/src/Card.ts index 0409365230..9821eb7e61 100644 --- a/packages/card/src/Card.ts +++ b/packages/card/src/Card.ts @@ -10,32 +10,32 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ +import "@spectrum-web-components/asset/sp-asset.js"; import { - CSSResultArray, - html, - nothing, - PropertyValues, - SizedMixin, - SpectrumElement, - TemplateResult, -} from '@spectrum-web-components/base'; -import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; + CSSResultArray, + html, + nothing, + PropertyValues, + SizedMixin, + SpectrumElement, + TemplateResult, +} from "@spectrum-web-components/base"; import { - property, - query, -} from '@spectrum-web-components/base/src/decorators.js'; -import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js'; -import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js'; -import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js'; -import '@spectrum-web-components/asset/sp-asset.js'; - -import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox'; -import '@spectrum-web-components/checkbox/sp-checkbox.js'; -import '@spectrum-web-components/popover/sp-popover.js'; -import '@spectrum-web-components/divider/sp-divider.js'; -import cardStyles from './card.css.js'; -import headingStyles from '@spectrum-web-components/styles/heading.js'; -import detailStyles from '@spectrum-web-components/styles/detail.js'; + property, + query, +} from "@spectrum-web-components/base/src/decorators.js"; +import { ifDefined } from "@spectrum-web-components/base/src/directives.js"; +import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js"; +import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js"; +import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js"; + +import "@spectrum-web-components/checkbox/sp-checkbox.js"; +import { Checkbox } from "@spectrum-web-components/checkbox/src/Checkbox"; +import "@spectrum-web-components/divider/sp-divider.js"; +import "@spectrum-web-components/popover/sp-popover.js"; +import detailStyles from "@spectrum-web-components/styles/detail.js"; +import headingStyles from "@spectrum-web-components/styles/heading.js"; +import cardStyles from "./card.css.js"; /** * @element sp-card @@ -51,318 +51,307 @@ import detailStyles from '@spectrum-web-components/styles/detail.js'; * @fires change - Announces a change in the `selected` property of a card */ export class Card extends LikeAnchor( - SizedMixin( - ObserveSlotPresence(FocusVisiblePolyfillMixin(SpectrumElement), [ - '[slot="cover-photo"]', - '[slot="preview"]', - ]), - { - validSizes: ['s', 'm'], - noDefaultSize: true, - } - ) + SizedMixin( + ObserveSlotPresence(FocusVisiblePolyfillMixin(SpectrumElement), [ + '[slot="cover-photo"]', + '[slot="preview"]', + ]), + { + validSizes: ["s", "m"], + noDefaultSize: true, + }, + ), ) { - public static override get styles(): CSSResultArray { - return [headingStyles, detailStyles, cardStyles]; - } + public static override get styles(): CSSResultArray { + return [headingStyles, detailStyles, cardStyles]; + } - @property() - public asset?: 'file' | 'folder'; + @property() + public asset?: "file" | "folder"; - @property({ reflect: true }) - public variant: 'standard' | 'gallery' | 'quiet' = 'standard'; + @property({ reflect: true }) + public variant: "standard" | "gallery" | "quiet" = "standard"; - @property({ type: Boolean, reflect: true }) - get selected(): boolean { - return this._selected; - } - set selected(selected: boolean) { - if (selected === this.selected) return; + @property({ type: Boolean, reflect: true }) + get selected(): boolean { + return this._selected; + } + set selected(selected: boolean) { + if (selected === this.selected) return; - this._selected = selected; - this.requestUpdate('selected', !this._selected); - } - - private _selected = false; - - @property() - public heading = ''; - - @property({ type: Boolean, reflect: true }) - public horizontal = false; - - @query('#like-anchor') - private likeAnchor?: HTMLAnchorElement; - - @property({ type: Boolean, reflect: true }) - public focused = false; - - @property({ type: Boolean, reflect: true }) - public toggles = false; - - @property() - public value = ''; - - @property() - public subheading = ''; - - protected get hasCoverPhoto(): boolean { - return this.getSlotContentPresence('[slot="cover-photo"]'); - } - - protected get hasPreview(): boolean { - return this.getSlotContentPresence('[slot="preview"]'); - } - - public override click(): void { - this.likeAnchor?.click(); - } - - private handleFocusin = (event: Event): void => { - this.focused = true; - const target = event.composedPath()[0]; - - if (target !== this) { - this.removeEventListener('keydown', this.handleKeydown); - - return; - } - - this.addEventListener('keydown', this.handleKeydown); - }; - - private handleFocusout(event: Event): void { - this.focused = false; - const target = event.composedPath()[0]; - - if (target === this) { - this.removeEventListener('keydown', this.handleKeydown); - } - } - - private handleKeydown(event: KeyboardEvent): void { - const { code } = event; - - switch (code) { - case 'Space': - this.toggleSelected(); - - if (this.toggles) { - event.preventDefault(); - break; - } - case 'Enter': - case 'NumpadEnter': - this.click(); - } - } - - private handleSelectedChange(event: Event & { target: Checkbox }): void { - event.stopPropagation(); - this.selected = event.target.checked; - this.announceChange(); - } - - public toggleSelected(): void { - if (!this.toggles) { - this.dispatchEvent( - new Event('click', { - bubbles: true, - composed: true, - }) - ); - - return; - } - - this.selected = !this.selected; - this.announceChange(); - } - - private announceChange(): void { - const applyDefault = this.dispatchEvent( - new Event('change', { - cancelable: true, - bubbles: true, - composed: true, - }) - ); - - if (!applyDefault) { - this.selected = !this.selected; - } - } - - private stopPropagationOnHref(event: Event): void { - if (this.href) { - event.stopPropagation(); - } - } - - private handlePointerdown(event: Event): void { - const path = event.composedPath(); - const hasAnchor = path.some( - (el) => (el as HTMLElement).localName === 'a' - ); - - if (hasAnchor) return; - - const start = +new Date(); - const handleEnd = (): void => { - const end = +new Date(); - - if (end - start < 200) { - this.click(); - } - - this.removeEventListener('pointerup', handleEnd); - this.removeEventListener('pointercancel', handleEnd); - }; - - this.addEventListener('pointerup', handleEnd); - this.addEventListener('pointercancel', handleEnd); - } - - protected get renderHeading(): TemplateResult { - return html` -
- ${this.heading} -
- `; - } - - protected get renderPreviewImage(): TemplateResult { - return html` - - - - ${this.variant !== 'quiet' && !this.horizontal - ? html` - - ` - : nothing} - `; - } - - protected get renderCoverImage(): TemplateResult { - return html` - - - - ${this.variant !== 'quiet' && !this.horizontal - ? html` - - ` - : nothing} - `; - } - - protected get images(): TemplateResult[] { - const images: TemplateResult[] = []; - - if (this.hasPreview) images.push(this.renderPreviewImage); - - if (this.hasCoverPhoto) images.push(this.renderCoverImage); - - return images; - } - - private renderImage(): TemplateResult[] { - if (this.horizontal) { - return this.images; - } - - if (this.variant !== 'standard') { - return [this.renderPreviewImage]; - } - - return this.images; - } - - private get renderSubtitleAndDescription(): TemplateResult { - return html` -
- ${this.subheading} -
- - `; - } - - protected override render(): TemplateResult { - return html` - ${this.renderImage()} -
-
- ${this.renderHeading} - ${this.variant === 'gallery' - ? this.renderSubtitleAndDescription - : nothing} - ${this.variant !== 'quiet' || this.size !== 's' - ? html` -
- -
- ` - : nothing} -
- ${this.variant !== 'gallery' - ? html` -
- ${this.renderSubtitleAndDescription} -
- ` - : nothing} -
- ${this.href - ? this.renderAnchor({ - id: 'like-anchor', - labelledby: 'heading', - }) - : nothing} - ${this.variant === 'standard' - ? html` - - ` - : nothing} - ${this.toggles - ? html` - - - - ` - : nothing} - ${this.variant === 'quiet' && this.size === 's' - ? html` -
- -
- ` - : nothing} - `; - } - - protected override firstUpdated(changes: PropertyValues): void { - super.firstUpdated(changes); - this.addEventListener('pointerdown', this.handlePointerdown); - this.addEventListener('focusin', this.handleFocusin); - this.shadowRoot.addEventListener('focusin', this.handleFocusin); - this.addEventListener('focusout', this.handleFocusout); - } + this._selected = selected; + this.requestUpdate("selected", !this._selected); + } + + private _selected = false; + + @property() + public heading = ""; + + @property({ type: Boolean, reflect: true }) + public horizontal = false; + + @query("#like-anchor") + private likeAnchor?: HTMLAnchorElement; + + @property({ type: Boolean, reflect: true }) + public focused = false; + + @property({ type: Boolean, reflect: true }) + public toggles = false; + + @property() + public value = ""; + + @property() + public subheading = ""; + + protected get hasCoverPhoto(): boolean { + return this.getSlotContentPresence('[slot="cover-photo"]'); + } + + protected get hasPreview(): boolean { + return this.getSlotContentPresence('[slot="preview"]'); + } + + public override click(): void { + this.likeAnchor?.click(); + } + + private handleFocusin = (event: Event): void => { + this.focused = true; + const target = event.composedPath()[0]; + + if (target !== this) { + this.removeEventListener("keydown", this.handleKeydown); + + return; + } + + this.addEventListener("keydown", this.handleKeydown); + }; + + private handleFocusout(event: Event): void { + this.focused = false; + const target = event.composedPath()[0]; + + if (target === this) { + this.removeEventListener("keydown", this.handleKeydown); + } + } + + private handleKeydown(event: KeyboardEvent): void { + const { code } = event; + + switch (code) { + case "Space": + this.toggleSelected(); + + if (this.toggles) { + event.preventDefault(); + break; + } + + break; + case "Enter": + case "NumpadEnter": + this.click(); + } + } + + private handleSelectedChange(event: Event & { target: Checkbox }): void { + event.stopPropagation(); + this.selected = event.target.checked; + this.announceChange(); + } + + public toggleSelected(): void { + if (!this.toggles) { + this.dispatchEvent( + new Event("click", { + bubbles: true, + composed: true, + }), + ); + + return; + } + + this.selected = !this.selected; + this.announceChange(); + } + + private announceChange(): void { + const applyDefault = this.dispatchEvent( + new Event("change", { + cancelable: true, + bubbles: true, + composed: true, + }), + ); + + if (!applyDefault) { + this.selected = !this.selected; + } + } + + private stopPropagationOnHref(event: Event): void { + if (this.href) { + event.stopPropagation(); + } + } + + private handlePointerdown(event: Event): void { + const path = event.composedPath(); + const hasAnchor = path.some((el) => (el as HTMLElement).localName === "a"); + + if (hasAnchor) return; + + const start = +new Date(); + const handleEnd = (): void => { + const end = +new Date(); + + if (end - start < 200) { + this.click(); + } + + this.removeEventListener("pointerup", handleEnd); + this.removeEventListener("pointercancel", handleEnd); + }; + + this.addEventListener("pointerup", handleEnd); + this.addEventListener("pointercancel", handleEnd); + } + + protected get renderHeading(): TemplateResult { + return html` +
+ ${this.heading} +
+ `; + } + + protected get renderPreviewImage(): TemplateResult { + return html` + + + + ${this.variant !== "quiet" && !this.horizontal + ? html` ` + : nothing} + `; + } + + protected get renderCoverImage(): TemplateResult { + return html` + + + + ${this.variant !== "quiet" && !this.horizontal + ? html` ` + : nothing} + `; + } + + protected get images(): TemplateResult[] { + const images: TemplateResult[] = []; + + if (this.hasPreview) images.push(this.renderPreviewImage); + + if (this.hasCoverPhoto) images.push(this.renderCoverImage); + + return images; + } + + private renderImage(): TemplateResult[] { + if (this.horizontal) { + return this.images; + } + + if (this.variant !== "standard") { + return [this.renderPreviewImage]; + } + + return this.images; + } + + private get renderSubtitleAndDescription(): TemplateResult { + return html` +
+ ${this.subheading} +
+ + `; + } + + protected override render(): TemplateResult { + return html` + ${this.renderImage()} +
+
+ ${this.renderHeading} + ${this.variant === "gallery" + ? this.renderSubtitleAndDescription + : nothing} + ${this.variant !== "quiet" || this.size !== "s" + ? html` +
+ +
+ ` + : nothing} +
+ ${this.variant !== "gallery" + ? html` +
${this.renderSubtitleAndDescription}
+ ` + : nothing} +
+ ${this.href + ? this.renderAnchor({ + id: "like-anchor", + labelledby: "heading", + }) + : nothing} + ${this.variant === "standard" + ? html` ` + : nothing} + ${this.toggles + ? html` + + + + ` + : nothing} + ${this.variant === "quiet" && this.size === "s" + ? html` +
+ +
+ ` + : nothing} + `; + } + + protected override firstUpdated(changes: PropertyValues): void { + super.firstUpdated(changes); + this.addEventListener("pointerdown", this.handlePointerdown); + this.addEventListener("focusin", this.handleFocusin); + this.shadowRoot.addEventListener("focusin", this.handleFocusin); + this.addEventListener("focusout", this.handleFocusout); + } } diff --git a/packages/card/stories/card.stories.ts b/packages/card/stories/card.stories.ts index feec1854fb..31b1ad6955 100644 --- a/packages/card/stories/card.stories.ts +++ b/packages/card/stories/card.stories.ts @@ -9,415 +9,416 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; +import { html, TemplateResult } from "@spectrum-web-components/base"; +import { ifDefined } from "lit-html/directives/if-defined.js"; -import '@spectrum-web-components/card/sp-card.js'; -import { landscape, portrait } from './images'; -import '@spectrum-web-components/icons-workflow/icons/sp-icon-file-txt.js'; -import '@spectrum-web-components/textfield/sp-textfield.js'; -import '@spectrum-web-components/action-menu/sp-action-menu.js'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/menu/sp-menu-divider.js'; -import '@spectrum-web-components/link/sp-link.js'; +import "@spectrum-web-components/action-menu/sp-action-menu.js"; +import "@spectrum-web-components/card/sp-card.js"; +import "@spectrum-web-components/icons-workflow/icons/sp-icon-file-txt.js"; +import "@spectrum-web-components/link/sp-link.js"; +import "@spectrum-web-components/menu/sp-menu-divider.js"; +import "@spectrum-web-components/menu/sp-menu-item.js"; +import "@spectrum-web-components/menu/sp-menu.js"; +import "@spectrum-web-components/textfield/sp-textfield.js"; +import { landscape, portrait } from "./images.js"; export default { - component: 'sp-card', - title: 'Card', - args: { - horizontal: false, - }, - argTypes: { - horizontal: { - name: 'horizontal', - type: { name: 'boolean', required: false }, - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - }, + component: "sp-card", + title: "Card", + args: { + horizontal: false, + }, + argTypes: { + horizontal: { + name: "horizontal", + type: { name: "boolean", required: false }, + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + }, }; export interface StoryArgs { - horizontal?: boolean; - size?: 's' | 'm'; - onClick?: ((event: Event) => void) | undefined; + horizontal?: boolean; + size?: "s" | "m"; + onClick?: ((event: Event) => void) | undefined; } export const Default = (args: StoryArgs): TemplateResult => { - return html` - - Demo Graphic -
Footer
- - `; + return html` + + Demo Graphic +
Footer
+ + `; }; Default.args = {}; export const SmallQuiet = (args: StoryArgs): TemplateResult => { - const { onClick } = args; + const { onClick } = args; - return html` - { - const composedTarget = event.composedPath()[0] as HTMLElement; + return html` + { + const composedTarget = event.composedPath()[0] as HTMLElement; - if (composedTarget.id !== 'like-anchor') return; + if (composedTarget.id !== "like-anchor") return; - event.stopPropagation(); - event.preventDefault(); - onClick && onClick(event); - }} - > -
- Footer with a - link to Google -
- - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - Demo Graphic - - `; + event.stopPropagation(); + event.preventDefault(); + onClick && onClick(event); + }} + > +
+ Footer with a + link to Google +
+ + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + Demo Graphic + + `; }; SmallQuiet.argTypes = { - onClick: { action: 'link click' }, + onClick: { action: "link click" }, }; export const href = (args: StoryArgs): TemplateResult => { - const { onClick } = args; + const { onClick } = args; - return html` - { - const composedTarget = event.composedPath()[0] as HTMLElement; + return html` + { + const composedTarget = event.composedPath()[0] as HTMLElement; - if (composedTarget.id !== 'like-anchor') return; + if (composedTarget.id !== "like-anchor") return; - event.stopPropagation(); - event.preventDefault(); - onClick && onClick(event); - }} - > -
- Footer with a - link to Google -
- - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - Demo Graphic - - `; + event.stopPropagation(); + event.preventDefault(); + onClick && onClick(event); + }} + > +
+ Footer with a + link to Google +
+ + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + Demo Graphic + + `; }; href.argTypes = { - onClick: { action: 'link click' }, + onClick: { action: "link click" }, }; export const actions = (args: StoryArgs): TemplateResult => { - return html` - - Demo Graphic -
Footer
- - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - - `; + return html` + + Demo Graphic +
Footer
+ + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + + `; }; export const Gallery = (args: StoryArgs): TemplateResult => { - return html` - - Demo Graphic -
10/15/18
- - `; + return html` + + Demo Graphic +
10/15/18
+ + `; }; export const noPreviewImage = (args: StoryArgs): TemplateResult => { - return html` - -
Footer
- - `; + return html` + +
Footer
+ + `; }; export const Quiet = (args: StoryArgs): TemplateResult => { - return html` -
- - Demo Graphic -
10/15/18
- -
- `; + return html` +
+ + Demo Graphic +
10/15/18
+ +
+ `; }; export const quietFile = (args: StoryArgs): TemplateResult => { - return html` -
- - Demo Graphic -
File Name
-
10/15/18
- -
- `; + return html` +
+ + Demo Graphic +
File Name
+
10/15/18
+ +
+ `; }; export const quietFolder = (args: StoryArgs): TemplateResult => { - return html` -
- - Demo Graphic -
Folder Name
-
10/15/18
- -
- `; + return html` +
+ + Demo Graphic +
Folder Name
+
10/15/18
+ +
+ `; }; export const quietActions = (args: StoryArgs): TemplateResult => { - return html` -
- - Demo Graphic -
10/15/18
- - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - -
- `; + return html` +
+ + Demo Graphic +
10/15/18
+ + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + +
+ `; }; -quietActions.storyName = 'Quiet w/ Actions'; +quietActions.storyName = "Quiet w/ Actions"; export const Horizontal = (args: StoryArgs): TemplateResult => { - return html` - - - - `; + return html` + + + + `; }; Horizontal.args = { - horizontal: true, + horizontal: true, }; export const horizontalWithHREF = (args: StoryArgs): TemplateResult => { - return html` - - - - `; + return html` + + + + `; }; horizontalWithHREF.args = { - horizontal: true, + horizontal: true, }; export const smallQuiet = (args: StoryArgs): TemplateResult => { - return html` -
- - Demo Graphic -
Footer
- - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - -
- `; + return html` +
+ size=${ifDefined(args.size)} + size=${args.size} + ?horizontal=${args.horizontal} + heading="Card Heading" + subheading="JPG" + variant="quiet" + style="width: 115px" + > + Demo Graphic +
Footer
+ + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + +
+ `; }; smallQuiet.args = { - size: 's', + size: "s", }; export const SlottedHeading = (args: StoryArgs): TemplateResult => { - return html` - - - Demo Graphic - -
Last modified on 6/17/2020, 3:37 PM
- - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - - `; + ?horizontal=${args.horizontal} + > + Demo Graphic + +
Last modified on 6/17/2020, 3:37 PM
+ + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + + `; }; diff --git a/packages/checkbox/test/checkbox.test.ts b/packages/checkbox/test/checkbox.test.ts index 941165d2f3..078bb4856c 100644 --- a/packages/checkbox/test/checkbox.test.ts +++ b/packages/checkbox/test/checkbox.test.ts @@ -10,413 +10,400 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/checkbox/sp-checkbox.js'; -import { Checkbox } from '../'; import { - elementUpdated, - expect, - fixture, - html, - triggerBlurFor, - waitUntil, -} from '@open-wc/testing'; -import '@spectrum-web-components/shared/src/focus-visible.js'; -import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; -import { a11ySnapshot, findAccessibilityNode } from '@web/test-runner-commands'; + elementUpdated, + expect, + fixture, + html, + triggerBlurFor, + waitUntil, +} from "@open-wc/testing"; +import "@spectrum-web-components/checkbox/sp-checkbox.js"; +import "@spectrum-web-components/shared/src/focus-visible.js"; +import { a11ySnapshot, findAccessibilityNode } from "@web/test-runner-commands"; +import { Checkbox } from "../"; +import { testForLitDevWarnings } from "../../../test/testing-helpers.js"; function inputForCheckbox(checkbox: Checkbox): HTMLInputElement { - if (!checkbox.shadowRoot) throw new Error('No shadowRoot'); + if (!checkbox.shadowRoot) throw new Error("No shadowRoot"); - return checkbox.shadowRoot.querySelector('#input') as HTMLInputElement; + return checkbox.shadowRoot.querySelector("#input") as HTMLInputElement; } function labelForCheckbox(checkbox: Checkbox): HTMLLabelElement { - if (!checkbox.shadowRoot) throw new Error('No shadowRoot'); + if (!checkbox.shadowRoot) throw new Error("No shadowRoot"); - const labelEl = checkbox.shadowRoot.querySelector('label'); + const labelEl = checkbox.shadowRoot.querySelector("label"); - if (!labelEl) { - throw new Error('Failed to find label in shadowRoot'); - } + if (!labelEl) { + throw new Error("Failed to find label in shadowRoot"); + } - return labelEl; + return labelEl; } function labelNodeForCheckbox(checkbox: Checkbox): Node { - if (!checkbox.shadowRoot) throw new Error('No shadowRoot'); + if (!checkbox.shadowRoot) throw new Error("No shadowRoot"); - const slotEl = checkbox.shadowRoot.querySelector('slot'); + const slotEl = checkbox.shadowRoot.querySelector("slot"); - if (!slotEl) { - throw new Error('Failed to find slot in shadowRoot'); - } + if (!slotEl) { + throw new Error("Failed to find slot in shadowRoot"); + } - return slotEl.assignedNodes()[0]; + return slotEl.assignedNodes()[0]; } -describe('Checkbox', () => { - let testFixture: HTMLDivElement; - - beforeEach(async () => { - testFixture = await fixture(html` -
-
- - Component - - - Check 1 - - - Check 2 - - - Check 3 - - - Check 4 - - - Check 5 - -
-
- `); - }); - - it('loads', async () => { - const el = testFixture.querySelector('sp-checkbox') as Checkbox; - - expect(el).to.not.equal(undefined); - const textNode = labelNodeForCheckbox(el); - const content = (textNode.textContent || '').trim(); - - expect(content).to.equal('Component'); - }); - testForLitDevWarnings( - async () => - await fixture(html` - Not Checked - `) - ); - - it('loads default checkbox accessibly', async () => { - const el = await fixture(html` - Not Checked - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - - const labelEl = labelForCheckbox(el); - const inputEl = inputForCheckbox(el); - - expect(labelEl.getAttribute('for')).to.equal(inputEl.id); - expect(inputEl.checked).to.be.false; - expect(inputEl.indeterminate).to.be.false; - - type NamedRoledAndCheckedNode = { - name: string; - role: string; - checked: boolean; - }; - const snapshot = (await a11ySnapshot( - {} - )) as unknown as NamedRoledAndCheckedNode & { - children: NamedRoledAndCheckedNode[]; - }; - - expect( - findAccessibilityNode( - snapshot, - (node) => - node.role === 'checkbox' && - !node.checked && - node.name === 'Not Checked' - ), - 'Has a named and not checked "checkbox" element' - ).to.not.be.null; - }); - - it('loads `checked` checkbox accessibly', async () => { - const el = await fixture(html` - Checked - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - - const labelEl = labelForCheckbox(el); - const inputEl = inputForCheckbox(el); - - expect(labelEl.getAttribute('for')).to.equal(inputEl.id); - expect(inputEl.checked).to.be.true; - expect(inputEl.indeterminate).to.be.false; - - type NamedRoledAndCheckedNode = { - name: string; - role: string; - checked: boolean; - }; - const snapshot = (await a11ySnapshot( - {} - )) as unknown as NamedRoledAndCheckedNode & { - children: NamedRoledAndCheckedNode[]; - }; - - expect( - findAccessibilityNode( - snapshot, - (node) => - node.role === 'checkbox' && - node.checked && - node.name === 'Checked' - ), - 'Has a named and checked "checkbox" element' - ).to.not.be.null; - }); - - it('is `invalid` checkbox accessibly', async () => { - const el = await fixture(html` - Invalid Not Checked - `); - - await elementUpdated(el); - - await expect(el).to.be.accessible(); - - const labelEl = labelForCheckbox(el); - const inputEl = inputForCheckbox(el); - - expect(labelEl.getAttribute('for')).to.equal(inputEl.id); - expect(inputEl).to.have.attribute('aria-invalid', 'true'); - }); - - it('autofocuses', async () => { - const autoElement = testFixture.querySelector( - 'sp-checkbox[autofocus]' - ) as Checkbox; +describe("Checkbox", () => { + let testFixture: HTMLDivElement; + + beforeEach(async () => { + testFixture = await fixture(html` +
+
+ Component + + Check 1 + + + Check 2 + + + Check 3 + + Check 4 + Check 5 +
+
+ `); + }); + + it("loads", async () => { + const el = testFixture.querySelector("sp-checkbox") as Checkbox; + + expect(el).to.not.equal(undefined); + const textNode = labelNodeForCheckbox(el); + const content = (textNode.textContent || "").trim(); + + expect(content).to.equal("Component"); + }); + testForLitDevWarnings( + async () => + await fixture(html` Not Checked `), + ); + + it("loads default checkbox accessibly", async () => { + const el = await fixture(html` + Not Checked + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + + const labelEl = labelForCheckbox(el); + const inputEl = inputForCheckbox(el); + + expect(labelEl.getAttribute("for")).to.equal(inputEl.id); + expect(inputEl.checked).to.be.false; + expect(inputEl.indeterminate).to.be.false; + + type NamedRoledAndCheckedNode = { + name: string; + role: string; + checked: boolean; + }; + const snapshot = (await a11ySnapshot( + {}, + )) as unknown as NamedRoledAndCheckedNode & { + children: NamedRoledAndCheckedNode[]; + }; + + expect( + findAccessibilityNode( + snapshot, + (node) => + node.role === "checkbox" && + !node.checked && + node.name === "Not Checked", + ), + 'Has a named and not checked "checkbox" element', + ).to.not.be.null; + }); + + it("loads `checked` checkbox accessibly", async () => { + const el = await fixture(html` + Checked + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + + const labelEl = labelForCheckbox(el); + const inputEl = inputForCheckbox(el); + + expect(labelEl.getAttribute("for")).to.equal(inputEl.id); + expect(inputEl.checked).to.be.true; + expect(inputEl.indeterminate).to.be.false; + + type NamedRoledAndCheckedNode = { + name: string; + role: string; + checked: boolean; + }; + const snapshot = (await a11ySnapshot( + {}, + )) as unknown as NamedRoledAndCheckedNode & { + children: NamedRoledAndCheckedNode[]; + }; + + expect( + findAccessibilityNode( + snapshot, + (node) => + node.role === "checkbox" && node.checked && node.name === "Checked", + ), + 'Has a named and checked "checkbox" element', + ).to.not.be.null; + }); + + it("is `invalid` checkbox accessibly", async () => { + const el = await fixture(html` + Invalid Not Checked + `); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + + const labelEl = labelForCheckbox(el); + const inputEl = inputForCheckbox(el); - expect(autoElement).to.exist; - await waitUntil( - () => document.activeElement === autoElement, - 'Autofocused' - ); + expect(labelEl.getAttribute("for")).to.equal(inputEl.id); + expect(inputEl).to.have.attribute("aria-invalid", "true"); + }); - await triggerBlurFor(autoElement); + it("autofocuses", async () => { + const autoElement = testFixture.querySelector( + "sp-checkbox[autofocus]", + ) as Checkbox; - expect(document.activeElement).to.not.equal(autoElement); - }); - - it('`click()`ing host clicks `focusElement`', async () => { - const el = await fixture(html` - Checked - `); + expect(autoElement).to.exist; + await waitUntil( + () => document.activeElement === autoElement, + "Autofocused", + ); - await elementUpdated(el); - - expect(el.checked, 'checked initially').to.be.true; - - el.click(); - await elementUpdated(el); + await triggerBlurFor(autoElement); - expect(el.checked, 'unchecked').to.be.false; + expect(document.activeElement).to.not.equal(autoElement); + }); - el.click(); - await elementUpdated(el); + it("`click()`ing host clicks `focusElement`", async () => { + const el = await fixture(html` + Checked + `); - expect(el.checked, 'checked again').to.be.true; - }); + await elementUpdated(el); - it('respects checked attribute', () => { - let el = testFixture.querySelector('#checkbox0') as Checkbox; + expect(el.checked, "checked initially").to.be.true; + + el.click(); + await elementUpdated(el); - expect(el.checked).to.be.false; + expect(el.checked, "unchecked").to.be.false; - el = testFixture.querySelector('#checkbox1') as Checkbox; - expect(el.checked).to.be.true; - }); + el.click(); + await elementUpdated(el); - it('has name attribute', () => { - let el = testFixture.querySelector('#checkbox0') as Checkbox; + expect(el.checked, "checked again").to.be.true; + }); - el = testFixture.querySelector('#checkbox1') as Checkbox; - expect(el.hasAttribute('name')); - expect(el.name).to.be.undefined; - el.setAttribute('name', 'test'); - expect(el.name).to.be.equal('test'); - }); + it("respects checked attribute", () => { + let el = testFixture.querySelector("#checkbox0") as Checkbox; - it('handles click events', async () => { - const el = testFixture.querySelector('#checkbox1') as Checkbox; + expect(el.checked).to.be.false; - expect(el.checked).to.be.true; + el = testFixture.querySelector("#checkbox1") as Checkbox; + expect(el.checked).to.be.true; + }); - inputForCheckbox(el).click(); - await elementUpdated(el); + it("has name attribute", () => { + let el = testFixture.querySelector("#checkbox0") as Checkbox; - expect(el.checked).to.be.false; - }); + el = testFixture.querySelector("#checkbox1") as Checkbox; + expect(el.hasAttribute("name")); + expect(el.name).to.be.undefined; + el.setAttribute("name", "test"); + expect(el.name).to.be.equal("test"); + }); - it('can have `change` events cancelled', async () => { - const el = testFixture.querySelector('#checkbox0') as Checkbox; + it("handles click events", async () => { + const el = testFixture.querySelector("#checkbox1") as Checkbox; - await elementUpdated(el); - expect(el.checked).to.be.false; + expect(el.checked).to.be.true; - inputForCheckbox(el).click(); - await elementUpdated(el); + inputForCheckbox(el).click(); + await elementUpdated(el); - expect(el.checked).to.be.true; + expect(el.checked).to.be.false; + }); - el.addEventListener('change', (event: Event) => event.preventDefault()); - inputForCheckbox(el).click(); - await elementUpdated(el); + it("can have `change` events cancelled", async () => { + const el = testFixture.querySelector("#checkbox0") as Checkbox; - expect(el.checked).to.be.true; - }); - it('should recognize readonly property', async () => { - const el: Checkbox = await fixture(''); + await elementUpdated(el); + expect(el.checked).to.be.false; - expect(el.readonly).to.not.throw; - expect(el.readonly).to.be.a('boolean'); - }); - it('maintains its value when [readonly]', async () => { - const el = await fixture(html` - Component - `); + inputForCheckbox(el).click(); + await elementUpdated(el); - expect(el.checked).to.be.true; + expect(el.checked).to.be.true; - inputForCheckbox(el).click(); - await elementUpdated(el); + el.addEventListener("change", (event: Event) => event.preventDefault()); + inputForCheckbox(el).click(); + await elementUpdated(el); - expect(el.checked).to.be.true; - }); + expect(el.checked).to.be.true; + }); + it("should recognize readonly property", async () => { + const el: Checkbox = await fixture(""); - it('`indeterminate, checked` becomes `not checked` on click', async () => { - const el = await fixture(html` - - indeterminate, checked - - `); + expect(el.readonly).to.not.throw; + expect(el.readonly).to.be.a("boolean"); + }); + it("maintains its value when [readonly]", async () => { + const el = await fixture(html` + Component + `); - expect(el.checked).to.be.true; - expect(el.indeterminate).to.be.true; + expect(el.checked).to.be.true; - const inputEl = inputForCheckbox(el); + inputForCheckbox(el).click(); + await elementUpdated(el); - expect(inputEl.checked).to.be.true; - expect(inputEl.indeterminate).to.be.true; + expect(el.checked).to.be.true; + }); - el.click(); - await elementUpdated(el); + it("`indeterminate, checked` becomes `not checked` on click", async () => { + const el = await fixture(html` + + indeterminate, checked + + `); - expect(el.checked).to.be.false; - expect(el.indeterminate).to.be.false; - expect(inputEl.checked).to.be.false; - expect(inputEl.indeterminate).to.be.false; - }); - - it('`indeterminate, not checked` becomes `checked` on click', async () => { - const el = await fixture(html` - - indeterminate, checked - - `); - - expect(el.checked).to.be.false; - expect(el.indeterminate).to.be.true; - - const inputEl = inputForCheckbox(el); - - expect(inputEl.checked).to.be.false; - expect(inputEl.indeterminate).to.be.true; - - el.click(); - await elementUpdated(el); - - expect(el.checked).to.be.true; - expect(el.indeterminate).to.be.false; - expect(inputEl.checked).to.be.true; - expect(inputEl.indeterminate).to.be.false; - }); - - it('updates checkmark icons in response to size', async function () { - const el = await fixture(html` - sizes checkbox - `); - - const getCheckmarkLocalName = (): string => { - return (el.shadowRoot.querySelector('#checkmark') as HTMLElement) - .localName; - }; - - expect(el.size).to.equal('m'); - let checkmarkLocalname = getCheckmarkLocalName(); - - el.size = 's'; - await elementUpdated(el); - expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname); - - checkmarkLocalname = getCheckmarkLocalName(); - el.size = 'l'; - await elementUpdated(el); - expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname); - - checkmarkLocalname = getCheckmarkLocalName(); - el.size = 'xl'; - await elementUpdated(el); - expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname); - }); - - it('updates partialCheckmark icons in response to size', async function () { - const el = await fixture(html` - sizes checkbox - `); - - const getPartialCheckmarkLocalName = (): string => { - return ( - el.shadowRoot.querySelector('#partialCheckmark') as HTMLElement - ).localName; - }; - - expect(el.size).to.equal('m'); - let partialCheckmarkLocalname = getPartialCheckmarkLocalName(); - - el.size = 's'; - await elementUpdated(el); - expect(getPartialCheckmarkLocalName()).to.not.equal( - partialCheckmarkLocalname - ); - - partialCheckmarkLocalname = getPartialCheckmarkLocalName(); - el.size = 'l'; - await elementUpdated(el); - expect(getPartialCheckmarkLocalName()).to.not.equal( - partialCheckmarkLocalname - ); - - partialCheckmarkLocalname = getPartialCheckmarkLocalName(); - el.size = 'xl'; - await elementUpdated(el); - expect(getPartialCheckmarkLocalName()).to.not.equal( - partialCheckmarkLocalname - ); - }); - - it('updates tabindex when no longer disabled', async function () { - const el = await fixture(html` - disabled checkbox - `); - - el.click(); - await elementUpdated(el); - expect(el.checked).to.be.false; - expect(el.tabIndex).to.equal(-1); - el.removeAttribute('disabled'); - await elementUpdated(el); - expect(el.tabIndex).to.equal(0); - }); + expect(el.checked).to.be.true; + expect(el.indeterminate).to.be.true; + + const inputEl = inputForCheckbox(el); + + expect(inputEl.checked).to.be.true; + expect(inputEl.indeterminate).to.be.true; + + el.click(); + await elementUpdated(el); + + expect(el.checked).to.be.false; + expect(el.indeterminate).to.be.false; + expect(inputEl.checked).to.be.false; + expect(inputEl.indeterminate).to.be.false; + }); + + it("`indeterminate, not checked` becomes `checked` on click", async () => { + const el = await fixture(html` + indeterminate, checked + `); + + expect(el.checked).to.be.false; + expect(el.indeterminate).to.be.true; + + const inputEl = inputForCheckbox(el); + + expect(inputEl.checked).to.be.false; + expect(inputEl.indeterminate).to.be.true; + + el.click(); + await elementUpdated(el); + + expect(el.checked).to.be.true; + expect(el.indeterminate).to.be.false; + expect(inputEl.checked).to.be.true; + expect(inputEl.indeterminate).to.be.false; + }); + + it("updates checkmark icons in response to size", async function () { + const el = await fixture(html` + sizes checkbox + `); + + const getCheckmarkLocalName = (): string => { + return (el.shadowRoot.querySelector("#checkmark") as HTMLElement) + .localName; + }; + + expect(el.size).to.equal("m"); + let checkmarkLocalname = getCheckmarkLocalName(); + + el.size = "s"; + await elementUpdated(el); + expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname); + + checkmarkLocalname = getCheckmarkLocalName(); + el.size = "l"; + await elementUpdated(el); + expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname); + + checkmarkLocalname = getCheckmarkLocalName(); + el.size = "xl"; + await elementUpdated(el); + expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname); + }); + + it("updates partialCheckmark icons in response to size", async function () { + const el = await fixture(html` + sizes checkbox + `); + + const getPartialCheckmarkLocalName = (): string => { + return (el.shadowRoot.querySelector("#partialCheckmark") as HTMLElement) + .localName; + }; + + expect(el.size).to.equal("m"); + let partialCheckmarkLocalname = getPartialCheckmarkLocalName(); + + el.size = "s"; + await elementUpdated(el); + expect(getPartialCheckmarkLocalName()).to.not.equal( + partialCheckmarkLocalname, + ); + + partialCheckmarkLocalname = getPartialCheckmarkLocalName(); + el.size = "l"; + await elementUpdated(el); + expect(getPartialCheckmarkLocalName()).to.not.equal( + partialCheckmarkLocalname, + ); + + partialCheckmarkLocalname = getPartialCheckmarkLocalName(); + el.size = "xl"; + await elementUpdated(el); + expect(getPartialCheckmarkLocalName()).to.not.equal( + partialCheckmarkLocalname, + ); + }); + + it("updates tabindex when no longer disabled", async function () { + const el = await fixture(html` + disabled checkbox + `); + + el.click(); + await elementUpdated(el); + expect(el.checked).to.be.false; + expect(el.tabIndex).to.equal(-1); + el.removeAttribute("disabled"); + await elementUpdated(el); + expect(el.tabIndex).to.equal(0); + }); }); diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts index 7dd9445171..a41e829e4c 100644 --- a/packages/color-area/src/ColorArea.ts +++ b/packages/color-area/src/ColorArea.ts @@ -11,35 +11,35 @@ governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - PropertyValues, - SpectrumElement, - TemplateResult, -} from '@spectrum-web-components/base'; + CSSResultArray, + html, + PropertyValues, + SpectrumElement, + TemplateResult, +} from "@spectrum-web-components/base"; import { - ifDefined, - styleMap, -} from '@spectrum-web-components/base/src/directives.js'; + ifDefined, + styleMap, +} from "@spectrum-web-components/base/src/directives.js"; import { - property, - query, -} from '@spectrum-web-components/base/src/decorators.js'; -import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js'; -import { SWCResizeObserverEntry, WithSWCResizeObserver } from './types'; -import type { ColorHandle } from '@spectrum-web-components/color-handle'; -import '@spectrum-web-components/color-handle/sp-color-handle.js'; + property, + query, +} from "@spectrum-web-components/base/src/decorators.js"; +import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js"; +import { SWCResizeObserverEntry, WithSWCResizeObserver } from "./types.js"; +import type { ColorHandle } from "@spectrum-web-components/color-handle"; +import "@spectrum-web-components/color-handle/sp-color-handle.js"; import { - ColorController, - ColorValue, -} from '@spectrum-web-components/reactive-controllers/src/Color.js'; -import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js'; + ColorController, + ColorValue, +} from "@spectrum-web-components/reactive-controllers/src/Color.js"; +import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js"; import { - isAndroid, - isIOS, -} from '@spectrum-web-components/shared/src/platform.js'; + isAndroid, + isIOS, +} from "@spectrum-web-components/shared/src/platform.js"; -import styles from './color-area.css.js'; +import styles from "./color-area.css.js"; /** * @element sp-color-area @@ -50,571 +50,549 @@ import styles from './color-area.css.js'; * @fires change - An alteration to the value of the Color Area has been committed by the user. */ export class ColorArea extends SpectrumElement { - public static override get styles(): CSSResultArray { - return [styles]; - } + public static override get styles(): CSSResultArray { + return [styles]; + } - @property({ type: String, reflect: true }) - public override dir!: 'ltr' | 'rtl'; + @property({ type: String, reflect: true }) + public override dir!: "ltr" | "rtl"; - @property({ type: Boolean, reflect: true }) - public disabled = false; + @property({ type: Boolean, reflect: true }) + public disabled = false; - @property({ type: Boolean, reflect: true }) - public focused = false; + @property({ type: Boolean, reflect: true }) + public focused = false; - @property({ type: String, attribute: 'label-x' }) - public labelX = 'saturation'; + @property({ type: String, attribute: "label-x" }) + public labelX = "saturation"; - @property({ type: String, attribute: 'label-y' }) - public labelY = 'luminosity'; + @property({ type: String, attribute: "label-y" }) + public labelY = "luminosity"; - @query('.handle') - private handle!: ColorHandle; + @query(".handle") + private handle!: ColorHandle; - private languageResolver = new LanguageResolutionController(this); + private languageResolver = new LanguageResolutionController(this); - private colorController = new ColorController(this, { - extractColorFromState: () => ({ - h: this.hue, - s: this.x, - v: this.y, - }), - applyColorToState: ({ s, v }) => { - this._x = s; - this._y = v; - this.requestUpdate(); - }, - }); + private colorController = new ColorController(this, { + extractColorFromState: () => ({ + h: this.hue, + s: this.x, + v: this.y, + }), + applyColorToState: ({ s, v }) => { + this._x = s; + this._y = v; + this.requestUpdate(); + }, + }); - @property({ type: Number }) - public get hue(): number { - return this.colorController.hue; - } + @property({ type: Number }) + public get hue(): number { + return this.colorController.hue; + } - public set hue(value: number) { - this.colorController.hue = value; - } + public set hue(value: number) { + this.colorController.hue = value; + } - @property({ type: String }) - public get value(): ColorValue { - return this.colorController.color; - } + @property({ type: String }) + public get value(): ColorValue { + return this.colorController.color; + } - @property({ type: String }) - public get color(): ColorValue { - return this.colorController.color; - } + @property({ type: String }) + public get color(): ColorValue { + return this.colorController.color; + } - public set color(color: ColorValue) { - this.colorController.color = color; - } + public set color(color: ColorValue) { + this.colorController.color = color; + } - @property({ attribute: false }) - private activeAxis = 'x'; + @property({ attribute: false }) + private activeAxis = "x"; - @property({ type: Number }) - public get x(): number { - return this._x; - } + @property({ type: Number }) + public get x(): number { + return this._x; + } - public set x(x: number) { - if (x === this.x) { - return; - } + public set x(x: number) { + if (x === this.x) { + return; + } - const oldValue = this.x; + const oldValue = this.x; - this._x = x; - - if (this.inputX) { - // Use the native `input[type='range']` control to validate this value after `firstUpdate` - this.inputX.value = x.toString(); - this._x = this.inputX.valueAsNumber; - } - - this.requestUpdate('x', oldValue); - this.colorController.applyColorFromState(); - } - - private _x = 1; - - @property({ type: Number }) - public get y(): number { - return this._y; - } - - public set y(y: number) { - if (y === this.y) { - return; - } - - const oldValue = this.y; - - this._y = y; - - if (this.inputY) { - // Use the native `input[type='range']` control to validate this value after `firstUpdate` - this.inputY.value = y.toString(); - this._y = this.inputY.valueAsNumber; - } - - this.requestUpdate('y', oldValue); - this.colorController.applyColorFromState(); - } - - private _y = 1; - - @property({ type: Number }) - public step = 0.01; - - @query('[name="x"]') - public inputX!: HTMLInputElement; - - @query('[name="y"]') - public inputY!: HTMLInputElement; - - private altered = 0; - - private activeKeys = new Set(); - - private _valueChanged = false; - - public override focus(focusOptions: FocusOptions = {}): void { - super.focus(focusOptions); - this.forwardFocus(); - } - - private forwardFocus(): void { - this.focused = this.hasVisibleFocusInTree(); - - if (this.activeAxis === 'x') { - this.inputX.focus(); - } else { - this.inputY.focus(); - } - } - - private handleFocus(): void { - this.focused = true; - this._valueChanged = false; - } - - public handleBlur(): void { - if (this._pointerDown) { - return; - } - - this.altered = 0; - this.focused = false; - this._valueChanged = false; - } - - private handleKeydown(event: KeyboardEvent): void { - const { code } = event; - - this.focused = true; - this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter( - (key) => !!key - ).length; - const isArrowKey = - code.search('Arrow') === 0 || - code.search('Page') === 0 || - code.search('Home') === 0 || - code.search('End') === 0; - - if (isArrowKey) { - event.preventDefault(); - this.activeKeys.add(code); - this.handleKeypress(); - } - } - - private handleKeypress(): void { - let deltaX = 0; - let deltaY = 0; - const step = Math.max(this.step, this.altered * 5 * this.step); - - this.activeKeys.forEach((code) => { - switch (code) { - case 'ArrowUp': - deltaY = step; - break; - case 'ArrowDown': - deltaY = step * -1; - break; - case 'ArrowLeft': - deltaX = this.step * (this.isLTR ? -1 : 1); - break; - case 'ArrowRight': - deltaX = this.step * (this.isLTR ? 1 : -1); - break; - case 'PageUp': - deltaY = step * 10; - break; - case 'PageDown': - deltaY = step * -10; - break; - case 'Home': - deltaX = step * (this.isLTR ? -10 : 10); - break; - case 'End': - deltaX = step * (this.isLTR ? 10 : -10); - break; - /* c8 ignore next 2 */ - default: - break; - } - }); - - if (deltaX != 0) { - this.activeAxis = 'x'; - this.inputX.focus(); - } else if (deltaY != 0) { - this.activeAxis = 'y'; - this.inputY.focus(); - } - - this.x = Math.min(1, Math.max(this.x + deltaX, 0)); - this.y = Math.min(1, Math.max(this.y + deltaY, 0)); - - this.colorController.savePreviousColor(); - this.colorController.applyColorFromState(); - - if (deltaX != 0 || deltaY != 0) { - this._valueChanged = true; - this.dispatchEvent( - new Event('input', { - bubbles: true, - composed: true, - }) - ); - const applyDefault = this.dispatchEvent( - new Event('change', { - bubbles: true, - composed: true, - cancelable: true, - }) - ); - - if (!applyDefault) { - this.colorController.restorePreviousColor(); - } - } - } - - private handleKeyup(event: KeyboardEvent): void { - event.preventDefault(); - const { code } = event; - - this.activeKeys.delete(code); - } - - private handleInput(event: Event & { target: HTMLInputElement }): void { - const { valueAsNumber, name } = event.target; - - this[name as 'x' | 'y'] = valueAsNumber; - this.colorController.applyColorFromState(); - } - - private handleChange(event: Event & { target: HTMLInputElement }): void { - this.handleInput(event); - this.dispatchEvent( - new Event('change', { - bubbles: true, - composed: true, - cancelable: true, - }) - ); - } - - private boundingClientRect!: DOMRect; - public _pointerDown = false; - - private handlePointerdown(event: PointerEvent): void { - if (event.button !== 0) { - event.preventDefault(); - - return; - } - - this._pointerDown = true; - this.colorController.savePreviousColor(); - this.boundingClientRect = this.getBoundingClientRect(); - (event.target as HTMLElement).setPointerCapture(event.pointerId); - - if (event.pointerType === 'mouse') { - this.focused = true; - } - } - - private handlePointermove(event: PointerEvent): void { - const [x, y] = this.calculateHandlePosition(event); - - this._valueChanged = false; - - this.x = x; - this.y = 1 - y; - this.colorController.applyColorFromState(); - this.dispatchEvent( - new Event('input', { - bubbles: true, - composed: true, - cancelable: true, - }) - ); - } - - private handlePointerup(event: PointerEvent): void { - event.preventDefault(); - this._pointerDown = false; - (event.target as HTMLElement).releasePointerCapture(event.pointerId); - const applyDefault = this.dispatchEvent( - new Event('change', { - bubbles: true, - composed: true, - cancelable: true, - }) - ); - - this.inputX.focus(); - - if (event.pointerType === 'mouse') { - this.focused = false; - } - - if (!applyDefault) { - this.colorController.restorePreviousColor(); - } - } - - /** - * Returns the value under the cursor - * - * @param event - on slider - * @returns Slider value that correlates to the position under the pointer - */ - private calculateHandlePosition(event: PointerEvent): [number, number] { - /* c8 ignore next 3 */ - if (!this.boundingClientRect) { - return [this.x, this.y]; - } - - const rect = this.boundingClientRect; - const minOffsetX = rect.left; - const minOffsetY = rect.top; - const offsetX = event.clientX; - const offsetY = event.clientY; - const width = rect.width; - const height = rect.height; - - const percentX = Math.max( - 0, - Math.min(1, (offsetX - minOffsetX) / width) - ); - const percentY = Math.max( - 0, - Math.min(1, (offsetY - minOffsetY) / height) - ); - - return [this.isLTR ? percentX : 1 - percentX, percentY]; - } - - private handleAreaPointerdown(event: PointerEvent): void { - if (event.button !== 0) { - return; - } - - event.stopPropagation(); - event.preventDefault(); - this.handle.dispatchEvent(new PointerEvent('pointerdown', event)); - this.handlePointermove(event); - } - - protected override render(): TemplateResult { - const { width = 0, height = 0 } = this.boundingClientRect || {}; - - const isMobile = isAndroid() || isIOS(); - const defaultAriaLabel = 'Color Picker'; - const ariaLabel = defaultAriaLabel; - const ariaRoleDescription = ifDefined( - isMobile ? undefined : '2d slider' - ); - - const ariaLabelX = this.labelX; - const ariaLabelY = this.labelY; - const ariaValueX = new Intl.NumberFormat( - this.languageResolver.language, - { - style: 'percent', - unitDisplay: 'narrow', - } - ).format(this.x); - const ariaValueY = new Intl.NumberFormat( - this.languageResolver.language, - { - style: 'percent', - unitDisplay: 'narrow', - } - ).format(this.y); - - const style = { - background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`, - }; - - return html` -
- -
- - - -
-
- -
-
- -
-
- `; - } - - protected override firstUpdated(changed: PropertyValues): void { - super.firstUpdated(changed); - this.boundingClientRect = this.getBoundingClientRect(); - - this.addEventListener('focus', this.handleFocus); - this.addEventListener('blur', this.handleBlur); - this.addEventListener('keyup', this.handleKeyup); - this.addEventListener('keydown', this.handleKeydown); - } - - protected override updated(changed: PropertyValues): void { - super.updated(changed); - - if (this.x !== this.inputX.valueAsNumber) { - this._x = this.inputX.valueAsNumber; - } - - if (this.y !== this.inputY.valueAsNumber) { - this._y = this.inputY.valueAsNumber; - } - - if (changed.has('focused') && this.focused) { - // Lazily bind the `input[type="range"]` elements in shadow roots - // so that browsers with certain settings (Webkit) aren't allowed - // multiple tab stops within the Color Area. - const parentX = this.inputX.parentElement as HTMLDivElement; - const parentY = this.inputY.parentElement as HTMLDivElement; - - if (!parentX.shadowRoot && !parentY.shadowRoot) { - parentX.attachShadow({ mode: 'open' }); - parentY.attachShadow({ mode: 'open' }); - const slot = '
'; - - (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot; - (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot; - } - } - } - - private observer?: WithSWCResizeObserver['ResizeObserver']; - - public override connectedCallback(): void { - super.connectedCallback(); - - if ( - !this.observer && - (window as unknown as WithSWCResizeObserver).ResizeObserver - ) { - this.observer = new ( - window as unknown as WithSWCResizeObserver - ).ResizeObserver((entries: SWCResizeObserverEntry[]) => { - for (const entry of entries) { - this.boundingClientRect = entry.contentRect; - } - this.requestUpdate(); - }); - } - - this.observer?.observe(this); - } - - public override disconnectedCallback(): void { - this.observer?.unobserve(this); - super.disconnectedCallback(); - } + this._x = x; + + if (this.inputX) { + // Use the native `input[type='range']` control to validate this value after `firstUpdate` + this.inputX.value = x.toString(); + this._x = this.inputX.valueAsNumber; + } + + this.requestUpdate("x", oldValue); + this.colorController.applyColorFromState(); + } + + private _x = 1; + + @property({ type: Number }) + public get y(): number { + return this._y; + } + + public set y(y: number) { + if (y === this.y) { + return; + } + + const oldValue = this.y; + + this._y = y; + + if (this.inputY) { + // Use the native `input[type='range']` control to validate this value after `firstUpdate` + this.inputY.value = y.toString(); + this._y = this.inputY.valueAsNumber; + } + + this.requestUpdate("y", oldValue); + this.colorController.applyColorFromState(); + } + + private _y = 1; + + @property({ type: Number }) + public step = 0.01; + + @query('[name="x"]') + public inputX!: HTMLInputElement; + + @query('[name="y"]') + public inputY!: HTMLInputElement; + + private altered = 0; + + private activeKeys = new Set(); + + private _valueChanged = false; + + public override focus(focusOptions: FocusOptions = {}): void { + super.focus(focusOptions); + this.forwardFocus(); + } + + private forwardFocus(): void { + this.focused = this.hasVisibleFocusInTree(); + + if (this.activeAxis === "x") { + this.inputX.focus(); + } else { + this.inputY.focus(); + } + } + + private handleFocus(): void { + this.focused = true; + this._valueChanged = false; + } + + public handleBlur(): void { + if (this._pointerDown) { + return; + } + + this.altered = 0; + this.focused = false; + this._valueChanged = false; + } + + private handleKeydown(event: KeyboardEvent): void { + const { code } = event; + + this.focused = true; + this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter( + (key) => !!key, + ).length; + const isArrowKey = + code.search("Arrow") === 0 || + code.search("Page") === 0 || + code.search("Home") === 0 || + code.search("End") === 0; + + if (isArrowKey) { + event.preventDefault(); + this.activeKeys.add(code); + this.handleKeypress(); + } + } + + private handleKeypress(): void { + let deltaX = 0; + let deltaY = 0; + const step = Math.max(this.step, this.altered * 5 * this.step); + + this.activeKeys.forEach((code) => { + switch (code) { + case "ArrowUp": + deltaY = step; + break; + case "ArrowDown": + deltaY = step * -1; + break; + case "ArrowLeft": + deltaX = this.step * (this.isLTR ? -1 : 1); + break; + case "ArrowRight": + deltaX = this.step * (this.isLTR ? 1 : -1); + break; + case "PageUp": + deltaY = step * 10; + break; + case "PageDown": + deltaY = step * -10; + break; + case "Home": + deltaX = step * (this.isLTR ? -10 : 10); + break; + case "End": + deltaX = step * (this.isLTR ? 10 : -10); + break; + /* c8 ignore next 2 */ + default: + break; + } + }); + + if (deltaX != 0) { + this.activeAxis = "x"; + this.inputX.focus(); + } else if (deltaY != 0) { + this.activeAxis = "y"; + this.inputY.focus(); + } + + this.x = Math.min(1, Math.max(this.x + deltaX, 0)); + this.y = Math.min(1, Math.max(this.y + deltaY, 0)); + + this.colorController.savePreviousColor(); + this.colorController.applyColorFromState(); + + if (deltaX != 0 || deltaY != 0) { + this._valueChanged = true; + this.dispatchEvent( + new Event("input", { + bubbles: true, + composed: true, + }), + ); + const applyDefault = this.dispatchEvent( + new Event("change", { + bubbles: true, + composed: true, + cancelable: true, + }), + ); + + if (!applyDefault) { + this.colorController.restorePreviousColor(); + } + } + } + + private handleKeyup(event: KeyboardEvent): void { + event.preventDefault(); + const { code } = event; + + this.activeKeys.delete(code); + } + + private handleInput(event: Event & { target: HTMLInputElement }): void { + const { valueAsNumber, name } = event.target; + + this[name as "x" | "y"] = valueAsNumber; + this.colorController.applyColorFromState(); + } + + private handleChange(event: Event & { target: HTMLInputElement }): void { + this.handleInput(event); + this.dispatchEvent( + new Event("change", { + bubbles: true, + composed: true, + cancelable: true, + }), + ); + } + + private boundingClientRect!: DOMRect; + public _pointerDown = false; + + private handlePointerdown(event: PointerEvent): void { + if (event.button !== 0) { + event.preventDefault(); + + return; + } + + this._pointerDown = true; + this.colorController.savePreviousColor(); + this.boundingClientRect = this.getBoundingClientRect(); + (event.target as HTMLElement).setPointerCapture(event.pointerId); + + if (event.pointerType === "mouse") { + this.focused = true; + } + } + + private handlePointermove(event: PointerEvent): void { + const [x, y] = this.calculateHandlePosition(event); + + this._valueChanged = false; + + this.x = x; + this.y = 1 - y; + this.colorController.applyColorFromState(); + this.dispatchEvent( + new Event("input", { + bubbles: true, + composed: true, + cancelable: true, + }), + ); + } + + private handlePointerup(event: PointerEvent): void { + event.preventDefault(); + this._pointerDown = false; + (event.target as HTMLElement).releasePointerCapture(event.pointerId); + const applyDefault = this.dispatchEvent( + new Event("change", { + bubbles: true, + composed: true, + cancelable: true, + }), + ); + + this.inputX.focus(); + + if (event.pointerType === "mouse") { + this.focused = false; + } + + if (!applyDefault) { + this.colorController.restorePreviousColor(); + } + } + + /** + * Returns the value under the cursor + * + * @param event - on slider + * @returns Slider value that correlates to the position under the pointer + */ + private calculateHandlePosition(event: PointerEvent): [number, number] { + /* c8 ignore next 3 */ + if (!this.boundingClientRect) { + return [this.x, this.y]; + } + + const rect = this.boundingClientRect; + const minOffsetX = rect.left; + const minOffsetY = rect.top; + const offsetX = event.clientX; + const offsetY = event.clientY; + const width = rect.width; + const height = rect.height; + + const percentX = Math.max(0, Math.min(1, (offsetX - minOffsetX) / width)); + const percentY = Math.max(0, Math.min(1, (offsetY - minOffsetY) / height)); + + return [this.isLTR ? percentX : 1 - percentX, percentY]; + } + + private handleAreaPointerdown(event: PointerEvent): void { + if (event.button !== 0) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + this.handle.dispatchEvent(new PointerEvent("pointerdown", event)); + this.handlePointermove(event); + } + + protected override render(): TemplateResult { + const { width = 0, height = 0 } = this.boundingClientRect || {}; + + const isMobile = isAndroid() || isIOS(); + const defaultAriaLabel = "Color Picker"; + const ariaLabel = defaultAriaLabel; + const ariaRoleDescription = ifDefined(isMobile ? undefined : "2d slider"); + + const ariaLabelX = this.labelX; + const ariaLabelY = this.labelY; + const ariaValueX = new Intl.NumberFormat(this.languageResolver.language, { + style: "percent", + unitDisplay: "narrow", + }).format(this.x); + const ariaValueY = new Intl.NumberFormat(this.languageResolver.language, { + style: "percent", + unitDisplay: "narrow", + }).format(this.y); + + const style = { + background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`, + }; + + return html` +
+ +
+ + + +
+
+ +
+
+ +
+
+ `; + } + + protected override firstUpdated(changed: PropertyValues): void { + super.firstUpdated(changed); + this.boundingClientRect = this.getBoundingClientRect(); + + this.addEventListener("focus", this.handleFocus); + this.addEventListener("blur", this.handleBlur); + this.addEventListener("keyup", this.handleKeyup); + this.addEventListener("keydown", this.handleKeydown); + } + + protected override updated(changed: PropertyValues): void { + super.updated(changed); + + if (this.x !== this.inputX.valueAsNumber) { + this._x = this.inputX.valueAsNumber; + } + + if (this.y !== this.inputY.valueAsNumber) { + this._y = this.inputY.valueAsNumber; + } + + if (changed.has("focused") && this.focused) { + // Lazily bind the `input[type="range"]` elements in shadow roots + // so that browsers with certain settings (Webkit) aren't allowed + // multiple tab stops within the Color Area. + const parentX = this.inputX.parentElement as HTMLDivElement; + const parentY = this.inputY.parentElement as HTMLDivElement; + + if (!parentX.shadowRoot && !parentY.shadowRoot) { + parentX.attachShadow({ mode: "open" }); + parentY.attachShadow({ mode: "open" }); + const slot = '
'; + + (parentX.shadowRoot as unknown as ShadowRoot).innerHTML = slot; + (parentY.shadowRoot as unknown as ShadowRoot).innerHTML = slot; + } + } + } + + private observer?: WithSWCResizeObserver["ResizeObserver"]; + + public override connectedCallback(): void { + super.connectedCallback(); + + if ( + !this.observer && + (window as unknown as WithSWCResizeObserver).ResizeObserver + ) { + this.observer = new ( + window as unknown as WithSWCResizeObserver + ).ResizeObserver((entries: SWCResizeObserverEntry[]) => { + for (const entry of entries) { + this.boundingClientRect = entry.contentRect; + } + this.requestUpdate(); + }); + } + + this.observer?.observe(this); + } + + public override disconnectedCallback(): void { + this.observer?.unobserve(this); + super.disconnectedCallback(); + } } diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts index 98ebd55fc9..a98bf97027 100644 --- a/packages/color-wheel/src/ColorWheel.ts +++ b/packages/color-wheel/src/ColorWheel.ts @@ -11,29 +11,29 @@ governing permissions and limitations under the License. */ import { - CSSResultArray, - html, - PropertyValues, - TemplateResult, -} from '@spectrum-web-components/base'; -import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; + CSSResultArray, + html, + PropertyValues, + TemplateResult, +} from "@spectrum-web-components/base"; +import { ifDefined } from "@spectrum-web-components/base/src/directives.js"; import { - property, - query, -} from '@spectrum-web-components/base/src/decorators.js'; -import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js'; -import { SWCResizeObserverEntry, WithSWCResizeObserver } from './types'; -import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; -import type { ColorHandle } from '@spectrum-web-components/color-handle'; -import '@spectrum-web-components/color-handle/sp-color-handle.js'; + property, + query, +} from "@spectrum-web-components/base/src/decorators.js"; +import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js"; +import { SWCResizeObserverEntry, WithSWCResizeObserver } from "./types.js"; +import { Focusable } from "@spectrum-web-components/shared/src/focusable.js"; +import type { ColorHandle } from "@spectrum-web-components/color-handle"; +import "@spectrum-web-components/color-handle/sp-color-handle.js"; import { - ColorController, - ColorValue, - HSL, -} from '@spectrum-web-components/reactive-controllers/src/Color.js'; -import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js'; + ColorController, + ColorValue, + HSL, +} from "@spectrum-web-components/reactive-controllers/src/Color.js"; +import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js"; -import styles from './color-wheel.css.js'; +import styles from "./color-wheel.css.js"; /** * @element sp-color-wheel @@ -44,411 +44,407 @@ import styles from './color-wheel.css.js'; * @fires change - An alteration to the value of the Color Wheel has been committed by the user. */ export class ColorWheel extends Focusable { - public static override get styles(): CSSResultArray { - return [styles]; - } - - @property({ type: String, reflect: true }) - public override dir!: 'ltr' | 'rtl'; - - @property({ type: Boolean, reflect: true }) - public override disabled = false; - - @property({ type: Boolean, reflect: true }) - public focused = false; - - @query('.handle') - private handle!: ColorHandle; - - @property({ type: String }) - public label = 'hue'; - - @property({ type: Number }) - public step = 1; - - private languageResolver = new LanguageResolutionController(this); - - private colorController = new ColorController(this, { - /* c8 ignore next 3 */ - applyColorToState: () => { - return; - }, - extractColorFromState: (controller) => ({ - ...(controller.getColor('hsl') as HSL), - h: this.value, - }), - maintains: 'saturation', - }); - - @property({ type: Number }) - public get value(): number { - return this.colorController.hue; - } - - public set value(hue: number) { - this.colorController.hue = hue; - } - - @property({ type: String }) - public get color(): ColorValue { - return this.colorController.color; - } - - public set color(color: ColorValue) { - this.colorController.color = color; - } - - private get altered(): number { - return this._altered; - } - - private set altered(altered: number) { - this._altered = altered; - this.step = Math.max(1, this.altered * 10); - } - - private _altered = 0; - - @query('input') - public input!: HTMLInputElement; - - public override get focusElement(): HTMLInputElement { - return this.input; - } - - private handleKeydown(event: KeyboardEvent): void { - const { key } = event; - - this.focused = true; - this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter( - (key) => !!key - ).length; - let delta = 0; - - switch (key) { - case 'ArrowUp': - delta = this.step; - break; - case 'ArrowDown': - delta = -this.step; - break; - case 'ArrowLeft': - delta = this.step * (this.isLTR ? -1 : 1); - break; - case 'ArrowRight': - delta = this.step * (this.isLTR ? 1 : -1); - break; - default: - return; - } - - event.preventDefault(); - this.value = (360 + this.value + delta) % 360; - this.colorController.savePreviousColor(); - this.colorController.applyColorFromState(); - this.dispatchEvent( - new Event('input', { - bubbles: true, - composed: true, - }) - ); - const applyDefault = this.dispatchEvent( - new Event('change', { - bubbles: true, - composed: true, - cancelable: true, - }) - ); - - if (!applyDefault) { - this.colorController.restorePreviousColor(); - } - } - - private handleInput(event: Event & { target: HTMLInputElement }): void { - const { valueAsNumber } = event.target; - - this.value = valueAsNumber; - this.colorController.applyColorFromState(); - } - - private handleChange(event: Event & { target: HTMLInputElement }): void { - this.handleInput(event); - this.dispatchEvent( - new Event('change', { - bubbles: true, - composed: true, - }) - ); - } - - public override focus(focusOptions: FocusOptions = {}): void { - super.focus(focusOptions); - this.forwardFocus(); - } - - private forwardFocus(): void { - this.focused = this.hasVisibleFocusInTree(); - this.input.focus(); - } - - private handleFocus(): void { - this.focused = true; - } - - private handleBlur(): void { - if (this._pointerDown) { - return; - } - - this.altered = 0; - this.focused = false; - } - - private boundingClientRect!: DOMRect; - private _pointerDown = false; - - private handlePointerdown(event: PointerEvent): void { - if (event.button !== 0) { - event.preventDefault(); - - return; - } - - this._pointerDown = true; - this.colorController.savePreviousColor(); - this.boundingClientRect = this.getBoundingClientRect(); - (event.target as HTMLElement).setPointerCapture(event.pointerId); - - if (event.pointerType === 'mouse') { - this.focused = true; - } - } - - private handlePointermove(event: PointerEvent): void { - this.value = this.calculateHandlePosition(event); - this.colorController.applyColorFromState(); - - this.dispatchEvent( - new Event('input', { - bubbles: true, - composed: true, - cancelable: true, - }) - ); - } - - private handlePointerup(event: PointerEvent): void { - this._pointerDown = false; - (event.target as HTMLElement).releasePointerCapture(event.pointerId); - - const applyDefault = this.dispatchEvent( - new Event('change', { - bubbles: true, - composed: true, - cancelable: true, - }) - ); - - if (!applyDefault) { - this.colorController.restorePreviousColor(); - } - - // Retain focus on input element after mouse up to enable keyboard interactions - this.focus(); - - if (event.pointerType === 'mouse') { - this.focused = false; - } - } - - /** - * Returns the value under the cursor - * - * @param event - on slider - * @returns Slider value that correlates to the position under the pointer - */ - private calculateHandlePosition(event: PointerEvent): number { - /* c8 ignore next 3 */ - if (!this.boundingClientRect) { - return this.value; - } - - const rect = this.boundingClientRect; - const { width, height, left, top } = rect; - const centerX = left + width / 2; - const centerY = top + height / 2; - const pointX = event.clientX - centerX; - const pointY = event.clientY - centerY; - const value = (Math.atan2(pointY, pointX) * 180) / Math.PI; - - return (360 + (360 + (this.isLTR ? value : 180 - value))) % 360; - } - - private handleGradientPointerdown(event: PointerEvent): void { - if ( - event.button !== 0 || - (event.target as SVGElement).classList.contains('innerCircle') - ) { - return; - } - - event.stopPropagation(); - event.preventDefault(); - const { button, pointerId, pointerType } = event; - - this.handle.dispatchEvent( - new PointerEvent('pointerdown', { - button, - pointerId, - pointerType, - }) - ); - this.handlePointermove(event); - } - - calculateStyleData(): { - clipPath: string; - clipPathBorders: string; - diameter: number; - handleLocationStyles: string; - } { - // Extract values from element. - const { width: diameter = 160 } = this.boundingClientRect || {}; - const styles = getComputedStyle(this); - const borderWidth = parseFloat( - styles.getPropertyValue('--_border-width') - ); - const trackWidth = parseFloat( - styles.getPropertyValue('--_track-width') - ); - - // Calculate wheel data. - const radius = diameter / 2; - const diameterAfterBoarder = diameter - borderWidth * 2; - const radiusAfterBoarder = radius - borderWidth; - const innerRadius = radius - trackWidth; - const innerDiameter = innerRadius * 2; - const innerRadiusAfterBorder = innerRadius + borderWidth; - const innerDiameterAfterBorder = innerDiameter + borderWidth * 2; - const clipPathBorders = `"M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${diameter} 0 a ${radius} ${radius} 0 1 0 -${diameter} 0 M ${radius} ${radius} m -${innerRadius} 0 a ${innerRadius} ${innerRadius} 0 1 0 ${innerDiameter} 0 a ${innerRadius} ${innerRadius} 0 1 0 -${innerDiameter} 0"`; - const clipPath = `"M ${radiusAfterBoarder} ${radiusAfterBoarder} m -${radiusAfterBoarder} 0 a ${radiusAfterBoarder} ${radiusAfterBoarder} 0 1 0 ${diameterAfterBoarder} 0 a ${radiusAfterBoarder} ${radiusAfterBoarder} 0 1 0 -${diameterAfterBoarder} 0 M ${radiusAfterBoarder} ${radiusAfterBoarder} m -${innerRadiusAfterBorder} 0 a ${innerRadiusAfterBorder} ${innerRadiusAfterBorder} 0 1 0 ${innerDiameterAfterBorder} 0 a ${innerRadiusAfterBorder} ${innerRadiusAfterBorder} 0 1 0 -${innerDiameterAfterBorder} 0"`; - - // Calculate handle position on the wheel. - const translateX = - (this.isLTR ? 1 : -1) * - (radius - trackWidth / 2) * - Math.cos((this.value * Math.PI) / 180); - const translateY = - (radius - trackWidth / 2) * Math.sin((this.value * Math.PI) / 180); - const handleLocationStyles = `transform: translate(${translateX}px, ${translateY}px);`; - - return { - clipPath, - clipPathBorders, - diameter, - handleLocationStyles, - }; - } - - protected override render(): TemplateResult { - const { clipPath, clipPathBorders, diameter, handleLocationStyles } = - this.calculateStyleData(); - - return html` - { + return; + }, + extractColorFromState: (controller) => ({ + ...(controller.getColor("hsl") as HSL), + h: this.value, + }), + maintains: "saturation", + }); + + @property({ type: Number }) + public get value(): number { + return this.colorController.hue; + } + + public set value(hue: number) { + this.colorController.hue = hue; + } + + @property({ type: String }) + public get color(): ColorValue { + return this.colorController.color; + } + + public set color(color: ColorValue) { + this.colorController.color = color; + } + + private get altered(): number { + return this._altered; + } + + private set altered(altered: number) { + this._altered = altered; + this.step = Math.max(1, this.altered * 10); + } + + private _altered = 0; + + @query("input") + public input!: HTMLInputElement; + + public override get focusElement(): HTMLInputElement { + return this.input; + } + + private handleKeydown(event: KeyboardEvent): void { + const { key } = event; + + this.focused = true; + this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter( + (key) => !!key, + ).length; + let delta = 0; + + switch (key) { + case "ArrowUp": + delta = this.step; + break; + case "ArrowDown": + delta = -this.step; + break; + case "ArrowLeft": + delta = this.step * (this.isLTR ? -1 : 1); + break; + case "ArrowRight": + delta = this.step * (this.isLTR ? 1 : -1); + break; + default: + return; + } + + event.preventDefault(); + this.value = (360 + this.value + delta) % 360; + this.colorController.savePreviousColor(); + this.colorController.applyColorFromState(); + this.dispatchEvent( + new Event("input", { + bubbles: true, + composed: true, + }), + ); + const applyDefault = this.dispatchEvent( + new Event("change", { + bubbles: true, + composed: true, + cancelable: true, + }), + ); + + if (!applyDefault) { + this.colorController.restorePreviousColor(); + } + } + + private handleInput(event: Event & { target: HTMLInputElement }): void { + const { valueAsNumber } = event.target; + + this.value = valueAsNumber; + this.colorController.applyColorFromState(); + } + + private handleChange(event: Event & { target: HTMLInputElement }): void { + this.handleInput(event); + this.dispatchEvent( + new Event("change", { + bubbles: true, + composed: true, + }), + ); + } + + public override focus(focusOptions: FocusOptions = {}): void { + super.focus(focusOptions); + this.forwardFocus(); + } + + private forwardFocus(): void { + this.focused = this.hasVisibleFocusInTree(); + this.input.focus(); + } + + private handleFocus(): void { + this.focused = true; + } + + private handleBlur(): void { + if (this._pointerDown) { + return; + } + + this.altered = 0; + this.focused = false; + } + + private boundingClientRect!: DOMRect; + private _pointerDown = false; + + private handlePointerdown(event: PointerEvent): void { + if (event.button !== 0) { + event.preventDefault(); + + return; + } + + this._pointerDown = true; + this.colorController.savePreviousColor(); + this.boundingClientRect = this.getBoundingClientRect(); + (event.target as HTMLElement).setPointerCapture(event.pointerId); + + if (event.pointerType === "mouse") { + this.focused = true; + } + } + + private handlePointermove(event: PointerEvent): void { + this.value = this.calculateHandlePosition(event); + this.colorController.applyColorFromState(); + + this.dispatchEvent( + new Event("input", { + bubbles: true, + composed: true, + cancelable: true, + }), + ); + } + + private handlePointerup(event: PointerEvent): void { + this._pointerDown = false; + (event.target as HTMLElement).releasePointerCapture(event.pointerId); + + const applyDefault = this.dispatchEvent( + new Event("change", { + bubbles: true, + composed: true, + cancelable: true, + }), + ); + + if (!applyDefault) { + this.colorController.restorePreviousColor(); + } + + // Retain focus on input element after mouse up to enable keyboard interactions + this.focus(); + + if (event.pointerType === "mouse") { + this.focused = false; + } + } + + /** + * Returns the value under the cursor + * + * @param event - on slider + * @returns Slider value that correlates to the position under the pointer + */ + private calculateHandlePosition(event: PointerEvent): number { + /* c8 ignore next 3 */ + if (!this.boundingClientRect) { + return this.value; + } + + const rect = this.boundingClientRect; + const { width, height, left, top } = rect; + const centerX = left + width / 2; + const centerY = top + height / 2; + const pointX = event.clientX - centerX; + const pointY = event.clientY - centerY; + const value = (Math.atan2(pointY, pointX) * 180) / Math.PI; + + return (360 + (360 + (this.isLTR ? value : 180 - value))) % 360; + } + + private handleGradientPointerdown(event: PointerEvent): void { + if ( + event.button !== 0 || + (event.target as SVGElement).classList.contains("innerCircle") + ) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + const { button, pointerId, pointerType } = event; + + this.handle.dispatchEvent( + new PointerEvent("pointerdown", { + button, + pointerId, + pointerType, + }), + ); + this.handlePointermove(event); + } + + calculateStyleData(): { + clipPath: string; + clipPathBorders: string; + diameter: number; + handleLocationStyles: string; + } { + // Extract values from element. + const { width: diameter = 160 } = this.boundingClientRect || {}; + const styles = getComputedStyle(this); + const borderWidth = parseFloat(styles.getPropertyValue("--_border-width")); + const trackWidth = parseFloat(styles.getPropertyValue("--_track-width")); + + // Calculate wheel data. + const radius = diameter / 2; + const diameterAfterBoarder = diameter - borderWidth * 2; + const radiusAfterBoarder = radius - borderWidth; + const innerRadius = radius - trackWidth; + const innerDiameter = innerRadius * 2; + const innerRadiusAfterBorder = innerRadius + borderWidth; + const innerDiameterAfterBorder = innerDiameter + borderWidth * 2; + const clipPathBorders = `"M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${diameter} 0 a ${radius} ${radius} 0 1 0 -${diameter} 0 M ${radius} ${radius} m -${innerRadius} 0 a ${innerRadius} ${innerRadius} 0 1 0 ${innerDiameter} 0 a ${innerRadius} ${innerRadius} 0 1 0 -${innerDiameter} 0"`; + const clipPath = `"M ${radiusAfterBoarder} ${radiusAfterBoarder} m -${radiusAfterBoarder} 0 a ${radiusAfterBoarder} ${radiusAfterBoarder} 0 1 0 ${diameterAfterBoarder} 0 a ${radiusAfterBoarder} ${radiusAfterBoarder} 0 1 0 -${diameterAfterBoarder} 0 M ${radiusAfterBoarder} ${radiusAfterBoarder} m -${innerRadiusAfterBorder} 0 a ${innerRadiusAfterBorder} ${innerRadiusAfterBorder} 0 1 0 ${innerDiameterAfterBorder} 0 a ${innerRadiusAfterBorder} ${innerRadiusAfterBorder} 0 1 0 -${innerDiameterAfterBorder} 0"`; + + // Calculate handle position on the wheel. + const translateX = + (this.isLTR ? 1 : -1) * + (radius - trackWidth / 2) * + Math.cos((this.value * Math.PI) / 180); + const translateY = + (radius - trackWidth / 2) * Math.sin((this.value * Math.PI) / 180); + const handleLocationStyles = `transform: translate(${translateX}px, ${translateY}px);`; + + return { + clipPath, + clipPathBorders, + diameter, + handleLocationStyles, + }; + } + + protected override render(): TemplateResult { + const { clipPath, clipPathBorders, diameter, handleLocationStyles } = + this.calculateStyleData(); + + return html` + -
-
-
-
-
-
- - - - - - `; - } - - protected override firstUpdated(changed: PropertyValues): void { - super.firstUpdated(changed); - this.boundingClientRect = this.getBoundingClientRect(); - this.addEventListener('focus', this.handleFocus); - this.addEventListener('blur', this.handleBlur); - } - - private observer?: WithSWCResizeObserver['ResizeObserver']; - - public override connectedCallback(): void { - super.connectedCallback(); - - if ( - !this.observer && - (window as unknown as WithSWCResizeObserver).ResizeObserver - ) { - this.observer = new ( - window as unknown as WithSWCResizeObserver - ).ResizeObserver((entries: SWCResizeObserverEntry[]) => { - for (const entry of entries) { - this.boundingClientRect = entry.contentRect; - } - this.requestUpdate(); - }); - } - - this.observer?.observe(this); - } - - public override disconnectedCallback(): void { - this.observer?.unobserve(this); - super.disconnectedCallback(); - } + > +
+
+
+
+
+
+ + + + + + `; + } + + protected override firstUpdated(changed: PropertyValues): void { + super.firstUpdated(changed); + this.boundingClientRect = this.getBoundingClientRect(); + this.addEventListener("focus", this.handleFocus); + this.addEventListener("blur", this.handleBlur); + } + + private observer?: WithSWCResizeObserver["ResizeObserver"]; + + public override connectedCallback(): void { + super.connectedCallback(); + + if ( + !this.observer && + (window as unknown as WithSWCResizeObserver).ResizeObserver + ) { + this.observer = new ( + window as unknown as WithSWCResizeObserver + ).ResizeObserver((entries: SWCResizeObserverEntry[]) => { + for (const entry of entries) { + this.boundingClientRect = entry.contentRect; + } + this.requestUpdate(); + }); + } + + this.observer?.observe(this); + } + + public override disconnectedCallback(): void { + this.observer?.unobserve(this); + super.disconnectedCallback(); + } } diff --git a/packages/combobox/stories/index.ts b/packages/combobox/stories/index.ts index e895185cc1..0b2afc6fab 100644 --- a/packages/combobox/stories/index.ts +++ b/packages/combobox/stories/index.ts @@ -10,316 +10,316 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { - ElementSize, - html, - TemplateResult, -} from '@spectrum-web-components/base'; -import { Combobox, ComboboxOption } from '@spectrum-web-components/combobox'; -import '@spectrum-web-components/combobox/sp-combobox.js'; -import '@spectrum-web-components/field-label/sp-field-label.js'; -import { spreadProps } from '../../../test/lit-helpers'; + ElementSize, + html, + TemplateResult, +} from "@spectrum-web-components/base"; +import { Combobox, ComboboxOption } from "@spectrum-web-components/combobox"; +import "@spectrum-web-components/combobox/sp-combobox.js"; +import "@spectrum-web-components/field-label/sp-field-label.js"; +import { spreadProps } from "../../../test/lit-helpers.js"; export type StoryArgs = { - open?: boolean; - pending?: boolean; - invalid?: boolean; - disabled?: boolean; - readonly?: boolean; - value?: string; - autocomplete?: 'list' | 'none'; - size?: ElementSize; - onChange?: (val: string) => void; - onInput?: (val: string) => void; + open?: boolean; + pending?: boolean; + invalid?: boolean; + disabled?: boolean; + readonly?: boolean; + value?: string; + autocomplete?: "list" | "none"; + size?: ElementSize; + onChange?: (val: string) => void; + onInput?: (val: string) => void; }; const handleChange = - ({ onChange }: StoryArgs) => - (event: Event): void => { - const picker = event.target as Combobox; + ({ onChange }: StoryArgs) => + (event: Event): void => { + const picker = event.target as Combobox; - if (onChange) onChange(picker.value); - }; + if (onChange) onChange(picker.value); + }; const handleInput = - ({ onInput }: StoryArgs) => - (event: Event): void => { - const picker = event.target as Combobox; + ({ onInput }: StoryArgs) => + (event: Event): void => { + const picker = event.target as Combobox; - if (onInput) onInput(picker.value); - }; + if (onInput) onInput(picker.value); + }; export const ComboboxMarkup = (args: StoryArgs): TemplateResult => { - return html` - Where do you live? - - `; + return html` + Where do you live? + + `; }; export const countries: ComboboxOption[] = [ - { value: 'af', itemText: 'Afghanistan' }, - { value: 'ax', itemText: 'Aland Islands' }, - { value: 'al', itemText: 'Albania' }, - { value: 'dz', itemText: 'Algeria' }, - { value: 'as', itemText: 'American Samoa' }, - { value: 'ad', itemText: 'Andorra' }, - { value: 'ao', itemText: 'Angola' }, - { value: 'ai', itemText: 'Anguilla' }, - { value: 'aq', itemText: 'Antarctica' }, - { value: 'ag', itemText: 'Antigua and Barbuda' }, - { value: 'ar', itemText: 'Argentina' }, - { value: 'ar', itemText: 'Armenia' }, - { value: 'aw', itemText: 'Aruba' }, - { value: 'au', itemText: 'Australia' }, - { value: 'at', itemText: 'Austria' }, - { value: 'az', itemText: 'Azerbaijan' }, - { value: 'bs', itemText: 'Bahamas' }, - { value: 'bh', itemText: 'Bahrain' }, - { value: 'bd', itemText: 'Bangladesh' }, - { value: 'bb', itemText: 'Barbados' }, - { value: 'by', itemText: 'Belarus' }, - { value: 'be', itemText: 'Belgium' }, - { value: 'bz', itemText: 'Belize' }, - { value: 'bj', itemText: 'Benin' }, - { value: 'bm', itemText: 'Bermuda' }, - { value: 'bt', itemText: 'Bhutan' }, - { value: 'bo', itemText: 'Bolivia' }, - { value: 'ba', itemText: 'Bosnia and Herzegovina' }, - { value: 'bw', itemText: 'Botswana' }, - { value: 'bv', itemText: 'Bouvet Island' }, - { value: 'br', itemText: 'Brazil' }, - { value: 'io', itemText: 'British Indian Ocean Territory' }, - { value: 'bn', itemText: 'Brunei Darussalam' }, - { value: 'bg', itemText: 'Bulgaria' }, - { value: 'bf', itemText: 'Burkina Faso' }, - { value: 'bi', itemText: 'Burundi' }, - { value: 'kh', itemText: 'Cambodia' }, - { value: 'cm', itemText: 'Cameroon' }, - { value: 'ca', itemText: 'Canada' }, - { value: 'cv', itemText: 'Cape Verde' }, - { value: 'ky', itemText: 'Cayman Islands' }, - { value: 'cf', itemText: 'Central African Republic' }, - { value: 'td', itemText: 'Chad' }, - { value: 'cl', itemText: 'Chile' }, - { value: 'cn', itemText: 'China' }, - { value: 'cx', itemText: 'Christmas Island' }, - { value: 'cc', itemText: 'Cocos (Keeling) Islands' }, - { value: 'co', itemText: 'Colombia' }, - { value: 'km', itemText: 'Comoros' }, - { value: 'cg', itemText: 'Congo' }, - { value: 'cd', itemText: 'Congo, The Democratic Republic of the' }, - { value: 'ck', itemText: 'Cook Islands' }, - { value: 'cr', itemText: 'Costa Rica' }, - { value: 'ci', itemText: "Cote D'Ivoire" }, - { value: 'hr', itemText: 'Croatia' }, - { value: 'cu', itemText: 'Cuba' }, - { value: 'cy', itemText: 'Cyprus' }, - { value: 'cz', itemText: 'Czech Republic' }, - { value: 'dk', itemText: 'Denmark' }, - { value: 'dj', itemText: 'Djibouti' }, - { value: 'dm', itemText: 'Dominica' }, - { value: 'do', itemText: 'Dominican Republic' }, - { value: 'ec', itemText: 'Ecuador' }, - { value: 'eg', itemText: 'Egypt' }, - { value: 'sv', itemText: 'El Salvador' }, - { value: 'gq', itemText: 'Equatorial Guinea' }, - { value: 'er', itemText: 'Eritrea' }, - { value: 'ee', itemText: 'Estonia' }, - { value: 'et', itemText: 'Ethiopia' }, - { value: 'fk', itemText: 'Falkland Islands (Malvinas)' }, - { value: 'fo', itemText: 'Faroe Islands' }, - { value: 'fj', itemText: 'Fiji' }, - { value: 'fi', itemText: 'Finland' }, - { value: 'fr', itemText: 'France' }, - { value: 'gf', itemText: 'French Guiana' }, - { value: 'pf', itemText: 'French Polynesia' }, - { value: 'tf', itemText: 'French Southern Territories' }, - { value: 'ga', itemText: 'Gabon' }, - { value: 'gm', itemText: 'Gambia' }, - { value: 'ge', itemText: 'Georgia' }, - { value: 'de', itemText: 'Germany' }, - { value: 'gh', itemText: 'Ghana' }, - { value: 'gi', itemText: 'Gibraltar' }, - { value: 'gr', itemText: 'Greece' }, - { value: 'gl', itemText: 'Greenland' }, - { value: 'gd', itemText: 'Grenada' }, - { value: 'gp', itemText: 'Guadeloupe' }, - { value: 'gu', itemText: 'Guam' }, - { value: 'gt', itemText: 'Guatemala' }, - { value: 'gg', itemText: 'Guernsey' }, - { value: 'gn', itemText: 'Guinea' }, - { value: 'gw', itemText: 'Guinea-Bissau' }, - { value: 'gy', itemText: 'Guyana' }, - { value: 'ht', itemText: 'Haiti' }, - { value: 'hm', itemText: 'Heard Island and Mcdonald Islands' }, - { value: 'va', itemText: 'Holy See (Vatican City State)' }, - { value: 'hn', itemText: 'Honduras' }, - { value: 'hk', itemText: 'Hong Kong' }, - { value: 'hu', itemText: 'Hungary' }, - { value: 'is', itemText: 'Iceland' }, - { value: 'in', itemText: 'India' }, - { value: 'id', itemText: 'Indonesia' }, - { value: 'ir', itemText: 'Iran, Islamic Republic Of' }, - { value: 'iq', itemText: 'Iraq' }, - { value: 'ie', itemText: 'Ireland' }, - { value: 'im', itemText: 'Isle of Man' }, - { value: 'il', itemText: 'Israel' }, - { value: 'it', itemText: 'Italy' }, - { value: 'jm', itemText: 'Jamaica' }, - { value: 'jp', itemText: 'Japan' }, - { value: 'je', itemText: 'Jersey' }, - { value: 'jo', itemText: 'Jordan' }, - { value: 'kz', itemText: 'Kazakhstan' }, - { value: 'ke', itemText: 'Kenya' }, - { value: 'ki', itemText: 'Kiribati' }, - { value: 'kp', itemText: "Korea, Democratic People's Republic of" }, - { value: 'kr', itemText: 'Korea, Republic of' }, - { value: 'kw', itemText: 'Kuwait' }, - { value: 'kg', itemText: 'Kyrgyzstan' }, - { value: 'la', itemText: 'Laos' }, - { value: 'lv', itemText: 'Latvia' }, - { value: 'lb', itemText: 'Lebanon' }, - { value: 'ls', itemText: 'Lesotho' }, - { value: 'lr', itemText: 'Liberia' }, - { value: 'ly', itemText: 'Libyan Arab Jamahiriya' }, - { value: 'li', itemText: 'Liechtenstein' }, - { value: 'lt', itemText: 'Lithuania' }, - { value: 'lu', itemText: 'Luxembourg' }, - { value: 'mo', itemText: 'Macao' }, - { value: 'mk', itemText: 'Macedonia, The Former Yugoslav Republic of' }, - { value: 'mg', itemText: 'Madagascar' }, - { value: 'mw', itemText: 'Malawi' }, - { value: 'my', itemText: 'Malaysia' }, - { value: 'mv', itemText: 'Maldives' }, - { value: 'ml', itemText: 'Mali' }, - { value: 'mt', itemText: 'Malta' }, - { value: 'mh', itemText: 'Marshall Islands' }, - { value: 'mq', itemText: 'Martinique' }, - { value: 'mr', itemText: 'Mauritania' }, - { value: 'mu', itemText: 'Mauritius' }, - { value: 'yt', itemText: 'Mayotte' }, - { value: 'mx', itemText: 'Mexico' }, - { value: 'fm', itemText: 'Micronesia, Federated States of' }, - { value: 'md', itemText: 'Moldova, Republic of' }, - { value: 'mc', itemText: 'Monaco' }, - { value: 'mn', itemText: 'Mongolia' }, - { value: 'me', itemText: 'Montenegro' }, - { value: 'ms', itemText: 'Montserrat' }, - { value: 'ma', itemText: 'Morocco' }, - { value: 'mz', itemText: 'Mozambique' }, - { value: 'mm', itemText: 'Myanmar' }, - { value: 'na', itemText: 'Namibia' }, - { value: 'nr', itemText: 'Nauru' }, - { value: 'np', itemText: 'Nepal' }, - { value: 'nl', itemText: 'Netherlands' }, - { value: 'an', itemText: 'Netherlands Antilles' }, - { value: 'nc', itemText: 'New Caledonia' }, - { value: 'nz', itemText: 'New Zealand' }, - { value: 'ni', itemText: 'Nicaragua' }, - { value: 'ne', itemText: 'Niger' }, - { value: 'ng', itemText: 'Nigeria' }, - { value: 'nu', itemText: 'Niue' }, - { value: 'nf', itemText: 'Norfolk Island' }, - { value: 'mp', itemText: 'Northern Mariana Islands' }, - { value: 'no', itemText: 'Norway' }, - { value: 'om', itemText: 'Oman' }, - { value: 'pk', itemText: 'Pakistan' }, - { value: 'pw', itemText: 'Palau' }, - { value: 'ps', itemText: 'Palestinian Territory, Occupied' }, - { value: 'pa', itemText: 'Panama' }, - { value: 'pg', itemText: 'Papua New Guinea' }, - { value: 'py', itemText: 'Paraguay' }, - { value: 'pe', itemText: 'Peru' }, - { value: 'ph', itemText: 'Philippines' }, - { value: 'pn', itemText: 'Pitcairn' }, - { value: 'pl', itemText: 'Poland' }, - { value: 'pt', itemText: 'Portugal' }, - { value: 'pr', itemText: 'Puerto Rico' }, - { value: 'qa', itemText: 'Qatar' }, - { value: 're', itemText: 'Reunion' }, - { value: 'ro', itemText: 'Romania' }, - { value: 'ru', itemText: 'Russian Federation' }, - { value: 'rw', itemText: 'RWANDA' }, - { value: 'sh', itemText: 'Saint Helena' }, - { value: 'kn', itemText: 'Saint Kitts and Nevis' }, - { value: 'lc', itemText: 'Saint Lucia' }, - { value: 'pm', itemText: 'Saint Pierre and Miquelon' }, - { value: 'vc', itemText: 'Saint Vincent and the Grenadines' }, - { value: 'ws', itemText: 'Samoa' }, - { value: 'sm', itemText: 'San Marino' }, - { value: 'st', itemText: 'Sao Tome and Principe' }, - { value: 'sa', itemText: 'Saudi Arabia' }, - { value: 'sn', itemText: 'Senegal' }, - { value: 'rs', itemText: 'Serbia' }, - { value: 'sc', itemText: 'Seychelles' }, - { value: 'sl', itemText: 'Sierra Leone' }, - { value: 'sg', itemText: 'Singapore' }, - { value: 'sk', itemText: 'Slovakia' }, - { value: 'si', itemText: 'Slovenia' }, - { value: 'sb', itemText: 'Solomon Islands' }, - { value: 'so', itemText: 'Somalia' }, - { value: 'za', itemText: 'South Africa' }, - { value: 'gs', itemText: 'South Georgia and the South Sandwich Islands' }, - { value: 'es', itemText: 'Spain' }, - { value: 'lk', itemText: 'Sri Lanka' }, - { value: 'sd', itemText: 'Sudan' }, - { value: 'sr', itemText: 'Suriname' }, - { value: 'sj', itemText: 'Svalbard and Jan Mayen' }, - { value: 'sz', itemText: 'Swaziland' }, - { value: 'se', itemText: 'Sweden' }, - { value: 'ch', itemText: 'Switzerland' }, - { value: 'sy', itemText: 'Syrian Arab Republic' }, - { value: 'tw', itemText: 'Taiwan' }, - { value: 'tj', itemText: 'Tajikistan' }, - { value: 'tz', itemText: 'Tanzania, United Republic of' }, - { value: 'th', itemText: 'Thailand' }, - { value: 'tl', itemText: 'Timor-Leste' }, - { value: 'tg', itemText: 'Togo' }, - { value: 'tk', itemText: 'Tokelau' }, - { value: 'to', itemText: 'Tonga' }, - { value: 'tt', itemText: 'Trinidad and Tobago' }, - { value: 'tn', itemText: 'Tunisia' }, - { value: 'tr', itemText: 'Turkey' }, - { value: 'tm', itemText: 'Turkmenistan' }, - { value: 'tc', itemText: 'Turks and Caicos Islands' }, - { value: 'tv', itemText: 'Tuvalu' }, - { value: 'ug', itemText: 'Uganda' }, - { value: 'ua', itemText: 'Ukraine' }, - { value: 'ae', itemText: 'United Arab Emirates' }, - { value: 'gb', itemText: 'United Kingdom' }, - { value: 'us', itemText: 'United States' }, - { value: 'um', itemText: 'United States Minor Outlying Islands' }, - { value: 'uy', itemText: 'Uruguay' }, - { value: 'uz', itemText: 'Uzbekistan' }, - { value: 'vu', itemText: 'Vanuatu' }, - { value: 've', itemText: 'Venezuela' }, - { value: 'vn', itemText: 'Vietnam' }, - { value: 'vg', itemText: 'Virgin Islands, British' }, - { value: 'vi', itemText: 'Virgin Islands, U.S.' }, - { value: 'wf', itemText: 'Wallis and Futuna' }, - { value: 'eh', itemText: 'Western Sahara' }, - { value: 'ye', itemText: 'Yemen' }, - { value: 'zm', itemText: 'Zambia' }, - { value: 'zw', itemText: 'Zimbabwe' }, + { value: "af", itemText: "Afghanistan" }, + { value: "ax", itemText: "Aland Islands" }, + { value: "al", itemText: "Albania" }, + { value: "dz", itemText: "Algeria" }, + { value: "as", itemText: "American Samoa" }, + { value: "ad", itemText: "Andorra" }, + { value: "ao", itemText: "Angola" }, + { value: "ai", itemText: "Anguilla" }, + { value: "aq", itemText: "Antarctica" }, + { value: "ag", itemText: "Antigua and Barbuda" }, + { value: "ar", itemText: "Argentina" }, + { value: "ar", itemText: "Armenia" }, + { value: "aw", itemText: "Aruba" }, + { value: "au", itemText: "Australia" }, + { value: "at", itemText: "Austria" }, + { value: "az", itemText: "Azerbaijan" }, + { value: "bs", itemText: "Bahamas" }, + { value: "bh", itemText: "Bahrain" }, + { value: "bd", itemText: "Bangladesh" }, + { value: "bb", itemText: "Barbados" }, + { value: "by", itemText: "Belarus" }, + { value: "be", itemText: "Belgium" }, + { value: "bz", itemText: "Belize" }, + { value: "bj", itemText: "Benin" }, + { value: "bm", itemText: "Bermuda" }, + { value: "bt", itemText: "Bhutan" }, + { value: "bo", itemText: "Bolivia" }, + { value: "ba", itemText: "Bosnia and Herzegovina" }, + { value: "bw", itemText: "Botswana" }, + { value: "bv", itemText: "Bouvet Island" }, + { value: "br", itemText: "Brazil" }, + { value: "io", itemText: "British Indian Ocean Territory" }, + { value: "bn", itemText: "Brunei Darussalam" }, + { value: "bg", itemText: "Bulgaria" }, + { value: "bf", itemText: "Burkina Faso" }, + { value: "bi", itemText: "Burundi" }, + { value: "kh", itemText: "Cambodia" }, + { value: "cm", itemText: "Cameroon" }, + { value: "ca", itemText: "Canada" }, + { value: "cv", itemText: "Cape Verde" }, + { value: "ky", itemText: "Cayman Islands" }, + { value: "cf", itemText: "Central African Republic" }, + { value: "td", itemText: "Chad" }, + { value: "cl", itemText: "Chile" }, + { value: "cn", itemText: "China" }, + { value: "cx", itemText: "Christmas Island" }, + { value: "cc", itemText: "Cocos (Keeling) Islands" }, + { value: "co", itemText: "Colombia" }, + { value: "km", itemText: "Comoros" }, + { value: "cg", itemText: "Congo" }, + { value: "cd", itemText: "Congo, The Democratic Republic of the" }, + { value: "ck", itemText: "Cook Islands" }, + { value: "cr", itemText: "Costa Rica" }, + { value: "ci", itemText: "Cote D'Ivoire" }, + { value: "hr", itemText: "Croatia" }, + { value: "cu", itemText: "Cuba" }, + { value: "cy", itemText: "Cyprus" }, + { value: "cz", itemText: "Czech Republic" }, + { value: "dk", itemText: "Denmark" }, + { value: "dj", itemText: "Djibouti" }, + { value: "dm", itemText: "Dominica" }, + { value: "do", itemText: "Dominican Republic" }, + { value: "ec", itemText: "Ecuador" }, + { value: "eg", itemText: "Egypt" }, + { value: "sv", itemText: "El Salvador" }, + { value: "gq", itemText: "Equatorial Guinea" }, + { value: "er", itemText: "Eritrea" }, + { value: "ee", itemText: "Estonia" }, + { value: "et", itemText: "Ethiopia" }, + { value: "fk", itemText: "Falkland Islands (Malvinas)" }, + { value: "fo", itemText: "Faroe Islands" }, + { value: "fj", itemText: "Fiji" }, + { value: "fi", itemText: "Finland" }, + { value: "fr", itemText: "France" }, + { value: "gf", itemText: "French Guiana" }, + { value: "pf", itemText: "French Polynesia" }, + { value: "tf", itemText: "French Southern Territories" }, + { value: "ga", itemText: "Gabon" }, + { value: "gm", itemText: "Gambia" }, + { value: "ge", itemText: "Georgia" }, + { value: "de", itemText: "Germany" }, + { value: "gh", itemText: "Ghana" }, + { value: "gi", itemText: "Gibraltar" }, + { value: "gr", itemText: "Greece" }, + { value: "gl", itemText: "Greenland" }, + { value: "gd", itemText: "Grenada" }, + { value: "gp", itemText: "Guadeloupe" }, + { value: "gu", itemText: "Guam" }, + { value: "gt", itemText: "Guatemala" }, + { value: "gg", itemText: "Guernsey" }, + { value: "gn", itemText: "Guinea" }, + { value: "gw", itemText: "Guinea-Bissau" }, + { value: "gy", itemText: "Guyana" }, + { value: "ht", itemText: "Haiti" }, + { value: "hm", itemText: "Heard Island and Mcdonald Islands" }, + { value: "va", itemText: "Holy See (Vatican City State)" }, + { value: "hn", itemText: "Honduras" }, + { value: "hk", itemText: "Hong Kong" }, + { value: "hu", itemText: "Hungary" }, + { value: "is", itemText: "Iceland" }, + { value: "in", itemText: "India" }, + { value: "id", itemText: "Indonesia" }, + { value: "ir", itemText: "Iran, Islamic Republic Of" }, + { value: "iq", itemText: "Iraq" }, + { value: "ie", itemText: "Ireland" }, + { value: "im", itemText: "Isle of Man" }, + { value: "il", itemText: "Israel" }, + { value: "it", itemText: "Italy" }, + { value: "jm", itemText: "Jamaica" }, + { value: "jp", itemText: "Japan" }, + { value: "je", itemText: "Jersey" }, + { value: "jo", itemText: "Jordan" }, + { value: "kz", itemText: "Kazakhstan" }, + { value: "ke", itemText: "Kenya" }, + { value: "ki", itemText: "Kiribati" }, + { value: "kp", itemText: "Korea, Democratic People's Republic of" }, + { value: "kr", itemText: "Korea, Republic of" }, + { value: "kw", itemText: "Kuwait" }, + { value: "kg", itemText: "Kyrgyzstan" }, + { value: "la", itemText: "Laos" }, + { value: "lv", itemText: "Latvia" }, + { value: "lb", itemText: "Lebanon" }, + { value: "ls", itemText: "Lesotho" }, + { value: "lr", itemText: "Liberia" }, + { value: "ly", itemText: "Libyan Arab Jamahiriya" }, + { value: "li", itemText: "Liechtenstein" }, + { value: "lt", itemText: "Lithuania" }, + { value: "lu", itemText: "Luxembourg" }, + { value: "mo", itemText: "Macao" }, + { value: "mk", itemText: "Macedonia, The Former Yugoslav Republic of" }, + { value: "mg", itemText: "Madagascar" }, + { value: "mw", itemText: "Malawi" }, + { value: "my", itemText: "Malaysia" }, + { value: "mv", itemText: "Maldives" }, + { value: "ml", itemText: "Mali" }, + { value: "mt", itemText: "Malta" }, + { value: "mh", itemText: "Marshall Islands" }, + { value: "mq", itemText: "Martinique" }, + { value: "mr", itemText: "Mauritania" }, + { value: "mu", itemText: "Mauritius" }, + { value: "yt", itemText: "Mayotte" }, + { value: "mx", itemText: "Mexico" }, + { value: "fm", itemText: "Micronesia, Federated States of" }, + { value: "md", itemText: "Moldova, Republic of" }, + { value: "mc", itemText: "Monaco" }, + { value: "mn", itemText: "Mongolia" }, + { value: "me", itemText: "Montenegro" }, + { value: "ms", itemText: "Montserrat" }, + { value: "ma", itemText: "Morocco" }, + { value: "mz", itemText: "Mozambique" }, + { value: "mm", itemText: "Myanmar" }, + { value: "na", itemText: "Namibia" }, + { value: "nr", itemText: "Nauru" }, + { value: "np", itemText: "Nepal" }, + { value: "nl", itemText: "Netherlands" }, + { value: "an", itemText: "Netherlands Antilles" }, + { value: "nc", itemText: "New Caledonia" }, + { value: "nz", itemText: "New Zealand" }, + { value: "ni", itemText: "Nicaragua" }, + { value: "ne", itemText: "Niger" }, + { value: "ng", itemText: "Nigeria" }, + { value: "nu", itemText: "Niue" }, + { value: "nf", itemText: "Norfolk Island" }, + { value: "mp", itemText: "Northern Mariana Islands" }, + { value: "no", itemText: "Norway" }, + { value: "om", itemText: "Oman" }, + { value: "pk", itemText: "Pakistan" }, + { value: "pw", itemText: "Palau" }, + { value: "ps", itemText: "Palestinian Territory, Occupied" }, + { value: "pa", itemText: "Panama" }, + { value: "pg", itemText: "Papua New Guinea" }, + { value: "py", itemText: "Paraguay" }, + { value: "pe", itemText: "Peru" }, + { value: "ph", itemText: "Philippines" }, + { value: "pn", itemText: "Pitcairn" }, + { value: "pl", itemText: "Poland" }, + { value: "pt", itemText: "Portugal" }, + { value: "pr", itemText: "Puerto Rico" }, + { value: "qa", itemText: "Qatar" }, + { value: "re", itemText: "Reunion" }, + { value: "ro", itemText: "Romania" }, + { value: "ru", itemText: "Russian Federation" }, + { value: "rw", itemText: "RWANDA" }, + { value: "sh", itemText: "Saint Helena" }, + { value: "kn", itemText: "Saint Kitts and Nevis" }, + { value: "lc", itemText: "Saint Lucia" }, + { value: "pm", itemText: "Saint Pierre and Miquelon" }, + { value: "vc", itemText: "Saint Vincent and the Grenadines" }, + { value: "ws", itemText: "Samoa" }, + { value: "sm", itemText: "San Marino" }, + { value: "st", itemText: "Sao Tome and Principe" }, + { value: "sa", itemText: "Saudi Arabia" }, + { value: "sn", itemText: "Senegal" }, + { value: "rs", itemText: "Serbia" }, + { value: "sc", itemText: "Seychelles" }, + { value: "sl", itemText: "Sierra Leone" }, + { value: "sg", itemText: "Singapore" }, + { value: "sk", itemText: "Slovakia" }, + { value: "si", itemText: "Slovenia" }, + { value: "sb", itemText: "Solomon Islands" }, + { value: "so", itemText: "Somalia" }, + { value: "za", itemText: "South Africa" }, + { value: "gs", itemText: "South Georgia and the South Sandwich Islands" }, + { value: "es", itemText: "Spain" }, + { value: "lk", itemText: "Sri Lanka" }, + { value: "sd", itemText: "Sudan" }, + { value: "sr", itemText: "Suriname" }, + { value: "sj", itemText: "Svalbard and Jan Mayen" }, + { value: "sz", itemText: "Swaziland" }, + { value: "se", itemText: "Sweden" }, + { value: "ch", itemText: "Switzerland" }, + { value: "sy", itemText: "Syrian Arab Republic" }, + { value: "tw", itemText: "Taiwan" }, + { value: "tj", itemText: "Tajikistan" }, + { value: "tz", itemText: "Tanzania, United Republic of" }, + { value: "th", itemText: "Thailand" }, + { value: "tl", itemText: "Timor-Leste" }, + { value: "tg", itemText: "Togo" }, + { value: "tk", itemText: "Tokelau" }, + { value: "to", itemText: "Tonga" }, + { value: "tt", itemText: "Trinidad and Tobago" }, + { value: "tn", itemText: "Tunisia" }, + { value: "tr", itemText: "Turkey" }, + { value: "tm", itemText: "Turkmenistan" }, + { value: "tc", itemText: "Turks and Caicos Islands" }, + { value: "tv", itemText: "Tuvalu" }, + { value: "ug", itemText: "Uganda" }, + { value: "ua", itemText: "Ukraine" }, + { value: "ae", itemText: "United Arab Emirates" }, + { value: "gb", itemText: "United Kingdom" }, + { value: "us", itemText: "United States" }, + { value: "um", itemText: "United States Minor Outlying Islands" }, + { value: "uy", itemText: "Uruguay" }, + { value: "uz", itemText: "Uzbekistan" }, + { value: "vu", itemText: "Vanuatu" }, + { value: "ve", itemText: "Venezuela" }, + { value: "vn", itemText: "Vietnam" }, + { value: "vg", itemText: "Virgin Islands, British" }, + { value: "vi", itemText: "Virgin Islands, U.S." }, + { value: "wf", itemText: "Wallis and Futuna" }, + { value: "eh", itemText: "Western Sahara" }, + { value: "ye", itemText: "Yemen" }, + { value: "zm", itemText: "Zambia" }, + { value: "zw", itemText: "Zimbabwe" }, ]; export const fruits: ComboboxOption[] = [ - { value: 'apple', itemText: 'Apple' }, - { value: 'banana', itemText: 'Banana' }, - { value: 'cherry', itemText: 'Cherry' }, - { value: 'coconut', itemText: 'Coconut' }, - { value: 'durian', itemText: 'Durian' }, - { value: 'lemon', itemText: 'Lemon' }, - { value: 'lychee', itemText: 'Lychee' }, - { value: 'mango', itemText: 'Mango' }, - { value: 'orange', itemText: 'Orange' }, - { value: 'peach', itemText: 'Peach' }, - { value: 'pear', itemText: 'Pear' }, - { value: 'persimmon', itemText: 'Persimmon' }, + { value: "apple", itemText: "Apple" }, + { value: "banana", itemText: "Banana" }, + { value: "cherry", itemText: "Cherry" }, + { value: "coconut", itemText: "Coconut" }, + { value: "durian", itemText: "Durian" }, + { value: "lemon", itemText: "Lemon" }, + { value: "lychee", itemText: "Lychee" }, + { value: "mango", itemText: "Mango" }, + { value: "orange", itemText: "Orange" }, + { value: "peach", itemText: "Peach" }, + { value: "pear", itemText: "Pear" }, + { value: "persimmon", itemText: "Persimmon" }, ]; diff --git a/packages/combobox/stories/template.ts b/packages/combobox/stories/template.ts index 9a3c4430db..215166d8be 100644 --- a/packages/combobox/stories/template.ts +++ b/packages/combobox/stories/template.ts @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { ComboboxMarkup } from './'; +import { ComboboxMarkup } from ".//index.js"; export const Template = ComboboxMarkup; diff --git a/packages/contextual-help/stories/template.ts b/packages/contextual-help/stories/template.ts index ad8499597a..c743164f8e 100644 --- a/packages/contextual-help/stories/template.ts +++ b/packages/contextual-help/stories/template.ts @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { ContextualHelpMarkup } from './'; +import { ContextualHelpMarkup } from ".//index.js"; export const Template = ContextualHelpMarkup; diff --git a/packages/contextual-help/test/contextual-help.test.ts b/packages/contextual-help/test/contextual-help.test.ts index a7b1214751..e140bf6fa5 100644 --- a/packages/contextual-help/test/contextual-help.test.ts +++ b/packages/contextual-help/test/contextual-help.test.ts @@ -9,136 +9,134 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing'; -import { nextFrame } from '@spectrum-web-components/overlay/src/AbstractOverlay.js'; -import { sendKeys } from '@web/test-runner-commands'; -import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; -import { ContextualHelp } from '../src/ContextualHelp.js'; -import { ContextualHelpMarkup } from '../stories'; -import { render, TemplateResult } from 'lit'; +import { elementUpdated, expect, fixture, oneEvent } from "@open-wc/testing"; +import { nextFrame } from "@spectrum-web-components/overlay/src/AbstractOverlay.js"; +import { sendKeys } from "@web/test-runner-commands"; +import { testForLitDevWarnings } from "../../../test/testing-helpers.js"; +import { ContextualHelp } from "../src/ContextualHelp.js"; +import { ContextualHelpMarkup } from "../stories/index.js"; +import { render, TemplateResult } from "lit"; -describe('ContextualHelp', () => { - testForLitDevWarnings( - async () => await fixture(ContextualHelpMarkup()) - ); - it('loads default contextual-help accessibly', async () => { - const el = await fixture(ContextualHelpMarkup()); +describe("ContextualHelp", () => { + testForLitDevWarnings( + async () => await fixture(ContextualHelpMarkup()), + ); + it("loads default contextual-help accessibly", async () => { + const el = await fixture(ContextualHelpMarkup()); - await elementUpdated(el); + await elementUpdated(el); - await expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); - const button = document - .querySelector('sp-contextual-help') - ?.shadowRoot?.querySelector('sp-action-button'); + const button = document + .querySelector("sp-contextual-help") + ?.shadowRoot?.querySelector("sp-action-button"); - expect(button).to.have.attribute('aria-label', 'Informations'); + expect(button).to.have.attribute("aria-label", "Informations"); - el.variant = 'help'; + el.variant = "help"; - await elementUpdated(el); - expect(button).to.have.attribute('aria-label', 'Help'); - }); - it('is a popover on web', async () => { - const el = await fixture(ContextualHelpMarkup()); + await elementUpdated(el); + expect(button).to.have.attribute("aria-label", "Help"); + }); + it("is a popover on web", async () => { + const el = await fixture(ContextualHelpMarkup()); - await elementUpdated(el); - const trigger = el.shadowRoot?.querySelector('#trigger') as HTMLElement; + await elementUpdated(el); + const trigger = el.shadowRoot?.querySelector("#trigger") as HTMLElement; - let popover = el.shadowRoot?.querySelector('sp-popover'); + let popover = el.shadowRoot?.querySelector("sp-popover"); - expect(popover).not.to.exist; + expect(popover).not.to.exist; - const opened = oneEvent(el, 'sp-opened'); + const opened = oneEvent(el, "sp-opened"); - trigger.click(); - await opened; + trigger.click(); + await opened; - popover = el.shadowRoot?.querySelector('sp-popover'); - expect(popover).to.exist; - const headingSlot = popover?.querySelector( - 'slot[name="heading"]' - ) as HTMLSlotElement; - const heading = headingSlot.assignedElements()[0].textContent; + popover = el.shadowRoot?.querySelector("sp-popover"); + expect(popover).to.exist; + const headingSlot = popover?.querySelector( + 'slot[name="heading"]', + ) as HTMLSlotElement; + const heading = headingSlot.assignedElements()[0].textContent; - expect(heading).to.equal('Permission required'); + expect(heading).to.equal("Permission required"); - const closed = oneEvent(el, 'sp-closed'); + const closed = oneEvent(el, "sp-closed"); - await sendKeys({ - press: 'Escape', - }); - await closed; - await nextFrame(); - await nextFrame(); + await sendKeys({ + press: "Escape", + }); + await closed; + await nextFrame(); + await nextFrame(); - popover = el.shadowRoot?.querySelector('sp-popover'); - expect(el.shadowRoot?.querySelector('sp-popover')).not.to.exist; - }); - it('returns the label if set', async () => { - const el = await fixture(ContextualHelpMarkup()); + popover = el.shadowRoot?.querySelector("sp-popover"); + expect(el.shadowRoot?.querySelector("sp-popover")).not.to.exist; + }); + it("returns the label if set", async () => { + const el = await fixture(ContextualHelpMarkup()); - el.label = 'Custom Label'; - expect(el.buttonAriaLabel).to.equal('Custom Label'); - }); + el.label = "Custom Label"; + expect(el.buttonAriaLabel).to.equal("Custom Label"); + }); - it('returns "Help" if variant is "help" and label is not set', async () => { - const el = await fixture(ContextualHelpMarkup()); + it('returns "Help" if variant is "help" and label is not set', async () => { + const el = await fixture(ContextualHelpMarkup()); - el.variant = 'help'; - expect(el.buttonAriaLabel).to.equal('Help'); - }); + el.variant = "help"; + expect(el.buttonAriaLabel).to.equal("Help"); + }); - it('returns "Informations" if variant is not "help" and label is not set', async () => { - const el = await fixture(ContextualHelpMarkup()); + it('returns "Informations" if variant is not "help" and label is not set', async () => { + const el = await fixture(ContextualHelpMarkup()); - expect(el.buttonAriaLabel).to.equal('Informations'); - }); - it('renders correctly when actualPlacement is undefined', async () => { - const el = await fixture(ContextualHelpMarkup()); + expect(el.buttonAriaLabel).to.equal("Informations"); + }); + it("renders correctly when actualPlacement is undefined", async () => { + const el = await fixture(ContextualHelpMarkup()); - el.isMobile.matches = true; + el.isMobile.matches = true; - await elementUpdated(el); + await elementUpdated(el); - const trigger = el.shadowRoot?.querySelector('#trigger') as HTMLElement; + const trigger = el.shadowRoot?.querySelector("#trigger") as HTMLElement; - expect(trigger).to.exist; - expect(trigger).to.have.attribute('aria-label', 'Informations'); + expect(trigger).to.exist; + expect(trigger).to.have.attribute("aria-label", "Informations"); - const overlay = el.shadowRoot?.querySelector( - 'sp-overlay' - ) as HTMLElement; + const overlay = el.shadowRoot?.querySelector("sp-overlay") as HTMLElement; - expect(overlay).to.exist; - expect(overlay).to.have.attribute('trigger', 'trigger@click'); - expect(overlay).to.have.attribute('receives-focus', 'true'); - expect(overlay).to.have.property('offset', el.offset); - expect(overlay).to.have.property('open', el.open); - }); - it('renders dialog content when isMobile.matches is true', async () => { - const el = await fixture(ContextualHelpMarkup()); + expect(overlay).to.exist; + expect(overlay).to.have.attribute("trigger", "trigger@click"); + expect(overlay).to.have.attribute("receives-focus", "true"); + expect(overlay).to.have.property("offset", el.offset); + expect(overlay).to.have.property("open", el.open); + }); + it("renders dialog content when isMobile.matches is true", async () => { + const el = await fixture(ContextualHelpMarkup()); - el.isMobile.matches = true; + el.isMobile.matches = true; - await elementUpdated(el); + await elementUpdated(el); - const template: TemplateResult = el['renderOverlayContent'](); + const template: TemplateResult = el["renderOverlayContent"](); - const container = document.createElement('div'); + const container = document.createElement("div"); - render(template, container); + render(template, container); - const dialogBase = container.querySelector('sp-dialog-base'); - const dialog = container.querySelector('sp-dialog'); - const headingSlot = container.querySelector('slot[name="heading"]'); - const linkSlot = container.querySelector('slot[name="link"]'); + const dialogBase = container.querySelector("sp-dialog-base"); + const dialog = container.querySelector("sp-dialog"); + const headingSlot = container.querySelector('slot[name="heading"]'); + const linkSlot = container.querySelector('slot[name="link"]'); - expect(dialogBase).to.exist; - expect(dialog).to.exist; - expect(dialog).to.have.attribute('dismissable'); - expect(dialog).to.have.attribute('size', 's'); - expect(headingSlot).to.exist; - expect(linkSlot).to.exist; - }); + expect(dialogBase).to.exist; + expect(dialog).to.exist; + expect(dialog).to.have.attribute("dismissable"); + expect(dialog).to.have.attribute("size", "s"); + expect(headingSlot).to.exist; + expect(linkSlot).to.exist; + }); }); diff --git a/packages/dropzone/stories/dropzone.stories.ts b/packages/dropzone/stories/dropzone.stories.ts index 30757ff929..3340c6abef 100644 --- a/packages/dropzone/stories/dropzone.stories.ts +++ b/packages/dropzone/stories/dropzone.stories.ts @@ -10,201 +10,196 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { - html, - LitElement, - TemplateResult, -} from '@spectrum-web-components/base'; -import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; -import { state } from '@spectrum-web-components/base/src/decorators.js'; + html, + LitElement, + TemplateResult, +} from "@spectrum-web-components/base"; +import { defineElement } from "@spectrum-web-components/base/src/define-element.js"; +import { state } from "@spectrum-web-components/base/src/decorators.js"; -import '@spectrum-web-components/dropzone/sp-dropzone.js'; -import '@spectrum-web-components/action-button/sp-action-button.js'; -import { illustration } from '../test/test-svg'; -import '@spectrum-web-components/illustrated-message/sp-illustrated-message.js'; -import '@spectrum-web-components/link/sp-link.js'; +import "@spectrum-web-components/dropzone/sp-dropzone.js"; +import "@spectrum-web-components/action-button/sp-action-button.js"; +import { illustration } from "../test/test-svg.js"; +import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js"; +import "@spectrum-web-components/link/sp-link.js"; export default { - component: 'sp-dropzone', - title: 'Dropzone', - args: { - isDragged: false, - isFilled: false, - }, - argTypes: { - isDragged: { - name: 'isDragged', - type: { name: 'boolean', required: false }, - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - isFilled: { - name: 'isFilled', - type: { name: 'boolean', required: false }, - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: false }, - }, - control: { - type: 'boolean', - }, - }, - }, + component: "sp-dropzone", + title: "Dropzone", + args: { + isDragged: false, + isFilled: false, + }, + argTypes: { + isDragged: { + name: "isDragged", + type: { name: "boolean", required: false }, + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + isFilled: { + name: "isFilled", + type: { name: "boolean", required: false }, + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + }, }; type StoryArgs = { - isDragged?: boolean; - isFilled?: boolean; + isDragged?: boolean; + isFilled?: boolean; }; export const Default = (args: StoryArgs): TemplateResult => { - return html` - - - ${illustration} - -
- - -
-
- or - - Search Adobe Stock - -
- - `; + return html` + + + ${illustration} + +
+ + +
+
+ or + + Search Adobe Stock + +
+ + `; }; export const Dragged = (args: StoryArgs): TemplateResult => { - return html` - - - ${illustration} - -
- - -
-
- or - - Search Adobe Stock - -
- - `; + return html` + + + ${illustration} + +
+ + +
+
+ or + + Search Adobe Stock + +
+ + `; }; Dragged.args = { - isDragged: true, + isDragged: true, }; export const Filled = (args: StoryArgs): TemplateResult => { - return html` - - Filled dropzone - - `; + return html` + + Filled dropzone + + `; }; Filled.args = { - isFilled: true, + isFilled: true, }; class ControlledDropzone extends LitElement { - @state() - private beingDraggedOver: boolean = false; + @state() + private beingDraggedOver: boolean = false; - @state() - private input?: string = undefined; + @state() + private input?: string = undefined; - override render(): TemplateResult { - return html` - - - Drag me - - - - ${illustration} - -
- - -
- - - `; - } + override render(): TemplateResult { + return html` + + + Drag me + + + + ${illustration} + +
+ + +
+ + + `; + } - private onChange(): void { - this.input = 'mock-file'; - this.beingDraggedOver = false; - } + private onChange(): void { + this.input = "mock-file"; + this.beingDraggedOver = false; + } - private onDragOver(): void { - this.beingDraggedOver = true; - } + private onDragOver(): void { + this.beingDraggedOver = true; + } - private onDragLeave(): void { - this.beingDraggedOver = false; - } + private onDragLeave(): void { + this.beingDraggedOver = false; + } } -defineElement('controlled-dropzone', ControlledDropzone); +defineElement("controlled-dropzone", ControlledDropzone); export const Controlled = (): TemplateResult => { - return html` - - `; + return html` `; }; diff --git a/packages/dropzone/test/dropzone.test.ts b/packages/dropzone/test/dropzone.test.ts index be6fa99e22..c32316659a 100644 --- a/packages/dropzone/test/dropzone.test.ts +++ b/packages/dropzone/test/dropzone.test.ts @@ -9,187 +9,184 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import '@spectrum-web-components/dropzone/sp-dropzone.js'; -import { Dropzone } from '@spectrum-web-components/dropzone'; -import { illustration } from './test-svg.js'; -import { waitForPredicate } from '../../../test/testing-helpers.js'; -import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; - -describe('Dropzone', () => { - it('loads', async () => { - const el = await fixture(html` - - - ${illustration} - - -
-
- - -
-
- or - - Search Adobe Stock - -
-
- - `); - - expect(el).to.not.equal(undefined); - - if (!el.shadowRoot) throw new Error('No shadowRoot'); - - const slot = el.shadowRoot.querySelector('slot') as HTMLSlotElement; - - expect(slot).to.not.equal(undefined); - - return true; - }); - it('manages `dropEffects`', async () => { - const el = await fixture(html` - - `); - - await elementUpdated(el); - - expect(el.dropEffect).to.equal('copy'); - - el.dropEffect = 'move'; - - await elementUpdated(el); - - expect(el.dropEffect).to.equal('move'); - }); - it('manages `dragover` events', async () => { - const el = await fixture(html` - - `); - - await elementUpdated(el); - - expect(el.isDragged).to.be.false; - - el.dispatchEvent(new DragEvent('dragover')); - - expect(el.isDragged).to.be.false; - - let dataTransfer: DataTransfer | boolean = false; - - try { - // Safari doesn't like this... - dataTransfer = new DataTransfer(); - } catch (error) {} - - if (dataTransfer) { - const dragOverEvent = new DragEvent('dragover', { - dataTransfer, - }); - - el.dispatchEvent(dragOverEvent); - - expect(el.isDragged).to.be.true; - // We should be able to make the following test here: - // expect(dataTransfer.dropEffect).to.equal(el.dropEffect); - // However, Chrome doesn't like it in the context of a test... - } - }); - it('allows `dragover` events to be canceled', async () => { - const canceledDrag = (event: DragEvent): void => { - event.preventDefault(); - }; - const el = await fixture(html` - - `); - - await elementUpdated(el); - - expect(el.isDragged).to.be.false; - - let dataTransfer: DataTransfer | boolean = false; - - try { - // Safari doesn't like this... - dataTransfer = new DataTransfer(); - } catch (error) {} - - if (dataTransfer) { - const dragOverEvent = new DragEvent('dragover', { - dataTransfer, - }); - - el.dispatchEvent(dragOverEvent); - - expect(el.isDragged).to.be.false; - expect(dataTransfer.dropEffect).to.not.equal(el.dropEffect); - expect(dataTransfer.dropEffect).to.equal('none'); - } - }); - it('manages `dragleave` events via debounce', async () => { - let dragLeftCount = 0; - const onDragLeave = (): void => { - dragLeftCount += 1; - }; - const el = await fixture(html` - - `); +import { elementUpdated, expect, fixture, html } from "@open-wc/testing"; +import { Dropzone } from "@spectrum-web-components/dropzone"; +import "@spectrum-web-components/dropzone/sp-dropzone.js"; +import { waitForPredicate } from "../../../test/testing-helpers.js"; +import { illustration } from "./test-svg.js"; + +describe("Dropzone", () => { + it("loads", async () => { + const el = await fixture(html` + + + ${illustration} + + +
+
+ + +
+
+ or + + Search Adobe Stock + +
+
+ + `); + + expect(el).to.not.equal(undefined); + + if (!el.shadowRoot) throw new Error("No shadowRoot"); + + const slot = el.shadowRoot.querySelector("slot") as HTMLSlotElement; + + expect(slot).to.not.equal(undefined); + + return true; + }); + it("manages `dropEffects`", async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + + expect(el.dropEffect).to.equal("copy"); + + el.dropEffect = "move"; + + await elementUpdated(el); + + expect(el.dropEffect).to.equal("move"); + }); + it("manages `dragover` events", async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + + expect(el.isDragged).to.be.false; + + el.dispatchEvent(new DragEvent("dragover")); + + expect(el.isDragged).to.be.false; + + let dataTransfer: DataTransfer | boolean = false; + + try { + // Safari doesn't like this... + dataTransfer = new DataTransfer(); + } catch (error) { + // Intentionally ignored + } + + if (dataTransfer) { + const dragOverEvent = new DragEvent("dragover", { + dataTransfer, + }); + + el.dispatchEvent(dragOverEvent); + + expect(el.isDragged).to.be.true; + // We should be able to make the following test here: + // expect(dataTransfer.dropEffect).to.equal(el.dropEffect); + // However, Chrome doesn't like it in the context of a test... + } + }); + it("allows `dragover` events to be canceled", async () => { + const canceledDrag = (event: DragEvent): void => { + event.preventDefault(); + }; + const el = await fixture(html` + + `); + + await elementUpdated(el); + + expect(el.isDragged).to.be.false; + + let dataTransfer: DataTransfer | boolean = false; + + try { + // Safari doesn't like this... + dataTransfer = new DataTransfer(); + } catch (error) { + /* empty */ + } + + if (dataTransfer) { + const dragOverEvent = new DragEvent("dragover", { + dataTransfer, + }); + + el.dispatchEvent(dragOverEvent); - await elementUpdated(el); + expect(el.isDragged).to.be.false; + expect(dataTransfer.dropEffect).to.not.equal(el.dropEffect); + expect(dataTransfer.dropEffect).to.equal("none"); + } + }); + it("manages `dragleave` events via debounce", async () => { + let dragLeftCount = 0; + const onDragLeave = (): void => { + dragLeftCount += 1; + }; + const el = await fixture(html` + + `); - expect(dragLeftCount).to.equal(0); + await elementUpdated(el); - el.dispatchEvent(new DragEvent('dragleave')); - el.dispatchEvent(new DragEvent('dragleave')); + expect(dragLeftCount).to.equal(0); - await waitForPredicate(() => dragLeftCount === 1); + el.dispatchEvent(new DragEvent("dragleave")); + el.dispatchEvent(new DragEvent("dragleave")); - expect(dragLeftCount).to.equal(1); - }); + await waitForPredicate(() => dragLeftCount === 1); - it('manages `dragleave` events', async () => { - let dropped = false; - const onDrop = (): void => { - dropped = true; - }; - const el = await fixture(html` - - `); - - await elementUpdated(el); - - expect(dropped).to.be.false; - - el.dispatchEvent(new DragEvent('drop')); - - expect(dropped).to.be.true; - }); - - it('sets `filled` attribute', async () => { - const el = await fixture(html` - - `); - - await elementUpdated(el); - - expect(el.isFilled).to.be.true; - expect(el.hasAttribute('filled')).to.be.true; - }); + expect(dragLeftCount).to.equal(1); + }); + + it("manages `dragleave` events", async () => { + let dropped = false; + const onDrop = (): void => { + dropped = true; + }; + const el = await fixture(html` + + `); + + await elementUpdated(el); + + expect(dropped).to.be.false; + + el.dispatchEvent(new DragEvent("drop")); + + expect(dropped).to.be.true; + }); + + it("sets `filled` attribute", async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + + expect(el.isFilled).to.be.true; + expect(el.hasAttribute("filled")).to.be.true; + }); }); diff --git a/packages/help-text/src/HelpTextManager.ts b/packages/help-text/src/HelpTextManager.ts index 6a0271ab1c..d784a23b4c 100644 --- a/packages/help-text/src/HelpTextManager.ts +++ b/packages/help-text/src/HelpTextManager.ts @@ -10,121 +10,121 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; -import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; -import { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js'; -import { randomID } from '@spectrum-web-components/shared/src/random-id.js'; -import type { HelpText } from './HelpText'; +import { html, TemplateResult } from "@spectrum-web-components/base"; +import { ifDefined } from "@spectrum-web-components/base/src/directives.js"; +import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js"; +import { randomID } from "@spectrum-web-components/shared/src/random-id.js"; +import type { HelpText } from "./HelpText.js"; export class HelpTextManager { - private conditionId?: () => void; - private host!: HTMLElement; - public id!: string; - private mode: 'internal' | 'external' = 'internal'; - private previousTabindex?: -1 | 0 | undefined; - private helpTextElement!: Element; - private get isInternal(): boolean { - return this.mode === 'internal'; - } - - constructor( - host: HTMLElement, - { mode }: { mode: 'internal' | 'external' } = { mode: 'internal' } - ) { - this.host = host; - this.id = `sp-help-text-${randomID()}`; - this.mode = mode; - } - - public render(negative?: boolean): TemplateResult { - // `pass-through-help-text-${this.instanceCount}` makes the slot effectively unreachable from - // the outside allowing the `help-text` slot to be preferred while `negative === false`. - return html` -
- - - -
- `; - } - - private addId(): void { - const id = this.helpTextElement ? this.helpTextElement.id : this.id; - - this.conditionId = conditionAttributeWithId( - this.host, - 'aria-describedby', - id - ); - - if (this.host.hasAttribute('tabindex')) { - this.previousTabindex = parseFloat( - this.host.getAttribute('tabindex') as string - ) as -1 | 0; - } - - this.host.tabIndex = 0; - } - - private removeId(): void { - if (this.conditionId) { - this.conditionId(); - delete this.conditionId; - } - - if (this.helpTextElement) return; - - if (this.previousTabindex) { - this.host.tabIndex = this.previousTabindex; - } else { - this.host.removeAttribute('tabindex'); - } - } - - private handleSlotchange = ({ - target, - }: Event & { target: HTMLSlotElement }): void => { - this.handleHelpText(target); - this.handleNegativeHelpText(target); - }; - - private handleHelpText(target: HTMLSlotElement): void { - if (this.isInternal) return; - - if (this.helpTextElement && this.helpTextElement.id === this.id) { - this.helpTextElement.removeAttribute('id'); - } - - this.removeId(); - const assignedElements = target.assignedElements(); - const nextHelpTextElement = assignedElements[0]; - - this.helpTextElement = nextHelpTextElement; - - if (nextHelpTextElement) { - if (!nextHelpTextElement.id) { - nextHelpTextElement.id = this.id; - } - - this.addId(); - } - } - - private handleNegativeHelpText(target: HTMLSlotElement): void { - if (target.name !== 'negative-help-text') return; - - const assignedElements = target.assignedElements(); - - assignedElements.forEach( - (el) => ((el as unknown as HelpText).variant = 'negative') - ); - } + private conditionId?: () => void; + private host!: HTMLElement; + public id!: string; + private mode: "internal" | "external" = "internal"; + private previousTabindex?: -1 | 0 | undefined; + private helpTextElement!: Element; + private get isInternal(): boolean { + return this.mode === "internal"; + } + + constructor( + host: HTMLElement, + { mode }: { mode: "internal" | "external" } = { mode: "internal" }, + ) { + this.host = host; + this.id = `sp-help-text-${randomID()}`; + this.mode = mode; + } + + public render(negative?: boolean): TemplateResult { + // `pass-through-help-text-${this.instanceCount}` makes the slot effectively unreachable from + // the outside allowing the `help-text` slot to be preferred while `negative === false`. + return html` +
+ + + +
+ `; + } + + private addId(): void { + const id = this.helpTextElement ? this.helpTextElement.id : this.id; + + this.conditionId = conditionAttributeWithId( + this.host, + "aria-describedby", + id, + ); + + if (this.host.hasAttribute("tabindex")) { + this.previousTabindex = parseFloat( + this.host.getAttribute("tabindex") as string, + ) as -1 | 0; + } + + this.host.tabIndex = 0; + } + + private removeId(): void { + if (this.conditionId) { + this.conditionId(); + delete this.conditionId; + } + + if (this.helpTextElement) return; + + if (this.previousTabindex) { + this.host.tabIndex = this.previousTabindex; + } else { + this.host.removeAttribute("tabindex"); + } + } + + private handleSlotchange = ({ + target, + }: Event & { target: HTMLSlotElement }): void => { + this.handleHelpText(target); + this.handleNegativeHelpText(target); + }; + + private handleHelpText(target: HTMLSlotElement): void { + if (this.isInternal) return; + + if (this.helpTextElement && this.helpTextElement.id === this.id) { + this.helpTextElement.removeAttribute("id"); + } + + this.removeId(); + const assignedElements = target.assignedElements(); + const nextHelpTextElement = assignedElements[0]; + + this.helpTextElement = nextHelpTextElement; + + if (nextHelpTextElement) { + if (!nextHelpTextElement.id) { + nextHelpTextElement.id = this.id; + } + + this.addId(); + } + } + + private handleNegativeHelpText(target: HTMLSlotElement): void { + if (target.name !== "negative-help-text") return; + + const assignedElements = target.assignedElements(); + + assignedElements.forEach( + (el) => ((el as unknown as HelpText).variant = "negative"), + ); + } } diff --git a/packages/icon/stories/icon.stories.ts b/packages/icon/stories/icon.stories.ts index 2807ac1497..e26019e607 100644 --- a/packages/icon/stories/icon.stories.ts +++ b/packages/icon/stories/icon.stories.ts @@ -9,106 +9,102 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; +import { html, TemplateResult } from "@spectrum-web-components/base"; -import '@spectrum-web-components/icon/sp-icon.js'; -import { back } from './images'; -import '@spectrum-web-components/icons/sp-icons-medium.js'; -import '@spectrum-web-components/icons/sp-icons-large.js'; +import "@spectrum-web-components/icon/sp-icon.js"; +import { back } from "./images.js"; +import "@spectrum-web-components/icons/sp-icons-medium.js"; +import "@spectrum-web-components/icons/sp-icons-large.js"; -const sizes = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']; +const sizes = ["xxs", "xs", "s", "m", "l", "xl", "xxl"]; export default { - component: 'sp-icon', - title: 'Icon', + component: "sp-icon", + title: "Icon", }; export const Medium = (): TemplateResult => { - return html` - - ${sizes.map( - (size) => html` - - ` - )} - `; + return html` + + ${sizes.map( + (size) => html` `, + )} + `; }; export const Large = (): TemplateResult => { - return html` - - ${sizes.map( - (size) => html` - - ` - )} - `; + return html` + + ${sizes.map( + (size) => html` `, + )} + `; }; export const imageIcon = (): TemplateResult => { - return html` - ${sizes.map( - (size) => html` - - ` - )} - `; + return html` + ${sizes.map( + (size) => html` + + `, + )} + `; }; -imageIcon.storyName = 'Image Icon'; +imageIcon.storyName = "Image Icon"; export const imageIconSrcError = (): TemplateResult => { - const invalidImgSrc = 'invalid-image-src'; - const error = (): void => { - console.error('Invalid sp-icon src provided'); - }; + const invalidImgSrc = "invalid-image-src"; + const error = (): void => { + console.error("Invalid sp-icon src provided"); + }; - return html` - ${sizes.map( - (size) => html` - - ` - )} - `; + return html` + ${sizes.map( + (size) => html` + + `, + )} + `; }; -imageIconSrcError.storyName = 'Image Icon src invalid error'; +imageIconSrcError.storyName = "Image Icon src invalid error"; imageIconSrcError.swc_vrt = { - skip: true, + skip: true, }; imageIconSrcError.parameters = { - // Disables Chromatic's snapshotting on a global level - chromatic: { disableSnapshot: true }, + // Disables Chromatic's snapshotting on a global level + chromatic: { disableSnapshot: true }, }; export const svgIcon = (): TemplateResult => { - return html` - ${sizes.map( - (size) => html` - - - - ` - )} - `; + return html` + ${sizes.map( + (size) => html` + + + + `, + )} + `; }; -svgIcon.storyName = 'SVG Icon'; +svgIcon.storyName = "SVG Icon"; diff --git a/packages/icons-ui/stories/icons-ui.stories.ts b/packages/icons-ui/stories/icons-ui.stories.ts index 248dec0f84..c4868cfe52 100644 --- a/packages/icons-ui/stories/icons-ui.stories.ts +++ b/packages/icons-ui/stories/icons-ui.stories.ts @@ -10,123 +10,109 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/icon/sp-icon.js'; -import '../../iconset/stories/icons-demo.js'; -import { html, TemplateResult } from '@spectrum-web-components/base'; -import { until } from '@spectrum-web-components/base/src/directives.js'; +import { html, TemplateResult } from "@spectrum-web-components/base"; +import { until } from "@spectrum-web-components/base/src/directives.js"; +import "@spectrum-web-components/icon/sp-icon.js"; +import "../../iconset/stories/icons-demo.js"; export default { - title: 'Icons/UI', - argTypes: { - color: { control: 'color' }, - size: { - control: { - type: 'inline-radio', - options: ['s', 'm', 'l', 'xl'], - }, - }, - }, - args: { - color: '#000000', - size: 'm', - }, - swc_vrt: { - preload: async (): Promise => { - await import('./icon-manifest.js'); - }, - }, + title: "Icons/UI", + argTypes: { + color: { control: "color" }, + size: { + control: { + type: "inline-radio", + options: ["s", "m", "l", "xl"], + }, + }, + }, + args: { + color: "#000000", + size: "m", + }, + swc_vrt: { + preload: async (): Promise => { + await import("./icon-manifest.js"); + }, + }, }; interface Properties { - color: string; - size: 's' | 'm' | 'l' | 'xl'; + color: string; + size: "s" | "m" | "l" | "xl"; } export const elements = ({ color, size }: Properties): TemplateResult => { - const content = import('./icon-manifest.js').then( - (iconManifest) => html` - - ` - ); + const content = import("./icon-manifest.js").then( + (iconManifest) => html` + + `, + ); - return html` - - - ${until( - content, - html` - Loading... - ` - )} - - `; + return html` + + ${until(content, html` Loading... `)} + `; }; export const Icons = ({ color, size }: Properties): TemplateResult => { - const content = import('../').then((icons) => { - const iconTemplates: { - template: () => TemplateResult; - name: string; - }[] = []; + const content = import("../").then((icons) => { + const iconTemplates: { + template: () => TemplateResult; + name: string; + }[] = []; - for (const icon in icons) { - if (icon === 'setCustomTemplateLiteralTag') continue; + for (const icon in icons) { + if (icon === "setCustomTemplateLiteralTag") continue; - iconTemplates.push({ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - template: (icons as any)[icon], - name: icon, - }); - } + iconTemplates.push({ + // eslint-disable-next-line @typescript-eslint/no-explicit-any + template: (icons as any)[icon], + name: icon, + }); + } - return html` - - ${iconTemplates.map( - (icon) => html` - - ${icon.template()} - ${icon.name} - - ` - )} - - `; - }); + return html` + + ${iconTemplates.map( + (icon) => html` + + ${icon.template()} + ${icon.name} + + `, + )} + + `; + }); - return html` - - - ${until( - content, - html` - Loading... - ` - )} - - `; + return html` + + ${until(content, html` Loading... `)} + `; }; diff --git a/packages/icons/test/icons.test.ts b/packages/icons/test/icons.test.ts index 17a85cf7a2..8d16d08537 100644 --- a/packages/icons/test/icons.test.ts +++ b/packages/icons/test/icons.test.ts @@ -8,47 +8,41 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import '@spectrum-web-components/icons/sp-icons-large.js'; -import '@spectrum-web-components/icons/sp-icons-medium.js'; -import { IconsLarge, IconsMedium } from '../'; -import IconsetSVG from '../src/icons-large.svg.js'; -import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; +import { elementUpdated, expect, fixture, html } from "@open-wc/testing"; +import "@spectrum-web-components/icons/sp-icons-large.js"; +import "@spectrum-web-components/icons/sp-icons-medium.js"; +import { IconsLarge, IconsMedium } from "../"; +import IconsetSVG from "../src/icons-large.svg.js"; -describe('icons', () => { - it('large', async () => { - const el = await fixture( - html` - - ` - ); +describe("icons", () => { + it("large", async () => { + const el = await fixture(html` + + `); - await elementUpdated(el); + await elementUpdated(el); - expect(el).to.not.equal(undefined); - expect(el.getIconList().length).to.be.above(0); - }); - it('medium', async () => { - const el = await fixture( - html` - - ` - ); + expect(el).to.not.equal(undefined); + expect(el.getIconList().length).to.be.above(0); + }); + it("medium", async () => { + const el = await fixture(html` + + `); - await elementUpdated(el); + await elementUpdated(el); - expect(el).to.not.equal(undefined); - expect(el.getIconList().length).to.be.above(0); - }); - it('listens to slotchange events', async () => { - const el = await fixture( - html` - ${IconsetSVG} - ` - ); + expect(el).to.not.equal(undefined); + expect(el.getIconList().length).to.be.above(0); + }); + it("listens to slotchange events", async () => { + const el = await fixture(html` + ${IconsetSVG} + `); - await elementUpdated(el); + await elementUpdated(el); - expect(el).to.not.equal(undefined); - expect(el.getIconList().length).to.equal(48); - }); + expect(el).to.not.equal(undefined); + expect(el.getIconList().length).to.equal(48); + }); }); diff --git a/packages/illustrated-message/test/illustrated-message.test.ts b/packages/illustrated-message/test/illustrated-message.test.ts index b2c0e236fb..41bdcd9874 100644 --- a/packages/illustrated-message/test/illustrated-message.test.ts +++ b/packages/illustrated-message/test/illustrated-message.test.ts @@ -9,39 +9,39 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import '@spectrum-web-components/illustrated-message/sp-illustrated-message.js'; -import { IllustratedMessage } from '../'; -import { expect, fixture, html } from '@open-wc/testing'; +import { expect, fixture, html } from "@open-wc/testing"; +import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js"; +import { IllustratedMessage } from "../"; -describe('Illustrated Message', () => { - it('loads', async () => { - const el = await fixture(html` - - - - - - `); +describe("Illustrated Message", () => { + it("loads", async () => { + const el = await fixture(html` + + + + + + `); - expect(el).to.not.equal(undefined); + expect(el).to.not.equal(undefined); - if (!el.shadowRoot) throw new Error('No shadowRoot'); + if (!el.shadowRoot) throw new Error("No shadowRoot"); - const slot = el.shadowRoot.querySelector('slot') as HTMLSlotElement; + const slot = el.shadowRoot.querySelector("slot") as HTMLSlotElement; - expect(slot).to.not.equal(undefined); + expect(slot).to.not.equal(undefined); - return true; - }); + return true; + }); }); diff --git a/packages/menu/stories/menu-group.stories.ts b/packages/menu/stories/menu-group.stories.ts index 48318f7c43..14065b1fd2 100644 --- a/packages/menu/stories/menu-group.stories.ts +++ b/packages/menu/stories/menu-group.stories.ts @@ -9,51 +9,49 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; +import { html, TemplateResult } from "@spectrum-web-components/base"; -import { MenuGroup } from '@spectrum-web-components/menu'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-divider.js'; -import '@spectrum-web-components/popover/sp-popover.js'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/menu/sp-menu-divider.js'; -import '@spectrum-web-components/menu/sp-menu-group.js'; +import { MenuGroup } from "@spectrum-web-components/menu"; +import "@spectrum-web-components/menu/sp-menu-divider.js"; +import "@spectrum-web-components/menu/sp-menu-group.js"; +import "@spectrum-web-components/menu/sp-menu-item.js"; +import "@spectrum-web-components/menu/sp-menu.js"; +import "@spectrum-web-components/popover/sp-popover.js"; -import './index.js'; +import "./index.js"; export default { - component: 'sp-menu', - title: 'Menu Group', + component: "sp-menu", + title: "Menu Group", }; export const complexSlotted = (): TemplateResult => { - return html` - - External A - External 1 - External 2 - - `; + return html` + + External A + External 1 + External 2 + + `; }; export const mixed = (): TemplateResult => { - let style = 'italic'; - let weight = '700'; - let color = 'blue'; - let decoration = 'overline'; - const styleRules = ({ - style, - weight, - color, - decoration, - }: { - style: string; - weight: string; - color: string; - decoration: string; - }): string => { - return ` + let style = "italic"; + let weight = "700"; + let color = "blue"; + let decoration = "overline"; + const styleRules = ({ + style, + weight, + color, + decoration, + }: { + style: string; + weight: string; + color: string; + decoration: string; + }): string => { + return ` .style-rule { font-weight: ${weight}; font-style: ${style}; @@ -61,110 +59,104 @@ export const mixed = (): TemplateResult => { text-decoration: ${decoration}; } `; - }; - const update = (event: Event): void => { - const { value, id } = event.target as MenuGroup; + }; + const update = (event: Event): void => { + const { value, id } = event.target as MenuGroup; - switch (id) { - case 'font': - const values = value.split(','); + switch (id) { + case "font": { + const values = value.split(","); - style = values.indexOf('italic') > -1 ? 'italic' : 'normal'; - weight = values.indexOf('bold') > -1 ? '700' : '400'; - break; - case 'color': - color = value; - break; - case 'decoration': - decoration = value; - break; - } + style = values.indexOf("italic") > -1 ? "italic" : "normal"; + weight = values.indexOf("bold") > -1 ? "700" : "400"; + break; + } + case "color": + color = value; + break; + case "decoration": + decoration = value; + break; + } - (document.querySelector('#output') as HTMLElement).textContent = - styleRules({ - style, - weight, - color, - decoration, - }); - }; + (document.querySelector("#output") as HTMLElement).textContent = styleRules( + { + style, + weight, + color, + decoration, + }, + ); + }; - return html` - - - - - Bold - Italic - - - - Black - Blue - Red - Green - - - - None - - Overline - - - Line-through - - Underline - - - - 
+	return html`
+		
+		
+			
+				
+					Bold
+					Italic
+				
+				
+				
+					Black
+					Blue
+					Red
+					Green
+				
+				
+				
+					None
+					 Overline 
+					 Line-through 
+					Underline
+				
+			
+		
+		
             ${styleRules({ style, weight, color, decoration })}
         

-    `;
+		>
+	`;
 };
 
 export const inherit = (): TemplateResult => {
-    return html`
-        
-        
-            
-                
-                    Orange
-                    Apple
-                    Grape
-                
-                
-                
-                    Carrots
-                    Summer Squash
-                    Zuccini
-                
-                
-                
-                    Ceral
-                    Flour
-                    Salt
-                    Sugar
-                
-            
-        
-    `;
+	return html`
+		
+		
+			
+				
+					Orange
+					Apple
+					Grape
+				
+				
+				
+					Carrots
+					Summer Squash
+					Zuccini
+				
+				
+				
+					Ceral
+					Flour
+					Salt
+					Sugar
+				
+			
+		
+	`;
 };
diff --git a/packages/menu/stories/menu-item.stories.ts b/packages/menu/stories/menu-item.stories.ts
index b3dda98488..e2bc3ca592 100644
--- a/packages/menu/stories/menu-item.stories.ts
+++ b/packages/menu/stories/menu-item.stories.ts
@@ -9,90 +9,86 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
 
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu.js";
 
 export default {
-    component: 'sp-menu-item',
-    title: 'Menu Item',
+	component: "sp-menu-item",
+	title: "Menu Item",
 };
 
 export const Default = (): TemplateResult => {
-    return html`
-        
-            Menu Item
-        
-    `;
+	return html`
+		
+			Menu Item
+		
+	`;
 };
 
 export const noWrap = (): TemplateResult => {
-    return html`
-        
-            
-                Select a Country with a very long label, too long, in fact
-            
-        
-    `;
+	return html`
+		
+			
+				Select a Country with a very long label, too long, in fact
+			
+		
+	`;
 };
 
 export const descriptionSlot = (): TemplateResult => {
-    return html`
-        
-            
-                Quick export
-                Share a snapshot
-            
-        
-    `;
+	return html`
+		
+			
+				Quick export
+				Share a snapshot
+			
+		
+	`;
 };
 
 export const valueSlot = (): TemplateResult => {
-    /**
-     * This story featurs zero width spaces between the characters in the `` element.
-     * While their absence has not caused issues in the local Storybook, the visual regression
-     * suite was causig the `⌘​` character to display different between the various Menu Items
-     * without the intevening zero width space character. When reviewing in the future,
-     * `font-variant-ligatures: none` was also not enough to address this situation.
-     */
-    //
-    //
-    return html`
-        
-        
-            
-                Save
-                ⌘​S
-            
-            
-                Save As...
-                ⇧​⌘​S
-            
-            
-                Save All
-                ⌥​⌘​S
-            
-        
-    `;
+	/**
+	 * This story features zero width spaces between the characters in the `` element.
+	 * While their absence has not caused issues in the local Storybook, the visual regression
+	 * suite was causing the `⌘` character to display different between the various Menu Items
+	 * without the intervening zero width space character. When reviewing in the future,
+	 * `font-variant-ligatures: none` was also not enough to address this situation.
+	 */
+	return html`
+		
+		
+			
+				Save
+				⌘S
+			
+			
+				Save As...
+				⇧⌘S
+			
+			
+				Save All
+				⌥⌘S
+			
+		
+	`;
 };
 
 export const href = (): TemplateResult => {
-    return html`
-        
-            
-                
-                Edit the Documentation Site
-            
-        
-    `;
+	return html`
+		
+			
+				
+				Edit the Documentation Site
+			
+		
+	`;
 };
diff --git a/packages/menu/stories/menu-sizes.stories.ts b/packages/menu/stories/menu-sizes.stories.ts
index bdcacaaf81..bac1ef6d2c 100644
--- a/packages/menu/stories/menu-sizes.stories.ts
+++ b/packages/menu/stories/menu-sizes.stories.ts
@@ -10,15 +10,15 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { TemplateResult } from '@spectrum-web-components/base';
-import { MenuMarkup } from './';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { MenuMarkup } from ".//index.js";
 
 export default {
-    component: 'sp-menu',
-    title: 'Menu/Sizes',
+	component: "sp-menu",
+	title: "Menu/Sizes",
 };
 
-export const S = (): TemplateResult => MenuMarkup({ size: 's' });
-export const M = (): TemplateResult => MenuMarkup({ size: 'm' });
-export const L = (): TemplateResult => MenuMarkup({ size: 'l' });
-export const XL = (): TemplateResult => MenuMarkup({ size: 'xl' });
+export const S = (): TemplateResult => MenuMarkup({ size: "s" });
+export const M = (): TemplateResult => MenuMarkup({ size: "m" });
+export const L = (): TemplateResult => MenuMarkup({ size: "l" });
+export const XL = (): TemplateResult => MenuMarkup({ size: "xl" });
diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts
index 51545363e9..95b3fd24b1 100644
--- a/packages/menu/stories/menu.stories.ts
+++ b/packages/menu/stories/menu.stories.ts
@@ -9,426 +9,411 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import type { Menu } from '@spectrum-web-components/menu';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
+import type { Menu } from "@spectrum-web-components/menu";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-export.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-share.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
 
 export default {
-    component: 'sp-menu',
-    title: 'Menu',
+	component: "sp-menu",
+	title: "Menu",
 };
 
 export const Default = (): TemplateResult => {
-    return html`
-        
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            
-            Save Selection
-            Make Work Path
-        
+	return html`
+		
+			Deselect
+			Select Inverse
+			Feather...
+			Select and Mask...
+			
+			Save Selection
+			Make Work Path
+		
 
-        
-            
-                Deselect
-                Select Inverse
-                Feather...
-                Select and Mask...
-                
-                Save Selection
-                Make Work Path
-            
-        
-    `;
+		
+			
+				Deselect
+				Select Inverse
+				Feather...
+				Select and Mask...
+				
+				Save Selection
+				Make Work Path
+			
+		
+	`;
 };
 
 export const singleSelect = (): TemplateResult => {
-    return html`
-         {
-                navigator.clipboard.writeText(value);
-            }}
-        >
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            
-            Save Selection
-            Make Work Path
-        
+	return html`
+		 {
+				navigator.clipboard.writeText(value);
+			}}
+		>
+			Deselect
+			Select Inverse
+			Feather...
+			Select and Mask...
+			
+			Save Selection
+			Make Work Path
+		
 
-        
-             {
-                    navigator.clipboard.writeText(value);
-                }}
-            >
-                Deselect
-                Select Inverse
-                Feather...
-                Select and Mask...
-                
-                Save Selection
-                Make Work Path
-            
-        
-    `;
+		
+			 {
+					navigator.clipboard.writeText(value);
+				}}
+			>
+				Deselect
+				Select Inverse
+				Feather...
+				Select and Mask...
+				
+				Save Selection
+				Make Work Path
+			
+		
+	`;
 };
 
 export const multipleSelect = (): TemplateResult => {
-    return html`
-        
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            
-            Save Selection
-            Make Work Path
-        
+	return html`
+		
+			Deselect
+			Select Inverse
+			Feather...
+			Select and Mask...
+			
+			Save Selection
+			Make Work Path
+		
 
-        
-            
-                Deselect
-                Select Inverse
-                Feather...
-                Select and Mask...
-                
-                Save Selection
-                Make Work Path
-            
-        
-    `;
+		
+			
+				Deselect
+				Select Inverse
+				Feather...
+				Select and Mask...
+				
+				Save Selection
+				Make Work Path
+			
+		
+	`;
 };
 
 export const controlled = (): TemplateResult => {
-    const forceSelection = (event: Event & { target: Menu }): void => {
-        event.target.updateComplete.then(() => {
-            event.target.selected = ['Select and Mask...'];
-        });
-    };
+	const forceSelection = (event: Event & { target: Menu }): void => {
+		event.target.updateComplete.then(() => {
+			event.target.selected = ["Select and Mask..."];
+		});
+	};
 
-    return html`
-        

-            This Menu will default to a
-            selected
-            value of
-            [ 'Feather...', 'Save Selection' ]
-            but then on any subsequent interaction be forced to a
-            selected
-            value of
-            [ 'Select and Mask...' ]
-            .
-        

-        
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            
-            Save Selection
-            Make Work Path
-        
-    `;
+	return html`
+		

+			This Menu will default to a
+			selected
+			value of
+			[ 'Feather...', 'Save Selection' ]
+			but then on any subsequent interaction be forced to a
+			selected
+			value of
+			[ 'Select and Mask...' ]
+			.
+		

+		
+			Deselect
+			Select Inverse
+			Feather...
+			Select and Mask...
+			
+			Save Selection
+			Make Work Path
+		
+	`;
 };
 controlled.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 controlled.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
 
 export const menuItemWithDescription = (): TemplateResult => {
-    return html`
-        
-            
-                
-                Quick export
-                Share a snapshot
-            
-            
-                
-                Open a copy
-                Illustrator for iPad
-            
-            
-                
-                Share link
-                Enable comments and download
-            
-        
+	return html`
+		
+			
+				
+				Quick export
+				Share a snapshot
+			
+			
+				
+				Open a copy
+				Illustrator for iPad
+			
+			
+				
+				Share link
+				Enable comments and download
+			
+		
 
-        
-            
-                Deselect
-                
-                    Select Inverse
-                    Enable inverse selection
-                
-                Feather...
-                Select and Mask...
-                
-                Save Selection
-                
-                    Make Work Path
-                    Create a reusable work path
-                
-            
-        
-    `;
+		
+			
+				Deselect
+				
+					Select Inverse
+					Enable inverse selection
+				
+				Feather...
+				Select and Mask...
+				
+				Save Selection
+				
+					Make Work Path
+					Create a reusable work path
+				
+			
+		
+	`;
 };
 
 export const selectsWithIcons = (): TemplateResult => {
-    return html`
-        
-            
-                
-                    
-                    Quick export
-                
-                
-                    
-                    Open a copy
-                
-                
-                    
-                    Share link
-                    Enable comments and download
-                
-            
-        
-    `;
+	return html`
+		
+			
+				
+					
+					Quick export
+				
+				
+					
+					Open a copy
+				
+				
+					
+					Share link
+					Enable comments and download
+				
+			
+		
+	`;
 };
 
 export const headersAndIcons = (): TemplateResult => {
-    return html`
-        
-            
-                
-                    Section Heading
-                    Action 1
-                    Action 2
-                    Action 3
-                
-                
-                
-                    Section Heading
-                    
-                        
-                        Save
-                    
-                    
-                        
-                        Download
-                    
-                    
-                        
-                        Share link
-                        Enable comments
-                    
-                
-            
-        
-    `;
+	return html`
+		
+			
+				
+					Section Heading
+					Action 1
+					Action 2
+					Action 3
+				
+				
+				
+					Section Heading
+					
+						
+						Save
+					
+					
+						
+						Download
+					
+					
+						
+						Share link
+						Enable comments
+					
+				
+			
+		
+	`;
 };
 
-headersAndIcons.storyName = 'Headers and Icons';
+headersAndIcons.storyName = "Headers and Icons";
 
 export const Selected = (): TemplateResult => {
-    return html`
-        
-            
-                
-                    San Francisco
-                    Financial District
-                    South of Market
-                    North Beach
-                
-                
-                
-                    Oakland
-                    City Center
-                    Jack London Square
-                    
-                        My best friend's mom's house in the burbs just off
-                        Silverado street
-                    
-                
-            
-        
-    `;
+	return html`
+		
+			
+				
+					San Francisco
+					Financial District
+					South of Market
+					North Beach
+				
+				
+				
+					Oakland
+					City Center
+					Jack London Square
+					
+						My best friend's mom's house in the burbs just off Silverado street
+					
+				
+			
+		
+	`;
 };
 
 export const MenuGroupSelects = (): TemplateResult => {
-    return html`
-        
-            
-                
-                    One of these
-                    Camden
-                    Cedar Riverside
-                    Downtown
-                    Northeast Arts District
-                    Uptown
-                
-                
-                    Or of these
-                    Lowertown
-                    Grand Ave
-                
-                
-                    Many of these
-                    Financial District
-                    South of Market
-                    North Beach
-                
-                
-                
-                    One of these
-                    City Center
-                    Jack London Square
-                    
-                        My best friend's mom's house in the burbs just off
-                        Silverado street
-                    
-                
-            
-        
-    `;
+	return html`
+		
+			
+				
+					One of these
+					Camden
+					Cedar Riverside
+					Downtown
+					Northeast Arts District
+					Uptown
+				
+				
+					Or of these
+					Lowertown
+					Grand Ave
+				
+				
+					Many of these
+					Financial District
+					South of Market
+					North Beach
+				
+				
+				
+					One of these
+					City Center
+					Jack London Square
+					
+						My best friend's mom's house in the burbs just off Silverado street
+					
+				
+			
+		
+	`;
 };
 
 export const selectedOffPage = (): TemplateResult => {
-    return html`
-        

-            In this example the \`<sp-menu-item selected>\` element is off
-            the visible page by default, but does not alter the page scroll on
-            load.
-        

-        
-            
-                My best friend's mom's house in the burbs just off Silverado
-                street
-            
-        
-    `;
+	return html`
+		

+			In this example the \`<sp-menu-item selected>\` element is off the
+			visible page by default, but does not alter the page scroll on load.
+		

+		
+			
+				My best friend's mom's house in the burbs just off Silverado street
+			
+		
+	`;
 };
 
 export const MenuGroupSelectsMultiple = (): TemplateResult => {
-    return html`
-        
-            
-                
-                    Many of these
-                    Camden
-                    Cedar Riverside
-                    Downtown
-                    Northeast Arts District
-                    Uptown
-                
-                
-                    And these, too
-                    Lowertown
-                    Grand Ave
-                
-                
-                    None of these
-                    Financial District
-                    South of Market
-                    North Beach
-                
-                
-                
-                    One of these
-                    City Center
-                    Jack London Square
-                    
-                        My best friend's mom's house in the burbs just off
-                        Silverado street
-                    
-                
-            
-        
-    `;
+	return html`
+		
+			
+				
+					Many of these
+					Camden
+					Cedar Riverside
+					Downtown
+					Northeast Arts District
+					Uptown
+				
+				
+					And these, too
+					Lowertown
+					Grand Ave
+				
+				
+					None of these
+					Financial District
+					South of Market
+					North Beach
+				
+				
+				
+					One of these
+					City Center
+					Jack London Square
+					
+						My best friend's mom's house in the burbs just off Silverado street
+					
+				
+			
+		
+	`;
 };
 
 export const menuWithValueSlots = (): TemplateResult => {
-    return html`
-        
-            
-                Undo
-                ⌘​Z
-            
-            
-                Redo
-                ⇧⌘​Z
-            
-            
-            
-                Cut
-                ⌘​X
-            
-            
-                Copy
-                ⌘​S
-            
-            
-                Paste
-                ⌘​P
-            
-        
-        
-            
-                
-                    Undo
-                    ⌘​Z
-                
-                
-                    Redo
-                    ⇧⌘​Z
-                
-                
-                
-                    Cut
-                    ⌘​X
-                
-                
-                    Copy
-                    ⌘​S
-                
-                
-                    Paste
-                    ⌘​P
-                
-            
-        
-    `;
+	return html`
+		
+			
+				Undo
+				⌘Z
+			
+			
+				Redo
+				⇧⌘Z
+			
+			
+			
+				Cut
+				⌘X
+			
+			
+				Copy
+				⌘S
+			
+			
+				Paste
+				⌘P
+			
+		
+		
+			
+				
+					Undo
+					⌘Z
+				
+				
+					Redo
+					⇧⌘Z
+				
+				
+				
+					Cut
+					⌘X
+				
+				
+					Copy
+					⌘S
+				
+				
+					Paste
+					⌘P
+				
+			
+		
+	`;
 };
diff --git a/packages/menu/stories/submenu.stories.ts b/packages/menu/stories/submenu.stories.ts
index 967081789d..0a124b0003 100644
--- a/packages/menu/stories/submenu.stories.ts
+++ b/packages/menu/stories/submenu.stories.ts
@@ -10,425 +10,401 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import { Overlay, VirtualTrigger } from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
-import type { ActionMenu } from '@spectrum-web-components/action-menu';
-import type { Menu, MenuItem } from '@spectrum-web-components/menu';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+
+import type { ActionMenu } from "@spectrum-web-components/action-menu";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
+import type { Menu, MenuItem } from "@spectrum-web-components/menu";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import { Overlay, VirtualTrigger } from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/popover/sp-popover.js";
 
 export default {
-    component: 'sp-menu',
-    title: 'Menu/Submenu',
+	component: "sp-menu",
+	title: "Menu/Submenu",
 };
 
 function nextFrame(): Promise {
-    return new Promise((res) => requestAnimationFrame(() => res()));
+	return new Promise((res) => requestAnimationFrame(() => res()));
 }
 
 class SubmenuReady extends HTMLElement {
-    ready!: (value: boolean | PromiseLike) => void;
-
-    constructor() {
-        super();
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-            this.setup();
-        });
-    }
-
-    menu!: ActionMenu;
-    submenu!: MenuItem;
-    submenuChild!: MenuItem;
-
-    async setup(): Promise {
-        await nextFrame();
-
-        this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;
-        this.menu.addEventListener('sp-opened', this.handleMenuOpened);
-        this.menu.addEventListener(
-            'sp-closed',
-            () => {
-                this.menu.removeEventListener(
-                    'sp-opened',
-                    this.handleMenuOpened
-                );
-            },
-            { once: true }
-        );
-        this.menu.open = true;
-    }
-
-    handleMenuOpened = async (event: Event): Promise => {
-        this.menu.removeEventListener('sp-opened', this.handleMenuOpened);
-        await nextFrame();
-        await (event.target as ActionMenu).updateComplete;
-
-        this.submenu = document.querySelector('#submenu-item-1') as MenuItem;
-
-        if (!this.submenu) {
-            return;
-        }
-
-        this.submenu.addEventListener('sp-opened', this.handleSubmenuOpened);
-        this.submenu.click();
-    };
-
-    handleSubmenuOpened = async (event: Event): Promise => {
-        this.submenu.removeEventListener('sp-opened', this.handleSubmenuOpened);
-        await nextFrame();
-        await (event.target as MenuItem).updateComplete;
-
-        this.submenuChild = document.querySelector(
-            '#submenu-item-2'
-        ) as MenuItem;
-
-        if (!this.submenuChild) {
-            return;
-        }
-
-        this.submenuChild.addEventListener(
-            'sp-opened',
-            this.handleSubmenuChildOpened
-        );
-        this.submenuChild.click();
-    };
-
-    handleSubmenuChildOpened = async (event: Event): Promise => {
-        this.submenuChild.removeEventListener(
-            'sp-opened',
-            this.handleSubmenuChildOpened
-        );
-        await nextFrame();
-        await (event.target as MenuItem).updateComplete;
-
-        this.ready(true);
-    };
-
-    private readyPromise: Promise = Promise.resolve(false);
-
-    get updateComplete(): Promise {
-        return this.readyPromise;
-    }
+	ready!: (value: boolean | PromiseLike) => void;
+
+	constructor() {
+		super();
+		this.readyPromise = new Promise((res) => {
+			this.ready = res;
+			this.setup();
+		});
+	}
+
+	menu!: ActionMenu;
+	submenu!: MenuItem;
+	submenuChild!: MenuItem;
+
+	async setup(): Promise {
+		await nextFrame();
+
+		this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;
+		this.menu.addEventListener("sp-opened", this.handleMenuOpened);
+		this.menu.addEventListener(
+			"sp-closed",
+			() => {
+				this.menu.removeEventListener("sp-opened", this.handleMenuOpened);
+			},
+			{ once: true },
+		);
+		this.menu.open = true;
+	}
+
+	handleMenuOpened = async (event: Event): Promise => {
+		this.menu.removeEventListener("sp-opened", this.handleMenuOpened);
+		await nextFrame();
+		await (event.target as ActionMenu).updateComplete;
+
+		this.submenu = document.querySelector("#submenu-item-1") as MenuItem;
+
+		if (!this.submenu) {
+			return;
+		}
+
+		this.submenu.addEventListener("sp-opened", this.handleSubmenuOpened);
+		this.submenu.click();
+	};
+
+	handleSubmenuOpened = async (event: Event): Promise => {
+		this.submenu.removeEventListener("sp-opened", this.handleSubmenuOpened);
+		await nextFrame();
+		await (event.target as MenuItem).updateComplete;
+
+		this.submenuChild = document.querySelector("#submenu-item-2") as MenuItem;
+
+		if (!this.submenuChild) {
+			return;
+		}
+
+		this.submenuChild.addEventListener(
+			"sp-opened",
+			this.handleSubmenuChildOpened,
+		);
+		this.submenuChild.click();
+	};
+
+	handleSubmenuChildOpened = async (event: Event): Promise => {
+		this.submenuChild.removeEventListener(
+			"sp-opened",
+			this.handleSubmenuChildOpened,
+		);
+		await nextFrame();
+		await (event.target as MenuItem).updateComplete;
+
+		this.ready(true);
+	};
+
+	private readyPromise: Promise = Promise.resolve(false);
+
+	get updateComplete(): Promise {
+		return this.readyPromise;
+	}
 }
 
-customElements.define('submenu-ready', SubmenuReady);
+customElements.define("submenu-ready", SubmenuReady);
 
 const submenuDecorator = (story: () => TemplateResult): TemplateResult => {
-    return html`
-        ${story()}
-        
-    `;
+	return html`
+		${story()}
+		
+	`;
 };
 
 export const submenu = (): TemplateResult => {
-    const getValueEls = (): {
-        root: HTMLElement;
-        first: HTMLElement;
-        second: HTMLElement;
-    } => {
-        return {
-            root: document.querySelector('#root-value') as HTMLElement,
-            first: document.querySelector('#first-value') as HTMLElement,
-            second: document.querySelector('#second-value') as HTMLElement,
-        };
-    };
-    const clearValues = (): void => {
-        const valueEls = getValueEls();
-
-        valueEls.root.textContent = '';
-        valueEls.first.textContent = '';
-        valueEls.second.textContent = '';
-    };
-    const handleRootChange = (event: Event & { target: ActionMenu }): void => {
-        const valueEls = getValueEls();
-
-        valueEls.root.textContent = event.target.value;
-    };
-    const handleFirstDescendantChange = (
-        event: Event & { target: Menu }
-    ): void => {
-        const valueEls = getValueEls();
-
-        valueEls.first.textContent = event.target.selected[0] || '';
-    };
-    const handleSecondDescendantChange = (
-        event: Event & { target: Menu }
-    ): void => {
-        const valueEls = getValueEls();
-
-        valueEls.second.textContent = event.target.selected[0] || '';
-    };
-
-    return html`
-        
-            
-             console.log('group change')}
-                role="none"
-            >
-                New York
-                Bronx
-                
-                    Brooklyn
-                    
-                        
-                            Ft. Greene
-                            
-                                S. Oxford St
-                                S. Portland Ave
-                                S. Elliot Pl
-                            
-                        
-                        Park Slope
-                        Williamsburg
-                    
-                
-                
-                    Manhattan
-                    
-                        SoHo
-                        
-                            Union Square
-                            
-                                14th St
-                                Broadway
-                                Park Ave
-                            
-                        
-                        Upper East Side
-                    
-                
-                
-                    Queens
-                    
-                        
-                            You shouldn't be able to see this!
-                        
-                        Forest Hills
-                        Jamaica
-                    
-                
-            
-        
-        

-            Root value:
-            
-            

-            First descendant value:
-            
-            

-            Second descendant value:
-            
-            

-        

-    `;
+	const getValueEls = (): {
+		root: HTMLElement;
+		first: HTMLElement;
+		second: HTMLElement;
+	} => {
+		return {
+			root: document.querySelector("#root-value") as HTMLElement,
+			first: document.querySelector("#first-value") as HTMLElement,
+			second: document.querySelector("#second-value") as HTMLElement,
+		};
+	};
+	const clearValues = (): void => {
+		const valueEls = getValueEls();
+
+		valueEls.root.textContent = "";
+		valueEls.first.textContent = "";
+		valueEls.second.textContent = "";
+	};
+	const handleRootChange = (event: Event & { target: ActionMenu }): void => {
+		const valueEls = getValueEls();
+
+		valueEls.root.textContent = event.target.value;
+	};
+	const handleFirstDescendantChange = (
+		event: Event & { target: Menu },
+	): void => {
+		const valueEls = getValueEls();
+
+		valueEls.first.textContent = event.target.selected[0] || "";
+	};
+	const handleSecondDescendantChange = (
+		event: Event & { target: Menu },
+	): void => {
+		const valueEls = getValueEls();
+
+		valueEls.second.textContent = event.target.selected[0] || "";
+	};
+
+	return html`
+		
+			
+			 console.log("group change")} role="none">
+				New York
+				Bronx
+				
+					Brooklyn
+					
+						
+							Ft. Greene
+							
+								S. Oxford St
+								S. Portland Ave
+								S. Elliot Pl
+							
+						
+						Park Slope
+						Williamsburg
+					
+				
+				
+					Manhattan
+					
+						SoHo
+						
+							Union Square
+							
+								14th St
+								Broadway
+								Park Ave
+							
+						
+						Upper East Side
+					
+				
+				
+					Queens
+					
+						 You shouldn't be able to see this! 
+						Forest Hills
+						Jamaica
+					
+				
+			
+		
+		

+			Root value:
+			
+			

+			First descendant value:
+			
+			

+			Second descendant value:
+			
+			

+		

+	`;
 };
 
 submenu.decorators = [submenuDecorator];
 
 export const contextMenu = (): TemplateResult => {
-    const contextmenu = async (event: PointerEvent): Promise => {
-        event.preventDefault();
-        const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
-        const overlay = document.querySelector('sp-overlay') as Overlay;
-
-        clearValues();
-        overlay.triggerElement = virtualTrigger;
-        overlay.willPreventClose = true;
-        overlay.type = 'auto';
-        overlay.placement = 'right-start';
-        overlay.open = true;
-    };
-    const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {
-        return {
-            root: document.querySelector('#root-value') as HTMLElement,
-            first: document.querySelector('#first-value') as HTMLElement,
-        };
-    };
-    const clearValues = (): void => {
-        const valueEls = getValueEls();
-
-        valueEls.root.textContent = '';
-        valueEls.first.textContent = '';
-    };
-    const handleRootChange = (event: Event & { target: ActionMenu }): void => {
-        const valueEls = getValueEls();
-
-        valueEls.root.textContent = event.target.value;
-        event.target.parentElement?.dispatchEvent(
-            new Event('close', { bubbles: true })
-        );
-    };
-    const handleFirstDescendantChange = (
-        event: Event & { target: Menu }
-    ): void => {
-        const valueEls = getValueEls();
-
-        valueEls.first.textContent = event.target.selected[0] || '';
-    };
-
-    return html`
-        
-        

-            

-                Root value:
-                
-                

-                First descendant value:
-                
-                

-            

-        

-        
-            
-                    event.target?.dispatchEvent(
-                        new Event('close', { bubbles: true })
-                    )}
-            >
-                
-                    
-                        Options
-                        
-                            Copy
-                            ⌘​S
-                        
-                        
-                            Paste
-                            ⌘​P
-                        
-                        
-                            Cut
-                            ⌘​X
-                        
-                        
-                        
-                            Select layer
-                            
-                                Ellipse 1
-                                Rectangle
-                            
-                        
-                        
-                            Group
-                            ⌘​G
-                        
-                        
-                            Unlock
-                            ⌘​L
-                        
-                        
-                        
-                            Bring to front
-                            ⇧​⌘​​]
-                        
-                        
-                            Bring forward
-                            ⌘​​]
-                        
-                        
-                            Send backward
-                            ⌘​​[
-                        
-                        
-                            Send to back
-                            ⇧​⌘​​[
-                        
-                        
-                        
-                            Delete
-                            DEL
-                        
-                    
-                
-            
-        
-    `;
+	const contextmenu = async (event: PointerEvent): Promise => {
+		event.preventDefault();
+		const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
+		const overlay = document.querySelector("sp-overlay") as Overlay;
+
+		clearValues();
+		overlay.triggerElement = virtualTrigger;
+		overlay.willPreventClose = true;
+		overlay.type = "auto";
+		overlay.placement = "right-start";
+		overlay.open = true;
+	};
+	const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {
+		return {
+			root: document.querySelector("#root-value") as HTMLElement,
+			first: document.querySelector("#first-value") as HTMLElement,
+		};
+	};
+	const clearValues = (): void => {
+		const valueEls = getValueEls();
+
+		valueEls.root.textContent = "";
+		valueEls.first.textContent = "";
+	};
+	const handleRootChange = (event: Event & { target: ActionMenu }): void => {
+		const valueEls = getValueEls();
+
+		valueEls.root.textContent = event.target.value;
+		event.target.parentElement?.dispatchEvent(
+			new Event("close", { bubbles: true }),
+		);
+	};
+	const handleFirstDescendantChange = (
+		event: Event & { target: Menu },
+	): void => {
+		const valueEls = getValueEls();
+
+		valueEls.first.textContent = event.target.selected[0] || "";
+	};
+
+	return html`
+		
+		

+			

+				Root value:
+				
+				

+				First descendant value:
+				
+				

+			

+		

+		
+			
+					event.target?.dispatchEvent(new Event("close", { bubbles: true }))}
+			>
+				
+					
+						Options
+						
+							Copy
+							⌘S
+						
+						
+							Paste
+							⌘P
+						
+						
+							Cut
+							⌘X
+						
+						
+						
+							Select layer
+							
+								Ellipse 1
+								Rectangle
+							
+						
+						
+							Group
+							⌘G
+						
+						
+							Unlock
+							⌘L
+						
+						
+						
+							Bring to front
+							⇧⌘]
+						
+						
+							Bring forward
+							⌘]
+						
+						
+							Send backward
+							⌘[
+						
+						
+							Send to back
+							⇧⌘[
+						
+						
+						
+							Delete
+							DEL
+						
+					
+				
+			
+		
+	`;
 };
 
 export const customRootSubmenu = (): TemplateResult => {
-    return html`
-        
-            Bronx
-            
-                Brooklyn
-                

-                    Kitten
-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                    
I am an arbitrary content in submenu

-                

-            
-        
-    `;
+	return html`
+		
+			Bronx
+			
+				Brooklyn
+				

+					Kitten
+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+					
I am an arbitrary content in submenu

+				

+			
+		
+	`;
 };
 
 customRootSubmenu.swc_vrt = {
-    skip: true,
+	skip: true,
 };
diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
index c676ec54fb..99efa64cde 100644
--- a/packages/number-field/test/number-field.test.ts
+++ b/packages/number-field/test/number-field.test.ts
@@ -10,1819 +10,1804 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@spectrum-web-components/base';
+import { shouldPolyfill } from "@formatjs/intl-numberformat/should-polyfill.js";
 import {
-    aTimeout,
-    elementUpdated,
-    expect,
-    nextFrame,
-    oneEvent,
-} from '@open-wc/testing';
-import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill.js';
+	aTimeout,
+	elementUpdated,
+	expect,
+	nextFrame,
+	oneEvent,
+} from "@open-wc/testing";
+import { html } from "@spectrum-web-components/base";
 
 import {
-    currency,
-    decimals,
-    Default,
-    germanDecimals,
-    indeterminate,
-    percents,
-    pixels,
-    units,
-} from '../stories/number-field.stories.js';
-import '@spectrum-web-components/number-field/sp-number-field.js';
+	CHANGE_DEBOUNCE_MS,
+	FRAMES_PER_CHANGE,
+	indeterminatePlaceholder,
+	NumberField,
+} from "@spectrum-web-components/number-field";
+import "@spectrum-web-components/number-field/sp-number-field.js";
+import { isMac } from "@spectrum-web-components/shared/src/platform.js";
 import {
-    CHANGE_DEBOUNCE_MS,
-    FRAMES_PER_CHANGE,
-    indeterminatePlaceholder,
-    NumberField,
-} from '@spectrum-web-components/number-field';
+	a11ySnapshot,
+	findAccessibilityNode,
+	sendKeys,
+	setUserAgent,
+} from "@web/test-runner-commands";
+import { spy } from "sinon";
+import { sendMouse } from "../../../test/plugins/browser.js";
 import {
-    a11ySnapshot,
-    findAccessibilityNode,
-    sendKeys,
-    setUserAgent,
-} from '@web/test-runner-commands';
-import { spy } from 'sinon';
-import { clickBySelector, getElFrom } from './helpers.js';
-import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
+	fixture,
+	testForLitDevWarnings,
+} from "../../../test/testing-helpers.js";
+import { createLanguageContext } from "../../../tools/reactive-controllers/test/helpers.js";
 import {
-    fixture,
-    testForLitDevWarnings,
-} from '../../../test/testing-helpers.js';
-import { isMac } from '@spectrum-web-components/shared/src/platform.js';
+	currency,
+	decimals,
+	Default,
+	germanDecimals,
+	indeterminate,
+	percents,
+	pixels,
+	units,
+} from "../stories/number-field.stories.js";
+import { clickBySelector, getElFrom } from "./helpers.js";
 
-describe('NumberField', () => {
-    before(async () => {
-        const shouldPolyfillEn = shouldPolyfill('en');
-        const shouldPolyfillFr = shouldPolyfill('fr');
+describe("NumberField", () => {
+	before(async () => {
+		const shouldPolyfillEn = shouldPolyfill("en");
+		const shouldPolyfillFr = shouldPolyfill("fr");
 
-        if (shouldPolyfillEn || shouldPolyfillFr) {
-            await import('@formatjs/intl-numberformat/polyfill-force.js');
-        }
+		if (shouldPolyfillEn || shouldPolyfillFr) {
+			await import("@formatjs/intl-numberformat/polyfill-force.js");
+		}
 
-        if (shouldPolyfillEn) {
-            await import('@formatjs/intl-numberformat/locale-data/en.js');
-        }
+		if (shouldPolyfillEn) {
+			await import("@formatjs/intl-numberformat/locale-data/en.js");
+		}
 
-        if (shouldPolyfillFr) {
-            await import('@formatjs/intl-numberformat/locale-data/fr.js');
-        }
-    });
-    testForLitDevWarnings(async () => await getElFrom(Default({})));
-    it('loads default number-field accessibly', async () => {
-        const el = await getElFrom(Default({}));
+		if (shouldPolyfillFr) {
+			await import("@formatjs/intl-numberformat/locale-data/fr.js");
+		}
+	});
+	testForLitDevWarnings(async () => await getElFrom(Default({})));
+	it("loads default number-field accessibly", async () => {
+		const el = await getElFrom(Default({}));
 
-        await elementUpdated(el);
+		await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
-    describe('receives input', () => {
-        it('without language context', async () => {
-            const el = await getElFrom(Default({ value: 1337 }));
+		await expect(el).to.be.accessible();
+	});
+	describe("receives input", () => {
+		it("without language context", async () => {
+			const el = await getElFrom(Default({ value: 1337 }));
 
-            el.size = 's';
-            expect(el.formattedValue).to.equal('1,337');
-            expect(el.valueAsString).to.equal('1337');
-            expect(el.value).to.equal(1337);
-            expect(el.focusElement.value).to.equal('1,337');
-            el.focus();
-            await sendKeys({ type: '7331' });
-            await elementUpdated(el);
-            await sendKeys({ press: 'Enter' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('13,377,331');
-            expect(el.valueAsString).to.equal('13377331');
-            expect(el.value).to.equal(13377331);
-            expect(el.focusElement.value).to.equal('13,377,331');
-        });
-        it('with language context', async () => {
-            const [languageContext] = createLanguageContext('fr');
-            const el = await getElFrom(html`
-                

-                    ${Default({ value: 1337 })}
-                

-            `);
+			el.size = "s";
+			expect(el.formattedValue).to.equal("1,337");
+			expect(el.valueAsString).to.equal("1337");
+			expect(el.value).to.equal(1337);
+			expect(el.focusElement.value).to.equal("1,337");
+			el.focus();
+			await sendKeys({ type: "7331" });
+			await elementUpdated(el);
+			await sendKeys({ press: "Enter" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("13,377,331");
+			expect(el.valueAsString).to.equal("13377331");
+			expect(el.value).to.equal(13377331);
+			expect(el.focusElement.value).to.equal("13,377,331");
+		});
+		it("with language context", async () => {
+			const [languageContext] = createLanguageContext("fr");
+			const el = await getElFrom(html`
+				

+					${Default({ value: 1337 })}
+				

+			`);
 
-            el.size = 'l';
-            expect(el.formattedValue).to.equal('1 337');
-            expect(el.valueAsString).to.equal('1337');
-            expect(el.value).to.equal(1337);
-            expect(el.focusElement.value).to.equal('1 337');
-            el.focus();
-            await sendKeys({ type: '7331' });
-            await elementUpdated(el);
-            await sendKeys({ press: 'Enter' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('13 377 331');
-            expect(el.valueAsString).to.equal('13377331');
-            expect(el.value).to.equal(13377331);
-            expect(el.focusElement.value).to.equal('13 377 331');
-        });
-    });
-    xit('correctly interprets decimal point on iPhone', async () => {
-        // setUserAgent is not currently supported by Playwright
-        await setUserAgent(
-            'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1'
-        );
-        const el = await getElFrom(decimals({ value: 1234 }));
+			el.size = "l";
+			expect(el.formattedValue).to.equal("1 337");
+			expect(el.valueAsString).to.equal("1337");
+			expect(el.value).to.equal(1337);
+			expect(el.focusElement.value).to.equal("1 337");
+			el.focus();
+			await sendKeys({ type: "7331" });
+			await elementUpdated(el);
+			await sendKeys({ press: "Enter" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("13 377 331");
+			expect(el.valueAsString).to.equal("13377331");
+			expect(el.value).to.equal(13377331);
+			expect(el.focusElement.value).to.equal("13 377 331");
+		});
+	});
+	xit("correctly interprets decimal point on iPhone", async () => {
+		// setUserAgent is not currently supported by Playwright
+		await setUserAgent(
+			"Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1",
+		);
+		const el = await getElFrom(decimals({ value: 1234 }));
 
-        expect(el.formattedValue).to.equal('1,234');
+		expect(el.formattedValue).to.equal("1,234");
 
-        el.focus();
-        await sendKeys({ press: 'Backspace' });
-        el.blur();
-        expect(el.formattedValue).to.equal('123');
+		el.focus();
+		await sendKeys({ press: "Backspace" });
+		el.blur();
+		expect(el.formattedValue).to.equal("123");
 
-        el.focus();
-        await sendKeys({ type: '45' });
-        el.blur();
-        expect(el.formattedValue).to.equal('12,345');
+		el.focus();
+		await sendKeys({ type: "45" });
+		el.blur();
+		expect(el.formattedValue).to.equal("12,345");
 
-        el.focus();
-        await sendKeys({ type: ',6' });
-        el.blur();
-        expect(el.formattedValue).to.equal('12,345.6');
+		el.focus();
+		await sendKeys({ type: ",6" });
+		el.blur();
+		expect(el.formattedValue).to.equal("12,345.6");
 
-        el.focus();
-        await sendKeys({ type: ',7' });
-        el.blur();
-        expect(el.formattedValue).to.equal('123,456.7');
+		el.focus();
+		await sendKeys({ type: ",7" });
+		el.blur();
+		expect(el.formattedValue).to.equal("123,456.7");
 
-        el.focus();
-        await sendKeys({ press: 'Backspace' });
-        await sendKeys({ press: 'Backspace' });
-        el.blur();
-        expect(el.formattedValue).to.equal('123,456');
-    });
-    describe('Step', () => {
-        it('can be 0', async () => {
-            const el = await getElFrom(
-                Default({
-                    step: 0,
-                    min: 0,
-                    max: 10,
-                    value: 5,
-                })
-            );
+		el.focus();
+		await sendKeys({ press: "Backspace" });
+		await sendKeys({ press: "Backspace" });
+		el.blur();
+		expect(el.formattedValue).to.equal("123,456");
+	});
+	describe("Step", () => {
+		it("can be 0", async () => {
+			const el = await getElFrom(
+				Default({
+					step: 0,
+					min: 0,
+					max: 10,
+					value: 5,
+				}),
+			);
 
-            el.size = 'xl';
-            expect(el.value).to.equal(5);
-            expect(el.formattedValue).to.equal('5');
-            expect(el.valueAsString).to.equal('5');
-            expect(el.focusElement.value).to.equal('5');
-        });
-        it('respects other locales', async () => {
-            const el = await getElFrom(
-                germanDecimals({
-                    step: 0.01,
-                })
-            );
+			el.size = "xl";
+			expect(el.value).to.equal(5);
+			expect(el.formattedValue).to.equal("5");
+			expect(el.valueAsString).to.equal("5");
+			expect(el.focusElement.value).to.equal("5");
+		});
+		it("respects other locales", async () => {
+			const el = await getElFrom(
+				germanDecimals({
+					step: 0.01,
+				}),
+			);
 
-            el.value = 2.42;
-            await elementUpdated(el);
-            el.size = 'xl';
-            expect(el.value).to.equal(2.42);
-            expect(el.formattedValue).to.equal('+2,42');
-            expect(el.focusElement.value).to.equal('+2,42');
+			el.value = 2.42;
+			await elementUpdated(el);
+			el.size = "xl";
+			expect(el.value).to.equal(2.42);
+			expect(el.formattedValue).to.equal("+2,42");
+			expect(el.focusElement.value).to.equal("+2,42");
 
-            await clickBySelector(el, '.step-up');
+			await clickBySelector(el, ".step-up");
 
-            expect(el.value).to.equal(2.43);
-            expect(el.formattedValue).to.equal('+2,43');
-            expect(el.focusElement.value).to.equal('+2,43');
-        });
-        it('supports both positive and negative decimal values', async () => {
-            const el = await getElFrom(
-                Default({
-                    step: 0.001,
-                    min: -10,
-                    max: 10,
-                    value: -2.4,
-                })
-            );
+			expect(el.value).to.equal(2.43);
+			expect(el.formattedValue).to.equal("+2,43");
+			expect(el.focusElement.value).to.equal("+2,43");
+		});
+		it("supports both positive and negative decimal values", async () => {
+			const el = await getElFrom(
+				Default({
+					step: 0.001,
+					min: -10,
+					max: 10,
+					value: -2.4,
+				}),
+			);
 
-            el.size = 'xl';
-            expect(el.value).to.equal(-2.4);
-            expect(el.valueAsString).to.equal('-2.4');
-            expect(el.focusElement.value).to.equal('-2.4');
-        });
-        it('correctly handles max values greater than 1000 with step=1', async () => {
-            const el = await getElFrom(
-                Default({
-                    step: 1,
-                    min: 0,
-                    max: 200000,
-                    value: 999,
-                })
-            );
+			el.size = "xl";
+			expect(el.value).to.equal(-2.4);
+			expect(el.valueAsString).to.equal("-2.4");
+			expect(el.focusElement.value).to.equal("-2.4");
+		});
+		it("correctly handles max values greater than 1000 with step=1", async () => {
+			const el = await getElFrom(
+				Default({
+					step: 1,
+					min: 0,
+					max: 200000,
+					value: 999,
+				}),
+			);
 
-            await clickBySelector(el, '.step-up');
+			await clickBySelector(el, ".step-up");
 
-            expect(el.value).to.equal(1000);
-            expect(el.valueAsString).to.equal('1000');
-            expect(el.formattedValue).to.equal('1,000');
-            expect(el.focusElement.value).to.equal('1,000');
+			expect(el.value).to.equal(1000);
+			expect(el.valueAsString).to.equal("1000");
+			expect(el.formattedValue).to.equal("1,000");
+			expect(el.focusElement.value).to.equal("1,000");
 
-            el.value = 15000;
-            await elementUpdated(el);
+			el.value = 15000;
+			await elementUpdated(el);
 
-            expect(el.value).to.equal(15000);
-            expect(el.valueAsString).to.equal('15000');
-            expect(el.formattedValue).to.equal('15,000');
-            expect(el.focusElement.value).to.equal('15,000');
-        });
-    });
-    describe('Increments', () => {
-        let el: NumberField;
+			expect(el.value).to.equal(15000);
+			expect(el.valueAsString).to.equal("15000");
+			expect(el.formattedValue).to.equal("15,000");
+			expect(el.focusElement.value).to.equal("15,000");
+		});
+	});
+	describe("Increments", () => {
+		let el: NumberField;
 
-        beforeEach(async () => {
-            el = await getElFrom(Default({}));
-            expect(el.value).to.be.NaN;
-            expect(el.formattedValue).to.equal('');
-            expect(el.valueAsString).to.equal('NaN');
-            expect(el.focusElement.value).to.equal('');
-        });
-        it('via pointer, only "left" button', async () => {
-            await clickBySelector(el, '.step-up', { button: 'middle' });
-            expect(el.formattedValue).to.equal('');
-            expect(el.valueAsString).to.equal('NaN');
-            expect(el.value).to.be.NaN;
-            expect(el.focusElement.value).to.equal('');
-        });
+		beforeEach(async () => {
+			el = await getElFrom(Default({}));
+			expect(el.value).to.be.NaN;
+			expect(el.formattedValue).to.equal("");
+			expect(el.valueAsString).to.equal("NaN");
+			expect(el.focusElement.value).to.equal("");
+		});
+		it('via pointer, only "left" button', async () => {
+			await clickBySelector(el, ".step-up", { button: "middle" });
+			expect(el.formattedValue).to.equal("");
+			expect(el.valueAsString).to.equal("NaN");
+			expect(el.value).to.be.NaN;
+			expect(el.focusElement.value).to.equal("");
+		});
 
-        it('via pointer', async () => {
-            await clickBySelector(el, '.step-up');
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            await clickBySelector(el, '.step-up');
-            expect(el.formattedValue).to.equal('1');
-            expect(el.valueAsString).to.equal('1');
-            expect(el.value).to.equal(1);
-            expect(el.focusElement.value).to.equal('1');
-        });
-        it('via arrow up', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('1');
-            expect(el.valueAsString).to.equal('1');
-            expect(el.value).to.equal(1);
-            expect(el.focusElement.value).to.equal('1');
-        });
-        it('via arrow up (shift modified)', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            await sendKeys({ press: 'Shift+ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-            expect(el.focusElement.value).to.equal('10');
-        });
-        it('via arrow up (custom shift modified value)', async () => {
-            el.focus();
-            (el as NumberField).stepModifier = 5;
-            (el as NumberField).step = 3;
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            await sendKeys({ press: 'Shift+ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('15');
-            expect(el.valueAsString).to.equal('15');
-            expect(el.value).to.equal(15);
-            expect(el.focusElement.value).to.equal('15');
-        });
-        it('via scroll', async () => {
-            el.focus();
-            await elementUpdated(el);
-            expect(el.focused).to.be.true;
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: 1 }));
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: 100 }));
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('1');
-            expect(el.valueAsString).to.equal('1');
-            expect(el.value).to.equal(1);
-            expect(el.focusElement.value).to.equal('1');
-        });
-        it('via scroll (shift modified)', async () => {
-            el.focus();
-            await elementUpdated(el);
-            expect(el.focused).to.be.true;
-            el.dispatchEvent(
-                new WheelEvent('wheel', {
-                    deltaX: 1,
-                    shiftKey: true,
-                })
-            );
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            el.dispatchEvent(
-                new WheelEvent('wheel', {
-                    deltaX: 100,
-                    shiftKey: true,
-                })
-            );
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-            expect(el.focusElement.value).to.equal('10');
-        });
-    });
-    describe('Decrements', () => {
-        let el: NumberField;
+		it("via pointer", async () => {
+			await clickBySelector(el, ".step-up");
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			await clickBySelector(el, ".step-up");
+			expect(el.formattedValue).to.equal("1");
+			expect(el.valueAsString).to.equal("1");
+			expect(el.value).to.equal(1);
+			expect(el.focusElement.value).to.equal("1");
+		});
+		it("via arrow up", async () => {
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("1");
+			expect(el.valueAsString).to.equal("1");
+			expect(el.value).to.equal(1);
+			expect(el.focusElement.value).to.equal("1");
+		});
+		it("via arrow up (shift modified)", async () => {
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			await sendKeys({ press: "Shift+ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+			expect(el.focusElement.value).to.equal("10");
+		});
+		it("via arrow up (custom shift modified value)", async () => {
+			el.focus();
+			(el as NumberField).stepModifier = 5;
+			(el as NumberField).step = 3;
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			await sendKeys({ press: "Shift+ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("15");
+			expect(el.valueAsString).to.equal("15");
+			expect(el.value).to.equal(15);
+			expect(el.focusElement.value).to.equal("15");
+		});
+		it("via scroll", async () => {
+			el.focus();
+			await elementUpdated(el);
+			expect(el.focused).to.be.true;
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 100 }));
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("1");
+			expect(el.valueAsString).to.equal("1");
+			expect(el.value).to.equal(1);
+			expect(el.focusElement.value).to.equal("1");
+		});
+		it("via scroll (shift modified)", async () => {
+			el.focus();
+			await elementUpdated(el);
+			expect(el.focused).to.be.true;
+			el.dispatchEvent(
+				new WheelEvent("wheel", {
+					deltaX: 1,
+					shiftKey: true,
+				}),
+			);
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			el.dispatchEvent(
+				new WheelEvent("wheel", {
+					deltaX: 100,
+					shiftKey: true,
+				}),
+			);
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+			expect(el.focusElement.value).to.equal("10");
+		});
+	});
+	describe("Decrements", () => {
+		let el: NumberField;
 
-        beforeEach(async () => {
-            el = await getElFrom(Default({}));
-            expect(el.value).to.be.NaN;
-            expect(el.formattedValue).to.equal('');
-            expect(el.valueAsString).to.equal('NaN');
-            expect(el.focusElement.value).to.equal('');
-        });
-        it('via pointer, only "left" button', async () => {
-            await clickBySelector(el, '.step-down', { button: 'middle' });
-            expect(el.formattedValue).to.equal('');
-            expect(el.valueAsString).to.equal('NaN');
-            expect(el.value).to.be.NaN;
-            expect(el.focusElement.value).to.equal('');
-        });
-        it('via pointer', async () => {
-            await clickBySelector(el, '.step-down');
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            await clickBySelector(el, '.step-down');
-            expect(el.formattedValue).to.equal('-1');
-            expect(el.valueAsString).to.equal('-1');
-            expect(el.value).to.equal(-1);
-            expect(el.focusElement.value).to.equal('-1');
-        });
-        it('via arrow down', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowDown' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            await sendKeys({ press: 'ArrowDown' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('-1');
-            expect(el.valueAsString).to.equal('-1');
-            expect(el.value).to.equal(-1);
-            expect(el.focusElement.value).to.equal('-1');
-        });
-        it('via arrow down (shift modified)', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowDown' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            await sendKeys({ press: 'Shift+ArrowDown' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('-10');
-            expect(el.valueAsString).to.equal('-10');
-            expect(el.value).to.equal(-10);
-            expect(el.focusElement.value).to.equal('-10');
-        });
-        it('via arrow up (custom shift modified value)', async () => {
-            el.focus();
-            (el as NumberField).stepModifier = 5;
-            (el as NumberField).step = 3;
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowDown' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            await sendKeys({ press: 'Shift+ArrowDown' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('-15');
-            expect(el.valueAsString).to.equal('-15');
-            expect(el.value).to.equal(-15);
-            expect(el.focusElement.value).to.equal('-15');
-        });
-        it('via scroll', async () => {
-            el.focus();
-            await elementUpdated(el);
-            expect(el.focused).to.be.true;
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: -1 }));
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: -100 }));
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('-1');
-            expect(el.valueAsString).to.equal('-1');
-            expect(el.value).to.equal(-1);
-            expect(el.focusElement.value).to.equal('-1');
-        });
-        it('via scroll (shift modified)', async () => {
-            el.focus();
-            await elementUpdated(el);
-            expect(el.focused).to.be.true;
-            el.dispatchEvent(
-                new WheelEvent('wheel', {
-                    deltaX: -1,
-                    shiftKey: true,
-                })
-            );
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            expect(el.focusElement.value).to.equal('0');
-            el.dispatchEvent(
-                new WheelEvent('wheel', {
-                    deltaX: -100,
-                    shiftKey: true,
-                })
-            );
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('-10');
-            expect(el.valueAsString).to.equal('-10');
-            expect(el.value).to.equal(-10);
-            expect(el.focusElement.value).to.equal('-10');
-        });
-    });
-    describe('dispatched events', () => {
-        const inputSpy = spy();
-        const changeSpy = spy();
-        let el: NumberField;
+		beforeEach(async () => {
+			el = await getElFrom(Default({}));
+			expect(el.value).to.be.NaN;
+			expect(el.formattedValue).to.equal("");
+			expect(el.valueAsString).to.equal("NaN");
+			expect(el.focusElement.value).to.equal("");
+		});
+		it('via pointer, only "left" button', async () => {
+			await clickBySelector(el, ".step-down", { button: "middle" });
+			expect(el.formattedValue).to.equal("");
+			expect(el.valueAsString).to.equal("NaN");
+			expect(el.value).to.be.NaN;
+			expect(el.focusElement.value).to.equal("");
+		});
+		it("via pointer", async () => {
+			await clickBySelector(el, ".step-down");
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			await clickBySelector(el, ".step-down");
+			expect(el.formattedValue).to.equal("-1");
+			expect(el.valueAsString).to.equal("-1");
+			expect(el.value).to.equal(-1);
+			expect(el.focusElement.value).to.equal("-1");
+		});
+		it("via arrow down", async () => {
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowDown" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			await sendKeys({ press: "ArrowDown" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("-1");
+			expect(el.valueAsString).to.equal("-1");
+			expect(el.value).to.equal(-1);
+			expect(el.focusElement.value).to.equal("-1");
+		});
+		it("via arrow down (shift modified)", async () => {
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowDown" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			await sendKeys({ press: "Shift+ArrowDown" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("-10");
+			expect(el.valueAsString).to.equal("-10");
+			expect(el.value).to.equal(-10);
+			expect(el.focusElement.value).to.equal("-10");
+		});
+		it("via arrow up (custom shift modified value)", async () => {
+			el.focus();
+			(el as NumberField).stepModifier = 5;
+			(el as NumberField).step = 3;
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowDown" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			await sendKeys({ press: "Shift+ArrowDown" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("-15");
+			expect(el.valueAsString).to.equal("-15");
+			expect(el.value).to.equal(-15);
+			expect(el.focusElement.value).to.equal("-15");
+		});
+		it("via scroll", async () => {
+			el.focus();
+			await elementUpdated(el);
+			expect(el.focused).to.be.true;
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: -100 }));
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("-1");
+			expect(el.valueAsString).to.equal("-1");
+			expect(el.value).to.equal(-1);
+			expect(el.focusElement.value).to.equal("-1");
+		});
+		it("via scroll (shift modified)", async () => {
+			el.focus();
+			await elementUpdated(el);
+			expect(el.focused).to.be.true;
+			el.dispatchEvent(
+				new WheelEvent("wheel", {
+					deltaX: -1,
+					shiftKey: true,
+				}),
+			);
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			expect(el.focusElement.value).to.equal("0");
+			el.dispatchEvent(
+				new WheelEvent("wheel", {
+					deltaX: -100,
+					shiftKey: true,
+				}),
+			);
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("-10");
+			expect(el.valueAsString).to.equal("-10");
+			expect(el.value).to.equal(-10);
+			expect(el.focusElement.value).to.equal("-10");
+		});
+	});
+	describe("dispatched events", () => {
+		const inputSpy = spy();
+		const changeSpy = spy();
+		let el: NumberField;
 
-        beforeEach(async () => {
-            inputSpy.resetHistory();
-            changeSpy.resetHistory();
-            el = await getElFrom(Default({ value: 50 }));
-            el.addEventListener('input', (event: Event) => {
-                inputSpy((event.target as NumberField)?.value);
-            });
-            el.addEventListener('change', (event: Event) => {
-                changeSpy((event.target as NumberField)?.value);
-            });
-        });
-        it('except when changing `value` from the outside', async () => {
-            el.focus();
-            await elementUpdated(el);
-            expect(el.focused).to.be.true;
-            el.value = 51;
-            expect(changeSpy.callCount).to.equal(0);
-            await elementUpdated(el);
-            el.value = 52;
-            expect(changeSpy.callCount).to.equal(0);
-        });
-        it('handles IME input correctly and dispatches change event', async () => {
-            el.focus();
-            el.dispatchEvent(new CompositionEvent('compositionstart'));
-            // input multibyte characters
-            await sendKeys({ type: '１２３' });
-            await elementUpdated(el);
-            el.dispatchEvent(new CompositionEvent('compositionend'));
-            await elementUpdated(el);
-            await sendKeys({ press: 'Enter' });
-            expect(el.value).to.equal(50123);
-            expect(changeSpy.callCount).to.equal(1);
-        });
-        it('via scroll', async () => {
-            el.focus();
-            await elementUpdated(el);
-            expect(el.focused).to.be.true;
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: 1 }));
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('51');
-            expect(el.valueAsString).to.equal('51');
-            expect(el.value).to.equal(51);
-            expect(inputSpy.callCount).to.equal(1);
-            expect(changeSpy.callCount).to.equal(0);
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: 100 }));
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('52');
-            expect(el.valueAsString).to.equal('52');
-            expect(el.value).to.equal(52);
-            expect(inputSpy.callCount).to.equal(2);
-            expect(changeSpy.callCount).to.equal(0);
-            await aTimeout(CHANGE_DEBOUNCE_MS + 10);
-            expect(inputSpy.callCount).to.equal(2);
-            expect(changeSpy.callCount).to.equal(1);
-        });
-        it('has a useful `value`', async () => {
-            el.focus();
-            await sendKeys({ type: '7' });
-            await sendKeys({ press: 'Enter' });
-            expect(inputSpy.calledWith(507), 'input').to.be.true;
-            expect(changeSpy.calledWith(507), 'change').to.be.true;
-            await sendKeys({ type: ',00' });
-            await sendKeys({ press: 'Enter' });
-            expect(inputSpy.calledWith(5070), 'input').to.be.true;
-            expect(inputSpy.calledWith(50700), 'input').to.be.true;
-            expect(changeSpy.calledWith(50700), 'change').to.be.true;
-        });
-        it('has a useful `value` - percent', async () => {
-            el.formatOptions = { style: 'percent' };
-            el.value = 0.45;
-            expect(el.value).to.equal(0.45);
-            el.focus();
-            await sendKeys({ type: '7' }); // Visible text: 45%7
-            expect(inputSpy.calledWith(4.57), 'first input').to.be.true;
-            await sendKeys({ press: 'Backspace' }); // Visible text: 45%
-            await sendKeys({ press: 'Backspace' }); // Visible text: 45
-            await sendKeys({ press: 'Backspace' }); // Visible text: 4
-            await sendKeys({ press: 'Enter' });
-            expect(el.value).to.equal(0.04);
-            expect(inputSpy.calledWith(0.45), 'second input').to.be.true;
-            expect(inputSpy.calledWith(0.04), 'third input').to.be.true;
-            expect(changeSpy.calledWith(0.04), 'change').to.be.true;
-        });
-        it('has a useful `value` - currency', async () => {
-            el.formatOptions = {
-                style: 'currency',
-                currency: 'EUR',
-                currencyDisplay: 'code',
-                currencySign: 'accounting',
-            };
-            await elementUpdated(el);
-            el.value = 45;
-            expect(el.value).to.equal(45);
-            el.focus();
-            await sendKeys({ type: '7' }); // Visible text: EUR 45.007
-            expect(el.value).to.equal(45.007);
-            expect(inputSpy.calledWith(el.value), 'first input').to.be.true;
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007
-            await sendKeys({ type: '1' }); // Visible text: 1EUR 45.007
-            await sendKeys({ press: 'Enter' }); // Visible text: EUR 145.01
-            expect(el.value).to.equal(145.007);
-            expect(inputSpy.calledWith(145.007), 'second input').to.be.true;
-            expect(changeSpy.calledWith(145.007), 'change').to.be.true;
-        });
-        it('one input/one change for each Arrow*', async () => {
-            el.focus();
-            await sendKeys({ press: 'ArrowUp' });
-            expect(inputSpy.callCount).to.equal(1);
-            expect(changeSpy.callCount).to.equal(1);
-            expect(el.value).to.equal(51);
-            await sendKeys({ press: 'ArrowDown' });
-            expect(inputSpy.callCount).to.equal(2);
-            expect(changeSpy.callCount).to.equal(2);
-            expect(el.value).to.equal(50);
-        });
-        it('one input/one change for each click', async () => {
-            await clickBySelector(el, '.step-up');
-            expect(inputSpy.callCount).to.equal(1);
-            expect(changeSpy.callCount).to.equal(1);
-            expect(el.value).to.equal(51);
-            await clickBySelector(el, '.step-down');
-            expect(inputSpy.callCount).to.equal(2);
-            expect(changeSpy.callCount).to.equal(2);
-            expect(el.value).to.equal(50);
-        });
-        it('click with modifier key', async () => {
-            let target = el.shadowRoot.querySelector('.step-up') as HTMLElement;
-            const stepUpRect = target.getBoundingClientRect();
-            const options = {
-                bubbles: true,
-                composed: true,
-                shiftKey: true,
-                clientX: stepUpRect.x + 1,
-                clientY: stepUpRect.y + 1,
-            };
+		beforeEach(async () => {
+			inputSpy.resetHistory();
+			changeSpy.resetHistory();
+			el = await getElFrom(Default({ value: 50 }));
+			el.addEventListener("input", (event: Event) => {
+				inputSpy((event.target as NumberField)?.value);
+			});
+			el.addEventListener("change", (event: Event) => {
+				changeSpy((event.target as NumberField)?.value);
+			});
+		});
+		it("except when changing `value` from the outside", async () => {
+			el.focus();
+			await elementUpdated(el);
+			expect(el.focused).to.be.true;
+			el.value = 51;
+			expect(changeSpy.callCount).to.equal(0);
+			await elementUpdated(el);
+			el.value = 52;
+			expect(changeSpy.callCount).to.equal(0);
+		});
+		it("handles IME input correctly and dispatches change event", async () => {
+			el.focus();
+			el.dispatchEvent(new CompositionEvent("compositionstart"));
+			// input multibyte characters
+			await sendKeys({ type: "１２３" });
+			await elementUpdated(el);
+			el.dispatchEvent(new CompositionEvent("compositionend"));
+			await elementUpdated(el);
+			await sendKeys({ press: "Enter" });
+			expect(el.value).to.equal(50123);
+			expect(changeSpy.callCount).to.equal(1);
+		});
+		it("via scroll", async () => {
+			el.focus();
+			await elementUpdated(el);
+			expect(el.focused).to.be.true;
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("51");
+			expect(el.valueAsString).to.equal("51");
+			expect(el.value).to.equal(51);
+			expect(inputSpy.callCount).to.equal(1);
+			expect(changeSpy.callCount).to.equal(0);
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 100 }));
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("52");
+			expect(el.valueAsString).to.equal("52");
+			expect(el.value).to.equal(52);
+			expect(inputSpy.callCount).to.equal(2);
+			expect(changeSpy.callCount).to.equal(0);
+			await aTimeout(CHANGE_DEBOUNCE_MS + 10);
+			expect(inputSpy.callCount).to.equal(2);
+			expect(changeSpy.callCount).to.equal(1);
+		});
+		it("has a useful `value`", async () => {
+			el.focus();
+			await sendKeys({ type: "7" });
+			await sendKeys({ press: "Enter" });
+			expect(inputSpy.calledWith(507), "input").to.be.true;
+			expect(changeSpy.calledWith(507), "change").to.be.true;
+			await sendKeys({ type: ",00" });
+			await sendKeys({ press: "Enter" });
+			expect(inputSpy.calledWith(5070), "input").to.be.true;
+			expect(inputSpy.calledWith(50700), "input").to.be.true;
+			expect(changeSpy.calledWith(50700), "change").to.be.true;
+		});
+		it("has a useful `value` - percent", async () => {
+			el.formatOptions = { style: "percent" };
+			el.value = 0.45;
+			expect(el.value).to.equal(0.45);
+			el.focus();
+			await sendKeys({ type: "7" }); // Visible text: 45%7
+			expect(inputSpy.calledWith(4.57), "first input").to.be.true;
+			await sendKeys({ press: "Backspace" }); // Visible text: 45%
+			await sendKeys({ press: "Backspace" }); // Visible text: 45
+			await sendKeys({ press: "Backspace" }); // Visible text: 4
+			await sendKeys({ press: "Enter" });
+			expect(el.value).to.equal(0.04);
+			expect(inputSpy.calledWith(0.45), "second input").to.be.true;
+			expect(inputSpy.calledWith(0.04), "third input").to.be.true;
+			expect(changeSpy.calledWith(0.04), "change").to.be.true;
+		});
+		it("has a useful `value` - currency", async () => {
+			el.formatOptions = {
+				style: "currency",
+				currency: "EUR",
+				currencyDisplay: "code",
+				currencySign: "accounting",
+			};
+			await elementUpdated(el);
+			el.value = 45;
+			expect(el.value).to.equal(45);
+			el.focus();
+			await sendKeys({ type: "7" }); // Visible text: EUR 45.007
+			expect(el.value).to.equal(45.007);
+			expect(inputSpy.calledWith(el.value), "first input").to.be.true;
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+			await sendKeys({ type: "1" }); // Visible text: 1EUR 45.007
+			await sendKeys({ press: "Enter" }); // Visible text: EUR 145.01
+			expect(el.value).to.equal(145.007);
+			expect(inputSpy.calledWith(145.007), "second input").to.be.true;
+			expect(changeSpy.calledWith(145.007), "change").to.be.true;
+		});
+		it("one input/one change for each Arrow*", async () => {
+			el.focus();
+			await sendKeys({ press: "ArrowUp" });
+			expect(inputSpy.callCount).to.equal(1);
+			expect(changeSpy.callCount).to.equal(1);
+			expect(el.value).to.equal(51);
+			await sendKeys({ press: "ArrowDown" });
+			expect(inputSpy.callCount).to.equal(2);
+			expect(changeSpy.callCount).to.equal(2);
+			expect(el.value).to.equal(50);
+		});
+		it("one input/one change for each click", async () => {
+			await clickBySelector(el, ".step-up");
+			expect(inputSpy.callCount).to.equal(1);
+			expect(changeSpy.callCount).to.equal(1);
+			expect(el.value).to.equal(51);
+			await clickBySelector(el, ".step-down");
+			expect(inputSpy.callCount).to.equal(2);
+			expect(changeSpy.callCount).to.equal(2);
+			expect(el.value).to.equal(50);
+		});
+		it("click with modifier key", async () => {
+			let target = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+			const stepUpRect = target.getBoundingClientRect();
+			const options = {
+				bubbles: true,
+				composed: true,
+				shiftKey: true,
+				clientX: stepUpRect.x + 1,
+				clientY: stepUpRect.y + 1,
+			};
 
-            (
-                el as unknown as {
-                    buttons: HTMLDivElement;
-                }
-            ).buttons.setPointerCapture = () => {
-                return;
-            };
-            (
-                el as unknown as {
-                    buttons: HTMLDivElement;
-                }
-            ).buttons.releasePointerCapture = () => {
-                return;
-            };
-            let input = oneEvent(el, 'input');
+			(
+				el as unknown as {
+					buttons: HTMLDivElement;
+				}
+			).buttons.setPointerCapture = () => {
+				return;
+			};
+			(
+				el as unknown as {
+					buttons: HTMLDivElement;
+				}
+			).buttons.releasePointerCapture = () => {
+				return;
+			};
+			let input = oneEvent(el, "input");
 
-            target.dispatchEvent(new PointerEvent('pointerdown', options));
-            await input;
-            target.dispatchEvent(new PointerEvent('pointerup', options));
-            expect(inputSpy.callCount).to.equal(1);
-            expect(changeSpy.callCount).to.equal(1);
-            expect(el.value).to.equal(60);
-            target = el.shadowRoot.querySelector('.step-down') as HTMLElement;
-            const stepDownRect = target.getBoundingClientRect();
+			target.dispatchEvent(new PointerEvent("pointerdown", options));
+			await input;
+			target.dispatchEvent(new PointerEvent("pointerup", options));
+			expect(inputSpy.callCount).to.equal(1);
+			expect(changeSpy.callCount).to.equal(1);
+			expect(el.value).to.equal(60);
+			target = el.shadowRoot.querySelector(".step-down") as HTMLElement;
+			const stepDownRect = target.getBoundingClientRect();
 
-            options.clientX = stepDownRect.x + 1;
-            options.clientY = stepDownRect.y + 1;
-            input = oneEvent(el, 'input');
-            target.dispatchEvent(new PointerEvent('pointerdown', options));
-            await input;
-            target.dispatchEvent(new PointerEvent('pointerup', options));
-            expect(inputSpy.callCount).to.equal(2);
-            expect(changeSpy.callCount).to.equal(2);
-            expect(el.value).to.equal(50);
-        });
-        it('many input, but one change', async () => {
-            const buttonUp = el.shadowRoot.querySelector(
-                '.step-up'
-            ) as HTMLElement;
-            const buttonUpRect = buttonUp.getBoundingClientRect();
-            const buttonUpPosition: [number, number] = [
-                buttonUpRect.x + buttonUpRect.width / 2,
-                buttonUpRect.y + buttonUpRect.height / 2,
-            ];
-            const buttonDown = el.shadowRoot.querySelector(
-                '.step-down'
-            ) as HTMLElement;
-            const buttonDownRect = buttonDown.getBoundingClientRect();
-            const buttonDownPosition: [number, number] = [
-                buttonDownRect.x + buttonDownRect.width / 2,
-                buttonDownRect.y + buttonDownRect.height / 2,
-            ];
+			options.clientX = stepDownRect.x + 1;
+			options.clientY = stepDownRect.y + 1;
+			input = oneEvent(el, "input");
+			target.dispatchEvent(new PointerEvent("pointerdown", options));
+			await input;
+			target.dispatchEvent(new PointerEvent("pointerup", options));
+			expect(inputSpy.callCount).to.equal(2);
+			expect(changeSpy.callCount).to.equal(2);
+			expect(el.value).to.equal(50);
+		});
+		it("many input, but one change", async () => {
+			const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+			const buttonUpRect = buttonUp.getBoundingClientRect();
+			const buttonUpPosition: [number, number] = [
+				buttonUpRect.x + buttonUpRect.width / 2,
+				buttonUpRect.y + buttonUpRect.height / 2,
+			];
+			const buttonDown = el.shadowRoot.querySelector(
+				".step-down",
+			) as HTMLElement;
+			const buttonDownRect = buttonDown.getBoundingClientRect();
+			const buttonDownPosition: [number, number] = [
+				buttonDownRect.x + buttonDownRect.width / 2,
+				buttonDownRect.y + buttonDownRect.height / 2,
+			];
 
-            sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: buttonUpPosition,
-                    },
-                    {
-                        type: 'down',
-                    },
-                ],
-            });
-            await oneEvent(el, 'input');
-            expect(el.value).to.equal(51);
-            expect(inputSpy.callCount).to.equal(1);
-            expect(changeSpy.callCount).to.equal(0);
-            await oneEvent(el, 'input');
-            expect(el.value).to.equal(52);
-            expect(inputSpy.callCount).to.equal(2);
-            expect(changeSpy.callCount).to.equal(0);
-            await oneEvent(el, 'input');
-            expect(el.value).to.equal(53);
-            expect(inputSpy.callCount).to.equal(3);
-            expect(changeSpy.callCount).to.equal(0);
-            sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: buttonDownPosition,
-                    },
-                ],
-            });
-            let framesToWait = FRAMES_PER_CHANGE * 2;
+			sendMouse({
+				steps: [
+					{
+						type: "move",
+						position: buttonUpPosition,
+					},
+					{
+						type: "down",
+					},
+				],
+			});
+			await oneEvent(el, "input");
+			expect(el.value).to.equal(51);
+			expect(inputSpy.callCount).to.equal(1);
+			expect(changeSpy.callCount).to.equal(0);
+			await oneEvent(el, "input");
+			expect(el.value).to.equal(52);
+			expect(inputSpy.callCount).to.equal(2);
+			expect(changeSpy.callCount).to.equal(0);
+			await oneEvent(el, "input");
+			expect(el.value).to.equal(53);
+			expect(inputSpy.callCount).to.equal(3);
+			expect(changeSpy.callCount).to.equal(0);
+			sendMouse({
+				steps: [
+					{
+						type: "move",
+						position: buttonDownPosition,
+					},
+				],
+			});
+			let framesToWait = FRAMES_PER_CHANGE * 2;
 
-            while (framesToWait) {
-                // input is only processed onces per FRAMES_PER_CHANGE number of frames
-                framesToWait -= 1;
-                await nextFrame();
-            }
-            expect(inputSpy.callCount).to.equal(5);
-            expect(changeSpy.callCount).to.equal(0);
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'up',
-                    },
-                ],
-            });
-            expect(inputSpy.callCount).to.equal(5);
-            expect(changeSpy.callCount).to.equal(1);
-        });
-        it('no change in committed value - using buttons', async () => {
-            const buttonUp = el.shadowRoot.querySelector(
-                '.step-up'
-            ) as HTMLElement;
-            const buttonUpRect = buttonUp.getBoundingClientRect();
-            const buttonUpPosition: [number, number] = [
-                buttonUpRect.x + buttonUpRect.width / 2,
-                buttonUpRect.y + buttonUpRect.height / 2,
-            ];
-            const buttonDown = el.shadowRoot.querySelector(
-                '.step-down'
-            ) as HTMLElement;
-            const buttonDownRect = buttonDown.getBoundingClientRect();
-            const buttonDownPosition: [number, number] = [
-                buttonDownRect.x + buttonDownRect.width / 2,
-                buttonDownRect.y + buttonDownRect.height / 2,
-            ];
+			while (framesToWait) {
+				// input is only processed onces per FRAMES_PER_CHANGE number of frames
+				framesToWait -= 1;
+				await nextFrame();
+			}
+			expect(inputSpy.callCount).to.equal(5);
+			expect(changeSpy.callCount).to.equal(0);
+			await sendMouse({
+				steps: [
+					{
+						type: "up",
+					},
+				],
+			});
+			expect(inputSpy.callCount).to.equal(5);
+			expect(changeSpy.callCount).to.equal(1);
+		});
+		it("no change in committed value - using buttons", async () => {
+			const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+			const buttonUpRect = buttonUp.getBoundingClientRect();
+			const buttonUpPosition: [number, number] = [
+				buttonUpRect.x + buttonUpRect.width / 2,
+				buttonUpRect.y + buttonUpRect.height / 2,
+			];
+			const buttonDown = el.shadowRoot.querySelector(
+				".step-down",
+			) as HTMLElement;
+			const buttonDownRect = buttonDown.getBoundingClientRect();
+			const buttonDownPosition: [number, number] = [
+				buttonDownRect.x + buttonDownRect.width / 2,
+				buttonDownRect.y + buttonDownRect.height / 2,
+			];
 
-            sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: buttonUpPosition,
-                    },
-                    {
-                        type: 'down',
-                    },
-                ],
-            });
-            await oneEvent(el, 'input');
-            expect(el.value).to.equal(51);
-            expect(inputSpy.callCount).to.equal(1);
-            expect(changeSpy.callCount).to.equal(0);
-            await oneEvent(el, 'input');
-            expect(el.value).to.equal(52);
-            expect(inputSpy.callCount).to.equal(2);
-            expect(changeSpy.callCount).to.equal(0);
-            sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: buttonDownPosition,
-                    },
-                ],
-            });
-            let framesToWait = FRAMES_PER_CHANGE * 2;
+			sendMouse({
+				steps: [
+					{
+						type: "move",
+						position: buttonUpPosition,
+					},
+					{
+						type: "down",
+					},
+				],
+			});
+			await oneEvent(el, "input");
+			expect(el.value).to.equal(51);
+			expect(inputSpy.callCount).to.equal(1);
+			expect(changeSpy.callCount).to.equal(0);
+			await oneEvent(el, "input");
+			expect(el.value).to.equal(52);
+			expect(inputSpy.callCount).to.equal(2);
+			expect(changeSpy.callCount).to.equal(0);
+			sendMouse({
+				steps: [
+					{
+						type: "move",
+						position: buttonDownPosition,
+					},
+				],
+			});
+			let framesToWait = FRAMES_PER_CHANGE * 2;
 
-            while (framesToWait) {
-                // input is only processed onces per FRAMES_PER_CHANGE number of frames
-                framesToWait -= 1;
-                await nextFrame();
-            }
-            expect(inputSpy.callCount).to.equal(4);
-            expect(changeSpy.callCount).to.equal(0);
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'up',
-                    },
-                ],
-            });
-            expect(inputSpy.callCount).to.equal(4);
-            expect(
-                changeSpy.callCount,
-                'value does not change from initial value so no "change" event is dispatched'
-            ).to.equal(0);
-        });
-    });
-    it('accepts pointer interactions with the stepper UI', async () => {
-        const inputSpy = spy();
-        const el = await getElFrom(Default({ value: 50 }));
+			while (framesToWait) {
+				// input is only processed onces per FRAMES_PER_CHANGE number of frames
+				framesToWait -= 1;
+				await nextFrame();
+			}
+			expect(inputSpy.callCount).to.equal(4);
+			expect(changeSpy.callCount).to.equal(0);
+			await sendMouse({
+				steps: [
+					{
+						type: "up",
+					},
+				],
+			});
+			expect(inputSpy.callCount).to.equal(4);
+			expect(
+				changeSpy.callCount,
+				'value does not change from initial value so no "change" event is dispatched',
+			).to.equal(0);
+		});
+	});
+	it("accepts pointer interactions with the stepper UI", async () => {
+		const inputSpy = spy();
+		const el = await getElFrom(Default({ value: 50 }));
 
-        el.addEventListener('input', () => inputSpy());
-        expect(el.formattedValue).to.equal('50');
-        expect(el.valueAsString).to.equal('50');
-        expect(el.value).to.equal(50);
-        const buttonUp = el.shadowRoot.querySelector('.step-up') as HTMLElement;
-        const buttonUpRect = buttonUp.getBoundingClientRect();
-        const buttonUpPosition: [number, number] = [
-            buttonUpRect.x + buttonUpRect.width / 2,
-            buttonUpRect.y + buttonUpRect.height / 2,
-        ];
-        const buttonDown = el.shadowRoot.querySelector(
-            '.step-down'
-        ) as HTMLElement;
-        const buttonDownRect = buttonDown.getBoundingClientRect();
-        const buttonDownPosition: [number, number] = [
-            buttonDownRect.x + buttonDownRect.width / 2,
-            buttonDownRect.y + buttonDownRect.height / 2,
-        ];
-        const outsidePosition: [number, number] = [
-            buttonDownRect.x + buttonDownRect.width + 5,
-            buttonDownRect.y + buttonDownRect.height + 5,
-        ];
+		el.addEventListener("input", () => inputSpy());
+		expect(el.formattedValue).to.equal("50");
+		expect(el.valueAsString).to.equal("50");
+		expect(el.value).to.equal(50);
+		const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+		const buttonUpRect = buttonUp.getBoundingClientRect();
+		const buttonUpPosition: [number, number] = [
+			buttonUpRect.x + buttonUpRect.width / 2,
+			buttonUpRect.y + buttonUpRect.height / 2,
+		];
+		const buttonDown = el.shadowRoot.querySelector(".step-down") as HTMLElement;
+		const buttonDownRect = buttonDown.getBoundingClientRect();
+		const buttonDownPosition: [number, number] = [
+			buttonDownRect.x + buttonDownRect.width / 2,
+			buttonDownRect.y + buttonDownRect.height / 2,
+		];
+		const outsidePosition: [number, number] = [
+			buttonDownRect.x + buttonDownRect.width + 5,
+			buttonDownRect.y + buttonDownRect.height + 5,
+		];
 
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: buttonUpPosition,
-                },
-                {
-                    type: 'down',
-                },
-            ],
-        });
-        await oneEvent(el, 'input');
-        let value = 50 + inputSpy.callCount;
+		await sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: buttonUpPosition,
+				},
+				{
+					type: "down",
+				},
+			],
+		});
+		await oneEvent(el, "input");
+		let value = 50 + inputSpy.callCount;
 
-        expect(el.formattedValue).to.equal(String(value));
-        expect(el.valueAsString).to.equal(String(value));
-        expect(el.value).to.equal(value);
-        inputSpy.resetHistory();
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: buttonDownPosition,
-                },
-            ],
-        });
-        value = value - inputSpy.callCount;
-        expect(el.formattedValue).to.equal(String(value));
-        expect(el.valueAsString).to.equal(String(value));
-        expect(el.value).to.equal(value);
-        inputSpy.resetHistory();
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: outsidePosition,
-                },
-            ],
-        });
-        value = value - inputSpy.callCount;
-        expect(el.formattedValue).to.equal(String(value));
-        expect(el.valueAsString).to.equal(String(value));
-        expect(el.value).to.equal(value);
-        inputSpy.resetHistory();
-        await oneEvent(el, 'input');
-        value = value - inputSpy.callCount;
-        expect(el.formattedValue).to.equal(String(value));
-        expect(el.valueAsString).to.equal(String(value));
-        expect(el.value).to.equal(value);
-        inputSpy.resetHistory();
-        await sendMouse({
-            steps: [
-                {
-                    type: 'up',
-                },
-            ],
-        });
-        let framesToWait = FRAMES_PER_CHANGE;
+		expect(el.formattedValue).to.equal(String(value));
+		expect(el.valueAsString).to.equal(String(value));
+		expect(el.value).to.equal(value);
+		inputSpy.resetHistory();
+		await sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: buttonDownPosition,
+				},
+			],
+		});
+		value = value - inputSpy.callCount;
+		expect(el.formattedValue).to.equal(String(value));
+		expect(el.valueAsString).to.equal(String(value));
+		expect(el.value).to.equal(value);
+		inputSpy.resetHistory();
+		await sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: outsidePosition,
+				},
+			],
+		});
+		value = value - inputSpy.callCount;
+		expect(el.formattedValue).to.equal(String(value));
+		expect(el.valueAsString).to.equal(String(value));
+		expect(el.value).to.equal(value);
+		inputSpy.resetHistory();
+		await oneEvent(el, "input");
+		value = value - inputSpy.callCount;
+		expect(el.formattedValue).to.equal(String(value));
+		expect(el.valueAsString).to.equal(String(value));
+		expect(el.value).to.equal(value);
+		inputSpy.resetHistory();
+		await sendMouse({
+			steps: [
+				{
+					type: "up",
+				},
+			],
+		});
+		let framesToWait = FRAMES_PER_CHANGE;
 
-        while (framesToWait) {
-            // input is only processed onces per FRAMES_PER_CHANGE number of frames
-            framesToWait -= 1;
-            await nextFrame();
-        }
-        await elementUpdated(el);
-        value = value - inputSpy.callCount;
-        expect(el.formattedValue).to.equal(String(value));
-        expect(el.valueAsString).to.equal(String(value));
-        expect(el.value).to.equal(value);
-    });
-    it('surfaces `valueAsNumber`', async () => {
-        const el = await getElFrom(Default({}));
+		while (framesToWait) {
+			// input is only processed onces per FRAMES_PER_CHANGE number of frames
+			framesToWait -= 1;
+			await nextFrame();
+		}
+		await elementUpdated(el);
+		value = value - inputSpy.callCount;
+		expect(el.formattedValue).to.equal(String(value));
+		expect(el.valueAsString).to.equal(String(value));
+		expect(el.value).to.equal(value);
+	});
+	it("surfaces `valueAsNumber`", async () => {
+		const el = await getElFrom(Default({}));
 
-        el.value = 1000;
-        await elementUpdated(el);
-        expect(el.formattedValue).to.equal('1,000');
-        expect(el.valueAsString).to.equal('1000');
-        expect(el.value).to.equal(1000);
-        el.valueAsString = '2222';
-        await elementUpdated(el);
-        expect(el.formattedValue).to.equal('2,222');
-        expect(el.valueAsString).to.equal('2222');
-        expect(el.value).to.equal(2222);
-    });
-    describe('manages `value` with `formatOptions`', () => {
-        it('manages decimals', async () => {
-            const el = await getElFrom(decimals({ value: 1.333333 }));
+		el.value = 1000;
+		await elementUpdated(el);
+		expect(el.formattedValue).to.equal("1,000");
+		expect(el.valueAsString).to.equal("1000");
+		expect(el.value).to.equal(1000);
+		el.valueAsString = "2222";
+		await elementUpdated(el);
+		expect(el.formattedValue).to.equal("2,222");
+		expect(el.valueAsString).to.equal("2222");
+		expect(el.value).to.equal(2222);
+	});
+	describe("manages `value` with `formatOptions`", () => {
+		it("manages decimals", async () => {
+			const el = await getElFrom(decimals({ value: 1.333333 }));
 
-            expect(el.value).to.equal(1.33);
-            expect(el.formattedValue).to.equal('+1.33');
-            expect(el.valueAsString).to.equal('1.33');
-        });
-        it('manages precents', async () => {
-            const el = await getElFrom(percents({ value: 0.45 }));
+			expect(el.value).to.equal(1.33);
+			expect(el.formattedValue).to.equal("+1.33");
+			expect(el.valueAsString).to.equal("1.33");
+		});
+		it("manages precents", async () => {
+			const el = await getElFrom(percents({ value: 0.45 }));
 
-            expect(el.formattedValue).to.equal('45%');
-            expect(el.valueAsString).to.equal('0.45');
-            expect(el.value).to.equal(0.45);
-            await clickBySelector(el, '.step-down');
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('44%');
-            expect(el.valueAsString).to.equal('0.44');
-            expect(el.value).to.equal(0.44);
-            await clickBySelector(el, '.step-up');
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('45%');
-            expect(el.valueAsString).to.equal('0.45');
-            expect(el.value).to.equal(0.45);
-            el.focus();
-            el.value = 0;
-            await sendKeys({ type: '54' });
-            await sendKeys({ press: 'Enter' });
-            expect(el.formattedValue).to.equal('54%');
-            expect(el.valueAsString).to.equal('0.54');
-            expect(el.value).to.equal(0.54);
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('54%');
-            expect(el.valueAsString).to.equal('0.54');
-            expect(el.value).to.equal(0.54);
-        });
-        it('manages currency', async () => {
-            const el = await getElFrom(currency({ value: 234.21 }));
+			expect(el.formattedValue).to.equal("45%");
+			expect(el.valueAsString).to.equal("0.45");
+			expect(el.value).to.equal(0.45);
+			await clickBySelector(el, ".step-down");
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("44%");
+			expect(el.valueAsString).to.equal("0.44");
+			expect(el.value).to.equal(0.44);
+			await clickBySelector(el, ".step-up");
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("45%");
+			expect(el.valueAsString).to.equal("0.45");
+			expect(el.value).to.equal(0.45);
+			el.focus();
+			el.value = 0;
+			await sendKeys({ type: "54" });
+			await sendKeys({ press: "Enter" });
+			expect(el.formattedValue).to.equal("54%");
+			expect(el.valueAsString).to.equal("0.54");
+			expect(el.value).to.equal(0.54);
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("54%");
+			expect(el.valueAsString).to.equal("0.54");
+			expect(el.value).to.equal(0.54);
+		});
+		it("manages currency", async () => {
+			const el = await getElFrom(currency({ value: 234.21 }));
 
-            expect(el.formattedValue).to.equal('EUR 234.21');
-            expect(el.valueAsString).to.equal('234.21');
-            expect(el.value).to.equal(234.21);
-        });
-        it('manages units', async () => {
-            const el = await getElFrom(units({ value: 17 }));
+			expect(el.formattedValue).to.equal("EUR 234.21");
+			expect(el.valueAsString).to.equal("234.21");
+			expect(el.value).to.equal(234.21);
+		});
+		it("manages units", async () => {
+			const el = await getElFrom(units({ value: 17 }));
 
-            expect(el.formattedValue).to.equal('17 inches');
-            expect(el.valueAsString).to.equal('17');
-            expect(el.value).to.equal(17);
-        });
-        it('does not select all on click based `focus`', async function () {
-            this.retries(0);
-            const modifier = isMac() ? 'Meta' : 'Control';
-            const el = await getElFrom(units({ value: 17 }));
+			expect(el.formattedValue).to.equal("17 inches");
+			expect(el.valueAsString).to.equal("17");
+			expect(el.value).to.equal(17);
+		});
+		it("does not select all on click based `focus`", async function () {
+			this.retries(0);
+			const modifier = isMac() ? "Meta" : "Control";
+			const el = await getElFrom(units({ value: 17 }));
 
-            expect(el.value).to.equal(17);
-            const rect = el.focusElement.getBoundingClientRect();
+			expect(el.value).to.equal(17);
+			const rect = el.focusElement.getBoundingClientRect();
 
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            rect.left + rect.width / 8,
-                            rect.top + rect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await elementUpdated(el);
-            expect(el.focused).to.be.true;
-            await sendKeys({
-                press: `${modifier}+KeyC`,
-            });
-            await nextFrame();
-            await nextFrame();
-            await elementUpdated(el);
-            await sendKeys({
-                press: 'ArrowRight',
-            });
-            await nextFrame();
-            await nextFrame();
-            await elementUpdated(el);
-            await sendKeys({
-                press: `${modifier}+KeyV`,
-            });
-            await nextFrame();
-            await nextFrame();
-            await elementUpdated(el);
-            expect(el.value, 'copy/paste changed the value').to.equal(17);
-        });
-        it('selects all on `Tab` based `focus`', async function () {
-            this.retries(0);
-            const modifier = isMac() ? 'Meta' : 'Control';
-            const el = await getElFrom(units({ value: 17 }));
-            const input = document.createElement('input');
+			await sendMouse({
+				steps: [
+					{
+						type: "click",
+						position: [rect.left + rect.width / 8, rect.top + rect.height / 2],
+					},
+				],
+			});
+			await nextFrame();
+			await nextFrame();
+			await nextFrame();
+			await nextFrame();
+			await elementUpdated(el);
+			expect(el.focused).to.be.true;
+			await sendKeys({
+				press: `${modifier}+KeyC`,
+			});
+			await nextFrame();
+			await nextFrame();
+			await elementUpdated(el);
+			await sendKeys({
+				press: "ArrowRight",
+			});
+			await nextFrame();
+			await nextFrame();
+			await elementUpdated(el);
+			await sendKeys({
+				press: `${modifier}+KeyV`,
+			});
+			await nextFrame();
+			await nextFrame();
+			await elementUpdated(el);
+			expect(el.value, "copy/paste changed the value").to.equal(17);
+		});
+		it("selects all on `Tab` based `focus`", async function () {
+			this.retries(0);
+			const modifier = isMac() ? "Meta" : "Control";
+			const el = await getElFrom(units({ value: 17 }));
+			const input = document.createElement("input");
 
-            el.insertAdjacentElement('beforebegin', input);
-            input.focus();
-            await sendKeys({
-                press: 'Tab',
-            });
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await elementUpdated(el);
-            expect(el.focused).to.be.true;
-            await sendKeys({
-                press: `${modifier}+KeyC`,
-            });
-            await nextFrame();
-            await nextFrame();
-            await elementUpdated(el);
-            await sendKeys({
-                press: 'ArrowRight',
-            });
-            await nextFrame();
-            await nextFrame();
-            await elementUpdated(el);
-            await sendKeys({
-                press: `${modifier}+KeyV`,
-            });
-            await nextFrame();
-            await nextFrame();
-            await elementUpdated(el);
-            expect(el.value, 'copy/paste did not change the value').to.equal(
-                1717
-            );
-        });
-        it('manages units not supported by the browser', async () => {
-            const el = await getElFrom(pixels({ value: 17 }));
+			el.insertAdjacentElement("beforebegin", input);
+			input.focus();
+			await sendKeys({
+				press: "Tab",
+			});
+			await nextFrame();
+			await nextFrame();
+			await nextFrame();
+			await nextFrame();
+			await elementUpdated(el);
+			expect(el.focused).to.be.true;
+			await sendKeys({
+				press: `${modifier}+KeyC`,
+			});
+			await nextFrame();
+			await nextFrame();
+			await elementUpdated(el);
+			await sendKeys({
+				press: "ArrowRight",
+			});
+			await nextFrame();
+			await nextFrame();
+			await elementUpdated(el);
+			await sendKeys({
+				press: `${modifier}+KeyV`,
+			});
+			await nextFrame();
+			await nextFrame();
+			await elementUpdated(el);
+			expect(el.value, "copy/paste did not change the value").to.equal(1717);
+		});
+		it("manages units not supported by the browser", async () => {
+			const el = await getElFrom(pixels({ value: 17 }));
 
-            expect(el.formattedValue).to.equal('17px');
-            expect(el.valueAsString).to.equal('17');
-            expect(el.value).to.equal(17);
-        });
-    });
-    describe('max', () => {
-        let el: NumberField;
-        let lastInputValue = 0;
-        let lastChangeValue = 0;
-        const inputSpy = spy();
-        const changeSpy = spy();
+			expect(el.formattedValue).to.equal("17px");
+			expect(el.valueAsString).to.equal("17");
+			expect(el.value).to.equal(17);
+		});
+	});
+	describe("max", () => {
+		let el: NumberField;
+		let lastInputValue = 0;
+		let lastChangeValue = 0;
+		const inputSpy = spy();
+		const changeSpy = spy();
 
-        beforeEach(async () => {
-            inputSpy.resetHistory();
-            changeSpy.resetHistory();
-            el = await getElFrom(
-                Default({
-                    max: 10,
-                    value: 10,
-                    onInput: (value: number) => {
-                        inputSpy(value);
-                        lastInputValue = value;
-                    },
-                    onChange: (value: number) => {
-                        changeSpy(value);
-                        lastChangeValue = value;
-                    },
-                })
-            );
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('constrains input', async () => {
-            el.focus();
-            await sendKeys({ type: '15' });
-            await sendKeys({ press: 'Enter' });
-            await elementUpdated(el);
-            expect(lastInputValue, 'last input value').to.equal(10);
-            expect(lastChangeValue, 'last change value').to.equal(
-                0,
-                'value does not change from initial value so no "change" event is dispatched'
-            );
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('constrains `value`', async () => {
-            el.value = 20;
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('constrains ArrowUp usage', async () => {
-            expect(el.value).to.equal(10);
-            el.focus();
-            await sendKeys({ press: 'ArrowUp' });
-            expect(el.focusElement.value).to.equal('10');
-            await sendKeys({ press: 'Shift+ArrowUp' });
-            expect(el.focusElement.value).to.equal('10');
-        });
-        it('constrains pointer usage', async () => {
-            expect(el.value).to.equal(10);
-            const buttonUp = el.shadowRoot.querySelector(
-                '.step-up'
-            ) as HTMLElement;
-            const buttonUpRect = buttonUp.getBoundingClientRect();
-            const buttonUpPosition: [number, number] = [
-                buttonUpRect.x + buttonUpRect.width / 2,
-                buttonUpRect.y + buttonUpRect.height / 2,
-            ];
+		beforeEach(async () => {
+			inputSpy.resetHistory();
+			changeSpy.resetHistory();
+			el = await getElFrom(
+				Default({
+					max: 10,
+					value: 10,
+					onInput: (value: number) => {
+						inputSpy(value);
+						lastInputValue = value;
+					},
+					onChange: (value: number) => {
+						changeSpy(value);
+						lastChangeValue = value;
+					},
+				}),
+			);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("constrains input", async () => {
+			el.focus();
+			await sendKeys({ type: "15" });
+			await sendKeys({ press: "Enter" });
+			await elementUpdated(el);
+			expect(lastInputValue, "last input value").to.equal(10);
+			expect(lastChangeValue, "last change value").to.equal(
+				0,
+				'value does not change from initial value so no "change" event is dispatched',
+			);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("constrains `value`", async () => {
+			el.value = 20;
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("constrains ArrowUp usage", async () => {
+			expect(el.value).to.equal(10);
+			el.focus();
+			await sendKeys({ press: "ArrowUp" });
+			expect(el.focusElement.value).to.equal("10");
+			await sendKeys({ press: "Shift+ArrowUp" });
+			expect(el.focusElement.value).to.equal("10");
+		});
+		it("constrains pointer usage", async () => {
+			expect(el.value).to.equal(10);
+			const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+			const buttonUpRect = buttonUp.getBoundingClientRect();
+			const buttonUpPosition: [number, number] = [
+				buttonUpRect.x + buttonUpRect.width / 2,
+				buttonUpRect.y + buttonUpRect.height / 2,
+			];
 
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: buttonUpPosition,
-                    },
-                ],
-            });
-            expect(el.value).to.equal(10);
-        });
-        it('validates on commit', async () => {
-            el.focus();
-            await sendKeys({ type: '15' });
-            await sendKeys({ press: 'Enter' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('disabled `stepUp` button', async () => {
-            await clickBySelector(el, '.step-up');
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('validates late', async () => {
-            el.max = 5;
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('5');
-            expect(el.valueAsString).to.equal('5');
-            expect(el.value).to.equal(5);
-        });
-        it('dispatches onchange on setting max value', async () => {
-            el.value = 5;
-            await elementUpdated(el);
-            expect(changeSpy.callCount).to.equal(0);
-            expect(el.value).to.equal(5);
-            el.focus();
-            await sendKeys({
-                press: 'Backspace',
-            });
-            await sendKeys({
-                press: '1',
-            });
-            await sendKeys({
-                press: '5',
-            });
-            await sendKeys({
-                press: 'Enter',
-            });
-            await elementUpdated(el);
-            expect(el.value).to.equal(10);
-            expect(inputSpy.callCount).to.equal(3);
-            expect(changeSpy.callCount).to.equal(1);
-            expect(lastChangeValue, 'last change value').to.equal(10);
-        });
-    });
-    describe('min', () => {
-        let el: NumberField;
-        let lastInputValue = 0;
-        let lastChangeValue = 0;
-        const inputSpy = spy();
-        const changeSpy = spy();
+			await sendMouse({
+				steps: [
+					{
+						type: "click",
+						position: buttonUpPosition,
+					},
+				],
+			});
+			expect(el.value).to.equal(10);
+		});
+		it("validates on commit", async () => {
+			el.focus();
+			await sendKeys({ type: "15" });
+			await sendKeys({ press: "Enter" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("disabled `stepUp` button", async () => {
+			await clickBySelector(el, ".step-up");
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("validates late", async () => {
+			el.max = 5;
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("5");
+			expect(el.valueAsString).to.equal("5");
+			expect(el.value).to.equal(5);
+		});
+		it("dispatches onchange on setting max value", async () => {
+			el.value = 5;
+			await elementUpdated(el);
+			expect(changeSpy.callCount).to.equal(0);
+			expect(el.value).to.equal(5);
+			el.focus();
+			await sendKeys({
+				press: "Backspace",
+			});
+			await sendKeys({
+				press: "1",
+			});
+			await sendKeys({
+				press: "5",
+			});
+			await sendKeys({
+				press: "Enter",
+			});
+			await elementUpdated(el);
+			expect(el.value).to.equal(10);
+			expect(inputSpy.callCount).to.equal(3);
+			expect(changeSpy.callCount).to.equal(1);
+			expect(lastChangeValue, "last change value").to.equal(10);
+		});
+	});
+	describe("min", () => {
+		let el: NumberField;
+		let lastInputValue = 0;
+		let lastChangeValue = 0;
+		const inputSpy = spy();
+		const changeSpy = spy();
 
-        beforeEach(async () => {
-            inputSpy.resetHistory();
-            changeSpy.resetHistory();
-            el = await getElFrom(
-                Default({
-                    min: 10,
-                    value: 10,
-                    onInput: (value: number) => {
-                        inputSpy(value);
-                        lastInputValue = value;
-                    },
-                    onChange: (value: number) => {
-                        changeSpy(value);
-                        lastChangeValue = value;
-                    },
-                })
-            );
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('constrains input', async () => {
-            el.focus();
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ type: '5' });
-            await sendKeys({ press: 'Enter' });
-            await elementUpdated(el);
-            expect(lastInputValue, 'last input value').to.equal(10);
-            expect(lastChangeValue, 'last change value').to.equal(
-                0,
-                'value does not change from initial value so no "change" event is dispatched'
-            );
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-            el.focus();
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ type: '-2000' });
-            await sendKeys({ press: 'Enter' });
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('dispatches onchange on setting min value', async () => {
-            el.value = 15;
-            await elementUpdated(el);
-            expect(changeSpy.callCount).to.equal(0);
-            expect(el.value).to.equal(15);
-            el.focus();
-            await sendKeys({
-                press: 'Backspace',
-            });
-            await sendKeys({
-                press: 'Backspace',
-            });
-            await sendKeys({
-                press: '5',
-            });
-            await sendKeys({
-                press: 'Enter',
-            });
-            await elementUpdated(el);
-            expect(el.value).to.equal(10);
-            expect(inputSpy.callCount).to.equal(3);
-            expect(changeSpy.callCount).to.equal(1);
-            expect(lastChangeValue, 'last change value').to.equal(10);
-        });
-        xit('manages `inputMode` in iPad', async () => {
-            // setUserAgent is not currently supported by Playwright
-            await setUserAgent(
-                'Mozilla/5.0 (iPad; CPU OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile15E148 Safari/604.1'
-            );
-            el.min = 0;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('numeric');
-            el.min = -10;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('numeric');
-            el.min = undefined;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('numeric');
-            el.formatOptions = {
-                minimumFractionDigits: 1,
-                maximumFractionDigits: 2,
-            };
-            el.min = 0;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('decimal');
-        });
-        xit('manages `inputMode` in iPhone', async () => {
-            // setUserAgent is not currently supported by Playwright
-            await setUserAgent(
-                'Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148'
-            );
-            el.min = 0;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('numeric');
-            el.min = -10;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('text');
-            el.min = undefined;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('text');
-            el.formatOptions = {
-                minimumFractionDigits: 1,
-                maximumFractionDigits: 2,
-            };
-            el.min = 0;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('decimal');
-        });
-        xit('manages `inputMode` in Android', async () => {
-            // setUserAgent is not currently supported by Playwright
-            await setUserAgent(
-                'Mozilla/5.0 (Linux; Android 10; SM-A205U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36'
-            );
-            el.min = 0;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('numeric');
-            el.min = -10;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('numeric');
-            el.min = undefined;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('numeric');
-            el.formatOptions = {
-                minimumFractionDigits: 1,
-                maximumFractionDigits: 2,
-            };
-            el.min = 0;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('decimal');
-            el.formatOptions = {
-                minimumFractionDigits: 1,
-                maximumFractionDigits: 2,
-            };
-            el.min = -10;
-            await elementUpdated(el);
-            expect(el.focusElement.inputMode).to.equal('numeric');
-        });
-        it('constrains `value`', async () => {
-            el.value = 0;
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('constrains ArrowDown usage', async () => {
-            el.min = 0;
-            el.value = 0;
-            expect(el.value).to.equal(0);
-            el.focus();
-            await sendKeys({ press: 'ArrowDown' });
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            await sendKeys({ press: 'Shift+ArrowDown' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-        });
-        it('constrains pointer usage', async () => {
-            el.min = 0;
-            el.value = 0;
-            await elementUpdated(el);
-            expect(el.value).to.equal(0);
-            const buttonDown = el.shadowRoot.querySelector(
-                '.step-down'
-            ) as HTMLElement;
-            const buttonDownRect = buttonDown.getBoundingClientRect();
-            const buttonDownPosition: [number, number] = [
-                buttonDownRect.x + buttonDownRect.width / 2,
-                buttonDownRect.y + buttonDownRect.height / 2,
-            ];
+		beforeEach(async () => {
+			inputSpy.resetHistory();
+			changeSpy.resetHistory();
+			el = await getElFrom(
+				Default({
+					min: 10,
+					value: 10,
+					onInput: (value: number) => {
+						inputSpy(value);
+						lastInputValue = value;
+					},
+					onChange: (value: number) => {
+						changeSpy(value);
+						lastChangeValue = value;
+					},
+				}),
+			);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("constrains input", async () => {
+			el.focus();
+			await sendKeys({ press: "Backspace" });
+			await sendKeys({ press: "Backspace" });
+			await sendKeys({ type: "5" });
+			await sendKeys({ press: "Enter" });
+			await elementUpdated(el);
+			expect(lastInputValue, "last input value").to.equal(10);
+			expect(lastChangeValue, "last change value").to.equal(
+				0,
+				'value does not change from initial value so no "change" event is dispatched',
+			);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+			el.focus();
+			await sendKeys({ press: "Backspace" });
+			await sendKeys({ press: "Backspace" });
+			await sendKeys({ type: "-2000" });
+			await sendKeys({ press: "Enter" });
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("dispatches onchange on setting min value", async () => {
+			el.value = 15;
+			await elementUpdated(el);
+			expect(changeSpy.callCount).to.equal(0);
+			expect(el.value).to.equal(15);
+			el.focus();
+			await sendKeys({
+				press: "Backspace",
+			});
+			await sendKeys({
+				press: "Backspace",
+			});
+			await sendKeys({
+				press: "5",
+			});
+			await sendKeys({
+				press: "Enter",
+			});
+			await elementUpdated(el);
+			expect(el.value).to.equal(10);
+			expect(inputSpy.callCount).to.equal(3);
+			expect(changeSpy.callCount).to.equal(1);
+			expect(lastChangeValue, "last change value").to.equal(10);
+		});
+		xit("manages `inputMode` in iPad", async () => {
+			// setUserAgent is not currently supported by Playwright
+			await setUserAgent(
+				"Mozilla/5.0 (iPad; CPU OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile15E148 Safari/604.1",
+			);
+			el.min = 0;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("numeric");
+			el.min = -10;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("numeric");
+			el.min = undefined;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("numeric");
+			el.formatOptions = {
+				minimumFractionDigits: 1,
+				maximumFractionDigits: 2,
+			};
+			el.min = 0;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("decimal");
+		});
+		xit("manages `inputMode` in iPhone", async () => {
+			// setUserAgent is not currently supported by Playwright
+			await setUserAgent(
+				"Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148",
+			);
+			el.min = 0;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("numeric");
+			el.min = -10;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("text");
+			el.min = undefined;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("text");
+			el.formatOptions = {
+				minimumFractionDigits: 1,
+				maximumFractionDigits: 2,
+			};
+			el.min = 0;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("decimal");
+		});
+		xit("manages `inputMode` in Android", async () => {
+			// setUserAgent is not currently supported by Playwright
+			await setUserAgent(
+				"Mozilla/5.0 (Linux; Android 10; SM-A205U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36",
+			);
+			el.min = 0;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("numeric");
+			el.min = -10;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("numeric");
+			el.min = undefined;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("numeric");
+			el.formatOptions = {
+				minimumFractionDigits: 1,
+				maximumFractionDigits: 2,
+			};
+			el.min = 0;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("decimal");
+			el.formatOptions = {
+				minimumFractionDigits: 1,
+				maximumFractionDigits: 2,
+			};
+			el.min = -10;
+			await elementUpdated(el);
+			expect(el.focusElement.inputMode).to.equal("numeric");
+		});
+		it("constrains `value`", async () => {
+			el.value = 0;
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("constrains ArrowDown usage", async () => {
+			el.min = 0;
+			el.value = 0;
+			expect(el.value).to.equal(0);
+			el.focus();
+			await sendKeys({ press: "ArrowDown" });
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			await sendKeys({ press: "Shift+ArrowDown" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+		});
+		it("constrains pointer usage", async () => {
+			el.min = 0;
+			el.value = 0;
+			await elementUpdated(el);
+			expect(el.value).to.equal(0);
+			const buttonDown = el.shadowRoot.querySelector(
+				".step-down",
+			) as HTMLElement;
+			const buttonDownRect = buttonDown.getBoundingClientRect();
+			const buttonDownPosition: [number, number] = [
+				buttonDownRect.x + buttonDownRect.width / 2,
+				buttonDownRect.y + buttonDownRect.height / 2,
+			];
 
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: buttonDownPosition,
-                    },
-                ],
-            });
-            await elementUpdated(el);
-            expect(el.value).to.equal(0);
-        });
-        it('validates on commit', async () => {
-            el.focus();
-            await sendKeys({ press: '0' });
-            await sendKeys({ press: 'Enter' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('100');
-            expect(el.valueAsString).to.equal('100');
-            expect(el.value).to.equal(100);
-        });
-        it('disabled `stepDown` button', async () => {
-            await clickBySelector(el, '.step-down');
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('validates late', async () => {
-            el.min = 15;
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('15');
-            expect(el.valueAsString).to.equal('15');
-            expect(el.value).to.equal(15);
-        });
-    });
-    describe('step', () => {
-        let el: NumberField;
+			await sendMouse({
+				steps: [
+					{
+						type: "click",
+						position: buttonDownPosition,
+					},
+				],
+			});
+			await elementUpdated(el);
+			expect(el.value).to.equal(0);
+		});
+		it("validates on commit", async () => {
+			el.focus();
+			await sendKeys({ press: "0" });
+			await sendKeys({ press: "Enter" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("100");
+			expect(el.valueAsString).to.equal("100");
+			expect(el.value).to.equal(100);
+		});
+		it("disabled `stepDown` button", async () => {
+			await clickBySelector(el, ".step-down");
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("validates late", async () => {
+			el.min = 15;
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("15");
+			expect(el.valueAsString).to.equal("15");
+			expect(el.value).to.equal(15);
+		});
+	});
+	describe("step", () => {
+		let el: NumberField;
 
-        beforeEach(async () => {
-            el = await getElFrom(Default({ value: 10, step: 5 }));
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('via arrow up', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('15');
-            expect(el.valueAsString).to.equal('15');
-            expect(el.value).to.equal(15);
-        });
-        it('via arrow down', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowDown' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('5');
-            expect(el.valueAsString).to.equal('5');
-            expect(el.value).to.equal(5);
-        });
-        it('step up via pointer', async () => {
-            await clickBySelector(el, '.step-up');
-            expect(el.formattedValue).to.equal('15');
-            expect(el.valueAsString).to.equal('15');
-            expect(el.value).to.equal(15);
-        });
-        it('step down via pointer', async () => {
-            await clickBySelector(el, '.step-down');
-            expect(el.formattedValue).to.equal('5');
-            expect(el.valueAsString).to.equal('5');
-            expect(el.value).to.equal(5);
-        });
-    });
-    describe('step + constraints', () => {
-        let el: NumberField;
+		beforeEach(async () => {
+			el = await getElFrom(Default({ value: 10, step: 5 }));
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("via arrow up", async () => {
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("15");
+			expect(el.valueAsString).to.equal("15");
+			expect(el.value).to.equal(15);
+		});
+		it("via arrow down", async () => {
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowDown" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("5");
+			expect(el.valueAsString).to.equal("5");
+			expect(el.value).to.equal(5);
+		});
+		it("step up via pointer", async () => {
+			await clickBySelector(el, ".step-up");
+			expect(el.formattedValue).to.equal("15");
+			expect(el.valueAsString).to.equal("15");
+			expect(el.value).to.equal(15);
+		});
+		it("step down via pointer", async () => {
+			await clickBySelector(el, ".step-down");
+			expect(el.formattedValue).to.equal("5");
+			expect(el.valueAsString).to.equal("5");
+			expect(el.value).to.equal(5);
+		});
+	});
+	describe("step + constraints", () => {
+		let el: NumberField;
 
-        beforeEach(async () => {
-            el = await getElFrom(Default({ step: 5 }));
-            expect(el.formattedValue).to.equal('');
-            expect(el.valueAsString).to.equal('NaN');
-            expect(el.value).to.be.NaN;
-        });
-        it('steps', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0');
-            expect(el.valueAsString).to.equal('0');
-            expect(el.value).to.equal(0);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('5');
-            expect(el.valueAsString).to.equal('5');
-            expect(el.value).to.equal(5);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-        });
-        it('steps from min', async () => {
-            el.min = 5;
-            await elementUpdated(el);
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('5');
-            expect(el.valueAsString).to.equal('5');
-            expect(el.value).to.equal(5);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('10');
-            expect(el.valueAsString).to.equal('10');
-            expect(el.value).to.equal(10);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('15');
-            expect(el.valueAsString).to.equal('15');
-            expect(el.value).to.equal(15);
-        });
-        it('steps from mismatched min', async () => {
-            el.min = 2;
-            await elementUpdated(el);
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('2');
-            expect(el.valueAsString).to.equal('2');
-            expect(el.value).to.equal(2);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('7');
-            expect(el.valueAsString).to.equal('7');
-            expect(el.value).to.equal(7);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('12');
-            expect(el.valueAsString).to.equal('12');
-            expect(el.value).to.equal(12);
-        });
-        it('steps to mismatched max', async () => {
-            el.min = 2;
-            el.max = 10;
-            await elementUpdated(el);
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('2');
-            expect(el.valueAsString).to.equal('2');
-            expect(el.value).to.equal(2);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('7');
-            expect(el.valueAsString).to.equal('7');
-            expect(el.value).to.equal(7);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('7');
-            expect(el.valueAsString).to.equal('7');
-            expect(el.value).to.equal(7);
-        });
-        it('validates max + step', async () => {
-            el.value = 2;
-            el.min = 2;
-            el.max = 10;
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('2');
-            expect(el.valueAsString).to.equal('2');
-            expect(el.value).to.equal(2);
-            el.value = 11;
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('7');
-            expect(el.valueAsString).to.equal('7');
-            expect(el.value).to.equal(7);
-            el.value = 27;
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('7');
-            expect(el.valueAsString).to.equal('7');
-            expect(el.value).to.equal(7);
-        });
-    });
-    describe('indeterminate', () => {
-        let el: NumberField;
+		beforeEach(async () => {
+			el = await getElFrom(Default({ step: 5 }));
+			expect(el.formattedValue).to.equal("");
+			expect(el.valueAsString).to.equal("NaN");
+			expect(el.value).to.be.NaN;
+		});
+		it("steps", async () => {
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("0");
+			expect(el.valueAsString).to.equal("0");
+			expect(el.value).to.equal(0);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("5");
+			expect(el.valueAsString).to.equal("5");
+			expect(el.value).to.equal(5);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+		});
+		it("steps from min", async () => {
+			el.min = 5;
+			await elementUpdated(el);
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("5");
+			expect(el.valueAsString).to.equal("5");
+			expect(el.value).to.equal(5);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("10");
+			expect(el.valueAsString).to.equal("10");
+			expect(el.value).to.equal(10);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("15");
+			expect(el.valueAsString).to.equal("15");
+			expect(el.value).to.equal(15);
+		});
+		it("steps from mismatched min", async () => {
+			el.min = 2;
+			await elementUpdated(el);
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("2");
+			expect(el.valueAsString).to.equal("2");
+			expect(el.value).to.equal(2);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("7");
+			expect(el.valueAsString).to.equal("7");
+			expect(el.value).to.equal(7);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("12");
+			expect(el.valueAsString).to.equal("12");
+			expect(el.value).to.equal(12);
+		});
+		it("steps to mismatched max", async () => {
+			el.min = 2;
+			el.max = 10;
+			await elementUpdated(el);
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("2");
+			expect(el.valueAsString).to.equal("2");
+			expect(el.value).to.equal(2);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("7");
+			expect(el.valueAsString).to.equal("7");
+			expect(el.value).to.equal(7);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("7");
+			expect(el.valueAsString).to.equal("7");
+			expect(el.value).to.equal(7);
+		});
+		it("validates max + step", async () => {
+			el.value = 2;
+			el.min = 2;
+			el.max = 10;
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("2");
+			expect(el.valueAsString).to.equal("2");
+			expect(el.value).to.equal(2);
+			el.value = 11;
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("7");
+			expect(el.valueAsString).to.equal("7");
+			expect(el.value).to.equal(7);
+			el.value = 27;
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("7");
+			expect(el.valueAsString).to.equal("7");
+			expect(el.value).to.equal(7);
+		});
+	});
+	describe("indeterminate", () => {
+		let el: NumberField;
 
-        beforeEach(async () => {
-            el = await getElFrom(indeterminate(indeterminate.args));
-            expect(el.formattedValue).to.equal('100');
-            expect(el.valueAsString).to.equal('100');
-            expect(el.value).to.equal(100);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal(indeterminatePlaceholder);
-        });
-        it('remove "-" on focus', async () => {
-            el.focus();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('100');
-            expect(el.valueAsString).to.equal('100');
-            expect(el.value).to.equal(100);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('');
-            el.blur();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('100');
-            expect(el.valueAsString).to.equal('100');
-            expect(el.value).to.equal(100);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal(indeterminatePlaceholder);
-        });
-        it('return to "-" after suplied value is removed', async () => {
-            el.focus();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('100');
-            expect(el.valueAsString).to.equal('100');
-            expect(el.value).to.equal(100);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('');
-            await sendKeys({ type: '50' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('50');
-            expect(el.valueAsString).to.equal('50');
-            expect(el.value).to.equal(50);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('50');
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ press: 'Backspace' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('100');
-            expect(el.valueAsString).to.equal('100');
-            expect(el.value).to.equal(100);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('');
-            el.blur();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('100');
-            expect(el.valueAsString).to.equal('100');
-            expect(el.value).to.equal(100);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal(indeterminatePlaceholder);
-        });
-        it('starts from `value` on "ArrowUp" keypresses', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowUp' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('101');
-            expect(el.valueAsString).to.equal('101');
-            expect(el.value).to.equal(101);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('101');
-            el.blur();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('101');
-            expect(el.valueAsString).to.equal('101');
-            expect(el.value).to.equal(101);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('101');
-        });
-        it('starts from `value` on click `.step-up`', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await clickBySelector(el, '.step-up');
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('101');
-            expect(el.valueAsString).to.equal('101');
-            expect(el.value).to.equal(101);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('101');
-            el.blur();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('101');
-            expect(el.valueAsString).to.equal('101');
-            expect(el.value).to.equal(101);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('101');
-        });
-        it('starts from `value` on "ArrowDown" keypresses', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({ press: 'ArrowDown' });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('99');
-            expect(el.valueAsString).to.equal('99');
-            expect(el.value).to.equal(99);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('99');
-            el.blur();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('99');
-            expect(el.valueAsString).to.equal('99');
-            expect(el.value).to.equal(99);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('99');
-        });
-        it('starts from `value` on click `.step-down`', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await clickBySelector(el, '.step-down');
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('99');
-            expect(el.valueAsString).to.equal('99');
-            expect(el.value).to.equal(99);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('99');
-            el.blur();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('99');
-            expect(el.valueAsString).to.equal('99');
-            expect(el.value).to.equal(99);
-            expect(
-                (el as unknown as { displayValue: string }).displayValue
-            ).to.equal('99');
-        });
-    });
-    it('removes the stepper UI with [hide-stepper]', async () => {
-        const el = await getElFrom(Default({ hideStepper: true }));
-        const stepUp = el.shadowRoot.querySelector('.step-up');
-        const stepDown = el.shadowRoot.querySelector('.step-down');
+		beforeEach(async () => {
+			el = await getElFrom(indeterminate(indeterminate.args));
+			expect(el.formattedValue).to.equal("100");
+			expect(el.valueAsString).to.equal("100");
+			expect(el.value).to.equal(100);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				indeterminatePlaceholder,
+			);
+		});
+		it('remove "-" on focus', async () => {
+			el.focus();
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("100");
+			expect(el.valueAsString).to.equal("100");
+			expect(el.value).to.equal(100);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"",
+			);
+			el.blur();
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("100");
+			expect(el.valueAsString).to.equal("100");
+			expect(el.value).to.equal(100);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				indeterminatePlaceholder,
+			);
+		});
+		it('return to "-" after suplied value is removed', async () => {
+			el.focus();
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("100");
+			expect(el.valueAsString).to.equal("100");
+			expect(el.value).to.equal(100);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"",
+			);
+			await sendKeys({ type: "50" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("50");
+			expect(el.valueAsString).to.equal("50");
+			expect(el.value).to.equal(50);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"50",
+			);
+			await sendKeys({ press: "Backspace" });
+			await sendKeys({ press: "Backspace" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("100");
+			expect(el.valueAsString).to.equal("100");
+			expect(el.value).to.equal(100);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"",
+			);
+			el.blur();
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("100");
+			expect(el.valueAsString).to.equal("100");
+			expect(el.value).to.equal(100);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				indeterminatePlaceholder,
+			);
+		});
+		it('starts from `value` on "ArrowUp" keypresses', async () => {
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowUp" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("101");
+			expect(el.valueAsString).to.equal("101");
+			expect(el.value).to.equal(101);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"101",
+			);
+			el.blur();
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("101");
+			expect(el.valueAsString).to.equal("101");
+			expect(el.value).to.equal(101);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"101",
+			);
+		});
+		it("starts from `value` on click `.step-up`", async () => {
+			el.focus();
+			await elementUpdated(el);
+			await clickBySelector(el, ".step-up");
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("101");
+			expect(el.valueAsString).to.equal("101");
+			expect(el.value).to.equal(101);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"101",
+			);
+			el.blur();
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("101");
+			expect(el.valueAsString).to.equal("101");
+			expect(el.value).to.equal(101);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"101",
+			);
+		});
+		it('starts from `value` on "ArrowDown" keypresses', async () => {
+			el.focus();
+			await elementUpdated(el);
+			await sendKeys({ press: "ArrowDown" });
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("99");
+			expect(el.valueAsString).to.equal("99");
+			expect(el.value).to.equal(99);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"99",
+			);
+			el.blur();
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("99");
+			expect(el.valueAsString).to.equal("99");
+			expect(el.value).to.equal(99);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"99",
+			);
+		});
+		it("starts from `value` on click `.step-down`", async () => {
+			el.focus();
+			await elementUpdated(el);
+			await clickBySelector(el, ".step-down");
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("99");
+			expect(el.valueAsString).to.equal("99");
+			expect(el.value).to.equal(99);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"99",
+			);
+			el.blur();
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("99");
+			expect(el.valueAsString).to.equal("99");
+			expect(el.value).to.equal(99);
+			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+				"99",
+			);
+		});
+	});
+	it("removes the stepper UI with [hide-stepper]", async () => {
+		const el = await getElFrom(Default({ hideStepper: true }));
+		const stepUp = el.shadowRoot.querySelector(".step-up");
+		const stepDown = el.shadowRoot.querySelector(".step-down");
 
-        expect(stepUp).to.be.null;
-        expect(stepDown).to.be.null;
-    });
-    describe('Disabled', () => {
-        let el: NumberField;
+		expect(stepUp).to.be.null;
+		expect(stepDown).to.be.null;
+	});
+	describe("Disabled", () => {
+		let el: NumberField;
 
-        beforeEach(async () => {
-            el = await getElFrom(Default({ disabled: true, value: 1337 }));
-            expect(el.formattedValue).to.equal('1,337');
-            expect(el.valueAsString).to.equal('1337');
-            expect(el.value).to.equal(1337);
-            el.focus();
-            await elementUpdated(el);
-        });
-        afterEach(async () => {
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('1,337');
-            expect(el.valueAsString).to.equal('1337');
-            expect(el.value).to.equal(1337);
-        });
-        it('presents as `disabled`', async () => {
-            await sendKeys({ type: '12345' });
-            await elementUpdated(el);
-            await sendKeys({ press: 'Enter' });
-        });
-        it('prevents increment via keyboard', async () => {
-            await sendKeys({ press: 'ArrowUp' });
-        });
-        it('prevents decrement via keyboard', async () => {
-            await sendKeys({ press: 'ArrowDown' });
-        });
-        it('prevents increment via scroll', async () => {
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: 1 }));
-        });
-        it('prevents decrement via scroll', async () => {
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: -1 }));
-        });
-        it('prevents increment via stepper button', async () => {
-            await clickBySelector(el, '.step-up');
-        });
-        it('prevents decrement via stepper button', async () => {
-            await clickBySelector(el, '.step-down');
-        });
-    });
-    describe('Readonly', () => {
-        let el: NumberField;
+		beforeEach(async () => {
+			el = await getElFrom(Default({ disabled: true, value: 1337 }));
+			expect(el.formattedValue).to.equal("1,337");
+			expect(el.valueAsString).to.equal("1337");
+			expect(el.value).to.equal(1337);
+			el.focus();
+			await elementUpdated(el);
+		});
+		afterEach(async () => {
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("1,337");
+			expect(el.valueAsString).to.equal("1337");
+			expect(el.value).to.equal(1337);
+		});
+		it("presents as `disabled`", async () => {
+			await sendKeys({ type: "12345" });
+			await elementUpdated(el);
+			await sendKeys({ press: "Enter" });
+		});
+		it("prevents increment via keyboard", async () => {
+			await sendKeys({ press: "ArrowUp" });
+		});
+		it("prevents decrement via keyboard", async () => {
+			await sendKeys({ press: "ArrowDown" });
+		});
+		it("prevents increment via scroll", async () => {
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
+		});
+		it("prevents decrement via scroll", async () => {
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
+		});
+		it("prevents increment via stepper button", async () => {
+			await clickBySelector(el, ".step-up");
+		});
+		it("prevents decrement via stepper button", async () => {
+			await clickBySelector(el, ".step-down");
+		});
+	});
+	describe("Readonly", () => {
+		let el: NumberField;
 
-        beforeEach(async () => {
-            el = await getElFrom(Default({ readonly: true, value: 1337 }));
-            expect(el.formattedValue).to.equal('1,337');
-            expect(el.valueAsString).to.equal('1337');
-            expect(el.value).to.equal(1337);
-            el.focus();
-            await elementUpdated(el);
-        });
-        afterEach(async () => {
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('1,337');
-            expect(el.valueAsString).to.equal('1337');
-            expect(el.value).to.equal(1337);
-        });
-        it('presents as `readonly`', async () => {
-            await sendKeys({ type: '12345' });
-            await elementUpdated(el);
-            await sendKeys({ press: 'Enter' });
-        });
-        it('prevents increment via keyboard', async () => {
-            await sendKeys({ press: 'ArrowUp' });
-        });
-        it('prevents decrement via keyboard', async () => {
-            await sendKeys({ press: 'ArrowDown' });
-        });
-        it('prevents increment via scroll', async () => {
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: 1 }));
-        });
-        it('prevents decrement via scroll', async () => {
-            el.dispatchEvent(new WheelEvent('wheel', { deltaY: -1 }));
-        });
-        it('prevents increment via stepper button', async () => {
-            await clickBySelector(el, '.step-up');
-        });
-        it('prevents decrement via stepper button', async () => {
-            await clickBySelector(el, '.step-down');
-        });
-    });
-    describe('accessibility model', () => {
-        it('increment and decrement buttons cannot receive keyboard focus', async () => {
-            await fixture(html`
-                

-                    ${Default({
-                        onChange: () => {
-                            return;
-                        },
-                    })}
-                

-            `);
+		beforeEach(async () => {
+			el = await getElFrom(Default({ readonly: true, value: 1337 }));
+			expect(el.formattedValue).to.equal("1,337");
+			expect(el.valueAsString).to.equal("1337");
+			expect(el.value).to.equal(1337);
+			el.focus();
+			await elementUpdated(el);
+		});
+		afterEach(async () => {
+			await elementUpdated(el);
+			expect(el.formattedValue).to.equal("1,337");
+			expect(el.valueAsString).to.equal("1337");
+			expect(el.value).to.equal(1337);
+		});
+		it("presents as `readonly`", async () => {
+			await sendKeys({ type: "12345" });
+			await elementUpdated(el);
+			await sendKeys({ press: "Enter" });
+		});
+		it("prevents increment via keyboard", async () => {
+			await sendKeys({ press: "ArrowUp" });
+		});
+		it("prevents decrement via keyboard", async () => {
+			await sendKeys({ press: "ArrowDown" });
+		});
+		it("prevents increment via scroll", async () => {
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
+		});
+		it("prevents decrement via scroll", async () => {
+			el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
+		});
+		it("prevents increment via stepper button", async () => {
+			await clickBySelector(el, ".step-up");
+		});
+		it("prevents decrement via stepper button", async () => {
+			await clickBySelector(el, ".step-down");
+		});
+	});
+	describe("accessibility model", () => {
+		it("increment and decrement buttons cannot receive keyboard focus", async () => {
+			await fixture(html`
+				

+					${Default({
+						onChange: () => {
+							return;
+						},
+					})}
+				

+			`);
 
-            type NamedNode = { name: string };
-            const snapshot = (await a11ySnapshot(
-                {}
-            )) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
+			type NamedNode = { name: string };
+			const snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+				children: NamedNode[];
+			};
 
-            expect(
-                findAccessibilityNode(
-                    snapshot,
-                    (node) => node.name === 'Increase Enter a number'
-                ),
-                '`name` is the label text'
-            ).to.be.null;
+			expect(
+				findAccessibilityNode(
+					snapshot,
+					(node) => node.name === "Increase Enter a number",
+				),
+				"`name` is the label text",
+			).to.be.null;
 
-            expect(
-                findAccessibilityNode(
-                    snapshot,
-                    (node) => node.name === 'Decrease Enter a number'
-                ),
-                '`name` is the label text'
-            ).to.be.null;
-        });
-    });
+			expect(
+				findAccessibilityNode(
+					snapshot,
+					(node) => node.name === "Decrease Enter a number",
+				),
+				"`name` is the label text",
+			).to.be.null;
+		});
+	});
 });
diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts
index 71eaf2db5b..3dfd942894 100644
--- a/packages/overlay/src/OverlayTrigger.ts
+++ b/packages/overlay/src/OverlayTrigger.ts
@@ -11,26 +11,26 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+	CSSResultArray,
+	html,
+	PropertyValues,
+	SpectrumElement,
+	TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
-import type { Placement } from '@floating-ui/dom';
+	property,
+	query,
+	state,
+} from "@spectrum-web-components/base/src/decorators.js";
+import type { Placement } from "@floating-ui/dom";
 
-import type { BeforetoggleOpenEvent } from './events.js';
-import type { Overlay } from './Overlay.js';
-import type { OverlayTriggerInteractions } from './overlay-types';
+import type { BeforetoggleOpenEvent } from "./events.js";
+import type { Overlay } from "./Overlay.js";
+import type { OverlayTriggerInteractions } from "./overlay-types.js";
 
-import overlayTriggerStyles from './overlay-trigger.css.js';
+import overlayTriggerStyles from "./overlay-trigger.css.js";
 
-export type OverlayContentTypes = 'click' | 'hover' | 'longpress';
+export type OverlayContentTypes = "click" | "hover" | "longpress";
 
 /**
  * @element overlay-trigger
@@ -44,269 +44,255 @@ export type OverlayContentTypes = 'click' | 'hover' | 'longpress';
  * @fires sp-closed - Announces that the overlay has been closed
  */
 export class OverlayTrigger extends SpectrumElement {
-    public static override get styles(): CSSResultArray {
-        return [overlayTriggerStyles];
-    }
-
-    @property()
-    content = 'click hover longpress';
-
-    /**
-     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
-     *
-     * @attribute
-     *
-     */
-    @property({ reflect: true })
-    public placement?: Placement;
-
-    @property()
-    public type?: OverlayTriggerInteractions;
-
-    @property({ type: Number })
-    public offset = 6;
-
-    @property({ reflect: true })
-    public open?: OverlayContentTypes;
-
-    @property({ type: Boolean, reflect: true })
-    public disabled = false;
-
-    @property({ attribute: 'receives-focus' })
-    public receivesFocus: 'true' | 'false' | 'auto' = 'auto';
-
-    @state()
-    private clickContent: HTMLElement[] = [];
-
-    private clickPlacement?: Placement;
-
-    @state()
-    private longpressContent: HTMLElement[] = [];
-
-    private longpressPlacement?: Placement;
-
-    @state()
-    private hoverContent: HTMLElement[] = [];
-
-    private hoverPlacement?: Placement;
-
-    @state()
-    private targetContent: HTMLElement[] = [];
-
-    @query('#click-overlay', true)
-    clickOverlayElement!: Overlay;
-
-    @query('#longpress-overlay', true)
-    longpressOverlayElement!: Overlay;
-
-    @query('#hover-overlay', true)
-    hoverOverlayElement!: Overlay;
-
-    private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {
-        return slot.assignedElements({ flatten: true }) as HTMLElement[];
-    }
-
-    private handleTriggerContent(
-        event: Event & { target: HTMLSlotElement }
-    ): void {
-        this.targetContent = this.getAssignedElementsFromSlot(event.target);
-    }
-
-    private handleSlotContent(
-        event: Event & { target: HTMLSlotElement }
-    ): void {
-        switch (event.target.name) {
-            case 'click-content':
-                this.clickContent = this.getAssignedElementsFromSlot(
-                    event.target
-                );
-                break;
-            case 'longpress-content':
-                this.longpressContent = this.getAssignedElementsFromSlot(
-                    event.target
-                );
-                break;
-            case 'hover-content':
-                this.hoverContent = this.getAssignedElementsFromSlot(
-                    event.target
-                );
-                break;
-        }
-    }
-
-    private handleBeforetoggle(event: BeforetoggleOpenEvent): void {
-        const { target } = event;
-        let type: OverlayContentTypes;
-
-        if (target === this.clickOverlayElement) {
-            type = 'click';
-        } else if (target === this.longpressOverlayElement) {
-            type = 'longpress';
-        } else if (target === this.hoverOverlayElement) {
-            type = 'hover';
-            /* c8 ignore next 3 */
-        } else {
-            return;
-        }
-
-        if (event.newState === 'open') {
-            this.open = type;
-        } else if (this.open === type) {
-            this.open = undefined;
-        }
-    }
-
-    protected override update(changes: PropertyValues): void {
-        if (changes.has('clickContent')) {
-            this.clickPlacement =
-                ((this.clickContent[0]?.getAttribute('placement') ||
-                    this.clickContent[0]?.getAttribute(
-                        'direction'
-                    )) as Placement) || undefined;
-        }
-
-        if (changes.has('hoverContent')) {
-            this.hoverPlacement =
-                ((this.hoverContent[0]?.getAttribute('placement') ||
-                    this.hoverContent[0]?.getAttribute(
-                        'direction'
-                    )) as Placement) || undefined;
-        }
-
-        if (changes.has('longpressContent')) {
-            this.longpressPlacement =
-                ((this.longpressContent[0]?.getAttribute('placement') ||
-                    this.longpressContent[0]?.getAttribute(
-                        'direction'
-                    )) as Placement) || undefined;
-        }
-
-        super.update(changes);
-    }
-
-    protected renderSlot(name: string): TemplateResult {
-        return html`
-            
-        `;
-    }
-
-    protected renderClickOverlay(): TemplateResult {
-        import('@spectrum-web-components/overlay/sp-overlay.js');
-        const slot = this.renderSlot('click-content');
-
-        if (!this.clickContent.length) {
-            return slot;
-        }
-
-        return html`
-            
-                ${slot}
-            
-        `;
-    }
-
-    protected renderHoverOverlay(): TemplateResult {
-        import('@spectrum-web-components/overlay/sp-overlay.js');
-        const slot = this.renderSlot('hover-content');
-
-        if (!this.hoverContent.length) {
-            return slot;
-        }
-
-        return html`
-            
-                ${slot}
-            
-        `;
-    }
-
-    protected renderLongpressOverlay(): TemplateResult {
-        import('@spectrum-web-components/overlay/sp-overlay.js');
-        const slot = this.renderSlot('longpress-content');
-
-        if (!this.longpressContent.length) {
-            return slot;
-        }
-
-        return html`
-            
-                ${slot}
-            
-            
-        `;
-    }
-
-    protected override render(): TemplateResult {
-        const content = this.content.split(' ');
-
-        // Keyboard event availability documented in README.md
-        /* eslint-disable lit-a11y/click-events-have-key-events */
-        return html`
-            
-            ${[
-                content.includes('click') ? this.renderClickOverlay() : html``,
-                content.includes('hover') ? this.renderHoverOverlay() : html``,
-                content.includes('longpress')
-                    ? this.renderLongpressOverlay()
-                    : html``,
-            ]}
-        `;
-        /* eslint-enable lit-a11y/click-events-have-key-events */
-    }
-
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (this.disabled && changes.has('disabled')) {
-            this.open = undefined;
-
-            return;
-        }
-    }
-
-    protected override async getUpdateComplete(): Promise {
-        const complete = (await super.getUpdateComplete()) as boolean;
-
-        return complete;
-    }
+	public static override get styles(): CSSResultArray {
+		return [overlayTriggerStyles];
+	}
+
+	@property()
+	content = "click hover longpress";
+
+	/**
+	 * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+	 *
+	 * @attribute
+	 *
+	 */
+	@property({ reflect: true })
+	public placement?: Placement;
+
+	@property()
+	public type?: OverlayTriggerInteractions;
+
+	@property({ type: Number })
+	public offset = 6;
+
+	@property({ reflect: true })
+	public open?: OverlayContentTypes;
+
+	@property({ type: Boolean, reflect: true })
+	public disabled = false;
+
+	@property({ attribute: "receives-focus" })
+	public receivesFocus: "true" | "false" | "auto" = "auto";
+
+	@state()
+	private clickContent: HTMLElement[] = [];
+
+	private clickPlacement?: Placement;
+
+	@state()
+	private longpressContent: HTMLElement[] = [];
+
+	private longpressPlacement?: Placement;
+
+	@state()
+	private hoverContent: HTMLElement[] = [];
+
+	private hoverPlacement?: Placement;
+
+	@state()
+	private targetContent: HTMLElement[] = [];
+
+	@query("#click-overlay", true)
+	clickOverlayElement!: Overlay;
+
+	@query("#longpress-overlay", true)
+	longpressOverlayElement!: Overlay;
+
+	@query("#hover-overlay", true)
+	hoverOverlayElement!: Overlay;
+
+	private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {
+		return slot.assignedElements({ flatten: true }) as HTMLElement[];
+	}
+
+	private handleTriggerContent(
+		event: Event & { target: HTMLSlotElement },
+	): void {
+		this.targetContent = this.getAssignedElementsFromSlot(event.target);
+	}
+
+	private handleSlotContent(event: Event & { target: HTMLSlotElement }): void {
+		switch (event.target.name) {
+			case "click-content":
+				this.clickContent = this.getAssignedElementsFromSlot(event.target);
+				break;
+			case "longpress-content":
+				this.longpressContent = this.getAssignedElementsFromSlot(event.target);
+				break;
+			case "hover-content":
+				this.hoverContent = this.getAssignedElementsFromSlot(event.target);
+				break;
+		}
+	}
+
+	private handleBeforetoggle(event: BeforetoggleOpenEvent): void {
+		const { target } = event;
+		let type: OverlayContentTypes;
+
+		if (target === this.clickOverlayElement) {
+			type = "click";
+		} else if (target === this.longpressOverlayElement) {
+			type = "longpress";
+		} else if (target === this.hoverOverlayElement) {
+			type = "hover";
+			/* c8 ignore next 3 */
+		} else {
+			return;
+		}
+
+		if (event.newState === "open") {
+			this.open = type;
+		} else if (this.open === type) {
+			this.open = undefined;
+		}
+	}
+
+	protected override update(changes: PropertyValues): void {
+		if (changes.has("clickContent")) {
+			this.clickPlacement =
+				((this.clickContent[0]?.getAttribute("placement") ||
+					this.clickContent[0]?.getAttribute("direction")) as Placement) ||
+				undefined;
+		}
+
+		if (changes.has("hoverContent")) {
+			this.hoverPlacement =
+				((this.hoverContent[0]?.getAttribute("placement") ||
+					this.hoverContent[0]?.getAttribute("direction")) as Placement) ||
+				undefined;
+		}
+
+		if (changes.has("longpressContent")) {
+			this.longpressPlacement =
+				((this.longpressContent[0]?.getAttribute("placement") ||
+					this.longpressContent[0]?.getAttribute("direction")) as Placement) ||
+				undefined;
+		}
+
+		super.update(changes);
+	}
+
+	protected renderSlot(name: string): TemplateResult {
+		return html`
+			
+		`;
+	}
+
+	protected renderClickOverlay(): TemplateResult {
+		import("@spectrum-web-components/overlay/sp-overlay.js");
+		const slot = this.renderSlot("click-content");
+
+		if (!this.clickContent.length) {
+			return slot;
+		}
+
+		return html`
+			
+				${slot}
+			
+		`;
+	}
+
+	protected renderHoverOverlay(): TemplateResult {
+		import("@spectrum-web-components/overlay/sp-overlay.js");
+		const slot = this.renderSlot("hover-content");
+
+		if (!this.hoverContent.length) {
+			return slot;
+		}
+
+		return html`
+			
+				${slot}
+			
+		`;
+	}
+
+	protected renderLongpressOverlay(): TemplateResult {
+		import("@spectrum-web-components/overlay/sp-overlay.js");
+		const slot = this.renderSlot("longpress-content");
+
+		if (!this.longpressContent.length) {
+			return slot;
+		}
+
+		return html`
+			
+				${slot}
+			
+			
+		`;
+	}
+
+	protected override render(): TemplateResult {
+		const content = this.content.split(" ");
+
+		// Keyboard event availability documented in README.md
+		/* eslint-disable lit-a11y/click-events-have-key-events */
+		return html`
+			
+			${[
+				content.includes("click") ? this.renderClickOverlay() : html``,
+				content.includes("hover") ? this.renderHoverOverlay() : html``,
+				content.includes("longpress") ? this.renderLongpressOverlay() : html``,
+			]}
+		`;
+		/* eslint-enable lit-a11y/click-events-have-key-events */
+	}
+
+	protected override updated(changes: PropertyValues): void {
+		super.updated(changes);
+
+		if (this.disabled && changes.has("disabled")) {
+			this.open = undefined;
+
+			return;
+		}
+	}
+
+	protected override async getUpdateComplete(): Promise {
+		const complete = (await super.getUpdateComplete()) as boolean;
+
+		return complete;
+	}
 }
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index b25162e239..88529c5e54 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -8,1338 +8,1282 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/button/sp-button.js";
+import { DialogWrapper } from "@spectrum-web-components/dialog";
+import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js";
 import {
-    openOverlay,
-    Overlay,
-    OverlayContentTypes,
-    OverlayTrigger,
-    Placement,
-    TriggerInteractions,
-    VirtualTrigger,
-} from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
-import { DialogWrapper } from '@spectrum-web-components/dialog';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-
-import { Picker } from '@spectrum-web-components/picker';
-import '@spectrum-web-components/picker/sp-picker.js';
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/radio/sp-radio.js';
-import '@spectrum-web-components/radio/sp-radio-group.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import '@spectrum-web-components/accordion/sp-accordion.js';
-import '@spectrum-web-components/accordion/sp-accordion-item.js';
-import '@spectrum-web-components/button-group/sp-button-group.js';
-import '../../../projects/story-decorator/src/types.js';
-
-import './overlay-story-components.js';
-import { render } from 'lit-html';
-import { Popover } from '@spectrum-web-components/popover';
-import { Button } from '@spectrum-web-components/button';
-import { PopoverContent } from './overlay-story-components.js';
+	openOverlay,
+	Overlay,
+	OverlayContentTypes,
+	OverlayTrigger,
+	Placement,
+	TriggerInteractions,
+	VirtualTrigger,
+} from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
+import "@spectrum-web-components/accordion/sp-accordion.js";
+import "@spectrum-web-components/button-group/sp-button-group.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import { Picker } from "@spectrum-web-components/picker";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/radio/sp-radio-group.js";
+import "@spectrum-web-components/radio/sp-radio.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "../../../projects/story-decorator/src/types.js";
+
+import { Button } from "@spectrum-web-components/button";
+import { Popover } from "@spectrum-web-components/popover";
+import { render } from "lit-html";
+import "./overlay-story-components.js";
+import { PopoverContent } from "./overlay-story-components.js";
 
 const storyStyles = html`
-    
+	
 `;
 
 export default {
-    title: 'Overlay',
-    argTypes: {
-        offset: { control: 'number' },
-        placement: {
-            control: {
-                type: 'inline-radio',
-                options: [
-                    'top',
-                    'top-start',
-                    'top-end',
-                    'bottom',
-                    'bottom-start',
-                    'bottom-end',
-                    'left',
-                    'left-start',
-                    'left-end',
-                    'right',
-                    'right-start',
-                    'right-end',
-                    'auto',
-                    'auto-start',
-                    'auto-end',
-                    'none',
-                ],
-            },
-        },
-        type: {
-            control: {
-                type: 'inline-radio',
-                options: ['modal', 'replace', 'inline'],
-            },
-        },
-        colorStop: {
-            control: {
-                type: 'inline-radio',
-                options: ['light', 'dark'],
-            },
-        },
-    },
-    args: {
-        placement: 'bottom',
-        offset: 0,
-        colorStop: 'light',
-    },
+	title: "Overlay",
+	argTypes: {
+		offset: { control: "number" },
+		placement: {
+			control: {
+				type: "inline-radio",
+				options: [
+					"top",
+					"top-start",
+					"top-end",
+					"bottom",
+					"bottom-start",
+					"bottom-end",
+					"left",
+					"left-start",
+					"left-end",
+					"right",
+					"right-start",
+					"right-end",
+					"auto",
+					"auto-start",
+					"auto-end",
+					"none",
+				],
+			},
+		},
+		type: {
+			control: {
+				type: "inline-radio",
+				options: ["modal", "replace", "inline"],
+			},
+		},
+		colorStop: {
+			control: {
+				type: "inline-radio",
+				options: ["light", "dark"],
+			},
+		},
+	},
+	args: {
+		placement: "bottom",
+		offset: 0,
+		colorStop: "light",
+	},
 };
 
 interface Properties {
-    placement: Placement;
-    offset: number;
-    open?: OverlayContentTypes;
-    type?: Extract;
+	placement: Placement;
+	offset: number;
+	open?: OverlayContentTypes;
+	type?: Extract;
 }
 
 const template = ({
-    placement,
-    offset,
-    open,
-    type,
+	placement,
+	offset,
+	open,
+	type,
 }: Properties): TemplateResult => {
-    return html`
-        ${storyStyles}
-        
-            Show Popover
-            
-                
-                    
-                    

-                        The background of this div should be blue
-                    

-                    
-                        Press Me
-                        
-                            
-                                Another Popover
-                            
-                        
-
-                        
-                            Click to open another popover.
-                        
-                    
-                
-            
-            
-                Click to open a popover.
-            
-        
-    `;
+	return html`
+		${storyStyles}
+		
+			Show Popover
+			
+				
+					
+					
The background of this div should be blue

+					
+						Press Me
+						
+							 Another Popover 
+						
+
+						
+							Click to open another popover.
+						
+					
+				
+			
+			
+				Click to open a popover.
+			
+		
+	`;
 };
 
 const extraText = html`
-    
This is some text.

-    
This is some text.

-    

-        This is a
-        link
-        .
-    

+	
This is some text.

+	
This is some text.

+	

+		This is a
+		link
+		.
+	

 `;
 
 function nextFrame(): Promise {
-    return new Promise((res) => requestAnimationFrame(() => res()));
+	return new Promise((res) => requestAnimationFrame(() => res()));
 }
 
 export const Default = (args: Properties): TemplateResult => template(args);
 
 export const accordion = (): TemplateResult => {
-    return html`
-        
-            
-            
-                Open overlay w/ accordion
-            
-            
-                
-                    
-                        
-                            

-                                Thing
-                                

-                                

-                                

-                                

-                                

-                                

-                                

-                                more things
-                            

-                        
-                        
-                            

-                                Thing
-                                

-                                

-                                

-                                

-                                

-                                

-                                

-                                more things
-                            

-                        
-                        
-                            

-                                Thing
-                                

-                                

-                                

-                                

-                                

-                                

-                                

-                                more things
-                            

-                        
-                        
-                            

-                                Thing
-                                

-                                

-                                

-                                

-                                

-                                

-                                

-                                more things
-                            

-                        
-                    
-                
-            
-        
-    `;
+	return html`
+		
+			
+			
+				Open overlay w/ accordion
+			
+			
+				
+					
+						
+							

+								Thing
+								

+								

+								

+								

+								

+								

+								

+								more things
+							

+						
+						
+							

+								Thing
+								

+								

+								

+								

+								

+								

+								

+								more things
+							

+						
+						
+							

+								Thing
+								

+								

+								

+								

+								

+								

+								

+								more things
+							

+						
+						
+							

+								Thing
+								

+								

+								

+								

+								

+								

+								

+								more things
+							

+						
+					
+				
+			
+		
+	`;
 };
 
 accordion.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 accordion.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
 
 export const clickAndHoverTargets = (): TemplateResult => {
-    return html`
-        

-            ${storyStyles}
-            
-            
-                

-                    Click me
-                

-                
-                    Ok, now hover the other trigger
-                
-            
-            
-                

-                    Then hover me
-                

-                
-                    Now click my trigger -- I should stay open, but the other
-                    overlay should close
-                
-            
-        

-    `;
+	return html`
+		

+			${storyStyles}
+			
+			
+				
Click me

+				
+					Ok, now hover the other trigger
+				
+			
+			
+				

+					Then hover me
+				

+				
+					Now click my trigger -- I should stay open, but the other overlay
+					should close
+				
+			
+		

+	`;
 };
 clickAndHoverTargets.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 clickAndHoverTargets.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
 
 class ScrollForcer extends HTMLElement {
-    ready!: (value: boolean | PromiseLike) => void;
-
-    constructor() {
-        super();
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-        });
-        this.setup();
-    }
-
-    async setup(): Promise {
-        await nextFrame();
-        await nextFrame();
-
-        this.previousElementSibling?.addEventListener(
-            'sp-opened',
-            this.doScroll
-        );
-        await nextFrame();
-        await nextFrame();
-        (this.previousElementSibling?.lastElementChild as OverlayTrigger).open =
-            'click';
-    }
-
-    doScroll = async (): Promise => {
-        this.previousElementSibling?.addEventListener(
-            'sp-opened',
-            this.doScroll
-        );
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-
-        if (document.scrollingElement) {
-            document.scrollingElement.scrollTop = 100;
-        }
-
-        await nextFrame();
-        await nextFrame();
-        this.ready(true);
-    };
-
-    private readyPromise: Promise = Promise.resolve(false);
-
-    get updateComplete(): Promise {
-        return this.readyPromise;
-    }
+	ready!: (value: boolean | PromiseLike) => void;
+
+	constructor() {
+		super();
+		this.readyPromise = new Promise((res) => {
+			this.ready = res;
+		});
+		this.setup();
+	}
+
+	async setup(): Promise {
+		await nextFrame();
+		await nextFrame();
+
+		this.previousElementSibling?.addEventListener("sp-opened", this.doScroll);
+		await nextFrame();
+		await nextFrame();
+		(this.previousElementSibling?.lastElementChild as OverlayTrigger).open =
+			"click";
+	}
+
+	doScroll = async (): Promise => {
+		this.previousElementSibling?.addEventListener("sp-opened", this.doScroll);
+		await nextFrame();
+		await nextFrame();
+		await nextFrame();
+		await nextFrame();
+
+		if (document.scrollingElement) {
+			document.scrollingElement.scrollTop = 100;
+		}
+
+		await nextFrame();
+		await nextFrame();
+		this.ready(true);
+	};
+
+	private readyPromise: Promise = Promise.resolve(false);
+
+	get updateComplete(): Promise {
+		return this.readyPromise;
+	}
 }
 
-customElements.define('scroll-forcer', ScrollForcer);
+customElements.define("scroll-forcer", ScrollForcer);
 
 export const clickContentClosedOnScroll = (
-    args: Properties
+	args: Properties,
 ): TemplateResult => html`
-    

-        ${template({
-            ...args,
-        })}
-    

+	

+		${template({
+			...args,
+		})}
+	

 `;
 clickContentClosedOnScroll.decorators = [
-    (story: () => TemplateResult): TemplateResult => html`
-        
-        ${story()}
-        
-    `,
+	(story: () => TemplateResult): TemplateResult => html`
+		
+		${story()}
+		
+	`,
 ];
 
 class ComplexModalReady extends HTMLElement {
-    ready!: (value: boolean | PromiseLike) => void;
+	ready!: (value: boolean | PromiseLike) => void;
 
-    constructor() {
-        super();
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-            this.setup();
-        });
-    }
+	constructor() {
+		super();
+		this.readyPromise = new Promise((res) => {
+			this.ready = res;
+			this.setup();
+		});
+	}
 
-    async setup(): Promise {
-        await nextFrame();
+	async setup(): Promise {
+		await nextFrame();
 
-        const overlay = document.querySelector(
-            `overlay-trigger`
-        ) as OverlayTrigger;
+		const overlay = document.querySelector(`overlay-trigger`) as OverlayTrigger;
 
-        overlay.addEventListener('sp-opened', this.handleTriggerOpened);
-    }
+		overlay.addEventListener("sp-opened", this.handleTriggerOpened);
+	}
 
-    handleTriggerOpened = async (): Promise => {
-        await nextFrame();
+	handleTriggerOpened = async (): Promise => {
+		await nextFrame();
 
-        const picker = document.querySelector('#test-picker') as Picker;
+		const picker = document.querySelector("#test-picker") as Picker;
 
-        picker.addEventListener('sp-opened', this.handlePickerOpen);
-        picker.open = true;
-    };
+		picker.addEventListener("sp-opened", this.handlePickerOpen);
+		picker.open = true;
+	};
 
-    handlePickerOpen = async (): Promise => {
-        const picker = document.querySelector('#test-picker') as Picker;
-        const actions = [nextFrame, picker.updateComplete];
+	handlePickerOpen = async (): Promise => {
+		const picker = document.querySelector("#test-picker") as Picker;
+		const actions = [nextFrame, picker.updateComplete];
 
-        await Promise.all(actions);
+		await Promise.all(actions);
 
-        this.ready(true);
-    };
+		this.ready(true);
+	};
 
-    private readyPromise: Promise = Promise.resolve(false);
+	private readyPromise: Promise = Promise.resolve(false);
 
-    get updateComplete(): Promise {
-        return this.readyPromise;
-    }
+	get updateComplete(): Promise {
+		return this.readyPromise;
+	}
 }
 
-customElements.define('complex-modal-ready', ComplexModalReady);
+customElements.define("complex-modal-ready", ComplexModalReady);
 
 const complexModalDecorator = (story: () => TemplateResult): TemplateResult => {
-    return html`
-        ${story()}
-        
-    `;
+	return html`
+		${story()}
+		
+	`;
 };
 
 export const complexModal = (): TemplateResult => {
-    return html`
-        
-        
-            
-                
-                    Selection type:
-                
-                
-                    Deselect
-                    Select inverse
-                    Feather...
-                    Select and mask...
-                    
-                    Save selection
-                    Make work path
-                
-            
-            
-                Toggle Dialog
-            
-        
-    `;
+	return html`
+		
+		
+			
+				 Selection type: 
+				
+					Deselect
+					Select inverse
+					Feather...
+					Select and mask...
+					
+					Save selection
+					Make work path
+				
+			
+			 Toggle Dialog 
+		
+	`;
 };
 
 complexModal.decorators = [complexModalDecorator];
 
 export const customizedClickContent = (
-    args: Properties
+	args: Properties,
 ): TemplateResult => html`
-    
-    ${template({
-        ...args,
-        open: 'click',
-    })}
+	
+	${template({
+		...args,
+		open: "click",
+	})}
 `;
 
 export const deep = (): TemplateResult => html`
-    
-        
-            Open popover 1 with buttons + selfmanaged Tooltips
-        
-        
-            
-                
-                    
-                        My Tooltip 1
-                    
-                    A
-                
-                
-                    
-                        My Tooltip 1
-                    
-                    B
-                
-            
-        
-    
-
-    
-        
-            Open popover 2 with buttons without ToolTips
-        
-        
-            
-                X
-                Y
-            
-        
-    
+	
+		
+			Open popover 1 with buttons + selfmanaged Tooltips
+		
+		
+			
+				
+					
+						My Tooltip 1
+					
+					A
+				
+				
+					
+						My Tooltip 1
+					
+					B
+				
+			
+		
+	
+
+	
+		
+			Open popover 2 with buttons without ToolTips
+		
+		
+			
+				X
+				Y
+			
+		
+	
 `;
 deep.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 deep.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
 
 export const deepChildTooltip = (): TemplateResult => html`
-    
-        Open popover
-        
-            
-                
Let us open another overlay here

-                
-                    
-                        Open sub popover
-                    
-                    
-                        
-                            

-                                Render an action button with tooltips. Clicking
-                                the action button shouldn't close everything
-                            

-                            
-                                Button with self-managed tooltip
-                                
-                                    Deep Child ToolTip
-                                
-                            
-                            Just a button
-                        
-                    
-                
-            
-        
-    
+	
+		Open popover
+		
+			
+				
Let us open another overlay here

+				
+					
+						Open sub popover
+					
+					
+						
+							

+								Render an action button with tooltips. Clicking the action
+								button shouldn't close everything
+							

+							
+								Button with self-managed tooltip
+								
+									Deep Child ToolTip
+								
+							
+							Just a button
+						
+					
+				
+			
+		
+	
 `;
 
 export const deepNesting = (): TemplateResult => {
-    const color = window.__swc_hack_knobs__.defaultColor;
-    const outter = color === 'light' ? 'dark' : 'light';
-
-    return html`
-        ${storyStyles}
-        
-            
-                
+			
+				
-            
-        
-    `;
+				>
+			
+		
+	`;
 };
 
 class DefinedOverlayReady extends HTMLElement {
-    ready!: (value: boolean | PromiseLike) => void;
-
-    connectedCallback(): void {
-        if (!!this.ready) return;
-
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-            this.setup();
-        });
-    }
-
-    overlayElement!: OverlayTrigger;
-    popoverElement!: PopoverContent;
-
-    async setup(): Promise {
-        await nextFrame();
-        await nextFrame();
-
-        this.overlayElement = document.querySelector(
-            `overlay-trigger`
-        ) as OverlayTrigger;
-        const button = document.querySelector(
-            `[slot="trigger"]`
-        ) as HTMLButtonElement;
-
-        this.overlayElement.addEventListener(
-            'sp-opened',
-            this.handleTriggerOpened
-        );
-        await nextFrame();
-        await nextFrame();
-        button.click();
-    }
-
-    handleTriggerOpened = async (): Promise => {
-        this.overlayElement.removeEventListener(
-            'sp-opened',
-            this.handleTriggerOpened
-        );
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-
-        this.popoverElement = document.querySelector(
-            'popover-content'
-        ) as PopoverContent;
-
-        if (!this.popoverElement) {
-            return;
-        }
-
-        this.popoverElement.addEventListener(
-            'sp-opened',
-            this.handlePopoverOpen
-        );
-        await nextFrame();
-        await nextFrame();
-        this.popoverElement.button.click();
-    };
-
-    handlePopoverOpen = async (): Promise => {
-        await nextFrame();
-
-        this.ready(true);
-    };
-
-    disconnectedCallback(): void {
-        this.overlayElement.removeEventListener(
-            'sp-opened',
-            this.handleTriggerOpened
-        );
-        this.popoverElement.removeEventListener(
-            'sp-opened',
-            this.handlePopoverOpen
-        );
-    }
-
-    private readyPromise: Promise = Promise.resolve(false);
-
-    get updateComplete(): Promise {
-        return this.readyPromise;
-    }
+	ready!: (value: boolean | PromiseLike) => void;
+
+	connectedCallback(): void {
+		if (ifDefined(this.ready)) return;
+
+		this.readyPromise = new Promise((res) => {
+			this.ready = res;
+			this.setup();
+		});
+	}
+
+	overlayElement!: OverlayTrigger;
+	popoverElement!: PopoverContent;
+
+	async setup(): Promise {
+		await nextFrame();
+		await nextFrame();
+
+		this.overlayElement = document.querySelector(
+			`overlay-trigger`,
+		) as OverlayTrigger;
+		const button = document.querySelector(
+			`[slot="trigger"]`,
+		) as HTMLButtonElement;
+
+		this.overlayElement.addEventListener("sp-opened", this.handleTriggerOpened);
+		await nextFrame();
+		await nextFrame();
+		button.click();
+	}
+
+	handleTriggerOpened = async (): Promise => {
+		this.overlayElement.removeEventListener(
+			"sp-opened",
+			this.handleTriggerOpened,
+		);
+		await nextFrame();
+		await nextFrame();
+		await nextFrame();
+		await nextFrame();
+
+		this.popoverElement = document.querySelector(
+			"popover-content",
+		) as PopoverContent;
+
+		if (!this.popoverElement) {
+			return;
+		}
+
+		this.popoverElement.addEventListener("sp-opened", this.handlePopoverOpen);
+		await nextFrame();
+		await nextFrame();
+		this.popoverElement.button.click();
+	};
+
+	handlePopoverOpen = async (): Promise => {
+		await nextFrame();
+
+		this.ready(true);
+	};
+
+	disconnectedCallback(): void {
+		this.overlayElement.removeEventListener(
+			"sp-opened",
+			this.handleTriggerOpened,
+		);
+		this.popoverElement.removeEventListener(
+			"sp-opened",
+			this.handlePopoverOpen,
+		);
+	}
+
+	private readyPromise: Promise = Promise.resolve(false);
+
+	get updateComplete(): Promise {
+		return this.readyPromise;
+	}
 }
 
-customElements.define('defined-overlay-ready', DefinedOverlayReady);
+customElements.define("defined-overlay-ready", DefinedOverlayReady);
 
 const definedOverlayDecorator = (
-    story: () => TemplateResult
+	story: () => TemplateResult,
 ): TemplateResult => {
-    return html`
-        ${story()}
-        
-    `;
+	return html`
+		${story()}
+		
+	`;
 };
 
 export const definedOverlayElement = (): TemplateResult => {
-    return html`
-        
-            Open popover
-            
-                
-                    
-                
-            
-        
-    `;
+	return html`
+		
+			Open popover
+			
+				
+					
+				
+			
+		
+	`;
 };
 
 definedOverlayElement.decorators = [definedOverlayDecorator];
 
 export const detachedElement = (): TemplateResult => {
-    let overlay: Overlay | undefined;
-    const openDetachedOverlayContent = async ({
-        target,
-    }: {
-        target: HTMLElement;
-    }): Promise => {
-        if (overlay) {
-            overlay.open = false;
-            overlay = undefined;
-
-            return;
-        }
-
-        const div = document.createElement('div');
-
-        (div as HTMLDivElement & { open: boolean }).open = false;
-        div.textContent = 'This div is overlaid';
-        div.setAttribute(
-            'style',
-            `
+	let overlay: Overlay | undefined;
+	const openDetachedOverlayContent = async ({
+		target,
+	}: {
+		target: HTMLElement;
+	}): Promise => {
+		if (overlay) {
+			overlay.open = false;
+			overlay = undefined;
+
+			return;
+		}
+
+		const div = document.createElement("div");
+
+		(div as HTMLDivElement & { open: boolean }).open = false;
+		div.textContent = "This div is overlaid";
+		div.setAttribute(
+			"style",
+			`
             background-color: var(--spectrum-gray-50);
             color: var(--spectrum-gray-800);
             border: 1px solid;
             padding: 2em;
-        `
-        );
-        overlay = await Overlay.open(div, {
-            type: 'auto',
-            trigger: target,
-            receivesFocus: 'auto',
-            placement: 'bottom',
-            offset: 0,
-        });
-        overlay.addEventListener('sp-closed', () => {
-            overlay = undefined;
-        });
-        target.insertAdjacentElement('afterend', overlay);
-    };
-
-    requestAnimationFrame(() => {
-        openDetachedOverlayContent({
-            target: document.querySelector(
-                '#detached-content-trigger'
-            ) as HTMLElement,
-        });
-    });
-
-    return html`
-        
-        
-            
-        
-    `;
+        `,
+		);
+		overlay = await Overlay.open(div, {
+			type: "auto",
+			trigger: target,
+			receivesFocus: "auto",
+			placement: "bottom",
+			offset: 0,
+		});
+		overlay.addEventListener("sp-closed", () => {
+			overlay = undefined;
+		});
+		target.insertAdjacentElement("afterend", overlay);
+	};
+
+	requestAnimationFrame(() => {
+		openDetachedOverlayContent({
+			target: document.querySelector(
+				"#detached-content-trigger",
+			) as HTMLElement,
+		});
+	});
+
+	return html`
+		
+		
+			
+		
+	`;
 };
 
 export const edges = (): TemplateResult => {
-    return html`
-        
-        
-            
-                Top/
-                

-                Left
-            
-            
-                Triskaidekaphobia and More
-            
-        
-        
-            
-                Top/
-                

-                Right
-            
-            
-                Triskaidekaphobia and More
-            
-        
-        
-            
-                Bottom/
-                

-                Left
-            
-            
-                Triskaidekaphobia and More
-            
-        
-        
-            
-                Bottom/
-                

-                Right
-            
-            
-                Triskaidekaphobia and More
-            
-        
-    `;
+	return html`
+		
+		
+			
+				Top/
+				

+				Left
+			
+			
+				Triskaidekaphobia and More
+			
+		
+		
+			
+				Top/
+				

+				Right
+			
+			
+				Triskaidekaphobia and More
+			
+		
+		
+			
+				Bottom/
+				

+				Left
+			
+			
+				Triskaidekaphobia and More
+			
+		
+		
+			
+				Bottom/
+				

+				Right
+			
+			
+				Triskaidekaphobia and More
+			
+		
+	`;
 };
 
 export const inline = (): TemplateResult => {
-    const closeEvent = new Event('close', { bubbles: true, composed: true });
-
-    return html`
-        
-            Open
-            
-                 {
-                        event.target.dispatchEvent(closeEvent);
-                    }}
-                >
-                    Close
-                
-            
-        
-        ${extraText}
-    `;
+	const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+	return html`
+		
+			Open
+			
+				 {
+						event.target.dispatchEvent(closeEvent);
+					}}
+				>
+					Close
+				
+			
+		
+		${extraText}
+	`;
 };
 
 export const longpress = (): TemplateResult => {
-    return html`
-        
-            
-                
-            
-            Search real hard...
-            
-                
-                        event.target.dispatchEvent(
-                            new Event('close', { bubbles: true })
-                        )}
-                    selects="single"
-                    vertical
-                    style="margin: calc(var(--spectrum-actiongroup-button-gap-y,calc(var(--swc-scale-factor) * 10px)) / 2);"
-                >
-                    
-                        
-                    
-                    
-                        
-                    
-                    
-                        
-                    
-                
-            
-        
-    `;
+	return html`
+		
+			
+				
+			
+			Search real hard...
+			
+				
+						event.target.dispatchEvent(new Event("close", { bubbles: true }))}
+					selects="single"
+					vertical
+					style="margin: calc(var(--spectrum-actiongroup-button-gap-y,calc(var(--swc-scale-factor) * 10px)) / 2);"
+				>
+					
+						
+					
+					
+						
+					
+					
+						
+					
+				
+			
+		
+	`;
 };
 
 export const modalLoose = (): TemplateResult => {
-    const closeEvent = new Event('close', { bubbles: true, composed: true });
-
-    return html`
-        
-            Open
-            
-                    event.target.dispatchEvent(closeEvent)}
-            >
-                
Loose Dialog

-                

-                    The
-                    sp-dialog
-                    element is not "meant" to be a modal alone. In that way it
-                    does not manage its own
-                    open
-                    attribute or outline when it should have
-                    pointer-events: auto
-                    . It's a part of this test suite to prove that content in
-                    this way can be used in an
-                    overlay-trigger
-                    element.
-                

-            
-        
-        ${extraText}
-    `;
+	const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+	return html`
+		
+			Open
+			
+					event.target.dispatchEvent(closeEvent)}
+			>
+				
Loose Dialog

+				

+					The
+					sp-dialog
+					element is not "meant" to be a modal alone. In that way it does not
+					manage its own
+					open
+					attribute or outline when it should have
+					pointer-events: auto
+					. It's a part of this test suite to prove that content in this way can
+					be used in an
+					overlay-trigger
+					element.
+				

+			
+		
+		${extraText}
+	`;
 };
 
 export const modalNoFocus = (): TemplateResult => {
-    const closeEvent = new Event('close', { bubbles: true, composed: true });
-
-    return html`
-        
-            Open
-            
-                

-                    The
-                    sp-dialog-wrapper
-                    element has been prepared for use in an
-                    overlay-trigger
-                    element by it's combination of modal, underlay, etc. styles
-                    and features.
-                

-                
-                    
-                            event.target.dispatchEvent(closeEvent)}
-                    >
-                        ${'Cancel'}
-                    
-                    
-                            event.target.dispatchEvent(closeEvent)}
-                    >
-                        ${'Override'}
-                    
-                
-            
-        
-    `;
+	const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+	return html`
+		
+			Open
+			
+				

+					The
+					sp-dialog-wrapper
+					element has been prepared for use in an
+					overlay-trigger
+					element by it's combination of modal, underlay, etc. styles and
+					features.
+				

+				
+					
+							event.target.dispatchEvent(closeEvent)}
+					>
+						${"Cancel"}
+					
+					
+							event.target.dispatchEvent(closeEvent)}
+					>
+						${"Override"}
+					
+				
+			
+		
+	`;
 };
 
 export const modalManaged = (): TemplateResult => {
-    const closeEvent = new Event('close', { bubbles: true, composed: true });
-
-    return html`
-        
-            Open
-             {
-                    event.target.dispatchEvent(closeEvent);
-                }}
-                @secondary=${(
-                    event: Event & { target: DialogWrapper }
-                ): void => {
-                    event.target.dispatchEvent(closeEvent);
-                }}
-                @cancel=${(event: Event & { target: DialogWrapper }): void => {
-                    event.target.dispatchEvent(closeEvent);
-                }}
-            >
-                

-                    The
-                    sp-dialog-wrapper
-                    element has been prepared for use in an
-                    overlay-trigger
-                    element by it's combination of modal, underlay, etc. styles
-                    and features.
-                

-            
-        
-        ${extraText}
-    `;
+	const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+	return html`
+		
+			Open
+			 {
+					event.target.dispatchEvent(closeEvent);
+				}}
+				@secondary=${(event: Event & { target: DialogWrapper }): void => {
+					event.target.dispatchEvent(closeEvent);
+				}}
+				@cancel=${(event: Event & { target: DialogWrapper }): void => {
+					event.target.dispatchEvent(closeEvent);
+				}}
+			>
+				

+					The
+					sp-dialog-wrapper
+					element has been prepared for use in an
+					overlay-trigger
+					element by it's combination of modal, underlay, etc. styles and
+					features.
+				

+			
+		
+		${extraText}
+	`;
 };
 
 export const modalWithinNonModal = (): TemplateResult => {
-    return html`
-        
-            
-                Open inline overlay
-            
-            
-                
-                    
-                        
-                            Open modal overlay
-                        
-                        
-                            
-                                Modal overlay
-                            
-                        
-                    
-                
-            
-        
-    `;
+	return html`
+		
+			
+				Open inline overlay
+			
+			
+				
+					
+						
+							Open modal overlay
+						
+						
+							 Modal overlay 
+						
+					
+				
+			
+		
+	`;
 };
 
 export const noCloseOnResize = (args: Properties): TemplateResult => html`
-    
-    ${template({
-        ...args,
-        open: 'click',
-    })}
+	
+	${template({
+		...args,
+		open: "click",
+	})}
 `;
 noCloseOnResize.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 noCloseOnResize.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
 
 export const openClickContent = (args: Properties): TemplateResult =>
-    template({
-        ...args,
-        open: 'click',
-    });
+	template({
+		...args,
+		open: "click",
+	});
 
 export const openHoverContent = (args: Properties): TemplateResult =>
-    template({
-        ...args,
-        open: 'hover',
-    });
+	template({
+		...args,
+		open: "hover",
+	});
 
 export const replace = (): TemplateResult => {
-    const closeEvent = new Event('close', { bubbles: true, composed: true });
-
-    return html`
-        
-            Open
-            
-                 {
-                        event.target.dispatchEvent(closeEvent);
-                    }}
-                >
-                    Close
-                
-            
-        
-        ${extraText}
-    `;
+	const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+	return html`
+		
+			Open
+			
+				 {
+						event.target.dispatchEvent(closeEvent);
+					}}
+				>
+					Close
+				
+			
+		
+		${extraText}
+	`;
 };
 
 export const sideHoverDraggable = (): TemplateResult => {
-    return html`
-        ${storyStyles}
-        
-        
-            
-                
-                
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Vivamus egestas sed enim sed condimentum. Nunc facilisis
-                    scelerisque massa sed luctus. Orci varius natoque penatibus
-                    et magnis dis parturient montes, nascetur ridiculus mus.
-                    Suspendisse sagittis sodales purus vitae ultricies. Integer
-                    at dui sem. Sed quam tortor, ornare in nisi et, rhoncus
-                    lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.
-                    Sed feugiat semper libero, sit amet vehicula orci fermentum
-                    id. Vivamus imperdiet egestas luctus. Mauris tincidunt
-                    malesuada ante, faucibus viverra nunc blandit a. Fusce et
-                    nisl nisi. Aenean dictum quam id mollis faucibus. Nulla a
-                    ultricies dui. In hac habitasse platea dictumst. Curabitur
-                    gravida lobortis vestibulum.
-                
-            
-        
-    `;
+	return html`
+		${storyStyles}
+		
+		
+			
+				
+				
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+					egestas sed enim sed condimentum. Nunc facilisis scelerisque massa sed
+					luctus. Orci varius natoque penatibus et magnis dis parturient montes,
+					nascetur ridiculus mus. Suspendisse sagittis sodales purus vitae
+					ultricies. Integer at dui sem. Sed quam tortor, ornare in nisi et,
+					rhoncus lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.
+					Sed feugiat semper libero, sit amet vehicula orci fermentum id.
+					Vivamus imperdiet egestas luctus. Mauris tincidunt malesuada ante,
+					faucibus viverra nunc blandit a. Fusce et nisl nisi. Aenean dictum
+					quam id mollis faucibus. Nulla a ultricies dui. In hac habitasse
+					platea dictumst. Curabitur gravida lobortis vestibulum.
+				
+			
+		
+	`;
 };
 
 export const superComplexModal = (): TemplateResult => {
-    return html`
-        
-            Toggle Dialog
-            
-                
-                    
-                        
-                            Toggle Dialog
-                        
-                        
-                            
-                                
-                                    
-                                        Toggle Dialog
-                                    
-                                    
-                                        
-                                            

-                                                When you get this deep, this
-                                                ActiveOverlay should be the only
-                                                one in [slot="open"].
-                                            

-                                            

-                                                All of the rest of the
-                                                ActiveOverlay elements should
-                                                have had their [slot] attribute
-                                                removed.
-                                            

-                                            

-                                                Closing this ActiveOverlay
-                                                should replace them...
-                                            

-                                        
-                                    
-                                
-                            
-                        
-                    
-                
-            
-        
-    `;
+	return html`
+		
+			Toggle Dialog
+			
+				
+					
+						
+							Toggle Dialog
+						
+						
+							
+								
+									
+										Toggle Dialog
+									
+									
+										
+											

+												When you get this deep, this ActiveOverlay should be the
+												only one in [slot="open"].
+											

+											

+												All of the rest of the ActiveOverlay elements should
+												have had their [slot] attribute removed.
+											

+											
Closing this ActiveOverlay should replace them...

+										
+									
+								
+							
+						
+					
+				
+			
+		
+	`;
 };
 
 export const updated = (): TemplateResult => {
-    return html`
-        ${storyStyles}
-        
-        
-            
-                
-                
-                    Click to open popover
-                
-                
-                    
-                        
-                        

-                            The background of this div should be blue
-                        

-                        
-                            Press Me
-                            
-                                
-                                    Another Popover
-                                
-                            
-
-                            
-                                Click to open another popover.
-                            
-                        
-                    
-                
-            
-        
-    `;
+	return html`
+		${storyStyles}
+		
+		
+			
+				
+				
+					Click to open popover
+				
+				
+					
+						
+						
The background of this div should be blue

+						
+							Press Me
+							
+								 Another Popover 
+							
+
+							
+								Click to open another popover.
+							
+						
+					
+				
+			
+		
+	`;
 };
 
 export const updating = (): TemplateResult => {
-    const update = (): void => {
-        const button = document.querySelector('[slot="trigger"]') as Button;
-
-        button.style.left = `${Math.floor(Math.random() * 200)}px`;
-        button.style.top = `${Math.floor(Math.random() * 200)}px`;
-        button.style.position = 'fixed';
-    };
-
-    return html`
-        
-            
-                Open inline overlay
-            
-            
-                
-                    
-                        Update trigger location.
-                    
-                
-            
-        
-    `;
+	const update = (): void => {
+		const button = document.querySelector('[slot="trigger"]') as Button;
+
+		button.style.left = `${Math.floor(Math.random() * 200)}px`;
+		button.style.top = `${Math.floor(Math.random() * 200)}px`;
+		button.style.position = "fixed";
+	};
+
+	return html`
+		
+			
+				Open inline overlay
+			
+			
+				
+					
+						Update trigger location.
+					
+				
+			
+		
+	`;
 };
 
 updating.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 updating.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
 
 class StartEndContextmenu extends HTMLElement {
-    override shadowRoot!: ShadowRoot;
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        this.shadowRoot.innerHTML = `
+	override shadowRoot!: ShadowRoot;
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.shadowRoot.innerHTML = `
             
-        
-    `;
+	const contextMenuTemplate = (kind = ""): TemplateResult => html`
+		 {
+				if ((event.target as HTMLElement).localName === "sp-menu-item") {
+					event.target?.dispatchEvent(new Event("close", { bubbles: true }));
+				}
+			}}
+		>
+			
+				
+					Menu source: ${kind}
+					Deselect
+					Select inverse
+					Feather...
+					Select and mask...
+					
+					Save selection
+					Make work path
+				
+			
+		
+	`;
+	const handleContextmenu = async (event: PointerEvent): Promise => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const source = event.composedPath()[0] as HTMLDivElement;
+		const { id } = source;
+		const trigger = event.target as HTMLElement;
+		const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
+		const fragment = document.createDocumentFragment();
+
+		render(contextMenuTemplate(id), fragment);
+		const popover = fragment.querySelector("sp-popover") as Popover;
+
+		openOverlay(trigger, "click", popover, {
+			placement: args.placement,
+			receivesFocus: "auto",
+			virtualTrigger,
+			offset: 0,
+			notImmediatelyClosable: true,
+		});
+	};
+
+	return html`
+		
+		
+	`;
 };
 
 virtualElementV1.args = {
-    placement: 'right-start' as Placement,
+	placement: "right-start" as Placement,
 };
 
 export const virtualElement = (args: Properties): TemplateResult => {
-    const contextMenuTemplate = (kind = ''): TemplateResult => html`
-         {
-                if (
-                    (event.target as HTMLElement).localName === 'sp-menu-item'
-                ) {
-                    event.target?.dispatchEvent(
-                        new Event('close', { bubbles: true })
-                    );
-                }
-            }}
-        >
-            
-                
-                    Menu source: ${kind}
-                    Deselect
-                    Select inverse
-                    Feather...
-                    Select and mask...
-                    
-                    Save selection
-                    Make work path
-                
-            
-        
-    `;
-    const handleContextmenu = async (event: PointerEvent): Promise => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        const source = event.composedPath()[0] as HTMLDivElement;
-        const { id } = source;
-        const trigger = event.target as HTMLElement;
-        const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
-        const fragment = document.createDocumentFragment();
-
-        render(contextMenuTemplate(id), fragment);
-        const popover = fragment.querySelector('sp-popover') as Popover;
-
-        const overlay = await openOverlay(popover, {
-            trigger: virtualTrigger,
-            placement: args.placement,
-            offset: 0,
-            notImmediatelyClosable: true,
-            type: 'auto',
-        });
-
-        trigger.insertAdjacentElement('afterend', overlay);
-    };
-
-    return html`
-        
-        
-    `;
+	const contextMenuTemplate = (kind = ""): TemplateResult => html`
+		 {
+				if ((event.target as HTMLElement).localName === "sp-menu-item") {
+					event.target?.dispatchEvent(new Event("close", { bubbles: true }));
+				}
+			}}
+		>
+			
+				
+					Menu source: ${kind}
+					Deselect
+					Select inverse
+					Feather...
+					Select and mask...
+					
+					Save selection
+					Make work path
+				
+			
+		
+	`;
+	const handleContextmenu = async (event: PointerEvent): Promise => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const source = event.composedPath()[0] as HTMLDivElement;
+		const { id } = source;
+		const trigger = event.target as HTMLElement;
+		const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
+		const fragment = document.createDocumentFragment();
+
+		render(contextMenuTemplate(id), fragment);
+		const popover = fragment.querySelector("sp-popover") as Popover;
+
+		const overlay = await openOverlay(popover, {
+			trigger: virtualTrigger,
+			placement: args.placement,
+			offset: 0,
+			notImmediatelyClosable: true,
+			type: "auto",
+		});
+
+		trigger.insertAdjacentElement("afterend", overlay);
+	};
+
+	return html`
+		
+		
+	`;
 };
 
 virtualElement.args = {
-    placement: 'right-start' as Placement,
+	placement: "right-start" as Placement,
 };
 
 export const virtualElementDeclaratively = (
-    args: Properties
+	args: Properties,
 ): TemplateResult => {
-    const handleContextmenu = async (event: PointerEvent): Promise => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        const overlay = document.querySelector(
-            'sp-overlay:not([open])'
-        ) as Overlay;
-
-        if (overlay.triggerElement instanceof VirtualTrigger) {
-            overlay.triggerElement.updateBoundingClientRect(
-                event.clientX,
-                event.clientY
-            );
-        }
-
-        overlay.willPreventClose = true;
-        overlay.open = true;
-    };
-    const overlay = (): TemplateResult => html`
-        
-             {
-                    event.target?.dispatchEvent(
-                        new Event('close', { bubbles: true })
-                    );
-                }}
-            >
-                
-                    
-                        Menu
-                        Deselect
-                        Select inverse
-                        Feather...
-                        Select and mask...
-                        
-                        Save selection
-                        Make work path
-                    
-                
-            
-        
-    `;
-
-    return html`
-        
-        

-            ${overlay()} ${overlay()}
-        

-    `;
+	const handleContextmenu = async (event: PointerEvent): Promise => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const overlay = document.querySelector("sp-overlay:not([open])") as Overlay;
+
+		if (overlay.triggerElement instanceof VirtualTrigger) {
+			overlay.triggerElement.updateBoundingClientRect(
+				event.clientX,
+				event.clientY,
+			);
+		}
+
+		overlay.willPreventClose = true;
+		overlay.open = true;
+	};
+	const overlay = (): TemplateResult => html`
+		
+			 {
+					event.target?.dispatchEvent(new Event("close", { bubbles: true }));
+				}}
+			>
+				
+					
+						Menu
+						Deselect
+						Select inverse
+						Feather...
+						Select and mask...
+						
+						Save selection
+						Make work path
+					
+				
+			
+		
+	`;
+
+	return html`
+		
+		

+			${overlay()} ${overlay()}
+		

+	`;
 };
 
 virtualElementDeclaratively.args = {
-    placement: 'right-start' as Placement,
+	placement: "right-start" as Placement,
 };
 
 virtualElementDeclaratively.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 virtualElementDeclaratively.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
diff --git a/packages/overlay/test/overlay-v1.test.ts b/packages/overlay/test/overlay-v1.test.ts
index 7f322cfc10..831e8b4e10 100644
--- a/packages/overlay/test/overlay-v1.test.ts
+++ b/packages/overlay/test/overlay-v1.test.ts
@@ -9,701 +9,662 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import { Dialog } from '@spectrum-web-components/dialog';
-import '@spectrum-web-components/popover/sp-popover.js';
-import { Popover } from '@spectrum-web-components/popover';
-import { setViewport } from '@web/test-runner-commands';
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import { Dialog } from "@spectrum-web-components/dialog";
+import "@spectrum-web-components/popover/sp-popover.js";
+import { Popover } from "@spectrum-web-components/popover";
+import { setViewport } from "@web/test-runner-commands";
 import {
-    Overlay,
-    OverlayTrigger,
-    Placement,
-} from '@spectrum-web-components/overlay';
+	Overlay,
+	OverlayTrigger,
+	Placement,
+} from "@spectrum-web-components/overlay";
 
 import {
-    elementUpdated,
-    expect,
-    html,
-    nextFrame,
-    oneEvent,
-} from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
+	elementUpdated,
+	expect,
+	html,
+	nextFrame,
+	oneEvent,
+} from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
 import {
-    definedOverlayElement,
-    virtualElementV1,
-} from '../stories/overlay.stories';
-import { PopoverContent } from '../stories/overlay-story-components.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import { Theme } from '@spectrum-web-components/theme';
-import { render, TemplateResult } from '@spectrum-web-components/base';
+	definedOverlayElement,
+	virtualElementV1,
+} from "../stories/overlay.stories.js";
+import { PopoverContent } from "../stories/overlay-story-components.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import { Theme } from "@spectrum-web-components/theme";
+import { render, TemplateResult } from "@spectrum-web-components/base";
 import {
-    fixture,
-    isInteractive,
-    isOnTopLayer,
-} from '../../../test/testing-helpers.js';
-import { Menu } from '@spectrum-web-components/menu';
+	fixture,
+	isInteractive,
+	isOnTopLayer,
+} from "../../../test/testing-helpers.js";
+import { Menu } from "@spectrum-web-components/menu";
 
 async function styledFixture(
-    story: TemplateResult
+	story: TemplateResult,
 ): Promise {
-    const test = await fixture(html`
-        
-            ${story}
-        
-    `);
+	const test = await fixture(html`
+		
+			${story}
+		
+	`);
 
-    return test.children[0] as T;
+	return test.children[0] as T;
 }
 
-describe('Overlays, v1', () => {
-    let testDiv!: HTMLDivElement;
-    let openOverlays: (() => void)[] = [];
-
-    describe('shared fixture', () => {
-        beforeEach(async () => {
-            testDiv = await styledFixture(html`
-                

-                    
-                    
-                        Show Popover
-                    
-                    

-                        
-                            
-                                

-                                    A popover message
-                                

-                                
-                                    Test 1
-                                
-                                Test 2
-                                Test 3
-                            
-                        
-                        
-                            Hover message
-                        
-                        
-                            Other hover message
-                        
-                    

-                

-            `);
-            await elementUpdated(testDiv);
-        });
-
-        afterEach(() => {
-            openOverlays.map((close) => close());
-            openOverlays = [];
-        });
-
-        [
-            'bottom',
-            'bottom-start',
-            'bottom-end',
-            'top',
-            'top-start',
-            'top-end',
-            'left',
-            'left-start',
-            'left-end',
-            'right',
-            'right-start',
-            'right-end',
-            'none',
-        ].map((direction) => {
-            const placement = direction as Placement;
-
-            it(`opens a popover - ${placement}`, async () => {
-                const button = testDiv.querySelector(
-                    '#first-button'
-                ) as HTMLElement;
-                const outerPopover = testDiv.querySelector(
-                    '#outer-popover'
-                ) as Popover;
-
-                expect(await isInteractive(outerPopover)).to.be.false;
-                expect(button).to.exist;
-
-                const opened = oneEvent(outerPopover, 'sp-opened');
-
-                openOverlays.push(
-                    await Overlay.open(button, 'click', outerPopover, {
-                        delayed: false,
-                        placement,
-                        offset: 10,
-                    })
-                );
-                await opened;
-                expect(await isInteractive(outerPopover)).to.be.true;
-            });
-        });
-
-        it(`opens a modal dialog`, async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const outerPopover = testDiv.querySelector(
-                '#outer-popover'
-            ) as Popover;
-
-            expect(await isInteractive(outerPopover)).to.be.false;
-
-            expect(button).to.exist;
-
-            const opened = oneEvent(outerPopover, 'sp-opened');
-
-            openOverlays.push(
-                await Overlay.open(button, 'modal', outerPopover, {
-                    delayed: false,
-                })
-            );
-            await opened;
-
-            const firstFocused = outerPopover.querySelector(
-                '#outer-focus-target'
-            ) as HTMLElement;
-
-            expect(document.activeElement === firstFocused).to.be.true;
-
-            /**
-             * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page
-             * and the backward tab past the known beginning of the page. Test that you never focused the button
-             * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better.
-             */
-
-            await sendKeys({
-                press: 'Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-            await sendKeys({
-                press: 'Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-
-            await sendKeys({
-                press: 'Shift+Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-
-            await sendKeys({
-                press: 'Shift+Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-
-            await sendKeys({
-                press: 'Shift+Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-        });
-
-        it(`updates a popover`, async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const outerPopover = testDiv.querySelector(
-                '#outer-popover'
-            ) as Popover;
-
-            expect(await isInteractive(outerPopover)).to.be.false;
-
-            expect(button).to.exist;
-
-            const opened = oneEvent(outerPopover, 'sp-opened');
-
-            openOverlays.push(
-                await Overlay.open(button, 'click', outerPopover, {
-                    delayed: false,
-                    offset: 10,
-                })
-            );
-            await opened;
-
-            expect(await isInteractive(outerPopover)).to.be.true;
-
-            Overlay.update();
-
-            expect(await isInteractive(outerPopover)).to.be.true;
-        });
-
-        it(`opens a popover w/ delay`, async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const outerPopover = testDiv.querySelector(
-                '#outer-popover'
-            ) as Popover;
-
-            expect(await isInteractive(outerPopover)).to.be.false;
-            expect(button).to.exist;
-
-            const opened = oneEvent(outerPopover, 'sp-opened');
-            const start = performance.now();
-
-            openOverlays.push(
-                await Overlay.open(button, 'click', outerPopover, {
-                    delayed: true,
-                    offset: 10,
-                })
-            );
-            await opened;
-            const end = performance.now();
-
-            expect(await isInteractive(outerPopover)).to.be.true;
-            expect(end - start).to.be.greaterThan(1000);
-        });
-
-        it('opens hover overlay', async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const hoverOverlay = testDiv.querySelector(
-                '#hover-1'
-            ) as HTMLElement;
-            const clickOverlay = testDiv.querySelector(
-                '#outer-popover'
-            ) as HTMLElement;
-
-            expect(await isOnTopLayer(hoverOverlay)).to.be.false;
-            expect(await isOnTopLayer(clickOverlay)).to.be.false;
-
-            let opened = oneEvent(hoverOverlay, 'sp-opened');
-
-            openOverlays.push(
-                await Overlay.open(button, 'hover', hoverOverlay, {
-                    delayed: false,
-                    placement: 'top',
-                    offset: 10,
-                })
-            );
-            await opened;
-            expect(await isOnTopLayer(hoverOverlay)).to.be.true;
-
-            opened = oneEvent(clickOverlay, 'sp-opened');
-            const closed = oneEvent(hoverOverlay, 'sp-closed');
-
-            // Opening click overlay should close the hover overlay
-            openOverlays.push(
-                await Overlay.open(button, 'click', clickOverlay, {
-                    delayed: false,
-                    placement: 'bottom',
-                    offset: 10,
-                })
-            );
-            await opened;
-            await closed;
-            expect(
-                await isInteractive(clickOverlay),
-                'click overlay not interactive'
-            ).to.be.true;
-            expect(
-                await isOnTopLayer(hoverOverlay),
-                'hover overlay interactive'
-            ).to.be.false;
-        });
-
-        it('opens custom overlay', async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const customOverlay = testDiv.querySelector(
-                '#hover-1'
-            ) as HTMLElement;
-            const clickOverlay = testDiv.querySelector(
-                '#outer-popover'
-            ) as HTMLElement;
-
-            expect(button).to.exist;
-            expect(customOverlay).to.exist;
-
-            expect(await isOnTopLayer(customOverlay)).to.be.false;
-            expect(await isOnTopLayer(clickOverlay)).to.be.false;
-
-            let opened = oneEvent(customOverlay, 'sp-opened');
-
-            openOverlays.push(
-                await Overlay.open(button, 'custom', customOverlay, {
-                    delayed: false,
-                    placement: 'top',
-                    offset: 10,
-                })
-            );
-            await opened;
-            expect(await isOnTopLayer(customOverlay)).to.be.true;
-
-            opened = oneEvent(clickOverlay, 'sp-opened');
-            openOverlays.push(
-                await Overlay.open(button, 'click', clickOverlay, {
-                    delayed: false,
-                    placement: 'bottom',
-                    offset: 10,
-                })
-            );
-            await opened;
-            expect(await isOnTopLayer(clickOverlay), 'click content open').to.be
-                .true;
-        });
-    });
-
-    it('closes via events', async function () {
-        this.retries(0);
-        const test = await fixture(html`
-            

-                
-                    
-                        Some Content for the Dialog.
-                    
-                
-            

-        `);
-
-        const el = test.querySelector('sp-popover') as Popover;
-        const dialog = el.querySelector('sp-dialog') as Dialog;
-
-        const opened = oneEvent(el, 'sp-opened');
-
-        openOverlays.push(
-            await Overlay.open(test, 'click', el, {
-                delayed: false,
-                placement: 'bottom',
-                offset: 10,
-            })
-        );
-        await opened;
-        expect(await isOnTopLayer(el)).to.be.true;
-
-        const closed = oneEvent(el, 'sp-closed');
-
-        dialog.close();
-        await closed;
-        expect(await isOnTopLayer(el)).to.be.false;
-    });
-
-    it('closes an inline overlay when tabbing past the content', async () => {
-        const el = await fixture(html`
-            

-                Trigger
-                
-                    
-                
-                
-            

-        `);
-
-        const trigger = el.querySelector('.trigger') as HTMLElement;
-        const content = el.querySelector('.content') as HTMLElement;
-        const input = el.querySelector('input') as HTMLInputElement;
-        const after = el.querySelector('#after') as HTMLAnchorElement;
-
-        const opened = oneEvent(content, 'sp-opened');
-
-        openOverlays.push(
-            await Overlay.open(trigger, 'inline', content, {
-                receivesFocus: 'auto',
-            })
-        );
-        await opened;
-
-        expect(await isInteractive(content)).to.be.true;
-        expect(document.activeElement).to.equal(input);
-
-        const closed = oneEvent(content, 'sp-closed');
-
-        await sendKeys({
-            press: 'Shift+Tab',
-        });
-        await closed;
-
-        expect(document.activeElement).to.equal(trigger);
-
-        await sendKeys({
-            press: 'Tab',
-        });
-        expect(document.activeElement).to.equal(after);
-        expect(await isInteractive(content)).to.be.false;
-    });
-
-    it('closes an inline overlay when tabbing before the trigger', async () => {
-        const el = await fixture(html`
-            

-                
-                Trigger
-                

-                    
-                

-            

-        `);
-
-        const trigger = el.querySelector('.trigger') as HTMLElement;
-        const content = el.querySelector('.content') as HTMLElement;
-        const input = el.querySelector('.content input') as HTMLInputElement;
-        const before = el.querySelector('#before') as HTMLAnchorElement;
-
-        const open = oneEvent(trigger, 'sp-opened');
-
-        openOverlays.push(await Overlay.open(trigger, 'inline', content, {}));
-        await open;
-
-        expect(document.activeElement).to.equal(input);
-
-        await sendKeys({
-            press: 'Shift+Tab',
-        });
-
-        expect(document.activeElement).to.equal(trigger);
-
-        await sendKeys({
-            press: 'Shift+Tab',
-        });
-
-        expect(document.activeElement).to.equal(before);
-    });
-
-    it('opens detached content', async () => {
-        const textContent = 'This is a detached element that has been overlaid';
-        const el = await fixture(html`
-            
-        `);
+describe("Overlays, v1", () => {
+	let testDiv!: HTMLDivElement;
+	let openOverlays: (() => void)[] = [];
+
+	describe("shared fixture", () => {
+		beforeEach(async () => {
+			testDiv = await styledFixture(html`
+				

+					
+					
+						Show Popover
+					
+					

+						
+							
+								
A popover message

+								 Test 1 
+								Test 2
+								Test 3
+							
+						
+						
+							Hover message
+						
+						
+							Other hover message
+						
+					

+				

+			`);
+			await elementUpdated(testDiv);
+		});
+
+		afterEach(() => {
+			openOverlays.map((close) => close());
+			openOverlays = [];
+		});
+
+		[
+			"bottom",
+			"bottom-start",
+			"bottom-end",
+			"top",
+			"top-start",
+			"top-end",
+			"left",
+			"left-start",
+			"left-end",
+			"right",
+			"right-start",
+			"right-end",
+			"none",
+		].map((direction) => {
+			const placement = direction as Placement;
+
+			it(`opens a popover - ${placement}`, async () => {
+				const button = testDiv.querySelector("#first-button") as HTMLElement;
+				const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+				expect(await isInteractive(outerPopover)).to.be.false;
+				expect(button).to.exist;
+
+				const opened = oneEvent(outerPopover, "sp-opened");
+
+				openOverlays.push(
+					await Overlay.open(button, "click", outerPopover, {
+						delayed: false,
+						placement,
+						offset: 10,
+					}),
+				);
+				await opened;
+				expect(await isInteractive(outerPopover)).to.be.true;
+			});
+		});
+
+		it(`opens a modal dialog`, async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+			expect(await isInteractive(outerPopover)).to.be.false;
+
+			expect(button).to.exist;
+
+			const opened = oneEvent(outerPopover, "sp-opened");
+
+			openOverlays.push(
+				await Overlay.open(button, "modal", outerPopover, {
+					delayed: false,
+				}),
+			);
+			await opened;
+
+			const firstFocused = outerPopover.querySelector(
+				"#outer-focus-target",
+			) as HTMLElement;
+
+			expect(document.activeElement === firstFocused).to.be.true;
+
+			/**
+			 * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page
+			 * and the backward tab past the known beginning of the page. Test that you never focused the button
+			 * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better.
+			 */
+
+			await sendKeys({
+				press: "Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+			await sendKeys({
+				press: "Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+
+			await sendKeys({
+				press: "Shift+Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+
+			await sendKeys({
+				press: "Shift+Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+
+			await sendKeys({
+				press: "Shift+Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+		});
+
+		it(`updates a popover`, async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+			expect(await isInteractive(outerPopover)).to.be.false;
+
+			expect(button).to.exist;
+
+			const opened = oneEvent(outerPopover, "sp-opened");
+
+			openOverlays.push(
+				await Overlay.open(button, "click", outerPopover, {
+					delayed: false,
+					offset: 10,
+				}),
+			);
+			await opened;
+
+			expect(await isInteractive(outerPopover)).to.be.true;
+
+			Overlay.update();
+
+			expect(await isInteractive(outerPopover)).to.be.true;
+		});
+
+		it(`opens a popover w/ delay`, async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+			expect(await isInteractive(outerPopover)).to.be.false;
+			expect(button).to.exist;
+
+			const opened = oneEvent(outerPopover, "sp-opened");
+			const start = performance.now();
+
+			openOverlays.push(
+				await Overlay.open(button, "click", outerPopover, {
+					delayed: true,
+					offset: 10,
+				}),
+			);
+			await opened;
+			const end = performance.now();
+
+			expect(await isInteractive(outerPopover)).to.be.true;
+			expect(end - start).to.be.greaterThan(1000);
+		});
+
+		it("opens hover overlay", async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const hoverOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
+			const clickOverlay = testDiv.querySelector(
+				"#outer-popover",
+			) as HTMLElement;
+
+			expect(await isOnTopLayer(hoverOverlay)).to.be.false;
+			expect(await isOnTopLayer(clickOverlay)).to.be.false;
+
+			let opened = oneEvent(hoverOverlay, "sp-opened");
+
+			openOverlays.push(
+				await Overlay.open(button, "hover", hoverOverlay, {
+					delayed: false,
+					placement: "top",
+					offset: 10,
+				}),
+			);
+			await opened;
+			expect(await isOnTopLayer(hoverOverlay)).to.be.true;
+
+			opened = oneEvent(clickOverlay, "sp-opened");
+			const closed = oneEvent(hoverOverlay, "sp-closed");
+
+			// Opening click overlay should close the hover overlay
+			openOverlays.push(
+				await Overlay.open(button, "click", clickOverlay, {
+					delayed: false,
+					placement: "bottom",
+					offset: 10,
+				}),
+			);
+			await opened;
+			await closed;
+			expect(await isInteractive(clickOverlay), "click overlay not interactive")
+				.to.be.true;
+			expect(await isOnTopLayer(hoverOverlay), "hover overlay interactive").to
+				.be.false;
+		});
+
+		it("opens custom overlay", async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const customOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
+			const clickOverlay = testDiv.querySelector(
+				"#outer-popover",
+			) as HTMLElement;
+
+			expect(button).to.exist;
+			expect(customOverlay).to.exist;
+
+			expect(await isOnTopLayer(customOverlay)).to.be.false;
+			expect(await isOnTopLayer(clickOverlay)).to.be.false;
+
+			let opened = oneEvent(customOverlay, "sp-opened");
+
+			openOverlays.push(
+				await Overlay.open(button, "custom", customOverlay, {
+					delayed: false,
+					placement: "top",
+					offset: 10,
+				}),
+			);
+			await opened;
+			expect(await isOnTopLayer(customOverlay)).to.be.true;
+
+			opened = oneEvent(clickOverlay, "sp-opened");
+			openOverlays.push(
+				await Overlay.open(button, "click", clickOverlay, {
+					delayed: false,
+					placement: "bottom",
+					offset: 10,
+				}),
+			);
+			await opened;
+			expect(await isOnTopLayer(clickOverlay), "click content open").to.be.true;
+		});
+	});
+
+	it("closes via events", async function () {
+		this.retries(0);
+		const test = await fixture(html`
+			

+				
+					 Some Content for the Dialog. 
+				
+			

+		`);
+
+		const el = test.querySelector("sp-popover") as Popover;
+		const dialog = el.querySelector("sp-dialog") as Dialog;
+
+		const opened = oneEvent(el, "sp-opened");
+
+		openOverlays.push(
+			await Overlay.open(test, "click", el, {
+				delayed: false,
+				placement: "bottom",
+				offset: 10,
+			}),
+		);
+		await opened;
+		expect(await isOnTopLayer(el)).to.be.true;
+
+		const closed = oneEvent(el, "sp-closed");
+
+		dialog.close();
+		await closed;
+		expect(await isOnTopLayer(el)).to.be.false;
+	});
+
+	it("closes an inline overlay when tabbing past the content", async () => {
+		const el = await fixture(html`
+			

+				Trigger
+				
+					
+				
+				
+			

+		`);
+
+		const trigger = el.querySelector(".trigger") as HTMLElement;
+		const content = el.querySelector(".content") as HTMLElement;
+		const input = el.querySelector("input") as HTMLInputElement;
+		const after = el.querySelector("#after") as HTMLAnchorElement;
+
+		const opened = oneEvent(content, "sp-opened");
+
+		openOverlays.push(
+			await Overlay.open(trigger, "inline", content, {
+				receivesFocus: "auto",
+			}),
+		);
+		await opened;
+
+		expect(await isInteractive(content)).to.be.true;
+		expect(document.activeElement).to.equal(input);
+
+		const closed = oneEvent(content, "sp-closed");
+
+		await sendKeys({
+			press: "Shift+Tab",
+		});
+		await closed;
+
+		expect(document.activeElement).to.equal(trigger);
+
+		await sendKeys({
+			press: "Tab",
+		});
+		expect(document.activeElement).to.equal(after);
+		expect(await isInteractive(content)).to.be.false;
+	});
+
+	it("closes an inline overlay when tabbing before the trigger", async () => {
+		const el = await fixture(html`
+			

+				
+				Trigger
+				

+					
+				

+			

+		`);
+
+		const trigger = el.querySelector(".trigger") as HTMLElement;
+		const content = el.querySelector(".content") as HTMLElement;
+		const input = el.querySelector(".content input") as HTMLInputElement;
+		const before = el.querySelector("#before") as HTMLAnchorElement;
+
+		const open = oneEvent(trigger, "sp-opened");
+
+		openOverlays.push(await Overlay.open(trigger, "inline", content, {}));
+		await open;
+
+		expect(document.activeElement).to.equal(input);
+
+		await sendKeys({
+			press: "Shift+Tab",
+		});
+
+		expect(document.activeElement).to.equal(trigger);
+
+		await sendKeys({
+			press: "Shift+Tab",
+		});
+
+		expect(document.activeElement).to.equal(before);
+	});
+
+	it("opens detached content", async () => {
+		const textContent = "This is a detached element that has been overlaid";
+		const el = await fixture(html`
+			
+		`);
 
-        const content = document.createElement('sp-popover');
+		const content = document.createElement("sp-popover");
 
-        content.textContent = textContent;
+		content.textContent = textContent;
 
-        const opened = oneEvent(content, 'sp-opened');
-        const closeOverlay = await Overlay.open(el, 'click', content, {
-            placement: 'bottom',
-        });
+		const opened = oneEvent(content, "sp-opened");
+		const closeOverlay = await Overlay.open(el, "click", content, {
+			placement: "bottom",
+		});
 
-        await opened;
+		await opened;
 
-        expect(await isInteractive(content)).to.be.true;
+		expect(await isInteractive(content)).to.be.true;
 
-        const closed = oneEvent(content, 'sp-closed');
+		const closed = oneEvent(content, "sp-closed");
 
-        closeOverlay();
-        await closed;
+		closeOverlay();
+		await closed;
 
-        expect(await isInteractive(content)).to.be.false;
+		expect(await isInteractive(content)).to.be.false;
 
-        content.remove();
-    });
+		content.remove();
+	});
 });
 describe('Overlay - type="modal", v1', () => {
-    describe('handle multiple separate `contextmenu` events', async () => {
-        let width = 0;
-        let height = 0;
-        let firstMenu: Popover;
-        let firstRect: DOMRect;
-        let secondMenu: Popover;
-        let secondRect: DOMRect;
-
-        before(async () => {
-            render(
-                html`
-                    
-                        ${virtualElementV1({
-                            ...virtualElementV1.args,
-                            offset: 6,
-                        })}
-                    
-                `,
-                document.body
-            );
-
-            width = window.innerWidth;
-            height = window.innerHeight;
-        });
-        after(() => {
-            document.querySelector('sp-theme')?.remove();
-        });
-        it('opens the first "contextmenu" overlay', async () => {
-            const opened = oneEvent(document, 'sp-opened');
-
-            // Right click to open "context menu" overlay.
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [width / 2 + 50, height / 2],
-                    },
-                    {
-                        type: 'click',
-                        options: {
-                            button: 'right',
-                        },
-                        position: [width / 2 + 50, height / 2],
-                    },
-                ],
-            });
-            await opened;
-            firstMenu = document.querySelector('sp-popover') as Popover;
-            expect(firstMenu.textContent).to.include('Menu source: end');
-            firstRect = firstMenu.getBoundingClientRect();
-            expect(firstMenu).to.not.be.null;
-        });
-        it('closes the first "contextmenu" when opening a second', async () => {
-            const closed = oneEvent(document, 'sp-closed');
-            const opened = oneEvent(document, 'sp-opened');
-            /**
-             * Right click out of the "context menu" overlay to both close
-             * the first overlay and have the event passed to the surfacing page
-             * in order to open a subsequent "context menu" overlay.
-             *
-             * Using `sendMouse` here triggers the light dismiss for some reason while
-             * manual interacting in this way does not...
-             */
-            const trigger = document.querySelector(
-                'start-end-contextmenu'
-            ) as HTMLElement;
-
-            trigger.shadowRoot?.querySelector('#start')?.dispatchEvent(
-                new Event('contextmenu', {
-                    composed: true,
-                })
-            );
-            await nextFrame();
-            trigger.shadowRoot?.querySelector('#start')?.dispatchEvent(
-                new Event('pointerup', {
-                    composed: true,
-                    bubbles: true,
-                })
-            );
-            await closed;
-            await opened;
-            secondMenu = document.querySelector('sp-popover') as Popover;
-            expect(secondMenu.textContent).to.include('Menu source: start');
-            secondRect = secondMenu.getBoundingClientRect();
-            expect(secondMenu).to.not.be.null;
-        });
-        it('closes the second "contextmenu" when clicking away', async () => {
-            const closed = oneEvent(document, 'sp-closed');
-
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [width - width / 8, height - height / 8],
-                    },
-                ],
-            });
-            await closed;
-            expect(firstRect.top).to.not.equal(secondRect.top);
-            expect(firstRect.left).to.not.equal(secondRect.left);
-        });
-    });
-
-    it('does not open content off of the viewport', async () => {
-        before(async () => {
-            await setViewport({ width: 360, height: 640 });
-            // Allow viewport update to propagate.
-            await nextFrame();
-        });
-        after(async () => {
-            await setViewport({ width: 800, height: 600 });
-            // Allow viewport update to propagate.
-            await nextFrame();
-        });
-
-        await fixture(html`
-            ${virtualElementV1({
-                ...virtualElementV1.args,
-                offset: 6,
-            })}
-        `);
-
-        const opened = oneEvent(document, 'sp-opened');
-
-        // Right click to open "context menu" overlay.
-        sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [270, 10],
-                },
-                {
-                    type: 'click',
-                    options: {
-                        button: 'right',
-                    },
-                    position: [270, 10],
-                },
-            ],
-        });
-        await opened;
-
-        const firstMenu = document.querySelector('sp-menu') as Menu;
-
-        expect(firstMenu).to.not.be.null;
-        expect(await isInteractive(firstMenu)).to.be.true;
-
-        const closed = oneEvent(document, 'sp-closed');
-
-        sendKeys({
-            press: 'Escape',
-        });
-        await closed;
-
-        expect(await isInteractive(firstMenu)).to.be.false;
-    });
-
-    it('opens children in the modal stack through shadow roots', async () => {
-        const el = await fixture(definedOverlayElement());
-        const trigger = el.querySelector(
-            '[slot="trigger"]'
-        ) as HTMLButtonElement;
-        let open = oneEvent(el, 'sp-opened');
-
-        trigger.click();
-        await open;
-        expect(el.open).to.equal('click');
-        const content = document.querySelector(
-            'popover-content'
-        ) as PopoverContent;
-
-        open = oneEvent(content, 'sp-opened');
-        content.button.click();
-        await open;
-        expect(content.trigger.open).to.equal('click');
-        let close = oneEvent(content, 'sp-closed');
-
-        content.trigger.removeAttribute('open');
-        await close;
-        expect(content.trigger.open).to.be.null;
-        close = oneEvent(el, 'sp-closed');
-        el.removeAttribute('open');
-        await close;
-        expect(el.open).to.be.null;
-    });
+	describe("handle multiple separate `contextmenu` events", async () => {
+		let width = 0;
+		let height = 0;
+		let firstMenu: Popover;
+		let firstRect: DOMRect;
+		let secondMenu: Popover;
+		let secondRect: DOMRect;
+
+		before(async () => {
+			render(
+				html`
+					
+						${virtualElementV1({
+							...virtualElementV1.args,
+							offset: 6,
+						})}
+					
+				`,
+				document.body,
+			);
+
+			width = window.innerWidth;
+			height = window.innerHeight;
+		});
+		after(() => {
+			document.querySelector("sp-theme")?.remove();
+		});
+		it('opens the first "contextmenu" overlay', async () => {
+			const opened = oneEvent(document, "sp-opened");
+
+			// Right click to open "context menu" overlay.
+			await sendMouse({
+				steps: [
+					{
+						type: "move",
+						position: [width / 2 + 50, height / 2],
+					},
+					{
+						type: "click",
+						options: {
+							button: "right",
+						},
+						position: [width / 2 + 50, height / 2],
+					},
+				],
+			});
+			await opened;
+			firstMenu = document.querySelector("sp-popover") as Popover;
+			expect(firstMenu.textContent).to.include("Menu source: end");
+			firstRect = firstMenu.getBoundingClientRect();
+			expect(firstMenu).to.not.be.null;
+		});
+		it('closes the first "contextmenu" when opening a second', async () => {
+			const closed = oneEvent(document, "sp-closed");
+			const opened = oneEvent(document, "sp-opened");
+			/**
+			 * Right click out of the "context menu" overlay to both close
+			 * the first overlay and have the event passed to the surfacing page
+			 * in order to open a subsequent "context menu" overlay.
+			 *
+			 * Using `sendMouse` here triggers the light dismiss for some reason while
+			 * manual interacting in this way does not...
+			 */
+			const trigger = document.querySelector(
+				"start-end-contextmenu",
+			) as HTMLElement;
+
+			trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
+				new Event("contextmenu", {
+					composed: true,
+				}),
+			);
+			await nextFrame();
+			trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
+				new Event("pointerup", {
+					composed: true,
+					bubbles: true,
+				}),
+			);
+			await closed;
+			await opened;
+			secondMenu = document.querySelector("sp-popover") as Popover;
+			expect(secondMenu.textContent).to.include("Menu source: start");
+			secondRect = secondMenu.getBoundingClientRect();
+			expect(secondMenu).to.not.be.null;
+		});
+		it('closes the second "contextmenu" when clicking away', async () => {
+			const closed = oneEvent(document, "sp-closed");
+
+			sendMouse({
+				steps: [
+					{
+						type: "click",
+						position: [width - width / 8, height - height / 8],
+					},
+				],
+			});
+			await closed;
+			expect(firstRect.top).to.not.equal(secondRect.top);
+			expect(firstRect.left).to.not.equal(secondRect.left);
+		});
+	});
+
+	it("does not open content off of the viewport", async () => {
+		before(async () => {
+			await setViewport({ width: 360, height: 640 });
+			// Allow viewport update to propagate.
+			await nextFrame();
+		});
+		after(async () => {
+			await setViewport({ width: 800, height: 600 });
+			// Allow viewport update to propagate.
+			await nextFrame();
+		});
+
+		await fixture(html`
+			${virtualElementV1({
+				...virtualElementV1.args,
+				offset: 6,
+			})}
+		`);
+
+		const opened = oneEvent(document, "sp-opened");
+
+		// Right click to open "context menu" overlay.
+		sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: [270, 10],
+				},
+				{
+					type: "click",
+					options: {
+						button: "right",
+					},
+					position: [270, 10],
+				},
+			],
+		});
+		await opened;
+
+		const firstMenu = document.querySelector("sp-menu") as Menu;
+
+		expect(firstMenu).to.not.be.null;
+		expect(await isInteractive(firstMenu)).to.be.true;
+
+		const closed = oneEvent(document, "sp-closed");
+
+		sendKeys({
+			press: "Escape",
+		});
+		await closed;
+
+		expect(await isInteractive(firstMenu)).to.be.false;
+	});
+
+	it("opens children in the modal stack through shadow roots", async () => {
+		const el = await fixture(definedOverlayElement());
+		const trigger = el.querySelector('[slot="trigger"]') as HTMLButtonElement;
+		let open = oneEvent(el, "sp-opened");
+
+		trigger.click();
+		await open;
+		expect(el.open).to.equal("click");
+		const content = document.querySelector("popover-content") as PopoverContent;
+
+		open = oneEvent(content, "sp-opened");
+		content.button.click();
+		await open;
+		expect(content.trigger.open).to.equal("click");
+		let close = oneEvent(content, "sp-closed");
+
+		content.trigger.removeAttribute("open");
+		await close;
+		expect(content.trigger.open).to.be.null;
+		close = oneEvent(el, "sp-closed");
+		el.removeAttribute("open");
+		await close;
+		expect(el.open).to.be.null;
+	});
 });
diff --git a/packages/overlay/test/overlay.test.ts b/packages/overlay/test/overlay.test.ts
index b5949df493..a7437b753c 100644
--- a/packages/overlay/test/overlay.test.ts
+++ b/packages/overlay/test/overlay.test.ts
@@ -9,933 +9,886 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import { Dialog } from '@spectrum-web-components/dialog';
-import '@spectrum-web-components/popover/sp-popover.js';
-import { Popover } from '@spectrum-web-components/popover';
-import { setViewport } from '@web/test-runner-commands';
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import { Dialog } from "@spectrum-web-components/dialog";
+import "@spectrum-web-components/popover/sp-popover.js";
+import { Popover } from "@spectrum-web-components/popover";
+import { setViewport } from "@web/test-runner-commands";
 import {
-    Overlay,
-    OverlayTrigger,
-    Placement,
-    VirtualTrigger,
-} from '@spectrum-web-components/overlay';
+	Overlay,
+	OverlayTrigger,
+	Placement,
+	VirtualTrigger,
+} from "@spectrum-web-components/overlay";
 
 import {
-    elementUpdated,
-    expect,
-    html,
-    nextFrame,
-    oneEvent,
-} from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
+	elementUpdated,
+	expect,
+	html,
+	nextFrame,
+	oneEvent,
+} from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
 import {
-    definedOverlayElement,
-    virtualElement,
-} from '../stories/overlay.stories';
-import { PopoverContent } from '../stories/overlay-story-components.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { spy } from 'sinon';
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import { Theme } from '@spectrum-web-components/theme';
-import { render, TemplateResult } from '@spectrum-web-components/base';
+	definedOverlayElement,
+	virtualElement,
+} from "../stories/overlay.stories.js";
+import { PopoverContent } from "../stories/overlay-story-components.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { spy } from "sinon";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import { Theme } from "@spectrum-web-components/theme";
+import { render, TemplateResult } from "@spectrum-web-components/base";
 import {
-    fixture,
-    isInteractive,
-    isOnTopLayer,
-} from '../../../test/testing-helpers.js';
-import { Menu } from '@spectrum-web-components/menu';
+	fixture,
+	isInteractive,
+	isOnTopLayer,
+} from "../../../test/testing-helpers.js";
+import { Menu } from "@spectrum-web-components/menu";
 
 async function styledFixture(
-    story: TemplateResult
+	story: TemplateResult,
 ): Promise {
-    const test = await fixture(html`
-        
-            ${story}
-        
-    `);
+	const test = await fixture(html`
+		
+			${story}
+		
+	`);
 
-    return test.children[0] as T;
+	return test.children[0] as T;
 }
 
-describe('Overlays', () => {
-    let testDiv!: HTMLDivElement;
-    let openOverlays: Overlay[] = [];
-
-    describe('shared fixture', () => {
-        beforeEach(async () => {
-            testDiv = await styledFixture(html`
-                

-                    
-                    
-                        Show Popover
-                    
-                    

-                        
-                            
-                                

-                                    A popover message
-                                

-                                
-                                    Test 1
-                                
-                                Test 2
-                                Test 3
-                            
-                        
-                        
-                            Hover message
-                        
-                        
-                            Other hover message
-                        
-                    

-                

-            `);
-            await elementUpdated(testDiv);
-        });
-
-        afterEach(() => {
-            openOverlays.map((overlay) => (overlay.open = false));
-            openOverlays = [];
-        });
-
-        [
-            'bottom',
-            'bottom-start',
-            'bottom-end',
-            'top',
-            'top-start',
-            'top-end',
-            'left',
-            'left-start',
-            'left-end',
-            'right',
-            'right-start',
-            'right-end',
-        ].map((direction) => {
-            const placement = direction as Placement;
-
-            it(`opens a popover - ${placement}`, async () => {
-                const clickSpy = spy();
-                const button = testDiv.querySelector(
-                    '#first-button'
-                ) as HTMLElement;
-                const outerPopover = testDiv.querySelector(
-                    '#outer-popover'
-                ) as Popover;
-
-                outerPopover.addEventListener('click', () => {
-                    clickSpy();
-                });
-
-                expect(await isInteractive(outerPopover)).to.be.false;
-                expect(button).to.exist;
-
-                const opened = oneEvent(outerPopover, 'sp-opened');
-
-                openOverlays.push(
-                    await Overlay.open(outerPopover, {
-                        trigger: button,
-                        type: 'auto',
-                        delayed: false,
-                        placement,
-                        offset: 10,
-                    })
-                );
-                button.insertAdjacentElement(
-                    'afterend',
-                    openOverlays.at(-1) as HTMLElement
-                );
-                await opened;
-                expect(await isInteractive(outerPopover)).to.be.true;
-            });
-        });
-
-        it(`opens a modal dialog`, async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const outerPopover = testDiv.querySelector(
-                '#outer-popover'
-            ) as Popover;
-
-            expect(await isInteractive(outerPopover)).to.be.false;
-
-            expect(button).to.exist;
-
-            const opened = oneEvent(outerPopover, 'sp-opened');
-
-            openOverlays.push(
-                await Overlay.open(outerPopover, {
-                    trigger: button,
-                })
-            );
-            button.insertAdjacentElement(
-                'afterend',
-                openOverlays.at(-1) as HTMLElement
-            );
-            await opened;
-
-            const firstFocused = outerPopover.querySelector(
-                '#outer-focus-target'
-            ) as HTMLElement;
-
-            expect(document.activeElement === firstFocused).to.be.true;
-
-            /**
-             * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page
-             * and the backward tab past the known beginning of the page. Test that you never focused the button
-             * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better.
-             */
-
-            await sendKeys({
-                press: 'Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-            await sendKeys({
-                press: 'Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-
-            await sendKeys({
-                press: 'Shift+Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-
-            await sendKeys({
-                press: 'Shift+Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-
-            await sendKeys({
-                press: 'Shift+Tab',
-            });
-
-            expect(document.activeElement === button).to.be.false;
-        });
-
-        it(`updates a popover`, async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const outerPopover = testDiv.querySelector(
-                '#outer-popover'
-            ) as Popover;
-
-            expect(await isInteractive(outerPopover)).to.be.false;
-
-            expect(button).to.exist;
-
-            const opened = oneEvent(outerPopover, 'sp-opened');
-
-            openOverlays.push(
-                await Overlay.open(outerPopover, {
-                    trigger: button,
-                    type: 'auto',
-                    offset: 10,
-                })
-            );
-            button.insertAdjacentElement(
-                'afterend',
-                openOverlays.at(-1) as HTMLElement
-            );
-            await opened;
-
-            expect(await isInteractive(outerPopover)).to.be.true;
-
-            Overlay.update();
-
-            expect(await isInteractive(outerPopover)).to.be.true;
-        });
-
-        it(`opens a popover w/ delay`, async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const outerPopover = testDiv.querySelector(
-                '#outer-popover'
-            ) as Popover;
-
-            expect(await isInteractive(outerPopover)).to.be.false;
-            expect(button).to.exist;
-
-            const opened = oneEvent(outerPopover, 'sp-opened');
-            const start = performance.now();
-
-            openOverlays.push(
-                await Overlay.open(outerPopover, {
-                    trigger: button,
-                    type: 'auto',
-                    delayed: true,
-                    offset: 10,
-                })
-            );
-            button.insertAdjacentElement(
-                'afterend',
-                openOverlays.at(-1) as HTMLElement
-            );
-            await opened;
-            const end = performance.now();
-
-            expect(await isInteractive(outerPopover)).to.be.true;
-            expect(end - start).to.be.greaterThan(1000);
-        });
-
-        it('opens hover overlay', async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const hoverOverlay = testDiv.querySelector(
-                '#hover-1'
-            ) as HTMLElement;
-            const clickOverlay = testDiv.querySelector(
-                '#outer-popover'
-            ) as HTMLElement;
-
-            expect(await isOnTopLayer(hoverOverlay)).to.be.false;
-            expect(await isOnTopLayer(clickOverlay)).to.be.false;
-
-            let opened = oneEvent(hoverOverlay, 'sp-opened');
-
-            openOverlays.push(
-                await Overlay.open(hoverOverlay, {
-                    trigger: button,
-                    type: 'hint',
-                    placement: 'top',
-                    offset: 10,
-                })
-            );
-            button.insertAdjacentElement(
-                'afterend',
-                openOverlays.at(-1) as HTMLElement
-            );
-            await opened;
-            expect(await isOnTopLayer(hoverOverlay)).to.be.true;
-
-            opened = oneEvent(clickOverlay, 'sp-opened');
-            const closed = oneEvent(hoverOverlay, 'sp-closed');
-
-            // Opening click overlay should close the hover overlay
-            openOverlays.push(
-                await Overlay.open(clickOverlay, {
-                    trigger: button,
-                    type: 'auto',
-                    placement: 'bottom',
-                    offset: 10,
-                })
-            );
-            button.insertAdjacentElement(
-                'afterend',
-                openOverlays.at(-1) as HTMLElement
-            );
-            await opened;
-            await closed;
-            expect(
-                await isInteractive(clickOverlay),
-                'click overlay not interactive'
-            ).to.be.true;
-            expect(
-                await isOnTopLayer(hoverOverlay),
-                'hover overlay interactive'
-            ).to.be.false;
-        });
-
-        it('opens custom overlay', async () => {
-            const button = testDiv.querySelector(
-                '#first-button'
-            ) as HTMLElement;
-            const customOverlay = testDiv.querySelector(
-                '#hover-1'
-            ) as HTMLElement;
-            const clickOverlay = testDiv.querySelector(
-                '#outer-popover'
-            ) as HTMLElement;
-
-            expect(button).to.exist;
-            expect(customOverlay).to.exist;
-
-            expect(await isOnTopLayer(customOverlay)).to.be.false;
-            expect(await isOnTopLayer(clickOverlay)).to.be.false;
-
-            let opened = oneEvent(customOverlay, 'sp-opened');
-
-            openOverlays.push(
-                await Overlay.open(customOverlay, {
-                    trigger: button,
-                    type: 'auto',
-                    placement: 'top',
-                    offset: 10,
-                })
-            );
-            button.insertAdjacentElement(
-                'afterend',
-                openOverlays.at(-1) as HTMLElement
-            );
-            await opened;
-            expect(await isOnTopLayer(customOverlay)).to.be.true;
-
-            opened = oneEvent(clickOverlay, 'sp-opened');
-            openOverlays.push(
-                await Overlay.open(clickOverlay, {
-                    trigger: button,
-                    type: 'auto',
-                    placement: 'bottom',
-                    offset: 10,
-                })
-            );
-            button.insertAdjacentElement(
-                'afterend',
-                openOverlays.at(-1) as HTMLElement
-            );
-            await opened;
-            expect(await isOnTopLayer(clickOverlay), 'click content open').to.be
-                .true;
-        });
-    });
-
-    it('closes via events', async () => {
-        const test = await fixture(html`
-            

-                
-                    
-                        Some Content for the Dialog.
-                    
-                
-            

-        `);
-
-        const el = test.querySelector('sp-popover') as Popover;
-        const dialog = el.querySelector('sp-dialog') as Dialog;
-
-        const opened = oneEvent(el, 'sp-opened');
-
-        openOverlays.push(
-            await Overlay.open(el, {
-                trigger: test,
-                type: 'auto',
-                placement: 'bottom',
-                offset: 10,
-            })
-        );
-        test.insertAdjacentElement(
-            'afterend',
-            openOverlays.at(-1) as HTMLElement
-        );
-        await opened;
-        expect(await isInteractive(el)).to.be.true;
-
-        const closed = oneEvent(el, 'sp-closed');
-
-        dialog.close();
-        await closed;
-        expect(await isInteractive(el)).to.be.false;
-    });
-
-    it('positions with a VirtualTrigger', async () => {
-        const test = await fixture(html`
-            

-                
-                    
-                        Some Content for the Dialog.
-                    
-                
-            

-        `);
-
-        const el = test.querySelector('sp-popover') as Popover;
-        const trigger = new VirtualTrigger(100, 100);
-
-        const opened = oneEvent(el, 'sp-opened');
-
-        openOverlays.push(
-            await Overlay.open(el, {
-                trigger,
-                type: 'auto',
-                placement: 'right',
-                offset: 10,
-            })
-        );
-        test.insertAdjacentElement(
-            'afterend',
-            openOverlays.at(-1) as HTMLElement
-        );
-        await opened;
-        expect(await isInteractive(el)).to.be.true;
-
-        const initial = el.getBoundingClientRect();
-
-        trigger.updateBoundingClientRect(500, 500);
-        await nextFrame();
-        await nextFrame();
-        const final = el.getBoundingClientRect();
-
-        expect(initial.x).to.not.equal(8);
-        expect(initial.y).to.not.equal(8);
-        expect(initial.x).to.not.equal(final.x);
-        expect(initial.y).to.not.equal(final.y);
-    });
-
-    it('closes an inline overlay when tabbing past the content', async () => {
-        const el = await fixture(html`
-            

-                Trigger
-                
-                    
-                
-                
-            

-        `);
-
-        const trigger = el.querySelector('.trigger') as HTMLElement;
-        const content = el.querySelector('.content') as HTMLElement;
-        const input = el.querySelector('input') as HTMLInputElement;
-        const after = el.querySelector('#after') as HTMLAnchorElement;
-
-        const opened = oneEvent(content, 'sp-opened');
-
-        openOverlays.push(
-            await Overlay.open(content, {
-                trigger,
-                type: 'auto',
-                receivesFocus: 'auto',
-            })
-        );
-        trigger.insertAdjacentElement(
-            'afterend',
-            openOverlays.at(-1) as HTMLElement
-        );
-        await opened;
-
-        expect(await isInteractive(content)).to.be.true;
-        expect(document.activeElement).to.equal(input);
-
-        const closed = oneEvent(content, 'sp-closed');
-
-        await sendKeys({
-            press: 'Shift+Tab',
-        });
-        await closed;
-
-        expect(document.activeElement).to.equal(trigger);
-
-        await sendKeys({
-            press: 'Tab',
-        });
-        expect(document.activeElement).to.equal(after);
-        expect(await isInteractive(content)).to.be.false;
-    });
-
-    it('closes an inline overlay when tabbing before the trigger', async () => {
-        const el = await fixture(html`
-            

-                
-                Trigger
-                

-                    
-                

-            

-        `);
-
-        const trigger = el.querySelector('.trigger') as HTMLElement;
-        const content = el.querySelector('.content') as HTMLElement;
-        const input = el.querySelector('.content input') as HTMLInputElement;
-        const before = el.querySelector('#before') as HTMLAnchorElement;
-
-        const open = oneEvent(trigger, 'sp-opened');
-
-        openOverlays.push(
-            await Overlay.open(content, {
-                trigger,
-                type: 'auto',
-            })
-        );
-        trigger.insertAdjacentElement(
-            'afterend',
-            openOverlays.at(-1) as HTMLElement
-        );
-        await open;
-
-        expect(document.activeElement).to.equal(input);
-
-        await sendKeys({
-            press: 'Shift+Tab',
-        });
-
-        expect(document.activeElement).to.equal(trigger);
-
-        await sendKeys({
-            press: 'Shift+Tab',
-        });
-
-        expect(document.activeElement).to.equal(before);
-    });
-
-    it('opens detached content', async () => {
-        const textContent = 'This is a detached element that has been overlaid';
-        const el = await fixture(html`
-            
-        `);
-
-        const content = document.createElement('sp-popover');
-
-        content.textContent = textContent;
-
-        const opened = oneEvent(content, 'sp-opened');
-        const overlay = await Overlay.open(content, {
-            trigger: el,
-            type: 'auto',
-            placement: 'bottom',
-        });
-
-        el.insertAdjacentElement('afterend', overlay);
-        await opened;
-
-        expect(await isInteractive(content)).to.be.true;
-
-        const closed = oneEvent(content, 'sp-closed');
-
-        overlay.open = false;
-        await closed;
-
-        expect(await isInteractive(content)).to.be.false;
-
-        content.remove();
-    });
+describe("Overlays", () => {
+	let testDiv!: HTMLDivElement;
+	let openOverlays: Overlay[] = [];
+
+	describe("shared fixture", () => {
+		beforeEach(async () => {
+			testDiv = await styledFixture(html`
+				

+					
+					
+						Show Popover
+					
+					

+						
+							
+								
A popover message

+								 Test 1 
+								Test 2
+								Test 3
+							
+						
+						
+							Hover message
+						
+						
+							Other hover message
+						
+					

+				

+			`);
+			await elementUpdated(testDiv);
+		});
+
+		afterEach(() => {
+			openOverlays.map((overlay) => (overlay.open = false));
+			openOverlays = [];
+		});
+
+		[
+			"bottom",
+			"bottom-start",
+			"bottom-end",
+			"top",
+			"top-start",
+			"top-end",
+			"left",
+			"left-start",
+			"left-end",
+			"right",
+			"right-start",
+			"right-end",
+		].map((direction) => {
+			const placement = direction as Placement;
+
+			it(`opens a popover - ${placement}`, async () => {
+				const clickSpy = spy();
+				const button = testDiv.querySelector("#first-button") as HTMLElement;
+				const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+				outerPopover.addEventListener("click", () => {
+					clickSpy();
+				});
+
+				expect(await isInteractive(outerPopover)).to.be.false;
+				expect(button).to.exist;
+
+				const opened = oneEvent(outerPopover, "sp-opened");
+
+				openOverlays.push(
+					await Overlay.open(outerPopover, {
+						trigger: button,
+						type: "auto",
+						delayed: false,
+						placement,
+						offset: 10,
+					}),
+				);
+				button.insertAdjacentElement(
+					"afterend",
+					openOverlays.at(-1) as HTMLElement,
+				);
+				await opened;
+				expect(await isInteractive(outerPopover)).to.be.true;
+			});
+		});
+
+		it(`opens a modal dialog`, async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+			expect(await isInteractive(outerPopover)).to.be.false;
+
+			expect(button).to.exist;
+
+			const opened = oneEvent(outerPopover, "sp-opened");
+
+			openOverlays.push(
+				await Overlay.open(outerPopover, {
+					trigger: button,
+				}),
+			);
+			button.insertAdjacentElement(
+				"afterend",
+				openOverlays.at(-1) as HTMLElement,
+			);
+			await opened;
+
+			const firstFocused = outerPopover.querySelector(
+				"#outer-focus-target",
+			) as HTMLElement;
+
+			expect(document.activeElement === firstFocused).to.be.true;
+
+			/**
+			 * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page
+			 * and the backward tab past the known beginning of the page. Test that you never focused the button
+			 * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better.
+			 */
+
+			await sendKeys({
+				press: "Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+			await sendKeys({
+				press: "Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+
+			await sendKeys({
+				press: "Shift+Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+
+			await sendKeys({
+				press: "Shift+Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+
+			await sendKeys({
+				press: "Shift+Tab",
+			});
+
+			expect(document.activeElement === button).to.be.false;
+		});
+
+		it(`updates a popover`, async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+			expect(await isInteractive(outerPopover)).to.be.false;
+
+			expect(button).to.exist;
+
+			const opened = oneEvent(outerPopover, "sp-opened");
+
+			openOverlays.push(
+				await Overlay.open(outerPopover, {
+					trigger: button,
+					type: "auto",
+					offset: 10,
+				}),
+			);
+			button.insertAdjacentElement(
+				"afterend",
+				openOverlays.at(-1) as HTMLElement,
+			);
+			await opened;
+
+			expect(await isInteractive(outerPopover)).to.be.true;
+
+			Overlay.update();
+
+			expect(await isInteractive(outerPopover)).to.be.true;
+		});
+
+		it(`opens a popover w/ delay`, async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+			expect(await isInteractive(outerPopover)).to.be.false;
+			expect(button).to.exist;
+
+			const opened = oneEvent(outerPopover, "sp-opened");
+			const start = performance.now();
+
+			openOverlays.push(
+				await Overlay.open(outerPopover, {
+					trigger: button,
+					type: "auto",
+					delayed: true,
+					offset: 10,
+				}),
+			);
+			button.insertAdjacentElement(
+				"afterend",
+				openOverlays.at(-1) as HTMLElement,
+			);
+			await opened;
+			const end = performance.now();
+
+			expect(await isInteractive(outerPopover)).to.be.true;
+			expect(end - start).to.be.greaterThan(1000);
+		});
+
+		it("opens hover overlay", async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const hoverOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
+			const clickOverlay = testDiv.querySelector(
+				"#outer-popover",
+			) as HTMLElement;
+
+			expect(await isOnTopLayer(hoverOverlay)).to.be.false;
+			expect(await isOnTopLayer(clickOverlay)).to.be.false;
+
+			let opened = oneEvent(hoverOverlay, "sp-opened");
+
+			openOverlays.push(
+				await Overlay.open(hoverOverlay, {
+					trigger: button,
+					type: "hint",
+					placement: "top",
+					offset: 10,
+				}),
+			);
+			button.insertAdjacentElement(
+				"afterend",
+				openOverlays.at(-1) as HTMLElement,
+			);
+			await opened;
+			expect(await isOnTopLayer(hoverOverlay)).to.be.true;
+
+			opened = oneEvent(clickOverlay, "sp-opened");
+			const closed = oneEvent(hoverOverlay, "sp-closed");
+
+			// Opening click overlay should close the hover overlay
+			openOverlays.push(
+				await Overlay.open(clickOverlay, {
+					trigger: button,
+					type: "auto",
+					placement: "bottom",
+					offset: 10,
+				}),
+			);
+			button.insertAdjacentElement(
+				"afterend",
+				openOverlays.at(-1) as HTMLElement,
+			);
+			await opened;
+			await closed;
+			expect(await isInteractive(clickOverlay), "click overlay not interactive")
+				.to.be.true;
+			expect(await isOnTopLayer(hoverOverlay), "hover overlay interactive").to
+				.be.false;
+		});
+
+		it("opens custom overlay", async () => {
+			const button = testDiv.querySelector("#first-button") as HTMLElement;
+			const customOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
+			const clickOverlay = testDiv.querySelector(
+				"#outer-popover",
+			) as HTMLElement;
+
+			expect(button).to.exist;
+			expect(customOverlay).to.exist;
+
+			expect(await isOnTopLayer(customOverlay)).to.be.false;
+			expect(await isOnTopLayer(clickOverlay)).to.be.false;
+
+			let opened = oneEvent(customOverlay, "sp-opened");
+
+			openOverlays.push(
+				await Overlay.open(customOverlay, {
+					trigger: button,
+					type: "auto",
+					placement: "top",
+					offset: 10,
+				}),
+			);
+			button.insertAdjacentElement(
+				"afterend",
+				openOverlays.at(-1) as HTMLElement,
+			);
+			await opened;
+			expect(await isOnTopLayer(customOverlay)).to.be.true;
+
+			opened = oneEvent(clickOverlay, "sp-opened");
+			openOverlays.push(
+				await Overlay.open(clickOverlay, {
+					trigger: button,
+					type: "auto",
+					placement: "bottom",
+					offset: 10,
+				}),
+			);
+			button.insertAdjacentElement(
+				"afterend",
+				openOverlays.at(-1) as HTMLElement,
+			);
+			await opened;
+			expect(await isOnTopLayer(clickOverlay), "click content open").to.be.true;
+		});
+	});
+
+	it("closes via events", async () => {
+		const test = await fixture(html`
+			

+				
+					 Some Content for the Dialog. 
+				
+			

+		`);
+
+		const el = test.querySelector("sp-popover") as Popover;
+		const dialog = el.querySelector("sp-dialog") as Dialog;
+
+		const opened = oneEvent(el, "sp-opened");
+
+		openOverlays.push(
+			await Overlay.open(el, {
+				trigger: test,
+				type: "auto",
+				placement: "bottom",
+				offset: 10,
+			}),
+		);
+		test.insertAdjacentElement("afterend", openOverlays.at(-1) as HTMLElement);
+		await opened;
+		expect(await isInteractive(el)).to.be.true;
+
+		const closed = oneEvent(el, "sp-closed");
+
+		dialog.close();
+		await closed;
+		expect(await isInteractive(el)).to.be.false;
+	});
+
+	it("positions with a VirtualTrigger", async () => {
+		const test = await fixture(html`
+			

+				
+					 Some Content for the Dialog. 
+				
+			

+		`);
+
+		const el = test.querySelector("sp-popover") as Popover;
+		const trigger = new VirtualTrigger(100, 100);
+
+		const opened = oneEvent(el, "sp-opened");
+
+		openOverlays.push(
+			await Overlay.open(el, {
+				trigger,
+				type: "auto",
+				placement: "right",
+				offset: 10,
+			}),
+		);
+		test.insertAdjacentElement("afterend", openOverlays.at(-1) as HTMLElement);
+		await opened;
+		expect(await isInteractive(el)).to.be.true;
+
+		const initial = el.getBoundingClientRect();
+
+		trigger.updateBoundingClientRect(500, 500);
+		await nextFrame();
+		await nextFrame();
+		const final = el.getBoundingClientRect();
+
+		expect(initial.x).to.not.equal(8);
+		expect(initial.y).to.not.equal(8);
+		expect(initial.x).to.not.equal(final.x);
+		expect(initial.y).to.not.equal(final.y);
+	});
+
+	it("closes an inline overlay when tabbing past the content", async () => {
+		const el = await fixture(html`
+			

+				Trigger
+				
+					
+				
+				
+			

+		`);
+
+		const trigger = el.querySelector(".trigger") as HTMLElement;
+		const content = el.querySelector(".content") as HTMLElement;
+		const input = el.querySelector("input") as HTMLInputElement;
+		const after = el.querySelector("#after") as HTMLAnchorElement;
+
+		const opened = oneEvent(content, "sp-opened");
+
+		openOverlays.push(
+			await Overlay.open(content, {
+				trigger,
+				type: "auto",
+				receivesFocus: "auto",
+			}),
+		);
+		trigger.insertAdjacentElement(
+			"afterend",
+			openOverlays.at(-1) as HTMLElement,
+		);
+		await opened;
+
+		expect(await isInteractive(content)).to.be.true;
+		expect(document.activeElement).to.equal(input);
+
+		const closed = oneEvent(content, "sp-closed");
+
+		await sendKeys({
+			press: "Shift+Tab",
+		});
+		await closed;
+
+		expect(document.activeElement).to.equal(trigger);
+
+		await sendKeys({
+			press: "Tab",
+		});
+		expect(document.activeElement).to.equal(after);
+		expect(await isInteractive(content)).to.be.false;
+	});
+
+	it("closes an inline overlay when tabbing before the trigger", async () => {
+		const el = await fixture(html`
+			

+				
+				Trigger
+				

+					
+				

+			

+		`);
+
+		const trigger = el.querySelector(".trigger") as HTMLElement;
+		const content = el.querySelector(".content") as HTMLElement;
+		const input = el.querySelector(".content input") as HTMLInputElement;
+		const before = el.querySelector("#before") as HTMLAnchorElement;
+
+		const open = oneEvent(trigger, "sp-opened");
+
+		openOverlays.push(
+			await Overlay.open(content, {
+				trigger,
+				type: "auto",
+			}),
+		);
+		trigger.insertAdjacentElement(
+			"afterend",
+			openOverlays.at(-1) as HTMLElement,
+		);
+		await open;
+
+		expect(document.activeElement).to.equal(input);
+
+		await sendKeys({
+			press: "Shift+Tab",
+		});
+
+		expect(document.activeElement).to.equal(trigger);
+
+		await sendKeys({
+			press: "Shift+Tab",
+		});
+
+		expect(document.activeElement).to.equal(before);
+	});
+
+	it("opens detached content", async () => {
+		const textContent = "This is a detached element that has been overlaid";
+		const el = await fixture(html`
+			
+		`);
+
+		const content = document.createElement("sp-popover");
+
+		content.textContent = textContent;
+
+		const opened = oneEvent(content, "sp-opened");
+		const overlay = await Overlay.open(content, {
+			trigger: el,
+			type: "auto",
+			placement: "bottom",
+		});
+
+		el.insertAdjacentElement("afterend", overlay);
+		await opened;
+
+		expect(await isInteractive(content)).to.be.true;
+
+		const closed = oneEvent(content, "sp-closed");
+
+		overlay.open = false;
+		await closed;
+
+		expect(await isInteractive(content)).to.be.false;
+
+		content.remove();
+	});
 });
 describe('Overlay - type="modal"', () => {
-    describe('handle multiple separate `contextmenu` events', async () => {
-        let width = 0;
-        let height = 0;
-        let firstMenu: Popover;
-        let firstRect: DOMRect;
-        let secondMenu: Popover;
-        let secondRect: DOMRect;
-
-        before(async () => {
-            render(
-                html`
-                    
-                        ${virtualElement({
-                            ...virtualElement.args,
-                            offset: 6,
-                        })}
-                    
-                `,
-                document.body
-            );
-
-            width = window.innerWidth;
-            height = window.innerHeight;
-        });
-        after(() => {
-            document.querySelector('sp-theme')?.remove();
-        });
-        it('opens the first "contextmenu" overlay', async () => {
-            const opened = oneEvent(document, 'sp-opened');
-
-            // Right click to open "context menu" overlay.
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [width / 2 + 50, height / 2],
-                    },
-                    {
-                        type: 'click',
-                        options: {
-                            button: 'right',
-                        },
-                        position: [width / 2 + 50, height / 2],
-                    },
-                ],
-            });
-            await opened;
-            firstMenu = document.querySelector('sp-popover') as Popover;
-            expect(firstMenu.textContent).to.include('Menu source: end');
-            firstRect = firstMenu.getBoundingClientRect();
-            expect(firstMenu).to.not.be.null;
-        });
-        it('closes the first "contextmenu" when opening a second', async () => {
-            const closed = oneEvent(document, 'sp-closed');
-            const opened = oneEvent(document, 'sp-opened');
-            /**
-             * Right click out of the "context menu" overlay to both close
-             * the first overlay and have the event passed to the surfacing page
-             * in order to open a subsequent "context menu" overlay.
-             *
-             * Using `sendMouse` here triggers the light dismiss for some reason while
-             * manual interacting in this way does not...
-             */
-            const trigger = document.querySelector(
-                'start-end-contextmenu'
-            ) as HTMLElement;
-
-            trigger.shadowRoot?.querySelector('#start')?.dispatchEvent(
-                new Event('contextmenu', {
-                    composed: true,
-                })
-            );
-            await nextFrame();
-            trigger.shadowRoot?.querySelector('#start')?.dispatchEvent(
-                new Event('pointerup', {
-                    composed: true,
-                    bubbles: true,
-                })
-            );
-            await closed;
-            await opened;
-            secondMenu = document.querySelector('sp-popover') as Popover;
-            expect(secondMenu.textContent).to.include('Menu source: start');
-            secondRect = secondMenu.getBoundingClientRect();
-            expect(secondMenu).to.not.be.null;
-        });
-        it('closes the second "contextmenu" when clicking away', async () => {
-            const closed = oneEvent(document, 'sp-closed');
-
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [width - width / 8, height - height / 8],
-                    },
-                ],
-            });
-            await closed;
-            expect(firstRect.top).to.not.equal(secondRect.top);
-            expect(firstRect.left).to.not.equal(secondRect.left);
-        });
-    });
-
-    it('does not open content off of the viewport', async () => {
-        before(async () => {
-            await setViewport({ width: 360, height: 640 });
-            // Allow viewport update to propagate.
-            await nextFrame();
-        });
-        after(async () => {
-            await setViewport({ width: 800, height: 600 });
-            // Allow viewport update to propagate.
-            await nextFrame();
-        });
-
-        await fixture(html`
-            ${virtualElement({
-                ...virtualElement.args,
-                offset: 6,
-            })}
-        `);
-
-        const opened = oneEvent(document, 'sp-opened');
-
-        // Right click to open "context menu" overlay.
-        sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [270, 10],
-                },
-                {
-                    type: 'click',
-                    options: {
-                        button: 'right',
-                    },
-                    position: [270, 10],
-                },
-            ],
-        });
-        await opened;
-
-        const firstMenu = document.querySelector('sp-menu') as Menu;
-
-        expect(firstMenu).to.not.be.null;
-        expect(await isInteractive(firstMenu)).to.be.true;
-
-        const closed = oneEvent(document, 'sp-closed');
-
-        sendKeys({
-            press: 'Escape',
-        });
-        await closed;
-
-        expect(await isInteractive(firstMenu)).to.be.false;
-    });
-
-    it('opens children in the modal stack through shadow roots', async () => {
-        const el = await fixture(definedOverlayElement());
-        const trigger = el.querySelector(
-            '[slot="trigger"]'
-        ) as HTMLButtonElement;
-        let open = oneEvent(el, 'sp-opened');
-
-        trigger.click();
-        await open;
-        expect(el.open).to.equal('click');
-        const content = document.querySelector(
-            'popover-content'
-        ) as PopoverContent;
-
-        open = oneEvent(content, 'sp-opened');
-        content.button.click();
-        await open;
-        expect(content.trigger.open).to.equal('click');
-        let close = oneEvent(content, 'sp-closed');
-
-        content.trigger.removeAttribute('open');
-        await close;
-        expect(content.trigger.open).to.be.null;
-        close = oneEvent(el, 'sp-closed');
-        el.removeAttribute('open');
-        await close;
-        expect(el.open).to.be.null;
-    });
+	describe("handle multiple separate `contextmenu` events", async () => {
+		let width = 0;
+		let height = 0;
+		let firstMenu: Popover;
+		let firstRect: DOMRect;
+		let secondMenu: Popover;
+		let secondRect: DOMRect;
+
+		before(async () => {
+			render(
+				html`
+					
+						${virtualElement({
+							...virtualElement.args,
+							offset: 6,
+						})}
+					
+				`,
+				document.body,
+			);
+
+			width = window.innerWidth;
+			height = window.innerHeight;
+		});
+		after(() => {
+			document.querySelector("sp-theme")?.remove();
+		});
+		it('opens the first "contextmenu" overlay', async () => {
+			const opened = oneEvent(document, "sp-opened");
+
+			// Right click to open "context menu" overlay.
+			await sendMouse({
+				steps: [
+					{
+						type: "move",
+						position: [width / 2 + 50, height / 2],
+					},
+					{
+						type: "click",
+						options: {
+							button: "right",
+						},
+						position: [width / 2 + 50, height / 2],
+					},
+				],
+			});
+			await opened;
+			firstMenu = document.querySelector("sp-popover") as Popover;
+			expect(firstMenu.textContent).to.include("Menu source: end");
+			firstRect = firstMenu.getBoundingClientRect();
+			expect(firstMenu).to.not.be.null;
+		});
+		it('closes the first "contextmenu" when opening a second', async () => {
+			const closed = oneEvent(document, "sp-closed");
+			const opened = oneEvent(document, "sp-opened");
+			/**
+			 * Right click out of the "context menu" overlay to both close
+			 * the first overlay and have the event passed to the surfacing page
+			 * in order to open a subsequent "context menu" overlay.
+			 *
+			 * Using `sendMouse` here triggers the light dismiss for some reason while
+			 * manual interacting in this way does not...
+			 */
+			const trigger = document.querySelector(
+				"start-end-contextmenu",
+			) as HTMLElement;
+
+			trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
+				new Event("contextmenu", {
+					composed: true,
+				}),
+			);
+			await nextFrame();
+			trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
+				new Event("pointerup", {
+					composed: true,
+					bubbles: true,
+				}),
+			);
+			await closed;
+			await opened;
+			secondMenu = document.querySelector("sp-popover") as Popover;
+			expect(secondMenu.textContent).to.include("Menu source: start");
+			secondRect = secondMenu.getBoundingClientRect();
+			expect(secondMenu).to.not.be.null;
+		});
+		it('closes the second "contextmenu" when clicking away', async () => {
+			const closed = oneEvent(document, "sp-closed");
+
+			sendMouse({
+				steps: [
+					{
+						type: "click",
+						position: [width - width / 8, height - height / 8],
+					},
+				],
+			});
+			await closed;
+			expect(firstRect.top).to.not.equal(secondRect.top);
+			expect(firstRect.left).to.not.equal(secondRect.left);
+		});
+	});
+
+	it("does not open content off of the viewport", async () => {
+		before(async () => {
+			await setViewport({ width: 360, height: 640 });
+			// Allow viewport update to propagate.
+			await nextFrame();
+		});
+		after(async () => {
+			await setViewport({ width: 800, height: 600 });
+			// Allow viewport update to propagate.
+			await nextFrame();
+		});
+
+		await fixture(html`
+			${virtualElement({
+				...virtualElement.args,
+				offset: 6,
+			})}
+		`);
+
+		const opened = oneEvent(document, "sp-opened");
+
+		// Right click to open "context menu" overlay.
+		sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: [270, 10],
+				},
+				{
+					type: "click",
+					options: {
+						button: "right",
+					},
+					position: [270, 10],
+				},
+			],
+		});
+		await opened;
+
+		const firstMenu = document.querySelector("sp-menu") as Menu;
+
+		expect(firstMenu).to.not.be.null;
+		expect(await isInteractive(firstMenu)).to.be.true;
+
+		const closed = oneEvent(document, "sp-closed");
+
+		sendKeys({
+			press: "Escape",
+		});
+		await closed;
+
+		expect(await isInteractive(firstMenu)).to.be.false;
+	});
+
+	it("opens children in the modal stack through shadow roots", async () => {
+		const el = await fixture(definedOverlayElement());
+		const trigger = el.querySelector('[slot="trigger"]') as HTMLButtonElement;
+		let open = oneEvent(el, "sp-opened");
+
+		trigger.click();
+		await open;
+		expect(el.open).to.equal("click");
+		const content = document.querySelector("popover-content") as PopoverContent;
+
+		open = oneEvent(content, "sp-opened");
+		content.button.click();
+		await open;
+		expect(content.trigger.open).to.equal("click");
+		let close = oneEvent(content, "sp-closed");
+
+		content.trigger.removeAttribute("open");
+		await close;
+		expect(content.trigger.open).to.be.null;
+		close = oneEvent(el, "sp-closed");
+		el.removeAttribute("open");
+		await close;
+		expect(el.open).to.be.null;
+	});
 });
-describe('Overlay - timing', () => {
-    it('manages multiple modals in a row without preventing them from closing', async () => {
-        const test = await fixture(html`
-            

-                
-                    Trigger 1
-                    
-                        
Hover contentent for "Trigger 1".

-                    
-                
-                
-                    Trigger 2
-                    
-                        
Click contentent for "Trigger 2".

-                    
-                    
-                        
Hover contentent for "Trigger 2".

-                    
-                
-            

-        `);
-
-        const overlayTrigger1 = test.querySelector('#test-1') as OverlayTrigger;
-        const overlayTrigger2 = test.querySelector('#test-2') as OverlayTrigger;
-        const trigger1 = overlayTrigger1.querySelector(
-            '[slot="trigger"]'
-        ) as HTMLButtonElement;
-        const trigger2 = overlayTrigger2.querySelector(
-            '[slot="trigger"]'
-        ) as HTMLButtonElement;
-
-        const boundingRectTrigger1 = trigger1.getBoundingClientRect();
-        const boundingRectTrigger2 = trigger2.getBoundingClientRect();
-        const trigger1Position: [number, number] = [
-            boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
-            boundingRectTrigger1.top + boundingRectTrigger1.height / 2,
-        ];
-        const outsideTriggers: [number, number] = [
-            boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
-            300,
-        ];
-        const trigger2Position: [number, number] = [
-            boundingRectTrigger2.left + boundingRectTrigger2.width / 2,
-            boundingRectTrigger2.top + boundingRectTrigger2.height / 4,
-        ];
-
-        // Move pointer over "Trigger 1", should _start_ to open "hover" content.
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: trigger1Position,
-                },
-            ],
-        });
-        await nextFrame();
-        await nextFrame();
-
-        // Move pointer out of "Trigger 1", should _start_ to close "hover" content.
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: outsideTriggers,
-                },
-            ],
-        });
-        await nextFrame();
-        await nextFrame();
-        // Move pointer over "Trigger 2", should _start_ to open "hover" content.
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: trigger2Position,
-                },
-            ],
-        });
-        await nextFrame();
-        await nextFrame();
-
-        const opened = oneEvent(trigger2, 'sp-opened');
-
-        // Click "Trigger 2", should _start_ to open "click" content and _start_ to close "hover" content.
-        await sendMouse({
-            steps: [
-                {
-                    type: 'click',
-                    position: trigger2Position,
-                },
-            ],
-        });
-        await opened;
-        await nextFrame();
-        await nextFrame();
-
-        // "click" content for "Trigger 2", _only_, open.
-        expect(overlayTrigger1.hasAttribute('open')).to.be.false;
-        expect(overlayTrigger2.hasAttribute('open')).to.be.true;
-        expect(overlayTrigger2.getAttribute('open')).to.equal('click');
-
-        const closed = oneEvent(overlayTrigger2, 'sp-closed');
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'click',
-                    position: outsideTriggers,
-                },
-            ],
-        });
-        await closed;
-
-        // Both overlays are closed.
-        // Neither trigger received "focus" because the pointer "clicked" away, redirecting focus to 
-        expect(overlayTrigger1.hasAttribute('open')).to.be.false;
-        expect(overlayTrigger2.hasAttribute('open')).to.be.false;
-    });
+describe("Overlay - timing", () => {
+	it("manages multiple modals in a row without preventing them from closing", async () => {
+		const test = await fixture(html`
+			

+				
+					Trigger 1
+					
+						
Hover contentent for "Trigger 1".

+					
+				
+				
+					Trigger 2
+					
+						
Click contentent for "Trigger 2".

+					
+					
+						
Hover contentent for "Trigger 2".

+					
+				
+			

+		`);
+
+		const overlayTrigger1 = test.querySelector("#test-1") as OverlayTrigger;
+		const overlayTrigger2 = test.querySelector("#test-2") as OverlayTrigger;
+		const trigger1 = overlayTrigger1.querySelector(
+			'[slot="trigger"]',
+		) as HTMLButtonElement;
+		const trigger2 = overlayTrigger2.querySelector(
+			'[slot="trigger"]',
+		) as HTMLButtonElement;
+
+		const boundingRectTrigger1 = trigger1.getBoundingClientRect();
+		const boundingRectTrigger2 = trigger2.getBoundingClientRect();
+		const trigger1Position: [number, number] = [
+			boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
+			boundingRectTrigger1.top + boundingRectTrigger1.height / 2,
+		];
+		const outsideTriggers: [number, number] = [
+			boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
+			300,
+		];
+		const trigger2Position: [number, number] = [
+			boundingRectTrigger2.left + boundingRectTrigger2.width / 2,
+			boundingRectTrigger2.top + boundingRectTrigger2.height / 4,
+		];
+
+		// Move pointer over "Trigger 1", should _start_ to open "hover" content.
+		await sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: trigger1Position,
+				},
+			],
+		});
+		await nextFrame();
+		await nextFrame();
+
+		// Move pointer out of "Trigger 1", should _start_ to close "hover" content.
+		await sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: outsideTriggers,
+				},
+			],
+		});
+		await nextFrame();
+		await nextFrame();
+		// Move pointer over "Trigger 2", should _start_ to open "hover" content.
+		await sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: trigger2Position,
+				},
+			],
+		});
+		await nextFrame();
+		await nextFrame();
+
+		const opened = oneEvent(trigger2, "sp-opened");
+
+		// Click "Trigger 2", should _start_ to open "click" content and _start_ to close "hover" content.
+		await sendMouse({
+			steps: [
+				{
+					type: "click",
+					position: trigger2Position,
+				},
+			],
+		});
+		await opened;
+		await nextFrame();
+		await nextFrame();
+
+		// "click" content for "Trigger 2", _only_, open.
+		expect(overlayTrigger1.hasAttribute("open")).to.be.false;
+		expect(overlayTrigger2.hasAttribute("open")).to.be.true;
+		expect(overlayTrigger2.getAttribute("open")).to.equal("click");
+
+		const closed = oneEvent(overlayTrigger2, "sp-closed");
+
+		await sendMouse({
+			steps: [
+				{
+					type: "click",
+					position: outsideTriggers,
+				},
+			],
+		});
+		await closed;
+
+		// Both overlays are closed.
+		// Neither trigger received "focus" because the pointer "clicked" away, redirecting focus to 
+		expect(overlayTrigger1.hasAttribute("open")).to.be.false;
+		expect(overlayTrigger2.hasAttribute("open")).to.be.false;
+	});
 });
diff --git a/packages/picker-button/test/picker-button.test.ts b/packages/picker-button/test/picker-button.test.ts
index 77270e43b8..b2c7adf5b0 100644
--- a/packages/picker-button/test/picker-button.test.ts
+++ b/packages/picker-button/test/picker-button.test.ts
@@ -9,43 +9,36 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import "@spectrum-web-components/picker-button/sp-picker-button.js";
+import { PickerButton } from "../";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 
-import '@spectrum-web-components/picker-button/sp-picker-button.js';
-import { PickerButton } from '..';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+describe("PickerButton", () => {
+	testForLitDevWarnings(
+		async () =>
+			await fixture(html`
+				
+			`),
+	);
+	it("loads default picker-button accessibly", async () => {
+		const el = await fixture(html`
+			
+		`);
 
-describe('PickerButton', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(
-                html`
-                    
-                `
-            )
-    );
-    it('loads default picker-button accessibly', async () => {
-        const el = await fixture(
-            html`
-                
-            `
-        );
+		await elementUpdated(el);
 
-        await elementUpdated(el);
+		await expect(el).to.be.accessible();
+	});
+	it("loads labeled picker-button accessibly", async () => {
+		const el = await fixture(html`
+			
+				All
+			
+		`);
 
-        await expect(el).to.be.accessible();
-    });
-    it('loads labeled picker-button accessibly', async () => {
-        const el = await fixture(
-            html`
-                
-                    All
-                
-            `
-        );
+		await elementUpdated(el);
 
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
+		await expect(el).to.be.accessible();
+	});
 });
diff --git a/packages/picker/stories/picker-pending.stories.ts b/packages/picker/stories/picker-pending.stories.ts
index 710a8a8b2b..be6de79d0c 100644
--- a/packages/picker/stories/picker-pending.stories.ts
+++ b/packages/picker/stories/picker-pending.stories.ts
@@ -10,27 +10,27 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { TemplateResult } from '@spectrum-web-components/base';
-import { argTypes } from './args';
-import { StoryArgs, Template } from './template';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { argTypes } from "./args.js";
+import { StoryArgs, Template } from "./template.js";
 
 export default {
-    title: 'Picker/Pending',
-    component: 'sp-picker',
-    argTypes,
-    args: {
-        pending: true,
-    },
+	title: "Picker/Pending",
+	component: "sp-picker",
+	argTypes,
+	args: {
+		pending: true,
+	},
 };
 
 export const S = (args: StoryArgs): TemplateResult =>
-    Template({ ...args, size: 's' });
+	Template({ ...args, size: "s" });
 
 export const M = (args: StoryArgs): TemplateResult =>
-    Template({ ...args, size: 'm' });
+	Template({ ...args, size: "m" });
 
 export const L = (args: StoryArgs): TemplateResult =>
-    Template({ ...args, size: 'l' });
+	Template({ ...args, size: "l" });
 
 export const XL = (args: StoryArgs): TemplateResult =>
-    Template({ ...args, size: 'xl' });
+	Template({ ...args, size: "xl" });
diff --git a/packages/split-view/src/SplitView.ts b/packages/split-view/src/SplitView.ts
index b266ecd669..bc0f5d3512 100644
--- a/packages/split-view/src/SplitView.ts
+++ b/packages/split-view/src/SplitView.ts
@@ -11,29 +11,29 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    LitElement,
-    nothing,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+	CSSResultArray,
+	html,
+	LitElement,
+	nothing,
+	PropertyValues,
+	SpectrumElement,
+	TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    classMap,
-    ifDefined,
-} from '@spectrum-web-components/base/src/directives.js';
+	classMap,
+	ifDefined,
+} from "@spectrum-web-components/base/src/directives.js";
 import {
-    property,
-    query,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
-import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
+	property,
+	query,
+	state,
+} from "@spectrum-web-components/base/src/decorators.js";
+import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js";
+import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
 
-import { WithSWCResizeObserver } from './types';
+import { WithSWCResizeObserver } from "./types.js";
 
-import styles from './split-view.css.js';
+import styles from "./split-view.css.js";
 
 const DEFAULT_MAX_SIZE = 3840;
 
@@ -56,574 +56,548 @@ const COLLAPSE_THREASHOLD = 50;
  *
  */
 export class SplitView extends SpectrumElement {
-    /**
-     * Returns the styles to be applied to the component.
-     */
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    /**
-     * The controlled element within the split view.
-     */
-    @state()
-    public controlledEl?: HTMLElement;
-
-    /**
-     * Indicates if the split view is vertical.
-     */
-    @property({ type: Boolean, reflect: true })
-    public vertical = false;
-
-    /**
-     * Indicates if the split view is resizable.
-     */
-    @property({ type: Boolean, reflect: true })
-    public resizable = false;
-
-    /**
-     * Indicates if the split view is collapsible.
-     */
-    @property({ type: Boolean, reflect: true })
-    public collapsible = false;
-
-    /** The minimum size of the primary pane */
-    @property({ type: Number, attribute: 'primary-min' })
-    public primaryMin = 0;
-
-    /**
-     * The maximum size of the primary pane
-     *
-     * The default value is 3840.
-     */
-    @property({ type: Number, attribute: 'primary-max' })
-    public primaryMax = DEFAULT_MAX_SIZE;
-
-    /**
-     * The start size of the primary pane, can be a real pixel number|string, percentage or "auto"
-     * For example: "100", "120px", "75%" or "auto" are valid values
-     *
-     * @attribute
-     */
-    @property({ type: String, attribute: 'primary-size' })
-    public primarySize?: string;
-
-    /** The minimum size of the secondary pane */
-    @property({ type: Number, attribute: 'secondary-min' })
-    public secondaryMin = 0;
-
-    /** The maximum size of the secondary pane */
-    @property({ type: Number, attribute: 'secondary-max' })
-    public secondaryMax = DEFAULT_MAX_SIZE;
-
-    /** The current splitter position of split-view */
-    @property({ type: Number, reflect: true, attribute: 'splitter-pos' })
-    public splitterPos?: number;
-
-    /** The current size of first pane of split-view */
-    @property({ type: String, attribute: false })
-    private firstPaneSize = 'auto';
-
-    /**
-     * The label for the aria-label in the split view component.
-     */
-    @property()
-    public label?: string;
-
-    /**
-     * Indicates if there are enough children in the split view.
-     */
-    @property({ type: Boolean, attribute: false })
-    private enoughChildren = false;
-
-    /**
-     * The total size of the split view container, either its width or height depending on the orientation.
-     */
-    @property({ type: Number })
-    private viewSize = 0;
-
-    /**
-     * The slot element for the panes.
-     */
-    @query('slot')
-    private paneSlot!: HTMLSlotElement;
-
-    /**
-     * The splitter element.
-     */
-    @query('#splitter')
-    private splitter!: HTMLDivElement;
-
-    /**
-     * The offset position of the splitter.
-     */
-    private offset = 0;
-
-    /**
-     * The minimum position of the splitter.
-     */
-    private minPos = 0;
-
-    /**
-     * The maximum position of the splitter.
-     */
-    private maxPos = DEFAULT_MAX_SIZE;
-
-    /**
-     * The ResizeObserver instance used to observe changes in the element's size.
-     */
-    private observer?: WithSWCResizeObserver['ResizeObserver'];
-
-    /**
-     * The bounding rectangle of the element.
-     */
-    private rect?: DOMRect;
-
-    /**
-     * The cached size of the splitter.
-     */
-    private _splitterSize?: number;
-
-    public constructor() {
-        super();
-        const RO = (window as unknown as WithSWCResizeObserver).ResizeObserver;
-
-        if (RO) {
-            // Initialize a ResizeObserver to observe changes in the element's size
-            this.observer = new RO(() => {
-                this.rect = undefined;
-                this.updateMinMax();
-            });
-        }
-    }
-
-    /**
-     * Called when the element is connected to the document's DOM.
-     * Observes the element for resize events.
-     */
-    public override connectedCallback(): void {
-        super.connectedCallback();
-        this.observer?.observe(this);
-    }
-
-    /**
-     * Called when the element is disconnected from the document's DOM.
-     * Stops observing the element for resize events.
-     */
-    public override disconnectedCallback(): void {
-        this.observer?.unobserve(this);
-        super.disconnectedCallback();
-    }
-
-    /**
-     * @private
-     *
-     * Gets the size of the splitter.
-     * Calculates the size based on the computed style of the splitter element.
-     * Falls back to a default size if the splitter element is not available.
-     */
-    public get splitterSize(): number {
-        if (!this._splitterSize) {
-            this._splitterSize =
-                (this.splitter &&
-                    Math.round(
-                        parseFloat(
-                            window
-                                .getComputedStyle(this.splitter)
-                                .getPropertyValue(
-                                    this.vertical ? 'height' : 'width'
-                                )
-                        )
-                    )) ||
-                SPLITTERSIZE;
-        }
-
-        return this._splitterSize;
-    }
-
-    protected override render(): TemplateResult {
-        const splitterClasses = {
-            'is-resized-start': this.splitterPos === this.minPos,
-            'is-resized-end': (this.splitterPos &&
-                this.splitterPos > this.splitterSize &&
-                this.splitterPos === this.maxPos) as boolean,
-            'is-collapsed-start': this.splitterPos === 0,
-            'is-collapsed-end': (this.splitterPos &&
-                this.splitterPos >=
-                    Math.max(
-                        this.splitterSize,
-                        this.viewSize - this.splitterSize
-                    )) as boolean,
-        };
-        const label = this.resizable
-            ? this.label || 'Resize the panels'
-            : undefined;
-
-        return html`
-            
-            ${this.enoughChildren
-                ? html`
-                      
-                  `
-                : nothing}
-        `;
-    }
-
-    private controlledElIDApplied = false;
-
-    /**
-     * Handles the slotchange event for the content slot.
-     * Updates the controlled element and its ID based on the assigned elements.
-     */
-    private onContentSlotChange(
-        event: Event & { target: HTMLSlotElement }
-    ): void {
-        if (this.controlledEl && this.controlledElIDApplied) {
-            this.controlledEl.removeAttribute('id');
-            this.controlledElIDApplied = false;
-        }
-
-        this.controlledEl = event.target.assignedElements()[0] as HTMLElement;
-
-        if (this.controlledEl && !this.controlledEl.id) {
-            this.controlledEl.id = `${this.tagName.toLowerCase()}-${randomID()}`;
-            this.controlledElIDApplied = true;
-        }
-
-        this.enoughChildren = this.children.length > 1;
-        this.checkResize();
-    }
-
-    /**
-     * Handles the pointerdown event on the splitter.
-     * Initiates the resizing process if the split view is resizable.
-     */
-    private onPointerdown(event: PointerEvent): void {
-        if (!this.resizable || (event.button && event.button !== 0)) {
-            event.preventDefault();
-
-            return;
-        }
-
-        this.splitter.setPointerCapture(event.pointerId);
-        this.offset = this.getOffset();
-    }
-
-    /**
-     * Handles the pointermove event on the splitter.
-     * Updates the position of the splitter based on the pointer movement.
-     */
-    private onPointermove(event: PointerEvent): void {
-        event.preventDefault();
-        let pos =
-            this.vertical || this.isLTR
-                ? this.getPosition(event) - this.offset
-                : this.offset - this.getPosition(event);
-
-        if (this.collapsible && pos < this.minPos - COLLAPSE_THREASHOLD) {
-            pos = 0;
-        }
-
-        if (this.collapsible && pos > this.maxPos + COLLAPSE_THREASHOLD) {
-            pos = this.viewSize - this.splitterSize;
-        }
-
-        this.updatePosition(pos);
-    }
-
-    /**
-     * Handles the pointerup event on the splitter.
-     * Releases the pointer capture.
-     */
-    private onPointerup(event: PointerEvent): void {
-        this.splitter.releasePointerCapture(event.pointerId);
-    }
-
-    /**
-     * Gets the offset position of the splitter.
-     * Calculates the offset based on the bounding rectangle of the element.
-     */
-    private getOffset(): number {
-        if (!this.rect) {
-            this.rect = this.getBoundingClientRect();
-        }
-
-        const offsetX = this.isLTR ? this.rect.left : this.rect.right;
-
-        return this.vertical ? this.rect.top : offsetX;
-    }
-
-    /**
-     * Gets the position of the pointer event.
-     * Returns the clientX or clientY value based on the orientation of the split view.
-     */
-    private getPosition(event: PointerEvent): number {
-        return this.vertical ? event.clientY : event.clientX;
-    }
-
-    /**
-     * Moves the splitter position based on the offset value.
-     */
-    private movePosition(event: KeyboardEvent, offset: number): void {
-        event.preventDefault();
-
-        if (this.splitterPos !== undefined) {
-            this.updatePosition(this.splitterPos + offset);
-        }
-    }
-
-    /**
-     * Handles the keydown event on the splitter.
-     * Moves the splitter position based on the arrow key pressed.
-     */
-    private onKeydown(event: KeyboardEvent): void {
-        if (!this.resizable) {
-            return;
-        }
-
-        let direction = 0;
-        const isLTRorVertical = this.isLTR || this.vertical;
-
-        switch (event.key) {
-            case 'Home':
-                event.preventDefault();
-                this.updatePosition(this.collapsible ? 0 : this.minPos);
-
-                return;
-            case 'End':
-                event.preventDefault();
-                this.updatePosition(
-                    this.collapsible
-                        ? this.viewSize - this.splitterSize
-                        : this.maxPos
-                );
-
-                return;
-            case 'ArrowLeft':
-                direction = isLTRorVertical ? -1 : 1;
-                break;
-            case 'ArrowRight':
-                direction = isLTRorVertical ? 1 : -1;
-                break;
-            case 'ArrowUp':
-                direction = this.vertical ? -1 : 1;
-                break;
-            case 'ArrowDown':
-                direction = this.vertical ? 1 : -1;
-                break;
-            case 'PageUp':
-                direction = this.vertical ? -1 : 1;
-                break;
-            case 'PageDown':
-                direction = this.vertical ? 1 : -1;
-                break;
-        }
-
-        if (direction !== 0) {
-            const moveBy = event.key.startsWith('Page')
-                ? PAGEUPDOWN_KEY_CHANGE_VALUE
-                : ARROW_KEY_CHANGE_VALUE;
-
-            this.movePosition(event, moveBy * direction);
-        }
-    }
-
-    /**
-     * Checks if the split view has enough children to render.
-     * Updates the minimum and maximum position of the splitter.
-     * Updates the position of the splitter based on the primary size.
-     */
-    private async checkResize(): Promise {
-        if (!this.enoughChildren) {
-            return;
-        }
-
-        this.updateMinMax();
-
-        if (this.splitterPos === undefined) {
-            const startPos = await this.calcStartPos();
-
-            this.updatePosition(startPos);
-        }
-    }
-
-    /**
-     * Updates the minimum and maximum position of the splitter.
-     */
-    private updateMinMax(): void {
-        this.viewSize = this.vertical ? this.offsetHeight : this.offsetWidth;
-
-        this.minPos = Math.max(
-            this.primaryMin,
-            this.viewSize - this.secondaryMax
-        );
-
-        this.maxPos = Math.min(
-            this.primaryMax,
-            this.viewSize - Math.max(this.secondaryMin, this.splitterSize)
-        );
-    }
-
-    /**
-     * Updates the position of the splitter based on the given value.
-     * Limits the position based on the minimum and maximum position.
-     * Dispatches a change event to announce the new position of the splitter.
-     */
-    private updatePosition(x: number): void {
-        let pos = this.getLimitedPosition(x);
-
-        if (this.collapsible && x <= 0) {
-            pos = 0;
-        }
-
-        if (
-            this.collapsible &&
-            x > this.maxPos &&
-            x >= this.viewSize - this.splitterSize
-        ) {
-            pos = this.viewSize - this.splitterSize;
-        }
-
-        if (pos !== this.splitterPos) {
-            this.splitterPos = pos;
-            this.dispatchChangeEvent();
-        }
-    }
-
-    /**
-     * Get the limited position based on the minimum and maximum position.
-     * Returns the input value if it is within the limits.
-     */
-    private getLimitedPosition(input: number): number {
-        if (input <= this.minPos) {
-            return this.minPos;
-        }
-
-        if (input >= this.maxPos) {
-            return this.maxPos;
-        }
-
-        return Math.max(this.minPos, Math.min(this.maxPos, input));
-    }
-
-    /**
-     * Calculates the start position of the splitter.
-     * Returns the primary size if it is defined.
-     * Returns the view size divided by 2 if the primary size is not defined.
-     * Returns the size of the first pane if the primary size is set to "auto".
-     * Returns the view size divided by 2 if the size of the first pane is not available.
-     */
-    private async calcStartPos(): Promise {
-        if (
-            this.primarySize !== undefined &&
-            /^\d+(px)?$/.test(this.primarySize)
-        ) {
-            return parseInt(this.primarySize, 10);
-        }
-
-        if (this.primarySize !== undefined && /^\d+%$/.test(this.primarySize)) {
-            return (parseInt(this.primarySize, 10) * this.viewSize) / 100;
-        }
-
-        if (this.primarySize === 'auto') {
-            this.firstPaneSize = 'auto';
-
-            const nodes = this.paneSlot.assignedNodes({ flatten: true });
-            const firstEl = nodes.find(
-                (node) => node instanceof HTMLElement
-            ) as LitElement;
-
-            if (typeof firstEl.updateComplete !== 'undefined') {
-                await firstEl.updateComplete;
-            }
-
-            if (firstEl) {
-                const size = window
-                    .getComputedStyle(firstEl)
-                    .getPropertyValue(this.vertical ? 'height' : 'width');
-                const size_i = parseFloat(size);
-
-                if (!isNaN(size_i)) {
-                    return this.getLimitedPosition(Math.ceil(size_i));
-                }
-            }
-        }
-
-        return this.viewSize / 2;
-    }
-
-    /**
-     * Fires a change event to announce the new position of the splitter.
-     */
-    private dispatchChangeEvent(): void {
-        const changeEvent = new Event('change', {
-            bubbles: true,
-            composed: true,
-        });
-
-        this.dispatchEvent(changeEvent);
-    }
-
-    /**
-     * Updates the position of the splitter based on the primary size.
-     * Updates the first pane size based on the splitter position.
-     */
-    protected override willUpdate(changed: PropertyValues): void {
-        if (!this.hasUpdated || changed.has('primarySize')) {
-            this.splitterPos = undefined;
-            this.checkResize();
-        }
-
-        if (
-            changed.has('splitterPos') &&
-            this.splitterPos !== undefined &&
-            this.enoughChildren
-        ) {
-            this.firstPaneSize = `${Math.round(this.splitterPos)}px`;
-        }
-    }
+	/**
+	 * Returns the styles to be applied to the component.
+	 */
+	public static override get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/**
+	 * The controlled element within the split view.
+	 */
+	@state()
+	public controlledEl?: HTMLElement;
+
+	/**
+	 * Indicates if the split view is vertical.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public vertical = false;
+
+	/**
+	 * Indicates if the split view is resizable.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public resizable = false;
+
+	/**
+	 * Indicates if the split view is collapsible.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public collapsible = false;
+
+	/** The minimum size of the primary pane */
+	@property({ type: Number, attribute: "primary-min" })
+	public primaryMin = 0;
+
+	/**
+	 * The maximum size of the primary pane
+	 *
+	 * The default value is 3840.
+	 */
+	@property({ type: Number, attribute: "primary-max" })
+	public primaryMax = DEFAULT_MAX_SIZE;
+
+	/**
+	 * The start size of the primary pane, can be a real pixel number|string, percentage or "auto"
+	 * For example: "100", "120px", "75%" or "auto" are valid values
+	 *
+	 * @attribute
+	 */
+	@property({ type: String, attribute: "primary-size" })
+	public primarySize?: string;
+
+	/** The minimum size of the secondary pane */
+	@property({ type: Number, attribute: "secondary-min" })
+	public secondaryMin = 0;
+
+	/** The maximum size of the secondary pane */
+	@property({ type: Number, attribute: "secondary-max" })
+	public secondaryMax = DEFAULT_MAX_SIZE;
+
+	/** The current splitter position of split-view */
+	@property({ type: Number, reflect: true, attribute: "splitter-pos" })
+	public splitterPos?: number;
+
+	/** The current size of first pane of split-view */
+	@property({ type: String, attribute: false })
+	private firstPaneSize = "auto";
+
+	/**
+	 * The label for the aria-label in the split view component.
+	 */
+	@property()
+	public label?: string;
+
+	/**
+	 * Indicates if there are enough children in the split view.
+	 */
+	@property({ type: Boolean, attribute: false })
+	private enoughChildren = false;
+
+	/**
+	 * The total size of the split view container, either its width or height depending on the orientation.
+	 */
+	@property({ type: Number })
+	private viewSize = 0;
+
+	/**
+	 * The slot element for the panes.
+	 */
+	@query("slot")
+	private paneSlot!: HTMLSlotElement;
+
+	/**
+	 * The splitter element.
+	 */
+	@query("#splitter")
+	private splitter!: HTMLDivElement;
+
+	/**
+	 * The offset position of the splitter.
+	 */
+	private offset = 0;
+
+	/**
+	 * The minimum position of the splitter.
+	 */
+	private minPos = 0;
+
+	/**
+	 * The maximum position of the splitter.
+	 */
+	private maxPos = DEFAULT_MAX_SIZE;
+
+	/**
+	 * The ResizeObserver instance used to observe changes in the element's size.
+	 */
+	private observer?: WithSWCResizeObserver["ResizeObserver"];
+
+	/**
+	 * The bounding rectangle of the element.
+	 */
+	private rect?: DOMRect;
+
+	/**
+	 * The cached size of the splitter.
+	 */
+	private _splitterSize?: number;
+
+	public constructor() {
+		super();
+		const RO = (window as unknown as WithSWCResizeObserver).ResizeObserver;
+
+		if (RO) {
+			// Initialize a ResizeObserver to observe changes in the element's size
+			this.observer = new RO(() => {
+				this.rect = undefined;
+				this.updateMinMax();
+			});
+		}
+	}
+
+	/**
+	 * Called when the element is connected to the document's DOM.
+	 * Observes the element for resize events.
+	 */
+	public override connectedCallback(): void {
+		super.connectedCallback();
+		this.observer?.observe(this);
+	}
+
+	/**
+	 * Called when the element is disconnected from the document's DOM.
+	 * Stops observing the element for resize events.
+	 */
+	public override disconnectedCallback(): void {
+		this.observer?.unobserve(this);
+		super.disconnectedCallback();
+	}
+
+	/**
+	 * @private
+	 *
+	 * Gets the size of the splitter.
+	 * Calculates the size based on the computed style of the splitter element.
+	 * Falls back to a default size if the splitter element is not available.
+	 */
+	public get splitterSize(): number {
+		if (!this._splitterSize) {
+			this._splitterSize =
+				(this.splitter &&
+					Math.round(
+						parseFloat(
+							window
+								.getComputedStyle(this.splitter)
+								.getPropertyValue(this.vertical ? "height" : "width"),
+						),
+					)) ||
+				SPLITTERSIZE;
+		}
+
+		return this._splitterSize;
+	}
+
+	protected override render(): TemplateResult {
+		const splitterClasses = {
+			"is-resized-start": this.splitterPos === this.minPos,
+			"is-resized-end": (this.splitterPos &&
+				this.splitterPos > this.splitterSize &&
+				this.splitterPos === this.maxPos) as boolean,
+			"is-collapsed-start": this.splitterPos === 0,
+			"is-collapsed-end": (this.splitterPos &&
+				this.splitterPos >=
+					Math.max(
+						this.splitterSize,
+						this.viewSize - this.splitterSize,
+					)) as boolean,
+		};
+		const label = this.resizable
+			? this.label || "Resize the panels"
+			: undefined;
+
+		return html`
+			
+			${this.enoughChildren
+				? html`
+						
+					`
+				: nothing}
+		`;
+	}
+
+	private controlledElIDApplied = false;
+
+	/**
+	 * Handles the slotchange event for the content slot.
+	 * Updates the controlled element and its ID based on the assigned elements.
+	 */
+	private onContentSlotChange(
+		event: Event & { target: HTMLSlotElement },
+	): void {
+		if (this.controlledEl && this.controlledElIDApplied) {
+			this.controlledEl.removeAttribute("id");
+			this.controlledElIDApplied = false;
+		}
+
+		this.controlledEl = event.target.assignedElements()[0] as HTMLElement;
+
+		if (this.controlledEl && !this.controlledEl.id) {
+			this.controlledEl.id = `${this.tagName.toLowerCase()}-${randomID()}`;
+			this.controlledElIDApplied = true;
+		}
+
+		this.enoughChildren = this.children.length > 1;
+		this.checkResize();
+	}
+
+	/**
+	 * Handles the pointerdown event on the splitter.
+	 * Initiates the resizing process if the split view is resizable.
+	 */
+	private onPointerdown(event: PointerEvent): void {
+		if (!this.resizable || (event.button && event.button !== 0)) {
+			event.preventDefault();
+
+			return;
+		}
+
+		this.splitter.setPointerCapture(event.pointerId);
+		this.offset = this.getOffset();
+	}
+
+	/**
+	 * Handles the pointermove event on the splitter.
+	 * Updates the position of the splitter based on the pointer movement.
+	 */
+	private onPointermove(event: PointerEvent): void {
+		event.preventDefault();
+		let pos =
+			this.vertical || this.isLTR
+				? this.getPosition(event) - this.offset
+				: this.offset - this.getPosition(event);
+
+		if (this.collapsible && pos < this.minPos - COLLAPSE_THREASHOLD) {
+			pos = 0;
+		}
+
+		if (this.collapsible && pos > this.maxPos + COLLAPSE_THREASHOLD) {
+			pos = this.viewSize - this.splitterSize;
+		}
+
+		this.updatePosition(pos);
+	}
+
+	/**
+	 * Handles the pointerup event on the splitter.
+	 * Releases the pointer capture.
+	 */
+	private onPointerup(event: PointerEvent): void {
+		this.splitter.releasePointerCapture(event.pointerId);
+	}
+
+	/**
+	 * Gets the offset position of the splitter.
+	 * Calculates the offset based on the bounding rectangle of the element.
+	 */
+	private getOffset(): number {
+		if (!this.rect) {
+			this.rect = this.getBoundingClientRect();
+		}
+
+		const offsetX = this.isLTR ? this.rect.left : this.rect.right;
+
+		return this.vertical ? this.rect.top : offsetX;
+	}
+
+	/**
+	 * Gets the position of the pointer event.
+	 * Returns the clientX or clientY value based on the orientation of the split view.
+	 */
+	private getPosition(event: PointerEvent): number {
+		return this.vertical ? event.clientY : event.clientX;
+	}
+
+	/**
+	 * Moves the splitter position based on the offset value.
+	 */
+	private movePosition(event: KeyboardEvent, offset: number): void {
+		event.preventDefault();
+
+		if (this.splitterPos !== undefined) {
+			this.updatePosition(this.splitterPos + offset);
+		}
+	}
+
+	/**
+	 * Handles the keydown event on the splitter.
+	 * Moves the splitter position based on the arrow key pressed.
+	 */
+	private onKeydown(event: KeyboardEvent): void {
+		if (!this.resizable) {
+			return;
+		}
+
+		let direction = 0;
+		const isLTRorVertical = this.isLTR || this.vertical;
+
+		switch (event.key) {
+			case "Home":
+				event.preventDefault();
+				this.updatePosition(this.collapsible ? 0 : this.minPos);
+
+				return;
+			case "End":
+				event.preventDefault();
+				this.updatePosition(
+					this.collapsible ? this.viewSize - this.splitterSize : this.maxPos,
+				);
+
+				return;
+			case "ArrowLeft":
+				direction = isLTRorVertical ? -1 : 1;
+				break;
+			case "ArrowRight":
+				direction = isLTRorVertical ? 1 : -1;
+				break;
+			case "ArrowUp":
+				direction = this.vertical ? -1 : 1;
+				break;
+			case "ArrowDown":
+				direction = this.vertical ? 1 : -1;
+				break;
+			case "PageUp":
+				direction = this.vertical ? -1 : 1;
+				break;
+			case "PageDown":
+				direction = this.vertical ? 1 : -1;
+				break;
+		}
+
+		if (direction !== 0) {
+			const moveBy = event.key.startsWith("Page")
+				? PAGEUPDOWN_KEY_CHANGE_VALUE
+				: ARROW_KEY_CHANGE_VALUE;
+
+			this.movePosition(event, moveBy * direction);
+		}
+	}
+
+	/**
+	 * Checks if the split view has enough children to render.
+	 * Updates the minimum and maximum position of the splitter.
+	 * Updates the position of the splitter based on the primary size.
+	 */
+	private async checkResize(): Promise {
+		if (!this.enoughChildren) {
+			return;
+		}
+
+		this.updateMinMax();
+
+		if (this.splitterPos === undefined) {
+			const startPos = await this.calcStartPos();
+
+			this.updatePosition(startPos);
+		}
+	}
+
+	/**
+	 * Updates the minimum and maximum position of the splitter.
+	 */
+	private updateMinMax(): void {
+		this.viewSize = this.vertical ? this.offsetHeight : this.offsetWidth;
+
+		this.minPos = Math.max(this.primaryMin, this.viewSize - this.secondaryMax);
+
+		this.maxPos = Math.min(
+			this.primaryMax,
+			this.viewSize - Math.max(this.secondaryMin, this.splitterSize),
+		);
+	}
+
+	/**
+	 * Updates the position of the splitter based on the given value.
+	 * Limits the position based on the minimum and maximum position.
+	 * Dispatches a change event to announce the new position of the splitter.
+	 */
+	private updatePosition(x: number): void {
+		let pos = this.getLimitedPosition(x);
+
+		if (this.collapsible && x <= 0) {
+			pos = 0;
+		}
+
+		if (
+			this.collapsible &&
+			x > this.maxPos &&
+			x >= this.viewSize - this.splitterSize
+		) {
+			pos = this.viewSize - this.splitterSize;
+		}
+
+		if (pos !== this.splitterPos) {
+			this.splitterPos = pos;
+			this.dispatchChangeEvent();
+		}
+	}
+
+	/**
+	 * Get the limited position based on the minimum and maximum position.
+	 * Returns the input value if it is within the limits.
+	 */
+	private getLimitedPosition(input: number): number {
+		if (input <= this.minPos) {
+			return this.minPos;
+		}
+
+		if (input >= this.maxPos) {
+			return this.maxPos;
+		}
+
+		return Math.max(this.minPos, Math.min(this.maxPos, input));
+	}
+
+	/**
+	 * Calculates the start position of the splitter.
+	 * Returns the primary size if it is defined.
+	 * Returns the view size divided by 2 if the primary size is not defined.
+	 * Returns the size of the first pane if the primary size is set to "auto".
+	 * Returns the view size divided by 2 if the size of the first pane is not available.
+	 */
+	private async calcStartPos(): Promise {
+		if (this.primarySize !== undefined && /^\d+(px)?$/.test(this.primarySize)) {
+			return parseInt(this.primarySize, 10);
+		}
+
+		if (this.primarySize !== undefined && /^\d+%$/.test(this.primarySize)) {
+			return (parseInt(this.primarySize, 10) * this.viewSize) / 100;
+		}
+
+		if (this.primarySize === "auto") {
+			this.firstPaneSize = "auto";
+
+			const nodes = this.paneSlot.assignedNodes({ flatten: true });
+			const firstEl = nodes.find(
+				(node) => node instanceof HTMLElement,
+			) as LitElement;
+
+			if (typeof firstEl.updateComplete !== "undefined") {
+				await firstEl.updateComplete;
+			}
+
+			if (firstEl) {
+				const size = window
+					.getComputedStyle(firstEl)
+					.getPropertyValue(this.vertical ? "height" : "width");
+				const size_i = parseFloat(size);
+
+				if (!isNaN(size_i)) {
+					return this.getLimitedPosition(Math.ceil(size_i));
+				}
+			}
+		}
+
+		return this.viewSize / 2;
+	}
+
+	/**
+	 * Fires a change event to announce the new position of the splitter.
+	 */
+	private dispatchChangeEvent(): void {
+		const changeEvent = new Event("change", {
+			bubbles: true,
+			composed: true,
+		});
+
+		this.dispatchEvent(changeEvent);
+	}
+
+	/**
+	 * Updates the position of the splitter based on the primary size.
+	 * Updates the first pane size based on the splitter position.
+	 */
+	protected override willUpdate(changed: PropertyValues): void {
+		if (!this.hasUpdated || changed.has("primarySize")) {
+			this.splitterPos = undefined;
+			this.checkResize();
+		}
+
+		if (
+			changed.has("splitterPos") &&
+			this.splitterPos !== undefined &&
+			this.enoughChildren
+		) {
+			this.firstPaneSize = `${Math.round(this.splitterPos)}px`;
+		}
+	}
 }
diff --git a/packages/swatch/stories/swatch-group.stories.ts b/packages/swatch/stories/swatch-group.stories.ts
index c162224310..6a14fe3c6d 100644
--- a/packages/swatch/stories/swatch-group.stories.ts
+++ b/packages/swatch/stories/swatch-group.stories.ts
@@ -9,197 +9,196 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
-import '@spectrum-web-components/swatch/sp-swatch-group.js';
-import '@spectrum-web-components/swatch/sp-swatch.js';
+import "@spectrum-web-components/swatch/sp-swatch-group.js";
+import "@spectrum-web-components/swatch/sp-swatch.js";
 import type {
-    SwatchBorder,
-    SwatchRounding,
-    SwatchShape,
-} from '../src/Swatch.js';
-import { SwatchGroup } from '../src/SwatchGroup.js';
+	SwatchBorder,
+	SwatchRounding,
+	SwatchShape,
+} from "../src/Swatch.js";
+import { SwatchGroup } from "../src/SwatchGroup.js";
 
 type Properties = {
-    border: SwatchBorder | 'normal';
-    density?: 'normal' | 'spacious' | 'compact';
-    rounding?: SwatchRounding | 'normal';
-    selected?: string[];
-    selects?: 'none' | 'single' | 'multiple';
-    shape?: SwatchShape | 'normal';
+	border: SwatchBorder | "normal";
+	density?: "normal" | "spacious" | "compact";
+	rounding?: SwatchRounding | "normal";
+	selected?: string[];
+	selects?: "none" | "single" | "multiple";
+	shape?: SwatchShape | "normal";
 };
 
 export default {
-    title: 'Swatch group',
-    component: 'sp-swatch-group',
-    args: {},
-    argTypes: {
-        border: {
-            table: {
-                defaultValue: { summary: '' },
-            },
-            options: ['normal', 'light', 'none'],
-        },
-        density: {
-            table: {
-                defaultValue: { summary: '' },
-            },
-            options: ['normal', 'compact', 'spacious'],
-        },
-        rounding: {
-            table: {
-                defaultValue: { summary: '' },
-            },
-            options: ['normal', 'none', 'full'],
-        },
-        selects: {
-            table: {
-                defaultValue: { summary: '' },
-            },
-            options: ['none', 'single', 'multiple'],
-        },
-        shape: {
-            table: {
-                defaultValue: { summary: '' },
-            },
-            options: ['normal', 'rectangle'],
-        },
-    },
-    decorators: [
-        (
-            story: () => TemplateResult,
-            {
-                args: { selected = [] },
-            }: {
-                args: {
-                    selected: string[];
-                };
-            }
-        ): TemplateResult => html`
-            
 {
-                    await 0;
+	title: "Swatch group",
+	component: "sp-swatch-group",
+	args: {},
+	argTypes: {
+		border: {
+			table: {
+				defaultValue: { summary: "" },
+			},
+			options: ["normal", "light", "none"],
+		},
+		density: {
+			table: {
+				defaultValue: { summary: "" },
+			},
+			options: ["normal", "compact", "spacious"],
+		},
+		rounding: {
+			table: {
+				defaultValue: { summary: "" },
+			},
+			options: ["normal", "none", "full"],
+		},
+		selects: {
+			table: {
+				defaultValue: { summary: "" },
+			},
+			options: ["none", "single", "multiple"],
+		},
+		shape: {
+			table: {
+				defaultValue: { summary: "" },
+			},
+			options: ["normal", "rectangle"],
+		},
+	},
+	decorators: [
+		(
+			story: () => TemplateResult,
+			{
+				args: { selected = [] },
+			}: {
+				args: {
+					selected: string[];
+				};
+			},
+		): TemplateResult => html`
+			
 {
+					await 0;
 
-                    if (event.defaultPrevented) return;
+					if (event.defaultPrevented) return;
 
-                    const next = event.target
-                        .nextElementSibling as HTMLDivElement;
+					const next = event.target.nextElementSibling as HTMLDivElement;
 
-                    next.textContent = `Selected: ${JSON.stringify(
-                        event.target.selected
-                    )}`;
-                }}
-            >
-                ${story()}
-                
Selected: ${JSON.stringify(selected)}

-            

-        `,
-    ],
+					next.textContent = `Selected: ${JSON.stringify(
+						event.target.selected,
+					)}`;
+				}}
+			>
+				${story()}
+				
Selected: ${JSON.stringify(selected)}

+			

+		`,
+	],
 };
 
 const colors = [
-    '--spectrum-gray-700',
-    '--spectrum-red-700',
-    '--spectrum-orange-700',
-    '--spectrum-yellow-700',
-    '--spectrum-chartreuse-700',
-    '--spectrum-celery-700',
-    '--spectrum-green-700',
-    '--spectrum-seafoam-700',
-    '--spectrum-blue-700',
-    '--spectrum-indigo-700',
-    '--spectrum-purple-700',
-    '--spectrum-fuchsia-700',
-    '--spectrum-magenta-700',
+	"--spectrum-gray-700",
+	"--spectrum-red-700",
+	"--spectrum-orange-700",
+	"--spectrum-yellow-700",
+	"--spectrum-chartreuse-700",
+	"--spectrum-celery-700",
+	"--spectrum-green-700",
+	"--spectrum-seafoam-700",
+	"--spectrum-blue-700",
+	"--spectrum-indigo-700",
+	"--spectrum-purple-700",
+	"--spectrum-fuchsia-700",
+	"--spectrum-magenta-700",
 ];
 
 const template = ({
-    border,
-    density,
-    rounding,
-    selects,
-    selected = [],
-    shape,
+	border,
+	density,
+	rounding,
+	selects,
+	selected = [],
+	shape,
 }: Properties): TemplateResult => {
-    const groupLabel = !!selects
-        ? selects === 'single'
-            ? 'Select a color'
-            : 'Selects color(s)'
-        : undefined;
+	const groupLabel = selects
+		? selects === "single"
+			? "Select a color"
+			: "Selects color(s)"
+		: undefined;
 
-    return html`
-        
-            ${colors.map(
-                (color) => html`
-                    
-                `
-            )}
-        
-    `;
+	return html`
+		
+			${colors.map(
+				(color) => html`
+					
+				`,
+			)}
+		
+	`;
 };
 
 export const Default = (args: Properties): TemplateResult => template(args);
 Default.args = {} as Properties;
 export const densityCompact = (args: Properties): TemplateResult =>
-    template(args);
+	template(args);
 densityCompact.args = {
-    density: 'compact',
+	density: "compact",
 } as Properties;
 export const densitySpacious = (args: Properties): TemplateResult =>
-    template(args);
+	template(args);
 densitySpacious.args = {
-    density: 'spacious',
+	density: "spacious",
 } as Properties;
 export const selectsSingle = (args: Properties): TemplateResult =>
-    template(args);
+	template(args);
 selectsSingle.args = {
-    selects: 'single',
-    selected: ['--spectrum-yellow-500'],
+	selects: "single",
+	selected: ["--spectrum-yellow-500"],
 } as Properties;
 export const selectsMultiple = (args: Properties): TemplateResult =>
-    template(args);
+	template(args);
 selectsMultiple.args = {
-    selects: 'multiple',
-    selected: [
-        '--spectrum-celery-500',
-        '--spectrum-red-500',
-        '--spectrum-purple-500',
-        '--spectrum-blue-500',
-    ],
+	selects: "multiple",
+	selected: [
+		"--spectrum-celery-500",
+		"--spectrum-red-500",
+		"--spectrum-purple-500",
+		"--spectrum-blue-500",
+	],
 } as Properties;
 export const borderLight = (args: Properties): TemplateResult => template(args);
 borderLight.args = {
-    border: 'light',
+	border: "light",
 } as Properties;
 export const borderNone = (args: Properties): TemplateResult => template(args);
 borderNone.args = {
-    border: 'none',
+	border: "none",
 } as Properties;
 export const roundingNone = (args: Properties): TemplateResult =>
-    template(args);
+	template(args);
 roundingNone.args = {
-    rounding: 'none',
+	rounding: "none",
 } as Properties;
 export const roundingFull = (args: Properties): TemplateResult =>
-    template(args);
+	template(args);
 roundingFull.args = {
-    rounding: 'full',
+	rounding: "full",
 } as Properties;
 export const shapeRectangle = (args: Properties): TemplateResult =>
-    template(args);
+	template(args);
 shapeRectangle.args = {
-    shape: 'rectangle',
+	shape: "rectangle",
 } as Properties;
diff --git a/packages/swatch/test/swatch-group.test.ts b/packages/swatch/test/swatch-group.test.ts
index 24554e1c5a..bf1bd49ac9 100644
--- a/packages/swatch/test/swatch-group.test.ts
+++ b/packages/swatch/test/swatch-group.test.ts
@@ -9,452 +9,452 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-
-import '@spectrum-web-components/swatch/sp-swatch.js';
-import { Swatch, SwatchGroup } from '../';
-import { Default } from '../stories/swatch-group.stories.js';
-import { spy, stub } from 'sinon';
-import { html } from '@spectrum-web-components/base';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('Swatch Group', () => {
-    let el: SwatchGroup;
-
-    beforeEach(async () => {
-        el = await fixture(Default(Default.args));
-
-        await elementUpdated(el);
-    });
-    testForLitDevWarnings(
-        async () => await fixture(Default(Default.args))
-    );
-    it('loads default swatch accessibly', async () => {
-        await expect(el).to.be.accessible();
-    });
-    it('forwards `border` to children', async () => {
-        el.border = 'light';
-        await elementUpdated(el);
-
-        ([...el.children] as Swatch[]).forEach((child) => {
-            expect(child.border).to.equal('light');
-        });
-    });
-    it('forwards `rounding` to children', async () => {
-        el.rounding = 'full';
-        await elementUpdated(el);
-
-        ([...el.children] as Swatch[]).forEach((child) => {
-            expect(child.rounding).to.equal('full');
-        });
-    });
-    it('forwards `size` to children', async () => {
-        el.size = 'xs';
-        await elementUpdated(el);
-
-        ([...el.children] as Swatch[]).forEach((child) => {
-            expect(child.size).to.equal('xs');
-        });
-    });
-    it('forwards `shape` to children', async () => {
-        el.shape = 'rectangle';
-        await elementUpdated(el);
-
-        ([...el.children] as Swatch[]).forEach((child) => {
-            expect(child.shape).to.equal('rectangle');
-        });
-    });
-    it('unsets forwarding', async () => {
-        el.border = 'light';
-        el.rounding = 'full';
-        el.size = 'xs';
-        el.shape = 'rectangle';
-        await elementUpdated(el);
-
-        ([...el.children] as Swatch[]).forEach((child) => {
-            expect(child.border).to.not.be.undefined;
-            expect(child.rounding).to.not.be.undefined;
-            expect(child.size).to.not.equal('m');
-            expect(child.shape).to.not.be.undefined;
-        });
-
-        el.border = undefined;
-        el.rounding = undefined;
-        el.removeAttribute('size');
-        el.shape = undefined;
-        await elementUpdated(el);
-
-        ([...el.children] as Swatch[]).forEach((child) => {
-            expect(child.border).to.equal(undefined);
-            expect(child.rounding).to.equal(undefined);
-            expect(child.size).to.equal('m');
-            expect(child.shape).to.equal(undefined);
-        });
-    });
-    it('does not dispatch `change` events without `selects` attribute', async () => {
-        const selectedChild = el.querySelector(
-            ':scope > sp-swatch:nth-child(4)'
-        ) as Swatch;
-
-        const changeSpy = spy();
-
-        el.addEventListener('change', () => changeSpy());
-
-        expect(el.selected).to.deep.equal([]);
-
-        selectedChild.click();
-
-        expect(changeSpy.called).to.be.false;
-        expect(el.selected).to.deep.equal([]);
-    });
-    it('dispatches `change` events as [selects="single"]', async () => {
-        el.selects = 'single';
-        const selectedChild = el.querySelector(
-            ':scope > sp-swatch:nth-child(4)'
-        ) as Swatch;
-
-        const changeSpy = spy();
-
-        el.addEventListener('change', () => changeSpy());
-
-        expect(el.selected).to.deep.equal([]);
-        expect(selectedChild.selected).to.be.false;
-
-        selectedChild.click();
-
-        expect(changeSpy.calledOnce).to.be.true;
-        expect(el.selected).to.deep.equal([selectedChild.value]);
-        expect(selectedChild.selected).to.be.true;
-
-        selectedChild.click();
-
-        expect(changeSpy.calledOnce).to.be.true;
-        expect(el.selected).to.deep.equal([selectedChild.value]);
-        expect(selectedChild.selected).to.be.true;
-    });
-    it('can have `change` events prevented', async () => {
-        el.selects = 'single';
-        const selectedChild = el.querySelector(
-            ':scope > sp-swatch:nth-child(4)'
-        ) as Swatch;
-
-        el.addEventListener('change', (event: Event) => event.preventDefault());
-
-        expect(el.selected).to.deep.equal([]);
-        expect(selectedChild.selected).to.be.false;
-
-        selectedChild.click();
-
-        expect(el.selected).to.deep.equal([]);
-        expect(selectedChild.selected).to.be.false;
-    });
-    it('dispatches `change` events as [selects="multiple"]', async () => {
-        el.selects = 'multiple';
-        const selectedChild0 = el.querySelector(
-            ':scope > sp-swatch:nth-child(1)'
-        ) as Swatch;
-        const selectedChild1 = el.querySelector(
-            ':scope > sp-swatch:nth-child(4)'
-        ) as Swatch;
-        const selectedChild2 = el.querySelector(
-            ':scope > sp-swatch:nth-child(6)'
-        ) as Swatch;
-
-        await elementUpdated(selectedChild0);
-
-        const changeSpy = spy();
-
-        el.addEventListener('change', () => changeSpy());
-
-        expect(el.selected).to.deep.equal([]);
-
-        selectedChild0.click();
-        selectedChild1.click();
-        selectedChild2.click();
-
-        expect(changeSpy.callCount).to.equal(3);
-        expect(el.selected).to.deep.equal([
-            selectedChild0.value,
-            selectedChild1.value,
-            selectedChild2.value,
-        ]);
-    });
-    it('filters `selected` when a selected Swatch is removed from the DOM', async () => {
-        el.selects = 'multiple';
-        const selectedChild0 = el.querySelector(
-            ':scope > sp-swatch:nth-child(1)'
-        ) as Swatch;
-        const selectedChild1 = el.querySelector(
-            ':scope > sp-swatch:nth-child(4)'
-        ) as Swatch;
-        const selectedChild2 = el.querySelector(
-            ':scope > sp-swatch:nth-child(6)'
-        ) as Swatch;
-
-        await elementUpdated(selectedChild0);
-
-        expect(el.selected).to.deep.equal([]);
-
-        selectedChild0.click();
-        selectedChild1.click();
-        selectedChild2.click();
-
-        expect(el.selected).to.deep.equal([
-            selectedChild0.value,
-            selectedChild1.value,
-            selectedChild2.value,
-        ]);
-
-        selectedChild0.remove();
-        await elementUpdated(el);
-
-        expect(el.selected).to.deep.equal([
-            selectedChild1.value,
-            selectedChild2.value,
-        ]);
-
-        selectedChild2.remove();
-        await elementUpdated(el);
-
-        expect(el.selected).to.deep.equal([selectedChild1.value]);
-
-        selectedChild1.remove();
-        await elementUpdated(el);
-
-        expect(el.selected).to.deep.equal([]);
-    });
-    it('maintains a single tab stop', async () => {
-        const inputBefore = document.createElement('input');
-        const inputAfter = document.createElement('input');
-
-        el.insertAdjacentElement('beforebegin', inputBefore);
-        el.insertAdjacentElement('afterend', inputAfter);
-        inputBefore.focus();
-        expect(document.activeElement === el.children[0]).to.be.false;
-        await sendKeys({
-            press: 'Tab',
-        });
-        expect(document.activeElement === el.children[0]).to.be.true;
-        await sendKeys({
-            press: 'Tab',
-        });
-        expect(document.activeElement === el.children[0]).to.be.false;
-        await sendKeys({
-            press: 'Shift+Tab',
-        });
-        expect(document.activeElement === el.children[0]).to.be.true;
-    });
-    it('makes the first selected child the single tab stop', async () => {
-        const selectedChild = el.querySelector(
-            ':scope > sp-swatch:nth-child(4)'
-        ) as Swatch;
-
-        expect(selectedChild.selected).to.be.false;
-
-        const inputBefore = document.createElement('input');
-        const inputAfter = document.createElement('input');
-
-        el.insertAdjacentElement('beforebegin', inputBefore);
-        el.insertAdjacentElement('afterend', inputAfter);
-        inputBefore.focus();
-        el.selects = 'single';
-        el.selected = [selectedChild.value];
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
-
-        expect(selectedChild.selected).to.be.true;
-
-        expect(document.activeElement === selectedChild).to.be.false;
-        await sendKeys({
-            press: 'Tab',
-        });
-        expect(document.activeElement === selectedChild).to.be.true;
-        await sendKeys({
-            press: 'Tab',
-        });
-        expect(document.activeElement === selectedChild).to.be.false;
-        await sendKeys({
-            press: 'Shift+Tab',
-        });
-        expect(document.activeElement === selectedChild).to.be.true;
-    });
-    it('focus()es to the first Swatch', async () => {
-        el.focus();
-        expect(document.activeElement === el.children[0]).to.be.true;
-    });
-    it('focus()es to the first selected Swatch', async () => {
-        const selectedChild = el.querySelector(
-            ':scope > sp-swatch:nth-child(4)'
-        ) as Swatch;
-
-        expect(selectedChild.selected).to.be.false;
-        el.selects = 'single';
-        el.selected = [selectedChild.value];
-        await elementUpdated(el);
-        await nextFrame();
-
-        expect(selectedChild.selected).to.be.true;
-        el.focus();
-        expect(document.activeElement === selectedChild).to.be.true;
-    });
+import { elementUpdated, expect, fixture, nextFrame } from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/swatch/sp-swatch.js";
+import { spy, stub } from "sinon";
+import { Swatch, SwatchGroup } from "../";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { Default } from "../stories/swatch-group.stories.js";
+
+describe("Swatch Group", () => {
+	let el: SwatchGroup;
+
+	beforeEach(async () => {
+		el = await fixture(Default(Default.args));
+
+		await elementUpdated(el);
+	});
+	testForLitDevWarnings(
+		async () => await fixture(Default(Default.args)),
+	);
+	it("loads default swatch accessibly", async () => {
+		await expect(el).to.be.accessible();
+	});
+	it("forwards `border` to children", async () => {
+		el.border = "light";
+		await elementUpdated(el);
+
+		([...el.children] as Swatch[]).forEach((child) => {
+			expect(child.border).to.equal("light");
+		});
+	});
+	it("forwards `rounding` to children", async () => {
+		el.rounding = "full";
+		await elementUpdated(el);
+
+		([...el.children] as Swatch[]).forEach((child) => {
+			expect(child.rounding).to.equal("full");
+		});
+	});
+	it("forwards `size` to children", async () => {
+		el.size = "xs";
+		await elementUpdated(el);
+
+		([...el.children] as Swatch[]).forEach((child) => {
+			expect(child.size).to.equal("xs");
+		});
+	});
+	it("forwards `shape` to children", async () => {
+		el.shape = "rectangle";
+		await elementUpdated(el);
+
+		([...el.children] as Swatch[]).forEach((child) => {
+			expect(child.shape).to.equal("rectangle");
+		});
+	});
+	it("unsets forwarding", async () => {
+		el.border = "light";
+		el.rounding = "full";
+		el.size = "xs";
+		el.shape = "rectangle";
+		await elementUpdated(el);
+
+		([...el.children] as Swatch[]).forEach((child) => {
+			expect(child.border).to.not.be.undefined;
+			expect(child.rounding).to.not.be.undefined;
+			expect(child.size).to.not.equal("m");
+			expect(child.shape).to.not.be.undefined;
+		});
+
+		el.border = undefined;
+		el.rounding = undefined;
+		el.removeAttribute("size");
+		el.shape = undefined;
+		await elementUpdated(el);
+
+		([...el.children] as Swatch[]).forEach((child) => {
+			expect(child.border).to.equal(undefined);
+			expect(child.rounding).to.equal(undefined);
+			expect(child.size).to.equal("m");
+			expect(child.shape).to.equal(undefined);
+		});
+	});
+	it("does not dispatch `change` events without `selects` attribute", async () => {
+		const selectedChild = el.querySelector(
+			":scope > sp-swatch:nth-child(4)",
+		) as Swatch;
+
+		const changeSpy = spy();
+
+		el.addEventListener("change", () => changeSpy());
+
+		expect(el.selected).to.deep.equal([]);
+
+		selectedChild.click();
+
+		expect(changeSpy.called).to.be.false;
+		expect(el.selected).to.deep.equal([]);
+	});
+	it('dispatches `change` events as [selects="single"]', async () => {
+		el.selects = "single";
+		const selectedChild = el.querySelector(
+			":scope > sp-swatch:nth-child(4)",
+		) as Swatch;
+
+		const changeSpy = spy();
+
+		el.addEventListener("change", () => changeSpy());
+
+		expect(el.selected).to.deep.equal([]);
+		expect(selectedChild.selected).to.be.false;
+
+		selectedChild.click();
+
+		expect(changeSpy.calledOnce).to.be.true;
+		expect(el.selected).to.deep.equal([selectedChild.value]);
+		expect(selectedChild.selected).to.be.true;
+
+		selectedChild.click();
+
+		expect(changeSpy.calledOnce).to.be.true;
+		expect(el.selected).to.deep.equal([selectedChild.value]);
+		expect(selectedChild.selected).to.be.true;
+	});
+	it("can have `change` events prevented", async () => {
+		el.selects = "single";
+		const selectedChild = el.querySelector(
+			":scope > sp-swatch:nth-child(4)",
+		) as Swatch;
+
+		el.addEventListener("change", (event: Event) => event.preventDefault());
+
+		expect(el.selected).to.deep.equal([]);
+		expect(selectedChild.selected).to.be.false;
+
+		selectedChild.click();
+
+		expect(el.selected).to.deep.equal([]);
+		expect(selectedChild.selected).to.be.false;
+	});
+	it('dispatches `change` events as [selects="multiple"]', async () => {
+		el.selects = "multiple";
+		const selectedChild0 = el.querySelector(
+			":scope > sp-swatch:nth-child(1)",
+		) as Swatch;
+		const selectedChild1 = el.querySelector(
+			":scope > sp-swatch:nth-child(4)",
+		) as Swatch;
+		const selectedChild2 = el.querySelector(
+			":scope > sp-swatch:nth-child(6)",
+		) as Swatch;
+
+		await elementUpdated(selectedChild0);
+
+		const changeSpy = spy();
+
+		el.addEventListener("change", () => changeSpy());
+
+		expect(el.selected).to.deep.equal([]);
+
+		selectedChild0.click();
+		selectedChild1.click();
+		selectedChild2.click();
+
+		expect(changeSpy.callCount).to.equal(3);
+		expect(el.selected).to.deep.equal([
+			selectedChild0.value,
+			selectedChild1.value,
+			selectedChild2.value,
+		]);
+	});
+	it("filters `selected` when a selected Swatch is removed from the DOM", async () => {
+		el.selects = "multiple";
+		const selectedChild0 = el.querySelector(
+			":scope > sp-swatch:nth-child(1)",
+		) as Swatch;
+		const selectedChild1 = el.querySelector(
+			":scope > sp-swatch:nth-child(4)",
+		) as Swatch;
+		const selectedChild2 = el.querySelector(
+			":scope > sp-swatch:nth-child(6)",
+		) as Swatch;
+
+		await elementUpdated(selectedChild0);
+
+		expect(el.selected).to.deep.equal([]);
+
+		selectedChild0.click();
+		selectedChild1.click();
+		selectedChild2.click();
+
+		expect(el.selected).to.deep.equal([
+			selectedChild0.value,
+			selectedChild1.value,
+			selectedChild2.value,
+		]);
+
+		selectedChild0.remove();
+		await elementUpdated(el);
+
+		expect(el.selected).to.deep.equal([
+			selectedChild1.value,
+			selectedChild2.value,
+		]);
+
+		selectedChild2.remove();
+		await elementUpdated(el);
+
+		expect(el.selected).to.deep.equal([selectedChild1.value]);
+
+		selectedChild1.remove();
+		await elementUpdated(el);
+
+		expect(el.selected).to.deep.equal([]);
+	});
+	it("maintains a single tab stop", async () => {
+		const inputBefore = document.createElement("input");
+		const inputAfter = document.createElement("input");
+
+		el.insertAdjacentElement("beforebegin", inputBefore);
+		el.insertAdjacentElement("afterend", inputAfter);
+		inputBefore.focus();
+		expect(document.activeElement === el.children[0]).to.be.false;
+		await sendKeys({
+			press: "Tab",
+		});
+		expect(document.activeElement === el.children[0]).to.be.true;
+		await sendKeys({
+			press: "Tab",
+		});
+		expect(document.activeElement === el.children[0]).to.be.false;
+		await sendKeys({
+			press: "Shift+Tab",
+		});
+		expect(document.activeElement === el.children[0]).to.be.true;
+	});
+	it("makes the first selected child the single tab stop", async () => {
+		const selectedChild = el.querySelector(
+			":scope > sp-swatch:nth-child(4)",
+		) as Swatch;
+
+		expect(selectedChild.selected).to.be.false;
+
+		const inputBefore = document.createElement("input");
+		const inputAfter = document.createElement("input");
+
+		el.insertAdjacentElement("beforebegin", inputBefore);
+		el.insertAdjacentElement("afterend", inputAfter);
+		inputBefore.focus();
+		el.selects = "single";
+		el.selected = [selectedChild.value];
+		await elementUpdated(el);
+		await nextFrame();
+		await nextFrame();
+
+		expect(selectedChild.selected).to.be.true;
+
+		expect(document.activeElement === selectedChild).to.be.false;
+		await sendKeys({
+			press: "Tab",
+		});
+		expect(document.activeElement === selectedChild).to.be.true;
+		await sendKeys({
+			press: "Tab",
+		});
+		expect(document.activeElement === selectedChild).to.be.false;
+		await sendKeys({
+			press: "Shift+Tab",
+		});
+		expect(document.activeElement === selectedChild).to.be.true;
+	});
+	it("focus()es to the first Swatch", async () => {
+		el.focus();
+		expect(document.activeElement === el.children[0]).to.be.true;
+	});
+	it("focus()es to the first selected Swatch", async () => {
+		const selectedChild = el.querySelector(
+			":scope > sp-swatch:nth-child(4)",
+		) as Swatch;
+
+		expect(selectedChild.selected).to.be.false;
+		el.selects = "single";
+		el.selected = [selectedChild.value];
+		await elementUpdated(el);
+		await nextFrame();
+
+		expect(selectedChild.selected).to.be.true;
+		el.focus();
+		expect(document.activeElement === selectedChild).to.be.true;
+	});
 });
 
-describe('Swatch Group - DOM selected', () => {
-    describe('dev mode', () => {
-        let consoleWarnStub!: ReturnType;
-
-        before(() => {
-            window.__swc.verbose = true;
-            consoleWarnStub = stub(console, 'warn');
-        });
-        afterEach(() => {
-            consoleWarnStub.resetHistory();
-        });
-        after(() => {
-            window.__swc.verbose = false;
-            consoleWarnStub.restore();
-        });
-
-        it('warns in Dev Mode when mixed-value attribute is added in sp-swatch when parent sp-swatch-group is not having selects="multiple"', async () => {
-            const el = await fixture(html`
-                
-                    
-                
-            `);
-
-            await elementUpdated(el);
-            await nextFrame();
-            await nextFrame();
-
-            expect(consoleWarnStub.called).to.be.true;
-            const spyCall = consoleWarnStub.getCall(0);
-
-            expect(
-                (spyCall.args.at(0) as string).includes(
-                    ' elements can only leverage the "mixed-value" attribute when their  parent element is also leveraging "selects="multiple"'
-                ),
-                'confirm warning message'
-            ).to.be.true;
-
-            expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-                data: {
-                    localName: 'sp-swatch-group',
-                    type: 'accessibility',
-                    level: 'default',
-                },
-            });
-        });
-    });
-    it('accepts selection from DOM', async () => {
-        const el = await fixture(html`
-            
-                
-                
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.selected).to.deep.equal(['color-1', 'color-3']);
-    });
-    it('merges `selected` and selection from DOM', async function () {
-        const el = await fixture(html`
-            
-                
-                
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
-
-        expect(el.selected).to.deep.equal(['color-1', 'color-3']);
-    });
-    it('lazily accepts selection from DOM', async function () {
-        const el = await fixture(html`
-            
-                
-                
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
-        const color1 = el.querySelector('[value="color-1"]') as Swatch;
-
-        expect(el.selected).to.deep.equal(['color-3']);
-
-        color1.selected = true;
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
-
-        expect(el.selected).to.deep.equal(['color-3', 'color-1']);
-    });
-    it('clears previously selected children when updating `selected`', async () => {
-        const el = await fixture(html`
-            
-                
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.selected).to.deep.equal(['color-1']);
-        el.selected = ['color-2'];
-        await elementUpdated(el);
-        expect(el.selected).to.deep.equal(['color-2']);
-    });
+describe("Swatch Group - DOM selected", () => {
+	describe("dev mode", () => {
+		let consoleWarnStub!: ReturnType;
+
+		before(() => {
+			window.__swc.verbose = true;
+			consoleWarnStub = stub(console, "warn");
+		});
+		afterEach(() => {
+			consoleWarnStub.resetHistory();
+		});
+		after(() => {
+			window.__swc.verbose = false;
+			consoleWarnStub.restore();
+		});
+
+		it('warns in Dev Mode when mixed-value attribute is added in sp-swatch when parent sp-swatch-group is not having selects="multiple"', async () => {
+			const el = await fixture(html`
+				
+					
+				
+			`);
+
+			await elementUpdated(el);
+			await nextFrame();
+			await nextFrame();
+
+			expect(consoleWarnStub.called).to.be.true;
+			const spyCall = consoleWarnStub.getCall(0);
+
+			expect(
+				(spyCall.args.at(0) as string).includes(
+					' elements can only leverage the "mixed-value" attribute when their  parent element is also leveraging "selects="multiple"',
+				),
+				"confirm warning message",
+			).to.be.true;
+
+			expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+				data: {
+					localName: "sp-swatch-group",
+					type: "accessibility",
+					level: "default",
+				},
+			});
+		});
+	});
+	it("accepts selection from DOM", async () => {
+		const el = await fixture(html`
+			
+				
+				
+				
+				
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el.selected).to.deep.equal(["color-1", "color-3"]);
+	});
+	it("merges `selected` and selection from DOM", async function () {
+		const el = await fixture(html`
+			
+				
+				
+				
+				
+			
+		`);
+
+		await elementUpdated(el);
+		await nextFrame();
+		await nextFrame();
+
+		expect(el.selected).to.deep.equal(["color-1", "color-3"]);
+	});
+	it("lazily accepts selection from DOM", async function () {
+		const el = await fixture(html`
+			
+				
+				
+				
+				
+			
+		`);
+
+		await elementUpdated(el);
+		await nextFrame();
+		await nextFrame();
+		const color1 = el.querySelector('[value="color-1"]') as Swatch;
+
+		expect(el.selected).to.deep.equal(["color-3"]);
+
+		color1.selected = true;
+		await elementUpdated(el);
+		await nextFrame();
+		await nextFrame();
+
+		expect(el.selected).to.deep.equal(["color-3", "color-1"]);
+	});
+	it("clears previously selected children when updating `selected`", async () => {
+		const el = await fixture(html`
+			
+				
+				
+				
+			
+		`);
+
+		await elementUpdated(el);
+		expect(el.selected).to.deep.equal(["color-1"]);
+		el.selected = ["color-2"];
+		await elementUpdated(el);
+		expect(el.selected).to.deep.equal(["color-2"]);
+	});
 });
 
-describe('Swatch Group - slotted', () => {
-    it('manages [selects="single"] selection through multiple slots', async () => {
-        const test = await fixture(html`
-            

-                First
-                Second
-                Third
-            

-        `);
+describe("Swatch Group - slotted", () => {
+	it('manages [selects="single"] selection through multiple slots', async () => {
+		const test = await fixture(html`
+			

+				First
+				Second
+				Third
+			

+		`);
 
-        const firstItem = test.querySelector('sp-swatch') as Swatch;
-        const thirdItem = test.querySelector('sp-swatch[selected]') as Swatch;
+		const firstItem = test.querySelector("sp-swatch") as Swatch;
+		const thirdItem = test.querySelector("sp-swatch[selected]") as Swatch;
 
-        const shadowRoot = test.attachShadow({ mode: 'open' });
+		const shadowRoot = test.attachShadow({ mode: "open" });
 
-        shadowRoot.innerHTML = `
+		shadowRoot.innerHTML = `
             
                 
             
         `;
 
-        const el = shadowRoot.querySelector('sp-swatch-group') as SwatchGroup;
+		const el = shadowRoot.querySelector("sp-swatch-group") as SwatchGroup;
 
-        await elementUpdated(el);
-        // Await test slot change time.
-        await nextFrame();
-        await nextFrame();
+		await elementUpdated(el);
+		// Await test slot change time.
+		await nextFrame();
+		await nextFrame();
 
-        expect(el.selected, '"Third" selected').to.deep.equal(['Third']);
-        expect(firstItem.selected).to.be.false;
-        expect(thirdItem.selected).to.be.true;
+		expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
+		expect(firstItem.selected).to.be.false;
+		expect(thirdItem.selected).to.be.true;
 
-        firstItem.click();
-        await elementUpdated(el);
+		firstItem.click();
+		await elementUpdated(el);
 
-        expect(el.selected, '"First" selected').to.deep.equal(['First']);
-        expect(firstItem.selected).to.be.true;
-        expect(thirdItem.selected).to.be.false;
-    });
+		expect(el.selected, '"First" selected').to.deep.equal(["First"]);
+		expect(firstItem.selected).to.be.true;
+		expect(thirdItem.selected).to.be.false;
+	});
 });
diff --git a/packages/switch/src/Switch.ts b/packages/switch/src/Switch.ts
index b8b2c1353e..95aa4d5c0c 100644
--- a/packages/switch/src/Switch.ts
+++ b/packages/switch/src/Switch.ts
@@ -11,16 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { CheckboxBase } from '@spectrum-web-components/checkbox/src/CheckboxBase.js';
-import switchStyles from './switch.css.js';
-import legacyStyles from './switch-legacy.css.js';
+	CSSResultArray,
+	html,
+	PropertyValues,
+	SizedMixin,
+	TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { CheckboxBase } from "@spectrum-web-components/checkbox/src/CheckboxBase.js";
+import legacyStyles from "./switch-legacy.css.js";
+import switchStyles from "./switch.css.js";
 
 /**
  * This component represents a toggle switch.
@@ -33,57 +33,57 @@ import legacyStyles from './switch-legacy.css.js';
  *
  */
 export class Switch extends SizedMixin(CheckboxBase) {
-    /**
-     * Returns the styles to be applied to the component.
-     */
-    public static override get styles(): CSSResultArray {
-        if (window.hasOwnProperty('ShadyDOM')) {
-            // Override some styles if we are using the web component polyfill
-            return [switchStyles, legacyStyles];
-        }
+	/**
+	 * Returns the styles to be applied to the component.
+	 */
+	public static override get styles(): CSSResultArray {
+		if (Object.prototype.hasOwnProperty.call(window, "ShadyDOM")) {
+			// Override some styles if we are using the web component polyfill
+			return [switchStyles, legacyStyles];
+		}
 
-        return [switchStyles];
-    }
+		return [switchStyles];
+	}
 
-    /**
-     * Indicates whether the switch is emphasized.
-     *
-     * This property is reflected as an attribute, meaning changes to the property
-     * will be mirrored in the corresponding HTML attribute.
-     */
-    @property({ type: Boolean, reflect: true })
-    public emphasized = false;
+	/**
+	 * Indicates whether the switch is emphasized.
+	 *
+	 * This property is reflected as an attribute, meaning changes to the property
+	 * will be mirrored in the corresponding HTML attribute.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public emphasized = false;
 
-    /**
-     * Renders the component template.
-     */
-    protected override render(): TemplateResult {
-        return html`
-            ${super.render()}
-            
-            
-        `;
-    }
+	/**
+	 * Renders the component template.
+	 */
+	protected override render(): TemplateResult {
+		return html`
+			${super.render()}
+			
+			
+		`;
+	}
 
-    /**
-     * Called after the element's DOM has been updated the first time.
-     * Sets the role attribute of the input element to 'switch'.
-     */
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        this.inputElement.setAttribute('role', 'switch');
-    }
+	/**
+	 * Called after the element's DOM has been updated the first time.
+	 * Sets the role attribute of the input element to 'switch'.
+	 */
+	protected override firstUpdated(changes: PropertyValues): void {
+		super.firstUpdated(changes);
+		this.inputElement.setAttribute("role", "switch");
+	}
 
-    /**
-     * Called when the element is updated.
-     * Updates the aria-checked attribute of the input element based on the checked property.
-     */
-    protected override updated(changes: PropertyValues): void {
-        if (changes.has('checked')) {
-            this.inputElement.setAttribute(
-                'aria-checked',
-                this.checked ? 'true' : 'false'
-            );
-        }
-    }
+	/**
+	 * Called when the element is updated.
+	 * Updates the aria-checked attribute of the input element based on the checked property.
+	 */
+	protected override updated(changes: PropertyValues): void {
+		if (changes.has("checked")) {
+			this.inputElement.setAttribute(
+				"aria-checked",
+				this.checked ? "true" : "false",
+			);
+		}
+	}
 }
diff --git a/packages/table/src/Table.ts b/packages/table/src/Table.ts
index 9df55335f9..353e97c9eb 100644
--- a/packages/table/src/Table.ts
+++ b/packages/table/src/Table.ts
@@ -11,50 +11,50 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    PropertyValues,
-    render,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+	CSSResultArray,
+	html,
+	nothing,
+	PropertyValues,
+	render,
+	SizedMixin,
+	SpectrumElement,
+	TemplateResult,
+} from "@spectrum-web-components/base";
 // Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225
-import '@spectrum-web-components/table/sp-table-body.js';
-import '@spectrum-web-components/table/sp-table-row.js';
-import '@spectrum-web-components/table/sp-table-checkbox-cell.js';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import styles from './table.css.js';
-import { TableBody } from './TableBody.js';
-import type { TableCheckboxCell } from './TableCheckboxCell.js';
-import type { TableHead } from './TableHead.js';
-import type { TableHeadCell } from './TableHeadCell.js';
-import type { TableRow } from './TableRow.js';
 import {
-    virtualize,
-    VirtualizeDirectiveConfig,
-    virtualizerRef,
-} from '@lit-labs/virtualizer/virtualize.js';
-import { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';
+	RangeChangedEvent,
+	VisibilityChangedEvent,
+} from "@lit-labs/virtualizer/events.js";
 import {
-    RangeChangedEvent,
-    VisibilityChangedEvent,
-} from '@lit-labs/virtualizer/events.js';
+	virtualize,
+	VirtualizeDirectiveConfig,
+	virtualizerRef,
+} from "@lit-labs/virtualizer/virtualize.js";
+import { Virtualizer } from "@lit-labs/virtualizer/Virtualizer.js";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import "@spectrum-web-components/table/sp-table-body.js";
+import "@spectrum-web-components/table/sp-table-checkbox-cell.js";
+import "@spectrum-web-components/table/sp-table-row.js";
+import styles from "./table.css.js";
+import { TableBody } from "./TableBody.js";
+import type { TableCheckboxCell } from "./TableCheckboxCell.js";
+import type { TableHead } from "./TableHead.js";
+import type { TableHeadCell } from "./TableHeadCell.js";
+import type { TableRow } from "./TableRow.js";
 
 /**
  * Enum representing the type of a table row.
  */
 export enum RowType {
-    ITEM = 0,
-    INFORMATION = 1,
+	ITEM = 0,
+	INFORMATION = 1,
 }
 
 /**
  * Interface representing a table item.
  */
 export interface TableItem extends Record {
-    _$rowType$?: RowType;
+	_$rowType$?: RowType;
 }
 
 /**
@@ -67,625 +67,614 @@ export interface TableItem extends Record {
  */
 
 export class Table extends SizedMixin(SpectrumElement, {
-    validSizes: ['s', 'm', 'l', 'xl'],
-    noDefaultSize: true,
+	validSizes: ["s", "m", "l", "xl"],
+	noDefaultSize: true,
 }) {
-    /**
-     * Returns the styles to be applied to the component.
-     */
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    /**
-     * Gets the function used to render a table item.
-     */
-    get renderItem(): (
-        item: Record,
-        index: number
-    ) => TemplateResult {
-        return this._renderItem;
-    }
-
-    /**
-     * Sets the function used to render a table item.
-     */
-    set renderItem(
-        fn: (item: Record, index: number) => TemplateResult
-    ) {
-        this._renderItem = (
-            item: Record,
-            index: number
-        ): TemplateResult => {
-            const value = this.itemValue(item, index);
-            const selected = this.selected.includes(value);
-            const hasCheckbox = this.selects && item?._$rowType$ !== 1;
-
-            return html`
-                
-                    ${hasCheckbox
-                        ? html`
-                              
-                          `
-                        : nothing}
-                    ${fn(item, index)}
-                
-            `;
-        };
-    }
-
-    /**
-     * The function used to render a table item.
-     */
-    private _renderItem: (
-        item: Record,
-        index: number
-    ) => TemplateResult = () => html``;
-
-    /**
-     * The ARIA role of the table.
-     *
-     * @property {string} role - The ARIA role of the table.
-     */
-    @property({ reflect: true })
-    public override role = 'grid';
-
-    /**
-     * This property is used to determine the selection behavior of the table.
-     * If set to `single`, only one row can be selected at a time.
-     * If set to `multiple`, multiple rows can be selected at a time.
-     * If set to `single` or `multiple`, checkboxes will be displayed in the first column of each row.
-     * If not set, no rows can be selected.
-     */
-    @property({ type: String, reflect: true })
-    public selects: undefined | 'single' | 'multiple';
-
-    /**
-     * An array of  values that have been selected.
-     */
-    @property({ type: Array })
-    public selected: string[] = [];
-
-    /**
-     * The set of selected row values.
-     */
-    private selectedSet = new Set();
-
-    /**
-     * The content of the rows rendered by the virtualized table.
-     *
-     * The key is the value of the sp-table-row, and the value is the sp-table-row's content (not the row itself).
-     */
-    @property({ type: Array })
-    public items: Record[] = [];
-
-    /**
-     * The value of an item.
-     *
-     * By default, it is set to the index of the sp-table-row.
-     */
-    @property({ type: Object })
-    public itemValue = (_item: unknown, index: number): string => {
-        return `${index}`;
-    };
-
-    /**
-     * This property is used to determine the scroll behavior of the virtualized table.
-     *
-     * If this is set to `true`, make sure to specify a height in the sp-table's inline styles.
-     */
-    @property({ type: Boolean, reflect: true })
-    public scroller = false;
-
-    /**
-     * Deliver the Table with additional visual emphasis to selected rows.
-     */
-    @property({ type: Boolean, reflect: true })
-    public emphasized = false;
-
-    /**
-     * Display with `quiet` variant styles.
-     */
-    @property({ type: Boolean, reflect: true })
-    public quiet = false;
-
-    /**
-     * Changes the spacing around table cell content.
-     */
-    @property({ type: String, reflect: true })
-    public density?: 'compact' | 'spacious';
-
-    /**
-     * The table body element.
-     */
-    private tableBody?: TableBody;
-
-    /**
-     * The checkbox cell located in the table head, used for selecting or deselecting all rows.
-     */
-    private tableHeadCheckboxCell?: TableCheckboxCell;
-
-    /**
-     * The table head element.
-     */
-    private get tableHead(): TableHead {
-        return this.querySelector('sp-table-head') as TableHead;
-    }
-
-    /**
-     * Retrieves all table rows if the table is not virtualized.
-     * Returns an empty array if the table is virtualized.
-     */
-    private get tableRows(): TableRow[] {
-        if (this.isVirtualized) {
-            return [];
-        }
-
-        return [...this.querySelectorAll('sp-table-row')] as TableRow[];
-    }
-
-    /**
-     * Returns whether the table is virtualized.
-     */
-    private get isVirtualized(): boolean {
-        return !!this.items.length;
-    }
-
-    /**
-     * Sets focus on the first sortable table head cell, if one exists.
-     */
-    public override focus(): void {
-        const sortableHeadCell = this.querySelector(
-            'sp-table-head-cell[sortable]'
-        ) as TableHeadCell;
-
-        if (sortableHeadCell) {
-            sortableHeadCell.focus();
-        }
-    }
-
-    /**
-     * Selects all rows in the table.
-     * If the table is virtualized, it selects all items in the items array.
-     * If the table is not virtualized, it selects all visible rows.
-     */
-    private selectAllRows(): void {
-        if (this.isVirtualized) {
-            this.items.forEach((item, index: number) => {
-                if (item._$rowType$ !== 1) {
-                    this.selectedSet.add(this.itemValue(item, index));
-                }
-            });
-        } else {
-            this.tableRows.forEach((row) => {
-                row.selected = true; // Visually
-                this.selectedSet.add(row.value); // Prepares table state
-            });
-        }
-
-        this.selected = [...this.selectedSet];
-
-        if (!this.tableHeadCheckboxCell) return;
-
-        this.tableHeadCheckboxCell.checked = true;
-        this.tableHeadCheckboxCell.indeterminate = false;
-    }
-
-    /**
-     * Deselects all rows in the table.
-     * Clears the selected set and updates the selected property.
-     */
-    private deselectAllRows(): void {
-        this.selectedSet.clear();
-        this.selected = [];
-
-        if (!this.isVirtualized) {
-            // Deselect all visible rows
-            const selectedRows = [
-                ...this.querySelectorAll('[selected]'),
-            ] as TableRow[];
-
-            selectedRows.forEach((row) => {
-                row.selected = false;
-            });
-        }
-
-        if (!this.tableHeadCheckboxCell) return;
-
-        this.tableHeadCheckboxCell.checked = false;
-        this.tableHeadCheckboxCell.indeterminate = false;
-    }
-
-    /**
-     * Manages the selection checkboxes in the table.
-     * Adds or removes checkboxes based on the `selects` property.
-     */
-    protected manageSelects(): void {
-        const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');
-        const checkbox = document.createElement('sp-table-checkbox-cell');
-
-        if (!!this.selects) {
-            let allSelected = false;
-
-            if (this.isVirtualized) {
-                // Check if all items are selected in a virtualized table
-                allSelected =
-                    this.selected.length > 0 &&
-                    this.selected.length === this.items.length;
-            } else {
-                // Update the selected state of each row and add checkboxes if necessary
-                this.tableRows.forEach((row) => {
-                    row.selected = this.selectedSet.has(row.value);
-
-                    // Create and initialize checkboxes in all rows within the table body.
-                    if (!row.querySelector(':scope > sp-table-checkbox-cell')) {
-                        const clonedCheckbox =
-                            checkbox.cloneNode() as TableCheckboxCell;
-
-                        checkbox.emphasized = this.emphasized;
-                        row.insertAdjacentElement('afterbegin', clonedCheckbox);
-                        checkbox.checked = row.selected;
-                    }
-                });
-
-                allSelected = this.selected.length === this.tableRows.length;
-            }
-
-            // Create and initialize table head checkbox cell.
-            if (!this.tableHeadCheckboxCell) {
-                this.tableHeadCheckboxCell = document.createElement(
-                    'sp-table-checkbox-cell'
-                ) as TableCheckboxCell;
-                this.tableHeadCheckboxCell.headCell = true;
-                this.tableHeadCheckboxCell.emphasized = this.emphasized;
-                this.tableHead?.insertAdjacentElement(
-                    'afterbegin',
-                    this.tableHeadCheckboxCell
-                );
-            }
-
-            this.manageHeadCheckbox(allSelected);
-        } else {
-            // Remove all checkbox cells.
-            checkboxes.forEach((box) => {
-                box.remove();
-            });
-
-            delete this.tableHeadCheckboxCell;
-        }
-    }
-
-    /**
-     * Validates the selected rows in the table.
-     * Ensures that the selected rows are still present in the table.
-     * Dispatches a 'change' event if the selected rows have changed.
-     */
-    protected validateSelected(): void {
-        const rowValues = new Set();
-
-        if (this.isVirtualized) {
-            // Add all item values to the set in a virtualized table
-            this.items.forEach((item, index) => {
-                const value = this.itemValue(item, index);
-
-                rowValues.add(value);
-            });
-        } else {
-            // Add all row values to the set in a non-virtualized table
-            this.tableRows.forEach((row) => {
-                rowValues.add(row.value);
-            });
-        }
-
-        const oldSelectedCount = this.selected.length;
-
-        // Filter the selected items to ensure they are still present in the table
-        this.selected = this.selected.filter((selectedItem) =>
-            rowValues.has(selectedItem)
-        );
-
-        // Dispatch a 'change' event if the selected rows have changed
-        if (oldSelectedCount !== this.selected.length) {
-            this.dispatchEvent(
-                new Event('change', {
-                    cancelable: true,
-                    bubbles: true,
-                    composed: true,
-                })
-            );
-        }
-
-        this.selectedSet = new Set(this.selected);
-    }
-
-    /**
-     * Manages the selected rows in the table.
-     * Validates the selected rows and updates the selected state of each row.
-     */
-    protected manageSelected(): void {
-        this.validateSelected();
-
-        if (this.isVirtualized) return;
-
-        // Update the selected state of each row
-        this.tableRows.forEach((row) => {
-            row.selected = this.selectedSet.has(row.value);
-        });
-
-        // Update the state of the table head checkbox cell
-        if (this.tableHeadCheckboxCell) {
-            this.tableHeadCheckboxCell.checked =
-                this.selected.length === this.tableRows.length;
-        }
-    }
-
-    /**
-     * Manages the checkboxes in the table.
-     * Adds or removes checkboxes based on the `selects` property.
-     */
-    protected manageCheckboxes(): void {
-        if (!!this.selects) {
-            // Create and initialize table head checkbox cell.
-            this.tableHeadCheckboxCell = document.createElement(
-                'sp-table-checkbox-cell'
-            ) as TableCheckboxCell;
-            this.tableHeadCheckboxCell.headCell = true;
-            this.tableHeadCheckboxCell.emphasized = this.emphasized;
-
-            const allSelected = this.selected.length === this.tableRows.length;
-
-            this.manageHeadCheckbox(allSelected);
-
-            this.tableHead?.insertAdjacentElement(
-                'afterbegin',
-                this.tableHeadCheckboxCell
-            );
-
-            // Create and initialize checkboxes in all rows within the table body.
-            this.tableRows.forEach((row) => {
-                const checkbox = document.createElement(
-                    'sp-table-checkbox-cell'
-                );
-
-                checkbox.emphasized = this.emphasized;
-                row.insertAdjacentElement('afterbegin', checkbox);
-                row.selected = this.selectedSet.has(row.value);
-                checkbox.checked = row.selected;
-            });
-        } else {
-            // Remove all checkbox cells.
-            this.tableHead?.querySelector('sp-table-checkbox-cell')?.remove();
-            this.tableRows.forEach((row) => {
-                row.checkboxCells[0]?.remove();
-
-                if (this.selected.length) {
-                    row.selected = this.selectedSet.has(row.value);
-                }
-            });
-        }
-    }
-
-    /**
-     * Manages the state of the table head checkbox cell.
-     * Updates the checkbox state based on the selection state of the table rows.
-     */
-    protected manageHeadCheckbox(allSelected: boolean): void {
-        if (!this.tableHeadCheckboxCell) return;
-
-        this.tableHeadCheckboxCell.selectsSingle = this.selects === 'single';
-        this.tableHeadCheckboxCell.emphasized = this.emphasized;
-        this.tableHeadCheckboxCell.checked = allSelected;
-        this.tableHeadCheckboxCell.indeterminate =
-            this.selected.length > 0 && !allSelected;
-    }
-
-    /**
-     * Handles change events for the table.
-     * Manages the selection state of rows based on the `selects` property.
-     * Dispatches a 'change' event if the selection state has changed.
-     */
-    protected handleChange(event: Event): void {
-        event.stopPropagation();
-
-        const previousSelectedSet = new Set(this.selectedSet);
-        const previousSelected = [...this.selected];
-
-        const { target } = event;
-        const { parentElement: rowItem } = target as HTMLElement & {
-            parentElement: TableRow;
-        };
-
-        if (!rowItem.value) {
-            const { checkbox } = target as TableCheckboxCell;
-
-            if (!checkbox) return;
-
-            if (checkbox.checked || checkbox.indeterminate) {
-                this.selectAllRows();
-            } else {
-                this.deselectAllRows();
-            }
-        } else {
-            switch (this.selects) {
-                case 'single': {
-                    this.deselectAllRows();
-
-                    if (rowItem.selected) {
-                        this.selectedSet.add(rowItem.value);
-                        this.selected = [...this.selectedSet];
-                    }
-
-                    break;
-                }
-                case 'multiple': {
-                    if (rowItem.selected) {
-                        this.selectedSet.add(rowItem.value);
-                    } else {
-                        this.selectedSet.delete(rowItem.value);
-                    }
-
-                    this.selected = [...this.selectedSet];
-
-                    const allSelected =
-                        this.selected.length === this.tableRows.length;
-
-                    if (!this.tableHeadCheckboxCell) return;
-
-                    this.tableHeadCheckboxCell.checked = allSelected;
-                    this.tableHeadCheckboxCell.indeterminate =
-                        this.selected.length > 0 && !allSelected;
-
-                    break;
-                }
-                default: {
-                    break;
-                }
-            }
-        }
-
-        const applyDefault = this.dispatchEvent(
-            new Event('change', {
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-
-        if (!applyDefault) {
-            event.preventDefault();
-            this.selectedSet = previousSelectedSet;
-            this.selected = previousSelected;
-        }
-    }
-
-    /**
-     * Scrolls to the row at the specified index.
-     */
-    public scrollToIndex(index?: number): void {
-        if (index && !!this.tableBody) {
-            const virtualizerParent = this.tableBody as unknown as {
-                [virtualizerRef]: Virtualizer;
-            };
-            const item = virtualizerParent[virtualizerRef].element(index);
-
-            if (item) {
-                item.scrollIntoView();
-            }
-        }
-    }
-
-    /**
-     * Renders the component template.
-     * Sets up the change event listener on the slot.
-     */
-    protected override render(): TemplateResult {
-        return html`
-            
-        `;
-    }
-
-    /**
-     * Called before the element updates.
-     * Validates selected rows and manages checkboxes if the component has not updated yet.
-     * Manages selects and selected rows based on property changes.
-     */
-    protected override willUpdate(changed: PropertyValues): void {
-        if (!this.hasUpdated) {
-            this.validateSelected();
-            this.manageCheckboxes();
-        }
-
-        if (changed.has('selects')) {
-            this.manageSelects();
-        }
-
-        if (changed.has('selected') && this.hasUpdated) {
-            this.manageSelected();
-        }
-    }
-
-    /**
-     * Called when the element is updated.
-     * Renders virtualized items if there are any, otherwise removes the aria-rowcount attribute.
-     */
-    protected override updated(): void {
-        if (this.items.length) {
-            this.renderVirtualizedItems();
-        } else {
-            this.removeAttribute('aria-rowcount');
-        }
-    }
-
-    /**
-     * Renders virtualized items in the table.
-     * Ensures screen readers can announce the true size of the table despite virtualization.
-     */
-    protected renderVirtualizedItems(): void {
-        // Rendering updates into the table while disconnected can
-        // cause runaway event binding in ancestor elements.
-        if (!this.isConnected) return;
-
-        if (!this.tableBody) {
-            this.tableBody = this.querySelector('sp-table-body') as TableBody;
-
-            if (!this.tableBody) {
-                this.tableBody = document.createElement('sp-table-body');
-                this.append(this.tableBody);
-            }
-
-            this.tableBody.addEventListener(
-                'rangeChanged',
-                (event: RangeChangedEvent) => {
-                    this.dispatchEvent(
-                        new RangeChangedEvent({
-                            first: event.first,
-                            last: event.last,
-                        })
-                    );
-                }
-            );
-
-            this.tableBody.addEventListener(
-                'visibilityChanged',
-                (event: VisibilityChangedEvent) => {
-                    this.dispatchEvent(
-                        new VisibilityChangedEvent({
-                            first: event.first,
-                            last: event.last,
-                        })
-                    );
-                }
-            );
-        }
-
-        // Ensures screenreaders can announce the true size of the table
-        // despite virtualization only rendering a subset of rows.
-        this.setAttribute('aria-rowcount', `${this.items.length}`);
-
-        const config: VirtualizeDirectiveConfig> = {
-            items: this.items,
-            renderItem: this.renderItem,
-            scroller: this.scroller,
-        };
-
-        render(
-            html`
-                ${virtualize(config)}
-            `,
-            this.tableBody
-        );
-    }
-
-    /**
-     * Called when the element is disconnected from the document's DOM.
-     */
-    public override disconnectedCallback(): void {
-        super.disconnectedCallback();
-    }
+	/**
+	 * Returns the styles to be applied to the component.
+	 */
+	public static override get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/**
+	 * Gets the function used to render a table item.
+	 */
+	get renderItem(): (
+		item: Record,
+		index: number,
+	) => TemplateResult {
+		return this._renderItem;
+	}
+
+	/**
+	 * Sets the function used to render a table item.
+	 */
+	set renderItem(
+		fn: (item: Record, index: number) => TemplateResult,
+	) {
+		this._renderItem = (
+			item: Record,
+			index: number,
+		): TemplateResult => {
+			const value = this.itemValue(item, index);
+			const selected = this.selected.includes(value);
+			const hasCheckbox = this.selects && item?._$rowType$ !== 1;
+
+			return html`
+				
+					${hasCheckbox
+						? html`
+								
+							`
+						: nothing}
+					${fn(item, index)}
+				
+			`;
+		};
+	}
+
+	/**
+	 * The function used to render a table item.
+	 */
+	private _renderItem: (
+		item: Record,
+		index: number,
+	) => TemplateResult = () => html``;
+
+	/**
+	 * The ARIA role of the table.
+	 *
+	 * @property {string} role - The ARIA role of the table.
+	 */
+	@property({ reflect: true })
+	public override role = "grid";
+
+	/**
+	 * This property is used to determine the selection behavior of the table.
+	 * If set to `single`, only one row can be selected at a time.
+	 * If set to `multiple`, multiple rows can be selected at a time.
+	 * If set to `single` or `multiple`, checkboxes will be displayed in the first column of each row.
+	 * If not set, no rows can be selected.
+	 */
+	@property({ type: String, reflect: true })
+	public selects: undefined | "single" | "multiple";
+
+	/**
+	 * An array of  values that have been selected.
+	 */
+	@property({ type: Array })
+	public selected: string[] = [];
+
+	/**
+	 * The set of selected row values.
+	 */
+	private selectedSet = new Set();
+
+	/**
+	 * The content of the rows rendered by the virtualized table.
+	 *
+	 * The key is the value of the sp-table-row, and the value is the sp-table-row's content (not the row itself).
+	 */
+	@property({ type: Array })
+	public items: Record[] = [];
+
+	/**
+	 * The value of an item.
+	 *
+	 * By default, it is set to the index of the sp-table-row.
+	 */
+	@property({ type: Object })
+	public itemValue = (_item: unknown, index: number): string => {
+		return `${index}`;
+	};
+
+	/**
+	 * This property is used to determine the scroll behavior of the virtualized table.
+	 *
+	 * If this is set to `true`, make sure to specify a height in the sp-table's inline styles.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public scroller = false;
+
+	/**
+	 * Deliver the Table with additional visual emphasis to selected rows.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public emphasized = false;
+
+	/**
+	 * Display with `quiet` variant styles.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public quiet = false;
+
+	/**
+	 * Changes the spacing around table cell content.
+	 */
+	@property({ type: String, reflect: true })
+	public density?: "compact" | "spacious";
+
+	/**
+	 * The table body element.
+	 */
+	private tableBody?: TableBody;
+
+	/**
+	 * The checkbox cell located in the table head, used for selecting or deselecting all rows.
+	 */
+	private tableHeadCheckboxCell?: TableCheckboxCell;
+
+	/**
+	 * The table head element.
+	 */
+	private get tableHead(): TableHead {
+		return this.querySelector("sp-table-head") as TableHead;
+	}
+
+	/**
+	 * Retrieves all table rows if the table is not virtualized.
+	 * Returns an empty array if the table is virtualized.
+	 */
+	private get tableRows(): TableRow[] {
+		if (this.isVirtualized) {
+			return [];
+		}
+
+		return [...this.querySelectorAll("sp-table-row")] as TableRow[];
+	}
+
+	/**
+	 * Returns whether the table is virtualized.
+	 */
+	private get isVirtualized(): boolean {
+		return !!this.items.length;
+	}
+
+	/**
+	 * Sets focus on the first sortable table head cell, if one exists.
+	 */
+	public override focus(): void {
+		const sortableHeadCell = this.querySelector(
+			"sp-table-head-cell[sortable]",
+		) as TableHeadCell;
+
+		if (sortableHeadCell) {
+			sortableHeadCell.focus();
+		}
+	}
+
+	/**
+	 * Selects all rows in the table.
+	 * If the table is virtualized, it selects all items in the items array.
+	 * If the table is not virtualized, it selects all visible rows.
+	 */
+	private selectAllRows(): void {
+		if (this.isVirtualized) {
+			this.items.forEach((item, index: number) => {
+				if (item._$rowType$ !== 1) {
+					this.selectedSet.add(this.itemValue(item, index));
+				}
+			});
+		} else {
+			this.tableRows.forEach((row) => {
+				row.selected = true; // Visually
+				this.selectedSet.add(row.value); // Prepares table state
+			});
+		}
+
+		this.selected = [...this.selectedSet];
+
+		if (!this.tableHeadCheckboxCell) return;
+
+		this.tableHeadCheckboxCell.checked = true;
+		this.tableHeadCheckboxCell.indeterminate = false;
+	}
+
+	/**
+	 * Deselects all rows in the table.
+	 * Clears the selected set and updates the selected property.
+	 */
+	private deselectAllRows(): void {
+		this.selectedSet.clear();
+		this.selected = [];
+
+		if (!this.isVirtualized) {
+			// Deselect all visible rows
+			const selectedRows = [
+				...this.querySelectorAll("[selected]"),
+			] as TableRow[];
+
+			selectedRows.forEach((row) => {
+				row.selected = false;
+			});
+		}
+
+		if (!this.tableHeadCheckboxCell) return;
+
+		this.tableHeadCheckboxCell.checked = false;
+		this.tableHeadCheckboxCell.indeterminate = false;
+	}
+
+	/**
+	 * Manages the selection checkboxes in the table.
+	 * Adds or removes checkboxes based on the `selects` property.
+	 */
+	protected manageSelects(): void {
+		const checkboxes = this.querySelectorAll("sp-table-checkbox-cell");
+		const checkbox = document.createElement("sp-table-checkbox-cell");
+
+		if (this.selects) {
+			let allSelected = false;
+
+			if (this.isVirtualized) {
+				// Check if all items are selected in a virtualized table
+				allSelected =
+					this.selected.length > 0 &&
+					this.selected.length === this.items.length;
+			} else {
+				// Update the selected state of each row and add checkboxes if necessary
+				this.tableRows.forEach((row) => {
+					row.selected = this.selectedSet.has(row.value);
+
+					// Create and initialize checkboxes in all rows within the table body.
+					if (!row.querySelector(":scope > sp-table-checkbox-cell")) {
+						const clonedCheckbox = checkbox.cloneNode() as TableCheckboxCell;
+
+						checkbox.emphasized = this.emphasized;
+						row.insertAdjacentElement("afterbegin", clonedCheckbox);
+						checkbox.checked = row.selected;
+					}
+				});
+
+				allSelected = this.selected.length === this.tableRows.length;
+			}
+
+			// Create and initialize table head checkbox cell.
+			if (!this.tableHeadCheckboxCell) {
+				this.tableHeadCheckboxCell = document.createElement(
+					"sp-table-checkbox-cell",
+				) as TableCheckboxCell;
+				this.tableHeadCheckboxCell.headCell = true;
+				this.tableHeadCheckboxCell.emphasized = this.emphasized;
+				this.tableHead?.insertAdjacentElement(
+					"afterbegin",
+					this.tableHeadCheckboxCell,
+				);
+			}
+
+			this.manageHeadCheckbox(allSelected);
+		} else {
+			// Remove all checkbox cells.
+			checkboxes.forEach((box) => {
+				box.remove();
+			});
+
+			delete this.tableHeadCheckboxCell;
+		}
+	}
+
+	/**
+	 * Validates the selected rows in the table.
+	 * Ensures that the selected rows are still present in the table.
+	 * Dispatches a 'change' event if the selected rows have changed.
+	 */
+	protected validateSelected(): void {
+		const rowValues = new Set();
+
+		if (this.isVirtualized) {
+			// Add all item values to the set in a virtualized table
+			this.items.forEach((item, index) => {
+				const value = this.itemValue(item, index);
+
+				rowValues.add(value);
+			});
+		} else {
+			// Add all row values to the set in a non-virtualized table
+			this.tableRows.forEach((row) => {
+				rowValues.add(row.value);
+			});
+		}
+
+		const oldSelectedCount = this.selected.length;
+
+		// Filter the selected items to ensure they are still present in the table
+		this.selected = this.selected.filter((selectedItem) =>
+			rowValues.has(selectedItem),
+		);
+
+		// Dispatch a 'change' event if the selected rows have changed
+		if (oldSelectedCount !== this.selected.length) {
+			this.dispatchEvent(
+				new Event("change", {
+					cancelable: true,
+					bubbles: true,
+					composed: true,
+				}),
+			);
+		}
+
+		this.selectedSet = new Set(this.selected);
+	}
+
+	/**
+	 * Manages the selected rows in the table.
+	 * Validates the selected rows and updates the selected state of each row.
+	 */
+	protected manageSelected(): void {
+		this.validateSelected();
+
+		if (this.isVirtualized) return;
+
+		// Update the selected state of each row
+		this.tableRows.forEach((row) => {
+			row.selected = this.selectedSet.has(row.value);
+		});
+
+		// Update the state of the table head checkbox cell
+		if (this.tableHeadCheckboxCell) {
+			this.tableHeadCheckboxCell.checked =
+				this.selected.length === this.tableRows.length;
+		}
+	}
+
+	/**
+	 * Manages the checkboxes in the table.
+	 * Adds or removes checkboxes based on the `selects` property.
+	 */
+	protected manageCheckboxes(): void {
+		if (this.selects) {
+			// Create and initialize table head checkbox cell.
+			this.tableHeadCheckboxCell = document.createElement(
+				"sp-table-checkbox-cell",
+			) as TableCheckboxCell;
+			this.tableHeadCheckboxCell.headCell = true;
+			this.tableHeadCheckboxCell.emphasized = this.emphasized;
+
+			const allSelected = this.selected.length === this.tableRows.length;
+
+			this.manageHeadCheckbox(allSelected);
+
+			this.tableHead?.insertAdjacentElement(
+				"afterbegin",
+				this.tableHeadCheckboxCell,
+			);
+
+			// Create and initialize checkboxes in all rows within the table body.
+			this.tableRows.forEach((row) => {
+				const checkbox = document.createElement("sp-table-checkbox-cell");
+
+				checkbox.emphasized = this.emphasized;
+				row.insertAdjacentElement("afterbegin", checkbox);
+				row.selected = this.selectedSet.has(row.value);
+				checkbox.checked = row.selected;
+			});
+		} else {
+			// Remove all checkbox cells.
+			this.tableHead?.querySelector("sp-table-checkbox-cell")?.remove();
+			this.tableRows.forEach((row) => {
+				row.checkboxCells[0]?.remove();
+
+				if (this.selected.length) {
+					row.selected = this.selectedSet.has(row.value);
+				}
+			});
+		}
+	}
+
+	/**
+	 * Manages the state of the table head checkbox cell.
+	 * Updates the checkbox state based on the selection state of the table rows.
+	 */
+	protected manageHeadCheckbox(allSelected: boolean): void {
+		if (!this.tableHeadCheckboxCell) return;
+
+		this.tableHeadCheckboxCell.selectsSingle = this.selects === "single";
+		this.tableHeadCheckboxCell.emphasized = this.emphasized;
+		this.tableHeadCheckboxCell.checked = allSelected;
+		this.tableHeadCheckboxCell.indeterminate =
+			this.selected.length > 0 && !allSelected;
+	}
+
+	/**
+	 * Handles change events for the table.
+	 * Manages the selection state of rows based on the `selects` property.
+	 * Dispatches a 'change' event if the selection state has changed.
+	 */
+	protected handleChange(event: Event): void {
+		event.stopPropagation();
+
+		const previousSelectedSet = new Set(this.selectedSet);
+		const previousSelected = [...this.selected];
+
+		const { target } = event;
+		const { parentElement: rowItem } = target as HTMLElement & {
+			parentElement: TableRow;
+		};
+
+		if (!rowItem.value) {
+			const { checkbox } = target as TableCheckboxCell;
+
+			if (!checkbox) return;
+
+			if (checkbox.checked || checkbox.indeterminate) {
+				this.selectAllRows();
+			} else {
+				this.deselectAllRows();
+			}
+		} else {
+			switch (this.selects) {
+				case "single": {
+					this.deselectAllRows();
+
+					if (rowItem.selected) {
+						this.selectedSet.add(rowItem.value);
+						this.selected = [...this.selectedSet];
+					}
+
+					break;
+				}
+				case "multiple": {
+					if (rowItem.selected) {
+						this.selectedSet.add(rowItem.value);
+					} else {
+						this.selectedSet.delete(rowItem.value);
+					}
+
+					this.selected = [...this.selectedSet];
+
+					const allSelected = this.selected.length === this.tableRows.length;
+
+					if (!this.tableHeadCheckboxCell) return;
+
+					this.tableHeadCheckboxCell.checked = allSelected;
+					this.tableHeadCheckboxCell.indeterminate =
+						this.selected.length > 0 && !allSelected;
+
+					break;
+				}
+				default: {
+					break;
+				}
+			}
+		}
+
+		const applyDefault = this.dispatchEvent(
+			new Event("change", {
+				cancelable: true,
+				bubbles: true,
+				composed: true,
+			}),
+		);
+
+		if (!applyDefault) {
+			event.preventDefault();
+			this.selectedSet = previousSelectedSet;
+			this.selected = previousSelected;
+		}
+	}
+
+	/**
+	 * Scrolls to the row at the specified index.
+	 */
+	public scrollToIndex(index?: number): void {
+		if (index && !!this.tableBody) {
+			const virtualizerParent = this.tableBody as unknown as {
+				[virtualizerRef]: Virtualizer;
+			};
+			const item = virtualizerParent[virtualizerRef].element(index);
+
+			if (item) {
+				item.scrollIntoView();
+			}
+		}
+	}
+
+	/**
+	 * Renders the component template.
+	 * Sets up the change event listener on the slot.
+	 */
+	protected override render(): TemplateResult {
+		return html`  `;
+	}
+
+	/**
+	 * Called before the element updates.
+	 * Validates selected rows and manages checkboxes if the component has not updated yet.
+	 * Manages selects and selected rows based on property changes.
+	 */
+	protected override willUpdate(changed: PropertyValues): void {
+		if (!this.hasUpdated) {
+			this.validateSelected();
+			this.manageCheckboxes();
+		}
+
+		if (changed.has("selects")) {
+			this.manageSelects();
+		}
+
+		if (changed.has("selected") && this.hasUpdated) {
+			this.manageSelected();
+		}
+	}
+
+	/**
+	 * Called when the element is updated.
+	 * Renders virtualized items if there are any, otherwise removes the aria-rowcount attribute.
+	 */
+	protected override updated(): void {
+		if (this.items.length) {
+			this.renderVirtualizedItems();
+		} else {
+			this.removeAttribute("aria-rowcount");
+		}
+	}
+
+	/**
+	 * Renders virtualized items in the table.
+	 * Ensures screen readers can announce the true size of the table despite virtualization.
+	 */
+	protected renderVirtualizedItems(): void {
+		// Rendering updates into the table while disconnected can
+		// cause runaway event binding in ancestor elements.
+		if (!this.isConnected) return;
+
+		if (!this.tableBody) {
+			this.tableBody = this.querySelector("sp-table-body") as TableBody;
+
+			if (!this.tableBody) {
+				this.tableBody = document.createElement("sp-table-body");
+				this.append(this.tableBody);
+			}
+
+			this.tableBody.addEventListener(
+				"rangeChanged",
+				(event: RangeChangedEvent) => {
+					this.dispatchEvent(
+						new RangeChangedEvent({
+							first: event.first,
+							last: event.last,
+						}),
+					);
+				},
+			);
+
+			this.tableBody.addEventListener(
+				"visibilityChanged",
+				(event: VisibilityChangedEvent) => {
+					this.dispatchEvent(
+						new VisibilityChangedEvent({
+							first: event.first,
+							last: event.last,
+						}),
+					);
+				},
+			);
+		}
+
+		// Ensures screenreaders can announce the true size of the table
+		// despite virtualization only rendering a subset of rows.
+		this.setAttribute("aria-rowcount", `${this.items.length}`);
+
+		const config: VirtualizeDirectiveConfig> = {
+			items: this.items,
+			renderItem: this.renderItem,
+			scroller: this.scroller,
+		};
+
+		render(html` ${virtualize(config)} `, this.tableBody);
+	}
+
+	/**
+	 * Called when the element is disconnected from the document's DOM.
+	 */
+	public override disconnectedCallback(): void {
+		super.disconnectedCallback();
+	}
 }
diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
index 01d3448070..866ba02691 100644
--- a/packages/tags/src/Tag.ts
+++ b/packages/tags/src/Tag.ts
@@ -11,19 +11,19 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    PropertyValues,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+	CSSResultArray,
+	html,
+	nothing,
+	PropertyValues,
+	SizedMixin,
+	SpectrumElement,
+	TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
 
-import '@spectrum-web-components/button/sp-clear-button.js';
+import "@spectrum-web-components/button/sp-clear-button.js";
 
-import styles from './tag.css.js';
+import styles from "./tag.css.js";
 
 /**
  * The `Tag` component is a custom web component that represents a tag element.
@@ -37,173 +37,174 @@ import styles from './tag.css.js';
  * @fires delete - Dispatched when the tag is deleted.
  */
 export class Tag extends SizedMixin(SpectrumElement, {
-    validSizes: ['s', 'm', 'l'],
-    noDefaultSize: true,
+	validSizes: ["s", "m", "l"],
+	noDefaultSize: true,
 }) {
-    /**
+	/**
      * Returns the styles to be applied to the component.
 \
      */
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    /**
-     * Indicates whether the tag is deletable.
-     *
-     * This property is reflected as an attribute, meaning changes to the property
-     * will be mirrored in the corresponding HTML attribute.
-     */
-    @property({ type: Boolean, reflect: true })
-    public deletable = false;
-
-    /**
-     * Indicates whether the tag is disabled.
-     *
-     * This property is reflected as an attribute, meaning changes to the property
-     * will be mirrored in the corresponding HTML attribute.
-     */
-    @property({ type: Boolean, reflect: true })
-    public disabled = false;
-
-    /**
-     * Indicates whether the tag is readonly.
-     *
-     * This property is reflected as an attribute, meaning changes to the property
-     * will be mirrored in the corresponding HTML attribute.
-     */
-    @property({ type: Boolean, reflect: true })
-    public readonly = false;
-
-    constructor() {
-        super();
-        // Add event listener for focusin event to handle focus-related interactions.
-        this.addEventListener('focusin', this.handleFocusin);
-    }
-
-    /**
-     * Handles the focusin event.
-     *
-     * Adds event listeners for focusout and keydown events when the tag gains focus.
-     */
-    private handleFocusin = (): void => {
-        this.addEventListener('focusout', this.handleFocusout);
-        this.addEventListener('keydown', this.handleKeydown);
-    };
-
-    /**
-     * Handles the focusout event.
-     *
-     * Removes event listeners for keydown and focusout events when the tag loses focus.
-     */
-    private handleFocusout = (): void => {
-        this.removeEventListener('keydown', this.handleKeydown);
-        this.removeEventListener('focusout', this.handleFocusout);
-    };
-
-    /**
-     * Handles the keydown event.
-     *
-     * Deletes the tag if the Backspace, Space, or Delete key is pressed and the tag is deletable and not disabled.
-     */
-    private handleKeydown = (event: KeyboardEvent): void => {
-        if (!this.deletable || this.disabled) {
-            return;
-        }
-
-        const { code } = event;
-
-        switch (code) {
-            case 'Backspace':
-            case 'Space':
-            case 'Delete':
-                this.delete();
-            default:
-                return;
-        }
-    };
-
-    /**
-     * Deletes the tag element.
-     *
-     * Dispatches a 'delete' event and removes the tag if the event is not canceled.
-     */
-    private delete(): void {
-        if (this.readonly) {
-            return;
-        }
-
-        const applyDefault = this.dispatchEvent(
-            new Event('delete', {
-                bubbles: true,
-                cancelable: true,
-                composed: true,
-            })
-        );
-
-        if (!applyDefault) {
-            return;
-        }
-
-        this.remove();
-    }
-
-    /**
-     * Renders the content of the tag component.
-     *
-     * This method returns a template result containing the avatar, icon, label, and clear button (if deletable).
-     */
-    protected override render(): TemplateResult {
-        return html`
-            
-            
-            
-            ${this.deletable
-                ? html`
-                      
-                  `
-                : nothing}
-        `;
-    }
-
-    /**
-     * Lifecycle method called after the component's DOM has been rendered for the first time.
-     *
-     * Sets the role attribute to 'listitem' and tabindex to '0' if the tag is deletable.
-     */
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'listitem');
-        }
-
-        if (this.deletable) {
-            this.setAttribute('tabindex', '0');
-        }
-    }
-
-    /**
-     * Lifecycle method called when the component updates.
-     *
-     * Sets or removes the 'aria-disabled' attribute based on the 'disabled' property.
-     */
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (changes.has('disabled')) {
-            if (this.disabled) {
-                this.setAttribute('aria-disabled', 'true');
-            } else {
-                this.removeAttribute('aria-disabled');
-            }
-        }
-    }
+	public static override get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/**
+	 * Indicates whether the tag is deletable.
+	 *
+	 * This property is reflected as an attribute, meaning changes to the property
+	 * will be mirrored in the corresponding HTML attribute.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public deletable = false;
+
+	/**
+	 * Indicates whether the tag is disabled.
+	 *
+	 * This property is reflected as an attribute, meaning changes to the property
+	 * will be mirrored in the corresponding HTML attribute.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public disabled = false;
+
+	/**
+	 * Indicates whether the tag is readonly.
+	 *
+	 * This property is reflected as an attribute, meaning changes to the property
+	 * will be mirrored in the corresponding HTML attribute.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public readonly = false;
+
+	constructor() {
+		super();
+		// Add event listener for focusin event to handle focus-related interactions.
+		this.addEventListener("focusin", this.handleFocusin);
+	}
+
+	/**
+	 * Handles the focusin event.
+	 *
+	 * Adds event listeners for focusout and keydown events when the tag gains focus.
+	 */
+	private handleFocusin = (): void => {
+		this.addEventListener("focusout", this.handleFocusout);
+		this.addEventListener("keydown", this.handleKeydown);
+	};
+
+	/**
+	 * Handles the focusout event.
+	 *
+	 * Removes event listeners for keydown and focusout events when the tag loses focus.
+	 */
+	private handleFocusout = (): void => {
+		this.removeEventListener("keydown", this.handleKeydown);
+		this.removeEventListener("focusout", this.handleFocusout);
+	};
+
+	/**
+	 * Handles the keydown event.
+	 *
+	 * Deletes the tag if the Backspace, Space, or Delete key is pressed and the tag is deletable and not disabled.
+	 */
+	private handleKeydown = (event: KeyboardEvent): void => {
+		if (!this.deletable || this.disabled) {
+			return;
+		}
+
+		const { code } = event;
+
+		switch (code) {
+			case "Backspace":
+			case "Space":
+			case "Delete":
+				this.delete();
+				break;
+			default:
+				return;
+		}
+	};
+
+	/**
+	 * Deletes the tag element.
+	 *
+	 * Dispatches a 'delete' event and removes the tag if the event is not canceled.
+	 */
+	private delete(): void {
+		if (this.readonly) {
+			return;
+		}
+
+		const applyDefault = this.dispatchEvent(
+			new Event("delete", {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+			}),
+		);
+
+		if (!applyDefault) {
+			return;
+		}
+
+		this.remove();
+	}
+
+	/**
+	 * Renders the content of the tag component.
+	 *
+	 * This method returns a template result containing the avatar, icon, label, and clear button (if deletable).
+	 */
+	protected override render(): TemplateResult {
+		return html`
+			
+			
+			
+			${this.deletable
+				? html`
+						
+					`
+				: nothing}
+		`;
+	}
+
+	/**
+	 * Lifecycle method called after the component's DOM has been rendered for the first time.
+	 *
+	 * Sets the role attribute to 'listitem' and tabindex to '0' if the tag is deletable.
+	 */
+	protected override firstUpdated(changes: PropertyValues): void {
+		super.firstUpdated(changes);
+
+		if (!this.hasAttribute("role")) {
+			this.setAttribute("role", "listitem");
+		}
+
+		if (this.deletable) {
+			this.setAttribute("tabindex", "0");
+		}
+	}
+
+	/**
+	 * Lifecycle method called when the component updates.
+	 *
+	 * Sets or removes the 'aria-disabled' attribute based on the 'disabled' property.
+	 */
+	protected override updated(changes: PropertyValues): void {
+		super.updated(changes);
+
+		if (changes.has("disabled")) {
+			if (this.disabled) {
+				this.setAttribute("aria-disabled", "true");
+			} else {
+				this.removeAttribute("aria-disabled");
+			}
+		}
+	}
 }
diff --git a/packages/tags/stories/tags.stories.ts b/packages/tags/stories/tags.stories.ts
index c9f460e56a..6168cd76d1 100644
--- a/packages/tags/stories/tags.stories.ts
+++ b/packages/tags/stories/tags.stories.ts
@@ -9,148 +9,124 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/tags/sp-tag.js';
-import '@spectrum-web-components/tags/sp-tags.js';
-import '@spectrum-web-components/avatar/sp-avatar.js';
-import { avatar } from '../../avatar/stories/images';
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
+import "@spectrum-web-components/tags/sp-tag.js";
+import "@spectrum-web-components/tags/sp-tags.js";
+import "@spectrum-web-components/avatar/sp-avatar.js";
+import { avatar } from "../../avatar/stories/images.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
 
 export default {
-    title: 'Tags',
-    component: 'sp-tags',
-    argTypes: { onDelete: { action: 'delete' } },
+	title: "Tags",
+	component: "sp-tags",
+	argTypes: { onDelete: { action: "delete" } },
 };
 
 type Props = {
-    onDelete: () => void;
+	onDelete: () => void;
 };
 
 export const Default = (): TemplateResult => {
-    return html`
-        
-            Tag 1
-            Tag 2
-            Tag 3
-        
-        

-        

-        
-            
-                Tag 1
-                
-            
-            
-                Tag 2
-                
-            
-            
-                Tag 3
-                
-            
-        
-        

-        

-        
-            
-                Tag 1
-                
-            
-            
-                Tag 2
-                
-            
-            
-                Tag 3
-                
-            
-        
-    `;
+	return html`
+		
+			Tag 1
+			Tag 2
+			Tag 3
+		
+		

+		

+		
+			
+				Tag 1
+				
+			
+			
+				Tag 2
+				
+			
+			
+				Tag 3
+				
+			
+		
+		

+		

+		
+			
+				Tag 1
+				
+			
+			
+				Tag 2
+				
+			
+			
+				Tag 3
+				
+			
+		
+	`;
 };
 
 export const deletable = (args: Props): TemplateResult => {
-    return html`
-        
-            Tag 1
-            Tag 2
-            Tag 3
-        
-        

-        

-        
-            
-                Tag 1
-                
-            
-            
-                Tag 2
-                
-            
-            
-                Tag 3
-                
-            
-        
-        

-        

-        
-            
-                Tag 1
-                
-            
-            
-                Tag 2
-                
-            
-            
-                Tag 3
-                
-            
-        
-    `;
+	return html`
+		
+			Tag 1
+			Tag 2
+			Tag 3
+		
+		

+		

+		
+			
+				Tag 1
+				
+			
+			
+				Tag 2
+				
+			
+			
+				Tag 3
+				
+			
+		
+		

+		

+		
+			
+				Tag 1
+				
+			
+			
+				Tag 2
+				
+			
+			
+				Tag 3
+				
+			
+		
+	`;
 };
 
 export const readonly = (): TemplateResult => {
-    return html`
-        
-            
-                Tag 1
-                
-            
-            
-                Tag 2
-                
-            
-            
-                Tag 3
-                
-            
-        
-    `;
+	return html`
+		
+			
+				Tag 1
+				
+			
+			
+				Tag 2
+				
+			
+			
+				Tag 3
+				
+			
+		
+	`;
 };
diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts
index 3cdbfbe0b1..11b5b42198 100644
--- a/packages/textfield/test/textfield.test.ts
+++ b/packages/textfield/test/textfield.test.ts
@@ -9,1187 +9,1159 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Textfield, TextfieldType } from '../';
-import { elementUpdated, expect, html, litFixture } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { findDescribedNode } from '../../../test/testing-helpers-a11y.js';
-import { HelpText } from '@spectrum-web-components/help-text';
-import '@spectrum-web-components/help-text/sp-help-text.js';
-import '@spectrum-web-components/textfield/sp-textfield.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import { elementUpdated, expect, html, litFixture } from "@open-wc/testing";
+import { HelpText } from "@spectrum-web-components/help-text";
+import "@spectrum-web-components/help-text/sp-help-text.js";
 import {
-    isFirefox,
-    isWebKit,
-} from '@spectrum-web-components/shared/src/platform.js';
-import { fixture } from '../../../test/testing-helpers.js';
-
-describe('Textfield', () => {
-    testForLitDevWarnings(
-        async () =>
-            await litFixture(html`
-                
-            `)
-    );
-    it('loads default textfield accessibly', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-    it('loads multiline textfield accessibly', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-
-    it('manages tabIndex while disabled', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.tabIndex).to.equal(0);
-
-        el.disabled = true;
-        await elementUpdated(el);
-
-        expect(el.tabIndex).to.equal(-1);
-
-        el.tabIndex = 2;
-        await elementUpdated(el);
-
-        expect(el.tabIndex).to.equal(-1);
-
-        el.disabled = false;
-        await elementUpdated(el);
-
-        expect(el.tabIndex).to.equal(2);
-    });
-
-    it('manages tabIndex before first render', async () => {
-        const el = document.createElement('sp-textfield') as Textfield;
-
-        expect(el.focusElement).to.be.null;
-        expect(el.tabIndex).to.equal(0);
-
-        el.remove();
-    });
-    it('loads', async () => {
-        const testPlaceholder = 'Enter your name';
-        const el = await litFixture(html`
-            
-        `);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('input')
-            : null;
-
-        expect(input).to.not.be.null;
-        const placeholder = input ? input.placeholder : null;
-
-        expect(placeholder).to.equal(testPlaceholder);
-    });
-    it('multiline', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('textarea')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('multiline with rows', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('textarea')
-            : null;
-
-        expect(input).to.not.be.null;
-        expect(input?.getAttribute('rows')).to.equal('5');
-    });
-    it('multiline with 1 row has smaller height than multiline without explicit rows', async () => {
-        const oneRowEl = await litFixture(html`
-            
-        `);
-
-        expect(oneRowEl).to.not.equal(undefined);
-        const oneRowTextarea = oneRowEl.shadowRoot
-            ? oneRowEl.shadowRoot.querySelector('textarea')
-            : null;
-
-        expect(oneRowTextarea).to.not.be.null;
-        expect(oneRowTextarea?.getAttribute('rows')).to.equal('1');
-
-        const defaultEL = await litFixture(html`
-            
-        `);
-
-        expect(defaultEL).to.not.equal(undefined);
-        const defaultTextarea = oneRowEl.shadowRoot
-            ? defaultEL.shadowRoot.querySelector('textarea')
-            : null;
-
-        expect(defaultTextarea).to.not.be.null;
-        expect(defaultTextarea?.getAttribute('rows')).to.be.null;
-
-        const boundsDefaultElement = defaultTextarea?.getBoundingClientRect();
-        const boundsOneRowElement = oneRowTextarea?.getBoundingClientRect();
-
-        expect(boundsDefaultElement?.height).to.be.greaterThan(
-            boundsOneRowElement?.height ?? 0
-        );
-    });
-    it('multiline with rows does not resize', async () => {
-        const el = await litFixture(html`
-            
-        `);
-        // Resizing only effects the block size of the host rect, so measure the `focusElement` when resizing.
-        const sizedElement = (el as HTMLElement & { focusElement: HTMLElement })
-            .focusElement;
-        const startBounds = sizedElement.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [startBounds.right - 6, startBounds.bottom - 6],
-                },
-                {
-                    type: 'down',
-                },
-                {
-                    type: 'move',
-                    position: [startBounds.right + 50, startBounds.bottom + 50],
-                },
-                {
-                    type: 'up',
-                },
-            ],
-        });
-
-        const endBounds = sizedElement.getBoundingClientRect();
-
-        expect(endBounds.height).equals(startBounds.height);
-        expect(endBounds.width).equals(startBounds.width);
-    });
-    it('resizes by default', async function () {
-        if (isWebKit()) {
-            this.skip();
-        }
-
-        const el = await fixture(html`
-            
-        `);
-        // Resizing only effects the block size of the host rect, so measure the `focusElement` when resizing.
-        const sizedElement = (el as HTMLElement & { focusElement: HTMLElement })
-            .focusElement;
-        const startBounds = sizedElement.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [startBounds.right - 6, startBounds.bottom - 6],
-                },
-                {
-                    type: 'down',
-                },
-                {
-                    type: 'move',
-                    position: [startBounds.right + 50, startBounds.bottom + 50],
-                },
-                {
-                    type: 'up',
-                },
-            ],
-        });
-
-        const endBounds = sizedElement.getBoundingClientRect();
-
-        expect(endBounds.height).to.be.greaterThan(startBounds.height);
-        expect(endBounds.width).to.be.greaterThan(startBounds.width);
-    });
-    it('accepts resize styling', async () => {
-        const el = await litFixture(html`
-            
-        `);
-        const startBounds = el.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [startBounds.right - 2, startBounds.bottom - 2],
-                },
-                {
-                    type: 'down',
-                },
-                {
-                    type: 'move',
-                    position: [startBounds.right + 50, startBounds.bottom + 50],
-                },
-                {
-                    type: 'up',
-                },
-            ],
-        });
-
-        const endBounds = el.getBoundingClientRect();
-
-        expect(endBounds.width).equals(startBounds.width);
-        expect(endBounds.height).equals(startBounds.height);
-    });
-    it('grows', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        expect(el).to.not.equal(undefined);
-        const sizer = el.shadowRoot
-            ? el.shadowRoot.querySelector('#sizer')
-            : null;
-
-        expect(sizer).to.not.be.null;
-    });
-    it('multiline with rows and grows does not grow', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        expect(el).to.not.equal(undefined);
-        const sizer = el.shadowRoot
-            ? el.shadowRoot.querySelector('#sizer')
-            : null;
-
-        expect(sizer).to.be.null;
-    });
-    it('multiline with grows actually grow', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        expect(el).to.not.equal(undefined);
-        const textArea = el.shadowRoot.querySelector('textarea');
-
-        expect(textArea).to.not.be.null;
-
-        if (textArea) {
-            const initialHeight = textArea.offsetHeight;
-
-            el.focus();
-            el.select();
-            for (let i = 0; i < 100; i++) {
-                await sendKeys({
-                    type: 'ab',
-                });
-                await sendKeys({ press: 'Enter' });
-            }
-            const finalHeight = textArea.offsetHeight;
-
-            expect(initialHeight).to.be.lt(finalHeight);
-        }
-    });
-
-    it('valid', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#valid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('handles `name` attribute', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        expect(el).to.not.equal(undefined);
-        expect(el.name).to.be.undefined;
-
-        el.setAttribute('name', 'test');
-        expect(el.name).to.be.equal('test');
-    });
-    it('handles `name` attribute with multiline', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('textarea')
-            : null;
-
-        expect(input?.name).to.equal('name');
-    });
-    it('valid - multiline', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#valid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('valid - required', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#valid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('valid - multiline - required', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#valid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('valid - boundary-type assertions', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#valid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('valid - multiline - boundary-type assertions', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#valid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('valid - boundary-type assertions and title', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot.querySelector('#valid');
-
-        expect(input).to.not.be.null;
-        expect(el.focusElement).to.not.have.attribute('title');
-    });
-    it('valid - multiline - boundary-type assertions and title', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot.querySelector('#valid');
-
-        expect(input).to.not.be.null;
-        expect(el.focusElement).to.not.have.attribute('title');
-    });
-    it('valid - unicode', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#valid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('valid - multiline - unicode', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#valid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('invalid', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#invalid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('invalid - multiline', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#invalid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('invalid - required', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#invalid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('invalid - multiline - required', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#invalid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('invalid - unicode', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#invalid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('invalid - multiline - unicode', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#invalid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('invalid - boundary-type assertions', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#invalid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('invalid - boundary-type assertions and title', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot.querySelector('#invalid');
-
-        expect(input).to.not.be.null;
-        expect(el.focusElement).to.have.attribute('title');
-    });
-    it('invalid - multiline - boundary-type assertions and title', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot.querySelector('#invalid');
-
-        expect(input).to.not.be.null;
-        expect(el.focusElement).to.have.attribute('title');
-    });
-    it('invalid - multiline - boundary-type assertions', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el).to.not.equal(undefined);
-        const input = el.shadowRoot
-            ? el.shadowRoot.querySelector('#invalid')
-            : null;
-
-        expect(input).to.not.be.null;
-    });
-    it('receives focus', async () => {
-        let activeElement: HTMLInputElement | null = null;
-        const onFocusIn = (event: Event): void => {
-            const path = event.composedPath();
-
-            activeElement = path[0] as HTMLInputElement;
-        };
-
-        document.addEventListener('focusin', onFocusIn);
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        el.focus();
-        await elementUpdated(el);
-
-        expect(activeElement === el.focusElement).to.be.true;
-        document.removeEventListener('focusin', onFocusIn);
-    });
-    it('does not receive focus when disabled', async () => {
-        let activeElement: HTMLInputElement | null = null;
-        const onFocusIn = (event: Event): void => {
-            const path = event.composedPath();
-
-            activeElement = path[0] as HTMLInputElement;
-        };
-
-        document.addEventListener('focusin', onFocusIn);
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        el.focus();
-        await elementUpdated(el);
-
-        expect(activeElement === el.focusElement).to.be.false;
-        expect(document.activeElement === el).to.be.false;
-        document.removeEventListener('focusin', onFocusIn);
-
-        el.click();
-        await elementUpdated(el);
-
-        expect(activeElement === el.focusElement).to.be.false;
-        expect(document.activeElement === el).to.be.false;
-        document.removeEventListener('focusin', onFocusIn);
-    });
-    it('accepts input', async () => {
-        const testValue = 'Test Name';
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        el.focusElement.value = testValue;
-        el.focusElement.dispatchEvent(new Event('input'));
-
-        expect(el.value).to.equal(testValue);
-    });
-    it('selects', async () => {
-        const testValue = 'Test Name';
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.value).to.equal(testValue);
-
-        el.focus();
-        el.select();
-        await sendKeys({ press: 'Backspace' });
-        expect(el.value).to.equal('');
-    });
-    it('setSelectionRange', async () => {
-        const testValue = 'Test Name';
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.value).to.equal(testValue);
-
-        el.focus();
-        el.setSelectionRange(0, 'Test '.length);
-        await sendKeys({ press: 'Backspace' });
-        expect(el.value).to.equal('Name');
-    });
-    it('handles minlength with required', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        el.focus();
-        await sendKeys({
-            type: 'ab',
-        });
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('ab');
-        expect(el.checkValidity()).to.be.false;
-
-        await sendKeys({
-            type: 'c',
-        });
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('abc');
-        expect(el.checkValidity()).to.be.true;
-    });
-    it('accepts maxlength', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        el.focus();
-
-        await sendKeys({
-            type: 'a',
-        });
-        await elementUpdated(el);
-        expect(el.value).to.equal('a');
-        expect(el.checkValidity()).to.be.false;
-
-        await sendKeys({
-            type: 'b',
-        });
-        await elementUpdated(el);
-        expect(el.value).to.equal('ab');
-        expect(el.checkValidity());
-
-        await sendKeys({
-            type: 'c',
-        });
-        await elementUpdated(el);
-        expect(el.value).to.equal('abc');
-        expect(el.checkValidity());
-
-        await sendKeys({
-            type: 'd',
-        });
-        await elementUpdated(el);
-        expect(el.value).to.equal('abc');
-        expect(el.checkValidity());
-
-        await sendKeys({
-            press: 'Backspace',
-        });
-        await elementUpdated(el);
-        expect(el.value).to.equal('ab');
-        expect(el.checkValidity());
-
-        await sendKeys({
-            press: 'Backspace',
-        });
-        await elementUpdated(el);
-        expect(el.value).to.equal('a');
-        expect(el.checkValidity()).to.be.false;
-    });
-    it('dispatches a `change` event', async () => {
-        const testValue = 'Test Name';
-        let eventSource = null as Textfield | null;
-        const onChange = (event: Event): void => {
-            eventSource = event.composedPath()[0] as Textfield;
-        };
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        el.focusElement.value = testValue;
-        el.focusElement.dispatchEvent(new Event('input'));
-        el.focusElement.dispatchEvent(new Event('change'));
-
-        expect(el.value).to.equal(testValue);
-        const testSource = eventSource as Textfield;
-
-        expect(testSource).to.equal(el);
-    });
-    it('passes through `autocomplete` attribute', async () => {
-        let el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        let input = el.shadowRoot ? el.shadowRoot.querySelector('input') : null;
-
-        expect(input).to.exist;
-
-        if (input) {
-            expect(input.getAttribute('autocomplete')).to.equal('off');
-        }
-
-        el = await litFixture(html`
-            
-        `);
-        await elementUpdated(el);
-        input = el.shadowRoot ? el.shadowRoot.querySelector('input') : null;
-        expect(input).to.exist;
-
-        if (input) {
-            expect(input.getAttribute('autocomplete')).to.not.exist;
-        }
-    });
-    it('tests on `required` changes', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.invalid).to.be.false;
-
-        el.required = true;
-        await elementUpdated(el);
-        expect(el.invalid).to.be.true;
-    });
-    it('manages `allowed-keys`', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('');
-
-        const inputElement = el.focusElement;
-
-        el.focusElement.value = 'asdf';
-        inputElement.dispatchEvent(new InputEvent('input'));
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('asdf');
-
-        inputElement.value = `asdff`;
-        inputElement.setSelectionRange(1, 1);
-        inputElement.dispatchEvent(new InputEvent('input'));
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('asdff');
-        expect(inputElement.selectionStart).to.equal(1);
-
-        inputElement.value = `asdoff`;
-        inputElement.setSelectionRange(4, 4);
-        inputElement.dispatchEvent(new InputEvent('input'));
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('asdff');
-        expect(inputElement.selectionStart).to.equal(3);
-    });
-    describe('type attribute', () => {
-        // references:
-        // https://developer.mozilla.org/en-US/docs/Glossary/IDL#content_versus_idl_attributes
-        // https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes
-        // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#keywords-and-enumerated-attributes
-
-        it('assigns valid attributes to the property', async () => {
-            const types: TextfieldType[] = [
-                'text',
-                'url',
-                'tel',
-                'email',
-                'password',
-            ];
-
-            for await (const t of types) {
-                const el = await litFixture(html`
-                    
-                `);
-
-                expect(el.type).equals(t);
-
-                el.setAttribute('type', 'url');
-                expect(el.type).equals('url');
-            }
-        });
-        it('represents invalid and missing attributes as "text"', async () => {
-            const el1 = await litFixture(html`
-                
-            `);
-
-            const el2 = await litFixture(html`
-                
-            `);
-
-            expect(el1.type).equals('text');
-            expect(el2.type).equals('text');
-
-            el1.setAttribute('type', 'submit');
-            expect(el1.type).equals('text');
-        });
-        it('reflects valid property assignments', async () => {
-            const el = await litFixture(html`
-                
-            `);
-
-            el.type = 'email';
-            await elementUpdated(el);
-
-            expect(el.getAttribute('type')).equals('email');
-            expect(el.type).equals('email');
-        });
-        it('reflects invalid assignments but sets state to "text"', async () => {
-            const el = await litFixture(html`
-                
-            `);
-
-            // eslint-disable-next-line
-            // @ts-ignore
-            el.type = 'range';
-            await elementUpdated(el);
-
-            expect(el.getAttribute('type')).equals('range');
-            expect(el.type).equals('text');
-        });
-    });
-    describe('help text', () => {
-        const name = 'This is a textfield';
-        const description = 'This text helps you fill it out';
-        const descriptionNegative = 'This text helps you when invalid';
-
-        it('accepts help text in `slot="help-text"`', async () => {
-            const el = await litFixture(html`
-                
-                    ${description}
-                
-            `);
-
-            await elementUpdated(el);
-
-            await findDescribedNode(name, description);
-        });
-        it('accepts help text in `slot="help-text"` w/ own ID', async () => {
-            const el = await litFixture(html`
-                
-                    
-                        ${description}
-                    
-                
-            `);
-
-            await elementUpdated(el);
-
-            await findDescribedNode(name, description);
-        });
-        it('manages neutral/negative help text pairs', async () => {
-            const el = await litFixture(html`
-                
-                    ${description}
-                    
-                        ${descriptionNegative}
-                    
-                
-            `);
-            const negativeHelpText = el.querySelector(
-                '[slot="negative-help-text"]'
-            ) as HelpText;
-
-            await elementUpdated(el);
-
-            expect(negativeHelpText.variant).to.equal('neutral');
-            await findDescribedNode(name, description);
-
-            el.invalid = true;
-            await elementUpdated(el);
-
-            expect(negativeHelpText.variant).to.equal('negative');
-
-            // There's an issue in the way Firefox processes the a11y tree for
-            // elements with an `invalid` attribute/property. The following try/catch
-            // wrapping preps the code to pass in that context regardless and error
-            // when our tooling no longer runs into this error.
-            try {
-                await findDescribedNode(name, descriptionNegative);
-
-                if (isFirefox()) {
-                    throw new Error('this does not fail anymore...');
-                }
-            } catch (error) {
-                if (!isFirefox()) {
-                    throw error;
-                }
-            }
-        });
-        it('manages neutral/negative help text pairs w/ own IDs', async () => {
-            const el = await litFixture(html`
-                
-                    
-                        ${description}
-                    
-                    
-                        ${descriptionNegative}
-                    
-                
-            `);
-            const negativeHelpText = el.querySelector(
-                '[slot="negative-help-text"]'
-            ) as HelpText;
-
-            await elementUpdated(el);
-
-            expect(negativeHelpText.variant).to.equal('neutral');
-            await findDescribedNode(name, description);
-
-            el.invalid = true;
-            await elementUpdated(el);
-
-            expect(negativeHelpText.variant).to.equal('negative');
-
-            // There's an issue in the way Firefox processes the a11y tree for
-            // elements with an `invalid` attribute/property. The following try/catch
-            // wrapping preps the code to pass in that context regardless and error
-            // when our tooling no longer runs into this error.
-            try {
-                await findDescribedNode(name, descriptionNegative);
-
-                if (isFirefox()) {
-                    throw new Error('this does not fail anymore...');
-                }
-            } catch (error) {
-                if (!isFirefox()) {
-                    throw error;
-                }
-            }
-        });
-    });
+	isFirefox,
+	isWebKit,
+} from "@spectrum-web-components/shared/src/platform.js";
+import "@spectrum-web-components/textfield/sp-textfield.js";
+import { sendKeys } from "@web/test-runner-commands";
+import { Textfield, TextfieldType } from "../";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { findDescribedNode } from "../../../test/testing-helpers-a11y.js";
+import {
+	fixture,
+	testForLitDevWarnings,
+} from "../../../test/testing-helpers.js";
+
+describe("Textfield", () => {
+	testForLitDevWarnings(
+		async () =>
+			await litFixture(html`
+				
+			`),
+	);
+	it("loads default textfield accessibly", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		await expect(el).to.be.accessible();
+	});
+	it("loads multiline textfield accessibly", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		await expect(el).to.be.accessible();
+	});
+
+	it("manages tabIndex while disabled", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el.tabIndex).to.equal(0);
+
+		el.disabled = true;
+		await elementUpdated(el);
+
+		expect(el.tabIndex).to.equal(-1);
+
+		el.tabIndex = 2;
+		await elementUpdated(el);
+
+		expect(el.tabIndex).to.equal(-1);
+
+		el.disabled = false;
+		await elementUpdated(el);
+
+		expect(el.tabIndex).to.equal(2);
+	});
+
+	it("manages tabIndex before first render", async () => {
+		const el = document.createElement("sp-textfield") as Textfield;
+
+		expect(el.focusElement).to.be.null;
+		expect(el.tabIndex).to.equal(0);
+
+		el.remove();
+	});
+	it("loads", async () => {
+		const testPlaceholder = "Enter your name";
+		const el = await litFixture(html`
+			
+		`);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
+
+		expect(input).to.not.be.null;
+		const placeholder = input ? input.placeholder : null;
+
+		expect(placeholder).to.equal(testPlaceholder);
+	});
+	it("multiline", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("textarea")
+			: null;
+
+		expect(input).to.not.be.null;
+	});
+	it("multiline with rows", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("textarea")
+			: null;
+
+		expect(input).to.not.be.null;
+		expect(input?.getAttribute("rows")).to.equal("5");
+	});
+	it("multiline with 1 row has smaller height than multiline without explicit rows", async () => {
+		const oneRowEl = await litFixture(html`
+			
+		`);
+
+		expect(oneRowEl).to.not.equal(undefined);
+		const oneRowTextarea = oneRowEl.shadowRoot
+			? oneRowEl.shadowRoot.querySelector("textarea")
+			: null;
+
+		expect(oneRowTextarea).to.not.be.null;
+		expect(oneRowTextarea?.getAttribute("rows")).to.equal("1");
+
+		const defaultEL = await litFixture(html`
+			
+		`);
+
+		expect(defaultEL).to.not.equal(undefined);
+		const defaultTextarea = oneRowEl.shadowRoot
+			? defaultEL.shadowRoot.querySelector("textarea")
+			: null;
+
+		expect(defaultTextarea).to.not.be.null;
+		expect(defaultTextarea?.getAttribute("rows")).to.be.null;
+
+		const boundsDefaultElement = defaultTextarea?.getBoundingClientRect();
+		const boundsOneRowElement = oneRowTextarea?.getBoundingClientRect();
+
+		expect(boundsDefaultElement?.height).to.be.greaterThan(
+			boundsOneRowElement?.height ?? 0,
+		);
+	});
+	it("multiline with rows does not resize", async () => {
+		const el = await litFixture(html`
+			
+		`);
+		// Resizing only effects the block size of the host rect, so measure the `focusElement` when resizing.
+		const sizedElement = (el as HTMLElement & { focusElement: HTMLElement })
+			.focusElement;
+		const startBounds = sizedElement.getBoundingClientRect();
+
+		await sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: [startBounds.right - 6, startBounds.bottom - 6],
+				},
+				{
+					type: "down",
+				},
+				{
+					type: "move",
+					position: [startBounds.right + 50, startBounds.bottom + 50],
+				},
+				{
+					type: "up",
+				},
+			],
+		});
+
+		const endBounds = sizedElement.getBoundingClientRect();
+
+		expect(endBounds.height).equals(startBounds.height);
+		expect(endBounds.width).equals(startBounds.width);
+	});
+	it("resizes by default", async function () {
+		if (isWebKit()) {
+			this.skip();
+		}
+
+		const el = await fixture(html`
+			
+		`);
+		// Resizing only effects the block size of the host rect, so measure the `focusElement` when resizing.
+		const sizedElement = (el as HTMLElement & { focusElement: HTMLElement })
+			.focusElement;
+		const startBounds = sizedElement.getBoundingClientRect();
+
+		await sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: [startBounds.right - 6, startBounds.bottom - 6],
+				},
+				{
+					type: "down",
+				},
+				{
+					type: "move",
+					position: [startBounds.right + 50, startBounds.bottom + 50],
+				},
+				{
+					type: "up",
+				},
+			],
+		});
+
+		const endBounds = sizedElement.getBoundingClientRect();
+
+		expect(endBounds.height).to.be.greaterThan(startBounds.height);
+		expect(endBounds.width).to.be.greaterThan(startBounds.width);
+	});
+	it("accepts resize styling", async () => {
+		const el = await litFixture(html`
+			
+		`);
+		const startBounds = el.getBoundingClientRect();
+
+		await sendMouse({
+			steps: [
+				{
+					type: "move",
+					position: [startBounds.right - 2, startBounds.bottom - 2],
+				},
+				{
+					type: "down",
+				},
+				{
+					type: "move",
+					position: [startBounds.right + 50, startBounds.bottom + 50],
+				},
+				{
+					type: "up",
+				},
+			],
+		});
+
+		const endBounds = el.getBoundingClientRect();
+
+		expect(endBounds.width).equals(startBounds.width);
+		expect(endBounds.height).equals(startBounds.height);
+	});
+	it("grows", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		expect(el).to.not.equal(undefined);
+		const sizer = el.shadowRoot ? el.shadowRoot.querySelector("#sizer") : null;
+
+		expect(sizer).to.not.be.null;
+	});
+	it("multiline with rows and grows does not grow", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		expect(el).to.not.equal(undefined);
+		const sizer = el.shadowRoot ? el.shadowRoot.querySelector("#sizer") : null;
+
+		expect(sizer).to.be.null;
+	});
+	it("multiline with grows actually grow", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		expect(el).to.not.equal(undefined);
+		const textArea = el.shadowRoot.querySelector("textarea");
+
+		expect(textArea).to.not.be.null;
+
+		if (textArea) {
+			const initialHeight = textArea.offsetHeight;
+
+			el.focus();
+			el.select();
+			for (let i = 0; i < 100; i++) {
+				await sendKeys({
+					type: "ab",
+				});
+				await sendKeys({ press: "Enter" });
+			}
+			const finalHeight = textArea.offsetHeight;
+
+			expect(initialHeight).to.be.lt(finalHeight);
+		}
+	});
+
+	it("valid", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+
+		expect(input).to.not.be.null;
+	});
+	it("handles `name` attribute", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		expect(el).to.not.equal(undefined);
+		expect(el.name).to.be.undefined;
+
+		el.setAttribute("name", "test");
+		expect(el.name).to.be.equal("test");
+	});
+	it("handles `name` attribute with multiline", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("textarea")
+			: null;
+
+		expect(input?.name).to.equal("name");
+	});
+	it("valid - multiline", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+
+		expect(input).to.not.be.null;
+	});
+	it("valid - required", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+
+		expect(input).to.not.be.null;
+	});
+	it("valid - multiline - required", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+
+		expect(input).to.not.be.null;
+	});
+	it("valid - boundary-type assertions", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+
+		expect(input).to.not.be.null;
+	});
+	it("valid - multiline - boundary-type assertions", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+
+		expect(input).to.not.be.null;
+	});
+	it("valid - boundary-type assertions and title", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot.querySelector("#valid");
+
+		expect(input).to.not.be.null;
+		expect(el.focusElement).to.not.have.attribute("title");
+	});
+	it("valid - multiline - boundary-type assertions and title", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot.querySelector("#valid");
+
+		expect(input).to.not.be.null;
+		expect(el.focusElement).to.not.have.attribute("title");
+	});
+	it("valid - unicode", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+
+		expect(input).to.not.be.null;
+	});
+	it("valid - multiline - unicode", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
+
+		expect(input).to.not.be.null;
+	});
+	it("invalid", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("#invalid")
+			: null;
+
+		expect(input).to.not.be.null;
+	});
+	it("invalid - multiline", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("#invalid")
+			: null;
+
+		expect(input).to.not.be.null;
+	});
+	it("invalid - required", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("#invalid")
+			: null;
+
+		expect(input).to.not.be.null;
+	});
+	it("invalid - multiline - required", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("#invalid")
+			: null;
+
+		expect(input).to.not.be.null;
+	});
+	it("invalid - unicode", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("#invalid")
+			: null;
+
+		expect(input).to.not.be.null;
+	});
+	it("invalid - multiline - unicode", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("#invalid")
+			: null;
+
+		expect(input).to.not.be.null;
+	});
+	it("invalid - boundary-type assertions", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("#invalid")
+			: null;
+
+		expect(input).to.not.be.null;
+	});
+	it("invalid - boundary-type assertions and title", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot.querySelector("#invalid");
+
+		expect(input).to.not.be.null;
+		expect(el.focusElement).to.have.attribute("title");
+	});
+	it("invalid - multiline - boundary-type assertions and title", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot.querySelector("#invalid");
+
+		expect(input).to.not.be.null;
+		expect(el.focusElement).to.have.attribute("title");
+	});
+	it("invalid - multiline - boundary-type assertions", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		expect(el).to.not.equal(undefined);
+		const input = el.shadowRoot
+			? el.shadowRoot.querySelector("#invalid")
+			: null;
+
+		expect(input).to.not.be.null;
+	});
+	it("receives focus", async () => {
+		let activeElement: HTMLInputElement | null = null;
+		const onFocusIn = (event: Event): void => {
+			const path = event.composedPath();
+
+			activeElement = path[0] as HTMLInputElement;
+		};
+
+		document.addEventListener("focusin", onFocusIn);
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		el.focus();
+		await elementUpdated(el);
+
+		expect(activeElement === el.focusElement).to.be.true;
+		document.removeEventListener("focusin", onFocusIn);
+	});
+	it("does not receive focus when disabled", async () => {
+		let activeElement: HTMLInputElement | null = null;
+		const onFocusIn = (event: Event): void => {
+			const path = event.composedPath();
+
+			activeElement = path[0] as HTMLInputElement;
+		};
+
+		document.addEventListener("focusin", onFocusIn);
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		el.focus();
+		await elementUpdated(el);
+
+		expect(activeElement === el.focusElement).to.be.false;
+		expect(document.activeElement === el).to.be.false;
+		document.removeEventListener("focusin", onFocusIn);
+
+		el.click();
+		await elementUpdated(el);
+
+		expect(activeElement === el.focusElement).to.be.false;
+		expect(document.activeElement === el).to.be.false;
+		document.removeEventListener("focusin", onFocusIn);
+	});
+	it("accepts input", async () => {
+		const testValue = "Test Name";
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		el.focusElement.value = testValue;
+		el.focusElement.dispatchEvent(new Event("input"));
+
+		expect(el.value).to.equal(testValue);
+	});
+	it("selects", async () => {
+		const testValue = "Test Name";
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+		expect(el.value).to.equal(testValue);
+
+		el.focus();
+		el.select();
+		await sendKeys({ press: "Backspace" });
+		expect(el.value).to.equal("");
+	});
+	it("setSelectionRange", async () => {
+		const testValue = "Test Name";
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+		expect(el.value).to.equal(testValue);
+
+		el.focus();
+		el.setSelectionRange(0, "Test ".length);
+		await sendKeys({ press: "Backspace" });
+		expect(el.value).to.equal("Name");
+	});
+	it("handles minlength with required", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		el.focus();
+		await sendKeys({
+			type: "ab",
+		});
+		await elementUpdated(el);
+
+		expect(el.value).to.equal("ab");
+		expect(el.checkValidity()).to.be.false;
+
+		await sendKeys({
+			type: "c",
+		});
+		await elementUpdated(el);
+
+		expect(el.value).to.equal("abc");
+		expect(el.checkValidity()).to.be.true;
+	});
+	it("accepts maxlength", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+		el.focus();
+
+		await sendKeys({
+			type: "a",
+		});
+		await elementUpdated(el);
+		expect(el.value).to.equal("a");
+		expect(el.checkValidity()).to.be.false;
+
+		await sendKeys({
+			type: "b",
+		});
+		await elementUpdated(el);
+		expect(el.value).to.equal("ab");
+		expect(el.checkValidity());
+
+		await sendKeys({
+			type: "c",
+		});
+		await elementUpdated(el);
+		expect(el.value).to.equal("abc");
+		expect(el.checkValidity());
+
+		await sendKeys({
+			type: "d",
+		});
+		await elementUpdated(el);
+		expect(el.value).to.equal("abc");
+		expect(el.checkValidity());
+
+		await sendKeys({
+			press: "Backspace",
+		});
+		await elementUpdated(el);
+		expect(el.value).to.equal("ab");
+		expect(el.checkValidity());
+
+		await sendKeys({
+			press: "Backspace",
+		});
+		await elementUpdated(el);
+		expect(el.value).to.equal("a");
+		expect(el.checkValidity()).to.be.false;
+	});
+	it("dispatches a `change` event", async () => {
+		const testValue = "Test Name";
+		let eventSource = null as Textfield | null;
+		const onChange = (event: Event): void => {
+			eventSource = event.composedPath()[0] as Textfield;
+		};
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+
+		el.focusElement.value = testValue;
+		el.focusElement.dispatchEvent(new Event("input"));
+		el.focusElement.dispatchEvent(new Event("change"));
+
+		expect(el.value).to.equal(testValue);
+		const testSource = eventSource as Textfield;
+
+		expect(testSource).to.equal(el);
+	});
+	it("passes through `autocomplete` attribute", async () => {
+		let el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+		let input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
+
+		expect(input).to.exist;
+
+		if (input) {
+			expect(input.getAttribute("autocomplete")).to.equal("off");
+		}
+
+		el = await litFixture(html`  `);
+		await elementUpdated(el);
+		input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
+		expect(input).to.exist;
+
+		if (input) {
+			expect(input.getAttribute("autocomplete")).to.not.exist;
+		}
+	});
+	it("tests on `required` changes", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+		expect(el.invalid).to.be.false;
+
+		el.required = true;
+		await elementUpdated(el);
+		expect(el.invalid).to.be.true;
+	});
+	it("manages `allowed-keys`", async () => {
+		const el = await litFixture(html`
+			
+		`);
+
+		await elementUpdated(el);
+		expect(el.value).to.equal("");
+
+		const inputElement = el.focusElement;
+
+		el.focusElement.value = "asdf";
+		inputElement.dispatchEvent(new InputEvent("input"));
+
+		await elementUpdated(el);
+		expect(el.value).to.equal("asdf");
+
+		inputElement.value = `asdff`;
+		inputElement.setSelectionRange(1, 1);
+		inputElement.dispatchEvent(new InputEvent("input"));
+
+		await elementUpdated(el);
+		expect(el.value).to.equal("asdff");
+		expect(inputElement.selectionStart).to.equal(1);
+
+		inputElement.value = `asdoff`;
+		inputElement.setSelectionRange(4, 4);
+		inputElement.dispatchEvent(new InputEvent("input"));
+
+		await elementUpdated(el);
+		expect(el.value).to.equal("asdff");
+		expect(inputElement.selectionStart).to.equal(3);
+	});
+	describe("type attribute", () => {
+		// references:
+		// https://developer.mozilla.org/en-US/docs/Glossary/IDL#content_versus_idl_attributes
+		// https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes
+		// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#keywords-and-enumerated-attributes
+
+		it("assigns valid attributes to the property", async () => {
+			const types: TextfieldType[] = [
+				"text",
+				"url",
+				"tel",
+				"email",
+				"password",
+			];
+
+			for await (const t of types) {
+				const el = await litFixture(html`
+					
+				`);
+
+				expect(el.type).equals(t);
+
+				el.setAttribute("type", "url");
+				expect(el.type).equals("url");
+			}
+		});
+		it('represents invalid and missing attributes as "text"', async () => {
+			const el1 = await litFixture(html`
+				
+			`);
+
+			const el2 = await litFixture(html`
+				
+			`);
+
+			expect(el1.type).equals("text");
+			expect(el2.type).equals("text");
+
+			el1.setAttribute("type", "submit");
+			expect(el1.type).equals("text");
+		});
+		it("reflects valid property assignments", async () => {
+			const el = await litFixture(html`
+				
+			`);
+
+			el.type = "email";
+			await elementUpdated(el);
+
+			expect(el.getAttribute("type")).equals("email");
+			expect(el.type).equals("email");
+		});
+		it('reflects invalid assignments but sets state to "text"', async () => {
+			const el = await litFixture(html`
+				
+			`);
+
+			// eslint-disable-next-line
+			// @ts-ignore
+			el.type = "range";
+			await elementUpdated(el);
+
+			expect(el.getAttribute("type")).equals("range");
+			expect(el.type).equals("text");
+		});
+	});
+	describe("help text", () => {
+		const name = "This is a textfield";
+		const description = "This text helps you fill it out";
+		const descriptionNegative = "This text helps you when invalid";
+
+		it('accepts help text in `slot="help-text"`', async () => {
+			const el = await litFixture(html`
+				
+					${description}
+				
+			`);
+
+			await elementUpdated(el);
+
+			await findDescribedNode(name, description);
+		});
+		it('accepts help text in `slot="help-text"` w/ own ID', async () => {
+			const el = await litFixture(html`
+				
+					
+						${description}
+					
+				
+			`);
+
+			await elementUpdated(el);
+
+			await findDescribedNode(name, description);
+		});
+		it("manages neutral/negative help text pairs", async () => {
+			const el = await litFixture(html`
+				
+					${description}
+					
+						${descriptionNegative}
+					
+				
+			`);
+			const negativeHelpText = el.querySelector(
+				'[slot="negative-help-text"]',
+			) as HelpText;
+
+			await elementUpdated(el);
+
+			expect(negativeHelpText.variant).to.equal("neutral");
+			await findDescribedNode(name, description);
+
+			el.invalid = true;
+			await elementUpdated(el);
+
+			expect(negativeHelpText.variant).to.equal("negative");
+
+			// There's an issue in the way Firefox processes the a11y tree for
+			// elements with an `invalid` attribute/property. The following try/catch
+			// wrapping preps the code to pass in that context regardless and error
+			// when our tooling no longer runs into this error.
+			try {
+				await findDescribedNode(name, descriptionNegative);
+
+				if (isFirefox()) {
+					throw new Error("this does not fail anymore...");
+				}
+			} catch (error) {
+				if (!isFirefox()) {
+					throw error;
+				}
+			}
+		});
+		it("manages neutral/negative help text pairs w/ own IDs", async () => {
+			const el = await litFixture(html`
+				
+					
+						${description}
+					
+					
+						${descriptionNegative}
+					
+				
+			`);
+			const negativeHelpText = el.querySelector(
+				'[slot="negative-help-text"]',
+			) as HelpText;
+
+			await elementUpdated(el);
+
+			expect(negativeHelpText.variant).to.equal("neutral");
+			await findDescribedNode(name, description);
+
+			el.invalid = true;
+			await elementUpdated(el);
+
+			expect(negativeHelpText.variant).to.equal("negative");
+
+			// There's an issue in the way Firefox processes the a11y tree for
+			// elements with an `invalid` attribute/property. The following try/catch
+			// wrapping preps the code to pass in that context regardless and error
+			// when our tooling no longer runs into this error.
+			try {
+				await findDescribedNode(name, descriptionNegative);
+
+				if (isFirefox()) {
+					throw new Error("this does not fail anymore...");
+				}
+			} catch (error) {
+				if (!isFirefox()) {
+					throw error;
+				}
+			}
+		});
+	});
 });
diff --git a/packages/thumbnail/test/thumbnail.test.ts b/packages/thumbnail/test/thumbnail.test.ts
index cc54566c5d..83572b8473 100644
--- a/packages/thumbnail/test/thumbnail.test.ts
+++ b/packages/thumbnail/test/thumbnail.test.ts
@@ -10,89 +10,89 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 
-import '@spectrum-web-components/thumbnail/sp-thumbnail.js';
-import { Thumbnail } from '..';
-import { thumbnail } from '../stories/images.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-import { stub } from 'sinon';
+import "@spectrum-web-components/thumbnail/sp-thumbnail.js";
+import { stub } from "sinon";
+import { Thumbnail } from "../";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { thumbnail } from "../stories/images.js";
 
-describe('Thumbnail', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-                    Woman crouching
-                
-            `)
-    );
-    it('loads default thumbnail accessibly', async () => {
-        const el = await fixture(html`
-            
-                Woman crouching
-            
-        `);
+describe("Thumbnail", () => {
+	testForLitDevWarnings(
+		async () =>
+			await fixture(html`
+				
+					Woman crouching
+				
+			`),
+	);
+	it("loads default thumbnail accessibly", async () => {
+		const el = await fixture(html`
+			
+				Woman crouching
+			
+		`);
 
-        await elementUpdated(el);
+		await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
-    it('can be size `50`', async () => {
-        const el = await fixture(html`
-            
-                Woman crouching
-            
-        `);
+		await expect(el).to.be.accessible();
+	});
+	it("can be size `50`", async () => {
+		const el = await fixture(html`
+			
+				Woman crouching
+			
+		`);
 
-        await elementUpdated(el);
+		await elementUpdated(el);
 
-        expect(el.size).to.equal('50');
-    });
-    it('accepts `background`', async () => {
-        const el = await fixture(html`
-            
-                Woman crouching
-            
-        `);
+		expect(el.size).to.equal("50");
+	});
+	it("accepts `background`", async () => {
+		const el = await fixture(html`
+			
+				Woman crouching
+			
+		`);
 
-        const background = el.shadowRoot.querySelector('.background');
+		const background = el.shadowRoot.querySelector(".background");
 
-        expect(background).to.not.be.null;
-    });
-    it('renders the opacity checkerboard and slot', async () => {
-        const el = await fixture(html`
-            
-                Woman crouching
-            
-        `);
+		expect(background).to.not.be.null;
+	});
+	it("renders the opacity checkerboard and slot", async () => {
+		const el = await fixture(html`
+			
+				Woman crouching
+			
+		`);
 
-        await elementUpdated(el);
-        el.setAttribute('layer', 'true');
-        await elementUpdated(el);
-        const checkerboard = el.shadowRoot.querySelector(
-            '.opacity-checkerboard.layer-inner'
-        );
+		await elementUpdated(el);
+		el.setAttribute("layer", "true");
+		await elementUpdated(el);
+		const checkerboard = el.shadowRoot.querySelector(
+			".opacity-checkerboard.layer-inner",
+		);
 
-        expect(checkerboard).to.not.be.null;
+		expect(checkerboard).to.not.be.null;
 
-        const slot = checkerboard?.querySelector('slot');
+		const slot = checkerboard?.querySelector("slot");
 
-        expect(slot).to.not.be.null;
-    });
-    describe('dev mode', () => {
-        let consoleWarnStub!: ReturnType;
+		expect(slot).to.not.be.null;
+	});
+	describe("dev mode", () => {
+		let consoleWarnStub!: ReturnType;
 
-        before(() => {
-            window.__swc.verbose = true;
-            consoleWarnStub = stub(console, 'warn');
-        });
-        afterEach(() => {
-            consoleWarnStub.resetHistory();
-        });
-        after(() => {
-            window.__swc.verbose = false;
-            consoleWarnStub.restore();
-        });
-    });
+		before(() => {
+			window.__swc.verbose = true;
+			consoleWarnStub = stub(console, "warn");
+		});
+		afterEach(() => {
+			consoleWarnStub.resetHistory();
+		});
+		after(() => {
+			window.__swc.verbose = false;
+			consoleWarnStub.restore();
+		});
+	});
 });
diff --git a/packages/toast/src/Toast.ts b/packages/toast/src/Toast.ts
index 66d37f6363..e921483f09 100644
--- a/packages/toast/src/Toast.ts
+++ b/packages/toast/src/Toast.ts
@@ -11,36 +11,36 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/button/sp-close-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
-import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
-
-import toastStyles from './toast.css.js';
+	CSSResultArray,
+	html,
+	PropertyValues,
+	SpectrumElement,
+	TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import "@spectrum-web-components/button/sp-close-button.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
+import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
+
+import toastStyles from "./toast.css.js";
 
 export const toastVariants: ToastVariants[] = [
-    'negative',
-    'positive',
-    'info',
-    'error',
-    'warning',
+	"negative",
+	"positive",
+	"info",
+	"error",
+	"warning",
 ];
 
 export type ToastVariants =
-    | 'negative'
-    | 'positive'
-    | 'info'
-    | 'error'
-    | 'warning'
-    | '';
+	| "negative"
+	| "positive"
+	| "info"
+	| "error"
+	| "warning"
+	| "";
 
 /**
  * The `Toast` component is a custom web component that displays a brief message to the user.
@@ -56,314 +56,312 @@ export type ToastVariants =
  */
 
 export class Toast extends FocusVisiblePolyfillMixin(SpectrumElement) {
-    /**
-     * Returns the styles to be applied to the component.
-     */
-    public static override get styles(): CSSResultArray {
-        return [toastStyles];
-    }
-
-    /**
-     * The `open` property indicates whether the toast is visible or hidden.
-     *
-     * This property is reflected as an attribute, meaning changes to the property
-     * will be mirrored in the corresponding HTML attribute.
-     */
-    @property({ type: Boolean, reflect: true })
-    public open = false;
-
-    /**
-     * Sets the timeout for the toast.
-     *
-     * When a timeout is provided, it represents the number of milliseconds from when
-     * the Toast was placed on the page before it will automatically dismiss itself.
-     *
-     * Accessibility concerns require that a Toast is available for at least 6000ms
-     * before being dismissed, so any timeout of less than 6000ms will be raised to
-     * that baseline.
-     *
-     * It is suggested that messages longer than 120 words should receive an additional
-     * 1000ms in their timeout for each additional 120 words in the message.
-     *
-     * For example, a message with 240 words should have a timeout of 7000ms,
-     * and a message with 360 words should have a timeout of 8000ms.
-     */
-    //TODO(#4939): Align on the timeout minimum with design
-    @property({ type: Number })
-    public set timeout(timeout: number | null) {
-        const hasTimeout = typeof timeout !== null && (timeout as number) > 0;
-
-        // Ensure the timeout is at least 6000ms if a valid timeout is provided.
-        const newTimeout = hasTimeout
-            ? Math.max(6000, timeout as number)
-            : null;
-
-        const oldValue = this.timeout;
-
-        // Update the countdown start time if a new timeout is set.
-        if (newTimeout && this.countdownStart) {
-            this.countdownStart = performance.now();
-        }
-
-        // Set the new timeout value and request an update.
-        this._timeout = newTimeout;
-        this.requestUpdate('timeout', oldValue);
-    }
-
-    /**
-     * Gets the timeout for the toast.
-     */
-    public get timeout(): number | null {
-        return this._timeout;
-    }
-
-    /**
-     * Internal property to store the timeout value.
-     */
-    private _timeout: number | null = null;
-
-    /**
-     * Sets the variant of the toast.
-     *
-     * Validates the variant to ensure it is one of the allowed values. The variant applies specific styling when set to `negative`, `positive`, `info`, `error`, or `warning`. The variants `error` and `warning` are deprecated and should be replaced with `negative`.
-     *
-     * If the variant is valid, it sets the attribute and updates the internal property.
-     * If the variant is invalid, it removes the attribute and sets the internal property to an empty string.
-     */
-    @property({ type: String })
-    public set variant(variant: ToastVariants) {
-        if (variant === this.variant) {
-            return;
-        }
-
-        const oldValue = this.variant;
-
-        // Validate the variant is one of the allowed values else remove the attribute.
-        if (toastVariants.includes(variant)) {
-            this.setAttribute('variant', variant);
-            this._variant = variant;
-        } else {
-            this.removeAttribute('variant');
-            this._variant = '';
-        }
-
-        this.requestUpdate('variant', oldValue);
-    }
-
-    /**
-     * Gets the variant of the toast.
-     */
-    public get variant(): ToastVariants {
-        return this._variant;
-    }
-
-    /**
-     * Internal property to store the variant value.
-     */
-    private _variant: ToastVariants = '';
-
-    /**
-     * The label for the icon displayed in the toast.
-     * This property is reflected as an attribute named 'icon-label'.
-     *
-     * This provides a text alternative for the icon to ensure accessibility.
-     * If the `iconLabel` property is not set, the icon will use the `variant` to dynamically set the `label`.
-     */
-    @property({ type: String, attribute: 'icon-label' })
-    public iconLabel?: string;
-
-    /**
-     * Renders the appropriate icon based on the variant.
-     * The icon is displayed in the toast and provides a visual indication of the toast's type.
-     */
-    //TODO(#4931): Address the deprecated variants or remove the flags
-    private renderIcon(
-        variant: ToastVariants,
-        iconLabel?: string
-    ): TemplateResult {
-        switch (variant) {
-            case 'info':
-                return html`
-                    
-                `;
-            case 'negative':
-            case 'error': // deprecated
-                return html`
-                    
-                `;
-            case 'warning': // deprecated
-                return html`
-                    
-                `;
-            case 'positive':
-                return html`
-                    
-                `;
-            default:
-                return html``;
-        }
-    }
-
-    /**
-     * Internal property to store the start time of the countdown.
-     */
-    private countdownStart = 0;
-
-    /**
-     * Internal property to store the ID of the next animation frame request.
-     */
-    private nextCount = -1;
-
-    /**
-     * Handles the countdown logic for the toast.
-     * If the countdown duration has elapsed, it triggers the close action.
-     * Otherwise, it continues the countdown.
-     */
-    private doCountdown = (time: number): void => {
-        if (!this.countdownStart) {
-            this.countdownStart = performance.now();
-        }
-
-        if (time - this.countdownStart > (this._timeout as number)) {
-            this.shouldClose();
-            this.countdownStart = 0;
-        } else {
-            this.countdown();
-        }
-    };
-
-    /**
-     * Initiates the countdown by requesting the next animation frame.
-     */
-    private countdown = (): void => {
-        cancelAnimationFrame(this.nextCount);
-        this.nextCount = requestAnimationFrame(this.doCountdown);
-    };
-
-    /**
-     * Pauses the countdown when the toast loses focus.
-     * Adds an event listener to resume the countdown when the toast regains focus.
-     */
-    private holdCountdown = (): void => {
-        this.stopCountdown();
-        this.addEventListener('focusout', this.resumeCountdown);
-    };
-
-    /**
-     * Resumes the countdown when the toast regains focus.
-     * Removes the event listener for holding the countdown.
-     */
-    private resumeCountdown = (): void => {
-        this.removeEventListener('focusout', this.holdCountdown);
-        this.countdown();
-    };
-
-    /**
-     * Starts the countdown for the toast.
-     * Adds an event listener to pause the countdown when the toast gains focus.
-     */
-    private startCountdown(): void {
-        this.countdown();
-        this.addEventListener('focusin', this.holdCountdown);
-    }
-
-    /**
-     * Stops the countdown for the toast.
-     * Cancels the next animation frame and resets the countdown start time.
-     */
-    private stopCountdown(): void {
-        cancelAnimationFrame(this.nextCount);
-        this.countdownStart = 0;
-    }
-
-    /**
-     * Dispatches a 'close' event and closes the toast if the event is not canceled.
-     */
-    private shouldClose(): void {
-        const applyDefault = this.dispatchEvent(
-            new CustomEvent('close', {
-                composed: true,
-                bubbles: true,
-                cancelable: true,
-            })
-        );
-
-        if (applyDefault) {
-            this.close();
-        }
-    }
-
-    /**
-     * Closes the toast by setting the open property to false.
-     */
-    public close(): void {
-        this.open = false;
-    }
-
-    /**
-     * Renders the content of the toast component.
-     * This method returns a template result containing the icon, body, and close button of the toast.
-     */
-    protected override render(): TemplateResult {
-        return html`
-            ${this.renderIcon(this.variant, this.iconLabel)}
-            
-            

-                
-            

-        `;
-    }
-
-    /**
-     * Lifecycle method called when the component updates.
-     * This method handles the countdown logic based on the `open` and `timeout` properties.
-     */
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (changes.has('open')) {
-            if (this.open) {
-                // Start the countdown if the toast is open and a timeout is set.
-                if (this.timeout) {
-                    this.startCountdown();
-                }
-            } else {
-                // Stop the countdown if the toast is closed and a timeout is set.
-                if (this.timeout) {
-                    this.stopCountdown();
-                }
-            }
-        }
-
-        if (changes.has('timeout')) {
-            if (this.timeout !== null && this.open) {
-                // Start the countdown if a valid timeout is set and the toast is open.
-                this.startCountdown();
-            } else {
-                // Stop the countdown if no valid timeout is set or the toast is closed.
-                this.stopCountdown();
-            }
-        }
-    }
+	/**
+	 * Returns the styles to be applied to the component.
+	 */
+	public static override get styles(): CSSResultArray {
+		return [toastStyles];
+	}
+
+	/**
+	 * The `open` property indicates whether the toast is visible or hidden.
+	 *
+	 * This property is reflected as an attribute, meaning changes to the property
+	 * will be mirrored in the corresponding HTML attribute.
+	 */
+	@property({ type: Boolean, reflect: true })
+	public open = false;
+
+	/**
+	 * Sets the timeout for the toast.
+	 *
+	 * When a timeout is provided, it represents the number of milliseconds from when
+	 * the Toast was placed on the page before it will automatically dismiss itself.
+	 *
+	 * Accessibility concerns require that a Toast is available for at least 6000ms
+	 * before being dismissed, so any timeout of less than 6000ms will be raised to
+	 * that baseline.
+	 *
+	 * It is suggested that messages longer than 120 words should receive an additional
+	 * 1000ms in their timeout for each additional 120 words in the message.
+	 *
+	 * For example, a message with 240 words should have a timeout of 7000ms,
+	 * and a message with 360 words should have a timeout of 8000ms.
+	 */
+	//TODO(#4939): Align on the timeout minimum with design
+	@property({ type: Number })
+	public set timeout(timeout: number | null) {
+		const hasTimeout = timeout !== null && (timeout as number) > 0;
+
+		// Ensure the timeout is at least 6000ms if a valid timeout is provided.
+		const newTimeout = hasTimeout ? Math.max(6000, timeout as number) : null;
+
+		const oldValue = this.timeout;
+
+		// Update the countdown start time if a new timeout is set.
+		if (newTimeout && this.countdownStart) {
+			this.countdownStart = performance.now();
+		}
+
+		// Set the new timeout value and request an update.
+		this._timeout = newTimeout;
+		this.requestUpdate("timeout", oldValue);
+	}
+
+	/**
+	 * Gets the timeout for the toast.
+	 */
+	public get timeout(): number | null {
+		return this._timeout;
+	}
+
+	/**
+	 * Internal property to store the timeout value.
+	 */
+	private _timeout: number | null = null;
+
+	/**
+	 * Sets the variant of the toast.
+	 *
+	 * Validates the variant to ensure it is one of the allowed values. The variant applies specific styling when set to `negative`, `positive`, `info`, `error`, or `warning`. The variants `error` and `warning` are deprecated and should be replaced with `negative`.
+	 *
+	 * If the variant is valid, it sets the attribute and updates the internal property.
+	 * If the variant is invalid, it removes the attribute and sets the internal property to an empty string.
+	 */
+	@property({ type: String })
+	public set variant(variant: ToastVariants) {
+		if (variant === this.variant) {
+			return;
+		}
+
+		const oldValue = this.variant;
+
+		// Validate the variant is one of the allowed values else remove the attribute.
+		if (toastVariants.includes(variant)) {
+			this.setAttribute("variant", variant);
+			this._variant = variant;
+		} else {
+			this.removeAttribute("variant");
+			this._variant = "";
+		}
+
+		this.requestUpdate("variant", oldValue);
+	}
+
+	/**
+	 * Gets the variant of the toast.
+	 */
+	public get variant(): ToastVariants {
+		return this._variant;
+	}
+
+	/**
+	 * Internal property to store the variant value.
+	 */
+	private _variant: ToastVariants = "";
+
+	/**
+	 * The label for the icon displayed in the toast.
+	 * This property is reflected as an attribute named 'icon-label'.
+	 *
+	 * This provides a text alternative for the icon to ensure accessibility.
+	 * If the `iconLabel` property is not set, the icon will use the `variant` to dynamically set the `label`.
+	 */
+	@property({ type: String, attribute: "icon-label" })
+	public iconLabel?: string;
+
+	/**
+	 * Renders the appropriate icon based on the variant.
+	 * The icon is displayed in the toast and provides a visual indication of the toast's type.
+	 */
+	//TODO(#4931): Address the deprecated variants or remove the flags
+	private renderIcon(
+		variant: ToastVariants,
+		iconLabel?: string,
+	): TemplateResult {
+		switch (variant) {
+			case "info":
+				return html`
+					
+				`;
+			case "negative":
+			case "error": // deprecated
+				return html`
+					
+				`;
+			case "warning": // deprecated
+				return html`
+					
+				`;
+			case "positive":
+				return html`
+					
+				`;
+			default:
+				return html``;
+		}
+	}
+
+	/**
+	 * Internal property to store the start time of the countdown.
+	 */
+	private countdownStart = 0;
+
+	/**
+	 * Internal property to store the ID of the next animation frame request.
+	 */
+	private nextCount = -1;
+
+	/**
+	 * Handles the countdown logic for the toast.
+	 * If the countdown duration has elapsed, it triggers the close action.
+	 * Otherwise, it continues the countdown.
+	 */
+	private doCountdown = (time: number): void => {
+		if (!this.countdownStart) {
+			this.countdownStart = performance.now();
+		}
+
+		if (time - this.countdownStart > (this._timeout as number)) {
+			this.shouldClose();
+			this.countdownStart = 0;
+		} else {
+			this.countdown();
+		}
+	};
+
+	/**
+	 * Initiates the countdown by requesting the next animation frame.
+	 */
+	private countdown = (): void => {
+		cancelAnimationFrame(this.nextCount);
+		this.nextCount = requestAnimationFrame(this.doCountdown);
+	};
+
+	/**
+	 * Pauses the countdown when the toast loses focus.
+	 * Adds an event listener to resume the countdown when the toast regains focus.
+	 */
+	private holdCountdown = (): void => {
+		this.stopCountdown();
+		this.addEventListener("focusout", this.resumeCountdown);
+	};
+
+	/**
+	 * Resumes the countdown when the toast regains focus.
+	 * Removes the event listener for holding the countdown.
+	 */
+	private resumeCountdown = (): void => {
+		this.removeEventListener("focusout", this.holdCountdown);
+		this.countdown();
+	};
+
+	/**
+	 * Starts the countdown for the toast.
+	 * Adds an event listener to pause the countdown when the toast gains focus.
+	 */
+	private startCountdown(): void {
+		this.countdown();
+		this.addEventListener("focusin", this.holdCountdown);
+	}
+
+	/**
+	 * Stops the countdown for the toast.
+	 * Cancels the next animation frame and resets the countdown start time.
+	 */
+	private stopCountdown(): void {
+		cancelAnimationFrame(this.nextCount);
+		this.countdownStart = 0;
+	}
+
+	/**
+	 * Dispatches a 'close' event and closes the toast if the event is not canceled.
+	 */
+	private shouldClose(): void {
+		const applyDefault = this.dispatchEvent(
+			new CustomEvent("close", {
+				composed: true,
+				bubbles: true,
+				cancelable: true,
+			}),
+		);
+
+		if (applyDefault) {
+			this.close();
+		}
+	}
+
+	/**
+	 * Closes the toast by setting the open property to false.
+	 */
+	public close(): void {
+		this.open = false;
+	}
+
+	/**
+	 * Renders the content of the toast component.
+	 * This method returns a template result containing the icon, body, and close button of the toast.
+	 */
+	protected override render(): TemplateResult {
+		return html`
+			${this.renderIcon(this.variant, this.iconLabel)}
+			
+			

+				
+			

+		`;
+	}
+
+	/**
+	 * Lifecycle method called when the component updates.
+	 * This method handles the countdown logic based on the `open` and `timeout` properties.
+	 */
+	protected override updated(changes: PropertyValues): void {
+		super.updated(changes);
+
+		if (changes.has("open")) {
+			if (this.open) {
+				// Start the countdown if the toast is open and a timeout is set.
+				if (this.timeout) {
+					this.startCountdown();
+				}
+			} else {
+				// Stop the countdown if the toast is closed and a timeout is set.
+				if (this.timeout) {
+					this.stopCountdown();
+				}
+			}
+		}
+
+		if (changes.has("timeout")) {
+			if (this.timeout !== null && this.open) {
+				// Start the countdown if a valid timeout is set and the toast is open.
+				this.startCountdown();
+			} else {
+				// Stop the countdown if no valid timeout is set or the toast is closed.
+				this.stopCountdown();
+			}
+		}
+	}
 }
diff --git a/packages/tooltip/stories/tooltip.stories.ts b/packages/tooltip/stories/tooltip.stories.ts
index d93d1843c7..efb7601950 100644
--- a/packages/tooltip/stories/tooltip.stories.ts
+++ b/packages/tooltip/stories/tooltip.stories.ts
@@ -9,449 +9,438 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/textfield/sp-textfield.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import { Placement } from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/overlay/sp-overlay.js';
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import { html, nothing, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/textfield/sp-textfield.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import { Placement } from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/overlay/sp-overlay.js";
 
 const iconOptions: {
-    [key: string]: ({
-        width,
-        height,
-        hidden,
-        title,
-    }?: {
-        width?: number;
-        height?: number;
-        hidden?: boolean;
-        title?: string;
-    }) => TemplateResult | string;
+	[key: string]: ({
+		width,
+		height,
+		hidden,
+		title,
+	}?: {
+		width?: number;
+		height?: number;
+		hidden?: boolean;
+		title?: string;
+	}) => TemplateResult | string;
 } = {
-    '': () => html``,
-    negative: () => html`
-        
-    `,
-    positive: () => html`
-        
-    `,
-    info: () => html`
-        
-    `,
+	"": () => html``,
+	negative: () => html`  `,
+	positive: () => html`  `,
+	info: () => html`  `,
 };
 
 export default {
-    component: 'sp-tooltip',
-    title: 'Tooltip',
+	component: "sp-tooltip",
+	title: "Tooltip",
 };
 
 interface Properties {
-    delayed?: boolean;
-    disabled?: boolean;
-    open?: boolean;
-    placement?: Placement;
-    variant?: string;
-    text?: string;
-    offset?: number;
+	delayed?: boolean;
+	disabled?: boolean;
+	open?: boolean;
+	placement?: Placement;
+	variant?: string;
+	text?: string;
+	offset?: number;
 }
 
 export const Default = ({
-    open,
-    placement,
-    variant,
-    text,
+	open,
+	placement,
+	variant,
+	text,
 }: Properties): TemplateResult => {
-    return html`
-        
-            ${text}
-        
-    `;
+	return html`
+		
+			${text}
+		
+	`;
 };
 Default.args = {
-    open: true,
-    placement: 'top',
-    variant: '',
-    text: 'Tooltip',
+	open: true,
+	placement: "top",
+	variant: "",
+	text: "Tooltip",
 };
 Default.argTypes = {
-    open: {
-        name: 'open',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the tooltip is open.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
-    },
-    placement: {
-        name: 'placement',
-        type: { name: 'string', required: false },
-        description: 'The placement of the tooltip in relation to its parent',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'top' },
-        },
-        control: {
-            type: 'inline-radio',
-            options: [
-                'auto',
-                'auto-start',
-                'auto-end',
-                'top',
-                'bottom',
-                'right',
-                'left',
-                'top-start',
-                'top-end',
-                'bottom-start',
-                'bottom-end',
-                'right-start',
-                'right-end',
-                'left-start',
-                'left-end',
-                'none',
-            ],
-        },
-    },
-    text: {
-        name: 'text',
-        type: { name: 'string', required: false },
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: '' },
-        },
-        control: 'text',
-    },
-    variant: {
-        name: 'variant',
-        type: { name: 'string', required: false },
-        description: 'The style of the tooltip.',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: '' },
-        },
-        control: {
-            type: 'inline-radio',
-            options: ['info', 'positive', 'negative', ''],
-        },
-    },
+	open: {
+		name: "open",
+		type: { name: "boolean", required: false },
+		description: "Whether the tooltip is open.",
+		table: {
+			type: { summary: "boolean" },
+			defaultValue: { summary: false },
+		},
+		control: {
+			type: "boolean",
+		},
+	},
+	placement: {
+		name: "placement",
+		type: { name: "string", required: false },
+		description: "The placement of the tooltip in relation to its parent",
+		table: {
+			type: { summary: "string" },
+			defaultValue: { summary: "top" },
+		},
+		control: {
+			type: "inline-radio",
+			options: [
+				"auto",
+				"auto-start",
+				"auto-end",
+				"top",
+				"bottom",
+				"right",
+				"left",
+				"top-start",
+				"top-end",
+				"bottom-start",
+				"bottom-end",
+				"right-start",
+				"right-end",
+				"left-start",
+				"left-end",
+				"none",
+			],
+		},
+	},
+	text: {
+		name: "text",
+		type: { name: "string", required: false },
+		table: {
+			type: { summary: "string" },
+			defaultValue: { summary: "" },
+		},
+		control: "text",
+	},
+	variant: {
+		name: "variant",
+		type: { name: "string", required: false },
+		description: "The style of the tooltip.",
+		table: {
+			type: { summary: "string" },
+			defaultValue: { summary: "" },
+		},
+		control: {
+			type: "inline-radio",
+			options: ["info", "positive", "negative", ""],
+		},
+	},
 };
 
 export const wIcon = ({
-    open,
-    placement,
-    variant,
-    text,
+	open,
+	placement,
+	variant,
+	text,
 }: Properties): TemplateResult => {
-    return html`
-        
-            ${!!variant ? iconOptions[variant]() : nothing} ${text}
-        
-    `;
+	return html`
+		
+			${variant ? iconOptions[variant]() : nothing} ${text}
+		
+	`;
 };
 wIcon.args = {
-    open: true,
-    placement: 'top',
-    text: 'Tooltip',
-    variant: 'negative',
+	open: true,
+	placement: "top",
+	text: "Tooltip",
+	variant: "negative",
 };
 wIcon.argTypes = {
-    open: {
-        name: 'open',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the tooltip is open.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
-    },
-    placement: {
-        name: 'placement',
-        type: { name: 'string', required: false },
-        description: 'The placement of the tooltip in relation to its parent',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'top' },
-        },
-        control: {
-            type: 'inline-radio',
-            options: [
-                'auto',
-                'auto-start',
-                'auto-end',
-                'top',
-                'bottom',
-                'right',
-                'left',
-                'top-start',
-                'top-end',
-                'bottom-start',
-                'bottom-end',
-                'right-start',
-                'right-end',
-                'left-start',
-                'left-end',
-                'none',
-            ],
-        },
-    },
-    text: {
-        name: 'text',
-        type: { name: 'string', required: false },
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: '' },
-        },
-        control: 'text',
-    },
-    variant: {
-        name: 'variant',
-        type: { name: 'string', required: false },
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: '' },
-        },
-        control: {
-            type: 'inline-radio',
-            options: ['info', 'positive', 'negative', ''],
-        },
-    },
+	open: {
+		name: "open",
+		type: { name: "boolean", required: false },
+		description: "Whether the tooltip is open.",
+		table: {
+			type: { summary: "boolean" },
+			defaultValue: { summary: false },
+		},
+		control: {
+			type: "boolean",
+		},
+	},
+	placement: {
+		name: "placement",
+		type: { name: "string", required: false },
+		description: "The placement of the tooltip in relation to its parent",
+		table: {
+			type: { summary: "string" },
+			defaultValue: { summary: "top" },
+		},
+		control: {
+			type: "inline-radio",
+			options: [
+				"auto",
+				"auto-start",
+				"auto-end",
+				"top",
+				"bottom",
+				"right",
+				"left",
+				"top-start",
+				"top-end",
+				"bottom-start",
+				"bottom-end",
+				"right-start",
+				"right-end",
+				"left-start",
+				"left-end",
+				"none",
+			],
+		},
+	},
+	text: {
+		name: "text",
+		type: { name: "string", required: false },
+		table: {
+			type: { summary: "string" },
+			defaultValue: { summary: "" },
+		},
+		control: "text",
+	},
+	variant: {
+		name: "variant",
+		type: { name: "string", required: false },
+		table: {
+			type: { summary: "string" },
+			defaultValue: { summary: "" },
+		},
+		control: {
+			type: "inline-radio",
+			options: ["info", "positive", "negative", ""],
+		},
+	},
 };
 
 const overlayStyles = html`
-    
+		sp-button:nth-of-type(1) {
+			margin-top: 24px;
+		}
+	
 `;
 
 const overlaid = (openPlacement: Placement): TemplateResult => {
-    return html`
-        ${overlayStyles}
-        ${(
-            [
-                ['bottom', ''],
-                ['left', 'negative'],
-                ['right', 'positive'],
-                ['top', 'info'],
-                ['top-start', ''],
-            ] as [Placement, string][]
-        ).map(([placement, variant]) => {
-            return html`
-                
-                    Hover for ${variant ? variant : 'tooltip'} on the
-                    ${placement}
-                
-                
-                    
-                        ${placement}
-                    
-                
-            `;
-        })}
-    `;
+	return html`
+		${overlayStyles}
+		${(
+			[
+				["bottom", ""],
+				["left", "negative"],
+				["right", "positive"],
+				["top", "info"],
+				["top-start", ""],
+			] as [Placement, string][]
+		).map(([placement, variant]) => {
+			return html`
+				
+					Hover for ${variant ? variant : "tooltip"} on the ${placement}
+				
+				
+					
+						${placement}
+					
+				
+			`;
+		})}
+	`;
 };
 
-export const overlaidTop = (): TemplateResult => overlaid('top');
-export const overlaidRight = (): TemplateResult => overlaid('right');
-export const overlaidBottom = (): TemplateResult => overlaid('bottom');
-export const overlaidLeft = (): TemplateResult => overlaid('left');
-export const overlaidTopStart = (): TemplateResult => overlaid('top-start');
+export const overlaidTop = (): TemplateResult => overlaid("top");
+export const overlaidRight = (): TemplateResult => overlaid("right");
+export const overlaidBottom = (): TemplateResult => overlaid("bottom");
+export const overlaidLeft = (): TemplateResult => overlaid("left");
+export const overlaidTopStart = (): TemplateResult => overlaid("top-start");
 
 export const selfManaged = ({
-    placement,
-    open,
-    offset,
-    delayed,
-    disabled,
+	placement,
+	open,
+	offset,
+	delayed,
+	disabled,
 }: Properties): TemplateResult => html`
-    ${overlayStyles}
-    
-        This is a button.
-        
-            Add paragraph text by dragging the Text tool on the canvas to use
-            this feature
-        
-    
+	${overlayStyles}
+	
+		This is a button.
+		
+			Add paragraph text by dragging the Text tool on the canvas to use this
+			feature
+		
+	
 `;
 selfManaged.args = {
-    placement: 'top',
-    open: true,
-    offset: 6,
-    delayed: false,
-    disabled: false,
+	placement: "top",
+	open: true,
+	offset: 6,
+	delayed: false,
+	disabled: false,
 };
 selfManaged.argTypes = {
-    delayed: {
-        name: 'delayed',
-        type: { name: 'boolean', required: false },
-        description: 'Whether to manage the tooltip with the warmup timer',
-    },
-    disabled: {
-        name: 'disabled',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the Tooltip is active and can be displayed',
-    },
-    offset: {
-        name: 'offset',
-        type: { name: 'number', required: false },
-        description:
-            'The pixel distance from the parent element to place the tooltip',
-    },
-    open: {
-        name: 'open',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the tooltip is open.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
-    },
-    placement: {
-        name: 'placement',
-        type: { name: 'string', required: false },
-        description: 'The placement of the tooltip in relation to its parent',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'top' },
-        },
-        control: {
-            type: 'inline-radio',
-            options: [
-                'auto',
-                'auto-start',
-                'auto-end',
-                'top',
-                'bottom',
-                'right',
-                'left',
-                'top-start',
-                'top-end',
-                'bottom-start',
-                'bottom-end',
-                'right-start',
-                'right-end',
-                'left-start',
-                'left-end',
-                'none',
-            ],
-        },
-    },
+	delayed: {
+		name: "delayed",
+		type: { name: "boolean", required: false },
+		description: "Whether to manage the tooltip with the warmup timer",
+	},
+	disabled: {
+		name: "disabled",
+		type: { name: "boolean", required: false },
+		description: "Whether the Tooltip is active and can be displayed",
+	},
+	offset: {
+		name: "offset",
+		type: { name: "number", required: false },
+		description:
+			"The pixel distance from the parent element to place the tooltip",
+	},
+	open: {
+		name: "open",
+		type: { name: "boolean", required: false },
+		description: "Whether the tooltip is open.",
+		table: {
+			type: { summary: "boolean" },
+			defaultValue: { summary: false },
+		},
+		control: {
+			type: "boolean",
+		},
+	},
+	placement: {
+		name: "placement",
+		type: { name: "string", required: false },
+		description: "The placement of the tooltip in relation to its parent",
+		table: {
+			type: { summary: "string" },
+			defaultValue: { summary: "top" },
+		},
+		control: {
+			type: "inline-radio",
+			options: [
+				"auto",
+				"auto-start",
+				"auto-end",
+				"top",
+				"bottom",
+				"right",
+				"left",
+				"top-start",
+				"top-end",
+				"bottom-start",
+				"bottom-end",
+				"right-start",
+				"right-end",
+				"left-start",
+				"left-end",
+				"none",
+			],
+		},
+	},
 };
 
 export const selfManagedIconOnly = (): TemplateResult => html`
-    ${overlayStyles}
-    
-        
-        This is a tooltip.
-    
-    

+	${overlayStyles}
+	
+		
+		This is a tooltip.
+	
+	

 
-    
-        
-    
+	
+		
+	
 `;
 
 export const selfManagedFieldLabel = (): TemplateResult => html`
-    

-        
-            
-            Edit
-        
-        
-    

+	

+		
+			
+			Edit
+		
+		
+	

 `;
 
 export const draggable = (): TemplateResult => {
-    const handleDragStart = (event: DragEvent): void => {
-        event.dataTransfer?.setDragImage(
-            event.target as HTMLElement,
-            event.offsetX,
-            event.offsetY
-        );
-    };
+	const handleDragStart = (event: DragEvent): void => {
+		event.dataTransfer?.setDragImage(
+			event.target as HTMLElement,
+			event.offsetX,
+			event.offsetY,
+		);
+	};
 
-    return html`
-        
-            A simple button that should not be included in the DragImage
-        
-        

-            
Click and drag me to show DragImage

-            
-                Action Button with self managed tooltip
-                
-                    My Tooltip
-                
-            
-        

-    `;
+	return html`
+		
+			A simple button that should not be included in the DragImage
+		
+		

+			
Click and drag me to show DragImage

+			
+				Action Button with self managed tooltip
+				 My Tooltip 
+			
+		

+	`;
 };
 
 draggable.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 draggable.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
diff --git a/packages/top-nav/stories/top-nav.stories.ts b/packages/top-nav/stories/top-nav.stories.ts
index 1bc70e1c00..0bb38bc533 100644
--- a/packages/top-nav/stories/top-nav.stories.ts
+++ b/packages/top-nav/stories/top-nav.stories.ts
@@ -10,107 +10,97 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/top-nav/sp-top-nav.js';
-import '@spectrum-web-components/top-nav/sp-top-nav-item.js';
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/avatar/sp-avatar.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-download.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-link.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-search.js';
-import { avatar, logo } from './images';
+import "@spectrum-web-components/top-nav/sp-top-nav.js";
+import "@spectrum-web-components/top-nav/sp-top-nav-item.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/avatar/sp-avatar.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-download.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-link.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-search.js";
+import { avatar, logo } from "./images.js";
 
 export default {
-    title: 'Top Nav',
-    component: 'sp-top-nav',
+	title: "Top Nav",
+	component: "sp-top-nav",
 };
 
 export const Default = (): TemplateResult => {
-    return html`
-        
-            Site Name
-            
-                Page 1
-            
-            Page 2
-            Page 3
-            
-                Page with Really Long Name
-            
-            
-                
-                Account Settings
-                My Profile
-                
-                Share
-                
-                Help
-                Sign Out
-            
-        
-    `;
+	return html`
+		
+			Site Name
+			
+				Page 1
+			
+			Page 2
+			Page 3
+			
+				Page with Really Long Name
+			
+			
+				
+				Account Settings
+				My Profile
+				
+				Share
+				
+				Help
+				Sign Out
+			
+		
+	`;
 };
 
 export const Selected = (): TemplateResult => {
-    let { href } = location;
+	let { href } = location;
 
-    href = href.replace(location.search, '');
+	href = href.replace(location.search, "");
 
-    /**
-     * The location's `href` is leveraged as the value of "Page 3" here
-     * so that within the default Storybook UI there can be a `href` attribute
-     * driven "selection" that ensures the delivery of a visible selection.
-     */
-    return html`
-        
-            Site Name
-            
-                Page 1
-            
-            Page 2
-            
-                Page 3
-            
-            
-                Page with Really Long Name
-            
-            
-                
-                Account Settings
-                My Profile
-                
-                Share
-                
-                Help
-                Sign Out
-            
-        
-    `;
+	/**
+	 * The location's `href` is leveraged as the value of "Page 3" here
+	 * so that within the default Storybook UI there can be a `href` attribute
+	 * driven "selection" that ensures the delivery of a visible selection.
+	 */
+	return html`
+		
+			Site Name
+			
+				Page 1
+			
+			Page 2
+			 Page 3 
+			
+				Page with Really Long Name
+			
+			
+				
+				Account Settings
+				My Profile
+				
+				Share
+				
+				Help
+				Sign Out
+			
+		
+	`;
 };
 
 class WrappedTopNav extends HTMLElement {
-    override shadowRoot!: ShadowRoot;
+	override shadowRoot!: ShadowRoot;
 
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        this.shadowRoot.innerHTML = `
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.shadowRoot.innerHTML = `
             
                 Site Name
                 
@@ -133,53 +123,51 @@ class WrappedTopNav extends HTMLElement {
                 
             
         `;
-    }
+	}
 }
 
-customElements.define('wrapped-top-nav', WrappedTopNav);
+customElements.define("wrapped-top-nav", WrappedTopNav);
 
 export const autofocus = (): TemplateResult => {
-    return html`
-        
-    `;
+	return html`  `;
 };
 
 // https://spectrum.adobe.com/page/application-frame/#Application-mode
 // https://spectrum.adobe.com/page/headers/#Anatomy
 
 export const Modes = (): TemplateResult => {
-    return html`
-        
-            
-                
-            
-            Design
-            Prototype
-            
-                document_name.pdf
-            
-            
-                
-                    
-                
-                
-                    
-                
-                
-                    
-                
-                
-                    
-                    Profile
-                    
-                    Sign Out
-                
-            
-        
-    `;
+	return html`
+		
+			
+				
+			
+			Design
+			Prototype
+			
+				document_name.pdf
+			
+			
+				
+					
+				
+				
+					
+				
+				
+					
+				
+				
+					
+					Profile
+					
+					Sign Out
+				
+			
+		
+	`;
 };
diff --git a/packages/top-nav/test/top-nav.test.ts b/packages/top-nav/test/top-nav.test.ts
index c82c7a724d..d97c4db7e3 100644
--- a/packages/top-nav/test/top-nav.test.ts
+++ b/packages/top-nav/test/top-nav.test.ts
@@ -10,140 +10,140 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, nextFrame } from "@open-wc/testing";
 
-import { TopNav, TopNavItem } from '@spectrum-web-components/top-nav';
-import { Default, Selected } from '../stories/top-nav.stories.js';
-import { spy } from 'sinon';
-import { testForLitDevWarnings } from '../../../test/testing-helpers';
-import { sendMouse } from '../../../test/plugins/browser.js';
+import { TopNav, TopNavItem } from "@spectrum-web-components/top-nav";
+import { Default, Selected } from "../stories/top-nav.stories.js";
+import { spy } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
 
-describe('TopNav', () => {
-    testForLitDevWarnings(async () => await fixture(Default()));
-    it('loads default top-nav accessibly', async () => {
-        const el = await fixture(Default());
+describe("TopNav", () => {
+	testForLitDevWarnings(async () => await fixture(Default()));
+	it("loads default top-nav accessibly", async () => {
+		const el = await fixture(Default());
 
-        await elementUpdated(el);
+		await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
-    it('accepts and removes `label` accessibly', async () => {
-        const el = await fixture(Default());
+		await expect(el).to.be.accessible();
+	});
+	it("accepts and removes `label` accessibly", async () => {
+		const el = await fixture(Default());
 
-        await elementUpdated(el);
+		await elementUpdated(el);
 
-        el.label = 'Page';
-        await elementUpdated(el);
-        await expect(el).to.be.accessible();
+		el.label = "Page";
+		await elementUpdated(el);
+		await expect(el).to.be.accessible();
 
-        el.label = '';
-        await elementUpdated(el);
-        await expect(el).to.be.accessible();
-    });
-    it('loads with a selected item accessible', async () => {
-        const el = await fixture(Selected());
+		el.label = "";
+		await elementUpdated(el);
+		await expect(el).to.be.accessible();
+	});
+	it("loads with a selected item accessible", async () => {
+		const el = await fixture(Selected());
 
-        await elementUpdated(el);
+		await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
-    it('updates indicator size when Nav Item content changes', async () => {
-        const el = await fixture(Selected());
+		await expect(el).to.be.accessible();
+	});
+	it("updates indicator size when Nav Item content changes", async () => {
+		const el = await fixture(Selected());
 
-        await elementUpdated(el);
+		await elementUpdated(el);
 
-        const items = [...el.querySelectorAll('sp-top-nav-item')];
+		const items = [...el.querySelectorAll("sp-top-nav-item")];
 
-        await Promise.all(items.map((item) => elementUpdated(item)));
+		await Promise.all(items.map((item) => elementUpdated(item)));
 
-        const indicator = el.shadowRoot.querySelector(
-            '#selection-indicator'
-        ) as HTMLDivElement;
-        const { width: widthStart } = indicator.getBoundingClientRect();
+		const indicator = el.shadowRoot.querySelector(
+			"#selection-indicator",
+		) as HTMLDivElement;
+		const { width: widthStart } = indicator.getBoundingClientRect();
 
-        const selectedItem = el.querySelector(
-            `[href="${el.selected}"]`
-        ) as TopNavItem;
+		const selectedItem = el.querySelector(
+			`[href="${el.selected}"]`,
+		) as TopNavItem;
 
-        selectedItem.innerHTML = '0';
+		selectedItem.innerHTML = "0";
 
-        // Wait for slotchange time before continuing the test.
-        await nextFrame();
-        await nextFrame();
+		// Wait for slotchange time before continuing the test.
+		await nextFrame();
+		await nextFrame();
 
-        const { width: widthEnd } = indicator.getBoundingClientRect();
+		const { width: widthEnd } = indicator.getBoundingClientRect();
 
-        expect(
-            widthStart,
-            `${widthStart} is not greater than ${widthEnd}`
-        ).to.be.greaterThan(widthEnd);
-    });
-    it('can have an item removed', async () => {
-        const el = await fixture(Selected());
-        const item = el.querySelector('.selected') as TopNavItem;
+		expect(
+			widthStart,
+			`${widthStart} is not greater than ${widthEnd}`,
+		).to.be.greaterThan(widthEnd);
+	});
+	it("can have an item removed", async () => {
+		const el = await fixture(Selected());
+		const item = el.querySelector(".selected") as TopNavItem;
 
-        await elementUpdated(el);
-        await elementUpdated(item);
+		await elementUpdated(el);
+		await elementUpdated(item);
 
-        expect(el.selected).to.equal(item.value);
+		expect(el.selected).to.equal(item.value);
 
-        item.remove();
-        await elementUpdated(el);
+		item.remove();
+		await elementUpdated(el);
 
-        expect(el.selected).to.not.equal(item.value);
-    });
+		expect(el.selected).to.not.equal(item.value);
+	});
 });
 
-describe('TopNavItem', () => {
-    it('passes click to ``', async () => {
-        const clickSpy = spy();
-        const test = await fixture(Selected());
-        const el = test.querySelector(
-            'sp-top-nav-item:nth-of-type(4)'
-        ) as TopNavItem;
-        const anchor = el.focusElement;
-
-        test.addEventListener('click', (event: Event) => {
-            event.preventDefault();
-            const target = event.composedPath()[0];
-
-            clickSpy(target);
-        });
-        await elementUpdated(el);
-
-        el.click();
-
-        expect(clickSpy.called).to.be.true;
-        expect(clickSpy.calledWith(anchor)).to.be.true;
-    });
-    it('`` accepts click across full item area', async () => {
-        const clickSpy = spy();
-        const test = await fixture(Selected());
-        const el = test.querySelector(
-            'sp-top-nav-item:nth-of-type(4)'
-        ) as TopNavItem;
-        const anchor = el.focusElement;
-
-        test.addEventListener('click', (event: Event) => {
-            event.preventDefault();
-            const target = event.composedPath()[0];
-
-            clickSpy(target);
-        });
-        await elementUpdated(el);
-        const rect = el.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'click',
-                    position: [rect.left + rect.width / 2, rect.top + 1],
-                },
-            ],
-        });
-        await elementUpdated(test);
-
-        expect(clickSpy.called).to.be.true;
-        expect(clickSpy.calledWith(anchor)).to.be.true;
-    });
+describe("TopNavItem", () => {
+	it("passes click to ``", async () => {
+		const clickSpy = spy();
+		const test = await fixture(Selected());
+		const el = test.querySelector(
+			"sp-top-nav-item:nth-of-type(4)",
+		) as TopNavItem;
+		const anchor = el.focusElement;
+
+		test.addEventListener("click", (event: Event) => {
+			event.preventDefault();
+			const target = event.composedPath()[0];
+
+			clickSpy(target);
+		});
+		await elementUpdated(el);
+
+		el.click();
+
+		expect(clickSpy.called).to.be.true;
+		expect(clickSpy.calledWith(anchor)).to.be.true;
+	});
+	it("`` accepts click across full item area", async () => {
+		const clickSpy = spy();
+		const test = await fixture(Selected());
+		const el = test.querySelector(
+			"sp-top-nav-item:nth-of-type(4)",
+		) as TopNavItem;
+		const anchor = el.focusElement;
+
+		test.addEventListener("click", (event: Event) => {
+			event.preventDefault();
+			const target = event.composedPath()[0];
+
+			clickSpy(target);
+		});
+		await elementUpdated(el);
+		const rect = el.getBoundingClientRect();
+
+		await sendMouse({
+			steps: [
+				{
+					type: "click",
+					position: [rect.left + rect.width / 2, rect.top + 1],
+				},
+			],
+		});
+		await elementUpdated(test);
+
+		expect(clickSpy.called).to.be.true;
+		expect(clickSpy.calledWith(anchor)).to.be.true;
+	});
 });
diff --git a/projects/documentation/src/components/code-example.ts b/projects/documentation/src/components/code-example.ts
index 6a59b6c9dc..aa55506721 100644
--- a/projects/documentation/src/components/code-example.ts
+++ b/projects/documentation/src/components/code-example.ts
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
 */
 
 import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js";
 import {
 	CSSResultArray,
 	html,
@@ -22,14 +23,13 @@ import {
 	property,
 	query,
 } from "@spectrum-web-components/base/src/decorators.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js";
-import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared";
 import { Color } from "@spectrum-web-components/theme";
-import { toHtmlTemplateString } from "../utils/templates.js";
+import { copyNode } from "./copy-to-clipboard.js";
+import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared";
+import Styles from "./code-example.css";
 import StylesDark from "./code-example-dark.css";
 import StylesLight from "./code-example-light.css";
-import Styles from "./code-example.css";
-import { copyNode } from "./copy-to-clipboard.js";
+import { toHtmlTemplateString } from "../utils/templates.js";
 import { TrackTheme } from "./layout.js";
 
 @customElement("code-example")
diff --git a/tools/base/src/Base.ts b/tools/base/src/Base.ts
index 45c7190558..60859f93fb 100644
--- a/tools/base/src/Base.ts
+++ b/tools/base/src/Base.ts
@@ -10,262 +10,243 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { LitElement, ReactiveElement } from 'lit';
-import { version } from '@spectrum-web-components/base/src/version.js';
+import { version } from "@spectrum-web-components/base/src/version.js";
+import { LitElement, ReactiveElement } from "lit";
 type ThemeRoot = HTMLElement & {
-    startManagingContentDirection: (el: HTMLElement) => void;
-    stopManagingContentDirection: (el: HTMLElement) => void;
+	startManagingContentDirection: (el: HTMLElement) => void;
+	stopManagingContentDirection: (el: HTMLElement) => void;
 };
 
 type Constructor> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    new (...args: any[]): T;
-    prototype: T;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	new (...args: any[]): T;
+	prototype: T;
 };
 
 export interface SpectrumInterface {
-    shadowRoot: ShadowRoot;
-    isLTR: boolean;
-    hasVisibleFocusInTree(): boolean;
-    dir: 'ltr' | 'rtl';
+	shadowRoot: ShadowRoot;
+	isLTR: boolean;
+	hasVisibleFocusInTree(): boolean;
+	dir: "ltr" | "rtl";
 }
 
 const observedForElements: Set = new Set();
 
 const updateRTL = (): void => {
-    const dir =
-        document.documentElement.dir === 'rtl'
-            ? document.documentElement.dir
-            : 'ltr';
-    observedForElements.forEach((el) => {
-        el.setAttribute('dir', dir);
-    });
+	const dir =
+		document.documentElement.dir === "rtl"
+			? document.documentElement.dir
+			: "ltr";
+	observedForElements.forEach((el) => {
+		el.setAttribute("dir", dir);
+	});
 };
 
 const rtlObserver = new MutationObserver(updateRTL);
 
 rtlObserver.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['dir'],
+	attributes: true,
+	attributeFilter: ["dir"],
 });
 
 type ContentDirectionManager = HTMLElement & {
-    startManagingContentDirection?(): void;
+	startManagingContentDirection?(): void;
 };
 
 const canManageContentDirection = (el: ContentDirectionManager): boolean =>
-    typeof el.startManagingContentDirection !== 'undefined' ||
-    el.tagName === 'SP-THEME';
+	typeof el.startManagingContentDirection !== "undefined" ||
+	el.tagName === "SP-THEME";
 
 export function SpectrumMixin>(
-    constructor: T
+	constructor: T,
 ): T & Constructor {
-    class SpectrumMixinElement extends constructor {
-        /**
-         * @private
-         */
-        public override shadowRoot!: ShadowRoot;
-        private _dirParent?: HTMLElement;
-
-        /**
-         * @private
-         */
-        public override dir!: 'ltr' | 'rtl';
-
-        /**
-         * @private
-         */
-        public get isLTR(): boolean {
-            return this.dir === 'ltr';
-        }
-
-        public hasVisibleFocusInTree(): boolean {
-            const getAncestors = (root: Document = document): HTMLElement[] => {
-                // eslint-disable-next-line @spectrum-web-components/document-active-element
-                let currentNode = root.activeElement as HTMLElement;
-                while (
-                    currentNode?.shadowRoot &&
-                    currentNode.shadowRoot.activeElement
-                ) {
-                    currentNode = currentNode.shadowRoot
-                        .activeElement as HTMLElement;
-                }
-                const ancestors: HTMLElement[] = currentNode
-                    ? [currentNode]
-                    : [];
-                while (currentNode) {
-                    const ancestor =
-                        currentNode.assignedSlot ||
-                        currentNode.parentElement ||
-                        (currentNode.getRootNode() as ShadowRoot)?.host;
-                    if (ancestor) {
-                        ancestors.push(ancestor as HTMLElement);
-                    }
-                    currentNode = ancestor as HTMLElement;
-                }
-                return ancestors;
-            };
-            const activeElement = getAncestors(
-                this.getRootNode() as Document
-            )[0];
-            if (!activeElement) {
-                return false;
-            }
-            // Browsers without support for the `:focus-visible`
-            // selector will throw on the following test (Safari, older things).
-            // Some won't throw, but will be focusing item rather than the menu and
-            // will rely on the polyfill to know whether focus is "visible" or not.
-            try {
-                return (
-                    activeElement.matches(':focus-visible') ||
-                    activeElement.matches('.focus-visible')
-                );
-                /* c8 ignore next 3 */
-            } catch (error) {
-                return activeElement.matches('.focus-visible');
-            }
-        }
-
-        public override connectedCallback(): void {
-            if (!this.hasAttribute('dir')) {
-                let dirParent = ((this as HTMLElement).assignedSlot ||
-                    this.parentNode) as HTMLElement;
-                while (
-                    dirParent !== document.documentElement &&
-                    !canManageContentDirection(
-                        dirParent as ContentDirectionManager
-                    )
-                ) {
-                    dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node
-                        dirParent.parentNode || // DOM Element detected
-                        (dirParent as unknown as ShadowRoot)
-                            .host) as HTMLElement;
-                }
-                this.dir =
-                    dirParent.dir === 'rtl' ? dirParent.dir : this.dir || 'ltr';
-                if (dirParent === document.documentElement) {
-                    observedForElements.add(this);
-                } else {
-                    const { localName } = dirParent;
-                    if (
-                        localName.search('-') > -1 &&
-                        !customElements.get(localName)
-                    ) {
-                        /* c8 ignore next 5 */
-                        customElements.whenDefined(localName).then(() => {
-                            (
-                                dirParent as ThemeRoot
-                            ).startManagingContentDirection(this);
-                        });
-                    } else {
-                        (dirParent as ThemeRoot).startManagingContentDirection(
-                            this
-                        );
-                    }
-                }
-                this._dirParent = dirParent as HTMLElement;
-            }
-            super.connectedCallback();
-        }
-
-        public override disconnectedCallback(): void {
-            super.disconnectedCallback();
-            if (this._dirParent) {
-                if (this._dirParent === document.documentElement) {
-                    observedForElements.delete(this);
-                } else {
-                    (this._dirParent as ThemeRoot).stopManagingContentDirection(
-                        this
-                    );
-                }
-                this.removeAttribute('dir');
-            }
-        }
-    }
-    return SpectrumMixinElement;
+	class SpectrumMixinElement extends constructor {
+		/**
+		 * @private
+		 */
+		public override shadowRoot!: ShadowRoot;
+		private _dirParent?: HTMLElement;
+
+		/**
+		 * @private
+		 */
+		public override dir!: "ltr" | "rtl";
+
+		/**
+		 * @private
+		 */
+		public get isLTR(): boolean {
+			return this.dir === "ltr";
+		}
+
+		public hasVisibleFocusInTree(): boolean {
+			const getAncestors = (root: Document = document): HTMLElement[] => {
+				// eslint-disable-next-line @spectrum-web-components/document-active-element
+				let currentNode = root.activeElement as HTMLElement;
+				while (
+					currentNode?.shadowRoot &&
+					currentNode.shadowRoot.activeElement
+				) {
+					currentNode = currentNode.shadowRoot.activeElement as HTMLElement;
+				}
+				const ancestors: HTMLElement[] = currentNode ? [currentNode] : [];
+				while (currentNode) {
+					const ancestor =
+						currentNode.assignedSlot ||
+						currentNode.parentElement ||
+						(currentNode.getRootNode() as ShadowRoot)?.host;
+					if (ancestor) {
+						ancestors.push(ancestor as HTMLElement);
+					}
+					currentNode = ancestor as HTMLElement;
+				}
+
+				return ancestors;
+			};
+			const activeElement = getAncestors(this.getRootNode() as Document)[0];
+			if (!activeElement) {
+				return false;
+			}
+			// Browsers without support for the `:focus-visible`
+			// selector will throw on the following test (Safari, older things).
+			// Some won't throw, but will be focusing item rather than the menu and
+			// will rely on the polyfill to know whether focus is "visible" or not.
+			try {
+				return (
+					activeElement.matches(":focus-visible") ||
+					activeElement.matches(".focus-visible")
+				);
+				/* c8 ignore next 3 */
+			} catch (error) {
+				return activeElement.matches(".focus-visible");
+			}
+		}
+
+		public override connectedCallback(): void {
+			if (!this.hasAttribute("dir")) {
+				let dirParent = ((this as HTMLElement).assignedSlot ||
+					this.parentNode) as HTMLElement;
+				while (
+					dirParent !== document.documentElement &&
+					!canManageContentDirection(dirParent as ContentDirectionManager)
+				) {
+					dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node
+						dirParent.parentNode || // DOM Element detected
+						(dirParent as unknown as ShadowRoot).host) as HTMLElement;
+				}
+				this.dir = dirParent.dir === "rtl" ? dirParent.dir : this.dir || "ltr";
+				if (dirParent === document.documentElement) {
+					observedForElements.add(this);
+				} else {
+					const { localName } = dirParent;
+					if (localName.search("-") > -1 && !customElements.get(localName)) {
+						/* c8 ignore next 5 */
+						customElements.whenDefined(localName).then(() => {
+							(dirParent as ThemeRoot).startManagingContentDirection(this);
+						});
+					} else {
+						(dirParent as ThemeRoot).startManagingContentDirection(this);
+					}
+				}
+				this._dirParent = dirParent as HTMLElement;
+			}
+			super.connectedCallback();
+		}
+
+		public override disconnectedCallback(): void {
+			super.disconnectedCallback();
+			if (this._dirParent) {
+				if (this._dirParent === document.documentElement) {
+					observedForElements.delete(this);
+				} else {
+					(this._dirParent as ThemeRoot).stopManagingContentDirection(this);
+				}
+				this.removeAttribute("dir");
+			}
+		}
+	}
+
+	return SpectrumMixinElement;
 }
 
 export class SpectrumElement extends SpectrumMixin(LitElement) {
-    static VERSION = version;
+	static VERSION = version;
 }
 
 if (window.__swc.DEBUG) {
-    const ignoreWarningTypes = {
-        default: false,
-        accessibility: false,
-        api: false,
-    };
-    const ignoreWarningLevels = {
-        default: false,
-        low: false,
-        medium: false,
-        high: false,
-        deprecation: false,
-    };
-    window.__swc = {
-        ...window.__swc,
-        ignoreWarningLocalNames: {
-            /* c8 ignore next 1 */
-            ...(window.__swc?.ignoreWarningLocalNames || {}),
-        },
-        ignoreWarningTypes: {
-            ...ignoreWarningTypes,
-            /* c8 ignore next 1 */
-            ...(window.__swc?.ignoreWarningTypes || {}),
-        },
-        ignoreWarningLevels: {
-            ...ignoreWarningLevels,
-            /* c8 ignore next 1 */
-            ...(window.__swc?.ignoreWarningLevels || {}),
-        },
-        issuedWarnings: new Set(),
-        warn: (
-            element,
-            message,
-            url,
-            { type = 'api', level = 'default', issues } = {}
-        ): void => {
-            const { localName = 'base' } = element || {};
-            const id = `${localName}:${type}:${level}` as BrandedSWCWarningID;
-            if (!window.__swc.verbose && window.__swc.issuedWarnings.has(id))
-                return;
-            /* c8 ignore next 3 */
-            if (window.__swc.ignoreWarningLocalNames[localName]) return;
-            if (window.__swc.ignoreWarningTypes[type]) return;
-            if (window.__swc.ignoreWarningLevels[level]) return;
-            window.__swc.issuedWarnings.add(id);
-            let listedIssues = '';
-            if (issues && issues.length) {
-                issues.unshift('');
-                listedIssues = issues.join('\n    - ') + '\n';
-            }
-            const intro = level === 'deprecation' ? 'DEPRECATION NOTICE: ' : '';
-            const inspectElement = element
-                ? '\nInspect this issue in the follow element:'
-                : '';
-            const displayURL = (element ? '\n\n' : '\n') + url + '\n';
-            const messages: unknown[] = [];
-            messages.push(
-                intro + message + '\n' + listedIssues + inspectElement
-            );
-            if (element) {
-                messages.push(element);
-            }
-            messages.push(displayURL, {
-                data: {
-                    localName,
-                    type,
-                    level,
-                },
-            });
-            console.warn(...messages);
-        },
-    };
-
-    window.__swc.warn(
-        undefined,
-        'Spectrum Web Components is in dev mode. Not recommended for production!',
-        'https://opensource.adobe.com/spectrum-web-components/dev-mode/',
-        { type: 'default' }
-    );
+	const ignoreWarningTypes = {
+		default: false,
+		accessibility: false,
+		api: false,
+	};
+	const ignoreWarningLevels = {
+		default: false,
+		low: false,
+		medium: false,
+		high: false,
+		deprecation: false,
+	};
+	window.__swc = {
+		...window.__swc,
+		ignoreWarningLocalNames: {
+			/* c8 ignore next 1 */
+			...(window.__swc?.ignoreWarningLocalNames || {}),
+		},
+		ignoreWarningTypes: {
+			...ignoreWarningTypes,
+			/* c8 ignore next 1 */
+			...(window.__swc?.ignoreWarningTypes || {}),
+		},
+		ignoreWarningLevels: {
+			...ignoreWarningLevels,
+			/* c8 ignore next 1 */
+			...(window.__swc?.ignoreWarningLevels || {}),
+		},
+		issuedWarnings: new Set(),
+		warn: (
+			element,
+			message,
+			url,
+			{ type = "api", level = "default", issues } = {},
+		): void => {
+			const { localName = "base" } = element || {};
+			const id = `${localName}:${type}:${level}` as BrandedSWCWarningID;
+			if (!window.__swc.verbose && window.__swc.issuedWarnings.has(id)) return;
+			/* c8 ignore next 3 */
+			if (window.__swc.ignoreWarningLocalNames[localName]) return;
+			if (window.__swc.ignoreWarningTypes[type]) return;
+			if (window.__swc.ignoreWarningLevels[level]) return;
+			window.__swc.issuedWarnings.add(id);
+			let listedIssues = "";
+			if (issues && issues.length) {
+				issues.unshift("");
+				listedIssues = issues.join("\n    - ") + "\n";
+			}
+			const intro = level === "deprecation" ? "DEPRECATION NOTICE: " : "";
+			const inspectElement = element
+				? "\nInspect this issue in the follow element:"
+				: "";
+			const displayURL = (element ? "\n\n" : "\n") + url + "\n";
+			const messages: unknown[] = [];
+			messages.push(intro + message + "\n" + listedIssues + inspectElement);
+			if (element) {
+				messages.push(element);
+			}
+			messages.push(displayURL, {
+				data: {
+					localName,
+					type,
+					level,
+				},
+			});
+			console.warn(...messages);
+		},
+	};
+
+	window.__swc.warn(
+		undefined,
+		"Spectrum Web Components is in dev mode. Not recommended for production!",
+		"https://opensource.adobe.com/spectrum-web-components/dev-mode/",
+		{ type: "default" },
+	);
 }
diff --git a/tools/base/src/condition-attribute-with-id.ts b/tools/base/src/condition-attribute-with-id.ts
index ec0c31f3a9..65e3784caa 100644
--- a/tools/base/src/condition-attribute-with-id.ts
+++ b/tools/base/src/condition-attribute-with-id.ts
@@ -11,37 +11,38 @@ governing permissions and limitations under the License.
 */
 
 export function conditionAttributeWithoutId(
-    el: HTMLElement,
-    attribute: string,
-    ids: string[]
+	el: HTMLElement,
+	attribute: string,
+	ids: string[],
 ): void {
-    const ariaDescribedby = el.getAttribute(attribute);
-    let descriptors = ariaDescribedby ? ariaDescribedby.split(/\s+/) : [];
-    descriptors = descriptors.filter(
-        (descriptor) => !ids.find((id) => descriptor === id)
-    );
-    if (descriptors.length) {
-        el.setAttribute(attribute, descriptors.join(' '));
-    } else {
-        el.removeAttribute(attribute);
-    }
+	const ariaDescribedby = el.getAttribute(attribute);
+	let descriptors = ariaDescribedby ? ariaDescribedby.split(/\s+/) : [];
+	descriptors = descriptors.filter(
+		(descriptor) => !ids.find((id) => descriptor === id),
+	);
+	if (descriptors.length) {
+		el.setAttribute(attribute, descriptors.join(" "));
+	} else {
+		el.removeAttribute(attribute);
+	}
 }
 
 export function conditionAttributeWithId(
-    el: HTMLElement,
-    attribute: string,
-    id: string | string[]
+	el: HTMLElement,
+	attribute: string,
+	id: string | string[],
 ): () => void {
-    const ids = Array.isArray(id) ? id : [id];
-    const ariaDescribedby = el.getAttribute(attribute);
-    const descriptors = ariaDescribedby ? ariaDescribedby.split(/\s+/) : [];
-    const hadIds = ids.every((id) => descriptors.indexOf(id) > -1);
-    if (hadIds)
-        /* c8 ignore next 3 */
-        return (): void => {
-            return;
-        };
-    descriptors.push(...ids);
-    el.setAttribute(attribute, descriptors.join(' '));
-    return () => conditionAttributeWithoutId(el, attribute, ids);
+	const ids = Array.isArray(id) ? id : [id];
+	const ariaDescribedby = el.getAttribute(attribute);
+	const descriptors = ariaDescribedby ? ariaDescribedby.split(/\s+/) : [];
+	const hadIds = ids.every((id) => descriptors.indexOf(id) > -1);
+	if (hadIds)
+		/* c8 ignore next 3 */
+		return (): void => {
+			return;
+		};
+	descriptors.push(...ids);
+	el.setAttribute(attribute, descriptors.join(" "));
+
+	return () => conditionAttributeWithoutId(el, attribute, ids);
 }
diff --git a/tools/base/src/sizedMixin.ts b/tools/base/src/sizedMixin.ts
index 296c51b209..dfd7654c88 100644
--- a/tools/base/src/sizedMixin.ts
+++ b/tools/base/src/sizedMixin.ts
@@ -9,76 +9,75 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { PropertyValues, ReactiveElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { PropertyValues, ReactiveElement } from "lit";
+import { property } from "lit/decorators.js";
 
 type Constructor> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    new (...args: any[]): T;
-    prototype: T;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	new (...args: any[]): T;
+	prototype: T;
 };
 
-export type ElementSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+export type ElementSize = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 export const ElementSizes: Record = {
-    xxs: 'xxs',
-    xs: 'xs',
-    s: 's',
-    m: 'm',
-    l: 'l',
-    xl: 'xl',
-    xxl: 'xxl',
+	xxs: "xxs",
+	xs: "xs",
+	s: "s",
+	m: "m",
+	l: "l",
+	xl: "xl",
+	xxl: "xxl",
 };
-export type DefaultElementSize = Exclude;
+export type DefaultElementSize = Exclude;
 
 export interface SizedElementInterface {
-    size: ElementSize;
+	size: ElementSize;
 }
 
 export function SizedMixin>(
-    constructor: T,
-    {
-        validSizes = ['s', 'm', 'l', 'xl'],
-        noDefaultSize,
-        defaultSize = 'm',
-    }: {
-        validSizes?: ElementSize[];
-        noDefaultSize?: boolean;
-        defaultSize?: ElementSize;
-    } = {}
+	constructor: T,
+	{
+		validSizes = ["s", "m", "l", "xl"],
+		noDefaultSize,
+		defaultSize = "m",
+	}: {
+		validSizes?: ElementSize[];
+		noDefaultSize?: boolean;
+		defaultSize?: ElementSize;
+	} = {},
 ): T & Constructor {
-    class SizedElement extends constructor {
-        @property({ type: String })
-        public get size(): ElementSize {
-            return this._size || defaultSize;
-        }
+	class SizedElement extends constructor {
+		@property({ type: String })
+		public get size(): ElementSize {
+			return this._size || defaultSize;
+		}
 
-        public set size(value: ElementSize) {
-            const fallbackSize = noDefaultSize ? null : defaultSize;
-            const size = (
-                value ? value.toLocaleLowerCase() : value
-            ) as ElementSize;
-            const validSize = (
-                validSizes.includes(size) ? size : fallbackSize
-            ) as ElementSize;
-            if (validSize) {
-                this.setAttribute('size', validSize);
-            }
-            if (this._size === validSize) {
-                return;
-            }
-            const oldSize = this._size;
-            this._size = validSize;
-            this.requestUpdate('size', oldSize);
-        }
+		public set size(value: ElementSize) {
+			const fallbackSize = noDefaultSize ? null : defaultSize;
+			const size = (value ? value.toLocaleLowerCase() : value) as ElementSize;
+			const validSize = (
+				validSizes.includes(size) ? size : fallbackSize
+			) as ElementSize;
+			if (validSize) {
+				this.setAttribute("size", validSize);
+			}
+			if (this._size === validSize) {
+				return;
+			}
+			const oldSize = this._size;
+			this._size = validSize;
+			this.requestUpdate("size", oldSize);
+		}
 
-        private _size: ElementSize | null = defaultSize;
+		private _size: ElementSize | null = defaultSize;
 
-        protected override update(changes: PropertyValues): void {
-            if (!this.hasAttribute('size') && !noDefaultSize) {
-                this.setAttribute('size', this.size);
-            }
-            super.update(changes);
-        }
-    }
-    return SizedElement;
+		protected override update(changes: PropertyValues): void {
+			if (!this.hasAttribute("size") && !noDefaultSize) {
+				this.setAttribute("size", this.size);
+			}
+			super.update(changes);
+		}
+	}
+
+	return SizedElement;
 }
diff --git a/tools/grid/src/Grid.ts b/tools/grid/src/Grid.ts
index 6cb3f9fa4c..ff539fb390 100644
--- a/tools/grid/src/Grid.ts
+++ b/tools/grid/src/Grid.ts
@@ -10,21 +10,21 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+import { grid } from "@lit-labs/virtualizer/layouts/grid.js";
+import { LitVirtualizer } from "@lit-labs/virtualizer/LitVirtualizer.js";
 import {
-    adoptStyles,
-    CSSResultArray,
-    html,
-    PropertyValues,
-    ReactiveElement,
-    render,
-    RootPart,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
-import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
-import styles from './grid.css.js';
-import { GridController } from './GridController.js';
+	adoptStyles,
+	CSSResultArray,
+	html,
+	PropertyValues,
+	ReactiveElement,
+	render,
+	RootPart,
+	TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import styles from "./grid.css.js";
+import { GridController } from "./GridController.js";
 
 /**
  * @element sp-grid
@@ -32,140 +32,138 @@ import { GridController } from './GridController.js';
  * @fires change - Announces that the value of `selected` has changed
  */
 export class Grid extends LitVirtualizer {
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    private __gridPart: RootPart | undefined = undefined;
-
-    @property({ type: String })
-    public focusableSelector!: string;
-
-    @property({ type: String })
-    public gap: `${'0' | `${number}px`}` = '0';
-
-    @property({ type: String })
-    public padding: `${'0' | `${number}px`}` | undefined;
-
-    @property({ type: Array })
-    public override items: Record[] = [];
-
-    @property({ type: Object })
-    public itemSize: {
-        width: number;
-        height: number;
-    } = {
-        width: 200,
-        height: 200,
-    };
-
-    @property({ type: Array })
-    public selected: Record[] = [];
-
-    gridController = new GridController(this, {
-        elements: () => [],
-        itemSize: () => this.itemSize,
-        /* c8 ignore next 2 */
-        gap: () => this.gap,
-        padding: () => this.padding || this.gap,
-    });
-
-    protected handleChange(event: Event): void {
-        const target = event.target as HTMLElement;
-        const value = this.items[
-            parseFloat(target.getAttribute('key') || '')
-        ] as Record;
-        const selected: Record[] = [...this.selected];
-        if (!selected.includes(value)) {
-            selected.push(value);
-        } else {
-            const index = selected.indexOf(value);
-            if (index > -1) {
-                selected.splice(index, 1);
-            }
-        }
-        this.selected = selected;
-    }
-
-    public override createRenderRoot(): this {
-        const renderRoot =
-            this.shadowRoot ??
-            this.attachShadow(
-                (this.constructor as typeof ReactiveElement).shadowRootOptions
-            );
-        adoptStyles(
-            renderRoot,
-            (this.constructor as typeof ReactiveElement).elementStyles
-        );
-        return renderRoot as unknown as this;
-    }
-
-    public override render(): TemplateResult<1> {
-        return html`
-            
-        `;
-    }
-
-    protected override update(changes: PropertyValues): void {
-        if (
-            changes.has('itemSize') ||
-            changes.has('gap') ||
-            changes.has('padding') ||
-            changes.has('focusableSelector')
-        ) {
-            this.updateComplete.then(() => {
-                this.gridController.update({
-                    elements: () => [
-                        ...this.querySelectorAll(
-                            this.focusableSelector
-                        ),
-                    ],
-                    itemSize: () => this.itemSize,
-                    gap: () => this.gap,
-                    padding: () => this.padding || this.gap,
-                });
-            });
-
-            this.layout = grid({
-                itemSize: {
-                    width: `${this.itemSize.width}px`,
-                    height: `${this.itemSize.height}px`,
-                },
-                gap: this.gap,
-                padding: this.padding || this.gap,
-            });
-        }
-        if (changes.has('renderItem')) {
-            const fn = this.renderItem as unknown as (
-                item: unknown,
-                index: number,
-                selected: boolean
-            ) => TemplateResult;
-            this.renderItem = (item, index: number): TemplateResult => {
-                const selected = this.selected.includes(
-                    item as Record
-                );
-                return fn(item, index, selected);
-            };
-        }
-
-        if (this.isConnected) {
-            this.__gridPart = render(super.render(), this);
-        }
-        super.update(changes);
-    }
-
-    override connectedCallback(): void {
-        super.connectedCallback();
-        this.__gridPart?.setConnected(true);
-        this.addEventListener('change', this.handleChange, { capture: true });
-    }
-
-    override disconnectedCallback(): void {
-        this.removeEventListener('change', this.handleChange, {
-            capture: true,
-        });
-        this.__gridPart?.setConnected(false);
-        super.disconnectedCallback();
-    }
+	public static override get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	private __gridPart: RootPart | undefined = undefined;
+
+	@property({ type: String })
+	public focusableSelector!: string;
+
+	@property({ type: String })
+	public gap: `${"0" | `${number}px`}` = "0";
+
+	@property({ type: String })
+	public padding: `${"0" | `${number}px`}` | undefined;
+
+	@property({ type: Array })
+	public override items: Record[] = [];
+
+	@property({ type: Object })
+	public itemSize: {
+		width: number;
+		height: number;
+	} = {
+		width: 200,
+		height: 200,
+	};
+
+	@property({ type: Array })
+	public selected: Record[] = [];
+
+	gridController = new GridController(this, {
+		elements: () => [],
+		itemSize: () => this.itemSize,
+		/* c8 ignore next 2 */
+		gap: () => this.gap,
+		padding: () => this.padding || this.gap,
+	});
+
+	protected handleChange(event: Event): void {
+		const target = event.target as HTMLElement;
+		const value = this.items[
+			parseFloat(target.getAttribute("key") || "")
+		] as Record;
+		const selected: Record[] = [...this.selected];
+		if (!selected.includes(value)) {
+			selected.push(value);
+		} else {
+			const index = selected.indexOf(value);
+			if (index > -1) {
+				selected.splice(index, 1);
+			}
+		}
+		this.selected = selected;
+	}
+
+	public override createRenderRoot(): this {
+		const renderRoot =
+			this.shadowRoot ??
+			this.attachShadow(
+				(this.constructor as typeof ReactiveElement).shadowRootOptions,
+			);
+		adoptStyles(
+			renderRoot,
+			(this.constructor as typeof ReactiveElement).elementStyles,
+		);
+
+		return renderRoot as unknown as this;
+	}
+
+	public override render(): TemplateResult<1> {
+		return html`  `;
+	}
+
+	protected override update(changes: PropertyValues): void {
+		if (
+			changes.has("itemSize") ||
+			changes.has("gap") ||
+			changes.has("padding") ||
+			changes.has("focusableSelector")
+		) {
+			this.updateComplete.then(() => {
+				this.gridController.update({
+					elements: () => [
+						...this.querySelectorAll(this.focusableSelector),
+					],
+					itemSize: () => this.itemSize,
+					gap: () => this.gap,
+					padding: () => this.padding || this.gap,
+				});
+			});
+
+			this.layout = grid({
+				itemSize: {
+					width: `${this.itemSize.width}px`,
+					height: `${this.itemSize.height}px`,
+				},
+				gap: this.gap,
+				padding: this.padding || this.gap,
+			});
+		}
+		if (changes.has("renderItem")) {
+			const fn = this.renderItem as unknown as (
+				item: unknown,
+				index: number,
+				selected: boolean,
+			) => TemplateResult;
+			this.renderItem = (item, index: number): TemplateResult => {
+				const selected = this.selected.includes(
+					item as Record,
+				);
+
+				return fn(item, index, selected);
+			};
+		}
+
+		if (this.isConnected) {
+			this.__gridPart = render(super.render(), this);
+		}
+		super.update(changes);
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.__gridPart?.setConnected(true);
+		this.addEventListener("change", this.handleChange, { capture: true });
+	}
+
+	override disconnectedCallback(): void {
+		this.removeEventListener("change", this.handleChange, {
+			capture: true,
+		});
+		this.__gridPart?.setConnected(false);
+		super.disconnectedCallback();
+	}
 }
diff --git a/tools/grid/src/GridController.ts b/tools/grid/src/GridController.ts
index 96e0b72de2..1510af737e 100644
--- a/tools/grid/src/GridController.ts
+++ b/tools/grid/src/GridController.ts
@@ -9,230 +9,223 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import type { ReactiveController } from 'lit';
+import type { ReactiveController } from "lit";
 
-import { ResizeController } from '@lit-labs/observers/resize-controller.js';
-import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import {
-    RangeChangedEvent,
-    VisibilityChangedEvent,
-} from '@lit-labs/virtualizer/events.js';
-import { Grid } from './Grid.js';
+	RangeChangedEvent,
+	VisibilityChangedEvent,
+} from "@lit-labs/virtualizer/events.js";
+import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
+import { Grid } from "./Grid.js";
 
 interface ItemSize {
-    width: number;
-    height: number;
+	width: number;
+	height: number;
 }
 
 const doCallbackAfterPaint = (cb: () => void): void => {
-    requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-            cb();
-        });
-    });
+	requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
+			cb();
+		});
+	});
 };
 
 export class GridController
-    implements ReactiveController
+	implements ReactiveController
 {
-    host!: Grid;
-
-    resizeController!: ResizeController;
-
-    rovingTabindexController!: RovingTabindexController;
-
-    get itemSize(): ItemSize {
-        return this._itemSize();
-    }
-
-    /* c8 ignore next 6 */
-    private _itemSize(): ItemSize {
-        return {
-            width: 100,
-            height: 100,
-        };
-    }
-
-    // First visible element
-    _first = 0;
-
-    get gap(): string | undefined {
-        return this._gap();
-    }
-
-    /* c8 ignore next 3 */
-    private _gap(): string | undefined {
-        return undefined;
-    }
-
-    get padding(): string | undefined {
-        return this._padding();
-    }
-
-    /* c8 ignore next 3 */
-    private _padding(): string | undefined {
-        return undefined;
-    }
-
-    // Last visible element
-    _last = 0;
-
-    constructor(
-        host: Grid,
-        {
-            elements,
-            itemSize,
-            gap,
-            padding,
-        }: {
-            elements: () => T[];
-            itemSize: ItemSize | (() => ItemSize);
-            gap?: string | (() => string);
-            padding?: string | (() => string);
-        }
-    ) {
-        this.host = host;
-        this.host.addController(this);
-        this.applyLayout(itemSize, gap, padding);
-        this.resizeController = new ResizeController(this.host, {
-            callback: (entries: ResizeObserverEntry[]): void => {
-                entries.forEach((entry) => {
-                    this.measureDirectionLength(entry.contentRect);
-                });
-            },
-        });
-        this.rovingTabindexController = new RovingTabindexController(
-            this.host,
-            {
-                direction: 'grid',
-                elements,
-                focusInIndex: () => {
-                    const activeElement = (this.host.getRootNode() as Document)
-                        .activeElement as HTMLElement;
-                    return activeElement === this.host ? 0 : -1;
-                },
-            }
-        );
-    }
-
-    public focus(options?: FocusOptions): void {
-        this.rovingTabindexController.focus(options);
-    }
-
-    protected applyLayout(
-        itemSize: ItemSize | (() => ItemSize),
-        gap?: string | (() => string),
-        padding?: string | (() => string)
-    ): void {
-        /* c8 ignore next 2 */
-        if (typeof itemSize === 'object') {
-            this._itemSize = () => itemSize;
-        } else if (
-            typeof itemSize === 'function' &&
-            typeof itemSize() !== 'undefined'
-        ) {
-            this._itemSize = itemSize;
-        }
-        /* c8 ignore next 2 */
-        if (typeof gap === 'string') {
-            this._gap = () => gap;
-        } else if (typeof gap === 'function') {
-            this._gap = gap;
-        }
-        /* c8 ignore next 2 */
-        if (typeof padding === 'string') {
-            this._padding = () => padding;
-        } else if (typeof padding === 'function') {
-            this._padding = padding;
-        }
-    }
-
-    public update({
-        elements,
-        itemSize,
-        gap,
-        padding,
-    }: {
-        elements: () => T[];
-        itemSize: ItemSize | (() => ItemSize);
-        gap?: string | (() => string);
-        padding?: string | (() => string);
-    }): void {
-        this.rovingTabindexController.update({ elements });
-        this.applyLayout(itemSize, gap, padding);
-        const contentRect = this.host.getBoundingClientRect();
-        this.measureDirectionLength(contentRect);
-    }
-
-    protected measureDirectionLength(contentRect: DOMRect): void {
-        const gap = this.gap ? parseFloat(this.gap) : 0;
-        const padding = this.padding ? parseFloat(this.padding) : 0;
-        const contentBoxWidth = contentRect.width - padding * 2;
-        // There is always one less gap per row than items.
-        const directionLength =
-            Math.floor(
-                (contentBoxWidth - this.itemSize.width) /
-                    (gap + this.itemSize.width)
-            ) + 1;
-        this.rovingTabindexController.directionLength =
-            Math.floor(directionLength);
-    }
-
-    protected handleFocusin = (event: FocusEvent): void => {
-        const scrollToFirst = (): void => this.host.scrollToIndex(0);
-        const focusIntoGrid = (): void => {
-            this.focus();
-            this.host.tabIndex = -1;
-        };
-        if ((event.target as HTMLElement) === this.host) {
-            if (this._first > 0) {
-                doCallbackAfterPaint(() => {
-                    scrollToFirst();
-                    doCallbackAfterPaint(focusIntoGrid);
-                });
-            } else {
-                doCallbackAfterPaint(focusIntoGrid);
-            }
-        }
-    };
-
-    protected handleFocusout = (event: FocusEvent): void => {
-        if (
-            !event.relatedTarget ||
-            !this.host.contains(event.relatedTarget as HTMLElement)
-        ) {
-            this.host.tabIndex = 0;
-        }
-    };
-
-    protected handleRangeChanged = (event: RangeChangedEvent): void => {
-        this.rovingTabindexController.clearElementCache(event.first);
-    };
-
-    protected handleVisibleChanged = (event: VisibilityChangedEvent): void => {
-        this._first = event.first;
-        this._last = event.last;
-    };
-
-    public hostConnected(): void {
-        this.host.addEventListener('rangeChanged', this.handleRangeChanged);
-        this.host.addEventListener(
-            'visibilityChanged',
-            this.handleVisibleChanged
-        );
-        this.host.addEventListener('focusin', this.handleFocusin);
-        this.host.addEventListener('focusout', this.handleFocusout);
-        this.host.tabIndex = 0;
-        this.host.style.setProperty('outline', 'none', 'important');
-    }
-
-    public hostDisconnected(): void {
-        this.host.removeEventListener('rangeChanged', this.handleRangeChanged);
-        this.host.removeEventListener(
-            'visibilityChanged',
-            this.handleVisibleChanged
-        );
-        this.host.removeEventListener('focusin', this.handleFocusin);
-        this.host.removeEventListener('focusout', this.handleFocusout);
-    }
+	host!: Grid;
+
+	resizeController!: ResizeController;
+
+	rovingTabindexController!: RovingTabindexController;
+
+	get itemSize(): ItemSize {
+		return this._itemSize();
+	}
+
+	/* c8 ignore next 6 */
+	private _itemSize(): ItemSize {
+		return {
+			width: 100,
+			height: 100,
+		};
+	}
+
+	// First visible element
+	_first = 0;
+
+	get gap(): string | undefined {
+		return this._gap();
+	}
+
+	/* c8 ignore next 3 */
+	private _gap(): string | undefined {
+		return undefined;
+	}
+
+	get padding(): string | undefined {
+		return this._padding();
+	}
+
+	/* c8 ignore next 3 */
+	private _padding(): string | undefined {
+		return undefined;
+	}
+
+	// Last visible element
+	_last = 0;
+
+	constructor(
+		host: Grid,
+		{
+			elements,
+			itemSize,
+			gap,
+			padding,
+		}: {
+			elements: () => T[];
+			itemSize: ItemSize | (() => ItemSize);
+			gap?: string | (() => string);
+			padding?: string | (() => string);
+		},
+	) {
+		this.host = host;
+		this.host.addController(this);
+		this.applyLayout(itemSize, gap, padding);
+		this.resizeController = new ResizeController(this.host, {
+			callback: (entries: ResizeObserverEntry[]): void => {
+				entries.forEach((entry) => {
+					this.measureDirectionLength(entry.contentRect);
+				});
+			},
+		});
+		this.rovingTabindexController = new RovingTabindexController(this.host, {
+			direction: "grid",
+			elements,
+			focusInIndex: () => {
+				const activeElement = (this.host.getRootNode() as Document)
+					.activeElement as HTMLElement;
+
+				return activeElement === this.host ? 0 : -1;
+			},
+		});
+	}
+
+	public focus(options?: FocusOptions): void {
+		this.rovingTabindexController.focus(options);
+	}
+
+	protected applyLayout(
+		itemSize: ItemSize | (() => ItemSize),
+		gap?: string | (() => string),
+		padding?: string | (() => string),
+	): void {
+		/* c8 ignore next 2 */
+		if (typeof itemSize === "object") {
+			this._itemSize = () => itemSize;
+		} else if (
+			typeof itemSize === "function" &&
+			typeof itemSize() !== "undefined"
+		) {
+			this._itemSize = itemSize;
+		}
+		/* c8 ignore next 2 */
+		if (typeof gap === "string") {
+			this._gap = () => gap;
+		} else if (typeof gap === "function") {
+			this._gap = gap;
+		}
+		/* c8 ignore next 2 */
+		if (typeof padding === "string") {
+			this._padding = () => padding;
+		} else if (typeof padding === "function") {
+			this._padding = padding;
+		}
+	}
+
+	public update({
+		elements,
+		itemSize,
+		gap,
+		padding,
+	}: {
+		elements: () => T[];
+		itemSize: ItemSize | (() => ItemSize);
+		gap?: string | (() => string);
+		padding?: string | (() => string);
+	}): void {
+		this.rovingTabindexController.update({ elements });
+		this.applyLayout(itemSize, gap, padding);
+		const contentRect = this.host.getBoundingClientRect();
+		this.measureDirectionLength(contentRect);
+	}
+
+	protected measureDirectionLength(contentRect: DOMRect): void {
+		const gap = this.gap ? parseFloat(this.gap) : 0;
+		const padding = this.padding ? parseFloat(this.padding) : 0;
+		const contentBoxWidth = contentRect.width - padding * 2;
+		// There is always one less gap per row than items.
+		const directionLength =
+			Math.floor(
+				(contentBoxWidth - this.itemSize.width) / (gap + this.itemSize.width),
+			) + 1;
+		this.rovingTabindexController.directionLength = Math.floor(directionLength);
+	}
+
+	protected handleFocusin = (event: FocusEvent): void => {
+		const scrollToFirst = (): void => this.host.scrollToIndex(0);
+		const focusIntoGrid = (): void => {
+			this.focus();
+			this.host.tabIndex = -1;
+		};
+		if ((event.target as HTMLElement) === this.host) {
+			if (this._first > 0) {
+				doCallbackAfterPaint(() => {
+					scrollToFirst();
+					doCallbackAfterPaint(focusIntoGrid);
+				});
+			} else {
+				doCallbackAfterPaint(focusIntoGrid);
+			}
+		}
+	};
+
+	protected handleFocusout = (event: FocusEvent): void => {
+		if (
+			!event.relatedTarget ||
+			!this.host.contains(event.relatedTarget as HTMLElement)
+		) {
+			this.host.tabIndex = 0;
+		}
+	};
+
+	protected handleRangeChanged = (event: RangeChangedEvent): void => {
+		this.rovingTabindexController.clearElementCache(event.first);
+	};
+
+	protected handleVisibleChanged = (event: VisibilityChangedEvent): void => {
+		this._first = event.first;
+		this._last = event.last;
+	};
+
+	public hostConnected(): void {
+		this.host.addEventListener("rangeChanged", this.handleRangeChanged);
+		this.host.addEventListener("visibilityChanged", this.handleVisibleChanged);
+		this.host.addEventListener("focusin", this.handleFocusin);
+		this.host.addEventListener("focusout", this.handleFocusout);
+		this.host.tabIndex = 0;
+		this.host.style.setProperty("outline", "none", "important");
+	}
+
+	public hostDisconnected(): void {
+		this.host.removeEventListener("rangeChanged", this.handleRangeChanged);
+		this.host.removeEventListener(
+			"visibilityChanged",
+			this.handleVisibleChanged,
+		);
+		this.host.removeEventListener("focusin", this.handleFocusin);
+		this.host.removeEventListener("focusout", this.handleFocusout);
+	}
 }
diff --git a/tools/grid/stories/grid.stories.ts b/tools/grid/stories/grid.stories.ts
index 5f972d8f48..adb764b3bd 100644
--- a/tools/grid/stories/grid.stories.ts
+++ b/tools/grid/stories/grid.stories.ts
@@ -11,304 +11,301 @@ governing permissions and limitations under the License.
 */
 
 import {
-    css,
-    html,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+	css,
+	html,
+	SpectrumElement,
+	TemplateResult,
+} from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/grid/sp-grid.js';
-import '@spectrum-web-components/action-bar/sp-action-bar.js';
-import '@spectrum-web-components/card/sp-card.js';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/checkbox/sp-checkbox.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
-import type { ActionBar } from '@spectrum-web-components/action-bar';
-import type { Grid } from '@spectrum-web-components/grid';
+import type { ActionBar } from "@spectrum-web-components/action-bar";
+import "@spectrum-web-components/action-bar/sp-action-bar.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/card/sp-card.js";
+import "@spectrum-web-components/checkbox/sp-checkbox.js";
+import type { Grid } from "@spectrum-web-components/grid";
+import "@spectrum-web-components/grid/sp-grid.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
 
 export default {
-    title: 'Grid',
-    component: 'sp-grid',
+	title: "Grid",
+	component: "sp-grid",
 };
 
 interface Item extends Record {
-    id: number;
+	id: number;
 }
 
 function generateItems(count: number): Item[] {
-    const items: Item[] = [];
-    while (count) {
-        count -= 1;
-        items.unshift({ id: count });
-    }
-    return items;
+	const items: Item[] = [];
+	while (count) {
+		count -= 1;
+		items.unshift({ id: count });
+	}
+
+	return items;
 }
 
 const renderItem = (
-    item: Item,
-    index: number,
-    selected: boolean
+	item: Item,
+	index: number,
+	selected: boolean,
 ): TemplateResult => {
-    return html`
-        
-            
-            
10/15/18

-            
Footer

-            
-                
-                    Do stuff
-                
-                Deselect
-                Select Inverse
-                Feather...
-                Select and Mask...
-                
-                Save Selection
-                Make Work Path
-            
-        
-    `;
+	return html`
+		
+			
+			
10/15/18

+			
Footer

+			
+				
+					Do stuff
+				
+				Deselect
+				Select Inverse
+				Feather...
+				Select and Mask...
+				
+				Save Selection
+				Make Work Path
+			
+		
+	`;
 };
 
 const handleChange = (event: Event & { currentTarget: Grid }): void => {
-    const actionbar = document.querySelector('sp-action-bar') as ActionBar;
-    const selected = document.querySelector('.selected') as HTMLElement;
-    const ids = document.querySelector('.ids') as HTMLElement;
-    actionbar.open = !!event.currentTarget.selected.length;
-    actionbar.style.setProperty(
-        'display',
-        !!event.currentTarget.selected.length ? 'flex' : 'none'
-    );
-    selected.textContent = '' + event.currentTarget.selected.length;
-    ids.textContent =
-        '' +
-        event.currentTarget.selected
-            .map((selection) => selection.id)
-            .join(', ');
+	const actionbar = document.querySelector("sp-action-bar") as ActionBar;
+	const selected = document.querySelector(".selected") as HTMLElement;
+	const ids = document.querySelector(".ids") as HTMLElement;
+	actionbar.open = !!event.currentTarget.selected.length;
+	actionbar.style.setProperty(
+		"display",
+		event.currentTarget.selected.length ? "flex" : "none",
+	);
+	selected.textContent = "" + event.currentTarget.selected.length;
+	ids.textContent =
+		"" +
+		event.currentTarget.selected.map((selection) => selection.id).join(", ");
 };
 
 const handleActionBarChange = (event: Event): void => {
-    event.preventDefault();
-    const grid = document.querySelector('sp-grid') as Grid;
-    const actionbar = document.querySelector('sp-action-bar') as ActionBar;
-    actionbar.open = false;
-    grid.selected = [];
+	event.preventDefault();
+	const grid = document.querySelector("sp-grid") as Grid;
+	const actionbar = document.querySelector("sp-action-bar") as ActionBar;
+	actionbar.open = false;
+	grid.selected = [];
 };
 
 export const Default = (): TemplateResult => {
-    const items = generateItems(1000);
+	const items = generateItems(1000);
 
-    return html`
-        
Random before content that is focusable

-        
-        
-        
-            
-                
-                Selected
-                
-            
-            
-                
-                    
-                
-                
-                    
-                
-            
-        
-        
Random after content that is focusable

-        
-    `;
+	return html`
+		
Random before content that is focusable

+		
+		
+		
+			
+				
+				Selected
+				
+			
+			
+				
+					
+				
+				
+					
+				
+			
+		
+		
Random after content that is focusable

+		
+	`;
 };
 
 Default.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 Default.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
 
 export const sized = (
-    { gap, padding } = { gap: 10, padding: 10 }
+	{ gap, padding } = { gap: 10, padding: 10 },
 ): TemplateResult => {
-    const items = generateItems(1000);
+	const items = generateItems(1000);
 
-    function handleMediaChange(): void {
-        let width = document.body.offsetWidth * 0.4;
-        const height = 300;
-        if (matchMedium.matches) {
-            width = 300;
-        } else if (matchLarge.matches) {
-            width = 400;
-        }
-        (document.querySelector('sp-grid') as Grid).itemSize = {
-            width,
-            height,
-        };
-    }
+	function handleMediaChange(): void {
+		let width = document.body.offsetWidth * 0.4;
+		const height = 300;
+		if (matchMedium.matches) {
+			width = 300;
+		} else if (matchLarge.matches) {
+			width = 400;
+		}
+		(document.querySelector("sp-grid") as Grid).itemSize = {
+			width,
+			height,
+		};
+	}
 
-    const matchSmall = window.matchMedia('(max-width: 600px)');
-    const matchMedium = window.matchMedia(
-        '(min-width: 601px) and (max-width: 1200px)'
-    );
-    const matchLarge = window.matchMedia('(min-width: 1201px)');
+	const matchSmall = window.matchMedia("(max-width: 600px)");
+	const matchMedium = window.matchMedia(
+		"(min-width: 601px) and (max-width: 1200px)",
+	);
+	const matchLarge = window.matchMedia("(min-width: 1201px)");
 
-    matchSmall.addEventListener('change', handleMediaChange);
-    matchMedium.addEventListener('change', handleMediaChange);
-    matchLarge.addEventListener('change', handleMediaChange);
+	matchSmall.addEventListener("change", handleMediaChange);
+	matchMedium.addEventListener("change", handleMediaChange);
+	matchLarge.addEventListener("change", handleMediaChange);
 
-    return html`
-        
Random before content that is focusable

-        
-        
-        
-            
-                
-                Selected
-                
-            
-            
-                
-                    
-                
-                
-                    
-                
-            
-        
-        
Random after content that is focusable

-        
-    `;
+	return html`
+		
Random before content that is focusable

+		
+		
+		
+			
+				
+				Selected
+				
+			
+			
+				
+					
+				
+				
+					
+				
+			
+		
+		
Random after content that is focusable

+		
+	`;
 };
 
 sized.args = {
-    gap: 10,
-    padding: 10,
+	gap: 10,
+	padding: 10,
 };
 
 sized.argTypes = {
-    gap: {
-        name: 'gap',
-        type: { name: 'number', required: false },
-        description: 'Spacing between items.',
-        table: {
-            type: { summary: 'number' },
-        },
-        control: {
-            type: 'number',
-        },
-    },
-    padding: {
-        name: 'padding',
-        type: { name: 'number', required: false },
-        description: 'Spacing around all items.',
-        table: {
-            type: { summary: 'number' },
-        },
-        control: {
-            type: 'number',
-        },
-    },
+	gap: {
+		name: "gap",
+		type: { name: "number", required: false },
+		description: "Spacing between items.",
+		table: {
+			type: { summary: "number" },
+		},
+		control: {
+			type: "number",
+		},
+	},
+	padding: {
+		name: "padding",
+		type: { name: "number", required: false },
+		description: "Spacing around all items.",
+		table: {
+			type: { summary: "number" },
+		},
+		control: {
+			type: "number",
+		},
+	},
 };
 
 sized.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 sized.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
 
 class MyParent extends SpectrumElement {
-    static override styles = [
-        css`
-            :host {
-                display: block;
-                height: 100vh;
-                overflow: hidden;
-            }
+	static override styles = [
+		css`
+			:host {
+				display: block;
+				height: 100vh;
+				overflow: hidden;
+			}
 
-            .child {
-                height: 100%;
-                overflow: scroll;
-            }
-        `,
-    ];
+			.child {
+				height: 100%;
+				overflow: scroll;
+			}
+		`,
+	];
 
-    override render(): TemplateResult {
-        return html`
-            

-        `;
-    }
+	override render(): TemplateResult {
+		return html` 
 `;
+	}
 }
 
-customElements.define('my-parent', MyParent);
+customElements.define("my-parent", MyParent);
 
 export const scrollParentInAssignedSlot = (): TemplateResult => {
-    const items = generateItems(1000);
+	const items = generateItems(1000);
 
-    return html`
-        
-            
-        
-    `;
+	return html`
+		
+			
+		
+	`;
 };
 
 scrollParentInAssignedSlot.swc_vrt = {
-    skip: true,
+	skip: true,
 };
 
 scrollParentInAssignedSlot.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+	// Disables Chromatic's snapshotting on a global level
+	chromatic: { disableSnapshot: true },
 };
diff --git a/tools/reactive-controllers/src/Color.ts b/tools/reactive-controllers/src/Color.ts
index d5c5dd518f..f8902d9094 100644
--- a/tools/reactive-controllers/src/Color.ts
+++ b/tools/reactive-controllers/src/Color.ts
@@ -10,316 +10,310 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import type { ReactiveElement } from 'lit';
-import { HSL, HSLA, HSV, HSVA, RGB, RGBA, TinyColor } from '@ctrl/tinycolor';
+import { HSL, HSLA, HSV, HSVA, RGB, RGBA, TinyColor } from "@ctrl/tinycolor";
+import type { ReactiveElement } from "lit";
 export type { HSL, HSLA, HSV, HSVA, RGB, RGBA, TinyColor };
 
 export type ColorValue =
-    | string
-    | number
-    | TinyColor
-    | HSVA
-    | HSV
-    | RGB
-    | RGBA
-    | HSL
-    | HSLA;
+	| string
+	| number
+	| TinyColor
+	| HSVA
+	| HSV
+	| RGB
+	| RGBA
+	| HSL
+	| HSLA;
 
 export const extractHueAndSaturationRegExp =
-    /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/;
+	/^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/;
 export const replaceHueAndSaturationRegExp =
-    /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/;
+	/(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/;
 export const replaceHueRegExp = /(^hs[v|l]a?\()\d{1,3}/;
 
 type TinyColorToValue = {
-    toHex: ColorValue;
-    toHexString: ColorValue;
-    toHsv: ColorValue;
-    toHsvString: ColorValue;
-    toHsl: ColorValue;
-    toHslString: ColorValue;
-    toHex8: ColorValue;
-    toHex8String: ColorValue;
-    toPercentageRgb: ColorValue;
-    toPercentageRgbString: ColorValue;
-    toRgb: ColorValue;
-    toRgbString: ColorValue;
+	toHex: ColorValue;
+	toHexString: ColorValue;
+	toHsv: ColorValue;
+	toHsvString: ColorValue;
+	toHsl: ColorValue;
+	toHslString: ColorValue;
+	toHex8: ColorValue;
+	toHex8String: ColorValue;
+	toPercentageRgb: ColorValue;
+	toPercentageRgbString: ColorValue;
+	toRgb: ColorValue;
+	toRgbString: ColorValue;
 };
 
 const getHexValue = (color: TinyColor, isString: boolean): ColorValue =>
-    isString ? color.toHexString() : color.toHex();
+	isString ? color.toHexString() : color.toHex();
 
 export class ColorController {
-    protected host: ReactiveElement;
-
-    protected applyColorToState!: ({
-        h,
-        s,
-        v,
-    }: {
-        h: number;
-        s: number;
-        v: number;
-    }) => void;
-
-    protected extractColorFromState!: (
-        controller: ColorController
-    ) => ColorValue;
-
-    protected setColorProcess(
-        currentColor: TinyColor,
-        nextColor: ColorValue,
-        format: string,
-        isString: boolean
-    ): void {
-        if (this.maintains === 'hue') {
-            this.setColorMaintainHue(currentColor, nextColor, format, isString);
-        } else if (this.maintains === 'saturation') {
-            this.setColorMaintainSaturation(
-                currentColor,
-                nextColor,
-                format,
-                isString
-            );
-        }
-    }
-
-    protected setColorMaintainHue(
-        currentColor: TinyColor,
-        nextColor: ColorValue,
-        format: string,
-        isString: boolean
-    ): void {
-        const { h, s, v } = this._color.toHsv();
-        let originalHue: number | undefined = undefined;
-
-        if (isString && format.startsWith('hs')) {
-            const values = extractHueAndSaturationRegExp.exec(
-                nextColor as string
-            );
-
-            if (values !== null) {
-                const [, h] = values;
-                originalHue = Number(h);
-            }
-        } else if (!isString && format.startsWith('hs')) {
-            const colorInput = currentColor.originalInput;
-            const colorValues = Object.values(colorInput);
-            originalHue = colorValues[0];
-        }
-
-        this.hue = originalHue || h;
-        this.applyColorToState({ h, s, v });
-    }
-
-    protected setColorMaintainSaturation(
-        currentColor: TinyColor,
-        nextColor: ColorValue,
-        format: string,
-        isString: boolean
-    ): void {
-        if (isString && format.startsWith('hs')) {
-            const values = extractHueAndSaturationRegExp.exec(
-                nextColor as string
-            );
-
-            if (values !== null) {
-                const [, h, s] = values;
-                this.hue = Number(h);
-                this.saturation = Number(s);
-            }
-        } else if (!isString && format.startsWith('hs')) {
-            const colorInput = currentColor.originalInput;
-            const colorValues = Object.values(colorInput);
-            this.hue = colorValues[0];
-            this.saturation = colorValues[1];
-        } else {
-            const { h } = currentColor.toHsv();
-            this.hue = h;
-        }
-        this.applyColorToState(currentColor.toHsv());
-    }
-
-    protected maintains: 'hue' | 'saturation' = 'hue';
-    private saturation!: number;
-
-    constructor(
-        host: ReactiveElement,
-        {
-            applyColorToState,
-            extractColorFromState,
-            maintains,
-        }: {
-            applyColorToState({
-                h,
-                s,
-                v,
-            }: {
-                h: number;
-                s: number;
-                v: number;
-            }): void;
-            extractColorFromState(controller: ColorController): ColorValue;
-            maintains?: 'hue' | 'saturation';
-        }
-    ) {
-        this.host = host;
-        this.applyColorToState = applyColorToState;
-        this.extractColorFromState = extractColorFromState;
-        this.maintains = maintains || this.maintains;
-    }
-
-    public applyColorFromState(): void {
-        this._color = new TinyColor(this.extractColorFromState(this));
-    }
-
-    public get hue(): number {
-        return this._hue;
-    }
-
-    public set hue(value: number) {
-        const hue = Math.min(360, Math.max(0, value));
-        if (hue === this.hue) {
-            return;
-        }
-        const oldValue = this.hue;
-        const { s, v } = this._color.toHsv();
-        this._color = new TinyColor({ h: hue, s, v });
-        this._hue = hue;
-        this.host.requestUpdate('hue', oldValue);
-    }
-
-    private _hue = 0;
-
-    protected getColorProcesses: Record<
-        string,
-        (color: TinyColor, isString: boolean) => ColorValue
-    > = {
-        rgb: (color, isString) =>
-            isString ? color.toRgbString() : color.toRgb(),
-        prgb: (color, isString) =>
-            isString ? color.toPercentageRgbString() : color.toPercentageRgb(),
-        hex8: (color, isString) =>
-            isString ? color.toHex8String() : color.toHex8(),
-        name: (color) => color.toName() || color.toRgbString(),
-        hsl: (color, isString) => {
-            if (this.maintains === 'hue') {
-                if (isString) {
-                    const hslString = color.toHslString();
-                    return hslString.replace(replaceHueRegExp, `$1${this.hue}`);
-                } else {
-                    const { s, l, a } = color.toHsl();
-                    return { h: this.hue, s, l, a };
-                }
-            } else {
-                if (isString) {
-                    const hslString = color.toHslString();
-                    return hslString.replace(
-                        replaceHueAndSaturationRegExp,
-                        `$1${this.hue}$2${this.saturation}`
-                    );
-                } else {
-                    const { s, l, a } = color.toHsl();
-                    return { h: this.hue, s, l, a };
-                }
-            }
-        },
-        hsv: (color, isString) => {
-            if (this.maintains === 'hue') {
-                if (isString) {
-                    const hsvString = color.toHsvString();
-                    return hsvString.replace(replaceHueRegExp, `$1${this.hue}`);
-                } else {
-                    const { s, v, a } = color.toHsv();
-                    return { h: this.hue, s, v, a };
-                }
-            } else {
-                if (isString) {
-                    const hsvString = color.toHsvString();
-                    return hsvString.replace(
-                        replaceHueAndSaturationRegExp,
-                        `$1${this.hue}$2${this.saturation}`
-                    );
-                } else {
-                    const { s, v, a } = color.toHsv();
-                    return { h: this.hue, s, v, a };
-                }
-            }
-        },
-        hex: getHexValue,
-        hex3: getHexValue,
-        hex4: getHexValue,
-        hex6: getHexValue,
-    };
-
-    /* c8 ignore next 3 */
-    public get value(): ColorValue {
-        return this.color;
-    }
-
-    public get color(): ColorValue {
-        return this.getColorProcesses[this._format.format || 'hex'](
-            this._color,
-            this._format.isString
-        );
-    }
-
-    public set color(color: ColorValue) {
-        /* c8 ignore next 3 */
-        if (color === this.color) {
-            return;
-        }
-        const oldValue = this._color;
-        this._color = new TinyColor(color);
-        const format = this._color.format;
-        let isString = typeof color === 'string' || color instanceof String;
-
-        if (format.startsWith('hex')) {
-            isString = (color as string).startsWith('#');
-        }
-
-        this._format = {
-            format,
-            isString,
-        };
-
-        this.setColorProcess(this._color, color, format, isString);
-        this.host.requestUpdate('color', oldValue);
-    }
-
-    private _color = new TinyColor({ h: 0, s: 1, v: 1 });
-
-    public getColor(format: string): ColorValue {
-        const formatOptions: Record = {
-            hsl: 'toHsl',
-        };
-        return this._color[formatOptions[format]]();
-    }
-
-    public setColor(color: TinyColor): void {
-        this._color = color;
-        const isString =
-            typeof this._color.originalInput === 'string' ||
-            this._color.originalInput instanceof String;
-        this.setColorProcess(this._color, color, this._color.format, isString);
-    }
-
-    public getHslString(): string {
-        return this._color.toHslString();
-    }
-
-    private _previousColor = new TinyColor({ h: 0, s: 1, v: 1 });
-
-    public savePreviousColor(): void {
-        this._previousColor = this._color.clone();
-    }
-
-    public restorePreviousColor(): void {
-        this.setColor(this._previousColor);
-    }
-
-    private _format: { format: string; isString: boolean } = {
-        format: '',
-        isString: false,
-    };
+	protected host: ReactiveElement;
+
+	protected applyColorToState!: ({
+		h,
+		s,
+		v,
+	}: {
+		h: number;
+		s: number;
+		v: number;
+	}) => void;
+
+	protected extractColorFromState!: (controller: ColorController) => ColorValue;
+
+	protected setColorProcess(
+		currentColor: TinyColor,
+		nextColor: ColorValue,
+		format: string,
+		isString: boolean,
+	): void {
+		if (this.maintains === "hue") {
+			this.setColorMaintainHue(currentColor, nextColor, format, isString);
+		} else if (this.maintains === "saturation") {
+			this.setColorMaintainSaturation(
+				currentColor,
+				nextColor,
+				format,
+				isString,
+			);
+		}
+	}
+
+	protected setColorMaintainHue(
+		currentColor: TinyColor,
+		nextColor: ColorValue,
+		format: string,
+		isString: boolean,
+	): void {
+		const { h, s, v } = this._color.toHsv();
+		let originalHue: number | undefined = undefined;
+
+		if (isString && format.startsWith("hs")) {
+			const values = extractHueAndSaturationRegExp.exec(nextColor as string);
+
+			if (values !== null) {
+				const [, h] = values;
+				originalHue = Number(h);
+			}
+		} else if (!isString && format.startsWith("hs")) {
+			const colorInput = currentColor.originalInput;
+			const colorValues = Object.values(colorInput);
+			originalHue = colorValues[0];
+		}
+
+		this.hue = originalHue || h;
+		this.applyColorToState({ h, s, v });
+	}
+
+	protected setColorMaintainSaturation(
+		currentColor: TinyColor,
+		nextColor: ColorValue,
+		format: string,
+		isString: boolean,
+	): void {
+		if (isString && format.startsWith("hs")) {
+			const values = extractHueAndSaturationRegExp.exec(nextColor as string);
+
+			if (values !== null) {
+				const [, h, s] = values;
+				this.hue = Number(h);
+				this.saturation = Number(s);
+			}
+		} else if (!isString && format.startsWith("hs")) {
+			const colorInput = currentColor.originalInput;
+			const colorValues = Object.values(colorInput);
+			this.hue = colorValues[0];
+			this.saturation = colorValues[1];
+		} else {
+			const { h } = currentColor.toHsv();
+			this.hue = h;
+		}
+		this.applyColorToState(currentColor.toHsv());
+	}
+
+	protected maintains: "hue" | "saturation" = "hue";
+	private saturation!: number;
+
+	constructor(
+		host: ReactiveElement,
+		{
+			applyColorToState,
+			extractColorFromState,
+			maintains,
+		}: {
+			applyColorToState({ h, s, v }: { h: number; s: number; v: number }): void;
+			extractColorFromState(controller: ColorController): ColorValue;
+			maintains?: "hue" | "saturation";
+		},
+	) {
+		this.host = host;
+		this.applyColorToState = applyColorToState;
+		this.extractColorFromState = extractColorFromState;
+		this.maintains = maintains || this.maintains;
+	}
+
+	public applyColorFromState(): void {
+		this._color = new TinyColor(this.extractColorFromState(this));
+	}
+
+	public get hue(): number {
+		return this._hue;
+	}
+
+	public set hue(value: number) {
+		const hue = Math.min(360, Math.max(0, value));
+		if (hue === this.hue) {
+			return;
+		}
+		const oldValue = this.hue;
+		const { s, v } = this._color.toHsv();
+		this._color = new TinyColor({ h: hue, s, v });
+		this._hue = hue;
+		this.host.requestUpdate("hue", oldValue);
+	}
+
+	private _hue = 0;
+
+	protected getColorProcesses: Record<
+		string,
+		(color: TinyColor, isString: boolean) => ColorValue
+	> = {
+		rgb: (color, isString) => (isString ? color.toRgbString() : color.toRgb()),
+		prgb: (color, isString) =>
+			isString ? color.toPercentageRgbString() : color.toPercentageRgb(),
+		hex8: (color, isString) =>
+			isString ? color.toHex8String() : color.toHex8(),
+		name: (color) => color.toName() || color.toRgbString(),
+		hsl: (color, isString) => {
+			if (this.maintains === "hue") {
+				if (isString) {
+					const hslString = color.toHslString();
+
+					return hslString.replace(replaceHueRegExp, `$1${this.hue}`);
+				} else {
+					const { s, l, a } = color.toHsl();
+
+					return { h: this.hue, s, l, a };
+				}
+			} else {
+				if (isString) {
+					const hslString = color.toHslString();
+
+					return hslString.replace(
+						replaceHueAndSaturationRegExp,
+						`$1${this.hue}$2${this.saturation}`,
+					);
+				} else {
+					const { s, l, a } = color.toHsl();
+
+					return { h: this.hue, s, l, a };
+				}
+			}
+		},
+		hsv: (color, isString) => {
+			if (this.maintains === "hue") {
+				if (isString) {
+					const hsvString = color.toHsvString();
+
+					return hsvString.replace(replaceHueRegExp, `$1${this.hue}`);
+				} else {
+					const { s, v, a } = color.toHsv();
+
+					return { h: this.hue, s, v, a };
+				}
+			} else {
+				if (isString) {
+					const hsvString = color.toHsvString();
+
+					return hsvString.replace(
+						replaceHueAndSaturationRegExp,
+						`$1${this.hue}$2${this.saturation}`,
+					);
+				} else {
+					const { s, v, a } = color.toHsv();
+
+					return { h: this.hue, s, v, a };
+				}
+			}
+		},
+		hex: getHexValue,
+		hex3: getHexValue,
+		hex4: getHexValue,
+		hex6: getHexValue,
+	};
+
+	/* c8 ignore next 3 */
+	public get value(): ColorValue {
+		return this.color;
+	}
+
+	public get color(): ColorValue {
+		return this.getColorProcesses[this._format.format || "hex"](
+			this._color,
+			this._format.isString,
+		);
+	}
+
+	public set color(color: ColorValue) {
+		/* c8 ignore next 3 */
+		if (color === this.color) {
+			return;
+		}
+		const oldValue = this._color;
+		this._color = new TinyColor(color);
+		const format = this._color.format;
+		let isString = typeof color === "string" || color instanceof String;
+
+		if (format.startsWith("hex")) {
+			isString = (color as string).startsWith("#");
+		}
+
+		this._format = {
+			format,
+			isString,
+		};
+
+		this.setColorProcess(this._color, color, format, isString);
+		this.host.requestUpdate("color", oldValue);
+	}
+
+	private _color = new TinyColor({ h: 0, s: 1, v: 1 });
+
+	public getColor(format: string): ColorValue {
+		const formatOptions: Record = {
+			hsl: "toHsl",
+		};
+
+		return this._color[formatOptions[format]]();
+	}
+
+	public setColor(color: TinyColor): void {
+		this._color = color;
+		const isString =
+			typeof this._color.originalInput === "string" ||
+			this._color.originalInput instanceof String;
+		this.setColorProcess(this._color, color, this._color.format, isString);
+	}
+
+	public getHslString(): string {
+		return this._color.toHslString();
+	}
+
+	private _previousColor = new TinyColor({ h: 0, s: 1, v: 1 });
+
+	public savePreviousColor(): void {
+		this._previousColor = this._color.clone();
+	}
+
+	public restorePreviousColor(): void {
+		this.setColor(this._previousColor);
+	}
+
+	private _format: { format: string; isString: boolean } = {
+		format: "",
+		isString: false,
+	};
 }
diff --git a/tools/reactive-controllers/src/ElementResolution.ts b/tools/reactive-controllers/src/ElementResolution.ts
index 8531b5a4ef..12b140a112 100644
--- a/tools/reactive-controllers/src/ElementResolution.ts
+++ b/tools/reactive-controllers/src/ElementResolution.ts
@@ -10,130 +10,128 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import type { ReactiveController, ReactiveElement } from 'lit';
-export const elementResolverUpdatedSymbol = Symbol('element resolver updated');
+import type { ReactiveController, ReactiveElement } from "lit";
+export const elementResolverUpdatedSymbol = Symbol("element resolver updated");
 
 export class ElementResolutionController implements ReactiveController {
-    get element(): HTMLElement | null {
-        return this._element;
-    }
-
-    set element(element: HTMLElement | null) {
-        if (element === this.element) return;
-        const previous = this.element;
-        this._element = element;
-        // requestUpdate leveraging the exported Symbol() so that the
-        // changes can be easily tracked in the host element.
-        this.host.requestUpdate(elementResolverUpdatedSymbol, previous);
-    }
-
-    private _element: HTMLElement | null = null;
-
-    private host!: ReactiveElement;
-
-    private observer!: MutationObserver;
-
-    get selector(): string {
-        return this._selector;
-    }
-
-    set selector(selector: string) {
-        if (selector === this.selector) return;
-        this.releaseElement();
-        this._selector = selector;
-        this.resolveElement();
-    }
-
-    private _selector = '';
-
-    get selectorAsId(): string {
-        return this.selector.slice(1);
-    }
-
-    get selectorIsId(): boolean {
-        return !!this.selector && this.selector.startsWith('#');
-    }
-
-    constructor(
-        host: ReactiveElement,
-        { selector }: { selector: string } = { selector: '' }
-    ) {
-        this.host = host;
-        this.selector = selector;
-        this.observer = new MutationObserver(this.mutationCallback);
-        // Add the controller after the MutationObserver has been created in preparation
-        // for the `hostConnected`/`hostDisconnected` callbacks to be run.
-        this.host.addController(this);
-    }
-
-    protected mutationCallback: MutationCallback = (mutationList) => {
-        let needsResolution = false;
-        mutationList.forEach((mutation) => {
-            if (needsResolution) return;
-            if (mutation.type === 'childList') {
-                const currentElementRemoved =
-                    this.element &&
-                    [...mutation.removedNodes].includes(this.element);
-                const matchingElementAdded =
-                    !!this.selector &&
-                    ([...mutation.addedNodes] as HTMLElement[]).some(
-                        this.elementIsSelected
-                    );
-                needsResolution =
-                    needsResolution ||
-                    currentElementRemoved ||
-                    matchingElementAdded;
-            }
-            if (mutation.type === 'attributes') {
-                const attributeChangedOnCurrentElement =
-                    mutation.target === this.element;
-                const attributeChangedOnMatchingElement =
-                    !!this.selector &&
-                    this.elementIsSelected(mutation.target as HTMLElement);
-                needsResolution =
-                    needsResolution ||
-                    attributeChangedOnCurrentElement ||
-                    attributeChangedOnMatchingElement;
-            }
-        });
-        if (needsResolution) {
-            this.resolveElement();
-        }
-    };
-
-    public hostConnected(): void {
-        this.resolveElement();
-        this.observer.observe(this.host.getRootNode(), {
-            subtree: true,
-            childList: true,
-            attributes: true,
-        });
-    }
-
-    public hostDisconnected(): void {
-        this.releaseElement();
-        this.observer.disconnect();
-    }
-
-    private resolveElement(): void {
-        if (!this.selector) {
-            this.releaseElement();
-            return;
-        }
-
-        const parent = this.host.getRootNode() as ShadowRoot;
-        this.element = this.selectorIsId
-            ? (parent.getElementById(this.selectorAsId) as HTMLElement)
-            : (parent.querySelector(this.selector) as HTMLElement);
-    }
-
-    private releaseElement(): void {
-        this.element = null;
-    }
-
-    private elementIsSelected = (el: HTMLElement): boolean => {
-        return this.selectorIsId
-            ? el?.id === this.selectorAsId
-            : el?.matches?.(this.selector);
-    };
+	get element(): HTMLElement | null {
+		return this._element;
+	}
+
+	set element(element: HTMLElement | null) {
+		if (element === this.element) return;
+		const previous = this.element;
+		this._element = element;
+		// requestUpdate leveraging the exported Symbol() so that the
+		// changes can be easily tracked in the host element.
+		this.host.requestUpdate(elementResolverUpdatedSymbol, previous);
+	}
+
+	private _element: HTMLElement | null = null;
+
+	private host!: ReactiveElement;
+
+	private observer!: MutationObserver;
+
+	get selector(): string {
+		return this._selector;
+	}
+
+	set selector(selector: string) {
+		if (selector === this.selector) return;
+		this.releaseElement();
+		this._selector = selector;
+		this.resolveElement();
+	}
+
+	private _selector = "";
+
+	get selectorAsId(): string {
+		return this.selector.slice(1);
+	}
+
+	get selectorIsId(): boolean {
+		return !!this.selector && this.selector.startsWith("#");
+	}
+
+	constructor(
+		host: ReactiveElement,
+		{ selector }: { selector: string } = { selector: "" },
+	) {
+		this.host = host;
+		this.selector = selector;
+		this.observer = new MutationObserver(this.mutationCallback);
+		// Add the controller after the MutationObserver has been created in preparation
+		// for the `hostConnected`/`hostDisconnected` callbacks to be run.
+		this.host.addController(this);
+	}
+
+	protected mutationCallback: MutationCallback = (mutationList) => {
+		let needsResolution = false;
+		mutationList.forEach((mutation) => {
+			if (needsResolution) return;
+			if (mutation.type === "childList") {
+				const currentElementRemoved =
+					this.element && [...mutation.removedNodes].includes(this.element);
+				const matchingElementAdded =
+					!!this.selector &&
+					([...mutation.addedNodes] as HTMLElement[]).some(
+						this.elementIsSelected,
+					);
+				needsResolution =
+					needsResolution || currentElementRemoved || matchingElementAdded;
+			}
+			if (mutation.type === "attributes") {
+				const attributeChangedOnCurrentElement =
+					mutation.target === this.element;
+				const attributeChangedOnMatchingElement =
+					!!this.selector &&
+					this.elementIsSelected(mutation.target as HTMLElement);
+				needsResolution =
+					needsResolution ||
+					attributeChangedOnCurrentElement ||
+					attributeChangedOnMatchingElement;
+			}
+		});
+		if (needsResolution) {
+			this.resolveElement();
+		}
+	};
+
+	public hostConnected(): void {
+		this.resolveElement();
+		this.observer.observe(this.host.getRootNode(), {
+			subtree: true,
+			childList: true,
+			attributes: true,
+		});
+	}
+
+	public hostDisconnected(): void {
+		this.releaseElement();
+		this.observer.disconnect();
+	}
+
+	private resolveElement(): void {
+		if (!this.selector) {
+			this.releaseElement();
+
+			return;
+		}
+
+		const parent = this.host.getRootNode() as ShadowRoot;
+		this.element = this.selectorIsId
+			? (parent.getElementById(this.selectorAsId) as HTMLElement)
+			: (parent.querySelector(this.selector) as HTMLElement);
+	}
+
+	private releaseElement(): void {
+		this.element = null;
+	}
+
+	private elementIsSelected = (el: HTMLElement): boolean => {
+		return this.selectorIsId
+			? el?.id === this.selectorAsId
+			: el?.matches?.(this.selector);
+	};
 }
diff --git a/tools/reactive-controllers/src/FocusGroup.ts b/tools/reactive-controllers/src/FocusGroup.ts
index ec2d726cbe..0ad925e57e 100644
--- a/tools/reactive-controllers/src/FocusGroup.ts
+++ b/tools/reactive-controllers/src/FocusGroup.ts
@@ -9,393 +9,397 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import type { ReactiveController, ReactiveElement } from 'lit';
+import type { ReactiveController, ReactiveElement } from "lit";
 
-type DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';
+type DirectionTypes = "horizontal" | "vertical" | "both" | "grid";
 export type FocusGroupConfig = {
-    focusInIndex?: (_elements: T[]) => number;
-    direction?: DirectionTypes | (() => DirectionTypes);
-    elementEnterAction?: (el: T) => void;
-    elements: () => T[];
-    isFocusableElement?: (el: T) => boolean;
-    listenerScope?: HTMLElement | (() => HTMLElement);
+	focusInIndex?: (_elements: T[]) => number;
+	direction?: DirectionTypes | (() => DirectionTypes);
+	elementEnterAction?: (el: T) => void;
+	elements: () => T[];
+	isFocusableElement?: (el: T) => boolean;
+	listenerScope?: HTMLElement | (() => HTMLElement);
 };
 
 function ensureMethod(
-    value: T | RT | undefined,
-    type: string,
-    fallback: T
+	value: T | RT | undefined,
+	type: string,
+	fallback: T,
 ): T {
-    if (typeof value === type) {
-        return (() => value) as T;
-    } else if (typeof value === 'function') {
-        return value as T;
-    }
-    return fallback;
+	if (typeof value === type) {
+		return (() => value) as T;
+	} else if (typeof value === "function") {
+		return value as T;
+	}
+
+	return fallback;
 }
 
 export class FocusGroupController
-    implements ReactiveController
+	implements ReactiveController
 {
-    protected cachedElements?: T[];
-    private mutationObserver: MutationObserver;
-
-    get currentIndex(): number {
-        if (this._currentIndex === -1) {
-            this._currentIndex = this.focusInIndex;
-        }
-        return this._currentIndex - this.offset;
-    }
-
-    set currentIndex(currentIndex) {
-        this._currentIndex = currentIndex + this.offset;
-    }
-
-    private _currentIndex = -1;
-
-    private prevIndex = -1;
-
-    get direction(): DirectionTypes {
-        return this._direction();
-    }
-
-    _direction = (): DirectionTypes => 'both';
-
-    public directionLength = 5;
-
-    elementEnterAction = (_el: T): void => {
-        return;
-    };
-
-    get elements(): T[] {
-        if (!this.cachedElements) {
-            this.cachedElements = this._elements();
-        }
-        return this.cachedElements;
-    }
-
-    private _elements!: () => T[];
-
-    protected set focused(focused: boolean) {
-        /* c8 ignore next 1 */
-        if (focused === this.focused) return;
-        this._focused = focused;
-    }
-
-    protected get focused(): boolean {
-        return this._focused;
-    }
-
-    private _focused = false;
-
-    get focusInElement(): T {
-        return this.elements[this.focusInIndex];
-    }
-
-    get focusInIndex(): number {
-        return this._focusInIndex(this.elements);
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _focusInIndex = (_elements: T[]): number => 0;
-
-    host: ReactiveElement;
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isFocusableElement = (_el: T): boolean => true;
-
-    isEventWithinListenerScope(event: Event): boolean {
-        if (this._listenerScope() === this.host) return true;
-        return event.composedPath().includes(this._listenerScope());
-    }
-
-    _listenerScope = (): HTMLElement => this.host;
-
-    // When elements are virtualized, the delta between the first element
-    // and the first rendered element.
-    offset = 0;
-
-    recentlyConnected = false;
-
-    constructor(
-        host: ReactiveElement,
-        {
-            direction,
-            elementEnterAction,
-            elements,
-            focusInIndex,
-            isFocusableElement,
-            listenerScope,
-        }: FocusGroupConfig = { elements: () => [] }
-    ) {
-        this.mutationObserver = new MutationObserver(() => {
-            this.handleItemMutation();
-        });
-        this.host = host;
-        this.host.addController(this);
-        this._elements = elements;
-        this.isFocusableElement = isFocusableElement || this.isFocusableElement;
-        this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(
-            direction,
-            'string',
-            this._direction
-        );
-        this.elementEnterAction = elementEnterAction || this.elementEnterAction;
-        this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(
-            focusInIndex,
-            'number',
-            this._focusInIndex
-        );
-        this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(
-            listenerScope,
-            'object',
-            this._listenerScope
-        );
-    }
-    /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.
+	protected cachedElements?: T[];
+	private mutationObserver: MutationObserver;
+
+	get currentIndex(): number {
+		if (this._currentIndex === -1) {
+			this._currentIndex = this.focusInIndex;
+		}
+
+		return this._currentIndex - this.offset;
+	}
+
+	set currentIndex(currentIndex) {
+		this._currentIndex = currentIndex + this.offset;
+	}
+
+	private _currentIndex = -1;
+
+	private prevIndex = -1;
+
+	get direction(): DirectionTypes {
+		return this._direction();
+	}
+
+	_direction = (): DirectionTypes => "both";
+
+	public directionLength = 5;
+
+	elementEnterAction = (_el: T): void => {
+		return;
+	};
+
+	get elements(): T[] {
+		if (!this.cachedElements) {
+			this.cachedElements = this._elements();
+		}
+
+		return this.cachedElements;
+	}
+
+	private _elements!: () => T[];
+
+	protected set focused(focused: boolean) {
+		/* c8 ignore next 1 */
+		if (focused === this.focused) return;
+		this._focused = focused;
+	}
+
+	protected get focused(): boolean {
+		return this._focused;
+	}
+
+	private _focused = false;
+
+	get focusInElement(): T {
+		return this.elements[this.focusInIndex];
+	}
+
+	get focusInIndex(): number {
+		return this._focusInIndex(this.elements);
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	_focusInIndex = (_elements: T[]): number => 0;
+
+	host: ReactiveElement;
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	isFocusableElement = (_el: T): boolean => true;
+
+	isEventWithinListenerScope(event: Event): boolean {
+		if (this._listenerScope() === this.host) return true;
+
+		return event.composedPath().includes(this._listenerScope());
+	}
+
+	_listenerScope = (): HTMLElement => this.host;
+
+	// When elements are virtualized, the delta between the first element
+	// and the first rendered element.
+	offset = 0;
+
+	recentlyConnected = false;
+
+	constructor(
+		host: ReactiveElement,
+		{
+			direction,
+			elementEnterAction,
+			elements,
+			focusInIndex,
+			isFocusableElement,
+			listenerScope,
+		}: FocusGroupConfig = { elements: () => [] },
+	) {
+		this.mutationObserver = new MutationObserver(() => {
+			this.handleItemMutation();
+		});
+		this.host = host;
+		this.host.addController(this);
+		this._elements = elements;
+		this.isFocusableElement = isFocusableElement || this.isFocusableElement;
+		this._direction = ensureMethod<() => DirectionTypes, DirectionTypes>(
+			direction,
+			"string",
+			this._direction,
+		);
+		this.elementEnterAction = elementEnterAction || this.elementEnterAction;
+		this._focusInIndex = ensureMethod<(_elements: T[]) => number, number>(
+			focusInIndex,
+			"number",
+			this._focusInIndex,
+		);
+		this._listenerScope = ensureMethod<() => HTMLElement, HTMLElement>(
+			listenerScope,
+			"object",
+			this._listenerScope,
+		);
+	}
+	/*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.
         Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;
     */
-    handleItemMutation(): void {
-        if (
-            this._currentIndex == -1 ||
-            this.elements.length <= this._elements().length
-        )
-            return;
-        const focusedElement = this.elements[this.currentIndex];
-        this.clearElementCache();
-        if (this.elements.includes(focusedElement)) return;
-        const moveToNextElement = this.currentIndex !== this.elements.length;
-        const diff = moveToNextElement ? 1 : -1;
-        if (moveToNextElement) {
-            this.setCurrentIndexCircularly(-1);
-        }
-        this.setCurrentIndexCircularly(diff);
-        this.focus();
-    }
-
-    update({ elements }: FocusGroupConfig = { elements: () => [] }): void {
-        this.unmanage();
-        this._elements = elements;
-        this.clearElementCache();
-        this.manage();
-    }
-
-    focus(options?: FocusOptions): void {
-        const elements = this.elements;
-        if (!elements.length) return;
-        let focusElement = elements[this.currentIndex];
-        if (!focusElement || !this.isFocusableElement(focusElement)) {
-            this.setCurrentIndexCircularly(1);
-            focusElement = elements[this.currentIndex];
-        }
-        if (focusElement && this.isFocusableElement(focusElement)) {
-            elements[this.prevIndex]?.setAttribute('tabindex', '-1');
-            focusElement.tabIndex = 0;
-            focusElement.focus(options);
-        }
-    }
-
-    clearElementCache(offset = 0): void {
-        this.mutationObserver.disconnect();
-        delete this.cachedElements;
-        this.offset = offset;
-        requestAnimationFrame(() => {
-            this.elements.forEach((element) => {
-                this.mutationObserver.observe(element, {
-                    attributes: true,
-                });
-            });
-        });
-    }
-
-    setCurrentIndexCircularly(diff: number): void {
-        const { length } = this.elements;
-        let steps = length;
-        this.prevIndex = this.currentIndex;
-        // start at a possibly not 0 index
-        let nextIndex = (length + this.currentIndex + diff) % length;
-        while (
-            // don't cycle the elements more than once
-            steps &&
-            this.elements[nextIndex] &&
-            !this.isFocusableElement(this.elements[nextIndex])
-        ) {
-            nextIndex = (length + nextIndex + diff) % length;
-            steps -= 1;
-        }
-        this.currentIndex = nextIndex;
-    }
-
-    hostContainsFocus(): void {
-        this.host.addEventListener('focusout', this.handleFocusout);
-        this.host.addEventListener('keydown', this.handleKeydown);
-        this.focused = true;
-    }
-
-    hostNoLongerContainsFocus(): void {
-        this.host.addEventListener('focusin', this.handleFocusin);
-        this.host.removeEventListener('focusout', this.handleFocusout);
-        this.host.removeEventListener('keydown', this.handleKeydown);
-        this.focused = false;
-    }
-
-    isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {
-        const relatedTarget = event.relatedTarget as null | Element;
-
-        const isRelatedTargetAnElement = this.elements.includes(
-            relatedTarget as T
-        );
-        const isRelatedTargetContainedWithinElements = this.elements.some(
-            (el) => el.contains(relatedTarget)
-        );
-        return !(
-            isRelatedTargetAnElement || isRelatedTargetContainedWithinElements
-        );
-    }
-
-    handleFocusin = (event: FocusEvent): void => {
-        if (!this.isEventWithinListenerScope(event)) return;
-
-        const path = event.composedPath() as T[];
-        let targetIndex = -1;
-        path.find((el) => {
-            targetIndex = this.elements.indexOf(el);
-            return targetIndex !== -1;
-        });
-        this.prevIndex = this.currentIndex;
-        this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;
-
-        if (this.isRelatedTargetOrContainAnElement(event)) {
-            this.hostContainsFocus();
-        }
-    };
-
-    /**
-     * handleClick - Finds the element that was clicked and sets the tabindex to 0
-     * @returns void
-     */
-    handleClick = (): void => {
-        // Manually set the tabindex to 0 for the current element on receiving focus (from keyboard or mouse)
-        const elements = this.elements;
-        if (!elements.length) return;
-        let focusElement = elements[this.currentIndex];
-        if (this.currentIndex < 0) {
-            return;
-        }
-        if (!focusElement || !this.isFocusableElement(focusElement)) {
-            this.setCurrentIndexCircularly(1);
-            focusElement = elements[this.currentIndex];
-        }
-        if (focusElement && this.isFocusableElement(focusElement)) {
-            elements[this.prevIndex]?.setAttribute('tabindex', '-1');
-            focusElement.setAttribute('tabindex', '0');
-        }
-    };
-
-    handleFocusout = (event: FocusEvent): void => {
-        if (this.isRelatedTargetOrContainAnElement(event)) {
-            this.hostNoLongerContainsFocus();
-        }
-    };
-
-    acceptsEventCode(code: string): boolean {
-        if (code === 'End' || code === 'Home') {
-            return true;
-        }
-        switch (this.direction) {
-            case 'horizontal':
-                return code === 'ArrowLeft' || code === 'ArrowRight';
-            case 'vertical':
-                return code === 'ArrowUp' || code === 'ArrowDown';
-            case 'both':
-            case 'grid':
-                return code.startsWith('Arrow');
-        }
-    }
-
-    handleKeydown = (event: KeyboardEvent): void => {
-        if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {
-            return;
-        }
-        let diff = 0;
-        this.prevIndex = this.currentIndex;
-        switch (event.code) {
-            case 'ArrowRight':
-                diff += 1;
-                break;
-            case 'ArrowDown':
-                diff += this.direction === 'grid' ? this.directionLength : 1;
-                break;
-            case 'ArrowLeft':
-                diff -= 1;
-                break;
-            case 'ArrowUp':
-                diff -= this.direction === 'grid' ? this.directionLength : 1;
-                break;
-            case 'End':
-                this.currentIndex = 0;
-                diff -= 1;
-                break;
-            case 'Home':
-                this.currentIndex = this.elements.length - 1;
-                diff += 1;
-                break;
-        }
-        event.preventDefault();
-        if (this.direction === 'grid' && this.currentIndex + diff < 0) {
-            this.currentIndex = 0;
-        } else if (
-            this.direction === 'grid' &&
-            this.currentIndex + diff > this.elements.length - 1
-        ) {
-            this.currentIndex = this.elements.length - 1;
-        } else {
-            this.setCurrentIndexCircularly(diff);
-        }
-        // To allow the `focusInIndex` to be calculated with the "after" state of the keyboard interaction
-        // do `elementEnterAction` _before_ focusing the next element.
-        this.elementEnterAction(this.elements[this.currentIndex]);
-        this.focus();
-    };
-
-    manage(): void {
-        this.addEventListeners();
-    }
-
-    unmanage(): void {
-        this.removeEventListeners();
-    }
-
-    addEventListeners(): void {
-        this.host.addEventListener('focusin', this.handleFocusin);
-        this.host.addEventListener('click', this.handleClick);
-    }
-
-    removeEventListeners(): void {
-        this.host.removeEventListener('focusin', this.handleFocusin);
-        this.host.removeEventListener('focusout', this.handleFocusout);
-        this.host.removeEventListener('keydown', this.handleKeydown);
-        this.host.removeEventListener('click', this.handleClick);
-    }
-
-    hostConnected(): void {
-        this.recentlyConnected = true;
-        this.addEventListeners();
-    }
-
-    hostDisconnected(): void {
-        this.mutationObserver.disconnect();
-        this.removeEventListeners();
-    }
-
-    hostUpdated(): void {
-        if (this.recentlyConnected) {
-            this.recentlyConnected = false;
-            this.elements.forEach((element) => {
-                this.mutationObserver.observe(element, {
-                    attributes: true,
-                });
-            });
-        }
-    }
+	handleItemMutation(): void {
+		if (
+			this._currentIndex == -1 ||
+			this.elements.length <= this._elements().length
+		)
+			return;
+		const focusedElement = this.elements[this.currentIndex];
+		this.clearElementCache();
+		if (this.elements.includes(focusedElement)) return;
+		const moveToNextElement = this.currentIndex !== this.elements.length;
+		const diff = moveToNextElement ? 1 : -1;
+		if (moveToNextElement) {
+			this.setCurrentIndexCircularly(-1);
+		}
+		this.setCurrentIndexCircularly(diff);
+		this.focus();
+	}
+
+	update({ elements }: FocusGroupConfig = { elements: () => [] }): void {
+		this.unmanage();
+		this._elements = elements;
+		this.clearElementCache();
+		this.manage();
+	}
+
+	focus(options?: FocusOptions): void {
+		const elements = this.elements;
+		if (!elements.length) return;
+		let focusElement = elements[this.currentIndex];
+		if (!focusElement || !this.isFocusableElement(focusElement)) {
+			this.setCurrentIndexCircularly(1);
+			focusElement = elements[this.currentIndex];
+		}
+		if (focusElement && this.isFocusableElement(focusElement)) {
+			elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+			focusElement.tabIndex = 0;
+			focusElement.focus(options);
+		}
+	}
+
+	clearElementCache(offset = 0): void {
+		this.mutationObserver.disconnect();
+		delete this.cachedElements;
+		this.offset = offset;
+		requestAnimationFrame(() => {
+			this.elements.forEach((element) => {
+				this.mutationObserver.observe(element, {
+					attributes: true,
+				});
+			});
+		});
+	}
+
+	setCurrentIndexCircularly(diff: number): void {
+		const { length } = this.elements;
+		let steps = length;
+		this.prevIndex = this.currentIndex;
+		// start at a possibly not 0 index
+		let nextIndex = (length + this.currentIndex + diff) % length;
+		while (
+			// don't cycle the elements more than once
+			steps &&
+			this.elements[nextIndex] &&
+			!this.isFocusableElement(this.elements[nextIndex])
+		) {
+			nextIndex = (length + nextIndex + diff) % length;
+			steps -= 1;
+		}
+		this.currentIndex = nextIndex;
+	}
+
+	hostContainsFocus(): void {
+		this.host.addEventListener("focusout", this.handleFocusout);
+		this.host.addEventListener("keydown", this.handleKeydown);
+		this.focused = true;
+	}
+
+	hostNoLongerContainsFocus(): void {
+		this.host.addEventListener("focusin", this.handleFocusin);
+		this.host.removeEventListener("focusout", this.handleFocusout);
+		this.host.removeEventListener("keydown", this.handleKeydown);
+		this.focused = false;
+	}
+
+	isRelatedTargetOrContainAnElement(event: FocusEvent): boolean {
+		const relatedTarget = event.relatedTarget as null | Element;
+
+		const isRelatedTargetAnElement = this.elements.includes(relatedTarget as T);
+		const isRelatedTargetContainedWithinElements = this.elements.some((el) =>
+			el.contains(relatedTarget),
+		);
+
+		return !(
+			isRelatedTargetAnElement || isRelatedTargetContainedWithinElements
+		);
+	}
+
+	handleFocusin = (event: FocusEvent): void => {
+		if (!this.isEventWithinListenerScope(event)) return;
+
+		const path = event.composedPath() as T[];
+		let targetIndex = -1;
+		path.find((el) => {
+			targetIndex = this.elements.indexOf(el);
+
+			return targetIndex !== -1;
+		});
+		this.prevIndex = this.currentIndex;
+		this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;
+
+		if (this.isRelatedTargetOrContainAnElement(event)) {
+			this.hostContainsFocus();
+		}
+	};
+
+	/**
+	 * handleClick - Finds the element that was clicked and sets the tabindex to 0
+	 * @returns void
+	 */
+	handleClick = (): void => {
+		// Manually set the tabindex to 0 for the current element on receiving focus (from keyboard or mouse)
+		const elements = this.elements;
+		if (!elements.length) return;
+		let focusElement = elements[this.currentIndex];
+		if (this.currentIndex < 0) {
+			return;
+		}
+		if (!focusElement || !this.isFocusableElement(focusElement)) {
+			this.setCurrentIndexCircularly(1);
+			focusElement = elements[this.currentIndex];
+		}
+		if (focusElement && this.isFocusableElement(focusElement)) {
+			elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+			focusElement.setAttribute("tabindex", "0");
+		}
+	};
+
+	handleFocusout = (event: FocusEvent): void => {
+		if (this.isRelatedTargetOrContainAnElement(event)) {
+			this.hostNoLongerContainsFocus();
+		}
+	};
+
+	acceptsEventCode(code: string): boolean {
+		if (code === "End" || code === "Home") {
+			return true;
+		}
+		switch (this.direction) {
+			case "horizontal":
+				return code === "ArrowLeft" || code === "ArrowRight";
+			case "vertical":
+				return code === "ArrowUp" || code === "ArrowDown";
+			case "both":
+			case "grid":
+				return code.startsWith("Arrow");
+		}
+	}
+
+	handleKeydown = (event: KeyboardEvent): void => {
+		if (!this.acceptsEventCode(event.code) || event.defaultPrevented) {
+			return;
+		}
+		let diff = 0;
+		this.prevIndex = this.currentIndex;
+		switch (event.code) {
+			case "ArrowRight":
+				diff += 1;
+				break;
+			case "ArrowDown":
+				diff += this.direction === "grid" ? this.directionLength : 1;
+				break;
+			case "ArrowLeft":
+				diff -= 1;
+				break;
+			case "ArrowUp":
+				diff -= this.direction === "grid" ? this.directionLength : 1;
+				break;
+			case "End":
+				this.currentIndex = 0;
+				diff -= 1;
+				break;
+			case "Home":
+				this.currentIndex = this.elements.length - 1;
+				diff += 1;
+				break;
+		}
+		event.preventDefault();
+		if (this.direction === "grid" && this.currentIndex + diff < 0) {
+			this.currentIndex = 0;
+		} else if (
+			this.direction === "grid" &&
+			this.currentIndex + diff > this.elements.length - 1
+		) {
+			this.currentIndex = this.elements.length - 1;
+		} else {
+			this.setCurrentIndexCircularly(diff);
+		}
+		// To allow the `focusInIndex` to be calculated with the "after" state of the keyboard interaction
+		// do `elementEnterAction` _before_ focusing the next element.
+		this.elementEnterAction(this.elements[this.currentIndex]);
+		this.focus();
+	};
+
+	manage(): void {
+		this.addEventListeners();
+	}
+
+	unmanage(): void {
+		this.removeEventListeners();
+	}
+
+	addEventListeners(): void {
+		this.host.addEventListener("focusin", this.handleFocusin);
+		this.host.addEventListener("click", this.handleClick);
+	}
+
+	removeEventListeners(): void {
+		this.host.removeEventListener("focusin", this.handleFocusin);
+		this.host.removeEventListener("focusout", this.handleFocusout);
+		this.host.removeEventListener("keydown", this.handleKeydown);
+		this.host.removeEventListener("click", this.handleClick);
+	}
+
+	hostConnected(): void {
+		this.recentlyConnected = true;
+		this.addEventListeners();
+	}
+
+	hostDisconnected(): void {
+		this.mutationObserver.disconnect();
+		this.removeEventListeners();
+	}
+
+	hostUpdated(): void {
+		if (this.recentlyConnected) {
+			this.recentlyConnected = false;
+			this.elements.forEach((element) => {
+				this.mutationObserver.observe(element, {
+					attributes: true,
+				});
+			});
+		}
+	}
 }
diff --git a/tools/reactive-controllers/src/PendingState.ts b/tools/reactive-controllers/src/PendingState.ts
index e90be751ff..06958b2c50 100644
--- a/tools/reactive-controllers/src/PendingState.ts
+++ b/tools/reactive-controllers/src/PendingState.ts
@@ -10,17 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, LitElement, ReactiveController, TemplateResult } from 'lit';
-import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import { html, LitElement, ReactiveController, TemplateResult } from "lit";
 
 /**
  * Represents a host element with pending state.
  */
 export interface HostWithPendingState extends LitElement {
-    pendingLabel?: string;
-    pending: boolean;
-    disabled: boolean;
-    pendingStateController: PendingStateController;
+	pendingLabel?: string;
+	pending: boolean;
+	disabled: boolean;
+	pendingStateController: PendingStateController;
 }
 
 /**
@@ -29,73 +29,74 @@ export interface HostWithPendingState extends LitElement {
  * @template T - The type of the reactive element.
  */
 export class PendingStateController
-    implements ReactiveController
+	implements ReactiveController
 {
-    /**
-     * The host element that this controller is attached to.
-     */
-    public host: T;
+	/**
+	 * The host element that this controller is attached to.
+	 */
+	public host: T;
 
-    /**
-     * Creates an instance of PendingStateController.
-     * @param host - The host element that this controller is attached to.
-     */
-    constructor(host: T) {
-        this.host = host;
-        this.host.addController(this);
-    }
+	/**
+	 * Creates an instance of PendingStateController.
+	 * @param host - The host element that this controller is attached to.
+	 */
+	constructor(host: T) {
+		this.host = host;
+		this.host.addController(this);
+	}
 
-    public cachedAriaLabel: string | null = null;
-    /**
-     * Renders the pending state UI.
-     * @returns A TemplateResult representing the pending state UI.
-     */
-    public renderPendingState(): TemplateResult {
-        const pendingLabel = this.host.pendingLabel || 'Pending';
-        return this.host.pending
-            ? html`
-                  
-              `
-            : html``;
-    }
+	public cachedAriaLabel: string | null = null;
+	/**
+	 * Renders the pending state UI.
+	 * @returns A TemplateResult representing the pending state UI.
+	 */
+	public renderPendingState(): TemplateResult {
+		const pendingLabel = this.host.pendingLabel || "Pending";
 
-    /**
-     * Updates the ARIA label of the host element based on the pending state.
-     * Manages Cached Aria Label
-     */
-    private updateAriaLabel(): void {
-        const { pending, disabled, pendingLabel } = this.host;
-        const currentAriaLabel = this.host.getAttribute('aria-label');
+		return this.host.pending
+			? html`
+					
+				`
+			: html``;
+	}
 
-        if (pending && !disabled && currentAriaLabel !== pendingLabel) {
-            // Cache the current `aria-label` to be restored when no longer `pending`
-            this.cachedAriaLabel = currentAriaLabel;
-            // Since it is pending, we set the aria-label to `pendingLabel` or "Pending"
-            this.host.setAttribute('aria-label', pendingLabel || 'Pending');
-        } else if (!pending || disabled) {
-            // Restore the cached `aria-label` if it exists
-            if (this.cachedAriaLabel) {
-                this.host.setAttribute('aria-label', this.cachedAriaLabel);
-            } else if (!pending) {
-                // If no cached `aria-label` and not `pending`, remove the `aria-label`
-                this.host.removeAttribute('aria-label');
-            }
-        }
-    }
+	/**
+	 * Updates the ARIA label of the host element based on the pending state.
+	 * Manages Cached Aria Label
+	 */
+	private updateAriaLabel(): void {
+		const { pending, disabled, pendingLabel } = this.host;
+		const currentAriaLabel = this.host.getAttribute("aria-label");
 
-    hostConnected(): void {
-        if (!this.cachedAriaLabel)
-            this.cachedAriaLabel = this.host.getAttribute('aria-label');
-        this.updateAriaLabel();
-    }
+		if (pending && !disabled && currentAriaLabel !== pendingLabel) {
+			// Cache the current `aria-label` to be restored when no longer `pending`
+			this.cachedAriaLabel = currentAriaLabel;
+			// Since it is pending, we set the aria-label to `pendingLabel` or "Pending"
+			this.host.setAttribute("aria-label", pendingLabel || "Pending");
+		} else if (!pending || disabled) {
+			// Restore the cached `aria-label` if it exists
+			if (this.cachedAriaLabel) {
+				this.host.setAttribute("aria-label", this.cachedAriaLabel);
+			} else if (!pending) {
+				// If no cached `aria-label` and not `pending`, remove the `aria-label`
+				this.host.removeAttribute("aria-label");
+			}
+		}
+	}
 
-    hostUpdated(): void {
-        this.updateAriaLabel();
-    }
+	hostConnected(): void {
+		if (!this.cachedAriaLabel)
+			this.cachedAriaLabel = this.host.getAttribute("aria-label");
+		this.updateAriaLabel();
+	}
+
+	hostUpdated(): void {
+		this.updateAriaLabel();
+	}
 }
diff --git a/tools/reactive-controllers/src/RovingTabindex.ts b/tools/reactive-controllers/src/RovingTabindex.ts
index 30081c719b..2a677a0f0a 100644
--- a/tools/reactive-controllers/src/RovingTabindex.ts
+++ b/tools/reactive-controllers/src/RovingTabindex.ts
@@ -9,93 +9,93 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { FocusGroupConfig, FocusGroupController } from './FocusGroup.js';
+import { FocusGroupConfig, FocusGroupController } from "./FocusGroup.js";
 
 export type RovingTabindexConfig = FocusGroupConfig;
 interface UpdateTabIndexes {
-    tabIndex: number;
-    removeTabIndex?: boolean;
+	tabIndex: number;
+	removeTabIndex?: boolean;
 }
 
 export class RovingTabindexController<
-    T extends HTMLElement,
+	T extends HTMLElement,
 > extends FocusGroupController {
-    protected override set focused(focused: boolean) {
-        if (focused === this.focused) return;
-        super.focused = focused;
-        this.manageTabindexes();
-    }
+	protected override set focused(focused: boolean) {
+		if (focused === this.focused) return;
+		super.focused = focused;
+		this.manageTabindexes();
+	}
 
-    protected override get focused(): boolean {
-        return super.focused;
-    }
+	protected override get focused(): boolean {
+		return super.focused;
+	}
 
-    private managed = true;
+	private managed = true;
 
-    private manageIndexesAnimationFrame = 0;
+	private manageIndexesAnimationFrame = 0;
 
-    override clearElementCache(offset = 0): void {
-        cancelAnimationFrame(this.manageIndexesAnimationFrame);
-        super.clearElementCache(offset);
-        if (!this.managed) return;
+	override clearElementCache(offset = 0): void {
+		cancelAnimationFrame(this.manageIndexesAnimationFrame);
+		super.clearElementCache(offset);
+		if (!this.managed) return;
 
-        this.manageIndexesAnimationFrame = requestAnimationFrame(() =>
-            this.manageTabindexes()
-        );
-    }
+		this.manageIndexesAnimationFrame = requestAnimationFrame(() =>
+			this.manageTabindexes(),
+		);
+	}
 
-    manageTabindexes(): void {
-        if (this.focused) {
-            this.updateTabindexes(() => ({ tabIndex: -1 }));
-        } else {
-            this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {
-                return {
-                    removeTabIndex:
-                        el.contains(this.focusInElement) &&
-                        el !== this.focusInElement,
-                    tabIndex: el === this.focusInElement ? 0 : -1,
-                };
-            });
-        }
-    }
+	manageTabindexes(): void {
+		if (this.focused) {
+			this.updateTabindexes(() => ({ tabIndex: -1 }));
+		} else {
+			this.updateTabindexes((el: HTMLElement): UpdateTabIndexes => {
+				return {
+					removeTabIndex:
+						el.contains(this.focusInElement) && el !== this.focusInElement,
+					tabIndex: el === this.focusInElement ? 0 : -1,
+				};
+			});
+		}
+	}
 
-    updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void {
-        this.elements.forEach((el) => {
-            const { tabIndex, removeTabIndex } = getTabIndex(el);
-            if (!removeTabIndex) {
-                if (this.focused) {
-                    if (el !== this.elements[this.currentIndex]) {
-                        el.tabIndex = tabIndex;
-                    }
-                } else {
-                    el.tabIndex = tabIndex;
-                }
-                return;
-            }
-            el.removeAttribute('tabindex');
-            const updatable = el as unknown as {
-                requestUpdate?: () => void;
-            };
-            if (updatable.requestUpdate) updatable.requestUpdate();
-        });
-    }
+	updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void {
+		this.elements.forEach((el) => {
+			const { tabIndex, removeTabIndex } = getTabIndex(el);
+			if (!removeTabIndex) {
+				if (this.focused) {
+					if (el !== this.elements[this.currentIndex]) {
+						el.tabIndex = tabIndex;
+					}
+				} else {
+					el.tabIndex = tabIndex;
+				}
 
-    override manage(): void {
-        this.managed = true;
-        this.manageTabindexes();
-        super.manage();
-    }
+				return;
+			}
+			el.removeAttribute("tabindex");
+			const updatable = el as unknown as {
+				requestUpdate?: () => void;
+			};
+			if (updatable.requestUpdate) updatable.requestUpdate();
+		});
+	}
 
-    override unmanage(): void {
-        this.managed = false;
-        this.updateTabindexes(() => ({ tabIndex: 0 }));
-        super.unmanage();
-    }
+	override manage(): void {
+		this.managed = true;
+		this.manageTabindexes();
+		super.manage();
+	}
 
-    override hostUpdated(): void {
-        super.hostUpdated();
-        if (!this.host.hasUpdated) {
-            this.manageTabindexes();
-        }
-    }
+	override unmanage(): void {
+		this.managed = false;
+		this.updateTabindexes(() => ({ tabIndex: 0 }));
+		super.unmanage();
+	}
+
+	override hostUpdated(): void {
+		super.hostUpdated();
+		if (!this.host.hasUpdated) {
+			this.manageTabindexes();
+		}
+	}
 }
diff --git a/tools/reactive-controllers/test/helpers.ts b/tools/reactive-controllers/test/helpers.ts
index 395627f89a..8731dc9e19 100644
--- a/tools/reactive-controllers/test/helpers.ts
+++ b/tools/reactive-controllers/test/helpers.ts
@@ -10,28 +10,29 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ProvideLang } from '@spectrum-web-components/theme';
+import { ProvideLang } from "@spectrum-web-components/theme";
 
 export const createLanguageContext = (
-    lang: string
+	lang: string,
 ): [(event: CustomEvent) => void, (lang: string) => void] => {
-    let language = lang;
-    const updateLanguage = (lang: string): void => {
-        language = lang;
-        resolveLanguage();
-    };
-    const langResolvers: [ProvideLang['callback'], () => void][] = [];
-    const createLangResolver = (event: CustomEvent): void => {
-        langResolvers.push([
-            event.detail.callback,
-            () => langResolvers.splice(langResolvers.length, 1),
-        ]);
-        resolveLanguage();
-    };
-    const resolveLanguage = (): void => {
-        langResolvers.forEach(([resolver, unsubscribe]) =>
-            resolver(language, unsubscribe)
-        );
-    };
-    return [createLangResolver, updateLanguage];
+	let language = lang;
+	const updateLanguage = (lang: string): void => {
+		language = lang;
+		resolveLanguage();
+	};
+	const langResolvers: [ProvideLang["callback"], () => void][] = [];
+	const createLangResolver = (event: CustomEvent): void => {
+		langResolvers.push([
+			event.detail.callback,
+			() => langResolvers.splice(langResolvers.length, 1),
+		]);
+		resolveLanguage();
+	};
+	const resolveLanguage = (): void => {
+		langResolvers.forEach(([resolver, unsubscribe]) =>
+			resolver(language, unsubscribe),
+		);
+	};
+
+	return [createLangResolver, updateLanguage];
 };
diff --git a/tools/reactive-controllers/test/roving-tabindex-integration.test.ts b/tools/reactive-controllers/test/roving-tabindex-integration.test.ts
index 85a903a14a..78d7fb3f48 100644
--- a/tools/reactive-controllers/test/roving-tabindex-integration.test.ts
+++ b/tools/reactive-controllers/test/roving-tabindex-integration.test.ts
@@ -9,298 +9,290 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import { ActionButton } from '@spectrum-web-components/action-button';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import { ActionGroup } from '@spectrum-web-components/action-group';
-import { ActionMenu } from '@spectrum-web-components/action-menu';
-import '@spectrum-web-components/tabs/sp-tab-panel.js';
-import '@spectrum-web-components/tabs/sp-tab.js';
-import '@spectrum-web-components/tabs/sp-tabs.js';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { Tab, TabPanel, Tabs } from '@spectrum-web-components/tabs';
-import { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';
-import { html } from '@spectrum-web-components/base';
-import { sendKeys } from '@web/test-runner-commands';
-import { sendMouse } from '../../../test/plugins/browser.js';
+import { elementUpdated, expect, fixture, nextFrame } from "@open-wc/testing";
+import { ActionButton } from "@spectrum-web-components/action-button";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import { ActionGroup } from "@spectrum-web-components/action-group";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import { ActionMenu } from "@spectrum-web-components/action-menu";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import { Tab, TabPanel, Tabs } from "@spectrum-web-components/tabs";
+import "@spectrum-web-components/tabs/sp-tab-panel.js";
+import "@spectrum-web-components/tabs/sp-tab.js";
+import "@spectrum-web-components/tabs/sp-tabs.js";
+import { sendKeys } from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
 
 const createTabs = async (): Promise => {
-    const tabs = await fixture(html`
-        
-            
-            
-            
-            
-                
-                    
-                        Single Button 1
-                    
-                    
-                        Single Button 2
-                    
-                    
-                        Single Button 3
-                    
-                
-            
-            
-                
-                    
-                        Multiple Button 1
-                    
-                    
-                        Multiple Button 2
-                    
-                    
-                        Multiple Button 3
-                    
-                
-            
-            
-                
-                    None Button 1
-                    None Button 2
-                    
-                        None Button 3
-                    
-                
-            
-        
-    `);
-    await elementUpdated(tabs);
-    return tabs;
+	const tabs = await fixture(html`
+		
+			
+			
+			
+			
+				
+					
+						Single Button 1
+					
+					 Single Button 2 
+					 Single Button 3 
+				
+			
+			
+				
+					 Multiple Button 1 
+					
+						Multiple Button 2
+					
+					
+						Multiple Button 3
+					
+				
+			
+			
+				
+					None Button 1
+					None Button 2
+					
+						None Button 3
+					
+				
+			
+		
+	`);
+	await elementUpdated(tabs);
+
+	return tabs;
 };
 
 const createGroup = async (): Promise => {
-    const group = await fixture(html`
-        
-            Button 1
-            Longer Button 2
-            Short 3
-            
-                One
-                Two
-                Three
-                
-                    Select some items
-                    
-                        A
-                        B
-                        C
-                    
-                
-            
-        
-    `);
-    await elementUpdated(group);
-    return group;
+	const group = await fixture(html`
+		
+			Button 1
+			Longer Button 2
+			Short 3
+			
+				One
+				Two
+				Three
+				
+					Select some items
+					
+						A
+						B
+						C
+					
+				
+			
+		
+	`);
+	await elementUpdated(group);
+
+	return group;
 };
 
-describe('Action Group inside of Tabs', () => {
-    it('accurately navigates the desired element', async () => {
-        const el = await createTabs();
-        const tab1 = el.querySelector('sp-tab[value="first"]') as Tab;
-        const tab2 = el.querySelector('sp-tab[value="second"]');
-        const tab3 = el.querySelector('sp-tab[value="third"]') as Tab;
-        const tabPanel1 = el.querySelector(
-            'sp-tab-panel[value="first"]'
-        ) as TabPanel;
-        const tabPanel2 = el.querySelector(
-            'sp-tab-panel[value="second"]'
-        ) as TabPanel;
-        const tabPanel3 = el.querySelector(
-            'sp-tab-panel[value="third"]'
-        ) as TabPanel;
-        const actionGroup1 = tabPanel1.querySelector(
-            'sp-action-group'
-        ) as ActionGroup;
-        const actionGroup2 = tabPanel2.querySelector(
-            'sp-action-group'
-        ) as ActionGroup;
-        const actionGroup3 = tabPanel3.querySelector(
-            'sp-action-group'
-        ) as ActionGroup;
-        const actionButton1 = actionGroup1.querySelector(
-            '[selected]'
-        ) as ActionButton;
-        const actionButton2 = actionGroup2.querySelector(
-            '[selected]'
-        ) as ActionButton;
-        const actionButton3 = actionGroup3.querySelector(
-            '[selected]'
-        ) as ActionButton;
-
-        el.focus();
-        expect(el.contains(document.activeElement)).to.be.true;
-        expect(document.activeElement === tab2).to.be.true;
-
-        actionGroup2.focus();
-        expect(document.activeElement === actionButton2).to.be.true;
-
-        await nextFrame();
-        await sendKeys({
-            press: 'ArrowLeft',
-        });
-
-        expect(document.activeElement === tab1).to.be.false;
-        expect(actionGroup2.contains(document.activeElement)).to.be.true;
-
-        el.focus();
-        expect(document.activeElement === tab2).to.be.true;
-
-        await sendKeys({
-            press: 'ArrowRight',
-        });
-
-        expect(document.activeElement === tab3).to.be.true;
-
-        await sendKeys({
-            press: 'Enter',
-        });
-
-        expect(document.activeElement === tab3).to.be.true;
-
-        actionGroup3.focus();
-        expect(document.activeElement === actionButton3).to.be.true;
-
-        await sendKeys({
-            press: 'ArrowLeft',
-        });
-
-        expect(document.activeElement === tab2).to.be.false;
-        expect(actionGroup3.contains(document.activeElement)).to.be.true;
-
-        const boundingRect = tab1.getBoundingClientRect();
-        // tab1.click() doesn't current reach into the focus management here.
-        await sendMouse({
-            steps: [
-                {
-                    type: 'click',
-                    position: [
-                        boundingRect.left + boundingRect.width / 2,
-                        boundingRect.top + boundingRect.height / 2,
-                    ],
-                },
-            ],
-        });
-        expect(document.activeElement === tab1).to.be.true;
-
-        actionGroup1.focus();
-        expect(document.activeElement === actionButton1).to.be.true;
-
-        await sendKeys({
-            press: 'ArrowRight',
-        });
-
-        expect(document.activeElement === tab2).to.be.false;
-        expect(actionGroup1.contains(document.activeElement)).to.be.true;
-    });
+describe("Action Group inside of Tabs", () => {
+	it("accurately navigates the desired element", async () => {
+		const el = await createTabs();
+		const tab1 = el.querySelector('sp-tab[value="first"]') as Tab;
+		const tab2 = el.querySelector('sp-tab[value="second"]');
+		const tab3 = el.querySelector('sp-tab[value="third"]') as Tab;
+		const tabPanel1 = el.querySelector(
+			'sp-tab-panel[value="first"]',
+		) as TabPanel;
+		const tabPanel2 = el.querySelector(
+			'sp-tab-panel[value="second"]',
+		) as TabPanel;
+		const tabPanel3 = el.querySelector(
+			'sp-tab-panel[value="third"]',
+		) as TabPanel;
+		const actionGroup1 = tabPanel1.querySelector(
+			"sp-action-group",
+		) as ActionGroup;
+		const actionGroup2 = tabPanel2.querySelector(
+			"sp-action-group",
+		) as ActionGroup;
+		const actionGroup3 = tabPanel3.querySelector(
+			"sp-action-group",
+		) as ActionGroup;
+		const actionButton1 = actionGroup1.querySelector(
+			"[selected]",
+		) as ActionButton;
+		const actionButton2 = actionGroup2.querySelector(
+			"[selected]",
+		) as ActionButton;
+		const actionButton3 = actionGroup3.querySelector(
+			"[selected]",
+		) as ActionButton;
+
+		el.focus();
+		expect(el.contains(document.activeElement)).to.be.true;
+		expect(document.activeElement === tab2).to.be.true;
+
+		actionGroup2.focus();
+		expect(document.activeElement === actionButton2).to.be.true;
+
+		await nextFrame();
+		await sendKeys({
+			press: "ArrowLeft",
+		});
+
+		expect(document.activeElement === tab1).to.be.false;
+		expect(actionGroup2.contains(document.activeElement)).to.be.true;
+
+		el.focus();
+		expect(document.activeElement === tab2).to.be.true;
+
+		await sendKeys({
+			press: "ArrowRight",
+		});
+
+		expect(document.activeElement === tab3).to.be.true;
+
+		await sendKeys({
+			press: "Enter",
+		});
+
+		expect(document.activeElement === tab3).to.be.true;
+
+		actionGroup3.focus();
+		expect(document.activeElement === actionButton3).to.be.true;
+
+		await sendKeys({
+			press: "ArrowLeft",
+		});
+
+		expect(document.activeElement === tab2).to.be.false;
+		expect(actionGroup3.contains(document.activeElement)).to.be.true;
+
+		const boundingRect = tab1.getBoundingClientRect();
+		// tab1.click() doesn't current reach into the focus management here.
+		await sendMouse({
+			steps: [
+				{
+					type: "click",
+					position: [
+						boundingRect.left + boundingRect.width / 2,
+						boundingRect.top + boundingRect.height / 2,
+					],
+				},
+			],
+		});
+		expect(document.activeElement === tab1).to.be.true;
+
+		actionGroup1.focus();
+		expect(document.activeElement === actionButton1).to.be.true;
+
+		await sendKeys({
+			press: "ArrowRight",
+		});
+
+		expect(document.activeElement === tab2).to.be.false;
+		expect(actionGroup1.contains(document.activeElement)).to.be.true;
+	});
 });
 
-describe('Action Menu inside of Action Group', () => {
-    it('accurately manages the tabindex of all the elements', async () => {
-        const el = await createGroup();
-        const actionButton1 = el.querySelector(
-            'sp-action-button:nth-child(1)'
-        ) as ActionButton;
-        const actionButton2 = el.querySelector(
-            'sp-action-button:nth-child(2)'
-        ) as ActionButton;
-        const actionButton3 = el.querySelector(
-            'sp-action-button:nth-child(3)'
-        ) as ActionButton;
-        const actionMenu = el.querySelector('sp-action-menu') as ActionMenu;
-
-        el.focus();
-        expect(document.activeElement === actionButton1).to.be.true;
-
-        await sendKeys({
-            press: 'ArrowRight',
-        });
-
-        expect(document.activeElement === actionButton2).to.be.true;
-
-        // expect the focused element to have a tabindex of 0 and everyone else to be -1
-        expect(actionButton2.tabIndex).to.equal(0);
-        expect(actionButton1.tabIndex).to.equal(-1);
-        expect(actionButton3.tabIndex).to.equal(-1);
-        expect(actionMenu.tabIndex).to.equal(-1);
-
-        await sendKeys({
-            press: 'ArrowRight',
-        });
-
-        expect(document.activeElement === actionButton3).to.be.true;
-
-        // expect the focused element to have a tabindex of 0 and everyone else to be -1
-        expect(actionButton3.tabIndex).to.equal(0);
-        expect(actionButton2.tabIndex).to.equal(-1);
-        expect(actionButton1.tabIndex).to.equal(-1);
-        expect(actionMenu.tabIndex).to.equal(-1);
-
-        await sendKeys({
-            press: 'ArrowRight',
-        });
-
-        expect(document.activeElement === actionMenu).to.be.true;
-
-        // expect the action-button inside of the shadow root of the action-menu to have a tabindex of 0 and everyone else to be -1
-        expect(actionButton3.tabIndex).to.equal(-1);
-        expect(actionButton2.tabIndex).to.equal(-1);
-        expect(actionButton1.tabIndex).to.equal(-1);
-        expect(actionMenu.shadowRoot?.querySelector('sp-action-button')).to
-            .exist;
-        expect(
-            (
-                actionMenu.shadowRoot?.querySelector(
-                    'sp-action-button'
-                ) as ActionButton
-            ).tabIndex
-        ).to.equal(0);
-    });
+describe("Action Menu inside of Action Group", () => {
+	it("accurately manages the tabindex of all the elements", async () => {
+		const el = await createGroup();
+		const actionButton1 = el.querySelector(
+			"sp-action-button:nth-child(1)",
+		) as ActionButton;
+		const actionButton2 = el.querySelector(
+			"sp-action-button:nth-child(2)",
+		) as ActionButton;
+		const actionButton3 = el.querySelector(
+			"sp-action-button:nth-child(3)",
+		) as ActionButton;
+		const actionMenu = el.querySelector("sp-action-menu") as ActionMenu;
+
+		el.focus();
+		expect(document.activeElement === actionButton1).to.be.true;
+
+		await sendKeys({
+			press: "ArrowRight",
+		});
+
+		expect(document.activeElement === actionButton2).to.be.true;
+
+		// expect the focused element to have a tabindex of 0 and everyone else to be -1
+		expect(actionButton2.tabIndex).to.equal(0);
+		expect(actionButton1.tabIndex).to.equal(-1);
+		expect(actionButton3.tabIndex).to.equal(-1);
+		expect(actionMenu.tabIndex).to.equal(-1);
+
+		await sendKeys({
+			press: "ArrowRight",
+		});
+
+		expect(document.activeElement === actionButton3).to.be.true;
+
+		// expect the focused element to have a tabindex of 0 and everyone else to be -1
+		expect(actionButton3.tabIndex).to.equal(0);
+		expect(actionButton2.tabIndex).to.equal(-1);
+		expect(actionButton1.tabIndex).to.equal(-1);
+		expect(actionMenu.tabIndex).to.equal(-1);
+
+		await sendKeys({
+			press: "ArrowRight",
+		});
+
+		expect(document.activeElement === actionMenu).to.be.true;
+
+		// expect the action-button inside of the shadow root of the action-menu to have a tabindex of 0 and everyone else to be -1
+		expect(actionButton3.tabIndex).to.equal(-1);
+		expect(actionButton2.tabIndex).to.equal(-1);
+		expect(actionButton1.tabIndex).to.equal(-1);
+		expect(actionMenu.shadowRoot?.querySelector("sp-action-button")).to.exist;
+		expect(
+			(actionMenu.shadowRoot?.querySelector("sp-action-button") as ActionButton)
+				.tabIndex,
+		).to.equal(0);
+	});
 });
 
-describe('tabIndex is cached properly', () => {
-    it('cache is managed properly', async () => {
-        const menuEl = await fixture(html`
-            
-                One
-                Two
-                Three
-            
-        `);
+describe("tabIndex is cached properly", () => {
+	it("cache is managed properly", async () => {
+		const menuEl = await fixture(html`
+			
+				One
+				Two
+				Three
+			
+		`);
 
-        expect(menuEl.tabIndex).to.equal(0);
-        expect(menuEl.focusElement?.tabIndex).to.equal(0);
+		expect(menuEl.tabIndex).to.equal(0);
+		expect(menuEl.focusElement?.tabIndex).to.equal(0);
 
-        menuEl.tabIndex = 1;
+		menuEl.tabIndex = 1;
 
-        await elementUpdated(menuEl);
+		await elementUpdated(menuEl);
 
-        expect(menuEl.tabIndex).to.equal(1);
-        expect(menuEl.focusElement?.tabIndex).to.equal(1);
+		expect(menuEl.tabIndex).to.equal(1);
+		expect(menuEl.focusElement?.tabIndex).to.equal(1);
 
-        menuEl.disabled = true;
+		menuEl.disabled = true;
 
-        await elementUpdated(menuEl);
+		await elementUpdated(menuEl);
 
-        expect(menuEl.tabIndex).to.equal(-1);
-        expect(menuEl.focusElement?.tabIndex).to.equal(-1);
+		expect(menuEl.tabIndex).to.equal(-1);
+		expect(menuEl.focusElement?.tabIndex).to.equal(-1);
 
-        menuEl.tabIndex = 2;
+		menuEl.tabIndex = 2;
 
-        await elementUpdated(menuEl);
+		await elementUpdated(menuEl);
 
-        expect(menuEl.tabIndex).to.equal(-1);
-        expect(menuEl.focusElement?.tabIndex).to.equal(-1);
+		expect(menuEl.tabIndex).to.equal(-1);
+		expect(menuEl.focusElement?.tabIndex).to.equal(-1);
 
-        menuEl.disabled = false;
+		menuEl.disabled = false;
 
-        await elementUpdated(menuEl);
+		await elementUpdated(menuEl);
 
-        expect(menuEl.tabIndex).to.equal(2);
-        expect(menuEl.focusElement?.tabIndex).to.equal(2);
-    });
+		expect(menuEl.tabIndex).to.equal(2);
+		expect(menuEl.focusElement?.tabIndex).to.equal(2);
+	});
 });
diff --git a/tools/shared/src/first-focusable-in.ts b/tools/shared/src/first-focusable-in.ts
index 4b135d3a50..baa76242c4 100644
--- a/tools/shared/src/first-focusable-in.ts
+++ b/tools/shared/src/first-focusable-in.ts
@@ -10,25 +10,27 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import type { SpectrumElement } from '@spectrum-web-components/base';
-import { userFocusableSelector } from './focusable-selectors.js';
+import type { SpectrumElement } from "@spectrum-web-components/base";
+import { userFocusableSelector } from "./focusable-selectors.js";
 
 export const firstFocusableIn = (
-    root: HTMLElement | ShadowRoot
+	root: HTMLElement | ShadowRoot,
 ): SpectrumElement | null => {
-    const firstFocusable = root.querySelector(
-        userFocusableSelector
-    ) as SpectrumElement;
-    return firstFocusable;
+	const firstFocusable = root.querySelector(
+		userFocusableSelector,
+	) as SpectrumElement;
+
+	return firstFocusable;
 };
 
 export const firstFocusableSlottedIn = (
-    root: HTMLSlotElement
+	root: HTMLSlotElement,
 ): SpectrumElement | null => {
-    const firstFocusable = root
-        .assignedElements()
-        .find((element) =>
-            element.matches(userFocusableSelector)
-        ) as SpectrumElement;
-    return firstFocusable;
+	const firstFocusable = root
+		.assignedElements()
+		.find((element) =>
+			element.matches(userFocusableSelector),
+		) as SpectrumElement;
+
+	return firstFocusable;
 };
diff --git a/tools/shared/src/focusable.ts b/tools/shared/src/focusable.ts
index 0cf4013ab2..623551871a 100644
--- a/tools/shared/src/focusable.ts
+++ b/tools/shared/src/focusable.ts
@@ -9,15 +9,15 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { PropertyValues, SpectrumElement } from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+import { PropertyValues, SpectrumElement } from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
 
-import { FocusVisiblePolyfillMixin } from './focus-visible.js';
+import { FocusVisiblePolyfillMixin } from "./focus-visible.js";
 
 type DisableableElement = HTMLElement & { disabled?: boolean };
 
 function nextFrame(): Promise {
-    return new Promise((res) => requestAnimationFrame(() => res()));
+	return new Promise((res) => requestAnimationFrame(() => res()));
 }
 
 /**
@@ -27,300 +27,309 @@ function nextFrame(): Promise {
  * https://github.com/web-padawan/aybolit/blob/master/packages/core/src/mixins/delegate-focus-mixin.js
  */
 export class Focusable extends FocusVisiblePolyfillMixin(SpectrumElement) {
-    /**
-     * Disable this control. It will not receive focus or events
-     */
-    @property({ type: Boolean, reflect: true })
-    public disabled = false;
-
-    /**
-     * When this control is rendered, focus it automatically
-     * @private
-     */
-    @property({ type: Boolean })
-    public override autofocus = false;
-
-    /**
-     * The tab index to apply to this control. See general documentation about
-     * the tabindex HTML property
-     *
-     * @private
-     */
-    @property({ type: Number })
-    public override get tabIndex(): number {
-        if (this.focusElement === this) {
-            const tabindex = this.hasAttribute('tabindex')
-                ? Number(this.getAttribute('tabindex'))
-                : NaN;
-            return !isNaN(tabindex) ? tabindex : -1;
-        }
-        const tabIndexAttribute = parseFloat(
-            this.hasAttribute('tabindex')
-                ? (this.getAttribute('tabindex') as string) || '0'
-                : '0'
-        );
-        // When `disabled` tabindex is -1.
-        // When host tabindex -1, use that as the cache.
-        if (this.disabled || tabIndexAttribute < 0) {
-            return -1;
-        }
-        // When `focusElement` isn't available yet,
-        // use host tabindex as the cache.
-        if (!this.focusElement) {
-            return tabIndexAttribute;
-        }
-        // All other times, use the tabindex of `focusElement`
-        // as the cache for this value.
-        // return this.focusElement.tabIndex;
-        return this._tabIndex;
-    }
-    public override set tabIndex(tabIndex: number) {
-        // Flipping `manipulatingTabindex` to true before a change
-        // allows for that change NOT to effect the cached value of tabindex
-        if (this.manipulatingTabindex) {
-            this.manipulatingTabindex = false;
-            return;
-        }
-
-        if (this.focusElement === this) {
-            if (this.disabled) {
-                this._tabIndex = tabIndex;
-            } else if (tabIndex !== this._tabIndex) {
-                this._tabIndex = tabIndex;
-                const tabindex = '' + tabIndex;
-                this.manipulatingTabindex = true;
-                this.setAttribute('tabindex', tabindex);
-            }
-            return;
-        }
-
-        if (tabIndex === -1) {
-            this.addEventListener(
-                'pointerdown',
-                this.onPointerdownManagementOfTabIndex
-            );
-        } else {
-            // All code paths are about to address the host tabindex without side effect.
-            this.manipulatingTabindex = true;
-            this.removeEventListener(
-                'pointerdown',
-                this.onPointerdownManagementOfTabIndex
-            );
-        }
-
-        if (tabIndex === -1 || this.disabled) {
-            this.manipulatingTabindex = true;
-            this.setAttribute('tabindex', '-1');
-            this.removeAttribute('focusable');
-
-            if (this.selfManageFocusElement) {
-                return;
-            }
-
-            if (tabIndex !== -1) {
-                this._tabIndex = tabIndex;
-                this.manageFocusElementTabindex(tabIndex);
-            } else {
-                this.focusElement?.removeAttribute('tabindex');
-            }
-            return;
-        }
-
-        this.setAttribute('focusable', '');
-        if (this.hasAttribute('tabindex')) {
-            this.removeAttribute('tabindex');
-        } else {
-            // You can't remove an attribute that isn't there,
-            // manually end the `manipulatingTabindex` guard.
-            this.manipulatingTabindex = false;
-        }
-
-        this._tabIndex = tabIndex;
-        this.manageFocusElementTabindex(tabIndex);
-    }
-    private _tabIndex = 0;
-
-    private onPointerdownManagementOfTabIndex(): void {
-        if (this.tabIndex === -1) {
-            setTimeout(() => {
-                // Ensure this happens _after_ WebKit attempts to focus the :host.
-                this.tabIndex = 0;
-                this.focus({ preventScroll: true });
-                this.tabIndex = -1;
-            });
-        }
-    }
-
-    private async manageFocusElementTabindex(tabIndex: number): Promise {
-        if (!this.focusElement) {
-            // allow setting these values to be async when needed.
-            await this.updateComplete;
-        }
-        if (tabIndex === null) {
-            this.focusElement.removeAttribute('tabindex');
-        } else {
-            if (this.focusElement !== this) {
-                this.focusElement.tabIndex = tabIndex;
-            }
-        }
-    }
-
-    private manipulatingTabindex = false;
-
-    /**
-     * @private
-     */
-    public get focusElement(): DisableableElement {
-        throw new Error('Must implement focusElement getter!');
-    }
-
-    /**
-     * @public
-     * @returns {boolean} whether the component should manage its focusElement tab-index or not
-     * Needed for action-menu to be supported in action-group in an accessible way
-     */
-    public get selfManageFocusElement(): boolean {
-        return false;
-    }
-
-    public override focus(options?: FocusOptions): void {
-        if (this.disabled || !this.focusElement) {
-            return;
-        }
-
-        if (this.focusElement !== this) {
-            this.focusElement.focus(options);
-        } else {
-            HTMLElement.prototype.focus.apply(this, [options]);
-        }
-    }
-
-    public override blur(): void {
-        const focusElement = this.focusElement || this;
-        if (focusElement !== this) {
-            focusElement.blur();
-        } else {
-            HTMLElement.prototype.blur.apply(this);
-        }
-    }
-
-    public override click(): void {
-        if (this.disabled) {
-            return;
-        }
-
-        const focusElement = this.focusElement || this;
-        if (focusElement !== this) {
-            focusElement.click();
-        } else {
-            HTMLElement.prototype.click.apply(this);
-        }
-    }
-
-    protected manageAutoFocus(): void {
-        if (this.autofocus) {
-            /**
-             * Trick :focus-visible polyfill into thinking keyboard based focus
-             *
-             * @private
-             **/
-            this.dispatchEvent(
-                new KeyboardEvent('keydown', {
-                    code: 'Tab',
-                })
-            );
-            this.focusElement.focus();
-        }
-    }
-
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        if (
-            !this.hasAttribute('tabindex') ||
-            this.getAttribute('tabindex') !== '-1'
-        ) {
-            this.setAttribute('focusable', '');
-        }
-    }
-
-    protected override update(changedProperties: PropertyValues): void {
-        if (changedProperties.has('disabled')) {
-            this.handleDisabledChanged(
-                this.disabled,
-                changedProperties.get('disabled') as boolean
-            );
-        }
-
-        super.update(changedProperties);
-    }
-
-    protected override updated(changedProperties: PropertyValues): void {
-        super.updated(changedProperties);
-
-        if (changedProperties.has('disabled') && this.disabled) {
-            this.blur();
-        }
-    }
-
-    private async handleDisabledChanged(
-        disabled: boolean,
-        oldDisabled: boolean
-    ): Promise {
-        const canSetDisabled = (): boolean =>
-            this.focusElement !== this &&
-            typeof this.focusElement.disabled !== 'undefined';
-        if (disabled) {
-            this.manipulatingTabindex = true;
-            this.setAttribute('tabindex', '-1');
-            await this.updateComplete;
-            if (canSetDisabled()) {
-                this.focusElement.disabled = true;
-            } else {
-                this.setAttribute('aria-disabled', 'true');
-            }
-        } else if (oldDisabled) {
-            this.manipulatingTabindex = true;
-            if (this.focusElement === this) {
-                this.setAttribute('tabindex', '' + this._tabIndex);
-            } else {
-                this.removeAttribute('tabindex');
-            }
-            await this.updateComplete;
-            if (canSetDisabled()) {
-                this.focusElement.disabled = false;
-            } else {
-                this.removeAttribute('aria-disabled');
-            }
-        }
-    }
-
-    protected override async getUpdateComplete(): Promise {
-        const complete = (await super.getUpdateComplete()) as boolean;
-        await this.autofocusReady;
-        return complete;
-    }
-
-    private autofocusReady = Promise.resolve();
-
-    public override connectedCallback(): void {
-        super.connectedCallback();
-        if (this.autofocus) {
-            this.autofocusReady = new Promise(async (res) => {
-                // If at connect time the [autofocus] content is placed within
-                // content that needs to be "hidden" by default, it would need to wait
-                // two rAFs for animations to be triggered on that content in
-                // order for the [autofocus] to become "visisble" and have its
-                // focus() capabilities enabled.
-                //
-                // Await this with `getUpdateComplete` so that the element cannot
-                // become "ready" until `manageFocus` has occured.
-                await nextFrame();
-                await nextFrame();
-                res();
-            });
-            this.updateComplete.then(() => {
-                this.manageAutoFocus();
-            });
-        }
-    }
+	/**
+	 * Disable this control. It will not receive focus or events
+	 */
+	@property({ type: Boolean, reflect: true })
+	public disabled = false;
+
+	/**
+	 * When this control is rendered, focus it automatically
+	 * @private
+	 */
+	@property({ type: Boolean })
+	public override autofocus = false;
+
+	/**
+	 * The tab index to apply to this control. See general documentation about
+	 * the tabindex HTML property
+	 *
+	 * @private
+	 */
+	@property({ type: Number })
+	public override get tabIndex(): number {
+		if (this.focusElement === this) {
+			const tabindex = this.hasAttribute("tabindex")
+				? Number(this.getAttribute("tabindex"))
+				: NaN;
+
+			return !isNaN(tabindex) ? tabindex : -1;
+		}
+		const tabIndexAttribute = parseFloat(
+			this.hasAttribute("tabindex")
+				? (this.getAttribute("tabindex") as string) || "0"
+				: "0",
+		);
+		// When `disabled` tabindex is -1.
+		// When host tabindex -1, use that as the cache.
+		if (this.disabled || tabIndexAttribute < 0) {
+			return -1;
+		}
+		// When `focusElement` isn't available yet,
+		// use host tabindex as the cache.
+		if (!this.focusElement) {
+			return tabIndexAttribute;
+		}
+
+		// All other times, use the tabindex of `focusElement`
+		// as the cache for this value.
+		// return this.focusElement.tabIndex;
+		return this._tabIndex;
+	}
+	public override set tabIndex(tabIndex: number) {
+		// Flipping `manipulatingTabindex` to true before a change
+		// allows for that change NOT to effect the cached value of tabindex
+		if (this.manipulatingTabindex) {
+			this.manipulatingTabindex = false;
+
+			return;
+		}
+
+		if (this.focusElement === this) {
+			if (this.disabled) {
+				this._tabIndex = tabIndex;
+			} else if (tabIndex !== this._tabIndex) {
+				this._tabIndex = tabIndex;
+				const tabindex = "" + tabIndex;
+				this.manipulatingTabindex = true;
+				this.setAttribute("tabindex", tabindex);
+			}
+
+			return;
+		}
+
+		if (tabIndex === -1) {
+			this.addEventListener(
+				"pointerdown",
+				this.onPointerdownManagementOfTabIndex,
+			);
+		} else {
+			// All code paths are about to address the host tabindex without side effect.
+			this.manipulatingTabindex = true;
+			this.removeEventListener(
+				"pointerdown",
+				this.onPointerdownManagementOfTabIndex,
+			);
+		}
+
+		if (tabIndex === -1 || this.disabled) {
+			this.manipulatingTabindex = true;
+			this.setAttribute("tabindex", "-1");
+			this.removeAttribute("focusable");
+
+			if (this.selfManageFocusElement) {
+				return;
+			}
+
+			if (tabIndex !== -1) {
+				this._tabIndex = tabIndex;
+				this.manageFocusElementTabindex(tabIndex);
+			} else {
+				this.focusElement?.removeAttribute("tabindex");
+			}
+
+			return;
+		}
+
+		this.setAttribute("focusable", "");
+		if (this.hasAttribute("tabindex")) {
+			this.removeAttribute("tabindex");
+		} else {
+			// You can't remove an attribute that isn't there,
+			// manually end the `manipulatingTabindex` guard.
+			this.manipulatingTabindex = false;
+		}
+
+		this._tabIndex = tabIndex;
+		this.manageFocusElementTabindex(tabIndex);
+	}
+	private _tabIndex = 0;
+
+	private onPointerdownManagementOfTabIndex(): void {
+		if (this.tabIndex === -1) {
+			setTimeout(() => {
+				// Ensure this happens _after_ WebKit attempts to focus the :host.
+				this.tabIndex = 0;
+				this.focus({ preventScroll: true });
+				this.tabIndex = -1;
+			});
+		}
+	}
+
+	private async manageFocusElementTabindex(tabIndex: number): Promise {
+		if (!this.focusElement) {
+			// allow setting these values to be async when needed.
+			await this.updateComplete;
+		}
+		if (tabIndex === null) {
+			this.focusElement.removeAttribute("tabindex");
+		} else {
+			if (this.focusElement !== this) {
+				this.focusElement.tabIndex = tabIndex;
+			}
+		}
+	}
+
+	private manipulatingTabindex = false;
+
+	/**
+	 * @private
+	 */
+	public get focusElement(): DisableableElement {
+		throw new Error("Must implement focusElement getter!");
+	}
+
+	/**
+	 * @public
+	 * @returns {boolean} whether the component should manage its focusElement tab-index or not
+	 * Needed for action-menu to be supported in action-group in an accessible way
+	 */
+	public get selfManageFocusElement(): boolean {
+		return false;
+	}
+
+	public override focus(options?: FocusOptions): void {
+		if (this.disabled || !this.focusElement) {
+			return;
+		}
+
+		if (this.focusElement !== this) {
+			this.focusElement.focus(options);
+		} else {
+			HTMLElement.prototype.focus.apply(this, [options]);
+		}
+	}
+
+	public override blur(): void {
+		const focusElement = this.focusElement || this;
+		if (focusElement !== this) {
+			focusElement.blur();
+		} else {
+			HTMLElement.prototype.blur.apply(this);
+		}
+	}
+
+	public override click(): void {
+		if (this.disabled) {
+			return;
+		}
+
+		const focusElement = this.focusElement || this;
+		if (focusElement !== this) {
+			focusElement.click();
+		} else {
+			HTMLElement.prototype.click.apply(this);
+		}
+	}
+
+	protected manageAutoFocus(): void {
+		if (this.autofocus) {
+			/**
+			 * Trick :focus-visible polyfill into thinking keyboard based focus
+			 *
+			 * @private
+			 **/
+			this.dispatchEvent(
+				new KeyboardEvent("keydown", {
+					code: "Tab",
+				}),
+			);
+			this.focusElement.focus();
+		}
+	}
+
+	protected override firstUpdated(changes: PropertyValues): void {
+		super.firstUpdated(changes);
+		if (
+			!this.hasAttribute("tabindex") ||
+			this.getAttribute("tabindex") !== "-1"
+		) {
+			this.setAttribute("focusable", "");
+		}
+	}
+
+	protected override update(changedProperties: PropertyValues): void {
+		if (changedProperties.has("disabled")) {
+			this.handleDisabledChanged(
+				this.disabled,
+				changedProperties.get("disabled") as boolean,
+			);
+		}
+
+		super.update(changedProperties);
+	}
+
+	protected override updated(changedProperties: PropertyValues): void {
+		super.updated(changedProperties);
+
+		if (changedProperties.has("disabled") && this.disabled) {
+			this.blur();
+		}
+	}
+
+	private async handleDisabledChanged(
+		disabled: boolean,
+		oldDisabled: boolean,
+	): Promise {
+		const canSetDisabled = (): boolean =>
+			this.focusElement !== this &&
+			typeof this.focusElement.disabled !== "undefined";
+		if (disabled) {
+			this.manipulatingTabindex = true;
+			this.setAttribute("tabindex", "-1");
+			await this.updateComplete;
+			if (canSetDisabled()) {
+				this.focusElement.disabled = true;
+			} else {
+				this.setAttribute("aria-disabled", "true");
+			}
+		} else if (oldDisabled) {
+			this.manipulatingTabindex = true;
+			if (this.focusElement === this) {
+				this.setAttribute("tabindex", "" + this._tabIndex);
+			} else {
+				this.removeAttribute("tabindex");
+			}
+			await this.updateComplete;
+			if (canSetDisabled()) {
+				this.focusElement.disabled = false;
+			} else {
+				this.removeAttribute("aria-disabled");
+			}
+		}
+	}
+
+	protected override async getUpdateComplete(): Promise {
+		const complete = (await super.getUpdateComplete()) as boolean;
+		await this.autofocusReady;
+
+		return complete;
+	}
+
+	private autofocusReady = Promise.resolve();
+
+	public override connectedCallback(): void {
+		super.connectedCallback();
+		if (this.autofocus) {
+			this.autofocusReady = new Promise((res) => {
+				const asyncFunc = async (): Promise => {
+					// If at connect time the [autofocus] content is placed within
+					// content that needs to be "hidden" by default, it would need to wait
+					// two rAFs for animations to be triggered on that content in
+					// order for the [autofocus] to become "visible" and have its
+					// focus() capabilities enabled.
+					//
+					// Await this with `getUpdateComplete` so that the element cannot
+					// become "ready" until `manageFocus` has occurred.
+					await nextFrame();
+					await nextFrame();
+					res();
+				};
+				asyncFunc();
+			});
+			this.updateComplete.then(() => {
+				this.manageAutoFocus();
+			});
+		}
+	}
 }
diff --git a/tools/shared/src/get-deep-element-from-point.ts b/tools/shared/src/get-deep-element-from-point.ts
index 791e9b8fb4..5280e1dc13 100644
--- a/tools/shared/src/get-deep-element-from-point.ts
+++ b/tools/shared/src/get-deep-element-from-point.ts
@@ -11,20 +11,21 @@ governing permissions and limitations under the License.
 */
 
 export const getDeepElementFromPoint = (
-    x: number,
-    y: number
+	x: number,
+	y: number,
 ): Element | null => {
-    let target = document.elementFromPoint(x, y);
-    while (target?.shadowRoot) {
-        const innerTarget = (
-            target.shadowRoot as unknown as {
-                elementFromPoint: (x: number, y: number) => Element | null;
-            }
-        ).elementFromPoint(x, y);
-        if (!innerTarget || innerTarget === target) {
-            break;
-        }
-        target = innerTarget;
-    }
-    return target;
+	let target = document.elementFromPoint(x, y);
+	while (target?.shadowRoot) {
+		const innerTarget = (
+			target.shadowRoot as unknown as {
+				elementFromPoint: (x: number, y: number) => Element | null;
+			}
+		).elementFromPoint(x, y);
+		if (!innerTarget || innerTarget === target) {
+			break;
+		}
+		target = innerTarget;
+	}
+
+	return target;
 };
diff --git a/tools/shared/src/like-anchor.ts b/tools/shared/src/like-anchor.ts
index 420b9a38a6..215231336d 100644
--- a/tools/shared/src/like-anchor.ts
+++ b/tools/shared/src/like-anchor.ts
@@ -10,97 +10,97 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    html,
-    ReactiveElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+	html,
+	ReactiveElement,
+	TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
 type Constructor> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    new (...args: any[]): T;
-    prototype: T;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	new (...args: any[]): T;
+	prototype: T;
 };
 
 type RenderAnchorOptions = {
-    id: string;
-    className?: string;
-    ariaHidden?: boolean;
-    anchorContent?: TemplateResult | TemplateResult[];
-    labelledby?: string;
-    tabindex?: -1 | 0;
+	id: string;
+	className?: string;
+	ariaHidden?: boolean;
+	anchorContent?: TemplateResult | TemplateResult[];
+	labelledby?: string;
+	tabindex?: -1 | 0;
 };
 
 export interface LikeAnchorInterface {
-    download?: string;
-    label?: string;
-    href?: string;
-    rel?: string;
-    target?: '_blank' | '_parent' | '_self' | '_top';
-    renderAnchor(options: RenderAnchorOptions): TemplateResult;
+	download?: string;
+	label?: string;
+	href?: string;
+	rel?: string;
+	target?: "_blank" | "_parent" | "_self" | "_top";
+	renderAnchor(options: RenderAnchorOptions): TemplateResult;
 }
 
 export function LikeAnchor>(
-    constructor: T
+	constructor: T,
 ): T & Constructor {
-    class LikeAnchorElement extends constructor {
-        /**
-         * Causes the browser to treat the linked URL as a download.
-         */
-        @property()
-        public download?: string;
+	class LikeAnchorElement extends constructor {
+		/**
+		 * Causes the browser to treat the linked URL as a download.
+		 */
+		@property()
+		public download?: string;
 
-        /**
-         * An accessible label that describes the component.
-         * It will be applied to aria-label, but not visually rendered.
-         */
-        @property()
-        public label?: string;
+		/**
+		 * An accessible label that describes the component.
+		 * It will be applied to aria-label, but not visually rendered.
+		 */
+		@property()
+		public label?: string;
 
-        /**
-         * The URL that the hyperlink points to.
-         */
-        @property()
-        public href?: string;
+		/**
+		 * The URL that the hyperlink points to.
+		 */
+		@property()
+		public href?: string;
 
-        /**
-         * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
-         */
-        @property()
-        public target?: '_blank' | '_parent' | '_self' | '_top';
+		/**
+		 * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
+		 */
+		@property()
+		public target?: "_blank" | "_parent" | "_self" | "_top";
 
-        /**
-         * How much of the referrer to send when following the link.
-         */
-        @property()
-        public referrerpolicy?:
-            | 'no-referrer'
-            | 'no-referrer-when-downgrade'
-            | 'origin'
-            | 'origin-when-cross-origin'
-            | 'same-origin'
-            | 'strict-origin'
-            | 'strict-origin-when-cross-origin'
-            | 'unsafe-url';
+		/**
+		 * How much of the referrer to send when following the link.
+		 */
+		@property()
+		public referrerpolicy?:
+			| "no-referrer"
+			| "no-referrer-when-downgrade"
+			| "origin"
+			| "origin-when-cross-origin"
+			| "same-origin"
+			| "strict-origin"
+			| "strict-origin-when-cross-origin"
+			| "unsafe-url";
 
-        /**
-         * The relationship of the linked URL as space-separated link types.
-         */
-        @property()
-        public rel?: string;
+		/**
+		 * The relationship of the linked URL as space-separated link types.
+		 */
+		@property()
+		public rel?: string;
 
-        public renderAnchor({
-            id,
-            className,
-            ariaHidden,
-            labelledby,
-            tabindex,
-            // prettier-ignore
-            anchorContent = html``,
-        }: RenderAnchorOptions): TemplateResult {
-            // prettier-ignore
-            return html
+		public renderAnchor({
+			id,
+			className,
+			ariaHidden,
+			labelledby,
+			tabindex,
+			// prettier-ignore
+			anchorContent = html``,
+		}: RenderAnchorOptions): TemplateResult {
+			// prettier-ignore
+			return html
                 `>(
                     referrerpolicy=${ifDefined(this.referrerpolicy)}
                     rel=${ifDefined(this.rel)}
                 >${anchorContent}`;
-        }
-    }
-    return LikeAnchorElement;
+		}
+	}
+
+	return LikeAnchorElement;
 }
diff --git a/tools/shared/src/observe-slot-presence.ts b/tools/shared/src/observe-slot-presence.ts
index 1068dcd824..ca0f359891 100644
--- a/tools/shared/src/observe-slot-presence.ts
+++ b/tools/shared/src/observe-slot-presence.ts
@@ -8,95 +8,92 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { ReactiveElement } from '@spectrum-web-components/base';
-import { MutationController } from '@lit-labs/observers/mutation-controller.js';
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+import { ReactiveElement } from "@spectrum-web-components/base";
 
-const slotContentIsPresent = Symbol('slotContentIsPresent');
+const slotContentIsPresent = Symbol("slotContentIsPresent");
 
 type Constructor> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    new (...args: any[]): T;
-    prototype: T;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	new (...args: any[]): T;
+	prototype: T;
 };
 
 export interface SlotPresenceObservingInterface {
-    slotContentIsPresent: boolean;
-    getSlotContentPresence(selector: string): boolean;
-    managePresenceObservedSlot(): void;
+	slotContentIsPresent: boolean;
+	getSlotContentPresence(selector: string): boolean;
+	managePresenceObservedSlot(): void;
 }
 
 export function ObserveSlotPresence>(
-    constructor: T,
-    lightDomSelector: string | string[]
+	constructor: T,
+	lightDomSelector: string | string[],
 ): T & Constructor {
-    const lightDomSelectors = Array.isArray(lightDomSelector)
-        ? lightDomSelector
-        : [lightDomSelector];
-    class SlotPresenceObservingElement
-        extends constructor
-        implements SlotPresenceObservingInterface
-    {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        constructor(...args: any[]) {
-            super(args);
+	const lightDomSelectors = Array.isArray(lightDomSelector)
+		? lightDomSelector
+		: [lightDomSelector];
+	class SlotPresenceObservingElement
+		extends constructor
+		implements SlotPresenceObservingInterface
+	{
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		constructor(...args: any[]) {
+			super(args);
 
-            new MutationController(this, {
-                config: {
-                    childList: true,
-                    subtree: true,
-                },
-                callback: () => {
-                    this.managePresenceObservedSlot();
-                },
-            });
+			new MutationController(this, {
+				config: {
+					childList: true,
+					subtree: true,
+				},
+				callback: () => {
+					this.managePresenceObservedSlot();
+				},
+			});
 
-            this.managePresenceObservedSlot();
-        }
+			this.managePresenceObservedSlot();
+		}
 
-        /**
-         *  @private
-         */
-        public get slotContentIsPresent(): boolean {
-            if (lightDomSelectors.length === 1) {
-                return (
-                    this[slotContentIsPresent].get(lightDomSelectors[0]) ||
-                    false
-                );
-            } else {
-                throw new Error(
-                    'Multiple selectors provided to `ObserveSlotPresence` use `getSlotContentPresence(selector: string)` instead.'
-                );
-            }
-        }
-        private [slotContentIsPresent]: Map = new Map();
+		/**
+		 *  @private
+		 */
+		public get slotContentIsPresent(): boolean {
+			if (lightDomSelectors.length === 1) {
+				return this[slotContentIsPresent].get(lightDomSelectors[0]) || false;
+			} else {
+				throw new Error(
+					"Multiple selectors provided to `ObserveSlotPresence` use `getSlotContentPresence(selector: string)` instead.",
+				);
+			}
+		}
+		private [slotContentIsPresent]: Map = new Map();
 
-        public getSlotContentPresence(selector: string): boolean {
-            if (this[slotContentIsPresent].has(selector)) {
-                return this[slotContentIsPresent].get(selector) || false;
-            }
-            throw new Error(
-                `The provided selector \`${selector}\` is not being observed.`
-            );
-        }
+		public getSlotContentPresence(selector: string): boolean {
+			if (this[slotContentIsPresent].has(selector)) {
+				return this[slotContentIsPresent].get(selector) || false;
+			}
+			throw new Error(
+				`The provided selector \`${selector}\` is not being observed.`,
+			);
+		}
 
-        public managePresenceObservedSlot = (): void => {
-            let changes = false;
-            lightDomSelectors.forEach((selector) => {
-                const nextValue = !!this.querySelector(`:scope > ${selector}`);
-                const previousValue =
-                    this[slotContentIsPresent].get(selector) || false;
-                changes = changes || previousValue !== nextValue;
-                this[slotContentIsPresent].set(
-                    selector,
-                    !!this.querySelector(`:scope > ${selector}`)
-                );
-            });
-            if (changes) {
-                this.updateComplete.then(() => {
-                    this.requestUpdate();
-                });
-            }
-        };
-    }
-    return SlotPresenceObservingElement;
+		public managePresenceObservedSlot = (): void => {
+			let changes = false;
+			lightDomSelectors.forEach((selector) => {
+				const nextValue = !!this.querySelector(`:scope > ${selector}`);
+				const previousValue = this[slotContentIsPresent].get(selector) || false;
+				changes = changes || previousValue !== nextValue;
+				this[slotContentIsPresent].set(
+					selector,
+					!!this.querySelector(`:scope > ${selector}`),
+				);
+			});
+			if (changes) {
+				this.updateComplete.then(() => {
+					this.requestUpdate();
+				});
+			}
+		};
+	}
+
+	return SlotPresenceObservingElement;
 }
diff --git a/tools/shared/src/observe-slot-text.ts b/tools/shared/src/observe-slot-text.ts
index e12d08c142..5862ed1e7e 100644
--- a/tools/shared/src/observe-slot-text.ts
+++ b/tools/shared/src/observe-slot-text.ts
@@ -9,114 +9,115 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { PropertyValues, ReactiveElement } from '@spectrum-web-components/base';
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+import { PropertyValues, ReactiveElement } from "@spectrum-web-components/base";
 import {
-    property,
-    queryAssignedNodes,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { MutationController } from '@lit-labs/observers/mutation-controller.js';
+	property,
+	queryAssignedNodes,
+} from "@spectrum-web-components/base/src/decorators.js";
 
-const assignedNodesList = Symbol('assignedNodes');
+const assignedNodesList = Symbol("assignedNodes");
 
 type Constructor> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    new (...args: any[]): T;
-    prototype: T;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	new (...args: any[]): T;
+	prototype: T;
 };
 
 export interface SlotTextObservingInterface {
-    slotHasContent: boolean;
-    manageTextObservedSlot(): void;
+	slotHasContent: boolean;
+	manageTextObservedSlot(): void;
 }
 
 export function ObserveSlotText>(
-    constructor: T,
-    slotName?: string,
-    excludedSelectors: string[] = []
+	constructor: T,
+	slotName?: string,
+	excludedSelectors: string[] = [],
 ): T & Constructor {
-    const notExcluded = (el: HTMLElement) => (selector: string) => {
-        return el.matches(selector);
-    };
-
-    class SlotTextObservingElement
-        extends constructor
-        implements SlotTextObservingInterface
-    {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        constructor(...args: any[]) {
-            super(args);
-
-            new MutationController(this, {
-                config: {
-                    characterData: true,
-                    subtree: true,
-                },
-                callback: (mutationsList: Array) => {
-                    for (const mutation of mutationsList) {
-                        if (mutation.type === 'characterData') {
-                            this.manageTextObservedSlot();
-                            return;
-                        }
-                    }
-                },
-            });
-        }
-
-        @property({ type: Boolean, attribute: false })
-        public slotHasContent = false;
-
-        @queryAssignedNodes({
-            slot: slotName,
-            flatten: true,
-        })
-        private [assignedNodesList]!: NodeListOf;
-
-        public manageTextObservedSlot(): void {
-            if (!this[assignedNodesList]) return;
-            const assignedNodes = [...this[assignedNodesList]].filter(
-                (currentNode) => {
-                    const node = currentNode as HTMLElement;
-                    if (node.tagName) {
-                        return !excludedSelectors.some(notExcluded(node));
-                    }
-                    return node.textContent ? node.textContent.trim() : false;
-                }
-            );
-            this.slotHasContent = assignedNodes.length > 0;
-        }
-
-        protected override update(changedProperties: PropertyValues): void {
-            if (!this.hasUpdated) {
-                const { childNodes } = this;
-                const textNodes = [...childNodes].filter((currentNode) => {
-                    const node = currentNode as HTMLElement;
-                    if (node.tagName) {
-                        const excluded = excludedSelectors.some(
-                            notExcluded(node)
-                        );
-                        return !excluded
-                            ? // This pass happens at element upgrade and before slot rendering.
-                              // Confirm it would exisit in a targeted slot if there was one supplied.
-                              slotName
-                                ? node.getAttribute('slot') === slotName
-                                : !node.hasAttribute('slot')
-                            : false;
-                    }
-                    return node.textContent ? node.textContent.trim() : false;
-                });
-                this.slotHasContent = textNodes.length > 0;
-            }
-            super.update(changedProperties);
-        }
-
-        protected override firstUpdated(
-            changedProperties: PropertyValues
-        ): void {
-            super.firstUpdated(changedProperties);
-            this.updateComplete.then(() => {
-                this.manageTextObservedSlot();
-            });
-        }
-    }
-    return SlotTextObservingElement;
+	const notExcluded = (el: HTMLElement) => (selector: string) => {
+		return el.matches(selector);
+	};
+
+	class SlotTextObservingElement
+		extends constructor
+		implements SlotTextObservingInterface
+	{
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		constructor(...args: any[]) {
+			super(args);
+
+			new MutationController(this, {
+				config: {
+					characterData: true,
+					subtree: true,
+				},
+				callback: (mutationsList: Array) => {
+					for (const mutation of mutationsList) {
+						if (mutation.type === "characterData") {
+							this.manageTextObservedSlot();
+
+							return;
+						}
+					}
+				},
+			});
+		}
+
+		@property({ type: Boolean, attribute: false })
+		public slotHasContent = false;
+
+		@queryAssignedNodes({
+			slot: slotName,
+			flatten: true,
+		})
+		private [assignedNodesList]!: NodeListOf;
+
+		public manageTextObservedSlot(): void {
+			if (!this[assignedNodesList]) return;
+			const assignedNodes = [...this[assignedNodesList]].filter(
+				(currentNode) => {
+					const node = currentNode as HTMLElement;
+					if (node.tagName) {
+						return !excludedSelectors.some(notExcluded(node));
+					}
+
+					return node.textContent ? node.textContent.trim() : false;
+				},
+			);
+			this.slotHasContent = assignedNodes.length > 0;
+		}
+
+		protected override update(changedProperties: PropertyValues): void {
+			if (!this.hasUpdated) {
+				const { childNodes } = this;
+				const textNodes = [...childNodes].filter((currentNode) => {
+					const node = currentNode as HTMLElement;
+					if (node.tagName) {
+						const excluded = excludedSelectors.some(notExcluded(node));
+
+						return !excluded
+							? // This pass happens at element upgrade and before slot rendering.
+								// Confirm it would exisit in a targeted slot if there was one supplied.
+								slotName
+								? node.getAttribute("slot") === slotName
+								: !node.hasAttribute("slot")
+							: false;
+					}
+
+					return node.textContent ? node.textContent.trim() : false;
+				});
+				this.slotHasContent = textNodes.length > 0;
+			}
+			super.update(changedProperties);
+		}
+
+		protected override firstUpdated(changedProperties: PropertyValues): void {
+			super.firstUpdated(changedProperties);
+			this.updateComplete.then(() => {
+				this.manageTextObservedSlot();
+			});
+		}
+	}
+
+	return SlotTextObservingElement;
 }
diff --git a/tools/shared/src/reparent-children.ts b/tools/shared/src/reparent-children.ts
index b84baa7eca..ff891ad478 100644
--- a/tools/shared/src/reparent-children.ts
+++ b/tools/shared/src/reparent-children.ts
@@ -10,80 +10,74 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 function restoreChildren(
-    placeholderItems: Comment[],
-    srcElements: T[],
-    cleanupCallbacks: ((el: T) => void)[] = []
+	placeholderItems: Comment[],
+	srcElements: T[],
+	cleanupCallbacks: ((el: T) => void)[] = [],
 ): T[] {
-    for (let index = 0; index < srcElements.length; ++index) {
-        const srcElement = srcElements[index];
-        const placeholderItem = placeholderItems[index];
-        const parentElement =
-            placeholderItem.parentElement || placeholderItem.getRootNode();
-        if (cleanupCallbacks[index]) {
-            cleanupCallbacks[index](srcElement);
-        }
-        if (parentElement && parentElement !== placeholderItem) {
-            parentElement.replaceChild(srcElement, placeholderItem);
-        }
-        delete placeholderItems[index];
-    }
-    return srcElements;
+	for (let index = 0; index < srcElements.length; ++index) {
+		const srcElement = srcElements[index];
+		const placeholderItem = placeholderItems[index];
+		const parentElement =
+			placeholderItem.parentElement || placeholderItem.getRootNode();
+		if (cleanupCallbacks[index]) {
+			cleanupCallbacks[index](srcElement);
+		}
+		if (parentElement && parentElement !== placeholderItem) {
+			parentElement.replaceChild(srcElement, placeholderItem);
+		}
+		delete placeholderItems[index];
+	}
+
+	return srcElements;
 }
 
 export const reparentChildren = (
-    srcElements: T[],
-    destination: Element,
-    {
-        position,
-        prepareCallback,
-    }: {
-        position: InsertPosition;
-        prepareCallback?: (el: T) => ((el: T) => void) | void;
-    } = { position: 'beforeend' }
+	srcElements: T[],
+	destination: Element,
+	{
+		position,
+		prepareCallback,
+	}: {
+		position: InsertPosition;
+		prepareCallback?: (el: T) => ((el: T) => void) | void;
+	} = { position: "beforeend" },
 ): (() => T[]) => {
-    let { length } = srcElements;
-    if (length === 0) {
-        return () => srcElements;
-    }
+	let { length } = srcElements;
+	if (length === 0) {
+		return () => srcElements;
+	}
 
-    let step = 1;
-    let index = 0;
+	let step = 1;
+	let index = 0;
 
-    if (position === 'afterbegin' || position === 'afterend') {
-        step = -1;
-        index = length - 1;
-    }
+	if (position === "afterbegin" || position === "afterend") {
+		step = -1;
+		index = length - 1;
+	}
 
-    const placeholderItems = new Array(length);
-    const cleanupCallbacks = new Array<(el: T) => void>(length);
-    const placeholderTemplate: Comment = document.createComment(
-        'placeholder for reparented element'
-    );
+	const placeholderItems = new Array(length);
+	const cleanupCallbacks = new Array<(el: T) => void>(length);
+	const placeholderTemplate: Comment = document.createComment(
+		"placeholder for reparented element",
+	);
 
-    do {
-        const srcElement = srcElements[index];
-        if (prepareCallback) {
-            cleanupCallbacks[index] = prepareCallback(srcElement) as (
-                el: T
-            ) => void;
-        }
-        placeholderItems[index] = placeholderTemplate.cloneNode() as Comment;
+	do {
+		const srcElement = srcElements[index];
+		if (prepareCallback) {
+			cleanupCallbacks[index] = prepareCallback(srcElement) as (el: T) => void;
+		}
+		placeholderItems[index] = placeholderTemplate.cloneNode() as Comment;
 
-        const parentElement =
-            srcElement.parentElement || srcElement.getRootNode();
-        if (parentElement && parentElement !== srcElement) {
-            parentElement.replaceChild(placeholderItems[index], srcElement);
-        }
-        destination.insertAdjacentElement(position, srcElement);
+		const parentElement = srcElement.parentElement || srcElement.getRootNode();
+		if (parentElement && parentElement !== srcElement) {
+			parentElement.replaceChild(placeholderItems[index], srcElement);
+		}
+		destination.insertAdjacentElement(position, srcElement);
 
-        index += step;
-    } while (--length > 0);
+		index += step;
+	} while (--length > 0);
 
-    return function (): T[] {
-        return restoreChildren(
-            placeholderItems,
-            srcElements,
-            cleanupCallbacks
-        );
-    };
+	return function (): T[] {
+		return restoreChildren(placeholderItems, srcElements, cleanupCallbacks);
+	};
 };
diff --git a/tools/shared/test/reparent-children.test.ts b/tools/shared/test/reparent-children.test.ts
index 168afa5111..2b45d6b2fe 100644
--- a/tools/shared/test/reparent-children.test.ts
+++ b/tools/shared/test/reparent-children.test.ts
@@ -10,301 +10,286 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { expect, fixture, html } from '@open-wc/testing';
-import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';
-
-describe('Reparent Children', () => {
-    it('reparents and returns a single child', async () => {
-        const context = await fixture(html`
-            

-                

-                    

-                

-                

-            

-        `);
-
-        const source = context.querySelector('.source') as HTMLDivElement;
-        const child = context.querySelector('.child') as HTMLDivElement;
-        const destination = context.querySelector(
-            '.destination'
-        ) as HTMLDivElement;
-
-        expect(source.children.length).to.equal(1);
-        expect(destination.children.length).to.equal(0);
-        const restore = reparentChildren([child], destination);
-
-        expect(source.children.length).to.equal(0);
-        expect(destination.children.length).to.equal(1);
-
-        restore();
-        expect(source.children.length).to.equal(1);
-        expect(destination.children.length).to.equal(0);
-    });
-
-    it('early exits no children', async () => {
-        const context = await fixture(html`
-            

-                

-                

-            

-        `);
-
-        const source = context.querySelector('.source') as HTMLDivElement;
-        const children = [...source.children] as HTMLDivElement[];
-        const destination = context.querySelector(
-            '.destination'
-        ) as HTMLDivElement;
-
-        expect(source.children.length).to.equal(0);
-        expect(destination.children.length).to.equal(0);
-        const restore = reparentChildren(children, destination);
-
-        expect(source.children.length).to.equal(0);
-        expect(destination.children.length).to.equal(0);
-
-        restore();
-        expect(source.children.length).to.equal(0);
-        expect(destination.children.length).to.equal(0);
-    });
-
-    it('reparents and returns multiple child', async () => {
-        const context = await fixture(html`
-            

-                

-                    

-                    

-                    

-                    

-                    

-                

-                

-            

-        `);
-
-        const source = context.querySelector('.source') as HTMLDivElement;
-        const { children } = source;
-        const destination = context.querySelector(
-            '.destination'
-        ) as HTMLDivElement;
-
-        expect(source.children.length).to.equal(5);
-        expect(destination.children.length).to.equal(0);
-        const restore = reparentChildren([...children], destination);
-
-        expect(source.children.length).to.equal(0);
-        expect(destination.children.length).to.equal(5);
-
-        restore();
-        expect(source.children.length).to.equal(5);
-        expect(destination.children.length).to.equal(0);
-    });
-
-    it('augments the child via a callback', async () => {
-        const context = await fixture(html`
-            

-                

-                    

-                

-                

-            

-        `);
-
-        const child = context.querySelector('.child') as HTMLDivElement;
-        const destination = context.querySelector(
-            '.destination'
-        ) as HTMLDivElement;
-
-        expect(child.getAttribute('slot')).to.equal('slot');
-        const restore = reparentChildren([child], destination, {
-            position: 'beforeend',
-            prepareCallback: (el: Element) => {
-                const slotName = el.slot;
-                el.removeAttribute('slot');
-                return (el: Element) => {
-                    el.slot = slotName;
-                };
-            },
-        });
-
-        expect(child.hasAttribute('slot')).to.be.false;
-
-        restore();
-        expect(child.getAttribute('slot')).to.equal('slot');
-    });
-
-    it('beforeend - reparents and returns multiple children', async () => {
-        const context = await fixture(html`
-            

-                

-                    
1

-                    
2

-                    
3

-                    
4

-                    
5

-                

-                

-                    

-                

-            

-        `);
-
-        const source = context.querySelector('.source') as HTMLDivElement;
-        const { children } = source;
-        const destination = context.querySelector(
-            '.destination'
-        ) as HTMLDivElement;
-
-        expect(source.children.length).to.equal(5);
-        expect(destination.children.length).to.equal(1);
-        const restore = reparentChildren([...children], destination, {
-            position: 'beforeend',
-        });
-
-        expect(source.children.length).to.equal(0);
-        expect(destination.children.length).to.equal(5 + 1);
-
-        const marker = context.querySelector('.marker') as HTMLDivElement;
-        expect(marker.previousElementSibling).to.be.null;
-        expect(marker.nextElementSibling?.textContent).to.equal('1');
-        expect(destination.lastElementChild?.textContent).to.equal('5');
-
-        restore();
-        expect(source.children.length).to.equal(5);
-        expect(destination.children.length).to.equal(1);
-
-        expect(source.firstElementChild?.textContent).to.equal('1');
-        expect(source.lastElementChild?.textContent).to.equal('5');
-    });
-
-    it('afterbegin - reparents and returns multiple children', async () => {
-        const context = await fixture(html`
-            

-                

-                    
1

-                    
2

-                    
3

-                    
4

-                    
5

-                

-                

-                    

-                

-            

-        `);
-
-        const source = context.querySelector('.source') as HTMLDivElement;
-        const { children } = source;
-        const destination = context.querySelector(
-            '.destination'
-        ) as HTMLDivElement;
-
-        expect(source.children.length).to.equal(5);
-        expect(destination.children.length).to.equal(1);
-        const restore = reparentChildren([...children], destination, {
-            position: 'afterbegin',
-        });
-
-        expect(source.children.length).to.equal(0);
-        expect(destination.children.length).to.equal(5 + 1);
-
-        const marker = context.querySelector('.marker') as HTMLDivElement;
-        expect(marker.nextElementSibling).to.be.null;
-        expect(marker.previousElementSibling?.textContent).to.equal('5');
-        expect(destination.firstElementChild?.textContent).to.equal('1');
-
-        restore();
-        expect(source.children.length).to.equal(5);
-        expect(destination.children.length).to.equal(1);
-
-        expect(source.firstElementChild?.textContent).to.equal('1');
-        expect(source.lastElementChild?.textContent).to.equal('5');
-    });
-
-    it('beforebegin - reparents and returns multiple children', async () => {
-        const context = await fixture(html`
-            

-                

-                    
1

-                    
2

-                    
3

-                    
4

-                    
5

-                

-                

-                

-            

-        `);
-
-        const source = context.querySelector('.source') as HTMLDivElement;
-        const { children } = source;
-        const destination = context.querySelector(
-            '.destination'
-        ) as HTMLDivElement;
-
-        expect(source.children.length).to.equal(5);
-        const restore = reparentChildren([...children], destination, {
-            position: 'beforebegin',
-        });
-
-        expect(source.children.length).to.equal(0);
-        expect(destination.children.length).to.equal(0);
-
-        const marker = context.querySelector('.marker') as HTMLDivElement;
-        expect(marker.previousElementSibling).to.not.be.null;
-        expect(marker.nextElementSibling?.textContent).to.equal('1');
-        expect(destination.previousElementSibling?.textContent).to.equal('5');
-
-        restore();
-        expect(source.children.length).to.equal(5);
-        expect(marker.nextElementSibling).to.equal(destination);
-
-        expect(source.firstElementChild?.textContent).to.equal('1');
-        expect(source.lastElementChild?.textContent).to.equal('5');
-    });
-
-    it('afterend - reparents and returns multiple children', async () => {
-        const context = await fixture(html`
-            

-                

-                    
1

-                    
2

-                    
3

-                    
4

-                    
5

-                

-                

-                

-            

-        `);
-
-        const source = context.querySelector('.source') as HTMLDivElement;
-        const { children } = source;
-        const destination = context.querySelector(
-            '.destination'
-        ) as HTMLDivElement;
-
-        expect(source.children.length).to.equal(5);
-
-        const marker = context.querySelector('.marker') as HTMLDivElement;
-        expect(marker.previousElementSibling).to.equal(destination);
-        expect(marker.nextElementSibling).to.be.null;
-
-        const restore = reparentChildren([...children], destination, {
-            position: 'afterend',
-        });
-
-        expect(source.children.length).to.equal(0);
-        expect(destination.children.length).to.equal(0);
-
-        expect(destination.nextElementSibling?.textContent).to.equal('1');
-        expect(marker.previousElementSibling?.textContent).to.equal('5');
-
-        restore();
-        expect(source.children.length).to.equal(5);
-        expect(marker.previousElementSibling).to.equal(destination);
-
-        expect(source.firstElementChild?.textContent).to.equal('1');
-        expect(source.lastElementChild?.textContent).to.equal('5');
-    });
+import { expect, fixture, html } from "@open-wc/testing";
+import { reparentChildren } from "@spectrum-web-components/shared/src/reparent-children.js";
+
+describe("Reparent Children", () => {
+	it("reparents and returns a single child", async () => {
+		const context = await fixture(html`
+			

+				

+					

+				

+				

+			

+		`);
+
+		const source = context.querySelector(".source") as HTMLDivElement;
+		const child = context.querySelector(".child") as HTMLDivElement;
+		const destination = context.querySelector(".destination") as HTMLDivElement;
+
+		expect(source.children.length).to.equal(1);
+		expect(destination.children.length).to.equal(0);
+		const restore = reparentChildren([child], destination);
+
+		expect(source.children.length).to.equal(0);
+		expect(destination.children.length).to.equal(1);
+
+		restore();
+		expect(source.children.length).to.equal(1);
+		expect(destination.children.length).to.equal(0);
+	});
+
+	it("early exits no children", async () => {
+		const context = await fixture(html`
+			

+				

+				

+			

+		`);
+
+		const source = context.querySelector(".source") as HTMLDivElement;
+		const children = [...source.children] as HTMLDivElement[];
+		const destination = context.querySelector(".destination") as HTMLDivElement;
+
+		expect(source.children.length).to.equal(0);
+		expect(destination.children.length).to.equal(0);
+		const restore = reparentChildren(children, destination);
+
+		expect(source.children.length).to.equal(0);
+		expect(destination.children.length).to.equal(0);
+
+		restore();
+		expect(source.children.length).to.equal(0);
+		expect(destination.children.length).to.equal(0);
+	});
+
+	it("reparents and returns multiple child", async () => {
+		const context = await fixture(html`
+			

+				

+					

+					

+					

+					

+					

+				

+				

+			

+		`);
+
+		const source = context.querySelector(".source") as HTMLDivElement;
+		const { children } = source;
+		const destination = context.querySelector(".destination") as HTMLDivElement;
+
+		expect(source.children.length).to.equal(5);
+		expect(destination.children.length).to.equal(0);
+		const restore = reparentChildren([...children], destination);
+
+		expect(source.children.length).to.equal(0);
+		expect(destination.children.length).to.equal(5);
+
+		restore();
+		expect(source.children.length).to.equal(5);
+		expect(destination.children.length).to.equal(0);
+	});
+
+	it("augments the child via a callback", async () => {
+		const context = await fixture(html`
+			

+				

+					

+				

+				

+			

+		`);
+
+		const child = context.querySelector(".child") as HTMLDivElement;
+		const destination = context.querySelector(".destination") as HTMLDivElement;
+
+		expect(child.getAttribute("slot")).to.equal("slot");
+		const restore = reparentChildren([child], destination, {
+			position: "beforeend",
+			prepareCallback: (el: Element) => {
+				const slotName = el.slot;
+				el.removeAttribute("slot");
+
+				return (el: Element) => {
+					el.slot = slotName;
+				};
+			},
+		});
+
+		expect(child.hasAttribute("slot")).to.be.false;
+
+		restore();
+		expect(child.getAttribute("slot")).to.equal("slot");
+	});
+
+	it("beforeend - reparents and returns multiple children", async () => {
+		const context = await fixture(html`
+			

+				

+					
1

+					
2

+					
3

+					
4

+					
5

+				

+				

+					

+				

+			

+		`);
+
+		const source = context.querySelector(".source") as HTMLDivElement;
+		const { children } = source;
+		const destination = context.querySelector(".destination") as HTMLDivElement;
+
+		expect(source.children.length).to.equal(5);
+		expect(destination.children.length).to.equal(1);
+		const restore = reparentChildren([...children], destination, {
+			position: "beforeend",
+		});
+
+		expect(source.children.length).to.equal(0);
+		expect(destination.children.length).to.equal(5 + 1);
+
+		const marker = context.querySelector(".marker") as HTMLDivElement;
+		expect(marker.previousElementSibling).to.be.null;
+		expect(marker.nextElementSibling?.textContent).to.equal("1");
+		expect(destination.lastElementChild?.textContent).to.equal("5");
+
+		restore();
+		expect(source.children.length).to.equal(5);
+		expect(destination.children.length).to.equal(1);
+
+		expect(source.firstElementChild?.textContent).to.equal("1");
+		expect(source.lastElementChild?.textContent).to.equal("5");
+	});
+
+	it("afterbegin - reparents and returns multiple children", async () => {
+		const context = await fixture(html`
+			

+				

+					
1

+					
2

+					
3

+					
4

+					
5

+				

+				

+					

+				

+			

+		`);
+
+		const source = context.querySelector(".source") as HTMLDivElement;
+		const { children } = source;
+		const destination = context.querySelector(".destination") as HTMLDivElement;
+
+		expect(source.children.length).to.equal(5);
+		expect(destination.children.length).to.equal(1);
+		const restore = reparentChildren([...children], destination, {
+			position: "afterbegin",
+		});
+
+		expect(source.children.length).to.equal(0);
+		expect(destination.children.length).to.equal(5 + 1);
+
+		const marker = context.querySelector(".marker") as HTMLDivElement;
+		expect(marker.nextElementSibling).to.be.null;
+		expect(marker.previousElementSibling?.textContent).to.equal("5");
+		expect(destination.firstElementChild?.textContent).to.equal("1");
+
+		restore();
+		expect(source.children.length).to.equal(5);
+		expect(destination.children.length).to.equal(1);
+
+		expect(source.firstElementChild?.textContent).to.equal("1");
+		expect(source.lastElementChild?.textContent).to.equal("5");
+	});
+
+	it("beforebegin - reparents and returns multiple children", async () => {
+		const context = await fixture(html`
+			

+				

+					
1

+					
2

+					
3

+					
4

+					
5

+				

+				

+				

+			

+		`);
+
+		const source = context.querySelector(".source") as HTMLDivElement;
+		const { children } = source;
+		const destination = context.querySelector(".destination") as HTMLDivElement;
+
+		expect(source.children.length).to.equal(5);
+		const restore = reparentChildren([...children], destination, {
+			position: "beforebegin",
+		});
+
+		expect(source.children.length).to.equal(0);
+		expect(destination.children.length).to.equal(0);
+
+		const marker = context.querySelector(".marker") as HTMLDivElement;
+		expect(marker.previousElementSibling).to.not.be.null;
+		expect(marker.nextElementSibling?.textContent).to.equal("1");
+		expect(destination.previousElementSibling?.textContent).to.equal("5");
+
+		restore();
+		expect(source.children.length).to.equal(5);
+		expect(marker.nextElementSibling).to.equal(destination);
+
+		expect(source.firstElementChild?.textContent).to.equal("1");
+		expect(source.lastElementChild?.textContent).to.equal("5");
+	});
+
+	it("afterend - reparents and returns multiple children", async () => {
+		const context = await fixture(html`
+			

+				

+					
1

+					
2

+					
3

+					
4

+					
5

+				

+				

+				

+			

+		`);
+
+		const source = context.querySelector(".source") as HTMLDivElement;
+		const { children } = source;
+		const destination = context.querySelector(".destination") as HTMLDivElement;
+
+		expect(source.children.length).to.equal(5);
+
+		const marker = context.querySelector(".marker") as HTMLDivElement;
+		expect(marker.previousElementSibling).to.equal(destination);
+		expect(marker.nextElementSibling).to.be.null;
+
+		const restore = reparentChildren([...children], destination, {
+			position: "afterend",
+		});
+
+		expect(source.children.length).to.equal(0);
+		expect(destination.children.length).to.equal(0);
+
+		expect(destination.nextElementSibling?.textContent).to.equal("1");
+		expect(marker.previousElementSibling?.textContent).to.equal("5");
+
+		restore();
+		expect(source.children.length).to.equal(5);
+		expect(marker.previousElementSibling).to.equal(destination);
+
+		expect(source.firstElementChild?.textContent).to.equal("1");
+		expect(source.lastElementChild?.textContent).to.equal("5");
+	});
 });
diff --git a/tools/theme/src/Theme.ts b/tools/theme/src/Theme.ts
index 56efd2dbd0..665de80a48 100755
--- a/tools/theme/src/Theme.ts
+++ b/tools/theme/src/Theme.ts
@@ -10,26 +10,26 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { CSSResult, CSSResultGroup } from '@spectrum-web-components/base';
-import { version } from '@spectrum-web-components/base/src/version.js';
+import { CSSResult, CSSResultGroup } from "@spectrum-web-components/base";
+import { version } from "@spectrum-web-components/base/src/version.js";
 import {
-    Color,
-    COLOR_VALUES,
-    FragmentMap,
-    FragmentName,
-    FragmentType,
-    ProvideLang,
-    Scale,
-    SCALE_VALUES,
-    SettableFragmentTypes,
-    ShadowRootWithAdoptedStyleSheets,
-    SYSTEM_VARIANT_VALUES,
-    SystemContextCallback,
-    SystemVariant,
-    ThemeFragmentMap,
-    ThemeKindProvider,
-} from './theme-interfaces.js';
-export type { ProvideLang, ThemeFragmentMap, Color, Scale, SystemVariant };
+	Color,
+	COLOR_VALUES,
+	FragmentMap,
+	FragmentName,
+	FragmentType,
+	ProvideLang,
+	Scale,
+	SCALE_VALUES,
+	SettableFragmentTypes,
+	ShadowRootWithAdoptedStyleSheets,
+	SYSTEM_VARIANT_VALUES,
+	SystemContextCallback,
+	SystemVariant,
+	ThemeFragmentMap,
+	ThemeKindProvider,
+} from "./theme-interfaces.js";
+export type { Color, ProvideLang, Scale, SystemVariant, ThemeFragmentMap };
 /**
  * @element sp-theme
  * @attr {string} [lang=""] - The language of the content scoped to this `sp-theme` element, see: MDN reference.
@@ -37,470 +37,459 @@ export type { ProvideLang, ThemeFragmentMap, Color, Scale, SystemVariant };
  * @slot - Content on which to apply the CSS Custom Properties defined by the current theme configuration
  */
 export class Theme extends HTMLElement implements ThemeKindProvider {
-    private static themeFragmentsByKind: ThemeFragmentMap = new Map();
-    private static defaultFragments: Set = new Set(['spectrum']);
-    private static templateElement?: HTMLTemplateElement;
-    private static instances: Set = new Set();
-    static VERSION = version;
-
-    static get observedAttributes(): string[] {
-        return ['color', 'scale', 'lang', 'dir', 'system'];
-    }
-
-    _dir: 'ltr' | 'rtl' | '' = '';
-
-    override set dir(dir: 'ltr' | 'rtl' | '') {
-        if (dir === this.dir) return;
-        this.setAttribute('dir', dir);
-        this._dir = dir;
-        const targetDir = dir === 'rtl' ? dir : 'ltr';
-        /* c8 ignore next 3 */
-        this.trackedChildren.forEach((el) => {
-            el.setAttribute('dir', targetDir);
-        });
-    }
-
-    /**
-     * Reading direction of the content scoped to this `sp-theme` element.
-     * @type {"ltr" | "rtl" | ""}
-     * @attr
-     */
-    override get dir(): 'ltr' | 'rtl' | '' {
-        return this._dir;
-    }
-
-    protected attributeChangedCallback(
-        attrName: SettableFragmentTypes | 'lang' | 'dir',
-        old: string | null,
-        value: string | null
-    ): void {
-        if (old === value) {
-            return;
-        }
-        if (attrName === 'color') {
-            this.color = value as Color;
-        } else if (attrName === 'scale') {
-            this.scale = value as Scale;
-        } else if (attrName === 'lang' && !!value) {
-            this.lang = value;
-            this._provideContext();
-        } else if (attrName === 'system') {
-            this.system = value as SystemVariant;
-            this._provideSystemContext();
-            warnBetaSystem(this, value as SystemVariant);
-        } else if (attrName === 'dir') {
-            this.dir = value as 'ltr' | 'rtl' | '';
-        }
-    }
-    private requestUpdate(): void {
-        this.shouldAdoptStyles();
-    }
-
-    public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;
-
-    private _system: SystemVariant | '' = 'spectrum';
-    /**
-     * The Spectrum system that is applied to the content scoped to this `sp-theme` element.
-     *
-     * A value is requried.
-     * @type {"spectrum" | "express" }
-     * @attr
-     */
-    get system(): SystemVariant | '' {
-        const systemFragments = Theme.themeFragmentsByKind.get('system');
-        const { name } =
-            (systemFragments && systemFragments.get('default')) || {};
-        return this._system || (name as SystemVariant) || '';
-    }
-
-    set system(newValue: SystemVariant | '') {
-        if (newValue === this._system) return;
-        const system =
-            !!newValue && SYSTEM_VARIANT_VALUES.includes(newValue)
-                ? newValue
-                : this.system;
-        if (system !== this._system) {
-            this._system = system;
-            this.requestUpdate();
-        }
-        if (system) {
-            this.setAttribute('system', system);
-            /* c8 ignore next 3 */
-        } else {
-            this.removeAttribute('system');
-        }
-    }
-
-    private _color: Color | '' = '';
-
-    /**
-     * The Spectrum color stops to apply to content scoped by this `sp-theme` element.
-     *
-     * A value is requried.
-     * @type {"lightest" | "light" | "dark" | "darkest" | ""}
-     * @attr
-     */
-    get color(): Color | '' {
-        const themeFragments = Theme.themeFragmentsByKind.get('color');
-        const { name } =
-            (themeFragments && themeFragments.get('default')) || {};
-        return this._color || (name as Color) || '';
-    }
-
-    set color(newValue: Color | '') {
-        if (newValue === this._color) return;
-        const color =
-            !!newValue && COLOR_VALUES.includes(newValue)
-                ? newValue
-                : this.color;
-        if (color !== this._color) {
-            this._color = color;
-            this.requestUpdate();
-        }
-        if (color) {
-            this.setAttribute('color', color);
-        } else {
-            this.removeAttribute('color');
-        }
-    }
-
-    private _scale: Scale | '' = '';
-
-    /**
-     * The Spectrum platform scale to apply to content scoped by this `sp-theme` element.
-     *
-     * A value is requried.
-     * @type {"medium" | "large" | ""}
-     * @attr
-     */
-    get scale(): Scale | '' {
-        const themeFragments = Theme.themeFragmentsByKind.get('scale');
-        const { name } =
-            (themeFragments && themeFragments.get('default')) || {};
-        return this._scale || (name as Scale) || '';
-    }
-
-    set scale(newValue: Scale | '') {
-        if (newValue === this._scale) return;
-        const scale =
-            !!newValue && SCALE_VALUES.includes(newValue)
-                ? newValue
-                : this.scale;
-        if (scale !== this._scale) {
-            this._scale = scale;
-            this.requestUpdate();
-        }
-        if (scale) {
-            this.setAttribute('scale', scale);
-            /* c8 ignore next 3 */
-        } else {
-            this.removeAttribute('scale');
-        }
-    }
-
-    private get styles(): CSSResultGroup[] {
-        const themeKinds: FragmentType[] = [
-            ...Theme.themeFragmentsByKind.keys(),
-        ];
-        const getStyle = (
-            fragments: FragmentMap,
-            name: FragmentName,
-            kind?: FragmentType
-        ): CSSResultGroup | undefined => {
-            const currentStyles =
-                kind && kind !== 'system' && this.system !== 'spectrum'
-                    ? fragments.get(`${name}-${this.system}`)
-                    : fragments.get(name);
-            // system="spectrum" is available by default and doesn't need to be applied.
-            const isAppliedFragment =
-                name === 'spectrum' || !kind || this.hasAttribute(kind);
-            if (currentStyles && isAppliedFragment) {
-                return currentStyles.styles;
-            }
-            return;
-        };
-        const styles = themeKinds.reduce((acc, kind) => {
-            const kindFragments = Theme.themeFragmentsByKind.get(
-                kind
-            ) as FragmentMap;
-            let style: CSSResultGroup | undefined;
-            if (kind === 'app' || kind === 'core') {
-                style = getStyle(kindFragments, kind);
-            } else {
-                const { [kind]: name } = this;
-                style = getStyle(kindFragments, name, kind);
-            }
-            if (style) {
-                acc.push(style);
-            }
-            return acc;
-        }, [] as CSSResultGroup[]);
-        const themeFragmentsByKind = Theme.themeFragmentsByKind;
-
-        checkForIssues(
-            this,
-            this.system,
-            this.color,
-            this.scale,
-            themeFragmentsByKind
-        );
-
-        return [...styles];
-    }
-
-    private static get template(): HTMLTemplateElement {
-        if (!this.templateElement) {
-            this.templateElement = document.createElement('template');
-            this.templateElement.innerHTML = '';
-        }
-        return this.templateElement;
-    }
-
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        const node = document.importNode(Theme.template.content, true);
-        this.shadowRoot.appendChild(node);
-        this.shouldAdoptStyles();
-        this.addEventListener(
-            'sp-language-context',
-            this._handleContextPresence as EventListener
-        );
-        this.addEventListener(
-            'sp-system-context',
-            this._handleSystemContext as EventListener
-        );
-
-        this.updateComplete = this.__createDeferredPromise();
-    }
-
-    private _systemContextConsumers = new Map<
-        HTMLElement,
-        [SystemContextCallback, () => void]
-    >();
-
-    private _handleSystemContext(
-        event: CustomEvent<{ callback: SystemContextCallback }>
-    ): void {
-        event.stopPropagation();
-
-        const target = event.composedPath()[0] as HTMLElement;
-
-        // Avoid duplicate registrations
-        if (this._systemContextConsumers.has(target)) {
-            return;
-        }
-
-        // Create an unsubscribe function
-        const unsubscribe: () => void = () =>
-            this._systemContextConsumers.delete(target);
-
-        // Store the callback and unsubscribe function
-        this._systemContextConsumers.set(target, [
-            event.detail.callback,
-            unsubscribe,
-        ]);
-
-        // Provide the context data
-        const [callback] = this._systemContextConsumers.get(target) || [];
-        if (callback) {
-            callback(this.system, unsubscribe);
-        }
-    }
-
-    public updateComplete!: Promise;
-    private __resolve!: (compelted: boolean) => void;
-
-    private __createDeferredPromise(): Promise {
-        return new Promise((resolve) => {
-            this.__resolve = resolve;
-        });
-    }
-
-    protected connectedCallback(): void {
-        // Note, first update/render handles styleElement so we only call this if
-        // connected after first update.
-        this.shouldAdoptStyles();
-
-        // Add `this` to the instances array.
-        Theme.instances.add(this);
-        if (!this.hasAttribute('dir')) {
-            let dirParent = ((this as HTMLElement).assignedSlot ||
-                this.parentNode) as HTMLElement | DocumentFragment | ShadowRoot;
-            while (
-                dirParent !== document.documentElement &&
-                !(dirParent instanceof Theme)
-            ) {
-                dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node
-                    dirParent.parentNode || // DOM Element detected
-                    (dirParent as ShadowRoot).host) as
-                    | HTMLElement
-                    | DocumentFragment
-                    | ShadowRoot;
-            }
-            this.dir = dirParent.dir === 'rtl' ? dirParent.dir : 'ltr';
-        }
-    }
-
-    protected disconnectedCallback(): void {
-        // Remove `this` to the instances array.
-        Theme.instances.delete(this);
-    }
-
-    public startManagingContentDirection(el: HTMLElement): void {
-        this.trackedChildren.add(el);
-    }
-
-    public stopManagingContentDirection(el: HTMLElement): void {
-        this.trackedChildren.delete(el);
-    }
-
-    private trackedChildren: Set = new Set();
-
-    private _updateRequested = false;
-
-    private async shouldAdoptStyles(): Promise {
-        if (!this._updateRequested) {
-            this.updateComplete = this.__createDeferredPromise();
-            this._updateRequested = true;
-            this._updateRequested = await false;
-            this.adoptStyles();
-            this.__resolve(true);
-        }
-    }
-
-    protected adoptStyles(): void {
-        const styles = this.styles;
-        const styleSheets: CSSStyleSheet[] = [];
-        for (const style of styles) {
-            styleSheets.push((style as CSSResult).styleSheet!);
-        }
-        this.shadowRoot.adoptedStyleSheets = styleSheets;
-    }
-
-    static registerThemeFragment(
-        name: FragmentName,
-        kind: FragmentType,
-        styles: CSSResultGroup
-    ): void {
-        const fragmentMap = Theme.themeFragmentsByKind.get(kind) || new Map();
-        if (fragmentMap.size === 0) {
-            Theme.themeFragmentsByKind.set(kind, fragmentMap);
-            // we're adding our first fragment for this kind, set as default
-            fragmentMap.set('default', { name, styles });
-            Theme.defaultFragments.add(name);
-        }
-        fragmentMap.set(name, { name, styles });
-        Theme.instances.forEach((instance) => instance.shouldAdoptStyles());
-    }
-
-    private _contextConsumers = new Map<
-        HTMLElement,
-        [ProvideLang['callback'], () => void]
-    >();
-
-    /* c8 ignore next 5 */
-    private _provideContext(): void {
-        this._contextConsumers.forEach(([callback, unsubscribe]) =>
-            callback(this.lang, unsubscribe)
-        );
-    }
-
-    private _provideSystemContext(): void {
-        this._systemContextConsumers.forEach(([callback, unsubscribe]) =>
-            callback(this.system, unsubscribe)
-        );
-    }
-
-    private _handleContextPresence(event: CustomEvent): void {
-        event.stopPropagation();
-        const target = event.composedPath()[0] as HTMLElement;
-        /* c8 ignore next 3 */
-        if (this._contextConsumers.has(target)) {
-            return;
-        }
-        this._contextConsumers.set(target, [
-            event.detail.callback,
-            () => this._contextConsumers.delete(target),
-        ]);
-        const [callback, unsubscribe] =
-            this._contextConsumers.get(target) || [];
-        if (callback && unsubscribe) {
-            callback(
-                this.lang ||
-                    document.documentElement.lang ||
-                    navigator.language,
-                unsubscribe
-            );
-        }
-    }
+	private static themeFragmentsByKind: ThemeFragmentMap = new Map();
+	private static defaultFragments: Set = new Set(["spectrum"]);
+	private static templateElement?: HTMLTemplateElement;
+	private static instances: Set = new Set();
+	static VERSION = version;
+
+	static get observedAttributes(): string[] {
+		return ["color", "scale", "lang", "dir", "system"];
+	}
+
+	_dir: "ltr" | "rtl" | "" = "";
+
+	override set dir(dir: "ltr" | "rtl" | "") {
+		if (dir === this.dir) return;
+		this.setAttribute("dir", dir);
+		this._dir = dir;
+		const targetDir = dir === "rtl" ? dir : "ltr";
+		/* c8 ignore next 3 */
+		this.trackedChildren.forEach((el) => {
+			el.setAttribute("dir", targetDir);
+		});
+	}
+
+	/**
+	 * Reading direction of the content scoped to this `sp-theme` element.
+	 * @type {"ltr" | "rtl" | ""}
+	 * @attr
+	 */
+	override get dir(): "ltr" | "rtl" | "" {
+		return this._dir;
+	}
+
+	protected attributeChangedCallback(
+		attrName: SettableFragmentTypes | "lang" | "dir",
+		old: string | null,
+		value: string | null,
+	): void {
+		if (old === value) {
+			return;
+		}
+		if (attrName === "color") {
+			this.color = value as Color;
+		} else if (attrName === "scale") {
+			this.scale = value as Scale;
+		} else if (attrName === "lang" && !!value) {
+			this.lang = value;
+			this._provideContext();
+		} else if (attrName === "system") {
+			this.system = value as SystemVariant;
+			this._provideSystemContext();
+			warnBetaSystem(this, value as SystemVariant);
+		} else if (attrName === "dir") {
+			this.dir = value as "ltr" | "rtl" | "";
+		}
+	}
+	private requestUpdate(): void {
+		this.shouldAdoptStyles();
+	}
+
+	public override shadowRoot!: ShadowRootWithAdoptedStyleSheets;
+
+	private _system: SystemVariant | "" = "spectrum";
+	/**
+	 * The Spectrum system that is applied to the content scoped to this `sp-theme` element.
+	 *
+	 * A value is requried.
+	 * @type {"spectrum" | "express" }
+	 * @attr
+	 */
+	get system(): SystemVariant | "" {
+		const systemFragments = Theme.themeFragmentsByKind.get("system");
+		const { name } = (systemFragments && systemFragments.get("default")) || {};
+
+		return this._system || (name as SystemVariant) || "";
+	}
+
+	set system(newValue: SystemVariant | "") {
+		if (newValue === this._system) return;
+		const system =
+			!!newValue && SYSTEM_VARIANT_VALUES.includes(newValue)
+				? newValue
+				: this.system;
+		if (system !== this._system) {
+			this._system = system;
+			this.requestUpdate();
+		}
+		if (system) {
+			this.setAttribute("system", system);
+			/* c8 ignore next 3 */
+		} else {
+			this.removeAttribute("system");
+		}
+	}
+
+	private _color: Color | "" = "";
+
+	/**
+	 * The Spectrum color stops to apply to content scoped by this `sp-theme` element.
+	 *
+	 * A value is requried.
+	 * @type {"lightest" | "light" | "dark" | "darkest" | ""}
+	 * @attr
+	 */
+	get color(): Color | "" {
+		const themeFragments = Theme.themeFragmentsByKind.get("color");
+		const { name } = (themeFragments && themeFragments.get("default")) || {};
+
+		return this._color || (name as Color) || "";
+	}
+
+	set color(newValue: Color | "") {
+		if (newValue === this._color) return;
+		const color =
+			!!newValue && COLOR_VALUES.includes(newValue) ? newValue : this.color;
+		if (color !== this._color) {
+			this._color = color;
+			this.requestUpdate();
+		}
+		if (color) {
+			this.setAttribute("color", color);
+		} else {
+			this.removeAttribute("color");
+		}
+	}
+
+	private _scale: Scale | "" = "";
+
+	/**
+	 * The Spectrum platform scale to apply to content scoped by this `sp-theme` element.
+	 *
+	 * A value is requried.
+	 * @type {"medium" | "large" | ""}
+	 * @attr
+	 */
+	get scale(): Scale | "" {
+		const themeFragments = Theme.themeFragmentsByKind.get("scale");
+		const { name } = (themeFragments && themeFragments.get("default")) || {};
+
+		return this._scale || (name as Scale) || "";
+	}
+
+	set scale(newValue: Scale | "") {
+		if (newValue === this._scale) return;
+		const scale =
+			!!newValue && SCALE_VALUES.includes(newValue) ? newValue : this.scale;
+		if (scale !== this._scale) {
+			this._scale = scale;
+			this.requestUpdate();
+		}
+		if (scale) {
+			this.setAttribute("scale", scale);
+			/* c8 ignore next 3 */
+		} else {
+			this.removeAttribute("scale");
+		}
+	}
+
+	private get styles(): CSSResultGroup[] {
+		const themeKinds: FragmentType[] = [...Theme.themeFragmentsByKind.keys()];
+		const getStyle = (
+			fragments: FragmentMap,
+			name: FragmentName,
+			kind?: FragmentType,
+		): CSSResultGroup | undefined => {
+			const currentStyles =
+				kind && kind !== "system" && this.system !== "spectrum"
+					? fragments.get(`${name}-${this.system}`)
+					: fragments.get(name);
+			// system="spectrum" is available by default and doesn't need to be applied.
+			const isAppliedFragment =
+				name === "spectrum" || !kind || this.hasAttribute(kind);
+			if (currentStyles && isAppliedFragment) {
+				return currentStyles.styles;
+			}
+
+			return;
+		};
+		const styles = themeKinds.reduce((acc, kind) => {
+			const kindFragments = Theme.themeFragmentsByKind.get(kind) as FragmentMap;
+			let style: CSSResultGroup | undefined;
+			if (kind === "app" || kind === "core") {
+				style = getStyle(kindFragments, kind);
+			} else {
+				const { [kind]: name } = this;
+				style = getStyle(kindFragments, name, kind);
+			}
+			if (style) {
+				acc.push(style);
+			}
+
+			return acc;
+		}, [] as CSSResultGroup[]);
+		const themeFragmentsByKind = Theme.themeFragmentsByKind;
+
+		checkForIssues(
+			this,
+			this.system,
+			this.color,
+			this.scale,
+			themeFragmentsByKind,
+		);
+
+		return [...styles];
+	}
+
+	private static get template(): HTMLTemplateElement {
+		if (!this.templateElement) {
+			this.templateElement = document.createElement("template");
+			this.templateElement.innerHTML = "";
+		}
+
+		return this.templateElement;
+	}
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		const node = document.importNode(Theme.template.content, true);
+		this.shadowRoot.appendChild(node);
+		this.shouldAdoptStyles();
+		this.addEventListener(
+			"sp-language-context",
+			this._handleContextPresence as EventListener,
+		);
+		this.addEventListener(
+			"sp-system-context",
+			this._handleSystemContext as EventListener,
+		);
+
+		this.updateComplete = this.__createDeferredPromise();
+	}
+
+	private _systemContextConsumers = new Map<
+		HTMLElement,
+		[SystemContextCallback, () => void]
+	>();
+
+	private _handleSystemContext(
+		event: CustomEvent<{ callback: SystemContextCallback }>,
+	): void {
+		event.stopPropagation();
+
+		const target = event.composedPath()[0] as HTMLElement;
+
+		// Avoid duplicate registrations
+		if (this._systemContextConsumers.has(target)) {
+			return;
+		}
+
+		// Create an unsubscribe function
+		const unsubscribe: () => void = () =>
+			this._systemContextConsumers.delete(target);
+
+		// Store the callback and unsubscribe function
+		this._systemContextConsumers.set(target, [
+			event.detail.callback,
+			unsubscribe,
+		]);
+
+		// Provide the context data
+		const [callback] = this._systemContextConsumers.get(target) || [];
+		if (callback) {
+			callback(this.system, unsubscribe);
+		}
+	}
+
+	public updateComplete!: Promise;
+	private __resolve!: (compelted: boolean) => void;
+
+	private __createDeferredPromise(): Promise {
+		return new Promise((resolve) => {
+			this.__resolve = resolve;
+		});
+	}
+
+	protected connectedCallback(): void {
+		// Note, first update/render handles styleElement so we only call this if
+		// connected after first update.
+		this.shouldAdoptStyles();
+
+		// Add `this` to the instances array.
+		Theme.instances.add(this);
+		if (!this.hasAttribute("dir")) {
+			let dirParent = ((this as HTMLElement).assignedSlot ||
+				this.parentNode) as HTMLElement | DocumentFragment | ShadowRoot;
+			while (
+				dirParent !== document.documentElement &&
+				!(dirParent instanceof Theme)
+			) {
+				dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node
+					dirParent.parentNode || // DOM Element detected
+					(dirParent as ShadowRoot).host) as
+					| HTMLElement
+					| DocumentFragment
+					| ShadowRoot;
+			}
+			this.dir = dirParent.dir === "rtl" ? dirParent.dir : "ltr";
+		}
+	}
+
+	protected disconnectedCallback(): void {
+		// Remove `this` to the instances array.
+		Theme.instances.delete(this);
+	}
+
+	public startManagingContentDirection(el: HTMLElement): void {
+		this.trackedChildren.add(el);
+	}
+
+	public stopManagingContentDirection(el: HTMLElement): void {
+		this.trackedChildren.delete(el);
+	}
+
+	private trackedChildren: Set = new Set();
+
+	private _updateRequested = false;
+
+	private async shouldAdoptStyles(): Promise {
+		if (!this._updateRequested) {
+			this.updateComplete = this.__createDeferredPromise();
+			this._updateRequested = true;
+			this._updateRequested = await false;
+			this.adoptStyles();
+			this.__resolve(true);
+		}
+	}
+
+	protected adoptStyles(): void {
+		const styles = this.styles;
+		const styleSheets: CSSStyleSheet[] = [];
+		for (const style of styles) {
+			styleSheets.push((style as CSSResult).styleSheet!);
+		}
+		this.shadowRoot.adoptedStyleSheets = styleSheets;
+	}
+
+	static registerThemeFragment(
+		name: FragmentName,
+		kind: FragmentType,
+		styles: CSSResultGroup,
+	): void {
+		const fragmentMap = Theme.themeFragmentsByKind.get(kind) || new Map();
+		if (fragmentMap.size === 0) {
+			Theme.themeFragmentsByKind.set(kind, fragmentMap);
+			// we're adding our first fragment for this kind, set as default
+			fragmentMap.set("default", { name, styles });
+			Theme.defaultFragments.add(name);
+		}
+		fragmentMap.set(name, { name, styles });
+		Theme.instances.forEach((instance) => instance.shouldAdoptStyles());
+	}
+
+	private _contextConsumers = new Map<
+		HTMLElement,
+		[ProvideLang["callback"], () => void]
+	>();
+
+	/* c8 ignore next 5 */
+	private _provideContext(): void {
+		this._contextConsumers.forEach(([callback, unsubscribe]) =>
+			callback(this.lang, unsubscribe),
+		);
+	}
+
+	private _provideSystemContext(): void {
+		this._systemContextConsumers.forEach(([callback, unsubscribe]) =>
+			callback(this.system, unsubscribe),
+		);
+	}
+
+	private _handleContextPresence(event: CustomEvent): void {
+		event.stopPropagation();
+		const target = event.composedPath()[0] as HTMLElement;
+		/* c8 ignore next 3 */
+		if (this._contextConsumers.has(target)) {
+			return;
+		}
+		this._contextConsumers.set(target, [
+			event.detail.callback,
+			() => this._contextConsumers.delete(target),
+		]);
+		const [callback, unsubscribe] = this._contextConsumers.get(target) || [];
+		if (callback && unsubscribe) {
+			callback(
+				this.lang || document.documentElement.lang || navigator.language,
+				unsubscribe,
+			);
+		}
+	}
 }
 
 function warnBetaSystem(instance: Theme, value: SystemVariant): void {
-    if (window.__swc.DEBUG && value === 'spectrum-two') {
-        window.__swc.warn(
-            instance,
-            'You are currently using the beta version of the Spectrum Two system. Consumption of this system may be subject to unexpected changes before the 1.0 release of SWC.',
-            'https://s2.spectrum.adobe.com/',
-            { level: 'high' }
-        );
-    }
+	if (window.__swc.DEBUG && value === "spectrum-two") {
+		window.__swc.warn(
+			instance,
+			"You are currently using the beta version of the Spectrum Two system. Consumption of this system may be subject to unexpected changes before the 1.0 release of SWC.",
+			"https://s2.spectrum.adobe.com/",
+			{ level: "high" },
+		);
+	}
 }
 
 function checkForIssues(
-    instance: Theme,
-    system: SystemVariant | '',
-    color: Color | '',
-    scale: Scale | '',
-    themeFragmentsByKind: ThemeFragmentMap
+	instance: Theme,
+	system: SystemVariant | "",
+	color: Color | "",
+	scale: Scale | "",
+	themeFragmentsByKind: ThemeFragmentMap,
 ): void {
-    if (window.__swc.DEBUG) {
-        const issues: string[] = [];
-        const checkForAttribute = (
-            name: 'system' | 'color' | 'scale',
-            resolvedValue: string,
-            actualValue: string | null
-        ): void => {
-            const systemModifier =
-                system && system !== 'spectrum' ? `-${system}` : '';
-            if (!resolvedValue) {
-                issues.push(
-                    `You have not explicitly set the "${name}" attribute and there is no default value on which to fallback.`
-                );
-            } else if (!actualValue) {
-                issues.push(
-                    `You have not explicitly set the "${name}" attribute, the default value ("${resolvedValue}") is being used as a fallback.`
-                );
-            } else if (
-                !themeFragmentsByKind
-                    .get(name)
-                    ?.get(
-                        resolvedValue +
-                            (name === 'system' ? '' : systemModifier)
-                    )
-            ) {
-                issues.push(
-                    `You have set "${name}='${resolvedValue}'" but the associated system fragment has not been loaded.`
-                );
-            }
-        };
-
-        if (['lightest', 'darkest'].includes(color || '')) {
-            issues.push(
-                `DEPRECATION NOTICE: Color "lightest" and "darkest" are deprecated. For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`
-            );
-        }
-        checkForAttribute('system', system, instance.getAttribute('system'));
-        checkForAttribute('color', color, instance.getAttribute('color'));
-        checkForAttribute('scale', scale, instance.getAttribute('scale'));
-
-        if (issues.length) {
-            window.__swc.warn(
-                instance,
-                'You are leveraging an  element and the following issues may disrupt your theme delivery:',
-                'https://opensource.adobe.com/spectrum-web-components/components/theme/#example',
-                { issues }
-            );
-        }
-    }
+	if (window.__swc.DEBUG) {
+		const issues: string[] = [];
+		const checkForAttribute = (
+			name: "system" | "color" | "scale",
+			resolvedValue: string,
+			actualValue: string | null,
+		): void => {
+			const systemModifier =
+				system && system !== "spectrum" ? `-${system}` : "";
+			if (!resolvedValue) {
+				issues.push(
+					`You have not explicitly set the "${name}" attribute and there is no default value on which to fallback.`,
+				);
+			} else if (!actualValue) {
+				issues.push(
+					`You have not explicitly set the "${name}" attribute, the default value ("${resolvedValue}") is being used as a fallback.`,
+				);
+			} else if (
+				!themeFragmentsByKind
+					.get(name)
+					?.get(resolvedValue + (name === "system" ? "" : systemModifier))
+			) {
+				issues.push(
+					`You have set "${name}='${resolvedValue}'" but the associated system fragment has not been loaded.`,
+				);
+			}
+		};
+
+		if (["lightest", "darkest"].includes(color || "")) {
+			issues.push(
+				`DEPRECATION NOTICE: Color "lightest" and "darkest" are deprecated. For more information, see: https://opensource.adobe.com/spectrum-web-components/tools/theme/`,
+			);
+		}
+		checkForAttribute("system", system, instance.getAttribute("system"));
+		checkForAttribute("color", color, instance.getAttribute("color"));
+		checkForAttribute("scale", scale, instance.getAttribute("scale"));
+
+		if (issues.length) {
+			window.__swc.warn(
+				instance,
+				"You are leveraging an  element and the following issues may disrupt your theme delivery:",
+				"https://opensource.adobe.com/spectrum-web-components/components/theme/#example",
+				{ issues },
+			);
+		}
+	}
 }
diff --git a/tools/theme/stories/theme.stories.ts b/tools/theme/stories/theme.stories.ts
index b952f4f9b4..9be0a065d0 100644
--- a/tools/theme/stories/theme.stories.ts
+++ b/tools/theme/stories/theme.stories.ts
@@ -9,273 +9,269 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/button-group/sp-button-group.js';
-import '@spectrum-web-components/switch/sp-switch.js';
-import '@spectrum-web-components/slider/sp-slider.js';
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { Color } from '../src/index.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import "@spectrum-web-components/button-group/sp-button-group.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/switch/sp-switch.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import { Color } from "../src/index.js";
 
 export default {
-    component: 'sp-theme',
-    title: 'Theme',
-    argTypes: {
-        colorStop: {
-            control: {
-                type: 'inline-radio',
-                options: ['light', 'dark'],
-            },
-        },
-    },
-    args: {
-        colorStop: 'light',
-    },
+	component: "sp-theme",
+	title: "Theme",
+	argTypes: {
+		colorStop: {
+			control: {
+				type: "inline-radio",
+				options: ["light", "dark"],
+			},
+		},
+	},
+	args: {
+		colorStop: "light",
+	},
 };
 
 const storyStyles = html`
-    
+		#buttons {
+			margin-top: 2em;
+		}
+	
 `;
 
 export const Default = ({
-    colorStop: color,
+	colorStop: color,
 }: {
-    colorStop: Color;
+	colorStop: Color;
 }): TemplateResult => {
-    return html`
-        ${storyStyles}
-        
-            

-                

-                    
-                

-                
Overdrive

-                
-                    
-                        Cancel
-                    
-                    Continue
-                
-            

-        
-    `;
+	return html`
+		${storyStyles}
+		
+			

+				

+					
+				

+				
Overdrive

+				
+					 Cancel 
+					Continue
+				
+			

+		
+	`;
 };
 
 export const displayFlex = (): TemplateResult => html`
-    
-    
-        Start
-        Middle
-        End
-    
+	
+	
+		Start
+		Middle
+		End
+	
 `;
 
 export const none = (): TemplateResult => html`
-    ${storyStyles}
-    

-        

-            
-        

-        
Overdrive

-        
-            Cancel
-            Continue
-        
-    

-    
+	${storyStyles}
+	

+		

+			
+		

+		
Overdrive

+		
+			Cancel
+			Continue
+		
+	

+	
 `;
 
 export const nestedTheme = ({
-    colorStop: outer,
+	colorStop: outer,
 }: {
-    colorStop: Color;
+	colorStop: Color;
 }): TemplateResult => {
-    const inner = outer === 'light' ? 'dark' : 'light';
-    return html`
-        ${storyStyles}
-        
-            

-                

-                    
-                

-                
Overdrive

-                
-                    
-                        Cancel
-                    
-                    Continue
-                
-                
-                    

-                        

-                            
-                        

-                        
Overdrive

-                        
-                            
-                                Cancel
-                            
-                            Continue
-                        
-                    

-                
-            

-        
-    `;
+	const inner = outer === "light" ? "dark" : "light";
+
+	return html`
+		${storyStyles}
+		
+			

+				

+					
+				

+				
Overdrive

+				
+					 Cancel 
+					Continue
+				
+				
+					

+						

+							
+						

+						
Overdrive

+						
+							
+								Cancel
+							
+							Continue
+						
+					

+				
+			

+		
+	`;
 };
 
 export const reverseColorNestedTheme = ({
-    colorStop: outer,
+	colorStop: outer,
 }: {
-    colorStop: Color;
+	colorStop: Color;
 }): TemplateResult => {
-    const inner = outer === 'light' ? 'dark' : 'light';
-    return html`
-        
-        
-            

-                

-                    
-                

-                
Overdrive

-                
-                    
-                        Cancel
-                    
-                    Continue
-                
-                
-                    

-                        

-                            
-                        

-                        
Overdrive

-                        
-                            
-                                Cancel
-                            
-                            Continue
-                        
-                    

-                
-            

-        
-    `;
+			#buttons {
+				margin-top: 2em;
+			}
+		
+		
+			

+				

+					
+				

+				
Overdrive

+				
+					 Cancel 
+					Continue
+				
+				
+					

+						

+							
+						

+						
Overdrive

+						
+							
+								Cancel
+							
+							Continue
+						
+					

+				
+			

+		
+	`;
 };
diff --git a/tools/truncated/src/Truncated.ts b/tools/truncated/src/Truncated.ts
index bc477a2d7f..dbb95aad90 100644
--- a/tools/truncated/src/Truncated.ts
+++ b/tools/truncated/src/Truncated.ts
@@ -11,186 +11,187 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import type { Overlay, Placement } from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
+	CSSResultArray,
+	html,
+	PropertyValues,
+	SpectrumElement,
+	TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-    queryAssignedElements,
-    queryAssignedNodes,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
-
-import styles from './truncated.css.js';
+	property,
+	query,
+	queryAssignedElements,
+	queryAssignedNodes,
+	state,
+} from "@spectrum-web-components/base/src/decorators.js";
+import type { Overlay, Placement } from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+
+import styles from "./truncated.css.js";
 
 /**
  * @element sp-truncated
  */
 export class Truncated extends SpectrumElement {
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    /**
-     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
-     */
-    @property()
-    placement: Placement = 'top-start';
-
-    /*
-     * @type {String}
-     * @attr success-message
-     * @description The message to display when the text is copied to the clipboard after clicking on the truncated text
-     */
-    @property({ type: String, attribute: 'success-message' })
-    successMessage = 'Copied to clipboard';
-
-    @state()
-    hasCopied = false;
-
-    @state()
-    private fullText = '';
-
-    @state()
-    private overflowing = false;
-
-    @query('#content')
-    private content!: HTMLElement;
-
-    @query('#overlay')
-    private overlayEl?: Overlay;
-
-    @queryAssignedNodes({ flatten: true })
-    private slottedContent!: Node[];
-
-    // elements instead of nodes because, according to spec,
-    // flattened assignedNodes will return a slot's *children* if there are no assigned nodes.
-    // ¯\_(ツ)_/¯
-    @queryAssignedElements({ slot: 'overflow', flatten: true })
-    private slottedOverflow!: HTMLElement[];
-
-    get hasCustomOverflow(): boolean {
-        return this.slottedOverflow.length > 0;
-    }
-
-    private resizeObserver = new ResizeObserver(() => {
-        this.measureOverflow();
-    });
-
-    private mutationObserver = new MutationObserver(() => {
-        this.copyText();
-    });
-
-    override render(): TemplateResult {
-        /* eslint-disable lit-a11y/click-events-have-key-events */
-        return html`
-            
-                
-            
-            ${this.renderTooltip()}
-        `;
-        /* eslint-enable lit-a11y/click-events-have-key-events */
-    }
-
-    private renderTooltip(): TemplateResult | undefined {
-        if (!this.overflowing) {
-            return html`
-                
-            `;
-        }
-        return html`
-            
-                
-                    ${!this.hasCopied
-                        ? html`
-                              
-                                  ${this.fullText}
-                              
-                          `
-                        : this.successMessage}
-                
-            
-        `;
-    }
-
-    protected override firstUpdated(
-        _changedProperties: PropertyValues
-    ): void {
-        this.resizeObserver.observe(this);
-        this.resizeObserver.observe(this.content);
-        this.copyText();
-        this.measureOverflow();
-    }
-
-    protected override updated(changedProperties: PropertyValues): void {
-        super.updated(changedProperties);
-        if (
-            changedProperties.has('hasCopied') &&
-            this.hasCopied &&
-            this.overlayEl
-        ) {
-            // we know overlayEl exists because it couldn't copy the text otherwise
-            this.overlayEl.open = true;
-        }
-    }
-
-    private handleOverflowSlotchange(): void {
-        this.mutationObserver.disconnect();
-        if (!this.hasCustomOverflow) {
-            /* c8 ignore next 5 */
-            this.mutationObserver.observe(this.content, {
-                subtree: true,
-                childList: true,
-                characterData: true,
-            });
-        }
-    }
-
-    private handleClick(): void {
-        if (!this.overflowing) return;
-
-        const textToCopy = this.slottedContent
-            .map((node) => node.textContent ?? '')
-            .join('')
-            .trim();
-        navigator.clipboard.writeText(textToCopy);
-        this.hasCopied = true;
-        /* c8 ignore next 3 */
-        setTimeout(() => {
-            this.hasCopied = false;
-        }, 6000);
-    }
-
-    private measureOverflow(): void {
-        // Add 1 because Safari sometimes rounds by 1px, breaking the calculation otherwise
-        this.overflowing = this.content.offsetWidth > this.clientWidth + 1;
-    }
-
-    // Copies just the textContent of slotted nodes into the tooltip to avoid duplicating the user's DOM
-    private copyText(): void {
-        if (this.hasCustomOverflow) return;
-        this.fullText = this.slottedContent
-            .map((node) => node.textContent ?? '')
-            .join('');
-    }
+	public static override get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/**
+	 * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+	 */
+	@property()
+	placement: Placement = "top-start";
+
+	/*
+	 * @type {String}
+	 * @attr success-message
+	 * @description The message to display when the text is copied to the clipboard after clicking on the truncated text
+	 */
+	@property({ type: String, attribute: "success-message" })
+	successMessage = "Copied to clipboard";
+
+	@state()
+	hasCopied = false;
+
+	@state()
+	private fullText = "";
+
+	@state()
+	private overflowing = false;
+
+	@query("#content")
+	private content!: HTMLElement;
+
+	@query("#overlay")
+	private overlayEl?: Overlay;
+
+	@queryAssignedNodes({ flatten: true })
+	private slottedContent!: Node[];
+
+	// elements instead of nodes because, according to spec,
+	// flattened assignedNodes will return a slot's *children* if there are no assigned nodes.
+	// ¯\_(ツ)_/¯
+	@queryAssignedElements({ slot: "overflow", flatten: true })
+	private slottedOverflow!: HTMLElement[];
+
+	get hasCustomOverflow(): boolean {
+		return this.slottedOverflow.length > 0;
+	}
+
+	private resizeObserver = new ResizeObserver(() => {
+		this.measureOverflow();
+	});
+
+	private mutationObserver = new MutationObserver(() => {
+		this.copyText();
+	});
+
+	override render(): TemplateResult {
+		/* eslint-disable lit-a11y/click-events-have-key-events */
+		return html`
+			
+				
+			
+			${this.renderTooltip()}
+		`;
+		/* eslint-enable lit-a11y/click-events-have-key-events */
+	}
+
+	private renderTooltip(): TemplateResult | undefined {
+		if (!this.overflowing) {
+			return html`
+				
+			`;
+		}
+
+		return html`
+			
+				
+					${!this.hasCopied
+						? html`
+								
+									${this.fullText}
+								
+							`
+						: this.successMessage}
+				
+			
+		`;
+	}
+
+	protected override firstUpdated(
+		_changedProperties: PropertyValues,
+	): void {
+		this.resizeObserver.observe(this);
+		this.resizeObserver.observe(this.content);
+		this.copyText();
+		this.measureOverflow();
+	}
+
+	protected override updated(changedProperties: PropertyValues): void {
+		super.updated(changedProperties);
+		if (
+			changedProperties.has("hasCopied") &&
+			this.hasCopied &&
+			this.overlayEl
+		) {
+			// we know overlayEl exists because it couldn't copy the text otherwise
+			this.overlayEl.open = true;
+		}
+	}
+
+	private handleOverflowSlotchange(): void {
+		this.mutationObserver.disconnect();
+		if (!this.hasCustomOverflow) {
+			/* c8 ignore next 5 */
+			this.mutationObserver.observe(this.content, {
+				subtree: true,
+				childList: true,
+				characterData: true,
+			});
+		}
+	}
+
+	private handleClick(): void {
+		if (!this.overflowing) return;
+
+		const textToCopy = this.slottedContent
+			.map((node) => node.textContent ?? "")
+			.join("")
+			.trim();
+		navigator.clipboard.writeText(textToCopy);
+		this.hasCopied = true;
+		/* c8 ignore next 3 */
+		setTimeout(() => {
+			this.hasCopied = false;
+		}, 6000);
+	}
+
+	private measureOverflow(): void {
+		// Add 1 because Safari sometimes rounds by 1px, breaking the calculation otherwise
+		this.overflowing = this.content.offsetWidth > this.clientWidth + 1;
+	}
+
+	// Copies just the textContent of slotted nodes into the tooltip to avoid duplicating the user's DOM
+	private copyText(): void {
+		if (this.hasCustomOverflow) return;
+		this.fullText = this.slottedContent
+			.map((node) => node.textContent ?? "")
+			.join("");
+	}
 }

From 1361bcb5df1f4b53ae829eff3d7cee8a470e023d Mon Sep 17 00:00:00 2001
From: Casey Eickhoff 
Date: Thu, 19 Dec 2024 17:31:30 -0700
Subject: [PATCH 4/9] chore: resolve lint errors


From 9934ac1d432c511eb83d755d0083467306781a9b Mon Sep 17 00:00:00 2001
From: Casey Eickhoff 
Date: Fri, 20 Dec 2024 11:29:46 -0700
Subject: [PATCH 5/9] chore: test fixes

---
 .vscode/settings.json                       |   10 +-
 packages/card/stories/card.stories.ts       |    7 +-
 packages/number-field/src/NumberField.ts    | 1771 +++++++++----------
 packages/overlay/stories/overlay.stories.ts |   24 +-
 4 files changed, 897 insertions(+), 915 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d337dbe7c8..8c107880c0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -33,7 +33,7 @@
 	"editor.formatOnSave": true,
 	"editor.formatOnSaveMode": "file",
 	"editor.insertSpaces": false,
-	"editor.detectIndentation": false,
+	"editor.detectIndentation": true,
 	"typescript.tsdk": "node_modules/typescript/lib",
 	"lit-plugin.strict": true,
 	"[css]": {
@@ -109,12 +109,6 @@
 			"selector": "yaml"
 		}
 	],
-	// "cssVariables.lookupFiles": [
-	// 	"${workspaceFolder}/tokens/dist/index.css",
-	// 	"${workspaceFolder}/tokens/**/*.css",
-	// 	"${workspaceFolder}/components/*/index.css",
-	// 	"${workspaceFolder}/components/*/themes/*.css"
-	// ],
 	"docthis.includeDescriptionTag": true,
 	"docthis.inferTypesFromNames": true,
 	"docthis.returnsTag": true,
@@ -122,8 +116,6 @@
 	"editor.renderControlCharacters": true,
 	"eslint.format.enable": true,
 	"eslint.useESLintClass": true,
-	// "eslint.nodePath": "node_modules/eslint",
-	// "eslint.workingDirectories": ["./packages", "./tools"],
 	"eslint.validate": [
 		"javascript",
 		"javascriptreact",
diff --git a/packages/card/stories/card.stories.ts b/packages/card/stories/card.stories.ts
index 31b1ad6955..3e0525cd0e 100644
--- a/packages/card/stories/card.stories.ts
+++ b/packages/card/stories/card.stories.ts
@@ -9,10 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from "@spectrum-web-components/base";
-import { ifDefined } from "lit-html/directives/if-defined.js";
-
 import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import { html, TemplateResult } from "@spectrum-web-components/base";
 import "@spectrum-web-components/card/sp-card.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-file-txt.js";
 import "@spectrum-web-components/link/sp-link.js";
@@ -20,6 +18,7 @@ import "@spectrum-web-components/menu/sp-menu-divider.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import "@spectrum-web-components/menu/sp-menu.js";
 import "@spectrum-web-components/textfield/sp-textfield.js";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 import { landscape, portrait } from "./images.js";
 
 export default {
@@ -348,8 +347,8 @@ horizontalWithHREF.args = {
 export const smallQuiet = (args: StoryArgs): TemplateResult => {
 	return html`
 		

+			 = {
-    '１': '1',
-    '２': '2',
-    '３': '3',
-    '４': '4',
-    '５': '5',
-    '６': '6',
-    '７': '7',
-    '８': '8',
-    '９': '9',
-    '０': '0',
-    '、': ',',
-    '，': ',',
-    '。': '.',
-    '．': '.',
-    '％': '%',
-    '＋': '+',
-    ー: '-',
-    一: '1',
-    二: '2',
-    三: '3',
-    四: '4',
-    五: '5',
-    六: '6',
-    七: '7',
-    八: '8',
-    九: '9',
-    零: '0',
+	"１": "1",
+	"２": "2",
+	"３": "3",
+	"４": "4",
+	"５": "5",
+	"６": "6",
+	"７": "7",
+	"８": "8",
+	"９": "9",
+	"０": "0",
+	"、": ",",
+	"，": ",",
+	"。": ".",
+	"．": ".",
+	"％": "%",
+	"＋": "+",
+	ー: "-",
+	一: "1",
+	二: "2",
+	三: "3",
+	四: "4",
+	五: "5",
+	六: "6",
+	七: "7",
+	八: "8",
+	九: "9",
+	零: "0",
 };
-const chevronIcon: Record TemplateResult> = {
-    s: (dir) => html`
-        
-    `,
-    m: (dir) => html`
-        
-    `,
-    l: (dir) => html`
-        
-    `,
-    xl: (dir) => html`
-        
-    `,
+const chevronIcon: Record TemplateResult> = {
+	s: (dir) => html`
+		
+	`,
+	m: (dir) => html`
+		
+	`,
+	l: (dir) => html`
+		
+	`,
+	xl: (dir) => html`
+		
+	`,
 };
 
 /**
@@ -106,815 +105,811 @@ const chevronIcon: Record TemplateResult> = {
  * @slot negative-help-text - negative help text to associate to your form element when `invalid`
  */
 export class NumberField extends TextfieldBase {
-    public static override get styles(): CSSResultArray {
-        return [...super.styles, styles, chevronStyles, chevronIconOverrides];
-    }
-
-    @query('.buttons')
-    private buttons!: HTMLDivElement;
-
-    @property({ type: Boolean, reflect: true })
-    public override focused = false;
-
-    _forcedUnit = '';
-
-    /**
-     * An `<sp-number-field>` element will process its numeric value with
-     * `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`
-     * in order to prepare it for visual delivery in the input. In order to customize this
-     * processing supply your own `Intl.NumberFormatOptions` object here.
-     *
-     * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
-     */
-    @property({ type: Object, attribute: 'format-options' })
-    public formatOptions: Intl.NumberFormatOptions = {};
-
-    /**
-     * Whether the stepper UI is hidden or not.
-     */
-    @property({ type: Boolean, reflect: true, attribute: 'hide-stepper' })
-    public hideStepper = false;
-
-    @property({ type: Boolean, reflect: true })
-    public indeterminate = false;
-
-    @property({ type: Boolean, reflect: true, attribute: 'keyboard-focused' })
-    public keyboardFocused = false;
-
-    @property({ type: Number })
-    public max?: number;
-
-    @property({ type: Number })
-    public min?: number;
-
-    /**
-     * The distance by which to alter the value of the element when taking a "step".
-     *
-     * When `this.formatOptions.style === 'percentage'` the default step will be
-     * set to 0.01 unless otherwise supplied to the element.
-     */
-    @property({ type: Number })
-    public step?: number;
-
-    public managedInput = false;
-
-    @property({ type: Number, reflect: true, attribute: 'step-modifier' })
-    public stepModifier = 10;
-
-    @property({ type: Number })
-    public override set value(rawValue: number) {
-        const value = this.validateInput(rawValue);
-
-        if (value === this.value) {
-            return;
-        }
-
-        this.lastCommitedValue = value;
-        const oldValue = this._value;
-
-        this._value = value;
-        this.requestUpdate('value', oldValue);
-    }
-
-    public override get value(): number {
-        return this._value;
-    }
-
-    private get inputValue(): string {
-        return this.indeterminate
-            ? this.formattedValue
-            : this.inputElement.value;
-    }
-
-    public override _value = NaN;
-    private _trackingValue = '';
-    private lastCommitedValue?: number;
-
-    private setValue(newValue: number = this.value): void {
-        // Capture previous value for accurate IME change detection
-        const previousValue = this.lastCommitedValue;
-
-        this.value = newValue;
-
-        if (
-            typeof previousValue === 'undefined' ||
-            previousValue === this.value
-        ) {
-            // Do not announce when the value is unchanged.
-            return;
-        }
-
-        this.lastCommitedValue = this.value;
-
-        this.dispatchEvent(
-            new Event('change', { bubbles: true, composed: true })
-        );
-    }
-
-    /**
-     * Retreive the value of the element parsed to a Number.
-     */
-    public get valueAsString(): string {
-        return this._value.toString();
-    }
-
-    public set valueAsString(value: string) {
-        this.value = this.numberParser.parse(value);
-    }
-
-    public get formattedValue(): string {
-        if (isNaN(this.value)) return '';
-
-        return (
-            this.numberFormatter.format(this.value) +
-            (this.focused ? '' : this._forcedUnit)
-        );
-    }
-
-    private decimalsChars = new Set(['.', ',']);
-    private valueBeforeFocus: string = '';
-    private isIntentDecimal: boolean = false;
-
-    private convertValueToNumber(inputValue: string): number {
-        // Normalize full-width characters to their ASCII equivalents
-        let normalizedValue = inputValue
-            .split('')
-            .map((char) => remapMultiByteCharacters[char] || char)
-            .join('');
-
-        const separators = this.valueBeforeFocus
-            .split('')
-            .filter((char) => this.decimalsChars.has(char));
-        const uniqueSeparators = new Set(separators);
-
-        if (
-            isIOS() &&
-            this.inputElement.inputMode === 'decimal' &&
-            normalizedValue !== this.valueBeforeFocus
-        ) {
-            const parts = this.numberFormatter.formatToParts(1000.1);
-
-            const replacementDecimal = parts.find(
-                (part) => part.type === 'decimal'
-            )!.value;
-
-            for (const separator of uniqueSeparators) {
-                const isDecimalSeparator = separator === replacementDecimal;
-
-                if (!isDecimalSeparator && !this.isIntentDecimal) {
-                    normalizedValue = normalizedValue.replace(
-                        new RegExp(separator, 'g'),
-                        ''
-                    );
-                }
-            }
-
-            let hasReplacedDecimal = false;
-            const valueChars = normalizedValue.split('');
-
-            for (let index = valueChars.length - 1; index >= 0; index--) {
-                const char = valueChars[index];
-
-                if (this.decimalsChars.has(char)) {
-                    if (!hasReplacedDecimal) {
-                        valueChars[index] = replacementDecimal;
-                        hasReplacedDecimal = true;
-                    } else valueChars[index] = '';
-                }
-            }
-            normalizedValue = valueChars.join('');
-        }
-
-        return this.numberParser.parse(normalizedValue);
-    }
-    private get _step(): number {
-        if (typeof this.step !== 'undefined') {
-            return this.step;
-        }
-
-        if (this.formatOptions?.style === 'percent') {
-            return 0.01;
-        }
-
-        return 1;
-    }
-
-    private nextChange!: number;
-    private changeCount = 0;
-    private findChange!: (event: PointerEvent) => void;
-    private change!: (event: PointerEvent) => void;
-    private safty!: number;
-    private languageResolver = new LanguageResolutionController(this);
-
-    private handlePointerdown(event: PointerEvent): void {
-        if (event.button !== 0) {
-            event.preventDefault();
-
-            return;
-        }
-
-        this.managedInput = true;
-        this.buttons.setPointerCapture(event.pointerId);
-        const stepUpRect = this.buttons.children[0].getBoundingClientRect();
-        const stepDownRect = this.buttons.children[1].getBoundingClientRect();
-
-        this.findChange = (event: PointerEvent) => {
-            if (
-                event.clientX >= stepUpRect.x &&
-                event.clientY >= stepUpRect.y &&
-                event.clientX <= stepUpRect.x + stepUpRect.width &&
-                event.clientY <= stepUpRect.y + stepUpRect.height
-            ) {
-                this.change = (event: PointerEvent) =>
-                    this.increment(event.shiftKey ? this.stepModifier : 1);
-            } else if (
-                event.clientX >= stepDownRect.x &&
-                event.clientY >= stepDownRect.y &&
-                event.clientX <= stepDownRect.x + stepDownRect.width &&
-                event.clientY <= stepDownRect.y + stepDownRect.height
-            ) {
-                this.change = (event: PointerEvent) =>
-                    this.decrement(event.shiftKey ? this.stepModifier : 1);
-            }
-        };
-        this.findChange(event);
-        this.startChange(event);
-    }
-
-    private startChange(event: PointerEvent): void {
-        this.changeCount = 0;
-        this.doChange(event);
-        this.safty = setTimeout(() => {
-            this.doNextChange(event);
-        }, 400) as unknown as number;
-    }
-
-    private doChange(event: PointerEvent): void {
-        this.change(event);
-    }
-
-    private handlePointermove(event: PointerEvent): void {
-        this.findChange(event);
-    }
-
-    private handlePointerup(event: PointerEvent): void {
-        this.buttons.releasePointerCapture(event.pointerId);
-        cancelAnimationFrame(this.nextChange);
-        clearTimeout(this.safty);
-        this.managedInput = false;
-        this.setValue();
-    }
-
-    private doNextChange(event: PointerEvent): number {
-        this.changeCount += 1;
-
-        if (this.changeCount % FRAMES_PER_CHANGE === 0) {
-            this.doChange(event);
-        }
-
-        return requestAnimationFrame(() => {
-            this.nextChange = this.doNextChange(event);
-        });
-    }
-
-    private stepBy(count: number): void {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-
-        const min = typeof this.min !== 'undefined' ? this.min : 0;
-        let value = this.value;
-
-        value += count * this._step;
-
-        if (isNaN(this.value)) {
-            value = min;
-        }
-
-        value = this.valueWithLimits(value);
-
-        this.requestUpdate();
-        this._value = this.validateInput(value);
-        this.inputElement.value = this.numberFormatter.format(value);
-
-        this.inputElement.dispatchEvent(
-            new Event('input', { bubbles: true, composed: true })
-        );
-        this.indeterminate = false;
-        this.focus();
-    }
-
-    private increment(factor = 1): void {
-        this.stepBy(1 * factor);
-    }
-
-    private decrement(factor = 1): void {
-        this.stepBy(-1 * factor);
-    }
-
-    private handleKeydown(event: KeyboardEvent): void {
-        if (this.isComposing) return;
-
-        switch (event.code) {
-            case 'ArrowUp':
-                event.preventDefault();
-                this.increment(event.shiftKey ? this.stepModifier : 1);
-                this.setValue();
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                this.decrement(event.shiftKey ? this.stepModifier : 1);
-                this.setValue();
-                break;
-        }
-    }
-
-    private queuedChangeEvent!: number;
-
-    protected onScroll(event: WheelEvent): void {
-        event.preventDefault();
-        this.managedInput = true;
-        const direction = event.shiftKey
-            ? event.deltaX / Math.abs(event.deltaX)
-            : event.deltaY / Math.abs(event.deltaY);
-
-        if (direction !== 0 && !isNaN(direction)) {
-            this.stepBy(direction * (event.shiftKey ? this.stepModifier : 1));
-            clearTimeout(this.queuedChangeEvent);
-            this.queuedChangeEvent = setTimeout(() => {
-                this.setValue();
-            }, CHANGE_DEBOUNCE_MS) as unknown as number;
-        }
-
-        this.managedInput = false;
-    }
-
-    protected override onFocus(): void {
-        super.onFocus();
-        this._trackingValue = this.inputValue;
-        this.keyboardFocused = !this.readonly && true;
-        this.addEventListener('wheel', this.onScroll, { passive: false });
-        this.valueBeforeFocus = this.inputElement.value;
-    }
-
-    protected override onBlur(_event: FocusEvent): void {
-        super.onBlur(_event);
-        this.keyboardFocused = !this.readonly && false;
-        this.removeEventListener('wheel', this.onScroll);
-        this.isIntentDecimal = false;
-    }
-
-    private handleFocusin(): void {
-        this.focused = !this.readonly && true;
-        this.keyboardFocused = !this.readonly && true;
-    }
-
-    private handleFocusout(): void {
-        this.focused = !this.readonly && false;
-        this.keyboardFocused = !this.readonly && false;
-    }
-
-    private wasIndeterminate = false;
-    private indeterminateValue?: number;
-
-    protected override handleChange(): void {
-        const value = this.convertValueToNumber(this.inputValue);
-
-        if (this.wasIndeterminate) {
-            this.wasIndeterminate = false;
-            this.indeterminateValue = undefined;
-
-            if (isNaN(value)) {
-                this.indeterminate = true;
-
-                return;
-            }
-        }
-
-        this.setValue(value);
-        this.inputElement.value = this.formattedValue;
-    }
-
-    protected handleCompositionStart(): void {
-        this.isComposing = true;
-    }
-
-    protected handleCompositionEnd(): void {
-        this.isComposing = false;
-        requestAnimationFrame(() => {
-            this.inputElement.dispatchEvent(
-                new Event('input', {
-                    composed: true,
-                    bubbles: true,
-                })
-            );
-        });
-    }
-
-    private hasRecentlyReceivedPointerDown = false;
-
-    protected override handleInputElementPointerdown(): void {
-        this.hasRecentlyReceivedPointerDown = true;
-        this.updateComplete.then(() => {
-            requestAnimationFrame(() => {
-                this.hasRecentlyReceivedPointerDown = false;
-            });
-        });
-    }
-
-    protected override handleInput(event: InputEvent): void {
-        if (this.isComposing) {
-            // If user actually types a new character.
-            if (event.data) {
-                // Don't allow non-numeric characters even in composing mode.
-                const partialValue = this.convertValueToNumber(event.data);
-
-                if (Number.isNaN(partialValue)) {
-                    this.inputElement.value = this.indeterminate
-                        ? indeterminatePlaceholder
-                        : this._trackingValue;
-
-                    this.isComposing = false;
-                }
-            }
-
-            event.stopPropagation();
-
-            return;
-        }
-
-        if (this.indeterminate) {
-            this.wasIndeterminate = true;
-            this.indeterminateValue = this.value;
-            this.inputElement.value = this.inputElement.value.replace(
-                indeterminatePlaceholder,
-                ''
-            );
-        }
-
-        if (event.data && this.decimalsChars.has(event.data))
-            this.isIntentDecimal = true;
-
-        const { value: originalValue, selectionStart } = this.inputElement;
-        const value = originalValue
-            .split('')
-            .map((char) => remapMultiByteCharacters[char] || char)
-            .join('');
-
-        if (this.numberParser.isValidPartialNumber(value)) {
-            // Use starting value as this.value is the `input` value.
-            this.lastCommitedValue = this.lastCommitedValue ?? this.value;
-            const valueAsNumber = this.convertValueToNumber(value);
-
-            if (!value && this.indeterminateValue) {
-                this.indeterminate = true;
-                this._value = this.indeterminateValue;
-            } else {
-                this.indeterminate = false;
-                this._value = this.validateInput(valueAsNumber);
-            }
-
-            this._trackingValue = value;
-            this.inputElement.value = value;
-            this.inputElement.setSelectionRange(selectionStart, selectionStart);
-
-            return;
-        } else {
-            this.inputElement.value = this.indeterminate
-                ? indeterminatePlaceholder
-                : this._trackingValue;
-
-            // Don't emit input event when the character is invalid.
-            event.stopPropagation();
-        }
-
-        const currentLength = value.length;
-        const previousLength = this._trackingValue.length;
-        const nextSelectStart =
-            (selectionStart || currentLength) -
-            (currentLength - previousLength);
-
-        this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
-    }
-
-    private valueWithLimits(nextValue: number): number {
-        let value = nextValue;
-
-        if (typeof this.min !== 'undefined') {
-            value = Math.max(this.min, value);
-        }
-
-        if (typeof this.max !== 'undefined') {
-            value = Math.min(this.max, value);
-        }
-
-        return value;
-    }
-
-    private validateInput(value: number): number {
-        value = this.valueWithLimits(value);
-        const signMultiplier = value < 0 ? -1 : 1; // 'signMultiplier' adjusts 'value' for 'validateInput' and reverts it before returning.
-
-        value *= signMultiplier;
-
-        // Step shouldn't validate when 0...
-        if (this.step) {
-            const min = typeof this.min !== 'undefined' ? this.min : 0;
-            const moduloStep = parseFloat(
-                this.valueFormatter.format((value - min) % this.step)
-            );
-            const fallsOnStep = moduloStep === 0;
-
-            if (!fallsOnStep) {
-                const overUnder = Math.round(moduloStep / this.step);
-
-                if (overUnder === 1) {
-                    value += this.step - moduloStep;
-                } else {
-                    value -= moduloStep;
-                }
-            }
-
-            if (typeof this.max !== 'undefined') {
-                while (value > this.max) {
-                    value -= this.step;
-                }
-            }
-
-            value = parseFloat(this.valueFormatter.format(value));
-        }
-
-        value *= signMultiplier;
-
-        return value;
-    }
-
-    protected override get displayValue(): string {
-        const indeterminateValue = this.focused ? '' : indeterminatePlaceholder;
-
-        return this.indeterminate ? indeterminateValue : this.formattedValue;
-    }
-
-    protected clearNumberFormatterCache(): void {
-        this._numberFormatter = undefined;
-        this._numberParser = undefined;
-    }
-
-    protected get numberFormatter(): NumberFormatter {
-        if (!this._numberFormatter || !this._numberFormatterFocused) {
-            const {
-                style,
-                unit,
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                unitDisplay,
-                ...formatOptionsNoUnit
-            } = this.formatOptions;
-
-            if (style !== 'unit') {
-                (formatOptionsNoUnit as Intl.NumberFormatOptions).style = style;
-            }
-
-            this._numberFormatterFocused = new NumberFormatter(
-                this.languageResolver.language,
-                formatOptionsNoUnit
-            );
-
-            try {
-                this._numberFormatter = new NumberFormatter(
-                    this.languageResolver.language,
-                    this.formatOptions
-                );
-                this._forcedUnit = '';
-                this._numberFormatter.format(1);
-            } catch (error) {
-                if (style === 'unit') {
-                    this._forcedUnit = unit as string;
-                }
-
-                this._numberFormatter = this._numberFormatterFocused;
-            }
-        }
-
-        return this.focused
-            ? this._numberFormatterFocused
-            : this._numberFormatter;
-    }
-
-    protected clearValueFormatterCache(): void {
-        this._valueFormatter = undefined;
-    }
-    protected get valueFormatter(): NumberFormatter {
-        if (!this._valueFormatter) {
-            const digitsAfterDecimal = this.step
-                ? this.step != Math.floor(this.step)
-                    ? this.step.toString().split('.')[1].length
-                    : 0
-                : 0;
-
-            this._valueFormatter = new NumberFormatter('en', {
-                useGrouping: false,
-                maximumFractionDigits: digitsAfterDecimal,
-            });
-        }
-
-        return this._valueFormatter;
-    }
-    private _numberFormatter?: NumberFormatter;
-    private _numberFormatterFocused?: NumberFormatter;
-    private _valueFormatter?: NumberFormatter;
-    protected get numberParser(): NumberParser {
-        if (!this._numberParser || !this._numberParserFocused) {
-            const {
-                style,
-                unit,
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                unitDisplay,
-                ...formatOptionsNoUnit
-            } = this.formatOptions;
-
-            if (style !== 'unit') {
-                (formatOptionsNoUnit as Intl.NumberFormatOptions).style = style;
-            }
-
-            this._numberParserFocused = new NumberParser(
-                this.languageResolver.language,
-                formatOptionsNoUnit
-            );
-
-            try {
-                this._numberParser = new NumberParser(
-                    this.languageResolver.language,
-                    this.formatOptions
-                );
-                this._forcedUnit = '';
-                this._numberParser.parse('0');
-            } catch (error) {
-                if (style === 'unit') {
-                    this._forcedUnit = unit as string;
-                }
-
-                this._numberParser = this._numberParserFocused;
-            }
-        }
-
-        return this.focused ? this._numberParserFocused : this._numberParser;
-    }
-
-    applyFocusElementLabel = (value?: string): void => {
-        this.appliedLabel = value;
-    };
-
-    private _numberParser?: NumberParser;
-    private _numberParserFocused?: NumberParser;
-
-    protected override renderField(): TemplateResult {
-        this.autocomplete = 'off';
-
-        return html`
-            ${super.renderField()}
-            ${this.hideStepper
-                ? nothing
-                : html`
-                      
-                          
-                          
-                      
-                  `}
-        `;
-    }
-
-    protected override update(changes: PropertyValues): void {
-        if (changes.has('formatOptions') || changes.has('resolvedLanguage')) {
-            this.clearNumberFormatterCache();
-        }
-
-        if (
-            changes.has('value') ||
-            changes.has('max') ||
-            changes.has('min') ||
-            changes.has('step')
-        ) {
-            const value = this.numberParser.parse(
-                this.formattedValue.replace(this._forcedUnit, '')
-            );
-
-            this.value = value;
-            this.clearValueFormatterCache();
-        }
-
-        super.update(changes);
-    }
-
-    public override willUpdate(changes: PropertyValues): void {
-        this.multiline = false;
-
-        if (changes.has(languageResolverUpdatedSymbol)) {
-            this.clearNumberFormatterCache();
-        }
-    }
-
-    private isComposing = false;
-
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        this.addEventListener('keydown', this.handleKeydown);
-        this.addEventListener('compositionstart', this.handleCompositionStart);
-        this.addEventListener('compositionend', this.handleCompositionEnd);
-    }
-
-    protected override updated(changes: PropertyValues): void {
-        if (!this.inputElement || !this.isConnected) {
-            // Prevent race conditions if inputElement is removed from DOM while a queued update is still running.
-            return;
-        }
-
-        if (changes.has('min') || changes.has('formatOptions')) {
-            const hasOnlyPositives =
-                typeof this.min !== 'undefined' && this.min >= 0;
-
-            const { maximumFractionDigits } =
-                this.numberFormatter.resolvedOptions();
-            const hasDecimals =
-                maximumFractionDigits && maximumFractionDigits > 0;
-
-            let inputMode = 'numeric';
-
-            /* c8 ignore next 5 */
-            // iPhone doesn't have a minus sign in either numeric or decimal.
-            if (isIPhone() && !hasOnlyPositives) inputMode = 'text';
-            else if (isIOS() && hasDecimals) inputMode = 'decimal';
-            // Android numeric has both a decimal point and minus key. Decimal does not have a minus key.
-            else if (isAndroid() && hasDecimals && hasOnlyPositives)
-                inputMode = 'decimal';
-
-            this.inputElement.inputMode = inputMode;
-        }
-
-        if (
-            changes.has('focused') &&
-            this.focused &&
-            !this.hasRecentlyReceivedPointerDown &&
-            !!this.formatOptions.unit
-        ) {
-            // Normalize keyboard focus entry between unit and non-unit bearing Number Fields
-            this.setSelectionRange(0, this.displayValue.length);
-        }
-    }
+	public static override get styles(): CSSResultArray {
+		return [...super.styles, styles, chevronStyles, chevronIconOverrides];
+	}
+
+	@query(".buttons")
+	private buttons!: HTMLDivElement;
+
+	@property({ type: Boolean, reflect: true })
+	public override focused = false;
+
+	_forcedUnit = "";
+
+	/**
+	 * An `<sp-number-field>` element will process its numeric value with
+	 * `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`
+	 * in order to prepare it for visual delivery in the input. In order to customize this
+	 * processing supply your own `Intl.NumberFormatOptions` object here.
+	 *
+	 * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+	 */
+	@property({ type: Object, attribute: "format-options" })
+	public formatOptions: Intl.NumberFormatOptions = {};
+
+	/**
+	 * Whether the stepper UI is hidden or not.
+	 */
+	@property({ type: Boolean, reflect: true, attribute: "hide-stepper" })
+	public hideStepper = false;
+
+	@property({ type: Boolean, reflect: true })
+	public indeterminate = false;
+
+	@property({ type: Boolean, reflect: true, attribute: "keyboard-focused" })
+	public keyboardFocused = false;
+
+	@property({ type: Number })
+	public max?: number;
+
+	@property({ type: Number })
+	public min?: number;
+
+	/**
+	 * The distance by which to alter the value of the element when taking a "step".
+	 *
+	 * When `this.formatOptions.style === 'percentage'` the default step will be
+	 * set to 0.01 unless otherwise supplied to the element.
+	 */
+	@property({ type: Number })
+	public step?: number;
+
+	public managedInput = false;
+
+	@property({ type: Number, reflect: true, attribute: "step-modifier" })
+	public stepModifier = 10;
+
+	@property({ type: Number })
+	public override set value(rawValue: number) {
+		const value = this.validateInput(rawValue);
+
+		if (value === this.value) {
+			return;
+		}
+
+		this.lastCommitedValue = value;
+		const oldValue = this._value;
+
+		this._value = value;
+		this.requestUpdate("value", oldValue);
+	}
+
+	public override get value(): number {
+		return this._value;
+	}
+
+	private get inputValue(): string {
+		return this.indeterminate ? this.formattedValue : this.inputElement.value;
+	}
+
+	public override _value = NaN;
+	private _trackingValue = "";
+	private lastCommitedValue?: number;
+
+	private setValue(newValue: number = this.value): void {
+		// Capture previous value for accurate IME change detection
+		const previousValue = this.lastCommitedValue;
+
+		this.value = newValue;
+
+		if (typeof previousValue === "undefined" || previousValue === this.value) {
+			// Do not announce when the value is unchanged.
+			return;
+		}
+
+		this.lastCommitedValue = this.value;
+
+		this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+	}
+
+	/**
+	 * Retreive the value of the element parsed to a Number.
+	 */
+	public get valueAsString(): string {
+		return this._value.toString();
+	}
+
+	public set valueAsString(value: string) {
+		this.value = this.numberParser.parse(value);
+	}
+
+	public get formattedValue(): string {
+		if (isNaN(this.value)) return "";
+
+		return (
+			this.numberFormatter.format(this.value) +
+			(this.focused ? "" : this._forcedUnit)
+		);
+	}
+
+	private decimalsChars = new Set([".", ","]);
+	private valueBeforeFocus: string = "";
+	private isIntentDecimal: boolean = false;
+
+	private convertValueToNumber(inputValue: string): number {
+		// Normalize full-width characters to their ASCII equivalents
+		let normalizedValue = inputValue
+			.split("")
+			.map((char) => remapMultiByteCharacters[char] || char)
+			.join("");
+
+		const separators = this.valueBeforeFocus
+			.split("")
+			.filter((char) => this.decimalsChars.has(char));
+		const uniqueSeparators = new Set(separators);
+
+		if (
+			isIOS() &&
+			this.inputElement.inputMode === "decimal" &&
+			normalizedValue !== this.valueBeforeFocus
+		) {
+			const parts = this.numberFormatter.formatToParts(1000.1);
+
+			const replacementDecimal = parts.find(
+				(part) => part.type === "decimal",
+			)!.value;
+
+			for (const separator of uniqueSeparators) {
+				const isDecimalSeparator = separator === replacementDecimal;
+
+				if (!isDecimalSeparator && !this.isIntentDecimal) {
+					normalizedValue = normalizedValue.replace(
+						new RegExp(separator, "g"),
+						"",
+					);
+				}
+			}
+
+			let hasReplacedDecimal = false;
+			const valueChars = normalizedValue.split("");
+
+			for (let index = valueChars.length - 1; index >= 0; index--) {
+				const char = valueChars[index];
+
+				if (this.decimalsChars.has(char)) {
+					if (!hasReplacedDecimal) {
+						valueChars[index] = replacementDecimal;
+						hasReplacedDecimal = true;
+					} else valueChars[index] = "";
+				}
+			}
+			normalizedValue = valueChars.join("");
+		}
+
+		return this.numberParser.parse(normalizedValue);
+	}
+	private get _step(): number {
+		if (typeof this.step !== "undefined") {
+			return this.step;
+		}
+
+		if (this.formatOptions?.style === "percent") {
+			return 0.01;
+		}
+
+		return 1;
+	}
+
+	private nextChange!: number;
+	private changeCount = 0;
+	private findChange!: (event: PointerEvent) => void;
+	private change!: (event: PointerEvent) => void;
+	private safty!: number;
+	private languageResolver = new LanguageResolutionController(this);
+
+	private handlePointerdown(event: PointerEvent): void {
+		if (event.button !== 0) {
+			event.preventDefault();
+
+			return;
+		}
+
+		this.managedInput = true;
+		this.buttons.setPointerCapture(event.pointerId);
+		const stepUpRect = this.buttons.children[0].getBoundingClientRect();
+		const stepDownRect = this.buttons.children[1].getBoundingClientRect();
+
+		this.findChange = (event: PointerEvent) => {
+			if (
+				event.clientX >= stepUpRect.x &&
+				event.clientY >= stepUpRect.y &&
+				event.clientX <= stepUpRect.x + stepUpRect.width &&
+				event.clientY <= stepUpRect.y + stepUpRect.height
+			) {
+				this.change = (event: PointerEvent) =>
+					this.increment(event.shiftKey ? this.stepModifier : 1);
+			} else if (
+				event.clientX >= stepDownRect.x &&
+				event.clientY >= stepDownRect.y &&
+				event.clientX <= stepDownRect.x + stepDownRect.width &&
+				event.clientY <= stepDownRect.y + stepDownRect.height
+			) {
+				this.change = (event: PointerEvent) =>
+					this.decrement(event.shiftKey ? this.stepModifier : 1);
+			}
+		};
+		this.findChange(event);
+		this.startChange(event);
+	}
+
+	private startChange(event: PointerEvent): void {
+		this.changeCount = 0;
+		this.doChange(event);
+		this.safty = setTimeout(() => {
+			this.doNextChange(event);
+		}, 400) as unknown as number;
+	}
+
+	private doChange(event: PointerEvent): void {
+		this.change(event);
+	}
+
+	private handlePointermove(event: PointerEvent): void {
+		this.findChange(event);
+	}
+
+	private handlePointerup(event: PointerEvent): void {
+		this.buttons.releasePointerCapture(event.pointerId);
+		cancelAnimationFrame(this.nextChange);
+		clearTimeout(this.safty);
+		this.managedInput = false;
+		this.setValue();
+	}
+
+	private doNextChange(event: PointerEvent): number {
+		this.changeCount += 1;
+
+		if (this.changeCount % FRAMES_PER_CHANGE === 0) {
+			this.doChange(event);
+		}
+
+		return requestAnimationFrame(() => {
+			this.nextChange = this.doNextChange(event);
+		});
+	}
+
+	private stepBy(count: number): void {
+		if (this.disabled || this.readonly) {
+			return;
+		}
+
+		const min = typeof this.min !== "undefined" ? this.min : 0;
+		let value = this.value;
+
+		value += count * this._step;
+
+		if (isNaN(this.value)) {
+			value = min;
+		}
+
+		value = this.valueWithLimits(value);
+
+		this.requestUpdate();
+		this._value = this.validateInput(value);
+		this.inputElement.value = this.numberFormatter.format(value);
+
+		this.inputElement.dispatchEvent(
+			new Event("input", { bubbles: true, composed: true }),
+		);
+		this.indeterminate = false;
+		this.focus();
+	}
+
+	private increment(factor = 1): void {
+		this.stepBy(1 * factor);
+	}
+
+	private decrement(factor = 1): void {
+		this.stepBy(-1 * factor);
+	}
+
+	private handleKeydown(event: KeyboardEvent): void {
+		if (this.isComposing) return;
+
+		switch (event.code) {
+			case "ArrowUp":
+				event.preventDefault();
+				this.increment(event.shiftKey ? this.stepModifier : 1);
+				this.setValue();
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				this.decrement(event.shiftKey ? this.stepModifier : 1);
+				this.setValue();
+				break;
+		}
+	}
+
+	private queuedChangeEvent!: number;
+
+	protected onScroll(event: WheelEvent): void {
+		event.preventDefault();
+		this.managedInput = true;
+		const direction = event.shiftKey
+			? event.deltaX / Math.abs(event.deltaX)
+			: event.deltaY / Math.abs(event.deltaY);
+
+		if (direction !== 0 && !isNaN(direction)) {
+			this.stepBy(direction * (event.shiftKey ? this.stepModifier : 1));
+			clearTimeout(this.queuedChangeEvent);
+			this.queuedChangeEvent = setTimeout(() => {
+				this.setValue();
+			}, CHANGE_DEBOUNCE_MS) as unknown as number;
+		}
+
+		this.managedInput = false;
+	}
+
+	protected override onFocus(): void {
+		super.onFocus();
+		this._trackingValue = this.inputValue;
+		this.keyboardFocused = !this.readonly && true;
+		this.addEventListener("wheel", this.onScroll, { passive: false });
+		this.valueBeforeFocus = this.inputElement.value;
+	}
+
+	protected override onBlur(_event: FocusEvent): void {
+		super.onBlur(_event);
+		this.keyboardFocused = !this.readonly && false;
+		this.removeEventListener("wheel", this.onScroll);
+		this.isIntentDecimal = false;
+	}
+
+	private handleFocusin(): void {
+		this.focused = !this.readonly && true;
+		this.keyboardFocused = !this.readonly && true;
+	}
+
+	private handleFocusout(): void {
+		this.focused = !this.readonly && false;
+		this.keyboardFocused = !this.readonly && false;
+	}
+
+	private wasIndeterminate = false;
+	private indeterminateValue?: number;
+
+	protected override handleChange(): void {
+		const value = this.convertValueToNumber(this.inputValue);
+
+		if (this.wasIndeterminate) {
+			this.wasIndeterminate = false;
+			this.indeterminateValue = undefined;
+
+			if (isNaN(value)) {
+				this.indeterminate = true;
+
+				return;
+			}
+		}
+
+		this.setValue(value);
+		this.inputElement.value = this.formattedValue;
+	}
+
+	protected handleCompositionStart(): void {
+		this.isComposing = true;
+	}
+
+	protected handleCompositionEnd(): void {
+		this.isComposing = false;
+		requestAnimationFrame(() => {
+			this.inputElement.dispatchEvent(
+				new Event("input", {
+					composed: true,
+					bubbles: true,
+				}),
+			);
+		});
+	}
+
+	private hasRecentlyReceivedPointerDown = false;
+
+	protected override handleInputElementPointerdown(): void {
+		this.hasRecentlyReceivedPointerDown = true;
+		this.updateComplete.then(() => {
+			requestAnimationFrame(() => {
+				this.hasRecentlyReceivedPointerDown = false;
+			});
+		});
+	}
+
+	protected override handleInput(event: InputEvent): void {
+		if (this.isComposing) {
+			// If user actually types a new character.
+			if (event.data) {
+				// Don't allow non-numeric characters even in composing mode.
+				const partialValue = this.convertValueToNumber(event.data);
+
+				if (Number.isNaN(partialValue)) {
+					this.inputElement.value = this.indeterminate
+						? indeterminatePlaceholder
+						: this._trackingValue;
+
+					this.isComposing = false;
+				}
+			}
+
+			event.stopPropagation();
+
+			return;
+		}
+
+		if (this.indeterminate) {
+			this.wasIndeterminate = true;
+			this.indeterminateValue = this.value;
+			this.inputElement.value = this.inputElement.value.replace(
+				indeterminatePlaceholder,
+				"",
+			);
+		}
+
+		if (event.data && this.decimalsChars.has(event.data))
+			this.isIntentDecimal = true;
+
+		const { value: originalValue, selectionStart } = this.inputElement;
+		const value = originalValue
+			.split("")
+			.map((char) => remapMultiByteCharacters[char] || char)
+			.join("");
+
+		if (this.numberParser.isValidPartialNumber(value)) {
+			// Use starting value as this.value is the `input` value.
+			this.lastCommitedValue = this.lastCommitedValue ?? this.value;
+			const valueAsNumber = this.convertValueToNumber(value);
+
+			if (!value && this.indeterminateValue) {
+				this.indeterminate = true;
+				this._value = this.indeterminateValue;
+			} else {
+				this.indeterminate = false;
+				this._value = this.validateInput(valueAsNumber);
+			}
+
+			this._trackingValue = value;
+			this.inputElement.value = value;
+			this.inputElement.setSelectionRange(selectionStart, selectionStart);
+
+			return;
+		} else {
+			this.inputElement.value = this.indeterminate
+				? indeterminatePlaceholder
+				: this._trackingValue;
+
+			// Don't emit input event when the character is invalid.
+			event.stopPropagation();
+		}
+
+		const currentLength = value.length;
+		const previousLength = this._trackingValue.length;
+		const nextSelectStart =
+			(selectionStart || currentLength) - (currentLength - previousLength);
+
+		this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
+	}
+
+	private valueWithLimits(nextValue: number): number {
+		let value = nextValue;
+
+		if (typeof this.min !== "undefined") {
+			value = Math.max(this.min, value);
+		}
+
+		if (typeof this.max !== "undefined") {
+			value = Math.min(this.max, value);
+		}
+
+		return value;
+	}
+
+	private validateInput(value: number): number {
+		value = this.valueWithLimits(value);
+		const signMultiplier = value < 0 ? -1 : 1; // 'signMultiplier' adjusts 'value' for 'validateInput' and reverts it before returning.
+
+		value *= signMultiplier;
+
+		// Step shouldn't validate when 0...
+		if (this.step) {
+			const min = typeof this.min !== "undefined" ? this.min : 0;
+			const moduloStep = parseFloat(
+				this.valueFormatter.format((value - min) % this.step),
+			);
+			const fallsOnStep = moduloStep === 0;
+
+			if (!fallsOnStep) {
+				const overUnder = Math.round(moduloStep / this.step);
+
+				if (overUnder === 1) {
+					value += this.step - moduloStep;
+				} else {
+					value -= moduloStep;
+				}
+			}
+
+			if (typeof this.max !== "undefined") {
+				while (value > this.max) {
+					value -= this.step;
+				}
+			}
+
+			value = parseFloat(this.valueFormatter.format(value));
+		}
+
+		value *= signMultiplier;
+
+		return value;
+	}
+
+	protected override get displayValue(): string {
+		const indeterminateValue = this.focused ? "" : indeterminatePlaceholder;
+
+		return this.indeterminate ? indeterminateValue : this.formattedValue;
+	}
+
+	protected clearNumberFormatterCache(): void {
+		this._numberFormatter = undefined;
+		this._numberParser = undefined;
+	}
+
+	/**
+	 * Get the number formatter instance.
+	 * This method initializes the number formatter if it is not already created.
+	 * It handles different formatting options and ensures that the formatter is
+	 * created with the correct language and options.
+	 *
+	 * @returns The number formatter instance.
+	 */
+	protected get numberFormatter(): NumberFormatter {
+		// Check if the number formatter or the focused number formatter is not initialized
+		if (!this._numberFormatter || !this._numberFormatterFocused) {
+			const {
+				style,
+				unit,
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				unitDisplay,
+				...formatOptionsNoUnit
+			} = this.formatOptions;
+
+			// If the style is not 'unit', set the style in formatOptionsNoUnit
+			if (style !== "unit") {
+				(formatOptionsNoUnit as Intl.NumberFormatOptions).style = style;
+			}
+
+			// Create a focused number formatter with the language and format options without unit
+			this._numberFormatterFocused = new NumberFormatter(
+				this.languageResolver.language,
+				formatOptionsNoUnit,
+			);
+
+			try {
+				// Try to create a number formatter with the full format options
+				this._numberFormatter = new NumberFormatter(
+					this.languageResolver.language,
+					this.formatOptions,
+				);
+				this._forcedUnit = "";
+				this._numberFormatter.format(1); // Test the formatter with a sample value
+			} catch (error) {
+				// If an error occurs and the style is 'unit', set the forced unit
+				if (style === "unit") {
+					this._forcedUnit = unit as string;
+				}
+
+				// Fallback to the focused number formatter
+				this._numberFormatter = this._numberFormatterFocused;
+			}
+		}
+
+		// Return the appropriate formatter based on the focused state
+		return this.focused ? this._numberFormatterFocused : this._numberFormatter;
+	}
+
+	protected clearValueFormatterCache(): void {
+		this._valueFormatter = undefined;
+	}
+	protected get valueFormatter(): NumberFormatter {
+		if (!this._valueFormatter) {
+			const digitsAfterDecimal = this.step
+				? this.step != Math.floor(this.step)
+					? this.step.toString().split(".")[1].length
+					: 0
+				: 0;
+
+			this._valueFormatter = new NumberFormatter("en", {
+				useGrouping: false,
+				maximumFractionDigits: digitsAfterDecimal,
+			});
+		}
+
+		return this._valueFormatter;
+	}
+	private _numberFormatter?: NumberFormatter;
+	private _numberFormatterFocused?: NumberFormatter;
+	private _valueFormatter?: NumberFormatter;
+	protected get numberParser(): NumberParser {
+		if (!this._numberParser || !this._numberParserFocused) {
+			const {
+				style,
+				unit,
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				unitDisplay,
+				...formatOptionsNoUnit
+			} = this.formatOptions;
+
+			if (style !== "unit") {
+				(formatOptionsNoUnit as Intl.NumberFormatOptions).style = style;
+			}
+
+			this._numberParserFocused = new NumberParser(
+				this.languageResolver.language,
+				formatOptionsNoUnit,
+			);
+
+			try {
+				this._numberParser = new NumberParser(
+					this.languageResolver.language,
+					this.formatOptions,
+				);
+				this._forcedUnit = "";
+				this._numberParser.parse("0");
+			} catch (error) {
+				if (style === "unit") {
+					this._forcedUnit = unit as string;
+				}
+
+				this._numberParser = this._numberParserFocused;
+			}
+		}
+
+		return this.focused ? this._numberParserFocused : this._numberParser;
+	}
+
+	applyFocusElementLabel = (value?: string): void => {
+		this.appliedLabel = value;
+	};
+
+	private _numberParser?: NumberParser;
+	private _numberParserFocused?: NumberParser;
+
+	protected override renderField(): TemplateResult {
+		this.autocomplete = "off";
+
+		return html`
+			${super.renderField()}
+			${this.hideStepper
+				? nothing
+				: html`
+						
+							
+							
+						
+					`}
+		`;
+	}
+
+	protected override update(changes: PropertyValues): void {
+		if (changes.has("formatOptions") || changes.has("resolvedLanguage")) {
+			this.clearNumberFormatterCache();
+		}
+
+		if (
+			changes.has("value") ||
+			changes.has("max") ||
+			changes.has("min") ||
+			changes.has("step")
+		) {
+			const value = this.numberParser.parse(
+				this.formattedValue.replace(this._forcedUnit, ""),
+			);
+
+			this.value = value;
+			this.clearValueFormatterCache();
+		}
+
+		super.update(changes);
+	}
+
+	public override willUpdate(changes: PropertyValues): void {
+		this.multiline = false;
+
+		if (changes.has(languageResolverUpdatedSymbol)) {
+			this.clearNumberFormatterCache();
+		}
+	}
+
+	private isComposing = false;
+
+	protected override firstUpdated(changes: PropertyValues): void {
+		super.firstUpdated(changes);
+		this.addEventListener("keydown", this.handleKeydown);
+		this.addEventListener("compositionstart", this.handleCompositionStart);
+		this.addEventListener("compositionend", this.handleCompositionEnd);
+	}
+
+	protected override updated(changes: PropertyValues): void {
+		if (!this.inputElement || !this.isConnected) {
+			// Prevent race conditions if inputElement is removed from DOM while a queued update is still running.
+			return;
+		}
+
+		if (changes.has("min") || changes.has("formatOptions")) {
+			const hasOnlyPositives = typeof this.min !== "undefined" && this.min >= 0;
+
+			const { maximumFractionDigits } = this.numberFormatter.resolvedOptions();
+			const hasDecimals = maximumFractionDigits && maximumFractionDigits > 0;
+
+			let inputMode = "numeric";
+
+			/* c8 ignore next 5 */
+			// iPhone doesn't have a minus sign in either numeric or decimal.
+			if (isIPhone() && !hasOnlyPositives) inputMode = "text";
+			else if (isIOS() && hasDecimals) inputMode = "decimal";
+			// Android numeric has both a decimal point and minus key. Decimal does not have a minus key.
+			else if (isAndroid() && hasDecimals && hasOnlyPositives)
+				inputMode = "decimal";
+
+			this.inputElement.inputMode = inputMode;
+		}
+
+		if (
+			changes.has("focused") &&
+			this.focused &&
+			!this.hasRecentlyReceivedPointerDown &&
+			!!this.formatOptions.unit
+		) {
+			// Normalize keyboard focus entry between unit and non-unit bearing Number Fields
+			this.setSelectionRange(0, this.displayValue.length);
+		}
+	}
 }
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 88529c5e54..9115920c61 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -8,10 +8,14 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
+import "@spectrum-web-components/accordion/sp-accordion.js";
 import "@spectrum-web-components/action-button/sp-action-button.js";
 import "@spectrum-web-components/action-group/sp-action-group.js";
 import { html, TemplateResult } from "@spectrum-web-components/base";
 import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { Button } from "@spectrum-web-components/button";
+import "@spectrum-web-components/button-group/sp-button-group.js";
 import "@spectrum-web-components/button/sp-button.js";
 import { DialogWrapper } from "@spectrum-web-components/dialog";
 import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
@@ -19,6 +23,10 @@ import "@spectrum-web-components/dialog/sp-dialog.js";
 import "@spectrum-web-components/field-label/sp-field-label.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu.js";
 import {
 	openOverlay,
 	Overlay,
@@ -29,17 +37,10 @@ import {
 	VirtualTrigger,
 } from "@spectrum-web-components/overlay";
 import "@spectrum-web-components/overlay/overlay-trigger.js";
-
-import "@spectrum-web-components/accordion/sp-accordion-item.js";
-import "@spectrum-web-components/accordion/sp-accordion.js";
-import "@spectrum-web-components/button-group/sp-button-group.js";
-import "@spectrum-web-components/menu/sp-menu-divider.js";
-import "@spectrum-web-components/menu/sp-menu-group.js";
-import "@spectrum-web-components/menu/sp-menu-item.js";
-import "@spectrum-web-components/menu/sp-menu.js";
 import "@spectrum-web-components/overlay/sp-overlay.js";
 import { Picker } from "@spectrum-web-components/picker";
 import "@spectrum-web-components/picker/sp-picker.js";
+import { Popover } from "@spectrum-web-components/popover";
 import "@spectrum-web-components/popover/sp-popover.js";
 import "@spectrum-web-components/radio/sp-radio-group.js";
 import "@spectrum-web-components/radio/sp-radio.js";
@@ -47,11 +48,8 @@ import "@spectrum-web-components/slider/sp-slider.js";
 import "@spectrum-web-components/theme/sp-theme.js";
 import "@spectrum-web-components/theme/src/themes.js";
 import "@spectrum-web-components/tooltip/sp-tooltip.js";
-import "../../../projects/story-decorator/src/types.js";
-
-import { Button } from "@spectrum-web-components/button";
-import { Popover } from "@spectrum-web-components/popover";
 import { render } from "lit-html";
+import "../../../projects/story-decorator/src/types.js";
 import "./overlay-story-components.js";
 import { PopoverContent } from "./overlay-story-components.js";
 
@@ -659,8 +657,6 @@ class DefinedOverlayReady extends HTMLElement {
 	ready!: (value: boolean | PromiseLike) => void;
 
 	connectedCallback(): void {
-		if (ifDefined(this.ready)) return;
-
 		this.readyPromise = new Promise((res) => {
 			this.ready = res;
 			this.setup();

From ed382d5b8b347031a91cfcf78ae18805874bdd2a Mon Sep 17 00:00:00 2001
From: Casey Eickhoff 
Date: Fri, 20 Dec 2024 12:23:23 -0700
Subject: [PATCH 6/9] chore: updates eslint config in projects and tools

---
 .eslintrc.json                                | 458 ++++-----
 .prettierrc.yaml                              |   2 +-
 .vscode/settings.json                         | 372 +++----
 packages/.eslintrc.json                       | 880 ++++++++++-------
 packages/overlay/src/OverlayPopover.ts        | 491 +++++-----
 packages/tags/src/Tag.ts                      | 348 +++----
 projects/documentation/e2e/published.spec.ts  |  73 +-
 projects/documentation/src/components.ts      | 122 +--
 .../src/components/adobe-logo.ts              |  60 +-
 .../src/components/code-example.ts            | 395 ++++----
 .../src/components/copy-to-clipboard.ts       | 149 +--
 .../src/components/demo-container.ts          |  77 +-
 .../documentation/src/components/layout.ts    | 919 +++++++++---------
 .../src/components/search-index.ts            | 134 +--
 .../src/components/side-nav-search.ts         | 387 ++++----
 .../documentation/src/components/side-nav.ts  | 140 +--
 projects/documentation/src/global.d.ts        |  61 +-
 projects/documentation/src/index.ts           |  24 +-
 projects/documentation/src/router.ts          |  72 +-
 projects/documentation/src/utils/templates.ts |  22 +-
 tools/.eslintrc.json                          | 386 +++++---
 21 files changed, 2960 insertions(+), 2612 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 9229251980..e1d698cad8 100755
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,225 +1,237 @@
 {
-	"env": {
-		"browser": true,
-		"es6": true,
-		"node": true
-	},
-	"extends": [
-		"plugin:lit-a11y/recommended",
-		"plugin:require-extensions/recommended",
-		"eslint:recommended",
-		"plugin:@typescript-eslint/recommended"
-	],
-	"overrides": [
-		{
-			"files": ["tasks/*", "scripts/*"],
-			"rules": {
-				"no-console": ["off"]
-			}
-		},
-		{
-			"extends": ["plugin:jsonc/recommended-with-jsonc"],
-			"files": ["*.json"],
-			"parser": "jsonc-eslint-parser",
-			"rules": {
-				"jsonc/sort-keys": [
-					"warn",
-					{
-						// Hits the all properties
-						"hasProperties": ["type"],
-						"order": [
-							"type",
-							"properties",
-							"items",
-							"required",
-							"minItems",
-							"additionalProperties",
-							"additionalItems"
-						],
-						"pathPattern": ".*"
-					},
-					{
-						"order": {
-							"type": "asc"
-						},
-						"pathPattern": ".*"
-					}
-				],
-				"notice/notice": 0
-			}
-		},
-		{
-			"files": ["package.json"],
-			"rules": {
-				"jsonc/sort-keys": [
-					"warn",
-					{
-						"order": [
-							"$schema",
-							"private",
-							"name",
-							"version",
-							"description",
-							"license",
-							"author",
-							"maintainers",
-							"contributors",
-							"homepage",
-							"repository",
-							"bugs",
-							"type",
-							"exports",
-							"main",
-							"module",
-							"browser",
-							"man",
-							"preferGlobal",
-							"bin",
-							"files",
-							"directories",
-							"scripts",
-							"config",
-							"sideEffects",
-							"types",
-							"typings",
-							"workspaces",
-							"resolutions",
-							"dependencies",
-							"bundleDependencies",
-							"bundledDependencies",
-							"peerDependencies",
-							"peerDependenciesMeta",
-							"optionalDependencies",
-							"devDependencies",
-							"keywords",
-							"engines",
-							"engineStrict",
-							"os",
-							"cpu",
-							"publishConfig"
-						],
-						"pathPattern": "^$"
-					},
-					{
-						"order": ["type", "url", "directory"],
-						"pathPattern": "^repository$"
-					},
-					{
-						"order": {
-							"type": "asc"
-						},
-						"pathPattern": ".*"
-					}
-				]
-			}
-		},
-		{
-			"files": [
-				"packages/*/stories/*.js",
-				"storybook/*.js",
-				"storybook/**/*.js"
-			],
-			"parserOptions": {
-				"ecmaFeatures": {
-					"impliedStrict": true
-				},
-				"ecmaVersion": "latest",
-				"sourceType": "module"
-			}
-		}
-	],
-	"parser": "@typescript-eslint/parser",
-	"parserOptions": {
-		"ecmaVersion": 2020,
-		"sourceType": "module"
-	},
-	"plugins": [
-		"@spectrum-web-components",
-		"@stylistic",
-		"@typescript-eslint",
-		"import",
-		"notice",
-		"require-extensions"
-	],
-	"root": true,
-	"rules": {
-		"@spectrum-web-components/prevent-argument-names": [
-			"error",
-			["e", "ev", "evt", "err"]
-		],
-		"@stylistic/padding-line-between-statements": [
-			"error",
-			{
-				"blankLine": "always",
-				"next": "return",
-				"prev": "*"
-			}
-		],
-		"curly": ["error", "all"],
-		"func-call-spacing": ["warn", "never"],
-		"import/extensions": [
-			"error",
-			"ignorePackages",
-			{
-				"ts": "never"
-			}
-		],
-		"import/prefer-default-export": "off",
-		"indent": [
-			"warn",
-			"tab",
-			{
-				"SwitchCase": 1,
-				"ignoredNodes": ["TemplateLiteral *"]
-			}
-		],
-		"linebreak-style": ["warn", "unix"],
-		"lit-a11y/click-events-have-key-events": [
-			"error",
-			{
-				"allowList": [
-					"sp-button",
-					"sp-action-button",
-					"sp-checkbox",
-					"sp-radio",
-					"sp-switch",
-					"sp-menu-item",
-					"sp-clear-button",
-					"sp-underlay"
-				]
-			}
-		],
-		"no-console": [
-			"warn",
-			{
-				"allow": ["warn", "error"]
-			}
-		],
-		"no-debugger": 2,
-		"notice/notice": [
-			"error",
-			{
-				"mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.",
-				"templateFile": "config/license.js"
-			}
-		],
-		"quotes": [
-			"warn",
-			"double",
-			{
-				"avoidEscape": true
-			}
-		],
-		"semi": ["warn", "always"],
-		"sort-imports": [
-			"error",
-			{
-				"allowSeparatedGroups": false,
-				"ignoreCase": true,
-				"ignoreDeclarationSort": true,
-				"ignoreMemberSort": false
-			}
-		],
-		"space-before-blocks": ["warn", "always"]
-	}
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:lit-a11y/recommended",
+    "plugin:require-extensions/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "overrides": [
+    {
+      "files": ["tasks/*", "scripts/*"],
+      "rules": {
+        "no-console": ["off"]
+      }
+    },
+    {
+      "extends": ["plugin:jsonc/recommended-with-jsonc"],
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "jsonc/sort-keys": [
+          "warn",
+          {
+            // Hits the all properties
+            "hasProperties": ["type"],
+            "order": [
+              "type",
+              "properties",
+              "items",
+              "required",
+              "minItems",
+              "additionalProperties",
+              "additionalItems"
+            ],
+            "pathPattern": ".*"
+          },
+          {
+            "order": {
+              "type": "asc"
+            },
+            "pathPattern": ".*"
+          }
+        ],
+        "notice/notice": 0
+      }
+    },
+    {
+      "files": ["package.json"],
+      "rules": {
+        "jsonc/sort-keys": [
+          "warn",
+          {
+            "order": [
+              "$schema",
+              "private",
+              "name",
+              "version",
+              "description",
+              "license",
+              "author",
+              "maintainers",
+              "contributors",
+              "homepage",
+              "repository",
+              "bugs",
+              "type",
+              "exports",
+              "main",
+              "module",
+              "browser",
+              "man",
+              "preferGlobal",
+              "bin",
+              "files",
+              "directories",
+              "scripts",
+              "config",
+              "sideEffects",
+              "types",
+              "typings",
+              "workspaces",
+              "resolutions",
+              "dependencies",
+              "bundleDependencies",
+              "bundledDependencies",
+              "peerDependencies",
+              "peerDependenciesMeta",
+              "optionalDependencies",
+              "devDependencies",
+              "keywords",
+              "engines",
+              "engineStrict",
+              "os",
+              "cpu",
+              "publishConfig"
+            ],
+            "pathPattern": "^$"
+          },
+          {
+            "order": ["type", "url", "directory"],
+            "pathPattern": "^repository$"
+          },
+          {
+            "order": {
+              "type": "asc"
+            },
+            "pathPattern": ".*"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "packages/*/stories/*.js",
+        "tools/*/stories/*.js",
+        "storybook/*.js",
+        "storybook/**/*.js"
+      ],
+      "parserOptions": {
+        "ecmaFeatures": {
+          "impliedStrict": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@spectrum-web-components",
+    "@stylistic",
+    "@typescript-eslint",
+    "import",
+    "notice",
+    "require-extensions"
+  ],
+  "root": true,
+  "rules": {
+    "@spectrum-web-components/prevent-argument-names": [
+      "error",
+      ["e", "ev", "evt", "err"]
+    ],
+    "@stylistic/padding-line-between-statements": [
+      "error",
+      {
+        "blankLine": "always",
+        "next": ["return", "if", "try", "switch"],
+        "prev": "*"
+      },
+      {
+        "blankLine": "always",
+        "next": "*",
+        "prev": ["const", "let", "var", "if", "try", "switch"]
+      },
+      {
+        "blankLine": "any",
+        "next": ["const", "let", "var"],
+        "prev": ["const", "let", "var"]
+      }
+    ],
+    "curly": ["error", "all"],
+    "func-call-spacing": ["warn", "never"],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never"
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "indent": [
+      "warn",
+      2,
+      {
+        "SwitchCase": 1,
+        "ignoredNodes": ["TemplateLiteral *"]
+      }
+    ],
+    "linebreak-style": ["warn", "unix"],
+    "lit-a11y/click-events-have-key-events": [
+      "error",
+      {
+        "allowList": [
+          "sp-button",
+          "sp-action-button",
+          "sp-checkbox",
+          "sp-radio",
+          "sp-switch",
+          "sp-menu-item",
+          "sp-clear-button",
+          "sp-underlay"
+        ]
+      }
+    ],
+    "no-console": [
+      "warn",
+      {
+        "allow": ["warn", "error"]
+      }
+    ],
+    "no-debugger": 2,
+    "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
+    "notice/notice": [
+      "error",
+      {
+        "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.",
+        "templateFile": "config/license.js"
+      }
+    ],
+    "quotes": [
+      "warn",
+      "double",
+      {
+        "avoidEscape": true
+      }
+    ],
+    "semi": ["warn", "always"],
+    "sort-imports": [
+      "error",
+      {
+        // "allowSeparatedGroups": false,
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true
+        // "ignoreMemberSort": false
+      }
+    ],
+    "space-before-blocks": ["warn", "always"]
+  }
 }
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index c79693b0b8..29bb40215a 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -1,6 +1,6 @@
 printWidth: 80
 tabWidth: 2
-useTabs: true
+useTabs: false
 # semi: true
 singleQuote: false
 # trailingComma: es5
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8c107880c0..5735fef084 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,188 +1,188 @@
 {
-	"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"
-		},
-		"packages/**/*.d.ts": {
-			"when": "$(basename).ts"
-		},
-		"tools/**/*.js.map": true,
-		"tools/**/*.js": {
-			"when": "$(basename).ts"
-		},
-		"tools/**/*.dev.js": {
-			"when": "$(basename).js"
-		},
-		"tools/**/*.d.ts": {
-			"when": "$(basename).ts"
-		},
-		"**/*.test-vrt.ts": true
-	},
-	"editor.tabSize": 2,
-	"editor.defaultFormatter": "dbaeumer.vscode-eslint",
-	"editor.formatOnType": false,
-	"editor.formatOnPaste": true,
-	"editor.formatOnSave": true,
-	"editor.formatOnSaveMode": "file",
-	"editor.insertSpaces": false,
-	"editor.detectIndentation": true,
-	"typescript.tsdk": "node_modules/typescript/lib",
-	"lit-plugin.strict": true,
-	"[css]": {
-		"editor.codeActionsOnSave": {
-			"source.fixAll.stylelint": "explicit"
-		},
-		"editor.defaultFormatter": "stylelint.vscode-stylelint"
-	},
-	"[typescript]": {
-		"editor.codeActionsOnSave": {
-			"source.organizeImports": "explicit"
-		},
-		"editor.colorDecorators": true,
-		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
-	},
-	"[javascript]": {
-		"editor.codeActionsOnSave": {
-			"source.organizeImports": "explicit"
-		},
-		"editor.colorDecorators": true,
-		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
-	},
-	"[markdown]": {
-		"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
-	},
-	"colorInfo.languages": [
-		{
-			"colors": "css",
-			"selector": "css"
-		},
-		{
-			"colors": "css",
-			"selector": "postcss"
-		},
-		{
-			"colors": "css",
-			"selector": "javascript"
-		},
-		{
-			"colors": "css",
-			"selector": "js"
-		},
-		{
-			"colors": "css",
-			"selector": "jsx"
-		},
-		{
-			"colors": "css",
-			"selector": "json"
-		},
-		{
-			"colors": "css",
-			"selector": "svg"
-		},
-		{
-			"colors": "css",
-			"selector": "markdown"
-		},
-		{
-			"colors": "css",
-			"selector": "md"
-		},
-		{
-			"colors": "css",
-			"selector": "mdx"
-		},
-		{
-			"colors": "css",
-			"selector": "html"
-		},
-		{
-			"colors": "css",
-			"selector": "yaml"
-		}
-	],
-	"docthis.includeDescriptionTag": true,
-	"docthis.inferTypesFromNames": true,
-	"docthis.returnsTag": true,
-	"editor.largeFileOptimizations": true,
-	"editor.renderControlCharacters": true,
-	"eslint.format.enable": true,
-	"eslint.useESLintClass": true,
-	"eslint.validate": [
-		"javascript",
-		"javascriptreact",
-		"typescript",
-		"typescriptreact"
-	],
-	"files.associations": {
-		"*.css": "postcss"
-	},
-	"files.insertFinalNewline": true,
-	"files.trimFinalNewlines": true,
-	"files.trimTrailingWhitespace": true,
-	"github.copilot.enable": {
-		"*": true,
-		"plaintext": false,
-		"scminput": false
-	},
-	"githubIssues.createIssueTriggers": ["TODO", "todo", "FIXME", "ISSUE", "BUG"],
-	"githubIssues.issueBranchTitle": "${author}/${sanitizedIssueTitle}-gh-${issueNumber}",
-	"githubIssues.queries": [
-		{
-			"label": "My issues",
-			"query": "default"
-		},
-		{
-			"label": "Created issues",
-			"query": "author:${user} state:open repo:${owner}/${repository} sort:created-desc"
-		},
-		{
-			"label": "Recent issues",
-			"query": "state:open repo:${owner}/${repository} sort:updated-desc"
-		}
-	],
-	"githubPullRequests.queries": [
-		{
-			"label": "Waiting for my review",
-			"query": "is:open review-requested:${user}"
-		},
-		{
-			"label": "Assigned to me",
-			"query": "is:open assignee:${user}"
-		},
-		{
-			"label": "Created by me",
-			"query": "is:open author:${user}"
-		},
-		{
-			"label": "Mentioned me",
-			"query": "is:open mentions:${user}"
-		}
-	],
-	"js/ts.implicitProjectConfig.experimentalDecorators": true,
-	"postcss.validate": false,
-	"prettier.configPath": ".prettierrc.yaml",
-	"prettier.ignorePath": ".prettierignore",
-	"prettier.prettierPath": "node_modules/prettier",
-	"stylelint.enable": true,
-	"stylelint.packageManager": "yarn",
-	"stylelint.reportDescriptionlessDisables": true,
-	"stylelint.reportInvalidScopeDisables": true,
-	"stylelint.reportNeedlessDisables": true,
-	"stylelint.validate": ["css", "postcss"],
-	"storyExplorer.storiesGlobs": [
-		"packages/*/stories/*.stories.js",
-		"packages/*/stories/*.mdx",
-		"tools/*/stories/*.stories.js",
-		"tools/*/stories/*.mdx"
-	],
-	"workbench.editor.historyBasedLanguageDetection": false
+  "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"
+    },
+    "packages/**/*.d.ts": {
+      "when": "$(basename).ts"
+    },
+    "tools/**/*.js.map": true,
+    "tools/**/*.js": {
+      "when": "$(basename).ts"
+    },
+    "tools/**/*.dev.js": {
+      "when": "$(basename).js"
+    },
+    "tools/**/*.d.ts": {
+      "when": "$(basename).ts"
+    },
+    "**/*.test-vrt.ts": true
+  },
+  "editor.tabSize": 2,
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.formatOnType": false,
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "editor.insertSpaces": true,
+  "editor.detectIndentation": false,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "lit-plugin.strict": true,
+  "[css]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.stylelint": "explicit"
+    },
+    "editor.defaultFormatter": "stylelint.vscode-stylelint"
+  },
+  "[typescript]": {
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": "explicit"
+    },
+    "editor.colorDecorators": true,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[javascript]": {
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": "explicit"
+    },
+    "editor.colorDecorators": true,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
+  },
+  "colorInfo.languages": [
+    {
+      "colors": "css",
+      "selector": "css"
+    },
+    {
+      "colors": "css",
+      "selector": "postcss"
+    },
+    {
+      "colors": "css",
+      "selector": "javascript"
+    },
+    {
+      "colors": "css",
+      "selector": "js"
+    },
+    {
+      "colors": "css",
+      "selector": "jsx"
+    },
+    {
+      "colors": "css",
+      "selector": "json"
+    },
+    {
+      "colors": "css",
+      "selector": "svg"
+    },
+    {
+      "colors": "css",
+      "selector": "markdown"
+    },
+    {
+      "colors": "css",
+      "selector": "md"
+    },
+    {
+      "colors": "css",
+      "selector": "mdx"
+    },
+    {
+      "colors": "css",
+      "selector": "html"
+    },
+    {
+      "colors": "css",
+      "selector": "yaml"
+    }
+  ],
+  "docthis.includeDescriptionTag": true,
+  "docthis.inferTypesFromNames": true,
+  "docthis.returnsTag": true,
+  "editor.largeFileOptimizations": true,
+  "editor.renderControlCharacters": true,
+  "eslint.format.enable": true,
+  "eslint.useESLintClass": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "files.associations": {
+    "*.css": "postcss"
+  },
+  "files.insertFinalNewline": true,
+  "files.trimFinalNewlines": true,
+  "files.trimTrailingWhitespace": true,
+  "github.copilot.enable": {
+    "*": true,
+    "plaintext": false,
+    "scminput": false
+  },
+  "githubIssues.createIssueTriggers": ["TODO", "todo", "FIXME", "ISSUE", "BUG"],
+  "githubIssues.issueBranchTitle": "${author}/${sanitizedIssueTitle}-gh-${issueNumber}",
+  "githubIssues.queries": [
+    {
+      "label": "My issues",
+      "query": "default"
+    },
+    {
+      "label": "Created issues",
+      "query": "author:${user} state:open repo:${owner}/${repository} sort:created-desc"
+    },
+    {
+      "label": "Recent issues",
+      "query": "state:open repo:${owner}/${repository} sort:updated-desc"
+    }
+  ],
+  "githubPullRequests.queries": [
+    {
+      "label": "Waiting for my review",
+      "query": "is:open review-requested:${user}"
+    },
+    {
+      "label": "Assigned to me",
+      "query": "is:open assignee:${user}"
+    },
+    {
+      "label": "Created by me",
+      "query": "is:open author:${user}"
+    },
+    {
+      "label": "Mentioned me",
+      "query": "is:open mentions:${user}"
+    }
+  ],
+  "js/ts.implicitProjectConfig.experimentalDecorators": true,
+  "postcss.validate": false,
+  "prettier.configPath": ".prettierrc.yaml",
+  "prettier.ignorePath": ".prettierignore",
+  "prettier.prettierPath": "node_modules/prettier",
+  "stylelint.enable": true,
+  "stylelint.packageManager": "yarn",
+  "stylelint.reportDescriptionlessDisables": true,
+  "stylelint.reportInvalidScopeDisables": true,
+  "stylelint.reportNeedlessDisables": true,
+  "stylelint.validate": ["css", "postcss"],
+  "storyExplorer.storiesGlobs": [
+    "packages/*/stories/*.stories.js",
+    "packages/*/stories/*.mdx",
+    "tools/*/stories/*.stories.js",
+    "tools/*/stories/*.mdx"
+  ],
+  "workbench.editor.historyBasedLanguageDetection": false
 }
diff --git a/packages/.eslintrc.json b/packages/.eslintrc.json
index 7818a2d9f4..8d0d82b4df 100644
--- a/packages/.eslintrc.json
+++ b/packages/.eslintrc.json
@@ -1,377 +1,507 @@
 {
-	"root": true,
-	"env": {
-		"browser": true,
-		"node": true,
-		"es6": true
-	},
-	"parser": "@typescript-eslint/parser",
-	"plugins": [
-		"@typescript-eslint",
-		"notice",
-		"@spectrum-web-components",
-		"@stylistic",
-		"jsdoc",
-		"lit-a11y"
-	],
-	"extends": [
-		"plugin:lit-a11y/recommended",
-		"plugin:jsdoc/recommended-typescript",
-		"eslint:recommended",
-		"plugin:@typescript-eslint/recommended"
-	],
-	"ignorePatterns": ["packages/**/*.css.ts"],
-	"settings": {
-		"jsdoc": {
-			"tagNamePreference": {
-				"attr": "attribute"
-			}
-		}
-	},
-	"rules": {
-		"no-debugger": 2,
-		"no-console": [
-			"error",
-			{
-				"allow": ["warn", "error"]
-			}
-		],
-		"jsdoc/check-tag-names": [
-			"warn",
-			{
-				"definedTags": ["element", "slot", "attribute", "csspart"]
-			}
-		],
-		"jsdoc/require-param": 0,
-		"jsdoc/require-returns": 0,
-		"jsdoc/informative-docs": 1,
-		"jsdoc/no-bad-blocks": 1,
-		"jsdoc/sort-tags": [
-			"warn",
-			{
-				"tagSequence": [
-					{
-						"tags": [
-							// Brief descriptions
-							"summary",
-							"typeSummary"
-						]
-					},
-					{
-						"tags": [
-							// Module/file-level
-							"element",
-							"module",
-							"exports",
-							"file",
-							"fileoverview",
-							"overview",
-							"import"
-						]
-					},
-					{
-						"tags": [
-							// Identifying (name, type)
-							"typedef",
-							"interface",
-							"record",
-							"template",
-							"name",
-							"kind",
-							"type",
-							"alias",
-							"external",
-							"host",
-							"callback",
-							"func",
-							"function",
-							"method",
-							"class",
-							"constructor"
-						]
-					},
-					{
-						"tags": [
-							// Relationships
-							"modifies",
-							"mixes",
-							"mixin",
-							"mixinClass",
-							"mixinFunction",
-							"namespace",
-							"borrows",
-							"constructs",
-							"lends",
-							"implements",
-							"requires"
-						]
-					},
-					{
-						"tags": [
-							// Long descriptions
-							"desc",
-							"description",
-							"classdesc",
-							"tutorial",
-							"copyright",
-							"license"
-						]
-					},
-					{
-						"tags": [
-							// Simple annotations
-							"const",
-							"constant",
-							"final",
-							"global",
-							"readonly",
-							"abstract",
-							"virtual",
-							"var",
-							"member",
-							"memberof",
-							"memberof!",
-							"inner",
-							"instance",
-							"inheritdoc",
-							"inheritDoc",
-							"override",
-							"hideconstructor"
-						]
-					},
-					{
-						"tags": [
-							// Core function/object info
-							"param",
-							"arg",
-							"argument",
-							"prop",
-							"property",
-							"slot",
-							"return",
-							"returns"
-						]
-					},
-					{
-						"tags": [
-							// Important behavior details
-							"async",
-							"generator",
-							"default",
-							"defaultvalue",
-							"enum",
-							"augments",
-							"extends",
-							"throws",
-							"exception",
-							"yield",
-							"yields",
-							"event",
-							"fires",
-							"emits",
-							"listens",
-							"this"
-						]
-					},
-					{
-						"tags": [
-							// Access
-							"static",
-							"private",
-							"protected",
-							"public",
-							"access",
-							"package"
-						]
-					},
-					{ "tags": ["-other"] },
-					{
-						"tags": [
-							// Supplementary descriptions
-							"see",
-							"example"
-						]
-					},
-					{
-						"tags": [
-							// Other Closure (undocumented) metadata
-							"closurePrimitive",
-							"customElement",
-							"expose",
-							"hidden",
-							"idGenerator",
-							"meaning",
-							"ngInject",
-							"owner",
-							"wizaction"
-						]
-					},
-					{
-						"tags": [
-							// Other Closure (documented) metadata
-							"define",
-							"dict",
-							"export",
-							"externs",
-							"implicitCast",
-							"noalias",
-							"nocollapse",
-							"nocompile",
-							"noinline",
-							"nosideeffects",
-							"polymer",
-							"polymerBehavior",
-							"preserve",
-							"struct",
-							"suppress",
-							"unrestricted"
-						]
-					},
-					{
-						"tags": [
-							// Non-Closure metadata
-							"ignore",
-							"author",
-							"version",
-							"variation",
-							"since",
-							"deprecated",
-							"todo"
-						]
-					}
-				],
-				"alphabetizeExtras": true
-			}
-		],
-		"jsdoc/tag-lines": ["warn", "any", { "startLines": 1, "endLines": 1 }],
-		"jsdoc/no-blank-blocks": [
-			"warn",
-			{
-				"enableFixer": true
-			}
-		],
-		"jsdoc/require-hyphen-before-param-description": 1,
-		"@spectrum-web-components/prevent-argument-names": [
-			"error",
-			["e", "ev", "evt", "err"]
-		],
-		"@spectrum-web-components/document-active-element": ["error"],
-		"notice/notice": [
-			"error",
-			{
-				"mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.",
-				"templateFile": "config/license.js"
-			}
-		],
-		"@typescript-eslint/explicit-function-return-type": [
-			1,
-			{
-				"allowExpressions": true
-			}
-		],
-		"sort-imports": [
-			"error",
-			{
-				"ignoreCase": true,
-				"ignoreDeclarationSort": true
-				// "ignoreMemberSort": false,
-				// "allowSeparatedGroups": false
-			}
-		],
-		"lit-a11y/click-events-have-key-events": [
-			"error",
-			{
-				"allowList": [
-					"sp-button",
-					"sp-action-button",
-					"sp-checkbox",
-					"sp-radio",
-					"sp-switch",
-					"sp-menu-item",
-					"sp-clear-button",
-					"sp-underlay"
-				]
-			}
-		],
-		"@typescript-eslint/no-unused-vars": [
-			"error",
-			{
-				"argsIgnorePattern": "^_"
-			}
-		],
-		"@stylistic/padding-line-between-statements": [
-			"error",
-			{
-				"blankLine": "always",
-				"prev": "*",
-				"next": ["return", "if", "try", "switch"]
-			},
-			{
-				"blankLine": "always",
-				"prev": ["const", "let", "var", "if", "try", "switch"],
-				"next": "*"
-			},
-			{
-				"blankLine": "any",
-				"prev": ["const", "let", "var"],
-				"next": ["const", "let", "var"]
-			}
-		]
-	},
-	"overrides": [
-		{
-			"files": [
-				"*.test.ts",
-				"*.stories.ts",
-				"**/benchmark/*.ts",
-				"**/test/*.ts"
-			],
-			"rules": {
-				"@spectrum-web-components/document-active-element": ["off"],
-				"lit-a11y/no-autofocus": ["off"],
-				"lit-a11y/tabindex-no-positive": ["off"],
-				"jsdoc/require-jsdoc": 0
-			}
-		},
-		{
-			"files": ["**/icons/*.ts", "**/src/elements/*.ts"],
-			"rules": {
-				"sort-imports": ["off"],
-				"@stylistic/padding-line-between-statements": 0
-			}
-		},
-		{
-			"files": ["**/stories/*"],
-			"rules": {
-				"jsdoc/require-jsdoc": 0
-			}
-		},
-		{
-			"files": ["*.stories.ts"],
-			"rules": {
-				"no-console": ["off"]
-			}
-		},
-		{
-			"files": ["Picker.ts"],
-			"rules": {
-				"lit-a11y/click-events-have-key-events": [
-					"error",
-					{
-						"allowList": [
-							"sp-button",
-							"sp-action-button",
-							"sp-checkbox",
-							"sp-radio",
-							"sp-switch",
-							"sp-menu-item",
-							"sp-clear-button",
-							"sp-underlay",
-							"sp-popover"
-						]
-					}
-				]
-			}
-		}
-	]
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:lit-a11y/recommended",
+    "plugin:jsdoc/recommended-typescript",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "ignorePatterns": ["packages/**/*.css.ts"],
+  "overrides": [
+    {
+      "files": [
+        "*.test.ts",
+        "*.stories.ts",
+        "**/benchmark/*.ts",
+        "**/test/*.ts"
+      ],
+      "rules": {
+        "@spectrum-web-components/document-active-element": ["off"],
+        "jsdoc/require-jsdoc": 0,
+        "lit-a11y/no-autofocus": ["off"],
+        "lit-a11y/tabindex-no-positive": ["off"]
+      }
+    },
+    {
+      "files": ["**/icons/*.ts", "**/src/elements/*.ts"],
+      "rules": {
+        "@stylistic/padding-line-between-statements": 0,
+        "sort-imports": ["off"]
+      }
+    },
+    {
+      "files": ["**/stories/*"],
+      "rules": {
+        "jsdoc/require-jsdoc": 0
+      }
+    },
+    {
+      "files": ["*.stories.ts"],
+      "rules": {
+        "no-console": ["off"]
+      }
+    },
+    {
+      "files": ["Picker.ts"],
+      "rules": {
+        "lit-a11y/click-events-have-key-events": [
+          "error",
+          {
+            "allowList": [
+              "sp-button",
+              "sp-action-button",
+              "sp-checkbox",
+              "sp-radio",
+              "sp-switch",
+              "sp-menu-item",
+              "sp-clear-button",
+              "sp-underlay",
+              "sp-popover"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "extends": ["plugin:jsonc/recommended-with-jsonc"],
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "jsonc/sort-keys": [
+          "warn",
+          {
+            // Hits the all properties
+            "hasProperties": ["type"],
+            "order": [
+              "type",
+              "properties",
+              "items",
+              "required",
+              "minItems",
+              "additionalProperties",
+              "additionalItems"
+            ],
+            "pathPattern": ".*"
+          },
+          {
+            "order": {
+              "type": "asc"
+            },
+            "pathPattern": ".*"
+          }
+        ],
+        "notice/notice": 0
+      }
+    },
+    {
+      "files": ["package.json"],
+      "rules": {
+        "jsonc/sort-keys": [
+          "warn",
+          {
+            "order": [
+              "$schema",
+              "private",
+              "name",
+              "version",
+              "description",
+              "license",
+              "author",
+              "maintainers",
+              "contributors",
+              "homepage",
+              "repository",
+              "bugs",
+              "type",
+              "exports",
+              "main",
+              "module",
+              "browser",
+              "man",
+              "preferGlobal",
+              "bin",
+              "files",
+              "directories",
+              "scripts",
+              "config",
+              "sideEffects",
+              "types",
+              "typings",
+              "workspaces",
+              "resolutions",
+              "dependencies",
+              "bundleDependencies",
+              "bundledDependencies",
+              "peerDependencies",
+              "peerDependenciesMeta",
+              "optionalDependencies",
+              "devDependencies",
+              "keywords",
+              "engines",
+              "engineStrict",
+              "os",
+              "cpu",
+              "publishConfig"
+            ],
+            "pathPattern": "^$"
+          },
+          {
+            "order": ["type", "url", "directory"],
+            "pathPattern": "^repository$"
+          },
+          {
+            "order": {
+              "type": "asc"
+            },
+            "pathPattern": ".*"
+          }
+        ]
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "notice",
+    "import",
+    "@spectrum-web-components",
+    "@stylistic",
+    "jsdoc",
+    "lit-a11y"
+  ],
+  "root": true,
+  "rules": {
+    "@spectrum-web-components/document-active-element": ["error"],
+    "@spectrum-web-components/prevent-argument-names": [
+      "error",
+      ["e", "ev", "evt", "err"]
+    ],
+    "@stylistic/padding-line-between-statements": [
+      "error",
+      {
+        "blankLine": "always",
+        "next": ["return", "if", "try", "switch"],
+        "prev": "*"
+      },
+      {
+        "blankLine": "always",
+        "next": "*",
+        "prev": ["const", "let", "var", "if", "try", "switch"]
+      },
+      {
+        "blankLine": "any",
+        "next": ["const", "let", "var"],
+        "prev": ["const", "let", "var"]
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": [
+      1,
+      {
+        "allowExpressions": true
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "curly": ["error", "all"],
+    "func-call-spacing": ["warn", "never"],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never"
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "indent": [
+      "warn",
+      2,
+      {
+        "SwitchCase": 1,
+        "ignoredNodes": ["TemplateLiteral *"]
+      }
+    ],
+    "jsdoc/check-tag-names": [
+      "warn",
+      {
+        "definedTags": ["element", "slot", "attribute", "csspart"]
+      }
+    ],
+    "jsdoc/informative-docs": 1,
+    "jsdoc/no-bad-blocks": 1,
+    "jsdoc/no-blank-blocks": [
+      "warn",
+      {
+        "enableFixer": true
+      }
+    ],
+    "jsdoc/require-hyphen-before-param-description": 1,
+    "jsdoc/require-param": 0,
+    "jsdoc/require-returns": 0,
+    "jsdoc/sort-tags": [
+      "warn",
+      {
+        "alphabetizeExtras": true,
+        "tagSequence": [
+          {
+            "tags": [
+              // Brief descriptions
+              "summary",
+              "typeSummary"
+            ]
+          },
+          {
+            "tags": [
+              // Module/file-level
+              "element",
+              "module",
+              "exports",
+              "file",
+              "fileoverview",
+              "overview",
+              "import"
+            ]
+          },
+          {
+            "tags": [
+              // Identifying (name, type)
+              "typedef",
+              "interface",
+              "record",
+              "template",
+              "name",
+              "kind",
+              "type",
+              "alias",
+              "external",
+              "host",
+              "callback",
+              "func",
+              "function",
+              "method",
+              "class",
+              "constructor"
+            ]
+          },
+          {
+            "tags": [
+              // Relationships
+              "modifies",
+              "mixes",
+              "mixin",
+              "mixinClass",
+              "mixinFunction",
+              "namespace",
+              "borrows",
+              "constructs",
+              "lends",
+              "implements",
+              "requires"
+            ]
+          },
+          {
+            "tags": [
+              // Long descriptions
+              "desc",
+              "description",
+              "classdesc",
+              "tutorial",
+              "copyright",
+              "license"
+            ]
+          },
+          {
+            "tags": [
+              // Simple annotations
+              "const",
+              "constant",
+              "final",
+              "global",
+              "readonly",
+              "abstract",
+              "virtual",
+              "var",
+              "member",
+              "memberof",
+              "memberof!",
+              "inner",
+              "instance",
+              "inheritdoc",
+              "inheritDoc",
+              "override",
+              "hideconstructor"
+            ]
+          },
+          {
+            "tags": [
+              // Core function/object info
+              "param",
+              "arg",
+              "argument",
+              "prop",
+              "property",
+              "slot",
+              "return",
+              "returns"
+            ]
+          },
+          {
+            "tags": [
+              // Important behavior details
+              "async",
+              "generator",
+              "default",
+              "defaultvalue",
+              "enum",
+              "augments",
+              "extends",
+              "throws",
+              "exception",
+              "yield",
+              "yields",
+              "event",
+              "fires",
+              "emits",
+              "listens",
+              "this"
+            ]
+          },
+          {
+            "tags": [
+              // Access
+              "static",
+              "private",
+              "protected",
+              "public",
+              "access",
+              "package"
+            ]
+          },
+          { "tags": ["-other"] },
+          {
+            "tags": [
+              // Supplementary descriptions
+              "see",
+              "example"
+            ]
+          },
+          {
+            "tags": [
+              // Other Closure (undocumented) metadata
+              "closurePrimitive",
+              "customElement",
+              "expose",
+              "hidden",
+              "idGenerator",
+              "meaning",
+              "ngInject",
+              "owner",
+              "wizaction"
+            ]
+          },
+          {
+            "tags": [
+              // Other Closure (documented) metadata
+              "define",
+              "dict",
+              "export",
+              "externs",
+              "implicitCast",
+              "noalias",
+              "nocollapse",
+              "nocompile",
+              "noinline",
+              "nosideeffects",
+              "polymer",
+              "polymerBehavior",
+              "preserve",
+              "struct",
+              "suppress",
+              "unrestricted"
+            ]
+          },
+          {
+            "tags": [
+              // Non-Closure metadata
+              "ignore",
+              "author",
+              "version",
+              "variation",
+              "since",
+              "deprecated",
+              "todo"
+            ]
+          }
+        ]
+      }
+    ],
+    "jsdoc/tag-lines": ["warn", "any", { "endLines": 1, "startLines": 1 }],
+    "linebreak-style": ["warn", "unix"],
+    "lit-a11y/click-events-have-key-events": [
+      "error",
+      {
+        "allowList": [
+          "sp-button",
+          "sp-action-button",
+          "sp-checkbox",
+          "sp-radio",
+          "sp-switch",
+          "sp-menu-item",
+          "sp-clear-button",
+          "sp-underlay"
+        ]
+      }
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": ["warn", "error"]
+      }
+    ],
+    "no-debugger": 2,
+    "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
+    "notice/notice": [
+      "error",
+      {
+        "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.",
+        "templateFile": "config/license.js"
+      }
+    ],
+    "quotes": [
+      "warn",
+      "double",
+      {
+        "avoidEscape": true
+      }
+    ],
+    "semi": ["warn", "always"],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true
+        // "ignoreMemberSort": false,
+        // "allowSeparatedGroups": false
+      }
+    ],
+    "space-before-blocks": ["warn", "always"]
+  },
+  "settings": {
+    "jsdoc": {
+      "tagNamePreference": {
+        "attr": "attribute"
+      }
+    }
+  }
 }
diff --git a/packages/overlay/src/OverlayPopover.ts b/packages/overlay/src/OverlayPopover.ts
index 3b73562a95..6250b62564 100644
--- a/packages/overlay/src/OverlayPopover.ts
+++ b/packages/overlay/src/OverlayPopover.ts
@@ -9,291 +9,286 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
+import type { SpectrumElement } from "@spectrum-web-components/base";
+import { userFocusableSelector } from "@spectrum-web-components/shared";
 import {
-    firstFocusableIn,
-    firstFocusableSlottedIn,
-} from '@spectrum-web-components/shared/src/first-focusable-in.js';
-import type { SpectrumElement } from '@spectrum-web-components/base';
-import { VirtualTrigger } from './VirtualTrigger.js';
-import { Constructor, OpenableElement } from './overlay-types.js';
+  firstFocusableIn,
+  firstFocusableSlottedIn,
+} from "@spectrum-web-components/shared/src/first-focusable-in.js";
+import type { AbstractOverlay } from "./AbstractOverlay.js";
 import {
-    guaranteedAllTransitionend,
-    nextFrame,
-    overlayTimer,
-} from './AbstractOverlay.js';
+  guaranteedAllTransitionend,
+  nextFrame,
+  overlayTimer,
+} from "./AbstractOverlay.js";
+import { VirtualTrigger } from "./VirtualTrigger.js";
 import {
-    BeforetoggleClosedEvent,
-    BeforetoggleOpenEvent,
-    OverlayStateEvent,
-} from './events.js';
-import type { AbstractOverlay } from './AbstractOverlay.js';
-import { userFocusableSelector } from '@spectrum-web-components/shared';
+  BeforetoggleClosedEvent,
+  BeforetoggleOpenEvent,
+  OverlayStateEvent,
+} from "./events.js";
+import { Constructor, OpenableElement } from "./overlay-types.js";
 
-const supportsOverlayAuto = CSS.supports('(overlay: auto)');
+const supportsOverlayAuto = CSS.supports("(overlay: auto)");
 
 /**
  *
  */
 function isOpen(el: HTMLElement): boolean {
-    let popoverOpen = false;
+  let popoverOpen = false;
 
-    try {
-        popoverOpen = el.matches(':popover-open');
-        // eslint-disable-next-line no-empty
-    } catch (error) {}
+  try {
+    popoverOpen = el.matches(":popover-open");
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
 
-    let open = false;
+  let open = false;
 
-    try {
-        open = el.matches(':open');
-        // eslint-disable-next-line no-empty
-    } catch (error) {}
+  try {
+    open = el.matches(":open");
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
 
-    return popoverOpen || open;
+  return popoverOpen || open;
 }
 
 /**
+ * @template T
+ *
+ * @description A mixin to add popover functionality to an overlay.
  *
+ * @param constructor - The constructor of the AbstractOverlay class
+ * @returns A class that extends the AbstractOverlay class with popover functionality.
+ *
+ * @public
  */
 export function OverlayPopover>(
-    constructor: T
+  constructor: T,
 ): T & Constructor {
-    class OverlayWithPopover extends constructor {
-        protected override async manageDelay(
-            targetOpenState: boolean
-        ): Promise {
-            if (targetOpenState === false || targetOpenState !== this.open) {
-                overlayTimer.close(this);
-
-                return;
-            }
+  class OverlayWithPopover extends constructor {
+    protected override async manageDelay(
+      targetOpenState: boolean,
+    ): Promise {
+      if (targetOpenState === false || targetOpenState !== this.open) {
+        overlayTimer.close(this);
 
-            if (this.delayed) {
-                const cancelled = await overlayTimer.openTimer(this);
+        return;
+      }
 
-                if (cancelled) {
-                    this.open = !targetOpenState;
-                }
-            }
+      if (this.delayed) {
+        const cancelled = await overlayTimer.openTimer(this);
+
+        if (cancelled) {
+          this.open = !targetOpenState;
         }
+      }
+    }
 
-        /**
-         * A popover should be hidden _after_ it is no longer on top-layer because
-         * the position metrics will have changed from when it was originally positioned.
-         */
-        private async shouldHidePopover(
-            targetOpenState: boolean
-        ): Promise {
-            if (targetOpenState && this.open !== targetOpenState) {
-                return;
-            }
+    /**
+     * A popover should be hidden _after_ it is no longer on top-layer because
+     * the position metrics will have changed from when it was originally positioned.
+     */
+    private async shouldHidePopover(targetOpenState: boolean): Promise {
+      if (targetOpenState && this.open !== targetOpenState) {
+        return;
+      }
+
+      const update = async ({
+        newState,
+      }: { newState?: string } = {}): Promise => {
+        if (newState === "open") {
+          return;
+        }
 
-            const update = async ({
-                newState,
-            }: { newState?: string } = {}): Promise => {
-                if (newState === 'open') {
-                    return;
-                }
-
-                // When in a parent Overlay, this Overlay may need to position itself
-                // while closing in due to the parent _also_ closing which means the
-                // location can no longer rely on "top layer over transform" math.
-                await this.placementController.resetOverlayPosition();
-            };
-
-            if (!isOpen(this.dialogEl)) {
-                // The means the Overlay was closed from the outside, it is already off of top-layer
-                // so we need to position it in regards to this new state.
-                update();
-
-                return;
-            }
+        // When in a parent Overlay, this Overlay may need to position itself
+        // while closing in due to the parent _also_ closing which means the
+        // location can no longer rely on "top layer over transform" math.
+        await this.placementController.resetOverlayPosition();
+      };
+
+      if (!isOpen(this.dialogEl)) {
+        // The means the Overlay was closed from the outside, it is already off of top-layer
+        // so we need to position it in regards to this new state.
+        update();
+
+        return;
+      }
+
+      // `toggle` is an async event, so it's possible for this handler to run a frame late
+      this.dialogEl.addEventListener("toggle", update as EventListener, {
+        once: true,
+      });
+    }
+
+    private shouldShowPopover(targetOpenState: boolean): void {
+      let popoverOpen = false;
+
+      try {
+        popoverOpen = this.dialogEl.matches(":popover-open");
+        // eslint-disable-next-line no-empty
+      } catch (error) {}
+
+      let open = false;
+
+      try {
+        open = this.dialogEl.matches(":open");
+        // eslint-disable-next-line no-empty
+      } catch (error) {}
+
+      if (
+        targetOpenState &&
+        this.open === targetOpenState &&
+        !popoverOpen &&
+        !open &&
+        this.isConnected
+      ) {
+        this.dialogEl.showPopover();
+        this.managePosition();
+      }
+    }
+
+    protected override async ensureOnDOM(
+      targetOpenState: boolean,
+    ): Promise {
+      await nextFrame();
+
+      if (!supportsOverlayAuto) {
+        await this.shouldHidePopover(targetOpenState);
+      }
+
+      this.shouldShowPopover(targetOpenState);
+      await nextFrame();
+    }
+
+    protected override async makeTransition(
+      targetOpenState: boolean,
+    ): Promise {
+      if (this.open !== targetOpenState) {
+        return null;
+      }
 
-            // `toggle` is an async event, so it's possible for this handler to run a frame late
-            this.dialogEl.addEventListener('toggle', update as EventListener, {
-                once: true,
-            });
+      let focusEl = null as HTMLElement | null;
+      const start = (el: OpenableElement, index: number) => (): void => {
+        el.open = targetOpenState;
+
+        if (index === 0) {
+          const event = targetOpenState
+            ? BeforetoggleOpenEvent
+            : BeforetoggleClosedEvent;
+
+          this.dispatchEvent(new event());
         }
 
-        private shouldShowPopover(targetOpenState: boolean): void {
-            let popoverOpen = false;
-
-            try {
-                popoverOpen = this.dialogEl.matches(':popover-open');
-                // eslint-disable-next-line no-empty
-            } catch (error) {}
-
-            let open = false;
-
-            try {
-                open = this.dialogEl.matches(':open');
-                // eslint-disable-next-line no-empty
-            } catch (error) {}
-
-            if (
-                targetOpenState &&
-                this.open === targetOpenState &&
-                !popoverOpen &&
-                !open &&
-                this.isConnected
-            ) {
-                this.dialogEl.showPopover();
-                this.managePosition();
-            }
+        if (!targetOpenState) {
+          return;
         }
 
-        protected override async ensureOnDOM(
-            targetOpenState: boolean
-        ): Promise {
-            await nextFrame();
+        if (el.matches(userFocusableSelector)) {
+          focusEl = el;
+        }
 
-            if (!supportsOverlayAuto) {
-                await this.shouldHidePopover(targetOpenState);
-            }
+        focusEl = focusEl || firstFocusableIn(el);
 
-            this.shouldShowPopover(targetOpenState);
-            await nextFrame();
+        if (focusEl) {
+          return;
         }
 
-        protected override async makeTransition(
-            targetOpenState: boolean
-        ): Promise {
+        const childSlots = el.querySelectorAll("slot");
+
+        childSlots.forEach((slot) => {
+          if (!focusEl) {
+            focusEl = firstFocusableSlottedIn(slot);
+          }
+        });
+      };
+      const finish =
+        (el: OpenableElement, index: number) => async (): Promise => {
+          if (this.open !== targetOpenState) {
+            return;
+          }
+
+          const eventName = targetOpenState ? "sp-opened" : "sp-closed";
+
+          if (index > 0) {
+            el.dispatchEvent(
+              new OverlayStateEvent(eventName, this, {
+                interaction: this.type,
+                publish: false,
+              }),
+            );
+
+            return;
+          }
+
+          const reportChange = async (): Promise => {
             if (this.open !== targetOpenState) {
-                return null;
+              return;
             }
 
-            let focusEl = null as HTMLElement | null;
-            const start = (el: OpenableElement, index: number) => (): void => {
-                el.open = targetOpenState;
-
-                if (index === 0) {
-                    const event = targetOpenState
-                        ? BeforetoggleOpenEvent
-                        : BeforetoggleClosedEvent;
-
-                    this.dispatchEvent(new event());
-                }
-
-                if (!targetOpenState) {
-                    return;
-                }
-
-                if (el.matches(userFocusableSelector)) {
-                    focusEl = el;
-                }
-
-                focusEl = focusEl || firstFocusableIn(el);
-
-                if (focusEl) {
-                    return;
-                }
-
-                const childSlots = el.querySelectorAll('slot');
-
-                childSlots.forEach((slot) => {
-                    if (!focusEl) {
-                        focusEl = firstFocusableSlottedIn(slot);
-                    }
-                });
-            };
-            const finish =
-                (el: OpenableElement, index: number) =>
-                async (): Promise => {
-                    if (this.open !== targetOpenState) {
-                        return;
-                    }
-
-                    const eventName = targetOpenState
-                        ? 'sp-opened'
-                        : 'sp-closed';
-
-                    if (index > 0) {
-                        el.dispatchEvent(
-                            new OverlayStateEvent(eventName, this, {
-                                interaction: this.type,
-                                publish: false,
-                            })
-                        );
-
-                        return;
-                    }
-
-                    const reportChange = async (): Promise => {
-                        if (this.open !== targetOpenState) {
-                            return;
-                        }
-
-                        await nextFrame();
-                        const hasVirtualTrigger =
-                            this.triggerElement instanceof VirtualTrigger;
-
-                        this.dispatchEvent(
-                            new OverlayStateEvent(eventName, this, {
-                                interaction: this.type,
-                                publish: hasVirtualTrigger,
-                            })
-                        );
-                        el.dispatchEvent(
-                            new OverlayStateEvent(eventName, this, {
-                                interaction: this.type,
-                                publish: false,
-                            })
-                        );
-
-                        if (this.triggerElement && !hasVirtualTrigger) {
-                            (this.triggerElement as HTMLElement).dispatchEvent(
-                                new OverlayStateEvent(eventName, this, {
-                                    interaction: this.type,
-                                    publish: true,
-                                })
-                            );
-                        }
-
-                        this.state = targetOpenState ? 'opened' : 'closed';
-                        this.returnFocus();
-                        // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.
-                        await nextFrame();
-                        await nextFrame();
-
-                        if (
-                            targetOpenState === this.open &&
-                            targetOpenState === false
-                        ) {
-                            this.requestSlottable();
-                        }
-                    };
-
-                    if (this.open !== targetOpenState) {
-                        return;
-                    }
-
-                    const open = isOpen(this.dialogEl);
-
-                    if (targetOpenState !== true && open && this.isConnected) {
-                        this.dialogEl.addEventListener(
-                            'beforetoggle',
-                            () => {
-                                reportChange();
-                            },
-                            { once: true }
-                        );
-                        this.dialogEl.hidePopover();
-                    } else {
-                        reportChange();
-                    }
-                };
-
-            this.elements.forEach((el, index) => {
-                guaranteedAllTransitionend(
-                    el,
-                    start(el, index),
-                    finish(el, index)
-                );
-            });
-
-            return focusEl;
-        }
+            await nextFrame();
+            const hasVirtualTrigger =
+              this.triggerElement instanceof VirtualTrigger;
+
+            this.dispatchEvent(
+              new OverlayStateEvent(eventName, this, {
+                interaction: this.type,
+                publish: hasVirtualTrigger,
+              }),
+            );
+            el.dispatchEvent(
+              new OverlayStateEvent(eventName, this, {
+                interaction: this.type,
+                publish: false,
+              }),
+            );
+
+            if (this.triggerElement && !hasVirtualTrigger) {
+              (this.triggerElement as HTMLElement).dispatchEvent(
+                new OverlayStateEvent(eventName, this, {
+                  interaction: this.type,
+                  publish: true,
+                }),
+              );
+            }
+
+            this.state = targetOpenState ? "opened" : "closed";
+            this.returnFocus();
+            // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.
+            await nextFrame();
+            await nextFrame();
+
+            if (targetOpenState === this.open && targetOpenState === false) {
+              this.requestSlottable();
+            }
+          };
+
+          if (this.open !== targetOpenState) {
+            return;
+          }
+
+          const open = isOpen(this.dialogEl);
+
+          if (targetOpenState !== true && open && this.isConnected) {
+            this.dialogEl.addEventListener(
+              "beforetoggle",
+              () => {
+                reportChange();
+              },
+              { once: true },
+            );
+            this.dialogEl.hidePopover();
+          } else {
+            reportChange();
+          }
+        };
+
+      this.elements.forEach((el, index) => {
+        guaranteedAllTransitionend(el, start(el, index), finish(el, index));
+      });
+
+      return focusEl;
     }
+  }
 
-    return OverlayWithPopover;
+  return OverlayWithPopover;
 }
diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
index 866ba02691..fde9820773 100644
--- a/packages/tags/src/Tag.ts
+++ b/packages/tags/src/Tag.ts
@@ -11,13 +11,13 @@ governing permissions and limitations under the License.
 */
 
 import {
-	CSSResultArray,
-	html,
-	nothing,
-	PropertyValues,
-	SizedMixin,
-	SpectrumElement,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  nothing,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import { property } from "@spectrum-web-components/base/src/decorators.js";
 
@@ -37,174 +37,174 @@ import styles from "./tag.css.js";
  * @fires delete - Dispatched when the tag is deleted.
  */
 export class Tag extends SizedMixin(SpectrumElement, {
-	validSizes: ["s", "m", "l"],
-	noDefaultSize: true,
+  validSizes: ["s", "m", "l"],
+  noDefaultSize: true,
 }) {
-	/**
-     * Returns the styles to be applied to the component.
+  /**
+	 * Returns the styles to be applied to the component.
 \
-     */
-	public static override get styles(): CSSResultArray {
-		return [styles];
-	}
-
-	/**
-	 * Indicates whether the tag is deletable.
-	 *
-	 * This property is reflected as an attribute, meaning changes to the property
-	 * will be mirrored in the corresponding HTML attribute.
 	 */
-	@property({ type: Boolean, reflect: true })
-	public deletable = false;
-
-	/**
-	 * Indicates whether the tag is disabled.
-	 *
-	 * This property is reflected as an attribute, meaning changes to the property
-	 * will be mirrored in the corresponding HTML attribute.
-	 */
-	@property({ type: Boolean, reflect: true })
-	public disabled = false;
-
-	/**
-	 * Indicates whether the tag is readonly.
-	 *
-	 * This property is reflected as an attribute, meaning changes to the property
-	 * will be mirrored in the corresponding HTML attribute.
-	 */
-	@property({ type: Boolean, reflect: true })
-	public readonly = false;
-
-	constructor() {
-		super();
-		// Add event listener for focusin event to handle focus-related interactions.
-		this.addEventListener("focusin", this.handleFocusin);
-	}
-
-	/**
-	 * Handles the focusin event.
-	 *
-	 * Adds event listeners for focusout and keydown events when the tag gains focus.
-	 */
-	private handleFocusin = (): void => {
-		this.addEventListener("focusout", this.handleFocusout);
-		this.addEventListener("keydown", this.handleKeydown);
-	};
-
-	/**
-	 * Handles the focusout event.
-	 *
-	 * Removes event listeners for keydown and focusout events when the tag loses focus.
-	 */
-	private handleFocusout = (): void => {
-		this.removeEventListener("keydown", this.handleKeydown);
-		this.removeEventListener("focusout", this.handleFocusout);
-	};
-
-	/**
-	 * Handles the keydown event.
-	 *
-	 * Deletes the tag if the Backspace, Space, or Delete key is pressed and the tag is deletable and not disabled.
-	 */
-	private handleKeydown = (event: KeyboardEvent): void => {
-		if (!this.deletable || this.disabled) {
-			return;
-		}
-
-		const { code } = event;
-
-		switch (code) {
-			case "Backspace":
-			case "Space":
-			case "Delete":
-				this.delete();
-				break;
-			default:
-				return;
-		}
-	};
-
-	/**
-	 * Deletes the tag element.
-	 *
-	 * Dispatches a 'delete' event and removes the tag if the event is not canceled.
-	 */
-	private delete(): void {
-		if (this.readonly) {
-			return;
-		}
-
-		const applyDefault = this.dispatchEvent(
-			new Event("delete", {
-				bubbles: true,
-				cancelable: true,
-				composed: true,
-			}),
-		);
-
-		if (!applyDefault) {
-			return;
-		}
-
-		this.remove();
-	}
-
-	/**
-	 * Renders the content of the tag component.
-	 *
-	 * This method returns a template result containing the avatar, icon, label, and clear button (if deletable).
-	 */
-	protected override render(): TemplateResult {
-		return html`
-			
-			
-			
-			${this.deletable
-				? html`
-						
-					`
-				: nothing}
-		`;
-	}
-
-	/**
-	 * Lifecycle method called after the component's DOM has been rendered for the first time.
-	 *
-	 * Sets the role attribute to 'listitem' and tabindex to '0' if the tag is deletable.
-	 */
-	protected override firstUpdated(changes: PropertyValues): void {
-		super.firstUpdated(changes);
-
-		if (!this.hasAttribute("role")) {
-			this.setAttribute("role", "listitem");
-		}
-
-		if (this.deletable) {
-			this.setAttribute("tabindex", "0");
-		}
-	}
-
-	/**
-	 * Lifecycle method called when the component updates.
-	 *
-	 * Sets or removes the 'aria-disabled' attribute based on the 'disabled' property.
-	 */
-	protected override updated(changes: PropertyValues): void {
-		super.updated(changes);
-
-		if (changes.has("disabled")) {
-			if (this.disabled) {
-				this.setAttribute("aria-disabled", "true");
-			} else {
-				this.removeAttribute("aria-disabled");
-			}
-		}
-	}
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /**
+   * Indicates whether the tag is deletable.
+   *
+   * This property is reflected as an attribute, meaning changes to the property
+   * will be mirrored in the corresponding HTML attribute.
+   */
+  @property({ type: Boolean, reflect: true })
+  public deletable = false;
+
+  /**
+   * Indicates whether the tag is disabled.
+   *
+   * This property is reflected as an attribute, meaning changes to the property
+   * will be mirrored in the corresponding HTML attribute.
+   */
+  @property({ type: Boolean, reflect: true })
+  public disabled = false;
+
+  /**
+   * Indicates whether the tag is readonly.
+   *
+   * This property is reflected as an attribute, meaning changes to the property
+   * will be mirrored in the corresponding HTML attribute.
+   */
+  @property({ type: Boolean, reflect: true })
+  public readonly = false;
+
+  constructor() {
+    super();
+    // Add event listener for focusin event to handle focus-related interactions.
+    this.addEventListener("focusin", this.handleFocusin);
+  }
+
+  /**
+   * Handles the focusin event.
+   *
+   * Adds event listeners for focusout and keydown events when the tag gains focus.
+   */
+  private handleFocusin = (): void => {
+    this.addEventListener("focusout", this.handleFocusout);
+    this.addEventListener("keydown", this.handleKeydown);
+  };
+
+  /**
+   * Handles the focusout event.
+   *
+   * Removes event listeners for keydown and focusout events when the tag loses focus.
+   */
+  private handleFocusout = (): void => {
+    this.removeEventListener("keydown", this.handleKeydown);
+    this.removeEventListener("focusout", this.handleFocusout);
+  };
+
+  /**
+   * Handles the keydown event.
+   *
+   * Deletes the tag if the Backspace, Space, or Delete key is pressed and the tag is deletable and not disabled.
+   */
+  private handleKeydown = (event: KeyboardEvent): void => {
+    if (!this.deletable || this.disabled) {
+      return;
+    }
+
+    const { code } = event;
+
+    switch (code) {
+      case "Backspace":
+      case "Space":
+      case "Delete":
+        this.delete();
+        break;
+      default:
+        return;
+    }
+  };
+
+  /**
+   * Deletes the tag element.
+   *
+   * Dispatches a 'delete' event and removes the tag if the event is not canceled.
+   */
+  private delete(): void {
+    if (this.readonly) {
+      return;
+    }
+
+    const applyDefault = this.dispatchEvent(
+      new Event("delete", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }),
+    );
+
+    if (!applyDefault) {
+      return;
+    }
+
+    this.remove();
+  }
+
+  /**
+   * Renders the content of the tag component.
+   *
+   * This method returns a template result containing the avatar, icon, label, and clear button (if deletable).
+   */
+  protected override render(): TemplateResult {
+    return html`
+      
+      
+      
+      ${this.deletable
+        ? html`
+            
+          `
+        : nothing}
+    `;
+  }
+
+  /**
+   * Lifecycle method called after the component's DOM has been rendered for the first time.
+   *
+   * Sets the role attribute to 'listitem' and tabindex to '0' if the tag is deletable.
+   */
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
+
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
+
+    if (this.deletable) {
+      this.setAttribute("tabindex", "0");
+    }
+  }
+
+  /**
+   * Lifecycle method called when the component updates.
+   *
+   * Sets or removes the 'aria-disabled' attribute based on the 'disabled' property.
+   */
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
+
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.setAttribute("aria-disabled", "true");
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
+    }
+  }
 }
diff --git a/projects/documentation/e2e/published.spec.ts b/projects/documentation/e2e/published.spec.ts
index a823f75e0a..364de57d4b 100644
--- a/projects/documentation/e2e/published.spec.ts
+++ b/projects/documentation/e2e/published.spec.ts
@@ -12,40 +12,41 @@ governing permissions and limitations under the License.
 import { expect, Page, test } from "@playwright/test";
 
 test.describe("search and go", () => {
-	const startURL = "https://opensource.adobe.com/spectrum-web-components/";
-	const menuSelector =
-		"#search-container sp-overlay[open] > sp-popover > sp-menu > sp-menu-group:nth-child(1)";
-	const searchFor = async (searchString: string, page: Page): Promise => {
-		await page.keyboard.type(searchString, { delay: 100 });
-		const menu = await page.locator(menuSelector);
-		await page.keyboard.press("ArrowDown");
-		await expect(menu).toBeFocused();
-		await page.keyboard.press("Enter");
-	};
-
-	test.beforeEach(async ({ page }) => {
-		await page.goto(startURL);
-
-		// Click the get started link.
-		const searchField = await page.getByRole("searchbox", {
-			name: "Search",
-		});
-
-		await searchField.focus();
-	});
-
-	test("component: accordion", async ({ page }) => {
-		await searchFor("accordion", page);
-		await expect(page).toHaveURL(/accordion/);
-	});
-
-	test("tool: base", async ({ page }) => {
-		await searchFor("base", page);
-		await expect(page).toHaveURL(/base/);
-	});
-
-	test("guide: getting-started", async ({ page }) => {
-		await searchFor("getting started", page);
-		await expect(page).toHaveURL(/getting-started/);
-	});
+  const startURL = "https://opensource.adobe.com/spectrum-web-components/";
+  const menuSelector =
+    "#search-container sp-overlay[open] > sp-popover > sp-menu > sp-menu-group:nth-child(1)";
+  const searchFor = async (searchString: string, page: Page): Promise => {
+    await page.keyboard.type(searchString, { delay: 100 });
+    const menu = await page.locator(menuSelector);
+
+    await page.keyboard.press("ArrowDown");
+    await expect(menu).toBeFocused();
+    await page.keyboard.press("Enter");
+  };
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(startURL);
+
+    // Click the get started link.
+    const searchField = await page.getByRole("searchbox", {
+      name: "Search",
+    });
+
+    await searchField.focus();
+  });
+
+  test("component: accordion", async ({ page }) => {
+    await searchFor("accordion", page);
+    await expect(page).toHaveURL(/accordion/);
+  });
+
+  test("tool: base", async ({ page }) => {
+    await searchFor("base", page);
+    await expect(page).toHaveURL(/base/);
+  });
+
+  test("guide: getting-started", async ({ page }) => {
+    await searchFor("getting started", page);
+    await expect(page).toHaveURL(/getting-started/);
+  });
 });
diff --git a/projects/documentation/src/components.ts b/projects/documentation/src/components.ts
index a9402027ba..4c9d0f16a7 100644
--- a/projects/documentation/src/components.ts
+++ b/projects/documentation/src/components.ts
@@ -10,65 +10,64 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import "./router.js";
-import "./components/demo-container.js";
-import "@spectrum-web-components/tabs/sp-tab-panel.js";
-import "@spectrum-web-components/tabs/sp-tab.js";
-import "@spectrum-web-components/tabs/sp-tabs.js";
-import "@spectrum-web-components/top-nav/sp-top-nav.js";
-import "@spectrum-web-components/top-nav/sp-top-nav-item.js";
+import "@spectrum-web-components/card/sp-card.js";
+import "@spectrum-web-components/field-group/sp-field-group.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/icon/sp-icon.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-add.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-remove.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-star.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-close.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-remove.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-save-floppy.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-star.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-stopwatch.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-user-activity.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js";
-import "@spectrum-web-components/table/sp-table.js";
+import "@spectrum-web-components/number-field/sp-number-field.js";
 import "@spectrum-web-components/table/sp-table-body.js";
 import "@spectrum-web-components/table/sp-table-cell.js";
 import "@spectrum-web-components/table/sp-table-checkbox-cell.js";
-import "@spectrum-web-components/table/sp-table-head.js";
 import "@spectrum-web-components/table/sp-table-head-cell.js";
+import "@spectrum-web-components/table/sp-table-head.js";
 import "@spectrum-web-components/table/sp-table-row.js";
-import "@spectrum-web-components/field-group/sp-field-group.js";
-import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/table/sp-table.js";
+import "@spectrum-web-components/tabs/sp-tab-panel.js";
+import "@spectrum-web-components/tabs/sp-tab.js";
+import "@spectrum-web-components/tabs/sp-tabs.js";
 import "@spectrum-web-components/textfield/sp-textfield.js";
-import "@spectrum-web-components/number-field/sp-number-field.js";
-import "@spectrum-web-components/card/sp-card.js";
-import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/top-nav/sp-top-nav-item.js";
+import "@spectrum-web-components/top-nav/sp-top-nav.js";
+import "./components/demo-container.js";
+import "./router.js";
 
 if ("requestIdleCallback" in window) {
-	requestIdleCallback(() => {
-		import("@spectrum-web-components/bundle/elements.js");
-		import("@spectrum-web-components/grid/sp-grid.js");
-	});
+  requestIdleCallback(() => {
+    import("@spectrum-web-components/bundle/elements.js");
+    import("@spectrum-web-components/grid/sp-grid.js");
+  });
 } else {
-	requestAnimationFrame(() => {
-		import("@spectrum-web-components/bundle/elements.js");
-		import("@spectrum-web-components/grid/sp-grid.js");
-	});
+  requestAnimationFrame(() => {
+    import("@spectrum-web-components/bundle/elements.js");
+    import("@spectrum-web-components/grid/sp-grid.js");
+  });
 }
 
 class StyledElement extends HTMLElement {
-	constructor() {
-		super();
-		this.attachShadow({ mode: "open" });
-		(this.shadowRoot as ShadowRoot).innerHTML = `
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    (this.shadowRoot as ShadowRoot).innerHTML = `
             
             
         `;
-	}
+  }
 }
 
 customElements.define("styled-element", StyledElement);
 
 document
-	.querySelector('sp-tab-panel[value="api"]')
-	?.addEventListener("click", (event: Event) => {
-		const path = event.composedPath();
-		const row = path.find(
-			(el) =>
-				(el as Element).localName === "sp-table-row" && (el as Element).id,
-		) as HTMLElement;
-		if (row) {
-			location.hash = row.id;
-			(event.target as HTMLElement).dispatchEvent(
-				new CustomEvent("copy-text", {
-					bubbles: true,
-					composed: true,
-					detail: {
-						text: row.dataset.value,
-						message: `${row.dataset.name} copied to clipboard!`,
-					},
-				}),
-			);
-		}
-	});
+  .querySelector('sp-tab-panel[value="api"]')
+  ?.addEventListener("click", (event: Event) => {
+    const path = event.composedPath();
+    const row = path.find(
+      (el) =>
+        (el as Element).localName === "sp-table-row" && (el as Element).id,
+    ) as HTMLElement;
+
+    if (row) {
+      location.hash = row.id;
+      (event.target as HTMLElement).dispatchEvent(
+        new CustomEvent("copy-text", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            text: row.dataset.value,
+            message: `${row.dataset.name} copied to clipboard!`,
+          },
+        }),
+      );
+    }
+  });
diff --git a/projects/documentation/src/components/adobe-logo.ts b/projects/documentation/src/components/adobe-logo.ts
index a89ff5aae2..36173b42d9 100644
--- a/projects/documentation/src/components/adobe-logo.ts
+++ b/projects/documentation/src/components/adobe-logo.ts
@@ -11,43 +11,43 @@ governing permissions and limitations under the License.
 */
 
 import {
-	CSSResultArray,
-	html,
-	LitElement,
+  CSSResultArray,
+  html,
+  LitElement,
 } from "@spectrum-web-components/base";
 import {
-	customElement,
-	property,
+  customElement,
+  property,
 } from "@spectrum-web-components/base/src/decorators.js";
 import logoStyles from "./adobe-logo.css";
 
 @customElement("docs-spectrum-logo")
 export class SpectrumLogo extends LitElement {
-	@property({ type: String })
-	public size: string = "36px";
+  @property({ type: String })
+  public size: string = "36px";
 
-	public static override get styles(): CSSResultArray {
-		return [logoStyles];
-	}
+  public static override get styles(): CSSResultArray {
+    return [logoStyles];
+  }
 
-	override render() {
-		return html`
-			
-				
-			
-		`;
-	}
+  override render() {
+    return html`
+      
+        
+      
+    `;
+  }
 }
diff --git a/projects/documentation/src/components/code-example.ts b/projects/documentation/src/components/code-example.ts
index aa55506721..ba66e2f398 100644
--- a/projects/documentation/src/components/code-example.ts
+++ b/projects/documentation/src/components/code-example.ts
@@ -11,210 +11,215 @@ governing permissions and limitations under the License.
 */
 
 import "@spectrum-web-components/action-button/sp-action-button.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js";
 import {
-	CSSResultArray,
-	html,
-	LitElement,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  LitElement,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	customElement,
-	property,
-	query,
+  customElement,
+  property,
+  query,
 } from "@spectrum-web-components/base/src/decorators.js";
-import { Color } from "@spectrum-web-components/theme";
-import { copyNode } from "./copy-to-clipboard.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js";
 import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared";
-import Styles from "./code-example.css";
+import { Color } from "@spectrum-web-components/theme";
+import { toHtmlTemplateString } from "../utils/templates.js";
 import StylesDark from "./code-example-dark.css";
 import StylesLight from "./code-example-light.css";
-import { toHtmlTemplateString } from "../utils/templates.js";
+import Styles from "./code-example.css";
+import { copyNode } from "./copy-to-clipboard.js";
 import { TrackTheme } from "./layout.js";
 
 @customElement("code-example")
 export class CodeExample extends FocusVisiblePolyfillMixin(LitElement) {
-	@query("#markup")
-	private markup?: HTMLDivElement;
-
-	@query(".demo-example")
-	private demo?: HTMLDivElement;
-
-	@property()
-	public codeTheme: "dark" | "light" = "light";
-
-	@property({ type: Boolean })
-	public preprocessed = false;
-
-	@property({ type: Boolean, attribute: "no-demo" })
-	public noDemo = false;
-
-	private prismjsLoaded = false;
-
-	public static override get styles(): CSSResultArray {
-		return [Styles];
-	}
-
-	private get codeSlot(): Element | this {
-		const code = [...(this.children || [])].find(
-			(child) => child.slot === "code",
-		);
-
-		return code || this;
-	}
-
-	public get highlightedHTML(): string {
-		const el = this.codeSlot;
-
-		return el.innerHTML || "";
-	}
-
-	public get liveHTML(): string {
-		const el = this.codeSlot;
-
-		return el.textContent || "";
-	}
-
-	public get language(): "markup" | "javascript" {
-		if (this.classList.contains("language-javascript")) {
-			return "javascript";
-		}
-
-		return "markup";
-	}
-
-	public get showDemo() {
-		if (this.noDemo) {
-			return false;
-		}
-
-		return (
-			this.classList.contains("language-html") ||
-			this.classList.contains("language-html-live")
-		);
-	}
-
-	private get highlightedCode(): TemplateResult {
-		const highlightedHTML = this.preprocessed
-			? this.highlightedHTML
-			: window.Prism.highlight(
-					this.liveHTML,
-					window.Prism.languages[this.language],
-					this.language,
-				);
-
-		const code = toHtmlTemplateString(highlightedHTML);
-
-		return html` 
${code}
 `;
-	}
-
-	private liveHTMLTransferred = false;
-
-	private get renderedCode(): TemplateResult {
-		if (
-			this.classList.contains("language-html-live") &&
-			!this.liveHTMLTransferred
-		) {
-			const demo =
-				this.querySelector('[slot="demo"]') || document.createElement("div");
-			demo.slot = "demo";
-			demo.innerHTML = this.liveHTML;
-			this.append(demo);
-			this.liveHTMLTransferred = true;
-		}
-
-		return toHtmlTemplateString(this.liveHTML);
-	}
-
-	protected override shouldUpdate(): boolean {
-		if (this.preprocessed || this.prismjsLoaded) {
-			return true;
-		}
-		if (!this.preprocessed) {
-			import("prismjs").then(() => {
-				this.prismjsLoaded = true;
-				this.requestUpdate();
-			});
-		}
-
-		return false;
-	}
-
-	protected override render(): TemplateResult {
-		// highlighedCode needs to happen first in case the HTML is live and
-		// needs to be placed into the light DOM
-		const { highlightedCode, renderedCode } = this;
-
-		return html`
-			${this.showDemo
-				? html`
-						

-							${renderedCode}
-						

-					`
-				: undefined}
-			
-				${highlightedCode}
-				

-					
-						
-						Copy to Clipboard
-					
-				

-			
-			
-		`;
-	}
-
-	private copyToClipboard(): void {
-		copyNode(this);
-	}
-
-	private shouldManageTabOrderForScrolling = (): void => {
-		[this.markup, this.demo].map((el) => {
-			if (!el) {
-				return;
-			}
-			const { offsetWidth, scrollWidth } = el;
-			if (offsetWidth < scrollWidth) {
-				el.tabIndex = 0;
-			} else {
-				el.removeAttribute("tabindex");
-			}
-		});
-	};
-
-	protected override updated(): void {
-		setTimeout(this.shouldManageTabOrderForScrolling);
-	}
-
-	private trackTheme(): void {
-		const queryThemeEvent = new CustomEvent("sp-track-theme", {
-			bubbles: true,
-			composed: true,
-			detail: {
-				callback: (color: Color) => {
-					this.codeTheme = color.startsWith("light") ? "light" : "dark";
-				},
-			},
-			cancelable: true,
-		});
-		this.dispatchEvent(queryThemeEvent);
-	}
-
-	public override connectedCallback(): void {
-		super.connectedCallback();
-		window.addEventListener("resize", this.shouldManageTabOrderForScrolling);
-		this.trackTheme();
-	}
-
-	public override disconnectedCallback(): void {
-		window.removeEventListener("resize", this.shouldManageTabOrderForScrolling);
-		this.trackTheme();
-		super.disconnectedCallback();
-	}
+  @query("#markup")
+  private markup?: HTMLDivElement;
+
+  @query(".demo-example")
+  private demo?: HTMLDivElement;
+
+  @property()
+  public codeTheme: "dark" | "light" = "light";
+
+  @property({ type: Boolean })
+  public preprocessed = false;
+
+  @property({ type: Boolean, attribute: "no-demo" })
+  public noDemo = false;
+
+  private prismjsLoaded = false;
+
+  public static override get styles(): CSSResultArray {
+    return [Styles];
+  }
+
+  private get codeSlot(): Element | this {
+    const code = [...(this.children || [])].find(
+      (child) => child.slot === "code",
+    );
+
+    return code || this;
+  }
+
+  public get highlightedHTML(): string {
+    const el = this.codeSlot;
+
+    return el.innerHTML || "";
+  }
+
+  public get liveHTML(): string {
+    const el = this.codeSlot;
+
+    return el.textContent || "";
+  }
+
+  public get language(): "markup" | "javascript" {
+    if (this.classList.contains("language-javascript")) {
+      return "javascript";
+    }
+
+    return "markup";
+  }
+
+  public get showDemo() {
+    if (this.noDemo) {
+      return false;
+    }
+
+    return (
+      this.classList.contains("language-html") ||
+      this.classList.contains("language-html-live")
+    );
+  }
+
+  private get highlightedCode(): TemplateResult {
+    const highlightedHTML = this.preprocessed
+      ? this.highlightedHTML
+      : window.Prism.highlight(
+          this.liveHTML,
+          window.Prism.languages[this.language],
+          this.language,
+        );
+
+    const code = toHtmlTemplateString(highlightedHTML);
+
+    return html` 
${code}
 `;
+  }
+
+  private liveHTMLTransferred = false;
+
+  private get renderedCode(): TemplateResult {
+    if (
+      this.classList.contains("language-html-live") &&
+      !this.liveHTMLTransferred
+    ) {
+      const demo =
+        this.querySelector('[slot="demo"]') || document.createElement("div");
+
+      demo.slot = "demo";
+      demo.innerHTML = this.liveHTML;
+      this.append(demo);
+      this.liveHTMLTransferred = true;
+    }
+
+    return toHtmlTemplateString(this.liveHTML);
+  }
+
+  protected override shouldUpdate(): boolean {
+    if (this.preprocessed || this.prismjsLoaded) {
+      return true;
+    }
+
+    if (!this.preprocessed) {
+      import("prismjs").then(() => {
+        this.prismjsLoaded = true;
+        this.requestUpdate();
+      });
+    }
+
+    return false;
+  }
+
+  protected override render(): TemplateResult {
+    // highlighedCode needs to happen first in case the HTML is live and
+    // needs to be placed into the light DOM
+    const { highlightedCode, renderedCode } = this;
+
+    return html`
+      ${this.showDemo
+        ? html`
+            

+              ${renderedCode}
+            

+          `
+        : undefined}
+      
+        ${highlightedCode}
+        

+          
+            
+            Copy to Clipboard
+          
+        

+      
+      
+    `;
+  }
+
+  private copyToClipboard(): void {
+    copyNode(this);
+  }
+
+  private shouldManageTabOrderForScrolling = (): void => {
+    [this.markup, this.demo].map((el) => {
+      if (!el) {
+        return;
+      }
+
+      const { offsetWidth, scrollWidth } = el;
+
+      if (offsetWidth < scrollWidth) {
+        el.tabIndex = 0;
+      } else {
+        el.removeAttribute("tabindex");
+      }
+    });
+  };
+
+  protected override updated(): void {
+    setTimeout(this.shouldManageTabOrderForScrolling);
+  }
+
+  private trackTheme(): void {
+    const queryThemeEvent = new CustomEvent("sp-track-theme", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        callback: (color: Color) => {
+          this.codeTheme = color.startsWith("light") ? "light" : "dark";
+        },
+      },
+      cancelable: true,
+    });
+
+    this.dispatchEvent(queryThemeEvent);
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("resize", this.shouldManageTabOrderForScrolling);
+    this.trackTheme();
+  }
+
+  public override disconnectedCallback(): void {
+    window.removeEventListener("resize", this.shouldManageTabOrderForScrolling);
+    this.trackTheme();
+    super.disconnectedCallback();
+  }
 }
diff --git a/projects/documentation/src/components/copy-to-clipboard.ts b/projects/documentation/src/components/copy-to-clipboard.ts
index 5713639fe6..84435bed4e 100644
--- a/projects/documentation/src/components/copy-to-clipboard.ts
+++ b/projects/documentation/src/components/copy-to-clipboard.ts
@@ -10,47 +10,53 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 function createNode(text: string): Element {
-	const node = document.createElement("pre");
-	node.style.width = "1px";
-	node.style.height = "1px";
-	node.style.position = "fixed";
-	node.style.top = "5px";
-	node.textContent = text;
-
-	return node;
+  const node = document.createElement("pre");
+
+  node.style.width = "1px";
+  node.style.height = "1px";
+  node.style.position = "fixed";
+  node.style.top = "5px";
+  node.textContent = text;
+
+  return node;
 }
 
 export function copyNode(node: Element): Promise {
-	const text: string | null = node.textContent;
-	if (!text) {
-		return Promise.reject(new Error("Node has no text content"));
-	}
-	/**
-	 * include import statements both for the element being documented and any other
-	 * top level elements used that would otherwise not be imported directly in the element.
-	 */
-	const customElements = extractNodeCustomElements(text);
-	const importStatements = generateImportStatements(customElements);
-	const fullCopiedText = `${importStatements}\n${node.textContent}`;
-	if ("clipboard" in navigator) {
-		return navigator.clipboard.writeText(fullCopiedText || "");
-	}
-
-	const selection = getSelection();
-	if (selection == null) {
-		return Promise.reject(new Error());
-	}
-
-	selection.removeAllRanges();
-
-	const range = document.createRange();
-	range.selectNodeContents(node);
-	selection.addRange(range);
-
-	document.execCommand("copy");
-	selection.removeAllRanges();
-
-	return Promise.resolve();
+  const text: string | null = node.textContent;
+
+  if (!text) {
+    return Promise.reject(new Error("Node has no text content"));
+  }
+
+  /**
+   * include import statements both for the element being documented and any other
+   * top level elements used that would otherwise not be imported directly in the element.
+   */
+  const customElements = extractNodeCustomElements(text);
+  const importStatements = generateImportStatements(customElements);
+  const fullCopiedText = `${importStatements}\n${node.textContent}`;
+
+  if ("clipboard" in navigator) {
+    return navigator.clipboard.writeText(fullCopiedText || "");
+  }
+
+  const selection = getSelection();
+
+  if (selection == null) {
+    return Promise.reject(new Error());
+  }
+
+  selection.removeAllRanges();
+
+  const range = document.createRange();
+
+  range.selectNodeContents(node);
+  selection.addRange(range);
+
+  document.execCommand("copy");
+  selection.removeAllRanges();
+
+  return Promise.resolve();
 }
 
 /**
@@ -59,14 +65,15 @@ export function copyNode(node: Element): Promise {
  * @returns customElements which need to be added to the import statements
  */
 function extractNodeCustomElements(text: string): Set {
-	const customElements = new Set();
-	const regex = /();
+  const regex = / {
  * @returns list of import statements of each element
  */
 function generateImportStatements(elements: Set): string {
-	let imports = "";
-	elements.forEach((element) => {
-		const elementName = element.substring(3); // Remove the 'sp-' prefix
-		if (element.includes("sp-icon")) {
-			imports += `import '@spectrum-web-components/icons-workflow/icons/${element}.js';\n`;
-		} else {
-			imports += `import '@spectrum-web-components/${elementName}/${element}.js';\n`;
-		}
-	});
-
-	return imports;
+  let imports = "";
+
+  elements.forEach((element) => {
+    const elementName = element.substring(3); // Remove the 'sp-' prefix
+
+    if (element.includes("sp-icon")) {
+      imports += `import '@spectrum-web-components/icons-workflow/icons/${element}.js';\n`;
+    } else {
+      imports += `import '@spectrum-web-components/${elementName}/${element}.js';\n`;
+    }
+  });
+
+  return imports;
 }
 
 export function copyText(text: string): Promise {
-	if ("clipboard" in navigator) {
-		return navigator.clipboard.writeText(text);
-	}
+  if ("clipboard" in navigator) {
+    return navigator.clipboard.writeText(text);
+  }
+
+  const body = document.body;
+
+  if (!body) {
+    return Promise.reject(new Error());
+  }
 
-	const body = document.body;
-	if (!body) {
-		return Promise.reject(new Error());
-	}
+  const node = createNode(text);
 
-	const node = createNode(text);
-	body.appendChild(node);
-	copyNode(node);
-	body.removeChild(node);
+  body.appendChild(node);
+  copyNode(node);
+  body.removeChild(node);
 
-	return Promise.resolve();
+  return Promise.resolve();
 }
diff --git a/projects/documentation/src/components/demo-container.ts b/projects/documentation/src/components/demo-container.ts
index 924223ca11..6cb35bf7a0 100644
--- a/projects/documentation/src/components/demo-container.ts
+++ b/projects/documentation/src/components/demo-container.ts
@@ -10,51 +10,52 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import {
-	CSSResultArray,
-	html,
-	SpectrumElement,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  SpectrumElement,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	customElement,
-	property,
-	query,
+  customElement,
+  property,
+  query,
 } from "@spectrum-web-components/base/src/decorators.js";
-import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 
 import styles from "./demo-container.css";
 
 @customElement("demo-container")
 export class DemoContainer extends SpectrumElement {
-	public static override get styles(): CSSResultArray {
-		return [styles];
-	}
-
-	@property({ type: Boolean, reflect: true })
-	scrollable = false;
-
-	@query(".wrapper")
-	wrapper!: HTMLDivElement;
-
-	resizeController = new ResizeController(this, {
-		callback: () => this.shouldUpdateScrollableState(),
-	});
-
-	public shouldUpdateScrollableState = (): void => {
-		const { offsetHeight, scrollHeight } = this;
-		this.scrollable = offsetHeight < scrollHeight;
-	};
-
-	public override render(): TemplateResult {
-		return html`
-			

-				
-			

-		`;
-	}
-
-	public override firstUpdated(): void {
-		this.resizeController.observe(this.wrapper);
-	}
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Boolean, reflect: true })
+  scrollable = false;
+
+  @query(".wrapper")
+  wrapper!: HTMLDivElement;
+
+  resizeController = new ResizeController(this, {
+    callback: () => this.shouldUpdateScrollableState(),
+  });
+
+  public shouldUpdateScrollableState = (): void => {
+    const { offsetHeight, scrollHeight } = this;
+
+    this.scrollable = offsetHeight < scrollHeight;
+  };
+
+  public override render(): TemplateResult {
+    return html`
+      

+        
+      

+    `;
+  }
+
+  public override firstUpdated(): void {
+    this.resizeController.observe(this.wrapper);
+  }
 }
diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts
index 307541ae3d..2606af36ca 100644
--- a/projects/documentation/src/components/layout.ts
+++ b/projects/documentation/src/components/layout.ts
@@ -10,47 +10,45 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+import "@spectrum-web-components/action-button/sp-action-button.js";
 import {
-	CSSResultArray,
-	html,
-	LitElement,
-	PropertyValues,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	property,
-	queryAsync,
-	state,
+  property,
+  queryAsync,
+  state,
 } from "@spectrum-web-components/base/src/decorators.js";
-import "@spectrum-web-components/theme/sp-theme.js";
-import type {
-	Color,
-	Scale,
-	SystemVariant,
-	Theme,
-} from "@spectrum-web-components/theme";
-import type { Picker } from "@spectrum-web-components/picker";
 import "@spectrum-web-components/button/sp-button.js";
-import "@spectrum-web-components/action-button/sp-action-button.js";
-import "@spectrum-web-components/link/sp-link.js";
 import "@spectrum-web-components/divider/sp-divider.js";
-import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
+import "@spectrum-web-components/link/sp-link.js";
 import {
-	type OverlayTriggerOptions,
-	trigger,
+  type OverlayTriggerOptions,
+  trigger,
 } from "@spectrum-web-components/overlay/src/overlay-trigger-directive.js";
-
+import type { Picker } from "@spectrum-web-components/picker";
+import {
+  DARK_MODE,
+  IS_MOBILE,
+} from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
+import type {
+  Color,
+  Scale,
+  SystemVariant,
+  Theme,
+} from "@spectrum-web-components/theme";
+import "@spectrum-web-components/theme/sp-theme.js";
 import "./adobe-logo.js";
-import type { CodeExample } from "./code-example.js";
 import "./code-example.js";
+import type { CodeExample } from "./code-example.js";
 import { copyText } from "./copy-to-clipboard.js";
-
 import layoutStyles from "./layout.css";
-import {
-	DARK_MODE,
-	IS_MOBILE,
-} from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
 
 const SWC_THEME_COLOR_KEY = "swc-docs:theme:color";
 const SWC_THEME_SCALE_KEY = "swc-docs:theme:scale";
@@ -62,449 +60,472 @@ const SCALE_FALLBACK = matchMedia(IS_MOBILE).matches ? "large" : "medium";
 const SYSTEM_FALLBACK = "spectrum";
 const DIR_FALLBACK = "ltr";
 const DEFAULT_COLOR = (
-	window.localStorage
-		? localStorage.getItem(SWC_THEME_COLOR_KEY) || COLOR_FALLBACK
-		: COLOR_FALLBACK
+  window.localStorage
+    ? localStorage.getItem(SWC_THEME_COLOR_KEY) || COLOR_FALLBACK
+    : COLOR_FALLBACK
 ) as Color;
 const DEFAULT_SCALE = (
-	window.localStorage
-		? localStorage.getItem(SWC_THEME_SCALE_KEY) || SCALE_FALLBACK
-		: SCALE_FALLBACK
+  window.localStorage
+    ? localStorage.getItem(SWC_THEME_SCALE_KEY) || SCALE_FALLBACK
+    : SCALE_FALLBACK
 ) as Scale;
 const DEFAULT_SYSTEM = (
-	window.localStorage
-		? localStorage.getItem(SWC_THEME_THEME_KEY) ||
-			localStorage.getItem(SWC_THEME_SYSTEM_KEY) ||
-			SYSTEM_FALLBACK
-		: SYSTEM_FALLBACK
+  window.localStorage
+    ? localStorage.getItem(SWC_THEME_THEME_KEY) ||
+      localStorage.getItem(SWC_THEME_SYSTEM_KEY) ||
+      SYSTEM_FALLBACK
+    : SYSTEM_FALLBACK
 ) as SystemVariant;
 const DEFAULT_DIR = (
-	window.localStorage
-		? localStorage.getItem(SWC_THEME_DIR_KEY) || DIR_FALLBACK
-		: DIR_FALLBACK
+  window.localStorage
+    ? localStorage.getItem(SWC_THEME_DIR_KEY) || DIR_FALLBACK
+    : DIR_FALLBACK
 ) as "ltr" | "rtl";
 
 const isNarrowMediaQuery = matchMedia("screen and (max-width: 960px)");
 
 const lazyStyleFragment = (
-	name: Color | Scale,
-	system: SystemVariant,
+  name: Color | Scale,
+  system: SystemVariant,
 ): void => {
-	const fragmentName = `${name}-${system}`;
-	switch (fragmentName) {
-		case "dark-spectrum" || "darkest-spectrum":
-			import("@spectrum-web-components/theme/theme-dark.js");
-			break;
-		case "light-spectrum" || "lightest-spectrum":
-			import("@spectrum-web-components/theme/theme-light.js");
-			break;
-		case "medium-spectrum":
-			import("@spectrum-web-components/theme/scale-medium.js");
-			break;
-		case "large-spectrum":
-			import("@spectrum-web-components/theme/scale-large.js");
-			break;
-		case "dark-express" || "darkest-express":
-			import("@spectrum-web-components/theme/express/theme-dark.js");
-			break;
-		case "light-express" || "lightest-express":
-			import("@spectrum-web-components/theme/express/theme-light.js");
-			break;
-		case "medium-express":
-			import("@spectrum-web-components/theme/express/scale-medium.js");
-			break;
-		case "large-express":
-			import("@spectrum-web-components/theme/express/scale-large.js");
-			break;
-		case "light-spectrum-two":
-			import(
-				"@spectrum-web-components/theme/spectrum-two/theme-light-core-tokens.js"
-			);
-			break;
-		case "dark-spectrum-two":
-			import(
-				"@spectrum-web-components/theme/spectrum-two/theme-dark-core-tokens.js"
-			);
-			break;
-		case "medium-spectrum-two":
-			import(
-				"@spectrum-web-components/theme/spectrum-two/scale-medium-core-tokens.js"
-			);
-			break;
-		case "large-spectrum-two":
-			import(
-				"@spectrum-web-components/theme/spectrum-two/scale-large-core-tokens.js"
-			);
-			break;
-	}
+  const fragmentName = `${name}-${system}`;
+
+  switch (fragmentName) {
+    case "dark-spectrum":
+    case "darkest-spectrum":
+      import("@spectrum-web-components/theme/theme-dark.js");
+      break;
+    case "light-spectrum":
+    case "lightest-spectrum":
+      import("@spectrum-web-components/theme/theme-light.js");
+      break;
+    case "medium-spectrum":
+      import("@spectrum-web-components/theme/scale-medium.js");
+      break;
+    case "large-spectrum":
+      import("@spectrum-web-components/theme/scale-large.js");
+      break;
+    case "dark-express":
+    case "darkest-express":
+      import("@spectrum-web-components/theme/express/theme-dark.js");
+      break;
+    case "light-express":
+    case "lightest-express":
+      import("@spectrum-web-components/theme/express/theme-light.js");
+      break;
+    case "medium-express":
+      import("@spectrum-web-components/theme/express/scale-medium.js");
+      break;
+    case "large-express":
+      import("@spectrum-web-components/theme/express/scale-large.js");
+      break;
+    case "light-spectrum-two":
+      import(
+        "@spectrum-web-components/theme/spectrum-two/theme-light-core-tokens.js"
+      );
+      break;
+    case "dark-spectrum-two":
+      import(
+        "@spectrum-web-components/theme/spectrum-two/theme-dark-core-tokens.js"
+      );
+      break;
+    case "medium-spectrum-two":
+      import(
+        "@spectrum-web-components/theme/spectrum-two/scale-medium-core-tokens.js"
+      );
+      break;
+    case "large-spectrum-two":
+      import(
+        "@spectrum-web-components/theme/spectrum-two/scale-large-core-tokens.js"
+      );
+      break;
+  }
 };
 
 const loadDefaults = () => {
-	if (
-		DEFAULT_COLOR !== COLOR_FALLBACK ||
-		DEFAULT_SCALE !== SCALE_FALLBACK ||
-		DEFAULT_SYSTEM !== SYSTEM_FALLBACK
-	) {
-		lazyStyleFragment(DEFAULT_COLOR, DEFAULT_SYSTEM);
-		lazyStyleFragment(DEFAULT_SCALE, DEFAULT_SYSTEM);
-	}
+  if (
+    DEFAULT_COLOR !== COLOR_FALLBACK ||
+    DEFAULT_SCALE !== SCALE_FALLBACK ||
+    DEFAULT_SYSTEM !== SYSTEM_FALLBACK
+  ) {
+    lazyStyleFragment(DEFAULT_COLOR, DEFAULT_SYSTEM);
+    lazyStyleFragment(DEFAULT_SCALE, DEFAULT_SYSTEM);
+  }
 };
 
 export interface TrackTheme {
-	callback: (color: Color) => void;
+  callback: (color: Color) => void;
 }
 
 // @customElement('docs-page')
 export class LayoutElement extends LitElement {
-	public static override get styles(): CSSResultArray {
-		return [layoutStyles];
-	}
-
-	@state()
-	private alerts: Map<
-		HTMLElement,
-		{
-			count: number;
-			message: string;
-			element: (count: number, message: string) => TemplateResult;
-		}
-	> = new Map();
-
-	@property({ attribute: false })
-	public color: Color = DEFAULT_COLOR;
-
-	@property({ reflect: true })
-	public override dir: "ltr" | "rtl" = DEFAULT_DIR;
-
-	@property({ type: Boolean })
-	public open = false;
-
-	@state()
-	private isNarrow = isNarrowMediaQuery.matches;
-
-	@property({ attribute: false })
-	public theme: SystemVariant = DEFAULT_SYSTEM;
-
-	@property({ attribute: false })
-	public scale: Scale = DEFAULT_SCALE;
-
-	@property({ attribute: false })
-	public system: SystemVariant = DEFAULT_SYSTEM;
-
-	@queryAsync("sp-theme")
-	private themeRoot!: Theme;
-
-	public async startManagingContentDirection(el: HTMLElement): Promise {
-		(await this.themeRoot).startManagingContentDirection(el);
-	}
-
-	public async stopManagingContentDirection(el: HTMLElement): Promise {
-		(await this.themeRoot).stopManagingContentDirection(el);
-	}
-
-	private _themeTrackers = new Map();
-
-	private handleMatchMediaChange = (event: MediaQueryListEvent) => {
-		this.isNarrow = event.matches;
-	};
-
-	private closeSettings(event: Event & { target: HTMLElement }) {
-		event.target.parentElement?.dispatchEvent(
-			new Event("close", { bubbles: true }),
-		);
-	}
-
-	private updateColor(event: Event) {
-		this.color = (event.target as Picker).value as Color;
-		this._themeTrackers.forEach((tracker) => tracker(this.color));
-	}
-
-	private updateScale(event: Event) {
-		this.scale = (event.target as Picker).value as Scale;
-	}
-
-	private updateSystem(event: Event) {
-		this.system = (event.target as Picker).value as SystemVariant;
-	}
-
-	private updateDirection(event: Event) {
-		const dir = (event.target as Picker).value;
-		this.dir = dir === "rtl" ? dir : "ltr";
-		document.documentElement.dir = this.dir;
-	}
-
-	private handleTrackTheme(event: CustomEvent): void {
-		const target = event.composedPath()[0] as HTMLElement;
-		if (this._themeTrackers.has(target)) {
-			this._themeTrackers.delete(target);
-		} else {
-			this._themeTrackers.set(target, event.detail.callback);
-			const callback = this._themeTrackers.get(target);
-			if (callback) {
-				callback(this.color);
-			}
-		}
-	}
-
-	private copyText(
-		event: CustomEvent<{ text: string; message: string }>,
-	): void {
-		copyText(event.detail.text);
-		this.addAlert(event);
-	}
-
-	private addAlert(event: CustomEvent<{ message: string }>): void {
-		const target = event.composedPath()[0] as HTMLElement;
-		if (!this.alerts.has(target)) {
-			const close = () => {
-				this.alerts.delete(target);
-				target.focus();
-				this.requestUpdate();
-			};
-			this.alerts.set(target, {
-				count: 0,
-				message: "",
-				/**
-				 *  does not allow a `timeout` of less that 6000
-				 * use this as a cheat to reset the timeout to 6000 for
-				 * every additional alert.
-				 */
-
-				element: (count: number, message: string) => {
-					import("@spectrum-web-components/toast/sp-toast.js");
-
-					return html`
-						
-							${message} ${count > 1 ? `(${count} alerts)` : ""}
-						
-					`;
-				},
-			});
-		}
-		const alert = this.alerts.get(target);
-		this.alerts.set(target, {
-			element: alert!.element,
-			count: alert!.count + 1,
-			message: event.detail.message,
-		});
-		this.requestUpdate();
-	}
-
-	private get sideNav(): TemplateResult {
-		const navContent = html`
-			
-				
-			
-			
-		`;
-		import("./side-nav.js");
-
-		return html`
-			
-				${navContent}
-			
-		`;
-	}
-
-	private get settingsContent(): TemplateResult {
-		import("@spectrum-web-components/underlay/sp-underlay.js");
-
-		return html`
-			
-			
-		`;
-	}
-
-	private get manageTheme(): TemplateResult {
-		import("./settings.js");
-
-		return html`
-			

-				

-					System
-					
-						Spectrum
-						Express
-						 Spectrum 2 
-					
-				

-				

-					Color
-					
-						Light
-						Dark
-					
-				

-				

-					Scale
-					
-						Medium
-						Large
-					
-				

-				

-					 Direction 
-					
-						LTR
-						RTL
-					
-				

-			

-		`;
-	}
-
-	private get header(): TemplateResult {
-		const triggerOptions: Partial = {
-			overlayOptions: {
-				type: "modal",
-			},
-			insertionOptions: {
-				el: () => this.shadowRoot?.querySelector("#body") as HTMLElement,
-				where: "afterbegin",
-			},
-		};
-
-		return html`
-			

-				 this.sideNav, triggerOptions)}
-				>
-					
-				
-				 this.settingsContent, triggerOptions)}
-				>
-					
-				
-			

-		`;
-	}
-
-	override render() {
-		return html`
-			
-				${this.isNarrow ? this.header : html``}
-				

-					${this.isNarrow ? html`` : this.sideNav}
-					

-						${!this.isNarrow ? this.manageTheme : ""}
-						
-					

-				

-				${this.alerts.size
-					? html`
-							

-								${[...this.alerts.values()].map((alert) =>
-									alert.element(alert.count, alert.message),
-								)}
-							

-						`
-					: html``}
-			
-		`;
-	}
-
-	protected override firstUpdated(): void {
-		loadDefaults();
-		isNarrowMediaQuery.addEventListener("change", this.handleMatchMediaChange);
-	}
-
-	override updated(changes: PropertyValues) {
-		let loadStyleFragments = false;
-		if (changes.has("color")) {
-			if (window.localStorage) {
-				localStorage.setItem(SWC_THEME_COLOR_KEY, this.color);
-			}
-			if (changes.get("color")) {
-				loadStyleFragments = true;
-			}
-			const examples = [
-				...this.querySelectorAll("code-example"),
-			] as CodeExample[];
-			examples.forEach((example) => {
-				example.codeTheme = this.color;
-			});
-			(document.querySelector("html") as HTMLHtmlElement).style.colorScheme =
-				this.color;
-		}
-		if (changes.has("scale")) {
-			if (window.localStorage) {
-				localStorage.setItem(SWC_THEME_SCALE_KEY, this.scale);
-			}
-			if (changes.get("scale")) {
-				loadStyleFragments = true;
-			}
-		}
-		if (changes.has("system")) {
-			if (window.localStorage) {
-				localStorage.setItem(SWC_THEME_SYSTEM_KEY, this.system);
-			}
-			if (changes.get("system")) {
-				loadStyleFragments = true;
-			}
-		}
-		if (changes.has("dir") && window.localStorage) {
-			localStorage.setItem(SWC_THEME_DIR_KEY, this.dir);
-		}
-		if (loadStyleFragments) {
-			lazyStyleFragment(this.color, this.system);
-			lazyStyleFragment(this.scale, this.system);
-		}
-	}
+  public static override get styles(): CSSResultArray {
+    return [layoutStyles];
+  }
+
+  @state()
+  private alerts: Map<
+    HTMLElement,
+    {
+      count: number;
+      message: string;
+      element: (count: number, message: string) => TemplateResult;
+    }
+  > = new Map();
+
+  @property({ attribute: false })
+  public color: Color = DEFAULT_COLOR;
+
+  @property({ reflect: true })
+  public override dir: "ltr" | "rtl" = DEFAULT_DIR;
+
+  @property({ type: Boolean })
+  public open = false;
+
+  @state()
+  private isNarrow = isNarrowMediaQuery.matches;
+
+  @property({ attribute: false })
+  public theme: SystemVariant = DEFAULT_SYSTEM;
+
+  @property({ attribute: false })
+  public scale: Scale = DEFAULT_SCALE;
+
+  @property({ attribute: false })
+  public system: SystemVariant = DEFAULT_SYSTEM;
+
+  @queryAsync("sp-theme")
+  private themeRoot!: Theme;
+
+  public async startManagingContentDirection(el: HTMLElement): Promise {
+    (await this.themeRoot).startManagingContentDirection(el);
+  }
+
+  public async stopManagingContentDirection(el: HTMLElement): Promise {
+    (await this.themeRoot).stopManagingContentDirection(el);
+  }
+
+  private _themeTrackers = new Map();
+
+  private handleMatchMediaChange = (event: MediaQueryListEvent) => {
+    this.isNarrow = event.matches;
+  };
+
+  private closeSettings(event: Event & { target: HTMLElement }) {
+    event.target.parentElement?.dispatchEvent(
+      new Event("close", { bubbles: true }),
+    );
+  }
+
+  private updateColor(event: Event) {
+    this.color = (event.target as Picker).value as Color;
+    this._themeTrackers.forEach((tracker) => tracker(this.color));
+  }
+
+  private updateScale(event: Event) {
+    this.scale = (event.target as Picker).value as Scale;
+  }
+
+  private updateSystem(event: Event) {
+    this.system = (event.target as Picker).value as SystemVariant;
+  }
+
+  private updateDirection(event: Event) {
+    const dir = (event.target as Picker).value;
+
+    this.dir = dir === "rtl" ? dir : "ltr";
+    document.documentElement.dir = this.dir;
+  }
+
+  private handleTrackTheme(event: CustomEvent): void {
+    const target = event.composedPath()[0] as HTMLElement;
+
+    if (this._themeTrackers.has(target)) {
+      this._themeTrackers.delete(target);
+    } else {
+      this._themeTrackers.set(target, event.detail.callback);
+      const callback = this._themeTrackers.get(target);
+
+      if (callback) {
+        callback(this.color);
+      }
+    }
+  }
+
+  private copyText(
+    event: CustomEvent<{ text: string; message: string }>,
+  ): void {
+    copyText(event.detail.text);
+    this.addAlert(event);
+  }
+
+  private addAlert(event: CustomEvent<{ message: string }>): void {
+    const target = event.composedPath()[0] as HTMLElement;
+
+    if (!this.alerts.has(target)) {
+      const close = () => {
+        this.alerts.delete(target);
+        target.focus();
+        this.requestUpdate();
+      };
+
+      this.alerts.set(target, {
+        count: 0,
+        message: "",
+        /**
+         *  does not allow a `timeout` of less that 6000
+         * use this as a cheat to reset the timeout to 6000 for
+         * every additional alert.
+         */
+
+        element: (count: number, message: string) => {
+          import("@spectrum-web-components/toast/sp-toast.js");
+
+          return html`
+            
+              ${message} ${count > 1 ? `(${count} alerts)` : ""}
+            
+          `;
+        },
+      });
+    }
+
+    const alert = this.alerts.get(target);
+
+    this.alerts.set(target, {
+      element: alert!.element,
+      count: alert!.count + 1,
+      message: event.detail.message,
+    });
+    this.requestUpdate();
+  }
+
+  private get sideNav(): TemplateResult {
+    const navContent = html`
+      
+        
+      
+      
+    `;
+
+    import("./side-nav.js");
+
+    return html`
+      
+        ${navContent}
+      
+    `;
+  }
+
+  private get settingsContent(): TemplateResult {
+    import("@spectrum-web-components/underlay/sp-underlay.js");
+
+    return html`
+      
+      
+    `;
+  }
+
+  private get manageTheme(): TemplateResult {
+    import("./settings.js");
+
+    return html`
+      

+        

+          System
+          
+            Spectrum
+            Express
+             Spectrum 2 
+          
+        

+        

+          Color
+          
+            Light
+            Dark
+          
+        

+        

+          Scale
+          
+            Medium
+            Large
+          
+        

+        

+           Direction 
+          
+            LTR
+            RTL
+          
+        

+      

+    `;
+  }
+
+  private get header(): TemplateResult {
+    const triggerOptions: Partial = {
+      overlayOptions: {
+        type: "modal",
+      },
+      insertionOptions: {
+        el: () => this.shadowRoot?.querySelector("#body") as HTMLElement,
+        where: "afterbegin",
+      },
+    };
+
+    return html`
+      

+         this.sideNav, triggerOptions)}
+        >
+          
+        
+         this.settingsContent, triggerOptions)}
+        >
+          
+        
+      

+    `;
+  }
+
+  override render() {
+    return html`
+      
+        ${this.isNarrow ? this.header : html``}
+        

+          ${this.isNarrow ? html`` : this.sideNav}
+          

+            ${!this.isNarrow ? this.manageTheme : ""}
+            
+          

+        

+        ${this.alerts.size
+          ? html`
+              

+                ${[...this.alerts.values()].map((alert) =>
+                  alert.element(alert.count, alert.message),
+                )}
+              

+            `
+          : html``}
+      
+    `;
+  }
+
+  protected override firstUpdated(): void {
+    loadDefaults();
+    isNarrowMediaQuery.addEventListener("change", this.handleMatchMediaChange);
+  }
+
+  override updated(changes: PropertyValues) {
+    let loadStyleFragments = false;
+
+    if (changes.has("color")) {
+      if (window.localStorage) {
+        localStorage.setItem(SWC_THEME_COLOR_KEY, this.color);
+      }
+
+      if (changes.get("color")) {
+        loadStyleFragments = true;
+      }
+
+      const examples = [
+        ...this.querySelectorAll("code-example"),
+      ] as CodeExample[];
+
+      examples.forEach((example) => {
+        example.codeTheme = this.color as "dark" | "light";
+      });
+      (document.querySelector("html") as HTMLHtmlElement).style.colorScheme =
+        this.color;
+    }
+
+    if (changes.has("scale")) {
+      if (window.localStorage) {
+        localStorage.setItem(SWC_THEME_SCALE_KEY, this.scale);
+      }
+
+      if (changes.get("scale")) {
+        loadStyleFragments = true;
+      }
+    }
+
+    if (changes.has("system")) {
+      if (window.localStorage) {
+        localStorage.setItem(SWC_THEME_SYSTEM_KEY, this.system);
+      }
+
+      if (changes.get("system")) {
+        loadStyleFragments = true;
+      }
+    }
+
+    if (changes.has("dir") && window.localStorage) {
+      localStorage.setItem(SWC_THEME_DIR_KEY, this.dir);
+    }
+
+    if (loadStyleFragments) {
+      lazyStyleFragment(this.color, this.system);
+      lazyStyleFragment(this.scale, this.system);
+    }
+  }
 }
 
 customElements.define("docs-page", LayoutElement);
diff --git a/projects/documentation/src/components/search-index.ts b/projects/documentation/src/components/search-index.ts
index b14221a41e..fa02a823a5 100644
--- a/projects/documentation/src/components/search-index.ts
+++ b/projects/documentation/src/components/search-index.ts
@@ -10,83 +10,89 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import lunr from "lunr";
-import "@spectrum-web-components/popover/sp-popover.js";
-import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js";
 import "@spectrum-web-components/menu/sp-menu-group.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
-import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import { Index } from "lunr";
 
 let index: lunr.Index | undefined;
 
 export interface Result {
-	name: string;
-	label: string;
-	url: string;
+  name: string;
+  label: string;
+  url: string;
 }
 
 export interface ResultGroup {
-	name: string;
-	results: Result[];
-	maxScore: number;
+  name: string;
+  results: Result[];
+  maxScore: number;
 }
 
 function label(name: string): string {
-	return name.replace(/(?:^|-)\w/g, (match) =>
-		match.toUpperCase().replace("-", " "),
-	);
+  return name.replace(/(?:^|-)\w/g, (match) =>
+    match.toUpperCase().replace("-", " "),
+  );
 }
 
 export async function search(value: string): Promise {
-	if (!index) {
-		const searchIndexURL = new URL("./searchIndex.json", import.meta.url).href;
-		const searchIndex = await (await fetch(searchIndexURL)).json();
-		index = lunr.Index.load(searchIndex);
-	}
-
-	const collatedResults = new Map<
-		string,
-		{
-			maxScore: number;
-			results: Result[];
-		}
-	>();
-
-	const search = index.search(value);
-	for (const item of search) {
-		const { category, name, url } = JSON.parse(item.ref);
-
-		if (!collatedResults.has(category)) {
-			collatedResults.set(category, {
-				maxScore: 0,
-				results: [],
-			});
-		}
-		const catagoryData = collatedResults.get(category);
-		if (catagoryData) {
-			catagoryData.maxScore = Math.max(catagoryData.maxScore, item.score);
-			catagoryData.results.push({
-				name,
-				label: label(name),
-				url,
-			});
-		}
-	}
-
-	const result: ResultGroup[] = [];
-	for (const [name, { results, maxScore }] of collatedResults) {
-		result.push({ name, results, maxScore });
-	}
-	result.sort((a, b) => {
-		if (a.maxScore < b.maxScore) {
-			return 1;
-		}
-		if (a.maxScore > b.maxScore) {
-			return -1;
-		}
-
-		return 0;
-	});
-
-	return result;
+  if (!index) {
+    const searchIndexURL = new URL("./searchIndex.json", import.meta.url).href;
+    const searchIndex = await (await fetch(searchIndexURL)).json();
+
+    index = Index.load(searchIndex);
+  }
+
+  const collatedResults = new Map<
+    string,
+    {
+      maxScore: number;
+      results: Result[];
+    }
+  >();
+
+  const search = index.search(value);
+
+  for (const item of search) {
+    const { category, name, url } = JSON.parse(item.ref);
+
+    if (!collatedResults.has(category)) {
+      collatedResults.set(category, {
+        maxScore: 0,
+        results: [],
+      });
+    }
+
+    const catagoryData = collatedResults.get(category);
+
+    if (catagoryData) {
+      catagoryData.maxScore = Math.max(catagoryData.maxScore, item.score);
+      catagoryData.results.push({
+        name,
+        label: label(name),
+        url,
+      });
+    }
+  }
+
+  const result: ResultGroup[] = [];
+
+  for (const [name, { results, maxScore }] of collatedResults) {
+    result.push({ name, results, maxScore });
+  }
+  result.sort((a, b) => {
+    if (a.maxScore < b.maxScore) {
+      return 1;
+    }
+
+    if (a.maxScore > b.maxScore) {
+      return -1;
+    }
+
+    return 0;
+  });
+
+  return result;
 }
diff --git a/projects/documentation/src/components/side-nav-search.ts b/projects/documentation/src/components/side-nav-search.ts
index fcaef26f11..6f0cb597c0 100644
--- a/projects/documentation/src/components/side-nav-search.ts
+++ b/projects/documentation/src/components/side-nav-search.ts
@@ -11,16 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
-	CSSResultArray,
-	html,
-	LitElement,
-	PropertyValues,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	customElement,
-	property,
-	query,
+  customElement,
+  property,
+  query,
 } from "@spectrum-web-components/base/src/decorators.js";
 import { Menu } from "@spectrum-web-components/menu";
 import type { Overlay } from "@spectrum-web-components/overlay";
@@ -35,186 +35,193 @@ const stopPropagation = (event: Event): void => event.stopPropagation();
 
 @customElement("docs-search")
 export class SearchComponent extends LitElement {
-	@query("sp-menu")
-	private menuEl!: Menu;
-
-	@property({ type: Boolean })
-	private open = false;
-
-	@query("sp-overlay")
-	private overlayEl!: Overlay;
-
-	@query("sp-popover")
-	private popoverEl!: Popover;
-
-	@query("sp-search")
-	private searchField!: Search;
-
-	public static override get styles(): CSSResultArray {
-		return [sideNavSearchMenuStyles];
-	}
-
-	@property({ type: Array })
-	public results: ResultGroup[] = [];
-
-	public override focus(): void {
-		this.searchField.focus();
-	}
-
-	private handleSearchPointerdown(): void {
-		const abortController = new AbortController();
-		const { signal } = abortController;
-		const handlePointerup = () => {
-			this.overlayEl.manuallyKeepOpen();
-		};
-		const cleanup = () => abortController.abort();
-		this.searchField.addEventListener("pointerup", handlePointerup, {
-			signal,
-		});
-		document.addEventListener("pointerup", cleanup, {
-			signal,
-		});
-		document.addEventListener("pointercancel", cleanup, {
-			signal,
-		});
-	}
-
-	private handleKeydown(event: KeyboardEvent) {
-		const { code } = event;
-		const shouldFocusResultsList = code === "ArrowDown" || code === "ArrowUp";
-		if (!shouldFocusResultsList) {
-			return;
-		} else {
-			event.preventDefault();
-		}
-		this.focusResults({ shouldFocusResultsList });
-	}
-
-	private async focusResults({
-		shouldFocusResultsList,
-	}: {
-		shouldFocusResultsList?: boolean;
-	}): Promise {
-		if (shouldFocusResultsList) {
-			this.menuEl.addEventListener(
-				"focus",
-				() => {
-					this.menuEl.childItems[this.menuEl.focusedItemIndex].focused = true;
-				},
-				{
-					once: true,
-				},
-			);
-			this.menuEl.focus();
-		} else {
-			this.popoverEl.focus();
-		}
-	}
-
-	private openPopover() {
-		this.open = true;
-	}
-
-	private closePopover() {
-		this.open = false;
-	}
-
-	handleSubmit(event: Event): void {
-		event.preventDefault();
-		if (this.results.length < 0) {
-			return;
-		}
-		this.menuEl.focus();
-	}
-
-	private async updateSearchResults(): Promise {
-		const { value } = this.searchField;
-		if (value.length < 3 || !this.searchField.focused) {
-			this.closePopover();
-
-			return false;
-		}
-
-		const searchParam = `${value.trim()}*`;
-		const search = await import("./search-index.js").then(
-			({ search }) => search,
-		);
-		this.results = await search(searchParam);
-
-		this.openPopover();
-
-		return this.results.length > 0;
-	}
-
-	private handleMenuFocusout(event: FocusEvent) {
-		if (!this.menuEl.contains(event.relatedTarget as Node)) {
-			this.menuEl.childItems.forEach((item) => {
-				item.focused = false;
-			});
-		}
-	}
-
-	renderResults(): TemplateResult {
-		if (this.results.length > 0) {
-			return html`
-				
-					${this.results.map(
-						(category) => html`
-							
-								${category.name}
-								${category.results.map(
-									(result) => html`
-										
-											${result.label}
-										
-									`,
-								)}
-							
-						`,
-					)}
-				
-			`;
-		} else {
-			return html`
-				
-			`;
-		}
-	}
-
-	override render(): TemplateResult {
-		return html`
-			

-				
-				
-					
-						${this.renderResults()}
-					
-				
-			

-		`;
-	}
-
-	protected override firstUpdated(_changedProperties: PropertyValues): void {
-		super.firstUpdated(_changedProperties);
-		this.addEventListener("blur", this.closePopover);
-	}
+  @query("sp-menu")
+  private menuEl!: Menu;
+
+  @property({ type: Boolean })
+  private open = false;
+
+  @query("sp-overlay")
+  private overlayEl!: Overlay;
+
+  @query("sp-popover")
+  private popoverEl!: Popover;
+
+  @query("sp-search")
+  private searchField!: Search;
+
+  public static override get styles(): CSSResultArray {
+    return [sideNavSearchMenuStyles];
+  }
+
+  @property({ type: Array })
+  public results: ResultGroup[] = [];
+
+  public override focus(): void {
+    this.searchField.focus();
+  }
+
+  private handleSearchPointerdown(): void {
+    const abortController = new AbortController();
+    const { signal } = abortController;
+    const handlePointerup = () => {
+      this.overlayEl.manuallyKeepOpen();
+    };
+    const cleanup = () => abortController.abort();
+
+    this.searchField.addEventListener("pointerup", handlePointerup, {
+      signal,
+    });
+    document.addEventListener("pointerup", cleanup, {
+      signal,
+    });
+    document.addEventListener("pointercancel", cleanup, {
+      signal,
+    });
+  }
+
+  private handleKeydown(event: KeyboardEvent) {
+    const { code } = event;
+    const shouldFocusResultsList = code === "ArrowDown" || code === "ArrowUp";
+
+    if (!shouldFocusResultsList) {
+      return;
+    } else {
+      event.preventDefault();
+    }
+
+    this.focusResults({ shouldFocusResultsList });
+  }
+
+  private async focusResults({
+    shouldFocusResultsList,
+  }: {
+    shouldFocusResultsList?: boolean;
+  }): Promise {
+    if (shouldFocusResultsList) {
+      this.menuEl.addEventListener(
+        "focus",
+        () => {
+          this.menuEl.childItems[this.menuEl.focusedItemIndex].focused = true;
+        },
+        {
+          once: true,
+        },
+      );
+      this.menuEl.focus();
+    } else {
+      this.popoverEl.focus();
+    }
+  }
+
+  private openPopover() {
+    this.open = true;
+  }
+
+  private closePopover() {
+    this.open = false;
+  }
+
+  handleSubmit(event: Event): void {
+    event.preventDefault();
+
+    if (this.results.length < 0) {
+      return;
+    }
+
+    this.menuEl.focus();
+  }
+
+  private async updateSearchResults(): Promise {
+    const { value } = this.searchField;
+
+    if (value.length < 3 || !this.searchField.focused) {
+      this.closePopover();
+
+      return false;
+    }
+
+    const searchParam = `${value.trim()}*`;
+    const search = await import("./search-index.js").then(
+      ({ search }) => search,
+    );
+
+    this.results = await search(searchParam);
+
+    this.openPopover();
+
+    return this.results.length > 0;
+  }
+
+  private handleMenuFocusout(event: FocusEvent) {
+    if (!this.menuEl.contains(event.relatedTarget as Node)) {
+      this.menuEl.childItems.forEach((item) => {
+        item.focused = false;
+      });
+    }
+  }
+
+  renderResults(): TemplateResult {
+    if (this.results.length > 0) {
+      return html`
+        
+          ${this.results.map(
+            (category) => html`
+              
+                ${category.name}
+                ${category.results.map(
+                  (result) => html`
+                    
+                      ${result.label}
+                    
+                  `,
+                )}
+              
+            `,
+          )}
+        
+      `;
+    } else {
+      return html`
+        
+      `;
+    }
+  }
+
+  override render(): TemplateResult {
+    return html`
+      

+        
+        
+          
+            ${this.renderResults()}
+          
+        
+      

+    `;
+  }
+
+  protected override firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    this.addEventListener("blur", this.closePopover);
+  }
 }
diff --git a/projects/documentation/src/components/side-nav.ts b/projects/documentation/src/components/side-nav.ts
index 8654d2d31c..6fba8b6fc5 100644
--- a/projects/documentation/src/components/side-nav.ts
+++ b/projects/documentation/src/components/side-nav.ts
@@ -10,89 +10,91 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-	CSSResultArray,
-	html,
-	LitElement,
-	PropertyValues,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	customElement,
-	property,
+  customElement,
+  property,
 } from "@spectrum-web-components/base/src/decorators.js";
-import "./side-nav-search.js";
-import sideNavStyles from "./side-nav.css";
-import "@spectrum-web-components/sidenav/sp-sidenav.js";
 import "@spectrum-web-components/sidenav/sp-sidenav-item.js";
+import "@spectrum-web-components/sidenav/sp-sidenav.js";
 import "@spectrum-web-components/underlay/sp-underlay.js";
+import "./side-nav-search.js";
+import sideNavStyles from "./side-nav.css";
 
 @customElement("docs-side-nav")
 export class SideNav extends LitElement {
-	public static override get styles(): CSSResultArray {
-		return [sideNavStyles];
-	}
+  public static override get styles(): CSSResultArray {
+    return [sideNavStyles];
+  }
+
+  @property({ type: Boolean, reflect: true })
+  public open = false;
+
+  public toggle() {
+    this.open = !this.open;
+  }
 
-	@property({ type: Boolean, reflect: true })
-	public open = false;
+  @property({ type: Boolean })
+  public isNarrow = false;
 
-	public toggle() {
-		this.open = !this.open;
-	}
+  public override focus() {
+    const target = document.querySelector('[slot="logo"]') as HTMLAnchorElement;
 
-	@property({ type: Boolean })
-	public isNarrow = false;
+    if (!target) {
+      (this.shadowRoot!.querySelector("#logo")! as HTMLAnchorElement).focus();
 
-	public override focus() {
-		const target = document.querySelector('[slot="logo"]') as HTMLAnchorElement;
-		if (!target) {
-			(this.shadowRoot!.querySelector("#logo")! as HTMLAnchorElement).focus();
+      return;
+    }
 
-			return;
-		}
-		target.focus();
-	}
+    target.focus();
+  }
 
-	handleTransitionEvent(event: TransitionEvent): void {
-		this.dispatchEvent(new TransitionEvent(event.type));
-	}
+  handleTransitionEvent(event: TransitionEvent): void {
+    this.dispatchEvent(new TransitionEvent(event.type));
+  }
 
-	override render(): TemplateResult {
-		return html`
-			${this.isNarrow
-				? html`
-						
-					`
-				: html``}
-			
-		`;
-	}
+  override render(): TemplateResult {
+    return html`
+      ${this.isNarrow
+        ? html`
+            
+          `
+        : html``}
+      
+    `;
+  }
 
-	override updated(changes: PropertyValues) {
-		if (changes.has("open")) {
-			if (!this.open && changes.get("open")) {
-				this.dispatchEvent(new Event("close", { bubbles: true }));
-			}
-		}
-	}
+  override updated(changes: PropertyValues) {
+    if (changes.has("open")) {
+      if (!this.open && changes.get("open")) {
+        this.dispatchEvent(new Event("close", { bubbles: true }));
+      }
+    }
+  }
 }
diff --git a/projects/documentation/src/global.d.ts b/projects/documentation/src/global.d.ts
index 8db0f60277..b02e9fed9d 100644
--- a/projects/documentation/src/global.d.ts
+++ b/projects/documentation/src/global.d.ts
@@ -11,18 +11,19 @@ governing permissions and limitations under the License.
 */
 
 declare module "*.css" {
-	const content: CSSResultArray;
-	export default content;
+  const content: CSSResultArray;
+
+  export default content;
 }
 
 declare module "@open-wc/polyfills-loader" {
-	function loadPolyfills(): Promise;
-	export default loadPolyfills;
+  function loadPolyfills(): Promise;
+  export default loadPolyfills;
 }
 
 declare module "element-closest" {
-	function polyfill(window: Window): void;
-	export default polyfill;
+  function polyfill(window: Window): void;
+  export default polyfill;
 }
 
 // W3C Spec Draft http://wicg.github.io/netinfo/
@@ -34,20 +35,20 @@ declare interface WorkerNavigator extends NavigatorNetworkInformation {}
 
 // http://wicg.github.io/netinfo/#navigatornetworkinformation-interface
 declare interface NavigatorNetworkInformation {
-	readonly connection?: NetworkInformation;
+  readonly connection?: NetworkInformation;
 }
 
 // http://wicg.github.io/netinfo/#connection-types
 type ConnectionType =
-	| "bluetooth"
-	| "cellular"
-	| "ethernet"
-	| "mixed"
-	| "none"
-	| "other"
-	| "unknown"
-	| "wifi"
-	| "wimax";
+  | "bluetooth"
+  | "cellular"
+  | "ethernet"
+  | "mixed"
+  | "none"
+  | "other"
+  | "unknown"
+  | "wifi"
+  | "wimax";
 
 // http://wicg.github.io/netinfo/#effectiveconnectiontype-enum
 type EffectiveConnectionType = "2g" | "3g" | "4g" | "slow-2g";
@@ -59,18 +60,18 @@ type Millisecond = number;
 
 // http://wicg.github.io/netinfo/#networkinformation-interface
 interface NetworkInformation extends EventTarget {
-	// http://wicg.github.io/netinfo/#type-attribute
-	readonly type?: ConnectionType;
-	// http://wicg.github.io/netinfo/#effectivetype-attribute
-	readonly effectiveType?: EffectiveConnectionType;
-	// http://wicg.github.io/netinfo/#downlinkmax-attribute
-	readonly downlinkMax?: Megabit;
-	// http://wicg.github.io/netinfo/#downlink-attribute
-	readonly downlink?: Megabit;
-	// http://wicg.github.io/netinfo/#rtt-attribute
-	readonly rtt?: Millisecond;
-	// http://wicg.github.io/netinfo/#savedata-attribute
-	readonly saveData?: boolean;
-	// http://wicg.github.io/netinfo/#handling-changes-to-the-underlying-connection
-	onchange?: EventListener;
+  // http://wicg.github.io/netinfo/#type-attribute
+  readonly type?: ConnectionType;
+  // http://wicg.github.io/netinfo/#effectivetype-attribute
+  readonly effectiveType?: EffectiveConnectionType;
+  // http://wicg.github.io/netinfo/#downlinkmax-attribute
+  readonly downlinkMax?: Megabit;
+  // http://wicg.github.io/netinfo/#downlink-attribute
+  readonly downlink?: Megabit;
+  // http://wicg.github.io/netinfo/#rtt-attribute
+  readonly rtt?: Millisecond;
+  // http://wicg.github.io/netinfo/#savedata-attribute
+  readonly saveData?: boolean;
+  // http://wicg.github.io/netinfo/#handling-changes-to-the-underlying-connection
+  onchange?: EventListener;
 }
diff --git a/projects/documentation/src/index.ts b/projects/documentation/src/index.ts
index 2b04aaf08f..d6d799d719 100644
--- a/projects/documentation/src/index.ts
+++ b/projects/documentation/src/index.ts
@@ -13,19 +13,19 @@ governing permissions and limitations under the License.
 import "./components/layout.js";
 
 declare global {
-	interface Window {
-		spAlert(el: HTMLElement, message: string): void;
-	}
+  interface Window {
+    spAlert(el: HTMLElement, message: string): void;
+  }
 }
 
 window.spAlert = (el: HTMLElement, message: string): void => {
-	el.dispatchEvent(
-		new CustomEvent("alert", {
-			composed: true,
-			bubbles: true,
-			detail: {
-				message,
-			},
-		}),
-	);
+  el.dispatchEvent(
+    new CustomEvent("alert", {
+      composed: true,
+      bubbles: true,
+      detail: {
+        message,
+      },
+    }),
+  );
 };
diff --git a/projects/documentation/src/router.ts b/projects/documentation/src/router.ts
index 0bcec17269..2ea6e09dad 100644
--- a/projects/documentation/src/router.ts
+++ b/projects/documentation/src/router.ts
@@ -13,37 +13,45 @@ governing permissions and limitations under the License.
 import { Tabs } from "@spectrum-web-components/tabs";
 
 const tabs = document.querySelector("sp-tabs") as Tabs;
+
 tabs.addEventListener("change", (event: Event) => {
-	const target = event.target as Tabs;
-	const { selected } = target;
-	const { pathname } = location;
-	const isAPI = pathname.search("api") > -1;
-	const isChangelog = pathname.search("changelog") > -1;
-	const parseURLRegex = /\/api\/?|\/changelog\/?/;
-	switch (selected) {
-		case "api": {
-			if (isAPI) {
-				return;
-			}
-			const dest = pathname.replace(parseURLRegex, "/") + "api/";
-			history.pushState({}, document.title, dest);
-			break;
-		}
-		case "changelog": {
-			if (isChangelog) {
-				return;
-			}
-			const dest = pathname.replace(parseURLRegex, "/") + "changelog/";
-			history.pushState({}, document.title, dest);
-			break;
-		}
-		case "examples": {
-			if (!isAPI && !isChangelog) {
-				return;
-			}
-			const dest = pathname.replace(parseURLRegex, "/");
-			history.pushState({}, document.title, dest);
-			break;
-		}
-	}
+  const target = event.target as Tabs;
+  const { selected } = target;
+  const { pathname } = location;
+  const isAPI = pathname.search("api") > -1;
+  const isChangelog = pathname.search("changelog") > -1;
+  const parseURLRegex = /\/api\/?|\/changelog\/?/;
+
+  switch (selected) {
+    case "api": {
+      if (isAPI) {
+        return;
+      }
+
+      const dest = pathname.replace(parseURLRegex, "/") + "api/";
+
+      history.pushState({}, document.title, dest);
+      break;
+    }
+    case "changelog": {
+      if (isChangelog) {
+        return;
+      }
+
+      const dest = pathname.replace(parseURLRegex, "/") + "changelog/";
+
+      history.pushState({}, document.title, dest);
+      break;
+    }
+    case "examples": {
+      if (!isAPI && !isChangelog) {
+        return;
+      }
+
+      const dest = pathname.replace(parseURLRegex, "/");
+
+      history.pushState({}, document.title, dest);
+      break;
+    }
+  }
 });
diff --git a/projects/documentation/src/utils/templates.ts b/projects/documentation/src/utils/templates.ts
index b2fcbed155..06eaf288a1 100644
--- a/projects/documentation/src/utils/templates.ts
+++ b/projects/documentation/src/utils/templates.ts
@@ -11,22 +11,24 @@ governing permissions and limitations under the License.
 */
 
 import {
-	css,
-	type CSSResultGroup,
-	html,
-	type TemplateResult,
+  css,
+  type CSSResultGroup,
+  html,
+  type TemplateResult,
 } from "@spectrum-web-components/base";
 
 export function toHtmlTemplateString(code: string): TemplateResult {
-	const stringArray = [`${code}`] as string[] & { raw: string[] };
-	stringArray.raw = [`${code}`];
+  const stringArray = [`${code}`] as string[] & { raw: string[] };
 
-	return html(stringArray as TemplateStringsArray);
+  stringArray.raw = [`${code}`];
+
+  return html(stringArray as TemplateStringsArray);
 }
 
 export function toCssTemplateString(code: string): CSSResultGroup {
-	const stringArray = [`${code}`] as string[] & { raw: string[] };
-	stringArray.raw = [`${code}`];
+  const stringArray = [`${code}`] as string[] & { raw: string[] };
+
+  stringArray.raw = [`${code}`];
 
-	return css(stringArray as TemplateStringsArray);
+  return css(stringArray as TemplateStringsArray);
 }
diff --git a/tools/.eslintrc.json b/tools/.eslintrc.json
index bac92cda00..9327cbc2a8 100644
--- a/tools/.eslintrc.json
+++ b/tools/.eslintrc.json
@@ -1,122 +1,268 @@
 {
-	"root": true,
-	"env": {
-		"browser": true,
-		"node": false,
-		"es6": true
-	},
-	"parser": "@typescript-eslint/parser",
-	"plugins": [
-		"@typescript-eslint",
-		"notice",
-		"@spectrum-web-components",
-		"require-extensions"
-	],
-	"extends": [
-		"../.eslintrc.json",
-		"plugin:@typescript-eslint/recommended",
-		"prettier",
-		"plugin:lit-a11y/recommended",
-		"plugin:require-extensions/recommended"
-	],
-	"rules": {
-		"no-debugger": 2,
-		"no-console": [
-			"error",
-			{
-				"allow": ["warn", "error"]
-			}
-		],
-		"@spectrum-web-components/prevent-argument-names": [
-			"error",
-			["e", "ev", "evt", "err"]
-		],
-		"@spectrum-web-components/document-active-element": ["error"],
-		"notice/notice": [
-			"error",
-			{
-				"mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.",
-				"templateFile": "config/license.js"
-			}
-		],
-		"@typescript-eslint/explicit-function-return-type": [
-			1,
-			{
-				"allowExpressions": true
-			}
-		],
-		"sort-imports": [
-			"error",
-			{
-				"ignoreCase": true,
-				"ignoreDeclarationSort": true,
-				"ignoreMemberSort": false,
-				"allowSeparatedGroups": false
-			}
-		],
-		"lit-a11y/click-events-have-key-events": [
-			"error",
-			{
-				"allowList": [
-					"sp-button",
-					"sp-action-button",
-					"sp-checkbox",
-					"sp-radio",
-					"sp-switch",
-					"sp-menu-item",
-					"sp-clear-button",
-					"sp-underlay"
-				]
-			}
-		],
-		"@typescript-eslint/no-unused-vars": [
-			"error",
-			{
-				"argsIgnorePattern": "^_"
-			}
-		]
-	},
-	"overrides": [
-		{
-			"files": ["*.test.ts", "*.stories.ts", "**/benchmark/*.ts"],
-			"rules": {
-				"@spectrum-web-components/document-active-element": ["off"],
-				"lit-a11y/no-autofocus": ["off"],
-				"lit-a11y/tabindex-no-positive": ["off"]
-			}
-		},
-		{
-			"files": ["**/icons/*.ts", "**/src/elements/*.ts"],
-			"rules": {
-				"sort-imports": ["off"]
-			}
-		},
-		{
-			"files": ["*.stories.ts"],
-			"rules": {
-				"no-console": ["off"]
-			}
-		},
-		{
-			"files": ["Picker.ts"],
-			"rules": {
-				"lit-a11y/click-events-have-key-events": [
-					"error",
-					{
-						"allowList": [
-							"sp-button",
-							"sp-action-button",
-							"sp-checkbox",
-							"sp-radio",
-							"sp-switch",
-							"sp-menu-item",
-							"sp-clear-button",
-							"sp-underlay",
-							"sp-popover"
-						]
-					}
-				]
-			}
-		}
-	]
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:lit-a11y/recommended",
+    "plugin:require-extensions/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "overrides": [
+    {
+      "files": ["*.test.ts", "*.stories.ts", "**/benchmark/*.ts"],
+      "rules": {
+        "@spectrum-web-components/document-active-element": ["off"],
+        "lit-a11y/no-autofocus": ["off"],
+        "lit-a11y/tabindex-no-positive": ["off"]
+      }
+    },
+    {
+      "files": ["**/icons/*.ts", "**/src/elements/*.ts"],
+      "rules": {
+        "sort-imports": ["off"]
+      }
+    },
+    {
+      "files": ["*.stories.ts"],
+      "rules": {
+        "no-console": ["off"]
+      }
+    },
+    {
+      "files": ["Picker.ts"],
+      "rules": {
+        "lit-a11y/click-events-have-key-events": [
+          "error",
+          {
+            "allowList": [
+              "sp-button",
+              "sp-action-button",
+              "sp-checkbox",
+              "sp-radio",
+              "sp-switch",
+              "sp-menu-item",
+              "sp-clear-button",
+              "sp-underlay",
+              "sp-popover"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "extends": ["plugin:jsonc/recommended-with-jsonc"],
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "jsonc/sort-keys": [
+          "warn",
+          {
+            // Hits the all properties
+            "hasProperties": ["type"],
+            "order": [
+              "type",
+              "properties",
+              "items",
+              "required",
+              "minItems",
+              "additionalProperties",
+              "additionalItems"
+            ],
+            "pathPattern": ".*"
+          },
+          {
+            "order": {
+              "type": "asc"
+            },
+            "pathPattern": ".*"
+          }
+        ],
+        "notice/notice": 0
+      }
+    },
+    {
+      "files": ["package.json"],
+      "rules": {
+        "jsonc/sort-keys": [
+          "warn",
+          {
+            "order": [
+              "$schema",
+              "private",
+              "name",
+              "version",
+              "description",
+              "license",
+              "author",
+              "maintainers",
+              "contributors",
+              "homepage",
+              "repository",
+              "bugs",
+              "type",
+              "exports",
+              "main",
+              "module",
+              "browser",
+              "man",
+              "preferGlobal",
+              "bin",
+              "files",
+              "directories",
+              "scripts",
+              "config",
+              "sideEffects",
+              "types",
+              "typings",
+              "workspaces",
+              "resolutions",
+              "dependencies",
+              "bundleDependencies",
+              "bundledDependencies",
+              "peerDependencies",
+              "peerDependenciesMeta",
+              "optionalDependencies",
+              "devDependencies",
+              "keywords",
+              "engines",
+              "engineStrict",
+              "os",
+              "cpu",
+              "publishConfig"
+            ],
+            "pathPattern": "^$"
+          },
+          {
+            "order": ["type", "url", "directory"],
+            "pathPattern": "^repository$"
+          },
+          {
+            "order": {
+              "type": "asc"
+            },
+            "pathPattern": ".*"
+          }
+        ]
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@spectrum-web-components",
+    "@stylistic",
+    "@typescript-eslint",
+    "import",
+    "notice",
+    "require-extensions"
+  ],
+  "root": true,
+  "rules": {
+    "@spectrum-web-components/document-active-element": ["error"],
+    "@spectrum-web-components/prevent-argument-names": [
+      "error",
+      ["e", "ev", "evt", "err"]
+    ],
+    "@stylistic/padding-line-between-statements": [
+      "error",
+      {
+        "blankLine": "always",
+        "next": ["return", "if", "try", "switch"],
+        "prev": "*"
+      },
+      {
+        "blankLine": "always",
+        "next": "*",
+        "prev": ["const", "let", "var", "if", "try", "switch"]
+      },
+      {
+        "blankLine": "any",
+        "next": ["const", "let", "var"],
+        "prev": ["const", "let", "var"]
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": [
+      1,
+      {
+        "allowExpressions": true
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "curly": ["error", "all"],
+    "func-call-spacing": ["warn", "never"],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never"
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "indent": [
+      "warn",
+      2,
+      {
+        "SwitchCase": 1,
+        "ignoredNodes": ["TemplateLiteral *"]
+      }
+    ],
+    "linebreak-style": ["warn", "unix"],
+    "lit-a11y/click-events-have-key-events": [
+      "error",
+      {
+        "allowList": [
+          "sp-button",
+          "sp-action-button",
+          "sp-checkbox",
+          "sp-radio",
+          "sp-switch",
+          "sp-menu-item",
+          "sp-clear-button",
+          "sp-underlay"
+        ]
+      }
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": ["warn", "error"]
+      }
+    ],
+    "no-debugger": 2,
+    "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
+    "notice/notice": [
+      "error",
+      {
+        "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.",
+        "templateFile": "config/license.js"
+      }
+    ],
+    "quotes": [
+      "warn",
+      "double",
+      {
+        "avoidEscape": true
+      }
+    ],
+    "semi": ["warn", "always"],
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true
+      }
+    ],
+    "space-before-blocks": ["warn", "always"]
+  }
 }

From 98375a74842ee79d1eb736fcd2af239e7429a3b5 Mon Sep 17 00:00:00 2001
From: Casey Eickhoff 
Date: Fri, 20 Dec 2024 12:40:40 -0700
Subject: [PATCH 7/9] chore: linted packages and tools

---
 packages/accordion/sp-accordion-item.ts       |   12 +-
 packages/accordion/sp-accordion.ts            |   12 +-
 packages/accordion/src/Accordion.ts           |  244 +-
 packages/accordion/src/AccordionItem.ts       |  308 +-
 packages/accordion/src/index.ts               |    4 +-
 .../accordion-densities-compact.stories.ts    |   12 +-
 .../accordion-densities-spacious.stories.ts   |   12 +-
 .../stories/accordion-sizes.stories.ts        |    4 +-
 .../accordion/stories/accordion.stories.ts    |   44 +-
 packages/accordion/stories/args.ts            |  108 +-
 packages/accordion/stories/index.ts           |   73 +-
 packages/accordion/test/a11y-tree.test.ts     |   42 +-
 .../accordion/test/benchmark/basic-test.ts    |   48 +-
 packages/accordion/test/controlled.test.ts    |   54 +-
 packages/accordion/test/declarative.test.ts   |  133 +-
 packages/accordion/test/dev-mode.test.ts      |   12 +-
 packages/accordion/test/imperative.test.ts    |  282 +-
 packages/accordion/test/keyboard.test.ts      |  427 +-
 packages/accordion/test/memory.test.ts        |    8 +-
 packages/action-bar/sp-action-bar.ts          |   12 +-
 packages/action-bar/src/ActionBar.ts          |  232 +-
 packages/action-bar/src/index.ts              |    2 +-
 .../action-bar/stories/action-bar.stories.ts  |  144 +-
 packages/action-bar/stories/args.ts           |   66 +-
 packages/action-bar/stories/template.ts       |   52 +-
 .../action-bar/test/action-bar-memory.test.ts |    4 +-
 packages/action-bar/test/action-bar.test.ts   |  156 +-
 .../action-bar/test/benchmark/basic-test.ts   |   10 +-
 packages/action-button/sp-action-button.ts    |   12 +-
 packages/action-button/src/ActionButton.ts    |  559 ++-
 packages/action-button/src/index.ts           |    2 +-
 .../action-button-black-quiet.stories.ts      |   46 +-
 .../stories/action-button-black.stories.ts    |   36 +-
 .../action-button-emphasized-quiet.stories.ts |   40 +-
 .../action-button-emphasized.stories.ts       |   30 +-
 .../stories/action-button-quiet.stories.ts    |   30 +-
 .../stories/action-button-standard.stories.ts |   20 +-
 .../action-button-white-quiet.stories.ts      |   46 +-
 .../stories/action-button-white.stories.ts    |   36 +-
 .../stories/action-button.stories.ts          |   53 +-
 packages/action-button/stories/index.ts       |  180 +-
 .../test/action-button-memory.test.ts         |    4 +-
 .../action-button/test/action-button.test.ts  |  607 ++-
 .../test/benchmark/basic-test.ts              |   30 +-
 packages/action-group/sp-action-group.ts      |   12 +-
 packages/action-group/src/ActionGroup.ts      | 1086 ++---
 packages/action-group/src/index.ts            |    2 +-
 .../stories/action-group-sizes.stories.ts     |  252 +-
 .../stories/action-group-tooltip.stories.ts   |  672 +--
 .../stories/action-group.stories.ts           |  582 ++-
 .../test/action-group-memory.test.ts          |    4 +-
 .../action-group/test/action-group.test.ts    | 2844 ++++++-------
 .../action-group/test/benchmark/basic-test.ts |   18 +-
 packages/action-menu/sp-action-menu.ts        |   12 +-
 packages/action-menu/src/ActionMenu.ts        |  240 +-
 packages/action-menu/src/index.ts             |    2 +-
 .../stories/action-menu-sizes.stories.ts      |   12 +-
 .../stories/action-menu.stories.ts            |  762 ++--
 packages/action-menu/stories/index.ts         |  138 +-
 packages/action-menu/sync/sp-action-menu.ts   |    4 +-
 .../test/action-menu-directive.test.ts        |   54 +-
 .../test/action-menu-groups.test.ts           |  198 +-
 .../test/action-menu-memory.test.ts           |    4 +-
 .../action-menu/test/benchmark/test-basic.ts  |   34 +-
 .../test/benchmark/test-directive.ts          |   40 +-
 .../action-menu/test/benchmark/test-lazy.ts   |   64 +-
 .../benchmark/test-open-close-directive.ts    |  126 +-
 .../test/benchmark/test-open-close.ts         |  120 +-
 packages/action-menu/test/index.ts            | 1476 +++----
 packages/alert-banner/sp-alert-banner.ts      |   12 +-
 packages/alert-banner/src/AlertBanner.ts      |  315 +-
 packages/alert-banner/src/index.ts            |    2 +-
 .../stories/alert-banner.stories.ts           |   80 +-
 packages/alert-banner/stories/args.ts         |   87 +-
 packages/alert-banner/stories/index.ts        |   38 +-
 .../test/alert-banner-memory.test.ts          |    4 +-
 .../alert-banner/test/alert-banner.test.ts    |  373 +-
 .../alert-banner/test/benchmark/basic-test.ts |    8 +-
 packages/alert-dialog/sp-alert-dialog.ts      |   12 +-
 packages/alert-dialog/src/AlertDialog.ts      |  454 +-
 packages/alert-dialog/src/index.ts            |    2 +-
 .../stories/alert-dialog.stories.ts           |  305 +-
 .../test/alert-dialog-memory.test.ts          |    4 +-
 .../alert-dialog/test/alert-dialog.test.ts    |  136 +-
 .../alert-dialog/test/benchmark/basic-test.ts |   52 +-
 packages/asset/sp-asset.ts                    |   12 +-
 packages/asset/src/Asset.ts                   |  130 +-
 packages/asset/src/index.ts                   |    2 +-
 packages/asset/stories/asset.stories.ts       |   18 +-
 packages/asset/test/asset-memory.test.ts      |    4 +-
 packages/asset/test/asset.test.ts             |   32 +-
 packages/asset/test/benchmark/basic-test.ts   |   10 +-
 packages/avatar/sp-avatar.ts                  |   12 +-
 packages/avatar/src/Avatar.ts                 |  176 +-
 packages/avatar/src/index.ts                  |    2 +-
 packages/avatar/stories/avatar.stories.ts     |   84 +-
 packages/avatar/stories/images.ts             |    2 +-
 packages/avatar/test/avatar-memory.test.ts    |    4 +-
 packages/avatar/test/avatar.test.ts           |  216 +-
 packages/avatar/test/benchmark/test-basic.ts  |   14 +-
 packages/badge/sp-badge.ts                    |   12 +-
 packages/badge/src/Badge.ts                   |  215 +-
 packages/badge/src/index.ts                   |    2 +-
 packages/badge/stories/badge.stories.ts       |  223 +-
 packages/badge/test/badge-memory.test.ts      |    4 +-
 packages/badge/test/badge.test.ts             |  172 +-
 packages/badge/test/benchmark/basic-test.ts   |   16 +-
 packages/breadcrumbs/sp-breadcrumb-item.ts    |   10 +-
 packages/breadcrumbs/sp-breadcrumbs.ts        |   10 +-
 packages/breadcrumbs/src/BreadcrumbItem.ts    |  200 +-
 packages/breadcrumbs/src/Breadcrumbs.ts       |  597 ++-
 packages/breadcrumbs/src/index.ts             |    4 +-
 packages/breadcrumbs/stories/args.ts          |   58 +-
 .../stories/breadcrumbs.stories.ts            |  102 +-
 packages/breadcrumbs/stories/template.ts      |  120 +-
 .../breadcrumbs/test/benchmark/basic-test.ts  |   48 +-
 .../breadcrumbs/test/breadcrumb-item.test.ts  |  192 +-
 packages/breadcrumbs/test/breadcrumbs.test.ts |  310 +-
 packages/button-group/sp-button-group.ts      |   12 +-
 packages/button-group/src/ButtonGroup.ts      |   62 +-
 packages/button-group/src/index.ts            |    2 +-
 .../stories/button-group-sizes.stories.ts     |   38 +-
 .../stories/button-group.stories.ts           |   56 +-
 .../button-group/test/benchmark/basic-test.ts |   18 +-
 .../test/button-group-memory.test.ts          |    4 +-
 .../button-group/test/button-group.test.ts    |   32 +-
 packages/button/sp-button.ts                  |   12 +-
 packages/button/sp-clear-button.ts            |   12 +-
 packages/button/sp-close-button.ts            |   12 +-
 packages/button/src/Button.ts                 |  357 +-
 packages/button/src/ButtonBase.ts             |  462 +-
 packages/button/src/ClearButton.ts            |  118 +-
 packages/button/src/CloseButton.ts            |  116 +-
 packages/button/src/StyledButton.ts           |    2 +-
 packages/button/src/index.ts                  |   10 +-
 .../button-accent-fill-pending.stories.ts     |   36 +-
 .../button-accent-fill-sizes.stories.ts       |   34 +-
 .../stories/button-accent-fill.stories.ts     |   58 +-
 .../button-accent-outline-pending.stories.ts  |   36 +-
 .../button-accent-outline-sizes.stories.ts    |   34 +-
 .../stories/button-accent-outline.stories.ts  |   58 +-
 .../button-black-fill-pending.stories.ts      |   36 +-
 .../button-black-fill-sizes.stories.ts        |   36 +-
 .../stories/button-black-fill.stories.ts      |   62 +-
 .../button-black-outline-pending.stories.ts   |   36 +-
 .../button-black-outline-sizes.stories.ts     |   36 +-
 .../stories/button-black-outline.stories.ts   |   62 +-
 .../button-negative-fill-pending.stories.ts   |   36 +-
 .../button-negative-fill-sizes.stories.ts     |   34 +-
 .../stories/button-negative-fill.stories.ts   |   58 +-
 ...button-negative-outline-pending.stories.ts |   36 +-
 .../button-negative-outline-sizes.stories.ts  |   34 +-
 .../button-negative-outline.stories.ts        |   58 +-
 .../button-primary-fill-pending.stories.ts    |   36 +-
 .../button-primary-fill-sizes.stories.ts      |   34 +-
 .../stories/button-primary-fill.stories.ts    |   74 +-
 .../button-primary-outline-pending.stories.ts |   36 +-
 .../button-primary-outline-sizes.stories.ts   |   34 +-
 .../stories/button-primary-outline.stories.ts |   58 +-
 .../button-secondary-fill-pending.stories.ts  |   36 +-
 .../button-secondary-fill-sizes.stories.ts    |   34 +-
 .../stories/button-secondary-fill.stories.ts  |   58 +-
 ...utton-secondary-outline-pending.stories.ts |   36 +-
 .../button-secondary-outline-sizes.stories.ts |   34 +-
 .../button-secondary-outline.stories.ts       |   58 +-
 .../button-white-fill-pending.stories.ts      |   36 +-
 .../button-white-fill-sizes.stories.ts        |   36 +-
 .../stories/button-white-fill.stories.ts      |   62 +-
 .../button-white-outline-pending.stories.ts   |   36 +-
 .../button-white-outline-sizes.stories.ts     |   36 +-
 .../stories/button-white-outline.stories.ts   |   62 +-
 packages/button/stories/index.ts              |  344 +-
 packages/button/stories/template.ts           |   60 +-
 packages/button/test/benchmark/test-basic.ts  |   20 +-
 packages/button/test/button-memory.test.ts    |    4 +-
 packages/button/test/button.test.ts           | 1471 ++++---
 packages/button/test/clear-button.test.ts     |   32 +-
 packages/button/test/close-button.test.ts     |   32 +-
 packages/card/sp-card.ts                      |   12 +-
 packages/card/src/Card.ts                     |  620 +--
 packages/card/src/index.ts                    |    2 +-
 packages/card/stories/card.stories.ts         |  660 +--
 packages/card/stories/images.ts               |    4 +-
 packages/card/test/benchmark/test-basic.ts    |   24 +-
 packages/card/test/card-memory.test.ts        |    4 +-
 packages/card/test/card.test.ts               |  719 ++--
 packages/checkbox/sp-checkbox.ts              |   12 +-
 packages/checkbox/src/Checkbox.ts             |  348 +-
 packages/checkbox/src/CheckboxBase.ts         |   10 +-
 packages/checkbox/src/CheckboxMixin.ts        |  112 +-
 packages/checkbox/src/index.ts                |    2 +-
 .../stories/checkbox-sizes.stories.ts         |   86 +-
 packages/checkbox/stories/checkbox.stories.ts |  144 +-
 .../checkbox/test/benchmark/test-basic.ts     |   12 +-
 .../checkbox/test/checkbox-memory.test.ts     |    4 +-
 packages/checkbox/test/checkbox.test.ts       |  680 +--
 packages/coachmark/sp-coach-indicator.ts      |   12 +-
 packages/coachmark/sp-coachmark.ts            |   12 +-
 packages/coachmark/src/CoachIndicator.ts      |   42 +-
 packages/coachmark/src/Coachmark.ts           |  515 ++-
 packages/coachmark/src/CoachmarkItem.ts       |   28 +-
 packages/coachmark/src/index.ts               |    6 +-
 .../stories/coach-indicator-static.stories.ts |   28 +-
 .../stories/coach-indicator.stories.ts        |   16 +-
 .../coachmark/stories/coachmark.stories.ts    |  548 ++-
 packages/coachmark/stories/images.ts          |    6 +-
 .../coachmark/test/benchmark/basic-test.ts    |   39 +-
 .../test/coach-indicator-memory.test.ts       |   10 +-
 .../coachmark/test/coach-indicator.test.ts    |   36 +-
 .../coachmark/test/coach-mark-memory.test.ts  |    4 +-
 packages/coachmark/test/coachmark.test.ts     |  460 +-
 packages/color-area/sp-color-area.ts          |   12 +-
 packages/color-area/src/ColorArea.ts          | 1080 ++---
 packages/color-area/src/index.ts              |    2 +-
 .../color-area/stories/color-area.stories.ts  |  278 +-
 .../color-area/test/benchmark/basic-test.ts   |   10 +-
 .../color-area/test/color-area-memory.test.ts |   10 +-
 packages/color-area/test/color-area.test.ts   | 1847 ++++----
 packages/color-field/sp-color-field.ts        |   10 +-
 packages/color-field/src/ColorField.ts        |  132 +-
 packages/color-field/src/index.ts             |    2 +-
 packages/color-field/stories/args.ts          |   98 +-
 .../stories/color-field-sizes.stories.ts      |   20 +-
 .../stories/color-field.stories.ts            |   66 +-
 packages/color-field/stories/template.ts      |   54 +-
 .../color-field/test/benchmark/basic-test.ts  |    8 +-
 .../test/color-field-memory.test.ts           |    6 +-
 packages/color-field/test/color-field.test.ts |  176 +-
 packages/color-handle/sp-color-handle.ts      |   12 +-
 packages/color-handle/src/ColorHandle.ts      |   92 +-
 packages/color-handle/src/index.ts            |    2 +-
 .../stories/color-handle.stories.ts           |   42 +-
 .../color-handle/test/benchmark/basic-test.ts |   10 +-
 .../test/color-handle-memory.test.ts          |   10 +-
 .../color-handle/test/color-handle.test.ts    |  180 +-
 packages/color-loupe/sp-color-loupe.ts        |   12 +-
 packages/color-loupe/src/ColorLoupe.ts        |  117 +-
 packages/color-loupe/src/index.ts             |    2 +-
 .../stories/color-loupe.stories.ts            |   14 +-
 .../color-loupe/test/benchmark/basic-test.ts  |   10 +-
 .../test/color-loupe-memory.test.ts           |   10 +-
 packages/color-loupe/test/color-loupe.test.ts |   48 +-
 packages/color-slider/sp-color-slider.ts      |   12 +-
 packages/color-slider/src/ColorSlider.ts      |  686 ++-
 packages/color-slider/src/index.ts            |    2 +-
 .../stories/color-slider.stories.ts           |  158 +-
 packages/color-slider/stories/images.ts       |    2 +-
 .../color-slider/test/benchmark/basic-test.ts |   10 +-
 .../test/color-slider-memory.test.ts          |   10 +-
 .../color-slider/test/color-slider.test.ts    | 1445 ++++---
 packages/color-wheel/sp-color-wheel.ts        |   12 +-
 packages/color-wheel/src/ColorWheel.ts        |  812 ++--
 packages/color-wheel/src/index.ts             |    2 +-
 .../stories/color-wheel.stories.ts            |  156 +-
 .../color-wheel/test/benchmark/basic-test.ts  |   10 +-
 .../test/color-wheel-memory.test.ts           |   10 +-
 packages/color-wheel/test/color-wheel.test.ts | 1089 +++--
 packages/combobox/sp-combobox.ts              |   10 +-
 packages/combobox/src/Combobox.ts             | 1119 +++--
 packages/combobox/src/index.ts                |    2 +-
 packages/combobox/stories/args.ts             |  135 +-
 .../stories/combobox-sizes.stories.ts         |   28 +-
 packages/combobox/stories/combobox.stories.ts |  322 +-
 packages/combobox/stories/index.ts            |  584 +--
 .../combobox/test/benchmark/basic-test.ts     |   20 +-
 .../combobox/test/benchmark/light-dom-test.ts |   36 +-
 packages/combobox/test/combobox-a11y.test.ts  |  694 ++-
 .../combobox/test/combobox-memory.test.ts     |   10 +-
 packages/combobox/test/combobox.data.test.ts  |  788 ++--
 packages/combobox/test/combobox.test.ts       | 1599 ++++---
 packages/combobox/test/helpers.ts             |   88 +-
 packages/combobox/test/index.ts               |  502 +--
 .../contextual-help/sp-contextual-help.ts     |   10 +-
 .../contextual-help/src/ContextualHelp.ts     |  290 +-
 packages/contextual-help/src/index.ts         |    2 +-
 packages/contextual-help/stories/args.ts      |  172 +-
 .../stories/contextual-help.stories.ts        |   46 +-
 packages/contextual-help/stories/index.ts     |   43 +-
 .../test/benchmark/basic-test.ts              |   10 +-
 .../test/contextual-help-memory.test.ts       |    4 +-
 .../test/contextual-help.test.ts              |  174 +-
 packages/dialog/sp-dialog-base.ts             |   12 +-
 packages/dialog/sp-dialog-wrapper.ts          |   12 +-
 packages/dialog/sp-dialog.ts                  |   12 +-
 packages/dialog/src/Dialog.ts                 |  304 +-
 packages/dialog/src/DialogBase.ts             |  417 +-
 packages/dialog/src/DialogWrapper.ts          |  341 +-
 packages/dialog/src/index.ts                  |    6 +-
 .../dialog/stories/dialog-base.stories.ts     |  405 +-
 .../dialog/stories/dialog-wrapper.stories.ts  | 1127 +++--
 packages/dialog/stories/dialog.stories.ts     |  924 ++--
 packages/dialog/stories/images.ts             |    4 +-
 packages/dialog/stories/index.ts              |   70 +-
 packages/dialog/test/benchmark/basic-test.ts  |   32 +-
 packages/dialog/test/dialog-base.test.ts      |  210 +-
 packages/dialog/test/dialog-memory.test.ts    |    4 +-
 packages/dialog/test/dialog-wrapper.test.ts   |  703 ++-
 packages/dialog/test/dialog.test.ts           |  466 +-
 packages/divider/sp-divider.ts                |   12 +-
 packages/divider/src/Divider.ts               |   60 +-
 packages/divider/src/index.ts                 |    2 +-
 packages/divider/stories/divider.stories.ts   |  169 +-
 .../divider/stories/typography-decorator.ts   |   38 +-
 packages/divider/test/benchmark/basic-test.ts |   10 +-
 packages/divider/test/divider-memory.test.ts  |   10 +-
 packages/divider/test/divider.test.ts         |   63 +-
 packages/dropzone/sp-dropzone.ts              |   12 +-
 packages/dropzone/src/Dropzone.ts             |  244 +-
 packages/dropzone/src/index.ts                |    2 +-
 packages/dropzone/stories/dropzone.stories.ts |  306 +-
 .../dropzone/test/benchmark/test-basic.ts     |   50 +-
 .../dropzone/test/dropzone-memory.test.ts     |   10 +-
 packages/dropzone/test/dropzone.test.ts       |  336 +-
 packages/dropzone/test/test-svg.ts            |  120 +-
 packages/field-group/sp-field-group.ts        |   12 +-
 packages/field-group/src/FieldGroup.ts        |   94 +-
 packages/field-group/src/index.ts             |    2 +-
 .../stories/field-group.stories.ts            |   48 +-
 .../field-group/test/benchmark/basic-test.ts  |   22 +-
 .../test/field-group-memory.test.ts           |   10 +-
 packages/field-group/test/field-group.test.ts |  232 +-
 packages/field-label/sp-field-label.ts        |   12 +-
 packages/field-label/src/FieldLabel.ts        |  281 +-
 packages/field-label/src/index.ts             |    2 +-
 .../stories/field-label.stories.ts            |  194 +-
 .../field-label/test/benchmark/basic-test.ts  |   10 +-
 .../test/field-label-memory.test.ts           |   10 +-
 packages/field-label/test/field-label.test.ts |  470 +-
 packages/help-text/sp-help-text.ts            |   12 +-
 packages/help-text/src/HelpText.ts            |   68 +-
 .../help-text/src/HelpTextManagedElement.ts   |    4 +-
 packages/help-text/src/HelpTextManager.ts     |  226 +-
 packages/help-text/src/index.ts               |    2 +-
 packages/help-text/src/manage-help-text.ts    |   36 +-
 .../stories/help-text-sizes.stories.ts        |   48 +-
 .../help-text/stories/help-text.stories.ts    |  184 +-
 .../help-text/test/benchmark/basic-test.ts    |   10 +-
 .../help-text/test/help-test-memory.test.ts   |   10 +-
 packages/help-text/test/help-text.test.ts     |   72 +-
 packages/icon/sp-icon.ts                      |   12 +-
 packages/icon/src/Icon.ts                     |  228 +-
 packages/icon/src/IconBase.ts                 |  102 +-
 packages/icon/src/index.ts                    |    4 +-
 packages/icon/stories/icon.stories.ts         |  120 +-
 packages/icon/stories/images.ts               |    2 +-
 packages/icon/test/benchmark/test-basic.ts    |   18 +-
 packages/icon/test/icon-memory.test.ts        |   10 +-
 packages/icon/test/icon.test.ts               |  310 +-
 packages/icons-ui/src/custom-tag.ts           |   29 +-
 packages/icons-ui/src/index.ts                |    6 +-
 packages/icons-ui/stories/icons-ui.stories.ts |  172 +-
 .../test/benchmark/test-attribute-many.ts     |  106 +-
 .../icons-ui/test/benchmark/test-attribute.ts |  106 +-
 .../test/benchmark/test-injected-many.ts      |  200 +-
 .../icons-ui/test/benchmark/test-injected.ts  |   82 +-
 .../test/benchmark/test-registered-many.ts    |  196 +-
 .../test/benchmark/test-registered.ts         |  100 +-
 packages/icons-workflow/src/DefaultIcon.ts    |   48 +-
 packages/icons-workflow/src/custom-tag.ts     |   29 +-
 packages/icons-workflow/src/index.ts          |    6 +-
 .../stories/icons-workflow.stories.ts         |  188 +-
 .../test/benchmark/test-attribute-many.ts     |   82 +-
 .../test/benchmark/test-attribute.ts          |   82 +-
 .../test/benchmark/test-injected-many.ts      |  152 +-
 .../test/benchmark/test-injected.ts           |   82 +-
 .../test/benchmark/test-registered-many.ts    |  148 +-
 .../test/benchmark/test-registered.ts         |   78 +-
 packages/icons/sp-icons-large.ts              |   12 +-
 packages/icons/sp-icons-medium.ts             |   12 +-
 packages/icons/src/IconsLarge.ts              |   42 +-
 packages/icons/src/IconsMedium.ts             |   42 +-
 packages/icons/src/index.ts                   |    4 +-
 packages/icons/stories/icons.stories.ts       |   40 +-
 packages/icons/test/benchmark/test-basic.ts   |   10 +-
 packages/icons/test/icons-memory.test.ts      |   10 +-
 packages/icons/test/icons.test.ts             |   50 +-
 packages/iconset/src/iconset-registry.ts      |   96 +-
 packages/iconset/src/iconset-svg.ts           |  261 +-
 packages/iconset/src/iconset.ts               |  190 +-
 packages/iconset/src/index.ts                 |    6 +-
 packages/iconset/stories/icons-demo.ts        |  552 ++-
 packages/iconset/test/iconset.test.ts         |  220 +-
 .../sp-illustrated-message.ts                 |   12 +-
 .../src/IllustratedMessage.ts                 |   70 +-
 packages/illustrated-message/src/index.ts     |    2 +-
 .../stories/illustrated-message.stories.ts    |   26 +-
 .../test/benchmark/test-basic.ts              |   36 +-
 .../test/illustrated-message-memory.test.ts   |   10 +-
 .../test/illustrated-message.test.ts          |   54 +-
 packages/infield-button/sp-infield-button.ts  |   10 +-
 packages/infield-button/src/InfieldButton.ts  |   84 +-
 packages/infield-button/src/index.ts          |    2 +-
 packages/infield-button/stories/index.ts      |  198 +-
 .../stories/infield-button-sizes.stories.ts   |  128 +-
 .../stories/infield-button.stories.ts         |   52 +-
 .../test/benchmark/basic-test.ts              |   10 +-
 .../test/infield-button-memory.test.ts        |   10 +-
 .../test/infield-button.test.ts               |   40 +-
 packages/link/sp-link.ts                      |   12 +-
 packages/link/src/Link.ts                     |   54 +-
 packages/link/src/index.ts                    |    2 +-
 packages/link/stories/link.stories.ts         |  136 +-
 packages/link/test/benchmark/test-basic.ts    |    8 +-
 packages/link/test/link-memory.test.ts        |   10 +-
 packages/link/test/link.test.ts               |  108 +-
 packages/menu/sp-menu-divider.ts              |   12 +-
 packages/menu/sp-menu-group.ts                |   12 +-
 packages/menu/sp-menu-item.ts                 |   12 +-
 packages/menu/sp-menu.ts                      |   12 +-
 packages/menu/src/Menu.ts                     | 1679 ++++----
 packages/menu/src/MenuDivider.ts              |   30 +-
 packages/menu/src/MenuGroup.ts                |  119 +-
 packages/menu/src/MenuItem.ts                 | 1117 +++--
 packages/menu/src/index.ts                    |    8 +-
 packages/menu/stories/index.ts                |  150 +-
 packages/menu/stories/menu-divider.stories.ts |   52 +-
 packages/menu/stories/menu-group.stories.ts   |  232 +-
 .../stories/menu-item.disconnected.stories.ts |  275 +-
 packages/menu/stories/menu-item.stories.ts    |  118 +-
 packages/menu/stories/menu-sizes.stories.ts   |    4 +-
 packages/menu/stories/menu.stories.ts         |  684 +--
 packages/menu/stories/submenu.stories.ts      |  716 ++--
 packages/menu/test/benchmark/test-basic.ts    |   40 +-
 packages/menu/test/menu-group.test.ts         |  887 ++--
 packages/menu/test/menu-item.test.ts          |  436 +-
 packages/menu/test/menu-memory.test.ts        |    4 +-
 packages/menu/test/menu-selects.test.ts       | 1068 ++---
 packages/menu/test/menu.test.ts               | 1275 +++---
 packages/menu/test/submenu.test.ts            | 2163 +++++-----
 packages/meter/sp-meter.ts                    |   12 +-
 packages/meter/src/Meter.ts                   |  218 +-
 packages/meter/src/index.ts                   |    2 +-
 packages/meter/stories/meter-sizes.stories.ts |   16 +-
 packages/meter/stories/meter.stories.ts       |   70 +-
 packages/meter/test/benchmark/basic-test.ts   |   10 +-
 packages/meter/test/meter-memory.test.ts      |   10 +-
 packages/meter/test/meter.test.ts             |  232 +-
 packages/number-field/sp-number-field.ts      |   12 +-
 packages/number-field/src/NumberField.ts      | 1739 ++++----
 packages/number-field/src/index.ts            |    2 +-
 .../stories/number-field-sizes.stories.ts     |   44 +-
 .../stories/number-field.stories.ts           |  792 ++--
 .../number-field/test/benchmark/basic-test.ts |   10 +-
 packages/number-field/test/helpers.ts         |   82 +-
 packages/number-field/test/inputs.test.ts     |  952 ++---
 .../test/number-field-memory.test.ts          |    4 +-
 .../number-field/test/number-field.test.ts    | 3440 +++++++--------
 packages/overlay/overlay-trigger.ts           |   12 +-
 packages/overlay/sp-overlay.ts                |   12 +-
 packages/overlay/src/AbstractOverlay.ts       |  581 ++-
 packages/overlay/src/ClickController.ts       |   76 +-
 packages/overlay/src/HoverController.ts       |  306 +-
 packages/overlay/src/InteractionController.ts |  198 +-
 packages/overlay/src/LongpressController.ts   |  375 +-
 packages/overlay/src/Overlay.ts               | 1844 ++++----
 packages/overlay/src/OverlayDialog.ts         |  352 +-
 packages/overlay/src/OverlayNoPopover.ts      |  284 +-
 packages/overlay/src/OverlayStack.ts          |  411 +-
 packages/overlay/src/OverlayTrigger.ts        |  518 +--
 packages/overlay/src/PlacementController.ts   |  743 ++--
 packages/overlay/src/VirtualTrigger.ts        |   56 +-
 packages/overlay/src/events.ts                |   86 +-
 packages/overlay/src/fullSizePlugin.ts        |  102 +-
 packages/overlay/src/index.ts                 |   12 +-
 packages/overlay/src/loader.ts                |   42 +-
 packages/overlay/src/overlay-events.ts        |   16 +-
 packages/overlay/src/overlay-timer.ts         |  150 +-
 .../overlay/src/overlay-trigger-directive.ts  |  235 +-
 packages/overlay/src/overlay-types.ts         |   84 +-
 .../src/slottable-request-directive.ts        |  144 +-
 .../overlay/src/slottable-request-event.ts    |   54 +-
 packages/overlay/src/strategies.ts            |   12 +-
 packages/overlay/stories/index.ts             |   92 +-
 .../stories/overlay-directive.stories.ts      |  594 ++-
 .../stories/overlay-element.stories.ts        | 1199 +++---
 .../stories/overlay-story-components.ts       |  641 ++-
 packages/overlay/stories/overlay.stories.ts   | 2506 +++++------
 packages/overlay/sync/overlay-trigger.ts      |    8 +-
 packages/overlay/test/benchmark/basic-test.ts |   69 +-
 .../overlay/test/benchmark/directive-test.ts  |   68 +-
 .../overlay/test/benchmark/element-test.ts    |   69 +-
 packages/overlay/test/benchmark/lazy-test.ts  |   84 +-
 packages/overlay/test/index.ts                | 1398 +++---
 .../overlay/test/overlay-directive.test.ts    |  351 +-
 packages/overlay/test/overlay-element.test.ts | 2094 +++++----
 .../overlay/test/overlay-lifecycle.test.ts    |  344 +-
 packages/overlay/test/overlay-memory.test.ts  |   12 +-
 packages/overlay/test/overlay-timer.test.ts   |  254 +-
 .../test/overlay-trigger-click.test.ts        |  347 +-
 .../test/overlay-trigger-directive.test.ts    |  142 +-
 .../test/overlay-trigger-extended.test.ts     |  508 ++-
 .../test/overlay-trigger-hover-click.test.ts  |  520 ++-
 .../test/overlay-trigger-hover.test.ts        |  688 ++-
 .../test/overlay-trigger-longpress.test.ts    | 1175 +++--
 .../overlay/test/overlay-trigger-sync.test.ts |    6 +-
 packages/overlay/test/overlay-trigger.test.ts |    6 +-
 packages/overlay/test/overlay-update.test.ts  |   50 +-
 packages/overlay/test/overlay-v1.test.ts      | 1228 +++---
 packages/overlay/test/overlay.test.ts         | 1688 ++++----
 packages/picker-button/sp-picker-button.ts    |   12 +-
 packages/picker-button/src/PickerButton.ts    |  110 +-
 packages/picker-button/src/index.ts           |    2 +-
 packages/picker-button/stories/index.ts       |  126 +-
 .../stories/picker-button-sizes.stories.ts    |   28 +-
 .../stories/picker-button.stories.ts          |   38 +-
 .../test/benchmark/basic-test.ts              |   10 +-
 .../test/picker-button-memory.test.ts         |   10 +-
 .../picker-button/test/picker-button.test.ts  |   46 +-
 packages/picker/sp-picker.ts                  |   12 +-
 packages/picker/src/DesktopController.ts      |  136 +-
 packages/picker/src/InteractionController.ts  |  298 +-
 packages/picker/src/MobileController.ts       |   85 +-
 packages/picker/src/Picker.ts                 | 1496 ++++---
 packages/picker/src/index.ts                  |    2 +-
 packages/picker/src/strategies.ts             |    8 +-
 packages/picker/stories/args.ts               |   97 +-
 .../picker/stories/picker-pending.stories.ts  |   20 +-
 .../picker/stories/picker-sizes.stories.ts    |  154 +-
 packages/picker/stories/picker.stories.ts     | 1061 +++--
 packages/picker/stories/states.ts             |  452 +-
 packages/picker/stories/template.ts           |   82 +-
 packages/picker/sync/index.ts                 |    6 +-
 packages/picker/sync/sp-picker.ts             |    4 +-
 packages/picker/test/benchmark/basic-test.ts  |  524 ++-
 packages/picker/test/index.ts                 | 3764 ++++++++---------
 packages/picker/test/picker-memory.test.ts    |    4 +-
 .../picker/test/picker-reparenting.test.ts    |  212 +-
 .../picker/test/picker-responsive.test.ts     |  196 +-
 packages/picker/test/picker-sync.test.ts      |    8 +-
 packages/picker/test/picker.test.ts           |    8 +-
 packages/popover/sp-popover.ts                |   12 +-
 packages/popover/src/Popover.ts               |   98 +-
 packages/popover/src/index.ts                 |    2 +-
 packages/popover/stories/popover.stories.ts   |  297 +-
 packages/popover/test/benchmark/test-basic.ts |   24 +-
 packages/popover/test/popover-memory.test.ts  |   10 +-
 packages/popover/test/popover.test.ts         |   98 +-
 packages/progress-bar/sp-progress-bar.ts      |   12 +-
 packages/progress-bar/src/ProgressBar.ts      |  284 +-
 packages/progress-bar/src/index.ts            |    2 +-
 .../stories/progress-bar-sizes.stories.ts     |   48 +-
 .../stories/progress-bar.stories.ts           |  157 +-
 .../progress-bar/test/benchmark/basic-test.ts |    8 +-
 .../test/progress-bar-memory.test.ts          |   10 +-
 .../progress-bar/test/progress-bar.test.ts    |  441 +-
 .../progress-circle/sp-progress-circle.ts     |   12 +-
 .../progress-circle/src/ProgressCircle.ts     |  223 +-
 packages/progress-circle/src/index.ts         |    2 +-
 .../stories/progress-circle.stories.ts        |  178 +-
 .../test/benchmark/basic-test.ts              |    8 +-
 .../test/progress-circle-memory.test.ts       |   10 +-
 .../test/progress-circle.test.ts              |  284 +-
 packages/radio/sp-radio-group.ts              |   12 +-
 packages/radio/sp-radio.ts                    |   12 +-
 packages/radio/src/Radio.ts                   |  226 +-
 packages/radio/src/RadioGroup.ts              |  220 +-
 packages/radio/src/index.ts                   |    4 +-
 packages/radio/stories/radio-sizes.stories.ts |  119 +-
 packages/radio/stories/radio.stories.ts       |  239 +-
 packages/radio/test/benchmark/test-basic.ts   |   18 +-
 packages/radio/test/radio-group.test.ts       | 1265 +++---
 packages/radio/test/radio-memory.test.ts      |   10 +-
 packages/radio/test/radio.test.ts             |  300 +-
 packages/search/sp-search.ts                  |   12 +-
 packages/search/src/Search.ts                 |  218 +-
 packages/search/src/index.ts                  |    2 +-
 .../search/stories/search-sizes.stories.ts    |   46 +-
 packages/search/stories/search.stories.ts     |   26 +-
 packages/search/test/benchmark/test-basic.ts  |   20 +-
 packages/search/test/search-memory.test.ts    |   10 +-
 packages/search/test/search.test.ts           |  447 +-
 packages/sidenav/sp-sidenav-heading.ts        |   12 +-
 packages/sidenav/sp-sidenav-item.ts           |   12 +-
 packages/sidenav/sp-sidenav.ts                |   12 +-
 packages/sidenav/src/Sidenav.ts               |  361 +-
 packages/sidenav/src/SidenavHeading.ts        |   66 +-
 packages/sidenav/src/SidenavItem.ts           |  368 +-
 packages/sidenav/src/index.ts                 |    6 +-
 packages/sidenav/stories/sidenav.stories.ts   |  288 +-
 packages/sidenav/test/benchmark/test-basic.ts |  130 +-
 packages/sidenav/test/sidenav-item.test.ts    |  387 +-
 packages/sidenav/test/sidenav-memory.test.ts  |   30 +-
 packages/sidenav/test/sidenav.test.ts         |  893 ++--
 packages/slider/sp-slider-handle.ts           |   12 +-
 packages/slider/sp-slider.ts                  |   14 +-
 packages/slider/src/HandleController.ts       | 1627 ++++---
 packages/slider/src/Slider.ts                 |  996 +++--
 packages/slider/src/SliderHandle.ts           |  348 +-
 packages/slider/src/index.ts                  |    6 +-
 .../slider/stories/slider-sizes.stories.ts    |   58 +-
 packages/slider/stories/slider.stories.ts     | 2050 +++++----
 packages/slider/sync/sp-slider.ts             |    4 +-
 packages/slider/test/benchmark/test-basic.ts  |   22 +-
 packages/slider/test/index.ts                 |  682 ++-
 .../slider/test/slider-editable-sync.test.ts  |    6 +-
 packages/slider/test/slider-editable.test.ts  |    6 +-
 .../slider/test/slider-handle-upgrade.test.ts |   52 +-
 packages/slider/test/slider-memory.test.ts    |   10 +-
 packages/slider/test/slider.test.ts           | 3448 ++++++++-------
 packages/split-view/sp-split-view.ts          |   12 +-
 packages/split-view/src/SplitView.ts          | 1112 ++---
 packages/split-view/src/index.ts              |    2 +-
 .../split-view/stories/split-view.stories.ts  |  488 ++-
 .../split-view/test/benchmark/basic-test.ts   |   14 +-
 .../split-view/test/split-view-memory.test.ts |   10 +-
 packages/split-view/test/split-view.test.ts   | 2103 +++++----
 packages/status-light/sp-status-light.ts      |   12 +-
 packages/status-light/src/StatusLight.ts      |   98 +-
 packages/status-light/src/index.ts            |    2 +-
 .../stories/status-light.stories.ts           |  116 +-
 .../test/status-light-memory.test.ts          |   10 +-
 .../status-light/test/status-light.test.ts    |   52 +-
 packages/swatch/sp-swatch-group.ts            |   12 +-
 packages/swatch/sp-swatch.ts                  |   12 +-
 packages/swatch/src/Swatch.ts                 |  702 ++-
 packages/swatch/src/SwatchGroup.ts            |  817 ++--
 packages/swatch/src/index.ts                  |    4 +-
 .../swatch/stories/swatch-group.stories.ts    |  278 +-
 .../swatch/stories/swatch-sizes.stories.ts    |   72 +-
 packages/swatch/stories/swatch.stories.ts     |  135 +-
 packages/swatch/test/benchmark/basic-test.ts  |   10 +-
 packages/swatch/test/swatch-group.test.ts     |  840 ++--
 packages/swatch/test/swatch-memory.test.ts    |   10 +-
 packages/swatch/test/swatch.test.ts           |  326 +-
 packages/switch/sp-switch.ts                  |   12 +-
 packages/switch/src/Switch.ts                 |  106 +-
 packages/switch/src/index.ts                  |    2 +-
 .../switch/stories/switch-sizes.stories.ts    |   16 +-
 packages/switch/stories/switch.stories.ts     |  104 +-
 packages/switch/test/benchmark/test-basic.ts  |   10 +-
 packages/switch/test/switch-memory.test.ts    |   10 +-
 packages/switch/test/switch.test.ts           |  112 +-
 packages/table/elements.ts                    |   14 +-
 packages/table/sp-table-body.ts               |   12 +-
 packages/table/sp-table-cell.ts               |   12 +-
 packages/table/sp-table-checkbox-cell.ts      |   12 +-
 packages/table/sp-table-head-cell.ts          |   12 +-
 packages/table/sp-table-head.ts               |   12 +-
 packages/table/sp-table-row.ts                |   12 +-
 packages/table/sp-table.ts                    |   12 +-
 packages/table/src/Table.ts                   | 1264 +++---
 packages/table/src/TableBody.ts               |  100 +-
 packages/table/src/TableCell.ts               |   50 +-
 packages/table/src/TableCheckboxCell.ts       |  158 +-
 packages/table/src/TableHead.ts               |  114 +-
 packages/table/src/TableHeadCell.ts           |  348 +-
 packages/table/src/TableRow.ts                |  300 +-
 packages/table/src/index.ts                   |   14 +-
 packages/table/stories/index.ts               |   72 +-
 .../table/stories/table-elements.stories.ts   |  544 ++-
 .../stories/table-virtualized.stories.ts      |  517 ++-
 packages/table/test/benchmark/basic-test.ts   |   84 +-
 packages/table/test/helpers.ts                |   36 +-
 packages/table/test/table-memory.test.ts      |    6 +-
 packages/table/test/table-selects.test.ts     |  564 ++-
 packages/table/test/table.test.ts             |  488 ++-
 .../test/virtualized-table-selects.test.ts    |  754 ++--
 packages/table/test/virtualized-table.test.ts |  716 ++--
 packages/tabs/sp-tab-panel.ts                 |   12 +-
 packages/tabs/sp-tab.ts                       |   12 +-
 packages/tabs/sp-tabs-overflow.ts             |   12 +-
 packages/tabs/sp-tabs.ts                      |   12 +-
 packages/tabs/src/Tab.ts                      |  245 +-
 packages/tabs/src/TabPanel.ts                 |  142 +-
 packages/tabs/src/Tabs.ts                     | 1416 +++----
 packages/tabs/src/TabsOverflow.ts             |  429 +-
 packages/tabs/src/index.ts                    |    8 +-
 packages/tabs/stories/index.ts                |  112 +-
 .../stories/tabs-horizontal-sizes.stories.ts  |  140 +-
 .../tabs-overflow-panel-sizes.stories.ts      |   32 +-
 .../stories/tabs-overflow-sizes.stories.ts    |   24 +-
 .../tabs/stories/tabs-overflow.stories.ts     |   44 +-
 .../tabs-vertical-right-sizes.stories.ts      |  132 +-
 .../stories/tabs-vertical-sizes.stories.ts    |  132 +-
 packages/tabs/stories/tabs.stories.ts         |  858 ++--
 packages/tabs/test/benchmark/basic-test.ts    |   18 +-
 packages/tabs/test/tab.test.ts                |   96 +-
 packages/tabs/test/tabs-memory.test.ts        |   18 +-
 packages/tabs/test/tabs-overflow.test.ts      |  901 ++--
 packages/tabs/test/tabs.test.ts               | 1054 ++---
 packages/tags/sp-tag.ts                       |   12 +-
 packages/tags/sp-tags.ts                      |   12 +-
 packages/tags/src/Tag.ts                      |    4 +-
 packages/tags/src/Tags.ts                     |  290 +-
 packages/tags/src/index.ts                    |    4 +-
 packages/tags/stories/tags-sizes.stories.ts   |   56 +-
 packages/tags/stories/tags.stories.ts         |  196 +-
 packages/tags/test/benchmark/basic-test.ts    |   18 +-
 packages/tags/test/tag.test.ts                |  360 +-
 packages/tags/test/tags-memory.test.ts        |   18 +-
 packages/tags/test/tags.test.ts               |  658 ++-
 packages/textfield/sp-textfield.ts            |   12 +-
 packages/textfield/src/Textfield.ts           | 1021 +++--
 packages/textfield/src/index.ts               |    2 +-
 .../stories/textarea-sizes.stories.ts         |   56 +-
 .../textfield/stories/textarea.stories.ts     |  352 +-
 .../stories/textfield-sizes.stories.ts        |   46 +-
 .../textfield/stories/textfield.stories.ts    |  225 +-
 .../textfield/test/benchmark/test-basic.ts    |    8 +-
 .../textfield/test/textfield-memory.test.ts   |   10 +-
 packages/textfield/test/textfield.test.ts     | 2284 +++++-----
 packages/thumbnail/sp-thumbnail.ts            |   12 +-
 packages/thumbnail/src/Thumbnail.ts           |  268 +-
 packages/thumbnail/src/index.ts               |    2 +-
 packages/thumbnail/stories/images.ts          |    6 +-
 .../stories/thumbnail-sizes.stories.ts        |   72 +-
 .../thumbnail/stories/thumbnail.stories.ts    |  122 +-
 .../thumbnail/test/benchmark/basic-test.ts    |   14 +-
 .../thumbnail/test/thumbnail-memory.test.ts   |   10 +-
 packages/thumbnail/test/thumbnail.test.ts     |  132 +-
 packages/toast/sp-toast.ts                    |   12 +-
 packages/toast/src/Toast.ts                   |  648 +--
 packages/toast/src/index.ts                   |    2 +-
 packages/toast/stories/toast.stories.ts       |  369 +-
 packages/toast/test/benchmark/test-basic.ts   |   10 +-
 packages/toast/test/toast-memory.test.ts      |   10 +-
 packages/toast/test/toast.test.ts             |  513 ++-
 packages/tooltip/sp-tooltip.ts                |   12 +-
 packages/tooltip/src/Tooltip.ts               |  731 ++--
 packages/tooltip/src/index.ts                 |    2 +-
 packages/tooltip/src/tooltip-directive.ts     |   54 +-
 .../stories/tooltip-directive.stories.ts      |  205 +-
 packages/tooltip/stories/tooltip.stories.ts   |  712 ++--
 packages/tooltip/test/benchmark/test-basic.ts |   16 +-
 .../tooltip/test/benchmark/test-directive.ts  |   16 +-
 .../tooltip/test/benchmark/test-element.ts    |   18 +-
 packages/tooltip/test/benchmark/test-lazy.ts  |   40 +-
 .../tooltip/test/tooltip-directive.test.ts    |  194 +-
 packages/tooltip/test/tooltip-memory.test.ts  |   10 +-
 packages/tooltip/test/tooltip.test.ts         |  462 +-
 packages/top-nav/sp-top-nav-item.ts           |   12 +-
 packages/top-nav/sp-top-nav.ts                |   12 +-
 packages/top-nav/src/TopNav.ts                |  707 ++--
 packages/top-nav/src/TopNavItem.ts            |  158 +-
 packages/top-nav/src/index.ts                 |    4 +-
 packages/top-nav/stories/images.ts            |    4 +-
 .../top-nav/stories/top-nav-sizes.stories.ts  |   78 +-
 packages/top-nav/stories/top-nav.stories.ts   |  192 +-
 packages/top-nav/test/benchmark/basic-test.ts |   30 +-
 packages/top-nav/test/top-nav-memory.test.ts  |    4 +-
 packages/top-nav/test/top-nav.test.ts         |  208 +-
 packages/tray/sp-tray.ts                      |   12 +-
 packages/tray/src/Tray.ts                     |  360 +-
 packages/tray/src/index.ts                    |    2 +-
 packages/tray/stories/tray.stories.ts         |   92 +-
 packages/tray/test/benchmark/basic-test.ts    |   20 +-
 packages/tray/test/tray-memory.test.ts        |   10 +-
 packages/tray/test/tray.test.ts               |  177 +-
 packages/underlay/sp-underlay.ts              |   12 +-
 packages/underlay/src/Underlay.ts             |  136 +-
 packages/underlay/src/index.ts                |    2 +-
 packages/underlay/stories/underlay.stories.ts |   12 +-
 .../underlay/test/benchmark/basic-test.ts     |   10 +-
 .../underlay/test/underlay-memory.test.ts     |   10 +-
 packages/underlay/test/underlay.test.ts       |   73 +-
 test/tsconfig-test.json                       |   44 +-
 test/tsconfig.json                            |   24 +-
 tools/base/src/Base.ts                        |  443 +-
 tools/base/src/async-directive.ts             |    2 +-
 tools/base/src/condition-attribute-with-id.ts |   63 +-
 tools/base/src/decorators.ts                  |    2 +-
 tools/base/src/define-element.ts              |   25 +-
 tools/base/src/directive.ts                   |    2 +-
 tools/base/src/directives.ts                  |   24 +-
 tools/base/src/html.ts                        |    2 +-
 tools/base/src/index.ts                       |    6 +-
 tools/base/src/sizedMixin.ts                  |  107 +-
 tools/base/src/streaming-listener.ts          |  296 +-
 tools/base/test/base-devmode.test.ts          |   71 +-
 tools/base/test/base.test.ts                  |   40 +-
 tools/base/test/define-element.test.ts        |  356 +-
 tools/bundle/elements.ts                      |  180 +-
 tools/bundle/src/icons.ts                     |    4 +-
 tools/bundle/src/index.ts                     |  118 +-
 tools/grid/sp-grid.ts                         |   10 +-
 tools/grid/src/Grid.ts                        |  291 +-
 tools/grid/src/GridController.ts              |  411 +-
 tools/grid/src/index.ts                       |    2 +-
 tools/grid/stories/grid.stories.ts            |  453 +-
 tools/grid/test/benchmark/basic-test.ts       |   10 +-
 tools/grid/test/grid-memory.test.ts           |    4 +-
 tools/grid/test/grid.test.ts                  |  495 +--
 tools/reactive-controllers/src/Color.ts       |  592 +--
 .../src/DependencyManger.ts                   |   91 +-
 .../src/ElementResolution.ts                  |  256 +-
 tools/reactive-controllers/src/FocusGroup.ts  |  793 ++--
 .../src/LanguageResolution.ts                 |   83 +-
 tools/reactive-controllers/src/MatchMedia.ts  |   53 +-
 .../reactive-controllers/src/PendingState.ts  |  134 +-
 .../src/RovingTabindex.ts                     |  174 +-
 .../src/SystemContextResolution.ts            |   88 +-
 tools/reactive-controllers/src/index.ts       |    4 +-
 .../test/dependency-manager.test.ts           |   45 +-
 .../test/element-resolution.test.ts           |   73 +-
 tools/reactive-controllers/test/helpers.ts    |   40 +-
 .../test/match-media.test.ts                  |   51 +-
 .../test/pending-state.test.ts                |  305 +-
 .../test/roving-tabindex-integration.test.ts  |  489 +--
 .../test/roving-tabindex.test.ts              |   31 +-
 tools/shared/src/first-focusable-in.ts        |   24 +-
 tools/shared/src/focus-visible.ts             |  208 +-
 tools/shared/src/focusable-selectors.ts       |   20 +-
 tools/shared/src/focusable.ts                 |  629 +--
 tools/shared/src/get-active-element.ts        |    2 +-
 .../shared/src/get-deep-element-from-point.ts |   33 +-
 tools/shared/src/get-label-from-slot.ts       |   38 +-
 tools/shared/src/index.ts                     |   24 +-
 tools/shared/src/like-anchor.ts               |  171 +-
 tools/shared/src/observe-slot-presence.ts     |  143 +-
 tools/shared/src/observe-slot-text.ts         |  200 +-
 tools/shared/src/platform.ts                  |   40 +-
 tools/shared/src/random-id.ts                 |    6 +-
 tools/shared/src/reparent-children.ts         |  138 +-
 tools/shared/test/focusable.test.ts           |   43 +-
 .../shared/test/observe-slot-presence.test.ts |   45 +-
 tools/shared/test/observe-slot-text.test.ts   |   41 +-
 tools/shared/test/random-id.test.ts           |   52 +-
 tools/shared/test/reparent-children.test.ts   |  561 +--
 tools/styles/body.ts                          |   20 +-
 tools/styles/code.ts                          |   20 +-
 tools/styles/detail.ts                        |   20 +-
 tools/styles/heading.ts                       |   20 +-
 tools/styles/spectrum-two/themes.ts           |    8 +-
 tools/styles/stories/styles.stories.ts        |   78 +-
 tools/styles/typography.ts                    |    2 +-
 tools/theme/core-tokens.ts                    |    6 +-
 tools/theme/core.ts                           |    6 +-
 .../theme/express/scale-large-core-tokens.ts  |    8 +-
 tools/theme/express/scale-large.ts            |    8 +-
 .../theme/express/scale-medium-core-tokens.ts |    8 +-
 tools/theme/express/scale-medium.ts           |    8 +-
 tools/theme/express/theme-dark-core-tokens.ts |    8 +-
 tools/theme/express/theme-dark.ts             |    8 +-
 .../express/theme-darkest-core-tokens.ts      |    8 +-
 tools/theme/express/theme-darkest.ts          |    8 +-
 .../theme/express/theme-light-core-tokens.ts  |    8 +-
 tools/theme/express/theme-light.ts            |    8 +-
 .../express/theme-lightest-core-tokens.ts     |    8 +-
 tools/theme/express/theme-lightest.ts         |    8 +-
 tools/theme/scale-large-core-tokens.ts        |    8 +-
 tools/theme/scale-large.ts                    |    8 +-
 tools/theme/scale-medium-core-tokens.ts       |    8 +-
 tools/theme/scale-medium.ts                   |    8 +-
 tools/theme/sp-theme.ts                       |   10 +-
 .../spectrum-two/scale-large-core-tokens.ts   |    8 +-
 tools/theme/spectrum-two/scale-large.ts       |    8 +-
 .../spectrum-two/scale-medium-core-tokens.ts  |    8 +-
 tools/theme/spectrum-two/scale-medium.ts      |    8 +-
 .../spectrum-two/theme-dark-core-tokens.ts    |    8 +-
 tools/theme/spectrum-two/theme-dark.ts        |    8 +-
 .../spectrum-two/theme-darkest-core-tokens.ts |    8 +-
 tools/theme/spectrum-two/theme-darkest.ts     |    8 +-
 .../spectrum-two/theme-light-core-tokens.ts   |    8 +-
 tools/theme/spectrum-two/theme-light.ts       |    8 +-
 .../theme-lightest-core-tokens.ts             |    8 +-
 tools/theme/spectrum-two/theme-lightest.ts    |    8 +-
 tools/theme/src/Theme.ts                      |  962 +++--
 tools/theme/src/express/core-tokens.ts        |    6 +-
 tools/theme/src/express/core.ts               |    6 +-
 tools/theme/src/express/themes-core-tokens.ts |   12 +-
 tools/theme/src/express/themes.ts             |   12 +-
 tools/theme/src/index.ts                      |    2 +-
 tools/theme/src/spectrum-two/core-tokens.ts   |    6 +-
 tools/theme/src/spectrum-two/core.ts          |    6 +-
 .../src/spectrum-two/themes-core-tokens.ts    |   12 +-
 tools/theme/src/spectrum-two/themes.ts        |   12 +-
 tools/theme/src/theme-interfaces.ts           |   72 +-
 tools/theme/src/themes-core-tokens.ts         |   12 +-
 tools/theme/src/themes.ts                     |   12 +-
 tools/theme/stories/theme.stories.ts          |  450 +-
 tools/theme/test/theme-devmode.test.ts        |  127 +-
 tools/theme/test/theme-lazy.test.ts           |  254 +-
 tools/theme/test/theme.test.ts                |   16 +-
 tools/theme/test/themes.test.ts               |  391 +-
 tools/theme/theme-dark-core-tokens.ts         |    8 +-
 tools/theme/theme-dark.ts                     |    8 +-
 tools/theme/theme-darkest-core-tokens.ts      |    8 +-
 tools/theme/theme-darkest.ts                  |    8 +-
 tools/theme/theme-light-core-tokens.ts        |    8 +-
 tools/theme/theme-light.ts                    |    8 +-
 tools/theme/theme-lightest-core-tokens.ts     |    8 +-
 tools/theme/theme-lightest.ts                 |    8 +-
 tools/truncated/sp-truncated.ts               |   10 +-
 tools/truncated/src/Truncated.ts              |  348 +-
 tools/truncated/src/index.ts                  |    2 +-
 tools/truncated/stories/truncated.stories.ts  |   66 +-
 tools/truncated/test/benchmark/basic-test.ts  |   18 +-
 tools/truncated/test/truncated.test.ts        |  152 +-
 888 files changed, 84288 insertions(+), 85997 deletions(-)

diff --git a/packages/accordion/sp-accordion-item.ts b/packages/accordion/sp-accordion-item.ts
index 7b6af9cc2c..c92c2c68dd 100644
--- a/packages/accordion/sp-accordion-item.ts
+++ b/packages/accordion/sp-accordion-item.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { AccordionItem } from './src/AccordionItem.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { AccordionItem } from "./src/AccordionItem.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-accordion-item', AccordionItem);
+defineElement("sp-accordion-item", AccordionItem);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-accordion-item': AccordionItem;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-accordion-item": AccordionItem;
+  }
 }
diff --git a/packages/accordion/sp-accordion.ts b/packages/accordion/sp-accordion.ts
index e4bd0e9349..41adde8d17 100644
--- a/packages/accordion/sp-accordion.ts
+++ b/packages/accordion/sp-accordion.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Accordion } from './src/Accordion.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Accordion } from "./src/Accordion.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-accordion', Accordion);
+defineElement("sp-accordion", Accordion);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-accordion': Accordion;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-accordion": Accordion;
+  }
 }
diff --git a/packages/accordion/src/Accordion.ts b/packages/accordion/src/Accordion.ts
index 5c73051c12..af5073e66e 100644
--- a/packages/accordion/src/Accordion.ts
+++ b/packages/accordion/src/Accordion.ts
@@ -11,16 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
-	CSSResultArray,
-	html,
-	PropertyValues,
-	SizedMixin,
-	SpectrumElement,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	property,
-	queryAssignedNodes,
+  property,
+  queryAssignedNodes,
 } from "@spectrum-web-components/base/src/decorators.js";
 import { FocusGroupController } from "@spectrum-web-components/reactive-controllers/src/FocusGroup.js";
 
@@ -35,119 +35,119 @@ import styles from "./accordion.css.js";
  *
  */
 export class Accordion extends SizedMixin(SpectrumElement, {
-	noDefaultSize: true,
+  noDefaultSize: true,
 }) {
-	public static override get styles(): CSSResultArray {
-		return [styles];
-	}
-
-	/**
-	 * Allows multiple accordion items to be opened at the same time.
-	 * When true, more than one accordion item can be expanded simultaneously.
-	 */
-	@property({ type: Boolean, reflect: true, attribute: "allow-multiple" })
-	public allowMultiple = false;
-
-	/**
-	 * Sets the spacing between the content and borders of an accordion item.
-	 * Can be 'compact' or 'spacious'.
-	 */
-	@property({ type: String, reflect: true })
-	public density?: "compact" | "spacious";
-
-	/**
-	 * Retrieves the default nodes assigned to the slot.
-	 * These nodes are expected to be AccordionItem elements.
-	 */
-	@queryAssignedNodes()
-	private defaultNodes!: NodeListOf;
-
-	/**
-	 * Gets the list of accordion items.
-	 * Filters the default nodes to include only valid AccordionItem elements.
-	 */
-	private get items(): AccordionItem[] {
-		return [...(this.defaultNodes || [])].filter(
-			(node: HTMLElement) => typeof node.tagName !== "undefined",
-		) as AccordionItem[];
-	}
-
-	/**
-	 * Controller for managing focus within the accordion.
-	 * Configures focus behavior for the accordion items.
-	 */
-	focusGroupController = new FocusGroupController(this, {
-		direction: "vertical",
-		elements: () => this.items,
-		isFocusableElement: (el: AccordionItem) => !el.disabled,
-	});
-
-	/**
-	 * Overrides the focus method to delegate focus to the focus group controller.
-	 */
-	public override focus(): void {
-		this.focusGroupController.focus();
-	}
-
-	/**
-	 * Handles the toggle event for an accordion item.
-	 * Closes other accordion items if `allowMultiple` is false and the event is not prevented.
-	 */
-	private async onToggle(event: Event): Promise {
-		const target = event.target as AccordionItem;
-
-		// Let the event pass through the DOM so that it can be
-		// prevented from the outside if a user so desires.
-		await 0;
-
-		if (this.allowMultiple || event.defaultPrevented) {
-			// No toggling when `allowMultiple` is true or the user prevents it.
-			return;
-		}
-
-		const items = [...this.items] as AccordionItem[];
-
-		/* c8 ignore next 3 */
-		if (items && !items.length) {
-			// No toggling when there aren't items.
-			return;
-		}
-
-		items.forEach((item) => {
-			if (item !== target) {
-				// Close all the items that didn't dispatch the event.
-				item.open = false;
-			}
-		});
-	}
-
-	/**
-	 * Handles the slotchange event.
-	 * Clears the element cache in the focus group controller and updates the size of each accordion item.
-	 */
-	private handleSlotchange(): void {
-		this.focusGroupController.clearElementCache();
-		this.items.forEach((item) => {
-			item.size = this.size;
-		});
-	}
-
-	protected override updated(changed: PropertyValues): void {
-		super.updated(changed);
-
-		if (changed.has("size") && (!!changed.get("size") || this.size !== "m")) {
-			this.items.forEach((item) => {
-				item.size = this.size;
-			});
-		}
-	}
-
-	protected override render(): TemplateResult {
-		return html`
-			
-		`;
-	}
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /**
+   * Allows multiple accordion items to be opened at the same time.
+   * When true, more than one accordion item can be expanded simultaneously.
+   */
+  @property({ type: Boolean, reflect: true, attribute: "allow-multiple" })
+  public allowMultiple = false;
+
+  /**
+   * Sets the spacing between the content and borders of an accordion item.
+   * Can be 'compact' or 'spacious'.
+   */
+  @property({ type: String, reflect: true })
+  public density?: "compact" | "spacious";
+
+  /**
+   * Retrieves the default nodes assigned to the slot.
+   * These nodes are expected to be AccordionItem elements.
+   */
+  @queryAssignedNodes()
+  private defaultNodes!: NodeListOf;
+
+  /**
+   * Gets the list of accordion items.
+   * Filters the default nodes to include only valid AccordionItem elements.
+   */
+  private get items(): AccordionItem[] {
+    return [...(this.defaultNodes || [])].filter(
+      (node: HTMLElement) => typeof node.tagName !== "undefined",
+    ) as AccordionItem[];
+  }
+
+  /**
+   * Controller for managing focus within the accordion.
+   * Configures focus behavior for the accordion items.
+   */
+  focusGroupController = new FocusGroupController(this, {
+    direction: "vertical",
+    elements: () => this.items,
+    isFocusableElement: (el: AccordionItem) => !el.disabled,
+  });
+
+  /**
+   * Overrides the focus method to delegate focus to the focus group controller.
+   */
+  public override focus(): void {
+    this.focusGroupController.focus();
+  }
+
+  /**
+   * Handles the toggle event for an accordion item.
+   * Closes other accordion items if `allowMultiple` is false and the event is not prevented.
+   */
+  private async onToggle(event: Event): Promise {
+    const target = event.target as AccordionItem;
+
+    // Let the event pass through the DOM so that it can be
+    // prevented from the outside if a user so desires.
+    await 0;
+
+    if (this.allowMultiple || event.defaultPrevented) {
+      // No toggling when `allowMultiple` is true or the user prevents it.
+      return;
+    }
+
+    const items = [...this.items] as AccordionItem[];
+
+    /* c8 ignore next 3 */
+    if (items && !items.length) {
+      // No toggling when there aren't items.
+      return;
+    }
+
+    items.forEach((item) => {
+      if (item !== target) {
+        // Close all the items that didn't dispatch the event.
+        item.open = false;
+      }
+    });
+  }
+
+  /**
+   * Handles the slotchange event.
+   * Clears the element cache in the focus group controller and updates the size of each accordion item.
+   */
+  private handleSlotchange(): void {
+    this.focusGroupController.clearElementCache();
+    this.items.forEach((item) => {
+      item.size = this.size;
+    });
+  }
+
+  protected override updated(changed: PropertyValues): void {
+    super.updated(changed);
+
+    if (changed.has("size") && (!!changed.get("size") || this.size !== "m")) {
+      this.items.forEach((item) => {
+        item.size = this.size;
+      });
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      
+    `;
+  }
 }
diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts
index c5732e92bc..6c518416c2 100644
--- a/packages/accordion/src/AccordionItem.ts
+++ b/packages/accordion/src/AccordionItem.ts
@@ -11,58 +11,58 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import { when } from '@spectrum-web-components/base/src/directives.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';
-
-import styles from './accordion-item.css.js';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SizedMixin,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import { when } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
+import chevronIconStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
+import chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";
+
+import styles from "./accordion-item.css.js";
 
 /**
  * A mapping of size keys to functions that return the corresponding chevron icon template.
  * The chevron icon indicates the open/closed state of the accordion item.
  */
 const chevronIcon: Record TemplateResult> = {
-    s: () => html`
-        
-            
-        
-    `,
-    m: () => html`
-        
-            
-        
-    `,
-    l: () => html`
-        
-            
-        
-    `,
-    xl: () => html`
-        
-            
-        
-    `,
+  s: () => html`
+    
+      
+    
+  `,
+  m: () => html`
+    
+      
+    
+  `,
+  l: () => html`
+    
+      
+    
+  `,
+  xl: () => html`
+    
+      
+    
+  `,
 };
 
 /**
@@ -74,117 +74,117 @@ const chevronIcon: Record TemplateResult> = {
  *
  */
 export class AccordionItem extends SizedMixin(Focusable, {
-    noDefaultSize: true,
+  noDefaultSize: true,
 }) {
-    public static override get styles(): CSSResultArray {
-        return [styles, chevronIconStyles, chevronIconOverrides];
+  public static override get styles(): CSSResultArray {
+    return [styles, chevronIconStyles, chevronIconOverrides];
+  }
+
+  /**
+   * Indicates whether the accordion item is open to display its contents.
+   * When true, the contents are visible; otherwise, they are hidden.
+   */
+  @property({ type: Boolean, reflect: true })
+  public open = false;
+
+  /**
+   * The label for the accordion heading.
+   * This is displayed as the title of the accordion item.
+   */
+  @property({ type: String, reflect: true })
+  public label = "";
+
+  /**
+   * Indicates whether the accordion item's heading can be used to toggle open or closed.
+   * When true, the heading is disabled and cannot be interacted with.
+   */
+  @property({ type: Boolean, reflect: true })
+  public override disabled = false;
+
+  /**
+   * Returns the element that should receive focus when the accordion item is focused.
+   * In this case, it is the header element.
+   */
+  public override get focusElement(): HTMLElement {
+    return this.shadowRoot.querySelector("#header") as HTMLElement;
+  }
+
+  /**
+   * Handles the click event on the accordion item's header.
+   * Toggles the open state of the accordion item if it is not disabled.
+   */
+  private onClick(): void {
+    /* c8 ignore next 3 */
+    if (this.disabled) {
+      return;
     }
 
-    /**
-     * Indicates whether the accordion item is open to display its contents.
-     * When true, the contents are visible; otherwise, they are hidden.
-     */
-    @property({ type: Boolean, reflect: true })
-    public open = false;
-
-    /**
-     * The label for the accordion heading.
-     * This is displayed as the title of the accordion item.
-     */
-    @property({ type: String, reflect: true })
-    public label = '';
-
-    /**
-     * Indicates whether the accordion item's heading can be used to toggle open or closed.
-     * When true, the heading is disabled and cannot be interacted with.
-     */
-    @property({ type: Boolean, reflect: true })
-    public override disabled = false;
-
-    /**
-     * Returns the element that should receive focus when the accordion item is focused.
-     * In this case, it is the header element.
-     */
-    public override get focusElement(): HTMLElement {
-        return this.shadowRoot.querySelector('#header') as HTMLElement;
+    this.toggle();
+  }
+
+  /**
+   * Toggles the open state of the accordion item.
+   * Dispatches a custom event 'sp-accordion-item-toggle' to notify listeners of the toggle action.
+   * If the event is canceled, the open state is reverted.
+   */
+  private toggle(): void {
+    this.open = !this.open;
+    const applyDefault = this.dispatchEvent(
+      new CustomEvent("sp-accordion-item-toggle", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
+
+    if (!applyDefault) {
+      this.open = !this.open;
     }
-
-    /**
-     * Handles the click event on the accordion item's header.
-     * Toggles the open state of the accordion item if it is not disabled.
-     */
-    private onClick(): void {
-        /* c8 ignore next 3 */
-        if (this.disabled) {
-            return;
-        }
-
-        this.toggle();
-    }
-
-    /**
-     * Toggles the open state of the accordion item.
-     * Dispatches a custom event 'sp-accordion-item-toggle' to notify listeners of the toggle action.
-     * If the event is canceled, the open state is reverted.
-     */
-    private toggle(): void {
-        this.open = !this.open;
-        const applyDefault = this.dispatchEvent(
-            new CustomEvent('sp-accordion-item-toggle', {
-                bubbles: true,
-                composed: true,
-                cancelable: true,
-            })
-        );
-
-        if (!applyDefault) {
-            this.open = !this.open;
-        }
-    }
-
-    /**
-     * Renders the chevron icon based on the size of the accordion item.
-     */
-    protected renderChevronIcon = (): TemplateResult => {
-        return chevronIcon[this.size || 'm']();
-    };
-
-    /**
-     * Renders the accordion item template.
-     * Includes the heading with a button to toggle the open state and a content area for the item details.
-     */
-    protected override render(): TemplateResult {
-        return html`
-            

-                ${when(this.size, this.renderChevronIcon)}
-                
-            

-            

-                
-            

-        `;
-    }
-
-    /**
-     * Updates the 'aria-disabled' attribute based on the disabled property.
-     */
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (changes.has('disabled')) {
-            if (this.disabled) {
-                this.setAttribute('aria-disabled', 'true');
-            } else {
-                this.removeAttribute('aria-disabled');
-            }
-        }
+  }
+
+  /**
+   * Renders the chevron icon based on the size of the accordion item.
+   */
+  protected renderChevronIcon = (): TemplateResult => {
+    return chevronIcon[this.size || "m"]();
+  };
+
+  /**
+   * Renders the accordion item template.
+   * Includes the heading with a button to toggle the open state and a content area for the item details.
+   */
+  protected override render(): TemplateResult {
+    return html`
+      

+        ${when(this.size, this.renderChevronIcon)}
+        
+      

+      

+        
+      

+    `;
+  }
+
+  /**
+   * Updates the 'aria-disabled' attribute based on the disabled property.
+   */
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
+
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.setAttribute("aria-disabled", "true");
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
     }
+  }
 }
diff --git a/packages/accordion/src/index.ts b/packages/accordion/src/index.ts
index 1adfcdca54..ce7c73c837 100644
--- a/packages/accordion/src/index.ts
+++ b/packages/accordion/src/index.ts
@@ -10,5 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './Accordion.js';
-export * from './AccordionItem.js';
+export * from "./Accordion.js";
+export * from "./AccordionItem.js";
diff --git a/packages/accordion/stories/accordion-densities-compact.stories.ts b/packages/accordion/stories/accordion-densities-compact.stories.ts
index 367f7c4321..4ac6559cc3 100644
--- a/packages/accordion/stories/accordion-densities-compact.stories.ts
+++ b/packages/accordion/stories/accordion-densities-compact.stories.ts
@@ -14,15 +14,15 @@ import { TemplateResult } from "@spectrum-web-components/base";
 import { AccordionMarkup } from ".//index.js";
 
 export default {
-	title: "Accordion/Densities/Compact",
-	component: "sp-accordion",
+  title: "Accordion/Densities/Compact",
+  component: "sp-accordion",
 };
 
 export const s = (): TemplateResult =>
-	AccordionMarkup({ density: "compact", size: "s" });
+  AccordionMarkup({ density: "compact", size: "s" });
 export const m = (): TemplateResult =>
-	AccordionMarkup({ density: "compact", size: "m" });
+  AccordionMarkup({ density: "compact", size: "m" });
 export const l = (): TemplateResult =>
-	AccordionMarkup({ density: "compact", size: "l" });
+  AccordionMarkup({ density: "compact", size: "l" });
 export const xl = (): TemplateResult =>
-	AccordionMarkup({ density: "compact", size: "xl" });
+  AccordionMarkup({ density: "compact", size: "xl" });
diff --git a/packages/accordion/stories/accordion-densities-spacious.stories.ts b/packages/accordion/stories/accordion-densities-spacious.stories.ts
index ba1f7c948f..7cdc6f6b72 100644
--- a/packages/accordion/stories/accordion-densities-spacious.stories.ts
+++ b/packages/accordion/stories/accordion-densities-spacious.stories.ts
@@ -14,15 +14,15 @@ import { TemplateResult } from "@spectrum-web-components/base";
 import { AccordionMarkup } from ".//index.js";
 
 export default {
-	title: "Accordion/Densities/Spacious",
-	component: "sp-accordion",
+  title: "Accordion/Densities/Spacious",
+  component: "sp-accordion",
 };
 
 export const s = (): TemplateResult =>
-	AccordionMarkup({ density: "spacious", size: "s" });
+  AccordionMarkup({ density: "spacious", size: "s" });
 export const m = (): TemplateResult =>
-	AccordionMarkup({ density: "spacious", size: "m" });
+  AccordionMarkup({ density: "spacious", size: "m" });
 export const l = (): TemplateResult =>
-	AccordionMarkup({ density: "spacious", size: "l" });
+  AccordionMarkup({ density: "spacious", size: "l" });
 export const xl = (): TemplateResult =>
-	AccordionMarkup({ density: "spacious", size: "xl" });
+  AccordionMarkup({ density: "spacious", size: "xl" });
diff --git a/packages/accordion/stories/accordion-sizes.stories.ts b/packages/accordion/stories/accordion-sizes.stories.ts
index dca07bb6cb..2a487f4e00 100644
--- a/packages/accordion/stories/accordion-sizes.stories.ts
+++ b/packages/accordion/stories/accordion-sizes.stories.ts
@@ -14,8 +14,8 @@ import { TemplateResult } from "@spectrum-web-components/base";
 import { AccordionMarkup } from ".//index.js";
 
 export default {
-	title: "Accordion/Sizes",
-	component: "sp-accordion",
+  title: "Accordion/Sizes",
+  component: "sp-accordion",
 };
 
 export const s = (): TemplateResult => AccordionMarkup({ size: "s" });
diff --git a/packages/accordion/stories/accordion.stories.ts b/packages/accordion/stories/accordion.stories.ts
index a944baa770..886e35265e 100644
--- a/packages/accordion/stories/accordion.stories.ts
+++ b/packages/accordion/stories/accordion.stories.ts
@@ -19,43 +19,43 @@ import "@spectrum-web-components/accordion/sp-accordion-item.js";
 import "@spectrum-web-components/link/sp-link.js";
 
 export default {
-	title: "Accordion",
-	component: "sp-accordion",
-	args: {
-		open: false,
-		size: "m",
-		density: undefined,
-	},
-	argTypes,
+  title: "Accordion",
+  component: "sp-accordion",
+  args: {
+    open: false,
+    size: "m",
+    density: undefined,
+  },
+  argTypes,
 };
 
 type Properties = {
-	allowMultiple?: boolean;
-	disabled?: boolean;
-	open?: boolean;
-	density?: "compact" | "spacious" | undefined;
-	size?: "s" | "m" | "l" | "xl";
+  allowMultiple?: boolean;
+  disabled?: boolean;
+  open?: boolean;
+  density?: "compact" | "spacious" | undefined;
+  size?: "s" | "m" | "l" | "xl";
 };
 
 export const Default = (args?: Properties): TemplateResult =>
-	AccordionMarkup(args);
+  AccordionMarkup(args);
 
 export const Open = (args?: Properties): TemplateResult =>
-	AccordionMarkup(args);
+  AccordionMarkup(args);
 Open.args = {
-	open: true,
-	allowMultiple: false,
-	disabled: false,
+  open: true,
+  allowMultiple: false,
+  disabled: false,
 };
 
 export const AllowMultiple = (args?: Properties): TemplateResult =>
-	AccordionMarkup(args);
+  AccordionMarkup(args);
 AllowMultiple.args = {
-	allowMultiple: true,
+  allowMultiple: true,
 };
 
 export const Disabled = (args?: Properties): TemplateResult =>
-	AccordionMarkup(args);
+  AccordionMarkup(args);
 Disabled.args = {
-	disabled: true,
+  disabled: true,
 };
diff --git a/packages/accordion/stories/args.ts b/packages/accordion/stories/args.ts
index 9064ccc392..02c9837ae8 100644
--- a/packages/accordion/stories/args.ts
+++ b/packages/accordion/stories/args.ts
@@ -11,62 +11,62 @@ governing permissions and limitations under the License.
 */
 
 export const argTypes = {
-    open: {
-        name: 'open',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the second accordion item is open.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+  open: {
+    name: "open",
+    type: { name: "boolean", required: false },
+    description: "Whether the second accordion item is open.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
     },
-    allowMultiple: {
-        name: 'allowMultiple',
-        type: { name: 'boolean', required: false },
-        description:
-            'Whether multipel Accordion Items can be open at the same time.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+    control: {
+      type: "boolean",
     },
-    density: {
-        name: 'density',
-        type: { name: 'string', required: false },
-        description: 'The density at which to display accordion items.',
-        table: {
-            defaultValue: { summary: 'default' },
-        },
-        control: {
-            labels: {
-                compact: 'Compact',
-                spacious: 'Spacious',
-                default: 'Default',
-            },
-            type: 'select',
-        },
+  },
+  allowMultiple: {
+    name: "allowMultiple",
+    type: { name: "boolean", required: false },
+    description:
+      "Whether multipel Accordion Items can be open at the same time.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
     },
-    size: {
-        name: 'size',
-        type: { name: 'string', required: false },
-        description: 'The size at which to display accordion items.',
-        table: {
-            defaultValue: { summary: 'm' },
-        },
-        control: {
-            labels: {
-                s: 'Small',
-                m: 'Medium',
-                l: 'Large',
-                xl: 'Extra large',
-            },
-            type: 'select',
-        },
+    control: {
+      type: "boolean",
     },
+  },
+  density: {
+    name: "density",
+    type: { name: "string", required: false },
+    description: "The density at which to display accordion items.",
+    table: {
+      defaultValue: { summary: "default" },
+    },
+    control: {
+      labels: {
+        compact: "Compact",
+        spacious: "Spacious",
+        default: "Default",
+      },
+      type: "select",
+    },
+  },
+  size: {
+    name: "size",
+    type: { name: "string", required: false },
+    description: "The size at which to display accordion items.",
+    table: {
+      defaultValue: { summary: "m" },
+    },
+    control: {
+      labels: {
+        s: "Small",
+        m: "Medium",
+        l: "Large",
+        xl: "Extra large",
+      },
+      type: "select",
+    },
+  },
 };
diff --git a/packages/accordion/stories/index.ts b/packages/accordion/stories/index.ts
index 1a8b0091bb..a47c26ec2f 100644
--- a/packages/accordion/stories/index.ts
+++ b/packages/accordion/stories/index.ts
@@ -10,45 +10,44 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/accordion/sp-accordion.js';
-import '@spectrum-web-components/accordion/sp-accordion-item.js';
-import '@spectrum-web-components/link/sp-link.js';
+import "@spectrum-web-components/accordion/sp-accordion.js";
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
+import "@spectrum-web-components/link/sp-link.js";
 
 export const AccordionMarkup = ({
-    allowMultiple = false,
-    disabled = false,
-    open = false,
-    size = 'm',
-    density = undefined as unknown,
+  allowMultiple = false,
+  disabled = false,
+  open = false,
+  size = "m",
+  density = undefined as unknown,
 } = {}): TemplateResult => {
-    return html`
-        
-            
-                
Item 1

-            
-            
-                Item 2
-            
-            
-                

-                    This is content that has a
-                    
-                        link back to Spectrum Web Components
-                    
-                    so that it is easy to test that "Space" and "Enter"
-                    interactions on focusable content does NOT toggle the
-                    Accordion Item.
-                

-            
-        
-    `;
+  return html`
+    
+      
+        
Item 1

+      
+      
+        Item 2
+      
+      
+        

+          This is content that has a
+          
+            link back to Spectrum Web Components
+          
+          so that it is easy to test that "Space" and "Enter" interactions on
+          focusable content does NOT toggle the Accordion Item.
+        

+      
+    
+  `;
 };
diff --git a/packages/accordion/test/a11y-tree.test.ts b/packages/accordion/test/a11y-tree.test.ts
index 22a8374302..cb43cfbc1a 100644
--- a/packages/accordion/test/a11y-tree.test.ts
+++ b/packages/accordion/test/a11y-tree.test.ts
@@ -10,34 +10,34 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@spectrum-web-components/base';
-import { elementUpdated, expect, fixture } from '@open-wc/testing';
+import { html } from "@spectrum-web-components/base";
+import { elementUpdated, expect, fixture } from "@open-wc/testing";
 
-import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
-import '@spectrum-web-components/accordion/sp-accordion-item.js';
+import { Accordion, AccordionItem } from "@spectrum-web-components/accordion";
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
 
-import { Default } from '../stories/accordion.stories.js';
+import { Default } from "../stories/accordion.stories.js";
 
-describe('Accordion - a11y tree', () => {
-    it('renders with items accessibly', async () => {
-        const el = await fixture(Default());
+describe("Accordion - a11y tree", () => {
+  it("renders with items accessibly", async () => {
+    const el = await fixture(Default());
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
+    await expect(el).to.be.accessible();
+  });
 });
 
-describe('Accordion Item - a11y tree', () => {
-    it('can exist with no parent accessibly', async () => {
-        const el = await fixture(html`
-            
-                
Item 1

-            
-        `);
+describe("Accordion Item - a11y tree", () => {
+  it("can exist with no parent accessibly", async () => {
+    const el = await fixture(html`
+      
+        
Item 1

+      
+    `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
+    await expect(el).to.be.accessible();
+  });
 });
diff --git a/packages/accordion/test/benchmark/basic-test.ts b/packages/accordion/test/benchmark/basic-test.ts
index cff3607455..d2449b8e4c 100644
--- a/packages/accordion/test/benchmark/basic-test.ts
+++ b/packages/accordion/test/benchmark/basic-test.ts
@@ -10,30 +10,30 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/accordion/sp-accordion.js';
-import '@spectrum-web-components/accordion/sp-accordion-item.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/accordion/sp-accordion.js";
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
-            
Item 1

-        
-        
-            
Item 2

-        
-        
-            
Item 3

-        
-        
-            
Item 4

-        
-        
-            
Item 5

-        
-        
-            
Item 6

-        
-    
+  
+    
+      
Item 1

+    
+    
+      
Item 2

+    
+    
+      
Item 3

+    
+    
+      
Item 4

+    
+    
+      
Item 5

+    
+    
+      
Item 6

+    
+  
 `);
diff --git a/packages/accordion/test/controlled.test.ts b/packages/accordion/test/controlled.test.ts
index 456e42fcdd..f01d758234 100644
--- a/packages/accordion/test/controlled.test.ts
+++ b/packages/accordion/test/controlled.test.ts
@@ -10,39 +10,39 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture } from '@open-wc/testing';
+import { elementUpdated, expect, fixture } from "@open-wc/testing";
 
-import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
+import { Accordion, AccordionItem } from "@spectrum-web-components/accordion";
 
-import { Default } from '../stories/accordion.stories.js';
+import { Default } from "../stories/accordion.stories.js";
 
-describe('Accordion - controlled', () => {
-    it('can have `toggle` events canceled', async () => {
-        const el = await fixture(Default());
+describe("Accordion - controlled", () => {
+  it("can have `toggle` events canceled", async () => {
+    const el = await fixture(Default());
 
-        await elementUpdated(el);
-        const firstItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(1)'
-        ) as AccordionItem;
-        const secondItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(2)'
-        ) as AccordionItem;
+    await elementUpdated(el);
+    const firstItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(1)",
+    ) as AccordionItem;
+    const secondItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(2)",
+    ) as AccordionItem;
 
-        const firstButton = firstItem.focusElement;
-        const secondButton = secondItem.focusElement;
+    const firstButton = firstItem.focusElement;
+    const secondButton = secondItem.focusElement;
 
-        firstButton.click();
-        await elementUpdated(el);
-        expect(firstItem.open).to.be.true;
-        expect(secondItem.open).to.be.false;
+    firstButton.click();
+    await elementUpdated(el);
+    expect(firstItem.open).to.be.true;
+    expect(secondItem.open).to.be.false;
 
-        el.addEventListener('sp-accordion-item-toggle', (event: Event) =>
-            event.preventDefault()
-        );
+    el.addEventListener("sp-accordion-item-toggle", (event: Event) =>
+      event.preventDefault(),
+    );
 
-        secondButton.click();
-        await elementUpdated(el);
-        expect(firstItem.open).to.be.true;
-        expect(secondItem.open).to.be.false;
-    });
+    secondButton.click();
+    await elementUpdated(el);
+    expect(firstItem.open).to.be.true;
+    expect(secondItem.open).to.be.false;
+  });
 });
diff --git a/packages/accordion/test/declarative.test.ts b/packages/accordion/test/declarative.test.ts
index 5132acaaf7..0cb85b7496 100644
--- a/packages/accordion/test/declarative.test.ts
+++ b/packages/accordion/test/declarative.test.ts
@@ -10,85 +10,80 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@spectrum-web-components/base';
-import { elementUpdated, expect, fixture } from '@open-wc/testing';
-import { spy } from 'sinon';
-
-import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
-import '@spectrum-web-components/accordion/sp-accordion.js';
-import '@spectrum-web-components/accordion/sp-accordion-item.js';
-
-describe('Accordion - declarative', () => {
-    it('does not accept focus when empty', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(document.activeElement === el).to.be.false;
-
-        el.focus();
-        await elementUpdated(el);
-
-        expect(document.activeElement === el).to.be.false;
-    });
-    it('does not accept focus when all children [disabled]', async () => {
-        const el = await fixture(html`
-            
-                
-                    
Item 1

-                
-                
-                    
Item 2

-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(document.activeElement === el).to.be.false;
-
-        el.focus();
-        await elementUpdated(el);
-
-        expect(document.activeElement === el).to.be.false;
-    });
+import { html } from "@spectrum-web-components/base";
+import { elementUpdated, expect, fixture } from "@open-wc/testing";
+import { spy } from "sinon";
+
+import { Accordion, AccordionItem } from "@spectrum-web-components/accordion";
+import "@spectrum-web-components/accordion/sp-accordion.js";
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
+
+describe("Accordion - declarative", () => {
+  it("does not accept focus when empty", async () => {
+    const el = await fixture(html`  `);
+
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+
+    el.focus();
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+  });
+  it("does not accept focus when all children [disabled]", async () => {
+    const el = await fixture(html`
+      
+        
+          
Item 1

+        
+        
+          
Item 2

+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+
+    el.focus();
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+  });
 });
 
-describe('Accordion Item - declarative', () => {
-    it('can be `[disabled]`', async () => {
-        const toggleSpy = spy();
-        const handleToggle = (): void => toggleSpy();
-        const el = await fixture(html`
-            
-                
Item 1

-            
-        `);
+describe("Accordion Item - declarative", () => {
+  it("can be `[disabled]`", async () => {
+    const toggleSpy = spy();
+    const handleToggle = (): void => toggleSpy();
+    const el = await fixture(html`
+      
+        
Item 1

+      
+    `);
 
-        const root = el.shadowRoot as ShadowRoot;
-        const button = root.querySelector('#header') as HTMLElement;
+    const root = el.shadowRoot as ShadowRoot;
+    const button = root.querySelector("#header") as HTMLElement;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(toggleSpy.callCount).to.equal(0);
+    expect(toggleSpy.callCount).to.equal(0);
 
-        button.click();
+    button.click();
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(toggleSpy.callCount).to.equal(0);
+    expect(toggleSpy.callCount).to.equal(0);
 
-        el.disabled = false;
-        await elementUpdated(el);
+    el.disabled = false;
+    await elementUpdated(el);
 
-        button.click();
+    button.click();
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(toggleSpy.callCount).to.equal(1);
-    });
+    expect(toggleSpy.callCount).to.equal(1);
+  });
 });
diff --git a/packages/accordion/test/dev-mode.test.ts b/packages/accordion/test/dev-mode.test.ts
index c2468c5dd0..bbb8ecb81d 100644
--- a/packages/accordion/test/dev-mode.test.ts
+++ b/packages/accordion/test/dev-mode.test.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { fixture } from '@open-wc/testing';
+import { fixture } from "@open-wc/testing";
 
-import { Accordion } from '@spectrum-web-components/accordion';
+import { Accordion } from "@spectrum-web-components/accordion";
 
-import { Default } from '../stories/accordion.stories.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/accordion.stories.js";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 
-describe('Accordion - dev mode', () => {
-    testForLitDevWarnings(async () => await fixture(Default()));
+describe("Accordion - dev mode", () => {
+  testForLitDevWarnings(async () => await fixture(Default()));
 });
diff --git a/packages/accordion/test/imperative.test.ts b/packages/accordion/test/imperative.test.ts
index c3259f9ff5..7978c00b4b 100644
--- a/packages/accordion/test/imperative.test.ts
+++ b/packages/accordion/test/imperative.test.ts
@@ -9,145 +9,145 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { elementUpdated, expect, fixture } from '@open-wc/testing';
-
-import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
-
-import { Default } from '../stories/accordion.stories.js';
-import { AccordionMarkup } from '../stories/index.js';
-
-describe('Accordion - imperative interactions', () => {
-    it('manages item size', async () => {
-        const el = await fixture(
-            AccordionMarkup({
-                size: 'l',
-            })
-        );
-        const item = el.querySelector('sp-accordion-item') as AccordionItem;
-
-        expect(el.size).to.equal('l');
-        expect(item.size).to.equal('l');
-
-        el.size = 's';
-        await elementUpdated(el);
-        await elementUpdated(item);
-        expect(el.size).to.equal('s');
-        expect(item.size).to.equal('s');
-    });
-    it('only allows one open item by default', async () => {
-        const el = await fixture(Default());
-
-        await elementUpdated(el);
-        const firstItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(1)'
-        ) as AccordionItem;
-        const secondItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(2)'
-        ) as AccordionItem;
-
-        const firstButton = firstItem.focusElement;
-        const secondButton = secondItem.focusElement;
-
-        firstButton.click();
-        await elementUpdated(el);
-        let openItems = el.querySelectorAll('sp-accordion-item[open]');
-
-        expect(openItems.length).to.equal(1);
-
-        secondButton.click();
-        await elementUpdated(el);
-        openItems = el.querySelectorAll('sp-accordion-item[open]');
-        expect(openItems.length).to.equal(1);
-    });
-    it('allows more than one open item when `[allow-multiple]`', async () => {
-        const el = await fixture(Default());
-
-        el.allowMultiple = true;
-        await elementUpdated(el);
-
-        const firstItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(1)'
-        ) as AccordionItem;
-        const secondItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(2)'
-        ) as AccordionItem;
-
-        const firstButton = firstItem.focusElement;
-        const secondButton = secondItem.focusElement;
-
-        firstButton.click();
-        await elementUpdated(el);
-
-        expect(firstItem.open).to.be.true;
-        expect(secondItem.open).to.be.false;
-
-        secondButton.click();
-        await elementUpdated(el);
-
-        expect(firstItem.open).to.be.true;
-        expect(secondItem.open).to.be.true;
-    });
-    it('ensures that the correct item is open and that items can be closed', async () => {
-        const el = await fixture(Default());
-
-        await elementUpdated(el);
-        const firstItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(1)'
-        ) as AccordionItem;
-        const secondItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(2)'
-        ) as AccordionItem;
-
-        const firstButton = firstItem.focusElement;
-        const secondButton = secondItem.focusElement;
-
-        firstButton.click();
-        await elementUpdated(el);
-        expect(firstItem.open).to.be.true;
-        expect(secondItem.open).to.be.false;
-
-        secondButton.click();
-        await elementUpdated(el);
-        expect(firstItem.open).to.be.false;
-        expect(secondItem.open).to.be.true;
-
-        secondButton.click();
-        await elementUpdated(el);
-        expect(firstItem.open).to.be.false;
-        expect(secondItem.open).to.be.false;
-    });
-    it('ensures that the correct item is open and that items can be closed when [allow-multiple]', async () => {
-        const el = await fixture(Default());
-
-        el.allowMultiple = true;
-        await elementUpdated(el);
-
-        const firstItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(1)'
-        ) as AccordionItem;
-        const secondItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(2)'
-        ) as AccordionItem;
-
-        const firstButton = firstItem.focusElement;
-        const secondButton = secondItem.focusElement;
-
-        firstButton.click();
-        await elementUpdated(el);
-
-        expect(firstItem.open).to.be.true;
-        expect(secondItem.open).to.be.false;
-
-        secondButton.click();
-        await elementUpdated(el);
-
-        expect(firstItem.open).to.be.true;
-        expect(secondItem.open).to.be.true;
-
-        secondButton.click();
-        await elementUpdated(el);
-
-        expect(firstItem.open).to.be.true;
-        expect(secondItem.open).to.be.false;
-    });
+import { elementUpdated, expect, fixture } from "@open-wc/testing";
+
+import { Accordion, AccordionItem } from "@spectrum-web-components/accordion";
+
+import { Default } from "../stories/accordion.stories.js";
+import { AccordionMarkup } from "../stories/index.js";
+
+describe("Accordion - imperative interactions", () => {
+  it("manages item size", async () => {
+    const el = await fixture(
+      AccordionMarkup({
+        size: "l",
+      }),
+    );
+    const item = el.querySelector("sp-accordion-item") as AccordionItem;
+
+    expect(el.size).to.equal("l");
+    expect(item.size).to.equal("l");
+
+    el.size = "s";
+    await elementUpdated(el);
+    await elementUpdated(item);
+    expect(el.size).to.equal("s");
+    expect(item.size).to.equal("s");
+  });
+  it("only allows one open item by default", async () => {
+    const el = await fixture(Default());
+
+    await elementUpdated(el);
+    const firstItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(1)",
+    ) as AccordionItem;
+    const secondItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(2)",
+    ) as AccordionItem;
+
+    const firstButton = firstItem.focusElement;
+    const secondButton = secondItem.focusElement;
+
+    firstButton.click();
+    await elementUpdated(el);
+    let openItems = el.querySelectorAll("sp-accordion-item[open]");
+
+    expect(openItems.length).to.equal(1);
+
+    secondButton.click();
+    await elementUpdated(el);
+    openItems = el.querySelectorAll("sp-accordion-item[open]");
+    expect(openItems.length).to.equal(1);
+  });
+  it("allows more than one open item when `[allow-multiple]`", async () => {
+    const el = await fixture(Default());
+
+    el.allowMultiple = true;
+    await elementUpdated(el);
+
+    const firstItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(1)",
+    ) as AccordionItem;
+    const secondItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(2)",
+    ) as AccordionItem;
+
+    const firstButton = firstItem.focusElement;
+    const secondButton = secondItem.focusElement;
+
+    firstButton.click();
+    await elementUpdated(el);
+
+    expect(firstItem.open).to.be.true;
+    expect(secondItem.open).to.be.false;
+
+    secondButton.click();
+    await elementUpdated(el);
+
+    expect(firstItem.open).to.be.true;
+    expect(secondItem.open).to.be.true;
+  });
+  it("ensures that the correct item is open and that items can be closed", async () => {
+    const el = await fixture(Default());
+
+    await elementUpdated(el);
+    const firstItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(1)",
+    ) as AccordionItem;
+    const secondItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(2)",
+    ) as AccordionItem;
+
+    const firstButton = firstItem.focusElement;
+    const secondButton = secondItem.focusElement;
+
+    firstButton.click();
+    await elementUpdated(el);
+    expect(firstItem.open).to.be.true;
+    expect(secondItem.open).to.be.false;
+
+    secondButton.click();
+    await elementUpdated(el);
+    expect(firstItem.open).to.be.false;
+    expect(secondItem.open).to.be.true;
+
+    secondButton.click();
+    await elementUpdated(el);
+    expect(firstItem.open).to.be.false;
+    expect(secondItem.open).to.be.false;
+  });
+  it("ensures that the correct item is open and that items can be closed when [allow-multiple]", async () => {
+    const el = await fixture(Default());
+
+    el.allowMultiple = true;
+    await elementUpdated(el);
+
+    const firstItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(1)",
+    ) as AccordionItem;
+    const secondItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(2)",
+    ) as AccordionItem;
+
+    const firstButton = firstItem.focusElement;
+    const secondButton = secondItem.focusElement;
+
+    firstButton.click();
+    await elementUpdated(el);
+
+    expect(firstItem.open).to.be.true;
+    expect(secondItem.open).to.be.false;
+
+    secondButton.click();
+    await elementUpdated(el);
+
+    expect(firstItem.open).to.be.true;
+    expect(secondItem.open).to.be.true;
+
+    secondButton.click();
+    await elementUpdated(el);
+
+    expect(firstItem.open).to.be.true;
+    expect(secondItem.open).to.be.false;
+  });
 });
diff --git a/packages/accordion/test/keyboard.test.ts b/packages/accordion/test/keyboard.test.ts
index 531fca5808..8384207f90 100644
--- a/packages/accordion/test/keyboard.test.ts
+++ b/packages/accordion/test/keyboard.test.ts
@@ -10,249 +10,244 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@spectrum-web-components/base';
-import { elementUpdated, expect, fixture } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { spy } from 'sinon';
-
-import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
-import '@spectrum-web-components/accordion/sp-accordion.js';
-import '@spectrum-web-components/accordion/sp-accordion-item.js';
-
-describe('Accordion - keyboard', () => {
-    it('does not accept keyboard events when items are not present', async () => {
-        const errorSpy = spy();
-        const el = await fixture(html`
-            
-                
-                    
Item 2

-                
-            
-        `);
-
-        await elementUpdated(el);
-        const item = el.querySelector('sp-accordion-item') as AccordionItem;
-
-        window.addEventListener('error', () => errorSpy());
-
-        el.focus();
-        item.remove();
-        await elementUpdated(el);
-        el.dispatchEvent(
-            new KeyboardEvent('keydown', {
-                code: 'ArrowDown',
-            })
-        );
-
-        expect(errorSpy.callCount).to.equal(0);
+import { html } from "@spectrum-web-components/base";
+import { elementUpdated, expect, fixture } from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { spy } from "sinon";
+
+import { Accordion, AccordionItem } from "@spectrum-web-components/accordion";
+import "@spectrum-web-components/accordion/sp-accordion.js";
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
+
+describe("Accordion - keyboard", () => {
+  it("does not accept keyboard events when items are not present", async () => {
+    const errorSpy = spy();
+    const el = await fixture(html`
+      
+        
+          
Item 2

+        
+      
+    `);
+
+    await elementUpdated(el);
+    const item = el.querySelector("sp-accordion-item") as AccordionItem;
+
+    window.addEventListener("error", () => errorSpy());
+
+    el.focus();
+    item.remove();
+    await elementUpdated(el);
+    el.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: "ArrowDown",
+      }),
+    );
+
+    expect(errorSpy.callCount).to.equal(0);
+  });
+  it("handles focus and keyboard input and ignores disabled items", async () => {
+    const el = await fixture(html`
+      
+        
+          
Item 1

+        
+        
+          
Item 2

+        
+        
+          
Item 3

+        
+        
+          
Item 4

+        
+        
+          
Item 5

+        
+        
+          
Item 6

+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    const secondItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(2)",
+    ) as AccordionItem;
+    const thirdItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(3)",
+    ) as AccordionItem;
+    const fourthItem = el.querySelector(
+      "sp-accordion-item:nth-of-type(4)",
+    ) as AccordionItem;
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const tab = isSafari ? "Alt+Tab" : "Tab";
+    const shiftTab = isSafari ? "Alt+Shift+Tab" : "Shift+Tab";
+
+    el.focus();
+
+    await elementUpdated(el);
+    expect(
+      document.activeElement === secondItem,
+      document.activeElement?.localName,
+    ).to.be.true;
+
+    await sendKeys({
+      press: tab,
     });
-    it('handles focus and keyboard input and ignores disabled items', async () => {
-        const el = await fixture(html`
-            
-                
-                    
Item 1

-                
-                
-                    
Item 2

-                
-                
-                    
Item 3

-                
-                
-                    
Item 4

-                
-                
-                    
Item 5

-                
-                
-                    
Item 6

-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        const secondItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(2)'
-        ) as AccordionItem;
-        const thirdItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(3)'
-        ) as AccordionItem;
-        const fourthItem = el.querySelector(
-            'sp-accordion-item:nth-of-type(4)'
-        ) as AccordionItem;
-        const isSafari = /^((?!chrome|android).)*safari/i.test(
-            navigator.userAgent
-        );
-        const tab = isSafari ? 'Alt+Tab' : 'Tab';
-        const shiftTab = isSafari ? 'Alt+Shift+Tab' : 'Shift+Tab';
-
-        el.focus();
-
-        await elementUpdated(el);
-        expect(
-            document.activeElement === secondItem,
-            document.activeElement?.localName
-        ).to.be.true;
-
-        await sendKeys({
-            press: tab,
-        });
-
-        expect(document.activeElement === thirdItem).to.be.true;
-
-        await sendKeys({
-            press: tab,
-        });
-
-        expect(document.activeElement === fourthItem).to.be.true;
-
-        await sendKeys({
-            press: shiftTab,
-        });
-        await sendKeys({
-            press: shiftTab,
-        });
-
-        expect(document.activeElement === secondItem).to.be.true;
-
-        document.body.focus();
-
-        el.focus();
-        expect(document.activeElement === secondItem).to.be.true;
-
-        await sendKeys({
-            press: shiftTab,
-        });
-        await elementUpdated(el);
-
-        const outsideFocused = document.activeElement as HTMLElement;
-
-        expect(typeof outsideFocused).not.to.equal(AccordionItem);
-        expect(typeof outsideFocused).not.to.equal(Accordion);
-    });
-});
-
-describe('Accordion Item - keyboard', () => {
-    it('dispatches toggle event on enter key', async () => {
-        let open = false;
-        const onAccordionToggle = (): void => {
-            open = true;
-        };
-        const el = await fixture(html`
-            
-                
Item 1

-            
-        `);
-
-        await elementUpdated(el);
 
-        expect(open).to.be.false;
+    expect(document.activeElement === thirdItem).to.be.true;
 
-        el.focus();
-        await sendKeys({
-            press: 'Enter',
-        });
+    await sendKeys({
+      press: tab,
+    });
 
-        await elementUpdated(el);
+    expect(document.activeElement === fourthItem).to.be.true;
 
-        expect(open).to.be.false;
+    await sendKeys({
+      press: shiftTab,
+    });
+    await sendKeys({
+      press: shiftTab,
+    });
 
-        el.disabled = false;
-        await elementUpdated(el);
+    expect(document.activeElement === secondItem).to.be.true;
 
-        el.focus();
-        await sendKeys({
-            press: 'Enter',
-        });
+    document.body.focus();
 
-        await elementUpdated(el);
+    el.focus();
+    expect(document.activeElement === secondItem).to.be.true;
 
-        expect(open).to.be.true;
+    await sendKeys({
+      press: shiftTab,
     });
-    it('dispatches toggle event on space key', async () => {
-        let open = false;
-        const onAccordionToggle = (): void => {
-            open = true;
-        };
-        const el = await fixture(html`
-            
-                
Item 1

-            
-        `);
-
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(open).to.be.false;
+    const outsideFocused = document.activeElement as HTMLElement;
 
-        el.focus();
-        await sendKeys({
-            press: 'Space',
-        });
-
-        await elementUpdated(el);
+    expect(typeof outsideFocused).not.to.equal(AccordionItem);
+    expect(typeof outsideFocused).not.to.equal(Accordion);
+  });
+});
 
-        expect(open).to.be.false;
+describe("Accordion Item - keyboard", () => {
+  it("dispatches toggle event on enter key", async () => {
+    let open = false;
+    const onAccordionToggle = (): void => {
+      open = true;
+    };
+    const el = await fixture(html`
+      
+        
Item 1

+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(open).to.be.false;
+
+    el.focus();
+    await sendKeys({
+      press: "Enter",
+    });
 
-        el.disabled = false;
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        el.focus();
-        await sendKeys({
-            press: 'Space',
-        });
+    expect(open).to.be.false;
 
-        await elementUpdated(el);
+    el.disabled = false;
+    await elementUpdated(el);
 
-        expect(open).to.be.true;
+    el.focus();
+    await sendKeys({
+      press: "Enter",
     });
-    it('does not dispatch toggle events on key events in Item content', async () => {
-        let closed = false;
-        const onAccordionToggle = (): void => {
-            closed = true;
-        };
-        const el = await fixture(html`
-            
-                

-                    
-                

-            
-        `);
 
-        const button = el.querySelector('button') as HTMLButtonElement;
+    await elementUpdated(el);
+
+    expect(open).to.be.true;
+  });
+  it("dispatches toggle event on space key", async () => {
+    let open = false;
+    const onAccordionToggle = (): void => {
+      open = true;
+    };
+    const el = await fixture(html`
+      
+        
Item 1

+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(open).to.be.false;
+
+    el.focus();
+    await sendKeys({
+      press: "Space",
+    });
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.open).to.be.true;
-        expect(closed).to.be.false;
+    expect(open).to.be.false;
 
-        button.focus();
-        await sendKeys({
-            press: 'Space',
-        });
+    el.disabled = false;
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    el.focus();
+    await sendKeys({
+      press: "Space",
+    });
 
-        expect(closed).to.be.false;
+    await elementUpdated(el);
+
+    expect(open).to.be.true;
+  });
+  it("does not dispatch toggle events on key events in Item content", async () => {
+    let closed = false;
+    const onAccordionToggle = (): void => {
+      closed = true;
+    };
+    const el = await fixture(html`
+      
+        

+          
+        

+      
+    `);
+
+    const button = el.querySelector("button") as HTMLButtonElement;
+
+    await elementUpdated(el);
+
+    expect(el.open).to.be.true;
+    expect(closed).to.be.false;
+
+    button.focus();
+    await sendKeys({
+      press: "Space",
+    });
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        await sendKeys({
-            press: 'Enter',
-        });
+    expect(closed).to.be.false;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(closed).to.be.false;
-        expect(el.open).to.be.true;
+    await sendKeys({
+      press: "Enter",
     });
+
+    await elementUpdated(el);
+
+    expect(closed).to.be.false;
+    expect(el.open).to.be.true;
+  });
 });
diff --git a/packages/accordion/test/memory.test.ts b/packages/accordion/test/memory.test.ts
index 54705e1f04..a3d965707e 100644
--- a/packages/accordion/test/memory.test.ts
+++ b/packages/accordion/test/memory.test.ts
@@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Default } from '../stories/accordion.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/accordion.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-describe('Accordion - memory usage', () => {
-    testForMemoryLeaks(Default());
+describe("Accordion - memory usage", () => {
+  testForMemoryLeaks(Default());
 });
diff --git a/packages/action-bar/sp-action-bar.ts b/packages/action-bar/sp-action-bar.ts
index 9e356591cd..cc2f852ee2 100644
--- a/packages/action-bar/sp-action-bar.ts
+++ b/packages/action-bar/sp-action-bar.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ActionBar } from './src/ActionBar.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { ActionBar } from "./src/ActionBar.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-action-bar', ActionBar);
+defineElement("sp-action-bar", ActionBar);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-action-bar': ActionBar;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-action-bar": ActionBar;
+  }
 }
diff --git a/packages/action-bar/src/ActionBar.ts b/packages/action-bar/src/ActionBar.ts
index 1a94f37168..28bed69d1d 100644
--- a/packages/action-bar/src/ActionBar.ts
+++ b/packages/action-bar/src/ActionBar.ts
@@ -11,20 +11,20 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/button/sp-close-button.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import actionBarStyles from './action-bar.css.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
-export const actionBarVariants = ['sticky', 'fixed'];
+  CSSResultArray,
+  html,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/button/sp-close-button.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import actionBarStyles from "./action-bar.css.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
+export const actionBarVariants = ["sticky", "fixed"];
 
 /**
  * The ActionBar component provides a container for actions that can be performed on selected items.
@@ -35,114 +35,110 @@ export const actionBarVariants = ['sticky', 'fixed'];
  *
  */
 export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) {
-    public static override get styles(): CSSResultArray {
-        return [actionBarStyles];
+  public static override get styles(): CSSResultArray {
+    return [actionBarStyles];
+  }
+
+  /**
+   * Deliver the Action Bar with additional visual emphasis.
+   * When true, the action bar is styled with emphasis.
+   */
+  @property({ type: Boolean, reflect: true })
+  public emphasized = false;
+
+  /**
+   * When `flexible`, the action bar sizes itself to its content
+   * rather than a specific width.
+   */
+  @property({ type: Boolean, reflect: true })
+  public flexible = false;
+
+  /**
+   * Indicates whether the action bar is open.
+   * When true, the action bar is visible; otherwise, it is hidden.
+   */
+  @property({ type: Boolean, reflect: true })
+  public open = false;
+
+  /**
+   * Applies specific styling when set to `sticky` or `fixed`.
+   * The `variant` attribute is removed when not matching one of the above.
+   */
+  @property({ type: String })
+  public set variant(variant: string) {
+    if (variant === this.variant) {
+      return;
     }
 
-    /**
-     * Deliver the Action Bar with additional visual emphasis.
-     * When true, the action bar is styled with emphasis.
-     */
-    @property({ type: Boolean, reflect: true })
-    public emphasized = false;
-
-    /**
-     * When `flexible`, the action bar sizes itself to its content
-     * rather than a specific width.
-     */
-    @property({ type: Boolean, reflect: true })
-    public flexible = false;
-
-    /**
-     * Indicates whether the action bar is open.
-     * When true, the action bar is visible; otherwise, it is hidden.
-     */
-    @property({ type: Boolean, reflect: true })
-    public open = false;
-
-    /**
-     * Applies specific styling when set to `sticky` or `fixed`.
-     * The `variant` attribute is removed when not matching one of the above.
-     */
-    @property({ type: String })
-    public set variant(variant: string) {
-        if (variant === this.variant) {
-            return;
-        }
-
-        if (actionBarVariants.includes(variant)) {
-            this.setAttribute('variant', variant);
-            this._variant = variant;
-
-            return;
-        }
-
-        this.removeAttribute('variant');
-        this._variant = '';
-    }
-
-    /**
-     * Gets the current variant of the action bar.
-     */
-    public get variant(): string {
-        return this._variant;
-    }
+    if (actionBarVariants.includes(variant)) {
+      this.setAttribute("variant", variant);
+      this._variant = variant;
 
-    private _variant = '';
-
-    /**
-     * Handles the click event on the close button.
-     * Toggles the open state of the action bar and dispatches a 'close' event.
-     * If the event is canceled, the open state is reverted.
-     *
-     * @fires close - Announces that the action bar is closing.
-     */
-    private handleClick(): void {
-        this.open = false;
-
-        const applyDefault = this.dispatchEvent(
-            new Event('close', {
-                bubbles: true,
-                composed: true,
-                cancelable: true,
-            })
-        );
-
-        if (!applyDefault) {
-            this.open = true;
-        }
+      return;
     }
 
-    /**
-     * Renders the action bar template.
-     * Includes a popover with a close button, field label, and action group.
-     */
-    public override render(): TemplateResult {
-        return html`
-            
-                
-                    
-                    
-                        
-                    
-                    
-                        
-                    
-                
-            
-        `;
+    this.removeAttribute("variant");
+    this._variant = "";
+  }
+
+  /**
+   * Gets the current variant of the action bar.
+   */
+  public get variant(): string {
+    return this._variant;
+  }
+
+  private _variant = "";
+
+  /**
+   * Handles the click event on the close button.
+   * Toggles the open state of the action bar and dispatches a 'close' event.
+   * If the event is canceled, the open state is reverted.
+   *
+   * @fires close - Announces that the action bar is closing.
+   */
+  private handleClick(): void {
+    this.open = false;
+
+    const applyDefault = this.dispatchEvent(
+      new Event("close", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
+
+    if (!applyDefault) {
+      this.open = true;
     }
+  }
+
+  /**
+   * Renders the action bar template.
+   * Includes a popover with a close button, field label, and action group.
+   */
+  public override render(): TemplateResult {
+    return html`
+      
+        
+          
+          
+            
+          
+          
+            
+          
+        
+      
+    `;
+  }
 }
diff --git a/packages/action-bar/src/index.ts b/packages/action-bar/src/index.ts
index a23e3b8b1a..f83d5ebeaf 100644
--- a/packages/action-bar/src/index.ts
+++ b/packages/action-bar/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './ActionBar.js';
+export * from "./ActionBar.js";
diff --git a/packages/action-bar/stories/action-bar.stories.ts b/packages/action-bar/stories/action-bar.stories.ts
index 48c7e919c0..2f7e4aba91 100644
--- a/packages/action-bar/stories/action-bar.stories.ts
+++ b/packages/action-bar/stories/action-bar.stories.ts
@@ -10,95 +10,95 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/action-bar/sp-action-bar.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
+import "@spectrum-web-components/action-bar/sp-action-bar.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
 
-import { Template } from './template.js';
+import { Template } from "./template.js";
 
 export default {
-    title: 'Action Bar',
-    component: 'sp-action-bar',
-    parameters: {
-        // Getting the Figma link: https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/MPtRIVRzPp2VHiEplwXL2X/S-%2F-Manual?node-id=465%3A3127&t=xbooxCWItOFgG2xM-1',
-        },
+  title: "Action Bar",
+  component: "sp-action-bar",
+  parameters: {
+    // Getting the Figma link: https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/MPtRIVRzPp2VHiEplwXL2X/S-%2F-Manual?node-id=465%3A3127&t=xbooxCWItOFgG2xM-1",
     },
+  },
 };
 
 export const Default = (): TemplateResult =>
-    Template({
-        open: true,
-    });
+  Template({
+    open: true,
+  });
 
 export const emphasized = (): TemplateResult => {
-    return html`
-        
-            2 selected
-            
-                
-            
-        
-    `;
+  return html`
+    
+      2 selected
+      
+        
+      
+    
+  `;
 };
 
 export const fixed = (): TemplateResult => {
-    return html`
-        
-        
-            2 selected
-            
-                
-            
-        
-    `;
+  return html`
+    
+    
+      2 selected
+      
+        
+      
+    
+  `;
 };
 
 export const flexible = (): TemplateResult => {
-    return html`
-        
-            2 selected
-            
-                
-            
-        
-    `;
+  return html`
+    
+      2 selected
+      
+        
+      
+    
+  `;
 };
 
 export const hasActionMenuAsChild = (): TemplateResult => {
-    return html`
-        
-            2 selected
-            
-                
-            
-            
-                One
-                Two
-                
-                    Select some items
-                    
-                        A
-                        B
-                        C
-                    
-                
-            
-        
-    `;
+  return html`
+    
+      2 selected
+      
+        
+      
+      
+        One
+        Two
+        
+          Select some items
+          
+            A
+            B
+            C
+          
+        
+      
+    
+  `;
 };
diff --git a/packages/action-bar/stories/args.ts b/packages/action-bar/stories/args.ts
index eae8d2346b..f93a515fd3 100644
--- a/packages/action-bar/stories/args.ts
+++ b/packages/action-bar/stories/args.ts
@@ -11,40 +11,40 @@ governing permissions and limitations under the License.
 */
 
 export const argTypes = {
-    open: {
-        name: 'open',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the Action Bar is open and visible.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: true },
-        },
-        control: {
-            type: 'boolean',
-        },
+  open: {
+    name: "open",
+    type: { name: "boolean", required: false },
+    description: "Whether the Action Bar is open and visible.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: true },
     },
-    emphasized: {
-        name: 'emphasized',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the Action Bar is emphasized for the viewer.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+    control: {
+      type: "boolean",
     },
-    tools: {
-        name: 'tools',
-        type: { name: 'boolean', required: false },
-        description: 'Whether to display tools in the action bar.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: true },
-        },
-        control: {
-            type: 'boolean',
-        },
+  },
+  emphasized: {
+    name: "emphasized",
+    type: { name: "boolean", required: false },
+    description: "Whether the Action Bar is emphasized for the viewer.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
     },
+    control: {
+      type: "boolean",
+    },
+  },
+  tools: {
+    name: "tools",
+    type: { name: "boolean", required: false },
+    description: "Whether to display tools in the action bar.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: true },
+    },
+    control: {
+      type: "boolean",
+    },
+  },
 };
diff --git a/packages/action-bar/stories/template.ts b/packages/action-bar/stories/template.ts
index b90197348f..08714621d3 100644
--- a/packages/action-bar/stories/template.ts
+++ b/packages/action-bar/stories/template.ts
@@ -10,37 +10,37 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/action-bar/sp-action-bar.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';
+import "@spectrum-web-components/action-bar/sp-action-bar.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-share.js";
 
 export interface Properties {
-    emphasized?: boolean;
-    open?: boolean;
-    tools?: boolean;
+  emphasized?: boolean;
+  open?: boolean;
+  tools?: boolean;
 }
 
 export const Template = ({
-    emphasized,
-    open,
-    tools = true,
+  emphasized,
+  open,
+  tools = true,
 }: Properties): TemplateResult => {
-    return html`
-        
-            2 selected
-            ${tools
-                ? html`
-                      
-                          
-                      
-                      
-                          
-                      
-                  `
-                : html``}
-        
-    `;
+  return html`
+    
+      2 selected
+      ${tools
+        ? html`
+            
+              
+            
+            
+              
+            
+          `
+        : html``}
+    
+  `;
 };
diff --git a/packages/action-bar/test/action-bar-memory.test.ts b/packages/action-bar/test/action-bar-memory.test.ts
index 2d13641e71..87e6159a93 100644
--- a/packages/action-bar/test/action-bar-memory.test.ts
+++ b/packages/action-bar/test/action-bar-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Default } from '../stories/action-bar.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/action-bar.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(Default());
diff --git a/packages/action-bar/test/action-bar.test.ts b/packages/action-bar/test/action-bar.test.ts
index a6191f7325..84beac7d89 100644
--- a/packages/action-bar/test/action-bar.test.ts
+++ b/packages/action-bar/test/action-bar.test.ts
@@ -10,108 +10,108 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 
-import '@spectrum-web-components/action-bar/sp-action-bar.js';
-import { ActionBar } from '@spectrum-web-components/action-bar';
-import { Default, emphasized } from '../stories/action-bar.stories.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-import { spy } from 'sinon';
+import "@spectrum-web-components/action-bar/sp-action-bar.js";
+import { ActionBar } from "@spectrum-web-components/action-bar";
+import { Default, emphasized } from "../stories/action-bar.stories.js";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { spy } from "sinon";
 
-describe('ActionBar', () => {
-    testForLitDevWarnings(async () => await fixture(Default()));
-    it('loads', async () => {
-        const el = await fixture(Default());
+describe("ActionBar", () => {
+  testForLitDevWarnings(async () => await fixture(Default()));
+  it("loads", async () => {
+    const el = await fixture(Default());
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el).to.not.be.undefined;
+    expect(el).to.not.be.undefined;
 
-        await expect(el).to.be.accessible();
-    });
+    await expect(el).to.be.accessible();
+  });
 
-    it('accepts variants', async () => {
-        const el = await fixture(html`
-            Help text.
-        `);
+  it("accepts variants", async () => {
+    const el = await fixture(html`
+      Help text.
+    `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.variant).to.equal('sticky');
-        expect(el.getAttribute('variant')).to.equal('sticky');
+    expect(el.variant).to.equal("sticky");
+    expect(el.getAttribute("variant")).to.equal("sticky");
 
-        el.variant = 'fixed';
+    el.variant = "fixed";
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.variant).to.equal('fixed');
-        expect(el.getAttribute('variant')).to.equal('fixed');
+    expect(el.variant).to.equal("fixed");
+    expect(el.getAttribute("variant")).to.equal("fixed");
 
-        el.setAttribute('variant', 'sticky');
+    el.setAttribute("variant", "sticky");
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.variant).to.equal('sticky');
-        expect(el.getAttribute('variant')).to.equal('sticky');
+    expect(el.variant).to.equal("sticky");
+    expect(el.getAttribute("variant")).to.equal("sticky");
 
-        el.removeAttribute('variant');
+    el.removeAttribute("variant");
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.variant).to.equal('');
-        expect(el.hasAttribute('variant')).to.be.false;
-    });
-    it('validates variants', async () => {
-        const el = await fixture(html`
-            Help text.
-        `);
+    expect(el.variant).to.equal("");
+    expect(el.hasAttribute("variant")).to.be.false;
+  });
+  it("validates variants", async () => {
+    const el = await fixture(html`
+      Help text.
+    `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.variant).to.equal('');
-        expect(el.hasAttribute('variant')).to.be.false;
+    expect(el.variant).to.equal("");
+    expect(el.hasAttribute("variant")).to.be.false;
 
-        el.variant = 'fixed';
+    el.variant = "fixed";
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.variant).to.equal('fixed');
-        expect(el.getAttribute('variant')).to.equal('fixed');
+    expect(el.variant).to.equal("fixed");
+    expect(el.getAttribute("variant")).to.equal("fixed");
 
-        el.variant = 'fixed';
+    el.variant = "fixed";
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.variant).to.equal('fixed');
-        expect(el.getAttribute('variant')).to.equal('fixed');
-    });
-    it('dispatches close event', async () => {
-        const el = await fixture(emphasized());
-        const closeSpy = spy();
-
-        el.addEventListener('close', () => closeSpy());
-        expect(closeSpy.callCount).to.equal(0);
-        expect(el.open).to.be.true;
-        const closeButton = el.shadowRoot.querySelector('sp-close-button');
-
-        closeButton?.click();
-        expect(closeSpy.callCount).to.equal(1);
-        expect(el.open).to.be.false;
-    });
-    it('can have close event prevented', async () => {
-        const el = await fixture(emphasized());
-        const closeSpy = spy();
-
-        el.addEventListener('close', (event: Event) => {
-            event.preventDefault();
-            closeSpy();
-        });
-        expect(closeSpy.callCount).to.equal(0);
-        expect(el.open).to.be.true;
-        const closeButton = el.shadowRoot.querySelector('sp-close-button');
-
-        closeButton?.click();
-        expect(closeSpy.callCount).to.equal(1);
-        expect(el.open).to.be.true;
+    expect(el.variant).to.equal("fixed");
+    expect(el.getAttribute("variant")).to.equal("fixed");
+  });
+  it("dispatches close event", async () => {
+    const el = await fixture(emphasized());
+    const closeSpy = spy();
+
+    el.addEventListener("close", () => closeSpy());
+    expect(closeSpy.callCount).to.equal(0);
+    expect(el.open).to.be.true;
+    const closeButton = el.shadowRoot.querySelector("sp-close-button");
+
+    closeButton?.click();
+    expect(closeSpy.callCount).to.equal(1);
+    expect(el.open).to.be.false;
+  });
+  it("can have close event prevented", async () => {
+    const el = await fixture(emphasized());
+    const closeSpy = spy();
+
+    el.addEventListener("close", (event: Event) => {
+      event.preventDefault();
+      closeSpy();
     });
+    expect(closeSpy.callCount).to.equal(0);
+    expect(el.open).to.be.true;
+    const closeButton = el.shadowRoot.querySelector("sp-close-button");
+
+    closeButton?.click();
+    expect(closeSpy.callCount).to.equal(1);
+    expect(el.open).to.be.true;
+  });
 });
diff --git a/packages/action-bar/test/benchmark/basic-test.ts b/packages/action-bar/test/benchmark/basic-test.ts
index 30fd65f0dc..99a267474c 100644
--- a/packages/action-bar/test/benchmark/basic-test.ts
+++ b/packages/action-bar/test/benchmark/basic-test.ts
@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/action-bar/sp-action-bar.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/action-bar/sp-action-bar.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/action-button/sp-action-button.ts b/packages/action-button/sp-action-button.ts
index 895f1fd45b..e5579a3777 100644
--- a/packages/action-button/sp-action-button.ts
+++ b/packages/action-button/sp-action-button.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ActionButton } from './src/ActionButton.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { ActionButton } from "./src/ActionButton.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-action-button', ActionButton);
+defineElement("sp-action-button", ActionButton);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-action-button': ActionButton;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-action-button": ActionButton;
+  }
 }
diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts
index fb7f523416..fece405950 100644
--- a/packages/action-button/src/ActionButton.ts
+++ b/packages/action-button/src/ActionButton.ts
@@ -11,29 +11,29 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    DefaultElementSize,
-    html,
-    PropertyValues,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { ButtonBase } from '@spectrum-web-components/button';
-import buttonStyles from './action-button.css.js';
-import cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js';
-import cornerTriangleOverrides from '@spectrum-web-components/icon/src/icon-corner-triangle-overrides.css.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js';
+  CSSResultArray,
+  DefaultElementSize,
+  html,
+  PropertyValues,
+  SizedMixin,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ButtonBase } from "@spectrum-web-components/button";
+import buttonStyles from "./action-button.css.js";
+import cornerTriangleStyles from "@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js";
+import cornerTriangleOverrides from "@spectrum-web-components/icon/src/icon-corner-triangle-overrides.css.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js";
 
 /**
  * A mapping of size keys to corresponding CSS classes for the hold affordance icon.
  */
 const holdAffordanceClass = {
-    xs: 'spectrum-UIIcon-CornerTriangle75',
-    s: 'spectrum-UIIcon-CornerTriangle75',
-    m: 'spectrum-UIIcon-CornerTriangle100',
-    l: 'spectrum-UIIcon-CornerTriangle200',
-    xl: 'spectrum-UIIcon-CornerTriangle300',
+  xs: "spectrum-UIIcon-CornerTriangle75",
+  s: "spectrum-UIIcon-CornerTriangle75",
+  m: "spectrum-UIIcon-CornerTriangle100",
+  l: "spectrum-UIIcon-CornerTriangle200",
+  xl: "spectrum-UIIcon-CornerTriangle300",
 };
 
 /**
@@ -51,7 +51,7 @@ let LONGPRESS_TIMEOUT: ReturnType;
  * Indicates the source of the event, which can be either 'pointer' or 'keyboard'.
  */
 export type LongpressEvent = {
-    source: 'pointer' | 'keyboard';
+  source: "pointer" | "keyboard";
 };
 
 /**
@@ -66,298 +66,283 @@ export type LongpressEvent = {
  * while `altKey===true`.
  */
 export class ActionButton extends SizedMixin(ButtonBase, {
-    validSizes: ['xs', 's', 'm', 'l', 'xl'],
-    noDefaultSize: true,
+  validSizes: ["xs", "s", "m", "l", "xl"],
+  noDefaultSize: true,
 }) {
-    public static override get styles(): CSSResultArray {
-        return [
-            ...super.styles,
-            buttonStyles,
-            cornerTriangleStyles,
-            cornerTriangleOverrides,
-        ];
+  public static override get styles(): CSSResultArray {
+    return [
+      ...super.styles,
+      buttonStyles,
+      cornerTriangleStyles,
+      cornerTriangleOverrides,
+    ];
+  }
+
+  /**
+   * When true, the action button is styled with emphasis.
+   */
+  @property({ type: Boolean, reflect: true })
+  public emphasized = false;
+
+  /**
+   * When true, the action button displays a hold affordance icon.
+   */
+  @property({ type: Boolean, reflect: true, attribute: "hold-affordance" })
+  public holdAffordance = false;
+
+  /**
+   * When true, the action button is styled with a quieter appearance.
+   */
+  @property({ type: Boolean, reflect: true })
+  public quiet = false;
+
+  /**
+   * The ARIA role of the action button.
+   * Defaults to 'button'.
+   */
+  @property({ reflect: true })
+  public override role = "button";
+
+  /**
+   * Indicates whether the action button is in a selected state.
+   * When true, the action button has `aria-pressed='true'`.
+   */
+  @property({ type: Boolean, reflect: true })
+  public selected = false;
+
+  /**
+   * Whether to automatically manage the `selected` attribute on interaction.
+   * When true, `aria-pressed="false"` is used when `selected === false`.
+   */
+  @property({ type: Boolean, reflect: true })
+  public toggles = false;
+
+  /**
+   * The static color variant to use for the action button.
+   * Can be 'white' or 'black'.
+   */
+  @property({ reflect: true, attribute: "static-color" })
+  public staticColor?: "white" | "black";
+
+  /**
+   * The value associated with the action button.
+   * If not set, defaults to the text content of the button.
+   */
+  @property({ type: String })
+  public get value(): string {
+    return this._value || this.itemText;
+  }
+  public set value(value: string) {
+    if (value === this._value) {
+      return;
     }
 
-    /**
-     * When true, the action button is styled with emphasis.
-     */
-    @property({ type: Boolean, reflect: true })
-    public emphasized = false;
-
-    /**
-     * When true, the action button displays a hold affordance icon.
-     */
-    @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
-    public holdAffordance = false;
-
-    /**
-     * When true, the action button is styled with a quieter appearance.
-     */
-    @property({ type: Boolean, reflect: true })
-    public quiet = false;
-
-    /**
-     * The ARIA role of the action button.
-     * Defaults to 'button'.
-     */
-    @property({ reflect: true })
-    public override role = 'button';
-
-    /**
-     * Indicates whether the action button is in a selected state.
-     * When true, the action button has `aria-pressed='true'`.
-     */
-    @property({ type: Boolean, reflect: true })
-    public selected = false;
-
-    /**
-     * Whether to automatically manage the `selected` attribute on interaction.
-     * When true, `aria-pressed="false"` is used when `selected === false`.
-     */
-    @property({ type: Boolean, reflect: true })
-    public toggles = false;
-
-    /**
-     * The static color variant to use for the action button.
-     * Can be 'white' or 'black'.
-     */
-    @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white' | 'black';
-
-    /**
-     * The value associated with the action button.
-     * If not set, defaults to the text content of the button.
-     */
-    @property({ type: String })
-    public get value(): string {
-        return this._value || this.itemText;
-    }
-    public set value(value: string) {
-        if (value === this._value) {
-            return;
-        }
-
-        this._value = value || '';
+    this._value = value || "";
 
-        if (this._value) {
-            this.setAttribute('value', this._value);
-        } else {
-            this.removeAttribute('value');
-        }
+    if (this._value) {
+      this.setAttribute("value", this._value);
+    } else {
+      this.removeAttribute("value");
     }
-    private _value = '';
-
-    /**
-     * Retrieves the text content of the action button.
-     */
-    public get itemText(): string {
-        return (this.textContent || /* c8 ignore next */ '').trim();
+  }
+  private _value = "";
+
+  /**
+   * Retrieves the text content of the action button.
+   */
+  public get itemText(): string {
+    return (this.textContent || /* c8 ignore next */ "").trim();
+  }
+
+  constructor() {
+    super();
+    this.addEventListener("click", this.onClick);
+  }
+
+  /**
+   * Handles the click event on the action button.
+   * Toggles the selected state if the button is configured to toggle.
+   * Dispatches a 'change' event to notify listeners of the state change.
+   * If the event is canceled, the selected state is reverted.
+   */
+  private onClick = (): void => {
+    if (!this.toggles) {
+      return;
     }
 
-    constructor() {
-        super();
-        this.addEventListener('click', this.onClick);
+    this.selected = !this.selected;
+    const applyDefault = this.dispatchEvent(
+      new Event("change", {
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    if (!applyDefault) {
+      this.selected = !this.selected;
     }
-
-    /**
-     * Handles the click event on the action button.
-     * Toggles the selected state if the button is configured to toggle.
-     * Dispatches a 'change' event to notify listeners of the state change.
-     * If the event is canceled, the selected state is reverted.
-     */
-    private onClick = (): void => {
-        if (!this.toggles) {
-            return;
-        }
-
-        this.selected = !this.selected;
-        const applyDefault = this.dispatchEvent(
-            new Event('change', {
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-
-        if (!applyDefault) {
-            this.selected = !this.selected;
-        }
-    };
-
-    /**
-     * Handles the pointerdown event to display the hold affordance icon.
-     * Sets up event listeners for pointerup and pointercancel events.
-     * Dispatches a 'longpress' event if the pointer is held down for the duration of LONGPRESS_DURATION.
-     */
-    private handlePointerdownHoldAffordance(event: PointerEvent): void {
-        if (event.button !== 0) return;
-
-        this.addEventListener('pointerup', this.handlePointerupHoldAffordance);
-        this.addEventListener(
-            'pointercancel',
-            this.handlePointerupHoldAffordance
-        );
-        LONGPRESS_TIMEOUT = setTimeout(() => {
-            this.dispatchEvent(
-                new CustomEvent('longpress', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        source: 'pointer',
-                    },
-                })
-            );
-        }, LONGPRESS_DURATION);
+  };
+
+  /**
+   * Handles the pointerdown event to display the hold affordance icon.
+   * Sets up event listeners for pointerup and pointercancel events.
+   * Dispatches a 'longpress' event if the pointer is held down for the duration of LONGPRESS_DURATION.
+   */
+  private handlePointerdownHoldAffordance(event: PointerEvent): void {
+    if (event.button !== 0) {
+      return;
     }
 
-    /**
-     * Handles the pointerup event to clear the hold affordance timeout.
-     * Removes the event listeners for pointerup and pointercancel events.
-     */
-    private handlePointerupHoldAffordance(): void {
-        clearTimeout(LONGPRESS_TIMEOUT);
-        this.removeEventListener(
-            'pointerup',
-            this.handlePointerupHoldAffordance
-        );
-        this.removeEventListener(
-            'pointercancel',
-            this.handlePointerupHoldAffordance
-        );
+    this.addEventListener("pointerup", this.handlePointerupHoldAffordance);
+    this.addEventListener("pointercancel", this.handlePointerupHoldAffordance);
+    LONGPRESS_TIMEOUT = setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            source: "pointer",
+          },
+        }),
+      );
+    }, LONGPRESS_DURATION);
+  }
+
+  /**
+   * Handles the pointerup event to clear the hold affordance timeout.
+   * Removes the event listeners for pointerup and pointercancel events.
+   */
+  private handlePointerupHoldAffordance(): void {
+    clearTimeout(LONGPRESS_TIMEOUT);
+    this.removeEventListener("pointerup", this.handlePointerupHoldAffordance);
+    this.removeEventListener(
+      "pointercancel",
+      this.handlePointerupHoldAffordance,
+    );
+  }
+
+  /**
+   * Handles the keydown event to manage the hold affordance icon.
+   * Prevents default behavior for Space or Alt+ArrowDown keys and sets up the keyup event listener.
+   */
+  protected override handleKeydown(event: KeyboardEvent): void {
+    if (!this.holdAffordance) {
+      return super.handleKeydown(event);
     }
 
-    /**
-     * Handles the keydown event to manage the hold affordance icon.
-     * Prevents default behavior for Space or Alt+ArrowDown keys and sets up the keyup event listener.
-     */
-    protected override handleKeydown(event: KeyboardEvent): void {
-        if (!this.holdAffordance) {
-            return super.handleKeydown(event);
-        }
-
-        const { code, altKey } = event;
+    const { code, altKey } = event;
 
-        if (code === 'Space' || (altKey && code === 'ArrowDown')) {
-            event.preventDefault();
+    if (code === "Space" || (altKey && code === "ArrowDown")) {
+      event.preventDefault();
 
-            if (code === 'ArrowDown') {
-                event.stopPropagation();
-                event.stopImmediatePropagation();
-            }
+      if (code === "ArrowDown") {
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+      }
 
-            this.addEventListener('keyup', this.handleKeyup);
-            this.active = true;
-        }
+      this.addEventListener("keyup", this.handleKeyup);
+      this.active = true;
     }
-
-    /**
-     * Handles the keyup event to dispatch a 'longpress' event.
-     * Stops propagation for Space or Alt+ArrowDown keys and dispatches the event.
-     */
-    protected override handleKeyup(event: KeyboardEvent): void {
-        if (!this.holdAffordance) {
-            return super.handleKeyup(event);
-        }
-
-        const { code, altKey } = event;
-
-        if (code === 'Space' || (altKey && code === 'ArrowDown')) {
-            event.stopPropagation();
-            this.dispatchEvent(
-                new CustomEvent('longpress', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        source: 'keyboard',
-                    },
-                })
-            );
-            this.active = false;
-        }
+  }
+
+  /**
+   * Handles the keyup event to dispatch a 'longpress' event.
+   * Stops propagation for Space or Alt+ArrowDown keys and dispatches the event.
+   */
+  protected override handleKeyup(event: KeyboardEvent): void {
+    if (!this.holdAffordance) {
+      return super.handleKeyup(event);
     }
 
-    /**
-     * Gets the content to be rendered inside the button.
-     * Adds the hold affordance icon if the holdAffordance property is true.
-     */
-    protected override get buttonContent(): TemplateResult[] {
-        const buttonContent = super.buttonContent;
-
-        if (this.holdAffordance) {
-            buttonContent.unshift(html`
-                
-            `);
-        }
-
-        return buttonContent;
+    const { code, altKey } = event;
+
+    if (code === "Space" || (altKey && code === "ArrowDown")) {
+      event.stopPropagation();
+      this.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            source: "keyboard",
+          },
+        }),
+      );
+      this.active = false;
+    }
+  }
+
+  /**
+   * Gets the content to be rendered inside the button.
+   * Adds the hold affordance icon if the holdAffordance property is true.
+   */
+  protected override get buttonContent(): TemplateResult[] {
+    const buttonContent = super.buttonContent;
+
+    if (this.holdAffordance) {
+      buttonContent.unshift(html`
+        
+      `);
     }
 
-    /**
-     * Called when the element is updated.
-     * Updates the aria-pressed attribute based on the selected and role properties.
-     * Adds or removes event listeners for the hold affordance based on the holdAffordance property.
-     */
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-        const isButton = this.role === 'button';
-        const canBePressed =
-            isButton &&
-            (this.selected || this.toggles) &&
-            !(
-                this.hasAttribute('aria-haspopup') &&
-                this.hasAttribute('aria-expanded')
-            );
-
-        if (changes.has('selected') || changes.has('role')) {
-            // When role !== 'button' then the Action Button is within
-            // an Action Group that manages selects which means the
-            // Action Button is a "checkbox" or "radio" and cannot
-            // accept the `aria-pressed` attribute.
-            if (canBePressed) {
-                this.setAttribute(
-                    'aria-pressed',
-                    this.selected ? 'true' : 'false'
-                );
-            } else {
-                // When !this.toggles the lack of "aria-pressed" is inconsequential.
-                this.removeAttribute('aria-pressed');
-
-                if (
-                    isButton &&
-                    this.toggles &&
-                    this.hasAttribute('aria-expanded')
-                ) {
-                    this.setAttribute(
-                        'aria-expanded',
-                        this.selected ? 'true' : 'false'
-                    );
-                }
-            }
+    return buttonContent;
+  }
+
+  /**
+   * Called when the element is updated.
+   * Updates the aria-pressed attribute based on the selected and role properties.
+   * Adds or removes event listeners for the hold affordance based on the holdAffordance property.
+   */
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
+    const isButton = this.role === "button";
+    const canBePressed =
+      isButton &&
+      (this.selected || this.toggles) &&
+      !(
+        this.hasAttribute("aria-haspopup") && this.hasAttribute("aria-expanded")
+      );
+
+    if (changes.has("selected") || changes.has("role")) {
+      // When role !== 'button' then the Action Button is within
+      // an Action Group that manages selects which means the
+      // Action Button is a "checkbox" or "radio" and cannot
+      // accept the `aria-pressed` attribute.
+      if (canBePressed) {
+        this.setAttribute("aria-pressed", this.selected ? "true" : "false");
+      } else {
+        // When !this.toggles the lack of "aria-pressed" is inconsequential.
+        this.removeAttribute("aria-pressed");
+
+        if (isButton && this.toggles && this.hasAttribute("aria-expanded")) {
+          this.setAttribute("aria-expanded", this.selected ? "true" : "false");
         }
+      }
+    }
 
-        if (changes.has('holdAffordance')) {
-            if (this.holdAffordance) {
-                this.addEventListener(
-                    'pointerdown',
-                    this.handlePointerdownHoldAffordance
-                );
-            } else {
-                this.removeEventListener(
-                    'pointerdown',
-                    this.handlePointerdownHoldAffordance
-                );
-                this.handlePointerupHoldAffordance();
-            }
-        }
+    if (changes.has("holdAffordance")) {
+      if (this.holdAffordance) {
+        this.addEventListener(
+          "pointerdown",
+          this.handlePointerdownHoldAffordance,
+        );
+      } else {
+        this.removeEventListener(
+          "pointerdown",
+          this.handlePointerdownHoldAffordance,
+        );
+        this.handlePointerupHoldAffordance();
+      }
     }
+  }
 }
 
 declare global {
-    interface GlobalEventHandlersEventMap {
-        longpress: CustomEvent;
-    }
+  interface GlobalEventHandlersEventMap {
+    longpress: CustomEvent;
+  }
 }
diff --git a/packages/action-button/src/index.ts b/packages/action-button/src/index.ts
index b847ea7309..a3af4c4b3c 100644
--- a/packages/action-button/src/index.ts
+++ b/packages/action-button/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './ActionButton.js';
+export * from "./ActionButton.js";
diff --git a/packages/action-button/stories/action-button-black-quiet.stories.ts b/packages/action-button/stories/action-button-black-quiet.stories.ts
index 50329ce092..ee1cc089e3 100644
--- a/packages/action-button/stories/action-button-black-quiet.stories.ts
+++ b/packages/action-button/stories/action-button-black-quiet.stories.ts
@@ -9,51 +9,51 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground } from '../../button/stories/index.js';
-import type { Properties } from './index.js';
-import { renderButtons } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { makeOverBackground } from "../../button/stories/index.js";
+import type { Properties } from "./index.js";
+import { renderButtons } from "./index.js";
 
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Static Black Quiet',
-    decorators: [makeOverBackground('black')],
+  component: "sp-action-button",
+  title: "Action Button/Static Black Quiet",
+  decorators: [makeOverBackground("black")],
 };
 
-const staticColor = 'black';
+const staticColor = "black";
 const quiet = true;
 
 export const XS = (args: Properties): TemplateResult => renderButtons(args);
 XS.args = {
-    size: 'xs',
-    quiet,
-    staticColor,
+  size: "xs",
+  quiet,
+  staticColor,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
-    size: 's',
-    quiet,
-    staticColor,
+  size: "s",
+  quiet,
+  staticColor,
 };
 
 export const m = (args: Properties): TemplateResult => renderButtons(args);
 m.args = {
-    size: 'm',
-    quiet,
-    staticColor,
+  size: "m",
+  quiet,
+  staticColor,
 };
 
 export const l = (args: Properties): TemplateResult => renderButtons(args);
 l.args = {
-    size: 'l',
-    quiet,
-    staticColor,
+  size: "l",
+  quiet,
+  staticColor,
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    quiet,
-    staticColor,
+  size: "xl",
+  quiet,
+  staticColor,
 };
diff --git a/packages/action-button/stories/action-button-black.stories.ts b/packages/action-button/stories/action-button-black.stories.ts
index 6f2f3becc9..d3d482e262 100644
--- a/packages/action-button/stories/action-button-black.stories.ts
+++ b/packages/action-button/stories/action-button-black.stories.ts
@@ -9,45 +9,45 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground } from '../../button/stories/index.js';
-import type { Properties } from './index.js';
-import { renderButtons } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { makeOverBackground } from "../../button/stories/index.js";
+import type { Properties } from "./index.js";
+import { renderButtons } from "./index.js";
 
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Static Black',
-    decorators: [makeOverBackground('black')],
+  component: "sp-action-button",
+  title: "Action Button/Static Black",
+  decorators: [makeOverBackground("black")],
 };
 
-const staticColor = 'black';
+const staticColor = "black";
 
 export const XS = (args: Properties): TemplateResult => renderButtons(args);
 XS.args = {
-    size: 'xs',
-    staticColor,
+  size: "xs",
+  staticColor,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
-    size: 's',
-    staticColor,
+  size: "s",
+  staticColor,
 };
 
 export const m = (args: Properties): TemplateResult => renderButtons(args);
 m.args = {
-    size: 'm',
-    staticColor,
+  size: "m",
+  staticColor,
 } as Properties;
 
 export const l = (args: Properties): TemplateResult => renderButtons(args);
 l.args = {
-    size: 'l',
-    staticColor,
+  size: "l",
+  staticColor,
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    staticColor,
+  size: "xl",
+  staticColor,
 };
diff --git a/packages/action-button/stories/action-button-emphasized-quiet.stories.ts b/packages/action-button/stories/action-button-emphasized-quiet.stories.ts
index 4d4f262e19..3d5d7ae1b9 100644
--- a/packages/action-button/stories/action-button-emphasized-quiet.stories.ts
+++ b/packages/action-button/stories/action-button-emphasized-quiet.stories.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import type { Properties } from './index.js';
-import { renderButtons } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import type { Properties } from "./index.js";
+import { renderButtons } from "./index.js";
 
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Emphasized Quiet',
+  component: "sp-action-button",
+  title: "Action Button/Emphasized Quiet",
 };
 
 const emphasized = true;
@@ -23,35 +23,35 @@ const quiet = true;
 
 export const XS = (args: Properties): TemplateResult => renderButtons(args);
 XS.args = {
-    emphasized,
-    size: 'xs',
-    quiet,
+  emphasized,
+  size: "xs",
+  quiet,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
-    emphasized,
-    size: 's',
-    quiet,
+  emphasized,
+  size: "s",
+  quiet,
 };
 
 export const m = (args: Properties): TemplateResult => renderButtons(args);
 m.args = {
-    emphasized,
-    size: 'm',
-    quiet,
+  emphasized,
+  size: "m",
+  quiet,
 };
 
 export const l = (args: Properties): TemplateResult => renderButtons(args);
 l.args = {
-    emphasized,
-    size: 'l',
-    quiet,
+  emphasized,
+  size: "l",
+  quiet,
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtons(args);
 XL.args = {
-    emphasized,
-    size: 'xl',
-    quiet,
+  emphasized,
+  size: "xl",
+  quiet,
 };
diff --git a/packages/action-button/stories/action-button-emphasized.stories.ts b/packages/action-button/stories/action-button-emphasized.stories.ts
index 06ab3cb025..951ed17d11 100644
--- a/packages/action-button/stories/action-button-emphasized.stories.ts
+++ b/packages/action-button/stories/action-button-emphasized.stories.ts
@@ -9,43 +9,43 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import type { Properties } from './index.js';
-import { renderButtons } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import type { Properties } from "./index.js";
+import { renderButtons } from "./index.js";
 
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Emphasized',
+  component: "sp-action-button",
+  title: "Action Button/Emphasized",
 };
 
 const emphasized = true;
 
 export const XS = (args: Properties): TemplateResult => renderButtons(args);
 XS.args = {
-    emphasized,
-    size: 'xs',
+  emphasized,
+  size: "xs",
 };
 
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
-    emphasized,
-    size: 's',
+  emphasized,
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtons(args);
 m.args = {
-    emphasized,
-    size: 'm',
+  emphasized,
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtons(args);
 l.args = {
-    emphasized,
-    size: 'l',
+  emphasized,
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtons(args);
 XL.args = {
-    emphasized,
-    size: 'xl',
+  emphasized,
+  size: "xl",
 };
diff --git a/packages/action-button/stories/action-button-quiet.stories.ts b/packages/action-button/stories/action-button-quiet.stories.ts
index 8ab154dfff..99b90229e5 100644
--- a/packages/action-button/stories/action-button-quiet.stories.ts
+++ b/packages/action-button/stories/action-button-quiet.stories.ts
@@ -9,43 +9,43 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import type { Properties } from './index.js';
-import { renderButtons } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import type { Properties } from "./index.js";
+import { renderButtons } from "./index.js";
 
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Standard Quiet',
+  component: "sp-action-button",
+  title: "Action Button/Standard Quiet",
 };
 
 const quiet = true;
 
 export const XS = (args: Properties): TemplateResult => renderButtons(args);
 XS.args = {
-    size: 'xs',
-    quiet,
+  size: "xs",
+  quiet,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
-    size: 's',
-    quiet,
+  size: "s",
+  quiet,
 };
 
 export const m = (args: Properties): TemplateResult => renderButtons(args);
 m.args = {
-    size: 'm',
-    quiet,
+  size: "m",
+  quiet,
 };
 
 export const l = (args: Properties): TemplateResult => renderButtons(args);
 l.args = {
-    size: 'l',
-    quiet,
+  size: "l",
+  quiet,
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    quiet,
+  size: "xl",
+  quiet,
 };
diff --git a/packages/action-button/stories/action-button-standard.stories.ts b/packages/action-button/stories/action-button-standard.stories.ts
index e22d0cd8cf..1ce09e12cc 100644
--- a/packages/action-button/stories/action-button-standard.stories.ts
+++ b/packages/action-button/stories/action-button-standard.stories.ts
@@ -9,36 +9,36 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import type { Properties } from './index.js';
-import { renderButtons } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import type { Properties } from "./index.js";
+import { renderButtons } from "./index.js";
 
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Standard',
+  component: "sp-action-button",
+  title: "Action Button/Standard",
 };
 
 export const XS = (args: Properties): TemplateResult => renderButtons(args);
 XS.args = {
-    size: 'xs',
+  size: "xs",
 };
 
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtons(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtons(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtons(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/action-button/stories/action-button-white-quiet.stories.ts b/packages/action-button/stories/action-button-white-quiet.stories.ts
index 0055a44c68..36a7d9a43f 100644
--- a/packages/action-button/stories/action-button-white-quiet.stories.ts
+++ b/packages/action-button/stories/action-button-white-quiet.stories.ts
@@ -9,51 +9,51 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground } from '../../button/stories/index.js';
-import type { Properties } from './index.js';
-import { renderButtons } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { makeOverBackground } from "../../button/stories/index.js";
+import type { Properties } from "./index.js";
+import { renderButtons } from "./index.js";
 
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Static White Quiet',
-    decorators: [makeOverBackground()],
+  component: "sp-action-button",
+  title: "Action Button/Static White Quiet",
+  decorators: [makeOverBackground()],
 };
 
-const staticColor = 'white';
+const staticColor = "white";
 const quiet = true;
 
 export const XS = (args: Properties): TemplateResult => renderButtons(args);
 XS.args = {
-    size: 'xs',
-    quiet,
-    staticColor,
+  size: "xs",
+  quiet,
+  staticColor,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
-    size: 's',
-    quiet,
-    staticColor,
+  size: "s",
+  quiet,
+  staticColor,
 };
 
 export const m = (args: Properties): TemplateResult => renderButtons(args);
 m.args = {
-    size: 'm',
-    quiet,
-    staticColor,
+  size: "m",
+  quiet,
+  staticColor,
 };
 
 export const l = (args: Properties): TemplateResult => renderButtons(args);
 l.args = {
-    size: 'l',
-    quiet,
-    staticColor,
+  size: "l",
+  quiet,
+  staticColor,
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    quiet,
-    staticColor,
+  size: "xl",
+  quiet,
+  staticColor,
 };
diff --git a/packages/action-button/stories/action-button-white.stories.ts b/packages/action-button/stories/action-button-white.stories.ts
index 31e9d16f5d..e8b1889765 100644
--- a/packages/action-button/stories/action-button-white.stories.ts
+++ b/packages/action-button/stories/action-button-white.stories.ts
@@ -9,45 +9,45 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground } from '../../button/stories/index.js';
-import type { Properties } from './index.js';
-import { renderButtons } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { makeOverBackground } from "../../button/stories/index.js";
+import type { Properties } from "./index.js";
+import { renderButtons } from "./index.js";
 
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Static White',
-    decorators: [makeOverBackground()],
+  component: "sp-action-button",
+  title: "Action Button/Static White",
+  decorators: [makeOverBackground()],
 };
 
-const staticColor = 'white';
+const staticColor = "white";
 
 export const XS = (args: Properties): TemplateResult => renderButtons(args);
 XS.args = {
-    size: 'xs',
-    staticColor,
+  size: "xs",
+  staticColor,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtons(args);
 s.args = {
-    size: 's',
-    staticColor,
+  size: "s",
+  staticColor,
 };
 
 export const m = (args: Properties): TemplateResult => renderButtons(args);
 m.args = {
-    size: 'm',
-    staticColor,
+  size: "m",
+  staticColor,
 };
 
 export const l = (args: Properties): TemplateResult => renderButtons(args);
 l.args = {
-    size: 'l',
-    staticColor,
+  size: "l",
+  staticColor,
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    staticColor,
+  size: "xl",
+  staticColor,
 };
diff --git a/packages/action-button/stories/action-button.stories.ts b/packages/action-button/stories/action-button.stories.ts
index ccaba4ff96..1d163d2a83 100644
--- a/packages/action-button/stories/action-button.stories.ts
+++ b/packages/action-button/stories/action-button.stories.ts
@@ -9,48 +9,43 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import type { Properties } from './index.js';
-import { renderButton } from './index.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import type { Properties } from "./index.js";
+import { renderButton } from "./index.js";
 
-import '@spectrum-web-components/action-button/sp-action-button.js';
+import "@spectrum-web-components/action-button/sp-action-button.js";
 
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button',
+  component: "sp-action-button",
+  title: "Action Button",
 };
 
 function renderButtonsSelected(args: Properties): TemplateResult {
-    const disabled = Object.assign({}, args, { disabled: true });
-    const selected = Object.assign({}, args, { selected: true });
+  const disabled = Object.assign({}, args, { disabled: true });
+  const selected = Object.assign({}, args, { selected: true });
 
-    return html`
-        
-            ${renderButton(args)} ${renderButton(selected)}
-            ${renderButton(disabled)}
-        
-    `;
+  return html`
+    
+      ${renderButton(args)} ${renderButton(selected)} ${renderButton(disabled)}
+    
+  `;
 }
 
 export const toggles = (args: Properties): TemplateResult =>
-    renderButtonsSelected(args);
+  renderButtonsSelected(args);
 toggles.args = {
-    toggles: true,
-    icon: html`
-        
-    `,
+  toggles: true,
+  icon: html`  `,
 };
 
 export const href = (args: Properties): TemplateResult =>
-    renderButtonsSelected(args);
+  renderButtonsSelected(args);
 href.args = {
-    href: 'https://github.com/adobe/spectrum-web-components',
-    icon: html`
-        
-    `,
+  href: "https://github.com/adobe/spectrum-web-components",
+  icon: html`  `,
 };
diff --git a/packages/action-button/stories/index.ts b/packages/action-button/stories/index.ts
index 7dbd1bef4e..adf55abe9e 100644
--- a/packages/action-button/stories/index.ts
+++ b/packages/action-button/stories/index.ts
@@ -10,109 +10,107 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
 
-import '@spectrum-web-components/action-button/sp-action-button.js';
+import "@spectrum-web-components/action-button/sp-action-button.js";
 
 export interface Properties {
-    active?: boolean;
-    quiet?: boolean;
-    disabled?: boolean;
-    selected?: boolean;
-    toggles?: boolean;
-    emphasized?: boolean;
-    size?: 's' | 'm' | 'l' | 'xl';
-    staticColor?: 'white' | 'black';
-    holdAffordance?: boolean;
-    icon?: TemplateResult;
-    label?: string;
-    [prop: string]: unknown;
-    href: undefined;
+  active?: boolean;
+  quiet?: boolean;
+  disabled?: boolean;
+  selected?: boolean;
+  toggles?: boolean;
+  emphasized?: boolean;
+  size?: "s" | "m" | "l" | "xl";
+  staticColor?: "white" | "black";
+  holdAffordance?: boolean;
+  icon?: TemplateResult;
+  label?: string;
+  [prop: string]: unknown;
+  href: undefined;
 }
 
 export function renderButton(properties: Properties): TemplateResult {
-    return html`
-        
-            ${properties.icon}${properties.label}
-        
-    `;
+  return html`
+    
+      ${properties.icon}${properties.label}
+    
+  `;
 }
 
 function renderGroup(properties: Properties): TemplateResult {
-    const label = 'Edit';
-    const holdAffordance = true;
-    const icon = html`
-        
-    `;
+  const label = "Edit";
+  const holdAffordance = true;
+  const icon = html`  `;
 
-    return html`
-        
-            ${renderButton({
-                ...properties,
-                label,
-            })}
-            ${renderButton({
-                ...properties,
-                label,
-                icon,
-            })}
-            ${renderButton({
-                ...properties,
-                icon,
-            })}
-            ${renderButton({
-                ...properties,
-                icon,
-                holdAffordance,
-            })}
-        
-    `;
+  return html`
+    
+      ${renderButton({
+        ...properties,
+        label,
+      })}
+      ${renderButton({
+        ...properties,
+        label,
+        icon,
+      })}
+      ${renderButton({
+        ...properties,
+        icon,
+      })}
+      ${renderButton({
+        ...properties,
+        icon,
+        holdAffordance,
+      })}
+    
+  `;
 }
 
 export function renderButtons(properties: Properties): TemplateResult {
-    const selected = true;
-    const disabled = true;
+  const selected = true;
+  const disabled = true;
 
-    return html`
-        

-            ${renderGroup({
-                ...properties,
-            })}
-            ${renderGroup({
-                ...properties,
-                selected,
-            })}
-            ${renderGroup({
-                ...properties,
-                disabled,
-            })}
-            ${renderGroup({
-                ...properties,
-                disabled,
-                selected,
-            })}
-        

-    `;
+  return html`
+    

+      ${renderGroup({
+        ...properties,
+      })}
+      ${renderGroup({
+        ...properties,
+        selected,
+      })}
+      ${renderGroup({
+        ...properties,
+        disabled,
+      })}
+      ${renderGroup({
+        ...properties,
+        disabled,
+        selected,
+      })}
+    

+  `;
 }
diff --git a/packages/action-button/test/action-button-memory.test.ts b/packages/action-button/test/action-button-memory.test.ts
index b93a27057b..56ee8de5b5 100644
--- a/packages/action-button/test/action-button-memory.test.ts
+++ b/packages/action-button/test/action-button-memory.test.ts
@@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { m as BlackActionButton } from '../stories/action-button-black.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { m as BlackActionButton } from "../stories/action-button-black.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(BlackActionButton(BlackActionButton.args));
diff --git a/packages/action-button/test/action-button.test.ts b/packages/action-button/test/action-button.test.ts
index 01569792dd..7624c769c3 100644
--- a/packages/action-button/test/action-button.test.ts
+++ b/packages/action-button/test/action-button.test.ts
@@ -10,324 +10,309 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/action-button/sp-action-button.js';
+import "@spectrum-web-components/action-button/sp-action-button.js";
 import {
-    ActionButton,
-    LONGPRESS_DURATION,
-} from '@spectrum-web-components/action-button';
+  ActionButton,
+  LONGPRESS_DURATION,
+} from "@spectrum-web-components/action-button";
 import {
-    aTimeout,
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    waitUntil,
-} from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { spy } from 'sinon';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-import { m as BlackActionButton } from '../stories/action-button-black.stories.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
-
-describe('ActionButton', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(
-                BlackActionButton(BlackActionButton.args)
-            )
-    );
-    it('loads default', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        expect(el.textContent).to.include('Button');
-        await expect(el).to.be.accessible();
+  aTimeout,
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  waitUntil,
+} from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { spy } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { m as BlackActionButton } from "../stories/action-button-black.stories.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+
+describe("ActionButton", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(BlackActionButton(BlackActionButton.args)),
+  );
+  it("loads default", async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.textContent).to.include("Button");
+    await expect(el).to.be.accessible();
+  });
+  it('gardens "value" as a property', async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    await elementUpdated(el);
+    expect(el.hasAttribute("value")).to.be.false;
+    el.value = "Value";
+    await elementUpdated(el);
+    expect(el.hasAttribute("value")).to.be.true;
+    el.value = "";
+    await elementUpdated(el);
+    expect(el.hasAttribute("value")).to.be.false;
+  });
+  it("loads [hold-affordance]", async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.textContent).to.include("Button");
+    await expect(el).to.be.accessible();
+  });
+  it("manages a `tabindex`", async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    expect(el.tabIndex).to.equal(0);
+    expect(el.disabled).to.be.false;
+
+    el.setAttribute("tabindex", "-1");
+    await elementUpdated(el);
+
+    expect(el.tabIndex).to.equal(-1);
+    expect(el.disabled).to.be.false;
+
+    el.disabled = true;
+    await elementUpdated(el);
+
+    expect(el.tabIndex).to.equal(-1);
+    expect(el.disabled).to.be.true;
+
+    el.disabled = false;
+    await elementUpdated(el);
+
+    expect(el.tabIndex).to.equal(-1);
+    expect(el.disabled).to.be.false;
+  });
+  it("manages a `size` attribute", async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    await elementUpdated(el);
+    expect(el.size).to.equal("xl");
+    expect(el.getAttribute("size")).to.equal("xl");
+    el.removeAttribute("size");
+    await elementUpdated(el);
+    expect(el.size).to.equal("m");
+    expect(el.hasAttribute("size")).to.be.false;
+  });
+  it("does not apply a default `size` attribute", async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    await elementUpdated(el);
+    expect(el.size).to.equal("m");
+    expect(el.hasAttribute("size")).to.be.false;
+  });
+  it("dispatches `longpress` events when [hold-affordance]", async () => {
+    const longpressSpy = spy();
+    const el = await fixture(html`
+       longpressSpy()}>
+        Button
+      
+    `);
+
+    await elementUpdated(el);
+
+    el.focus();
+    await sendKeys({
+      press: "Space",
     });
-    it('gardens "value" as a property', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        await elementUpdated(el);
-        expect(el.hasAttribute('value')).to.be.false;
-        el.value = 'Value';
-        await elementUpdated(el);
-        expect(el.hasAttribute('value')).to.be.true;
-        el.value = '';
-        await elementUpdated(el);
-        expect(el.hasAttribute('value')).to.be.false;
-    });
-    it('loads [hold-affordance]', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        expect(el.textContent).to.include('Button');
-        await expect(el).to.be.accessible();
-    });
-    it('manages a `tabindex`', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        expect(el.tabIndex).to.equal(0);
-        expect(el.disabled).to.be.false;
-
-        el.setAttribute('tabindex', '-1');
-        await elementUpdated(el);
-
-        expect(el.tabIndex).to.equal(-1);
-        expect(el.disabled).to.be.false;
-
-        el.disabled = true;
-        await elementUpdated(el);
-
-        expect(el.tabIndex).to.equal(-1);
-        expect(el.disabled).to.be.true;
-
-        el.disabled = false;
-        await elementUpdated(el);
-
-        expect(el.tabIndex).to.equal(-1);
-        expect(el.disabled).to.be.false;
-    });
-    it('manages a `size` attribute', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        await elementUpdated(el);
-        expect(el.size).to.equal('xl');
-        expect(el.getAttribute('size')).to.equal('xl');
-        el.removeAttribute('size');
-        await elementUpdated(el);
-        expect(el.size).to.equal('m');
-        expect(el.hasAttribute('size')).to.be.false;
-    });
-    it('does not apply a default `size` attribute', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        await elementUpdated(el);
-        expect(el.size).to.equal('m');
-        expect(el.hasAttribute('size')).to.be.false;
-    });
-    it('dispatches `longpress` events when [hold-affordance]', async () => {
-        const longpressSpy = spy();
-        const el = await fixture(html`
-             longpressSpy()}
-            >
-                Button
-            
-        `);
-
-        await elementUpdated(el);
-
-        el.focus();
-        await sendKeys({
-            press: 'Space',
-        });
-
-        expect(longpressSpy.callCount).to.equal(1);
-        await sendKeys({
-            press: 'Alt+ArrowDown',
-        });
-
-        expect(longpressSpy.callCount).to.equal(2);
-        el.dispatchEvent(new PointerEvent('pointerdown', { button: 0 }));
-        el.dispatchEvent(new PointerEvent('pointerup'));
-        el.dispatchEvent(new PointerEvent('pointerdown', { button: 0 }));
-        await waitUntil(() => longpressSpy.callCount === 3);
-    });
-    it('does not dispatch `longpress` events when "right click"ed', async () => {
-        const longpressSpy = spy();
-        const el = await fixture(html`
-             longpressSpy()}
-            >
-                Button
-            
-        `);
-
-        await elementUpdated(el);
-        expect(longpressSpy.callCount).to.equal(0);
-
-        el.focus();
-        el.dispatchEvent(new PointerEvent('pointerdown', { button: 1 }));
-        await aTimeout(2 * LONGPRESS_DURATION);
-        expect(longpressSpy.callCount).to.equal(0);
-    });
-    it(':not([toggles])', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        await elementUpdated(el);
-        const button = el.focusElement;
 
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.false;
-        expect(button.hasAttribute('aria-pressed')).to.be.false;
-
-        el.click();
-        await elementUpdated(el);
-
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.false;
-        expect(button.hasAttribute('aria-pressed')).to.be.false;
+    expect(longpressSpy.callCount).to.equal(1);
+    await sendKeys({
+      press: "Alt+ArrowDown",
     });
-    it('responds to [selected]', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        await elementUpdated(el);
-        const button = el.focusElement;
 
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.false;
-        expect(button.hasAttribute('aria-pressed')).to.be.false;
-
-        el.selected = true;
-        await elementUpdated(el);
-
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.true;
-        expect(button.getAttribute('aria-pressed')).to.equal('true');
-
-        el.selected = false;
-        await elementUpdated(el);
-
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.false;
-        expect(button.hasAttribute('aria-pressed')).to.be.false;
-    });
-    it('toggles', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        await elementUpdated(el);
-        const button = el.focusElement;
-
-        expect(el.toggles).to.be.true;
-        expect(el.selected).to.be.false;
-        expect(button.getAttribute('aria-pressed')).to.equal('false');
-
-        el.focus();
-        await sendKeys({
-            press: 'Space',
-        });
-        await elementUpdated(el);
-
-        expect(el.toggles).to.be.true;
-        expect(el.selected).to.be.true;
-        expect(button.getAttribute('aria-pressed')).to.equal('true');
-
-        el.addEventListener('change', (event: Event) => event.preventDefault());
-        el.click();
-        await elementUpdated(el);
-
-        expect(el.toggles).to.be.true;
-        expect(el.selected).to.be.true;
-        expect(button.getAttribute('aria-pressed')).to.equal('true');
-    });
-    it('toggles [aria-haspopup][aria-expanded]', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        const button = el.focusElement;
-
-        expect(el.toggles).to.be.true;
-        expect(el.selected).to.be.false;
-        expect(button).not.to.have.attribute('aria-pressed');
-        expect(button).to.have.attribute('aria-haspopup', 'true');
-        expect(button).to.have.attribute('aria-expanded', 'false');
-
-        el.focus();
-        await sendKeys({
-            press: 'Space',
-        });
-        await elementUpdated(el);
-
-        expect(el.toggles).to.be.true;
-        expect(el.selected).to.be.true;
-        expect(button).not.to.have.attribute('aria-pressed');
-        expect(button).to.have.attribute('aria-haspopup', 'true');
-        expect(button).to.have.attribute('aria-expanded', 'true');
-
-        el.addEventListener('change', (event: Event) => event.preventDefault());
-        el.click();
-        await elementUpdated(el);
-
-        expect(el.toggles).to.be.true;
-        expect(el.selected).to.be.true;
-        expect(button).not.to.have.attribute('aria-pressed');
-        expect(button).to.have.attribute('aria-haspopup', 'true');
-        expect(button).to.have.attribute('aria-expanded', 'true');
+    expect(longpressSpy.callCount).to.equal(2);
+    el.dispatchEvent(new PointerEvent("pointerdown", { button: 0 }));
+    el.dispatchEvent(new PointerEvent("pointerup"));
+    el.dispatchEvent(new PointerEvent("pointerdown", { button: 0 }));
+    await waitUntil(() => longpressSpy.callCount === 3);
+  });
+  it('does not dispatch `longpress` events when "right click"ed', async () => {
+    const longpressSpy = spy();
+    const el = await fixture(html`
+       longpressSpy()}>
+        Button
+      
+    `);
+
+    await elementUpdated(el);
+    expect(longpressSpy.callCount).to.equal(0);
+
+    el.focus();
+    el.dispatchEvent(new PointerEvent("pointerdown", { button: 1 }));
+    await aTimeout(2 * LONGPRESS_DURATION);
+    expect(longpressSpy.callCount).to.equal(0);
+  });
+  it(":not([toggles])", async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    await elementUpdated(el);
+    const button = el.focusElement;
+
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+
+    el.click();
+    await elementUpdated(el);
+
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+  });
+  it("responds to [selected]", async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    await elementUpdated(el);
+    const button = el.focusElement;
+
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+
+    el.selected = true;
+    await elementUpdated(el);
+
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute("aria-pressed")).to.equal("true");
+
+    el.selected = false;
+    await elementUpdated(el);
+
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+  });
+  it("toggles", async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    await elementUpdated(el);
+    const button = el.focusElement;
+
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.false;
+    expect(button.getAttribute("aria-pressed")).to.equal("false");
+
+    el.focus();
+    await sendKeys({
+      press: "Space",
     });
-    it('manages a `static-color` attribute', async () => {
-        const el = await fixture(html`
-            Button
-        `);
-
-        await elementUpdated(el);
-        expect(el.staticColor).to.equal('black');
-        expect(el.getAttribute('static-color')).to.equal('black');
-        el.removeAttribute('static-color');
-        await elementUpdated(el);
-        expect(el.staticColor).to.be.null;
-        expect(el.hasAttribute('static-color')).to.be.false;
+    await elementUpdated(el);
+
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute("aria-pressed")).to.equal("true");
+
+    el.addEventListener("change", (event: Event) => event.preventDefault());
+    el.click();
+    await elementUpdated(el);
+
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute("aria-pressed")).to.equal("true");
+  });
+  it("toggles [aria-haspopup][aria-expanded]", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    const button = el.focusElement;
+
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.false;
+    expect(button).not.to.have.attribute("aria-pressed");
+    expect(button).to.have.attribute("aria-haspopup", "true");
+    expect(button).to.have.attribute("aria-expanded", "false");
+
+    el.focus();
+    await sendKeys({
+      press: "Space",
     });
-    it('allows link click', async () => {
-        let clicked = false;
-        const el = await fixture(html`
-            
-                With Target
-            
-        `);
-
-        await elementUpdated(el);
-
-        // prevents browser from activating link but records the proxy click
-        el.shadowRoot
-            ?.querySelector('.anchor')
-            ?.addEventListener('click', (event: Event) => {
-                event.preventDefault();
-                clicked = true;
-            });
-        const rect = el.getBoundingClientRect();
-
-        // tests mouse click events, and by extension VoiceOver CRTL+Option+Space click
-        await sendMouse({
-            steps: [
-                {
-                    position: [
-                        rect.left + rect.width / 2,
-                        rect.top + rect.height / 2,
-                    ],
-                    type: 'click',
-                },
-            ],
-        });
-        await elementUpdated(el);
-        expect(clicked).to.be.true;
+    await elementUpdated(el);
+
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.true;
+    expect(button).not.to.have.attribute("aria-pressed");
+    expect(button).to.have.attribute("aria-haspopup", "true");
+    expect(button).to.have.attribute("aria-expanded", "true");
+
+    el.addEventListener("change", (event: Event) => event.preventDefault());
+    el.click();
+    await elementUpdated(el);
+
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.true;
+    expect(button).not.to.have.attribute("aria-pressed");
+    expect(button).to.have.attribute("aria-haspopup", "true");
+    expect(button).to.have.attribute("aria-expanded", "true");
+  });
+  it("manages a `static-color` attribute", async () => {
+    const el = await fixture(html`
+      Button
+    `);
+
+    await elementUpdated(el);
+    expect(el.staticColor).to.equal("black");
+    expect(el.getAttribute("static-color")).to.equal("black");
+    el.removeAttribute("static-color");
+    await elementUpdated(el);
+    expect(el.staticColor).to.be.null;
+    expect(el.hasAttribute("static-color")).to.be.false;
+  });
+  it("allows link click", async () => {
+    let clicked = false;
+    const el = await fixture(html`
+      
+        With Target
+      
+    `);
+
+    await elementUpdated(el);
+
+    // prevents browser from activating link but records the proxy click
+    el.shadowRoot
+      ?.querySelector(".anchor")
+      ?.addEventListener("click", (event: Event) => {
+        event.preventDefault();
+        clicked = true;
+      });
+    const rect = el.getBoundingClientRect();
+
+    // tests mouse click events, and by extension VoiceOver CRTL+Option+Space click
+    await sendMouse({
+      steps: [
+        {
+          position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+          type: "click",
+        },
+      ],
     });
+    await elementUpdated(el);
+    expect(clicked).to.be.true;
+  });
 });
diff --git a/packages/action-button/test/benchmark/basic-test.ts b/packages/action-button/test/benchmark/basic-test.ts
index 5052b5893b..338ecd33bb 100644
--- a/packages/action-button/test/benchmark/basic-test.ts
+++ b/packages/action-button/test/benchmark/basic-test.ts
@@ -10,21 +10,21 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    Edit
-    
-        
-        Edit
-    
-    
-        
-    
-    
-        
-    
+  Edit
+  
+    
+    Edit
+  
+  
+    
+  
+  
+    
+  
 `);
diff --git a/packages/action-group/sp-action-group.ts b/packages/action-group/sp-action-group.ts
index 3ed61703a8..e8f7721e79 100644
--- a/packages/action-group/sp-action-group.ts
+++ b/packages/action-group/sp-action-group.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ActionGroup } from './src/ActionGroup.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { ActionGroup } from "./src/ActionGroup.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-action-group', ActionGroup);
+defineElement("sp-action-group", ActionGroup);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-action-group': ActionGroup;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-action-group": ActionGroup;
+  }
 }
diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts
index 0253222010..ac6975f88b 100644
--- a/packages/action-group/src/ActionGroup.ts
+++ b/packages/action-group/src/ActionGroup.ts
@@ -11,16 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
-	CSSResultArray,
-	html,
-	PropertyValues,
-	SizedMixin,
-	SpectrumElement,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	property,
-	query,
+  property,
+  query,
 } from "@spectrum-web-components/base/src/decorators.js";
 import type { ActionButton } from "@spectrum-web-components/action-button";
 import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
@@ -39,533 +39,547 @@ const EMPTY_SELECTION: string[] = [];
  *
  */
 export class ActionGroup extends SizedMixin(SpectrumElement, {
-	validSizes: ["xs", "s", "m", "l", "xl"],
-	noDefaultSize: true,
+  validSizes: ["xs", "s", "m", "l", "xl"],
+  noDefaultSize: true,
 }) {
-	public static override get styles(): CSSResultArray {
-		return [styles];
-	}
-	/**
-	 * Sets the list of action buttons in the group.
-	 * Clears the element cache in the roving tabindex controller.
-	 */
-	public set buttons(buttons: ActionButton[]) {
-		/* c8 ignore next 1 */
-		if (buttons === this.buttons) return;
-
-		this._buttons = buttons;
-		this.rovingTabindexController.clearElementCache();
-	}
-
-	public get buttons(): ActionButton[] {
-		return this._buttons;
-	}
-
-	/**
-	 * The internal list of action buttons
-	 */
-	public _buttons: ActionButton[] = [];
-
-	/**
-	 * The CSS selector used to identify action buttons within the group.
-	 */
-	protected _buttonSelector = "sp-action-button, sp-action-menu";
-
-	constructor() {
-		super();
-
-		/**
-		 * Initializes the MutationController to observe changes in the child elements.
-		 * Configures the controller to manage buttons when changes are detected.
-		 */
-		new MutationController(this, {
-			config: {
-				childList: true,
-				subtree: true,
-			},
-			callback: () => {
-				this.manageButtons();
-			},
-			skipInitial: true,
-		});
-	}
-
-	/**
-	 * Initializes the RovingTabindexController to manage focus within the action group.
-	 * Configures the controller to determine the initial focus index and manage focusable elements.
-	 */
-	rovingTabindexController = new RovingTabindexController(this, {
-		/**
-		 * Determines the initial focus index within the action group.
-		 * Finds the first selected and enabled button, or the first enabled button if none are selected.
-		 */
-		focusInIndex: (elements: ActionButton[]) => {
-			let firstEnabledIndex = -1;
-			const firstSelectedIndex = elements.findIndex((el, index) => {
-				if (!elements[firstEnabledIndex] && !el.disabled) {
-					firstEnabledIndex = index;
-				}
-
-				return el.selected && !el.disabled;
-			});
-
-			return elements[firstSelectedIndex]
-				? firstSelectedIndex
-				: firstEnabledIndex;
-		},
-
-		/**
-		 * Retrieves the list of action buttons within the group.
-		 */
-		elements: () => this.buttons,
-		isFocusableElement: (el: ActionButton) => !el.disabled,
-	});
-
-	/**
-	 * When true, the action group is styled in a compact form.
-	 */
-	@property({ type: Boolean, reflect: true })
-	public compact = false;
-
-	/**
-	 * When true, the action group is styled with emphasis.
-	 */
-	@property({ type: Boolean, reflect: true })
-	public emphasized = false;
-
-	/**
-	 * When true, the action group items are justified to take up the full width.
-	 */
-	@property({ type: Boolean, reflect: true })
-	public justified = false;
-
-	/**
-	 * The label for the action group.
-	 */
-	@property({ type: String })
-	public label = "";
-
-	/**
-	 * When true, the action group is styled with a quieter appearance.
-	 */
-	@property({ type: Boolean, reflect: true })
-	public quiet = false;
-
-	/**
-	 * Defines the selection mode for the action group.
-	 * Can be 'single' for single selection or 'multiple' for multiple selections.
-	 */
-	@property({ type: String })
-	public selects: undefined | "single" | "multiple";
-
-	/**
-	 * The static color variant to use for the action group.
-	 * Can be 'white' or 'black'.
-	 */
-	@property({ reflect: true, attribute: "static-color" })
-	public staticColor?: "white" | "black";
-
-	/**
-	 * When true, the action group is displayed vertically.
-	 */
-	@property({ type: Boolean, reflect: true })
-	public vertical = false;
-
-	/**
-	 * The internal list of selected items.
-	 */
-	private _selected: string[] = EMPTY_SELECTION;
-
-	/**
-	 * The list of selected items.
-	 */
-	set selected(selected: string[]) {
-		this.requestUpdate("selected", this._selected);
-		this._selected = selected;
-		this.updateComplete.then(() => {
-			this.applySelects();
-			this.manageChildren();
-		});
-	}
-
-	@property({ type: Array })
-	get selected(): string[] {
-		return this._selected;
-	}
-
-	@query("slot")
-	slotElement!: HTMLSlotElement;
-
-	/**
-	 * Dispatches a 'change' event to notify listeners of the selection change.
-	 * If the event is canceled, the selection state is reverted.
-	 */
-	private dispatchChange(old: string[]): void {
-		const applyDefault = this.dispatchEvent(
-			new Event("change", {
-				bubbles: true,
-				composed: true,
-				cancelable: true,
-			}),
-		);
-
-		if (!applyDefault) {
-			this.setSelected(old);
-			this.buttons.map((button) => {
-				button.selected = this.selected.includes(button.value);
-			});
-		}
-	}
-
-	/**
-	 * Sets the selected items and optionally announces the change.
-	 * If the selection is the same as the current selection, no action is taken.
-	 * If announce is true, a 'change' event is dispatched.
-	 */
-	private setSelected(selected: string[], announce?: boolean): void {
-		/* c8 ignore next 1 */
-		if (selected === this.selected) return;
-
-		const old = this.selected;
-
-		this.requestUpdate("selected", old);
-		this._selected = selected;
-
-		if (!announce) return;
-
-		this.dispatchChange(old);
-	}
-
-	/**
-	 * Sets focus on the action group using the roving tabindex controller.
-	 */
-	public override focus(options?: FocusOptions): void {
-		this.rovingTabindexController.focus(options);
-	}
-
-	/**
-	 * Deselects all selected buttons in the action group.
-	 * Updates the selected state and tabindex of each button.
-	 */
-	private deselectSelectedButtons(): void {
-		this.buttons.forEach((button) => {
-			if (!button.selected) return;
-
-			button.selected = false;
-			button.tabIndex = -1;
-			button.setAttribute(
-				this.selects ? "aria-checked" : /* c8 ignore */ "aria-pressed",
-				"false",
-			);
-		});
-	}
-
-	/**
-	 * Handles the change event for an action button.
-	 * Stops propagation and prevents the default action.
-	 */
-	private handleActionButtonChange(event: Event): void {
-		event.stopPropagation();
-		event.preventDefault();
-	}
-
-	/**
-	 * Handles the click event on an action button.
-	 * Updates the selection state based on the selection mode (single or multiple).
-	 */
-	private handleClick(event: Event): void {
-		const target = event.target as ActionButton;
-
-		if (typeof target.value === "undefined") {
-			return;
-		}
-
-		switch (this.selects) {
-			case "single": {
-				// Deselect all buttons and select the clicked button
-				this.deselectSelectedButtons();
-				target.selected = true;
-				target.tabIndex = 0;
-				target.setAttribute("aria-checked", "true");
-				this.setSelected([target.value], true);
-				break;
-			}
-			case "multiple": {
-				// Toggle the selected state of the clicked button
-				const selected = [...this.selected];
-
-				target.selected = !target.selected;
-				target.setAttribute("aria-checked", target.selected ? "true" : "false");
-
-				if (target.selected) {
-					selected.push(target.value);
-				} else {
-					selected.splice(this.selected.indexOf(target.value), 1);
-				}
-
-				this.setSelected(selected, true);
-
-				// Update tabindex for all buttons
-				this.buttons.forEach((button) => {
-					button.tabIndex = -1;
-				});
-
-				target.tabIndex = 0;
-
-				break;
-			}
-			default:
-				break;
-		}
-	}
-
-	/**
-	 * Applies the selection state to the action buttons.
-	 * Waits for the manageSelects method to complete.
-	 */
-	private async applySelects(): Promise {
-		await this.manageSelects(true);
-	}
-
-	/**
-	 * Manages the selection state of the action buttons.
-	 * Updates the role and aria attributes based on the selection mode.
-	 */
-	private async manageSelects(applied?: boolean): Promise {
-		if (!this.buttons.length) {
-			return;
-		}
-
-		const options = this.buttons;
-
-		switch (this.selects) {
-			case "single": {
-				// Single selection mode, behaves as a radio group
-				this.setAttribute("role", "radiogroup");
-				const selections: ActionButton[] = [];
-				const updates = options.map(async (option) => {
-					await option.updateComplete;
-					option.setAttribute("role", "radio");
-					option.setAttribute(
-						"aria-checked",
-						option.selected ? "true" : "false",
-					);
-
-					if (option.selected) {
-						selections.push(option);
-					}
-				});
-
-				if (applied) break;
-
-				await Promise.all(updates);
-
-				const selected = selections.map((button) => {
-					return button.value;
-				});
-
-				this.setSelected(selected || EMPTY_SELECTION);
-				break;
-			}
-			case "multiple": {
-				// Multiple selection mode, remove role="radiogroup" if present
-				if (this.getAttribute("role") === "radiogroup") {
-					this.removeAttribute("role");
-				}
-
-				const selection: string[] = [];
-				const selections: ActionButton[] = [];
-				const updates = options.map(async (option) => {
-					await option.updateComplete;
-					option.setAttribute("role", "checkbox");
-					option.setAttribute(
-						"aria-checked",
-						option.selected ? "true" : "false",
-					);
-
-					if (option.selected) {
-						selection.push(option.value);
-						selections.push(option);
-					}
-				});
-
-				if (applied) break;
-
-				await Promise.all(updates);
-				const selected = selection.length ? selection : EMPTY_SELECTION;
-
-				this.setSelected(selected);
-				break;
-			}
-			default:
-				// Default behavior when user defines .selected
-				if (this.selected.length) {
-					const selections: ActionButton[] = [];
-					const updates = options.map(async (option) => {
-						await option.updateComplete;
-						option.setAttribute("role", "button");
-
-						if (option.selected) {
-							option.setAttribute("aria-pressed", "true");
-							selections.push(option);
-						} else {
-							option.removeAttribute("aria-pressed");
-						}
-					});
-
-					if (applied) break;
-
-					await Promise.all(updates);
-
-					this.setSelected(
-						selections.map((button) => {
-							return button.value;
-						}),
-					);
-				} else {
-					// Set role to 'button' for all options
-					this.buttons.forEach((option) => {
-						option.setAttribute("role", "button");
-					});
-					break;
-				}
-		}
-
-		// When no other role is defined, use role="toolbar", which is appropriate with roving tabindex.
-		if (!this.hasAttribute("role")) {
-			this.setAttribute("role", "toolbar");
-		}
-	}
-
-	protected override render(): TemplateResult {
-		return html`
-			
-		`;
-	}
-
-	protected override firstUpdated(changes: PropertyValues): void {
-		super.firstUpdated(changes);
-		this.addEventListener("click", this.handleClick);
-	}
-
-	protected override updated(changes: PropertyValues): void {
-		super.updated(changes);
-
-		if (changes.has("selects")) {
-			this.manageSelects();
-			this.manageChildren();
-
-			if (this.selects) {
-				this.shadowRoot.addEventListener(
-					"change",
-					this.handleActionButtonChange,
-				);
-			} else {
-				this.shadowRoot.removeEventListener(
-					"change",
-					this.handleActionButtonChange,
-				);
-			}
-		}
-
-		if (
-			changes.has("quiet") ||
-			changes.has("emphasized") ||
-			changes.has("size") ||
-			changes.has("staticColor")
-		) {
-			this.manageChildren(changes);
-		}
-
-		// Update `aria-label` when `label` available or not first `updated`
-		if (
-			changes.has("label") &&
-			(this.label || typeof changes.get("label") !== "undefined")
-		) {
-			if (this.label.length) {
-				this.setAttribute("aria-label", this.label);
-			} else {
-				this.removeAttribute("aria-label");
-			}
-		}
-	}
-
-	/**
-	 * Updates the properties of the action buttons based on the current state of the action group.
-	 * Applies changes to quiet, emphasized, staticColor, selected, and size properties.
-	 */
-	private manageChildren(changes?: PropertyValues): void {
-		this.buttons.forEach((button) => {
-			if (this.quiet || changes?.get("quiet")) {
-				button.quiet = this.quiet;
-			}
-
-			if (this.emphasized || changes?.get("emphasized")) {
-				button.emphasized = this.emphasized;
-			}
-
-			if (this.staticColor || changes?.get("staticColor")) {
-				button.staticColor = this.staticColor;
-			}
-
-			if (this.selects || !this.hasManaged) {
-				button.selected = this.selected.includes(button.value);
-			}
-
-			if (
-				this.size &&
-				(this.size !== "m" || typeof changes?.get("size") !== "undefined")
-			) {
-				button.size = this.size;
-			}
-		});
-	}
-
-	// Indicates whether the action buttons have been managed.
-	private hasManaged = false;
-
-	/**
-	 * Manages the action buttons within the group.
-	 * Updates the internal list of buttons and applies necessary properties.
-	 */
-	private manageButtons = (): void => {
-		if (!this.slotElement) {
-			return;
-		}
-
-		const assignedElements = this.slotElement.assignedElements({
-			flatten: true,
-		});
-		const buttons = assignedElements.reduce((acc: unknown[], el) => {
-			if (el.matches(this._buttonSelector)) {
-				acc.push(el);
-			} else {
-				const buttonDescendents = Array.from(
-					el.querySelectorAll(`:scope > ${this._buttonSelector}`),
-				);
-
-				acc.push(...buttonDescendents);
-			}
-
-			return acc;
-		}, []);
-
-		this.buttons = buttons as ActionButton[];
-
-		if (this.selects || !this.hasManaged) {
-			// Merge selected buttons similar to  element behavior
+      const currentlySelectedButtons: string[] = [];
+
+      this.buttons.forEach((button: ActionButton) => {
+        if (button.selected) {
+          currentlySelectedButtons.push(button.value);
+        }
+      });
+      this.setSelected(this.selected.concat(currentlySelectedButtons));
+    }
+
+    this.manageChildren();
+    this.manageSelects();
+    this.hasManaged = true;
+  };
 }
diff --git a/packages/action-group/src/index.ts b/packages/action-group/src/index.ts
index 1e5acc0cd7..937939f58e 100644
--- a/packages/action-group/src/index.ts
+++ b/packages/action-group/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './ActionGroup.js';
+export * from "./ActionGroup.js";
diff --git a/packages/action-group/stories/action-group-sizes.stories.ts b/packages/action-group/stories/action-group-sizes.stories.ts
index 8005cd7851..d432b8e177 100644
--- a/packages/action-group/stories/action-group-sizes.stories.ts
+++ b/packages/action-group/stories/action-group-sizes.stories.ts
@@ -10,170 +10,170 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { spreadProps } from '../../../test/lit-helpers.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { spreadProps } from "../../../test/lit-helpers.js";
 
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js";
 
 export default {
-    title: 'Action Group/Sizes',
-    component: 'sp-action-group',
-    args: {
-        compact: false,
-        emphasized: false,
-        justified: false,
-        quiet: false,
-        vertical: false,
-        size: 'm',
+  title: "Action Group/Sizes",
+  component: "sp-action-group",
+  args: {
+    compact: false,
+    emphasized: false,
+    justified: false,
+    quiet: false,
+    vertical: false,
+    size: "m",
+  },
+  argTypes: {
+    compact: {
+      name: "compact",
+      description:
+        "Visually joins the buttons together to clarify their relationship to one another.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
-    argTypes: {
-        compact: {
-            name: 'compact',
-            description:
-                'Visually joins the buttons together to clarify their relationship to one another.',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        emphasized: {
-            name: 'emphasized',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        justified: {
-            name: 'justified',
-            description:
-                'Aligns the action group items to use all the available space on that line.',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        quiet: {
-            name: 'quiet',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        vertical: {
-            name: 'vertical',
-            description: 'Changes the orientation of the action group.',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        size: {
-            name: 'size',
-            description: 'The size at which to display the action group.',
-            type: { name: 'string', required: true },
-            table: {
-                type: { summary: '"s" | "m" | "l" | "xl"' },
-                defaultValue: { summary: 'm' },
-            },
-            control: {
-                type: 'select',
-                options: ['s', 'm', 'l', 'xl'],
-            },
-        },
+    emphasized: {
+      name: "emphasized",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+    justified: {
+      name: "justified",
+      description:
+        "Aligns the action group items to use all the available space on that line.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    quiet: {
+      name: "quiet",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    vertical: {
+      name: "vertical",
+      description: "Changes the orientation of the action group.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    size: {
+      name: "size",
+      description: "The size at which to display the action group.",
+      type: { name: "string", required: true },
+      table: {
+        type: { summary: '"s" | "m" | "l" | "xl"' },
+        defaultValue: { summary: "m" },
+      },
+      control: {
+        type: "select",
+        options: ["s", "m", "l", "xl"],
+      },
+    },
+  },
 };
 
 interface Properties {
-    compact?: boolean;
-    emphasized?: boolean;
-    justified?: boolean;
-    quiet?: boolean;
-    vertical?: boolean;
-    size?: 's' | 'm' | 'l' | 'xl';
-    [prop: string]: unknown;
+  compact?: boolean;
+  emphasized?: boolean;
+  justified?: boolean;
+  quiet?: boolean;
+  vertical?: boolean;
+  size?: "s" | "m" | "l" | "xl";
+  [prop: string]: unknown;
 }
 
 function renderButtons(args: Properties): TemplateResult {
-    return html`
-        
-            Button 1
-            Longer Button 2
-            Short 3
-        
-    `;
+  return html`
+    
+      Button 1
+      Longer Button 2
+      Short 3
+    
+  `;
 }
 
 export const XS = (args: Properties): TemplateResult => renderButtons(args);
-XS.args = { size: 'xs' };
+XS.args = { size: "xs" };
 
 export const s = (args: Properties): TemplateResult => renderButtons(args);
-s.args = { size: 's' };
+s.args = { size: "s" };
 
 export const m = (args: Properties): TemplateResult => renderButtons(args);
-m.args = { size: 'm' };
+m.args = { size: "m" };
 
 export const l = (args: Properties): TemplateResult => renderButtons(args);
-l.args = { size: 'l' };
+l.args = { size: "l" };
 
 export const XL = (args: Properties): TemplateResult => renderButtons(args);
-XL.args = { size: 'xl' };
+XL.args = { size: "xl" };
 
 export const XSVertical = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 XSVertical.args = {
-    vertical: true,
-    size: 'xs',
+  vertical: true,
+  size: "xs",
 };
 export const sVertical = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 sVertical.args = {
-    vertical: true,
-    size: 's',
+  vertical: true,
+  size: "s",
 };
 
 export const mVertical = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 mVertical.args = {
-    vertical: true,
-    size: 'm',
+  vertical: true,
+  size: "m",
 };
 
 export const lVertical = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 lVertical.args = {
-    vertical: true,
-    size: 'l',
+  vertical: true,
+  size: "l",
 };
 
 export const XLVertical = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 XLVertical.args = {
-    vertical: true,
-    size: 'xl',
+  vertical: true,
+  size: "xl",
 };
diff --git a/packages/action-group/stories/action-group-tooltip.stories.ts b/packages/action-group/stories/action-group-tooltip.stories.ts
index 605b6354fa..bde49c68de 100644
--- a/packages/action-group/stories/action-group-tooltip.stories.ts
+++ b/packages/action-group/stories/action-group-tooltip.stories.ts
@@ -11,10 +11,10 @@ governing permissions and limitations under the License.
 */
 
 import {
-	html,
-	nothing,
-	SpectrumElement,
-	TemplateResult,
+  html,
+  nothing,
+  SpectrumElement,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import { state } from "@spectrum-web-components/base/src/decorators.js";
 import { spreadProps } from "../../../test/lit-helpers.js";
@@ -29,370 +29,370 @@ import "@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js";
 import { ActionGroup } from "@spectrum-web-components/action-group/src/ActionGroup.js";
 
 export default {
-	title: "Action Group/Tooltips",
-	component: "sp-action-group",
-	args: {
-		compact: false,
-		emphasized: false,
-		justified: false,
-		quiet: false,
-		vertical: false,
-		selects: "none",
-		size: "m",
-	},
-	argTypes: {
-		compact: {
-			name: "compact",
-			description:
-				"Visually joins the buttons together to clarify their relationship to one another.",
-			type: { name: "boolean", required: false },
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: {
-				type: "boolean",
-			},
-		},
-		emphasized: {
-			name: "emphasized",
-			type: { name: "boolean", required: false },
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: {
-				type: "boolean",
-			},
-		},
-		justified: {
-			name: "justified",
-			description:
-				"Aligns the action group items to use all the available space on that line.",
-			type: { name: "boolean", required: false },
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: {
-				type: "boolean",
-			},
-		},
-		quiet: {
-			name: "quiet",
-			type: { name: "boolean", required: false },
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: {
-				type: "boolean",
-			},
-		},
-		vertical: {
-			name: "vertical",
-			description: "Changes the orientation of the action group.",
-			type: { name: "boolean", required: false },
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: {
-				type: "boolean",
-			},
-		},
-		selects: {
-			name: "selects",
-			description:
-				"Whether the elements selects its children and how many it can select at a time.",
-			table: {
-				defaultValue: { summary: "" },
-			},
-			options: ["none", "single", "multiple"],
-		},
-		size: {
-			name: "size",
-			description: "The size at which to display the action group.",
-			type: { name: "string", required: true },
-			table: {
-				type: { summary: '"s" | "m" | "l" | "xl"' },
-				defaultValue: { summary: "m" },
-			},
-			control: {
-				type: "select",
-				options: ["s", "m", "l", "xl"],
-			},
-		},
-	},
+  title: "Action Group/Tooltips",
+  component: "sp-action-group",
+  args: {
+    compact: false,
+    emphasized: false,
+    justified: false,
+    quiet: false,
+    vertical: false,
+    selects: "none",
+    size: "m",
+  },
+  argTypes: {
+    compact: {
+      name: "compact",
+      description:
+        "Visually joins the buttons together to clarify their relationship to one another.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    emphasized: {
+      name: "emphasized",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    justified: {
+      name: "justified",
+      description:
+        "Aligns the action group items to use all the available space on that line.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    quiet: {
+      name: "quiet",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    vertical: {
+      name: "vertical",
+      description: "Changes the orientation of the action group.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    selects: {
+      name: "selects",
+      description:
+        "Whether the elements selects its children and how many it can select at a time.",
+      table: {
+        defaultValue: { summary: "" },
+      },
+      options: ["none", "single", "multiple"],
+    },
+    size: {
+      name: "size",
+      description: "The size at which to display the action group.",
+      type: { name: "string", required: true },
+      table: {
+        type: { summary: '"s" | "m" | "l" | "xl"' },
+        defaultValue: { summary: "m" },
+      },
+      control: {
+        type: "select",
+        options: ["s", "m", "l", "xl"],
+      },
+    },
+  },
 };
 
 interface Properties {
-	compact?: boolean;
-	emphasized?: boolean;
-	justified?: boolean;
-	quiet?: boolean;
-	vertical?: boolean;
-	selects?: "none" | "single" | "multiple";
-	size?: "s" | "m" | "l" | "xl";
-	[prop: string]: unknown;
+  compact?: boolean;
+  emphasized?: boolean;
+  justified?: boolean;
+  quiet?: boolean;
+  vertical?: boolean;
+  selects?: "none" | "single" | "multiple";
+  size?: "s" | "m" | "l" | "xl";
+  [prop: string]: unknown;
 }
 
 const template = (args: Properties): TemplateResult => {
-	requestAnimationFrame(() => {
-		const group = document.querySelector("sp-action-group") as ActionGroup;
-		const selectedDiv = group.nextElementSibling;
+  requestAnimationFrame(() => {
+    const group = document.querySelector("sp-action-group") as ActionGroup;
+    const selectedDiv = group.nextElementSibling;
 
-		if (selectedDiv) {
-			selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;
-		}
-	});
+    if (selectedDiv) {
+      selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;
+    }
+  });
 
-	return html`
-		 {
-				const next = target.nextElementSibling as HTMLDivElement;
+  return html`
+     {
+        const next = target.nextElementSibling as HTMLDivElement;
 
-				next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
-			}}
-		>
-			
-				Red
-				 This is a cool color. 
-			
-			
-				Green
-				 You wouldn't be wrong. 
-			
-			
-				
-					Blue
-				
-				The sky in spring.
-			
-			
-				Yellow
-				The sun at noon.
-			
-		
-		${args.selects ? html` 
Selected:
 ` : nothing}
-	`;
+        next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
+      }}
+    >
+      
+        Red
+         This is a cool color. 
+      
+      
+        Green
+         You wouldn't be wrong. 
+      
+      
+        
+          Blue
+        
+        The sky in spring.
+      
+      
+        Yellow
+        The sun at noon.
+      
+    
+    ${args.selects ? html` 
Selected:
 ` : nothing}
+  `;
 };
 
 export const selectsSingle = (args: Properties): TemplateResult =>
-	template(args);
+  template(args);
 selectsSingle.args = {
-	compact: true,
-	emphasized: true,
-	selects: "single",
+  compact: true,
+  emphasized: true,
+  selects: "single",
 };
 
 export const selectsMultiple = (args: Properties): TemplateResult =>
-	template(args);
+  template(args);
 selectsMultiple.args = {
-	compact: true,
-	emphasized: true,
-	selects: "multiple",
+  compact: true,
+  emphasized: true,
+  selects: "multiple",
 };
 
 export const justified = (args: Properties): TemplateResult => template(args);
 justified.args = {
-	compact: true,
-	emphasized: true,
-	justified: true,
-	selects: undefined,
+  compact: true,
+  emphasized: true,
+  justified: true,
+  selects: undefined,
 };
 
 export const vertical = (args: Properties): TemplateResult => template(args);
 vertical.args = {
-	compact: true,
-	emphasized: true,
-	vertical: true,
-	selects: undefined,
+  compact: true,
+  emphasized: true,
+  vertical: true,
+  selects: undefined,
 };
 
 class ActionGroupTooltips extends SpectrumElement {
-	@state()
-	alignment = "left";
+  @state()
+  alignment = "left";
 
-	protected override render(): TemplateResult {
-		return html`
-			
-				 {
-						this.alignment = "left";
-					}}
-				>
-					
-						
-					
-					 Left align 
-				
-				 {
-						this.alignment = "center";
-					}}
-				>
-					
-						
-					
-					
-						Center align
-					
-				
-				 {
-						this.alignment = "right";
-					}}
-				>
-					
-						
-					
-					 Right align 
-				
-			
-		`;
-	}
+  protected override render(): TemplateResult {
+    return html`
+      
+         {
+            this.alignment = "left";
+          }}
+        >
+          
+            
+          
+           Left align 
+        
+         {
+            this.alignment = "center";
+          }}
+        >
+          
+            
+          
+          
+            Center align
+          
+        
+         {
+            this.alignment = "right";
+          }}
+        >
+          
+            
+          
+           Right align 
+        
+      
+    `;
+  }
 }
 
 customElements.define("action-group-tooltips", ActionGroupTooltips);
 
 export const controlled = (): TemplateResult => html`
-	
+  
 `;
diff --git a/packages/action-group/stories/action-group.stories.ts b/packages/action-group/stories/action-group.stories.ts
index b2ffebe31c..808a1a3f6f 100644
--- a/packages/action-group/stories/action-group.stories.ts
+++ b/packages/action-group/stories/action-group.stories.ts
@@ -10,392 +10,378 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { spreadProps } from '../../../test/lit-helpers.js';
-
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { ActionGroup } from '@spectrum-web-components/action-group/src/ActionGroup.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { spreadProps } from "../../../test/lit-helpers.js";
+
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import { ActionGroup } from "@spectrum-web-components/action-group/src/ActionGroup.js";
 
 export default {
-    title: 'Action Group',
-    component: 'sp-action-group',
-    args: {
-        compact: false,
-        emphasized: false,
-        justified: false,
-        quiet: false,
-        vertical: false,
-        size: 'm',
+  title: "Action Group",
+  component: "sp-action-group",
+  args: {
+    compact: false,
+    emphasized: false,
+    justified: false,
+    quiet: false,
+    vertical: false,
+    size: "m",
+  },
+  argTypes: {
+    compact: {
+      name: "compact",
+      description:
+        "Visually joins the buttons together to clarify their relationship to one another.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
-    argTypes: {
-        compact: {
-            name: 'compact',
-            description:
-                'Visually joins the buttons together to clarify their relationship to one another.',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        emphasized: {
-            name: 'emphasized',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        justified: {
-            name: 'justified',
-            description:
-                'Aligns the action group items to use all the available space on that line.',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        quiet: {
-            name: 'quiet',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        vertical: {
-            name: 'vertical',
-            description: 'Changes the orientation of the action group.',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        size: {
-            name: 'size',
-            description: 'The size at which to display the action group.',
-            type: { name: 'string', required: true },
-            table: {
-                type: { summary: '"s" | "m" | "l" | "xl"' },
-                defaultValue: { summary: 'm' },
-            },
-            control: {
-                type: 'select',
-                options: ['s', 'm', 'l', 'xl'],
-            },
-        },
+    emphasized: {
+      name: "emphasized",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+    justified: {
+      name: "justified",
+      description:
+        "Aligns the action group items to use all the available space on that line.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    quiet: {
+      name: "quiet",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    vertical: {
+      name: "vertical",
+      description: "Changes the orientation of the action group.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    size: {
+      name: "size",
+      description: "The size at which to display the action group.",
+      type: { name: "string", required: true },
+      table: {
+        type: { summary: '"s" | "m" | "l" | "xl"' },
+        defaultValue: { summary: "m" },
+      },
+      control: {
+        type: "select",
+        options: ["s", "m", "l", "xl"],
+      },
+    },
+  },
 };
 
 interface Properties {
-    compact?: boolean;
-    emphasized?: boolean;
-    justified?: boolean;
-    quiet?: boolean;
-    vertical?: boolean;
-    size?: 's' | 'm' | 'l' | 'xl';
-    [prop: string]: unknown;
+  compact?: boolean;
+  emphasized?: boolean;
+  justified?: boolean;
+  quiet?: boolean;
+  vertical?: boolean;
+  size?: "s" | "m" | "l" | "xl";
+  [prop: string]: unknown;
 }
 
 function renderIconButtons(args: Properties): TemplateResult {
-    return html`
-        
-            
-                
-            
-            
-                
-            
-            
-                
-            
-        
-    `;
+  return html`
+    
+      
+        
+      
+      
+        
+      
+      
+        
+      
+    
+  `;
 }
 
 function renderButtons(args: Properties): TemplateResult {
-    return html`
-        
-            Button 1
-            Longer Button 2
-            Short 3
-        
-    `;
+  return html`
+    
+      Button 1
+      Longer Button 2
+      Short 3
+    
+  `;
 }
 
 function displaySelectionState(): void {
-    const group = document.querySelector('sp-action-group') as ActionGroup;
-    const selectedDiv = group.nextElementSibling;
+  const group = document.querySelector("sp-action-group") as ActionGroup;
+  const selectedDiv = group.nextElementSibling;
 
-    if (selectedDiv) {
-        selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;
-    }
+  if (selectedDiv) {
+    selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;
+  }
 }
 
 export const Default = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 
 export const HasActionMenuAsChild = (args: Properties): TemplateResult => {
-    return html`
-        
-            Button 1
-            Longer Button 2
-            Short 3
-            
-                One
-                Two
-                Three
-                
-                    Select some items
-                    
-                        A
-                        
-                            B
-                        
-                        C
-                    
-                
-            
-        
-    `;
+  return html`
+    
+      Button 1
+      Longer Button 2
+      Short 3
+      
+        One
+        Two
+        Three
+        
+          Select some items
+          
+            A
+             B 
+            C
+          
+        
+      
+    
+  `;
 };
 
 export const selectsSingle = (args: Properties): TemplateResult => {
-    requestAnimationFrame(displaySelectionState);
-
-    return html`
-         {
-                const next = target.nextElementSibling as HTMLDivElement;
-
-                next.textContent = `Selected: ${JSON.stringify(
-                    target.selected
-                )}`;
-            }}
-        >
-            Red
-            Green
-            Blue
-            Yellow
-        
-        
Selected:

-    `;
+  requestAnimationFrame(displaySelectionState);
+
+  return html`
+     {
+        const next = target.nextElementSibling as HTMLDivElement;
+
+        next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
+      }}
+    >
+      Red
+      Green
+      Blue
+      Yellow
+    
+    
Selected:

+  `;
 };
 
 export const selectsMultiple = (args: Properties): TemplateResult => {
-    requestAnimationFrame(displaySelectionState);
-
-    return html`
-         {
-                const next = target.nextElementSibling as HTMLDivElement;
-
-                next.textContent = `Selected: ${JSON.stringify(
-                    target.selected
-                )}`;
-            }}
-        >
-            Red
-            Green
-            Blue
-            Yellow
-        
-        
Selected:

-    `;
+  requestAnimationFrame(displaySelectionState);
+
+  return html`
+     {
+        const next = target.nextElementSibling as HTMLDivElement;
+
+        next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
+      }}
+    >
+      Red
+      Green
+      Blue
+      Yellow
+    
+    
Selected:

+  `;
 };
 
 export const selectsMultipleWithTooltips = (
-    args: Properties
+  args: Properties,
 ): TemplateResult => {
-    return html`
-         {
-                const next = target.nextElementSibling as HTMLDivElement;
-
-                next.textContent = `Selected: ${JSON.stringify(
-                    target.selected
-                )}`;
-            }}
-        >
-            
-                Red
-                
-                    This is a cool color.
-                
-            
-            
-                Green
-                
-                    You wouldn't be wrong.
-                
-            
-            
-                Blue
-                The sky in spring.
-            
-            
-                Yellow
-                The sun at noon.
-            
-        
-        
Selected:

-    `;
+  return html`
+     {
+        const next = target.nextElementSibling as HTMLDivElement;
+
+        next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
+      }}
+    >
+      
+        Red
+         This is a cool color. 
+      
+      
+        Green
+         You wouldn't be wrong. 
+      
+      
+        Blue
+        The sky in spring.
+      
+      
+        Yellow
+        The sun at noon.
+      
+    
+    
Selected:

+  `;
 };
 
 export const selectsMultipleControlled = (args: Properties): TemplateResult => {
-    requestAnimationFrame(displaySelectionState);
-
-    return html`
-         {
-                const next = target.nextElementSibling as HTMLDivElement;
-
-                next.textContent = `Selected: ${JSON.stringify(
-                    target.selected
-                )}`;
-            }}
-        >
-            Lava Cakes
-            Donuts
-            Crepe Cake
-            Fruit Tarts
-        
-        
Selected:

-    `;
+  requestAnimationFrame(displaySelectionState);
+
+  return html`
+     {
+        const next = target.nextElementSibling as HTMLDivElement;
+
+        next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
+      }}
+    >
+      Lava Cakes
+      Donuts
+      Crepe Cake
+      Fruit Tarts
+    
+    
Selected:

+  `;
 };
 
 export const iconsOnly = (args: Properties): TemplateResult =>
-    renderIconButtons(args);
+  renderIconButtons(args);
 
 export const quietIconsOnly = (args: Properties): TemplateResult =>
-    renderIconButtons(args);
+  renderIconButtons(args);
 quietIconsOnly.args = {
-    quiet: true,
+  quiet: true,
 };
 
 export const compact = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 compact.args = {
-    compact: true,
+  compact: true,
 };
 
 export const compactIconsOnly = (args: Properties): TemplateResult =>
-    renderIconButtons(args);
+  renderIconButtons(args);
 compactIconsOnly.args = {
-    compact: true,
+  compact: true,
 };
 
 export const compactQuietIconsOnly = (args: Properties): TemplateResult =>
-    renderIconButtons(args);
+  renderIconButtons(args);
 compactQuietIconsOnly.args = {
-    compact: true,
-    quiet: true,
+  compact: true,
+  quiet: true,
 };
 
 export const vertical = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 vertical.args = {
-    vertical: true,
+  vertical: true,
 };
 
 export const verticalIconsOnly = (args: Properties): TemplateResult =>
-    renderIconButtons(args);
+  renderIconButtons(args);
 verticalIconsOnly.args = {
-    vertical: true,
+  vertical: true,
 };
 
 export const verticalQuietIconsOnly = (args: Properties): TemplateResult =>
-    renderIconButtons(args);
+  renderIconButtons(args);
 verticalQuietIconsOnly.args = {
-    quiet: true,
-    vertical: true,
+  quiet: true,
+  vertical: true,
 };
 
 export const compactVertical = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 compactVertical.args = {
-    compact: true,
-    vertical: true,
+  compact: true,
+  vertical: true,
 };
 
 export const compactVerticalIconsOnly = (args: Properties): TemplateResult =>
-    renderIconButtons(args);
+  renderIconButtons(args);
 compactVerticalIconsOnly.args = {
-    compact: true,
-    vertical: true,
+  compact: true,
+  vertical: true,
 };
 
 export const compactQuietVerticalIconsOnly = (
-    args: Properties
+  args: Properties,
 ): TemplateResult => renderIconButtons(args);
 compactQuietVerticalIconsOnly.args = {
-    compact: true,
-    quiet: true,
-    vertical: true,
+  compact: true,
+  quiet: true,
+  vertical: true,
 };
 
 export const justified = (args: Properties): TemplateResult =>
-    renderButtons(args);
+  renderButtons(args);
 justified.args = {
-    justified: true,
+  justified: true,
 };
 
 export const justifiedIconsOnly = (args: Properties): TemplateResult =>
-    renderIconButtons(args);
+  renderIconButtons(args);
 justifiedIconsOnly.args = {
-    justified: true,
+  justified: true,
 };
 
 export const compactJustifiedIconsOnly = (args: Properties): TemplateResult =>
-    renderIconButtons(args);
+  renderIconButtons(args);
 compactJustifiedIconsOnly.args = {
-    compact: true,
-    justified: true,
+  compact: true,
+  justified: true,
 };
diff --git a/packages/action-group/test/action-group-memory.test.ts b/packages/action-group/test/action-group-memory.test.ts
index 28559882a2..b5aade8759 100644
--- a/packages/action-group/test/action-group-memory.test.ts
+++ b/packages/action-group/test/action-group-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Default } from '../stories/action-group.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/action-group.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(Default({}));
diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts
index fe2d018576..85808ee0bc 100644
--- a/packages/action-group/test/action-group.test.ts
+++ b/packages/action-group/test/action-group.test.ts
@@ -11,14 +11,14 @@ governing permissions and limitations under the License.
 */
 
 import {
-	aTimeout,
-	elementUpdated,
-	expect,
-	fixture,
-	html,
-	nextFrame,
-	oneEvent,
-	waitUntil,
+  aTimeout,
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent,
+  waitUntil,
 } from "@open-wc/testing";
 
 import { ActionButton } from "@spectrum-web-components/action-button";
@@ -30,21 +30,21 @@ import "@spectrum-web-components/menu/sp-menu.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import "@spectrum-web-components/picker/sp-picker.js";
 import {
-	LitElement,
-	SpectrumElement,
-	TemplateResult,
+  LitElement,
+  SpectrumElement,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import "@spectrum-web-components/overlay/overlay-trigger.js";
 import "@spectrum-web-components/tooltip/sp-tooltip.js";
 import { ActionGroup } from "@spectrum-web-components/action-group";
 import {
-	arrowDownEvent,
-	arrowLeftEvent,
-	arrowRightEvent,
-	arrowUpEvent,
-	endEvent,
-	homeEvent,
-	testForLitDevWarnings,
+  arrowDownEvent,
+  arrowLeftEvent,
+  arrowRightEvent,
+  arrowUpEvent,
+  endEvent,
+  homeEvent,
+  testForLitDevWarnings,
 } from "../../../test/testing-helpers.js";
 import { sendKeys } from "@web/test-runner-commands";
 import "@spectrum-web-components/action-group/sp-action-group.js";
@@ -57,1468 +57,1468 @@ import { isWebKit } from "@spectrum-web-components/shared";
 import sinon from "sinon";
 
 class QuietActionGroup extends LitElement {
-	protected override render(): TemplateResult {
-		return html`
-			
-				
-				
-			
-		`;
-	}
+  protected override render(): TemplateResult {
+    return html`
+      
+        
+        
+      
+    `;
+  }
 }
 customElements.define("quiet-action-group", QuietActionGroup);
 
 class EmphasizedActionGroup extends LitElement {
-	protected override render(): TemplateResult {
-		return html`
-			
-				
-				
-			
-		`;
-	}
+  protected override render(): TemplateResult {
+    return html`
+      
+        
+        
+      
+    `;
+  }
 }
 customElements.define("emphasized-action-group", EmphasizedActionGroup);
 
 async function singleSelectedActionGroup(
-	selected: string[],
+  selected: string[],
 ): Promise {
-	const el = await fixture(html`
-		
-			 First 
-			
-				

-				Second
-			
-		
-	`);
-
-	return el;
+  const el = await fixture(html`
+    
+       First 
+      
+        

+        Second
+      
+    
+  `);
+
+  return el;
 }
 
 async function multipleSelectedActionGroup(
-	selected: string[],
+  selected: string[],
 ): Promise {
-	const el = await fixture(html`
-		
-			 First 
-			
-				Second
-			
-		
-	`);
-
-	return el;
+  const el = await fixture(html`
+    
+       First 
+      
+        Second
+      
+    
+  `);
+
+  return el;
 }
 
 describe("ActionGroup", () => {
-	it("does not throw an error if slotElement is null", async () => {
-		// To verify that this test is not evergreen, you can temporarily disable the safeguard
-		// clause in `manageButtons` by commenting out the following lines:
-		// if (!this.slotElement) { return; }
+  it("does not throw an error if slotElement is null", async () => {
+    // To verify that this test is not evergreen, you can temporarily disable the safeguard
+    // clause in `manageButtons` by commenting out the following lines:
+    // if (!this.slotElement) { return; }
 
-		const el = await fixture(html`
-			
-				First
-				Second
-			
-		`);
+    const el = await fixture(html`
+      
+        First
+        Second
+      
+    `);
 
-		// Stub the slotElement getter to return null
-		const slotElementStub = sinon.stub(el, "slotElement").get(() => null);
+    // Stub the slotElement getter to return null
+    const slotElementStub = sinon.stub(el, "slotElement").get(() => null);
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		// trigger a slotchange event
-		while (el.firstChild) {
-			el.removeChild(el.firstChild);
-		}
-		await elementUpdated(el);
-		expect(el.children.length).to.equal(0);
-		slotElementStub.restore();
-	});
+    // trigger a slotchange event
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+    await elementUpdated(el);
+    expect(el.children.length).to.equal(0);
+    slotElementStub.restore();
+  });
 
-	it("loads empty action-group accessibly", async () => {
-		const el = await fixture(html`
-			
-		`);
+  it("loads empty action-group accessibly", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await expect(el).to.be.accessible();
-	});
+    await expect(el).to.be.accessible();
+  });
 
-	it("loads action-group with action-menu accessibly", async () => {
-		const el = await fixture(
-			HasActionMenuAsChild({ label: "Action Group" }),
-		);
+  it("loads action-group with action-menu accessibly", async () => {
+    const el = await fixture(
+      HasActionMenuAsChild({ label: "Action Group" }),
+    );
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
 
-		await expect(el).to.be.accessible();
-	});
+    await expect(el).to.be.accessible();
+  });
 
-	it("action-group with action-menu manages tabIndex correctly while using keyboard", async () => {
-		const el = await fixture(
-			HasActionMenuAsChild({ label: "Action Group" }),
-		);
+  it("action-group with action-menu manages tabIndex correctly while using keyboard", async () => {
+    const el = await fixture(
+      HasActionMenuAsChild({ label: "Action Group" }),
+    );
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
 
-		// press Tab to focus into the action-group
-		await sendKeys({ press: "Tab" });
+    // press Tab to focus into the action-group
+    await sendKeys({ press: "Tab" });
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		// expect the first button to be focused
-		expect(document.activeElement?.id).to.equal("first");
+    // expect the first button to be focused
+    expect(document.activeElement?.id).to.equal("first");
 
-		// expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using Tab
-		expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
-		expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
-		expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
-		expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
+    // expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using Tab
+    expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
+    expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
+    expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
+    expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
 
-		// navigate to the action-menu using the arrow keys
-		await sendKeys({ press: "ArrowRight" });
-		await sendKeys({ press: "ArrowRight" });
-		await sendKeys({ press: "ArrowRight" });
+    // navigate to the action-menu using the arrow keys
+    await sendKeys({ press: "ArrowRight" });
+    await sendKeys({ press: "ArrowRight" });
+    await sendKeys({ press: "ArrowRight" });
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		// expect the action-menu to be focused
-		expect((el.children[3] as ActionMenu)?.focused).to.be.true;
+    // expect the action-menu to be focused
+    expect((el.children[3] as ActionMenu)?.focused).to.be.true;
 
-		// press Enter to open the action-menu
-		await sendKeys({ press: "Enter" });
+    // press Enter to open the action-menu
+    await sendKeys({ press: "Enter" });
 
-		const opened = oneEvent(el.children[3] as ActionMenu, "sp-opened");
+    const opened = oneEvent(el.children[3] as ActionMenu, "sp-opened");
 
-		await elementUpdated(el.children[3]);
-		await opened;
+    await elementUpdated(el.children[3]);
+    await opened;
 
-		// expect the first menu item to be focused
-		const firstMenuItem = el.querySelector("#first-menu-item") as MenuItem;
+    // expect the first menu item to be focused
+    const firstMenuItem = el.querySelector("#first-menu-item") as MenuItem;
 
-		expect(firstMenuItem?.focused).to.be.true;
-
-		// navigate to the fourth menu item using the arrow keys
-		await sendKeys({ press: "ArrowDown" });
-		await sendKeys({ press: "ArrowDown" });
-		await sendKeys({ press: "ArrowDown" });
+    expect(firstMenuItem?.focused).to.be.true;
+
+    // navigate to the fourth menu item using the arrow keys
+    await sendKeys({ press: "ArrowDown" });
+    await sendKeys({ press: "ArrowDown" });
+    await sendKeys({ press: "ArrowDown" });
 
-		// press Enter to select the fourth menu item
-		await sendKeys({ press: "Enter" });
+    // press Enter to select the fourth menu item
+    await sendKeys({ press: "Enter" });
 
-		await elementUpdated(el.children[3]);
+    await elementUpdated(el.children[3]);
 
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
 
-		// expect the second submenu item to be focused
-		const secondSubMenuItem = el.querySelector(
-			"#second-sub-menu-item",
-		) as MenuItem;
+    // expect the second submenu item to be focused
+    const secondSubMenuItem = el.querySelector(
+      "#second-sub-menu-item",
+    ) as MenuItem;
 
-		expect(secondSubMenuItem?.focused).to.be.true;
+    expect(secondSubMenuItem?.focused).to.be.true;
 
-		// press Enter to select the second submenu item
-		await sendKeys({ press: "Enter" });
+    // press Enter to select the second submenu item
+    await sendKeys({ press: "Enter" });
 
-		const closed = oneEvent(el.children[3] as ActionMenu, "sp-closed");
+    const closed = oneEvent(el.children[3] as ActionMenu, "sp-closed");
 
-		await elementUpdated(el.children[3]);
+    await elementUpdated(el.children[3]);
 
-		await closed;
+    await closed;
 
-		// expect the action-menu to be focused
-		expect((el.children[3] as ActionMenu)?.focused).to.be.true;
-	});
+    // expect the action-menu to be focused
+    expect((el.children[3] as ActionMenu)?.focused).to.be.true;
+  });
 
-	it("action-group with action-menu manages tabIndex correctly while using mouse", async () => {
-		const el = await fixture(
-			HasActionMenuAsChild({ label: "Action Group" }),
-		);
+  it("action-group with action-menu manages tabIndex correctly while using mouse", async () => {
+    const el = await fixture(
+      HasActionMenuAsChild({ label: "Action Group" }),
+    );
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await aTimeout(500);
-
-		// get the bounding box of the first button
-		const firstButton = el.querySelector("#first") as ActionButton;
-		const rect = firstButton.getBoundingClientRect();
-
-		sendMouse({
-			steps: [
-				{
-					position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
-					type: "click",
-				},
-			],
-		});
-
-		await elementUpdated(el);
-		await aTimeout(500);
-
-		// expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using mouse
-		expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
-		expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
-		expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
-		expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
-
-		// click outside the action-group and it should loose focus and update the tabIndexes
-		sendMouse({
-			steps: [
-				{
-					position: [0, 0],
-					type: "click",
-				},
-			],
-		});
-
-		await elementUpdated(el);
-		await aTimeout(500);
-
-		// expect the first button to have a tabIndex of 0 and everything else to have a tabIndex of -1
-		expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
-		expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
-		expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
-		expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
-
-		// get the bounding box of the action-menu
-		const actionMenu = el.querySelector("#action-menu") as ActionMenu;
-		const actionMenuRect = actionMenu.getBoundingClientRect();
-
-		sendMouse({
-			steps: [
-				{
-					position: [
-						actionMenuRect.left + actionMenuRect.width / 2,
-						actionMenuRect.top + actionMenuRect.height / 2,
-					],
-					type: "click",
-				},
-			],
-		});
-
-		await elementUpdated(el);
-
-		const opened = oneEvent(el.children[3] as ActionMenu, "sp-opened");
-
-		await opened;
-
-		// use keyboard to navigate to the second menu item and select it
-		await sendKeys({ press: "ArrowDown" });
-		await sendKeys({ press: "Enter" });
-
-		const closed = oneEvent(el.children[3] as ActionMenu, "sp-closed");
-
-		await closed;
-
-		if (!isWebKit()) {
-			sendMouse({
-				steps: [
-					{
-						position: [0, 0],
-						type: "click",
-					},
-				],
-			});
-		}
-
-		await aTimeout(500);
-
-		expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
-		expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
-		expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
-		expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
-	});
-
-	testForLitDevWarnings(
-		async () =>
-			await fixture(html`
-				
-					First
-					Second
-					Third
-				
-			`),
-	);
-	it("loads default action-group accessibly", async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-
-		await elementUpdated(el);
-
-		await expect(el).to.be.accessible();
-		expect(el.getAttribute("aria-label")).to.equal("Default Group");
-		expect(el.getAttribute("role")).to.equal("toolbar");
-		expect(el.children[0].getAttribute("role")).to.equal("button");
-	});
-	it("applies `static-color` attribute to its children", async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-			
-		`);
-		const firstButton = el.querySelector("#first") as ActionButton;
-		const secondButton = el.querySelector("#second") as ActionButton;
-
-		await elementUpdated(el);
-
-		expect(firstButton.staticColor).to.equal("white");
-		expect(secondButton.staticColor).to.equal("white");
-
-		el.staticColor = undefined;
-
-		await elementUpdated(el);
-
-		expect(firstButton.staticColor).to.be.undefined;
-		expect(secondButton.staticColor).to.be.undefined;
-	});
-	it('manages "label"', async () => {
-		const testLabel = "Testable action group";
-		const el = await fixture(html`
-			
-				First
-				Second
-			
-		`);
-
-		expect(el.getAttribute("aria-label")).to.equal(testLabel);
-
-		el.label = "";
-
-		await elementUpdated(el);
-
-		expect(el.hasAttribute("aria-label")).to.be.false;
-	});
-	it("applies `quiet` attribute to its children", async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-			
-		`);
-		const firstButton = el.querySelector("#first") as ActionButton;
-		const secondButton = el.querySelector("#second") as ActionButton;
-
-		await elementUpdated(el);
-
-		expect(firstButton.hasAttribute("quiet")).to.be.true;
-		expect(firstButton.quiet).to.be.true;
-		expect(secondButton.hasAttribute("quiet")).to.be.true;
-		expect(secondButton.quiet).to.be.true;
-	});
-	it("applies `quiet` attribute to its slotted children", async () => {
-		const el = await fixture(html`
-			
-				 First 
-				 Second 
-			
-		`);
-		const firstButton = el.querySelector("#first") as ActionButton;
-		const secondButton = el.querySelector("#second") as ActionButton;
-
-		await elementUpdated(el);
-
-		expect(firstButton.hasAttribute("quiet")).to.be.true;
-		expect(firstButton.quiet).to.be.true;
-		expect(secondButton.hasAttribute("quiet")).to.be.true;
-		expect(secondButton.quiet).to.be.true;
-	});
-	it("applies `emphasized` attribute to its slotted children", async () => {
-		const el = await fixture(html`
-			
-				 First 
-				 Second 
-			
-		`);
-		const firstButton = el.querySelector("#first") as ActionButton;
-		const secondButton = el.querySelector("#second") as ActionButton;
-
-		await elementUpdated(el);
-
-		expect(firstButton.hasAttribute("emphasized")).to.be.true;
-		expect(firstButton.emphasized).to.be.true;
-		expect(secondButton.hasAttribute("emphasized")).to.be.true;
-		expect(secondButton.emphasized).to.be.true;
-	});
-	it("applies `quiet` attribute to slotted children with overlays", async () => {
-		const el = await fixture(html`
-			
-				
-					 First 
-				
-				
-					
-						Second
-					
-				
-			
-		`);
-		const firstButton = el.querySelector("#first") as ActionButton;
-		const secondButton = el.querySelector("#second") as ActionButton;
-
-		await elementUpdated(el);
-
-		expect(firstButton.hasAttribute("quiet")).to.be.true;
-		expect(firstButton.quiet).to.be.true;
-		expect(secondButton.hasAttribute("quiet")).to.be.true;
-		expect(secondButton.quiet).to.be.true;
-	});
-	it("applies `emphasized` attribute to slotted children with overlays", async () => {
-		const el = await fixture(html`
-			
-				
-					 First 
-				
-				
-					
-						Second
-					
-				
-			
-		`);
-		const firstButton = el.querySelector("#first") as ActionButton;
-		const secondButton = el.querySelector("#second") as ActionButton;
-
-		await elementUpdated(el);
-
-		expect(firstButton.hasAttribute("emphasized")).to.be.true;
-		expect(firstButton.emphasized).to.be.true;
-		expect(secondButton.hasAttribute("emphasized")).to.be.true;
-		expect(secondButton.emphasized).to.be.true;
-	});
-	it('loads [selects="single"] action-group accessibly', async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-
-		await elementUpdated(el);
-
-		await expect(el).to.be.accessible();
-		expect(el.getAttribute("aria-label")).to.equal("Selects Single Group");
-		expect(el.getAttribute("role")).to.equal("radiogroup");
-		expect(el.children[0].getAttribute("role")).to.equal("radio");
-	});
-	it('loads [selects="single"] action-group w/ selection accessibly', async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-
-		await elementUpdated(el);
-
-		await expect(el).to.be.accessible();
-	});
-	it('loads [selects="multiple"] action-group accessibly', async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-
-		await elementUpdated(el);
-
-		await expect(el).to.be.accessible();
-		expect(el.getAttribute("aria-label")).to.equal("Selects Multiple Group");
-		expect(el.getAttribute("role")).to.equal("toolbar");
-		expect(el.children[0].getAttribute("role")).to.equal("checkbox");
-	});
-	it('loads [selects="multiple"] action-group w/ selection accessibly', async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-
-		await elementUpdated(el);
-
-		await expect(el).to.be.accessible();
-	});
-	it('sets tab stop when [selects="single"] and the initial button is [disabled]', async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-		const secondButton = el.querySelector(".second") as ActionButton;
-
-		await elementUpdated(el);
-
-		expect(secondButton.hasAttribute("tabindex"));
-		expect(secondButton.getAttribute("tabindex")).to.equal("0");
-	});
-	it('surfaces [selects="single"] selection', async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-
-		await elementUpdated(el);
-
-		expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
-	});
-	it('manages [selects="single"] selection through multiple slots', async () => {
-		const test = await fixture(html`
-			

-				First
-				Second
-				Third
-			

-		`);
-
-		const firstItem = test.querySelector("sp-action-button") as ActionButton;
-		const thirdItem = test.querySelector(
-			"sp-action-button[selected]",
-		) as ActionButton;
-
-		const shadowRoot = test.attachShadow({ mode: "open" });
-
-		shadowRoot.innerHTML = `
+    await aTimeout(500);
+
+    // get the bounding box of the first button
+    const firstButton = el.querySelector("#first") as ActionButton;
+    const rect = firstButton.getBoundingClientRect();
+
+    sendMouse({
+      steps: [
+        {
+          position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+          type: "click",
+        },
+      ],
+    });
+
+    await elementUpdated(el);
+    await aTimeout(500);
+
+    // expect all the elements of the focus group to have a tabIndex of -1 except the first button because it is focused using mouse
+    expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
+    expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
+    expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
+    expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
+
+    // click outside the action-group and it should loose focus and update the tabIndexes
+    sendMouse({
+      steps: [
+        {
+          position: [0, 0],
+          type: "click",
+        },
+      ],
+    });
+
+    await elementUpdated(el);
+    await aTimeout(500);
+
+    // expect the first button to have a tabIndex of 0 and everything else to have a tabIndex of -1
+    expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
+    expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
+    expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
+    expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
+
+    // get the bounding box of the action-menu
+    const actionMenu = el.querySelector("#action-menu") as ActionMenu;
+    const actionMenuRect = actionMenu.getBoundingClientRect();
+
+    sendMouse({
+      steps: [
+        {
+          position: [
+            actionMenuRect.left + actionMenuRect.width / 2,
+            actionMenuRect.top + actionMenuRect.height / 2,
+          ],
+          type: "click",
+        },
+      ],
+    });
+
+    await elementUpdated(el);
+
+    const opened = oneEvent(el.children[3] as ActionMenu, "sp-opened");
+
+    await opened;
+
+    // use keyboard to navigate to the second menu item and select it
+    await sendKeys({ press: "ArrowDown" });
+    await sendKeys({ press: "Enter" });
+
+    const closed = oneEvent(el.children[3] as ActionMenu, "sp-closed");
+
+    await closed;
+
+    if (!isWebKit()) {
+      sendMouse({
+        steps: [
+          {
+            position: [0, 0],
+            type: "click",
+          },
+        ],
+      });
+    }
+
+    await aTimeout(500);
+
+    expect((el.children[0] as ActionButton)?.tabIndex).to.equal(0);
+    expect((el.children[1] as ActionButton)?.tabIndex).to.equal(-1);
+    expect((el.children[2] as ActionButton)?.tabIndex).to.equal(-1);
+    expect((el.children[3] as ActionMenu)?.tabIndex).to.equal(-1);
+  });
+
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+          First
+          Second
+          Third
+        
+      `),
+  );
+  it("loads default action-group accessibly", async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+    expect(el.getAttribute("aria-label")).to.equal("Default Group");
+    expect(el.getAttribute("role")).to.equal("toolbar");
+    expect(el.children[0].getAttribute("role")).to.equal("button");
+  });
+  it("applies `static-color` attribute to its children", async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+      
+    `);
+    const firstButton = el.querySelector("#first") as ActionButton;
+    const secondButton = el.querySelector("#second") as ActionButton;
+
+    await elementUpdated(el);
+
+    expect(firstButton.staticColor).to.equal("white");
+    expect(secondButton.staticColor).to.equal("white");
+
+    el.staticColor = undefined;
+
+    await elementUpdated(el);
+
+    expect(firstButton.staticColor).to.be.undefined;
+    expect(secondButton.staticColor).to.be.undefined;
+  });
+  it('manages "label"', async () => {
+    const testLabel = "Testable action group";
+    const el = await fixture(html`
+      
+        First
+        Second
+      
+    `);
+
+    expect(el.getAttribute("aria-label")).to.equal(testLabel);
+
+    el.label = "";
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute("aria-label")).to.be.false;
+  });
+  it("applies `quiet` attribute to its children", async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+      
+    `);
+    const firstButton = el.querySelector("#first") as ActionButton;
+    const secondButton = el.querySelector("#second") as ActionButton;
+
+    await elementUpdated(el);
+
+    expect(firstButton.hasAttribute("quiet")).to.be.true;
+    expect(firstButton.quiet).to.be.true;
+    expect(secondButton.hasAttribute("quiet")).to.be.true;
+    expect(secondButton.quiet).to.be.true;
+  });
+  it("applies `quiet` attribute to its slotted children", async () => {
+    const el = await fixture(html`
+      
+         First 
+         Second 
+      
+    `);
+    const firstButton = el.querySelector("#first") as ActionButton;
+    const secondButton = el.querySelector("#second") as ActionButton;
+
+    await elementUpdated(el);
+
+    expect(firstButton.hasAttribute("quiet")).to.be.true;
+    expect(firstButton.quiet).to.be.true;
+    expect(secondButton.hasAttribute("quiet")).to.be.true;
+    expect(secondButton.quiet).to.be.true;
+  });
+  it("applies `emphasized` attribute to its slotted children", async () => {
+    const el = await fixture(html`
+      
+         First 
+         Second 
+      
+    `);
+    const firstButton = el.querySelector("#first") as ActionButton;
+    const secondButton = el.querySelector("#second") as ActionButton;
+
+    await elementUpdated(el);
+
+    expect(firstButton.hasAttribute("emphasized")).to.be.true;
+    expect(firstButton.emphasized).to.be.true;
+    expect(secondButton.hasAttribute("emphasized")).to.be.true;
+    expect(secondButton.emphasized).to.be.true;
+  });
+  it("applies `quiet` attribute to slotted children with overlays", async () => {
+    const el = await fixture(html`
+      
+        
+           First 
+        
+        
+          
+            Second
+          
+        
+      
+    `);
+    const firstButton = el.querySelector("#first") as ActionButton;
+    const secondButton = el.querySelector("#second") as ActionButton;
+
+    await elementUpdated(el);
+
+    expect(firstButton.hasAttribute("quiet")).to.be.true;
+    expect(firstButton.quiet).to.be.true;
+    expect(secondButton.hasAttribute("quiet")).to.be.true;
+    expect(secondButton.quiet).to.be.true;
+  });
+  it("applies `emphasized` attribute to slotted children with overlays", async () => {
+    const el = await fixture(html`
+      
+        
+           First 
+        
+        
+          
+            Second
+          
+        
+      
+    `);
+    const firstButton = el.querySelector("#first") as ActionButton;
+    const secondButton = el.querySelector("#second") as ActionButton;
+
+    await elementUpdated(el);
+
+    expect(firstButton.hasAttribute("emphasized")).to.be.true;
+    expect(firstButton.emphasized).to.be.true;
+    expect(secondButton.hasAttribute("emphasized")).to.be.true;
+    expect(secondButton.emphasized).to.be.true;
+  });
+  it('loads [selects="single"] action-group accessibly', async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+    expect(el.getAttribute("aria-label")).to.equal("Selects Single Group");
+    expect(el.getAttribute("role")).to.equal("radiogroup");
+    expect(el.children[0].getAttribute("role")).to.equal("radio");
+  });
+  it('loads [selects="single"] action-group w/ selection accessibly', async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it('loads [selects="multiple"] action-group accessibly', async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+    expect(el.getAttribute("aria-label")).to.equal("Selects Multiple Group");
+    expect(el.getAttribute("role")).to.equal("toolbar");
+    expect(el.children[0].getAttribute("role")).to.equal("checkbox");
+  });
+  it('loads [selects="multiple"] action-group w/ selection accessibly', async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it('sets tab stop when [selects="single"] and the initial button is [disabled]', async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+    const secondButton = el.querySelector(".second") as ActionButton;
+
+    await elementUpdated(el);
+
+    expect(secondButton.hasAttribute("tabindex"));
+    expect(secondButton.getAttribute("tabindex")).to.equal("0");
+  });
+  it('surfaces [selects="single"] selection', async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
+  });
+  it('manages [selects="single"] selection through multiple slots', async () => {
+    const test = await fixture(html`
+      

+        First
+        Second
+        Third
+      

+    `);
+
+    const firstItem = test.querySelector("sp-action-button") as ActionButton;
+    const thirdItem = test.querySelector(
+      "sp-action-button[selected]",
+    ) as ActionButton;
+
+    const shadowRoot = test.attachShadow({ mode: "open" });
+
+    shadowRoot.innerHTML = `
             
                 
             
         `;
 
-		const el = shadowRoot.querySelector("sp-action-group") as ActionGroup;
-
-		await elementUpdated(el);
-
-		expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
-		expect(firstItem.selected).to.be.false;
-		expect(thirdItem.selected).to.be.true;
-
-		firstItem.click();
-		await elementUpdated(el);
-
-		expect(el.selected, '"First" selected').to.deep.equal(["First"]);
-		expect(firstItem.selected).to.be.true;
-		expect(thirdItem.selected).to.be.false;
-	});
-	it('surfaces [selects="multiple"] selection', async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-
-		await elementUpdated(el);
-
-		expect(el.selected, '"Second" and "Third" selected').to.deep.equal([
-			"Second",
-			"Third",
-		]);
-	});
-	it("does not select without [selects]", async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-		const thirdElement = el.querySelector(".third") as ActionButton;
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-
-		thirdElement.click();
-
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-	});
-	it('selects via `click` while [selects="single"]', async () => {
-		const el = await fixture(html`
-			
-				First
-				 Second 
-				 Third 
-			
-		`);
-		const thirdElement = el.querySelector(".third") as ActionButton;
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected.includes("second"));
-
-		thirdElement.click();
-
-		await elementUpdated(el);
-
-		expect(thirdElement.selected, "third child selected").to.be.true;
-
-		await waitUntil(
-			() => el.selected.length === 1 && el.selected.includes("third"),
-			"Updates value of `selected`",
-		);
-	});
-	it('selects via `click` while  [selects="multiple"] selection', async () => {
-		const el = await fixture(html`
-			
-				 First 
-				Second
-				Third
-			
-		`);
-		const firstElement = el.querySelector(".first") as ActionButton;
-		const secondElement = el.querySelector(".second") as ActionButton;
-		const thirdElement = el.querySelector(".third") as ActionButton;
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected.includes("First"));
-
-		firstElement.click();
-		secondElement.click();
-		thirdElement.click();
-
-		await elementUpdated(el);
-
-		expect(secondElement.selected, "second child selected").to.be.true;
-		expect(thirdElement.selected, "third child selected").to.be.true;
-
-		await waitUntil(
-			() =>
-				el.selected.length === 2 &&
-				el.selected.includes("Second") &&
-				el.selected.includes("Third"),
-			"Updates value of `selected`",
-		);
-	});
-	it("consumes descendant `change` events when `[selects]`", async () => {
-		const changeSpy = spy();
-		const el = await fixture(html`
-			 changeSpy()}
-				label="Selects Single Group"
-				selects="single"
-			>
-				First
-				
-					Second
-				
-				
-					Third
-				
-			
-		`);
-		const thirdElement = el.querySelector(".third") as ActionButton;
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected.includes("second"));
-		expect(changeSpy.callCount).to.equal(0);
-
-		thirdElement.click();
-
-		await elementUpdated(el);
-
-		expect(thirdElement.selected, "third child selected").to.be.true;
-		expect(changeSpy.callCount).to.equal(1);
-
-		await waitUntil(
-			() => el.selected.length === 1 && el.selected.includes("third"),
-			"Updates value of `selected`",
-		);
-	});
-	it("does not respond to clicks on itself", async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(0);
-
-		el.click();
-
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(0);
-	});
-	it("selection can be prevented", async () => {
-		const el = await fixture(html`
-			 {
-					event.preventDefault();
-				}}
-			>
-				First
-				Second
-				Third
-			
-		`);
-		const thirdElement = el.querySelector(".third") as ActionButton;
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(0);
-
-		thirdElement.click();
-
-		await elementUpdated(el);
-
-		expect(thirdElement.selected, "third child not selected").to.be.false;
-		expect(el.selected.length).to.equal(0);
-	});
-
-	it('selects user-passed value while [selects="single"]', async () => {
-		const el = await singleSelectedActionGroup(["first"]);
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-
-		const firstButton = el.querySelector(".first") as ActionButton;
-		const secondButton = el.querySelector(".second") as ActionButton;
-
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button not selected").to.be.false;
-
-		secondButton.click();
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-		expect(firstButton.selected, "first button not selected").to.be.false;
-		expect(secondButton.selected, "second button selected").to.be.true;
-	});
-
-	it('selects can be updated while [selects="single"]', async () => {
-		const el = await singleSelectedActionGroup(["first"]);
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-
-		const firstButton = el.querySelector(".first") as ActionButton;
-		const secondButton = el.querySelector(".second") as ActionButton;
-
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button not selected").to.be.false;
-
-		el.selected = ["second"];
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-		expect(firstButton.selected, "first button not selected").to.be.false;
-		expect(secondButton.selected, "second button selected").to.be.true;
-	});
-
-	it("does not allow interaction with child content to interrupt the selection mechanism", async () => {
-		const el = await singleSelectedActionGroup([]);
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(0);
-
-		const firstButton = el.querySelector(".first") as ActionButton;
-		const secondButton = el.querySelector(".second") as ActionButton;
-		const icon = secondButton.querySelector("[slot=icon]") as HTMLElement;
-
-		expect(firstButton.selected, "first button selected").to.be.false;
-		expect(secondButton.selected, "second button not selected").to.be.false;
-
-		secondButton.click();
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected).to.deep.equal(["second"]);
-		expect(firstButton.selected, "first button not selected").to.be.false;
-		expect(secondButton.selected, "second button selected").to.be.true;
-
-		firstButton.click();
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected).to.deep.equal(["first"]);
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button not selected").to.be.false;
-
-		const rect = icon.getBoundingClientRect();
-
-		await sendMouse({
-			steps: [
-				{
-					type: "click",
-					position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
-				},
-			],
-		});
-		icon.click();
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected).to.deep.equal(["second"]);
-		expect(firstButton.selected, "first button not selected").to.be.false;
-		expect(secondButton.selected, "second button selected").to.be.true;
-	});
-
-	it('selects user-passed value while [selects="multiple"]', async () => {
-		const el = await fixture(html`
-			
-				 First 
-				
-					Second
-				
-				
-					Third
-				
-			
-		`);
-
-		await elementUpdated(el);
-
-		await Promise.all(el.buttons.map((button) => elementUpdated(button)));
-
-		const firstButton = el.querySelector(".first") as ActionButton;
-		const secondButton = el.querySelector(".second") as ActionButton;
-		const thirdButton = el.querySelector(".third") as ActionButton;
-
-		expect(el.selected.length).to.equal(2);
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button selected").to.be.true;
-		expect(thirdButton.selected, "third button not selected").to.be.false;
-
-		thirdButton.click();
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(3);
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button selected").to.be.true;
-		expect(thirdButton.selected, "third button selected").to.be.true;
-
-		firstButton.click();
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(2);
-		expect(firstButton.selected, "first button not selected").to.be.false;
-		expect(secondButton.selected, "second button selected").to.be.true;
-		expect(thirdButton.selected, "third button selected").to.be.true;
-	});
-
-	it('selects can be updated while [selects="multiple"]', async () => {
-		const el = await fixture(html`
-			
-				 First 
-				
-					Second
-				
-				
-					Third
-				
-			
-		`);
-
-		await elementUpdated(el);
-
-		await Promise.all(el.buttons.map((button) => elementUpdated(button)));
-
-		const firstButton = el.querySelector(".first") as ActionButton;
-		const secondButton = el.querySelector(".second") as ActionButton;
-		const thirdButton = el.querySelector(".third") as ActionButton;
-
-		expect(el.selected.length).to.equal(2);
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button selected").to.be.true;
-		expect(thirdButton.selected, "third button not selected").to.be.false;
-
-		el.selected = ["first", "second", "third"];
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(3);
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button selected").to.be.true;
-		expect(thirdButton.selected, "third button selected").to.be.true;
-
-		el.selected = ["second", "third"];
-		await elementUpdated(el);
-
-		expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2);
-		expect(firstButton.selected, "first button not selected").to.be.false;
-		expect(secondButton.selected, "second button selected").to.be.true;
-		expect(thirdButton.selected, "third button selected").to.be.true;
-	});
-
-	it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality', async () => {
-		const el = await singleSelectedActionGroup(["first", "second"]);
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(2);
-
-		const firstButton = el.querySelector(".first") as ActionButton;
-		const secondButton = el.querySelector(".second") as ActionButton;
-
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button selected").to.be.true;
-
-		secondButton.click();
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-		expect(firstButton.selected, "first button selected").to.be.false;
-		expect(secondButton.selected, "second button selected").to.be.true;
-	});
-
-	it("Clicking button event should bubble up from inner label to outer button element", async () => {
-		const el = await fixture(html`
-			
-				 First 
-				
-					Second
-				
-			
-		`);
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(2);
-
-		const firstButtonEl = el.querySelector(".first") as ActionButton;
-		const firstSpanEl = firstButtonEl.shadowRoot.querySelector(
-			"#label",
-		) as HTMLSpanElement;
-		const secondButtonEl = el.querySelector(".second") as ActionButton;
-
-		expect(firstButtonEl.selected, "first button selected").to.be.true;
-		expect(secondButtonEl.selected, "second button selected").to.be.true;
-
-		firstSpanEl.click(); // clicking inner span bubbles up and fires outer button click
-		await elementUpdated(el);
-
-		expect(firstButtonEl.selected, "first button selected").to.be.false;
-		expect(secondButtonEl.selected, "second button selected").to.be.true;
-
-		firstButtonEl.click(); // clicking outer action-button element fires own click event
-		await elementUpdated(el);
-
-		expect(firstButtonEl.selected, "first button selected").to.be.true;
-		expect(secondButtonEl.selected, "second button selected").to.be.true;
-	});
-
-	it('only selects user-passed buttons if present in action-group while [selects="multiple"]', async () => {
-		const el = await multipleSelectedActionGroup(["second", "fourth"]);
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-		const secondButton = el.querySelector(".second") as ActionButton;
-
-		expect(secondButton.selected, "second button selected").to.be.true;
-
-		const firstButton = el.querySelector(".first") as ActionButton;
-
-		expect(firstButton.selected, "first button selected").to.be.false;
-	});
-
-	it("selects user-passed values with no .selects value, but does not allow interaction afterwards", async () => {
-		const el = await fixture(html`
-			
-				 First 
-				
-					Second
-				
-			
-		`);
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-		const firstButton = el.querySelector(".first") as ActionButton;
-		const secondButton = el.querySelector(".second") as ActionButton;
-
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button selected").to.be.false;
-
-		secondButton.click();
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(secondButton.selected, "second button selected").to.be.false;
-	});
-
-	it("selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards", async () => {
-		const el = await fixture(html`
-			
-				 First 
-				
-					Second
-				
-			
-		`);
-
-		await elementUpdated(el);
-		expect(el.getAttribute("role")).to.equal("toolbar");
-		expect(el.selected.length).to.equal(2);
-
-		const firstButton = el.querySelector(".first") as ActionButton;
-
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(firstButton.hasAttribute("aria-checked")).to.be.false;
-		expect(
-			firstButton.getAttribute("aria-pressed"),
-			"first button aria-pressed",
-		).to.eq("true");
-		expect(firstButton.getAttribute("role"), "first button role").to.eq(
-			"button",
-		);
-
-		const secondButton = el.querySelector(".second") as ActionButton;
-
-		expect(secondButton.selected, "second button selected").to.be.true;
-		expect(secondButton.hasAttribute("aria-checked")).to.be.false;
-		expect(
-			secondButton.getAttribute("aria-pressed"),
-			"second button aria-pressed",
-		).to.eq("true");
-		expect(secondButton.getAttribute("role"), "first button role").to.eq(
-			"button",
-		);
-
-		firstButton.click();
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(2);
-		expect(firstButton.selected, "first button selected").to.be.true;
-		expect(firstButton.hasAttribute("aria-checked")).to.be.false;
-		expect(
-			firstButton.getAttribute("aria-pressed"),
-			"first button aria-pressed",
-		).to.eq("true");
-		expect(firstButton.getAttribute("role"), "first button role").to.eq(
-			"button",
-		);
-
-		expect(secondButton.selected, "second button selected").to.be.true;
-		expect(secondButton.hasAttribute("aria-checked")).to.be.false;
-		expect(
-			secondButton.getAttribute("aria-pressed"),
-			"second button aria-pressed",
-		).to.eq("true");
-		expect(secondButton.getAttribute("role"), "first button role").to.eq(
-			"button",
-		);
-	});
-
-	it('will not change .selected state if event is prevented while [selects="multiple"]', async () => {
-		const el = await fixture(html`
-			 {
-					event.preventDefault();
-				}}
-			>
-				 First 
-				
-					Second
-				
-				
-					Third
-				
-			
-		`);
-		const firstElement = el.querySelector(".first") as ActionButton;
-		const secondElement = el.querySelector(".second") as ActionButton;
-		const thirdElement = el.querySelector(".third") as ActionButton;
-
-		// checking if the first and second are selected
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(2);
-		expect(firstElement.selected, "first child selected").to.be.true;
-		expect(secondElement.selected, "second child selected").to.be.true;
-
-		// making sure third element isn't selected
-		thirdElement.click();
-		await elementUpdated(el);
-		expect(thirdElement.selected, "third child not selected").to.be.false;
-		expect(el.selected.length).to.equal(2);
-
-		// making sure already-selected elements are not de-selected
-		secondElement.click();
-		await elementUpdated(el);
-
-		expect(secondElement.selected, "second element still selected").to.be.true;
-	});
-
-	it('will not change .selected state if event is prevented while [selects="single"]', async () => {
-		const el = await fixture(html`
-			 {
-					event.preventDefault();
-				}}
-			>
-				 First 
-				
-					Second
-				
-			
-		`);
-		const firstElement = el.querySelector(".first") as ActionButton;
-		const secondElement = el.querySelector(".second") as ActionButton;
-
-		// checking if the first element is selected
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-		expect(firstElement.selected, "first child selected").to.be.true;
-
-		// making sure third element isn't selected
-		secondElement.click();
-
-		await elementUpdated(el);
-
-		expect(secondElement.selected, "second child not selected").to.be.false;
-		expect(el.selected.length).to.equal(1);
-
-		// making sure already-selected elements are not de-selected
-		firstElement.click();
-		await elementUpdated(el);
-
-		expect(firstElement.selected, "first element still selected").to.be.true;
-	});
-
-	it("will not change .selected state if event is prevented while selects is undefined", async () => {
-		const el = await fixture(html`
-			 {
-					event.preventDefault();
-				}}
-			>
-				 First 
-				
-					Second
-				
-			
-		`);
-		const firstElement = el.querySelector(".first") as ActionButton;
-		const secondElement = el.querySelector(".second") as ActionButton;
-
-		// checking if the first element is selected
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-		expect(firstElement.selected, "first child selected").to.be.true;
-
-		secondElement.click();
-		await elementUpdated(el);
-
-		// state should be exactly the same
-		expect(el.selected.length).to.equal(1);
-		expect(firstElement.selected, "first child selected").to.be.true;
-		expect(secondElement.selected, "second child not selected").to.be.false;
-	});
-
-	it("manages a `size` attribute", async () => {
-		const el = await fixture(html`
-			
-				Button
-			
-		`);
-
-		const button = el.querySelector("sp-action-button") as ActionButton;
-
-		await elementUpdated(el);
-		expect(el.size).to.equal("xl");
-		expect(button.size).to.equal("xl");
-		expect(el.getAttribute("size")).to.equal("xl");
-		expect(button.getAttribute("size")).to.equal("xl");
-		el.removeAttribute("size");
-		await elementUpdated(el);
-		expect(el.size).to.equal("m");
-		expect(el.hasAttribute("size")).to.be.false;
-		expect(button.size).to.equal("m");
-		expect(button.getAttribute("size")).to.equal("m");
-	});
-
-	it("does not apply a default `size` attribute", async () => {
-		const el = await fixture(html`
-			
-				Button
-			
-		`);
-
-		const button = el.querySelector("sp-action-button") as ActionButton;
-
-		await elementUpdated(el);
-		expect(el.size).to.equal("m");
-		expect(button.size).to.equal("m");
-		expect(el.hasAttribute("size")).to.be.false;
-		expect(button.hasAttribute("size")).to.be.false;
-	});
-
-	it("will accept selected as a JSON string", async () => {
-		const el = await fixture(html`
-			
-				 First 
-				
-					Second
-				
-			
-		`);
-
-		// checking if the first element is selected
-		await elementUpdated(el);
-		const firstElement = el.querySelector(".first") as ActionButton;
-		const secondElement = el.querySelector(".second") as ActionButton;
-
-		expect(el.selected.length).to.equal(1);
-		expect(firstElement.selected, "first child selected").to.be.true;
-		expect(secondElement.selected, "second child selected").to.be.false;
-	});
-
-	it("accepts role attribute override", async () => {
-		const el = await fixture(html`
-			
-				Button
-			
-		`);
-
-		// with a role of group, the role should not be overridden
-		await elementUpdated(el);
-		expect(el.getAttribute("role")).to.equal("group");
-
-		// setting selects to single should override role to radiogroup
-		el.setAttribute("selects", "single");
-		await elementUpdated(el);
-		expect(el.getAttribute("role")).to.equal("radiogroup");
-
-		// setting selects to multiple should override role to toolbar
-		el.setAttribute("selects", "multiple");
-		await elementUpdated(el);
-		expect(el.getAttribute("role")).to.equal("toolbar");
-
-		// by default, role should be toolbar
-		el.removeAttribute("role");
-		el.removeAttribute("selects");
-		await elementUpdated(el);
-		expect(el.getAttribute("role")).to.equal("toolbar");
-	});
-
-	const acceptKeyboardInput = async (el: ActionGroup): Promise => {
-		const thirdElement = el.querySelector(".third") as ActionButton;
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("Second");
-
-		thirdElement.focus();
-		thirdElement.click();
-
-		await elementUpdated(el);
-
-		expect(thirdElement.selected, "third child selected").to.be.true;
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("Third");
-
-		el.dispatchEvent(arrowRightEvent());
-		await sendKeys({ press: "Enter" });
-
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("First");
-
-		el.dispatchEvent(arrowLeftEvent());
-		el.dispatchEvent(arrowUpEvent());
-		await sendKeys({ press: "Enter" });
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("Second");
-
-		el.dispatchEvent(endEvent());
-		await sendKeys({ press: "Enter" });
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("Third");
-
-		await sendKeys({ press: "Enter" });
-
-		el.dispatchEvent(homeEvent());
-		await sendKeys({ press: "Enter" });
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("First");
-
-		el.dispatchEvent(arrowDownEvent());
-		await sendKeys({ press: "Enter" });
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("Second");
-	};
-
-	it("accepts keybord input", async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-
-		await acceptKeyboardInput(el);
-	});
-	it("accepts keybord input with tooltip", async () => {
-		const el = await fixture(html`
-			
-				
-					First
-					
-						Definitely the first one.
-					
-				
-				
-					 Second 
-					
-						Not the first, not the last.
-					
-				
-				
-					
-						Third
-					
-					Select me.
-				
-			
-		`);
-
-		await acceptKeyboardInput(el);
-	});
-	it('accepts keybord input when [dir="ltr"]', async () => {
-		const el = await fixture(html`
-			
-				First
-				Second
-				Third
-			
-		`);
-		const thirdElement = el.querySelector(".third") as ActionButton;
-
-		await elementUpdated(el);
-		expect(el.selected.length).to.equal(0);
-
-		thirdElement.focus();
-		thirdElement.click();
-
-		await elementUpdated(el);
-
-		expect(thirdElement.selected, "third child selected").to.be.true;
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("Third");
-
-		el.dispatchEvent(arrowRightEvent());
-		await sendKeys({ press: "Enter" });
-
-		await elementUpdated(el);
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("First");
-
-		el.dispatchEvent(arrowUpEvent());
-		await sendKeys({ press: "Enter" });
-
-		expect(el.selected.length).to.equal(1);
-		expect(el.selected[0]).to.equal("Third");
-	});
-	it("processes `selects` correctly when mutations occur (because Overlays/Tooltips)", async () => {
-		const test = await fixture(controlled());
-		const actionButtons = [
-			...test.shadowRoot.querySelectorAll("sp-action-button"),
-		] as ActionButton[];
-
-		expect(actionButtons[0].selected).to.be.true;
-		expect(actionButtons[1].selected).to.be.false;
-		expect(actionButtons[2].selected).to.be.false;
-
-		const changeSpy = spy();
-
-		test.addEventListener("change", () => changeSpy());
-		const rect = actionButtons[1].getBoundingClientRect();
-
-		sendMouse({
-			steps: [
-				{
-					position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
-					type: "click",
-				},
-			],
-		});
-
-		await aTimeout(500);
-
-		expect(actionButtons[0].selected).to.be.false;
-		expect(actionButtons[1].selected).to.be.true;
-		expect(actionButtons[2].selected).to.be.false;
-	});
+    const el = shadowRoot.querySelector("sp-action-group") as ActionGroup;
+
+    await elementUpdated(el);
+
+    expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
+    expect(firstItem.selected).to.be.false;
+    expect(thirdItem.selected).to.be.true;
+
+    firstItem.click();
+    await elementUpdated(el);
+
+    expect(el.selected, '"First" selected').to.deep.equal(["First"]);
+    expect(firstItem.selected).to.be.true;
+    expect(thirdItem.selected).to.be.false;
+  });
+  it('surfaces [selects="multiple"] selection', async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.selected, '"Second" and "Third" selected').to.deep.equal([
+      "Second",
+      "Third",
+    ]);
+  });
+  it("does not select without [selects]", async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+    const thirdElement = el.querySelector(".third") as ActionButton;
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+
+    thirdElement.click();
+
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+  });
+  it('selects via `click` while [selects="single"]', async () => {
+    const el = await fixture(html`
+      
+        First
+         Second 
+         Third 
+      
+    `);
+    const thirdElement = el.querySelector(".third") as ActionButton;
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected.includes("second"));
+
+    thirdElement.click();
+
+    await elementUpdated(el);
+
+    expect(thirdElement.selected, "third child selected").to.be.true;
+
+    await waitUntil(
+      () => el.selected.length === 1 && el.selected.includes("third"),
+      "Updates value of `selected`",
+    );
+  });
+  it('selects via `click` while  [selects="multiple"] selection', async () => {
+    const el = await fixture(html`
+      
+         First 
+        Second
+        Third
+      
+    `);
+    const firstElement = el.querySelector(".first") as ActionButton;
+    const secondElement = el.querySelector(".second") as ActionButton;
+    const thirdElement = el.querySelector(".third") as ActionButton;
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected.includes("First"));
+
+    firstElement.click();
+    secondElement.click();
+    thirdElement.click();
+
+    await elementUpdated(el);
+
+    expect(secondElement.selected, "second child selected").to.be.true;
+    expect(thirdElement.selected, "third child selected").to.be.true;
+
+    await waitUntil(
+      () =>
+        el.selected.length === 2 &&
+        el.selected.includes("Second") &&
+        el.selected.includes("Third"),
+      "Updates value of `selected`",
+    );
+  });
+  it("consumes descendant `change` events when `[selects]`", async () => {
+    const changeSpy = spy();
+    const el = await fixture(html`
+       changeSpy()}
+        label="Selects Single Group"
+        selects="single"
+      >
+        First
+        
+          Second
+        
+        
+          Third
+        
+      
+    `);
+    const thirdElement = el.querySelector(".third") as ActionButton;
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected.includes("second"));
+    expect(changeSpy.callCount).to.equal(0);
+
+    thirdElement.click();
+
+    await elementUpdated(el);
+
+    expect(thirdElement.selected, "third child selected").to.be.true;
+    expect(changeSpy.callCount).to.equal(1);
+
+    await waitUntil(
+      () => el.selected.length === 1 && el.selected.includes("third"),
+      "Updates value of `selected`",
+    );
+  });
+  it("does not respond to clicks on itself", async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(0);
+
+    el.click();
+
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(0);
+  });
+  it("selection can be prevented", async () => {
+    const el = await fixture(html`
+       {
+          event.preventDefault();
+        }}
+      >
+        First
+        Second
+        Third
+      
+    `);
+    const thirdElement = el.querySelector(".third") as ActionButton;
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(0);
+
+    thirdElement.click();
+
+    await elementUpdated(el);
+
+    expect(thirdElement.selected, "third child not selected").to.be.false;
+    expect(el.selected.length).to.equal(0);
+  });
+
+  it('selects user-passed value while [selects="single"]', async () => {
+    const el = await singleSelectedActionGroup(["first"]);
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+
+    const firstButton = el.querySelector(".first") as ActionButton;
+    const secondButton = el.querySelector(".second") as ActionButton;
+
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button not selected").to.be.false;
+
+    secondButton.click();
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+  });
+
+  it('selects can be updated while [selects="single"]', async () => {
+    const el = await singleSelectedActionGroup(["first"]);
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+
+    const firstButton = el.querySelector(".first") as ActionButton;
+    const secondButton = el.querySelector(".second") as ActionButton;
+
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button not selected").to.be.false;
+
+    el.selected = ["second"];
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+  });
+
+  it("does not allow interaction with child content to interrupt the selection mechanism", async () => {
+    const el = await singleSelectedActionGroup([]);
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(0);
+
+    const firstButton = el.querySelector(".first") as ActionButton;
+    const secondButton = el.querySelector(".second") as ActionButton;
+    const icon = secondButton.querySelector("[slot=icon]") as HTMLElement;
+
+    expect(firstButton.selected, "first button selected").to.be.false;
+    expect(secondButton.selected, "second button not selected").to.be.false;
+
+    secondButton.click();
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected).to.deep.equal(["second"]);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+
+    firstButton.click();
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected).to.deep.equal(["first"]);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button not selected").to.be.false;
+
+    const rect = icon.getBoundingClientRect();
+
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+        },
+      ],
+    });
+    icon.click();
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected).to.deep.equal(["second"]);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+  });
+
+  it('selects user-passed value while [selects="multiple"]', async () => {
+    const el = await fixture(html`
+      
+         First 
+        
+          Second
+        
+        
+          Third
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    await Promise.all(el.buttons.map((button) => elementUpdated(button)));
+
+    const firstButton = el.querySelector(".first") as ActionButton;
+    const secondButton = el.querySelector(".second") as ActionButton;
+    const thirdButton = el.querySelector(".third") as ActionButton;
+
+    expect(el.selected.length).to.equal(2);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button not selected").to.be.false;
+
+    thirdButton.click();
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(3);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button selected").to.be.true;
+
+    firstButton.click();
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(2);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button selected").to.be.true;
+  });
+
+  it('selects can be updated while [selects="multiple"]', async () => {
+    const el = await fixture(html`
+      
+         First 
+        
+          Second
+        
+        
+          Third
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    await Promise.all(el.buttons.map((button) => elementUpdated(button)));
+
+    const firstButton = el.querySelector(".first") as ActionButton;
+    const secondButton = el.querySelector(".second") as ActionButton;
+    const thirdButton = el.querySelector(".third") as ActionButton;
+
+    expect(el.selected.length).to.equal(2);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button not selected").to.be.false;
+
+    el.selected = ["first", "second", "third"];
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(3);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button selected").to.be.true;
+
+    el.selected = ["second", "third"];
+    await elementUpdated(el);
+
+    expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2);
+    expect(firstButton.selected, "first button not selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(thirdButton.selected, "third button selected").to.be.true;
+  });
+
+  it('selects multiple user-passed values while [selects="single"], but then proceeds with radio-button style functionality', async () => {
+    const el = await singleSelectedActionGroup(["first", "second"]);
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(2);
+
+    const firstButton = el.querySelector(".first") as ActionButton;
+    const secondButton = el.querySelector(".second") as ActionButton;
+
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.true;
+
+    secondButton.click();
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+    expect(firstButton.selected, "first button selected").to.be.false;
+    expect(secondButton.selected, "second button selected").to.be.true;
+  });
+
+  it("Clicking button event should bubble up from inner label to outer button element", async () => {
+    const el = await fixture(html`
+      
+         First 
+        
+          Second
+        
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(2);
+
+    const firstButtonEl = el.querySelector(".first") as ActionButton;
+    const firstSpanEl = firstButtonEl.shadowRoot.querySelector(
+      "#label",
+    ) as HTMLSpanElement;
+    const secondButtonEl = el.querySelector(".second") as ActionButton;
+
+    expect(firstButtonEl.selected, "first button selected").to.be.true;
+    expect(secondButtonEl.selected, "second button selected").to.be.true;
+
+    firstSpanEl.click(); // clicking inner span bubbles up and fires outer button click
+    await elementUpdated(el);
+
+    expect(firstButtonEl.selected, "first button selected").to.be.false;
+    expect(secondButtonEl.selected, "second button selected").to.be.true;
+
+    firstButtonEl.click(); // clicking outer action-button element fires own click event
+    await elementUpdated(el);
+
+    expect(firstButtonEl.selected, "first button selected").to.be.true;
+    expect(secondButtonEl.selected, "second button selected").to.be.true;
+  });
+
+  it('only selects user-passed buttons if present in action-group while [selects="multiple"]', async () => {
+    const el = await multipleSelectedActionGroup(["second", "fourth"]);
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    const secondButton = el.querySelector(".second") as ActionButton;
+
+    expect(secondButton.selected, "second button selected").to.be.true;
+
+    const firstButton = el.querySelector(".first") as ActionButton;
+
+    expect(firstButton.selected, "first button selected").to.be.false;
+  });
+
+  it("selects user-passed values with no .selects value, but does not allow interaction afterwards", async () => {
+    const el = await fixture(html`
+      
+         First 
+        
+          Second
+        
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    const firstButton = el.querySelector(".first") as ActionButton;
+    const secondButton = el.querySelector(".second") as ActionButton;
+
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.false;
+
+    secondButton.click();
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(secondButton.selected, "second button selected").to.be.false;
+  });
+
+  it("selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards", async () => {
+    const el = await fixture(html`
+      
+         First 
+        
+          Second
+        
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.getAttribute("role")).to.equal("toolbar");
+    expect(el.selected.length).to.equal(2);
+
+    const firstButton = el.querySelector(".first") as ActionButton;
+
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(firstButton.hasAttribute("aria-checked")).to.be.false;
+    expect(
+      firstButton.getAttribute("aria-pressed"),
+      "first button aria-pressed",
+    ).to.eq("true");
+    expect(firstButton.getAttribute("role"), "first button role").to.eq(
+      "button",
+    );
+
+    const secondButton = el.querySelector(".second") as ActionButton;
+
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(secondButton.hasAttribute("aria-checked")).to.be.false;
+    expect(
+      secondButton.getAttribute("aria-pressed"),
+      "second button aria-pressed",
+    ).to.eq("true");
+    expect(secondButton.getAttribute("role"), "first button role").to.eq(
+      "button",
+    );
+
+    firstButton.click();
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(2);
+    expect(firstButton.selected, "first button selected").to.be.true;
+    expect(firstButton.hasAttribute("aria-checked")).to.be.false;
+    expect(
+      firstButton.getAttribute("aria-pressed"),
+      "first button aria-pressed",
+    ).to.eq("true");
+    expect(firstButton.getAttribute("role"), "first button role").to.eq(
+      "button",
+    );
+
+    expect(secondButton.selected, "second button selected").to.be.true;
+    expect(secondButton.hasAttribute("aria-checked")).to.be.false;
+    expect(
+      secondButton.getAttribute("aria-pressed"),
+      "second button aria-pressed",
+    ).to.eq("true");
+    expect(secondButton.getAttribute("role"), "first button role").to.eq(
+      "button",
+    );
+  });
+
+  it('will not change .selected state if event is prevented while [selects="multiple"]', async () => {
+    const el = await fixture(html`
+       {
+          event.preventDefault();
+        }}
+      >
+         First 
+        
+          Second
+        
+        
+          Third
+        
+      
+    `);
+    const firstElement = el.querySelector(".first") as ActionButton;
+    const secondElement = el.querySelector(".second") as ActionButton;
+    const thirdElement = el.querySelector(".third") as ActionButton;
+
+    // checking if the first and second are selected
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(2);
+    expect(firstElement.selected, "first child selected").to.be.true;
+    expect(secondElement.selected, "second child selected").to.be.true;
+
+    // making sure third element isn't selected
+    thirdElement.click();
+    await elementUpdated(el);
+    expect(thirdElement.selected, "third child not selected").to.be.false;
+    expect(el.selected.length).to.equal(2);
+
+    // making sure already-selected elements are not de-selected
+    secondElement.click();
+    await elementUpdated(el);
+
+    expect(secondElement.selected, "second element still selected").to.be.true;
+  });
+
+  it('will not change .selected state if event is prevented while [selects="single"]', async () => {
+    const el = await fixture(html`
+       {
+          event.preventDefault();
+        }}
+      >
+         First 
+        
+          Second
+        
+      
+    `);
+    const firstElement = el.querySelector(".first") as ActionButton;
+    const secondElement = el.querySelector(".second") as ActionButton;
+
+    // checking if the first element is selected
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(firstElement.selected, "first child selected").to.be.true;
+
+    // making sure third element isn't selected
+    secondElement.click();
+
+    await elementUpdated(el);
+
+    expect(secondElement.selected, "second child not selected").to.be.false;
+    expect(el.selected.length).to.equal(1);
+
+    // making sure already-selected elements are not de-selected
+    firstElement.click();
+    await elementUpdated(el);
+
+    expect(firstElement.selected, "first element still selected").to.be.true;
+  });
+
+  it("will not change .selected state if event is prevented while selects is undefined", async () => {
+    const el = await fixture(html`
+       {
+          event.preventDefault();
+        }}
+      >
+         First 
+        
+          Second
+        
+      
+    `);
+    const firstElement = el.querySelector(".first") as ActionButton;
+    const secondElement = el.querySelector(".second") as ActionButton;
+
+    // checking if the first element is selected
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(firstElement.selected, "first child selected").to.be.true;
+
+    secondElement.click();
+    await elementUpdated(el);
+
+    // state should be exactly the same
+    expect(el.selected.length).to.equal(1);
+    expect(firstElement.selected, "first child selected").to.be.true;
+    expect(secondElement.selected, "second child not selected").to.be.false;
+  });
+
+  it("manages a `size` attribute", async () => {
+    const el = await fixture(html`
+      
+        Button
+      
+    `);
+
+    const button = el.querySelector("sp-action-button") as ActionButton;
+
+    await elementUpdated(el);
+    expect(el.size).to.equal("xl");
+    expect(button.size).to.equal("xl");
+    expect(el.getAttribute("size")).to.equal("xl");
+    expect(button.getAttribute("size")).to.equal("xl");
+    el.removeAttribute("size");
+    await elementUpdated(el);
+    expect(el.size).to.equal("m");
+    expect(el.hasAttribute("size")).to.be.false;
+    expect(button.size).to.equal("m");
+    expect(button.getAttribute("size")).to.equal("m");
+  });
+
+  it("does not apply a default `size` attribute", async () => {
+    const el = await fixture(html`
+      
+        Button
+      
+    `);
+
+    const button = el.querySelector("sp-action-button") as ActionButton;
+
+    await elementUpdated(el);
+    expect(el.size).to.equal("m");
+    expect(button.size).to.equal("m");
+    expect(el.hasAttribute("size")).to.be.false;
+    expect(button.hasAttribute("size")).to.be.false;
+  });
+
+  it("will accept selected as a JSON string", async () => {
+    const el = await fixture(html`
+      
+         First 
+        
+          Second
+        
+      
+    `);
+
+    // checking if the first element is selected
+    await elementUpdated(el);
+    const firstElement = el.querySelector(".first") as ActionButton;
+    const secondElement = el.querySelector(".second") as ActionButton;
+
+    expect(el.selected.length).to.equal(1);
+    expect(firstElement.selected, "first child selected").to.be.true;
+    expect(secondElement.selected, "second child selected").to.be.false;
+  });
+
+  it("accepts role attribute override", async () => {
+    const el = await fixture(html`
+      
+        Button
+      
+    `);
+
+    // with a role of group, the role should not be overridden
+    await elementUpdated(el);
+    expect(el.getAttribute("role")).to.equal("group");
+
+    // setting selects to single should override role to radiogroup
+    el.setAttribute("selects", "single");
+    await elementUpdated(el);
+    expect(el.getAttribute("role")).to.equal("radiogroup");
+
+    // setting selects to multiple should override role to toolbar
+    el.setAttribute("selects", "multiple");
+    await elementUpdated(el);
+    expect(el.getAttribute("role")).to.equal("toolbar");
+
+    // by default, role should be toolbar
+    el.removeAttribute("role");
+    el.removeAttribute("selects");
+    await elementUpdated(el);
+    expect(el.getAttribute("role")).to.equal("toolbar");
+  });
+
+  const acceptKeyboardInput = async (el: ActionGroup): Promise => {
+    const thirdElement = el.querySelector(".third") as ActionButton;
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Second");
+
+    thirdElement.focus();
+    thirdElement.click();
+
+    await elementUpdated(el);
+
+    expect(thirdElement.selected, "third child selected").to.be.true;
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Third");
+
+    el.dispatchEvent(arrowRightEvent());
+    await sendKeys({ press: "Enter" });
+
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("First");
+
+    el.dispatchEvent(arrowLeftEvent());
+    el.dispatchEvent(arrowUpEvent());
+    await sendKeys({ press: "Enter" });
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Second");
+
+    el.dispatchEvent(endEvent());
+    await sendKeys({ press: "Enter" });
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Third");
+
+    await sendKeys({ press: "Enter" });
+
+    el.dispatchEvent(homeEvent());
+    await sendKeys({ press: "Enter" });
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("First");
+
+    el.dispatchEvent(arrowDownEvent());
+    await sendKeys({ press: "Enter" });
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Second");
+  };
+
+  it("accepts keybord input", async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await acceptKeyboardInput(el);
+  });
+  it("accepts keybord input with tooltip", async () => {
+    const el = await fixture(html`
+      
+        
+          First
+          
+            Definitely the first one.
+          
+        
+        
+           Second 
+          
+            Not the first, not the last.
+          
+        
+        
+          
+            Third
+          
+          Select me.
+        
+      
+    `);
+
+    await acceptKeyboardInput(el);
+  });
+  it('accepts keybord input when [dir="ltr"]', async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+    const thirdElement = el.querySelector(".third") as ActionButton;
+
+    await elementUpdated(el);
+    expect(el.selected.length).to.equal(0);
+
+    thirdElement.focus();
+    thirdElement.click();
+
+    await elementUpdated(el);
+
+    expect(thirdElement.selected, "third child selected").to.be.true;
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Third");
+
+    el.dispatchEvent(arrowRightEvent());
+    await sendKeys({ press: "Enter" });
+
+    await elementUpdated(el);
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("First");
+
+    el.dispatchEvent(arrowUpEvent());
+    await sendKeys({ press: "Enter" });
+
+    expect(el.selected.length).to.equal(1);
+    expect(el.selected[0]).to.equal("Third");
+  });
+  it("processes `selects` correctly when mutations occur (because Overlays/Tooltips)", async () => {
+    const test = await fixture(controlled());
+    const actionButtons = [
+      ...test.shadowRoot.querySelectorAll("sp-action-button"),
+    ] as ActionButton[];
+
+    expect(actionButtons[0].selected).to.be.true;
+    expect(actionButtons[1].selected).to.be.false;
+    expect(actionButtons[2].selected).to.be.false;
+
+    const changeSpy = spy();
+
+    test.addEventListener("change", () => changeSpy());
+    const rect = actionButtons[1].getBoundingClientRect();
+
+    sendMouse({
+      steps: [
+        {
+          position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+          type: "click",
+        },
+      ],
+    });
+
+    await aTimeout(500);
+
+    expect(actionButtons[0].selected).to.be.false;
+    expect(actionButtons[1].selected).to.be.true;
+    expect(actionButtons[2].selected).to.be.false;
+  });
 });
diff --git a/packages/action-group/test/benchmark/basic-test.ts b/packages/action-group/test/benchmark/basic-test.ts
index 466b744909..32efeaf05f 100644
--- a/packages/action-group/test/benchmark/basic-test.ts
+++ b/packages/action-group/test/benchmark/basic-test.ts
@@ -10,15 +10,15 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        Button 1
-        Button 2
-        Button 3
-    
+  
+    Button 1
+    Button 2
+    Button 3
+  
 `);
diff --git a/packages/action-menu/sp-action-menu.ts b/packages/action-menu/sp-action-menu.ts
index c5f903dbf4..d1348a79f9 100644
--- a/packages/action-menu/sp-action-menu.ts
+++ b/packages/action-menu/sp-action-menu.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ActionMenu } from './src/ActionMenu.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { ActionMenu } from "./src/ActionMenu.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-action-menu', ActionMenu);
+defineElement("sp-action-menu", ActionMenu);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-action-menu': ActionMenu;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-action-menu": ActionMenu;
+  }
 }
diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
index a280f3dd4e..86a641d1f3 100644
--- a/packages/action-menu/src/ActionMenu.ts
+++ b/packages/action-menu/src/ActionMenu.ts
@@ -11,21 +11,21 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { state } from '@spectrum-web-components/base/src/decorators.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
-import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
-import actionMenuStyles from './action-menu.css.js';
-import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { state } from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { DESCRIPTION_ID, PickerBase } from "@spectrum-web-components/picker";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
+import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";
+import actionMenuStyles from "./action-menu.css.js";
+import { SlottableRequestEvent } from "@spectrum-web-components/overlay/src/slottable-request-event.js";
 
 /**
  * @element sp-action-menu
@@ -40,126 +40,120 @@ import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slot
  *                      Use `selects="single"` to activate selection functionality in the menu.
  */
 export class ActionMenu extends ObserveSlotPresence(
-    ObserveSlotText(PickerBase, 'label'),
-    '[slot="label-only"]'
+  ObserveSlotText(PickerBase, "label"),
+  '[slot="label-only"]',
 ) {
-    public static override get styles(): CSSResultArray {
-        return [actionMenuStyles];
-    }
-
-    /**
-     * Defines the selection mode for the action menu.
-     * Can be 'single' for single selection or undefined for no selection management.
-     */
-    @property({ type: String })
-    public override selects: undefined | 'single' = undefined;
+  public static override get styles(): CSSResultArray {
+    return [actionMenuStyles];
+  }
 
-    /**
-     * Defines the static color variant for the action menu.
-     * Can be 'white' or 'black'.
-     */
-    @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white' | 'black';
+  /**
+   * Defines the selection mode for the action menu.
+   * Can be 'single' for single selection or undefined for no selection management.
+   */
+  @property({ type: String })
+  public override selects: undefined | "single" = undefined;
 
-    /*
-     * Defines the role of the list element
-     */
-    protected override listRole: 'listbox' | 'menu' = 'menu';
+  /**
+   * Defines the static color variant for the action menu.
+   * Can be 'white' or 'black'.
+   */
+  @property({ reflect: true, attribute: "static-color" })
+  public staticColor?: "white" | "black";
 
-    /*
-     * Defines the role of the item elements
-     */
-    protected override itemRole = 'menuitem';
+  /*
+   * Defines the role of the list element
+   */
+  protected override listRole: "listbox" | "menu" = "menu";
 
-    /*
-     * Whether the label slot has content
-     */
-    private get hasLabel(): boolean {
-        return this.slotHasContent;
-    }
+  /*
+   * Defines the role of the item elements
+   */
+  protected override itemRole = "menuitem";
 
-    @state()
-    private get labelOnly(): boolean {
-        return this.slotContentIsPresent;
-    }
+  /*
+   * Whether the label slot has content
+   */
+  private get hasLabel(): boolean {
+    return this.slotHasContent;
+  }
 
-    /**
-     * Handles slottable request events and re-dispatches them.
-     */
-    public override handleSlottableRequest = (
-        event: SlottableRequestEvent
-    ): void => {
-        this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));
-    };
+  @state()
+  private get labelOnly(): boolean {
+    return this.slotContentIsPresent;
+  }
 
-    /*
-     * Retrieves the content to be rendered inside the button.
-     */
-    protected override get buttonContent(): TemplateResult[] {
-        return [
-            html`
-                ${this.labelOnly
-                    ? html``
-                    : html`
-                          
-                              
-                          
-                      `}
-                
-                
-                
-            `,
-        ];
-    }
+  /**
+   * Handles slottable request events and re-dispatches them.
+   */
+  public override handleSlottableRequest = (
+    event: SlottableRequestEvent,
+  ): void => {
+    this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));
+  };
 
-    protected override render(): TemplateResult {
-        if (this.tooltipEl) {
-            this.tooltipEl.disabled = this.open;
-        }
+  /*
+   * Retrieves the content to be rendered inside the button.
+   */
+  protected override get buttonContent(): TemplateResult[] {
+    return [
+      html`
+        ${this.labelOnly
+          ? html``
+          : html`
+              
+                
+              
+            `}
+        
+        
+        
+      `,
+    ];
+  }
 
-        return html`
-            
-                ${this.buttonContent}
-            
-            ${this.renderMenu} ${this.renderDescriptionSlot}
-        `;
+  protected override render(): TemplateResult {
+    if (this.tooltipEl) {
+      this.tooltipEl.disabled = this.open;
     }
 
-    protected override update(changedProperties: PropertyValues): void {
-        if (changedProperties.has('invalid')) {
-            this.invalid = false;
-        }
+    return html`
+      
+        ${this.buttonContent}
+      
+      ${this.renderMenu} ${this.renderDescriptionSlot}
+    `;
+  }
 
-        super.update(changedProperties);
+  protected override update(changedProperties: PropertyValues): void {
+    if (changedProperties.has("invalid")) {
+      this.invalid = false;
     }
+
+    super.update(changedProperties);
+  }
 }
diff --git a/packages/action-menu/src/index.ts b/packages/action-menu/src/index.ts
index 53d210d1e4..15c950f529 100644
--- a/packages/action-menu/src/index.ts
+++ b/packages/action-menu/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './ActionMenu.js';
+export * from "./ActionMenu.js";
diff --git a/packages/action-menu/stories/action-menu-sizes.stories.ts b/packages/action-menu/stories/action-menu-sizes.stories.ts
index 92a449553a..df88119113 100644
--- a/packages/action-menu/stories/action-menu-sizes.stories.ts
+++ b/packages/action-menu/stories/action-menu-sizes.stories.ts
@@ -18,26 +18,26 @@ import "../../overlay/stories/index.js";
 import { ActionMenuMarkup } from ".//index.js";
 
 export default {
-	title: "Action menu/Sizes",
-	component: "sp-action-menu",
+  title: "Action menu/Sizes",
+  component: "sp-action-menu",
 };
 
 export const s = (): TemplateResult => ActionMenuMarkup({ size: "s" });
 export const sOpen = (): TemplateResult =>
-	ActionMenuMarkup({ size: "s", open: true });
+  ActionMenuMarkup({ size: "s", open: true });
 sOpen.decorators = [isOverlayOpen];
 
 export const m = (): TemplateResult => ActionMenuMarkup({ size: "m" });
 export const mOpen = (): TemplateResult =>
-	ActionMenuMarkup({ size: "m", open: true });
+  ActionMenuMarkup({ size: "m", open: true });
 mOpen.decorators = [isOverlayOpen];
 
 export const l = (): TemplateResult => ActionMenuMarkup({ size: "l" });
 export const lOpen = (): TemplateResult =>
-	ActionMenuMarkup({ size: "l", open: true });
+  ActionMenuMarkup({ size: "l", open: true });
 lOpen.decorators = [isOverlayOpen];
 
 export const XL = (): TemplateResult => ActionMenuMarkup({ size: "xl" });
 export const XLOpen = (): TemplateResult =>
-	ActionMenuMarkup({ size: "xl", open: true });
+  ActionMenuMarkup({ size: "xl", open: true });
 XLOpen.decorators = [isOverlayOpen];
diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts
index fd624a45b6..2274fa5061 100644
--- a/packages/action-menu/stories/action-menu.stories.ts
+++ b/packages/action-menu/stories/action-menu.stories.ts
@@ -30,471 +30,471 @@ import { Menu } from "@spectrum-web-components/menu";
 import type { ActionMenu } from "@spectrum-web-components/action-menu";
 
 export default {
-	component: "sp-action-menu",
-	title: "Action menu",
-	argTypes: {
-		onChange: { action: "change" },
-		disabled: {
-			name: "disabled",
-			type: { name: "boolean", required: false },
-			description: "Disable this control. It will not receive focus or events.",
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: {
-				type: "boolean",
-			},
-		},
-		open: {
-			name: "open",
-			type: { name: "boolean", required: false },
-			description: "Whether the menu is open or not.",
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: "boolean",
-		},
-		visibleLabel: {
-			name: "Visible Label",
-			description: "The placeholder content for the picker.",
-			type: { name: "string", required: false },
-			table: {
-				type: { summary: "string" },
-				defaultValue: { summary: "" },
-			},
-			control: "text",
-		},
-		tooltipDescription: {
-			name: "Tooltip Description",
-			type: { name: "string", required: false },
-			description: "Tooltip description",
-			table: {
-				type: { summary: "string" },
-				defaultValue: { summary: "" },
-			},
-			control: {
-				type: "text",
-			},
-		},
-		tooltipPlacement: {
-			name: "Tooltip Placement",
-			type: { name: "string", required: false },
-			description: "Tooltip Placement.",
-			table: {
-				defaultValue: { summary: "bottom" },
-			},
-			control: {
-				options: [
-					"auto",
-					"auto-start",
-					"auto-end",
-					"top",
-					"bottom",
-					"right",
-					"left",
-					"top-start",
-					"top-end",
-					"bottom-start",
-					"bottom-end",
-					"right-start",
-					"right-end",
-					"left-start",
-					"left-end",
-					"none",
-				],
-				type: "select",
-			},
-		},
-		quiet: {
-			name: "quiet",
-			type: { name: "boolean", required: false },
-			description: "Quiet rendering",
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: {
-				type: "boolean",
-			},
-		},
-		staticColorValue: {
-			name: "static-color",
-			type: { name: "string", required: false },
-			description: "The visual static color variant to apply to the button.",
-			table: {
-				type: { summary: "string" },
-				defaultValue: { summary: "none" },
-			},
-			control: {
-				type: "select",
-				labels: {
-					white: "white",
-					black: "black",
-					none: undefined,
-				},
-				options: ["white", "black", "none"],
-			},
-		},
-		align: {
-			name: "align",
-			type: { name: "string", required: false },
-			description: "Alignment of the Action Menu",
-			table: {
-				defaultValue: { summary: "start" },
-			},
-			control: {
-				type: "select",
-				labels: {
-					start: "start",
-					end: "end",
-				},
-			},
-			options: ["start", "end"],
-		},
-	},
-	args: {
-		align: "start",
-		visibleLabel: "More Actions",
-		disabled: false,
-		open: false,
-		quiet: false,
-		tooltipDescription: "",
-		tooltipPlacement: "bottom",
-		static: undefined,
-	},
+  component: "sp-action-menu",
+  title: "Action menu",
+  argTypes: {
+    onChange: { action: "change" },
+    disabled: {
+      name: "disabled",
+      type: { name: "boolean", required: false },
+      description: "Disable this control. It will not receive focus or events.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    open: {
+      name: "open",
+      type: { name: "boolean", required: false },
+      description: "Whether the menu is open or not.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: "boolean",
+    },
+    visibleLabel: {
+      name: "Visible Label",
+      description: "The placeholder content for the picker.",
+      type: { name: "string", required: false },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" },
+      },
+      control: "text",
+    },
+    tooltipDescription: {
+      name: "Tooltip Description",
+      type: { name: "string", required: false },
+      description: "Tooltip description",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" },
+      },
+      control: {
+        type: "text",
+      },
+    },
+    tooltipPlacement: {
+      name: "Tooltip Placement",
+      type: { name: "string", required: false },
+      description: "Tooltip Placement.",
+      table: {
+        defaultValue: { summary: "bottom" },
+      },
+      control: {
+        options: [
+          "auto",
+          "auto-start",
+          "auto-end",
+          "top",
+          "bottom",
+          "right",
+          "left",
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end",
+          "right-start",
+          "right-end",
+          "left-start",
+          "left-end",
+          "none",
+        ],
+        type: "select",
+      },
+    },
+    quiet: {
+      name: "quiet",
+      type: { name: "boolean", required: false },
+      description: "Quiet rendering",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    staticColorValue: {
+      name: "static-color",
+      type: { name: "string", required: false },
+      description: "The visual static color variant to apply to the button.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "none" },
+      },
+      control: {
+        type: "select",
+        labels: {
+          white: "white",
+          black: "black",
+          none: undefined,
+        },
+        options: ["white", "black", "none"],
+      },
+    },
+    align: {
+      name: "align",
+      type: { name: "string", required: false },
+      description: "Alignment of the Action Menu",
+      table: {
+        defaultValue: { summary: "start" },
+      },
+      control: {
+        type: "select",
+        labels: {
+          start: "start",
+          end: "end",
+        },
+      },
+      options: ["start", "end"],
+    },
+  },
+  args: {
+    align: "start",
+    visibleLabel: "More Actions",
+    disabled: false,
+    open: false,
+    quiet: false,
+    tooltipDescription: "",
+    tooltipPlacement: "bottom",
+    static: undefined,
+  },
 };
 
 interface StoryArgs {
-	align?: "start" | "end";
-	visibleLabel?: string;
-	disabled?: boolean;
-	open?: boolean;
-	customIcon?: string | TemplateResult;
-	selects?: "single";
-	selected?: boolean;
-	quiet?: boolean;
-	staticValue?: "white" | "black" | undefined;
-	tooltipDescription?: string | "none";
-	tooltipPlacement?: Placement;
+  align?: "start" | "end";
+  visibleLabel?: string;
+  disabled?: boolean;
+  open?: boolean;
+  customIcon?: string | TemplateResult;
+  selects?: "single";
+  selected?: boolean;
+  quiet?: boolean;
+  staticValue?: "white" | "black" | undefined;
+  tooltipDescription?: string | "none";
+  tooltipPlacement?: Placement;
 }
 
 const Template = (args: StoryArgs = {}): TemplateResult =>
-	ActionMenuMarkup(args);
+  ActionMenuMarkup(args);
 
 export const Default = (args: StoryArgs = {}): TemplateResult => Template(args);
 
 export const staticWhite = (args: StoryArgs = {}): TemplateResult =>
-	Template(args);
+  Template(args);
 staticWhite.args = {
-	staticValue: "white",
+  staticValue: "white",
 };
 staticWhite.decorators = [makeOverBackground()];
 export const staticBlack = (args: StoryArgs = {}): TemplateResult =>
-	Template(args);
+  Template(args);
 staticBlack.args = {
-	staticValue: "black",
+  staticValue: "black",
 };
 staticBlack.decorators = [makeOverBackground()];
 export const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);
 quiet.args = {
-	quiet: true,
+  quiet: true,
 };
 
 export const labelOnly = ({
-	align = "start",
-	changeHandler = (() => undefined) as (event: Event) => void,
-	disabled = false,
-	open = false,
-	size = "m" as "m" | "s" | "l" | "xl" | "xxl",
-	selects = "" as "single",
-	selected = false,
+  align = "start",
+  changeHandler = (() => undefined) as (event: Event) => void,
+  disabled = false,
+  open = false,
+  size = "m" as "m" | "s" | "l" | "xl" | "xxl",
+  selects = "" as "single",
+  selected = false,
 } = {}): TemplateResult => html`
-	 {
-			navigator.clipboard.writeText(event.target.value);
-			changeHandler(event);
-		}}
-		.selects=${selects ? selects : undefined}
-		value=${selected ? "Select Inverse" : ""}
-		style=${ifDefined(align === "end" ? "float: inline-end;" : undefined)}
-	>
-		Label Only
-		Deselect
-		Select Inverse
-		Feather...
-		Select and Mask...
-		
-		Save Selection
-		Make Work Path
-	
+   {
+      navigator.clipboard.writeText(event.target.value);
+      changeHandler(event);
+    }}
+    .selects=${selects ? selects : undefined}
+    value=${selected ? "Select Inverse" : ""}
+    style=${ifDefined(align === "end" ? "float: inline-end;" : undefined)}
+  >
+    Label Only
+    Deselect
+    Select Inverse
+    Feather...
+    Select and Mask...
+    
+    Save Selection
+    Make Work Path
+  
 `;
 
 export const selects = (args: StoryArgs = {}): TemplateResult =>
-	Template({
-		...args,
-		selects: "single",
-		selected: true,
-	});
+  Template({
+    ...args,
+    selects: "single",
+    selected: true,
+  });
 selects.args = {
-	open: true,
+  open: true,
 };
 selects.decorators = [isOverlayOpen];
 
 export const iconOnly = (args: StoryArgs = {}): TemplateResult =>
-	Template(args);
+  Template(args);
 iconOnly.args = {
-	visibleLabel: "",
+  visibleLabel: "",
 };
 
 export const tooltipDescriptionAndPlacement = (
-	args: StoryArgs = {},
+  args: StoryArgs = {},
 ): TemplateResult => Template(args);
 tooltipDescriptionAndPlacement.args = {
-	tooltipDescription: "Your tooltip string here",
-	visibleLabel: "",
-	tooltipPlacement: "bottom",
+  tooltipDescription: "Your tooltip string here",
+  visibleLabel: "",
+  tooltipPlacement: "bottom",
 } as StoryArgs;
 
 export const customIcon = (args: StoryArgs): TemplateResult => Template(args);
 customIcon.args = {
-	customIcon: html`  `,
-	visibleLabel: "",
+  customIcon: html`  `,
+  visibleLabel: "",
 };
 
 export const submenu = ({ align = "start" } = {}): TemplateResult => {
-	return html`
-		
-			One
-			Two
-			
-				Select some items
-				
-					A
-					B
-					C
-				
-			
-		
-	`;
+  return html`
+    
+      One
+      Two
+      
+        Select some items
+        
+          A
+          B
+          C
+        
+      
+    
+  `;
 };
 
 export const controlled = ({ align = "start" } = {}): TemplateResult => {
-	const state = {
-		snap: true,
-		grid: false,
-		guides: true,
-		latestChange: "",
-	};
+  const state = {
+    snap: true,
+    grid: false,
+    guides: true,
+    latestChange: "",
+  };
 
-	function toggle(prop: "snap" | "grid" | "guides") {
-		return (event: Event): void => {
-			const item = event.target as MenuItem;
+  function toggle(prop: "snap" | "grid" | "guides") {
+    return (event: Event): void => {
+      const item = event.target as MenuItem;
 
-			state[prop] = !state[prop];
-			// in Lit-based usage, this would be handled via render():
-			// 
-			item.selected = state[prop];
-		};
-	}
-	function onChange(event: Event): void {
-		state.latestChange = (event.target as MenuItem).value;
-		logState();
-	}
-	function logState(): void {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		document.getElementById("state-json")!.textContent =
-			`application state: ${JSON.stringify(state)}`;
-	}
+      state[prop] = !state[prop];
+      // in Lit-based usage, this would be handled via render():
+      // 
+      item.selected = state[prop];
+    };
+  }
+  function onChange(event: Event): void {
+    state.latestChange = (event.target as MenuItem).value;
+    logState();
+  }
+  function logState(): void {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    document.getElementById("state-json")!.textContent =
+      `application state: ${JSON.stringify(state)}`;
+  }
 
-	return html`
-		
-			 alert("action")}>
-				Non-selectable action
-			
-			
-				Snap
-			
-			
-				Show
-				 event.preventDefault()}
-				>
-					
-						Grid
-					
-					
-						Guides
-					
-				
-			
-		
-		
-	`;
+  return html`
+    
+       alert("action")}>
+        Non-selectable action
+      
+      
+        Snap
+      
+      
+        Show
+         event.preventDefault()}
+        >
+          
+            Grid
+          
+          
+            Guides
+          
+        
+      
+    
+    
+  `;
 };
 
 export const groups = ({
-	align = "start",
-	onChange,
+  align = "start",
+  onChange,
 }: {
-	align: "start" | "end";
-	onChange(value: string): void;
+  align: "start" | "end";
+  onChange(value: string): void;
 }): TemplateResult => html`
-	
-			onChange(value)}
-		open
-		style=${ifDefined(align === "end" ? "float: inline-end;" : undefined)}
-	>
-		
-			cms
-			
-				Update All Content
-			
-			Refresh All XDs
-		
-		
-			ssg
-			Clear Cache
-		
-		
-			vrt
-			Contributions
-			Internal
-			Public
-			Patterns
-			All
-		
-		
-		
-			Logout
-		
-	
+  
+      onChange(value)}
+    open
+    style=${ifDefined(align === "end" ? "float: inline-end;" : undefined)}
+  >
+    
+      cms
+      
+        Update All Content
+      
+      Refresh All XDs
+    
+    
+      ssg
+      Clear Cache
+    
+    
+      vrt
+      Contributions
+      Internal
+      Public
+      Patterns
+      All
+    
+    
+    
+      Logout
+    
+  
 `;
 
 groups.decorators = [isOverlayOpen];
 
 export const groupsWithSelects = ({
-	onChange,
+  onChange,
 }: {
-	onChange(value: string): void;
+  onChange(value: string): void;
 }): TemplateResult => {
-	return html`
-		
-				onChange(value)}
-			label="Filter or Sort"
-		>
-			
-				Sort By
-				Name
-				Created
-				Modified
-			
-			
-			
-				Reverse Order
-			
-		
-	`;
+  return html`
+    
+        onChange(value)}
+      label="Filter or Sort"
+    >
+      
+        Sort By
+        Name
+        Created
+        Modified
+      
+      
+      
+        Reverse Order
+      
+    
+  `;
 };
 
 groupsWithSelects.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 groupsWithSelects.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const directive = (): TemplateResult => {
-	const renderSubmenu = (): TemplateResult => html`
-		Submenu Item 1
-		Submenu Item 2
-		Submenu Item 3
-		Submenu Item 4
-	`;
-	const renderOptions = (): TemplateResult => html`
-		Deselect
-		Select Inverse
-		
-			Feather...
-			
-		
-		Select and Mask...
-		
-		Save Selection
-		Make Work Path
-	`;
+  const renderSubmenu = (): TemplateResult => html`
+    Submenu Item 1
+    Submenu Item 2
+    Submenu Item 3
+    Submenu Item 4
+  `;
+  const renderOptions = (): TemplateResult => html`
+    Deselect
+    Select Inverse
+    
+      Feather...
+      
+    
+    Select and Mask...
+    
+    Save Selection
+    Make Work Path
+  `;
 
-	return html`
-		
-			
-				Select a Country with a very long label, too long in fact
-			
-		
-	`;
+  return html`
+    
+      
+        Select a Country with a very long label, too long in fact
+      
+    
+  `;
 };
 
 directive.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 directive.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const withScrollEvent = (): TemplateResult => {
-	function handleActionMenuScroll(): void {
-		console.log("attached action menu scroll listener");
-	}
+  function handleActionMenuScroll(): void {
+    console.log("attached action menu scroll listener");
+  }
 
-	function renderMenuItems(): TemplateResult[] {
-		return Array.from(
-			{ length: 30 },
-			(_, i) => html`
-				
-					This is an Action Menu Item ${i + 1}
-				
-			`,
-		);
-	}
+  function renderMenuItems(): TemplateResult[] {
+    return Array.from(
+      { length: 30 },
+      (_, i) => html`
+        
+          This is an Action Menu Item ${i + 1}
+        
+      `,
+    );
+  }
 
-	return html`
-		
-			This is an Action Menu
-			${renderMenuItems()}
-		
-	`;
+  return html`
+    
+      This is an Action Menu
+      ${renderMenuItems()}
+    
+  `;
 };
 
 withScrollEvent.parameters = {
-	chromatic: { disableSnapshot: true },
+  chromatic: { disableSnapshot: true },
 };
diff --git a/packages/action-menu/stories/index.ts b/packages/action-menu/stories/index.ts
index 6b0c3ae234..fa29cbe77e 100644
--- a/packages/action-menu/stories/index.ts
+++ b/packages/action-menu/stories/index.ts
@@ -10,80 +10,74 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { html, nothing, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';
-import type { ActionMenu } from '@spectrum-web-components/action-menu';
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import { Placement } from "@spectrum-web-components/overlay/src/overlay-types.js";
+import type { ActionMenu } from "@spectrum-web-components/action-menu";
 
 export const ActionMenuMarkup = ({
-    align = 'start',
-    ariaLabel = 'More Actions',
-    onChange = (() => undefined) as (value: string) => void,
-    changeHandler = (() => undefined) as (value: string) => void,
-    disabled = false,
-    open = false,
-    quiet = false,
-    staticValue = '',
-    visibleLabel = '',
-    customIcon = '' as string | TemplateResult,
-    size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',
-    selects = '' as 'single',
-    selected = false,
-    tooltipDescription = '',
-    tooltipPlacement = 'bottom' as Placement,
+  align = "start",
+  ariaLabel = "More Actions",
+  onChange = (() => undefined) as (value: string) => void,
+  changeHandler = (() => undefined) as (value: string) => void,
+  disabled = false,
+  open = false,
+  quiet = false,
+  staticValue = "",
+  visibleLabel = "",
+  customIcon = "" as string | TemplateResult,
+  size = "m" as "m" | "s" | "l" | "xl" | "xxl",
+  selects = "" as "single",
+  selected = false,
+  tooltipDescription = "",
+  tooltipPlacement = "bottom" as Placement,
 } = {}): TemplateResult => {
-    return html`
-         {
-                changeHandler(event.target.value);
-                onChange(event.target.value);
-            }}
-            .selects=${selects ? selects : undefined}
-            value=${selected ? 'Select Inverse' : ''}
-            style=${ifDefined(
-                align === 'end' ? 'float: inline-end;' : undefined
-            )}
-        >
-            ${customIcon ? customIcon : nothing}
-            ${visibleLabel
-                ? html`
-                      ${visibleLabel}
-                  `
-                : nothing}
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            
-            Save Selection
-            Make Work Path
-            ${tooltipDescription
-                ? html`
-                      
-                          ${tooltipDescription}
-                      
-                  `
-                : html``}
-        
-    `;
+  return html`
+     {
+        changeHandler(event.target.value);
+        onChange(event.target.value);
+      }}
+      .selects=${selects ? selects : undefined}
+      value=${selected ? "Select Inverse" : ""}
+      style=${ifDefined(align === "end" ? "float: inline-end;" : undefined)}
+    >
+      ${customIcon ? customIcon : nothing}
+      ${visibleLabel
+        ? html` ${visibleLabel} `
+        : nothing}
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      
+      Save Selection
+      Make Work Path
+      ${tooltipDescription
+        ? html`
+            
+              ${tooltipDescription}
+            
+          `
+        : html``}
+    
+  `;
 };
diff --git a/packages/action-menu/sync/sp-action-menu.ts b/packages/action-menu/sync/sp-action-menu.ts
index 9fabe6da76..596a1341f8 100644
--- a/packages/action-menu/sync/sp-action-menu.ts
+++ b/packages/action-menu/sync/sp-action-menu.ts
@@ -10,5 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/picker/sync/index.js';
-import '../sp-action-menu.js';
+import "@spectrum-web-components/picker/sync/index.js";
+import "../sp-action-menu.js";
diff --git a/packages/action-menu/test/action-menu-directive.test.ts b/packages/action-menu/test/action-menu-directive.test.ts
index ffb8b5149c..e4bf50bd84 100644
--- a/packages/action-menu/test/action-menu-directive.test.ts
+++ b/packages/action-menu/test/action-menu-directive.test.ts
@@ -10,40 +10,40 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { expect, oneEvent } from '@open-wc/testing';
-import { ActionMenu } from '@spectrum-web-components/action-menu';
-import { sendKeys } from '@web/test-runner-commands';
+import { expect, oneEvent } from "@open-wc/testing";
+import { ActionMenu } from "@spectrum-web-components/action-menu";
+import { sendKeys } from "@web/test-runner-commands";
 
-import { directive } from '../stories/action-menu.stories.js';
-import { fixture } from '../../../test/testing-helpers.js';
-import { nextFrame } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';
+import { directive } from "../stories/action-menu.stories.js";
+import { fixture } from "../../../test/testing-helpers.js";
+import { nextFrame } from "@spectrum-web-components/overlay/src/AbstractOverlay.js";
 
-describe('Slottable Request Directive', () => {
-    it('Action Menu requests for options rendering when opening and closing', async function () {
-        const el = await fixture(directive());
-        const initialNodeLength = el.children.length;
+describe("Slottable Request Directive", () => {
+  it("Action Menu requests for options rendering when opening and closing", async function () {
+    const el = await fixture(directive());
+    const initialNodeLength = el.children.length;
 
-        expect(el.open).to.be.false;
-        expect(el.children.length).to.equal(initialNodeLength);
+    expect(el.open).to.be.false;
+    expect(el.children.length).to.equal(initialNodeLength);
 
-        const opened = oneEvent(el, 'sp-opened');
+    const opened = oneEvent(el, "sp-opened");
 
-        el.click();
-        await opened;
+    el.click();
+    await opened;
 
-        expect(el.open).to.be.true;
-        expect(el.children.length).to.be.gt(initialNodeLength);
+    expect(el.open).to.be.true;
+    expect(el.children.length).to.be.gt(initialNodeLength);
 
-        const closed = oneEvent(el, 'sp-closed');
+    const closed = oneEvent(el, "sp-closed");
 
-        await sendKeys({
-            press: 'Escape',
-        });
-        await closed;
-        await nextFrame();
-        await nextFrame();
-
-        expect(el.open).to.be.false;
-        expect(el.children.length).to.equal(initialNodeLength);
+    await sendKeys({
+      press: "Escape",
     });
+    await closed;
+    await nextFrame();
+    await nextFrame();
+
+    expect(el.open).to.be.false;
+    expect(el.children.length).to.equal(initialNodeLength);
+  });
 });
diff --git a/packages/action-menu/test/action-menu-groups.test.ts b/packages/action-menu/test/action-menu-groups.test.ts
index 3b09c8bfa2..438bfb0bc2 100644
--- a/packages/action-menu/test/action-menu-groups.test.ts
+++ b/packages/action-menu/test/action-menu-groups.test.ts
@@ -10,107 +10,105 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, oneEvent } from '@open-wc/testing';
-import { fixture } from '../../../test/testing-helpers.js';
-import { sendKeys } from '@web/test-runner-commands';
-
-import { groupsWithSelects } from '../stories/action-menu.stories.js';
-import { ActionMenu } from '@spectrum-web-components/action-menu';
-import { MenuItem } from '@spectrum-web-components/menu';
-
-describe('Action Menu - Groups', () => {
-    it('throws focus into the Menu when opened', async function () {
-        const el = await fixture(
-            groupsWithSelects({ onChange: () => {} })
-        );
-
-        const firstGroup = el.querySelector('sp-menu-group') as HTMLElement;
-        const firstItem = el.querySelector('sp-menu-item') as MenuItem;
-
-        expect(firstItem.focused).to.be.false;
-        expect(document.activeElement === firstGroup).to.be.false;
-
-        const opened = oneEvent(el, 'sp-opened');
-
-        el.focus();
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        await opened;
-
-        expect(firstItem.focused).to.be.true;
-        expect(
-            document.activeElement === firstGroup,
-            document.activeElement?.localName
-        ).to.be.true;
+import { elementUpdated, expect, oneEvent } from "@open-wc/testing";
+import { fixture } from "../../../test/testing-helpers.js";
+import { sendKeys } from "@web/test-runner-commands";
+
+import { groupsWithSelects } from "../stories/action-menu.stories.js";
+import { ActionMenu } from "@spectrum-web-components/action-menu";
+import { MenuItem } from "@spectrum-web-components/menu";
+
+describe("Action Menu - Groups", () => {
+  it("throws focus into the Menu when opened", async function () {
+    const el = await fixture(
+      groupsWithSelects({ onChange: () => {} }),
+    );
+
+    const firstGroup = el.querySelector("sp-menu-group") as HTMLElement;
+    const firstItem = el.querySelector("sp-menu-item") as MenuItem;
+
+    expect(firstItem.focused).to.be.false;
+    expect(document.activeElement === firstGroup).to.be.false;
+
+    const opened = oneEvent(el, "sp-opened");
+
+    el.focus();
+    await sendKeys({
+      press: "ArrowDown",
+    });
+    await opened;
+
+    expect(firstItem.focused).to.be.true;
+    expect(
+      document.activeElement === firstGroup,
+      document.activeElement?.localName,
+    ).to.be.true;
+  });
+
+  it('toggles child group with `selects="multiple"`', async function () {
+    this.retries(0);
+    const el = await fixture(
+      groupsWithSelects({ onChange: () => {} }),
+    );
+
+    const multipleGroup = el.querySelector(
+      '[selects="multiple"]',
+    ) as HTMLElement;
+    const firstItem = multipleGroup.querySelector("sp-menu-item") as MenuItem;
+
+    expect(firstItem.selected).to.be.false;
+
+    let opened = oneEvent(el, "sp-opened");
+
+    el.focus();
+    await sendKeys({
+      press: "ArrowDown",
     });
+    await opened;
+    expect(el.open).to.be.true;
 
-    it('toggles child group with `selects="multiple"`', async function () {
-        this.retries(0);
-        const el = await fixture(
-            groupsWithSelects({ onChange: () => {} })
-        );
-
-        const multipleGroup = el.querySelector(
-            '[selects="multiple"]'
-        ) as HTMLElement;
-        const firstItem = multipleGroup.querySelector(
-            'sp-menu-item'
-        ) as MenuItem;
-
-        expect(firstItem.selected).to.be.false;
-
-        let opened = oneEvent(el, 'sp-opened');
-
-        el.focus();
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        await opened;
-        expect(el.open).to.be.true;
-
-        await sendKeys({
-            press: 'ArrowUp',
-        });
-        await elementUpdated(el);
-
-        let closed = oneEvent(el, 'sp-closed');
-
-        await sendKeys({
-            press: 'Enter',
-        });
-        await closed;
-
-        await elementUpdated(el);
-        await elementUpdated(firstItem);
-
-        expect(el.open).to.be.false;
-        expect(firstItem.selected).to.be.true;
-        expect(document.activeElement === el, document.activeElement?.localName)
-            .to.be.true;
-
-        opened = oneEvent(el, 'sp-opened');
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        await opened;
-        expect(el.open).to.be.true;
-
-        await sendKeys({
-            press: 'ArrowUp',
-        });
-        await elementUpdated(el);
-
-        closed = oneEvent(el, 'sp-closed');
-        await sendKeys({
-            press: 'Enter',
-        });
-        await closed;
-
-        await elementUpdated(el);
-        await elementUpdated(firstItem);
-
-        expect(el.open).to.be.false;
-        expect(firstItem.selected).to.be.false;
+    await sendKeys({
+      press: "ArrowUp",
     });
+    await elementUpdated(el);
+
+    let closed = oneEvent(el, "sp-closed");
+
+    await sendKeys({
+      press: "Enter",
+    });
+    await closed;
+
+    await elementUpdated(el);
+    await elementUpdated(firstItem);
+
+    expect(el.open).to.be.false;
+    expect(firstItem.selected).to.be.true;
+    expect(document.activeElement === el, document.activeElement?.localName).to
+      .be.true;
+
+    opened = oneEvent(el, "sp-opened");
+    await sendKeys({
+      press: "ArrowDown",
+    });
+    await opened;
+    expect(el.open).to.be.true;
+
+    await sendKeys({
+      press: "ArrowUp",
+    });
+    await elementUpdated(el);
+
+    closed = oneEvent(el, "sp-closed");
+    await sendKeys({
+      press: "Enter",
+    });
+    await closed;
+
+    await elementUpdated(el);
+    await elementUpdated(firstItem);
+
+    expect(el.open).to.be.false;
+    expect(firstItem.selected).to.be.false;
+  });
 });
diff --git a/packages/action-menu/test/action-menu-memory.test.ts b/packages/action-menu/test/action-menu-memory.test.ts
index 93e97fc89d..043701f5c3 100644
--- a/packages/action-menu/test/action-menu-memory.test.ts
+++ b/packages/action-menu/test/action-menu-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Default } from '../stories/action-menu.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/action-menu.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(Default({}));
diff --git a/packages/action-menu/test/benchmark/test-basic.ts b/packages/action-menu/test/benchmark/test-basic.ts
index 60a4411493..9e1fcde6b0 100644
--- a/packages/action-menu/test/benchmark/test-basic.ts
+++ b/packages/action-menu/test/benchmark/test-basic.ts
@@ -9,23 +9,23 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
-            Select a Country with a very long label, too long in fact
-        
-        Deselect
-        Select Inverse
-        Feather...
-        Select and Mask...
-        
-        Save Selection
-        Make Work Path
-    
+  
+    
+      Select a Country with a very long label, too long in fact
+    
+    Deselect
+    Select Inverse
+    Feather...
+    Select and Mask...
+    
+    Save Selection
+    Make Work Path
+  
 `);
diff --git a/packages/action-menu/test/benchmark/test-directive.ts b/packages/action-menu/test/benchmark/test-directive.ts
index 6357af1acd..4154c71abf 100644
--- a/packages/action-menu/test/benchmark/test-directive.ts
+++ b/packages/action-menu/test/benchmark/test-directive.ts
@@ -9,30 +9,30 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { slottableRequest } from "@spectrum-web-components/overlay/src/slottable-request-directive.js";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 const renderOptions = (): TemplateResult => {
-    import('@spectrum-web-components/menu/sp-menu-item.js');
-    import('@spectrum-web-components/menu/sp-menu-divider.js');
+  import("@spectrum-web-components/menu/sp-menu-item.js");
+  import("@spectrum-web-components/menu/sp-menu-divider.js");
 
-    return html`
-        Deselect
-        Select Inverse
-        Feather...
-        Select and Mask...
-        
-        Save Selection
-        Make Work Path
-    `;
+  return html`
+    Deselect
+    Select Inverse
+    Feather...
+    Select and Mask...
+    
+    Save Selection
+    Make Work Path
+  `;
 };
 
 measureFixtureCreation(html`
-    
-        
-            Select a Country with a very long label, too long in fact
-        
-    
+  
+    
+      Select a Country with a very long label, too long in fact
+    
+  
 `);
diff --git a/packages/action-menu/test/benchmark/test-lazy.ts b/packages/action-menu/test/benchmark/test-lazy.ts
index d8f0096a69..1b8014d9c7 100644
--- a/packages/action-menu/test/benchmark/test-lazy.ts
+++ b/packages/action-menu/test/benchmark/test-lazy.ts
@@ -9,43 +9,43 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import { html, render } from '@spectrum-web-components/base';
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import { html, render } from "@spectrum-web-components/base";
 import {
-    removeSlottableRequest,
-    type SlottableRequestEvent,
-} from '@spectrum-web-components/overlay/src/slottable-request-event.js';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+  removeSlottableRequest,
+  type SlottableRequestEvent,
+} from "@spectrum-web-components/overlay/src/slottable-request-event.js";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 const handleSlottableRequest = (event: SlottableRequestEvent): void => {
-    import('@spectrum-web-components/menu/sp-menu-item.js');
-    import('@spectrum-web-components/menu/sp-menu-divider.js');
-    const label = html`
-        
-            Select a Country with a very long label, too long in fact
-        
-    `;
-    const template =
-        event.data === removeSlottableRequest
-            ? label
-            : html`
-                  ${label}
-                  Deselect
-                  Select Inverse
-                  Feather...
-                  Select and Mask...
-                  
-                  Save Selection
-                  Make Work Path
-              `;
+  import("@spectrum-web-components/menu/sp-menu-item.js");
+  import("@spectrum-web-components/menu/sp-menu-divider.js");
+  const label = html`
+    
+      Select a Country with a very long label, too long in fact
+    
+  `;
+  const template =
+    event.data === removeSlottableRequest
+      ? label
+      : html`
+          ${label}
+          Deselect
+          Select Inverse
+          Feather...
+          Select and Mask...
+          
+          Save Selection
+          Make Work Path
+        `;
 
-    render(template, event.target as HTMLElement);
+  render(template, event.target as HTMLElement);
 };
 
 measureFixtureCreation(html`
-    
-        
-            Select a Country with a very long label, too long in fact
-        
-    
+  
+    
+      Select a Country with a very long label, too long in fact
+    
+  
 `);
diff --git a/packages/action-menu/test/benchmark/test-open-close-directive.ts b/packages/action-menu/test/benchmark/test-open-close-directive.ts
index 30b7def938..bcf7b016dc 100644
--- a/packages/action-menu/test/benchmark/test-open-close-directive.ts
+++ b/packages/action-menu/test/benchmark/test-open-close-directive.ts
@@ -10,85 +10,85 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import type { ActionMenu } from '@spectrum-web-components/action-menu';
-import { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';
-import { html, TemplateResult } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
-import { SpectrumElement } from '@spectrum-web-components/base';
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import type { ActionMenu } from "@spectrum-web-components/action-menu";
+import { slottableRequest } from "@spectrum-web-components/overlay/src/slottable-request-directive.js";
+import { html, TemplateResult } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+import { SpectrumElement } from "@spectrum-web-components/base";
 
 const renderOptions = (): TemplateResult => {
-    import('@spectrum-web-components/menu/sp-menu-item.js');
-    import('@spectrum-web-components/menu/sp-menu-divider.js');
+  import("@spectrum-web-components/menu/sp-menu-item.js");
+  import("@spectrum-web-components/menu/sp-menu-divider.js");
 
-    return html`
-        Deselect
-        Select Inverse
-        Feather...
-        Select and Mask...
-        
-        Save Selection
-        Make Work Path
-    `;
+  return html`
+    Deselect
+    Select Inverse
+    Feather...
+    Select and Mask...
+    
+    Save Selection
+    Make Work Path
+  `;
 };
 
 class ActionMenuWorkflow extends HTMLElement {
-    ready!: (value: boolean | PromiseLike) => void;
-    target!: ActionMenu;
-    count = 0;
+  ready!: (value: boolean | PromiseLike) => void;
+  target!: ActionMenu;
+  count = 0;
 
-    constructor() {
-        super();
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-            this.setup();
-        });
-    }
+  constructor() {
+    super();
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
 
-    async setup(): Promise {
-        this.target = this.nextElementSibling as ActionMenu;
-        const childPromises = [] as Promise[];
+  async setup(): Promise {
+    this.target = this.nextElementSibling as ActionMenu;
+    const childPromises = [] as Promise[];
 
-        [...this.target.children].forEach((child) => {
-            if ('updateComplete' in child) {
-                childPromises.push((child as SpectrumElement).updateComplete);
-            }
-        });
-        await Promise.all([this.target.updateComplete, ...childPromises]);
-        this.target.addEventListener('sp-opened', () => {
-            requestAnimationFrame(() => (this.target.open = false));
-        });
-        this.target.addEventListener('sp-closed', () => {
-            this.count += 1;
+    [...this.target.children].forEach((child) => {
+      if ("updateComplete" in child) {
+        childPromises.push((child as SpectrumElement).updateComplete);
+      }
+    });
+    await Promise.all([this.target.updateComplete, ...childPromises]);
+    this.target.addEventListener("sp-opened", () => {
+      requestAnimationFrame(() => (this.target.open = false));
+    });
+    this.target.addEventListener("sp-closed", () => {
+      this.count += 1;
 
-            if (this.count >= 5) {
-                this.ready(true);
+      if (this.count >= 5) {
+        this.ready(true);
 
-                return;
-            }
+        return;
+      }
 
-            requestAnimationFrame(() => (this.target.open = true));
-        });
-        requestAnimationFrame(() => (this.target.open = true));
-    }
+      requestAnimationFrame(() => (this.target.open = true));
+    });
+    requestAnimationFrame(() => (this.target.open = true));
+  }
 
-    private readyPromise: Promise = Promise.resolve(false);
+  private readyPromise: Promise = Promise.resolve(false);
 
-    get updateComplete(): Promise {
-        return this.readyPromise;
-    }
+  get updateComplete(): Promise {
+    return this.readyPromise;
+  }
 }
 
-customElements.define('action-menu-workflow', ActionMenuWorkflow);
+customElements.define("action-menu-workflow", ActionMenuWorkflow);
 
 measureFixtureCreation(
-    html`
-        
-        
-            
-                Select a Country with a very long label, too long in fact
-            
-        
-    `,
-    { numRenders: 1 }
+  html`
+    
+    
+      
+        Select a Country with a very long label, too long in fact
+      
+    
+  `,
+  { numRenders: 1 },
 );
diff --git a/packages/action-menu/test/benchmark/test-open-close.ts b/packages/action-menu/test/benchmark/test-open-close.ts
index 7051069a09..281d8cc917 100644
--- a/packages/action-menu/test/benchmark/test-open-close.ts
+++ b/packages/action-menu/test/benchmark/test-open-close.ts
@@ -10,78 +10,78 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import type { ActionMenu } from '@spectrum-web-components/action-menu';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
-import { SpectrumElement } from '@spectrum-web-components/base';
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import type { ActionMenu } from "@spectrum-web-components/action-menu";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+import { SpectrumElement } from "@spectrum-web-components/base";
 
 class ActionMenuWorkflow extends HTMLElement {
-    ready!: (value: boolean | PromiseLike) => void;
-    target!: ActionMenu;
-    count = 0;
+  ready!: (value: boolean | PromiseLike) => void;
+  target!: ActionMenu;
+  count = 0;
 
-    constructor() {
-        super();
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-            this.setup();
-        });
-    }
+  constructor() {
+    super();
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
 
-    async setup(): Promise {
-        this.target = this.nextElementSibling as ActionMenu;
-        const childPromises = [] as Promise[];
+  async setup(): Promise {
+    this.target = this.nextElementSibling as ActionMenu;
+    const childPromises = [] as Promise[];
 
-        [...this.target.children].forEach((child) => {
-            if ('updateComplete' in child) {
-                childPromises.push((child as SpectrumElement).updateComplete);
-            }
-        });
-        await Promise.all([this.target.updateComplete, ...childPromises]);
-        this.target.addEventListener('sp-opened', () => {
-            requestAnimationFrame(() => (this.target.open = false));
-        });
-        this.target.addEventListener('sp-closed', () => {
-            this.count += 1;
+    [...this.target.children].forEach((child) => {
+      if ("updateComplete" in child) {
+        childPromises.push((child as SpectrumElement).updateComplete);
+      }
+    });
+    await Promise.all([this.target.updateComplete, ...childPromises]);
+    this.target.addEventListener("sp-opened", () => {
+      requestAnimationFrame(() => (this.target.open = false));
+    });
+    this.target.addEventListener("sp-closed", () => {
+      this.count += 1;
 
-            if (this.count >= 5) {
-                this.ready(true);
+      if (this.count >= 5) {
+        this.ready(true);
 
-                return;
-            }
+        return;
+      }
 
-            requestAnimationFrame(() => (this.target.open = true));
-        });
-        requestAnimationFrame(() => (this.target.open = true));
-    }
+      requestAnimationFrame(() => (this.target.open = true));
+    });
+    requestAnimationFrame(() => (this.target.open = true));
+  }
 
-    private readyPromise: Promise = Promise.resolve(false);
+  private readyPromise: Promise = Promise.resolve(false);
 
-    get updateComplete(): Promise {
-        return this.readyPromise;
-    }
+  get updateComplete(): Promise {
+    return this.readyPromise;
+  }
 }
 
-customElements.define('action-menu-workflow', ActionMenuWorkflow);
+customElements.define("action-menu-workflow", ActionMenuWorkflow);
 
 measureFixtureCreation(
-    html`
-        
-        
-            
-                Select a Country with a very long label, too long in fact
-            
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            
-            Save Selection
-            Make Work Path
-        
-    `,
-    { numRenders: 1 }
+  html`
+    
+    
+      
+        Select a Country with a very long label, too long in fact
+      
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      
+      Save Selection
+      Make Work Path
+    
+  `,
+  { numRenders: 1 },
 );
diff --git a/packages/action-menu/test/index.ts b/packages/action-menu/test/index.ts
index 78d2b9245c..f3babdda29 100644
--- a/packages/action-menu/test/index.ts
+++ b/packages/action-menu/test/index.ts
@@ -11,12 +11,12 @@ governing permissions and limitations under the License.
 */
 
 import {
-	aTimeout,
-	elementUpdated,
-	expect,
-	html,
-	nextFrame,
-	oneEvent,
+  aTimeout,
+  elementUpdated,
+  expect,
+  html,
+  nextFrame,
+  oneEvent,
 } from "@open-wc/testing";
 import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 
@@ -25,13 +25,13 @@ import { spy } from "sinon";
 import { ActionMenu } from "@spectrum-web-components/action-menu";
 import type { Menu, MenuItem } from "@spectrum-web-components/menu";
 import {
-	fixture,
-	ignoreResizeObserverLoopError,
+  fixture,
+  ignoreResizeObserverLoopError,
 } from "../../../test/testing-helpers.js";
 import "@spectrum-web-components/dialog/sp-dialog-base.js";
 import {
-	iconOnly,
-	tooltipDescriptionAndPlacement,
+  iconOnly,
+  tooltipDescriptionAndPlacement,
 } from "../stories/action-menu.stories.js";
 import { findDescribedNode } from "../../../test/testing-helpers-a11y.js";
 import type { Tooltip } from "@spectrum-web-components/tooltip";
@@ -46,774 +46,774 @@ import { SAFARI_FOCUS_RING_CLASS } from "@spectrum-web-components/picker/src/Mob
 ignoreResizeObserverLoopError(before, after);
 
 const deprecatedActionMenuFixture = async (): Promise =>
-	await fixture(html`
-		
-			
-				Deselect
-				Select Inverse
-				Feather...
-				Select and Mask...
-				
-				Save Selection
-				Make Work Path
-			
-		
-	`);
+  await fixture(html`
+    
+      
+        Deselect
+        Select Inverse
+        Feather...
+        Select and Mask...
+        
+        Save Selection
+        Make Work Path
+      
+    
+  `);
 
 const actionMenuFixture = async (): Promise =>
-	await fixture(html`
-		
-			Deselect
-			Select Inverse
-			Feather...
-			Select and Mask...
-			
-			Save Selection
-			Make Work Path
-		
-	`);
+  await fixture(html`
+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      
+      Save Selection
+      Make Work Path
+    
+  `);
 
 const actionSubmenuFixture = async (): Promise =>
-	await fixture(html`
-		
-			One
-			Two
-			
-				B should be selected
-				
-					A
-					 B 
-					C
-				
-			
-		
-	`);
+  await fixture(html`
+    
+      One
+      Two
+      
+        B should be selected
+        
+          A
+           B 
+          C
+        
+      
+    
+  `);
 
 export const testActionMenu = (mode: "sync" | "async"): void => {
-	describe(`Action menu: ${mode}`, () => {
-		testForLitDevWarnings(async () => await actionMenuFixture());
-		it("loads", async () => {
-			const el = await actionMenuFixture();
-
-			await elementUpdated(el);
-
-			expect(el).to.not.be.undefined;
-
-			await expect(el).to.be.accessible();
-		});
-		it('loads - [slot="label"]', async () => {
-			const el = await fixture(html`
-				
-					More Actions
-					Deselect
-					Select Inverse
-					Feather...
-					Select and Mask...
-					
-					Save Selection
-					Make Work Path
-				
-			`);
-
-			await elementUpdated(el);
-			await nextFrame();
-			await nextFrame();
-
-			await expect(el).to.be.accessible();
-		});
-		it("loads - [custom icon]", async () => {
-			const el = await fixture(html`
-				
-					
-					Deselect
-					Select Inverse
-					Feather...
-					Select and Mask...
-					
-					Save Selection
-					Make Work Path
-				
-			`);
-
-			await elementUpdated(el);
-			await nextFrame();
-			await nextFrame();
-
-			await expect(el).to.be.accessible();
-		});
-		it("dispatches change events, no [href]", async () => {
-			const changeSpy = spy();
-
-			const el = await fixture(html`
-				 {
-						changeSpy(value);
-					}}
-				>
-					
-					Deselect
-					Select Inverse
-					Feather...
-					Select and Mask...
-					
-					Save Selection
-					Make Work Path
-				
-			`);
-
-			expect(changeSpy.callCount).to.equal(0);
-			expect(el.open).to.be.false;
-
-			const menuItem2 = el.querySelector(
-				"sp-menu-item:nth-child(2)",
-			) as MenuItem;
-			const opened = oneEvent(el, "sp-opened");
-
-			el.click();
-			await elementUpdated(el);
-			await opened;
-
-			expect(el.open).to.be.true;
-
-			const closed = oneEvent(el, "sp-closed");
-
-			menuItem2.click();
-			await closed;
-
-			expect(el.open).to.be.false;
-			expect(changeSpy.callCount).to.equal(1);
-			expect(changeSpy.calledWith("Deselect")).to.be.true;
-		});
-		it("closes when Menu Item has [href]", async () => {
-			const changeSpy = spy();
-
-			const el = await fixture(html`
-				 {
-						changeSpy();
-					}}
-				>
-					
-					Deselect
-					Select Inverse
-					Feather...
-					Select and Mask...
-					
-					Save Selection
-					 Make Work Path 
-				
-			`);
-
-			expect(changeSpy.callCount).to.equal(0);
-			expect(el.open).to.be.false;
-
-			const menuItem2 = el.querySelector(
-				"sp-menu-item:nth-child(2)",
-			) as MenuItem;
-
-			const opened = oneEvent(el, "sp-opened");
-
-			el.click();
-			await opened;
-
-			expect(el.open).to.be.true;
-
-			const closed = oneEvent(el, "sp-closed");
-
-			menuItem2.click();
-			await closed;
-
-			expect(el.open).to.be.false;
-			expect(changeSpy.callCount).to.equal(0);
-		});
-		it("can be `quiet`", async () => {
-			const el = await actionMenuFixture();
+  describe(`Action menu: ${mode}`, () => {
+    testForLitDevWarnings(async () => await actionMenuFixture());
+    it("loads", async () => {
+      const el = await actionMenuFixture();
+
+      await elementUpdated(el);
+
+      expect(el).to.not.be.undefined;
+
+      await expect(el).to.be.accessible();
+    });
+    it('loads - [slot="label"]', async () => {
+      const el = await fixture(html`
+        
+          More Actions
+          Deselect
+          Select Inverse
+          Feather...
+          Select and Mask...
+          
+          Save Selection
+          Make Work Path
+        
+      `);
+
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+
+      await expect(el).to.be.accessible();
+    });
+    it("loads - [custom icon]", async () => {
+      const el = await fixture(html`
+        
+          
+          Deselect
+          Select Inverse
+          Feather...
+          Select and Mask...
+          
+          Save Selection
+          Make Work Path
+        
+      `);
+
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+
+      await expect(el).to.be.accessible();
+    });
+    it("dispatches change events, no [href]", async () => {
+      const changeSpy = spy();
+
+      const el = await fixture(html`
+         {
+            changeSpy(value);
+          }}
+        >
+          
+          Deselect
+          Select Inverse
+          Feather...
+          Select and Mask...
+          
+          Save Selection
+          Make Work Path
+        
+      `);
+
+      expect(changeSpy.callCount).to.equal(0);
+      expect(el.open).to.be.false;
+
+      const menuItem2 = el.querySelector(
+        "sp-menu-item:nth-child(2)",
+      ) as MenuItem;
+      const opened = oneEvent(el, "sp-opened");
+
+      el.click();
+      await elementUpdated(el);
+      await opened;
+
+      expect(el.open).to.be.true;
+
+      const closed = oneEvent(el, "sp-closed");
+
+      menuItem2.click();
+      await closed;
+
+      expect(el.open).to.be.false;
+      expect(changeSpy.callCount).to.equal(1);
+      expect(changeSpy.calledWith("Deselect")).to.be.true;
+    });
+    it("closes when Menu Item has [href]", async () => {
+      const changeSpy = spy();
+
+      const el = await fixture(html`
+         {
+            changeSpy();
+          }}
+        >
+          
+          Deselect
+          Select Inverse
+          Feather...
+          Select and Mask...
+          
+          Save Selection
+           Make Work Path 
+        
+      `);
+
+      expect(changeSpy.callCount).to.equal(0);
+      expect(el.open).to.be.false;
+
+      const menuItem2 = el.querySelector(
+        "sp-menu-item:nth-child(2)",
+      ) as MenuItem;
+
+      const opened = oneEvent(el, "sp-opened");
+
+      el.click();
+      await opened;
+
+      expect(el.open).to.be.true;
+
+      const closed = oneEvent(el, "sp-closed");
+
+      menuItem2.click();
+      await closed;
+
+      expect(el.open).to.be.false;
+      expect(changeSpy.callCount).to.equal(0);
+    });
+    it("can be `quiet`", async () => {
+      const el = await actionMenuFixture();
 
-			expect(el.quiet).to.be.false;
+      expect(el.quiet).to.be.false;
 
-			el.quiet = true;
-			await elementUpdated(el);
+      el.quiet = true;
+      await elementUpdated(el);
 
-			expect(el.quiet).to.be.true;
-		});
-		it("can be `staticColor`", async () => {
-			const el = await actionMenuFixture();
+      expect(el.quiet).to.be.true;
+    });
+    it("can be `staticColor`", async () => {
+      const el = await actionMenuFixture();
 
-			expect(el.staticColor == undefined).to.be.true;
+      expect(el.staticColor == undefined).to.be.true;
 
-			el.staticColor = "black";
-			await elementUpdated(el);
+      el.staticColor = "black";
+      await elementUpdated(el);
 
-			expect(el.staticColor == "black").to.be.true;
+      expect(el.staticColor == "black").to.be.true;
 
-			el.staticColor = "white";
-			await elementUpdated(el);
+      el.staticColor = "white";
+      await elementUpdated(el);
 
-			expect(el.staticColor == "white").to.be.true;
-		});
-		it("stay `valid`", async () => {
-			const el = await actionMenuFixture();
+      expect(el.staticColor == "white").to.be.true;
+    });
+    it("stay `valid`", async () => {
+      const el = await actionMenuFixture();
 
-			expect(el.invalid).to.be.false;
+      expect(el.invalid).to.be.false;
 
-			el.invalid = true;
-			await elementUpdated(el);
+      el.invalid = true;
+      await elementUpdated(el);
 
-			expect(el.invalid).to.be.false;
-		});
-		it("focus()", async () => {
-			const el = await actionMenuFixture();
+      expect(el.invalid).to.be.false;
+    });
+    it("focus()", async () => {
+      const el = await actionMenuFixture();
 
-			el.focus();
+      el.focus();
 
-			expect(document.activeElement).to.equal(el);
-			expect(el.shadowRoot.activeElement).to.equal(el.focusElement);
+      expect(document.activeElement).to.equal(el);
+      expect(el.shadowRoot.activeElement).to.equal(el.focusElement);
 
-			const opened = oneEvent(el, "sp-opened");
+      const opened = oneEvent(el, "sp-opened");
 
-			el.open = true;
-			await opened;
+      el.open = true;
+      await opened;
 
-			const closed = oneEvent(el, "sp-closed");
+      const closed = oneEvent(el, "sp-closed");
 
-			el.open = false;
-			await closed;
+      el.open = false;
+      await closed;
 
-			expect(document.activeElement).to.equal(el);
-			expect(el.shadowRoot.activeElement).to.equal(el.focusElement);
-		});
-		it("manages focus-ring styles", async () => {
-			if (!isWebKit()) {
-				return;
-			}
+      expect(document.activeElement).to.equal(el);
+      expect(el.shadowRoot.activeElement).to.equal(el.focusElement);
+    });
+    it("manages focus-ring styles", async () => {
+      if (!isWebKit()) {
+        return;
+      }
 
-			const el = await actionMenuFixture();
+      const el = await actionMenuFixture();
 
-			/**
-			 * This is a hack to set the `isMobile` property to true so that we can test the MobileController
-			 */
-			el.isMobile.matches = true;
-			el.bindEvents();
+      /**
+       * This is a hack to set the `isMobile` property to true so that we can test the MobileController
+       */
+      el.isMobile.matches = true;
+      el.bindEvents();
 
-			await setViewport({ width: 360, height: 640 });
-			// Allow viewport update to propagate.
-			await nextFrame();
+      await setViewport({ width: 360, height: 640 });
+      // Allow viewport update to propagate.
+      await nextFrame();
 
-			let opened = oneEvent(el, "sp-opened");
+      let opened = oneEvent(el, "sp-opened");
 
-			const boundingRect = el.button.getBoundingClientRect();
+      const boundingRect = el.button.getBoundingClientRect();
 
-			sendMouse({
-				steps: [
-					{
-						type: "click",
-						position: [
-							boundingRect.x + boundingRect.width / 2,
-							boundingRect.y + boundingRect.height / 2,
-						],
-					},
-				],
-			});
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
 
-			await opened;
+      await opened;
 
-			const tray = el.shadowRoot.querySelector("sp-tray");
+      const tray = el.shadowRoot.querySelector("sp-tray");
 
-			expect(tray).to.not.be.null;
+      expect(tray).to.not.be.null;
 
-			// Make a selection
-			let closed = oneEvent(el, "sp-closed");
+      // Make a selection
+      let closed = oneEvent(el, "sp-closed");
 
-			const firstItem = el.querySelector("sp-menu-item") as MenuItem;
+      const firstItem = el.querySelector("sp-menu-item") as MenuItem;
 
-			firstItem.click();
+      firstItem.click();
 
-			await elementUpdated(el);
-			await closed;
+      await elementUpdated(el);
+      await closed;
 
-			// expect the tray to be closed
-			expect(el.open).to.be.false;
+      // expect the tray to be closed
+      expect(el.open).to.be.false;
 
-			const button = el.shadowRoot.querySelector(
-				"#button",
-			) as HTMLButtonElement;
+      const button = el.shadowRoot.querySelector(
+        "#button",
+      ) as HTMLButtonElement;
 
-			expect(button).to.not.be.null;
+      expect(button).to.not.be.null;
 
-			// we should have SAFARI_FOCUS_RING_CLASS in the classList
-			expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.true;
+      // we should have SAFARI_FOCUS_RING_CLASS in the classList
+      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.true;
 
-			// picker should still have focus
-			expect(document.activeElement === el).to.be.true;
-
-			// click outside (0,0)
-			await sendMouse({
-				steps: [
-					{
-						type: "click",
-						position: [0, 0],
-					},
-				],
-			});
-
-			// picker should not have focus
-			expect(document.activeElement === el).to.be.false;
-
-			// Let's use keyboard to open the tray now
-			opened = oneEvent(el, "sp-opened");
-			await sendKeys({
-				press: "Tab",
-			});
-			await sendKeys({
-				press: "Enter",
-			});
-			await elementUpdated(el);
-			await opened;
-
-			// Make a selection again
-			closed = oneEvent(el, "sp-closed");
-			firstItem.click();
-			await elementUpdated(el);
-			await closed;
-
-			// expect the tray to be closed
-			expect(el.open).to.be.false;
-
-			// we should not have SAFARI_FOCUS_RING_CLASS in the classList
-			expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.false;
-		});
-		it("opens unmeasured", async () => {
-			const el = await actionMenuFixture();
-
-			const button = el.button as HTMLButtonElement;
-
-			expect(button).to.have.attribute("aria-haspopup", "true");
-			expect(button).to.not.have.attribute("aria-expanded", "true");
-			expect(button).to.not.have.attribute("aria-controls", "menu");
-
-			el.click();
-			await elementUpdated(el);
-			expect(el.open).to.be.true;
-			expect(button).to.have.attribute("aria-haspopup", "true");
-			expect(button).to.have.attribute("aria-expanded", "true");
-			expect(button).to.have.attribute("aria-controls", "menu");
-		});
-		it("opens repeatedly with Menu in the correct location", async function () {
-			const el = await fixture(
-				iconOnly({
-					...iconOnly.args,
-					align: "end",
-				}),
-			);
-
-			await elementUpdated(el);
-
-			el.focus();
-			await elementUpdated(el);
-			let opened = oneEvent(el, "sp-opened");
-
-			await sendKeys({ press: "ArrowRight" });
-			await sendKeys({ press: "ArrowLeft" });
-			await sendKeys({ press: "Space" });
-			await opened;
-
-			const firstRect = (
-				el as unknown as { overlayElement: Overlay }
-			).overlayElement.dialogEl.getBoundingClientRect();
-
-			let closed = oneEvent(el, "sp-closed");
-
-			await sendKeys({ press: "Space" });
-			await closed;
-
-			opened = oneEvent(el, "sp-opened");
-			await sendKeys({ press: "Space" });
-			await opened;
-
-			const secondRect = (
-				el as unknown as { overlayElement: Overlay }
-			).overlayElement.dialogEl.getBoundingClientRect();
-
-			closed = oneEvent(el, "sp-closed");
-			await sendKeys({ press: "Space" });
-			await closed;
-
-			expect(firstRect).to.deep.equal(secondRect);
-		});
-		it("opens and selects in a single pointer button interaction", async () => {
-			const el = await actionMenuFixture();
-			const thirdItem = el.querySelector(
-				"sp-menu-item:nth-of-type(3)",
-			) as MenuItem;
-			const boundingRect = el.button.getBoundingClientRect();
-
-			expect(el.value).to.not.equal(thirdItem.value);
-			const opened = oneEvent(el, "sp-opened");
-
-			await sendMouse({
-				steps: [
-					{
-						type: "move",
-						position: [
-							boundingRect.x + boundingRect.width / 2,
-							boundingRect.y + boundingRect.height / 2,
-						],
-					},
-					{
-						type: "down",
-					},
-				],
-			});
-			await opened;
-
-			const thirdItemRect = thirdItem.getBoundingClientRect();
-			const closed = oneEvent(el, "sp-closed");
-			let selected = "";
-
-			el.addEventListener("change", (event: Event) => {
-				selected = (event.target as ActionMenu).value;
-			});
-			await sendMouse({
-				steps: [
-					{
-						type: "move",
-						position: [
-							thirdItemRect.x + thirdItemRect.width / 2,
-							thirdItemRect.y + thirdItemRect.height / 2,
-						],
-					},
-					{
-						type: "up",
-					},
-				],
-			});
-			await closed;
-
-			expect(el.open).to.be.false;
-			expect(selected).to.equal(thirdItem.value);
-		});
-		it("has attribute aria-describedby", async () => {
-			const name = "sp-picker";
-			const description = "Rendering a Picker";
-
-			const el = await fixture(html`
-				
-					Select Inverse
-					Feather...
-					${description}
-				
-			`);
-
-			await elementUpdated(el);
-
-			await findDescribedNode(name, description);
-		});
-		it("opens unmeasured with deprecated syntax", async () => {
-			const el = await deprecatedActionMenuFixture();
-
-			el.click();
-			await elementUpdated(el);
-			expect(el.open).to.be.true;
-		});
-		it("toggles open/close multiple time", async () => {
-			const el = await actionMenuFixture();
-
-			await elementUpdated(el);
-
-			const button = el.button as HTMLButtonElement;
-
-			expect(button).to.have.attribute("aria-haspopup", "true");
-			expect(button).to.have.attribute("aria-expanded", "false");
-			expect(button).not.to.have.attribute("aria-controls");
-
-			let opened = oneEvent(el, "sp-opened");
-
-			el.open = true;
-			await opened;
-
-			expect(el.open).to.be.true;
-			expect(button).to.have.attribute("aria-expanded", "true");
-			expect(button).to.have.attribute("aria-controls", "menu");
-
-			let closed = oneEvent(el, "sp-closed");
-
-			el.open = false;
-			await closed;
-
-			expect(el.open).to.be.false;
-			expect(button).to.have.attribute("aria-expanded", "false");
-			expect(button).not.to.have.attribute("aria-controls");
-
-			opened = oneEvent(el, "sp-opened");
-			el.open = true;
-			await opened;
-
-			expect(el.open).to.be.true;
-			expect(button).to.have.attribute("aria-expanded", "true");
-			expect(button).to.have.attribute("aria-controls", "menu");
-
-			closed = oneEvent(el, "sp-closed");
-			el.open = false;
-			await closed;
-
-			expect(el.open).to.be.false;
-			expect(button).to.have.attribute("aria-expanded", "false");
-			expect(button).not.to.have.attribute("aria-controls");
-		});
-		it("allows submenu items to be selected", async () => {
-			const root = await actionSubmenuFixture();
-			const menuItem = root.querySelector("#item-with-submenu") as Menu;
-			const submenu = menuItem.querySelector('sp-menu[slot="submenu"]') as Menu;
-			const selectedItem = submenu.querySelector(
-				"#sub-selected-item",
-			) as MenuItem;
-
-			expect(selectedItem.selected, "item should be initially selected").to.be
-				.true;
-
-			let opened = oneEvent(root, "sp-opened");
-
-			root.click();
-			await opened;
-			expect(root.open).to.be.true;
-
-			opened = oneEvent(menuItem, "sp-opened");
-			menuItem.dispatchEvent(
-				new PointerEvent("pointerenter", { bubbles: true }),
-			);
-			await opened;
-
-			await elementUpdated(submenu);
-			expect(
-				selectedItem.selected,
-				"initially selected item should maintain selection",
-			).to.be.true;
-		});
-		it("allows top-level selection state to change", async () => {
-			let selected = true;
-			const handleChange = (event: Event & { target: ActionMenu }): void => {
-				if (event.target.value === "test") {
-					selected = !selected;
-
-					event.target.updateComplete.then(() => {
-						event.target.value = selected ? "test" : "";
-					});
-				}
-			};
-			const root = await fixture(html`
-				
-					One
-					
-						Two
-					
-					
-						B should be selected
-						
-							A
-							 B 
-							C
-						
-					
-				
-			`);
-
-			const unselectedItem = root.querySelector("sp-menu-item") as MenuItem;
-			const selectedItem = root.querySelector(
-				"#root-selected-item",
-			) as MenuItem;
-
-			expect(unselectedItem.textContent).to.include("One");
-			expect(unselectedItem.selected).to.be.false;
-			expect(selectedItem.textContent).to.include("Two");
-			expect(selectedItem.selected).to.be.true;
-
-			let opened = oneEvent(root, "sp-opened");
-
-			root.click();
-			await opened;
-
-			// close by clicking selected
-			// (with event listener: should set selected = false)
-			let closed = oneEvent(root, "sp-closed");
-
-			selectedItem.click();
-			await closed;
-
-			expect(root.open).to.be.false;
-			opened = oneEvent(root, "sp-opened");
-			root.click();
-			await opened;
-
-			// close by clicking unselected
-			// (no event listener: should remain selected = false)
-			closed = oneEvent(root, "sp-closed");
-			unselectedItem.click();
-			await closed;
-
-			opened = oneEvent(root, "sp-opened");
-			root.click();
-			await opened;
-
-			expect(unselectedItem.textContent).to.include("One");
-			expect(unselectedItem.selected).to.be.false;
-			expect(selectedItem.textContent).to.include("Two");
-			expect(selectedItem.selected).to.be.false;
-
-			// close by clicking selected
-			// (with event listener: should set selected = false)
-			closed = oneEvent(root, "sp-closed");
-			selectedItem.click();
-			await closed;
-
-			opened = oneEvent(root, "sp-opened");
-			root.click();
-			await opened;
-
-			expect(unselectedItem.textContent).to.include("One");
-			expect(unselectedItem.selected).to.be.false;
-			expect(selectedItem.textContent).to.include("Two");
-			expect(selectedItem.selected).to.be.true;
-		});
-		it("shows tooltip", async function () {
-			const openSpy = spy();
-			const el = await fixture(
-				tooltipDescriptionAndPlacement(tooltipDescriptionAndPlacement.args),
-			);
-			const tooltip = el.querySelector("sp-tooltip") as Tooltip;
-			const rect = el.getBoundingClientRect();
-
-			tooltip.addEventListener("sp-opened", () => openSpy());
-			await elementUpdated(tooltip);
-
-			await nextFrame();
-			await nextFrame();
-
-			const overlay = tooltip.shadowRoot.querySelector("sp-overlay") as Overlay;
-
-			await elementUpdated(overlay);
-
-			expect(overlay.triggerElement === el.button).to.be.true;
-			let open = oneEvent(tooltip, "sp-opened");
-
-			await sendMouse({
-				steps: [
-					{
-						position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
-						type: "move",
-					},
-				],
-			});
-			await open;
-
-			expect(tooltip.open).to.be.true;
-
-			const close = oneEvent(tooltip, "sp-closed");
-
-			open = oneEvent(el, "sp-opened");
-			await sendMouse({
-				steps: [
-					{
-						position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
-						type: "click",
-					},
-				],
-			});
-			await close;
-			await open;
-
-			expect(tooltip.open, "tooltip still open").to.be.false;
-			expect(el.open, "menu not open").to.be.true;
-
-			const menu = (el as unknown as TestablePicker).optionsMenu;
-			const menuRect = menu.getBoundingClientRect();
-
-			await sendMouse({
-				steps: [
-					{
-						position: [
-							menuRect.left + menuRect.width / 2,
-							menuRect.top + menuRect.height / 2,
-						],
-						type: "move",
-					},
-				],
-			});
-
-			await aTimeout(150);
-
-			expect(openSpy.callCount).to.equal(1);
-		});
-		it("opens, then closes, on subsequent clicks", async function () {
-			const el = await actionMenuFixture();
-			const rect = el.getBoundingClientRect();
-
-			await nextFrame();
-			await nextFrame();
-
-			const open = oneEvent(el, "sp-opened");
-
-			await sendMouse({
-				steps: [
-					{
-						position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
-						type: "click",
-					},
-				],
-			});
-			await open;
-
-			expect(el.open).to.be.true;
-			await aTimeout(50);
-			expect(el.open).to.be.true;
-
-			const close = oneEvent(el, "sp-closed");
-
-			await sendMouse({
-				steps: [
-					{
-						position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
-						type: "click",
-					},
-				],
-			});
-			await close;
-
-			expect(el.open).to.be.false;
-			await aTimeout(50);
-			expect(el.open).to.be.false;
-		});
-		it("should handle scroll event", async () => {
-			const renderMenuItems = (): TemplateResult[] =>
-				Array.from(
-					{ length: 30 },
-					(_, i) => html`
-						
-							Menu Item ${i + 1}
-						
-					`,
-				);
-			const handleActionMenuScroll = spy();
-			const el = await fixture(html`
-				 handleActionMenuScroll()}>
-					More Actions
-					Deselect
-					Select Inverse
-					Feather...
-					Select and Mask...
-					${renderMenuItems()}
-				
-			`);
-
-			await elementUpdated(el);
-
-			expect(handleActionMenuScroll.called).to.be.false;
-
-			el.dispatchEvent(
-				new Event("scroll", { cancelable: true, composed: true }),
-			);
-			expect(handleActionMenuScroll).to.have.been.called;
-		});
-	});
+      // picker should still have focus
+      expect(document.activeElement === el).to.be.true;
+
+      // click outside (0,0)
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [0, 0],
+          },
+        ],
+      });
+
+      // picker should not have focus
+      expect(document.activeElement === el).to.be.false;
+
+      // Let's use keyboard to open the tray now
+      opened = oneEvent(el, "sp-opened");
+      await sendKeys({
+        press: "Tab",
+      });
+      await sendKeys({
+        press: "Enter",
+      });
+      await elementUpdated(el);
+      await opened;
+
+      // Make a selection again
+      closed = oneEvent(el, "sp-closed");
+      firstItem.click();
+      await elementUpdated(el);
+      await closed;
+
+      // expect the tray to be closed
+      expect(el.open).to.be.false;
+
+      // we should not have SAFARI_FOCUS_RING_CLASS in the classList
+      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.false;
+    });
+    it("opens unmeasured", async () => {
+      const el = await actionMenuFixture();
+
+      const button = el.button as HTMLButtonElement;
+
+      expect(button).to.have.attribute("aria-haspopup", "true");
+      expect(button).to.not.have.attribute("aria-expanded", "true");
+      expect(button).to.not.have.attribute("aria-controls", "menu");
+
+      el.click();
+      await elementUpdated(el);
+      expect(el.open).to.be.true;
+      expect(button).to.have.attribute("aria-haspopup", "true");
+      expect(button).to.have.attribute("aria-expanded", "true");
+      expect(button).to.have.attribute("aria-controls", "menu");
+    });
+    it("opens repeatedly with Menu in the correct location", async function () {
+      const el = await fixture(
+        iconOnly({
+          ...iconOnly.args,
+          align: "end",
+        }),
+      );
+
+      await elementUpdated(el);
+
+      el.focus();
+      await elementUpdated(el);
+      let opened = oneEvent(el, "sp-opened");
+
+      await sendKeys({ press: "ArrowRight" });
+      await sendKeys({ press: "ArrowLeft" });
+      await sendKeys({ press: "Space" });
+      await opened;
+
+      const firstRect = (
+        el as unknown as { overlayElement: Overlay }
+      ).overlayElement.dialogEl.getBoundingClientRect();
+
+      let closed = oneEvent(el, "sp-closed");
+
+      await sendKeys({ press: "Space" });
+      await closed;
+
+      opened = oneEvent(el, "sp-opened");
+      await sendKeys({ press: "Space" });
+      await opened;
+
+      const secondRect = (
+        el as unknown as { overlayElement: Overlay }
+      ).overlayElement.dialogEl.getBoundingClientRect();
+
+      closed = oneEvent(el, "sp-closed");
+      await sendKeys({ press: "Space" });
+      await closed;
+
+      expect(firstRect).to.deep.equal(secondRect);
+    });
+    it("opens and selects in a single pointer button interaction", async () => {
+      const el = await actionMenuFixture();
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)",
+      ) as MenuItem;
+      const boundingRect = el.button.getBoundingClientRect();
+
+      expect(el.value).to.not.equal(thirdItem.value);
+      const opened = oneEvent(el, "sp-opened");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+          {
+            type: "down",
+          },
+        ],
+      });
+      await opened;
+
+      const thirdItemRect = thirdItem.getBoundingClientRect();
+      const closed = oneEvent(el, "sp-closed");
+      let selected = "";
+
+      el.addEventListener("change", (event: Event) => {
+        selected = (event.target as ActionMenu).value;
+      });
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              thirdItemRect.x + thirdItemRect.width / 2,
+              thirdItemRect.y + thirdItemRect.height / 2,
+            ],
+          },
+          {
+            type: "up",
+          },
+        ],
+      });
+      await closed;
+
+      expect(el.open).to.be.false;
+      expect(selected).to.equal(thirdItem.value);
+    });
+    it("has attribute aria-describedby", async () => {
+      const name = "sp-picker";
+      const description = "Rendering a Picker";
+
+      const el = await fixture(html`
+        
+          Select Inverse
+          Feather...
+          ${description}
+        
+      `);
+
+      await elementUpdated(el);
+
+      await findDescribedNode(name, description);
+    });
+    it("opens unmeasured with deprecated syntax", async () => {
+      const el = await deprecatedActionMenuFixture();
+
+      el.click();
+      await elementUpdated(el);
+      expect(el.open).to.be.true;
+    });
+    it("toggles open/close multiple time", async () => {
+      const el = await actionMenuFixture();
+
+      await elementUpdated(el);
+
+      const button = el.button as HTMLButtonElement;
+
+      expect(button).to.have.attribute("aria-haspopup", "true");
+      expect(button).to.have.attribute("aria-expanded", "false");
+      expect(button).not.to.have.attribute("aria-controls");
+
+      let opened = oneEvent(el, "sp-opened");
+
+      el.open = true;
+      await opened;
+
+      expect(el.open).to.be.true;
+      expect(button).to.have.attribute("aria-expanded", "true");
+      expect(button).to.have.attribute("aria-controls", "menu");
+
+      let closed = oneEvent(el, "sp-closed");
+
+      el.open = false;
+      await closed;
+
+      expect(el.open).to.be.false;
+      expect(button).to.have.attribute("aria-expanded", "false");
+      expect(button).not.to.have.attribute("aria-controls");
+
+      opened = oneEvent(el, "sp-opened");
+      el.open = true;
+      await opened;
+
+      expect(el.open).to.be.true;
+      expect(button).to.have.attribute("aria-expanded", "true");
+      expect(button).to.have.attribute("aria-controls", "menu");
+
+      closed = oneEvent(el, "sp-closed");
+      el.open = false;
+      await closed;
+
+      expect(el.open).to.be.false;
+      expect(button).to.have.attribute("aria-expanded", "false");
+      expect(button).not.to.have.attribute("aria-controls");
+    });
+    it("allows submenu items to be selected", async () => {
+      const root = await actionSubmenuFixture();
+      const menuItem = root.querySelector("#item-with-submenu") as Menu;
+      const submenu = menuItem.querySelector('sp-menu[slot="submenu"]') as Menu;
+      const selectedItem = submenu.querySelector(
+        "#sub-selected-item",
+      ) as MenuItem;
+
+      expect(selectedItem.selected, "item should be initially selected").to.be
+        .true;
+
+      let opened = oneEvent(root, "sp-opened");
+
+      root.click();
+      await opened;
+      expect(root.open).to.be.true;
+
+      opened = oneEvent(menuItem, "sp-opened");
+      menuItem.dispatchEvent(
+        new PointerEvent("pointerenter", { bubbles: true }),
+      );
+      await opened;
+
+      await elementUpdated(submenu);
+      expect(
+        selectedItem.selected,
+        "initially selected item should maintain selection",
+      ).to.be.true;
+    });
+    it("allows top-level selection state to change", async () => {
+      let selected = true;
+      const handleChange = (event: Event & { target: ActionMenu }): void => {
+        if (event.target.value === "test") {
+          selected = !selected;
+
+          event.target.updateComplete.then(() => {
+            event.target.value = selected ? "test" : "";
+          });
+        }
+      };
+      const root = await fixture(html`
+        
+          One
+          
+            Two
+          
+          
+            B should be selected
+            
+              A
+               B 
+              C
+            
+          
+        
+      `);
+
+      const unselectedItem = root.querySelector("sp-menu-item") as MenuItem;
+      const selectedItem = root.querySelector(
+        "#root-selected-item",
+      ) as MenuItem;
+
+      expect(unselectedItem.textContent).to.include("One");
+      expect(unselectedItem.selected).to.be.false;
+      expect(selectedItem.textContent).to.include("Two");
+      expect(selectedItem.selected).to.be.true;
+
+      let opened = oneEvent(root, "sp-opened");
+
+      root.click();
+      await opened;
+
+      // close by clicking selected
+      // (with event listener: should set selected = false)
+      let closed = oneEvent(root, "sp-closed");
+
+      selectedItem.click();
+      await closed;
+
+      expect(root.open).to.be.false;
+      opened = oneEvent(root, "sp-opened");
+      root.click();
+      await opened;
+
+      // close by clicking unselected
+      // (no event listener: should remain selected = false)
+      closed = oneEvent(root, "sp-closed");
+      unselectedItem.click();
+      await closed;
+
+      opened = oneEvent(root, "sp-opened");
+      root.click();
+      await opened;
+
+      expect(unselectedItem.textContent).to.include("One");
+      expect(unselectedItem.selected).to.be.false;
+      expect(selectedItem.textContent).to.include("Two");
+      expect(selectedItem.selected).to.be.false;
+
+      // close by clicking selected
+      // (with event listener: should set selected = false)
+      closed = oneEvent(root, "sp-closed");
+      selectedItem.click();
+      await closed;
+
+      opened = oneEvent(root, "sp-opened");
+      root.click();
+      await opened;
+
+      expect(unselectedItem.textContent).to.include("One");
+      expect(unselectedItem.selected).to.be.false;
+      expect(selectedItem.textContent).to.include("Two");
+      expect(selectedItem.selected).to.be.true;
+    });
+    it("shows tooltip", async function () {
+      const openSpy = spy();
+      const el = await fixture(
+        tooltipDescriptionAndPlacement(tooltipDescriptionAndPlacement.args),
+      );
+      const tooltip = el.querySelector("sp-tooltip") as Tooltip;
+      const rect = el.getBoundingClientRect();
+
+      tooltip.addEventListener("sp-opened", () => openSpy());
+      await elementUpdated(tooltip);
+
+      await nextFrame();
+      await nextFrame();
+
+      const overlay = tooltip.shadowRoot.querySelector("sp-overlay") as Overlay;
+
+      await elementUpdated(overlay);
+
+      expect(overlay.triggerElement === el.button).to.be.true;
+      let open = oneEvent(tooltip, "sp-opened");
+
+      await sendMouse({
+        steps: [
+          {
+            position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+            type: "move",
+          },
+        ],
+      });
+      await open;
+
+      expect(tooltip.open).to.be.true;
+
+      const close = oneEvent(tooltip, "sp-closed");
+
+      open = oneEvent(el, "sp-opened");
+      await sendMouse({
+        steps: [
+          {
+            position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+            type: "click",
+          },
+        ],
+      });
+      await close;
+      await open;
+
+      expect(tooltip.open, "tooltip still open").to.be.false;
+      expect(el.open, "menu not open").to.be.true;
+
+      const menu = (el as unknown as TestablePicker).optionsMenu;
+      const menuRect = menu.getBoundingClientRect();
+
+      await sendMouse({
+        steps: [
+          {
+            position: [
+              menuRect.left + menuRect.width / 2,
+              menuRect.top + menuRect.height / 2,
+            ],
+            type: "move",
+          },
+        ],
+      });
+
+      await aTimeout(150);
+
+      expect(openSpy.callCount).to.equal(1);
+    });
+    it("opens, then closes, on subsequent clicks", async function () {
+      const el = await actionMenuFixture();
+      const rect = el.getBoundingClientRect();
+
+      await nextFrame();
+      await nextFrame();
+
+      const open = oneEvent(el, "sp-opened");
+
+      await sendMouse({
+        steps: [
+          {
+            position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+            type: "click",
+          },
+        ],
+      });
+      await open;
+
+      expect(el.open).to.be.true;
+      await aTimeout(50);
+      expect(el.open).to.be.true;
+
+      const close = oneEvent(el, "sp-closed");
+
+      await sendMouse({
+        steps: [
+          {
+            position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+            type: "click",
+          },
+        ],
+      });
+      await close;
+
+      expect(el.open).to.be.false;
+      await aTimeout(50);
+      expect(el.open).to.be.false;
+    });
+    it("should handle scroll event", async () => {
+      const renderMenuItems = (): TemplateResult[] =>
+        Array.from(
+          { length: 30 },
+          (_, i) => html`
+            
+              Menu Item ${i + 1}
+            
+          `,
+        );
+      const handleActionMenuScroll = spy();
+      const el = await fixture(html`
+         handleActionMenuScroll()}>
+          More Actions
+          Deselect
+          Select Inverse
+          Feather...
+          Select and Mask...
+          ${renderMenuItems()}
+        
+      `);
+
+      await elementUpdated(el);
+
+      expect(handleActionMenuScroll.called).to.be.false;
+
+      el.dispatchEvent(
+        new Event("scroll", { cancelable: true, composed: true }),
+      );
+      expect(handleActionMenuScroll).to.have.been.called;
+    });
+  });
 };
diff --git a/packages/alert-banner/sp-alert-banner.ts b/packages/alert-banner/sp-alert-banner.ts
index e32d6b6938..46e8596b90 100644
--- a/packages/alert-banner/sp-alert-banner.ts
+++ b/packages/alert-banner/sp-alert-banner.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { AlertBanner } from './src/AlertBanner.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { AlertBanner } from "./src/AlertBanner.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-alert-banner', AlertBanner);
+defineElement("sp-alert-banner", AlertBanner);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-alert-banner': AlertBanner;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-alert-banner": AlertBanner;
+  }
 }
diff --git a/packages/alert-banner/src/AlertBanner.ts b/packages/alert-banner/src/AlertBanner.ts
index 3bd39711c1..1a7d198b3c 100644
--- a/packages/alert-banner/src/AlertBanner.ts
+++ b/packages/alert-banner/src/AlertBanner.ts
@@ -10,20 +10,20 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/button/sp-close-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import styles from './alert-banner.css.js';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import "@spectrum-web-components/button/sp-close-button.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
+import styles from "./alert-banner.css.js";
 
 // Valid variants for the alert banner
-const VALID_VARIANTS = ['neutral', 'info', 'negative'];
+const VALID_VARIANTS = ["neutral", "info", "negative"];
 
 // Type definition for alert banner variants
 export type AlertBannerVariants = (typeof VALID_VARIANTS)[number];
@@ -37,163 +37,160 @@ export type AlertBannerVariants = (typeof VALID_VARIANTS)[number];
  * @fires close - Announces the alert banner has been closed
  */
 export class AlertBanner extends SpectrumElement {
-    public static override get styles(): CSSResultArray {
-        return [styles];
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /**
+   * Controls the display of the alert banner.
+   */
+  @property({ type: Boolean, reflect: true })
+  public open = false;
+
+  /**
+   * Whether to include an icon-only close button to dismiss the alert banner.
+   */
+  @property({ type: Boolean, reflect: true })
+  public dismissible = false;
+
+  /**
+   * The variant applies specific styling when set to `negative` or `info`.
+   * The `variant` attribute is removed when it's passed an invalid variant.
+   */
+  @property({ type: String })
+  public set variant(variant: AlertBannerVariants) {
+    if (variant === this.variant) {
+      return;
     }
 
-    /**
-     * Controls the display of the alert banner.
-     */
-    @property({ type: Boolean, reflect: true })
-    public open = false;
-
-    /**
-     * Whether to include an icon-only close button to dismiss the alert banner.
-     */
-    @property({ type: Boolean, reflect: true })
-    public dismissible = false;
-
-    /**
-     * The variant applies specific styling when set to `negative` or `info`.
-     * The `variant` attribute is removed when it's passed an invalid variant.
-     */
-    @property({ type: String })
-    public set variant(variant: AlertBannerVariants) {
-        if (variant === this.variant) {
-            return;
-        }
-
-        const oldValue = this.variant;
-
-        if (this.isValidVariant(variant)) {
-            this.setAttribute('variant', variant);
-            this._variant = variant;
-        } else {
-            this.removeAttribute('variant');
-            this._variant = '';
-
-            if (window.__swc.DEBUG) {
-                window.__swc.warn(
-                    this,
-                    `<${this.localName}> element expects the "variant" attribute to be one of the following:`,
-                    'https://opensource.adobe.com/spectrum-web-components/components/alert-banner/#variants',
-                    {
-                        issues: [...VALID_VARIANTS],
-                    }
-                );
-            }
-        }
-
-        this.requestUpdate('variant', oldValue);
+    const oldValue = this.variant;
+
+    if (this.isValidVariant(variant)) {
+      this.setAttribute("variant", variant);
+      this._variant = variant;
+    } else {
+      this.removeAttribute("variant");
+      this._variant = "";
+
+      if (window.__swc.DEBUG) {
+        window.__swc.warn(
+          this,
+          `<${this.localName}> element expects the "variant" attribute to be one of the following:`,
+          "https://opensource.adobe.com/spectrum-web-components/components/alert-banner/#variants",
+          {
+            issues: [...VALID_VARIANTS],
+          },
+        );
+      }
     }
 
-    public get variant(): AlertBannerVariants {
-        return this._variant;
-    }
+    this.requestUpdate("variant", oldValue);
+  }
 
-    private _variant: AlertBannerVariants = '';
+  public get variant(): AlertBannerVariants {
+    return this._variant;
+  }
 
-    /**
-     * Checks if the provided variant is valid.
-     */
-    protected isValidVariant(variant: string): boolean {
-        return VALID_VARIANTS.includes(variant);
-    }
+  private _variant: AlertBannerVariants = "";
 
-    /**
-     * Renders the appropriate icon based on the variant.
-     */
-    protected renderIcon(variant: string): TemplateResult {
-        switch (variant) {
-            case 'info':
-                return html`
-                    
-                `;
-            case 'negative':
-                return html`
-                    
-                `;
-            default:
-                return html``;
-        }
-    }
+  /**
+   * Checks if the provided variant is valid.
+   */
+  protected isValidVariant(variant: string): boolean {
+    return VALID_VARIANTS.includes(variant);
+  }
 
-    /**
-     * Dispatches a 'close' event and closes the alert banner if the event is not canceled.
-     */
-    private shouldClose(): void {
-        const applyDefault = this.dispatchEvent(
-            new CustomEvent('close', {
-                composed: true,
-                bubbles: true,
-                cancelable: true,
-            })
-        );
-
-        if (applyDefault) {
-            this.close();
-        }
-    }
-
-    /**
-     * Closes the alert banner by setting the open property to false.
-     */
-    public close(): void {
-        this.open = false;
-    }
-
-    /**
-     * Handles the keydown event to close the alert banner when the Escape key is pressed.
-     */
-    private handleKeydown(event: KeyboardEvent): void {
-        if (event.code === 'Escape' && this.dismissible) {
-            this.shouldClose();
-        }
-    }
-
-    /**
-     * Renders the alert banner template.
-     * Includes the body with content and an optional close button.
-     */
-    protected override render(): TemplateResult {
+  /**
+   * Renders the appropriate icon based on the variant.
+   */
+  protected renderIcon(variant: string): TemplateResult {
+    switch (variant) {
+      case "info":
+        return html`
+          
+        `;
+      case "negative":
         return html`
-            
-            

-                ${this.dismissible
-                    ? html`
-                          
-                      `
-                    : html``}
-            

+          
         `;
+      default:
+        return html``;
     }
-
-    /**
-     * Updates the alert banner when properties change.
-     * Adds or removes the keydown event listener based on the open property.
-     */
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (changes.has('open')) {
-            if (this.open) {
-                this.addEventListener('keydown', this.handleKeydown);
-            } else {
-                this.removeEventListener('keydown', this.handleKeydown);
-            }
-        }
+  }
+
+  /**
+   * Dispatches a 'close' event and closes the alert banner if the event is not canceled.
+   */
+  private shouldClose(): void {
+    const applyDefault = this.dispatchEvent(
+      new CustomEvent("close", {
+        composed: true,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    if (applyDefault) {
+      this.close();
+    }
+  }
+
+  /**
+   * Closes the alert banner by setting the open property to false.
+   */
+  public close(): void {
+    this.open = false;
+  }
+
+  /**
+   * Handles the keydown event to close the alert banner when the Escape key is pressed.
+   */
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.code === "Escape" && this.dismissible) {
+      this.shouldClose();
+    }
+  }
+
+  /**
+   * Renders the alert banner template.
+   * Includes the body with content and an optional close button.
+   */
+  protected override render(): TemplateResult {
+    return html`
+      
+      

+        ${this.dismissible
+          ? html`
+              
+            `
+          : html``}
+      

+    `;
+  }
+
+  /**
+   * Updates the alert banner when properties change.
+   * Adds or removes the keydown event listener based on the open property.
+   */
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
+
+    if (changes.has("open")) {
+      if (this.open) {
+        this.addEventListener("keydown", this.handleKeydown);
+      } else {
+        this.removeEventListener("keydown", this.handleKeydown);
+      }
     }
+  }
 }
diff --git a/packages/alert-banner/src/index.ts b/packages/alert-banner/src/index.ts
index 29e06c3e94..23b5850e63 100644
--- a/packages/alert-banner/src/index.ts
+++ b/packages/alert-banner/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './AlertBanner.js';
+export * from "./AlertBanner.js";
diff --git a/packages/alert-banner/stories/alert-banner.stories.ts b/packages/alert-banner/stories/alert-banner.stories.ts
index 90a326c8bc..4d8266e577 100644
--- a/packages/alert-banner/stories/alert-banner.stories.ts
+++ b/packages/alert-banner/stories/alert-banner.stories.ts
@@ -16,61 +16,61 @@ import { AlertBannerMarkup } from ".//index.js";
 import { argTypes } from "./args.js";
 
 interface Properties {
-	text: string;
-	variant: AlertBannerVariants;
-	dismissible: boolean;
-	open: boolean;
-	onClose?: (event: Event) => void;
-	actionLabel?: string;
+  text: string;
+  variant: AlertBannerVariants;
+  dismissible: boolean;
+  open: boolean;
+  onClose?: (event: Event) => void;
+  actionLabel?: string;
 }
 
 export default {
-	title: "Alert Banner",
-	component: "sp-alert-banner",
-	args: {
-		text: "Your trial has expired",
-		dismissible: true,
-		open: true,
-		variant: "neutral",
-	},
-	argTypes,
+  title: "Alert Banner",
+  component: "sp-alert-banner",
+  args: {
+    text: "Your trial has expired",
+    dismissible: true,
+    open: true,
+    variant: "neutral",
+  },
+  argTypes,
 };
 
 export const Default = (args: Properties): TemplateResult =>
-	AlertBannerMarkup(args);
+  AlertBannerMarkup(args);
 
 export const Info = (args: Properties): TemplateResult =>
-	AlertBannerMarkup({
-		...args,
-		variant: "info",
-		text: "Your trial will expire in 3 days",
-	});
+  AlertBannerMarkup({
+    ...args,
+    variant: "info",
+    text: "Your trial will expire in 3 days",
+  });
 
 export const Negative = (args: Properties): TemplateResult =>
-	AlertBannerMarkup({
-		...args,
-		variant: "negative",
-		text: "Connection interrupted. Check your network to continue",
-	});
+  AlertBannerMarkup({
+    ...args,
+    variant: "negative",
+    text: "Connection interrupted. Check your network to continue",
+  });
 
 export const TextWrapping = (args: Properties): TemplateResult => html`
-	

-		${AlertBannerMarkup({
-			...args,
-			variant: "negative",
-			text: ` Your trial has expired. Please purchase to continue.
+  

+    ${AlertBannerMarkup({
+      ...args,
+      variant: "negative",
+      text: ` Your trial has expired. Please purchase to continue.
 Your work has been saved and is ready for you to open again once
 you have purchased the software.`,
-			actionLabel: "Purchase",
-		})}
-	

+      actionLabel: "Purchase",
+    })}
+  

 `;
 
 export const Multilanguage = (args: Properties): TemplateResult => html`
-	${AlertBannerMarkup({
-		...args,
-		variant: "info",
-		text: `ستنتهي الفترة التجريبية الخاصة بك في الأسبوع المقبل`,
-		actionLabel: `اشتري الآن`,
-	})}
+  ${AlertBannerMarkup({
+    ...args,
+    variant: "info",
+    text: "ستنتهي الفترة التجريبية الخاصة بك في الأسبوع المقبل",
+    actionLabel: "اشتري الآن",
+  })}
 `;
diff --git a/packages/alert-banner/stories/args.ts b/packages/alert-banner/stories/args.ts
index d9e8e66ca0..def1cf32a0 100644
--- a/packages/alert-banner/stories/args.ts
+++ b/packages/alert-banner/stories/args.ts
@@ -11,52 +11,51 @@ governing permissions and limitations under the License.
 */
 
 export const argTypes = {
-    text: {
-        name: 'text',
-        type: { name: 'string', required: false },
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'Your trial has expired' },
-        },
-        control: 'text',
+  text: {
+    name: "text",
+    type: { name: "string", required: false },
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "Your trial has expired" },
     },
-    dismissible: {
-        name: 'dismissible',
-        type: { name: 'boolean', required: false },
-        description:
-            'Whether to include an icon-only close button to dismiss it',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: true },
-        },
-        control: { type: 'boolean' },
+    control: "text",
+  },
+  dismissible: {
+    name: "dismissible",
+    type: { name: "boolean", required: false },
+    description: "Whether to include an icon-only close button to dismiss it",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: true },
     },
-    open: {
-        name: 'open',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the alert banner is open',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: true },
-        },
-        control: { type: 'boolean' },
+    control: { type: "boolean" },
+  },
+  open: {
+    name: "open",
+    type: { name: "boolean", required: false },
+    description: "Whether the alert banner is open",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: true },
     },
-    variant: {
-        name: 'variant',
-        type: { name: 'string', required: false },
-        description: 'The visual variant of the alert banner',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'neutral' },
-        },
-        control: {
-            labels: {
-                neutral: 'Neutral',
-                info: 'Info',
-                negative: 'Negative',
-            },
-            type: 'select',
-        },
-        options: ['neutral', 'info', 'negative'],
+    control: { type: "boolean" },
+  },
+  variant: {
+    name: "variant",
+    type: { name: "string", required: false },
+    description: "The visual variant of the alert banner",
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "neutral" },
     },
+    control: {
+      labels: {
+        neutral: "Neutral",
+        info: "Info",
+        negative: "Negative",
+      },
+      type: "select",
+    },
+    options: ["neutral", "info", "negative"],
+  },
 };
diff --git a/packages/alert-banner/stories/index.ts b/packages/alert-banner/stories/index.ts
index 8cfabb195a..bab2f4e8ce 100644
--- a/packages/alert-banner/stories/index.ts
+++ b/packages/alert-banner/stories/index.ts
@@ -10,27 +10,27 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import { AlertBannerVariants } from '@spectrum-web-components/alert-banner';
-import '@spectrum-web-components/alert-banner/sp-alert-banner.js';
-import '@spectrum-web-components/button/sp-button.js';
+import { AlertBannerVariants } from "@spectrum-web-components/alert-banner";
+import "@spectrum-web-components/alert-banner/sp-alert-banner.js";
+import "@spectrum-web-components/button/sp-button.js";
 
 export const AlertBannerMarkup = ({
-    text = 'Your trial has expired',
-    variant = 'neutral',
-    dismissible = true,
-    open = false,
-    actionLabel = 'Action',
+  text = "Your trial has expired",
+  variant = "neutral",
+  dismissible = true,
+  open = false,
+  actionLabel = "Action",
 }): TemplateResult => html`
-    
-        ${text}
-        
-            ${actionLabel}
-        
-    
+  
+    ${text}
+    
+      ${actionLabel}
+    
+  
 `;
diff --git a/packages/alert-banner/test/alert-banner-memory.test.ts b/packages/alert-banner/test/alert-banner-memory.test.ts
index 421049d7d8..9578e7b583 100644
--- a/packages/alert-banner/test/alert-banner-memory.test.ts
+++ b/packages/alert-banner/test/alert-banner-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import Props, { Default } from '../stories/alert-banner.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import Props, { Default } from "../stories/alert-banner.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(Default(Props.args));
diff --git a/packages/alert-banner/test/alert-banner.test.ts b/packages/alert-banner/test/alert-banner.test.ts
index 4526e1f353..ee1bfdc63c 100644
--- a/packages/alert-banner/test/alert-banner.test.ts
+++ b/packages/alert-banner/test/alert-banner.test.ts
@@ -9,208 +9,207 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { SinonStub, spy, stub } from 'sinon';
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { SinonStub, spy, stub } from "sinon";
 
-import '@spectrum-web-components/alert-banner/sp-alert-banner.js';
-import '@spectrum-web-components/button/sp-button.js';
-import { AlertBanner } from '@spectrum-web-components/alert-banner';
+import "@spectrum-web-components/alert-banner/sp-alert-banner.js";
+import "@spectrum-web-components/button/sp-button.js";
+import { AlertBanner } from "@spectrum-web-components/alert-banner";
 import {
-    escapeEvent,
-    testForLitDevWarnings,
-} from '../../../test/testing-helpers.js';
-
-describe('AlertBanner', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                Your trial will expire soon
-            `)
-    );
-    it('loads default alert-banner accessibly', async () => {
-        const el = await fixture(html`
-            Your trial will expire soon
-        `);
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
+  escapeEvent,
+  testForLitDevWarnings,
+} from "../../../test/testing-helpers.js";
+
+describe("AlertBanner", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        Your trial will expire soon
+      `),
+  );
+  it("loads default alert-banner accessibly", async () => {
+    const el = await fixture(html`
+      Your trial will expire soon
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("accepts variants", async () => {
+    const el = await fixture(html`
+      
+        Your trial will expire soon
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.getAttribute("variant")).to.equal("info");
+    expect(el.shadowRoot.querySelector("sp-icon-info")).to.exist;
+
+    el.variant = "negative";
+    await elementUpdated(el);
+
+    expect(el.getAttribute("variant")).to.equal("negative");
+    expect(el.shadowRoot.querySelector("sp-icon-alert")).to.exist;
+  });
+  it("removes variant attribute when given invalid variant", async () => {
+    const el = await fixture(html`
+      
+        Your trial will expire soon
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.getAttribute("variant")).to.be.null;
+  });
+  it("calls corresponding handler using Space or Enter key for actionable alerts", async () => {
+    const actionSpy = spy();
+    const el = await fixture(html`
+      
+        Your trial will expire soon
+         actionSpy()}>
+          Buy now
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    const buttonEl = el.querySelector("sp-button");
+
+    expect(buttonEl).to.exist;
+
+    buttonEl?.focus();
+    await sendKeys({ press: "Enter" });
+    await elementUpdated(el);
+
+    expect(actionSpy).to.be.calledOnce;
+
+    buttonEl?.focus();
+    await sendKeys({ press: "Space" });
+    await elementUpdated(el);
+
+    expect(actionSpy).to.be.calledTwice;
+  });
+
+  describe("dismiss behavior", () => {
+    it("can be dismissed by clicking the close button", async () => {
+      const el = await fixture(html`
+        
+          Your trial will expire soon
+        
+      `);
+
+      await elementUpdated(el);
+
+      const closeButton = el.shadowRoot.querySelector("sp-close-button");
+
+      expect(closeButton).to.exist;
+      expect(el.open).to.be.true;
+
+      closeButton?.click();
+      await elementUpdated(el);
+
+      expect(el.open).to.be.false;
     });
-    it('accepts variants', async () => {
-        const el = await fixture(html`
-            
-                Your trial will expire soon
-            
-        `);
+    it("can be dismissed using close button", async () => {
+      const el = await fixture(html`
+         Your trial will expire soon 
+      `);
 
-        await elementUpdated(el);
+      await elementUpdated(el);
 
-        expect(el.getAttribute('variant')).to.equal('info');
-        expect(el.shadowRoot.querySelector('sp-icon-info')).to.exist;
+      const closeButton = el.shadowRoot.querySelector("sp-close-button");
 
-        el.variant = 'negative';
-        await elementUpdated(el);
+      expect(closeButton).to.not.exist;
+      expect(el.open).to.be.true;
 
-        expect(el.getAttribute('variant')).to.equal('negative');
-        expect(el.shadowRoot.querySelector('sp-icon-alert')).to.exist;
-    });
-    it('removes variant attribute when given invalid variant', async () => {
-        const el = await fixture(html`
-            
-                Your trial will expire soon
-            
-        `);
-
-        await elementUpdated(el);
+      el.close();
+      await elementUpdated(el);
 
-        expect(el.getAttribute('variant')).to.be.null;
+      expect(el.open).to.be.false;
     });
-    it('calls corresponding handler using Space or Enter key for actionable alerts', async () => {
-        const actionSpy = spy();
-        const el = await fixture(html`
-            
-                Your trial will expire soon
-                 actionSpy()}>
-                    Buy now
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        const buttonEl = el.querySelector('sp-button');
+    it("prevent close", async () => {
+      const closeSpy = spy();
+      const el = await fixture(html`
+         {
+            event.preventDefault();
+            closeSpy();
+          }}
+        >
+          Your trial will expire soon
+        
+      `);
+
+      await elementUpdated(el);
+
+      const closeButton = el.shadowRoot.querySelector("sp-close-button");
+
+      expect(el.open).to.be.true;
+
+      closeButton?.click();
+      await elementUpdated(el);
+
+      expect(el.open).to.be.true;
+      expect(closeSpy).to.be.calledOnce;
+    });
+    it("can be closed using Escape key", async () => {
+      const closeSpy = spy();
+      const el = await fixture(html`
+         closeSpy()}>
+          Your trial will expire soon
+        
+      `);
+
+      await elementUpdated(el);
+      expect(el.open).to.be.true;
+
+      el.dispatchEvent(escapeEvent());
+      await elementUpdated(el);
+
+      expect(el.open).to.be.false;
+      expect(closeSpy).to.be.calledOnce;
+    });
+  });
 
-        expect(buttonEl).to.exist;
+  describe("dev mode", () => {
+    let consoleStub: SinonStub;
 
-        buttonEl?.focus();
-        await sendKeys({ press: 'Enter' });
-        await elementUpdated(el);
+    before(() => {
+      window.__swc.verbose = true;
+      consoleStub = stub(console, "warn");
+    });
 
-        expect(actionSpy).to.be.calledOnce;
+    after(() => {
+      window.__swc.verbose = false;
+      consoleStub.restore();
+    });
 
-        buttonEl?.focus();
-        await sendKeys({ press: 'Space' });
-        await elementUpdated(el);
+    it("should log dev warning when given invalid variant", async () => {
+      const el = await fixture(html`
+        
+          Your trial will expire soon
+        
+      `);
 
-        expect(actionSpy).to.be.calledTwice;
-    });
+      await elementUpdated(el);
 
-    describe('dismiss behavior', () => {
-        it('can be dismissed by clicking the close button', async () => {
-            const el = await fixture(html`
-                
-                    Your trial will expire soon
-                
-            `);
-
-            await elementUpdated(el);
-
-            const closeButton = el.shadowRoot.querySelector('sp-close-button');
-
-            expect(closeButton).to.exist;
-            expect(el.open).to.be.true;
-
-            closeButton?.click();
-            await elementUpdated(el);
-
-            expect(el.open).to.be.false;
-        });
-        it('can be dismissed using close button', async () => {
-            const el = await fixture(html`
-                
-                    Your trial will expire soon
-                
-            `);
-
-            await elementUpdated(el);
-
-            const closeButton = el.shadowRoot.querySelector('sp-close-button');
-
-            expect(closeButton).to.not.exist;
-            expect(el.open).to.be.true;
-
-            el.close();
-            await elementUpdated(el);
-
-            expect(el.open).to.be.false;
-        });
-        it('prevent close', async () => {
-            const closeSpy = spy();
-            const el = await fixture(html`
-                 {
-                        event.preventDefault();
-                        closeSpy();
-                    }}
-                >
-                    Your trial will expire soon
-                
-            `);
-
-            await elementUpdated(el);
-
-            const closeButton = el.shadowRoot.querySelector('sp-close-button');
-
-            expect(el.open).to.be.true;
-
-            closeButton?.click();
-            await elementUpdated(el);
-
-            expect(el.open).to.be.true;
-            expect(closeSpy).to.be.calledOnce;
-        });
-        it('can be closed using Escape key', async () => {
-            const closeSpy = spy();
-            const el = await fixture(html`
-                 closeSpy()}>
-                    Your trial will expire soon
-                
-            `);
-
-            await elementUpdated(el);
-            expect(el.open).to.be.true;
-
-            el.dispatchEvent(escapeEvent());
-            await elementUpdated(el);
-
-            expect(el.open).to.be.false;
-            expect(closeSpy).to.be.calledOnce;
-        });
-    });
+      const warning = consoleStub.getCall(0).args.at(0);
+      const expectedContent =
+        ' element expects the "variant" attribute to be one of the following';
 
-    describe('dev mode', () => {
-        let consoleStub: SinonStub;
-
-        before(() => {
-            window.__swc.verbose = true;
-            consoleStub = stub(console, 'warn');
-        });
-
-        after(() => {
-            window.__swc.verbose = false;
-            consoleStub.restore();
-        });
-
-        it('should log dev warning when given invalid variant', async () => {
-            const el = await fixture(html`
-                
-                    Your trial will expire soon
-                
-            `);
-
-            await elementUpdated(el);
-
-            const warning = consoleStub.getCall(0).args.at(0);
-            const expectedContent = ` element expects the "variant" attribute to be one of the following`;
-
-            expect(consoleStub).to.be.calledOnce;
-            expect(warning.includes(expectedContent)).to.be.true;
-            expect(warning.includes('neutral')).to.be.true;
-            expect(warning.includes('info')).to.be.true;
-            expect(warning.includes('negative')).to.be.true;
-        });
+      expect(consoleStub).to.be.calledOnce;
+      expect(warning.includes(expectedContent)).to.be.true;
+      expect(warning.includes("neutral")).to.be.true;
+      expect(warning.includes("info")).to.be.true;
+      expect(warning.includes("negative")).to.be.true;
     });
+  });
 });
diff --git a/packages/alert-banner/test/benchmark/basic-test.ts b/packages/alert-banner/test/benchmark/basic-test.ts
index feff63e9e7..b6f2cb83cd 100644
--- a/packages/alert-banner/test/benchmark/basic-test.ts
+++ b/packages/alert-banner/test/benchmark/basic-test.ts
@@ -9,10 +9,10 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/alert-banner/sp-alert-banner.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/alert-banner/sp-alert-banner.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    Sample content
+  Sample content
 `);
diff --git a/packages/alert-dialog/sp-alert-dialog.ts b/packages/alert-dialog/sp-alert-dialog.ts
index 0fd3096543..440a483506 100644
--- a/packages/alert-dialog/sp-alert-dialog.ts
+++ b/packages/alert-dialog/sp-alert-dialog.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { AlertDialog } from './src/AlertDialog.js';
+import { AlertDialog } from "./src/AlertDialog.js";
 
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
-defineElement('sp-alert-dialog', AlertDialog);
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-alert-dialog", AlertDialog);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-alert-dialog': AlertDialog;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-alert-dialog": AlertDialog;
+  }
 }
diff --git a/packages/alert-dialog/src/AlertDialog.ts b/packages/alert-dialog/src/AlertDialog.ts
index 9dde4a2f57..68fbeb7c08 100644
--- a/packages/alert-dialog/src/AlertDialog.ts
+++ b/packages/alert-dialog/src/AlertDialog.ts
@@ -10,21 +10,21 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    CSSResultArray,
-    html,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/button/sp-button.js';
-import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
-import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
-import { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';
-import { ResizeController } from '@lit-labs/observers/resize-controller.js';
-import alertStyles from './alert-dialog.css.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
+import "@spectrum-web-components/button/sp-button.js";
+import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
+import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
+import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import alertStyles from "./alert-dialog.css.js";
 
 /**
  * Type definition for alert dialog variants.
@@ -32,22 +32,22 @@ import alertStyles from './alert-dialog.css.js';
  * 'destructive', 'secondary', or ''.
  */
 export type AlertDialogVariants =
-    | 'confirmation'
-    | 'information'
-    | 'warning'
-    | 'error'
-    | 'destructive'
-    | 'secondary'
-    | '';
+  | "confirmation"
+  | "information"
+  | "warning"
+  | "error"
+  | "destructive"
+  | "secondary"
+  | "";
 
 // List of valid alert dialog variants
 export const alertDialogVariants: AlertDialogVariants[] = [
-    'confirmation',
-    'information',
-    'warning',
-    'error',
-    'destructive',
-    'secondary',
+  "confirmation",
+  "information",
+  "warning",
+  "error",
+  "destructive",
+  "secondary",
 ];
 
 /**
@@ -55,24 +55,24 @@ export const alertDialogVariants: AlertDialogVariants[] = [
  * If an element does not have an ID, a new one is generated and assigned.
  */
 function gatherAppliedIdsFromSlottedChildren(
-    slot: HTMLSlotElement,
-    idBase: string
+  slot: HTMLSlotElement,
+  idBase: string,
 ): string[] {
-    const assignedElements = slot.assignedElements();
-    const ids: string[] = [];
+  const assignedElements = slot.assignedElements();
+  const ids: string[] = [];
 
-    assignedElements.forEach((el) => {
-        if (el.id) {
-            ids.push(el.id);
-        } else {
-            const id = idBase + `-${randomID()}`;
+  assignedElements.forEach((el) => {
+    if (el.id) {
+      ids.push(el.id);
+    } else {
+      const id = idBase + `-${randomID()}`;
 
-            el.id = id;
-            ids.push(id);
-        }
-    });
+      el.id = id;
+      ids.push(id);
+    }
+  });
 
-    return ids;
+  return ids;
 }
 
 /**
@@ -83,217 +83,211 @@ function gatherAppliedIdsFromSlottedChildren(
  * deep customization of the content to be included in the overlay.
  */
 export class AlertDialog extends FocusVisiblePolyfillMixin(SpectrumElement) {
-    public static override get styles(): CSSResultArray {
-        return [alertStyles];
+  public static override get styles(): CSSResultArray {
+    return [alertStyles];
+  }
+
+  @query(".content")
+  private contentElement!: HTMLDivElement;
+
+  // Resize controller to manage tab order for scrolling
+  private resizeController = new ResizeController(this, {
+    callback: () => {
+      this.shouldManageTabOrderForScrolling();
+    },
+  });
+
+  public _variant: AlertDialogVariants = "";
+
+  /**
+   * The variant applies specific styling when set to a valid variant.
+   * The `variant` attribute is removed when it's passed an invalid variant.
+   */
+  @property({ type: String, reflect: true })
+  public set variant(variant: AlertDialogVariants) {
+    if (variant === this.variant) {
+      return;
     }
 
-    @query('.content')
-    private contentElement!: HTMLDivElement;
+    const oldValue = this.variant;
 
-    // Resize controller to manage tab order for scrolling
-    private resizeController = new ResizeController(this, {
-        callback: () => {
-            this.shouldManageTabOrderForScrolling();
-        },
-    });
+    if (alertDialogVariants.includes(variant)) {
+      this.setAttribute("variant", variant);
+      this._variant = variant;
+    } else {
+      this.removeAttribute("variant");
+      this._variant = "";
+    }
 
-    public _variant: AlertDialogVariants = '';
+    this.requestUpdate("variant", oldValue);
+  }
 
-    /**
-     * The variant applies specific styling when set to a valid variant.
-     * The `variant` attribute is removed when it's passed an invalid variant.
-     */
-    @property({ type: String, reflect: true })
-    public set variant(variant: AlertDialogVariants) {
-        if (variant === this.variant) {
-            return;
-        }
+  public get variant(): AlertDialogVariants {
+    return this._variant;
+  }
 
-        const oldValue = this.variant;
+  /**
+   * Renders the appropriate icon based on the variant.
+   */
+  protected renderIcon(): TemplateResult {
+    switch (this.variant) {
+      case "warning":
+      case "error":
+        return html`  `;
 
-        if (alertDialogVariants.includes(variant)) {
-            this.setAttribute('variant', variant);
-            this._variant = variant;
-        } else {
-            this.removeAttribute('variant');
-            this._variant = '';
-        }
-
-        this.requestUpdate('variant', oldValue);
+      default:
+        return html``;
     }
-
-    public get variant(): AlertDialogVariants {
-        return this._variant;
+  }
+
+  /**
+   * Renders the heading slot.
+   */
+  protected renderHeading(): TemplateResult {
+    return html`
+      
+    `;
+  }
+
+  /**
+   * Renders the content slot.
+   */
+  protected renderContent(): TemplateResult {
+    return html`
+      

+        
+      

+    `;
+  }
+
+  // Static instance count for generating unique IDs
+  static instanceCount = 0;
+
+  // ID for the labelledby attribute
+  private labelledbyId = `sp-dialog-label-${AlertDialog.instanceCount++}`;
+
+  // Condition for setting the labelledby attribute
+  private conditionLabelledby?: () => void;
+
+  // Condition for setting the describedby attribute
+  private conditionDescribedby?: () => void;
+
+  /**
+   * Handles the slotchange event for the heading slot.
+   * Updates the aria-labelledby attribute based on the slotted elements.
+   */
+  private onHeadingSlotchange({
+    target,
+  }: Event & { target: HTMLSlotElement }): void {
+    if (this.conditionLabelledby) {
+      this.conditionLabelledby();
+      delete this.conditionLabelledby;
     }
 
-    /**
-     * Renders the appropriate icon based on the variant.
-     */
-    protected renderIcon(): TemplateResult {
-        switch (this.variant) {
-            case 'warning':
-            case 'error':
-                return html`
-                    
-                `;
-
-            default:
-                return html``;
-        }
-    }
+    const ids = gatherAppliedIdsFromSlottedChildren(target, this.labelledbyId);
 
-    /**
-     * Renders the heading slot.
-     */
-    protected renderHeading(): TemplateResult {
-        return html`
-            
-        `;
+    if (ids.length) {
+      this.conditionLabelledby = conditionAttributeWithId(
+        this,
+        "aria-labelledby",
+        ids,
+      );
     }
-
-    /**
-     * Renders the content slot.
-     */
-    protected renderContent(): TemplateResult {
-        return html`
-            

-                
-            

-        `;
+  }
+
+  /**
+   * Manages the tab order for scrolling within the content element.
+   * Adds or removes the tabindex attribute based on the scroll height.
+   */
+  public shouldManageTabOrderForScrolling = (): void => {
+    if (!this.contentElement) {
+      return;
     }
 
-    // Static instance count for generating unique IDs
-    static instanceCount = 0;
-
-    // ID for the labelledby attribute
-    private labelledbyId = `sp-dialog-label-${AlertDialog.instanceCount++}`;
+    const { offsetHeight, scrollHeight } = this.contentElement;
 
-    // Condition for setting the labelledby attribute
-    private conditionLabelledby?: () => void;
-
-    // Condition for setting the describedby attribute
-    private conditionDescribedby?: () => void;
-
-    /**
-     * Handles the slotchange event for the heading slot.
-     * Updates the aria-labelledby attribute based on the slotted elements.
-     */
-    private onHeadingSlotchange({
-        target,
-    }: Event & { target: HTMLSlotElement }): void {
-        if (this.conditionLabelledby) {
-            this.conditionLabelledby();
-            delete this.conditionLabelledby;
-        }
+    if (offsetHeight < scrollHeight) {
+      this.contentElement.tabIndex = 0;
+    } else {
+      this.contentElement.removeAttribute("tabindex");
+    }
+  };
+
+  // ID for the describedby attribute
+  private describedbyId = `sp-dialog-description-${AlertDialog.instanceCount++}`;
+
+  /**
+   * Handles the slotchange event for the content slot.
+   * Observes the content element for resizing and updates the aria-describedby attribute.
+   */
+  protected onContentSlotChange({
+    target,
+  }: Event & { target: HTMLSlotElement }): void {
+    requestAnimationFrame(() => {
+      // Can happen more than once. Take this.contentElement out
+      // of the observer before adding it again.
+      this.resizeController.unobserve(this.contentElement);
+      this.resizeController.observe(this.contentElement);
+    });
 
-        const ids = gatherAppliedIdsFromSlottedChildren(
-            target,
-            this.labelledbyId
-        );
-
-        if (ids.length) {
-            this.conditionLabelledby = conditionAttributeWithId(
-                this,
-                'aria-labelledby',
-                ids
-            );
-        }
+    if (this.conditionDescribedby) {
+      this.conditionDescribedby();
+      delete this.conditionDescribedby;
     }
 
-    /**
-     * Manages the tab order for scrolling within the content element.
-     * Adds or removes the tabindex attribute based on the scroll height.
-     */
-    public shouldManageTabOrderForScrolling = (): void => {
-        if (!this.contentElement) return;
+    const ids = gatherAppliedIdsFromSlottedChildren(target, this.describedbyId);
 
-        const { offsetHeight, scrollHeight } = this.contentElement;
+    if (ids.length && ids.length < 4) {
+      this.conditionDescribedby = conditionAttributeWithId(
+        this,
+        "aria-describedby",
+        ids,
+      );
+    } else if (!ids.length) {
+      const idProvided = !!this.id;
 
-        if (offsetHeight < scrollHeight) {
-            this.contentElement.tabIndex = 0;
-        } else {
-            this.contentElement.removeAttribute('tabindex');
-        }
-    };
-
-    // ID for the describedby attribute
-    private describedbyId = `sp-dialog-description-${AlertDialog.instanceCount++}`;
-
-    /**
-     * Handles the slotchange event for the content slot.
-     * Observes the content element for resizing and updates the aria-describedby attribute.
-     */
-    protected onContentSlotChange({
-        target,
-    }: Event & { target: HTMLSlotElement }): void {
-        requestAnimationFrame(() => {
-            // Can happen more than once. Take this.contentElement out
-            // of the observer before adding it again.
-            this.resizeController.unobserve(this.contentElement);
-            this.resizeController.observe(this.contentElement);
-        });
-
-        if (this.conditionDescribedby) {
-            this.conditionDescribedby();
-            delete this.conditionDescribedby;
-        }
+      if (!idProvided) {
+        this.id = this.describedbyId;
+      }
 
-        const ids = gatherAppliedIdsFromSlottedChildren(
-            target,
-            this.describedbyId
-        );
-
-        if (ids.length && ids.length < 4) {
-            this.conditionDescribedby = conditionAttributeWithId(
-                this,
-                'aria-describedby',
-                ids
-            );
-        } else if (!ids.length) {
-            const idProvided = !!this.id;
-
-            if (!idProvided) this.id = this.describedbyId;
-
-            const conditionDescribedby = conditionAttributeWithId(
-                this,
-                'aria-describedby',
-                this.id
-            );
-
-            this.conditionDescribedby = () => {
-                conditionDescribedby();
-
-                if (!idProvided) {
-                    this.removeAttribute('id');
-                }
-            };
-        }
-    }
+      const conditionDescribedby = conditionAttributeWithId(
+        this,
+        "aria-describedby",
+        this.id,
+      );
 
-    /**
-     * Renders the buttons slot.
-     */
-    protected renderButtons(): TemplateResult {
-        return html`
-            
-                
-            
-        `;
-    }
+      this.conditionDescribedby = () => {
+        conditionDescribedby();
 
-    /**
-     * Renders the alert dialog template.
-     * Includes the header, content, and buttons.
-     */
-    protected override render(): TemplateResult {
-        return html`
-            

-                

-                    ${this.renderHeading()} ${this.renderIcon()}
-                

-                
-                ${this.renderContent()} ${this.renderButtons()}
-            

-        `;
+        if (!idProvided) {
+          this.removeAttribute("id");
+        }
+      };
     }
+  }
+
+  /**
+   * Renders the buttons slot.
+   */
+  protected renderButtons(): TemplateResult {
+    return html`
+      
+        
+      
+    `;
+  }
+
+  /**
+   * Renders the alert dialog template.
+   * Includes the header, content, and buttons.
+   */
+  protected override render(): TemplateResult {
+    return html`
+      

+        
${this.renderHeading()} ${this.renderIcon()}

+        
+        ${this.renderContent()} ${this.renderButtons()}
+      

+    `;
+  }
 }
diff --git a/packages/alert-dialog/src/index.ts b/packages/alert-dialog/src/index.ts
index 25ee809c32..541ae52596 100644
--- a/packages/alert-dialog/src/index.ts
+++ b/packages/alert-dialog/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './AlertDialog.js';
+export * from "./AlertDialog.js";
diff --git a/packages/alert-dialog/stories/alert-dialog.stories.ts b/packages/alert-dialog/stories/alert-dialog.stories.ts
index cdcf7758ab..9286857ad3 100644
--- a/packages/alert-dialog/stories/alert-dialog.stories.ts
+++ b/packages/alert-dialog/stories/alert-dialog.stories.ts
@@ -10,177 +10,176 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/alert-dialog/sp-alert-dialog.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/alert-dialog/sp-alert-dialog.js";
 
 export default {
-    title: 'Alert Dialog',
-    component: 'sp-alert-dialog',
+  title: "Alert Dialog",
+  component: "sp-alert-dialog",
 };
 
 export const confirmation = (): TemplateResult => {
-    return html`
-        
-            
Disclaimer

-            Smart filters are nondestructive and will preserve your original
-            images.
-            
-                Cancel
-            
-            
-                Enable
-            
-        
-    `;
+  return html`
+    
+      
Disclaimer

+      Smart filters are nondestructive and will preserve your original images.
+      
+        Cancel
+      
+      
+        Enable
+      
+    
+  `;
 };
 
 export const information = (): TemplateResult => {
-    return html`
-        
-            
Connect to wifi

-            Please connect to wifi to sync your projects or go to Settings to
-            change your preferences.
-            
-                Cancel
-            
-            
-                Continue
-            
-        
-    `;
+  return html`
+    
+      
Connect to wifi

+      Please connect to wifi to sync your projects or go to Settings to change
+      your preferences.
+      
+        Cancel
+      
+      
+        Continue
+      
+    
+  `;
 };
 
 export const warning = (): TemplateResult => {
-    return html`
-        
-            
Unverified format

-            This format has not been verified and may not be viewable for some
-            users. Do you want to continue publishing?
-            
-                Cancel
-            
-            
-                Continue
-            
-        
-    `;
+  return html`
+    
+      
Unverified format

+      This format has not been verified and may not be viewable for some users.
+      Do you want to continue publishing?
+      
+        Cancel
+      
+      
+        Continue
+      
+    
+  `;
 };
 
 export const error = (): TemplateResult => {
-    return html`
-        
-            
Unable to share

-            An error occured while sharing your project. Please verify the email
-            address and try again.
-            
-                Continue
-            
-        
-    `;
+  return html`
+    
+      
Unable to share

+      An error occured while sharing your project. Please verify the email
+      address and try again.
+      
+        Continue
+      
+    
+  `;
 };
 
 export const destructive = (): TemplateResult => {
-    return html`
-        
-            
Delete 3 documents?

-            Are you sure you want to delete the 3 selected documents?
-            
-                Cancel
-            
-            
-                Delete
-            
-        
-    `;
+  return html`
+    
+      
Delete 3 documents?

+      Are you sure you want to delete the 3 selected documents?
+      
+        Cancel
+      
+      
+        Delete
+      
+    
+  `;
 };
 
 export const secondary = (): TemplateResult => {
-    return html`
-        
-            
Rate this app

-            If you enjoy our app, would you mind taking a moment to rate it?
-            
-                No, thanks
-            
-            
-                Remind me later
-            
-            
-                Rate now
-            
-        
-    `;
+  return html`
+    
+      
Rate this app

+      If you enjoy our app, would you mind taking a moment to rate it?
+      
+        No, thanks
+      
+      
+        Remind me later
+      
+      
+        Rate now
+      
+    
+  `;
 };
diff --git a/packages/alert-dialog/test/alert-dialog-memory.test.ts b/packages/alert-dialog/test/alert-dialog-memory.test.ts
index 0acb834e89..f40dd0ac0f 100644
--- a/packages/alert-dialog/test/alert-dialog-memory.test.ts
+++ b/packages/alert-dialog/test/alert-dialog-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { confirmation } from '../stories/alert-dialog.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { confirmation } from "../stories/alert-dialog.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(confirmation());
diff --git a/packages/alert-dialog/test/alert-dialog.test.ts b/packages/alert-dialog/test/alert-dialog.test.ts
index 71a4aba66d..fb4b212a64 100644
--- a/packages/alert-dialog/test/alert-dialog.test.ts
+++ b/packages/alert-dialog/test/alert-dialog.test.ts
@@ -9,94 +9,94 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';
-import { html } from '@spectrum-web-components/base';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/alert-dialog/sp-alert-dialog.js';
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import { elementUpdated, expect, fixture, nextFrame } from "@open-wc/testing";
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/alert-dialog/sp-alert-dialog.js";
 import {
-    AlertDialog,
-    alertDialogVariants,
-} from '@spectrum-web-components/alert-dialog';
-import { Button } from '@spectrum-web-components/button/src/Button.js';
+  AlertDialog,
+  alertDialogVariants,
+} from "@spectrum-web-components/alert-dialog";
+import { Button } from "@spectrum-web-components/button/src/Button.js";
 import {
-    confirmation,
-    secondary,
-    warning,
-} from '../stories/alert-dialog.stories.js';
+  confirmation,
+  secondary,
+  warning,
+} from "../stories/alert-dialog.stories.js";
 
-describe('AlertDialog', () => {
-    it('renders confirmation variant accessible', async () => {
-        const el = await fixture(confirmation());
+describe("AlertDialog", () => {
+  it("renders confirmation variant accessible", async () => {
+    const el = await fixture(confirmation());
 
-        await elementUpdated(el);
-        await expect(el).to.be.accessible();
-    });
-    it('warning variant renders with an alert icon', async () => {
-        const el = await fixture(warning());
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("warning variant renders with an alert icon", async () => {
+    const el = await fixture(warning());
 
-        await elementUpdated(el);
-        const alertIcon = el.shadowRoot.querySelector('sp-icon-alert');
+    await elementUpdated(el);
+    const alertIcon = el.shadowRoot.querySelector("sp-icon-alert");
 
-        expect(alertIcon).to.be.not.null;
-    });
-    it('secondary variant renders with `confirm`, `cancel` and `secondary` buttons', async () => {
-        const el = await fixture(secondary());
+    expect(alertIcon).to.be.not.null;
+  });
+  it("secondary variant renders with `confirm`, `cancel` and `secondary` buttons", async () => {
+    const el = await fixture(secondary());
 
-        await elementUpdated(el);
-        const confirmButton = el.querySelector('#confirmButton') as Button;
-        const cancelButton = el.querySelector('#cancelButton') as Button;
-        const secondaryButton = el.querySelector('#secondaryButton') as Button;
+    await elementUpdated(el);
+    const confirmButton = el.querySelector("#confirmButton") as Button;
+    const cancelButton = el.querySelector("#cancelButton") as Button;
+    const secondaryButton = el.querySelector("#secondaryButton") as Button;
 
-        expect(confirmButton).to.be.not.null;
-        expect(cancelButton).to.be.not.null;
-        expect(secondaryButton).to.be.not.null;
-    });
-    it('validates variants', async () => {
-        const el = await fixture(html`
-            
-                This Alert Dialog validates variants.
-            
-        `);
+    expect(confirmButton).to.be.not.null;
+    expect(cancelButton).to.be.not.null;
+    expect(secondaryButton).to.be.not.null;
+  });
+  it("validates variants", async () => {
+    const el = await fixture(html`
+      
+        This Alert Dialog validates variants.
+      
+    `);
 
-        await elementUpdated(el);
-        expect(el.variant).to.equal('');
+    await elementUpdated(el);
+    expect(el.variant).to.equal("");
 
-        el.variant = alertDialogVariants[0];
+    el.variant = alertDialogVariants[0];
 
-        await elementUpdated(el);
-        expect(el.variant).to.equal(alertDialogVariants[0]);
+    await elementUpdated(el);
+    expect(el.variant).to.equal(alertDialogVariants[0]);
 
-        el.variant = alertDialogVariants[0];
+    el.variant = alertDialogVariants[0];
 
-        await elementUpdated(el);
-        expect(el.variant).to.equal(alertDialogVariants[0]);
-    });
-    it('does not recycle applied content ids', async () => {
-        const el = await fixture(html`
-            
-                
Disclaimer

-                
Initial paragraph.

-            
-        `);
+    await elementUpdated(el);
+    expect(el.variant).to.equal(alertDialogVariants[0]);
+  });
+  it("does not recycle applied content ids", async () => {
+    const el = await fixture(html`
+      
+        
Disclaimer

+        
Initial paragraph.

+      
+    `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
+    await expect(el).to.be.accessible();
 
-        const paragraph = document.createElement('p');
+    const paragraph = document.createElement("p");
 
-        paragraph.textContent = 'Added paragraph.';
+    paragraph.textContent = "Added paragraph.";
 
-        const target = el.querySelector('p') as HTMLParagraphElement;
+    const target = el.querySelector("p") as HTMLParagraphElement;
 
-        target.insertAdjacentElement('beforebegin', paragraph);
+    target.insertAdjacentElement("beforebegin", paragraph);
 
-        await nextFrame();
+    await nextFrame();
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
+    await expect(el).to.be.accessible();
+  });
 });
diff --git a/packages/alert-dialog/test/benchmark/basic-test.ts b/packages/alert-dialog/test/benchmark/basic-test.ts
index 3c1e1ce186..3591c01851 100644
--- a/packages/alert-dialog/test/benchmark/basic-test.ts
+++ b/packages/alert-dialog/test/benchmark/basic-test.ts
@@ -9,32 +9,32 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/alert-dialog/sp-alert-dialog.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/alert-dialog/sp-alert-dialog.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
Disclaimer

-        Smart filters are nondestructive and will preserve your original images.
-        
-            Cancel
-        
-        
-            Enable
-        
-    
+  
+    
Disclaimer

+    Smart filters are nondestructive and will preserve your original images.
+    
+      Cancel
+    
+    
+      Enable
+    
+  
 `);
diff --git a/packages/asset/sp-asset.ts b/packages/asset/sp-asset.ts
index 707d378e25..68287522f3 100644
--- a/packages/asset/sp-asset.ts
+++ b/packages/asset/sp-asset.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Asset } from './src/Asset.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Asset } from "./src/Asset.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-asset', Asset);
+defineElement("sp-asset", Asset);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-asset': Asset;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-asset": Asset;
+  }
 }
diff --git a/packages/asset/src/Asset.ts b/packages/asset/src/Asset.ts
index d599c57076..33ef689ab9 100644
--- a/packages/asset/src/Asset.ts
+++ b/packages/asset/src/Asset.ts
@@ -11,14 +11,14 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+  CSSResultArray,
+  html,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
 
-import styles from './asset.css.js';
+import styles from "./asset.css.js";
 
 /**
  * Generates and SVG element with a label for a file icon.
@@ -26,21 +26,21 @@ import styles from './asset.css.js';
  * @param label - the `aria-label` for the SVG element
  */
 const file = (label: string): TemplateResult => html`
-    
-        
-        
-    
+  
+    
+    
+  
 `;
 
 /**
@@ -49,21 +49,21 @@ const file = (label: string): TemplateResult => html`
  * @param label - the `aria-label` for the SVG element
  */
 const folder = (label: string): TemplateResult => html`
-    
-        
-        
-    
+  
+    
+    
+  
 `;
 
 /**
@@ -73,38 +73,36 @@ const folder = (label: string): TemplateResult => html`
  *
  */
 export class Asset extends SpectrumElement {
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    /**
-     * The type of asset to display, either 'file' or 'folder'.
-     */
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
 
-    @property({ type: String, reflect: true })
-    public variant: 'file' | 'folder' | undefined;
+  /**
+   * The type of asset to display, either 'file' or 'folder'.
+   */
 
-    /**
-     * The label for the file icon.
-     */
-    @property()
-    public label = '';
+  @property({ type: String, reflect: true })
+  public variant: "file" | "folder" | undefined;
 
-    /**
-     * Renders the asset template based on the variant.
-     * If the variant is 'file', it renders the file icon.
-     * If the variant is 'folder', it renders the folder icon.
-     * Otherwise, it renders the default slot content.
-     */
-    protected override render(): TemplateResult {
-        if (this.variant === 'file') {
-            return file(this.label);
-        } else if (this.variant === 'folder') {
-            return folder(this.label);
-        }
+  /**
+   * The label for the file icon.
+   */
+  @property()
+  public label = "";
 
-        return html`
-            
-        `;
+  /**
+   * Renders the asset template based on the variant.
+   * If the variant is 'file', it renders the file icon.
+   * If the variant is 'folder', it renders the folder icon.
+   * Otherwise, it renders the default slot content.
+   */
+  protected override render(): TemplateResult {
+    if (this.variant === "file") {
+      return file(this.label);
+    } else if (this.variant === "folder") {
+      return folder(this.label);
     }
+
+    return html`  `;
+  }
 }
diff --git a/packages/asset/src/index.ts b/packages/asset/src/index.ts
index 1f87a3814b..668bc54970 100644
--- a/packages/asset/src/index.ts
+++ b/packages/asset/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './Asset.js';
+export * from "./Asset.js";
diff --git a/packages/asset/stories/asset.stories.ts b/packages/asset/stories/asset.stories.ts
index 5119e4e6d1..5abb40312d 100644
--- a/packages/asset/stories/asset.stories.ts
+++ b/packages/asset/stories/asset.stories.ts
@@ -16,22 +16,22 @@ import "@spectrum-web-components/asset/sp-asset.js";
 import { portrait } from "../../card/stories/images.js";
 
 export default {
-	title: "Asset",
-	component: "sp-asset",
+  title: "Asset",
+  component: "sp-asset",
 };
 
 export const Default = (): TemplateResult => {
-	return html`
-		
-			Demo Graphic
-		
-	`;
+  return html`
+    
+      Demo Graphic
+    
+  `;
 };
 
 export const File = (): TemplateResult => {
-	return html`  `;
+  return html`  `;
 };
 
 export const Folder = (): TemplateResult => {
-	return html`  `;
+  return html`  `;
 };
diff --git a/packages/asset/test/asset-memory.test.ts b/packages/asset/test/asset-memory.test.ts
index 44cab733b5..90a8bb318c 100644
--- a/packages/asset/test/asset-memory.test.ts
+++ b/packages/asset/test/asset-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Default } from '../stories/asset.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/asset.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(Default());
diff --git a/packages/asset/test/asset.test.ts b/packages/asset/test/asset.test.ts
index 2d23763009..c872c4ff9f 100644
--- a/packages/asset/test/asset.test.ts
+++ b/packages/asset/test/asset.test.ts
@@ -17,26 +17,26 @@ import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 import { Default, File, Folder } from "../stories/asset.stories.js";
 
 describe("Asset", () => {
-	testForLitDevWarnings(async () => await fixture(Default()));
-	it("loads default asset accessibly", async () => {
-		const el = await fixture(Default());
+  testForLitDevWarnings(async () => await fixture(Default()));
+  it("loads default asset accessibly", async () => {
+    const el = await fixture(Default());
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await expect(el).to.be.accessible();
-	});
-	it('loads [variant="file"] accessibly', async () => {
-		const el = await fixture(File());
+    await expect(el).to.be.accessible();
+  });
+  it('loads [variant="file"] accessibly', async () => {
+    const el = await fixture(File());
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await expect(el).to.be.accessible();
-	});
-	it('loads [variant="folder"] accessibly', async () => {
-		const el = await fixture(Folder());
+    await expect(el).to.be.accessible();
+  });
+  it('loads [variant="folder"] accessibly', async () => {
+    const el = await fixture(Folder());
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await expect(el).to.be.accessible();
-	});
+    await expect(el).to.be.accessible();
+  });
 });
diff --git a/packages/asset/test/benchmark/basic-test.ts b/packages/asset/test/benchmark/basic-test.ts
index d8614605ea..f30f970267 100644
--- a/packages/asset/test/benchmark/basic-test.ts
+++ b/packages/asset/test/benchmark/basic-test.ts
@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/asset/sp-asset.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/asset/sp-asset.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/avatar/sp-avatar.ts b/packages/avatar/sp-avatar.ts
index 2e7f5524ac..985e5854a2 100644
--- a/packages/avatar/sp-avatar.ts
+++ b/packages/avatar/sp-avatar.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Avatar } from './src/Avatar.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Avatar } from "./src/Avatar.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-avatar', Avatar);
+defineElement("sp-avatar", Avatar);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-avatar': Avatar;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-avatar": Avatar;
+  }
 }
diff --git a/packages/avatar/src/Avatar.ts b/packages/avatar/src/Avatar.ts
index deda02a942..f1d944e305 100644
--- a/packages/avatar/src/Avatar.ts
+++ b/packages/avatar/src/Avatar.ts
@@ -11,20 +11,20 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-
-import avatarStyles from './avatar.css.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+
+import avatarStyles from "./avatar.css.js";
 /**
  * Defines the possible sizes for the avatar.
  */
@@ -44,88 +44,88 @@ const defaultSize = validSizes[2];
  * @element sp-avatar
  */
 export class Avatar extends LikeAnchor(Focusable) {
-    public static override get styles(): CSSResultArray {
-        return [avatarStyles];
+  public static override get styles(): CSSResultArray {
+    return [avatarStyles];
+  }
+
+  @query("#link")
+  anchorElement!: HTMLAnchorElement;
+
+  public override get focusElement(): HTMLElement {
+    return this.anchorElement || this;
+  }
+
+  /**
+   * The source URL for the avatar image.
+   */
+  @property()
+  public src = "";
+
+  /**
+   * The size of the avatar, which can be one of the predefined values.
+   * The size is reflected as an attribute and defaults to `100` if an invalid size is provided.
+   */
+  @property({ type: Number, reflect: true })
+  public get size(): AvatarSize {
+    return this._size;
+  }
+
+  public set size(value: AvatarSize) {
+    const size = value;
+    const validSize = (
+      validSizes.includes(size) ? size : defaultSize
+    ) as AvatarSize;
+
+    if (validSize) {
+      this.setAttribute("size", `${validSize}`);
     }
 
-    @query('#link')
-    anchorElement!: HTMLAnchorElement;
-
-    public override get focusElement(): HTMLElement {
-        return this.anchorElement || this;
-    }
-
-    /**
-     * The source URL for the avatar image.
-     */
-    @property()
-    public src = '';
-
-    /**
-     * The size of the avatar, which can be one of the predefined values.
-     * The size is reflected as an attribute and defaults to `100` if an invalid size is provided.
-     */
-    @property({ type: Number, reflect: true })
-    public get size(): AvatarSize {
-        return this._size;
+    if (this._size === validSize) {
+      return;
     }
 
-    public set size(value: AvatarSize) {
-        const size = value;
-        const validSize = (
-            validSizes.includes(size) ? size : defaultSize
-        ) as AvatarSize;
-
-        if (validSize) {
-            this.setAttribute('size', `${validSize}`);
-        }
-
-        if (this._size === validSize) {
-            return;
-        }
-
-        const oldSize = this._size;
-
-        this._size = validSize;
-        this.requestUpdate('size', oldSize);
+    const oldSize = this._size;
+
+    this._size = validSize;
+    this.requestUpdate("size", oldSize);
+  }
+
+  private _size = defaultSize;
+
+  /**
+   * Renders the avatar template.
+   * If the href property is set, renders the avatar as a link.
+   * Otherwise, renders the avatar as an image.
+   */
+  protected override render(): TemplateResult {
+    const avatar = html`
+      ${ifDefined(this.label
+    `;
+
+    if (this.href) {
+      return this.renderAnchor({
+        id: "link",
+        className: "link",
+        anchorContent: avatar,
+      });
     }
 
-    private _size = defaultSize;
-
-    /**
-     * Renders the avatar template.
-     * If the href property is set, renders the avatar as a link.
-     * Otherwise, renders the avatar as an image.
-     */
-    protected override render(): TemplateResult {
-        const avatar = html`
-            ${ifDefined(this.label
-        `;
-
-        if (this.href) {
-            return this.renderAnchor({
-                id: 'link',
-                className: 'link',
-                anchorContent: avatar,
-            });
-        }
-
-        return avatar;
-    }
+    return avatar;
+  }
 
-    /**
-     * Called when the element is first updated.
-     * Ensures the size attribute is set if it is not already present.
-     */
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
+  /**
+   * Called when the element is first updated.
+   * Ensures the size attribute is set if it is not already present.
+   */
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
 
-        if (!this.hasAttribute('size')) {
-            this.setAttribute('size', `${this.size}`);
-        }
+    if (!this.hasAttribute("size")) {
+      this.setAttribute("size", `${this.size}`);
     }
+  }
 }
diff --git a/packages/avatar/src/index.ts b/packages/avatar/src/index.ts
index 240c613ebb..1fc07c3aa0 100755
--- a/packages/avatar/src/index.ts
+++ b/packages/avatar/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Avatar.js';
+export * from "./Avatar.js";
diff --git a/packages/avatar/stories/avatar.stories.ts b/packages/avatar/stories/avatar.stories.ts
index c8a51c495c..cb51eb20d0 100644
--- a/packages/avatar/stories/avatar.stories.ts
+++ b/packages/avatar/stories/avatar.stories.ts
@@ -16,70 +16,70 @@ import { AvatarSize } from "@spectrum-web-components/avatar";
 import { avatar } from "./images.js";
 
 export default {
-	component: "sp-avatar",
-	title: "Avatar",
-	argTypes: {
-		disabled: { control: "boolean" },
-		label: { control: "text" },
-		src: { control: "text" },
-	},
-	args: {
-		disabled: false,
-		label: "Place dog",
-		src: avatar,
-	},
+  component: "sp-avatar",
+  title: "Avatar",
+  argTypes: {
+    disabled: { control: "boolean" },
+    label: { control: "text" },
+    src: { control: "text" },
+  },
+  args: {
+    disabled: false,
+    label: "Place dog",
+    src: avatar,
+  },
 };
 
 interface StoryArgs {
-	disabled?: boolean;
-	label?: string;
-	src?: string;
-	size?: AvatarSize;
+  disabled?: boolean;
+  label?: string;
+  src?: string;
+  size?: AvatarSize;
 }
 
 const Template = ({
-	label = "Place Dog",
-	src = avatar,
-	size = 100,
+  label = "Place Dog",
+  src = avatar,
+  size = 100,
 }: StoryArgs = {}): TemplateResult => {
-	return html`  `;
+  return html`  `;
 };
 
 const Link = ({
-	disabled = false,
-	label = "Place Dog",
-	src = avatar,
-	size = 100,
+  disabled = false,
+  label = "Place Dog",
+  src = avatar,
+  size = 100,
 }: StoryArgs = {}): TemplateResult => {
-	return html`
-		
-	`;
+  return html`
+    
+  `;
 };
 
 export const size50 = (args: StoryArgs = {}): TemplateResult =>
-	Template({ ...args, size: 50 });
+  Template({ ...args, size: 50 });
 export const size75 = (args: StoryArgs = {}): TemplateResult =>
-	Template({ ...args, size: 75 });
+  Template({ ...args, size: 75 });
 export const size100 = (args: StoryArgs = {}): TemplateResult =>
-	Template({ ...args, size: 100 });
+  Template({ ...args, size: 100 });
 export const size200 = (args: StoryArgs = {}): TemplateResult =>
-	Template({ ...args, size: 200 });
+  Template({ ...args, size: 200 });
 export const size300 = (args: StoryArgs = {}): TemplateResult =>
-	Template({ ...args, size: 300 });
+  Template({ ...args, size: 300 });
 export const size400 = (args: StoryArgs = {}): TemplateResult =>
-	Template({ ...args, size: 400 });
+  Template({ ...args, size: 400 });
 export const size500 = (args: StoryArgs = {}): TemplateResult =>
-	Template({ ...args, size: 500 });
+  Template({ ...args, size: 500 });
 export const size600 = (args: StoryArgs = {}): TemplateResult =>
-	Template({ ...args, size: 600 });
+  Template({ ...args, size: 600 });
 export const size700 = (args: StoryArgs = {}): TemplateResult =>
-	Template({ ...args, size: 700 });
+  Template({ ...args, size: 700 });
 export const linked = (args: StoryArgs = {}): TemplateResult => Link(args);
 export const disabled = (args: StoryArgs = {}): TemplateResult => Link(args);
 disabled.args = { disabled: true };
diff --git a/packages/avatar/stories/images.ts b/packages/avatar/stories/images.ts
index 4562f10b8b..2a0c2344b8 100644
--- a/packages/avatar/stories/images.ts
+++ b/packages/avatar/stories/images.ts
@@ -11,4 +11,4 @@ governing permissions and limitations under the License.
 */
 
 export const avatar =
-    'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAyADIDASIAAhEBAxEB/8QAHAAAAgIDAQEAAAAAAAAAAAAAAAcFCAMEBgIJ/8QAMhAAAgEDBAEBBgYABwAAAAAAAQIDBAURAAYSITEHEyJBUWGBFBUjMnGhCCU1QmKisf/EABkBAAMBAQEAAAAAAAAAAAAAAAMEBQIGAf/EACoRAAICAAMHAwUBAAAAAAAAAAECAAMRITEEBRITQVGhYXHwFBUiY5Gx/9oADAMBAAIRAxEAPwD6b0VwFTIQYXUD4ka3I5AwOAcZ+OldD6+2H9BI6iB5JDjgHGdbq+uu3BKEkqUhfOG5Hr7agV7y2XTmgwmUZI4YyM68kjj40urr6x0dMjR0UXt5mAKs59zB7z0e9chQ+sNw3JE1TR1oSBWZAY4woYqxBODk+R/WriVs6gjrF3uRNY8SyY94gfLUfcHqWXjTFQR5JOk5UeodfDVwQT1rNLNyaMMAOZAyQCB5x3j6H5HUpat5x3J5va1M6zAAcSfOktqFlKliPx6nHT3m67UsyE7Vqq8cjhofPz0a5bpuxLLg9/u0ag/WHv5Ea4ZQikrWRwp5lR2so850xdpx1W6kelt9FNWPGAZJQAFQH5kkDvB0+H9JtjQXmko5LVSrBURlIVpmaWRpBkkcRk/tBOdRV1itu09wT2Gx0wpKdCG4FChZiikswPee/j8tC2bcvOs4LXAHprErEapOIyGhtlzsdqSavRVSCMqEMisx49qDg9fL7DUf6dR7leulWte2pt38HCtIkEbrUe2x+oXJ6IJ7GPuNTu9Krlt2WBWPAg8j8SfnquHqr6j3Cr9OKiw2i/z7c3BTVUZWoWQQfiU97EaOWGchSSAcjA6xrr0I2QrSxJUDIn/IBU5q5DOPu60u6KbclTNWVdDUWIVdM9vjjhIniXBEwd84OQTjrwT3qauddFty2fjTdaeGWSXlxYgnj4A/n4/fS/8A8PW723lZ9t22a8/ntVZqflc62QiZal2DoqlgSGwQxJBP7QM+dO+qoLHUk/mEdCIU7VhTGQr9cYznUfeattlTU1vgpw8fPEapqy9RFg3rv7NihKkqcZD+dGmSLPsgj/U6P7286Nc19m/b8/sZ4LO/iKfe3qLda+hobpctwpZZaCYGGSiZVLAkF0CIFyWUYyfGT9cwB3pPeLvTbgaeOZKvOFSYSEJxwrE58kf+DSGX1hsF6UwVEtWY2BAQK+CMd8hnBH9d60rBVWKCy0tue5vMKX3I2elOeAPuAgPjIAUZ+mddTSbFIYYY9YV0BUqZcO6UEl920gpalIZZIlZHftSx8D+8arts66xbv3beLFUpBFVUE0sdX7dVxD7NirZJOMch0frrjbhvK5VE8Iot61Vtio0RY6aCjVlXjkoSpYYx5HWNczW2e3124btfpd03SnrbpwNU9FBGgbgFxhWZgP2g+PPeqL31vmwz94pXsrpkDr6S59o29Y9p2eoijlgo5qoiNZKciKVip59Fck4yTj/l9dRz7krbWGSpm/NqRcKs0aFahBjsuv8Av/le/pqtm0tx0ez7cYjuK83andhKkdUqHDAceWfJJHnJ7+wxmuvrbSqrLHBUP0R2qdfXsHU67F2xXACNV1FBhmY85fU7bcUro13iRlYgqzEEHPgg9jRqsTeuKcm/y1z35Pse/wDro0vwt3ENyz2iltrt+EzyPw+Op+2uzA5YnKjOT/OjRoo0jXWbZRVZiAAWPZA86xVk8kdSeMjr+zwxHnlnRo1hpoaTetsryUhDOzAeATnUTe2IY9nyR5/nRo0NZ71kYigqCQPHy0aNGgxif//Z';
+  "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAyADIDASIAAhEBAxEB/8QAHAAAAgIDAQEAAAAAAAAAAAAAAAcFCAMEBgIJ/8QAMhAAAgEDBAEBBgYABwAAAAAAAQIDBAURAAYSITEHEyJBUWGBFBUjMnGhCCU1QmKisf/EABkBAAMBAQEAAAAAAAAAAAAAAAMEBQIGAf/EACoRAAICAAMHAwUBAAAAAAAAAAECAAMRITEEBRITQVGhYXHwFBUiY5Gx/9oADAMBAAIRAxEAPwD6b0VwFTIQYXUD4ka3I5AwOAcZ+OldD6+2H9BI6iB5JDjgHGdbq+uu3BKEkqUhfOG5Hr7agV7y2XTmgwmUZI4YyM68kjj40urr6x0dMjR0UXt5mAKs59zB7z0e9chQ+sNw3JE1TR1oSBWZAY4woYqxBODk+R/WriVs6gjrF3uRNY8SyY94gfLUfcHqWXjTFQR5JOk5UeodfDVwQT1rNLNyaMMAOZAyQCB5x3j6H5HUpat5x3J5va1M6zAAcSfOktqFlKliPx6nHT3m67UsyE7Vqq8cjhofPz0a5bpuxLLg9/u0ag/WHv5Ea4ZQikrWRwp5lR2so850xdpx1W6kelt9FNWPGAZJQAFQH5kkDvB0+H9JtjQXmko5LVSrBURlIVpmaWRpBkkcRk/tBOdRV1itu09wT2Gx0wpKdCG4FChZiikswPee/j8tC2bcvOs4LXAHprErEapOIyGhtlzsdqSavRVSCMqEMisx49qDg9fL7DUf6dR7leulWte2pt38HCtIkEbrUe2x+oXJ6IJ7GPuNTu9Krlt2WBWPAg8j8SfnquHqr6j3Cr9OKiw2i/z7c3BTVUZWoWQQfiU97EaOWGchSSAcjA6xrr0I2QrSxJUDIn/IBU5q5DOPu60u6KbclTNWVdDUWIVdM9vjjhIniXBEwd84OQTjrwT3qauddFty2fjTdaeGWSXlxYgnj4A/n4/fS/8A8PW723lZ9t22a8/ntVZqflc62QiZal2DoqlgSGwQxJBP7QM+dO+qoLHUk/mEdCIU7VhTGQr9cYznUfeattlTU1vgpw8fPEapqy9RFg3rv7NihKkqcZD+dGmSLPsgj/U6P7286Nc19m/b8/sZ4LO/iKfe3qLda+hobpctwpZZaCYGGSiZVLAkF0CIFyWUYyfGT9cwB3pPeLvTbgaeOZKvOFSYSEJxwrE58kf+DSGX1hsF6UwVEtWY2BAQK+CMd8hnBH9d60rBVWKCy0tue5vMKX3I2elOeAPuAgPjIAUZ+mddTSbFIYYY9YV0BUqZcO6UEl920gpalIZZIlZHftSx8D+8arts66xbv3beLFUpBFVUE0sdX7dVxD7NirZJOMch0frrjbhvK5VE8Iot61Vtio0RY6aCjVlXjkoSpYYx5HWNczW2e3124btfpd03SnrbpwNU9FBGgbgFxhWZgP2g+PPeqL31vmwz94pXsrpkDr6S59o29Y9p2eoijlgo5qoiNZKciKVip59Fck4yTj/l9dRz7krbWGSpm/NqRcKs0aFahBjsuv8Av/le/pqtm0tx0ez7cYjuK83andhKkdUqHDAceWfJJHnJ7+wxmuvrbSqrLHBUP0R2qdfXsHU67F2xXACNV1FBhmY85fU7bcUro13iRlYgqzEEHPgg9jRqsTeuKcm/y1z35Pse/wDro0vwt3ENyz2iltrt+EzyPw+Op+2uzA5YnKjOT/OjRoo0jXWbZRVZiAAWPZA86xVk8kdSeMjr+zwxHnlnRo1hpoaTetsryUhDOzAeATnUTe2IY9nyR5/nRo0NZ71kYigqCQPHy0aNGgxif//Z";
diff --git a/packages/avatar/test/avatar-memory.test.ts b/packages/avatar/test/avatar-memory.test.ts
index 22138f59e3..1ceaae30f5 100644
--- a/packages/avatar/test/avatar-memory.test.ts
+++ b/packages/avatar/test/avatar-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { linked } from '../stories/avatar.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { linked } from "../stories/avatar.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(linked());
diff --git a/packages/avatar/test/avatar.test.ts b/packages/avatar/test/avatar.test.ts
index 79af3fa6c1..a5c336dfad 100644
--- a/packages/avatar/test/avatar.test.ts
+++ b/packages/avatar/test/avatar.test.ts
@@ -14,112 +14,112 @@ import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 
 describe("Avatar", () => {
-	testForLitDevWarnings(
-		async () =>
-			await fixture(html`
-				
-			`),
-	);
-	it("loads accessibly", async () => {
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-
-		await expect(el).to.be.accessible();
-	});
-	it("loads accessibly with [href]", async () => {
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-
-		await expect(el).to.be.accessible();
-	});
-	it("validates `size`", async () => {
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-
-		expect(el.size).to.equal(100);
-
-		el.setAttribute("size", "55");
-
-		await elementUpdated(el);
-
-		expect(el.size).to.equal(100);
-
-		el.setAttribute("size", "600");
-
-		await elementUpdated(el);
-
-		expect(el.size).to.equal(600);
-	});
-	it("loads with everything set", async () => {
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-		expect(el).to.not.be.undefined;
-		const imageEl = el.shadowRoot
-			? (el.shadowRoot.querySelector("img") as HTMLImageElement)
-			: (el.querySelector("img") as HTMLImageElement);
-
-		expect(imageEl.hasAttribute("alt")).to.be.true;
-		expect(imageEl.getAttribute("alt")).to.equal("Shantanu Narayen");
-	});
-	it("loads with no label", async () => {
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-		expect(el).to.not.be.undefined;
-		const imageEl = el.shadowRoot
-			? (el.shadowRoot.querySelector("img") as HTMLImageElement)
-			: (el.querySelector("img") as HTMLImageElement);
-
-		expect(imageEl.hasAttribute("alt")).to.be.false;
-	});
-	it("can receive a `tabindex` without an `href`", async () => {
-		try {
-			const el = await fixture(html`
-				
-			`);
-
-			await elementUpdated(el);
-			const focusEl = el.focusElement;
-
-			expect(focusEl).to.exist;
-		} catch (error) {
-			expect(() => {
-				throw error;
-			}).to.throw("There should be no error.");
-		}
-	});
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+      `),
+  );
+  it("loads accessibly", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("loads accessibly with [href]", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("validates `size`", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.size).to.equal(100);
+
+    el.setAttribute("size", "55");
+
+    await elementUpdated(el);
+
+    expect(el.size).to.equal(100);
+
+    el.setAttribute("size", "600");
+
+    await elementUpdated(el);
+
+    expect(el.size).to.equal(600);
+  });
+  it("loads with everything set", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    const imageEl = el.shadowRoot
+      ? (el.shadowRoot.querySelector("img") as HTMLImageElement)
+      : (el.querySelector("img") as HTMLImageElement);
+
+    expect(imageEl.hasAttribute("alt")).to.be.true;
+    expect(imageEl.getAttribute("alt")).to.equal("Shantanu Narayen");
+  });
+  it("loads with no label", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    const imageEl = el.shadowRoot
+      ? (el.shadowRoot.querySelector("img") as HTMLImageElement)
+      : (el.querySelector("img") as HTMLImageElement);
+
+    expect(imageEl.hasAttribute("alt")).to.be.false;
+  });
+  it("can receive a `tabindex` without an `href`", async () => {
+    try {
+      const el = await fixture(html`
+        
+      `);
+
+      await elementUpdated(el);
+      const focusEl = el.focusElement;
+
+      expect(focusEl).to.exist;
+    } catch (error) {
+      expect(() => {
+        throw error;
+      }).to.throw("There should be no error.");
+    }
+  });
 });
diff --git a/packages/avatar/test/benchmark/test-basic.ts b/packages/avatar/test/benchmark/test-basic.ts
index ab3dafdaab..02f13faeac 100644
--- a/packages/avatar/test/benchmark/test-basic.ts
+++ b/packages/avatar/test/benchmark/test-basic.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/avatar/sp-avatar.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/avatar/sp-avatar.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
+  
 `);
diff --git a/packages/badge/sp-badge.ts b/packages/badge/sp-badge.ts
index babc45df1c..5d2b3dc2f2 100644
--- a/packages/badge/sp-badge.ts
+++ b/packages/badge/sp-badge.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Badge } from './src/Badge.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Badge } from "./src/Badge.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-badge', Badge);
+defineElement("sp-badge", Badge);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-badge': Badge;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-badge": Badge;
+  }
 }
diff --git a/packages/badge/src/Badge.ts b/packages/badge/src/Badge.ts
index 125cd7f16d..d38d97339b 100644
--- a/packages/badge/src/Badge.ts
+++ b/packages/badge/src/Badge.ts
@@ -11,43 +11,43 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-
-import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
-import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
-import styles from './badge.css.js';
+  CSSResultArray,
+  html,
+  nothing,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+
+import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
+import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
+import styles from "./badge.css.js";
 
 /**
  * List of valid badge variants.
  */
 export const BADGE_VARIANTS = [
-    'accent',
-    'neutral',
-    'informative',
-    'positive',
-    'negative',
-    'notice',
-    'fuchsia',
-    'indigo',
-    'magenta',
-    'purple',
-    'seafoam',
-    'yellow',
-    'gray',
-    'red',
-    'orange',
-    'chartreuse',
-    'celery',
-    'green',
-    'cyan',
-    'blue',
+  "accent",
+  "neutral",
+  "informative",
+  "positive",
+  "negative",
+  "notice",
+  "fuchsia",
+  "indigo",
+  "magenta",
+  "purple",
+  "seafoam",
+  "yellow",
+  "gray",
+  "red",
+  "orange",
+  "chartreuse",
+  "celery",
+  "green",
+  "cyan",
+  "blue",
 ] as const;
 
 /**
@@ -59,10 +59,10 @@ export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
  * List of valid fixed values.
  */
 export const FIXED_VALUES = [
-    'inline-start',
-    'inline-end',
-    'block-start',
-    'block-end',
+  "inline-start",
+  "inline-end",
+  "block-start",
+  "block-end",
 ] as const;
 
 /**
@@ -77,86 +77,83 @@ export type FixedValues = (typeof FIXED_VALUES)[number];
  * @slot icon - Optional icon that appears to the left of the label
  */
 export class Badge extends SizedMixin(
-    ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
-    {
-        noDefaultSize: true,
-    }
+  ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ""),
+  {
+    noDefaultSize: true,
+  },
 ) {
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    /**
-     * The fixed position of the badge.
-     * Can be one of the values defined in `FixedValues`.
-     */
-    @property({ reflect: true })
-    public get fixed(): FixedValues | undefined {
-        return this._fixed;
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /**
+   * The fixed position of the badge.
+   * Can be one of the values defined in `FixedValues`.
+   */
+  @property({ reflect: true })
+  public get fixed(): FixedValues | undefined {
+    return this._fixed;
+  }
+
+  public set fixed(fixed: FixedValues | undefined) {
+    if (fixed === this.fixed) {
+      return;
     }
 
-    public set fixed(fixed: FixedValues | undefined) {
-        if (fixed === this.fixed) return;
-
-        const oldValue = this.fixed;
+    const oldValue = this.fixed;
 
-        this._fixed = fixed;
+    this._fixed = fixed;
 
-        if (fixed) {
-            this.setAttribute('fixed', fixed);
-        } else {
-            this.removeAttribute('fixed');
-        }
-
-        this.requestUpdate('fixed', oldValue);
+    if (fixed) {
+      this.setAttribute("fixed", fixed);
+    } else {
+      this.removeAttribute("fixed");
     }
 
-    private _fixed?: FixedValues;
-
-    /**
-     * The variant of the badge.
-     * Can be one of the values defined in `BadgeVariant`.
-     */
-    @property({ type: String, reflect: true })
-    public variant: BadgeVariant = 'informative';
-
-    /**
-     * Checks if the icon slot has content.
-     */
-    protected get hasIcon(): boolean {
-        return this.slotContentIsPresent;
+    this.requestUpdate("fixed", oldValue);
+  }
+
+  private _fixed?: FixedValues;
+
+  /**
+   * The variant of the badge.
+   * Can be one of the values defined in `BadgeVariant`.
+   */
+  @property({ type: String, reflect: true })
+  public variant: BadgeVariant = "informative";
+
+  /**
+   * Checks if the icon slot has content.
+   */
+  protected get hasIcon(): boolean {
+    return this.slotContentIsPresent;
+  }
+
+  /**
+   * Renders the badge template.
+   * Includes the icon slot and the label slot.
+   */
+  protected override render(): TemplateResult {
+    if (window.__swc.DEBUG) {
+      if (!BADGE_VARIANTS.includes(this.variant)) {
+        window.__swc.warn(
+          this,
+          `<${this.localName}> element expect the "variant" attribute to be one of the following:`,
+          "https://opensource.adobe.com/spectrum-web-components/components/badge/#variants",
+          {
+            issues: [...BADGE_VARIANTS],
+          },
+        );
+      }
     }
 
-    /**
-     * Renders the badge template.
-     * Includes the icon slot and the label slot.
-     */
-    protected override render(): TemplateResult {
-        if (window.__swc.DEBUG) {
-            if (!BADGE_VARIANTS.includes(this.variant)) {
-                window.__swc.warn(
-                    this,
-                    `<${this.localName}> element expect the "variant" attribute to be one of the following:`,
-                    'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
-                    {
-                        issues: [...BADGE_VARIANTS],
-                    }
-                );
-            }
-        }
-
-        return html`
-            ${this.hasIcon
-                ? html`
-                      
-                  `
-                : nothing}
-            

-                
-            

-        `;
-    }
+    return html`
+      ${this.hasIcon
+        ? html`  `
+        : nothing}
+      

+        
+      

+    `;
+  }
 }
diff --git a/packages/badge/src/index.ts b/packages/badge/src/index.ts
index 5c1376d9c2..54f4d02c28 100644
--- a/packages/badge/src/index.ts
+++ b/packages/badge/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './Badge.js';
+export * from "./Badge.js";
diff --git a/packages/badge/stories/badge.stories.ts b/packages/badge/stories/badge.stories.ts
index 1390d3e2fc..02b201ef6e 100644
--- a/packages/badge/stories/badge.stories.ts
+++ b/packages/badge/stories/badge.stories.ts
@@ -10,147 +10,134 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/badge/sp-badge.js';
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
+import "@spectrum-web-components/badge/sp-badge.js";
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
 
 export default {
-    title: 'Badge',
-    component: 'sp-badge',
+  title: "Badge",
+  component: "sp-badge",
 };
 
 export const Default = (): TemplateResult => {
-    return html`
-        Badge
-    `;
+  return html` Badge `;
 };
 
 export const Icons = (): TemplateResult => {
-    return html`
-        No icon
+  return html`
+    No icon
 
-        
-            
-            Icon and label
-        
+    
+      
+      Icon and label
+    
 
-        
-            
-        
-    `;
+    
+      
+    
+  `;
 };
 
 export const Sizes = (): TemplateResult => {
-    return html`
-        

-            
-                
-                Small
-            
-            
-                
-                Medium
-            
-            
-                
-                Large
-            
-            
-                
-                Extra-large
-            
-            
-                
-                This long content automatically wraps, but shows no more than
-                two lines
-            
-        

-    `;
+  return html`
+    

+      
+        
+        Small
+      
+      
+        
+        Medium
+      
+      
+        
+        Large
+      
+      
+        
+        Extra-large
+      
+      
+        
+        This long content automatically wraps, but shows no more than two lines
+      
+    

+  `;
 };
 
 export const Semantic = (): TemplateResult => {
-    return html`
-        Accent
-        Positive
-        Informative
-        Negative
-        Neutral
-        Notice
-    `;
+  return html`
+    Accent
+    Positive
+    Informative
+    Negative
+    Neutral
+    Notice
+  `;
 };
 
 export const NonSemantic = (): TemplateResult => {
-    return html`
-        Seafoam
-        Indigo
-        Purple
-        Fuchsia
-        Magenta
-        Yellow
-        Gray
-        Red
-        Orange
-        Chartreuse
-        Celery
-        Green
-        Cyan
-        Blue
-    `;
+  return html`
+    Seafoam
+    Indigo
+    Purple
+    Fuchsia
+    Magenta
+    Yellow
+    Gray
+    Red
+    Orange
+    Chartreuse
+    Celery
+    Green
+    Cyan
+    Blue
+  `;
 };
 
 export const Inline = (): TemplateResult => {
-    return html`
-        Badge is a simple
-        inline
-        element that should
-        flow
-        with the rest of the page:
-        Missing
-        Successful
-        Accent
-    `;
+  return html`
+    Badge is a simple
+    inline
+    element that should
+    flow
+    with the rest of the page:
+    Missing
+    Successful
+    Accent
+  `;
 };
 
 export const Fixed = (): TemplateResult => {
-    return html`
-        

-            None
-            
-                block-start
-            
-            
-                inline-end
-            
-            
-                block-end
-            
-            
-                inline-start
-            
-        

-    `;
+  return html`
+    

+      None
+      
+        block-start
+      
+      
+        inline-end
+      
+      
+        block-end
+      
+      
+        inline-start
+      
+    

+  `;
 };
diff --git a/packages/badge/test/badge-memory.test.ts b/packages/badge/test/badge-memory.test.ts
index e39d2ba7c8..4a5b3f123c 100644
--- a/packages/badge/test/badge-memory.test.ts
+++ b/packages/badge/test/badge-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Default } from '../stories/badge.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/badge.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(Default());
diff --git a/packages/badge/test/badge.test.ts b/packages/badge/test/badge.test.ts
index 387bc82e79..a7652b3526 100644
--- a/packages/badge/test/badge.test.ts
+++ b/packages/badge/test/badge.test.ts
@@ -10,109 +10,101 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 
-import '@spectrum-web-components/badge/sp-badge.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
-import { stub } from 'sinon';
-import { Badge } from '../src/Badge.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import "@spectrum-web-components/badge/sp-badge.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
+import { stub } from "sinon";
+import { Badge } from "../src/Badge.js";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 
-describe('Badge', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-                    
-                    Icon and label
-                
-            `)
-    );
-    it('manages `fixed` attribute', async () => {
-        const el = await fixture(html`
-            Label only
-        `);
+describe("Badge", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+          
+          Icon and label
+        
+      `),
+  );
+  it("manages `fixed` attribute", async () => {
+    const el = await fixture(html` Label only `);
 
-        expect(el.fixed).to.be.undefined;
+    expect(el.fixed).to.be.undefined;
 
-        const textFixedValue = 'inline-start';
+    const textFixedValue = "inline-start";
 
-        el.fixed = textFixedValue;
+    el.fixed = textFixedValue;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.fixed).to.equal(textFixedValue);
+    expect(el.fixed).to.equal(textFixedValue);
 
-        el.fixed = textFixedValue;
+    el.fixed = textFixedValue;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.fixed).to.equal(textFixedValue);
+    expect(el.fixed).to.equal(textFixedValue);
 
-        el.fixed = undefined;
+    el.fixed = undefined;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.hasAttribute('fixed')).to.be.false;
+    expect(el.hasAttribute("fixed")).to.be.false;
+  });
+  describe("dev mode", () => {
+    let consoleWarnStub!: ReturnType;
+
+    before(() => {
+      window.__swc.verbose = true;
+      consoleWarnStub = stub(console, "warn");
+    });
+    afterEach(() => {
+      consoleWarnStub.resetHistory();
+    });
+    after(() => {
+      window.__swc.verbose = false;
+      consoleWarnStub.restore();
+    });
+
+    it("loads default badge accessibly", async () => {
+      const el = await fixture(html`
+        
+          
+          Icon and label
+        
+      `);
+
+      await elementUpdated(el);
+
+      await expect(el).to.be.accessible();
+      expect(consoleWarnStub.called).to.be.false;
     });
-    describe('dev mode', () => {
-        let consoleWarnStub!: ReturnType;
-
-        before(() => {
-            window.__swc.verbose = true;
-            consoleWarnStub = stub(console, 'warn');
-        });
-        afterEach(() => {
-            consoleWarnStub.resetHistory();
-        });
-        after(() => {
-            window.__swc.verbose = false;
-            consoleWarnStub.restore();
-        });
-
-        it('loads default badge accessibly', async () => {
-            const el = await fixture(html`
-                
-                    
-                    Icon and label
-                
-            `);
-
-            await elementUpdated(el);
-
-            await expect(el).to.be.accessible();
-            expect(consoleWarnStub.called).to.be.false;
-        });
-        it('warns in Dev Mode when sent an incorrect `variant`', async () => {
-            const el = await fixture(html`
-                
-                    
-                    Icon and label
-                
-            `);
-
-            await elementUpdated(el);
-
-            expect(consoleWarnStub.called).to.be.true;
-            const spyCall = consoleWarnStub.getCall(0);
-
-            expect(
-                (spyCall.args.at(0) as string).includes('"variant"'),
-                'confirm variant-centric message'
-            ).to.be.true;
-            expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-                data: {
-                    localName: 'sp-badge',
-                    type: 'api',
-                    level: 'default',
-                },
-            });
-        });
+    it("warns in Dev Mode when sent an incorrect `variant`", async () => {
+      const el = await fixture(html`
+        
+          
+          Icon and label
+        
+      `);
+
+      await elementUpdated(el);
+
+      expect(consoleWarnStub.called).to.be.true;
+      const spyCall = consoleWarnStub.getCall(0);
+
+      expect(
+        (spyCall.args.at(0) as string).includes('"variant"'),
+        "confirm variant-centric message",
+      ).to.be.true;
+      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        data: {
+          localName: "sp-badge",
+          type: "api",
+          level: "default",
+        },
+      });
     });
+  });
 });
diff --git a/packages/badge/test/benchmark/basic-test.ts b/packages/badge/test/benchmark/basic-test.ts
index fa0f2587fa..b47c04fbbc 100644
--- a/packages/badge/test/benchmark/basic-test.ts
+++ b/packages/badge/test/benchmark/basic-test.ts
@@ -10,14 +10,14 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/badge/sp-badge.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/badge/sp-badge.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
-        Icon and label
-    
+  
+    
+    Icon and label
+  
 `);
diff --git a/packages/breadcrumbs/sp-breadcrumb-item.ts b/packages/breadcrumbs/sp-breadcrumb-item.ts
index b09377d5d5..98b070536f 100644
--- a/packages/breadcrumbs/sp-breadcrumb-item.ts
+++ b/packages/breadcrumbs/sp-breadcrumb-item.ts
@@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { BreadcrumbItem } from './src/BreadcrumbItem.js';
+import { BreadcrumbItem } from "./src/BreadcrumbItem.js";
 
-customElements.define('sp-breadcrumb-item', BreadcrumbItem);
+customElements.define("sp-breadcrumb-item", BreadcrumbItem);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-breadcrumb-item': BreadcrumbItem;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-breadcrumb-item": BreadcrumbItem;
+  }
 }
diff --git a/packages/breadcrumbs/sp-breadcrumbs.ts b/packages/breadcrumbs/sp-breadcrumbs.ts
index ccd4298c0a..70e60127e4 100644
--- a/packages/breadcrumbs/sp-breadcrumbs.ts
+++ b/packages/breadcrumbs/sp-breadcrumbs.ts
@@ -9,12 +9,12 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Breadcrumbs } from './src/Breadcrumbs.js';
+import { Breadcrumbs } from "./src/Breadcrumbs.js";
 
-customElements.define('sp-breadcrumbs', Breadcrumbs);
+customElements.define("sp-breadcrumbs", Breadcrumbs);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-breadcrumbs': Breadcrumbs;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-breadcrumbs": Breadcrumbs;
+  }
 }
diff --git a/packages/breadcrumbs/src/BreadcrumbItem.ts b/packages/breadcrumbs/src/BreadcrumbItem.ts
index c0c2f19162..1f1abca820 100644
--- a/packages/breadcrumbs/src/BreadcrumbItem.ts
+++ b/packages/breadcrumbs/src/BreadcrumbItem.ts
@@ -11,126 +11,124 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';
-
-import styles from './breadcrumb-item.css.js';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
+import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
+import chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";
+
+import styles from "./breadcrumb-item.css.js";
 
 export interface BreadcrumbSelectDetail {
-    value: string;
+  value: string;
 }
 
 export class BreadcrumbItem extends LikeAnchor(Focusable) {
-    public static override get styles(): CSSResultArray {
-        return [styles, chevronStyles, chevronIconOverrides];
-    }
+  public static override get styles(): CSSResultArray {
+    return [styles, chevronStyles, chevronIconOverrides];
+  }
 
-    @property()
-    public value: string | undefined = undefined;
+  @property()
+  public value: string | undefined = undefined;
 
-    /**
-     * @private
-     * Marks this breadcrumb item as the current route.
-     */
-    @property({ type: Boolean })
-    public isLastOfType = false;
+  /**
+   * @private
+   * Marks this breadcrumb item as the current route.
+   */
+  @property({ type: Boolean })
+  public isLastOfType = false;
 
-    public override get focusElement(): HTMLElement {
-        return this.shadowRoot.querySelector('#item-link') as HTMLElement;
-    }
+  public override get focusElement(): HTMLElement {
+    return this.shadowRoot.querySelector("#item-link") as HTMLElement;
+  }
 
-    override connectedCallback(): void {
-        super.connectedCallback();
+  override connectedCallback(): void {
+    super.connectedCallback();
 
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'listitem');
-        }
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
     }
+  }
 
-    private announceSelected(value: string): void {
-        const selectDetail: BreadcrumbSelectDetail = {
-            value,
-        };
+  private announceSelected(value: string): void {
+    const selectDetail: BreadcrumbSelectDetail = {
+      value,
+    };
 
-        const selectionEvent = new CustomEvent('breadcrumb-select', {
-            bubbles: true,
-            composed: true,
-            detail: selectDetail,
-        });
+    const selectionEvent = new CustomEvent("breadcrumb-select", {
+      bubbles: true,
+      composed: true,
+      detail: selectDetail,
+    });
 
-        this.dispatchEvent(selectionEvent);
-    }
+    this.dispatchEvent(selectionEvent);
+  }
 
-    protected handleClick(event?: Event): void {
-        if (!this.href && event) {
-            event.preventDefault();
-        }
-
-        if (!this.href || event?.defaultPrevented) {
-            if (this.value && !this.isLastOfType) {
-                this.announceSelected(this.value);
-            }
-        }
+  protected handleClick(event?: Event): void {
+    if (!this.href && event) {
+      event.preventDefault();
     }
 
-    protected handleKeyDown(event: KeyboardEvent): void {
-        if (event.key === 'Enter' || event.keyCode === 13) {
-            this.handleClick(event);
-        }
+    if (!this.href || event?.defaultPrevented) {
+      if (this.value && !this.isLastOfType) {
+        this.announceSelected(this.value);
+      }
     }
+  }
 
-    protected renderLink(): TemplateResult {
-        return html`
-            
-                
-            
-        `;
+  protected handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === "Enter" || event.keyCode === 13) {
+      this.handleClick(event);
     }
-
-    private renderSeparator(): TemplateResult {
-        return html`
-            
-        `;
-    }
-
-    protected override render(): TemplateResult {
-        return html`
-            ${this.renderLink()}
-            
-            ${this.renderSeparator()}
-        `;
-    }
-
-    protected override updated(changes: PropertyValues): void {
-        if (changes.has('disabled')) {
-            if (this.disabled) {
-                this.setAttribute('aria-disabled', 'true');
-            } else {
-                this.removeAttribute('aria-disabled');
-            }
-        }
+  }
+
+  protected renderLink(): TemplateResult {
+    return html`
+      
+        
+      
+    `;
+  }
+
+  private renderSeparator(): TemplateResult {
+    return html`
+      
+    `;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      ${this.renderLink()}
+      
+      ${this.renderSeparator()}
+    `;
+  }
+
+  protected override updated(changes: PropertyValues): void {
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.setAttribute("aria-disabled", "true");
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
     }
+  }
 }
diff --git a/packages/breadcrumbs/src/Breadcrumbs.ts b/packages/breadcrumbs/src/Breadcrumbs.ts
index 0be2a9dcca..2251758914 100644
--- a/packages/breadcrumbs/src/Breadcrumbs.ts
+++ b/packages/breadcrumbs/src/Breadcrumbs.ts
@@ -10,42 +10,42 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-    queryAssignedElements,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { ActionMenu } from '@spectrum-web-components/action-menu';
+  property,
+  query,
+  queryAssignedElements,
+  state,
+} from "@spectrum-web-components/base/src/decorators.js";
+import "@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import { ActionMenu } from "@spectrum-web-components/action-menu";
 import {
-    BreadcrumbItem as BreadcrumbElement,
-    BreadcrumbSelectDetail,
-} from './BreadcrumbItem.js';
+  BreadcrumbItem as BreadcrumbElement,
+  BreadcrumbSelectDetail,
+} from "./BreadcrumbItem.js";
 import {
-    createRef,
-    Ref,
-    ref,
-} from '@spectrum-web-components/base/src/directives.js';
+  createRef,
+  Ref,
+  ref,
+} from "@spectrum-web-components/base/src/directives.js";
 
-import styles from './breadcrumbs.css.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import styles from "./breadcrumbs.css.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
 type BreadcrumbItem = {
-    label?: string;
-    href?: string;
-    value: string;
-    offsetWidth: number;
-    isVisible: boolean; // false if displayed in menu overlay
+  label?: string;
+  href?: string;
+  value: string;
+  offsetWidth: number;
+  isVisible: boolean; // false if displayed in menu overlay
 };
 
 /**
@@ -58,302 +58,297 @@ type BreadcrumbItem = {
  * @fires change - Announces the selected breadcrumb item
  */
 export class Breadcrumbs extends SpectrumElement {
-    public static override get styles(): CSSResultArray {
-        return [styles];
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /**
+   * Override the maximum number of visible items
+   */
+  @property({ type: Number, attribute: "max-visible-items" })
+  public maxVisibleItems = 4;
+
+  /**
+   * Accessible name for the Breadcrumbs component
+   */
+  @property({ type: String })
+  public label = "";
+
+  /**
+   * Change the default label of the action menu
+   */
+  @property({ type: String, attribute: "menu-label" })
+  public menuLabel = "More items";
+
+  /**
+   * Compact option is useful for reducing the height of the breadcrumbs
+   */
+  @property({ type: Boolean })
+  public compact = false;
+
+  @queryAssignedElements({ selector: "sp-breadcrumb-item" })
+  private breadcrumbsElements!: BreadcrumbElement[];
+
+  @queryAssignedElements({ slot: "root", selector: "sp-breadcrumb-item" })
+  private rootElement!: BreadcrumbElement[];
+
+  @query("#list")
+  private list!: HTMLUListElement;
+
+  @state()
+  private items: BreadcrumbItem[] = [];
+
+  @state()
+  private visibleItems = 0;
+
+  private resizeObserver: ResizeObserver | undefined;
+  private firstRender = true;
+
+  private menuRef: Ref = createRef();
+
+  /**
+   * Checks if the menu is needed based on the number of visible items.
+   */
+  private get hasMenu(): boolean {
+    return this.visibleItems < (this.breadcrumbsElements?.length ?? 0);
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "navigation");
     }
 
-    /**
-     * Override the maximum number of visible items
-     */
-    @property({ type: Number, attribute: 'max-visible-items' })
-    public maxVisibleItems = 4;
-
-    /**
-     * Accessible name for the Breadcrumbs component
-     */
-    @property({ type: String })
-    public label = '';
-
-    /**
-     * Change the default label of the action menu
-     */
-    @property({ type: String, attribute: 'menu-label' })
-    public menuLabel = 'More items';
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.firstRender) {
+        // Don't adjust overflow on first render, it is adjusted in slotChangeHandler
+        this.firstRender = false;
 
-    /**
-     * Compact option is useful for reducing the height of the breadcrumbs
-     */
-    @property({ type: Boolean })
-    public compact = false;
-
-    @queryAssignedElements({ selector: 'sp-breadcrumb-item' })
-    private breadcrumbsElements!: BreadcrumbElement[];
-
-    @queryAssignedElements({ slot: 'root', selector: 'sp-breadcrumb-item' })
-    private rootElement!: BreadcrumbElement[];
+        return;
+      }
 
-    @query('#list')
-    private list!: HTMLUListElement;
+      this.adjustOverflow();
+    });
 
-    @state()
-    private items: BreadcrumbItem[] = [];
+    this.resizeObserver.observe(this);
+  }
 
-    @state()
-    private visibleItems = 0;
+  public override disconnectedCallback(): void {
+    this.resizeObserver?.unobserve(this);
+    super.disconnectedCallback();
+  }
 
-    private resizeObserver: ResizeObserver | undefined;
-    private firstRender = true;
+  override updated(changes: PropertyValues): void {
+    super.updated(changes);
 
-    private menuRef: Ref = createRef();
+    if (changes.has("label")) {
+      this.setAttribute("aria-label", this.label || "Breadcrumbs");
+    }
 
     /**
-     * Checks if the menu is needed based on the number of visible items.
+     * Re-run the calculation of how many breadcrumbs fit in the available space.
+     * maxVisibleItems may allow us to show more items, or less
+     * compact affects the space each item occupies
      */
-    private get hasMenu(): boolean {
-        return this.visibleItems < (this.breadcrumbsElements?.length ?? 0);
+    if (changes.has("maxVisibleItems") || changes.has("compact")) {
+      this.calculateBreadcrumbItemsWidth();
+      this.adjustOverflow();
     }
 
-    override connectedCallback(): void {
-        super.connectedCallback();
-
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'navigation');
-        }
-
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.firstRender) {
-                // Don't adjust overflow on first render, it is adjusted in slotChangeHandler
-                this.firstRender = false;
+    // Breadcrumbs items were added / removed, or available space changed
+    if (changes.has("visibleItems")) {
+      this.items.forEach((item, index) => {
+        this.breadcrumbsElements[index].isLastOfType =
+          index === this.breadcrumbsElements.length - 1;
 
-                return;
-            }
-
-            this.adjustOverflow();
-        });
-
-        this.resizeObserver.observe(this);
-    }
-
-    public override disconnectedCallback(): void {
-        this.resizeObserver?.unobserve(this);
-        super.disconnectedCallback();
+        this.breadcrumbsElements[index].toggleAttribute(
+          "hidden",
+          !item.isVisible,
+        );
+      });
     }
-
-    override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (changes.has('label')) {
-            this.setAttribute('aria-label', this.label || 'Breadcrumbs');
-        }
-
-        /**
-         * Re-run the calculation of how many breadcrumbs fit in the available space.
-         * maxVisibleItems may allow us to show more items, or less
-         * compact affects the space each item occupies
-         */
-        if (changes.has('maxVisibleItems') || changes.has('compact')) {
-            this.calculateBreadcrumbItemsWidth();
-            this.adjustOverflow();
-        }
-
-        // Breadcrumbs items were added / removed, or available space changed
-        if (changes.has('visibleItems')) {
-            this.items.forEach((item, index) => {
-                this.breadcrumbsElements[index].isLastOfType =
-                    index === this.breadcrumbsElements.length - 1;
-
-                this.breadcrumbsElements[index].toggleAttribute(
-                    'hidden',
-                    !item.isVisible
-                );
-            });
-        }
+  }
+
+  /**
+   * We need to understand how much space (px) each breadcrumb item occupies,
+   * in order to know if it fits the available horizontal space.
+   */
+  private calculateBreadcrumbItemsWidth(): void {
+    this.items = this.breadcrumbsElements.map((el, index) => {
+      let width = el.offsetWidth;
+
+      /**
+       * For breadcrumbs which are hidden,
+       * we need to temporarily remove the hidden attribute to calculate the width.
+       */
+      if (el.hasAttribute("hidden")) {
+        el.removeAttribute("hidden");
+        width = el.offsetWidth;
+        el.setAttribute("hidden", "");
+      }
+
+      return {
+        label: el.innerText,
+        href: el.href,
+        value: el.value || index.toString(),
+        offsetWidth: width,
+        isVisible: true,
+      };
+    });
+  }
+
+  /**
+   * Calculate which breadcrumbs fit in the viewport, and which should be hidden.
+   */
+  private adjustOverflow(): void {
+    let occupiedSpace = 0;
+    let newVisibleItems = 0;
+    const availableSpace = this.list.clientWidth;
+
+    // Menu will always be visible if it exists.
+    if (this.hasMenu && this.menuRef.value) {
+      occupiedSpace += this.menuRef.value.offsetWidth || 0;
     }
 
-    /**
-     * We need to understand how much space (px) each breadcrumb item occupies,
-     * in order to know if it fits the available horizontal space.
-     */
-    private calculateBreadcrumbItemsWidth(): void {
-        this.items = this.breadcrumbsElements.map((el, index) => {
-            let width = el.offsetWidth;
-
-            /**
-             * For breadcrumbs which are hidden,
-             * we need to temporarily remove the hidden attribute to calculate the width.
-             */
-            if (el.hasAttribute('hidden')) {
-                el.removeAttribute('hidden');
-                width = el.offsetWidth;
-                el.setAttribute('hidden', '');
-            }
-
-            return {
-                label: el.innerText,
-                href: el.href,
-                value: el.value || index.toString(),
-                offsetWidth: width,
-                isVisible: true,
-            };
-        });
+    // Root will always be visible if it exists.
+    if (this.rootElement.length > 0) {
+      occupiedSpace += this.rootElement[0].offsetWidth;
     }
 
-    /**
-     * Calculate which breadcrumbs fit in the viewport, and which should be hidden.
-     */
-    private adjustOverflow(): void {
-        let occupiedSpace = 0;
-        let newVisibleItems = 0;
-        const availableSpace = this.list.clientWidth;
-
-        // Menu will always be visible if it exists.
-        if (this.hasMenu && this.menuRef.value) {
-            occupiedSpace += this.menuRef.value.offsetWidth || 0;
-        }
-
-        // Root will always be visible if it exists.
-        if (this.rootElement.length > 0) {
-            occupiedSpace += this.rootElement[0].offsetWidth;
-        }
-
-        const start = 0;
-
-        for (let i = this.items.length - 1; i >= start; i--) {
-            occupiedSpace += this.items[i].offsetWidth;
-
-            if (
-                occupiedSpace < availableSpace &&
-                newVisibleItems < Math.max(this.maxVisibleItems, 1)
-            ) {
-                // There is still enough space for this breadcrumb.
-                this.items[i].isVisible = true;
-                newVisibleItems++;
-            } else {
-                // No more space so we hide the rest.
-                for (let j = i; j >= start; j--) {
-                    this.items[j].isVisible = false;
-                }
-                break;
-            }
-        }
-
-        // Show _at least_ one visible breadcrumb item.
-        if (newVisibleItems === 0) {
-            this.items[this.items.length - 1].isVisible = true;
-            newVisibleItems++;
-        }
-
-        // Setting the visible items count will trigger an update.
-        if (newVisibleItems !== this.visibleItems) {
-            this.visibleItems = newVisibleItems;
+    const start = 0;
+
+    for (let i = this.items.length - 1; i >= start; i--) {
+      occupiedSpace += this.items[i].offsetWidth;
+
+      if (
+        occupiedSpace < availableSpace &&
+        newVisibleItems < Math.max(this.maxVisibleItems, 1)
+      ) {
+        // There is still enough space for this breadcrumb.
+        this.items[i].isVisible = true;
+        newVisibleItems++;
+      } else {
+        // No more space so we hide the rest.
+        for (let j = i; j >= start; j--) {
+          this.items[j].isVisible = false;
         }
+        break;
+      }
     }
 
-    /**
-     * Announces a change in the selected breadcrumb.
-     */
-    private announceChange(value: string): void {
-        const selectDetail: BreadcrumbSelectDetail = {
-            value,
-        };
-
-        const selectionEvent = new CustomEvent('change', {
-            bubbles: true,
-            composed: true,
-            detail: selectDetail,
-        });
-
-        this.dispatchEvent(selectionEvent);
+    // Show _at least_ one visible breadcrumb item.
+    if (newVisibleItems === 0) {
+      this.items[this.items.length - 1].isVisible = true;
+      newVisibleItems++;
     }
 
-    /**
-     * Handles the selection of a breadcrumb item.
-     * Stops the event propagation and announces the change.
-     */
-    private handleSelect(
-        event: CustomEvent & { target: BreadcrumbItem }
-    ): void {
-        event.stopPropagation();
-        this.announceChange(event.detail.value);
+    // Setting the visible items count will trigger an update.
+    if (newVisibleItems !== this.visibleItems) {
+      this.visibleItems = newVisibleItems;
     }
-
-    /**
-     * Handles the change event from the action menu.
-     * Stops the event propagation and announces the change.
-     */
-    private handleMenuChange(event: Event & { target: ActionMenu }): void {
-        event.stopPropagation();
-        this.announceChange(event.target.value);
+  }
+
+  /**
+   * Announces a change in the selected breadcrumb.
+   */
+  private announceChange(value: string): void {
+    const selectDetail: BreadcrumbSelectDetail = {
+      value,
+    };
+
+    const selectionEvent = new CustomEvent("change", {
+      bubbles: true,
+      composed: true,
+      detail: selectDetail,
+    });
+
+    this.dispatchEvent(selectionEvent);
+  }
+
+  /**
+   * Handles the selection of a breadcrumb item.
+   * Stops the event propagation and announces the change.
+   */
+  private handleSelect(
+    event: CustomEvent & { target: BreadcrumbItem },
+  ): void {
+    event.stopPropagation();
+    this.announceChange(event.detail.value);
+  }
+
+  /**
+   * Handles the change event from the action menu.
+   * Stops the event propagation and announces the change.
+   */
+  private handleMenuChange(event: Event & { target: ActionMenu }): void {
+    event.stopPropagation();
+    this.announceChange(event.target.value);
+  }
+
+  /**
+   * The truncation menu when there is not enough space to display all the breadcrumbs.
+   * It displays all options within a breadcrumb.
+   * Items are listed with the hierarchy ordered from top (root) to bottom
+   * and include the currently selected item.
+   */
+  protected renderMenu(): TemplateResult {
+    return html`
+      
+        
+          
+            
+          
+
+          ${this.items.map(
+            (item) => html`
+              
+                ${item.label}
+              
+            `,
+          )}
+        
+      
+    `;
+  }
+
+  /**
+   * Breadcrumbs were added / removed, we need to recalculate the width of each item
+   * and adjust the overflow accordingly.
+   */
+  private async slotChangeHandler(): Promise {
+    if (this.breadcrumbsElements.length === 0) {
+      this.items = [];
+      this.visibleItems = 0;
+
+      return;
     }
 
-    /**
-     * The truncation menu when there is not enough space to display all the breadcrumbs.
-     * It displays all options within a breadcrumb.
-     * Items are listed with the hierarchy ordered from top (root) to bottom
-     * and include the currently selected item.
-     */
-    protected renderMenu(): TemplateResult {
-        return html`
-            
-                
-                    
-                        
-                    
-
-                    ${this.items.map(
-                        (item) => html`
-                            
-                                ${item.label}
-                            
-                        `
-                    )}
-                
-            
-        `;
-    }
-
-    /**
-     * Breadcrumbs were added / removed, we need to recalculate the width of each item
-     * and adjust the overflow accordingly.
-     */
-    private async slotChangeHandler(): Promise {
-        if (this.breadcrumbsElements.length === 0) {
-            this.items = [];
-            this.visibleItems = 0;
-
-            return;
-        }
-
-        await Promise.all(
-            this.breadcrumbsElements.map((el) => el.updateComplete)
-        );
-
-        this.calculateBreadcrumbItemsWidth();
-        this.adjustOverflow();
-    }
-
-    /**
-     * Renders the breadcrumbs component.
-     * Includes the root slot, the truncation menu, and the breadcrumb items.
-     */
-    protected override render(): TemplateResult {
-        return html`
-            
    
-                
-                ${this.hasMenu ? this.renderMenu() : ''}
-                
-            

-        `;
-    }
+    await Promise.all(this.breadcrumbsElements.map((el) => el.updateComplete));
+
+    this.calculateBreadcrumbItemsWidth();
+    this.adjustOverflow();
+  }
+
+  /**
+   * Renders the breadcrumbs component.
+   * Includes the root slot, the truncation menu, and the breadcrumb items.
+   */
+  protected override render(): TemplateResult {
+    return html`
+      
    
+        
+        ${this.hasMenu ? this.renderMenu() : ""}
+        
+      

+    `;
+  }
 }
diff --git a/packages/breadcrumbs/src/index.ts b/packages/breadcrumbs/src/index.ts
index e831110ff9..956ec1fde0 100644
--- a/packages/breadcrumbs/src/index.ts
+++ b/packages/breadcrumbs/src/index.ts
@@ -9,5 +9,5 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Breadcrumbs.js';
-export * from './BreadcrumbItem.js';
+export * from "./Breadcrumbs.js";
+export * from "./BreadcrumbItem.js";
diff --git a/packages/breadcrumbs/stories/args.ts b/packages/breadcrumbs/stories/args.ts
index 433d832f37..b2827d0130 100644
--- a/packages/breadcrumbs/stories/args.ts
+++ b/packages/breadcrumbs/stories/args.ts
@@ -11,36 +11,36 @@ governing permissions and limitations under the License.
 */
 
 export const argTypes = {
-    compact: {
-        name: 'compact',
-        type: { name: 'boolean', required: false },
-        description:
-            'Reduces the size of the Breadcrumbs and the padding around the items.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+  compact: {
+    name: "compact",
+    type: { name: "boolean", required: false },
+    description:
+      "Reduces the size of the Breadcrumbs and the padding around the items.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
     },
-    label: {
-        name: 'label',
-        type: { name: 'string', required: false },
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'Breadcrumbs' },
-        },
-        control: 'text',
+    control: {
+      type: "boolean",
     },
-    maxVisibleItems: {
-        name: 'max-visible-items',
-        type: { name: 'number', required: false },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '4' },
-        },
-        control: 'number',
+  },
+  label: {
+    name: "label",
+    type: { name: "string", required: false },
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "Breadcrumbs" },
     },
-    onChange: { action: 'change' },
+    control: "text",
+  },
+  maxVisibleItems: {
+    name: "max-visible-items",
+    type: { name: "number", required: false },
+    table: {
+      type: { summary: "number" },
+      defaultValue: { summary: "4" },
+    },
+    control: "number",
+  },
+  onChange: { action: "change" },
 };
diff --git a/packages/breadcrumbs/stories/breadcrumbs.stories.ts b/packages/breadcrumbs/stories/breadcrumbs.stories.ts
index 0b649ba2ad..0309165ee5 100644
--- a/packages/breadcrumbs/stories/breadcrumbs.stories.ts
+++ b/packages/breadcrumbs/stories/breadcrumbs.stories.ts
@@ -9,80 +9,78 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js";
 
 import {
-    getBreadcrumbs,
-    getBreadcrumbsWithLinks,
-    getResizableStyles,
-    StoryArgs,
-    Template,
-} from './template.js';
-import { argTypes } from './args.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { spreadProps } from '../../../test/lit-helpers.js';
+  getBreadcrumbs,
+  getBreadcrumbsWithLinks,
+  getResizableStyles,
+  StoryArgs,
+  Template,
+} from "./template.js";
+import { argTypes } from "./args.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { spreadProps } from "../../../test/lit-helpers.js";
 
 export default {
-    title: 'Breadcrumbs',
-    component: 'sp-breadcrumbs',
-    args: {
-        'max-visible-items': 4,
-    },
-    argTypes,
+  title: "Breadcrumbs",
+  component: "sp-breadcrumbs",
+  args: {
+    "max-visible-items": 4,
+  },
+  argTypes,
 };
 
 export const Default = (args: StoryArgs): TemplateResult => Template(args);
 
 export const Disabled = (args: StoryArgs): TemplateResult => Template(args);
 Disabled.args = {
-    disabled: true,
+  disabled: true,
 };
 
 export const Compact = (args: StoryArgs): TemplateResult => Template(args);
 Compact.args = {
-    compact: true,
+  compact: true,
 };
 
 export const Links = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            ${getBreadcrumbsWithLinks(4)}
-        
-    `;
+  return html`
+    
+      ${getBreadcrumbsWithLinks(4)}
+    
+  `;
 };
 
 export const ShowRoot = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            
-                Home
-            
-            ${getBreadcrumbs(6)}
-        
-    `;
+  return html`
+    
+       Home 
+      ${getBreadcrumbs(6)}
+    
+  `;
 };
 
 export const resizableBehavior = (args: StoryArgs): TemplateResult => {
-    return html`
-        

-            ${getResizableStyles()}
+  return html`
+    

+      ${getResizableStyles()}
 
-            
-                ${getBreadcrumbs(4)}
-            
-        

-    `;
+      
+        ${getBreadcrumbs(4)}
+      
+    

+  `;
 };
diff --git a/packages/breadcrumbs/stories/template.ts b/packages/breadcrumbs/stories/template.ts
index 866630909f..6a5c1287b0 100644
--- a/packages/breadcrumbs/stories/template.ts
+++ b/packages/breadcrumbs/stories/template.ts
@@ -10,86 +10,86 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, type TemplateResult } from '@spectrum-web-components/base';
-import { spreadProps } from '../../../test/lit-helpers.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import '@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js';
-import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';
+import { html, type TemplateResult } from "@spectrum-web-components/base";
+import { spreadProps } from "../../../test/lit-helpers.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js";
+import "@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js";
 
 export type StoryArgs = {
-    compact?: boolean;
-    disabled?: boolean;
-    label?: string;
-    'max-visible-items'?: number;
-    onChange: () => void;
+  compact?: boolean;
+  disabled?: boolean;
+  label?: string;
+  "max-visible-items"?: number;
+  onChange: () => void;
 };
 
 // Some dummy folder structure
 const dummyOrganizer = [
-    'Your stuff',
-    'Files',
-    'Team',
-    'In progress',
-    'Trend',
-    'Winter',
-    'Assets',
-    '18x24',
+  "Your stuff",
+  "Files",
+  "Team",
+  "In progress",
+  "Trend",
+  "Winter",
+  "Assets",
+  "18x24",
 ];
 
 export const getBreadcrumbsWithLinks = (count: number): TemplateResult[] => {
-    const breadcrumbs: TemplateResult[] = [];
+  const breadcrumbs: TemplateResult[] = [];
 
-    for (let i = 0; i < count; i++) {
-        breadcrumbs.push(html`
-            
-                ${dummyOrganizer[i] || `Breadcrumb ${i}`}
-            
-        `);
-    }
+  for (let i = 0; i < count; i++) {
+    breadcrumbs.push(html`
+      
+        ${dummyOrganizer[i] || `Breadcrumb ${i}`}
+      
+    `);
+  }
 
-    return breadcrumbs;
+  return breadcrumbs;
 };
 
 export const getBreadcrumbs = (count: number): TemplateResult[] => {
-    const breadcrumbs: TemplateResult[] = [];
+  const breadcrumbs: TemplateResult[] = [];
 
-    for (let i = 0; i < count; i++) {
-        breadcrumbs.push(html`
-            
-                ${dummyOrganizer[i] || `Breadcrumb ${i}`}
-            
-        `);
-    }
+  for (let i = 0; i < count; i++) {
+    breadcrumbs.push(html`
+      
+        ${dummyOrganizer[i] || `Breadcrumb ${i}`}
+      
+    `);
+  }
 
-    return breadcrumbs;
+  return breadcrumbs;
 };
 
 export const getResizableStyles = (): TemplateResult => {
-    return html`
-        
-    `;
+  return html`
+    
+  `;
 };
 
 export const Template = (args: StoryArgs): TemplateResult => html`
-    
-        Your stuff
-        
-            Files
-        
-        Team
-        In progress
-    
+  
+    Your stuff
+    
+      Files
+    
+    Team
+    In progress
+  
 `;
diff --git a/packages/breadcrumbs/test/benchmark/basic-test.ts b/packages/breadcrumbs/test/benchmark/basic-test.ts
index 7b8ff6cea2..c4e81113be 100644
--- a/packages/breadcrumbs/test/benchmark/basic-test.ts
+++ b/packages/breadcrumbs/test/benchmark/basic-test.ts
@@ -9,30 +9,30 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js';
-import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js";
+import "@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
-            Breadcrumb 1
-        
-        
-            Breadcrumb 2
-        
-        
-            Breadcrumb 3
-        
-        
-            Breadcrumb 4
-        
-        
-            Breadcrumb 5
-        
-        
-            Breadcrumb 6
-        
-    
+  
+    
+      Breadcrumb 1
+    
+    
+      Breadcrumb 2
+    
+    
+      Breadcrumb 3
+    
+    
+      Breadcrumb 4
+    
+    
+      Breadcrumb 5
+    
+    
+      Breadcrumb 6
+    
+  
 `);
diff --git a/packages/breadcrumbs/test/breadcrumb-item.test.ts b/packages/breadcrumbs/test/breadcrumb-item.test.ts
index a0208a92ea..25f73846ee 100644
--- a/packages/breadcrumbs/test/breadcrumb-item.test.ts
+++ b/packages/breadcrumbs/test/breadcrumb-item.test.ts
@@ -9,102 +9,98 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import { spy } from 'sinon';
-import { BreadcrumbItem, BreadcrumbSelectDetail } from '../src/index.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-import '@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js';
-import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';
-
-describe('Breadcrumb Item', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                Home
-            `)
-    );
-    it('should render accessibly', async () => {
-        const el = await fixture(html`
-            Home
-        `);
-
-        expect(el.getAttribute('role')).to.equal('listitem');
-    });
-
-    it('should render a disabled item', async () => {
-        const el = await fixture(html`
-            Home
-        `);
-
-        expect(el.hasAttribute('aria-disabled')).to.be.true;
-    });
-
-    it('should manage aria-current', async () => {
-        const el = await fixture(html`
-            
-                Home
-                
-                    Products
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        const currentItem = el.querySelector(
-            'sp-breadcrumb-item:nth-child(2)'
-        ) as BreadcrumbItem;
-        const otherItem = el.querySelector(
-            'sp-breadcrumb-item:nth-child(1)'
-        ) as BreadcrumbItem;
-
-        await elementUpdated(currentItem);
-        await elementUpdated(otherItem);
-
-        expect(currentItem.focusElement.hasAttribute('aria-current'), 'current')
-            .to.be.true;
-        expect(otherItem.focusElement.hasAttribute('aria-current'), 'other').to
-            .be.false;
-    });
-
-    it('should not emit change event if element is the last one', async () => {
-        const changeSpy = spy();
-        const el = await fixture(html`
-            
-                ) => changeSpy(event.detail.value)}
-                value="https://adobe.com/home"
-            >
-                Home
-            
-        `);
-
-        await elementUpdated(el);
-
-        el.click();
-        expect(changeSpy.callCount).to.equal(0);
-    });
-
-    it('should emit change event if href is not provided and element is not the last one', async () => {
-        const changeSpy = spy();
-        const el = await fixture(html`
-            
-                ) => changeSpy(event.detail.value)}
-                value="home"
-            >
-                Home
-            
-        `);
-
-        await elementUpdated(el);
-
-        el.click();
-        expect(changeSpy.callCount).to.equal(1);
-        expect(changeSpy).to.have.been.calledWith('home');
-    });
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import { spy } from "sinon";
+import { BreadcrumbItem, BreadcrumbSelectDetail } from "../src/index.js";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+import "@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js";
+import "@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js";
+
+describe("Breadcrumb Item", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        Home
+      `),
+  );
+  it("should render accessibly", async () => {
+    const el = await fixture(html`
+      Home
+    `);
+
+    expect(el.getAttribute("role")).to.equal("listitem");
+  });
+
+  it("should render a disabled item", async () => {
+    const el = await fixture(html`
+      Home
+    `);
+
+    expect(el.hasAttribute("aria-disabled")).to.be.true;
+  });
+
+  it("should manage aria-current", async () => {
+    const el = await fixture(html`
+      
+        Home
+         Products 
+      
+    `);
+
+    await elementUpdated(el);
+
+    const currentItem = el.querySelector(
+      "sp-breadcrumb-item:nth-child(2)",
+    ) as BreadcrumbItem;
+    const otherItem = el.querySelector(
+      "sp-breadcrumb-item:nth-child(1)",
+    ) as BreadcrumbItem;
+
+    await elementUpdated(currentItem);
+    await elementUpdated(otherItem);
+
+    expect(currentItem.focusElement.hasAttribute("aria-current"), "current").to
+      .be.true;
+    expect(otherItem.focusElement.hasAttribute("aria-current"), "other").to.be
+      .false;
+  });
+
+  it("should not emit change event if element is the last one", async () => {
+    const changeSpy = spy();
+    const el = await fixture(html`
+      ) =>
+          changeSpy(event.detail.value)}
+        value="https://adobe.com/home"
+      >
+        Home
+      
+    `);
+
+    await elementUpdated(el);
+
+    el.click();
+    expect(changeSpy.callCount).to.equal(0);
+  });
+
+  it("should emit change event if href is not provided and element is not the last one", async () => {
+    const changeSpy = spy();
+    const el = await fixture(html`
+      ) =>
+          changeSpy(event.detail.value)}
+        value="home"
+      >
+        Home
+      
+    `);
+
+    await elementUpdated(el);
+
+    el.click();
+    expect(changeSpy.callCount).to.equal(1);
+    expect(changeSpy).to.have.been.calledWith("home");
+  });
 });
diff --git a/packages/breadcrumbs/test/breadcrumbs.test.ts b/packages/breadcrumbs/test/breadcrumbs.test.ts
index 49f79109f5..49675dd16c 100644
--- a/packages/breadcrumbs/test/breadcrumbs.test.ts
+++ b/packages/breadcrumbs/test/breadcrumbs.test.ts
@@ -10,198 +10,186 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    oneEvent,
-} from '@open-wc/testing';
-
-import { spy } from 'sinon';
-import { ActionMenu } from '@spectrum-web-components/action-menu';
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  oneEvent,
+} from "@open-wc/testing";
+
+import { spy } from "sinon";
+import { ActionMenu } from "@spectrum-web-components/action-menu";
 import {
-    Breadcrumbs,
-    BreadcrumbSelectDetail,
-} from '@spectrum-web-components/breadcrumbs';
-import { getBreadcrumbs } from '../stories/template.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-import '@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js';
-import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';
-import { sendKeys } from '@web/test-runner-commands';
-
-describe('Breadcrumbs', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                ${getBreadcrumbs(4)}
-            `)
-    );
-    it('should render accessibly', async () => {
-        const el = await fixture(html`
-            ${getBreadcrumbs(4)}
-        `);
-
-        await elementUpdated(el);
-        await expect(el).to.be.accessible();
-
-        // Default role and aria-label.
-        expect(el.getAttribute('role')).to.equal('navigation');
-        expect(el.getAttribute('aria-label')).to.equal('Breadcrumbs');
-
-        // Reacts to changes of `label` attribute.
-        el.label = 'My breadcrumbs';
-        await elementUpdated(el);
-        expect(el.getAttribute('aria-label')).to.equal('My breadcrumbs');
+  Breadcrumbs,
+  BreadcrumbSelectDetail,
+} from "@spectrum-web-components/breadcrumbs";
+import { getBreadcrumbs } from "../stories/template.js";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+import "@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js";
+import "@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js";
+import { sendKeys } from "@web/test-runner-commands";
+
+describe("Breadcrumbs", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        ${getBreadcrumbs(4)}
+      `),
+  );
+  it("should render accessibly", async () => {
+    const el = await fixture(html`
+      ${getBreadcrumbs(4)}
+    `);
+
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+
+    // Default role and aria-label.
+    expect(el.getAttribute("role")).to.equal("navigation");
+    expect(el.getAttribute("aria-label")).to.equal("Breadcrumbs");
+
+    // Reacts to changes of `label` attribute.
+    el.label = "My breadcrumbs";
+    await elementUpdated(el);
+    expect(el.getAttribute("aria-label")).to.equal("My breadcrumbs");
+  });
+  it("should display all breadcrumbs if max-visible-items >= nr. or slotted breadcrumb items", async () => {
+    const el = await fixture(html`
+      ${getBreadcrumbs(4)}
+    `);
+
+    await elementUpdated(el);
+
+    const breadcrumbs = el.querySelectorAll("sp-breadcrumb-item");
+
+    breadcrumbs.forEach((breadcrumb) => {
+      expect(breadcrumb).to.be.displayed;
     });
-    it('should display all breadcrumbs if max-visible-items >= nr. or slotted breadcrumb items', async () => {
-        const el = await fixture(html`
-            ${getBreadcrumbs(4)}
-        `);
+  });
+  it("should collapse breadcrumbs if max-visible-items < nr. or slotted breadcrumb items", async () => {
+    const el = await fixture(html`
+      
+        ${getBreadcrumbs(4)}
+      
+    `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        const breadcrumbs = el.querySelectorAll('sp-breadcrumb-item');
+    const breadcrumbs = el.querySelectorAll("sp-breadcrumb-item");
 
-        breadcrumbs.forEach((breadcrumb) => {
-            expect(breadcrumb).to.be.displayed;
-        });
-    });
-    it('should collapse breadcrumbs if max-visible-items < nr. or slotted breadcrumb items', async () => {
-        const el = await fixture(html`
-            
-                ${getBreadcrumbs(4)}
-            
-        `);
+    expect(breadcrumbs[0]).not.to.be.displayed;
+    expect(breadcrumbs[1]).to.be.displayed;
+    expect(breadcrumbs[2]).to.be.displayed;
+    expect(breadcrumbs[3]).to.be.displayed;
 
-        await elementUpdated(el);
+    const menu = el.shadowRoot.querySelector("sp-action-menu") as ActionMenu;
 
-        const breadcrumbs = el.querySelectorAll('sp-breadcrumb-item');
+    expect(menu).to.exist;
 
-        expect(breadcrumbs[0]).not.to.be.displayed;
-        expect(breadcrumbs[1]).to.be.displayed;
-        expect(breadcrumbs[2]).to.be.displayed;
-        expect(breadcrumbs[3]).to.be.displayed;
+    menu.click();
+    await elementUpdated(menu);
+    expect(menu.open).to.be.true;
 
-        const menu = el.shadowRoot.querySelector(
-            'sp-action-menu'
-        ) as ActionMenu;
+    const menuitems = menu.querySelectorAll("sp-menu-item");
 
-        expect(menu).to.exist;
+    expect(menuitems.length).to.equal(4);
+    expect(menu.getAttribute("value")).to.equal("3");
+  });
+  it('should always show the first breadcrumb if slot="root" is populated', async () => {
+    const el = await fixture(html`
+      
+         Home 
+        ${getBreadcrumbs(4)}
+      
+    `);
 
-        menu.click();
-        await elementUpdated(menu);
-        expect(menu.open).to.be.true;
+    await elementUpdated(el);
 
-        const menuitems = menu.querySelectorAll('sp-menu-item');
+    const breadcrumbs = el.querySelectorAll("sp-breadcrumb-item");
 
-        expect(menuitems.length).to.equal(4);
-        expect(menu.getAttribute('value')).to.equal('3');
-    });
-    it('should always show the first breadcrumb if slot="root" is populated', async () => {
-        const el = await fixture(html`
-            
-                
-                    Home
-                
-                ${getBreadcrumbs(4)}
-            
-        `);
-
-        await elementUpdated(el);
-
-        const breadcrumbs = el.querySelectorAll('sp-breadcrumb-item');
-
-        expect(breadcrumbs[0]).to.be.displayed;
-        expect(breadcrumbs[1]).not.to.be.displayed;
-        expect(breadcrumbs[2]).to.be.displayed;
-        expect(breadcrumbs[3]).to.be.displayed;
-        expect(breadcrumbs[4]).to.be.displayed;
-
-        const menu = el.shadowRoot.querySelector(
-            'sp-action-menu'
-        ) as ActionMenu;
-
-        expect(menu).to.exist;
-    });
-    it('should emit a change event on breadcrumb click if no href is provided', async () => {
-        const changeSpy = spy();
+    expect(breadcrumbs[0]).to.be.displayed;
+    expect(breadcrumbs[1]).not.to.be.displayed;
+    expect(breadcrumbs[2]).to.be.displayed;
+    expect(breadcrumbs[3]).to.be.displayed;
+    expect(breadcrumbs[4]).to.be.displayed;
 
-        const el = await fixture(html`
-             {
-                    changeSpy(event.detail.value);
-                }}
-            >
-                ${getBreadcrumbs(4)}
-            
-        `);
+    const menu = el.shadowRoot.querySelector("sp-action-menu") as ActionMenu;
 
-        await elementUpdated(el);
+    expect(menu).to.exist;
+  });
+  it("should emit a change event on breadcrumb click if no href is provided", async () => {
+    const changeSpy = spy();
 
-        // Simulate a click from the visible breadcrumb.
-        const breadcrumbs = el.querySelectorAll('sp-breadcrumb-item');
+    const el = await fixture(html`
+       {
+          changeSpy(event.detail.value);
+        }}
+      >
+        ${getBreadcrumbs(4)}
+      
+    `);
 
-        breadcrumbs[1].click();
+    await elementUpdated(el);
 
-        expect(changeSpy).to.have.been.calledOnce;
-        expect(changeSpy).to.have.been.calledWith('1');
+    // Simulate a click from the visible breadcrumb.
+    const breadcrumbs = el.querySelectorAll("sp-breadcrumb-item");
 
-        changeSpy.resetHistory();
+    breadcrumbs[1].click();
 
-        // Simulate a click from the menu dropdown.
-        const menu = el.shadowRoot.querySelector(
-            'sp-action-menu'
-        ) as ActionMenu;
+    expect(changeSpy).to.have.been.calledOnce;
+    expect(changeSpy).to.have.been.calledWith("1");
 
-        expect(menu).to.exist;
+    changeSpy.resetHistory();
 
-        const opened = oneEvent(el, 'sp-opened');
+    // Simulate a click from the menu dropdown.
+    const menu = el.shadowRoot.querySelector("sp-action-menu") as ActionMenu;
 
-        menu.click();
-        await elementUpdated(menu);
-        await opened;
+    expect(menu).to.exist;
 
-        const closed = oneEvent(el, 'sp-closed');
-        const menuitems = menu.querySelectorAll('sp-menu-item');
+    const opened = oneEvent(el, "sp-opened");
 
-        menuitems[0].click();
-        await closed;
+    menu.click();
+    await elementUpdated(menu);
+    await opened;
 
-        expect(menu.open).to.be.false;
+    const closed = oneEvent(el, "sp-closed");
+    const menuitems = menu.querySelectorAll("sp-menu-item");
 
-        await elementUpdated(el);
-        expect(changeSpy).to.have.been.calledOnce;
-        expect(changeSpy).to.have.been.calledWith('0');
-    });
+    menuitems[0].click();
+    await closed;
 
-    it('should emit a change event on Enter keypress', async () => {
-        const changeSpy = spy();
+    expect(menu.open).to.be.false;
 
-        const el = await fixture(html`
-             {
-                    changeSpy(event.detail.value);
-                }}
-            >
-                ${getBreadcrumbs(4)}
-            
-        `);
+    await elementUpdated(el);
+    expect(changeSpy).to.have.been.calledOnce;
+    expect(changeSpy).to.have.been.calledWith("0");
+  });
 
-        await elementUpdated(el);
+  it("should emit a change event on Enter keypress", async () => {
+    const changeSpy = spy();
 
-        // Simulate a click from the visible breadcrumb.
-        const breadcrumbs = el.querySelectorAll('sp-breadcrumb-item');
+    const el = await fixture(html`
+       {
+          changeSpy(event.detail.value);
+        }}
+      >
+        ${getBreadcrumbs(4)}
+      
+    `);
 
-        breadcrumbs[1].focus();
-        await sendKeys({ press: 'Enter' });
+    await elementUpdated(el);
 
-        expect(changeSpy).to.have.been.calledOnce;
-        expect(changeSpy).to.have.been.calledWith('1');
-    });
+    // Simulate a click from the visible breadcrumb.
+    const breadcrumbs = el.querySelectorAll("sp-breadcrumb-item");
+
+    breadcrumbs[1].focus();
+    await sendKeys({ press: "Enter" });
+
+    expect(changeSpy).to.have.been.calledOnce;
+    expect(changeSpy).to.have.been.calledWith("1");
+  });
 });
diff --git a/packages/button-group/sp-button-group.ts b/packages/button-group/sp-button-group.ts
index a2048c4db6..bf4bafc935 100644
--- a/packages/button-group/sp-button-group.ts
+++ b/packages/button-group/sp-button-group.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { ButtonGroup } from './src/ButtonGroup.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { ButtonGroup } from "./src/ButtonGroup.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-button-group', ButtonGroup);
+defineElement("sp-button-group", ButtonGroup);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-button-group': ButtonGroup;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-button-group": ButtonGroup;
+  }
 }
diff --git a/packages/button-group/src/ButtonGroup.ts b/packages/button-group/src/ButtonGroup.ts
index ee77e70e83..09eda23a53 100644
--- a/packages/button-group/src/ButtonGroup.ts
+++ b/packages/button-group/src/ButtonGroup.ts
@@ -11,16 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import type { Button } from '@spectrum-web-components/button';
+  CSSResultArray,
+  html,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import type { Button } from "@spectrum-web-components/button";
 
-import styles from './button-group.css.js';
+import styles from "./button-group.css.js";
 
 /**
  * @element sp-button-group
@@ -29,28 +29,26 @@ import styles from './button-group.css.js';
  *
  */
 export class ButtonGroup extends SizedMixin(SpectrumElement, {
-    noDefaultSize: true,
+  noDefaultSize: true,
 }) {
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    @property({ type: Boolean, reflect: true })
-    public vertical = false;
-
-    protected handleSlotchange({
-        target: slot,
-    }: Event & { target: HTMLSlotElement }): void {
-        const assignedElements = slot.assignedElements() as Button[];
-
-        assignedElements.forEach((button) => {
-            button.size = this.size;
-        });
-    }
-
-    protected override render(): TemplateResult {
-        return html`
-            
-        `;
-    }
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Boolean, reflect: true })
+  public vertical = false;
+
+  protected handleSlotchange({
+    target: slot,
+  }: Event & { target: HTMLSlotElement }): void {
+    const assignedElements = slot.assignedElements() as Button[];
+
+    assignedElements.forEach((button) => {
+      button.size = this.size;
+    });
+  }
+
+  protected override render(): TemplateResult {
+    return html`  `;
+  }
 }
diff --git a/packages/button-group/src/index.ts b/packages/button-group/src/index.ts
index 0ed026fe1d..5f5a565e43 100644
--- a/packages/button-group/src/index.ts
+++ b/packages/button-group/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './ButtonGroup.js';
+export * from "./ButtonGroup.js";
diff --git a/packages/button-group/stories/button-group-sizes.stories.ts b/packages/button-group/stories/button-group-sizes.stories.ts
index 57d3dc20f6..4240f056fd 100644
--- a/packages/button-group/stories/button-group-sizes.stories.ts
+++ b/packages/button-group/stories/button-group-sizes.stories.ts
@@ -10,43 +10,43 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 
 import {
-    buttons,
-    buttonsVertical,
-    Properties,
-} from './button-group.stories.js';
+  buttons,
+  buttonsVertical,
+  Properties,
+} from "./button-group.stories.js";
 
 export default {
-    title: 'Button Group/Sizes',
-    component: 'sp-button-group',
+  title: "Button Group/Sizes",
+  component: "sp-button-group",
 };
 
 export const s = (args: Properties): TemplateResult => buttons(args);
-s.args = { size: 's' };
+s.args = { size: "s" };
 
 export const m = (args: Properties): TemplateResult => buttons(args);
-m.args = { size: 'm' };
+m.args = { size: "m" };
 
 export const l = (args: Properties): TemplateResult => buttons(args);
-l.args = { size: 'l' };
+l.args = { size: "l" };
 
 export const XL = (args: Properties): TemplateResult => buttons(args);
-XL.args = { size: 'XL' };
+XL.args = { size: "XL" };
 
 export const verticalS = (args: Properties): TemplateResult =>
-    buttonsVertical(args);
-verticalS.args = { size: 's' };
+  buttonsVertical(args);
+verticalS.args = { size: "s" };
 
 export const verticalM = (args: Properties): TemplateResult =>
-    buttonsVertical(args);
-verticalM.args = { size: 'm' };
+  buttonsVertical(args);
+verticalM.args = { size: "m" };
 
 export const verticalL = (args: Properties): TemplateResult =>
-    buttonsVertical(args);
-verticalL.args = { size: 'l' };
+  buttonsVertical(args);
+verticalL.args = { size: "l" };
 
 export const verticalXL = (args: Properties): TemplateResult =>
-    buttonsVertical(args);
-verticalXL.args = { size: 'XL' };
+  buttonsVertical(args);
+verticalXL.args = { size: "XL" };
diff --git a/packages/button-group/stories/button-group.stories.ts b/packages/button-group/stories/button-group.stories.ts
index e4d6bd5643..5fde41227a 100644
--- a/packages/button-group/stories/button-group.stories.ts
+++ b/packages/button-group/stories/button-group.stories.ts
@@ -10,53 +10,53 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/button-group/sp-button-group.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/icon/sp-icon.js';
+import "@spectrum-web-components/button-group/sp-button-group.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/icon/sp-icon.js";
 
 export default {
-    title: 'Button Group',
-    component: 'sp-button-group',
+  title: "Button Group",
+  component: "sp-button-group",
 };
 
 export interface Properties {
-    size?: 's' | 'm' | 'l' | 'xl';
+  size?: "s" | "m" | "l" | "xl";
 }
 
 interface Story {
-    (args: T): TemplateResult;
-    args: Partial;
-    argTypes?: Record;
+  (args: T): TemplateResult;
+  args: Partial;
+  argTypes?: Record;
 }
 
 export const buttons: Story = (
-    args: Properties
+  args: Properties,
 ): TemplateResult => {
-    return html`
-        
-            Button 1
-            Longer Button 2
-            Short 3
-        
-    `;
+  return html`
+    
+      Button 1
+      Longer Button 2
+      Short 3
+    
+  `;
 };
 buttons.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const buttonsVertical: Story = (
-    args: Properties
+  args: Properties,
 ): TemplateResult => {
-    return html`
-        
-            Button 1
-            Longer Button 2
-            Short 3
-        
-    `;
+  return html`
+    
+      Button 1
+      Longer Button 2
+      Short 3
+    
+  `;
 };
 buttonsVertical.args = {
-    size: 'm',
+  size: "m",
 };
diff --git a/packages/button-group/test/benchmark/basic-test.ts b/packages/button-group/test/benchmark/basic-test.ts
index 1cc95c5304..f5b8b91e5e 100644
--- a/packages/button-group/test/benchmark/basic-test.ts
+++ b/packages/button-group/test/benchmark/basic-test.ts
@@ -10,15 +10,15 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/button-group/sp-button-group.js';
-import '@spectrum-web-components/button/sp-button.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/button-group/sp-button-group.js";
+import "@spectrum-web-components/button/sp-button.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        Button 1
-        Longer Button 2
-        Short 3
-    
+  
+    Button 1
+    Longer Button 2
+    Short 3
+  
 `);
diff --git a/packages/button-group/test/button-group-memory.test.ts b/packages/button-group/test/button-group-memory.test.ts
index 460963b54a..793b48cd6e 100644
--- a/packages/button-group/test/button-group-memory.test.ts
+++ b/packages/button-group/test/button-group-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { buttons } from '../stories/button-group.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { buttons } from "../stories/button-group.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(buttons({}));
diff --git a/packages/button-group/test/button-group.test.ts b/packages/button-group/test/button-group.test.ts
index 7c0e356dc9..b21dab47a6 100644
--- a/packages/button-group/test/button-group.test.ts
+++ b/packages/button-group/test/button-group.test.ts
@@ -13,28 +13,28 @@ governing permissions and limitations under the License.
 import { elementUpdated, expect, fixture } from "@open-wc/testing";
 
 import "@spectrum-web-components/button-group/sp-button-group.js";
-import { ButtonGroup } from "../";
+import { ButtonGroup } from "../src/index.js";
 import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 import { buttons, buttonsVertical } from "../stories/button-group.stories.js";
 
 describe("Buttongroup", () => {
-	testForLitDevWarnings(
-		async () => await fixture(buttons(buttons.args)),
-	);
-	it("loads default button-group accessibly with sp-button", async () => {
-		const el = await fixture(buttons(buttons.args));
+  testForLitDevWarnings(
+    async () => await fixture(buttons(buttons.args)),
+  );
+  it("loads default button-group accessibly with sp-button", async () => {
+    const el = await fixture(buttons(buttons.args));
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await expect(el).to.be.accessible();
-	});
-	it("loads default button-group[vertial] accessibly with sp-button", async () => {
-		const el = await fixture(
-			buttonsVertical(buttonsVertical.args),
-		);
+    await expect(el).to.be.accessible();
+  });
+  it("loads default button-group[vertial] accessibly with sp-button", async () => {
+    const el = await fixture(
+      buttonsVertical(buttonsVertical.args),
+    );
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await expect(el).to.be.accessible();
-	});
+    await expect(el).to.be.accessible();
+  });
 });
diff --git a/packages/button/sp-button.ts b/packages/button/sp-button.ts
index 481aeef8da..348e4d14ff 100644
--- a/packages/button/sp-button.ts
+++ b/packages/button/sp-button.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Button } from './src/Button.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Button } from "./src/Button.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-button', Button);
+defineElement("sp-button", Button);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-button': Button;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-button": Button;
+  }
 }
diff --git a/packages/button/sp-clear-button.ts b/packages/button/sp-clear-button.ts
index d7547e2ff6..f387323827 100644
--- a/packages/button/sp-clear-button.ts
+++ b/packages/button/sp-clear-button.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { ClearButton } from './src/ClearButton.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { ClearButton } from "./src/ClearButton.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-clear-button', ClearButton);
+defineElement("sp-clear-button", ClearButton);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-clear-button': ClearButton;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-clear-button": ClearButton;
+  }
 }
diff --git a/packages/button/sp-close-button.ts b/packages/button/sp-close-button.ts
index 98692be3de..a519dc3317 100644
--- a/packages/button/sp-close-button.ts
+++ b/packages/button/sp-close-button.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { CloseButton } from './src/CloseButton.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { CloseButton } from "./src/CloseButton.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-close-button', CloseButton);
+defineElement("sp-close-button", CloseButton);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-close-button': CloseButton;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-close-button": CloseButton;
+  }
 }
diff --git a/packages/button/src/Button.ts b/packages/button/src/Button.ts
index f1557fa082..b4f442878b 100644
--- a/packages/button/src/Button.ts
+++ b/packages/button/src/Button.ts
@@ -10,37 +10,37 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { ButtonBase } from './ButtonBase.js';
-import buttonStyles from './button.css.js';
-import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';
-
-export type DeprecatedButtonVariants = 'cta' | 'overBackground';
-export type ButtonStaticColors = 'white' | 'black';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SizedMixin,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ButtonBase } from "./ButtonBase.js";
+import buttonStyles from "./button.css.js";
+import { PendingStateController } from "@spectrum-web-components/reactive-controllers/src/PendingState.js";
+
+export type DeprecatedButtonVariants = "cta" | "overBackground";
+export type ButtonStaticColors = "white" | "black";
 export type ButtonVariants =
-    | 'accent'
-    | 'primary'
-    | 'secondary'
-    | 'negative'
-    | ButtonStaticColors
-    | DeprecatedButtonVariants;
+  | "accent"
+  | "primary"
+  | "secondary"
+  | "negative"
+  | ButtonStaticColors
+  | DeprecatedButtonVariants;
 export const VALID_VARIANTS = [
-    'accent',
-    'primary',
-    'secondary',
-    'negative',
-    'white',
-    'black',
+  "accent",
+  "primary",
+  "secondary",
+  "negative",
+  "white",
+  "black",
 ];
-export const VALID_STATIC_COLORS = ['white', 'black'];
+export const VALID_STATIC_COLORS = ["white", "black"];
 
-export type ButtonTreatments = 'fill' | 'outline';
+export type ButtonTreatments = "fill" | "outline";
 
 /**
  * @element sp-button
@@ -49,172 +49,173 @@ export type ButtonTreatments = 'fill' | 'outline';
  * @slot icon - The icon to use for Button
  */
 export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
-    public static override get styles(): CSSResultArray {
-        return [...super.styles, buttonStyles];
+  public static override get styles(): CSSResultArray {
+    return [...super.styles, buttonStyles];
+  }
+
+  @property({ type: String, attribute: "pending-label" })
+  public pendingLabel = "Pending";
+
+  // Use this property to set the button into a pending state
+  @property({ type: Boolean, reflect: true, attribute: true })
+  public pending = false;
+
+  public pendingStateController: PendingStateController;
+
+  /**
+   * Initializes the `PendingStateController` for the Button component.
+   * The `PendingStateController` manages the pending state of the Button.
+   */
+  constructor() {
+    super();
+    this.pendingStateController = new PendingStateController(this);
+  }
+
+  public override click(): void {
+    if (this.pending) {
+      return;
     }
 
-    @property({ type: String, attribute: 'pending-label' })
-    public pendingLabel = 'Pending';
+    super.click();
+  }
+
+  /**
+   * The visual variant to apply to this button.
+   */
+  @property()
+  public get variant(): ButtonVariants {
+    return this._variant;
+  }
+  public set variant(variant: ButtonVariants) {
+    if (variant === this.variant) {
+      return;
+    }
 
-    // Use this property to set the button into a pending state
-    @property({ type: Boolean, reflect: true, attribute: true })
-    public pending = false;
+    this.requestUpdate("variant", this.variant);
 
-    public pendingStateController: PendingStateController;
+    switch (variant) {
+      case "cta":
+        this._variant = "accent";
 
-    /**
-     * Initializes the `PendingStateController` for the Button component.
-     * The `PendingStateController` manages the pending state of the Button.
-     */
-    constructor() {
-        super();
-        this.pendingStateController = new PendingStateController(this);
-    }
+        if (window.__swc.DEBUG) {
+          window.__swc.warn(
+            this,
+            `The "cta" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "variant='accent'" instead.`,
+            "https://opensource.adobe.com/spectrum-web-components/components/button/#variants",
+            { level: "deprecation" },
+          );
+        }
 
-    public override click(): void {
-        if (this.pending) {
-            return;
+        break;
+      case "overBackground":
+        this.removeAttribute("variant");
+        this.staticColor = "white";
+        this.treatment = "outline";
+
+        if (window.__swc.DEBUG) {
+          window.__swc.warn(
+            this,
+            `The "overBackground" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "staticColor='white'" with "treatment='outline'" instead.`,
+            "https://opensource.adobe.com/spectrum-web-components/components/button",
+            { level: "deprecation" },
+          );
         }
 
-        super.click();
-    }
+        return;
+      case "white":
+        this.staticColor = variant;
+        this.removeAttribute("variant");
+
+        if (window.__swc.DEBUG) {
+          window.__swc.warn(
+            this,
+            `The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`,
+            "https://opensource.adobe.com/spectrum-web-components/components/button/api",
+            { level: "deprecation" },
+          );
+        }
 
-    /**
-     * The visual variant to apply to this button.
-     */
-    @property()
-    public get variant(): ButtonVariants {
-        return this._variant;
-    }
-    public set variant(variant: ButtonVariants) {
-        if (variant === this.variant) return;
-
-        this.requestUpdate('variant', this.variant);
-
-        switch (variant) {
-            case 'cta':
-                this._variant = 'accent';
-
-                if (window.__swc.DEBUG) {
-                    window.__swc.warn(
-                        this,
-                        `The "cta" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "variant='accent'" instead.`,
-                        'https://opensource.adobe.com/spectrum-web-components/components/button/#variants',
-                        { level: 'deprecation' }
-                    );
-                }
-
-                break;
-            case 'overBackground':
-                this.removeAttribute('variant');
-                this.staticColor = 'white';
-                this.treatment = 'outline';
-
-                if (window.__swc.DEBUG) {
-                    window.__swc.warn(
-                        this,
-                        `The "overBackground" value of the "variant" attribute on <${this.localName}> has been deprecated and will be removed in a future release. Use "staticColor='white'" with "treatment='outline'" instead.`,
-                        'https://opensource.adobe.com/spectrum-web-components/components/button',
-                        { level: 'deprecation' }
-                    );
-                }
-
-                return;
-            case 'white':
-                this.staticColor = variant;
-                this.removeAttribute('variant');
-
-                if (window.__swc.DEBUG) {
-                    window.__swc.warn(
-                        this,
-                        `The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`,
-                        'https://opensource.adobe.com/spectrum-web-components/components/button/api',
-                        { level: 'deprecation' }
-                    );
-                }
-
-                return;
-            case 'black':
-                this.staticColor = variant;
-                this.removeAttribute('variant');
-
-                if (window.__swc.DEBUG) {
-                    window.__swc.warn(
-                        this,
-                        `The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`,
-                        'https://opensource.adobe.com/spectrum-web-components/components/button/api',
-                        { level: 'deprecation' }
-                    );
-                }
-
-                return;
-            case null:
-                return;
-            default:
-                if (!VALID_VARIANTS.includes(variant)) {
-                    this._variant = 'accent';
-                } else {
-                    this._variant = variant;
-                }
-
-                break;
+        return;
+      case "black":
+        this.staticColor = variant;
+        this.removeAttribute("variant");
+
+        if (window.__swc.DEBUG) {
+          window.__swc.warn(
+            this,
+            `The "black" and "white" values of the "variant" attribute on <${this.localName}> have been deprecated and will be removed in a future release. Use "static-color='black'" or "static-color='white'" instead.`,
+            "https://opensource.adobe.com/spectrum-web-components/components/button/api",
+            { level: "deprecation" },
+          );
         }
 
-        this.setAttribute('variant', this.variant);
-    }
-    private _variant: ButtonVariants = 'accent';
-
-    /**
-     * The static color variant to use for this button.
-     */
-    @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'black' | 'white';
-
-    /**
-     * The visual treatment to apply to this button.
-     */
-    @property({ reflect: true })
-    public treatment: ButtonTreatments = 'fill';
-
-    /**
-     * Style this button to be less obvious
-     */
-    @property({ type: Boolean })
-    public set quiet(quiet: boolean) {
-        this.treatment = quiet ? 'outline' : 'fill';
-    }
+        return;
+      case null:
+        return;
+      default:
+        if (!VALID_VARIANTS.includes(variant)) {
+          this._variant = "accent";
+        } else {
+          this._variant = variant;
+        }
 
-    /**
-     * Disables text wrapping within the button component's label.
-     * Please note that this option is not a part of the design specification
-     * and should be used carefully, with consideration of this overflow behavior
-     * and the readability of the button's content.
-     */
-    @property({ type: Boolean, attribute: 'no-wrap', reflect: true })
-    public noWrap = false;
-
-    public get quiet(): boolean {
-        return this.treatment === 'outline';
+        break;
     }
 
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        // There is no Spectrum design context for an `` without a variant
-        // apply one manually when a consumer has not applied one themselves.
-
-        if (!this.hasAttribute('variant')) {
-            this.setAttribute('variant', this.variant);
-        }
-
-        if (this.pending) {
-            this.pendingStateController.hostUpdated();
-        }
+    this.setAttribute("variant", this.variant);
+  }
+  private _variant: ButtonVariants = "accent";
+
+  /**
+   * The static color variant to use for this button.
+   */
+  @property({ reflect: true, attribute: "static-color" })
+  public staticColor?: "black" | "white";
+
+  /**
+   * The visual treatment to apply to this button.
+   */
+  @property({ reflect: true })
+  public treatment: ButtonTreatments = "fill";
+
+  /**
+   * Style this button to be less obvious
+   */
+  @property({ type: Boolean })
+  public set quiet(quiet: boolean) {
+    this.treatment = quiet ? "outline" : "fill";
+  }
+
+  /**
+   * Disables text wrapping within the button component's label.
+   * Please note that this option is not a part of the design specification
+   * and should be used carefully, with consideration of this overflow behavior
+   * and the readability of the button's content.
+   */
+  @property({ type: Boolean, attribute: "no-wrap", reflect: true })
+  public noWrap = false;
+
+  public get quiet(): boolean {
+    return this.treatment === "outline";
+  }
+
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
+    // There is no Spectrum design context for an `` without a variant
+    // apply one manually when a consumer has not applied one themselves.
+
+    if (!this.hasAttribute("variant")) {
+      this.setAttribute("variant", this.variant);
     }
 
-    protected override renderButton(): TemplateResult {
-        return html`
-            ${this.buttonContent}
-            ${this.pendingStateController.renderPendingState()}
-        `;
+    if (this.pending) {
+      this.pendingStateController.hostUpdated();
     }
+  }
+
+  protected override renderButton(): TemplateResult {
+    return html`
+      ${this.buttonContent} ${this.pendingStateController.renderPendingState()}
+    `;
+  }
 }
diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
index 6a6e4803ab..0644e87c00 100644
--- a/packages/button/src/ButtonBase.ts
+++ b/packages/button/src/ButtonBase.ts
@@ -11,14 +11,14 @@ governing permissions and limitations under the License.
 */
 
 import {
-	CSSResultArray,
-	html,
-	PropertyValues,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  PropertyValues,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	property,
-	query,
+  property,
+  query,
 } from "@spectrum-web-components/base/src/decorators.js";
 import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
 import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
@@ -30,230 +30,230 @@ import buttonStyles from "./button-base.css.js";
  * @slot icon - icon element(s) to display at the start of the button
  */
 export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), "", [
-	"sp-overlay,sp-tooltip",
+  "sp-overlay,sp-tooltip",
 ]) {
-	public static override get styles(): CSSResultArray {
-		return [buttonStyles];
-	}
-
-	// TODO we need to document this property for consumers,
-	// as it's not a 1:1 equivalent to active
-	@property({ type: Boolean, reflect: true })
-	public active = false;
-
-	/**
-	 * The default behavior of the button.
-	 * Possible values are: `button` (default), `submit`, and `reset`.
-	 */
-	@property({ type: String })
-	public type: "button" | "submit" | "reset" = "button";
-
-	/**
-	 * HTML anchor element that component clicks by proxy
-	 */
-	@query(".anchor")
-	private anchorElement!: HTMLAnchorElement;
-
-	public override get focusElement(): HTMLElement {
-		return this;
-	}
-
-	protected get hasLabel(): boolean {
-		return this.slotHasContent;
-	}
-
-	protected get buttonContent(): TemplateResult[] {
-		const content = [
-			html`  `,
-			html`
-				
-					
-				
-			`,
-		];
-
-		return content;
-	}
-
-	constructor() {
-		super();
-		this.proxyFocus = this.proxyFocus.bind(this);
-
-		this.addEventListener("click", this.handleClickCapture, {
-			capture: true,
-		});
-	}
-
-	private handleClickCapture(event: Event): void | boolean {
-		if (this.disabled) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			event.stopPropagation();
-
-			return false;
-		}
-
-		if (this.shouldProxyClick()) {
-			return;
-		}
-	}
-
-	private proxyFocus(): void {
-		this.focus();
-	}
-
-	private shouldProxyClick(): boolean {
-		let handled = false;
-
-		if (this.anchorElement) {
-			// click HTML anchor element by proxy
-			this.anchorElement.click();
-			handled = true;
-			// if the button type is `submit` or `reset`
-		} else if (this.type !== "button") {
-			// create an HTML Button Element by proxy, click it, and remove it
-			const proxy = document.createElement("button");
-
-			proxy.type = this.type;
-			this.insertAdjacentElement("afterend", proxy);
-			proxy.click();
-			proxy.remove();
-			handled = true;
-		}
-
-		return handled;
-	}
-
-	public override renderAnchor(): TemplateResult {
-		return html`
-			${this.buttonContent}
-			${super.renderAnchor({
-				id: "button",
-				ariaHidden: true,
-				className: "button anchor hidden",
-			})}
-		`;
-	}
-
-	protected renderButton(): TemplateResult {
-		return html` ${this.buttonContent} `;
-	}
-
-	protected override render(): TemplateResult {
-		return this.href && this.href.length > 0
-			? this.renderAnchor()
-			: this.renderButton();
-	}
-
-	protected handleKeydown(event: KeyboardEvent): void {
-		const { code } = event;
-
-		switch (code) {
-			case "Space":
-				event.preventDefault();
-
-				// allows button to activate when `Space` is pressed
-				if (typeof this.href === "undefined") {
-					this.addEventListener("keyup", this.handleKeyup);
-					this.active = true;
-				}
-
-				break;
-			default:
-				break;
-		}
-	}
-
-	private handleKeypress(event: KeyboardEvent): void {
-		const { code } = event;
-
-		switch (code) {
-			case "Enter":
-			case "NumpadEnter":
-				// allows button or link to be activated with `Enter` and `NumpadEnter`
-				this.click();
-				break;
-			default:
-				break;
-		}
-	}
-
-	protected handleKeyup(event: KeyboardEvent): void {
-		const { code } = event;
-
-		switch (code) {
-			case "Space":
-				this.removeEventListener("keyup", this.handleKeyup);
-				this.active = false;
-				this.click();
-				break;
-			default:
-				break;
-		}
-	}
-
-	private manageAnchor(): void {
-		// for a link
-		if (this.href && this.href.length > 0) {
-			// if the role is set to button
-			if (
-				!this.hasAttribute("role") ||
-				this.getAttribute("role") === "button"
-			) {
-				// change role to link
-				this.setAttribute("role", "link");
-			}
-			// else for a button
-		} else {
-			// if the role is set to link
-			if (!this.hasAttribute("role") || this.getAttribute("role") === "link") {
-				// change role to button
-				this.setAttribute("role", "button");
-			}
-		}
-	}
-
-	protected override firstUpdated(changed: PropertyValues): void {
-		super.firstUpdated(changed);
-
-		if (!this.hasAttribute("tabindex")) {
-			this.setAttribute("tabindex", "0");
-		}
-
-		if (changed.has("label")) {
-			if (this.label) {
-				this.setAttribute("aria-label", this.label);
-			} else {
-				this.removeAttribute("aria-label");
-			}
-		}
-
-		this.manageAnchor();
-		this.addEventListener("keydown", this.handleKeydown);
-		this.addEventListener("keypress", this.handleKeypress);
-	}
-
-	protected override updated(changed: PropertyValues): void {
-		super.updated(changed);
-
-		if (changed.has("href")) {
-			this.manageAnchor();
-		}
-
-		if (this.anchorElement) {
-			this.anchorElement.addEventListener("focus", this.proxyFocus);
-			this.anchorElement.tabIndex = -1;
-		}
-	}
-	protected override update(changes: PropertyValues): void {
-		super.update(changes);
-
-		if (changes.has("label")) {
-			if (this.label) {
-				this.setAttribute("aria-label", this.label);
-			} else {
-				this.removeAttribute("aria-label");
-			}
-		}
-	}
+  public static override get styles(): CSSResultArray {
+    return [buttonStyles];
+  }
+
+  // TODO we need to document this property for consumers,
+  // as it's not a 1:1 equivalent to active
+  @property({ type: Boolean, reflect: true })
+  public active = false;
+
+  /**
+   * The default behavior of the button.
+   * Possible values are: `button` (default), `submit`, and `reset`.
+   */
+  @property({ type: String })
+  public type: "button" | "submit" | "reset" = "button";
+
+  /**
+   * HTML anchor element that component clicks by proxy
+   */
+  @query(".anchor")
+  private anchorElement!: HTMLAnchorElement;
+
+  public override get focusElement(): HTMLElement {
+    return this;
+  }
+
+  protected get hasLabel(): boolean {
+    return this.slotHasContent;
+  }
+
+  protected get buttonContent(): TemplateResult[] {
+    const content = [
+      html`  `,
+      html`
+        
+          
+        
+      `,
+    ];
+
+    return content;
+  }
+
+  constructor() {
+    super();
+    this.proxyFocus = this.proxyFocus.bind(this);
+
+    this.addEventListener("click", this.handleClickCapture, {
+      capture: true,
+    });
+  }
+
+  private handleClickCapture(event: Event): void | boolean {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+
+      return false;
+    }
+
+    if (this.shouldProxyClick()) {
+      return;
+    }
+  }
+
+  private proxyFocus(): void {
+    this.focus();
+  }
+
+  private shouldProxyClick(): boolean {
+    let handled = false;
+
+    if (this.anchorElement) {
+      // click HTML anchor element by proxy
+      this.anchorElement.click();
+      handled = true;
+      // if the button type is `submit` or `reset`
+    } else if (this.type !== "button") {
+      // create an HTML Button Element by proxy, click it, and remove it
+      const proxy = document.createElement("button");
+
+      proxy.type = this.type;
+      this.insertAdjacentElement("afterend", proxy);
+      proxy.click();
+      proxy.remove();
+      handled = true;
+    }
+
+    return handled;
+  }
+
+  public override renderAnchor(): TemplateResult {
+    return html`
+      ${this.buttonContent}
+      ${super.renderAnchor({
+        id: "button",
+        ariaHidden: true,
+        className: "button anchor hidden",
+      })}
+    `;
+  }
+
+  protected renderButton(): TemplateResult {
+    return html` ${this.buttonContent} `;
+  }
+
+  protected override render(): TemplateResult {
+    return this.href && this.href.length > 0
+      ? this.renderAnchor()
+      : this.renderButton();
+  }
+
+  protected handleKeydown(event: KeyboardEvent): void {
+    const { code } = event;
+
+    switch (code) {
+      case "Space":
+        event.preventDefault();
+
+        // allows button to activate when `Space` is pressed
+        if (typeof this.href === "undefined") {
+          this.addEventListener("keyup", this.handleKeyup);
+          this.active = true;
+        }
+
+        break;
+      default:
+        break;
+    }
+  }
+
+  private handleKeypress(event: KeyboardEvent): void {
+    const { code } = event;
+
+    switch (code) {
+      case "Enter":
+      case "NumpadEnter":
+        // allows button or link to be activated with `Enter` and `NumpadEnter`
+        this.click();
+        break;
+      default:
+        break;
+    }
+  }
+
+  protected handleKeyup(event: KeyboardEvent): void {
+    const { code } = event;
+
+    switch (code) {
+      case "Space":
+        this.removeEventListener("keyup", this.handleKeyup);
+        this.active = false;
+        this.click();
+        break;
+      default:
+        break;
+    }
+  }
+
+  private manageAnchor(): void {
+    // for a link
+    if (this.href && this.href.length > 0) {
+      // if the role is set to button
+      if (
+        !this.hasAttribute("role") ||
+        this.getAttribute("role") === "button"
+      ) {
+        // change role to link
+        this.setAttribute("role", "link");
+      }
+      // else for a button
+    } else {
+      // if the role is set to link
+      if (!this.hasAttribute("role") || this.getAttribute("role") === "link") {
+        // change role to button
+        this.setAttribute("role", "button");
+      }
+    }
+  }
+
+  protected override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+
+    if (changed.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+
+    this.manageAnchor();
+    this.addEventListener("keydown", this.handleKeydown);
+    this.addEventListener("keypress", this.handleKeypress);
+  }
+
+  protected override updated(changed: PropertyValues): void {
+    super.updated(changed);
+
+    if (changed.has("href")) {
+      this.manageAnchor();
+    }
+
+    if (this.anchorElement) {
+      this.anchorElement.addEventListener("focus", this.proxyFocus);
+      this.anchorElement.tabIndex = -1;
+    }
+  }
+  protected override update(changes: PropertyValues): void {
+    super.update(changes);
+
+    if (changes.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+  }
 }
diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts
index 34da4ad5f7..d924137831 100644
--- a/packages/button/src/ClearButton.ts
+++ b/packages/button/src/ClearButton.ts
@@ -11,46 +11,46 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { StyledButton } from './StyledButton.js';
-import buttonStyles from '@spectrum-web-components/clear-button/src/clear-button.css.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';
-import crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';
-import crossMediumOverrides from '@spectrum-web-components/icon/src/icon-cross-overrides.css.js';
+  CSSResultArray,
+  html,
+  SizedMixin,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { StyledButton } from "./StyledButton.js";
+import buttonStyles from "@spectrum-web-components/clear-button/src/clear-button.css.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross75.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross100.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js";
+import crossMediumStyles from "@spectrum-web-components/icon/src/spectrum-icon-cross.css.js";
+import crossMediumOverrides from "@spectrum-web-components/icon/src/icon-cross-overrides.css.js";
 
 const crossIcon: Record TemplateResult> = {
-    s: () => html`
-        
-    `,
-    m: () => html`
-        
-    `,
-    l: () => html`
-        
-    `,
-    xl: () => html`
-        
-    `,
+  s: () => html`
+    
+  `,
+  m: () => html`
+    
+  `,
+  l: () => html`
+    
+  `,
+  xl: () => html`
+    
+  `,
 };
 
 /**
@@ -60,30 +60,28 @@ const crossIcon: Record TemplateResult> = {
  * @slot icon - The icon to use for Clear Button
  */
 export class ClearButton extends SizedMixin(StyledButton, {
-    noDefaultSize: true,
+  noDefaultSize: true,
 }) {
-    public static override get styles(): CSSResultArray {
-        return [
-            ...super.styles,
-            buttonStyles,
-            crossMediumStyles,
-            crossMediumOverrides,
-        ];
-    }
+  public static override get styles(): CSSResultArray {
+    return [
+      ...super.styles,
+      buttonStyles,
+      crossMediumStyles,
+      crossMediumOverrides,
+    ];
+  }
 
-    /**
-     * The visual variant to apply to this button.
-     */
-    @property({ reflect: true })
-    public variant: 'overBackground' | '' = '';
+  /**
+   * The visual variant to apply to this button.
+   */
+  @property({ reflect: true })
+  public variant: "overBackground" | "" = "";
 
-    protected override get buttonContent(): TemplateResult[] {
-        return [crossIcon[this.size]()];
-    }
+  protected override get buttonContent(): TemplateResult[] {
+    return [crossIcon[this.size]()];
+  }
 
-    protected override render(): TemplateResult {
-        return html`
-            
${super.render()}

-        `;
-    }
+  protected override render(): TemplateResult {
+    return html` 
${super.render()}
 `;
+  }
 }
diff --git a/packages/button/src/CloseButton.ts b/packages/button/src/CloseButton.ts
index fa6377e335..3afbf8b7b5 100644
--- a/packages/button/src/CloseButton.ts
+++ b/packages/button/src/CloseButton.ts
@@ -11,47 +11,47 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { StyledButton } from './StyledButton.js';
-import buttonStyles from '@spectrum-web-components/close-button/src/close-button.css.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';
-import crossMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross.css.js';
-import crossMediumOverrides from '@spectrum-web-components/icon/src/icon-cross-overrides.css.js';
-import type { ButtonStaticColors } from './Button.js';
+  CSSResultArray,
+  html,
+  SizedMixin,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { StyledButton } from "./StyledButton.js";
+import buttonStyles from "@spectrum-web-components/close-button/src/close-button.css.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js";
+import crossMediumStyles from "@spectrum-web-components/icon/src/spectrum-icon-cross.css.js";
+import crossMediumOverrides from "@spectrum-web-components/icon/src/icon-cross-overrides.css.js";
+import type { ButtonStaticColors } from "./Button.js";
 
 const crossIcon: Record TemplateResult> = {
-    s: () => html`
-        
-    `,
-    m: () => html`
-        
-    `,
-    l: () => html`
-        
-    `,
-    xl: () => html`
-        
-    `,
+  s: () => html`
+    
+  `,
+  m: () => html`
+    
+  `,
+  l: () => html`
+    
+  `,
+  xl: () => html`
+    
+  `,
 };
 
 /**
@@ -61,27 +61,27 @@ const crossIcon: Record TemplateResult> = {
  * @slot icon - The icon to use for Close Button
  */
 export class CloseButton extends SizedMixin(StyledButton, {
-    noDefaultSize: true,
+  noDefaultSize: true,
 }) {
-    public static override get styles(): CSSResultArray {
-        return [
-            ...super.styles,
-            buttonStyles,
-            crossMediumStyles,
-            crossMediumOverrides,
-        ];
-    }
+  public static override get styles(): CSSResultArray {
+    return [
+      ...super.styles,
+      buttonStyles,
+      crossMediumStyles,
+      crossMediumOverrides,
+    ];
+  }
 
-    /**
-     * The visual variant to apply to this button.
-     */
-    @property({ reflect: true })
-    public variant: ButtonStaticColors | '' = '';
+  /**
+   * The visual variant to apply to this button.
+   */
+  @property({ reflect: true })
+  public variant: ButtonStaticColors | "" = "";
 
-    @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'black' | 'white';
+  @property({ reflect: true, attribute: "static-color" })
+  public staticColor?: "black" | "white";
 
-    protected override get buttonContent(): TemplateResult[] {
-        return [crossIcon[this.size]()];
-    }
+  protected override get buttonContent(): TemplateResult[] {
+    return [crossIcon[this.size]()];
+  }
 }
diff --git a/packages/button/src/StyledButton.ts b/packages/button/src/StyledButton.ts
index f348d14780..c3e55940b6 100644
--- a/packages/button/src/StyledButton.ts
+++ b/packages/button/src/StyledButton.ts
@@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ButtonBase } from './ButtonBase.js';
+import { ButtonBase } from "./ButtonBase.js";
 
 export class StyledButton extends ButtonBase {}
diff --git a/packages/button/src/index.ts b/packages/button/src/index.ts
index 485ba0d6c9..69fd07d2c7 100644
--- a/packages/button/src/index.ts
+++ b/packages/button/src/index.ts
@@ -9,8 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Button.js';
-export * from './ClearButton.js';
-export * from './CloseButton.js';
-export * from './ButtonBase.js';
-export * from './StyledButton.js';
+export * from "./Button.js";
+export * from "./ClearButton.js";
+export * from "./CloseButton.js";
+export * from "./ButtonBase.js";
+export * from "./StyledButton.js";
diff --git a/packages/button/stories/button-accent-fill-pending.stories.ts b/packages/button/stories/button-accent-fill-pending.stories.ts
index 1b07e0b4ef..9decbbf1a7 100644
--- a/packages/button/stories/button-accent-fill-pending.stories.ts
+++ b/packages/button/stories/button-accent-fill-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'accent';
-const treatment = 'fill';
+const variant = "accent";
+const treatment = "fill";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Accent/Fill/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Accent/Fill/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-accent-fill-sizes.stories.ts b/packages/button/stories/button-accent-fill-sizes.stories.ts
index a8a919b892..fba064f227 100644
--- a/packages/button/stories/button-accent-fill-sizes.stories.ts
+++ b/packages/button/stories/button-accent-fill-sizes.stories.ts
@@ -9,40 +9,40 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'accent';
-const treatment = 'fill';
+const variant = "accent";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Accent/Fill/Sizes',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Accent/Fill/Sizes",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-accent-fill.stories.ts b/packages/button/stories/button-accent-fill.stories.ts
index b66e39de40..74a338a697 100644
--- a/packages/button/stories/button-accent-fill.stories.ts
+++ b/packages/button/stories/button-accent-fill.stories.ts
@@ -9,52 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'accent';
-const treatment = 'fill';
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "accent";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Accent/Fill',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Accent/Fill",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-accent-outline-pending.stories.ts b/packages/button/stories/button-accent-outline-pending.stories.ts
index e4f8f15509..428ffc2744 100644
--- a/packages/button/stories/button-accent-outline-pending.stories.ts
+++ b/packages/button/stories/button-accent-outline-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'accent';
-const treatment = 'outline';
+const variant = "accent";
+const treatment = "outline";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Accent/Outline/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Accent/Outline/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-accent-outline-sizes.stories.ts b/packages/button/stories/button-accent-outline-sizes.stories.ts
index 217c1b1478..24d11bae05 100644
--- a/packages/button/stories/button-accent-outline-sizes.stories.ts
+++ b/packages/button/stories/button-accent-outline-sizes.stories.ts
@@ -9,40 +9,40 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'accent';
-const treatment = 'outline';
+const variant = "accent";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Accent/Outline/Sizes',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Accent/Outline/Sizes",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-accent-outline.stories.ts b/packages/button/stories/button-accent-outline.stories.ts
index afd425e6da..332820b516 100644
--- a/packages/button/stories/button-accent-outline.stories.ts
+++ b/packages/button/stories/button-accent-outline.stories.ts
@@ -9,52 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'accent';
-const treatment = 'outline';
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "accent";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Accent/Outline',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Accent/Outline",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-black-fill-pending.stories.ts b/packages/button/stories/button-black-fill-pending.stories.ts
index f6909fa3ff..59ba64e30c 100644
--- a/packages/button/stories/button-black-fill-pending.stories.ts
+++ b/packages/button/stories/button-black-fill-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'black';
-const treatment = 'fill';
+const variant = "black";
+const treatment = "fill";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Black/Fill/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Black/Fill/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-black-fill-sizes.stories.ts b/packages/button/stories/button-black-fill-sizes.stories.ts
index 8b2c39a110..0c80874973 100644
--- a/packages/button/stories/button-black-fill-sizes.stories.ts
+++ b/packages/button/stories/button-black-fill-sizes.stories.ts
@@ -9,41 +9,41 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground, Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { makeOverBackground, Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'black';
-const treatment = 'fill';
+const variant = "black";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Black/Fill/Sizes',
-    decorators: [makeOverBackground(variant)],
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Black/Fill/Sizes",
+  decorators: [makeOverBackground(variant)],
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-black-fill.stories.ts b/packages/button/stories/button-black-fill.stories.ts
index f56aee7708..6e654c36a9 100644
--- a/packages/button/stories/button-black-fill.stories.ts
+++ b/packages/button/stories/button-black-fill.stories.ts
@@ -9,54 +9,54 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    makeOverBackground,
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'black';
-const treatment = 'fill';
+  makeOverBackground,
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "black";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Black/Fill',
-    decorators: [makeOverBackground(variant)],
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Black/Fill",
+  decorators: [makeOverBackground(variant)],
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-black-outline-pending.stories.ts b/packages/button/stories/button-black-outline-pending.stories.ts
index 389188f2cf..5a3a83224c 100644
--- a/packages/button/stories/button-black-outline-pending.stories.ts
+++ b/packages/button/stories/button-black-outline-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'black';
-const treatment = 'outline';
+const variant = "black";
+const treatment = "outline";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Black/Outline/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Black/Outline/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-black-outline-sizes.stories.ts b/packages/button/stories/button-black-outline-sizes.stories.ts
index 5d02c70bcc..e9ae7bd7c8 100644
--- a/packages/button/stories/button-black-outline-sizes.stories.ts
+++ b/packages/button/stories/button-black-outline-sizes.stories.ts
@@ -9,41 +9,41 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground, Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { makeOverBackground, Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'black';
-const treatment = 'outline';
+const variant = "black";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Black/Outline/Sizes',
-    decorators: [makeOverBackground(variant)],
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Black/Outline/Sizes",
+  decorators: [makeOverBackground(variant)],
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-black-outline.stories.ts b/packages/button/stories/button-black-outline.stories.ts
index 9cef7e00fa..89825cec85 100644
--- a/packages/button/stories/button-black-outline.stories.ts
+++ b/packages/button/stories/button-black-outline.stories.ts
@@ -9,54 +9,54 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    makeOverBackground,
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'black';
-const treatment = 'outline';
+  makeOverBackground,
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "black";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Black/Outline',
-    decorators: [makeOverBackground(variant)],
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Black/Outline",
+  decorators: [makeOverBackground(variant)],
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-negative-fill-pending.stories.ts b/packages/button/stories/button-negative-fill-pending.stories.ts
index e30c6334c6..714aa95d3b 100644
--- a/packages/button/stories/button-negative-fill-pending.stories.ts
+++ b/packages/button/stories/button-negative-fill-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'negative';
-const treatment = 'fill';
+const variant = "negative";
+const treatment = "fill";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Negative/Fill/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Negative/Fill/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-negative-fill-sizes.stories.ts b/packages/button/stories/button-negative-fill-sizes.stories.ts
index a68b7e76d5..ef6978bf1d 100644
--- a/packages/button/stories/button-negative-fill-sizes.stories.ts
+++ b/packages/button/stories/button-negative-fill-sizes.stories.ts
@@ -9,40 +9,40 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'negative';
-const treatment = 'fill';
+const variant = "negative";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Negative/Fill/Sizes',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Negative/Fill/Sizes",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-negative-fill.stories.ts b/packages/button/stories/button-negative-fill.stories.ts
index e6d0da54be..5dfc504433 100644
--- a/packages/button/stories/button-negative-fill.stories.ts
+++ b/packages/button/stories/button-negative-fill.stories.ts
@@ -9,52 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'negative';
-const treatment = 'fill';
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "negative";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Negative/Fill',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Negative/Fill",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-negative-outline-pending.stories.ts b/packages/button/stories/button-negative-outline-pending.stories.ts
index b487ccd858..ce7d56b503 100644
--- a/packages/button/stories/button-negative-outline-pending.stories.ts
+++ b/packages/button/stories/button-negative-outline-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'negative';
-const treatment = 'outline';
+const variant = "negative";
+const treatment = "outline";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Negative/Outline/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Negative/Outline/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-negative-outline-sizes.stories.ts b/packages/button/stories/button-negative-outline-sizes.stories.ts
index 4d5b98cc68..e0be91c791 100644
--- a/packages/button/stories/button-negative-outline-sizes.stories.ts
+++ b/packages/button/stories/button-negative-outline-sizes.stories.ts
@@ -9,40 +9,40 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'negative';
-const treatment = 'outline';
+const variant = "negative";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Negative/Outline/Sizes',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Negative/Outline/Sizes",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-negative-outline.stories.ts b/packages/button/stories/button-negative-outline.stories.ts
index 325cc115dd..8b121416c0 100644
--- a/packages/button/stories/button-negative-outline.stories.ts
+++ b/packages/button/stories/button-negative-outline.stories.ts
@@ -9,52 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'negative';
-const treatment = 'outline';
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "negative";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Negative/Outline',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Negative/Outline",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-primary-fill-pending.stories.ts b/packages/button/stories/button-primary-fill-pending.stories.ts
index 63a0f8400a..6af32d57dd 100644
--- a/packages/button/stories/button-primary-fill-pending.stories.ts
+++ b/packages/button/stories/button-primary-fill-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'primary';
-const treatment = 'fill';
+const variant = "primary";
+const treatment = "fill";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Primary/Fill/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Primary/Fill/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-primary-fill-sizes.stories.ts b/packages/button/stories/button-primary-fill-sizes.stories.ts
index 8e9a004cb3..c702804914 100644
--- a/packages/button/stories/button-primary-fill-sizes.stories.ts
+++ b/packages/button/stories/button-primary-fill-sizes.stories.ts
@@ -9,40 +9,40 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'primary';
-const treatment = 'fill';
+const variant = "primary";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Primary/Fill/Sizes',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Primary/Fill/Sizes",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-primary-fill.stories.ts b/packages/button/stories/button-primary-fill.stories.ts
index 8f75564254..385181ae7d 100644
--- a/packages/button/stories/button-primary-fill.stories.ts
+++ b/packages/button/stories/button-primary-fill.stories.ts
@@ -9,68 +9,68 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 import {
-    renderButton,
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
+  renderButton,
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'primary';
-const treatment = 'fill';
+const variant = "primary";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Primary/Fill',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Primary/Fill",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const noWrapButton = (props: Properties): TemplateResult =>
-    renderButton({ noWrap, content, ...props });
+  renderButton({ noWrap, content, ...props });
 
 const noWrap = true;
 const content = html`
-    Really long content that should not wrap, if it does wrap then we have a
-    problem. Do we have a problem? I hope we don't have a problem. Is this long
-    enough to show we do not have a problem? Awesome, we do not have a problem.
-    Really long content that should not wrap, if it does wrap then we have a
-    problem. Do we have a problem? I hope we don't have a problem. Is this long
-    enough to show we do not have a problem? Awesome, we do not have a problem.
+  Really long content that should not wrap, if it does wrap then we have a
+  problem. Do we have a problem? I hope we don't have a problem. Is this long
+  enough to show we do not have a problem? Awesome, we do not have a problem.
+  Really long content that should not wrap, if it does wrap then we have a
+  problem. Do we have a problem? I hope we don't have a problem. Is this long
+  enough to show we do not have a problem? Awesome, we do not have a problem.
 `;
 
-noWrapButton.storyName = 'no-wrap';
+noWrapButton.storyName = "no-wrap";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-primary-outline-pending.stories.ts b/packages/button/stories/button-primary-outline-pending.stories.ts
index c26510d8be..efbf3e6013 100644
--- a/packages/button/stories/button-primary-outline-pending.stories.ts
+++ b/packages/button/stories/button-primary-outline-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'primary';
-const treatment = 'outline';
+const variant = "primary";
+const treatment = "outline";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Primary/Outline/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Primary/Outline/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-primary-outline-sizes.stories.ts b/packages/button/stories/button-primary-outline-sizes.stories.ts
index 0c5d8fc541..ad38618937 100644
--- a/packages/button/stories/button-primary-outline-sizes.stories.ts
+++ b/packages/button/stories/button-primary-outline-sizes.stories.ts
@@ -9,40 +9,40 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'primary';
-const treatment = 'outline';
+const variant = "primary";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Primary/Outline/Sizes',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Primary/Outline/Sizes",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-primary-outline.stories.ts b/packages/button/stories/button-primary-outline.stories.ts
index dd23854ce9..a681688a66 100644
--- a/packages/button/stories/button-primary-outline.stories.ts
+++ b/packages/button/stories/button-primary-outline.stories.ts
@@ -9,52 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'primary';
-const treatment = 'outline';
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "primary";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Primary/Outline',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Primary/Outline",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-secondary-fill-pending.stories.ts b/packages/button/stories/button-secondary-fill-pending.stories.ts
index eafefb9d43..f6c08dcf3f 100644
--- a/packages/button/stories/button-secondary-fill-pending.stories.ts
+++ b/packages/button/stories/button-secondary-fill-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'secondary';
-const treatment = 'fill';
+const variant = "secondary";
+const treatment = "fill";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Secondary/Fill/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Secondary/Fill/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-secondary-fill-sizes.stories.ts b/packages/button/stories/button-secondary-fill-sizes.stories.ts
index 06f9424933..d8ea28b541 100644
--- a/packages/button/stories/button-secondary-fill-sizes.stories.ts
+++ b/packages/button/stories/button-secondary-fill-sizes.stories.ts
@@ -9,40 +9,40 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'secondary';
-const treatment = 'fill';
+const variant = "secondary";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Secondary/Fill/Sizes',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Secondary/Fill/Sizes",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-secondary-fill.stories.ts b/packages/button/stories/button-secondary-fill.stories.ts
index 7a29477017..0c2b2ce617 100644
--- a/packages/button/stories/button-secondary-fill.stories.ts
+++ b/packages/button/stories/button-secondary-fill.stories.ts
@@ -9,52 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'secondary';
-const treatment = 'fill';
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "secondary";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Secondary/Fill',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Secondary/Fill",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-secondary-outline-pending.stories.ts b/packages/button/stories/button-secondary-outline-pending.stories.ts
index 5fb92e5acb..0629c7ef3b 100644
--- a/packages/button/stories/button-secondary-outline-pending.stories.ts
+++ b/packages/button/stories/button-secondary-outline-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'secondary';
-const treatment = 'outline';
+const variant = "secondary";
+const treatment = "outline";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Secondary/Outline/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Secondary/Outline/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-secondary-outline-sizes.stories.ts b/packages/button/stories/button-secondary-outline-sizes.stories.ts
index d640b888bc..2d1dc9b9d7 100644
--- a/packages/button/stories/button-secondary-outline-sizes.stories.ts
+++ b/packages/button/stories/button-secondary-outline-sizes.stories.ts
@@ -9,40 +9,40 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'secondary';
-const treatment = 'outline';
+const variant = "secondary";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Secondary/Outline/Sizes',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Secondary/Outline/Sizes",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-secondary-outline.stories.ts b/packages/button/stories/button-secondary-outline.stories.ts
index 2293dcca8e..25988844a6 100644
--- a/packages/button/stories/button-secondary-outline.stories.ts
+++ b/packages/button/stories/button-secondary-outline.stories.ts
@@ -9,52 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'secondary';
-const treatment = 'outline';
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "secondary";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/Secondary/Outline',
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/Secondary/Outline",
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-white-fill-pending.stories.ts b/packages/button/stories/button-white-fill-pending.stories.ts
index 75ec88bd21..511b4fc4f7 100644
--- a/packages/button/stories/button-white-fill-pending.stories.ts
+++ b/packages/button/stories/button-white-fill-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'white';
-const treatment = 'fill';
+const variant = "white";
+const treatment = "fill";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/White/Fill/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/White/Fill/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-white-fill-sizes.stories.ts b/packages/button/stories/button-white-fill-sizes.stories.ts
index 41d50d057c..18f1fdc607 100644
--- a/packages/button/stories/button-white-fill-sizes.stories.ts
+++ b/packages/button/stories/button-white-fill-sizes.stories.ts
@@ -9,41 +9,41 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground, Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { makeOverBackground, Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'white';
-const treatment = 'fill';
+const variant = "white";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/White/Fill/Sizes',
-    decorators: [makeOverBackground()],
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/White/Fill/Sizes",
+  decorators: [makeOverBackground()],
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-white-fill.stories.ts b/packages/button/stories/button-white-fill.stories.ts
index 22406c2814..903bdd6090 100644
--- a/packages/button/stories/button-white-fill.stories.ts
+++ b/packages/button/stories/button-white-fill.stories.ts
@@ -9,54 +9,54 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    makeOverBackground,
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'white';
-const treatment = 'fill';
+  makeOverBackground,
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "white";
+const treatment = "fill";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/White/Fill',
-    decorators: [makeOverBackground()],
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/White/Fill",
+  decorators: [makeOverBackground()],
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/button-white-outline-pending.stories.ts b/packages/button/stories/button-white-outline-pending.stories.ts
index 9cfa56c6e3..fa1ddb1593 100644
--- a/packages/button/stories/button-white-outline-pending.stories.ts
+++ b/packages/button/stories/button-white-outline-pending.stories.ts
@@ -9,42 +9,42 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'white';
-const treatment = 'outline';
+const variant = "white";
+const treatment = "outline";
 const pending = true;
 
 export default {
-    component: 'sp-button',
-    title: 'Button/White/Outline/Pending',
-    args: {
-        ...args,
-        variant,
-        treatment,
-        pending,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/White/Outline/Pending",
+  args: {
+    ...args,
+    variant,
+    treatment,
+    pending,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-white-outline-sizes.stories.ts b/packages/button/stories/button-white-outline-sizes.stories.ts
index 6c5bf1d352..6d8374c6df 100644
--- a/packages/button/stories/button-white-outline-sizes.stories.ts
+++ b/packages/button/stories/button-white-outline-sizes.stories.ts
@@ -9,41 +9,41 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground, Properties, renderButtonSet } from './index.js';
-import { args, argTypes } from './index.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { makeOverBackground, Properties, renderButtonSet } from "./index.js";
+import { args, argTypes } from "./index.js";
 
-const variant = 'white';
-const treatment = 'outline';
+const variant = "white";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/White/Outline/Sizes',
-    decorators: [makeOverBackground()],
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/White/Outline/Sizes",
+  decorators: [makeOverBackground()],
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const s = (args: Properties): TemplateResult => renderButtonSet(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: Properties): TemplateResult => renderButtonSet(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: Properties): TemplateResult => renderButtonSet(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: Properties): TemplateResult => renderButtonSet(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/button/stories/button-white-outline.stories.ts b/packages/button/stories/button-white-outline.stories.ts
index 6f2c119415..600d6d413f 100644
--- a/packages/button/stories/button-white-outline.stories.ts
+++ b/packages/button/stories/button-white-outline.stories.ts
@@ -9,54 +9,54 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 import {
-    makeOverBackground,
-    renderButtonSet,
-    renderLink,
-    renderLinkWithTarget,
-    renderMinWidthButton,
-    renderWithIcon,
-    renderWithIconOnly,
-} from './index.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import type { Properties } from './index.js';
-import { args, argTypes } from './index.js';
-
-const variant = 'white';
-const treatment = 'outline';
+  makeOverBackground,
+  renderButtonSet,
+  renderLink,
+  renderLinkWithTarget,
+  renderMinWidthButton,
+  renderWithIcon,
+  renderWithIconOnly,
+} from "./index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import type { Properties } from "./index.js";
+import { args, argTypes } from "./index.js";
+
+const variant = "white";
+const treatment = "outline";
 
 export default {
-    component: 'sp-button',
-    title: 'Button/White/Outline',
-    decorators: [makeOverBackground()],
-    args: {
-        ...args,
-        variant,
-        treatment,
-    },
-    argTypes,
+  component: "sp-button",
+  title: "Button/White/Outline",
+  decorators: [makeOverBackground()],
+  args: {
+    ...args,
+    variant,
+    treatment,
+  },
+  argTypes,
 };
 
 export const Default = (props: Properties): TemplateResult =>
-    renderButtonSet(props);
+  renderButtonSet(props);
 
 export const withIcon = (props: Properties): TemplateResult =>
-    renderWithIcon(props);
+  renderWithIcon(props);
 
 export const withIconOnly = (props: Properties): TemplateResult =>
-    renderWithIconOnly(props);
+  renderWithIconOnly(props);
 
 export const minWidthButton = (props: Properties): TemplateResult =>
-    renderMinWidthButton(props);
+  renderMinWidthButton(props);
 
-minWidthButton.storyName = 'min-width';
+minWidthButton.storyName = "min-width";
 
 export const link = (props: Properties): TemplateResult => renderLink(props);
 
-link.storyName = 'href';
+link.storyName = "href";
 
 export const linkWithTarget = (props: Properties): TemplateResult =>
-    renderLinkWithTarget(props);
+  renderLinkWithTarget(props);
 
 linkWithTarget.storyName = 'href with target="_blank"';
diff --git a/packages/button/stories/index.ts b/packages/button/stories/index.ts
index e70ab7fa76..22b922280f 100644
--- a/packages/button/stories/index.ts
+++ b/packages/button/stories/index.ts
@@ -9,227 +9,217 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
 
-import type { Properties } from './template.js';
+import type { Properties } from "./template.js";
 export type { Properties };
 
 export const args = {
-    disabled: false,
-    variant: 'cta',
-    pending: false,
+  disabled: false,
+  variant: "cta",
+  pending: false,
 };
 
 export const argTypes = {
-    disabled: {
-        name: 'disabled',
-        type: { name: 'boolean', required: false },
-        description:
-            'Disable this control. It will not receive focus or events.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+  disabled: {
+    name: "disabled",
+    type: { name: "boolean", required: false },
+    description: "Disable this control. It will not receive focus or events.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
     },
-    variant: {
-        name: 'variant',
-        type: { name: 'string', required: false },
-        description: 'The visual variant to apply to the button.',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'cta' },
-        },
-        control: {
-            type: 'inline-radio',
-            options: [
-                'cta',
-                'accent',
-                'primary',
-                'secondary',
-                'negative',
-                'overBackground',
-                'black',
-                'white',
-            ],
-        },
+    control: {
+      type: "boolean",
     },
-    treatment: {
-        name: 'treatment',
-        type: { name: 'string', required: false },
-        description: 'The visual treatment to apply to the button.',
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: 'fill' },
-        },
-        control: {
-            type: 'inline-radio',
-            options: ['fill', 'outline'],
-        },
+  },
+  variant: {
+    name: "variant",
+    type: { name: "string", required: false },
+    description: "The visual variant to apply to the button.",
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "cta" },
     },
-    pending: {
-        name: 'pending',
-        type: { name: 'boolean', required: false },
-        description: 'Shows the pending state of the button.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+    control: {
+      type: "inline-radio",
+      options: [
+        "cta",
+        "accent",
+        "primary",
+        "secondary",
+        "negative",
+        "overBackground",
+        "black",
+        "white",
+      ],
     },
+  },
+  treatment: {
+    name: "treatment",
+    type: { name: "string", required: false },
+    description: "The visual treatment to apply to the button.",
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "fill" },
+    },
+    control: {
+      type: "inline-radio",
+      options: ["fill", "outline"],
+    },
+  },
+  pending: {
+    name: "pending",
+    type: { name: "boolean", required: false },
+    description: "Shows the pending state of the button.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
+    },
+    control: {
+      type: "boolean",
+    },
+  },
 };
 
 export const makeOverBackground =
-    (variant?: 'white' | 'black') =>
-    (story: () => TemplateResult): TemplateResult => {
-        const color =
-            variant === 'black'
-                ? 'rgb(181, 209, 211)'
-                : 'var(--spectrum-seafoam-900)';
-
-        return html`
-            

+  (story: () => TemplateResult): TemplateResult => {
+    const color =
+      variant === "black"
+        ? "rgb(181, 209, 211)"
+        : "var(--spectrum-seafoam-900)";
+
+    return html`
+      

-                ${story()}
-            

-        `;
-    };
+      >
+        ${story()}
+      

+    `;
+  };
 
 export function renderButton(properties: Properties): TemplateResult {
-    return html`
-        
-            ${properties.content || 'Click Me'}
-        
-    `;
+  return html`
+    
+      ${properties.content || "Click Me"}
+    
+  `;
 }
 
 export function renderButtonSet(properties: Properties): TemplateResult {
-    const disabled = Object.assign({}, properties, { disabled: true });
-    const icon = Object.assign({}, properties, {
-        content: html`
-            
-            Click Me
-        `,
-    });
-
-    return html`
-        ${renderButton(properties)} ${renderButton(disabled)}
-        ${renderButton(icon)}
-    `;
+  const disabled = Object.assign({}, properties, { disabled: true });
+  const icon = Object.assign({}, properties, {
+    content: html`
+      
+      Click Me
+    `,
+  });
+
+  return html`
+    ${renderButton(properties)} ${renderButton(disabled)} ${renderButton(icon)}
+  `;
 }
 
 export function renderIconButtonSet(properties: Properties): TemplateResult {
-    const disabled = Object.assign({}, properties, {
-        iconOnly: true,
-        disabled: true,
-    });
-    const iconOnly = Object.assign({}, properties, {
-        iconOnly: true,
-        content: html`
-            
-        `,
-    });
-
-    return html`
-        ${renderButton(iconOnly)} ${renderButton(disabled)}
-    `;
+  const disabled = Object.assign({}, properties, {
+    iconOnly: true,
+    disabled: true,
+  });
+  const iconOnly = Object.assign({}, properties, {
+    iconOnly: true,
+    content: html`  `,
+  });
+
+  return html` ${renderButton(iconOnly)} ${renderButton(disabled)} `;
 }
 
 export const bellIcon = html`
-    
+  
 `;
 
 export const renderWithIcon = (props: Properties): TemplateResult => {
-    return html`
-        
-        

-            ${renderButtonSet({
-                ...props,
-                content: html`
-                    
-                    Help
-                `,
-            })}
-        

-        

-            ${renderButtonSet({
-                ...props,
-                content: html`
-                    ${bellIcon} Custom SVG
-                `,
-            })}
-        

-    `;
+  return html`
+    
+    

+      ${renderButtonSet({
+        ...props,
+        content: html`
+          
+          Help
+        `,
+      })}
+    

+    

+      ${renderButtonSet({
+        ...props,
+        content: html` ${bellIcon} Custom SVG `,
+      })}
+    

+  `;
 };
 
 export const renderWithIconOnly = (props: Properties): TemplateResult => {
-    return html`
-        ${renderIconButtonSet({
-            ...props,
-            content: html`
-                
-            `,
-        })}
-    `;
+  return html`
+    ${renderIconButtonSet({
+      ...props,
+      content: html`  `,
+    })}
+  `;
 };
 
 export const renderMinWidthButton = (props: Properties): TemplateResult => {
-    return html`
-        
-        ${renderButtonSet(props)}
-    `;
+  return html`
+    
+    ${renderButtonSet(props)}
+  `;
 };
 
-const href = 'https://github.com/adobe/spectrum-web-components';
+const href = "https://github.com/adobe/spectrum-web-components";
 
 export const renderLink = (props: Properties): TemplateResult =>
-    renderButtonSet({
-        ...props,
-        href,
-    });
+  renderButtonSet({
+    ...props,
+    href,
+  });
 
 export const renderLinkWithTarget = (props: Properties): TemplateResult =>
-    renderButtonSet({
-        ...props,
-        href,
-        target: '_blank',
-    });
+  renderButtonSet({
+    ...props,
+    href,
+    target: "_blank",
+  });
diff --git a/packages/button/stories/template.ts b/packages/button/stories/template.ts
index fbbf139a1e..dbbf7aa90a 100644
--- a/packages/button/stories/template.ts
+++ b/packages/button/stories/template.ts
@@ -10,41 +10,41 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 import {
-    ButtonTreatments,
-    ButtonVariants,
-} from '@spectrum-web-components/button/src/Button.js';
+  ButtonTreatments,
+  ButtonVariants,
+} from "@spectrum-web-components/button/src/Button.js";
 
 export interface Properties {
-    variant?: ButtonVariants;
-    treatment?: ButtonTreatments;
-    quiet?: boolean;
-    pending?: boolean;
-    content?: TemplateResult;
-    disabled?: boolean;
-    size?: 's' | 'm' | 'l' | 'xl';
-    href?: string;
-    target?: '_blank' | '_parent' | '_self' | '_top';
-    noWrap?: boolean;
-    iconOnly?: boolean;
+  variant?: ButtonVariants;
+  treatment?: ButtonTreatments;
+  quiet?: boolean;
+  pending?: boolean;
+  content?: TemplateResult;
+  disabled?: boolean;
+  size?: "s" | "m" | "l" | "xl";
+  href?: string;
+  target?: "_blank" | "_parent" | "_self" | "_top";
+  noWrap?: boolean;
+  iconOnly?: boolean;
 }
 
 export const Template = ({
-    disabled,
-    pending,
-    size,
-    treatment,
-    variant,
+  disabled,
+  pending,
+  size,
+  treatment,
+  variant,
 }: Properties): TemplateResult => html`
-    
-        Test Button
-    
+  
+    Test Button
+  
 `;
diff --git a/packages/button/test/benchmark/test-basic.ts b/packages/button/test/benchmark/test-basic.ts
index 42c44d8df6..7a215bddcd 100644
--- a/packages/button/test/benchmark/test-basic.ts
+++ b/packages/button/test/benchmark/test-basic.ts
@@ -10,16 +10,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-help.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    Click Me
-    Click Me
-    
-        
-        Click Me
-    
+  Click Me
+  Click Me
+  
+    
+    Click Me
+  
 `);
diff --git a/packages/button/test/button-memory.test.ts b/packages/button/test/button-memory.test.ts
index 8f58098126..c7c6e866f6 100644
--- a/packages/button/test/button-memory.test.ts
+++ b/packages/button/test/button-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Default } from '../stories/button-accent-fill.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/button-accent-fill.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(Default({}));
diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts
index 1ef9ce8d21..3dbab6da24 100644
--- a/packages/button/test/button.test.ts
+++ b/packages/button/test/button.test.ts
@@ -10,821 +10,784 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/button/sp-button.js';
-import { Button } from '@spectrum-web-components/button';
+import "@spectrum-web-components/button/sp-button.js";
+import { Button } from "@spectrum-web-components/button";
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    nextFrame,
-    waitUntil,
-} from '@open-wc/testing';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  waitUntil,
+} from "@open-wc/testing";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 import {
-    a11ySnapshot,
-    findAccessibilityNode,
-    sendKeys,
-} from '@web/test-runner-commands';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { spy, stub } from 'sinon';
+  a11ySnapshot,
+  findAccessibilityNode,
+  sendKeys,
+} from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { spy, stub } from "sinon";
 
 type TestableButtonType = {
-    hasLabel: boolean;
+  hasLabel: boolean;
 };
 
-describe('Button', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture
-        

-    
+   {
+      if ((event.target as HTMLElement).localName === "button") {
+        (event.target as HTMLElement).dispatchEvent(
+          new Event("close", { bubbles: true, composed: true }),
+        );
+      }
+    }}
+  >
+    

+      
+      
Custom headline

+      

+        The click events for the "Done" button are bound to the story not to the
+        components in specific.
+      

+      

+        This is a demonstration of what is possible with <sp-dialog-base>,
+        only, and should not be seen as an endorsement for fully custom dialog
+        UIs.
+      

+      
Fully open content area, for whatever DOM you would like.

+      
+    

+  
 `;
 fullyCustom.decorators = [withOverlayDecorator];
 
 export const lazyLoaded = (): TemplateResult => {
-    const template = (): TemplateResult => html`
-         {
-                if ((event.target as HTMLElement).localName === 'sp-button') {
-                    (event.target as HTMLElement).dispatchEvent(
-                        new Event('close', { bubbles: true, composed: true })
-                    );
-                }
-            }}
-        >
-            
-                
This is a heading

-                

-                    The click on the "OK" button should close the overlay with
-                    the correct animation (duration).
-                

-                
-                    Ok
-                
-            
-        
-    `;
-
-    return html`
-        
-            Open dialog
+  const template = (): TemplateResult => html`
+     {
+        if ((event.target as HTMLElement).localName === "sp-button") {
+          (event.target as HTMLElement).dispatchEvent(
+            new Event("close", { bubbles: true, composed: true }),
+          );
+        }
+      }}
+    >
+      
+        
This is a heading

+        

+          The click on the "OK" button should close the overlay with the correct
+          animation (duration).
+        

+        
+          Ok
         
-    `;
+      
+    
+  `;
+
+  return html`
+    
+      Open dialog
+    
+  `;
 };
 
 lazyLoaded.swc_vrt = {
-    skip: true,
+  skip: true,
 };
diff --git a/packages/dialog/stories/dialog-wrapper.stories.ts b/packages/dialog/stories/dialog-wrapper.stories.ts
index 909e747935..07d9e775bc 100644
--- a/packages/dialog/stories/dialog-wrapper.stories.ts
+++ b/packages/dialog/stories/dialog-wrapper.stories.ts
@@ -10,686 +10,667 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/help-text/sp-help-text.js';
-import '@spectrum-web-components/textfield/sp-textfield.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-
-import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
-import { landscape } from './images.js';
-import { isOverlayOpen } from '../../overlay/stories/index.js';
-import '../../overlay/stories/index.js';
-import type { DialogWrapper } from '@spectrum-web-components/dialog';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/help-text/sp-help-text.js";
+import "@spectrum-web-components/textfield/sp-textfield.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+
+import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
+import { landscape } from "./images.js";
+import { isOverlayOpen } from "../../overlay/stories/index.js";
+import "../../overlay/stories/index.js";
+import type { DialogWrapper } from "@spectrum-web-components/dialog";
 
 export default {
-    title: 'Dialog Wrapper',
-    component: 'sp-dialog-wrapper',
-    argTypes: {
-        onClose: { action: 'close' },
-        onConfirm: { action: 'confirm' },
-        onSecondary: { action: 'secondary' },
-        onCancel: { action: 'cancel' },
-    },
+  title: "Dialog Wrapper",
+  component: "sp-dialog-wrapper",
+  argTypes: {
+    onClose: { action: "close" },
+    onConfirm: { action: "confirm" },
+    onSecondary: { action: "secondary" },
+    onCancel: { action: "cancel" },
+  },
 };
 
 type StoryArgs = {
-    onClose?: (event: Event) => void;
-    onConfirm?: (event: Event) => void;
-    onSecondary?: (event: Event) => void;
-    onCancel?: (event: Event) => void;
+  onClose?: (event: Event) => void;
+  onConfirm?: (event: Event) => void;
+  onSecondary?: (event: Event) => void;
+  onCancel?: (event: Event) => void;
 };
 
 const handleClose =
-    ({ onClose }: StoryArgs) =>
-    (event: Event) => {
-        if (onClose) onClose(event);
-    };
+  ({ onClose }: StoryArgs) =>
+  (event: Event) => {
+    if (onClose) {
+      onClose(event);
+    }
+  };
 
 const handleConfirm =
-    ({ onConfirm }: StoryArgs) =>
-    (event: Event) => {
-        if (onConfirm) onConfirm(event);
-    };
+  ({ onConfirm }: StoryArgs) =>
+  (event: Event) => {
+    if (onConfirm) {
+      onConfirm(event);
+    }
+  };
 
 const handleSecondary =
-    ({ onSecondary }: StoryArgs) =>
-    (event: Event) => {
-        if (onSecondary) onSecondary(event);
-    };
+  ({ onSecondary }: StoryArgs) =>
+  (event: Event) => {
+    if (onSecondary) {
+      onSecondary(event);
+    }
+  };
 
 const handleCancel =
-    ({ onCancel }: StoryArgs) =>
-    (event: Event) => {
-        if (onCancel) onCancel(event);
-    };
+  ({ onCancel }: StoryArgs) =>
+  (event: Event) => {
+    if (onCancel) {
+      onCancel(event);
+    }
+  };
 
 export const wrapperLabeledHero = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        
-        
-            Content of the dialog
-        
-        
+      sp-story-decorator {
+        inset: 0;
+        position: absolute;
+        overflow: hidden;
+      }
+    
+    
+      Content of the dialog
+    
+    
-            Toggle Dialog
-        
-    `;
+      variant="primary"
+    >
+      Toggle Dialog
+    
+  `;
 };
 
 export const wrapperDismissable = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        
-            Content of the dialog
-        
-        
+      Content of the dialog
+    
+    
-            Toggle Dialog
-        
-    `;
+      variant="primary"
+    >
+      Toggle Dialog
+    
+  `;
 };
 
 export const wrapperDismissableUnderlay = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        
-            Content of the dialog
-        
-        
+      Content of the dialog
+    
+    
-            Toggle Dialog
-        
-    `;
+      variant="primary"
+    >
+      Toggle Dialog
+    
+  `;
 };
 
 export const form = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? undefined : 'click';
-
-    return html`
-        
-            
-                Toggle Dialog
-            
-             {
-                    target.dispatchEvent(
-                        new Event('close', { bubbles: true, composed: true })
-                    );
-                    handleConfirm(args);
-                }}
-                @secondary=${({ target }: Event & { target: HTMLElement }) => {
-                    target.dispatchEvent(
-                        new Event('close', { bubbles: true, composed: true })
-                    );
-                    handleSecondary(args);
-                }}
-                @cancel=${({ target }: Event & { target: HTMLElement }) => {
-                    target.dispatchEvent(
-                        new Event('close', { bubbles: true, composed: true })
-                    );
-                    handleCancel(args);
-                }}
-            >
-                
-                

-                    
-                        Street:
-                    
-                    
-                    
-                        City:
-                    
-                    
-                    
-                        State:
-                    
-                    
-                    
-                        Zip:
-                    
-                    
-                    
-                        Special instructions:
-                    
-                    
-                        
-                            For example, gate code or other information to help
-                            the driver find you
-                        
-                    
-                

-            
-        
-    `;
+  const open = context.viewMode === "docs" ? undefined : "click";
+
+  return html`
+    
+       Toggle Dialog 
+       {
+          target.dispatchEvent(
+            new Event("close", { bubbles: true, composed: true }),
+          );
+          handleConfirm(args);
+        }}
+        @secondary=${({ target }: Event & { target: HTMLElement }) => {
+          target.dispatchEvent(
+            new Event("close", { bubbles: true, composed: true }),
+          );
+          handleSecondary(args);
+        }}
+        @cancel=${({ target }: Event & { target: HTMLElement }) => {
+          target.dispatchEvent(
+            new Event("close", { bubbles: true, composed: true }),
+          );
+          handleCancel(args);
+        }}
+      >
+        
+        

+          
+            Street:
+          
+          
+           City: 
+          
+          
+            State:
+          
+          
+           Zip: 
+          
+          
+            Special instructions:
+          
+          
+            
+              For example, gate code or other information to help the driver
+              find you
+            
+          
+        

+      
+    
+  `;
 };
 
 form.decorators = [isOverlayOpen];
 
 export const longContent = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? undefined : 'click';
-
-    return html`
-        
-            
-                Toggle Dialog
-            
-            
-                

-                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-                    Sed ac dolor sit amet purus malesuada congue. Donec quis
-                    nibh at felis congue commodo. Ut enim ad minima veniam, quis
-                    nostrum exercitationem ullam corporis suscipit laboriosam,
-                    nisi ut aliquid ex ea commodi consequatur? Sed ac dolor sit
-                    amet purus malesuada congue. Nam libero tempore, cum soluta
-                    nobis est eligendi optio cumque nihil impedit quo minus id
-                    quod maxime placeat facere possimus, omnis voluptas
-                    assumenda est, omnis dolor repellendus. Nullam sit amet
-                    magna in magna gravida vehicula. Itaque earum rerum hic
-                    tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-                    maiores alias consequatur aut perferendis doloribus
-                    asperiores repellat. Neque porro quisquam est, qui dolorem
-                    ipsum quia dolor sit amet, consectetur, adipisci velit, sed
-                    quia non numquam eius modi tempora incidunt ut labore et
-                    dolore magnam aliquam quaerat voluptatem. Phasellus faucibus
-                    molestie nisl. Vestibulum fermentum tortor id mi. Integer
-                    rutrum, orci vestibulum ullamcorper ultricies, lacus quam
-                    ultricies odio, vitae placerat pede sem sit amet enim.
-                    Maecenas sollicitudin. Nullam rhoncus aliquam metus.
-                

-                

-                    Curabitur ligula sapien, pulvinar a vestibulum quis,
-                    facilisis vel sapien. Fusce nibh. Proin pede metus,
-                    vulputate nec, fermentum fringilla, vehicula vitae, justo.
-                    Aenean placerat. Aliquam erat volutpat. Et harum quidem
-                    rerum facilis est et expedita distinctio. Fusce nibh.
-                    Temporibus autem quibusdam et aut officiis debitis aut rerum
-                    necessitatibus saepe eveniet ut et voluptates repudiandae
-                    sint et molestiae non recusandae. Vestibulum erat nulla,
-                    ullamcorper nec, rutrum non, nonummy ac, erat. Etiam posuere
-                    lacus quis dolor. Mauris elementum mauris vitae tortor.
-                    Nulla turpis magna, cursus sit amet, suscipit a, interdum
-                    id, felis. Nam libero tempore, cum soluta nobis est eligendi
-                    optio cumque nihil impedit quo minus id quod maxime placeat
-                    facere possimus, omnis voluptas assumenda est, omnis dolor
-                    repellendus. Nulla accumsan, elit sit amet varius semper,
-                    nulla mauris mollis quam, tempor suscipit diam nulla vel
-                    leo. Pellentesque sapien.
-                

-                

-                    Curabitur vitae diam non enim vestibulum interdum. Sed elit
-                    dui, pellentesque a, faucibus vel, interdum nec, diam.
-                    Praesent vitae arcu tempor neque lacinia pretium. Ut tempus
-                    purus at lorem. Phasellus rhoncus. Temporibus autem
-                    quibusdam et aut officiis debitis aut rerum necessitatibus
-                    saepe eveniet ut et voluptates repudiandae sint et molestiae
-                    non recusandae. Duis ante orci, molestie vitae vehicula
-                    venenatis, tincidunt ac pede. Integer vulputate sem a nibh
-                    rutrum consequat. Aenean placerat. Cum sociis natoque
-                    penatibus et magnis dis parturient montes, nascetur
-                    ridiculus mus. Sed vel lectus. Donec odio tempus molestie,
-                    porttitor ut, iaculis quis, sem. Class aptent taciti
-                    sociosqu ad litora torquent per conubia nostra, per inceptos
-                    hymenaeos. Integer in sapien. Nullam dapibus fermentum
-                    ipsum.
-                

-                

-                    Integer vulputate sem a nibh rutrum consequat. Class aptent
-                    taciti sociosqu ad litora torquent per conubia nostra, per
-                    inceptos hymenaeos. Duis bibendum, lectus ut viverra
-                    rhoncus, dolor nunc faucibus libero, eget facilisis enim
-                    ipsum id lacus. Aliquam erat volutpat. Aenean id metus id
-                    velit ullamcorper pulvinar. Morbi scelerisque luctus velit.
-                    Aliquam erat volutpat. Temporibus autem quibusdam et aut
-                    officiis debitis aut rerum necessitatibus saepe eveniet ut
-                    et voluptates repudiandae sint et molestiae non recusandae.
-                    Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu,
-                    orci. Suspendisse sagittis ultrices augue. Nullam justo
-                    enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
-                    Praesent vitae arcu tempor neque lacinia pretium. Nullam
-                    faucibus mi quis velit. Maecenas aliquet accumsan leo. Morbi
-                    scelerisque luctus velit. Aliquam ornare wisi eu metus.
-                

-                

-                    Sed elit dui, pellentesque a, faucibus vel, interdum nec,
-                    diam. Praesent vitae arcu tempor neque lacinia pretium.
-                    Etiam dictum tincidunt diam. Et harum quidem rerum facilis
-                    est et expedita distinctio. Duis ante orci, molestie vitae
-                    vehicula venenatis, tincidunt ac pede. Integer lacinia.
-                    Excepteur sint occaecat cupidatat non proident, sunt in
-                    culpa qui officia deserunt mollit anim id est laborum.
-                    Mauris tincidunt sem sed arcu. Praesent in mauris eu tortor
-                    porttitor accumsan. Aenean id metus id velit ullamcorper
-                    pulvinar. Donec iaculis gravida nulla. Duis bibendum, lectus
-                    ut viverra rhoncus, dolor nunc faucibus libero, eget
-                    facilisis enim ipsum id lacus. Nulla quis diam. Quisque
-                    porta. Integer rutrum, orci vestibulum ullamcorper
-                    ultricies, lacus quam ultricies odio, vitae placerat pede
-                    sem sit amet enim. Nam sed tellus id magna elementum
-                    tincidunt. In enim a arcu imperdiet malesuada.
-                

-            
-        
-    `;
+  const open = context.viewMode === "docs" ? undefined : "click";
+
+  return html`
+    
+       Toggle Dialog 
+      
+        

+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac dolor
+          sit amet purus malesuada congue. Donec quis nibh at felis congue
+          commodo. Ut enim ad minima veniam, quis nostrum exercitationem ullam
+          corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+          consequatur? Sed ac dolor sit amet purus malesuada congue. Nam libero
+          tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
+          minus id quod maxime placeat facere possimus, omnis voluptas assumenda
+          est, omnis dolor repellendus. Nullam sit amet magna in magna gravida
+          vehicula. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
+          reiciendis voluptatibus maiores alias consequatur aut perferendis
+          doloribus asperiores repellat. Neque porro quisquam est, qui dolorem
+          ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+          numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
+          quaerat voluptatem. Phasellus faucibus molestie nisl. Vestibulum
+          fermentum tortor id mi. Integer rutrum, orci vestibulum ullamcorper
+          ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet
+          enim. Maecenas sollicitudin. Nullam rhoncus aliquam metus.
+        

+        

+          Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel
+          sapien. Fusce nibh. Proin pede metus, vulputate nec, fermentum
+          fringilla, vehicula vitae, justo. Aenean placerat. Aliquam erat
+          volutpat. Et harum quidem rerum facilis est et expedita distinctio.
+          Fusce nibh. Temporibus autem quibusdam et aut officiis debitis aut
+          rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint
+          et molestiae non recusandae. Vestibulum erat nulla, ullamcorper nec,
+          rutrum non, nonummy ac, erat. Etiam posuere lacus quis dolor. Mauris
+          elementum mauris vitae tortor. Nulla turpis magna, cursus sit amet,
+          suscipit a, interdum id, felis. Nam libero tempore, cum soluta nobis
+          est eligendi optio cumque nihil impedit quo minus id quod maxime
+          placeat facere possimus, omnis voluptas assumenda est, omnis dolor
+          repellendus. Nulla accumsan, elit sit amet varius semper, nulla mauris
+          mollis quam, tempor suscipit diam nulla vel leo. Pellentesque sapien.
+        

+        

+          Curabitur vitae diam non enim vestibulum interdum. Sed elit dui,
+          pellentesque a, faucibus vel, interdum nec, diam. Praesent vitae arcu
+          tempor neque lacinia pretium. Ut tempus purus at lorem. Phasellus
+          rhoncus. Temporibus autem quibusdam et aut officiis debitis aut rerum
+          necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+          molestiae non recusandae. Duis ante orci, molestie vitae vehicula
+          venenatis, tincidunt ac pede. Integer vulputate sem a nibh rutrum
+          consequat. Aenean placerat. Cum sociis natoque penatibus et magnis dis
+          parturient montes, nascetur ridiculus mus. Sed vel lectus. Donec odio
+          tempus molestie, porttitor ut, iaculis quis, sem. Class aptent taciti
+          sociosqu ad litora torquent per conubia nostra, per inceptos
+          hymenaeos. Integer in sapien. Nullam dapibus fermentum ipsum.
+        

+        

+          Integer vulputate sem a nibh rutrum consequat. Class aptent taciti
+          sociosqu ad litora torquent per conubia nostra, per inceptos
+          hymenaeos. Duis bibendum, lectus ut viverra rhoncus, dolor nunc
+          faucibus libero, eget facilisis enim ipsum id lacus. Aliquam erat
+          volutpat. Aenean id metus id velit ullamcorper pulvinar. Morbi
+          scelerisque luctus velit. Aliquam erat volutpat. Temporibus autem
+          quibusdam et aut officiis debitis aut rerum necessitatibus saepe
+          eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
+          Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci.
+          Suspendisse sagittis ultrices augue. Nullam justo enim, consectetuer
+          nec, ullamcorper ac, vestibulum in, elit. Praesent vitae arcu tempor
+          neque lacinia pretium. Nullam faucibus mi quis velit. Maecenas aliquet
+          accumsan leo. Morbi scelerisque luctus velit. Aliquam ornare wisi eu
+          metus.
+        

+        

+          Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.
+          Praesent vitae arcu tempor neque lacinia pretium. Etiam dictum
+          tincidunt diam. Et harum quidem rerum facilis est et expedita
+          distinctio. Duis ante orci, molestie vitae vehicula venenatis,
+          tincidunt ac pede. Integer lacinia. Excepteur sint occaecat cupidatat
+          non proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum. Mauris tincidunt sem sed arcu. Praesent in mauris eu tortor
+          porttitor accumsan. Aenean id metus id velit ullamcorper pulvinar.
+          Donec iaculis gravida nulla. Duis bibendum, lectus ut viverra rhoncus,
+          dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla
+          quis diam. Quisque porta. Integer rutrum, orci vestibulum ullamcorper
+          ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet
+          enim. Nam sed tellus id magna elementum tincidunt. In enim a arcu
+          imperdiet malesuada.
+        

+      
+    
+  `;
 };
 
 longContent.decorators = [isOverlayOpen];
 
 export const longHeading = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? undefined : 'click';
-
-    return html`
-        
-            
-                Content of the dialog
-            
-            
-                Toggle Dialog
-            
-        
-    `;
+  const open = context.viewMode === "docs" ? undefined : "click";
+
+  return html`
+    
+      
+        Content of the dialog
+      
+       Toggle Dialog 
+    
+  `;
 };
 
 longHeading.decorators = [isOverlayOpen];
 
 export const wrapperDismissableUnderlayError = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        

-            
-                Content of the dialog
-            
-            
+      
+        Content of the dialog
+      
+      
-                Toggle Dialog
-            
-        

-    `;
+        variant="primary"
+      >
+        Toggle Dialog
+      
+    
+  `;
 };
 
 export const wrapperButtons = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        
-            Content of the dialog
-        
-    `;
+  const open = context.viewMode === "docs" ? false : true;
+
+  return html`
+    
+      Content of the dialog
+    
+  `;
 };
 
 export const wrapperButtonsUnderlay = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        
-            Content of the dialog
-        
-    `;
+  const open = context.viewMode === "docs" ? false : true;
+
+  return html`
+    
+      Content of the dialog
+    
+  `;
 };
 
 export const wrapperFullscreen = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        
-            Content of the dialog
-        
-    `;
+  const open = context.viewMode === "docs" ? false : true;
+
+  return html`
+    
+      Content of the dialog
+    
+  `;
 };
 
 export const wrapperWithHeadline = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        
-            Content of the dialog
-        
-    `;
+  const open = context.viewMode === "docs" ? false : true;
+
+  return html`
+    
+      Content of the dialog
+    
+  `;
 };
 
 export const wrapperWithHeadlineNoDivider = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        
-            Content of the dialog
-        
-    `;
+  const open = context.viewMode === "docs" ? false : true;
+
+  return html`
+    
+      Content of the dialog
+    
+  `;
 };
 
 export const wrapperHeadlineVisibilityNone = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? false : true;
-
-    return html`
-        
-            Content of the dialog
-        
-    `;
+  const open = context.viewMode === "docs" ? false : true;
+
+  return html`
+    
+      Content of the dialog
+    
+  `;
 };
 
 export const tooltips = (
-    args: StoryArgs = {},
-    context: { viewMode?: string } = {}
+  args: StoryArgs = {},
+  context: { viewMode?: string } = {},
 ): TemplateResult => {
-    const open = context.viewMode === 'docs' ? undefined : 'click';
-
-    return html`
-        
-            
-                Toggle Dialog
-            
-            
-                ${[1, 2, 3, 4].map(
-                    (index) => html`
-                        
-                            
-                                Button with Tooltip ${index}
-                            
-                            
-                                Tooltip ${index}
-                            
-                        
-                    `
-                )}
-            
-        
-    `;
+  const open = context.viewMode === "docs" ? undefined : "click";
+
+  return html`
+    
+       Toggle Dialog 
+      
+        ${[1, 2, 3, 4].map(
+          (index) => html`
+            
+              
+                Button with Tooltip ${index}
+              
+               Tooltip ${index} 
+            
+          `,
+        )}
+      
+    
+  `;
 };
 
 tooltips.decorators = [isOverlayOpen];
 
 export const lazyHero = ({ src }: { src: string }): TemplateResult => {
-    const handleOpened = (): void => {
-        (document.querySelector('sp-dialog-wrapper') as DialogWrapper).hero =
-            src;
-    };
-
-    return html`
-        
-            Toggle Dialog
-            
-                
Content of the dialog

-                
    
-                    
  1. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    2. 
-                    
  2. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    3. 
-                    
  3. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    4. 
-                    
  4. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    5. 
-                    
  5. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    6. 
-                    
  6. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    7. 
-                    
  7. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    8. 
-                    
  8. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    9. 
-                    
  9. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    10. 
-                    
  10. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    11. 
-                    
  11. 
-                        Select the following checkbox to have the dialog close
-                        when clicking one of its buttons.
-                    
    12. 
-                

-            
-        
-    `;
+  const handleOpened = (): void => {
+    (document.querySelector("sp-dialog-wrapper") as DialogWrapper).hero = src;
+  };
+
+  return html`
+    
+      Toggle Dialog
+      
+        
Content of the dialog

+        
    
+          
  1. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    2. 
+          
  2. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    3. 
+          
  3. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    4. 
+          
  4. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    5. 
+          
  5. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    6. 
+          
  6. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    7. 
+          
  7. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    8. 
+          
  8. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    9. 
+          
  9. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    10. 
+          
  10. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    11. 
+          
  11. 
+            Select the following checkbox to have the dialog close when clicking
+            one of its buttons.
+          
    12. 
+        

+      
+    
+  `;
 };
 
 lazyHero.args = {
-    src: 'https://dummyimage.com/800x400/000/fff',
+  src: "https://dummyimage.com/800x400/000/fff",
 };
 
 lazyHero.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 lazyHero.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
diff --git a/packages/dialog/stories/dialog.stories.ts b/packages/dialog/stories/dialog.stories.ts
index a6932bea58..770e0e559c 100644
--- a/packages/dialog/stories/dialog.stories.ts
+++ b/packages/dialog/stories/dialog.stories.ts
@@ -10,527 +10,495 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import { landscape } from './images.js';
-import '@spectrum-web-components/button/sp-button.js';
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import { landscape } from "./images.js";
+import "@spectrum-web-components/button/sp-button.js";
 
 export default {
-    title: 'Dialog',
-    component: 'sp-dialog',
+  title: "Dialog",
+  component: "sp-dialog",
 };
 
 export const small = (): TemplateResult => {
-    return html`
-        
-            
Disclaimer

-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
-            augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
-            Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
-            ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
-            elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
-            interdum consectetur libero id faucibus nisl. Diam volutpat commodo
-            sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
-            suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
-            neque egestas congue. Rhoncus est pellentesque elit ullamcorper
-            dignissim cras lobortis.
-        
-    `;
+  return html`
+    
+      
Disclaimer

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
+      augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
+      in arcu cursus euismod quis viverra. Posuere ac ut consequat semper
+      viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae
+      et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id
+      faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget
+      est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed.
+      Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque
+      elit ullamcorper dignissim cras lobortis.
+    
+  `;
 };
 
 export const medium = (): TemplateResult => {
-    return html`
-        
-            
Disclaimer

-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
-            augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
-            Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
-            ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
-            elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
-            interdum consectetur libero id faucibus nisl. Diam volutpat commodo
-            sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
-            suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
-            neque egestas congue. Rhoncus est pellentesque elit ullamcorper
-            dignissim cras lobortis.
-        
-    `;
+  return html`
+    
+      
Disclaimer

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
+      augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
+      in arcu cursus euismod quis viverra. Posuere ac ut consequat semper
+      viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae
+      et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id
+      faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget
+      est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed.
+      Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque
+      elit ullamcorper dignissim cras lobortis.
+    
+  `;
 };
 
 export const large = (): TemplateResult => {
-    return html`
-        
-            
Disclaimer

-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
-            augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
-            Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
-            ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
-            elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
-            interdum consectetur libero id faucibus nisl. Diam volutpat commodo
-            sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
-            suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
-            neque egestas congue. Rhoncus est pellentesque elit ullamcorper
-            dignissim cras lobortis.
-        
-    `;
+  return html`
+    
+      
Disclaimer

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
+      augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
+      in arcu cursus euismod quis viverra. Posuere ac ut consequat semper
+      viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae
+      et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id
+      faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget
+      est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed.
+      Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque
+      elit ullamcorper dignissim cras lobortis.
+    
+  `;
 };
 
 export const dismissable = (): TemplateResult => {
-    return html`
-        
-            
Disclaimer

-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
-            augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
-            Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
-            ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
-            elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
-            interdum consectetur libero id faucibus nisl. Diam volutpat commodo
-            sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
-            suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
-            neque egestas congue. Rhoncus est pellentesque elit ullamcorper
-            dignissim cras lobortis.
-        
-    `;
+  return html`
+    
+      
Disclaimer

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
+      augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
+      in arcu cursus euismod quis viverra. Posuere ac ut consequat semper
+      viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae
+      et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id
+      faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget
+      est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed.
+      Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque
+      elit ullamcorper dignissim cras lobortis.
+    
+  `;
 };
 
 export const noDivider = (): TemplateResult => {
-    return html`
-        
-            
Disclaimer

-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
-            augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
-            Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
-            ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
-            elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
-            interdum consectetur libero id faucibus nisl. Diam volutpat commodo
-            sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
-            suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
-            neque egestas congue. Rhoncus est pellentesque elit ullamcorper
-            dignissim cras lobortis.
-        
-    `;
+  return html`
+    
+      
Disclaimer

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
+      augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
+      in arcu cursus euismod quis viverra. Posuere ac ut consequat semper
+      viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae
+      et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id
+      faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget
+      est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed.
+      Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque
+      elit ullamcorper dignissim cras lobortis.
+    
+  `;
 };
 
 export const hero = (): TemplateResult => {
-    return html`
-        
-            

-            
Disclaimer

-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
-            augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
-            Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac
-            ut consequat semper viverra nam libero justo laoreet. Enim ut tellus
-            elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse
-            interdum consectetur libero id faucibus nisl. Diam volutpat commodo
-            sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae
-            suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum
-            neque egestas congue. Rhoncus est pellentesque elit ullamcorper
-            dignissim cras lobortis.
-        
-    `;
+  return html`
+    
+      

+      
Disclaimer

+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
+      augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
+      in arcu cursus euismod quis viverra. Posuere ac ut consequat semper
+      viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae
+      et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id
+      faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget
+      est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed.
+      Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque
+      elit ullamcorper dignissim cras lobortis.
+    
+  `;
 };
 
 export const alertConfirmation = (): TemplateResult => {
-    return html`
-        
-            
Enable Smart Filters?

-            Smart filters are nondestructive and will preserve your original
-            images.
-            
-                Cancel
-            
-            Enable
-        
-    `;
+  return html`
+    
+      
Enable Smart Filters?

+      Smart filters are nondestructive and will preserve your original images.
+      
+        Cancel
+      
+      Enable
+    
+  `;
 };
 
 export const alertInformation = (): TemplateResult => {
-    return html`
-        
-            
Enable Smart Filters?

-            Smart filters are nondestructive and will preserve your original
-            images.
-            
-                Cancel
-            
-            
-                Enable
-            
-        
-    `;
+  return html`
+    
+      
Enable Smart Filters?

+      Smart filters are nondestructive and will preserve your original images.
+      
+        Cancel
+      
+      
+        Enable
+      
+    
+  `;
 };
 
 export const alertDestructive = (): TemplateResult => {
-    return html`
-        
-            
Enable Smart Filters?

-            Smart filters are nondestructive and will preserve your original
-            images.
-            
-                Cancel
-            
-            Enable
-        
-    `;
+  return html`
+    
+      
Enable Smart Filters?

+      Smart filters are nondestructive and will preserve your original images.
+      
+        Cancel
+      
+      Enable
+    
+  `;
 };
 
 export const alertError = (): TemplateResult => {
-    return html`
-        
-            
Enable Smart Filters?

-            Smart filters are nondestructive and will preserve your original
-            images.
-            
-                Cancel
-            
-            
-                Enable
-            
-        
-    `;
+  return html`
+    
+      
Enable Smart Filters?

+      Smart filters are nondestructive and will preserve your original images.
+      
+        Cancel
+      
+      
+        Enable
+      
+    
+  `;
 };
 
 export const alertErrorWithLongTitle = (): TemplateResult => {
-    return html`
-        
-            
Unable to Share Project to Behance Community

-            Smart filters are nondestructive and will preserve your original
-            images.
-            
-                Cancel
-            
-            
-                Enable
-            
-        
-    `;
+  return html`
+    
+      
Unable to Share Project to Behance Community

+      Smart filters are nondestructive and will preserve your original images.
+      
+        Cancel
+      
+      
+        Enable
+      
+    
+  `;
 };
 
 export const fullscreen = (): TemplateResult => {
-    return html`
-        
-            
Enable Smart Filters?

-            

-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-            

-            

-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-                quae ab illo inventore veritatis et quasi architecto beatae
-                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-                voluptas sit aspernatur aut odit aut fugit, sed quia
-                consequuntur magni dolores eos qui ratione voluptatem sequi
-                nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-                sit amet, consectetur, adipisci velit, sed quia non numquam eius
-                modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-                voluptatem. Ut enim ad minima veniam, quis nostrum
-                exercitationem ullam corporis suscipit laboriosam, nisi ut
-                aliquid ex ea commodi consequatur? Quis autem vel eum iure
-                reprehenderit qui in ea voluptate velit esse quam nihil
-                molestiae consequatur, vel illum qui dolorem eum fugiat quo
-                voluptas nulla pariatur?
-            

-            

-                At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                blanditiis praesentium voluptatum deleniti atque corrupti quos
-                dolores et quas molestias excepturi sint occaecati cupiditate
-                non provident, similique sunt in culpa qui officia deserunt
-                mollitia animi, id est laborum et dolorum fuga. Et harum quidem
-                rerum facilis est et expedita distinctio. Nam libero tempore,
-                cum soluta nobis est eligendi optio cumque nihil impedit quo
-                minus id quod maxime placeat facere possimus, omnis voluptas
-                assumenda est, omnis dolor repellendus. Temporibus autem
-                quibusdam et aut officiis debitis aut rerum necessitatibus saepe
-                eveniet ut et voluptates repudiandae sint et molestiae non
-                recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
-                ut aut reiciendis voluptatibus maiores alias consequatur aut
-                perferendis doloribus asperiores repellat.
-            

-            

-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-            

-            

-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-                quae ab illo inventore veritatis et quasi architecto beatae
-                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-                voluptas sit aspernatur aut odit aut fugit, sed quia
-                consequuntur magni dolores eos qui ratione voluptatem sequi
-                nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-                sit amet, consectetur, adipisci velit, sed quia non numquam eius
-                modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-                voluptatem. Ut enim ad minima veniam, quis nostrum
-                exercitationem ullam corporis suscipit laboriosam, nisi ut
-                aliquid ex ea commodi consequatur? Quis autem vel eum iure
-                reprehenderit qui in ea voluptate velit esse quam nihil
-                molestiae consequatur, vel illum qui dolorem eum fugiat quo
-                voluptas nulla pariatur?
-            

-            

-                At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                blanditiis praesentium voluptatum deleniti atque corrupti quos
-                dolores et quas molestias excepturi sint occaecati cupiditate
-                non provident, similique sunt in culpa qui officia deserunt
-                mollitia animi, id est laborum et dolorum fuga. Et harum quidem
-                rerum facilis est et expedita distinctio. Nam libero tempore,
-                cum soluta nobis est eligendi optio cumque nihil impedit quo
-                minus id quod maxime placeat facere possimus, omnis voluptas
-                assumenda est, omnis dolor repellendus. Temporibus autem
-                quibusdam et aut officiis debitis aut rerum necessitatibus saepe
-                eveniet ut et voluptates repudiandae sint et molestiae non
-                recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
-                ut aut reiciendis voluptatibus maiores alias consequatur aut
-                perferendis doloribus asperiores repellat.
-            

-            

-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-            

-            

-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-                quae ab illo inventore veritatis et quasi architecto beatae
-                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-                voluptas sit aspernatur aut odit aut fugit, sed quia
-                consequuntur magni dolores eos qui ratione voluptatem sequi
-                nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-                sit amet, consectetur, adipisci velit, sed quia non numquam eius
-                modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-                voluptatem. Ut enim ad minima veniam, quis nostrum
-                exercitationem ullam corporis suscipit laboriosam, nisi ut
-                aliquid ex ea commodi consequatur? Quis autem vel eum iure
-                reprehenderit qui in ea voluptate velit esse quam nihil
-                molestiae consequatur, vel illum qui dolorem eum fugiat quo
-                voluptas nulla pariatur?
-            

-            

-                At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                blanditiis praesentium voluptatum deleniti atque corrupti quos
-                dolores et quas molestias excepturi sint occaecati cupiditate
-                non provident, similique sunt in culpa qui officia deserunt
-                mollitia animi, id est laborum et dolorum fuga. Et harum quidem
-                rerum facilis est et expedita distinctio. Nam libero tempore,
-                cum soluta nobis est eligendi optio cumque nihil impedit quo
-                minus id quod maxime placeat facere possimus, omnis voluptas
-                assumenda est, omnis dolor repellendus. Temporibus autem
-                quibusdam et aut officiis debitis aut rerum necessitatibus saepe
-                eveniet ut et voluptates repudiandae sint et molestiae non
-                recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
-                ut aut reiciendis voluptatibus maiores alias consequatur aut
-                perferendis doloribus asperiores repellat.
-            

-            

-                Anything in the footer is sticky and aligned right.
-            

-            
-                Cancel
-            
-            Enable
-        
-    `;
+  return html`
+    
+      
Enable Smart Filters?

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      

+      

+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
+        illo inventore veritatis et quasi architecto beatae vitae dicta sunt
+        explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
+        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
+        quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
+        corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
+        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+        voluptas nulla pariatur?
+      

+      

+        At vero eos et accusamus et iusto odio dignissimos ducimus qui
+        blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+        et quas molestias excepturi sint occaecati cupiditate non provident,
+        similique sunt in culpa qui officia deserunt mollitia animi, id est
+        laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
+        distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
+        cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+        omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
+        quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet
+        ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
+        earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+        voluptatibus maiores alias consequatur aut perferendis doloribus
+        asperiores repellat.
+      

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      

+      

+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
+        illo inventore veritatis et quasi architecto beatae vitae dicta sunt
+        explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
+        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
+        quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
+        corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
+        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+        voluptas nulla pariatur?
+      

+      

+        At vero eos et accusamus et iusto odio dignissimos ducimus qui
+        blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+        et quas molestias excepturi sint occaecati cupiditate non provident,
+        similique sunt in culpa qui officia deserunt mollitia animi, id est
+        laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
+        distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
+        cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+        omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
+        quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet
+        ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
+        earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+        voluptatibus maiores alias consequatur aut perferendis doloribus
+        asperiores repellat.
+      

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      

+      

+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
+        illo inventore veritatis et quasi architecto beatae vitae dicta sunt
+        explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
+        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
+        quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
+        corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
+        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+        voluptas nulla pariatur?
+      

+      

+        At vero eos et accusamus et iusto odio dignissimos ducimus qui
+        blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+        et quas molestias excepturi sint occaecati cupiditate non provident,
+        similique sunt in culpa qui officia deserunt mollitia animi, id est
+        laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
+        distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
+        cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+        omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
+        quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet
+        ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
+        earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+        voluptatibus maiores alias consequatur aut perferendis doloribus
+        asperiores repellat.
+      

+      

+        Anything in the footer is sticky and aligned right.
+      

+      
+        Cancel
+      
+      Enable
+    
+  `;
 };
 
 export const fullscreenTakeover = (): TemplateResult => {
-    return html`
-        
-            
Enable Smart Filters?

-            

-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-            

-            

-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-                quae ab illo inventore veritatis et quasi architecto beatae
-                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-                voluptas sit aspernatur aut odit aut fugit, sed quia
-                consequuntur magni dolores eos qui ratione voluptatem sequi
-                nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-                sit amet, consectetur, adipisci velit, sed quia non numquam eius
-                modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-                voluptatem. Ut enim ad minima veniam, quis nostrum
-                exercitationem ullam corporis suscipit laboriosam, nisi ut
-                aliquid ex ea commodi consequatur? Quis autem vel eum iure
-                reprehenderit qui in ea voluptate velit esse quam nihil
-                molestiae consequatur, vel illum qui dolorem eum fugiat quo
-                voluptas nulla pariatur?
-            

-            

-                At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                blanditiis praesentium voluptatum deleniti atque corrupti quos
-                dolores et quas molestias excepturi sint occaecati cupiditate
-                non provident, similique sunt in culpa qui officia deserunt
-                mollitia animi, id est laborum et dolorum fuga. Et harum quidem
-                rerum facilis est et expedita distinctio. Nam libero tempore,
-                cum soluta nobis est eligendi optio cumque nihil impedit quo
-                minus id quod maxime placeat facere possimus, omnis voluptas
-                assumenda est, omnis dolor repellendus. Temporibus autem
-                quibusdam et aut officiis debitis aut rerum necessitatibus saepe
-                eveniet ut et voluptates repudiandae sint et molestiae non
-                recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
-                ut aut reiciendis voluptatibus maiores alias consequatur aut
-                perferendis doloribus asperiores repellat.
-            

-            

-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-            

-            

-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-                quae ab illo inventore veritatis et quasi architecto beatae
-                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-                voluptas sit aspernatur aut odit aut fugit, sed quia
-                consequuntur magni dolores eos qui ratione voluptatem sequi
-                nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-                sit amet, consectetur, adipisci velit, sed quia non numquam eius
-                modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-                voluptatem. Ut enim ad minima veniam, quis nostrum
-                exercitationem ullam corporis suscipit laboriosam, nisi ut
-                aliquid ex ea commodi consequatur? Quis autem vel eum iure
-                reprehenderit qui in ea voluptate velit esse quam nihil
-                molestiae consequatur, vel illum qui dolorem eum fugiat quo
-                voluptas nulla pariatur?
-            

-            

-                At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                blanditiis praesentium voluptatum deleniti atque corrupti quos
-                dolores et quas molestias excepturi sint occaecati cupiditate
-                non provident, similique sunt in culpa qui officia deserunt
-                mollitia animi, id est laborum et dolorum fuga. Et harum quidem
-                rerum facilis est et expedita distinctio. Nam libero tempore,
-                cum soluta nobis est eligendi optio cumque nihil impedit quo
-                minus id quod maxime placeat facere possimus, omnis voluptas
-                assumenda est, omnis dolor repellendus. Temporibus autem
-                quibusdam et aut officiis debitis aut rerum necessitatibus saepe
-                eveniet ut et voluptates repudiandae sint et molestiae non
-                recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
-                ut aut reiciendis voluptatibus maiores alias consequatur aut
-                perferendis doloribus asperiores repellat.
-            

-            

-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-                enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-                sunt in culpa qui officia deserunt mollit anim id est laborum.
-            

-            

-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-                quae ab illo inventore veritatis et quasi architecto beatae
-                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-                voluptas sit aspernatur aut odit aut fugit, sed quia
-                consequuntur magni dolores eos qui ratione voluptatem sequi
-                nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-                sit amet, consectetur, adipisci velit, sed quia non numquam eius
-                modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-                voluptatem. Ut enim ad minima veniam, quis nostrum
-                exercitationem ullam corporis suscipit laboriosam, nisi ut
-                aliquid ex ea commodi consequatur? Quis autem vel eum iure
-                reprehenderit qui in ea voluptate velit esse quam nihil
-                molestiae consequatur, vel illum qui dolorem eum fugiat quo
-                voluptas nulla pariatur?
-            

-            

-                At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                blanditiis praesentium voluptatum deleniti atque corrupti quos
-                dolores et quas molestias excepturi sint occaecati cupiditate
-                non provident, similique sunt in culpa qui officia deserunt
-                mollitia animi, id est laborum et dolorum fuga. Et harum quidem
-                rerum facilis est et expedita distinctio. Nam libero tempore,
-                cum soluta nobis est eligendi optio cumque nihil impedit quo
-                minus id quod maxime placeat facere possimus, omnis voluptas
-                assumenda est, omnis dolor repellendus. Temporibus autem
-                quibusdam et aut officiis debitis aut rerum necessitatibus saepe
-                eveniet ut et voluptates repudiandae sint et molestiae non
-                recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
-                ut aut reiciendis voluptatibus maiores alias consequatur aut
-                perferendis doloribus asperiores repellat.
-            

-            

-                Anything in the footer is sticky and aligned right.
-            

-            
-                Cancel
-            
-            Enable
-        
-    `;
+  return html`
+    
+      
Enable Smart Filters?

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      

+      

+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
+        illo inventore veritatis et quasi architecto beatae vitae dicta sunt
+        explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
+        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
+        quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
+        corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
+        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+        voluptas nulla pariatur?
+      

+      

+        At vero eos et accusamus et iusto odio dignissimos ducimus qui
+        blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+        et quas molestias excepturi sint occaecati cupiditate non provident,
+        similique sunt in culpa qui officia deserunt mollitia animi, id est
+        laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
+        distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
+        cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+        omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
+        quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet
+        ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
+        earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+        voluptatibus maiores alias consequatur aut perferendis doloribus
+        asperiores repellat.
+      

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      

+      

+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
+        illo inventore veritatis et quasi architecto beatae vitae dicta sunt
+        explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
+        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
+        quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
+        corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
+        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+        voluptas nulla pariatur?
+      

+      

+        At vero eos et accusamus et iusto odio dignissimos ducimus qui
+        blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+        et quas molestias excepturi sint occaecati cupiditate non provident,
+        similique sunt in culpa qui officia deserunt mollitia animi, id est
+        laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
+        distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
+        cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+        omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
+        quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet
+        ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
+        earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+        voluptatibus maiores alias consequatur aut perferendis doloribus
+        asperiores repellat.
+      

+      

+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      

+      

+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+        accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
+        illo inventore veritatis et quasi architecto beatae vitae dicta sunt
+        explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
+        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
+        quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+        eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
+        corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+        Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
+        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+        voluptas nulla pariatur?
+      

+      

+        At vero eos et accusamus et iusto odio dignissimos ducimus qui
+        blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+        et quas molestias excepturi sint occaecati cupiditate non provident,
+        similique sunt in culpa qui officia deserunt mollitia animi, id est
+        laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
+        distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
+        cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+        omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
+        quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet
+        ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
+        earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+        voluptatibus maiores alias consequatur aut perferendis doloribus
+        asperiores repellat.
+      

+      

+        Anything in the footer is sticky and aligned right.
+      

+      
+        Cancel
+      
+      Enable
+    
+  `;
 };
 
 export const forcedScrolling = (): TemplateResult => html`
-    
-    

-        
-            
Disclaimer

-            

-                The contents of this dialog is specifically prepared to force
-                scrolling, allowing us to test whether the scroll bar is
-                appopriately activated in this context.
-                
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Auctor augue mauris augue neque gravida. Libero
-                    volutpat sed ornare arcu. Quisque egestas diam in arcu
-                    cursus euismod quis viverra.
-                
-                
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Auctor augue mauris augue neque gravida. Libero
-                    volutpat sed ornare arcu. Quisque egestas diam in arcu
-                    cursus euismod quis viverra.
-                
-                
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Auctor augue mauris augue neque gravida. Libero
-                    volutpat sed ornare arcu. Quisque egestas diam in arcu
-                    cursus euismod quis viverra.
-                
-            

-            Footer button
-        
-    

+  
+  

+    
+      
Disclaimer

+      

+        The contents of this dialog is specifically prepared to force scrolling,
+        allowing us to test whether the scroll bar is appopriately activated in
+        this context.
+        
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
+          augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
+          Quisque egestas diam in arcu cursus euismod quis viverra.
+        
+        
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
+          augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
+          Quisque egestas diam in arcu cursus euismod quis viverra.
+        
+        
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor
+          augue mauris augue neque gravida. Libero volutpat sed ornare arcu.
+          Quisque egestas diam in arcu cursus euismod quis viverra.
+        
+      

+      Footer button
+    
+  

 `;
diff --git a/packages/dialog/stories/images.ts b/packages/dialog/stories/images.ts
index 560403156b..6b1540f984 100644
--- a/packages/dialog/stories/images.ts
+++ b/packages/dialog/stories/images.ts
@@ -11,6 +11,6 @@ governing permissions and limitations under the License.
 */
 
 export const landscape =
-    'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCADAAhQDASIAAhEBAxEB/8QAHQAAAgMAAwEBAAAAAAAAAAAABAUDBgcAAggBCf/EAEIQAAIBAwMCBAQDBQYFBAIDAAECAwAEEQUSIQYxBxNBUSJhcZEUMoEIFSNCoRYzUrHB8BckctHhNFNikkPxGIKi/8QAHAEAAgMBAQEBAAAAAAAAAAAAAgQBAwUABgcI/8QALREAAgIBBAICAgEDBAMAAAAAAAECEQMEEiExE0EFUSJhFBUycSNCUoEGJJH/2gAMAwEAAhEDEQA/ANShuJbn4ssxPvTO0hcMCck571DpmmsFAJwfarBZ2WwrmvytOab4DVsZaTO8A74qyWl5nuaQxxKAKLSTyQNvf2rV0+rngXD4GYquB69wzdmwKjC7zk80uiujIwGaaQRkqMH60/j1EtVLgnoZW4wvwijoZ/LwDxSqF2jOB2Fdb2/EcZYdxXpsep8OPc/QJZFugEJzxXIbw471UIdcaUjJwKMTUwDgNnNXx+WjPmL4Oot0Go7PWjYrwFQwP2qjfvMZ4ep4dcKgDdWhp/mIXUmDRoFrqOwHBNS/vRufi/rVJt9Z3nIajk1EuBg4rdhrsc1wwUiyNqZIOWoZ9WVVbP3pHNekIeaVT6gNrAvSefX7P7Q0uC0proU/mH0o611kPzn7VnRvhuGG70xtL0xrndSmn+UlOVMhpF9TWWGcGirfWyTyaoS6t8Jy2D867Ra35X5myK1l8hD7Bo0ePVNwHNfTfZB+KqFH1RGucMa+nqbcpwcUT+Sw/wDI6mXR7tdxO6uW94M9+RVJTXtwxu+9FwayBxuzUw1cJ8pk0y7RXgY8n7V2N2qt8qq0GtLs713/AHqrg/Fz9adjmTXYJZRfISc18e9RRwcmqddasVU+W/xfKk79VXcLEE8fPmr4OWTiJDaXZoZ1QR5JYAfOhb/qmO3hJTDnHoazq76qupFOZBikk+uO2Sz5z7mnMWlyy7YvPUQiWTWepprxm/iOF9t1Vue63ElmLE+9ASaj5xPxE1F5gbJJOPnWri0ygjOyZ3N0MY593BBI+VdZRt+JeflUVnc7M4AHzqHUeobGyYJcSoHPZc81a0osrpyQbFMSPi7V1E6lyKQXXVVs4VIGDM35R70ZY75lDk4PfBokr5KpWhwJBtOOK7JIAaEBIyQT7EGvozjjviooFSoJkIZTjvUaPlBn3qOafHbucCvqjAFSnwQ5chK42n2qPdtPHauoYleDXHA2Yz6VXYadolM4dcUOZDu5OKWy3rWkoZ8CMnuT3+dGWV/bXx+BwT/nXcIsVy7J2u0QYLivkV5G7Y3g49KlktoyD8OfnQUkSRkkLxViUZEu0NYrvb+U4pna6mo/vWBH0qri4VF718F/Gez/AKCk82jhlVSRfDPKJfIdTtXX4nA+VdoNYtPN2KdxzgAD1qhyaiiJ+f8ATNH6VIZmDR5c/wBKws3x0cS3QHsefc6ZoyOksAx3r4AE+lLLS6eNQCmD71O1+Np7UmpxXY2FvIMHHaoGXjOaDa+DZxXEvRjBxUb4M6mTSA7T/nQzEkEDkVL+ID8ZrpkEnGcUhnjFrgJcA6hlxz+tThsjNd/KUrivmwDj0rHeNwCs6FQecUXEFZMe1RFfhzXxXI+VOYfwd0C0T7FAPFAagcowokzZWgbrLg5pzPtljpEJclZ1OEAE4zSKOYxyEY4q06i6bGA71W3jyx4r5zrdJsy7ol8Wcabd2HFCTS8GizEAvehZIwd3vSjwzkc3wAGTk8etcr60I3GuVT4ZlIstLUIgz3o+0jLPjtUEVwhAA71OtyiEmvPvHXIMaQe6qnrQksmGOD2oWXUVU/moS51SNASGq2lJUdKa9DK2vH83ANWa0ud8SEnn1rOrXV1WUktinVpr2wZDZFafx0PC7ZUsv2XU3AA5NLNSvUCOMgcdqR3PU6qh55qp6z1STkb+9ehzZN0NqQXkS6LKmqJCTlhj61Pb6wXJ2txWXTa7K2SGzUtj1K8eBn71krDKKoW8rRqZ1MjBzXUa8iN+cHHeqFJ1V/DxnBx6Gkdx1IUZiGxn50UYTT/E7zSZsdn1FGWyX4+VNE6mRF+GTj2NYHB1TIqk7zn2zRUXWMpXDGtTE80FwyxZn7Ntn61j2sCTx6ikF51lG7EK2P1rKrrq1ihUMcUpXXnMpYuTn51OSWTIqkwXmfo23TuoxMeHBOe2asFvqYZfzE1h2k695cud9XbS+o0ZMFhU4oyiTDI/ZoH49e+7AoK+11IkKhgTmqrc9RomQDSK71kyPkMe9NvfTRa5ui3ydRsGPxVJB1Pnu31FUf8AHGU5AoW4vnXIB+1LLE4O7KvJI1KLqRBg+Z/WjYer4ewkG761iT6rODy5ro2qTIwbcwPvmm4ZJrpk+Vm8L1Sg/wDyUysdcM5AVwQfnWAQ69LnLOSfmaf9PdYtbX8IYeZlgMc/6Uziz5IyV9HLL9m73F/5MIdpAvt86rOrdQpg7toz/M2BXfWZiywyu2IymcfOqtfWsRc3lwScflBHb6D3NfV9DhxvGpimXK9ziFtqDXOdp+H3qMr5xx3X3zQVrK11IVAwi/m57V9up3GVjbavof8AWtxVHoTa5D42SMlQwyPQeld42Z2zgY9TS+1jEUJ7/Mn/AH3o1WxEXP2zXWVVyDdQ63+6NKnmQDcqnGTjn3JrzW2qXk+sz3kuqBnZy2dhx357kVtniFE91oMwjUycgYHYnnv8h/3rzZ01YP1F1w4STzUtZNhLyNsJzzwKwNY3PPGKNvRxUcUpM9DeH0EupqtxcQK6DHxtgHPvtyfvWmKcIMY47VWNAsRp2mxxk7Nq/wAhJ/zppBLI4IVyy/8AyWtaKpJGNN7m2OIQZM9vrU8Q25VvvSaGWS3ctk8/0pms29A3oR29jXMp2+yS6jXgjk1yNsoAe/zqKWT4FPqOa+ROSCPY8fagZKSYQDwcc+grqxwMcH/WvoHbjtXQo2ck/SoC64Ata09b+ykR2fBHJizkfqKxfVeo77p/VpEWK7VVPdAT/wD5zmt0FyB8O/n5c1kfjP0jqFzYTalp1wEnj+IAKQfuKVzpuFx7Q9pZJTqXTNH6I6hPUGiJOTuYDBOCP86bTJuyQRz+lYj+z11zd6pLLpt+DHdKCCpOQcf1FbVPujkb/AeM+xq3TT3xTB1GPxzcQSaMlWCnB9qX+SRKSEIkHJX0Ye4pjKpIIHI9hQyXDF2jccjlW9cVoJiydEE4Xy87ih9GB7GoNM126sJnjclwp545x7/MVLqjhYid2xm9fQmobeMPCsxXEi/AfYg0EkmuS+EtqLro+vm4Jj3HGMjmiTqDknnNVDRrWSTUxIpxEq8n3/8ANWRYzISe1fNf/IMkcWRLH2aunbcLYxivD61Krl2yO1CRRgD3qeIHn2rzWLUzf4sdSGEA45NHwgY7UttQM801tm3YAGKfhmcnTBaOEb1IANDkOhIPIpokIAP+ddHiAyK0Y4XOPLBFwmPPFdWuAoOOKnmRY1ye/tS2eQHIFZ+Tfi4DSs4978R5oW5vtykZoedjzil43ST/AJvhFZM9bOP4olokwZWOe1QS2yLkYFH7lj4OB86HkKOx28/M1m58v32QhULRpJSoBouHRlOd2adW1siRhvlXd9uw8DitHRaOEY7pcgybKldaQUmYA8VymdzMolIyP1rlVyx4dzIRg83WCx8rIAPrQ8vXWOQ+76Vh7dYvMv5yBUJ6tZOA2f1rHfx25CG42m760eXH8TFLLnrTcceYWNZR/ax5PhLfavn783NkHPzqYaBJ8o5cmv2fUW9QQSPenNtrzMPz4FYdb9TPG2MnFWXTuqm2DgcepNPYtIlydRqN1rm2E85NVW+1N2clmPNJxrzXJ+I/ao7q43Ln1p7xxSOsapqmBtBqUXgUc8n3pBETjce9fZb/AGjHrj0oPEmCOp78oOG4NAT3+Rw2aVm5eQd6ieYAEE1bHHGKA6Gcd6xzzREN05yMZ+ZpPbtg9+9NYH+Dirtlom+DvJKxz6UK0rKDzRJy2c+1RfhjIjZ4ApOeO3SISslstSZHwTkVYoNaaOMYPNVSKJUzU6TnJB7elXwjwWRLhDrbSjLEmiUuTI3Haq3aMNvBpvaPkAE8Vc48Fq5G8c5AwDXx90h718hCgc0UoULnGaSmqKmgNrY98VDJD70zQAg5FQToASarhwAKpFKg4qK2OJwXlMaqc5Uc/pRcq5J9KhW153d8VepUgGbb0prKdR9PooGxYVARGbLYGR/pXTWv40YC9k7D/X/fvVE8N9TNhrflynCSIyDPqf8AYq76ypVJkQnDqNjfI85r6R8HrN+HbLtESW6pAenyqY9isFQfmapEBurgNysCn/7YpLps6F3UnMMZx3/M3oP9TTdbnzA7E4RV7j/KvVrJZTKFHaa58x9qj4BwAK+rP5pKE9uAF96HeQqECgB5OwHoPeitHtt9yCSBjtR3aKqoQ+LOqjpfw11O8ChrgxlYV93OQo++KzPwK6RuNN0uOWaJzK43M7kjJPerV4+3qX91oWgD4leT8RIvOML2zj54+1W3o7TooNNiiRcDaOTms2K8mdy+hxy8en2/8mMVkEI2kK7/ADamVnA0oDZ2/L0oiy0y3tMyMN7H1bn7Chb/AF6O2ZkGF9Mn0p667M/sapaB0Ib17E1EqNBvjPODx8xXLO9Se1jy4LEZ4NSPKJZgCfi9xQ3Z1UCpICEjPflc/XP/AGoqEDY5/wAIPPzpdORbXeCQASWGfSjreUCJ29z2+f8As1DOQVbyiZN47HipWRHBU0ot7wQYjOcLwB70vv8AqiC1uR/G5yFwOcn2HzquUorthxi30h5NbtANyIW+gpZqtoup6fLDKoyy8bsGmunaktxGCzAMf5TwftRFz5flFtozQ1fJK4PM1vat4eeJtlekmK3uZPJdmwqkk/DgYHrx+tekr1leESL2YA/LmsB8culIdXLyxFEnQ7g2du3HY9+DWxeHesDqToTTLt2WSRoQkhU5G4cEffNL6d7ZygP5v9TFHJ76YRJISuVO1lPIPp8q6T4ciQYHYZ9j/wBq5dR+WXPOV5BHr7ig1ukKlskr2YD2PrWjuM9ROuthZrJmxgj4WU/OoNBn87TlBJbb8JJ78H/ea+ahODA0TH4iMf8AUD2NQaTBJAyRKcyGTP1zQymopsuUbjRc9AtTFaPIeNxz+naiFn8tyPTNdbiZbK1SLPAAFJ21Vd3fI+tfFvnNV5tU69GziShBJllt5RIfbFMIl9u1VSHV0X8rDPrzTe01MOneszTZUnUmXpjiN9jZPamNvexqO9V5b0MucjFdPx6YPxdqeeojDmIXDLeLwMOGqN53IOM4pFZ3+VOTkUdFqSqMZ+9buDPvjbdANUd55HZTk0tYnmj5bpSpIGTQMrhsk8VTnakyU+AGd8AjuaFYbIyRwTXa8kWPJzzS83vBBPFeT1M4RbVnK2TG4LghjgivsdysYOWH3oGS4TB5yaW3V+oO1WGffNeZy5Zwe7thFot9bjcmMtg+lFCcMpyeKoX4+FvzNhx61Hc9ULZIymft8629H8nOEP8AUVlbos186Cc/HjiuVmN51k8lwxDnFcpGetm5NqIO5HizY3OCwxXEguGORkj2NWoaQpVhjmusdkIl/LXtN8ekLuKEMUEy4JQii4dxp7HYmSPBTvXDo7RnIHFBaqyvaLIbcnk88050yORyABxXeCxYDAX+lWLRdMwvxD7VCdkPgksbD4M8k0TNbtGuQpwKb29usS4AArrcL8DZFSyplf8AxRTIxigZrgtnmidQcICRSnzCxx3NVWwNwSLlgpyOa5ExmJBBr5BCznBFN7e0QLyMH3qYXIHdYPEhX9KOtpscGoJYio78e9Q+aUOKaXRy5G6uGHJqdnBjAXkCq+dQO7B4phZXgIwap92WrhhAXIIPeueXgD2qTerngVwfGwHoKtXAYZa9sU3sht780BZQqOSaZxTRxZwKsQadDK3kDcCj4vX1BpNBIoJOcZpik42cGqMiSQLGMZQIQf60vu5Ai8VE1xhuDQ8s27POaznJLgC6PpYFDk813hXjGeK5b2/ncntTCCFE4PFMYouRX2Q2+63lEqHa6g4I960Oy1B9a6ZaYY/EQ/w2x3x71RZFXado4p10bqpsLqWJj/ClAyD24rc0GZ6fKn6LYccM6QMYpvL42xj19z3P+/nTO2vI1t0DEsCdx/8AlQ/U2lm2kMkJ/gTDcDj09qg02NZUy+do5/T2H1r6Hgy71wHOKoaQ+ZcytM2AcbQB2A9hVg0qPa5JH8p5pbYQhIuDlm4HypqJBaWzyE4REJJ/39K026iIP6MG8QdXS+8V9soykKCNcjIzk/8Aitd6VuYo7IOwUKi5J9BXnXqeeS/6xlulOWdwc1rPTsN9e9PSqJRE5QgFe4ODzisHSaiTnPi+TV1OnShBX6EvjL+0foXhjJHHqEtze30wzDpemoHnkGfzMScIvbv7j3Gcbtv2v7HXdVjt5tD1TpppmVLe61AI8LFuFVyhwMn1OB86yn9pHpbVOmtTmvmZ7p7x0P4mfJZWjLELnIwPizj5D2rCfx1/bWM0+rqkoeCOGCINzIQuxcAc+mffP1pt5XJNTu/QKwLG1tpr2fqr4cdTy31kjTH1xsJzgn0rS7Cc3CFhg8nk/wBP6f5V5z8ILy6v9L01mziUBXLH24J/XHf616J0y1Nuo/mBHA9+9X4E1aYjqoqMuDtf/wB2xKDcpBz7VywTfJtcnap9O2aJutkkI55YDH3zXy0BduFAOTn+v/ina4EUJNUlFvJMznaAcfKvJ/jj4t6l0FrlmNEsBqurXG8QxTS7IoEAZmkdj6YXt67flXrfrLTXksmWIbpXICjsCc8g1+e/7WsGoaN1bZX7RTRaaVlsri8WLcI9wUDn053g/wDmkMkFe6StI1NL/a9vY+6I/bS8QIUlutS6f0jWdKtmUXR0qR454VJ/MCSVb5ZHNe0/DHxV0fxF6et73TbkTJMgfB4ZcjOGGeDX5L9DaXe32sW+l6dIt+8spCpDHvMxOB2OQQAM5xx3r9LvAHwuj6N0i2ZT5UoiCyAZwzbRk/0oFklJrYuP2XTwwUG5vn1QF48agtvYvGWOWyBxkU//AGZ71l6NksHcsY5WZdx9Ccn/ADqieM1lNJrjxO/mJG3AxwKtPgdJ+7r6KHOFmVlHpzgH/SsvFlf8x3/gYlBLRUv8mvXsPmo204I5U/Oq/d4QSOq7fQj2Oex+9WVyFOw4/wB5pLrEIEcjg9xzj1r0D64MaBWLuc3EYQE7oHyo9cfzD/f+lW/pqz89jeSLwvC/M1WNJ0WbUb6OJfiO7lvYZ/39q1RdLW0skiVdu1e1ed1+sljg4x7NGEE3ZWNelKozKTVKm1CQysudoHrV91e2LxsoFU270hhIxIr5Lqa3tssyWC2886SFt+V+tWHStaypVjtI9KrwtnTK8gV2BMIOM4pKLV2Uxk4l1g1BJFIDZqRLtcEZBqlW2riBjucD61OvUaA4yB86fhCxiOZsvMV22PhPFMLSYuTuPaqPZ9RqvAIYe1NrTqSL+YgH5VqwyRgqkw1NMuAY4OOKHnuAo5Iqvt1XEON9AXnUcLA4k3HtxSOfXcOMEEq9sM1K93FsN9KTNqJydzfpSO/6g2Mx3ZJ7Uhm6hLuTkZrz04yyO2VPJ9FvuL07Sc0DM7Pzu+1Vk9Qs/wADGjE1mPysbgfrXLSJ8gbmwyeUopG6q1rEh3ls+lHS6msjd6Q63cq4IBq+Gl5CQJJejd+YmuUmebDH1rlN+BBcFWFtEqnGM1JFpsbp2H2pKdSPOaIstacNtGCPnWooSsX5H0ekx7R8OAKnawjjiPwih01RinAFSxXm5fiIxVqjwSBtDhuB2o61ulhzQN7cqG+Ag/SlM1+yvgVyVANF8tpo5k3EgfKoL+4BjIjIPFVu21JkjADEt7URJeyMnbA96TyZa6KxNq0rg4zS2CVllGaYahMP5vWggqkg1fgbkVuI7sG3+5phzilFlIYx8h60ab34eCKd6B2k0smwYOTS2e5wTiizOXQgmgzbb8kfeo3Xwg0QCXJ570bZze2OKDe1ZSaJt42j7jmrVBJWwr4HMNwM8+lFR3KEHsDSiN9ueK6lyDnJFRHa2cmWS3uwQeaJS5X6VWLe8KZAOaM/HhfmflTMYpoNMetebezVJDqrLwScVWZL4t2yM1JDejABPIqvJjtcE2Wk6qD/ADCvqXwbseM80s0XQdU1+XbZWzzA+oHFan0z4E6jfWoe+k/DP/h70vi+PzZ3+EStlYsrpSnBoszqRmr1H4BTx52agAPTjtRFn4H3SSET3yMn/wARWpj+K1UVWwhKjPhPlMKMk+lfLW1v5JsQW8jP7be9bHpPhLpumyiSeZpyOwNW6GysbZVCQICowDitPD8JmnzldB3RlnT2l6jf6L+FvraRWXIVmHt2/wA8fpSmO2eK4EZQjDY2+2PetyE8IU8KP0qhdUaSi6h+JgwA5yyj/OvS6fTPSpRu0dutAVpEqJnjOMZ9qWdW3n4Xpi7YNlpAY1x7HP8ApRwjYQgO2FPB+Y7VX+rZReReQuPKhUE/9R/8f509qMm3EynFG8iMZ07SvxGsu7LlVNaz0+fwCLxujIAbI4qg2MJs9QlydxY9jV/0/M0ICnkDtiszRxio/sf1km2voU9eeH+k9ZWMlvqNpFeW83dJF3Z9uPf5/wBaz7p39k/ovSLxNQttBthcI29JLpnmMeOxHmFsHt2rZI7e5fIRizD3P5ab2FpI/DjPPOOBmtnGt3aM95ZQVJi7ovo2CwtnTkyFwd2OOPlWhQRBAAy4AHpS22AgAUAAduPWjkuCP5ce1MpJcIVlJzdskMCowP5ue3z55rrBGI5CT2Bz8q55wJyOPTH+/wBakU5GRye1G+iKRJNGk8WCvP0qhav4f2l7e3TTonlTEs25c8+/tV93Hbg0LOglB7Ej3qi2GpOPRl2k+Fej6FNJc21lY28rd2SFYi/yYge/fvVzsNRtzCltbGJyo+NogcA+wyBX280ZbzcrbhGe4U4zX2006HTIvKt02qO2WzS+Te3+g9+7tmX+J+mb7+WRwBuXIbjNdOiLaa108XkQJa0cTkAfyj83P0Jp14lhl8lv5W4IIxT/AMK9DgktLkXMeYHiMZ//ALDB9a87qGsWZz+jZwy3YNrLdGYrjEqncHQFWpRrEWUZT9M1BoF4beC406WTdPYyfh298fyt9COacxWH47UoQeI85Ye+K25Z4+HyrqrMqMHu2jjoPpv8JbNdzp8Tj8pp9egNnA5NfReLbwLEvwgDAoa4vFUbiRXh9TnWS22asUoqkLrqzA3Fhk1XNQt0DHint7qIKnmqlrOpKoY7sYFeL18oJfgE2kuQO8t1XJFJ7plVTmhrrqZB8BbJ96W3GsxyAneCPr3rIwJzkJyaIdSfy1LBuKRSaoUcjJwKI1TVVdMKKrNzPlic4rfi6VAxdFog13avDEfrRsGulBnefvVGS9APLcV9l1IbeHwKGUHIs3F1ueoWbJDZpdL1I7E/EcVUn1lVUjdmhJdTDIdpqlYqOssd3r8zscNwPUmgpNcJYHdVe/eJcFSaDub0oCQaPwk3ZbpNYJQkHJrouutk7myBxVUi1HcnJ5xQ8uokM2G4oo464OSLVP1GsbH4zS+56qSUFd39apWp6uST8fFJDq5Vjl654mmTdGjjXkPdxXKzxdUVhnca5ReFnWz7BdsxBYfeiI70oxwPoaXQyIF55oiMq57itCCssod22qlhjNTJq7DIB49qSIm0llNTWxLyDcOc0UlSIcR4vm3B3AAV0e0d8tnBFE2Um1MdhROwHJ96WfPByjYrileNvpTBb3MZG3JoW42RsRkVA06quAfT0pZ4tzOeNHLhWnY8jNC7WEmB6d6mVj6V9Re5J70xjioFbikT2rkrg0asPANBRssY74zRMM28YBqyrKqoMjtg4zRMVqFB44965asqrjvRodcVdCCXLAoAmtO3GRXwxkLgLR8gwK64Vl4HpXTTrgGgSO3Y53c5r5LbE8YohJRGxD12edW7UutyJXAALYg1OsYU8jmpt+fmalXBUnFM45Ow/QBLHyccfSrZ4deHWodWa3DmFlswctIRwRQXTXTknUmrRWkasQzDOB6V6w6X0O26S0SG0gHKryx75r0mh0n8p89Ij1bDtA0HTulrBLe3gRdo5OOaNk1PH5cYpRPf7mOT3oU3IB4r2+PAoKooXlm9IefvQj3ri6ngnk0lWcHP+tfBMQTV+wp8rGs+oBuzc0Kb3APxZpbPcZ9cGuWxLN7ipUOAHlbYd+MkkBCg5+dQxWctwJGnHwgYphZ2hlPxDavvUOr3Kx5jQgKO+KXyU1QzjtcsousXFzBMYkTcFOFx61V9ZuFtYGVn3MTlz2BPvVp1V/4jNnI9DWe9Xz7oHReTjOKxc8pOLscxRSdoX39p/wAwJB6H1q46Bas9sh7dqqrzefGsqHO5QeatfTd2JLNV9VOCKU0GeOWKkMZfyjaLLa2ysFAUkD17im1ughUAD/zSuDUVRADy/wBBTO1dnRnOe3evUY5JrgxJxdkgYj1xUkMrKpyufmTUcUyQMN/qcVFq+vWlgcO6Jxnk1fHnkGq4GkLNMp+HBx3zUhVkztU1SV8X+n9OndLm52sBg4GR/SirXxS0G9WOWG9TZNymWHNWVxwdRb42OOcmuNHySPWo7PVrO6svNgdWB9RUiltoJGKVaoLiiPaEUlRlT6YoaZAVJGOPWpbmU25PGUIpXNeLg/y/Qd6CTSQMU7oo3iDGLu8tI8nAOTVj0a6j6e6bWRs+ZM3b1xVa1hmvteZV5CkIoq76j0/Jc6faRKD/AA0HYeteS+QTyRlt9m7iTUEitXOpJPfJfWwxcMBFKv8A7i54z8x6fU1a49VbTII/MyJGHfHpSdei3xllJPqadW+m3S2ot5D50S/lEi7iv0NZMP5C0707fHoLZzuOr9V5yCTn3NQTdRqUJMma6y9MyOxyDQlz0jMyHaDmsjJos8uw2nXAr1XrARKw3VnnUnXn5kWT4jxxVu1roy8dWCqxzVFvvD6/EhJhJFZ0/jsjdMUlGTYgXXnlONxNFQ3+9fiJNP8ATuiHGBNAR8wKf2/QsMy4AprB8c4LglQZnN5dNGrMmW+tI7zV5MflJPyFbJP4aBh8C0F/wvY5Jizz7U6tDL0D4mzE5dWuOQI3wflQUmoXvYRPz7VureGHp5Q+1d7fwr3d4v6VatE0glhkYItzet/+Nq7ia7zxE2a9BDwnTHMVd4fCqNST5X9Kqejl9B+JmCwWd7OPhjIzU50DUJP5RXoK18NYkbPl9vlTWLw+t9vMY+1GtHKiyGH7PMsvTepqPhUYoNuldWlJwpGflXqj/h/AT+X+lMbToCzQfFED+lAtFKxhYlR49l8MtZvCcNx9Kh/4L6uRkyH/AOte4Lbomwj7QL9qNj6TsV7QL9qvXx82R4YHhRfBjWMcSN/9a5XvROmLML/6dPtXKtXx0wvFA/Pqx8PtXmX8oWm9t4XauzAbv6V63sPDOKLG5F+1OrboO0jA/hDj2FWLQyZO2J5MsfB7UpeWmI+i0w/4T39sN212I9dtevLLpi1hXHkr9qKn0K3KY8oY+lG/jJNWDUTx1F4faisoHltj2Ap3beFuo3MRIikJ+lepIOnLQNnyVz74p3p2kQr2iUD6VGP4pvtnUkeOH8DNaupCVhl/Wjbb9nzWGGTAw+pr2emlxgcIPtUi6cg7IPtTcfiYe2Q2jyDb/s9apjmICjIf2eL4/mUD9K9arp6n+Ufavv7tX/DVn9JxFbjE8n//AMd7psZA4+VHWn7PUsXcA/pXqL93KPSvn4BPajj8XiQOyJ55sfAZFH8QfpU114IQIpx6V6BWxjB7UJfWCBSe1W/0/FVA+OJ5svPCpbRuIyy/0o+x8Kopo8m3X61r9/axpnsaI0i0DxgBaVWijuosWKKRjM3g/AzH+ABQ0nhJGmcQivQR0nP8tdToqkfkFWP4+JGxHn+Hwpj3Y8v+lPLDwftGXLjk+1a+2iYPCUZbaCWPY4oI/HqLO8cShdJ9DWPSxknRCJT2ajb2/wAuSTxTPqq4WzbyYyNw4OKqhLyk7jx7V6vQYVjx0jL1L52oKN4rHGa7LIp7nn3oHzo4uBgV2WZJATmtlJGfQf5mRwc4qN7gqCfShTOFBINRCfecDNC+CAhWaaQAHJNWLTbERR7nxQOkaeE/isM5o64usAqOMUvKV8IuxxS/KQXJdBVIXgCq5qk4fec0xMuIzuNV+/fcT7UvIYTsRalPwcVSuooQIJGOCzD1q33zLkgcmqnrhWRSAcnHc1kZVaHMZVNF1LzII4nBBjJjOD7Hj+mKuugXQAfHI78is0Jey1ogDEU4wT2CsO3+/pVl0nUTY3ioxDBuCT2+grx+mzS0Wrlgn/bLlf8AYx+jStOlWa4UBuCe2eKtrELDwQoAxVG0Zmh1GCMkBXNW+6lX4UZSR/iH8te+0z3KhDNFRdnTU78WOmyTMqlVUsc+w71+f3jH466n1H1BdHTJDHaiQxbZsnAUkEY9DkGvcvWSC56eubWKURtJCdj5z6cE1+TPX2p3OkTXNvIk6zQXEm7YpYsxYnlsHB9f1prNOUEnEjTwjK9xoA6x1ia2Z55miTOd0Hb1zweQDn0IrvY9X6vAkaacvxbiGeVQZAfkRyM/L+lZDoXUt/dxBsuiBxGwkyxwR3BA5/04ojW9b1mxt2ayjkdMgAxISee/OD8v9iqv5XNUNPCqPXfhP49dQdOzQWTyfinvW8iNSxIWT357HkZxwfr394aDey3Gi2c10FWaSNWcKcgEjnBr8pf2atf1z+3GgW8lu48+9j8xLlcuyNhWwD6Y5yfUDFfqpp93ElmAeccKBjv9KsxuU43ITzxUGtoxuQJYHIJ49aqd8xtomkc/CPXORVnjkaSGUkfDjgVmnXXUv7h0RbjYW8yTYo3gD14JxS2omoRdnYo27Fg1+3suptKgnbbJe3aRJnHJJ7V6St9OR7RG2g8e9fn5Yzt1D+2H0fpTrcE29jHqhXYPLUKHbk5POVA7L37nOK/QKy1AJYqCeR71l4qyR3rp9GlA6Np4/wDbrodPUdk/pXf96gV2XUlYVbRcQDTQQSU+9RNaqPQGibjUP4RxS06goBJaoqK7OJhp0coOVFDzdPQuD8Cn9Kms9RSR+4NGm6jf+ah8cJc0SkV2TpqIZwgH6UE/Tscb5UBT8qsss3fDZpfczHnFUywwXokWxadtOCA1HRabEV5Ufah/xRTNdlvzQxUF2TQSuiwd9oqRdKhXsooP94MD3qSPUCAcirE8b9EUwo6bFjsKiOnRDPAoeXWUhGW4qBNZW4bEZrm8SO2thn4GJfavhhiXniug3um49qg3ljtHJoaivRyTJT5PPauyTRL611TS3lHYiuHQ5OcZqNnugkEi8gUd64NShH81BjRXPBHNSLoLEdjU/n6QSSCxqkGO9coX+z5+dcqN2T6DpDaCCMDnFTi2jPY0lttYicZ3DNHRakh7MDV8ZxfQDVDBLdAe/wDSuXUSbcZoNbwls54+VQXN2ST8WPlmibpEJE8ZVDzTOxlTaTmqnLdE5+Kp7W5YLgtyarjkV0RTouS3CD1FSrfRgelVIXLH+Y1984/4jV6kBRbf3nGO+K6nVI/TH3qsBiRnJNdo35IwancwlEsJ1FG9RUf4wEcGl8EW7nbR8MHoFrk7AaSPguTntml2r37RxMSCAoyafxWRweBS7VLBpImXbn9KiV0TGrMi/tmL3WjaqcEHBBrU+molMIJwaxvqjoi5s+olv4Mxgtzj1rVuirwC3jSRviwBzWPhySWZxmaGSEdicS7Q2CvjiiV0qPPp9q7280ZUEEUdDcRe9bKozwD9yofSpJrMWVhLIB+VfWm8U8Rzgik/W2ox2XT1024glfSipUBZgWtag11qlwxYEbyBil11ebVIU4HvQss/mTsSeMk80NcXS7zxwK1cMklRkTVtthcGMlnYljU0lwqKRn+tLReh/wAp57Cviy4J/n+lN7xdoYly8fwtTTSrF52Vs8Clenxi44C7frVltMQRgCofRUMXnEUe0HHHpQHmeZIa+GYEnPeuKcDIAFV1RZdny4lK/CDSe6I+LJplcPnNKrlxtY7c0uWiK/4zjAHvVXv0LBhg47nNWa7IJbJxj+lV7VH4Y4wPSkMsRnHLkpetWHmwSE5B/lxwc+9K7K8luYWR28ueM4Y+/pkf0qy6kFEPJO4jvjtVC6tvbi1tYzZApOh+FsffNed1+hWph+PEl0xtXI1rprVxcx2bEfxYmAf5CtAkuSZV2EuDz5ePzCvPXQHX9tqUohkP4O+xuntWbkDPBHuOc/bNbFp2u2+oQEJOpKDZlGGc/wDen/jdS5Q2ZOJLsqnFyO2u3YuBLHA7xFeXjUfG3y+Q4rxF+0n4U31xrq630/b+XIIz58asdrc9/bP/AO+O1exeoNRiiSQvMkkUeXMn5TgA4Hz5Hf8A7Vl/UOp6WIJ0ubhAjAbiW3ck7fXv/wDv9dvJlUlVnYMe08HzWepabZST6vbXCFoyEdx8Cnn7HjFfdIg1/UbO2fQ5bqGcgRtLGxVZOPyk5Gex+xrfus7XpzT9L1EvrENz5gz+GZN28M2Tx9GGfoaXdJ3nTt1bQWiX0UMUaqPIICqg/l+pzuP65zkUn+K9j9Wi2fsqeHDaHfPresT/AIvVmA+FiR5I9h6f7+3tnQbxhsVx5owP4hGFA/yrzP0Y9jp8ETwXkNxPvBDEnlD8QOfc8n9K3LpTWIbuNUEyuqgERx8ZHpz/AKU5jyRS2mfqMbfJpL3a21lPIDkbC2SeMisJ6gvZepdSgtVldLKGT+IqkES++OPn3q89Z9c2mmwQ6THKg1C8YIsCN8QHqf0FVDpaze81pnnVjGnYEkjucf7+9eX+W1E82WOjwdy7/SAxrZG2XToXw10PTuqn6uOno3Us9oLNr5mYsIN24RgZwBkA5xn51sUal7cHntVU0hUaIKnBUgVebKJfww34zWzDFHBjjjj0i7Bcm2K2jYZxmoG3x5OSMVYRZRv618bS4nBHeq2h2ioXutPEdmCc1HZSi8bGTmn9zoERbtmiLHRbdGyRgj2pFwyOXfBcoqgGLSXhTeDXeKznf8oJp8sCkgZyo9KZWkcWQCBTUY+gOEVmPR7l/Qiph01cOORxV6gjiAHAo2IRewq1QBM4/sdM+eMfpXP7C3BHFagnkntipQY/TFF4osjcZT/YS5+efpX0dD3XI5+1atvQDuAK6eZHz2P6VHhgdvZklx4fXMoPJ+1fLPw6mhOctn6VrZMTA9vtUJeNe2MUH8eF2EsjqjMbzpa7iiKqfT1FI7bQr63lJkAIz3rWtSmTyz9Kq9xJ8R4GBVcsUbssjIG0+xYR/EOcVN5KjIxQ1xqyWy43Yrrb6nHK3BFGpx6s7bJhiWeedua7rbAfy19N6oTOaHfVFXILAUdoCmyYwYJwtcoBtWQE/HXKjdH7JplGh6fmn/u3K0wt9BngHxOSa69Oa7DqKqYXVs+xq2EAKDkVnYYRmrG5N9MRR2cqg96FOnXU0hznb71ZXeMR5yKiW4j2HsKvlBPiwEkAWnTry4yaZQ9NhD9KYaZMhTORRhu0UnkUxCEUihtitdDAPIqZdAUjtRX4+PJ+MV3XUFH84qykBbBk0TaO1d10pUPIFSNqkYBy4oZ9Xi5/iD71PCOVh8Fkg74oyONF9RVfOtQjP8Qfeug1+H/3R965SSB2stcbxL611nSGYcEVVW6jhA/vR96jXqi3Bx5mf1qd6OSZ36h0lJlbKg4qhX+upoMqgttwfernqXU0H4d2LDGK8v8AjB4gM2qC2tSWcvgBffNYuuaSuHZpaWO/iR6T0vrKGa3BEwOR70fF1pAnBmH3qh+EHhncaho9vdanI5kkUN5eeFrW4PCrTSvMKn5kVfp/5E4JsWybItoWW3WUW7PnVD1p1Glx0zcbSHJGAc0+Xwr05eyAYqv+IPSMOkdNztADwOeafisi/uFm01wYYs++5MZPzNRXMgkmKjsO9Axy7LuYk80LcTnc7EkA03hy06Znzx2uAkXQ80op4HrT3SU8xBu/pVMtbgvc4XtnnPrV90aJvJBwF4rTxO2I5I7RzaRBFAFHFsJS9HKtRDSALTIscLDOe9SLJuOKEMnJweKmtm8x8UEuEGkdrg8cUqvCxBC4HzpndYUHHJ9BSq4yFJ9fc0t6LRLeRMoYn4jVZ1LO0mRsk9selWO9JkLf4e3Paq5fxhmYlgcdgKUyF2J8leu/ic7zx7VVdbtTckgHYg4q1XcW0Mfl2HekF5/EhfGN27OKQkPwMi1OwY6p+MgkaCZG3I6Dlfbt8qqnhr4ja7Y/tHXVhJfytazozNATiN2Ee4Er6ds8Vp2rWRs3YbNwJyCeKpVv0FFF4h2PWNhJsvogYp4GG6KdCpUkHOVYA8HkcDj1pOUWoycF+VOi9q1Z6TuNS0zqcQxRXPkzuu54WPDHAPGfqKp3UnhYl4rja8kY+LLNnnOcis+6x1i20HSLq+uLxdOihiYpPJJ5YB2AAA++R2HJ9Kxfp/8AbP6o0xZbGB49WtlbZC8yldy7+Bzz+UBcnHftxytosuXUqSyRao6M3F8GkdU+D8016Li3tfNDP/FzGNyrkj19hjt7etFdJeGct1fBrmJBbsQjRJHjblRknA+YGTxVjuPHzUtKhlHUPQGqQskRczWcYuoWP/VGSAPXmq5e/tldP6PbRva9OXBeUNiNsIQQSCD7EcH9adWMv88jYelPB+w0pXu72QLAhDb5DhRtUjOT9a66744aZ0r5mj9J2I1bVVXbHcyNi2znlRIM/FyewPY5FeS+uv2iusPEvpTVYIrw2IDMRZwHBeMhsKp9SMAEdz6ZzirX+z7EsvhxYyyEmSTIYseQwY5/XmkfkNS9DhWWKu3Qs25v8iy/s9dQ6pf+PfUMGuebs1ONb+ESuWBYN5ZZS2D3JA+RNeyNF0wQorrwGGc+uK8jdU6jadDax0h1OpSOWJ7m2k5wSjqfbuBgn5HBr2fo9v51sjIQV7jHqKY+O2an/wBpr8mq/wDjYnqPT9Fq6eT4FBxxVma4lRdoHAHvSrpy2QKrMMFRTWVRuPNaWV80i/Tqo2fYbyVe/B+tFR6my9yKVtHknmhZRjPxf1pVyaGkyx/j0lX4iAfrUT3JUEo6/TNVrcefjrmcg4fmg8n6D3UN5tZkiOCf1qWHqgWiFpG349BVfaQDu2frUTCJwdxFUOcu0wlL7GN54uw2LkFH49hXS18dLeR9ojk+uKrl/o9rc5OVzSSTQY4CSmP0qh5cq9li2P0apB4vRSDO1hUx8WFA4BrKY08peaFvL9E+ENRrPk9s7bE1s+LY/wADUM/i+yZxEx/Ssmj1pUYjcDiuz61E3fFT55/YO1Gov40YBHkuDQkvja65/gOay+XU4iDyKh/EJKMg5oPPk+yaX0aRL43Ocj8OSPmaX3PjC0o4tiP1rOZzgtkYoRpBzih8032wkkui46r4jz3SnEZT9an6e8Q44j/zMpVh6Gs1vLlos5PFCR3wLc0KSbsJSaVG2aj4v2lvHhFaT6VXZ/GmHcf4Dj6ms4nvUwf+1LppkfPAo3b9kKS+jQ7rxpjEpxC+Me9crKpYonckmuVXsYW4f+E151P03bIt0k07Acs571q0viFq5jx+GYADvitKtekbCMALGv2pi3RtlLAf4S8j2q5aea6C3q+TBLzxiubSbyZN+8/ykd6Z6R17q2q/+ntXbPqasHVHhdpwu/xDoD8Xar30VoWn2logjgQYA5xSsMeTJk2t0MSlGEL7KQuu9SRRALbEDv2Nff391LMNot8GtjNhbkf3akfSu9vp9qH/ALtB+laa08l/uM/evoxqJOrJ23BAv6Ufb2PVbjkj7VtltaW4H5FH6UWkNuOwWro6av8AcwPJ+jEo9A6pmBy4H6VNH0R1FMTvnx9BW4xLAo7CpFkt0PpVn8ePtg+R/Ri1v4YaxN+e7cUfB4R3zZ3XUpP1rXo7uBc8qKkGo24HMi/eiWnxgvJIyhPBuVvz3EpH/VTXT/B+2tzulYtj3NaD+97VR/ern61BP1DZpGxMy/ejWHEuQd82Z71N0vZadp8oSJVAB5PNeR9eSyl6uM8YR2inGeM9jW9/tD+LsGi6BdWWkf8AOarOpRFTsnf4mNeQumLjVrCSS4vszSSHcxYY5+VZGsW7iJo6eWzln6A9Fa/Zy6TbPHIoXYKtMnWOm2qgPcJn614Ei8brrRSlrHKbfdxjdmr50r1c+vKJbidpHPqTQ4dXkhHa4g5sMe0z1+vW2muOLhPvVS8Tddt9U6cmhtZVYkZODWVWSCZQFJz9aZ3UaW2nSxs5LOPetPFknm6RnTcYLkx+7kMN47MeM4rreHzFAXsa69VR+SZGBwAc0q0rVRd2hQth0OMetFHhkVasnWVbWReeSe1aRoFwHslx7CsluJs3qrznNab0/P8A8hGOMYxWvppXZnZ4joSAyHBrs85/SgWmCtxXDPmtAToMSX1PFMtPAMTyfoKTJKMHFO1Bt7NFUZJGTVc/olHSVhk54+dLbt1Ctnv7d6JlkYE7l/Sld5cBNwI2k/KqW6Rwl1AFy2DtHrkGq9cI3xA8L74p3qF2iK2O/wBO9Vq81F8kEgD50hkasYxJkF1HFIpRM8DGfaqzeWzRSNuPwc+nfvT5tRTYA3wL9QKXXxWYsBx8PGPSlnyORdCG4gW7tJAVDY4IzyKRWlhFBM6yFFVT8JOMn9KsVzGu4x/zYB47/wDmprfRIAyGQqz4oNvsvT4EFzp0GqRPEbY3COu1hIoKkexFULU/2aekdQLu2hxWxdi+LaV05PfCqQB9q3eC3hjXaqbQPlX2S3UITnCn71zhRymedrb9mPSdOuY5LPUNYs9pB8u3v3UfQ45/rT+48Iba7sXt7i71C4jPKefeyy7DzyNzHAP++1a7OsaqQBucnHHpXRIlfKonI4Az3qlr9h7jy7P+yYj3UqQazPDpky7ZIWiDyDnsHyB/Q/rWq9B+Elv0lpcWl20lxLb797PNJukLHGSTj5VqkWltLIAcDd7e3pTvTtF2SAnBOMfpQTxRzR2ZFa/ZW5qJ5W/ag8J76x1Kx6osvPlsTpj2TQLltkwclcDPG4SN2H8te5/DaCa36V0aK5DR3IsYPNR+Cr+Wu4H9c0Ppumhrddn5hggGrRpcG7yyVw47getaeHEsa/FcCE8m9bRjrmtL0/p1u5O3zX2k11stfF5GGWXIPzqt+MNvM+naf5AOEDE1lNr1XfaV8O5tvsay89vIzUwxTgehBds+cSmoZWds5c1hJ8YBaSKskpjb1ya0HpLr+HW1Cs6ksODVCdhuDRa3DDs7feoHd8H4j96nimWTIyKjuMDParNpXYHK7gn4jXQM3OCa+yyARkjk1Ak/t3rqXRNnd5DyM0HNcFCeanLjcaX3bZfAFVuKCTO4vMjnkUPNFFMDxg1FgqDXxZhzzQ7UFYPJpyjJWhmstueaOmudgyMGoI7hpc5Wh2ILcxFqEUitwTiuttdyWsTu3IUZ5p3LCrk7hzUFzp8c1q6Dgmh2BKfBVP7VCa52k4yexp6oWWMOMcj0qp6l001vcmRlO0cg10TWJ7dtgYlRxiuUKCu+iw3UJbI7ilj2oUnAqSHVw65YkH512a6UgncMV20gXTKQDzS25ZkBJ/pRl5q9rGSGljHyzS2SaK9VvKYN/wBJqKZKBjqABOa5UR02TJ+E1ypph2j0jH49aSnPnDApnpP7RXTt0rxG9jWRe6k4NeThGFiY59KxnrO7uotbLWkjRtnAIOKhSnXEi2Ci+0foF1T4vaXeQ4guFfnuDQdh45R6fGI4bZ5CP5s4FeTOgHu/wKS3cjyNxjJrR9OuGmGFFV41JS3N8kZZpralwb3F+0BNITutGUfWiE8f2TtaMfq4rEVgkI7nFQXFwLcHcxprfNexXs3sftDzAYSx+70LP+0Fq7f3NnGB82JrBodbGSFGcUbHrEm3OMVO+bXZFGuT/tBdRAfDBCPqTX228aepr4/miX6A/wDeskj1MyNyKPttVaFcrxXJt+2R0au3iP1JMv8A6oL/ANIodutOonyTqD/pWdJ1QyHDPRMfVq45cGh/7Itl3HVWuSH+JqExHyOK7/v2+kB8y6lfPu5qmQ9VRyHAfNNbPU1uP5hRRddMHkIvLG3viWkjBY9ye5pRqvT1stm7RoMge1P1CuO9cltwYXBOcj3qy+Dk6PJXiqkmm3wmXOUfP0q+eDnUUt60CqS7NgBQaT+NXSt3q8xtbJXa4kbCKoya1r9nfwWbobRYtQ1h/MuSNwVvSgw6aWafHQ5nzxhiV9my6HbHT7ETXB+MjODSDqPqLfNtVsKDzXfqLqZWDKjYUD0rLdb6jMkkgDcV6GMIaeG1GBcs0rH/AFC631szJ8QxWfRrNZXxkTsTgim2i6+1zMbdiSnzo7UdL2rlR8wayXy+DSj+Kpi17gSuGix5vrmtA6buGbT0ywZh3rKbljZXgkBOR6e9X3pa+8+2IHAFPaWdSpiepjcbRbxPn61JFKpJyCPpSfz8E81PDdAE5NbMZJmW+B9p8X4u7RAMjOTVhuGHPsOBSzpa3LwSXDcKeAT601lCnPtUdsBukLppHUEgAf8AVSLVbi5WMlUDe+B2qwSBWJ9BUMlqJByB8s0EobiFKjL9a1q4gDb0AA4O4dxVdOsQSMwbAkxkZORWn9Q9PC6tZUVdwZcMMdxWLdT9OyWRO2dl2cBccj9RSM9POPK5HcU4S4fAxupPOZS5CoihsKec0judXe0DHB2jPPrQFvqUtvH8WXwNtC6nJHf6eYmOFbOVHBpRxY5GlwSy9TQS3MPxiNjxvPfvTkXMUSLKJJJXbHcHFUCPTI5biIPcFIBnk43fSrHBcrHtVCfLHCr64HzoVGT7LVXovNtdAIGJyAM4oHUNdBkEccbSvn8o4/r6UslvDDaQQgklxnPy+lEWllEXDs2R8+P9aJxlLhAJpcsaWKpeKGkjwBzgngHnvTW1t49qhxy3PHelluLi4dltLZ5wvJESkge2T6U60HozVrvdJPdQwNI+/tuKj2GOKhYZPhIB5ElbYZaWsW84bJ98U9s4UxuIzjiiIOivIgIeaRiOC6kAf5URF0tNEmIbkkj0dc1asMo+hOWRS9hmlzpCQrEYJ4zxirfpqxygFeGPcYqpW2lTKds3PzU4q09N2ksMm0sTGORmmo2o8lS5kqJ+qrBL23iR+QOO1Z5rHQtvcgmKMKfpWka3dqgUE/pSc3sYBzisnLW5mvjdR4MH6u8PHEMiG3BJ7MBSXo9LzpucLJnYh9a9A3scd6CCMj2xVO6k6OFzA5txsc/LvS1JcjKm+mcsvESzgQb5Rv8AbNWbTOpIdXQOjqc+grzJ170B1DFumtpZIwpz8PrS/oDxQ1LpzUVsdSikVhgb27GqlN7v0XPEnG0+T106K44PFDGHZnnJ96reh9ZwX9tG4kUkgcZpzNfl490Z4NW74iu1olLYJ5qF0BOTUEV6z5yM/Sufi8vtxih3ommfZ0UxnHelbo6N8qZyqyk57e9RKFdTxzUOSZyQrkbcSDkCu0DJH6k0cbdSDx+tKr2WK2PxNgig3IkNdg65HegpJtpIP3oCfVvLiOw5pFNrkpcjuPpUqUUEkx/cTK6kNhxSaewtpHyFGaE/ejtkkH9ahe/bnnNdviFTPt3YbAdnIrPuvtYv9H02Z7XfuxwBzVzkv5HJALH5UvvbFNSjZLiIupodyLI37PG2oeKfVd11C1s8MyJu4Pp3r0z4V3hOkxT3j7XKgkNQ2p+FlpcXRlggUODnkc1XNd0XW9LcJarIqD0FTug+ixK1RtQvo3yVKkVysYtuqtVsoVikhcsB3IrlDaI8TLvr2s2+n6fIdwRsVkunQv1DruACy7sk0o8WOs2bVFsbeUklsEA1oHhPpv4WwSeWP+I3q1UxTasuf4qjTenunY0to1IwoHrVkt47bTwckZFVubqBLOPDyCMD2pZ/azT3kPm3oAoo/j6FWmy6XeupjbHQf4SbUDkqdppbadSaEgB/ECQ04j6z0xI8RycfSitt8g1XQbYaDDCN0hA+tNEsrILgsD+lIYtdt78ny3Y/pTK0aJhySaNP9A0w6O1tFOQuaJEVsq/kxXLCGGSmDafE6nHFEmyBJNZQy52AGhG0XeCFUfarZZafCgO4AmjUsIudqihaTOsosGgTRPu28Zp3Zq8AxsOferGLby/5OKktrdLp9gQbu3AqIpdIixPbyTs3B4o5Le9ucImSTx2p8vTE6ruRP0xRcLrpduzSKFkHoavx4nOW1lcpqKsB0XovT9Pk/H6gqy3XcbvSheq+rkXMEBCgcYFJep+tVtoZHaXnsOay686ra6LuG5PrW4pQwR2xElGeV3IsOt9RFI3G/LNVS817yUquSTQSSTapd7RlsVfejumWdxI0Zc1lZtRb5NDHiUUEdIdJMWWeYbVGD9asPUNqkVv8I7CnC208KhRHsXFD3lmbqB0fvjikoZqlz0TKLZjesQPNej4iBmnvTmqfhZVjMhCnjA9a+a3pbafcsZASPevmnWcSkSL+dq1sNv8AKItkaqmW6eY7fhI5qe2yyhdxJbikpmMSDNH6NP595AvONw5J7VpwmjPlHg1vTlWz0+GFeyqP1NSMwf3JNCtIeADgCpo1Z+M8+ppuHQlJHXaozgZ+VdMscgD71PIFhXLHmpLaIAbm7+nyorBriwcQdwwJzVf6m6MsNcgk8yMwzgYWRO+fp61aHGWO1QSOx+9CXQkAKjLe+BU8EJuzyr1pot30hqxt7pR5MuTFKv5XHrj2I9RVF1TqUWkMreYuADnnt869edVdJ2vVWiXFlfJ5kEoyrISCjjsRg5GDj61+cfjBJqfSnXt901PNmeBwylMjepyVIHsRSOeGyO40dPLyOjU+n9XOoC5uBJujQZPvnOB/nVk0y7FxKsCnDscknPA5zmst0+/i0TR7WzXas0qh5CW5xxjj9Kslv1EumaO9y8vly3L+VCGPIUfmP0z/AJ1RBKhuXC4NKbVVln7nA4Cn0HoKtPR2nJrWpbZ0cwRjc3Pf5cdqzLpCUXozHlmYAl2NegvDnQ10+0yeXbDsSOSfQUzDHyKTlSLbbWq2NnFHFEIIj8OxBge5yM+w/qan0qEWwYIAcEEbu5zkH/I80QdNkkiVArdj68ff7UxtdJkMrPwV9F44GaYqmJ3wdnMcSFydvw4we2P94qCwuYbsMbdxIgYr3/KR3FT6npct3ZOseBKvI9eR/wCKRdLWF7pV3dQXMKrDIfNDp/izzSc8jU9tcFkYXFss8ERkHIwadWMXkWcrY5HGRSuPEblex700M3l6fKcjLAYz70UuicS/IrfUbs86ImcgUtjtJiM8kUYuprqtncSyKFurVyrr8qEbqBEi2gc4rzmdPe7Zs4/7eD6EeMfOiol3rgjNV241WTeW3/pUS9WGyIEi5FLp0Wjy90uG8VldFYHuCKz/AKn8INM1QtLFGI5u/wCtW2LqiC4JIIBrvFrtvISC2T270Lugk2jD9X6e1fpNWe2VyqdgPap9D8YvIZbW/QxOCFyw4JrZrme1u42R1V19mFZv1p4aaVroZoQIJu4IqE/ss3Jrk0DQtasNVijaKRHJHoaYXdkiy71A5ryf1Fa9b+GYE+js9/bqf7sn0+taR0d42T3mlQHU0NvdH8yP6Gu/wQ4cWjY7qYJEcgVhfi94r6r0RKGsbKW6GeVjHpWoWXWNjq8B3TIGxzzSjVtLstb+Ly0uEHYkZokk3ywVw+SjeFnjdfdYOUu7GW2xwRIKu2r6rFcscGgoOmo9PDm1tkjY/wCEYqJdJudx3IaiUPoPj6JI9RiSM7gDS+41K1LnO0ZrvfaXMEPGB9KrN/p8xcfxCFB5xihWNeyVTHd1rVnaxjnJ+VRLqMc4BVeKSSSWkYHmqX2+5qKTqGGEYhjJovGkgkiwLOrOSO49qkF6gDbhVLl6kmRyUjPzqb9/yNB/d5c+hodqJos/44csBkDscUPcajFKh3Rhj7MKr1r1IyIY5FAb2NDvrcURbzWAz2BodiOoaSRWUzFmtlz9K5SYdSIOxBFcqKRZTP/Z';
+  "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCADAAhQDASIAAhEBAxEB/8QAHQAAAgMAAwEBAAAAAAAAAAAABAUDBgcAAggBCf/EAEIQAAIBAwMCBAQDBQYFBAIDAAECAwAEEQUSIQYxBxNBUSJhcZEUMoEIFSNCoRYzUrHB8BckctHhNFNikkPxGIKi/8QAHAEAAgMBAQEBAAAAAAAAAAAAAgQBAwUABgcI/8QALREAAgIBBAICAgEDBAMAAAAAAAECEQMEEiExE0EFUSJhFBUycSNCUoEGJJH/2gAMAwEAAhEDEQA/ANShuJbn4ssxPvTO0hcMCck571DpmmsFAJwfarBZ2WwrmvytOab4DVsZaTO8A74qyWl5nuaQxxKAKLSTyQNvf2rV0+rngXD4GYquB69wzdmwKjC7zk80uiujIwGaaQRkqMH60/j1EtVLgnoZW4wvwijoZ/LwDxSqF2jOB2Fdb2/EcZYdxXpsep8OPc/QJZFugEJzxXIbw471UIdcaUjJwKMTUwDgNnNXx+WjPmL4Oot0Go7PWjYrwFQwP2qjfvMZ4ep4dcKgDdWhp/mIXUmDRoFrqOwHBNS/vRufi/rVJt9Z3nIajk1EuBg4rdhrsc1wwUiyNqZIOWoZ9WVVbP3pHNekIeaVT6gNrAvSefX7P7Q0uC0proU/mH0o611kPzn7VnRvhuGG70xtL0xrndSmn+UlOVMhpF9TWWGcGirfWyTyaoS6t8Jy2D867Ra35X5myK1l8hD7Bo0ePVNwHNfTfZB+KqFH1RGucMa+nqbcpwcUT+Sw/wDI6mXR7tdxO6uW94M9+RVJTXtwxu+9FwayBxuzUw1cJ8pk0y7RXgY8n7V2N2qt8qq0GtLs713/AHqrg/Fz9adjmTXYJZRfISc18e9RRwcmqddasVU+W/xfKk79VXcLEE8fPmr4OWTiJDaXZoZ1QR5JYAfOhb/qmO3hJTDnHoazq76qupFOZBikk+uO2Sz5z7mnMWlyy7YvPUQiWTWepprxm/iOF9t1Vue63ElmLE+9ASaj5xPxE1F5gbJJOPnWri0ygjOyZ3N0MY593BBI+VdZRt+JeflUVnc7M4AHzqHUeobGyYJcSoHPZc81a0osrpyQbFMSPi7V1E6lyKQXXVVs4VIGDM35R70ZY75lDk4PfBokr5KpWhwJBtOOK7JIAaEBIyQT7EGvozjjviooFSoJkIZTjvUaPlBn3qOafHbucCvqjAFSnwQ5chK42n2qPdtPHauoYleDXHA2Yz6VXYadolM4dcUOZDu5OKWy3rWkoZ8CMnuT3+dGWV/bXx+BwT/nXcIsVy7J2u0QYLivkV5G7Y3g49KlktoyD8OfnQUkSRkkLxViUZEu0NYrvb+U4pna6mo/vWBH0qri4VF718F/Gez/AKCk82jhlVSRfDPKJfIdTtXX4nA+VdoNYtPN2KdxzgAD1qhyaiiJ+f8ATNH6VIZmDR5c/wBKws3x0cS3QHsefc6ZoyOksAx3r4AE+lLLS6eNQCmD71O1+Np7UmpxXY2FvIMHHaoGXjOaDa+DZxXEvRjBxUb4M6mTSA7T/nQzEkEDkVL+ID8ZrpkEnGcUhnjFrgJcA6hlxz+tThsjNd/KUrivmwDj0rHeNwCs6FQecUXEFZMe1RFfhzXxXI+VOYfwd0C0T7FAPFAagcowokzZWgbrLg5pzPtljpEJclZ1OEAE4zSKOYxyEY4q06i6bGA71W3jyx4r5zrdJsy7ol8Wcabd2HFCTS8GizEAvehZIwd3vSjwzkc3wAGTk8etcr60I3GuVT4ZlIstLUIgz3o+0jLPjtUEVwhAA71OtyiEmvPvHXIMaQe6qnrQksmGOD2oWXUVU/moS51SNASGq2lJUdKa9DK2vH83ANWa0ud8SEnn1rOrXV1WUktinVpr2wZDZFafx0PC7ZUsv2XU3AA5NLNSvUCOMgcdqR3PU6qh55qp6z1STkb+9ehzZN0NqQXkS6LKmqJCTlhj61Pb6wXJ2txWXTa7K2SGzUtj1K8eBn71krDKKoW8rRqZ1MjBzXUa8iN+cHHeqFJ1V/DxnBx6Gkdx1IUZiGxn50UYTT/E7zSZsdn1FGWyX4+VNE6mRF+GTj2NYHB1TIqk7zn2zRUXWMpXDGtTE80FwyxZn7Ntn61j2sCTx6ikF51lG7EK2P1rKrrq1ihUMcUpXXnMpYuTn51OSWTIqkwXmfo23TuoxMeHBOe2asFvqYZfzE1h2k695cud9XbS+o0ZMFhU4oyiTDI/ZoH49e+7AoK+11IkKhgTmqrc9RomQDSK71kyPkMe9NvfTRa5ui3ydRsGPxVJB1Pnu31FUf8AHGU5AoW4vnXIB+1LLE4O7KvJI1KLqRBg+Z/WjYer4ewkG761iT6rODy5ro2qTIwbcwPvmm4ZJrpk+Vm8L1Sg/wDyUysdcM5AVwQfnWAQ69LnLOSfmaf9PdYtbX8IYeZlgMc/6Uziz5IyV9HLL9m73F/5MIdpAvt86rOrdQpg7toz/M2BXfWZiywyu2IymcfOqtfWsRc3lwScflBHb6D3NfV9DhxvGpimXK9ziFtqDXOdp+H3qMr5xx3X3zQVrK11IVAwi/m57V9up3GVjbavof8AWtxVHoTa5D42SMlQwyPQeld42Z2zgY9TS+1jEUJ7/Mn/AH3o1WxEXP2zXWVVyDdQ63+6NKnmQDcqnGTjn3JrzW2qXk+sz3kuqBnZy2dhx357kVtniFE91oMwjUycgYHYnnv8h/3rzZ01YP1F1w4STzUtZNhLyNsJzzwKwNY3PPGKNvRxUcUpM9DeH0EupqtxcQK6DHxtgHPvtyfvWmKcIMY47VWNAsRp2mxxk7Nq/wAhJ/zppBLI4IVyy/8AyWtaKpJGNN7m2OIQZM9vrU8Q25VvvSaGWS3ctk8/0pms29A3oR29jXMp2+yS6jXgjk1yNsoAe/zqKWT4FPqOa+ROSCPY8fagZKSYQDwcc+grqxwMcH/WvoHbjtXQo2ck/SoC64Ata09b+ykR2fBHJizkfqKxfVeo77p/VpEWK7VVPdAT/wD5zmt0FyB8O/n5c1kfjP0jqFzYTalp1wEnj+IAKQfuKVzpuFx7Q9pZJTqXTNH6I6hPUGiJOTuYDBOCP86bTJuyQRz+lYj+z11zd6pLLpt+DHdKCCpOQcf1FbVPujkb/AeM+xq3TT3xTB1GPxzcQSaMlWCnB9qX+SRKSEIkHJX0Ye4pjKpIIHI9hQyXDF2jccjlW9cVoJiydEE4Xy87ih9GB7GoNM126sJnjclwp545x7/MVLqjhYid2xm9fQmobeMPCsxXEi/AfYg0EkmuS+EtqLro+vm4Jj3HGMjmiTqDknnNVDRrWSTUxIpxEq8n3/8ANWRYzISe1fNf/IMkcWRLH2aunbcLYxivD61Krl2yO1CRRgD3qeIHn2rzWLUzf4sdSGEA45NHwgY7UttQM801tm3YAGKfhmcnTBaOEb1IANDkOhIPIpokIAP+ddHiAyK0Y4XOPLBFwmPPFdWuAoOOKnmRY1ye/tS2eQHIFZ+Tfi4DSs4978R5oW5vtykZoedjzil43ST/AJvhFZM9bOP4olokwZWOe1QS2yLkYFH7lj4OB86HkKOx28/M1m58v32QhULRpJSoBouHRlOd2adW1siRhvlXd9uw8DitHRaOEY7pcgybKldaQUmYA8VymdzMolIyP1rlVyx4dzIRg83WCx8rIAPrQ8vXWOQ+76Vh7dYvMv5yBUJ6tZOA2f1rHfx25CG42m760eXH8TFLLnrTcceYWNZR/ax5PhLfavn783NkHPzqYaBJ8o5cmv2fUW9QQSPenNtrzMPz4FYdb9TPG2MnFWXTuqm2DgcepNPYtIlydRqN1rm2E85NVW+1N2clmPNJxrzXJ+I/ao7q43Ln1p7xxSOsapqmBtBqUXgUc8n3pBETjce9fZb/AGjHrj0oPEmCOp78oOG4NAT3+Rw2aVm5eQd6ieYAEE1bHHGKA6Gcd6xzzREN05yMZ+ZpPbtg9+9NYH+Dirtlom+DvJKxz6UK0rKDzRJy2c+1RfhjIjZ4ApOeO3SISslstSZHwTkVYoNaaOMYPNVSKJUzU6TnJB7elXwjwWRLhDrbSjLEmiUuTI3Haq3aMNvBpvaPkAE8Vc48Fq5G8c5AwDXx90h718hCgc0UoULnGaSmqKmgNrY98VDJD70zQAg5FQToASarhwAKpFKg4qK2OJwXlMaqc5Uc/pRcq5J9KhW153d8VepUgGbb0prKdR9PooGxYVARGbLYGR/pXTWv40YC9k7D/X/fvVE8N9TNhrflynCSIyDPqf8AYq76ypVJkQnDqNjfI85r6R8HrN+HbLtESW6pAenyqY9isFQfmapEBurgNysCn/7YpLps6F3UnMMZx3/M3oP9TTdbnzA7E4RV7j/KvVrJZTKFHaa58x9qj4BwAK+rP5pKE9uAF96HeQqECgB5OwHoPeitHtt9yCSBjtR3aKqoQ+LOqjpfw11O8ChrgxlYV93OQo++KzPwK6RuNN0uOWaJzK43M7kjJPerV4+3qX91oWgD4leT8RIvOML2zj54+1W3o7TooNNiiRcDaOTms2K8mdy+hxy8en2/8mMVkEI2kK7/ADamVnA0oDZ2/L0oiy0y3tMyMN7H1bn7Chb/AF6O2ZkGF9Mn0p667M/sapaB0Ib17E1EqNBvjPODx8xXLO9Se1jy4LEZ4NSPKJZgCfi9xQ3Z1UCpICEjPflc/XP/AGoqEDY5/wAIPPzpdORbXeCQASWGfSjreUCJ29z2+f8As1DOQVbyiZN47HipWRHBU0ot7wQYjOcLwB70vv8AqiC1uR/G5yFwOcn2HzquUorthxi30h5NbtANyIW+gpZqtoup6fLDKoyy8bsGmunaktxGCzAMf5TwftRFz5flFtozQ1fJK4PM1vat4eeJtlekmK3uZPJdmwqkk/DgYHrx+tekr1leESL2YA/LmsB8culIdXLyxFEnQ7g2du3HY9+DWxeHesDqToTTLt2WSRoQkhU5G4cEffNL6d7ZygP5v9TFHJ76YRJISuVO1lPIPp8q6T4ciQYHYZ9j/wBq5dR+WXPOV5BHr7ig1ukKlskr2YD2PrWjuM9ROuthZrJmxgj4WU/OoNBn87TlBJbb8JJ78H/ea+ahODA0TH4iMf8AUD2NQaTBJAyRKcyGTP1zQymopsuUbjRc9AtTFaPIeNxz+naiFn8tyPTNdbiZbK1SLPAAFJ21Vd3fI+tfFvnNV5tU69GziShBJllt5RIfbFMIl9u1VSHV0X8rDPrzTe01MOneszTZUnUmXpjiN9jZPamNvexqO9V5b0MucjFdPx6YPxdqeeojDmIXDLeLwMOGqN53IOM4pFZ3+VOTkUdFqSqMZ+9buDPvjbdANUd55HZTk0tYnmj5bpSpIGTQMrhsk8VTnakyU+AGd8AjuaFYbIyRwTXa8kWPJzzS83vBBPFeT1M4RbVnK2TG4LghjgivsdysYOWH3oGS4TB5yaW3V+oO1WGffNeZy5Zwe7thFot9bjcmMtg+lFCcMpyeKoX4+FvzNhx61Hc9ULZIymft8629H8nOEP8AUVlbos186Cc/HjiuVmN51k8lwxDnFcpGetm5NqIO5HizY3OCwxXEguGORkj2NWoaQpVhjmusdkIl/LXtN8ekLuKEMUEy4JQii4dxp7HYmSPBTvXDo7RnIHFBaqyvaLIbcnk88050yORyABxXeCxYDAX+lWLRdMwvxD7VCdkPgksbD4M8k0TNbtGuQpwKb29usS4AArrcL8DZFSyplf8AxRTIxigZrgtnmidQcICRSnzCxx3NVWwNwSLlgpyOa5ExmJBBr5BCznBFN7e0QLyMH3qYXIHdYPEhX9KOtpscGoJYio78e9Q+aUOKaXRy5G6uGHJqdnBjAXkCq+dQO7B4phZXgIwap92WrhhAXIIPeueXgD2qTerngVwfGwHoKtXAYZa9sU3sht780BZQqOSaZxTRxZwKsQadDK3kDcCj4vX1BpNBIoJOcZpik42cGqMiSQLGMZQIQf60vu5Ai8VE1xhuDQ8s27POaznJLgC6PpYFDk813hXjGeK5b2/ncntTCCFE4PFMYouRX2Q2+63lEqHa6g4I960Oy1B9a6ZaYY/EQ/w2x3x71RZFXado4p10bqpsLqWJj/ClAyD24rc0GZ6fKn6LYccM6QMYpvL42xj19z3P+/nTO2vI1t0DEsCdx/8AlQ/U2lm2kMkJ/gTDcDj09qg02NZUy+do5/T2H1r6Hgy71wHOKoaQ+ZcytM2AcbQB2A9hVg0qPa5JH8p5pbYQhIuDlm4HypqJBaWzyE4REJJ/39K026iIP6MG8QdXS+8V9soykKCNcjIzk/8Aitd6VuYo7IOwUKi5J9BXnXqeeS/6xlulOWdwc1rPTsN9e9PSqJRE5QgFe4ODzisHSaiTnPi+TV1OnShBX6EvjL+0foXhjJHHqEtze30wzDpemoHnkGfzMScIvbv7j3Gcbtv2v7HXdVjt5tD1TpppmVLe61AI8LFuFVyhwMn1OB86yn9pHpbVOmtTmvmZ7p7x0P4mfJZWjLELnIwPizj5D2rCfx1/bWM0+rqkoeCOGCINzIQuxcAc+mffP1pt5XJNTu/QKwLG1tpr2fqr4cdTy31kjTH1xsJzgn0rS7Cc3CFhg8nk/wBP6f5V5z8ILy6v9L01mziUBXLH24J/XHf616J0y1Nuo/mBHA9+9X4E1aYjqoqMuDtf/wB2xKDcpBz7VywTfJtcnap9O2aJutkkI55YDH3zXy0BduFAOTn+v/ina4EUJNUlFvJMznaAcfKvJ/jj4t6l0FrlmNEsBqurXG8QxTS7IoEAZmkdj6YXt67flXrfrLTXksmWIbpXICjsCc8g1+e/7WsGoaN1bZX7RTRaaVlsri8WLcI9wUDn053g/wDmkMkFe6StI1NL/a9vY+6I/bS8QIUlutS6f0jWdKtmUXR0qR454VJ/MCSVb5ZHNe0/DHxV0fxF6et73TbkTJMgfB4ZcjOGGeDX5L9DaXe32sW+l6dIt+8spCpDHvMxOB2OQQAM5xx3r9LvAHwuj6N0i2ZT5UoiCyAZwzbRk/0oFklJrYuP2XTwwUG5vn1QF48agtvYvGWOWyBxkU//AGZ71l6NksHcsY5WZdx9Ccn/ADqieM1lNJrjxO/mJG3AxwKtPgdJ+7r6KHOFmVlHpzgH/SsvFlf8x3/gYlBLRUv8mvXsPmo204I5U/Oq/d4QSOq7fQj2Oex+9WVyFOw4/wB5pLrEIEcjg9xzj1r0D64MaBWLuc3EYQE7oHyo9cfzD/f+lW/pqz89jeSLwvC/M1WNJ0WbUb6OJfiO7lvYZ/39q1RdLW0skiVdu1e1ed1+sljg4x7NGEE3ZWNelKozKTVKm1CQysudoHrV91e2LxsoFU270hhIxIr5Lqa3tssyWC2886SFt+V+tWHStaypVjtI9KrwtnTK8gV2BMIOM4pKLV2Uxk4l1g1BJFIDZqRLtcEZBqlW2riBjucD61OvUaA4yB86fhCxiOZsvMV22PhPFMLSYuTuPaqPZ9RqvAIYe1NrTqSL+YgH5VqwyRgqkw1NMuAY4OOKHnuAo5Iqvt1XEON9AXnUcLA4k3HtxSOfXcOMEEq9sM1K93FsN9KTNqJydzfpSO/6g2Mx3ZJ7Uhm6hLuTkZrz04yyO2VPJ9FvuL07Sc0DM7Pzu+1Vk9Qs/wADGjE1mPysbgfrXLSJ8gbmwyeUopG6q1rEh3ls+lHS6msjd6Q63cq4IBq+Gl5CQJJejd+YmuUmebDH1rlN+BBcFWFtEqnGM1JFpsbp2H2pKdSPOaIstacNtGCPnWooSsX5H0ekx7R8OAKnawjjiPwih01RinAFSxXm5fiIxVqjwSBtDhuB2o61ulhzQN7cqG+Ag/SlM1+yvgVyVANF8tpo5k3EgfKoL+4BjIjIPFVu21JkjADEt7URJeyMnbA96TyZa6KxNq0rg4zS2CVllGaYahMP5vWggqkg1fgbkVuI7sG3+5phzilFlIYx8h60ab34eCKd6B2k0smwYOTS2e5wTiizOXQgmgzbb8kfeo3Xwg0QCXJ570bZze2OKDe1ZSaJt42j7jmrVBJWwr4HMNwM8+lFR3KEHsDSiN9ueK6lyDnJFRHa2cmWS3uwQeaJS5X6VWLe8KZAOaM/HhfmflTMYpoNMetebezVJDqrLwScVWZL4t2yM1JDejABPIqvJjtcE2Wk6qD/ADCvqXwbseM80s0XQdU1+XbZWzzA+oHFan0z4E6jfWoe+k/DP/h70vi+PzZ3+EStlYsrpSnBoszqRmr1H4BTx52agAPTjtRFn4H3SSET3yMn/wARWpj+K1UVWwhKjPhPlMKMk+lfLW1v5JsQW8jP7be9bHpPhLpumyiSeZpyOwNW6GysbZVCQICowDitPD8JmnzldB3RlnT2l6jf6L+FvraRWXIVmHt2/wA8fpSmO2eK4EZQjDY2+2PetyE8IU8KP0qhdUaSi6h+JgwA5yyj/OvS6fTPSpRu0dutAVpEqJnjOMZ9qWdW3n4Xpi7YNlpAY1x7HP8ApRwjYQgO2FPB+Y7VX+rZReReQuPKhUE/9R/8f509qMm3EynFG8iMZ07SvxGsu7LlVNaz0+fwCLxujIAbI4qg2MJs9QlydxY9jV/0/M0ICnkDtiszRxio/sf1km2voU9eeH+k9ZWMlvqNpFeW83dJF3Z9uPf5/wBaz7p39k/ovSLxNQttBthcI29JLpnmMeOxHmFsHt2rZI7e5fIRizD3P5ab2FpI/DjPPOOBmtnGt3aM95ZQVJi7ovo2CwtnTkyFwd2OOPlWhQRBAAy4AHpS22AgAUAAduPWjkuCP5ce1MpJcIVlJzdskMCowP5ue3z55rrBGI5CT2Bz8q55wJyOPTH+/wBakU5GRye1G+iKRJNGk8WCvP0qhav4f2l7e3TTonlTEs25c8+/tV93Hbg0LOglB7Ej3qi2GpOPRl2k+Fej6FNJc21lY28rd2SFYi/yYge/fvVzsNRtzCltbGJyo+NogcA+wyBX280ZbzcrbhGe4U4zX2006HTIvKt02qO2WzS+Te3+g9+7tmX+J+mb7+WRwBuXIbjNdOiLaa108XkQJa0cTkAfyj83P0Jp14lhl8lv5W4IIxT/AMK9DgktLkXMeYHiMZ//ALDB9a87qGsWZz+jZwy3YNrLdGYrjEqncHQFWpRrEWUZT9M1BoF4beC406WTdPYyfh298fyt9COacxWH47UoQeI85Ye+K25Z4+HyrqrMqMHu2jjoPpv8JbNdzp8Tj8pp9egNnA5NfReLbwLEvwgDAoa4vFUbiRXh9TnWS22asUoqkLrqzA3Fhk1XNQt0DHint7qIKnmqlrOpKoY7sYFeL18oJfgE2kuQO8t1XJFJ7plVTmhrrqZB8BbJ96W3GsxyAneCPr3rIwJzkJyaIdSfy1LBuKRSaoUcjJwKI1TVVdMKKrNzPlic4rfi6VAxdFog13avDEfrRsGulBnefvVGS9APLcV9l1IbeHwKGUHIs3F1ueoWbJDZpdL1I7E/EcVUn1lVUjdmhJdTDIdpqlYqOssd3r8zscNwPUmgpNcJYHdVe/eJcFSaDub0oCQaPwk3ZbpNYJQkHJrouutk7myBxVUi1HcnJ5xQ8uokM2G4oo464OSLVP1GsbH4zS+56qSUFd39apWp6uST8fFJDq5Vjl654mmTdGjjXkPdxXKzxdUVhnca5ReFnWz7BdsxBYfeiI70oxwPoaXQyIF55oiMq57itCCssod22qlhjNTJq7DIB49qSIm0llNTWxLyDcOc0UlSIcR4vm3B3AAV0e0d8tnBFE2Um1MdhROwHJ96WfPByjYrileNvpTBb3MZG3JoW42RsRkVA06quAfT0pZ4tzOeNHLhWnY8jNC7WEmB6d6mVj6V9Re5J70xjioFbikT2rkrg0asPANBRssY74zRMM28YBqyrKqoMjtg4zRMVqFB44965asqrjvRodcVdCCXLAoAmtO3GRXwxkLgLR8gwK64Vl4HpXTTrgGgSO3Y53c5r5LbE8YohJRGxD12edW7UutyJXAALYg1OsYU8jmpt+fmalXBUnFM45Ow/QBLHyccfSrZ4deHWodWa3DmFlswctIRwRQXTXTknUmrRWkasQzDOB6V6w6X0O26S0SG0gHKryx75r0mh0n8p89Ij1bDtA0HTulrBLe3gRdo5OOaNk1PH5cYpRPf7mOT3oU3IB4r2+PAoKooXlm9IefvQj3ri6ngnk0lWcHP+tfBMQTV+wp8rGs+oBuzc0Kb3APxZpbPcZ9cGuWxLN7ipUOAHlbYd+MkkBCg5+dQxWctwJGnHwgYphZ2hlPxDavvUOr3Kx5jQgKO+KXyU1QzjtcsousXFzBMYkTcFOFx61V9ZuFtYGVn3MTlz2BPvVp1V/4jNnI9DWe9Xz7oHReTjOKxc8pOLscxRSdoX39p/wAwJB6H1q46Bas9sh7dqqrzefGsqHO5QeatfTd2JLNV9VOCKU0GeOWKkMZfyjaLLa2ysFAUkD17im1ughUAD/zSuDUVRADy/wBBTO1dnRnOe3evUY5JrgxJxdkgYj1xUkMrKpyufmTUcUyQMN/qcVFq+vWlgcO6Jxnk1fHnkGq4GkLNMp+HBx3zUhVkztU1SV8X+n9OndLm52sBg4GR/SirXxS0G9WOWG9TZNymWHNWVxwdRb42OOcmuNHySPWo7PVrO6svNgdWB9RUiltoJGKVaoLiiPaEUlRlT6YoaZAVJGOPWpbmU25PGUIpXNeLg/y/Qd6CTSQMU7oo3iDGLu8tI8nAOTVj0a6j6e6bWRs+ZM3b1xVa1hmvteZV5CkIoq76j0/Jc6faRKD/AA0HYeteS+QTyRlt9m7iTUEitXOpJPfJfWwxcMBFKv8A7i54z8x6fU1a49VbTII/MyJGHfHpSdei3xllJPqadW+m3S2ot5D50S/lEi7iv0NZMP5C0707fHoLZzuOr9V5yCTn3NQTdRqUJMma6y9MyOxyDQlz0jMyHaDmsjJos8uw2nXAr1XrARKw3VnnUnXn5kWT4jxxVu1roy8dWCqxzVFvvD6/EhJhJFZ0/jsjdMUlGTYgXXnlONxNFQ3+9fiJNP8ATuiHGBNAR8wKf2/QsMy4AprB8c4LglQZnN5dNGrMmW+tI7zV5MflJPyFbJP4aBh8C0F/wvY5Jizz7U6tDL0D4mzE5dWuOQI3wflQUmoXvYRPz7VureGHp5Q+1d7fwr3d4v6VatE0glhkYItzet/+Nq7ia7zxE2a9BDwnTHMVd4fCqNST5X9Kqejl9B+JmCwWd7OPhjIzU50DUJP5RXoK18NYkbPl9vlTWLw+t9vMY+1GtHKiyGH7PMsvTepqPhUYoNuldWlJwpGflXqj/h/AT+X+lMbToCzQfFED+lAtFKxhYlR49l8MtZvCcNx9Kh/4L6uRkyH/AOte4Lbomwj7QL9qNj6TsV7QL9qvXx82R4YHhRfBjWMcSN/9a5XvROmLML/6dPtXKtXx0wvFA/Pqx8PtXmX8oWm9t4XauzAbv6V63sPDOKLG5F+1OrboO0jA/hDj2FWLQyZO2J5MsfB7UpeWmI+i0w/4T39sN212I9dtevLLpi1hXHkr9qKn0K3KY8oY+lG/jJNWDUTx1F4faisoHltj2Ap3beFuo3MRIikJ+lepIOnLQNnyVz74p3p2kQr2iUD6VGP4pvtnUkeOH8DNaupCVhl/Wjbb9nzWGGTAw+pr2emlxgcIPtUi6cg7IPtTcfiYe2Q2jyDb/s9apjmICjIf2eL4/mUD9K9arp6n+Ufavv7tX/DVn9JxFbjE8n//AMd7psZA4+VHWn7PUsXcA/pXqL93KPSvn4BPajj8XiQOyJ55sfAZFH8QfpU114IQIpx6V6BWxjB7UJfWCBSe1W/0/FVA+OJ5svPCpbRuIyy/0o+x8Kopo8m3X61r9/axpnsaI0i0DxgBaVWijuosWKKRjM3g/AzH+ABQ0nhJGmcQivQR0nP8tdToqkfkFWP4+JGxHn+Hwpj3Y8v+lPLDwftGXLjk+1a+2iYPCUZbaCWPY4oI/HqLO8cShdJ9DWPSxknRCJT2ajb2/wAuSTxTPqq4WzbyYyNw4OKqhLyk7jx7V6vQYVjx0jL1L52oKN4rHGa7LIp7nn3oHzo4uBgV2WZJATmtlJGfQf5mRwc4qN7gqCfShTOFBINRCfecDNC+CAhWaaQAHJNWLTbERR7nxQOkaeE/isM5o64usAqOMUvKV8IuxxS/KQXJdBVIXgCq5qk4fec0xMuIzuNV+/fcT7UvIYTsRalPwcVSuooQIJGOCzD1q33zLkgcmqnrhWRSAcnHc1kZVaHMZVNF1LzII4nBBjJjOD7Hj+mKuugXQAfHI78is0Jey1ogDEU4wT2CsO3+/pVl0nUTY3ioxDBuCT2+grx+mzS0Wrlgn/bLlf8AYx+jStOlWa4UBuCe2eKtrELDwQoAxVG0Zmh1GCMkBXNW+6lX4UZSR/iH8te+0z3KhDNFRdnTU78WOmyTMqlVUsc+w71+f3jH466n1H1BdHTJDHaiQxbZsnAUkEY9DkGvcvWSC56eubWKURtJCdj5z6cE1+TPX2p3OkTXNvIk6zQXEm7YpYsxYnlsHB9f1prNOUEnEjTwjK9xoA6x1ia2Z55miTOd0Hb1zweQDn0IrvY9X6vAkaacvxbiGeVQZAfkRyM/L+lZDoXUt/dxBsuiBxGwkyxwR3BA5/04ojW9b1mxt2ayjkdMgAxISee/OD8v9iqv5XNUNPCqPXfhP49dQdOzQWTyfinvW8iNSxIWT357HkZxwfr394aDey3Gi2c10FWaSNWcKcgEjnBr8pf2atf1z+3GgW8lu48+9j8xLlcuyNhWwD6Y5yfUDFfqpp93ElmAeccKBjv9KsxuU43ITzxUGtoxuQJYHIJ49aqd8xtomkc/CPXORVnjkaSGUkfDjgVmnXXUv7h0RbjYW8yTYo3gD14JxS2omoRdnYo27Fg1+3suptKgnbbJe3aRJnHJJ7V6St9OR7RG2g8e9fn5Yzt1D+2H0fpTrcE29jHqhXYPLUKHbk5POVA7L37nOK/QKy1AJYqCeR71l4qyR3rp9GlA6Np4/wDbrodPUdk/pXf96gV2XUlYVbRcQDTQQSU+9RNaqPQGibjUP4RxS06goBJaoqK7OJhp0coOVFDzdPQuD8Cn9Kms9RSR+4NGm6jf+ah8cJc0SkV2TpqIZwgH6UE/Tscb5UBT8qsss3fDZpfczHnFUywwXokWxadtOCA1HRabEV5Ufah/xRTNdlvzQxUF2TQSuiwd9oqRdKhXsooP94MD3qSPUCAcirE8b9EUwo6bFjsKiOnRDPAoeXWUhGW4qBNZW4bEZrm8SO2thn4GJfavhhiXniug3um49qg3ljtHJoaivRyTJT5PPauyTRL611TS3lHYiuHQ5OcZqNnugkEi8gUd64NShH81BjRXPBHNSLoLEdjU/n6QSSCxqkGO9coX+z5+dcqN2T6DpDaCCMDnFTi2jPY0lttYicZ3DNHRakh7MDV8ZxfQDVDBLdAe/wDSuXUSbcZoNbwls54+VQXN2ST8WPlmibpEJE8ZVDzTOxlTaTmqnLdE5+Kp7W5YLgtyarjkV0RTouS3CD1FSrfRgelVIXLH+Y1984/4jV6kBRbf3nGO+K6nVI/TH3qsBiRnJNdo35IwancwlEsJ1FG9RUf4wEcGl8EW7nbR8MHoFrk7AaSPguTntml2r37RxMSCAoyafxWRweBS7VLBpImXbn9KiV0TGrMi/tmL3WjaqcEHBBrU+molMIJwaxvqjoi5s+olv4Mxgtzj1rVuirwC3jSRviwBzWPhySWZxmaGSEdicS7Q2CvjiiV0qPPp9q7280ZUEEUdDcRe9bKozwD9yofSpJrMWVhLIB+VfWm8U8Rzgik/W2ox2XT1024glfSipUBZgWtag11qlwxYEbyBil11ebVIU4HvQss/mTsSeMk80NcXS7zxwK1cMklRkTVtthcGMlnYljU0lwqKRn+tLReh/wAp57Cviy4J/n+lN7xdoYly8fwtTTSrF52Vs8Clenxi44C7frVltMQRgCofRUMXnEUe0HHHpQHmeZIa+GYEnPeuKcDIAFV1RZdny4lK/CDSe6I+LJplcPnNKrlxtY7c0uWiK/4zjAHvVXv0LBhg47nNWa7IJbJxj+lV7VH4Y4wPSkMsRnHLkpetWHmwSE5B/lxwc+9K7K8luYWR28ueM4Y+/pkf0qy6kFEPJO4jvjtVC6tvbi1tYzZApOh+FsffNed1+hWph+PEl0xtXI1rprVxcx2bEfxYmAf5CtAkuSZV2EuDz5ePzCvPXQHX9tqUohkP4O+xuntWbkDPBHuOc/bNbFp2u2+oQEJOpKDZlGGc/wDen/jdS5Q2ZOJLsqnFyO2u3YuBLHA7xFeXjUfG3y+Q4rxF+0n4U31xrq630/b+XIIz58asdrc9/bP/AO+O1exeoNRiiSQvMkkUeXMn5TgA4Hz5Hf8A7Vl/UOp6WIJ0ubhAjAbiW3ck7fXv/wDv9dvJlUlVnYMe08HzWepabZST6vbXCFoyEdx8Cnn7HjFfdIg1/UbO2fQ5bqGcgRtLGxVZOPyk5Gex+xrfus7XpzT9L1EvrENz5gz+GZN28M2Tx9GGfoaXdJ3nTt1bQWiX0UMUaqPIICqg/l+pzuP65zkUn+K9j9Wi2fsqeHDaHfPresT/AIvVmA+FiR5I9h6f7+3tnQbxhsVx5owP4hGFA/yrzP0Y9jp8ETwXkNxPvBDEnlD8QOfc8n9K3LpTWIbuNUEyuqgERx8ZHpz/AKU5jyRS2mfqMbfJpL3a21lPIDkbC2SeMisJ6gvZepdSgtVldLKGT+IqkES++OPn3q89Z9c2mmwQ6THKg1C8YIsCN8QHqf0FVDpaze81pnnVjGnYEkjucf7+9eX+W1E82WOjwdy7/SAxrZG2XToXw10PTuqn6uOno3Us9oLNr5mYsIN24RgZwBkA5xn51sUal7cHntVU0hUaIKnBUgVebKJfww34zWzDFHBjjjj0i7Bcm2K2jYZxmoG3x5OSMVYRZRv618bS4nBHeq2h2ioXutPEdmCc1HZSi8bGTmn9zoERbtmiLHRbdGyRgj2pFwyOXfBcoqgGLSXhTeDXeKznf8oJp8sCkgZyo9KZWkcWQCBTUY+gOEVmPR7l/Qiph01cOORxV6gjiAHAo2IRewq1QBM4/sdM+eMfpXP7C3BHFagnkntipQY/TFF4osjcZT/YS5+efpX0dD3XI5+1atvQDuAK6eZHz2P6VHhgdvZklx4fXMoPJ+1fLPw6mhOctn6VrZMTA9vtUJeNe2MUH8eF2EsjqjMbzpa7iiKqfT1FI7bQr63lJkAIz3rWtSmTyz9Kq9xJ8R4GBVcsUbssjIG0+xYR/EOcVN5KjIxQ1xqyWy43Yrrb6nHK3BFGpx6s7bJhiWeedua7rbAfy19N6oTOaHfVFXILAUdoCmyYwYJwtcoBtWQE/HXKjdH7JplGh6fmn/u3K0wt9BngHxOSa69Oa7DqKqYXVs+xq2EAKDkVnYYRmrG5N9MRR2cqg96FOnXU0hznb71ZXeMR5yKiW4j2HsKvlBPiwEkAWnTry4yaZQ9NhD9KYaZMhTORRhu0UnkUxCEUihtitdDAPIqZdAUjtRX4+PJ+MV3XUFH84qykBbBk0TaO1d10pUPIFSNqkYBy4oZ9Xi5/iD71PCOVh8Fkg74oyONF9RVfOtQjP8Qfeug1+H/3R965SSB2stcbxL611nSGYcEVVW6jhA/vR96jXqi3Bx5mf1qd6OSZ36h0lJlbKg4qhX+upoMqgttwfernqXU0H4d2LDGK8v8AjB4gM2qC2tSWcvgBffNYuuaSuHZpaWO/iR6T0vrKGa3BEwOR70fF1pAnBmH3qh+EHhncaho9vdanI5kkUN5eeFrW4PCrTSvMKn5kVfp/5E4JsWybItoWW3WUW7PnVD1p1Glx0zcbSHJGAc0+Xwr05eyAYqv+IPSMOkdNztADwOeafisi/uFm01wYYs++5MZPzNRXMgkmKjsO9Axy7LuYk80LcTnc7EkA03hy06Znzx2uAkXQ80op4HrT3SU8xBu/pVMtbgvc4XtnnPrV90aJvJBwF4rTxO2I5I7RzaRBFAFHFsJS9HKtRDSALTIscLDOe9SLJuOKEMnJweKmtm8x8UEuEGkdrg8cUqvCxBC4HzpndYUHHJ9BSq4yFJ9fc0t6LRLeRMoYn4jVZ1LO0mRsk9selWO9JkLf4e3Paq5fxhmYlgcdgKUyF2J8leu/ic7zx7VVdbtTckgHYg4q1XcW0Mfl2HekF5/EhfGN27OKQkPwMi1OwY6p+MgkaCZG3I6Dlfbt8qqnhr4ja7Y/tHXVhJfytazozNATiN2Ee4Er6ds8Vp2rWRs3YbNwJyCeKpVv0FFF4h2PWNhJsvogYp4GG6KdCpUkHOVYA8HkcDj1pOUWoycF+VOi9q1Z6TuNS0zqcQxRXPkzuu54WPDHAPGfqKp3UnhYl4rja8kY+LLNnnOcis+6x1i20HSLq+uLxdOihiYpPJJ5YB2AAA++R2HJ9Kxfp/8AbP6o0xZbGB49WtlbZC8yldy7+Bzz+UBcnHftxytosuXUqSyRao6M3F8GkdU+D8016Li3tfNDP/FzGNyrkj19hjt7etFdJeGct1fBrmJBbsQjRJHjblRknA+YGTxVjuPHzUtKhlHUPQGqQskRczWcYuoWP/VGSAPXmq5e/tldP6PbRva9OXBeUNiNsIQQSCD7EcH9adWMv88jYelPB+w0pXu72QLAhDb5DhRtUjOT9a66744aZ0r5mj9J2I1bVVXbHcyNi2znlRIM/FyewPY5FeS+uv2iusPEvpTVYIrw2IDMRZwHBeMhsKp9SMAEdz6ZzirX+z7EsvhxYyyEmSTIYseQwY5/XmkfkNS9DhWWKu3Qs25v8iy/s9dQ6pf+PfUMGuebs1ONb+ESuWBYN5ZZS2D3JA+RNeyNF0wQorrwGGc+uK8jdU6jadDax0h1OpSOWJ7m2k5wSjqfbuBgn5HBr2fo9v51sjIQV7jHqKY+O2an/wBpr8mq/wDjYnqPT9Fq6eT4FBxxVma4lRdoHAHvSrpy2QKrMMFRTWVRuPNaWV80i/Tqo2fYbyVe/B+tFR6my9yKVtHknmhZRjPxf1pVyaGkyx/j0lX4iAfrUT3JUEo6/TNVrcefjrmcg4fmg8n6D3UN5tZkiOCf1qWHqgWiFpG349BVfaQDu2frUTCJwdxFUOcu0wlL7GN54uw2LkFH49hXS18dLeR9ojk+uKrl/o9rc5OVzSSTQY4CSmP0qh5cq9li2P0apB4vRSDO1hUx8WFA4BrKY08peaFvL9E+ENRrPk9s7bE1s+LY/wADUM/i+yZxEx/Ssmj1pUYjcDiuz61E3fFT55/YO1Gov40YBHkuDQkvja65/gOay+XU4iDyKh/EJKMg5oPPk+yaX0aRL43Ocj8OSPmaX3PjC0o4tiP1rOZzgtkYoRpBzih8032wkkui46r4jz3SnEZT9an6e8Q44j/zMpVh6Gs1vLlos5PFCR3wLc0KSbsJSaVG2aj4v2lvHhFaT6VXZ/GmHcf4Dj6ms4nvUwf+1LppkfPAo3b9kKS+jQ7rxpjEpxC+Me9crKpYonckmuVXsYW4f+E151P03bIt0k07Acs571q0viFq5jx+GYADvitKtekbCMALGv2pi3RtlLAf4S8j2q5aea6C3q+TBLzxiubSbyZN+8/ykd6Z6R17q2q/+ntXbPqasHVHhdpwu/xDoD8Xar30VoWn2logjgQYA5xSsMeTJk2t0MSlGEL7KQuu9SRRALbEDv2Nff391LMNot8GtjNhbkf3akfSu9vp9qH/ALtB+laa08l/uM/evoxqJOrJ23BAv6Ufb2PVbjkj7VtltaW4H5FH6UWkNuOwWro6av8AcwPJ+jEo9A6pmBy4H6VNH0R1FMTvnx9BW4xLAo7CpFkt0PpVn8ePtg+R/Ri1v4YaxN+e7cUfB4R3zZ3XUpP1rXo7uBc8qKkGo24HMi/eiWnxgvJIyhPBuVvz3EpH/VTXT/B+2tzulYtj3NaD+97VR/ern61BP1DZpGxMy/ejWHEuQd82Z71N0vZadp8oSJVAB5PNeR9eSyl6uM8YR2inGeM9jW9/tD+LsGi6BdWWkf8AOarOpRFTsnf4mNeQumLjVrCSS4vszSSHcxYY5+VZGsW7iJo6eWzln6A9Fa/Zy6TbPHIoXYKtMnWOm2qgPcJn614Ei8brrRSlrHKbfdxjdmr50r1c+vKJbidpHPqTQ4dXkhHa4g5sMe0z1+vW2muOLhPvVS8Tddt9U6cmhtZVYkZODWVWSCZQFJz9aZ3UaW2nSxs5LOPetPFknm6RnTcYLkx+7kMN47MeM4rreHzFAXsa69VR+SZGBwAc0q0rVRd2hQth0OMetFHhkVasnWVbWReeSe1aRoFwHslx7CsluJs3qrznNab0/P8A8hGOMYxWvppXZnZ4joSAyHBrs85/SgWmCtxXDPmtAToMSX1PFMtPAMTyfoKTJKMHFO1Bt7NFUZJGTVc/olHSVhk54+dLbt1Ctnv7d6JlkYE7l/Sld5cBNwI2k/KqW6Rwl1AFy2DtHrkGq9cI3xA8L74p3qF2iK2O/wBO9Vq81F8kEgD50hkasYxJkF1HFIpRM8DGfaqzeWzRSNuPwc+nfvT5tRTYA3wL9QKXXxWYsBx8PGPSlnyORdCG4gW7tJAVDY4IzyKRWlhFBM6yFFVT8JOMn9KsVzGu4x/zYB47/wDmprfRIAyGQqz4oNvsvT4EFzp0GqRPEbY3COu1hIoKkexFULU/2aekdQLu2hxWxdi+LaV05PfCqQB9q3eC3hjXaqbQPlX2S3UITnCn71zhRymedrb9mPSdOuY5LPUNYs9pB8u3v3UfQ45/rT+48Iba7sXt7i71C4jPKefeyy7DzyNzHAP++1a7OsaqQBucnHHpXRIlfKonI4Az3qlr9h7jy7P+yYj3UqQazPDpky7ZIWiDyDnsHyB/Q/rWq9B+Elv0lpcWl20lxLb797PNJukLHGSTj5VqkWltLIAcDd7e3pTvTtF2SAnBOMfpQTxRzR2ZFa/ZW5qJ5W/ag8J76x1Kx6osvPlsTpj2TQLltkwclcDPG4SN2H8te5/DaCa36V0aK5DR3IsYPNR+Cr+Wu4H9c0Ppumhrddn5hggGrRpcG7yyVw47getaeHEsa/FcCE8m9bRjrmtL0/p1u5O3zX2k11stfF5GGWXIPzqt+MNvM+naf5AOEDE1lNr1XfaV8O5tvsay89vIzUwxTgehBds+cSmoZWds5c1hJ8YBaSKskpjb1ya0HpLr+HW1Cs6ksODVCdhuDRa3DDs7feoHd8H4j96nimWTIyKjuMDParNpXYHK7gn4jXQM3OCa+yyARkjk1Ak/t3rqXRNnd5DyM0HNcFCeanLjcaX3bZfAFVuKCTO4vMjnkUPNFFMDxg1FgqDXxZhzzQ7UFYPJpyjJWhmstueaOmudgyMGoI7hpc5Wh2ILcxFqEUitwTiuttdyWsTu3IUZ5p3LCrk7hzUFzp8c1q6Dgmh2BKfBVP7VCa52k4yexp6oWWMOMcj0qp6l001vcmRlO0cg10TWJ7dtgYlRxiuUKCu+iw3UJbI7ilj2oUnAqSHVw65YkH512a6UgncMV20gXTKQDzS25ZkBJ/pRl5q9rGSGljHyzS2SaK9VvKYN/wBJqKZKBjqABOa5UR02TJ+E1ypph2j0jH49aSnPnDApnpP7RXTt0rxG9jWRe6k4NeThGFiY59KxnrO7uotbLWkjRtnAIOKhSnXEi2Ci+0foF1T4vaXeQ4guFfnuDQdh45R6fGI4bZ5CP5s4FeTOgHu/wKS3cjyNxjJrR9OuGmGFFV41JS3N8kZZpralwb3F+0BNITutGUfWiE8f2TtaMfq4rEVgkI7nFQXFwLcHcxprfNexXs3sftDzAYSx+70LP+0Fq7f3NnGB82JrBodbGSFGcUbHrEm3OMVO+bXZFGuT/tBdRAfDBCPqTX228aepr4/miX6A/wDeskj1MyNyKPttVaFcrxXJt+2R0au3iP1JMv8A6oL/ANIodutOonyTqD/pWdJ1QyHDPRMfVq45cGh/7Itl3HVWuSH+JqExHyOK7/v2+kB8y6lfPu5qmQ9VRyHAfNNbPU1uP5hRRddMHkIvLG3viWkjBY9ye5pRqvT1stm7RoMge1P1CuO9cltwYXBOcj3qy+Dk6PJXiqkmm3wmXOUfP0q+eDnUUt60CqS7NgBQaT+NXSt3q8xtbJXa4kbCKoya1r9nfwWbobRYtQ1h/MuSNwVvSgw6aWafHQ5nzxhiV9my6HbHT7ETXB+MjODSDqPqLfNtVsKDzXfqLqZWDKjYUD0rLdb6jMkkgDcV6GMIaeG1GBcs0rH/AFC631szJ8QxWfRrNZXxkTsTgim2i6+1zMbdiSnzo7UdL2rlR8wayXy+DSj+Kpi17gSuGix5vrmtA6buGbT0ywZh3rKbljZXgkBOR6e9X3pa+8+2IHAFPaWdSpiepjcbRbxPn61JFKpJyCPpSfz8E81PDdAE5NbMZJmW+B9p8X4u7RAMjOTVhuGHPsOBSzpa3LwSXDcKeAT601lCnPtUdsBukLppHUEgAf8AVSLVbi5WMlUDe+B2qwSBWJ9BUMlqJByB8s0EobiFKjL9a1q4gDb0AA4O4dxVdOsQSMwbAkxkZORWn9Q9PC6tZUVdwZcMMdxWLdT9OyWRO2dl2cBccj9RSM9POPK5HcU4S4fAxupPOZS5CoihsKec0judXe0DHB2jPPrQFvqUtvH8WXwNtC6nJHf6eYmOFbOVHBpRxY5GlwSy9TQS3MPxiNjxvPfvTkXMUSLKJJJXbHcHFUCPTI5biIPcFIBnk43fSrHBcrHtVCfLHCr64HzoVGT7LVXovNtdAIGJyAM4oHUNdBkEccbSvn8o4/r6UslvDDaQQgklxnPy+lEWllEXDs2R8+P9aJxlLhAJpcsaWKpeKGkjwBzgngHnvTW1t49qhxy3PHelluLi4dltLZ5wvJESkge2T6U60HozVrvdJPdQwNI+/tuKj2GOKhYZPhIB5ElbYZaWsW84bJ98U9s4UxuIzjiiIOivIgIeaRiOC6kAf5URF0tNEmIbkkj0dc1asMo+hOWRS9hmlzpCQrEYJ4zxirfpqxygFeGPcYqpW2lTKds3PzU4q09N2ksMm0sTGORmmo2o8lS5kqJ+qrBL23iR+QOO1Z5rHQtvcgmKMKfpWka3dqgUE/pSc3sYBzisnLW5mvjdR4MH6u8PHEMiG3BJ7MBSXo9LzpucLJnYh9a9A3scd6CCMj2xVO6k6OFzA5txsc/LvS1JcjKm+mcsvESzgQb5Rv8AbNWbTOpIdXQOjqc+grzJ170B1DFumtpZIwpz8PrS/oDxQ1LpzUVsdSikVhgb27GqlN7v0XPEnG0+T106K44PFDGHZnnJ96reh9ZwX9tG4kUkgcZpzNfl490Z4NW74iu1olLYJ5qF0BOTUEV6z5yM/Sufi8vtxih3ommfZ0UxnHelbo6N8qZyqyk57e9RKFdTxzUOSZyQrkbcSDkCu0DJH6k0cbdSDx+tKr2WK2PxNgig3IkNdg65HegpJtpIP3oCfVvLiOw5pFNrkpcjuPpUqUUEkx/cTK6kNhxSaewtpHyFGaE/ejtkkH9ahe/bnnNdviFTPt3YbAdnIrPuvtYv9H02Z7XfuxwBzVzkv5HJALH5UvvbFNSjZLiIupodyLI37PG2oeKfVd11C1s8MyJu4Pp3r0z4V3hOkxT3j7XKgkNQ2p+FlpcXRlggUODnkc1XNd0XW9LcJarIqD0FTug+ixK1RtQvo3yVKkVysYtuqtVsoVikhcsB3IrlDaI8TLvr2s2+n6fIdwRsVkunQv1DruACy7sk0o8WOs2bVFsbeUklsEA1oHhPpv4WwSeWP+I3q1UxTasuf4qjTenunY0to1IwoHrVkt47bTwckZFVubqBLOPDyCMD2pZ/azT3kPm3oAoo/j6FWmy6XeupjbHQf4SbUDkqdppbadSaEgB/ECQ04j6z0xI8RycfSitt8g1XQbYaDDCN0hA+tNEsrILgsD+lIYtdt78ny3Y/pTK0aJhySaNP9A0w6O1tFOQuaJEVsq/kxXLCGGSmDafE6nHFEmyBJNZQy52AGhG0XeCFUfarZZafCgO4AmjUsIudqihaTOsosGgTRPu28Zp3Zq8AxsOferGLby/5OKktrdLp9gQbu3AqIpdIixPbyTs3B4o5Le9ucImSTx2p8vTE6ruRP0xRcLrpduzSKFkHoavx4nOW1lcpqKsB0XovT9Pk/H6gqy3XcbvSheq+rkXMEBCgcYFJep+tVtoZHaXnsOay686ra6LuG5PrW4pQwR2xElGeV3IsOt9RFI3G/LNVS817yUquSTQSSTapd7RlsVfejumWdxI0Zc1lZtRb5NDHiUUEdIdJMWWeYbVGD9asPUNqkVv8I7CnC208KhRHsXFD3lmbqB0fvjikoZqlz0TKLZjesQPNej4iBmnvTmqfhZVjMhCnjA9a+a3pbafcsZASPevmnWcSkSL+dq1sNv8AKItkaqmW6eY7fhI5qe2yyhdxJbikpmMSDNH6NP595AvONw5J7VpwmjPlHg1vTlWz0+GFeyqP1NSMwf3JNCtIeADgCpo1Z+M8+ppuHQlJHXaozgZ+VdMscgD71PIFhXLHmpLaIAbm7+nyorBriwcQdwwJzVf6m6MsNcgk8yMwzgYWRO+fp61aHGWO1QSOx+9CXQkAKjLe+BU8EJuzyr1pot30hqxt7pR5MuTFKv5XHrj2I9RVF1TqUWkMreYuADnnt869edVdJ2vVWiXFlfJ5kEoyrISCjjsRg5GDj61+cfjBJqfSnXt901PNmeBwylMjepyVIHsRSOeGyO40dPLyOjU+n9XOoC5uBJujQZPvnOB/nVk0y7FxKsCnDscknPA5zmst0+/i0TR7WzXas0qh5CW5xxjj9Kslv1EumaO9y8vly3L+VCGPIUfmP0z/AJ1RBKhuXC4NKbVVln7nA4Cn0HoKtPR2nJrWpbZ0cwRjc3Pf5cdqzLpCUXozHlmYAl2NegvDnQ10+0yeXbDsSOSfQUzDHyKTlSLbbWq2NnFHFEIIj8OxBge5yM+w/qan0qEWwYIAcEEbu5zkH/I80QdNkkiVArdj68ff7UxtdJkMrPwV9F44GaYqmJ3wdnMcSFydvw4we2P94qCwuYbsMbdxIgYr3/KR3FT6npct3ZOseBKvI9eR/wCKRdLWF7pV3dQXMKrDIfNDp/izzSc8jU9tcFkYXFss8ERkHIwadWMXkWcrY5HGRSuPEblex700M3l6fKcjLAYz70UuicS/IrfUbs86ImcgUtjtJiM8kUYuprqtncSyKFurVyrr8qEbqBEi2gc4rzmdPe7Zs4/7eD6EeMfOiol3rgjNV241WTeW3/pUS9WGyIEi5FLp0Wjy90uG8VldFYHuCKz/AKn8INM1QtLFGI5u/wCtW2LqiC4JIIBrvFrtvISC2T270Lugk2jD9X6e1fpNWe2VyqdgPap9D8YvIZbW/QxOCFyw4JrZrme1u42R1V19mFZv1p4aaVroZoQIJu4IqE/ss3Jrk0DQtasNVijaKRHJHoaYXdkiy71A5ryf1Fa9b+GYE+js9/bqf7sn0+taR0d42T3mlQHU0NvdH8yP6Gu/wQ4cWjY7qYJEcgVhfi94r6r0RKGsbKW6GeVjHpWoWXWNjq8B3TIGxzzSjVtLstb+Ly0uEHYkZokk3ywVw+SjeFnjdfdYOUu7GW2xwRIKu2r6rFcscGgoOmo9PDm1tkjY/wCEYqJdJudx3IaiUPoPj6JI9RiSM7gDS+41K1LnO0ZrvfaXMEPGB9KrN/p8xcfxCFB5xihWNeyVTHd1rVnaxjnJ+VRLqMc4BVeKSSSWkYHmqX2+5qKTqGGEYhjJovGkgkiwLOrOSO49qkF6gDbhVLl6kmRyUjPzqb9/yNB/d5c+hodqJos/44csBkDscUPcajFKh3Rhj7MKr1r1IyIY5FAb2NDvrcURbzWAz2BodiOoaSRWUzFmtlz9K5SYdSIOxBFcqKRZTP/Z";
 export const portrait =
-    'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAEsAMgDASIAAhEBAxEB/8QAHQAAAAYDAQAAAAAAAAAAAAAAAgMEBQYHAAEICf/EAD0QAAIBAwMCBAMGBQMDBAMAAAECAwAEEQUSIQYxBxNBUSJhcQgUMoGRoRUjscHRQlLwFjPhJGJygpOi8f/EABsBAAIDAQEBAAAAAAAAAAAAAAIDAQQFAAYH/8QALREAAgIBBAEDAwMEAwAAAAAAAAECEQMEEiExQQUTURQiYTJxkQYjQqFDgeH/2gAMAwEAAhEDEQA/APUH3oSYOc1srxWlFVUqY2+AZIxig7aGo5ya2Rk0dAgAue1YE4OK2PhJoasCTXUjgojisB9DQyvPFaKkULiTYWO5oaHms2fI0JE9amKZzBHOOKKNHBeDQWTI470VEBVbAyDWbcUJV4oKJs0B7VrGM0aq4rTDIyKnaRYXzWhQsd60KFKgrMH1rdZtBrAMcUQIEpkH3ooxkZo/FYB39aXtCsKRcDmtkUPFaxXUSmAVM5rKGuBmsqVFEWGDgHjvQCMVjPkk0DfnvRNkJWGK351vOKLHOaF61FnUCB96FGAc0WvrWwfaiT+SA5FAzQu9AVxjFGAAj501HGuRWu+aEc4xQC2K58HGDOa2TxQPMrW/GfWhtHGZBIyKMH70TuBPNCBLDg9q5M4NxRbdiPWgbivGa1knNRZxvGCa1Ws1maCyaN1mawYOayus6jdYFzmtDihBuea5EGgpNBPrRm/g0CpZKC8VlBY4JrKVuoLgSSXuMj2rEuN/bPNbksxuJHFCitQpzS/uZAohJZee9Gdga0gABxQsd+KclwcBHNbH1rezb8jWsYrqO4N54oayH15oFYBgmpVogO80c4FAJ3Gg981taO2yDPetYoeMDIoFRRxqs5HrW8d6wCoJs0O1bHbNb7VlccAJoDMaHxzQdmW7ZFLYQJO1CoAHt6ULdxUp0iDeKDnB54oDS4oiS4wDk0LmjkhUH571vPzpBHc5Jyc0oEgx3oYzsmgTYJOO1ZQdw296yuIFRh7nvRYXv6UczjacUXnPNWGkQmBxihx4z+VAPA71oMKi6Jqw4ASZ5wRWEqAQB+dFjkVvPzqbVA0ZWVrOa0OaGyaNoBmlCoMUQhwTxRyvmmQryQAZMH60GjH5ookA8kCodI4yhBDSVtVs4pxC86LIewY0XfdRWFgGE11GjAZ255NQmvk4XH1oPb86rbU/E66MpS1hTYCRv/3D5Uznr7WyV/nJ8Ix+HvRLHOXSFPNCPkt8kD1rDwKqaDxH1mJgXWKQYAwVxR8PilqSM++2idT2AyMVHsZfgj6jH8lmkkEmk0s+DgGqsvuvtZvS2xkt1Pog7fmaJterNRWSMTzExjuQOTQS02WuEQtTjui0ZroomS1InvxjvUVTrWG6O0oYlHA3dzSFupxJMUTOCcZ96oSxZuftHLJB+SaRX4B70rjvg3GRioONTxIV3bj60oj1fyx+Ks/6j2/1KhqV9E1e+G3GRisqDtrrEnB4rK5a3G/JNMsdL+Ns/EKNE6n/AFVXqa2FfG6nK31sY5fv860I6uL8g0S9rhR6ikj3eGPPamA6/Gob4waJOurJ2PeglqYvizkSuC5BU5o3zvpUYt9WBGN1LDqY2bd2fzpsMqaOHvzOO9aWXaDUek1cx8k9vnSN+rrcEo0hUj0o1O+jiXpcKTjIzWp72O1jZ3faoqCXfWVvEp8uQk/MVHtV6ue9UjeR9DVjGssukLlOEe2S7qDr5IVaO0JDg/jqJaj1xf6jFtZxG49U4zUYnvyxJ70RHMZH5baK0YaXi58mfPUtuoi+7vZ55S8kjEk98+takka5+JnLsBj4jQXRWTAk3fWkctwlmmWcfrVmMIrorSnLmxYrMOM80PPHzpttbsysTzg0qEpzjsaNKhO/5FIU7TznNFIT8Wa0sxKtzjFADhmcg/KjTIcg9CcGhK+44xRSSYU5oLsQpb1pfkNS44DnUJ3rUUg3ZGBikcN4lwWTcNw9M0asMu07SKivkYn8CtbkqThsH1NLrW9yMOMio9ILhGyWX9KOhumC/ERVfNpIZo1JWNhmlBknjt45iNjflWUxw6m8P4Tj51leYn6Etz2Pg0I6uNcgG1YopLPimuXqwxsQJMj3zUH1DqUSKQrkU1fxQyqOSTXzzJLLNVdDXNros+Hq8OPx96X2/UwB5kGPrVNT6pJETtYg0kPUd1krvOPrUY8k4eQVmZ0BF1RGBxICfrSqLqre34s/Q1zrB1RdQOR5jY+dOVn1hNCwYyH65q/HWZo9He6vKOiY9SNzEWOcfI0yarfWq5IJV/YHNMvT+vHWOmTPDlCG2szHn+1NGqRm6BkaZo7ePvj/AFH519G9JxxzYo5Wyvly1whwm1YyEqpyaRtNLK3D8DvxSC0l85mVBsjX8R7Y+VanuJHby0OxPcccV6iMYx6M+XY5hwq8kk0dFIFUuxOB70hgG0qvr86BqEreU6Ix3Y4x71LaSFxXJWfX/itqsOu/w/TEC2cfdywDOfXGSOKd+kNUuOppIzLLIqr3X8Qz7Eg4qiOr3vbnrSLT4Z3jmlfzJACAxXPqSDjNdG9EaUNF0aJeI2K8nhif0FY2klPJOUpPg1NVCGOEUlyTWECFNoGVo9ckA98d6aYbiWRTghh6EAillleOMRyHPzNaRjuI4eVuQlT6UTbcKynnHNCWUgkfLJFExynkfUUHRCVikcA1piSMHPPHFaUHuQeaCQ2ST+VCGlXBGurjcabAbqB1ijQZdSeSPTHNNPRPijHqt6thM6Mx4yDg/oeaml8iX1pLDiNiykcjIrm/qq61Tw762tnmtop7B3G2WMAmPn3I7fnVTNOUKmnwaGmjHInB9+DpycbgcCm6TcobGfpQtO1D+J6TaXsWGEsYbj1HrWpWLAkHOf1rQxytFOS5G7z5Q5O/4M4Knuv/AIrKOE2ZSrL8YHDY7j2NZTuCVIpWHUWmXHrSyCcjsSTUftJAGp9tWwo9/nXw6ceDXa4DmDSnvQGtcc0rj5Q4AzRixsEJxke9Z7XPInoZ5YcZ9aRTBge/FO9wMZ9KRGEO2D3p6lXQLJ14V9QR2sj6Y7FYp+8kh/EfYD9amOroBA0C4Gw9v+frVO2LPYXkNxH3jYMAPXBq3L26TUrEXUTDY4KMR6H1/pXt/wCn9ZtTwy/6Ba3r9htsLlPJxu+Ae3djSiMmMyzS43dlT/bTFpt15bswHfIQewHGf8fnTrHK0ka4PL/FuP8ApX3r3ccliZwaB/eXTdIeCeATThYonlzXMg/lohYlvkKaIsXTsRnbnCj5D/NA8RtWPT/h3qUsQ2yyRCJOfVjiuyz2wcmBGFyUfkpjw20qfqjrjWuopFXyp7llhy2AI1OF9fXGfzq9IT5eIlHmv9CaiHhLp62eiwRKhHwgfWrINzZ6ShLFI3b3qvp4qONB6ibnkaXjg1aWjgbnyD7Glz2QZMj/ALi8j51D77rSGO6KNKFUc47Ej3HvUottUjvI98bZGODnvTvci+EV9kkrZksm1lY8qQR/mh22JCpx+MZ59K1PC0ts3w/GORj1PI/vRFlPjHmDbtH9sVIKHG3lDlxjAVtvNGsI5Moe9M8109rOScc/Fj+v96id54h2660LVG2yAZZm4Cj3P15pEskY9joY5T/Sidy28sJzGm5T61W/i90nBrmiSyyKqFV5LEL/APsRVh6Xr0FzHGA+S3YnsfpSbq5TJpsysMoy474zQTinFkwbhJNEP8BupE6g6F+7ecs8+nSG2kIbJyOx/Pg/nUvmkxuUkqx7H51Tvgnqlno3iXq+kQu4+/Q+aVOMB1Ppz6g/tV0apEFZ3OMY5rtLk3Y/9D9Tj25H+ef5EkjiQB8gMMZ4/espva5eIsHT4l/ce1ZVveiuoMpGygJAOKdYHKNjOR8qZkuuBhsUdHemMZzn618ep0adkmhkG3NGG+AUrUfg1lSNpox79STg81mZbTsWxVPLvkyK3DG0rE44pJbzJLLjP/mnmEqE4ocMXJ8irtmltWVckDipP0TeK63mnTNhJkyhPoRn/NR1ZcggngUXa6j9yuhIp5B9K1sE/YmpIbHh2Pl6rabdzI6/FnYBS2GeW5XAB2YGfoP7f4o15E6n0hLtF23MQ2uPcD1/570HShukWIdu/wAz6V9G0WZZopphTqh5sLUKU/05Hr6VBPtB3/l9MWVsj/jkViPkOR/SrJgQxgE8kkCqX8a7ptR1kWq4KRAJj5+v9as+oT24Gl2wdHHfnTfgevDHqOL+GoSfjVRlR3zXPn2lPtF9RaffSWWg3cnT1vFjz9Q8tTcSZJ4i38KAAST37e/F+eHdgumW6eYgIYbSSM1A/tBeAEXiRYk2kq212hLRysu5TnuCPb+nzpOL3ZY0rHf2VllZzJ4b+NGv6h1bZw3fUt31Bpk9wsUr35XfE7AbXRhg/iPIOQRkiu+egdYN1YxRISdoG75dv+frXHHRH2Odbsdcsb/U7+3itbOQTJa6dE2ZHAwGZ29B34FdueHvSsmjwRvIADJEu71GRVmGKTnvar9hWaUVi23ZM4k8yHIBU4pJBBidmJHDE4/59KcxblUypyMGiVttjqc7iRzn61oKPBkjR1Pvt4JbhewUfl8/6V59/az6kabqdrCe6u4bWOze5+62srR/eZCwA3kclVGTjPevSLU9Oj1Cy8pj8PHw471y/wCMn2VrLxK1yS/NzeabqFs7tFcWhX4kbgqysCCMAe3aqk8bbuNX+TQ084pNS4OQfA3rvVuntd0p+lby8hv3kH3qwNwz2tzGTwpQ5G4AE54IJH5+jh6qub3oQX1/EYJ9pDKOdp5qkvBX7Jem+HmtpqV1eXOo3e7bE0sQVUJ74UepHck/QCugurIom6Xu7SEgoqBc47YqrOM0m2+a6XQ+c8b2wXPPZz34bXssXiMNUY4/mEcD0NdU3BEhOcY+dc1dM6OY9eeFVOXPGK6G0e6OqaVZTg4ZowHz/uHBH61U9Nk1GUX8jtek5RkvgatUgMCSd8ADafz7ftWUr1sEQstZWlNpPsowao5jh1DKkk4x61uTUxj4WJpvityqnOSK3LH8PAxXzKDU1Q0Xw3+QCW5py0yy1HV5dlpbSz5P+hSRSzw38NtR6y1iAiJl09TmSU9se1dWaHoWl9K2EdtaW8abQBuA5NaGm9Jlq3b4RDKP0zwY6iuLZJgqREjIRjg/nTmnhH1NEF/lxMD7N2q6W1bBOMY+VB/i5Oe9b8fQNOl5FboorCw8GdTkZTc3EcSk/EByamen+Geh2KRmWITTL3Y+tPUuqZQ8kUia/PPxZq9g9J02LlRv9znlSHCLQtKt4Gjito41YEHaMVX13pDaVqMqoAyd1Py/5/WpabyaRCEH60ivbOT7k80mPOzlQTV5444qcVRMZb00hie4+7K0spwkSk7ffj/xVQdW2zyaqszgEs+58+5qw7+5mmaTzsLGpBOPUgkgVCtW26h53PKtg/WszV5lNpeC5pVsbY7dPlXtQFAz7GnkedIoQx+aqngcn9aYukrZniI4BXjNTeytAQByfc+hq/ge9FTKtjZrT7MzKFKbFHcAVJLEpAmxVwB7CkkKCJCoXGKGGYfh5OewrTXCooXY6C4BU445BHz5rEKt8sUkimJYAoBn50qEZXkDn2FMrgmw9GAU8YpFeReaGPb3xSiNmIOe47gVp4xye4Peq74ZPi0Re+0q6viE+9PFCDyFHLAHtmh3VukOmywoONhGWNSF1VFwQNvuaaNWZYbSZuANp/DSJxSuQUHboqjpHTje9TjapGZApGM+tWlGq6Jrmo6eXBidvvcPp8LH4sD5Nn9qhvh7Zi3vp7yUnEe6Vj7n0py1XXE1GWO4CmO6gJaJm9QeGU/I/wBQDXkfrVo88b6fZtZo+5GiW/cW1K9giONjYLH6VlJ7TVn0+zgmdTukHwkcjFZStd6lWZqD4QrFjUY8nL8Vjck/9l/0px0TpO91zVILRLdhvYAntxXSFh0BZQNlrdX/ACp9ten7TR1NykCRnGM7aqab0+TkkyXipW2JumdGtOjtChsbZRGwXLkep9aHNflic0gvdR3yMVOT7UlSaRvxAAexr6LgwxhFRRlZJtscluiSRQ/vAI74puFx3GKxphirO1Iriya6AU5ORWrTdK/w803Jvnk2qM5PepLYW0dlDub8VLbUUFGG9im0tQo3y9u4FMeuXwdnHIHYCnOe7LxsQew4qK6rcFt2O9UsjtOy6qXCIxrU4jic96gNtc4vLyKT4S22QfuP8VN9S+IsX/Sqy12ZrLVVnBKo/wDKYfU8fuBXlfUlJYXKHa5/gv4+ic9L3TRyyIT8JGQfepna6iyjy1+Js9yef0qstA1NRcorEZIxkDFTfRbnzbxA2O+PrV307Vxz44zg+GBmhuTZMIgywfGeTWSatFpEEstziKFVLeY3ag3Mu0D4Sxz6elUV9rbrm96S6GSOxmMc15PHb8eqsefXg45/KvSKVJyZnRhukoolWs/aL6c0qVgl2k75xtAIH64x6UjtftZdN388kJV1lRQQkYLls/Tt+decB6lt21KVpr6Uvv5bcSCfz4pQ2uwbJFa7EUDD8cfB/X8z+9THUQauyw9M0ernRvizoXVsMiWN3G9woyY9wDD/AMVLYyXQNkMD6ivLHwl6se46gtbLRtXa3eS4SJpZ3ZVZWyGA+ZwFH/yGa9Oumo3stCsICxlaKJUZ3bcSQMEk+tBvWS3ETPG8dWw6+me3zz8PoajHUd8W02dU/E2FBzUo1Yq1mGPIBxkcVWPiF1Db9P6beXU7Ew2kTTOqDLcAnt68CqWoyNRoPBBXZLegtBe60i6ZQf5nwcU4L4f4ByvrSb7LPUp608NrbV5ImiW6mnMYcYbashUEj0Pw1bT28ZJw1YktLDL90jWjyuSvbPpqa1gMKMyxHumePrisqfG1Q9mH6VlD9Fi8hjpadOfHhkxUM8Q9QSynWxiPpzirnWGNFLcYA9a5x8QtS+9dT3ZUghW2jHOK18UUplfLJ7GkNz3CwLuIySKIjvJJ8kDav9aQXE4ztLn54oIugPwHJ9K3IyVGO4jt97ZcLwaLFy0khUZzTak+XGXKt7U96Xb7pBI3K0V2KY86JbKkPmSA59jSi5ud77R2ot5/h2g4HyohQN27JNJq3YadKkDnn2Rke9R6+LEMR+9O904JJzTLfOAh55qs1aY5OiMam5CsAefeoD1HYLeRvG2SD7dzVgX6gqxbn2xUUv1DM4GBgYzWVmx3aZdxSIpZ6gTF5Z+GeA4YD1Po351ZPTGqLdNp9yuBlgjAn1qqdblTS457xADMgwFz3HsfrTv4edXWmpqHgkwdwDROcNE/rkfX17GvM6fHL07U1/xy6/DHeC+JLnM5wSrgev4cZqkftK9MN1/0Rd6cm2K4ikE8cjcKrLk4BHerTW9F1EXTa+QAQx/p7fWoR1PP5lu0YPA+EeYNxB5zg/LivcxypwKccb3nlnc6REutubqe8W9ik2NbsF25BxjPHH1FOMllaCCe2uVlkigwCLcqGwRn4eDzz611l4ieFematqCXdrY2MjNxKXZQQD9T9Of0xVSaN4X6Tb69qaMVnbzNiwSzhliIAXA/3HPI79j3xmqLXPZqJKhq+zL4f23UfXdn/DIbwaXaTLNLc3p5JDAhFwMA+5+vNep2jakbq2Vd5Qeoxgk+1ci+F2gHphTJFGkUYCgpEow+fXA9eDmulOmNRWVEbIUrhWlPLH6AfLHp2q5jmqoz9RB9kw1+5S20Ul8KQ44z8655660rUvEi26ws9Gd47m9spbC0aWUoiyMmA24Zwo4OQMirQ8SOoYfuK6cj7pWXzZFXvt7enbvSbwx01fJFw+F3DCqP9IzXmdZnlqdXHSYvFOT+F/6RH7IE58Bekp/Djwx6d6emmSe60+xjinkj5V5cZkI4HBYtjjtipxJeybj3pP09DuDKR8s06tpu7OMVry4LuK3GxAupuhwSSKylUuisynBGayq7cl0OSsktp1fDcQuvmhvh7Zqgepb/AM3XLphxvlIAroqTw9020glaKPDBTjFcxdVYtepJ1z8KyMBg/Ompyj+oVNKXQG7cGTYD6cmkUV3mUqh4HH1pHeXB3O5Jx2pPpExlugOApPGfWtHHk3Izp46tk30y2WVVZh+WKkVqqouAABTVYoY4ASR2pdby/Ca0l0Z4fI+ScmtrLkBc0lebJ4OKHbMXkAxUPhEpA7g8e9Mt/vbIUDHzp5uxnIUZP9KZb3KIeKq+BxHNSDoCBjP+41Er9vxhW4J5JqU6gQVOXGT+ZqL38KkkKcgVQydlrC+CJa9bCWFkQA57sRVWajHc6brxvbCY280XwZAOGHqCPUZyaty+HxSKRjIwKg2uaXJCXlWPerfETjOPes7JFSVNWjQh8DB4B+NGtan4jdX6JrNx5+m20zPDERzEGkIOD3wM8A1dOraXF1PvlsdQ82OPG3Zww5B5H6VRfS/Rdto/V97r9iHSXUIxHdwEZSTBBDqO6tkc+hz781FvGfxC1Tw3s7O70v7/AA33nL/Nt4maIAYGHf8ACMjI9Tz2qjLJnjnWOMLg65+P3O/TZP8ArTwnvZYpR59wHlwcBm7DsODxyo/Sq70fwju1vI1ksNk4YtIXDFj34HJ/zzRPh19q7q3WobxtVm6fmaBEC2+qXgs5ZWIOSjEFTjHIJHepbc/aa1a3N1LZ9ERXckSqyPaXUdzvHrzEW7cH6Z9qvPG77LCytLosvo7wge0kE8t/JHYxqGwXKqvxbu/5U5634y6P0Ta3Om9OQSa3q8aENOpAiQc5ZW7My4/CP7HHJfWn2kuseubTW9OuLlunIfLylpFldhHBVieRnJOcf5Et8AI0Phvp/mkNNkq+Wzlgznv+ff1zVDX6mWhwrJFXbSK8m5vkt37K2v6n1tp3Ub9QzTz67b37QvLdf91o8qybvyfj/wAV1J05Y/czHGAAq4G2uUPC3qvStI8fJNGsriKT+K28YuhGc+XcRxykIccA7FBx9M12Po1mfORvxA+lX/T8cJReoqpTpv8Ago5r3ImOmyNbW+UGc0qi1GUNyCKLXykgVFIGB2pPJtOfi/emylyaEPtikO0WqkfixWVHZmVc/H+9ZSfcGJkzPivFfRvCIHVnBAJFc6ddYi1i4lGdu4nJqyDPHploZZMB8fpVcdXyrfxyTr61Y2TUFOfkr71KW1DC063lsrhvh7GklpdiPUYkQZ5GaYNN1U2l3JbSn4GOQ3saWwS+TqSvI2FJG2mYZ0yMkOGXDbzH7qoPfFDSb4OCaa7S7BgXnuBRglPbOa9AuTFoXrISe+ce9OWmcrJJjgcUxpIyCn+3iKaeinhm+I0E+qJQCaTk85pm1CY7CAB+ZpxmRVz/ADNo+dMGpXCxE/8AqE/xVebpHIY9RiDE/Fg+5NMkxwWVQrZ7saP1a7SRiomEh7YH/mmC4naFXcuFIH4QfWs6Ur6LmNUhNqtmpbzQOc/qef8ANMUyhoJBIPhbsQMg07S6luwJjsbjg013NxH5qfENjDHHfv7Umky3FvyNVjaMrskUDSEn4Sew7/8AOacT0u92jLcKgRhgqqjBFOlpdIHGIfLXsrMOad4mDKcnj+tQoJoPc0VzqHhF07qBY3Wj2VwT6vbIxJ+ZxRVp4VaDYRCK30q0hiQYCJAoXnORjFWBJchnITHBoMFnNIcN8LYJIJz3pLig9zKi1L7PXSOp3q3M2kxRuM5WEmJXB9GCkA/nU46Q8NdN0NYbawsoLa1jIYQxRhVB98Ad6m1rpOXGUPHfNSPTtKCMGVBxUrHu4aEzyqJT+n/ZxubPx+0vrTS2t4tMe5a9vkdiH8z7uYsKvruJDH6n8+tunV7ZGDGOajmmWizomMAjsRUv0i3KJLuyGKEZrSUNsW0UlNzkk/BBLDxCjkvp4p5NvxnBPtmpDF1JZSAEzLj3qreo+iLpbmeW2B25JqD6udd0yJzBLjbyVYmsBxaNpKMlwdKrLFcpujYOPkayqJ8MfEW6mlEV2Sj/AIWVjWUS/IDi1wT3q3qoEMN3w+1QqHqdLiR4JDkNwoz2qN69r5vJ2AbIFD6a0C41S8STBABzmtTUZ01tRWw4dv3MW6jpOyQyhc85FN9peGO+Ec2MD8J9anutactrZLjkqOTVYXplbU88BBzVWDTVodd8Fv6fe+ZZxkcjA5pUl1k8+lRDpvVvvFr5O5QVHYd6c47qR5SuQF+db+LJaRjzxtNkw0tfvd5HF35yefSpZOmBjgf2qM9Dx4juLpyCSdi/L3qRPJvBw3NPT3Mqy4QimjDZUYI9aZtT0KO8Ukgn9qfigHck0EZfgDPzrnBPsFSa6KU6v0K4sZt0Cu64IYcZz6EVC4tduY5Hiuo9pGOW74BrpPUtBttTt3jnUjPG4DBFUX4l9DXPS+69iH3mzB+ORRymf9w/vVSenXcS7izf4yIxqV0t1HNJG25sfCT71EY5dTa6gjjJ83JPwn4f39KNvdbjtAxGNpGSAaZ9K1/+IyzujjykG47TwPT0qjLHyXoS4LBh1CRpYyzFmTAHPBPyp2u76SQmCIndjnmodo96kkyndu8sFm+QHYfmSB+dPFvexvNJIMbye45ovabJlNIetNsRbjz5fx55JyS31p2tb2W4uhBa28s525Yom7b7D60+9FdKQahapdXu+4ZxuSJuEHtuHr9O1TKx0+KG4BhjSKI8CONdijHOaatL+StLP2R3T9L1J49727RHHCStg0629teQIPMtXGTyUw1TJEQwA5wpH4W/56UG0ZJAfLYSqOMj+lE8EY9MqvI5eBp043CMGQEgd1bg1PtJk3WJkbIJHrTLb2gZgyrg+1PF433Sz2g4AQt2qZLZEPFzKxlnSGV3DHIzUf13pyy1CJlMYLe4o0STys2MkZoaiRc7h+tefeWJsJMq3XOiW0XzLi1i3Hv8NZVr/d47lMOgOayo3/AxP5Oe+m+npr+WMyKfiOcH1q3tO0eXTrRFjhCDHJrn7pHxHu9c0SxuoWEGYwd1WTYdS6pe6duN35i+6tWfPNJ9rgsOCSJvfWRu4Hjk744qs9Y0ptPu2WVThjgNTmuuXlvMA87fEM5JpJqepJcNi4ul2jk7qZg1ag/u6EShaDtJtkts+V+Z96cI73ZKRk/rTTp2uafHOII7mN3fthhRutXP3SLzQowTz8q9JizRlFSh0Z8sbtp9ludJybdDjIOCxJPNPsO6T1yagXh7q8F5okYjbOGIxnmp3BcAHYnLHgAVp4ppozckWm0GSKsYA7seABR8UapHzy3vTfqmpW+h7JbjdLKxCJEndmPAxTg85Ee4bIiMMScH+vv2pm5WBsaQWynYcAJ+Wc0z31n99DwzKrhgQY5ACGXsR+npSC08RbDUOpr3RY5F++Wqq0ijBYbslRj6K36VJ5LkOAsyEAepqVJS5QLhKHZ59/az0K48L9esxYyNHpeplhB3zG47pn8wR8uPTNRHp7VF0XQ7aJzi7ugJJCW5xngY+tdEfbx6bd/D/TdQaFpYINSjYyL2TKuMH2ycfniuMdL1531IGaRgQw284wPX+9Z+eoZeDX0334k2XovUwsbS1t/NK3F6d7AfiCDgD696sroTTf4z5CjKwnknOSwrmfUNZkuep4ot4AVEjbaflkj5An+tdb+C5juAm3kRw5JHuasYlvTE5ft5Lx0PTitskcKnhcYT6U6WuiyKV3YjIIJB/pTEerLLp9Y0cGSU4J9gMgE/kM1CLvxQu9Y8Yj01bbzb28BkmZfwBsjGf3opZYxaQmGDJNOXgt65083NrJDHKgmAGMMCc/T9aaumNMvdLmure6jVY3fzUZf9xJ3cfpRMnUkGnW8k+8RwQY3Hbk/jXn+/51rWvE+00vq+y0ieNPIurVLlZT7FmAIwf/bn86RkS3qVkwg3FpImFoQkgQ8YOCDRXUuuJpzQbtrxErHNk8qDnmjb+4ggtE1ESqYNm5jnsMZz9K5X1rxC17qzq/UI5LW4tNMmcLFLjHwen596TnyKKobpsTk2joe41GPTbmSNRvUcgjng00XutvIxKttHtUU0XVWtbBopb03DA8SsMnHzocWpxpM29xcBj3Udq83KXLo1VEfh1a1iQHTeDWU3Lai6yy26uPT4qyhUjqRxv4A6ymv+FsFwW8sRkxNuPII9KsfQri4tIX2TOUZsKo9TXNv2e+pXs9W1PpQSeWXuXn8tsr5QU/FnPYYwa6N0eZpne8EmYiPKhWJMhT7jOef80UsaeRxZat7eRdfalLBIc3DFgNuCpx+tMt1qVxFC26RZC2VABIwKkMejQRx+dcSyNnLfzAAfl3FJW0ixuJD5lwys3HMijb9O3NNjpY+UIsrqYSrdmaJ5RcqePLOdv+KkDXOudU6elncXsq254Z41zIfTvnipKNBsrZHjti7O3Jw2QfmSO9ChtrjRD5gSLYDkJImV/TNXoRUeAG75JV4JaPrPTDyJfTGWxUZV3k3Mw9OAABV52fUMGi9P3OsXTBUJOD7KDgAfMmudIfFi6x91S2tFUHaWjJB/QvTV49dRdU3vhZZDS0ebTkDi9S1yZQpPwtjvjkjinrN7SbXJXjg97IlPiy3bHrJvEDrWxu4ZlGmadGJrkElg0zL8EYI4OCcn6fMU/wBz4r6J/wBS2fTE94P4ncrJdeWM58tUfGf/ALD9q4/6G8ZIumfCa9m0gGbVUl+KLJaSLJ5OD3OAM1E+hPHF7nrqG+eVbi4uIzay72wQhPox5GCP3NC9VSS8vsurQxnuafC6/J0R9nvqaPXPFXrXVL6aOLEp3zydsKOAPpg/rXQs2vWw6burlndLXyJZN7DBRAW5PqCAK4s6b6qsujenNYvb9RHLfXNy3wH/ALgBZcfTg/rU18AfHXTOotMg6burg3HkW8kZN3KWedW3FsknJ4OPkM+1HgzriNiNTpnJPKvFHQN7pEPiX4P6npN5F5pvrJo9rnu+3KsPmGCn6ivJ666gi0692TDZMhCsh7qc85r0p8OvEaG/1jXLGSdwdMHlRx5Hl+SAoVxzySd2foPlXm5qvTCX/UOp30sjBpbmSQlZFwNzk8evrVnK1OMZFXFB45yj+zH201uC663hxMhDqCQT/r24H9q7H8BurYNN6XaTCv8A9xnOfiO0gAfpn9TXEWldGWC3MU9ukxu435csWLD6d8/r9KtLpTq+56XsTbRmQqd2XZSAoPcn9v7d6XHLsi0h7xb39xYkfjRqHiR1JdGKS6t7eKRhEkD7VC5BCuM/F+EcGpTpviFYeEug3OqXxF1rWqyebOxYB3A7DPy4+pP6c76D1lo/TPUeoX/35bOe5yTGV+CT54xwe/r602dT9faT1YTaXt0Ykz/IuVYEJ34Py/SsrdljPeuWbN4pxWNqoove++0HqHWaxWYmNrbTyqhW2+BzHkcbs8EEDNT7T9dbqHxZhma6aawsbWC2CEk7FHxEfXLMc1yR0FpU8evxTSzRvY25EjSpJv3KO4A/z7099T+MunW0E9hpF0H1HeZLiZRgSyHk7G+XbHr86GOXK8lvkbOGHaowVHo/4VeLEHUPSmvXEloSumzyRS2wjG0IpGUX0YAevrzUL6z0ZNK6plEf8vT72Jb2zjlG0rG/Ow49VOR+QrmP7P8A4u6p094bda6tqEskdvcQ+VZhzhnkZWDsCe/cH64q4NU1+7638J/D7UZdd/h986XAZ7NfMYplNo7gjaS/bPBHtVqWRzhz2ZUsKxzcodXX+iY2up2NujYuHUEY3ICce+eKVJewRoxSW48zGeBgEe9RLp3V7ez06aCfWJtUCMU8+W3cOSO/x4AYe2R6d6kNp1Np8gWHzmaNFGAFGcc4yucjj1rMlHkjoPh1cXUTtaXExlH4lMwU1lCt9R0K5O522hcZlT+Wyn5uMfpisoNkjrRwl4labF0N4yaXraRqlpqYNtOinaGLcc98Z/PtXROldTCXS7SC3KGKKIyCKJcYY9s4B28AY5PHr3qR6lN0b1BGJdT6Utr5EbzF+8W4ba3uAaeNE13RLZjDYdOwWy9zsQKCa1vpZSad8oh5Y88Edh1G8uZB5E1xIARkCPsABjJ59x39qR6xaskcks0N47qcBTBy3rlc9s1PbPqOaeacpYwxxgAHIUZrP+o7mVXQLbRy/wDvOcD/AIKsLBJoV7iT6KqtWvo8yeSdobHlvCMtn6CjVsdb1GUl7qWxzhtkdsCMH05U1bkPUEiwfzbi2ViBnYmaJutXjkjZfvLyD1EUeMUX07Xkj3E/BUsvSevx3KmK/u1J53Jajdx/9Bj9KI1K08TTBLDZao4iAwUnXcG9ORtwPpirDuL2W2kLW7Xcu7/TJJgD9aLkvrtApliH4if5r5/pS3iryFuvwc8P0b4h208kw0uwvJX+FpIMxl+eARj057VDdZ8GfEnVepYtWTpyC0kjkV9quy7sH3A7115pmu3sLp8VjHFnAYgZBzTw3V9+X2pJp8mBtzgZz+tRDDBchPLJdHHHW/gh4odZXFvLDpZtreJdohNz8PfOcbe/zrOhPs++KfSmrffINJgEqgrueZskHvg7fWuwBr11MGeWS0QHjJwP70TH1HMhf/1tiFU9iAf70SxQSpEe9JnN2keF3i1p8urzvMttJqSGFlhk/Am7JA/pn0pBpv2dOpIUH/olk2fjWWRQR37AGumk6qukuDI95btCcgBIx+Rrd110+Nsd1H5h5P8AL4x6+lFtSXZG9t3RzRb+BHUrSP5enBk3AMokUfsaex9nDq6/I36PCVHY+apOOfc/P/8AlX9/1YbqAMJ5cqdpHl4/OjB1BGG8wXd27beY1k2iuqPlk75LpFAR/Y8v9W8sX2lwo/8A7ZMqP8jv6ZHpmlkf2DrS8haOS3ELEZV0nfMZ9cj/AFKfyI+dXmnWSozIskxGO8k3b96Mg62gljK/eFMqk5zOeK5LH4kQ5zfhHPmmfY3666LluoOnbywvbC5GTHqE2x4W5HDBfiB+g+la0z7F/W12x/iepaJp4DZIsl3MM+uWHP8AzmuiLbqy0k3hriJCDg7pSc/SlMXWFioCP93cE4LbyT9acseJ8uQn3ckekUvefYy1TWbS1ttU60eSC2GEhhZIowOPQL6/tVs6H4YPomk6fpSanYvBZRCOKJyCqAeg+EfXPelh6vtEQ7ZYdo5B2k02TdaWksgJnXHqBGQaCWHC+2FHLlfFDxN0rkIi6zpludu1sRh2x9eP3yOaRjoRoppAmvaUwfnabdCfX5cflimqTq3SmY7rgKW9Bbk/vRQ6w06BtsZZsdmEP+ar+1hTGKWRqx7foUugkbqLTkl94YthGPmMH9SayodrHWdugeVZHCKO/lYJ+VZXOGAle4QMdU6iibbi859QoVaU2fVsmNxkZ/XIf/FQ5royFSEwPdjWCSUvnzFCkei+tB7j7sbs/BPYOqdzuVWQrjJwxIFKIOq5FXdHCO3+o81BLeRolOZmGR/pOBSuBgybjKz4HbPNR7j+SPbomMnVN4eACo7/AI61J1hdgbjJGmPduajNtNbTA5Yk+mTzR1xdWdvDj8Ujdhjn51PuNeTljTFz9Sz3czM88pHpszihfxm/ZXKktj8JkNImv4Y0VYrbAOAC3P51GupetodMvXtt5IHdcYwaVzLmxiSXFEvjn1BkzKFlDHtG1DS9AiO+N4nHGMA1CdA64up5AmRNAw3AnA21JTq1oQZZGZc+gPFKaa4sJR80LX1xWG3bJj5p3pGs24EiNkYn1IBpJJqdpJkIpOPVmoCTm5VmD7W5C+hFDZKiPUVxNEvw5GfUueKUJd3DDLzDB7ADJqMzR3UdoWkvEmCkHBIDftRtlqMYkEDyKJh2Utyc1Nk7ESGW5eHaxunYYxtBwP0pL55CsWuJmJ5whpqvbibIKbNw4wx70b5ojiQ42gDBC9qGVsOEUKnnjLndvIAHBkIP6UWJPurOot/hf/WXzSMz+ZvIA2kdjTTe3t8JwtvcIkSjnI5zS7rkYop8EqtLpUJ2Ab85+dO1pcMQecMPb0qEaLFeteM8127xH0Cng1JI7Bd7MoLMB3Pc0+ErFSgkOB1cRjElxEBnHPGKSPq8Llj96jC+4NNV5vgBCWyFmOOaSx283wHyRtGdyn1onIiOMX3et28fAuUf5DvSU6vFMzlZnXcMYOaTXMKOwIhVGXt71jyhI8SBzgZG1KCw9tCfWtWEbQRostzkjIHoKygvfrKrNJAy4GMhMHvWVB1DdDrS/dgkLxFwDklMf1rU1zPcKA10sYx3TApqtXDgEonA9qV2saSRbii5GfSmOQKikH2YtSSjXzFgc7Sw5/OnGCW27C5Gf/lxSGK0hSZSIlyygk4pQkUapgRJ3x2oV0FSTFaJH6TYOM5zxSSC2nkmMpnRgBhMN6Vk6Jt27FxigwsFO0KoGPQV34OoPklmZwrs7Njjn+lR3qjoS36guFufvk9jcoQTt+IMR7in0cgt2I7YNalZpXO5ie3rUxk0DQl0TRY9Ih2IzSErtZ3XAHfsKXB4YwI44nlPox7E0XcztbRbl+Ijtv59DSYXc0wUmVlDEZVeBUPl2HEWpbzSIcwogJwcnmhacohmaKTy0EYwu5s5pIkQd2JLEqeMnNLIItztliaXQQfNdQ43OYlQHJJFFP5LI0kRC3CcrIU9R2pROwtLbKor7f8AeM0yXmu3TzmH4FQuM7VriUONv1FFqgiQALPglx5ZO1hW36ge2huI7lXyEJDCA4OKiouni1FZY8RvuydoxnmpNc3kptpdzBwV7MoIqU+CHHkV6V1FZahp6Lb+duAG4OoBX5UOe9E6ujRy/AMjGBUQ05GdG/muh3d1IBpVGZVwouJueM7uaUwoofINUu5XYwhxCDhlLAEVI7G9uJY+NynOCrSDkVXUqusUrCaXepxu3cn60kiu5sKxldjvI5Y0Kk4h7Uy0JUnmkzsLD38wUWzSodhU/wD5BURs7mR05Y9wO5+dGwSMb8xk5XHqaJTt0DtpWPU8bKdxjPGc/wAwHNJwZJshY2x7hhQmhRouVHai4kCICB+9MXAu7BKssW5GRmjx6uKykeoxL5R754Oc1lCmyej/2Q==';
+  "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAEsAMgDASIAAhEBAxEB/8QAHQAAAAYDAQAAAAAAAAAAAAAAAgMEBQYHAAEICf/EAD0QAAIBAwMCBAMGBQMDBAMAAAECAwAEEQUSIQYxBxNBUSJhcQgUMoGRoRUjscHRQlLwFjPhJGJygpOi8f/EABsBAAIDAQEBAAAAAAAAAAAAAAIDAQQFAAYH/8QALREAAgIBBAEDAwMEAwAAAAAAAAECEQMEEiExQQUTURQiYTJxkQYjQqFDgeH/2gAMAwEAAhEDEQA/APUH3oSYOc1srxWlFVUqY2+AZIxig7aGo5ya2Rk0dAgAue1YE4OK2PhJoasCTXUjgojisB9DQyvPFaKkULiTYWO5oaHms2fI0JE9amKZzBHOOKKNHBeDQWTI470VEBVbAyDWbcUJV4oKJs0B7VrGM0aq4rTDIyKnaRYXzWhQsd60KFKgrMH1rdZtBrAMcUQIEpkH3ooxkZo/FYB39aXtCsKRcDmtkUPFaxXUSmAVM5rKGuBmsqVFEWGDgHjvQCMVjPkk0DfnvRNkJWGK351vOKLHOaF61FnUCB96FGAc0WvrWwfaiT+SA5FAzQu9AVxjFGAAj501HGuRWu+aEc4xQC2K58HGDOa2TxQPMrW/GfWhtHGZBIyKMH70TuBPNCBLDg9q5M4NxRbdiPWgbivGa1knNRZxvGCa1Ws1maCyaN1mawYOayus6jdYFzmtDihBuea5EGgpNBPrRm/g0CpZKC8VlBY4JrKVuoLgSSXuMj2rEuN/bPNbksxuJHFCitQpzS/uZAohJZee9Gdga0gABxQsd+KclwcBHNbH1rezb8jWsYrqO4N54oayH15oFYBgmpVogO80c4FAJ3Gg981taO2yDPetYoeMDIoFRRxqs5HrW8d6wCoJs0O1bHbNb7VlccAJoDMaHxzQdmW7ZFLYQJO1CoAHt6ULdxUp0iDeKDnB54oDS4oiS4wDk0LmjkhUH571vPzpBHc5Jyc0oEgx3oYzsmgTYJOO1ZQdw296yuIFRh7nvRYXv6UczjacUXnPNWGkQmBxihx4z+VAPA71oMKi6Jqw4ASZ5wRWEqAQB+dFjkVvPzqbVA0ZWVrOa0OaGyaNoBmlCoMUQhwTxRyvmmQryQAZMH60GjH5ookA8kCodI4yhBDSVtVs4pxC86LIewY0XfdRWFgGE11GjAZ255NQmvk4XH1oPb86rbU/E66MpS1hTYCRv/3D5Uznr7WyV/nJ8Ix+HvRLHOXSFPNCPkt8kD1rDwKqaDxH1mJgXWKQYAwVxR8PilqSM++2idT2AyMVHsZfgj6jH8lmkkEmk0s+DgGqsvuvtZvS2xkt1Pog7fmaJterNRWSMTzExjuQOTQS02WuEQtTjui0ZroomS1InvxjvUVTrWG6O0oYlHA3dzSFupxJMUTOCcZ96oSxZuftHLJB+SaRX4B70rjvg3GRioONTxIV3bj60oj1fyx+Ks/6j2/1KhqV9E1e+G3GRisqDtrrEnB4rK5a3G/JNMsdL+Ns/EKNE6n/AFVXqa2FfG6nK31sY5fv860I6uL8g0S9rhR6ikj3eGPPamA6/Gob4waJOurJ2PeglqYvizkSuC5BU5o3zvpUYt9WBGN1LDqY2bd2fzpsMqaOHvzOO9aWXaDUek1cx8k9vnSN+rrcEo0hUj0o1O+jiXpcKTjIzWp72O1jZ3faoqCXfWVvEp8uQk/MVHtV6ue9UjeR9DVjGssukLlOEe2S7qDr5IVaO0JDg/jqJaj1xf6jFtZxG49U4zUYnvyxJ70RHMZH5baK0YaXi58mfPUtuoi+7vZ55S8kjEk98+takka5+JnLsBj4jQXRWTAk3fWkctwlmmWcfrVmMIrorSnLmxYrMOM80PPHzpttbsysTzg0qEpzjsaNKhO/5FIU7TznNFIT8Wa0sxKtzjFADhmcg/KjTIcg9CcGhK+44xRSSYU5oLsQpb1pfkNS44DnUJ3rUUg3ZGBikcN4lwWTcNw9M0asMu07SKivkYn8CtbkqThsH1NLrW9yMOMio9ILhGyWX9KOhumC/ERVfNpIZo1JWNhmlBknjt45iNjflWUxw6m8P4Tj51leYn6Etz2Pg0I6uNcgG1YopLPimuXqwxsQJMj3zUH1DqUSKQrkU1fxQyqOSTXzzJLLNVdDXNros+Hq8OPx96X2/UwB5kGPrVNT6pJETtYg0kPUd1krvOPrUY8k4eQVmZ0BF1RGBxICfrSqLqre34s/Q1zrB1RdQOR5jY+dOVn1hNCwYyH65q/HWZo9He6vKOiY9SNzEWOcfI0yarfWq5IJV/YHNMvT+vHWOmTPDlCG2szHn+1NGqRm6BkaZo7ePvj/AFH519G9JxxzYo5Wyvly1whwm1YyEqpyaRtNLK3D8DvxSC0l85mVBsjX8R7Y+VanuJHby0OxPcccV6iMYx6M+XY5hwq8kk0dFIFUuxOB70hgG0qvr86BqEreU6Ix3Y4x71LaSFxXJWfX/itqsOu/w/TEC2cfdywDOfXGSOKd+kNUuOppIzLLIqr3X8Qz7Eg4qiOr3vbnrSLT4Z3jmlfzJACAxXPqSDjNdG9EaUNF0aJeI2K8nhif0FY2klPJOUpPg1NVCGOEUlyTWECFNoGVo9ckA98d6aYbiWRTghh6EAillleOMRyHPzNaRjuI4eVuQlT6UTbcKynnHNCWUgkfLJFExynkfUUHRCVikcA1piSMHPPHFaUHuQeaCQ2ST+VCGlXBGurjcabAbqB1ijQZdSeSPTHNNPRPijHqt6thM6Mx4yDg/oeaml8iX1pLDiNiykcjIrm/qq61Tw762tnmtop7B3G2WMAmPn3I7fnVTNOUKmnwaGmjHInB9+DpycbgcCm6TcobGfpQtO1D+J6TaXsWGEsYbj1HrWpWLAkHOf1rQxytFOS5G7z5Q5O/4M4Knuv/AIrKOE2ZSrL8YHDY7j2NZTuCVIpWHUWmXHrSyCcjsSTUftJAGp9tWwo9/nXw6ceDXa4DmDSnvQGtcc0rj5Q4AzRixsEJxke9Z7XPInoZ5YcZ9aRTBge/FO9wMZ9KRGEO2D3p6lXQLJ14V9QR2sj6Y7FYp+8kh/EfYD9amOroBA0C4Gw9v+frVO2LPYXkNxH3jYMAPXBq3L26TUrEXUTDY4KMR6H1/pXt/wCn9ZtTwy/6Ba3r9htsLlPJxu+Ae3djSiMmMyzS43dlT/bTFpt15bswHfIQewHGf8fnTrHK0ka4PL/FuP8ApX3r3ccliZwaB/eXTdIeCeATThYonlzXMg/lohYlvkKaIsXTsRnbnCj5D/NA8RtWPT/h3qUsQ2yyRCJOfVjiuyz2wcmBGFyUfkpjw20qfqjrjWuopFXyp7llhy2AI1OF9fXGfzq9IT5eIlHmv9CaiHhLp62eiwRKhHwgfWrINzZ6ShLFI3b3qvp4qONB6ibnkaXjg1aWjgbnyD7Glz2QZMj/ALi8j51D77rSGO6KNKFUc47Ej3HvUottUjvI98bZGODnvTvci+EV9kkrZksm1lY8qQR/mh22JCpx+MZ59K1PC0ts3w/GORj1PI/vRFlPjHmDbtH9sVIKHG3lDlxjAVtvNGsI5Moe9M8109rOScc/Fj+v96id54h2660LVG2yAZZm4Cj3P15pEskY9joY5T/Sidy28sJzGm5T61W/i90nBrmiSyyKqFV5LEL/APsRVh6Xr0FzHGA+S3YnsfpSbq5TJpsysMoy474zQTinFkwbhJNEP8BupE6g6F+7ecs8+nSG2kIbJyOx/Pg/nUvmkxuUkqx7H51Tvgnqlno3iXq+kQu4+/Q+aVOMB1Ppz6g/tV0apEFZ3OMY5rtLk3Y/9D9Tj25H+ef5EkjiQB8gMMZ4/espva5eIsHT4l/ce1ZVveiuoMpGygJAOKdYHKNjOR8qZkuuBhsUdHemMZzn618ep0adkmhkG3NGG+AUrUfg1lSNpox79STg81mZbTsWxVPLvkyK3DG0rE44pJbzJLLjP/mnmEqE4ocMXJ8irtmltWVckDipP0TeK63mnTNhJkyhPoRn/NR1ZcggngUXa6j9yuhIp5B9K1sE/YmpIbHh2Pl6rabdzI6/FnYBS2GeW5XAB2YGfoP7f4o15E6n0hLtF23MQ2uPcD1/570HShukWIdu/wAz6V9G0WZZopphTqh5sLUKU/05Hr6VBPtB3/l9MWVsj/jkViPkOR/SrJgQxgE8kkCqX8a7ptR1kWq4KRAJj5+v9as+oT24Gl2wdHHfnTfgevDHqOL+GoSfjVRlR3zXPn2lPtF9RaffSWWg3cnT1vFjz9Q8tTcSZJ4i38KAAST37e/F+eHdgumW6eYgIYbSSM1A/tBeAEXiRYk2kq212hLRysu5TnuCPb+nzpOL3ZY0rHf2VllZzJ4b+NGv6h1bZw3fUt31Bpk9wsUr35XfE7AbXRhg/iPIOQRkiu+egdYN1YxRISdoG75dv+frXHHRH2Odbsdcsb/U7+3itbOQTJa6dE2ZHAwGZ29B34FdueHvSsmjwRvIADJEu71GRVmGKTnvar9hWaUVi23ZM4k8yHIBU4pJBBidmJHDE4/59KcxblUypyMGiVttjqc7iRzn61oKPBkjR1Pvt4JbhewUfl8/6V59/az6kabqdrCe6u4bWOze5+62srR/eZCwA3kclVGTjPevSLU9Oj1Cy8pj8PHw471y/wCMn2VrLxK1yS/NzeabqFs7tFcWhX4kbgqysCCMAe3aqk8bbuNX+TQ084pNS4OQfA3rvVuntd0p+lby8hv3kH3qwNwz2tzGTwpQ5G4AE54IJH5+jh6qub3oQX1/EYJ9pDKOdp5qkvBX7Jem+HmtpqV1eXOo3e7bE0sQVUJ74UepHck/QCugurIom6Xu7SEgoqBc47YqrOM0m2+a6XQ+c8b2wXPPZz34bXssXiMNUY4/mEcD0NdU3BEhOcY+dc1dM6OY9eeFVOXPGK6G0e6OqaVZTg4ZowHz/uHBH61U9Nk1GUX8jtek5RkvgatUgMCSd8ADafz7ftWUr1sEQstZWlNpPsowao5jh1DKkk4x61uTUxj4WJpvityqnOSK3LH8PAxXzKDU1Q0Xw3+QCW5py0yy1HV5dlpbSz5P+hSRSzw38NtR6y1iAiJl09TmSU9se1dWaHoWl9K2EdtaW8abQBuA5NaGm9Jlq3b4RDKP0zwY6iuLZJgqREjIRjg/nTmnhH1NEF/lxMD7N2q6W1bBOMY+VB/i5Oe9b8fQNOl5FboorCw8GdTkZTc3EcSk/EByamen+Geh2KRmWITTL3Y+tPUuqZQ8kUia/PPxZq9g9J02LlRv9znlSHCLQtKt4Gjito41YEHaMVX13pDaVqMqoAyd1Py/5/WpabyaRCEH60ivbOT7k80mPOzlQTV5444qcVRMZb00hie4+7K0spwkSk7ffj/xVQdW2zyaqszgEs+58+5qw7+5mmaTzsLGpBOPUgkgVCtW26h53PKtg/WszV5lNpeC5pVsbY7dPlXtQFAz7GnkedIoQx+aqngcn9aYukrZniI4BXjNTeytAQByfc+hq/ge9FTKtjZrT7MzKFKbFHcAVJLEpAmxVwB7CkkKCJCoXGKGGYfh5OewrTXCooXY6C4BU445BHz5rEKt8sUkimJYAoBn50qEZXkDn2FMrgmw9GAU8YpFeReaGPb3xSiNmIOe47gVp4xye4Peq74ZPi0Re+0q6viE+9PFCDyFHLAHtmh3VukOmywoONhGWNSF1VFwQNvuaaNWZYbSZuANp/DSJxSuQUHboqjpHTje9TjapGZApGM+tWlGq6Jrmo6eXBidvvcPp8LH4sD5Nn9qhvh7Zi3vp7yUnEe6Vj7n0py1XXE1GWO4CmO6gJaJm9QeGU/I/wBQDXkfrVo88b6fZtZo+5GiW/cW1K9giONjYLH6VlJ7TVn0+zgmdTukHwkcjFZStd6lWZqD4QrFjUY8nL8Vjck/9l/0px0TpO91zVILRLdhvYAntxXSFh0BZQNlrdX/ACp9ten7TR1NykCRnGM7aqab0+TkkyXipW2JumdGtOjtChsbZRGwXLkep9aHNflic0gvdR3yMVOT7UlSaRvxAAexr6LgwxhFRRlZJtscluiSRQ/vAI74puFx3GKxphirO1Iriya6AU5ORWrTdK/w803Jvnk2qM5PepLYW0dlDub8VLbUUFGG9im0tQo3y9u4FMeuXwdnHIHYCnOe7LxsQew4qK6rcFt2O9UsjtOy6qXCIxrU4jic96gNtc4vLyKT4S22QfuP8VN9S+IsX/Sqy12ZrLVVnBKo/wDKYfU8fuBXlfUlJYXKHa5/gv4+ic9L3TRyyIT8JGQfepna6iyjy1+Js9yef0qstA1NRcorEZIxkDFTfRbnzbxA2O+PrV307Vxz44zg+GBmhuTZMIgywfGeTWSatFpEEstziKFVLeY3ag3Mu0D4Sxz6elUV9rbrm96S6GSOxmMc15PHb8eqsefXg45/KvSKVJyZnRhukoolWs/aL6c0qVgl2k75xtAIH64x6UjtftZdN388kJV1lRQQkYLls/Tt+decB6lt21KVpr6Uvv5bcSCfz4pQ2uwbJFa7EUDD8cfB/X8z+9THUQauyw9M0ernRvizoXVsMiWN3G9woyY9wDD/AMVLYyXQNkMD6ivLHwl6se46gtbLRtXa3eS4SJpZ3ZVZWyGA+ZwFH/yGa9Oumo3stCsICxlaKJUZ3bcSQMEk+tBvWS3ETPG8dWw6+me3zz8PoajHUd8W02dU/E2FBzUo1Yq1mGPIBxkcVWPiF1Db9P6beXU7Ew2kTTOqDLcAnt68CqWoyNRoPBBXZLegtBe60i6ZQf5nwcU4L4f4ByvrSb7LPUp608NrbV5ImiW6mnMYcYbashUEj0Pw1bT28ZJw1YktLDL90jWjyuSvbPpqa1gMKMyxHumePrisqfG1Q9mH6VlD9Fi8hjpadOfHhkxUM8Q9QSynWxiPpzirnWGNFLcYA9a5x8QtS+9dT3ZUghW2jHOK18UUplfLJ7GkNz3CwLuIySKIjvJJ8kDav9aQXE4ztLn54oIugPwHJ9K3IyVGO4jt97ZcLwaLFy0khUZzTak+XGXKt7U96Xb7pBI3K0V2KY86JbKkPmSA59jSi5ud77R2ot5/h2g4HyohQN27JNJq3YadKkDnn2Rke9R6+LEMR+9O904JJzTLfOAh55qs1aY5OiMam5CsAefeoD1HYLeRvG2SD7dzVgX6gqxbn2xUUv1DM4GBgYzWVmx3aZdxSIpZ6gTF5Z+GeA4YD1Po351ZPTGqLdNp9yuBlgjAn1qqdblTS457xADMgwFz3HsfrTv4edXWmpqHgkwdwDROcNE/rkfX17GvM6fHL07U1/xy6/DHeC+JLnM5wSrgev4cZqkftK9MN1/0Rd6cm2K4ikE8cjcKrLk4BHerTW9F1EXTa+QAQx/p7fWoR1PP5lu0YPA+EeYNxB5zg/LivcxypwKccb3nlnc6REutubqe8W9ik2NbsF25BxjPHH1FOMllaCCe2uVlkigwCLcqGwRn4eDzz611l4ieFematqCXdrY2MjNxKXZQQD9T9Of0xVSaN4X6Tb69qaMVnbzNiwSzhliIAXA/3HPI79j3xmqLXPZqJKhq+zL4f23UfXdn/DIbwaXaTLNLc3p5JDAhFwMA+5+vNep2jakbq2Vd5Qeoxgk+1ci+F2gHphTJFGkUYCgpEow+fXA9eDmulOmNRWVEbIUrhWlPLH6AfLHp2q5jmqoz9RB9kw1+5S20Ul8KQ44z8655660rUvEi26ws9Gd47m9spbC0aWUoiyMmA24Zwo4OQMirQ8SOoYfuK6cj7pWXzZFXvt7enbvSbwx01fJFw+F3DCqP9IzXmdZnlqdXHSYvFOT+F/6RH7IE58Bekp/Djwx6d6emmSe60+xjinkj5V5cZkI4HBYtjjtipxJeybj3pP09DuDKR8s06tpu7OMVry4LuK3GxAupuhwSSKylUuisynBGayq7cl0OSsktp1fDcQuvmhvh7Zqgepb/AM3XLphxvlIAroqTw9020glaKPDBTjFcxdVYtepJ1z8KyMBg/Ompyj+oVNKXQG7cGTYD6cmkUV3mUqh4HH1pHeXB3O5Jx2pPpExlugOApPGfWtHHk3Izp46tk30y2WVVZh+WKkVqqouAABTVYoY4ASR2pdby/Ca0l0Z4fI+ScmtrLkBc0lebJ4OKHbMXkAxUPhEpA7g8e9Mt/vbIUDHzp5uxnIUZP9KZb3KIeKq+BxHNSDoCBjP+41Er9vxhW4J5JqU6gQVOXGT+ZqL38KkkKcgVQydlrC+CJa9bCWFkQA57sRVWajHc6brxvbCY280XwZAOGHqCPUZyaty+HxSKRjIwKg2uaXJCXlWPerfETjOPes7JFSVNWjQh8DB4B+NGtan4jdX6JrNx5+m20zPDERzEGkIOD3wM8A1dOraXF1PvlsdQ82OPG3Zww5B5H6VRfS/Rdto/V97r9iHSXUIxHdwEZSTBBDqO6tkc+hz781FvGfxC1Tw3s7O70v7/AA33nL/Nt4maIAYGHf8ACMjI9Tz2qjLJnjnWOMLg65+P3O/TZP8ArTwnvZYpR59wHlwcBm7DsODxyo/Sq70fwju1vI1ksNk4YtIXDFj34HJ/zzRPh19q7q3WobxtVm6fmaBEC2+qXgs5ZWIOSjEFTjHIJHepbc/aa1a3N1LZ9ERXckSqyPaXUdzvHrzEW7cH6Z9qvPG77LCytLosvo7wge0kE8t/JHYxqGwXKqvxbu/5U5634y6P0Ta3Om9OQSa3q8aENOpAiQc5ZW7My4/CP7HHJfWn2kuseubTW9OuLlunIfLylpFldhHBVieRnJOcf5Et8AI0Phvp/mkNNkq+Wzlgznv+ff1zVDX6mWhwrJFXbSK8m5vkt37K2v6n1tp3Ub9QzTz67b37QvLdf91o8qybvyfj/wAV1J05Y/czHGAAq4G2uUPC3qvStI8fJNGsriKT+K28YuhGc+XcRxykIccA7FBx9M12Po1mfORvxA+lX/T8cJReoqpTpv8Ago5r3ImOmyNbW+UGc0qi1GUNyCKLXykgVFIGB2pPJtOfi/emylyaEPtikO0WqkfixWVHZmVc/H+9ZSfcGJkzPivFfRvCIHVnBAJFc6ddYi1i4lGdu4nJqyDPHploZZMB8fpVcdXyrfxyTr61Y2TUFOfkr71KW1DC063lsrhvh7GklpdiPUYkQZ5GaYNN1U2l3JbSn4GOQ3saWwS+TqSvI2FJG2mYZ0yMkOGXDbzH7qoPfFDSb4OCaa7S7BgXnuBRglPbOa9AuTFoXrISe+ce9OWmcrJJjgcUxpIyCn+3iKaeinhm+I0E+qJQCaTk85pm1CY7CAB+ZpxmRVz/ADNo+dMGpXCxE/8AqE/xVebpHIY9RiDE/Fg+5NMkxwWVQrZ7saP1a7SRiomEh7YH/mmC4naFXcuFIH4QfWs6Ur6LmNUhNqtmpbzQOc/qef8ANMUyhoJBIPhbsQMg07S6luwJjsbjg013NxH5qfENjDHHfv7Umky3FvyNVjaMrskUDSEn4Sew7/8AOacT0u92jLcKgRhgqqjBFOlpdIHGIfLXsrMOad4mDKcnj+tQoJoPc0VzqHhF07qBY3Wj2VwT6vbIxJ+ZxRVp4VaDYRCK30q0hiQYCJAoXnORjFWBJchnITHBoMFnNIcN8LYJIJz3pLig9zKi1L7PXSOp3q3M2kxRuM5WEmJXB9GCkA/nU46Q8NdN0NYbawsoLa1jIYQxRhVB98Ad6m1rpOXGUPHfNSPTtKCMGVBxUrHu4aEzyqJT+n/ZxubPx+0vrTS2t4tMe5a9vkdiH8z7uYsKvruJDH6n8+tunV7ZGDGOajmmWizomMAjsRUv0i3KJLuyGKEZrSUNsW0UlNzkk/BBLDxCjkvp4p5NvxnBPtmpDF1JZSAEzLj3qreo+iLpbmeW2B25JqD6udd0yJzBLjbyVYmsBxaNpKMlwdKrLFcpujYOPkayqJ8MfEW6mlEV2Sj/AIWVjWUS/IDi1wT3q3qoEMN3w+1QqHqdLiR4JDkNwoz2qN69r5vJ2AbIFD6a0C41S8STBABzmtTUZ01tRWw4dv3MW6jpOyQyhc85FN9peGO+Ec2MD8J9anutactrZLjkqOTVYXplbU88BBzVWDTVodd8Fv6fe+ZZxkcjA5pUl1k8+lRDpvVvvFr5O5QVHYd6c47qR5SuQF+db+LJaRjzxtNkw0tfvd5HF35yefSpZOmBjgf2qM9Dx4juLpyCSdi/L3qRPJvBw3NPT3Mqy4QimjDZUYI9aZtT0KO8Ukgn9qfigHck0EZfgDPzrnBPsFSa6KU6v0K4sZt0Cu64IYcZz6EVC4tduY5Hiuo9pGOW74BrpPUtBttTt3jnUjPG4DBFUX4l9DXPS+69iH3mzB+ORRymf9w/vVSenXcS7izf4yIxqV0t1HNJG25sfCT71EY5dTa6gjjJ83JPwn4f39KNvdbjtAxGNpGSAaZ9K1/+IyzujjykG47TwPT0qjLHyXoS4LBh1CRpYyzFmTAHPBPyp2u76SQmCIndjnmodo96kkyndu8sFm+QHYfmSB+dPFvexvNJIMbye45ovabJlNIetNsRbjz5fx55JyS31p2tb2W4uhBa28s525Yom7b7D60+9FdKQahapdXu+4ZxuSJuEHtuHr9O1TKx0+KG4BhjSKI8CONdijHOaatL+StLP2R3T9L1J49727RHHCStg0629teQIPMtXGTyUw1TJEQwA5wpH4W/56UG0ZJAfLYSqOMj+lE8EY9MqvI5eBp043CMGQEgd1bg1PtJk3WJkbIJHrTLb2gZgyrg+1PF433Sz2g4AQt2qZLZEPFzKxlnSGV3DHIzUf13pyy1CJlMYLe4o0STys2MkZoaiRc7h+tefeWJsJMq3XOiW0XzLi1i3Hv8NZVr/d47lMOgOayo3/AxP5Oe+m+npr+WMyKfiOcH1q3tO0eXTrRFjhCDHJrn7pHxHu9c0SxuoWEGYwd1WTYdS6pe6duN35i+6tWfPNJ9rgsOCSJvfWRu4Hjk744qs9Y0ptPu2WVThjgNTmuuXlvMA87fEM5JpJqepJcNi4ul2jk7qZg1ag/u6EShaDtJtkts+V+Z96cI73ZKRk/rTTp2uafHOII7mN3fthhRutXP3SLzQowTz8q9JizRlFSh0Z8sbtp9ludJybdDjIOCxJPNPsO6T1yagXh7q8F5okYjbOGIxnmp3BcAHYnLHgAVp4ppozckWm0GSKsYA7seABR8UapHzy3vTfqmpW+h7JbjdLKxCJEndmPAxTg85Ee4bIiMMScH+vv2pm5WBsaQWynYcAJ+Wc0z31n99DwzKrhgQY5ACGXsR+npSC08RbDUOpr3RY5F++Wqq0ijBYbslRj6K36VJ5LkOAsyEAepqVJS5QLhKHZ59/az0K48L9esxYyNHpeplhB3zG47pn8wR8uPTNRHp7VF0XQ7aJzi7ugJJCW5xngY+tdEfbx6bd/D/TdQaFpYINSjYyL2TKuMH2ycfniuMdL1531IGaRgQw284wPX+9Z+eoZeDX0334k2XovUwsbS1t/NK3F6d7AfiCDgD696sroTTf4z5CjKwnknOSwrmfUNZkuep4ot4AVEjbaflkj5An+tdb+C5juAm3kRw5JHuasYlvTE5ft5Lx0PTitskcKnhcYT6U6WuiyKV3YjIIJB/pTEerLLp9Y0cGSU4J9gMgE/kM1CLvxQu9Y8Yj01bbzb28BkmZfwBsjGf3opZYxaQmGDJNOXgt65083NrJDHKgmAGMMCc/T9aaumNMvdLmure6jVY3fzUZf9xJ3cfpRMnUkGnW8k+8RwQY3Hbk/jXn+/51rWvE+00vq+y0ieNPIurVLlZT7FmAIwf/bn86RkS3qVkwg3FpImFoQkgQ8YOCDRXUuuJpzQbtrxErHNk8qDnmjb+4ggtE1ESqYNm5jnsMZz9K5X1rxC17qzq/UI5LW4tNMmcLFLjHwen596TnyKKobpsTk2joe41GPTbmSNRvUcgjng00XutvIxKttHtUU0XVWtbBopb03DA8SsMnHzocWpxpM29xcBj3Udq83KXLo1VEfh1a1iQHTeDWU3Lai6yy26uPT4qyhUjqRxv4A6ymv+FsFwW8sRkxNuPII9KsfQri4tIX2TOUZsKo9TXNv2e+pXs9W1PpQSeWXuXn8tsr5QU/FnPYYwa6N0eZpne8EmYiPKhWJMhT7jOef80UsaeRxZat7eRdfalLBIc3DFgNuCpx+tMt1qVxFC26RZC2VABIwKkMejQRx+dcSyNnLfzAAfl3FJW0ixuJD5lwys3HMijb9O3NNjpY+UIsrqYSrdmaJ5RcqePLOdv+KkDXOudU6elncXsq254Z41zIfTvnipKNBsrZHjti7O3Jw2QfmSO9ChtrjRD5gSLYDkJImV/TNXoRUeAG75JV4JaPrPTDyJfTGWxUZV3k3Mw9OAABV52fUMGi9P3OsXTBUJOD7KDgAfMmudIfFi6x91S2tFUHaWjJB/QvTV49dRdU3vhZZDS0ebTkDi9S1yZQpPwtjvjkjinrN7SbXJXjg97IlPiy3bHrJvEDrWxu4ZlGmadGJrkElg0zL8EYI4OCcn6fMU/wBz4r6J/wBS2fTE94P4ncrJdeWM58tUfGf/ALD9q4/6G8ZIumfCa9m0gGbVUl+KLJaSLJ5OD3OAM1E+hPHF7nrqG+eVbi4uIzay72wQhPox5GCP3NC9VSS8vsurQxnuafC6/J0R9nvqaPXPFXrXVL6aOLEp3zydsKOAPpg/rXQs2vWw6burlndLXyJZN7DBRAW5PqCAK4s6b6qsujenNYvb9RHLfXNy3wH/ALgBZcfTg/rU18AfHXTOotMg6burg3HkW8kZN3KWedW3FsknJ4OPkM+1HgzriNiNTpnJPKvFHQN7pEPiX4P6npN5F5pvrJo9rnu+3KsPmGCn6ivJ666gi0692TDZMhCsh7qc85r0p8OvEaG/1jXLGSdwdMHlRx5Hl+SAoVxzySd2foPlXm5qvTCX/UOp30sjBpbmSQlZFwNzk8evrVnK1OMZFXFB45yj+zH201uC663hxMhDqCQT/r24H9q7H8BurYNN6XaTCv8A9xnOfiO0gAfpn9TXEWldGWC3MU9ukxu435csWLD6d8/r9KtLpTq+56XsTbRmQqd2XZSAoPcn9v7d6XHLsi0h7xb39xYkfjRqHiR1JdGKS6t7eKRhEkD7VC5BCuM/F+EcGpTpviFYeEug3OqXxF1rWqyebOxYB3A7DPy4+pP6c76D1lo/TPUeoX/35bOe5yTGV+CT54xwe/r602dT9faT1YTaXt0Ykz/IuVYEJ34Py/SsrdljPeuWbN4pxWNqoove++0HqHWaxWYmNrbTyqhW2+BzHkcbs8EEDNT7T9dbqHxZhma6aawsbWC2CEk7FHxEfXLMc1yR0FpU8evxTSzRvY25EjSpJv3KO4A/z7099T+MunW0E9hpF0H1HeZLiZRgSyHk7G+XbHr86GOXK8lvkbOGHaowVHo/4VeLEHUPSmvXEloSumzyRS2wjG0IpGUX0YAevrzUL6z0ZNK6plEf8vT72Jb2zjlG0rG/Ow49VOR+QrmP7P8A4u6p094bda6tqEskdvcQ+VZhzhnkZWDsCe/cH64q4NU1+7638J/D7UZdd/h986XAZ7NfMYplNo7gjaS/bPBHtVqWRzhz2ZUsKxzcodXX+iY2up2NujYuHUEY3ICce+eKVJewRoxSW48zGeBgEe9RLp3V7ez06aCfWJtUCMU8+W3cOSO/x4AYe2R6d6kNp1Np8gWHzmaNFGAFGcc4yucjj1rMlHkjoPh1cXUTtaXExlH4lMwU1lCt9R0K5O522hcZlT+Wyn5uMfpisoNkjrRwl4labF0N4yaXraRqlpqYNtOinaGLcc98Z/PtXROldTCXS7SC3KGKKIyCKJcYY9s4B28AY5PHr3qR6lN0b1BGJdT6Utr5EbzF+8W4ba3uAaeNE13RLZjDYdOwWy9zsQKCa1vpZSad8oh5Y88Edh1G8uZB5E1xIARkCPsABjJ59x39qR6xaskcks0N47qcBTBy3rlc9s1PbPqOaeacpYwxxgAHIUZrP+o7mVXQLbRy/wDvOcD/AIKsLBJoV7iT6KqtWvo8yeSdobHlvCMtn6CjVsdb1GUl7qWxzhtkdsCMH05U1bkPUEiwfzbi2ViBnYmaJutXjkjZfvLyD1EUeMUX07Xkj3E/BUsvSevx3KmK/u1J53Jajdx/9Bj9KI1K08TTBLDZao4iAwUnXcG9ORtwPpirDuL2W2kLW7Xcu7/TJJgD9aLkvrtApliH4if5r5/pS3iryFuvwc8P0b4h208kw0uwvJX+FpIMxl+eARj057VDdZ8GfEnVepYtWTpyC0kjkV9quy7sH3A7115pmu3sLp8VjHFnAYgZBzTw3V9+X2pJp8mBtzgZz+tRDDBchPLJdHHHW/gh4odZXFvLDpZtreJdohNz8PfOcbe/zrOhPs++KfSmrffINJgEqgrueZskHvg7fWuwBr11MGeWS0QHjJwP70TH1HMhf/1tiFU9iAf70SxQSpEe9JnN2keF3i1p8urzvMttJqSGFlhk/Am7JA/pn0pBpv2dOpIUH/olk2fjWWRQR37AGumk6qukuDI95btCcgBIx+Rrd110+Nsd1H5h5P8AL4x6+lFtSXZG9t3RzRb+BHUrSP5enBk3AMokUfsaex9nDq6/I36PCVHY+apOOfc/P/8AlX9/1YbqAMJ5cqdpHl4/OjB1BGG8wXd27beY1k2iuqPlk75LpFAR/Y8v9W8sX2lwo/8A7ZMqP8jv6ZHpmlkf2DrS8haOS3ELEZV0nfMZ9cj/AFKfyI+dXmnWSozIskxGO8k3b96Mg62gljK/eFMqk5zOeK5LH4kQ5zfhHPmmfY3666LluoOnbywvbC5GTHqE2x4W5HDBfiB+g+la0z7F/W12x/iepaJp4DZIsl3MM+uWHP8AzmuiLbqy0k3hriJCDg7pSc/SlMXWFioCP93cE4LbyT9acseJ8uQn3ckekUvefYy1TWbS1ttU60eSC2GEhhZIowOPQL6/tVs6H4YPomk6fpSanYvBZRCOKJyCqAeg+EfXPelh6vtEQ7ZYdo5B2k02TdaWksgJnXHqBGQaCWHC+2FHLlfFDxN0rkIi6zpludu1sRh2x9eP3yOaRjoRoppAmvaUwfnabdCfX5cflimqTq3SmY7rgKW9Bbk/vRQ6w06BtsZZsdmEP+ar+1hTGKWRqx7foUugkbqLTkl94YthGPmMH9SayodrHWdugeVZHCKO/lYJ+VZXOGAle4QMdU6iibbi859QoVaU2fVsmNxkZ/XIf/FQ5royFSEwPdjWCSUvnzFCkei+tB7j7sbs/BPYOqdzuVWQrjJwxIFKIOq5FXdHCO3+o81BLeRolOZmGR/pOBSuBgybjKz4HbPNR7j+SPbomMnVN4eACo7/AI61J1hdgbjJGmPduajNtNbTA5Yk+mTzR1xdWdvDj8Ujdhjn51PuNeTljTFz9Sz3czM88pHpszihfxm/ZXKktj8JkNImv4Y0VYrbAOAC3P51GupetodMvXtt5IHdcYwaVzLmxiSXFEvjn1BkzKFlDHtG1DS9AiO+N4nHGMA1CdA64up5AmRNAw3AnA21JTq1oQZZGZc+gPFKaa4sJR80LX1xWG3bJj5p3pGs24EiNkYn1IBpJJqdpJkIpOPVmoCTm5VmD7W5C+hFDZKiPUVxNEvw5GfUueKUJd3DDLzDB7ADJqMzR3UdoWkvEmCkHBIDftRtlqMYkEDyKJh2Utyc1Nk7ESGW5eHaxunYYxtBwP0pL55CsWuJmJ5whpqvbibIKbNw4wx70b5ojiQ42gDBC9qGVsOEUKnnjLndvIAHBkIP6UWJPurOot/hf/WXzSMz+ZvIA2kdjTTe3t8JwtvcIkSjnI5zS7rkYop8EqtLpUJ2Ab85+dO1pcMQecMPb0qEaLFeteM8127xH0Cng1JI7Bd7MoLMB3Pc0+ErFSgkOB1cRjElxEBnHPGKSPq8Llj96jC+4NNV5vgBCWyFmOOaSx283wHyRtGdyn1onIiOMX3et28fAuUf5DvSU6vFMzlZnXcMYOaTXMKOwIhVGXt71jyhI8SBzgZG1KCw9tCfWtWEbQRostzkjIHoKygvfrKrNJAy4GMhMHvWVB1DdDrS/dgkLxFwDklMf1rU1zPcKA10sYx3TApqtXDgEonA9qV2saSRbii5GfSmOQKikH2YtSSjXzFgc7Sw5/OnGCW27C5Gf/lxSGK0hSZSIlyygk4pQkUapgRJ3x2oV0FSTFaJH6TYOM5zxSSC2nkmMpnRgBhMN6Vk6Jt27FxigwsFO0KoGPQV34OoPklmZwrs7Njjn+lR3qjoS36guFufvk9jcoQTt+IMR7in0cgt2I7YNalZpXO5ie3rUxk0DQl0TRY9Ih2IzSErtZ3XAHfsKXB4YwI44nlPox7E0XcztbRbl+Ijtv59DSYXc0wUmVlDEZVeBUPl2HEWpbzSIcwogJwcnmhacohmaKTy0EYwu5s5pIkQd2JLEqeMnNLIItztliaXQQfNdQ43OYlQHJJFFP5LI0kRC3CcrIU9R2pROwtLbKor7f8AeM0yXmu3TzmH4FQuM7VriUONv1FFqgiQALPglx5ZO1hW36ge2huI7lXyEJDCA4OKiouni1FZY8RvuydoxnmpNc3kptpdzBwV7MoIqU+CHHkV6V1FZahp6Lb+duAG4OoBX5UOe9E6ujRy/AMjGBUQ05GdG/muh3d1IBpVGZVwouJueM7uaUwoofINUu5XYwhxCDhlLAEVI7G9uJY+NynOCrSDkVXUqusUrCaXepxu3cn60kiu5sKxldjvI5Y0Kk4h7Uy0JUnmkzsLD38wUWzSodhU/wD5BURs7mR05Y9wO5+dGwSMb8xk5XHqaJTt0DtpWPU8bKdxjPGc/wAwHNJwZJshY2x7hhQmhRouVHai4kCICB+9MXAu7BKssW5GRmjx6uKykeoxL5R754Oc1lCmyej/2Q==";
diff --git a/packages/dialog/stories/index.ts b/packages/dialog/stories/index.ts
index 3829864aed..968ae8e838 100644
--- a/packages/dialog/stories/index.ts
+++ b/packages/dialog/stories/index.ts
@@ -10,53 +10,53 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/overlay/sp-overlay.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
 
 class CountdownWatcher extends HTMLElement {
-    ready!: (value: boolean | PromiseLike) => void;
-
-    connectedCallback(): void {
-        (this.previousElementSibling as HTMLElement).addEventListener(
-            'countdown-complete',
-            () => {
-                this.ready(true);
-            }
-        );
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-        });
-    }
-    private readyPromise: Promise = Promise.resolve(false);
-
-    get updateComplete(): Promise {
-        return this.readyPromise;
-    }
+  ready!: (value: boolean | PromiseLike) => void;
+
+  connectedCallback(): void {
+    (this.previousElementSibling as HTMLElement).addEventListener(
+      "countdown-complete",
+      () => {
+        this.ready(true);
+      },
+    );
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+    });
+  }
+  private readyPromise: Promise = Promise.resolve(false);
+
+  get updateComplete(): Promise {
+    return this.readyPromise;
+  }
 }
 
-customElements.define('countdown-complete-watcher', CountdownWatcher);
+customElements.define("countdown-complete-watcher", CountdownWatcher);
 
 export const disabledButtonDecorator = (
-    story: () => TemplateResult
+  story: () => TemplateResult,
 ): TemplateResult => {
-    return html`
-        ${story()}
-        
-    `;
+  return html`
+    ${story()}
+    
+  `;
 };
 
 export const withOverlayDecorator = (
-    story: () => TemplateResult
+  story: () => TemplateResult,
 ): TemplateResult => {
-    return html`
-        Toggle Dialog
-        
-            ${story()}
-        
-    `;
+  return html`
+    Toggle Dialog
+    
+      ${story()}
+    
+  `;
 };
 
 export const disabledButtonWithOverlayDecorator = (
-    story: () => TemplateResult
+  story: () => TemplateResult,
 ): TemplateResult => withOverlayDecorator(() => disabledButtonDecorator(story));
diff --git a/packages/dialog/test/benchmark/basic-test.ts b/packages/dialog/test/benchmark/basic-test.ts
index 4980c78cee..9ca4d0b9a1 100644
--- a/packages/dialog/test/benchmark/basic-test.ts
+++ b/packages/dialog/test/benchmark/basic-test.ts
@@ -10,22 +10,22 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
Disclaimer

-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
-        augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas
-        diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper
-        viverra nam libero justo laoreet. Enim ut tellus elementum sagittis
-        vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur
-        libero id faucibus nisl. Diam volutpat commodo sed egestas egestas.
-        Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a
-        diam maecenas sed. Turpis in eu mi bibendum neque egestas congue.
-        Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis.
-    
+  
+    
Disclaimer

+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
+    augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
+    in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra
+    nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo
+    duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus
+    nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem
+    ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu
+    mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
+    dignissim cras lobortis.
+  
 `);
diff --git a/packages/dialog/test/dialog-base.test.ts b/packages/dialog/test/dialog-base.test.ts
index 43fd9cec89..cfe1a519f3 100644
--- a/packages/dialog/test/dialog-base.test.ts
+++ b/packages/dialog/test/dialog-base.test.ts
@@ -11,148 +11,140 @@ governing permissions and limitations under the License.
 */
 
 import {
-    aTimeout,
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    oneEvent,
-} from '@open-wc/testing';
-import { TemplateResult } from '@spectrum-web-components/base';
-
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import '@spectrum-web-components/dialog/sp-dialog-base.js';
-import { Theme } from '@spectrum-web-components/theme';
-import { OverlayTrigger } from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-import { alertDestructive } from '../stories/dialog.stories.js';
-import { Button } from '@spectrum-web-components/button/src/Button.js';
-import { DialogBase } from '@spectrum-web-components/dialog';
+  aTimeout,
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  oneEvent,
+} from "@open-wc/testing";
+import { TemplateResult } from "@spectrum-web-components/base";
+
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import "@spectrum-web-components/dialog/sp-dialog-base.js";
+import { Theme } from "@spectrum-web-components/theme";
+import { OverlayTrigger } from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import { alertDestructive } from "../stories/dialog.stories.js";
+import { Button } from "@spectrum-web-components/button/src/Button.js";
+import { DialogBase } from "@spectrum-web-components/dialog";
 
 async function styledFixture(
-    story: TemplateResult
+  story: TemplateResult,
 ): Promise {
-    const test = await fixture(html`
-        
-            ${story}
-        
-    `);
+  const test = await fixture(html`
+    
+      ${story}
+    
+  `);
 
-    return test.children[0] as T;
+  return test.children[0] as T;
 }
 
 const overlayTrigger = (story: () => TemplateResult): TemplateResult => html`
-    
-        Toggle Dialog
-        ${story()}
-    
+  
+    Toggle Dialog
+    ${story()}
+  
 `;
 
-describe('dialog base', () => {
-    it('does not close by default when interacting with buttons', async () => {
-        const el = await styledFixture(
-            overlayTrigger(
-                () => html`
-                    
-                        ${alertDestructive()}
-                    
-                `
-            )
-        );
+describe("dialog base", () => {
+  it("does not close by default when interacting with buttons", async () => {
+    const el = await styledFixture(
+      overlayTrigger(
+        () => html`
+          
+            ${alertDestructive()}
+          
+        `,
+      ),
+    );
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        const dialog = el.querySelector('sp-dialog-base') as DialogBase;
+    const dialog = el.querySelector("sp-dialog-base") as DialogBase;
 
-        await elementUpdated(dialog);
-        const secondaryButton = el.querySelector(
-            '[variant="secondary"]'
-        ) as Button;
-        const negativeButton = el.querySelector(
-            '[variant="negative"]'
-        ) as Button;
+    await elementUpdated(dialog);
+    const secondaryButton = el.querySelector('[variant="secondary"]') as Button;
+    const negativeButton = el.querySelector('[variant="negative"]') as Button;
 
-        expect(el.open).to.be.undefined;
-        expect(dialog.open).to.be.false;
-        const opened = oneEvent(el, 'sp-opened');
+    expect(el.open).to.be.undefined;
+    expect(dialog.open).to.be.false;
+    const opened = oneEvent(el, "sp-opened");
 
-        el.open = 'click';
-        await opened;
+    el.open = "click";
+    await opened;
 
-        expect(dialog.open).to.be.true;
-        expect(el.open).to.be.equal('click');
+    expect(dialog.open).to.be.true;
+    expect(el.open).to.be.equal("click");
 
-        secondaryButton.click();
-        // Give time to ensure reactions DO NOT close the dialog.
-        await aTimeout(100);
+    secondaryButton.click();
+    // Give time to ensure reactions DO NOT close the dialog.
+    await aTimeout(100);
 
-        expect(el.open).to.be.equal('click');
+    expect(el.open).to.be.equal("click");
 
-        negativeButton.click();
-        // Give time to ensure reactions DO NOT close the dialog.
-        await aTimeout(100);
+    negativeButton.click();
+    // Give time to ensure reactions DO NOT close the dialog.
+    await aTimeout(100);
 
-        expect(el.open).to.be.equal('click');
+    expect(el.open).to.be.equal("click");
 
-        const closed = oneEvent(el, 'sp-closed');
+    const closed = oneEvent(el, "sp-closed");
 
-        dialog.open = false;
-        await closed;
+    dialog.open = false;
+    await closed;
 
-        expect(dialog.open).to.be.false;
-    });
-    it('does not close by default when interacting with buttons when recycled', async () => {
-        const el = await styledFixture(
-            overlayTrigger(
-                () => html`
-                    
-                        ${alertDestructive()}
-                    
-                `
-            )
-        );
+    expect(dialog.open).to.be.false;
+  });
+  it("does not close by default when interacting with buttons when recycled", async () => {
+    const el = await styledFixture(
+      overlayTrigger(
+        () => html`
+          
+            ${alertDestructive()}
+          
+        `,
+      ),
+    );
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        const dialog = el.querySelector('sp-dialog-base') as DialogBase;
+    const dialog = el.querySelector("sp-dialog-base") as DialogBase;
 
-        await elementUpdated(dialog);
-        const secondaryButton = el.querySelector(
-            '[variant="secondary"]'
-        ) as Button;
-        const negativeButton = el.querySelector(
-            '[variant="negative"]'
-        ) as Button;
+    await elementUpdated(dialog);
+    const secondaryButton = el.querySelector('[variant="secondary"]') as Button;
+    const negativeButton = el.querySelector('[variant="negative"]') as Button;
 
-        expect(el.open).to.be.undefined;
-        expect(dialog.open).to.be.false;
-        const opened = oneEvent(el, 'sp-opened');
+    expect(el.open).to.be.undefined;
+    expect(dialog.open).to.be.false;
+    const opened = oneEvent(el, "sp-opened");
 
-        el.open = 'click';
-        await opened;
+    el.open = "click";
+    await opened;
 
-        expect(dialog.open).to.be.true;
-        expect(el.open).to.be.equal('click');
+    expect(dialog.open).to.be.true;
+    expect(el.open).to.be.equal("click");
 
-        secondaryButton.click();
-        // Give time to ensure reactions DO NOT close the dialog.
-        await aTimeout(100);
+    secondaryButton.click();
+    // Give time to ensure reactions DO NOT close the dialog.
+    await aTimeout(100);
 
-        expect(el.open).to.be.equal('click');
+    expect(el.open).to.be.equal("click");
 
-        negativeButton.click();
-        // Give time to ensure reactions DO NOT close the dialog.
-        await aTimeout(100);
+    negativeButton.click();
+    // Give time to ensure reactions DO NOT close the dialog.
+    await aTimeout(100);
 
-        expect(el.open).to.be.equal('click');
+    expect(el.open).to.be.equal("click");
 
-        const closed = oneEvent(el, 'sp-closed');
+    const closed = oneEvent(el, "sp-closed");
 
-        dialog.open = false;
-        await closed;
-        await elementUpdated(el);
+    dialog.open = false;
+    await closed;
+    await elementUpdated(el);
 
-        expect(dialog.open).to.be.false;
-    });
+    expect(dialog.open).to.be.false;
+  });
 });
diff --git a/packages/dialog/test/dialog-memory.test.ts b/packages/dialog/test/dialog-memory.test.ts
index 476757144a..ffb7945504 100644
--- a/packages/dialog/test/dialog-memory.test.ts
+++ b/packages/dialog/test/dialog-memory.test.ts
@@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { small } from '../stories/dialog.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { small } from "../stories/dialog.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(small());
diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts
index 734adc9719..df3db819be 100644
--- a/packages/dialog/test/dialog-wrapper.test.ts
+++ b/packages/dialog/test/dialog-wrapper.test.ts
@@ -11,396 +11,389 @@ governing permissions and limitations under the License.
 */
 
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    oneEvent,
-    waitUntil,
-} from '@open-wc/testing';
-import { SinonStub, spy, stub } from 'sinon';
-
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
-import { Dialog, DialogWrapper } from '@spectrum-web-components/dialog';
-import { Button } from '@spectrum-web-components/button';
-import { Underlay } from '@spectrum-web-components/underlay';
+  elementUpdated,
+  expect,
+  fixture,
+  oneEvent,
+  waitUntil,
+} from "@open-wc/testing";
+import { SinonStub, spy, stub } from "sinon";
+
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
+import { Dialog, DialogWrapper } from "@spectrum-web-components/dialog";
+import { Button } from "@spectrum-web-components/button";
+import { Underlay } from "@spectrum-web-components/underlay";
 import {
-    lazyHero,
-    longContent,
-    wrapperButtons,
-    wrapperButtonsUnderlay,
-    wrapperDismissable,
-    wrapperDismissableUnderlayError,
-    wrapperFullscreen,
-    wrapperHeadlineVisibilityNone,
-    wrapperLabeledHero,
-    wrapperWithHeadline,
-    wrapperWithHeadlineNoDivider,
-} from '../stories/dialog-wrapper.stories.js';
-import { OverlayTrigger } from '@spectrum-web-components/overlay';
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { Theme } from '@spectrum-web-components/theme';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-import { Divider } from '@spectrum-web-components/divider/src/Divider.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { nextFrame } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';
+  lazyHero,
+  longContent,
+  wrapperButtons,
+  wrapperButtonsUnderlay,
+  wrapperDismissable,
+  wrapperDismissableUnderlayError,
+  wrapperFullscreen,
+  wrapperHeadlineVisibilityNone,
+  wrapperLabeledHero,
+  wrapperWithHeadline,
+  wrapperWithHeadlineNoDivider,
+} from "../stories/dialog-wrapper.stories.js";
+import { OverlayTrigger } from "@spectrum-web-components/overlay";
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { Theme } from "@spectrum-web-components/theme";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { Divider } from "@spectrum-web-components/divider/src/Divider.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { nextFrame } from "@spectrum-web-components/overlay/src/AbstractOverlay.js";
 
 async function styledFixture(
-    story: TemplateResult
+  story: TemplateResult,
 ): Promise {
-    const test = await fixture(html`
-        
-            ${story}
-        
-    `);
+  const test = await fixture(html`
+    
+      ${story}
+    
+  `);
 
-    return test.children[0] as T;
+  return test.children[0] as T;
 }
 
-describe('Dialog Wrapper', () => {
-    testForLitDevWarnings(
-        async () => await styledFixture(wrapperDismissable())
+describe("Dialog Wrapper", () => {
+  testForLitDevWarnings(
+    async () => await styledFixture(wrapperDismissable()),
+  );
+  it("loads wrapped dialog accessibly", async () => {
+    const el = await styledFixture(wrapperDismissable());
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("loads labeled hero dialog accessibly", async () => {
+    const el = await styledFixture(wrapperLabeledHero());
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("loads fullscreen wrapped dialog accessibly", async () => {
+    const el = await styledFixture(wrapperFullscreen());
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  xit("loads with underlay and no headline accessibly", async () => {
+    const el = await styledFixture(wrapperButtonsUnderlay());
+
+    await elementUpdated(el);
+    el.headline = "";
+    await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("opens and closes", async () => {
+    const closeSpy = spy();
+    const openedSpy = spy();
+    const test = await styledFixture(html`
+      
 openedSpy()}>${longContent()}

+    `);
+    const overlayTrigger = test.querySelector(
+      "overlay-trigger",
+    ) as OverlayTrigger;
+    const el = test.querySelector("sp-dialog-wrapper") as DialogWrapper;
+
+    el.addEventListener("close", () => closeSpy());
+    await waitUntil(
+      () => openedSpy.calledOnce,
+      "click content projected to overlay",
+      { timeout: 2000 },
     );
-    it('loads wrapped dialog accessibly', async () => {
-        const el = await styledFixture(wrapperDismissable());
 
-        await elementUpdated(el);
+    expect(el.open).to.be.true;
+    const closed = oneEvent(overlayTrigger, "sp-closed");
 
-        await expect(el).to.be.accessible();
-    });
-    it('loads labeled hero dialog accessibly', async () => {
-        const el = await styledFixture(wrapperLabeledHero());
+    overlayTrigger.open = undefined;
+    await closed;
 
-        await elementUpdated(el);
+    expect(el.open).to.be.false;
+    expect(closeSpy.callCount).to.equal(1);
+  });
+  it("opens and closes when element is recycled", async () => {
+    const closeSpy = spy();
+    const openedSpy = spy();
+    const test = await styledFixture(html`
+      
 openedSpy()}>${longContent()}

+    `);
+    const overlayTrigger = test.querySelector(
+      "overlay-trigger",
+    ) as OverlayTrigger;
+    const el = test.querySelector("sp-dialog-wrapper") as DialogWrapper;
 
-        await expect(el).to.be.accessible();
-    });
-    it('loads fullscreen wrapped dialog accessibly', async () => {
-        const el = await styledFixture(wrapperFullscreen());
+    el.addEventListener("close", () => closeSpy());
 
-        await elementUpdated(el);
+    await waitUntil(
+      () => openedSpy.calledOnce,
+      "click content projected to overlay",
+      { timeout: 2000 },
+    );
 
-        await expect(el).to.be.accessible();
-    });
-    xit('loads with underlay and no headline accessibly', async () => {
-        const el = await styledFixture(wrapperButtonsUnderlay());
+    expect(el.open).to.be.true;
+    const closed = oneEvent(overlayTrigger, "sp-closed");
 
-        await elementUpdated(el);
-        el.headline = '';
-        await elementUpdated(el);
-        await expect(el).to.be.accessible();
-    });
-    it('opens and closes', async () => {
-        const closeSpy = spy();
-        const openedSpy = spy();
-        const test = await styledFixture(html`
-            
 openedSpy()}>${longContent()}

-        `);
-        const overlayTrigger = test.querySelector(
-            'overlay-trigger'
-        ) as OverlayTrigger;
-        const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper;
-
-        el.addEventListener('close', () => closeSpy());
-        await waitUntil(
-            () => openedSpy.calledOnce,
-            'click content projected to overlay',
-            { timeout: 2000 }
-        );
-
-        expect(el.open).to.be.true;
-        const closed = oneEvent(overlayTrigger, 'sp-closed');
-
-        overlayTrigger.open = undefined;
-        await closed;
-
-        expect(el.open).to.be.false;
-        expect(closeSpy.callCount).to.equal(1);
-    });
-    it('opens and closes when element is recycled', async () => {
-        const closeSpy = spy();
-        const openedSpy = spy();
-        const test = await styledFixture(html`
-            
 openedSpy()}>${longContent()}

-        `);
-        const overlayTrigger = test.querySelector(
-            'overlay-trigger'
-        ) as OverlayTrigger;
-        const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper;
-
-        el.addEventListener('close', () => closeSpy());
-
-        await waitUntil(
-            () => openedSpy.calledOnce,
-            'click content projected to overlay',
-            { timeout: 2000 }
-        );
-
-        expect(el.open).to.be.true;
-        const closed = oneEvent(overlayTrigger, 'sp-closed');
-
-        overlayTrigger.open = undefined;
-        await closed;
-
-        expect(el.open).to.be.false;
-        expect(closeSpy.callCount).to.equal(1);
-    });
-    it("shows header divider when there's a header", async () => {
-        const wrapper = await styledFixture(
-            wrapperWithHeadline()
-        );
+    overlayTrigger.open = undefined;
+    await closed;
 
-        await elementUpdated(wrapper);
+    expect(el.open).to.be.false;
+    expect(closeSpy.callCount).to.equal(1);
+  });
+  it("shows header divider when there's a header", async () => {
+    const wrapper = await styledFixture(wrapperWithHeadline());
 
-        const dialog = wrapper.shadowRoot.querySelector('sp-dialog') as Dialog;
-        const divider = dialog.shadowRoot.querySelector(
-            'sp-divider.divider'
-        ) as Divider;
+    await elementUpdated(wrapper);
 
-        expect(divider).to.be.not.null;
-    });
-    it('hides header divider when there\'s a header but "no-divider"', async () => {
-        const wrapper = await styledFixture(
-            wrapperWithHeadlineNoDivider()
-        );
+    const dialog = wrapper.shadowRoot.querySelector("sp-dialog") as Dialog;
+    const divider = dialog.shadowRoot.querySelector(
+      "sp-divider.divider",
+    ) as Divider;
 
-        await elementUpdated(wrapper);
+    expect(divider).to.be.not.null;
+  });
+  it('hides header divider when there\'s a header but "no-divider"', async () => {
+    const wrapper = await styledFixture(
+      wrapperWithHeadlineNoDivider(),
+    );
 
-        await expect(wrapper).to.be.accessible();
+    await elementUpdated(wrapper);
 
-        const dialog = wrapper.shadowRoot.querySelector('sp-dialog') as Dialog;
-        const divider = dialog.shadowRoot.querySelector(
-            'sp-divider.divider'
-        ) as Divider;
+    await expect(wrapper).to.be.accessible();
 
-        expect(divider).to.be.null;
-    });
-    it("hides header divider when there's no header", async () => {
-        const wrapper = await styledFixture(
-            wrapperHeadlineVisibilityNone()
-        );
+    const dialog = wrapper.shadowRoot.querySelector("sp-dialog") as Dialog;
+    const divider = dialog.shadowRoot.querySelector(
+      "sp-divider.divider",
+    ) as Divider;
 
-        await elementUpdated(wrapper);
+    expect(divider).to.be.null;
+  });
+  it("hides header divider when there's no header", async () => {
+    const wrapper = await styledFixture(
+      wrapperHeadlineVisibilityNone(),
+    );
 
-        await expect(wrapper).to.be.accessible();
+    await elementUpdated(wrapper);
 
-        const dialog = wrapper.shadowRoot.querySelector('sp-dialog') as Dialog;
-        const divider = dialog.shadowRoot.querySelector(
-            'sp-divider.divider'
-        ) as Divider;
+    await expect(wrapper).to.be.accessible();
 
-        expect(divider).to.be.null;
-    });
-    it('dismisses via clicking the underlay when [dismissable]', async () => {
-        const test = await styledFixture(
-            wrapperDismissableUnderlayError()
-        );
-        const el = test.querySelector('sp-dialog-wrapper') as DialogWrapper;
-
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
-        el.dismissable = true;
-        const underlay = el.shadowRoot.querySelector('sp-underlay') as Underlay;
-
-        underlay.click();
-        await elementUpdated(el);
-        expect(el.open).to.be.false;
-    });
-    it('does not dismiss via clicking the underlay :not([dismissable])', async () => {
-        const el = await styledFixture(wrapperButtonsUnderlay());
+    const dialog = wrapper.shadowRoot.querySelector("sp-dialog") as Dialog;
+    const divider = dialog.shadowRoot.querySelector(
+      "sp-divider.divider",
+    ) as Divider;
 
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
-        const underlay = el.shadowRoot.querySelector('sp-underlay') as Underlay;
+    expect(divider).to.be.null;
+  });
+  it("dismisses via clicking the underlay when [dismissable]", async () => {
+    const test = await styledFixture(
+      wrapperDismissableUnderlayError(),
+    );
+    const el = test.querySelector("sp-dialog-wrapper") as DialogWrapper;
+
+    await elementUpdated(el);
+    expect(el.open).to.be.true;
+    el.dismissable = true;
+    const underlay = el.shadowRoot.querySelector("sp-underlay") as Underlay;
+
+    underlay.click();
+    await elementUpdated(el);
+    expect(el.open).to.be.false;
+  });
+  it("does not dismiss via clicking the underlay :not([dismissable])", async () => {
+    const el = await styledFixture(wrapperButtonsUnderlay());
+
+    await elementUpdated(el);
+    expect(el.open).to.be.true;
+    const underlay = el.shadowRoot.querySelector("sp-underlay") as Underlay;
+
+    underlay.click();
+    await elementUpdated(el);
+    expect(el.open).to.be.true;
+  });
+  it("dismisses", async () => {
+    const el = await styledFixture(wrapperDismissable());
+
+    await elementUpdated(el);
+    expect(el.open).to.be.true;
+
+    const root = el.shadowRoot ? el.shadowRoot : el;
+    const dialog = root.querySelector("sp-dialog") as Dialog;
+    const dialogRoot = dialog.shadowRoot ? dialog.shadowRoot : dialog;
+    const dismissButton = dialogRoot.querySelector(
+      ".close-button",
+    ) as HTMLButtonElement;
+
+    expect(dismissButton.ariaLabel).to.be.equals("Close");
+    dismissButton.click();
+
+    await elementUpdated(el);
+    expect(el.open).to.be.false;
+  });
+  it("manages entry focus - buttons", async () => {
+    const el = await styledFixture(wrapperButtons());
+
+    await elementUpdated(el);
+    expect(el.open).to.be.true;
+    expect(document.activeElement !== el, "no focused").to.be.true;
+
+    const button = el.shadowRoot.querySelector("sp-button") as Button;
+
+    el.focus();
+    await elementUpdated(el);
+    expect(
+      document.activeElement === el,
+      `focused generally, ${document.activeElement}`,
+    ).to.be.true;
+    expect(
+      (button.getRootNode() as Document).activeElement === button,
+      `focused specifically, ${
+        (button.getRootNode() as Document).activeElement?.outerHTML
+      }`,
+    ).to.be.true;
+  });
+  it("dispatches `confirm`, `cancel` and `secondary`", async () => {
+    const confirmSpy = spy();
+    const cancelSpy = spy();
+    const secondarySpy = spy();
+    const handleConfirm = (): void => confirmSpy();
+    const handleCancel = (): void => cancelSpy();
+    const handleSecondary = (): void => secondarySpy();
+    const el = await styledFixture(wrapperButtons());
+
+    el.addEventListener("confirm", handleConfirm);
+    el.addEventListener("cancel", handleCancel);
+    el.addEventListener("secondary", handleSecondary);
+
+    await elementUpdated(el);
+    expect(confirmSpy.called).to.be.false;
+    expect(cancelSpy.called).to.be.false;
+    expect(secondarySpy.called).to.be.false;
+
+    const accentButton = el.shadowRoot.querySelector(
+      '[variant="accent"]',
+    ) as Button;
+    const primaryButton = el.shadowRoot.querySelector(
+      '[variant="primary"]',
+    ) as Button;
+    const secondaryButton = el.shadowRoot.querySelector(
+      '[variant="secondary"]',
+    ) as Button;
+
+    accentButton.click();
+
+    await elementUpdated(el);
+    expect(confirmSpy.called, "dispatched `confirm`").to.be.true;
+    expect(secondarySpy.called).to.be.false;
+    expect(cancelSpy.called).to.be.false;
+
+    primaryButton.click();
+
+    await elementUpdated(el);
+    expect(confirmSpy.callCount).to.equal(1);
+    expect(secondarySpy.called, "dispatched `cancel`").to.be.true;
+    expect(cancelSpy.called).to.be.false;
+
+    secondaryButton.click();
+
+    await elementUpdated(el);
+    expect(confirmSpy.callCount).to.equal(1);
+    expect(secondarySpy.callCount).to.equal(1);
+    expect(cancelSpy.called, "dispatched `secondary`").to.be.true;
+  });
+
+  describe("dev mode", () => {
+    let consoleWarnStub!: SinonStub;
 
-        underlay.click();
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
+    before(() => {
+      consoleWarnStub = stub(console, "warn");
     });
-    it('dismisses', async () => {
-        const el = await styledFixture(wrapperDismissable());
-
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
-
-        const root = el.shadowRoot ? el.shadowRoot : el;
-        const dialog = root.querySelector('sp-dialog') as Dialog;
-        const dialogRoot = dialog.shadowRoot ? dialog.shadowRoot : dialog;
-        const dismissButton = dialogRoot.querySelector(
-            '.close-button'
-        ) as HTMLButtonElement;
-
-        expect(dismissButton.ariaLabel).to.be.equals('Close');
-        dismissButton.click();
-
-        await elementUpdated(el);
-        expect(el.open).to.be.false;
+    afterEach(() => {
+      consoleWarnStub.resetHistory();
     });
-    it('manages entry focus - buttons', async () => {
-        const el = await styledFixture(wrapperButtons());
-
-        await elementUpdated(el);
-        expect(el.open).to.be.true;
-        expect(document.activeElement !== el, 'no focused').to.be.true;
-
-        const button = el.shadowRoot.querySelector('sp-button') as Button;
-
-        el.focus();
-        await elementUpdated(el);
-        expect(
-            document.activeElement === el,
-            `focused generally, ${document.activeElement}`
-        ).to.be.true;
-        expect(
-            (button.getRootNode() as Document).activeElement === button,
-            `focused specifically, ${
-                (button.getRootNode() as Document).activeElement?.outerHTML
-            }`
-        ).to.be.true;
+    after(() => {
+      consoleWarnStub.restore();
     });
-    it('dispatches `confirm`, `cancel` and `secondary`', async () => {
-        const confirmSpy = spy();
-        const cancelSpy = spy();
-        const secondarySpy = spy();
-        const handleConfirm = (): void => confirmSpy();
-        const handleCancel = (): void => cancelSpy();
-        const handleSecondary = (): void => secondarySpy();
-        const el = await styledFixture(wrapperButtons());
-
-        el.addEventListener('confirm', handleConfirm);
-        el.addEventListener('cancel', handleCancel);
-        el.addEventListener('secondary', handleSecondary);
-
-        await elementUpdated(el);
-        expect(confirmSpy.called).to.be.false;
-        expect(cancelSpy.called).to.be.false;
-        expect(secondarySpy.called).to.be.false;
-
-        const accentButton = el.shadowRoot.querySelector(
-            '[variant="accent"]'
-        ) as Button;
-        const primaryButton = el.shadowRoot.querySelector(
-            '[variant="primary"]'
-        ) as Button;
-        const secondaryButton = el.shadowRoot.querySelector(
-            '[variant="secondary"]'
-        ) as Button;
-
-        accentButton.click();
-
-        await elementUpdated(el);
-        expect(confirmSpy.called, 'dispatched `confirm`').to.be.true;
-        expect(secondarySpy.called).to.be.false;
-        expect(cancelSpy.called).to.be.false;
-
-        primaryButton.click();
-
-        await elementUpdated(el);
-        expect(confirmSpy.callCount).to.equal(1);
-        expect(secondarySpy.called, 'dispatched `cancel`').to.be.true;
-        expect(cancelSpy.called).to.be.false;
-
-        secondaryButton.click();
-
-        await elementUpdated(el);
-        expect(confirmSpy.callCount).to.equal(1);
-        expect(secondarySpy.callCount).to.equal(1);
-        expect(cancelSpy.called, 'dispatched `secondary`').to.be.true;
+    it("warns in Dev Mode when accessible attributes are not leveraged", async () => {
+      const el = await fixture(html`
+        
+      `);
+
+      await elementUpdated(el);
+
+      expect(consoleWarnStub.called).to.be.true;
+      const spyCall = consoleWarnStub.getCall(0);
+
+      expect(
+        spyCall.args.at(0).includes("accessible"),
+        "confirm accessibility-centric message",
+      ).to.be.true;
+      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        data: {
+          localName: "sp-dialog-wrapper",
+          type: "accessibility",
+          level: "default",
+        },
+      });
     });
+  });
 
-    describe('dev mode', () => {
-        let consoleWarnStub!: SinonStub;
-
-        before(() => {
-            consoleWarnStub = stub(console, 'warn');
-        });
-        afterEach(() => {
-            consoleWarnStub.resetHistory();
-        });
-        after(() => {
-            consoleWarnStub.restore();
-        });
-        it('warns in Dev Mode when accessible attributes are not leveraged', async () => {
-            const el = await fixture(html`
-                
-            `);
-
-            await elementUpdated(el);
-
-            expect(consoleWarnStub.called).to.be.true;
-            const spyCall = consoleWarnStub.getCall(0);
-
-            expect(
-                spyCall.args.at(0).includes('accessible'),
-                'confirm accessibility-centric message'
-            ).to.be.true;
-            expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-                data: {
-                    localName: 'sp-dialog-wrapper',
-                    type: 'accessibility',
-                    level: 'default',
-                },
-            });
-        });
-    });
+  it("manages content element tabindex on resize observer time", async () => {
+    const imgReadyPromise = new Promise((res) => {
+      const img = document.createElement("img");
 
-    it('manages content element tabindex on resize observer time', async () => {
-        const imgReadyPromise = new Promise((res) => {
-            const img = document.createElement('img');
-
-            img.onload = res;
-            img.src = lazyHero.args.src;
-        });
-        const test = await styledFixture(lazyHero(lazyHero.args));
-        const dialog = document.querySelector(
-            'sp-dialog-wrapper'
-        ) as DialogWrapper;
-        const button = document.querySelector('sp-button') as Button;
-        const rect = button.getBoundingClientRect();
-        const contentElement = (
-            (dialog as unknown as { dialog: Dialog }).dialog as unknown as {
-                contentElement: HTMLElement;
-            }
-        ).contentElement;
-
-        expect(contentElement.hasAttribute('tabindex')).to.be.false;
-        await elementUpdated(dialog);
-        const opened = oneEvent(test, 'sp-opened');
-
-        await sendMouse({
-            steps: [
-                {
-                    position: [
-                        rect.left + rect.width / 2,
-                        rect.top + rect.height / 2,
-                    ],
-                    type: 'click',
-                },
-            ],
-        });
-        await opened;
-        await elementUpdated(dialog);
-        await imgReadyPromise;
-        // Resize observer timing.
-        await nextFrame();
-        await nextFrame();
-        expect(contentElement.hasAttribute('tabindex')).to.be.true;
+      img.onload = res;
+      img.src = lazyHero.args.src;
     });
+    const test = await styledFixture(lazyHero(lazyHero.args));
+    const dialog = document.querySelector("sp-dialog-wrapper") as DialogWrapper;
+    const button = document.querySelector("sp-button") as Button;
+    const rect = button.getBoundingClientRect();
+    const contentElement = (
+      (dialog as unknown as { dialog: Dialog }).dialog as unknown as {
+        contentElement: HTMLElement;
+      }
+    ).contentElement;
+
+    expect(contentElement.hasAttribute("tabindex")).to.be.false;
+    await elementUpdated(dialog);
+    const opened = oneEvent(test, "sp-opened");
+
+    await sendMouse({
+      steps: [
+        {
+          position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+          type: "click",
+        },
+      ],
+    });
+    await opened;
+    await elementUpdated(dialog);
+    await imgReadyPromise;
+    // Resize observer timing.
+    await nextFrame();
+    await nextFrame();
+    expect(contentElement.hasAttribute("tabindex")).to.be.true;
+  });
 });
 
-describe('dev mode', () => {
-    let consoleWarnStub!: ReturnType;
-
-    before(() => {
-        window.__swc.verbose = true;
-        consoleWarnStub = stub(console, 'warn');
-    });
-    afterEach(() => {
-        consoleWarnStub.resetHistory();
-    });
-    after(() => {
-        window.__swc.verbose = false;
-        consoleWarnStub.restore();
-    });
+describe("dev mode", () => {
+  let consoleWarnStub!: ReturnType;
+
+  before(() => {
+    window.__swc.verbose = true;
+    consoleWarnStub = stub(console, "warn");
+  });
+  afterEach(() => {
+    consoleWarnStub.resetHistory();
+  });
+  after(() => {
+    window.__swc.verbose = false;
+    consoleWarnStub.restore();
+  });
 });
diff --git a/packages/dialog/test/dialog.test.ts b/packages/dialog/test/dialog.test.ts
index ae912ba1c4..0bbb582709 100644
--- a/packages/dialog/test/dialog.test.ts
+++ b/packages/dialog/test/dialog.test.ts
@@ -11,298 +11,280 @@ governing permissions and limitations under the License.
 */
 
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    nextFrame,
-} from '@open-wc/testing';
-import { TemplateResult } from '@spectrum-web-components/base';
-
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import { Dialog } from '@spectrum-web-components/dialog';
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+} from "@open-wc/testing";
+import { TemplateResult } from "@spectrum-web-components/base";
+
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import { Dialog } from "@spectrum-web-components/dialog";
 import {
-    alertError,
-    dismissable,
-    fullscreen,
-    small,
-} from '../stories/dialog.stories.js';
-import { spy, stub } from 'sinon';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('Dialog', () => {
-    testForLitDevWarnings(async () => await fixture(small()));
-    it('loads `[size=small]` dialog accessibly', async () => {
-        const el = await fixture(small());
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-    it('loads `[size=alert]` dialog accessibly', async () => {
-        const el = await fixture(alertError());
+  alertError,
+  dismissable,
+  fullscreen,
+  small,
+} from "../stories/dialog.stories.js";
+import { spy, stub } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 
-        await elementUpdated(el);
+describe("Dialog", () => {
+  testForLitDevWarnings(async () => await fixture(small()));
+  it("loads `[size=small]` dialog accessibly", async () => {
+    const el = await fixture(small());
 
-        await expect(el).to.be.accessible();
-    });
-    it('loads `[dismissable]` dialog accessibly', async () => {
-        const el = await fixture(dismissable());
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("loads `[size=alert]` dialog accessibly", async () => {
+    const el = await fixture(alertError());
 
-        await expect(el).to.be.accessible();
-    });
-    it('loads `[mode=fullscreen]` dialog accessibly', async () => {
-        const el = await fixture(fullscreen());
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("loads `[dismissable]` dialog accessibly", async () => {
+    const el = await fixture(dismissable());
 
-        await expect(el).to.be.accessible();
-    });
-    it('loads dialog without footer accessibly', async () => {
-        const el = await fixture(small());
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("loads `[mode=fullscreen]` dialog accessibly", async () => {
+    const el = await fixture(fullscreen());
 
-        await expect(el).to.be.accessible();
-    });
-    it('does not recycle applied content ids', async () => {
-        const el = await fixture(html`
-            
-                
Disclaimer

-            
-        `);
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    await expect(el).to.be.accessible();
+  });
+  it("loads dialog without footer accessibly", async () => {
+    const el = await fixture(small());
 
-        await expect(el).to.be.accessible();
+    await elementUpdated(el);
 
-        const paragraph = document.createElement('p');
+    await expect(el).to.be.accessible();
+  });
+  it("does not recycle applied content ids", async () => {
+    const el = await fixture(html`
+      
+        
Disclaimer

+      
+    `);
 
-        paragraph.textContent = 'Added paragraph.';
+    await elementUpdated(el);
 
-        el.querySelector('p')?.remove();
-        el.insertAdjacentElement('beforeend', paragraph);
+    await expect(el).to.be.accessible();
 
-        // Slotchange time exists outside of the standard update lifecycle
-        await nextFrame();
+    const paragraph = document.createElement("p");
 
-        await elementUpdated(el);
+    paragraph.textContent = "Added paragraph.";
 
-        await expect(el).to.be.accessible();
+    el.querySelector("p")?.remove();
+    el.insertAdjacentElement("beforeend", paragraph);
 
-        paragraph.querySelector('p')?.remove();
+    // Slotchange time exists outside of the standard update lifecycle
+    await nextFrame();
 
-        // Slotchange time exists outside of the standard update lifecycle
-        await nextFrame();
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    await expect(el).to.be.accessible();
 
-        await expect(el).to.be.accessible();
+    paragraph.querySelector("p")?.remove();
 
-        el.insertAdjacentElement('beforeend', paragraph);
+    // Slotchange time exists outside of the standard update lifecycle
+    await nextFrame();
 
-        // Slotchange time exists outside of the standard update lifecycle
-        await nextFrame();
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    await expect(el).to.be.accessible();
 
-        await expect(el).to.be.accessible();
+    el.insertAdjacentElement("beforeend", paragraph);
 
-        const heading = document.createElement('h2');
+    // Slotchange time exists outside of the standard update lifecycle
+    await nextFrame();
 
-        heading.slot = 'heading';
-        heading.textContent = 'New heading';
+    await elementUpdated(el);
 
-        el.querySelector('h2')?.remove();
-        el.insertAdjacentElement('afterbegin', heading);
+    await expect(el).to.be.accessible();
 
-        // Slotchange time exists outside of the standard update lifecycle
-        await nextFrame();
+    const heading = document.createElement("h2");
 
-        await elementUpdated(el);
+    heading.slot = "heading";
+    heading.textContent = "New heading";
 
-        await expect(el).to.be.accessible();
-    });
-    it('closes', async () => {
-        const closeSpy = spy();
-        const el = await fixture(dismissable());
+    el.querySelector("h2")?.remove();
+    el.insertAdjacentElement("afterbegin", heading);
 
-        el.addEventListener('close', () => closeSpy());
-        await elementUpdated(el);
+    // Slotchange time exists outside of the standard update lifecycle
+    await nextFrame();
 
-        const closeButton = (
-            el.shadowRoot
-                ? el.shadowRoot.querySelector('.close-button')
-                : el.querySelector('.close-button ')
-        ) as HTMLElement;
+    await elementUpdated(el);
 
-        expect(closeButton.ariaLabel).to.be.equals('Close');
+    await expect(el).to.be.accessible();
+  });
+  it("closes", async () => {
+    const closeSpy = spy();
+    const el = await fixture(dismissable());
 
-        closeButton.click();
+    el.addEventListener("close", () => closeSpy());
+    await elementUpdated(el);
 
-        await elementUpdated(el);
-        expect(closeSpy.calledOnce).to.be.true;
-    });
-    it('allows hero override', async () => {
-        class Override extends Dialog {
-            protected override get hasHero(): boolean {
-                return true;
-            }
-            protected override renderHero(): TemplateResult {
-                return html`
-                    

-                `;
-            }
-        }
-
-        customElements.define('hero-dialog', Override);
-
-        const el = await fixture(html`
-            
-        `);
-
-        const container = el.shadowRoot.querySelector('#hero-container');
-
-        expect(container).to.not.be.null;
-    });
-    it('allows heading override', async () => {
-        class Override extends Dialog {
-            protected override renderHeading(): TemplateResult {
-                return html`
-                    
Test

-                `;
-            }
-        }
+    const closeButton = (
+      el.shadowRoot
+        ? el.shadowRoot.querySelector(".close-button")
+        : el.querySelector(".close-button ")
+    ) as HTMLElement;
 
-        customElements.define('heading-dialog', Override);
+    expect(closeButton.ariaLabel).to.be.equals("Close");
 
-        const el = await fixture(html`
-            
-        `);
+    closeButton.click();
 
-        const container = el.shadowRoot.querySelector('#heading-container');
+    await elementUpdated(el);
+    expect(closeSpy.calledOnce).to.be.true;
+  });
+  it("allows hero override", async () => {
+    class Override extends Dialog {
+      protected override get hasHero(): boolean {
+        return true;
+      }
+      protected override renderHero(): TemplateResult {
+        return html` 
 `;
+      }
+    }
 
-        expect(container).to.not.be.null;
-    });
-    it('allows content override', async () => {
-        class Override extends Dialog {
-            protected override renderContent(): TemplateResult {
-                return html`
-                    
Test

-                `;
-            }
-        }
+    customElements.define("hero-dialog", Override);
 
-        customElements.define('content-dialog', Override);
+    const el = await fixture(html`  `);
 
-        const el = await fixture(html`
-            
-        `);
+    const container = el.shadowRoot.querySelector("#hero-container");
 
-        const container = el.shadowRoot.querySelector('#content-container');
+    expect(container).to.not.be.null;
+  });
+  it("allows heading override", async () => {
+    class Override extends Dialog {
+      protected override renderHeading(): TemplateResult {
+        return html` 
Test
 `;
+      }
+    }
 
-        expect(container).to.not.be.null;
-    });
-    it('allows footer override', async () => {
-        class Override extends Dialog {
-            protected override get hasFooter(): boolean {
-                return true;
-            }
-            protected override renderFooter(): TemplateResult {
-                return html`
-                    
-                `;
-            }
-        }
-
-        customElements.define('footer-dialog', Override);
-
-        const el = await fixture(html`
-            
-        `);
-
-        const container = el.shadowRoot.querySelector('#footer-container');
-
-        expect(container).to.not.be.null;
-    });
-    it('allows button override', async () => {
-        class Override extends Dialog {
-            protected override get hasButtons(): boolean {
-                return true;
-            }
-            protected override renderButtons(): TemplateResult {
-                return html`
-                    
Test

-                `;
-            }
-        }
-
-        customElements.define('button-dialog', Override);
-
-        const el = await fixture(html`
-            
-        `);
-
-        const container = el.shadowRoot.querySelector('#button-container');
-
-        expect(container).to.not.be.null;
-    });
-    it('allows dismiss override', async () => {
-        class Override extends Dialog {
-            protected override renderDismiss(): TemplateResult {
-                return html`
-                    
Test

-                `;
-            }
-        }
+    customElements.define("heading-dialog", Override);
 
-        customElements.define('dismiss-dialog', Override);
+    const el = await fixture(html`
+      
+    `);
 
-        const el = await fixture(html`
-            
-        `);
+    const container = el.shadowRoot.querySelector("#heading-container");
 
-        const container = el.shadowRoot.querySelector('#dismiss-container');
+    expect(container).to.not.be.null;
+  });
+  it("allows content override", async () => {
+    class Override extends Dialog {
+      protected override renderContent(): TemplateResult {
+        return html` 
Test
 `;
+      }
+    }
 
-        expect(container).to.not.be.null;
-    });
-});
+    customElements.define("content-dialog", Override);
 
-describe('dev mode', () => {
-    let consoleWarnStub!: ReturnType;
+    const el = await fixture(html`
+      
+    `);
 
-    before(() => {
-        window.__swc.verbose = true;
-        consoleWarnStub = stub(console, 'warn');
-    });
-    afterEach(() => {
-        consoleWarnStub.resetHistory();
-    });
-    after(() => {
-        window.__swc.verbose = false;
-        consoleWarnStub.restore();
-    });
+    const container = el.shadowRoot.querySelector("#content-container");
+
+    expect(container).to.not.be.null;
+  });
+  it("allows footer override", async () => {
+    class Override extends Dialog {
+      protected override get hasFooter(): boolean {
+        return true;
+      }
+      protected override renderFooter(): TemplateResult {
+        return html`  `;
+      }
+    }
+
+    customElements.define("footer-dialog", Override);
+
+    const el = await fixture(html`  `);
+
+    const container = el.shadowRoot.querySelector("#footer-container");
+
+    expect(container).to.not.be.null;
+  });
+  it("allows button override", async () => {
+    class Override extends Dialog {
+      protected override get hasButtons(): boolean {
+        return true;
+      }
+      protected override renderButtons(): TemplateResult {
+        return html` 
Test
 `;
+      }
+    }
+
+    customElements.define("button-dialog", Override);
+
+    const el = await fixture(html`  `);
+
+    const container = el.shadowRoot.querySelector("#button-container");
+
+    expect(container).to.not.be.null;
+  });
+  it("allows dismiss override", async () => {
+    class Override extends Dialog {
+      protected override renderDismiss(): TemplateResult {
+        return html` 
Test
 `;
+      }
+    }
+
+    customElements.define("dismiss-dialog", Override);
+
+    const el = await fixture(html`
+      
+    `);
+
+    const container = el.shadowRoot.querySelector("#dismiss-container");
+
+    expect(container).to.not.be.null;
+  });
+});
 
-    it('warns that `error` is deprecated', async () => {
-        const el = await fixture(alertError());
-
-        await elementUpdated(el);
-
-        expect(consoleWarnStub.called).to.be.true;
-        const spyCall = consoleWarnStub.getCall(0);
-
-        expect(
-            (spyCall.args.at(0) as string).includes('"error"'),
-            'confirm error-centric message'
-        ).to.be.true;
-        expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-            data: {
-                localName: 'sp-dialog',
-                type: 'api',
-                level: 'deprecation',
-            },
-        });
+describe("dev mode", () => {
+  let consoleWarnStub!: ReturnType;
+
+  before(() => {
+    window.__swc.verbose = true;
+    consoleWarnStub = stub(console, "warn");
+  });
+  afterEach(() => {
+    consoleWarnStub.resetHistory();
+  });
+  after(() => {
+    window.__swc.verbose = false;
+    consoleWarnStub.restore();
+  });
+
+  it("warns that `error` is deprecated", async () => {
+    const el = await fixture(alertError());
+
+    await elementUpdated(el);
+
+    expect(consoleWarnStub.called).to.be.true;
+    const spyCall = consoleWarnStub.getCall(0);
+
+    expect(
+      (spyCall.args.at(0) as string).includes('"error"'),
+      "confirm error-centric message",
+    ).to.be.true;
+    expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+      data: {
+        localName: "sp-dialog",
+        type: "api",
+        level: "deprecation",
+      },
     });
+  });
 });
diff --git a/packages/divider/sp-divider.ts b/packages/divider/sp-divider.ts
index ec20e3d939..de5a3ac84c 100644
--- a/packages/divider/sp-divider.ts
+++ b/packages/divider/sp-divider.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Divider } from './src/Divider.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Divider } from "./src/Divider.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-divider', Divider);
+defineElement("sp-divider", Divider);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-divider': Divider;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-divider": Divider;
+  }
 }
diff --git a/packages/divider/src/Divider.ts b/packages/divider/src/Divider.ts
index 756361b1a6..b7258aebc3 100644
--- a/packages/divider/src/Divider.ts
+++ b/packages/divider/src/Divider.ts
@@ -11,47 +11,47 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
 
-import styles from './divider.css.js';
+import styles from "./divider.css.js";
 
 /**
  * @element sp-divider
  */
 export class Divider extends SizedMixin(SpectrumElement, {
-    validSizes: ['s', 'm', 'l'],
-    noDefaultSize: true,
+  validSizes: ["s", "m", "l"],
+  noDefaultSize: true,
 }) {
-    public static override styles: CSSResultArray = [styles];
+  public static override styles: CSSResultArray = [styles];
 
-    @property({ type: Boolean, reflect: true })
-    public vertical = false;
+  @property({ type: Boolean, reflect: true })
+  public vertical = false;
 
-    protected override render(): TemplateResult {
-        return html``;
-    }
+  protected override render(): TemplateResult {
+    return html``;
+  }
 
-    protected override firstUpdated(changed: PropertyValues): void {
-        super.firstUpdated(changed);
-        this.setAttribute('role', 'separator');
-    }
+  protected override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+    this.setAttribute("role", "separator");
+  }
 
-    protected override updated(changed: PropertyValues): void {
-        super.updated(changed);
+  protected override updated(changed: PropertyValues): void {
+    super.updated(changed);
 
-        if (changed.has('vertical')) {
-            if (this.vertical) {
-                this.setAttribute('aria-orientation', 'vertical');
-            } else {
-                this.removeAttribute('aria-orientation');
-            }
-        }
+    if (changed.has("vertical")) {
+      if (this.vertical) {
+        this.setAttribute("aria-orientation", "vertical");
+      } else {
+        this.removeAttribute("aria-orientation");
+      }
     }
+  }
 }
diff --git a/packages/divider/src/index.ts b/packages/divider/src/index.ts
index f316fc0d09..3af8262afe 100644
--- a/packages/divider/src/index.ts
+++ b/packages/divider/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './Divider.js';
+export * from "./Divider.js";
diff --git a/packages/divider/stories/divider.stories.ts b/packages/divider/stories/divider.stories.ts
index df6e9e38ed..6ebef1cd42 100644
--- a/packages/divider/stories/divider.stories.ts
+++ b/packages/divider/stories/divider.stories.ts
@@ -9,110 +9,109 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/divider/sp-divider.js';
-import './typography-decorator.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-left.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-right.js';
+import "@spectrum-web-components/divider/sp-divider.js";
+import "./typography-decorator.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-align-left.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-align-right.js";
 
 export default {
-    title: 'Divider',
-    decorators: [
-        (story: () => TemplateResult): TemplateResult => html`
-            
-        `,
-    ],
+  title: "Divider",
+  decorators: [
+    (story: () => TemplateResult): TemplateResult => html`
+      
+    `,
+  ],
 };
 
 export const large = (): TemplateResult => {
-    return html`
-        
Large

-        
-        
Page or Section Titles.

-    `;
+  return html`
+    
Large

+    
+    
Page or Section Titles.

+  `;
 };
 
 export const medium = (): TemplateResult => {
-    return html`
-        
Medium

-        
-        

-            Divide subsections, or divide different groups of elements (between
-            panels, rails, etc.)
-        

-    `;
+  return html`
+    
Medium

+    
+    

+      Divide subsections, or divide different groups of elements (between
+      panels, rails, etc.)
+    

+  `;
 };
 
 export const small = (): TemplateResult => {
-    return html`
-        
Small

-        
-        

-            Divide like-elements (tables, tool groups, elements within a panel,
-            etc.)
-        

-    `;
+  return html`
+    
Small

+    
+    

+      Divide like-elements (tables, tool groups, elements within a panel, etc.)
+    

+  `;
 };
 
 export const verticalSmall = (): TemplateResult => {
-    return html`
-        

-            
-                
-            
-            
-            
-                
-            
-        

-    `;
+  return html`
+    

+      
+        
+      
+      
+      
+        
+      
+    

+  `;
 };
 
 export const verticalMedium = (): TemplateResult => {
-    return html`
-        

-            
-                
-            
-            
-            
-                
-            
-        

-    `;
+  return html`
+    

+      
+        
+      
+      
+      
+        
+      
+    

+  `;
 };
 
 export const verticalLarge = (): TemplateResult => {
-    return html`
-        

-            
-                
-            
-            
-            
-                
-            
-        

-    `;
+  return html`
+    

+      
+        
+      
+      
+      
+        
+      
+    

+  `;
 };
diff --git a/packages/divider/stories/typography-decorator.ts b/packages/divider/stories/typography-decorator.ts
index d23f7388db..980ab9ef9d 100644
--- a/packages/divider/stories/typography-decorator.ts
+++ b/packages/divider/stories/typography-decorator.ts
@@ -10,33 +10,33 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    LitElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  LitElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    customElement,
-    property,
-} from '@spectrum-web-components/base/src/decorators.js';
+  customElement,
+  property,
+} from "@spectrum-web-components/base/src/decorators.js";
 
-import styles from '@spectrum-web-components/theme/src/typography.css.js';
+import styles from "@spectrum-web-components/theme/src/typography.css.js";
 
 /**
  * @element typography-decorator
  */
-@customElement('typography-decorator')
+@customElement("typography-decorator")
 export class Typography extends LitElement {
-    static override styles: CSSResultArray = [styles];
+  static override styles: CSSResultArray = [styles];
 
-    @property({ attribute: false })
-    public story?: TemplateResult;
+  @property({ attribute: false })
+  public story?: TemplateResult;
 
-    protected override render(): TemplateResult {
-        if (!this.story) return html``;
-
-        return html`
-            
${this.story}

-        `;
+  protected override render(): TemplateResult {
+    if (!this.story) {
+      return html``;
     }
+
+    return html` 
${this.story}
 `;
+  }
 }
diff --git a/packages/divider/test/benchmark/basic-test.ts b/packages/divider/test/benchmark/basic-test.ts
index 4b505146ed..f611c66142 100644
--- a/packages/divider/test/benchmark/basic-test.ts
+++ b/packages/divider/test/benchmark/basic-test.ts
@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/divider/sp-divider.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/divider/sp-divider.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/divider/test/divider-memory.test.ts b/packages/divider/test/divider-memory.test.ts
index 2e602fa018..de884d9dcd 100644
--- a/packages/divider/test/divider-memory.test.ts
+++ b/packages/divider/test/divider-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/divider/sp-divider.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/divider/sp-divider.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/divider/test/divider.test.ts b/packages/divider/test/divider.test.ts
index 0e3ed6f680..bbce279b1c 100644
--- a/packages/divider/test/divider.test.ts
+++ b/packages/divider/test/divider.test.ts
@@ -10,41 +10,30 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-
-import '@spectrum-web-components/divider/sp-divider.js';
-import { Divider } from '@spectrum-web-components/divider';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('Divider', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(
-                html`
-                    
-                `
-            )
-    );
-    it('loads default divider accessibly', async () => {
-        const el = await fixture(
-            html`
-                
-            `
-        );
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-    it('loads [vertical] divider accessibly', async () => {
-        const el = await fixture(
-            html`
-                
-            `
-        );
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+
+import "@spectrum-web-components/divider/sp-divider.js";
+import { Divider } from "@spectrum-web-components/divider";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+describe("Divider", () => {
+  testForLitDevWarnings(
+    async () => await fixture(html`  `),
+  );
+  it("loads default divider accessibly", async () => {
+    const el = await fixture(html`  `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("loads [vertical] divider accessibly", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
 });
diff --git a/packages/dropzone/sp-dropzone.ts b/packages/dropzone/sp-dropzone.ts
index 256714437f..992f5c270c 100644
--- a/packages/dropzone/sp-dropzone.ts
+++ b/packages/dropzone/sp-dropzone.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Dropzone } from './src/Dropzone.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Dropzone } from "./src/Dropzone.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-dropzone', Dropzone);
+defineElement("sp-dropzone", Dropzone);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-dropzone': Dropzone;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-dropzone": Dropzone;
+  }
 }
diff --git a/packages/dropzone/src/Dropzone.ts b/packages/dropzone/src/Dropzone.ts
index 8cea4e5def..55518e8dd5 100644
--- a/packages/dropzone/src/Dropzone.ts
+++ b/packages/dropzone/src/Dropzone.ts
@@ -11,18 +11,18 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+  CSSResultArray,
+  html,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
 
-import dropzoneStyles from './dropzone.css.js';
+import dropzoneStyles from "./dropzone.css.js";
 
 export type DropzoneEventDetail = DragEvent;
 
-export type DropEffects = 'copy' | 'move' | 'link' | 'none';
+export type DropEffects = "copy" | "move" | "link" | "none";
 
 /**
  * @element sp-dropzone
@@ -39,143 +39,141 @@ export type DropEffects = 'copy' | 'move' | 'link' | 'none';
  * @fires sp-dropzone-drop - Announces when dragged files have been dropped on the UI.
  */
 export class Dropzone extends SpectrumElement {
-    public static override get styles(): CSSResultArray {
-        return [dropzoneStyles];
+  public static override get styles(): CSSResultArray {
+    return [dropzoneStyles];
+  }
+
+  /**
+   * Controls the feedback (typically visual) the user is given during a drag and drop operation
+   *
+   * @type {'copy' | 'move' | 'link' | 'none'}
+   *
+   * @attribute
+   *
+   */
+  public get dropEffect(): DropEffects {
+    return this._dropEffect;
+  }
+  public set dropEffect(value: DropEffects) {
+    if (["copy", "move", "link", "none"].includes(value)) {
+      this._dropEffect = value;
     }
-
-    /**
-     * Controls the feedback (typically visual) the user is given during a drag and drop operation
-     *
-     * @type {'copy' | 'move' | 'link' | 'none'}
-     *
-     * @attribute
-     *
-     */
-    public get dropEffect(): DropEffects {
-        return this._dropEffect;
-    }
-    public set dropEffect(value: DropEffects) {
-        if (['copy', 'move', 'link', 'none'].includes(value)) {
-            this._dropEffect = value;
-        }
+  }
+  private _dropEffect: DropEffects = "copy";
+
+  /**
+   * Indicates that files are currently being dragged over the dropzone.
+   */
+  @property({ type: Boolean, reflect: true, attribute: "dragged" })
+  public isDragged = false;
+
+  /**
+   * Set this property to indicate that the component is in a filled state.
+   */
+  @property({ type: Boolean, attribute: "filled" })
+  public isFilled = false;
+
+  private debouncedDragLeave: number | null = null;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.addEventListener("drop", this.onDrop);
+    this.addEventListener("dragover", this.onDragOver);
+    this.addEventListener("dragleave", this.onDragLeave);
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    this.removeEventListener("drop", this.onDrop);
+    this.removeEventListener("dragover", this.onDragOver);
+    this.removeEventListener("dragleave", this.onDragLeave);
+  }
+
+  public onDragOver(event: DragEvent): void {
+    const shouldAcceptEvent = new CustomEvent("sp-dropzone-should-accept", {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: event,
+    });
+    const shouldAccept = this.dispatchEvent(shouldAcceptEvent);
+
+    if (!event.dataTransfer) {
+      return;
     }
-    private _dropEffect: DropEffects = 'copy';
-
-    /**
-     * Indicates that files are currently being dragged over the dropzone.
-     */
-    @property({ type: Boolean, reflect: true, attribute: 'dragged' })
-    public isDragged = false;
-
-    /**
-     * Set this property to indicate that the component is in a filled state.
-     */
-    @property({ type: Boolean, attribute: 'filled' })
-    public isFilled = false;
-
-    private debouncedDragLeave: number | null = null;
 
-    public override connectedCallback(): void {
-        super.connectedCallback();
+    if (!shouldAccept) {
+      event.dataTransfer.dropEffect = "none";
 
-        this.addEventListener('drop', this.onDrop);
-        this.addEventListener('dragover', this.onDragOver);
-        this.addEventListener('dragleave', this.onDragLeave);
+      return;
     }
 
-    public override disconnectedCallback(): void {
-        super.disconnectedCallback();
+    event.preventDefault();
 
-        this.removeEventListener('drop', this.onDrop);
-        this.removeEventListener('dragover', this.onDragOver);
-        this.removeEventListener('dragleave', this.onDragLeave);
-    }
+    this.clearDebouncedDragLeave();
 
-    public onDragOver(event: DragEvent): void {
-        const shouldAcceptEvent = new CustomEvent('sp-dropzone-should-accept', {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail: event,
-        });
-        const shouldAccept = this.dispatchEvent(shouldAcceptEvent);
+    this.isDragged = true;
 
-        if (!event.dataTransfer) {
-            return;
-        }
+    event.dataTransfer.dropEffect = this.dropEffect;
+    const dragOverEvent = new CustomEvent("sp-dropzone-dragover", {
+      bubbles: true,
+      composed: true,
+      detail: event,
+    });
 
-        if (!shouldAccept) {
-            event.dataTransfer.dropEffect = 'none';
+    this.dispatchEvent(dragOverEvent);
+  }
 
-            return;
-        }
+  public onDragLeave(event: DragEvent): void {
+    this.clearDebouncedDragLeave();
 
-        event.preventDefault();
+    this.debouncedDragLeave = window.setTimeout(() => {
+      this.isDragged = false;
 
-        this.clearDebouncedDragLeave();
+      const dragLeave = new CustomEvent("sp-dropzone-dragleave", {
+        bubbles: true,
+        composed: true,
+        detail: event,
+      });
 
-        this.isDragged = true;
+      this.dispatchEvent(dragLeave);
+    }, 100);
+  }
 
-        event.dataTransfer.dropEffect = this.dropEffect;
-        const dragOverEvent = new CustomEvent('sp-dropzone-dragover', {
-            bubbles: true,
-            composed: true,
-            detail: event,
-        });
+  public onDrop(event: DragEvent): void {
+    event.preventDefault();
 
-        this.dispatchEvent(dragOverEvent);
-    }
+    this.clearDebouncedDragLeave();
 
-    public onDragLeave(event: DragEvent): void {
-        this.clearDebouncedDragLeave();
+    this.isDragged = false;
+    const dropEvent = new CustomEvent("sp-dropzone-drop", {
+      bubbles: true,
+      composed: true,
+      detail: event,
+    });
 
-        this.debouncedDragLeave = window.setTimeout(() => {
-            this.isDragged = false;
+    this.dispatchEvent(dropEvent);
+  }
 
-            const dragLeave = new CustomEvent('sp-dropzone-dragleave', {
-                bubbles: true,
-                composed: true,
-                detail: event,
-            });
+  protected override render(): TemplateResult {
+    return html`  `;
+  }
 
-            this.dispatchEvent(dragLeave);
-        }, 100);
-    }
-
-    public onDrop(event: DragEvent): void {
-        event.preventDefault();
-
-        this.clearDebouncedDragLeave();
-
-        this.isDragged = false;
-        const dropEvent = new CustomEvent('sp-dropzone-drop', {
-            bubbles: true,
-            composed: true,
-            detail: event,
-        });
-
-        this.dispatchEvent(dropEvent);
-    }
-
-    protected override render(): TemplateResult {
-        return html`
-            
-        `;
-    }
-
-    protected clearDebouncedDragLeave(): void {
-        if (this.debouncedDragLeave) {
-            clearTimeout(this.debouncedDragLeave);
-            this.debouncedDragLeave = null;
-        }
+  protected clearDebouncedDragLeave(): void {
+    if (this.debouncedDragLeave) {
+      clearTimeout(this.debouncedDragLeave);
+      this.debouncedDragLeave = null;
     }
+  }
 }
 
 declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-dropzone:should-accept': CustomEvent;
-        'sp-dropzone:dragover': CustomEvent;
-        'sp-dropzone:dragleave': CustomEvent;
-        'sp-dropzone:drop': CustomEvent;
-    }
+  interface GlobalEventHandlersEventMap {
+    "sp-dropzone:should-accept": CustomEvent;
+    "sp-dropzone:dragover": CustomEvent;
+    "sp-dropzone:dragleave": CustomEvent;
+    "sp-dropzone:drop": CustomEvent;
+  }
 }
diff --git a/packages/dropzone/src/index.ts b/packages/dropzone/src/index.ts
index 8c8320401d..fabc4a8f13 100644
--- a/packages/dropzone/src/index.ts
+++ b/packages/dropzone/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Dropzone.js';
+export * from "./Dropzone.js";
diff --git a/packages/dropzone/stories/dropzone.stories.ts b/packages/dropzone/stories/dropzone.stories.ts
index 3340c6abef..d3090044d7 100644
--- a/packages/dropzone/stories/dropzone.stories.ts
+++ b/packages/dropzone/stories/dropzone.stories.ts
@@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-	html,
-	LitElement,
-	TemplateResult,
+  html,
+  LitElement,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 import { state } from "@spectrum-web-components/base/src/decorators.js";
@@ -24,182 +24,182 @@ import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js";
 import "@spectrum-web-components/link/sp-link.js";
 
 export default {
-	component: "sp-dropzone",
-	title: "Dropzone",
-	args: {
-		isDragged: false,
-		isFilled: false,
-	},
-	argTypes: {
-		isDragged: {
-			name: "isDragged",
-			type: { name: "boolean", required: false },
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: {
-				type: "boolean",
-			},
-		},
-		isFilled: {
-			name: "isFilled",
-			type: { name: "boolean", required: false },
-			table: {
-				type: { summary: "boolean" },
-				defaultValue: { summary: false },
-			},
-			control: {
-				type: "boolean",
-			},
-		},
-	},
+  component: "sp-dropzone",
+  title: "Dropzone",
+  args: {
+    isDragged: false,
+    isFilled: false,
+  },
+  argTypes: {
+    isDragged: {
+      name: "isDragged",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    isFilled: {
+      name: "isFilled",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+  },
 };
 
 type StoryArgs = {
-	isDragged?: boolean;
-	isFilled?: boolean;
+  isDragged?: boolean;
+  isFilled?: boolean;
 };
 
 export const Default = (args: StoryArgs): TemplateResult => {
-	return html`
-		
-			
-				${illustration}
-			
-			

-				
-				
-			

-			

-				or
-				
-					Search Adobe Stock
-				
-			

-		
-	`;
+  return html`
+    
+      
+        ${illustration}
+      
+      

+        
+        
+      

+      

+        or
+        
+          Search Adobe Stock
+        
+      

+    
+  `;
 };
 
 export const Dragged = (args: StoryArgs): TemplateResult => {
-	return html`
-		
-			
-				${illustration}
-			
-			

-				
-				
-			

-			

-				or
-				
-					Search Adobe Stock
-				
-			

-		
-	`;
+  return html`
+    
+      
+        ${illustration}
+      
+      

+        
+        
+      

+      

+        or
+        
+          Search Adobe Stock
+        
+      

+    
+  `;
 };
 Dragged.args = {
-	isDragged: true,
+  isDragged: true,
 };
 
 export const Filled = (args: StoryArgs): TemplateResult => {
-	return html`
-		
-			Filled dropzone
-		
-	`;
+  return html`
+    
+      Filled dropzone
+    
+  `;
 };
 Filled.args = {
-	isFilled: true,
+  isFilled: true,
 };
 
 class ControlledDropzone extends LitElement {
-	@state()
-	private beingDraggedOver: boolean = false;
+  @state()
+  private beingDraggedOver: boolean = false;
 
-	@state()
-	private input?: string = undefined;
+  @state()
+  private input?: string = undefined;
 
-	override render(): TemplateResult {
-		return html`
-			
-				
-					Drag me
-				
-				
-					
-						${illustration}
-					
-					

-						
-						
-					

-				
-			
-		`;
-	}
+  override render(): TemplateResult {
+    return html`
+      
+        
+          Drag me
+        
+        
+          
+            ${illustration}
+          
+          

+            
+            
+          

+        
+      
+    `;
+  }
 
-	private onChange(): void {
-		this.input = "mock-file";
-		this.beingDraggedOver = false;
-	}
+  private onChange(): void {
+    this.input = "mock-file";
+    this.beingDraggedOver = false;
+  }
 
-	private onDragOver(): void {
-		this.beingDraggedOver = true;
-	}
+  private onDragOver(): void {
+    this.beingDraggedOver = true;
+  }
 
-	private onDragLeave(): void {
-		this.beingDraggedOver = false;
-	}
+  private onDragLeave(): void {
+    this.beingDraggedOver = false;
+  }
 }
 defineElement("controlled-dropzone", ControlledDropzone);
 
 export const Controlled = (): TemplateResult => {
-	return html`  `;
+  return html`  `;
 };
diff --git a/packages/dropzone/test/benchmark/test-basic.ts b/packages/dropzone/test/benchmark/test-basic.ts
index 5ba759c525..2239ae7fed 100644
--- a/packages/dropzone/test/benchmark/test-basic.ts
+++ b/packages/dropzone/test/benchmark/test-basic.ts
@@ -10,32 +10,32 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/dropzone/sp-dropzone.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/dropzone/sp-dropzone.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
-            
-                
-            
-        
+  
+    
+      
+        
+      
+    
 
-        

-            

-                
-                
-            

-            

-                or
-                
-                    Search Adobe Stock
-                
-            

-        

-    
+    

+      

+        
+        
+      

+      

+        or
+        
+          Search Adobe Stock
+        
+      

+    

+  
 `);
diff --git a/packages/dropzone/test/dropzone-memory.test.ts b/packages/dropzone/test/dropzone-memory.test.ts
index 41a334a306..8ea442e34b 100644
--- a/packages/dropzone/test/dropzone-memory.test.ts
+++ b/packages/dropzone/test/dropzone-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/dropzone/sp-dropzone.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/dropzone/sp-dropzone.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/dropzone/test/dropzone.test.ts b/packages/dropzone/test/dropzone.test.ts
index c32316659a..27bc2f73ce 100644
--- a/packages/dropzone/test/dropzone.test.ts
+++ b/packages/dropzone/test/dropzone.test.ts
@@ -16,177 +16,179 @@ import { waitForPredicate } from "../../../test/testing-helpers.js";
 import { illustration } from "./test-svg.js";
 
 describe("Dropzone", () => {
-	it("loads", async () => {
-		const el = await fixture(html`
-			
-				
-					${illustration}
-				
-
-				

-					

-						
-						
-					

-					

-						or
-						
-							Search Adobe Stock
-						
-					

-				

-			
-		`);
-
-		expect(el).to.not.equal(undefined);
-
-		if (!el.shadowRoot) throw new Error("No shadowRoot");
-
-		const slot = el.shadowRoot.querySelector("slot") as HTMLSlotElement;
-
-		expect(slot).to.not.equal(undefined);
-
-		return true;
-	});
-	it("manages `dropEffects`", async () => {
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-
-		expect(el.dropEffect).to.equal("copy");
-
-		el.dropEffect = "move";
-
-		await elementUpdated(el);
-
-		expect(el.dropEffect).to.equal("move");
-	});
-	it("manages `dragover` events", async () => {
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-
-		expect(el.isDragged).to.be.false;
-
-		el.dispatchEvent(new DragEvent("dragover"));
-
-		expect(el.isDragged).to.be.false;
-
-		let dataTransfer: DataTransfer | boolean = false;
-
-		try {
-			// Safari doesn't like this...
-			dataTransfer = new DataTransfer();
-		} catch (error) {
-			// Intentionally ignored
-		}
-
-		if (dataTransfer) {
-			const dragOverEvent = new DragEvent("dragover", {
-				dataTransfer,
-			});
-
-			el.dispatchEvent(dragOverEvent);
-
-			expect(el.isDragged).to.be.true;
-			// We should be able to make the following test here:
-			// expect(dataTransfer.dropEffect).to.equal(el.dropEffect);
-			// However, Chrome doesn't like it in the context of a test...
-		}
-	});
-	it("allows `dragover` events to be canceled", async () => {
-		const canceledDrag = (event: DragEvent): void => {
-			event.preventDefault();
-		};
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-
-		expect(el.isDragged).to.be.false;
-
-		let dataTransfer: DataTransfer | boolean = false;
-
-		try {
-			// Safari doesn't like this...
-			dataTransfer = new DataTransfer();
-		} catch (error) {
-			/* empty */
-		}
-
-		if (dataTransfer) {
-			const dragOverEvent = new DragEvent("dragover", {
-				dataTransfer,
-			});
-
-			el.dispatchEvent(dragOverEvent);
+  it("loads", async () => {
+    const el = await fixture(html`
+      
+        
+          ${illustration}
+        
+
+        

+          

+            
+            
+          

+          

+            or
+            
+              Search Adobe Stock
+            
+          

+        

+      
+    `);
+
+    expect(el).to.not.equal(undefined);
+
+    if (!el.shadowRoot) {
+      throw new Error("No shadowRoot");
+    }
+
+    const slot = el.shadowRoot.querySelector("slot") as HTMLSlotElement;
+
+    expect(slot).to.not.equal(undefined);
+
+    return true;
+  });
+  it("manages `dropEffects`", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.dropEffect).to.equal("copy");
+
+    el.dropEffect = "move";
+
+    await elementUpdated(el);
+
+    expect(el.dropEffect).to.equal("move");
+  });
+  it("manages `dragover` events", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.isDragged).to.be.false;
+
+    el.dispatchEvent(new DragEvent("dragover"));
+
+    expect(el.isDragged).to.be.false;
+
+    let dataTransfer: DataTransfer | boolean = false;
+
+    try {
+      // Safari doesn't like this...
+      dataTransfer = new DataTransfer();
+    } catch (error) {
+      // Intentionally ignored
+    }
+
+    if (dataTransfer) {
+      const dragOverEvent = new DragEvent("dragover", {
+        dataTransfer,
+      });
+
+      el.dispatchEvent(dragOverEvent);
+
+      expect(el.isDragged).to.be.true;
+      // We should be able to make the following test here:
+      // expect(dataTransfer.dropEffect).to.equal(el.dropEffect);
+      // However, Chrome doesn't like it in the context of a test...
+    }
+  });
+  it("allows `dragover` events to be canceled", async () => {
+    const canceledDrag = (event: DragEvent): void => {
+      event.preventDefault();
+    };
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.isDragged).to.be.false;
+
+    let dataTransfer: DataTransfer | boolean = false;
+
+    try {
+      // Safari doesn't like this...
+      dataTransfer = new DataTransfer();
+    } catch (error) {
+      /* empty */
+    }
+
+    if (dataTransfer) {
+      const dragOverEvent = new DragEvent("dragover", {
+        dataTransfer,
+      });
+
+      el.dispatchEvent(dragOverEvent);
 
-			expect(el.isDragged).to.be.false;
-			expect(dataTransfer.dropEffect).to.not.equal(el.dropEffect);
-			expect(dataTransfer.dropEffect).to.equal("none");
-		}
-	});
-	it("manages `dragleave` events via debounce", async () => {
-		let dragLeftCount = 0;
-		const onDragLeave = (): void => {
-			dragLeftCount += 1;
-		};
-		const el = await fixture(html`
-			
-		`);
+      expect(el.isDragged).to.be.false;
+      expect(dataTransfer.dropEffect).to.not.equal(el.dropEffect);
+      expect(dataTransfer.dropEffect).to.equal("none");
+    }
+  });
+  it("manages `dragleave` events via debounce", async () => {
+    let dragLeftCount = 0;
+    const onDragLeave = (): void => {
+      dragLeftCount += 1;
+    };
+    const el = await fixture(html`
+      
+    `);
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		expect(dragLeftCount).to.equal(0);
+    expect(dragLeftCount).to.equal(0);
 
-		el.dispatchEvent(new DragEvent("dragleave"));
-		el.dispatchEvent(new DragEvent("dragleave"));
+    el.dispatchEvent(new DragEvent("dragleave"));
+    el.dispatchEvent(new DragEvent("dragleave"));
 
-		await waitForPredicate(() => dragLeftCount === 1);
+    await waitForPredicate(() => dragLeftCount === 1);
 
-		expect(dragLeftCount).to.equal(1);
-	});
-
-	it("manages `dragleave` events", async () => {
-		let dropped = false;
-		const onDrop = (): void => {
-			dropped = true;
-		};
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-
-		expect(dropped).to.be.false;
-
-		el.dispatchEvent(new DragEvent("drop"));
-
-		expect(dropped).to.be.true;
-	});
-
-	it("sets `filled` attribute", async () => {
-		const el = await fixture(html`
-			
-		`);
-
-		await elementUpdated(el);
-
-		expect(el.isFilled).to.be.true;
-		expect(el.hasAttribute("filled")).to.be.true;
-	});
+    expect(dragLeftCount).to.equal(1);
+  });
+
+  it("manages `dragleave` events", async () => {
+    let dropped = false;
+    const onDrop = (): void => {
+      dropped = true;
+    };
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(dropped).to.be.false;
+
+    el.dispatchEvent(new DragEvent("drop"));
+
+    expect(dropped).to.be.true;
+  });
+
+  it("sets `filled` attribute", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.isFilled).to.be.true;
+    expect(el.hasAttribute("filled")).to.be.true;
+  });
 });
diff --git a/packages/dropzone/test/test-svg.ts b/packages/dropzone/test/test-svg.ts
index d7009a5bff..db64ae9894 100644
--- a/packages/dropzone/test/test-svg.ts
+++ b/packages/dropzone/test/test-svg.ts
@@ -9,66 +9,66 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html } from '@spectrum-web-components/base';
+import { html } from "@spectrum-web-components/base";
 
 export const illustration = html`
-    
-        
-            
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-    
+  
+    
+      
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
 `;
diff --git a/packages/field-group/sp-field-group.ts b/packages/field-group/sp-field-group.ts
index 2904ceb73b..ccc9f3410d 100644
--- a/packages/field-group/sp-field-group.ts
+++ b/packages/field-group/sp-field-group.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { FieldGroup } from './src/FieldGroup.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { FieldGroup } from "./src/FieldGroup.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-field-group', FieldGroup);
+defineElement("sp-field-group", FieldGroup);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-field-group': FieldGroup;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-field-group": FieldGroup;
+  }
 }
diff --git a/packages/field-group/src/FieldGroup.ts b/packages/field-group/src/FieldGroup.ts
index dec6f04a38..0d69f0cf2a 100644
--- a/packages/field-group/src/FieldGroup.ts
+++ b/packages/field-group/src/FieldGroup.ts
@@ -11,16 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ManageHelpText } from "@spectrum-web-components/help-text/src/manage-help-text.js";
 
-import styles from './field-group.css.js';
+import styles from "./field-group.css.js";
 
 /**
  * @element sp-field-group
@@ -30,55 +30,55 @@ import styles from './field-group.css.js';
  * @slot negative-help-text - negative help text to associate to your form element when `invalid`
  */
 export class FieldGroup extends ManageHelpText(SpectrumElement, {
-    mode: 'external',
+  mode: "external",
 }) {
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
 
-    @property({ type: Boolean, reflect: true })
-    public horizontal = false;
+  @property({ type: Boolean, reflect: true })
+  public horizontal = false;
 
-    @property({ type: Boolean, reflect: true })
-    public invalid = false;
+  @property({ type: Boolean, reflect: true })
+  public invalid = false;
 
-    @property()
-    public label = '';
+  @property()
+  public label = "";
 
-    @property({ type: Boolean, reflect: true })
-    public vertical = false;
+  @property({ type: Boolean, reflect: true })
+  public vertical = false;
 
-    protected handleSlotchange(): void {
-        // Surface this functionality for easy composition in extensions.
-        return;
-    }
+  protected handleSlotchange(): void {
+    // Surface this functionality for easy composition in extensions.
+    return;
+  }
 
-    protected override render(): TemplateResult {
-        return html`
-            
-            ${this.renderHelpText(this.invalid)}
-        `;
-    }
+  protected override render(): TemplateResult {
+    return html`
+      
+      ${this.renderHelpText(this.invalid)}
+    `;
+  }
 
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
 
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'group');
-        }
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "group");
     }
+  }
 
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
 
-        if (changes.has('label')) {
-            if (this.label) {
-                this.setAttribute('aria-label', this.label);
-            } else {
-                this.removeAttribute('aria-label');
-            }
-        }
+    if (changes.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
     }
+  }
 }
diff --git a/packages/field-group/src/index.ts b/packages/field-group/src/index.ts
index ccdfe9bbd5..4236089e5b 100644
--- a/packages/field-group/src/index.ts
+++ b/packages/field-group/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './FieldGroup.js';
+export * from "./FieldGroup.js";
diff --git a/packages/field-group/stories/field-group.stories.ts b/packages/field-group/stories/field-group.stories.ts
index 7e941d43e7..56f688fa01 100644
--- a/packages/field-group/stories/field-group.stories.ts
+++ b/packages/field-group/stories/field-group.stories.ts
@@ -10,37 +10,37 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/field-group/sp-field-group.js';
-import '@spectrum-web-components/checkbox/sp-checkbox.js';
-import '@spectrum-web-components/radio/sp-radio.js';
+import "@spectrum-web-components/field-group/sp-field-group.js";
+import "@spectrum-web-components/checkbox/sp-checkbox.js";
+import "@spectrum-web-components/radio/sp-radio.js";
 
 export default {
-    title: 'Field Group',
-    component: 'sp-field-group',
+  title: "Field Group",
+  component: "sp-field-group",
 };
 
 export const horizontal = (): TemplateResult => {
-    return html`
-        
-            Checkbox 1
-            Checkbox 2
-            Checkbox 3
-            Checkbox 4
-            Checkbox 5
-        
-    `;
+  return html`
+    
+      Checkbox 1
+      Checkbox 2
+      Checkbox 3
+      Checkbox 4
+      Checkbox 5
+    
+  `;
 };
 
 export const vertical = (): TemplateResult => {
-    return html`
-        
-            Checkbox 1
-            Checkbox 2
-            Checkbox 3
-            Checkbox 4
-            Checkbox 5
-        
-    `;
+  return html`
+    
+      Checkbox 1
+      Checkbox 2
+      Checkbox 3
+      Checkbox 4
+      Checkbox 5
+    
+  `;
 };
diff --git a/packages/field-group/test/benchmark/basic-test.ts b/packages/field-group/test/benchmark/basic-test.ts
index 61f5b43952..3520a46f21 100644
--- a/packages/field-group/test/benchmark/basic-test.ts
+++ b/packages/field-group/test/benchmark/basic-test.ts
@@ -10,17 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/field-group/sp-field-group.js';
-import '@spectrum-web-components/checkbox/sp-checkbox.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/field-group/sp-field-group.js";
+import "@spectrum-web-components/checkbox/sp-checkbox.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        Checkbox 1
-        Checkbox 2
-        Checkbox 3
-        Checkbox 4
-        Checkbox 5
-    
+  
+    Checkbox 1
+    Checkbox 2
+    Checkbox 3
+    Checkbox 4
+    Checkbox 5
+  
 `);
diff --git a/packages/field-group/test/field-group-memory.test.ts b/packages/field-group/test/field-group-memory.test.ts
index 4c30adff9d..8eae84693e 100644
--- a/packages/field-group/test/field-group-memory.test.ts
+++ b/packages/field-group/test/field-group-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/field-group/sp-field-group.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/field-group/sp-field-group.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/field-group/test/field-group.test.ts b/packages/field-group/test/field-group.test.ts
index f8aea55093..ddc29392aa 100644
--- a/packages/field-group/test/field-group.test.ts
+++ b/packages/field-group/test/field-group.test.ts
@@ -10,122 +10,122 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import { findDescribedNode } from '../../../test/testing-helpers-a11y.js';
-import { HelpText } from '@spectrum-web-components/help-text';
-import { FieldGroup } from '@spectrum-web-components/field-group';
-import '@spectrum-web-components/help-text/sp-help-text.js';
-import '@spectrum-web-components/checkbox/sp-checkbox.js';
-import '@spectrum-web-components/field-group/sp-field-group.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('FieldGroup', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-                    Checkbox 1
-                    Checkbox 2
-                    Checkbox 3
-                    Checkbox 4
-                    Checkbox 5
-                
-            `)
-    );
-    it('loads default field-group accessibly', async () => {
-        const el = await fixture(html`
-            
-                Checkbox 1
-                Checkbox 2
-                Checkbox 3
-                Checkbox 4
-                Checkbox 5
-            
-        `);
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import { findDescribedNode } from "../../../test/testing-helpers-a11y.js";
+import { HelpText } from "@spectrum-web-components/help-text";
+import { FieldGroup } from "@spectrum-web-components/field-group";
+import "@spectrum-web-components/help-text/sp-help-text.js";
+import "@spectrum-web-components/checkbox/sp-checkbox.js";
+import "@spectrum-web-components/field-group/sp-field-group.js";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+describe("FieldGroup", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+          Checkbox 1
+          Checkbox 2
+          Checkbox 3
+          Checkbox 4
+          Checkbox 5
+        
+      `),
+  );
+  it("loads default field-group accessibly", async () => {
+    const el = await fixture(html`
+      
+        Checkbox 1
+        Checkbox 2
+        Checkbox 3
+        Checkbox 4
+        Checkbox 5
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+
+  describe("help text", () => {
+    const name = "This is a field group";
+    const description = "This text helps you fill it out";
+    const descriptionNegative = "This text helps you when invalid";
+
+    it('accepts help text in `slot="help-text"`', async () => {
+      const el = await fixture(html`
+        
+          ${description}
+        
+      `);
+
+      await elementUpdated(el);
+
+      await findDescribedNode(name, description);
     });
-
-    describe('help text', () => {
-        const name = 'This is a field group';
-        const description = 'This text helps you fill it out';
-        const descriptionNegative = 'This text helps you when invalid';
-
-        it('accepts help text in `slot="help-text"`', async () => {
-            const el = await fixture(html`
-                
-                    ${description}
-                
-            `);
-
-            await elementUpdated(el);
-
-            await findDescribedNode(name, description);
-        });
-        it('accepts help text in `slot="help-text"` w/ own ID', async () => {
-            const el = await fixture(html`
-                
-                    
-                        ${description}
-                    
-                
-            `);
-
-            await elementUpdated(el);
-
-            await findDescribedNode(name, description);
-        });
-        it('manages neutral/negative help text pairs', async () => {
-            const el = await fixture(html`
-                
-                    ${description}
-                    
-                        ${descriptionNegative}
-                    
-                
-            `);
-            const negativeHelpText = el.querySelector(
-                '[slot="negative-help-text"]'
-            ) as HelpText;
-
-            await elementUpdated(el);
-
-            expect(negativeHelpText.variant).to.equal('neutral');
-            await findDescribedNode(name, description);
-
-            el.invalid = true;
-            await elementUpdated(el);
-
-            expect(negativeHelpText.variant).to.equal('negative');
-            await findDescribedNode(name, descriptionNegative);
-        });
-        it('manages neutral/negative help text pairs w/ own IDs', async () => {
-            const el = await fixture(html`
-                
-                    
-                        ${description}
-                    
-                    
-                        ${descriptionNegative}
-                    
-                
-            `);
-            const negativeHelpText = el.querySelector(
-                '[slot="negative-help-text"]'
-            ) as HelpText;
-
-            await elementUpdated(el);
-
-            expect(negativeHelpText.variant).to.equal('neutral');
-            await findDescribedNode(name, description);
-
-            el.invalid = true;
-            await elementUpdated(el);
-
-            expect(negativeHelpText.variant).to.equal('negative');
-            await findDescribedNode(name, descriptionNegative);
-        });
+    it('accepts help text in `slot="help-text"` w/ own ID', async () => {
+      const el = await fixture(html`
+        
+          
+            ${description}
+          
+        
+      `);
+
+      await elementUpdated(el);
+
+      await findDescribedNode(name, description);
+    });
+    it("manages neutral/negative help text pairs", async () => {
+      const el = await fixture(html`
+        
+          ${description}
+          
+            ${descriptionNegative}
+          
+        
+      `);
+      const negativeHelpText = el.querySelector(
+        '[slot="negative-help-text"]',
+      ) as HelpText;
+
+      await elementUpdated(el);
+
+      expect(negativeHelpText.variant).to.equal("neutral");
+      await findDescribedNode(name, description);
+
+      el.invalid = true;
+      await elementUpdated(el);
+
+      expect(negativeHelpText.variant).to.equal("negative");
+      await findDescribedNode(name, descriptionNegative);
+    });
+    it("manages neutral/negative help text pairs w/ own IDs", async () => {
+      const el = await fixture(html`
+        
+          
+            ${description}
+          
+          
+            ${descriptionNegative}
+          
+        
+      `);
+      const negativeHelpText = el.querySelector(
+        '[slot="negative-help-text"]',
+      ) as HelpText;
+
+      await elementUpdated(el);
+
+      expect(negativeHelpText.variant).to.equal("neutral");
+      await findDescribedNode(name, description);
+
+      el.invalid = true;
+      await elementUpdated(el);
+
+      expect(negativeHelpText.variant).to.equal("negative");
+      await findDescribedNode(name, descriptionNegative);
     });
+  });
 });
diff --git a/packages/field-label/sp-field-label.ts b/packages/field-label/sp-field-label.ts
index 0beefe5ab2..a2d071fddd 100644
--- a/packages/field-label/sp-field-label.ts
+++ b/packages/field-label/sp-field-label.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { FieldLabel } from './src/FieldLabel.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { FieldLabel } from "./src/FieldLabel.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-field-label', FieldLabel);
+defineElement("sp-field-label", FieldLabel);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-field-label': FieldLabel;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-field-label": FieldLabel;
+  }
 }
diff --git a/packages/field-label/src/FieldLabel.ts b/packages/field-label/src/FieldLabel.ts
index 6bed04f1fa..0619c38347 100644
--- a/packages/field-label/src/FieldLabel.ts
+++ b/packages/field-label/src/FieldLabel.ts
@@ -11,40 +11,40 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    PropertyValues,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  nothing,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
-import type { Focusable } from '@spectrum-web-components/shared';
-import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
-import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js';
-import asteriskIconOverrides from '@spectrum-web-components/icon/src/icon-asterisk-overrides.css.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
+import type { Focusable } from "@spectrum-web-components/shared";
+import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js";
+import asteriskIconStyles from "@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js";
+import asteriskIconOverrides from "@spectrum-web-components/icon/src/icon-asterisk-overrides.css.js";
 import {
-    conditionAttributeWithId,
-    conditionAttributeWithoutId,
-} from '@spectrum-web-components/base/src/condition-attribute-with-id.js';
+  conditionAttributeWithId,
+  conditionAttributeWithoutId,
+} from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
 import {
-    ElementResolutionController,
-    elementResolverUpdatedSymbol,
-} from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';
+  ElementResolutionController,
+  elementResolverUpdatedSymbol,
+} from "@spectrum-web-components/reactive-controllers/src/ElementResolution.js";
 
-import styles from './field-label.css.js';
+import styles from "./field-label.css.js";
 
 type AcceptsFocusVisisble = HTMLElement & { forceFocusVisible?(): void };
 type Labelable = Focusable & {
-    applyFocusElementLabel?: (
-        appliedLabel: string,
-        labelElement?: FieldLabel
-    ) => void;
+  applyFocusElementLabel?: (
+    appliedLabel: string,
+    labelElement?: FieldLabel,
+  ) => void;
 };
 
 /**
@@ -54,148 +54,147 @@ type Labelable = Focusable & {
  *
  */
 export class FieldLabel extends SizedMixin(SpectrumElement, {
-    noDefaultSize: true,
+  noDefaultSize: true,
 }) {
-    public static override get styles(): CSSResultArray {
-        return [styles, asteriskIconStyles, asteriskIconOverrides];
-    }
+  public static override get styles(): CSSResultArray {
+    return [styles, asteriskIconStyles, asteriskIconOverrides];
+  }
 
-    @property({ type: Boolean, reflect: true })
-    public disabled = false;
+  @property({ type: Boolean, reflect: true })
+  public disabled = false;
 
-    @property({ type: String })
-    public override id = '';
+  @property({ type: String })
+  public override id = "";
 
-    @property({ type: String })
-    public for = '';
+  @property({ type: String })
+  public for = "";
 
-    @property({ type: Boolean, reflect: true })
-    public required = false;
+  @property({ type: Boolean, reflect: true })
+  public required = false;
 
-    @query('slot')
-    public slotEl!: HTMLSlotElement;
+  @query("slot")
+  public slotEl!: HTMLSlotElement;
 
-    @property({ type: String, reflect: true, attribute: 'side-aligned' })
-    public sideAligned?: 'start' | 'end';
+  @property({ type: String, reflect: true, attribute: "side-aligned" })
+  public sideAligned?: "start" | "end";
 
-    private target?: Labelable;
+  private target?: Labelable;
 
-    private handleClick(event: Event): void {
-        if (!this.target || this.disabled || event.defaultPrevented) return;
+  private handleClick(event: Event): void {
+    if (!this.target || this.disabled || event.defaultPrevented) {
+      return;
+    }
 
-        this.target.focus();
-        const parent = this.getRootNode() as ShadowRoot;
-        const target = this.target as AcceptsFocusVisisble;
-        const targetParent = target.getRootNode() as ShadowRoot;
-        const targetHost = targetParent.host as AcceptsFocusVisisble;
+    this.target.focus();
+    const parent = this.getRootNode() as ShadowRoot;
+    const target = this.target as AcceptsFocusVisisble;
+    const targetParent = target.getRootNode() as ShadowRoot;
+    const targetHost = targetParent.host as AcceptsFocusVisisble;
 
-        if (targetParent === parent && target.forceFocusVisible) {
-            target.forceFocusVisible();
-        } else if (targetHost && targetHost.forceFocusVisible) {
-            targetHost.forceFocusVisible();
-        }
+    if (targetParent === parent && target.forceFocusVisible) {
+      target.forceFocusVisible();
+    } else if (targetHost && targetHost.forceFocusVisible) {
+      targetHost.forceFocusVisible();
     }
-
-    private resolvedElement = new ElementResolutionController(this);
-
-    private applyTargetLabel(target?: Labelable): void {
-        // Apply new target when provided
-        this.target = target || this.target;
-
-        if (this.target) {
-            // When target is available add or remove label information
-            // depending on the value of `apply`.
-            const applyLabel = this.target.applyFocusElementLabel;
-            const focusable = this.target.focusElement || this.target;
-            const targetParent = focusable.getRootNode() as HTMLElement;
-
-            if (typeof applyLabel !== 'undefined') {
-                applyLabel(this.labelText, this);
-            } else if (targetParent === (this.getRootNode() as HTMLElement)) {
-                const conditionAttribute = target
-                    ? conditionAttributeWithId
-                    : conditionAttributeWithoutId;
-
-                conditionAttribute(focusable, 'aria-labelledby', [this.id]);
-            } else {
-                if (target) {
-                    focusable.setAttribute('aria-label', this.labelText);
-                } else {
-                    focusable.removeAttribute('aria-label');
-                }
-            }
+  }
+
+  private resolvedElement = new ElementResolutionController(this);
+
+  private applyTargetLabel(target?: Labelable): void {
+    // Apply new target when provided
+    this.target = target || this.target;
+
+    if (this.target) {
+      // When target is available add or remove label information
+      // depending on the value of `apply`.
+      const applyLabel = this.target.applyFocusElementLabel;
+      const focusable = this.target.focusElement || this.target;
+      const targetParent = focusable.getRootNode() as HTMLElement;
+
+      if (typeof applyLabel !== "undefined") {
+        applyLabel(this.labelText, this);
+      } else if (targetParent === (this.getRootNode() as HTMLElement)) {
+        const conditionAttribute = target
+          ? conditionAttributeWithId
+          : conditionAttributeWithoutId;
+
+        conditionAttribute(focusable, "aria-labelledby", [this.id]);
+      } else {
+        if (target) {
+          focusable.setAttribute("aria-label", this.labelText);
+        } else {
+          focusable.removeAttribute("aria-label");
         }
+      }
     }
+  }
 
-    private async manageTarget(): Promise {
-        this.applyTargetLabel();
-        const target = this.resolvedElement.element as Focusable;
+  private async manageTarget(): Promise {
+    this.applyTargetLabel();
+    const target = this.resolvedElement.element as Focusable;
 
-        if (!target) {
-            this.target = target;
+    if (!target) {
+      this.target = target;
 
-            return;
-        }
-
-        if (target.localName.search('-') > 0) {
-            await customElements.whenDefined(target.localName);
-        }
-
-        if (typeof target.updateComplete !== 'undefined') {
-            await target.updateComplete;
-        }
+      return;
+    }
 
-        this.applyTargetLabel(target);
+    if (target.localName.search("-") > 0) {
+      await customElements.whenDefined(target.localName);
     }
 
-    private get labelText(): string {
-        const assignedNodes = this.slotEl.assignedNodes({ flatten: true });
+    if (typeof target.updateComplete !== "undefined") {
+      await target.updateComplete;
+    }
 
-        if (!assignedNodes.length) {
-            return '';
-        }
+    this.applyTargetLabel(target);
+  }
 
-        const labelText = assignedNodes.map((node) =>
-            (node.textContent || /* c8 ignore next */ '').trim()
-        );
+  private get labelText(): string {
+    const assignedNodes = this.slotEl.assignedNodes({ flatten: true });
 
-        return labelText.join(' ');
+    if (!assignedNodes.length) {
+      return "";
     }
 
-    protected override render(): TemplateResult {
-        return html`
-            
-        `;
+    const labelText = assignedNodes.map((node) =>
+      (node.textContent || /* c8 ignore next */ "").trim(),
+    );
+
+    return labelText.join(" ");
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      
+    `;
+  }
+
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
+    this.addEventListener("click", this.handleClick);
+  }
+
+  protected override willUpdate(changes: PropertyValues): void {
+    if (!this.hasAttribute("id")) {
+      this.setAttribute("id", `${this.tagName.toLowerCase()}-${randomID()}`);
     }
 
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        this.addEventListener('click', this.handleClick);
+    if (changes.has("for")) {
+      this.resolvedElement.selector = this.for ? `#${this.for}` : "";
     }
 
-    protected override willUpdate(changes: PropertyValues): void {
-        if (!this.hasAttribute('id')) {
-            this.setAttribute(
-                'id',
-                `${this.tagName.toLowerCase()}-${randomID()}`
-            );
-        }
-
-        if (changes.has('for')) {
-            this.resolvedElement.selector = this.for ? `#${this.for}` : '';
-        }
-
-        if (changes.has('id') || changes.has(elementResolverUpdatedSymbol)) {
-            this.manageTarget();
-        }
+    if (changes.has("id") || changes.has(elementResolverUpdatedSymbol)) {
+      this.manageTarget();
     }
+  }
 }
diff --git a/packages/field-label/src/index.ts b/packages/field-label/src/index.ts
index f43503cd43..d77634bbc2 100644
--- a/packages/field-label/src/index.ts
+++ b/packages/field-label/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './FieldLabel.js';
+export * from "./FieldLabel.js";
diff --git a/packages/field-label/stories/field-label.stories.ts b/packages/field-label/stories/field-label.stories.ts
index 8c792a180c..8bd8e2eb9a 100644
--- a/packages/field-label/stories/field-label.stories.ts
+++ b/packages/field-label/stories/field-label.stories.ts
@@ -10,124 +10,120 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/textfield/sp-textfield.js';
-import '@spectrum-web-components/picker/sp-picker.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import "@spectrum-web-components/textfield/sp-textfield.js";
+import "@spectrum-web-components/picker/sp-picker.js";
 
-import '@spectrum-web-components/field-label/sp-field-label.js';
+import "@spectrum-web-components/field-label/sp-field-label.js";
 
 export default {
-    title: 'Field Label',
-    component: 'sp-field-label',
+  title: "Field Label",
+  component: "sp-field-label",
 };
 
 export const standard = (): TemplateResult => {
-    return html`
-        Life Story
-        
-        
-            Life Story
-            
-        
-    `;
+  return html`
+    Life Story
+    
+    
+      Life Story
+      
+    
+  `;
 };
 
 export const sideAlignStart = (): TemplateResult => {
-    return html`
-        
-            Life Story
-        
-        
-    `;
+  return html`
+    
+      Life Story
+    
+    
+  `;
 };
 
 export const sideAlignEnd = (): TemplateResult => {
-    return html`
-        
-            Life Story
-        
-        
-    `;
+  return html`
+    
+      Life Story
+    
+    
+  `;
 };
 
 export const required = (): TemplateResult => {
-    return html`
-        Life Story
-        
-        Life Story (Required)
-        
-        

-        

-        
-            Life Story
-        
-        
-        

-        

-        
-            Life Story
-        
-        
-        
-            Life Story
-        
-        
-    `;
+  return html`
+    Life Story
+    
+    Life Story (Required)
+    
+    

+    

+    
+      Life Story
+    
+    
+    

+    

+    
+      Life Story
+    
+    
+    
+      Life Story
+    
+    
+  `;
 };
 
 export const picker = (): TemplateResult => {
-    return html`
-        
-            Select a Country with a very long label, too long in fact
-        
-        
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            
-            Save Selection
-            Make Work Path
-        
-    `;
+  return html`
+    
+      Select a Country with a very long label, too long in fact
+    
+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      
+      Save Selection
+      Make Work Path
+    
+  `;
 };
 
 export const nativeInput = (): TemplateResult => {
-    return html`
-        Life Story
-        
-    `;
+  return html`
+    Life Story
+    
+  `;
 };
diff --git a/packages/field-label/test/benchmark/basic-test.ts b/packages/field-label/test/benchmark/basic-test.ts
index 71ba2d0c9d..75deb7e486 100644
--- a/packages/field-label/test/benchmark/basic-test.ts
+++ b/packages/field-label/test/benchmark/basic-test.ts
@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/field-label/test/field-label-memory.test.ts b/packages/field-label/test/field-label-memory.test.ts
index 71798ab285..d99a251f60 100644
--- a/packages/field-label/test/field-label-memory.test.ts
+++ b/packages/field-label/test/field-label-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/field-label/test/field-label.test.ts b/packages/field-label/test/field-label.test.ts
index 7733e0e399..7fd2612e61 100644
--- a/packages/field-label/test/field-label.test.ts
+++ b/packages/field-label/test/field-label.test.ts
@@ -10,243 +10,243 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import { stub } from 'sinon';
-
-import '@spectrum-web-components/textfield/sp-textfield.js';
-import { Textfield } from '@spectrum-web-components/textfield';
-import '@spectrum-web-components/picker/sp-picker.js';
-import { Picker } from '@spectrum-web-components/picker';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { FieldLabel } from '@spectrum-web-components/field-label';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('FieldLabel', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                

-                    Input label
-                    
-                

-            `)
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import { stub } from "sinon";
+
+import "@spectrum-web-components/textfield/sp-textfield.js";
+import { Textfield } from "@spectrum-web-components/textfield";
+import "@spectrum-web-components/picker/sp-picker.js";
+import { Picker } from "@spectrum-web-components/picker";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { FieldLabel } from "@spectrum-web-components/field-label";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+describe("FieldLabel", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        

+          Input label
+          
+        

+      `),
+  );
+  it("loads default field-label accessibly", async () => {
+    const el = await fixture(html`
+      

+        Input label
+        
+      

+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("loads [required] field-label accessibly", async () => {
+    const el = await fixture(html`
+      

+        
+          Required input label
+        
+        
+      

+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it('loads with no "for"', async () => {
+    const el = await fixture(html`
+      Input label
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("observes based on `for` value", async () => {
+    const test = await fixture(html`
+      

+        Input label
+        
+        
+      

+    `);
+
+    const fieldLabel = test.querySelector("sp-field-label") as FieldLabel;
+    const el = fieldLabel as unknown as { target: HTMLElement | undefined };
+    const input1 = test.querySelector(
+      "input:nth-of-type(1)",
+    ) as HTMLInputElement;
+    const input2 = test.querySelector(
+      "input:nth-of-type(2)",
+    ) as HTMLInputElement;
+
+    await elementUpdated(fieldLabel);
+
+    expect(el.target === input1).to.be.true;
+    input1.remove();
+    await elementUpdated(fieldLabel);
+    expect(el.target === input2).to.be.true;
+    fieldLabel.insertAdjacentElement("beforebegin", input1);
+    await elementUpdated(fieldLabel);
+    expect(el.target === input1).to.be.true;
+    input1.id = "other";
+    await elementUpdated(fieldLabel);
+    expect(el.target === input2).to.be.true;
+    input2.remove();
+    await elementUpdated(fieldLabel);
+    expect(el.target).to.be.null;
+    input1.id = "test";
+    await elementUpdated(fieldLabel);
+    expect(el.target === input1).to.be.true;
+    fieldLabel.insertAdjacentElement("afterend", input2);
+    await elementUpdated(fieldLabel);
+    expect(el.target === input2).to.be.false;
+    input2.insertAdjacentElement("afterend", input1);
+    await elementUpdated(fieldLabel);
+    expect(el.target === input2).to.be.true;
+  });
+  it('allows unfulfilled "for"', async () => {
+    const el = await fixture(html`
+      Input label
+    `);
+
+    await elementUpdated(el);
+    const manageSpy = stub(
+      el as unknown as { manageTarget(): Promise },
+      "manageTarget",
     );
-    it('loads default field-label accessibly', async () => {
-        const el = await fixture(html`
-            

-                Input label
-                
-            

-        `);
 
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-    it('loads [required] field-label accessibly', async () => {
-        const el = await fixture(html`
-            

-                
-                    Required input label
-                
-                
-            

-        `);
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
+    manageSpy.callsFake(async (...args): Promise => {
+      try {
+        await (
+          FieldLabel.prototype as unknown as {
+            manageTarget(): Promise;
+          }
+        ).manageTarget.apply(el, ...args);
+      } catch (error) {
+        return "Error was thrown.";
+      }
+
+      return "No error was thrown.";
     });
-    it('loads with no "for"', async () => {
-        const el = await fixture(html`
-            Input label
-        `);
 
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-    it('observes based on `for` value', async () => {
-        const test = await fixture(html`
-            

-                Input label
-                
-                
-            

-        `);
-
-        const fieldLabel = test.querySelector('sp-field-label') as FieldLabel;
-        const el = fieldLabel as unknown as { target: HTMLElement | undefined };
-        const input1 = test.querySelector(
-            'input:nth-of-type(1)'
-        ) as HTMLInputElement;
-        const input2 = test.querySelector(
-            'input:nth-of-type(2)'
-        ) as HTMLInputElement;
-
-        await elementUpdated(fieldLabel);
-
-        expect(el.target === input1).to.be.true;
-        input1.remove();
-        await elementUpdated(fieldLabel);
-        expect(el.target === input2).to.be.true;
-        fieldLabel.insertAdjacentElement('beforebegin', input1);
-        await elementUpdated(fieldLabel);
-        expect(el.target === input1).to.be.true;
-        input1.id = 'other';
-        await elementUpdated(fieldLabel);
-        expect(el.target === input2).to.be.true;
-        input2.remove();
-        await elementUpdated(fieldLabel);
-        expect(el.target).to.be.null;
-        input1.id = 'test';
-        await elementUpdated(fieldLabel);
-        expect(el.target === input1).to.be.true;
-        fieldLabel.insertAdjacentElement('afterend', input2);
-        await elementUpdated(fieldLabel);
-        expect(el.target === input2).to.be.false;
-        input2.insertAdjacentElement('afterend', input1);
-        await elementUpdated(fieldLabel);
-        expect(el.target === input2).to.be.true;
-    });
-    it('allows unfulfilled "for"', async () => {
-        const el = await fixture(html`
-            Input label
-        `);
-
-        await elementUpdated(el);
-        const manageSpy = stub(
-            el as unknown as { manageTarget(): Promise },
-            'manageTarget'
-        );
-
-        manageSpy.callsFake(async (...args): Promise => {
-            try {
-                await (
-                    FieldLabel.prototype as unknown as {
-                        manageTarget(): Promise;
-                    }
-                ).manageTarget.apply(el, ...args);
-            } catch (error) {
-                return 'Error was thrown.';
-            }
-
-            return 'No error was thrown.';
-        });
-
-        el.for = 'not-available';
-        el.id = 'force-manage-target';
-        await elementUpdated(el);
-        const result = await manageSpy.returnValues[0];
-
-        expect(result).to.equal('No error was thrown.');
-    });
-    it('associates itself to an element whose "id" matches its "for" attribute', async () => {
-        const test = await fixture(html`
-            

-                
-                
-            

-        `);
-        const el = test.querySelector('sp-field-label') as FieldLabel;
-        const input = test.querySelector('input') as HTMLInputElement;
-
-        await elementUpdated(el);
-
-        expect(input.hasAttribute('aria-labelledby'));
-        expect(input.getAttribute('aria-labelledby')).to.equal(el.id);
-    });
-    it('associates via "id" starting with number', async () => {
-        const test = await fixture(html`
-            

-                
-                
-            

-        `);
-        const el = test.querySelector('sp-field-label') as FieldLabel;
-        const input = test.querySelector('input') as HTMLInputElement;
-
-        await elementUpdated(el);
-
-        expect(input.hasAttribute('aria-labelledby'));
-        expect(input.getAttribute('aria-labelledby')).to.equal(el.id);
-    });
-    it('passed clicks to assiciated form element as focus', async () => {
-        const test = await fixture(html`
-            

-                
-                
-            

-        `);
-        const el = test.querySelector('sp-field-label') as FieldLabel;
-        const input = test.querySelector('input') as HTMLInputElement;
-
-        await elementUpdated(el);
-
-        el.click();
-        await elementUpdated(el);
-
-        expect(document.activeElement).to.equal(input);
-    });
-    it('associates itself to an element with a focueElement whose "id" matches its "for" attribute', async () => {
-        const test = await fixture(html`
-            

-                
-                
-            

-        `);
-        const el = test.querySelector('sp-field-label') as FieldLabel;
-        const input = (test.querySelector('sp-textfield') as Textfield)
-            .focusElement as HTMLInputElement;
-
-        await elementUpdated(el);
-
-        expect(input.hasAttribute('aria-label'));
-        expect(input.getAttribute('aria-label')).to.equal(
-            (el.textContent || '').trim()
-        );
-    });
-    it('passed clicks to assiciated form element with a focueElement as focus', async () => {
-        const test = await fixture(html`
-            

-                
-                
-            

-        `);
-        const el = test.querySelector('sp-field-label') as FieldLabel;
-        const input = test.querySelector('sp-textfield') as Textfield;
-
-        await elementUpdated(el);
-
-        el.click();
-        await elementUpdated(el);
-
-        expect(document.activeElement).to.equal(input);
-    });
-    it('forces focus visible when available', async () => {
-        const test = await fixture(html`
-            

-                
-                
-                    Test
-                
-            

-        `);
-        const el = test.querySelector('sp-field-label') as FieldLabel;
-        const picker = test.querySelector('sp-picker') as Picker;
-
-        await elementUpdated(el);
-        await elementUpdated(picker);
-        expect(picker.focused).to.be.false;
-
-        el.click();
-        await elementUpdated(el);
-        await elementUpdated(picker);
-
-        expect(document.activeElement).to.equal(picker);
-        expect(picker.focused).to.be.true;
-    });
+    el.for = "not-available";
+    el.id = "force-manage-target";
+    await elementUpdated(el);
+    const result = await manageSpy.returnValues[0];
+
+    expect(result).to.equal("No error was thrown.");
+  });
+  it('associates itself to an element whose "id" matches its "for" attribute', async () => {
+    const test = await fixture(html`
+      

+        
+        
+      

+    `);
+    const el = test.querySelector("sp-field-label") as FieldLabel;
+    const input = test.querySelector("input") as HTMLInputElement;
+
+    await elementUpdated(el);
+
+    expect(input.hasAttribute("aria-labelledby"));
+    expect(input.getAttribute("aria-labelledby")).to.equal(el.id);
+  });
+  it('associates via "id" starting with number', async () => {
+    const test = await fixture(html`
+      

+        
+        
+      

+    `);
+    const el = test.querySelector("sp-field-label") as FieldLabel;
+    const input = test.querySelector("input") as HTMLInputElement;
+
+    await elementUpdated(el);
+
+    expect(input.hasAttribute("aria-labelledby"));
+    expect(input.getAttribute("aria-labelledby")).to.equal(el.id);
+  });
+  it("passed clicks to assiciated form element as focus", async () => {
+    const test = await fixture(html`
+      

+        
+        
+      

+    `);
+    const el = test.querySelector("sp-field-label") as FieldLabel;
+    const input = test.querySelector("input") as HTMLInputElement;
+
+    await elementUpdated(el);
+
+    el.click();
+    await elementUpdated(el);
+
+    expect(document.activeElement).to.equal(input);
+  });
+  it('associates itself to an element with a focueElement whose "id" matches its "for" attribute', async () => {
+    const test = await fixture(html`
+      

+        
+        
+      

+    `);
+    const el = test.querySelector("sp-field-label") as FieldLabel;
+    const input = (test.querySelector("sp-textfield") as Textfield)
+      .focusElement as HTMLInputElement;
+
+    await elementUpdated(el);
+
+    expect(input.hasAttribute("aria-label"));
+    expect(input.getAttribute("aria-label")).to.equal(
+      (el.textContent || "").trim(),
+    );
+  });
+  it("passed clicks to assiciated form element with a focueElement as focus", async () => {
+    const test = await fixture(html`
+      

+        
+        
+      

+    `);
+    const el = test.querySelector("sp-field-label") as FieldLabel;
+    const input = test.querySelector("sp-textfield") as Textfield;
+
+    await elementUpdated(el);
+
+    el.click();
+    await elementUpdated(el);
+
+    expect(document.activeElement).to.equal(input);
+  });
+  it("forces focus visible when available", async () => {
+    const test = await fixture(html`
+      

+        
+        
+          Test
+        
+      

+    `);
+    const el = test.querySelector("sp-field-label") as FieldLabel;
+    const picker = test.querySelector("sp-picker") as Picker;
+
+    await elementUpdated(el);
+    await elementUpdated(picker);
+    expect(picker.focused).to.be.false;
+
+    el.click();
+    await elementUpdated(el);
+    await elementUpdated(picker);
+
+    expect(document.activeElement).to.equal(picker);
+    expect(picker.focused).to.be.true;
+  });
 });
diff --git a/packages/help-text/sp-help-text.ts b/packages/help-text/sp-help-text.ts
index 764fc89f15..01f3d00d1b 100644
--- a/packages/help-text/sp-help-text.ts
+++ b/packages/help-text/sp-help-text.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { HelpText } from './src/HelpText.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { HelpText } from "./src/HelpText.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-help-text', HelpText);
+defineElement("sp-help-text", HelpText);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-help-text': HelpText;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-help-text": HelpText;
+  }
 }
diff --git a/packages/help-text/src/HelpText.ts b/packages/help-text/src/HelpText.ts
index e009971ef8..f2a6256c04 100644
--- a/packages/help-text/src/HelpText.ts
+++ b/packages/help-text/src/HelpText.ts
@@ -11,47 +11,45 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
+  CSSResultArray,
+  html,
+  nothing,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
 
-import styles from './help-text.css.js';
+import styles from "./help-text.css.js";
 
-type HelpTextVariants = 'neutral' | 'negative';
+type HelpTextVariants = "neutral" | "negative";
 
 /**
  * @element sp-help-text
  */
 export class HelpText extends SizedMixin(SpectrumElement, {
-    noDefaultSize: true,
+  noDefaultSize: true,
 }) {
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    @property({ type: Boolean, reflect: true })
-    public icon = false;
-
-    /**
-     * The visual variant to apply to this help text.
-     */
-    @property({ reflect: true })
-    public variant: HelpTextVariants = 'neutral';
-
-    protected override render(): TemplateResult {
-        return html`
-            ${this.variant === 'negative' && this.icon
-                ? html`
-                      
-                  `
-                : nothing}
-            

-        `;
-    }
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Boolean, reflect: true })
+  public icon = false;
+
+  /**
+   * The visual variant to apply to this help text.
+   */
+  @property({ reflect: true })
+  public variant: HelpTextVariants = "neutral";
+
+  protected override render(): TemplateResult {
+    return html`
+      ${this.variant === "negative" && this.icon
+        ? html`  `
+        : nothing}
+      

+    `;
+  }
 }
diff --git a/packages/help-text/src/HelpTextManagedElement.ts b/packages/help-text/src/HelpTextManagedElement.ts
index 45e909160c..891f175c9b 100644
--- a/packages/help-text/src/HelpTextManagedElement.ts
+++ b/packages/help-text/src/HelpTextManagedElement.ts
@@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { SpectrumElement } from '@spectrum-web-components/base';
-import { ManageHelpText } from './manage-help-text.js';
+import { SpectrumElement } from "@spectrum-web-components/base";
+import { ManageHelpText } from "./manage-help-text.js";
 
 /**
  * @slot help-text - default or non-negative help text to associate to your form element
diff --git a/packages/help-text/src/HelpTextManager.ts b/packages/help-text/src/HelpTextManager.ts
index d784a23b4c..0905cd2db7 100644
--- a/packages/help-text/src/HelpTextManager.ts
+++ b/packages/help-text/src/HelpTextManager.ts
@@ -17,114 +17,120 @@ import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
 import type { HelpText } from "./HelpText.js";
 
 export class HelpTextManager {
-	private conditionId?: () => void;
-	private host!: HTMLElement;
-	public id!: string;
-	private mode: "internal" | "external" = "internal";
-	private previousTabindex?: -1 | 0 | undefined;
-	private helpTextElement!: Element;
-	private get isInternal(): boolean {
-		return this.mode === "internal";
-	}
-
-	constructor(
-		host: HTMLElement,
-		{ mode }: { mode: "internal" | "external" } = { mode: "internal" },
-	) {
-		this.host = host;
-		this.id = `sp-help-text-${randomID()}`;
-		this.mode = mode;
-	}
-
-	public render(negative?: boolean): TemplateResult {
-		// `pass-through-help-text-${this.instanceCount}` makes the slot effectively unreachable from
-		// the outside allowing the `help-text` slot to be preferred while `negative === false`.
-		return html`
-			

-				
-					
-				
-			

-		`;
-	}
-
-	private addId(): void {
-		const id = this.helpTextElement ? this.helpTextElement.id : this.id;
-
-		this.conditionId = conditionAttributeWithId(
-			this.host,
-			"aria-describedby",
-			id,
-		);
-
-		if (this.host.hasAttribute("tabindex")) {
-			this.previousTabindex = parseFloat(
-				this.host.getAttribute("tabindex") as string,
-			) as -1 | 0;
-		}
-
-		this.host.tabIndex = 0;
-	}
-
-	private removeId(): void {
-		if (this.conditionId) {
-			this.conditionId();
-			delete this.conditionId;
-		}
-
-		if (this.helpTextElement) return;
-
-		if (this.previousTabindex) {
-			this.host.tabIndex = this.previousTabindex;
-		} else {
-			this.host.removeAttribute("tabindex");
-		}
-	}
-
-	private handleSlotchange = ({
-		target,
-	}: Event & { target: HTMLSlotElement }): void => {
-		this.handleHelpText(target);
-		this.handleNegativeHelpText(target);
-	};
-
-	private handleHelpText(target: HTMLSlotElement): void {
-		if (this.isInternal) return;
-
-		if (this.helpTextElement && this.helpTextElement.id === this.id) {
-			this.helpTextElement.removeAttribute("id");
-		}
-
-		this.removeId();
-		const assignedElements = target.assignedElements();
-		const nextHelpTextElement = assignedElements[0];
-
-		this.helpTextElement = nextHelpTextElement;
-
-		if (nextHelpTextElement) {
-			if (!nextHelpTextElement.id) {
-				nextHelpTextElement.id = this.id;
-			}
-
-			this.addId();
-		}
-	}
-
-	private handleNegativeHelpText(target: HTMLSlotElement): void {
-		if (target.name !== "negative-help-text") return;
-
-		const assignedElements = target.assignedElements();
-
-		assignedElements.forEach(
-			(el) => ((el as unknown as HelpText).variant = "negative"),
-		);
-	}
+  private conditionId?: () => void;
+  private host!: HTMLElement;
+  public id!: string;
+  private mode: "internal" | "external" = "internal";
+  private previousTabindex?: -1 | 0 | undefined;
+  private helpTextElement!: Element;
+  private get isInternal(): boolean {
+    return this.mode === "internal";
+  }
+
+  constructor(
+    host: HTMLElement,
+    { mode }: { mode: "internal" | "external" } = { mode: "internal" },
+  ) {
+    this.host = host;
+    this.id = `sp-help-text-${randomID()}`;
+    this.mode = mode;
+  }
+
+  public render(negative?: boolean): TemplateResult {
+    // `pass-through-help-text-${this.instanceCount}` makes the slot effectively unreachable from
+    // the outside allowing the `help-text` slot to be preferred while `negative === false`.
+    return html`
+      

+        
+          
+        
+      

+    `;
+  }
+
+  private addId(): void {
+    const id = this.helpTextElement ? this.helpTextElement.id : this.id;
+
+    this.conditionId = conditionAttributeWithId(
+      this.host,
+      "aria-describedby",
+      id,
+    );
+
+    if (this.host.hasAttribute("tabindex")) {
+      this.previousTabindex = parseFloat(
+        this.host.getAttribute("tabindex") as string,
+      ) as -1 | 0;
+    }
+
+    this.host.tabIndex = 0;
+  }
+
+  private removeId(): void {
+    if (this.conditionId) {
+      this.conditionId();
+      delete this.conditionId;
+    }
+
+    if (this.helpTextElement) {
+      return;
+    }
+
+    if (this.previousTabindex) {
+      this.host.tabIndex = this.previousTabindex;
+    } else {
+      this.host.removeAttribute("tabindex");
+    }
+  }
+
+  private handleSlotchange = ({
+    target,
+  }: Event & { target: HTMLSlotElement }): void => {
+    this.handleHelpText(target);
+    this.handleNegativeHelpText(target);
+  };
+
+  private handleHelpText(target: HTMLSlotElement): void {
+    if (this.isInternal) {
+      return;
+    }
+
+    if (this.helpTextElement && this.helpTextElement.id === this.id) {
+      this.helpTextElement.removeAttribute("id");
+    }
+
+    this.removeId();
+    const assignedElements = target.assignedElements();
+    const nextHelpTextElement = assignedElements[0];
+
+    this.helpTextElement = nextHelpTextElement;
+
+    if (nextHelpTextElement) {
+      if (!nextHelpTextElement.id) {
+        nextHelpTextElement.id = this.id;
+      }
+
+      this.addId();
+    }
+  }
+
+  private handleNegativeHelpText(target: HTMLSlotElement): void {
+    if (target.name !== "negative-help-text") {
+      return;
+    }
+
+    const assignedElements = target.assignedElements();
+
+    assignedElements.forEach(
+      (el) => ((el as unknown as HelpText).variant = "negative"),
+    );
+  }
 }
diff --git a/packages/help-text/src/index.ts b/packages/help-text/src/index.ts
index 6f3cd822e8..a8ddf90d78 100644
--- a/packages/help-text/src/index.ts
+++ b/packages/help-text/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './HelpText.js';
+export * from "./HelpText.js";
diff --git a/packages/help-text/src/manage-help-text.ts b/packages/help-text/src/manage-help-text.ts
index a17daf8c2a..520ee428bc 100644
--- a/packages/help-text/src/manage-help-text.ts
+++ b/packages/help-text/src/manage-help-text.ts
@@ -10,36 +10,36 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ReactiveElement, TemplateResult } from '@spectrum-web-components/base';
-import { HelpTextManager } from './HelpTextManager.js';
+import { ReactiveElement, TemplateResult } from "@spectrum-web-components/base";
+import { HelpTextManager } from "./HelpTextManager.js";
 
 type Constructor> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    new (...args: any[]): T;
-    prototype: T;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  new (...args: any[]): T;
+  prototype: T;
 };
 
 export interface HelpTextElementInterface {
-    renderHelpText(negative?: boolean): TemplateResult;
-    helpTextId: string;
+  renderHelpText(negative?: boolean): TemplateResult;
+  helpTextId: string;
 }
 
 /**
  *
  */
 export function ManageHelpText>(
-    constructor: T,
-    { mode }: { mode: 'internal' | 'external' } = { mode: 'internal' }
+  constructor: T,
+  { mode }: { mode: "internal" | "external" } = { mode: "internal" },
 ): T & Constructor {
-    class HelpTextElement extends constructor {
-        helpTextManager = new HelpTextManager(this, { mode });
-        get helpTextId(): string {
-            return this.helpTextManager.id;
-        }
-        renderHelpText(negative?: boolean): TemplateResult {
-            return this.helpTextManager.render(negative);
-        }
+  class HelpTextElement extends constructor {
+    helpTextManager = new HelpTextManager(this, { mode });
+    get helpTextId(): string {
+      return this.helpTextManager.id;
     }
+    renderHelpText(negative?: boolean): TemplateResult {
+      return this.helpTextManager.render(negative);
+    }
+  }
 
-    return HelpTextElement;
+  return HelpTextElement;
 }
diff --git a/packages/help-text/stories/help-text-sizes.stories.ts b/packages/help-text/stories/help-text-sizes.stories.ts
index 18980c6425..c6bcfe4fbe 100644
--- a/packages/help-text/stories/help-text-sizes.stories.ts
+++ b/packages/help-text/stories/help-text-sizes.stories.ts
@@ -10,43 +10,43 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/help-text/sp-help-text.js';
+import "@spectrum-web-components/help-text/sp-help-text.js";
 
 export default {
-    title: 'Help Text/Sizes',
-    component: 'sp-help-text',
+  title: "Help Text/Sizes",
+  component: "sp-help-text",
 };
 
 export const s = (): TemplateResult => {
-    return html`
-        
-            Passwords must be at least 8 characters.
-        
-    `;
+  return html`
+    
+      Passwords must be at least 8 characters.
+    
+  `;
 };
 
 export const m = (): TemplateResult => {
-    return html`
-        
-            Passwords must be at least 8 characters.
-        
-    `;
+  return html`
+    
+      Passwords must be at least 8 characters.
+    
+  `;
 };
 
 export const l = (): TemplateResult => {
-    return html`
-        
-            Passwords must be at least 8 characters.
-        
-    `;
+  return html`
+    
+      Passwords must be at least 8 characters.
+    
+  `;
 };
 
 export const XL = (): TemplateResult => {
-    return html`
-        
-            Passwords must be at least 8 characters.
-        
-    `;
+  return html`
+    
+      Passwords must be at least 8 characters.
+    
+  `;
 };
diff --git a/packages/help-text/stories/help-text.stories.ts b/packages/help-text/stories/help-text.stories.ts
index 74dc122f45..aa99fd6520 100644
--- a/packages/help-text/stories/help-text.stories.ts
+++ b/packages/help-text/stories/help-text.stories.ts
@@ -10,123 +10,123 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/help-text/sp-help-text.js';
+import "@spectrum-web-components/help-text/sp-help-text.js";
 
 export default {
-    title: 'Help Text',
-    component: 'sp-help-text',
-    argTypes: {
-        icon: {
-            name: 'icon',
-            type: { name: 'boolean', required: false },
-            discription: 'Whether the Help Text is delivered with an icon.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        disabled: {
-            name: 'disabled',
-            type: { name: 'boolean', required: false },
-            description: 'Help Text for disabled form elements.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        variant: {
-            name: 'variant',
-            type: { name: 'string', required: false },
-            description: 'The visual variant to apply to the Help Text.',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'cta' },
-            },
-            control: {
-                type: 'inline-radio',
-                options: ['neutral', 'negative'],
-            },
-        },
-        size: {
-            name: 'size',
-            type: { name: 'string', required: false },
-            description: 'The visual variant to apply to the Help Text.',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'cta' },
-            },
-            control: {
-                type: 'inline-radio',
-                options: ['s', 'm', 'l', 'xl'],
-            },
-        },
+  title: "Help Text",
+  component: "sp-help-text",
+  argTypes: {
+    icon: {
+      name: "icon",
+      type: { name: "boolean", required: false },
+      discription: "Whether the Help Text is delivered with an icon.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
-    args: {
-        size: 'm',
+    disabled: {
+      name: "disabled",
+      type: { name: "boolean", required: false },
+      description: "Help Text for disabled form elements.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+    variant: {
+      name: "variant",
+      type: { name: "string", required: false },
+      description: "The visual variant to apply to the Help Text.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "cta" },
+      },
+      control: {
+        type: "inline-radio",
+        options: ["neutral", "negative"],
+      },
+    },
+    size: {
+      name: "size",
+      type: { name: "string", required: false },
+      description: "The visual variant to apply to the Help Text.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "cta" },
+      },
+      control: {
+        type: "inline-radio",
+        options: ["s", "m", "l", "xl"],
+      },
+    },
+  },
+  args: {
+    size: "m",
+  },
 };
 
 interface Properties {
-    content?: string;
-    disabled?: boolean;
-    icon?: boolean;
-    size?: 's' | 'm' | 'l' | 'xl';
-    variant?: 'neutral' | 'negative';
+  content?: string;
+  disabled?: boolean;
+  icon?: boolean;
+  size?: "s" | "m" | "l" | "xl";
+  variant?: "neutral" | "negative";
 }
 
 const Template = (args: Properties): TemplateResult => html`
-    
-        ${args.content}
-    
+  
+    ${args.content}
+  
 `;
 
 export const neutral = (args: Properties = {}): TemplateResult =>
-    Template({
-        ...args,
-        content: 'Passwords must be at least 8 characters.',
-    });
+  Template({
+    ...args,
+    content: "Passwords must be at least 8 characters.",
+  });
 neutral.args = {
-    variant: 'neutral',
+  variant: "neutral",
 };
 
 export const negative = (args: Properties = {}): TemplateResult =>
-    Template({
-        ...args,
-        content: 'Create a password with at least 8 characters.',
-    });
+  Template({
+    ...args,
+    content: "Create a password with at least 8 characters.",
+  });
 negative.args = {
-    variant: 'negative',
+  variant: "negative",
 };
 
 export const negativeIcon = (args: Properties = {}): TemplateResult =>
-    Template({
-        ...args,
-        content: 'Create a password with at least 8 characters.',
-    });
+  Template({
+    ...args,
+    content: "Create a password with at least 8 characters.",
+  });
 negativeIcon.args = {
-    icon: true,
-    variant: 'negative',
+  icon: true,
+  variant: "negative",
 };
 
 export const disabled = (args: Properties = {}): TemplateResult =>
-    Template({
-        ...args,
-        content: 'Passwords must be at least 8 characters.',
-    });
+  Template({
+    ...args,
+    content: "Passwords must be at least 8 characters.",
+  });
 disabled.args = {
-    disabled: true,
-    variant: 'neutral',
+  disabled: true,
+  variant: "neutral",
 };
diff --git a/packages/help-text/test/benchmark/basic-test.ts b/packages/help-text/test/benchmark/basic-test.ts
index 50e32afc35..3b84e01900 100644
--- a/packages/help-text/test/benchmark/basic-test.ts
+++ b/packages/help-text/test/benchmark/basic-test.ts
@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/help-text/sp-help-text.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/help-text/sp-help-text.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/help-text/test/help-test-memory.test.ts b/packages/help-text/test/help-test-memory.test.ts
index da156ba2f6..4985700235 100644
--- a/packages/help-text/test/help-test-memory.test.ts
+++ b/packages/help-text/test/help-test-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/help-text/sp-help-text.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/help-text/sp-help-text.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/help-text/test/help-text.test.ts b/packages/help-text/test/help-text.test.ts
index 03626f5040..9a364a714b 100644
--- a/packages/help-text/test/help-text.test.ts
+++ b/packages/help-text/test/help-text.test.ts
@@ -10,43 +10,37 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-
-import '@spectrum-web-components/help-text/sp-help-text.js';
-import { HelpText } from '@spectrum-web-components/help-text';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('HelpText', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(
-                html`
-                    This is help text.
-                `
-            )
-    );
-    it('loads default help-text accessibly', async () => {
-        const el = await fixture(
-            html`
-                This is help text.
-            `
-        );
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-    it('loads negative/icon help-text accessibly', async () => {
-        const el = await fixture(
-            html`
-                
-                    This is negative help text.
-                
-            `
-        );
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+
+import "@spectrum-web-components/help-text/sp-help-text.js";
+import { HelpText } from "@spectrum-web-components/help-text";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+describe("HelpText", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        This is help text.
+      `),
+  );
+  it("loads default help-text accessibly", async () => {
+    const el = await fixture(html`
+      This is help text.
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("loads negative/icon help-text accessibly", async () => {
+    const el = await fixture(html`
+      
+        This is negative help text.
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
 });
diff --git a/packages/icon/sp-icon.ts b/packages/icon/sp-icon.ts
index 3b9b7a6b14..195006e337 100644
--- a/packages/icon/sp-icon.ts
+++ b/packages/icon/sp-icon.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Icon } from './src/Icon.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Icon } from "./src/Icon.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-icon', Icon);
+defineElement("sp-icon", Icon);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-icon': Icon;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-icon": Icon;
+  }
 }
diff --git a/packages/icon/src/Icon.ts b/packages/icon/src/Icon.ts
index 68f4e1e60d..eff8bd19f0 100644
--- a/packages/icon/src/Icon.ts
+++ b/packages/icon/src/Icon.ts
@@ -10,147 +10,145 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
-import { IconsetRegistry } from '@spectrum-web-components/iconset/src/iconset-registry.js';
+import { IconsetRegistry } from "@spectrum-web-components/iconset/src/iconset-registry.js";
 
-import { IconBase } from './IconBase.js';
+import { IconBase } from "./IconBase.js";
 
 /**
  * @element sp-icon
  */
 export class Icon extends IconBase {
-    @property()
-    public src?: string;
-
-    @property()
-    public name?: string;
-
-    @query('#container')
-    private iconContainer?: HTMLElement;
+  @property()
+  public src?: string;
+
+  @property()
+  public name?: string;
+
+  @query("#container")
+  private iconContainer?: HTMLElement;
+
+  private updateIconPromise?: Promise;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("sp-iconset-added", this.iconsetListener);
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener("sp-iconset-added", this.iconsetListener);
+  }
+
+  public override firstUpdated(): void {
+    this.updateIconPromise = this.updateIcon();
+  }
+
+  public override attributeChangedCallback(
+    name: string,
+    old: string,
+    value: string,
+  ): void {
+    super.attributeChangedCallback(name, old, value);
+    this.updateIconPromise = this.updateIcon(); // any of our attributes change, update our icon
+  }
+
+  private iconsetListener = (event: CustomEvent): void => {
+    if (!this.name) {
+      return;
+    }
 
-    private updateIconPromise?: Promise;
+    // parse the icon name to get iconset name
+    const icon = this.parseIcon(this.name);
 
-    public override connectedCallback(): void {
-        super.connectedCallback();
-        window.addEventListener('sp-iconset-added', this.iconsetListener);
+    if (event.detail.name === icon.iconset) {
+      this.updateIconPromise = this.updateIcon();
     }
-
-    public override disconnectedCallback(): void {
-        super.disconnectedCallback();
-        window.removeEventListener('sp-iconset-added', this.iconsetListener);
+  };
+
+  private announceIconImageSrcError(): void {
+    this.dispatchEvent(
+      new Event("error", {
+        cancelable: false,
+        bubbles: false,
+        composed: false,
+      }),
+    );
+  }
+
+  protected override render(): TemplateResult {
+    if (this.name) {
+      return html` 
 `;
+    } else if (this.src) {
+      return html`
+        ${ifDefined(this.label)}
+      `;
     }
 
-    public override firstUpdated(): void {
-        this.updateIconPromise = this.updateIcon();
-    }
+    return super.render();
+  }
 
-    public override attributeChangedCallback(
-        name: string,
-        old: string,
-        value: string
-    ): void {
-        super.attributeChangedCallback(name, old, value);
-        this.updateIconPromise = this.updateIcon(); // any of our attributes change, update our icon
+  private async updateIcon(): Promise {
+    if (this.updateIconPromise) {
+      await this.updateIconPromise;
     }
 
-    private iconsetListener = (event: CustomEvent): void => {
-        if (!this.name) {
-            return;
-        }
-
-        // parse the icon name to get iconset name
-        const icon = this.parseIcon(this.name);
-
-        if (event.detail.name === icon.iconset) {
-            this.updateIconPromise = this.updateIcon();
-        }
-    };
-
-    private announceIconImageSrcError(): void {
-        this.dispatchEvent(
-            new Event('error', {
-                cancelable: false,
-                bubbles: false,
-                composed: false,
-            })
-        );
+    if (!this.name) {
+      return Promise.resolve();
     }
 
-    protected override render(): TemplateResult {
-        if (this.name) {
-            return html`
-                

-            `;
-        } else if (this.src) {
-            return html`
-                ${ifDefined(this.label)}
-            `;
-        }
-
-        return super.render();
+    // parse the icon name to get iconset name
+    const icon = this.parseIcon(this.name);
+    // try to retrieve the iconset
+    const iconset = IconsetRegistry.getInstance().getIconset(icon.iconset);
+
+    if (!iconset) {
+      // we can stop here as there's nothing to be done till we get the iconset
+      return Promise.resolve();
     }
 
-    private async updateIcon(): Promise {
-        if (this.updateIconPromise) {
-            await this.updateIconPromise;
-        }
-
-        if (!this.name) {
-            return Promise.resolve();
-        }
-
-        // parse the icon name to get iconset name
-        const icon = this.parseIcon(this.name);
-        // try to retrieve the iconset
-        const iconset = IconsetRegistry.getInstance().getIconset(icon.iconset);
-
-        if (!iconset) {
-            // we can stop here as there's nothing to be done till we get the iconset
-            return Promise.resolve();
-        }
-
-        if (!this.iconContainer) {
-            return Promise.resolve();
-        }
-
-        this.iconContainer.innerHTML = '';
-
-        return iconset.applyIconToElement(
-            this.iconContainer,
-            icon.icon,
-            this.size || '',
-            this.label ? this.label : ''
-        );
+    if (!this.iconContainer) {
+      return Promise.resolve();
     }
 
-    private parseIcon(icon: string): { iconset: string; icon: string } {
-        const iconParts = icon.split(':');
-        let iconsetName = 'default';
-        let iconName = icon;
+    this.iconContainer.innerHTML = "";
+
+    return iconset.applyIconToElement(
+      this.iconContainer,
+      icon.icon,
+      this.size || "",
+      this.label ? this.label : "",
+    );
+  }
 
-        if (iconParts.length > 1) {
-            iconsetName = iconParts[0];
-            iconName = iconParts[1];
-        }
+  private parseIcon(icon: string): { iconset: string; icon: string } {
+    const iconParts = icon.split(":");
+    let iconsetName = "default";
+    let iconName = icon;
 
-        return { iconset: iconsetName, icon: iconName };
+    if (iconParts.length > 1) {
+      iconsetName = iconParts[0];
+      iconName = iconParts[1];
     }
 
-    protected override async getUpdateComplete(): Promise {
-        const complete = (await super.getUpdateComplete()) as boolean;
+    return { iconset: iconsetName, icon: iconName };
+  }
 
-        await this.updateIconPromise;
+  protected override async getUpdateComplete(): Promise {
+    const complete = (await super.getUpdateComplete()) as boolean;
 
-        return complete;
-    }
+    await this.updateIconPromise;
+
+    return complete;
+  }
 }
diff --git a/packages/icon/src/IconBase.ts b/packages/icon/src/IconBase.ts
index 7a0964d842..9d77368cd3 100644
--- a/packages/icon/src/IconBase.ts
+++ b/packages/icon/src/IconBase.ts
@@ -11,75 +11,73 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    SystemResolutionController,
-    systemResolverUpdatedSymbol,
-} from '@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js';
+  SystemResolutionController,
+  systemResolverUpdatedSymbol,
+} from "@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js";
 
 import {
-    property,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
+  property,
+  state,
+} from "@spectrum-web-components/base/src/decorators.js";
 
-import iconStyles from './icon.css.js';
+import iconStyles from "./icon.css.js";
 
 export class IconBase extends SpectrumElement {
-    public static override get styles(): CSSResultArray {
-        return [iconStyles];
-    }
+  public static override get styles(): CSSResultArray {
+    return [iconStyles];
+  }
 
-    private unsubscribeSystemContext: (() => void) | null = null;
+  private unsubscribeSystemContext: (() => void) | null = null;
 
-    @state()
-    public spectrumVersion = 1;
+  @state()
+  public spectrumVersion = 1;
 
-    @property({ reflect: true })
-    public label = '';
+  @property({ reflect: true })
+  public label = "";
 
-    @property({ reflect: true })
-    public size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+  @property({ reflect: true })
+  public size?: "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 
-    public override connectedCallback(): void {
-        super.connectedCallback();
-    }
+  public override connectedCallback(): void {
+    super.connectedCallback();
+  }
 
-    public override disconnectedCallback(): void {
-        super.disconnectedCallback();
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
 
-        if (this.unsubscribeSystemContext) {
-            this.unsubscribeSystemContext();
-            this.unsubscribeSystemContext = null;
-        }
+    if (this.unsubscribeSystemContext) {
+      this.unsubscribeSystemContext();
+      this.unsubscribeSystemContext = null;
     }
+  }
 
-    private systemResolver = new SystemResolutionController(this);
-
-    protected override update(changes: PropertyValues): void {
-        if (changes.has('label')) {
-            if (this.label) {
-                this.removeAttribute('aria-hidden');
-            } else {
-                this.setAttribute('aria-hidden', 'true');
-            }
-        }
+  private systemResolver = new SystemResolutionController(this);
 
-        if (changes.has(systemResolverUpdatedSymbol)) {
-            this.spectrumVersion =
-                this.systemResolver.system === 'spectrum-two' ? 2 : 1;
-        }
-
-        super.update(changes);
+  protected override update(changes: PropertyValues): void {
+    if (changes.has("label")) {
+      if (this.label) {
+        this.removeAttribute("aria-hidden");
+      } else {
+        this.setAttribute("aria-hidden", "true");
+      }
     }
 
-    protected override render(): TemplateResult {
-        return html`
-            
-        `;
+    if (changes.has(systemResolverUpdatedSymbol)) {
+      this.spectrumVersion =
+        this.systemResolver.system === "spectrum-two" ? 2 : 1;
     }
+
+    super.update(changes);
+  }
+
+  protected override render(): TemplateResult {
+    return html`  `;
+  }
 }
diff --git a/packages/icon/src/index.ts b/packages/icon/src/index.ts
index 09ccc0ad2c..b808e53a19 100644
--- a/packages/icon/src/index.ts
+++ b/packages/icon/src/index.ts
@@ -9,5 +9,5 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './IconBase.js';
-export * from './Icon.js';
+export * from "./IconBase.js";
+export * from "./Icon.js";
diff --git a/packages/icon/stories/icon.stories.ts b/packages/icon/stories/icon.stories.ts
index e26019e607..7632697e3f 100644
--- a/packages/icon/stories/icon.stories.ts
+++ b/packages/icon/stories/icon.stories.ts
@@ -19,92 +19,92 @@ import "@spectrum-web-components/icons/sp-icons-large.js";
 const sizes = ["xxs", "xs", "s", "m", "l", "xl", "xxl"];
 
 export default {
-	component: "sp-icon",
-	title: "Icon",
+  component: "sp-icon",
+  title: "Icon",
 };
 
 export const Medium = (): TemplateResult => {
-	return html`
-		
-		${sizes.map(
-			(size) => html`  `,
-		)}
-	`;
+  return html`
+    
+    ${sizes.map(
+      (size) => html`  `,
+    )}
+  `;
 };
 
 export const Large = (): TemplateResult => {
-	return html`
-		
-		${sizes.map(
-			(size) => html`  `,
-		)}
-	`;
+  return html`
+    
+    ${sizes.map(
+      (size) => html`  `,
+    )}
+  `;
 };
 
 export const imageIcon = (): TemplateResult => {
-	return html`
-		${sizes.map(
-			(size) => html`
-				
-			`,
-		)}
-	`;
+  return html`
+    ${sizes.map(
+      (size) => html`
+        
+      `,
+    )}
+  `;
 };
 
 imageIcon.storyName = "Image Icon";
 
 export const imageIconSrcError = (): TemplateResult => {
-	const invalidImgSrc = "invalid-image-src";
-	const error = (): void => {
-		console.error("Invalid sp-icon src provided");
-	};
+  const invalidImgSrc = "invalid-image-src";
+  const error = (): void => {
+    console.error("Invalid sp-icon src provided");
+  };
 
-	return html`
-		${sizes.map(
-			(size) => html`
-				
-			`,
-		)}
-	`;
+  return html`
+    ${sizes.map(
+      (size) => html`
+        
+      `,
+    )}
+  `;
 };
 
 imageIconSrcError.storyName = "Image Icon src invalid error";
 
 imageIconSrcError.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 imageIconSrcError.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const svgIcon = (): TemplateResult => {
-	return html`
-		${sizes.map(
-			(size) => html`
-				
-					
-				
-			`,
-		)}
-	`;
+  return html`
+    ${sizes.map(
+      (size) => html`
+        
+          
+        
+      `,
+    )}
+  `;
 };
 
 svgIcon.storyName = "SVG Icon";
diff --git a/packages/icon/stories/images.ts b/packages/icon/stories/images.ts
index dbc2f15bd9..e5805241bf 100644
--- a/packages/icon/stories/images.ts
+++ b/packages/icon/stories/images.ts
@@ -11,4 +11,4 @@ governing permissions and limitations under the License.
 */
 
 export const back =
-    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4=';
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4=";
diff --git a/packages/icon/test/benchmark/test-basic.ts b/packages/icon/test/benchmark/test-basic.ts
index 8b7e43646b..225862fa0a 100644
--- a/packages/icon/test/benchmark/test-basic.ts
+++ b/packages/icon/test/benchmark/test-basic.ts
@@ -10,20 +10,18 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons/sp-icons-medium.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 async function test(): Promise {
-    const iconset = document.createElement('sp-icons-medium');
+  const iconset = document.createElement("sp-icons-medium");
 
-    document.body.append(iconset);
-    await iconset.updateComplete;
+  document.body.append(iconset);
+  await iconset.updateComplete;
 
-    measureFixtureCreation(html`
-        
-    `);
+  measureFixtureCreation(html`  `);
 }
 
 test();
diff --git a/packages/icon/test/icon-memory.test.ts b/packages/icon/test/icon-memory.test.ts
index 80e97a3100..1e61827775 100644
--- a/packages/icon/test/icon-memory.test.ts
+++ b/packages/icon/test/icon-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/icon/sp-icon.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/icon/sp-icon.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/icon/test/icon.test.ts b/packages/icon/test/icon.test.ts
index 29716b998c..7d689a7347 100644
--- a/packages/icon/test/icon.test.ts
+++ b/packages/icon/test/icon.test.ts
@@ -10,162 +10,160 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import Sinon from 'sinon';
-import { isWebKit } from '@spectrum-web-components/shared';
-import '@spectrum-web-components/icon/sp-icon.js';
-import { Icon } from '@spectrum-web-components/icon';
-import '@spectrum-web-components/icons/sp-icons-medium.js';
+import Sinon from "sinon";
+import { isWebKit } from "@spectrum-web-components/shared";
+import "@spectrum-web-components/icon/sp-icon.js";
+import { Icon } from "@spectrum-web-components/icon";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    waitUntil,
-} from '@open-wc/testing';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('Icon', () => {
-    before(async () => {
-        const icons = document.createElement('sp-icons-medium');
-
-        document.body.append(icons);
-
-        await elementUpdated(icons);
-    });
-
-    it('loads', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        const container = el.shadowRoot
-            ? (el.shadowRoot.querySelector('#container') as HTMLDivElement)
-            : (el.querySelector('#container') as HTMLDivElement);
-
-        expect(container).to.exist;
-        const icon = container.querySelector('svg') as SVGElement;
-
-        expect(icon).to.exist;
-        expect(icon.getAttribute('aria-hidden')).to.equal('true');
-    });
-
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-            `)
-    );
-
-    it('loads w/ src', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-
-    it('loads w/ invalid src, error dispatching', async () => {
-        const error = Sinon.spy();
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-
-        // Skipping the test case expectation for webkit because of error event not dispatching bug for the same, https://github.com/microsoft/playwright/issues/22332
-        if (!isWebKit()) {
-            await waitUntil(() => error.calledOnce, 'The error was thrown.');
-        }
-    });
-
-    it('loads w/ label', async () => {
-        const label = 'Chevron';
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        const container = el.shadowRoot
-            ? (el.shadowRoot.querySelector('#container') as HTMLDivElement)
-            : (el.querySelector('#container') as HTMLDivElement);
-
-        expect(container).to.exist;
-        const icon = container.querySelector('svg') as SVGElement;
-
-        expect(icon).to.exist;
-        expect(icon.hasAttribute('aria-hidden')).to.be.false;
-        expect(icon.getAttribute('aria-label')).to.equal(label);
-    });
-
-    it('does not error when name is missing', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        return elementUpdated(el);
-    });
-
-    it('does not error with unknown set', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        return elementUpdated(el);
-    });
-
-    it('does error with unknown icon', async () => {
-        const el = document.createElement('sp-icon');
-
-        el.name = 'ui:unknown-icon';
-
-        try {
-            document.body.appendChild(el);
-            await elementUpdated(el);
-            expect('failed').to.not.equal('failed');
-        } catch (error) {
-            expect(() => {
-                throw error;
-            }).to.throw();
-        }
-
-        el.remove();
-    });
-
-    it('does not add multiple SVGs when removed and re-added to DOM', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-
-        const parent = el.parentNode as HTMLElement;
-
-        parent.removeChild(el);
-        parent.appendChild(el);
-
-        // wait for updates
-        await el.updateComplete;
-
-        const count = el.shadowRoot.querySelectorAll('svg').length;
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  waitUntil,
+} from "@open-wc/testing";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+describe("Icon", () => {
+  before(async () => {
+    const icons = document.createElement("sp-icons-medium");
+
+    document.body.append(icons);
+
+    await elementUpdated(icons);
+  });
+
+  it("loads", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    const container = el.shadowRoot
+      ? (el.shadowRoot.querySelector("#container") as HTMLDivElement)
+      : (el.querySelector("#container") as HTMLDivElement);
+
+    expect(container).to.exist;
+    const icon = container.querySelector("svg") as SVGElement;
+
+    expect(icon).to.exist;
+    expect(icon.getAttribute("aria-hidden")).to.equal("true");
+  });
+
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+      `),
+  );
+
+  it("loads w/ src", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+
+  it("loads w/ invalid src, error dispatching", async () => {
+    const error = Sinon.spy();
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+
+    // Skipping the test case expectation for webkit because of error event not dispatching bug for the same, https://github.com/microsoft/playwright/issues/22332
+    if (!isWebKit()) {
+      await waitUntil(() => error.calledOnce, "The error was thrown.");
+    }
+  });
+
+  it("loads w/ label", async () => {
+    const label = "Chevron";
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    const container = el.shadowRoot
+      ? (el.shadowRoot.querySelector("#container") as HTMLDivElement)
+      : (el.querySelector("#container") as HTMLDivElement);
+
+    expect(container).to.exist;
+    const icon = container.querySelector("svg") as SVGElement;
+
+    expect(icon).to.exist;
+    expect(icon.hasAttribute("aria-hidden")).to.be.false;
+    expect(icon.getAttribute("aria-label")).to.equal(label);
+  });
+
+  it("does not error when name is missing", async () => {
+    const el = await fixture(html`  `);
+
+    return elementUpdated(el);
+  });
+
+  it("does not error with unknown set", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    return elementUpdated(el);
+  });
+
+  it("does error with unknown icon", async () => {
+    const el = document.createElement("sp-icon");
+
+    el.name = "ui:unknown-icon";
+
+    try {
+      document.body.appendChild(el);
+      await elementUpdated(el);
+      expect("failed").to.not.equal("failed");
+    } catch (error) {
+      expect(() => {
+        throw error;
+      }).to.throw();
+    }
+
+    el.remove();
+  });
+
+  it("does not add multiple SVGs when removed and re-added to DOM", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+
+    const parent = el.parentNode as HTMLElement;
+
+    parent.removeChild(el);
+    parent.appendChild(el);
+
+    // wait for updates
+    await el.updateComplete;
+
+    const count = el.shadowRoot.querySelectorAll("svg").length;
 
-        expect(count).to.equal(1);
-    });
+    expect(count).to.equal(1);
+  });
 });
diff --git a/packages/icons-ui/src/custom-tag.ts b/packages/icons-ui/src/custom-tag.ts
index 12975fc6c5..e8e88e97d0 100644
--- a/packages/icons-ui/src/custom-tag.ts
+++ b/packages/icons-ui/src/custom-tag.ts
@@ -10,33 +10,32 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 export type { TemplateResult };
 
 export type GenericTemplateLiteralTagType = (
-    strings: TemplateStringsArray,
-    ...values: unknown[]
+  strings: TemplateStringsArray,
+  ...values: unknown[]
 ) => string;
 type TemplateLiteralTagType = GenericTemplateLiteralTagType | typeof html;
 let customTemplateLiteralTag: TemplateLiteralTagType;
 
 export const tag = function (
-    strings: TemplateStringsArray,
-    ...values: unknown[]
+  strings: TemplateStringsArray,
+  ...values: unknown[]
 ): string | TemplateResult {
-    if (customTemplateLiteralTag) {
-        return customTemplateLiteralTag(strings, ...values);
-    }
+  if (customTemplateLiteralTag) {
+    return customTemplateLiteralTag(strings, ...values);
+  }
 
-    return values.reduce(
-        (acc: string, v, idx) =>
-            (acc as string) + (v as string) + strings[idx + 1],
-        strings[0]
-    );
+  return values.reduce(
+    (acc: string, v, idx) => (acc as string) + (v as string) + strings[idx + 1],
+    strings[0],
+  );
 };
 
 export const setCustomTemplateLiteralTag = (
-    tag: TemplateLiteralTagType
+  tag: TemplateLiteralTagType,
 ): void => {
-    customTemplateLiteralTag = tag;
+  customTemplateLiteralTag = tag;
 };
diff --git a/packages/icons-ui/src/index.ts b/packages/icons-ui/src/index.ts
index 08b92586f5..62a240be53 100644
--- a/packages/icons-ui/src/index.ts
+++ b/packages/icons-ui/src/index.ts
@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@spectrum-web-components/base';
-import { setCustomTemplateLiteralTag } from './custom-tag.js';
+import { html } from "@spectrum-web-components/base";
+import { setCustomTemplateLiteralTag } from "./custom-tag.js";
 
 setCustomTemplateLiteralTag(html);
 
 export { setCustomTemplateLiteralTag };
-export * from './icons.js';
+export * from "./icons.js";
diff --git a/packages/icons-ui/stories/icons-ui.stories.ts b/packages/icons-ui/stories/icons-ui.stories.ts
index c4868cfe52..dc804d361e 100644
--- a/packages/icons-ui/stories/icons-ui.stories.ts
+++ b/packages/icons-ui/stories/icons-ui.stories.ts
@@ -16,103 +16,105 @@ import "@spectrum-web-components/icon/sp-icon.js";
 import "../../iconset/stories/icons-demo.js";
 
 export default {
-	title: "Icons/UI",
-	argTypes: {
-		color: { control: "color" },
-		size: {
-			control: {
-				type: "inline-radio",
-				options: ["s", "m", "l", "xl"],
-			},
-		},
-	},
-	args: {
-		color: "#000000",
-		size: "m",
-	},
-	swc_vrt: {
-		preload: async (): Promise => {
-			await import("./icon-manifest.js");
-		},
-	},
+  title: "Icons/UI",
+  argTypes: {
+    color: { control: "color" },
+    size: {
+      control: {
+        type: "inline-radio",
+        options: ["s", "m", "l", "xl"],
+      },
+    },
+  },
+  args: {
+    color: "#000000",
+    size: "m",
+  },
+  swc_vrt: {
+    preload: async (): Promise => {
+      await import("./icon-manifest.js");
+    },
+  },
 };
 
 interface Properties {
-	color: string;
-	size: "s" | "m" | "l" | "xl";
+  color: string;
+  size: "s" | "m" | "l" | "xl";
 }
 
 export const elements = ({ color, size }: Properties): TemplateResult => {
-	const content = import("./icon-manifest.js").then(
-		(iconManifest) => html`
-			
-		`,
-	);
+  const content = import("./icon-manifest.js").then(
+    (iconManifest) => html`
+      
+    `,
+  );
 
-	return html`
-		
-		 ${until(content, html` Loading... `)} 
-	`;
+  return html`
+    
+     ${until(content, html` Loading... `)} 
+  `;
 };
 
 export const Icons = ({ color, size }: Properties): TemplateResult => {
-	const content = import("../").then((icons) => {
-		const iconTemplates: {
-			template: () => TemplateResult;
-			name: string;
-		}[] = [];
+  const content = import("../src/index.js").then((icons) => {
+    const iconTemplates: {
+      template: () => TemplateResult;
+      name: string;
+    }[] = [];
 
-		for (const icon in icons) {
-			if (icon === "setCustomTemplateLiteralTag") continue;
+    for (const icon in icons) {
+      if (icon === "setCustomTemplateLiteralTag") {
+        continue;
+      }
 
-			iconTemplates.push({
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any
-				template: (icons as any)[icon],
-				name: icon,
-			});
-		}
+      iconTemplates.push({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        template: (icons as any)[icon],
+        name: icon,
+      });
+    }
 
-		return html`
-			
-				${iconTemplates.map(
-					(icon) => html`
-						
-							${icon.template()}
-							${icon.name}
-						
-					`,
-				)}
-			
-		`;
-	});
+    return html`
+      
+        ${iconTemplates.map(
+          (icon) => html`
+            
+              ${icon.template()}
+              ${icon.name}
+            
+          `,
+        )}
+      
+    `;
+  });
 
-	return html`
-		
-		 ${until(content, html` Loading... `)} 
-	`;
+  return html`
+    
+     ${until(content, html` Loading... `)} 
+  `;
 };
diff --git a/packages/icons-ui/test/benchmark/test-attribute-many.ts b/packages/icons-ui/test/benchmark/test-attribute-many.ts
index 976353da3b..4d9ea1ca27 100644
--- a/packages/icons-ui/test/benchmark/test-attribute-many.ts
+++ b/packages/icons-ui/test/benchmark/test-attribute-many.ts
@@ -10,62 +10,62 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons/sp-icons-medium.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-const iconset = document.createElement('sp-icons-medium');
+const iconset = document.createElement("sp-icons-medium");
 
 document.body.append(iconset);
 
 measureFixtureCreation(html`
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
 `);
diff --git a/packages/icons-ui/test/benchmark/test-attribute.ts b/packages/icons-ui/test/benchmark/test-attribute.ts
index ac0413d21c..06668026da 100644
--- a/packages/icons-ui/test/benchmark/test-attribute.ts
+++ b/packages/icons-ui/test/benchmark/test-attribute.ts
@@ -10,62 +10,62 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons/sp-icons-medium.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-const iconset = document.createElement('sp-icons-medium');
+const iconset = document.createElement("sp-icons-medium");
 
 document.body.append(iconset);
 
 measureFixtureCreation(html`
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
 `);
diff --git a/packages/icons-ui/test/benchmark/test-injected-many.ts b/packages/icons-ui/test/benchmark/test-injected-many.ts
index 880c1410f1..e47559e5f9 100644
--- a/packages/icons-ui/test/benchmark/test-injected-many.ts
+++ b/packages/icons-ui/test/benchmark/test-injected-many.ts
@@ -10,108 +10,108 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icon/sp-icon.js';
-import { Arrow75Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow75.js';
-import { Arrow100Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow100.js';
-import { Arrow200Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow200.js';
-import { Arrow300Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow300.js';
-import { Arrow400Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow400.js';
-import { Arrow500Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow500.js';
-import { Arrow600Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow600.js';
-import { Asterisk75Icon } from '@spectrum-web-components/icons-ui/src/icons/Asterisk75.js';
-import { Asterisk100Icon } from '@spectrum-web-components/icons-ui/src/icons/Asterisk100.js';
-import { Asterisk200Icon } from '@spectrum-web-components/icons-ui/src/icons/Asterisk200.js';
-import { Asterisk300Icon } from '@spectrum-web-components/icons-ui/src/icons/Asterisk300.js';
-import { Checkmark50Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark50.js';
-import { Checkmark75Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark75.js';
-import { Checkmark100Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark100.js';
-import { Checkmark200Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark200.js';
-import { Checkmark300Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark300.js';
-import { Checkmark400Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark400.js';
-import { Checkmark500Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark500.js';
-import { Checkmark600Icon } from '@spectrum-web-components/icons-ui/src/icons/Checkmark600.js';
-import { Chevron75Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron75.js';
-import { Chevron100Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron100.js';
-import { Chevron200Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron200.js';
-import { Chevron300Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron300.js';
-import { Chevron400Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron400.js';
-import { Chevron500Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron500.js';
-import { Chevron600Icon } from '@spectrum-web-components/icons-ui/src/icons/Chevron600.js';
-import { CornerTriangle75Icon } from '@spectrum-web-components/icons-ui/src/icons/CornerTriangle75.js';
-import { CornerTriangle100Icon } from '@spectrum-web-components/icons-ui/src/icons/CornerTriangle100.js';
-import { CornerTriangle200Icon } from '@spectrum-web-components/icons-ui/src/icons/CornerTriangle200.js';
-import { CornerTriangle300Icon } from '@spectrum-web-components/icons-ui/src/icons/CornerTriangle300.js';
-import { Cross75Icon } from '@spectrum-web-components/icons-ui/src/icons/Cross75.js';
-import { Cross100Icon } from '@spectrum-web-components/icons-ui/src/icons/Cross100.js';
-import { Cross200Icon } from '@spectrum-web-components/icons-ui/src/icons/Cross200.js';
-import { Cross300Icon } from '@spectrum-web-components/icons-ui/src/icons/Cross300.js';
-import { Cross400Icon } from '@spectrum-web-components/icons-ui/src/icons/Cross400.js';
-import { Cross500Icon } from '@spectrum-web-components/icons-ui/src/icons/Cross500.js';
-import { Cross600Icon } from '@spectrum-web-components/icons-ui/src/icons/Cross600.js';
-import { Dash50Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash50.js';
-import { Dash75Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash75.js';
-import { Dash100Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash100.js';
-import { Dash200Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash200.js';
-import { Dash300Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash300.js';
-import { Dash400Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash400.js';
-import { Dash500Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash500.js';
-import { Dash600Icon } from '@spectrum-web-components/icons-ui/src/icons/Dash600.js';
-import { DoubleGripperIcon } from '@spectrum-web-components/icons-ui/src/icons/DoubleGripper.js';
-import { SingleGripperIcon } from '@spectrum-web-components/icons-ui/src/icons/SingleGripper.js';
-import { TripleGripperIcon } from '@spectrum-web-components/icons-ui/src/icons/TripleGripper.js';
-import { setCustomTemplateLiteralTag } from '@spectrum-web-components/icons-ui/src/custom-tag.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import { Arrow75Icon } from "@spectrum-web-components/icons-ui/src/icons/Arrow75.js";
+import { Arrow100Icon } from "@spectrum-web-components/icons-ui/src/icons/Arrow100.js";
+import { Arrow200Icon } from "@spectrum-web-components/icons-ui/src/icons/Arrow200.js";
+import { Arrow300Icon } from "@spectrum-web-components/icons-ui/src/icons/Arrow300.js";
+import { Arrow400Icon } from "@spectrum-web-components/icons-ui/src/icons/Arrow400.js";
+import { Arrow500Icon } from "@spectrum-web-components/icons-ui/src/icons/Arrow500.js";
+import { Arrow600Icon } from "@spectrum-web-components/icons-ui/src/icons/Arrow600.js";
+import { Asterisk75Icon } from "@spectrum-web-components/icons-ui/src/icons/Asterisk75.js";
+import { Asterisk100Icon } from "@spectrum-web-components/icons-ui/src/icons/Asterisk100.js";
+import { Asterisk200Icon } from "@spectrum-web-components/icons-ui/src/icons/Asterisk200.js";
+import { Asterisk300Icon } from "@spectrum-web-components/icons-ui/src/icons/Asterisk300.js";
+import { Checkmark50Icon } from "@spectrum-web-components/icons-ui/src/icons/Checkmark50.js";
+import { Checkmark75Icon } from "@spectrum-web-components/icons-ui/src/icons/Checkmark75.js";
+import { Checkmark100Icon } from "@spectrum-web-components/icons-ui/src/icons/Checkmark100.js";
+import { Checkmark200Icon } from "@spectrum-web-components/icons-ui/src/icons/Checkmark200.js";
+import { Checkmark300Icon } from "@spectrum-web-components/icons-ui/src/icons/Checkmark300.js";
+import { Checkmark400Icon } from "@spectrum-web-components/icons-ui/src/icons/Checkmark400.js";
+import { Checkmark500Icon } from "@spectrum-web-components/icons-ui/src/icons/Checkmark500.js";
+import { Checkmark600Icon } from "@spectrum-web-components/icons-ui/src/icons/Checkmark600.js";
+import { Chevron75Icon } from "@spectrum-web-components/icons-ui/src/icons/Chevron75.js";
+import { Chevron100Icon } from "@spectrum-web-components/icons-ui/src/icons/Chevron100.js";
+import { Chevron200Icon } from "@spectrum-web-components/icons-ui/src/icons/Chevron200.js";
+import { Chevron300Icon } from "@spectrum-web-components/icons-ui/src/icons/Chevron300.js";
+import { Chevron400Icon } from "@spectrum-web-components/icons-ui/src/icons/Chevron400.js";
+import { Chevron500Icon } from "@spectrum-web-components/icons-ui/src/icons/Chevron500.js";
+import { Chevron600Icon } from "@spectrum-web-components/icons-ui/src/icons/Chevron600.js";
+import { CornerTriangle75Icon } from "@spectrum-web-components/icons-ui/src/icons/CornerTriangle75.js";
+import { CornerTriangle100Icon } from "@spectrum-web-components/icons-ui/src/icons/CornerTriangle100.js";
+import { CornerTriangle200Icon } from "@spectrum-web-components/icons-ui/src/icons/CornerTriangle200.js";
+import { CornerTriangle300Icon } from "@spectrum-web-components/icons-ui/src/icons/CornerTriangle300.js";
+import { Cross75Icon } from "@spectrum-web-components/icons-ui/src/icons/Cross75.js";
+import { Cross100Icon } from "@spectrum-web-components/icons-ui/src/icons/Cross100.js";
+import { Cross200Icon } from "@spectrum-web-components/icons-ui/src/icons/Cross200.js";
+import { Cross300Icon } from "@spectrum-web-components/icons-ui/src/icons/Cross300.js";
+import { Cross400Icon } from "@spectrum-web-components/icons-ui/src/icons/Cross400.js";
+import { Cross500Icon } from "@spectrum-web-components/icons-ui/src/icons/Cross500.js";
+import { Cross600Icon } from "@spectrum-web-components/icons-ui/src/icons/Cross600.js";
+import { Dash50Icon } from "@spectrum-web-components/icons-ui/src/icons/Dash50.js";
+import { Dash75Icon } from "@spectrum-web-components/icons-ui/src/icons/Dash75.js";
+import { Dash100Icon } from "@spectrum-web-components/icons-ui/src/icons/Dash100.js";
+import { Dash200Icon } from "@spectrum-web-components/icons-ui/src/icons/Dash200.js";
+import { Dash300Icon } from "@spectrum-web-components/icons-ui/src/icons/Dash300.js";
+import { Dash400Icon } from "@spectrum-web-components/icons-ui/src/icons/Dash400.js";
+import { Dash500Icon } from "@spectrum-web-components/icons-ui/src/icons/Dash500.js";
+import { Dash600Icon } from "@spectrum-web-components/icons-ui/src/icons/Dash600.js";
+import { DoubleGripperIcon } from "@spectrum-web-components/icons-ui/src/icons/DoubleGripper.js";
+import { SingleGripperIcon } from "@spectrum-web-components/icons-ui/src/icons/SingleGripper.js";
+import { TripleGripperIcon } from "@spectrum-web-components/icons-ui/src/icons/TripleGripper.js";
+import { setCustomTemplateLiteralTag } from "@spectrum-web-components/icons-ui/src/custom-tag.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 setCustomTemplateLiteralTag(html);
 
 measureFixtureCreation(html`
-    ${Arrow75Icon()}
-    ${Arrow100Icon()}
-    ${Arrow200Icon()}
-    ${Arrow300Icon()}
-    ${Arrow400Icon()}
-    ${Arrow500Icon()}
-    ${Arrow600Icon()}
-    ${Asterisk75Icon()}
-    ${Asterisk100Icon()}
-    ${Asterisk200Icon()}
-    ${Asterisk300Icon()}
-    ${Checkmark50Icon()}
-    ${Checkmark75Icon()}
-    ${Checkmark100Icon()}
-    ${Checkmark200Icon()}
-    ${Checkmark300Icon()}
-    ${Checkmark400Icon()}
-    ${Checkmark500Icon()}
-    ${Checkmark600Icon()}
-    ${Chevron75Icon()}
-    ${Chevron100Icon()}
-    ${Chevron200Icon()}
-    ${Chevron300Icon()}
-    ${Chevron400Icon()}
-    ${Chevron500Icon()}
-    ${Chevron600Icon()}
-    ${CornerTriangle75Icon()}
-    ${CornerTriangle100Icon()}
-    ${CornerTriangle200Icon()}
-    ${CornerTriangle300Icon()}
-    ${Cross75Icon()}
-    ${Cross100Icon()}
-    ${Cross200Icon()}
-    ${Cross300Icon()}
-    ${Cross400Icon()}
-    ${Cross500Icon()}
-    ${Cross600Icon()}
-    ${Dash50Icon()}
-    ${Dash75Icon()}
-    ${Dash100Icon()}
-    ${Dash200Icon()}
-    ${Dash300Icon()}
-    ${Dash400Icon()}
-    ${Dash500Icon()}
-    ${Dash600Icon()}
-    ${DoubleGripperIcon()}
-    ${SingleGripperIcon()}
-    ${TripleGripperIcon()}
+  ${Arrow75Icon()}
+  ${Arrow100Icon()}
+  ${Arrow200Icon()}
+  ${Arrow300Icon()}
+  ${Arrow400Icon()}
+  ${Arrow500Icon()}
+  ${Arrow600Icon()}
+  ${Asterisk75Icon()}
+  ${Asterisk100Icon()}
+  ${Asterisk200Icon()}
+  ${Asterisk300Icon()}
+  ${Checkmark50Icon()}
+  ${Checkmark75Icon()}
+  ${Checkmark100Icon()}
+  ${Checkmark200Icon()}
+  ${Checkmark300Icon()}
+  ${Checkmark400Icon()}
+  ${Checkmark500Icon()}
+  ${Checkmark600Icon()}
+  ${Chevron75Icon()}
+  ${Chevron100Icon()}
+  ${Chevron200Icon()}
+  ${Chevron300Icon()}
+  ${Chevron400Icon()}
+  ${Chevron500Icon()}
+  ${Chevron600Icon()}
+  ${CornerTriangle75Icon()}
+  ${CornerTriangle100Icon()}
+  ${CornerTriangle200Icon()}
+  ${CornerTriangle300Icon()}
+  ${Cross75Icon()}
+  ${Cross100Icon()}
+  ${Cross200Icon()}
+  ${Cross300Icon()}
+  ${Cross400Icon()}
+  ${Cross500Icon()}
+  ${Cross600Icon()}
+  ${Dash50Icon()}
+  ${Dash75Icon()}
+  ${Dash100Icon()}
+  ${Dash200Icon()}
+  ${Dash300Icon()}
+  ${Dash400Icon()}
+  ${Dash500Icon()}
+  ${Dash600Icon()}
+  ${DoubleGripperIcon()}
+  ${SingleGripperIcon()}
+  ${TripleGripperIcon()}
 `);
diff --git a/packages/icons-ui/test/benchmark/test-injected.ts b/packages/icons-ui/test/benchmark/test-injected.ts
index d4b872fdd5..fd1f7ac6a9 100644
--- a/packages/icons-ui/test/benchmark/test-injected.ts
+++ b/packages/icons-ui/test/benchmark/test-injected.ts
@@ -10,49 +10,49 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icon/sp-icon.js';
-import { Arrow75Icon } from '@spectrum-web-components/icons-ui/src/icons/Arrow75.js';
-import { setCustomTemplateLiteralTag } from '@spectrum-web-components/icons-ui/src/custom-tag.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import { Arrow75Icon } from "@spectrum-web-components/icons-ui/src/icons/Arrow75.js";
+import { setCustomTemplateLiteralTag } from "@spectrum-web-components/icons-ui/src/custom-tag.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 setCustomTemplateLiteralTag(html);
 
 measureFixtureCreation(html`
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
-    ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
+  ${Arrow75Icon()}
 `);
diff --git a/packages/icons-ui/test/benchmark/test-registered-many.ts b/packages/icons-ui/test/benchmark/test-registered-many.ts
index ef8330dc59..f75aa1b276 100644
--- a/packages/icons-ui/test/benchmark/test-registered-many.ts
+++ b/packages/icons-ui/test/benchmark/test-registered-many.ts
@@ -10,104 +10,104 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow300.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow400.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow500.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow600.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk300.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark50.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark400.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark500.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark600.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron300.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron400.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron500.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron600.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-cross600.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash50.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash400.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash500.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-dash600.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-double-gripper.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-single-gripper.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-triple-gripper.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icons-ui/icons/sp-icon-arrow75.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-arrow200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-arrow300.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-arrow400.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-arrow500.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-arrow600.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-asterisk75.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-asterisk200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-asterisk300.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark50.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark75.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark300.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark400.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark500.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark600.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron300.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron400.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron500.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron600.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle75.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle100.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross75.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross100.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross300.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross400.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross500.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-cross600.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-dash50.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-dash400.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-dash500.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-dash600.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-double-gripper.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-single-gripper.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-triple-gripper.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
 `);
diff --git a/packages/icons-ui/test/benchmark/test-registered.ts b/packages/icons-ui/test/benchmark/test-registered.ts
index 98813a8091..342a45b099 100644
--- a/packages/icons-ui/test/benchmark/test-registered.ts
+++ b/packages/icons-ui/test/benchmark/test-registered.ts
@@ -10,56 +10,56 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
 `);
diff --git a/packages/icons-workflow/src/DefaultIcon.ts b/packages/icons-workflow/src/DefaultIcon.ts
index 03ea362bb8..16faaccacf 100644
--- a/packages/icons-workflow/src/DefaultIcon.ts
+++ b/packages/icons-workflow/src/DefaultIcon.ts
@@ -10,31 +10,31 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { tag as html, TemplateResult } from './custom-tag.js';
+import { tag as html, TemplateResult } from "./custom-tag.js";
 
-export { setCustomTemplateLiteralTag } from './custom-tag.js';
+export { setCustomTemplateLiteralTag } from "./custom-tag.js";
 export const DefaultIcon = ({
-    width = 24,
-    height = 24,
-    hidden = false,
-    title = 'Default',
+  width = 24,
+  height = 24,
+  hidden = false,
+  title = "Default",
 } = {}): string | TemplateResult => {
-    return html`
-        
-            
-        
-    `;
+  return html`
+    
+      
+    
+  `;
 };
diff --git a/packages/icons-workflow/src/custom-tag.ts b/packages/icons-workflow/src/custom-tag.ts
index 12975fc6c5..e8e88e97d0 100644
--- a/packages/icons-workflow/src/custom-tag.ts
+++ b/packages/icons-workflow/src/custom-tag.ts
@@ -10,33 +10,32 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 export type { TemplateResult };
 
 export type GenericTemplateLiteralTagType = (
-    strings: TemplateStringsArray,
-    ...values: unknown[]
+  strings: TemplateStringsArray,
+  ...values: unknown[]
 ) => string;
 type TemplateLiteralTagType = GenericTemplateLiteralTagType | typeof html;
 let customTemplateLiteralTag: TemplateLiteralTagType;
 
 export const tag = function (
-    strings: TemplateStringsArray,
-    ...values: unknown[]
+  strings: TemplateStringsArray,
+  ...values: unknown[]
 ): string | TemplateResult {
-    if (customTemplateLiteralTag) {
-        return customTemplateLiteralTag(strings, ...values);
-    }
+  if (customTemplateLiteralTag) {
+    return customTemplateLiteralTag(strings, ...values);
+  }
 
-    return values.reduce(
-        (acc: string, v, idx) =>
-            (acc as string) + (v as string) + strings[idx + 1],
-        strings[0]
-    );
+  return values.reduce(
+    (acc: string, v, idx) => (acc as string) + (v as string) + strings[idx + 1],
+    strings[0],
+  );
 };
 
 export const setCustomTemplateLiteralTag = (
-    tag: TemplateLiteralTagType
+  tag: TemplateLiteralTagType,
 ): void => {
-    customTemplateLiteralTag = tag;
+  customTemplateLiteralTag = tag;
 };
diff --git a/packages/icons-workflow/src/index.ts b/packages/icons-workflow/src/index.ts
index 08b92586f5..62a240be53 100644
--- a/packages/icons-workflow/src/index.ts
+++ b/packages/icons-workflow/src/index.ts
@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@spectrum-web-components/base';
-import { setCustomTemplateLiteralTag } from './custom-tag.js';
+import { html } from "@spectrum-web-components/base";
+import { setCustomTemplateLiteralTag } from "./custom-tag.js";
 
 setCustomTemplateLiteralTag(html);
 
 export { setCustomTemplateLiteralTag };
-export * from './icons.js';
+export * from "./icons.js";
diff --git a/packages/icons-workflow/stories/icons-workflow.stories.ts b/packages/icons-workflow/stories/icons-workflow.stories.ts
index e527432a09..fa298c26a9 100644
--- a/packages/icons-workflow/stories/icons-workflow.stories.ts
+++ b/packages/icons-workflow/stories/icons-workflow.stories.ts
@@ -9,123 +9,111 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/icon/sp-icon.js';
-import '../../iconset/stories/icons-demo.js';
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { until } from '@spectrum-web-components/base/src/directives.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import "../../iconset/stories/icons-demo.js";
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { until } from "@spectrum-web-components/base/src/directives.js";
 
 export default {
-    title: 'Icons/Workflow',
-    argTypes: {
-        color: { control: 'color' },
-        size: {
-            control: {
-                type: 'inline-radio',
-                options: ['s', 'm', 'l', 'xl'],
-            },
-        },
+  title: "Icons/Workflow",
+  argTypes: {
+    color: { control: "color" },
+    size: {
+      control: {
+        type: "inline-radio",
+        options: ["s", "m", "l", "xl"],
+      },
     },
-    args: {
-        color: '#000000',
-        size: 'm',
-    },
-    swc_vrt: {
-        preload: async (): Promise => {
-            await import('./icon-manifest.js');
-        },
+  },
+  args: {
+    color: "#000000",
+    size: "m",
+  },
+  swc_vrt: {
+    preload: async (): Promise => {
+      await import("./icon-manifest.js");
     },
+  },
 };
 
 interface Properties {
-    color: string;
-    size: 's' | 'm' | 'l' | 'xl';
+  color: string;
+  size: "s" | "m" | "l" | "xl";
 }
 
 export const elements = ({ color, size }: Properties): TemplateResult => {
-    const content = import('./icon-manifest.js').then(
-        (iconManifest) => html`
-            
-        `
-    );
+  const content = import("./icon-manifest.js").then(
+    (iconManifest) => html`
+      
+    `,
+  );
 
-    return html`
-        
-        
-            ${until(
-                content,
-                html`
-                    Loading...
-                `
-            )}
-        
-    `;
+  return html`
+    
+     ${until(content, html` Loading... `)} 
+  `;
 };
 
 export const Icons = ({ color, size }: Properties): TemplateResult => {
-    const content = import('../').then((icons) => {
-        const iconTemplates: {
-            template: () => TemplateResult;
-            name: string;
-        }[] = [];
+  const content = import("../src/index.js").then((icons) => {
+    const iconTemplates: {
+      template: () => TemplateResult;
+      name: string;
+    }[] = [];
 
-        for (const icon in icons) {
-            if (icon === 'setCustomTemplateLiteralTag') continue;
+    for (const icon in icons) {
+      if (icon === "setCustomTemplateLiteralTag") {
+        continue;
+      }
 
-            iconTemplates.push({
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                template: (icons as any)[icon],
-                name: icon,
-            });
-        }
-
-        return html`
-            
-                ${iconTemplates.map(
-                    (icon) => html`
-                        
-                            ${icon.template()}
-                            ${icon.name}
-                        
-                    `
-                )}
-            
-        `;
-    });
+      iconTemplates.push({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        template: (icons as any)[icon],
+        name: icon,
+      });
+    }
 
     return html`
-        
-        
-            ${until(
-                content,
-                html`
-                    Loading...
-                `
-            )}
-        
+      
+        ${iconTemplates.map(
+          (icon) => html`
+            
+              ${icon.template()}
+              ${icon.name}
+            
+          `,
+        )}
+      
     `;
+  });
+
+  return html`
+    
+     ${until(content, html` Loading... `)} 
+  `;
 };
diff --git a/packages/icons-workflow/test/benchmark/test-attribute-many.ts b/packages/icons-workflow/test/benchmark/test-attribute-many.ts
index 6b0574467a..3ebb773478 100644
--- a/packages/icons-workflow/test/benchmark/test-attribute-many.ts
+++ b/packages/icons-workflow/test/benchmark/test-attribute-many.ts
@@ -10,50 +10,50 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons/sp-icons-medium.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-const iconset = document.createElement('sp-icons-medium');
+const iconset = document.createElement("sp-icons-medium");
 
 document.body.append(iconset);
 
 measureFixtureCreation(html`
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
 `);
diff --git a/packages/icons-workflow/test/benchmark/test-attribute.ts b/packages/icons-workflow/test/benchmark/test-attribute.ts
index e42db82ea2..05e82f5027 100644
--- a/packages/icons-workflow/test/benchmark/test-attribute.ts
+++ b/packages/icons-workflow/test/benchmark/test-attribute.ts
@@ -10,50 +10,50 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons/sp-icons-medium.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-const iconset = document.createElement('sp-icons-medium');
+const iconset = document.createElement("sp-icons-medium");
 
 document.body.append(iconset);
 
 measureFixtureCreation(html`
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
 `);
diff --git a/packages/icons-workflow/test/benchmark/test-injected-many.ts b/packages/icons-workflow/test/benchmark/test-injected-many.ts
index a5c7ba820b..100788d23e 100644
--- a/packages/icons-workflow/test/benchmark/test-injected-many.ts
+++ b/packages/icons-workflow/test/benchmark/test-injected-many.ts
@@ -10,84 +10,84 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icon/sp-icon.js';
-import { AbcIcon } from '@spectrum-web-components/icons-workflow/src/icons/ABC.js';
-import { ActionsIcon } from '@spectrum-web-components/icons-workflow/src/icons/Actions.js';
-import { DisplayAdvertIcon } from '@spectrum-web-components/icons-workflow/src/icons/DisplayAdvert.js';
-import { PrintAdvertIcon } from '@spectrum-web-components/icons-workflow/src/icons/PrintAdvert.js';
-import { AddIcon } from '@spectrum-web-components/icons-workflow/src/icons/Add.js';
-import { AddCircleIcon } from '@spectrum-web-components/icons-workflow/src/icons/AddCircle.js';
-import { AddToIcon } from '@spectrum-web-components/icons-workflow/src/icons/AddTo.js';
-import { AddToSelectionIcon } from '@spectrum-web-components/icons-workflow/src/icons/AddToSelection.js';
-import { AEMScreensIcon } from '@spectrum-web-components/icons-workflow/src/icons/AEMScreens.js';
-import { AirplaneIcon } from '@spectrum-web-components/icons-workflow/src/icons/Airplane.js';
-import { AlertIcon } from '@spectrum-web-components/icons-workflow/src/icons/Alert.js';
-import { AlertAddIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertAdd.js';
-import { AlertCheckIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertCheck.js';
-import { AlertCircleIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertCircle.js';
-import { AlertCircleFilledIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlertCircleFilled.js';
-import { AlgorithmIcon } from '@spectrum-web-components/icons-workflow/src/icons/Algorithm.js';
-import { AliasIcon } from '@spectrum-web-components/icons-workflow/src/icons/Alias.js';
-import { ArrowLeftIcon } from '@spectrum-web-components/icons-workflow/src/icons/ArrowLeft.js';
-import { AlignCenterIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignCenter.js';
-import { AlignTopIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignTop.js';
-import { AlignBottomIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignBottom.js';
-import { AlignLeftIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignLeft.js';
-import { AlignRightIcon } from '@spectrum-web-components/icons-workflow/src/icons/AlignRight.js';
-import { AnnotateIcon } from '@spectrum-web-components/icons-workflow/src/icons/Annotate.js';
-import { AnnotatePenIcon } from '@spectrum-web-components/icons-workflow/src/icons/AnnotatePen.js';
-import { AssetIcon } from '@spectrum-web-components/icons-workflow/src/icons/Asset.js';
-import { AssetsAddedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsAdded.js';
-import { AssetsDownloadedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsDownloaded.js';
-import { AssetsExpiredIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsExpired.js';
-import { AssetsLinkedPublishedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsLinkedPublished.js';
-import { AssetsModifiedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsModified.js';
-import { AssetsPublishedIcon } from '@spectrum-web-components/icons-workflow/src/icons/AssetsPublished.js';
-import { BookIcon } from '@spectrum-web-components/icons-workflow/src/icons/Book.js';
-import { BookmarkIcon } from '@spectrum-web-components/icons-workflow/src/icons/Bookmark.js';
-import { BookmarkSingleIcon } from '@spectrum-web-components/icons-workflow/src/icons/BookmarkSingle.js';
-import { BookmarkSingleOutlineIcon } from '@spectrum-web-components/icons-workflow/src/icons/BookmarkSingleOutline.js';
-import { setCustomTemplateLiteralTag } from '@spectrum-web-components/icons-workflow/src/custom-tag.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import { AbcIcon } from "@spectrum-web-components/icons-workflow/src/icons/ABC.js";
+import { ActionsIcon } from "@spectrum-web-components/icons-workflow/src/icons/Actions.js";
+import { DisplayAdvertIcon } from "@spectrum-web-components/icons-workflow/src/icons/DisplayAdvert.js";
+import { PrintAdvertIcon } from "@spectrum-web-components/icons-workflow/src/icons/PrintAdvert.js";
+import { AddIcon } from "@spectrum-web-components/icons-workflow/src/icons/Add.js";
+import { AddCircleIcon } from "@spectrum-web-components/icons-workflow/src/icons/AddCircle.js";
+import { AddToIcon } from "@spectrum-web-components/icons-workflow/src/icons/AddTo.js";
+import { AddToSelectionIcon } from "@spectrum-web-components/icons-workflow/src/icons/AddToSelection.js";
+import { AEMScreensIcon } from "@spectrum-web-components/icons-workflow/src/icons/AEMScreens.js";
+import { AirplaneIcon } from "@spectrum-web-components/icons-workflow/src/icons/Airplane.js";
+import { AlertIcon } from "@spectrum-web-components/icons-workflow/src/icons/Alert.js";
+import { AlertAddIcon } from "@spectrum-web-components/icons-workflow/src/icons/AlertAdd.js";
+import { AlertCheckIcon } from "@spectrum-web-components/icons-workflow/src/icons/AlertCheck.js";
+import { AlertCircleIcon } from "@spectrum-web-components/icons-workflow/src/icons/AlertCircle.js";
+import { AlertCircleFilledIcon } from "@spectrum-web-components/icons-workflow/src/icons/AlertCircleFilled.js";
+import { AlgorithmIcon } from "@spectrum-web-components/icons-workflow/src/icons/Algorithm.js";
+import { AliasIcon } from "@spectrum-web-components/icons-workflow/src/icons/Alias.js";
+import { ArrowLeftIcon } from "@spectrum-web-components/icons-workflow/src/icons/ArrowLeft.js";
+import { AlignCenterIcon } from "@spectrum-web-components/icons-workflow/src/icons/AlignCenter.js";
+import { AlignTopIcon } from "@spectrum-web-components/icons-workflow/src/icons/AlignTop.js";
+import { AlignBottomIcon } from "@spectrum-web-components/icons-workflow/src/icons/AlignBottom.js";
+import { AlignLeftIcon } from "@spectrum-web-components/icons-workflow/src/icons/AlignLeft.js";
+import { AlignRightIcon } from "@spectrum-web-components/icons-workflow/src/icons/AlignRight.js";
+import { AnnotateIcon } from "@spectrum-web-components/icons-workflow/src/icons/Annotate.js";
+import { AnnotatePenIcon } from "@spectrum-web-components/icons-workflow/src/icons/AnnotatePen.js";
+import { AssetIcon } from "@spectrum-web-components/icons-workflow/src/icons/Asset.js";
+import { AssetsAddedIcon } from "@spectrum-web-components/icons-workflow/src/icons/AssetsAdded.js";
+import { AssetsDownloadedIcon } from "@spectrum-web-components/icons-workflow/src/icons/AssetsDownloaded.js";
+import { AssetsExpiredIcon } from "@spectrum-web-components/icons-workflow/src/icons/AssetsExpired.js";
+import { AssetsLinkedPublishedIcon } from "@spectrum-web-components/icons-workflow/src/icons/AssetsLinkedPublished.js";
+import { AssetsModifiedIcon } from "@spectrum-web-components/icons-workflow/src/icons/AssetsModified.js";
+import { AssetsPublishedIcon } from "@spectrum-web-components/icons-workflow/src/icons/AssetsPublished.js";
+import { BookIcon } from "@spectrum-web-components/icons-workflow/src/icons/Book.js";
+import { BookmarkIcon } from "@spectrum-web-components/icons-workflow/src/icons/Bookmark.js";
+import { BookmarkSingleIcon } from "@spectrum-web-components/icons-workflow/src/icons/BookmarkSingle.js";
+import { BookmarkSingleOutlineIcon } from "@spectrum-web-components/icons-workflow/src/icons/BookmarkSingleOutline.js";
+import { setCustomTemplateLiteralTag } from "@spectrum-web-components/icons-workflow/src/custom-tag.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 setCustomTemplateLiteralTag(html);
 
 measureFixtureCreation(html`
-    ${AbcIcon({ hidden: true })}
-    ${ActionsIcon({ hidden: true })}
-    ${DisplayAdvertIcon({ hidden: true })}
-    ${PrintAdvertIcon({ hidden: true })}
-    ${AddIcon({ hidden: true })}
-    ${AddCircleIcon({ hidden: true })}
-    ${AddToIcon({ hidden: true })}
-    ${AddToSelectionIcon({ hidden: true })}
-    ${AEMScreensIcon({ hidden: true })}
-    ${AirplaneIcon({ hidden: true })}
-    ${AlertIcon({ hidden: true })}
-    ${AlertAddIcon({ hidden: true })}
-    ${AlertCheckIcon({ hidden: true })}
-    ${AlertCircleIcon({ hidden: true })}
-    ${AlertCircleFilledIcon({ hidden: true })}
-    ${AlgorithmIcon({ hidden: true })}
-    ${AliasIcon({ hidden: true })}
-    ${ArrowLeftIcon({ hidden: true })}
-    ${AlignCenterIcon({ hidden: true })}
-    ${AlignTopIcon({ hidden: true })}
-    ${AlignBottomIcon({ hidden: true })}
-    ${AlignLeftIcon({ hidden: true })}
-    ${AlignRightIcon({ hidden: true })}
-    ${AnnotateIcon({ hidden: true })}
-    ${AnnotatePenIcon({ hidden: true })}
-    ${AssetIcon({ hidden: true })}
-    ${AssetsAddedIcon({ hidden: true })}
-    ${AssetsDownloadedIcon({ hidden: true })}
-    ${AssetsExpiredIcon({ hidden: true })}
-    ${AssetsLinkedPublishedIcon({ hidden: true })}
-    ${AssetsModifiedIcon({ hidden: true })}
-    ${AssetsPublishedIcon({ hidden: true })}
-    ${BookIcon({ hidden: true })}
-    ${BookmarkIcon({ hidden: true })}
-    ${BookmarkSingleIcon({ hidden: true })}
-    ${BookmarkSingleOutlineIcon({ hidden: true })}
+  ${AbcIcon({ hidden: true })}
+  ${ActionsIcon({ hidden: true })}
+  ${DisplayAdvertIcon({ hidden: true })}
+  ${PrintAdvertIcon({ hidden: true })}
+  ${AddIcon({ hidden: true })}
+  ${AddCircleIcon({ hidden: true })}
+  ${AddToIcon({ hidden: true })}
+  ${AddToSelectionIcon({ hidden: true })}
+  ${AEMScreensIcon({ hidden: true })}
+  ${AirplaneIcon({ hidden: true })}
+  ${AlertIcon({ hidden: true })}
+  ${AlertAddIcon({ hidden: true })}
+  ${AlertCheckIcon({ hidden: true })}
+  ${AlertCircleIcon({ hidden: true })}
+  ${AlertCircleFilledIcon({ hidden: true })}
+  ${AlgorithmIcon({ hidden: true })}
+  ${AliasIcon({ hidden: true })}
+  ${ArrowLeftIcon({ hidden: true })}
+  ${AlignCenterIcon({ hidden: true })}
+  ${AlignTopIcon({ hidden: true })}
+  ${AlignBottomIcon({ hidden: true })}
+  ${AlignLeftIcon({ hidden: true })}
+  ${AlignRightIcon({ hidden: true })}
+  ${AnnotateIcon({ hidden: true })}
+  ${AnnotatePenIcon({ hidden: true })}
+  ${AssetIcon({ hidden: true })}
+  ${AssetsAddedIcon({ hidden: true })}
+  ${AssetsDownloadedIcon({ hidden: true })}
+  ${AssetsExpiredIcon({ hidden: true })}
+  ${AssetsLinkedPublishedIcon({ hidden: true })}
+  ${AssetsModifiedIcon({ hidden: true })}
+  ${AssetsPublishedIcon({ hidden: true })}
+  ${BookIcon({ hidden: true })}
+  ${BookmarkIcon({ hidden: true })}
+  ${BookmarkSingleIcon({ hidden: true })}
+  ${BookmarkSingleOutlineIcon({ hidden: true })}
 `);
diff --git a/packages/icons-workflow/test/benchmark/test-injected.ts b/packages/icons-workflow/test/benchmark/test-injected.ts
index 2f33b1b3bd..babded7903 100644
--- a/packages/icons-workflow/test/benchmark/test-injected.ts
+++ b/packages/icons-workflow/test/benchmark/test-injected.ts
@@ -10,49 +10,49 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icon/sp-icon.js';
-import { CheckmarkIcon } from '@spectrum-web-components/icons-workflow/src/icons/Checkmark.js';
-import { setCustomTemplateLiteralTag } from '@spectrum-web-components/icons-workflow/src/custom-tag.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icon/sp-icon.js";
+import { CheckmarkIcon } from "@spectrum-web-components/icons-workflow/src/icons/Checkmark.js";
+import { setCustomTemplateLiteralTag } from "@spectrum-web-components/icons-workflow/src/custom-tag.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 setCustomTemplateLiteralTag(html);
 
 measureFixtureCreation(html`
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
-    ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
+  ${CheckmarkIcon({ hidden: true })}
 `);
diff --git a/packages/icons-workflow/test/benchmark/test-registered-many.ts b/packages/icons-workflow/test/benchmark/test-registered-many.ts
index 775397bacd..8476907c5e 100644
--- a/packages/icons-workflow/test/benchmark/test-registered-many.ts
+++ b/packages/icons-workflow/test/benchmark/test-registered-many.ts
@@ -10,80 +10,80 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-abc.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-actions.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-display-advert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-print-advert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-add-circle.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-add-to.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-add-to-selection.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-aemscreens.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-airplane.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-add.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-check.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-circle.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert-circle-filled.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-algorithm.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alias.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-arrow-left.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-center.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-top.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-bottom.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-left.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-align-right.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-annotate.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-annotate-pen.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-asset.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-added.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-downloaded.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-expired.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-linked-published.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-modified.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-assets-published.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-book.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-bookmark.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-bookmark-single.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-bookmark-single-outline.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-abc.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-actions.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-display-advert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-print-advert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-add.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-add-circle.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-add-to.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-add-to-selection.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-aemscreens.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-airplane.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert-add.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert-check.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert-circle.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert-circle-filled.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-algorithm.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alias.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-arrow-left.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-align-center.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-align-top.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-align-bottom.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-align-left.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-align-right.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-annotate.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-annotate-pen.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-asset.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-assets-added.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-assets-downloaded.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-assets-expired.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-assets-linked-published.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-assets-modified.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-assets-published.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-book.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-bookmark.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-bookmark-single.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-bookmark-single-outline.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
 `);
diff --git a/packages/icons-workflow/test/benchmark/test-registered.ts b/packages/icons-workflow/test/benchmark/test-registered.ts
index 0aa1f09b2f..98ae8d7c0a 100644
--- a/packages/icons-workflow/test/benchmark/test-registered.ts
+++ b/packages/icons-workflow/test/benchmark/test-registered.ts
@@ -10,45 +10,45 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
 `);
diff --git a/packages/icons/sp-icons-large.ts b/packages/icons/sp-icons-large.ts
index b1d16f3995..f8c62baf15 100644
--- a/packages/icons/sp-icons-large.ts
+++ b/packages/icons/sp-icons-large.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { IconsLarge } from './src/IconsLarge.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { IconsLarge } from "./src/IconsLarge.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-icons-large', IconsLarge);
+defineElement("sp-icons-large", IconsLarge);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-icons-large': IconsLarge;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-icons-large": IconsLarge;
+  }
 }
diff --git a/packages/icons/sp-icons-medium.ts b/packages/icons/sp-icons-medium.ts
index 5f420e4ad8..999d464a0c 100644
--- a/packages/icons/sp-icons-medium.ts
+++ b/packages/icons/sp-icons-medium.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { IconsMedium } from './src/IconsMedium.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { IconsMedium } from "./src/IconsMedium.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-icons-medium', IconsMedium);
+defineElement("sp-icons-medium", IconsMedium);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-icons-medium': IconsMedium;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-icons-medium": IconsMedium;
+  }
 }
diff --git a/packages/icons/src/IconsLarge.ts b/packages/icons/src/IconsLarge.ts
index b1bbbceca2..ebfb7e6c6a 100644
--- a/packages/icons/src/IconsLarge.ts
+++ b/packages/icons/src/IconsLarge.ts
@@ -10,33 +10,33 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 
-import { IconsetSVG } from '@spectrum-web-components/iconset/src/iconset-svg.js';
+import { IconsetSVG } from "@spectrum-web-components/iconset/src/iconset-svg.js";
 
-import iconsSVG from './icons-large.svg.js';
+import iconsSVG from "./icons-large.svg.js";
 
 /**
  * @element sp-icons-large
  */
 export class IconsLarge extends IconsetSVG {
-    public constructor() {
-        super();
-        this.name = 'ui'; // default iconset name for these icons
-    }
+  public constructor() {
+    super();
+    this.name = "ui"; // default iconset name for these icons
+  }
 
-    protected override renderDefaultContent(): TemplateResult {
-        return iconsSVG;
-    }
-    /**
-     * Overrides createIconName to make icon strings compatible with spectrum-icon id format
-     *
-     * @param icon - The name of the icon to be used in the SVG element
-     */
-    protected override getSVGIconName(icon: string): string {
-        return `spectrum-icon-${icon}`;
-    }
-    protected override getSanitizedIconName(icon: string): string {
-        return icon.replace('spectrum-icon-', '');
-    }
+  protected override renderDefaultContent(): TemplateResult {
+    return iconsSVG;
+  }
+  /**
+   * Overrides createIconName to make icon strings compatible with spectrum-icon id format
+   *
+   * @param icon - The name of the icon to be used in the SVG element
+   */
+  protected override getSVGIconName(icon: string): string {
+    return `spectrum-icon-${icon}`;
+  }
+  protected override getSanitizedIconName(icon: string): string {
+    return icon.replace("spectrum-icon-", "");
+  }
 }
diff --git a/packages/icons/src/IconsMedium.ts b/packages/icons/src/IconsMedium.ts
index bec48b49f1..115e67fe87 100644
--- a/packages/icons/src/IconsMedium.ts
+++ b/packages/icons/src/IconsMedium.ts
@@ -10,33 +10,33 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 
-import { IconsetSVG } from '@spectrum-web-components/iconset/src/iconset-svg.js';
+import { IconsetSVG } from "@spectrum-web-components/iconset/src/iconset-svg.js";
 
-import iconsSVG from './icons-medium.svg.js';
+import iconsSVG from "./icons-medium.svg.js";
 
 /**
  * @element sp-icons-medium
  */
 export class IconsMedium extends IconsetSVG {
-    public constructor() {
-        super();
-        this.name = 'ui'; // default iconset name for these icons
-    }
+  public constructor() {
+    super();
+    this.name = "ui"; // default iconset name for these icons
+  }
 
-    protected override renderDefaultContent(): TemplateResult {
-        return iconsSVG;
-    }
-    /**
-     * Overrides createIconName to make icon strings compatible with spectrum-icon id format
-     *
-     * @param icon - The name of the icon to be used in the SVG element
-     */
-    protected override getSVGIconName(icon: string): string {
-        return `spectrum-icon-${icon}`;
-    }
-    protected override getSanitizedIconName(icon: string): string {
-        return icon.replace('spectrum-icon-', '');
-    }
+  protected override renderDefaultContent(): TemplateResult {
+    return iconsSVG;
+  }
+  /**
+   * Overrides createIconName to make icon strings compatible with spectrum-icon id format
+   *
+   * @param icon - The name of the icon to be used in the SVG element
+   */
+  protected override getSVGIconName(icon: string): string {
+    return `spectrum-icon-${icon}`;
+  }
+  protected override getSanitizedIconName(icon: string): string {
+    return icon.replace("spectrum-icon-", "");
+  }
 }
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index a1dab8a12a..2773502b89 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -9,5 +9,5 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './IconsLarge.js';
-export * from './IconsMedium.js';
+export * from "./IconsLarge.js";
+export * from "./IconsMedium.js";
diff --git a/packages/icons/stories/icons.stories.ts b/packages/icons/stories/icons.stories.ts
index d20f38f70d..ef59b20b49 100644
--- a/packages/icons/stories/icons.stories.ts
+++ b/packages/icons/stories/icons.stories.ts
@@ -9,37 +9,37 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/icons/sp-icons-large.js';
-import '@spectrum-web-components/icons/sp-icons-medium.js';
-import '../../iconset/stories/icons-demo.js';
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import "@spectrum-web-components/icons/sp-icons-large.js";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import "../../iconset/stories/icons-demo.js";
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
 export default {
-    title: 'Icons',
-    argTypes: {
-        color: { control: 'color' },
-    },
-    args: {
-        color: '#000000',
-    },
+  title: "Icons",
+  argTypes: {
+    color: { control: "color" },
+  },
+  args: {
+    color: "#000000",
+  },
 };
 
 interface Properties {
-    color: string;
+  color: string;
 }
 
 export const listMedium = ({ color }: Properties): TemplateResult => html`
-    
-        
-    
+  
+    
+  
 `;
 
-listMedium.storyName = 'UI Icons - Medium';
+listMedium.storyName = "UI Icons - Medium";
 
 export const listLarge = ({ color }: Properties): TemplateResult => html`
-    
-        
-    
+  
+    
+  
 `;
 
-listLarge.storyName = 'UI Icons - Large';
+listLarge.storyName = "UI Icons - Large";
diff --git a/packages/icons/test/benchmark/test-basic.ts b/packages/icons/test/benchmark/test-basic.ts
index 9a3e71dc67..65b822afbf 100644
--- a/packages/icons/test/benchmark/test-basic.ts
+++ b/packages/icons/test/benchmark/test-basic.ts
@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/icons/sp-icons-medium.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/icons/test/icons-memory.test.ts b/packages/icons/test/icons-memory.test.ts
index ae2d831811..7a55c19048 100644
--- a/packages/icons/test/icons-memory.test.ts
+++ b/packages/icons/test/icons-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/icons/sp-icons-medium.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/icons/test/icons.test.ts b/packages/icons/test/icons.test.ts
index 8d16d08537..094d3f62a6 100644
--- a/packages/icons/test/icons.test.ts
+++ b/packages/icons/test/icons.test.ts
@@ -11,38 +11,38 @@ governing permissions and limitations under the License.
 import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 import "@spectrum-web-components/icons/sp-icons-large.js";
 import "@spectrum-web-components/icons/sp-icons-medium.js";
-import { IconsLarge, IconsMedium } from "../";
+import { IconsLarge, IconsMedium } from "../src/index.js";
 import IconsetSVG from "../src/icons-large.svg.js";
 
 describe("icons", () => {
-	it("large", async () => {
-		const el = await fixture(html`
-			
-		`);
+  it("large", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		expect(el).to.not.equal(undefined);
-		expect(el.getIconList().length).to.be.above(0);
-	});
-	it("medium", async () => {
-		const el = await fixture(html`
-			
-		`);
+    expect(el).to.not.equal(undefined);
+    expect(el.getIconList().length).to.be.above(0);
+  });
+  it("medium", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		expect(el).to.not.equal(undefined);
-		expect(el.getIconList().length).to.be.above(0);
-	});
-	it("listens to slotchange events", async () => {
-		const el = await fixture(html`
-			${IconsetSVG}
-		`);
+    expect(el).to.not.equal(undefined);
+    expect(el.getIconList().length).to.be.above(0);
+  });
+  it("listens to slotchange events", async () => {
+    const el = await fixture(html`
+      ${IconsetSVG}
+    `);
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		expect(el).to.not.equal(undefined);
-		expect(el.getIconList().length).to.equal(48);
-	});
+    expect(el).to.not.equal(undefined);
+    expect(el.getIconList().length).to.equal(48);
+  });
 });
diff --git a/packages/iconset/src/iconset-registry.ts b/packages/iconset/src/iconset-registry.ts
index d3d08aaec9..f34321755e 100644
--- a/packages/iconset/src/iconset-registry.ts
+++ b/packages/iconset/src/iconset-registry.ts
@@ -9,67 +9,67 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Iconset } from './iconset.js';
+import { Iconset } from "./iconset.js";
 export interface IconsetAddedDetail {
-    name: string;
-    iconset: Iconset;
+  name: string;
+  iconset: Iconset;
 }
 export interface IconsetRemovedDetail {
-    name: string;
+  name: string;
 }
 
 export class IconsetRegistry {
-    // singleton getter
-    public static getInstance(): IconsetRegistry {
-        if (!IconsetRegistry.instance) {
-            IconsetRegistry.instance = new IconsetRegistry();
-        }
-
-        return IconsetRegistry.instance;
+  // singleton getter
+  public static getInstance(): IconsetRegistry {
+    if (!IconsetRegistry.instance) {
+      IconsetRegistry.instance = new IconsetRegistry();
     }
-    private static instance: IconsetRegistry;
 
-    private iconsetMap = new Map();
+    return IconsetRegistry.instance;
+  }
+  private static instance: IconsetRegistry;
 
-    public addIconset(name: string, iconset: Iconset): void {
-        this.iconsetMap.set(name, iconset);
+  private iconsetMap = new Map();
 
-        // dispatch a sp-iconset-added event on window to let everyone know we have a new iconset
-        // note we're using window here for efficiency since we don't need to bubble through the dom since everyone
-        // will know where to look for this event
-        const event = new CustomEvent('sp-iconset-added', {
-            bubbles: true,
-            composed: true,
-            detail: { name, iconset },
-        });
+  public addIconset(name: string, iconset: Iconset): void {
+    this.iconsetMap.set(name, iconset);
 
-        // we're dispatching this event in the next tick to allow the iconset to finish any slotchange or other event
-        // listeners caused by connection to the dom and first render to complete, this way any icons listening for
-        // this iconset will be able to access the completed iconset
-        setTimeout(() => window.dispatchEvent(event), 0);
-    }
-    public removeIconset(name: string): void {
-        this.iconsetMap.delete(name);
-        // dispatch a sp-iconset-removed event on window to let everyone know we have a new iconset
-        // note we're using window here for efficiency since we don't need to bubble through the dom since everyone
-        // will know where to look for this event
-        const event = new CustomEvent('sp-iconset-removed', {
-            bubbles: true,
-            composed: true,
-            detail: { name },
-        });
+    // dispatch a sp-iconset-added event on window to let everyone know we have a new iconset
+    // note we're using window here for efficiency since we don't need to bubble through the dom since everyone
+    // will know where to look for this event
+    const event = new CustomEvent("sp-iconset-added", {
+      bubbles: true,
+      composed: true,
+      detail: { name, iconset },
+    });
 
-        // we're dispatching this event in the next tick To keep the event model consistent with the added event
-        setTimeout(() => window.dispatchEvent(event), 0);
-    }
-    public getIconset(name: string): Iconset | undefined {
-        return this.iconsetMap.get(name);
-    }
+    // we're dispatching this event in the next tick to allow the iconset to finish any slotchange or other event
+    // listeners caused by connection to the dom and first render to complete, this way any icons listening for
+    // this iconset will be able to access the completed iconset
+    setTimeout(() => window.dispatchEvent(event), 0);
+  }
+  public removeIconset(name: string): void {
+    this.iconsetMap.delete(name);
+    // dispatch a sp-iconset-removed event on window to let everyone know we have a new iconset
+    // note we're using window here for efficiency since we don't need to bubble through the dom since everyone
+    // will know where to look for this event
+    const event = new CustomEvent("sp-iconset-removed", {
+      bubbles: true,
+      composed: true,
+      detail: { name },
+    });
+
+    // we're dispatching this event in the next tick To keep the event model consistent with the added event
+    setTimeout(() => window.dispatchEvent(event), 0);
+  }
+  public getIconset(name: string): Iconset | undefined {
+    return this.iconsetMap.get(name);
+  }
 }
 
 declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-iconset-added': CustomEvent;
-        'sp-iconset-removed': CustomEvent;
-    }
+  interface GlobalEventHandlersEventMap {
+    "sp-iconset-added": CustomEvent;
+    "sp-iconset-removed": CustomEvent;
+  }
 }
diff --git a/packages/iconset/src/iconset-svg.ts b/packages/iconset/src/iconset-svg.ts
index 8c1e5e444f..b392d09ec0 100644
--- a/packages/iconset/src/iconset-svg.ts
+++ b/packages/iconset/src/iconset-svg.ts
@@ -11,151 +11,148 @@ governing permissions and limitations under the License.
 */
 
 import {
-    html,
-    PropertyValues,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { query } from '@spectrum-web-components/base/src/decorators.js';
+  html,
+  PropertyValues,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { query } from "@spectrum-web-components/base/src/decorators.js";
 
-import { Iconset } from './iconset.js';
+import { Iconset } from "./iconset.js";
 
 export abstract class IconsetSVG extends Iconset {
-    private iconMap: Map = new Map();
+  private iconMap: Map = new Map();
 
-    @query('slot')
-    private slotContainer?: HTMLSlotElement;
+  @query("slot")
+  private slotContainer?: HTMLSlotElement;
 
-    /**
-     * First updated handler just ensures we've processed any slotted symbols
-     */
-    public override updated(changedProperties: PropertyValues): void {
-        if (!this.slotContainer) {
-            return;
-        }
-
-        const currentSVGNodes = this.getSVGNodes(this.slotContainer);
-
-        this.updateSVG(currentSVGNodes);
-        super.updated(changedProperties);
-    }
-    /**
-     * Applies the requested icon from this iconset instance to the given element.
-     *
-     * @param el - the HTML element to which the icon will be applied
-     * @param icon - the name of the icon within this set to apply.
-     */
-    public async applyIconToElement(
-        el: HTMLElement,
-        icon: string,
-        _size: string,
-        label: string
-    ): Promise {
-        await this.updateComplete;
-        const iconSymbol = this.iconMap.get(icon);
-
-        if (!iconSymbol) {
-            throw new Error(`Unable to find icon ${icon}`);
-        }
-
-        // we cannot share a single SVG globally across shadowroot boundaries
-        // so copy the template node so we can inject it where we need it
-        const clonedNode = this.prepareSvgClone(iconSymbol);
-
-        clonedNode.setAttribute('role', 'img');
-
-        if (label) {
-            clonedNode.setAttribute('aria-label', label);
-        } else {
-            clonedNode.setAttribute('aria-hidden', 'true');
-        }
-
-        // append the svg to the node either in its shadowroot or directly into its dom
-        if (el.shadowRoot) {
-            el.shadowRoot.appendChild(clonedNode);
-        } else {
-            el.appendChild(clonedNode);
-        }
+  /**
+   * First updated handler just ensures we've processed any slotted symbols
+   */
+  public override updated(changedProperties: PropertyValues): void {
+    if (!this.slotContainer) {
+      return;
     }
 
-    /**
-     * Returns a list of all icons in this iconset.
-     */
-    public getIconList(): string[] {
-        return [...this.iconMap.keys()];
+    const currentSVGNodes = this.getSVGNodes(this.slotContainer);
+
+    this.updateSVG(currentSVGNodes);
+    super.updated(changedProperties);
+  }
+  /**
+   * Applies the requested icon from this iconset instance to the given element.
+   *
+   * @param el - the HTML element to which the icon will be applied
+   * @param icon - the name of the icon within this set to apply.
+   */
+  public async applyIconToElement(
+    el: HTMLElement,
+    icon: string,
+    _size: string,
+    label: string,
+  ): Promise {
+    await this.updateComplete;
+    const iconSymbol = this.iconMap.get(icon);
+
+    if (!iconSymbol) {
+      throw new Error(`Unable to find icon ${icon}`);
     }
 
-    protected prepareSvgClone(sourceSvg: SVGSymbolElement): SVGSVGElement {
-        const content = sourceSvg.cloneNode(true) as SVGSymbolElement;
-        // we're going to create a new svg element that will have our symbol geometry inside
-        const svg = document.createElementNS(
-            'http://www.w3.org/2000/svg',
-            'svg'
-        );
-        const viewBox = content.getAttribute('viewBox') || '';
-        // inline style isn't ideal but will work in all cases and means our icons don't need to know
-        // if they are svg or spritesheet provided
-        const cssText =
-            'pointer-events: none; display: block; width: 100%; height: 100%;';
-
-        svg.style.cssText = cssText;
-        // copy the viewbox and other properties into the svg
-        svg.setAttribute('viewBox', viewBox);
-        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-        svg.setAttribute('focusable', 'false');
-        // move all the child nodes over to the svg
-        while (content.childNodes.length > 0) {
-            svg.appendChild(content.childNodes[0]);
-        }
-
-        return svg;
-    }
-    protected getSVGIconName(icon: string): string {
-        return icon;
-    }
-    protected getSanitizedIconName(icon: string): string {
-        return icon;
-    }
-    protected renderDefaultContent(): TemplateResult {
-        return html``;
-    }
+    // we cannot share a single SVG globally across shadowroot boundaries
+    // so copy the template node so we can inject it where we need it
+    const clonedNode = this.prepareSvgClone(iconSymbol);
 
-    protected override render(): TemplateResult {
-        return html`
-            
-                ${this.renderDefaultContent()}
-            
-        `;
-    }
+    clonedNode.setAttribute("role", "img");
 
-    protected updateSVG(nodes: SVGElement[]): void {
-        // iterate over the nodes that were passed in, and find all the top level symbols
-        const symbols = nodes.reduce((prev, svgNode) => {
-            const containedSymbols = svgNode.querySelectorAll('symbol');
-
-            prev.push(...containedSymbols);
-
-            return prev;
-        }, [] as SVGSymbolElement[]);
-
-        symbols.forEach((symbol) => {
-            this.iconMap.set(this.getSanitizedIconName(symbol.id), symbol);
-        });
+    if (label) {
+      clonedNode.setAttribute("aria-label", label);
+    } else {
+      clonedNode.setAttribute("aria-hidden", "true");
     }
 
-    protected getSVGNodes(slotTarget: HTMLSlotElement): SVGElement[] {
-        const nodes = slotTarget.assignedNodes({ flatten: true });
-        // find all the svg nodes
-        const svgNodes = nodes.filter((node) => {
-            return node.nodeName === 'svg';
-        }) as SVGElement[];
-
-        return svgNodes;
+    // append the svg to the node either in its shadowroot or directly into its dom
+    if (el.shadowRoot) {
+      el.shadowRoot.appendChild(clonedNode);
+    } else {
+      el.appendChild(clonedNode);
     }
-
-    private onSlotChange(event: Event): void {
-        const slotTarget = event.target as HTMLSlotElement;
-        const svgNodes = this.getSVGNodes(slotTarget);
-
-        this.updateSVG(svgNodes);
+  }
+
+  /**
+   * Returns a list of all icons in this iconset.
+   */
+  public getIconList(): string[] {
+    return [...this.iconMap.keys()];
+  }
+
+  protected prepareSvgClone(sourceSvg: SVGSymbolElement): SVGSVGElement {
+    const content = sourceSvg.cloneNode(true) as SVGSymbolElement;
+    // we're going to create a new svg element that will have our symbol geometry inside
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const viewBox = content.getAttribute("viewBox") || "";
+    // inline style isn't ideal but will work in all cases and means our icons don't need to know
+    // if they are svg or spritesheet provided
+    const cssText =
+      "pointer-events: none; display: block; width: 100%; height: 100%;";
+
+    svg.style.cssText = cssText;
+    // copy the viewbox and other properties into the svg
+    svg.setAttribute("viewBox", viewBox);
+    svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    svg.setAttribute("focusable", "false");
+    // move all the child nodes over to the svg
+    while (content.childNodes.length > 0) {
+      svg.appendChild(content.childNodes[0]);
     }
+
+    return svg;
+  }
+  protected getSVGIconName(icon: string): string {
+    return icon;
+  }
+  protected getSanitizedIconName(icon: string): string {
+    return icon;
+  }
+  protected renderDefaultContent(): TemplateResult {
+    return html``;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      
+        ${this.renderDefaultContent()}
+      
+    `;
+  }
+
+  protected updateSVG(nodes: SVGElement[]): void {
+    // iterate over the nodes that were passed in, and find all the top level symbols
+    const symbols = nodes.reduce((prev, svgNode) => {
+      const containedSymbols = svgNode.querySelectorAll("symbol");
+
+      prev.push(...containedSymbols);
+
+      return prev;
+    }, [] as SVGSymbolElement[]);
+
+    symbols.forEach((symbol) => {
+      this.iconMap.set(this.getSanitizedIconName(symbol.id), symbol);
+    });
+  }
+
+  protected getSVGNodes(slotTarget: HTMLSlotElement): SVGElement[] {
+    const nodes = slotTarget.assignedNodes({ flatten: true });
+    // find all the svg nodes
+    const svgNodes = nodes.filter((node) => {
+      return node.nodeName === "svg";
+    }) as SVGElement[];
+
+    return svgNodes;
+  }
+
+  private onSlotChange(event: Event): void {
+    const slotTarget = event.target as HTMLSlotElement;
+    const svgNodes = this.getSVGNodes(slotTarget);
+
+    this.updateSVG(svgNodes);
+  }
 }
diff --git a/packages/iconset/src/iconset.ts b/packages/iconset/src/iconset.ts
index 0c8ab00eb5..b417dc2acb 100644
--- a/packages/iconset/src/iconset.ts
+++ b/packages/iconset/src/iconset.ts
@@ -9,114 +9,110 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { IconsetRegistry } from './iconset-registry.js';
+import { IconsetRegistry } from "./iconset-registry.js";
 
-import { LitElement } from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+import { LitElement } from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
 
 export abstract class Iconset extends LitElement {
-    protected registered = false;
-
-    private _name!: string;
-
-    protected override firstUpdated(): void {
-        // force no display for all iconsets
-        this.style.display = 'none';
-
-        if (window.__swc.DEBUG) {
-            window.__swc.warn(
-                this,
-                'Iconsets have been deprecated and will be removed from the project in an upcoming version. For default Spectrum Icons, learn more about leveraging UI Icons (https://opensource.adobe.com/spectrum-web-components/components/icons-ui/) or Workflow Icons (https://opensource.adobe.com/spectrum-web-components/components/icons-workflow/) as an alternative.',
-                'https://opensource.adobe.com/spectrum-web-components/components/iconset/#deprecated',
-                { level: 'deprecation' }
-            );
-        }
-    }
+  protected registered = false;
+
+  private _name!: string;
+
+  protected override firstUpdated(): void {
+    // force no display for all iconsets
+    this.style.display = "none";
 
-    /**
-     * Name of the iconset, used by the IconsetRegistry to serve this icon set
-     * to consuming icons.
-     */
-    @property()
-    public set name(value: string) {
-        // if we're already registered in the iconset registry
-        // we'll need to update our registration
-        if (this.registered) {
-            if (this._name) {
-                // remove from the iconset map using the old name
-                IconsetRegistry.getInstance().removeIconset(this._name);
-            }
-
-            if (value) {
-                // set in the map using the new name
-                IconsetRegistry.getInstance().addIconset(value, this);
-            }
-        }
-
-        this._name = value;
+    if (window.__swc.DEBUG) {
+      window.__swc.warn(
+        this,
+        "Iconsets have been deprecated and will be removed from the project in an upcoming version. For default Spectrum Icons, learn more about leveraging UI Icons (https://opensource.adobe.com/spectrum-web-components/components/icons-ui/) or Workflow Icons (https://opensource.adobe.com/spectrum-web-components/components/icons-workflow/) as an alternative.",
+        "https://opensource.adobe.com/spectrum-web-components/components/iconset/#deprecated",
+        { level: "deprecation" },
+      );
     }
-    public get name(): string {
-        return this._name;
+  }
+
+  /**
+   * Name of the iconset, used by the IconsetRegistry to serve this icon set
+   * to consuming icons.
+   */
+  @property()
+  public set name(value: string) {
+    // if we're already registered in the iconset registry
+    // we'll need to update our registration
+    if (this.registered) {
+      if (this._name) {
+        // remove from the iconset map using the old name
+        IconsetRegistry.getInstance().removeIconset(this._name);
+      }
+
+      if (value) {
+        // set in the map using the new name
+        IconsetRegistry.getInstance().addIconset(value, this);
+      }
     }
 
-    /**
-     * Applies an icon to the given element
-     */
-    public abstract applyIconToElement(
-        el: HTMLElement,
-        icon: string,
-        size: string,
-        label: string
-    ): void;
-
-    /**
-     * Returns a list of all icons in this iconset.
-     */
-    public abstract getIconList(): string[];
-
-    private handleRemoved = ({
-        detail,
-    }: {
-        detail: { name: string };
-    }): void => {
-        if (detail.name === this.name) {
-            this.registered = false;
-            this.addIconset();
-        }
-    };
-
-    /**
-     * On updated we register the iconset if we're not already registered
-     */
-    public override connectedCallback(): void {
-        super.connectedCallback();
-        this.addIconset();
-        window.addEventListener('sp-iconset-removed', this.handleRemoved);
+    this._name = value;
+  }
+  public get name(): string {
+    return this._name;
+  }
+
+  /**
+   * Applies an icon to the given element
+   */
+  public abstract applyIconToElement(
+    el: HTMLElement,
+    icon: string,
+    size: string,
+    label: string,
+  ): void;
+
+  /**
+   * Returns a list of all icons in this iconset.
+   */
+  public abstract getIconList(): string[];
+
+  private handleRemoved = ({ detail }: { detail: { name: string } }): void => {
+    if (detail.name === this.name) {
+      this.registered = false;
+      this.addIconset();
     }
-    /**
-     * On disconnected we remove the iconset
-     */
-    public override disconnectedCallback(): void {
-        super.disconnectedCallback();
-        window.removeEventListener('sp-iconset-removed', this.handleRemoved);
-        this.removeIconset();
+  };
+
+  /**
+   * On updated we register the iconset if we're not already registered
+   */
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.addIconset();
+    window.addEventListener("sp-iconset-removed", this.handleRemoved);
+  }
+  /**
+   * On disconnected we remove the iconset
+   */
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener("sp-iconset-removed", this.handleRemoved);
+    this.removeIconset();
+  }
+
+  private addIconset(): void {
+    if (!this.name || this.registered) {
+      return;
     }
 
-    private addIconset(): void {
-        if (!this.name || this.registered) {
-            return;
-        }
+    IconsetRegistry.getInstance().addIconset(this.name, this);
+    this.registered = true;
+  }
 
-        IconsetRegistry.getInstance().addIconset(this.name, this);
-        this.registered = true;
+  private removeIconset(): void {
+    if (!this.name) {
+      return;
     }
 
-    private removeIconset(): void {
-        if (!this.name) {
-            return;
-        }
-
-        IconsetRegistry.getInstance().removeIconset(this.name);
-        this.registered = false;
-    }
+    IconsetRegistry.getInstance().removeIconset(this.name);
+    this.registered = false;
+  }
 }
diff --git a/packages/iconset/src/index.ts b/packages/iconset/src/index.ts
index 669a736626..62b237c2e1 100644
--- a/packages/iconset/src/index.ts
+++ b/packages/iconset/src/index.ts
@@ -8,6 +8,6 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './iconset.js';
-export * from './iconset-svg.js';
-export * from './iconset-registry.js';
+export * from "./iconset.js";
+export * from "./iconset-svg.js";
+export * from "./iconset-registry.js";
diff --git a/packages/iconset/stories/icons-demo.ts b/packages/iconset/stories/icons-demo.ts
index 79adbb853a..d50aa08bab 100644
--- a/packages/iconset/stories/icons-demo.ts
+++ b/packages/iconset/stories/icons-demo.ts
@@ -9,318 +9,312 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { IconsetAddedDetail } from '@spectrum-web-components/iconset';
+import { IconsetAddedDetail } from "@spectrum-web-components/iconset";
 import {
-    css,
-    CSSResultGroup,
-    html,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  css,
+  CSSResultGroup,
+  html,
+  PropertyValues,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    customElement,
-    property,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { Search } from '@spectrum-web-components/search';
-import '@spectrum-web-components/search/sp-search.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import bodyStyles from '@spectrum-web-components/styles/body.js';
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/help-text/sp-help-text.js';
-
-import iconsList from './iconsList.json' assert { type: 'json' };
+  customElement,
+  property,
+  state,
+} from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { Search } from "@spectrum-web-components/search";
+import "@spectrum-web-components/search/sp-search.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import bodyStyles from "@spectrum-web-components/styles/body.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/help-text/sp-help-text.js";
+
+import iconsList from "./iconsList.json" assert { type: "json" };
 
 import {
-    SystemResolutionController,
-    systemResolverUpdatedSymbol,
-} from '@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js';
+  SystemResolutionController,
+  systemResolverUpdatedSymbol,
+} from "@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js";
 
-@customElement('delayed-ready')
+@customElement("delayed-ready")
 export class DelayedReady extends SpectrumElement {
-    _delayedReady!: Promise;
-    _resolveDelayedReady!: () => void;
-
-    protected override render(): TemplateResult {
-        return html`
-            
-        `;
+  _delayedReady!: Promise;
+  _resolveDelayedReady!: () => void;
+
+  protected override render(): TemplateResult {
+    return html`  `;
+  }
+
+  protected override firstUpdated(): void {
+    this._delayedReady = new Promise(
+      (res) => (this._resolveDelayedReady = res),
+    );
+  }
+
+  protected override async getUpdateComplete(): Promise {
+    const complete = (await super.getUpdateComplete()) as boolean;
+
+    await this._delayedReady;
+
+    return complete;
+  }
+
+  public handleSlotchange({
+    target,
+  }: Event & { target: HTMLSlotElement }): void {
+    if (target.assignedElements({ flatten: true }).length) {
+      requestAnimationFrame(() => {
+        this._resolveDelayedReady();
+      });
     }
+  }
+}
 
-    protected override firstUpdated(): void {
-        this._delayedReady = new Promise(
-            (res) => (this._resolveDelayedReady = res)
-        );
+@customElement("icons-demo")
+export class IconsDemo extends SpectrumElement {
+  @property()
+  public name = "ui";
+
+  @property()
+  public package = "";
+
+  @property()
+  public size = "m";
+
+  @property()
+  public search = "";
+
+  @property({ attribute: false })
+  public icons: {
+    name: string;
+    story(size: string): TemplateResult;
+    tag: string;
+  }[] = [];
+
+  private filteredIcons: {
+    name: string;
+    story(size: string): TemplateResult;
+    tag: string;
+  }[] = [];
+
+  private unsubscribeSystemContext: (() => void) | null = null;
+
+  @state()
+  public spectrumVersion = 1;
+
+  private iconset: string[] = [];
+  public constructor() {
+    super();
+    this.iconset = [];
+    this.handleIconSetAdded = this.handleIconSetAdded.bind(this);
+  }
+
+  public override async connectedCallback(): Promise {
+    super.connectedCallback();
+    window.addEventListener("sp-iconset-added", this.handleIconSetAdded);
+  }
+  public override disconnectedCallback(): void {
+    window.removeEventListener("sp-iconset-added", this.handleIconSetAdded);
+    super.disconnectedCallback();
+
+    if (this.unsubscribeSystemContext) {
+      this.unsubscribeSystemContext();
+      this.unsubscribeSystemContext = null;
     }
+  }
 
-    protected override async getUpdateComplete(): Promise {
-        const complete = (await super.getUpdateComplete()) as boolean;
+  private filterIconsBySpectrumVersion(): void {
+    const iconVersion = this.spectrumVersion === 2 ? "s2" : "s1";
+    let filteredIcons = this.icons;
 
-        await this._delayedReady;
+    // Filter out icons that are not in the current version for workflow icons
+    if (this.name === "workflow") {
+      filteredIcons = filteredIcons.filter((icon) => {
+        const iconName = icon.name.replace(/\s/g, "").toLowerCase();
 
-        return complete;
+        return iconsList[iconVersion].includes(iconName);
+      });
     }
 
-    public handleSlotchange({
-        target,
-    }: Event & { target: HTMLSlotElement }): void {
-        if (target.assignedElements({ flatten: true }).length) {
-            requestAnimationFrame(() => {
-                this._resolveDelayedReady();
-            });
-        }
-    }
-}
-
-@customElement('icons-demo')
-export class IconsDemo extends SpectrumElement {
-    @property()
-    public name = 'ui';
-
-    @property()
-    public package = '';
+    // Use a Set to remove duplicates that may get added because of the same icon name in both versions
+    const iconSet = new Set();
 
-    @property()
-    public size = 'm';
+    filteredIcons = filteredIcons.filter((icon) => {
+      if (iconSet.has(icon.name)) {
+        return false;
+      }
 
-    @property()
-    public search = '';
+      iconSet.add(icon.name);
 
-    @property({ attribute: false })
-    public icons: {
-        name: string;
-        story(size: string): TemplateResult;
-        tag: string;
-    }[] = [];
+      return true;
+    });
 
-    private filteredIcons: {
-        name: string;
-        story(size: string): TemplateResult;
-        tag: string;
-    }[] = [];
+    this.filteredIcons = filteredIcons;
+  }
 
-    private unsubscribeSystemContext: (() => void) | null = null;
+  private systemResolver = new SystemResolutionController(this);
 
-    @state()
-    public spectrumVersion = 1;
-
-    private iconset: string[] = [];
-    public constructor() {
-        super();
-        this.iconset = [];
-        this.handleIconSetAdded = this.handleIconSetAdded.bind(this);
+  protected override update(changes: PropertyValues): void {
+    if (changes.has(systemResolverUpdatedSymbol)) {
+      this.spectrumVersion =
+        this.systemResolver.system === "spectrum-two" ? 2 : 1;
+      this.filterIconsBySpectrumVersion();
     }
 
-    public override async connectedCallback(): Promise {
-        super.connectedCallback();
-        window.addEventListener('sp-iconset-added', this.handleIconSetAdded);
+    if (changes.has("icons")) {
+      this.filterIconsBySpectrumVersion();
     }
-    public override disconnectedCallback(): void {
-        window.removeEventListener('sp-iconset-added', this.handleIconSetAdded);
-        super.disconnectedCallback();
 
-        if (this.unsubscribeSystemContext) {
-            this.unsubscribeSystemContext();
-            this.unsubscribeSystemContext = null;
+    super.update(changes);
+  }
+
+  public handleIconSetAdded(event: CustomEvent): void {
+    const { iconset } = event.detail;
+
+    this.iconset = iconset.getIconList();
+    this.requestUpdate();
+  }
+  public static override get styles(): CSSResultGroup {
+    return [
+      ...bodyStyles,
+      css`
+        :host {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+          gap: 20px;
+          align-items: flex-start;
         }
-    }
-
-    private filterIconsBySpectrumVersion(): void {
-        const iconVersion = this.spectrumVersion === 2 ? 's2' : 's1';
-        let filteredIcons = this.icons;
-
-        // Filter out icons that are not in the current version for workflow icons
-        if (this.name === 'workflow') {
-            filteredIcons = filteredIcons.filter((icon) => {
-                const iconName = icon.name.replace(/\s/g, '').toLowerCase();
-
-                return iconsList[iconVersion].includes(iconName);
-            });
+        .icon {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          border-radius: var(
+            --spectrum-alias-focus-ring-gap,
+            var(--spectrum-global-dimension-static-size-25)
+          );
         }
-
-        // Use a Set to remove duplicates that may get added because of the same icon name in both versions
-        const iconSet = new Set();
-
-        filteredIcons = filteredIcons.filter((icon) => {
-            if (iconSet.has(icon.name)) {
-                return false;
-            }
-
-            iconSet.add(icon.name);
-
-            return true;
-        });
-
-        this.filteredIcons = filteredIcons;
-    }
-
-    private systemResolver = new SystemResolutionController(this);
-
-    protected override update(changes: PropertyValues): void {
-        if (changes.has(systemResolverUpdatedSymbol)) {
-            this.spectrumVersion =
-                this.systemResolver.system === 'spectrum-two' ? 2 : 1;
-            this.filterIconsBySpectrumVersion();
+        :host([package]) .icon {
+          cursor: pointer;
         }
-
-        if (changes.has('icons')) {
-            this.filterIconsBySpectrumVersion();
+        sp-icon {
+          margin-bottom: 10px;
         }
-
-        super.update(changes);
-    }
-
-    public handleIconSetAdded(event: CustomEvent): void {
-        const { iconset } = event.detail;
-
-        this.iconset = iconset.getIconList();
-        this.requestUpdate();
-    }
-    public static override get styles(): CSSResultGroup {
-        return [
-            ...bodyStyles,
-            css`
-                :host {
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-                    gap: 20px;
-                    align-items: flex-start;
-                }
-                .icon {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    text-align: center;
-                    border-radius: var(
-                        --spectrum-alias-focus-ring-gap,
-                        var(--spectrum-global-dimension-static-size-25)
-                    );
-                }
-                :host([package]) .icon {
-                    cursor: pointer;
-                }
-                sp-icon {
-                    margin-bottom: 10px;
-                }
-                .search {
-                    grid-column-start: 1;
-                    grid-column-end: -1;
-                }
-                .icon[tabindex]:focus {
-                    outline: none;
-                }
-                .icon[tabindex]:focus-visible {
-                    outline: var(--spectrum-alias-focus-ring-size) solid
-                        var(--spectrum-alias-focus-ring-color);
-                    outline-offset: calc(
-                        var(
-                                --spectrum-alias-focus-ring-gap,
-                                var(--spectrum-global-dimension-static-size-25)
-                            ) * 2
-                    );
-                }
-            `,
-        ];
-    }
-    private handleKeydown(event: KeyboardEvent, tag: string): void {
-        const { code } = event;
-
-        if (code !== 'Enter' && code !== 'NumpadEnter' && code !== 'Space') {
-            return;
+        .search {
+          grid-column-start: 1;
+          grid-column-end: -1;
         }
-
-        event.preventDefault();
-        this.shouldCopy(tag);
+        .icon[tabindex]:focus {
+          outline: none;
+        }
+        .icon[tabindex]:focus-visible {
+          outline: var(--spectrum-alias-focus-ring-size) solid
+            var(--spectrum-alias-focus-ring-color);
+          outline-offset: calc(
+            var(
+                --spectrum-alias-focus-ring-gap,
+                var(--spectrum-global-dimension-static-size-25)
+              ) *
+              2
+          );
+        }
+      `,
+    ];
+  }
+  private handleKeydown(event: KeyboardEvent, tag: string): void {
+    const { code } = event;
+
+    if (code !== "Enter" && code !== "NumpadEnter" && code !== "Space") {
+      return;
     }
 
-    private shouldCopy(tag: string): void {
-        if (!this.package) return;
-
-        const conditionedTag = tag.slice(1, tag.length - 1);
-        const importURL = `import '@spectrum-web-components/${this.package}/icons/${conditionedTag}.js';`;
-
-        this.dispatchEvent(
-            new CustomEvent('copy-text', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    message: 'Import statement copied to clipboard!',
-                    text: importURL,
-                },
-            })
-        );
-    }
-    private updateSearch(event: Event & { target: Search }): void {
-        event.stopPropagation();
-        this.search = event.target.value;
-    }
-    private submit(event: Event & { target: Search }): void {
-        event.stopPropagation();
-        this.updateSearch(event);
-    }
-    private renderSearch(): TemplateResult {
-        const matchingIcons = this.search
-            ? this.filteredIcons.filter((icon) =>
-                  icon.name.toLowerCase().includes(this.search.toLowerCase())
-              )
-            : this.filteredIcons;
+    event.preventDefault();
+    this.shouldCopy(tag);
+  }
 
-        return html`
-            

-                Spectrum icons:
-                
-                    
-                        Showing ${matchingIcons.length} of
-                        ${this.filteredIcons.length} available icons.
-                    
-                
-            

-            ${matchingIcons.map((icon) => {
-                return html`
-                     this.shouldCopy(icon.tag)}
-                        @keydown=${(event: KeyboardEvent) =>
-                            this.handleKeydown(event, icon.tag)}
-                        tabindex=${ifDefined(this.package ? '0' : undefined)}
-                    >
-                        ${icon.story(this.size)} ${icon.tag}
-                    
-                `;
-            })}
-        `;
+  private shouldCopy(tag: string): void {
+    if (!this.package) {
+      return;
     }
-    protected override render(): TemplateResult {
+
+    const conditionedTag = tag.slice(1, tag.length - 1);
+    const importURL = `import '@spectrum-web-components/${this.package}/icons/${conditionedTag}.js';`;
+
+    this.dispatchEvent(
+      new CustomEvent("copy-text", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          message: "Import statement copied to clipboard!",
+          text: importURL,
+        },
+      }),
+    );
+  }
+  private updateSearch(event: Event & { target: Search }): void {
+    event.stopPropagation();
+    this.search = event.target.value;
+  }
+  private submit(event: Event & { target: Search }): void {
+    event.stopPropagation();
+    this.updateSearch(event);
+  }
+  private renderSearch(): TemplateResult {
+    const matchingIcons = this.search
+      ? this.filteredIcons.filter((icon) =>
+          icon.name.toLowerCase().includes(this.search.toLowerCase()),
+        )
+      : this.filteredIcons;
+
+    return html`
+      

+        Spectrum icons:
+        
+          
+            Showing ${matchingIcons.length} of ${this.filteredIcons.length}
+            available icons.
+          
+        
+      

+      ${matchingIcons.map((icon) => {
         return html`
-            ${this.filteredIcons.length
-                ? this.renderSearch()
-                : html`
-                      
-                  `}
-            ${this.iconset.map(
-                (icon) => html`
-                    
-                        
-                        ${icon}
-                    
-                `
-            )}
+           this.shouldCopy(icon.tag)}
+            @keydown=${(event: KeyboardEvent) =>
+              this.handleKeydown(event, icon.tag)}
+            tabindex=${ifDefined(this.package ? "0" : undefined)}
+          >
+            ${icon.story(this.size)} ${icon.tag}
+          
         `;
-    }
+      })}
+    `;
+  }
+  protected override render(): TemplateResult {
+    return html`
+      ${this.filteredIcons.length ? this.renderSearch() : html`  `}
+      ${this.iconset.map(
+        (icon) => html`
+          
+            
+            ${icon}
+          
+        `,
+      )}
+    `;
+  }
 }
diff --git a/packages/iconset/test/iconset.test.ts b/packages/iconset/test/iconset.test.ts
index b8b63ca4f1..6195649c46 100644
--- a/packages/iconset/test/iconset.test.ts
+++ b/packages/iconset/test/iconset.test.ts
@@ -10,148 +10,146 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { waitForPredicate } from '../../../test/testing-helpers.js';
-import '@spectrum-web-components/icons/sp-icons-medium.js';
-import '@spectrum-web-components/icon/sp-icon.js';
-import { IconsMedium } from '@spectrum-web-components/icons';
-import { Icon } from '@spectrum-web-components/icon';
-import { IconsetRegistry } from '@spectrum-web-components/iconset/src/iconset-registry.js';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import { stub } from 'sinon';
-
-describe('Iconset', () => {
-    after(() => {
-        const sets = [...document.querySelectorAll('sp-icons-medium')];
-
-        sets.map((set) => set.remove());
-    });
-    it('warns in Dev Mode of deprecation', async () => {
-        const consoleWarnStub = stub(console, 'warn');
-        const el = document.createElement('sp-icons-medium');
-
-        document.body.append(el);
-
-        await elementUpdated(el);
-
-        expect(consoleWarnStub.called).to.be.true;
-        const spyCall = consoleWarnStub.getCall(0);
-
-        expect(
-            spyCall.args.at(0).includes('deprecated'),
-            'confirm deprecation message'
-        ).to.be.true;
-        expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-            data: {
-                localName: 'sp-icons-medium',
-                type: 'api',
-                level: 'deprecation',
-            },
-        });
-        consoleWarnStub.restore();
+import { waitForPredicate } from "../../../test/testing-helpers.js";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import { IconsMedium } from "@spectrum-web-components/icons";
+import { Icon } from "@spectrum-web-components/icon";
+import { IconsetRegistry } from "@spectrum-web-components/iconset/src/iconset-registry.js";
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import { stub } from "sinon";
+
+describe("Iconset", () => {
+  after(() => {
+    const sets = [...document.querySelectorAll("sp-icons-medium")];
+
+    sets.map((set) => set.remove());
+  });
+  it("warns in Dev Mode of deprecation", async () => {
+    const consoleWarnStub = stub(console, "warn");
+    const el = document.createElement("sp-icons-medium");
+
+    document.body.append(el);
+
+    await elementUpdated(el);
+
+    expect(consoleWarnStub.called).to.be.true;
+    const spyCall = consoleWarnStub.getCall(0);
+
+    expect(
+      spyCall.args.at(0).includes("deprecated"),
+      "confirm deprecation message",
+    ).to.be.true;
+    expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+      data: {
+        localName: "sp-icons-medium",
+        type: "api",
+        level: "deprecation",
+      },
     });
+    consoleWarnStub.restore();
+  });
 
-    it('will re-register with new name', async () => {
-        const icons = document.createElement('sp-icons-medium');
+  it("will re-register with new name", async () => {
+    const icons = document.createElement("sp-icons-medium");
 
-        document.body.append(icons);
-        icons.name = 'first-name';
+    document.body.append(icons);
+    icons.name = "first-name";
 
-        const registry = IconsetRegistry.getInstance();
+    const registry = IconsetRegistry.getInstance();
 
-        expect(registry.getIconset('first-name')).to.not.be.undefined;
-        expect(registry.getIconset('')).to.be.undefined;
-        expect(registry.getIconset('second-name')).to.be.undefined;
-        expect(registry.getIconset('ui')).to.be.undefined;
+    expect(registry.getIconset("first-name")).to.not.be.undefined;
+    expect(registry.getIconset("")).to.be.undefined;
+    expect(registry.getIconset("second-name")).to.be.undefined;
+    expect(registry.getIconset("ui")).to.be.undefined;
 
-        icons.name = '';
+    icons.name = "";
 
-        expect(registry.getIconset('first-name')).to.be.undefined;
-        expect(registry.getIconset('')).to.be.undefined;
-        expect(registry.getIconset('second-name')).to.be.undefined;
-        expect(registry.getIconset('ui')).to.be.undefined;
+    expect(registry.getIconset("first-name")).to.be.undefined;
+    expect(registry.getIconset("")).to.be.undefined;
+    expect(registry.getIconset("second-name")).to.be.undefined;
+    expect(registry.getIconset("ui")).to.be.undefined;
 
-        icons.name = 'second-name';
+    icons.name = "second-name";
 
-        expect(registry.getIconset('first-name')).to.be.undefined;
-        expect(registry.getIconset('')).to.be.undefined;
-        expect(registry.getIconset('second-name')).to.not.be.undefined;
-        expect(registry.getIconset('ui')).to.be.undefined;
-    });
-    it('will not re-register on (dis)connect without a name', async () => {
-        const icons = document.createElement('sp-icons-medium');
+    expect(registry.getIconset("first-name")).to.be.undefined;
+    expect(registry.getIconset("")).to.be.undefined;
+    expect(registry.getIconset("second-name")).to.not.be.undefined;
+    expect(registry.getIconset("ui")).to.be.undefined;
+  });
+  it("will not re-register on (dis)connect without a name", async () => {
+    const icons = document.createElement("sp-icons-medium");
 
-        document.body.append(icons);
+    document.body.append(icons);
 
-        const registry = IconsetRegistry.getInstance();
+    const registry = IconsetRegistry.getInstance();
 
-        expect(registry.getIconset('ui')).to.not.be.undefined;
+    expect(registry.getIconset("ui")).to.not.be.undefined;
 
-        icons.name = '';
+    icons.name = "";
 
-        expect(registry.getIconset('ui')).to.be.undefined;
+    expect(registry.getIconset("ui")).to.be.undefined;
 
-        icons.remove();
+    icons.remove();
 
-        document.body.append(icons);
+    document.body.append(icons);
 
-        expect(registry.getIconset('ui')).to.be.undefined;
-    });
-    it('renders after adding and removing a second iconset of same name', async () => {
-        const icons = document.createElement('sp-icons-medium');
+    expect(registry.getIconset("ui")).to.be.undefined;
+  });
+  it("renders after adding and removing a second iconset of same name", async () => {
+    const icons = document.createElement("sp-icons-medium");
 
-        document.body.append(icons);
+    document.body.append(icons);
 
-        const icons2 = document.createElement('sp-icons-medium');
+    const icons2 = document.createElement("sp-icons-medium");
 
-        document.body.append(icons2);
+    document.body.append(icons2);
 
-        icons2.remove();
+    icons2.remove();
 
-        window.dispatchEvent(
-            new CustomEvent('sp-iconset-removed', {
-                detail: { name: 'Other Set' },
-            })
-        );
+    window.dispatchEvent(
+      new CustomEvent("sp-iconset-removed", {
+        detail: { name: "Other Set" },
+      }),
+    );
 
-        const el = await fixture(html`
-            
-        `);
+    const el = await fixture(html`
+      
+    `);
 
-        let svg = el.shadowRoot
-            ? el.shadowRoot.querySelector('[role="img"]')
-            : null;
+    let svg = el.shadowRoot
+      ? el.shadowRoot.querySelector('[role="img"]')
+      : null;
 
-        function getSVG(): boolean {
-            svg = el.shadowRoot
-                ? el.shadowRoot.querySelector('[role="img"]')
-                : null;
+    function getSVG(): boolean {
+      svg = el.shadowRoot ? el.shadowRoot.querySelector('[role="img"]') : null;
 
-            return svg !== null;
-        }
+      return svg !== null;
+    }
 
-        await waitForPredicate(getSVG);
+    await waitForPredicate(getSVG);
 
-        expect(svg).to.not.be.null;
-    });
+    expect(svg).to.not.be.null;
+  });
 
-    it('can be after `` in the DOM order', async () => {
-        const el = await fixture(html`
-            

-                
-                
-            

-        `);
+  it("can be after `` in the DOM order", async () => {
+    const el = await fixture(html`
+      

+        
+        
+      

+    `);
 
-        const icon = el.querySelector('sp-icon') as Icon;
-        const iconSet = el.querySelector('sp-icons-medium') as IconsMedium;
+    const icon = el.querySelector("sp-icon") as Icon;
+    const iconSet = el.querySelector("sp-icons-medium") as IconsMedium;
 
-        await elementUpdated(iconSet);
-        await elementUpdated(icon);
+    await elementUpdated(iconSet);
+    await elementUpdated(icon);
 
-        const svg = icon.shadowRoot
-            ? icon.shadowRoot.querySelector('[role="img"]')
-            : null;
+    const svg = icon.shadowRoot
+      ? icon.shadowRoot.querySelector('[role="img"]')
+      : null;
 
-        expect(svg).to.not.be.null;
-    });
+    expect(svg).to.not.be.null;
+  });
 });
diff --git a/packages/illustrated-message/sp-illustrated-message.ts b/packages/illustrated-message/sp-illustrated-message.ts
index 483664113e..a0aff65a15 100644
--- a/packages/illustrated-message/sp-illustrated-message.ts
+++ b/packages/illustrated-message/sp-illustrated-message.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { IllustratedMessage } from './src/IllustratedMessage.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { IllustratedMessage } from "./src/IllustratedMessage.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-illustrated-message', IllustratedMessage);
+defineElement("sp-illustrated-message", IllustratedMessage);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-illustrated-message': IllustratedMessage;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-illustrated-message": IllustratedMessage;
+  }
 }
diff --git a/packages/illustrated-message/src/IllustratedMessage.ts b/packages/illustrated-message/src/IllustratedMessage.ts
index 51e171efc8..b4097bb435 100644
--- a/packages/illustrated-message/src/IllustratedMessage.ts
+++ b/packages/illustrated-message/src/IllustratedMessage.ts
@@ -11,16 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+  CSSResultArray,
+  html,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
 
-import messageStyles from './illustrated-message.css.js';
-import headingStyles from '@spectrum-web-components/styles/heading.js';
-import bodyStyles from '@spectrum-web-components/styles/body.js';
+import messageStyles from "./illustrated-message.css.js";
+import headingStyles from "@spectrum-web-components/styles/heading.js";
+import bodyStyles from "@spectrum-web-components/styles/body.js";
 
 /**
  * @element sp-illustrated-message
@@ -30,30 +30,30 @@ import bodyStyles from '@spectrum-web-components/styles/body.js';
  * @slot description - Description text for the illustration
  */
 export class IllustratedMessage extends SpectrumElement {
-    public static readonly is = 'sp-illustrated-message';
-
-    public static override get styles(): CSSResultArray {
-        return [headingStyles, bodyStyles, messageStyles];
-    }
-
-    @property()
-    public heading = '';
-
-    @property()
-    public description = '';
-
-    protected override render(): TemplateResult {
-        return html`
-            

-            

-                ${this.heading}
-            

-            

-                ${this.description}
-            

-        `;
-    }
+  public static readonly is = "sp-illustrated-message";
+
+  public static override get styles(): CSSResultArray {
+    return [headingStyles, bodyStyles, messageStyles];
+  }
+
+  @property()
+  public heading = "";
+
+  @property()
+  public description = "";
+
+  protected override render(): TemplateResult {
+    return html`
+      

+      

+        ${this.heading}
+      

+      

+        ${this.description}
+      

+    `;
+  }
 }
diff --git a/packages/illustrated-message/src/index.ts b/packages/illustrated-message/src/index.ts
index 09481664e5..198ffaf5ff 100644
--- a/packages/illustrated-message/src/index.ts
+++ b/packages/illustrated-message/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './IllustratedMessage.js';
+export * from "./IllustratedMessage.js";
diff --git a/packages/illustrated-message/stories/illustrated-message.stories.ts b/packages/illustrated-message/stories/illustrated-message.stories.ts
index 68c90a52ff..66e073d896 100644
--- a/packages/illustrated-message/stories/illustrated-message.stories.ts
+++ b/packages/illustrated-message/stories/illustrated-message.stories.ts
@@ -9,23 +9,23 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';
-import { illustration } from '../../dropzone/test/test-svg.js';
+import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js";
+import { illustration } from "../../dropzone/test/test-svg.js";
 
 export default {
-    component: 'sp-illustrated-message',
-    title: 'IllustratedMessage',
+  component: "sp-illustrated-message",
+  title: "IllustratedMessage",
 };
 
 export const Default = (): TemplateResult => {
-    return html`
-        
-            ${illustration}
-        
-    `;
+  return html`
+    
+      ${illustration}
+    
+  `;
 };
diff --git a/packages/illustrated-message/test/benchmark/test-basic.ts b/packages/illustrated-message/test/benchmark/test-basic.ts
index 6ed0018698..3b5e7a3fca 100644
--- a/packages/illustrated-message/test/benchmark/test-basic.ts
+++ b/packages/illustrated-message/test/benchmark/test-basic.ts
@@ -10,25 +10,25 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
+    
-        
-            
-        
-    
+      
+    
+  
 `);
diff --git a/packages/illustrated-message/test/illustrated-message-memory.test.ts b/packages/illustrated-message/test/illustrated-message-memory.test.ts
index 48bed6ec15..3854423cbb 100644
--- a/packages/illustrated-message/test/illustrated-message-memory.test.ts
+++ b/packages/illustrated-message/test/illustrated-message-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/illustrated-message/sp-illustrated-message.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/illustrated-message/test/illustrated-message.test.ts b/packages/illustrated-message/test/illustrated-message.test.ts
index 41bdcd9874..c3d0cd4aa5 100644
--- a/packages/illustrated-message/test/illustrated-message.test.ts
+++ b/packages/illustrated-message/test/illustrated-message.test.ts
@@ -11,37 +11,39 @@ governing permissions and limitations under the License.
 */
 import { expect, fixture, html } from "@open-wc/testing";
 import "@spectrum-web-components/illustrated-message/sp-illustrated-message.js";
-import { IllustratedMessage } from "../";
+import { IllustratedMessage } from "../src/index.js";
 
 describe("Illustrated Message", () => {
-	it("loads", async () => {
-		const el = await fixture(html`
-			
-				
-					
-				
-			
-		`);
+  it("loads", async () => {
+    const el = await fixture(html`
+      
+        
+          
+        
+      
+    `);
 
-		expect(el).to.not.equal(undefined);
+    expect(el).to.not.equal(undefined);
 
-		if (!el.shadowRoot) throw new Error("No shadowRoot");
+    if (!el.shadowRoot) {
+      throw new Error("No shadowRoot");
+    }
 
-		const slot = el.shadowRoot.querySelector("slot") as HTMLSlotElement;
+    const slot = el.shadowRoot.querySelector("slot") as HTMLSlotElement;
 
-		expect(slot).to.not.equal(undefined);
+    expect(slot).to.not.equal(undefined);
 
-		return true;
-	});
+    return true;
+  });
 });
diff --git a/packages/infield-button/sp-infield-button.ts b/packages/infield-button/sp-infield-button.ts
index 8242b953cf..5e2df21bd2 100644
--- a/packages/infield-button/sp-infield-button.ts
+++ b/packages/infield-button/sp-infield-button.ts
@@ -9,12 +9,12 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { InfieldButton } from './src/InfieldButton.js';
+import { InfieldButton } from "./src/InfieldButton.js";
 
-customElements.define('sp-infield-button', InfieldButton);
+customElements.define("sp-infield-button", InfieldButton);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-infield-button': InfieldButton;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-infield-button": InfieldButton;
+  }
 }
diff --git a/packages/infield-button/src/InfieldButton.ts b/packages/infield-button/src/InfieldButton.ts
index a60ce88edd..08c4ce5fad 100644
--- a/packages/infield-button/src/InfieldButton.ts
+++ b/packages/infield-button/src/InfieldButton.ts
@@ -10,53 +10,53 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    CSSResultArray,
-    html,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { ButtonBase } from '@spectrum-web-components/button/src/ButtonBase.js';
+  CSSResultArray,
+  html,
+  SizedMixin,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ButtonBase } from "@spectrum-web-components/button/src/ButtonBase.js";
 
-import styles from './infield-button.css.js';
+import styles from "./infield-button.css.js";
 
 /**
  * @element sp-infield-button
  */
 export class InfieldButton extends SizedMixin(ButtonBase, {
-    noDefaultSize: true,
-    validSizes: ['s', 'm', 'l', 'xl'],
+  noDefaultSize: true,
+  validSizes: ["s", "m", "l", "xl"],
 }) {
-    public static override get styles(): CSSResultArray {
-        return [...super.styles, styles];
-    }
-
-    /**
-     * Whether to style the button as if it is at the start or end of a vertical stack
-     *
-     * @type {'start' | 'end'}
-     */
-    @property()
-    block?: 'start' | 'end';
-
-    /**
-     * Whether to style the button as if it is at the start or end of a horizontal group
-     *
-     * @type {'start' | 'end'}
-     */
-    @property()
-    inline?: 'start' | 'end';
-
-    @property({ type: Boolean, reflect: true })
-    quiet = false;
-
-    protected override get buttonContent(): TemplateResult[] {
-        const buttonContent = html`
-            

-                
-            

-        `;
-
-        return [buttonContent];
-    }
+  public static override get styles(): CSSResultArray {
+    return [...super.styles, styles];
+  }
+
+  /**
+   * Whether to style the button as if it is at the start or end of a vertical stack
+   *
+   * @type {'start' | 'end'}
+   */
+  @property()
+  block?: "start" | "end";
+
+  /**
+   * Whether to style the button as if it is at the start or end of a horizontal group
+   *
+   * @type {'start' | 'end'}
+   */
+  @property()
+  inline?: "start" | "end";
+
+  @property({ type: Boolean, reflect: true })
+  quiet = false;
+
+  protected override get buttonContent(): TemplateResult[] {
+    const buttonContent = html`
+      

+        
+      

+    `;
+
+    return [buttonContent];
+  }
 }
diff --git a/packages/infield-button/src/index.ts b/packages/infield-button/src/index.ts
index 0aa8da4619..247531f2d8 100644
--- a/packages/infield-button/src/index.ts
+++ b/packages/infield-button/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './InfieldButton.js';
+export * from "./InfieldButton.js";
diff --git a/packages/infield-button/stories/index.ts b/packages/infield-button/stories/index.ts
index db122aeb25..9250b0d765 100644
--- a/packages/infield-button/stories/index.ts
+++ b/packages/infield-button/stories/index.ts
@@ -9,132 +9,126 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/infield-button/sp-infield-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';
+import "@spectrum-web-components/infield-button/sp-infield-button.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-add.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
+import chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";
 
 document.adoptedStyleSheets = [
-    ...document.adoptedStyleSheets,
-    chevronStyles.styleSheet as CSSStyleSheet,
-    chevronIconOverrides.styleSheet as CSSStyleSheet,
+  ...document.adoptedStyleSheets,
+  chevronStyles.styleSheet as CSSStyleSheet,
+  chevronIconOverrides.styleSheet as CSSStyleSheet,
 ];
 
 export type StoryArgs = {
-    block?: 'start' | 'end';
-    content?: () => TemplateResult;
-    disabled?: boolean;
-    inline?: 'start' | 'end';
-    label?: string;
-    size?: 's' | 'm' | 'l' | 'xl';
-    quiet?: boolean;
+  block?: "start" | "end";
+  content?: () => TemplateResult;
+  disabled?: boolean;
+  inline?: "start" | "end";
+  label?: string;
+  size?: "s" | "m" | "l" | "xl";
+  quiet?: boolean;
 };
 
 export const args = {
-    block: undefined,
-    disabled: false,
-    inline: undefined,
-    label: 'Add',
-    size: undefined,
-    quiet: false,
+  block: undefined,
+  disabled: false,
+  inline: undefined,
+  label: "Add",
+  size: undefined,
+  quiet: false,
 } as StoryArgs;
 
 export const argTypes = {
-    block: {
-        name: 'block',
-        type: { name: 'text', required: false },
-        description: 'Where to place the button along the block axis.',
-        table: {
-            type: { summary: '"start" | "end"' },
-            defaultValue: { summary: '' },
-        },
-        control: 'select',
-        options: ['none', 'start', 'end'],
+  block: {
+    name: "block",
+    type: { name: "text", required: false },
+    description: "Where to place the button along the block axis.",
+    table: {
+      type: { summary: '"start" | "end"' },
+      defaultValue: { summary: "" },
     },
-    disabled: {
-        name: 'disabled',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the button is disabled or not.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+    control: "select",
+    options: ["none", "start", "end"],
+  },
+  disabled: {
+    name: "disabled",
+    type: { name: "boolean", required: false },
+    description: "Whether the button is disabled or not.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
     },
-    inline: {
-        name: 'inline',
-        type: { name: 'text', required: false },
-        description: 'Where to place the button along the inline axis.',
-        table: {
-            type: { summary: '"start" | "end"' },
-            defaultValue: { summary: '' },
-        },
-        control: 'select',
-        options: ['none', 'start', 'end'],
+    control: {
+      type: "boolean",
     },
-    size: {
-        name: 'size',
-        type: { name: 'text', required: false },
-        description: 'The t-shit size of the button.',
-        table: {
-            type: { summary: '"s" | "m" | "l" | "xl"' },
-            defaultValue: { summary: '' },
-        },
-        control: 'select',
-        options: ['s', 'm', 'l', 'xl'],
+  },
+  inline: {
+    name: "inline",
+    type: { name: "text", required: false },
+    description: "Where to place the button along the inline axis.",
+    table: {
+      type: { summary: '"start" | "end"' },
+      defaultValue: { summary: "" },
     },
-    quiet: {
-        name: 'quiet',
-        type: { name: 'boolean', required: false },
-        description: 'Whether the button is quiet or not.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+    control: "select",
+    options: ["none", "start", "end"],
+  },
+  size: {
+    name: "size",
+    type: { name: "text", required: false },
+    description: "The t-shit size of the button.",
+    table: {
+      type: { summary: '"s" | "m" | "l" | "xl"' },
+      defaultValue: { summary: "" },
     },
+    control: "select",
+    options: ["s", "m", "l", "xl"],
+  },
+  quiet: {
+    name: "quiet",
+    type: { name: "boolean", required: false },
+    description: "Whether the button is quiet or not.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
+    },
+    control: {
+      type: "boolean",
+    },
+  },
 };
 
 export const Template = ({
-    block,
-    content,
-    disabled,
-    inline,
-    label,
-    size,
-    quiet,
+  block,
+  content,
+  disabled,
+  inline,
+  label,
+  size,
+  quiet,
 }: StoryArgs): TemplateResult => {
-    return html`
-        
-            ${content
-                ? content()
-                : html`
-                      
-                  `}
-        
-    `;
+  return html`
+    
+      ${content ? content() : html`  `}
+    
+  `;
 };
 
 export const chevronUp = (): TemplateResult => html`
-    
+  
 `;
 export const chevronDown = (): TemplateResult => html`
-    
+  
 `;
diff --git a/packages/infield-button/stories/infield-button-sizes.stories.ts b/packages/infield-button/stories/infield-button-sizes.stories.ts
index 38dd0328c5..d4b8463ae4 100644
--- a/packages/infield-button/stories/infield-button-sizes.stories.ts
+++ b/packages/infield-button/stories/infield-button-sizes.stories.ts
@@ -9,94 +9,94 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
 import {
-    args,
-    argTypes,
-    chevronDown,
-    chevronUp,
-    StoryArgs,
-    Template,
-} from './index.js';
+  args,
+  argTypes,
+  chevronDown,
+  chevronUp,
+  StoryArgs,
+  Template,
+} from "./index.js";
 
 export default {
-    title: 'Infield Button/Sizes',
-    component: 'sp-infield-button',
-    argTypes,
-    args,
+  title: "Infield Button/Sizes",
+  component: "sp-infield-button",
+  argTypes,
+  args,
 };
 
 export const s = (args: StoryArgs): TemplateResult => Template(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 export const m = (args: StoryArgs): TemplateResult => Template(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 export const l = (args: StoryArgs): TemplateResult => Template(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 export const XL = (args: StoryArgs): TemplateResult => Template(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
 
 export const stackedS = (): TemplateResult => html`
-    ${Template({
-        block: 'start',
-        content: chevronUp,
-        size: 's',
-        label: 'Increase',
-    })}
-    ${Template({
-        block: 'end',
-        content: chevronDown,
-        size: 's',
-        label: 'Decrease',
-    })}
+  ${Template({
+    block: "start",
+    content: chevronUp,
+    size: "s",
+    label: "Increase",
+  })}
+  ${Template({
+    block: "end",
+    content: chevronDown,
+    size: "s",
+    label: "Decrease",
+  })}
 `;
 export const stackedM = (): TemplateResult => html`
-    ${Template({
-        block: 'start',
-        content: chevronUp,
-        size: 'm',
-        label: 'Increase',
-    })}
-    ${Template({
-        block: 'end',
-        content: chevronDown,
-        size: 'm',
-        label: 'Decrease',
-    })}
+  ${Template({
+    block: "start",
+    content: chevronUp,
+    size: "m",
+    label: "Increase",
+  })}
+  ${Template({
+    block: "end",
+    content: chevronDown,
+    size: "m",
+    label: "Decrease",
+  })}
 `;
 export const stackedL = (): TemplateResult => html`
-    ${Template({
-        block: 'start',
-        content: chevronUp,
-        size: 'l',
-        label: 'Increase',
-    })}
-    ${Template({
-        block: 'end',
-        content: chevronDown,
-        size: 'l',
-        label: 'Decrease',
-    })}
+  ${Template({
+    block: "start",
+    content: chevronUp,
+    size: "l",
+    label: "Increase",
+  })}
+  ${Template({
+    block: "end",
+    content: chevronDown,
+    size: "l",
+    label: "Decrease",
+  })}
 `;
 export const stackedXL = (): TemplateResult => html`
-    ${Template({
-        block: 'start',
-        content: chevronUp,
-        size: 'xl',
-        label: 'Increase',
-    })}
-    ${Template({
-        block: 'end',
-        content: chevronDown,
-        size: 'xl',
-        label: 'Decrease',
-    })}
+  ${Template({
+    block: "start",
+    content: chevronUp,
+    size: "xl",
+    label: "Increase",
+  })}
+  ${Template({
+    block: "end",
+    content: chevronDown,
+    size: "xl",
+    label: "Decrease",
+  })}
 `;
diff --git a/packages/infield-button/stories/infield-button.stories.ts b/packages/infield-button/stories/infield-button.stories.ts
index b212d6de59..b9107ce8ea 100644
--- a/packages/infield-button/stories/infield-button.stories.ts
+++ b/packages/infield-button/stories/infield-button.stories.ts
@@ -9,54 +9,54 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
 import {
-    args,
-    argTypes,
-    chevronDown,
-    chevronUp,
-    StoryArgs,
-    Template,
-} from './index.js';
+  args,
+  argTypes,
+  chevronDown,
+  chevronUp,
+  StoryArgs,
+  Template,
+} from "./index.js";
 
 export default {
-    title: 'Infield Button',
-    component: 'sp-infield-button',
-    argTypes,
-    args,
+  title: "Infield Button",
+  component: "sp-infield-button",
+  argTypes,
+  args,
 };
 
 export const Default = (args: StoryArgs): TemplateResult => Template(args);
 export const disabled = (args: StoryArgs): TemplateResult => Template(args);
 disabled.args = {
-    disabled: true,
+  disabled: true,
 };
 
 export const inlineStart = (args: StoryArgs): TemplateResult => Template(args);
 inlineStart.args = {
-    inline: 'start',
+  inline: "start",
 };
 
 export const inlineEnd = (args: StoryArgs): TemplateResult => Template(args);
 inlineEnd.args = {
-    inline: 'end',
+  inline: "end",
 };
 
 export const stacked = (): TemplateResult => html`
-    ${Template({
-        block: 'start',
-        content: chevronUp,
-        label: 'Increase',
-    })}
-    ${Template({
-        block: 'end',
-        content: chevronDown,
-        label: 'Decrease',
-    })}
+  ${Template({
+    block: "start",
+    content: chevronUp,
+    label: "Increase",
+  })}
+  ${Template({
+    block: "end",
+    content: chevronDown,
+    label: "Decrease",
+  })}
 `;
 
 export const quiet = (args: StoryArgs): TemplateResult => Template(args);
 quiet.args = {
-    quiet: true,
+  quiet: true,
 };
diff --git a/packages/infield-button/test/benchmark/basic-test.ts b/packages/infield-button/test/benchmark/basic-test.ts
index 31da2e8f16..1cb82c0d8b 100644
--- a/packages/infield-button/test/benchmark/basic-test.ts
+++ b/packages/infield-button/test/benchmark/basic-test.ts
@@ -9,10 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/infield-button/sp-infield-button.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/infield-button/sp-infield-button.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/infield-button/test/infield-button-memory.test.ts b/packages/infield-button/test/infield-button-memory.test.ts
index e35d9c0688..ee9a21f0f1 100644
--- a/packages/infield-button/test/infield-button-memory.test.ts
+++ b/packages/infield-button/test/infield-button-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/infield-button/sp-infield-button.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/infield-button/sp-infield-button.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/infield-button/test/infield-button.test.ts b/packages/infield-button/test/infield-button.test.ts
index 3c65c19784..0d41db9e93 100644
--- a/packages/infield-button/test/infield-button.test.ts
+++ b/packages/infield-button/test/infield-button.test.ts
@@ -9,30 +9,30 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { elementUpdated, expect, fixture } from '@open-wc/testing';
+import { elementUpdated, expect, fixture } from "@open-wc/testing";
 
-import '@spectrum-web-components/infield-button/sp-infield-button.js';
-import { InfieldButton } from '@spectrum-web-components/infield-button';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-import { Default, stacked } from '../stories/infield-button.stories.js';
-import { args } from '../stories/index.js';
+import "@spectrum-web-components/infield-button/sp-infield-button.js";
+import { InfieldButton } from "@spectrum-web-components/infield-button";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { Default, stacked } from "../stories/infield-button.stories.js";
+import { args } from "../stories/index.js";
 
-describe('InfieldButton', () => {
-    testForLitDevWarnings(
-        async () => await fixture(Default(args))
-    );
-    it('loads default infield-button accessibly', async () => {
-        const el = await fixture(Default(args));
+describe("InfieldButton", () => {
+  testForLitDevWarnings(
+    async () => await fixture(Default(args)),
+  );
+  it("loads default infield-button accessibly", async () => {
+    const el = await fixture(Default(args));
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
-    it('loads stacked infield-button accessibly', async () => {
-        const el = await fixture(stacked());
+    await expect(el).to.be.accessible();
+  });
+  it("loads stacked infield-button accessibly", async () => {
+    const el = await fixture(stacked());
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
+    await expect(el).to.be.accessible();
+  });
 });
diff --git a/packages/link/sp-link.ts b/packages/link/sp-link.ts
index e577fbff10..90a03d374a 100644
--- a/packages/link/sp-link.ts
+++ b/packages/link/sp-link.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Link } from './src/Link.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Link } from "./src/Link.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-link', Link);
+defineElement("sp-link", Link);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-link': Link;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-link": Link;
+  }
 }
diff --git a/packages/link/src/Link.ts b/packages/link/src/Link.ts
index a2eaf775bf..fbcd3e5e80 100644
--- a/packages/link/src/Link.ts
+++ b/packages/link/src/Link.ts
@@ -10,44 +10,44 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
+import { CSSResultArray, TemplateResult } from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
+import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
 
-import linkStyles from './link.css.js';
+import linkStyles from "./link.css.js";
 
 /**
  * @element sp-link
  */
 export class Link extends LikeAnchor(Focusable) {
-    public static override get styles(): CSSResultArray {
-        return [linkStyles];
-    }
+  public static override get styles(): CSSResultArray {
+    return [linkStyles];
+  }
 
-    @query('#anchor')
-    anchorElement!: HTMLAnchorElement;
+  @query("#anchor")
+  anchorElement!: HTMLAnchorElement;
 
-    @property({ type: String, reflect: true })
-    public variant: 'secondary' | undefined;
+  @property({ type: String, reflect: true })
+  public variant: "secondary" | undefined;
 
-    @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'black' | 'white';
+  @property({ reflect: true, attribute: "static-color" })
+  public staticColor?: "black" | "white";
 
-    /**
-     * Uses quiet styles or not
-     */
-    @property({ type: Boolean, reflect: true, attribute: 'quiet' })
-    public quiet = false;
+  /**
+   * Uses quiet styles or not
+   */
+  @property({ type: Boolean, reflect: true, attribute: "quiet" })
+  public quiet = false;
 
-    public override get focusElement(): HTMLElement {
-        return this.anchorElement;
-    }
+  public override get focusElement(): HTMLElement {
+    return this.anchorElement;
+  }
 
-    protected override render(): TemplateResult {
-        return this.renderAnchor({ id: 'anchor' });
-    }
+  protected override render(): TemplateResult {
+    return this.renderAnchor({ id: "anchor" });
+  }
 }
diff --git a/packages/link/src/index.ts b/packages/link/src/index.ts
index 07c8adb0b9..48d329b749 100644
--- a/packages/link/src/index.ts
+++ b/packages/link/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Link.js';
+export * from "./Link.js";
diff --git a/packages/link/stories/link.stories.ts b/packages/link/stories/link.stories.ts
index 233a1083d9..7fcabfa73e 100644
--- a/packages/link/stories/link.stories.ts
+++ b/packages/link/stories/link.stories.ts
@@ -9,116 +9,116 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/link/sp-link.js';
+import "@spectrum-web-components/link/sp-link.js";
 
 export default {
-    component: 'sp-link',
-    title: 'Link',
+  component: "sp-link",
+  title: "Link",
 };
 
 export const Default = (): TemplateResult => {
-    // prettier-ignore
-    return html`
+  // prettier-ignore
+  return html`
         This is a link in a sentence.
     `;
 };
 
 export const Quiet = (): TemplateResult => {
-    // prettier-ignore
-    return html`
+  // prettier-ignore
+  return html`
         This is a quiet link in a sentence.
     `;
 };
 
 export const Disabled = (): TemplateResult => {
-    // prettier-ignore
-    return html`
+  // prettier-ignore
+  return html`
         This is a disabled non focusable link in a sentence.
     `;
 };
 
 export const secondary = (): TemplateResult => {
-    // prettier-ignore
-    return html`
+  // prettier-ignore
+  return html`
         This is a link in a sentence.
     `;
 };
 
 export const secondaryQuiet = (): TemplateResult => {
-    // prettier-ignore
-    return html`
+  // prettier-ignore
+  return html`
         This is a quiet link in a sentence.
     `;
 };
 
 export const staticWhite = (): TemplateResult => {
-    return html`
-        

-            

-                This
-                link
-                has a background.
-            

-        

-    `;
+  return html`
+    

+      

+        This
+        link
+        has a background.
+      

+    

+  `;
 };
 
 export const staticBlack = (): TemplateResult => {
-    return html`
-        

-            

-                This
-                link
-                has a background.
-            

-        

-    `;
+  return html`
+    

+      

+        This
+        link
+        has a background.
+      

+    

+  `;
 };
 
 export const staticWhiteQuiet = (): TemplateResult => {
-    return html`
-        

-            

-                This
-                link
-                has a background.
-            

-        

-    `;
+  return html`
+    

+      

+        This
+        link
+        has a background.
+      

+    

+  `;
 };
 
 export const staticBlackQuiet = (): TemplateResult => {
-    return html`
-        

-            

-                This
-                link
-                has a background.
-            

-        

-    `;
+  return html`
+    

+      

+        This
+        link
+        has a background.
+      

+    

+  `;
 };
 
 export const Download = (): TemplateResult => {
-    const blob = new Blob(['some text for the file'], {
-        type: 'text/plain;charset=utf-8',
-    });
+  const blob = new Blob(["some text for the file"], {
+    type: "text/plain;charset=utf-8",
+  });
 
-    return html`
-        This is a
-        
-            downloadable file
-        
-        for you to click on.
-    `;
+  return html`
+    This is a
+    
+      downloadable file
+    
+    for you to click on.
+  `;
 };
diff --git a/packages/link/test/benchmark/test-basic.ts b/packages/link/test/benchmark/test-basic.ts
index 7eca553203..85587874e6 100644
--- a/packages/link/test/benchmark/test-basic.ts
+++ b/packages/link/test/benchmark/test-basic.ts
@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/link/sp-link.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/link/sp-link.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    Default Link
+  Default Link
 `);
diff --git a/packages/link/test/link-memory.test.ts b/packages/link/test/link-memory.test.ts
index cd9da4d87f..3b6da2fad7 100644
--- a/packages/link/test/link-memory.test.ts
+++ b/packages/link/test/link-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/link/sp-link.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/link/sp-link.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/link/test/link.test.ts b/packages/link/test/link.test.ts
index c6de3a3fac..4c81512ed9 100644
--- a/packages/link/test/link.test.ts
+++ b/packages/link/test/link.test.ts
@@ -10,70 +10,68 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/link/sp-link.js';
-import { Link } from '@spectrum-web-components/link';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-import { spy } from 'sinon';
+import "@spectrum-web-components/link/sp-link.js";
+import { Link } from "@spectrum-web-components/link";
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { spy } from "sinon";
 
-describe('Link', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                Default Link
-            `)
-    );
-    it('loads', async () => {
-        const el = await fixture(html`
-            Default Link
-        `);
+describe("Link", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        Default Link
+      `),
+  );
+  it("loads", async () => {
+    const el = await fixture(html`
+      Default Link
+    `);
 
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        expect(el.textContent).to.include('Default Link');
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.textContent).to.include("Default Link");
 
-        await expect(el).to.be.accessible();
-    });
+    await expect(el).to.be.accessible();
+  });
 
-    it('loads[download]', async () => {
-        const el = await fixture(html`
-            
-                Default Link
-            
-        `);
+  it("loads[download]", async () => {
+    const el = await fixture(html`
+       Default Link 
+    `);
 
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        expect(el.textContent).to.include('Default Link');
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.textContent).to.include("Default Link");
 
-        await expect(el).to.be.accessible();
-    });
+    await expect(el).to.be.accessible();
+  });
 
-    it('loads[rel]', async () => {
-        const el = await fixture(html`
-            Default Link
-        `);
+  it("loads[rel]", async () => {
+    const el = await fixture(html`
+      Default Link
+    `);
 
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        expect(el.focusElement.getAttribute('rel')).to.eq('external');
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.focusElement.getAttribute("rel")).to.eq("external");
 
-        await expect(el).to.be.accessible();
-    });
+    await expect(el).to.be.accessible();
+  });
 
-    it('no click triggers for disabled link', async () => {
-        const clickSpy = spy();
-        const el = await fixture(html`
-             clickSpy()}>
-                Disabled Link
-            
-        `);
+  it("no click triggers for disabled link", async () => {
+    const clickSpy = spy();
+    const el = await fixture(html`
+       clickSpy()}>
+        Disabled Link
+      
+    `);
 
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        expect(el.disabled).to.eq(true);
-        await expect(el).to.be.accessible();
-        el.click();
-        expect(clickSpy.callCount).to.equal(0);
-    });
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.disabled).to.eq(true);
+    await expect(el).to.be.accessible();
+    el.click();
+    expect(clickSpy.callCount).to.equal(0);
+  });
 });
diff --git a/packages/menu/sp-menu-divider.ts b/packages/menu/sp-menu-divider.ts
index f06da4b1cd..2f24479ea2 100644
--- a/packages/menu/sp-menu-divider.ts
+++ b/packages/menu/sp-menu-divider.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { MenuDivider } from './src/MenuDivider.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { MenuDivider } from "./src/MenuDivider.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-menu-divider', MenuDivider);
+defineElement("sp-menu-divider", MenuDivider);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-menu-divider': MenuDivider;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-menu-divider": MenuDivider;
+  }
 }
diff --git a/packages/menu/sp-menu-group.ts b/packages/menu/sp-menu-group.ts
index 50125f54d7..8d786e1632 100644
--- a/packages/menu/sp-menu-group.ts
+++ b/packages/menu/sp-menu-group.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { MenuGroup } from './src/MenuGroup.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { MenuGroup } from "./src/MenuGroup.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-menu-group', MenuGroup);
+defineElement("sp-menu-group", MenuGroup);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-menu-group': MenuGroup;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-menu-group": MenuGroup;
+  }
 }
diff --git a/packages/menu/sp-menu-item.ts b/packages/menu/sp-menu-item.ts
index 971cf748b3..c97cf2e719 100644
--- a/packages/menu/sp-menu-item.ts
+++ b/packages/menu/sp-menu-item.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { MenuItem } from './src/MenuItem.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { MenuItem } from "./src/MenuItem.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-menu-item', MenuItem);
+defineElement("sp-menu-item", MenuItem);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-menu-item': MenuItem;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-menu-item": MenuItem;
+  }
 }
diff --git a/packages/menu/sp-menu.ts b/packages/menu/sp-menu.ts
index 784a95c137..4822e9b132 100644
--- a/packages/menu/sp-menu.ts
+++ b/packages/menu/sp-menu.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Menu } from './src/Menu.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Menu } from "./src/Menu.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-menu', Menu);
+defineElement("sp-menu", Menu);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-menu': Menu;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-menu": Menu;
+  }
 }
diff --git a/packages/menu/src/Menu.ts b/packages/menu/src/Menu.ts
index c7fe58fddd..cdf969b557 100644
--- a/packages/menu/src/Menu.ts
+++ b/packages/menu/src/Menu.ts
@@ -11,42 +11,42 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
 
-import { MenuItem } from './MenuItem.js';
-import type { MenuItemAddedOrUpdatedEvent } from './MenuItem.js';
-import type { Overlay } from '@spectrum-web-components/overlay';
-import menuStyles from './menu.css.js';
+import { MenuItem } from "./MenuItem.js";
+import type { MenuItemAddedOrUpdatedEvent } from "./MenuItem.js";
+import type { Overlay } from "@spectrum-web-components/overlay";
+import menuStyles from "./menu.css.js";
 
 export interface MenuChildItem {
-    menuItem: MenuItem;
-    managed: boolean;
-    active: boolean;
-    focusable: boolean;
-    focusRoot: Menu;
+  menuItem: MenuItem;
+  managed: boolean;
+  active: boolean;
+  focusable: boolean;
+  focusRoot: Menu;
 }
 
-type SelectsType = 'none' | 'ignore' | 'inherit' | 'multiple' | 'single';
-type RoleType = 'group' | 'menu' | 'listbox' | 'none';
+type SelectsType = "none" | "ignore" | "inherit" | "multiple" | "single";
+type RoleType = "group" | "menu" | "listbox" | "none";
 
 /**
  *
  */
 function elementIsOrContains(
-    el: Node,
-    isOrContains: Node | undefined | null
+  el: Node,
+  isOrContains: Node | undefined | null,
 ): boolean {
-    return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
+  return !!isOrContains && (el === isOrContains || el.contains(isOrContains));
 }
 
 /**
@@ -67,997 +67,986 @@ function elementIsOrContains(
  *
  */
 export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
-    public static override get styles(): CSSResultArray {
-        return [menuStyles];
-    }
+  public static override get styles(): CSSResultArray {
+    return [menuStyles];
+  }
 
-    private get isSubmenu(): boolean {
-        return this.slot === 'submenu';
-    }
+  private get isSubmenu(): boolean {
+    return this.slot === "submenu";
+  }
 
-    @property({ type: String, reflect: true })
-    public label = '';
+  @property({ type: String, reflect: true })
+  public label = "";
 
-    @property({ type: Boolean, reflect: true })
-    public ignore = false;
+  @property({ type: Boolean, reflect: true })
+  public ignore = false;
 
-    @property({ type: String, reflect: true })
-    public selects: undefined | 'inherit' | 'single' | 'multiple';
+  @property({ type: String, reflect: true })
+  public selects: undefined | "inherit" | "single" | "multiple";
 
-    @property({ type: String })
-    public value = '';
+  @property({ type: String })
+  public value = "";
 
-    // For the multiple select case, we'll join the value strings together
-    // for the value property with this separator
-    @property({ type: String, attribute: 'value-separator' })
-    public valueSeparator = ',';
+  // For the multiple select case, we'll join the value strings together
+  // for the value property with this separator
+  @property({ type: String, attribute: "value-separator" })
+  public valueSeparator = ",";
 
-    // TODO: which of these to keep?
-    @property({ attribute: false })
-    public get selected(): string[] {
-        return this._selected;
-    }
-
-    public set selected(selected: string[]) {
-        if (selected === this.selected) {
-            return;
-        }
+  // TODO: which of these to keep?
+  @property({ attribute: false })
+  public get selected(): string[] {
+    return this._selected;
+  }
 
-        const old = this.selected;
+  public set selected(selected: string[]) {
+    if (selected === this.selected) {
+      return;
+    }
 
-        this._selected = selected;
-        this.selectedItems = [];
-        this.selectedItemsMap.clear();
-        this.childItems.forEach((item) => {
-            if (this !== item.menuData.selectionRoot) {
-                return;
-            }
+    const old = this.selected;
 
-            item.selected = this.selected.includes(item.value);
+    this._selected = selected;
+    this.selectedItems = [];
+    this.selectedItemsMap.clear();
+    this.childItems.forEach((item) => {
+      if (this !== item.menuData.selectionRoot) {
+        return;
+      }
 
-            if (item.selected) {
-                this.selectedItems.push(item);
-                this.selectedItemsMap.set(item, true);
-            }
-        });
-        this.requestUpdate('selected', old);
-    }
+      item.selected = this.selected.includes(item.value);
 
-    protected _selected = [] as string[];
+      if (item.selected) {
+        this.selectedItems.push(item);
+        this.selectedItemsMap.set(item, true);
+      }
+    });
+    this.requestUpdate("selected", old);
+  }
 
-    @property({ attribute: false })
-    public selectedItems = [] as MenuItem[];
+  protected _selected = [] as string[];
 
-    @query('slot:not([name])')
-    public menuSlot!: HTMLSlotElement;
+  @property({ attribute: false })
+  public selectedItems = [] as MenuItem[];
 
-    private childItemSet = new Set();
-    public focusedItemIndex = 0;
-    public focusInItemIndex = 0;
+  @query("slot:not([name])")
+  public menuSlot!: HTMLSlotElement;
 
-    private selectedItemsMap = new Map();
+  private childItemSet = new Set();
+  public focusedItemIndex = 0;
+  public focusInItemIndex = 0;
 
-    public get childItems(): MenuItem[] {
-        if (!this.cachedChildItems) {
-            this.cachedChildItems = this.updateCachedMenuItems();
-        }
+  private selectedItemsMap = new Map();
 
-        return this.cachedChildItems;
+  public get childItems(): MenuItem[] {
+    if (!this.cachedChildItems) {
+      this.cachedChildItems = this.updateCachedMenuItems();
     }
 
-    private cachedChildItems: MenuItem[] | undefined;
+    return this.cachedChildItems;
+  }
 
-    private updateCachedMenuItems(): MenuItem[] {
-        this.cachedChildItems = [];
+  private cachedChildItems: MenuItem[] | undefined;
 
-        if (!this.menuSlot) {
-            return [];
-        }
+  private updateCachedMenuItems(): MenuItem[] {
+    this.cachedChildItems = [];
 
-        const slottedElements = this.menuSlot.assignedElements({
-            flatten: true,
-        }) as HTMLElement[];
-
-        // Recursively flatten  and non- elements assigned to the menu into a single array.
-        for (const [i, slottedElement] of slottedElements.entries()) {
-            if (this.childItemSet.has(slottedElement as MenuItem)) {
-                // Assign  members of the array that are in this.childItemSet to this.chachedChildItems.
-                this.cachedChildItems.push(slottedElement as MenuItem);
-                continue;
-            }
-
-            const isHTMLSlotElement = slottedElement.localName === 'slot';
-            const flattenedChildren = isHTMLSlotElement
-                ? (slottedElement as HTMLSlotElement).assignedElements({
-                      flatten: true,
-                  })
-                : [...slottedElement.querySelectorAll(`:scope > *`)];
-
-            slottedElements.splice(
-                i,
-                1,
-                slottedElement,
-                ...(flattenedChildren as HTMLElement[])
-            );
-        }
-
-        return this.cachedChildItems;
+    if (!this.menuSlot) {
+      return [];
     }
 
-    /**
-     * Hide this getter from web-component-analyzer until
-     * https://github.com/runem/web-component-analyzer/issues/131
-     * has been addressed.
-     *
-     * @private
-     */
-    public get childRole(): string {
-        if (this.resolvedRole === 'listbox') {
-            return 'option';
-        }
-
-        switch (this.resolvedSelects) {
-            case 'single':
-                return 'menuitemradio';
-            case 'multiple':
-                return 'menuitemcheckbox';
-            default:
-                return 'menuitem';
-        }
+    const slottedElements = this.menuSlot.assignedElements({
+      flatten: true,
+    }) as HTMLElement[];
+
+    // Recursively flatten  and non- elements assigned to the menu into a single array.
+    for (const [i, slottedElement] of slottedElements.entries()) {
+      if (this.childItemSet.has(slottedElement as MenuItem)) {
+        // Assign  members of the array that are in this.childItemSet to this.chachedChildItems.
+        this.cachedChildItems.push(slottedElement as MenuItem);
+        continue;
+      }
+
+      const isHTMLSlotElement = slottedElement.localName === "slot";
+      const flattenedChildren = isHTMLSlotElement
+        ? (slottedElement as HTMLSlotElement).assignedElements({
+            flatten: true,
+          })
+        : [...slottedElement.querySelectorAll(":scope > *")];
+
+      slottedElements.splice(
+        i,
+        1,
+        slottedElement,
+        ...(flattenedChildren as HTMLElement[]),
+      );
     }
 
-    protected get ownRole(): string {
-        return 'menu';
+    return this.cachedChildItems;
+  }
+
+  /**
+   * Hide this getter from web-component-analyzer until
+   * https://github.com/runem/web-component-analyzer/issues/131
+   * has been addressed.
+   *
+   * @private
+   */
+  public get childRole(): string {
+    if (this.resolvedRole === "listbox") {
+      return "option";
     }
 
-    private resolvedSelects?: SelectsType;
-    private resolvedRole?: RoleType;
-
-    /**
-     * When a descendant `` element is added or updated it will dispatch
-     * this event to announce its presence in the DOM. During the CAPTURE phase the first
-     * Menu based element that the event encounters will manage the focus state of the
-     * dispatching `` element.
-     *
-     * @param event - The event dispatched when a descendant  element is added or updated
-     */
-    private onFocusableItemAddedOrUpdated(
-        event: MenuItemAddedOrUpdatedEvent
-    ): void {
-        event.menuCascade.set(this, {
-            hadFocusRoot: !!event.item.menuData.focusRoot,
-            ancestorWithSelects: event.currentAncestorWithSelects,
-        });
-
-        if (this.selects) {
-            event.currentAncestorWithSelects = this;
-        }
-
-        event.item.menuData.focusRoot = event.item.menuData.focusRoot || this;
+    switch (this.resolvedSelects) {
+      case "single":
+        return "menuitemradio";
+      case "multiple":
+        return "menuitemcheckbox";
+      default:
+        return "menuitem";
     }
-
-    /**
-     * When a descendant `` element is added or updated it will dispatch
-     * this event to announce its presence in the DOM. During the BUBBLE phase the first
-     * Menu based element that the event encounters that does not inherit selection will
-     * manage the selection state of the dispatching `` element.
-     *
-     * @param event - The event dispatched when a descendant  element is added or updated
-     */
-    private onSelectableItemAddedOrUpdated(
-        event: MenuItemAddedOrUpdatedEvent
-    ): void {
-        const cascadeData = event.menuCascade.get(this);
-
-        /* c8 ignore next 1 */
-        if (!cascadeData) return;
-
-        event.item.menuData.parentMenu = event.item.menuData.parentMenu || this;
-
-        if (cascadeData.hadFocusRoot && !this.ignore) {
-            // Only have one tab stop per Menu tree
-            this.tabIndex = -1;
-        }
-
-        this.addChildItem(event.item);
-
-        if (this.selects === 'inherit') {
-            this.resolvedSelects = 'inherit';
-            const ignoreMenu = event.currentAncestorWithSelects?.ignore;
-
-            this.resolvedRole = ignoreMenu
-                ? 'none'
-                : ((event.currentAncestorWithSelects?.getAttribute('role') ||
-                      this.getAttribute('role') ||
-                      undefined) as RoleType);
-        } else if (this.selects) {
-            this.resolvedRole = this.ignore
-                ? 'none'
-                : ((this.getAttribute('role') || undefined) as RoleType);
-            this.resolvedSelects = this.selects;
-        } else {
-            this.resolvedRole = this.ignore
-                ? 'none'
-                : ((this.getAttribute('role') || undefined) as RoleType);
-            this.resolvedSelects =
-                this.resolvedRole === 'none' ? 'ignore' : 'none';
-        }
-
-        const selects =
-            this.resolvedSelects === 'single' ||
-            this.resolvedSelects === 'multiple';
-
-        event.item.menuData.cleanupSteps.push((item: MenuItem) =>
-            this.removeChildItem(item)
-        );
-
-        if (
-            (selects || (!this.selects && this.resolvedSelects !== 'ignore')) &&
-            !event.item.menuData.selectionRoot
-        ) {
-            event.item.setRole(this.childRole);
-            event.item.menuData.selectionRoot =
-                event.item.menuData.selectionRoot || this;
-
-            if (event.item.selected) {
-                this.selectedItemsMap.set(event.item, true);
-                this.selectedItems = [...this.selectedItems, event.item];
-                this._selected = [...this.selected, event.item.value];
-                this.value = this.selected.join(this.valueSeparator);
-            }
-        }
+  }
+
+  protected get ownRole(): string {
+    return "menu";
+  }
+
+  private resolvedSelects?: SelectsType;
+  private resolvedRole?: RoleType;
+
+  /**
+   * When a descendant `` element is added or updated it will dispatch
+   * this event to announce its presence in the DOM. During the CAPTURE phase the first
+   * Menu based element that the event encounters will manage the focus state of the
+   * dispatching `` element.
+   *
+   * @param event - The event dispatched when a descendant  element is added or updated
+   */
+  private onFocusableItemAddedOrUpdated(
+    event: MenuItemAddedOrUpdatedEvent,
+  ): void {
+    event.menuCascade.set(this, {
+      hadFocusRoot: !!event.item.menuData.focusRoot,
+      ancestorWithSelects: event.currentAncestorWithSelects,
+    });
+
+    if (this.selects) {
+      event.currentAncestorWithSelects = this;
     }
 
-    private addChildItem(item: MenuItem): void {
-        this.childItemSet.add(item);
-        this.handleItemsChanged();
+    event.item.menuData.focusRoot = event.item.menuData.focusRoot || this;
+  }
+
+  /**
+   * When a descendant `` element is added or updated it will dispatch
+   * this event to announce its presence in the DOM. During the BUBBLE phase the first
+   * Menu based element that the event encounters that does not inherit selection will
+   * manage the selection state of the dispatching `` element.
+   *
+   * @param event - The event dispatched when a descendant  element is added or updated
+   */
+  private onSelectableItemAddedOrUpdated(
+    event: MenuItemAddedOrUpdatedEvent,
+  ): void {
+    const cascadeData = event.menuCascade.get(this);
+
+    /* c8 ignore next 1 */
+    if (!cascadeData) {
+      return;
     }
 
-    private async removeChildItem(item: MenuItem): Promise {
-        this.childItemSet.delete(item);
-        this.cachedChildItems = undefined;
+    event.item.menuData.parentMenu = event.item.menuData.parentMenu || this;
 
-        if (item.focused) {
-            this.handleItemsChanged();
-            await this.updateComplete;
-            this.focus();
-        }
+    if (cascadeData.hadFocusRoot && !this.ignore) {
+      // Only have one tab stop per Menu tree
+      this.tabIndex = -1;
     }
 
-    public constructor() {
-        super();
-
-        this.addEventListener(
-            'sp-menu-item-added-or-updated',
-            this.onSelectableItemAddedOrUpdated
-        );
-        this.addEventListener(
-            'sp-menu-item-added-or-updated',
-            this.onFocusableItemAddedOrUpdated,
-            {
-                capture: true,
-            }
-        );
+    this.addChildItem(event.item);
+
+    if (this.selects === "inherit") {
+      this.resolvedSelects = "inherit";
+      const ignoreMenu = event.currentAncestorWithSelects?.ignore;
+
+      this.resolvedRole = ignoreMenu
+        ? "none"
+        : ((event.currentAncestorWithSelects?.getAttribute("role") ||
+            this.getAttribute("role") ||
+            undefined) as RoleType);
+    } else if (this.selects) {
+      this.resolvedRole = this.ignore
+        ? "none"
+        : ((this.getAttribute("role") || undefined) as RoleType);
+      this.resolvedSelects = this.selects;
+    } else {
+      this.resolvedRole = this.ignore
+        ? "none"
+        : ((this.getAttribute("role") || undefined) as RoleType);
+      this.resolvedSelects = this.resolvedRole === "none" ? "ignore" : "none";
+    }
 
-        this.addEventListener('click', this.handleClick);
-        this.addEventListener('pointerup', this.handlePointerup);
-        this.addEventListener('focusin', this.handleFocusin);
-        this.addEventListener('blur', this.handleBlur);
-        this.addEventListener('sp-opened', this.handleSubmenuOpened);
-        this.addEventListener('sp-closed', this.handleSubmenuClosed);
+    const selects =
+      this.resolvedSelects === "single" || this.resolvedSelects === "multiple";
+
+    event.item.menuData.cleanupSteps.push((item: MenuItem) =>
+      this.removeChildItem(item),
+    );
+
+    if (
+      (selects || (!this.selects && this.resolvedSelects !== "ignore")) &&
+      !event.item.menuData.selectionRoot
+    ) {
+      event.item.setRole(this.childRole);
+      event.item.menuData.selectionRoot =
+        event.item.menuData.selectionRoot || this;
+
+      if (event.item.selected) {
+        this.selectedItemsMap.set(event.item, true);
+        this.selectedItems = [...this.selectedItems, event.item];
+        this._selected = [...this.selected, event.item.value];
+        this.value = this.selected.join(this.valueSeparator);
+      }
     }
+  }
 
-    public override focus({ preventScroll }: FocusOptions = {}): void {
-        if (
-            !this.childItems.length ||
-            this.childItems.every((childItem) => childItem.disabled)
-        ) {
-            return;
-        }
+  private addChildItem(item: MenuItem): void {
+    this.childItemSet.add(item);
+    this.handleItemsChanged();
+  }
 
-        if (
-            this.childItems.some(
-                (childItem) => childItem.menuData.focusRoot !== this
-            )
-        ) {
-            super.focus({ preventScroll });
+  private async removeChildItem(item: MenuItem): Promise {
+    this.childItemSet.delete(item);
+    this.cachedChildItems = undefined;
 
-            return;
-        }
+    if (item.focused) {
+      this.handleItemsChanged();
+      await this.updateComplete;
+      this.focus();
+    }
+  }
+
+  public constructor() {
+    super();
+
+    this.addEventListener(
+      "sp-menu-item-added-or-updated",
+      this.onSelectableItemAddedOrUpdated,
+    );
+    this.addEventListener(
+      "sp-menu-item-added-or-updated",
+      this.onFocusableItemAddedOrUpdated,
+      {
+        capture: true,
+      },
+    );
+
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("pointerup", this.handlePointerup);
+    this.addEventListener("focusin", this.handleFocusin);
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("sp-opened", this.handleSubmenuOpened);
+    this.addEventListener("sp-closed", this.handleSubmenuClosed);
+  }
+
+  public override focus({ preventScroll }: FocusOptions = {}): void {
+    if (
+      !this.childItems.length ||
+      this.childItems.every((childItem) => childItem.disabled)
+    ) {
+      return;
+    }
 
-        this.focusMenuItemByOffset(0);
-        super.focus({ preventScroll });
-        const selectedItem = this.selectedItems[0];
+    if (
+      this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)
+    ) {
+      super.focus({ preventScroll });
 
-        if (selectedItem && !preventScroll) {
-            selectedItem.scrollIntoView({ block: 'nearest' });
-        }
+      return;
     }
 
-    // if the click and pointerup events are on the same target, we should not
-    // handle the click event.
-    private pointerUpTarget = null as EventTarget | null;
+    this.focusMenuItemByOffset(0);
+    super.focus({ preventScroll });
+    const selectedItem = this.selectedItems[0];
 
-    private handleClick(event: Event): void {
-        if (this.pointerUpTarget === event.target) {
-            this.pointerUpTarget = null;
+    if (selectedItem && !preventScroll) {
+      selectedItem.scrollIntoView({ block: "nearest" });
+    }
+  }
 
-            return;
-        }
+  // if the click and pointerup events are on the same target, we should not
+  // handle the click event.
+  private pointerUpTarget = null as EventTarget | null;
 
-        this.handlePointerBasedSelection(event);
-    }
+  private handleClick(event: Event): void {
+    if (this.pointerUpTarget === event.target) {
+      this.pointerUpTarget = null;
 
-    private handlePointerup(event: Event): void {
-        this.pointerUpTarget = event.target;
-        this.handlePointerBasedSelection(event);
+      return;
     }
 
-    private handlePointerBasedSelection(event: Event): void {
-        // Only handle left clicks
-        if (event instanceof MouseEvent && event.button !== 0) {
-            return;
-        }
+    this.handlePointerBasedSelection(event);
+  }
 
-        const path = event.composedPath();
-        const target = path.find((el) => {
-            /* c8 ignore next 3 */
-            if (!(el instanceof Element)) {
-                return false;
-            }
+  private handlePointerup(event: Event): void {
+    this.pointerUpTarget = event.target;
+    this.handlePointerBasedSelection(event);
+  }
 
-            return el.getAttribute('role') === this.childRole;
-        }) as MenuItem;
+  private handlePointerBasedSelection(event: Event): void {
+    // Only handle left clicks
+    if (event instanceof MouseEvent && event.button !== 0) {
+      return;
+    }
 
-        if (event.defaultPrevented) {
-            const index = this.childItems.indexOf(target);
+    const path = event.composedPath();
+    const target = path.find((el) => {
+      /* c8 ignore next 3 */
+      if (!(el instanceof Element)) {
+        return false;
+      }
 
-            if (target?.menuData?.focusRoot === this && index > -1) {
-                this.focusedItemIndex = index;
-            }
+      return el.getAttribute("role") === this.childRole;
+    }) as MenuItem;
 
-            return;
-        }
+    if (event.defaultPrevented) {
+      const index = this.childItems.indexOf(target);
 
-        if (target?.href && target.href.length) {
-            // This event will NOT ALLOW CANCELATION as link action
-            // cancelation should occur on the `` itself.
-            this.dispatchEvent(
-                new Event('change', {
-                    bubbles: true,
-                    composed: true,
-                })
-            );
-
-            return;
-        } else if (
-            target?.menuData?.selectionRoot === this &&
-            this.childItems.length
-        ) {
-            event.preventDefault();
+      if (target?.menuData?.focusRoot === this && index > -1) {
+        this.focusedItemIndex = index;
+      }
 
-            if (target.hasSubmenu || target.open) {
-                return;
-            }
+      return;
+    }
 
-            this.selectOrToggleItem(target);
-        } else {
-            return;
-        }
+    if (target?.href && target.href.length) {
+      // This event will NOT ALLOW CANCELATION as link action
+      // cancelation should occur on the `` itself.
+      this.dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true,
+        }),
+      );
+
+      return;
+    } else if (
+      target?.menuData?.selectionRoot === this &&
+      this.childItems.length
+    ) {
+      event.preventDefault();
+
+      if (target.hasSubmenu || target.open) {
+        return;
+      }
 
-        this.prepareToCleanUp();
+      this.selectOrToggleItem(target);
+    } else {
+      return;
     }
 
-    public handleFocusin(event: FocusEvent): void {
-        if (
-            this.childItems.some(
-                (childItem) => childItem.menuData.focusRoot !== this
-            )
-        ) {
-            return;
-        }
+    this.prepareToCleanUp();
+  }
 
-        const activeElement = (this.getRootNode() as Document).activeElement as
-            | MenuItem
-            | Menu;
-        const selectionRoot =
-            this.childItems[this.focusedItemIndex]?.menuData.selectionRoot ||
-            this;
+  public handleFocusin(event: FocusEvent): void {
+    if (
+      this.childItems.some((childItem) => childItem.menuData.focusRoot !== this)
+    ) {
+      return;
+    }
 
-        if (activeElement !== selectionRoot || event.target !== this) {
-            selectionRoot.focus({ preventScroll: true });
+    const activeElement = (this.getRootNode() as Document).activeElement as
+      | MenuItem
+      | Menu;
+    const selectionRoot =
+      this.childItems[this.focusedItemIndex]?.menuData.selectionRoot || this;
 
-            if (activeElement && this.focusedItemIndex === 0) {
-                const offset = this.childItems.findIndex(
-                    (childItem) => childItem === activeElement
-                );
+    if (activeElement !== selectionRoot || event.target !== this) {
+      selectionRoot.focus({ preventScroll: true });
 
-                this.focusMenuItemByOffset(Math.max(offset, 0));
-            }
-        }
+      if (activeElement && this.focusedItemIndex === 0) {
+        const offset = this.childItems.findIndex(
+          (childItem) => childItem === activeElement,
+        );
 
-        this.startListeningToKeyboard();
+        this.focusMenuItemByOffset(Math.max(offset, 0));
+      }
     }
 
-    public startListeningToKeyboard(): void {
-        this.addEventListener('keydown', this.handleKeydown);
-    }
+    this.startListeningToKeyboard();
+  }
 
-    public handleBlur(event: FocusEvent): void {
-        if (elementIsOrContains(this, event.relatedTarget as Node)) {
-            return;
-        }
+  public startListeningToKeyboard(): void {
+    this.addEventListener("keydown", this.handleKeydown);
+  }
 
-        this.stopListeningToKeyboard();
-        this.childItems.forEach((child) => (child.focused = false));
-        this.removeAttribute('aria-activedescendant');
+  public handleBlur(event: FocusEvent): void {
+    if (elementIsOrContains(this, event.relatedTarget as Node)) {
+      return;
     }
 
-    public stopListeningToKeyboard(): void {
-        this.removeEventListener('keydown', this.handleKeydown);
-    }
+    this.stopListeningToKeyboard();
+    this.childItems.forEach((child) => (child.focused = false));
+    this.removeAttribute("aria-activedescendant");
+  }
 
-    private descendentOverlays = new Map();
+  public stopListeningToKeyboard(): void {
+    this.removeEventListener("keydown", this.handleKeydown);
+  }
 
-    protected handleDescendentOverlayOpened(event: Event): void {
-        const target = event.composedPath()[0] as MenuItem;
+  private descendentOverlays = new Map();
 
-        /* c8 ignore next 1 */
-        if (!target.overlayElement) return;
+  protected handleDescendentOverlayOpened(event: Event): void {
+    const target = event.composedPath()[0] as MenuItem;
 
-        this.descendentOverlays.set(
-            target.overlayElement,
-            target.overlayElement
-        );
+    /* c8 ignore next 1 */
+    if (!target.overlayElement) {
+      return;
     }
 
-    protected handleDescendentOverlayClosed(event: Event): void {
-        const target = event.composedPath()[0] as MenuItem;
+    this.descendentOverlays.set(target.overlayElement, target.overlayElement);
+  }
 
-        /* c8 ignore next 1 */
-        if (!target.overlayElement) return;
+  protected handleDescendentOverlayClosed(event: Event): void {
+    const target = event.composedPath()[0] as MenuItem;
 
-        this.descendentOverlays.delete(target.overlayElement);
+    /* c8 ignore next 1 */
+    if (!target.overlayElement) {
+      return;
     }
 
-    public handleSubmenuClosed = (event: Event): void => {
-        event.stopPropagation();
-        const target = event.composedPath()[0] as Overlay;
-
-        target.dispatchEvent(
-            new Event('sp-menu-submenu-closed', {
-                bubbles: true,
-                composed: true,
-            })
-        );
-    };
-
-    public handleSubmenuOpened = (event: Event): void => {
-        event.stopPropagation();
-        const target = event.composedPath()[0] as Overlay;
-
-        target.dispatchEvent(
-            new Event('sp-menu-submenu-opened', {
-                bubbles: true,
-                composed: true,
-            })
-        );
-        const focusedItem = this.childItems[this.focusedItemIndex];
+    this.descendentOverlays.delete(target.overlayElement);
+  }
+
+  public handleSubmenuClosed = (event: Event): void => {
+    event.stopPropagation();
+    const target = event.composedPath()[0] as Overlay;
+
+    target.dispatchEvent(
+      new Event("sp-menu-submenu-closed", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  public handleSubmenuOpened = (event: Event): void => {
+    event.stopPropagation();
+    const target = event.composedPath()[0] as Overlay;
+
+    target.dispatchEvent(
+      new Event("sp-menu-submenu-opened", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    const focusedItem = this.childItems[this.focusedItemIndex];
+
+    if (focusedItem) {
+      focusedItem.focused = false;
+    }
 
-        if (focusedItem) {
-            focusedItem.focused = false;
-        }
+    const openedItem = event
+      .composedPath()
+      .find((el) => this.childItemSet.has(el as MenuItem));
 
-        const openedItem = event
-            .composedPath()
-            .find((el) => this.childItemSet.has(el as MenuItem));
+    /* c8 ignore next 1 */
+    if (!openedItem) {
+      return;
+    }
 
-        /* c8 ignore next 1 */
-        if (!openedItem) return;
+    const openedItemIndex = this.childItems.indexOf(openedItem as MenuItem);
 
-        const openedItemIndex = this.childItems.indexOf(openedItem as MenuItem);
+    this.focusedItemIndex = openedItemIndex;
+    this.focusInItemIndex = openedItemIndex;
+  };
 
-        this.focusedItemIndex = openedItemIndex;
-        this.focusInItemIndex = openedItemIndex;
-    };
+  public async selectOrToggleItem(targetItem: MenuItem): Promise {
+    const resolvedSelects = this.resolvedSelects;
+    const oldSelectedItemsMap = new Map(this.selectedItemsMap);
+    const oldSelected = this.selected.slice();
+    const oldSelectedItems = this.selectedItems.slice();
+    const oldValue = this.value;
+    const focusedChild = this.childItems[this.focusedItemIndex];
 
-    public async selectOrToggleItem(targetItem: MenuItem): Promise {
-        const resolvedSelects = this.resolvedSelects;
-        const oldSelectedItemsMap = new Map(this.selectedItemsMap);
-        const oldSelected = this.selected.slice();
-        const oldSelectedItems = this.selectedItems.slice();
-        const oldValue = this.value;
-        const focusedChild = this.childItems[this.focusedItemIndex];
+    if (focusedChild) {
+      focusedChild.focused = false;
+      focusedChild.active = false;
+    }
 
-        if (focusedChild) {
-            focusedChild.focused = false;
-            focusedChild.active = false;
+    this.focusedItemIndex = this.childItems.indexOf(targetItem);
+    this.forwardFocusVisibleToItem(targetItem);
+
+    if (resolvedSelects === "multiple") {
+      if (this.selectedItemsMap.has(targetItem)) {
+        this.selectedItemsMap.delete(targetItem);
+      } else {
+        this.selectedItemsMap.set(targetItem, true);
+      }
+
+      // Match HTML select and set the first selected
+      // item as the value. Also set the selected array
+      // in the order of the menu items.
+      const selected: string[] = [];
+      const selectedItems: MenuItem[] = [];
+
+      this.childItemSet.forEach((childItem) => {
+        if (childItem.menuData.selectionRoot !== this) {
+          return;
         }
 
-        this.focusedItemIndex = this.childItems.indexOf(targetItem);
-        this.forwardFocusVisibleToItem(targetItem);
-
-        if (resolvedSelects === 'multiple') {
-            if (this.selectedItemsMap.has(targetItem)) {
-                this.selectedItemsMap.delete(targetItem);
-            } else {
-                this.selectedItemsMap.set(targetItem, true);
-            }
-
-            // Match HTML select and set the first selected
-            // item as the value. Also set the selected array
-            // in the order of the menu items.
-            const selected: string[] = [];
-            const selectedItems: MenuItem[] = [];
-
-            this.childItemSet.forEach((childItem) => {
-                if (childItem.menuData.selectionRoot !== this) return;
-
-                if (this.selectedItemsMap.has(childItem)) {
-                    selected.push(childItem.value);
-                    selectedItems.push(childItem);
-                }
-            });
-            this._selected = selected;
-            this.selectedItems = selectedItems;
-            this.value = this.selected.join(this.valueSeparator);
-        } else {
-            this.selectedItemsMap.clear();
-            this.selectedItemsMap.set(targetItem, true);
-            this.value = targetItem.value;
-            this._selected = [targetItem.value];
-            this.selectedItems = [targetItem];
+        if (this.selectedItemsMap.has(childItem)) {
+          selected.push(childItem.value);
+          selectedItems.push(childItem);
         }
+      });
+      this._selected = selected;
+      this.selectedItems = selectedItems;
+      this.value = this.selected.join(this.valueSeparator);
+    } else {
+      this.selectedItemsMap.clear();
+      this.selectedItemsMap.set(targetItem, true);
+      this.value = targetItem.value;
+      this._selected = [targetItem.value];
+      this.selectedItems = [targetItem];
+    }
 
-        const applyDefault = this.dispatchEvent(
-            new Event('change', {
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-
-        if (!applyDefault) {
-            // Cancel the event & don't apply the selection
-            this._selected = oldSelected;
-            this.selectedItems = oldSelectedItems;
-            this.selectedItemsMap = oldSelectedItemsMap;
-            this.value = oldValue;
-
-            return;
-        }
+    const applyDefault = this.dispatchEvent(
+      new Event("change", {
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    if (!applyDefault) {
+      // Cancel the event & don't apply the selection
+      this._selected = oldSelected;
+      this.selectedItems = oldSelectedItems;
+      this.selectedItemsMap = oldSelectedItemsMap;
+      this.value = oldValue;
+
+      return;
+    }
 
-        // Apply the selection changes to the menu items
-        if (resolvedSelects === 'single') {
-            for (const oldItem of oldSelectedItemsMap.keys()) {
-                if (oldItem !== targetItem) {
-                    oldItem.selected = false;
-                }
-            }
-            targetItem.selected = true;
-        } else if (resolvedSelects === 'multiple') {
-            targetItem.selected = !targetItem.selected;
+    // Apply the selection changes to the menu items
+    if (resolvedSelects === "single") {
+      for (const oldItem of oldSelectedItemsMap.keys()) {
+        if (oldItem !== targetItem) {
+          oldItem.selected = false;
         }
+      }
+      targetItem.selected = true;
+    } else if (resolvedSelects === "multiple") {
+      targetItem.selected = !targetItem.selected;
     }
+  }
 
-    protected navigateWithinMenu(event: KeyboardEvent): void {
-        const { key } = event;
-        const lastFocusedItem = this.childItems[this.focusedItemIndex];
-        const direction = key === 'ArrowDown' ? 1 : -1;
-        const itemToFocus = this.focusMenuItemByOffset(direction);
-
-        if (itemToFocus === lastFocusedItem) {
-            return;
-        }
+  protected navigateWithinMenu(event: KeyboardEvent): void {
+    const { key } = event;
+    const lastFocusedItem = this.childItems[this.focusedItemIndex];
+    const direction = key === "ArrowDown" ? 1 : -1;
+    const itemToFocus = this.focusMenuItemByOffset(direction);
 
-        event.preventDefault();
-        event.stopPropagation();
-        itemToFocus.scrollIntoView({ block: 'nearest' });
+    if (itemToFocus === lastFocusedItem) {
+      return;
     }
 
-    protected navigateBetweenRelatedMenus(event: KeyboardEvent): void {
-        const { key } = event;
-
-        event.stopPropagation();
-        const shouldOpenSubmenu =
-            (this.isLTR && key === 'ArrowRight') ||
-            (!this.isLTR && key === 'ArrowLeft');
-        const shouldCloseSelfAsSubmenu =
-            (this.isLTR && key === 'ArrowLeft') ||
-            (!this.isLTR && key === 'ArrowRight');
-
-        if (shouldOpenSubmenu) {
-            const lastFocusedItem = this.childItems[this.focusedItemIndex];
-
-            if (lastFocusedItem?.hasSubmenu) {
-                // Remove focus while opening overlay from keyboard or the visible focus
-                // will slip back to the first item in the menu.
-                lastFocusedItem.openOverlay();
-            }
-        } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
-            this.dispatchEvent(new Event('close', { bubbles: true }));
-            this.updateSelectedItemIndex();
-        }
+    event.preventDefault();
+    event.stopPropagation();
+    itemToFocus.scrollIntoView({ block: "nearest" });
+  }
+
+  protected navigateBetweenRelatedMenus(event: KeyboardEvent): void {
+    const { key } = event;
+
+    event.stopPropagation();
+    const shouldOpenSubmenu =
+      (this.isLTR && key === "ArrowRight") ||
+      (!this.isLTR && key === "ArrowLeft");
+    const shouldCloseSelfAsSubmenu =
+      (this.isLTR && key === "ArrowLeft") ||
+      (!this.isLTR && key === "ArrowRight");
+
+    if (shouldOpenSubmenu) {
+      const lastFocusedItem = this.childItems[this.focusedItemIndex];
+
+      if (lastFocusedItem?.hasSubmenu) {
+        // Remove focus while opening overlay from keyboard or the visible focus
+        // will slip back to the first item in the menu.
+        lastFocusedItem.openOverlay();
+      }
+    } else if (shouldCloseSelfAsSubmenu && this.isSubmenu) {
+      this.dispatchEvent(new Event("close", { bubbles: true }));
+      this.updateSelectedItemIndex();
     }
+  }
 
-    public handleKeydown(event: KeyboardEvent): void {
-        if (event.defaultPrevented) {
-            return;
-        }
+  public handleKeydown(event: KeyboardEvent): void {
+    if (event.defaultPrevented) {
+      return;
+    }
 
-        const lastFocusedItem = this.childItems[this.focusedItemIndex];
+    const lastFocusedItem = this.childItems[this.focusedItemIndex];
 
-        if (lastFocusedItem) {
-            lastFocusedItem.focused = true;
-        }
+    if (lastFocusedItem) {
+      lastFocusedItem.focused = true;
+    }
 
-        const { key } = event;
+    const { key } = event;
 
+    if (
+      event.shiftKey &&
+      event.target !== this &&
+      this.hasAttribute("tabindex")
+    ) {
+      this.removeAttribute("tabindex");
+      const replaceTabindex = (event: FocusEvent | KeyboardEvent): void => {
         if (
-            event.shiftKey &&
-            event.target !== this &&
-            this.hasAttribute('tabindex')
+          !(event as KeyboardEvent).shiftKey &&
+          !this.hasAttribute("tabindex")
         ) {
-            this.removeAttribute('tabindex');
-            const replaceTabindex = (
-                event: FocusEvent | KeyboardEvent
-            ): void => {
-                if (
-                    !(event as KeyboardEvent).shiftKey &&
-                    !this.hasAttribute('tabindex')
-                ) {
-                    this.tabIndex = 0;
-                    document.removeEventListener('keyup', replaceTabindex);
-                    this.removeEventListener('focusout', replaceTabindex);
-                }
-            };
-
-            document.addEventListener('keyup', replaceTabindex);
-            this.addEventListener('focusout', replaceTabindex);
+          this.tabIndex = 0;
+          document.removeEventListener("keyup", replaceTabindex);
+          this.removeEventListener("focusout", replaceTabindex);
         }
+      };
 
-        if (key === 'Tab') {
-            this.prepareToCleanUp();
+      document.addEventListener("keyup", replaceTabindex);
+      this.addEventListener("focusout", replaceTabindex);
+    }
 
-            return;
-        }
+    if (key === "Tab") {
+      this.prepareToCleanUp();
 
-        if (key === ' ') {
-            if (lastFocusedItem?.hasSubmenu) {
-                // Remove focus while opening overlay from keyboard or the visible focus
-                // will slip back to the first item in the menu.
-                // this.blur();
-                lastFocusedItem.openOverlay();
+      return;
+    }
 
-                return;
-            }
-        }
+    if (key === " ") {
+      if (lastFocusedItem?.hasSubmenu) {
+        // Remove focus while opening overlay from keyboard or the visible focus
+        // will slip back to the first item in the menu.
+        // this.blur();
+        lastFocusedItem.openOverlay();
 
-        if (key === ' ' || key === 'Enter') {
-            const childItem = this.childItems[this.focusedItemIndex];
+        return;
+      }
+    }
 
-            if (
-                childItem &&
-                childItem.menuData.selectionRoot === event.target
-            ) {
-                event.preventDefault();
-                childItem.click();
-            }
+    if (key === " " || key === "Enter") {
+      const childItem = this.childItems[this.focusedItemIndex];
 
-            return;
-        }
+      if (childItem && childItem.menuData.selectionRoot === event.target) {
+        event.preventDefault();
+        childItem.click();
+      }
 
-        if (key === 'ArrowDown' || key === 'ArrowUp') {
-            const childItem = this.childItems[this.focusedItemIndex];
+      return;
+    }
 
-            if (
-                childItem &&
-                childItem.menuData.selectionRoot === event.target
-            ) {
-                this.navigateWithinMenu(event);
-            }
+    if (key === "ArrowDown" || key === "ArrowUp") {
+      const childItem = this.childItems[this.focusedItemIndex];
 
-            return;
-        }
+      if (childItem && childItem.menuData.selectionRoot === event.target) {
+        this.navigateWithinMenu(event);
+      }
 
-        this.navigateBetweenRelatedMenus(event);
+      return;
     }
 
-    public focusMenuItemByOffset(offset: number): MenuItem {
-        const step = offset || 1;
-        const focusedItem = this.childItems[this.focusedItemIndex];
+    this.navigateBetweenRelatedMenus(event);
+  }
 
-        if (focusedItem) {
-            focusedItem.focused = false;
-            // Remain active while a submenu is opened.
-            focusedItem.active = focusedItem.open;
-        }
+  public focusMenuItemByOffset(offset: number): MenuItem {
+    const step = offset || 1;
+    const focusedItem = this.childItems[this.focusedItemIndex];
 
-        this.focusedItemIndex =
-            (this.childItems.length + this.focusedItemIndex + offset) %
-            this.childItems.length;
-        let itemToFocus = this.childItems[this.focusedItemIndex];
-        let availableItems = this.childItems.length;
-
-        // cycle through the available items in the directions of the offset to find the next non-disabled item
-        while (itemToFocus?.disabled && availableItems) {
-            availableItems -= 1;
-            this.focusedItemIndex =
-                (this.childItems.length + this.focusedItemIndex + step) %
-                this.childItems.length;
-            itemToFocus = this.childItems[this.focusedItemIndex];
-        }
-
-        // if there are no non-disabled items, skip the work to focus a child
-        if (!itemToFocus?.disabled) {
-            this.forwardFocusVisibleToItem(itemToFocus);
-        }
-
-        return itemToFocus;
+    if (focusedItem) {
+      focusedItem.focused = false;
+      // Remain active while a submenu is opened.
+      focusedItem.active = focusedItem.open;
     }
 
-    private prepareToCleanUp(): void {
-        document.addEventListener(
-            'focusout',
-            () => {
-                requestAnimationFrame(() => {
-                    const focusedItem = this.childItems[this.focusedItemIndex];
-
-                    if (focusedItem) {
-                        focusedItem.focused = false;
-                        this.updateSelectedItemIndex();
-                    }
-                });
-            },
-            { once: true }
-        );
+    this.focusedItemIndex =
+      (this.childItems.length + this.focusedItemIndex + offset) %
+      this.childItems.length;
+    let itemToFocus = this.childItems[this.focusedItemIndex];
+    let availableItems = this.childItems.length;
+
+    // cycle through the available items in the directions of the offset to find the next non-disabled item
+    while (itemToFocus?.disabled && availableItems) {
+      availableItems -= 1;
+      this.focusedItemIndex =
+        (this.childItems.length + this.focusedItemIndex + step) %
+        this.childItems.length;
+      itemToFocus = this.childItems[this.focusedItemIndex];
     }
 
-    private _hasUpdatedSelectedItemIndex = false;
-
-    public updateSelectedItemIndex(): void {
-        let firstOrFirstSelectedIndex = 0;
-        const selectedItemsMap = new Map();
-        const selected: string[] = [];
-        const selectedItems: MenuItem[] = [];
-        let itemIndex = this.childItems.length;
-
-        while (itemIndex) {
-            itemIndex -= 1;
-            const childItem = this.childItems[itemIndex];
-
-            if (childItem.menuData.selectionRoot === this) {
-                if (
-                    childItem.selected ||
-                    (!this._hasUpdatedSelectedItemIndex &&
-                        this.selected.includes(childItem.value))
-                ) {
-                    firstOrFirstSelectedIndex = itemIndex;
-                    selectedItemsMap.set(childItem, true);
-                    selected.unshift(childItem.value);
-                    selectedItems.unshift(childItem);
-                }
-
-                // Remove "focused" from non-"selected" items ONLY
-                // Preserve "focused" on index===0 when no selection
-                if (itemIndex !== firstOrFirstSelectedIndex) {
-                    childItem.focused = false;
-                }
-            }
-        }
-        selectedItems.map((item, i) => {
-            // When there is more than one "selected" item,
-            // ensure only the first one can be "focused"
-            if (i > 0) {
-                item.focused = false;
-            }
-        });
-        this.selectedItemsMap = selectedItemsMap;
-        this._selected = selected;
-        this.selectedItems = selectedItems;
-        this.value = this.selected.join(this.valueSeparator);
-        this.focusedItemIndex = firstOrFirstSelectedIndex;
-        this.focusInItemIndex = firstOrFirstSelectedIndex;
+    // if there are no non-disabled items, skip the work to focus a child
+    if (!itemToFocus?.disabled) {
+      this.forwardFocusVisibleToItem(itemToFocus);
     }
 
-    private _willUpdateItems = false;
+    return itemToFocus;
+  }
 
-    private handleItemsChanged(): void {
-        this.cachedChildItems = undefined;
+  private prepareToCleanUp(): void {
+    document.addEventListener(
+      "focusout",
+      () => {
+        requestAnimationFrame(() => {
+          const focusedItem = this.childItems[this.focusedItemIndex];
 
-        if (!this._willUpdateItems) {
-            this._willUpdateItems = true;
-            this.cacheUpdated = this.updateCache();
-        }
-    }
-
-    private async updateCache(): Promise {
-        if (!this.hasUpdated) {
-            await Promise.all([
-                new Promise((res) => requestAnimationFrame(() => res(true))),
-                this.updateComplete,
-            ]);
-        } else {
-            await new Promise((res) => requestAnimationFrame(() => res(true)));
-        }
-
-        if (this.cachedChildItems === undefined) {
+          if (focusedItem) {
+            focusedItem.focused = false;
             this.updateSelectedItemIndex();
-            this.updateItemFocus();
-        }
-
-        this._willUpdateItems = false;
-    }
-
-    private updateItemFocus(): void {
-        if (this.childItems.length == 0) {
-            return;
-        }
-
-        const focusInItem = this.childItems[this.focusInItemIndex];
-
-        if (
-            (this.getRootNode() as Document).activeElement ===
-            focusInItem.menuData.focusRoot
-        ) {
-            this.forwardFocusVisibleToItem(focusInItem);
-        }
-    }
-
-    public closeDescendentOverlays(): void {
-        this.descendentOverlays.forEach((overlay) => {
-            overlay.open = false;
+          }
         });
-        this.descendentOverlays = new Map();
-    }
+      },
+      { once: true },
+    );
+  }
 
-    private forwardFocusVisibleToItem(item: MenuItem): void {
-        if (!item || item.menuData.focusRoot !== this) {
-            return;
-        }
+  private _hasUpdatedSelectedItemIndex = false;
 
-        this.closeDescendentOverlays();
-        const focused =
-            this.hasVisibleFocusInTree() ||
-            !!this.childItems.find((child) => {
-                return child.hasVisibleFocusInTree();
-            });
+  public updateSelectedItemIndex(): void {
+    let firstOrFirstSelectedIndex = 0;
+    const selectedItemsMap = new Map();
+    const selected: string[] = [];
+    const selectedItems: MenuItem[] = [];
+    let itemIndex = this.childItems.length;
 
-        item.focused = focused;
-        this.setAttribute('aria-activedescendant', item.id);
+    while (itemIndex) {
+      itemIndex -= 1;
+      const childItem = this.childItems[itemIndex];
 
+      if (childItem.menuData.selectionRoot === this) {
         if (
-            item.menuData.selectionRoot &&
-            item.menuData.selectionRoot !== this
+          childItem.selected ||
+          (!this._hasUpdatedSelectedItemIndex &&
+            this.selected.includes(childItem.value))
         ) {
-            item.menuData.selectionRoot.focus();
+          firstOrFirstSelectedIndex = itemIndex;
+          selectedItemsMap.set(childItem, true);
+          selected.unshift(childItem.value);
+          selectedItems.unshift(childItem);
         }
-    }
 
-    private handleSlotchange({
-        target,
-    }: Event & { target: HTMLSlotElement }): void {
-        const assignedElements = target.assignedElements({
-            flatten: true,
-        }) as MenuItem[];
-
-        if (this.childItems.length !== assignedElements.length) {
-            assignedElements.forEach((item) => {
-                if (typeof item.triggerUpdate !== 'undefined') {
-                    item.triggerUpdate();
-                } else if (
-                    typeof (item as unknown as Menu).childItems !== 'undefined'
-                ) {
-                    (item as unknown as Menu).childItems.forEach((child) => {
-                        child.triggerUpdate();
-                    });
-                }
-            });
+        // Remove "focused" from non-"selected" items ONLY
+        // Preserve "focused" on index===0 when no selection
+        if (itemIndex !== firstOrFirstSelectedIndex) {
+          childItem.focused = false;
         }
+      }
     }
-
-    protected renderMenuItemSlot(): TemplateResult {
-        return html`
-            
-        `;
+    selectedItems.map((item, i) => {
+      // When there is more than one "selected" item,
+      // ensure only the first one can be "focused"
+      if (i > 0) {
+        item.focused = false;
+      }
+    });
+    this.selectedItemsMap = selectedItemsMap;
+    this._selected = selected;
+    this.selectedItems = selectedItems;
+    this.value = this.selected.join(this.valueSeparator);
+    this.focusedItemIndex = firstOrFirstSelectedIndex;
+    this.focusInItemIndex = firstOrFirstSelectedIndex;
+  }
+
+  private _willUpdateItems = false;
+
+  private handleItemsChanged(): void {
+    this.cachedChildItems = undefined;
+
+    if (!this._willUpdateItems) {
+      this._willUpdateItems = true;
+      this.cacheUpdated = this.updateCache();
     }
-
-    public override render(): TemplateResult {
-        return this.renderMenuItemSlot();
+  }
+
+  private async updateCache(): Promise {
+    if (!this.hasUpdated) {
+      await Promise.all([
+        new Promise((res) => requestAnimationFrame(() => res(true))),
+        this.updateComplete,
+      ]);
+    } else {
+      await new Promise((res) => requestAnimationFrame(() => res(true)));
     }
 
-    protected override firstUpdated(changed: PropertyValues): void {
-        super.firstUpdated(changed);
+    if (this.cachedChildItems === undefined) {
+      this.updateSelectedItemIndex();
+      this.updateItemFocus();
+    }
 
-        if (!this.hasAttribute('tabindex') && !this.ignore) {
-            const role = this.getAttribute('role');
+    this._willUpdateItems = false;
+  }
 
-            if (role === 'group') {
-                this.tabIndex = -1;
-            } else {
-                this.tabIndex = 0;
-            }
-        }
+  private updateItemFocus(): void {
+    if (this.childItems.length == 0) {
+      return;
+    }
 
-        const updates: Promise[] = [
-            new Promise((res) => requestAnimationFrame(() => res(true))),
-        ];
+    const focusInItem = this.childItems[this.focusInItemIndex];
 
-        [...this.children].forEach((item) => {
-            if ((item as MenuItem).localName === 'sp-menu-item') {
-                updates.push((item as MenuItem).updateComplete);
-            }
-        });
-        this.childItemsUpdated = Promise.all(updates);
+    if (
+      (this.getRootNode() as Document).activeElement ===
+      focusInItem.menuData.focusRoot
+    ) {
+      this.forwardFocusVisibleToItem(focusInItem);
+    }
+  }
+
+  public closeDescendentOverlays(): void {
+    this.descendentOverlays.forEach((overlay) => {
+      overlay.open = false;
+    });
+    this.descendentOverlays = new Map();
+  }
+
+  private forwardFocusVisibleToItem(item: MenuItem): void {
+    if (!item || item.menuData.focusRoot !== this) {
+      return;
     }
 
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
+    this.closeDescendentOverlays();
+    const focused =
+      this.hasVisibleFocusInTree() ||
+      !!this.childItems.find((child) => {
+        return child.hasVisibleFocusInTree();
+      });
 
-        if (changes.has('selects') && this.hasUpdated) {
-            this.selectsChanged();
-        }
+    item.focused = focused;
+    this.setAttribute("aria-activedescendant", item.id);
 
-        if (
-            changes.has('label') &&
-            (this.label || typeof changes.get('label') !== 'undefined')
+    if (item.menuData.selectionRoot && item.menuData.selectionRoot !== this) {
+      item.menuData.selectionRoot.focus();
+    }
+  }
+
+  private handleSlotchange({
+    target,
+  }: Event & { target: HTMLSlotElement }): void {
+    const assignedElements = target.assignedElements({
+      flatten: true,
+    }) as MenuItem[];
+
+    if (this.childItems.length !== assignedElements.length) {
+      assignedElements.forEach((item) => {
+        if (typeof item.triggerUpdate !== "undefined") {
+          item.triggerUpdate();
+        } else if (
+          typeof (item as unknown as Menu).childItems !== "undefined"
         ) {
-            if (this.label) {
-                this.setAttribute('aria-label', this.label);
-                /* c8 ignore next 3 */
-            } else {
-                this.removeAttribute('aria-label');
-            }
+          (item as unknown as Menu).childItems.forEach((child) => {
+            child.triggerUpdate();
+          });
         }
+      });
     }
-
-    protected selectsChanged(): void {
-        const updates: Promise[] = [
-            new Promise((res) => requestAnimationFrame(() => res(true))),
-        ];
-
-        this.childItemSet.forEach((childItem) => {
-            updates.push(childItem.triggerUpdate());
-        });
-        this.childItemsUpdated = Promise.all(updates);
+  }
+
+  protected renderMenuItemSlot(): TemplateResult {
+    return html`
+      
+    `;
+  }
+
+  public override render(): TemplateResult {
+    return this.renderMenuItemSlot();
+  }
+
+  protected override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+
+    if (!this.hasAttribute("tabindex") && !this.ignore) {
+      const role = this.getAttribute("role");
+
+      if (role === "group") {
+        this.tabIndex = -1;
+      } else {
+        this.tabIndex = 0;
+      }
     }
 
-    public override connectedCallback(): void {
-        super.connectedCallback();
+    const updates: Promise[] = [
+      new Promise((res) => requestAnimationFrame(() => res(true))),
+    ];
 
-        if (!this.hasAttribute('role') && !this.ignore) {
-            this.setAttribute('role', this.ownRole);
-        }
+    [...this.children].forEach((item) => {
+      if ((item as MenuItem).localName === "sp-menu-item") {
+        updates.push((item as MenuItem).updateComplete);
+      }
+    });
+    this.childItemsUpdated = Promise.all(updates);
+  }
+
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
 
-        this.updateComplete.then(() => this.updateItemFocus());
+    if (changes.has("selects") && this.hasUpdated) {
+      this.selectsChanged();
     }
 
-    public override disconnectedCallback(): void {
-        this.cachedChildItems = undefined;
-        this.selectedItems = [];
-        this.selectedItemsMap.clear();
-        this.childItemSet.clear();
-        this.descendentOverlays = new Map();
-        super.disconnectedCallback();
+    if (
+      changes.has("label") &&
+      (this.label || typeof changes.get("label") !== "undefined")
+    ) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+        /* c8 ignore next 3 */
+      } else {
+        this.removeAttribute("aria-label");
+      }
     }
+  }
 
-    protected childItemsUpdated!: Promise;
-    protected cacheUpdated = Promise.resolve();
-    /* c8 ignore next 3 */
-    protected resolveCacheUpdated = (): void => {
-        return;
-    };
+  protected selectsChanged(): void {
+    const updates: Promise[] = [
+      new Promise((res) => requestAnimationFrame(() => res(true))),
+    ];
 
-    protected override async getUpdateComplete(): Promise {
-        const complete = (await super.getUpdateComplete()) as boolean;
+    this.childItemSet.forEach((childItem) => {
+      updates.push(childItem.triggerUpdate());
+    });
+    this.childItemsUpdated = Promise.all(updates);
+  }
 
-        await this.childItemsUpdated;
-        await this.cacheUpdated;
+  public override connectedCallback(): void {
+    super.connectedCallback();
 
-        return complete;
+    if (!this.hasAttribute("role") && !this.ignore) {
+      this.setAttribute("role", this.ownRole);
     }
+
+    this.updateComplete.then(() => this.updateItemFocus());
+  }
+
+  public override disconnectedCallback(): void {
+    this.cachedChildItems = undefined;
+    this.selectedItems = [];
+    this.selectedItemsMap.clear();
+    this.childItemSet.clear();
+    this.descendentOverlays = new Map();
+    super.disconnectedCallback();
+  }
+
+  protected childItemsUpdated!: Promise;
+  protected cacheUpdated = Promise.resolve();
+  /* c8 ignore next 3 */
+  protected resolveCacheUpdated = (): void => {
+    return;
+  };
+
+  protected override async getUpdateComplete(): Promise {
+    const complete = (await super.getUpdateComplete()) as boolean;
+
+    await this.childItemsUpdated;
+    await this.cacheUpdated;
+
+    return complete;
+  }
 }
diff --git a/packages/menu/src/MenuDivider.ts b/packages/menu/src/MenuDivider.ts
index 8c128301d8..f55e69fee5 100644
--- a/packages/menu/src/MenuDivider.ts
+++ b/packages/menu/src/MenuDivider.ts
@@ -11,27 +11,27 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    PropertyValues,
-    SizedMixin,
-    SpectrumElement,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+} from "@spectrum-web-components/base";
 
-import menuDividerStyles from './menu-divider.css.js';
-import dividerStyles from '@spectrum-web-components/divider/src/divider.css.js';
+import menuDividerStyles from "./menu-divider.css.js";
+import dividerStyles from "@spectrum-web-components/divider/src/divider.css.js";
 
 /**
  * @element sp-menu-divider
  */
 export class MenuDivider extends SizedMixin(SpectrumElement, {
-    validSizes: ['s', 'm', 'l'],
+  validSizes: ["s", "m", "l"],
 }) {
-    public static override get styles(): CSSResultArray {
-        return [dividerStyles, menuDividerStyles];
-    }
+  public static override get styles(): CSSResultArray {
+    return [dividerStyles, menuDividerStyles];
+  }
 
-    protected override firstUpdated(changed: PropertyValues): void {
-        super.firstUpdated(changed);
-        this.setAttribute('role', 'separator');
-    }
+  protected override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+    this.setAttribute("role", "separator");
+  }
 }
diff --git a/packages/menu/src/MenuGroup.ts b/packages/menu/src/MenuGroup.ts
index fc2b04f07b..63e2e9590d 100644
--- a/packages/menu/src/MenuGroup.ts
+++ b/packages/menu/src/MenuGroup.ts
@@ -11,20 +11,20 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    queryAssignedNodes,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
+  queryAssignedNodes,
+  state,
+} from "@spectrum-web-components/base/src/decorators.js";
+import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
 
-import { Menu } from './Menu.js';
+import { Menu } from "./Menu.js";
 // Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225
-import '@spectrum-web-components/menu/sp-menu.js';
-import menuGroupStyles from './menu-group.css.js';
+import "@spectrum-web-components/menu/sp-menu.js";
+import menuGroupStyles from "./menu-group.css.js";
 
 /**
  * @element sp-menu-group
@@ -33,66 +33,65 @@ import menuGroupStyles from './menu-group.css.js';
  * @slot - menu items to be listed in the group
  */
 export class MenuGroup extends Menu {
-    public static override get styles(): CSSResultArray {
-        return [...super.styles, menuGroupStyles];
-    }
+  public static override get styles(): CSSResultArray {
+    return [...super.styles, menuGroupStyles];
+  }
 
-    private headerId = '';
+  private headerId = "";
 
-    @queryAssignedNodes({
-        slot: 'header',
-        flatten: true,
-    })
-    private headerElements!: NodeListOf;
+  @queryAssignedNodes({
+    slot: "header",
+    flatten: true,
+  })
+  private headerElements!: NodeListOf;
 
-    @state()
-    private headerElement?: HTMLElement;
+  @state()
+  private headerElement?: HTMLElement;
 
-    protected override get ownRole(): string {
-        switch (this.selects) {
-            case 'multiple':
-            case 'single':
-            case 'inherit':
-                return 'group';
-            default:
-                return 'menu';
-        }
+  protected override get ownRole(): string {
+    switch (this.selects) {
+      case "multiple":
+      case "single":
+      case "inherit":
+        return "group";
+      default:
+        return "menu";
     }
+  }
 
-    protected updateLabel(): void {
-        const headerElement = this.headerElements.length
-            ? this.headerElements[0]
-            : undefined;
-
-        if (headerElement !== this.headerElement) {
-            if (this.headerElement && this.headerElement.id === this.headerId) {
-                this.headerElement.removeAttribute('id');
-            }
+  protected updateLabel(): void {
+    const headerElement = this.headerElements.length
+      ? this.headerElements[0]
+      : undefined;
 
-            if (headerElement) {
-                this.headerId =
-                    this.headerId || `sp-menu-group-label-${randomID()}`;
-                const headerId = headerElement.id || this.headerId;
+    if (headerElement !== this.headerElement) {
+      if (this.headerElement && this.headerElement.id === this.headerId) {
+        this.headerElement.removeAttribute("id");
+      }
 
-                if (!headerElement.id) {
-                    headerElement.id = headerId;
-                }
+      if (headerElement) {
+        this.headerId = this.headerId || `sp-menu-group-label-${randomID()}`;
+        const headerId = headerElement.id || this.headerId;
 
-                this.setAttribute('aria-labelledby', headerId);
-            } else {
-                this.removeAttribute('aria-labelledby');
-            }
+        if (!headerElement.id) {
+          headerElement.id = headerId;
         }
 
-        this.headerElement = headerElement;
+        this.setAttribute("aria-labelledby", headerId);
+      } else {
+        this.removeAttribute("aria-labelledby");
+      }
     }
 
-    public override render(): TemplateResult {
-        return html`
-            
-                
-            
-            ${this.renderMenuItemSlot()}
-        `;
-    }
+    this.headerElement = headerElement;
+  }
+
+  public override render(): TemplateResult {
+    return html`
+      
+        
+      
+      ${this.renderMenuItemSlot()}
+    `;
+  }
 }
diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
index ee3c07276e..9bdda6aa67 100644
--- a/packages/menu/src/MenuItem.ts
+++ b/packages/menu/src/MenuItem.ts
@@ -11,37 +11,37 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    PropertyValues,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    ObserveSlotPresence,
-    ObserveSlotText,
-    randomID,
-} from '@spectrum-web-components/shared';
+  ObserveSlotPresence,
+  ObserveSlotText,
+  randomID,
+} from "@spectrum-web-components/shared";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
-
-import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
-import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';
-import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';
-
-import menuItemStyles from './menu-item.css.js';
-import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';
-import checkmarkSmallOverrides from '@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js';
-import type { Menu } from './Menu.js';
-import { MutationController } from '@lit-labs/observers/mutation-controller.js';
-import type { Overlay } from '@spectrum-web-components/overlay';
-import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
+
+import "@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";
+import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
+import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
+import chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";
+import { DependencyManagerController } from "@spectrum-web-components/reactive-controllers/src/DependencyManger.js";
+
+import menuItemStyles from "./menu-item.css.js";
+import checkmarkStyles from "@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";
+import checkmarkSmallOverrides from "@spectrum-web-components/icon/src/icon-checkmark-overrides.css.js";
+import type { Menu } from "./Menu.js";
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+import type { Overlay } from "@spectrum-web-components/overlay";
+import { SlottableRequestEvent } from "@spectrum-web-components/overlay/src/slottable-request-event.js";
 
 /**
  * Duration during which a pointing device can leave an `` element
@@ -50,35 +50,35 @@ import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slot
 const POINTERLEAVE_TIMEOUT = 100;
 
 type MenuCascadeItem = {
-    hadFocusRoot: boolean;
-    ancestorWithSelects?: HTMLElement;
+  hadFocusRoot: boolean;
+  ancestorWithSelects?: HTMLElement;
 };
 
 export class MenuItemAddedOrUpdatedEvent extends Event {
-    constructor(item: MenuItem) {
-        super('sp-menu-item-added-or-updated', {
-            bubbles: true,
-            composed: true,
-        });
-        this.clear(item);
-    }
-    clear(item: MenuItem): void {
-        this._item = item;
-        this.currentAncestorWithSelects = undefined;
-        item.menuData = {
-            cleanupSteps: [],
-            focusRoot: undefined,
-            selectionRoot: undefined,
-            parentMenu: undefined,
-        };
-        this.menuCascade = new WeakMap();
-    }
-    menuCascade = new WeakMap();
-    get item(): MenuItem {
-        return this._item;
-    }
-    private _item!: MenuItem;
-    currentAncestorWithSelects?: Menu;
+  constructor(item: MenuItem) {
+    super("sp-menu-item-added-or-updated", {
+      bubbles: true,
+      composed: true,
+    });
+    this.clear(item);
+  }
+  clear(item: MenuItem): void {
+    this._item = item;
+    this.currentAncestorWithSelects = undefined;
+    item.menuData = {
+      cleanupSteps: [],
+      focusRoot: undefined,
+      selectionRoot: undefined,
+      parentMenu: undefined,
+    };
+    this.menuCascade = new WeakMap();
+  }
+  menuCascade = new WeakMap();
+  get item(): MenuItem {
+    return this._item;
+  }
+  private _item!: MenuItem;
+  currentAncestorWithSelects?: Menu;
 }
 
 export type MenuItemChildren = { icon: Element[]; content: Node[] };
@@ -95,571 +95,550 @@ export type MenuItemChildren = { icon: Element[]; content: Node[] };
  * @fires sp-menu-item-added - announces the item has been added so a parent menu can take ownerships
  */
 export class MenuItem extends LikeAnchor(
-    ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]'))
+  ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]')),
 ) {
-    public static override get styles(): CSSResultArray {
-        return [
-            menuItemStyles,
-            checkmarkStyles,
-            checkmarkSmallOverrides,
-            chevronStyles,
-            chevronIconOverrides,
-        ];
-    }
-
-    abortControllerSubmenu!: AbortController;
-
-    @property({ type: Boolean, reflect: true })
-    public active = false;
+  public static override get styles(): CSSResultArray {
+    return [
+      menuItemStyles,
+      checkmarkStyles,
+      checkmarkSmallOverrides,
+      chevronStyles,
+      chevronIconOverrides,
+    ];
+  }
 
-    private dependencyManager = new DependencyManagerController(this);
+  abortControllerSubmenu!: AbortController;
 
-    @property({ type: Boolean, reflect: true })
-    public focused = false;
+  @property({ type: Boolean, reflect: true })
+  public active = false;
 
-    @property({ type: Boolean, reflect: true })
-    public selected = false;
+  private dependencyManager = new DependencyManagerController(this);
 
-    @property({ type: String })
-    public get value(): string {
-        return this._value || this.itemText;
-    }
+  @property({ type: Boolean, reflect: true })
+  public focused = false;
 
-    public set value(value: string) {
-        if (value === this._value) {
-            return;
-        }
+  @property({ type: Boolean, reflect: true })
+  public selected = false;
 
-        this._value = value || '';
+  @property({ type: String })
+  public get value(): string {
+    return this._value || this.itemText;
+  }
 
-        if (this._value) {
-            this.setAttribute('value', this._value);
-        } else {
-            this.removeAttribute('value');
-        }
+  public set value(value: string) {
+    if (value === this._value) {
+      return;
     }
 
-    private _value = '';
+    this._value = value || "";
 
-    /**
-     * @private
-     */
-    public get itemText(): string {
-        return this.itemChildren.content.reduce(
-            (acc, node) => acc + (node.textContent || '').trim(),
-            ''
-        );
+    if (this._value) {
+      this.setAttribute("value", this._value);
+    } else {
+      this.removeAttribute("value");
     }
+  }
 
-    @property({ type: Boolean, reflect: true, attribute: 'has-submenu' })
-    public hasSubmenu = false;
-
-    @query('slot:not([name])')
-    contentSlot!: HTMLSlotElement;
-
-    @query('slot[name="icon"]')
-    iconSlot!: HTMLSlotElement;
-
-    @property({
-        type: Boolean,
-        reflect: true,
-        attribute: 'no-wrap',
-        hasChanged() {
-            return false;
-        },
-    })
-    public noWrap = false;
+  private _value = "";
 
-    @query('.anchor')
-    private anchorElement!: HTMLAnchorElement;
+  /**
+   * @private
+   */
+  public get itemText(): string {
+    return this.itemChildren.content.reduce(
+      (acc, node) => acc + (node.textContent || "").trim(),
+      "",
+    );
+  }
 
-    @query('sp-overlay')
-    public overlayElement!: Overlay;
+  @property({ type: Boolean, reflect: true, attribute: "has-submenu" })
+  public hasSubmenu = false;
 
-    private submenuElement?: HTMLElement;
+  @query("slot:not([name])")
+  contentSlot!: HTMLSlotElement;
 
-    public override get focusElement(): HTMLElement {
-        return this;
-    }
+  @query('slot[name="icon"]')
+  iconSlot!: HTMLSlotElement;
 
-    protected get hasIcon(): boolean {
-        return this.slotContentIsPresent;
-    }
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: "no-wrap",
+    hasChanged() {
+      return false;
+    },
+  })
+  public noWrap = false;
 
-    public get itemChildren(): MenuItemChildren {
-        if (!this.iconSlot || !this.contentSlot) {
-            return {
-                icon: [],
-                content: [],
-            };
-        }
+  @query(".anchor")
+  private anchorElement!: HTMLAnchorElement;
 
-        if (this._itemChildren) {
-            return this._itemChildren;
-        }
+  @query("sp-overlay")
+  public overlayElement!: Overlay;
 
-        const icon = this.iconSlot.assignedElements().map((element) => {
-            const newElement = element.cloneNode(true) as HTMLElement;
+  private submenuElement?: HTMLElement;
 
-            newElement.removeAttribute('slot');
-            newElement.classList.toggle('icon');
+  public override get focusElement(): HTMLElement {
+    return this;
+  }
 
-            return newElement;
-        });
-        const content = this.contentSlot
-            .assignedNodes()
-            .map((node) => node.cloneNode(true));
-
-        this._itemChildren = { icon, content };
-
-        return this._itemChildren;
-    }
+  protected get hasIcon(): boolean {
+    return this.slotContentIsPresent;
+  }
 
-    private _itemChildren?: MenuItemChildren;
-
-    constructor() {
-        super();
-        this.addEventListener('click', this.handleClickCapture, {
-            capture: true,
-        });
-
-        new MutationController(this, {
-            config: {
-                characterData: true,
-                childList: true,
-                subtree: true,
-            },
-            callback: (mutations) => {
-                const isSubmenu = mutations.every(
-                    (mutation) =>
-                        (mutation.target as HTMLElement).slot === 'submenu'
-                );
-
-                if (isSubmenu) {
-                    return;
-                }
-
-                this.breakItemChildrenCache();
-            },
-        });
+  public get itemChildren(): MenuItemChildren {
+    if (!this.iconSlot || !this.contentSlot) {
+      return {
+        icon: [],
+        content: [],
+      };
     }
 
-    @property({ type: Boolean, reflect: true })
-    public open = false;
-
-    public override click(): void {
-        if (this.disabled) {
-            return;
-        }
-
-        if (this.shouldProxyClick()) {
-            return;
-        }
-
-        super.click();
+    if (this._itemChildren) {
+      return this._itemChildren;
     }
 
-    private handleClickCapture(event: Event): void | boolean {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            event.stopPropagation();
+    const icon = this.iconSlot.assignedElements().map((element) => {
+      const newElement = element.cloneNode(true) as HTMLElement;
 
-            return false;
-        }
-    }
+      newElement.removeAttribute("slot");
+      newElement.classList.toggle("icon");
 
-    private handleSlottableRequest = (event: SlottableRequestEvent): void => {
-        this.submenuElement?.dispatchEvent(
-            new SlottableRequestEvent(event.name, event.data)
-        );
-    };
+      return newElement;
+    });
+    const content = this.contentSlot
+      .assignedNodes()
+      .map((node) => node.cloneNode(true));
 
-    private proxyFocus = (): void => {
-        this.focus();
-    };
+    this._itemChildren = { icon, content };
 
-    private shouldProxyClick(): boolean {
-        let handled = false;
+    return this._itemChildren;
+  }
 
-        if (this.anchorElement) {
-            this.anchorElement.click();
-            handled = true;
-        }
+  private _itemChildren?: MenuItemChildren;
 
-        return handled;
-    }
+  constructor() {
+    super();
+    this.addEventListener("click", this.handleClickCapture, {
+      capture: true,
+    });
 
-    protected breakItemChildrenCache(): void {
-        this._itemChildren = undefined;
-        this.triggerUpdate();
-    }
+    new MutationController(this, {
+      config: {
+        characterData: true,
+        childList: true,
+        subtree: true,
+      },
+      callback: (mutations) => {
+        const isSubmenu = mutations.every(
+          (mutation) => (mutation.target as HTMLElement).slot === "submenu",
+        );
 
-    protected renderSubmenu(): TemplateResult {
-        const slot = html`
-             {
-                        event.clear(event.item);
-                    },
-                    capture: true,
-                }}
-                @focusin=${(event: Event) => event.stopPropagation()}
-            >
-        `;
-
-        if (!this.hasSubmenu) {
-            return slot;
+        if (isSubmenu) {
+          return;
         }
 
-        this.dependencyManager.add('sp-overlay');
-        this.dependencyManager.add('sp-popover');
-        import('@spectrum-web-components/overlay/sp-overlay.js');
-        import('@spectrum-web-components/popover/sp-popover.js');
-
-        return html`
-             event.stopPropagation()}
-                @slottable-request=${this.handleSlottableRequest}
-            >
-                 {
-                        this.handleSubmenuChange(event);
-                        this.open = false;
-                    }}
-                    @pointerenter=${this.handleSubmenuPointerenter}
-                    @pointerleave=${this.handleSubmenuPointerleave}
-                    @sp-menu-item-added-or-updated=${(event: Event) =>
-                        event.stopPropagation()}
-                >
-                    ${slot}
-                
-            
-            
-        `;
-    }
-
-    protected override render(): TemplateResult {
-        return html`
-            ${this.selected
-                ? html`
-                       {
+            event.clear(event.item);
+          },
+          capture: true,
+        }}
+        @focusin=${(event: Event) => event.stopPropagation()}
+      >
+    `;
+
+    if (!this.hasSubmenu) {
+      return slot;
+    }
+
+    this.dependencyManager.add("sp-overlay");
+    this.dependencyManager.add("sp-popover");
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    import("@spectrum-web-components/popover/sp-popover.js");
+
+    return html`
+       event.stopPropagation()}
+        @slottable-request=${this.handleSlottableRequest}
+      >
+         {
+            this.handleSubmenuChange(event);
+            this.open = false;
+          }}
+          @pointerenter=${this.handleSubmenuPointerenter}
+          @pointerleave=${this.handleSubmenuPointerleave}
+          @sp-menu-item-added-or-updated=${(event: Event) =>
+            event.stopPropagation()}
+        >
+          ${slot}
+        
+      
+      
+    `;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      ${this.selected
+        ? html`
+            
-                  `
-                : nothing}
-            
-            

-                
-            

-            
-            
-            ${this.href && this.href.length > 0
-                ? super.renderAnchor({
-                      id: 'button',
-                      ariaHidden: true,
-                      className: 'button anchor hidden',
-                  })
-                : nothing}
-            ${this.renderSubmenu()}
-        `;
-    }
-
-    protected manageSubmenu(event: Event & { target: HTMLSlotElement }): void {
-        this.submenuElement = event.target.assignedElements({
-            flatten: true,
-        })[0] as HTMLElement;
-        this.hasSubmenu = !!this.submenuElement;
-
-        if (this.hasSubmenu) {
-            this.setAttribute('aria-haspopup', 'true');
-        }
-    }
-
-    private handlePointerdown(event: PointerEvent): void {
-        if (event.target === this && this.hasSubmenu && this.open) {
-            this.addEventListener('focus', this.handleSubmenuFocus, {
-                once: true,
-            });
-            this.overlayElement.addEventListener(
-                'beforetoggle',
-                this.handleBeforetoggle
-            );
-        }
-    }
-
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        this.setAttribute('tabindex', '-1');
-        this.addEventListener('pointerdown', this.handlePointerdown);
-        this.addEventListener('pointerenter', this.closeOverlaysForRoot);
-
-        if (!this.hasAttribute('id')) {
-            this.id = `sp-menu-item-${randomID()}`;
-        }
-    }
-
-    protected closeOverlaysForRoot(): void {
-        if (this.open) return;
-
-        this.menuData.parentMenu?.closeDescendentOverlays();
-    }
-
-    protected handleSubmenuClick(event: Event): void {
-        if (event.composedPath().includes(this.overlayElement)) {
-            return;
-        }
-
-        this.openOverlay();
-    }
-
-    protected handleSubmenuFocus(): void {
-        requestAnimationFrame(() => {
-            // Wait till after `closeDescendentOverlays` has happened in Menu
-            // to reopen (keep open) the direct descendent of this Menu Item
-            this.overlayElement.open = this.open;
-        });
-    }
-
-    protected handleBeforetoggle = (event: Event): void => {
-        if ((event as Event & { newState: string }).newState === 'closed') {
-            this.open = true;
-            this.overlayElement.manuallyKeepOpen();
-            this.overlayElement.removeEventListener(
-                'beforetoggle',
-                this.handleBeforetoggle
-            );
-        }
-    };
-
-    protected handlePointerenter(): void {
-        if (this.leaveTimeout) {
-            clearTimeout(this.leaveTimeout);
-            delete this.leaveTimeout;
-
-            return;
-        }
-
-        this.openOverlay();
-    }
-
-    protected leaveTimeout?: ReturnType;
-    protected recentlyLeftChild = false;
-
-    protected handlePointerleave(): void {
-        if (this.open && !this.recentlyLeftChild) {
-            this.leaveTimeout = setTimeout(() => {
-                delete this.leaveTimeout;
-                this.open = false;
-            }, POINTERLEAVE_TIMEOUT);
-        }
-    }
-
-    /**
-     * When there is a `change` event in the submenu for this item
-     * then we "click" this item to cascade the selection up the
-     * menu tree allowing all submenus between the initial selection
-     * and the root of the tree to have their selection changes and
-     * be closed.
-     */
-    protected handleSubmenuChange(event: Event): void {
-        event.stopPropagation();
-        this.menuData.selectionRoot?.selectOrToggleItem(this);
-    }
-
-    protected handleSubmenuPointerenter(): void {
-        this.recentlyLeftChild = true;
-    }
-
-    protected async handleSubmenuPointerleave(): Promise {
-        requestAnimationFrame(() => {
-            this.recentlyLeftChild = false;
-        });
-    }
-
-    protected handleSubmenuOpen(event: Event): void {
-        this.focused = false;
-        const parentOverlay = event.composedPath().find((el) => {
-            return (
-                el !== this.overlayElement &&
-                (el as HTMLElement).localName === 'sp-overlay'
-            );
-        }) as Overlay;
-
-        this.overlayElement.parentOverlayToForceClose = parentOverlay;
-    }
-
-    protected cleanup(): void {
+                ? "checkmark--withAdjacentIcon"
+                : ""}"
+            >
+          `
+        : nothing}
+      
+      

+        
+      

+      
+      
+      ${this.href && this.href.length > 0
+        ? super.renderAnchor({
+            id: "button",
+            ariaHidden: true,
+            className: "button anchor hidden",
+          })
+        : nothing}
+      ${this.renderSubmenu()}
+    `;
+  }
+
+  protected manageSubmenu(event: Event & { target: HTMLSlotElement }): void {
+    this.submenuElement = event.target.assignedElements({
+      flatten: true,
+    })[0] as HTMLElement;
+    this.hasSubmenu = !!this.submenuElement;
+
+    if (this.hasSubmenu) {
+      this.setAttribute("aria-haspopup", "true");
+    }
+  }
+
+  private handlePointerdown(event: PointerEvent): void {
+    if (event.target === this && this.hasSubmenu && this.open) {
+      this.addEventListener("focus", this.handleSubmenuFocus, {
+        once: true,
+      });
+      this.overlayElement.addEventListener(
+        "beforetoggle",
+        this.handleBeforetoggle,
+      );
+    }
+  }
+
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
+    this.setAttribute("tabindex", "-1");
+    this.addEventListener("pointerdown", this.handlePointerdown);
+    this.addEventListener("pointerenter", this.closeOverlaysForRoot);
+
+    if (!this.hasAttribute("id")) {
+      this.id = `sp-menu-item-${randomID()}`;
+    }
+  }
+
+  protected closeOverlaysForRoot(): void {
+    if (this.open) {
+      return;
+    }
+
+    this.menuData.parentMenu?.closeDescendentOverlays();
+  }
+
+  protected handleSubmenuClick(event: Event): void {
+    if (event.composedPath().includes(this.overlayElement)) {
+      return;
+    }
+
+    this.openOverlay();
+  }
+
+  protected handleSubmenuFocus(): void {
+    requestAnimationFrame(() => {
+      // Wait till after `closeDescendentOverlays` has happened in Menu
+      // to reopen (keep open) the direct descendent of this Menu Item
+      this.overlayElement.open = this.open;
+    });
+  }
+
+  protected handleBeforetoggle = (event: Event): void => {
+    if ((event as Event & { newState: string }).newState === "closed") {
+      this.open = true;
+      this.overlayElement.manuallyKeepOpen();
+      this.overlayElement.removeEventListener(
+        "beforetoggle",
+        this.handleBeforetoggle,
+      );
+    }
+  };
+
+  protected handlePointerenter(): void {
+    if (this.leaveTimeout) {
+      clearTimeout(this.leaveTimeout);
+      delete this.leaveTimeout;
+
+      return;
+    }
+
+    this.openOverlay();
+  }
+
+  protected leaveTimeout?: ReturnType;
+  protected recentlyLeftChild = false;
+
+  protected handlePointerleave(): void {
+    if (this.open && !this.recentlyLeftChild) {
+      this.leaveTimeout = setTimeout(() => {
+        delete this.leaveTimeout;
         this.open = false;
-        this.active = false;
-    }
-
-    public async openOverlay(): Promise {
-        if (!this.hasSubmenu || this.open || this.disabled) {
-            return;
-        }
-
-        this.open = true;
-        this.active = true;
-        this.setAttribute('aria-expanded', 'true');
-        this.addEventListener('sp-closed', this.cleanup, {
-            once: true,
-        });
-    }
-
-    updateAriaSelected(): void {
-        const role = this.getAttribute('role');
-
-        if (role === 'option') {
-            this.setAttribute(
-                'aria-selected',
-                this.selected ? 'true' : 'false'
-            );
-        } else if (role === 'menuitemcheckbox' || role === 'menuitemradio') {
-            this.setAttribute('aria-checked', this.selected ? 'true' : 'false');
-        }
-    }
-
-    public setRole(role: string): void {
-        this.setAttribute('role', role);
-        this.updateAriaSelected();
-    }
-
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (
-            changes.has('label') &&
-            (this.label || typeof changes.get('label') !== 'undefined')
-        ) {
-            this.setAttribute('aria-label', this.label || '');
-        }
-
-        if (
-            changes.has('active') &&
-            (this.active || typeof changes.get('active') !== 'undefined')
-        ) {
-            if (this.active) {
-                this.menuData.selectionRoot?.closeDescendentOverlays();
-            }
-        }
-
-        if (this.anchorElement) {
-            this.anchorElement.addEventListener('focus', this.proxyFocus);
-            this.anchorElement.tabIndex = -1;
-        }
-
-        if (changes.has('selected')) {
-            this.updateAriaSelected();
-        }
-
-        if (
-            changes.has('hasSubmenu') &&
-            (this.hasSubmenu ||
-                typeof changes.get('hasSubmenu') !== 'undefined')
-        ) {
-            if (this.hasSubmenu) {
-                this.abortControllerSubmenu = new AbortController();
-                const options = { signal: this.abortControllerSubmenu.signal };
-
-                this.addEventListener(
-                    'click',
-                    this.handleSubmenuClick,
-                    options
-                );
-                this.addEventListener(
-                    'pointerenter',
-                    this.handlePointerenter,
-                    options
-                );
-                this.addEventListener(
-                    'pointerleave',
-                    this.handlePointerleave,
-                    options
-                );
-                this.addEventListener(
-                    'sp-opened',
-                    this.handleSubmenuOpen,
-                    options
-                );
-            } else {
-                this.abortControllerSubmenu?.abort();
-            }
-        }
-    }
+      }, POINTERLEAVE_TIMEOUT);
+    }
+  }
+
+  /**
+   * When there is a `change` event in the submenu for this item
+   * then we "click" this item to cascade the selection up the
+   * menu tree allowing all submenus between the initial selection
+   * and the root of the tree to have their selection changes and
+   * be closed.
+   */
+  protected handleSubmenuChange(event: Event): void {
+    event.stopPropagation();
+    this.menuData.selectionRoot?.selectOrToggleItem(this);
+  }
+
+  protected handleSubmenuPointerenter(): void {
+    this.recentlyLeftChild = true;
+  }
+
+  protected async handleSubmenuPointerleave(): Promise {
+    requestAnimationFrame(() => {
+      this.recentlyLeftChild = false;
+    });
+  }
+
+  protected handleSubmenuOpen(event: Event): void {
+    this.focused = false;
+    const parentOverlay = event.composedPath().find((el) => {
+      return (
+        el !== this.overlayElement &&
+        (el as HTMLElement).localName === "sp-overlay"
+      );
+    }) as Overlay;
+
+    this.overlayElement.parentOverlayToForceClose = parentOverlay;
+  }
+
+  protected cleanup(): void {
+    this.open = false;
+    this.active = false;
+  }
+
+  public async openOverlay(): Promise {
+    if (!this.hasSubmenu || this.open || this.disabled) {
+      return;
+    }
+
+    this.open = true;
+    this.active = true;
+    this.setAttribute("aria-expanded", "true");
+    this.addEventListener("sp-closed", this.cleanup, {
+      once: true,
+    });
+  }
+
+  updateAriaSelected(): void {
+    const role = this.getAttribute("role");
+
+    if (role === "option") {
+      this.setAttribute("aria-selected", this.selected ? "true" : "false");
+    } else if (role === "menuitemcheckbox" || role === "menuitemradio") {
+      this.setAttribute("aria-checked", this.selected ? "true" : "false");
+    }
+  }
+
+  public setRole(role: string): void {
+    this.setAttribute("role", role);
+    this.updateAriaSelected();
+  }
+
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
+
+    if (
+      changes.has("label") &&
+      (this.label || typeof changes.get("label") !== "undefined")
+    ) {
+      this.setAttribute("aria-label", this.label || "");
+    }
+
+    if (
+      changes.has("active") &&
+      (this.active || typeof changes.get("active") !== "undefined")
+    ) {
+      if (this.active) {
+        this.menuData.selectionRoot?.closeDescendentOverlays();
+      }
+    }
+
+    if (this.anchorElement) {
+      this.anchorElement.addEventListener("focus", this.proxyFocus);
+      this.anchorElement.tabIndex = -1;
+    }
+
+    if (changes.has("selected")) {
+      this.updateAriaSelected();
+    }
+
+    if (
+      changes.has("hasSubmenu") &&
+      (this.hasSubmenu || typeof changes.get("hasSubmenu") !== "undefined")
+    ) {
+      if (this.hasSubmenu) {
+        this.abortControllerSubmenu = new AbortController();
+        const options = { signal: this.abortControllerSubmenu.signal };
+
+        this.addEventListener("click", this.handleSubmenuClick, options);
+        this.addEventListener("pointerenter", this.handlePointerenter, options);
+        this.addEventListener("pointerleave", this.handlePointerleave, options);
+        this.addEventListener("sp-opened", this.handleSubmenuOpen, options);
+      } else {
+        this.abortControllerSubmenu?.abort();
+      }
+    }
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.triggerUpdate();
+  }
+
+  _parentElement!: HTMLElement;
+
+  public override disconnectedCallback(): void {
+    this.menuData.cleanupSteps.forEach((removal) => removal(this));
+    this.menuData = {
+      focusRoot: undefined,
+      parentMenu: undefined,
+      selectionRoot: undefined,
+      cleanupSteps: [],
+    };
+    super.disconnectedCallback();
+  }
 
-    public override connectedCallback(): void {
-        super.connectedCallback();
-        this.triggerUpdate();
-    }
+  private willDispatchUpdate = false;
 
-    _parentElement!: HTMLElement;
-
-    public override disconnectedCallback(): void {
-        this.menuData.cleanupSteps.forEach((removal) => removal(this));
-        this.menuData = {
-            focusRoot: undefined,
-            parentMenu: undefined,
-            selectionRoot: undefined,
-            cleanupSteps: [],
-        };
-        super.disconnectedCallback();
+  public async triggerUpdate(): Promise {
+    if (this.willDispatchUpdate) {
+      return;
     }
 
-    private willDispatchUpdate = false;
+    this.willDispatchUpdate = true;
+    await new Promise((ready) => requestAnimationFrame(ready));
+    this.dispatchUpdate();
+  }
 
-    public async triggerUpdate(): Promise {
-        if (this.willDispatchUpdate) {
-            return;
-        }
-
-        this.willDispatchUpdate = true;
-        await new Promise((ready) => requestAnimationFrame(ready));
-        this.dispatchUpdate();
+  public dispatchUpdate(): void {
+    if (!this.isConnected) {
+      return;
     }
 
-    public dispatchUpdate(): void {
-        if (!this.isConnected) {
-            return;
-        }
+    this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));
+    this.willDispatchUpdate = false;
+  }
 
-        this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));
-        this.willDispatchUpdate = false;
-    }
-
-    public menuData: {
-        focusRoot?: Menu;
-        parentMenu?: Menu;
-        selectionRoot?: Menu;
-        cleanupSteps: ((item: MenuItem) => void)[];
-    } = {
-        focusRoot: undefined,
-        parentMenu: undefined,
-        selectionRoot: undefined,
-        cleanupSteps: [],
-    };
+  public menuData: {
+    focusRoot?: Menu;
+    parentMenu?: Menu;
+    selectionRoot?: Menu;
+    cleanupSteps: ((item: MenuItem) => void)[];
+  } = {
+    focusRoot: undefined,
+    parentMenu: undefined,
+    selectionRoot: undefined,
+    cleanupSteps: [],
+  };
 }
 
 declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-menu-item-added-or-updated': MenuItemAddedOrUpdatedEvent;
-    }
+  interface GlobalEventHandlersEventMap {
+    "sp-menu-item-added-or-updated": MenuItemAddedOrUpdatedEvent;
+  }
 }
diff --git a/packages/menu/src/index.ts b/packages/menu/src/index.ts
index 739b30dd06..5f0a30ca7e 100644
--- a/packages/menu/src/index.ts
+++ b/packages/menu/src/index.ts
@@ -9,7 +9,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Menu.js';
-export * from './MenuDivider.js';
-export * from './MenuGroup.js';
-export * from './MenuItem.js';
+export * from "./Menu.js";
+export * from "./MenuDivider.js";
+export * from "./MenuGroup.js";
+export * from "./MenuItem.js";
diff --git a/packages/menu/stories/index.ts b/packages/menu/stories/index.ts
index 28d99a1275..2ff500e01e 100644
--- a/packages/menu/stories/index.ts
+++ b/packages/menu/stories/index.ts
@@ -11,91 +11,91 @@ governing permissions and limitations under the License.
 */
 
 import {
-    html,
-    LitElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import { Menu } from '@spectrum-web-components/menu';
+  html,
+  LitElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import { Menu } from "@spectrum-web-components/menu";
 
 export const MenuMarkup = ({
-    size = 'm' as 's' | 'm' | 'l' | 'xl',
+  size = "m" as "s" | "m" | "l" | "xl",
 } = {}): TemplateResult => {
-    return html`
-        
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            
-            Save Selection
-            Make Work Path
-        
+  return html`
+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      
+      Save Selection
+      Make Work Path
+    
 
-        
-            
-                Deselect
-                Select Inverse
-                Feather...
-                Select and Mask...
-                
-                Save Selection
-                Make Work Path
-            
-        
-    `;
+    
+      
+        Deselect
+        Select Inverse
+        Feather...
+        Select and Mask...
+        
+        Save Selection
+        Make Work Path
+      
+    
+  `;
 };
 
 export class ComplexSlottedGroup extends LitElement {
-    get menu(): Menu {
-        return this.renderRoot.querySelector('sp-menu') as Menu;
-    }
-    protected override render(): TemplateResult {
-        return html`
-            
-                
-                    Before First
-                    
-                
-                
-                    Sibling 1
-                    
-                    Sibling 2
-                
-                
-                    After 1
-                    After 2
-                
-            
-        `;
-    }
+  get menu(): Menu {
+    return this.renderRoot.querySelector("sp-menu") as Menu;
+  }
+  protected override render(): TemplateResult {
+    return html`
+      
+        
+          Before First
+          
+        
+        
+          Sibling 1
+          
+          Sibling 2
+        
+        
+          After 1
+          After 2
+        
+      
+    `;
+  }
 }
 
-customElements.define('complex-slotted-group', ComplexSlottedGroup);
+customElements.define("complex-slotted-group", ComplexSlottedGroup);
 
 export class ComplexSlottedMenu extends LitElement {
-    get menu(): Menu {
-        return (
-            this.renderRoot.querySelector(
-                'complex-slotted-group'
-            ) as ComplexSlottedGroup
-        ).menu;
-    }
-    protected override render(): TemplateResult {
-        return html`
-            
-                Middle 1
-                Middle 2
-                Middle 3
-                
-                
-                Before Last
-            
-        `;
-    }
+  get menu(): Menu {
+    return (
+      this.renderRoot.querySelector(
+        "complex-slotted-group",
+      ) as ComplexSlottedGroup
+    ).menu;
+  }
+  protected override render(): TemplateResult {
+    return html`
+      
+        Middle 1
+        Middle 2
+        Middle 3
+        
+        
+        Before Last
+      
+    `;
+  }
 }
 
-customElements.define('complex-slotted-menu', ComplexSlottedMenu);
+customElements.define("complex-slotted-menu", ComplexSlottedMenu);
diff --git a/packages/menu/stories/menu-divider.stories.ts b/packages/menu/stories/menu-divider.stories.ts
index 8397810b3a..df10fa9600 100644
--- a/packages/menu/stories/menu-divider.stories.ts
+++ b/packages/menu/stories/menu-divider.stories.ts
@@ -8,39 +8,39 @@ Unless required by applicable law or agreed to in writing, software distributed
 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 { html, TemplateResult } from '@spectrum-web-components/base';
+*/ import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/popover/sp-popover.js';
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/popover/sp-popover.js";
 
 export default {
-    component: 'sp-menu-divider',
-    title: 'Menu Divider',
+  component: "sp-menu-divider",
+  title: "Menu Divider",
 };
 
 const Template = (size: string): TemplateResult => {
-    return html`
-        
-            
-                Deselect
-                Select Inverse
-                Feather...
-                
-                Select and Mask...
-                Make Work Path
-                
-                Save Selection
-                
-                Create group
-            
-        
-    `;
+  return html`
+    
+      
+        Deselect
+        Select Inverse
+        Feather...
+        
+        Select and Mask...
+        Make Work Path
+        
+        Save Selection
+        
+        Create group
+      
+    
+  `;
 };
 
-export const sizeS = (): TemplateResult => Template('s');
+export const sizeS = (): TemplateResult => Template("s");
 
-export const sizeM = (): TemplateResult => Template('m');
+export const sizeM = (): TemplateResult => Template("m");
 
-export const sizeL = (): TemplateResult => Template('l');
+export const sizeL = (): TemplateResult => Template("l");
diff --git a/packages/menu/stories/menu-group.stories.ts b/packages/menu/stories/menu-group.stories.ts
index 14065b1fd2..d94b8716b5 100644
--- a/packages/menu/stories/menu-group.stories.ts
+++ b/packages/menu/stories/menu-group.stories.ts
@@ -21,37 +21,37 @@ import "@spectrum-web-components/popover/sp-popover.js";
 import "./index.js";
 
 export default {
-	component: "sp-menu",
-	title: "Menu Group",
+  component: "sp-menu",
+  title: "Menu Group",
 };
 
 export const complexSlotted = (): TemplateResult => {
-	return html`
-		
-			External A
-			External 1
-			External 2
-		
-	`;
+  return html`
+    
+      External A
+      External 1
+      External 2
+    
+  `;
 };
 
 export const mixed = (): TemplateResult => {
-	let style = "italic";
-	let weight = "700";
-	let color = "blue";
-	let decoration = "overline";
-	const styleRules = ({
-		style,
-		weight,
-		color,
-		decoration,
-	}: {
-		style: string;
-		weight: string;
-		color: string;
-		decoration: string;
-	}): string => {
-		return `
+  let style = "italic";
+  let weight = "700";
+  let color = "blue";
+  let decoration = "overline";
+  const styleRules = ({
+    style,
+    weight,
+    color,
+    decoration,
+  }: {
+    style: string;
+    weight: string;
+    color: string;
+    decoration: string;
+  }): string => {
+    return `
         .style-rule {
             font-weight: ${weight};
             font-style: ${style};
@@ -59,104 +59,104 @@ export const mixed = (): TemplateResult => {
             text-decoration: ${decoration};
         }
         `;
-	};
-	const update = (event: Event): void => {
-		const { value, id } = event.target as MenuGroup;
+  };
+  const update = (event: Event): void => {
+    const { value, id } = event.target as MenuGroup;
 
-		switch (id) {
-			case "font": {
-				const values = value.split(",");
+    switch (id) {
+      case "font": {
+        const values = value.split(",");
 
-				style = values.indexOf("italic") > -1 ? "italic" : "normal";
-				weight = values.indexOf("bold") > -1 ? "700" : "400";
-				break;
-			}
-			case "color":
-				color = value;
-				break;
-			case "decoration":
-				decoration = value;
-				break;
-		}
+        style = values.indexOf("italic") > -1 ? "italic" : "normal";
+        weight = values.indexOf("bold") > -1 ? "700" : "400";
+        break;
+      }
+      case "color":
+        color = value;
+        break;
+      case "decoration":
+        decoration = value;
+        break;
+    }
 
-		(document.querySelector("#output") as HTMLElement).textContent = styleRules(
-			{
-				style,
-				weight,
-				color,
-				decoration,
-			},
-		);
-	};
+    (document.querySelector("#output") as HTMLElement).textContent = styleRules(
+      {
+        style,
+        weight,
+        color,
+        decoration,
+      },
+    );
+  };
 
-	return html`
-		
-		
-			
-				
-					Bold
-					Italic
-				
-				
-				
-					Black
-					Blue
-					Red
-					Green
-				
-				
-				
-					None
-					 Overline 
-					 Line-through 
-					Underline
-				
-			
-		
-		
+  return html`
+    
+    
+      
+        
+          Bold
+          Italic
+        
+        
+        
+          Black
+          Blue
+          Red
+          Green
+        
+        
+        
+          None
+           Overline 
+           Line-through 
+          Underline
+        
+      
+    
+    
             ${styleRules({ style, weight, color, decoration })}
         

-	`;
+    >
+  `;
 };
 
 export const inherit = (): TemplateResult => {
-	return html`
-		
-		
-			
-				
-					Orange
-					Apple
-					Grape
-				
-				
-				
-					Carrots
-					Summer Squash
-					Zuccini
-				
-				
-				
-					Ceral
-					Flour
-					Salt
-					Sugar
-				
-			
-		
-	`;
+  return html`
+    
+    
+      
+        
+          Orange
+          Apple
+          Grape
+        
+        
+        
+          Carrots
+          Summer Squash
+          Zuccini
+        
+        
+        
+          Ceral
+          Flour
+          Salt
+          Sugar
+        
+      
+    
+  `;
 };
diff --git a/packages/menu/stories/menu-item.disconnected.stories.ts b/packages/menu/stories/menu-item.disconnected.stories.ts
index 70597a202c..7c9e6d464a 100644
--- a/packages/menu/stories/menu-item.disconnected.stories.ts
+++ b/packages/menu/stories/menu-item.disconnected.stories.ts
@@ -10,184 +10,171 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, LitElement, TemplateResult } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { when } from 'lit/directives/when.js';
+import { html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { when } from "lit/directives/when.js";
 
-import '@spectrum-web-components/picker/sp-picker.js';
-import '@spectrum-web-components/button/sp-button.js';
-import { SpectrumMixin } from '@spectrum-web-components/base';
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/button/sp-button.js";
+import { SpectrumMixin } from "@spectrum-web-components/base";
 
 enum BlendModeValue {
-    normal = 2,
-    multiply = 3,
-    screen = 7,
+  normal = 2,
+  multiply = 3,
+  screen = 7,
 }
 
 interface BlendModeOption {
-    value: BlendModeValue;
-    title: string;
-    subtitle: string;
-    thumbnail: string;
+  value: BlendModeValue;
+  title: string;
+  subtitle: string;
+  thumbnail: string;
 }
 
 const XElement = SpectrumMixin(LitElement);
 
 class MyContainer extends XElement {
-    @state()
-    private _counter = 0;
-
-    private _handleClick(): void {
-        this._counter += 1;
-    }
-
-    protected override render(): TemplateResult {
-        return html`
-            

-                ${when(
-                    this._counter % 2 === 0,
-                    () => html`
-                        
-                    `,
-                    () => html`
-                        
-                    `
-                )}
-                
-                    Switch views
-                
-            

-        `;
-    }
+  @state()
+  private _counter = 0;
+
+  private _handleClick(): void {
+    this._counter += 1;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      

+        ${when(
+          this._counter % 2 === 0,
+          () => html`  `,
+          () => html`  `,
+        )}
+        
+          Switch views
+        
+      

+    `;
+  }
 }
 
-customElements.define('my-container', MyContainer);
+customElements.define("my-container", MyContainer);
 
 class MyView1 extends XElement {
-    protected override render(): TemplateResult {
-        const blendModeOptions = [
-            {
-                value: BlendModeValue.normal,
-                title: 'Normal 1',
-                subtitle: 'No effect applied',
-            },
-            {
-                value: BlendModeValue.multiply,
-                title: 'Multiply',
-                subtitle: 'Darken shadows with contrast and details',
-            },
-            {
-                value: BlendModeValue.screen,
-                title: 'Screen',
-                subtitle: 'Brighten highlights with contrast and details',
-            },
-        ];
-
-        return html`
-            View 1
-            
-        `;
-    }
+  protected override render(): TemplateResult {
+    const blendModeOptions = [
+      {
+        value: BlendModeValue.normal,
+        title: "Normal 1",
+        subtitle: "No effect applied",
+      },
+      {
+        value: BlendModeValue.multiply,
+        title: "Multiply",
+        subtitle: "Darken shadows with contrast and details",
+      },
+      {
+        value: BlendModeValue.screen,
+        title: "Screen",
+        subtitle: "Brighten highlights with contrast and details",
+      },
+    ];
+
+    return html`
+      View 1
+      
+    `;
+  }
 }
 
-customElements.define('my-view1', MyView1);
+customElements.define("my-view1", MyView1);
 
 class MyView2 extends XElement {
-    protected override render(): TemplateResult {
-        const blendModeOptions = [
-            {
-                value: BlendModeValue.normal,
-                title: 'Normal 2',
-                subtitle: 'No effect applied',
-            },
-            {
-                value: BlendModeValue.multiply,
-                title: 'Multiply',
-                subtitle: 'Darken shadows with contrast and details',
-            },
-            {
-                value: BlendModeValue.screen,
-                title: 'Screen',
-                subtitle: 'Brighten highlights with contrast and details',
-            },
-        ];
-
-        return html`
-            View 2
-            
-        `;
-    }
+  protected override render(): TemplateResult {
+    const blendModeOptions = [
+      {
+        value: BlendModeValue.normal,
+        title: "Normal 2",
+        subtitle: "No effect applied",
+      },
+      {
+        value: BlendModeValue.multiply,
+        title: "Multiply",
+        subtitle: "Darken shadows with contrast and details",
+      },
+      {
+        value: BlendModeValue.screen,
+        title: "Screen",
+        subtitle: "Brighten highlights with contrast and details",
+      },
+    ];
+
+    return html`
+      View 2
+      
+    `;
+  }
 }
 
-customElements.define('my-view2', MyView2);
+customElements.define("my-view2", MyView2);
 
 class MyPicker extends XElement {
-    @property({ type: Array })
-    public blendModeOptions: BlendModeOption[] = [];
-
-    @property()
-    public blendMode: number = BlendModeValue.normal;
-
-    private _renderBlendOptions(): TemplateResult {
-        return html`
-            ${repeat(
-                this.blendModeOptions,
-                // This is intentional so that repeat directive will add instead of
-                // update existing DOM which will then trigger error in
-                // MenuItem.childrenItem
-                // Using .value for the key will workaround the issue
-                (blendModeOption) => blendModeOption,
-                (blendModeOption: BlendModeOption) => html`
-                    
-                        ${blendModeOption.title}
-                        ${blendModeOption.subtitle}
-                    
-                `
-            )}
-        `;
-    }
-    protected override render(): TemplateResult {
-        return html`
-            
-                ${this._renderBlendOptions()}
-            
-        `;
-    }
+  @property({ type: Array })
+  public blendModeOptions: BlendModeOption[] = [];
+
+  @property()
+  public blendMode: number = BlendModeValue.normal;
+
+  private _renderBlendOptions(): TemplateResult {
+    return html`
+      ${repeat(
+        this.blendModeOptions,
+        // This is intentional so that repeat directive will add instead of
+        // update existing DOM which will then trigger error in
+        // MenuItem.childrenItem
+        // Using .value for the key will workaround the issue
+        (blendModeOption) => blendModeOption,
+        (blendModeOption: BlendModeOption) => html`
+          
+            ${blendModeOption.title}
+            ${blendModeOption.subtitle}
+          
+        `,
+      )}
+    `;
+  }
+  protected override render(): TemplateResult {
+    return html`
+      
+        ${this._renderBlendOptions()}
+      
+    `;
+  }
 }
 
-customElements.define('my-picker', MyPicker);
+customElements.define("my-picker", MyPicker);
 
 export default {
-    component: 'sp-menu-item',
-    title: 'Menu Item/Disconnected',
+  component: "sp-menu-item",
+  title: "Menu Item/Disconnected",
 };
 
 export const disconnectedChildItems = (): TemplateResult => html`
-    
+  
 `;
 
 disconnectedChildItems.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 disconnectedChildItems.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
diff --git a/packages/menu/stories/menu-item.stories.ts b/packages/menu/stories/menu-item.stories.ts
index e2bc3ca592..1019b11303 100644
--- a/packages/menu/stories/menu-item.stories.ts
+++ b/packages/menu/stories/menu-item.stories.ts
@@ -17,78 +17,78 @@ import "@spectrum-web-components/menu/sp-menu-item.js";
 import "@spectrum-web-components/menu/sp-menu.js";
 
 export default {
-	component: "sp-menu-item",
-	title: "Menu Item",
+  component: "sp-menu-item",
+  title: "Menu Item",
 };
 
 export const Default = (): TemplateResult => {
-	return html`
-		
-			Menu Item
-		
-	`;
+  return html`
+    
+      Menu Item
+    
+  `;
 };
 
 export const noWrap = (): TemplateResult => {
-	return html`
-		
-			
-				Select a Country with a very long label, too long, in fact
-			
-		
-	`;
+  return html`
+    
+      
+        Select a Country with a very long label, too long, in fact
+      
+    
+  `;
 };
 
 export const descriptionSlot = (): TemplateResult => {
-	return html`
-		
-			
-				Quick export
-				Share a snapshot
-			
-		
-	`;
+  return html`
+    
+      
+        Quick export
+        Share a snapshot
+      
+    
+  `;
 };
 
 export const valueSlot = (): TemplateResult => {
-	/**
-	 * This story features zero width spaces between the characters in the `` element.
-	 * While their absence has not caused issues in the local Storybook, the visual regression
-	 * suite was causing the `⌘` character to display different between the various Menu Items
-	 * without the intervening zero width space character. When reviewing in the future,
-	 * `font-variant-ligatures: none` was also not enough to address this situation.
-	 */
-	return html`
-		
-		
-			
-				Save
-				⌘S
-			
-			
-				Save As...
-				⇧⌘S
-			
-			
-				Save All
-				⌥⌘S
-			
-		
-	`;
+  /**
+   * This story features zero width spaces between the characters in the `` element.
+   * While their absence has not caused issues in the local Storybook, the visual regression
+   * suite was causing the `⌘` character to display different between the various Menu Items
+   * without the intervening zero width space character. When reviewing in the future,
+   * `font-variant-ligatures: none` was also not enough to address this situation.
+   */
+  return html`
+    
+    
+      
+        Save
+        ⌘S
+      
+      
+        Save As...
+        ⇧⌘S
+      
+      
+        Save All
+        ⌥⌘S
+      
+    
+  `;
 };
 
 export const href = (): TemplateResult => {
-	return html`
-		
-			
-				
-				Edit the Documentation Site
-			
-		
-	`;
+  return html`
+    
+      
+        
+        Edit the Documentation Site
+      
+    
+  `;
 };
diff --git a/packages/menu/stories/menu-sizes.stories.ts b/packages/menu/stories/menu-sizes.stories.ts
index bac1ef6d2c..09bf1ec5f8 100644
--- a/packages/menu/stories/menu-sizes.stories.ts
+++ b/packages/menu/stories/menu-sizes.stories.ts
@@ -14,8 +14,8 @@ import { TemplateResult } from "@spectrum-web-components/base";
 import { MenuMarkup } from ".//index.js";
 
 export default {
-	component: "sp-menu",
-	title: "Menu/Sizes",
+  component: "sp-menu",
+  title: "Menu/Sizes",
 };
 
 export const S = (): TemplateResult => MenuMarkup({ size: "s" });
diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts
index 95b3fd24b1..bc5cb08edc 100644
--- a/packages/menu/stories/menu.stories.ts
+++ b/packages/menu/stories/menu.stories.ts
@@ -26,394 +26,394 @@ import "@spectrum-web-components/icons-workflow/icons/sp-icon-share.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
 
 export default {
-	component: "sp-menu",
-	title: "Menu",
+  component: "sp-menu",
+  title: "Menu",
 };
 
 export const Default = (): TemplateResult => {
-	return html`
-		
-			Deselect
-			Select Inverse
-			Feather...
-			Select and Mask...
-			
-			Save Selection
-			Make Work Path
-		
+  return html`
+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      
+      Save Selection
+      Make Work Path
+    
 
-		
-			
-				Deselect
-				Select Inverse
-				Feather...
-				Select and Mask...
-				
-				Save Selection
-				Make Work Path
-			
-		
-	`;
+    
+      
+        Deselect
+        Select Inverse
+        Feather...
+        Select and Mask...
+        
+        Save Selection
+        Make Work Path
+      
+    
+  `;
 };
 
 export const singleSelect = (): TemplateResult => {
-	return html`
-		 {
-				navigator.clipboard.writeText(value);
-			}}
-		>
-			Deselect
-			Select Inverse
-			Feather...
-			Select and Mask...
-			
-			Save Selection
-			Make Work Path
-		
+  return html`
+     {
+        navigator.clipboard.writeText(value);
+      }}
+    >
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      
+      Save Selection
+      Make Work Path
+    
 
-		
-			 {
-					navigator.clipboard.writeText(value);
-				}}
-			>
-				Deselect
-				Select Inverse
-				Feather...
-				Select and Mask...
-				
-				Save Selection
-				Make Work Path
-			
-		
-	`;
+    
+       {
+          navigator.clipboard.writeText(value);
+        }}
+      >
+        Deselect
+        Select Inverse
+        Feather...
+        Select and Mask...
+        
+        Save Selection
+        Make Work Path
+      
+    
+  `;
 };
 
 export const multipleSelect = (): TemplateResult => {
-	return html`
-		
-			Deselect
-			Select Inverse
-			Feather...
-			Select and Mask...
-			
-			Save Selection
-			Make Work Path
-		
+  return html`
+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      
+      Save Selection
+      Make Work Path
+    
 
-		
-			
-				Deselect
-				Select Inverse
-				Feather...
-				Select and Mask...
-				
-				Save Selection
-				Make Work Path
-			
-		
-	`;
+    
+      
+        Deselect
+        Select Inverse
+        Feather...
+        Select and Mask...
+        
+        Save Selection
+        Make Work Path
+      
+    
+  `;
 };
 
 export const controlled = (): TemplateResult => {
-	const forceSelection = (event: Event & { target: Menu }): void => {
-		event.target.updateComplete.then(() => {
-			event.target.selected = ["Select and Mask..."];
-		});
-	};
+  const forceSelection = (event: Event & { target: Menu }): void => {
+    event.target.updateComplete.then(() => {
+      event.target.selected = ["Select and Mask..."];
+    });
+  };
 
-	return html`
-		

-			This Menu will default to a
-			selected
-			value of
-			[ 'Feather...', 'Save Selection' ]
-			but then on any subsequent interaction be forced to a
-			selected
-			value of
-			[ 'Select and Mask...' ]
-			.
-		

-		
-			Deselect
-			Select Inverse
-			Feather...
-			Select and Mask...
-			
-			Save Selection
-			Make Work Path
-		
-	`;
+  return html`
+    

+      This Menu will default to a
+      selected
+      value of
+      [ 'Feather...', 'Save Selection' ]
+      but then on any subsequent interaction be forced to a
+      selected
+      value of
+      [ 'Select and Mask...' ]
+      .
+    

+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      
+      Save Selection
+      Make Work Path
+    
+  `;
 };
 controlled.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 controlled.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const menuItemWithDescription = (): TemplateResult => {
-	return html`
-		
-			
-				
-				Quick export
-				Share a snapshot
-			
-			
-				
-				Open a copy
-				Illustrator for iPad
-			
-			
-				
-				Share link
-				Enable comments and download
-			
-		
+  return html`
+    
+      
+        
+        Quick export
+        Share a snapshot
+      
+      
+        
+        Open a copy
+        Illustrator for iPad
+      
+      
+        
+        Share link
+        Enable comments and download
+      
+    
 
-		
-			
-				Deselect
-				
-					Select Inverse
-					Enable inverse selection
-				
-				Feather...
-				Select and Mask...
-				
-				Save Selection
-				
-					Make Work Path
-					Create a reusable work path
-				
-			
-		
-	`;
+    
+      
+        Deselect
+        
+          Select Inverse
+          Enable inverse selection
+        
+        Feather...
+        Select and Mask...
+        
+        Save Selection
+        
+          Make Work Path
+          Create a reusable work path
+        
+      
+    
+  `;
 };
 
 export const selectsWithIcons = (): TemplateResult => {
-	return html`
-		
-			
-				
-					
-					Quick export
-				
-				
-					
-					Open a copy
-				
-				
-					
-					Share link
-					Enable comments and download
-				
-			
-		
-	`;
+  return html`
+    
+      
+        
+          
+          Quick export
+        
+        
+          
+          Open a copy
+        
+        
+          
+          Share link
+          Enable comments and download
+        
+      
+    
+  `;
 };
 
 export const headersAndIcons = (): TemplateResult => {
-	return html`
-		
-			
-				
-					Section Heading
-					Action 1
-					Action 2
-					Action 3
-				
-				
-				
-					Section Heading
-					
-						
-						Save
-					
-					
-						
-						Download
-					
-					
-						
-						Share link
-						Enable comments
-					
-				
-			
-		
-	`;
+  return html`
+    
+      
+        
+          Section Heading
+          Action 1
+          Action 2
+          Action 3
+        
+        
+        
+          Section Heading
+          
+            
+            Save
+          
+          
+            
+            Download
+          
+          
+            
+            Share link
+            Enable comments
+          
+        
+      
+    
+  `;
 };
 
 headersAndIcons.storyName = "Headers and Icons";
 
 export const Selected = (): TemplateResult => {
-	return html`
-		
-			
-				
-					San Francisco
-					Financial District
-					South of Market
-					North Beach
-				
-				
-				
-					Oakland
-					City Center
-					Jack London Square
-					
-						My best friend's mom's house in the burbs just off Silverado street
-					
-				
-			
-		
-	`;
+  return html`
+    
+      
+        
+          San Francisco
+          Financial District
+          South of Market
+          North Beach
+        
+        
+        
+          Oakland
+          City Center
+          Jack London Square
+          
+            My best friend's mom's house in the burbs just off Silverado street
+          
+        
+      
+    
+  `;
 };
 
 export const MenuGroupSelects = (): TemplateResult => {
-	return html`
-		
-			
-				
-					One of these
-					Camden
-					Cedar Riverside
-					Downtown
-					Northeast Arts District
-					Uptown
-				
-				
-					Or of these
-					Lowertown
-					Grand Ave
-				
-				
-					Many of these
-					Financial District
-					South of Market
-					North Beach
-				
-				
-				
-					One of these
-					City Center
-					Jack London Square
-					
-						My best friend's mom's house in the burbs just off Silverado street
-					
-				
-			
-		
-	`;
+  return html`
+    
+      
+        
+          One of these
+          Camden
+          Cedar Riverside
+          Downtown
+          Northeast Arts District
+          Uptown
+        
+        
+          Or of these
+          Lowertown
+          Grand Ave
+        
+        
+          Many of these
+          Financial District
+          South of Market
+          North Beach
+        
+        
+        
+          One of these
+          City Center
+          Jack London Square
+          
+            My best friend's mom's house in the burbs just off Silverado street
+          
+        
+      
+    
+  `;
 };
 
 export const selectedOffPage = (): TemplateResult => {
-	return html`
-		

-			In this example the \`<sp-menu-item selected>\` element is off the
-			visible page by default, but does not alter the page scroll on load.
-		

-		
-			
-				My best friend's mom's house in the burbs just off Silverado street
-			
-		
-	`;
+  return html`
+    

+      In this example the \`<sp-menu-item selected>\` element is off the
+      visible page by default, but does not alter the page scroll on load.
+    

+    
+      
+        My best friend's mom's house in the burbs just off Silverado street
+      
+    
+  `;
 };
 
 export const MenuGroupSelectsMultiple = (): TemplateResult => {
-	return html`
-		
-			
-				
-					Many of these
-					Camden
-					Cedar Riverside
-					Downtown
-					Northeast Arts District
-					Uptown
-				
-				
-					And these, too
-					Lowertown
-					Grand Ave
-				
-				
-					None of these
-					Financial District
-					South of Market
-					North Beach
-				
-				
-				
-					One of these
-					City Center
-					Jack London Square
-					
-						My best friend's mom's house in the burbs just off Silverado street
-					
-				
-			
-		
-	`;
+  return html`
+    
+      
+        
+          Many of these
+          Camden
+          Cedar Riverside
+          Downtown
+          Northeast Arts District
+          Uptown
+        
+        
+          And these, too
+          Lowertown
+          Grand Ave
+        
+        
+          None of these
+          Financial District
+          South of Market
+          North Beach
+        
+        
+        
+          One of these
+          City Center
+          Jack London Square
+          
+            My best friend's mom's house in the burbs just off Silverado street
+          
+        
+      
+    
+  `;
 };
 
 export const menuWithValueSlots = (): TemplateResult => {
-	return html`
-		
-			
-				Undo
-				⌘Z
-			
-			
-				Redo
-				⇧⌘Z
-			
-			
-			
-				Cut
-				⌘X
-			
-			
-				Copy
-				⌘S
-			
-			
-				Paste
-				⌘P
-			
-		
-		
-			
-				
-					Undo
-					⌘Z
-				
-				
-					Redo
-					⇧⌘Z
-				
-				
-				
-					Cut
-					⌘X
-				
-				
-					Copy
-					⌘S
-				
-				
-					Paste
-					⌘P
-				
-			
-		
-	`;
+  return html`
+    
+      
+        Undo
+        ⌘Z
+      
+      
+        Redo
+        ⇧⌘Z
+      
+      
+      
+        Cut
+        ⌘X
+      
+      
+        Copy
+        ⌘S
+      
+      
+        Paste
+        ⌘P
+      
+    
+    
+      
+        
+          Undo
+          ⌘Z
+        
+        
+          Redo
+          ⇧⌘Z
+        
+        
+        
+          Cut
+          ⌘X
+        
+        
+          Copy
+          ⌘S
+        
+        
+          Paste
+          ⌘P
+        
+      
+    
+  `;
 };
diff --git a/packages/menu/stories/submenu.stories.ts b/packages/menu/stories/submenu.stories.ts
index 0a124b0003..d5854070f1 100644
--- a/packages/menu/stories/submenu.stories.ts
+++ b/packages/menu/stories/submenu.stories.ts
@@ -24,387 +24,387 @@ import { Overlay, VirtualTrigger } from "@spectrum-web-components/overlay";
 import "@spectrum-web-components/popover/sp-popover.js";
 
 export default {
-	component: "sp-menu",
-	title: "Menu/Submenu",
+  component: "sp-menu",
+  title: "Menu/Submenu",
 };
 
 function nextFrame(): Promise {
-	return new Promise((res) => requestAnimationFrame(() => res()));
+  return new Promise((res) => requestAnimationFrame(() => res()));
 }
 
 class SubmenuReady extends HTMLElement {
-	ready!: (value: boolean | PromiseLike) => void;
-
-	constructor() {
-		super();
-		this.readyPromise = new Promise((res) => {
-			this.ready = res;
-			this.setup();
-		});
-	}
-
-	menu!: ActionMenu;
-	submenu!: MenuItem;
-	submenuChild!: MenuItem;
-
-	async setup(): Promise {
-		await nextFrame();
-
-		this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;
-		this.menu.addEventListener("sp-opened", this.handleMenuOpened);
-		this.menu.addEventListener(
-			"sp-closed",
-			() => {
-				this.menu.removeEventListener("sp-opened", this.handleMenuOpened);
-			},
-			{ once: true },
-		);
-		this.menu.open = true;
-	}
-
-	handleMenuOpened = async (event: Event): Promise => {
-		this.menu.removeEventListener("sp-opened", this.handleMenuOpened);
-		await nextFrame();
-		await (event.target as ActionMenu).updateComplete;
-
-		this.submenu = document.querySelector("#submenu-item-1") as MenuItem;
-
-		if (!this.submenu) {
-			return;
-		}
-
-		this.submenu.addEventListener("sp-opened", this.handleSubmenuOpened);
-		this.submenu.click();
-	};
-
-	handleSubmenuOpened = async (event: Event): Promise => {
-		this.submenu.removeEventListener("sp-opened", this.handleSubmenuOpened);
-		await nextFrame();
-		await (event.target as MenuItem).updateComplete;
-
-		this.submenuChild = document.querySelector("#submenu-item-2") as MenuItem;
-
-		if (!this.submenuChild) {
-			return;
-		}
-
-		this.submenuChild.addEventListener(
-			"sp-opened",
-			this.handleSubmenuChildOpened,
-		);
-		this.submenuChild.click();
-	};
-
-	handleSubmenuChildOpened = async (event: Event): Promise => {
-		this.submenuChild.removeEventListener(
-			"sp-opened",
-			this.handleSubmenuChildOpened,
-		);
-		await nextFrame();
-		await (event.target as MenuItem).updateComplete;
-
-		this.ready(true);
-	};
-
-	private readyPromise: Promise = Promise.resolve(false);
-
-	get updateComplete(): Promise {
-		return this.readyPromise;
-	}
+  ready!: (value: boolean | PromiseLike) => void;
+
+  constructor() {
+    super();
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
+
+  menu!: ActionMenu;
+  submenu!: MenuItem;
+  submenuChild!: MenuItem;
+
+  async setup(): Promise {
+    await nextFrame();
+
+    this.menu = document.querySelector("sp-action-menu") as ActionMenu;
+    this.menu.addEventListener("sp-opened", this.handleMenuOpened);
+    this.menu.addEventListener(
+      "sp-closed",
+      () => {
+        this.menu.removeEventListener("sp-opened", this.handleMenuOpened);
+      },
+      { once: true },
+    );
+    this.menu.open = true;
+  }
+
+  handleMenuOpened = async (event: Event): Promise => {
+    this.menu.removeEventListener("sp-opened", this.handleMenuOpened);
+    await nextFrame();
+    await (event.target as ActionMenu).updateComplete;
+
+    this.submenu = document.querySelector("#submenu-item-1") as MenuItem;
+
+    if (!this.submenu) {
+      return;
+    }
+
+    this.submenu.addEventListener("sp-opened", this.handleSubmenuOpened);
+    this.submenu.click();
+  };
+
+  handleSubmenuOpened = async (event: Event): Promise => {
+    this.submenu.removeEventListener("sp-opened", this.handleSubmenuOpened);
+    await nextFrame();
+    await (event.target as MenuItem).updateComplete;
+
+    this.submenuChild = document.querySelector("#submenu-item-2") as MenuItem;
+
+    if (!this.submenuChild) {
+      return;
+    }
+
+    this.submenuChild.addEventListener(
+      "sp-opened",
+      this.handleSubmenuChildOpened,
+    );
+    this.submenuChild.click();
+  };
+
+  handleSubmenuChildOpened = async (event: Event): Promise => {
+    this.submenuChild.removeEventListener(
+      "sp-opened",
+      this.handleSubmenuChildOpened,
+    );
+    await nextFrame();
+    await (event.target as MenuItem).updateComplete;
+
+    this.ready(true);
+  };
+
+  private readyPromise: Promise = Promise.resolve(false);
+
+  get updateComplete(): Promise {
+    return this.readyPromise;
+  }
 }
 
 customElements.define("submenu-ready", SubmenuReady);
 
 const submenuDecorator = (story: () => TemplateResult): TemplateResult => {
-	return html`
-		${story()}
-		
-	`;
+  return html`
+    ${story()}
+    
+  `;
 };
 
 export const submenu = (): TemplateResult => {
-	const getValueEls = (): {
-		root: HTMLElement;
-		first: HTMLElement;
-		second: HTMLElement;
-	} => {
-		return {
-			root: document.querySelector("#root-value") as HTMLElement,
-			first: document.querySelector("#first-value") as HTMLElement,
-			second: document.querySelector("#second-value") as HTMLElement,
-		};
-	};
-	const clearValues = (): void => {
-		const valueEls = getValueEls();
-
-		valueEls.root.textContent = "";
-		valueEls.first.textContent = "";
-		valueEls.second.textContent = "";
-	};
-	const handleRootChange = (event: Event & { target: ActionMenu }): void => {
-		const valueEls = getValueEls();
-
-		valueEls.root.textContent = event.target.value;
-	};
-	const handleFirstDescendantChange = (
-		event: Event & { target: Menu },
-	): void => {
-		const valueEls = getValueEls();
-
-		valueEls.first.textContent = event.target.selected[0] || "";
-	};
-	const handleSecondDescendantChange = (
-		event: Event & { target: Menu },
-	): void => {
-		const valueEls = getValueEls();
-
-		valueEls.second.textContent = event.target.selected[0] || "";
-	};
-
-	return html`
-		
-			
-			 console.log("group change")} role="none">
-				New York
-				Bronx
-				
-					Brooklyn
-					
-						
-							Ft. Greene
-							
-								S. Oxford St
-								S. Portland Ave
-								S. Elliot Pl
-							
-						
-						Park Slope
-						Williamsburg
-					
-				
-				
-					Manhattan
-					
-						SoHo
-						
-							Union Square
-							
-								14th St
-								Broadway
-								Park Ave
-							
-						
-						Upper East Side
-					
-				
-				
-					Queens
-					
-						 You shouldn't be able to see this! 
-						Forest Hills
-						Jamaica
-					
-				
-			
-		
-		

-			Root value:
-			
-			

-			First descendant value:
-			
-			

-			Second descendant value:
-			
-			

-		

-	`;
+  const getValueEls = (): {
+    root: HTMLElement;
+    first: HTMLElement;
+    second: HTMLElement;
+  } => {
+    return {
+      root: document.querySelector("#root-value") as HTMLElement,
+      first: document.querySelector("#first-value") as HTMLElement,
+      second: document.querySelector("#second-value") as HTMLElement,
+    };
+  };
+  const clearValues = (): void => {
+    const valueEls = getValueEls();
+
+    valueEls.root.textContent = "";
+    valueEls.first.textContent = "";
+    valueEls.second.textContent = "";
+  };
+  const handleRootChange = (event: Event & { target: ActionMenu }): void => {
+    const valueEls = getValueEls();
+
+    valueEls.root.textContent = event.target.value;
+  };
+  const handleFirstDescendantChange = (
+    event: Event & { target: Menu },
+  ): void => {
+    const valueEls = getValueEls();
+
+    valueEls.first.textContent = event.target.selected[0] || "";
+  };
+  const handleSecondDescendantChange = (
+    event: Event & { target: Menu },
+  ): void => {
+    const valueEls = getValueEls();
+
+    valueEls.second.textContent = event.target.selected[0] || "";
+  };
+
+  return html`
+    
+      
+       console.log("group change")} role="none">
+        New York
+        Bronx
+        
+          Brooklyn
+          
+            
+              Ft. Greene
+              
+                S. Oxford St
+                S. Portland Ave
+                S. Elliot Pl
+              
+            
+            Park Slope
+            Williamsburg
+          
+        
+        
+          Manhattan
+          
+            SoHo
+            
+              Union Square
+              
+                14th St
+                Broadway
+                Park Ave
+              
+            
+            Upper East Side
+          
+        
+        
+          Queens
+          
+             You shouldn't be able to see this! 
+            Forest Hills
+            Jamaica
+          
+        
+      
+    
+    

+      Root value:
+      
+      

+      First descendant value:
+      
+      

+      Second descendant value:
+      
+      

+    

+  `;
 };
 
 submenu.decorators = [submenuDecorator];
 
 export const contextMenu = (): TemplateResult => {
-	const contextmenu = async (event: PointerEvent): Promise => {
-		event.preventDefault();
-		const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
-		const overlay = document.querySelector("sp-overlay") as Overlay;
-
-		clearValues();
-		overlay.triggerElement = virtualTrigger;
-		overlay.willPreventClose = true;
-		overlay.type = "auto";
-		overlay.placement = "right-start";
-		overlay.open = true;
-	};
-	const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {
-		return {
-			root: document.querySelector("#root-value") as HTMLElement,
-			first: document.querySelector("#first-value") as HTMLElement,
-		};
-	};
-	const clearValues = (): void => {
-		const valueEls = getValueEls();
-
-		valueEls.root.textContent = "";
-		valueEls.first.textContent = "";
-	};
-	const handleRootChange = (event: Event & { target: ActionMenu }): void => {
-		const valueEls = getValueEls();
-
-		valueEls.root.textContent = event.target.value;
-		event.target.parentElement?.dispatchEvent(
-			new Event("close", { bubbles: true }),
-		);
-	};
-	const handleFirstDescendantChange = (
-		event: Event & { target: Menu },
-	): void => {
-		const valueEls = getValueEls();
-
-		valueEls.first.textContent = event.target.selected[0] || "";
-	};
-
-	return html`
-		
-		

-			

-				Root value:
-				
-				

-				First descendant value:
-				
-				

-			

-		

-		
-			
-					event.target?.dispatchEvent(new Event("close", { bubbles: true }))}
-			>
-				
-					
-						Options
-						
-							Copy
-							⌘S
-						
-						
-							Paste
-							⌘P
-						
-						
-							Cut
-							⌘X
-						
-						
-						
-							Select layer
-							
-								Ellipse 1
-								Rectangle
-							
-						
-						
-							Group
-							⌘G
-						
-						
-							Unlock
-							⌘L
-						
-						
-						
-							Bring to front
-							⇧⌘]
-						
-						
-							Bring forward
-							⌘]
-						
-						
-							Send backward
-							⌘[
-						
-						
-							Send to back
-							⇧⌘[
-						
-						
-						
-							Delete
-							DEL
-						
-					
-				
-			
-		
-	`;
+  const contextmenu = async (event: PointerEvent): Promise => {
+    event.preventDefault();
+    const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
+    const overlay = document.querySelector("sp-overlay") as Overlay;
+
+    clearValues();
+    overlay.triggerElement = virtualTrigger;
+    overlay.willPreventClose = true;
+    overlay.type = "auto";
+    overlay.placement = "right-start";
+    overlay.open = true;
+  };
+  const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {
+    return {
+      root: document.querySelector("#root-value") as HTMLElement,
+      first: document.querySelector("#first-value") as HTMLElement,
+    };
+  };
+  const clearValues = (): void => {
+    const valueEls = getValueEls();
+
+    valueEls.root.textContent = "";
+    valueEls.first.textContent = "";
+  };
+  const handleRootChange = (event: Event & { target: ActionMenu }): void => {
+    const valueEls = getValueEls();
+
+    valueEls.root.textContent = event.target.value;
+    event.target.parentElement?.dispatchEvent(
+      new Event("close", { bubbles: true }),
+    );
+  };
+  const handleFirstDescendantChange = (
+    event: Event & { target: Menu },
+  ): void => {
+    const valueEls = getValueEls();
+
+    valueEls.first.textContent = event.target.selected[0] || "";
+  };
+
+  return html`
+    
+    

+      

+        Root value:
+        
+        

+        First descendant value:
+        
+        

+      

+    

+    
+      
+          event.target?.dispatchEvent(new Event("close", { bubbles: true }))}
+      >
+        
+          
+            Options
+            
+              Copy
+              ⌘S
+            
+            
+              Paste
+              ⌘P
+            
+            
+              Cut
+              ⌘X
+            
+            
+            
+              Select layer
+              
+                Ellipse 1
+                Rectangle
+              
+            
+            
+              Group
+              ⌘G
+            
+            
+              Unlock
+              ⌘L
+            
+            
+            
+              Bring to front
+              ⇧⌘]
+            
+            
+              Bring forward
+              ⌘]
+            
+            
+              Send backward
+              ⌘[
+            
+            
+              Send to back
+              ⇧⌘[
+            
+            
+            
+              Delete
+              DEL
+            
+          
+        
+      
+    
+  `;
 };
 
 export const customRootSubmenu = (): TemplateResult => {
-	return html`
-		
-			Bronx
-			
-				Brooklyn
-				

-					Kitten
-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-					
I am an arbitrary content in submenu

-				

-			
-		
-	`;
+  return html`
+    
+      Bronx
+      
+        Brooklyn
+        

+          Kitten
+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+          
I am an arbitrary content in submenu

+        

+      
+    
+  `;
 };
 
 customRootSubmenu.swc_vrt = {
-	skip: true,
+  skip: true,
 };
diff --git a/packages/menu/test/benchmark/test-basic.ts b/packages/menu/test/benchmark/test-basic.ts
index 8a5684f8b7..b4e0289067 100644
--- a/packages/menu/test/benchmark/test-basic.ts
+++ b/packages/menu/test/benchmark/test-basic.ts
@@ -10,26 +10,26 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
-            Section Heading
-            Action 1
-            Action 2
-            Action 3
-        
-        
-        
-            Section Heading
-            Save
-            Download
-        
-    
+  
+    
+      Section Heading
+      Action 1
+      Action 2
+      Action 3
+    
+    
+    
+      Section Heading
+      Save
+      Download
+    
+  
 `);
diff --git a/packages/menu/test/menu-group.test.ts b/packages/menu/test/menu-group.test.ts
index 0c5c5769e5..ded293c1f4 100644
--- a/packages/menu/test/menu-group.test.ts
+++ b/packages/menu/test/menu-group.test.ts
@@ -9,468 +9,453 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import { Menu, MenuGroup, MenuItem } from '@spectrum-web-components/menu';
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import { Menu, MenuGroup, MenuItem } from "@spectrum-web-components/menu";
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    oneEvent,
-    waitUntil,
-} from '@open-wc/testing';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-import { complexSlotted } from '../stories/menu-group.stories.js';
-import { ComplexSlottedGroup, ComplexSlottedMenu } from '../stories/index.js';
-import { sendKeys } from '@web/test-runner-commands';
-import { sendMouse } from '../../../test/plugins/browser.js';
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  oneEvent,
+  waitUntil,
+} from "@open-wc/testing";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { complexSlotted } from "../stories/menu-group.stories.js";
+import { ComplexSlottedGroup, ComplexSlottedMenu } from "../stories/index.js";
+import { sendKeys } from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
 
 const managedItems = (menu: Menu | MenuGroup): MenuItem[] => {
-    return menu.childItems.filter(
-        (item: MenuItem) => item.menuData.selectionRoot === menu
-    );
+  return menu.childItems.filter(
+    (item: MenuItem) => item.menuData.selectionRoot === menu,
+  );
 };
 
 const focusableItems = (menu: Menu | MenuGroup): MenuItem[] => {
-    return menu.childItems.filter(
-        (item: MenuItem) => item.menuData.focusRoot === menu
-    );
+  return menu.childItems.filter(
+    (item: MenuItem) => item.menuData.focusRoot === menu,
+  );
 };
 
-describe('Menu group', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-                    
-                        Section Heading
-                        Action 1
-                        Action 2
-                        Action 3
-                    
-                    
-                    
-                        Section Heading
-                        Save
-                        Download
-                    
-                
-            `)
+describe("Menu group", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+          
+            Section Heading
+            Action 1
+            Action 2
+            Action 3
+          
+          
+          
+            Section Heading
+            Save
+            Download
+          
+        
+      `),
+  );
+  it("renders", async () => {
+    const el = await fixture(html`
+      
+        
+          Section Heading
+          Action 1
+          Action 2
+          Action 3
+        
+        
+        
+          Section Heading
+          Save
+          Download
+        
+      
+    `);
+
+    await waitUntil(
+      () => {
+        return managedItems(el).length === 5;
+      },
+      `expected menu group to manage 5 children, received ${managedItems(el).length} of ${el.childItems.length}`,
     );
-    it('renders', async () => {
-        const el = await fixture(html`
-            
-                
-                    Section Heading
-                    Action 1
-                    Action 2
-                    Action 3
-                
-                
-                
-                    Section Heading
-                    Save
-                    Download
-                
-            
-        `);
-
-        await waitUntil(
-            () => {
-                return managedItems(el).length === 5;
-            },
-            `expected menu group to manage 5 children, received ${managedItems(el).length} of ${el.childItems.length}`
-        );
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-    it('manages [slot="header"] content', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        const slot = el.shadowRoot.querySelector(
-            '[name="header"'
-        ) as HTMLSlotElement;
-        const header = document.createElement('span');
-
-        header.textContent = 'Header';
-        header.slot = 'header';
-        expect(header.id).to.equal('');
-        let slotchanged = oneEvent(slot, 'slotchange');
-
-        el.append(header);
-        await slotchanged;
-        expect(header.id).to.equal(
-            (el as unknown as { headerId: string }).headerId
-        );
-
-        slotchanged = oneEvent(slot, 'slotchange');
-        header.remove();
-        await slotchanged;
-        expect(header.id).to.equal('');
-    });
-    it('handles selects for nested menu groups', async () => {
-        const el = await fixture(html`
-            
-                First
-                
-                Second
-                
-                
-                    Multi1
-                    
-                    Multi2
-                    
-                    
-                        SubInherit1
-                        
-                        SubInherit2
-                        
-                    
-                
-                
-                    Single1
-                    
-                    Single2
-                    
-                
-                
-                    Inherit1
-                    
-                    Inherit2
-                    
-                
-                
-                    Inherit1
-                    
-                    Inherit2
-                    
-                
-            
-        `);
-
-        // 1 & 3 should be menuitemradio
-        // 2 shouwl menuitemcheckbox
-
-        await waitUntil(
-            () => managedItems(el).length === 4,
-            `expected outer menu to manage 4 items (2 are inherited), got ${
-                managedItems(el).length
-            }, with ${el.childItems.length} total`
-        );
-        await waitUntil(
-            () => el.selectedItems.length === 1,
-            'expected 1 selected item'
-        );
-        await elementUpdated(el);
-
-        const firstItem = el.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-
-        const secondItem = el.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        const multiGroup = el.querySelector(
-            'sp-menu-group#mg-multi'
-        ) as MenuGroup;
-        const multiItem1 = multiGroup.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-        const multiItem2 = multiGroup.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        await waitUntil(
-            () => managedItems(multiGroup).length === 4,
-            `selects="#mg-multi should manage 4 items (2 are inherited), received ${
-                managedItems(multiGroup).length
-            }`
-        );
-
-        const singleGroup = el.querySelector(
-            'sp-menu-group#mg-single'
-        ) as MenuGroup;
-
-        const singleItem1 = singleGroup.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-        const singleItem2 = singleGroup.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        await waitUntil(
-            () => managedItems(singleGroup).length === 2,
-            'selects="#mg-none should manage 4 items (2 are inherited)'
-        );
-
-        const noneGroup = el.querySelector(
-            'sp-menu-group#mg-none'
-        ) as MenuGroup;
-        const noneItem1 = noneGroup.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-        const noneItem2 = noneGroup.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        await waitUntil(
-            () => managedItems(noneGroup).length === 2,
-            `selects="#mg-none" should manage 2 items, received ${
-                managedItems(noneGroup).length
-            }`
-        );
-
-        const inheritGroup = el.querySelector(
-            'sp-menu-group#mg-inherit'
-        ) as MenuGroup;
-        const inheritItem1 = inheritGroup.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-        const inheritItem2 = inheritGroup.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        expect(firstItem.getAttribute('role')).to.equal('menuitemradio');
-        expect(secondItem.getAttribute('role')).to.equal('menuitemradio');
-        expect(multiItem1.getAttribute('role')).to.equal('menuitemcheckbox');
-        expect(multiItem2.getAttribute('role')).to.equal('menuitemcheckbox');
-        expect(singleItem1.getAttribute('role')).to.equal('menuitemradio');
-        expect(singleItem2.getAttribute('role')).to.equal('menuitemradio');
-        expect(noneItem1.getAttribute('role')).to.equal('menuitem');
-        expect(noneItem2.getAttribute('role')).to.equal('menuitem');
-        expect(inheritItem1.getAttribute('role')).to.equal('menuitemradio');
-        expect(inheritItem2.getAttribute('role')).to.equal('menuitemradio');
-
-        await elementUpdated(firstItem);
-        expect(singleItem1.selected).to.be.true;
-        expect(firstItem.selected).to.be.true;
-        expect(secondItem.selected, 'second item not selected').to.be.false;
-        expect(el.value).to.equal('First');
-        expect(el.selectedItems.length).to.equal(1);
-
-        expect(firstItem.getAttribute('aria-checked')).to.equal('true');
-        expect(secondItem.getAttribute('aria-checked')).to.equal('false');
-
-        secondItem.click();
-        await elementUpdated(el);
-        await elementUpdated(firstItem);
-        await elementUpdated(secondItem);
-        expect(firstItem.selected, 'first item not selected').to.be.false;
-        expect(secondItem.selected).to.be.true;
-        expect(firstItem.getAttribute('aria-checked')).to.equal('false');
-        expect(secondItem.getAttribute('aria-checked')).to.equal('true');
-        expect(el.value).to.equal('Second');
-        expect(el.selectedItems.length).to.equal(1);
-
-        inheritItem1.click();
-        await elementUpdated(el);
-        await elementUpdated(inheritItem1);
-        await elementUpdated(secondItem);
-        expect(secondItem.selected, 'second item not selected again').to.be
-            .false;
-        expect(inheritItem1.selected).to.be.true;
-        expect(secondItem.getAttribute('aria-checked')).to.equal('false');
-        expect(inheritItem1.getAttribute('aria-checked')).to.equal('true');
-        expect(el.value).to.equal('Inherit1');
-        expect(el.selectedItems.length).to.equal(1);
-
-        noneItem2.click();
-        await elementUpdated(el);
-        await elementUpdated(noneGroup);
-        await elementUpdated(noneItem2);
-        expect(inheritItem1.selected).to.be.true;
-        expect(noneItem2.selected, 'none item not selected').to.be.false;
-        expect(el.value).to.equal('Inherit1');
-        expect(el.selectedItems.length).to.equal(1);
-
-        singleItem2.click();
-        await elementUpdated(singleGroup);
-        await elementUpdated(singleItem1);
-        await elementUpdated(singleItem2);
-        expect(singleItem2.selected).to.be.true;
-        expect(singleItem1.selected, 'first item not selected').to.be.false;
-        expect(inheritItem1.selected).to.be.true;
-        expect(singleItem1.getAttribute('aria-checked')).to.equal('false');
-        expect(singleItem2.getAttribute('aria-checked')).to.equal('true');
-        expect(el.value).to.equal('Inherit1');
-        expect(el.selectedItems.length).to.equal(1);
-        //expect(singleGroup.value).to.equal('Inherit1')
-        expect(singleGroup.selectedItems.length).to.equal(1);
-
-        multiItem2.click();
-        await elementUpdated(el);
-        await elementUpdated(multiItem2);
-        expect(multiItem1.selected).to.be.true;
-        expect(multiItem2.selected).to.be.true;
-        expect(inheritItem1.selected).to.be.true;
-        expect(multiItem1.getAttribute('aria-checked')).to.equal('true');
-        expect(multiItem2.getAttribute('aria-checked')).to.equal('true');
-        //expect(multiGroup.value).to.equal('Inherit1')
-        expect(multiGroup.selectedItems.length).to.equal(2);
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it('manages [slot="header"] content', async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    const slot = el.shadowRoot.querySelector(
+      '[name="header"',
+    ) as HTMLSlotElement;
+    const header = document.createElement("span");
+
+    header.textContent = "Header";
+    header.slot = "header";
+    expect(header.id).to.equal("");
+    let slotchanged = oneEvent(slot, "slotchange");
+
+    el.append(header);
+    await slotchanged;
+    expect(header.id).to.equal(
+      (el as unknown as { headerId: string }).headerId,
+    );
+
+    slotchanged = oneEvent(slot, "slotchange");
+    header.remove();
+    await slotchanged;
+    expect(header.id).to.equal("");
+  });
+  it("handles selects for nested menu groups", async () => {
+    const el = await fixture(html`
+      
+        First
+        
+        Second
+        
+        
+          Multi1
+          
+          Multi2
+          
+          
+            SubInherit1
+            
+            SubInherit2
+            
+          
+        
+        
+          Single1
+          
+          Single2
+          
+        
+        
+          Inherit1
+          
+          Inherit2
+          
+        
+        
+          Inherit1
+          
+          Inherit2
+          
+        
+      
+    `);
+
+    // 1 & 3 should be menuitemradio
+    // 2 shouwl menuitemcheckbox
+
+    await waitUntil(
+      () => managedItems(el).length === 4,
+      `expected outer menu to manage 4 items (2 are inherited), got ${
+        managedItems(el).length
+      }, with ${el.childItems.length} total`,
+    );
+    await waitUntil(
+      () => el.selectedItems.length === 1,
+      "expected 1 selected item",
+    );
+    await elementUpdated(el);
+
+    const firstItem = el.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+
+    const secondItem = el.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    const multiGroup = el.querySelector("sp-menu-group#mg-multi") as MenuGroup;
+    const multiItem1 = multiGroup.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+    const multiItem2 = multiGroup.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    await waitUntil(
+      () => managedItems(multiGroup).length === 4,
+      `selects="#mg-multi should manage 4 items (2 are inherited), received ${
+        managedItems(multiGroup).length
+      }`,
+    );
+
+    const singleGroup = el.querySelector(
+      "sp-menu-group#mg-single",
+    ) as MenuGroup;
+
+    const singleItem1 = singleGroup.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+    const singleItem2 = singleGroup.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    await waitUntil(
+      () => managedItems(singleGroup).length === 2,
+      'selects="#mg-none should manage 4 items (2 are inherited)',
+    );
+
+    const noneGroup = el.querySelector("sp-menu-group#mg-none") as MenuGroup;
+    const noneItem1 = noneGroup.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+    const noneItem2 = noneGroup.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    await waitUntil(
+      () => managedItems(noneGroup).length === 2,
+      `selects="#mg-none" should manage 2 items, received ${
+        managedItems(noneGroup).length
+      }`,
+    );
+
+    const inheritGroup = el.querySelector(
+      "sp-menu-group#mg-inherit",
+    ) as MenuGroup;
+    const inheritItem1 = inheritGroup.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+    const inheritItem2 = inheritGroup.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    expect(firstItem.getAttribute("role")).to.equal("menuitemradio");
+    expect(secondItem.getAttribute("role")).to.equal("menuitemradio");
+    expect(multiItem1.getAttribute("role")).to.equal("menuitemcheckbox");
+    expect(multiItem2.getAttribute("role")).to.equal("menuitemcheckbox");
+    expect(singleItem1.getAttribute("role")).to.equal("menuitemradio");
+    expect(singleItem2.getAttribute("role")).to.equal("menuitemradio");
+    expect(noneItem1.getAttribute("role")).to.equal("menuitem");
+    expect(noneItem2.getAttribute("role")).to.equal("menuitem");
+    expect(inheritItem1.getAttribute("role")).to.equal("menuitemradio");
+    expect(inheritItem2.getAttribute("role")).to.equal("menuitemradio");
+
+    await elementUpdated(firstItem);
+    expect(singleItem1.selected).to.be.true;
+    expect(firstItem.selected).to.be.true;
+    expect(secondItem.selected, "second item not selected").to.be.false;
+    expect(el.value).to.equal("First");
+    expect(el.selectedItems.length).to.equal(1);
+
+    expect(firstItem.getAttribute("aria-checked")).to.equal("true");
+    expect(secondItem.getAttribute("aria-checked")).to.equal("false");
+
+    secondItem.click();
+    await elementUpdated(el);
+    await elementUpdated(firstItem);
+    await elementUpdated(secondItem);
+    expect(firstItem.selected, "first item not selected").to.be.false;
+    expect(secondItem.selected).to.be.true;
+    expect(firstItem.getAttribute("aria-checked")).to.equal("false");
+    expect(secondItem.getAttribute("aria-checked")).to.equal("true");
+    expect(el.value).to.equal("Second");
+    expect(el.selectedItems.length).to.equal(1);
+
+    inheritItem1.click();
+    await elementUpdated(el);
+    await elementUpdated(inheritItem1);
+    await elementUpdated(secondItem);
+    expect(secondItem.selected, "second item not selected again").to.be.false;
+    expect(inheritItem1.selected).to.be.true;
+    expect(secondItem.getAttribute("aria-checked")).to.equal("false");
+    expect(inheritItem1.getAttribute("aria-checked")).to.equal("true");
+    expect(el.value).to.equal("Inherit1");
+    expect(el.selectedItems.length).to.equal(1);
+
+    noneItem2.click();
+    await elementUpdated(el);
+    await elementUpdated(noneGroup);
+    await elementUpdated(noneItem2);
+    expect(inheritItem1.selected).to.be.true;
+    expect(noneItem2.selected, "none item not selected").to.be.false;
+    expect(el.value).to.equal("Inherit1");
+    expect(el.selectedItems.length).to.equal(1);
+
+    singleItem2.click();
+    await elementUpdated(singleGroup);
+    await elementUpdated(singleItem1);
+    await elementUpdated(singleItem2);
+    expect(singleItem2.selected).to.be.true;
+    expect(singleItem1.selected, "first item not selected").to.be.false;
+    expect(inheritItem1.selected).to.be.true;
+    expect(singleItem1.getAttribute("aria-checked")).to.equal("false");
+    expect(singleItem2.getAttribute("aria-checked")).to.equal("true");
+    expect(el.value).to.equal("Inherit1");
+    expect(el.selectedItems.length).to.equal(1);
+    //expect(singleGroup.value).to.equal('Inherit1')
+    expect(singleGroup.selectedItems.length).to.equal(1);
+
+    multiItem2.click();
+    await elementUpdated(el);
+    await elementUpdated(multiItem2);
+    expect(multiItem1.selected).to.be.true;
+    expect(multiItem2.selected).to.be.true;
+    expect(inheritItem1.selected).to.be.true;
+    expect(multiItem1.getAttribute("aria-checked")).to.equal("true");
+    expect(multiItem2.getAttribute("aria-checked")).to.equal("true");
+    //expect(multiGroup.value).to.equal('Inherit1')
+    expect(multiGroup.selectedItems.length).to.equal(2);
+  });
+
+  it("handles changing managed items for selects changes", async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        
+          Inherit1
+          Inherit2
+          
+            SubInherit1
+            SubInherit2
+          
+        
+      
+    `);
+
+    await waitUntil(
+      () => managedItems(el).length == 6,
+      `expected outer menu to manage 6 items, manages ${
+        managedItems(el).length
+      }`,
+    );
+    await waitUntil(
+      () => el.selectedItems.length == 2,
+      "expected 2 selected item",
+    );
+    await elementUpdated(el);
+
+    const inheritGroup = el.querySelector(
+      "sp-menu-group#mg-inherit",
+    ) as MenuGroup;
+    const inheritItem1 = inheritGroup.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+    const inheritItem2 = inheritGroup.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    const subInheritGroup = el.querySelector(
+      "sp-menu-group#mg-sub-inherit",
+    ) as MenuGroup;
+    const subInheritItem1 = subInheritGroup.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+    const subInheritItem2 = subInheritGroup.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    expect(inheritItem1.getAttribute("role")).to.equal("menuitemcheckbox");
+    expect(inheritItem2.getAttribute("role")).to.equal("menuitemcheckbox");
+    expect(subInheritItem1.getAttribute("role")).to.equal("menuitemcheckbox");
+    expect(subInheritItem2.getAttribute("role")).to.equal("menuitemcheckbox");
+    expect(el.value).to.equal("First--SubInherit2");
+    expect(el.selectedItems.length).to.equal(2);
+    inheritGroup.setAttribute("selects", "single");
+
+    await elementUpdated(inheritGroup);
+    await elementUpdated(el);
+
+    await waitUntil(
+      () => {
+        return managedItems(inheritGroup).length === 4;
+      },
+      `expected new single sub-group to manage 4 items, received ${managedItems(inheritGroup).length} because "selects === ${inheritGroup.selects}`,
+    );
+
+    await waitUntil(
+      () => managedItems(el).length === 2,
+      `expected outer menu to manage 2 items with none inherited, received ${
+        managedItems(el).length
+      }`,
+    );
+    expect(inheritGroup.value).to.equal("SubInherit2");
+    expect(inheritGroup.selectedItems.length).to.equal(1);
+    expect(el.value).to.equal("First");
+    expect(inheritItem1.getAttribute("role")).to.equal("menuitemradio");
+    expect(inheritItem2.getAttribute("role")).to.equal("menuitemradio");
+    expect(subInheritItem1.getAttribute("role")).to.equal("menuitemradio");
+    expect(subInheritItem2.getAttribute("role")).to.equal("menuitemradio");
+  });
+  it("manages complex slotted menu items", async function () {
+    const el = await fixture(complexSlotted());
+
+    await waitUntil(
+      () => focusableItems(el.menu).length == 12,
+      `expected outer menu to manage 12 items, ${
+        el.menu.localName
+      } manages ${focusableItems(el.menu).length}`,
+    );
+
+    const menu = el.menu;
+    const items: Record = {};
+
+    items.i2 = el.querySelector("#i-2") as MenuItem;
+    items.i8 = el.querySelector("#i-8") as MenuItem;
+    items.i9 = el.querySelector("#i-9") as MenuItem;
+    items.i3 = el.renderRoot.querySelector("#i-3") as MenuItem;
+    items.i5 = el.renderRoot.querySelector("#i-5") as MenuItem;
+    items.i6 = el.renderRoot.querySelector("#i-6") as MenuItem;
+    items.i7 = el.renderRoot.querySelector("#i-7") as MenuItem;
+    const group = el.renderRoot.querySelector("#group") as ComplexSlottedGroup;
+
+    items.i1 = group.renderRoot.querySelector("#i-1") as MenuItem;
+    items.i4 = group.renderRoot.querySelector("#i-4") as MenuItem;
+    items.i10 = group.renderRoot.querySelector("#i-10") as MenuItem;
+    items.i11 = group.renderRoot.querySelector("#i-11") as MenuItem;
+    items.i12 = group.renderRoot.querySelector("#i-12") as MenuItem;
+
+    const rect = items.i9.getBoundingClientRect();
+
+    await sendMouse({
+      steps: [
+        {
+          position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+          type: "click",
+        },
+      ],
     });
+    await elementUpdated(items.i9);
 
-    it('handles changing managed items for selects changes', async () => {
-        const el = await fixture(html`
-            
-                First
-                Second
-                
-                    Inherit1
-                    Inherit2
-                    
-                        SubInherit1
-                        SubInherit2
-                    
-                
-            
-        `);
-
-        await waitUntil(
-            () => managedItems(el).length == 6,
-            `expected outer menu to manage 6 items, manages ${
-                managedItems(el).length
-            }`
-        );
-        await waitUntil(
-            () => el.selectedItems.length == 2,
-            'expected 2 selected item'
-        );
-        await elementUpdated(el);
-
-        const inheritGroup = el.querySelector(
-            'sp-menu-group#mg-inherit'
-        ) as MenuGroup;
-        const inheritItem1 = inheritGroup.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-        const inheritItem2 = inheritGroup.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        const subInheritGroup = el.querySelector(
-            'sp-menu-group#mg-sub-inherit'
-        ) as MenuGroup;
-        const subInheritItem1 = subInheritGroup.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-        const subInheritItem2 = subInheritGroup.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        expect(inheritItem1.getAttribute('role')).to.equal('menuitemcheckbox');
-        expect(inheritItem2.getAttribute('role')).to.equal('menuitemcheckbox');
-        expect(subInheritItem1.getAttribute('role')).to.equal(
-            'menuitemcheckbox'
-        );
-        expect(subInheritItem2.getAttribute('role')).to.equal(
-            'menuitemcheckbox'
-        );
-        expect(el.value).to.equal('First--SubInherit2');
-        expect(el.selectedItems.length).to.equal(2);
-        inheritGroup.setAttribute('selects', 'single');
-
-        await elementUpdated(inheritGroup);
-        await elementUpdated(el);
-
-        await waitUntil(
-            () => {
-                return managedItems(inheritGroup).length === 4;
-            },
-            `expected new single sub-group to manage 4 items, received ${managedItems(inheritGroup).length} because "selects === ${inheritGroup.selects}`
-        );
-
-        await waitUntil(
-            () => managedItems(el).length === 2,
-            `expected outer menu to manage 2 items with none inherited, received ${
-                managedItems(el).length
-            }`
-        );
-        expect(inheritGroup.value).to.equal('SubInherit2');
-        expect(inheritGroup.selectedItems.length).to.equal(1);
-        expect(el.value).to.equal('First');
-        expect(inheritItem1.getAttribute('role')).to.equal('menuitemradio');
-        expect(inheritItem2.getAttribute('role')).to.equal('menuitemradio');
-        expect(subInheritItem1.getAttribute('role')).to.equal('menuitemradio');
-        expect(subInheritItem2.getAttribute('role')).to.equal('menuitemradio');
+    await sendKeys({
+      press: "ArrowDown",
+    });
+    await sendKeys({
+      press: "ArrowUp",
     });
-    it('manages complex slotted menu items', async function () {
-        const el = await fixture(complexSlotted());
-
-        await waitUntil(
-            () => focusableItems(el.menu).length == 12,
-            `expected outer menu to manage 12 items, ${
-                el.menu.localName
-            } manages ${focusableItems(el.menu).length}`
-        );
-
-        const menu = el.menu;
-        const items: Record = {};
-
-        items.i2 = el.querySelector('#i-2') as MenuItem;
-        items.i8 = el.querySelector('#i-8') as MenuItem;
-        items.i9 = el.querySelector('#i-9') as MenuItem;
-        items.i3 = el.renderRoot.querySelector('#i-3') as MenuItem;
-        items.i5 = el.renderRoot.querySelector('#i-5') as MenuItem;
-        items.i6 = el.renderRoot.querySelector('#i-6') as MenuItem;
-        items.i7 = el.renderRoot.querySelector('#i-7') as MenuItem;
-        const group = el.renderRoot.querySelector(
-            '#group'
-        ) as ComplexSlottedGroup;
-
-        items.i1 = group.renderRoot.querySelector('#i-1') as MenuItem;
-        items.i4 = group.renderRoot.querySelector('#i-4') as MenuItem;
-        items.i10 = group.renderRoot.querySelector('#i-10') as MenuItem;
-        items.i11 = group.renderRoot.querySelector('#i-11') as MenuItem;
-        items.i12 = group.renderRoot.querySelector('#i-12') as MenuItem;
-
-        const rect = items.i9.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    position: [
-                        rect.left + rect.width / 2,
-                        rect.top + rect.height / 2,
-                    ],
-                    type: 'click',
-                },
-            ],
-        });
-        await elementUpdated(items.i9);
-
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        await sendKeys({
-            press: 'ArrowUp',
-        });
-        await elementUpdated(items.i9);
-        expect(items.i9.focused).to.be.true;
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        let i = 9;
-        const count = Object.keys(items).length + 1;
-
-        while (!items.i9.focused) {
-            i = Math.max(1, (i + 1 + count) % count);
-            await elementUpdated(menu);
-            await elementUpdated(items[`i${i}`]);
-            expect(items[`i${i}`].focused, `i${i} should be focused`).to.be
-                .true;
-            await sendKeys({
-                press: 'ArrowDown',
-            });
-            await elementUpdated(menu);
-            await elementUpdated(items[`i${i}`]);
-        }
+    await elementUpdated(items.i9);
+    expect(items.i9.focused).to.be.true;
+    await sendKeys({
+      press: "ArrowDown",
     });
+    let i = 9;
+    const count = Object.keys(items).length + 1;
+
+    while (!items.i9.focused) {
+      i = Math.max(1, (i + 1 + count) % count);
+      await elementUpdated(menu);
+      await elementUpdated(items[`i${i}`]);
+      expect(items[`i${i}`].focused, `i${i} should be focused`).to.be.true;
+      await sendKeys({
+        press: "ArrowDown",
+      });
+      await elementUpdated(menu);
+      await elementUpdated(items[`i${i}`]);
+    }
+  });
 });
diff --git a/packages/menu/test/menu-item.test.ts b/packages/menu/test/menu-item.test.ts
index 34e0b4e74f..abc92816d9 100644
--- a/packages/menu/test/menu-item.test.ts
+++ b/packages/menu/test/menu-item.test.ts
@@ -11,226 +11,222 @@ governing permissions and limitations under the License.
 */
 
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    waitUntil,
-} from '@open-wc/testing';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import { Menu, MenuItem } from '@spectrum-web-components/menu';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import { spy } from 'sinon';
-import { sendMouse } from '../../../test/plugins/browser.js';
-
-describe('Menu item', () => {
-    it('renders', async () => {
-        const el = await fixture(html`
-            
-                Selected
-            
-        `);
-
-        await waitUntil(
-            () => el.childItems.length == 1,
-            'expected menu group to manage 1 child'
-        );
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-    it('can be disabled', async () => {
-        const el = await fixture(html`
-            
-                
-                    Selected
-                
-                Disabled
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('Selected');
-
-        const disabled = el.querySelector('[disabled]') as MenuItem;
-        const boundingRect = disabled.getBoundingClientRect();
-
-        sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        boundingRect.x + boundingRect.width / 2,
-                        boundingRect.y + boundingRect.height / 2,
-                    ],
-                },
-                {
-                    type: 'down',
-                },
-                {
-                    type: 'up',
-                },
-            ],
-        });
-        await elementUpdated(el);
-        expect(el.value).to.equal('Selected');
-
-        disabled.click();
-        await elementUpdated(el);
-        expect(el.value).to.equal('Selected');
-
-        disabled.dispatchEvent(
-            new Event('click', {
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-        expect(el.value).to.equal('Selected');
-    });
-    it('proxies `click()`', async () => {
-        const clickTargetSpy = spy();
-        const el = await fixture(html`
-             {
-                    clickTargetSpy(
-                        event.composedPath()[0] as HTMLAnchorElement
-                    );
-                    event.stopPropagation();
-                    event.preventDefault();
-                }}
-            >
-                
-                    Selected Text
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        const item = el.querySelector('sp-menu-item') as MenuItem;
-        const { anchorElement } = item as unknown as {
-            anchorElement: HTMLAnchorElement;
-        };
-
-        (
-            item as unknown as { anchorElement: HTMLAnchorElement }
-        ).anchorElement.dispatchEvent(new FocusEvent('focus'));
-
-        await elementUpdated(item);
-        expect(el === document.activeElement).to.be.true;
-        item.click();
-
-        expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;
-    });
-    it('value attribute', async () => {
-        const el = await fixture(html`
-            Selected Text
-        `);
-
-        expect(el.itemText).to.equal('Selected Text');
-        expect(el.value).to.equal('selected');
-    });
-    it('no value attribute', async () => {
-        const el = await fixture(html`
-            Selected Text
-        `);
-
-        expect(el.itemText).to.equal('Selected Text');
-        expect(el.value).to.equal('Selected Text');
-    });
-    it('value property', async () => {
-        const el = await fixture(html`
-            Selected Text
-        `);
-
-        expect(el.itemText).to.equal('Selected Text');
-        expect(el.value).to.equal('Selected Text');
-        expect(el.hasAttribute('value')).to.be.false;
-
-        el.value = 'Selected Text';
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('Selected Text');
-        expect(el.getAttribute('value')).to.equal('Selected Text');
-
-        el.value = '';
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('Selected Text');
-        expect(el.hasAttribute('value')).to.be.false;
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  waitUntil,
+} from "@open-wc/testing";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import { Menu, MenuItem } from "@spectrum-web-components/menu";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import { spy } from "sinon";
+import { sendMouse } from "../../../test/plugins/browser.js";
+
+describe("Menu item", () => {
+  it("renders", async () => {
+    const el = await fixture(html`
+      
+        Selected
+      
+    `);
+
+    await waitUntil(
+      () => el.childItems.length == 1,
+      "expected menu group to manage 1 child",
+    );
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("can be disabled", async () => {
+    const el = await fixture(html`
+      
+        
+          Selected
+        
+        Disabled
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.value).to.equal("Selected");
+
+    const disabled = el.querySelector("[disabled]") as MenuItem;
+    const boundingRect = disabled.getBoundingClientRect();
+
+    sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            boundingRect.x + boundingRect.width / 2,
+            boundingRect.y + boundingRect.height / 2,
+          ],
+        },
+        {
+          type: "down",
+        },
+        {
+          type: "up",
+        },
+      ],
     });
-    it('assigns content to the description slot', async () => {
-        const el = await fixture(html`
-            
-                Menu Item Text
-                Description for the Menu-Item
-            
-        `);
-        const descriptionElement = el.querySelector('span') as HTMLElement;
-
-        expect(descriptionElement.assignedSlot).to.not.be.null;
-    });
-    it('acualizes a submenu', async () => {
-        const test = await fixture(html`
-            
-                Selected
+    await elementUpdated(el);
+    expect(el.value).to.equal("Selected");
+
+    disabled.click();
+    await elementUpdated(el);
+    expect(el.value).to.equal("Selected");
+
+    disabled.dispatchEvent(
+      new Event("click", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal("Selected");
+  });
+  it("proxies `click()`", async () => {
+    const clickTargetSpy = spy();
+    const el = await fixture(html`
+       {
+          clickTargetSpy(event.composedPath()[0] as HTMLAnchorElement);
+          event.stopPropagation();
+          event.preventDefault();
+        }}
+      >
+        
+          Selected Text
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    const item = el.querySelector("sp-menu-item") as MenuItem;
+    const { anchorElement } = item as unknown as {
+      anchorElement: HTMLAnchorElement;
+    };
+
+    (
+      item as unknown as { anchorElement: HTMLAnchorElement }
+    ).anchorElement.dispatchEvent(new FocusEvent("focus"));
+
+    await elementUpdated(item);
+    expect(el === document.activeElement).to.be.true;
+    item.click();
+
+    expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;
+  });
+  it("value attribute", async () => {
+    const el = await fixture(html`
+      Selected Text
+    `);
+
+    expect(el.itemText).to.equal("Selected Text");
+    expect(el.value).to.equal("selected");
+  });
+  it("no value attribute", async () => {
+    const el = await fixture(html`
+      Selected Text
+    `);
+
+    expect(el.itemText).to.equal("Selected Text");
+    expect(el.value).to.equal("Selected Text");
+  });
+  it("value property", async () => {
+    const el = await fixture(html`
+      Selected Text
+    `);
+
+    expect(el.itemText).to.equal("Selected Text");
+    expect(el.value).to.equal("Selected Text");
+    expect(el.hasAttribute("value")).to.be.false;
+
+    el.value = "Selected Text";
+    await elementUpdated(el);
+
+    expect(el.value).to.equal("Selected Text");
+    expect(el.getAttribute("value")).to.equal("Selected Text");
+
+    el.value = "";
+    await elementUpdated(el);
+
+    expect(el.value).to.equal("Selected Text");
+    expect(el.hasAttribute("value")).to.be.false;
+  });
+  it("assigns content to the description slot", async () => {
+    const el = await fixture(html`
+      
+        Menu Item Text
+        Description for the Menu-Item
+      
+    `);
+    const descriptionElement = el.querySelector("span") as HTMLElement;
+
+    expect(descriptionElement.assignedSlot).to.not.be.null;
+  });
+  it("acualizes a submenu", async () => {
+    const test = await fixture(html`
+      
+        Selected
+      
+    `);
+
+    const el = test.querySelector("sp-menu-item") as MenuItem;
+
+    expect(el.hasSubmenu).to.be.false;
+
+    const submenuItem = document.createElement("sp-menu-item");
+    const submenu = document.createElement("sp-menu");
+
+    submenuItem.textContent = "Test Submenu Item";
+    submenu.slot = "submenu";
+    submenu.append(submenuItem);
+
+    el.append(submenu);
+    await elementUpdated(el);
+
+    expect(el.hasSubmenu).to.be.true;
+
+    submenu.remove();
+    await elementUpdated(el);
+
+    expect(el.hasSubmenu).to.be.false;
+  });
+
+  it("should not allow text-align to cascade when used inside an overlay", async () => {
+    const element = await fixture(html`
+      

+        
The paragraph and the button are centered. Menu items are not.

+        
+          One
+          Two
+          This is a long option
+          
+            More options
+            
+              Three
+              Four
+              Another long option
             
-        `);
-
-        const el = test.querySelector('sp-menu-item') as MenuItem;
-
-        expect(el.hasSubmenu).to.be.false;
-
-        const submenuItem = document.createElement('sp-menu-item');
-        const submenu = document.createElement('sp-menu');
-
-        submenuItem.textContent = 'Test Submenu Item';
-        submenu.slot = 'submenu';
-        submenu.append(submenuItem);
-
-        el.append(submenu);
-        await elementUpdated(el);
-
-        expect(el.hasSubmenu).to.be.true;
-
-        submenu.remove();
-        await elementUpdated(el);
-
-        expect(el.hasSubmenu).to.be.false;
-    });
-
-    it('should not allow text-align to cascade when used inside an overlay', async () => {
-        const element = await fixture(html`
-            

-                

-                    The paragraph and the button are centered. Menu items are
-                    not.
-                

-                
-                    One
-                    Two
-                    This is a long option
-                    
-                        More options
-                        
-                            Three
-                            Four
-                            Another long option
-                        
-                    
-                
-            

-        `);
-
-        const menuItems = element.querySelectorAll(
-            'sp-menu-item'
-        ) as NodeListOf;
-
-        for (const menuItem of menuItems)
-            expect(getComputedStyle(menuItem).textAlign).to.equal('start');
-    });
+          
+        
+      

+    `);
+
+    const menuItems = element.querySelectorAll(
+      "sp-menu-item",
+    ) as NodeListOf;
+
+    for (const menuItem of menuItems) {
+      expect(getComputedStyle(menuItem).textAlign).to.equal("start");
+    }
+  });
 });
diff --git a/packages/menu/test/menu-memory.test.ts b/packages/menu/test/menu-memory.test.ts
index 8f752bef98..aadd06e3a5 100644
--- a/packages/menu/test/menu-memory.test.ts
+++ b/packages/menu/test/menu-memory.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { singleSelect } from '../stories/menu.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { singleSelect } from "../stories/menu.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(singleSelect());
diff --git a/packages/menu/test/menu-selects.test.ts b/packages/menu/test/menu-selects.test.ts
index 74c7586510..25e625e92f 100644
--- a/packages/menu/test/menu-selects.test.ts
+++ b/packages/menu/test/menu-selects.test.ts
@@ -9,671 +9,671 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { Menu, MenuGroup, MenuItem } from '@spectrum-web-components/menu';
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import { Menu, MenuGroup, MenuItem } from "@spectrum-web-components/menu";
 import {
-    elementUpdated,
-    expect,
-    html,
-    nextFrame,
-    oneEvent,
-} from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { spy } from 'sinon';
-import { fixture } from '../../../test/testing-helpers.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
-
-describe('Menu [selects]', () => {
-    let el!: Menu;
-    let options!: MenuItem[];
-
-    beforeEach(async () => {
-        el = await fixture(html`
-            
-                Option 1
-                Option 2
-                Option 3
-            
-        `);
-        options = [...el.querySelectorAll('sp-menu-item')] as MenuItem[];
-        await Promise.all(options.map((option) => option.updateComplete));
-        await nextFrame();
-        await nextFrame();
+  elementUpdated,
+  expect,
+  html,
+  nextFrame,
+  oneEvent,
+} from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { spy } from "sinon";
+import { fixture } from "../../../test/testing-helpers.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+
+describe("Menu [selects]", () => {
+  let el!: Menu;
+  let options!: MenuItem[];
+
+  beforeEach(async () => {
+    el = await fixture(html`
+      
+        Option 1
+        Option 2
+        Option 3
+      
+    `);
+    options = [...el.querySelectorAll("sp-menu-item")] as MenuItem[];
+    await Promise.all(options.map((option) => option.updateComplete));
+    await nextFrame();
+    await nextFrame();
+  });
+  describe("fires `change` events", async () => {
+    it("on browser clicks", async () => {
+      const item1 = options[0];
+      const boundingRect = item1.getBoundingClientRect();
+      const change = oneEvent(el, "change");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await change;
+      expect(el.value).to.equal("1");
     });
-    describe('fires `change` events', async () => {
-        it('on browser clicks', async () => {
-            const item1 = options[0];
-            const boundingRect = item1.getBoundingClientRect();
-            const change = oneEvent(el, 'change');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await change;
-            expect(el.value).to.equal('1');
-        });
-        it('on JS clicks', async () => {
-            const item1 = options[0];
-            const change = oneEvent(el, 'change');
-
-            item1.click();
-            await change;
-            expect(el.value).to.equal('1');
-        });
+    it("on JS clicks", async () => {
+      const item1 = options[0];
+      const change = oneEvent(el, "change");
+
+      item1.click();
+      await change;
+      expect(el.value).to.equal("1");
     });
-    it('manages a single selection when [selects="single"]', async () => {
-        expect(el.value).to.equal('');
+  });
+  it('manages a single selection when [selects="single"]', async () => {
+    expect(el.value).to.equal("");
 
-        let change = oneEvent(el, 'change');
+    let change = oneEvent(el, "change");
 
-        options[0].click();
-        await change;
+    options[0].click();
+    await change;
 
-        expect(el.value).to.equal('1');
+    expect(el.value).to.equal("1");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('2');
+    expect(el.value).to.equal("2");
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('3');
-    });
-    it('manages multiple selections when [selects="multiple"]', async () => {
-        el.selects = 'multiple';
+    expect(el.value).to.equal("3");
+  });
+  it('manages multiple selections when [selects="multiple"]', async () => {
+    el.selects = "multiple";
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('');
+    expect(el.value).to.equal("");
 
-        let change = oneEvent(el, 'change');
+    let change = oneEvent(el, "change");
 
-        options[0].click();
-        await change;
-        expect(el.value).to.equal('1');
+    options[0].click();
+    await change;
+    expect(el.value).to.equal("1");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('1,2');
+    expect(el.value).to.equal("1,2");
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('1,2,3');
+    expect(el.value).to.equal("1,2,3");
 
-        change = oneEvent(el, 'change');
-        options[0].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[0].click();
+    await change;
 
-        expect(el.value).to.equal('2,3');
+    expect(el.value).to.equal("2,3");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('3');
+    expect(el.value).to.equal("3");
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('');
-    });
+    expect(el.value).to.equal("");
+  });
 });
 
-describe('Menu [selects] w/ group', () => {
-    let el!: Menu;
-    let options!: MenuItem[];
-
-    beforeEach(async () => {
-        el = await fixture(html`
-            
-                
-                    Option 1
-                    Option 2
-                    Option 3
-                
-            
-        `);
-        options = [...el.querySelectorAll('sp-menu-item')] as MenuItem[];
-        await Promise.all(options.map((option) => option.updateComplete));
-        await nextFrame();
-        await nextFrame();
+describe("Menu [selects] w/ group", () => {
+  let el!: Menu;
+  let options!: MenuItem[];
+
+  beforeEach(async () => {
+    el = await fixture(html`
+      
+        
+          Option 1
+          Option 2
+          Option 3
+        
+      
+    `);
+    options = [...el.querySelectorAll("sp-menu-item")] as MenuItem[];
+    await Promise.all(options.map((option) => option.updateComplete));
+    await nextFrame();
+    await nextFrame();
+  });
+  describe("fires `change` events", async () => {
+    it("on browser clicks", async () => {
+      const item1 = options[0];
+      const boundingRect = item1.getBoundingClientRect();
+      const change = oneEvent(el, "change");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await change;
+      expect(el.value).to.equal("1");
     });
-    describe('fires `change` events', async () => {
-        it('on browser clicks', async () => {
-            const item1 = options[0];
-            const boundingRect = item1.getBoundingClientRect();
-            const change = oneEvent(el, 'change');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await change;
-            expect(el.value).to.equal('1');
-        });
-        it('on JS clicks', async () => {
-            const item1 = options[0];
-            const change = oneEvent(el, 'change');
-
-            item1.click();
-            await change;
-            expect(el.value).to.equal('1');
-        });
+    it("on JS clicks", async () => {
+      const item1 = options[0];
+      const change = oneEvent(el, "change");
+
+      item1.click();
+      await change;
+      expect(el.value).to.equal("1");
     });
-    it('manages a single selection when [selects="single"]', async () => {
-        expect(el.value).to.equal('');
-        let change = oneEvent(el, 'change');
+  });
+  it('manages a single selection when [selects="single"]', async () => {
+    expect(el.value).to.equal("");
+    let change = oneEvent(el, "change");
 
-        options[0].click();
-        await change;
+    options[0].click();
+    await change;
 
-        expect(el.value).to.equal('1');
+    expect(el.value).to.equal("1");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('2');
+    expect(el.value).to.equal("2");
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('3');
-    });
-    it('manages multiple selections when [selects="multiple"]', async () => {
-        el.selects = 'multiple';
+    expect(el.value).to.equal("3");
+  });
+  it('manages multiple selections when [selects="multiple"]', async () => {
+    el.selects = "multiple";
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('');
+    expect(el.value).to.equal("");
 
-        let change = oneEvent(el, 'change');
+    let change = oneEvent(el, "change");
 
-        options[0].click();
-        await change;
-        expect(el.value).to.equal('1');
+    options[0].click();
+    await change;
+    expect(el.value).to.equal("1");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('1,2');
+    expect(el.value).to.equal("1,2");
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('1,2,3');
+    expect(el.value).to.equal("1,2,3");
 
-        change = oneEvent(el, 'change');
-        options[0].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[0].click();
+    await change;
 
-        expect(el.value).to.equal('2,3');
+    expect(el.value).to.equal("2,3");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('3');
+    expect(el.value).to.equal("3");
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.value).to.equal('');
-    });
+    expect(el.value).to.equal("");
+  });
 });
 
-describe('Menu w/ group [selects]', () => {
-    let el!: Menu;
-    let group!: MenuGroup;
-    let options!: MenuItem[];
-
-    beforeEach(async () => {
-        el = await fixture(html`
-            
-                
-                    Option 1
-                    Option 2
-                    Option 3
-                
-            
-        `);
-        group = el.querySelector('sp-menu-group') as MenuGroup;
-        options = [...el.querySelectorAll('sp-menu-item')] as MenuItem[];
-        await Promise.all(options.map((option) => option.updateComplete));
-        await nextFrame();
-        await nextFrame();
+describe("Menu w/ group [selects]", () => {
+  let el!: Menu;
+  let group!: MenuGroup;
+  let options!: MenuItem[];
+
+  beforeEach(async () => {
+    el = await fixture(html`
+      
+        
+          Option 1
+          Option 2
+          Option 3
+        
+      
+    `);
+    group = el.querySelector("sp-menu-group") as MenuGroup;
+    options = [...el.querySelectorAll("sp-menu-item")] as MenuItem[];
+    await Promise.all(options.map((option) => option.updateComplete));
+    await nextFrame();
+    await nextFrame();
+  });
+  describe("fires `change` events", async () => {
+    it("on browser clicks", async () => {
+      const item1 = options[0];
+      const boundingRect = item1.getBoundingClientRect();
+      const change = oneEvent(group, "change");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await change;
+      expect(group.value).to.equal("1");
     });
-    describe('fires `change` events', async () => {
-        it('on browser clicks', async () => {
-            const item1 = options[0];
-            const boundingRect = item1.getBoundingClientRect();
-            const change = oneEvent(group, 'change');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await change;
-            expect(group.value).to.equal('1');
-        });
-        it('on JS clicks', async () => {
-            const item1 = options[0];
-            const change = oneEvent(group, 'change');
-
-            item1.click();
-            await change;
-            expect(group.value).to.equal('1');
-        });
+    it("on JS clicks", async () => {
+      const item1 = options[0];
+      const change = oneEvent(group, "change");
+
+      item1.click();
+      await change;
+      expect(group.value).to.equal("1");
     });
+  });
 
-    it('manages a single selection when [selects="single"]', async () => {
-        expect(group.value).to.equal('');
+  it('manages a single selection when [selects="single"]', async () => {
+    expect(group.value).to.equal("");
 
-        let change = oneEvent(el, 'change');
+    let change = oneEvent(el, "change");
 
-        options[0].click();
-        await change;
+    options[0].click();
+    await change;
 
-        expect(group.value).to.equal('1');
+    expect(group.value).to.equal("1");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(group.value).to.equal('2');
+    expect(group.value).to.equal("2");
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(group.value).to.equal('3');
-    });
-    it('manages multiple selections when [selects="multiple"]', async () => {
-        group.selects = 'multiple';
+    expect(group.value).to.equal("3");
+  });
+  it('manages multiple selections when [selects="multiple"]', async () => {
+    group.selects = "multiple";
 
-        await elementUpdated(group);
+    await elementUpdated(group);
 
-        expect(group.value).to.equal('');
+    expect(group.value).to.equal("");
 
-        let change = oneEvent(el, 'change');
+    let change = oneEvent(el, "change");
 
-        options[0].click();
-        await change;
-        expect(group.value).to.equal('1');
+    options[0].click();
+    await change;
+    expect(group.value).to.equal("1");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(group.value).to.equal('1,2');
+    expect(group.value).to.equal("1,2");
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(group.value).to.equal('1,2,3');
+    expect(group.value).to.equal("1,2,3");
 
-        change = oneEvent(el, 'change');
-        options[0].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[0].click();
+    await change;
 
-        expect(group.value).to.equal('2,3');
+    expect(group.value).to.equal("2,3");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(group.value).to.equal('3');
+    expect(group.value).to.equal("3");
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(group.value).to.equal('');
-    });
+    expect(group.value).to.equal("");
+  });
 });
 
-describe('Menu w/ groups [selects]', () => {
-    let el!: Menu;
-    let groupA!: MenuGroup;
-    let groupB!: MenuGroup;
-    let options!: MenuItem[];
-
-    beforeEach(async () => {
-        el = await fixture(html`
-            
-                
-                    Option 1a
-                    Option 2a
-                    Option 3a
-                
-                
-                    Option 1b
-                    Option 2b
-                    Option 3b
-                
-            
-        `);
-        groupA = el.querySelector('sp-menu-group:first-child') as MenuGroup;
-        groupB = el.querySelector('sp-menu-group:last-child') as MenuGroup;
-        options = [...el.querySelectorAll('sp-menu-item')] as MenuItem[];
-        await Promise.all(options.map((option) => option.updateComplete));
-        await nextFrame();
-        await nextFrame();
+describe("Menu w/ groups [selects]", () => {
+  let el!: Menu;
+  let groupA!: MenuGroup;
+  let groupB!: MenuGroup;
+  let options!: MenuItem[];
+
+  beforeEach(async () => {
+    el = await fixture(html`
+      
+        
+          Option 1a
+          Option 2a
+          Option 3a
+        
+        
+          Option 1b
+          Option 2b
+          Option 3b
+        
+      
+    `);
+    groupA = el.querySelector("sp-menu-group:first-child") as MenuGroup;
+    groupB = el.querySelector("sp-menu-group:last-child") as MenuGroup;
+    options = [...el.querySelectorAll("sp-menu-item")] as MenuItem[];
+    await Promise.all(options.map((option) => option.updateComplete));
+    await nextFrame();
+    await nextFrame();
+  });
+  describe("fires `change` events", async () => {
+    it("on browser clicks", async () => {
+      const item1a = options[0];
+      const item1b = options[3];
+      const boundingRectA = item1a.getBoundingClientRect();
+
+      expect(groupA.value).to.equal("");
+      expect(groupB.value).to.equal("");
+      let change = oneEvent(el, "change");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRectA.x + boundingRectA.width / 2,
+              boundingRectA.y + boundingRectA.height / 2,
+            ],
+          },
+        ],
+      });
+      await change;
+      await elementUpdated(item1a);
+      expect(groupA.value).to.equal("1a");
+      expect(groupB.value).to.equal("");
+      change = oneEvent(el, "change");
+      const boundingRectB = item1b.getBoundingClientRect();
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRectB.x + boundingRectB.width / 2,
+              boundingRectB.y + boundingRectB.height / 2,
+            ],
+          },
+        ],
+      });
+      await change;
+      expect(groupA.value).to.equal("1a");
+      expect(groupB.value).to.equal("1b");
     });
-    describe('fires `change` events', async () => {
-        it('on browser clicks', async () => {
-            const item1a = options[0];
-            const item1b = options[3];
-            const boundingRectA = item1a.getBoundingClientRect();
-
-            expect(groupA.value).to.equal('');
-            expect(groupB.value).to.equal('');
-            let change = oneEvent(el, 'change');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRectA.x + boundingRectA.width / 2,
-                            boundingRectA.y + boundingRectA.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await change;
-            await elementUpdated(item1a);
-            expect(groupA.value).to.equal('1a');
-            expect(groupB.value).to.equal('');
-            change = oneEvent(el, 'change');
-            const boundingRectB = item1b.getBoundingClientRect();
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRectB.x + boundingRectB.width / 2,
-                            boundingRectB.y + boundingRectB.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await change;
-            expect(groupA.value).to.equal('1a');
-            expect(groupB.value).to.equal('1b');
-        });
-        it('on JS clicks', async () => {
-            const item1a = options[0];
-            const item1b = options[3];
-            let change = oneEvent(el, 'change');
-
-            item1a.click();
-            await change;
-            expect(groupA.value).to.equal('1a');
-            change = oneEvent(el, 'change');
-            item1b.click();
-            await change;
-            expect(groupB.value).to.equal('1b');
-        });
-        it('can have them `preventDefault()`ed', async () => {
-            const preventSpy = spy();
-
-            expect(groupA.value).to.equal('');
-            expect(groupB.value).to.equal('');
-            const item1a = options[0];
-            const item1b = options[3];
-
-            groupA.addEventListener('change', (event: Event) => {
-                event.preventDefault();
-                preventSpy();
-            });
-            const change = oneEvent(el, 'change');
-
-            item1a.click();
-            item1b.click();
-            await change;
-            expect(preventSpy.callCount).to.equal(1);
-            expect(groupA.value).to.equal('');
-            expect(groupB.value).to.equal('1b');
-        });
+    it("on JS clicks", async () => {
+      const item1a = options[0];
+      const item1b = options[3];
+      let change = oneEvent(el, "change");
+
+      item1a.click();
+      await change;
+      expect(groupA.value).to.equal("1a");
+      change = oneEvent(el, "change");
+      item1b.click();
+      await change;
+      expect(groupB.value).to.equal("1b");
     });
+    it("can have them `preventDefault()`ed", async () => {
+      const preventSpy = spy();
+
+      expect(groupA.value).to.equal("");
+      expect(groupB.value).to.equal("");
+      const item1a = options[0];
+      const item1b = options[3];
+
+      groupA.addEventListener("change", (event: Event) => {
+        event.preventDefault();
+        preventSpy();
+      });
+      const change = oneEvent(el, "change");
+
+      item1a.click();
+      item1b.click();
+      await change;
+      expect(preventSpy.callCount).to.equal(1);
+      expect(groupA.value).to.equal("");
+      expect(groupB.value).to.equal("1b");
+    });
+  });
 
-    it('manages a single selection when [selects="single"]', async () => {
-        expect(groupA.value).to.equal('');
-        expect(groupB.value).to.equal('');
-
-        let change = oneEvent(el, 'change');
+  it('manages a single selection when [selects="single"]', async () => {
+    expect(groupA.value).to.equal("");
+    expect(groupB.value).to.equal("");
 
-        options[0].click();
-        await change;
+    let change = oneEvent(el, "change");
 
-        expect(groupA.value).to.equal('1a');
+    options[0].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[3].click();
-        await change;
+    expect(groupA.value).to.equal("1a");
 
-        expect(groupB.value).to.equal('1b');
+    change = oneEvent(el, "change");
+    options[3].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    expect(groupB.value).to.equal("1b");
 
-        expect(groupA.value).to.equal('2a');
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[4].click();
-        await change;
+    expect(groupA.value).to.equal("2a");
 
-        expect(groupB.value).to.equal('2b');
+    change = oneEvent(el, "change");
+    options[4].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    expect(groupB.value).to.equal("2b");
 
-        expect(groupA.value).to.equal('3a');
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[5].click();
-        await change;
+    expect(groupA.value).to.equal("3a");
 
-        expect(groupB.value).to.equal('3b');
-    });
-    it('manages multiple selections when [selects="multiple"]', async () => {
-        groupA.selects = 'multiple';
-        groupB.selects = 'multiple';
+    change = oneEvent(el, "change");
+    options[5].click();
+    await change;
 
-        await elementUpdated(groupA);
-        await elementUpdated(groupB);
+    expect(groupB.value).to.equal("3b");
+  });
+  it('manages multiple selections when [selects="multiple"]', async () => {
+    groupA.selects = "multiple";
+    groupB.selects = "multiple";
 
-        expect(groupA.value).to.equal('');
-        expect(groupB.value).to.equal('');
+    await elementUpdated(groupA);
+    await elementUpdated(groupB);
 
-        let change = oneEvent(el, 'change');
+    expect(groupA.value).to.equal("");
+    expect(groupB.value).to.equal("");
 
-        options[0].click();
-        await change;
-        expect(groupA.value).to.equal('1a');
-        expect(groupB.value).to.equal('');
+    let change = oneEvent(el, "change");
 
-        change = oneEvent(el, 'change');
-        options[3].click();
-        await change;
-        expect(groupA.value).to.equal('1a');
-        expect(groupB.value).to.equal('1b');
+    options[0].click();
+    await change;
+    expect(groupA.value).to.equal("1a");
+    expect(groupB.value).to.equal("");
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    change = oneEvent(el, "change");
+    options[3].click();
+    await change;
+    expect(groupA.value).to.equal("1a");
+    expect(groupB.value).to.equal("1b");
 
-        expect(groupA.value).to.equal('1a,2a');
-        expect(groupB.value).to.equal('1b');
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[4].click();
-        await change;
+    expect(groupA.value).to.equal("1a,2a");
+    expect(groupB.value).to.equal("1b");
 
-        expect(groupA.value).to.equal('1a,2a');
-        expect(groupB.value).to.equal('1b,2b');
+    change = oneEvent(el, "change");
+    options[4].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    expect(groupA.value).to.equal("1a,2a");
+    expect(groupB.value).to.equal("1b,2b");
 
-        expect(groupA.value).to.equal('1a,2a,3a');
-        expect(groupB.value).to.equal('1b,2b');
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[5].click();
-        await change;
+    expect(groupA.value).to.equal("1a,2a,3a");
+    expect(groupB.value).to.equal("1b,2b");
 
-        expect(groupA.value).to.equal('1a,2a,3a');
-        expect(groupB.value).to.equal('1b,2b,3b');
+    change = oneEvent(el, "change");
+    options[5].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[0].click();
-        await change;
+    expect(groupA.value).to.equal("1a,2a,3a");
+    expect(groupB.value).to.equal("1b,2b,3b");
 
-        expect(groupA.value).to.equal('2a,3a');
-        expect(groupB.value).to.equal('1b,2b,3b');
+    change = oneEvent(el, "change");
+    options[0].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[3].click();
-        await change;
+    expect(groupA.value).to.equal("2a,3a");
+    expect(groupB.value).to.equal("1b,2b,3b");
 
-        expect(groupA.value).to.equal('2a,3a');
-        expect(groupB.value).to.equal('2b,3b');
+    change = oneEvent(el, "change");
+    options[3].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[1].click();
-        await change;
+    expect(groupA.value).to.equal("2a,3a");
+    expect(groupB.value).to.equal("2b,3b");
 
-        expect(groupA.value).to.equal('3a');
-        expect(groupB.value).to.equal('2b,3b');
+    change = oneEvent(el, "change");
+    options[1].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[4].click();
-        await change;
+    expect(groupA.value).to.equal("3a");
+    expect(groupB.value).to.equal("2b,3b");
 
-        expect(groupA.value).to.equal('3a');
-        expect(groupB.value).to.equal('3b');
+    change = oneEvent(el, "change");
+    options[4].click();
+    await change;
 
-        change = oneEvent(el, 'change');
-        options[2].click();
-        await change;
+    expect(groupA.value).to.equal("3a");
+    expect(groupB.value).to.equal("3b");
 
-        expect(groupA.value).to.equal('');
-        expect(groupB.value).to.equal('3b');
+    change = oneEvent(el, "change");
+    options[2].click();
+    await change;
+
+    expect(groupA.value).to.equal("");
+    expect(groupB.value).to.equal("3b");
 
-        change = oneEvent(el, 'change');
-        options[5].click();
-        await change;
-
-        expect(groupA.value).to.equal('');
-        expect(groupB.value).to.equal('');
-    });
-    it('manages focus', async function () {
-        await elementUpdated(groupA);
-        await elementUpdated(groupB);
-        const input = document.createElement('input');
-
-        el.insertAdjacentElement('afterend', input);
-        input.focus();
-        expect(document.activeElement === input).to.be.true;
-        await sendKeys({ press: 'Shift+Tab' });
-        expect(document.activeElement === groupA).to.be.true;
-        await sendKeys({ press: 'ArrowDown' });
-        await sendKeys({ press: 'ArrowUp' });
-
-        await elementUpdated(el);
-        let optionCount = 0;
-
-        for (const option of options) {
-            const parentElement = option.parentElement as Menu;
-
-            expect(document.activeElement === parentElement, 'parent focused')
-                .to.be.true;
-            expect(option.focused, `option ${optionCount} visually focused`).to
-                .be.true;
-            await sendKeys({ press: 'Space' });
-            expect(parentElement.value).to.equal(option.value);
-            await sendKeys({ press: 'ArrowDown' });
-            optionCount += 1;
-        }
-    });
+    change = oneEvent(el, "change");
+    options[5].click();
+    await change;
+
+    expect(groupA.value).to.equal("");
+    expect(groupB.value).to.equal("");
+  });
+  it("manages focus", async function () {
+    await elementUpdated(groupA);
+    await elementUpdated(groupB);
+    const input = document.createElement("input");
+
+    el.insertAdjacentElement("afterend", input);
+    input.focus();
+    expect(document.activeElement === input).to.be.true;
+    await sendKeys({ press: "Shift+Tab" });
+    expect(document.activeElement === groupA).to.be.true;
+    await sendKeys({ press: "ArrowDown" });
+    await sendKeys({ press: "ArrowUp" });
+
+    await elementUpdated(el);
+    let optionCount = 0;
+
+    for (const option of options) {
+      const parentElement = option.parentElement as Menu;
+
+      expect(document.activeElement === parentElement, "parent focused").to.be
+        .true;
+      expect(option.focused, `option ${optionCount} visually focused`).to.be
+        .true;
+      await sendKeys({ press: "Space" });
+      expect(parentElement.value).to.equal(option.value);
+      await sendKeys({ press: "ArrowDown" });
+      optionCount += 1;
+    }
+  });
 });
diff --git a/packages/menu/test/menu.test.ts b/packages/menu/test/menu.test.ts
index fe0a159c7e..a6d5464918 100644
--- a/packages/menu/test/menu.test.ts
+++ b/packages/menu/test/menu.test.ts
@@ -9,687 +9,662 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { Menu, MenuItem } from '@spectrum-web-components/menu';
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import { Menu, MenuItem } from "@spectrum-web-components/menu";
 import {
-    aTimeout,
-    elementUpdated,
-    expect,
-    html,
-    nextFrame,
-    waitUntil,
-} from '@open-wc/testing';
+  aTimeout,
+  elementUpdated,
+  expect,
+  html,
+  nextFrame,
+  waitUntil,
+} from "@open-wc/testing";
 import {
-    arrowDownEvent,
-    arrowUpEvent,
-    fixture,
-    tabEvent,
-    testForLitDevWarnings,
-    tEvent,
-} from '../../../test/testing-helpers.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { spy } from 'sinon';
-import { sendKeys } from '@web/test-runner-commands';
-import { isWebKit } from '@spectrum-web-components/shared';
-
-describe('Menu', () => {
-    it('renders empty', async () => {
-        const el = await fixture(html`
-            Test
-        `);
-
-        const anchor = el.querySelector('a') as HTMLAnchorElement;
-
-        await elementUpdated(el);
-        expect(document.activeElement === el, 'self not focused, 1').to.be
-            .false;
-        expect(document.activeElement === anchor, 'child not focused, 1').to.be
-            .false;
-
-        expect(el.getAttribute('role')).to.equal('menu');
-
-        el.focus();
-        await elementUpdated(el);
-        expect(document.activeElement === el, 'self not focused, 2').to.be
-            .false;
-        expect(document.activeElement === anchor, 'child not focused, 2').to.be
-            .false;
-
-        anchor.focus();
-        expect(document.activeElement === el, 'self not focused, 3').to.be
-            .false;
-        expect(document.activeElement === anchor, 'anchor').to.be.true;
-    });
-    it('renders w/ [disabled] menu items', async () => {
-        const focusinSpy = spy();
-        const el = await fixture(html`
-             focusinSpy()}>
-                Disabled item
-            
-        `);
-
-        await elementUpdated(el);
-        expect(document.activeElement === el, 'self not focused, 1').to.be
-            .false;
-
-        el.focus();
-        await elementUpdated(el);
-        expect(document.activeElement === el, 'self not focused, 2').to.be
-            .false;
-        expect(focusinSpy.callCount).to.equal(0);
-    });
-    it('renders w/ all [disabled] menu items', async () => {
-        const focusinSpy = spy();
-        const el = await fixture(html`
-             focusinSpy()}>
-                Disabled item 1
-                Disabled item 2
-            
-        `);
-        const firstItem = el.querySelector('sp-menu-item') as MenuItem;
-
-        await elementUpdated(el);
-        expect(document.activeElement === el, 'self not focused, 1').to.be
-            .false;
-
-        el.focus();
-        await elementUpdated(el);
-        expect(document.activeElement === el, 'self not focused, 2').to.be
-            .false;
-        expect(focusinSpy.callCount).to.equal(0);
-        firstItem.focus();
-        await elementUpdated(el);
-        expect(document.activeElement === el, 'self not focused, 2').to.be
-            .false;
-        expect(focusinSpy.callCount).to.equal(0);
-        expect(el.matches(':focus-within')).to.be.false;
+  arrowDownEvent,
+  arrowUpEvent,
+  fixture,
+  tabEvent,
+  testForLitDevWarnings,
+  tEvent,
+} from "../../../test/testing-helpers.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { spy } from "sinon";
+import { sendKeys } from "@web/test-runner-commands";
+import { isWebKit } from "@spectrum-web-components/shared";
+
+describe("Menu", () => {
+  it("renders empty", async () => {
+    const el = await fixture(html`
+      Test
+    `);
+
+    const anchor = el.querySelector("a") as HTMLAnchorElement;
+
+    await elementUpdated(el);
+    expect(document.activeElement === el, "self not focused, 1").to.be.false;
+    expect(document.activeElement === anchor, "child not focused, 1").to.be
+      .false;
+
+    expect(el.getAttribute("role")).to.equal("menu");
+
+    el.focus();
+    await elementUpdated(el);
+    expect(document.activeElement === el, "self not focused, 2").to.be.false;
+    expect(document.activeElement === anchor, "child not focused, 2").to.be
+      .false;
+
+    anchor.focus();
+    expect(document.activeElement === el, "self not focused, 3").to.be.false;
+    expect(document.activeElement === anchor, "anchor").to.be.true;
+  });
+  it("renders w/ [disabled] menu items", async () => {
+    const focusinSpy = spy();
+    const el = await fixture(html`
+       focusinSpy()}>
+        Disabled item
+      
+    `);
+
+    await elementUpdated(el);
+    expect(document.activeElement === el, "self not focused, 1").to.be.false;
+
+    el.focus();
+    await elementUpdated(el);
+    expect(document.activeElement === el, "self not focused, 2").to.be.false;
+    expect(focusinSpy.callCount).to.equal(0);
+  });
+  it("renders w/ all [disabled] menu items", async () => {
+    const focusinSpy = spy();
+    const el = await fixture(html`
+       focusinSpy()}>
+        Disabled item 1
+        Disabled item 2
+      
+    `);
+    const firstItem = el.querySelector("sp-menu-item") as MenuItem;
+
+    await elementUpdated(el);
+    expect(document.activeElement === el, "self not focused, 1").to.be.false;
+
+    el.focus();
+    await elementUpdated(el);
+    expect(document.activeElement === el, "self not focused, 2").to.be.false;
+    expect(focusinSpy.callCount).to.equal(0);
+    firstItem.focus();
+    await elementUpdated(el);
+    expect(document.activeElement === el, "self not focused, 2").to.be.false;
+    expect(focusinSpy.callCount).to.equal(0);
+    expect(el.matches(":focus-within")).to.be.false;
+  });
+  it("renders w/ menu items", async () => {
+    const el = await fixture(html`
+      
+        Deselect
+        Select Inverse
+        Feather...
+        Select and Mask...
+        
+        Save Selection
+        Make Work Path
+      
+    `);
+
+    await waitUntil(
+      () => el.childItems.length == 6,
+      "expected menu to manage 6 menu items",
+    );
+    await elementUpdated(el);
+
+    const inTabindexElement = el.querySelector(
+      '[tabindex]:not([tabindex="-1"])',
+    );
+
+    expect(inTabindexElement).to.be.null;
+    await expect(el).to.be.accessible();
+  });
+
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+          Not Selected
+          Selected
+          Other
+        
+      `),
+  );
+
+  it("renders w/ selected", async () => {
+    const el = await fixture(html`
+      
+        Not Selected
+        Selected
+        Other
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+
+  it('has a "value" that can be copied during "change" events', async function () {
+    if (isWebKit()) {
+      this.skip();
+    }
+
+    const el = await fixture(html`
+       {
+          navigator.clipboard.writeText(value);
+        }}
+      >
+        Not Selected
+        Selected
+        Other
+      
+    `);
+
+    await elementUpdated(el);
+
+    const otherItem = el.querySelector("#other") as MenuItem;
+
+    otherItem.focus();
+    await elementUpdated(el);
+    await sendKeys({
+      press: "ArrowDown",
     });
-    it('renders w/ menu items', async () => {
-        const el = await fixture(html`
-            
-                Deselect
-                Select Inverse
-                Feather...
-                Select and Mask...
-                
-                Save Selection
-                Make Work Path
-            
-        `);
-
-        await waitUntil(
-            () => el.childItems.length == 6,
-            'expected menu to manage 6 menu items'
-        );
-        await elementUpdated(el);
-
-        const inTabindexElement = el.querySelector(
-            '[tabindex]:not([tabindex="-1"])'
-        );
-
-        expect(inTabindexElement).to.be.null;
-        await expect(el).to.be.accessible();
+    await elementUpdated(el);
+    await sendKeys({
+      press: "Enter",
     });
 
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-                    Not Selected
-                    Selected
-                    Other
-                
-            `)
-    );
+    await elementUpdated(el);
 
-    it('renders w/ selected', async () => {
-        const el = await fixture(html`
-            
-                Not Selected
-                Selected
-                Other
-            
-        `);
+    const clipboardText = await navigator.clipboard.readText();
 
-        await elementUpdated(el);
+    expect(clipboardText).to.equal("Other");
+  });
 
-        await expect(el).to.be.accessible();
-    });
+  it("accepts Numpad keys", async function () {
+    if (isWebKit()) {
+      this.skip();
+    }
 
-    it('has a "value" that can be copied during "change" events', async function () {
-        if (isWebKit()) {
-            this.skip();
-        }
-
-        const el = await fixture(html`
-             {
-                    navigator.clipboard.writeText(value);
-                }}
-            >
-                Not Selected
-                Selected
-                Other
-            
-        `);
-
-        await elementUpdated(el);
-
-        const otherItem = el.querySelector('#other') as MenuItem;
-
-        otherItem.focus();
-        await elementUpdated(el);
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        await elementUpdated(el);
-        await sendKeys({
-            press: 'Enter',
-        });
-
-        await elementUpdated(el);
-
-        const clipboardText = await navigator.clipboard.readText();
-
-        expect(clipboardText).to.equal('Other');
-    });
+    const el = await fixture(html`
+       {
+          navigator.clipboard.writeText(value);
+        }}
+      >
+        Not Selected
+        Selected
+        Other
+      
+    `);
 
-    it('accepts Numpad keys', async function () {
-        if (isWebKit()) {
-            this.skip();
-        }
-
-        const el = await fixture(html`
-             {
-                    navigator.clipboard.writeText(value);
-                }}
-            >
-                Not Selected
-                Selected
-                Other
-            
-        `);
-
-        await elementUpdated(el);
-
-        const otherItem = el.querySelector('#other') as MenuItem;
-
-        otherItem.focus();
-        await elementUpdated(el);
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        await elementUpdated(el);
-        await sendKeys({
-            press: 'NumpadEnter',
-        });
-
-        await elementUpdated(el);
-
-        const clipboardText = await navigator.clipboard.readText();
-
-        expect(clipboardText).to.equal('Other');
-    });
+    await elementUpdated(el);
 
-    it('renders w/ hrefs', async () => {
-        const el = await fixture(html`
-            
-                
-                    Not Selected
-                
-                Selected
-                Other
-            
-        `);
-
-        await waitUntil(
-            () => el.childItems.length == 3,
-            'expected menu to manage 3 items'
-        );
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-
-        expect(el.getAttribute('role')).to.equal('menu');
-    });
+    const otherItem = el.querySelector("#other") as MenuItem;
 
-    it('handle focus and keyboard input', async () => {
-        const el = await fixture(html`
-            
-                Deselect
-                Select Inverse
-                Feather...
-                Select and Mask...
-                
-                Save Selection
-                Make Work Path
-            
-        `);
-
-        await waitUntil(
-            () => el.childItems.length == 6,
-            'expected menu to manage 6 items'
-        );
-        await elementUpdated(el);
-
-        const firstItem = el.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-        const thirdToLastItem = el.querySelector(
-            'sp-menu-item:nth-last-of-type(3)'
-        ) as MenuItem;
-        const secondToLastItem = el.querySelector(
-            'sp-menu-item:nth-last-of-type(2)'
-        ) as MenuItem;
-
-        el.focus();
-        await elementUpdated(el);
-        // Activate :focus-visible
-        await sendKeys({ press: 'ArrowDown' });
-        await sendKeys({ press: 'ArrowUp' });
-
-        expect(document.activeElement === el).to.be.true;
-        expect(firstItem.focused).to.be.true;
-
-        el.dispatchEvent(arrowUpEvent());
-        el.dispatchEvent(arrowUpEvent());
-        el.dispatchEvent(tEvent());
-
-        expect(document.activeElement === el).to.be.true;
-        expect(thirdToLastItem.focused).to.be.true;
-
-        el.dispatchEvent(arrowDownEvent());
-
-        expect(document.activeElement === el).to.be.true;
-        expect(secondToLastItem.focused).to.be.true;
+    otherItem.focus();
+    await elementUpdated(el);
+    await sendKeys({
+      press: "ArrowDown",
     });
+    await elementUpdated(el);
+    await sendKeys({
+      press: "NumpadEnter",
+    });
+
+    await elementUpdated(el);
+
+    const clipboardText = await navigator.clipboard.readText();
 
-    it('handle focus and late descendent additions', async () => {
-        const el = await fixture(html`
-            
-                
-                    Options
-                    Deselect
-                
-            
-        `);
+    expect(clipboardText).to.equal("Other");
+  });
 
-        await waitUntil(
-            () => el.childItems.length == 1,
-            'expected menu to manage 1 item'
-        );
-        await elementUpdated(el);
+  it("renders w/ hrefs", async () => {
+    const el = await fixture(html`
+      
+         Not Selected 
+        Selected
+        Other
+      
+    `);
 
-        const firstItem = el.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
+    await waitUntil(
+      () => el.childItems.length == 3,
+      "expected menu to manage 3 items",
+    );
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+
+    expect(el.getAttribute("role")).to.equal("menu");
+  });
+
+  it("handle focus and keyboard input", async () => {
+    const el = await fixture(html`
+      
+        Deselect
+        Select Inverse
+        Feather...
+        Select and Mask...
+        
+        Save Selection
+        Make Work Path
+      
+    `);
+
+    await waitUntil(
+      () => el.childItems.length == 6,
+      "expected menu to manage 6 items",
+    );
+    await elementUpdated(el);
+
+    const firstItem = el.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+    const thirdToLastItem = el.querySelector(
+      "sp-menu-item:nth-last-of-type(3)",
+    ) as MenuItem;
+    const secondToLastItem = el.querySelector(
+      "sp-menu-item:nth-last-of-type(2)",
+    ) as MenuItem;
+
+    el.focus();
+    await elementUpdated(el);
+    // Activate :focus-visible
+    await sendKeys({ press: "ArrowDown" });
+    await sendKeys({ press: "ArrowUp" });
+
+    expect(document.activeElement === el).to.be.true;
+    expect(firstItem.focused).to.be.true;
+
+    el.dispatchEvent(arrowUpEvent());
+    el.dispatchEvent(arrowUpEvent());
+    el.dispatchEvent(tEvent());
+
+    expect(document.activeElement === el).to.be.true;
+    expect(thirdToLastItem.focused).to.be.true;
+
+    el.dispatchEvent(arrowDownEvent());
+
+    expect(document.activeElement === el).to.be.true;
+    expect(secondToLastItem.focused).to.be.true;
+  });
+
+  it("handle focus and late descendent additions", async () => {
+    const el = await fixture(html`
+      
+        
+          Options
+          Deselect
+        
+      
+    `);
+
+    await waitUntil(
+      () => el.childItems.length == 1,
+      "expected menu to manage 1 item",
+    );
+    await elementUpdated(el);
 
-        el.focus();
+    const firstItem = el.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
 
-        await elementUpdated(el);
-        // Activate :focus-visible
-        await sendKeys({ press: 'ArrowDown' });
-        await sendKeys({ press: 'ArrowUp' });
+    el.focus();
 
-        expect(document.activeElement === el, 'active element').to.be.true;
-        expect(firstItem.focused, 'visually focused').to.be.true;
+    await elementUpdated(el);
+    // Activate :focus-visible
+    await sendKeys({ press: "ArrowDown" });
+    await sendKeys({ press: "ArrowUp" });
 
-        el.blur();
+    expect(document.activeElement === el, "active element").to.be.true;
+    expect(firstItem.focused, "visually focused").to.be.true;
 
-        const group = el.querySelector('sp-menu-group') as HTMLElement;
-        const prependedItem = document.createElement('sp-menu-item');
+    el.blur();
 
-        prependedItem.textContent = 'Prepended Item';
-        const appendedItem = document.createElement('sp-menu-item');
+    const group = el.querySelector("sp-menu-group") as HTMLElement;
+    const prependedItem = document.createElement("sp-menu-item");
 
-        appendedItem.textContent = 'Appended Item';
-        group.prepend(prependedItem);
-        group.append(appendedItem);
-        await elementUpdated(el);
+    prependedItem.textContent = "Prepended Item";
+    const appendedItem = document.createElement("sp-menu-item");
 
-        await waitUntil(() => {
-            return el.childItems.length == 3;
-        }, 'expected menu to manage 3 items');
-        await elementUpdated(el);
+    appendedItem.textContent = "Appended Item";
+    group.prepend(prependedItem);
+    group.append(appendedItem);
+    await elementUpdated(el);
 
-        expect(document.activeElement === el).to.be.false;
-        expect(firstItem.focused).to.be.false;
-        expect(prependedItem.focused).to.be.false;
+    await waitUntil(() => {
+      return el.childItems.length == 3;
+    }, "expected menu to manage 3 items");
+    await elementUpdated(el);
 
-        el.focus();
-        // Activate :focus-visible
-        await sendKeys({ press: 'ArrowDown' });
-        await sendKeys({ press: 'ArrowUp' });
+    expect(document.activeElement === el).to.be.false;
+    expect(firstItem.focused).to.be.false;
+    expect(prependedItem.focused).to.be.false;
 
-        expect(document.activeElement === el, 'another active element').to.be
-            .true;
-        expect(prependedItem.focused, 'another visibly focused').to.be.true;
+    el.focus();
+    // Activate :focus-visible
+    await sendKeys({ press: "ArrowDown" });
+    await sendKeys({ press: "ArrowUp" });
 
-        el.dispatchEvent(arrowUpEvent());
+    expect(document.activeElement === el, "another active element").to.be.true;
+    expect(prependedItem.focused, "another visibly focused").to.be.true;
 
-        expect(document.activeElement === el, 'last active element').to.be.true;
-        expect(appendedItem.focused, 'last visibly focused').to.be.true;
-    });
-    it('cleans up when tabbing away', async () => {
-        const el = await fixture(html`
-            
-                Deselect
-                Select Inverse
-                Third Item
-            
-        `);
-
-        await waitUntil(
-            () => el.childItems.length == 3,
-            'expected menu to manage 3 items'
-        );
-        await elementUpdated(el);
-
-        const firstItem = el.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-        const secondItem = el.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-        const thirdItem = el.querySelector(
-            'sp-menu-item:nth-of-type(3)'
-        ) as MenuItem;
-
-        el.focus();
-        // Activate :focus-visible
-        await sendKeys({ press: 'ArrowDown' });
-        await sendKeys({ press: 'ArrowUp' });
-        expect(document.activeElement === el).to.be.true;
-        expect(firstItem.focused, 'first').to.be.true;
-        el.dispatchEvent(arrowDownEvent());
-        el.dispatchEvent(arrowDownEvent());
-        expect(thirdItem.focused, 'third').to.be.true;
-        // imitate tabbing away
-        el.dispatchEvent(tabEvent());
-        el.dispatchEvent(
-            new CustomEvent('focusout', {
-                composed: true,
-                bubbles: true,
-            })
-        );
-        await nextFrame();
-        // re-bind keyevents
-        el.startListeningToKeyboard();
-        // focus management should start again from the first item.
-        el.dispatchEvent(arrowDownEvent());
-        expect(secondItem.focused, 'second').to.be.true;
-    });
-    it('handles focus across focused MenuItem removals', async () => {
-        const el = await fixture(html`
-            
-                Deselect
-                Invert Selection
-                Feather...
-                Select and Mask...
-                
-                    Save Selection
-                
-            
-        `);
-        const firstItem = el.querySelector('.first') as MenuItem;
-        const selectedItem = el.querySelector('.selected') as MenuItem;
-
-        await elementUpdated(el);
-        await nextFrame();
-        el.focus();
-
-        expect(document.activeElement).to.equal(el);
-        // Enforce visible focus
-        await sendKeys({
-            press: 'ArrowUp',
-        });
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        expect(selectedItem.focused).to.be.true;
-
-        selectedItem.remove();
-        await elementUpdated(el);
-
-        expect(document.activeElement).to.equal(el);
-        expect(firstItem.focused).to.be.true;
-    });
-    it('handles single selection', async () => {
-        const el = await fixture(html`
-            
-                First
-                Second
-                Third
-            
-        `);
-
-        await waitUntil(
-            () => el.childItems.length == 3,
-            'expected menu to manage 3 items'
-        );
-        await waitUntil(
-            () => el.selectedItems.length == 1,
-            'expected menu to have 1 selected item'
-        );
-        await elementUpdated(el);
-
-        const firstItem = el.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-
-        const secondItem = el.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        expect(firstItem.getAttribute('role')).to.equal('menuitemradio');
-        expect(secondItem.getAttribute('role')).to.equal('menuitemradio');
-
-        expect(firstItem.selected).to.be.true;
-        expect(secondItem.selected).to.be.false;
-        expect(firstItem.getAttribute('aria-checked')).to.equal('true');
-        expect(secondItem.getAttribute('aria-checked')).to.equal('false');
-        expect(el.value).to.equal('First');
-
-        secondItem.click();
-
-        await elementUpdated(el);
-        await elementUpdated(firstItem);
-        await elementUpdated(secondItem);
-
-        expect(firstItem.selected).to.be.false;
-        expect(secondItem.selected).to.be.true;
-        expect(firstItem.getAttribute('aria-checked')).to.equal('false');
-        expect(secondItem.getAttribute('aria-checked')).to.equal('true');
-        expect(el.value).to.equal('Second');
+    el.dispatchEvent(arrowUpEvent());
+
+    expect(document.activeElement === el, "last active element").to.be.true;
+    expect(appendedItem.focused, "last visibly focused").to.be.true;
+  });
+  it("cleans up when tabbing away", async () => {
+    const el = await fixture(html`
+      
+        Deselect
+        Select Inverse
+        Third Item
+      
+    `);
+
+    await waitUntil(
+      () => el.childItems.length == 3,
+      "expected menu to manage 3 items",
+    );
+    await elementUpdated(el);
+
+    const firstItem = el.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+    const secondItem = el.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+    const thirdItem = el.querySelector(
+      "sp-menu-item:nth-of-type(3)",
+    ) as MenuItem;
+
+    el.focus();
+    // Activate :focus-visible
+    await sendKeys({ press: "ArrowDown" });
+    await sendKeys({ press: "ArrowUp" });
+    expect(document.activeElement === el).to.be.true;
+    expect(firstItem.focused, "first").to.be.true;
+    el.dispatchEvent(arrowDownEvent());
+    el.dispatchEvent(arrowDownEvent());
+    expect(thirdItem.focused, "third").to.be.true;
+    // imitate tabbing away
+    el.dispatchEvent(tabEvent());
+    el.dispatchEvent(
+      new CustomEvent("focusout", {
+        composed: true,
+        bubbles: true,
+      }),
+    );
+    await nextFrame();
+    // re-bind keyevents
+    el.startListeningToKeyboard();
+    // focus management should start again from the first item.
+    el.dispatchEvent(arrowDownEvent());
+    expect(secondItem.focused, "second").to.be.true;
+  });
+  it("handles focus across focused MenuItem removals", async () => {
+    const el = await fixture(html`
+      
+        Deselect
+        Invert Selection
+        Feather...
+        Select and Mask...
+         Save Selection 
+      
+    `);
+    const firstItem = el.querySelector(".first") as MenuItem;
+    const selectedItem = el.querySelector(".selected") as MenuItem;
+
+    await elementUpdated(el);
+    await nextFrame();
+    el.focus();
+
+    expect(document.activeElement).to.equal(el);
+    // Enforce visible focus
+    await sendKeys({
+      press: "ArrowUp",
     });
-    it('does not make a selection on a right/middle mouse click', async () => {
-        const changeSpy = spy();
-        const el = await fixture(html`
-             {
-                    changeSpy();
-                }}
-            >
-                First
-                Second
-                Third
-            
-        `);
-
-        await waitUntil(
-            () => el.childItems.length == 3,
-            'expected menu to manage 3 items'
-        );
-        await elementUpdated(el);
-
-        const secondItem = el.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        // send right mouse click to the secondItem
-        const rect = secondItem.getBoundingClientRect();
-
-        sendMouse({
-            steps: [
-                {
-                    position: [
-                        rect.left + rect.width / 2,
-                        rect.top + rect.height / 2,
-                    ],
-                    type: 'click',
-                    options: {
-                        button: 'right',
-                    },
-                },
-            ],
-        });
-        await elementUpdated(el);
-        await elementUpdated(secondItem);
-        await aTimeout(150);
-        expect(changeSpy.callCount, 'no change').to.equal(0);
-
-        // send middle mouse click to the secondItem
-        sendMouse({
-            steps: [
-                {
-                    position: [
-                        rect.left + rect.width / 2,
-                        rect.top + rect.height / 2,
-                    ],
-                    type: 'click',
-                    options: {
-                        button: 'middle',
-                    },
-                },
-            ],
-        });
-        await elementUpdated(el);
-        await elementUpdated(secondItem);
-        await aTimeout(150);
-        expect(changeSpy.callCount, 'no change').to.equal(0);
+    await sendKeys({
+      press: "ArrowDown",
     });
-    it('handles multiple selection', async () => {
-        const changeSpy = spy();
-        const el = await fixture(html`
-             changeSpy()}>
-                First
-                Second
-                Third
-            
-        `);
-
-        await waitUntil(
-            () => el.childItems.length == 3,
-            'expected menu to manage 3 items'
-        );
-        await elementUpdated(el);
-
-        const firstItem = el.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-
-        const secondItem = el.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
-
-        expect(firstItem.getAttribute('role')).to.equal('menuitemcheckbox');
-        expect(secondItem.getAttribute('role')).to.equal('menuitemcheckbox');
-
-        expect(firstItem.selected).to.be.true;
-        expect(secondItem.selected).to.be.false;
-        expect(firstItem.getAttribute('aria-checked')).to.equal('true');
-        expect(secondItem.getAttribute('aria-checked')).to.equal('false');
-        expect(el.value).to.equal('First');
-        expect(el.selectedItems.length).to.equal(1);
-
-        secondItem.click();
-
-        await elementUpdated(el);
-        await elementUpdated(firstItem);
-        await elementUpdated(secondItem);
-
-        expect(changeSpy.callCount, 'one change').to.equal(1);
-        expect(firstItem.selected).to.be.true;
-        expect(secondItem.selected).to.be.true;
-        expect(firstItem.getAttribute('aria-checked')).to.equal('true');
-        expect(secondItem.getAttribute('aria-checked')).to.equal('true');
-        expect(el.value).to.equal('First,Second');
-        expect(el.selectedItems.length).to.equal(2);
-
-        firstItem.click();
-
-        await elementUpdated(el);
-        await elementUpdated(firstItem);
-        await elementUpdated(secondItem);
-
-        expect(changeSpy.callCount, 'two changes').to.equal(2);
-        expect(firstItem.selected).to.be.false;
-        expect(secondItem.selected).to.be.true;
-        expect(firstItem.getAttribute('aria-checked')).to.equal('false');
-        expect(secondItem.getAttribute('aria-checked')).to.equal('true');
-        expect(el.value).to.equal('Second');
-        expect(el.selectedItems.length).to.equal(1);
+    expect(selectedItem.focused).to.be.true;
+
+    selectedItem.remove();
+    await elementUpdated(el);
+
+    expect(document.activeElement).to.equal(el);
+    expect(firstItem.focused).to.be.true;
+  });
+  it("handles single selection", async () => {
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await waitUntil(
+      () => el.childItems.length == 3,
+      "expected menu to manage 3 items",
+    );
+    await waitUntil(
+      () => el.selectedItems.length == 1,
+      "expected menu to have 1 selected item",
+    );
+    await elementUpdated(el);
+
+    const firstItem = el.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+
+    const secondItem = el.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    expect(firstItem.getAttribute("role")).to.equal("menuitemradio");
+    expect(secondItem.getAttribute("role")).to.equal("menuitemradio");
+
+    expect(firstItem.selected).to.be.true;
+    expect(secondItem.selected).to.be.false;
+    expect(firstItem.getAttribute("aria-checked")).to.equal("true");
+    expect(secondItem.getAttribute("aria-checked")).to.equal("false");
+    expect(el.value).to.equal("First");
+
+    secondItem.click();
+
+    await elementUpdated(el);
+    await elementUpdated(firstItem);
+    await elementUpdated(secondItem);
+
+    expect(firstItem.selected).to.be.false;
+    expect(secondItem.selected).to.be.true;
+    expect(firstItem.getAttribute("aria-checked")).to.equal("false");
+    expect(secondItem.getAttribute("aria-checked")).to.equal("true");
+    expect(el.value).to.equal("Second");
+  });
+  it("does not make a selection on a right/middle mouse click", async () => {
+    const changeSpy = spy();
+    const el = await fixture(html`
+       {
+          changeSpy();
+        }}
+      >
+        First
+        Second
+        Third
+      
+    `);
+
+    await waitUntil(
+      () => el.childItems.length == 3,
+      "expected menu to manage 3 items",
+    );
+    await elementUpdated(el);
+
+    const secondItem = el.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    // send right mouse click to the secondItem
+    const rect = secondItem.getBoundingClientRect();
+
+    sendMouse({
+      steps: [
+        {
+          position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+          type: "click",
+          options: {
+            button: "right",
+          },
+        },
+      ],
     });
-    it('can be controlled to manage a single togglable selection', async () => {
-        const toggleSingleSelected = (
-            event: Event & { target: Menu }
-        ): void => {
-            event.preventDefault();
-            const selected: string[] = [];
-
-            if (event.target.selected.length) {
-                selected.push(event.target.selected.at(-1) as string);
-            }
-
-            event.target.updateComplete.then(() => {
-                event.target.selected = selected;
-            });
-        };
-        const el = await fixture(html`
-            
-                First
-                Second
-                Third
-            
-        `);
-
-        await nextFrame();
-        await nextFrame();
-        expect(el.selected).to.deep.equal([]);
-
-        const items = [...el.children] as MenuItem[];
-
-        await Promise.all(items.map((child) => child.updateComplete));
-
-        items[0].click();
-        await nextFrame();
-        await nextFrame();
-        expect(el.selected).to.deep.equal(['1']);
-
-        items[0].click();
-        await nextFrame();
-        await nextFrame();
-        expect(el.selected).to.deep.equal([]);
-
-        items[1].click();
-        await nextFrame();
-        await nextFrame();
-        expect(el.selected).to.deep.equal(['2']);
-
-        items[2].click();
-        await nextFrame();
-        await nextFrame();
-        expect(el.selected).to.deep.equal(['3']);
+    await elementUpdated(el);
+    await elementUpdated(secondItem);
+    await aTimeout(150);
+    expect(changeSpy.callCount, "no change").to.equal(0);
+
+    // send middle mouse click to the secondItem
+    sendMouse({
+      steps: [
+        {
+          position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+          type: "click",
+          options: {
+            button: "middle",
+          },
+        },
+      ],
     });
+    await elementUpdated(el);
+    await elementUpdated(secondItem);
+    await aTimeout(150);
+    expect(changeSpy.callCount, "no change").to.equal(0);
+  });
+  it("handles multiple selection", async () => {
+    const changeSpy = spy();
+    const el = await fixture(html`
+       changeSpy()}>
+        First
+        Second
+        Third
+      
+    `);
+
+    await waitUntil(
+      () => el.childItems.length == 3,
+      "expected menu to manage 3 items",
+    );
+    await elementUpdated(el);
+
+    const firstItem = el.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+
+    const secondItem = el.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    expect(firstItem.getAttribute("role")).to.equal("menuitemcheckbox");
+    expect(secondItem.getAttribute("role")).to.equal("menuitemcheckbox");
+
+    expect(firstItem.selected).to.be.true;
+    expect(secondItem.selected).to.be.false;
+    expect(firstItem.getAttribute("aria-checked")).to.equal("true");
+    expect(secondItem.getAttribute("aria-checked")).to.equal("false");
+    expect(el.value).to.equal("First");
+    expect(el.selectedItems.length).to.equal(1);
+
+    secondItem.click();
+
+    await elementUpdated(el);
+    await elementUpdated(firstItem);
+    await elementUpdated(secondItem);
+
+    expect(changeSpy.callCount, "one change").to.equal(1);
+    expect(firstItem.selected).to.be.true;
+    expect(secondItem.selected).to.be.true;
+    expect(firstItem.getAttribute("aria-checked")).to.equal("true");
+    expect(secondItem.getAttribute("aria-checked")).to.equal("true");
+    expect(el.value).to.equal("First,Second");
+    expect(el.selectedItems.length).to.equal(2);
+
+    firstItem.click();
+
+    await elementUpdated(el);
+    await elementUpdated(firstItem);
+    await elementUpdated(secondItem);
+
+    expect(changeSpy.callCount, "two changes").to.equal(2);
+    expect(firstItem.selected).to.be.false;
+    expect(secondItem.selected).to.be.true;
+    expect(firstItem.getAttribute("aria-checked")).to.equal("false");
+    expect(secondItem.getAttribute("aria-checked")).to.equal("true");
+    expect(el.value).to.equal("Second");
+    expect(el.selectedItems.length).to.equal(1);
+  });
+  it("can be controlled to manage a single togglable selection", async () => {
+    const toggleSingleSelected = (event: Event & { target: Menu }): void => {
+      event.preventDefault();
+      const selected: string[] = [];
+
+      if (event.target.selected.length) {
+        selected.push(event.target.selected.at(-1) as string);
+      }
+
+      event.target.updateComplete.then(() => {
+        event.target.selected = selected;
+      });
+    };
+    const el = await fixture(html`
+      
+        First
+        Second
+        Third
+      
+    `);
+
+    await nextFrame();
+    await nextFrame();
+    expect(el.selected).to.deep.equal([]);
+
+    const items = [...el.children] as MenuItem[];
+
+    await Promise.all(items.map((child) => child.updateComplete));
+
+    items[0].click();
+    await nextFrame();
+    await nextFrame();
+    expect(el.selected).to.deep.equal(["1"]);
+
+    items[0].click();
+    await nextFrame();
+    await nextFrame();
+    expect(el.selected).to.deep.equal([]);
+
+    items[1].click();
+    await nextFrame();
+    await nextFrame();
+    expect(el.selected).to.deep.equal(["2"]);
+
+    items[2].click();
+    await nextFrame();
+    await nextFrame();
+    expect(el.selected).to.deep.equal(["3"]);
+  });
 });
diff --git a/packages/menu/test/submenu.test.ts b/packages/menu/test/submenu.test.ts
index e68cc20b45..9a33a037dd 100644
--- a/packages/menu/test/submenu.test.ts
+++ b/packages/menu/test/submenu.test.ts
@@ -10,1107 +10,1030 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { Menu, MenuItem } from '@spectrum-web-components/menu';
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import { Menu, MenuItem } from "@spectrum-web-components/menu";
 import {
-    aTimeout,
-    elementUpdated,
-    expect,
-    html,
-    nextFrame,
-    oneEvent,
-} from '@open-wc/testing';
-import { fixture } from '../../../test/testing-helpers.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { spy } from 'sinon';
-import { sendKeys } from '@web/test-runner-commands';
-import { ActionMenu } from '@spectrum-web-components/action-menu';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
-import { TemplateResult } from 'lit-html';
-import { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';
+  aTimeout,
+  elementUpdated,
+  expect,
+  html,
+  nextFrame,
+  oneEvent,
+} from "@open-wc/testing";
+import { fixture } from "../../../test/testing-helpers.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { spy } from "sinon";
+import { sendKeys } from "@web/test-runner-commands";
+import { ActionMenu } from "@spectrum-web-components/action-menu";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
+import { TemplateResult } from "lit-html";
+import { slottableRequest } from "@spectrum-web-components/overlay/src/slottable-request-directive.js";
 
 type SelectsWithKeyboardTest = {
-    dir: 'ltr' | 'rtl' | 'auto';
-    openKey: 'ArrowRight' | 'ArrowLeft';
-    closeKey: 'ArrowRight' | 'ArrowLeft';
+  dir: "ltr" | "rtl" | "auto";
+  openKey: "ArrowRight" | "ArrowLeft";
+  closeKey: "ArrowRight" | "ArrowLeft";
 };
 
 const selectsWithKeyboardData = [
-    {
-        dir: 'ltr',
-        openKey: 'ArrowRight',
-        closeKey: 'ArrowLeft',
-    },
-    {
-        dir: 'rtl',
-        openKey: 'ArrowLeft',
-        closeKey: 'ArrowRight',
-    },
+  {
+    dir: "ltr",
+    openKey: "ArrowRight",
+    closeKey: "ArrowLeft",
+  },
+  {
+    dir: "rtl",
+    openKey: "ArrowLeft",
+    closeKey: "ArrowRight",
+  },
 ] as SelectsWithKeyboardTest[];
 
-describe('Submenu', () => {
-    function selectWithPointer(): void {
-        it('with pointer', async function () {
-            const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
-
-            expect(this.rootItem.open).to.be.false;
-
-            const opened = oneEvent(this.rootItem, 'sp-opened');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await opened;
-
-            expect(this.rootItem.open).to.be.true;
-
-            const item2 = document.querySelector('.submenu-item-2') as MenuItem;
-            const item2BoundingRect = item2.getBoundingClientRect();
-
-            const closed = oneEvent(this.rootItem, 'sp-closed');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            item2BoundingRect.left +
-                                item2BoundingRect.width / 2,
-                            item2BoundingRect.top +
-                                item2BoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await closed;
-
-            expect(
-                this.submenuChanged.withArgs('Two').calledOnce,
-                `submenu changed ${this.submenuChanged.callCount} times`
-            ).to.be.true;
-            expect(
-                this.rootChanged.withArgs('Has submenu').calledOnce,
-                'root changed'
-            ).to.be.true;
-        });
-    }
-    function selectsWithKeyboard(testData: SelectsWithKeyboardTest): void {
-        it(`with keyboard: ${testData.dir}`, async function () {
-            this.el.parentElement.dir = testData.dir;
-
-            await elementUpdated(this.el);
-            expect(this.rootItem.open).to.be.false;
-            const input = document.createElement('input');
-
-            this.el.insertAdjacentElement('beforebegin', input);
-            input.focus();
-            await sendKeys({
-                press: 'Tab',
-            });
-            await sendKeys({
-                press: 'ArrowDown',
-            });
-            await elementUpdated(this.rootItem);
-
-            expect(this.rootItem.focused).to.be.true;
-
-            let opened = oneEvent(this.rootItem, 'sp-opened');
-
-            await sendKeys({
-                press: testData.openKey,
-            });
-            await opened;
-
-            let submenu = this.el.querySelector('[slot="submenu"]') as Menu;
-            let submenuItem = this.el.querySelector(
-                '.submenu-item-2'
-            ) as MenuItem;
-
-            expect(this.rootItem.open).to.be.true;
-            expect(
-                submenu === document.activeElement,
-                `${document.activeElement?.id}`
-            ).to.be.true;
-
-            let closed = oneEvent(this.rootItem, 'sp-closed');
-
-            await sendKeys({
-                press: testData.closeKey,
-            });
-            await closed;
-
-            expect(this.rootItem.open).to.be.false;
-            expect(
-                this.el === document.activeElement,
-                `${document.activeElement?.id}`
-            ).to.be.true;
-
-            opened = oneEvent(this.rootItem, 'sp-opened');
-            await sendKeys({
-                press: testData.openKey,
-            });
-            await opened;
-
-            submenu = this.el.querySelector('[slot="submenu"]') as Menu;
-            submenuItem = this.el.querySelector('.submenu-item-2') as MenuItem;
-
-            expect(this.rootItem.open).to.be.true;
-
-            await sendKeys({
-                press: 'ArrowDown',
-            });
-            await elementUpdated(submenu);
-            await elementUpdated(submenuItem);
-
-            expect(submenu.getAttribute('aria-activedescendant')).to.equal(
-                submenuItem.id
-            );
-
-            closed = oneEvent(this.rootItem, 'sp-closed');
-            await sendKeys({
-                press: 'Enter',
-            });
-            await closed;
-
-            expect(this.submenuChanged.calledWith('Two'), 'submenu changed').to
-                .be.true;
-            expect(this.rootChanged.called, 'root has changed').to.be.true;
-            expect(
-                this.rootChanged.calledWith('Has submenu'),
-                'root specifically changed'
-            ).to.be.true;
-        });
-    }
-    function returnsFocusToRootWhenClosingSubmenu(): void {
-        it('returns visible focus when submenu closed', async function () {
-            const input = document.createElement('input');
-
-            this.el.insertAdjacentElement('beforebegin', input);
-            input.focus();
-            await sendKeys({
-                press: 'Tab',
-            });
-            await elementUpdated(this.el);
-            await nextFrame();
-            await nextFrame();
-            await sendKeys({
-                press: 'ArrowDown',
-            });
-            await elementUpdated(this.el);
-            await nextFrame();
-            await nextFrame();
-            expect(this.rootItem.active, 'not active').to.be.false;
-            expect(
-                this.rootItem.focused,
-                `focused: ${document.activeElement?.localName}`
-            ).to.be.true;
-            expect(this.rootItem.open, 'not open').to.be.false;
-
-            const opened = oneEvent(this.rootItem, 'sp-opened');
-
-            await sendKeys({
-                press: 'ArrowRight',
-            });
-            await opened;
-
-            expect(this.rootItem.active).to.be.true;
-            expect(this.rootItem.focused).to.be.false;
-            expect(this.rootItem.open).to.be.true;
-
-            await sendKeys({
-                press: 'ArrowDown',
-            });
-
-            expect(this.rootItem.active).to.be.true;
-            expect(this.rootItem.focused).to.be.false;
-            expect(this.rootItem.open).to.be.true;
-
-            const closed = oneEvent(this.rootItem, 'sp-closed');
-
-            await sendKeys({
-                press: 'ArrowLeft',
-            });
-            await closed;
-
-            expect(this.rootItem.active).to.be.false;
-            expect(this.rootItem.focused).to.be.true;
-            expect(this.rootItem.open).to.be.false;
-        });
-    }
-    function closesOnPointerLeave(): void {
-        it('closes on `pointerleave`', async function () {
-            const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
-
-            expect(this.rootItem.open).to.be.false;
-
-            const opened = oneEvent(this.rootItem, 'sp-opened');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await opened;
-
-            expect(this.rootItem.open).to.be.true;
-
-            const closed = oneEvent(this.rootItem, 'sp-closed');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height * 2,
-                        ],
-                    },
-                ],
-            });
-            await closed;
-
-            expect(this.rootItem.open).to.be.false;
-        });
-    }
-    function persistsThroughMouseLeaveAndReturn(): void {
-        it('stays open when mousing off menu item and back again', async function () {
-            const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
-
-            expect(this.rootItem.open).to.be.false;
-
-            const opened = oneEvent(this.rootItem, 'sp-opened');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height * 2,
-                        ],
-                    },
-                ],
-            });
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await opened;
-
-            expect(this.rootItem.open).to.be.true;
-
-            const closed = oneEvent(this.rootItem, 'sp-closed');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height * 2,
-                        ],
-                    },
-                ],
-            });
-            await closed;
-        });
-    }
-    function doesNotOpenWhenDisabled(): void {
-        it('does not open when disabled', async function () {
-            this.rootItem.disabled = true;
-            await elementUpdated(this.rootItem);
-
-            const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
-
-            expect(this.rootItem.open).to.be.false;
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            // wait 200ms for open
-            await new Promise((r) => setTimeout(r, 200));
-
-            expect(this.rootItem.open).to.be.false;
-        });
-    }
-    function persistsWhenMovingBetweenItemAndSubmenu(): void {
-        it('stays open when mousing between menu item and submenu', async function () {
-            const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
-
-            expect(this.rootItem.open).to.be.false;
-
-            const opened = oneEvent(this.rootItem, 'sp-opened');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await opened;
-            await nextFrame();
-            await nextFrame();
-
-            const subItem = this.el.querySelector(
-                '.submenu-item-2'
-            ) as MenuItem;
-            const clickSpy = spy();
-
-            subItem.addEventListener('click', () => clickSpy());
-            const subItemBoundingRect = subItem.getBoundingClientRect();
-
-            expect(this.rootItem.open).to.be.true;
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            subItemBoundingRect.left +
-                                subItemBoundingRect.width / 2,
-                            subItemBoundingRect.top +
-                                subItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            expect(this.rootItem.open).to.be.true;
-            // Ensure it _doesn't_ get closed.
-            await aTimeout(150);
-
-            expect(this.rootItem.open).to.be.true;
-
-            const closed = oneEvent(this.rootItem, 'sp-closed');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            subItemBoundingRect.left +
-                                subItemBoundingRect.width / 2,
-                            subItemBoundingRect.top +
-                                subItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await closed;
-
-            expect(clickSpy.callCount).to.equal(1);
-        });
-    }
-    function continuesToOpenWhenMovingBetweenItemAndSubmenu(): void {
-        it('continues to open when mousing between menu item and submenu', async function () {
-            const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
-
-            expect(this.rootItem.open).to.be.false;
-
-            const opened = oneEvent(this.rootItem, 'sp-opened');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rootItemBoundingRect.left +
-                                rootItemBoundingRect.width / 2,
-                            rootItemBoundingRect.top +
-                                rootItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            // Wait for the overlay system to position the submenu before measuring it's position and moving to it.
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            const subItem = this.el.querySelector(
-                '.submenu-item-2'
-            ) as MenuItem;
-            const clickSpy = spy();
-
-            subItem.addEventListener('click', () => clickSpy());
-            const subItemBoundingRect = subItem.getBoundingClientRect();
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            subItemBoundingRect.left +
-                                subItemBoundingRect.width / 2,
-                            subItemBoundingRect.top +
-                                subItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await opened;
-            expect(this.rootItem.open).to.be.true;
-            // Ensure it _doesn't_ get closed.
-            await aTimeout(150);
-
-            expect(this.rootItem.open).to.be.true;
-
-            const closed = oneEvent(this.rootItem, 'sp-closed');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            subItemBoundingRect.left +
-                                subItemBoundingRect.width / 2,
-                            subItemBoundingRect.top +
-                                subItemBoundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await closed;
-
-            expect(clickSpy.callCount).to.equal(1);
-        });
-    }
-    const renderSubmenu = (): TemplateResult => html`
-        One
-        Two
-        Three
-    `;
-
-    describe('static DOM', () => {
-        beforeEach(async function () {
-            this.rootChanged = spy();
-            this.submenuChanged = spy();
-            this.el = await fixture(html`
-                 {
-                        this.rootChanged(event.target.value);
-                    }}
-                >
-                    No submenu
-                    
-                        Has submenu
-                         {
-                                this.submenuChanged(event.target.value);
-                            }}
-                        >
-                            ${renderSubmenu()}
-                        
-                    
-                
-            `);
-            await elementUpdated(this.el);
-            this.rootItem = this.el.querySelector('.root') as MenuItem;
-            await elementUpdated(this.rootItem);
-        });
-        describe.skip('selects', () => {
-            selectWithPointer();
-            selectsWithKeyboardData.map((testData) => {
-                selectsWithKeyboard(testData);
-            });
-        });
-        closesOnPointerLeave();
-        returnsFocusToRootWhenClosingSubmenu();
-        persistsThroughMouseLeaveAndReturn();
-        doesNotOpenWhenDisabled();
-        persistsWhenMovingBetweenItemAndSubmenu();
-        continuesToOpenWhenMovingBetweenItemAndSubmenu();
+describe("Submenu", () => {
+  function selectWithPointer(): void {
+    it("with pointer", async function () {
+      const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
+
+      expect(this.rootItem.open).to.be.false;
+
+      const opened = oneEvent(this.rootItem, "sp-opened");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await opened;
+
+      expect(this.rootItem.open).to.be.true;
+
+      const item2 = document.querySelector(".submenu-item-2") as MenuItem;
+      const item2BoundingRect = item2.getBoundingClientRect();
+
+      const closed = oneEvent(this.rootItem, "sp-closed");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              item2BoundingRect.left + item2BoundingRect.width / 2,
+              item2BoundingRect.top + item2BoundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await closed;
+
+      expect(
+        this.submenuChanged.withArgs("Two").calledOnce,
+        `submenu changed ${this.submenuChanged.callCount} times`,
+      ).to.be.true;
+      expect(
+        this.rootChanged.withArgs("Has submenu").calledOnce,
+        "root changed",
+      ).to.be.true;
     });
-    describe('directive', () => {
-        beforeEach(async function () {
-            this.rootChanged = spy();
-            this.submenuChanged = spy();
-            this.el = await fixture(html`
-                 {
-                        this.rootChanged(event.target.value);
-                    }}
-                >
-                    No submenu
-                    
-                        Has submenu
-                         {
-                                this.submenuChanged(event.target.value);
-                            }}
-                            ${slottableRequest(renderSubmenu)}
-                        >
-                    
-                
-            `);
-            await elementUpdated(this.el);
-            this.rootItem = this.el.querySelector('.root') as MenuItem;
-            await elementUpdated(this.rootItem);
-        });
-        describe('selects', () => {
-            selectWithPointer();
-            selectsWithKeyboardData.map((testData) => {
-                selectsWithKeyboard(testData);
-            });
-        });
-        closesOnPointerLeave();
-        returnsFocusToRootWhenClosingSubmenu();
-        persistsThroughMouseLeaveAndReturn();
-        doesNotOpenWhenDisabled();
-        persistsWhenMovingBetweenItemAndSubmenu();
-        continuesToOpenWhenMovingBetweenItemAndSubmenu();
+  }
+  function selectsWithKeyboard(testData: SelectsWithKeyboardTest): void {
+    it(`with keyboard: ${testData.dir}`, async function () {
+      this.el.parentElement.dir = testData.dir;
+
+      await elementUpdated(this.el);
+      expect(this.rootItem.open).to.be.false;
+      const input = document.createElement("input");
+
+      this.el.insertAdjacentElement("beforebegin", input);
+      input.focus();
+      await sendKeys({
+        press: "Tab",
+      });
+      await sendKeys({
+        press: "ArrowDown",
+      });
+      await elementUpdated(this.rootItem);
+
+      expect(this.rootItem.focused).to.be.true;
+
+      let opened = oneEvent(this.rootItem, "sp-opened");
+
+      await sendKeys({
+        press: testData.openKey,
+      });
+      await opened;
+
+      let submenu = this.el.querySelector('[slot="submenu"]') as Menu;
+      let submenuItem = this.el.querySelector(".submenu-item-2") as MenuItem;
+
+      expect(this.rootItem.open).to.be.true;
+      expect(
+        submenu === document.activeElement,
+        `${document.activeElement?.id}`,
+      ).to.be.true;
+
+      let closed = oneEvent(this.rootItem, "sp-closed");
+
+      await sendKeys({
+        press: testData.closeKey,
+      });
+      await closed;
+
+      expect(this.rootItem.open).to.be.false;
+      expect(
+        this.el === document.activeElement,
+        `${document.activeElement?.id}`,
+      ).to.be.true;
+
+      opened = oneEvent(this.rootItem, "sp-opened");
+      await sendKeys({
+        press: testData.openKey,
+      });
+      await opened;
+
+      submenu = this.el.querySelector('[slot="submenu"]') as Menu;
+      submenuItem = this.el.querySelector(".submenu-item-2") as MenuItem;
+
+      expect(this.rootItem.open).to.be.true;
+
+      await sendKeys({
+        press: "ArrowDown",
+      });
+      await elementUpdated(submenu);
+      await elementUpdated(submenuItem);
+
+      expect(submenu.getAttribute("aria-activedescendant")).to.equal(
+        submenuItem.id,
+      );
+
+      closed = oneEvent(this.rootItem, "sp-closed");
+      await sendKeys({
+        press: "Enter",
+      });
+      await closed;
+
+      expect(this.submenuChanged.calledWith("Two"), "submenu changed").to.be
+        .true;
+      expect(this.rootChanged.called, "root has changed").to.be.true;
+      expect(
+        this.rootChanged.calledWith("Has submenu"),
+        "root specifically changed",
+      ).to.be.true;
     });
-    it('closes deep tree on selection', async function () {
-        const rootChanged = spy();
-        const submenuChanged = spy();
-        const subSubmenuChanged = spy();
-        const el = await fixture(html`
-             {
-                    rootChanged(event.target.value);
-                }}
-            >
-                
-                    Has submenu
-                     {
-                            submenuChanged(event.target.value);
-                        }}
-                    >
-                        One
-                        
-                            Two
-                             {
-                                    subSubmenuChanged(event.target.value);
-                                }}
-                            >
-                                
-                                    A
-                                
-                                
-                                    B
-                                
-                                
-                                    C
-                                
-                            
-                        
-                        
-                            Three
-                        
-                    
-                
-            
-        `);
-        const rootItem = el.querySelector('.root') as MenuItem;
-        const rootItemBoundingRect = rootItem.getBoundingClientRect();
-        const item2 = document.querySelector('.submenu-item-2') as MenuItem;
-        const itemC = document.querySelector('.sub-submenu-item-3') as MenuItem;
-
-        expect(rootItem.open).to.be.false;
-
-        let opened = oneEvent(rootItem, 'sp-opened');
-
-        // Hover the root menu item to open a submenu
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        rootItemBoundingRect.left +
-                            rootItemBoundingRect.width / 2,
-                        rootItemBoundingRect.top +
-                            rootItemBoundingRect.height / 2,
-                    ],
-                },
-            ],
-        });
-        await opened;
-
-        expect(rootItem.open).to.be.true;
-
-        const item2BoundingRect = item2.getBoundingClientRect();
-
-        opened = oneEvent(item2, 'sp-opened');
-        // Move to the submenu item to open a submenu
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        item2BoundingRect.left + item2BoundingRect.width / 2,
-                        item2BoundingRect.top + item2BoundingRect.height / 2,
-                    ],
-                },
+  }
+  function returnsFocusToRootWhenClosingSubmenu(): void {
+    it("returns visible focus when submenu closed", async function () {
+      const input = document.createElement("input");
+
+      this.el.insertAdjacentElement("beforebegin", input);
+      input.focus();
+      await sendKeys({
+        press: "Tab",
+      });
+      await elementUpdated(this.el);
+      await nextFrame();
+      await nextFrame();
+      await sendKeys({
+        press: "ArrowDown",
+      });
+      await elementUpdated(this.el);
+      await nextFrame();
+      await nextFrame();
+      expect(this.rootItem.active, "not active").to.be.false;
+      expect(
+        this.rootItem.focused,
+        `focused: ${document.activeElement?.localName}`,
+      ).to.be.true;
+      expect(this.rootItem.open, "not open").to.be.false;
+
+      const opened = oneEvent(this.rootItem, "sp-opened");
+
+      await sendKeys({
+        press: "ArrowRight",
+      });
+      await opened;
+
+      expect(this.rootItem.active).to.be.true;
+      expect(this.rootItem.focused).to.be.false;
+      expect(this.rootItem.open).to.be.true;
+
+      await sendKeys({
+        press: "ArrowDown",
+      });
+
+      expect(this.rootItem.active).to.be.true;
+      expect(this.rootItem.focused).to.be.false;
+      expect(this.rootItem.open).to.be.true;
+
+      const closed = oneEvent(this.rootItem, "sp-closed");
+
+      await sendKeys({
+        press: "ArrowLeft",
+      });
+      await closed;
+
+      expect(this.rootItem.active).to.be.false;
+      expect(this.rootItem.focused).to.be.true;
+      expect(this.rootItem.open).to.be.false;
+    });
+  }
+  function closesOnPointerLeave(): void {
+    it("closes on `pointerleave`", async function () {
+      const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
+
+      expect(this.rootItem.open).to.be.false;
+
+      const opened = oneEvent(this.rootItem, "sp-opened");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height / 2,
             ],
-        });
-        await opened;
-
-        expect(item2.open).to.be.true;
-
-        const closed = oneEvent(rootItem, 'sp-closed');
-        // click to select and close
-        const itemCBoundingRect = itemC.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'click',
-                    position: [
-                        itemCBoundingRect.left + itemCBoundingRect.width / 2,
-                        itemCBoundingRect.top + itemCBoundingRect.height / 2,
-                    ],
-                },
+          },
+        ],
+      });
+      await opened;
+
+      expect(this.rootItem.open).to.be.true;
+
+      const closed = oneEvent(this.rootItem, "sp-closed");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height * 2,
             ],
-        });
-        await closed;
-
-        expect(rootChanged.calledWith('Has submenu'), 'root changed').to.be
-            .true;
-        expect(submenuChanged.calledWith('Two'), 'submenu changed').to.be.true;
-        expect(subSubmenuChanged.calledWith('C'), 'sub submenu changed').to.be
-            .true;
-    });
-    it('closes all decendent submenus when closing a ancestor menu', async () => {
-        const el = await fixture(html`
-            
-                
-                
-                    New York
-                    Bronx
-                    
-                        Brooklyn
-                        
-                            
-                                Ft. Greene
-                                
-                                    S. Oxford St
-                                    S. Portland Ave
-                                    S. Elliot Pl
-                                
-                            
-                            Park Slope
-                            Williamsburg
-                        
-                    
-                    
-                        Manhattan
-                        
-                            SoHo
-                            
-                                Union Square
-                                
-                                    14th St
-                                    Broadway
-                                    Park Ave
-                                
-                            
-                            Upper East Side
-                        
-                    
-                
-            
-        `);
+          },
+        ],
+      });
+      await closed;
 
-        const rootMenu1 = el.querySelector('#submenu-item-1') as MenuItem;
-        const rootMenu2 = el.querySelector('#submenu-item-3') as MenuItem;
-        const childMenu2 = el.querySelector('#submenu-item-2') as MenuItem;
-
-        expect(el.open).to.be.false;
-        let opened = oneEvent(el, 'sp-opened');
-
-        el.click();
-        await opened;
-        expect(el.open).to.be.true;
-
-        opened = oneEvent(rootMenu1, 'sp-opened');
-        rootMenu1.dispatchEvent(
-            new PointerEvent('pointerenter', { bubbles: true })
-        );
-        await opened;
-        expect(rootMenu1.open).to.be.true;
-
-        opened = oneEvent(childMenu2, 'sp-opened');
-        childMenu2.dispatchEvent(
-            new PointerEvent('pointerenter', { bubbles: true })
-        );
-        await opened;
-        expect(childMenu2.open).to.be.true;
-
-        const childMenu2Closed = oneEvent(childMenu2, 'sp-closed');
-        const rootMenu1Closed = oneEvent(rootMenu1, 'sp-closed');
-        const rootMenu2Opened = oneEvent(rootMenu2, 'sp-opened');
-
-        rootMenu2.dispatchEvent(
-            new PointerEvent('pointerenter', { bubbles: true })
-        );
-        await childMenu2Closed;
-        await rootMenu1Closed;
-        await rootMenu2Opened;
+      expect(this.rootItem.open).to.be.false;
     });
-    describe('deep tree', () => {
-        beforeEach(async function () {
-            this.el = await fixture(html`
-                
-                    
-                    
-                        New York
-                        Bronx
-                        
-                            Brooklyn
-                            
-                                
-                                    Ft. Greene
-                                    
-                                        
-                                            S. Oxford St
-                                        
-                                        
-                                            S. Portland Ave
-                                        
-                                        
-                                            S. Elliot Pl
-                                        
-                                    
-                                
-                                Park Slope
-                                
-                                    Williamsburg
-                                
-                            
-                        
-                        
-                            Manhattan
-                            
-                                SoHo
-                                
-                                    Union Square
-                                    
-                                        14th St
-                                        Broadway
-                                        Park Ave
-                                    
-                                
-                                Upper East Side
-                            
-                        
-                    
-                
-            `);
-            await nextFrame();
-            await nextFrame();
-        });
-        it('closes back to the first overlay without a `root` when clicking away', async function () {
-            const rootMenu1 = this.el.querySelector('#submenu-item-1') as Menu;
-            const childMenu2 = this.el.querySelector('#submenu-item-2') as Menu;
-
-            expect(this.el.open).to.be.false;
-            let opened = oneEvent(this.el, 'sp-opened');
-
-            this.el.click();
-            await opened;
-            expect(this.el.open).to.be.true;
-
-            opened = oneEvent(rootMenu1, 'sp-opened');
-            rootMenu1.dispatchEvent(
-                new PointerEvent('pointerenter', { bubbles: true })
-            );
-            await opened;
-
-            opened = oneEvent(childMenu2, 'sp-opened');
-            childMenu2.dispatchEvent(
-                new PointerEvent('pointerenter', { bubbles: true })
-            );
-            await opened;
-            const closed = Promise.all([
-                oneEvent(childMenu2, 'sp-closed'),
-                oneEvent(rootMenu1, 'sp-closed'),
-                oneEvent(this.el, 'sp-closed'),
-            ]);
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [600, 5],
-                    },
-                ],
-            });
-            await closed;
-        });
-        it('closes decendent menus when Menu Item in ancestor without a submenu is pointerentered', async function () {
-            const rootMenu = this.el.querySelector(
-                '#submenu-item-1'
-            ) as MenuItem;
-            const noSubmenu = this.el.querySelector('#no-submenu') as MenuItem;
-
-            expect(this.el.open).to.be.false;
-            let opened = oneEvent(this.el, 'sp-opened');
-
-            this.el.click();
-            await opened;
-            expect(this.el.open).to.be.true;
-
-            opened = oneEvent(rootMenu, 'sp-opened');
-            rootMenu.dispatchEvent(
-                new PointerEvent('pointerenter', { bubbles: true })
-            );
-            await opened;
-
-            const closed = oneEvent(rootMenu, 'sp-closed');
-
-            noSubmenu.dispatchEvent(
-                new PointerEvent('pointerenter', { bubbles: true })
-            );
-            await closed;
-        });
-        it('closes decendent menus when Menu Item in ancestor is clicked', async function () {
-            const rootMenu1 = this.el.querySelector(
-                '#submenu-item-1'
-            ) as MenuItem;
-            const childMenu2 = this.el.querySelector(
-                '#submenu-item-2'
-            ) as MenuItem;
-            const ancestorItem = this.el.querySelector(
-                '#ancestor-item'
-            ) as MenuItem;
-
-            expect(this.el.open).to.be.false;
-            let opened = oneEvent(this.el, 'sp-opened');
-
-            this.el.click();
-            await opened;
-            expect(this.el.open).to.be.true;
-
-            opened = oneEvent(rootMenu1, 'sp-opened');
-            rootMenu1.dispatchEvent(
-                new PointerEvent('pointerenter', { bubbles: true })
-            );
-            await opened;
-
-            opened = oneEvent(childMenu2, 'sp-opened');
-            childMenu2.dispatchEvent(
-                new PointerEvent('pointerenter', { bubbles: true })
-            );
-            await opened;
-
-            const closed = Promise.all([
-                oneEvent(childMenu2, 'sp-closed'),
-                oneEvent(rootMenu1, 'sp-closed'),
-                oneEvent(this.el, 'sp-closed'),
-            ]);
-            const rect = ancestorItem.getBoundingClientRect();
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            rect.left + rect.width / 2,
-                            rect.top + rect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await closed;
-        });
+  }
+  function persistsThroughMouseLeaveAndReturn(): void {
+    it("stays open when mousing off menu item and back again", async function () {
+      const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
+
+      expect(this.rootItem.open).to.be.false;
+
+      const opened = oneEvent(this.rootItem, "sp-opened");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height * 2,
+            ],
+          },
+        ],
+      });
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await opened;
+
+      expect(this.rootItem.open).to.be.true;
+
+      const closed = oneEvent(this.rootItem, "sp-closed");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height * 2,
+            ],
+          },
+        ],
+      });
+      await closed;
     });
-    it('cleans up submenus that close before they are "open"', async () => {
-        if ('showPopover' in document.createElement('div')) {
-            return;
-        }
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [1, 1],
-                },
+  }
+  function doesNotOpenWhenDisabled(): void {
+    it("does not open when disabled", async function () {
+      this.rootItem.disabled = true;
+      await elementUpdated(this.rootItem);
+
+      const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
+
+      expect(this.rootItem.open).to.be.false;
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height / 2,
             ],
-        });
-        const el = await fixture(html`
-            
-                
-                    Has submenu
-                    ${renderSubmenu()}
-                
-                
-                    Has submenu
-                    ${renderSubmenu()}
-                
-            
-        `);
+          },
+        ],
+      });
+      // wait 200ms for open
+      await new Promise((r) => setTimeout(r, 200));
 
-        await elementUpdated(el);
-        const rootItem1 = el.querySelector('.root-1') as MenuItem;
-        const rootItem2 = el.querySelector('.root-2') as MenuItem;
-
-        expect(rootItem1.open, 'initially closed 1').to.be.false;
-        expect(rootItem2.open, 'initially closed 2').to.be.false;
-
-        const rootItemBoundingRect1 = rootItem1.getBoundingClientRect();
-        const rootItemBoundingRect2 = rootItem2.getBoundingClientRect();
-
-        // Open the first submenu
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        rootItemBoundingRect1.left +
-                            rootItemBoundingRect1.width / 2,
-                        rootItemBoundingRect1.top +
-                            rootItemBoundingRect1.height / 2,
-                    ],
-                },
+      expect(this.rootItem.open).to.be.false;
+    });
+  }
+  function persistsWhenMovingBetweenItemAndSubmenu(): void {
+    it("stays open when mousing between menu item and submenu", async function () {
+      const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
+
+      expect(this.rootItem.open).to.be.false;
+
+      const opened = oneEvent(this.rootItem, "sp-opened");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height / 2,
             ],
-        });
-        // Open the second submenu, closing the first
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        rootItemBoundingRect2.left +
-                            rootItemBoundingRect2.width / 2,
-                        rootItemBoundingRect2.top +
-                            rootItemBoundingRect2.height / 2,
-                    ],
-                },
+          },
+        ],
+      });
+      await opened;
+      await nextFrame();
+      await nextFrame();
+
+      const subItem = this.el.querySelector(".submenu-item-2") as MenuItem;
+      const clickSpy = spy();
+
+      subItem.addEventListener("click", () => clickSpy());
+      const subItemBoundingRect = subItem.getBoundingClientRect();
+
+      expect(this.rootItem.open).to.be.true;
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              subItemBoundingRect.left + subItemBoundingRect.width / 2,
+              subItemBoundingRect.top + subItemBoundingRect.height / 2,
             ],
-        });
-        // Open the first submenu, closing the second
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        rootItemBoundingRect1.left +
-                            rootItemBoundingRect1.width / 2,
-                        rootItemBoundingRect1.top +
-                            rootItemBoundingRect1.height / 2,
-                    ],
-                },
+          },
+        ],
+      });
+      expect(this.rootItem.open).to.be.true;
+      // Ensure it _doesn't_ get closed.
+      await aTimeout(150);
+
+      expect(this.rootItem.open).to.be.true;
+
+      const closed = oneEvent(this.rootItem, "sp-closed");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              subItemBoundingRect.left + subItemBoundingRect.width / 2,
+              subItemBoundingRect.top + subItemBoundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await closed;
+
+      expect(clickSpy.callCount).to.equal(1);
+    });
+  }
+  function continuesToOpenWhenMovingBetweenItemAndSubmenu(): void {
+    it("continues to open when mousing between menu item and submenu", async function () {
+      const rootItemBoundingRect = this.rootItem.getBoundingClientRect();
+
+      expect(this.rootItem.open).to.be.false;
+
+      const opened = oneEvent(this.rootItem, "sp-opened");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+              rootItemBoundingRect.top + rootItemBoundingRect.height / 2,
             ],
-        });
-        // Open the second submenu, closing the first
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        rootItemBoundingRect2.left +
-                            rootItemBoundingRect2.width / 2,
-                        rootItemBoundingRect2.top +
-                            rootItemBoundingRect2.height / 2,
-                    ],
-                },
+          },
+        ],
+      });
+      // Wait for the overlay system to position the submenu before measuring it's position and moving to it.
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      const subItem = this.el.querySelector(".submenu-item-2") as MenuItem;
+      const clickSpy = spy();
+
+      subItem.addEventListener("click", () => clickSpy());
+      const subItemBoundingRect = subItem.getBoundingClientRect();
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              subItemBoundingRect.left + subItemBoundingRect.width / 2,
+              subItemBoundingRect.top + subItemBoundingRect.height / 2,
             ],
-        });
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        const closed = oneEvent(rootItem2, 'sp-closed');
-
-        // Close the second submenu
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        rootItemBoundingRect2.left +
-                            rootItemBoundingRect2.width / 2,
-                        rootItemBoundingRect2.top +
-                            rootItemBoundingRect2.height * 2,
-                    ],
-                },
+          },
+        ],
+      });
+      await opened;
+      expect(this.rootItem.open).to.be.true;
+      // Ensure it _doesn't_ get closed.
+      await aTimeout(150);
+
+      expect(this.rootItem.open).to.be.true;
+
+      const closed = oneEvent(this.rootItem, "sp-closed");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              subItemBoundingRect.left + subItemBoundingRect.width / 2,
+              subItemBoundingRect.top + subItemBoundingRect.height / 2,
             ],
-        });
-        await closed;
+          },
+        ],
+      });
+      await closed;
+
+      expect(clickSpy.callCount).to.equal(1);
+    });
+  }
+  const renderSubmenu = (): TemplateResult => html`
+    One
+    Two
+    Three
+  `;
+
+  describe("static DOM", () => {
+    beforeEach(async function () {
+      this.rootChanged = spy();
+      this.submenuChanged = spy();
+      this.el = await fixture(html`
+         {
+            this.rootChanged(event.target.value);
+          }}
+        >
+          No submenu
+          
+            Has submenu
+             {
+                this.submenuChanged(event.target.value);
+              }}
+            >
+              ${renderSubmenu()}
+            
+          
+        
+      `);
+      await elementUpdated(this.el);
+      this.rootItem = this.el.querySelector(".root") as MenuItem;
+      await elementUpdated(this.rootItem);
+    });
+    describe.skip("selects", () => {
+      selectWithPointer();
+      selectsWithKeyboardData.map((testData) => {
+        selectsWithKeyboard(testData);
+      });
+    });
+    closesOnPointerLeave();
+    returnsFocusToRootWhenClosingSubmenu();
+    persistsThroughMouseLeaveAndReturn();
+    doesNotOpenWhenDisabled();
+    persistsWhenMovingBetweenItemAndSubmenu();
+    continuesToOpenWhenMovingBetweenItemAndSubmenu();
+  });
+  describe("directive", () => {
+    beforeEach(async function () {
+      this.rootChanged = spy();
+      this.submenuChanged = spy();
+      this.el = await fixture(html`
+         {
+            this.rootChanged(event.target.value);
+          }}
+        >
+          No submenu
+          
+            Has submenu
+             {
+                this.submenuChanged(event.target.value);
+              }}
+              ${slottableRequest(renderSubmenu)}
+            >
+          
+        
+      `);
+      await elementUpdated(this.el);
+      this.rootItem = this.el.querySelector(".root") as MenuItem;
+      await elementUpdated(this.rootItem);
+    });
+    describe("selects", () => {
+      selectWithPointer();
+      selectsWithKeyboardData.map((testData) => {
+        selectsWithKeyboard(testData);
+      });
+    });
+    closesOnPointerLeave();
+    returnsFocusToRootWhenClosingSubmenu();
+    persistsThroughMouseLeaveAndReturn();
+    doesNotOpenWhenDisabled();
+    persistsWhenMovingBetweenItemAndSubmenu();
+    continuesToOpenWhenMovingBetweenItemAndSubmenu();
+  });
+  it("closes deep tree on selection", async function () {
+    const rootChanged = spy();
+    const submenuChanged = spy();
+    const subSubmenuChanged = spy();
+    const el = await fixture(html`
+       {
+          rootChanged(event.target.value);
+        }}
+      >
+        
+          Has submenu
+           {
+              submenuChanged(event.target.value);
+            }}
+          >
+            One
+            
+              Two
+               {
+                  subSubmenuChanged(event.target.value);
+                }}
+              >
+                 A 
+                 B 
+                 C 
+              
+            
+             Three 
+          
+        
+      
+    `);
+    const rootItem = el.querySelector(".root") as MenuItem;
+    const rootItemBoundingRect = rootItem.getBoundingClientRect();
+    const item2 = document.querySelector(".submenu-item-2") as MenuItem;
+    const itemC = document.querySelector(".sub-submenu-item-3") as MenuItem;
+
+    expect(rootItem.open).to.be.false;
+
+    let opened = oneEvent(rootItem, "sp-opened");
+
+    // Hover the root menu item to open a submenu
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+            rootItemBoundingRect.top + rootItemBoundingRect.height / 2,
+          ],
+        },
+      ],
+    });
+    await opened;
+
+    expect(rootItem.open).to.be.true;
+
+    const item2BoundingRect = item2.getBoundingClientRect();
+
+    opened = oneEvent(item2, "sp-opened");
+    // Move to the submenu item to open a submenu
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            item2BoundingRect.left + item2BoundingRect.width / 2,
+            item2BoundingRect.top + item2BoundingRect.height / 2,
+          ],
+        },
+      ],
+    });
+    await opened;
+
+    expect(item2.open).to.be.true;
+
+    const closed = oneEvent(rootItem, "sp-closed");
+    // click to select and close
+    const itemCBoundingRect = itemC.getBoundingClientRect();
+
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            itemCBoundingRect.left + itemCBoundingRect.width / 2,
+            itemCBoundingRect.top + itemCBoundingRect.height / 2,
+          ],
+        },
+      ],
+    });
+    await closed;
+
+    expect(rootChanged.calledWith("Has submenu"), "root changed").to.be.true;
+    expect(submenuChanged.calledWith("Two"), "submenu changed").to.be.true;
+    expect(subSubmenuChanged.calledWith("C"), "sub submenu changed").to.be.true;
+  });
+  it("closes all decendent submenus when closing a ancestor menu", async () => {
+    const el = await fixture(html`
+      
+        
+        
+          New York
+          Bronx
+          
+            Brooklyn
+            
+              
+                Ft. Greene
+                
+                  S. Oxford St
+                  S. Portland Ave
+                  S. Elliot Pl
+                
+              
+              Park Slope
+              Williamsburg
+            
+          
+          
+            Manhattan
+            
+              SoHo
+              
+                Union Square
+                
+                  14th St
+                  Broadway
+                  Park Ave
+                
+              
+              Upper East Side
+            
+          
+        
+      
+    `);
+
+    const rootMenu1 = el.querySelector("#submenu-item-1") as MenuItem;
+    const rootMenu2 = el.querySelector("#submenu-item-3") as MenuItem;
+    const childMenu2 = el.querySelector("#submenu-item-2") as MenuItem;
+
+    expect(el.open).to.be.false;
+    let opened = oneEvent(el, "sp-opened");
+
+    el.click();
+    await opened;
+    expect(el.open).to.be.true;
+
+    opened = oneEvent(rootMenu1, "sp-opened");
+    rootMenu1.dispatchEvent(
+      new PointerEvent("pointerenter", { bubbles: true }),
+    );
+    await opened;
+    expect(rootMenu1.open).to.be.true;
+
+    opened = oneEvent(childMenu2, "sp-opened");
+    childMenu2.dispatchEvent(
+      new PointerEvent("pointerenter", { bubbles: true }),
+    );
+    await opened;
+    expect(childMenu2.open).to.be.true;
+
+    const childMenu2Closed = oneEvent(childMenu2, "sp-closed");
+    const rootMenu1Closed = oneEvent(rootMenu1, "sp-closed");
+    const rootMenu2Opened = oneEvent(rootMenu2, "sp-opened");
+
+    rootMenu2.dispatchEvent(
+      new PointerEvent("pointerenter", { bubbles: true }),
+    );
+    await childMenu2Closed;
+    await rootMenu1Closed;
+    await rootMenu2Opened;
+  });
+  describe("deep tree", () => {
+    beforeEach(async function () {
+      this.el = await fixture(html`
+        
+          
+          
+            New York
+            Bronx
+            
+              Brooklyn
+              
+                
+                  Ft. Greene
+                  
+                     S. Oxford St 
+                     S. Portland Ave 
+                     S. Elliot Pl 
+                  
+                
+                Park Slope
+                 Williamsburg 
+              
+            
+            
+              Manhattan
+              
+                SoHo
+                
+                  Union Square
+                  
+                    14th St
+                    Broadway
+                    Park Ave
+                  
+                
+                Upper East Side
+              
+            
+          
+        
+      `);
+      await nextFrame();
+      await nextFrame();
+    });
+    it("closes back to the first overlay without a `root` when clicking away", async function () {
+      const rootMenu1 = this.el.querySelector("#submenu-item-1") as Menu;
+      const childMenu2 = this.el.querySelector("#submenu-item-2") as Menu;
+
+      expect(this.el.open).to.be.false;
+      let opened = oneEvent(this.el, "sp-opened");
+
+      this.el.click();
+      await opened;
+      expect(this.el.open).to.be.true;
+
+      opened = oneEvent(rootMenu1, "sp-opened");
+      rootMenu1.dispatchEvent(
+        new PointerEvent("pointerenter", { bubbles: true }),
+      );
+      await opened;
+
+      opened = oneEvent(childMenu2, "sp-opened");
+      childMenu2.dispatchEvent(
+        new PointerEvent("pointerenter", { bubbles: true }),
+      );
+      await opened;
+      const closed = Promise.all([
+        oneEvent(childMenu2, "sp-closed"),
+        oneEvent(rootMenu1, "sp-closed"),
+        oneEvent(this.el, "sp-closed"),
+      ]);
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [600, 5],
+          },
+        ],
+      });
+      await closed;
+    });
+    it("closes decendent menus when Menu Item in ancestor without a submenu is pointerentered", async function () {
+      const rootMenu = this.el.querySelector("#submenu-item-1") as MenuItem;
+      const noSubmenu = this.el.querySelector("#no-submenu") as MenuItem;
+
+      expect(this.el.open).to.be.false;
+      let opened = oneEvent(this.el, "sp-opened");
+
+      this.el.click();
+      await opened;
+      expect(this.el.open).to.be.true;
+
+      opened = oneEvent(rootMenu, "sp-opened");
+      rootMenu.dispatchEvent(
+        new PointerEvent("pointerenter", { bubbles: true }),
+      );
+      await opened;
+
+      const closed = oneEvent(rootMenu, "sp-closed");
+
+      noSubmenu.dispatchEvent(
+        new PointerEvent("pointerenter", { bubbles: true }),
+      );
+      await closed;
+    });
+    it("closes decendent menus when Menu Item in ancestor is clicked", async function () {
+      const rootMenu1 = this.el.querySelector("#submenu-item-1") as MenuItem;
+      const childMenu2 = this.el.querySelector("#submenu-item-2") as MenuItem;
+      const ancestorItem = this.el.querySelector("#ancestor-item") as MenuItem;
+
+      expect(this.el.open).to.be.false;
+      let opened = oneEvent(this.el, "sp-opened");
+
+      this.el.click();
+      await opened;
+      expect(this.el.open).to.be.true;
+
+      opened = oneEvent(rootMenu1, "sp-opened");
+      rootMenu1.dispatchEvent(
+        new PointerEvent("pointerenter", { bubbles: true }),
+      );
+      await opened;
+
+      opened = oneEvent(childMenu2, "sp-opened");
+      childMenu2.dispatchEvent(
+        new PointerEvent("pointerenter", { bubbles: true }),
+      );
+      await opened;
+
+      const closed = Promise.all([
+        oneEvent(childMenu2, "sp-closed"),
+        oneEvent(rootMenu1, "sp-closed"),
+        oneEvent(this.el, "sp-closed"),
+      ]);
+      const rect = ancestorItem.getBoundingClientRect();
+
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+          },
+        ],
+      });
+      await closed;
+    });
+  });
+  it('cleans up submenus that close before they are "open"', async () => {
+    if ("showPopover" in document.createElement("div")) {
+      return;
+    }
 
-        expect(rootItem1.open, 'finally closed 1').to.be.false;
-        expect(rootItem2.open, 'finally closed 2').to.be.false;
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [1, 1],
+        },
+      ],
+    });
+    const el = await fixture(html`
+      
+        
+          Has submenu
+          ${renderSubmenu()}
+        
+        
+          Has submenu
+          ${renderSubmenu()}
+        
+      
+    `);
+
+    await elementUpdated(el);
+    const rootItem1 = el.querySelector(".root-1") as MenuItem;
+    const rootItem2 = el.querySelector(".root-2") as MenuItem;
+
+    expect(rootItem1.open, "initially closed 1").to.be.false;
+    expect(rootItem2.open, "initially closed 2").to.be.false;
+
+    const rootItemBoundingRect1 = rootItem1.getBoundingClientRect();
+    const rootItemBoundingRect2 = rootItem2.getBoundingClientRect();
+
+    // Open the first submenu
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            rootItemBoundingRect1.left + rootItemBoundingRect1.width / 2,
+            rootItemBoundingRect1.top + rootItemBoundingRect1.height / 2,
+          ],
+        },
+      ],
+    });
+    // Open the second submenu, closing the first
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            rootItemBoundingRect2.left + rootItemBoundingRect2.width / 2,
+            rootItemBoundingRect2.top + rootItemBoundingRect2.height / 2,
+          ],
+        },
+      ],
+    });
+    // Open the first submenu, closing the second
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            rootItemBoundingRect1.left + rootItemBoundingRect1.width / 2,
+            rootItemBoundingRect1.top + rootItemBoundingRect1.height / 2,
+          ],
+        },
+      ],
     });
-    it('allows using non-menu-item elements as the root of a submenu', async () => {
-        const el = await fixture(html`
+    // Open the second submenu, closing the first
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            rootItemBoundingRect2.left + rootItemBoundingRect2.width / 2,
+            rootItemBoundingRect2.top + rootItemBoundingRect2.height / 2,
+          ],
+        },
+      ],
+    });
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    const closed = oneEvent(rootItem2, "sp-closed");
+
+    // Close the second submenu
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            rootItemBoundingRect2.left + rootItemBoundingRect2.width / 2,
+            rootItemBoundingRect2.top + rootItemBoundingRect2.height * 2,
+          ],
+        },
+      ],
+    });
+    await closed;
+
+    expect(rootItem1.open, "finally closed 1").to.be.false;
+    expect(rootItem2.open, "finally closed 2").to.be.false;
+  });
+  it("allows using non-menu-item elements as the root of a submenu", async () => {
+    const el = await fixture(html`
             
                 
                     Has submenu
@@ -1124,51 +1047,47 @@ describe('Submenu', () => {
             
         `);
 
-        await elementUpdated(el);
-        const rootItem = el.querySelector('.root') as MenuItem;
-        const rootItemBoundingRect = rootItem.getBoundingClientRect();
-
-        // Open the first submenu
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        rootItemBoundingRect.left +
-                            rootItemBoundingRect.width / 2,
-                        rootItemBoundingRect.top +
-                            rootItemBoundingRect.height / 2,
-                    ],
-                },
-            ],
-        });
-
-        expect(rootItem.open).to.be.true;
-
-        const firstSubMenuItemRect = el
-            .querySelector('.submenu-1')
-            ?.getBoundingClientRect();
-
-        if (!firstSubMenuItemRect) {
-            throw new Error('Submenu item not found');
-        }
-
-        // click to select
-        await sendMouse({
-            steps: [
-                {
-                    type: 'click',
-                    position: [
-                        firstSubMenuItemRect.left +
-                            firstSubMenuItemRect.width / 2,
-                        firstSubMenuItemRect.top +
-                            firstSubMenuItemRect.height / 2,
-                    ],
-                },
-            ],
-        });
+    await elementUpdated(el);
+    const rootItem = el.querySelector(".root") as MenuItem;
+    const rootItemBoundingRect = rootItem.getBoundingClientRect();
+
+    // Open the first submenu
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            rootItemBoundingRect.left + rootItemBoundingRect.width / 2,
+            rootItemBoundingRect.top + rootItemBoundingRect.height / 2,
+          ],
+        },
+      ],
+    });
 
-        // This test will fail if the click event throws an error
-        // because the submenu root is not a menu-item
+    expect(rootItem.open).to.be.true;
+
+    const firstSubMenuItemRect = el
+      .querySelector(".submenu-1")
+      ?.getBoundingClientRect();
+
+    if (!firstSubMenuItemRect) {
+      throw new Error("Submenu item not found");
+    }
+
+    // click to select
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            firstSubMenuItemRect.left + firstSubMenuItemRect.width / 2,
+            firstSubMenuItemRect.top + firstSubMenuItemRect.height / 2,
+          ],
+        },
+      ],
     });
+
+    // This test will fail if the click event throws an error
+    // because the submenu root is not a menu-item
+  });
 });
diff --git a/packages/meter/sp-meter.ts b/packages/meter/sp-meter.ts
index 345032729f..bc1d6a639e 100644
--- a/packages/meter/sp-meter.ts
+++ b/packages/meter/sp-meter.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Meter } from './src/Meter.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Meter } from "./src/Meter.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-meter', Meter);
+defineElement("sp-meter", Meter);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-meter': Meter;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-meter": Meter;
+  }
 }
diff --git a/packages/meter/src/Meter.ts b/packages/meter/src/Meter.ts
index 87dedf0e66..ba27913984 100644
--- a/packages/meter/src/Meter.ts
+++ b/packages/meter/src/Meter.ts
@@ -11,26 +11,26 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    PropertyValues,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  nothing,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
 
-import { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';
-import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
-import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import styles from './meter.css.js';
+import { getLabelFromSlot } from "@spectrum-web-components/shared/src/get-label-from-slot.js";
+import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
+import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import styles from "./meter.css.js";
 
-export const meterVariants = ['positive', 'notice', 'negative'];
+export const meterVariants = ["positive", "notice", "negative"];
 
 export type MeterVariants = (typeof meterVariants)[number];
 
@@ -40,109 +40,109 @@ export type MeterVariants = (typeof meterVariants)[number];
  * @slot - text labeling the Meter
  *
  */
-export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, ''), {
-    noDefaultSize: true,
+export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, ""), {
+  noDefaultSize: true,
 }) {
-    public static override get styles(): CSSResultArray {
-        return [styles];
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Number })
+  public progress = 0;
+
+  /**
+   * The variant applies specific styling when set to `negative`, `positive`, `notice`
+   * `variant` attribute is removed when not matching one of the above.
+   *
+   * @param variant - The variant applies specific styling when set to `negative`, `positive`, or `notice`.
+   */
+  @property({ type: String })
+  public set variant(variant: MeterVariants) {
+    if (variant === this.variant) {
+      return;
     }
 
-    @property({ type: Number })
-    public progress = 0;
-
-    /**
-     * The variant applies specific styling when set to `negative`, `positive`, `notice`
-     * `variant` attribute is removed when not matching one of the above.
-     *
-     * @param variant - The variant applies specific styling when set to `negative`, `positive`, or `notice`.
-     */
-    @property({ type: String })
-    public set variant(variant: MeterVariants) {
-        if (variant === this.variant) {
-            return;
-        }
-
-        const oldValue = this.variant;
-
-        if (meterVariants.includes(variant)) {
-            this.setAttribute('variant', variant);
-            this._variant = variant;
-        } else {
-            this.removeAttribute('variant');
-            this._variant = '';
-        }
-
-        this.requestUpdate('variant', oldValue);
-    }
+    const oldValue = this.variant;
 
-    public get variant(): MeterVariants {
-        return this._variant;
+    if (meterVariants.includes(variant)) {
+      this.setAttribute("variant", variant);
+      this._variant = variant;
+    } else {
+      this.removeAttribute("variant");
+      this._variant = "";
     }
 
-    private _variant: MeterVariants = '';
-
-    @property({ type: String, reflect: true })
-    public label = '';
-
-    @query('slot')
-    private slotEl!: HTMLSlotElement;
-
-    private languageResolver = new LanguageResolutionController(this);
-
-    @property({ type: Boolean, reflect: true, attribute: 'side-label' })
-    // called sideLabel
-    public sideLabel = false;
-
-    @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white';
-
-    protected override render(): TemplateResult {
-        return html`
-            
-                ${this.slotHasContent ? nothing : this.label}
-                ${this.label}
-            
-            
-                ${new Intl.NumberFormat(this.languageResolver.language, {
-                    style: 'percent',
-                    unitDisplay: 'narrow',
-                }).format(this.progress / 100)}
-            
-            

-                

-            

-        `;
+    this.requestUpdate("variant", oldValue);
+  }
+
+  public get variant(): MeterVariants {
+    return this._variant;
+  }
+
+  private _variant: MeterVariants = "";
+
+  @property({ type: String, reflect: true })
+  public label = "";
+
+  @query("slot")
+  private slotEl!: HTMLSlotElement;
+
+  private languageResolver = new LanguageResolutionController(this);
+
+  @property({ type: Boolean, reflect: true, attribute: "side-label" })
+  // called sideLabel
+  public sideLabel = false;
+
+  @property({ reflect: true, attribute: "static-color" })
+  public staticColor?: "white";
+
+  protected override render(): TemplateResult {
+    return html`
+      
+        ${this.slotHasContent ? nothing : this.label}
+        ${this.label}
+      
+      
+        ${new Intl.NumberFormat(this.languageResolver.language, {
+          style: "percent",
+          unitDisplay: "narrow",
+        }).format(this.progress / 100)}
+      
+      

+        

+      

+    `;
+  }
+
+  protected handleSlotchange(): void {
+    const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
+
+    if (labelFromSlot) {
+      this.label = labelFromSlot;
     }
+  }
 
-    protected handleSlotchange(): void {
-        const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
+    this.setAttribute("role", "meter progressbar");
+  }
 
-        if (labelFromSlot) {
-            this.label = labelFromSlot;
-        }
-    }
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
 
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        this.setAttribute('role', 'meter progressbar');
+    if (changes.has("progress")) {
+      this.setAttribute("aria-valuenow", "" + this.progress);
     }
 
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (changes.has('progress')) {
-            this.setAttribute('aria-valuenow', '' + this.progress);
-        }
-
-        if (changes.has('label')) {
-            if (this.label.length) {
-                this.setAttribute('aria-label', this.label);
-            } else {
-                this.removeAttribute('aria-label');
-            }
-        }
+    if (changes.has("label")) {
+      if (this.label.length) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
     }
+  }
 }
diff --git a/packages/meter/src/index.ts b/packages/meter/src/index.ts
index 99640afafc..398f8b8182 100644
--- a/packages/meter/src/index.ts
+++ b/packages/meter/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './Meter.js';
+export * from "./Meter.js";
diff --git a/packages/meter/stories/meter-sizes.stories.ts b/packages/meter/stories/meter-sizes.stories.ts
index 5c41d861aa..99de90031b 100644
--- a/packages/meter/stories/meter-sizes.stories.ts
+++ b/packages/meter/stories/meter-sizes.stories.ts
@@ -10,23 +10,19 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/meter/sp-meter.js';
+import "@spectrum-web-components/meter/sp-meter.js";
 
 export default {
-    title: 'Meter/Sizes',
-    component: 'sp-meter',
+  title: "Meter/Sizes",
+  component: "sp-meter",
 };
 
 export const s = (): TemplateResult => {
-    return html`
-        Storage Space
-    `;
+  return html` Storage Space `;
 };
 
 export const l = (): TemplateResult => {
-    return html`
-        Storage Space
-    `;
+  return html` Storage Space `;
 };
diff --git a/packages/meter/stories/meter.stories.ts b/packages/meter/stories/meter.stories.ts
index 29efbb964a..472f3fd8c9 100644
--- a/packages/meter/stories/meter.stories.ts
+++ b/packages/meter/stories/meter.stories.ts
@@ -10,26 +10,26 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/meter/sp-meter.js';
+import "@spectrum-web-components/meter/sp-meter.js";
 
 export default {
-    title: 'Meter',
-    component: 'sp-meter',
+  title: "Meter",
+  component: "sp-meter",
 };
 
 const makeOverBackground =
-    (variant?: 'white' | 'black') =>
-    (story: () => TemplateResult): TemplateResult => {
-        const color =
-            variant === 'black'
-                ? 'rgb(181, 209, 211)'
-                : 'var(--spectrum-seafoam-900)';
+  (variant?: "white" | "black") =>
+  (story: () => TemplateResult): TemplateResult => {
+    const color =
+      variant === "black"
+        ? "rgb(181, 209, 211)"
+        : "var(--spectrum-seafoam-900)";
 
-        return html`
-            

-                ${story()}
-            

-        `;
-    };
+      >
+        ${story()}
+      
+    `;
+  };
 
 export const sideLabel = (): TemplateResult => {
-    return html`
-        Storage Space
-    `;
+  return html` Storage Space `;
 };
 
 export const negative = (): TemplateResult => {
-    return html`
-        Storage Space
-    `;
+  return html`
+    Storage Space
+  `;
 };
 
 export const notice = (): TemplateResult => {
-    return html`
-        Storage Space
-    `;
+  return html`
+    Storage Space
+  `;
 };
 
 export const positive = (): TemplateResult => {
-    return html`
-        Storage Space
-    `;
+  return html`
+    Storage Space
+  `;
 };
 
 export const staticWhite = (): TemplateResult => {
-    return makeOverBackground('white')(
-        (): TemplateResult => html`
-            
-                Storage Space
-            
-        `
-    );
+  return makeOverBackground("white")(
+    (): TemplateResult => html`
+       Storage Space 
+    `,
+  );
 };
diff --git a/packages/meter/test/benchmark/basic-test.ts b/packages/meter/test/benchmark/basic-test.ts
index 00ec5c127b..f426bbe22e 100644
--- a/packages/meter/test/benchmark/basic-test.ts
+++ b/packages/meter/test/benchmark/basic-test.ts
@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/meter/sp-meter.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/meter/sp-meter.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/meter/test/meter-memory.test.ts b/packages/meter/test/meter-memory.test.ts
index 067a76a297..659380190f 100644
--- a/packages/meter/test/meter-memory.test.ts
+++ b/packages/meter/test/meter-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/meter/sp-meter.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/meter/sp-meter.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/meter/test/meter.test.ts b/packages/meter/test/meter.test.ts
index 9db31e89bc..77051290a0 100644
--- a/packages/meter/test/meter.test.ts
+++ b/packages/meter/test/meter.test.ts
@@ -10,150 +10,146 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-
-import '@spectrum-web-components/meter/sp-meter.js';
-import { Meter, meterVariants } from '@spectrum-web-components/meter';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
-
-describe('Meter', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-            `)
-    );
-    it('loads default meter accessibly', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-
-        await expect(el).to.be.accessible();
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+
+import "@spectrum-web-components/meter/sp-meter.js";
+import { Meter, meterVariants } from "@spectrum-web-components/meter";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { createLanguageContext } from "../../../tools/reactive-controllers/test/helpers.js";
+
+describe("Meter", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`  `),
+  );
+  it("loads default meter accessibly", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+
+    await expect(el).to.be.accessible();
+  });
+  meterVariants.map((variant) => {
+    it(`loads - [variant="${variant}"]`, async () => {
+      const el = await fixture(html`
+        
+          This meter is of the \`${variant}\` variant.
+        
+      `);
+
+      await elementUpdated(el);
+
+      await expect(el).to.be.accessible();
     });
-    meterVariants.map((variant) => {
-        it(`loads - [variant="${variant}"]`, async () => {
-            const el = await fixture(html`
-                
-                    This meter is of the \`${variant}\` variant.
-                
-            `);
-
-            await elementUpdated(el);
-
-            await expect(el).to.be.accessible();
-        });
-    });
-    it('accepts a changing process w/ [label]', async () => {
-        const el = await fixture(html`
-            
-        `);
+  });
+  it("accepts a changing process w/ [label]", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('0');
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("0");
 
-        el.progress = 50;
+    el.progress = 50;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('50');
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("50");
 
-        el.progress = 100;
+    el.progress = 100;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('100');
-    });
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("100");
+  });
 
-    it('accepts label from `slot`', async () => {
-        const el = await fixture(html`
-            Label From Slot
-        `);
+  it("accepts label from `slot`", async () => {
+    const el = await fixture(html`
+      Label From Slot
+    `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.getAttribute('label')).to.equal('Label From Slot');
-    });
-    it('accepts a changing process', async () => {
-        const el = await fixture(html`
-            Changing Value
-        `);
+    expect(el.getAttribute("label")).to.equal("Label From Slot");
+  });
+  it("accepts a changing process", async () => {
+    const el = await fixture(html`
+      Changing Value
+    `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('0');
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("0");
 
-        el.progress = 50;
+    el.progress = 50;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('50');
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("50");
 
-        el.progress = 100;
+    el.progress = 100;
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('100');
-    });
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("100");
+  });
 
-    it('resolves a language (en-US)', async () => {
-        const [languageContext] = createLanguageContext('en-US');
-        const test = await fixture(html`
-            

-                
-            

-        `);
-        const el = test.querySelector('sp-meter') as Meter;
-        const percentage = el.shadowRoot.querySelector(
-            '.percentage'
-        ) as HTMLElement;
-
-        expect(percentage.textContent?.search('%')).to.not.equal(-1);
-    });
+  it("resolves a language (en-US)", async () => {
+    const [languageContext] = createLanguageContext("en-US");
+    const test = await fixture(html`
+      

+        
+      

+    `);
+    const el = test.querySelector("sp-meter") as Meter;
+    const percentage = el.shadowRoot.querySelector(
+      ".percentage",
+    ) as HTMLElement;
 
-    it('resolves a language (ar-sa)', async () => {
-        const [languageContext] = createLanguageContext('ar-sa');
-        const test = await fixture(html`
-            

-                
-            

-        `);
-        const el = test.querySelector('sp-meter') as Meter;
-        const percentage = el.shadowRoot.querySelector(
-            '.percentage'
-        ) as HTMLElement;
-
-        expect(percentage.textContent?.search('٪')).to.not.equal(-1);
-    });
+    expect(percentage.textContent?.search("%")).to.not.equal(-1);
+  });
 
-    it('validates variants', async () => {
-        const el = await fixture(html`
-            
-                This meter validates variants.
-            
-        `);
+  it("resolves a language (ar-sa)", async () => {
+    const [languageContext] = createLanguageContext("ar-sa");
+    const test = await fixture(html`
+      

+        
+      

+    `);
+    const el = test.querySelector("sp-meter") as Meter;
+    const percentage = el.shadowRoot.querySelector(
+      ".percentage",
+    ) as HTMLElement;
 
-        await elementUpdated(el);
-        expect(el.variant).to.equal('');
+    expect(percentage.textContent?.search("٪")).to.not.equal(-1);
+  });
 
-        el.variant = meterVariants[0];
+  it("validates variants", async () => {
+    const el = await fixture(html`
+       This meter validates variants. 
+    `);
 
-        await elementUpdated(el);
-        expect(el.variant).to.equal(meterVariants[0]);
+    await elementUpdated(el);
+    expect(el.variant).to.equal("");
 
-        el.variant = meterVariants[0];
+    el.variant = meterVariants[0];
 
-        await elementUpdated(el);
-        expect(el.variant).to.equal(meterVariants[0]);
-    });
+    await elementUpdated(el);
+    expect(el.variant).to.equal(meterVariants[0]);
+
+    el.variant = meterVariants[0];
+
+    await elementUpdated(el);
+    expect(el.variant).to.equal(meterVariants[0]);
+  });
 });
diff --git a/packages/number-field/sp-number-field.ts b/packages/number-field/sp-number-field.ts
index 5b1fc3a576..03cdd99e8b 100644
--- a/packages/number-field/sp-number-field.ts
+++ b/packages/number-field/sp-number-field.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { NumberField } from './src/NumberField.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { NumberField } from "./src/NumberField.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-number-field', NumberField);
+defineElement("sp-number-field", NumberField);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-number-field': NumberField;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-number-field": NumberField;
+  }
 }
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
index 56b7936862..49a949e1e6 100644
--- a/packages/number-field/src/NumberField.ts
+++ b/packages/number-field/src/NumberField.ts
@@ -12,15 +12,15 @@ governing permissions and limitations under the License.
 
 import { NumberFormatter, NumberParser } from "@internationalized/number";
 import {
-	CSSResultArray,
-	html,
-	nothing,
-	PropertyValues,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  nothing,
+  PropertyValues,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	property,
-	query,
+  property,
+  query,
 } from "@spectrum-web-components/base/src/decorators.js";
 import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js";
 import chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";
@@ -31,13 +31,13 @@ import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";
 import "@spectrum-web-components/infield-button/sp-infield-button.js";
 import {
-	LanguageResolutionController,
-	languageResolverUpdatedSymbol,
+  LanguageResolutionController,
+  languageResolverUpdatedSymbol,
 } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
 import {
-	isAndroid,
-	isIOS,
-	isIPhone,
+  isAndroid,
+  isIOS,
+  isIPhone,
 } from "@spectrum-web-components/shared/src/platform.js";
 import { TextfieldBase } from "@spectrum-web-components/textfield";
 import styles from "./number-field.css.js";
@@ -47,55 +47,55 @@ export const FRAMES_PER_CHANGE = 5;
 export const CHANGE_DEBOUNCE_MS = 100;
 export const indeterminatePlaceholder = "-";
 export const remapMultiByteCharacters: Record = {
-	"１": "1",
-	"２": "2",
-	"３": "3",
-	"４": "4",
-	"５": "5",
-	"６": "6",
-	"７": "7",
-	"８": "8",
-	"９": "9",
-	"０": "0",
-	"、": ",",
-	"，": ",",
-	"。": ".",
-	"．": ".",
-	"％": "%",
-	"＋": "+",
-	ー: "-",
-	一: "1",
-	二: "2",
-	三: "3",
-	四: "4",
-	五: "5",
-	六: "6",
-	七: "7",
-	八: "8",
-	九: "9",
-	零: "0",
+  "１": "1",
+  "２": "2",
+  "３": "3",
+  "４": "4",
+  "５": "5",
+  "６": "6",
+  "７": "7",
+  "８": "8",
+  "９": "9",
+  "０": "0",
+  "、": ",",
+  "，": ",",
+  "。": ".",
+  "．": ".",
+  "％": "%",
+  "＋": "+",
+  ー: "-",
+  一: "1",
+  二: "2",
+  三: "3",
+  四: "4",
+  五: "5",
+  六: "6",
+  七: "7",
+  八: "8",
+  九: "9",
+  零: "0",
 };
 const chevronIcon: Record TemplateResult> = {
-	s: (dir) => html`
-		
-	`,
-	m: (dir) => html`
-		
-	`,
-	l: (dir) => html`
-		
-	`,
-	xl: (dir) => html`
-		
-	`,
+  s: (dir) => html`
+    
+  `,
+  m: (dir) => html`
+    
+  `,
+  l: (dir) => html`
+    
+  `,
+  xl: (dir) => html`
+    
+  `,
 };
 
 /**
@@ -105,811 +105,822 @@ const chevronIcon: Record TemplateResult> = {
  * @slot negative-help-text - negative help text to associate to your form element when `invalid`
  */
 export class NumberField extends TextfieldBase {
-	public static override get styles(): CSSResultArray {
-		return [...super.styles, styles, chevronStyles, chevronIconOverrides];
-	}
-
-	@query(".buttons")
-	private buttons!: HTMLDivElement;
+  public static override get styles(): CSSResultArray {
+    return [...super.styles, styles, chevronStyles, chevronIconOverrides];
+  }
+
+  @query(".buttons")
+  private buttons!: HTMLDivElement;
 
-	@property({ type: Boolean, reflect: true })
-	public override focused = false;
+  @property({ type: Boolean, reflect: true })
+  public override focused = false;
 
-	_forcedUnit = "";
-
-	/**
-	 * An `<sp-number-field>` element will process its numeric value with
-	 * `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`
-	 * in order to prepare it for visual delivery in the input. In order to customize this
-	 * processing supply your own `Intl.NumberFormatOptions` object here.
-	 *
-	 * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
-	 */
-	@property({ type: Object, attribute: "format-options" })
-	public formatOptions: Intl.NumberFormatOptions = {};
-
-	/**
-	 * Whether the stepper UI is hidden or not.
-	 */
-	@property({ type: Boolean, reflect: true, attribute: "hide-stepper" })
-	public hideStepper = false;
-
-	@property({ type: Boolean, reflect: true })
-	public indeterminate = false;
-
-	@property({ type: Boolean, reflect: true, attribute: "keyboard-focused" })
-	public keyboardFocused = false;
-
-	@property({ type: Number })
-	public max?: number;
-
-	@property({ type: Number })
-	public min?: number;
-
-	/**
-	 * The distance by which to alter the value of the element when taking a "step".
-	 *
-	 * When `this.formatOptions.style === 'percentage'` the default step will be
-	 * set to 0.01 unless otherwise supplied to the element.
-	 */
-	@property({ type: Number })
-	public step?: number;
-
-	public managedInput = false;
-
-	@property({ type: Number, reflect: true, attribute: "step-modifier" })
-	public stepModifier = 10;
-
-	@property({ type: Number })
-	public override set value(rawValue: number) {
-		const value = this.validateInput(rawValue);
-
-		if (value === this.value) {
-			return;
-		}
-
-		this.lastCommitedValue = value;
-		const oldValue = this._value;
-
-		this._value = value;
-		this.requestUpdate("value", oldValue);
-	}
-
-	public override get value(): number {
-		return this._value;
-	}
-
-	private get inputValue(): string {
-		return this.indeterminate ? this.formattedValue : this.inputElement.value;
-	}
-
-	public override _value = NaN;
-	private _trackingValue = "";
-	private lastCommitedValue?: number;
-
-	private setValue(newValue: number = this.value): void {
-		// Capture previous value for accurate IME change detection
-		const previousValue = this.lastCommitedValue;
-
-		this.value = newValue;
-
-		if (typeof previousValue === "undefined" || previousValue === this.value) {
-			// Do not announce when the value is unchanged.
-			return;
-		}
-
-		this.lastCommitedValue = this.value;
-
-		this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-	}
-
-	/**
-	 * Retreive the value of the element parsed to a Number.
-	 */
-	public get valueAsString(): string {
-		return this._value.toString();
-	}
-
-	public set valueAsString(value: string) {
-		this.value = this.numberParser.parse(value);
-	}
-
-	public get formattedValue(): string {
-		if (isNaN(this.value)) return "";
-
-		return (
-			this.numberFormatter.format(this.value) +
-			(this.focused ? "" : this._forcedUnit)
-		);
-	}
-
-	private decimalsChars = new Set([".", ","]);
-	private valueBeforeFocus: string = "";
-	private isIntentDecimal: boolean = false;
-
-	private convertValueToNumber(inputValue: string): number {
-		// Normalize full-width characters to their ASCII equivalents
-		let normalizedValue = inputValue
-			.split("")
-			.map((char) => remapMultiByteCharacters[char] || char)
-			.join("");
-
-		const separators = this.valueBeforeFocus
-			.split("")
-			.filter((char) => this.decimalsChars.has(char));
-		const uniqueSeparators = new Set(separators);
-
-		if (
-			isIOS() &&
-			this.inputElement.inputMode === "decimal" &&
-			normalizedValue !== this.valueBeforeFocus
-		) {
-			const parts = this.numberFormatter.formatToParts(1000.1);
-
-			const replacementDecimal = parts.find(
-				(part) => part.type === "decimal",
-			)!.value;
-
-			for (const separator of uniqueSeparators) {
-				const isDecimalSeparator = separator === replacementDecimal;
-
-				if (!isDecimalSeparator && !this.isIntentDecimal) {
-					normalizedValue = normalizedValue.replace(
-						new RegExp(separator, "g"),
-						"",
-					);
-				}
-			}
-
-			let hasReplacedDecimal = false;
-			const valueChars = normalizedValue.split("");
-
-			for (let index = valueChars.length - 1; index >= 0; index--) {
-				const char = valueChars[index];
-
-				if (this.decimalsChars.has(char)) {
-					if (!hasReplacedDecimal) {
-						valueChars[index] = replacementDecimal;
-						hasReplacedDecimal = true;
-					} else valueChars[index] = "";
-				}
-			}
-			normalizedValue = valueChars.join("");
-		}
-
-		return this.numberParser.parse(normalizedValue);
-	}
-	private get _step(): number {
-		if (typeof this.step !== "undefined") {
-			return this.step;
-		}
-
-		if (this.formatOptions?.style === "percent") {
-			return 0.01;
-		}
-
-		return 1;
-	}
-
-	private nextChange!: number;
-	private changeCount = 0;
-	private findChange!: (event: PointerEvent) => void;
-	private change!: (event: PointerEvent) => void;
-	private safty!: number;
-	private languageResolver = new LanguageResolutionController(this);
-
-	private handlePointerdown(event: PointerEvent): void {
-		if (event.button !== 0) {
-			event.preventDefault();
-
-			return;
-		}
-
-		this.managedInput = true;
-		this.buttons.setPointerCapture(event.pointerId);
-		const stepUpRect = this.buttons.children[0].getBoundingClientRect();
-		const stepDownRect = this.buttons.children[1].getBoundingClientRect();
-
-		this.findChange = (event: PointerEvent) => {
-			if (
-				event.clientX >= stepUpRect.x &&
-				event.clientY >= stepUpRect.y &&
-				event.clientX <= stepUpRect.x + stepUpRect.width &&
-				event.clientY <= stepUpRect.y + stepUpRect.height
-			) {
-				this.change = (event: PointerEvent) =>
-					this.increment(event.shiftKey ? this.stepModifier : 1);
-			} else if (
-				event.clientX >= stepDownRect.x &&
-				event.clientY >= stepDownRect.y &&
-				event.clientX <= stepDownRect.x + stepDownRect.width &&
-				event.clientY <= stepDownRect.y + stepDownRect.height
-			) {
-				this.change = (event: PointerEvent) =>
-					this.decrement(event.shiftKey ? this.stepModifier : 1);
-			}
-		};
-		this.findChange(event);
-		this.startChange(event);
-	}
-
-	private startChange(event: PointerEvent): void {
-		this.changeCount = 0;
-		this.doChange(event);
-		this.safty = setTimeout(() => {
-			this.doNextChange(event);
-		}, 400) as unknown as number;
-	}
-
-	private doChange(event: PointerEvent): void {
-		this.change(event);
-	}
-
-	private handlePointermove(event: PointerEvent): void {
-		this.findChange(event);
-	}
-
-	private handlePointerup(event: PointerEvent): void {
-		this.buttons.releasePointerCapture(event.pointerId);
-		cancelAnimationFrame(this.nextChange);
-		clearTimeout(this.safty);
-		this.managedInput = false;
-		this.setValue();
-	}
-
-	private doNextChange(event: PointerEvent): number {
-		this.changeCount += 1;
-
-		if (this.changeCount % FRAMES_PER_CHANGE === 0) {
-			this.doChange(event);
-		}
-
-		return requestAnimationFrame(() => {
-			this.nextChange = this.doNextChange(event);
-		});
-	}
-
-	private stepBy(count: number): void {
-		if (this.disabled || this.readonly) {
-			return;
-		}
-
-		const min = typeof this.min !== "undefined" ? this.min : 0;
-		let value = this.value;
-
-		value += count * this._step;
-
-		if (isNaN(this.value)) {
-			value = min;
-		}
-
-		value = this.valueWithLimits(value);
-
-		this.requestUpdate();
-		this._value = this.validateInput(value);
-		this.inputElement.value = this.numberFormatter.format(value);
-
-		this.inputElement.dispatchEvent(
-			new Event("input", { bubbles: true, composed: true }),
-		);
-		this.indeterminate = false;
-		this.focus();
-	}
-
-	private increment(factor = 1): void {
-		this.stepBy(1 * factor);
-	}
-
-	private decrement(factor = 1): void {
-		this.stepBy(-1 * factor);
-	}
-
-	private handleKeydown(event: KeyboardEvent): void {
-		if (this.isComposing) return;
-
-		switch (event.code) {
-			case "ArrowUp":
-				event.preventDefault();
-				this.increment(event.shiftKey ? this.stepModifier : 1);
-				this.setValue();
-				break;
-			case "ArrowDown":
-				event.preventDefault();
-				this.decrement(event.shiftKey ? this.stepModifier : 1);
-				this.setValue();
-				break;
-		}
-	}
-
-	private queuedChangeEvent!: number;
-
-	protected onScroll(event: WheelEvent): void {
-		event.preventDefault();
-		this.managedInput = true;
-		const direction = event.shiftKey
-			? event.deltaX / Math.abs(event.deltaX)
-			: event.deltaY / Math.abs(event.deltaY);
-
-		if (direction !== 0 && !isNaN(direction)) {
-			this.stepBy(direction * (event.shiftKey ? this.stepModifier : 1));
-			clearTimeout(this.queuedChangeEvent);
-			this.queuedChangeEvent = setTimeout(() => {
-				this.setValue();
-			}, CHANGE_DEBOUNCE_MS) as unknown as number;
-		}
-
-		this.managedInput = false;
-	}
-
-	protected override onFocus(): void {
-		super.onFocus();
-		this._trackingValue = this.inputValue;
-		this.keyboardFocused = !this.readonly && true;
-		this.addEventListener("wheel", this.onScroll, { passive: false });
-		this.valueBeforeFocus = this.inputElement.value;
-	}
-
-	protected override onBlur(_event: FocusEvent): void {
-		super.onBlur(_event);
-		this.keyboardFocused = !this.readonly && false;
-		this.removeEventListener("wheel", this.onScroll);
-		this.isIntentDecimal = false;
-	}
-
-	private handleFocusin(): void {
-		this.focused = !this.readonly && true;
-		this.keyboardFocused = !this.readonly && true;
-	}
-
-	private handleFocusout(): void {
-		this.focused = !this.readonly && false;
-		this.keyboardFocused = !this.readonly && false;
-	}
-
-	private wasIndeterminate = false;
-	private indeterminateValue?: number;
-
-	protected override handleChange(): void {
-		const value = this.convertValueToNumber(this.inputValue);
-
-		if (this.wasIndeterminate) {
-			this.wasIndeterminate = false;
-			this.indeterminateValue = undefined;
-
-			if (isNaN(value)) {
-				this.indeterminate = true;
-
-				return;
-			}
-		}
-
-		this.setValue(value);
-		this.inputElement.value = this.formattedValue;
-	}
-
-	protected handleCompositionStart(): void {
-		this.isComposing = true;
-	}
-
-	protected handleCompositionEnd(): void {
-		this.isComposing = false;
-		requestAnimationFrame(() => {
-			this.inputElement.dispatchEvent(
-				new Event("input", {
-					composed: true,
-					bubbles: true,
-				}),
-			);
-		});
-	}
-
-	private hasRecentlyReceivedPointerDown = false;
-
-	protected override handleInputElementPointerdown(): void {
-		this.hasRecentlyReceivedPointerDown = true;
-		this.updateComplete.then(() => {
-			requestAnimationFrame(() => {
-				this.hasRecentlyReceivedPointerDown = false;
-			});
-		});
-	}
-
-	protected override handleInput(event: InputEvent): void {
-		if (this.isComposing) {
-			// If user actually types a new character.
-			if (event.data) {
-				// Don't allow non-numeric characters even in composing mode.
-				const partialValue = this.convertValueToNumber(event.data);
-
-				if (Number.isNaN(partialValue)) {
-					this.inputElement.value = this.indeterminate
-						? indeterminatePlaceholder
-						: this._trackingValue;
-
-					this.isComposing = false;
-				}
-			}
-
-			event.stopPropagation();
-
-			return;
-		}
-
-		if (this.indeterminate) {
-			this.wasIndeterminate = true;
-			this.indeterminateValue = this.value;
-			this.inputElement.value = this.inputElement.value.replace(
-				indeterminatePlaceholder,
-				"",
-			);
-		}
-
-		if (event.data && this.decimalsChars.has(event.data))
-			this.isIntentDecimal = true;
-
-		const { value: originalValue, selectionStart } = this.inputElement;
-		const value = originalValue
-			.split("")
-			.map((char) => remapMultiByteCharacters[char] || char)
-			.join("");
-
-		if (this.numberParser.isValidPartialNumber(value)) {
-			// Use starting value as this.value is the `input` value.
-			this.lastCommitedValue = this.lastCommitedValue ?? this.value;
-			const valueAsNumber = this.convertValueToNumber(value);
-
-			if (!value && this.indeterminateValue) {
-				this.indeterminate = true;
-				this._value = this.indeterminateValue;
-			} else {
-				this.indeterminate = false;
-				this._value = this.validateInput(valueAsNumber);
-			}
-
-			this._trackingValue = value;
-			this.inputElement.value = value;
-			this.inputElement.setSelectionRange(selectionStart, selectionStart);
-
-			return;
-		} else {
-			this.inputElement.value = this.indeterminate
-				? indeterminatePlaceholder
-				: this._trackingValue;
-
-			// Don't emit input event when the character is invalid.
-			event.stopPropagation();
-		}
-
-		const currentLength = value.length;
-		const previousLength = this._trackingValue.length;
-		const nextSelectStart =
-			(selectionStart || currentLength) - (currentLength - previousLength);
-
-		this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
-	}
-
-	private valueWithLimits(nextValue: number): number {
-		let value = nextValue;
-
-		if (typeof this.min !== "undefined") {
-			value = Math.max(this.min, value);
-		}
-
-		if (typeof this.max !== "undefined") {
-			value = Math.min(this.max, value);
-		}
-
-		return value;
-	}
-
-	private validateInput(value: number): number {
-		value = this.valueWithLimits(value);
-		const signMultiplier = value < 0 ? -1 : 1; // 'signMultiplier' adjusts 'value' for 'validateInput' and reverts it before returning.
-
-		value *= signMultiplier;
-
-		// Step shouldn't validate when 0...
-		if (this.step) {
-			const min = typeof this.min !== "undefined" ? this.min : 0;
-			const moduloStep = parseFloat(
-				this.valueFormatter.format((value - min) % this.step),
-			);
-			const fallsOnStep = moduloStep === 0;
-
-			if (!fallsOnStep) {
-				const overUnder = Math.round(moduloStep / this.step);
-
-				if (overUnder === 1) {
-					value += this.step - moduloStep;
-				} else {
-					value -= moduloStep;
-				}
-			}
-
-			if (typeof this.max !== "undefined") {
-				while (value > this.max) {
-					value -= this.step;
-				}
-			}
-
-			value = parseFloat(this.valueFormatter.format(value));
-		}
-
-		value *= signMultiplier;
-
-		return value;
-	}
-
-	protected override get displayValue(): string {
-		const indeterminateValue = this.focused ? "" : indeterminatePlaceholder;
-
-		return this.indeterminate ? indeterminateValue : this.formattedValue;
-	}
-
-	protected clearNumberFormatterCache(): void {
-		this._numberFormatter = undefined;
-		this._numberParser = undefined;
-	}
-
-	/**
-	 * Get the number formatter instance.
-	 * This method initializes the number formatter if it is not already created.
-	 * It handles different formatting options and ensures that the formatter is
-	 * created with the correct language and options.
-	 *
-	 * @returns The number formatter instance.
-	 */
-	protected get numberFormatter(): NumberFormatter {
-		// Check if the number formatter or the focused number formatter is not initialized
-		if (!this._numberFormatter || !this._numberFormatterFocused) {
-			const {
-				style,
-				unit,
-				// eslint-disable-next-line @typescript-eslint/no-unused-vars
-				unitDisplay,
-				...formatOptionsNoUnit
-			} = this.formatOptions;
-
-			// If the style is not 'unit', set the style in formatOptionsNoUnit
-			if (style !== "unit") {
-				(formatOptionsNoUnit as Intl.NumberFormatOptions).style = style;
-			}
-
-			// Create a focused number formatter with the language and format options without unit
-			this._numberFormatterFocused = new NumberFormatter(
-				this.languageResolver.language,
-				formatOptionsNoUnit,
-			);
-
-			try {
-				// Try to create a number formatter with the full format options
-				this._numberFormatter = new NumberFormatter(
-					this.languageResolver.language,
-					this.formatOptions,
-				);
-				this._forcedUnit = "";
-				this._numberFormatter.format(1); // Test the formatter with a sample value
-			} catch (error) {
-				// If an error occurs and the style is 'unit', set the forced unit
-				if (style === "unit") {
-					this._forcedUnit = unit as string;
-				}
-
-				// Fallback to the focused number formatter
-				this._numberFormatter = this._numberFormatterFocused;
-			}
-		}
-
-		// Return the appropriate formatter based on the focused state
-		return this.focused ? this._numberFormatterFocused : this._numberFormatter;
-	}
-
-	protected clearValueFormatterCache(): void {
-		this._valueFormatter = undefined;
-	}
-	protected get valueFormatter(): NumberFormatter {
-		if (!this._valueFormatter) {
-			const digitsAfterDecimal = this.step
-				? this.step != Math.floor(this.step)
-					? this.step.toString().split(".")[1].length
-					: 0
-				: 0;
-
-			this._valueFormatter = new NumberFormatter("en", {
-				useGrouping: false,
-				maximumFractionDigits: digitsAfterDecimal,
-			});
-		}
-
-		return this._valueFormatter;
-	}
-	private _numberFormatter?: NumberFormatter;
-	private _numberFormatterFocused?: NumberFormatter;
-	private _valueFormatter?: NumberFormatter;
-	protected get numberParser(): NumberParser {
-		if (!this._numberParser || !this._numberParserFocused) {
-			const {
-				style,
-				unit,
-				// eslint-disable-next-line @typescript-eslint/no-unused-vars
-				unitDisplay,
-				...formatOptionsNoUnit
-			} = this.formatOptions;
-
-			if (style !== "unit") {
-				(formatOptionsNoUnit as Intl.NumberFormatOptions).style = style;
-			}
-
-			this._numberParserFocused = new NumberParser(
-				this.languageResolver.language,
-				formatOptionsNoUnit,
-			);
-
-			try {
-				this._numberParser = new NumberParser(
-					this.languageResolver.language,
-					this.formatOptions,
-				);
-				this._forcedUnit = "";
-				this._numberParser.parse("0");
-			} catch (error) {
-				if (style === "unit") {
-					this._forcedUnit = unit as string;
-				}
-
-				this._numberParser = this._numberParserFocused;
-			}
-		}
-
-		return this.focused ? this._numberParserFocused : this._numberParser;
-	}
-
-	applyFocusElementLabel = (value?: string): void => {
-		this.appliedLabel = value;
-	};
-
-	private _numberParser?: NumberParser;
-	private _numberParserFocused?: NumberParser;
-
-	protected override renderField(): TemplateResult {
-		this.autocomplete = "off";
-
-		return html`
-			${super.renderField()}
-			${this.hideStepper
-				? nothing
-				: html`
-						
-							
-							
-						
-					`}
-		`;
-	}
-
-	protected override update(changes: PropertyValues): void {
-		if (changes.has("formatOptions") || changes.has("resolvedLanguage")) {
-			this.clearNumberFormatterCache();
-		}
-
-		if (
-			changes.has("value") ||
-			changes.has("max") ||
-			changes.has("min") ||
-			changes.has("step")
-		) {
-			const value = this.numberParser.parse(
-				this.formattedValue.replace(this._forcedUnit, ""),
-			);
-
-			this.value = value;
-			this.clearValueFormatterCache();
-		}
-
-		super.update(changes);
-	}
-
-	public override willUpdate(changes: PropertyValues): void {
-		this.multiline = false;
-
-		if (changes.has(languageResolverUpdatedSymbol)) {
-			this.clearNumberFormatterCache();
-		}
-	}
-
-	private isComposing = false;
-
-	protected override firstUpdated(changes: PropertyValues): void {
-		super.firstUpdated(changes);
-		this.addEventListener("keydown", this.handleKeydown);
-		this.addEventListener("compositionstart", this.handleCompositionStart);
-		this.addEventListener("compositionend", this.handleCompositionEnd);
-	}
-
-	protected override updated(changes: PropertyValues): void {
-		if (!this.inputElement || !this.isConnected) {
-			// Prevent race conditions if inputElement is removed from DOM while a queued update is still running.
-			return;
-		}
-
-		if (changes.has("min") || changes.has("formatOptions")) {
-			const hasOnlyPositives = typeof this.min !== "undefined" && this.min >= 0;
-
-			const { maximumFractionDigits } = this.numberFormatter.resolvedOptions();
-			const hasDecimals = maximumFractionDigits && maximumFractionDigits > 0;
-
-			let inputMode = "numeric";
-
-			/* c8 ignore next 5 */
-			// iPhone doesn't have a minus sign in either numeric or decimal.
-			if (isIPhone() && !hasOnlyPositives) inputMode = "text";
-			else if (isIOS() && hasDecimals) inputMode = "decimal";
-			// Android numeric has both a decimal point and minus key. Decimal does not have a minus key.
-			else if (isAndroid() && hasDecimals && hasOnlyPositives)
-				inputMode = "decimal";
-
-			this.inputElement.inputMode = inputMode;
-		}
-
-		if (
-			changes.has("focused") &&
-			this.focused &&
-			!this.hasRecentlyReceivedPointerDown &&
-			!!this.formatOptions.unit
-		) {
-			// Normalize keyboard focus entry between unit and non-unit bearing Number Fields
-			this.setSelectionRange(0, this.displayValue.length);
-		}
-	}
+  _forcedUnit = "";
+
+  /**
+   * An `<sp-number-field>` element will process its numeric value with
+   * `new Intl.NumberFormat(this.resolvedLanguage, this.formatOptions).format(this.valueAsNumber)`
+   * in order to prepare it for visual delivery in the input. In order to customize this
+   * processing supply your own `Intl.NumberFormatOptions` object here.
+   *
+   * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+   */
+  @property({ type: Object, attribute: "format-options" })
+  public formatOptions: Intl.NumberFormatOptions = {};
+
+  /**
+   * Whether the stepper UI is hidden or not.
+   */
+  @property({ type: Boolean, reflect: true, attribute: "hide-stepper" })
+  public hideStepper = false;
+
+  @property({ type: Boolean, reflect: true })
+  public indeterminate = false;
+
+  @property({ type: Boolean, reflect: true, attribute: "keyboard-focused" })
+  public keyboardFocused = false;
+
+  @property({ type: Number })
+  public max?: number;
+
+  @property({ type: Number })
+  public min?: number;
+
+  /**
+   * The distance by which to alter the value of the element when taking a "step".
+   *
+   * When `this.formatOptions.style === 'percentage'` the default step will be
+   * set to 0.01 unless otherwise supplied to the element.
+   */
+  @property({ type: Number })
+  public step?: number;
+
+  public managedInput = false;
+
+  @property({ type: Number, reflect: true, attribute: "step-modifier" })
+  public stepModifier = 10;
+
+  @property({ type: Number })
+  public override set value(rawValue: number) {
+    const value = this.validateInput(rawValue);
+
+    if (value === this.value) {
+      return;
+    }
+
+    this.lastCommitedValue = value;
+    const oldValue = this._value;
+
+    this._value = value;
+    this.requestUpdate("value", oldValue);
+  }
+
+  public override get value(): number {
+    return this._value;
+  }
+
+  private get inputValue(): string {
+    return this.indeterminate ? this.formattedValue : this.inputElement.value;
+  }
+
+  public override _value = NaN;
+  private _trackingValue = "";
+  private lastCommitedValue?: number;
+
+  private setValue(newValue: number = this.value): void {
+    // Capture previous value for accurate IME change detection
+    const previousValue = this.lastCommitedValue;
+
+    this.value = newValue;
+
+    if (typeof previousValue === "undefined" || previousValue === this.value) {
+      // Do not announce when the value is unchanged.
+      return;
+    }
+
+    this.lastCommitedValue = this.value;
+
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+
+  /**
+   * Retreive the value of the element parsed to a Number.
+   */
+  public get valueAsString(): string {
+    return this._value.toString();
+  }
+
+  public set valueAsString(value: string) {
+    this.value = this.numberParser.parse(value);
+  }
+
+  public get formattedValue(): string {
+    if (isNaN(this.value)) {
+      return "";
+    }
+
+    return (
+      this.numberFormatter.format(this.value) +
+      (this.focused ? "" : this._forcedUnit)
+    );
+  }
+
+  private decimalsChars = new Set([".", ","]);
+  private valueBeforeFocus: string = "";
+  private isIntentDecimal: boolean = false;
+
+  private convertValueToNumber(inputValue: string): number {
+    // Normalize full-width characters to their ASCII equivalents
+    let normalizedValue = inputValue
+      .split("")
+      .map((char) => remapMultiByteCharacters[char] || char)
+      .join("");
+
+    const separators = this.valueBeforeFocus
+      .split("")
+      .filter((char) => this.decimalsChars.has(char));
+    const uniqueSeparators = new Set(separators);
+
+    if (
+      isIOS() &&
+      this.inputElement.inputMode === "decimal" &&
+      normalizedValue !== this.valueBeforeFocus
+    ) {
+      const parts = this.numberFormatter.formatToParts(1000.1);
+
+      const replacementDecimal = parts.find(
+        (part) => part.type === "decimal",
+      )!.value;
+
+      for (const separator of uniqueSeparators) {
+        const isDecimalSeparator = separator === replacementDecimal;
+
+        if (!isDecimalSeparator && !this.isIntentDecimal) {
+          normalizedValue = normalizedValue.replace(
+            new RegExp(separator, "g"),
+            "",
+          );
+        }
+      }
+
+      let hasReplacedDecimal = false;
+      const valueChars = normalizedValue.split("");
+
+      for (let index = valueChars.length - 1; index >= 0; index--) {
+        const char = valueChars[index];
+
+        if (this.decimalsChars.has(char)) {
+          if (!hasReplacedDecimal) {
+            valueChars[index] = replacementDecimal;
+            hasReplacedDecimal = true;
+          } else {
+            valueChars[index] = "";
+          }
+        }
+      }
+      normalizedValue = valueChars.join("");
+    }
+
+    return this.numberParser.parse(normalizedValue);
+  }
+  private get _step(): number {
+    if (typeof this.step !== "undefined") {
+      return this.step;
+    }
+
+    if (this.formatOptions?.style === "percent") {
+      return 0.01;
+    }
+
+    return 1;
+  }
+
+  private nextChange!: number;
+  private changeCount = 0;
+  private findChange!: (event: PointerEvent) => void;
+  private change!: (event: PointerEvent) => void;
+  private safty!: number;
+  private languageResolver = new LanguageResolutionController(this);
+
+  private handlePointerdown(event: PointerEvent): void {
+    if (event.button !== 0) {
+      event.preventDefault();
+
+      return;
+    }
+
+    this.managedInput = true;
+    this.buttons.setPointerCapture(event.pointerId);
+    const stepUpRect = this.buttons.children[0].getBoundingClientRect();
+    const stepDownRect = this.buttons.children[1].getBoundingClientRect();
+
+    this.findChange = (event: PointerEvent) => {
+      if (
+        event.clientX >= stepUpRect.x &&
+        event.clientY >= stepUpRect.y &&
+        event.clientX <= stepUpRect.x + stepUpRect.width &&
+        event.clientY <= stepUpRect.y + stepUpRect.height
+      ) {
+        this.change = (event: PointerEvent) =>
+          this.increment(event.shiftKey ? this.stepModifier : 1);
+      } else if (
+        event.clientX >= stepDownRect.x &&
+        event.clientY >= stepDownRect.y &&
+        event.clientX <= stepDownRect.x + stepDownRect.width &&
+        event.clientY <= stepDownRect.y + stepDownRect.height
+      ) {
+        this.change = (event: PointerEvent) =>
+          this.decrement(event.shiftKey ? this.stepModifier : 1);
+      }
+    };
+    this.findChange(event);
+    this.startChange(event);
+  }
+
+  private startChange(event: PointerEvent): void {
+    this.changeCount = 0;
+    this.doChange(event);
+    this.safty = setTimeout(() => {
+      this.doNextChange(event);
+    }, 400) as unknown as number;
+  }
+
+  private doChange(event: PointerEvent): void {
+    this.change(event);
+  }
+
+  private handlePointermove(event: PointerEvent): void {
+    this.findChange(event);
+  }
+
+  private handlePointerup(event: PointerEvent): void {
+    this.buttons.releasePointerCapture(event.pointerId);
+    cancelAnimationFrame(this.nextChange);
+    clearTimeout(this.safty);
+    this.managedInput = false;
+    this.setValue();
+  }
+
+  private doNextChange(event: PointerEvent): number {
+    this.changeCount += 1;
+
+    if (this.changeCount % FRAMES_PER_CHANGE === 0) {
+      this.doChange(event);
+    }
+
+    return requestAnimationFrame(() => {
+      this.nextChange = this.doNextChange(event);
+    });
+  }
+
+  private stepBy(count: number): void {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
+    const min = typeof this.min !== "undefined" ? this.min : 0;
+    let value = this.value;
+
+    value += count * this._step;
+
+    if (isNaN(this.value)) {
+      value = min;
+    }
+
+    value = this.valueWithLimits(value);
+
+    this.requestUpdate();
+    this._value = this.validateInput(value);
+    this.inputElement.value = this.numberFormatter.format(value);
+
+    this.inputElement.dispatchEvent(
+      new Event("input", { bubbles: true, composed: true }),
+    );
+    this.indeterminate = false;
+    this.focus();
+  }
+
+  private increment(factor = 1): void {
+    this.stepBy(1 * factor);
+  }
+
+  private decrement(factor = 1): void {
+    this.stepBy(-1 * factor);
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (this.isComposing) {
+      return;
+    }
+
+    switch (event.code) {
+      case "ArrowUp":
+        event.preventDefault();
+        this.increment(event.shiftKey ? this.stepModifier : 1);
+        this.setValue();
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        this.decrement(event.shiftKey ? this.stepModifier : 1);
+        this.setValue();
+        break;
+    }
+  }
+
+  private queuedChangeEvent!: number;
+
+  protected onScroll(event: WheelEvent): void {
+    event.preventDefault();
+    this.managedInput = true;
+    const direction = event.shiftKey
+      ? event.deltaX / Math.abs(event.deltaX)
+      : event.deltaY / Math.abs(event.deltaY);
+
+    if (direction !== 0 && !isNaN(direction)) {
+      this.stepBy(direction * (event.shiftKey ? this.stepModifier : 1));
+      clearTimeout(this.queuedChangeEvent);
+      this.queuedChangeEvent = setTimeout(() => {
+        this.setValue();
+      }, CHANGE_DEBOUNCE_MS) as unknown as number;
+    }
+
+    this.managedInput = false;
+  }
+
+  protected override onFocus(): void {
+    super.onFocus();
+    this._trackingValue = this.inputValue;
+    this.keyboardFocused = !this.readonly && true;
+    this.addEventListener("wheel", this.onScroll, { passive: false });
+    this.valueBeforeFocus = this.inputElement.value;
+  }
+
+  protected override onBlur(_event: FocusEvent): void {
+    super.onBlur(_event);
+    this.keyboardFocused = !this.readonly && false;
+    this.removeEventListener("wheel", this.onScroll);
+    this.isIntentDecimal = false;
+  }
+
+  private handleFocusin(): void {
+    this.focused = !this.readonly && true;
+    this.keyboardFocused = !this.readonly && true;
+  }
+
+  private handleFocusout(): void {
+    this.focused = !this.readonly && false;
+    this.keyboardFocused = !this.readonly && false;
+  }
+
+  private wasIndeterminate = false;
+  private indeterminateValue?: number;
+
+  protected override handleChange(): void {
+    const value = this.convertValueToNumber(this.inputValue);
+
+    if (this.wasIndeterminate) {
+      this.wasIndeterminate = false;
+      this.indeterminateValue = undefined;
+
+      if (isNaN(value)) {
+        this.indeterminate = true;
+
+        return;
+      }
+    }
+
+    this.setValue(value);
+    this.inputElement.value = this.formattedValue;
+  }
+
+  protected handleCompositionStart(): void {
+    this.isComposing = true;
+  }
+
+  protected handleCompositionEnd(): void {
+    this.isComposing = false;
+    requestAnimationFrame(() => {
+      this.inputElement.dispatchEvent(
+        new Event("input", {
+          composed: true,
+          bubbles: true,
+        }),
+      );
+    });
+  }
+
+  private hasRecentlyReceivedPointerDown = false;
+
+  protected override handleInputElementPointerdown(): void {
+    this.hasRecentlyReceivedPointerDown = true;
+    this.updateComplete.then(() => {
+      requestAnimationFrame(() => {
+        this.hasRecentlyReceivedPointerDown = false;
+      });
+    });
+  }
+
+  protected override handleInput(event: InputEvent): void {
+    if (this.isComposing) {
+      // If user actually types a new character.
+      if (event.data) {
+        // Don't allow non-numeric characters even in composing mode.
+        const partialValue = this.convertValueToNumber(event.data);
+
+        if (Number.isNaN(partialValue)) {
+          this.inputElement.value = this.indeterminate
+            ? indeterminatePlaceholder
+            : this._trackingValue;
+
+          this.isComposing = false;
+        }
+      }
+
+      event.stopPropagation();
+
+      return;
+    }
+
+    if (this.indeterminate) {
+      this.wasIndeterminate = true;
+      this.indeterminateValue = this.value;
+      this.inputElement.value = this.inputElement.value.replace(
+        indeterminatePlaceholder,
+        "",
+      );
+    }
+
+    if (event.data && this.decimalsChars.has(event.data)) {
+      this.isIntentDecimal = true;
+    }
+
+    const { value: originalValue, selectionStart } = this.inputElement;
+    const value = originalValue
+      .split("")
+      .map((char) => remapMultiByteCharacters[char] || char)
+      .join("");
+
+    if (this.numberParser.isValidPartialNumber(value)) {
+      // Use starting value as this.value is the `input` value.
+      this.lastCommitedValue = this.lastCommitedValue ?? this.value;
+      const valueAsNumber = this.convertValueToNumber(value);
+
+      if (!value && this.indeterminateValue) {
+        this.indeterminate = true;
+        this._value = this.indeterminateValue;
+      } else {
+        this.indeterminate = false;
+        this._value = this.validateInput(valueAsNumber);
+      }
+
+      this._trackingValue = value;
+      this.inputElement.value = value;
+      this.inputElement.setSelectionRange(selectionStart, selectionStart);
+
+      return;
+    } else {
+      this.inputElement.value = this.indeterminate
+        ? indeterminatePlaceholder
+        : this._trackingValue;
+
+      // Don't emit input event when the character is invalid.
+      event.stopPropagation();
+    }
+
+    const currentLength = value.length;
+    const previousLength = this._trackingValue.length;
+    const nextSelectStart =
+      (selectionStart || currentLength) - (currentLength - previousLength);
+
+    this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
+  }
+
+  private valueWithLimits(nextValue: number): number {
+    let value = nextValue;
+
+    if (typeof this.min !== "undefined") {
+      value = Math.max(this.min, value);
+    }
+
+    if (typeof this.max !== "undefined") {
+      value = Math.min(this.max, value);
+    }
+
+    return value;
+  }
+
+  private validateInput(value: number): number {
+    value = this.valueWithLimits(value);
+    const signMultiplier = value < 0 ? -1 : 1; // 'signMultiplier' adjusts 'value' for 'validateInput' and reverts it before returning.
+
+    value *= signMultiplier;
+
+    // Step shouldn't validate when 0...
+    if (this.step) {
+      const min = typeof this.min !== "undefined" ? this.min : 0;
+      const moduloStep = parseFloat(
+        this.valueFormatter.format((value - min) % this.step),
+      );
+      const fallsOnStep = moduloStep === 0;
+
+      if (!fallsOnStep) {
+        const overUnder = Math.round(moduloStep / this.step);
+
+        if (overUnder === 1) {
+          value += this.step - moduloStep;
+        } else {
+          value -= moduloStep;
+        }
+      }
+
+      if (typeof this.max !== "undefined") {
+        while (value > this.max) {
+          value -= this.step;
+        }
+      }
+
+      value = parseFloat(this.valueFormatter.format(value));
+    }
+
+    value *= signMultiplier;
+
+    return value;
+  }
+
+  protected override get displayValue(): string {
+    const indeterminateValue = this.focused ? "" : indeterminatePlaceholder;
+
+    return this.indeterminate ? indeterminateValue : this.formattedValue;
+  }
+
+  protected clearNumberFormatterCache(): void {
+    this._numberFormatter = undefined;
+    this._numberParser = undefined;
+  }
+
+  /**
+   * Get the number formatter instance.
+   * This method initializes the number formatter if it is not already created.
+   * It handles different formatting options and ensures that the formatter is
+   * created with the correct language and options.
+   *
+   * @returns The number formatter instance.
+   */
+  protected get numberFormatter(): NumberFormatter {
+    // Check if the number formatter or the focused number formatter is not initialized
+    if (!this._numberFormatter || !this._numberFormatterFocused) {
+      const {
+        style,
+        unit,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        unitDisplay,
+        ...formatOptionsNoUnit
+      } = this.formatOptions;
+
+      // If the style is not 'unit', set the style in formatOptionsNoUnit
+      if (style !== "unit") {
+        (formatOptionsNoUnit as Intl.NumberFormatOptions).style = style;
+      }
+
+      // Create a focused number formatter with the language and format options without unit
+      this._numberFormatterFocused = new NumberFormatter(
+        this.languageResolver.language,
+        formatOptionsNoUnit,
+      );
+
+      try {
+        // Try to create a number formatter with the full format options
+        this._numberFormatter = new NumberFormatter(
+          this.languageResolver.language,
+          this.formatOptions,
+        );
+        this._forcedUnit = "";
+        this._numberFormatter.format(1); // Test the formatter with a sample value
+      } catch (error) {
+        // If an error occurs and the style is 'unit', set the forced unit
+        if (style === "unit") {
+          this._forcedUnit = unit as string;
+        }
+
+        // Fallback to the focused number formatter
+        this._numberFormatter = this._numberFormatterFocused;
+      }
+    }
+
+    // Return the appropriate formatter based on the focused state
+    return this.focused ? this._numberFormatterFocused : this._numberFormatter;
+  }
+
+  protected clearValueFormatterCache(): void {
+    this._valueFormatter = undefined;
+  }
+  protected get valueFormatter(): NumberFormatter {
+    if (!this._valueFormatter) {
+      const digitsAfterDecimal = this.step
+        ? this.step != Math.floor(this.step)
+          ? this.step.toString().split(".")[1].length
+          : 0
+        : 0;
+
+      this._valueFormatter = new NumberFormatter("en", {
+        useGrouping: false,
+        maximumFractionDigits: digitsAfterDecimal,
+      });
+    }
+
+    return this._valueFormatter;
+  }
+  private _numberFormatter?: NumberFormatter;
+  private _numberFormatterFocused?: NumberFormatter;
+  private _valueFormatter?: NumberFormatter;
+  protected get numberParser(): NumberParser {
+    if (!this._numberParser || !this._numberParserFocused) {
+      const {
+        style,
+        unit,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        unitDisplay,
+        ...formatOptionsNoUnit
+      } = this.formatOptions;
+
+      if (style !== "unit") {
+        (formatOptionsNoUnit as Intl.NumberFormatOptions).style = style;
+      }
+
+      this._numberParserFocused = new NumberParser(
+        this.languageResolver.language,
+        formatOptionsNoUnit,
+      );
+
+      try {
+        this._numberParser = new NumberParser(
+          this.languageResolver.language,
+          this.formatOptions,
+        );
+        this._forcedUnit = "";
+        this._numberParser.parse("0");
+      } catch (error) {
+        if (style === "unit") {
+          this._forcedUnit = unit as string;
+        }
+
+        this._numberParser = this._numberParserFocused;
+      }
+    }
+
+    return this.focused ? this._numberParserFocused : this._numberParser;
+  }
+
+  applyFocusElementLabel = (value?: string): void => {
+    this.appliedLabel = value;
+  };
+
+  private _numberParser?: NumberParser;
+  private _numberParserFocused?: NumberParser;
+
+  protected override renderField(): TemplateResult {
+    this.autocomplete = "off";
+
+    return html`
+      ${super.renderField()}
+      ${this.hideStepper
+        ? nothing
+        : html`
+            
+              
+              
+            
+          `}
+    `;
+  }
+
+  protected override update(changes: PropertyValues): void {
+    if (changes.has("formatOptions") || changes.has("resolvedLanguage")) {
+      this.clearNumberFormatterCache();
+    }
+
+    if (
+      changes.has("value") ||
+      changes.has("max") ||
+      changes.has("min") ||
+      changes.has("step")
+    ) {
+      const value = this.numberParser.parse(
+        this.formattedValue.replace(this._forcedUnit, ""),
+      );
+
+      this.value = value;
+      this.clearValueFormatterCache();
+    }
+
+    super.update(changes);
+  }
+
+  public override willUpdate(changes: PropertyValues): void {
+    this.multiline = false;
+
+    if (changes.has(languageResolverUpdatedSymbol)) {
+      this.clearNumberFormatterCache();
+    }
+  }
+
+  private isComposing = false;
+
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
+    this.addEventListener("keydown", this.handleKeydown);
+    this.addEventListener("compositionstart", this.handleCompositionStart);
+    this.addEventListener("compositionend", this.handleCompositionEnd);
+  }
+
+  protected override updated(changes: PropertyValues): void {
+    if (!this.inputElement || !this.isConnected) {
+      // Prevent race conditions if inputElement is removed from DOM while a queued update is still running.
+      return;
+    }
+
+    if (changes.has("min") || changes.has("formatOptions")) {
+      const hasOnlyPositives = typeof this.min !== "undefined" && this.min >= 0;
+
+      const { maximumFractionDigits } = this.numberFormatter.resolvedOptions();
+      const hasDecimals = maximumFractionDigits && maximumFractionDigits > 0;
+
+      let inputMode = "numeric";
+
+      /* c8 ignore next 5 */
+      // iPhone doesn't have a minus sign in either numeric or decimal.
+      if (isIPhone() && !hasOnlyPositives) {
+        inputMode = "text";
+      } else if (isIOS() && hasDecimals) {
+        inputMode = "decimal";
+      }
+      // Android numeric has both a decimal point and minus key. Decimal does not have a minus key.
+      else if (isAndroid() && hasDecimals && hasOnlyPositives) {
+        inputMode = "decimal";
+      }
+
+      this.inputElement.inputMode = inputMode;
+    }
+
+    if (
+      changes.has("focused") &&
+      this.focused &&
+      !this.hasRecentlyReceivedPointerDown &&
+      !!this.formatOptions.unit
+    ) {
+      // Normalize keyboard focus entry between unit and non-unit bearing Number Fields
+      this.setSelectionRange(0, this.displayValue.length);
+    }
+  }
 }
diff --git a/packages/number-field/src/index.ts b/packages/number-field/src/index.ts
index 08656e2ce7..420dadf146 100644
--- a/packages/number-field/src/index.ts
+++ b/packages/number-field/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './NumberField.js';
+export * from "./NumberField.js";
diff --git a/packages/number-field/stories/number-field-sizes.stories.ts b/packages/number-field/stories/number-field-sizes.stories.ts
index d61a7f9cfb..4888c828ec 100644
--- a/packages/number-field/stories/number-field-sizes.stories.ts
+++ b/packages/number-field/stories/number-field-sizes.stories.ts
@@ -9,36 +9,36 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/number-field/sp-number-field.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import "@spectrum-web-components/number-field/sp-number-field.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
 export default {
-    component: 'sp-number-field',
-    title: 'Number Field/Sizes',
+  component: "sp-number-field",
+  title: "Number Field/Sizes",
 };
 
 const template = ({
-    size,
+  size,
 }: {
-    size?: 's' | 'm' | 'l' | 'xl';
+  size?: "s" | "m" | "l" | "xl";
 } = {}): TemplateResult => {
-    return html`
-        
-            Pick a number
-        
-        
-    `;
+  return html`
+    
+      Pick a number
+    
+    
+  `;
 };
 
-export const s = (): TemplateResult => template({ size: 's' });
+export const s = (): TemplateResult => template({ size: "s" });
 export const noSize = (): TemplateResult => template();
-export const m = (): TemplateResult => template({ size: 'm' });
-export const l = (): TemplateResult => template({ size: 'l' });
-export const XL = (): TemplateResult => template({ size: 'xl' });
+export const m = (): TemplateResult => template({ size: "m" });
+export const l = (): TemplateResult => template({ size: "l" });
+export const XL = (): TemplateResult => template({ size: "xl" });
diff --git a/packages/number-field/stories/number-field.stories.ts b/packages/number-field/stories/number-field.stories.ts
index 58e2e24655..54a7ecad9d 100644
--- a/packages/number-field/stories/number-field.stories.ts
+++ b/packages/number-field/stories/number-field.stories.ts
@@ -10,491 +10,487 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
-import '@spectrum-web-components/number-field/sp-number-field.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { spreadProps } from '../../../test/lit-helpers.js';
-import { NumberField } from '@spectrum-web-components/number-field/src/NumberField.js';
+import "@spectrum-web-components/number-field/sp-number-field.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { spreadProps } from "../../../test/lit-helpers.js";
+import { NumberField } from "@spectrum-web-components/number-field/src/NumberField.js";
 
 export default {
-    title: 'Number Field',
-    component: 'sp-number-field',
-    args: {
-        disabled: false,
-        readonly: false,
-        quiet: false,
-        value: undefined,
-        placeholder: '',
-        min: undefined,
-        max: undefined,
-        step: undefined,
+  title: "Number Field",
+  component: "sp-number-field",
+  args: {
+    disabled: false,
+    readonly: false,
+    quiet: false,
+    value: undefined,
+    placeholder: "",
+    min: undefined,
+    max: undefined,
+    step: undefined,
+  },
+  argTypes: {
+    disabled: {
+      name: "disabled",
+      type: { name: "boolean", required: false },
+      description: "Disable this control. It will not receive focus or events.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
-    argTypes: {
-        disabled: {
-            name: 'disabled',
-            type: { name: 'boolean', required: false },
-            description:
-                'Disable this control. It will not receive focus or events.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        indeterminate: {
-            name: 'indeterminate',
-            type: { name: 'boolean', required: false },
-            description:
-                'Whether the value of the Number Field can be determined for display.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        readonly: {
-            name: 'readonly',
-            type: { name: 'boolean', required: false },
-            description:
-                'When this control is read only, you will not be able to input an updated value.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        quiet: {
-            name: 'quiet',
-            type: { name: 'boolean', required: false },
-            description:
-                'An altered delivery with no background and only a bottom border.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        hideStepper: {
-            name: 'hide stepper',
-            type: { name: 'boolean', required: false },
-            description: 'Whether to remove the stepper UI from the control.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        value: {
-            name: 'value',
-            type: { name: 'number', required: false },
-            description: 'Value to apply to the control.',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        step: {
-            name: 'step',
-            type: { name: 'number', required: false },
-            description:
-                'Amount to change the value by when using the stepper or arrow key interactions.',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        stepModifier: {
-            name: 'step modifier',
-            type: { name: 'number', required: false },
-            description:
-                'Amount to scale the step increment/decrement when holding the shift key',
-            table: {
-                type: { summary: 'number' },
-                defaultValue: { summary: 10 },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        placeholder: {
-            name: 'placeholder',
-            type: { name: 'string', required: false },
-            description: 'Placeholder to apply to the control.',
-            table: {
-                type: { summary: 'string' },
-            },
-            control: {
-                type: 'text',
-            },
-        },
-        min: {
-            name: 'min',
-            type: { name: 'number', required: false },
-            description: 'The minimum value the control can be set to.',
-            table: {
-                type: { summary: 'number' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        max: {
-            name: 'max',
-            type: { name: 'numer', required: false },
-            description: 'The maximum value the control can be set to.',
-            table: {
-                type: { summary: 'number' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'number',
-            },
-        },
+    indeterminate: {
+      name: "indeterminate",
+      type: { name: "boolean", required: false },
+      description:
+        "Whether the value of the Number Field can be determined for display.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+    readonly: {
+      name: "readonly",
+      type: { name: "boolean", required: false },
+      description:
+        "When this control is read only, you will not be able to input an updated value.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    quiet: {
+      name: "quiet",
+      type: { name: "boolean", required: false },
+      description:
+        "An altered delivery with no background and only a bottom border.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    hideStepper: {
+      name: "hide stepper",
+      type: { name: "boolean", required: false },
+      description: "Whether to remove the stepper UI from the control.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    value: {
+      name: "value",
+      type: { name: "number", required: false },
+      description: "Value to apply to the control.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined },
+      },
+      control: {
+        type: "number",
+      },
+    },
+    step: {
+      name: "step",
+      type: { name: "number", required: false },
+      description:
+        "Amount to change the value by when using the stepper or arrow key interactions.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined },
+      },
+      control: {
+        type: "number",
+      },
+    },
+    stepModifier: {
+      name: "step modifier",
+      type: { name: "number", required: false },
+      description:
+        "Amount to scale the step increment/decrement when holding the shift key",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 10 },
+      },
+      control: {
+        type: "number",
+      },
+    },
+    placeholder: {
+      name: "placeholder",
+      type: { name: "string", required: false },
+      description: "Placeholder to apply to the control.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: {
+        type: "text",
+      },
+    },
+    min: {
+      name: "min",
+      type: { name: "number", required: false },
+      description: "The minimum value the control can be set to.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: undefined },
+      },
+      control: {
+        type: "number",
+      },
+    },
+    max: {
+      name: "max",
+      type: { name: "numer", required: false },
+      description: "The maximum value the control can be set to.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: undefined },
+      },
+      control: {
+        type: "number",
+      },
+    },
+  },
 };
 
 interface StoryArgs {
-    disabled?: boolean;
-    indeterminate?: boolean;
-    invalid?: boolean;
-    value?: number;
-    placeholder?: string;
-    max?: number;
-    min?: number;
-    hideStepper?: boolean;
-    readonly?: boolean;
-    step?: number;
-    onChange?: (value: number) => void;
-    onInput?: (value: number) => void;
-    [prop: string]: unknown;
+  disabled?: boolean;
+  indeterminate?: boolean;
+  invalid?: boolean;
+  value?: number;
+  placeholder?: string;
+  max?: number;
+  min?: number;
+  hideStepper?: boolean;
+  readonly?: boolean;
+  step?: number;
+  onChange?: (value: number) => void;
+  onInput?: (value: number) => void;
+  [prop: string]: unknown;
 }
 
 export const Default = (args: StoryArgs = {}): TemplateResult => {
-    const onChange =
-        (args.onChange as (value: number) => void) ||
-        (() => {
-            return;
-        });
-    const onInput =
-        (args.onInput as (value: number) => void) ||
-        (() => {
-            return;
-        });
-
-    return html`
-        Enter a number
-        
-                onInput((event.target as NumberField).value)}
-            @change=${(event: Event) =>
-                onChange((event.target as NumberField).value)}
-            style=${ifDefined(args.quiet ? undefined : 'width: 150px')}
-        >
-    `;
+  const onChange =
+    (args.onChange as (value: number) => void) ||
+    (() => {
+      return;
+    });
+  const onInput =
+    (args.onInput as (value: number) => void) ||
+    (() => {
+      return;
+    });
+
+  return html`
+    Enter a number
+     onInput((event.target as NumberField).value)}
+      @change=${(event: Event) => onChange((event.target as NumberField).value)}
+      style=${ifDefined(args.quiet ? undefined : "width: 150px")}
+    >
+  `;
 };
 
 Default.args = {
-    value: 100,
+  value: 100,
 };
 
 export const quiet = (args: StoryArgs = {}): TemplateResult => Default(args);
 
 quiet.args = {
-    quiet: true,
-    value: 100,
+  quiet: true,
+  value: 100,
 };
 
 export const indeterminate = (args: StoryArgs = {}): TemplateResult =>
-    Default(args);
+  Default(args);
 
 indeterminate.args = {
-    value: 100,
-    indeterminate: true,
+  value: 100,
+  indeterminate: true,
 };
 
 export const decimals = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Enter a number with visible decimals
-        
-        
-    `;
+  return html`
+    
+      Enter a number with visible decimals
+    
+    
+  `;
 };
 
 decimals.args = {
-    value: 19.274,
+  value: 19.274,
 };
 
 export const germanDecimals = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Enter a number with visible decimals
-        
-        
-            
-        
-    `;
+  return html`
+    
+      Enter a number with visible decimals
+    
+    
+      
+    
+  `;
 };
 
 germanDecimals.args = {
-    value: 19.274,
+  value: 19.274,
 };
 
 export const percents = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        Enter a percentage
-        
-    `;
+  return html`
+    Enter a percentage
+    
+  `;
 };
 
 percents.args = {
-    value: 0.372,
+  value: 0.372,
 };
 
 export const currency = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        Enter a value in Euros
-        
-    `;
+  return html`
+    Enter a value in Euros
+    
+  `;
 };
 
 currency.args = {
-    value: 23.19,
+  value: 23.19,
 };
 
 export const units = (args: StoryArgs): TemplateResult => {
-    return html`
-        Enter a lengths in inches
-        
-    `;
+  return html`
+    Enter a lengths in inches
+    
+  `;
 };
 
 units.args = {
-    value: 24,
+  value: 24,
 };
 
 export const pixels = (args: StoryArgs): TemplateResult => {
-    return html`
-        Enter a lengths in pixels
-        
-    `;
+  return html`
+    Enter a lengths in pixels
+    
+  `;
 };
 
 pixels.args = {
-    value: 800,
+  value: 800,
 };
 
 export const minMax = (args: StoryArgs): TemplateResult => html`
-    
-        Enter a value between 0 and 255
-    
-    
+  
+    Enter a value between 0 and 255
+  
+  
 `;
 
 minMax.args = {
-    value: 4,
-    min: 0,
-    max: 255,
+  value: 4,
+  min: 0,
+  max: 255,
 };
 
 export const hideStepper = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Enter a number without the stepper UI
-        
-        
-    `;
+  return html`
+    
+      Enter a number without the stepper UI
+    
+    
+  `;
 };
 hideStepper.args = {
-    hideStepper: true,
-    value: 67,
+  hideStepper: true,
+  value: 67,
 };
 
 export const hideStepperQuiet = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Enter a number without the stepper UI
-        
-        
-    `;
+  return html`
+    
+      Enter a number without the stepper UI
+    
+    
+  `;
 };
 hideStepperQuiet.args = {
-    hideStepper: true,
-    value: 67,
-    quiet: true,
+  hideStepper: true,
+  value: 67,
+  quiet: true,
 };
 
 export const disabled = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            This Number Field is disabled
-        
-        
-    `;
+  return html`
+    
+      This Number Field is disabled
+    
+    
+  `;
 };
 disabled.args = {
-    disabled: true,
-    value: 892,
+  disabled: true,
+  value: 892,
 };
 
 export const readOnly = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            You can only read the following value
-        
-        
-    `;
+  return html`
+    
+      You can only read the following value
+    
+    
+  `;
 };
 readOnly.args = {
-    readonly: true,
-    value: '15',
+  readonly: true,
+  value: "15",
 };
 
 export const ScrollingContainer = (args: StoryArgs = {}): TemplateResult => {
-    const onChange =
-        (args.onChange as (value: number) => void) ||
-        (() => {
-            return;
-        });
-    const onInput =
-        (args.onInput as (value: number) => void) ||
-        (() => {
-            return;
-        });
-
-    return html`
-        
-        

-            

-                Enter a number
-                
-                        onInput((event.target as NumberField).value)}
-                    @change=${(event: Event) =>
-                        onChange((event.target as NumberField).value)}
-                    style="width: 150px"
-                >
-                

-                    This box should not scroll when the focus is inside the
-                    number field and field value is changed by using the mouse
-                    wheel.
-                

-            

-        

-    `;
+  const onChange =
+    (args.onChange as (value: number) => void) ||
+    (() => {
+      return;
+    });
+  const onInput =
+    (args.onInput as (value: number) => void) ||
+    (() => {
+      return;
+    });
+
+  return html`
+    
+    

+      

+        Enter a number
+        
+            onInput((event.target as NumberField).value)}
+          @change=${(event: Event) =>
+            onChange((event.target as NumberField).value)}
+          style="width: 150px"
+        >
+        

+          This box should not scroll when the focus is inside the number field
+          and field value is changed by using the mouse wheel.
+        

+      

+    

+  `;
 };
diff --git a/packages/number-field/test/benchmark/basic-test.ts b/packages/number-field/test/benchmark/basic-test.ts
index cb72e8c274..d542526b96 100644
--- a/packages/number-field/test/benchmark/basic-test.ts
+++ b/packages/number-field/test/benchmark/basic-test.ts
@@ -10,10 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/number-field/sp-number-field.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/number-field/sp-number-field.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/number-field/test/helpers.ts b/packages/number-field/test/helpers.ts
index df36420d10..4b3197d818 100644
--- a/packages/number-field/test/helpers.ts
+++ b/packages/number-field/test/helpers.ts
@@ -10,56 +10,54 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { elementUpdated, fixture, nextFrame } from '@open-wc/testing';
-import { NumberField } from '@spectrum-web-components/number-field';
-import { sendMouse } from '../../../test/plugins/browser.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { elementUpdated, fixture, nextFrame } from "@open-wc/testing";
+import { NumberField } from "@spectrum-web-components/number-field";
+import { sendMouse } from "../../../test/plugins/browser.js";
 
 export async function getElFrom(test: TemplateResult): Promise {
-    const wrapped = await fixture(html`
-        

-            ${test}
-        

-    `);
-    const el = wrapped.querySelector('sp-number-field') as NumberField;
+  const wrapped = await fixture(html`
+    
${test}

+  `);
+  const el = wrapped.querySelector("sp-number-field") as NumberField;
 
-    await elementUpdated(el);
+  await elementUpdated(el);
 
-    return el;
+  return el;
 }
 
 export async function clickBySelector(
-    el: NumberField,
-    selector: string,
-    options: { button?: 'left' | 'right' | 'middle' } = {}
+  el: NumberField,
+  selector: string,
+  options: { button?: "left" | "right" | "middle" } = {},
 ): Promise {
-    const target = el.shadowRoot.querySelector(selector) as HTMLElement;
-    const targetRect = target.getBoundingClientRect();
+  const target = el.shadowRoot.querySelector(selector) as HTMLElement;
+  const targetRect = target.getBoundingClientRect();
 
-    await sendMouse({
-        steps: [
-            {
-                type: 'move',
-                position: [
-                    targetRect.x + targetRect.width / 2,
-                    targetRect.y + targetRect.height / 2,
-                ],
-                options,
-            },
-            {
-                type: 'down',
-                options,
-            },
+  await sendMouse({
+    steps: [
+      {
+        type: "move",
+        position: [
+          targetRect.x + targetRect.width / 2,
+          targetRect.y + targetRect.height / 2,
         ],
-    });
-    await nextFrame();
-    await sendMouse({
-        steps: [
-            {
-                type: 'up',
-                options,
-            },
-        ],
-    });
-    await elementUpdated(el);
+        options,
+      },
+      {
+        type: "down",
+        options,
+      },
+    ],
+  });
+  await nextFrame();
+  await sendMouse({
+    steps: [
+      {
+        type: "up",
+        options,
+      },
+    ],
+  });
+  await elementUpdated(el);
 }
diff --git a/packages/number-field/test/inputs.test.ts b/packages/number-field/test/inputs.test.ts
index 016d9a9077..d3d158ade6 100644
--- a/packages/number-field/test/inputs.test.ts
+++ b/packages/number-field/test/inputs.test.ts
@@ -10,505 +10,477 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@spectrum-web-components/base';
-import { elementUpdated, expect, nextFrame } from '@open-wc/testing';
-import { getElFrom } from './helpers.js';
-import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
-import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill.js';
-
-import '@spectrum-web-components/number-field/sp-number-field.js';
-import { remapMultiByteCharacters } from '@spectrum-web-components/number-field';
+import { html } from "@spectrum-web-components/base";
+import { elementUpdated, expect, nextFrame } from "@open-wc/testing";
+import { getElFrom } from "./helpers.js";
+import { createLanguageContext } from "../../../tools/reactive-controllers/test/helpers.js";
+import { shouldPolyfill } from "@formatjs/intl-numberformat/should-polyfill.js";
+
+import "@spectrum-web-components/number-field/sp-number-field.js";
+import { remapMultiByteCharacters } from "@spectrum-web-components/number-field";
 import {
-    currency,
-    decimals,
-    Default,
-    minMax,
-    percents,
-} from '../stories/number-field.stories.js';
-import { sendKeys } from '@web/test-runner-commands';
-
-describe('NumberField - inputs', () => {
-    before(async () => {
-        const shouldPolyfillEn = shouldPolyfill('en');
-        const shouldPolyfillEs = shouldPolyfill('es');
-        const shouldPolyfillFr = shouldPolyfill('fr');
-
-        if (shouldPolyfillEn || shouldPolyfillEs || shouldPolyfillFr) {
-            await import('@formatjs/intl-numberformat/polyfill-force.js');
-        }
+  currency,
+  decimals,
+  Default,
+  minMax,
+  percents,
+} from "../stories/number-field.stories.js";
+import { sendKeys } from "@web/test-runner-commands";
+
+describe("NumberField - inputs", () => {
+  before(async () => {
+    const shouldPolyfillEn = shouldPolyfill("en");
+    const shouldPolyfillEs = shouldPolyfill("es");
+    const shouldPolyfillFr = shouldPolyfill("fr");
+
+    if (shouldPolyfillEn || shouldPolyfillEs || shouldPolyfillFr) {
+      await import("@formatjs/intl-numberformat/polyfill-force.js");
+    }
+
+    if (shouldPolyfillEn) {
+      await import("@formatjs/intl-numberformat/locale-data/en.js");
+    }
+
+    if (shouldPolyfillEs) {
+      await import("@formatjs/intl-numberformat/locale-data/es.js");
+    }
+
+    if (shouldPolyfillFr) {
+      await import("@formatjs/intl-numberformat/locale-data/fr.js");
+    }
+  });
+  describe("keystroke prevention", () => {
+    it("converts 2 byte characters, default", async () => {
+      const el = await getElFrom(html` ${Default()} `);
+
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "３、５６７、８９０。１",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("3,567,890.1");
+    });
+    it("converts 2 byte characters, percents", async () => {
+      const el = await getElFrom(html` ${percents()} `);
 
-        if (shouldPolyfillEn) {
-            await import('@formatjs/intl-numberformat/locale-data/en.js');
-        }
+      await elementUpdated(el);
 
-        if (shouldPolyfillEs) {
-            await import('@formatjs/intl-numberformat/locale-data/es.js');
-        }
+      el.focus();
+      await sendKeys({
+        type: "２４％",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("24%");
+    });
+    it('prevents second "." in EN', async () => {
+      const el = await getElFrom(html` ${Default()} `);
+
+      el.formatOptions = {
+        maximumFractionDigits: 2,
+      };
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "1.1.1",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("1.11");
+    });
+    it("prevents text characters", async () => {
+      const el = await getElFrom(html` ${Default()} `);
+
+      el.formatOptions = {
+        maximumFractionDigits: 1,
+      };
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "D2.2",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("2.2");
+
+      el.value = NaN;
+
+      await sendKeys({
+        type: "8u23.s7",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("823.7");
+    });
+    it('allows "-" to start', async () => {
+      const el = await getElFrom(html` ${Default()} `);
 
-        if (shouldPolyfillFr) {
-            await import('@formatjs/intl-numberformat/locale-data/fr.js');
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "-54",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("-54");
+    });
+    it('prevents "-" not at the start', async () => {
+      const el = await getElFrom(html` ${Default()} `);
+
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "54-",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("54");
+
+      el.value = NaN;
+
+      await sendKeys({
+        type: "5-4",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("54");
+    });
+    it('prevent "+" to start, normally', async () => {
+      const el = await getElFrom(html` ${Default()} `);
+
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "+54",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("54");
+    });
+    it('allow "+" to start when "signDisplay: always"', async () => {
+      const el = await getElFrom(html` ${Default()} `);
+
+      await elementUpdated(el);
+      el.formatOptions = {
+        signDisplay: "always",
+      };
+      el.focus();
+      await sendKeys({
+        type: "+54",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("+54");
+    });
+    it('prevents "%" when when not percents', async () => {
+      const el = await getElFrom(html` ${Default()} `);
+
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "63%",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("63");
+      el.blur();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("63");
+    });
+    it('allows "%" when percents, and keeps "%" on blur', async () => {
+      const el = await getElFrom(html` ${percents()} `);
+
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "63%",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("63%");
+      el.blur();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("63%");
+    });
+    it('prevents "Backspace" on curreny value text, and keeps currency value text of blur', async () => {
+      const el = await getElFrom(html` ${currency({ value: 234.21 })} `);
+
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("EUR 234.21");
+
+      el.focus();
+      (
+        el as unknown as {
+          inputElement: HTMLInputElement;
         }
+      ).inputElement.setSelectionRange(2, 2);
+      await sendKeys({
+        press: "Backspace",
+      });
+      await elementUpdated(el);
+      expect(
+        (el as unknown as { inputElement: HTMLInputElement }).inputElement
+          .value,
+      ).to.equal("EUR 234.21");
+      el.blur();
+      await elementUpdated(el);
+      expect(
+        (el as unknown as { inputElement: HTMLInputElement }).inputElement
+          .value,
+      ).to.equal("EUR 234.21");
+    });
+    it('prevents "." when `maximumFractionDigits: 0`', async () => {
+      const el = await getElFrom(html` ${Default()} `);
+
+      await elementUpdated(el);
+      el.formatOptions = {
+        maximumFractionDigits: 0,
+      };
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({
+        type: "5.2",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("52");
+      await sendKeys({
+        press: "Enter",
+      });
+      await elementUpdated(el);
+      expect(el.value).to.equal(52);
+    });
+    xit("allow arabic numerals entered", async () => {
+      // Safari requires more polyfilling for this text
+      const el = await getElFrom(html` ${Default()} `);
+
+      await elementUpdated(el);
+
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({
+        type: "٢١",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("21");
+      await sendKeys({
+        press: "Enter",
+      });
+      await elementUpdated(el);
+      expect(el.value).to.equal(21);
+    });
+    xit("allow hanidec numerals entered", async () => {
+      // Safari requires more polyfilling for this text
+      const el = await getElFrom(html` ${Default()} `);
+
+      await elementUpdated(el);
+
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({
+        type: "二一",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("21");
+      await sendKeys({
+        press: "Enter",
+      });
+      await elementUpdated(el);
+      expect(el.value).to.equal(21);
     });
-    describe('keystroke prevention', () => {
-        it('converts 2 byte characters, default', async () => {
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '３、５６７、８９０。１',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('3,567,890.1');
-        });
-        it('converts 2 byte characters, percents', async () => {
-            const el = await getElFrom(html`
-                ${percents()}
-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '２４％',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('24%');
-        });
-        it('prevents second "." in EN', async () => {
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            el.formatOptions = {
-                maximumFractionDigits: 2,
-            };
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '1.1.1',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('1.11');
-        });
-        it('prevents text characters', async () => {
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            el.formatOptions = {
-                maximumFractionDigits: 1,
-            };
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: 'D2.2',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('2.2');
-
-            el.value = NaN;
-
-            await sendKeys({
-                type: '8u23.s7',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('823.7');
-        });
-        it('allows "-" to start', async () => {
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '-54',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('-54');
-        });
-        it('prevents "-" not at the start', async () => {
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '54-',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('54');
-
-            el.value = NaN;
-
-            await sendKeys({
-                type: '5-4',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('54');
-        });
-        it('prevent "+" to start, normally', async () => {
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '+54',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('54');
-        });
-        it('allow "+" to start when "signDisplay: always"', async () => {
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            await elementUpdated(el);
-            el.formatOptions = {
-                signDisplay: 'always',
-            };
-            el.focus();
-            await sendKeys({
-                type: '+54',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('+54');
-        });
-        it('prevents "%" when when not percents', async () => {
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '63%',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('63');
-            el.blur();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('63');
-        });
-        it('allows "%" when percents, and keeps "%" on blur', async () => {
-            const el = await getElFrom(html`
-                ${percents()}
-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '63%',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('63%');
-            el.blur();
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('63%');
-        });
-        it('prevents "Backspace" on curreny value text, and keeps currency value text of blur', async () => {
-            const el = await getElFrom(html`
-                ${currency({ value: 234.21 })}
-            `);
-
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('EUR 234.21');
-
-            el.focus();
-            (
-                el as unknown as {
-                    inputElement: HTMLInputElement;
-                }
-            ).inputElement.setSelectionRange(2, 2);
-            await sendKeys({
-                press: 'Backspace',
-            });
-            await elementUpdated(el);
-            expect(
-                (el as unknown as { inputElement: HTMLInputElement })
-                    .inputElement.value
-            ).to.equal('EUR 234.21');
-            el.blur();
-            await elementUpdated(el);
-            expect(
-                (el as unknown as { inputElement: HTMLInputElement })
-                    .inputElement.value
-            ).to.equal('EUR 234.21');
-        });
-        it('prevents "." when `maximumFractionDigits: 0`', async () => {
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            await elementUpdated(el);
-            el.formatOptions = {
-                maximumFractionDigits: 0,
-            };
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({
-                type: '5.2',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('52');
-            await sendKeys({
-                press: 'Enter',
-            });
-            await elementUpdated(el);
-            expect(el.value).to.equal(52);
-        });
-        xit('allow arabic numerals entered', async () => {
-            // Safari requires more polyfilling for this text
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({
-                type: '٢١',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('21');
-            await sendKeys({
-                press: 'Enter',
-            });
-            await elementUpdated(el);
-            expect(el.value).to.equal(21);
-        });
-        xit('allow hanidec numerals entered', async () => {
-            // Safari requires more polyfilling for this text
-            const el = await getElFrom(html`
-                ${Default()}
-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({
-                type: '二一',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('21');
-            await sendKeys({
-                press: 'Enter',
-            });
-            await elementUpdated(el);
-            expect(el.value).to.equal(21);
-        });
+  });
+  describe("user suplied large numbers", () => {
+    it("do not crash the Number Field", async () => {
+      const el = await getElFrom(minMax(minMax.args));
+
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "12345678901234567890",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("255");
+      await sendKeys({
+        press: "Enter",
+      });
+      await elementUpdated(el);
+      expect(el.value).to.equal(255);
     });
-    describe('user suplied large numbers', () => {
-        it('do not crash the Number Field', async () => {
-            const el = await getElFrom(minMax(minMax.args));
-
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '12345678901234567890',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('255');
-            await sendKeys({
-                press: 'Enter',
-            });
-            await elementUpdated(el);
-            expect(el.value).to.equal(255);
-        });
+  });
+  describe("with floating point numbers", () => {
+    it("do not crash the Number Field", async () => {
+      const el = await getElFrom(minMax(minMax.args));
+
+      el.setAttribute("min", "0.1");
+      el.setAttribute("step", "0.01");
+      el.setAttribute("value", "0.5");
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "6",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0.56");
+      await sendKeys({
+        press: "Enter",
+      });
+      await elementUpdated(el);
+      expect(el.value).to.equal(0.56);
     });
-    describe('with floating point numbers', () => {
-        it('do not crash the Number Field', async () => {
-            const el = await getElFrom(minMax(minMax.args));
-
-            el.setAttribute('min', '0.1');
-            el.setAttribute('step', '0.01');
-            el.setAttribute('value', '0.5');
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '6',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('0.56');
-            await sendKeys({
-                press: 'Enter',
-            });
-            await elementUpdated(el);
-            expect(el.value).to.equal(0.56);
-        });
+  });
+  describe("locale specific", () => {
+    it("can determine the group symbol", async () => {
+      const [languageContext] = createLanguageContext("es-ES");
+      const el = await getElFrom(html`
+        
${Default()}

+      `);
+
+      await elementUpdated(el);
+
+      el.focus();
+      await sendKeys({
+        type: "123.456.789",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("123.456.789");
+      await sendKeys({
+        press: "Tab",
+      });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("123.456.789");
     });
-    describe('locale specific', () => {
-        it('can determine the group symbol', async () => {
-            const [languageContext] = createLanguageContext('es-ES');
-            const el = await getElFrom(html`
-                
${Default()}

-            `);
-
-            await elementUpdated(el);
-
-            el.focus();
-            await sendKeys({
-                type: '123.456.789',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('123.456.789');
-            await sendKeys({
-                press: 'Tab',
-            });
-            await elementUpdated(el);
-            expect(el.formattedValue).to.equal('123.456.789');
-        });
+  });
+  describe("2-byte characters", () => {
+    const numbers = Object.keys(remapMultiByteCharacters);
+
+    // only `１`-`０` can be accepted as single key inputs.
+    numbers.splice(10);
+    numbers.forEach((input) => {
+      const actual = remapMultiByteCharacters[input];
+
+      it(`accepts "${input}" as "${actual}"`, async () => {
+        const el = await getElFrom(Default());
+
+        el.focusElement.value = input;
+        el.focusElement.dispatchEvent(
+          new Event("input", {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+          }),
+        );
+        await elementUpdated(el);
+
+        expect(el.formattedValue).to.equal(actual);
+        expect(el.value).to.equal(Number(actual));
+      });
     });
-    describe('2-byte characters', () => {
-        const numbers = Object.keys(remapMultiByteCharacters);
-
-        // only `１`-`０` can be accepted as single key inputs.
-        numbers.splice(10);
-        numbers.forEach((input) => {
-            const actual = remapMultiByteCharacters[input];
-
-            it(`accepts "${input}" as "${actual}"`, async () => {
-                const el = await getElFrom(Default());
-
-                el.focusElement.value = input;
-                el.focusElement.dispatchEvent(
-                    new Event('input', {
-                        bubbles: true,
-                        cancelable: true,
-                        composed: true,
-                    })
-                );
-                await elementUpdated(el);
-
-                expect(el.formattedValue).to.equal(actual);
-                expect(el.value).to.equal(Number(actual));
-            });
-        });
-        it('accepts "、" as "," and "。" as "."', async () => {
-            const el = await getElFrom(Default(Default.args));
-
-            el.focusElement.value = '１、２３４。５6';
-            el.focusElement.dispatchEvent(
-                new Event('input', {
-                    bubbles: true,
-                    cancelable: true,
-                    composed: true,
-                })
-            );
-            await elementUpdated(el);
-
-            expect(el.formattedValue).to.equal('1,234.56');
-            expect(el.value).to.equal(Number(1234.56));
-        });
-        it('accepts misplaced "、" and corrects them', async () => {
-            const el = await getElFrom(Default(Default.args));
-            const nextFocusableElement = document.createElement('input');
-
-            el.insertAdjacentElement('afterend', nextFocusableElement);
-            el.focus();
-            await elementUpdated(el);
-
-            el.focusElement.value = '１２、３４５６、７。８９';
-            el.focusElement.dispatchEvent(
-                new Event('input', {
-                    bubbles: true,
-                    cancelable: true,
-                    composed: true,
-                })
-            );
-            await elementUpdated(el);
-
-            expect(el.focusElement.value, 'visible').to.equal('12,3456,7.89');
-            expect(el.formattedValue, 'tracked').to.equal('1,234,567.89');
-            expect(el.value, 'value').to.equal(Number(1234567.89));
-
-            await sendKeys({
-                press: 'Tab',
-            });
-            await elementUpdated(el);
-            expect(el.focusElement.value, 'visible').to.equal('1,234,567.89');
-            expect(el.formattedValue, 'tracked').to.equal('1,234,567.89');
-            expect(el.value, 'value').to.equal(Number(1234567.89));
-            nextFocusableElement.remove();
-        });
-        it('accepts "＋" as "+" and "ー" as "-"', async () => {
-            const el = await getElFrom(decimals(decimals.args));
-
-            el.focusElement.value = '＋９。８７';
-            el.focusElement.dispatchEvent(
-                new Event('input', {
-                    bubbles: true,
-                    cancelable: true,
-                    composed: true,
-                })
-            );
-            await elementUpdated(el);
-
-            expect(el.formattedValue).to.equal('+9.87');
-            expect(el.value).to.equal(Number(9.87));
-
-            el.focusElement.value = 'ー９．８７';
-            el.focusElement.dispatchEvent(
-                new Event('input', {
-                    bubbles: true,
-                    cancelable: true,
-                    composed: true,
-                })
-            );
-            await elementUpdated(el);
-
-            expect(el.formattedValue).to.equal('-9.87');
-            expect(el.value).to.equal(Number(-9.87));
-        });
-        it('accepts "％" as "%"', async () => {
-            const el = await getElFrom(percents(percents.args));
-
-            el.focusElement.value = '１０％';
-            el.focusElement.dispatchEvent(
-                new Event('input', {
-                    bubbles: true,
-                    cancelable: true,
-                    composed: true,
-                })
-            );
-            await elementUpdated(el);
-
-            expect(el.formattedValue).to.equal('10%');
-            expect(el.value).to.equal(Number(0.1));
-        });
-        it('does not accept non-numeric characters', async () => {
-            const el = await getElFrom(Default(Default.args));
-
-            el.focusElement.focus();
-            el.dispatchEvent(new CompositionEvent('compositionstart'));
-            await sendKeys({ type: 'あい' });
-
-            await elementUpdated(el.focusElement);
-            await nextFrame();
-
-            expect(el.focusElement.value).to.equal('100');
-            el.dispatchEvent(new CompositionEvent('compositionend'));
-
-            await nextFrame();
-            expect(el.focusElement.value).to.equal('100');
-        });
+    it('accepts "、" as "," and "。" as "."', async () => {
+      const el = await getElFrom(Default(Default.args));
+
+      el.focusElement.value = "１、２３４。５6";
+      el.focusElement.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+        }),
+      );
+      await elementUpdated(el);
+
+      expect(el.formattedValue).to.equal("1,234.56");
+      expect(el.value).to.equal(Number(1234.56));
+    });
+    it('accepts misplaced "、" and corrects them', async () => {
+      const el = await getElFrom(Default(Default.args));
+      const nextFocusableElement = document.createElement("input");
+
+      el.insertAdjacentElement("afterend", nextFocusableElement);
+      el.focus();
+      await elementUpdated(el);
+
+      el.focusElement.value = "１２、３４５６、７。８９";
+      el.focusElement.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+        }),
+      );
+      await elementUpdated(el);
+
+      expect(el.focusElement.value, "visible").to.equal("12,3456,7.89");
+      expect(el.formattedValue, "tracked").to.equal("1,234,567.89");
+      expect(el.value, "value").to.equal(Number(1234567.89));
+
+      await sendKeys({
+        press: "Tab",
+      });
+      await elementUpdated(el);
+      expect(el.focusElement.value, "visible").to.equal("1,234,567.89");
+      expect(el.formattedValue, "tracked").to.equal("1,234,567.89");
+      expect(el.value, "value").to.equal(Number(1234567.89));
+      nextFocusableElement.remove();
+    });
+    it('accepts "＋" as "+" and "ー" as "-"', async () => {
+      const el = await getElFrom(decimals(decimals.args));
+
+      el.focusElement.value = "＋９。８７";
+      el.focusElement.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+        }),
+      );
+      await elementUpdated(el);
+
+      expect(el.formattedValue).to.equal("+9.87");
+      expect(el.value).to.equal(Number(9.87));
+
+      el.focusElement.value = "ー９．８７";
+      el.focusElement.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+        }),
+      );
+      await elementUpdated(el);
+
+      expect(el.formattedValue).to.equal("-9.87");
+      expect(el.value).to.equal(Number(-9.87));
+    });
+    it('accepts "％" as "%"', async () => {
+      const el = await getElFrom(percents(percents.args));
+
+      el.focusElement.value = "１０％";
+      el.focusElement.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+        }),
+      );
+      await elementUpdated(el);
+
+      expect(el.formattedValue).to.equal("10%");
+      expect(el.value).to.equal(Number(0.1));
+    });
+    it("does not accept non-numeric characters", async () => {
+      const el = await getElFrom(Default(Default.args));
+
+      el.focusElement.focus();
+      el.dispatchEvent(new CompositionEvent("compositionstart"));
+      await sendKeys({ type: "あい" });
+
+      await elementUpdated(el.focusElement);
+      await nextFrame();
+
+      expect(el.focusElement.value).to.equal("100");
+      el.dispatchEvent(new CompositionEvent("compositionend"));
+
+      await nextFrame();
+      expect(el.focusElement.value).to.equal("100");
     });
+  });
 });
diff --git a/packages/number-field/test/number-field-memory.test.ts b/packages/number-field/test/number-field-memory.test.ts
index 0e19dbc613..3ee7acd7c3 100644
--- a/packages/number-field/test/number-field-memory.test.ts
+++ b/packages/number-field/test/number-field-memory.test.ts
@@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Default } from '../stories/number-field.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/number-field.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(Default({}));
diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
index 99efa64cde..2cf50290e9 100644
--- a/packages/number-field/test/number-field.test.ts
+++ b/packages/number-field/test/number-field.test.ts
@@ -12,1802 +12,1802 @@ governing permissions and limitations under the License.
 
 import { shouldPolyfill } from "@formatjs/intl-numberformat/should-polyfill.js";
 import {
-	aTimeout,
-	elementUpdated,
-	expect,
-	nextFrame,
-	oneEvent,
+  aTimeout,
+  elementUpdated,
+  expect,
+  nextFrame,
+  oneEvent,
 } from "@open-wc/testing";
 import { html } from "@spectrum-web-components/base";
 
 import {
-	CHANGE_DEBOUNCE_MS,
-	FRAMES_PER_CHANGE,
-	indeterminatePlaceholder,
-	NumberField,
+  CHANGE_DEBOUNCE_MS,
+  FRAMES_PER_CHANGE,
+  indeterminatePlaceholder,
+  NumberField,
 } from "@spectrum-web-components/number-field";
 import "@spectrum-web-components/number-field/sp-number-field.js";
 import { isMac } from "@spectrum-web-components/shared/src/platform.js";
 import {
-	a11ySnapshot,
-	findAccessibilityNode,
-	sendKeys,
-	setUserAgent,
+  a11ySnapshot,
+  findAccessibilityNode,
+  sendKeys,
+  setUserAgent,
 } from "@web/test-runner-commands";
 import { spy } from "sinon";
 import { sendMouse } from "../../../test/plugins/browser.js";
 import {
-	fixture,
-	testForLitDevWarnings,
+  fixture,
+  testForLitDevWarnings,
 } from "../../../test/testing-helpers.js";
 import { createLanguageContext } from "../../../tools/reactive-controllers/test/helpers.js";
 import {
-	currency,
-	decimals,
-	Default,
-	germanDecimals,
-	indeterminate,
-	percents,
-	pixels,
-	units,
+  currency,
+  decimals,
+  Default,
+  germanDecimals,
+  indeterminate,
+  percents,
+  pixels,
+  units,
 } from "../stories/number-field.stories.js";
 import { clickBySelector, getElFrom } from "./helpers.js";
 
 describe("NumberField", () => {
-	before(async () => {
-		const shouldPolyfillEn = shouldPolyfill("en");
-		const shouldPolyfillFr = shouldPolyfill("fr");
+  before(async () => {
+    const shouldPolyfillEn = shouldPolyfill("en");
+    const shouldPolyfillFr = shouldPolyfill("fr");
 
-		if (shouldPolyfillEn || shouldPolyfillFr) {
-			await import("@formatjs/intl-numberformat/polyfill-force.js");
-		}
+    if (shouldPolyfillEn || shouldPolyfillFr) {
+      await import("@formatjs/intl-numberformat/polyfill-force.js");
+    }
 
-		if (shouldPolyfillEn) {
-			await import("@formatjs/intl-numberformat/locale-data/en.js");
-		}
+    if (shouldPolyfillEn) {
+      await import("@formatjs/intl-numberformat/locale-data/en.js");
+    }
 
-		if (shouldPolyfillFr) {
-			await import("@formatjs/intl-numberformat/locale-data/fr.js");
-		}
-	});
-	testForLitDevWarnings(async () => await getElFrom(Default({})));
-	it("loads default number-field accessibly", async () => {
-		const el = await getElFrom(Default({}));
+    if (shouldPolyfillFr) {
+      await import("@formatjs/intl-numberformat/locale-data/fr.js");
+    }
+  });
+  testForLitDevWarnings(async () => await getElFrom(Default({})));
+  it("loads default number-field accessibly", async () => {
+    const el = await getElFrom(Default({}));
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await expect(el).to.be.accessible();
-	});
-	describe("receives input", () => {
-		it("without language context", async () => {
-			const el = await getElFrom(Default({ value: 1337 }));
+    await expect(el).to.be.accessible();
+  });
+  describe("receives input", () => {
+    it("without language context", async () => {
+      const el = await getElFrom(Default({ value: 1337 }));
 
-			el.size = "s";
-			expect(el.formattedValue).to.equal("1,337");
-			expect(el.valueAsString).to.equal("1337");
-			expect(el.value).to.equal(1337);
-			expect(el.focusElement.value).to.equal("1,337");
-			el.focus();
-			await sendKeys({ type: "7331" });
-			await elementUpdated(el);
-			await sendKeys({ press: "Enter" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("13,377,331");
-			expect(el.valueAsString).to.equal("13377331");
-			expect(el.value).to.equal(13377331);
-			expect(el.focusElement.value).to.equal("13,377,331");
-		});
-		it("with language context", async () => {
-			const [languageContext] = createLanguageContext("fr");
-			const el = await getElFrom(html`
-				

-					${Default({ value: 1337 })}
-				

-			`);
+      el.size = "s";
+      expect(el.formattedValue).to.equal("1,337");
+      expect(el.valueAsString).to.equal("1337");
+      expect(el.value).to.equal(1337);
+      expect(el.focusElement.value).to.equal("1,337");
+      el.focus();
+      await sendKeys({ type: "7331" });
+      await elementUpdated(el);
+      await sendKeys({ press: "Enter" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("13,377,331");
+      expect(el.valueAsString).to.equal("13377331");
+      expect(el.value).to.equal(13377331);
+      expect(el.focusElement.value).to.equal("13,377,331");
+    });
+    it("with language context", async () => {
+      const [languageContext] = createLanguageContext("fr");
+      const el = await getElFrom(html`
+        

+          ${Default({ value: 1337 })}
+        

+      `);
 
-			el.size = "l";
-			expect(el.formattedValue).to.equal("1 337");
-			expect(el.valueAsString).to.equal("1337");
-			expect(el.value).to.equal(1337);
-			expect(el.focusElement.value).to.equal("1 337");
-			el.focus();
-			await sendKeys({ type: "7331" });
-			await elementUpdated(el);
-			await sendKeys({ press: "Enter" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("13 377 331");
-			expect(el.valueAsString).to.equal("13377331");
-			expect(el.value).to.equal(13377331);
-			expect(el.focusElement.value).to.equal("13 377 331");
-		});
-	});
-	xit("correctly interprets decimal point on iPhone", async () => {
-		// setUserAgent is not currently supported by Playwright
-		await setUserAgent(
-			"Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1",
-		);
-		const el = await getElFrom(decimals({ value: 1234 }));
+      el.size = "l";
+      expect(el.formattedValue).to.equal("1 337");
+      expect(el.valueAsString).to.equal("1337");
+      expect(el.value).to.equal(1337);
+      expect(el.focusElement.value).to.equal("1 337");
+      el.focus();
+      await sendKeys({ type: "7331" });
+      await elementUpdated(el);
+      await sendKeys({ press: "Enter" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("13 377 331");
+      expect(el.valueAsString).to.equal("13377331");
+      expect(el.value).to.equal(13377331);
+      expect(el.focusElement.value).to.equal("13 377 331");
+    });
+  });
+  xit("correctly interprets decimal point on iPhone", async () => {
+    // setUserAgent is not currently supported by Playwright
+    await setUserAgent(
+      "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1",
+    );
+    const el = await getElFrom(decimals({ value: 1234 }));
 
-		expect(el.formattedValue).to.equal("1,234");
+    expect(el.formattedValue).to.equal("1,234");
 
-		el.focus();
-		await sendKeys({ press: "Backspace" });
-		el.blur();
-		expect(el.formattedValue).to.equal("123");
+    el.focus();
+    await sendKeys({ press: "Backspace" });
+    el.blur();
+    expect(el.formattedValue).to.equal("123");
 
-		el.focus();
-		await sendKeys({ type: "45" });
-		el.blur();
-		expect(el.formattedValue).to.equal("12,345");
+    el.focus();
+    await sendKeys({ type: "45" });
+    el.blur();
+    expect(el.formattedValue).to.equal("12,345");
 
-		el.focus();
-		await sendKeys({ type: ",6" });
-		el.blur();
-		expect(el.formattedValue).to.equal("12,345.6");
+    el.focus();
+    await sendKeys({ type: ",6" });
+    el.blur();
+    expect(el.formattedValue).to.equal("12,345.6");
 
-		el.focus();
-		await sendKeys({ type: ",7" });
-		el.blur();
-		expect(el.formattedValue).to.equal("123,456.7");
+    el.focus();
+    await sendKeys({ type: ",7" });
+    el.blur();
+    expect(el.formattedValue).to.equal("123,456.7");
 
-		el.focus();
-		await sendKeys({ press: "Backspace" });
-		await sendKeys({ press: "Backspace" });
-		el.blur();
-		expect(el.formattedValue).to.equal("123,456");
-	});
-	describe("Step", () => {
-		it("can be 0", async () => {
-			const el = await getElFrom(
-				Default({
-					step: 0,
-					min: 0,
-					max: 10,
-					value: 5,
-				}),
-			);
+    el.focus();
+    await sendKeys({ press: "Backspace" });
+    await sendKeys({ press: "Backspace" });
+    el.blur();
+    expect(el.formattedValue).to.equal("123,456");
+  });
+  describe("Step", () => {
+    it("can be 0", async () => {
+      const el = await getElFrom(
+        Default({
+          step: 0,
+          min: 0,
+          max: 10,
+          value: 5,
+        }),
+      );
 
-			el.size = "xl";
-			expect(el.value).to.equal(5);
-			expect(el.formattedValue).to.equal("5");
-			expect(el.valueAsString).to.equal("5");
-			expect(el.focusElement.value).to.equal("5");
-		});
-		it("respects other locales", async () => {
-			const el = await getElFrom(
-				germanDecimals({
-					step: 0.01,
-				}),
-			);
+      el.size = "xl";
+      expect(el.value).to.equal(5);
+      expect(el.formattedValue).to.equal("5");
+      expect(el.valueAsString).to.equal("5");
+      expect(el.focusElement.value).to.equal("5");
+    });
+    it("respects other locales", async () => {
+      const el = await getElFrom(
+        germanDecimals({
+          step: 0.01,
+        }),
+      );
 
-			el.value = 2.42;
-			await elementUpdated(el);
-			el.size = "xl";
-			expect(el.value).to.equal(2.42);
-			expect(el.formattedValue).to.equal("+2,42");
-			expect(el.focusElement.value).to.equal("+2,42");
+      el.value = 2.42;
+      await elementUpdated(el);
+      el.size = "xl";
+      expect(el.value).to.equal(2.42);
+      expect(el.formattedValue).to.equal("+2,42");
+      expect(el.focusElement.value).to.equal("+2,42");
 
-			await clickBySelector(el, ".step-up");
+      await clickBySelector(el, ".step-up");
 
-			expect(el.value).to.equal(2.43);
-			expect(el.formattedValue).to.equal("+2,43");
-			expect(el.focusElement.value).to.equal("+2,43");
-		});
-		it("supports both positive and negative decimal values", async () => {
-			const el = await getElFrom(
-				Default({
-					step: 0.001,
-					min: -10,
-					max: 10,
-					value: -2.4,
-				}),
-			);
+      expect(el.value).to.equal(2.43);
+      expect(el.formattedValue).to.equal("+2,43");
+      expect(el.focusElement.value).to.equal("+2,43");
+    });
+    it("supports both positive and negative decimal values", async () => {
+      const el = await getElFrom(
+        Default({
+          step: 0.001,
+          min: -10,
+          max: 10,
+          value: -2.4,
+        }),
+      );
 
-			el.size = "xl";
-			expect(el.value).to.equal(-2.4);
-			expect(el.valueAsString).to.equal("-2.4");
-			expect(el.focusElement.value).to.equal("-2.4");
-		});
-		it("correctly handles max values greater than 1000 with step=1", async () => {
-			const el = await getElFrom(
-				Default({
-					step: 1,
-					min: 0,
-					max: 200000,
-					value: 999,
-				}),
-			);
+      el.size = "xl";
+      expect(el.value).to.equal(-2.4);
+      expect(el.valueAsString).to.equal("-2.4");
+      expect(el.focusElement.value).to.equal("-2.4");
+    });
+    it("correctly handles max values greater than 1000 with step=1", async () => {
+      const el = await getElFrom(
+        Default({
+          step: 1,
+          min: 0,
+          max: 200000,
+          value: 999,
+        }),
+      );
 
-			await clickBySelector(el, ".step-up");
+      await clickBySelector(el, ".step-up");
 
-			expect(el.value).to.equal(1000);
-			expect(el.valueAsString).to.equal("1000");
-			expect(el.formattedValue).to.equal("1,000");
-			expect(el.focusElement.value).to.equal("1,000");
+      expect(el.value).to.equal(1000);
+      expect(el.valueAsString).to.equal("1000");
+      expect(el.formattedValue).to.equal("1,000");
+      expect(el.focusElement.value).to.equal("1,000");
 
-			el.value = 15000;
-			await elementUpdated(el);
+      el.value = 15000;
+      await elementUpdated(el);
 
-			expect(el.value).to.equal(15000);
-			expect(el.valueAsString).to.equal("15000");
-			expect(el.formattedValue).to.equal("15,000");
-			expect(el.focusElement.value).to.equal("15,000");
-		});
-	});
-	describe("Increments", () => {
-		let el: NumberField;
+      expect(el.value).to.equal(15000);
+      expect(el.valueAsString).to.equal("15000");
+      expect(el.formattedValue).to.equal("15,000");
+      expect(el.focusElement.value).to.equal("15,000");
+    });
+  });
+  describe("Increments", () => {
+    let el: NumberField;
 
-		beforeEach(async () => {
-			el = await getElFrom(Default({}));
-			expect(el.value).to.be.NaN;
-			expect(el.formattedValue).to.equal("");
-			expect(el.valueAsString).to.equal("NaN");
-			expect(el.focusElement.value).to.equal("");
-		});
-		it('via pointer, only "left" button', async () => {
-			await clickBySelector(el, ".step-up", { button: "middle" });
-			expect(el.formattedValue).to.equal("");
-			expect(el.valueAsString).to.equal("NaN");
-			expect(el.value).to.be.NaN;
-			expect(el.focusElement.value).to.equal("");
-		});
+    beforeEach(async () => {
+      el = await getElFrom(Default({}));
+      expect(el.value).to.be.NaN;
+      expect(el.formattedValue).to.equal("");
+      expect(el.valueAsString).to.equal("NaN");
+      expect(el.focusElement.value).to.equal("");
+    });
+    it('via pointer, only "left" button', async () => {
+      await clickBySelector(el, ".step-up", { button: "middle" });
+      expect(el.formattedValue).to.equal("");
+      expect(el.valueAsString).to.equal("NaN");
+      expect(el.value).to.be.NaN;
+      expect(el.focusElement.value).to.equal("");
+    });
 
-		it("via pointer", async () => {
-			await clickBySelector(el, ".step-up");
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			await clickBySelector(el, ".step-up");
-			expect(el.formattedValue).to.equal("1");
-			expect(el.valueAsString).to.equal("1");
-			expect(el.value).to.equal(1);
-			expect(el.focusElement.value).to.equal("1");
-		});
-		it("via arrow up", async () => {
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("1");
-			expect(el.valueAsString).to.equal("1");
-			expect(el.value).to.equal(1);
-			expect(el.focusElement.value).to.equal("1");
-		});
-		it("via arrow up (shift modified)", async () => {
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			await sendKeys({ press: "Shift+ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-			expect(el.focusElement.value).to.equal("10");
-		});
-		it("via arrow up (custom shift modified value)", async () => {
-			el.focus();
-			(el as NumberField).stepModifier = 5;
-			(el as NumberField).step = 3;
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			await sendKeys({ press: "Shift+ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("15");
-			expect(el.valueAsString).to.equal("15");
-			expect(el.value).to.equal(15);
-			expect(el.focusElement.value).to.equal("15");
-		});
-		it("via scroll", async () => {
-			el.focus();
-			await elementUpdated(el);
-			expect(el.focused).to.be.true;
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 100 }));
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("1");
-			expect(el.valueAsString).to.equal("1");
-			expect(el.value).to.equal(1);
-			expect(el.focusElement.value).to.equal("1");
-		});
-		it("via scroll (shift modified)", async () => {
-			el.focus();
-			await elementUpdated(el);
-			expect(el.focused).to.be.true;
-			el.dispatchEvent(
-				new WheelEvent("wheel", {
-					deltaX: 1,
-					shiftKey: true,
-				}),
-			);
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			el.dispatchEvent(
-				new WheelEvent("wheel", {
-					deltaX: 100,
-					shiftKey: true,
-				}),
-			);
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-			expect(el.focusElement.value).to.equal("10");
-		});
-	});
-	describe("Decrements", () => {
-		let el: NumberField;
+    it("via pointer", async () => {
+      await clickBySelector(el, ".step-up");
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      await clickBySelector(el, ".step-up");
+      expect(el.formattedValue).to.equal("1");
+      expect(el.valueAsString).to.equal("1");
+      expect(el.value).to.equal(1);
+      expect(el.focusElement.value).to.equal("1");
+    });
+    it("via arrow up", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("1");
+      expect(el.valueAsString).to.equal("1");
+      expect(el.value).to.equal(1);
+      expect(el.focusElement.value).to.equal("1");
+    });
+    it("via arrow up (shift modified)", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      await sendKeys({ press: "Shift+ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+      expect(el.focusElement.value).to.equal("10");
+    });
+    it("via arrow up (custom shift modified value)", async () => {
+      el.focus();
+      (el as NumberField).stepModifier = 5;
+      (el as NumberField).step = 3;
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      await sendKeys({ press: "Shift+ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("15");
+      expect(el.valueAsString).to.equal("15");
+      expect(el.value).to.equal(15);
+      expect(el.focusElement.value).to.equal("15");
+    });
+    it("via scroll", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 100 }));
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("1");
+      expect(el.valueAsString).to.equal("1");
+      expect(el.value).to.equal(1);
+      expect(el.focusElement.value).to.equal("1");
+    });
+    it("via scroll (shift modified)", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      el.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 1,
+          shiftKey: true,
+        }),
+      );
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      el.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 100,
+          shiftKey: true,
+        }),
+      );
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+      expect(el.focusElement.value).to.equal("10");
+    });
+  });
+  describe("Decrements", () => {
+    let el: NumberField;
 
-		beforeEach(async () => {
-			el = await getElFrom(Default({}));
-			expect(el.value).to.be.NaN;
-			expect(el.formattedValue).to.equal("");
-			expect(el.valueAsString).to.equal("NaN");
-			expect(el.focusElement.value).to.equal("");
-		});
-		it('via pointer, only "left" button', async () => {
-			await clickBySelector(el, ".step-down", { button: "middle" });
-			expect(el.formattedValue).to.equal("");
-			expect(el.valueAsString).to.equal("NaN");
-			expect(el.value).to.be.NaN;
-			expect(el.focusElement.value).to.equal("");
-		});
-		it("via pointer", async () => {
-			await clickBySelector(el, ".step-down");
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			await clickBySelector(el, ".step-down");
-			expect(el.formattedValue).to.equal("-1");
-			expect(el.valueAsString).to.equal("-1");
-			expect(el.value).to.equal(-1);
-			expect(el.focusElement.value).to.equal("-1");
-		});
-		it("via arrow down", async () => {
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowDown" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			await sendKeys({ press: "ArrowDown" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("-1");
-			expect(el.valueAsString).to.equal("-1");
-			expect(el.value).to.equal(-1);
-			expect(el.focusElement.value).to.equal("-1");
-		});
-		it("via arrow down (shift modified)", async () => {
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowDown" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			await sendKeys({ press: "Shift+ArrowDown" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("-10");
-			expect(el.valueAsString).to.equal("-10");
-			expect(el.value).to.equal(-10);
-			expect(el.focusElement.value).to.equal("-10");
-		});
-		it("via arrow up (custom shift modified value)", async () => {
-			el.focus();
-			(el as NumberField).stepModifier = 5;
-			(el as NumberField).step = 3;
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowDown" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			await sendKeys({ press: "Shift+ArrowDown" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("-15");
-			expect(el.valueAsString).to.equal("-15");
-			expect(el.value).to.equal(-15);
-			expect(el.focusElement.value).to.equal("-15");
-		});
-		it("via scroll", async () => {
-			el.focus();
-			await elementUpdated(el);
-			expect(el.focused).to.be.true;
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: -100 }));
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("-1");
-			expect(el.valueAsString).to.equal("-1");
-			expect(el.value).to.equal(-1);
-			expect(el.focusElement.value).to.equal("-1");
-		});
-		it("via scroll (shift modified)", async () => {
-			el.focus();
-			await elementUpdated(el);
-			expect(el.focused).to.be.true;
-			el.dispatchEvent(
-				new WheelEvent("wheel", {
-					deltaX: -1,
-					shiftKey: true,
-				}),
-			);
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			expect(el.focusElement.value).to.equal("0");
-			el.dispatchEvent(
-				new WheelEvent("wheel", {
-					deltaX: -100,
-					shiftKey: true,
-				}),
-			);
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("-10");
-			expect(el.valueAsString).to.equal("-10");
-			expect(el.value).to.equal(-10);
-			expect(el.focusElement.value).to.equal("-10");
-		});
-	});
-	describe("dispatched events", () => {
-		const inputSpy = spy();
-		const changeSpy = spy();
-		let el: NumberField;
+    beforeEach(async () => {
+      el = await getElFrom(Default({}));
+      expect(el.value).to.be.NaN;
+      expect(el.formattedValue).to.equal("");
+      expect(el.valueAsString).to.equal("NaN");
+      expect(el.focusElement.value).to.equal("");
+    });
+    it('via pointer, only "left" button', async () => {
+      await clickBySelector(el, ".step-down", { button: "middle" });
+      expect(el.formattedValue).to.equal("");
+      expect(el.valueAsString).to.equal("NaN");
+      expect(el.value).to.be.NaN;
+      expect(el.focusElement.value).to.equal("");
+    });
+    it("via pointer", async () => {
+      await clickBySelector(el, ".step-down");
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      await clickBySelector(el, ".step-down");
+      expect(el.formattedValue).to.equal("-1");
+      expect(el.valueAsString).to.equal("-1");
+      expect(el.value).to.equal(-1);
+      expect(el.focusElement.value).to.equal("-1");
+    });
+    it("via arrow down", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowDown" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      await sendKeys({ press: "ArrowDown" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("-1");
+      expect(el.valueAsString).to.equal("-1");
+      expect(el.value).to.equal(-1);
+      expect(el.focusElement.value).to.equal("-1");
+    });
+    it("via arrow down (shift modified)", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowDown" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      await sendKeys({ press: "Shift+ArrowDown" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("-10");
+      expect(el.valueAsString).to.equal("-10");
+      expect(el.value).to.equal(-10);
+      expect(el.focusElement.value).to.equal("-10");
+    });
+    it("via arrow up (custom shift modified value)", async () => {
+      el.focus();
+      (el as NumberField).stepModifier = 5;
+      (el as NumberField).step = 3;
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowDown" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      await sendKeys({ press: "Shift+ArrowDown" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("-15");
+      expect(el.valueAsString).to.equal("-15");
+      expect(el.value).to.equal(-15);
+      expect(el.focusElement.value).to.equal("-15");
+    });
+    it("via scroll", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: -100 }));
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("-1");
+      expect(el.valueAsString).to.equal("-1");
+      expect(el.value).to.equal(-1);
+      expect(el.focusElement.value).to.equal("-1");
+    });
+    it("via scroll (shift modified)", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      el.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: -1,
+          shiftKey: true,
+        }),
+      );
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      expect(el.focusElement.value).to.equal("0");
+      el.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: -100,
+          shiftKey: true,
+        }),
+      );
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("-10");
+      expect(el.valueAsString).to.equal("-10");
+      expect(el.value).to.equal(-10);
+      expect(el.focusElement.value).to.equal("-10");
+    });
+  });
+  describe("dispatched events", () => {
+    const inputSpy = spy();
+    const changeSpy = spy();
+    let el: NumberField;
 
-		beforeEach(async () => {
-			inputSpy.resetHistory();
-			changeSpy.resetHistory();
-			el = await getElFrom(Default({ value: 50 }));
-			el.addEventListener("input", (event: Event) => {
-				inputSpy((event.target as NumberField)?.value);
-			});
-			el.addEventListener("change", (event: Event) => {
-				changeSpy((event.target as NumberField)?.value);
-			});
-		});
-		it("except when changing `value` from the outside", async () => {
-			el.focus();
-			await elementUpdated(el);
-			expect(el.focused).to.be.true;
-			el.value = 51;
-			expect(changeSpy.callCount).to.equal(0);
-			await elementUpdated(el);
-			el.value = 52;
-			expect(changeSpy.callCount).to.equal(0);
-		});
-		it("handles IME input correctly and dispatches change event", async () => {
-			el.focus();
-			el.dispatchEvent(new CompositionEvent("compositionstart"));
-			// input multibyte characters
-			await sendKeys({ type: "１２３" });
-			await elementUpdated(el);
-			el.dispatchEvent(new CompositionEvent("compositionend"));
-			await elementUpdated(el);
-			await sendKeys({ press: "Enter" });
-			expect(el.value).to.equal(50123);
-			expect(changeSpy.callCount).to.equal(1);
-		});
-		it("via scroll", async () => {
-			el.focus();
-			await elementUpdated(el);
-			expect(el.focused).to.be.true;
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("51");
-			expect(el.valueAsString).to.equal("51");
-			expect(el.value).to.equal(51);
-			expect(inputSpy.callCount).to.equal(1);
-			expect(changeSpy.callCount).to.equal(0);
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 100 }));
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("52");
-			expect(el.valueAsString).to.equal("52");
-			expect(el.value).to.equal(52);
-			expect(inputSpy.callCount).to.equal(2);
-			expect(changeSpy.callCount).to.equal(0);
-			await aTimeout(CHANGE_DEBOUNCE_MS + 10);
-			expect(inputSpy.callCount).to.equal(2);
-			expect(changeSpy.callCount).to.equal(1);
-		});
-		it("has a useful `value`", async () => {
-			el.focus();
-			await sendKeys({ type: "7" });
-			await sendKeys({ press: "Enter" });
-			expect(inputSpy.calledWith(507), "input").to.be.true;
-			expect(changeSpy.calledWith(507), "change").to.be.true;
-			await sendKeys({ type: ",00" });
-			await sendKeys({ press: "Enter" });
-			expect(inputSpy.calledWith(5070), "input").to.be.true;
-			expect(inputSpy.calledWith(50700), "input").to.be.true;
-			expect(changeSpy.calledWith(50700), "change").to.be.true;
-		});
-		it("has a useful `value` - percent", async () => {
-			el.formatOptions = { style: "percent" };
-			el.value = 0.45;
-			expect(el.value).to.equal(0.45);
-			el.focus();
-			await sendKeys({ type: "7" }); // Visible text: 45%7
-			expect(inputSpy.calledWith(4.57), "first input").to.be.true;
-			await sendKeys({ press: "Backspace" }); // Visible text: 45%
-			await sendKeys({ press: "Backspace" }); // Visible text: 45
-			await sendKeys({ press: "Backspace" }); // Visible text: 4
-			await sendKeys({ press: "Enter" });
-			expect(el.value).to.equal(0.04);
-			expect(inputSpy.calledWith(0.45), "second input").to.be.true;
-			expect(inputSpy.calledWith(0.04), "third input").to.be.true;
-			expect(changeSpy.calledWith(0.04), "change").to.be.true;
-		});
-		it("has a useful `value` - currency", async () => {
-			el.formatOptions = {
-				style: "currency",
-				currency: "EUR",
-				currencyDisplay: "code",
-				currencySign: "accounting",
-			};
-			await elementUpdated(el);
-			el.value = 45;
-			expect(el.value).to.equal(45);
-			el.focus();
-			await sendKeys({ type: "7" }); // Visible text: EUR 45.007
-			expect(el.value).to.equal(45.007);
-			expect(inputSpy.calledWith(el.value), "first input").to.be.true;
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
-			await sendKeys({ type: "1" }); // Visible text: 1EUR 45.007
-			await sendKeys({ press: "Enter" }); // Visible text: EUR 145.01
-			expect(el.value).to.equal(145.007);
-			expect(inputSpy.calledWith(145.007), "second input").to.be.true;
-			expect(changeSpy.calledWith(145.007), "change").to.be.true;
-		});
-		it("one input/one change for each Arrow*", async () => {
-			el.focus();
-			await sendKeys({ press: "ArrowUp" });
-			expect(inputSpy.callCount).to.equal(1);
-			expect(changeSpy.callCount).to.equal(1);
-			expect(el.value).to.equal(51);
-			await sendKeys({ press: "ArrowDown" });
-			expect(inputSpy.callCount).to.equal(2);
-			expect(changeSpy.callCount).to.equal(2);
-			expect(el.value).to.equal(50);
-		});
-		it("one input/one change for each click", async () => {
-			await clickBySelector(el, ".step-up");
-			expect(inputSpy.callCount).to.equal(1);
-			expect(changeSpy.callCount).to.equal(1);
-			expect(el.value).to.equal(51);
-			await clickBySelector(el, ".step-down");
-			expect(inputSpy.callCount).to.equal(2);
-			expect(changeSpy.callCount).to.equal(2);
-			expect(el.value).to.equal(50);
-		});
-		it("click with modifier key", async () => {
-			let target = el.shadowRoot.querySelector(".step-up") as HTMLElement;
-			const stepUpRect = target.getBoundingClientRect();
-			const options = {
-				bubbles: true,
-				composed: true,
-				shiftKey: true,
-				clientX: stepUpRect.x + 1,
-				clientY: stepUpRect.y + 1,
-			};
+    beforeEach(async () => {
+      inputSpy.resetHistory();
+      changeSpy.resetHistory();
+      el = await getElFrom(Default({ value: 50 }));
+      el.addEventListener("input", (event: Event) => {
+        inputSpy((event.target as NumberField)?.value);
+      });
+      el.addEventListener("change", (event: Event) => {
+        changeSpy((event.target as NumberField)?.value);
+      });
+    });
+    it("except when changing `value` from the outside", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      el.value = 51;
+      expect(changeSpy.callCount).to.equal(0);
+      await elementUpdated(el);
+      el.value = 52;
+      expect(changeSpy.callCount).to.equal(0);
+    });
+    it("handles IME input correctly and dispatches change event", async () => {
+      el.focus();
+      el.dispatchEvent(new CompositionEvent("compositionstart"));
+      // input multibyte characters
+      await sendKeys({ type: "１２３" });
+      await elementUpdated(el);
+      el.dispatchEvent(new CompositionEvent("compositionend"));
+      await elementUpdated(el);
+      await sendKeys({ press: "Enter" });
+      expect(el.value).to.equal(50123);
+      expect(changeSpy.callCount).to.equal(1);
+    });
+    it("via scroll", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("51");
+      expect(el.valueAsString).to.equal("51");
+      expect(el.value).to.equal(51);
+      expect(inputSpy.callCount).to.equal(1);
+      expect(changeSpy.callCount).to.equal(0);
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 100 }));
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("52");
+      expect(el.valueAsString).to.equal("52");
+      expect(el.value).to.equal(52);
+      expect(inputSpy.callCount).to.equal(2);
+      expect(changeSpy.callCount).to.equal(0);
+      await aTimeout(CHANGE_DEBOUNCE_MS + 10);
+      expect(inputSpy.callCount).to.equal(2);
+      expect(changeSpy.callCount).to.equal(1);
+    });
+    it("has a useful `value`", async () => {
+      el.focus();
+      await sendKeys({ type: "7" });
+      await sendKeys({ press: "Enter" });
+      expect(inputSpy.calledWith(507), "input").to.be.true;
+      expect(changeSpy.calledWith(507), "change").to.be.true;
+      await sendKeys({ type: ",00" });
+      await sendKeys({ press: "Enter" });
+      expect(inputSpy.calledWith(5070), "input").to.be.true;
+      expect(inputSpy.calledWith(50700), "input").to.be.true;
+      expect(changeSpy.calledWith(50700), "change").to.be.true;
+    });
+    it("has a useful `value` - percent", async () => {
+      el.formatOptions = { style: "percent" };
+      el.value = 0.45;
+      expect(el.value).to.equal(0.45);
+      el.focus();
+      await sendKeys({ type: "7" }); // Visible text: 45%7
+      expect(inputSpy.calledWith(4.57), "first input").to.be.true;
+      await sendKeys({ press: "Backspace" }); // Visible text: 45%
+      await sendKeys({ press: "Backspace" }); // Visible text: 45
+      await sendKeys({ press: "Backspace" }); // Visible text: 4
+      await sendKeys({ press: "Enter" });
+      expect(el.value).to.equal(0.04);
+      expect(inputSpy.calledWith(0.45), "second input").to.be.true;
+      expect(inputSpy.calledWith(0.04), "third input").to.be.true;
+      expect(changeSpy.calledWith(0.04), "change").to.be.true;
+    });
+    it("has a useful `value` - currency", async () => {
+      el.formatOptions = {
+        style: "currency",
+        currency: "EUR",
+        currencyDisplay: "code",
+        currencySign: "accounting",
+      };
+      await elementUpdated(el);
+      el.value = 45;
+      expect(el.value).to.equal(45);
+      el.focus();
+      await sendKeys({ type: "7" }); // Visible text: EUR 45.007
+      expect(el.value).to.equal(45.007);
+      expect(inputSpy.calledWith(el.value), "first input").to.be.true;
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ press: "ArrowLeft" }); // Visible text: EUR 45.007
+      await sendKeys({ type: "1" }); // Visible text: 1EUR 45.007
+      await sendKeys({ press: "Enter" }); // Visible text: EUR 145.01
+      expect(el.value).to.equal(145.007);
+      expect(inputSpy.calledWith(145.007), "second input").to.be.true;
+      expect(changeSpy.calledWith(145.007), "change").to.be.true;
+    });
+    it("one input/one change for each Arrow*", async () => {
+      el.focus();
+      await sendKeys({ press: "ArrowUp" });
+      expect(inputSpy.callCount).to.equal(1);
+      expect(changeSpy.callCount).to.equal(1);
+      expect(el.value).to.equal(51);
+      await sendKeys({ press: "ArrowDown" });
+      expect(inputSpy.callCount).to.equal(2);
+      expect(changeSpy.callCount).to.equal(2);
+      expect(el.value).to.equal(50);
+    });
+    it("one input/one change for each click", async () => {
+      await clickBySelector(el, ".step-up");
+      expect(inputSpy.callCount).to.equal(1);
+      expect(changeSpy.callCount).to.equal(1);
+      expect(el.value).to.equal(51);
+      await clickBySelector(el, ".step-down");
+      expect(inputSpy.callCount).to.equal(2);
+      expect(changeSpy.callCount).to.equal(2);
+      expect(el.value).to.equal(50);
+    });
+    it("click with modifier key", async () => {
+      let target = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+      const stepUpRect = target.getBoundingClientRect();
+      const options = {
+        bubbles: true,
+        composed: true,
+        shiftKey: true,
+        clientX: stepUpRect.x + 1,
+        clientY: stepUpRect.y + 1,
+      };
 
-			(
-				el as unknown as {
-					buttons: HTMLDivElement;
-				}
-			).buttons.setPointerCapture = () => {
-				return;
-			};
-			(
-				el as unknown as {
-					buttons: HTMLDivElement;
-				}
-			).buttons.releasePointerCapture = () => {
-				return;
-			};
-			let input = oneEvent(el, "input");
+      (
+        el as unknown as {
+          buttons: HTMLDivElement;
+        }
+      ).buttons.setPointerCapture = () => {
+        return;
+      };
+      (
+        el as unknown as {
+          buttons: HTMLDivElement;
+        }
+      ).buttons.releasePointerCapture = () => {
+        return;
+      };
+      let input = oneEvent(el, "input");
 
-			target.dispatchEvent(new PointerEvent("pointerdown", options));
-			await input;
-			target.dispatchEvent(new PointerEvent("pointerup", options));
-			expect(inputSpy.callCount).to.equal(1);
-			expect(changeSpy.callCount).to.equal(1);
-			expect(el.value).to.equal(60);
-			target = el.shadowRoot.querySelector(".step-down") as HTMLElement;
-			const stepDownRect = target.getBoundingClientRect();
+      target.dispatchEvent(new PointerEvent("pointerdown", options));
+      await input;
+      target.dispatchEvent(new PointerEvent("pointerup", options));
+      expect(inputSpy.callCount).to.equal(1);
+      expect(changeSpy.callCount).to.equal(1);
+      expect(el.value).to.equal(60);
+      target = el.shadowRoot.querySelector(".step-down") as HTMLElement;
+      const stepDownRect = target.getBoundingClientRect();
 
-			options.clientX = stepDownRect.x + 1;
-			options.clientY = stepDownRect.y + 1;
-			input = oneEvent(el, "input");
-			target.dispatchEvent(new PointerEvent("pointerdown", options));
-			await input;
-			target.dispatchEvent(new PointerEvent("pointerup", options));
-			expect(inputSpy.callCount).to.equal(2);
-			expect(changeSpy.callCount).to.equal(2);
-			expect(el.value).to.equal(50);
-		});
-		it("many input, but one change", async () => {
-			const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
-			const buttonUpRect = buttonUp.getBoundingClientRect();
-			const buttonUpPosition: [number, number] = [
-				buttonUpRect.x + buttonUpRect.width / 2,
-				buttonUpRect.y + buttonUpRect.height / 2,
-			];
-			const buttonDown = el.shadowRoot.querySelector(
-				".step-down",
-			) as HTMLElement;
-			const buttonDownRect = buttonDown.getBoundingClientRect();
-			const buttonDownPosition: [number, number] = [
-				buttonDownRect.x + buttonDownRect.width / 2,
-				buttonDownRect.y + buttonDownRect.height / 2,
-			];
+      options.clientX = stepDownRect.x + 1;
+      options.clientY = stepDownRect.y + 1;
+      input = oneEvent(el, "input");
+      target.dispatchEvent(new PointerEvent("pointerdown", options));
+      await input;
+      target.dispatchEvent(new PointerEvent("pointerup", options));
+      expect(inputSpy.callCount).to.equal(2);
+      expect(changeSpy.callCount).to.equal(2);
+      expect(el.value).to.equal(50);
+    });
+    it("many input, but one change", async () => {
+      const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+      const buttonUpRect = buttonUp.getBoundingClientRect();
+      const buttonUpPosition: [number, number] = [
+        buttonUpRect.x + buttonUpRect.width / 2,
+        buttonUpRect.y + buttonUpRect.height / 2,
+      ];
+      const buttonDown = el.shadowRoot.querySelector(
+        ".step-down",
+      ) as HTMLElement;
+      const buttonDownRect = buttonDown.getBoundingClientRect();
+      const buttonDownPosition: [number, number] = [
+        buttonDownRect.x + buttonDownRect.width / 2,
+        buttonDownRect.y + buttonDownRect.height / 2,
+      ];
 
-			sendMouse({
-				steps: [
-					{
-						type: "move",
-						position: buttonUpPosition,
-					},
-					{
-						type: "down",
-					},
-				],
-			});
-			await oneEvent(el, "input");
-			expect(el.value).to.equal(51);
-			expect(inputSpy.callCount).to.equal(1);
-			expect(changeSpy.callCount).to.equal(0);
-			await oneEvent(el, "input");
-			expect(el.value).to.equal(52);
-			expect(inputSpy.callCount).to.equal(2);
-			expect(changeSpy.callCount).to.equal(0);
-			await oneEvent(el, "input");
-			expect(el.value).to.equal(53);
-			expect(inputSpy.callCount).to.equal(3);
-			expect(changeSpy.callCount).to.equal(0);
-			sendMouse({
-				steps: [
-					{
-						type: "move",
-						position: buttonDownPosition,
-					},
-				],
-			});
-			let framesToWait = FRAMES_PER_CHANGE * 2;
+      sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: buttonUpPosition,
+          },
+          {
+            type: "down",
+          },
+        ],
+      });
+      await oneEvent(el, "input");
+      expect(el.value).to.equal(51);
+      expect(inputSpy.callCount).to.equal(1);
+      expect(changeSpy.callCount).to.equal(0);
+      await oneEvent(el, "input");
+      expect(el.value).to.equal(52);
+      expect(inputSpy.callCount).to.equal(2);
+      expect(changeSpy.callCount).to.equal(0);
+      await oneEvent(el, "input");
+      expect(el.value).to.equal(53);
+      expect(inputSpy.callCount).to.equal(3);
+      expect(changeSpy.callCount).to.equal(0);
+      sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: buttonDownPosition,
+          },
+        ],
+      });
+      let framesToWait = FRAMES_PER_CHANGE * 2;
 
-			while (framesToWait) {
-				// input is only processed onces per FRAMES_PER_CHANGE number of frames
-				framesToWait -= 1;
-				await nextFrame();
-			}
-			expect(inputSpy.callCount).to.equal(5);
-			expect(changeSpy.callCount).to.equal(0);
-			await sendMouse({
-				steps: [
-					{
-						type: "up",
-					},
-				],
-			});
-			expect(inputSpy.callCount).to.equal(5);
-			expect(changeSpy.callCount).to.equal(1);
-		});
-		it("no change in committed value - using buttons", async () => {
-			const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
-			const buttonUpRect = buttonUp.getBoundingClientRect();
-			const buttonUpPosition: [number, number] = [
-				buttonUpRect.x + buttonUpRect.width / 2,
-				buttonUpRect.y + buttonUpRect.height / 2,
-			];
-			const buttonDown = el.shadowRoot.querySelector(
-				".step-down",
-			) as HTMLElement;
-			const buttonDownRect = buttonDown.getBoundingClientRect();
-			const buttonDownPosition: [number, number] = [
-				buttonDownRect.x + buttonDownRect.width / 2,
-				buttonDownRect.y + buttonDownRect.height / 2,
-			];
+      while (framesToWait) {
+        // input is only processed onces per FRAMES_PER_CHANGE number of frames
+        framesToWait -= 1;
+        await nextFrame();
+      }
+      expect(inputSpy.callCount).to.equal(5);
+      expect(changeSpy.callCount).to.equal(0);
+      await sendMouse({
+        steps: [
+          {
+            type: "up",
+          },
+        ],
+      });
+      expect(inputSpy.callCount).to.equal(5);
+      expect(changeSpy.callCount).to.equal(1);
+    });
+    it("no change in committed value - using buttons", async () => {
+      const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+      const buttonUpRect = buttonUp.getBoundingClientRect();
+      const buttonUpPosition: [number, number] = [
+        buttonUpRect.x + buttonUpRect.width / 2,
+        buttonUpRect.y + buttonUpRect.height / 2,
+      ];
+      const buttonDown = el.shadowRoot.querySelector(
+        ".step-down",
+      ) as HTMLElement;
+      const buttonDownRect = buttonDown.getBoundingClientRect();
+      const buttonDownPosition: [number, number] = [
+        buttonDownRect.x + buttonDownRect.width / 2,
+        buttonDownRect.y + buttonDownRect.height / 2,
+      ];
 
-			sendMouse({
-				steps: [
-					{
-						type: "move",
-						position: buttonUpPosition,
-					},
-					{
-						type: "down",
-					},
-				],
-			});
-			await oneEvent(el, "input");
-			expect(el.value).to.equal(51);
-			expect(inputSpy.callCount).to.equal(1);
-			expect(changeSpy.callCount).to.equal(0);
-			await oneEvent(el, "input");
-			expect(el.value).to.equal(52);
-			expect(inputSpy.callCount).to.equal(2);
-			expect(changeSpy.callCount).to.equal(0);
-			sendMouse({
-				steps: [
-					{
-						type: "move",
-						position: buttonDownPosition,
-					},
-				],
-			});
-			let framesToWait = FRAMES_PER_CHANGE * 2;
+      sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: buttonUpPosition,
+          },
+          {
+            type: "down",
+          },
+        ],
+      });
+      await oneEvent(el, "input");
+      expect(el.value).to.equal(51);
+      expect(inputSpy.callCount).to.equal(1);
+      expect(changeSpy.callCount).to.equal(0);
+      await oneEvent(el, "input");
+      expect(el.value).to.equal(52);
+      expect(inputSpy.callCount).to.equal(2);
+      expect(changeSpy.callCount).to.equal(0);
+      sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: buttonDownPosition,
+          },
+        ],
+      });
+      let framesToWait = FRAMES_PER_CHANGE * 2;
 
-			while (framesToWait) {
-				// input is only processed onces per FRAMES_PER_CHANGE number of frames
-				framesToWait -= 1;
-				await nextFrame();
-			}
-			expect(inputSpy.callCount).to.equal(4);
-			expect(changeSpy.callCount).to.equal(0);
-			await sendMouse({
-				steps: [
-					{
-						type: "up",
-					},
-				],
-			});
-			expect(inputSpy.callCount).to.equal(4);
-			expect(
-				changeSpy.callCount,
-				'value does not change from initial value so no "change" event is dispatched',
-			).to.equal(0);
-		});
-	});
-	it("accepts pointer interactions with the stepper UI", async () => {
-		const inputSpy = spy();
-		const el = await getElFrom(Default({ value: 50 }));
+      while (framesToWait) {
+        // input is only processed onces per FRAMES_PER_CHANGE number of frames
+        framesToWait -= 1;
+        await nextFrame();
+      }
+      expect(inputSpy.callCount).to.equal(4);
+      expect(changeSpy.callCount).to.equal(0);
+      await sendMouse({
+        steps: [
+          {
+            type: "up",
+          },
+        ],
+      });
+      expect(inputSpy.callCount).to.equal(4);
+      expect(
+        changeSpy.callCount,
+        'value does not change from initial value so no "change" event is dispatched',
+      ).to.equal(0);
+    });
+  });
+  it("accepts pointer interactions with the stepper UI", async () => {
+    const inputSpy = spy();
+    const el = await getElFrom(Default({ value: 50 }));
 
-		el.addEventListener("input", () => inputSpy());
-		expect(el.formattedValue).to.equal("50");
-		expect(el.valueAsString).to.equal("50");
-		expect(el.value).to.equal(50);
-		const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
-		const buttonUpRect = buttonUp.getBoundingClientRect();
-		const buttonUpPosition: [number, number] = [
-			buttonUpRect.x + buttonUpRect.width / 2,
-			buttonUpRect.y + buttonUpRect.height / 2,
-		];
-		const buttonDown = el.shadowRoot.querySelector(".step-down") as HTMLElement;
-		const buttonDownRect = buttonDown.getBoundingClientRect();
-		const buttonDownPosition: [number, number] = [
-			buttonDownRect.x + buttonDownRect.width / 2,
-			buttonDownRect.y + buttonDownRect.height / 2,
-		];
-		const outsidePosition: [number, number] = [
-			buttonDownRect.x + buttonDownRect.width + 5,
-			buttonDownRect.y + buttonDownRect.height + 5,
-		];
+    el.addEventListener("input", () => inputSpy());
+    expect(el.formattedValue).to.equal("50");
+    expect(el.valueAsString).to.equal("50");
+    expect(el.value).to.equal(50);
+    const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+    const buttonUpRect = buttonUp.getBoundingClientRect();
+    const buttonUpPosition: [number, number] = [
+      buttonUpRect.x + buttonUpRect.width / 2,
+      buttonUpRect.y + buttonUpRect.height / 2,
+    ];
+    const buttonDown = el.shadowRoot.querySelector(".step-down") as HTMLElement;
+    const buttonDownRect = buttonDown.getBoundingClientRect();
+    const buttonDownPosition: [number, number] = [
+      buttonDownRect.x + buttonDownRect.width / 2,
+      buttonDownRect.y + buttonDownRect.height / 2,
+    ];
+    const outsidePosition: [number, number] = [
+      buttonDownRect.x + buttonDownRect.width + 5,
+      buttonDownRect.y + buttonDownRect.height + 5,
+    ];
 
-		await sendMouse({
-			steps: [
-				{
-					type: "move",
-					position: buttonUpPosition,
-				},
-				{
-					type: "down",
-				},
-			],
-		});
-		await oneEvent(el, "input");
-		let value = 50 + inputSpy.callCount;
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: buttonUpPosition,
+        },
+        {
+          type: "down",
+        },
+      ],
+    });
+    await oneEvent(el, "input");
+    let value = 50 + inputSpy.callCount;
 
-		expect(el.formattedValue).to.equal(String(value));
-		expect(el.valueAsString).to.equal(String(value));
-		expect(el.value).to.equal(value);
-		inputSpy.resetHistory();
-		await sendMouse({
-			steps: [
-				{
-					type: "move",
-					position: buttonDownPosition,
-				},
-			],
-		});
-		value = value - inputSpy.callCount;
-		expect(el.formattedValue).to.equal(String(value));
-		expect(el.valueAsString).to.equal(String(value));
-		expect(el.value).to.equal(value);
-		inputSpy.resetHistory();
-		await sendMouse({
-			steps: [
-				{
-					type: "move",
-					position: outsidePosition,
-				},
-			],
-		});
-		value = value - inputSpy.callCount;
-		expect(el.formattedValue).to.equal(String(value));
-		expect(el.valueAsString).to.equal(String(value));
-		expect(el.value).to.equal(value);
-		inputSpy.resetHistory();
-		await oneEvent(el, "input");
-		value = value - inputSpy.callCount;
-		expect(el.formattedValue).to.equal(String(value));
-		expect(el.valueAsString).to.equal(String(value));
-		expect(el.value).to.equal(value);
-		inputSpy.resetHistory();
-		await sendMouse({
-			steps: [
-				{
-					type: "up",
-				},
-			],
-		});
-		let framesToWait = FRAMES_PER_CHANGE;
+    expect(el.formattedValue).to.equal(String(value));
+    expect(el.valueAsString).to.equal(String(value));
+    expect(el.value).to.equal(value);
+    inputSpy.resetHistory();
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: buttonDownPosition,
+        },
+      ],
+    });
+    value = value - inputSpy.callCount;
+    expect(el.formattedValue).to.equal(String(value));
+    expect(el.valueAsString).to.equal(String(value));
+    expect(el.value).to.equal(value);
+    inputSpy.resetHistory();
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: outsidePosition,
+        },
+      ],
+    });
+    value = value - inputSpy.callCount;
+    expect(el.formattedValue).to.equal(String(value));
+    expect(el.valueAsString).to.equal(String(value));
+    expect(el.value).to.equal(value);
+    inputSpy.resetHistory();
+    await oneEvent(el, "input");
+    value = value - inputSpy.callCount;
+    expect(el.formattedValue).to.equal(String(value));
+    expect(el.valueAsString).to.equal(String(value));
+    expect(el.value).to.equal(value);
+    inputSpy.resetHistory();
+    await sendMouse({
+      steps: [
+        {
+          type: "up",
+        },
+      ],
+    });
+    let framesToWait = FRAMES_PER_CHANGE;
 
-		while (framesToWait) {
-			// input is only processed onces per FRAMES_PER_CHANGE number of frames
-			framesToWait -= 1;
-			await nextFrame();
-		}
-		await elementUpdated(el);
-		value = value - inputSpy.callCount;
-		expect(el.formattedValue).to.equal(String(value));
-		expect(el.valueAsString).to.equal(String(value));
-		expect(el.value).to.equal(value);
-	});
-	it("surfaces `valueAsNumber`", async () => {
-		const el = await getElFrom(Default({}));
+    while (framesToWait) {
+      // input is only processed onces per FRAMES_PER_CHANGE number of frames
+      framesToWait -= 1;
+      await nextFrame();
+    }
+    await elementUpdated(el);
+    value = value - inputSpy.callCount;
+    expect(el.formattedValue).to.equal(String(value));
+    expect(el.valueAsString).to.equal(String(value));
+    expect(el.value).to.equal(value);
+  });
+  it("surfaces `valueAsNumber`", async () => {
+    const el = await getElFrom(Default({}));
 
-		el.value = 1000;
-		await elementUpdated(el);
-		expect(el.formattedValue).to.equal("1,000");
-		expect(el.valueAsString).to.equal("1000");
-		expect(el.value).to.equal(1000);
-		el.valueAsString = "2222";
-		await elementUpdated(el);
-		expect(el.formattedValue).to.equal("2,222");
-		expect(el.valueAsString).to.equal("2222");
-		expect(el.value).to.equal(2222);
-	});
-	describe("manages `value` with `formatOptions`", () => {
-		it("manages decimals", async () => {
-			const el = await getElFrom(decimals({ value: 1.333333 }));
+    el.value = 1000;
+    await elementUpdated(el);
+    expect(el.formattedValue).to.equal("1,000");
+    expect(el.valueAsString).to.equal("1000");
+    expect(el.value).to.equal(1000);
+    el.valueAsString = "2222";
+    await elementUpdated(el);
+    expect(el.formattedValue).to.equal("2,222");
+    expect(el.valueAsString).to.equal("2222");
+    expect(el.value).to.equal(2222);
+  });
+  describe("manages `value` with `formatOptions`", () => {
+    it("manages decimals", async () => {
+      const el = await getElFrom(decimals({ value: 1.333333 }));
 
-			expect(el.value).to.equal(1.33);
-			expect(el.formattedValue).to.equal("+1.33");
-			expect(el.valueAsString).to.equal("1.33");
-		});
-		it("manages precents", async () => {
-			const el = await getElFrom(percents({ value: 0.45 }));
+      expect(el.value).to.equal(1.33);
+      expect(el.formattedValue).to.equal("+1.33");
+      expect(el.valueAsString).to.equal("1.33");
+    });
+    it("manages precents", async () => {
+      const el = await getElFrom(percents({ value: 0.45 }));
 
-			expect(el.formattedValue).to.equal("45%");
-			expect(el.valueAsString).to.equal("0.45");
-			expect(el.value).to.equal(0.45);
-			await clickBySelector(el, ".step-down");
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("44%");
-			expect(el.valueAsString).to.equal("0.44");
-			expect(el.value).to.equal(0.44);
-			await clickBySelector(el, ".step-up");
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("45%");
-			expect(el.valueAsString).to.equal("0.45");
-			expect(el.value).to.equal(0.45);
-			el.focus();
-			el.value = 0;
-			await sendKeys({ type: "54" });
-			await sendKeys({ press: "Enter" });
-			expect(el.formattedValue).to.equal("54%");
-			expect(el.valueAsString).to.equal("0.54");
-			expect(el.value).to.equal(0.54);
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("54%");
-			expect(el.valueAsString).to.equal("0.54");
-			expect(el.value).to.equal(0.54);
-		});
-		it("manages currency", async () => {
-			const el = await getElFrom(currency({ value: 234.21 }));
+      expect(el.formattedValue).to.equal("45%");
+      expect(el.valueAsString).to.equal("0.45");
+      expect(el.value).to.equal(0.45);
+      await clickBySelector(el, ".step-down");
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("44%");
+      expect(el.valueAsString).to.equal("0.44");
+      expect(el.value).to.equal(0.44);
+      await clickBySelector(el, ".step-up");
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("45%");
+      expect(el.valueAsString).to.equal("0.45");
+      expect(el.value).to.equal(0.45);
+      el.focus();
+      el.value = 0;
+      await sendKeys({ type: "54" });
+      await sendKeys({ press: "Enter" });
+      expect(el.formattedValue).to.equal("54%");
+      expect(el.valueAsString).to.equal("0.54");
+      expect(el.value).to.equal(0.54);
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("54%");
+      expect(el.valueAsString).to.equal("0.54");
+      expect(el.value).to.equal(0.54);
+    });
+    it("manages currency", async () => {
+      const el = await getElFrom(currency({ value: 234.21 }));
 
-			expect(el.formattedValue).to.equal("EUR 234.21");
-			expect(el.valueAsString).to.equal("234.21");
-			expect(el.value).to.equal(234.21);
-		});
-		it("manages units", async () => {
-			const el = await getElFrom(units({ value: 17 }));
+      expect(el.formattedValue).to.equal("EUR 234.21");
+      expect(el.valueAsString).to.equal("234.21");
+      expect(el.value).to.equal(234.21);
+    });
+    it("manages units", async () => {
+      const el = await getElFrom(units({ value: 17 }));
 
-			expect(el.formattedValue).to.equal("17 inches");
-			expect(el.valueAsString).to.equal("17");
-			expect(el.value).to.equal(17);
-		});
-		it("does not select all on click based `focus`", async function () {
-			this.retries(0);
-			const modifier = isMac() ? "Meta" : "Control";
-			const el = await getElFrom(units({ value: 17 }));
+      expect(el.formattedValue).to.equal("17 inches");
+      expect(el.valueAsString).to.equal("17");
+      expect(el.value).to.equal(17);
+    });
+    it("does not select all on click based `focus`", async function () {
+      this.retries(0);
+      const modifier = isMac() ? "Meta" : "Control";
+      const el = await getElFrom(units({ value: 17 }));
 
-			expect(el.value).to.equal(17);
-			const rect = el.focusElement.getBoundingClientRect();
+      expect(el.value).to.equal(17);
+      const rect = el.focusElement.getBoundingClientRect();
 
-			await sendMouse({
-				steps: [
-					{
-						type: "click",
-						position: [rect.left + rect.width / 8, rect.top + rect.height / 2],
-					},
-				],
-			});
-			await nextFrame();
-			await nextFrame();
-			await nextFrame();
-			await nextFrame();
-			await elementUpdated(el);
-			expect(el.focused).to.be.true;
-			await sendKeys({
-				press: `${modifier}+KeyC`,
-			});
-			await nextFrame();
-			await nextFrame();
-			await elementUpdated(el);
-			await sendKeys({
-				press: "ArrowRight",
-			});
-			await nextFrame();
-			await nextFrame();
-			await elementUpdated(el);
-			await sendKeys({
-				press: `${modifier}+KeyV`,
-			});
-			await nextFrame();
-			await nextFrame();
-			await elementUpdated(el);
-			expect(el.value, "copy/paste changed the value").to.equal(17);
-		});
-		it("selects all on `Tab` based `focus`", async function () {
-			this.retries(0);
-			const modifier = isMac() ? "Meta" : "Control";
-			const el = await getElFrom(units({ value: 17 }));
-			const input = document.createElement("input");
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [rect.left + rect.width / 8, rect.top + rect.height / 2],
+          },
+        ],
+      });
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      await sendKeys({
+        press: `${modifier}+KeyC`,
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      await sendKeys({
+        press: "ArrowRight",
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      await sendKeys({
+        press: `${modifier}+KeyV`,
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      expect(el.value, "copy/paste changed the value").to.equal(17);
+    });
+    it("selects all on `Tab` based `focus`", async function () {
+      this.retries(0);
+      const modifier = isMac() ? "Meta" : "Control";
+      const el = await getElFrom(units({ value: 17 }));
+      const input = document.createElement("input");
 
-			el.insertAdjacentElement("beforebegin", input);
-			input.focus();
-			await sendKeys({
-				press: "Tab",
-			});
-			await nextFrame();
-			await nextFrame();
-			await nextFrame();
-			await nextFrame();
-			await elementUpdated(el);
-			expect(el.focused).to.be.true;
-			await sendKeys({
-				press: `${modifier}+KeyC`,
-			});
-			await nextFrame();
-			await nextFrame();
-			await elementUpdated(el);
-			await sendKeys({
-				press: "ArrowRight",
-			});
-			await nextFrame();
-			await nextFrame();
-			await elementUpdated(el);
-			await sendKeys({
-				press: `${modifier}+KeyV`,
-			});
-			await nextFrame();
-			await nextFrame();
-			await elementUpdated(el);
-			expect(el.value, "copy/paste did not change the value").to.equal(1717);
-		});
-		it("manages units not supported by the browser", async () => {
-			const el = await getElFrom(pixels({ value: 17 }));
+      el.insertAdjacentElement("beforebegin", input);
+      input.focus();
+      await sendKeys({
+        press: "Tab",
+      });
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      expect(el.focused).to.be.true;
+      await sendKeys({
+        press: `${modifier}+KeyC`,
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      await sendKeys({
+        press: "ArrowRight",
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      await sendKeys({
+        press: `${modifier}+KeyV`,
+      });
+      await nextFrame();
+      await nextFrame();
+      await elementUpdated(el);
+      expect(el.value, "copy/paste did not change the value").to.equal(1717);
+    });
+    it("manages units not supported by the browser", async () => {
+      const el = await getElFrom(pixels({ value: 17 }));
 
-			expect(el.formattedValue).to.equal("17px");
-			expect(el.valueAsString).to.equal("17");
-			expect(el.value).to.equal(17);
-		});
-	});
-	describe("max", () => {
-		let el: NumberField;
-		let lastInputValue = 0;
-		let lastChangeValue = 0;
-		const inputSpy = spy();
-		const changeSpy = spy();
+      expect(el.formattedValue).to.equal("17px");
+      expect(el.valueAsString).to.equal("17");
+      expect(el.value).to.equal(17);
+    });
+  });
+  describe("max", () => {
+    let el: NumberField;
+    let lastInputValue = 0;
+    let lastChangeValue = 0;
+    const inputSpy = spy();
+    const changeSpy = spy();
 
-		beforeEach(async () => {
-			inputSpy.resetHistory();
-			changeSpy.resetHistory();
-			el = await getElFrom(
-				Default({
-					max: 10,
-					value: 10,
-					onInput: (value: number) => {
-						inputSpy(value);
-						lastInputValue = value;
-					},
-					onChange: (value: number) => {
-						changeSpy(value);
-						lastChangeValue = value;
-					},
-				}),
-			);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("constrains input", async () => {
-			el.focus();
-			await sendKeys({ type: "15" });
-			await sendKeys({ press: "Enter" });
-			await elementUpdated(el);
-			expect(lastInputValue, "last input value").to.equal(10);
-			expect(lastChangeValue, "last change value").to.equal(
-				0,
-				'value does not change from initial value so no "change" event is dispatched',
-			);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("constrains `value`", async () => {
-			el.value = 20;
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("constrains ArrowUp usage", async () => {
-			expect(el.value).to.equal(10);
-			el.focus();
-			await sendKeys({ press: "ArrowUp" });
-			expect(el.focusElement.value).to.equal("10");
-			await sendKeys({ press: "Shift+ArrowUp" });
-			expect(el.focusElement.value).to.equal("10");
-		});
-		it("constrains pointer usage", async () => {
-			expect(el.value).to.equal(10);
-			const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
-			const buttonUpRect = buttonUp.getBoundingClientRect();
-			const buttonUpPosition: [number, number] = [
-				buttonUpRect.x + buttonUpRect.width / 2,
-				buttonUpRect.y + buttonUpRect.height / 2,
-			];
+    beforeEach(async () => {
+      inputSpy.resetHistory();
+      changeSpy.resetHistory();
+      el = await getElFrom(
+        Default({
+          max: 10,
+          value: 10,
+          onInput: (value: number) => {
+            inputSpy(value);
+            lastInputValue = value;
+          },
+          onChange: (value: number) => {
+            changeSpy(value);
+            lastChangeValue = value;
+          },
+        }),
+      );
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("constrains input", async () => {
+      el.focus();
+      await sendKeys({ type: "15" });
+      await sendKeys({ press: "Enter" });
+      await elementUpdated(el);
+      expect(lastInputValue, "last input value").to.equal(10);
+      expect(lastChangeValue, "last change value").to.equal(
+        0,
+        'value does not change from initial value so no "change" event is dispatched',
+      );
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("constrains `value`", async () => {
+      el.value = 20;
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("constrains ArrowUp usage", async () => {
+      expect(el.value).to.equal(10);
+      el.focus();
+      await sendKeys({ press: "ArrowUp" });
+      expect(el.focusElement.value).to.equal("10");
+      await sendKeys({ press: "Shift+ArrowUp" });
+      expect(el.focusElement.value).to.equal("10");
+    });
+    it("constrains pointer usage", async () => {
+      expect(el.value).to.equal(10);
+      const buttonUp = el.shadowRoot.querySelector(".step-up") as HTMLElement;
+      const buttonUpRect = buttonUp.getBoundingClientRect();
+      const buttonUpPosition: [number, number] = [
+        buttonUpRect.x + buttonUpRect.width / 2,
+        buttonUpRect.y + buttonUpRect.height / 2,
+      ];
 
-			await sendMouse({
-				steps: [
-					{
-						type: "click",
-						position: buttonUpPosition,
-					},
-				],
-			});
-			expect(el.value).to.equal(10);
-		});
-		it("validates on commit", async () => {
-			el.focus();
-			await sendKeys({ type: "15" });
-			await sendKeys({ press: "Enter" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("disabled `stepUp` button", async () => {
-			await clickBySelector(el, ".step-up");
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("validates late", async () => {
-			el.max = 5;
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("5");
-			expect(el.valueAsString).to.equal("5");
-			expect(el.value).to.equal(5);
-		});
-		it("dispatches onchange on setting max value", async () => {
-			el.value = 5;
-			await elementUpdated(el);
-			expect(changeSpy.callCount).to.equal(0);
-			expect(el.value).to.equal(5);
-			el.focus();
-			await sendKeys({
-				press: "Backspace",
-			});
-			await sendKeys({
-				press: "1",
-			});
-			await sendKeys({
-				press: "5",
-			});
-			await sendKeys({
-				press: "Enter",
-			});
-			await elementUpdated(el);
-			expect(el.value).to.equal(10);
-			expect(inputSpy.callCount).to.equal(3);
-			expect(changeSpy.callCount).to.equal(1);
-			expect(lastChangeValue, "last change value").to.equal(10);
-		});
-	});
-	describe("min", () => {
-		let el: NumberField;
-		let lastInputValue = 0;
-		let lastChangeValue = 0;
-		const inputSpy = spy();
-		const changeSpy = spy();
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: buttonUpPosition,
+          },
+        ],
+      });
+      expect(el.value).to.equal(10);
+    });
+    it("validates on commit", async () => {
+      el.focus();
+      await sendKeys({ type: "15" });
+      await sendKeys({ press: "Enter" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("disabled `stepUp` button", async () => {
+      await clickBySelector(el, ".step-up");
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("validates late", async () => {
+      el.max = 5;
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("5");
+      expect(el.valueAsString).to.equal("5");
+      expect(el.value).to.equal(5);
+    });
+    it("dispatches onchange on setting max value", async () => {
+      el.value = 5;
+      await elementUpdated(el);
+      expect(changeSpy.callCount).to.equal(0);
+      expect(el.value).to.equal(5);
+      el.focus();
+      await sendKeys({
+        press: "Backspace",
+      });
+      await sendKeys({
+        press: "1",
+      });
+      await sendKeys({
+        press: "5",
+      });
+      await sendKeys({
+        press: "Enter",
+      });
+      await elementUpdated(el);
+      expect(el.value).to.equal(10);
+      expect(inputSpy.callCount).to.equal(3);
+      expect(changeSpy.callCount).to.equal(1);
+      expect(lastChangeValue, "last change value").to.equal(10);
+    });
+  });
+  describe("min", () => {
+    let el: NumberField;
+    let lastInputValue = 0;
+    let lastChangeValue = 0;
+    const inputSpy = spy();
+    const changeSpy = spy();
 
-		beforeEach(async () => {
-			inputSpy.resetHistory();
-			changeSpy.resetHistory();
-			el = await getElFrom(
-				Default({
-					min: 10,
-					value: 10,
-					onInput: (value: number) => {
-						inputSpy(value);
-						lastInputValue = value;
-					},
-					onChange: (value: number) => {
-						changeSpy(value);
-						lastChangeValue = value;
-					},
-				}),
-			);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("constrains input", async () => {
-			el.focus();
-			await sendKeys({ press: "Backspace" });
-			await sendKeys({ press: "Backspace" });
-			await sendKeys({ type: "5" });
-			await sendKeys({ press: "Enter" });
-			await elementUpdated(el);
-			expect(lastInputValue, "last input value").to.equal(10);
-			expect(lastChangeValue, "last change value").to.equal(
-				0,
-				'value does not change from initial value so no "change" event is dispatched',
-			);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-			el.focus();
-			await sendKeys({ press: "Backspace" });
-			await sendKeys({ press: "Backspace" });
-			await sendKeys({ type: "-2000" });
-			await sendKeys({ press: "Enter" });
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("dispatches onchange on setting min value", async () => {
-			el.value = 15;
-			await elementUpdated(el);
-			expect(changeSpy.callCount).to.equal(0);
-			expect(el.value).to.equal(15);
-			el.focus();
-			await sendKeys({
-				press: "Backspace",
-			});
-			await sendKeys({
-				press: "Backspace",
-			});
-			await sendKeys({
-				press: "5",
-			});
-			await sendKeys({
-				press: "Enter",
-			});
-			await elementUpdated(el);
-			expect(el.value).to.equal(10);
-			expect(inputSpy.callCount).to.equal(3);
-			expect(changeSpy.callCount).to.equal(1);
-			expect(lastChangeValue, "last change value").to.equal(10);
-		});
-		xit("manages `inputMode` in iPad", async () => {
-			// setUserAgent is not currently supported by Playwright
-			await setUserAgent(
-				"Mozilla/5.0 (iPad; CPU OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile15E148 Safari/604.1",
-			);
-			el.min = 0;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("numeric");
-			el.min = -10;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("numeric");
-			el.min = undefined;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("numeric");
-			el.formatOptions = {
-				minimumFractionDigits: 1,
-				maximumFractionDigits: 2,
-			};
-			el.min = 0;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("decimal");
-		});
-		xit("manages `inputMode` in iPhone", async () => {
-			// setUserAgent is not currently supported by Playwright
-			await setUserAgent(
-				"Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148",
-			);
-			el.min = 0;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("numeric");
-			el.min = -10;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("text");
-			el.min = undefined;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("text");
-			el.formatOptions = {
-				minimumFractionDigits: 1,
-				maximumFractionDigits: 2,
-			};
-			el.min = 0;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("decimal");
-		});
-		xit("manages `inputMode` in Android", async () => {
-			// setUserAgent is not currently supported by Playwright
-			await setUserAgent(
-				"Mozilla/5.0 (Linux; Android 10; SM-A205U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36",
-			);
-			el.min = 0;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("numeric");
-			el.min = -10;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("numeric");
-			el.min = undefined;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("numeric");
-			el.formatOptions = {
-				minimumFractionDigits: 1,
-				maximumFractionDigits: 2,
-			};
-			el.min = 0;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("decimal");
-			el.formatOptions = {
-				minimumFractionDigits: 1,
-				maximumFractionDigits: 2,
-			};
-			el.min = -10;
-			await elementUpdated(el);
-			expect(el.focusElement.inputMode).to.equal("numeric");
-		});
-		it("constrains `value`", async () => {
-			el.value = 0;
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("constrains ArrowDown usage", async () => {
-			el.min = 0;
-			el.value = 0;
-			expect(el.value).to.equal(0);
-			el.focus();
-			await sendKeys({ press: "ArrowDown" });
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			await sendKeys({ press: "Shift+ArrowDown" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-		});
-		it("constrains pointer usage", async () => {
-			el.min = 0;
-			el.value = 0;
-			await elementUpdated(el);
-			expect(el.value).to.equal(0);
-			const buttonDown = el.shadowRoot.querySelector(
-				".step-down",
-			) as HTMLElement;
-			const buttonDownRect = buttonDown.getBoundingClientRect();
-			const buttonDownPosition: [number, number] = [
-				buttonDownRect.x + buttonDownRect.width / 2,
-				buttonDownRect.y + buttonDownRect.height / 2,
-			];
+    beforeEach(async () => {
+      inputSpy.resetHistory();
+      changeSpy.resetHistory();
+      el = await getElFrom(
+        Default({
+          min: 10,
+          value: 10,
+          onInput: (value: number) => {
+            inputSpy(value);
+            lastInputValue = value;
+          },
+          onChange: (value: number) => {
+            changeSpy(value);
+            lastChangeValue = value;
+          },
+        }),
+      );
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("constrains input", async () => {
+      el.focus();
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ type: "5" });
+      await sendKeys({ press: "Enter" });
+      await elementUpdated(el);
+      expect(lastInputValue, "last input value").to.equal(10);
+      expect(lastChangeValue, "last change value").to.equal(
+        0,
+        'value does not change from initial value so no "change" event is dispatched',
+      );
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+      el.focus();
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ type: "-2000" });
+      await sendKeys({ press: "Enter" });
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("dispatches onchange on setting min value", async () => {
+      el.value = 15;
+      await elementUpdated(el);
+      expect(changeSpy.callCount).to.equal(0);
+      expect(el.value).to.equal(15);
+      el.focus();
+      await sendKeys({
+        press: "Backspace",
+      });
+      await sendKeys({
+        press: "Backspace",
+      });
+      await sendKeys({
+        press: "5",
+      });
+      await sendKeys({
+        press: "Enter",
+      });
+      await elementUpdated(el);
+      expect(el.value).to.equal(10);
+      expect(inputSpy.callCount).to.equal(3);
+      expect(changeSpy.callCount).to.equal(1);
+      expect(lastChangeValue, "last change value").to.equal(10);
+    });
+    xit("manages `inputMode` in iPad", async () => {
+      // setUserAgent is not currently supported by Playwright
+      await setUserAgent(
+        "Mozilla/5.0 (iPad; CPU OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile15E148 Safari/604.1",
+      );
+      el.min = 0;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("numeric");
+      el.min = -10;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("numeric");
+      el.min = undefined;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("numeric");
+      el.formatOptions = {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 2,
+      };
+      el.min = 0;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("decimal");
+    });
+    xit("manages `inputMode` in iPhone", async () => {
+      // setUserAgent is not currently supported by Playwright
+      await setUserAgent(
+        "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148",
+      );
+      el.min = 0;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("numeric");
+      el.min = -10;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("text");
+      el.min = undefined;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("text");
+      el.formatOptions = {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 2,
+      };
+      el.min = 0;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("decimal");
+    });
+    xit("manages `inputMode` in Android", async () => {
+      // setUserAgent is not currently supported by Playwright
+      await setUserAgent(
+        "Mozilla/5.0 (Linux; Android 10; SM-A205U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36",
+      );
+      el.min = 0;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("numeric");
+      el.min = -10;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("numeric");
+      el.min = undefined;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("numeric");
+      el.formatOptions = {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 2,
+      };
+      el.min = 0;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("decimal");
+      el.formatOptions = {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 2,
+      };
+      el.min = -10;
+      await elementUpdated(el);
+      expect(el.focusElement.inputMode).to.equal("numeric");
+    });
+    it("constrains `value`", async () => {
+      el.value = 0;
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("constrains ArrowDown usage", async () => {
+      el.min = 0;
+      el.value = 0;
+      expect(el.value).to.equal(0);
+      el.focus();
+      await sendKeys({ press: "ArrowDown" });
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      await sendKeys({ press: "Shift+ArrowDown" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+    });
+    it("constrains pointer usage", async () => {
+      el.min = 0;
+      el.value = 0;
+      await elementUpdated(el);
+      expect(el.value).to.equal(0);
+      const buttonDown = el.shadowRoot.querySelector(
+        ".step-down",
+      ) as HTMLElement;
+      const buttonDownRect = buttonDown.getBoundingClientRect();
+      const buttonDownPosition: [number, number] = [
+        buttonDownRect.x + buttonDownRect.width / 2,
+        buttonDownRect.y + buttonDownRect.height / 2,
+      ];
 
-			await sendMouse({
-				steps: [
-					{
-						type: "click",
-						position: buttonDownPosition,
-					},
-				],
-			});
-			await elementUpdated(el);
-			expect(el.value).to.equal(0);
-		});
-		it("validates on commit", async () => {
-			el.focus();
-			await sendKeys({ press: "0" });
-			await sendKeys({ press: "Enter" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("100");
-			expect(el.valueAsString).to.equal("100");
-			expect(el.value).to.equal(100);
-		});
-		it("disabled `stepDown` button", async () => {
-			await clickBySelector(el, ".step-down");
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("validates late", async () => {
-			el.min = 15;
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("15");
-			expect(el.valueAsString).to.equal("15");
-			expect(el.value).to.equal(15);
-		});
-	});
-	describe("step", () => {
-		let el: NumberField;
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: buttonDownPosition,
+          },
+        ],
+      });
+      await elementUpdated(el);
+      expect(el.value).to.equal(0);
+    });
+    it("validates on commit", async () => {
+      el.focus();
+      await sendKeys({ press: "0" });
+      await sendKeys({ press: "Enter" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("100");
+      expect(el.valueAsString).to.equal("100");
+      expect(el.value).to.equal(100);
+    });
+    it("disabled `stepDown` button", async () => {
+      await clickBySelector(el, ".step-down");
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("validates late", async () => {
+      el.min = 15;
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("15");
+      expect(el.valueAsString).to.equal("15");
+      expect(el.value).to.equal(15);
+    });
+  });
+  describe("step", () => {
+    let el: NumberField;
 
-		beforeEach(async () => {
-			el = await getElFrom(Default({ value: 10, step: 5 }));
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("via arrow up", async () => {
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("15");
-			expect(el.valueAsString).to.equal("15");
-			expect(el.value).to.equal(15);
-		});
-		it("via arrow down", async () => {
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowDown" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("5");
-			expect(el.valueAsString).to.equal("5");
-			expect(el.value).to.equal(5);
-		});
-		it("step up via pointer", async () => {
-			await clickBySelector(el, ".step-up");
-			expect(el.formattedValue).to.equal("15");
-			expect(el.valueAsString).to.equal("15");
-			expect(el.value).to.equal(15);
-		});
-		it("step down via pointer", async () => {
-			await clickBySelector(el, ".step-down");
-			expect(el.formattedValue).to.equal("5");
-			expect(el.valueAsString).to.equal("5");
-			expect(el.value).to.equal(5);
-		});
-	});
-	describe("step + constraints", () => {
-		let el: NumberField;
+    beforeEach(async () => {
+      el = await getElFrom(Default({ value: 10, step: 5 }));
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("via arrow up", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("15");
+      expect(el.valueAsString).to.equal("15");
+      expect(el.value).to.equal(15);
+    });
+    it("via arrow down", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowDown" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("5");
+      expect(el.valueAsString).to.equal("5");
+      expect(el.value).to.equal(5);
+    });
+    it("step up via pointer", async () => {
+      await clickBySelector(el, ".step-up");
+      expect(el.formattedValue).to.equal("15");
+      expect(el.valueAsString).to.equal("15");
+      expect(el.value).to.equal(15);
+    });
+    it("step down via pointer", async () => {
+      await clickBySelector(el, ".step-down");
+      expect(el.formattedValue).to.equal("5");
+      expect(el.valueAsString).to.equal("5");
+      expect(el.value).to.equal(5);
+    });
+  });
+  describe("step + constraints", () => {
+    let el: NumberField;
 
-		beforeEach(async () => {
-			el = await getElFrom(Default({ step: 5 }));
-			expect(el.formattedValue).to.equal("");
-			expect(el.valueAsString).to.equal("NaN");
-			expect(el.value).to.be.NaN;
-		});
-		it("steps", async () => {
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("0");
-			expect(el.valueAsString).to.equal("0");
-			expect(el.value).to.equal(0);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("5");
-			expect(el.valueAsString).to.equal("5");
-			expect(el.value).to.equal(5);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-		});
-		it("steps from min", async () => {
-			el.min = 5;
-			await elementUpdated(el);
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("5");
-			expect(el.valueAsString).to.equal("5");
-			expect(el.value).to.equal(5);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("10");
-			expect(el.valueAsString).to.equal("10");
-			expect(el.value).to.equal(10);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("15");
-			expect(el.valueAsString).to.equal("15");
-			expect(el.value).to.equal(15);
-		});
-		it("steps from mismatched min", async () => {
-			el.min = 2;
-			await elementUpdated(el);
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("2");
-			expect(el.valueAsString).to.equal("2");
-			expect(el.value).to.equal(2);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("7");
-			expect(el.valueAsString).to.equal("7");
-			expect(el.value).to.equal(7);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("12");
-			expect(el.valueAsString).to.equal("12");
-			expect(el.value).to.equal(12);
-		});
-		it("steps to mismatched max", async () => {
-			el.min = 2;
-			el.max = 10;
-			await elementUpdated(el);
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("2");
-			expect(el.valueAsString).to.equal("2");
-			expect(el.value).to.equal(2);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("7");
-			expect(el.valueAsString).to.equal("7");
-			expect(el.value).to.equal(7);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("7");
-			expect(el.valueAsString).to.equal("7");
-			expect(el.value).to.equal(7);
-		});
-		it("validates max + step", async () => {
-			el.value = 2;
-			el.min = 2;
-			el.max = 10;
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("2");
-			expect(el.valueAsString).to.equal("2");
-			expect(el.value).to.equal(2);
-			el.value = 11;
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("7");
-			expect(el.valueAsString).to.equal("7");
-			expect(el.value).to.equal(7);
-			el.value = 27;
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("7");
-			expect(el.valueAsString).to.equal("7");
-			expect(el.value).to.equal(7);
-		});
-	});
-	describe("indeterminate", () => {
-		let el: NumberField;
+    beforeEach(async () => {
+      el = await getElFrom(Default({ step: 5 }));
+      expect(el.formattedValue).to.equal("");
+      expect(el.valueAsString).to.equal("NaN");
+      expect(el.value).to.be.NaN;
+    });
+    it("steps", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("0");
+      expect(el.valueAsString).to.equal("0");
+      expect(el.value).to.equal(0);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("5");
+      expect(el.valueAsString).to.equal("5");
+      expect(el.value).to.equal(5);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+    });
+    it("steps from min", async () => {
+      el.min = 5;
+      await elementUpdated(el);
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("5");
+      expect(el.valueAsString).to.equal("5");
+      expect(el.value).to.equal(5);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("10");
+      expect(el.valueAsString).to.equal("10");
+      expect(el.value).to.equal(10);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("15");
+      expect(el.valueAsString).to.equal("15");
+      expect(el.value).to.equal(15);
+    });
+    it("steps from mismatched min", async () => {
+      el.min = 2;
+      await elementUpdated(el);
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("2");
+      expect(el.valueAsString).to.equal("2");
+      expect(el.value).to.equal(2);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("7");
+      expect(el.valueAsString).to.equal("7");
+      expect(el.value).to.equal(7);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("12");
+      expect(el.valueAsString).to.equal("12");
+      expect(el.value).to.equal(12);
+    });
+    it("steps to mismatched max", async () => {
+      el.min = 2;
+      el.max = 10;
+      await elementUpdated(el);
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("2");
+      expect(el.valueAsString).to.equal("2");
+      expect(el.value).to.equal(2);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("7");
+      expect(el.valueAsString).to.equal("7");
+      expect(el.value).to.equal(7);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("7");
+      expect(el.valueAsString).to.equal("7");
+      expect(el.value).to.equal(7);
+    });
+    it("validates max + step", async () => {
+      el.value = 2;
+      el.min = 2;
+      el.max = 10;
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("2");
+      expect(el.valueAsString).to.equal("2");
+      expect(el.value).to.equal(2);
+      el.value = 11;
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("7");
+      expect(el.valueAsString).to.equal("7");
+      expect(el.value).to.equal(7);
+      el.value = 27;
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("7");
+      expect(el.valueAsString).to.equal("7");
+      expect(el.value).to.equal(7);
+    });
+  });
+  describe("indeterminate", () => {
+    let el: NumberField;
 
-		beforeEach(async () => {
-			el = await getElFrom(indeterminate(indeterminate.args));
-			expect(el.formattedValue).to.equal("100");
-			expect(el.valueAsString).to.equal("100");
-			expect(el.value).to.equal(100);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				indeterminatePlaceholder,
-			);
-		});
-		it('remove "-" on focus', async () => {
-			el.focus();
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("100");
-			expect(el.valueAsString).to.equal("100");
-			expect(el.value).to.equal(100);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"",
-			);
-			el.blur();
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("100");
-			expect(el.valueAsString).to.equal("100");
-			expect(el.value).to.equal(100);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				indeterminatePlaceholder,
-			);
-		});
-		it('return to "-" after suplied value is removed', async () => {
-			el.focus();
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("100");
-			expect(el.valueAsString).to.equal("100");
-			expect(el.value).to.equal(100);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"",
-			);
-			await sendKeys({ type: "50" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("50");
-			expect(el.valueAsString).to.equal("50");
-			expect(el.value).to.equal(50);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"50",
-			);
-			await sendKeys({ press: "Backspace" });
-			await sendKeys({ press: "Backspace" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("100");
-			expect(el.valueAsString).to.equal("100");
-			expect(el.value).to.equal(100);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"",
-			);
-			el.blur();
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("100");
-			expect(el.valueAsString).to.equal("100");
-			expect(el.value).to.equal(100);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				indeterminatePlaceholder,
-			);
-		});
-		it('starts from `value` on "ArrowUp" keypresses', async () => {
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowUp" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("101");
-			expect(el.valueAsString).to.equal("101");
-			expect(el.value).to.equal(101);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"101",
-			);
-			el.blur();
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("101");
-			expect(el.valueAsString).to.equal("101");
-			expect(el.value).to.equal(101);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"101",
-			);
-		});
-		it("starts from `value` on click `.step-up`", async () => {
-			el.focus();
-			await elementUpdated(el);
-			await clickBySelector(el, ".step-up");
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("101");
-			expect(el.valueAsString).to.equal("101");
-			expect(el.value).to.equal(101);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"101",
-			);
-			el.blur();
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("101");
-			expect(el.valueAsString).to.equal("101");
-			expect(el.value).to.equal(101);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"101",
-			);
-		});
-		it('starts from `value` on "ArrowDown" keypresses', async () => {
-			el.focus();
-			await elementUpdated(el);
-			await sendKeys({ press: "ArrowDown" });
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("99");
-			expect(el.valueAsString).to.equal("99");
-			expect(el.value).to.equal(99);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"99",
-			);
-			el.blur();
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("99");
-			expect(el.valueAsString).to.equal("99");
-			expect(el.value).to.equal(99);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"99",
-			);
-		});
-		it("starts from `value` on click `.step-down`", async () => {
-			el.focus();
-			await elementUpdated(el);
-			await clickBySelector(el, ".step-down");
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("99");
-			expect(el.valueAsString).to.equal("99");
-			expect(el.value).to.equal(99);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"99",
-			);
-			el.blur();
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("99");
-			expect(el.valueAsString).to.equal("99");
-			expect(el.value).to.equal(99);
-			expect((el as unknown as { displayValue: string }).displayValue).to.equal(
-				"99",
-			);
-		});
-	});
-	it("removes the stepper UI with [hide-stepper]", async () => {
-		const el = await getElFrom(Default({ hideStepper: true }));
-		const stepUp = el.shadowRoot.querySelector(".step-up");
-		const stepDown = el.shadowRoot.querySelector(".step-down");
+    beforeEach(async () => {
+      el = await getElFrom(indeterminate(indeterminate.args));
+      expect(el.formattedValue).to.equal("100");
+      expect(el.valueAsString).to.equal("100");
+      expect(el.value).to.equal(100);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        indeterminatePlaceholder,
+      );
+    });
+    it('remove "-" on focus', async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("100");
+      expect(el.valueAsString).to.equal("100");
+      expect(el.value).to.equal(100);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "",
+      );
+      el.blur();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("100");
+      expect(el.valueAsString).to.equal("100");
+      expect(el.value).to.equal(100);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        indeterminatePlaceholder,
+      );
+    });
+    it('return to "-" after suplied value is removed', async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("100");
+      expect(el.valueAsString).to.equal("100");
+      expect(el.value).to.equal(100);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "",
+      );
+      await sendKeys({ type: "50" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("50");
+      expect(el.valueAsString).to.equal("50");
+      expect(el.value).to.equal(50);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "50",
+      );
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ press: "Backspace" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("100");
+      expect(el.valueAsString).to.equal("100");
+      expect(el.value).to.equal(100);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "",
+      );
+      el.blur();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("100");
+      expect(el.valueAsString).to.equal("100");
+      expect(el.value).to.equal(100);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        indeterminatePlaceholder,
+      );
+    });
+    it('starts from `value` on "ArrowUp" keypresses', async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowUp" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("101");
+      expect(el.valueAsString).to.equal("101");
+      expect(el.value).to.equal(101);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "101",
+      );
+      el.blur();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("101");
+      expect(el.valueAsString).to.equal("101");
+      expect(el.value).to.equal(101);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "101",
+      );
+    });
+    it("starts from `value` on click `.step-up`", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await clickBySelector(el, ".step-up");
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("101");
+      expect(el.valueAsString).to.equal("101");
+      expect(el.value).to.equal(101);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "101",
+      );
+      el.blur();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("101");
+      expect(el.valueAsString).to.equal("101");
+      expect(el.value).to.equal(101);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "101",
+      );
+    });
+    it('starts from `value` on "ArrowDown" keypresses', async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({ press: "ArrowDown" });
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("99");
+      expect(el.valueAsString).to.equal("99");
+      expect(el.value).to.equal(99);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "99",
+      );
+      el.blur();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("99");
+      expect(el.valueAsString).to.equal("99");
+      expect(el.value).to.equal(99);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "99",
+      );
+    });
+    it("starts from `value` on click `.step-down`", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await clickBySelector(el, ".step-down");
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("99");
+      expect(el.valueAsString).to.equal("99");
+      expect(el.value).to.equal(99);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "99",
+      );
+      el.blur();
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("99");
+      expect(el.valueAsString).to.equal("99");
+      expect(el.value).to.equal(99);
+      expect((el as unknown as { displayValue: string }).displayValue).to.equal(
+        "99",
+      );
+    });
+  });
+  it("removes the stepper UI with [hide-stepper]", async () => {
+    const el = await getElFrom(Default({ hideStepper: true }));
+    const stepUp = el.shadowRoot.querySelector(".step-up");
+    const stepDown = el.shadowRoot.querySelector(".step-down");
 
-		expect(stepUp).to.be.null;
-		expect(stepDown).to.be.null;
-	});
-	describe("Disabled", () => {
-		let el: NumberField;
+    expect(stepUp).to.be.null;
+    expect(stepDown).to.be.null;
+  });
+  describe("Disabled", () => {
+    let el: NumberField;
 
-		beforeEach(async () => {
-			el = await getElFrom(Default({ disabled: true, value: 1337 }));
-			expect(el.formattedValue).to.equal("1,337");
-			expect(el.valueAsString).to.equal("1337");
-			expect(el.value).to.equal(1337);
-			el.focus();
-			await elementUpdated(el);
-		});
-		afterEach(async () => {
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("1,337");
-			expect(el.valueAsString).to.equal("1337");
-			expect(el.value).to.equal(1337);
-		});
-		it("presents as `disabled`", async () => {
-			await sendKeys({ type: "12345" });
-			await elementUpdated(el);
-			await sendKeys({ press: "Enter" });
-		});
-		it("prevents increment via keyboard", async () => {
-			await sendKeys({ press: "ArrowUp" });
-		});
-		it("prevents decrement via keyboard", async () => {
-			await sendKeys({ press: "ArrowDown" });
-		});
-		it("prevents increment via scroll", async () => {
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
-		});
-		it("prevents decrement via scroll", async () => {
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
-		});
-		it("prevents increment via stepper button", async () => {
-			await clickBySelector(el, ".step-up");
-		});
-		it("prevents decrement via stepper button", async () => {
-			await clickBySelector(el, ".step-down");
-		});
-	});
-	describe("Readonly", () => {
-		let el: NumberField;
+    beforeEach(async () => {
+      el = await getElFrom(Default({ disabled: true, value: 1337 }));
+      expect(el.formattedValue).to.equal("1,337");
+      expect(el.valueAsString).to.equal("1337");
+      expect(el.value).to.equal(1337);
+      el.focus();
+      await elementUpdated(el);
+    });
+    afterEach(async () => {
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("1,337");
+      expect(el.valueAsString).to.equal("1337");
+      expect(el.value).to.equal(1337);
+    });
+    it("presents as `disabled`", async () => {
+      await sendKeys({ type: "12345" });
+      await elementUpdated(el);
+      await sendKeys({ press: "Enter" });
+    });
+    it("prevents increment via keyboard", async () => {
+      await sendKeys({ press: "ArrowUp" });
+    });
+    it("prevents decrement via keyboard", async () => {
+      await sendKeys({ press: "ArrowDown" });
+    });
+    it("prevents increment via scroll", async () => {
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
+    });
+    it("prevents decrement via scroll", async () => {
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
+    });
+    it("prevents increment via stepper button", async () => {
+      await clickBySelector(el, ".step-up");
+    });
+    it("prevents decrement via stepper button", async () => {
+      await clickBySelector(el, ".step-down");
+    });
+  });
+  describe("Readonly", () => {
+    let el: NumberField;
 
-		beforeEach(async () => {
-			el = await getElFrom(Default({ readonly: true, value: 1337 }));
-			expect(el.formattedValue).to.equal("1,337");
-			expect(el.valueAsString).to.equal("1337");
-			expect(el.value).to.equal(1337);
-			el.focus();
-			await elementUpdated(el);
-		});
-		afterEach(async () => {
-			await elementUpdated(el);
-			expect(el.formattedValue).to.equal("1,337");
-			expect(el.valueAsString).to.equal("1337");
-			expect(el.value).to.equal(1337);
-		});
-		it("presents as `readonly`", async () => {
-			await sendKeys({ type: "12345" });
-			await elementUpdated(el);
-			await sendKeys({ press: "Enter" });
-		});
-		it("prevents increment via keyboard", async () => {
-			await sendKeys({ press: "ArrowUp" });
-		});
-		it("prevents decrement via keyboard", async () => {
-			await sendKeys({ press: "ArrowDown" });
-		});
-		it("prevents increment via scroll", async () => {
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
-		});
-		it("prevents decrement via scroll", async () => {
-			el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
-		});
-		it("prevents increment via stepper button", async () => {
-			await clickBySelector(el, ".step-up");
-		});
-		it("prevents decrement via stepper button", async () => {
-			await clickBySelector(el, ".step-down");
-		});
-	});
-	describe("accessibility model", () => {
-		it("increment and decrement buttons cannot receive keyboard focus", async () => {
-			await fixture(html`
-				

-					${Default({
-						onChange: () => {
-							return;
-						},
-					})}
-				

-			`);
+    beforeEach(async () => {
+      el = await getElFrom(Default({ readonly: true, value: 1337 }));
+      expect(el.formattedValue).to.equal("1,337");
+      expect(el.valueAsString).to.equal("1337");
+      expect(el.value).to.equal(1337);
+      el.focus();
+      await elementUpdated(el);
+    });
+    afterEach(async () => {
+      await elementUpdated(el);
+      expect(el.formattedValue).to.equal("1,337");
+      expect(el.valueAsString).to.equal("1337");
+      expect(el.value).to.equal(1337);
+    });
+    it("presents as `readonly`", async () => {
+      await sendKeys({ type: "12345" });
+      await elementUpdated(el);
+      await sendKeys({ press: "Enter" });
+    });
+    it("prevents increment via keyboard", async () => {
+      await sendKeys({ press: "ArrowUp" });
+    });
+    it("prevents decrement via keyboard", async () => {
+      await sendKeys({ press: "ArrowDown" });
+    });
+    it("prevents increment via scroll", async () => {
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 }));
+    });
+    it("prevents decrement via scroll", async () => {
+      el.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
+    });
+    it("prevents increment via stepper button", async () => {
+      await clickBySelector(el, ".step-up");
+    });
+    it("prevents decrement via stepper button", async () => {
+      await clickBySelector(el, ".step-down");
+    });
+  });
+  describe("accessibility model", () => {
+    it("increment and decrement buttons cannot receive keyboard focus", async () => {
+      await fixture(html`
+        

+          ${Default({
+            onChange: () => {
+              return;
+            },
+          })}
+        

+      `);
 
-			type NamedNode = { name: string };
-			const snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-				children: NamedNode[];
-			};
+      type NamedNode = { name: string };
+      const snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
 
-			expect(
-				findAccessibilityNode(
-					snapshot,
-					(node) => node.name === "Increase Enter a number",
-				),
-				"`name` is the label text",
-			).to.be.null;
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Increase Enter a number",
+        ),
+        "`name` is the label text",
+      ).to.be.null;
 
-			expect(
-				findAccessibilityNode(
-					snapshot,
-					(node) => node.name === "Decrease Enter a number",
-				),
-				"`name` is the label text",
-			).to.be.null;
-		});
-	});
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Decrease Enter a number",
+        ),
+        "`name` is the label text",
+      ).to.be.null;
+    });
+  });
 });
diff --git a/packages/overlay/overlay-trigger.ts b/packages/overlay/overlay-trigger.ts
index 067e79221b..484817592e 100644
--- a/packages/overlay/overlay-trigger.ts
+++ b/packages/overlay/overlay-trigger.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
-import { OverlayTrigger } from './src/OverlayTrigger.js';
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+import { OverlayTrigger } from "./src/OverlayTrigger.js";
 
-defineElement('overlay-trigger', OverlayTrigger);
+defineElement("overlay-trigger", OverlayTrigger);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'overlay-trigger': OverlayTrigger;
-    }
+  interface HTMLElementTagNameMap {
+    "overlay-trigger": OverlayTrigger;
+  }
 }
diff --git a/packages/overlay/sp-overlay.ts b/packages/overlay/sp-overlay.ts
index bc0f0ae390..59659ef6a0 100644
--- a/packages/overlay/sp-overlay.ts
+++ b/packages/overlay/sp-overlay.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
-import { Overlay } from './src/Overlay.js';
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+import { Overlay } from "./src/Overlay.js";
 
-defineElement('sp-overlay', Overlay);
+defineElement("sp-overlay", Overlay);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-overlay': Overlay;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-overlay": Overlay;
+  }
 }
diff --git a/packages/overlay/src/AbstractOverlay.ts b/packages/overlay/src/AbstractOverlay.ts
index a4f7aa97a9..d5de050917 100644
--- a/packages/overlay/src/AbstractOverlay.ts
+++ b/packages/overlay/src/AbstractOverlay.ts
@@ -9,28 +9,28 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { SpectrumElement } from '@spectrum-web-components/base';
-import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';
+import { SpectrumElement } from "@spectrum-web-components/base";
+import { reparentChildren } from "@spectrum-web-components/shared/src/reparent-children.js";
 
 import type {
-    OpenableElement,
-    OverlayOptions,
-    OverlayOptionsV1,
-    OverlayState,
-    OverlayTypes,
-    Placement,
-    TriggerInteractionsV1,
-} from './overlay-types.js';
-import type { Overlay } from './Overlay.js';
-import type { VirtualTrigger } from './VirtualTrigger.js';
-import { OverlayTimer } from './overlay-timer.js';
-import type { PlacementController } from './PlacementController.js';
-import type { ElementResolutionController } from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';
+  OpenableElement,
+  OverlayOptions,
+  OverlayOptionsV1,
+  OverlayState,
+  OverlayTypes,
+  Placement,
+  TriggerInteractionsV1,
+} from "./overlay-types.js";
+import type { Overlay } from "./Overlay.js";
+import type { VirtualTrigger } from "./VirtualTrigger.js";
+import { OverlayTimer } from "./overlay-timer.js";
+import type { PlacementController } from "./PlacementController.js";
+import type { ElementResolutionController } from "@spectrum-web-components/reactive-controllers/src/ElementResolution.js";
 
 export const overlayTimer = new OverlayTimer();
 
 export const noop = (): void => {
-    return;
+  return;
 };
 
 /**
@@ -42,81 +42,81 @@ export const noop = (): void => {
  * @param cb - {Function} - Callback to trigger when the "transition" has ended.
  */
 export const guaranteedAllTransitionend = (
-    el: HTMLElement,
-    action: () => void,
-    cb: () => void
+  el: HTMLElement,
+  action: () => void,
+  cb: () => void,
 ): void => {
-    const abortController = new AbortController();
-    const runningTransitions = new Map();
-    const cleanup = (): void => {
-        abortController.abort();
-        cb();
-    };
-    let guarantee2: number;
-    let guarantee3: number;
-    // WebKit fires `transitionrun` a little earlier, the multiple guarantees here
-    // allow WebKit to be caught, but doesn't remove the animation listener until
-    // after it would have fired in Chromium.
-    const guarantee1 = requestAnimationFrame(() => {
-        guarantee2 = requestAnimationFrame(() => {
-            guarantee3 = requestAnimationFrame(() => {
-                cleanup();
-            });
-        });
+  const abortController = new AbortController();
+  const runningTransitions = new Map();
+  const cleanup = (): void => {
+    abortController.abort();
+    cb();
+  };
+  let guarantee2: number;
+  let guarantee3: number;
+  // WebKit fires `transitionrun` a little earlier, the multiple guarantees here
+  // allow WebKit to be caught, but doesn't remove the animation listener until
+  // after it would have fired in Chromium.
+  const guarantee1 = requestAnimationFrame(() => {
+    guarantee2 = requestAnimationFrame(() => {
+      guarantee3 = requestAnimationFrame(() => {
+        cleanup();
+      });
     });
-    const handleTransitionend = (event: TransitionEvent): void => {
-        if (event.target !== el) {
-            return;
-        }
+  });
+  const handleTransitionend = (event: TransitionEvent): void => {
+    if (event.target !== el) {
+      return;
+    }
 
-        runningTransitions.set(
-            event.propertyName,
-            (runningTransitions.get(event.propertyName) as number) - 1
-        );
+    runningTransitions.set(
+      event.propertyName,
+      (runningTransitions.get(event.propertyName) as number) - 1,
+    );
 
-        if (!runningTransitions.get(event.propertyName)) {
-            runningTransitions.delete(event.propertyName);
-        }
+    if (!runningTransitions.get(event.propertyName)) {
+      runningTransitions.delete(event.propertyName);
+    }
 
-        if (runningTransitions.size === 0) {
-            cleanup();
-        }
-    };
-    const handleTransitionrun = (event: TransitionEvent): void => {
-        if (event.target !== el) {
-            return;
-        }
+    if (runningTransitions.size === 0) {
+      cleanup();
+    }
+  };
+  const handleTransitionrun = (event: TransitionEvent): void => {
+    if (event.target !== el) {
+      return;
+    }
 
-        if (!runningTransitions.has(event.propertyName)) {
-            runningTransitions.set(event.propertyName, 0);
-        }
+    if (!runningTransitions.has(event.propertyName)) {
+      runningTransitions.set(event.propertyName, 0);
+    }
 
-        runningTransitions.set(
-            event.propertyName,
-            (runningTransitions.get(event.propertyName) as number) + 1
-        );
-        cancelAnimationFrame(guarantee1);
-        cancelAnimationFrame(guarantee2);
-        cancelAnimationFrame(guarantee3);
-    };
+    runningTransitions.set(
+      event.propertyName,
+      (runningTransitions.get(event.propertyName) as number) + 1,
+    );
+    cancelAnimationFrame(guarantee1);
+    cancelAnimationFrame(guarantee2);
+    cancelAnimationFrame(guarantee3);
+  };
 
-    el.addEventListener('transitionrun', handleTransitionrun, {
-        signal: abortController.signal,
-    });
-    el.addEventListener('transitionend', handleTransitionend, {
-        signal: abortController.signal,
-    });
-    el.addEventListener('transitioncancel', handleTransitionend, {
-        signal: abortController.signal,
-    });
-    action();
+  el.addEventListener("transitionrun", handleTransitionrun, {
+    signal: abortController.signal,
+  });
+  el.addEventListener("transitionend", handleTransitionend, {
+    signal: abortController.signal,
+  });
+  el.addEventListener("transitioncancel", handleTransitionend, {
+    signal: abortController.signal,
+  });
+  action();
 };
 
 /**
  *
  */
 export function nextFrame(): Promise {
-    return new Promise((res) => requestAnimationFrame(() => res()));
+  return new Promise((res) => requestAnimationFrame(() => res()));
 }
 
 /**
@@ -124,238 +124,231 @@ export function nextFrame(): Promise {
  * interfaces can be held separate from the actual class definition.
  */
 export class AbstractOverlay extends SpectrumElement {
-    protected async applyFocus(
-        _targetOpenState: boolean,
-        _focusEl: HTMLElement | null
-    ): Promise {
-        return;
-    }
-    /* c8 ignore next 6 */
-    get delayed(): boolean {
-        return false;
-    }
-    set delayed(_delayed: boolean) {
-        return;
-    }
-    dialogEl!: HTMLDialogElement & {
-        showPopover(): void;
-        hidePopover(): void;
-    };
-    /* c8 ignore next 6 */
-    get disabled(): boolean {
-        return false;
-    }
-    set disabled(_disabled: boolean) {
-        return;
-    }
-    dispose = noop;
-    protected get elementResolver(): ElementResolutionController {
-        return this._elementResolver;
-    }
-    protected set elementResolver(controller) {
-        this._elementResolver = controller;
-    }
-    protected _elementResolver!: ElementResolutionController;
-    /* c8 ignore next 3 */
-    protected async ensureOnDOM(_targetOpenState: boolean): Promise {
-        return;
-    }
-    elements!: OpenableElement[];
-    /* c8 ignore next 5 */
-    protected async makeTransition(
-        _targetOpenState: boolean
-    ): Promise {
-        return null;
-    }
-    protected async manageDelay(_targetOpenState: boolean): Promise {
-        return;
-    }
-    /* c8 ignore next 3 */
-    protected async manageDialogOpen(): Promise {
-        return;
-    }
-    /* c8 ignore next 3 */
-    protected async managePopoverOpen(): Promise {
-        return;
-    }
-    /* c8 ignore next 3 */
-    protected managePosition(): void {
-        return;
-    }
-    protected offset: number | [number, number] = 0;
-    /* c8 ignore next 6 */
-    get open(): boolean {
-        return false;
-    }
-    set open(_open: boolean) {
-        return;
-    }
-    placement?: Placement;
-    protected get placementController(): PlacementController {
-        return this._placementController;
-    }
-    protected set placementController(controller) {
-        this._placementController = controller;
-    }
-    protected _placementController!: PlacementController;
-    receivesFocus!: 'true' | 'false' | 'auto';
-    protected requestSlottable(): void {}
-    protected returnFocus(): void {
-        return;
-    }
-    /* c8 ignore next 6 */
-    get state(): OverlayState {
-        return 'closed';
-    }
-    set state(_state: OverlayState) {
-        return;
-    }
-    protected _state!: OverlayState;
-    triggerElement!: HTMLElement | VirtualTrigger | null;
-    type!: OverlayTypes;
-    willPreventClose = false;
-    /* c8 ignore next 3 */
-    public manuallyKeepOpen(): void {
-        return;
-    }
+  protected async applyFocus(
+    _targetOpenState: boolean,
+    _focusEl: HTMLElement | null,
+  ): Promise {
+    return;
+  }
+  /* c8 ignore next 6 */
+  get delayed(): boolean {
+    return false;
+  }
+  set delayed(_delayed: boolean) {
+    return;
+  }
+  dialogEl!: HTMLDialogElement & {
+    showPopover(): void;
+    hidePopover(): void;
+  };
+  /* c8 ignore next 6 */
+  get disabled(): boolean {
+    return false;
+  }
+  set disabled(_disabled: boolean) {
+    return;
+  }
+  dispose = noop;
+  protected get elementResolver(): ElementResolutionController {
+    return this._elementResolver;
+  }
+  protected set elementResolver(controller) {
+    this._elementResolver = controller;
+  }
+  protected _elementResolver!: ElementResolutionController;
+  /* c8 ignore next 3 */
+  protected async ensureOnDOM(_targetOpenState: boolean): Promise {
+    return;
+  }
+  elements!: OpenableElement[];
+  /* c8 ignore next 5 */
+  protected async makeTransition(
+    _targetOpenState: boolean,
+  ): Promise {
+    return null;
+  }
+  protected async manageDelay(_targetOpenState: boolean): Promise {
+    return;
+  }
+  /* c8 ignore next 3 */
+  protected async manageDialogOpen(): Promise {
+    return;
+  }
+  /* c8 ignore next 3 */
+  protected async managePopoverOpen(): Promise {
+    return;
+  }
+  /* c8 ignore next 3 */
+  protected managePosition(): void {
+    return;
+  }
+  protected offset: number | [number, number] = 0;
+  /* c8 ignore next 6 */
+  get open(): boolean {
+    return false;
+  }
+  set open(_open: boolean) {
+    return;
+  }
+  placement?: Placement;
+  protected get placementController(): PlacementController {
+    return this._placementController;
+  }
+  protected set placementController(controller) {
+    this._placementController = controller;
+  }
+  protected _placementController!: PlacementController;
+  receivesFocus!: "true" | "false" | "auto";
+  protected requestSlottable(): void {}
+  protected returnFocus(): void {
+    return;
+  }
+  /* c8 ignore next 6 */
+  get state(): OverlayState {
+    return "closed";
+  }
+  set state(_state: OverlayState) {
+    return;
+  }
+  protected _state!: OverlayState;
+  triggerElement!: HTMLElement | VirtualTrigger | null;
+  type!: OverlayTypes;
+  willPreventClose = false;
+  /* c8 ignore next 3 */
+  public manuallyKeepOpen(): void {
+    return;
+  }
 
-    public static update(): void {
-        const overlayUpdateEvent = new CustomEvent('sp-update-overlays', {
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-        });
+  public static update(): void {
+    const overlayUpdateEvent = new CustomEvent("sp-update-overlays", {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
 
-        document.dispatchEvent(overlayUpdateEvent);
-    }
+    document.dispatchEvent(overlayUpdateEvent);
+  }
 
+  /**
+   * Overloaded imperative API entry point that allows for both the pre-0.37.0
+   * argument signature as well as the post-0.37.0 signature. This allows for
+   * consumers to continue to leverage it as they had been in previous releases
+   * while also surfacing the more feature-rich API that has been made available.
+   */
+  public static async open(
+    trigger: HTMLElement,
+    interaction: TriggerInteractionsV1,
+    content: HTMLElement,
+    optionsV1: OverlayOptionsV1,
+  ): Promise<() => void>;
+  public static async open(
+    content: HTMLElement,
+    options?: OverlayOptions,
+  ): Promise;
+  public static async open(
+    triggerOrContent: HTMLElement,
+    interactionOrOptions: TriggerInteractionsV1 | OverlayOptions | undefined,
+    content?: HTMLElement,
+    optionsV1?: OverlayOptionsV1,
+  ): Promise void)> {
+    await import("@spectrum-web-components/overlay/sp-overlay.js");
+    const v2 = arguments.length === 2;
+    const overlayContent = content || triggerOrContent;
+    // Use the `this` from the `static` method context rather than a
+    // specific imported constructor to prevent opening a circular dependency.
+    const overlay = new this() as Overlay;
+    let restored = false;
+
+    overlay.dispose = () => {
+      overlay.addEventListener("sp-closed", () => {
+        if (!restored) {
+          restoreContent();
+          restored = true;
+        }
+
+        requestAnimationFrame(() => {
+          overlay.remove();
+        });
+      });
+      overlay.open = false;
+      overlay.dispose = noop;
+    };
     /**
-     * Overloaded imperative API entry point that allows for both the pre-0.37.0
-     * argument signature as well as the post-0.37.0 signature. This allows for
-     * consumers to continue to leverage it as they had been in previous releases
-     * while also surfacing the more feature-rich API that has been made available.
+     * Since content must exist in an , we need a way to get it there.
+     * The best & most-direct way is to declaratively use an  element,
+     * but for imperative users, we'll reparent content into an overlay that we've created for them.
      */
-    public static async open(
-        trigger: HTMLElement,
-        interaction: TriggerInteractionsV1,
-        content: HTMLElement,
-        optionsV1: OverlayOptionsV1
-    ): Promise<() => void>;
-    public static async open(
-        content: HTMLElement,
-        options?: OverlayOptions
-    ): Promise;
-    public static async open(
-        triggerOrContent: HTMLElement,
-        interactionOrOptions:
-            | TriggerInteractionsV1
-            | OverlayOptions
-            | undefined,
-        content?: HTMLElement,
-        optionsV1?: OverlayOptionsV1
-    ): Promise void)> {
-        await import('@spectrum-web-components/overlay/sp-overlay.js');
-        const v2 = arguments.length === 2;
-        const overlayContent = content || triggerOrContent;
-        // Use the `this` from the `static` method context rather than a
-        // specific imported constructor to prevent opening a circular dependency.
-        const overlay = new this() as Overlay;
-        let restored = false;
+    const restoreContent = reparentChildren([overlayContent], overlay, {
+      position: "beforeend",
+      prepareCallback: (el) => {
+        // Ensure that content to be overlaid is no longer targetted to a specific `slot`.
+        // This allow for it to be visible in the overlaid context.
+        const slot = el.slot;
 
-        overlay.dispose = () => {
-            overlay.addEventListener('sp-closed', () => {
-                if (!restored) {
-                    restoreContent();
-                    restored = true;
-                }
+        el.removeAttribute("slot");
 
-                requestAnimationFrame(() => {
-                    overlay.remove();
-                });
-            });
-            overlay.open = false;
-            overlay.dispose = noop;
+        return () => {
+          el.slot = slot;
         };
-        /**
-         * Since content must exist in an , we need a way to get it there.
-         * The best & most-direct way is to declaratively use an  element,
-         * but for imperative users, we'll reparent content into an overlay that we've created for them.
-         */
-        const restoreContent = reparentChildren([overlayContent], overlay, {
-            position: 'beforeend',
-            prepareCallback: (el) => {
-                // Ensure that content to be overlaid is no longer targetted to a specific `slot`.
-                // This allow for it to be visible in the overlaid context.
-                const slot = el.slot;
-
-                el.removeAttribute('slot');
-
-                return () => {
-                    el.slot = slot;
-                };
-            },
-        });
+      },
+    });
 
-        const v1 = !v2 && overlayContent && optionsV1;
+    const v1 = !v2 && overlayContent && optionsV1;
 
-        if (v1) {
-            if (window.__swc.DEBUG) {
-                window.__swc.warn(
-                    overlay,
-                    `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,
-                    'https://opensource.adobe.com/spectrum-web-components/components/overlay/',
-                    { level: 'deprecation' }
-                );
-            }
+    if (v1) {
+      if (window.__swc.DEBUG) {
+        window.__swc.warn(
+          overlay,
+          `You are interacting with an ${overlay.localName} element via a deprecated imperative API. This API will be removed in a future version of the SWC library. Consider leveraging an ${overlay.localName} directly.`,
+          "https://opensource.adobe.com/spectrum-web-components/components/overlay/",
+          { level: "deprecation" },
+        );
+      }
 
-            const trigger = triggerOrContent;
-            const interaction = interactionOrOptions;
-            const options = optionsV1;
+      const trigger = triggerOrContent;
+      const interaction = interactionOrOptions;
+      const options = optionsV1;
 
-            AbstractOverlay.applyOptions(overlay, {
-                ...options,
-                delayed:
-                    options.delayed || overlayContent.hasAttribute('delayed'),
-                trigger: options.virtualTrigger || trigger,
-                type:
-                    interaction === 'modal'
-                        ? 'modal'
-                        : interaction === 'hover'
-                          ? 'hint'
-                          : 'auto',
-            });
-            trigger.insertAdjacentElement('afterend', overlay);
-            await overlay.updateComplete;
-            overlay.open = true;
+      AbstractOverlay.applyOptions(overlay, {
+        ...options,
+        delayed: options.delayed || overlayContent.hasAttribute("delayed"),
+        trigger: options.virtualTrigger || trigger,
+        type:
+          interaction === "modal"
+            ? "modal"
+            : interaction === "hover"
+              ? "hint"
+              : "auto",
+      });
+      trigger.insertAdjacentElement("afterend", overlay);
+      await overlay.updateComplete;
+      overlay.open = true;
 
-            return overlay.dispose;
-        }
+      return overlay.dispose;
+    }
 
-        const options = interactionOrOptions as OverlayOptions;
+    const options = interactionOrOptions as OverlayOptions;
 
-        overlay.append(overlayContent);
-        AbstractOverlay.applyOptions(overlay, {
-            ...options,
-            delayed: options.delayed || overlayContent.hasAttribute('delayed'),
-        });
-        overlay.updateComplete.then(() => {
-            // Do we want to "open" this path, or leave that to the consumer?
-            overlay.open = true;
-        });
+    overlay.append(overlayContent);
+    AbstractOverlay.applyOptions(overlay, {
+      ...options,
+      delayed: options.delayed || overlayContent.hasAttribute("delayed"),
+    });
+    overlay.updateComplete.then(() => {
+      // Do we want to "open" this path, or leave that to the consumer?
+      overlay.open = true;
+    });
 
-        return overlay;
-    }
+    return overlay;
+  }
 
-    static applyOptions(
-        overlay: AbstractOverlay,
-        options: OverlayOptions
-    ): void {
-        overlay.delayed = !!options.delayed;
-        overlay.receivesFocus = options.receivesFocus ?? 'auto';
-        overlay.triggerElement = options.trigger || null;
-        overlay.type = options.type || 'modal';
-        overlay.offset = options.offset ?? 0;
-        overlay.placement = options.placement;
-        overlay.willPreventClose = !!options.notImmediatelyClosable;
-    }
+  static applyOptions(overlay: AbstractOverlay, options: OverlayOptions): void {
+    overlay.delayed = !!options.delayed;
+    overlay.receivesFocus = options.receivesFocus ?? "auto";
+    overlay.triggerElement = options.trigger || null;
+    overlay.type = options.type || "modal";
+    overlay.offset = options.offset ?? 0;
+    overlay.placement = options.placement;
+    overlay.willPreventClose = !!options.notImmediatelyClosable;
+  }
 }
diff --git a/packages/overlay/src/ClickController.ts b/packages/overlay/src/ClickController.ts
index 42d74b6015..d2f395b524 100644
--- a/packages/overlay/src/ClickController.ts
+++ b/packages/overlay/src/ClickController.ts
@@ -11,46 +11,46 @@ governing permissions and limitations under the License.
 */
 
 import {
-    InteractionController,
-    InteractionTypes,
-} from './InteractionController.js';
+  InteractionController,
+  InteractionTypes,
+} from "./InteractionController.js";
 
 export class ClickController extends InteractionController {
-    override type = InteractionTypes.click;
-
-    /**
-     * An overlay with a `click` interaction should not close on click `triggerElement`.
-     * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the
-     * overlay is `open` to prevent from toggling the overlay when the click event
-     * propagates later in the interaction.
-     */
-    private preventNextToggle = false;
-
-    handleClick(): void {
-        if (!this.preventNextToggle) {
-            this.open = !this.open;
-        }
-
-        this.preventNextToggle = false;
+  override type = InteractionTypes.click;
+
+  /**
+   * An overlay with a `click` interaction should not close on click `triggerElement`.
+   * When a click is initiated (`pointerdown`), apply `preventNextToggle` when the
+   * overlay is `open` to prevent from toggling the overlay when the click event
+   * propagates later in the interaction.
+   */
+  private preventNextToggle = false;
+
+  handleClick(): void {
+    if (!this.preventNextToggle) {
+      this.open = !this.open;
     }
 
-    handlePointerdown(): void {
-        this.preventNextToggle = this.open;
-    }
-
-    override init(): void {
-        // Clean up listeners if they've already been bound
-        this.abortController?.abort();
-        this.abortController = new AbortController();
-        const { signal } = this.abortController;
-
-        this.target.addEventListener('click', () => this.handleClick(), {
-            signal,
-        });
-        this.target.addEventListener(
-            'pointerdown',
-            () => this.handlePointerdown(),
-            { signal }
-        );
-    }
+    this.preventNextToggle = false;
+  }
+
+  handlePointerdown(): void {
+    this.preventNextToggle = this.open;
+  }
+
+  override init(): void {
+    // Clean up listeners if they've already been bound
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+
+    this.target.addEventListener("click", () => this.handleClick(), {
+      signal,
+    });
+    this.target.addEventListener(
+      "pointerdown",
+      () => this.handlePointerdown(),
+      { signal },
+    );
+  }
 }
diff --git a/packages/overlay/src/HoverController.ts b/packages/overlay/src/HoverController.ts
index 82c68ed662..db76d97766 100644
--- a/packages/overlay/src/HoverController.ts
+++ b/packages/overlay/src/HoverController.ts
@@ -10,189 +10,195 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';
-import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
+import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
+import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
 
 import {
-    InteractionController,
-    InteractionTypes,
-} from './InteractionController.js';
-import { noop } from './AbstractOverlay.js';
+  InteractionController,
+  InteractionTypes,
+} from "./InteractionController.js";
+import { noop } from "./AbstractOverlay.js";
 
 const HOVER_DELAY = 300;
 
 export class HoverController extends InteractionController {
-    override type = InteractionTypes.hover;
+  override type = InteractionTypes.hover;
 
-    private elementIds: string[] = [];
+  private elementIds: string[] = [];
 
-    focusedin = false;
+  focusedin = false;
 
-    private hoverTimeout?: ReturnType;
+  private hoverTimeout?: ReturnType;
 
-    pointerentered = false;
+  pointerentered = false;
 
-    handleTargetFocusin(): void {
-        if (!this.target.matches(':focus-visible')) {
-            return;
-        }
-
-        this.open = true;
-        this.focusedin = true;
-    }
-
-    handleTargetFocusout(): void {
-        this.focusedin = false;
-
-        if (this.pointerentered) return;
-
-        this.open = false;
+  handleTargetFocusin(): void {
+    if (!this.target.matches(":focus-visible")) {
+      return;
     }
 
-    handleTargetPointerenter(): void {
-        if (this.hoverTimeout) {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = undefined;
-        }
+    this.open = true;
+    this.focusedin = true;
+  }
 
-        if (this.overlay?.disabled) return;
+  handleTargetFocusout(): void {
+    this.focusedin = false;
 
-        this.open = true;
-        this.pointerentered = true;
+    if (this.pointerentered) {
+      return;
     }
 
-    handleTargetPointerleave(): void {
-        this.doPointerleave();
-    }
+    this.open = false;
+  }
 
-    // set a timeout once the pointer enters and the overlay is shown
-    // give the user time to enter the overlay
-    handleHostPointerenter(): void {
-        if (this.hoverTimeout) {
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = undefined;
-        }
+  handleTargetPointerenter(): void {
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = undefined;
     }
 
-    handleHostPointerleave(): void {
-        this.doPointerleave();
+    if (this.overlay?.disabled) {
+      return;
     }
 
-    override prepareDescription(): void {
-        // require "content" to apply relationship
-        if (!this.overlay.elements.length) return;
+    this.open = true;
+    this.pointerentered = true;
+  }
 
-        const triggerRoot = this.target.getRootNode();
-        const contentRoot = this.overlay.elements[0].getRootNode();
-        const overlayRoot = this.overlay.getRootNode();
+  handleTargetPointerleave(): void {
+    this.doPointerleave();
+  }
 
-        if (triggerRoot === overlayRoot) {
-            this.prepareOverlayRelativeDescription();
-        } else if (triggerRoot === contentRoot) {
-            this.prepareContentRelativeDescription();
-        }
+  // set a timeout once the pointer enters and the overlay is shown
+  // give the user time to enter the overlay
+  handleHostPointerenter(): void {
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = undefined;
     }
+  }
 
-    private prepareOverlayRelativeDescription(): void {
-        const releaseDescription = conditionAttributeWithId(
-            this.target,
-            'aria-describedby',
-            [this.overlay.id]
-        );
-
-        this.releaseDescription = () => {
-            releaseDescription();
-            this.releaseDescription = noop;
-        };
-    }
+  handleHostPointerleave(): void {
+    this.doPointerleave();
+  }
 
-    private prepareContentRelativeDescription(): void {
-        const elementIds: string[] = [];
-        const appliedIds = this.overlay.elements.map((el) => {
-            elementIds.push(el.id);
-
-            if (!el.id) {
-                el.id = `${this.overlay.tagName.toLowerCase()}-helper-${randomID()}`;
-            }
-
-            return el.id;
-        });
-
-        this.elementIds = elementIds;
-        const releaseDescription = conditionAttributeWithId(
-            this.target,
-            'aria-describedby',
-            appliedIds
-        );
-
-        this.releaseDescription = () => {
-            releaseDescription();
-            this.overlay.elements.map((el, index) => {
-                el.id = this.elementIds[index];
-            });
-            this.releaseDescription = noop;
-        };
+  override prepareDescription(): void {
+    // require "content" to apply relationship
+    if (!this.overlay.elements.length) {
+      return;
     }
 
-    protected doPointerleave(): void {
-        this.pointerentered = false;
-        const triggerElement = this.target as HTMLElement;
-
-        if (this.focusedin && triggerElement.matches(':focus-visible')) return;
+    const triggerRoot = this.target.getRootNode();
+    const contentRoot = this.overlay.elements[0].getRootNode();
+    const overlayRoot = this.overlay.getRootNode();
 
-        this.hoverTimeout = setTimeout(() => {
-            this.open = false;
-        }, HOVER_DELAY);
+    if (triggerRoot === overlayRoot) {
+      this.prepareOverlayRelativeDescription();
+    } else if (triggerRoot === contentRoot) {
+      this.prepareContentRelativeDescription();
+    }
+  }
+
+  private prepareOverlayRelativeDescription(): void {
+    const releaseDescription = conditionAttributeWithId(
+      this.target,
+      "aria-describedby",
+      [this.overlay.id],
+    );
+
+    this.releaseDescription = () => {
+      releaseDescription();
+      this.releaseDescription = noop;
+    };
+  }
+
+  private prepareContentRelativeDescription(): void {
+    const elementIds: string[] = [];
+    const appliedIds = this.overlay.elements.map((el) => {
+      elementIds.push(el.id);
+
+      if (!el.id) {
+        el.id = `${this.overlay.tagName.toLowerCase()}-helper-${randomID()}`;
+      }
+
+      return el.id;
+    });
+
+    this.elementIds = elementIds;
+    const releaseDescription = conditionAttributeWithId(
+      this.target,
+      "aria-describedby",
+      appliedIds,
+    );
+
+    this.releaseDescription = () => {
+      releaseDescription();
+      this.overlay.elements.map((el, index) => {
+        el.id = this.elementIds[index];
+      });
+      this.releaseDescription = noop;
+    };
+  }
+
+  protected doPointerleave(): void {
+    this.pointerentered = false;
+    const triggerElement = this.target as HTMLElement;
+
+    if (this.focusedin && triggerElement.matches(":focus-visible")) {
+      return;
     }
 
-    override init(): void {
-        // Clean up listeners if they've already been bound
-        this.abortController?.abort();
-        this.abortController = new AbortController();
-        const { signal } = this.abortController;
-
-        this.target.addEventListener(
-            'focusin',
-            () => this.handleTargetFocusin(),
-            { signal }
-        );
-        this.target.addEventListener(
-            'focusout',
-            () => this.handleTargetFocusout(),
-            { signal }
-        );
-        this.target.addEventListener(
-            'pointerenter',
-            () => this.handleTargetPointerenter(),
-            { signal }
-        );
-        this.target.addEventListener(
-            'pointerleave',
-            () => this.handleTargetPointerleave(),
-            { signal }
-        );
-
-        if (this.overlay) {
-            this.initOverlay();
-        }
+    this.hoverTimeout = setTimeout(() => {
+      this.open = false;
+    }, HOVER_DELAY);
+  }
+
+  override init(): void {
+    // Clean up listeners if they've already been bound
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+
+    this.target.addEventListener("focusin", () => this.handleTargetFocusin(), {
+      signal,
+    });
+    this.target.addEventListener(
+      "focusout",
+      () => this.handleTargetFocusout(),
+      { signal },
+    );
+    this.target.addEventListener(
+      "pointerenter",
+      () => this.handleTargetPointerenter(),
+      { signal },
+    );
+    this.target.addEventListener(
+      "pointerleave",
+      () => this.handleTargetPointerleave(),
+      { signal },
+    );
+
+    if (this.overlay) {
+      this.initOverlay();
     }
+  }
 
-    override initOverlay(): void {
-        if (!this.abortController) {
-            return;
-        }
-
-        const { signal } = this.abortController;
-
-        this.overlay.addEventListener(
-            'pointerenter',
-            () => this.handleHostPointerenter(),
-            { signal }
-        );
-        this.overlay.addEventListener(
-            'pointerleave',
-            () => this.handleHostPointerleave(),
-            { signal }
-        );
+  override initOverlay(): void {
+    if (!this.abortController) {
+      return;
     }
+
+    const { signal } = this.abortController;
+
+    this.overlay.addEventListener(
+      "pointerenter",
+      () => this.handleHostPointerenter(),
+      { signal },
+    );
+    this.overlay.addEventListener(
+      "pointerleave",
+      () => this.handleHostPointerleave(),
+      { signal },
+    );
+  }
 }
diff --git a/packages/overlay/src/InteractionController.ts b/packages/overlay/src/InteractionController.ts
index a64c63aaa1..f3f1aabd65 100644
--- a/packages/overlay/src/InteractionController.ts
+++ b/packages/overlay/src/InteractionController.ts
@@ -10,139 +10,143 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import type { ReactiveController } from '@spectrum-web-components/base';
-import { AbstractOverlay } from './AbstractOverlay.js';
+import type { ReactiveController } from "@spectrum-web-components/base";
+import { AbstractOverlay } from "./AbstractOverlay.js";
 
 export enum InteractionTypes {
-    'click',
-    'hover',
-    'longpress',
+  "click",
+  "hover",
+  "longpress",
 }
 
 export type ControllerOptions = {
-    overlay?: AbstractOverlay;
-    handleOverlayReady?: (overlay: AbstractOverlay) => void;
-    isPersistent?: boolean;
+  overlay?: AbstractOverlay;
+  handleOverlayReady?: (overlay: AbstractOverlay) => void;
+  isPersistent?: boolean;
 };
 
 export class InteractionController implements ReactiveController {
-    abortController!: AbortController;
+  abortController!: AbortController;
 
-    get activelyOpening(): boolean {
-        return false;
-    }
+  get activelyOpening(): boolean {
+    return false;
+  }
+
+  private handleOverlayReady?: (overlay: AbstractOverlay) => void;
 
-    private handleOverlayReady?: (overlay: AbstractOverlay) => void;
+  // Holds optimistic open state when an Overlay is not yet present
+  private isLazilyOpen = false;
 
-    // Holds optimistic open state when an Overlay is not yet present
-    private isLazilyOpen = false;
+  public get open(): boolean {
+    return this.overlay?.open ?? this.isLazilyOpen;
+  }
 
-    public get open(): boolean {
-        return this.overlay?.open ?? this.isLazilyOpen;
+  /**
+   * Set `open` against the associated Overlay lazily.
+   */
+  public set open(open: boolean) {
+    if (open === this.open) {
+      return;
     }
 
-    /**
-     * Set `open` against the associated Overlay lazily.
-     */
-    public set open(open: boolean) {
-        if (open === this.open) return;
-
-        this.isLazilyOpen = open;
-
-        if (this.overlay) {
-            // If there already is an Overlay, apply the value of `open` directly.
-            this.overlay.open = open;
-
-            return;
-        }
-
-        if (!open) {
-            // When `open` moves to `false` and there is not yet an Overlay,
-            // assume that no Overlay and a closed Overlay are the same and return early.
-            return;
-        }
-
-        // When there is no Overlay and `open` is moving to `true`, lazily import/create
-        // an Overlay and apply that state to it.
-        customElements
-            .whenDefined('sp-overlay')
-            .then(async (): Promise => {
-                const { Overlay } = await import('./Overlay.js');
-
-                this.overlay = new Overlay();
-                this.overlay.open = true;
-            });
-        import('@spectrum-web-components/overlay/sp-overlay.js');
+    this.isLazilyOpen = open;
+
+    if (this.overlay) {
+      // If there already is an Overlay, apply the value of `open` directly.
+      this.overlay.open = open;
+
+      return;
     }
 
-    public get overlay(): AbstractOverlay {
-        return this._overlay;
+    if (!open) {
+      // When `open` moves to `false` and there is not yet an Overlay,
+      // assume that no Overlay and a closed Overlay are the same and return early.
+      return;
     }
 
-    public set overlay(overlay: AbstractOverlay | undefined) {
-        if (!overlay) return;
+    // When there is no Overlay and `open` is moving to `true`, lazily import/create
+    // an Overlay and apply that state to it.
+    customElements.whenDefined("sp-overlay").then(async (): Promise => {
+      const { Overlay } = await import("./Overlay.js");
 
-        if (this.overlay === overlay) return;
+      this.overlay = new Overlay();
+      this.overlay.open = true;
+    });
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+  }
 
-        if (this.overlay) {
-            this.overlay.removeController(this);
-        }
+  public get overlay(): AbstractOverlay {
+    return this._overlay;
+  }
 
-        this._overlay = overlay;
-        this.overlay.addController(this);
-        this.initOverlay();
-        this.prepareDescription(this.target);
-        this.handleOverlayReady?.(this.overlay);
+  public set overlay(overlay: AbstractOverlay | undefined) {
+    if (!overlay) {
+      return;
     }
 
-    private _overlay!: AbstractOverlay;
+    if (this.overlay === overlay) {
+      return;
+    }
+
+    if (this.overlay) {
+      this.overlay.removeController(this);
+    }
 
-    protected isPersistent = false;
+    this._overlay = overlay;
+    this.overlay.addController(this);
+    this.initOverlay();
+    this.prepareDescription(this.target);
+    this.handleOverlayReady?.(this.overlay);
+  }
 
-    type!: InteractionTypes;
+  private _overlay!: AbstractOverlay;
 
-    constructor(
-        public target: HTMLElement,
-        { overlay, isPersistent, handleOverlayReady }: ControllerOptions
-    ) {
-        this.isPersistent = !!isPersistent;
-        this.handleOverlayReady = handleOverlayReady;
+  protected isPersistent = false;
 
-        if (this.isPersistent) {
-            this.init();
-        }
+  type!: InteractionTypes;
 
-        this.overlay = overlay;
+  constructor(
+    public target: HTMLElement,
+    { overlay, isPersistent, handleOverlayReady }: ControllerOptions,
+  ) {
+    this.isPersistent = !!isPersistent;
+    this.handleOverlayReady = handleOverlayReady;
+
+    if (this.isPersistent) {
+      this.init();
     }
 
-    prepareDescription(_: HTMLElement): void {}
+    this.overlay = overlay;
+  }
 
-    releaseDescription(): void {}
+  prepareDescription(_: HTMLElement): void {}
 
-    shouldCompleteOpen(): void {}
+  releaseDescription(): void {}
 
-    /* c8 ignore next 3 */
-    init(): void {
-        // Abstract init() method.
-    }
+  shouldCompleteOpen(): void {}
 
-    /* c8 ignore next 3 */
-    initOverlay(): void {
-        // Abstract initOverlay() method.
-    }
+  /* c8 ignore next 3 */
+  init(): void {
+    // Abstract init() method.
+  }
 
-    abort(): void {
-        this.releaseDescription();
-        this.abortController?.abort();
-    }
+  /* c8 ignore next 3 */
+  initOverlay(): void {
+    // Abstract initOverlay() method.
+  }
 
-    hostConnected(): void {
-        this.init();
-    }
+  abort(): void {
+    this.releaseDescription();
+    this.abortController?.abort();
+  }
+
+  hostConnected(): void {
+    this.init();
+  }
 
-    hostDisconnected(): void {
-        if (!this.isPersistent) {
-            this.abort();
-        }
+  hostDisconnected(): void {
+    if (!this.isPersistent) {
+      this.abort();
     }
+  }
 }
diff --git a/packages/overlay/src/LongpressController.ts b/packages/overlay/src/LongpressController.ts
index ca255ddf70..647fe0fdb7 100644
--- a/packages/overlay/src/LongpressController.ts
+++ b/packages/overlay/src/LongpressController.ts
@@ -11,220 +11,225 @@ governing permissions and limitations under the License.
 */
 
 import {
-    isAndroid,
-    isIOS,
-} from '@spectrum-web-components/shared/src/platform.js';
-import { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';
-import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
+  isAndroid,
+  isIOS,
+} from "@spectrum-web-components/shared/src/platform.js";
+import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
+import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
 
-import { noop } from './AbstractOverlay.js';
+import { noop } from "./AbstractOverlay.js";
 import {
-    InteractionController,
-    InteractionTypes,
-} from './InteractionController.js';
+  InteractionController,
+  InteractionTypes,
+} from "./InteractionController.js";
 
 const LONGPRESS_DURATION = 300;
 
 export const LONGPRESS_INSTRUCTIONS = {
-    touch: 'Double tap and long press for additional options',
-    keyboard: 'Press Space or Alt+Down Arrow for additional options',
-    mouse: 'Click and hold for additional options',
+  touch: "Double tap and long press for additional options",
+  keyboard: "Press Space or Alt+Down Arrow for additional options",
+  mouse: "Click and hold for additional options",
 };
 
 type LongpressEvent = {
-    source: 'pointer' | 'keyboard';
+  source: "pointer" | "keyboard";
 };
 
 export class LongpressController extends InteractionController {
-    override type = InteractionTypes.longpress;
+  override type = InteractionTypes.longpress;
 
-    override get activelyOpening(): boolean {
-        return (
-            this.longpressState === 'opening' ||
-            this.longpressState === 'pressed'
-        );
-    }
-
-    protected longpressState: null | 'potential' | 'opening' | 'pressed' = null;
-
-    override releaseDescription = noop;
-
-    private timeout!: ReturnType;
+  override get activelyOpening(): boolean {
+    return (
+      this.longpressState === "opening" || this.longpressState === "pressed"
+    );
+  }
 
-    handleLongpress(): void {
-        this.open = true;
-        this.longpressState =
-            this.longpressState === 'potential' ? 'opening' : 'pressed';
-    }
-
-    handlePointerdown(event: PointerEvent): void {
-        if (!this.target) return;
+  protected longpressState: null | "potential" | "opening" | "pressed" = null;
 
-        if (event.button !== 0) return;
+  override releaseDescription = noop;
 
-        this.longpressState = 'potential';
-        document.addEventListener('pointerup', this.handlePointerup);
-        document.addEventListener('pointercancel', this.handlePointerup);
-        // Only dispatch longpress event if the trigger element isn't doing it for us.
-        const triggerHandlesLongpress = 'holdAffordance' in this.target;
+  private timeout!: ReturnType;
 
-        if (triggerHandlesLongpress) return;
+  handleLongpress(): void {
+    this.open = true;
+    this.longpressState =
+      this.longpressState === "potential" ? "opening" : "pressed";
+  }
 
-        this.timeout = setTimeout(() => {
-            if (!this.target) return;
-
-            this.target.dispatchEvent(
-                new CustomEvent('longpress', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        source: 'pointer',
-                    },
-                })
-            );
-        }, LONGPRESS_DURATION);
+  handlePointerdown(event: PointerEvent): void {
+    if (!this.target) {
+      return;
     }
 
-    private handlePointerup = (): void => {
-        clearTimeout(this.timeout);
-
-        if (!this.target) return;
-
-        // When triggered by the pointer, the last of `opened`
-        // or `pointerup` should move the `longpressState` to
-        // `null` so that the earlier event can void the "light
-        // dismiss" and keep the Overlay open.
-        this.longpressState =
-            this.overlay?.state === 'opening' ? 'pressed' : null;
-        document.removeEventListener('pointerup', this.handlePointerup);
-        document.removeEventListener('pointercancel', this.handlePointerup);
-    };
+    if (event.button !== 0) {
+      return;
+    }
 
-    private handleKeydown(event: KeyboardEvent): void {
-        const { code, altKey } = event;
+    this.longpressState = "potential";
+    document.addEventListener("pointerup", this.handlePointerup);
+    document.addEventListener("pointercancel", this.handlePointerup);
+    // Only dispatch longpress event if the trigger element isn't doing it for us.
+    const triggerHandlesLongpress = "holdAffordance" in this.target;
 
-        if (altKey && code === 'ArrowDown') {
-            event.stopPropagation();
-            event.stopImmediatePropagation();
-        }
+    if (triggerHandlesLongpress) {
+      return;
     }
 
-    private handleKeyup(event: KeyboardEvent): void {
-        const { code, altKey } = event;
-
-        if (code === 'Space' || (altKey && code === 'ArrowDown')) {
-            if (!this.target) {
-                return;
-            }
-
-            event.stopPropagation();
-            this.target.dispatchEvent(
-                new CustomEvent('longpress', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        source: 'keyboard',
-                    },
-                })
-            );
-            setTimeout(() => {
-                this.longpressState = null;
-            });
-        }
+    this.timeout = setTimeout(() => {
+      if (!this.target) {
+        return;
+      }
+
+      this.target.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            source: "pointer",
+          },
+        }),
+      );
+    }, LONGPRESS_DURATION);
+  }
+
+  private handlePointerup = (): void => {
+    clearTimeout(this.timeout);
+
+    if (!this.target) {
+      return;
     }
 
-    override prepareDescription(trigger: HTMLElement): void {
-        if (
-            // do not reapply until target is recycled
-            this.releaseDescription !== noop ||
-            // require "longpress content" to apply relationship
-            !this.overlay.elements.length
-        ) {
-            return;
-        }
-
-        const longpressDescription = document.createElement('div');
-
-        longpressDescription.id = `longpress-describedby-descriptor-${randomID()}`;
-        const messageType = isIOS() || isAndroid() ? 'touch' : 'keyboard';
-
-        longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType];
-        longpressDescription.slot = 'longpress-describedby-descriptor';
-        const triggerParent = trigger.getRootNode() as HTMLElement;
-        const overlayParent = this.overlay.getRootNode() as HTMLElement;
-
-        // Manage the placement of the helper element in an accessible place with
-        // the lowest chance of negatively affecting the layout of the page.
-        if (triggerParent === overlayParent) {
-            // Trigger and Overlay in same DOM tree...
-            // Append helper element to Overlay.
-            this.overlay.append(longpressDescription);
-        } else {
-            // If Trigger in , hide helper
-            longpressDescription.hidden = !('host' in triggerParent);
-            // Trigger and Overlay in different DOM tree, Trigger in shadow tree...
-            // Insert helper element after Trigger.
-            trigger.insertAdjacentElement('afterend', longpressDescription);
-        }
-
-        const releaseDescription = conditionAttributeWithId(
-            trigger,
-            'aria-describedby',
-            [longpressDescription.id]
-        );
-
-        this.releaseDescription = () => {
-            releaseDescription();
-            longpressDescription.remove();
-            this.releaseDescription = noop;
-        };
+    // When triggered by the pointer, the last of `opened`
+    // or `pointerup` should move the `longpressState` to
+    // `null` so that the earlier event can void the "light
+    // dismiss" and keep the Overlay open.
+    this.longpressState = this.overlay?.state === "opening" ? "pressed" : null;
+    document.removeEventListener("pointerup", this.handlePointerup);
+    document.removeEventListener("pointercancel", this.handlePointerup);
+  };
+
+  private handleKeydown(event: KeyboardEvent): void {
+    const { code, altKey } = event;
+
+    if (altKey && code === "ArrowDown") {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    }
+  }
+
+  private handleKeyup(event: KeyboardEvent): void {
+    const { code, altKey } = event;
+
+    if (code === "Space" || (altKey && code === "ArrowDown")) {
+      if (!this.target) {
+        return;
+      }
+
+      event.stopPropagation();
+      this.target.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            source: "keyboard",
+          },
+        }),
+      );
+      setTimeout(() => {
+        this.longpressState = null;
+      });
+    }
+  }
+
+  override prepareDescription(trigger: HTMLElement): void {
+    if (
+      // do not reapply until target is recycled
+      this.releaseDescription !== noop ||
+      // require "longpress content" to apply relationship
+      !this.overlay.elements.length
+    ) {
+      return;
     }
 
-    override shouldCompleteOpen(): void {
-        // When triggered by the pointer, the last of `opened`
-        // or `pointerup` should move the `longpressState` to
-        // `null` so that the earlier event can void the "light
-        // dismiss" and keep the Overlay open.
-        this.longpressState =
-            this.longpressState === 'pressed' ? null : this.longpressState;
+    const longpressDescription = document.createElement("div");
+
+    longpressDescription.id = `longpress-describedby-descriptor-${randomID()}`;
+    const messageType = isIOS() || isAndroid() ? "touch" : "keyboard";
+
+    longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType];
+    longpressDescription.slot = "longpress-describedby-descriptor";
+    const triggerParent = trigger.getRootNode() as HTMLElement;
+    const overlayParent = this.overlay.getRootNode() as HTMLElement;
+
+    // Manage the placement of the helper element in an accessible place with
+    // the lowest chance of negatively affecting the layout of the page.
+    if (triggerParent === overlayParent) {
+      // Trigger and Overlay in same DOM tree...
+      // Append helper element to Overlay.
+      this.overlay.append(longpressDescription);
+    } else {
+      // If Trigger in , hide helper
+      longpressDescription.hidden = !("host" in triggerParent);
+      // Trigger and Overlay in different DOM tree, Trigger in shadow tree...
+      // Insert helper element after Trigger.
+      trigger.insertAdjacentElement("afterend", longpressDescription);
     }
 
-    override init(): void {
-        // Clean up listeners if they've already been bound
-        this.abortController?.abort();
-        this.abortController = new AbortController();
-        const { signal } = this.abortController;
-
-        this.target.addEventListener(
-            'longpress',
-            () => this.handleLongpress(),
-            { signal }
-        );
-        this.target.addEventListener(
-            'pointerdown',
-            (event: PointerEvent) => this.handlePointerdown(event),
-            { signal }
-        );
-
-        this.prepareDescription(this.target);
-
-        if (
-            (this.target as HTMLElement & { holdAffordance: boolean })
-                .holdAffordance
-        ) {
-            // Only bind keyboard events when the trigger element isn't doing it for us.
-            return;
-        }
-
-        this.target.addEventListener(
-            'keydown',
-            (event: KeyboardEvent) => this.handleKeydown(event),
-            { signal }
-        );
-        this.target.addEventListener(
-            'keyup',
-            (event: KeyboardEvent) => this.handleKeyup(event),
-            { signal }
-        );
+    const releaseDescription = conditionAttributeWithId(
+      trigger,
+      "aria-describedby",
+      [longpressDescription.id],
+    );
+
+    this.releaseDescription = () => {
+      releaseDescription();
+      longpressDescription.remove();
+      this.releaseDescription = noop;
+    };
+  }
+
+  override shouldCompleteOpen(): void {
+    // When triggered by the pointer, the last of `opened`
+    // or `pointerup` should move the `longpressState` to
+    // `null` so that the earlier event can void the "light
+    // dismiss" and keep the Overlay open.
+    this.longpressState =
+      this.longpressState === "pressed" ? null : this.longpressState;
+  }
+
+  override init(): void {
+    // Clean up listeners if they've already been bound
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+
+    this.target.addEventListener("longpress", () => this.handleLongpress(), {
+      signal,
+    });
+    this.target.addEventListener(
+      "pointerdown",
+      (event: PointerEvent) => this.handlePointerdown(event),
+      { signal },
+    );
+
+    this.prepareDescription(this.target);
+
+    if (
+      (this.target as HTMLElement & { holdAffordance: boolean }).holdAffordance
+    ) {
+      // Only bind keyboard events when the trigger element isn't doing it for us.
+      return;
     }
+
+    this.target.addEventListener(
+      "keydown",
+      (event: KeyboardEvent) => this.handleKeydown(event),
+      { signal },
+    );
+    this.target.addEventListener(
+      "keyup",
+      (event: KeyboardEvent) => this.handleKeyup(event),
+      { signal },
+    );
+  }
 }
diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
index d126ba5960..8681864fb0 100644
--- a/packages/overlay/src/Overlay.ts
+++ b/packages/overlay/src/Overlay.ts
@@ -10,61 +10,61 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    html,
-    PropertyValues,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  html,
+  PropertyValues,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-    queryAssignedElements,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
+  property,
+  query,
+  queryAssignedElements,
+  state,
+} from "@spectrum-web-components/base/src/decorators.js";
 import {
-    ElementResolutionController,
-    elementResolverUpdatedSymbol,
-} from '@spectrum-web-components/reactive-controllers/src/ElementResolution.js';
+  ElementResolutionController,
+  elementResolverUpdatedSymbol,
+} from "@spectrum-web-components/reactive-controllers/src/ElementResolution.js";
 import {
-    ifDefined,
-    StyleInfo,
-    styleMap,
-} from '@spectrum-web-components/base/src/directives.js';
-import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
+  ifDefined,
+  StyleInfo,
+  styleMap,
+} from "@spectrum-web-components/base/src/directives.js";
+import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
 import type {
-    OpenableElement,
-    OverlayState,
-    OverlayTypes,
-    Placement,
-    TriggerInteraction,
-} from './overlay-types.js';
-import { AbstractOverlay, nextFrame } from './AbstractOverlay.js';
-import { OverlayDialog } from './OverlayDialog.js';
-import { OverlayPopover } from './OverlayPopover.js';
-import { OverlayNoPopover } from './OverlayNoPopover.js';
-import { overlayStack } from './OverlayStack.js';
-import { VirtualTrigger } from './VirtualTrigger.js';
-import { PlacementController } from './PlacementController.js';
-import type { ClickController } from './ClickController.js';
-import type { HoverController } from './HoverController.js';
-import type { LongpressController } from './LongpressController.js';
-export { LONGPRESS_INSTRUCTIONS } from './LongpressController.js';
-import { strategies } from './strategies.js';
+  OpenableElement,
+  OverlayState,
+  OverlayTypes,
+  Placement,
+  TriggerInteraction,
+} from "./overlay-types.js";
+import { AbstractOverlay, nextFrame } from "./AbstractOverlay.js";
+import { OverlayDialog } from "./OverlayDialog.js";
+import { OverlayPopover } from "./OverlayPopover.js";
+import { OverlayNoPopover } from "./OverlayNoPopover.js";
+import { overlayStack } from "./OverlayStack.js";
+import { VirtualTrigger } from "./VirtualTrigger.js";
+import { PlacementController } from "./PlacementController.js";
+import type { ClickController } from "./ClickController.js";
+import type { HoverController } from "./HoverController.js";
+import type { LongpressController } from "./LongpressController.js";
+export { LONGPRESS_INSTRUCTIONS } from "./LongpressController.js";
+import { strategies } from "./strategies.js";
 import {
-    removeSlottableRequest,
-    SlottableRequestEvent,
-} from './slottable-request-event.js';
+  removeSlottableRequest,
+  SlottableRequestEvent,
+} from "./slottable-request-event.js";
 
-import styles from './overlay.css.js';
+import styles from "./overlay.css.js";
 
-const browserSupportsPopover = 'showPopover' in document.createElement('div');
+const browserSupportsPopover = "showPopover" in document.createElement("div");
 
 // Start the base class and add the popover or no-popover functionality
 let ComputedOverlayBase = OverlayDialog(AbstractOverlay);
 
 if (browserSupportsPopover) {
-    ComputedOverlayBase = OverlayPopover(ComputedOverlayBase);
+  ComputedOverlayBase = OverlayPopover(ComputedOverlayBase);
 } else {
-    ComputedOverlayBase = OverlayNoPopover(ComputedOverlayBase);
+  ComputedOverlayBase = OverlayNoPopover(ComputedOverlayBase);
 }
 
 /**
@@ -75,991 +75,987 @@ if (browserSupportsPopover) {
  * @fires slottable-request - requests to add or remove slottable content
  */
 export class Overlay extends ComputedOverlayBase {
-    static override styles = [styles];
-
-    /**
-     * An Overlay that is `delayed` will wait until a warm-up period of 1000ms
-     * has completed before opening. Once the warm-up period has completed, all
-     * subsequent Overlays will open immediately. When no Overlays are opened,
-     * a cool-down period of 1000ms will begin. Once the cool-down has completed,
-     * the next Overlay to be opened will be subject to the warm-up period if
-     * provided that option.
-     *
-     * This behavior helps to manage the performance and user experience by
-     * preventing multiple overlays from opening simultaneously and ensuring
-     * a smooth transition between opening and closing overlays.
-     */
-    @property({ type: Boolean })
-    override get delayed(): boolean {
-        return this.elements.at(-1)?.hasAttribute('delayed') || this._delayed;
+  static override styles = [styles];
+
+  /**
+   * An Overlay that is `delayed` will wait until a warm-up period of 1000ms
+   * has completed before opening. Once the warm-up period has completed, all
+   * subsequent Overlays will open immediately. When no Overlays are opened,
+   * a cool-down period of 1000ms will begin. Once the cool-down has completed,
+   * the next Overlay to be opened will be subject to the warm-up period if
+   * provided that option.
+   *
+   * This behavior helps to manage the performance and user experience by
+   * preventing multiple overlays from opening simultaneously and ensuring
+   * a smooth transition between opening and closing overlays.
+   */
+  @property({ type: Boolean })
+  override get delayed(): boolean {
+    return this.elements.at(-1)?.hasAttribute("delayed") || this._delayed;
+  }
+
+  /**
+   * Sets the delayed state of the overlay.
+   */
+  override set delayed(delayed: boolean) {
+    this._delayed = delayed;
+  }
+
+  /**
+   * Internal property to store the delayed state of the overlay.
+   */
+  private _delayed = false;
+
+  /**
+   * A reference to the dialog element within the overlay.
+   * This element is expected to have `showPopover` and `hidePopover` methods.
+   */
+  @query(".dialog")
+  override dialogEl!: HTMLDialogElement & {
+    showPopover(): void;
+    hidePopover(): void;
+  };
+
+  /**
+   * Indicates whether the overlay is currently functional or not.
+   *
+   * When set to `true`, the overlay is disabled, and any active strategy is aborted.
+   * The overlay will also close if it is currently open. When set to `false`, the
+   * overlay will re-bind events and re-open if it was previously open.
+   */
+  @property({ type: Boolean })
+  override get disabled(): boolean {
+    return this._disabled;
+  }
+
+  /**
+   * Sets the disabled state of the overlay.
+   */
+  override set disabled(disabled: boolean) {
+    this._disabled = disabled;
+
+    if (disabled) {
+      // Abort any active strategy and close the overlay if it is currently open
+      this.strategy?.abort();
+      this.wasOpen = this.open;
+      this.open = false;
+    } else {
+      // Re-bind events and re-open the overlay if it was previously open
+      this.bindEvents();
+      this.open = this.open || this.wasOpen;
+      this.wasOpen = false;
     }
-
-    /**
-     * Sets the delayed state of the overlay.
-     */
-    override set delayed(delayed: boolean) {
-        this._delayed = delayed;
+  }
+
+  /**
+   * Internal property to store the disabled state of the overlay.
+   */
+  private _disabled = false;
+
+  /**
+   * A query to gather all elements slotted into the default slot, excluding elements
+   * with the slot name "longpress-describedby-descriptor".
+   */
+  @queryAssignedElements({
+    flatten: true,
+    selector: ':not([slot="longpress-describedby-descriptor"], slot)',
+  })
+  override elements!: OpenableElement[];
+
+  /**
+   * A reference to the parent overlay that should be force-closed, if any.
+   */
+  public parentOverlayToForceClose?: Overlay;
+
+  /**
+   * Determines if the overlay has a non-virtual trigger element.
+   */
+  private get hasNonVirtualTrigger(): boolean {
+    return (
+      !!this.triggerElement && !(this.triggerElement instanceof VirtualTrigger)
+    );
+  }
+
+  /**
+   * The `offset` property accepts either a single number to define the offset of the
+   * Overlay along the main axis from the trigger, or a 2-tuple to define the offset
+   * along both the main axis and the cross axis. This option has no effect when there
+   * is no trigger element.
+   */
+  @property({ type: Number })
+  override offset: number | [number, number] = 0;
+
+  /**
+   * Provides an instance of the `PlacementController` for managing the positioning
+   * of the overlay relative to its trigger element.
+   *
+   * If the `PlacementController` instance does not already exist, it is created and
+   * assigned to the `_placementController` property.
+   */
+  protected override get placementController(): PlacementController {
+    if (!this._placementController) {
+      this._placementController = new PlacementController(this);
     }
 
-    /**
-     * Internal property to store the delayed state of the overlay.
-     */
-    private _delayed = false;
-
-    /**
-     * A reference to the dialog element within the overlay.
-     * This element is expected to have `showPopover` and `hidePopover` methods.
-     */
-    @query('.dialog')
-    override dialogEl!: HTMLDialogElement & {
-        showPopover(): void;
-        hidePopover(): void;
-    };
-
-    /**
-     * Indicates whether the overlay is currently functional or not.
-     *
-     * When set to `true`, the overlay is disabled, and any active strategy is aborted.
-     * The overlay will also close if it is currently open. When set to `false`, the
-     * overlay will re-bind events and re-open if it was previously open.
-     */
-    @property({ type: Boolean })
-    override get disabled(): boolean {
-        return this._disabled;
+    return this._placementController;
+  }
+
+  /**
+   * Indicates whether the Overlay is projected onto the "top layer" or not.
+   *
+   * When set to `true`, the overlay is open and visible. When set to `false`, the overlay is closed and hidden.
+   */
+  @property({ type: Boolean, reflect: true })
+  override get open(): boolean {
+    return this._open;
+  }
+
+  /**
+   * Sets the open state of the overlay.
+   */
+  override set open(open: boolean) {
+    if (open && this.disabled) {
+      return;
     }
 
-    /**
-     * Sets the disabled state of the overlay.
-     */
-    override set disabled(disabled: boolean) {
-        this._disabled = disabled;
-
-        if (disabled) {
-            // Abort any active strategy and close the overlay if it is currently open
-            this.strategy?.abort();
-            this.wasOpen = this.open;
-            this.open = false;
-        } else {
-            // Re-bind events and re-open the overlay if it was previously open
-            this.bindEvents();
-            this.open = this.open || this.wasOpen;
-            this.wasOpen = false;
-        }
+    if (open === this.open) {
+      return;
     }
 
-    /**
-     * Internal property to store the disabled state of the overlay.
-     */
-    private _disabled = false;
-
-    /**
-     * A query to gather all elements slotted into the default slot, excluding elements
-     * with the slot name "longpress-describedby-descriptor".
-     */
-    @queryAssignedElements({
-        flatten: true,
-        selector: ':not([slot="longpress-describedby-descriptor"], slot)',
-    })
-    override elements!: OpenableElement[];
+    // Don't respond if the overlay is in the shadow state during a longpress.
+    // The shadow state occurs when the first "click" would normally close the popover.
+    if (this.strategy?.activelyOpening && !open) {
+      return;
+    }
 
-    /**
-     * A reference to the parent overlay that should be force-closed, if any.
-     */
-    public parentOverlayToForceClose?: Overlay;
+    this._open = open;
 
-    /**
-     * Determines if the overlay has a non-virtual trigger element.
-     */
-    private get hasNonVirtualTrigger(): boolean {
-        return (
-            !!this.triggerElement &&
-            !(this.triggerElement instanceof VirtualTrigger)
-        );
+    if (this.open) {
+      Overlay.openCount += 1;
     }
 
-    /**
-     * The `offset` property accepts either a single number to define the offset of the
-     * Overlay along the main axis from the trigger, or a 2-tuple to define the offset
-     * along both the main axis and the cross axis. This option has no effect when there
-     * is no trigger element.
-     */
-    @property({ type: Number })
-    override offset: number | [number, number] = 0;
-
-    /**
-     * Provides an instance of the `PlacementController` for managing the positioning
-     * of the overlay relative to its trigger element.
-     *
-     * If the `PlacementController` instance does not already exist, it is created and
-     * assigned to the `_placementController` property.
-     */
-    protected override get placementController(): PlacementController {
-        if (!this._placementController) {
-            this._placementController = new PlacementController(this);
-        }
+    this.requestUpdate("open", !this.open);
 
-        return this._placementController;
+    // Request slottable content if the overlay is opening.
+    if (this.open) {
+      this.requestSlottable();
     }
-
-    /**
-     * Indicates whether the Overlay is projected onto the "top layer" or not.
-     *
-     * When set to `true`, the overlay is open and visible. When set to `false`, the overlay is closed and hidden.
-     */
-    @property({ type: Boolean, reflect: true })
-    override get open(): boolean {
-        return this._open;
+  }
+
+  /**
+   * Internal property to store the open state of the overlay.
+   */
+  private _open = false;
+
+  /**
+   * Tracks the number of overlays that have been opened.
+   *
+   * This static property is used to manage the stacking context of multiple overlays.
+   */
+  static openCount = 1;
+
+  /**
+   * Instruct the Overlay where to place itself in relationship to the trigger element.
+   */
+  @property()
+  override placement?: Placement;
+
+  /**
+   * The state in which the last `request-slottable` event was dispatched.
+   *
+   * This property ensures that overlays do not dispatch the same state twice in a row.
+   */
+  private lastRequestSlottableState = false;
+
+  /**
+   * Whether to pass focus to the overlay once opened, or
+   * to the appropriate value based on the "type" of the overlay
+   * when set to `"auto"`.
+   */
+  @property({ attribute: "receives-focus" })
+  override receivesFocus: "true" | "false" | "auto" = "auto";
+
+  /**
+   * A reference to the slot element within the overlay.
+   *
+   * This element is used to manage the content slotted into the overlay.
+   */
+  @query("slot")
+  slotEl!: HTMLSlotElement;
+
+  /**
+   * The current state of the overlay.
+   *
+   * This property reflects the current state of the overlay, such as 'opened' or 'closed'.
+   * When the state changes, it triggers the appropriate actions and updates the component.
+   */
+  @state()
+  override get state(): OverlayState {
+    return this._state;
+  }
+
+  /**
+   * Sets the state of the overlay.
+   */
+  override set state(state) {
+    if (state === this.state) {
+      return;
     }
 
-    /**
-     * Sets the open state of the overlay.
-     */
-    override set open(open: boolean) {
-        if (open && this.disabled) return;
-
-        if (open === this.open) return;
-
-        // Don't respond if the overlay is in the shadow state during a longpress.
-        // The shadow state occurs when the first "click" would normally close the popover.
-        if (this.strategy?.activelyOpening && !open) return;
+    const oldState = this.state;
 
-        this._open = open;
-
-        if (this.open) {
-            Overlay.openCount += 1;
-        }
+    this._state = state;
 
-        this.requestUpdate('open', !this.open);
-
-        // Request slottable content if the overlay is opening.
-        if (this.open) {
-            this.requestSlottable();
-        }
+    // Complete the opening strategy if the state is 'opened' or 'closed'.
+    if (this.state === "opened" || this.state === "closed") {
+      this.strategy?.shouldCompleteOpen();
     }
 
-    /**
-     * Internal property to store the open state of the overlay.
-     */
-    private _open = false;
-
-    /**
-     * Tracks the number of overlays that have been opened.
-     *
-     * This static property is used to manage the stacking context of multiple overlays.
-     */
-    static openCount = 1;
-
-    /**
-     * Instruct the Overlay where to place itself in relationship to the trigger element.
-     */
-    @property()
-    override placement?: Placement;
-
-    /**
-     * The state in which the last `request-slottable` event was dispatched.
-     *
-     * This property ensures that overlays do not dispatch the same state twice in a row.
-     */
-    private lastRequestSlottableState = false;
-
-    /**
-     * Whether to pass focus to the overlay once opened, or
-     * to the appropriate value based on the "type" of the overlay
-     * when set to `"auto"`.
-     */
-    @property({ attribute: 'receives-focus' })
-    override receivesFocus: 'true' | 'false' | 'auto' = 'auto';
-
-    /**
-     * A reference to the slot element within the overlay.
-     *
-     * This element is used to manage the content slotted into the overlay.
-     */
-    @query('slot')
-    slotEl!: HTMLSlotElement;
-
-    /**
-     * The current state of the overlay.
-     *
-     * This property reflects the current state of the overlay, such as 'opened' or 'closed'.
-     * When the state changes, it triggers the appropriate actions and updates the component.
-     */
-    @state()
-    override get state(): OverlayState {
-        return this._state;
+    // Request an update to re-render the component if necessary.
+    this.requestUpdate("state", oldState);
+  }
+
+  /**
+   * Internal property to store the state of the overlay.
+   */
+  override _state: OverlayState = "closed";
+
+  /**
+   * The interaction strategy for opening the overlay.
+   * This can be a ClickController, HoverController, or LongpressController.
+   */
+  public strategy?: ClickController | HoverController | LongpressController;
+
+  /**
+   * The padding around the tip of the overlay.
+   * This property defines the padding around the tip of the overlay, which can be used to adjust its positioning.
+   */
+  @property({ type: Number, attribute: "tip-padding" })
+  tipPadding?: number;
+
+  /**
+   * An optional ID reference for the trigger element combined with the optional
+   * interaction (click | hover | longpress) by which the overlay should open.
+   * The format is `trigger@interaction`, e.g., `trigger@click` opens the overlay
+   * when an element with the ID "trigger" is clicked.
+   */
+  @property()
+  trigger?: string;
+
+  /**
+   * An element reference for the trigger element that the overlay should relate to.
+   * This property is not reflected as an attribute.
+   */
+  @property({ attribute: false })
+  override triggerElement: HTMLElement | VirtualTrigger | null = null;
+
+  /**
+   * The specific interaction to listen for on the `triggerElement` to open the overlay.
+   * This property is not reflected as an attribute.
+   */
+  @property({ attribute: false })
+  triggerInteraction?: TriggerInteraction;
+
+  /**
+   * Configures the open/close heuristics of the Overlay.
+   */
+  @property()
+  override type: OverlayTypes = "auto";
+
+  /**
+   * Tracks whether the overlay was previously open.
+   *
+   * This is used to restore the open state when re-enabling the overlay.
+   */
+  protected wasOpen = false;
+
+  /**
+   * Provides an instance of the `ElementResolutionController` for managing the element
+   * that the overlay should be associated with. If the instance does not already exist,
+   * it is created and assigned to the `_elementResolver` property.
+   */
+  protected override get elementResolver(): ElementResolutionController {
+    if (!this._elementResolver) {
+      this._elementResolver = new ElementResolutionController(this);
     }
 
-    /**
-     * Sets the state of the overlay.
-     */
-    override set state(state) {
-        if (state === this.state) return;
-
-        const oldState = this.state;
-
-        this._state = state;
-
-        // Complete the opening strategy if the state is 'opened' or 'closed'.
-        if (this.state === 'opened' || this.state === 'closed') {
-            this.strategy?.shouldCompleteOpen();
-        }
-
-        // Request an update to re-render the component if necessary.
-        this.requestUpdate('state', oldState);
+    return this._elementResolver;
+  }
+
+  /**
+   * Determines if the overlay uses a dialog.
+   *
+   * Returns `true` if the overlay type is "modal" or "page".
+   */
+  private get usesDialog(): boolean {
+    return this.type === "modal" || this.type === "page";
+  }
+
+  /**
+   * Determines the value for the popover attribute based on the overlay type.
+   */
+  private get popoverValue(): "auto" | "manual" | undefined {
+    const hasPopoverAttribute = "popover" in this;
+
+    if (!hasPopoverAttribute) {
+      return undefined;
     }
 
-    /**
-     * Internal property to store the state of the overlay.
-     */
-    override _state: OverlayState = 'closed';
-
-    /**
-     * The interaction strategy for opening the overlay.
-     * This can be a ClickController, HoverController, or LongpressController.
-     */
-    public strategy?: ClickController | HoverController | LongpressController;
-
-    /**
-     * The padding around the tip of the overlay.
-     * This property defines the padding around the tip of the overlay, which can be used to adjust its positioning.
-     */
-    @property({ type: Number, attribute: 'tip-padding' })
-    tipPadding?: number;
-
-    /**
-     * An optional ID reference for the trigger element combined with the optional
-     * interaction (click | hover | longpress) by which the overlay should open.
-     * The format is `trigger@interaction`, e.g., `trigger@click` opens the overlay
-     * when an element with the ID "trigger" is clicked.
-     */
-    @property()
-    trigger?: string;
-
-    /**
-     * An element reference for the trigger element that the overlay should relate to.
-     * This property is not reflected as an attribute.
-     */
-    @property({ attribute: false })
-    override triggerElement: HTMLElement | VirtualTrigger | null = null;
-
-    /**
-     * The specific interaction to listen for on the `triggerElement` to open the overlay.
-     * This property is not reflected as an attribute.
-     */
-    @property({ attribute: false })
-    triggerInteraction?: TriggerInteraction;
-
-    /**
-     * Configures the open/close heuristics of the Overlay.
-     */
-    @property()
-    override type: OverlayTypes = 'auto';
-
-    /**
-     * Tracks whether the overlay was previously open.
-     *
-     * This is used to restore the open state when re-enabling the overlay.
-     */
-    protected wasOpen = false;
-
-    /**
-     * Provides an instance of the `ElementResolutionController` for managing the element
-     * that the overlay should be associated with. If the instance does not already exist,
-     * it is created and assigned to the `_elementResolver` property.
-     */
-    protected override get elementResolver(): ElementResolutionController {
-        if (!this._elementResolver) {
-            this._elementResolver = new ElementResolutionController(this);
-        }
-
-        return this._elementResolver;
+    switch (this.type) {
+      case "modal":
+      case "page":
+        return undefined;
+      case "hint":
+        return "manual";
+      default:
+        return this.type;
     }
-
-    /**
-     * Determines if the overlay uses a dialog.
-     *
-     * Returns `true` if the overlay type is "modal" or "page".
-     */
-    private get usesDialog(): boolean {
-        return this.type === 'modal' || this.type === 'page';
+  }
+
+  /**
+   * Determines if the overlay requires positioning based on its type and state.
+   */
+  protected get requiresPositioning(): boolean {
+    // Do not position "page" overlays as they should block the entire UI.
+    if (this.type === "page" || !this.open) {
+      return false;
     }
 
-    /**
-     * Determines the value for the popover attribute based on the overlay type.
-     */
-    private get popoverValue(): 'auto' | 'manual' | undefined {
-        const hasPopoverAttribute = 'popover' in this;
-
-        if (!hasPopoverAttribute) {
-            return undefined;
-        }
-
-        switch (this.type) {
-            case 'modal':
-            case 'page':
-                return undefined;
-            case 'hint':
-                return 'manual';
-            default:
-                return this.type;
-        }
+    // Do not position content without a trigger element, as there is nothing to position it relative to.
+    // Do not automatically position content unless it is a "hint".
+    if (!this.triggerElement || (!this.placement && this.type !== "hint")) {
+      return false;
     }
 
-    /**
-     * Determines if the overlay requires positioning based on its type and state.
-     */
-    protected get requiresPositioning(): boolean {
-        // Do not position "page" overlays as they should block the entire UI.
-        if (this.type === 'page' || !this.open) return false;
-
-        // Do not position content without a trigger element, as there is nothing to position it relative to.
-        // Do not automatically position content unless it is a "hint".
-        if (!this.triggerElement || (!this.placement && this.type !== 'hint'))
-            return false;
-
-        return true;
+    return true;
+  }
+
+  /**
+   * Manages the positioning of the overlay relative to its trigger element.
+   *
+   * This method calculates the necessary parameters for positioning the overlay,
+   * such as offset, placement, and tip padding, and then delegates the actual
+   * positioning to the `PlacementController`.
+   */
+  protected override managePosition(): void {
+    if (!this.requiresPositioning || !this.open) {
+      return;
     }
 
-    /**
-     * Manages the positioning of the overlay relative to its trigger element.
-     *
-     * This method calculates the necessary parameters for positioning the overlay,
-     * such as offset, placement, and tip padding, and then delegates the actual
-     * positioning to the `PlacementController`.
-     */
-    protected override managePosition(): void {
-        if (!this.requiresPositioning || !this.open) return;
-
-        const offset = this.offset || 0;
+    const offset = this.offset || 0;
 
-        const trigger = this.triggerElement as HTMLElement;
+    const trigger = this.triggerElement as HTMLElement;
 
-        const placement = (this.placement as Placement) || 'right';
+    const placement = (this.placement as Placement) || "right";
 
-        const tipPadding = this.tipPadding;
-
-        this.placementController.placeOverlay(this.dialogEl, {
-            offset,
-            placement,
-            tipPadding,
-            trigger,
-            type: this.type,
-        });
-    }
+    const tipPadding = this.tipPadding;
 
-    /**
-     * Manages the process of opening the popover.
-     *
-     * This method handles the necessary steps to open the popover, including managing delays,
-     * ensuring the popover is in the DOM, making transitions, and applying focus.
-     */
-    protected override async managePopoverOpen(): Promise {
-        // Call the base class method to handle any initial setup.
-        super.managePopoverOpen();
+    this.placementController.placeOverlay(this.dialogEl, {
+      offset,
+      placement,
+      tipPadding,
+      trigger,
+      type: this.type,
+    });
+  }
 
-        const targetOpenState = this.open;
+  /**
+   * Manages the process of opening the popover.
+   *
+   * This method handles the necessary steps to open the popover, including managing delays,
+   * ensuring the popover is in the DOM, making transitions, and applying focus.
+   */
+  protected override async managePopoverOpen(): Promise {
+    // Call the base class method to handle any initial setup.
+    super.managePopoverOpen();
 
-        // Ensure the open state has not changed before proceeding.
-        if (this.open !== targetOpenState) {
-            return;
-        }
+    const targetOpenState = this.open;
 
-        // Manage any delays before opening the popover.
-        await this.manageDelay(targetOpenState);
+    // Ensure the open state has not changed before proceeding.
+    if (this.open !== targetOpenState) {
+      return;
+    }
 
-        if (this.open !== targetOpenState) {
-            return;
-        }
+    // Manage any delays before opening the popover.
+    await this.manageDelay(targetOpenState);
 
-        // Ensure the popover is in the DOM before proceeding.
-        await this.ensureOnDOM(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
 
-        if (this.open !== targetOpenState) {
-            return;
-        }
+    // Ensure the popover is in the DOM before proceeding.
+    await this.ensureOnDOM(targetOpenState);
 
-        // Make any necessary transitions for opening the popover.
-        const focusEl = await this.makeTransition(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
 
-        if (this.open !== targetOpenState) {
-            return;
-        }
+    // Make any necessary transitions for opening the popover.
+    const focusEl = await this.makeTransition(targetOpenState);
 
-        // Apply focus to the appropriate element after opening the popover.
-        await this.applyFocus(targetOpenState, focusEl);
+    if (this.open !== targetOpenState) {
+      return;
     }
 
-    /**
-     * Applies focus to the appropriate element after the popover has been opened.
-     *
-     * This method handles the focus management for the overlay, ensuring that the correct
-     * element receives focus based on the overlay's type and state.
-     */
-    protected override async applyFocus(
-        targetOpenState: boolean,
-        focusEl: HTMLElement | null
-    ): Promise {
-        // Do not move focus when explicitly told not to or when the overlay is a "hint".
-        if (this.receivesFocus === 'false' || this.type === 'hint') {
-            return;
-        }
-
-        // Wait for the next two animation frames to ensure the DOM is updated.
-        await nextFrame();
-        await nextFrame();
-
-        // If the open state has changed during the delay, do not proceed.
-        if (targetOpenState === this.open && !this.open) {
-            // If the overlay is closing and the trigger element is still focused, return focus to the trigger element.
-            if (
-                this.hasNonVirtualTrigger &&
-                this.contains((this.getRootNode() as Document).activeElement)
-            ) {
-                (this.triggerElement as HTMLElement).focus();
-            }
-
-            return;
-        }
+    // Apply focus to the appropriate element after opening the popover.
+    await this.applyFocus(targetOpenState, focusEl);
+  }
+
+  /**
+   * Applies focus to the appropriate element after the popover has been opened.
+   *
+   * This method handles the focus management for the overlay, ensuring that the correct
+   * element receives focus based on the overlay's type and state.
+   */
+  protected override async applyFocus(
+    targetOpenState: boolean,
+    focusEl: HTMLElement | null,
+  ): Promise {
+    // Do not move focus when explicitly told not to or when the overlay is a "hint".
+    if (this.receivesFocus === "false" || this.type === "hint") {
+      return;
+    }
 
-        // Apply focus to the specified focus element.
-        focusEl?.focus();
+    // Wait for the next two animation frames to ensure the DOM is updated.
+    await nextFrame();
+    await nextFrame();
+
+    // If the open state has changed during the delay, do not proceed.
+    if (targetOpenState === this.open && !this.open) {
+      // If the overlay is closing and the trigger element is still focused, return focus to the trigger element.
+      if (
+        this.hasNonVirtualTrigger &&
+        this.contains((this.getRootNode() as Document).activeElement)
+      ) {
+        (this.triggerElement as HTMLElement).focus();
+      }
+
+      return;
     }
 
-    /**
-     * Returns focus to the trigger element if the overlay is closed.
-     *
-     * This method ensures that focus is returned to the trigger element when the overlay is closed,
-     * unless the overlay is of type "hint" or the focus is already outside the overlay.
-     */
-    protected override returnFocus(): void {
-        // Do not proceed if the overlay is open or if the overlay type is "hint".
-        if (this.open || this.type === 'hint') return;
-
-        /**
-         * Retrieves the ancestors of the currently focused element.
-         */
-        const getAncestors = (): HTMLElement[] => {
-            const ancestors: HTMLElement[] = [];
-
-            // eslint-disable-next-line @spectrum-web-components/document-active-element
-            let currentNode = document.activeElement;
-
-            // Traverse the shadow DOM to find the active element.
-            while (currentNode?.shadowRoot?.activeElement) {
-                currentNode = currentNode.shadowRoot.activeElement;
-            }
-
-            // Traverse the DOM tree to collect ancestor elements.
-            while (currentNode) {
-                const ancestor =
-                    currentNode.assignedSlot ||
-                    currentNode.parentElement ||
-                    (currentNode.getRootNode() as ShadowRoot)?.host;
-
-                if (ancestor) {
-                    ancestors.push(ancestor as HTMLElement);
-                }
-
-                currentNode = ancestor;
-            }
-
-            return ancestors;
-        };
-
-        // Check if focus should be returned to the trigger element.
-        if (
-            this.receivesFocus !== 'false' &&
-            !!(this.triggerElement as HTMLElement)?.focus &&
-            (this.contains((this.getRootNode() as Document).activeElement) ||
-                getAncestors().includes(this) ||
-                // eslint-disable-next-line @spectrum-web-components/document-active-element
-                document.activeElement === document.body)
-        ) {
-            // Return focus to the trigger element.
-            (this.triggerElement as HTMLElement).focus();
-        }
+    // Apply focus to the specified focus element.
+    focusEl?.focus();
+  }
+
+  /**
+   * Returns focus to the trigger element if the overlay is closed.
+   *
+   * This method ensures that focus is returned to the trigger element when the overlay is closed,
+   * unless the overlay is of type "hint" or the focus is already outside the overlay.
+   */
+  protected override returnFocus(): void {
+    // Do not proceed if the overlay is open or if the overlay type is "hint".
+    if (this.open || this.type === "hint") {
+      return;
     }
 
     /**
-     * Handles the focus out event to close the overlay if the focus moves outside of it.
-     *
-     * This method ensures that the overlay is closed when the focus moves to an element
-     * outside of the overlay, unless the focus is moved to a related element.
+     * Retrieves the ancestors of the currently focused element.
      */
-    private closeOnFocusOut = (event: FocusEvent): void => {
-        // If the related target (newly focused element) is not known, do nothing.
-        if (!event.relatedTarget) {
-            return;
+    const getAncestors = (): HTMLElement[] => {
+      const ancestors: HTMLElement[] = [];
+
+      // eslint-disable-next-line @spectrum-web-components/document-active-element
+      let currentNode = document.activeElement;
+
+      // Traverse the shadow DOM to find the active element.
+      while (currentNode?.shadowRoot?.activeElement) {
+        currentNode = currentNode.shadowRoot.activeElement;
+      }
+
+      // Traverse the DOM tree to collect ancestor elements.
+      while (currentNode) {
+        const ancestor =
+          currentNode.assignedSlot ||
+          currentNode.parentElement ||
+          (currentNode.getRootNode() as ShadowRoot)?.host;
+
+        if (ancestor) {
+          ancestors.push(ancestor as HTMLElement);
         }
 
-        // Create a custom event to query the relationship of the newly focused element.
-        const relationEvent = new Event('overlay-relation-query', {
-            bubbles: true,
-            composed: true,
-        });
-
-        // Add an event listener to the related target to handle the custom event.
-        event.relatedTarget.addEventListener(
-            relationEvent.type,
-            (event: Event) => {
-                // If the newly focused element is not within the overlay, close the overlay.
-                if (!event.composedPath().includes(this)) {
-                    this.open = false;
-                }
-            }
-        );
+        currentNode = ancestor;
+      }
 
-        // Dispatch the custom event to the related target.
-        event.relatedTarget.dispatchEvent(relationEvent);
+      return ancestors;
     };
 
-    /**
-     * Manages the process of opening or closing the overlay.
-     *
-     * This method handles the necessary steps to open or close the overlay, including updating the state,
-     * managing the overlay stack, and handling focus events.
-     */
-    protected async manageOpen(oldOpen: boolean): Promise {
-        // Prevent entering the manage workflow if the overlay is not connected to the DOM.
-        // The `.showPopover()` and `.showModal()` events will error on content that is not connected to the DOM.
-        if (!this.isConnected && this.open) return;
-
-        // Wait for the component to finish updating if it has not already done so.
-        if (!this.hasUpdated) {
-            await this.updateComplete;
-        }
-
-        if (this.open) {
-            // Add the overlay to the overlay stack.
-            overlayStack.add(this);
-
-            if (this.willPreventClose) {
-                // Add an event listener to handle the pointerup event and toggle the 'not-immediately-closable' class.
-                document.addEventListener(
-                    'pointerup',
-                    () => {
-                        this.dialogEl.classList.toggle(
-                            'not-immediately-closable',
-                            false
-                        );
-                        this.willPreventClose = false;
-                    },
-                    { once: true }
-                );
-                this.dialogEl.classList.toggle(
-                    'not-immediately-closable',
-                    true
-                );
-            }
-        } else {
-            if (oldOpen) {
-                // Dispose of the overlay if it was previously open.
-                this.dispose();
-            }
-
-            // Remove the overlay from the overlay stack.
-            overlayStack.remove(this);
-        }
+    // Check if focus should be returned to the trigger element.
+    if (
+      this.receivesFocus !== "false" &&
+      !!(this.triggerElement as HTMLElement)?.focus &&
+      (this.contains((this.getRootNode() as Document).activeElement) ||
+        getAncestors().includes(this) ||
+        // eslint-disable-next-line @spectrum-web-components/document-active-element
+        document.activeElement === document.body)
+    ) {
+      // Return focus to the trigger element.
+      (this.triggerElement as HTMLElement).focus();
+    }
+  }
+
+  /**
+   * Handles the focus out event to close the overlay if the focus moves outside of it.
+   *
+   * This method ensures that the overlay is closed when the focus moves to an element
+   * outside of the overlay, unless the focus is moved to a related element.
+   */
+  private closeOnFocusOut = (event: FocusEvent): void => {
+    // If the related target (newly focused element) is not known, do nothing.
+    if (!event.relatedTarget) {
+      return;
+    }
 
-        // Update the state of the overlay based on the open property.
-        if (this.open && this.state !== 'opened') {
-            this.state = 'opening';
-        } else if (!this.open && this.state !== 'closed') {
-            this.state = 'closing';
-        }
+    // Create a custom event to query the relationship of the newly focused element.
+    const relationEvent = new Event("overlay-relation-query", {
+      bubbles: true,
+      composed: true,
+    });
 
-        // Manage the dialog or popover based on the overlay type.
-        if (this.usesDialog) {
-            this.manageDialogOpen();
-        } else {
-            this.managePopoverOpen();
-        }
+    // Add an event listener to the related target to handle the custom event.
+    event.relatedTarget.addEventListener(relationEvent.type, (event: Event) => {
+      // If the newly focused element is not within the overlay, close the overlay.
+      if (!event.composedPath().includes(this)) {
+        this.open = false;
+      }
+    });
+
+    // Dispatch the custom event to the related target.
+    event.relatedTarget.dispatchEvent(relationEvent);
+  };
+
+  /**
+   * Manages the process of opening or closing the overlay.
+   *
+   * This method handles the necessary steps to open or close the overlay, including updating the state,
+   * managing the overlay stack, and handling focus events.
+   */
+  protected async manageOpen(oldOpen: boolean): Promise {
+    // Prevent entering the manage workflow if the overlay is not connected to the DOM.
+    // The `.showPopover()` and `.showModal()` events will error on content that is not connected to the DOM.
+    if (!this.isConnected && this.open) {
+      return;
+    }
 
-        // Handle focus events for auto type overlays.
-        if (this.type === 'auto') {
-            const listenerRoot = this.getRootNode() as Document;
-
-            if (this.open) {
-                listenerRoot.addEventListener(
-                    'focusout',
-                    this.closeOnFocusOut,
-                    { capture: true }
-                );
-            } else {
-                listenerRoot.removeEventListener(
-                    'focusout',
-                    this.closeOnFocusOut,
-                    { capture: true }
-                );
-            }
-        }
+    // Wait for the component to finish updating if it has not already done so.
+    if (!this.hasUpdated) {
+      await this.updateComplete;
     }
 
-    /**
-     * Binds event handling strategies to the overlay based on the specified trigger interaction.
-     *
-     * This method sets up the appropriate event handling strategy for the overlay, ensuring that
-     * it responds correctly to user interactions such as clicks, hovers, or long presses.
-     */
-    protected bindEvents(): void {
-        // Abort any existing strategy to ensure a clean setup.
-        this.strategy?.abort();
-        this.strategy = undefined;
-
-        // Return early if there is no non-virtual trigger element.
-        if (!this.hasNonVirtualTrigger) return;
-
-        // Return early if no trigger interaction is specified.
-        if (!this.triggerInteraction) return;
-
-        // Set up a new event handling strategy based on the specified trigger interaction.
-        this.strategy = new strategies[this.triggerInteraction](
-            this.triggerElement as HTMLElement,
-            {
-                overlay: this,
-            }
+    if (this.open) {
+      // Add the overlay to the overlay stack.
+      overlayStack.add(this);
+
+      if (this.willPreventClose) {
+        // Add an event listener to handle the pointerup event and toggle the 'not-immediately-closable' class.
+        document.addEventListener(
+          "pointerup",
+          () => {
+            this.dialogEl.classList.toggle("not-immediately-closable", false);
+            this.willPreventClose = false;
+          },
+          { once: true },
         );
+        this.dialogEl.classList.toggle("not-immediately-closable", true);
+      }
+    } else {
+      if (oldOpen) {
+        // Dispose of the overlay if it was previously open.
+        this.dispose();
+      }
+
+      // Remove the overlay from the overlay stack.
+      overlayStack.remove(this);
     }
 
-    /**
-     * Handles the `beforetoggle` event to manage the overlay's state.
-     *
-     * This method checks the new state of the event and calls `handleBrowserClose`
-     * if the new state is not 'open'.
-     */
-    protected handleBeforetoggle(event: Event & { newState: string }): void {
-        if (event.newState !== 'open') {
-            this.handleBrowserClose(event);
-        }
+    // Update the state of the overlay based on the open property.
+    if (this.open && this.state !== "opened") {
+      this.state = "opening";
+    } else if (!this.open && this.state !== "closed") {
+      this.state = "closing";
     }
 
-    /**
-     * Handles the browser's close event to manage the overlay's state.
-     *
-     * This method stops the propagation of the event and closes the overlay if it is not
-     * actively opening. If the overlay is actively opening, it calls `manuallyKeepOpen`.
-     */
-    protected handleBrowserClose(event: Event): void {
-        event.stopPropagation();
-
-        if (!this.strategy?.activelyOpening) {
-            this.open = false;
+    // Manage the dialog or popover based on the overlay type.
+    if (this.usesDialog) {
+      this.manageDialogOpen();
+    } else {
+      this.managePopoverOpen();
+    }
 
-            return;
-        }
+    // Handle focus events for auto type overlays.
+    if (this.type === "auto") {
+      const listenerRoot = this.getRootNode() as Document;
 
-        this.manuallyKeepOpen();
+      if (this.open) {
+        listenerRoot.addEventListener("focusout", this.closeOnFocusOut, {
+          capture: true,
+        });
+      } else {
+        listenerRoot.removeEventListener("focusout", this.closeOnFocusOut, {
+          capture: true,
+        });
+      }
+    }
+  }
+
+  /**
+   * Binds event handling strategies to the overlay based on the specified trigger interaction.
+   *
+   * This method sets up the appropriate event handling strategy for the overlay, ensuring that
+   * it responds correctly to user interactions such as clicks, hovers, or long presses.
+   */
+  protected bindEvents(): void {
+    // Abort any existing strategy to ensure a clean setup.
+    this.strategy?.abort();
+    this.strategy = undefined;
+
+    // Return early if there is no non-virtual trigger element.
+    if (!this.hasNonVirtualTrigger) {
+      return;
     }
 
-    /**
-     * Manually keeps the overlay open.
-     *
-     * This method sets the overlay to open, allows placement updates, and manages the open state.
-     */
-    public override manuallyKeepOpen(): void {
-        this.open = true;
-        this.placementController.allowPlacementUpdate = true;
-        this.manageOpen(false);
+    // Return early if no trigger interaction is specified.
+    if (!this.triggerInteraction) {
+      return;
     }
 
-    /**
-     * Handles the `slotchange` event to manage the overlay's state.
-     *
-     * This method checks if there are any elements in the slot. If there are no elements,
-     * it releases the description from the strategy. If there are elements and the trigger
-     * is non-virtual, it prepares the description for the trigger element.
-     */
-    protected handleSlotchange(): void {
-        if (!this.elements.length) {
-            // Release the description if there are no elements in the slot.
-            this.strategy?.releaseDescription();
-        } else if (this.hasNonVirtualTrigger) {
-            // Prepare the description for the trigger element if it is non-virtual.
-            this.strategy?.prepareDescription(
-                this.triggerElement as HTMLElement
-            );
-        }
+    // Set up a new event handling strategy based on the specified trigger interaction.
+    this.strategy = new strategies[this.triggerInteraction](
+      this.triggerElement as HTMLElement,
+      {
+        overlay: this,
+      },
+    );
+  }
+
+  /**
+   * Handles the `beforetoggle` event to manage the overlay's state.
+   *
+   * This method checks the new state of the event and calls `handleBrowserClose`
+   * if the new state is not 'open'.
+   */
+  protected handleBeforetoggle(event: Event & { newState: string }): void {
+    if (event.newState !== "open") {
+      this.handleBrowserClose(event);
     }
+  }
 
-    /**
-     * Determines whether the overlay should prevent closing.
-     *
-     * This method checks the `willPreventClose` flag and resets it to `false`.
-     * It returns the value of the `willPreventClose` flag.
-     */
-    public shouldPreventClose(): boolean {
-        const shouldPreventClose = this.willPreventClose;
+  /**
+   * Handles the browser's close event to manage the overlay's state.
+   *
+   * This method stops the propagation of the event and closes the overlay if it is not
+   * actively opening. If the overlay is actively opening, it calls `manuallyKeepOpen`.
+   */
+  protected handleBrowserClose(event: Event): void {
+    event.stopPropagation();
 
-        this.willPreventClose = false;
+    if (!this.strategy?.activelyOpening) {
+      this.open = false;
 
-        return shouldPreventClose;
+      return;
     }
 
-    /**
-     * Requests slottable content for the overlay.
-     *
-     * This method dispatches a `SlottableRequestEvent` to request or remove slottable content
-     * based on the current open state of the overlay. It ensures that the same state is not
-     * dispatched twice in a row.
-     */
-    protected override requestSlottable(): void {
-        // Do not dispatch the same state twice in a row.
-        if (this.lastRequestSlottableState === this.open) {
-            return;
-        }
-
-        // Force a reflow if the overlay is closing.
-        if (!this.open) {
-            document.body.offsetHeight;
-        }
-
-        /**
-         * @ignore
-         */
-        // Dispatch a custom event to request or remove slottable content based on the open state.
-        this.dispatchEvent(
-            new SlottableRequestEvent(
-                'overlay-content',
-                this.open ? {} : removeSlottableRequest
-            )
-        );
+    this.manuallyKeepOpen();
+  }
+
+  /**
+   * Manually keeps the overlay open.
+   *
+   * This method sets the overlay to open, allows placement updates, and manages the open state.
+   */
+  public override manuallyKeepOpen(): void {
+    this.open = true;
+    this.placementController.allowPlacementUpdate = true;
+    this.manageOpen(false);
+  }
+
+  /**
+   * Handles the `slotchange` event to manage the overlay's state.
+   *
+   * This method checks if there are any elements in the slot. If there are no elements,
+   * it releases the description from the strategy. If there are elements and the trigger
+   * is non-virtual, it prepares the description for the trigger element.
+   */
+  protected handleSlotchange(): void {
+    if (!this.elements.length) {
+      // Release the description if there are no elements in the slot.
+      this.strategy?.releaseDescription();
+    } else if (this.hasNonVirtualTrigger) {
+      // Prepare the description for the trigger element if it is non-virtual.
+      this.strategy?.prepareDescription(this.triggerElement as HTMLElement);
+    }
+  }
+
+  /**
+   * Determines whether the overlay should prevent closing.
+   *
+   * This method checks the `willPreventClose` flag and resets it to `false`.
+   * It returns the value of the `willPreventClose` flag.
+   */
+  public shouldPreventClose(): boolean {
+    const shouldPreventClose = this.willPreventClose;
+
+    this.willPreventClose = false;
+
+    return shouldPreventClose;
+  }
+
+  /**
+   * Requests slottable content for the overlay.
+   *
+   * This method dispatches a `SlottableRequestEvent` to request or remove slottable content
+   * based on the current open state of the overlay. It ensures that the same state is not
+   * dispatched twice in a row.
+   */
+  protected override requestSlottable(): void {
+    // Do not dispatch the same state twice in a row.
+    if (this.lastRequestSlottableState === this.open) {
+      return;
+    }
 
-        // Update the last request slottable state.
-        this.lastRequestSlottableState = this.open;
+    // Force a reflow if the overlay is closing.
+    if (!this.open) {
+      document.body.offsetHeight;
     }
 
     /**
-     * Lifecycle method called before the component updates.
-     *
-     * This method handles various tasks before the component updates, such as setting an ID,
-     * managing the open state, resolving the trigger element, and binding events.
+     * @ignore
      */
-    override willUpdate(changes: PropertyValues): void {
-        // Ensure the component has an ID attribute.
-        if (!this.hasAttribute('id')) {
-            this.setAttribute(
-                'id',
-                `${this.tagName.toLowerCase()}-${randomID()}`
-            );
-        }
-
-        // Manage the open state if the 'open' property has changed.
-        if (changes.has('open') && (this.hasUpdated || this.open)) {
-            this.manageOpen(changes.get('open'));
-        }
-
-        // Resolve the trigger element if the 'trigger' property has changed.
-        if (changes.has('trigger')) {
-            const [id, interaction] = this.trigger?.split('@') || [];
-
-            this.elementResolver.selector = id ? `#${id}` : '';
-            this.triggerInteraction = interaction as
-                | 'click'
-                | 'longpress'
-                | 'hover'
-                | undefined;
-        }
-
-        // Initialize oldTrigger to track the previous trigger element.
-        let oldTrigger: HTMLElement | false | undefined = false;
-
-        // Check if the element resolver has been updated.
-        if (changes.has(elementResolverUpdatedSymbol)) {
-            // Store the current trigger element.
-            oldTrigger = this.triggerElement as HTMLElement;
-            // Update the trigger element from the element resolver.
-            this.triggerElement = this.elementResolver.element;
-        }
-
-        // Check if the 'triggerElement' property has changed.
-        if (changes.has('triggerElement')) {
-            // Store the old trigger element.
-            oldTrigger = changes.get('triggerElement');
-        }
+    // Dispatch a custom event to request or remove slottable content based on the open state.
+    this.dispatchEvent(
+      new SlottableRequestEvent(
+        "overlay-content",
+        this.open ? {} : removeSlottableRequest,
+      ),
+    );
+
+    // Update the last request slottable state.
+    this.lastRequestSlottableState = this.open;
+  }
+
+  /**
+   * Lifecycle method called before the component updates.
+   *
+   * This method handles various tasks before the component updates, such as setting an ID,
+   * managing the open state, resolving the trigger element, and binding events.
+   */
+  override willUpdate(changes: PropertyValues): void {
+    // Ensure the component has an ID attribute.
+    if (!this.hasAttribute("id")) {
+      this.setAttribute("id", `${this.tagName.toLowerCase()}-${randomID()}`);
+    }
 
-        // If the trigger element has changed, bind the new events.
-        if (oldTrigger !== false) {
-            this.bindEvents();
-        }
+    // Manage the open state if the 'open' property has changed.
+    if (changes.has("open") && (this.hasUpdated || this.open)) {
+      this.manageOpen(changes.get("open"));
     }
 
-    /**
-     * Lifecycle method called after the component updates.
-     *
-     * This method handles various tasks after the component updates, such as updating the placement
-     * attribute, resetting the overlay position, and clearing the overlay position based on the state.
-     */
-    protected override updated(changes: PropertyValues): void {
-        // Call the base class method to handle any initial setup.
-        super.updated(changes);
-
-        // Check if the 'placement' property has changed.
-        if (changes.has('placement')) {
-            if (this.placement) {
-                // Set the 'actual-placement' attribute on the dialog element.
-                this.dialogEl.setAttribute('actual-placement', this.placement);
-            } else {
-                // Remove the 'actual-placement' attribute from the dialog element.
-                this.dialogEl.removeAttribute('actual-placement');
-            }
-
-            // If the overlay is open and the 'placement' property has changed, reset the overlay position.
-            if (this.open && typeof changes.get('placement') !== 'undefined') {
-                this.placementController.resetOverlayPosition();
-            }
-        }
+    // Resolve the trigger element if the 'trigger' property has changed.
+    if (changes.has("trigger")) {
+      const [id, interaction] = this.trigger?.split("@") || [];
 
-        // Check if the 'state' property has changed and the overlay is closed.
-        if (
-            changes.has('state') &&
-            this.state === 'closed' &&
-            typeof changes.get('state') !== 'undefined'
-        ) {
-            // Clear the overlay position.
-            this.placementController.clearOverlayPosition();
-        }
+      this.elementResolver.selector = id ? `#${id}` : "";
+      this.triggerInteraction = interaction as
+        | "click"
+        | "longpress"
+        | "hover"
+        | undefined;
     }
 
-    /**
-     * Renders the content of the overlay.
-     *
-     * This method returns a template result containing a slot element. The slot element
-     * listens for the `slotchange` event to manage the overlay's state.
-     */
-    protected renderContent(): TemplateResult {
-        return html`
-            
-        `;
-    }
+    // Initialize oldTrigger to track the previous trigger element.
+    let oldTrigger: HTMLElement | false | undefined = false;
 
-    /**
-     * Generates a style map for the dialog element.
-     *
-     * This method returns an object containing CSS custom properties for the dialog element.
-     * The `--swc-overlay-open-count` custom property is set to the current open count of overlays.
-     */
-    private get dialogStyleMap(): StyleInfo {
-        return {
-            '--swc-overlay-open-count': Overlay.openCount.toString(),
-        };
+    // Check if the element resolver has been updated.
+    if (changes.has(elementResolverUpdatedSymbol)) {
+      // Store the current trigger element.
+      oldTrigger = this.triggerElement as HTMLElement;
+      // Update the trigger element from the element resolver.
+      this.triggerElement = this.elementResolver.element;
     }
 
-    /**
-     * Renders the dialog element for the overlay.
-     *
-     * This method returns a template result containing a dialog element. The dialog element
-     * includes various attributes and event listeners to manage the overlay's state and behavior.
-     */
-    protected renderDialog(): TemplateResult {
-        /**
-         * The `--swc-overlay-open-count` custom property is applied to mimic the single stack
-         * nature of the top layer in browsers that do not yet support it.
-         *
-         * The value should always represent the total number of overlays that have ever been opened.
-         * This value will be added to the `--swc-overlay-z-index-base` custom property, which can be
-         * provided by a consuming developer. By default, `--swc-overlay-z-index-base` is set to 1000
-         * to ensure that the overlay stacks above most other elements during fallback delivery.
-         */
-        return html`
-            
-                ${this.renderContent()}
-            
-        `;
+    // Check if the 'triggerElement' property has changed.
+    if (changes.has("triggerElement")) {
+      // Store the old trigger element.
+      oldTrigger = changes.get("triggerElement");
     }
 
-    /**
-     * Renders the popover element for the overlay.
-     *
-     * This method returns a template result containing a div element styled as a popover.
-     * The popover element includes various attributes and event listeners to manage the overlay's state and behavior.
-     */
-    protected renderPopover(): TemplateResult {
-        /**
-         * The `--swc-overlay-open-count` custom property is applied to mimic the single stack
-         * nature of the top layer in browsers that do not yet support it.
-         *
-         * The value should always represent the total number of overlays that have ever been opened.
-         * This value will be added to the `--swc-overlay-z-index-base` custom property, which can be
-         * provided by a consuming developer. By default, `--swc-overlay-z-index-base` is set to 1000
-         * to ensure that the overlay stacks above most other elements during fallback delivery.
-         */
-        return html`
-            

-                ${this.renderContent()}
-            

-        `;
+    // If the trigger element has changed, bind the new events.
+    if (oldTrigger !== false) {
+      this.bindEvents();
     }
-
-    /**
-     * Renders the overlay component.
-     *
-     * This method returns a template result containing either a dialog or popover element
-     * based on the overlay type. It also includes a slot for longpress descriptors.
-     */
-    public override render(): TemplateResult {
-        const isDialog = this.type === 'modal' || this.type === 'page';
-
-        return html`
-            ${isDialog ? this.renderDialog() : this.renderPopover()}
-            
-        `;
+  }
+
+  /**
+   * Lifecycle method called after the component updates.
+   *
+   * This method handles various tasks after the component updates, such as updating the placement
+   * attribute, resetting the overlay position, and clearing the overlay position based on the state.
+   */
+  protected override updated(changes: PropertyValues): void {
+    // Call the base class method to handle any initial setup.
+    super.updated(changes);
+
+    // Check if the 'placement' property has changed.
+    if (changes.has("placement")) {
+      if (this.placement) {
+        // Set the 'actual-placement' attribute on the dialog element.
+        this.dialogEl.setAttribute("actual-placement", this.placement);
+      } else {
+        // Remove the 'actual-placement' attribute from the dialog element.
+        this.dialogEl.removeAttribute("actual-placement");
+      }
+
+      // If the overlay is open and the 'placement' property has changed, reset the overlay position.
+      if (this.open && typeof changes.get("placement") !== "undefined") {
+        this.placementController.resetOverlayPosition();
+      }
     }
 
+    // Check if the 'state' property has changed and the overlay is closed.
+    if (
+      changes.has("state") &&
+      this.state === "closed" &&
+      typeof changes.get("state") !== "undefined"
+    ) {
+      // Clear the overlay position.
+      this.placementController.clearOverlayPosition();
+    }
+  }
+
+  /**
+   * Renders the content of the overlay.
+   *
+   * This method returns a template result containing a slot element. The slot element
+   * listens for the `slotchange` event to manage the overlay's state.
+   */
+  protected renderContent(): TemplateResult {
+    return html`  `;
+  }
+
+  /**
+   * Generates a style map for the dialog element.
+   *
+   * This method returns an object containing CSS custom properties for the dialog element.
+   * The `--swc-overlay-open-count` custom property is set to the current open count of overlays.
+   */
+  private get dialogStyleMap(): StyleInfo {
+    return {
+      "--swc-overlay-open-count": Overlay.openCount.toString(),
+    };
+  }
+
+  /**
+   * Renders the dialog element for the overlay.
+   *
+   * This method returns a template result containing a dialog element. The dialog element
+   * includes various attributes and event listeners to manage the overlay's state and behavior.
+   */
+  protected renderDialog(): TemplateResult {
     /**
-     * Lifecycle method called when the component is added to the DOM.
+     * The `--swc-overlay-open-count` custom property is applied to mimic the single stack
+     * nature of the top layer in browsers that do not yet support it.
      *
-     * This method sets up event listeners and binds events if the component has already updated.
+     * The value should always represent the total number of overlays that have ever been opened.
+     * This value will be added to the `--swc-overlay-z-index-base` custom property, which can be
+     * provided by a consuming developer. By default, `--swc-overlay-z-index-base` is set to 1000
+     * to ensure that the overlay stacks above most other elements during fallback delivery.
      */
-    override connectedCallback(): void {
-        super.connectedCallback();
-
-        // Add an event listener to handle the 'close' event and update the 'open' property.
-        this.addEventListener('close', () => {
-            this.open = false;
-        });
-
-        // Bind events if the component has already updated.
-        if (this.hasUpdated) {
-            this.bindEvents();
-        }
-    }
-
+    return html`
+      
+        ${this.renderContent()}
+      
+    `;
+  }
+
+  /**
+   * Renders the popover element for the overlay.
+   *
+   * This method returns a template result containing a div element styled as a popover.
+   * The popover element includes various attributes and event listeners to manage the overlay's state and behavior.
+   */
+  protected renderPopover(): TemplateResult {
     /**
-     * Lifecycle method called when the component is removed from the DOM.
+     * The `--swc-overlay-open-count` custom property is applied to mimic the single stack
+     * nature of the top layer in browsers that do not yet support it.
      *
-     * This method releases the description from the strategy and updates the 'open' property.
+     * The value should always represent the total number of overlays that have ever been opened.
+     * This value will be added to the `--swc-overlay-z-index-base` custom property, which can be
+     * provided by a consuming developer. By default, `--swc-overlay-z-index-base` is set to 1000
+     * to ensure that the overlay stacks above most other elements during fallback delivery.
      */
-    override disconnectedCallback(): void {
-        // Release the description from the strategy.
-        this.strategy?.releaseDescription();
-        // Update the 'open' property to false.
-        this.open = false;
-        super.disconnectedCallback();
+    return html`
+      

+        ${this.renderContent()}
+      

+    `;
+  }
+
+  /**
+   * Renders the overlay component.
+   *
+   * This method returns a template result containing either a dialog or popover element
+   * based on the overlay type. It also includes a slot for longpress descriptors.
+   */
+  public override render(): TemplateResult {
+    const isDialog = this.type === "modal" || this.type === "page";
+
+    return html`
+      ${isDialog ? this.renderDialog() : this.renderPopover()}
+      
+    `;
+  }
+
+  /**
+   * Lifecycle method called when the component is added to the DOM.
+   *
+   * This method sets up event listeners and binds events if the component has already updated.
+   */
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Add an event listener to handle the 'close' event and update the 'open' property.
+    this.addEventListener("close", () => {
+      this.open = false;
+    });
+
+    // Bind events if the component has already updated.
+    if (this.hasUpdated) {
+      this.bindEvents();
     }
+  }
+
+  /**
+   * Lifecycle method called when the component is removed from the DOM.
+   *
+   * This method releases the description from the strategy and updates the 'open' property.
+   */
+  override disconnectedCallback(): void {
+    // Release the description from the strategy.
+    this.strategy?.releaseDescription();
+    // Update the 'open' property to false.
+    this.open = false;
+    super.disconnectedCallback();
+  }
 }
diff --git a/packages/overlay/src/OverlayDialog.ts b/packages/overlay/src/OverlayDialog.ts
index d90d070120..6a5d98ef56 100644
--- a/packages/overlay/src/OverlayDialog.ts
+++ b/packages/overlay/src/OverlayDialog.ts
@@ -9,207 +9,199 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import type { SpectrumElement } from '@spectrum-web-components/base';
+import type { SpectrumElement } from "@spectrum-web-components/base";
 import {
-    firstFocusableIn,
-    firstFocusableSlottedIn,
-} from '@spectrum-web-components/shared/src/first-focusable-in.js';
-import { VirtualTrigger } from './VirtualTrigger.js';
-import { Constructor, OpenableElement } from './overlay-types.js';
-import { guaranteedAllTransitionend, nextFrame } from './AbstractOverlay.js';
+  firstFocusableIn,
+  firstFocusableSlottedIn,
+} from "@spectrum-web-components/shared/src/first-focusable-in.js";
+import { VirtualTrigger } from "./VirtualTrigger.js";
+import { Constructor, OpenableElement } from "./overlay-types.js";
+import { guaranteedAllTransitionend, nextFrame } from "./AbstractOverlay.js";
 import {
-    BeforetoggleClosedEvent,
-    BeforetoggleOpenEvent,
-    OverlayStateEvent,
-} from './events.js';
-import type { AbstractOverlay } from './AbstractOverlay.js';
-import { userFocusableSelector } from '@spectrum-web-components/shared';
+  BeforetoggleClosedEvent,
+  BeforetoggleOpenEvent,
+  OverlayStateEvent,
+} from "./events.js";
+import type { AbstractOverlay } from "./AbstractOverlay.js";
+import { userFocusableSelector } from "@spectrum-web-components/shared";
 
 /**
  *
  */
 export function OverlayDialog>(
-    constructor: T
+  constructor: T,
 ): T & Constructor {
-    class OverlayWithDialog extends constructor {
-        protected override async manageDialogOpen(): Promise {
-            const targetOpenState = this.open;
+  class OverlayWithDialog extends constructor {
+    protected override async manageDialogOpen(): Promise {
+      const targetOpenState = this.open;
 
-            await nextFrame();
-            await this.managePosition();
+      await nextFrame();
+      await this.managePosition();
 
-            if (this.open !== targetOpenState) {
-                return;
-            }
+      if (this.open !== targetOpenState) {
+        return;
+      }
 
-            const focusEl = await this.dialogMakeTransition(targetOpenState);
+      const focusEl = await this.dialogMakeTransition(targetOpenState);
 
-            if (this.open !== targetOpenState) {
-                return;
-            }
+      if (this.open !== targetOpenState) {
+        return;
+      }
 
-            await this.dialogApplyFocus(targetOpenState, focusEl);
-        }
+      await this.dialogApplyFocus(targetOpenState, focusEl);
+    }
 
-        protected async dialogMakeTransition(
-            targetOpenState: boolean
-        ): Promise {
-            let focusEl = null as HTMLElement | null;
-            const start =
-                (el: OpenableElement, index: number) =>
-                async (): Promise => {
-                    el.open = targetOpenState;
-
-                    if (!targetOpenState) {
-                        const close = (): void => {
-                            el.removeEventListener('close', close);
-                            finish(el, index);
-                        };
-
-                        el.addEventListener('close', close);
-                    }
-
-                    if (index > 0) {
-                        // Announce workflow on the first element _only_.
-                        return;
-                    }
-
-                    const event = targetOpenState
-                        ? BeforetoggleOpenEvent
-                        : BeforetoggleClosedEvent;
-
-                    this.dispatchEvent(new event());
-
-                    if (!targetOpenState) {
-                        // Show/focus workflow when opening _only_.
-                        return;
-                    }
-
-                    if (el.matches(userFocusableSelector)) {
-                        focusEl = el;
-                    }
-
-                    focusEl = focusEl || firstFocusableIn(el);
-
-                    if (!focusEl) {
-                        const childSlots = el.querySelectorAll('slot');
-
-                        childSlots.forEach((slot) => {
-                            if (!focusEl) {
-                                focusEl = firstFocusableSlottedIn(slot);
-                            }
-                        });
-                    }
-
-                    if (!this.isConnected || this.dialogEl.open) {
-                        // In both of these cases the browser will error.
-                        // You can neither "reopen" a  or open one that is not on the DOM.
-                        return;
-                    }
-
-                    this.dialogEl.showModal();
-                };
-            const finish = (el: OpenableElement, index: number) => (): void => {
-                if (this.open !== targetOpenState) {
-                    return;
-                }
-
-                const eventName = targetOpenState ? 'sp-opened' : 'sp-closed';
-
-                if (index > 0) {
-                    el.dispatchEvent(
-                        new OverlayStateEvent(eventName, this, {
-                            interaction: this.type,
-                            publish: false,
-                        })
-                    );
-
-                    return;
-                }
-
-                if (!this.isConnected || targetOpenState !== this.open) {
-                    // Don't lead into the `.close()` workflow if not connected to the DOM.
-                    // The browser will error in this case.
-                    return;
-                }
-
-                const reportChange = async (): Promise => {
-                    const hasVirtualTrigger =
-                        this.triggerElement instanceof VirtualTrigger;
-
-                    this.dispatchEvent(
-                        new OverlayStateEvent(eventName, this, {
-                            interaction: this.type,
-                            publish: hasVirtualTrigger,
-                        })
-                    );
-                    el.dispatchEvent(
-                        new OverlayStateEvent(eventName, this, {
-                            interaction: this.type,
-                            publish: false,
-                        })
-                    );
-
-                    if (this.triggerElement && !hasVirtualTrigger) {
-                        (this.triggerElement as HTMLElement).dispatchEvent(
-                            new OverlayStateEvent(eventName, this, {
-                                interaction: this.type,
-                                publish: true,
-                            })
-                        );
-                    }
-
-                    this.state = targetOpenState ? 'opened' : 'closed';
-                    this.returnFocus();
-                    // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.
-                    await nextFrame();
-                    await nextFrame();
-
-                    if (
-                        targetOpenState === this.open &&
-                        targetOpenState === false
-                    ) {
-                        this.requestSlottable();
-                    }
-                };
-
-                if (!targetOpenState && this.dialogEl.open) {
-                    this.dialogEl.addEventListener(
-                        'close',
-                        () => {
-                            reportChange();
-                        },
-                        { once: true }
-                    );
-                    this.dialogEl.close();
-                } else {
-                    reportChange();
-                }
+    protected async dialogMakeTransition(
+      targetOpenState: boolean,
+    ): Promise {
+      let focusEl = null as HTMLElement | null;
+      const start =
+        (el: OpenableElement, index: number) => async (): Promise => {
+          el.open = targetOpenState;
+
+          if (!targetOpenState) {
+            const close = (): void => {
+              el.removeEventListener("close", close);
+              finish(el, index);
             };
 
-            this.elements.forEach((el, index) => {
-                guaranteedAllTransitionend(
-                    el,
-                    start(el, index),
-                    finish(el, index)
-                );
+            el.addEventListener("close", close);
+          }
+
+          if (index > 0) {
+            // Announce workflow on the first element _only_.
+            return;
+          }
+
+          const event = targetOpenState
+            ? BeforetoggleOpenEvent
+            : BeforetoggleClosedEvent;
+
+          this.dispatchEvent(new event());
+
+          if (!targetOpenState) {
+            // Show/focus workflow when opening _only_.
+            return;
+          }
+
+          if (el.matches(userFocusableSelector)) {
+            focusEl = el;
+          }
+
+          focusEl = focusEl || firstFocusableIn(el);
+
+          if (!focusEl) {
+            const childSlots = el.querySelectorAll("slot");
+
+            childSlots.forEach((slot) => {
+              if (!focusEl) {
+                focusEl = firstFocusableSlottedIn(slot);
+              }
             });
+          }
+
+          if (!this.isConnected || this.dialogEl.open) {
+            // In both of these cases the browser will error.
+            // You can neither "reopen" a  or open one that is not on the DOM.
+            return;
+          }
+
+          this.dialogEl.showModal();
+        };
+      const finish = (el: OpenableElement, index: number) => (): void => {
+        if (this.open !== targetOpenState) {
+          return;
+        }
+
+        const eventName = targetOpenState ? "sp-opened" : "sp-closed";
+
+        if (index > 0) {
+          el.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: false,
+            }),
+          );
+
+          return;
+        }
 
-            return focusEl;
+        if (!this.isConnected || targetOpenState !== this.open) {
+          // Don't lead into the `.close()` workflow if not connected to the DOM.
+          // The browser will error in this case.
+          return;
         }
 
-        protected async dialogApplyFocus(
-            targetOpenState: boolean,
-            focusEl: HTMLElement | null
-        ): Promise {
-            /**
-             * Focus should be handled natively in `` elements when leveraging `.showModal()`, but it's NOT.
-             * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507
-             * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398
-             */
-            this.applyFocus(targetOpenState, focusEl);
+        const reportChange = async (): Promise => {
+          const hasVirtualTrigger =
+            this.triggerElement instanceof VirtualTrigger;
+
+          this.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: hasVirtualTrigger,
+            }),
+          );
+          el.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: false,
+            }),
+          );
+
+          if (this.triggerElement && !hasVirtualTrigger) {
+            (this.triggerElement as HTMLElement).dispatchEvent(
+              new OverlayStateEvent(eventName, this, {
+                interaction: this.type,
+                publish: true,
+              }),
+            );
+          }
+
+          this.state = targetOpenState ? "opened" : "closed";
+          this.returnFocus();
+          // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.
+          await nextFrame();
+          await nextFrame();
+
+          if (targetOpenState === this.open && targetOpenState === false) {
+            this.requestSlottable();
+          }
+        };
+
+        if (!targetOpenState && this.dialogEl.open) {
+          this.dialogEl.addEventListener(
+            "close",
+            () => {
+              reportChange();
+            },
+            { once: true },
+          );
+          this.dialogEl.close();
+        } else {
+          reportChange();
         }
+      };
+
+      this.elements.forEach((el, index) => {
+        guaranteedAllTransitionend(el, start(el, index), finish(el, index));
+      });
+
+      return focusEl;
+    }
+
+    protected async dialogApplyFocus(
+      targetOpenState: boolean,
+      focusEl: HTMLElement | null,
+    ): Promise {
+      /**
+       * Focus should be handled natively in `` elements when leveraging `.showModal()`, but it's NOT.
+       * - webkit bug: https://bugs.webkit.org/show_bug.cgi?id=255507
+       * - firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1828398
+       */
+      this.applyFocus(targetOpenState, focusEl);
     }
+  }
 
-    return OverlayWithDialog;
+  return OverlayWithDialog;
 }
diff --git a/packages/overlay/src/OverlayNoPopover.ts b/packages/overlay/src/OverlayNoPopover.ts
index b7b10f2c2a..4ed653eddf 100644
--- a/packages/overlay/src/OverlayNoPopover.ts
+++ b/packages/overlay/src/OverlayNoPopover.ts
@@ -10,171 +10,161 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    firstFocusableIn,
-    firstFocusableSlottedIn,
-} from '@spectrum-web-components/shared/src/first-focusable-in.js';
-import type { SpectrumElement } from '@spectrum-web-components/base';
-import { VirtualTrigger } from './VirtualTrigger.js';
-import { Constructor, OpenableElement } from './overlay-types.js';
+  firstFocusableIn,
+  firstFocusableSlottedIn,
+} from "@spectrum-web-components/shared/src/first-focusable-in.js";
+import type { SpectrumElement } from "@spectrum-web-components/base";
+import { VirtualTrigger } from "./VirtualTrigger.js";
+import { Constructor, OpenableElement } from "./overlay-types.js";
 import {
-    guaranteedAllTransitionend,
-    nextFrame,
-    overlayTimer,
-} from './AbstractOverlay.js';
+  guaranteedAllTransitionend,
+  nextFrame,
+  overlayTimer,
+} from "./AbstractOverlay.js";
 import {
-    BeforetoggleClosedEvent,
-    BeforetoggleOpenEvent,
-    OverlayStateEvent,
-} from './events.js';
-import type { AbstractOverlay } from './AbstractOverlay.js';
-import { userFocusableSelector } from '@spectrum-web-components/shared';
+  BeforetoggleClosedEvent,
+  BeforetoggleOpenEvent,
+  OverlayStateEvent,
+} from "./events.js";
+import type { AbstractOverlay } from "./AbstractOverlay.js";
+import { userFocusableSelector } from "@spectrum-web-components/shared";
 
 /**
  *
  */
 export function OverlayNoPopover>(
-    constructor: T
+  constructor: T,
 ): T & Constructor {
-    class OverlayWithNoPopover extends constructor {
-        protected override async managePopoverOpen(): Promise {
-            await this.managePosition();
+  class OverlayWithNoPopover extends constructor {
+    protected override async managePopoverOpen(): Promise {
+      await this.managePosition();
+    }
+
+    protected override async manageDelay(
+      targetOpenState: boolean,
+    ): Promise {
+      if (targetOpenState === false || targetOpenState !== this.open) {
+        overlayTimer.close(this);
+
+        return;
+      }
+
+      if (this.delayed) {
+        const cancelled = await overlayTimer.openTimer(this);
+
+        if (cancelled) {
+          this.open = !targetOpenState;
         }
+      }
+    }
 
-        protected override async manageDelay(
-            targetOpenState: boolean
-        ): Promise {
-            if (targetOpenState === false || targetOpenState !== this.open) {
-                overlayTimer.close(this);
+    protected override async ensureOnDOM(
+      _targetOpenState: boolean,
+    ): Promise {
+      // force the browser to paint
+      document.body.offsetHeight;
+    }
 
-                return;
-            }
+    protected override async makeTransition(
+      targetOpenState: boolean,
+    ): Promise {
+      if (this.open !== targetOpenState) {
+        return null;
+      }
+
+      let focusEl = null as HTMLElement | null;
+      const start = (el: OpenableElement, index: number) => (): void => {
+        if (targetOpenState !== this.open) {
+          return;
+        }
+
+        el.open = targetOpenState;
+
+        if (index === 0) {
+          const event = targetOpenState
+            ? BeforetoggleOpenEvent
+            : BeforetoggleClosedEvent;
 
-            if (this.delayed) {
-                const cancelled = await overlayTimer.openTimer(this);
+          this.dispatchEvent(new event());
+        }
 
-                if (cancelled) {
-                    this.open = !targetOpenState;
-                }
-            }
+        if (targetOpenState !== true) {
+          return;
         }
 
-        protected override async ensureOnDOM(
-            _targetOpenState: boolean
-        ): Promise {
-            // force the browser to paint
-            document.body.offsetHeight;
+        if (el.matches(userFocusableSelector)) {
+          focusEl = el;
         }
 
-        protected override async makeTransition(
-            targetOpenState: boolean
-        ): Promise {
-            if (this.open !== targetOpenState) {
-                return null;
-            }
-
-            let focusEl = null as HTMLElement | null;
-            const start = (el: OpenableElement, index: number) => (): void => {
-                if (targetOpenState !== this.open) {
-                    return;
-                }
-
-                el.open = targetOpenState;
-
-                if (index === 0) {
-                    const event = targetOpenState
-                        ? BeforetoggleOpenEvent
-                        : BeforetoggleClosedEvent;
-
-                    this.dispatchEvent(new event());
-                }
-
-                if (targetOpenState !== true) {
-                    return;
-                }
-
-                if (el.matches(userFocusableSelector)) {
-                    focusEl = el;
-                }
-
-                focusEl = focusEl || firstFocusableIn(el);
-
-                if (focusEl) {
-                    return;
-                }
-
-                const childSlots = el.querySelectorAll('slot');
-
-                childSlots.forEach((slot) => {
-                    if (!focusEl) {
-                        focusEl = firstFocusableSlottedIn(slot);
-                    }
-                });
-            };
-            const finish =
-                (el: OpenableElement, index: number) =>
-                async (): Promise => {
-                    if (this.open !== targetOpenState) {
-                        return;
-                    }
-
-                    const eventName = targetOpenState
-                        ? 'sp-opened'
-                        : 'sp-closed';
-
-                    el.dispatchEvent(
-                        new OverlayStateEvent(eventName, this, {
-                            interaction: this.type,
-                        })
-                    );
-
-                    if (index > 0) {
-                        return;
-                    }
-
-                    const hasVirtualTrigger =
-                        this.triggerElement instanceof VirtualTrigger;
-
-                    this.dispatchEvent(
-                        new OverlayStateEvent(eventName, this, {
-                            interaction: this.type,
-                            publish: hasVirtualTrigger,
-                        })
-                    );
-
-                    if (this.triggerElement && !hasVirtualTrigger) {
-                        (this.triggerElement as HTMLElement).dispatchEvent(
-                            new OverlayStateEvent(eventName, this, {
-                                interaction: this.type,
-                                publish: true,
-                            })
-                        );
-                    }
-
-                    this.state = targetOpenState ? 'opened' : 'closed';
-                    this.returnFocus();
-                    // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.
-                    await nextFrame();
-                    await nextFrame();
-
-                    if (
-                        targetOpenState === this.open &&
-                        targetOpenState === false
-                    ) {
-                        this.requestSlottable();
-                    }
-                };
-
-            this.elements.forEach((el, index) => {
-                guaranteedAllTransitionend(
-                    el,
-                    start(el, index),
-                    finish(el, index)
-                );
-            });
-
-            return focusEl;
+        focusEl = focusEl || firstFocusableIn(el);
+
+        if (focusEl) {
+          return;
         }
+
+        const childSlots = el.querySelectorAll("slot");
+
+        childSlots.forEach((slot) => {
+          if (!focusEl) {
+            focusEl = firstFocusableSlottedIn(slot);
+          }
+        });
+      };
+      const finish =
+        (el: OpenableElement, index: number) => async (): Promise => {
+          if (this.open !== targetOpenState) {
+            return;
+          }
+
+          const eventName = targetOpenState ? "sp-opened" : "sp-closed";
+
+          el.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+            }),
+          );
+
+          if (index > 0) {
+            return;
+          }
+
+          const hasVirtualTrigger =
+            this.triggerElement instanceof VirtualTrigger;
+
+          this.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: hasVirtualTrigger,
+            }),
+          );
+
+          if (this.triggerElement && !hasVirtualTrigger) {
+            (this.triggerElement as HTMLElement).dispatchEvent(
+              new OverlayStateEvent(eventName, this, {
+                interaction: this.type,
+                publish: true,
+              }),
+            );
+          }
+
+          this.state = targetOpenState ? "opened" : "closed";
+          this.returnFocus();
+          // Ensure layout and paint are done and the Overlay is still closed before removing the slottable request.
+          await nextFrame();
+          await nextFrame();
+
+          if (targetOpenState === this.open && targetOpenState === false) {
+            this.requestSlottable();
+          }
+        };
+
+      this.elements.forEach((el, index) => {
+        guaranteedAllTransitionend(el, start(el, index), finish(el, index));
+      });
+
+      return focusEl;
     }
+  }
 
-    return OverlayWithNoPopover;
+  return OverlayWithNoPopover;
 }
diff --git a/packages/overlay/src/OverlayStack.ts b/packages/overlay/src/OverlayStack.ts
index 441d8ff4bd..a20baf22c0 100644
--- a/packages/overlay/src/OverlayStack.ts
+++ b/packages/overlay/src/OverlayStack.ts
@@ -9,241 +9,254 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Overlay } from './Overlay.js';
+import { Overlay } from "./Overlay.js";
 
-const supportsPopover = 'showPopover' in document.createElement('div');
+const supportsPopover = "showPopover" in document.createElement("div");
 
 class OverlayStack {
-    private get document(): Document {
-        return this.root.ownerDocument /* c8 ignore next */ || document;
-    }
+  private get document(): Document {
+    return this.root.ownerDocument /* c8 ignore next */ || document;
+  }
 
-    private pointerdownPath?: EventTarget[];
+  private pointerdownPath?: EventTarget[];
 
-    private lastOverlay?: Overlay;
+  private lastOverlay?: Overlay;
 
-    private root: HTMLElement = document.body;
+  private root: HTMLElement = document.body;
 
-    stack: Overlay[] = [];
+  stack: Overlay[] = [];
 
-    constructor() {
-        this.bindEvents();
-    }
+  constructor() {
+    this.bindEvents();
+  }
 
-    bindEvents(): void {
-        this.document.addEventListener('pointerdown', this.handlePointerdown);
-        this.document.addEventListener('pointerup', this.handlePointerup);
-        this.document.addEventListener('keydown', this.handleKeydown);
-    }
+  bindEvents(): void {
+    this.document.addEventListener("pointerdown", this.handlePointerdown);
+    this.document.addEventListener("pointerup", this.handlePointerup);
+    this.document.addEventListener("keydown", this.handleKeydown);
+  }
 
-    private closeOverlay(overlay: Overlay): void {
-        const overlayIndex = this.stack.indexOf(overlay);
+  private closeOverlay(overlay: Overlay): void {
+    const overlayIndex = this.stack.indexOf(overlay);
 
-        if (overlayIndex > -1) {
-            this.stack.splice(overlayIndex, 1);
-        }
+    if (overlayIndex > -1) {
+      this.stack.splice(overlayIndex, 1);
+    }
 
-        overlay.open = false;
+    overlay.open = false;
+  }
+
+  /**
+   * Catch the `pointerdownTarget` for later testing
+   *
+   * @param event - The event triggered when a pointer is pressed down
+   */
+  handlePointerdown = (event: Event): void => {
+    this.pointerdownPath = event.composedPath();
+    this.lastOverlay = this.stack[this.stack.length - 1];
+  };
+
+  /**
+   * Close all overlays that are not ancestors of this click event
+   */
+  handlePointerup = (): void => {
+    // Test against the composed path in `pointerdown` in case the visitor moved their
+    // pointer during the course of the interaction.
+    // Ensure that this value is cleared even if the work in this method goes undone.
+    const composedPath = this.pointerdownPath;
+
+    this.pointerdownPath = undefined;
+
+    if (!this.stack.length) {
+      return;
     }
 
-    /**
-     * Catch the `pointerdownTarget` for later testing
-     *
-     * @param event - The event triggered when a pointer is pressed down
-     */
-    handlePointerdown = (event: Event): void => {
-        this.pointerdownPath = event.composedPath();
-        this.lastOverlay = this.stack[this.stack.length - 1];
-    };
+    if (!composedPath?.length) {
+      return;
+    }
 
-    /**
-     * Close all overlays that are not ancestors of this click event
-     */
-    handlePointerup = (): void => {
-        // Test against the composed path in `pointerdown` in case the visitor moved their
-        // pointer during the course of the interaction.
-        // Ensure that this value is cleared even if the work in this method goes undone.
-        const composedPath = this.pointerdownPath;
-
-        this.pointerdownPath = undefined;
-
-        if (!this.stack.length) return;
-
-        if (!composedPath?.length) return;
-
-        const lastOverlay = this.lastOverlay;
-
-        this.lastOverlay = undefined;
-
-        const lastIndex = this.stack.length - 1;
-        const nonAncestorOverlays = this.stack.filter((overlay, i) => {
-            const inStack = composedPath.find(
-                (el) =>
-                    // The Overlay is in the stack
-                    el === overlay ||
-                    // The Overlay trigger is in the stack and the Overlay is a "hint"
-                    (el === overlay?.triggerElement &&
-                        'hint' === overlay?.type) ||
-                    // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a
-                    // `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction
-                    (i === lastIndex &&
-                        overlay !== lastOverlay &&
-                        overlay.triggerInteraction === 'longpress')
-            );
-
-            return (
-                !inStack &&
-                !overlay.shouldPreventClose() &&
-                overlay.type !== 'manual' &&
-                // Don't close if this overlay is modal and not on top of the overlay stack.
-                !(overlay.type === 'modal' && lastOverlay !== overlay)
-            );
-        }) as Overlay[];
-
-        nonAncestorOverlays.reverse();
-        nonAncestorOverlays.forEach((overlay) => {
-            this.closeOverlay(overlay);
-            let parentToClose = overlay.parentOverlayToForceClose;
-
-            while (parentToClose) {
-                this.closeOverlay(parentToClose);
-                parentToClose = parentToClose.parentOverlayToForceClose;
-            }
-        });
+    const lastOverlay = this.lastOverlay;
+
+    this.lastOverlay = undefined;
+
+    const lastIndex = this.stack.length - 1;
+    const nonAncestorOverlays = this.stack.filter((overlay, i) => {
+      const inStack = composedPath.find(
+        (el) =>
+          // The Overlay is in the stack
+          el === overlay ||
+          // The Overlay trigger is in the stack and the Overlay is a "hint"
+          (el === overlay?.triggerElement && "hint" === overlay?.type) ||
+          // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a
+          // `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction
+          (i === lastIndex &&
+            overlay !== lastOverlay &&
+            overlay.triggerInteraction === "longpress"),
+      );
+
+      return (
+        !inStack &&
+        !overlay.shouldPreventClose() &&
+        overlay.type !== "manual" &&
+        // Don't close if this overlay is modal and not on top of the overlay stack.
+        !(overlay.type === "modal" && lastOverlay !== overlay)
+      );
+    }) as Overlay[];
+
+    nonAncestorOverlays.reverse();
+    nonAncestorOverlays.forEach((overlay) => {
+      this.closeOverlay(overlay);
+      let parentToClose = overlay.parentOverlayToForceClose;
+
+      while (parentToClose) {
+        this.closeOverlay(parentToClose);
+        parentToClose = parentToClose.parentOverlayToForceClose;
+      }
+    });
+  };
+
+  handleBeforetoggle = (event: Event): void => {
+    const { target, newState: open } = event as Event & {
+      newState: string;
     };
 
-    handleBeforetoggle = (event: Event): void => {
-        const { target, newState: open } = event as Event & {
-            newState: string;
-        };
-
-        if (open === 'open') return;
+    if (open === "open") {
+      return;
+    }
 
-        this.closeOverlay(target as Overlay);
-    };
+    this.closeOverlay(target as Overlay);
+  };
 
-    private handleKeydown = (event: KeyboardEvent): void => {
-        if (event.code !== 'Escape') return;
+  private handleKeydown = (event: KeyboardEvent): void => {
+    if (event.code !== "Escape") {
+      return;
+    }
 
-        if (!this.stack.length) return;
+    if (!this.stack.length) {
+      return;
+    }
 
-        const last = this.stack[this.stack.length - 1];
+    const last = this.stack[this.stack.length - 1];
 
-        if (last?.type === 'page') {
-            event.preventDefault();
+    if (last?.type === "page") {
+      event.preventDefault();
 
-            return;
-        }
-
-        if (supportsPopover) return;
+      return;
+    }
 
-        if (last?.type === 'manual') {
-            // Manual Overlays should not close on "light dismiss".
-            return;
-        }
+    if (supportsPopover) {
+      return;
+    }
 
-        if (!last) return;
+    if (last?.type === "manual") {
+      // Manual Overlays should not close on "light dismiss".
+      return;
+    }
 
-        this.closeOverlay(last);
-    };
+    if (!last) {
+      return;
+    }
 
-    /**
-     * Get an array of Overlays that all share the same trigger element.
-     *
-     * @param triggerElement - The HTML element that triggers the overlay.
-     * @returns An array of overlays that share the same trigger element.
-     */
-    overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {
-        return this.stack.filter(
-            (overlay) => overlay.triggerElement === triggerElement
-        );
+    this.closeOverlay(last);
+  };
+
+  /**
+   * Get an array of Overlays that all share the same trigger element.
+   *
+   * @param triggerElement - The HTML element that triggers the overlay.
+   * @returns An array of overlays that share the same trigger element.
+   */
+  overlaysByTriggerElement(triggerElement: HTMLElement): Overlay[] {
+    return this.stack.filter(
+      (overlay) => overlay.triggerElement === triggerElement,
+    );
+  }
+
+  /**
+   * When overlays are added manage the open state of exisiting overlays appropriately:
+   * - 'modal': should close other non-'modal' and non-'manual' overlays
+   * - 'page': should close other non-'modal' and non-'manual' overlays
+   * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
+   * - 'manual': shouldn't close other overlays
+   * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
+   */
+  add(overlay: Overlay): void {
+    if (this.stack.includes(overlay)) {
+      const overlayIndex = this.stack.indexOf(overlay);
+
+      if (overlayIndex > -1) {
+        this.stack.splice(overlayIndex, 1);
+        this.stack.push(overlay);
+      }
+
+      return;
     }
 
-    /**
-     * When overlays are added manage the open state of exisiting overlays appropriately:
-     * - 'modal': should close other non-'modal' and non-'manual' overlays
-     * - 'page': should close other non-'modal' and non-'manual' overlays
-     * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
-     * - 'manual': shouldn't close other overlays
-     * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
-     */
-    add(overlay: Overlay): void {
-        if (this.stack.includes(overlay)) {
-            const overlayIndex = this.stack.indexOf(overlay);
-
-            if (overlayIndex > -1) {
-                this.stack.splice(overlayIndex, 1);
-                this.stack.push(overlay);
+    if (
+      overlay.type === "auto" ||
+      overlay.type === "modal" ||
+      overlay.type === "page"
+    ) {
+      // manage closing open overlays
+      const queryPathEventName = "sp-overlay-query-path";
+      const queryPathEvent = new Event(queryPathEventName, {
+        composed: true,
+        bubbles: true,
+      });
+
+      overlay.addEventListener(
+        queryPathEventName,
+        (event: Event) => {
+          const path = event.composedPath();
+
+          this.stack.forEach((overlayEl) => {
+            const inPath = path.find((el) => el === overlayEl);
+
+            if (
+              !inPath &&
+              overlayEl.type !== "manual" &&
+              overlayEl.type !== "modal"
+            ) {
+              this.closeOverlay(overlayEl);
             }
+          });
+        },
+        { once: true },
+      );
+      overlay.dispatchEvent(queryPathEvent);
+    } else if (overlay.type === "hint") {
+      const hasPrevious = this.stack.some((overlayEl) => {
+        return (
+          overlayEl.type !== "manual" &&
+          overlayEl.triggerElement &&
+          overlayEl.triggerElement === overlay.triggerElement
+        );
+      });
 
-            return;
-        }
+      if (hasPrevious) {
+        overlay.open = false;
 
-        if (
-            overlay.type === 'auto' ||
-            overlay.type === 'modal' ||
-            overlay.type === 'page'
-        ) {
-            // manage closing open overlays
-            const queryPathEventName = 'sp-overlay-query-path';
-            const queryPathEvent = new Event(queryPathEventName, {
-                composed: true,
-                bubbles: true,
-            });
-
-            overlay.addEventListener(
-                queryPathEventName,
-                (event: Event) => {
-                    const path = event.composedPath();
-
-                    this.stack.forEach((overlayEl) => {
-                        const inPath = path.find((el) => el === overlayEl);
-
-                        if (
-                            !inPath &&
-                            overlayEl.type !== 'manual' &&
-                            overlayEl.type !== 'modal'
-                        ) {
-                            this.closeOverlay(overlayEl);
-                        }
-                    });
-                },
-                { once: true }
-            );
-            overlay.dispatchEvent(queryPathEvent);
-        } else if (overlay.type === 'hint') {
-            const hasPrevious = this.stack.some((overlayEl) => {
-                return (
-                    overlayEl.type !== 'manual' &&
-                    overlayEl.triggerElement &&
-                    overlayEl.triggerElement === overlay.triggerElement
-                );
-            });
-
-            if (hasPrevious) {
-                overlay.open = false;
-
-                return;
-            }
+        return;
+      }
 
-            this.stack.forEach((overlayEl) => {
-                if (overlayEl.type === 'hint') {
-                    this.closeOverlay(overlayEl);
-                }
-            });
+      this.stack.forEach((overlayEl) => {
+        if (overlayEl.type === "hint") {
+          this.closeOverlay(overlayEl);
         }
-
-        requestAnimationFrame(() => {
-            this.stack.push(overlay);
-            overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {
-                once: true,
-            });
-        });
+      });
     }
 
-    remove(overlay: Overlay): void {
-        this.closeOverlay(overlay);
-    }
+    requestAnimationFrame(() => {
+      this.stack.push(overlay);
+      overlay.addEventListener("beforetoggle", this.handleBeforetoggle, {
+        once: true,
+      });
+    });
+  }
+
+  remove(overlay: Overlay): void {
+    this.closeOverlay(overlay);
+  }
 }
 
 export const overlayStack = new OverlayStack();
diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts
index 3dfd942894..26f54c4e84 100644
--- a/packages/overlay/src/OverlayTrigger.ts
+++ b/packages/overlay/src/OverlayTrigger.ts
@@ -11,16 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
-	CSSResultArray,
-	html,
-	PropertyValues,
-	SpectrumElement,
-	TemplateResult,
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SpectrumElement,
+  TemplateResult,
 } from "@spectrum-web-components/base";
 import {
-	property,
-	query,
-	state,
+  property,
+  query,
+  state,
 } from "@spectrum-web-components/base/src/decorators.js";
 import type { Placement } from "@floating-ui/dom";
 
@@ -44,255 +44,255 @@ export type OverlayContentTypes = "click" | "hover" | "longpress";
  * @fires sp-closed - Announces that the overlay has been closed
  */
 export class OverlayTrigger extends SpectrumElement {
-	public static override get styles(): CSSResultArray {
-		return [overlayTriggerStyles];
-	}
-
-	@property()
-	content = "click hover longpress";
-
-	/**
-	 * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
-	 *
-	 * @attribute
-	 *
-	 */
-	@property({ reflect: true })
-	public placement?: Placement;
-
-	@property()
-	public type?: OverlayTriggerInteractions;
-
-	@property({ type: Number })
-	public offset = 6;
-
-	@property({ reflect: true })
-	public open?: OverlayContentTypes;
-
-	@property({ type: Boolean, reflect: true })
-	public disabled = false;
-
-	@property({ attribute: "receives-focus" })
-	public receivesFocus: "true" | "false" | "auto" = "auto";
-
-	@state()
-	private clickContent: HTMLElement[] = [];
-
-	private clickPlacement?: Placement;
-
-	@state()
-	private longpressContent: HTMLElement[] = [];
-
-	private longpressPlacement?: Placement;
-
-	@state()
-	private hoverContent: HTMLElement[] = [];
-
-	private hoverPlacement?: Placement;
-
-	@state()
-	private targetContent: HTMLElement[] = [];
-
-	@query("#click-overlay", true)
-	clickOverlayElement!: Overlay;
-
-	@query("#longpress-overlay", true)
-	longpressOverlayElement!: Overlay;
-
-	@query("#hover-overlay", true)
-	hoverOverlayElement!: Overlay;
-
-	private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {
-		return slot.assignedElements({ flatten: true }) as HTMLElement[];
-	}
-
-	private handleTriggerContent(
-		event: Event & { target: HTMLSlotElement },
-	): void {
-		this.targetContent = this.getAssignedElementsFromSlot(event.target);
-	}
-
-	private handleSlotContent(event: Event & { target: HTMLSlotElement }): void {
-		switch (event.target.name) {
-			case "click-content":
-				this.clickContent = this.getAssignedElementsFromSlot(event.target);
-				break;
-			case "longpress-content":
-				this.longpressContent = this.getAssignedElementsFromSlot(event.target);
-				break;
-			case "hover-content":
-				this.hoverContent = this.getAssignedElementsFromSlot(event.target);
-				break;
-		}
-	}
-
-	private handleBeforetoggle(event: BeforetoggleOpenEvent): void {
-		const { target } = event;
-		let type: OverlayContentTypes;
-
-		if (target === this.clickOverlayElement) {
-			type = "click";
-		} else if (target === this.longpressOverlayElement) {
-			type = "longpress";
-		} else if (target === this.hoverOverlayElement) {
-			type = "hover";
-			/* c8 ignore next 3 */
-		} else {
-			return;
-		}
-
-		if (event.newState === "open") {
-			this.open = type;
-		} else if (this.open === type) {
-			this.open = undefined;
-		}
-	}
-
-	protected override update(changes: PropertyValues): void {
-		if (changes.has("clickContent")) {
-			this.clickPlacement =
-				((this.clickContent[0]?.getAttribute("placement") ||
-					this.clickContent[0]?.getAttribute("direction")) as Placement) ||
-				undefined;
-		}
-
-		if (changes.has("hoverContent")) {
-			this.hoverPlacement =
-				((this.hoverContent[0]?.getAttribute("placement") ||
-					this.hoverContent[0]?.getAttribute("direction")) as Placement) ||
-				undefined;
-		}
-
-		if (changes.has("longpressContent")) {
-			this.longpressPlacement =
-				((this.longpressContent[0]?.getAttribute("placement") ||
-					this.longpressContent[0]?.getAttribute("direction")) as Placement) ||
-				undefined;
-		}
-
-		super.update(changes);
-	}
-
-	protected renderSlot(name: string): TemplateResult {
-		return html`
-			
-		`;
-	}
-
-	protected renderClickOverlay(): TemplateResult {
-		import("@spectrum-web-components/overlay/sp-overlay.js");
-		const slot = this.renderSlot("click-content");
-
-		if (!this.clickContent.length) {
-			return slot;
-		}
-
-		return html`
-			
-				${slot}
-			
-		`;
-	}
-
-	protected renderHoverOverlay(): TemplateResult {
-		import("@spectrum-web-components/overlay/sp-overlay.js");
-		const slot = this.renderSlot("hover-content");
-
-		if (!this.hoverContent.length) {
-			return slot;
-		}
-
-		return html`
-			
-				${slot}
-			
-		`;
-	}
-
-	protected renderLongpressOverlay(): TemplateResult {
-		import("@spectrum-web-components/overlay/sp-overlay.js");
-		const slot = this.renderSlot("longpress-content");
-
-		if (!this.longpressContent.length) {
-			return slot;
-		}
-
-		return html`
-			
-				${slot}
-			
-			
-		`;
-	}
-
-	protected override render(): TemplateResult {
-		const content = this.content.split(" ");
-
-		// Keyboard event availability documented in README.md
-		/* eslint-disable lit-a11y/click-events-have-key-events */
-		return html`
-			
-			${[
-				content.includes("click") ? this.renderClickOverlay() : html``,
-				content.includes("hover") ? this.renderHoverOverlay() : html``,
-				content.includes("longpress") ? this.renderLongpressOverlay() : html``,
-			]}
-		`;
-		/* eslint-enable lit-a11y/click-events-have-key-events */
-	}
-
-	protected override updated(changes: PropertyValues): void {
-		super.updated(changes);
-
-		if (this.disabled && changes.has("disabled")) {
-			this.open = undefined;
-
-			return;
-		}
-	}
-
-	protected override async getUpdateComplete(): Promise {
-		const complete = (await super.getUpdateComplete()) as boolean;
-
-		return complete;
-	}
+  public static override get styles(): CSSResultArray {
+    return [overlayTriggerStyles];
+  }
+
+  @property()
+  content = "click hover longpress";
+
+  /**
+   * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+   *
+   * @attribute
+   *
+   */
+  @property({ reflect: true })
+  public placement?: Placement;
+
+  @property()
+  public type?: OverlayTriggerInteractions;
+
+  @property({ type: Number })
+  public offset = 6;
+
+  @property({ reflect: true })
+  public open?: OverlayContentTypes;
+
+  @property({ type: Boolean, reflect: true })
+  public disabled = false;
+
+  @property({ attribute: "receives-focus" })
+  public receivesFocus: "true" | "false" | "auto" = "auto";
+
+  @state()
+  private clickContent: HTMLElement[] = [];
+
+  private clickPlacement?: Placement;
+
+  @state()
+  private longpressContent: HTMLElement[] = [];
+
+  private longpressPlacement?: Placement;
+
+  @state()
+  private hoverContent: HTMLElement[] = [];
+
+  private hoverPlacement?: Placement;
+
+  @state()
+  private targetContent: HTMLElement[] = [];
+
+  @query("#click-overlay", true)
+  clickOverlayElement!: Overlay;
+
+  @query("#longpress-overlay", true)
+  longpressOverlayElement!: Overlay;
+
+  @query("#hover-overlay", true)
+  hoverOverlayElement!: Overlay;
+
+  private getAssignedElementsFromSlot(slot: HTMLSlotElement): HTMLElement[] {
+    return slot.assignedElements({ flatten: true }) as HTMLElement[];
+  }
+
+  private handleTriggerContent(
+    event: Event & { target: HTMLSlotElement },
+  ): void {
+    this.targetContent = this.getAssignedElementsFromSlot(event.target);
+  }
+
+  private handleSlotContent(event: Event & { target: HTMLSlotElement }): void {
+    switch (event.target.name) {
+      case "click-content":
+        this.clickContent = this.getAssignedElementsFromSlot(event.target);
+        break;
+      case "longpress-content":
+        this.longpressContent = this.getAssignedElementsFromSlot(event.target);
+        break;
+      case "hover-content":
+        this.hoverContent = this.getAssignedElementsFromSlot(event.target);
+        break;
+    }
+  }
+
+  private handleBeforetoggle(event: BeforetoggleOpenEvent): void {
+    const { target } = event;
+    let type: OverlayContentTypes;
+
+    if (target === this.clickOverlayElement) {
+      type = "click";
+    } else if (target === this.longpressOverlayElement) {
+      type = "longpress";
+    } else if (target === this.hoverOverlayElement) {
+      type = "hover";
+      /* c8 ignore next 3 */
+    } else {
+      return;
+    }
+
+    if (event.newState === "open") {
+      this.open = type;
+    } else if (this.open === type) {
+      this.open = undefined;
+    }
+  }
+
+  protected override update(changes: PropertyValues): void {
+    if (changes.has("clickContent")) {
+      this.clickPlacement =
+        ((this.clickContent[0]?.getAttribute("placement") ||
+          this.clickContent[0]?.getAttribute("direction")) as Placement) ||
+        undefined;
+    }
+
+    if (changes.has("hoverContent")) {
+      this.hoverPlacement =
+        ((this.hoverContent[0]?.getAttribute("placement") ||
+          this.hoverContent[0]?.getAttribute("direction")) as Placement) ||
+        undefined;
+    }
+
+    if (changes.has("longpressContent")) {
+      this.longpressPlacement =
+        ((this.longpressContent[0]?.getAttribute("placement") ||
+          this.longpressContent[0]?.getAttribute("direction")) as Placement) ||
+        undefined;
+    }
+
+    super.update(changes);
+  }
+
+  protected renderSlot(name: string): TemplateResult {
+    return html`
+      
+    `;
+  }
+
+  protected renderClickOverlay(): TemplateResult {
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    const slot = this.renderSlot("click-content");
+
+    if (!this.clickContent.length) {
+      return slot;
+    }
+
+    return html`
+      
+        ${slot}
+      
+    `;
+  }
+
+  protected renderHoverOverlay(): TemplateResult {
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    const slot = this.renderSlot("hover-content");
+
+    if (!this.hoverContent.length) {
+      return slot;
+    }
+
+    return html`
+      
+        ${slot}
+      
+    `;
+  }
+
+  protected renderLongpressOverlay(): TemplateResult {
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+    const slot = this.renderSlot("longpress-content");
+
+    if (!this.longpressContent.length) {
+      return slot;
+    }
+
+    return html`
+      
+        ${slot}
+      
+      
+    `;
+  }
+
+  protected override render(): TemplateResult {
+    const content = this.content.split(" ");
+
+    // Keyboard event availability documented in README.md
+    /* eslint-disable lit-a11y/click-events-have-key-events */
+    return html`
+      
+      ${[
+        content.includes("click") ? this.renderClickOverlay() : html``,
+        content.includes("hover") ? this.renderHoverOverlay() : html``,
+        content.includes("longpress") ? this.renderLongpressOverlay() : html``,
+      ]}
+    `;
+    /* eslint-enable lit-a11y/click-events-have-key-events */
+  }
+
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
+
+    if (this.disabled && changes.has("disabled")) {
+      this.open = undefined;
+
+      return;
+    }
+  }
+
+  protected override async getUpdateComplete(): Promise {
+    const complete = (await super.getUpdateComplete()) as boolean;
+
+    return complete;
+  }
 }
diff --git a/packages/overlay/src/PlacementController.ts b/packages/overlay/src/PlacementController.ts
index f3dbc8a3ea..11a0eec328 100644
--- a/packages/overlay/src/PlacementController.ts
+++ b/packages/overlay/src/PlacementController.ts
@@ -11,45 +11,47 @@ governing permissions and limitations under the License.
 */
 
 import type {
-    ReactiveController,
-    ReactiveElement,
-} from '@spectrum-web-components/base';
+  ReactiveController,
+  ReactiveElement,
+} from "@spectrum-web-components/base";
 import {
-    arrow,
-    autoUpdate,
-    computePosition,
-    flip,
-    offset,
-    Placement,
-    shift,
-    size,
-} from '@floating-ui/dom';
-import type { VirtualTrigger } from './VirtualTrigger.js';
-import type { OpenableElement } from './overlay-types.js';
-import type { Overlay } from './Overlay.js';
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  Placement,
+  shift,
+  size,
+} from "@floating-ui/dom";
+import type { VirtualTrigger } from "./VirtualTrigger.js";
+import type { OpenableElement } from "./overlay-types.js";
+import type { Overlay } from "./Overlay.js";
 
 type OverlayOptionsV1 = {
-    abortPromise?: Promise;
-    delayed?: boolean;
-    offset?: number | [number, number]; // supporting multi-axis
-    placement: Placement;
-    notImmediatelyClosable?: boolean; // rename or place behind other API options
-    receivesFocus?: 'auto';
-    root?: HTMLElement;
-    tipPadding?: number;
-    trigger: HTMLElement | VirtualTrigger;
-    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';
+  abortPromise?: Promise;
+  delayed?: boolean;
+  offset?: number | [number, number]; // supporting multi-axis
+  placement: Placement;
+  notImmediatelyClosable?: boolean; // rename or place behind other API options
+  receivesFocus?: "auto";
+  root?: HTMLElement;
+  tipPadding?: number;
+  trigger: HTMLElement | VirtualTrigger;
+  type?: "modal" | "page" | "hint" | "auto" | "manual";
 };
 
 /**
  * Rounds a number by the device pixel ratio (DPR).
  */
 function roundByDPR(num?: number): number {
-    if (typeof num === 'undefined') return 0;
+  if (typeof num === "undefined") {
+    return 0;
+  }
 
-    const dpr = window.devicePixelRatio || 1;
+  const dpr = window.devicePixelRatio || 1;
 
-    return Math.round(num * dpr) / dpr;
+  return Math.round(num * dpr) / dpr;
 }
 
 // Minimum distance required between the overlay and the edge of the container.
@@ -63,28 +65,28 @@ const MIN_OVERLAY_HEIGHT = 100;
  * Gets fallback placements for the overlay based on the initial placement.
  */
 const getFallbackPlacements = (placement: Placement): Placement[] => {
-    const fallbacks: Record = {
-        left: ['right', 'bottom', 'top'],
-        'left-start': ['right-start', 'bottom', 'top'],
-        'left-end': ['right-end', 'bottom', 'top'],
-        right: ['left', 'bottom', 'top'],
-        'right-start': ['left-start', 'bottom', 'top'],
-        'right-end': ['left-end', 'bottom', 'top'],
-        top: ['bottom', 'left', 'right'],
-        'top-start': ['bottom-start', 'left', 'right'],
-        'top-end': ['bottom-end', 'left', 'right'],
-        bottom: ['top', 'left', 'right'],
-        'bottom-start': ['top-start', 'left', 'right'],
-        'bottom-end': ['top-end', 'left', 'right'],
-    };
-
-    return fallbacks[placement] ?? [placement];
+  const fallbacks: Record = {
+    left: ["right", "bottom", "top"],
+    "left-start": ["right-start", "bottom", "top"],
+    "left-end": ["right-end", "bottom", "top"],
+    right: ["left", "bottom", "top"],
+    "right-start": ["left-start", "bottom", "top"],
+    "right-end": ["left-end", "bottom", "top"],
+    top: ["bottom", "left", "right"],
+    "top-start": ["bottom-start", "left", "right"],
+    "top-end": ["bottom-end", "left", "right"],
+    bottom: ["top", "left", "right"],
+    "bottom-start": ["top-start", "left", "right"],
+    "bottom-end": ["top-end", "left", "right"],
+  };
+
+  return fallbacks[placement] ?? [placement];
 };
 
 /**
  * Symbol used to indicate that the placement has been updated.
  */
-export const placementUpdatedSymbol = Symbol('placement updated');
+export const placementUpdatedSymbol = Symbol("placement updated");
 
 /**
  * Controller for managing the placement of an overlay.
@@ -93,349 +95,340 @@ export const placementUpdatedSymbol = Symbol('placement updated');
  * for managing the positioning and constraints of an overlay element.
  */
 export class PlacementController implements ReactiveController {
-    /**
-     * Function to clean up resources when the controller is no longer needed.
-     */
-    private cleanup?: () => void;
-
-    /**
-     * Initial height of the overlay.
-     */
-    initialHeight?: number;
-
-    /**
-     * Indicates whether the overlay is constrained by available space.
-     */
-    isConstrained?: boolean;
-
-    /**
-     * The host element that uses this controller.
-     */
-    private host!: ReactiveElement & { elements: OpenableElement[] };
-
-    /**
-     * Options for configuring the overlay placement.
-     */
-    private options!: OverlayOptionsV1;
-
-    /**
-     * A WeakMap to store the original placements of overlay elements.
-     */
-    private originalPlacements = new WeakMap();
-
-    /**
-     * The target element for the overlay.
-     */
-    private target!: HTMLElement;
-
-    /**
-     * Creates an instance of the PlacementController.
-     */
-    constructor(host: ReactiveElement & { elements: OpenableElement[] }) {
-        this.host = host;
-        // Add the controller after the MutationObserver has been created in preparation for the `hostConnected`/`hostDisconnected` callbacks to be run.
-        this.host.addController(this);
+  /**
+   * Function to clean up resources when the controller is no longer needed.
+   */
+  private cleanup?: () => void;
+
+  /**
+   * Initial height of the overlay.
+   */
+  initialHeight?: number;
+
+  /**
+   * Indicates whether the overlay is constrained by available space.
+   */
+  isConstrained?: boolean;
+
+  /**
+   * The host element that uses this controller.
+   */
+  private host!: ReactiveElement & { elements: OpenableElement[] };
+
+  /**
+   * Options for configuring the overlay placement.
+   */
+  private options!: OverlayOptionsV1;
+
+  /**
+   * A WeakMap to store the original placements of overlay elements.
+   */
+  private originalPlacements = new WeakMap();
+
+  /**
+   * The target element for the overlay.
+   */
+  private target!: HTMLElement;
+
+  /**
+   * Creates an instance of the PlacementController.
+   */
+  constructor(host: ReactiveElement & { elements: OpenableElement[] }) {
+    this.host = host;
+    // Add the controller after the MutationObserver has been created in preparation for the `hostConnected`/`hostDisconnected` callbacks to be run.
+    this.host.addController(this);
+  }
+
+  /**
+   * Places the overlay relative to the target element.
+   *
+   * This method sets up the necessary configurations and event listeners to manage the
+   * positioning and constraints of the overlay element.
+   */
+  public async placeOverlay(
+    target: HTMLElement = this.target,
+    options: OverlayOptionsV1 = this.options,
+  ): Promise {
+    this.target = target;
+    this.options = options;
+
+    if (!target || !options) {
+      return;
     }
 
-    /**
-     * Places the overlay relative to the target element.
-     *
-     * This method sets up the necessary configurations and event listeners to manage the
-     * positioning and constraints of the overlay element.
-     */
-    public async placeOverlay(
-        target: HTMLElement = this.target,
-        options: OverlayOptionsV1 = this.options
-    ): Promise {
-        this.target = target;
-        this.options = options;
-
-        if (!target || !options) return;
-
-        // Set up auto-update for ancestor resize events.
-        const cleanupAncestorResize = autoUpdate(
-            options.trigger,
-            target,
-            this.closeForAncestorUpdate,
-            {
-                ancestorResize: false,
-                elementResize: false,
-                layoutShift: false,
+    // Set up auto-update for ancestor resize events.
+    const cleanupAncestorResize = autoUpdate(
+      options.trigger,
+      target,
+      this.closeForAncestorUpdate,
+      {
+        ancestorResize: false,
+        elementResize: false,
+        layoutShift: false,
+      },
+    );
+
+    // Set up auto-update for element resize events.
+    const cleanupElementResize = autoUpdate(
+      options.trigger,
+      target,
+      this.updatePlacement,
+      {
+        ancestorScroll: false,
+      },
+    );
+
+    // Define the cleanup function to remove event listeners and reset placements.
+    this.cleanup = () => {
+      this.host.elements?.forEach((element) => {
+        element.addEventListener(
+          "sp-closed",
+          () => {
+            const placement = this.originalPlacements.get(element);
+
+            if (placement) {
+              element.setAttribute("placement", placement);
             }
-        );
 
-        // Set up auto-update for element resize events.
-        const cleanupElementResize = autoUpdate(
-            options.trigger,
-            target,
-            this.updatePlacement,
-            {
-                ancestorScroll: false,
-            }
+            this.originalPlacements.delete(element);
+          },
+          { once: true },
         );
-
-        // Define the cleanup function to remove event listeners and reset placements.
-        this.cleanup = () => {
-            this.host.elements?.forEach((element) => {
-                element.addEventListener(
-                    'sp-closed',
-                    () => {
-                        const placement = this.originalPlacements.get(element);
-
-                        if (placement) {
-                            element.setAttribute('placement', placement);
-                        }
-
-                        this.originalPlacements.delete(element);
-                    },
-                    { once: true }
-                );
-            });
-            cleanupAncestorResize();
-            cleanupElementResize();
-        };
-    }
-
-    /**
-     * Flag to allow or disallow placement updates.
-     */
-    public allowPlacementUpdate = false;
-
-    /**
-     * Closes the overlay if an ancestor element is updated.
-     *
-     * This method checks if placement updates are allowed and if the overlay type is not 'modal'.
-     * If these conditions are met and a cleanup function is defined, it dispatches a 'close' event
-     * on the target element to close the overlay.
-     */
-    closeForAncestorUpdate = (): void => {
-        if (
-            !this.allowPlacementUpdate &&
-            this.options.type !== 'modal' &&
-            this.cleanup
-        ) {
-            this.target.dispatchEvent(new Event('close', { bubbles: true }));
-        }
-
-        // Reset the flag to disallow placement updates.
-        this.allowPlacementUpdate = false;
-    };
-
-    /**
-     * Updates the placement of the overlay.
-     *
-     * This method calls the computePlacement method to recalculate the overlay's position.
-     */
-    private updatePlacement = (): void => {
-        this.computePlacement();
+      });
+      cleanupAncestorResize();
+      cleanupElementResize();
     };
+  }
+
+  /**
+   * Flag to allow or disallow placement updates.
+   */
+  public allowPlacementUpdate = false;
+
+  /**
+   * Closes the overlay if an ancestor element is updated.
+   *
+   * This method checks if placement updates are allowed and if the overlay type is not 'modal'.
+   * If these conditions are met and a cleanup function is defined, it dispatches a 'close' event
+   * on the target element to close the overlay.
+   */
+  closeForAncestorUpdate = (): void => {
+    if (
+      !this.allowPlacementUpdate &&
+      this.options.type !== "modal" &&
+      this.cleanup
+    ) {
+      this.target.dispatchEvent(new Event("close", { bubbles: true }));
+    }
 
-    /**
-     * Computes the placement of the overlay relative to the target element.
-     *
-     * This method calculates the necessary positioning and constraints for the overlay element
-     * using various middleware functions. It updates the overlay's style and attributes based
-     * on the computed position.
-     */
-    async computePlacement(): Promise {
-        const { options, target } = this;
-
-        // Wait for document fonts to be ready before computing placement.
-        await (document.fonts ? document.fonts.ready : Promise.resolve());
-
-        // Determine the flip middleware based on the type of trigger element.
-        const flipMiddleware = !(options.trigger instanceof HTMLElement)
-            ? flip({
-                  padding: REQUIRED_DISTANCE_TO_EDGE,
-                  fallbackPlacements: getFallbackPlacements(options.placement),
-              })
-            : flip();
-
-        // Extract main axis and cross axis offsets from options.
-        const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)
-            ? options.offset
-            : [options.offset, 0];
-
-        // Find the tip element within the host elements.
-        const tipElement = this.host.elements.find(
-            (el) => el.tipElement
-        )?.tipElement;
-
-        // Define middleware functions for positioning and constraints.
-        const middleware = [
-            offset({
-                mainAxis,
-                crossAxis,
-            }),
-            shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),
-            flipMiddleware,
-            size({
-                padding: REQUIRED_DISTANCE_TO_EDGE,
-                apply: ({
-                    availableWidth,
-                    availableHeight,
-                    rects: { floating },
-                }) => {
-                    const maxHeight = Math.max(
-                        MIN_OVERLAY_HEIGHT,
-                        Math.floor(availableHeight)
-                    );
-                    const actualHeight = floating.height;
-
-                    this.initialHeight = !this.isConstrained // && !this.virtualTrigger
-                        ? actualHeight
-                        : this.initialHeight || actualHeight;
-                    this.isConstrained =
-                        actualHeight < this.initialHeight ||
-                        maxHeight <= actualHeight;
-                    const appliedHeight = this.isConstrained
-                        ? `${maxHeight}px`
-                        : '';
-
-                    Object.assign(target.style, {
-                        maxWidth: `${Math.floor(availableWidth)}px`,
-                        maxHeight: appliedHeight,
-                    });
-                },
+    // Reset the flag to disallow placement updates.
+    this.allowPlacementUpdate = false;
+  };
+
+  /**
+   * Updates the placement of the overlay.
+   *
+   * This method calls the computePlacement method to recalculate the overlay's position.
+   */
+  private updatePlacement = (): void => {
+    this.computePlacement();
+  };
+
+  /**
+   * Computes the placement of the overlay relative to the target element.
+   *
+   * This method calculates the necessary positioning and constraints for the overlay element
+   * using various middleware functions. It updates the overlay's style and attributes based
+   * on the computed position.
+   */
+  async computePlacement(): Promise {
+    const { options, target } = this;
+
+    // Wait for document fonts to be ready before computing placement.
+    await (document.fonts ? document.fonts.ready : Promise.resolve());
+
+    // Determine the flip middleware based on the type of trigger element.
+    const flipMiddleware = !(options.trigger instanceof HTMLElement)
+      ? flip({
+          padding: REQUIRED_DISTANCE_TO_EDGE,
+          fallbackPlacements: getFallbackPlacements(options.placement),
+        })
+      : flip();
+
+    // Extract main axis and cross axis offsets from options.
+    const [mainAxis = 0, crossAxis = 0] = Array.isArray(options?.offset)
+      ? options.offset
+      : [options.offset, 0];
+
+    // Find the tip element within the host elements.
+    const tipElement = this.host.elements.find(
+      (el) => el.tipElement,
+    )?.tipElement;
+
+    // Define middleware functions for positioning and constraints.
+    const middleware = [
+      offset({
+        mainAxis,
+        crossAxis,
+      }),
+      shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),
+      flipMiddleware,
+      size({
+        padding: REQUIRED_DISTANCE_TO_EDGE,
+        apply: ({ availableWidth, availableHeight, rects: { floating } }) => {
+          const maxHeight = Math.max(
+            MIN_OVERLAY_HEIGHT,
+            Math.floor(availableHeight),
+          );
+          const actualHeight = floating.height;
+
+          this.initialHeight = !this.isConstrained // && !this.virtualTrigger
+            ? actualHeight
+            : this.initialHeight || actualHeight;
+          this.isConstrained =
+            actualHeight < this.initialHeight || maxHeight <= actualHeight;
+          const appliedHeight = this.isConstrained ? `${maxHeight}px` : "";
+
+          Object.assign(target.style, {
+            maxWidth: `${Math.floor(availableWidth)}px`,
+            maxHeight: appliedHeight,
+          });
+        },
+      }),
+      ...(tipElement
+        ? [
+            arrow({
+              element: tipElement,
+              padding: options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,
             }),
-            ...(tipElement
-                ? [
-                      arrow({
-                          element: tipElement,
-                          padding:
-                              options.tipPadding || REQUIRED_DISTANCE_TO_EDGE,
-                      }),
-                  ]
-                : []),
-        ];
-
-        // Compute the position of the overlay using the defined middleware.
-        const { x, y, placement, middlewareData } = await computePosition(
-            options.trigger,
-            target,
-            {
-                placement: options.placement,
-                middleware,
-                strategy: 'fixed',
-            }
+          ]
+        : []),
+    ];
+
+    // Compute the position of the overlay using the defined middleware.
+    const { x, y, placement, middlewareData } = await computePosition(
+      options.trigger,
+      target,
+      {
+        placement: options.placement,
+        middleware,
+        strategy: "fixed",
+      },
+    );
+
+    // Update the overlay's style with the computed position.
+    Object.assign(target.style, {
+      top: "0px",
+      left: "0px",
+      translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,
+    });
+
+    // Set the 'actual-placement' attribute on the target element.
+    target.setAttribute("actual-placement", placement);
+
+    // Update the placement attribute for each host element.
+    this.host.elements?.forEach((element) => {
+      if (!this.originalPlacements.has(element)) {
+        this.originalPlacements.set(
+          element,
+          element.getAttribute("placement") as Placement,
         );
-
-        // Update the overlay's style with the computed position.
-        Object.assign(target.style, {
-            top: '0px',
-            left: '0px',
-            translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`,
-        });
-
-        // Set the 'actual-placement' attribute on the target element.
-        target.setAttribute('actual-placement', placement);
-
-        // Update the placement attribute for each host element.
-        this.host.elements?.forEach((element) => {
-            if (!this.originalPlacements.has(element)) {
-                this.originalPlacements.set(
-                    element,
-                    element.getAttribute('placement') as Placement
-                );
-            }
-
-            element.setAttribute('placement', placement);
-        });
-
-        // Update the tip element's style with the computed arrow position.
-        if (tipElement && middlewareData.arrow) {
-            const { x: arrowX, y: arrowY } = middlewareData.arrow;
-
-            Object.assign(tipElement.style, {
-                top:
-                    placement.startsWith('right') ||
-                    placement.startsWith('left')
-                        ? '0px'
-                        : '',
-                left:
-                    placement.startsWith('bottom') ||
-                    placement.startsWith('top')
-                        ? '0px'
-                        : '',
-                translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,
-            });
-        }
+      }
+
+      element.setAttribute("placement", placement);
+    });
+
+    // Update the tip element's style with the computed arrow position.
+    if (tipElement && middlewareData.arrow) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+      Object.assign(tipElement.style, {
+        top:
+          placement.startsWith("right") || placement.startsWith("left")
+            ? "0px"
+            : "",
+        left:
+          placement.startsWith("bottom") || placement.startsWith("top")
+            ? "0px"
+            : "",
+        translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}px`,
+      });
     }
-
-    /**
-     * Clears the overlay's position styles.
-     *
-     * This method removes the max-height and max-width styles from the target element,
-     * and resets the initial height and constrained state of the overlay.
-     */
-    public clearOverlayPosition(): void {
-        if (!this.target) {
-            return;
-        }
-
-        // Remove max-height and max-width styles from the target element.
-        this.target.style.removeProperty('max-height');
-        this.target.style.removeProperty('max-width');
-        // Reset the initial height and constrained state.
-        this.initialHeight = undefined;
-        this.isConstrained = false;
+  }
+
+  /**
+   * Clears the overlay's position styles.
+   *
+   * This method removes the max-height and max-width styles from the target element,
+   * and resets the initial height and constrained state of the overlay.
+   */
+  public clearOverlayPosition(): void {
+    if (!this.target) {
+      return;
     }
 
-    /**
-     * Resets the overlay's position.
-     *
-     * This method clears the overlay's position, forces a reflow, and recomputes the placement.
-     */
-    public resetOverlayPosition = (): void => {
-        if (!this.target || !this.options) return;
-
-        // Clear the overlay's position.
-        this.clearOverlayPosition();
-
-        // Force a reflow.
-        this.host.offsetHeight;
-        // Recompute the placement.
-        this.computePlacement();
-    };
-
-    /**
-     * Lifecycle method called when the host element is connected to the DOM.
-     *
-     * This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.
-     */
-    hostConnected(): void {
-        document.addEventListener(
-            'sp-update-overlays',
-            this.resetOverlayPosition
-        );
+    // Remove max-height and max-width styles from the target element.
+    this.target.style.removeProperty("max-height");
+    this.target.style.removeProperty("max-width");
+    // Reset the initial height and constrained state.
+    this.initialHeight = undefined;
+    this.isConstrained = false;
+  }
+
+  /**
+   * Resets the overlay's position.
+   *
+   * This method clears the overlay's position, forces a reflow, and recomputes the placement.
+   */
+  public resetOverlayPosition = (): void => {
+    if (!this.target || !this.options) {
+      return;
     }
 
-    /**
-     * Lifecycle method called when the host element is updated.
-     *
-     * This method cleans up resources if the overlay is not open.
-     */
-    hostUpdated(): void {
-        if (!(this.host as Overlay).open) {
-            // Clean up resources if the overlay is not open.
-            this.cleanup?.();
-            this.cleanup = undefined;
-        }
-    }
-
-    /**
-     * Lifecycle method called when the host element is disconnected from the DOM.
-     *
-     * This method removes the event listener and cleans up resources.
-     */
-    hostDisconnected(): void {
-        // Clean up resources.
-        this.cleanup?.();
-        this.cleanup = undefined;
-        // Remove the event listener.
-        document.removeEventListener(
-            'sp-update-overlays',
-            this.resetOverlayPosition
-        );
+    // Clear the overlay's position.
+    this.clearOverlayPosition();
+
+    // Force a reflow.
+    this.host.offsetHeight;
+    // Recompute the placement.
+    this.computePlacement();
+  };
+
+  /**
+   * Lifecycle method called when the host element is connected to the DOM.
+   *
+   * This method sets up an event listener to reset the overlay's position when the 'sp-update-overlays' event is dispatched.
+   */
+  hostConnected(): void {
+    document.addEventListener("sp-update-overlays", this.resetOverlayPosition);
+  }
+
+  /**
+   * Lifecycle method called when the host element is updated.
+   *
+   * This method cleans up resources if the overlay is not open.
+   */
+  hostUpdated(): void {
+    if (!(this.host as Overlay).open) {
+      // Clean up resources if the overlay is not open.
+      this.cleanup?.();
+      this.cleanup = undefined;
     }
+  }
+
+  /**
+   * Lifecycle method called when the host element is disconnected from the DOM.
+   *
+   * This method removes the event listener and cleans up resources.
+   */
+  hostDisconnected(): void {
+    // Clean up resources.
+    this.cleanup?.();
+    this.cleanup = undefined;
+    // Remove the event listener.
+    document.removeEventListener(
+      "sp-update-overlays",
+      this.resetOverlayPosition,
+    );
+  }
 }
diff --git a/packages/overlay/src/VirtualTrigger.ts b/packages/overlay/src/VirtualTrigger.ts
index f12c47afc6..1383f9cdef 100644
--- a/packages/overlay/src/VirtualTrigger.ts
+++ b/packages/overlay/src/VirtualTrigger.ts
@@ -9,37 +9,37 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { AbstractOverlay } from './AbstractOverlay.js';
+import { AbstractOverlay } from "./AbstractOverlay.js";
 
 export class VirtualTrigger {
-    private x = 0;
-    private y = 0;
+  private x = 0;
+  private y = 0;
 
-    public constructor(x: number, y: number) {
-        this.x = x;
-        this.y = y;
-    }
+  public constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
 
-    public updateBoundingClientRect(x: number, y: number): void {
-        this.x = x;
-        this.y = y;
-        AbstractOverlay.update();
-    }
+  public updateBoundingClientRect(x: number, y: number): void {
+    this.x = x;
+    this.y = y;
+    AbstractOverlay.update();
+  }
 
-    public getBoundingClientRect(): DOMRect {
-        return {
-            width: 0,
-            height: 0,
-            top: this.y,
-            right: this.x,
-            y: this.y,
-            x: this.x,
-            bottom: this.y,
-            left: this.x,
-            /* c8 ignore next 3 */
-            toJSON() {
-                return;
-            },
-        };
-    }
+  public getBoundingClientRect(): DOMRect {
+    return {
+      width: 0,
+      height: 0,
+      top: this.y,
+      right: this.x,
+      y: this.y,
+      x: this.x,
+      bottom: this.y,
+      left: this.x,
+      /* c8 ignore next 3 */
+      toJSON() {
+        return;
+      },
+    };
+  }
 }
diff --git a/packages/overlay/src/events.ts b/packages/overlay/src/events.ts
index 90aade520d..27afa95d79 100644
--- a/packages/overlay/src/events.ts
+++ b/packages/overlay/src/events.ts
@@ -10,56 +10,56 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import type { TriggerInteractions } from './overlay-types.js';
+import type { TriggerInteractions } from "./overlay-types.js";
 
 export class BeforetoggleClosedEvent extends Event {
-    currentState = 'open';
-    newState = 'closed';
-    constructor() {
-        super('beforetoggle', {
-            bubbles: false,
-            composed: false,
-        });
-    }
+  currentState = "open";
+  newState = "closed";
+  constructor() {
+    super("beforetoggle", {
+      bubbles: false,
+      composed: false,
+    });
+  }
 }
 
 export class BeforetoggleOpenEvent extends Event {
-    currentState = 'closed';
-    newState = 'open';
-    constructor() {
-        super('beforetoggle', {
-            bubbles: false,
-            composed: false,
-        });
-    }
+  currentState = "closed";
+  newState = "open";
+  constructor() {
+    super("beforetoggle", {
+      bubbles: false,
+      composed: false,
+    });
+  }
 }
 
 export class OverlayStateEvent extends Event {
-    detail!: {
-        interaction: string;
-        reason?: 'external-click';
-    };
+  detail!: {
+    interaction: string;
+    reason?: "external-click";
+  };
 
-    constructor(
-        type: string,
-        public overlay: HTMLElement,
-        {
-            publish,
-            interaction,
-            reason,
-        }: {
-            publish?: boolean;
-            interaction: TriggerInteractions;
-            reason?: 'external-click';
-        }
-    ) {
-        super(type, {
-            bubbles: publish,
-            composed: publish,
-        });
-        this.detail = {
-            interaction,
-            reason,
-        };
-    }
+  constructor(
+    type: string,
+    public overlay: HTMLElement,
+    {
+      publish,
+      interaction,
+      reason,
+    }: {
+      publish?: boolean;
+      interaction: TriggerInteractions;
+      reason?: "external-click";
+    },
+  ) {
+    super(type, {
+      bubbles: publish,
+      composed: publish,
+    });
+    this.detail = {
+      interaction,
+      reason,
+    };
+  }
 }
diff --git a/packages/overlay/src/fullSizePlugin.ts b/packages/overlay/src/fullSizePlugin.ts
index 033bfcdd4e..be3568cd44 100644
--- a/packages/overlay/src/fullSizePlugin.ts
+++ b/packages/overlay/src/fullSizePlugin.ts
@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    detectOverflow,
-    MiddlewareReturn,
-    MiddlewareState,
-} from '@floating-ui/dom';
+  detectOverflow,
+  MiddlewareReturn,
+  MiddlewareState,
+} from "@floating-ui/dom";
 
 /**
  * A plugin that sets the size of an element to full size based on available space.
@@ -21,57 +21,53 @@ import {
  * @property {number} padding - The padding to be applied to the element.
  */
 export const fullSize = (
-    options: { padding: number } = { padding: 0 }
+  options: { padding: number } = { padding: 0 },
 ): {
-    name: string;
-    fn: (middlewareState: MiddlewareState) => Promise<
-        MiddlewareReturn & {
-            data: { availableWidth: number; availableHeight: number };
-        }
-    >;
+  name: string;
+  fn: (middlewareState: MiddlewareState) => Promise<
+    MiddlewareReturn & {
+      data: { availableWidth: number; availableHeight: number };
+    }
+  >;
 } => ({
-    name: 'fullSize',
-    async fn(middlewareState: MiddlewareState): Promise<
-        MiddlewareReturn & {
-            data: { availableWidth: number; availableHeight: number };
-        }
-    > {
-        const overflow = await detectOverflow(middlewareState, options);
-        let availableHeight =
-            -overflow.top -
-            overflow.bottom +
-            middlewareState.rects.floating.height;
-        let availableWidth =
-            -overflow.left -
-            overflow.right +
-            middlewareState.rects.floating.width;
+  name: "fullSize",
+  async fn(middlewareState: MiddlewareState): Promise<
+    MiddlewareReturn & {
+      data: { availableWidth: number; availableHeight: number };
+    }
+  > {
+    const overflow = await detectOverflow(middlewareState, options);
+    let availableHeight =
+      -overflow.top - overflow.bottom + middlewareState.rects.floating.height;
+    let availableWidth =
+      -overflow.left - overflow.right + middlewareState.rects.floating.width;
 
-        // Adjust available height and width based on the placement of the floating element
-        if (middlewareState.placement.startsWith('bottom')) {
-            availableHeight -= middlewareState.rects.reference.height;
-            availableHeight -= middlewareState.rects.reference.y;
-            availableHeight -= middlewareState.middlewareData.offset?.y || 0;
-            availableHeight += options.padding;
-        } else if (middlewareState.placement.startsWith('top')) {
-            availableHeight = middlewareState.rects.reference.y;
-            availableHeight -= middlewareState.middlewareData.offset?.y || 0;
-            availableHeight += options.padding;
-        } else if (middlewareState.placement.startsWith('right')) {
-            availableWidth -= middlewareState.rects.reference.width;
-            availableWidth -= middlewareState.rects.reference.x;
-            availableWidth -= middlewareState.middlewareData.offset?.x || 0;
-            availableWidth += options.padding;
-        } else if (middlewareState.placement.startsWith('left')) {
-            availableWidth = middlewareState.rects.reference.x;
-            availableWidth -= middlewareState.middlewareData.offset?.x || 0;
-            availableWidth += options.padding;
-        }
+    // Adjust available height and width based on the placement of the floating element
+    if (middlewareState.placement.startsWith("bottom")) {
+      availableHeight -= middlewareState.rects.reference.height;
+      availableHeight -= middlewareState.rects.reference.y;
+      availableHeight -= middlewareState.middlewareData.offset?.y || 0;
+      availableHeight += options.padding;
+    } else if (middlewareState.placement.startsWith("top")) {
+      availableHeight = middlewareState.rects.reference.y;
+      availableHeight -= middlewareState.middlewareData.offset?.y || 0;
+      availableHeight += options.padding;
+    } else if (middlewareState.placement.startsWith("right")) {
+      availableWidth -= middlewareState.rects.reference.width;
+      availableWidth -= middlewareState.rects.reference.x;
+      availableWidth -= middlewareState.middlewareData.offset?.x || 0;
+      availableWidth += options.padding;
+    } else if (middlewareState.placement.startsWith("left")) {
+      availableWidth = middlewareState.rects.reference.x;
+      availableWidth -= middlewareState.middlewareData.offset?.x || 0;
+      availableWidth += options.padding;
+    }
 
-        return {
-            data: {
-                availableWidth,
-                availableHeight,
-            },
-        };
-    },
+    return {
+      data: {
+        availableWidth,
+        availableHeight,
+      },
+    };
+  },
 });
diff --git a/packages/overlay/src/index.ts b/packages/overlay/src/index.ts
index 62a79f2e11..cb7e08f5dd 100644
--- a/packages/overlay/src/index.ts
+++ b/packages/overlay/src/index.ts
@@ -9,9 +9,9 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Overlay.js';
-export * from './OverlayTrigger.js';
-export * from './overlay-types.js';
-export * from './VirtualTrigger.js';
-export * from './loader.js';
-export * from './overlay-trigger-directive.js';
+export * from "./Overlay.js";
+export * from "./OverlayTrigger.js";
+export * from "./overlay-types.js";
+export * from "./VirtualTrigger.js";
+export * from "./loader.js";
+export * from "./overlay-trigger-directive.js";
diff --git a/packages/overlay/src/loader.ts b/packages/overlay/src/loader.ts
index f438e8135d..6a1230a347 100644
--- a/packages/overlay/src/loader.ts
+++ b/packages/overlay/src/loader.ts
@@ -11,25 +11,25 @@ governing permissions and limitations under the License.
 */
 
 import type {
-    OverlayOptions,
-    OverlayOptionsV1,
-    TriggerInteractionsV1,
-} from './overlay-types.js';
-import { Overlay } from './Overlay.js';
+  OverlayOptions,
+  OverlayOptionsV1,
+  TriggerInteractionsV1,
+} from "./overlay-types.js";
+import { Overlay } from "./Overlay.js";
 
 // Re-export Overlay.open and openOverlay to persist functionality from before 0.37.0.
 // Wrap it in a method (which needs duplicate argument typings) instead of exporting
 // the static member directly to ensure `this` is bound correctly therein.
 export async function openOverlay(
-    trigger: HTMLElement,
-    interaction: TriggerInteractionsV1,
-    content: HTMLElement,
-    optionsV1: OverlayOptionsV1
+  trigger: HTMLElement,
+  interaction: TriggerInteractionsV1,
+  content: HTMLElement,
+  optionsV1: OverlayOptionsV1,
 ): Promise<() => void>;
 
 export async function openOverlay(
-    content: HTMLElement,
-    options?: OverlayOptions
+  content: HTMLElement,
+  options?: OverlayOptions,
 ): Promise;
 
 /**
@@ -41,15 +41,15 @@ export async function openOverlay(
  * @property {OverlayOptionsV1} optionsV1 - The overlay options for version 1.
  */
 export async function openOverlay(
-    triggerOrContent: HTMLElement,
-    interactionOrOptions: TriggerInteractionsV1 | OverlayOptions | undefined,
-    content?: HTMLElement,
-    optionsV1?: OverlayOptionsV1
+  triggerOrContent: HTMLElement,
+  interactionOrOptions: TriggerInteractionsV1 | OverlayOptions | undefined,
+  content?: HTMLElement,
+  optionsV1?: OverlayOptionsV1,
 ): Promise void)> {
-    return Overlay.open(
-        triggerOrContent,
-        interactionOrOptions as TriggerInteractionsV1,
-        content as HTMLElement,
-        optionsV1 as OverlayOptionsV1
-    );
+  return Overlay.open(
+    triggerOrContent,
+    interactionOrOptions as TriggerInteractionsV1,
+    content as HTMLElement,
+    optionsV1 as OverlayOptionsV1,
+  );
 }
diff --git a/packages/overlay/src/overlay-events.ts b/packages/overlay/src/overlay-events.ts
index a0f707fea6..b1380a9f25 100644
--- a/packages/overlay/src/overlay-events.ts
+++ b/packages/overlay/src/overlay-events.ts
@@ -11,15 +11,15 @@ governing permissions and limitations under the License.
 */
 
 export class OverlayCloseEvent extends Event {
-    root?: HTMLElement;
-    constructor({ root }: { root?: HTMLElement }) {
-        super('sp-overlay-close', { bubbles: true, composed: true });
-        this.root = root;
-    }
+  root?: HTMLElement;
+  constructor({ root }: { root?: HTMLElement }) {
+    super("sp-overlay-close", { bubbles: true, composed: true });
+    this.root = root;
+  }
 }
 
 declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-overlay-close': CustomEvent;
-    }
+  interface GlobalEventHandlersEventMap {
+    "sp-overlay-close": CustomEvent;
+  }
 }
diff --git a/packages/overlay/src/overlay-timer.ts b/packages/overlay/src/overlay-timer.ts
index 68641649d6..ccc9371dd1 100644
--- a/packages/overlay/src/overlay-timer.ts
+++ b/packages/overlay/src/overlay-timer.ts
@@ -18,95 +18,93 @@ const DEFAULT_COOLDOWN = 1000;
  * https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance
  */
 export class OverlayTimer {
-    private warmUpDelay = DEFAULT_WARMUP;
-    private coolDownDelay = DEFAULT_COOLDOWN;
+  private warmUpDelay = DEFAULT_WARMUP;
+  private coolDownDelay = DEFAULT_COOLDOWN;
 
-    private isWarm = false;
-    private cooldownTimeout?: number;
+  private isWarm = false;
+  private cooldownTimeout?: number;
 
-    private component?: HTMLElement;
-    private timeout = 0;
-    private promise?: Promise;
-    private resolve?: (cancelled: boolean) => void;
+  private component?: HTMLElement;
+  private timeout = 0;
+  private promise?: Promise;
+  private resolve?: (cancelled: boolean) => void;
 
-    constructor(
-        options: { warmUpDelay?: number; coolDownDelay?: number } = {}
-    ) {
-        Object.assign(this, options);
-    }
+  constructor(options: { warmUpDelay?: number; coolDownDelay?: number } = {}) {
+    Object.assign(this, options);
+  }
 
-    public async openTimer(component: HTMLElement): Promise {
-        this.cancelCooldownTimer();
+  public async openTimer(component: HTMLElement): Promise {
+    this.cancelCooldownTimer();
 
-        if (!this.component || component !== this.component) {
-            if (this.component) {
-                this.close(this.component);
-                this.cancelCooldownTimer();
-            }
-
-            this.component = component;
-
-            if (this.isWarm) {
-                return false;
-            }
-
-            this.promise = new Promise((resolve) => {
-                this.resolve = resolve;
-                this.timeout = window.setTimeout(() => {
-                    if (this.resolve) {
-                        this.resolve(false);
-                        this.isWarm = true;
-                    }
-                }, this.warmUpDelay);
-            });
-
-            return this.promise;
-        } else if (this.promise) {
-            return this.promise;
-            /* c8 ignore next 4 */
-        } else {
-            // This should never happen
-            throw new Error('Inconsistent state');
-        }
+    if (!this.component || component !== this.component) {
+      if (this.component) {
+        this.close(this.component);
+        this.cancelCooldownTimer();
+      }
+
+      this.component = component;
+
+      if (this.isWarm) {
+        return false;
+      }
+
+      this.promise = new Promise((resolve) => {
+        this.resolve = resolve;
+        this.timeout = window.setTimeout(() => {
+          if (this.resolve) {
+            this.resolve(false);
+            this.isWarm = true;
+          }
+        }, this.warmUpDelay);
+      });
+
+      return this.promise;
+    } else if (this.promise) {
+      return this.promise;
+      /* c8 ignore next 4 */
+    } else {
+      // This should never happen
+      throw new Error("Inconsistent state");
     }
+  }
 
-    public close(component: HTMLElement): void {
-        if (this.component && this.component === component) {
-            this.resetCooldownTimer();
-
-            if (this.timeout > 0) {
-                clearTimeout(this.timeout);
-                this.timeout = 0;
-            }
+  public close(component: HTMLElement): void {
+    if (this.component && this.component === component) {
+      this.resetCooldownTimer();
 
-            if (this.resolve) {
-                this.resolve(true);
-                delete this.resolve;
-            }
+      if (this.timeout > 0) {
+        clearTimeout(this.timeout);
+        this.timeout = 0;
+      }
 
-            delete this.promise;
-            delete this.component;
-        }
-    }
+      if (this.resolve) {
+        this.resolve(true);
+        delete this.resolve;
+      }
 
-    private resetCooldownTimer(): void {
-        if (this.isWarm) {
-            if (this.cooldownTimeout) {
-                window.clearTimeout(this.cooldownTimeout);
-            }
-
-            this.cooldownTimeout = window.setTimeout(() => {
-                this.isWarm = false;
-                delete this.cooldownTimeout;
-            }, this.coolDownDelay);
-        }
+      delete this.promise;
+      delete this.component;
     }
+  }
 
-    private cancelCooldownTimer(): void {
-        if (this.cooldownTimeout) {
-            window.clearTimeout(this.cooldownTimeout);
-        }
+  private resetCooldownTimer(): void {
+    if (this.isWarm) {
+      if (this.cooldownTimeout) {
+        window.clearTimeout(this.cooldownTimeout);
+      }
 
+      this.cooldownTimeout = window.setTimeout(() => {
+        this.isWarm = false;
         delete this.cooldownTimeout;
+      }, this.coolDownDelay);
+    }
+  }
+
+  private cancelCooldownTimer(): void {
+    if (this.cooldownTimeout) {
+      window.clearTimeout(this.cooldownTimeout);
     }
+
+    delete this.cooldownTimeout;
+  }
 }
diff --git a/packages/overlay/src/overlay-trigger-directive.ts b/packages/overlay/src/overlay-trigger-directive.ts
index d4b3ae5d93..41e2d50dc5 100644
--- a/packages/overlay/src/overlay-trigger-directive.ts
+++ b/packages/overlay/src/overlay-trigger-directive.ts
@@ -10,137 +10,140 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    type ElementPart,
-    nothing,
-    render,
-    type RenderOptions,
-    type TemplateResult,
-} from '@spectrum-web-components/base';
-import { directive } from '@spectrum-web-components/base/src/async-directive.js';
-import { strategies } from './strategies.js';
-import type { OverlayOptions, TriggerInteraction } from './overlay-types.js';
-import type { ClickController } from './ClickController.js';
-import type { HoverController } from './HoverController.js';
-import type { LongpressController } from './LongpressController.js';
+  type ElementPart,
+  nothing,
+  render,
+  type RenderOptions,
+  type TemplateResult,
+} from "@spectrum-web-components/base";
+import { directive } from "@spectrum-web-components/base/src/async-directive.js";
+import { strategies } from "./strategies.js";
+import type { OverlayOptions, TriggerInteraction } from "./overlay-types.js";
+import type { ClickController } from "./ClickController.js";
+import type { HoverController } from "./HoverController.js";
+import type { LongpressController } from "./LongpressController.js";
 import {
-    removeSlottableRequest,
-    type SlottableRequestEvent,
-} from './slottable-request-event.js';
-import { SlottableRequestDirective } from './slottable-request-directive.js';
-import { AbstractOverlay } from './AbstractOverlay.js';
-import { InteractionTypes } from './InteractionController.js';
+  removeSlottableRequest,
+  type SlottableRequestEvent,
+} from "./slottable-request-event.js";
+import { SlottableRequestDirective } from "./slottable-request-directive.js";
+import { AbstractOverlay } from "./AbstractOverlay.js";
+import { InteractionTypes } from "./InteractionController.js";
 
 export type InsertionOptions = {
-    el: HTMLElement | (() => HTMLElement);
-    where: InsertPosition;
+  el: HTMLElement | (() => HTMLElement);
+  where: InsertPosition;
 };
 
 export type OverlayTriggerOptions = {
-    open?: boolean;
-    triggerInteraction: TriggerInteraction;
-    overlayOptions: OverlayOptions;
-    insertionOptions?: InsertionOptions;
+  open?: boolean;
+  triggerInteraction: TriggerInteraction;
+  overlayOptions: OverlayOptions;
+  insertionOptions?: InsertionOptions;
 };
 
 export class OverlayTriggerDirective extends SlottableRequestDirective {
-    private host?: object;
-    private overlay!: AbstractOverlay;
-    private strategy!: ClickController | HoverController | LongpressController;
-
-    protected defaultOptions: OverlayTriggerOptions = {
-        triggerInteraction: 'click',
-        overlayOptions: {
-            type: 'auto',
-            offset: 0,
-        },
-    };
-    protected options: OverlayOptions = {
-        ...this.defaultOptions.overlayOptions,
+  private host?: object;
+  private overlay!: AbstractOverlay;
+  private strategy!: ClickController | HoverController | LongpressController;
+
+  protected defaultOptions: OverlayTriggerOptions = {
+    triggerInteraction: "click",
+    overlayOptions: {
+      type: "auto",
+      offset: 0,
+    },
+  };
+  protected options: OverlayOptions = {
+    ...this.defaultOptions.overlayOptions,
+  };
+  protected insertionOptions?: InsertionOptions;
+
+  /* c8 ignore next 9 */
+  override render(
+    _template: () => TemplateResult,
+    _options?: Partial,
+  ): unknown {
+    // render function here just defines the interface to the update call later
+    // we don't have anything to render since this is intended to be an ElementPart directive
+    // so will be used on an element and is not itself rendered
+    return nothing;
+  }
+
+  override update(
+    part: ElementPart,
+    [template, options]: Parameters,
+  ): void {
+    this.options = {
+      ...this.defaultOptions.overlayOptions,
+      ...options?.overlayOptions,
     };
-    protected insertionOptions?: InsertionOptions;
-
-    /* c8 ignore next 9 */
-    override render(
-        _template: () => TemplateResult,
-        _options?: Partial
-    ): unknown {
-        // render function here just defines the interface to the update call later
-        // we don't have anything to render since this is intended to be an ElementPart directive
-        // so will be used on an element and is not itself rendered
-        return nothing;
+    this.insertionOptions = options?.insertionOptions;
+    this.template = template;
+    this.host = part.options?.host;
+    let newTarget = false;
+    const triggerInteraction = (options?.triggerInteraction ||
+      this.defaultOptions.triggerInteraction) as TriggerInteraction;
+    const newStrategy =
+      InteractionTypes[this.strategy?.type] !== triggerInteraction;
+
+    if (this.target !== part.element) {
+      this.target = part.element as HTMLElement;
+      newTarget = true;
+    }
+
+    if (newTarget || newStrategy) {
+      this.strategy?.abort();
+      this.strategy = new strategies[triggerInteraction as TriggerInteraction](
+        this.target,
+        {
+          isPersistent: true,
+          handleOverlayReady: (overlay: AbstractOverlay) => {
+            this.listenerHost = this.overlay = overlay;
+            this.init();
+          },
+        },
+      );
     }
 
-    override update(
-        part: ElementPart,
-        [template, options]: Parameters
-    ): void {
-        this.options = {
-            ...this.defaultOptions.overlayOptions,
-            ...options?.overlayOptions,
-        };
-        this.insertionOptions = options?.insertionOptions;
-        this.template = template;
-        this.host = part.options?.host;
-        let newTarget = false;
-        const triggerInteraction = (options?.triggerInteraction ||
-            this.defaultOptions.triggerInteraction) as TriggerInteraction;
-        const newStrategy =
-            InteractionTypes[this.strategy?.type] !== triggerInteraction;
-
-        if (this.target !== part.element) {
-            this.target = part.element as HTMLElement;
-            newTarget = true;
-        }
-
-        if (newTarget || newStrategy) {
-            this.strategy?.abort();
-            this.strategy = new strategies[
-                triggerInteraction as TriggerInteraction
-            ](this.target, {
-                isPersistent: true,
-                handleOverlayReady: (overlay: AbstractOverlay) => {
-                    this.listenerHost = this.overlay = overlay;
-                    this.init();
-                },
-            });
-        }
-
-        this.strategy.open = options?.open ?? false;
+    this.strategy.open = options?.open ?? false;
+  }
+
+  override handleSlottableRequest(event: SlottableRequestEvent): void {
+    /* c8 ignore next 1 */
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
+    const willRemoveSlottable = event.data === removeSlottableRequest;
+    const options = {} as RenderOptions;
+
+    if (this.host) {
+      options.host = this.host;
     }
 
-    override handleSlottableRequest(event: SlottableRequestEvent): void {
-        /* c8 ignore next 1 */
-        if (event.target !== event.currentTarget) return;
-
-        const willRemoveSlottable = event.data === removeSlottableRequest;
-        const options = {} as RenderOptions;
-
-        if (this.host) {
-            options.host = this.host;
-        }
-
-        render(
-            willRemoveSlottable ? undefined : this.template(),
-            this.overlay,
-            options
-        );
-
-        if (willRemoveSlottable) {
-            this.overlay.remove();
-        } else {
-            AbstractOverlay.applyOptions(this.overlay, {
-                ...this.options,
-                trigger: this.target,
-            });
-            const insertionEl =
-                typeof this.insertionOptions?.el === 'function'
-                    ? this.insertionOptions.el()
-                    : this.insertionOptions?.el || this.target;
-            const { where = 'afterend' } = this.insertionOptions || {};
-
-            insertionEl.insertAdjacentElement(where, this.overlay);
-        }
+    render(
+      willRemoveSlottable ? undefined : this.template(),
+      this.overlay,
+      options,
+    );
+
+    if (willRemoveSlottable) {
+      this.overlay.remove();
+    } else {
+      AbstractOverlay.applyOptions(this.overlay, {
+        ...this.options,
+        trigger: this.target,
+      });
+      const insertionEl =
+        typeof this.insertionOptions?.el === "function"
+          ? this.insertionOptions.el()
+          : this.insertionOptions?.el || this.target;
+      const { where = "afterend" } = this.insertionOptions || {};
+
+      insertionEl.insertAdjacentElement(where, this.overlay);
     }
+  }
 }
 
 export const trigger = directive(OverlayTriggerDirective);
diff --git a/packages/overlay/src/overlay-types.ts b/packages/overlay/src/overlay-types.ts
index 51864eba1f..5a313f44b2 100644
--- a/packages/overlay/src/overlay-types.ts
+++ b/packages/overlay/src/overlay-types.ts
@@ -10,78 +10,78 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import type { Placement } from '@floating-ui/dom';
-import type { VirtualTrigger } from './VirtualTrigger.js';
+import type { Placement } from "@floating-ui/dom";
+import type { VirtualTrigger } from "./VirtualTrigger.js";
 
 export type Constructor> = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    new (...args: any[]): T;
-    prototype: T;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  new (...args: any[]): T;
+  prototype: T;
 };
 
 export { Placement };
 
-export type OverlayTypes = 'auto' | 'hint' | 'manual' | 'modal' | 'page';
+export type OverlayTypes = "auto" | "hint" | "manual" | "modal" | "page";
 
-export type TriggerInteraction = 'click' | 'longpress' | 'hover';
+export type TriggerInteraction = "click" | "longpress" | "hover";
 
 export type TriggerInteractions = OverlayTypes;
 
 export type TriggerInteractionsV1 =
-    | 'click'
-    | 'longpress'
-    | 'hover'
-    | 'custom'
-    | 'replace'
-    | 'inline'
-    | 'modal';
+  | "click"
+  | "longpress"
+  | "hover"
+  | "custom"
+  | "replace"
+  | "inline"
+  | "modal";
 
 export type OverlayTriggerInteractions = Extract<
-    TriggerInteractions,
-    'inline' | 'modal' | 'replace'
+  TriggerInteractions,
+  "inline" | "modal" | "replace"
 >;
 
 export interface OverlayOpenCloseDetail {
-    interaction: TriggerInteractions;
-    reason?: 'external-click';
+  interaction: TriggerInteractions;
+  reason?: "external-click";
 }
 
 export interface OverlayCloseReasonDetail {
-    reason?: 'external-click';
+  reason?: "external-click";
 }
 
 export type OverlayOptions = {
-    delayed?: boolean;
-    notImmediatelyClosable?: boolean;
-    offset?: number | [number, number]; // supporting multi-axis
-    placement?: Placement;
-    receivesFocus?: 'auto' | 'true' | 'false';
-    trigger?: HTMLElement | VirtualTrigger;
-    type?: 'modal' | 'page' | 'hint' | 'auto' | 'manual';
+  delayed?: boolean;
+  notImmediatelyClosable?: boolean;
+  offset?: number | [number, number]; // supporting multi-axis
+  placement?: Placement;
+  receivesFocus?: "auto" | "true" | "false";
+  trigger?: HTMLElement | VirtualTrigger;
+  type?: "modal" | "page" | "hint" | "auto" | "manual";
 };
 
 export type OverlayOptionsV1 = {
-    root?: HTMLElement;
-    delayed?: boolean;
-    placement?: Placement;
-    offset?: number;
-    receivesFocus?: 'true' | 'false' | 'auto';
-    notImmediatelyClosable?: boolean;
-    abortPromise?: Promise;
-    virtualTrigger?: VirtualTrigger;
+  root?: HTMLElement;
+  delayed?: boolean;
+  placement?: Placement;
+  offset?: number;
+  receivesFocus?: "true" | "false" | "auto";
+  notImmediatelyClosable?: boolean;
+  abortPromise?: Promise;
+  virtualTrigger?: VirtualTrigger;
 };
 
 declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-opened': CustomEvent;
-        'sp-closed': CustomEvent;
-    }
+  interface GlobalEventHandlersEventMap {
+    "sp-opened": CustomEvent;
+    "sp-closed": CustomEvent;
+  }
 }
 
 export type OpenableElement = HTMLElement & {
-    open: boolean;
-    tipElement?: HTMLElement;
-    updateComplete?: Promise;
+  open: boolean;
+  tipElement?: HTMLElement;
+  updateComplete?: Promise;
 };
 
-export type OverlayState = 'closed' | 'opening' | 'opened' | 'closing';
+export type OverlayState = "closed" | "opening" | "opened" | "closing";
diff --git a/packages/overlay/src/slottable-request-directive.ts b/packages/overlay/src/slottable-request-directive.ts
index aed394eec7..342e85b8e9 100644
--- a/packages/overlay/src/slottable-request-directive.ts
+++ b/packages/overlay/src/slottable-request-directive.ts
@@ -10,94 +10,96 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    ElementPart,
-    nothing,
-    render,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  ElementPart,
+  nothing,
+  render,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    AsyncDirective,
-    directive,
-} from '@spectrum-web-components/base/src/async-directive.js';
+  AsyncDirective,
+  directive,
+} from "@spectrum-web-components/base/src/async-directive.js";
 import {
-    removeSlottableRequest,
-    SlottableRequestEvent,
-} from './slottable-request-event.js';
+  removeSlottableRequest,
+  SlottableRequestEvent,
+} from "./slottable-request-event.js";
 
 export class SlottableRequestDirective extends AsyncDirective {
-    protected template!: () => TemplateResult;
-    protected target!: HTMLElement;
-    private renderBefore: HTMLElement | undefined;
-    protected listenerHost!: HTMLElement;
-    protected listeners!: AbortController;
+  protected template!: () => TemplateResult;
+  protected target!: HTMLElement;
+  private renderBefore: HTMLElement | undefined;
+  protected listenerHost!: HTMLElement;
+  protected listeners!: AbortController;
 
-    /* c8 ignore next 9 */
-    render(_template: () => TemplateResult): unknown {
-        // render function here just defines the interface to the update call later
-        // we don't have anything to render since this is intended to be an ElementPart directive
-        // so will be used on an element and is not itself rendered
-        return nothing;
-    }
-
-    override update(
-        part: ElementPart,
-        [template]: Parameters
-    ): void {
-        this.template = template;
+  /* c8 ignore next 9 */
+  render(_template: () => TemplateResult): unknown {
+    // render function here just defines the interface to the update call later
+    // we don't have anything to render since this is intended to be an ElementPart directive
+    // so will be used on an element and is not itself rendered
+    return nothing;
+  }
 
-        if (this.target !== part.element) {
-            this.target = part.element as HTMLElement;
-            this.renderBefore = this.target.children[0] as HTMLElement;
-        }
+  override update(
+    part: ElementPart,
+    [template]: Parameters,
+  ): void {
+    this.template = template;
 
-        this.listenerHost = this.target;
-        this.init();
+    if (this.target !== part.element) {
+      this.target = part.element as HTMLElement;
+      this.renderBefore = this.target.children[0] as HTMLElement;
     }
 
-    handleSlottableRequest(event: SlottableRequestEvent): void {
-        /* c8 ignore next 1 */
-        if (event.target !== event.currentTarget) return;
+    this.listenerHost = this.target;
+    this.init();
+  }
 
-        const willRemoveSlottable = event.data === removeSlottableRequest;
-
-        render(willRemoveSlottable ? undefined : this.template(), this.target, {
-            renderBefore: this.renderBefore,
-        });
+  handleSlottableRequest(event: SlottableRequestEvent): void {
+    /* c8 ignore next 1 */
+    if (event.target !== event.currentTarget) {
+      return;
     }
 
-    init(): void {
-        this.listeners?.abort();
-        this.listeners = new AbortController();
-        const { signal } = this.listeners;
+    const willRemoveSlottable = event.data === removeSlottableRequest;
 
-        this.listenerHost.addEventListener(
-            'slottable-request',
-            (event: Event) =>
-                this.handleSlottableRequest(event as SlottableRequestEvent),
-            { signal }
-        );
+    render(willRemoveSlottable ? undefined : this.template(), this.target, {
+      renderBefore: this.renderBefore,
+    });
+  }
 
-        if (window.__swc.DEBUG) {
-            window.__swc.warn(
-                undefined,
-                `⚠️  WARNING ⚠️ : The Overlay Trigger Directive is experimental and there is no guarantees behind its usage in an application!! Its API and presence within the library could be changed at anytime. See "sp-overlay" or "Overlay.open()" for a stable API for overlaying content on your application.`,
-                'https://opensource.adobe.com/spectrum-web-components/components/overlay',
-                {
-                    level: 'high',
-                    type: 'api',
-                }
-            );
-        }
-    }
+  init(): void {
+    this.listeners?.abort();
+    this.listeners = new AbortController();
+    const { signal } = this.listeners;
 
-    override disconnected(): void {
-        this.listeners?.abort();
-    }
+    this.listenerHost.addEventListener(
+      "slottable-request",
+      (event: Event) =>
+        this.handleSlottableRequest(event as SlottableRequestEvent),
+      { signal },
+    );
 
-    /* c8 ignore next 3 */
-    override reconnected(): void {
-        this.init();
+    if (window.__swc.DEBUG) {
+      window.__swc.warn(
+        undefined,
+        '⚠️  WARNING ⚠️ : The Overlay Trigger Directive is experimental and there is no guarantees behind its usage in an application!! Its API and presence within the library could be changed at anytime. See "sp-overlay" or "Overlay.open()" for a stable API for overlaying content on your application.',
+        "https://opensource.adobe.com/spectrum-web-components/components/overlay",
+        {
+          level: "high",
+          type: "api",
+        },
+      );
     }
+  }
+
+  override disconnected(): void {
+    this.listeners?.abort();
+  }
+
+  /* c8 ignore next 3 */
+  override reconnected(): void {
+    this.init();
+  }
 }
 
 export const slottableRequest = directive(SlottableRequestDirective);
diff --git a/packages/overlay/src/slottable-request-event.ts b/packages/overlay/src/slottable-request-event.ts
index 123ff54965..3a4c5d5e96 100644
--- a/packages/overlay/src/slottable-request-event.ts
+++ b/packages/overlay/src/slottable-request-event.ts
@@ -10,39 +10,39 @@ governing permissions and limitations under the License.
 */
 
 export class SlottableRequestEvent extends Event {
-    readonly data: unknown;
-    readonly name: string;
-    readonly slotName: string;
-    constructor(name: string, data: unknown, key?: string) {
-        super('slottable-request', {
-            bubbles: false,
-            cancelable: true,
-            composed: false,
-        });
-        this.name = name;
-        this.data = data;
-        this.slotName = key !== undefined ? `${name}.${key}` : name;
+  readonly data: unknown;
+  readonly name: string;
+  readonly slotName: string;
+  constructor(name: string, data: unknown, key?: string) {
+    super("slottable-request", {
+      bubbles: false,
+      cancelable: true,
+      composed: false,
+    });
+    this.name = name;
+    this.data = data;
+    this.slotName = key !== undefined ? `${name}.${key}` : name;
 
-        if (window.__swc.DEBUG) {
-            window.__swc.warn(
-                undefined,
-                `⚠️  WARNING ⚠️ : \`slottable-request\` events are experimental and there is no guarantees behind usage of them in an application!! Their shape and presence within the library could be changed at anytime.
+    if (window.__swc.DEBUG) {
+      window.__swc.warn(
+        undefined,
+        `⚠️  WARNING ⚠️ : \`slottable-request\` events are experimental and there is no guarantees behind usage of them in an application!! Their shape and presence within the library could be changed at anytime.
                 
 Learn more about the protocol these events are based on below:`,
-                'https://github.com/webcomponents-cg/community-protocols/pull/45',
-                {
-                    level: 'high',
-                    type: 'api',
-                }
-            );
-        }
+        "https://github.com/webcomponents-cg/community-protocols/pull/45",
+        {
+          level: "high",
+          type: "api",
+        },
+      );
     }
+  }
 }
 
-export const removeSlottableRequest = Symbol('remove-slottable-request');
+export const removeSlottableRequest = Symbol("remove-slottable-request");
 
 declare global {
-    interface GlobalEventHandlersEventMap {
-        'slottable-request': SlottableRequestEvent;
-    }
+  interface GlobalEventHandlersEventMap {
+    "slottable-request": SlottableRequestEvent;
+  }
 }
diff --git a/packages/overlay/src/strategies.ts b/packages/overlay/src/strategies.ts
index c7d6061411..35e82c4336 100644
--- a/packages/overlay/src/strategies.ts
+++ b/packages/overlay/src/strategies.ts
@@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ClickController } from './ClickController.js';
-import { HoverController } from './HoverController.js';
-import { LongpressController } from './LongpressController.js';
+import { ClickController } from "./ClickController.js";
+import { HoverController } from "./HoverController.js";
+import { LongpressController } from "./LongpressController.js";
 
 export const strategies = {
-    click: ClickController,
-    longpress: LongpressController,
-    hover: HoverController,
+  click: ClickController,
+  longpress: LongpressController,
+  hover: HoverController,
 };
diff --git a/packages/overlay/stories/index.ts b/packages/overlay/stories/index.ts
index 18a25a5211..abc1715d4d 100644
--- a/packages/overlay/stories/index.ts
+++ b/packages/overlay/stories/index.ts
@@ -10,68 +10,68 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import type { Overlay } from '@spectrum-web-components/overlay';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import type { Overlay } from "@spectrum-web-components/overlay";
 
 function nextFrame(): Promise {
-    return new Promise((res) => requestAnimationFrame(() => res()));
+  return new Promise((res) => requestAnimationFrame(() => res()));
 }
 
 class IsOverlayOpen extends HTMLElement {
-    ready!: (value: boolean | PromiseLike) => void;
+  ready!: (value: boolean | PromiseLike) => void;
 
-    constructor() {
-        super();
-        this.readyPromise = new Promise((res) => {
-            this.ready = res;
-            this.setup();
-        });
-    }
-
-    async setup(): Promise {
-        await nextFrame();
-        document.addEventListener('sp-opened', this.handleOpened);
-    }
+  constructor() {
+    super();
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
 
-    private sendFocus = async (): Promise => {
-        const selectedItem = document
-            .querySelector('[focusable]')
-            ?.querySelector('[selected]') as HTMLElement & {
-            focused?: boolean;
-        };
+  async setup(): Promise {
+    await nextFrame();
+    document.addEventListener("sp-opened", this.handleOpened);
+  }
 
-        if (selectedItem) {
-            selectedItem.focus();
-            selectedItem.focused = true;
-        }
+  private sendFocus = async (): Promise => {
+    const selectedItem = document
+      .querySelector("[focusable]")
+      ?.querySelector("[selected]") as HTMLElement & {
+      focused?: boolean;
     };
 
-    handleOpened = async (event: Event): Promise => {
-        const overlay = event.target as Overlay;
-        const actions = [nextFrame(), overlay.updateComplete, this.sendFocus()];
+    if (selectedItem) {
+      selectedItem.focus();
+      selectedItem.focused = true;
+    }
+  };
 
-        await Promise.all(actions);
-        // Focus happens _after_ `sp-opened` by at least two frames.
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
+  handleOpened = async (event: Event): Promise => {
+    const overlay = event.target as Overlay;
+    const actions = [nextFrame(), overlay.updateComplete, this.sendFocus()];
 
-        this.ready(true);
-    };
+    await Promise.all(actions);
+    // Focus happens _after_ `sp-opened` by at least two frames.
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
 
-    private readyPromise: Promise = Promise.resolve(false);
+    this.ready(true);
+  };
 
-    get updateComplete(): Promise {
-        return this.readyPromise;
-    }
+  private readyPromise: Promise = Promise.resolve(false);
+
+  get updateComplete(): Promise {
+    return this.readyPromise;
+  }
 }
 
-customElements.define('is-overlay-open', IsOverlayOpen);
+customElements.define("is-overlay-open", IsOverlayOpen);
 
 export const isOverlayOpen = (story: () => TemplateResult): TemplateResult => {
-    return html`
-        ${story()}
-        
-    `;
+  return html`
+    ${story()}
+    
+  `;
 };
diff --git a/packages/overlay/stories/overlay-directive.stories.ts b/packages/overlay/stories/overlay-directive.stories.ts
index 99371707bf..ee78cb97ee 100644
--- a/packages/overlay/stories/overlay-directive.stories.ts
+++ b/packages/overlay/stories/overlay-directive.stories.ts
@@ -9,371 +9,357 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    html,
-    LitElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  html,
+  LitElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    OverlayContentTypes,
-    OverlayOpenCloseDetail,
-    Placement,
-    TriggerInteractions,
-} from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
+  OverlayContentTypes,
+  OverlayOpenCloseDetail,
+  Placement,
+  TriggerInteractions,
+} from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/dialog/sp-dialog-wrapper.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
 import {
-    InsertionOptions,
-    trigger,
-} from '@spectrum-web-components/overlay/src/overlay-trigger-directive.js';
-
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/picker/sp-picker.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/radio/sp-radio.js';
-import '@spectrum-web-components/radio/sp-radio-group.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import '@spectrum-web-components/accordion/sp-accordion.js';
-import '@spectrum-web-components/accordion/sp-accordion-item.js';
-import '../../../projects/story-decorator/src/types.js';
-
-import './overlay-story-components.js';
-import { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { state } from '@spectrum-web-components/base/src/decorators.js';
+  InsertionOptions,
+  trigger,
+} from "@spectrum-web-components/overlay/src/overlay-trigger-directive.js";
+
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/radio/sp-radio.js";
+import "@spectrum-web-components/radio/sp-radio-group.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import "@spectrum-web-components/accordion/sp-accordion.js";
+import "@spectrum-web-components/accordion/sp-accordion-item.js";
+import "../../../projects/story-decorator/src/types.js";
+
+import "./overlay-story-components.js";
+import { tooltip } from "@spectrum-web-components/tooltip/src/tooltip-directive.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { state } from "@spectrum-web-components/base/src/decorators.js";
 
 const storyStyles = html`
-    
+  
 `;
 
 export default {
-    title: 'Overlay Directive',
-    argTypes: {
-        offset: { control: 'number' },
-        placement: {
-            control: {
-                type: 'inline-radio',
-                options: [
-                    'top',
-                    'top-start',
-                    'top-end',
-                    'bottom',
-                    'bottom-start',
-                    'bottom-end',
-                    'left',
-                    'left-start',
-                    'left-end',
-                    'right',
-                    'right-start',
-                    'right-end',
-                    'auto',
-                    'auto-start',
-                    'auto-end',
-                    'none',
-                ],
-            },
-        },
-        type: {
-            control: {
-                type: 'inline-radio',
-                options: ['modal', 'replace', 'inline'],
-            },
-        },
-        colorStop: {
-            control: {
-                type: 'inline-radio',
-                options: ['light', 'dark'],
-            },
-        },
-        open: {
-            name: 'open',
-            type: { name: 'boolean', required: false },
-            description: 'Whether the second accordion item is open.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
+  title: "Overlay Directive",
+  argTypes: {
+    offset: { control: "number" },
+    placement: {
+      control: {
+        type: "inline-radio",
+        options: [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end",
+          "auto",
+          "auto-start",
+          "auto-end",
+          "none",
+        ],
+      },
     },
-    args: {
-        placement: 'bottom',
-        offset: 0,
-        colorStop: 'light',
-        triggerOn: 'click',
-        open: false,
+    type: {
+      control: {
+        type: "inline-radio",
+        options: ["modal", "replace", "inline"],
+      },
     },
+    colorStop: {
+      control: {
+        type: "inline-radio",
+        options: ["light", "dark"],
+      },
+    },
+    open: {
+      name: "open",
+      type: { name: "boolean", required: false },
+      description: "Whether the second accordion item is open.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  args: {
+    placement: "bottom",
+    offset: 0,
+    colorStop: "light",
+    triggerOn: "click",
+    open: false,
+  },
 };
 
 interface Properties {
-    placement?: Placement;
-    offset?: number;
-    triggerOn?: OverlayContentTypes;
-    type?: Extract;
-    insertionOptions?: InsertionOptions;
-    open?: boolean;
+  placement?: Placement;
+  offset?: number;
+  triggerOn?: OverlayContentTypes;
+  type?: Extract;
+  insertionOptions?: InsertionOptions;
+  open?: boolean;
 }
 
 const template = ({
-    placement,
-    offset,
-    open,
-    triggerOn,
-    insertionOptions,
+  placement,
+  offset,
+  open,
+  triggerOn,
+  insertionOptions,
 }: Properties): TemplateResult => {
-    const renderTooltip = (): TemplateResult => html`
-        Click to open a popover.
-    `;
-    const renderPopover = (): TemplateResult => html`
-        
-            
-                

-                    
-                    

-                        The background of this div should be blue
-                    

-                     html`
-                                Click to open another popover.
-                            `
-                        )}
-                        ${trigger(
-                            () => html`
-                                
-                                    
-                                        

-                                            Another Popover
-                                        

-                                    
-                                
-                            `,
-                            {
-                                triggerInteraction: 'click',
-                                overlayOptions: {
-                                    placement: 'bottom',
-                                },
-                            }
-                        )}
-                    >
-                        Press Me
-                    
-                

-            
-        
-    `;
-
-    return html`
-        ${storyStyles}
-         html` Click to open a popover. `;
+  const renderPopover = (): TemplateResult => html`
+    
+      
+        

+          
+          
The background of this div should be blue

+           html` Click to open another popover. `)}
+            ${trigger(
+              () => html`
+                
+                  
+                    
Another Popover

+                  
+                
+              `,
+              {
+                triggerInteraction: "click",
                 overlayOptions: {
-                    placement,
-                    offset,
+                  placement: "bottom",
                 },
-                insertionOptions: insertionOptions,
-            })}
-        >
-            Show Popover
-        
-    `;
+              },
+            )}
+          >
+            Press Me
+          
+        

+      
+    
+  `;
+
+  return html`
+    ${storyStyles}
+    
+      Show Popover
+    
+  `;
 };
 
 export const Default = ({ open }: Properties = {}): TemplateResult => {
-    const renderPopover = (): TemplateResult => html`
-        
-            Popover content goes here
-        
-    `;
-    const options = typeof open !== 'undefined' ? { open } : undefined;
-
-    return html`
-        Open Popover
-    `;
+  const renderPopover = (): TemplateResult => html`
+    
+      Popover content goes here
+    
+  `;
+  const options = typeof open !== "undefined" ? { open } : undefined;
+
+  return html`
+    Open Popover
+  `;
 };
 
 Default.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 Default.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const configured = (args: Properties): TemplateResult => template(args);
 
 configured.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 configured.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const insertionOptions = (args: Properties = {}): TemplateResult => html`
-    ${template(args)}
-    

+  ${template(args)}
+  

 `;
 
 insertionOptions.args = {
-    insertionOptions: {
-        el: () => document.querySelector('#other-element'),
-        where: 'afterbegin',
-    },
+  insertionOptions: {
+    el: () => document.querySelector("#other-element"),
+    where: "afterbegin",
+  },
 } as Properties;
 
 insertionOptions.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 insertionOptions.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 class ManagedOverlayTrigger extends LitElement {
-    @state()
-    private isRenderOverlay = false;
-
-    @state()
-    private isOpenState = false;
-
-    protected override render(): TemplateResult {
-        return html`
-             {
-                    this.isRenderOverlay = !this.isRenderOverlay;
-                }}
-            >
-                Toggle Overlay Render Button
-            
-
-             {
-                    this.isRenderOverlay = true;
-                    this.isOpenState = true;
-                }}
-            >
-                Create Overlay Render Button And Open Overlay
-            
+  @state()
+  private isRenderOverlay = false;
 
-            ${this.isRenderOverlay ? this.renderOverlayButton() : html``}
-        `;
-    }
+  @state()
+  private isOpenState = false;
 
-    private renderOverlayButton(): TemplateResult {
-        return html`
-             html`
-                        
-                            ) => {
-                                if (event.target !== event.currentTarget) {
-                                    return;
-                                }
-
-                                console.log('sp-opened');
-                                this.isOpenState = true;
-                            }}
-                            @sp-closed=${(
-                                event: CustomEvent
-                            ) => {
-                                if (event.target !== event.currentTarget) {
-                                    return;
-                                }
-
-                                console.log('sp-closed');
-                                this.isOpenState = false;
-                            }}
-                        >
-                            
My Test Popover

-                        
-                    `,
-                    {
-                        triggerInteraction: 'click',
-                        overlayOptions: { placement: 'bottom-end' },
-                        open: this.isOpenState,
-                    }
-                )}
+  protected override render(): TemplateResult {
+    return html`
+       {
+          this.isRenderOverlay = !this.isRenderOverlay;
+        }}
+      >
+        Toggle Overlay Render Button
+      
+
+       {
+          this.isRenderOverlay = true;
+          this.isOpenState = true;
+        }}
+      >
+        Create Overlay Render Button And Open Overlay
+      
+
+      ${this.isRenderOverlay ? this.renderOverlayButton() : html``}
+    `;
+  }
+
+  private renderOverlayButton(): TemplateResult {
+    return html`
+       html`
+            ) => {
+                if (event.target !== event.currentTarget) {
+                  return;
+                }
+
+                console.log("sp-opened");
+                this.isOpenState = true;
+              }}
+              @sp-closed=${(event: CustomEvent) => {
+                if (event.target !== event.currentTarget) {
+                  return;
+                }
+
+                console.log("sp-closed");
+                this.isOpenState = false;
+              }}
             >
-                Toggle Popover
-            
-        `;
-    }
+              
My Test Popover

+            
+          `,
+          {
+            triggerInteraction: "click",
+            overlayOptions: { placement: "bottom-end" },
+            open: this.isOpenState,
+          },
+        )}
+      >
+        Toggle Popover
+      
+    `;
+  }
 }
 
-customElements.define('managed-overlay-trigger', ManagedOverlayTrigger);
+customElements.define("managed-overlay-trigger", ManagedOverlayTrigger);
 
 export const managedOverlayTrigger = (): TemplateResult => html`
-    
+  
 `;
 
 managedOverlayTrigger.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 managedOverlayTrigger.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
diff --git a/packages/overlay/stories/overlay-element.stories.ts b/packages/overlay/stories/overlay-element.stories.ts
index 3499bde016..0b08c2a4c8 100644
--- a/packages/overlay/stories/overlay-element.stories.ts
+++ b/packages/overlay/stories/overlay-element.stories.ts
@@ -9,241 +9,241 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, render, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import '@spectrum-web-components/action-menu/sp-action-menu.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import '@spectrum-web-components/link/sp-link.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';
-import { Placement } from '@floating-ui/dom';
-import { OverlayTypes } from '../src/overlay-types.js';
-import { notAgain } from '../../dialog/stories/dialog-base.stories.js';
-import './overlay-story-components.js';
+import { html, render, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/link/sp-link.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-anchor-select.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js";
+import { Placement } from "@floating-ui/dom";
+import { OverlayTypes } from "../src/overlay-types.js";
+import { notAgain } from "../../dialog/stories/dialog-base.stories.js";
+import "./overlay-story-components.js";
 import {
-    removeSlottableRequest,
-    SlottableRequestEvent,
-} from '../src/slottable-request-event.js';
+  removeSlottableRequest,
+  SlottableRequestEvent,
+} from "../src/slottable-request-event.js";
 
 export default {
-    title: 'Overlay Element',
-    component: 'sp-overlay',
-    args: {
-        open: true,
-        delayed: false,
+  title: "Overlay Element",
+  component: "sp-overlay",
+  args: {
+    open: true,
+    delayed: false,
+  },
+  argTypes: {
+    open: {
+      name: "open",
+      type: { name: "boolean", required: false },
+      description: "Whether the second accordion item is open.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
-    argTypes: {
-        open: {
-            name: 'open',
-            type: { name: 'boolean', required: false },
-            description: 'Whether the second accordion item is open.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        delayed: {
-            name: 'delayed',
-            type: { name: 'boolean', required: false },
-            description: 'Whether the tooltips are delayed.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
+    delayed: {
+      name: "delayed",
+      type: { name: "boolean", required: false },
+      description: "Whether the tooltips are delayed.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+  },
 };
 
-type WrapperStyleType = 'will-change' | 'container-type';
+type WrapperStyleType = "will-change" | "container-type";
 
 type Properties = {
-    delayed: boolean;
-    interaction: 'click' | 'hover' | 'longpress';
-    open?: boolean;
-    placement?: Placement;
-    receivesFocus: 'true' | 'false' | 'auto';
-    style?: WrapperStyleType;
-    type?: OverlayTypes;
+  delayed: boolean;
+  interaction: "click" | "hover" | "longpress";
+  open?: boolean;
+  placement?: Placement;
+  receivesFocus: "true" | "false" | "auto";
+  style?: WrapperStyleType;
+  type?: OverlayTypes;
 };
 
 const Template = ({
-    interaction,
-    open,
-    placement,
-    type,
-    delayed,
-    style,
+  interaction,
+  open,
+  placement,
+  type,
+  delayed,
+  style,
 }: Properties): TemplateResult => html`
-    ${style === 'will-change'
-        ? html`
-              
-          `
-        : html`
-              
-          `}
-    

-        Open the overlay
-        
-            
-                
-                    

-                        Content goes here.
-                        ${type === 'modal' || type === 'page'
-                            ? html`
-                                  Or, a link,
-                                  
-                                      Spectrum Web Components
-                                  
-                                  .
-                              `
-                            : ''}
-                    

-                
-            
-        
-    

+  ${style === "will-change"
+    ? html`
+        
+      `
+    : html`
+        
+      `}
+  

+    Open the overlay
+    
+      
+        
+          

+            Content goes here.
+            ${type === "modal" || type === "page"
+              ? html`
+                  Or, a link,
+                  
+                    Spectrum Web Components
+                  
+                  .
+                `
+              : ""}
+          

+        
+      
+    
+  

 `;
 
 export const modal = (args: Properties): TemplateResult => Template(args);
 modal.args = {
-    interaction: 'click',
-    placement: 'right',
-    style: 'will-change',
-    type: 'modal',
+  interaction: "click",
+  placement: "right",
+  style: "will-change",
+  type: "modal",
 };
 
 export const page = ({
-    interaction,
-    open,
-    placement,
-    type,
+  interaction,
+  open,
+  placement,
+  type,
 }: Properties): TemplateResult => html`
-    Open the overlay
-    
-        ${notAgain()}
-    
+  Open the overlay
+  
+    ${notAgain()}
+  
 `;
 page.args = {
-    interaction: 'click',
-    placement: 'right',
-    type: 'page',
+  interaction: "click",
+  placement: "right",
+  type: "page",
 };
 
 export const click = (args: Properties): TemplateResult => Template(args);
 click.args = {
-    interaction: 'click',
-    placement: 'right',
-    style: 'container-type' as WrapperStyleType,
-    type: 'auto',
+  interaction: "click",
+  placement: "right",
+  style: "container-type" as WrapperStyleType,
+  type: "auto",
 };
 
 export const withSlider = (): TemplateResult => html`
-    Button popover
-    
-        
-            
-                
Try clicking the slider after popover opens

-                
It shouldn't close the popover

-                
-                Press me
-            
-        
-    
+  Button popover
+  
+    
+      
+        
Try clicking the slider after popover opens

+        
It shouldn't close the popover

+        
+        Press me
+      
+    
+  
 `;
 withSlider.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 withSlider.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const hover = (args: Properties): TemplateResult => Template(args);
 hover.args = {
-    interaction: 'hover',
-    placement: 'right',
-    style: 'will-change',
+  interaction: "hover",
+  placement: "right",
+  style: "will-change",
 };
 
 export const hoverTooltip = ({
-    interaction,
-    open,
-    placement,
-    type,
+  interaction,
+  open,
+  placement,
+  type,
 }: Properties): TemplateResult => html`
-    
-    

-        Open the overlay
-        
-            Tooltip goes here.
-        
-    

+  
+  

+    Open the overlay
+    
+      Tooltip goes here.
+    
+  

 `;
 hoverTooltip.args = {
-    interaction: 'hover',
-    placement: 'right',
+  interaction: "hover",
+  placement: "right",
 };
 
 export const longpress = (args: Properties): TemplateResult => Template(args);
 longpress.args = {
-    interaction: 'longpress',
-    placement: 'right',
-    style: 'container-type',
-    type: 'auto',
+  interaction: "longpress",
+  placement: "right",
+  style: "container-type",
+  type: "auto",
 };
 
 /**
@@ -251,498 +251,437 @@ longpress.args = {
  * pass `focus` into a shadow child element.
  */
 export const receivesFocus = ({
-    interaction,
-    open,
-    placement,
-    receivesFocus,
-    type,
+  interaction,
+  open,
+  placement,
+  receivesFocus,
+  type,
 }: Properties): TemplateResult => html`
-    
-        Open the overlay (with focus)
-    
-    
-        
-            
-                Click Content
-            
-        
-    
+  
+    Open the overlay (with focus)
+  
+  
+    
+      
+        Click Content
+      
+    
+  
 `;
 receivesFocus.args = {
-    interaction: 'click',
-    placement: 'bottom-start',
-    type: 'auto',
-    receivesFocus: 'true',
+  interaction: "click",
+  placement: "bottom-start",
+  type: "auto",
+  receivesFocus: "true",
 } as Properties;
 
 export const transformed = (args: Properties): TemplateResult => html`
-    
-    
${Template(args)}

+  
+  
${Template(args)}

 `;
 transformed.args = {
-    interaction: 'click',
-    placement: 'right',
-    type: 'auto',
+  interaction: "click",
+  placement: "right",
+  type: "auto",
 };
 
 export const contained = (args: Properties): TemplateResult => html`
-    
-    
${Template(args)}

+  
+  
${Template(args)}

 `;
 contained.args = {
-    interaction: 'click',
-    placement: 'right',
-    type: 'auto',
+  interaction: "click",
+  placement: "right",
+  type: "auto",
 };
 
 export const all = ({ delayed }: Properties): TemplateResult => html`
-    
-        Open the overlay
-    
-    
-        
-            Click content
-        
-    
-    
-        Hover content
-    
-    
-        
-            Longpress content
-        
-    
+  
+    Open the overlay
+  
+  
+    
+      Click content
+    
+  
+  
+    Hover content
+  
+  
+    
+      Longpress content
+    
+  
 `;
 
 export const actionGroup = ({ delayed }: Properties): TemplateResult => {
-    const popoverOffset = [6, -13] as [number, number];
+  const popoverOffset = [6, -13] as [number, number];
 
-    return html`
-        
-        
-            
-                
-                    
-                
-                
-                    
-                
-                
-                    
-                
-                
-                    
-                        cms
-                        
-                            Update All Content
-                        
-                        
-                            Refresh All XDs
-                        
-                    
-                    
-                        ssg
-                        
-                            Clear Cache
-                        
-                    
-                    
-                        vrt
-                        
-                            Contributions
-                        
-                        
-                            Internal
-                        
-                        Public
-                        
-                            Patterns
-                        
-                        All
-                    
-                    
-                    
-                        Logout
-                    
-                
-            
-        
-        
-            Hover
-        
-        
-            
-                
-                    
-                        
-                    
-                    
-                        
-                    
-                    
-                        
-                    
-                
-            
-        
-        
-            Hover
-        
-        
-            
-                
-                    
-                        
-                    
-                    
-                        
-                    
-                    
-                        
-                    
-                
-            
-        
-        
-            Hover
-        
-        
-            
-                
-                    
-                        
-                    
-                    
-                        
-                    
-                    
-                        
-                    
-                
-            
-        
-    `;
+  return html`
+    
+    
+      
+        
+          
+        
+        
+          
+        
+        
+          
+        
+        
+          
+            cms
+            
+              Update All Content
+            
+             Refresh All XDs 
+          
+          
+            ssg
+             Clear Cache 
+          
+          
+            vrt
+            
+              Contributions
+            
+             Internal 
+            Public
+             Patterns 
+            All
+          
+          
+          
+            Logout
+          
+        
+      
+    
+    
+      Hover
+    
+    
+      
+        
+          
+            
+          
+          
+            
+          
+          
+            
+          
+        
+      
+    
+    
+      Hover
+    
+    
+      
+        
+          
+            
+          
+          
+            
+          
+          
+            
+          
+        
+      
+    
+    
+      Hover
+    
+    
+      
+        
+          
+            
+          
+          
+            
+          
+          
+            
+          
+        
+      
+    
+  `;
 };
 
 export const actionGroupWithFilters = ({
-    delayed,
+  delayed,
 }: Properties): TemplateResult => {
-    const popoverOffset = [6, -13] as [number, number];
+  const popoverOffset = [6, -13] as [number, number];
 
-    return html`
-        
-        

-            This story outlines some CSS usage that is not yet covered by the
-            placement calculations within the Overlay API.
-        

-        
-            
-                
-                    
-                    
-                        Hover
-                    
-                    
-                        
-                            
-                                
-                                    
-                                
-                                
-                                    
-                                
-                                
-                                    
-                                
-                            
-                        
-                    
-                
-                
-                    
-                
-                
-                    
-                    
-                        Hover
-                    
-                
-                
-                    
-                        cms
-                        
-                            Update All Content
-                        
-                        
-                            Refresh All XDs
-                        
-                    
-                    
-                        ssg
-                        
-                            Clear Cache
-                        
-                    
-                    
-                        vrt
-                        
-                            Contributions
-                        
-                        
-                            Internal
-                        
-                        Public
-                        
-                            Patterns
-                        
-                        All
-                    
-                    
-                    
-                        Logout
-                    
-                
-            
-        
-        
-            Hover
-        
-        
-            
-                
-                    
-                        
-                    
-                    
-                        
-                    
-                    
-                        
-                    
-                
-            
-        
-        
+      sp-popover sp-action-group {
+        padding: calc(
+            var(--spectrum-actiongroup-vertical-spacing-regular) * 0.75
+          )
+          calc(var(--spectrum-actiongroup-vertical-spacing-regular) / 2);
+      }
+      .root {
+        inset-inline-end: 0em;
+        inset-block-start: 3em;
+        padding-block-end: 3em;
+        overflow: hidden;
+      }
+      .root > sp-action-group > sp-action-button,
+      .root > sp-action-group > sp-action-menu {
+        top: 3em;
+        position: relative;
+      }
+      sp-action-button,
+      sp-action-menu {
+        background-image: linear-gradient(
+          rgba(125, 125, 125, 0.2),
+          rgba(125, 125, 125, 0.2)
+        );
+        background-blend-mode: multiply;
+        filter: brightness(1) saturate(1);
+      }
+    
+    

+      This story outlines some CSS usage that is not yet covered by the
+      placement calculations within the Overlay API.
+    

+    
+      
+        
+          
+           Hover 
+          
+          >
             
-                
-                    
-                        
-                    
-                    
-                        
-                    
-                    
-                        
-                    
-                
+              
+                
+                  
+                
+                
+                  
+                
+                
+                  
+                
+              
             
-        
-    `;
+          
+        
+        
+          
+        
+        
+          
+           Hover 
+        
+        
+          
+            cms
+            
+              Update All Content
+            
+             Refresh All XDs 
+          
+          
+            ssg
+             Clear Cache 
+          
+          
+            vrt
+            
+              Contributions
+            
+             Internal 
+            Public
+             Patterns 
+            All
+          
+          
+          
+            Logout
+          
+        
+      
+    
+    
+      Hover
+    
+    
+      
+        
+          
+            
+          
+          
+            
+          
+          
+            
+          
+        
+      
+    
+    
+      
+        
+          
+            
+          
+          
+            
+          
+          
+            
+          
+        
+      
+    
+  `;
 };
 
 // Test #3795 in browser
 export const transientHover = (): TemplateResult => html`
-    
+  
 `;
 transientHover.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 transientHover.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const lazyElements = (): TemplateResult => {
-    const handleSlottableRequest = (event: SlottableRequestEvent): void => {
-        const template =
-            event.data === removeSlottableRequest
-                ? undefined
-                : html`
-                      
-                          
-                              
-                              

-                                  The background of this div should be blue
-                              

-                              
-                                  Press Me
-                                  
-                                      Click to open another popover.
-                                  
-                              
-                          
-                      
-                  `;
+  const handleSlottableRequest = (event: SlottableRequestEvent): void => {
+    const template =
+      event.data === removeSlottableRequest
+        ? undefined
+        : html`
+            
+              
+                
+                

+                  The background of this div should be blue
+                

+                
+                  Press Me
+                  
+                    Click to open another popover.
+                  
+                
+              
+            
+          `;
 
-        render(template, event.target as HTMLElement);
-    };
+    render(template, event.target as HTMLElement);
+  };
 
-    return html`
-        Trigger
-        
-    `;
+  return html`
+    Trigger
+    
+  `;
 };
 
 lazyElements.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 lazyElements.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
diff --git a/packages/overlay/stories/overlay-story-components.ts b/packages/overlay/stories/overlay-story-components.ts
index 8a9b43c7f8..56b9d97ba5 100644
--- a/packages/overlay/stories/overlay-story-components.ts
+++ b/packages/overlay/stories/overlay-story-components.ts
@@ -10,384 +10,383 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    css,
-    CSSResultGroup,
-    html,
-    LitElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
 
 import {
-    Overlay,
-    OverlayTrigger,
-    Placement,
-} from '@spectrum-web-components/overlay';
-import { RadioGroup } from '@spectrum-web-components/radio';
-import '@spectrum-web-components/button/sp-button.js';
-import { Button } from '@spectrum-web-components/button';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/radio/sp-radio.js';
-import '@spectrum-web-components/radio/sp-radio-group.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
+  Overlay,
+  OverlayTrigger,
+  Placement,
+} from "@spectrum-web-components/overlay";
+import { RadioGroup } from "@spectrum-web-components/radio";
+import "@spectrum-web-components/button/sp-button.js";
+import { Button } from "@spectrum-web-components/button";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/radio/sp-radio.js";
+import "@spectrum-web-components/radio/sp-radio-group.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
 
 // Prevent infinite recursion in browser
 const MAX_DEPTH = 7;
 
 class OverlayTargetIcon extends LitElement {
-    static override get styles(): CSSResultGroup {
-        return css`
-            :host {
-                position: absolute;
-                display: block;
-                color: var(--spectrum-magenta-900);
-                width: 64px;
-                height: 64px;
-                top: 0;
-                left: 0;
-            }
-        `;
-    }
-
-    public override render(): TemplateResult {
-        return html`
-            
-        `;
-    }
+  static override get styles(): CSSResultGroup {
+    return css`
+      :host {
+        position: absolute;
+        display: block;
+        color: var(--spectrum-magenta-900);
+        width: 64px;
+        height: 64px;
+        top: 0;
+        left: 0;
+      }
+    `;
+  }
+
+  public override render(): TemplateResult {
+    return html`
+      
+    `;
+  }
 }
-customElements.define('overlay-target-icon', OverlayTargetIcon);
+customElements.define("overlay-target-icon", OverlayTargetIcon);
 
 class OverlayDrag extends LitElement {
-    @property({ type: Number })
-    private top = 100;
-    @property({ type: Number })
-    private left = 100;
-
-    private targetElement: HTMLElement | undefined | null;
-
-    static override get styles(): CSSResultGroup {
-        return css`
-            :host {
-                display: block;
-                width: 100%;
-                height: 100%;
-                position: relative;
-            }
-
-            ::slotted(*) {
-                display: block;
-                width: 100%;
-                height: 100%;
-            }
-        `;
+  @property({ type: Number })
+  private top = 100;
+  @property({ type: Number })
+  private left = 100;
+
+  private targetElement: HTMLElement | undefined | null;
+
+  static override get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+
+      ::slotted(*) {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    `;
+  }
+
+  private onSlotChange(event: Event & { target: HTMLSlotElement }): void {
+    const slot = event.target as HTMLSlotElement;
+
+    this.targetElement = undefined;
+
+    const nodes = slot.assignedNodes();
+    const slotElement = nodes.find(
+      (node) => node instanceof HTMLElement,
+    ) as HTMLElement;
+
+    if (!slotElement) {
+      return;
     }
 
-    private onSlotChange(event: Event & { target: HTMLSlotElement }): void {
-        const slot = event.target as HTMLSlotElement;
-
-        this.targetElement = undefined;
+    this.targetElement = slotElement.querySelector(
+      '[slot="trigger"]',
+    ) as HTMLElement;
 
-        const nodes = slot.assignedNodes();
-        const slotElement = nodes.find(
-            (node) => node instanceof HTMLElement
-        ) as HTMLElement;
-
-        if (!slotElement) return;
+    if (!this.targetElement) {
+      return;
+    }
 
-        this.targetElement = slotElement.querySelector(
-            '[slot="trigger"]'
-        ) as HTMLElement;
+    this.targetElement.addEventListener("pointerdown", (event: PointerEvent) =>
+      this.onMouseDown(event),
+    );
 
-        if (!this.targetElement) return;
+    this.resetTargetPosition();
+  }
 
-        this.targetElement.addEventListener(
-            'pointerdown',
-            (event: PointerEvent) => this.onMouseDown(event)
-        );
+  private onMouseDown(event: PointerEvent): void {
+    const target = event.target as HTMLElement;
+    const parent = target.parentElement;
 
-        this.resetTargetPosition();
+    if (!parent) {
+      return;
     }
 
-    private onMouseDown(event: PointerEvent): void {
-        const target = event.target as HTMLElement;
-        const parent = target.parentElement;
-
-        if (!parent) return;
-
-        target.setPointerCapture(event.pointerId);
-
-        const max = {
-            x: parent.offsetWidth - target.offsetWidth,
-            y: parent.offsetHeight - target.offsetHeight,
-        };
-        const dragStart = {
-            x: event.clientX,
-            y: event.clientY,
-        };
-        const originalPos = {
-            x: this.left,
-            y: this.top,
-        };
-
-        const onMouseMove = (event: MouseEvent): void => {
-            const dragDelta = {
-                x: event.clientX - dragStart.x,
-                y: event.clientY - dragStart.y,
-            };
-            const newPosition = {
-                x: dragDelta.x + originalPos.x,
-                y: dragDelta.y + originalPos.y,
-            };
-
-            this.left = Math.min(Math.max(newPosition.x, 0), max.x);
-            this.top = Math.min(Math.max(newPosition.y, 0), max.y);
-            Overlay.update();
-        };
-
-        const onMouseUp = (event: PointerEvent): void => {
-            target.setPointerCapture(event.pointerId);
-            document.removeEventListener('pointermove', onMouseMove);
-            document.removeEventListener('pointerup', onMouseUp);
-        };
-
-        document.addEventListener('pointermove', onMouseMove);
-        document.addEventListener('pointerup', onMouseUp);
+    target.setPointerCapture(event.pointerId);
+
+    const max = {
+      x: parent.offsetWidth - target.offsetWidth,
+      y: parent.offsetHeight - target.offsetHeight,
+    };
+    const dragStart = {
+      x: event.clientX,
+      y: event.clientY,
+    };
+    const originalPos = {
+      x: this.left,
+      y: this.top,
+    };
+
+    const onMouseMove = (event: MouseEvent): void => {
+      const dragDelta = {
+        x: event.clientX - dragStart.x,
+        y: event.clientY - dragStart.y,
+      };
+      const newPosition = {
+        x: dragDelta.x + originalPos.x,
+        y: dragDelta.y + originalPos.y,
+      };
+
+      this.left = Math.min(Math.max(newPosition.x, 0), max.x);
+      this.top = Math.min(Math.max(newPosition.y, 0), max.y);
+      Overlay.update();
+    };
+
+    const onMouseUp = (event: PointerEvent): void => {
+      target.setPointerCapture(event.pointerId);
+      document.removeEventListener("pointermove", onMouseMove);
+      document.removeEventListener("pointerup", onMouseUp);
+    };
+
+    document.addEventListener("pointermove", onMouseMove);
+    document.addEventListener("pointerup", onMouseUp);
+  }
+
+  public resetTargetPosition(): void {
+    if (!this.targetElement) {
+      return;
     }
 
-    public resetTargetPosition(): void {
-        if (!this.targetElement) return;
-
-        const target = this.targetElement as HTMLElement;
-        const parent = target.parentElement;
+    const target = this.targetElement as HTMLElement;
+    const parent = target.parentElement;
 
-        if (!parent) return;
-
-        this.left = (parent.offsetWidth - target.offsetWidth) / 2;
-        this.top = (parent.offsetHeight - target.offsetHeight) / 2;
+    if (!parent) {
+      return;
     }
 
-    public override updated(): void {
-        if (this.targetElement) {
-            this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;
-        }
-    }
+    this.left = (parent.offsetWidth - target.offsetWidth) / 2;
+    this.top = (parent.offsetHeight - target.offsetHeight) / 2;
+  }
 
-    public override render(): TemplateResult {
-        return html`
-            
-        `;
+  public override updated(): void {
+    if (this.targetElement) {
+      this.targetElement.style.transform = `translate(${this.left}px, ${this.top}px)`;
     }
+  }
+
+  public override render(): TemplateResult {
+    return html`  `;
+  }
 }
-customElements.define('overlay-drag', OverlayDrag);
+customElements.define("overlay-drag", OverlayDrag);
 
 class RecursivePopover extends LitElement {
-    @property({ type: String })
-    private placement: Placement;
-
-    @property({ type: Number })
-    private depth = 0;
-
-    @query('[slot="trigger"]')
-    private trigger!: Button;
-
-    protected isShiftTabbing = false;
+  @property({ type: String })
+  private placement: Placement;
 
-    public override shadowRoot!: ShadowRoot;
+  @property({ type: Number })
+  private depth = 0;
 
-    public static override get styles(): CSSResultGroup {
-        return [
-            css`
-                :host {
-                    display: block;
-                    text-align: center;
-                }
+  @query('[slot="trigger"]')
+  private trigger!: Button;
 
-                overlay-trigger {
-                    display: inline-flex;
-                    margin-top: 11px;
-                }
-            `,
-        ];
-    }
-
-    public constructor() {
-        super();
-        this.placement = 'right';
-        this.depth = 0;
-        this.addEventListener('keydown', (event: KeyboardEvent) => {
-            const { code } = event;
-
-            if (code === 'Enter') {
-                this.trigger.click();
-            }
-        });
-        this.addEventListener('focusin', this.handleFocusin);
-    }
+  protected isShiftTabbing = false;
 
-    private handleFocusin(): void {
-        this.focus();
-    }
+  public override shadowRoot!: ShadowRoot;
 
-    public override focus(): void {
-        if (this.shadowRoot.activeElement !== null) {
-            return;
+  public static override get styles(): CSSResultGroup {
+    return [
+      css`
+        :host {
+          display: block;
+          text-align: center;
         }
 
-        const firstFocusable = this.shadowRoot.querySelector(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        ) as LitElement;
+        overlay-trigger {
+          display: inline-flex;
+          margin-top: 11px;
+        }
+      `,
+    ];
+  }
+
+  public constructor() {
+    super();
+    this.placement = "right";
+    this.depth = 0;
+    this.addEventListener("keydown", (event: KeyboardEvent) => {
+      const { code } = event;
+
+      if (code === "Enter") {
+        this.trigger.click();
+      }
+    });
+    this.addEventListener("focusin", this.handleFocusin);
+  }
+
+  private handleFocusin(): void {
+    this.focus();
+  }
+
+  public override focus(): void {
+    if (this.shadowRoot.activeElement !== null) {
+      return;
+    }
 
-        if (firstFocusable) {
-            if (firstFocusable.updateComplete) {
-                firstFocusable.updateComplete.then(() =>
-                    firstFocusable.focus()
-                );
-            } else {
-                firstFocusable.focus();
-            }
+    const firstFocusable = this.shadowRoot.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    ) as LitElement;
 
-            return;
-        }
+    if (firstFocusable) {
+      if (firstFocusable.updateComplete) {
+        firstFocusable.updateComplete.then(() => firstFocusable.focus());
+      } else {
+        firstFocusable.focus();
+      }
 
-        super.focus();
+      return;
     }
 
-    public onRadioChange(event: Event): void {
-        const target = event.target as RadioGroup;
+    super.focus();
+  }
 
-        this.placement = target.selected as Placement;
-    }
+  public onRadioChange(event: Event): void {
+    const target = event.target as RadioGroup;
 
-    private captureEnter(event: KeyboardEvent): void {
-        const { code } = event;
+    this.placement = target.selected as Placement;
+  }
 
-        if (code === 'Enter') {
-            event.stopPropagation();
-        }
-    }
+  private captureEnter(event: KeyboardEvent): void {
+    const { code } = event;
 
-    public override render(): TemplateResult {
-        return html`
-            
-                Top
-                Right
-                Bottom
-                Left
-            
-            
-                
-                    Open Popover
-                
-                
-                    
-                        ${this.depth < MAX_DEPTH
-                            ? html`
-                                  
-                              `
-                            : html`
-                                  
Maximum Depth

-                              `}
-                    
-                
-            
-        `;
+    if (code === "Enter") {
+      event.stopPropagation();
     }
+  }
+
+  public override render(): TemplateResult {
+    return html`
+      
+        Top
+        Right
+        Bottom
+        Left
+      
+      
+        
+          Open Popover
+        
+        
+          
+            ${this.depth < MAX_DEPTH
+              ? html`
+                  
+                `
+              : html` 
Maximum Depth
 `}
+          
+        
+      
+    `;
+  }
 }
-customElements.define('recursive-popover', RecursivePopover);
+customElements.define("recursive-popover", RecursivePopover);
 
 export class PopoverContent extends LitElement {
-    @query('[slot="trigger"]')
-    public button!: Button;
-
-    @query('overlay-trigger')
-    public trigger!: OverlayTrigger;
-
-    override render(): TemplateResult {
-        return html`
-            
-                Open me
-                
-                    
-                        
This is all the content.

-                        
This is all the content.

-                        
This is all the content.

-                        
This is all the content.

-                    
-                
-            
-        `;
-    }
+  @query('[slot="trigger"]')
+  public button!: Button;
+
+  @query("overlay-trigger")
+  public trigger!: OverlayTrigger;
+
+  override render(): TemplateResult {
+    return html`
+      
+        Open me
+        
+          
+            
This is all the content.

+            
This is all the content.

+            
This is all the content.

+            
This is all the content.

+          
+        
+      
+    `;
+  }
 }
 
-customElements.define('popover-content', PopoverContent);
+customElements.define("popover-content", PopoverContent);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'popover-content': PopoverContent;
-    }
+  interface HTMLElementTagNameMap {
+    "popover-content": PopoverContent;
+  }
 }
 
 export default class TransientHover extends LitElement {
-    @property()
-    open = false;
-
-    protected override render(): TemplateResult {
-        return html`
-            
-                Button popover
-            
-             {
-                    this.open = true;
-                }}
-            >
-                My Popover
+  @property()
+  open = false;
+
+  protected override render(): TemplateResult {
+    return html`
+      
+        Button popover
+      
+       {
+          this.open = true;
+        }}
+      >
+        My Popover
+      
+
+      ${!this.open
+        ? html`
+            
+              My tooltip
             
-
-            ${!this.open
-                ? html`
-                      
-                          My tooltip
-                      
-                  `
-                : html``}
-        `;
-    }
+          `
+        : html``}
+    `;
+  }
 }
 
-customElements.define('transient-hover', TransientHover);
+customElements.define("transient-hover", TransientHover);
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 9115920c61..ad43fba947 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -28,13 +28,13 @@ import "@spectrum-web-components/menu/sp-menu-group.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import "@spectrum-web-components/menu/sp-menu.js";
 import {
-	openOverlay,
-	Overlay,
-	OverlayContentTypes,
-	OverlayTrigger,
-	Placement,
-	TriggerInteractions,
-	VirtualTrigger,
+  openOverlay,
+  Overlay,
+  OverlayContentTypes,
+  OverlayTrigger,
+  Placement,
+  TriggerInteractions,
+  VirtualTrigger,
 } from "@spectrum-web-components/overlay";
 import "@spectrum-web-components/overlay/overlay-trigger.js";
 import "@spectrum-web-components/overlay/sp-overlay.js";
@@ -54,1232 +54,1232 @@ import "./overlay-story-components.js";
 import { PopoverContent } from "./overlay-story-components.js";
 
 const storyStyles = html`
-	
+  
 `;
 
 export default {
-	title: "Overlay",
-	argTypes: {
-		offset: { control: "number" },
-		placement: {
-			control: {
-				type: "inline-radio",
-				options: [
-					"top",
-					"top-start",
-					"top-end",
-					"bottom",
-					"bottom-start",
-					"bottom-end",
-					"left",
-					"left-start",
-					"left-end",
-					"right",
-					"right-start",
-					"right-end",
-					"auto",
-					"auto-start",
-					"auto-end",
-					"none",
-				],
-			},
-		},
-		type: {
-			control: {
-				type: "inline-radio",
-				options: ["modal", "replace", "inline"],
-			},
-		},
-		colorStop: {
-			control: {
-				type: "inline-radio",
-				options: ["light", "dark"],
-			},
-		},
-	},
-	args: {
-		placement: "bottom",
-		offset: 0,
-		colorStop: "light",
-	},
+  title: "Overlay",
+  argTypes: {
+    offset: { control: "number" },
+    placement: {
+      control: {
+        type: "inline-radio",
+        options: [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end",
+          "auto",
+          "auto-start",
+          "auto-end",
+          "none",
+        ],
+      },
+    },
+    type: {
+      control: {
+        type: "inline-radio",
+        options: ["modal", "replace", "inline"],
+      },
+    },
+    colorStop: {
+      control: {
+        type: "inline-radio",
+        options: ["light", "dark"],
+      },
+    },
+  },
+  args: {
+    placement: "bottom",
+    offset: 0,
+    colorStop: "light",
+  },
 };
 
 interface Properties {
-	placement: Placement;
-	offset: number;
-	open?: OverlayContentTypes;
-	type?: Extract;
+  placement: Placement;
+  offset: number;
+  open?: OverlayContentTypes;
+  type?: Extract;
 }
 
 const template = ({
-	placement,
-	offset,
-	open,
-	type,
+  placement,
+  offset,
+  open,
+  type,
 }: Properties): TemplateResult => {
-	return html`
-		${storyStyles}
-		
-			Show Popover
-			
-				
-					
-					
The background of this div should be blue

-					
-						Press Me
-						
-							 Another Popover 
-						
-
-						
-							Click to open another popover.
-						
-					
-				
-			
-			
-				Click to open a popover.
-			
-		
-	`;
+  return html`
+    ${storyStyles}
+    
+      Show Popover
+      
+        
+          
+          
The background of this div should be blue

+          
+            Press Me
+            
+               Another Popover 
+            
+
+            
+              Click to open another popover.
+            
+          
+        
+      
+      
+        Click to open a popover.
+      
+    
+  `;
 };
 
 const extraText = html`
-	
This is some text.

-	
This is some text.

-	

-		This is a
-		link
-		.
-	

+  
This is some text.

+  
This is some text.

+  

+    This is a
+    link
+    .
+  

 `;
 
 function nextFrame(): Promise {
-	return new Promise((res) => requestAnimationFrame(() => res()));
+  return new Promise((res) => requestAnimationFrame(() => res()));
 }
 
 export const Default = (args: Properties): TemplateResult => template(args);
 
 export const accordion = (): TemplateResult => {
-	return html`
-		
-			
-			
-				Open overlay w/ accordion
-			
-			
-				
-					
-						
-							

-								Thing
-								

-								

-								

-								

-								

-								

-								

-								more things
-							

-						
-						
-							

-								Thing
-								

-								

-								

-								

-								

-								

-								

-								more things
-							

-						
-						
-							

-								Thing
-								

-								

-								

-								

-								

-								

-								

-								more things
-							

-						
-						
-							

-								Thing
-								

-								

-								

-								

-								

-								

-								

-								more things
-							

-						
-					
-				
-			
-		
-	`;
+  return html`
+    
+      
+      
+        Open overlay w/ accordion
+      
+      
+        
+          
+            
+              

+                Thing
+                

+                

+                

+                

+                

+                

+                

+                more things
+              

+            
+            
+              

+                Thing
+                

+                

+                

+                

+                

+                

+                

+                more things
+              

+            
+            
+              

+                Thing
+                

+                

+                

+                

+                

+                

+                

+                more things
+              

+            
+            
+              

+                Thing
+                

+                

+                

+                

+                

+                

+                

+                more things
+              

+            
+          
+        
+      
+    
+  `;
 };
 
 accordion.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 accordion.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const clickAndHoverTargets = (): TemplateResult => {
-	return html`
-		

-			${storyStyles}
-			
-			
-				
Click me

-				
-					Ok, now hover the other trigger
-				
-			
-			
-				

-					Then hover me
-				

-				
-					Now click my trigger -- I should stay open, but the other overlay
-					should close
-				
-			
-		

-	`;
+  return html`
+    

+      ${storyStyles}
+      
+      
+        
Click me

+        
+          Ok, now hover the other trigger
+        
+      
+      
+        

+          Then hover me
+        

+        
+          Now click my trigger -- I should stay open, but the other overlay
+          should close
+        
+      
+    

+  `;
 };
 clickAndHoverTargets.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 clickAndHoverTargets.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 class ScrollForcer extends HTMLElement {
-	ready!: (value: boolean | PromiseLike) => void;
-
-	constructor() {
-		super();
-		this.readyPromise = new Promise((res) => {
-			this.ready = res;
-		});
-		this.setup();
-	}
-
-	async setup(): Promise {
-		await nextFrame();
-		await nextFrame();
-
-		this.previousElementSibling?.addEventListener("sp-opened", this.doScroll);
-		await nextFrame();
-		await nextFrame();
-		(this.previousElementSibling?.lastElementChild as OverlayTrigger).open =
-			"click";
-	}
-
-	doScroll = async (): Promise => {
-		this.previousElementSibling?.addEventListener("sp-opened", this.doScroll);
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
-
-		if (document.scrollingElement) {
-			document.scrollingElement.scrollTop = 100;
-		}
-
-		await nextFrame();
-		await nextFrame();
-		this.ready(true);
-	};
-
-	private readyPromise: Promise = Promise.resolve(false);
-
-	get updateComplete(): Promise {
-		return this.readyPromise;
-	}
+  ready!: (value: boolean | PromiseLike) => void;
+
+  constructor() {
+    super();
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+    });
+    this.setup();
+  }
+
+  async setup(): Promise {
+    await nextFrame();
+    await nextFrame();
+
+    this.previousElementSibling?.addEventListener("sp-opened", this.doScroll);
+    await nextFrame();
+    await nextFrame();
+    (this.previousElementSibling?.lastElementChild as OverlayTrigger).open =
+      "click";
+  }
+
+  doScroll = async (): Promise => {
+    this.previousElementSibling?.addEventListener("sp-opened", this.doScroll);
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+
+    if (document.scrollingElement) {
+      document.scrollingElement.scrollTop = 100;
+    }
+
+    await nextFrame();
+    await nextFrame();
+    this.ready(true);
+  };
+
+  private readyPromise: Promise = Promise.resolve(false);
+
+  get updateComplete(): Promise {
+    return this.readyPromise;
+  }
 }
 
 customElements.define("scroll-forcer", ScrollForcer);
 
 export const clickContentClosedOnScroll = (
-	args: Properties,
+  args: Properties,
 ): TemplateResult => html`
-	

-		${template({
-			...args,
-		})}
-	

+  

+    ${template({
+      ...args,
+    })}
+  

 `;
 clickContentClosedOnScroll.decorators = [
-	(story: () => TemplateResult): TemplateResult => html`
-		
-		${story()}
-		
-	`,
+  (story: () => TemplateResult): TemplateResult => html`
+    
+    ${story()}
+    
+  `,
 ];
 
 class ComplexModalReady extends HTMLElement {
-	ready!: (value: boolean | PromiseLike) => void;
+  ready!: (value: boolean | PromiseLike) => void;
 
-	constructor() {
-		super();
-		this.readyPromise = new Promise((res) => {
-			this.ready = res;
-			this.setup();
-		});
-	}
+  constructor() {
+    super();
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
 
-	async setup(): Promise {
-		await nextFrame();
+  async setup(): Promise {
+    await nextFrame();
 
-		const overlay = document.querySelector(`overlay-trigger`) as OverlayTrigger;
+    const overlay = document.querySelector("overlay-trigger") as OverlayTrigger;
 
-		overlay.addEventListener("sp-opened", this.handleTriggerOpened);
-	}
+    overlay.addEventListener("sp-opened", this.handleTriggerOpened);
+  }
 
-	handleTriggerOpened = async (): Promise => {
-		await nextFrame();
+  handleTriggerOpened = async (): Promise => {
+    await nextFrame();
 
-		const picker = document.querySelector("#test-picker") as Picker;
+    const picker = document.querySelector("#test-picker") as Picker;
 
-		picker.addEventListener("sp-opened", this.handlePickerOpen);
-		picker.open = true;
-	};
+    picker.addEventListener("sp-opened", this.handlePickerOpen);
+    picker.open = true;
+  };
 
-	handlePickerOpen = async (): Promise => {
-		const picker = document.querySelector("#test-picker") as Picker;
-		const actions = [nextFrame, picker.updateComplete];
+  handlePickerOpen = async (): Promise => {
+    const picker = document.querySelector("#test-picker") as Picker;
+    const actions = [nextFrame, picker.updateComplete];
 
-		await Promise.all(actions);
+    await Promise.all(actions);
 
-		this.ready(true);
-	};
+    this.ready(true);
+  };
 
-	private readyPromise: Promise = Promise.resolve(false);
+  private readyPromise: Promise = Promise.resolve(false);
 
-	get updateComplete(): Promise {
-		return this.readyPromise;
-	}
+  get updateComplete(): Promise {
+    return this.readyPromise;
+  }
 }
 
 customElements.define("complex-modal-ready", ComplexModalReady);
 
 const complexModalDecorator = (story: () => TemplateResult): TemplateResult => {
-	return html`
-		${story()}
-		
-	`;
+  return html`
+    ${story()}
+    
+  `;
 };
 
 export const complexModal = (): TemplateResult => {
-	return html`
-		
-		
-			
-				 Selection type: 
-				
-					Deselect
-					Select inverse
-					Feather...
-					Select and mask...
-					
-					Save selection
-					Make work path
-				
-			
-			 Toggle Dialog 
-		
-	`;
+  return html`
+    
+    
+      
+         Selection type: 
+        
+          Deselect
+          Select inverse
+          Feather...
+          Select and mask...
+          
+          Save selection
+          Make work path
+        
+      
+       Toggle Dialog 
+    
+  `;
 };
 
 complexModal.decorators = [complexModalDecorator];
 
 export const customizedClickContent = (
-	args: Properties,
+  args: Properties,
 ): TemplateResult => html`
-	
-	${template({
-		...args,
-		open: "click",
-	})}
+  
+  ${template({
+    ...args,
+    open: "click",
+  })}
 `;
 
 export const deep = (): TemplateResult => html`
-	
-		
-			Open popover 1 with buttons + selfmanaged Tooltips
-		
-		
-			
-				
-					
-						My Tooltip 1
-					
-					A
-				
-				
-					
-						My Tooltip 1
-					
-					B
-				
-			
-		
-	
-
-	
-		
-			Open popover 2 with buttons without ToolTips
-		
-		
-			
-				X
-				Y
-			
-		
-	
+  
+    
+      Open popover 1 with buttons + selfmanaged Tooltips
+    
+    
+      
+        
+          
+            My Tooltip 1
+          
+          A
+        
+        
+          
+            My Tooltip 1
+          
+          B
+        
+      
+    
+  
+
+  
+    
+      Open popover 2 with buttons without ToolTips
+    
+    
+      
+        X
+        Y
+      
+    
+  
 `;
 deep.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 deep.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const deepChildTooltip = (): TemplateResult => html`
-	
-		Open popover
-		
-			
-				
Let us open another overlay here

-				
-					
-						Open sub popover
-					
-					
-						
-							

-								Render an action button with tooltips. Clicking the action
-								button shouldn't close everything
-							

-							
-								Button with self-managed tooltip
-								
-									Deep Child ToolTip
-								
-							
-							Just a button
-						
-					
-				
-			
-		
-	
+  
+    Open popover
+    
+      
+        
Let us open another overlay here

+        
+          
+            Open sub popover
+          
+          
+            
+              

+                Render an action button with tooltips. Clicking the action
+                button shouldn't close everything
+              

+              
+                Button with self-managed tooltip
+                
+                  Deep Child ToolTip
+                
+              
+              Just a button
+            
+          
+        
+      
+    
+  
 `;
 
 export const deepNesting = (): TemplateResult => {
-	const color = window.__swc_hack_knobs__.defaultColor;
-	const outter = color === "light" ? "dark" : "light";
-
-	return html`
-		${storyStyles}
-		
-			
-				
+      
+        
-			
-		
-	`;
+        >
+      
+    
+  `;
 };
 
 class DefinedOverlayReady extends HTMLElement {
-	ready!: (value: boolean | PromiseLike) => void;
-
-	connectedCallback(): void {
-		this.readyPromise = new Promise((res) => {
-			this.ready = res;
-			this.setup();
-		});
-	}
-
-	overlayElement!: OverlayTrigger;
-	popoverElement!: PopoverContent;
-
-	async setup(): Promise {
-		await nextFrame();
-		await nextFrame();
-
-		this.overlayElement = document.querySelector(
-			`overlay-trigger`,
-		) as OverlayTrigger;
-		const button = document.querySelector(
-			`[slot="trigger"]`,
-		) as HTMLButtonElement;
-
-		this.overlayElement.addEventListener("sp-opened", this.handleTriggerOpened);
-		await nextFrame();
-		await nextFrame();
-		button.click();
-	}
-
-	handleTriggerOpened = async (): Promise => {
-		this.overlayElement.removeEventListener(
-			"sp-opened",
-			this.handleTriggerOpened,
-		);
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
-		await nextFrame();
-
-		this.popoverElement = document.querySelector(
-			"popover-content",
-		) as PopoverContent;
-
-		if (!this.popoverElement) {
-			return;
-		}
-
-		this.popoverElement.addEventListener("sp-opened", this.handlePopoverOpen);
-		await nextFrame();
-		await nextFrame();
-		this.popoverElement.button.click();
-	};
-
-	handlePopoverOpen = async (): Promise => {
-		await nextFrame();
-
-		this.ready(true);
-	};
-
-	disconnectedCallback(): void {
-		this.overlayElement.removeEventListener(
-			"sp-opened",
-			this.handleTriggerOpened,
-		);
-		this.popoverElement.removeEventListener(
-			"sp-opened",
-			this.handlePopoverOpen,
-		);
-	}
-
-	private readyPromise: Promise = Promise.resolve(false);
-
-	get updateComplete(): Promise {
-		return this.readyPromise;
-	}
+  ready!: (value: boolean | PromiseLike) => void;
+
+  connectedCallback(): void {
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
+
+  overlayElement!: OverlayTrigger;
+  popoverElement!: PopoverContent;
+
+  async setup(): Promise {
+    await nextFrame();
+    await nextFrame();
+
+    this.overlayElement = document.querySelector(
+      "overlay-trigger",
+    ) as OverlayTrigger;
+    const button = document.querySelector(
+      '[slot="trigger"]',
+    ) as HTMLButtonElement;
+
+    this.overlayElement.addEventListener("sp-opened", this.handleTriggerOpened);
+    await nextFrame();
+    await nextFrame();
+    button.click();
+  }
+
+  handleTriggerOpened = async (): Promise => {
+    this.overlayElement.removeEventListener(
+      "sp-opened",
+      this.handleTriggerOpened,
+    );
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+
+    this.popoverElement = document.querySelector(
+      "popover-content",
+    ) as PopoverContent;
+
+    if (!this.popoverElement) {
+      return;
+    }
+
+    this.popoverElement.addEventListener("sp-opened", this.handlePopoverOpen);
+    await nextFrame();
+    await nextFrame();
+    this.popoverElement.button.click();
+  };
+
+  handlePopoverOpen = async (): Promise => {
+    await nextFrame();
+
+    this.ready(true);
+  };
+
+  disconnectedCallback(): void {
+    this.overlayElement.removeEventListener(
+      "sp-opened",
+      this.handleTriggerOpened,
+    );
+    this.popoverElement.removeEventListener(
+      "sp-opened",
+      this.handlePopoverOpen,
+    );
+  }
+
+  private readyPromise: Promise = Promise.resolve(false);
+
+  get updateComplete(): Promise {
+    return this.readyPromise;
+  }
 }
 
 customElements.define("defined-overlay-ready", DefinedOverlayReady);
 
 const definedOverlayDecorator = (
-	story: () => TemplateResult,
+  story: () => TemplateResult,
 ): TemplateResult => {
-	return html`
-		${story()}
-		
-	`;
+  return html`
+    ${story()}
+    
+  `;
 };
 
 export const definedOverlayElement = (): TemplateResult => {
-	return html`
-		
-			Open popover
-			
-				
-					
-				
-			
-		
-	`;
+  return html`
+    
+      Open popover
+      
+        
+          
+        
+      
+    
+  `;
 };
 
 definedOverlayElement.decorators = [definedOverlayDecorator];
 
 export const detachedElement = (): TemplateResult => {
-	let overlay: Overlay | undefined;
-	const openDetachedOverlayContent = async ({
-		target,
-	}: {
-		target: HTMLElement;
-	}): Promise => {
-		if (overlay) {
-			overlay.open = false;
-			overlay = undefined;
-
-			return;
-		}
-
-		const div = document.createElement("div");
-
-		(div as HTMLDivElement & { open: boolean }).open = false;
-		div.textContent = "This div is overlaid";
-		div.setAttribute(
-			"style",
-			`
+  let overlay: Overlay | undefined;
+  const openDetachedOverlayContent = async ({
+    target,
+  }: {
+    target: HTMLElement;
+  }): Promise => {
+    if (overlay) {
+      overlay.open = false;
+      overlay = undefined;
+
+      return;
+    }
+
+    const div = document.createElement("div");
+
+    (div as HTMLDivElement & { open: boolean }).open = false;
+    div.textContent = "This div is overlaid";
+    div.setAttribute(
+      "style",
+      `
             background-color: var(--spectrum-gray-50);
             color: var(--spectrum-gray-800);
             border: 1px solid;
             padding: 2em;
         `,
-		);
-		overlay = await Overlay.open(div, {
-			type: "auto",
-			trigger: target,
-			receivesFocus: "auto",
-			placement: "bottom",
-			offset: 0,
-		});
-		overlay.addEventListener("sp-closed", () => {
-			overlay = undefined;
-		});
-		target.insertAdjacentElement("afterend", overlay);
-	};
-
-	requestAnimationFrame(() => {
-		openDetachedOverlayContent({
-			target: document.querySelector(
-				"#detached-content-trigger",
-			) as HTMLElement,
-		});
-	});
-
-	return html`
-		
-		
-			
-		
-	`;
+    );
+    overlay = await Overlay.open(div, {
+      type: "auto",
+      trigger: target,
+      receivesFocus: "auto",
+      placement: "bottom",
+      offset: 0,
+    });
+    overlay.addEventListener("sp-closed", () => {
+      overlay = undefined;
+    });
+    target.insertAdjacentElement("afterend", overlay);
+  };
+
+  requestAnimationFrame(() => {
+    openDetachedOverlayContent({
+      target: document.querySelector(
+        "#detached-content-trigger",
+      ) as HTMLElement,
+    });
+  });
+
+  return html`
+    
+    
+      
+    
+  `;
 };
 
 export const edges = (): TemplateResult => {
-	return html`
-		
-		
-			
-				Top/
-				

-				Left
-			
-			
-				Triskaidekaphobia and More
-			
-		
-		
-			
-				Top/
-				

-				Right
-			
-			
-				Triskaidekaphobia and More
-			
-		
-		
-			
-				Bottom/
-				

-				Left
-			
-			
-				Triskaidekaphobia and More
-			
-		
-		
-			
-				Bottom/
-				

-				Right
-			
-			
-				Triskaidekaphobia and More
-			
-		
-	`;
+  return html`
+    
+    
+      
+        Top/
+        

+        Left
+      
+      
+        Triskaidekaphobia and More
+      
+    
+    
+      
+        Top/
+        

+        Right
+      
+      
+        Triskaidekaphobia and More
+      
+    
+    
+      
+        Bottom/
+        

+        Left
+      
+      
+        Triskaidekaphobia and More
+      
+    
+    
+      
+        Bottom/
+        

+        Right
+      
+      
+        Triskaidekaphobia and More
+      
+    
+  `;
 };
 
 export const inline = (): TemplateResult => {
-	const closeEvent = new Event("close", { bubbles: true, composed: true });
-
-	return html`
-		
-			Open
-			
-				 {
-						event.target.dispatchEvent(closeEvent);
-					}}
-				>
-					Close
-				
-			
-		
-		${extraText}
-	`;
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+  return html`
+    
+      Open
+      
+         {
+            event.target.dispatchEvent(closeEvent);
+          }}
+        >
+          Close
+        
+      
+    
+    ${extraText}
+  `;
 };
 
 export const longpress = (): TemplateResult => {
-	return html`
-		
-			
-				
-			
-			Search real hard...
-			
-				
-						event.target.dispatchEvent(new Event("close", { bubbles: true }))}
-					selects="single"
-					vertical
-					style="margin: calc(var(--spectrum-actiongroup-button-gap-y,calc(var(--swc-scale-factor) * 10px)) / 2);"
-				>
-					
-						
-					
-					
-						
-					
-					
-						
-					
-				
-			
-		
-	`;
+  return html`
+    
+      
+        
+      
+      Search real hard...
+      
+        
+            event.target.dispatchEvent(new Event("close", { bubbles: true }))}
+          selects="single"
+          vertical
+          style="margin: calc(var(--spectrum-actiongroup-button-gap-y,calc(var(--swc-scale-factor) * 10px)) / 2);"
+        >
+          
+            
+          
+          
+            
+          
+          
+            
+          
+        
+      
+    
+  `;
 };
 
 export const modalLoose = (): TemplateResult => {
-	const closeEvent = new Event("close", { bubbles: true, composed: true });
-
-	return html`
-		
-			Open
-			
-					event.target.dispatchEvent(closeEvent)}
-			>
-				
Loose Dialog

-				

-					The
-					sp-dialog
-					element is not "meant" to be a modal alone. In that way it does not
-					manage its own
-					open
-					attribute or outline when it should have
-					pointer-events: auto
-					. It's a part of this test suite to prove that content in this way can
-					be used in an
-					overlay-trigger
-					element.
-				

-			
-		
-		${extraText}
-	`;
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+  return html`
+    
+      Open
+      
+          event.target.dispatchEvent(closeEvent)}
+      >
+        
Loose Dialog

+        

+          The
+          sp-dialog
+          element is not "meant" to be a modal alone. In that way it does not
+          manage its own
+          open
+          attribute or outline when it should have
+          pointer-events: auto
+          . It's a part of this test suite to prove that content in this way can
+          be used in an
+          overlay-trigger
+          element.
+        

+      
+    
+    ${extraText}
+  `;
 };
 
 export const modalNoFocus = (): TemplateResult => {
-	const closeEvent = new Event("close", { bubbles: true, composed: true });
-
-	return html`
-		
-			Open
-			
-				

-					The
-					sp-dialog-wrapper
-					element has been prepared for use in an
-					overlay-trigger
-					element by it's combination of modal, underlay, etc. styles and
-					features.
-				

-				
-					
-							event.target.dispatchEvent(closeEvent)}
-					>
-						${"Cancel"}
-					
-					
-							event.target.dispatchEvent(closeEvent)}
-					>
-						${"Override"}
-					
-				
-			
-		
-	`;
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+  return html`
+    
+      Open
+      
+        

+          The
+          sp-dialog-wrapper
+          element has been prepared for use in an
+          overlay-trigger
+          element by it's combination of modal, underlay, etc. styles and
+          features.
+        

+        
+          
+              event.target.dispatchEvent(closeEvent)}
+          >
+            ${"Cancel"}
+          
+          
+              event.target.dispatchEvent(closeEvent)}
+          >
+            ${"Override"}
+          
+        
+      
+    
+  `;
 };
 
 export const modalManaged = (): TemplateResult => {
-	const closeEvent = new Event("close", { bubbles: true, composed: true });
-
-	return html`
-		
-			Open
-			 {
-					event.target.dispatchEvent(closeEvent);
-				}}
-				@secondary=${(event: Event & { target: DialogWrapper }): void => {
-					event.target.dispatchEvent(closeEvent);
-				}}
-				@cancel=${(event: Event & { target: DialogWrapper }): void => {
-					event.target.dispatchEvent(closeEvent);
-				}}
-			>
-				

-					The
-					sp-dialog-wrapper
-					element has been prepared for use in an
-					overlay-trigger
-					element by it's combination of modal, underlay, etc. styles and
-					features.
-				

-			
-		
-		${extraText}
-	`;
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+  return html`
+    
+      Open
+       {
+          event.target.dispatchEvent(closeEvent);
+        }}
+        @secondary=${(event: Event & { target: DialogWrapper }): void => {
+          event.target.dispatchEvent(closeEvent);
+        }}
+        @cancel=${(event: Event & { target: DialogWrapper }): void => {
+          event.target.dispatchEvent(closeEvent);
+        }}
+      >
+        

+          The
+          sp-dialog-wrapper
+          element has been prepared for use in an
+          overlay-trigger
+          element by it's combination of modal, underlay, etc. styles and
+          features.
+        

+      
+    
+    ${extraText}
+  `;
 };
 
 export const modalWithinNonModal = (): TemplateResult => {
-	return html`
-		
-			
-				Open inline overlay
-			
-			
-				
-					
-						
-							Open modal overlay
-						
-						
-							 Modal overlay 
-						
-					
-				
-			
-		
-	`;
+  return html`
+    
+      
+        Open inline overlay
+      
+      
+        
+          
+            
+              Open modal overlay
+            
+            
+               Modal overlay 
+            
+          
+        
+      
+    
+  `;
 };
 
 export const noCloseOnResize = (args: Properties): TemplateResult => html`
-	
-	${template({
-		...args,
-		open: "click",
-	})}
+  
+  ${template({
+    ...args,
+    open: "click",
+  })}
 `;
 noCloseOnResize.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 noCloseOnResize.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const openClickContent = (args: Properties): TemplateResult =>
-	template({
-		...args,
-		open: "click",
-	});
+  template({
+    ...args,
+    open: "click",
+  });
 
 export const openHoverContent = (args: Properties): TemplateResult =>
-	template({
-		...args,
-		open: "hover",
-	});
+  template({
+    ...args,
+    open: "hover",
+  });
 
 export const replace = (): TemplateResult => {
-	const closeEvent = new Event("close", { bubbles: true, composed: true });
-
-	return html`
-		
-			Open
-			
-				 {
-						event.target.dispatchEvent(closeEvent);
-					}}
-				>
-					Close
-				
-			
-		
-		${extraText}
-	`;
+  const closeEvent = new Event("close", { bubbles: true, composed: true });
+
+  return html`
+    
+      Open
+      
+         {
+            event.target.dispatchEvent(closeEvent);
+          }}
+        >
+          Close
+        
+      
+    
+    ${extraText}
+  `;
 };
 
 export const sideHoverDraggable = (): TemplateResult => {
-	return html`
-		${storyStyles}
-		
-		
-			
-				
-				
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
-					egestas sed enim sed condimentum. Nunc facilisis scelerisque massa sed
-					luctus. Orci varius natoque penatibus et magnis dis parturient montes,
-					nascetur ridiculus mus. Suspendisse sagittis sodales purus vitae
-					ultricies. Integer at dui sem. Sed quam tortor, ornare in nisi et,
-					rhoncus lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.
-					Sed feugiat semper libero, sit amet vehicula orci fermentum id.
-					Vivamus imperdiet egestas luctus. Mauris tincidunt malesuada ante,
-					faucibus viverra nunc blandit a. Fusce et nisl nisi. Aenean dictum
-					quam id mollis faucibus. Nulla a ultricies dui. In hac habitasse
-					platea dictumst. Curabitur gravida lobortis vestibulum.
-				
-			
-		
-	`;
+  return html`
+    ${storyStyles}
+    
+    
+      
+        
+        
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+          egestas sed enim sed condimentum. Nunc facilisis scelerisque massa sed
+          luctus. Orci varius natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus. Suspendisse sagittis sodales purus vitae
+          ultricies. Integer at dui sem. Sed quam tortor, ornare in nisi et,
+          rhoncus lacinia mauris. Sed vel rutrum mauris, ac pellentesque nibh.
+          Sed feugiat semper libero, sit amet vehicula orci fermentum id.
+          Vivamus imperdiet egestas luctus. Mauris tincidunt malesuada ante,
+          faucibus viverra nunc blandit a. Fusce et nisl nisi. Aenean dictum
+          quam id mollis faucibus. Nulla a ultricies dui. In hac habitasse
+          platea dictumst. Curabitur gravida lobortis vestibulum.
+        
+      
+    
+  `;
 };
 
 export const superComplexModal = (): TemplateResult => {
-	return html`
-		
-			Toggle Dialog
-			
-				
-					
-						
-							Toggle Dialog
-						
-						
-							
-								
-									
-										Toggle Dialog
-									
-									
-										
-											

-												When you get this deep, this ActiveOverlay should be the
-												only one in [slot="open"].
-											

-											

-												All of the rest of the ActiveOverlay elements should
-												have had their [slot] attribute removed.
-											

-											
Closing this ActiveOverlay should replace them...

-										
-									
-								
-							
-						
-					
-				
-			
-		
-	`;
+  return html`
+    
+      Toggle Dialog
+      
+        
+          
+            
+              Toggle Dialog
+            
+            
+              
+                
+                  
+                    Toggle Dialog
+                  
+                  
+                    
+                      

+                        When you get this deep, this ActiveOverlay should be the
+                        only one in [slot="open"].
+                      

+                      

+                        All of the rest of the ActiveOverlay elements should
+                        have had their [slot] attribute removed.
+                      

+                      
Closing this ActiveOverlay should replace them...

+                    
+                  
+                
+              
+            
+          
+        
+      
+    
+  `;
 };
 
 export const updated = (): TemplateResult => {
-	return html`
-		${storyStyles}
-		
-		
-			
-				
-				
-					Click to open popover
-				
-				
-					
-						
-						
The background of this div should be blue

-						
-							Press Me
-							
-								 Another Popover 
-							
-
-							
-								Click to open another popover.
-							
-						
-					
-				
-			
-		
-	`;
+  return html`
+    ${storyStyles}
+    
+    
+      
+        
+        
+          Click to open popover
+        
+        
+          
+            
+            
The background of this div should be blue

+            
+              Press Me
+              
+                 Another Popover 
+              
+
+              
+                Click to open another popover.
+              
+            
+          
+        
+      
+    
+  `;
 };
 
 export const updating = (): TemplateResult => {
-	const update = (): void => {
-		const button = document.querySelector('[slot="trigger"]') as Button;
-
-		button.style.left = `${Math.floor(Math.random() * 200)}px`;
-		button.style.top = `${Math.floor(Math.random() * 200)}px`;
-		button.style.position = "fixed";
-	};
-
-	return html`
-		
-			
-				Open inline overlay
-			
-			
-				
-					
-						Update trigger location.
-					
-				
-			
-		
-	`;
+  const update = (): void => {
+    const button = document.querySelector('[slot="trigger"]') as Button;
+
+    button.style.left = `${Math.floor(Math.random() * 200)}px`;
+    button.style.top = `${Math.floor(Math.random() * 200)}px`;
+    button.style.position = "fixed";
+  };
+
+  return html`
+    
+      
+        Open inline overlay
+      
+      
+        
+          
+            Update trigger location.
+          
+        
+      
+    
+  `;
 };
 
 updating.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 updating.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 class StartEndContextmenu extends HTMLElement {
-	override shadowRoot!: ShadowRoot;
-	constructor() {
-		super();
-		this.attachShadow({ mode: "open" });
-		this.shadowRoot.innerHTML = `
+  override shadowRoot!: ShadowRoot;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
             
-		
-	`;
+  const contextMenuTemplate = (kind = ""): TemplateResult => html`
+     {
+        if ((event.target as HTMLElement).localName === "sp-menu-item") {
+          event.target?.dispatchEvent(new Event("close", { bubbles: true }));
+        }
+      }}
+    >
+      
+        
+          Menu source: ${kind}
+          Deselect
+          Select inverse
+          Feather...
+          Select and mask...
+          
+          Save selection
+          Make work path
+        
+      
+    
+  `;
+  const handleContextmenu = async (event: PointerEvent): Promise => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const source = event.composedPath()[0] as HTMLDivElement;
+    const { id } = source;
+    const trigger = event.target as HTMLElement;
+    const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
+    const fragment = document.createDocumentFragment();
+
+    render(contextMenuTemplate(id), fragment);
+    const popover = fragment.querySelector("sp-popover") as Popover;
+
+    openOverlay(trigger, "click", popover, {
+      placement: args.placement,
+      receivesFocus: "auto",
+      virtualTrigger,
+      offset: 0,
+      notImmediatelyClosable: true,
+    });
+  };
+
+  return html`
+    
+    
+  `;
 };
 
 virtualElementV1.args = {
-	placement: "right-start" as Placement,
+  placement: "right-start" as Placement,
 };
 
 export const virtualElement = (args: Properties): TemplateResult => {
-	const contextMenuTemplate = (kind = ""): TemplateResult => html`
-		 {
-				if ((event.target as HTMLElement).localName === "sp-menu-item") {
-					event.target?.dispatchEvent(new Event("close", { bubbles: true }));
-				}
-			}}
-		>
-			
-				
-					Menu source: ${kind}
-					Deselect
-					Select inverse
-					Feather...
-					Select and mask...
-					
-					Save selection
-					Make work path
-				
-			
-		
-	`;
-	const handleContextmenu = async (event: PointerEvent): Promise => {
-		event.preventDefault();
-		event.stopPropagation();
-
-		const source = event.composedPath()[0] as HTMLDivElement;
-		const { id } = source;
-		const trigger = event.target as HTMLElement;
-		const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
-		const fragment = document.createDocumentFragment();
-
-		render(contextMenuTemplate(id), fragment);
-		const popover = fragment.querySelector("sp-popover") as Popover;
-
-		const overlay = await openOverlay(popover, {
-			trigger: virtualTrigger,
-			placement: args.placement,
-			offset: 0,
-			notImmediatelyClosable: true,
-			type: "auto",
-		});
-
-		trigger.insertAdjacentElement("afterend", overlay);
-	};
-
-	return html`
-		
-		
-	`;
+  const contextMenuTemplate = (kind = ""): TemplateResult => html`
+     {
+        if ((event.target as HTMLElement).localName === "sp-menu-item") {
+          event.target?.dispatchEvent(new Event("close", { bubbles: true }));
+        }
+      }}
+    >
+      
+        
+          Menu source: ${kind}
+          Deselect
+          Select inverse
+          Feather...
+          Select and mask...
+          
+          Save selection
+          Make work path
+        
+      
+    
+  `;
+  const handleContextmenu = async (event: PointerEvent): Promise => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const source = event.composedPath()[0] as HTMLDivElement;
+    const { id } = source;
+    const trigger = event.target as HTMLElement;
+    const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
+    const fragment = document.createDocumentFragment();
+
+    render(contextMenuTemplate(id), fragment);
+    const popover = fragment.querySelector("sp-popover") as Popover;
+
+    const overlay = await openOverlay(popover, {
+      trigger: virtualTrigger,
+      placement: args.placement,
+      offset: 0,
+      notImmediatelyClosable: true,
+      type: "auto",
+    });
+
+    trigger.insertAdjacentElement("afterend", overlay);
+  };
+
+  return html`
+    
+    
+  `;
 };
 
 virtualElement.args = {
-	placement: "right-start" as Placement,
+  placement: "right-start" as Placement,
 };
 
 export const virtualElementDeclaratively = (
-	args: Properties,
+  args: Properties,
 ): TemplateResult => {
-	const handleContextmenu = async (event: PointerEvent): Promise => {
-		event.preventDefault();
-		event.stopPropagation();
-
-		const overlay = document.querySelector("sp-overlay:not([open])") as Overlay;
-
-		if (overlay.triggerElement instanceof VirtualTrigger) {
-			overlay.triggerElement.updateBoundingClientRect(
-				event.clientX,
-				event.clientY,
-			);
-		}
-
-		overlay.willPreventClose = true;
-		overlay.open = true;
-	};
-	const overlay = (): TemplateResult => html`
-		
-			 {
-					event.target?.dispatchEvent(new Event("close", { bubbles: true }));
-				}}
-			>
-				
-					
-						Menu
-						Deselect
-						Select inverse
-						Feather...
-						Select and mask...
-						
-						Save selection
-						Make work path
-					
-				
-			
-		
-	`;
-
-	return html`
-		
-		

-			${overlay()} ${overlay()}
-		

-	`;
+  const handleContextmenu = async (event: PointerEvent): Promise => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const overlay = document.querySelector("sp-overlay:not([open])") as Overlay;
+
+    if (overlay.triggerElement instanceof VirtualTrigger) {
+      overlay.triggerElement.updateBoundingClientRect(
+        event.clientX,
+        event.clientY,
+      );
+    }
+
+    overlay.willPreventClose = true;
+    overlay.open = true;
+  };
+  const overlay = (): TemplateResult => html`
+    
+       {
+          event.target?.dispatchEvent(new Event("close", { bubbles: true }));
+        }}
+      >
+        
+          
+            Menu
+            Deselect
+            Select inverse
+            Feather...
+            Select and mask...
+            
+            Save selection
+            Make work path
+          
+        
+      
+    
+  `;
+
+  return html`
+    
+    

+      ${overlay()} ${overlay()}
+    

+  `;
 };
 
 virtualElementDeclaratively.args = {
-	placement: "right-start" as Placement,
+  placement: "right-start" as Placement,
 };
 
 virtualElementDeclaratively.swc_vrt = {
-	skip: true,
+  skip: true,
 };
 
 virtualElementDeclaratively.parameters = {
-	// Disables Chromatic's snapshotting on a global level
-	chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
diff --git a/packages/overlay/sync/overlay-trigger.ts b/packages/overlay/sync/overlay-trigger.ts
index 96a787998e..8e4313698b 100644
--- a/packages/overlay/sync/overlay-trigger.ts
+++ b/packages/overlay/sync/overlay-trigger.ts
@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { OverlayTrigger } from '../src/OverlayTrigger.js';
-import { OverlayOptionsV1, TriggerInteractions } from '../src/index.js';
-import '../overlay-trigger.js';
-import '../sp-overlay.js';
+import { OverlayTrigger } from "../src/OverlayTrigger.js";
+import { OverlayOptionsV1, TriggerInteractions } from "../src/index.js";
+import "../overlay-trigger.js";
+import "../sp-overlay.js";
 
 export { OverlayTrigger };
 export type { OverlayOptionsV1, TriggerInteractions };
diff --git a/packages/overlay/test/benchmark/basic-test.ts b/packages/overlay/test/benchmark/basic-test.ts
index 88338f929e..0428de9bb1 100644
--- a/packages/overlay/test/benchmark/basic-test.ts
+++ b/packages/overlay/test/benchmark/basic-test.ts
@@ -10,42 +10,35 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(
-    html`
-        
-            Trigger
-            
-                
-                    
-                    

-                        The background of this div should be blue
-                    

-                    
-                        Press Me
-                        
-                            Click to open another popover.
-                        
-                    
-                
-            
-        
-    `
-);
+measureFixtureCreation(html`
+  
+    Trigger
+    
+      
+        
+        
The background of this div should be blue

+        
+          Press Me
+          
+            Click to open another popover.
+          
+        
+      
+    
+  
+`);
diff --git a/packages/overlay/test/benchmark/directive-test.ts b/packages/overlay/test/benchmark/directive-test.ts
index 1091833c1c..354d0a6619 100644
--- a/packages/overlay/test/benchmark/directive-test.ts
+++ b/packages/overlay/test/benchmark/directive-test.ts
@@ -10,45 +10,43 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { trigger } from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import { html, TemplateResult } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import { trigger } from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import { html, TemplateResult } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 const renderPopover = (): TemplateResult => {
-    import('@spectrum-web-components/popover/sp-popover.js');
-    import('@spectrum-web-components/dialog/sp-dialog.js');
-    import('@spectrum-web-components/slider/sp-slider.js');
-    import('@spectrum-web-components/tooltip/sp-tooltip.js');
+  import("@spectrum-web-components/popover/sp-popover.js");
+  import("@spectrum-web-components/dialog/sp-dialog.js");
+  import("@spectrum-web-components/slider/sp-slider.js");
+  import("@spectrum-web-components/tooltip/sp-tooltip.js");
 
-    return html`
-        
-            
-                
-                

-                    The background of this div should be blue
-                

-                
-                    Press Me
-                    
-                        Click to open another popover.
-                    
-                
-            
-        
-    `;
+  return html`
+    
+      
+        
+        
The background of this div should be blue

+        
+          Press Me
+          
+            Click to open another popover.
+          
+        
+      
+    
+  `;
 };
 
 measureFixtureCreation(html`
-    Trigger
+  Trigger
 `);
diff --git a/packages/overlay/test/benchmark/element-test.ts b/packages/overlay/test/benchmark/element-test.ts
index 2022e275bc..599c5b0596 100644
--- a/packages/overlay/test/benchmark/element-test.ts
+++ b/packages/overlay/test/benchmark/element-test.ts
@@ -10,42 +10,35 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(
-    html`
-        Trigger
-        
-            
-                
-                    
-                    

-                        The background of this div should be blue
-                    

-                    
-                        Press Me
-                        
-                            Click to open another popover.
-                        
-                    
-                
-            
-        
-    `
-);
+measureFixtureCreation(html`
+  Trigger
+  
+    
+      
+        
+        
The background of this div should be blue

+        
+          Press Me
+          
+            Click to open another popover.
+          
+        
+      
+    
+  
+`);
diff --git a/packages/overlay/test/benchmark/lazy-test.ts b/packages/overlay/test/benchmark/lazy-test.ts
index 00d3cce293..b9a51ee4de 100644
--- a/packages/overlay/test/benchmark/lazy-test.ts
+++ b/packages/overlay/test/benchmark/lazy-test.ts
@@ -10,53 +10,53 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/button/sp-button.js';
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/button/sp-button.js";
 import {
-    removeSlottableRequest,
-    type SlottableRequestEvent,
-} from '@spectrum-web-components/overlay/src/slottable-request-event.js';
-import { html, render } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+  removeSlottableRequest,
+  type SlottableRequestEvent,
+} from "@spectrum-web-components/overlay/src/slottable-request-event.js";
+import { html, render } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 const handleSlottableRequest = (event: SlottableRequestEvent): void => {
-    import('@spectrum-web-components/popover/sp-popover.js');
-    import('@spectrum-web-components/dialog/sp-dialog.js');
-    import('@spectrum-web-components/slider/sp-slider.js');
-    import('@spectrum-web-components/tooltip/sp-tooltip.js');
-    const template =
-        event.data === removeSlottableRequest
-            ? undefined
-            : html`
-                  
-                      
-                          
-                          

-                              The background of this div should be blue
-                          

-                          
-                              Press Me
-                              
-                                  Click to open another popover.
-                              
-                          
-                      
-                  
-              `;
+  import("@spectrum-web-components/popover/sp-popover.js");
+  import("@spectrum-web-components/dialog/sp-dialog.js");
+  import("@spectrum-web-components/slider/sp-slider.js");
+  import("@spectrum-web-components/tooltip/sp-tooltip.js");
+  const template =
+    event.data === removeSlottableRequest
+      ? undefined
+      : html`
+          
+            
+              
+              

+                The background of this div should be blue
+              

+              
+                Press Me
+                
+                  Click to open another popover.
+                
+              
+            
+          
+        `;
 
-    render(template, event.target as HTMLElement);
+  render(template, event.target as HTMLElement);
 };
 
 measureFixtureCreation(html`
-    Trigger
-    
+  Trigger
+  
 `);
diff --git a/packages/overlay/test/index.ts b/packages/overlay/test/index.ts
index a9f5408e37..3cb195ab5d 100644
--- a/packages/overlay/test/index.ts
+++ b/packages/overlay/test/index.ts
@@ -10,721 +10,701 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { fixture, isOnTopLayer } from '../../../test/testing-helpers.js';
+import { fixture, isOnTopLayer } from "../../../test/testing-helpers.js";
 import {
-    aTimeout,
-    elementUpdated,
-    expect,
-    html,
-    nextFrame,
-    oneEvent,
-} from '@open-wc/testing';
+  aTimeout,
+  elementUpdated,
+  expect,
+  html,
+  nextFrame,
+  oneEvent,
+} from "@open-wc/testing";
 
 import {
-    OverlayTrigger,
-    TriggerInteractions,
-} from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/button/sp-button.js';
-import { Button } from '@spectrum-web-components/button';
-import '@spectrum-web-components/popover/sp-popover.js';
-import { Popover } from '@spectrum-web-components/popover';
-import '@spectrum-web-components/theme/sp-theme.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { sendKeys } from '@web/test-runner-commands';
+  OverlayTrigger,
+  TriggerInteractions,
+} from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/button/sp-button.js";
+import { Button } from "@spectrum-web-components/button";
+import "@spectrum-web-components/popover/sp-popover.js";
+import { Popover } from "@spectrum-web-components/popover";
+import "@spectrum-web-components/theme/sp-theme.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { sendKeys } from "@web/test-runner-commands";
 
 export const runOverlayTriggerTests = (type: string): void => {
-    describe(`Overlay Trigger - ${type}`, () => {
-        describe('open/close', () => {
-            beforeEach(async function () {
-                this.testDiv = await fixture(html`
-                    

-                        
-                        
-                        
-                            
-                                Show Popover
-                            
-                            
-                                
-                                    
-                                        
-                                            Press Me
-                                        
-                                        
-                                            
-                                                Another Popover
-                                                
-                                                    Does nothing
-                                                
-                                            
-                                        
-                                    
-                                
-                            
-                            

-                                Tooltip
-                            

-                        
-                    

-                `);
-
-                this.innerTrigger = this.testDiv.querySelector(
-                    '#inner-trigger'
-                ) as OverlayTrigger;
-                this.outerTrigger = this.testDiv.querySelector(
-                    '#trigger'
-                ) as OverlayTrigger;
-                this.innerButton = this.testDiv.querySelector(
-                    '#inner-button'
-                ) as Button;
-                this.outerButton = this.testDiv.querySelector(
-                    '#outer-button'
-                ) as Button;
-                this.innerClickContent = this.testDiv.querySelector(
-                    '#inner-popover'
-                ) as Popover;
-                this.outerClickContent = this.testDiv.querySelector(
-                    '#outer-popover'
-                ) as Popover;
-                this.hoverContent = this.testDiv.querySelector(
-                    '#hover-content'
-                ) as HTMLDivElement;
-
-                await Promise.all([
-                    this.innerTrigger.updateComplete,
-                    this.outerTrigger.updateComplete,
-                    this.innerButton.updateComplete,
-                    this.outerButton.updateComplete,
-                    this.innerClickContent.updateComplete,
-                    this.outerClickContent.updateComplete,
-                ]);
-                this.testDiv.querySelector('input').focus();
-            });
-
-            it('opens a popover', async function () {
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover not available at point'
-                ).to.be.false;
-
-                expect(this.outerButton).to.exist;
-                const open = oneEvent(this.outerTrigger, 'sp-opened');
-
-                this.outerButton.click();
-                await open;
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover available at point'
-                ).to.be.true;
-            });
-
-            it('[disabled] closes a popover', async function () {
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover not available at point'
-                ).to.be.false;
-                expect(this.outerTrigger.disabled).to.be.false;
-
-                expect(this.outerButton).to.exist;
-
-                const opened = oneEvent(this.outerButton, 'sp-opened');
-
-                this.outerButton.click();
-                await opened;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover available at point'
-                ).to.be.true;
-
-                const closed = oneEvent(this.outerButton, 'sp-closed');
-
-                this.outerTrigger.disabled = true;
-                await closed;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover not available at point'
-                ).to.be.false;
-            });
-
-            it('resizes a popover', async function () {
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover not available at point'
-                ).to.be.false;
-
-                expect(this.outerButton).to.exist;
-                const open = oneEvent(this.outerTrigger, 'sp-opened');
-
-                this.outerButton.click();
-                await open;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover available at point'
-                ).to.be.true;
-
-                window.dispatchEvent(new Event('resize'));
-                window.dispatchEvent(new Event('resize'));
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover available at point'
-                ).to.be.true;
-            });
-
-            ['modal', 'replace', 'inline'].map((type: string) => {
-                it(`opens a popover - [type="${type}"]`, async function () {
-                    this.outerTrigger.type = type as Extract<
-                        TriggerInteractions,
-                        'inline' | 'modal' | 'replace'
-                    >;
-                    await elementUpdated(this.outerTrigger);
-                    expect(
-                        await isOnTopLayer(this.outerClickContent),
-                        'popover not available at point'
-                    ).to.be.false;
-
-                    expect(this.outerButton).to.exist;
-                    const opened = oneEvent(this.outerTrigger, 'sp-opened');
-
-                    this.outerButton.click();
-                    await opened;
-                    expect(
-                        await isOnTopLayer(this.outerClickContent),
-                        'popover available at point'
-                    ).to.be.true;
-                });
-            });
-
-            it('does not open a hover popover when a click popover is open', async function () {
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover not available at point'
-                ).to.be.false;
-                expect(
-                    await isOnTopLayer(this.hoverContent),
-                    'hover not available at point'
-                ).to.be.false;
-
-                expect(this.outerButton).to.exist;
-                const open = oneEvent(this.outerTrigger, 'sp-opened');
-
-                this.outerButton.click();
-                await open;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover available at point'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.hoverContent),
-                    'hover not available at point'
-                ).to.be.false;
-
-                this.outerButton.dispatchEvent(
-                    new Event('mouseenter', {
-                        bubbles: true,
-                        composed: true,
-                    })
-                );
-
-                await nextFrame();
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'popover available at point'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.hoverContent),
-                    'hover not available at point'
-                ).to.be.false;
-            });
-
-            it('does not open a popover when [disabled]', async function () {
-                const triggerZone = this.outerTrigger.shadowRoot.querySelector(
-                    '#trigger'
-                ) as HTMLDivElement;
-
-                expect(this.outerTrigger.disabled).to.be.false;
-                let open = oneEvent(this.outerTrigger, 'sp-opened');
-
-                this.outerButton.click();
-                await open;
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'hover available at point'
-                ).to.be.true;
-                let closed = oneEvent(this.outerTrigger, 'sp-closed');
-
-                sendMouse({
-                    steps: [
-                        {
-                            type: 'click',
-                            position: [1, 1],
-                        },
-                    ],
-                });
-                await closed;
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'hover not available at point'
-                ).to.be.false;
-
-                this.outerTrigger.disabled = true;
-                await elementUpdated(this.outerTrigger);
-
-                expect(this.outerTrigger.disabled).to.be.true;
-                expect(this.outerTrigger.hasAttribute('disabled')).to.be.true;
-                // // The overlay shouldn't open here.
-                this.outerButton.click();
-                await aTimeout(150);
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'hover not available at point'
-                ).to.be.false;
-                // The overlay shouldn't open here, either.
-                triggerZone.dispatchEvent(new Event('mouseenter'));
-                await aTimeout(150);
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'hover not available at point'
-                ).to.be.false;
-
-                this.outerTrigger.disabled = false;
-                await elementUpdated(this.outerTrigger);
-
-                expect(this.outerTrigger.disabled).to.be.false;
-                expect(this.outerTrigger.hasAttribute('disabled')).to.be.false;
-                open = oneEvent(this.outerTrigger, 'sp-opened');
-                this.outerButton.click();
-                await open;
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'hover available at point'
-                ).to.be.true;
-                closed = oneEvent(this.outerTrigger, 'sp-closed');
-                this.outerButton.click();
-                await closed;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'hover not available at point'
-                ).to.be.false;
-            });
-
-            it('opens a nested popover', async function () {
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'hover not available at point'
-                ).to.be.false;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'hover not available at point'
-                ).to.be.false;
-
-                expect(this.outerButton).to.exist;
-                let open = oneEvent(this.outerTrigger, 'sp-opened');
-
-                this.outerButton.click();
-                await open;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content available at point'
-                ).to.be.true;
-                expect(await isOnTopLayer(this.innerClickContent)).to.be.false;
-
-                open = oneEvent(this.innerTrigger, 'sp-opened');
-                this.innerButton.click();
-                await open;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content available at point'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content available at point'
-                ).to.be.true;
-            });
-
-            it('focus previous "modal" when closing nested "modal"', async function () {
-                this.outerTrigger.type = 'modal';
-                this.innerTrigger.type = 'modal';
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content not available at point'
-                ).to.be.false;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content not available at point'
-                ).to.be.false;
-
-                const outerOpen = oneEvent(this.outerButton, 'sp-opened');
-
-                this.outerButton.click();
-                await outerOpen;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content available at point'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content available at point'
-                ).to.be.false;
-
-                const innerOpen = oneEvent(this.innerButton, 'sp-opened');
-
-                this.innerButton.click();
-                await innerOpen;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content available at point'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content available at point'
-                ).to.be.true;
-
-                // Why does this make the test pass in Chromium? 🤷🏻‍♂️
-                await sendKeys({
-                    press: 'Space',
-                });
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content available at point'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content available at point'
-                ).to.be.true;
-
-                const innerClose = oneEvent(this.innerButton, 'sp-closed');
-
-                await sendKeys({
-                    press: 'Escape',
-                });
-                await innerClose;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content available at point'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content not available at point'
-                ).to.be.false;
-
-                expect(
-                    document.activeElement === this.innerButton,
-                    `outer popover recieved focus: ${document.activeElement?.localName}`
-                ).to.be.true;
-            });
-
-            it('escape closes an open popover', async function () {
-                this.outerTrigger.type = 'modal';
-                this.innerTrigger.type = 'modal';
-                const outerOpen = oneEvent(this.outerButton, 'sp-opened');
-
-                this.outerButton.click();
-                await outerOpen;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content available at point'
-                ).to.be.true;
-
-                const innerOpen = oneEvent(this.innerButton, 'sp-opened');
-
-                this.innerButton.click();
-                await innerOpen;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content available at point, 1'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content available at point'
-                ).to.be.true;
-
-                const innerClose = oneEvent(this.innerButton, 'sp-closed');
-
-                await sendKeys({
-                    press: 'Escape',
-                });
-                await innerClose;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content available at point, 2'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content not available at point, 1'
-                ).to.be.false;
-
-                const outerClose = oneEvent(this.outerButton, 'sp-closed');
-
-                await sendKeys({
-                    press: 'Escape',
-                });
-                await outerClose;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content not available at point'
-                ).to.be.false;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content not available at point, 2'
-                ).to.be.false;
-            });
-
-            it('click closes an open popover', async function () {
-                this.outerTrigger.type = 'auto';
-                this.innerTrigger.type = 'auto';
-                const outerOpen = oneEvent(this.outerButton, 'sp-opened');
-
-                this.outerButton.click();
-                await outerOpen;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content is available at point'
-                ).to.be.true;
-
-                const innerOpen = oneEvent(this.innerButton, 'sp-opened');
-
-                this.innerButton.click();
-                await innerOpen;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content is available at point'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content is available at point'
-                ).to.be.true;
-
-                // Test that clicking in the overlay content does not close the overlay
-                // 200ms is slightly more than the overlay animation fade out time (130ms)
-                this.innerClickContent.click();
-                await aTimeout(200);
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content is available at point'
-                ).to.be.true;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content is available at point'
-                ).to.be.true;
-
-                const innerClose = oneEvent(this.innerButton, 'sp-closed');
-                const outerClose = oneEvent(this.outerButton, 'sp-closed');
-
-                sendMouse({
-                    steps: [
-                        {
-                            type: 'click',
-                            position: [1, 1],
-                        },
-                    ],
-                });
-                await innerClose;
-                await outerClose;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'outer click content is not available at point'
-                ).to.be.not;
-                expect(
-                    await isOnTopLayer(this.innerClickContent),
-                    'inner click content is not available at point'
-                ).to.be.not;
-            });
-
-            it('opens a hover popover', async function () {
-                expect(await isOnTopLayer(this.hoverContent)).to.be.false;
-
-                const rect = this.outerTrigger.getBoundingClientRect();
-                const open = oneEvent(this.outerTrigger, 'sp-opened');
-
-                sendMouse({
-                    steps: [
-                        {
-                            type: 'move',
-                            position: [
-                                rect.left + rect.width / 2,
-                                rect.top + rect.height / 2,
-                            ],
-                        },
-                    ],
-                });
-                await open;
-                expect(
-                    await isOnTopLayer(this.hoverContent),
-                    'hover content is available at point'
-                ).to.be.true;
-
-                const close = oneEvent(this.outerTrigger, 'sp-closed');
-
-                sendMouse({
-                    steps: [
-                        {
-                            type: 'move',
-                            position: [
-                                rect.left + rect.width * 2,
-                                rect.top + rect.height / 2,
-                            ],
-                        },
-                    ],
-                });
-                await close;
-                expect(
-                    await isOnTopLayer(this.hoverContent),
-                    'hover content is not available at point'
-                ).to.be.false;
-            });
-
-            it('closes a hover popover', async function () {
-                expect(await isOnTopLayer(this.hoverContent)).to.be.false;
-
-                const rect = this.outerTrigger.getBoundingClientRect();
-                const open = oneEvent(this.outerTrigger, 'sp-opened');
-
-                await sendMouse({
-                    steps: [
-                        {
-                            type: 'move',
-                            position: [
-                                rect.left + rect.width / 2,
-                                rect.top + rect.height / 2,
-                            ],
-                        },
-                    ],
-                });
-                await open;
-                const close = oneEvent(this.outerTrigger, 'sp-closed');
-
-                expect(
-                    await isOnTopLayer(this.hoverContent),
-                    'hover content is available at point'
-                ).to.be.true;
-                await sendMouse({
-                    steps: [
-                        {
-                            type: 'move',
-                            position: [
-                                rect.left + rect.width * 2,
-                                rect.top + rect.height / 2,
-                            ],
-                        },
-                    ],
-                });
-                await close;
-                expect(
-                    await isOnTopLayer(this.hoverContent),
-                    'hover content is not available at point'
-                ).to.be.false;
-            });
-
-            it('dispatches events on open/close', async function () {
-                const opened = oneEvent(this.outerButton, 'sp-opened');
-
-                this.outerButton.click();
-                const openedEvent = await opened;
-
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'hover content is available at point'
-                ).to.be.true;
-                expect(this.outerTrigger.open).to.equal('click');
-
-                expect(openedEvent.detail.interaction).to.equal('auto');
-
-                const closed = oneEvent(this.outerButton, 'sp-closed');
-
-                sendMouse({
-                    steps: [
-                        {
-                            type: 'click',
-                            position: [1, 1],
-                        },
-                    ],
-                });
-                const closedEvent = await closed;
-
-                expect(closedEvent.detail.interaction).to.equal('auto');
-                expect(
-                    await isOnTopLayer(this.outerClickContent),
-                    'hover content is not available at point'
-                ).to.be.false;
-            });
+  describe(`Overlay Trigger - ${type}`, () => {
+    describe("open/close", () => {
+      beforeEach(async function () {
+        this.testDiv = await fixture(html`
+          

+            
+            
+            
+              
+                Show Popover
+              
+              
+                
+                  
+                    
+                      Press Me
+                    
+                    
+                      
+                        Another Popover
+                         Does nothing 
+                      
+                    
+                  
+                
+              
+              

+                Tooltip
+              

+            
+          

+        `);
+
+        this.innerTrigger = this.testDiv.querySelector(
+          "#inner-trigger",
+        ) as OverlayTrigger;
+        this.outerTrigger = this.testDiv.querySelector(
+          "#trigger",
+        ) as OverlayTrigger;
+        this.innerButton = this.testDiv.querySelector(
+          "#inner-button",
+        ) as Button;
+        this.outerButton = this.testDiv.querySelector(
+          "#outer-button",
+        ) as Button;
+        this.innerClickContent = this.testDiv.querySelector(
+          "#inner-popover",
+        ) as Popover;
+        this.outerClickContent = this.testDiv.querySelector(
+          "#outer-popover",
+        ) as Popover;
+        this.hoverContent = this.testDiv.querySelector(
+          "#hover-content",
+        ) as HTMLDivElement;
+
+        await Promise.all([
+          this.innerTrigger.updateComplete,
+          this.outerTrigger.updateComplete,
+          this.innerButton.updateComplete,
+          this.outerButton.updateComplete,
+          this.innerClickContent.updateComplete,
+          this.outerClickContent.updateComplete,
+        ]);
+        this.testDiv.querySelector("input").focus();
+      });
+
+      it("opens a popover", async function () {
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point",
+        ).to.be.false;
+
+        expect(this.outerButton).to.exist;
+        const open = oneEvent(this.outerTrigger, "sp-opened");
+
+        this.outerButton.click();
+        await open;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point",
+        ).to.be.true;
+      });
+
+      it("[disabled] closes a popover", async function () {
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point",
+        ).to.be.false;
+        expect(this.outerTrigger.disabled).to.be.false;
+
+        expect(this.outerButton).to.exist;
+
+        const opened = oneEvent(this.outerButton, "sp-opened");
+
+        this.outerButton.click();
+        await opened;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point",
+        ).to.be.true;
+
+        const closed = oneEvent(this.outerButton, "sp-closed");
+
+        this.outerTrigger.disabled = true;
+        await closed;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point",
+        ).to.be.false;
+      });
+
+      it("resizes a popover", async function () {
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point",
+        ).to.be.false;
+
+        expect(this.outerButton).to.exist;
+        const open = oneEvent(this.outerTrigger, "sp-opened");
+
+        this.outerButton.click();
+        await open;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point",
+        ).to.be.true;
+
+        window.dispatchEvent(new Event("resize"));
+        window.dispatchEvent(new Event("resize"));
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point",
+        ).to.be.true;
+      });
+
+      ["modal", "replace", "inline"].map((type: string) => {
+        it(`opens a popover - [type="${type}"]`, async function () {
+          this.outerTrigger.type = type as Extract<
+            TriggerInteractions,
+            "inline" | "modal" | "replace"
+          >;
+          await elementUpdated(this.outerTrigger);
+          expect(
+            await isOnTopLayer(this.outerClickContent),
+            "popover not available at point",
+          ).to.be.false;
+
+          expect(this.outerButton).to.exist;
+          const opened = oneEvent(this.outerTrigger, "sp-opened");
+
+          this.outerButton.click();
+          await opened;
+          expect(
+            await isOnTopLayer(this.outerClickContent),
+            "popover available at point",
+          ).to.be.true;
         });
-        describe('System interactions', () => {
-            afterEach(async () => {
-                const triggers =
-                    document.querySelectorAll(
-                        'overlay-trigger'
-                    );
-                const closes: Promise>[] = [];
-
-                triggers.forEach((trigger) => {
-                    if (trigger.open) {
-                        const close = oneEvent(trigger, 'sp-closed');
-
-                        trigger.open = undefined;
-                        closes.push(close);
-                    }
-                });
-                await Promise.all(closes);
-            });
+      });
+
+      it("does not open a hover popover when a click popover is open", async function () {
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point",
+        ).to.be.false;
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover not available at point",
+        ).to.be.false;
+
+        expect(this.outerButton).to.exist;
+        const open = oneEvent(this.outerTrigger, "sp-opened");
+
+        this.outerButton.click();
+        await open;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover not available at point",
+        ).to.be.false;
+
+        this.outerButton.dispatchEvent(
+          new Event("mouseenter", {
+            bubbles: true,
+            composed: true,
+          }),
+        );
+
+        await nextFrame();
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover not available at point",
+        ).to.be.false;
+      });
+
+      it("does not open a popover when [disabled]", async function () {
+        const triggerZone = this.outerTrigger.shadowRoot.querySelector(
+          "#trigger",
+        ) as HTMLDivElement;
+
+        expect(this.outerTrigger.disabled).to.be.false;
+        let open = oneEvent(this.outerTrigger, "sp-opened");
+
+        this.outerButton.click();
+        await open;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover available at point",
+        ).to.be.true;
+        let closed = oneEvent(this.outerTrigger, "sp-closed");
+
+        sendMouse({
+          steps: [
+            {
+              type: "click",
+              position: [1, 1],
+            },
+          ],
         });
+        await closed;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point",
+        ).to.be.false;
+
+        this.outerTrigger.disabled = true;
+        await elementUpdated(this.outerTrigger);
+
+        expect(this.outerTrigger.disabled).to.be.true;
+        expect(this.outerTrigger.hasAttribute("disabled")).to.be.true;
+        // // The overlay shouldn't open here.
+        this.outerButton.click();
+        await aTimeout(150);
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point",
+        ).to.be.false;
+        // The overlay shouldn't open here, either.
+        triggerZone.dispatchEvent(new Event("mouseenter"));
+        await aTimeout(150);
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point",
+        ).to.be.false;
+
+        this.outerTrigger.disabled = false;
+        await elementUpdated(this.outerTrigger);
+
+        expect(this.outerTrigger.disabled).to.be.false;
+        expect(this.outerTrigger.hasAttribute("disabled")).to.be.false;
+        open = oneEvent(this.outerTrigger, "sp-opened");
+        this.outerButton.click();
+        await open;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover available at point",
+        ).to.be.true;
+        closed = oneEvent(this.outerTrigger, "sp-closed");
+        this.outerButton.click();
+        await closed;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point",
+        ).to.be.false;
+      });
+
+      it("opens a nested popover", async function () {
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point",
+        ).to.be.false;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "hover not available at point",
+        ).to.be.false;
+
+        expect(this.outerButton).to.exist;
+        let open = oneEvent(this.outerTrigger, "sp-opened");
+
+        this.outerButton.click();
+        await open;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point",
+        ).to.be.true;
+        expect(await isOnTopLayer(this.innerClickContent)).to.be.false;
+
+        open = oneEvent(this.innerTrigger, "sp-opened");
+        this.innerButton.click();
+        await open;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point",
+        ).to.be.true;
+      });
+
+      it('focus previous "modal" when closing nested "modal"', async function () {
+        this.outerTrigger.type = "modal";
+        this.innerTrigger.type = "modal";
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content not available at point",
+        ).to.be.false;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content not available at point",
+        ).to.be.false;
+
+        const outerOpen = oneEvent(this.outerButton, "sp-opened");
+
+        this.outerButton.click();
+        await outerOpen;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point",
+        ).to.be.false;
+
+        const innerOpen = oneEvent(this.innerButton, "sp-opened");
+
+        this.innerButton.click();
+        await innerOpen;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point",
+        ).to.be.true;
+
+        // Why does this make the test pass in Chromium? 🤷🏻‍♂️
+        await sendKeys({
+          press: "Space",
+        });
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point",
+        ).to.be.true;
+
+        const innerClose = oneEvent(this.innerButton, "sp-closed");
+
+        await sendKeys({
+          press: "Escape",
+        });
+        await innerClose;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content not available at point",
+        ).to.be.false;
+
+        expect(
+          document.activeElement === this.innerButton,
+          `outer popover recieved focus: ${document.activeElement?.localName}`,
+        ).to.be.true;
+      });
+
+      it("escape closes an open popover", async function () {
+        this.outerTrigger.type = "modal";
+        this.innerTrigger.type = "modal";
+        const outerOpen = oneEvent(this.outerButton, "sp-opened");
+
+        this.outerButton.click();
+        await outerOpen;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point",
+        ).to.be.true;
+
+        const innerOpen = oneEvent(this.innerButton, "sp-opened");
+
+        this.innerButton.click();
+        await innerOpen;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point, 1",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point",
+        ).to.be.true;
+
+        const innerClose = oneEvent(this.innerButton, "sp-closed");
+
+        await sendKeys({
+          press: "Escape",
+        });
+        await innerClose;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point, 2",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content not available at point, 1",
+        ).to.be.false;
+
+        const outerClose = oneEvent(this.outerButton, "sp-closed");
+
+        await sendKeys({
+          press: "Escape",
+        });
+        await outerClose;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content not available at point",
+        ).to.be.false;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content not available at point, 2",
+        ).to.be.false;
+      });
+
+      it("click closes an open popover", async function () {
+        this.outerTrigger.type = "auto";
+        this.innerTrigger.type = "auto";
+        const outerOpen = oneEvent(this.outerButton, "sp-opened");
+
+        this.outerButton.click();
+        await outerOpen;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content is available at point",
+        ).to.be.true;
+
+        const innerOpen = oneEvent(this.innerButton, "sp-opened");
+
+        this.innerButton.click();
+        await innerOpen;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content is available at point",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content is available at point",
+        ).to.be.true;
+
+        // Test that clicking in the overlay content does not close the overlay
+        // 200ms is slightly more than the overlay animation fade out time (130ms)
+        this.innerClickContent.click();
+        await aTimeout(200);
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content is available at point",
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content is available at point",
+        ).to.be.true;
+
+        const innerClose = oneEvent(this.innerButton, "sp-closed");
+        const outerClose = oneEvent(this.outerButton, "sp-closed");
+
+        sendMouse({
+          steps: [
+            {
+              type: "click",
+              position: [1, 1],
+            },
+          ],
+        });
+        await innerClose;
+        await outerClose;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content is not available at point",
+        ).to.be.not;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content is not available at point",
+        ).to.be.not;
+      });
+
+      it("opens a hover popover", async function () {
+        expect(await isOnTopLayer(this.hoverContent)).to.be.false;
+
+        const rect = this.outerTrigger.getBoundingClientRect();
+        const open = oneEvent(this.outerTrigger, "sp-opened");
+
+        sendMouse({
+          steps: [
+            {
+              type: "move",
+              position: [
+                rect.left + rect.width / 2,
+                rect.top + rect.height / 2,
+              ],
+            },
+          ],
+        });
+        await open;
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover content is available at point",
+        ).to.be.true;
+
+        const close = oneEvent(this.outerTrigger, "sp-closed");
+
+        sendMouse({
+          steps: [
+            {
+              type: "move",
+              position: [
+                rect.left + rect.width * 2,
+                rect.top + rect.height / 2,
+              ],
+            },
+          ],
+        });
+        await close;
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover content is not available at point",
+        ).to.be.false;
+      });
+
+      it("closes a hover popover", async function () {
+        expect(await isOnTopLayer(this.hoverContent)).to.be.false;
+
+        const rect = this.outerTrigger.getBoundingClientRect();
+        const open = oneEvent(this.outerTrigger, "sp-opened");
+
+        await sendMouse({
+          steps: [
+            {
+              type: "move",
+              position: [
+                rect.left + rect.width / 2,
+                rect.top + rect.height / 2,
+              ],
+            },
+          ],
+        });
+        await open;
+        const close = oneEvent(this.outerTrigger, "sp-closed");
+
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover content is available at point",
+        ).to.be.true;
+        await sendMouse({
+          steps: [
+            {
+              type: "move",
+              position: [
+                rect.left + rect.width * 2,
+                rect.top + rect.height / 2,
+              ],
+            },
+          ],
+        });
+        await close;
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover content is not available at point",
+        ).to.be.false;
+      });
+
+      it("dispatches events on open/close", async function () {
+        const opened = oneEvent(this.outerButton, "sp-opened");
+
+        this.outerButton.click();
+        const openedEvent = await opened;
+
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover content is available at point",
+        ).to.be.true;
+        expect(this.outerTrigger.open).to.equal("click");
+
+        expect(openedEvent.detail.interaction).to.equal("auto");
+
+        const closed = oneEvent(this.outerButton, "sp-closed");
+
+        sendMouse({
+          steps: [
+            {
+              type: "click",
+              position: [1, 1],
+            },
+          ],
+        });
+        const closedEvent = await closed;
+
+        expect(closedEvent.detail.interaction).to.equal("auto");
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover content is not available at point",
+        ).to.be.false;
+      });
+    });
+    describe("System interactions", () => {
+      afterEach(async () => {
+        const triggers =
+          document.querySelectorAll("overlay-trigger");
+        const closes: Promise>[] = [];
+
+        triggers.forEach((trigger) => {
+          if (trigger.open) {
+            const close = oneEvent(trigger, "sp-closed");
+
+            trigger.open = undefined;
+            closes.push(close);
+          }
+        });
+        await Promise.all(closes);
+      });
     });
+  });
 };
diff --git a/packages/overlay/test/overlay-directive.test.ts b/packages/overlay/test/overlay-directive.test.ts
index faf4450d2b..0e453cc9f3 100644
--- a/packages/overlay/test/overlay-directive.test.ts
+++ b/packages/overlay/test/overlay-directive.test.ts
@@ -10,204 +10,181 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@spectrum-web-components/base';
+import { html } from "@spectrum-web-components/base";
 import {
-    elementUpdated,
-    expect,
-    nextFrame,
-    oneEvent,
-    waitUntil,
-} from '@open-wc/testing';
-import { Button } from '@spectrum-web-components/button';
-import { Overlay } from '@spectrum-web-components/overlay';
+  elementUpdated,
+  expect,
+  nextFrame,
+  oneEvent,
+  waitUntil,
+} from "@open-wc/testing";
+import { Button } from "@spectrum-web-components/button";
+import { Overlay } from "@spectrum-web-components/overlay";
 import {
-    Default,
-    insertionOptions,
-} from '../stories/overlay-directive.stories.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { fixture } from '../../../test/testing-helpers.js';
+  Default,
+  insertionOptions,
+} from "../stories/overlay-directive.stories.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { fixture } from "../../../test/testing-helpers.js";
+
+describe("Overlay Directive", () => {
+  it("opens declaratively", async function () {
+    const test = await fixture
-		`);
+  let testDiv!: HTMLDivElement;
+  let openOverlays: (() => void)[] = [];
+
+  describe("shared fixture", () => {
+    beforeEach(async () => {
+      testDiv = await styledFixture(html`
+        

+          
+          
+            Show Popover
+          
+          

+            
+              
+                
A popover message

+                 Test 1 
+                Test 2
+                Test 3
+              
+            
+            
+              Hover message
+            
+            
+              Other hover message
+            
+          

+        

+      `);
+      await elementUpdated(testDiv);
+    });
+
+    afterEach(() => {
+      openOverlays.map((close) => close());
+      openOverlays = [];
+    });
+
+    [
+      "bottom",
+      "bottom-start",
+      "bottom-end",
+      "top",
+      "top-start",
+      "top-end",
+      "left",
+      "left-start",
+      "left-end",
+      "right",
+      "right-start",
+      "right-end",
+      "none",
+    ].map((direction) => {
+      const placement = direction as Placement;
+
+      it(`opens a popover - ${placement}`, async () => {
+        const button = testDiv.querySelector("#first-button") as HTMLElement;
+        const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+        expect(await isInteractive(outerPopover)).to.be.false;
+        expect(button).to.exist;
+
+        const opened = oneEvent(outerPopover, "sp-opened");
+
+        openOverlays.push(
+          await Overlay.open(button, "click", outerPopover, {
+            delayed: false,
+            placement,
+            offset: 10,
+          }),
+        );
+        await opened;
+        expect(await isInteractive(outerPopover)).to.be.true;
+      });
+    });
+
+    it("opens a modal dialog", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+      expect(await isInteractive(outerPopover)).to.be.false;
+
+      expect(button).to.exist;
+
+      const opened = oneEvent(outerPopover, "sp-opened");
+
+      openOverlays.push(
+        await Overlay.open(button, "modal", outerPopover, {
+          delayed: false,
+        }),
+      );
+      await opened;
+
+      const firstFocused = outerPopover.querySelector(
+        "#outer-focus-target",
+      ) as HTMLElement;
+
+      expect(document.activeElement === firstFocused).to.be.true;
+
+      /**
+       * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page
+       * and the backward tab past the known beginning of the page. Test that you never focused the button
+       * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better.
+       */
+
+      await sendKeys({
+        press: "Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+      await sendKeys({
+        press: "Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+
+      await sendKeys({
+        press: "Shift+Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+
+      await sendKeys({
+        press: "Shift+Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+
+      await sendKeys({
+        press: "Shift+Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+    });
+
+    it("updates a popover", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+      expect(await isInteractive(outerPopover)).to.be.false;
+
+      expect(button).to.exist;
+
+      const opened = oneEvent(outerPopover, "sp-opened");
+
+      openOverlays.push(
+        await Overlay.open(button, "click", outerPopover, {
+          delayed: false,
+          offset: 10,
+        }),
+      );
+      await opened;
+
+      expect(await isInteractive(outerPopover)).to.be.true;
+
+      Overlay.update();
+
+      expect(await isInteractive(outerPopover)).to.be.true;
+    });
+
+    it("opens a popover w/ delay", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+      expect(await isInteractive(outerPopover)).to.be.false;
+      expect(button).to.exist;
+
+      const opened = oneEvent(outerPopover, "sp-opened");
+      const start = performance.now();
+
+      openOverlays.push(
+        await Overlay.open(button, "click", outerPopover, {
+          delayed: true,
+          offset: 10,
+        }),
+      );
+      await opened;
+      const end = performance.now();
+
+      expect(await isInteractive(outerPopover)).to.be.true;
+      expect(end - start).to.be.greaterThan(1000);
+    });
+
+    it("opens hover overlay", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const hoverOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
+      const clickOverlay = testDiv.querySelector(
+        "#outer-popover",
+      ) as HTMLElement;
+
+      expect(await isOnTopLayer(hoverOverlay)).to.be.false;
+      expect(await isOnTopLayer(clickOverlay)).to.be.false;
+
+      let opened = oneEvent(hoverOverlay, "sp-opened");
+
+      openOverlays.push(
+        await Overlay.open(button, "hover", hoverOverlay, {
+          delayed: false,
+          placement: "top",
+          offset: 10,
+        }),
+      );
+      await opened;
+      expect(await isOnTopLayer(hoverOverlay)).to.be.true;
+
+      opened = oneEvent(clickOverlay, "sp-opened");
+      const closed = oneEvent(hoverOverlay, "sp-closed");
+
+      // Opening click overlay should close the hover overlay
+      openOverlays.push(
+        await Overlay.open(button, "click", clickOverlay, {
+          delayed: false,
+          placement: "bottom",
+          offset: 10,
+        }),
+      );
+      await opened;
+      await closed;
+      expect(await isInteractive(clickOverlay), "click overlay not interactive")
+        .to.be.true;
+      expect(await isOnTopLayer(hoverOverlay), "hover overlay interactive").to
+        .be.false;
+    });
+
+    it("opens custom overlay", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const customOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
+      const clickOverlay = testDiv.querySelector(
+        "#outer-popover",
+      ) as HTMLElement;
+
+      expect(button).to.exist;
+      expect(customOverlay).to.exist;
+
+      expect(await isOnTopLayer(customOverlay)).to.be.false;
+      expect(await isOnTopLayer(clickOverlay)).to.be.false;
+
+      let opened = oneEvent(customOverlay, "sp-opened");
+
+      openOverlays.push(
+        await Overlay.open(button, "custom", customOverlay, {
+          delayed: false,
+          placement: "top",
+          offset: 10,
+        }),
+      );
+      await opened;
+      expect(await isOnTopLayer(customOverlay)).to.be.true;
+
+      opened = oneEvent(clickOverlay, "sp-opened");
+      openOverlays.push(
+        await Overlay.open(button, "click", clickOverlay, {
+          delayed: false,
+          placement: "bottom",
+          offset: 10,
+        }),
+      );
+      await opened;
+      expect(await isOnTopLayer(clickOverlay), "click content open").to.be.true;
+    });
+  });
+
+  it("closes via events", async function () {
+    this.retries(0);
+    const test = await fixture(html`
+      

+        
+           Some Content for the Dialog. 
+        
+      

+    `);
+
+    const el = test.querySelector("sp-popover") as Popover;
+    const dialog = el.querySelector("sp-dialog") as Dialog;
+
+    const opened = oneEvent(el, "sp-opened");
+
+    openOverlays.push(
+      await Overlay.open(test, "click", el, {
+        delayed: false,
+        placement: "bottom",
+        offset: 10,
+      }),
+    );
+    await opened;
+    expect(await isOnTopLayer(el)).to.be.true;
+
+    const closed = oneEvent(el, "sp-closed");
+
+    dialog.close();
+    await closed;
+    expect(await isOnTopLayer(el)).to.be.false;
+  });
+
+  it("closes an inline overlay when tabbing past the content", async () => {
+    const el = await fixture(html`
+      

+        Trigger
+        
+          
+        
+        
+      

+    `);
+
+    const trigger = el.querySelector(".trigger") as HTMLElement;
+    const content = el.querySelector(".content") as HTMLElement;
+    const input = el.querySelector("input") as HTMLInputElement;
+    const after = el.querySelector("#after") as HTMLAnchorElement;
+
+    const opened = oneEvent(content, "sp-opened");
+
+    openOverlays.push(
+      await Overlay.open(trigger, "inline", content, {
+        receivesFocus: "auto",
+      }),
+    );
+    await opened;
+
+    expect(await isInteractive(content)).to.be.true;
+    expect(document.activeElement).to.equal(input);
+
+    const closed = oneEvent(content, "sp-closed");
+
+    await sendKeys({
+      press: "Shift+Tab",
+    });
+    await closed;
+
+    expect(document.activeElement).to.equal(trigger);
+
+    await sendKeys({
+      press: "Tab",
+    });
+    expect(document.activeElement).to.equal(after);
+    expect(await isInteractive(content)).to.be.false;
+  });
+
+  it("closes an inline overlay when tabbing before the trigger", async () => {
+    const el = await fixture(html`
+      

+        
+        Trigger
+        

+          
+        

+      

+    `);
+
+    const trigger = el.querySelector(".trigger") as HTMLElement;
+    const content = el.querySelector(".content") as HTMLElement;
+    const input = el.querySelector(".content input") as HTMLInputElement;
+    const before = el.querySelector("#before") as HTMLAnchorElement;
+
+    const open = oneEvent(trigger, "sp-opened");
+
+    openOverlays.push(await Overlay.open(trigger, "inline", content, {}));
+    await open;
+
+    expect(document.activeElement).to.equal(input);
+
+    await sendKeys({
+      press: "Shift+Tab",
+    });
+
+    expect(document.activeElement).to.equal(trigger);
+
+    await sendKeys({
+      press: "Shift+Tab",
+    });
+
+    expect(document.activeElement).to.equal(before);
+  });
+
+  it("opens detached content", async () => {
+    const textContent = "This is a detached element that has been overlaid";
+    const el = await fixture(html`
+      
+    `);
 
-		const content = document.createElement("sp-popover");
+    const content = document.createElement("sp-popover");
 
-		content.textContent = textContent;
+    content.textContent = textContent;
 
-		const opened = oneEvent(content, "sp-opened");
-		const closeOverlay = await Overlay.open(el, "click", content, {
-			placement: "bottom",
-		});
+    const opened = oneEvent(content, "sp-opened");
+    const closeOverlay = await Overlay.open(el, "click", content, {
+      placement: "bottom",
+    });
 
-		await opened;
+    await opened;
 
-		expect(await isInteractive(content)).to.be.true;
+    expect(await isInteractive(content)).to.be.true;
 
-		const closed = oneEvent(content, "sp-closed");
+    const closed = oneEvent(content, "sp-closed");
 
-		closeOverlay();
-		await closed;
+    closeOverlay();
+    await closed;
 
-		expect(await isInteractive(content)).to.be.false;
+    expect(await isInteractive(content)).to.be.false;
 
-		content.remove();
-	});
+    content.remove();
+  });
 });
 describe('Overlay - type="modal", v1', () => {
-	describe("handle multiple separate `contextmenu` events", async () => {
-		let width = 0;
-		let height = 0;
-		let firstMenu: Popover;
-		let firstRect: DOMRect;
-		let secondMenu: Popover;
-		let secondRect: DOMRect;
-
-		before(async () => {
-			render(
-				html`
-					
-						${virtualElementV1({
-							...virtualElementV1.args,
-							offset: 6,
-						})}
-					
-				`,
-				document.body,
-			);
-
-			width = window.innerWidth;
-			height = window.innerHeight;
-		});
-		after(() => {
-			document.querySelector("sp-theme")?.remove();
-		});
-		it('opens the first "contextmenu" overlay', async () => {
-			const opened = oneEvent(document, "sp-opened");
-
-			// Right click to open "context menu" overlay.
-			await sendMouse({
-				steps: [
-					{
-						type: "move",
-						position: [width / 2 + 50, height / 2],
-					},
-					{
-						type: "click",
-						options: {
-							button: "right",
-						},
-						position: [width / 2 + 50, height / 2],
-					},
-				],
-			});
-			await opened;
-			firstMenu = document.querySelector("sp-popover") as Popover;
-			expect(firstMenu.textContent).to.include("Menu source: end");
-			firstRect = firstMenu.getBoundingClientRect();
-			expect(firstMenu).to.not.be.null;
-		});
-		it('closes the first "contextmenu" when opening a second', async () => {
-			const closed = oneEvent(document, "sp-closed");
-			const opened = oneEvent(document, "sp-opened");
-			/**
-			 * Right click out of the "context menu" overlay to both close
-			 * the first overlay and have the event passed to the surfacing page
-			 * in order to open a subsequent "context menu" overlay.
-			 *
-			 * Using `sendMouse` here triggers the light dismiss for some reason while
-			 * manual interacting in this way does not...
-			 */
-			const trigger = document.querySelector(
-				"start-end-contextmenu",
-			) as HTMLElement;
-
-			trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
-				new Event("contextmenu", {
-					composed: true,
-				}),
-			);
-			await nextFrame();
-			trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
-				new Event("pointerup", {
-					composed: true,
-					bubbles: true,
-				}),
-			);
-			await closed;
-			await opened;
-			secondMenu = document.querySelector("sp-popover") as Popover;
-			expect(secondMenu.textContent).to.include("Menu source: start");
-			secondRect = secondMenu.getBoundingClientRect();
-			expect(secondMenu).to.not.be.null;
-		});
-		it('closes the second "contextmenu" when clicking away', async () => {
-			const closed = oneEvent(document, "sp-closed");
-
-			sendMouse({
-				steps: [
-					{
-						type: "click",
-						position: [width - width / 8, height - height / 8],
-					},
-				],
-			});
-			await closed;
-			expect(firstRect.top).to.not.equal(secondRect.top);
-			expect(firstRect.left).to.not.equal(secondRect.left);
-		});
-	});
-
-	it("does not open content off of the viewport", async () => {
-		before(async () => {
-			await setViewport({ width: 360, height: 640 });
-			// Allow viewport update to propagate.
-			await nextFrame();
-		});
-		after(async () => {
-			await setViewport({ width: 800, height: 600 });
-			// Allow viewport update to propagate.
-			await nextFrame();
-		});
-
-		await fixture(html`
-			${virtualElementV1({
-				...virtualElementV1.args,
-				offset: 6,
-			})}
-		`);
-
-		const opened = oneEvent(document, "sp-opened");
-
-		// Right click to open "context menu" overlay.
-		sendMouse({
-			steps: [
-				{
-					type: "move",
-					position: [270, 10],
-				},
-				{
-					type: "click",
-					options: {
-						button: "right",
-					},
-					position: [270, 10],
-				},
-			],
-		});
-		await opened;
-
-		const firstMenu = document.querySelector("sp-menu") as Menu;
-
-		expect(firstMenu).to.not.be.null;
-		expect(await isInteractive(firstMenu)).to.be.true;
-
-		const closed = oneEvent(document, "sp-closed");
-
-		sendKeys({
-			press: "Escape",
-		});
-		await closed;
-
-		expect(await isInteractive(firstMenu)).to.be.false;
-	});
-
-	it("opens children in the modal stack through shadow roots", async () => {
-		const el = await fixture(definedOverlayElement());
-		const trigger = el.querySelector('[slot="trigger"]') as HTMLButtonElement;
-		let open = oneEvent(el, "sp-opened");
-
-		trigger.click();
-		await open;
-		expect(el.open).to.equal("click");
-		const content = document.querySelector("popover-content") as PopoverContent;
-
-		open = oneEvent(content, "sp-opened");
-		content.button.click();
-		await open;
-		expect(content.trigger.open).to.equal("click");
-		let close = oneEvent(content, "sp-closed");
-
-		content.trigger.removeAttribute("open");
-		await close;
-		expect(content.trigger.open).to.be.null;
-		close = oneEvent(el, "sp-closed");
-		el.removeAttribute("open");
-		await close;
-		expect(el.open).to.be.null;
-	});
+  describe("handle multiple separate `contextmenu` events", async () => {
+    let width = 0;
+    let height = 0;
+    let firstMenu: Popover;
+    let firstRect: DOMRect;
+    let secondMenu: Popover;
+    let secondRect: DOMRect;
+
+    before(async () => {
+      render(
+        html`
+          
+            ${virtualElementV1({
+              ...virtualElementV1.args,
+              offset: 6,
+            })}
+          
+        `,
+        document.body,
+      );
+
+      width = window.innerWidth;
+      height = window.innerHeight;
+    });
+    after(() => {
+      document.querySelector("sp-theme")?.remove();
+    });
+    it('opens the first "contextmenu" overlay', async () => {
+      const opened = oneEvent(document, "sp-opened");
+
+      // Right click to open "context menu" overlay.
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [width / 2 + 50, height / 2],
+          },
+          {
+            type: "click",
+            options: {
+              button: "right",
+            },
+            position: [width / 2 + 50, height / 2],
+          },
+        ],
+      });
+      await opened;
+      firstMenu = document.querySelector("sp-popover") as Popover;
+      expect(firstMenu.textContent).to.include("Menu source: end");
+      firstRect = firstMenu.getBoundingClientRect();
+      expect(firstMenu).to.not.be.null;
+    });
+    it('closes the first "contextmenu" when opening a second', async () => {
+      const closed = oneEvent(document, "sp-closed");
+      const opened = oneEvent(document, "sp-opened");
+      /**
+       * Right click out of the "context menu" overlay to both close
+       * the first overlay and have the event passed to the surfacing page
+       * in order to open a subsequent "context menu" overlay.
+       *
+       * Using `sendMouse` here triggers the light dismiss for some reason while
+       * manual interacting in this way does not...
+       */
+      const trigger = document.querySelector(
+        "start-end-contextmenu",
+      ) as HTMLElement;
+
+      trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
+        new Event("contextmenu", {
+          composed: true,
+        }),
+      );
+      await nextFrame();
+      trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
+        new Event("pointerup", {
+          composed: true,
+          bubbles: true,
+        }),
+      );
+      await closed;
+      await opened;
+      secondMenu = document.querySelector("sp-popover") as Popover;
+      expect(secondMenu.textContent).to.include("Menu source: start");
+      secondRect = secondMenu.getBoundingClientRect();
+      expect(secondMenu).to.not.be.null;
+    });
+    it('closes the second "contextmenu" when clicking away', async () => {
+      const closed = oneEvent(document, "sp-closed");
+
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [width - width / 8, height - height / 8],
+          },
+        ],
+      });
+      await closed;
+      expect(firstRect.top).to.not.equal(secondRect.top);
+      expect(firstRect.left).to.not.equal(secondRect.left);
+    });
+  });
+
+  it("does not open content off of the viewport", async () => {
+    before(async () => {
+      await setViewport({ width: 360, height: 640 });
+      // Allow viewport update to propagate.
+      await nextFrame();
+    });
+    after(async () => {
+      await setViewport({ width: 800, height: 600 });
+      // Allow viewport update to propagate.
+      await nextFrame();
+    });
+
+    await fixture(html`
+      ${virtualElementV1({
+        ...virtualElementV1.args,
+        offset: 6,
+      })}
+    `);
+
+    const opened = oneEvent(document, "sp-opened");
+
+    // Right click to open "context menu" overlay.
+    sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [270, 10],
+        },
+        {
+          type: "click",
+          options: {
+            button: "right",
+          },
+          position: [270, 10],
+        },
+      ],
+    });
+    await opened;
+
+    const firstMenu = document.querySelector("sp-menu") as Menu;
+
+    expect(firstMenu).to.not.be.null;
+    expect(await isInteractive(firstMenu)).to.be.true;
+
+    const closed = oneEvent(document, "sp-closed");
+
+    sendKeys({
+      press: "Escape",
+    });
+    await closed;
+
+    expect(await isInteractive(firstMenu)).to.be.false;
+  });
+
+  it("opens children in the modal stack through shadow roots", async () => {
+    const el = await fixture(definedOverlayElement());
+    const trigger = el.querySelector('[slot="trigger"]') as HTMLButtonElement;
+    let open = oneEvent(el, "sp-opened");
+
+    trigger.click();
+    await open;
+    expect(el.open).to.equal("click");
+    const content = document.querySelector("popover-content") as PopoverContent;
+
+    open = oneEvent(content, "sp-opened");
+    content.button.click();
+    await open;
+    expect(content.trigger.open).to.equal("click");
+    let close = oneEvent(content, "sp-closed");
+
+    content.trigger.removeAttribute("open");
+    await close;
+    expect(content.trigger.open).to.be.null;
+    close = oneEvent(el, "sp-closed");
+    el.removeAttribute("open");
+    await close;
+    expect(el.open).to.be.null;
+  });
 });
diff --git a/packages/overlay/test/overlay.test.ts b/packages/overlay/test/overlay.test.ts
index a7437b753c..0bfd016b7a 100644
--- a/packages/overlay/test/overlay.test.ts
+++ b/packages/overlay/test/overlay.test.ts
@@ -19,23 +19,23 @@ import "@spectrum-web-components/popover/sp-popover.js";
 import { Popover } from "@spectrum-web-components/popover";
 import { setViewport } from "@web/test-runner-commands";
 import {
-	Overlay,
-	OverlayTrigger,
-	Placement,
-	VirtualTrigger,
+  Overlay,
+  OverlayTrigger,
+  Placement,
+  VirtualTrigger,
 } from "@spectrum-web-components/overlay";
 
 import {
-	elementUpdated,
-	expect,
-	html,
-	nextFrame,
-	oneEvent,
+  elementUpdated,
+  expect,
+  html,
+  nextFrame,
+  oneEvent,
 } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
 import {
-	definedOverlayElement,
-	virtualElement,
+  definedOverlayElement,
+  virtualElement,
 } from "../stories/overlay.stories.js";
 import { PopoverContent } from "../stories/overlay-story-components.js";
 import { sendMouse } from "../../../test/plugins/browser.js";
@@ -45,850 +45,850 @@ import "@spectrum-web-components/theme/src/themes.js";
 import { Theme } from "@spectrum-web-components/theme";
 import { render, TemplateResult } from "@spectrum-web-components/base";
 import {
-	fixture,
-	isInteractive,
-	isOnTopLayer,
+  fixture,
+  isInteractive,
+  isOnTopLayer,
 } from "../../../test/testing-helpers.js";
 import { Menu } from "@spectrum-web-components/menu";
 
 async function styledFixture(
-	story: TemplateResult,
+  story: TemplateResult,
 ): Promise {
-	const test = await fixture(html`
-		
-			${story}
-		
-	`);
+  const test = await fixture(html`
+    
+      ${story}
+    
+  `);
 
-	return test.children[0] as T;
+  return test.children[0] as T;
 }
 
 describe("Overlays", () => {
-	let testDiv!: HTMLDivElement;
-	let openOverlays: Overlay[] = [];
-
-	describe("shared fixture", () => {
-		beforeEach(async () => {
-			testDiv = await styledFixture(html`
-				

-					
-					
-						Show Popover
-					
-					

-						
-							
-								
A popover message

-								 Test 1 
-								Test 2
-								Test 3
-							
-						
-						
-							Hover message
-						
-						
-							Other hover message
-						
-					

-				

-			`);
-			await elementUpdated(testDiv);
-		});
-
-		afterEach(() => {
-			openOverlays.map((overlay) => (overlay.open = false));
-			openOverlays = [];
-		});
-
-		[
-			"bottom",
-			"bottom-start",
-			"bottom-end",
-			"top",
-			"top-start",
-			"top-end",
-			"left",
-			"left-start",
-			"left-end",
-			"right",
-			"right-start",
-			"right-end",
-		].map((direction) => {
-			const placement = direction as Placement;
-
-			it(`opens a popover - ${placement}`, async () => {
-				const clickSpy = spy();
-				const button = testDiv.querySelector("#first-button") as HTMLElement;
-				const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
-
-				outerPopover.addEventListener("click", () => {
-					clickSpy();
-				});
-
-				expect(await isInteractive(outerPopover)).to.be.false;
-				expect(button).to.exist;
-
-				const opened = oneEvent(outerPopover, "sp-opened");
-
-				openOverlays.push(
-					await Overlay.open(outerPopover, {
-						trigger: button,
-						type: "auto",
-						delayed: false,
-						placement,
-						offset: 10,
-					}),
-				);
-				button.insertAdjacentElement(
-					"afterend",
-					openOverlays.at(-1) as HTMLElement,
-				);
-				await opened;
-				expect(await isInteractive(outerPopover)).to.be.true;
-			});
-		});
-
-		it(`opens a modal dialog`, async () => {
-			const button = testDiv.querySelector("#first-button") as HTMLElement;
-			const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
-
-			expect(await isInteractive(outerPopover)).to.be.false;
-
-			expect(button).to.exist;
-
-			const opened = oneEvent(outerPopover, "sp-opened");
-
-			openOverlays.push(
-				await Overlay.open(outerPopover, {
-					trigger: button,
-				}),
-			);
-			button.insertAdjacentElement(
-				"afterend",
-				openOverlays.at(-1) as HTMLElement,
-			);
-			await opened;
-
-			const firstFocused = outerPopover.querySelector(
-				"#outer-focus-target",
-			) as HTMLElement;
-
-			expect(document.activeElement === firstFocused).to.be.true;
-
-			/**
-			 * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page
-			 * and the backward tab past the known beginning of the page. Test that you never focused the button
-			 * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better.
-			 */
-
-			await sendKeys({
-				press: "Tab",
-			});
-
-			expect(document.activeElement === button).to.be.false;
-			await sendKeys({
-				press: "Tab",
-			});
-
-			expect(document.activeElement === button).to.be.false;
-
-			await sendKeys({
-				press: "Shift+Tab",
-			});
-
-			expect(document.activeElement === button).to.be.false;
-
-			await sendKeys({
-				press: "Shift+Tab",
-			});
-
-			expect(document.activeElement === button).to.be.false;
-
-			await sendKeys({
-				press: "Shift+Tab",
-			});
-
-			expect(document.activeElement === button).to.be.false;
-		});
-
-		it(`updates a popover`, async () => {
-			const button = testDiv.querySelector("#first-button") as HTMLElement;
-			const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
-
-			expect(await isInteractive(outerPopover)).to.be.false;
-
-			expect(button).to.exist;
-
-			const opened = oneEvent(outerPopover, "sp-opened");
-
-			openOverlays.push(
-				await Overlay.open(outerPopover, {
-					trigger: button,
-					type: "auto",
-					offset: 10,
-				}),
-			);
-			button.insertAdjacentElement(
-				"afterend",
-				openOverlays.at(-1) as HTMLElement,
-			);
-			await opened;
-
-			expect(await isInteractive(outerPopover)).to.be.true;
-
-			Overlay.update();
-
-			expect(await isInteractive(outerPopover)).to.be.true;
-		});
-
-		it(`opens a popover w/ delay`, async () => {
-			const button = testDiv.querySelector("#first-button") as HTMLElement;
-			const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
-
-			expect(await isInteractive(outerPopover)).to.be.false;
-			expect(button).to.exist;
-
-			const opened = oneEvent(outerPopover, "sp-opened");
-			const start = performance.now();
-
-			openOverlays.push(
-				await Overlay.open(outerPopover, {
-					trigger: button,
-					type: "auto",
-					delayed: true,
-					offset: 10,
-				}),
-			);
-			button.insertAdjacentElement(
-				"afterend",
-				openOverlays.at(-1) as HTMLElement,
-			);
-			await opened;
-			const end = performance.now();
-
-			expect(await isInteractive(outerPopover)).to.be.true;
-			expect(end - start).to.be.greaterThan(1000);
-		});
-
-		it("opens hover overlay", async () => {
-			const button = testDiv.querySelector("#first-button") as HTMLElement;
-			const hoverOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
-			const clickOverlay = testDiv.querySelector(
-				"#outer-popover",
-			) as HTMLElement;
-
-			expect(await isOnTopLayer(hoverOverlay)).to.be.false;
-			expect(await isOnTopLayer(clickOverlay)).to.be.false;
-
-			let opened = oneEvent(hoverOverlay, "sp-opened");
-
-			openOverlays.push(
-				await Overlay.open(hoverOverlay, {
-					trigger: button,
-					type: "hint",
-					placement: "top",
-					offset: 10,
-				}),
-			);
-			button.insertAdjacentElement(
-				"afterend",
-				openOverlays.at(-1) as HTMLElement,
-			);
-			await opened;
-			expect(await isOnTopLayer(hoverOverlay)).to.be.true;
-
-			opened = oneEvent(clickOverlay, "sp-opened");
-			const closed = oneEvent(hoverOverlay, "sp-closed");
-
-			// Opening click overlay should close the hover overlay
-			openOverlays.push(
-				await Overlay.open(clickOverlay, {
-					trigger: button,
-					type: "auto",
-					placement: "bottom",
-					offset: 10,
-				}),
-			);
-			button.insertAdjacentElement(
-				"afterend",
-				openOverlays.at(-1) as HTMLElement,
-			);
-			await opened;
-			await closed;
-			expect(await isInteractive(clickOverlay), "click overlay not interactive")
-				.to.be.true;
-			expect(await isOnTopLayer(hoverOverlay), "hover overlay interactive").to
-				.be.false;
-		});
-
-		it("opens custom overlay", async () => {
-			const button = testDiv.querySelector("#first-button") as HTMLElement;
-			const customOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
-			const clickOverlay = testDiv.querySelector(
-				"#outer-popover",
-			) as HTMLElement;
-
-			expect(button).to.exist;
-			expect(customOverlay).to.exist;
-
-			expect(await isOnTopLayer(customOverlay)).to.be.false;
-			expect(await isOnTopLayer(clickOverlay)).to.be.false;
-
-			let opened = oneEvent(customOverlay, "sp-opened");
-
-			openOverlays.push(
-				await Overlay.open(customOverlay, {
-					trigger: button,
-					type: "auto",
-					placement: "top",
-					offset: 10,
-				}),
-			);
-			button.insertAdjacentElement(
-				"afterend",
-				openOverlays.at(-1) as HTMLElement,
-			);
-			await opened;
-			expect(await isOnTopLayer(customOverlay)).to.be.true;
-
-			opened = oneEvent(clickOverlay, "sp-opened");
-			openOverlays.push(
-				await Overlay.open(clickOverlay, {
-					trigger: button,
-					type: "auto",
-					placement: "bottom",
-					offset: 10,
-				}),
-			);
-			button.insertAdjacentElement(
-				"afterend",
-				openOverlays.at(-1) as HTMLElement,
-			);
-			await opened;
-			expect(await isOnTopLayer(clickOverlay), "click content open").to.be.true;
-		});
-	});
-
-	it("closes via events", async () => {
-		const test = await fixture(html`
-			

-				
-					 Some Content for the Dialog. 
-				
-			

-		`);
-
-		const el = test.querySelector("sp-popover") as Popover;
-		const dialog = el.querySelector("sp-dialog") as Dialog;
-
-		const opened = oneEvent(el, "sp-opened");
-
-		openOverlays.push(
-			await Overlay.open(el, {
-				trigger: test,
-				type: "auto",
-				placement: "bottom",
-				offset: 10,
-			}),
-		);
-		test.insertAdjacentElement("afterend", openOverlays.at(-1) as HTMLElement);
-		await opened;
-		expect(await isInteractive(el)).to.be.true;
-
-		const closed = oneEvent(el, "sp-closed");
-
-		dialog.close();
-		await closed;
-		expect(await isInteractive(el)).to.be.false;
-	});
-
-	it("positions with a VirtualTrigger", async () => {
-		const test = await fixture(html`
-			

-				
-					 Some Content for the Dialog. 
-				
-			

-		`);
-
-		const el = test.querySelector("sp-popover") as Popover;
-		const trigger = new VirtualTrigger(100, 100);
-
-		const opened = oneEvent(el, "sp-opened");
-
-		openOverlays.push(
-			await Overlay.open(el, {
-				trigger,
-				type: "auto",
-				placement: "right",
-				offset: 10,
-			}),
-		);
-		test.insertAdjacentElement("afterend", openOverlays.at(-1) as HTMLElement);
-		await opened;
-		expect(await isInteractive(el)).to.be.true;
-
-		const initial = el.getBoundingClientRect();
-
-		trigger.updateBoundingClientRect(500, 500);
-		await nextFrame();
-		await nextFrame();
-		const final = el.getBoundingClientRect();
-
-		expect(initial.x).to.not.equal(8);
-		expect(initial.y).to.not.equal(8);
-		expect(initial.x).to.not.equal(final.x);
-		expect(initial.y).to.not.equal(final.y);
-	});
-
-	it("closes an inline overlay when tabbing past the content", async () => {
-		const el = await fixture(html`
-			

-				Trigger
-				
-					
-				
-				
-			

-		`);
-
-		const trigger = el.querySelector(".trigger") as HTMLElement;
-		const content = el.querySelector(".content") as HTMLElement;
-		const input = el.querySelector("input") as HTMLInputElement;
-		const after = el.querySelector("#after") as HTMLAnchorElement;
-
-		const opened = oneEvent(content, "sp-opened");
-
-		openOverlays.push(
-			await Overlay.open(content, {
-				trigger,
-				type: "auto",
-				receivesFocus: "auto",
-			}),
-		);
-		trigger.insertAdjacentElement(
-			"afterend",
-			openOverlays.at(-1) as HTMLElement,
-		);
-		await opened;
-
-		expect(await isInteractive(content)).to.be.true;
-		expect(document.activeElement).to.equal(input);
-
-		const closed = oneEvent(content, "sp-closed");
-
-		await sendKeys({
-			press: "Shift+Tab",
-		});
-		await closed;
-
-		expect(document.activeElement).to.equal(trigger);
-
-		await sendKeys({
-			press: "Tab",
-		});
-		expect(document.activeElement).to.equal(after);
-		expect(await isInteractive(content)).to.be.false;
-	});
-
-	it("closes an inline overlay when tabbing before the trigger", async () => {
-		const el = await fixture(html`
-			

-				
-				Trigger
-				

-					
-				

-			

-		`);
-
-		const trigger = el.querySelector(".trigger") as HTMLElement;
-		const content = el.querySelector(".content") as HTMLElement;
-		const input = el.querySelector(".content input") as HTMLInputElement;
-		const before = el.querySelector("#before") as HTMLAnchorElement;
-
-		const open = oneEvent(trigger, "sp-opened");
-
-		openOverlays.push(
-			await Overlay.open(content, {
-				trigger,
-				type: "auto",
-			}),
-		);
-		trigger.insertAdjacentElement(
-			"afterend",
-			openOverlays.at(-1) as HTMLElement,
-		);
-		await open;
-
-		expect(document.activeElement).to.equal(input);
-
-		await sendKeys({
-			press: "Shift+Tab",
-		});
-
-		expect(document.activeElement).to.equal(trigger);
-
-		await sendKeys({
-			press: "Shift+Tab",
-		});
-
-		expect(document.activeElement).to.equal(before);
-	});
-
-	it("opens detached content", async () => {
-		const textContent = "This is a detached element that has been overlaid";
-		const el = await fixture(html`
-			
-		`);
-
-		const content = document.createElement("sp-popover");
-
-		content.textContent = textContent;
-
-		const opened = oneEvent(content, "sp-opened");
-		const overlay = await Overlay.open(content, {
-			trigger: el,
-			type: "auto",
-			placement: "bottom",
-		});
-
-		el.insertAdjacentElement("afterend", overlay);
-		await opened;
-
-		expect(await isInteractive(content)).to.be.true;
-
-		const closed = oneEvent(content, "sp-closed");
-
-		overlay.open = false;
-		await closed;
-
-		expect(await isInteractive(content)).to.be.false;
-
-		content.remove();
-	});
+  let testDiv!: HTMLDivElement;
+  let openOverlays: Overlay[] = [];
+
+  describe("shared fixture", () => {
+    beforeEach(async () => {
+      testDiv = await styledFixture(html`
+        

+          
+          
+            Show Popover
+          
+          

+            
+              
+                
A popover message

+                 Test 1 
+                Test 2
+                Test 3
+              
+            
+            
+              Hover message
+            
+            
+              Other hover message
+            
+          

+        

+      `);
+      await elementUpdated(testDiv);
+    });
+
+    afterEach(() => {
+      openOverlays.map((overlay) => (overlay.open = false));
+      openOverlays = [];
+    });
+
+    [
+      "bottom",
+      "bottom-start",
+      "bottom-end",
+      "top",
+      "top-start",
+      "top-end",
+      "left",
+      "left-start",
+      "left-end",
+      "right",
+      "right-start",
+      "right-end",
+    ].map((direction) => {
+      const placement = direction as Placement;
+
+      it(`opens a popover - ${placement}`, async () => {
+        const clickSpy = spy();
+        const button = testDiv.querySelector("#first-button") as HTMLElement;
+        const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+        outerPopover.addEventListener("click", () => {
+          clickSpy();
+        });
+
+        expect(await isInteractive(outerPopover)).to.be.false;
+        expect(button).to.exist;
+
+        const opened = oneEvent(outerPopover, "sp-opened");
+
+        openOverlays.push(
+          await Overlay.open(outerPopover, {
+            trigger: button,
+            type: "auto",
+            delayed: false,
+            placement,
+            offset: 10,
+          }),
+        );
+        button.insertAdjacentElement(
+          "afterend",
+          openOverlays.at(-1) as HTMLElement,
+        );
+        await opened;
+        expect(await isInteractive(outerPopover)).to.be.true;
+      });
+    });
+
+    it("opens a modal dialog", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+      expect(await isInteractive(outerPopover)).to.be.false;
+
+      expect(button).to.exist;
+
+      const opened = oneEvent(outerPopover, "sp-opened");
+
+      openOverlays.push(
+        await Overlay.open(outerPopover, {
+          trigger: button,
+        }),
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1) as HTMLElement,
+      );
+      await opened;
+
+      const firstFocused = outerPopover.querySelector(
+        "#outer-focus-target",
+      ) as HTMLElement;
+
+      expect(document.activeElement === firstFocused).to.be.true;
+
+      /**
+       * Tab cycle is awkward in the headless browser, forward tab to just before the known end of the page
+       * and the backward tab past the known beginning of the page. Test that you never focused the button
+       * that triggered the dialog and is outside of the modal. A test that was able to cycle would be better.
+       */
+
+      await sendKeys({
+        press: "Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+      await sendKeys({
+        press: "Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+
+      await sendKeys({
+        press: "Shift+Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+
+      await sendKeys({
+        press: "Shift+Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+
+      await sendKeys({
+        press: "Shift+Tab",
+      });
+
+      expect(document.activeElement === button).to.be.false;
+    });
+
+    it("updates a popover", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+      expect(await isInteractive(outerPopover)).to.be.false;
+
+      expect(button).to.exist;
+
+      const opened = oneEvent(outerPopover, "sp-opened");
+
+      openOverlays.push(
+        await Overlay.open(outerPopover, {
+          trigger: button,
+          type: "auto",
+          offset: 10,
+        }),
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1) as HTMLElement,
+      );
+      await opened;
+
+      expect(await isInteractive(outerPopover)).to.be.true;
+
+      Overlay.update();
+
+      expect(await isInteractive(outerPopover)).to.be.true;
+    });
+
+    it("opens a popover w/ delay", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const outerPopover = testDiv.querySelector("#outer-popover") as Popover;
+
+      expect(await isInteractive(outerPopover)).to.be.false;
+      expect(button).to.exist;
+
+      const opened = oneEvent(outerPopover, "sp-opened");
+      const start = performance.now();
+
+      openOverlays.push(
+        await Overlay.open(outerPopover, {
+          trigger: button,
+          type: "auto",
+          delayed: true,
+          offset: 10,
+        }),
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1) as HTMLElement,
+      );
+      await opened;
+      const end = performance.now();
+
+      expect(await isInteractive(outerPopover)).to.be.true;
+      expect(end - start).to.be.greaterThan(1000);
+    });
+
+    it("opens hover overlay", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const hoverOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
+      const clickOverlay = testDiv.querySelector(
+        "#outer-popover",
+      ) as HTMLElement;
+
+      expect(await isOnTopLayer(hoverOverlay)).to.be.false;
+      expect(await isOnTopLayer(clickOverlay)).to.be.false;
+
+      let opened = oneEvent(hoverOverlay, "sp-opened");
+
+      openOverlays.push(
+        await Overlay.open(hoverOverlay, {
+          trigger: button,
+          type: "hint",
+          placement: "top",
+          offset: 10,
+        }),
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1) as HTMLElement,
+      );
+      await opened;
+      expect(await isOnTopLayer(hoverOverlay)).to.be.true;
+
+      opened = oneEvent(clickOverlay, "sp-opened");
+      const closed = oneEvent(hoverOverlay, "sp-closed");
+
+      // Opening click overlay should close the hover overlay
+      openOverlays.push(
+        await Overlay.open(clickOverlay, {
+          trigger: button,
+          type: "auto",
+          placement: "bottom",
+          offset: 10,
+        }),
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1) as HTMLElement,
+      );
+      await opened;
+      await closed;
+      expect(await isInteractive(clickOverlay), "click overlay not interactive")
+        .to.be.true;
+      expect(await isOnTopLayer(hoverOverlay), "hover overlay interactive").to
+        .be.false;
+    });
+
+    it("opens custom overlay", async () => {
+      const button = testDiv.querySelector("#first-button") as HTMLElement;
+      const customOverlay = testDiv.querySelector("#hover-1") as HTMLElement;
+      const clickOverlay = testDiv.querySelector(
+        "#outer-popover",
+      ) as HTMLElement;
+
+      expect(button).to.exist;
+      expect(customOverlay).to.exist;
+
+      expect(await isOnTopLayer(customOverlay)).to.be.false;
+      expect(await isOnTopLayer(clickOverlay)).to.be.false;
+
+      let opened = oneEvent(customOverlay, "sp-opened");
+
+      openOverlays.push(
+        await Overlay.open(customOverlay, {
+          trigger: button,
+          type: "auto",
+          placement: "top",
+          offset: 10,
+        }),
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1) as HTMLElement,
+      );
+      await opened;
+      expect(await isOnTopLayer(customOverlay)).to.be.true;
+
+      opened = oneEvent(clickOverlay, "sp-opened");
+      openOverlays.push(
+        await Overlay.open(clickOverlay, {
+          trigger: button,
+          type: "auto",
+          placement: "bottom",
+          offset: 10,
+        }),
+      );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1) as HTMLElement,
+      );
+      await opened;
+      expect(await isOnTopLayer(clickOverlay), "click content open").to.be.true;
+    });
+  });
+
+  it("closes via events", async () => {
+    const test = await fixture(html`
+      

+        
+           Some Content for the Dialog. 
+        
+      

+    `);
+
+    const el = test.querySelector("sp-popover") as Popover;
+    const dialog = el.querySelector("sp-dialog") as Dialog;
+
+    const opened = oneEvent(el, "sp-opened");
+
+    openOverlays.push(
+      await Overlay.open(el, {
+        trigger: test,
+        type: "auto",
+        placement: "bottom",
+        offset: 10,
+      }),
+    );
+    test.insertAdjacentElement("afterend", openOverlays.at(-1) as HTMLElement);
+    await opened;
+    expect(await isInteractive(el)).to.be.true;
+
+    const closed = oneEvent(el, "sp-closed");
+
+    dialog.close();
+    await closed;
+    expect(await isInteractive(el)).to.be.false;
+  });
+
+  it("positions with a VirtualTrigger", async () => {
+    const test = await fixture(html`
+      

+        
+           Some Content for the Dialog. 
+        
+      

+    `);
+
+    const el = test.querySelector("sp-popover") as Popover;
+    const trigger = new VirtualTrigger(100, 100);
+
+    const opened = oneEvent(el, "sp-opened");
+
+    openOverlays.push(
+      await Overlay.open(el, {
+        trigger,
+        type: "auto",
+        placement: "right",
+        offset: 10,
+      }),
+    );
+    test.insertAdjacentElement("afterend", openOverlays.at(-1) as HTMLElement);
+    await opened;
+    expect(await isInteractive(el)).to.be.true;
+
+    const initial = el.getBoundingClientRect();
+
+    trigger.updateBoundingClientRect(500, 500);
+    await nextFrame();
+    await nextFrame();
+    const final = el.getBoundingClientRect();
+
+    expect(initial.x).to.not.equal(8);
+    expect(initial.y).to.not.equal(8);
+    expect(initial.x).to.not.equal(final.x);
+    expect(initial.y).to.not.equal(final.y);
+  });
+
+  it("closes an inline overlay when tabbing past the content", async () => {
+    const el = await fixture(html`
+      

+        Trigger
+        
+          
+        
+        
+      

+    `);
+
+    const trigger = el.querySelector(".trigger") as HTMLElement;
+    const content = el.querySelector(".content") as HTMLElement;
+    const input = el.querySelector("input") as HTMLInputElement;
+    const after = el.querySelector("#after") as HTMLAnchorElement;
+
+    const opened = oneEvent(content, "sp-opened");
+
+    openOverlays.push(
+      await Overlay.open(content, {
+        trigger,
+        type: "auto",
+        receivesFocus: "auto",
+      }),
+    );
+    trigger.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1) as HTMLElement,
+    );
+    await opened;
+
+    expect(await isInteractive(content)).to.be.true;
+    expect(document.activeElement).to.equal(input);
+
+    const closed = oneEvent(content, "sp-closed");
+
+    await sendKeys({
+      press: "Shift+Tab",
+    });
+    await closed;
+
+    expect(document.activeElement).to.equal(trigger);
+
+    await sendKeys({
+      press: "Tab",
+    });
+    expect(document.activeElement).to.equal(after);
+    expect(await isInteractive(content)).to.be.false;
+  });
+
+  it("closes an inline overlay when tabbing before the trigger", async () => {
+    const el = await fixture(html`
+      

+        
+        Trigger
+        

+          
+        

+      

+    `);
+
+    const trigger = el.querySelector(".trigger") as HTMLElement;
+    const content = el.querySelector(".content") as HTMLElement;
+    const input = el.querySelector(".content input") as HTMLInputElement;
+    const before = el.querySelector("#before") as HTMLAnchorElement;
+
+    const open = oneEvent(trigger, "sp-opened");
+
+    openOverlays.push(
+      await Overlay.open(content, {
+        trigger,
+        type: "auto",
+      }),
+    );
+    trigger.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1) as HTMLElement,
+    );
+    await open;
+
+    expect(document.activeElement).to.equal(input);
+
+    await sendKeys({
+      press: "Shift+Tab",
+    });
+
+    expect(document.activeElement).to.equal(trigger);
+
+    await sendKeys({
+      press: "Shift+Tab",
+    });
+
+    expect(document.activeElement).to.equal(before);
+  });
+
+  it("opens detached content", async () => {
+    const textContent = "This is a detached element that has been overlaid";
+    const el = await fixture(html`
+      
+    `);
+
+    const content = document.createElement("sp-popover");
+
+    content.textContent = textContent;
+
+    const opened = oneEvent(content, "sp-opened");
+    const overlay = await Overlay.open(content, {
+      trigger: el,
+      type: "auto",
+      placement: "bottom",
+    });
+
+    el.insertAdjacentElement("afterend", overlay);
+    await opened;
+
+    expect(await isInteractive(content)).to.be.true;
+
+    const closed = oneEvent(content, "sp-closed");
+
+    overlay.open = false;
+    await closed;
+
+    expect(await isInteractive(content)).to.be.false;
+
+    content.remove();
+  });
 });
 describe('Overlay - type="modal"', () => {
-	describe("handle multiple separate `contextmenu` events", async () => {
-		let width = 0;
-		let height = 0;
-		let firstMenu: Popover;
-		let firstRect: DOMRect;
-		let secondMenu: Popover;
-		let secondRect: DOMRect;
-
-		before(async () => {
-			render(
-				html`
-					
-						${virtualElement({
-							...virtualElement.args,
-							offset: 6,
-						})}
-					
-				`,
-				document.body,
-			);
-
-			width = window.innerWidth;
-			height = window.innerHeight;
-		});
-		after(() => {
-			document.querySelector("sp-theme")?.remove();
-		});
-		it('opens the first "contextmenu" overlay', async () => {
-			const opened = oneEvent(document, "sp-opened");
-
-			// Right click to open "context menu" overlay.
-			await sendMouse({
-				steps: [
-					{
-						type: "move",
-						position: [width / 2 + 50, height / 2],
-					},
-					{
-						type: "click",
-						options: {
-							button: "right",
-						},
-						position: [width / 2 + 50, height / 2],
-					},
-				],
-			});
-			await opened;
-			firstMenu = document.querySelector("sp-popover") as Popover;
-			expect(firstMenu.textContent).to.include("Menu source: end");
-			firstRect = firstMenu.getBoundingClientRect();
-			expect(firstMenu).to.not.be.null;
-		});
-		it('closes the first "contextmenu" when opening a second', async () => {
-			const closed = oneEvent(document, "sp-closed");
-			const opened = oneEvent(document, "sp-opened");
-			/**
-			 * Right click out of the "context menu" overlay to both close
-			 * the first overlay and have the event passed to the surfacing page
-			 * in order to open a subsequent "context menu" overlay.
-			 *
-			 * Using `sendMouse` here triggers the light dismiss for some reason while
-			 * manual interacting in this way does not...
-			 */
-			const trigger = document.querySelector(
-				"start-end-contextmenu",
-			) as HTMLElement;
-
-			trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
-				new Event("contextmenu", {
-					composed: true,
-				}),
-			);
-			await nextFrame();
-			trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
-				new Event("pointerup", {
-					composed: true,
-					bubbles: true,
-				}),
-			);
-			await closed;
-			await opened;
-			secondMenu = document.querySelector("sp-popover") as Popover;
-			expect(secondMenu.textContent).to.include("Menu source: start");
-			secondRect = secondMenu.getBoundingClientRect();
-			expect(secondMenu).to.not.be.null;
-		});
-		it('closes the second "contextmenu" when clicking away', async () => {
-			const closed = oneEvent(document, "sp-closed");
-
-			sendMouse({
-				steps: [
-					{
-						type: "click",
-						position: [width - width / 8, height - height / 8],
-					},
-				],
-			});
-			await closed;
-			expect(firstRect.top).to.not.equal(secondRect.top);
-			expect(firstRect.left).to.not.equal(secondRect.left);
-		});
-	});
-
-	it("does not open content off of the viewport", async () => {
-		before(async () => {
-			await setViewport({ width: 360, height: 640 });
-			// Allow viewport update to propagate.
-			await nextFrame();
-		});
-		after(async () => {
-			await setViewport({ width: 800, height: 600 });
-			// Allow viewport update to propagate.
-			await nextFrame();
-		});
-
-		await fixture(html`
-			${virtualElement({
-				...virtualElement.args,
-				offset: 6,
-			})}
-		`);
-
-		const opened = oneEvent(document, "sp-opened");
-
-		// Right click to open "context menu" overlay.
-		sendMouse({
-			steps: [
-				{
-					type: "move",
-					position: [270, 10],
-				},
-				{
-					type: "click",
-					options: {
-						button: "right",
-					},
-					position: [270, 10],
-				},
-			],
-		});
-		await opened;
-
-		const firstMenu = document.querySelector("sp-menu") as Menu;
-
-		expect(firstMenu).to.not.be.null;
-		expect(await isInteractive(firstMenu)).to.be.true;
-
-		const closed = oneEvent(document, "sp-closed");
-
-		sendKeys({
-			press: "Escape",
-		});
-		await closed;
-
-		expect(await isInteractive(firstMenu)).to.be.false;
-	});
-
-	it("opens children in the modal stack through shadow roots", async () => {
-		const el = await fixture(definedOverlayElement());
-		const trigger = el.querySelector('[slot="trigger"]') as HTMLButtonElement;
-		let open = oneEvent(el, "sp-opened");
-
-		trigger.click();
-		await open;
-		expect(el.open).to.equal("click");
-		const content = document.querySelector("popover-content") as PopoverContent;
-
-		open = oneEvent(content, "sp-opened");
-		content.button.click();
-		await open;
-		expect(content.trigger.open).to.equal("click");
-		let close = oneEvent(content, "sp-closed");
-
-		content.trigger.removeAttribute("open");
-		await close;
-		expect(content.trigger.open).to.be.null;
-		close = oneEvent(el, "sp-closed");
-		el.removeAttribute("open");
-		await close;
-		expect(el.open).to.be.null;
-	});
+  describe("handle multiple separate `contextmenu` events", async () => {
+    let width = 0;
+    let height = 0;
+    let firstMenu: Popover;
+    let firstRect: DOMRect;
+    let secondMenu: Popover;
+    let secondRect: DOMRect;
+
+    before(async () => {
+      render(
+        html`
+          
+            ${virtualElement({
+              ...virtualElement.args,
+              offset: 6,
+            })}
+          
+        `,
+        document.body,
+      );
+
+      width = window.innerWidth;
+      height = window.innerHeight;
+    });
+    after(() => {
+      document.querySelector("sp-theme")?.remove();
+    });
+    it('opens the first "contextmenu" overlay', async () => {
+      const opened = oneEvent(document, "sp-opened");
+
+      // Right click to open "context menu" overlay.
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [width / 2 + 50, height / 2],
+          },
+          {
+            type: "click",
+            options: {
+              button: "right",
+            },
+            position: [width / 2 + 50, height / 2],
+          },
+        ],
+      });
+      await opened;
+      firstMenu = document.querySelector("sp-popover") as Popover;
+      expect(firstMenu.textContent).to.include("Menu source: end");
+      firstRect = firstMenu.getBoundingClientRect();
+      expect(firstMenu).to.not.be.null;
+    });
+    it('closes the first "contextmenu" when opening a second', async () => {
+      const closed = oneEvent(document, "sp-closed");
+      const opened = oneEvent(document, "sp-opened");
+      /**
+       * Right click out of the "context menu" overlay to both close
+       * the first overlay and have the event passed to the surfacing page
+       * in order to open a subsequent "context menu" overlay.
+       *
+       * Using `sendMouse` here triggers the light dismiss for some reason while
+       * manual interacting in this way does not...
+       */
+      const trigger = document.querySelector(
+        "start-end-contextmenu",
+      ) as HTMLElement;
+
+      trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
+        new Event("contextmenu", {
+          composed: true,
+        }),
+      );
+      await nextFrame();
+      trigger.shadowRoot?.querySelector("#start")?.dispatchEvent(
+        new Event("pointerup", {
+          composed: true,
+          bubbles: true,
+        }),
+      );
+      await closed;
+      await opened;
+      secondMenu = document.querySelector("sp-popover") as Popover;
+      expect(secondMenu.textContent).to.include("Menu source: start");
+      secondRect = secondMenu.getBoundingClientRect();
+      expect(secondMenu).to.not.be.null;
+    });
+    it('closes the second "contextmenu" when clicking away', async () => {
+      const closed = oneEvent(document, "sp-closed");
+
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [width - width / 8, height - height / 8],
+          },
+        ],
+      });
+      await closed;
+      expect(firstRect.top).to.not.equal(secondRect.top);
+      expect(firstRect.left).to.not.equal(secondRect.left);
+    });
+  });
+
+  it("does not open content off of the viewport", async () => {
+    before(async () => {
+      await setViewport({ width: 360, height: 640 });
+      // Allow viewport update to propagate.
+      await nextFrame();
+    });
+    after(async () => {
+      await setViewport({ width: 800, height: 600 });
+      // Allow viewport update to propagate.
+      await nextFrame();
+    });
+
+    await fixture(html`
+      ${virtualElement({
+        ...virtualElement.args,
+        offset: 6,
+      })}
+    `);
+
+    const opened = oneEvent(document, "sp-opened");
+
+    // Right click to open "context menu" overlay.
+    sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [270, 10],
+        },
+        {
+          type: "click",
+          options: {
+            button: "right",
+          },
+          position: [270, 10],
+        },
+      ],
+    });
+    await opened;
+
+    const firstMenu = document.querySelector("sp-menu") as Menu;
+
+    expect(firstMenu).to.not.be.null;
+    expect(await isInteractive(firstMenu)).to.be.true;
+
+    const closed = oneEvent(document, "sp-closed");
+
+    sendKeys({
+      press: "Escape",
+    });
+    await closed;
+
+    expect(await isInteractive(firstMenu)).to.be.false;
+  });
+
+  it("opens children in the modal stack through shadow roots", async () => {
+    const el = await fixture(definedOverlayElement());
+    const trigger = el.querySelector('[slot="trigger"]') as HTMLButtonElement;
+    let open = oneEvent(el, "sp-opened");
+
+    trigger.click();
+    await open;
+    expect(el.open).to.equal("click");
+    const content = document.querySelector("popover-content") as PopoverContent;
+
+    open = oneEvent(content, "sp-opened");
+    content.button.click();
+    await open;
+    expect(content.trigger.open).to.equal("click");
+    let close = oneEvent(content, "sp-closed");
+
+    content.trigger.removeAttribute("open");
+    await close;
+    expect(content.trigger.open).to.be.null;
+    close = oneEvent(el, "sp-closed");
+    el.removeAttribute("open");
+    await close;
+    expect(el.open).to.be.null;
+  });
 });
 describe("Overlay - timing", () => {
-	it("manages multiple modals in a row without preventing them from closing", async () => {
-		const test = await fixture(html`
-			

-				
-					Trigger 1
-					
-						
Hover contentent for "Trigger 1".

-					
-				
-				
-					Trigger 2
-					
-						
Click contentent for "Trigger 2".

-					
-					
-						
Hover contentent for "Trigger 2".

-					
-				
-			

-		`);
-
-		const overlayTrigger1 = test.querySelector("#test-1") as OverlayTrigger;
-		const overlayTrigger2 = test.querySelector("#test-2") as OverlayTrigger;
-		const trigger1 = overlayTrigger1.querySelector(
-			'[slot="trigger"]',
-		) as HTMLButtonElement;
-		const trigger2 = overlayTrigger2.querySelector(
-			'[slot="trigger"]',
-		) as HTMLButtonElement;
-
-		const boundingRectTrigger1 = trigger1.getBoundingClientRect();
-		const boundingRectTrigger2 = trigger2.getBoundingClientRect();
-		const trigger1Position: [number, number] = [
-			boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
-			boundingRectTrigger1.top + boundingRectTrigger1.height / 2,
-		];
-		const outsideTriggers: [number, number] = [
-			boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
-			300,
-		];
-		const trigger2Position: [number, number] = [
-			boundingRectTrigger2.left + boundingRectTrigger2.width / 2,
-			boundingRectTrigger2.top + boundingRectTrigger2.height / 4,
-		];
-
-		// Move pointer over "Trigger 1", should _start_ to open "hover" content.
-		await sendMouse({
-			steps: [
-				{
-					type: "move",
-					position: trigger1Position,
-				},
-			],
-		});
-		await nextFrame();
-		await nextFrame();
-
-		// Move pointer out of "Trigger 1", should _start_ to close "hover" content.
-		await sendMouse({
-			steps: [
-				{
-					type: "move",
-					position: outsideTriggers,
-				},
-			],
-		});
-		await nextFrame();
-		await nextFrame();
-		// Move pointer over "Trigger 2", should _start_ to open "hover" content.
-		await sendMouse({
-			steps: [
-				{
-					type: "move",
-					position: trigger2Position,
-				},
-			],
-		});
-		await nextFrame();
-		await nextFrame();
-
-		const opened = oneEvent(trigger2, "sp-opened");
-
-		// Click "Trigger 2", should _start_ to open "click" content and _start_ to close "hover" content.
-		await sendMouse({
-			steps: [
-				{
-					type: "click",
-					position: trigger2Position,
-				},
-			],
-		});
-		await opened;
-		await nextFrame();
-		await nextFrame();
-
-		// "click" content for "Trigger 2", _only_, open.
-		expect(overlayTrigger1.hasAttribute("open")).to.be.false;
-		expect(overlayTrigger2.hasAttribute("open")).to.be.true;
-		expect(overlayTrigger2.getAttribute("open")).to.equal("click");
-
-		const closed = oneEvent(overlayTrigger2, "sp-closed");
-
-		await sendMouse({
-			steps: [
-				{
-					type: "click",
-					position: outsideTriggers,
-				},
-			],
-		});
-		await closed;
-
-		// Both overlays are closed.
-		// Neither trigger received "focus" because the pointer "clicked" away, redirecting focus to 
-		expect(overlayTrigger1.hasAttribute("open")).to.be.false;
-		expect(overlayTrigger2.hasAttribute("open")).to.be.false;
-	});
+  it("manages multiple modals in a row without preventing them from closing", async () => {
+    const test = await fixture(html`
+      

+        
+          Trigger 1
+          
+            
Hover contentent for "Trigger 1".

+          
+        
+        
+          Trigger 2
+          
+            
Click contentent for "Trigger 2".

+          
+          
+            
Hover contentent for "Trigger 2".

+          
+        
+      

+    `);
+
+    const overlayTrigger1 = test.querySelector("#test-1") as OverlayTrigger;
+    const overlayTrigger2 = test.querySelector("#test-2") as OverlayTrigger;
+    const trigger1 = overlayTrigger1.querySelector(
+      '[slot="trigger"]',
+    ) as HTMLButtonElement;
+    const trigger2 = overlayTrigger2.querySelector(
+      '[slot="trigger"]',
+    ) as HTMLButtonElement;
+
+    const boundingRectTrigger1 = trigger1.getBoundingClientRect();
+    const boundingRectTrigger2 = trigger2.getBoundingClientRect();
+    const trigger1Position: [number, number] = [
+      boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
+      boundingRectTrigger1.top + boundingRectTrigger1.height / 2,
+    ];
+    const outsideTriggers: [number, number] = [
+      boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
+      300,
+    ];
+    const trigger2Position: [number, number] = [
+      boundingRectTrigger2.left + boundingRectTrigger2.width / 2,
+      boundingRectTrigger2.top + boundingRectTrigger2.height / 4,
+    ];
+
+    // Move pointer over "Trigger 1", should _start_ to open "hover" content.
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: trigger1Position,
+        },
+      ],
+    });
+    await nextFrame();
+    await nextFrame();
+
+    // Move pointer out of "Trigger 1", should _start_ to close "hover" content.
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: outsideTriggers,
+        },
+      ],
+    });
+    await nextFrame();
+    await nextFrame();
+    // Move pointer over "Trigger 2", should _start_ to open "hover" content.
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: trigger2Position,
+        },
+      ],
+    });
+    await nextFrame();
+    await nextFrame();
+
+    const opened = oneEvent(trigger2, "sp-opened");
+
+    // Click "Trigger 2", should _start_ to open "click" content and _start_ to close "hover" content.
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: trigger2Position,
+        },
+      ],
+    });
+    await opened;
+    await nextFrame();
+    await nextFrame();
+
+    // "click" content for "Trigger 2", _only_, open.
+    expect(overlayTrigger1.hasAttribute("open")).to.be.false;
+    expect(overlayTrigger2.hasAttribute("open")).to.be.true;
+    expect(overlayTrigger2.getAttribute("open")).to.equal("click");
+
+    const closed = oneEvent(overlayTrigger2, "sp-closed");
+
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: outsideTriggers,
+        },
+      ],
+    });
+    await closed;
+
+    // Both overlays are closed.
+    // Neither trigger received "focus" because the pointer "clicked" away, redirecting focus to 
+    expect(overlayTrigger1.hasAttribute("open")).to.be.false;
+    expect(overlayTrigger2.hasAttribute("open")).to.be.false;
+  });
 });
diff --git a/packages/picker-button/sp-picker-button.ts b/packages/picker-button/sp-picker-button.ts
index ca8e5005c2..a4145193e1 100644
--- a/packages/picker-button/sp-picker-button.ts
+++ b/packages/picker-button/sp-picker-button.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { PickerButton } from './src/PickerButton.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { PickerButton } from "./src/PickerButton.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-picker-button', PickerButton);
+defineElement("sp-picker-button", PickerButton);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-picker-button': PickerButton;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-picker-button": PickerButton;
+  }
 }
diff --git a/packages/picker-button/src/PickerButton.ts b/packages/picker-button/src/PickerButton.ts
index bb5ace41ff..854ae45854 100644
--- a/packages/picker-button/src/PickerButton.ts
+++ b/packages/picker-button/src/PickerButton.ts
@@ -10,74 +10,74 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import {
-    CSSResultArray,
-    DefaultElementSize,
-    html,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { classMap } from '@spectrum-web-components/base/src/directives.js';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { ButtonBase } from '@spectrum-web-components/button/src/ButtonBase.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
+  CSSResultArray,
+  DefaultElementSize,
+  html,
+  SizedMixin,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { classMap } from "@spectrum-web-components/base/src/directives.js";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ButtonBase } from "@spectrum-web-components/button/src/ButtonBase.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
+import { ObserveSlotPresence } from "@spectrum-web-components/shared/src/observe-slot-presence.js";
 
-import styles from './picker-button.css.js';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';
+import styles from "./picker-button.css.js";
+import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
+import chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";
 
 const chevronClass = {
-    s: 'spectrum-UIIcon-ChevronDown75',
-    m: 'spectrum-UIIcon-ChevronDown100',
-    l: 'spectrum-UIIcon-ChevronDown200',
-    xl: 'spectrum-UIIcon-ChevronDown300',
+  s: "spectrum-UIIcon-ChevronDown75",
+  m: "spectrum-UIIcon-ChevronDown100",
+  l: "spectrum-UIIcon-ChevronDown200",
+  xl: "spectrum-UIIcon-ChevronDown300",
 };
 
 /**
  * @element sp-picker-button
  */
 export class PickerButton extends SizedMixin(
-    ObserveSlotPresence(ButtonBase, '[slot="label"]')
+  ObserveSlotPresence(ButtonBase, '[slot="label"]'),
 ) {
-    public static override get styles(): CSSResultArray {
-        return [styles, chevronStyles, chevronIconOverrides];
-    }
+  public static override get styles(): CSSResultArray {
+    return [styles, chevronStyles, chevronIconOverrides];
+  }
 
-    @property({ type: Boolean, reflect: true })
-    invalid = false;
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
 
-    @property({ reflect: true })
-    position: 'left' | 'right' = 'right';
+  @property({ reflect: true })
+  position: "left" | "right" = "right";
 
-    protected get hasText(): boolean {
-        return this.slotContentIsPresent;
-    }
+  protected get hasText(): boolean {
+    return this.slotContentIsPresent;
+  }
 
-    protected override render(): TemplateResult {
-        const rootClasses = {
-            root: true,
-            uiicononly: !this.hasText,
-            textuiicon: this.hasText,
-        };
+  protected override render(): TemplateResult {
+    const rootClasses = {
+      root: true,
+      uiicononly: !this.hasText,
+      textuiicon: this.hasText,
+    };
 
-        return html`
-            

-                

-                    
-                        
-                    
-                    
-                        
-                    
-                

-            

-        `;
-    }
+    return html`
+      

+        

+          
+            
+          
+          
+            
+          
+        

+      

+    `;
+  }
 }
diff --git a/packages/picker-button/src/index.ts b/packages/picker-button/src/index.ts
index 008e14998b..0a981b6492 100644
--- a/packages/picker-button/src/index.ts
+++ b/packages/picker-button/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './PickerButton.js';
+export * from "./PickerButton.js";
diff --git a/packages/picker-button/stories/index.ts b/packages/picker-button/stories/index.ts
index e4eb65dae7..d3e634948b 100644
--- a/packages/picker-button/stories/index.ts
+++ b/packages/picker-button/stories/index.ts
@@ -10,77 +10,77 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, nothing, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import { html, nothing, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
 export type StoryArgs = {
-    active: boolean;
-    icon: TemplateResult;
-    invalid: boolean;
-    label: boolean | string;
-    open: boolean;
-    position?: 'right' | 'left';
-    quiet: boolean;
-    rounded: boolean;
-    size: 's' | 'm' | 'l' | 'xl';
+  active: boolean;
+  icon: TemplateResult;
+  invalid: boolean;
+  label: boolean | string;
+  open: boolean;
+  position?: "right" | "left";
+  quiet: boolean;
+  rounded: boolean;
+  size: "s" | "m" | "l" | "xl";
 };
 
 export const Template = ({
-    active,
-    icon,
-    invalid,
-    label,
-    open,
-    position,
-    quiet,
-    rounded,
-    size,
+  active,
+  icon,
+  invalid,
+  label,
+  open,
+  position,
+  quiet,
+  rounded,
+  size,
 }: StoryArgs): TemplateResult => {
-    return html`
-        
-            ${icon ? icon : nothing}
-            ${label
-                ? html`
-                      
-                          ${typeof label === 'string' ? label : 'All'}
-                      
-                  `
-                : nothing}
-        
-    `;
+  return html`
+    
+      ${icon ? icon : nothing}
+      ${label
+        ? html`
+            
+              ${typeof label === "string" ? label : "All"}
+            
+          `
+        : nothing}
+    
+  `;
 };
 
 export const argTypes = {
-    argTypes: {
-        open: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        position: {
-            control: {
-                type: 'inline-radio',
-                options: ['right', 'left'],
-            },
-        },
-        quiet: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        size: {
-            control: {
-                type: 'inline-radio',
-                options: ['s', 'm', 'l', 'xl'],
-            },
-        },
+  argTypes: {
+    open: {
+      control: {
+        type: "boolean",
+      },
     },
+    position: {
+      control: {
+        type: "inline-radio",
+        options: ["right", "left"],
+      },
+    },
+    quiet: {
+      control: {
+        type: "boolean",
+      },
+    },
+    size: {
+      control: {
+        type: "inline-radio",
+        options: ["s", "m", "l", "xl"],
+      },
+    },
+  },
 };
diff --git a/packages/picker-button/stories/picker-button-sizes.stories.ts b/packages/picker-button/stories/picker-button-sizes.stories.ts
index f97155b4f1..079eb3cf11 100644
--- a/packages/picker-button/stories/picker-button-sizes.stories.ts
+++ b/packages/picker-button/stories/picker-button-sizes.stories.ts
@@ -9,37 +9,37 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
+import { TemplateResult } from "@spectrum-web-components/base";
 
-import { argTypes, StoryArgs, Template } from './index.js';
-import '@spectrum-web-components/picker-button/sp-picker-button.js';
+import { argTypes, StoryArgs, Template } from "./index.js";
+import "@spectrum-web-components/picker-button/sp-picker-button.js";
 
 export default {
-    title: 'Picker Button/Sizes',
-    component: 'sp-picker-button',
-    ...argTypes,
+  title: "Picker Button/Sizes",
+  component: "sp-picker-button",
+  ...argTypes,
 };
 
 export const s = (args: StoryArgs): TemplateResult => Template(args);
-s.args = { size: 's' };
+s.args = { size: "s" };
 
 export const m = (args: StoryArgs): TemplateResult => Template(args);
-m.args = { size: 'm' };
+m.args = { size: "m" };
 
 export const l = (args: StoryArgs): TemplateResult => Template(args);
-l.args = { size: 'l' };
+l.args = { size: "l" };
 
 export const XL = (args: StoryArgs): TemplateResult => Template(args);
-XL.args = { size: 'xl' };
+XL.args = { size: "xl" };
 
 export const sLabel = (args: StoryArgs): TemplateResult => Template(args);
-sLabel.args = { size: 's', label: true };
+sLabel.args = { size: "s", label: true };
 
 export const mLabel = (args: StoryArgs): TemplateResult => Template(args);
-mLabel.args = { size: 'm', label: true };
+mLabel.args = { size: "m", label: true };
 
 export const lLabel = (args: StoryArgs): TemplateResult => Template(args);
-lLabel.args = { size: 'l', label: true };
+lLabel.args = { size: "l", label: true };
 
 export const XLLabel = (args: StoryArgs): TemplateResult => Template(args);
-XLLabel.args = { size: 'xl', label: true };
+XLLabel.args = { size: "xl", label: true };
diff --git a/packages/picker-button/stories/picker-button.stories.ts b/packages/picker-button/stories/picker-button.stories.ts
index 24a89fcda0..12aea416a6 100644
--- a/packages/picker-button/stories/picker-button.stories.ts
+++ b/packages/picker-button/stories/picker-button.stories.ts
@@ -10,17 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import { argTypes, StoryArgs, Template } from './index.js';
-import '@spectrum-web-components/picker-button/sp-picker-button.js';
+import { argTypes, StoryArgs, Template } from "./index.js";
+import "@spectrum-web-components/picker-button/sp-picker-button.js";
 
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-add.js";
 
 export default {
-    title: 'Picker Button',
-    component: 'sp-picker-button',
-    ...argTypes,
+  title: "Picker Button",
+  component: "sp-picker-button",
+  ...argTypes,
 };
 
 export const active = (args: StoryArgs): TemplateResult => Template(args);
@@ -28,12 +28,12 @@ active.args = { active: true };
 
 export const customIcon = (args: StoryArgs): TemplateResult => Template(args);
 customIcon.args = {
-    icon: html`
-        
-    `,
+  icon: html`
+    
+  `,
 };
 
 export const invalid = (args: StoryArgs): TemplateResult => Template(args);
@@ -46,23 +46,23 @@ export const label = (args: StoryArgs): TemplateResult => Template(args);
 label.args = { label: true };
 
 export const labelCustom = (args: StoryArgs): TemplateResult => Template(args);
-labelCustom.args = { label: 'Some' };
+labelCustom.args = { label: "Some" };
 
 export const open = (args: StoryArgs): TemplateResult => Template(args);
 open.args = { open: true };
 
 export const positionLeft = (args: StoryArgs): TemplateResult => Template(args);
-positionLeft.args = { position: 'left' };
+positionLeft.args = { position: "left" };
 
 export const positionRight = (args: StoryArgs): TemplateResult =>
-    Template(args);
-positionRight.args = { position: 'right' };
+  Template(args);
+positionRight.args = { position: "right" };
 
 export const rounded = (args: StoryArgs): TemplateResult => Template(args);
 rounded.args = { rounded: true };
 
 export const roundedLabel = (args: StoryArgs): TemplateResult => Template(args);
 roundedLabel.args = {
-    label: true,
-    rounded: true,
+  label: true,
+  rounded: true,
 };
diff --git a/packages/picker-button/test/benchmark/basic-test.ts b/packages/picker-button/test/benchmark/basic-test.ts
index 7cc2f68381..4d5f4fdc08 100644
--- a/packages/picker-button/test/benchmark/basic-test.ts
+++ b/packages/picker-button/test/benchmark/basic-test.ts
@@ -9,10 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/picker-button/sp-picker-button.js';
-import { html } from '@spectrum-web-components/base';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/picker-button/sp-picker-button.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
-measureFixtureCreation(html`
-    
-`);
+measureFixtureCreation(html`  `);
diff --git a/packages/picker-button/test/picker-button-memory.test.ts b/packages/picker-button/test/picker-button-memory.test.ts
index e5f3a3ec5c..30a00b2e78 100644
--- a/packages/picker-button/test/picker-button-memory.test.ts
+++ b/packages/picker-button/test/picker-button-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/picker-button/sp-picker-button.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/picker-button/sp-picker-button.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/picker-button/test/picker-button.test.ts b/packages/picker-button/test/picker-button.test.ts
index b2c7adf5b0..01e03a1fb2 100644
--- a/packages/picker-button/test/picker-button.test.ts
+++ b/packages/picker-button/test/picker-button.test.ts
@@ -11,34 +11,34 @@ governing permissions and limitations under the License.
 */
 import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 import "@spectrum-web-components/picker-button/sp-picker-button.js";
-import { PickerButton } from "../";
+import { PickerButton } from "../src/index.js";
 import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 
 describe("PickerButton", () => {
-	testForLitDevWarnings(
-		async () =>
-			await fixture(html`
-				
-			`),
-	);
-	it("loads default picker-button accessibly", async () => {
-		const el = await fixture(html`
-			
-		`);
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+      `),
+  );
+  it("loads default picker-button accessibly", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await expect(el).to.be.accessible();
-	});
-	it("loads labeled picker-button accessibly", async () => {
-		const el = await fixture(html`
-			
-				All
-			
-		`);
+    await expect(el).to.be.accessible();
+  });
+  it("loads labeled picker-button accessibly", async () => {
+    const el = await fixture(html`
+      
+        All
+      
+    `);
 
-		await elementUpdated(el);
+    await elementUpdated(el);
 
-		await expect(el).to.be.accessible();
-	});
+    await expect(el).to.be.accessible();
+  });
 });
diff --git a/packages/picker/sp-picker.ts b/packages/picker/sp-picker.ts
index 7cc9bc16f2..65e764f8ce 100644
--- a/packages/picker/sp-picker.ts
+++ b/packages/picker/sp-picker.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Picker } from './src/Picker.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Picker } from "./src/Picker.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-picker', Picker);
+defineElement("sp-picker", Picker);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-picker': Picker;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-picker": Picker;
+  }
 }
diff --git a/packages/picker/src/DesktopController.ts b/packages/picker/src/DesktopController.ts
index c2d7f8466e..73cc7afaaf 100644
--- a/packages/picker/src/DesktopController.ts
+++ b/packages/picker/src/DesktopController.ts
@@ -11,83 +11,83 @@ governing permissions and limitations under the License.
 */
 
 import {
-    InteractionController,
-    InteractionTypes,
-} from './InteractionController.js';
+  InteractionController,
+  InteractionTypes,
+} from "./InteractionController.js";
 
 export class DesktopController extends InteractionController {
-    override type = InteractionTypes.desktop;
+  override type = InteractionTypes.desktop;
 
-    public override handlePointerdown(event: PointerEvent): void {
-        if (event.button !== 0 || event.pointerType === 'touch') {
-            return;
-        }
-
-        this.pointerdownState = this.open;
-        this.preventNextToggle = 'maybe';
-        let cleanupAction = 0;
-        const cleanup = (): void => {
-            cancelAnimationFrame(cleanupAction);
-            cleanupAction = requestAnimationFrame(async () => {
-                document.removeEventListener('pointerup', cleanup);
-                document.removeEventListener('pointercancel', cleanup);
-                this.target.removeEventListener('click', cleanup);
-                requestAnimationFrame(() => {
-                    // Complete cleanup on the second animation frame so that `click` can go first.
-                    this.preventNextToggle = 'no';
-                });
-            });
-        };
-
-        // Ensure that however the pointer goes up we do `cleanup()`.
-        document.addEventListener('pointerup', cleanup);
-        document.addEventListener('pointercancel', cleanup);
-        this.target.addEventListener('click', cleanup);
-        this.handleActivate();
+  public override handlePointerdown(event: PointerEvent): void {
+    if (event.button !== 0 || event.pointerType === "touch") {
+      return;
     }
 
-    public override handleActivate(event?: Event): void {
-        if (this.enterKeydownOn && this.enterKeydownOn !== this.target) {
-            return;
-        }
+    this.pointerdownState = this.open;
+    this.preventNextToggle = "maybe";
+    let cleanupAction = 0;
+    const cleanup = (): void => {
+      cancelAnimationFrame(cleanupAction);
+      cleanupAction = requestAnimationFrame(async () => {
+        document.removeEventListener("pointerup", cleanup);
+        document.removeEventListener("pointercancel", cleanup);
+        this.target.removeEventListener("click", cleanup);
+        requestAnimationFrame(() => {
+          // Complete cleanup on the second animation frame so that `click` can go first.
+          this.preventNextToggle = "no";
+        });
+      });
+    };
 
-        if (this.preventNextToggle === 'yes') {
-            return;
-        }
+    // Ensure that however the pointer goes up we do `cleanup()`.
+    document.addEventListener("pointerup", cleanup);
+    document.addEventListener("pointercancel", cleanup);
+    this.target.addEventListener("click", cleanup);
+    this.handleActivate();
+  }
 
-        if (event?.type === 'click' && this.open !== this.pointerdownState) {
-            // When activation comes from a `click` event ensure that the `pointerup`
-            // event didn't already toggle the Picker state before doing so.
-            return;
-        }
-
-        this.host.toggle();
+  public override handleActivate(event?: Event): void {
+    if (this.enterKeydownOn && this.enterKeydownOn !== this.target) {
+      return;
     }
 
-    override init(): void {
-        // Clean up listeners if they've already been bound
-        this.abortController?.abort();
-        this.abortController = new AbortController();
-        const { signal } = this.abortController;
+    if (this.preventNextToggle === "yes") {
+      return;
+    }
 
-        this.target.addEventListener(
-            'click',
-            (event: Event) => this.handleActivate(event),
-            {
-                signal,
-            }
-        );
-        this.target.addEventListener(
-            'pointerdown',
-            (event: PointerEvent) => this.handlePointerdown(event),
-            { signal }
-        );
-        this.target.addEventListener(
-            'focus',
-            (event: FocusEvent) => this.handleButtonFocus(event),
-            {
-                signal,
-            }
-        );
+    if (event?.type === "click" && this.open !== this.pointerdownState) {
+      // When activation comes from a `click` event ensure that the `pointerup`
+      // event didn't already toggle the Picker state before doing so.
+      return;
     }
+
+    this.host.toggle();
+  }
+
+  override init(): void {
+    // Clean up listeners if they've already been bound
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+
+    this.target.addEventListener(
+      "click",
+      (event: Event) => this.handleActivate(event),
+      {
+        signal,
+      },
+    );
+    this.target.addEventListener(
+      "pointerdown",
+      (event: PointerEvent) => this.handlePointerdown(event),
+      { signal },
+    );
+    this.target.addEventListener(
+      "focus",
+      (event: FocusEvent) => this.handleButtonFocus(event),
+      {
+        signal,
+      },
+    );
+  }
 }
diff --git a/packages/picker/src/InteractionController.ts b/packages/picker/src/InteractionController.ts
index 4f33dee671..42823ea075 100644
--- a/packages/picker/src/InteractionController.ts
+++ b/packages/picker/src/InteractionController.ts
@@ -11,186 +11,190 @@ governing permissions and limitations under the License.
 */
 
 import {
-    ReactiveController,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { AbstractOverlay } from '@spectrum-web-components/overlay/src/AbstractOverlay';
-import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
-import { PickerBase } from './Picker.js';
+  ReactiveController,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { AbstractOverlay } from "@spectrum-web-components/overlay/src/AbstractOverlay";
+import { Overlay } from "@spectrum-web-components/overlay/src/Overlay.js";
+import { PickerBase } from "./Picker.js";
 
 export enum InteractionTypes {
-    'desktop',
-    'mobile',
+  "desktop",
+  "mobile",
 }
 
 export class InteractionController implements ReactiveController {
-    abortController!: AbortController;
+  abortController!: AbortController;
 
-    public preventNextToggle: 'no' | 'maybe' | 'yes' = 'no';
-    public pointerdownState = false;
-    public enterKeydownOn: EventTarget | null = null;
+  public preventNextToggle: "no" | "maybe" | "yes" = "no";
+  public pointerdownState = false;
+  public enterKeydownOn: EventTarget | null = null;
 
-    public container!: TemplateResult;
+  public container!: TemplateResult;
 
-    get activelyOpening(): boolean {
-        return false;
-    }
+  get activelyOpening(): boolean {
+    return false;
+  }
 
-    private _open = false;
+  private _open = false;
 
-    public get open(): boolean {
-        return this._open;
-    }
+  public get open(): boolean {
+    return this._open;
+  }
 
-    /**
-     * Set `open`
-     */
-    public set open(open: boolean) {
-        if (this._open === open) return;
-
-        this._open = open;
-
-        if (this.overlay) {
-            this.host.open = open;
-
-            return;
-        }
-
-        // When there is no Overlay and `open` is moving to `true`, lazily import/create
-        // an Overlay and apply that state to it.
-        customElements
-            .whenDefined('sp-overlay')
-            .then(async (): Promise => {
-                const { Overlay } = await import(
-                    '@spectrum-web-components/overlay/src/Overlay.js'
-                );
-
-                this.overlay = new Overlay();
-                this.host.open = true;
-                this.host.requestUpdate();
-            });
-        import('@spectrum-web-components/overlay/sp-overlay.js');
+  /**
+   * Set `open`
+   */
+  public set open(open: boolean) {
+    if (this._open === open) {
+      return;
     }
 
-    private _overlay!: AbstractOverlay;
+    this._open = open;
 
-    public get overlay(): AbstractOverlay {
-        return this._overlay;
-    }
+    if (this.overlay) {
+      this.host.open = open;
 
-    public set overlay(overlay: AbstractOverlay | undefined) {
-        if (!overlay) return;
+      return;
+    }
 
-        if (this.overlay === overlay) return;
+    // When there is no Overlay and `open` is moving to `true`, lazily import/create
+    // an Overlay and apply that state to it.
+    customElements.whenDefined("sp-overlay").then(async (): Promise => {
+      const { Overlay } = await import(
+        "@spectrum-web-components/overlay/src/Overlay.js"
+      );
+
+      this.overlay = new Overlay();
+      this.host.open = true;
+      this.host.requestUpdate();
+    });
+    import("@spectrum-web-components/overlay/sp-overlay.js");
+  }
+
+  private _overlay!: AbstractOverlay;
+
+  public get overlay(): AbstractOverlay {
+    return this._overlay;
+  }
+
+  public set overlay(overlay: AbstractOverlay | undefined) {
+    if (!overlay) {
+      return;
+    }
 
-        this._overlay = overlay;
-        this.initOverlay();
+    if (this.overlay === overlay) {
+      return;
     }
 
-    type!: InteractionTypes;
+    this._overlay = overlay;
+    this.initOverlay();
+  }
+
+  type!: InteractionTypes;
+
+  constructor(
+    public target: HTMLElement,
+    public host: PickerBase,
+  ) {
+    this.target = target;
+    this.host = host;
+    this.host.addController(this);
+    this.init();
+  }
+
+  releaseDescription(): void {}
+
+  protected handleBeforetoggle(
+    event: Event & {
+      target: Overlay;
+      newState: "open" | "closed";
+    },
+  ): void {
+    if (event.composedPath()[0] !== event.target) {
+      return;
+    }
 
-    constructor(
-        public target: HTMLElement,
-        public host: PickerBase
-    ) {
-        this.target = target;
-        this.host = host;
-        this.host.addController(this);
-        this.init();
+    if (event.newState === "closed") {
+      if (this.preventNextToggle === "no") {
+        this.open = false;
+      } else if (!this.pointerdownState) {
+        // Prevent browser driven closure while opening the Picker
+        // and the expected event series has not completed.
+        this.overlay?.manuallyKeepOpen();
+      }
     }
 
-    releaseDescription(): void {}
+    if (!this.open) {
+      this.host.optionsMenu.updateSelectedItemIndex();
+      this.host.optionsMenu.closeDescendentOverlays();
+    }
+  }
 
-    protected handleBeforetoggle(
-        event: Event & {
+  initOverlay(): void {
+    if (this.overlay) {
+      this.overlay.addEventListener("beforetoggle", (event: Event) => {
+        this.handleBeforetoggle(
+          event as Event & {
             target: Overlay;
-            newState: 'open' | 'closed';
-        }
-    ): void {
-        if (event.composedPath()[0] !== event.target) {
-            return;
-        }
-
-        if (event.newState === 'closed') {
-            if (this.preventNextToggle === 'no') {
-                this.open = false;
-            } else if (!this.pointerdownState) {
-                // Prevent browser driven closure while opening the Picker
-                // and the expected event series has not completed.
-                this.overlay?.manuallyKeepOpen();
-            }
-        }
-
-        if (!this.open) {
-            this.host.optionsMenu.updateSelectedItemIndex();
-            this.host.optionsMenu.closeDescendentOverlays();
-        }
+            newState: "open" | "closed";
+          },
+        );
+      });
+      this.overlay.type = this.host.isMobile.matches ? "modal" : "auto";
+      this.overlay.triggerElement = this.host as HTMLElement;
+      this.overlay.placement = this.host.isMobile.matches
+        ? undefined
+        : this.host.placement;
+      this.overlay.receivesFocus = "true";
+      this.overlay.willPreventClose =
+        this.preventNextToggle !== "no" && this.open;
+      this.overlay.addEventListener(
+        "slottable-request",
+        this.host.handleSlottableRequest,
+      );
     }
+  }
 
-    initOverlay(): void {
-        if (this.overlay) {
-            this.overlay.addEventListener('beforetoggle', (event: Event) => {
-                this.handleBeforetoggle(
-                    event as Event & {
-                        target: Overlay;
-                        newState: 'open' | 'closed';
-                    }
-                );
-            });
-            this.overlay.type = this.host.isMobile.matches ? 'modal' : 'auto';
-            this.overlay.triggerElement = this.host as HTMLElement;
-            this.overlay.placement = this.host.isMobile.matches
-                ? undefined
-                : this.host.placement;
-            this.overlay.receivesFocus = 'true';
-            this.overlay.willPreventClose =
-                this.preventNextToggle !== 'no' && this.open;
-            this.overlay.addEventListener(
-                'slottable-request',
-                this.host.handleSlottableRequest
-            );
-        }
-    }
+  public handlePointerdown(_event: PointerEvent): void {}
 
-    public handlePointerdown(_event: PointerEvent): void {}
-
-    public handleButtonFocus(event: FocusEvent): void {
-        // When focus comes from a pointer event, and the related target is the Menu,
-        // we don't want to reopen the Menu.
-        if (
-            this.preventNextToggle === 'maybe' &&
-            event.relatedTarget === this.host.optionsMenu
-        ) {
-            this.preventNextToggle = 'yes';
-        }
+  public handleButtonFocus(event: FocusEvent): void {
+    // When focus comes from a pointer event, and the related target is the Menu,
+    // we don't want to reopen the Menu.
+    if (
+      this.preventNextToggle === "maybe" &&
+      event.relatedTarget === this.host.optionsMenu
+    ) {
+      this.preventNextToggle = "yes";
     }
+  }
 
-    public handleActivate(_event: Event): void {}
+  public handleActivate(_event: Event): void {}
 
-    /* c8 ignore next 3 */
-    init(): void {}
+  /* c8 ignore next 3 */
+  init(): void {}
 
-    abort(): void {
-        this.releaseDescription();
-        this.abortController?.abort();
-    }
+  abort(): void {
+    this.releaseDescription();
+    this.abortController?.abort();
+  }
 
-    hostConnected(): void {
-        this.init();
-    }
+  hostConnected(): void {
+    this.init();
+  }
 
-    hostDisconnected(): void {
-        this.abortController?.abort();
-    }
+  hostDisconnected(): void {
+    this.abortController?.abort();
+  }
 
-    public hostUpdated(): void {
-        if (
-            this.overlay &&
-            this.host.dependencyManager.loaded &&
-            this.host.open !== this.overlay.open
-        ) {
-            this.overlay.willPreventClose = this.preventNextToggle !== 'no';
-            this.overlay.open = this.host.open;
-        }
+  public hostUpdated(): void {
+    if (
+      this.overlay &&
+      this.host.dependencyManager.loaded &&
+      this.host.open !== this.overlay.open
+    ) {
+      this.overlay.willPreventClose = this.preventNextToggle !== "no";
+      this.overlay.open = this.host.open;
     }
+  }
 }
diff --git a/packages/picker/src/MobileController.ts b/packages/picker/src/MobileController.ts
index 185d60ea5e..df1ade9d11 100644
--- a/packages/picker/src/MobileController.ts
+++ b/packages/picker/src/MobileController.ts
@@ -10,61 +10,58 @@ governing permissions and limitations under the License.
 */
 
 import {
-    InteractionController,
-    InteractionTypes,
-} from './InteractionController.js';
-import { isWebKit } from '@spectrum-web-components/shared';
+  InteractionController,
+  InteractionTypes,
+} from "./InteractionController.js";
+import { isWebKit } from "@spectrum-web-components/shared";
 
-export const SAFARI_FOCUS_RING_CLASS = 'remove-focus-ring-safari-hack';
+export const SAFARI_FOCUS_RING_CLASS = "remove-focus-ring-safari-hack";
 
 export class MobileController extends InteractionController {
-    override type = InteractionTypes.mobile;
+  override type = InteractionTypes.mobile;
 
-    handleClick(): void {
-        if (this.preventNextToggle == 'no') {
-            this.open = !this.open;
-        }
-
-        this.preventNextToggle = 'no';
+  handleClick(): void {
+    if (this.preventNextToggle == "no") {
+      this.open = !this.open;
     }
 
-    public override handlePointerdown(): void {
-        this.preventNextToggle = this.open ? 'yes' : 'no';
+    this.preventNextToggle = "no";
+  }
+
+  public override handlePointerdown(): void {
+    this.preventNextToggle = this.open ? "yes" : "no";
 
-        if (isWebKit()) {
-            this.target.classList.add(SAFARI_FOCUS_RING_CLASS);
-        }
+    if (isWebKit()) {
+      this.target.classList.add(SAFARI_FOCUS_RING_CLASS);
     }
+  }
 
-    private handleFocusOut(): void {
-        if (this.host.open) {
-            return;
-        }
+  private handleFocusOut(): void {
+    if (this.host.open) {
+      return;
+    }
 
-        if (
-            isWebKit() &&
-            this.target.classList.contains(SAFARI_FOCUS_RING_CLASS)
-        ) {
-            this.target.classList.remove(SAFARI_FOCUS_RING_CLASS);
-        }
+    if (isWebKit() && this.target.classList.contains(SAFARI_FOCUS_RING_CLASS)) {
+      this.target.classList.remove(SAFARI_FOCUS_RING_CLASS);
     }
+  }
 
-    override init(): void {
-        // Clean up listeners if they've already been bound
-        this.abortController?.abort();
-        this.abortController = new AbortController();
-        const { signal } = this.abortController;
+  override init(): void {
+    // Clean up listeners if they've already been bound
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
 
-        this.target.addEventListener('click', () => this.handleClick(), {
-            signal,
-        });
-        this.target.addEventListener(
-            'pointerdown',
-            () => this.handlePointerdown(),
-            { signal }
-        );
-        this.target.addEventListener('focusout', () => this.handleFocusOut(), {
-            signal,
-        });
-    }
+    this.target.addEventListener("click", () => this.handleClick(), {
+      signal,
+    });
+    this.target.addEventListener(
+      "pointerdown",
+      () => this.handlePointerdown(),
+      { signal },
+    );
+    this.target.addEventListener("focusout", () => this.handleFocusOut(), {
+      signal,
+    });
+  }
 }
diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index de381b21eb..f391f2f017 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -11,871 +11,858 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    DefaultElementSize,
-    html,
-    nothing,
-    PropertyValues,
-    render,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  DefaultElementSize,
+  html,
+  nothing,
+  PropertyValues,
+  render,
+  SizedMixin,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    classMap,
-    ifDefined,
-    StyleInfo,
-    styleMap,
-} from '@spectrum-web-components/base/src/directives.js';
+  classMap,
+  ifDefined,
+  StyleInfo,
+  styleMap,
+} from "@spectrum-web-components/base/src/directives.js";
 import {
-    property,
-    query,
-    state,
-} from '@spectrum-web-components/base/src/decorators.js';
-
-import pickerStyles from './picker.css.js';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import chevronIconOverrides from '@spectrum-web-components/icon/src/icon-chevron-overrides.css.js';
-
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-import type { Tooltip } from '@spectrum-web-components/tooltip';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/menu/sp-menu.js';
+  property,
+  query,
+  state,
+} from "@spectrum-web-components/base/src/decorators.js";
+
+import pickerStyles from "./picker.css.js";
+import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
+import chevronIconOverrides from "@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";
+
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
+import type { Tooltip } from "@spectrum-web-components/tooltip";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/menu/sp-menu.js";
 import type {
-    Menu,
-    MenuItem,
-    MenuItemChildren,
-} from '@spectrum-web-components/menu';
-import { Placement } from '@spectrum-web-components/overlay';
+  Menu,
+  MenuItem,
+  MenuItemChildren,
+} from "@spectrum-web-components/menu";
+import { Placement } from "@spectrum-web-components/overlay";
 import {
-    IS_MOBILE,
-    MatchMediaController,
-} from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
-import { DependencyManagerController } from '@spectrum-web-components/reactive-controllers/src/DependencyManger.js';
-import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';
-import { Overlay } from '@spectrum-web-components/overlay/src/Overlay.js';
-import type { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';
-import type { FieldLabel } from '@spectrum-web-components/field-label';
-
-import { DesktopController } from './DesktopController.js';
-import { MobileController } from './MobileController.js';
-import { strategies } from './strategies.js';
+  IS_MOBILE,
+  MatchMediaController,
+} from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
+import { DependencyManagerController } from "@spectrum-web-components/reactive-controllers/src/DependencyManger.js";
+import { PendingStateController } from "@spectrum-web-components/reactive-controllers/src/PendingState.js";
+import { Overlay } from "@spectrum-web-components/overlay/src/Overlay.js";
+import type { SlottableRequestEvent } from "@spectrum-web-components/overlay/src/slottable-request-event.js";
+import type { FieldLabel } from "@spectrum-web-components/field-label";
+
+import { DesktopController } from "./DesktopController.js";
+import { MobileController } from "./MobileController.js";
+import { strategies } from "./strategies.js";
 
 const chevronClass = {
-    s: 'spectrum-UIIcon-ChevronDown75',
-    m: 'spectrum-UIIcon-ChevronDown100',
-    l: 'spectrum-UIIcon-ChevronDown200',
-    xl: 'spectrum-UIIcon-ChevronDown300',
+  s: "spectrum-UIIcon-ChevronDown75",
+  m: "spectrum-UIIcon-ChevronDown100",
+  l: "spectrum-UIIcon-ChevronDown200",
+  xl: "spectrum-UIIcon-ChevronDown300",
 };
 
-export const DESCRIPTION_ID = 'option-picker';
+export const DESCRIPTION_ID = "option-picker";
 export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
-    public isMobile = new MatchMediaController(this, IS_MOBILE);
+  public isMobile = new MatchMediaController(this, IS_MOBILE);
 
-    public strategy!: DesktopController | MobileController;
+  public strategy!: DesktopController | MobileController;
 
-    @state()
-    appliedLabel?: string;
+  @state()
+  appliedLabel?: string;
 
-    @query('#button')
-    public button!: HTMLButtonElement;
+  @query("#button")
+  public button!: HTMLButtonElement;
 
-    public dependencyManager = new DependencyManagerController(this);
+  public dependencyManager = new DependencyManagerController(this);
 
-    private deprecatedMenu: Menu | null = null;
+  private deprecatedMenu: Menu | null = null;
 
-    @property({ type: Boolean, reflect: true })
-    public override disabled = false;
+  @property({ type: Boolean, reflect: true })
+  public override disabled = false;
 
-    @property({ type: Boolean, reflect: true })
-    public focused = false;
+  @property({ type: Boolean, reflect: true })
+  public focused = false;
 
-    @property({ type: String, reflect: true })
-    public icons?: 'only' | 'none';
+  @property({ type: String, reflect: true })
+  public icons?: "only" | "none";
 
-    @property({ type: Boolean, reflect: true })
-    public invalid = false;
+  @property({ type: Boolean, reflect: true })
+  public invalid = false;
 
-    /** Whether the items are currently loading. */
-    @property({ type: Boolean, reflect: true })
-    public pending = false;
+  /** Whether the items are currently loading. */
+  @property({ type: Boolean, reflect: true })
+  public pending = false;
 
-    /** Defines a string value that labels the Picker while it is in pending state. */
-    @property({ type: String, attribute: 'pending-label' })
-    public pendingLabel = 'Pending';
+  /** Defines a string value that labels the Picker while it is in pending state. */
+  @property({ type: String, attribute: "pending-label" })
+  public pendingLabel = "Pending";
 
-    @property()
-    public label?: string;
+  @property()
+  public label?: string;
 
-    @property({ type: Boolean, reflect: true })
-    public open = false;
+  @property({ type: Boolean, reflect: true })
+  public open = false;
 
-    @property({ type: Boolean, reflect: true })
-    public readonly = false;
+  @property({ type: Boolean, reflect: true })
+  public readonly = false;
 
-    public selects: undefined | 'single' = 'single';
+  public selects: undefined | "single" = "single";
 
-    @state()
-    public labelAlignment?: 'inline';
+  @state()
+  public labelAlignment?: "inline";
 
-    protected get menuItems(): MenuItem[] {
-        return this.optionsMenu.childItems;
-    }
+  protected get menuItems(): MenuItem[] {
+    return this.optionsMenu.childItems;
+  }
 
-    @query('sp-menu')
-    public optionsMenu!: Menu;
+  @query("sp-menu")
+  public optionsMenu!: Menu;
 
-    private _selfManageFocusElement = false;
+  private _selfManageFocusElement = false;
 
-    public override get selfManageFocusElement(): boolean {
-        return this._selfManageFocusElement;
-    }
+  public override get selfManageFocusElement(): boolean {
+    return this._selfManageFocusElement;
+  }
 
-    @query('sp-overlay')
-    public overlayElement!: Overlay;
+  @query("sp-overlay")
+  public overlayElement!: Overlay;
 
-    protected tooltipEl?: Tooltip;
+  protected tooltipEl?: Tooltip;
 
-    /**
-     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
-     *
-     * @attribute
-     *
-     */
+  /**
+   * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+   *
+   * @attribute
+   *
+   */
 
-    @property()
-    public placement: Placement = 'bottom-start';
+  @property()
+  public placement: Placement = "bottom-start";
 
-    @property({ type: Boolean, reflect: true })
-    public quiet = false;
+  @property({ type: Boolean, reflect: true })
+  public quiet = false;
 
-    @property({ type: String })
-    public value = '';
+  @property({ type: String })
+  public value = "";
 
-    @property({ attribute: false })
-    public get selectedItem(): MenuItem | undefined {
-        return this._selectedItem;
-    }
+  @property({ attribute: false })
+  public get selectedItem(): MenuItem | undefined {
+    return this._selectedItem;
+  }
 
-    public pendingStateController: PendingStateController;
+  public pendingStateController: PendingStateController;
 
-    /**
-     * Initializes the `PendingStateController` for the Picker component.
-     * The `PendingStateController` manages the pending state of the Picker.
-     */
-    constructor() {
-        super();
-        this.pendingStateController = new PendingStateController(this);
-    }
+  /**
+   * Initializes the `PendingStateController` for the Picker component.
+   * The `PendingStateController` manages the pending state of the Picker.
+   */
+  constructor() {
+    super();
+    this.pendingStateController = new PendingStateController(this);
+  }
 
-    public set selectedItem(selectedItem: MenuItem | undefined) {
-        this.selectedItemContent = selectedItem
-            ? selectedItem.itemChildren
-            : undefined;
+  public set selectedItem(selectedItem: MenuItem | undefined) {
+    this.selectedItemContent = selectedItem
+      ? selectedItem.itemChildren
+      : undefined;
 
-        if (selectedItem === this.selectedItem) return;
-
-        const oldSelectedItem = this.selectedItem;
-
-        this._selectedItem = selectedItem;
-        this.requestUpdate('selectedItem', oldSelectedItem);
+    if (selectedItem === this.selectedItem) {
+      return;
     }
 
-    _selectedItem?: MenuItem;
+    const oldSelectedItem = this.selectedItem;
 
-    protected listRole: 'listbox' | 'menu' = 'listbox';
-    protected itemRole = 'option';
+    this._selectedItem = selectedItem;
+    this.requestUpdate("selectedItem", oldSelectedItem);
+  }
 
-    public override get focusElement(): HTMLElement {
-        if (this.open) {
-            return this.optionsMenu;
-        }
+  _selectedItem?: MenuItem;
 
-        return this.button;
+  protected listRole: "listbox" | "menu" = "listbox";
+  protected itemRole = "option";
+
+  public override get focusElement(): HTMLElement {
+    if (this.open) {
+      return this.optionsMenu;
     }
 
-    public forceFocusVisible(): void {
-        if (this.disabled) {
-            return;
-        }
+    return this.button;
+  }
 
-        this.focused = true;
+  public forceFocusVisible(): void {
+    if (this.disabled) {
+      return;
     }
 
-    public override click(): void {
-        if (this.disabled) {
-            return;
-        }
+    this.focused = true;
+  }
 
-        this.toggle();
+  public override click(): void {
+    if (this.disabled) {
+      return;
     }
 
-    public handleButtonBlur(): void {
-        this.focused = false;
-    }
+    this.toggle();
+  }
 
-    public override focus(options?: FocusOptions): void {
-        super.focus(options);
+  public handleButtonBlur(): void {
+    this.focused = false;
+  }
 
-        if (!this.disabled && this.focusElement) {
-            this.focused = this.hasVisibleFocusInTree();
-        }
-    }
+  public override focus(options?: FocusOptions): void {
+    super.focus(options);
 
-    public handleHelperFocus(): void {
-        // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline
-        this.focused = true;
-        this.button.focus();
+    if (!this.disabled && this.focusElement) {
+      this.focused = this.hasVisibleFocusInTree();
     }
+  }
 
-    public handleChange(event: Event): void {
-        if (this.strategy) {
-            this.strategy.preventNextToggle = 'no';
-        }
+  public handleHelperFocus(): void {
+    // set focused to true here instead of handleButtonFocus so clicks don't flash a focus outline
+    this.focused = true;
+    this.button.focus();
+  }
 
-        const target = event.target as Menu;
-        const [selected] = target.selectedItems;
+  public handleChange(event: Event): void {
+    if (this.strategy) {
+      this.strategy.preventNextToggle = "no";
+    }
 
-        event.stopPropagation();
+    const target = event.target as Menu;
+    const [selected] = target.selectedItems;
 
-        if (event.cancelable) {
-            this.setValueFromItem(selected, event);
-        } else {
-            // Non-cancelable "change" events announce a selection with no value
-            // change that should close the Picker element.
-            this.open = false;
+    event.stopPropagation();
 
-            if (this.strategy) {
-                this.strategy.open = false;
-            }
-        }
-    }
+    if (event.cancelable) {
+      this.setValueFromItem(selected, event);
+    } else {
+      // Non-cancelable "change" events announce a selection with no value
+      // change that should close the Picker element.
+      this.open = false;
 
-    public handleButtonFocus(event: FocusEvent): void {
-        this.strategy?.handleButtonFocus(event);
+      if (this.strategy) {
+        this.strategy.open = false;
+      }
     }
+  }
 
-    protected handleKeydown = (event: KeyboardEvent): void => {
-        this.focused = true;
+  public handleButtonFocus(event: FocusEvent): void {
+    this.strategy?.handleButtonFocus(event);
+  }
 
-        if (event.code !== 'ArrowDown' && event.code !== 'ArrowUp') {
-            return;
-        }
+  protected handleKeydown = (event: KeyboardEvent): void => {
+    this.focused = true;
 
-        event.stopPropagation();
-        event.preventDefault();
-        this.toggle(true);
-    };
+    if (event.code !== "ArrowDown" && event.code !== "ArrowUp") {
+      return;
+    }
 
-    protected async setValueFromItem(
-        item: MenuItem,
-        menuChangeEvent?: Event
-    ): Promise {
-        this.open = false;
+    event.stopPropagation();
+    event.preventDefault();
+    this.toggle(true);
+  };
 
-        // should always close when "setting" a value
-        if (this.strategy) {
-            this.strategy.open = false;
-        }
+  protected async setValueFromItem(
+    item: MenuItem,
+    menuChangeEvent?: Event,
+  ): Promise {
+    this.open = false;
 
-        const oldSelectedItem = this.selectedItem;
-        const oldValue = this.value;
-
-        // Set a value.
-        this.selectedItem = item;
-        this.value = item?.value ?? '';
-        await this.updateComplete;
-        const applyDefault = this.dispatchEvent(
-            new Event('change', {
-                bubbles: true,
-                // Allow it to be prevented.
-                cancelable: true,
-                composed: true,
-            })
-        );
+    // should always close when "setting" a value
+    if (this.strategy) {
+      this.strategy.open = false;
+    }
 
-        if (!applyDefault && this.selects) {
-            if (menuChangeEvent) {
-                menuChangeEvent.preventDefault();
-            }
+    const oldSelectedItem = this.selectedItem;
+    const oldValue = this.value;
 
-            this.setMenuItemSelected(this.selectedItem as MenuItem, false);
+    // Set a value.
+    this.selectedItem = item;
+    this.value = item?.value ?? "";
+    await this.updateComplete;
+    const applyDefault = this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        // Allow it to be prevented.
+        cancelable: true,
+        composed: true,
+      }),
+    );
 
-            if (oldSelectedItem) {
-                this.setMenuItemSelected(oldSelectedItem, true);
-            }
+    if (!applyDefault && this.selects) {
+      if (menuChangeEvent) {
+        menuChangeEvent.preventDefault();
+      }
 
-            this.selectedItem = oldSelectedItem;
-            this.value = oldValue;
-            this.open = true;
+      this.setMenuItemSelected(this.selectedItem as MenuItem, false);
 
-            if (this.strategy) {
-                this.strategy.open = true;
-            }
+      if (oldSelectedItem) {
+        this.setMenuItemSelected(oldSelectedItem, true);
+      }
 
-            return;
-        } else if (!this.selects) {
-            // Unset the value if not carrying a selection
-            this.selectedItem = oldSelectedItem;
-            this.value = oldValue;
+      this.selectedItem = oldSelectedItem;
+      this.value = oldValue;
+      this.open = true;
 
-            return;
-        }
+      if (this.strategy) {
+        this.strategy.open = true;
+      }
 
-        if (oldSelectedItem) {
-            this.setMenuItemSelected(oldSelectedItem, false);
-        }
+      return;
+    } else if (!this.selects) {
+      // Unset the value if not carrying a selection
+      this.selectedItem = oldSelectedItem;
+      this.value = oldValue;
 
-        this.setMenuItemSelected(item, !!this.selects);
+      return;
     }
 
-    protected setMenuItemSelected(item: MenuItem, value: boolean): void {
-        // matches null | undefined
-        if (this.selects == null) return;
-
-        item.selected = value;
+    if (oldSelectedItem) {
+      this.setMenuItemSelected(oldSelectedItem, false);
     }
 
-    public toggle(target?: boolean): void {
-        if (this.readonly || this.pending) {
-            return;
-        }
-
-        this.open = typeof target !== 'undefined' ? target : !this.open;
-
-        if (this.strategy) {
-            this.strategy.open = this.open;
-        }
+    this.setMenuItemSelected(item, !!this.selects);
+  }
 
-        if (this.open) {
-            this._selfManageFocusElement = true;
-        } else {
-            this._selfManageFocusElement = false;
-        }
+  protected setMenuItemSelected(item: MenuItem, value: boolean): void {
+    // matches null | undefined
+    if (this.selects == null) {
+      return;
     }
 
-    public close(): void {
-        if (this.readonly) {
-            return;
-        }
+    item.selected = value;
+  }
 
-        if (this.strategy) {
-            this.open = false;
-            this.strategy.open = false;
-        }
+  public toggle(target?: boolean): void {
+    if (this.readonly || this.pending) {
+      return;
     }
 
-    protected get containerStyles(): StyleInfo {
-        // @todo: test in mobile
-        /* c8 ignore next 5 */
-        if (this.isMobile.matches) {
-            return {
-                '--swc-menu-width': '100%',
-            };
-        }
+    this.open = typeof target !== "undefined" ? target : !this.open;
 
-        return {};
+    if (this.strategy) {
+      this.strategy.open = this.open;
     }
 
-    @state()
-    protected get selectedItemContent(): MenuItemChildren {
-        return this._selectedItemContent || { icon: [], content: [] };
+    if (this.open) {
+      this._selfManageFocusElement = true;
+    } else {
+      this._selfManageFocusElement = false;
     }
+  }
 
-    protected set selectedItemContent(
-        selectedItemContent: MenuItemChildren | undefined
-    ) {
-        if (selectedItemContent === this.selectedItemContent) return;
-
-        const oldContent = this.selectedItemContent;
-
-        this._selectedItemContent = selectedItemContent;
-        this.requestUpdate('selectedItemContent', oldContent);
+  public close(): void {
+    if (this.readonly) {
+      return;
     }
 
-    _selectedItemContent?: MenuItemChildren;
-
-    protected handleTooltipSlotchange(
-        event: Event & { target: HTMLSlotElement }
-    ): void {
-        this.tooltipEl = event.target.assignedElements()[0] as
-            | Tooltip
-            | undefined;
+    if (this.strategy) {
+      this.open = false;
+      this.strategy.open = false;
     }
+  }
 
-    public handleSlottableRequest = (_event: SlottableRequestEvent): void => {};
-
-    protected renderLabelContent(content: Node[]): TemplateResult | Node[] {
-        if (this.value && this.selectedItem) {
-            return content;
-        }
-
-        return html`
-            
-                
-                    ${this.label}
-                
-            
-        `;
-    }
-
-    protected get buttonContent(): TemplateResult[] {
-        const labelClasses = {
-            'visually-hidden': this.icons === 'only' && !!this.value,
-            placeholder: !this.value,
-            label: true,
-        };
-        const appliedLabel = this.appliedLabel || this.label;
-
-        return [
-            html`
-                
-                    ${this.selectedItemContent.icon}
-                
-                
-                    ${this.renderLabelContent(this.selectedItemContent.content)}
-                
-                ${this.value && this.selectedItem
-                    ? html`
-                          
-                      `
-                    : html`
-                          
-                      `}
-                ${this.invalid && !this.pending
-                    ? html`
-                          
-                      `
-                    : nothing}
-                ${this.pendingStateController.renderPendingState()}
-                
-                
-            `,
-        ];
-    }
-
-    applyFocusElementLabel = (
-        value: string,
-        labelElement: FieldLabel
-    ): void => {
-        this.appliedLabel = value;
-        this.labelAlignment = labelElement.sideAligned ? 'inline' : undefined;
-    };
+  protected get containerStyles(): StyleInfo {
+    // @todo: test in mobile
+    /* c8 ignore next 5 */
+    if (this.isMobile.matches) {
+      return {
+        "--swc-menu-width": "100%",
+      };
+    }
 
-    protected renderOverlay(menu: TemplateResult): TemplateResult {
-        if (this.strategy?.overlay === undefined) {
-            return menu;
-        }
+    return {};
+  }
 
-        const container = this.renderContainer(menu);
+  @state()
+  protected get selectedItemContent(): MenuItemChildren {
+    return this._selectedItemContent || { icon: [], content: [] };
+  }
 
-        render(container, this.strategy?.overlay as unknown as HTMLElement, {
-            host: this,
-        });
-
-        return this.strategy?.overlay as unknown as TemplateResult;
+  protected set selectedItemContent(
+    selectedItemContent: MenuItemChildren | undefined,
+  ) {
+    if (selectedItemContent === this.selectedItemContent) {
+      return;
     }
 
-    protected get renderDescriptionSlot(): TemplateResult {
-        return html`
-            

-                
-            

-        `;
-    }
-    // a helper to throw focus to the button is needed because Safari
-    // won't include buttons in the tab order even with tabindex="0"
-    protected override render(): TemplateResult {
-        if (this.tooltipEl) {
-            this.tooltipEl.disabled = this.open;
-        }
+    const oldContent = this.selectedItemContent;
 
-        return html`
-            
-            
-            ${this.renderMenu} ${this.renderDescriptionSlot}
-        `;
-    }
-
-    protected override update(changes: PropertyValues): void {
-        if (this.selects) {
-            // Always force `selects` to "single" when set.
-            // TODO: Add support functionally and visually for "multiple"
-            this.selects = 'single';
-        }
+    this._selectedItemContent = selectedItemContent;
+    this.requestUpdate("selectedItemContent", oldContent);
+  }
 
-        if (changes.has('disabled') && this.disabled) {
-            if (this.strategy) {
-                this.open = false;
-                this.strategy.open = false;
-            }
-        }
+  _selectedItemContent?: MenuItemChildren;
 
-        if (changes.has('pending') && this.pending) {
-            if (this.strategy) {
-                this.open = false;
-                this.strategy.open = false;
-            }
-        }
+  protected handleTooltipSlotchange(
+    event: Event & { target: HTMLSlotElement },
+  ): void {
+    this.tooltipEl = event.target.assignedElements()[0] as Tooltip | undefined;
+  }
 
-        if (changes.has('value')) {
-            // MenuItems update a frame late for  management,
-            // await the same here.
-            this.shouldScheduleManageSelection();
-        }
+  public handleSlottableRequest = (_event: SlottableRequestEvent): void => {};
 
-        // Maybe it's finally time to remove this support?
-        if (!this.hasUpdated) {
-            this.deprecatedMenu = this.querySelector(':scope > sp-menu');
-            this.deprecatedMenu?.toggleAttribute('ignore', true);
-            this.deprecatedMenu?.setAttribute('selects', 'inherit');
-        }
+  protected renderLabelContent(content: Node[]): TemplateResult | Node[] {
+    if (this.value && this.selectedItem) {
+      return content;
+    }
 
-        if (window.__swc.DEBUG) {
-            if (!this.hasUpdated && this.querySelector(':scope > sp-menu')) {
-                const { localName } = this;
-
-                window.__swc.warn(
-                    this,
-                    `You no longer need to provide an  child to ${localName}. Any styling or attributes on the  will be ignored.`,
-                    'https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes',
-                    { level: 'deprecation' }
-                );
-            }
-
-            this.updateComplete.then(async () => {
-                // Attributes should be user supplied, making them available before first update.
-                // However, `appliesLabel` is applied by external elements that must be update complete as well to be bound appropriately.
-                await new Promise((res) => requestAnimationFrame(res));
-                await new Promise((res) => requestAnimationFrame(res));
-
-                if (
-                    !this.label &&
-                    !this.getAttribute('aria-label') &&
-                    !this.getAttribute('aria-labelledby') &&
-                    !this.appliedLabel
-                ) {
-                    window.__swc.warn(
-                        this,
-                        `<${this.localName}> needs one of the following to be accessible:`,
-                        'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',
-                        {
-                            type: 'accessibility',
-                            issues: [
-                                `an  element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
-                                'value supplied to the "label" attribute, which will be displayed visually as placeholder text, or',
-                                'text content supplied in a  with slot="label", which will also be displayed visually as placeholder text.',
-                            ],
-                        }
-                    );
-                }
-            });
-        }
+    return html`
+      
+        
+          ${this.label}
+        
+      
+    `;
+  }
 
-        super.update(changes);
+  protected get buttonContent(): TemplateResult[] {
+    const labelClasses = {
+      "visually-hidden": this.icons === "only" && !!this.value,
+      placeholder: !this.value,
+      label: true,
+    };
+    const appliedLabel = this.appliedLabel || this.label;
+
+    return [
+      html`
+        
+          ${this.selectedItemContent.icon}
+        
+        
+          ${this.renderLabelContent(this.selectedItemContent.content)}
+        
+        ${this.value && this.selectedItem
+          ? html`
+              
+            `
+          : html`  `}
+        ${this.invalid && !this.pending
+          ? html`  `
+          : nothing}
+        ${this.pendingStateController.renderPendingState()}
+        
+        
+      `,
+    ];
+  }
+
+  applyFocusElementLabel = (value: string, labelElement: FieldLabel): void => {
+    this.appliedLabel = value;
+    this.labelAlignment = labelElement.sideAligned ? "inline" : undefined;
+  };
+
+  protected renderOverlay(menu: TemplateResult): TemplateResult {
+    if (this.strategy?.overlay === undefined) {
+      return menu;
+    }
+
+    const container = this.renderContainer(menu);
+
+    render(container, this.strategy?.overlay as unknown as HTMLElement, {
+      host: this,
+    });
+
+    return this.strategy?.overlay as unknown as TemplateResult;
+  }
+
+  protected get renderDescriptionSlot(): TemplateResult {
+    return html`
+      

+        
+      

+    `;
+  }
+  // a helper to throw focus to the button is needed because Safari
+  // won't include buttons in the tab order even with tabindex="0"
+  protected override render(): TemplateResult {
+    if (this.tooltipEl) {
+      this.tooltipEl.disabled = this.open;
+    }
+
+    return html`
+      
+      
+      ${this.renderMenu} ${this.renderDescriptionSlot}
+    `;
+  }
+
+  protected override update(changes: PropertyValues): void {
+    if (this.selects) {
+      // Always force `selects` to "single" when set.
+      // TODO: Add support functionally and visually for "multiple"
+      this.selects = "single";
+    }
+
+    if (changes.has("disabled") && this.disabled) {
+      if (this.strategy) {
+        this.open = false;
+        this.strategy.open = false;
+      }
     }
 
-    protected bindButtonKeydownListener(): void {
-        this.button.addEventListener('keydown', this.handleKeydown);
+    if (changes.has("pending") && this.pending) {
+      if (this.strategy) {
+        this.open = false;
+        this.strategy.open = false;
+      }
     }
 
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (changes.has('open')) {
-            this.strategy.open = this.open;
-        }
+    if (changes.has("value")) {
+      // MenuItems update a frame late for  management,
+      // await the same here.
+      this.shouldScheduleManageSelection();
     }
 
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        this.bindButtonKeydownListener();
-        this.bindEvents();
-    }
-
-    protected get dismissHelper(): TemplateResult {
-        return html`
-            
-        `;
-    }
-
-    protected renderContainer(menu: TemplateResult): TemplateResult {
-        const accessibleMenu = html`
-            ${this.dismissHelper} ${menu} ${this.dismissHelper}
-        `;
-
-        // @todo: test in mobile
-        /* c8 ignore next 11 */
-        if (this.isMobile.matches) {
-            this.dependencyManager.add('sp-tray');
-            import('@spectrum-web-components/tray/sp-tray.js');
-
-            return html`
-                
-                    ${accessibleMenu}
-                
-            `;
-        }
-
-        this.dependencyManager.add('sp-popover');
-        import('@spectrum-web-components/popover/sp-popover.js');
-
-        return html`
-            
-                ${accessibleMenu}
-            
-        `;
-    }
-
-    protected hasRenderedOverlay = false;
-
-    private onScroll(): void {
-        this.dispatchEvent(
-            new Event('scroll', {
-                cancelable: true,
-                composed: true,
-            })
-        );
+    // Maybe it's finally time to remove this support?
+    if (!this.hasUpdated) {
+      this.deprecatedMenu = this.querySelector(":scope > sp-menu");
+      this.deprecatedMenu?.toggleAttribute("ignore", true);
+      this.deprecatedMenu?.setAttribute("selects", "inherit");
     }
 
-    protected get renderMenu(): TemplateResult {
-        const menu = html`
-            
-                
-            
-        `;
-
-        this.hasRenderedOverlay =
-            this.hasRenderedOverlay ||
-            this.focused ||
-            this.open ||
-            !!this.deprecatedMenu;
-
-        if (this.hasRenderedOverlay) {
-            if (this.dependencyManager.loaded) {
-                this.dependencyManager.add('sp-overlay');
-            }
-
-            return this.renderOverlay(menu);
-        }
+    if (window.__swc.DEBUG) {
+      if (!this.hasUpdated && this.querySelector(":scope > sp-menu")) {
+        const { localName } = this;
 
-        return menu;
-    }
+        window.__swc.warn(
+          this,
+          `You no longer need to provide an  child to ${localName}. Any styling or attributes on the  will be ignored.`,
+          "https://opensource.adobe.com/spectrum-web-components/components/picker/#sizes",
+          { level: "deprecation" },
+        );
+      }
 
-    private willManageSelection = false;
+      this.updateComplete.then(async () => {
+        // Attributes should be user supplied, making them available before first update.
+        // However, `appliesLabel` is applied by external elements that must be update complete as well to be bound appropriately.
+        await new Promise((res) => requestAnimationFrame(res));
+        await new Promise((res) => requestAnimationFrame(res));
 
-    protected shouldScheduleManageSelection(event?: Event): void {
         if (
-            !this.willManageSelection &&
-            (!event ||
-                ((event.target as HTMLElement).getRootNode() as ShadowRoot)
-                    .host === this)
+          !this.label &&
+          !this.getAttribute("aria-label") &&
+          !this.getAttribute("aria-labelledby") &&
+          !this.appliedLabel
         ) {
-            this.willManageSelection = true;
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    this.manageSelection();
-                });
-            });
-        }
+          window.__swc.warn(
+            this,
+            `<${this.localName}> needs one of the following to be accessible:`,
+            "https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility",
+            {
+              type: "accessibility",
+              issues: [
+                `an  element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
+                'value supplied to the "label" attribute, which will be displayed visually as placeholder text, or',
+                'text content supplied in a  with slot="label", which will also be displayed visually as placeholder text.',
+              ],
+            },
+          );
+        }
+      });
+    }
+
+    super.update(changes);
+  }
+
+  protected bindButtonKeydownListener(): void {
+    this.button.addEventListener("keydown", this.handleKeydown);
+  }
+
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
+
+    if (changes.has("open")) {
+      this.strategy.open = this.open;
+    }
+  }
+
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
+    this.bindButtonKeydownListener();
+    this.bindEvents();
+  }
+
+  protected get dismissHelper(): TemplateResult {
+    return html`
+      
+    `;
+  }
+
+  protected renderContainer(menu: TemplateResult): TemplateResult {
+    const accessibleMenu = html`
+      ${this.dismissHelper} ${menu} ${this.dismissHelper}
+    `;
+
+    // @todo: test in mobile
+    /* c8 ignore next 11 */
+    if (this.isMobile.matches) {
+      this.dependencyManager.add("sp-tray");
+      import("@spectrum-web-components/tray/sp-tray.js");
+
+      return html`
+        
+          ${accessibleMenu}
+        
+      `;
+    }
+
+    this.dependencyManager.add("sp-popover");
+    import("@spectrum-web-components/popover/sp-popover.js");
+
+    return html`
+      
+        ${accessibleMenu}
+      
+    `;
+  }
+
+  protected hasRenderedOverlay = false;
+
+  private onScroll(): void {
+    this.dispatchEvent(
+      new Event("scroll", {
+        cancelable: true,
+        composed: true,
+      }),
+    );
+  }
+
+  protected get renderMenu(): TemplateResult {
+    const menu = html`
+      
+        
+      
+    `;
+
+    this.hasRenderedOverlay =
+      this.hasRenderedOverlay ||
+      this.focused ||
+      this.open ||
+      !!this.deprecatedMenu;
+
+    if (this.hasRenderedOverlay) {
+      if (this.dependencyManager.loaded) {
+        this.dependencyManager.add("sp-overlay");
+      }
+
+      return this.renderOverlay(menu);
+    }
+
+    return menu;
+  }
+
+  private willManageSelection = false;
+
+  protected shouldScheduleManageSelection(event?: Event): void {
+    if (
+      !this.willManageSelection &&
+      (!event ||
+        ((event.target as HTMLElement).getRootNode() as ShadowRoot).host ===
+          this)
+    ) {
+      this.willManageSelection = true;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this.manageSelection();
+        });
+      });
     }
+  }
 
-    protected shouldManageSelection(): void {
-        if (this.willManageSelection) {
-            return;
-        }
-
-        this.willManageSelection = true;
-        this.manageSelection();
+  protected shouldManageSelection(): void {
+    if (this.willManageSelection) {
+      return;
     }
 
-    protected async manageSelection(): Promise {
-        if (this.selects == null) return;
+    this.willManageSelection = true;
+    this.manageSelection();
+  }
 
-        this.selectionPromise = new Promise(
-            (res) => (this.selectionResolver = res)
-        );
-        let selectedItem: MenuItem | undefined;
+  protected async manageSelection(): Promise {
+    if (this.selects == null) {
+      return;
+    }
 
-        await this.optionsMenu.updateComplete;
+    this.selectionPromise = new Promise(
+      (res) => (this.selectionResolver = res),
+    );
+    let selectedItem: MenuItem | undefined;
 
-        if (this.recentlyConnected) {
-            // Work around for attach timing differences in Safari and Firefox.
-            // Remove when refactoring to Menu passthrough wrapper.
-            await new Promise((res) => requestAnimationFrame(() => res(true)));
-            this.recentlyConnected = false;
-        }
+    await this.optionsMenu.updateComplete;
 
-        this.menuItems.forEach((item) => {
-            if (this.value === item.value && !item.disabled) {
-                selectedItem = item;
-            } else {
-                item.selected = false;
-            }
-        });
+    if (this.recentlyConnected) {
+      // Work around for attach timing differences in Safari and Firefox.
+      // Remove when refactoring to Menu passthrough wrapper.
+      await new Promise((res) => requestAnimationFrame(() => res(true)));
+      this.recentlyConnected = false;
+    }
 
-        if (selectedItem) {
-            selectedItem.selected = !!this.selects;
-            this.selectedItem = selectedItem;
-        } else {
-            this.value = '';
-            this.selectedItem = undefined;
-        }
+    this.menuItems.forEach((item) => {
+      if (this.value === item.value && !item.disabled) {
+        selectedItem = item;
+      } else {
+        item.selected = false;
+      }
+    });
 
-        if (this.open) {
-            await this.optionsMenu.updateComplete;
-            this.optionsMenu.updateSelectedItemIndex();
-        }
+    if (selectedItem) {
+      selectedItem.selected = !!this.selects;
+      this.selectedItem = selectedItem;
+    } else {
+      this.value = "";
+      this.selectedItem = undefined;
+    }
 
-        this.selectionResolver();
-        this.willManageSelection = false;
+    if (this.open) {
+      await this.optionsMenu.updateComplete;
+      this.optionsMenu.updateSelectedItemIndex();
     }
 
-    private selectionPromise = Promise.resolve();
-    private selectionResolver!: () => void;
+    this.selectionResolver();
+    this.willManageSelection = false;
+  }
 
-    protected override async getUpdateComplete(): Promise {
-        const complete = (await super.getUpdateComplete()) as boolean;
+  private selectionPromise = Promise.resolve();
+  private selectionResolver!: () => void;
 
-        await this.selectionPromise;
+  protected override async getUpdateComplete(): Promise {
+    const complete = (await super.getUpdateComplete()) as boolean;
 
-        // if (this.overlayElement) {
-        //     await this.overlayElement.updateComplete;
-        // }
-        return complete;
-    }
+    await this.selectionPromise;
 
-    private recentlyConnected = false;
+    // if (this.overlayElement) {
+    //     await this.overlayElement.updateComplete;
+    // }
+    return complete;
+  }
 
-    private enterKeydownOn: EventTarget | null = null;
+  private recentlyConnected = false;
 
-    protected handleEnterKeydown = (event: KeyboardEvent): void => {
-        if (event.code !== 'Enter') {
-            return;
-        }
+  private enterKeydownOn: EventTarget | null = null;
 
-        if (this.enterKeydownOn) {
-            event.preventDefault();
+  protected handleEnterKeydown = (event: KeyboardEvent): void => {
+    if (event.code !== "Enter") {
+      return;
+    }
 
-            return;
-        }
+    if (this.enterKeydownOn) {
+      event.preventDefault();
 
-        this.enterKeydownOn = event.target;
-        this.addEventListener(
-            'keyup',
-            async (keyupEvent: KeyboardEvent) => {
-                if (keyupEvent.code !== 'Enter') {
-                    return;
-                }
+      return;
+    }
 
-                this.enterKeydownOn = null;
-            },
-            { once: true }
-        );
-    };
+    this.enterKeydownOn = event.target;
+    this.addEventListener(
+      "keyup",
+      async (keyupEvent: KeyboardEvent) => {
+        if (keyupEvent.code !== "Enter") {
+          return;
+        }
 
-    public bindEvents(): void {
-        this.strategy?.abort();
+        this.enterKeydownOn = null;
+      },
+      { once: true },
+    );
+  };
 
-        if (this.isMobile.matches) {
-            this.strategy = new strategies['mobile'](this.button, this);
-        } else {
-            this.strategy = new strategies['desktop'](this.button, this);
-        }
-    }
+  public bindEvents(): void {
+    this.strategy?.abort();
 
-    public override connectedCallback(): void {
-        super.connectedCallback();
-        this.recentlyConnected = this.hasUpdated;
+    if (this.isMobile.matches) {
+      this.strategy = new strategies["mobile"](this.button, this);
+    } else {
+      this.strategy = new strategies["desktop"](this.button, this);
     }
+  }
 
-    public override disconnectedCallback(): void {
-        this.close();
-        this.strategy?.releaseDescription();
-        super.disconnectedCallback();
-    }
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.recentlyConnected = this.hasUpdated;
+  }
+
+  public override disconnectedCallback(): void {
+    this.close();
+    this.strategy?.releaseDescription();
+    super.disconnectedCallback();
+  }
 }
 
 /**
@@ -891,57 +878,54 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
  * @fires sp-closed - Announces that the overlay has been closed
  */
 export class Picker extends PickerBase {
-    public static override get styles(): CSSResultArray {
-        return [pickerStyles, chevronStyles, chevronIconOverrides];
-    }
+  public static override get styles(): CSSResultArray {
+    return [pickerStyles, chevronStyles, chevronIconOverrides];
+  }
 
-    protected override get containerStyles(): StyleInfo {
-        const styles = super.containerStyles;
+  protected override get containerStyles(): StyleInfo {
+    const styles = super.containerStyles;
 
-        if (!this.quiet) {
-            styles['min-width'] = `${this.offsetWidth}px`;
-        }
-
-        return styles;
+    if (!this.quiet) {
+      styles["min-width"] = `${this.offsetWidth}px`;
     }
 
-    protected override handleKeydown = (event: KeyboardEvent): void => {
-        const { code } = event;
+    return styles;
+  }
 
-        this.focused = true;
+  protected override handleKeydown = (event: KeyboardEvent): void => {
+    const { code } = event;
 
-        if (!code.startsWith('Arrow') || this.readonly || this.pending) {
-            return;
-        }
+    this.focused = true;
 
-        if (code === 'ArrowUp' || code === 'ArrowDown') {
-            this.toggle(true);
-            event.preventDefault();
+    if (!code.startsWith("Arrow") || this.readonly || this.pending) {
+      return;
+    }
 
-            return;
-        }
+    if (code === "ArrowUp" || code === "ArrowDown") {
+      this.toggle(true);
+      event.preventDefault();
 
-        event.preventDefault();
-        const selectedIndex = this.selectedItem
-            ? this.menuItems.indexOf(this.selectedItem)
-            : -1;
-        // use a positive offset to find the first non-disabled item when no selection is available.
-        const nextOffset = selectedIndex < 0 || code === 'ArrowRight' ? 1 : -1;
-        let nextIndex = selectedIndex + nextOffset;
-
-        while (
-            this.menuItems[nextIndex] &&
-            this.menuItems[nextIndex].disabled
-        ) {
-            nextIndex += nextOffset;
-        }
+      return;
+    }
 
-        if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {
-            return;
-        }
+    event.preventDefault();
+    const selectedIndex = this.selectedItem
+      ? this.menuItems.indexOf(this.selectedItem)
+      : -1;
+    // use a positive offset to find the first non-disabled item when no selection is available.
+    const nextOffset = selectedIndex < 0 || code === "ArrowRight" ? 1 : -1;
+    let nextIndex = selectedIndex + nextOffset;
 
-        if (!this.value || nextIndex !== selectedIndex) {
-            this.setValueFromItem(this.menuItems[nextIndex]);
-        }
-    };
+    while (this.menuItems[nextIndex] && this.menuItems[nextIndex].disabled) {
+      nextIndex += nextOffset;
+    }
+
+    if (!this.menuItems[nextIndex] || this.menuItems[nextIndex].disabled) {
+      return;
+    }
+
+    if (!this.value || nextIndex !== selectedIndex) {
+      this.setValueFromItem(this.menuItems[nextIndex]);
+    }
+  };
 }
diff --git a/packages/picker/src/index.ts b/packages/picker/src/index.ts
index 73681f845d..05b99d059c 100644
--- a/packages/picker/src/index.ts
+++ b/packages/picker/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './Picker.js';
+export * from "./Picker.js";
diff --git a/packages/picker/src/strategies.ts b/packages/picker/src/strategies.ts
index 110d40786a..2af0700ef0 100644
--- a/packages/picker/src/strategies.ts
+++ b/packages/picker/src/strategies.ts
@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { DesktopController } from './DesktopController.js';
-import { MobileController } from './MobileController.js';
+import { DesktopController } from "./DesktopController.js";
+import { MobileController } from "./MobileController.js";
 
 export const strategies = {
-    desktop: DesktopController,
-    mobile: MobileController,
+  desktop: DesktopController,
+  mobile: MobileController,
 };
diff --git a/packages/picker/stories/args.ts b/packages/picker/stories/args.ts
index e6470cc33d..eb83de800d 100644
--- a/packages/picker/stories/args.ts
+++ b/packages/picker/stories/args.ts
@@ -11,57 +11,56 @@ governing permissions and limitations under the License.
 */
 
 export const argTypes = {
-    size: {
-        name: 'size',
-        type: { name: 'string', required: false },
-        description: 'The size at which to display accordion items.',
-        table: {
-            defaultValue: { summary: 'm' },
-        },
-        control: {
-            labels: {
-                s: 'Small',
-                m: 'Medium',
-                l: 'Large',
-                xl: 'Extra large',
-            },
-            type: 'select',
-        },
-        options: ['s', 'm', 'l', 'xl'],
+  size: {
+    name: "size",
+    type: { name: "string", required: false },
+    description: "The size at which to display accordion items.",
+    table: {
+      defaultValue: { summary: "m" },
     },
-    quiet: {
-        name: 'quiet',
-        type: { name: 'boolean', required: false },
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+    control: {
+      labels: {
+        s: "Small",
+        m: "Medium",
+        l: "Large",
+        xl: "Extra large",
+      },
+      type: "select",
     },
-    disabled: {
-        name: 'disabled',
-        type: { name: 'boolean', required: false },
-        description:
-            'Disable this control. It will not receive focus or events.',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+    options: ["s", "m", "l", "xl"],
+  },
+  quiet: {
+    name: "quiet",
+    type: { name: "boolean", required: false },
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
     },
-    invalid: {
-        name: 'invalid',
-        type: { name: 'boolean', required: false },
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: false },
-        },
-        control: {
-            type: 'boolean',
-        },
+    control: {
+      type: "boolean",
     },
+  },
+  disabled: {
+    name: "disabled",
+    type: { name: "boolean", required: false },
+    description: "Disable this control. It will not receive focus or events.",
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
+    },
+    control: {
+      type: "boolean",
+    },
+  },
+  invalid: {
+    name: "invalid",
+    type: { name: "boolean", required: false },
+    table: {
+      type: { summary: "boolean" },
+      defaultValue: { summary: false },
+    },
+    control: {
+      type: "boolean",
+    },
+  },
 };
diff --git a/packages/picker/stories/picker-pending.stories.ts b/packages/picker/stories/picker-pending.stories.ts
index be6de79d0c..cf83b20a61 100644
--- a/packages/picker/stories/picker-pending.stories.ts
+++ b/packages/picker/stories/picker-pending.stories.ts
@@ -15,22 +15,22 @@ import { argTypes } from "./args.js";
 import { StoryArgs, Template } from "./template.js";
 
 export default {
-	title: "Picker/Pending",
-	component: "sp-picker",
-	argTypes,
-	args: {
-		pending: true,
-	},
+  title: "Picker/Pending",
+  component: "sp-picker",
+  argTypes,
+  args: {
+    pending: true,
+  },
 };
 
 export const S = (args: StoryArgs): TemplateResult =>
-	Template({ ...args, size: "s" });
+  Template({ ...args, size: "s" });
 
 export const M = (args: StoryArgs): TemplateResult =>
-	Template({ ...args, size: "m" });
+  Template({ ...args, size: "m" });
 
 export const L = (args: StoryArgs): TemplateResult =>
-	Template({ ...args, size: "l" });
+  Template({ ...args, size: "l" });
 
 export const XL = (args: StoryArgs): TemplateResult =>
-	Template({ ...args, size: "xl" });
+  Template({ ...args, size: "xl" });
diff --git a/packages/picker/stories/picker-sizes.stories.ts b/packages/picker/stories/picker-sizes.stories.ts
index e545544599..24ef497cfb 100644
--- a/packages/picker/stories/picker-sizes.stories.ts
+++ b/packages/picker/stories/picker-sizes.stories.ts
@@ -10,110 +10,110 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/picker/sp-picker.js';
-import { Picker } from '@spectrum-web-components/picker';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
+import "@spectrum-web-components/picker/sp-picker.js";
+import { Picker } from "@spectrum-web-components/picker";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
 
 export default {
-    title: 'Picker/Sizes',
-    component: 'sp-picker',
-    argTypes: {
-        onChange: { action: 'change' },
-        invalid: {
-            name: 'invalid',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        pending: {
-            name: 'pending',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
+  title: "Picker/Sizes",
+  component: "sp-picker",
+  argTypes: {
+    onChange: { action: "change" },
+    invalid: {
+      name: "invalid",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+    pending: {
+      name: "pending",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+  },
 };
 
 type StoryArgs = {
-    onChange: (val: string) => void;
-    invalid: boolean;
-    pending: boolean;
-    open: false;
+  onChange: (val: string) => void;
+  invalid: boolean;
+  pending: boolean;
+  open: false;
 };
 
 const picker = ({
-    onChange,
-    open,
-    size,
-    pending,
-    invalid,
+  onChange,
+  open,
+  size,
+  pending,
+  invalid,
 }: {
-    onChange: (val: string) => void;
-    size: 's' | 'm' | 'l' | 'xl';
-    pending: boolean;
-    invalid: boolean;
-    open: boolean;
+  onChange: (val: string) => void;
+  size: "s" | "m" | "l" | "xl";
+  pending: boolean;
+  invalid: boolean;
+  open: boolean;
 }): TemplateResult => {
-    return html`
-        
-            Where do you live?
-        
-        
+      Where do you live?
+    
+    
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            Save Selection
-            Make Work Path
-        
-    `;
+        onChange(picker.value);
+      }}"
+      label="Select a Country with a very long label, too long, in fact"
+      ?pending="${pending}"
+      ?invalid="${invalid}"
+      ?open=${open}
+    >
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      Save Selection
+      Make Work Path
+    
+  `;
 };
 
 export const s = (args: StoryArgs): TemplateResult =>
-    picker({ ...args, size: 's' });
+  picker({ ...args, size: "s" });
 
 export const sOpen = (args: StoryArgs): TemplateResult =>
-    picker({ ...args, open: true, size: 's' });
+  picker({ ...args, open: true, size: "s" });
 
 export const m = (args: StoryArgs): TemplateResult =>
-    picker({ ...args, size: 'm' });
+  picker({ ...args, size: "m" });
 
 export const mOpen = (args: StoryArgs): TemplateResult =>
-    picker({ ...args, open: true, size: 'm' });
+  picker({ ...args, open: true, size: "m" });
 
 export const l = (args: StoryArgs): TemplateResult =>
-    picker({ ...args, size: 'l' });
+  picker({ ...args, size: "l" });
 
 export const lOpen = (args: StoryArgs): TemplateResult =>
-    picker({ ...args, open: true, size: 'l' });
+  picker({ ...args, open: true, size: "l" });
 
 export const XL = (args: StoryArgs): TemplateResult =>
-    picker({ ...args, size: 'xl' });
+  picker({ ...args, size: "xl" });
 
 export const XLOpen = (args: StoryArgs): TemplateResult =>
-    picker({ ...args, open: true, size: 'xl' });
+  picker({ ...args, open: true, size: "xl" });
diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts
index 9ca59544d2..c681f93173 100644
--- a/packages/picker/stories/picker.stories.ts
+++ b/packages/picker/stories/picker.stories.ts
@@ -10,634 +10,615 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/link/sp-link.js';
-import '@spectrum-web-components/picker/sp-picker.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';
-import { states } from './states.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { spreadProps } from '../../../test/lit-helpers.js';
-import { isOverlayOpen } from '../../overlay/stories/index.js';
-import '../../overlay/stories/index.js';
-import { handleChange, StoryArgs, Template } from './template.js';
-import { argTypes } from './args.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import "@spectrum-web-components/link/sp-link.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js";
+import { states } from "./states.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { spreadProps } from "../../../test/lit-helpers.js";
+import { isOverlayOpen } from "../../overlay/stories/index.js";
+import "../../overlay/stories/index.js";
+import { handleChange, StoryArgs, Template } from "./template.js";
+import { argTypes } from "./args.js";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 
 export default {
-    title: 'Picker',
-    component: 'sp-picker',
-    args: {
-        disabled: false,
-        invalid: false,
-        open: false,
-        quiet: false,
-        pending: false,
+  title: "Picker",
+  component: "sp-picker",
+  args: {
+    disabled: false,
+    invalid: false,
+    open: false,
+    quiet: false,
+    pending: false,
+  },
+  argTypes: {
+    ...argTypes,
+    onChange: { action: "change" },
+    open: {
+      name: "open",
+      type: { name: "boolean", required: false },
+      description: "Whether the menu is open or not.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: "boolean",
     },
-    argTypes: {
-        ...argTypes,
-        onChange: { action: 'change' },
-        open: {
-            name: 'open',
-            type: { name: 'boolean', required: false },
-            description: 'Whether the menu is open or not.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: 'boolean',
-        },
-        pending: {
-            name: 'pending',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
+    pending: {
+      name: "pending",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+  },
 };
 
 export const Default = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Where do you live?
-        
-        
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            Save Selection
-            
-                Make Work Path
-            
-        
-        
This is some text.

-        
This is some text.

-        

-            This is a
-            link
-            .
-        

-    `;
+  return html`
+    
+      Where do you live?
+    
+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      Save Selection
+       Make Work Path 
+    
+    
This is some text.

+    
This is some text.

+    

+      This is a
+      link
+      .
+    

+  `;
 };
 
 export const disabled = (args: StoryArgs): TemplateResult => Template(args);
 disabled.args = {
-    disabled: true,
+  disabled: true,
 };
 
 export const invalid = (args: StoryArgs): TemplateResult => Template(args);
 invalid.args = {
-    invalid: true,
+  invalid: true,
 };
 
 export const tooltip = (args: StoryArgs): TemplateResult => {
-    const { open, ...rest } = args;
+  const { open, ...rest } = args;
 
-    return html`
-        
-            Where do you live?
-        
-        
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            Save Selection
-            
-                Make Work Path
-            
-            
-                This Picker wants to know where you live.
-            
-        
-        
This is some text.

-        
This is some text.

-        

-            This is a
-            link
-            .
-        

-    `;
+  return html`
+    
+      Where do you live?
+    
+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      Save Selection
+       Make Work Path 
+      
+        This Picker wants to know where you live.
+      
+    
+    
This is some text.

+    
This is some text.

+    

+      This is a
+      link
+      .
+    

+  `;
 };
 tooltip.args = {
-    open: true,
+  open: true,
 };
 tooltip.decorators = [isOverlayOpen];
 
 export const leftSideLabel = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Where do you live?
-        
-        
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            Save Selection
-            
-                Make Work Path
-            
-        
-        
This is some text.

-        
This is some text.

-        

-            This is a
-            link
-            .
-        

-    `;
+  return html`
+    
+      Where do you live?
+    
+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      Save Selection
+       Make Work Path 
+    
+    
This is some text.

+    
This is some text.

+    

+      This is a
+      link
+      .
+    

+  `;
 };
 
 export const noVisibleLabel = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            Save Selection
-            
-                Make Work Path
-            
-        
-        
This is some text.

-        
This is some text.

-        

-            This is a
-            link
-            .
-        

-    `;
+  return html`
+    
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      Save Selection
+       Make Work Path 
+    
+    
This is some text.

+    
This is some text.

+    

+      This is a
+      link
+      .
+    

+  `;
 };
 
 export const slottedLabel = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Where do you live?
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            Save Selection
-            
-                Make Work Path
-            
-        
-        
This is some text.

-        
This is some text.

-        

-            This is a
-            link
-            .
-        

-    `;
+  return html`
+    
+      Where do you live?
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      Save Selection
+       Make Work Path 
+    
+    
This is some text.

+    
This is some text.

+    

+      This is a
+      link
+      .
+    

+  `;
 };
 
 export const quiet = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Where do you live?
-        
-        
-            Item 1
-            Item 2
-            Item 3
-            Item 4
-        
-        
This is some text.

-        
This is some text.

-        

-            This is a
-            link
-            .
-        

-    `;
+  return html`
+    
+      Where do you live?
+    
+    
+      Item 1
+      Item 2
+      Item 3
+      Item 4
+    
+    
This is some text.

+    
This is some text.

+    

+      This is a
+      link
+      .
+    

+  `;
 };
 quiet.args = {
-    quiet: true,
+  quiet: true,
 };
 
 export const quietSideLabel = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Where do you live?
-        
-        
-            Item 1
-            Item 2
-            Item 3
-            Item 4
-        
-        
This is some text.

-        
This is some text.

-        

-            This is a
-            link
-            .
-        

-    `;
+  return html`
+    
+      Where do you live?
+    
+    
+      Item 1
+      Item 2
+      Item 3
+      Item 4
+    
+    
This is some text.

+    
This is some text.

+    

+      This is a
+      link
+      .
+    

+  `;
 };
 quietSideLabel.args = {
-    quiet: true,
+  quiet: true,
 };
 
 export const icons = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Choose an action type...
-        
-        
-            
-                
-                Edit
-            
-            
-                
-                Copy
-            
-            
-                
-                Delete
-            
-        
-    `;
+  return html`
+    
+      Choose an action type...
+    
+    
+      
+        
+        Edit
+      
+      
+        
+        Copy
+      
+      
+        
+        Delete
+      
+    
+  `;
 };
 
 export const iconsNone = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Choose an action type...
-        
-        
-            
-                
-                Edit
-            
-            
-                
-                Copy
-            
-            
-                
-                Delete
-            
-        
-    `;
+  return html`
+    
+      Choose an action type...
+    
+    
+      
+        
+        Edit
+      
+      
+        
+        Copy
+      
+      
+        
+        Delete
+      
+    
+  `;
 };
 iconsNone.args = {
-    open: true,
+  open: true,
 };
 iconsNone.decorators = [isOverlayOpen];
 
 export const iconValue = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Choose an action type...
-        
-        
-            
-                
-                Edit
-            
-            
-                
-                Copy
-            
-            
-                
-                Delete
-            
-        
-    `;
+  return html`
+    
+      Choose an action type...
+    
+    
+      
+        
+        Edit
+      
+      
+        
+        Copy
+      
+      
+        
+        Delete
+      
+    
+  `;
 };
 
 export const iconsOnly = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Choose an action type...
-        
-        
-            
-                
-            
-            
-                
-            
-            
-                
-            
-        
-    `;
+  return html`
+    
+      Choose an action type...
+    
+    
+      
+        
+      
+      
+        
+      
+      
+        
+      
+    
+  `;
 };
 iconsOnly.args = {
-    open: true,
+  open: true,
 };
 iconsOnly.decorators = [isOverlayOpen];
 
 export const Open = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-        

-            
-                Where do you live?
-            
-            
-                
-                    Select a Country with a very long label, too long, in fact
-                
-                Deselect
-                Select Inverse
-                Feather...
-                Select and Mask...
-                Save Selection
-                Make Work Path
-            
-        

-        

-            
-                Where do you live?
-            
-            
-                
-                    Other menu that goes behind the open one
-                
-                Not so many options...
-            
-        

-    `;
+  return html`
+    
+    

+      
+        Where do you live?
+      
+      
+        
+          Select a Country with a very long label, too long, in fact
+        
+        Deselect
+        Select Inverse
+        Feather...
+        Select and Mask...
+        Save Selection
+        Make Work Path
+      
+    

+    

+      
+        Where do you live?
+      
+      
+         Other menu that goes behind the open one 
+        Not so many options...
+      
+    

+  `;
 };
 Open.args = {
-    open: true,
+  open: true,
 };
 Open.decorators = [isOverlayOpen];
 
 export const OpenShowingEdgeCase = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-        

-            In browser that do not support
-            [popover]
-            , the following "open"
-            sp-picker
-            will display behind both the closed
-            sp-picker
-            as well as the
-            fieldset
-            that contains it.
-        

-        

-            Learn more about this situation in our
-            
-                documentation site
-            
-            .
-        

-        

-            
-                Where do you live?
-            
-            
-                
-                    Select a Country with a very long label, too long, in fact
-                
-                Deselect
-                Select Inverse
-                Feather...
-                Select and Mask...
-                Save Selection
-                Make Work Path
-            
-        

-        

-            
-                Where do you live?
-            
-            
-                
-                    Other menu that goes behind the open one
-                
-                Not so many options...
-            
-        

-    `;
+  return html`
+    
+    

+      In browser that do not support
+      [popover]
+      , the following "open"
+      sp-picker
+      will display behind both the closed
+      sp-picker
+      as well as the
+      fieldset
+      that contains it.
+    

+    

+      Learn more about this situation in our
+      
+        documentation site
+      
+      .
+    

+    

+      
+        Where do you live?
+      
+      
+        
+          Select a Country with a very long label, too long, in fact
+        
+        Deselect
+        Select Inverse
+        Feather...
+        Select and Mask...
+        Save Selection
+        Make Work Path
+      
+    

+    

+      
+        Where do you live?
+      
+      
+         Other menu that goes behind the open one 
+        Not so many options...
+      
+    

+  `;
 };
 OpenShowingEdgeCase.args = {
-    open: true,
+  open: true,
 };
 OpenShowingEdgeCase.decorators = [isOverlayOpen];
 OpenShowingEdgeCase.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 OpenShowingEdgeCase.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const initialValue = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            Where do you live?
-        
-        
-            
-                Select a Country with a very long label, too long in fact
-            
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            Save Selection
-            Make Work Path
-        
-    `;
+  return html`
+    
+      Where do you live?
+    
+    
+      
+        Select a Country with a very long label, too long in fact
+      
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      Save Selection
+      Make Work Path
+    
+  `;
 };
 
 export const readonly = (args: StoryArgs): TemplateResult => {
-    return html`
-        
-            
-                Select a Country with a very long label, too long in fact
-            
-            Deselect
-            Select Inverse
-            Feather...
-            Select and Mask...
-            Save Selection
-            Make Work Path
-        
-    `;
+  return html`
+    
+      
+        Select a Country with a very long label, too long in fact
+      
+      Deselect
+      Select Inverse
+      Feather...
+      Select and Mask...
+      Save Selection
+      Make Work Path
+    
+  `;
 };
 
 export const custom = (args: StoryArgs): TemplateResult => {
-    const initialState = 'lb1-mo';
+  const initialState = "lb1-mo";
 
-    return html`
-        
-            What state do you live in?
-        
-        
-            ${states.map(
-                (state) => html`
-                    
-                        ${state.label}
-                    
-                `
-            )}
-        
-        
This is some text.

-        
This is some text.

-        

-            This is a
-            link
-            .
-        

-    `;
+  return html`
+    
+      What state do you live in?
+    
+    
+      ${states.map(
+        (state) => html`
+          
+            ${state.label}
+          
+        `,
+      )}
+    
+    
This is some text.

+    
This is some text.

+    

+      This is a
+      link
+      .
+    

+  `;
 };
 custom.args = {
-    open: true,
+  open: true,
 };
 custom.decorators = [isOverlayOpen];
diff --git a/packages/picker/stories/states.ts b/packages/picker/stories/states.ts
index c2d755c082..07bcaea45a 100644
--- a/packages/picker/stories/states.ts
+++ b/packages/picker/stories/states.ts
@@ -10,231 +10,231 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 export const states: {
-    id: string;
-    label: string;
+  id: string;
+  label: string;
 }[] = [
-    {
-        id: 'lb1-al',
-        label: 'Alabama',
-    },
-    {
-        id: 'lb1-ak',
-        label: 'Alaska',
-    },
-    {
-        id: 'lb1-as',
-        label: 'American Samoa',
-    },
-    {
-        id: 'lb1-az',
-        label: 'Arizona',
-    },
-    {
-        id: 'lb1-ar',
-        label: 'Arkansas',
-    },
-    {
-        id: 'lb1-ca',
-        label: 'California',
-    },
-    {
-        id: 'lb1-co',
-        label: 'Colorado',
-    },
-    {
-        id: 'lb1-ct',
-        label: 'Connecticut',
-    },
-    {
-        id: 'lb1-de',
-        label: 'Delaware',
-    },
-    {
-        id: 'lb1-dc',
-        label: 'District of Columbia',
-    },
-    {
-        id: 'lb1-fl',
-        label: 'Florida',
-    },
-    {
-        id: 'lb1-ga',
-        label: 'Georgia',
-    },
-    {
-        id: 'lb1-gm',
-        label: 'Guam',
-    },
-    {
-        id: 'lb1-hi',
-        label: 'Hawaii',
-    },
-    {
-        id: 'lb1-id',
-        label: 'Idaho',
-    },
-    {
-        id: 'lb1-il',
-        label: 'Illinois',
-    },
-    {
-        id: 'lb1-in',
-        label: 'Indiana',
-    },
-    {
-        id: 'lb1-ia',
-        label: 'Iowa',
-    },
-    {
-        id: 'lb1-ks',
-        label: 'Kansas',
-    },
-    {
-        id: 'lb1-ky',
-        label: 'Kentucky',
-    },
-    {
-        id: 'lb1-la',
-        label: 'Louisiana',
-    },
-    {
-        id: 'lb1-me',
-        label: 'Maine',
-    },
-    {
-        id: 'lb1-md',
-        label: 'Maryland',
-    },
-    {
-        id: 'lb1-ma',
-        label: 'Massachusetts',
-    },
-    {
-        id: 'lb1-mi',
-        label: 'Michigan',
-    },
-    {
-        id: 'lb1-mn',
-        label: 'Minnesota',
-    },
-    {
-        id: 'lb1-ms',
-        label: 'Mississippi',
-    },
-    {
-        id: 'lb1-mo',
-        label: 'Missouri',
-    },
-    {
-        id: 'lb1-mt',
-        label: 'Montana',
-    },
-    {
-        id: 'lb1-ne',
-        label: 'Nebraska',
-    },
-    {
-        id: 'lb1-nv',
-        label: 'Nevada',
-    },
-    {
-        id: 'lb1-nh',
-        label: 'New Hampshire',
-    },
-    {
-        id: 'lb1-nj',
-        label: 'New Jersey',
-    },
-    {
-        id: 'lb1-nm',
-        label: 'New Mexico',
-    },
-    {
-        id: 'lb1-ny',
-        label: 'New York',
-    },
-    {
-        id: 'lb1-nc',
-        label: 'North Carolina',
-    },
-    {
-        id: 'lb1-nd',
-        label: 'North Dakota',
-    },
-    {
-        id: 'lb1-mp',
-        label: 'Northern Marianas Islands',
-    },
-    {
-        id: 'lb1-oh',
-        label: 'Ohio',
-    },
-    {
-        id: 'lb1-ok',
-        label: 'Oklahoma',
-    },
-    {
-        id: 'lb1-or',
-        label: 'Oregon',
-    },
-    {
-        id: 'lb1-pa',
-        label: 'Pennsylvania',
-    },
-    {
-        id: 'lb1-pr',
-        label: 'Puerto Rico',
-    },
-    {
-        id: 'lb1-ri',
-        label: 'Rhode Island',
-    },
-    {
-        id: 'lb1-sc',
-        label: 'South Carolina',
-    },
-    {
-        id: 'lb1-sd',
-        label: 'South Dakota',
-    },
-    {
-        id: 'lb1-tn',
-        label: 'Tennessee',
-    },
-    {
-        id: 'lb1-tx',
-        label: 'Texas',
-    },
-    {
-        id: 'lb1-ut',
-        label: 'Utah',
-    },
-    {
-        id: 'lb1-ve',
-        label: 'Vermont',
-    },
-    {
-        id: 'lb1-va',
-        label: 'Virginia',
-    },
-    {
-        id: 'lb1-vi',
-        label: 'Virgin Islands',
-    },
-    {
-        id: 'lb1-wa',
-        label: 'Washington',
-    },
-    {
-        id: 'lb1-wv',
-        label: 'West Virginia',
-    },
-    {
-        id: 'lb1-wi',
-        label: 'Wisconsin',
-    },
-    {
-        id: 'lb1-wy',
-        label: 'Wyoming',
-    },
+  {
+    id: "lb1-al",
+    label: "Alabama",
+  },
+  {
+    id: "lb1-ak",
+    label: "Alaska",
+  },
+  {
+    id: "lb1-as",
+    label: "American Samoa",
+  },
+  {
+    id: "lb1-az",
+    label: "Arizona",
+  },
+  {
+    id: "lb1-ar",
+    label: "Arkansas",
+  },
+  {
+    id: "lb1-ca",
+    label: "California",
+  },
+  {
+    id: "lb1-co",
+    label: "Colorado",
+  },
+  {
+    id: "lb1-ct",
+    label: "Connecticut",
+  },
+  {
+    id: "lb1-de",
+    label: "Delaware",
+  },
+  {
+    id: "lb1-dc",
+    label: "District of Columbia",
+  },
+  {
+    id: "lb1-fl",
+    label: "Florida",
+  },
+  {
+    id: "lb1-ga",
+    label: "Georgia",
+  },
+  {
+    id: "lb1-gm",
+    label: "Guam",
+  },
+  {
+    id: "lb1-hi",
+    label: "Hawaii",
+  },
+  {
+    id: "lb1-id",
+    label: "Idaho",
+  },
+  {
+    id: "lb1-il",
+    label: "Illinois",
+  },
+  {
+    id: "lb1-in",
+    label: "Indiana",
+  },
+  {
+    id: "lb1-ia",
+    label: "Iowa",
+  },
+  {
+    id: "lb1-ks",
+    label: "Kansas",
+  },
+  {
+    id: "lb1-ky",
+    label: "Kentucky",
+  },
+  {
+    id: "lb1-la",
+    label: "Louisiana",
+  },
+  {
+    id: "lb1-me",
+    label: "Maine",
+  },
+  {
+    id: "lb1-md",
+    label: "Maryland",
+  },
+  {
+    id: "lb1-ma",
+    label: "Massachusetts",
+  },
+  {
+    id: "lb1-mi",
+    label: "Michigan",
+  },
+  {
+    id: "lb1-mn",
+    label: "Minnesota",
+  },
+  {
+    id: "lb1-ms",
+    label: "Mississippi",
+  },
+  {
+    id: "lb1-mo",
+    label: "Missouri",
+  },
+  {
+    id: "lb1-mt",
+    label: "Montana",
+  },
+  {
+    id: "lb1-ne",
+    label: "Nebraska",
+  },
+  {
+    id: "lb1-nv",
+    label: "Nevada",
+  },
+  {
+    id: "lb1-nh",
+    label: "New Hampshire",
+  },
+  {
+    id: "lb1-nj",
+    label: "New Jersey",
+  },
+  {
+    id: "lb1-nm",
+    label: "New Mexico",
+  },
+  {
+    id: "lb1-ny",
+    label: "New York",
+  },
+  {
+    id: "lb1-nc",
+    label: "North Carolina",
+  },
+  {
+    id: "lb1-nd",
+    label: "North Dakota",
+  },
+  {
+    id: "lb1-mp",
+    label: "Northern Marianas Islands",
+  },
+  {
+    id: "lb1-oh",
+    label: "Ohio",
+  },
+  {
+    id: "lb1-ok",
+    label: "Oklahoma",
+  },
+  {
+    id: "lb1-or",
+    label: "Oregon",
+  },
+  {
+    id: "lb1-pa",
+    label: "Pennsylvania",
+  },
+  {
+    id: "lb1-pr",
+    label: "Puerto Rico",
+  },
+  {
+    id: "lb1-ri",
+    label: "Rhode Island",
+  },
+  {
+    id: "lb1-sc",
+    label: "South Carolina",
+  },
+  {
+    id: "lb1-sd",
+    label: "South Dakota",
+  },
+  {
+    id: "lb1-tn",
+    label: "Tennessee",
+  },
+  {
+    id: "lb1-tx",
+    label: "Texas",
+  },
+  {
+    id: "lb1-ut",
+    label: "Utah",
+  },
+  {
+    id: "lb1-ve",
+    label: "Vermont",
+  },
+  {
+    id: "lb1-va",
+    label: "Virginia",
+  },
+  {
+    id: "lb1-vi",
+    label: "Virgin Islands",
+  },
+  {
+    id: "lb1-wa",
+    label: "Washington",
+  },
+  {
+    id: "lb1-wv",
+    label: "West Virginia",
+  },
+  {
+    id: "lb1-wi",
+    label: "Wisconsin",
+  },
+  {
+    id: "lb1-wy",
+    label: "Wyoming",
+  },
 ];
diff --git a/packages/picker/stories/template.ts b/packages/picker/stories/template.ts
index 1e27bfd996..d9e288608e 100644
--- a/packages/picker/stories/template.ts
+++ b/packages/picker/stories/template.ts
@@ -11,53 +11,55 @@ governing permissions and limitations under the License.
 */
 
 import {
-    ElementSize,
-    html,
-    type TemplateResult,
-} from '@spectrum-web-components/base';
-import type { Picker } from '@spectrum-web-components/picker';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/picker/sp-picker.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
+  ElementSize,
+  html,
+  type TemplateResult,
+} from "@spectrum-web-components/base";
+import type { Picker } from "@spectrum-web-components/picker";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
 
-import { spreadProps } from '../../../test/lit-helpers.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { spreadProps } from "../../../test/lit-helpers.js";
+import { ifDefined } from "lit-html/directives/if-defined.js";
 
 export interface StoryArgs {
-    disabled?: boolean;
-    invalid?: boolean;
-    open?: boolean;
-    quiet?: boolean;
-    pending?: boolean;
-    showText?: boolean;
-    onChange?: (val: string) => void;
-    [prop: string]: unknown;
-    size?: ElementSize;
+  disabled?: boolean;
+  invalid?: boolean;
+  open?: boolean;
+  quiet?: boolean;
+  pending?: boolean;
+  showText?: boolean;
+  onChange?: (val: string) => void;
+  [prop: string]: unknown;
+  size?: ElementSize;
 }
 
 export const handleChange =
-    ({ onChange }: StoryArgs) =>
-    (event: Event): void => {
-        const picker = event.target as Picker;
+  ({ onChange }: StoryArgs) =>
+  (event: Event): void => {
+    const picker = event.target as Picker;
 
-        if (onChange) onChange(picker.value);
-    };
+    if (onChange) {
+      onChange(picker.value);
+    }
+  };
 
 export const Template = (args: StoryArgs): TemplateResult => html`
-    
-        Where do you live?
-    
-    
-        Carol Gardens
-        Cobble Hill
-        Ft. Greene
-        Park Slope
-        Prospect Park
-        Red Hook
-    
+  
+    Where do you live?
+  
+  
+    Carol Gardens
+    Cobble Hill
+    Ft. Greene
+    Park Slope
+    Prospect Park
+    Red Hook
+  
 `;
diff --git a/packages/picker/sync/index.ts b/packages/picker/sync/index.ts
index 85911ec356..a01f980d58 100644
--- a/packages/picker/sync/index.ts
+++ b/packages/picker/sync/index.ts
@@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/tray/sp-tray.js';
-import '@spectrum-web-components/popover/sp-popover.js';
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/tray/sp-tray.js";
+import "@spectrum-web-components/popover/sp-popover.js";
diff --git a/packages/picker/sync/sp-picker.ts b/packages/picker/sync/sp-picker.ts
index da4e432dfb..9e6f73dbfa 100644
--- a/packages/picker/sync/sp-picker.ts
+++ b/packages/picker/sync/sp-picker.ts
@@ -10,5 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import './index.js';
-import '../sp-picker.js';
+import "./index.js";
+import "../sp-picker.js";
diff --git a/packages/picker/test/benchmark/basic-test.ts b/packages/picker/test/benchmark/basic-test.ts
index 808bb66010..d295b44d6d 100644
--- a/packages/picker/test/benchmark/basic-test.ts
+++ b/packages/picker/test/benchmark/basic-test.ts
@@ -10,272 +10,270 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/picker/sp-picker.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 const countryList = [
-    'Afghanistan',
-    'Albania',
-    'Algeria',
-    'American Samoa',
-    'Andorra',
-    'Angola',
-    'Anguilla',
-    'Antarctica',
-    'Antigua and Barbuda',
-    'Argentina',
-    'Armenia',
-    'Aruba',
-    'Australia',
-    'Austria',
-    'Azerbaijan',
-    'Bahamas (the)',
-    'Bahrain',
-    'Bangladesh',
-    'Barbados',
-    'Belarus',
-    'Belgium',
-    'Belize',
-    'Benin',
-    'Bermuda',
-    'Bhutan',
-    'Bolivia (Plurinational State of)',
-    'Bonaire, Sint Eustatius and Saba',
-    'Bosnia and Herzegovina',
-    'Botswana',
-    'Bouvet Island',
-    'Brazil',
-    'British Indian Ocean Territory (the)',
-    'Brunei Darussalam',
-    'Bulgaria',
-    'Burkina Faso',
-    'Burundi',
-    'Cabo Verde',
-    'Cambodia',
-    'Cameroon',
-    'Canada',
-    'Cayman Islands (the)',
-    'Central African Republic (the)',
-    'Chad',
-    'Chile',
-    'China',
-    'Christmas Island',
-    'Cocos (Keeling) Islands (the)',
-    'Colombia',
-    'Comoros (the)',
-    'Congo (the Democratic Republic of the)',
-    'Congo (the)',
-    'Cook Islands (the)',
-    'Costa Rica',
-    'Croatia',
-    'Cuba',
-    'Curaçao',
-    'Cyprus',
-    'Czechia',
-    "Côte d'Ivoire",
-    'Denmark',
-    'Djibouti',
-    'Dominica',
-    'Dominican Republic (the)',
-    'Ecuador',
-    'Egypt',
-    'El Salvador',
-    'Equatorial Guinea',
-    'Eritrea',
-    'Estonia',
-    'Eswatini',
-    'Ethiopia',
-    'Falkland Islands (the) [Malvinas]',
-    'Faroe Islands (the)',
-    'Fiji',
-    'Finland',
-    'France',
-    'French Guiana',
-    'French Polynesia',
-    'French Southern Territories (the)',
-    'Gabon',
-    'Gambia (the)',
-    'Georgia',
-    'Germany',
-    'Ghana',
-    'Gibraltar',
-    'Greece',
-    'Greenland',
-    'Grenada',
-    'Guadeloupe',
-    'Guam',
-    'Guatemala',
-    'Guernsey',
-    'Guinea',
-    'Guinea-Bissau',
-    'Guyana',
-    'Haiti',
-    'Heard Island and McDonald Islands',
-    'Holy See (the)',
-    'Honduras',
-    'Hong Kong',
-    'Hungary',
-    'Iceland',
-    'India',
-    'Indonesia',
-    'Iran (Islamic Republic of)',
-    'Iraq',
-    'Ireland',
-    'Isle of Man',
-    'Israel',
-    'Italy',
-    'Jamaica',
-    'Japan',
-    'Jersey',
-    'Jordan',
-    'Kazakhstan',
-    'Kenya',
-    'Kiribati',
-    "Korea (the Democratic People's Republic of)",
-    'Korea (the Republic of)',
-    'Kuwait',
-    'Kyrgyzstan',
-    "Lao People's Democratic Republic (the)",
-    'Latvia',
-    'Lebanon',
-    'Lesotho',
-    'Liberia',
-    'Libya',
-    'Liechtenstein',
-    'Lithuania',
-    'Luxembourg',
-    'Macao',
-    'Madagascar',
-    'Malawi',
-    'Malaysia',
-    'Maldives',
-    'Mali',
-    'Malta',
-    'Marshall Islands (the)',
-    'Martinique',
-    'Mauritania',
-    'Mauritius',
-    'Mayotte',
-    'Mexico',
-    'Micronesia (Federated States of)',
-    'Moldova (the Republic of)',
-    'Monaco',
-    'Mongolia',
-    'Montenegro',
-    'Montserrat',
-    'Morocco',
-    'Mozambique',
-    'Myanmar',
-    'Namibia',
-    'Nauru',
-    'Nepal',
-    'Netherlands (the)',
-    'New Caledonia',
-    'New Zealand',
-    'Nicaragua',
-    'Niger (the)',
-    'Nigeria',
-    'Niue',
-    'Norfolk Island',
-    'Northern Mariana Islands (the)',
-    'Norway',
-    'Oman',
-    'Pakistan',
-    'Palau',
-    'Palestine, State of',
-    'Panama',
-    'Papua New Guinea',
-    'Paraguay',
-    'Peru',
-    'Philippines (the)',
-    'Pitcairn',
-    'Poland',
-    'Portugal',
-    'Puerto Rico',
-    'Qatar',
-    'Republic of North Macedonia',
-    'Romania',
-    'Russian Federation (the)',
-    'Rwanda',
-    'Réunion',
-    'Saint Barthélemy',
-    'Saint Helena, Ascension and Tristan da Cunha',
-    'Saint Kitts and Nevis',
-    'Saint Lucia',
-    'Saint Martin (French part)',
-    'Saint Pierre and Miquelon',
-    'Saint Vincent and the Grenadines',
-    'Samoa',
-    'San Marino',
-    'Sao Tome and Principe',
-    'Saudi Arabia',
-    'Senegal',
-    'Serbia',
-    'Seychelles',
-    'Sierra Leone',
-    'Singapore',
-    'Sint Maarten (Dutch part)',
-    'Slovakia',
-    'Slovenia',
-    'Solomon Islands',
-    'Somalia',
-    'South Africa',
-    'South Georgia and the South Sandwich Islands',
-    'South Sudan',
-    'Spain',
-    'Sri Lanka',
-    'Sudan (the)',
-    'Suriname',
-    'Svalbard and Jan Mayen',
-    'Sweden',
-    'Switzerland',
-    'Syrian Arab Republic',
-    'Taiwan',
-    'Tajikistan',
-    'Tanzania, United Republic of',
-    'Thailand',
-    'Timor-Leste',
-    'Togo',
-    'Tokelau',
-    'Tonga',
-    'Trinidad and Tobago',
-    'Tunisia',
-    'Turkey',
-    'Turkmenistan',
-    'Turks and Caicos Islands (the)',
-    'Tuvalu',
-    'Uganda',
-    'Ukraine',
-    'United Arab Emirates (the)',
-    'United Kingdom of Great Britain and Northern Ireland (the)',
-    'United States Minor Outlying Islands (the)',
-    'United States of America (the)',
-    'Uruguay',
-    'Uzbekistan',
-    'Vanuatu',
-    'Venezuela (Bolivarian Republic of)',
-    'Viet Nam',
-    'Virgin Islands (British)',
-    'Virgin Islands (U.S.)',
-    'Wallis and Futuna',
-    'Western Sahara',
-    'Yemen',
-    'Zambia',
-    'Zimbabwe',
-    'Åland Islands',
+  "Afghanistan",
+  "Albania",
+  "Algeria",
+  "American Samoa",
+  "Andorra",
+  "Angola",
+  "Anguilla",
+  "Antarctica",
+  "Antigua and Barbuda",
+  "Argentina",
+  "Armenia",
+  "Aruba",
+  "Australia",
+  "Austria",
+  "Azerbaijan",
+  "Bahamas (the)",
+  "Bahrain",
+  "Bangladesh",
+  "Barbados",
+  "Belarus",
+  "Belgium",
+  "Belize",
+  "Benin",
+  "Bermuda",
+  "Bhutan",
+  "Bolivia (Plurinational State of)",
+  "Bonaire, Sint Eustatius and Saba",
+  "Bosnia and Herzegovina",
+  "Botswana",
+  "Bouvet Island",
+  "Brazil",
+  "British Indian Ocean Territory (the)",
+  "Brunei Darussalam",
+  "Bulgaria",
+  "Burkina Faso",
+  "Burundi",
+  "Cabo Verde",
+  "Cambodia",
+  "Cameroon",
+  "Canada",
+  "Cayman Islands (the)",
+  "Central African Republic (the)",
+  "Chad",
+  "Chile",
+  "China",
+  "Christmas Island",
+  "Cocos (Keeling) Islands (the)",
+  "Colombia",
+  "Comoros (the)",
+  "Congo (the Democratic Republic of the)",
+  "Congo (the)",
+  "Cook Islands (the)",
+  "Costa Rica",
+  "Croatia",
+  "Cuba",
+  "Curaçao",
+  "Cyprus",
+  "Czechia",
+  "Côte d'Ivoire",
+  "Denmark",
+  "Djibouti",
+  "Dominica",
+  "Dominican Republic (the)",
+  "Ecuador",
+  "Egypt",
+  "El Salvador",
+  "Equatorial Guinea",
+  "Eritrea",
+  "Estonia",
+  "Eswatini",
+  "Ethiopia",
+  "Falkland Islands (the) [Malvinas]",
+  "Faroe Islands (the)",
+  "Fiji",
+  "Finland",
+  "France",
+  "French Guiana",
+  "French Polynesia",
+  "French Southern Territories (the)",
+  "Gabon",
+  "Gambia (the)",
+  "Georgia",
+  "Germany",
+  "Ghana",
+  "Gibraltar",
+  "Greece",
+  "Greenland",
+  "Grenada",
+  "Guadeloupe",
+  "Guam",
+  "Guatemala",
+  "Guernsey",
+  "Guinea",
+  "Guinea-Bissau",
+  "Guyana",
+  "Haiti",
+  "Heard Island and McDonald Islands",
+  "Holy See (the)",
+  "Honduras",
+  "Hong Kong",
+  "Hungary",
+  "Iceland",
+  "India",
+  "Indonesia",
+  "Iran (Islamic Republic of)",
+  "Iraq",
+  "Ireland",
+  "Isle of Man",
+  "Israel",
+  "Italy",
+  "Jamaica",
+  "Japan",
+  "Jersey",
+  "Jordan",
+  "Kazakhstan",
+  "Kenya",
+  "Kiribati",
+  "Korea (the Democratic People's Republic of)",
+  "Korea (the Republic of)",
+  "Kuwait",
+  "Kyrgyzstan",
+  "Lao People's Democratic Republic (the)",
+  "Latvia",
+  "Lebanon",
+  "Lesotho",
+  "Liberia",
+  "Libya",
+  "Liechtenstein",
+  "Lithuania",
+  "Luxembourg",
+  "Macao",
+  "Madagascar",
+  "Malawi",
+  "Malaysia",
+  "Maldives",
+  "Mali",
+  "Malta",
+  "Marshall Islands (the)",
+  "Martinique",
+  "Mauritania",
+  "Mauritius",
+  "Mayotte",
+  "Mexico",
+  "Micronesia (Federated States of)",
+  "Moldova (the Republic of)",
+  "Monaco",
+  "Mongolia",
+  "Montenegro",
+  "Montserrat",
+  "Morocco",
+  "Mozambique",
+  "Myanmar",
+  "Namibia",
+  "Nauru",
+  "Nepal",
+  "Netherlands (the)",
+  "New Caledonia",
+  "New Zealand",
+  "Nicaragua",
+  "Niger (the)",
+  "Nigeria",
+  "Niue",
+  "Norfolk Island",
+  "Northern Mariana Islands (the)",
+  "Norway",
+  "Oman",
+  "Pakistan",
+  "Palau",
+  "Palestine, State of",
+  "Panama",
+  "Papua New Guinea",
+  "Paraguay",
+  "Peru",
+  "Philippines (the)",
+  "Pitcairn",
+  "Poland",
+  "Portugal",
+  "Puerto Rico",
+  "Qatar",
+  "Republic of North Macedonia",
+  "Romania",
+  "Russian Federation (the)",
+  "Rwanda",
+  "Réunion",
+  "Saint Barthélemy",
+  "Saint Helena, Ascension and Tristan da Cunha",
+  "Saint Kitts and Nevis",
+  "Saint Lucia",
+  "Saint Martin (French part)",
+  "Saint Pierre and Miquelon",
+  "Saint Vincent and the Grenadines",
+  "Samoa",
+  "San Marino",
+  "Sao Tome and Principe",
+  "Saudi Arabia",
+  "Senegal",
+  "Serbia",
+  "Seychelles",
+  "Sierra Leone",
+  "Singapore",
+  "Sint Maarten (Dutch part)",
+  "Slovakia",
+  "Slovenia",
+  "Solomon Islands",
+  "Somalia",
+  "South Africa",
+  "South Georgia and the South Sandwich Islands",
+  "South Sudan",
+  "Spain",
+  "Sri Lanka",
+  "Sudan (the)",
+  "Suriname",
+  "Svalbard and Jan Mayen",
+  "Sweden",
+  "Switzerland",
+  "Syrian Arab Republic",
+  "Taiwan",
+  "Tajikistan",
+  "Tanzania, United Republic of",
+  "Thailand",
+  "Timor-Leste",
+  "Togo",
+  "Tokelau",
+  "Tonga",
+  "Trinidad and Tobago",
+  "Tunisia",
+  "Turkey",
+  "Turkmenistan",
+  "Turks and Caicos Islands (the)",
+  "Tuvalu",
+  "Uganda",
+  "Ukraine",
+  "United Arab Emirates (the)",
+  "United Kingdom of Great Britain and Northern Ireland (the)",
+  "United States Minor Outlying Islands (the)",
+  "United States of America (the)",
+  "Uruguay",
+  "Uzbekistan",
+  "Vanuatu",
+  "Venezuela (Bolivarian Republic of)",
+  "Viet Nam",
+  "Virgin Islands (British)",
+  "Virgin Islands (U.S.)",
+  "Wallis and Futuna",
+  "Western Sahara",
+  "Yemen",
+  "Zambia",
+  "Zimbabwe",
+  "Åland Islands",
 ];
 
 measureFixtureCreation(
-    html`
-        
-            ${countryList.map(
-                (country) => html`
-                    ${country}
-                `
-            )}
-        
-    `,
-    { numRenders: 20 }
+  html`
+    
+      ${countryList.map(
+        (country) => html` ${country} `,
+      )}
+    
+  `,
+  { numRenders: 20 },
 );
diff --git a/packages/picker/test/index.ts b/packages/picker/test/index.ts
index aa96cfbe9e..0727c252bb 100644
--- a/packages/picker/test/index.ts
+++ b/packages/picker/test/index.ts
@@ -10,2092 +10,2034 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import type { Picker } from '@spectrum-web-components/picker';
+import type { Picker } from "@spectrum-web-components/picker";
 
-import type { MenuItem } from '@spectrum-web-components/menu';
+import type { MenuItem } from "@spectrum-web-components/menu";
 import {
-    aTimeout,
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    nextFrame,
-    oneEvent,
-    waitUntil,
-} from '@open-wc/testing';
-import '@spectrum-web-components/shared/src/focus-visible.js';
-import { spy, stub } from 'sinon';
+  aTimeout,
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent,
+  waitUntil,
+} from "@open-wc/testing";
+import "@spectrum-web-components/shared/src/focus-visible.js";
+import { spy, stub } from "sinon";
 import {
-    arrowDownEvent,
-    arrowRightEvent,
-    arrowUpEvent,
-    testForLitDevWarnings,
-    tEvent,
-} from '../../../test/testing-helpers.js';
+  arrowDownEvent,
+  arrowRightEvent,
+  arrowUpEvent,
+  testForLitDevWarnings,
+  tEvent,
+} from "../../../test/testing-helpers.js";
 import {
-    a11ySnapshot,
-    findAccessibilityNode,
-    sendKeys,
-    setViewport,
-} from '@web/test-runner-commands';
+  a11ySnapshot,
+  findAccessibilityNode,
+  sendKeys,
+  setViewport,
+} from "@web/test-runner-commands";
 import {
-    Default,
-    disabled,
-    iconsOnly,
-    noVisibleLabel,
-    slottedLabel,
-    tooltip,
-} from '../stories/picker.stories.js';
-import { M as pending } from '../stories/picker-pending.stories.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
+  Default,
+  disabled,
+  iconsOnly,
+  noVisibleLabel,
+  slottedLabel,
+  tooltip,
+} from "../stories/picker.stories.js";
+import { M as pending } from "../stories/picker-pending.stories.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
 import {
-    ignoreResizeObserverLoopError,
-    fixture as styledFixture,
-} from '../../../test/testing-helpers.js';
-import '@spectrum-web-components/picker/sp-picker.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/menu/sp-menu-group.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import type { Menu } from '@spectrum-web-components/menu';
-import { Tooltip } from '@spectrum-web-components/tooltip';
-import { FieldLabel } from '@spectrum-web-components/field-label/src/FieldLabel.js';
-import { isWebKit } from '@spectrum-web-components/shared';
-import { SAFARI_FOCUS_RING_CLASS } from '@spectrum-web-components/picker/src/MobileController.js';
+  ignoreResizeObserverLoopError,
+  fixture as styledFixture,
+} from "../../../test/testing-helpers.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import type { Menu } from "@spectrum-web-components/menu";
+import { Tooltip } from "@spectrum-web-components/tooltip";
+import { FieldLabel } from "@spectrum-web-components/field-label/src/FieldLabel.js";
+import { isWebKit } from "@spectrum-web-components/shared";
+import { SAFARI_FOCUS_RING_CLASS } from "@spectrum-web-components/picker/src/MobileController.js";
 
 export type TestablePicker = { optionsMenu: Menu };
 
 ignoreResizeObserverLoopError(before, after);
 
 const isMenuActiveElement = function (el: Picker): boolean {
-    return el.shadowRoot.activeElement?.localName === 'sp-menu';
+  return el.shadowRoot.activeElement?.localName === "sp-menu";
 };
 
 export function runPickerTests(): void {
-    let el: Picker;
-    const pickerFixture = async (): Promise => {
-        const test = await fixture(html`
-            
-                Where do you live?
-                
-                    Deselect
-                    Select Inverse
-                    Feather...
-                    Select and Mask...
-                    Save Selection
-                    Make Work Path
-                
-            
-        `);
-
-        return test.querySelector('sp-picker') as Picker;
-    };
-
-    describe('accessibility model', () => {
-        it('accessible with ""', async function () {
-            const test = await fixture(html`
-                

-                    ${Default({
-                        onChange: () => {
-                            return;
-                        },
-                    })}
-                

-            `);
-            const el = test.querySelector('sp-picker') as Picker;
-
-            type NamedNode = { name: string };
-            let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
-
-            expect(
-                findAccessibilityNode(
-                    snapshot,
-                    (node) =>
-                        node.name ===
-                        'Select a Country with a very long label, too long, in fact Where do you live?'
-                ),
-                '`name` is the label text'
-            ).to.not.be.null;
-
-            el.value = 'option-2';
-            await elementUpdated(el);
-            // Allow the snapshot to settle.
-            await nextFrame();
-            await nextFrame();
-            snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
-
-            expect(
-                findAccessibilityNode(
-                    snapshot,
-                    (node) => node.name === 'Select Inverse Where do you live?'
-                ),
-                '`name` is the the selected item text plus the label text'
-            ).to.not.be.null;
-        });
-        it('accessible with "label" attribute', async () => {
-            const test = await fixture(html`
-                

-                    ${noVisibleLabel({
-                        onChange: () => {
-                            return;
-                        },
-                    })}
-                

-            `);
-            const el = test.querySelector('sp-picker') as Picker;
-
-            type NamedNode = { name: string };
-            let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
-
-            expect(
-                findAccessibilityNode(
-                    snapshot,
-                    (node) => node.name === 'Where do you live?'
-                ),
-                '`name` is the label text'
-            ).to.not.be.null;
-
-            el.value = 'option-2';
-            await elementUpdated(el);
-            // Allow the snapshot to settle.
-            await nextFrame();
-            await nextFrame();
-            snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
-
-            expect(
-                findAccessibilityNode(
-                    snapshot,
-                    (node) => node.name === 'Select Inverse Where do you live?'
-                ),
-                '`name` is the the selected item text plus the label text'
-            ).to.not.be.null;
-        });
-        it('accessible with "label" slot', async function () {
-            const test = await fixture(html`
-                

-                    ${slottedLabel({
-                        onChange: () => {
-                            return;
-                        },
-                    })}
-                

-            `);
-            const el = test.querySelector('sp-picker') as Picker;
-
-            await elementUpdated(el);
-            await nextFrame();
-            await nextFrame();
-
-            type NamedNode = { name: string; description: string };
-            let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
-
-            let name = 'Where do you live?';
-
-            let node = findAccessibilityNode(
-                snapshot,
-                (node) => node.name === name
-            );
-
-            expect(
-                node,
-                `node not available: ${JSON.stringify(snapshot, null, '  ')}`
-            ).to.not.be.null;
-
-            el.value = 'option-2';
-            await elementUpdated(el);
-            // Allow the snapshot to settle.
-            await nextFrame();
-            await nextFrame();
-            snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
-
-            name = 'Select Inverse Where do you live?';
-
-            node = findAccessibilityNode(
-                snapshot,
-                (node) => node.name === name
-            );
-
-            expect(
-                node,
-                `node not available: ${JSON.stringify(snapshot, null, '  ')}`
-            ).to.not.be.null;
-        });
+  let el: Picker;
+  const pickerFixture = async (): Promise => {
+    const test = await fixture(html`
+      
+        Where do you live?
+        
+          Deselect
+          Select Inverse
+          Feather...
+          Select and Mask...
+          Save Selection
+          Make Work Path
+        
+      
+    `);
+
+    return test.querySelector("sp-picker") as Picker;
+  };
+
+  describe("accessibility model", () => {
+    it('accessible with ""', async function () {
+      const test = await fixture(html`
+        

+          ${Default({
+            onChange: () => {
+              return;
+            },
+          })}
+        

+      `);
+      const el = test.querySelector("sp-picker") as Picker;
+
+      type NamedNode = { name: string };
+      let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
+
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) =>
+            node.name ===
+            "Select a Country with a very long label, too long, in fact Where do you live?",
+        ),
+        "`name` is the label text",
+      ).to.not.be.null;
+
+      el.value = "option-2";
+      await elementUpdated(el);
+      // Allow the snapshot to settle.
+      await nextFrame();
+      await nextFrame();
+      snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
+
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Select Inverse Where do you live?",
+        ),
+        "`name` is the the selected item text plus the label text",
+      ).to.not.be.null;
     });
-    describe('standard', () => {
-        beforeEach(async () => {
-            el = await pickerFixture();
-            await elementUpdated(el);
-            await nextFrame();
-            await nextFrame();
-        });
-        it('loads accessibly', async () => {
-            await expect(el).to.be.accessible();
-        });
-        it('closes accessibly', async () => {
-            el.focus();
-            await elementUpdated(el);
-            expect(el.shadowRoot.activeElement).to.equal(el.button);
-            const opened = oneEvent(el, 'sp-opened');
-
-            el.open = true;
-            await opened;
-
-            expect(el.open).to.be.true;
-            const accessibleCloseButton = el.shadowRoot.querySelector(
-                '.visually-hidden button'
-            ) as HTMLButtonElement;
-
-            expect(accessibleCloseButton).to.have.attribute(
-                'aria-label',
-                'Dismiss'
-            );
+    it('accessible with "label" attribute', async () => {
+      const test = await fixture(html`
+        

+          ${noVisibleLabel({
+            onChange: () => {
+              return;
+            },
+          })}
+        

+      `);
+      const el = test.querySelector("sp-picker") as Picker;
+
+      type NamedNode = { name: string };
+      let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
+
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Where do you live?",
+        ),
+        "`name` is the label text",
+      ).to.not.be.null;
+
+      el.value = "option-2";
+      await elementUpdated(el);
+      // Allow the snapshot to settle.
+      await nextFrame();
+      await nextFrame();
+      snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
+
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Select Inverse Where do you live?",
+        ),
+        "`name` is the the selected item text plus the label text",
+      ).to.not.be.null;
+    });
+    it('accessible with "label" slot', async function () {
+      const test = await fixture(html`
+        

+          ${slottedLabel({
+            onChange: () => {
+              return;
+            },
+          })}
+        

+      `);
+      const el = test.querySelector("sp-picker") as Picker;
+
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+
+      type NamedNode = { name: string; description: string };
+      let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
+
+      let name = "Where do you live?";
+
+      let node = findAccessibilityNode(
+        snapshot,
+        (node) => node.name === name,
+      );
+
+      expect(
+        node,
+        `node not available: ${JSON.stringify(snapshot, null, "  ")}`,
+      ).to.not.be.null;
+
+      el.value = "option-2";
+      await elementUpdated(el);
+      // Allow the snapshot to settle.
+      await nextFrame();
+      await nextFrame();
+      snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
+
+      name = "Select Inverse Where do you live?";
+
+      node = findAccessibilityNode(
+        snapshot,
+        (node) => node.name === name,
+      );
+
+      expect(
+        node,
+        `node not available: ${JSON.stringify(snapshot, null, "  ")}`,
+      ).to.not.be.null;
+    });
+  });
+  describe("standard", () => {
+    beforeEach(async () => {
+      el = await pickerFixture();
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+    });
+    it("loads accessibly", async () => {
+      await expect(el).to.be.accessible();
+    });
+    it("closes accessibly", async () => {
+      el.focus();
+      await elementUpdated(el);
+      expect(el.shadowRoot.activeElement).to.equal(el.button);
+      const opened = oneEvent(el, "sp-opened");
 
-            const closed = oneEvent(el, 'sp-closed');
+      el.open = true;
+      await opened;
 
-            accessibleCloseButton.click();
-            await closed;
+      expect(el.open).to.be.true;
+      const accessibleCloseButton = el.shadowRoot.querySelector(
+        ".visually-hidden button",
+      ) as HTMLButtonElement;
 
-            await elementUpdated(el);
+      expect(accessibleCloseButton).to.have.attribute("aria-label", "Dismiss");
 
-            expect(el.open).to.be.false;
-            expect(el.shadowRoot.activeElement).to.equal(el.button);
-            expect(document.activeElement).to.eq(el);
-        });
-        it('accepts new selected item content', async () => {
-            await nextFrame();
-            await nextFrame();
-            const option2 = el.querySelector('[value="option-2"') as MenuItem;
-
-            el.value = 'option-2';
-            await elementUpdated(option2);
-            await elementUpdated(el);
-            await aTimeout(150);
-            expect(el.value).to.equal('option-2');
-            expect((el.button.textContent || '').trim()).to.include(
-                'Select Inverse'
-            );
-            let itemUpdated = oneEvent(el, 'sp-menu-item-added-or-updated');
-            const newLabel1 = 'Invert Selection';
-
-            option2.innerHTML = newLabel1;
-            await itemUpdated;
-            await elementUpdated(el);
-            expect(el.value).to.equal('option-2');
-            expect((el.button.textContent || '').trim()).to.include(newLabel1);
-            itemUpdated = oneEvent(el, 'sp-menu-item-added-or-updated');
-            const newLabel2 = 'Other option';
-
-            option2.childNodes[0].textContent = newLabel2;
-            await itemUpdated;
-            await elementUpdated(el);
-            expect(el.value).to.equal('option-2');
-            expect((el.button.textContent || '').trim()).to.include(newLabel2);
-        });
-        it('accepts new selected item content when open', async () => {
-            await nextFrame();
-            const option2 = el.querySelector('[value="option-2"') as MenuItem;
-
-            el.value = 'option-2';
-            await elementUpdated(el);
-            await aTimeout(150);
-            expect(el.value).to.equal('option-2');
-            expect((el.button.textContent || '').trim()).to.include(
-                'Select Inverse'
-            );
-            const opened = oneEvent(el, 'sp-opened');
-
-            el.open = true;
-            await opened;
-            const itemUpdated = oneEvent(
-                option2,
-                'sp-menu-item-added-or-updated'
-            );
-
-            option2.innerHTML = 'Invert Selection';
-            await itemUpdated;
-            await elementUpdated(el);
-            await aTimeout(150);
-            expect(el.value).to.equal('option-2');
-            expect((el.button.textContent || '').trim()).to.include(
-                'Invert Selection'
-            );
-        });
-        it('unsets value when children removed', async () => {
-            await nextFrame();
-            el.value = 'option-2';
-
-            await elementUpdated(el);
-            await aTimeout(150);
-            expect(el.value).to.equal('option-2');
-            expect((el.button.textContent || '').trim()).to.include(
-                'Select Inverse'
-            );
-
-            const items = el.querySelectorAll('sp-menu-item');
-
-            items.forEach((item) => {
-                item.remove();
-            });
-            await elementUpdated(el);
-            await nextFrame();
-            await aTimeout(150);
-            expect(
-                (el as unknown as TestablePicker).optionsMenu.childItems.length
-            ).to.equal(0);
-
-            if ('showPopover' in document.createElement('div')) {
-                return;
-            }
-
-            expect(el.value).to.equal('');
-            expect((el.button.textContent || '').trim()).to.not.include(
-                'Select Inverse'
-            );
-        });
-        it('accepts a new item and value at the same time', async () => {
-            el.value = 'option-2';
+      const closed = oneEvent(el, "sp-closed");
 
-            await elementUpdated(el);
-            expect(el.value).to.equal('option-2');
+      accessibleCloseButton.click();
+      await closed;
 
-            const item = document.createElement('sp-menu-item');
+      await elementUpdated(el);
 
-            item.value = 'option-new';
-            item.textContent = 'New Option';
+      expect(el.open).to.be.false;
+      expect(el.shadowRoot.activeElement).to.equal(el.button);
+      expect(document.activeElement).to.eq(el);
+    });
+    it("accepts new selected item content", async () => {
+      await nextFrame();
+      await nextFrame();
+      const option2 = el.querySelector('[value="option-2"') as MenuItem;
+
+      el.value = "option-2";
+      await elementUpdated(option2);
+      await elementUpdated(el);
+      await aTimeout(150);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include("Select Inverse");
+      let itemUpdated = oneEvent(el, "sp-menu-item-added-or-updated");
+      const newLabel1 = "Invert Selection";
+
+      option2.innerHTML = newLabel1;
+      await itemUpdated;
+      await elementUpdated(el);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include(newLabel1);
+      itemUpdated = oneEvent(el, "sp-menu-item-added-or-updated");
+      const newLabel2 = "Other option";
+
+      option2.childNodes[0].textContent = newLabel2;
+      await itemUpdated;
+      await elementUpdated(el);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include(newLabel2);
+    });
+    it("accepts new selected item content when open", async () => {
+      await nextFrame();
+      const option2 = el.querySelector('[value="option-2"') as MenuItem;
+
+      el.value = "option-2";
+      await elementUpdated(el);
+      await aTimeout(150);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include("Select Inverse");
+      const opened = oneEvent(el, "sp-opened");
+
+      el.open = true;
+      await opened;
+      const itemUpdated = oneEvent(option2, "sp-menu-item-added-or-updated");
+
+      option2.innerHTML = "Invert Selection";
+      await itemUpdated;
+      await elementUpdated(el);
+      await aTimeout(150);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include(
+        "Invert Selection",
+      );
+    });
+    it("unsets value when children removed", async () => {
+      await nextFrame();
+      el.value = "option-2";
+
+      await elementUpdated(el);
+      await aTimeout(150);
+      expect(el.value).to.equal("option-2");
+      expect((el.button.textContent || "").trim()).to.include("Select Inverse");
+
+      const items = el.querySelectorAll("sp-menu-item");
+
+      items.forEach((item) => {
+        item.remove();
+      });
+      await elementUpdated(el);
+      await nextFrame();
+      await aTimeout(150);
+      expect(
+        (el as unknown as TestablePicker).optionsMenu.childItems.length,
+      ).to.equal(0);
+
+      if ("showPopover" in document.createElement("div")) {
+        return;
+      }
+
+      expect(el.value).to.equal("");
+      expect((el.button.textContent || "").trim()).to.not.include(
+        "Select Inverse",
+      );
+    });
+    it("accepts a new item and value at the same time", async () => {
+      el.value = "option-2";
 
-            el.append(item);
-            await elementUpdated(el);
+      await elementUpdated(el);
+      expect(el.value).to.equal("option-2");
 
-            el.value = 'option-new';
+      const item = document.createElement("sp-menu-item");
 
-            await elementUpdated(el);
-            expect(el.value).to.equal('option-new');
-        });
-        it('accepts a new item that can be selected', async () => {
-            el.value = 'option-2';
+      item.value = "option-new";
+      item.textContent = "New Option";
 
-            await elementUpdated(el);
-            expect(el.value).to.equal('option-2');
-            const item = document.createElement('sp-menu-item');
+      el.append(item);
+      await elementUpdated(el);
 
-            item.value = 'option-new';
-            item.textContent = 'New Option';
+      el.value = "option-new";
 
-            el.append(item);
-            await nextFrame();
-            await elementUpdated(el);
+      await elementUpdated(el);
+      expect(el.value).to.equal("option-new");
+    });
+    it("accepts a new item that can be selected", async () => {
+      el.value = "option-2";
 
-            let opened = oneEvent(el, 'sp-opened');
+      await elementUpdated(el);
+      expect(el.value).to.equal("option-2");
+      const item = document.createElement("sp-menu-item");
 
-            el.open = true;
-            await opened;
-            // Overlaid content is outside of the context of the Picker element
-            // and cannot be managed via its updateComplete cycle.
-            await nextFrame();
+      item.value = "option-new";
+      item.textContent = "New Option";
 
-            const close = oneEvent(el, 'sp-closed');
+      el.append(item);
+      await nextFrame();
+      await elementUpdated(el);
 
-            item.click();
-            await close;
-            // Overlaid content is outside of the context of the Picker element
-            // and cannot be managed via its updateComplete cycle.
-            await nextFrame();
+      let opened = oneEvent(el, "sp-opened");
 
-            expect(el.value, 'first time').to.equal('option-new');
+      el.open = true;
+      await opened;
+      // Overlaid content is outside of the context of the Picker element
+      // and cannot be managed via its updateComplete cycle.
+      await nextFrame();
 
-            opened = oneEvent(el, 'sp-opened');
-            el.open = true;
-            await opened;
-            // Overlaid content is outside of the context of the Picker element
-            // and cannot be managed via its updateComplete cycle.
-            await nextFrame();
+      const close = oneEvent(el, "sp-closed");
 
-            expect(el.value, 'second time').to.equal('option-new');
-        });
-        it('manages its "name" value in the accessibility tree', async () => {
-            await nextFrame();
-            type NamedNode = { name: string };
-            let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
-
-            expect(
-                findAccessibilityNode(
-                    snapshot,
-                    (node) => node.name === 'Where do you live?'
-                ),
-                '`name` is the label text'
-            ).to.not.be.null;
-
-            el.value = 'option-2';
-            await elementUpdated(el);
-            await nextFrame();
-            await nextFrame();
-            snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
-
-            expect(
-                findAccessibilityNode(
-                    snapshot,
-                    (node) => node.name === 'Select Inverse Where do you live?'
-                ),
-                '`name` is the selected item text plus the label text'
-            ).to.not.be.null;
-        });
-        it('manages `aria-activedescendant`', async () => {
-            const firstItem = el.querySelector('sp-menu-item:nth-child(1)');
-            const secondItem = el.querySelector('sp-menu-item:nth-child(2)');
-            const opened = oneEvent(el, 'sp-opened');
-
-            el.open = true;
-            await opened;
-            expect(
-                (el as unknown as TestablePicker).optionsMenu.getAttribute(
-                    'aria-activedescendant'
-                )
-            ).to.equal(firstItem?.id);
-            await sendKeys({ press: 'ArrowDown' });
-            await elementUpdated(el);
-            expect(
-                (el as unknown as TestablePicker).optionsMenu.getAttribute(
-                    'aria-activedescendant'
-                )
-            ).to.equal(secondItem?.id);
-        });
-        it('renders invalid accessibly', async () => {
-            el.invalid = true;
-            await elementUpdated(el);
+      item.click();
+      await close;
+      // Overlaid content is outside of the context of the Picker element
+      // and cannot be managed via its updateComplete cycle.
+      await nextFrame();
 
-            expect(el.invalid).to.be.true;
-            await expect(el).to.be.accessible();
-        });
-        it('renders selection accessibly', async () => {
-            el.value = 'option-2';
-            await elementUpdated(el);
+      expect(el.value, "first time").to.equal("option-new");
 
-            await expect(el).to.be.accessible();
-        });
-        it('opens with visible focus on a menu item on `DownArrow`', async () => {
-            const firstItem = el.querySelector('sp-menu-item') as MenuItem;
-
-            await elementUpdated(el);
-
-            expect(firstItem.focused, 'should not visually focused').to.be
-                .false;
-
-            el.focus();
-            await elementUpdated(el);
-            const opened = oneEvent(el, 'sp-opened');
-
-            await sendKeys({ press: 'ArrowRight' });
-            await sendKeys({ press: 'ArrowLeft' });
-            await sendKeys({ press: 'ArrowDown' });
-            await opened;
-
-            expect(el.open).to.be.true;
-            expect(firstItem.focused, 'should be visually focused').to.be.true;
-
-            const closed = oneEvent(el, 'sp-closed');
-
-            await sendKeys({
-                press: 'Escape',
-            });
-            await closed;
-
-            expect(el.open).to.be.false;
-            expect(
-                document.activeElement === el,
-                `focused ${document.activeElement?.localName} instead of back on Picker`
-            ).to.be.true;
-            expect(
-                el.shadowRoot.activeElement === el.button,
-                `focused ${el.shadowRoot.activeElement?.localName} instead of back on button`
-            ).to.be.true;
-            await waitUntil(
-                () => !firstItem.focused,
-                'finally, not visually focused'
-            );
-        });
-        it('opens with visible focus on a menu item on `Space`', async function () {
-            const firstItem = el.querySelector('sp-menu-item') as MenuItem;
-
-            await elementUpdated(el);
-
-            expect(firstItem.focused, 'should not visually focused').to.be
-                .false;
-
-            el.focus();
-            await elementUpdated(el);
-            const opened = oneEvent(el, 'sp-opened');
-
-            await sendKeys({ press: 'ArrowRight' });
-            await sendKeys({ press: 'ArrowLeft' });
-            await sendKeys({ press: 'Space' });
-            await opened;
-
-            expect(el.open).to.be.true;
-            expect(firstItem.focused, 'should be visually focused').to.be.true;
-
-            const closed = oneEvent(el, 'sp-closed');
-
-            await sendKeys({
-                press: 'Escape',
-            });
-            await closed;
-
-            expect(el.open).to.be.false;
-            expect(
-                document.activeElement === el,
-                `focused ${document.activeElement?.localName} instead of back on Picker`
-            ).to.be.true;
-            expect(
-                el.shadowRoot.activeElement === el.button,
-                `focused ${el.shadowRoot.activeElement?.localName} instead of back on button`
-            ).to.be.true;
-            await waitUntil(
-                () => !firstItem.focused,
-                'finally, not visually focused'
-            );
-        });
-        it('opens, on click, without visible focus on a menu item', async () => {
-            await nextFrame();
-            await nextFrame();
-            const firstItem = el.querySelector('sp-menu-item') as MenuItem;
-            const boundingRect = el.button.getBoundingClientRect();
-
-            expect(firstItem.focused, 'not visually focused').to.be.false;
-            const opened = oneEvent(el, 'sp-opened');
-
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await opened;
-
-            expect(el.open).to.be.true;
-            expect(firstItem.focused, 'still not visually focused').to.be.false;
-        });
-        it('opens and selects in a single pointer button interaction', async () => {
-            await nextFrame();
-            await nextFrame();
-            const thirdItem = el.querySelector(
-                'sp-menu-item:nth-of-type(3)'
-            ) as MenuItem;
-            const boundingRect = el.button.getBoundingClientRect();
-
-            expect(el.value).to.not.equal(thirdItem.value);
-            const opened = oneEvent(el, 'sp-opened');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                    {
-                        type: 'down',
-                    },
-                ],
-            });
-            await opened;
-
-            const thirdItemRect = thirdItem.getBoundingClientRect();
-            const closed = oneEvent(el, 'sp-closed');
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            thirdItemRect.x + thirdItemRect.width / 2,
-                            thirdItemRect.y + thirdItemRect.height / 2,
-                        ],
-                    },
-                    {
-                        type: 'up',
-                    },
-                ],
-            });
-            await closed;
-
-            expect(el.open).to.be.false;
-            expect(el.value).to.equal(thirdItem.value);
-        });
-        it('opens/closes multiple times', async () => {
-            await nextFrame();
-            await nextFrame();
-            expect(el.open).to.be.false;
-            const boundingRect = el.button.getBoundingClientRect();
-            let opened = oneEvent(el, 'sp-opened');
-
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await opened;
-            expect(el.open).to.be.true;
-
-            let closed = oneEvent(el, 'sp-closed');
-
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await closed;
-            expect(el.open).to.be.false;
-
-            opened = oneEvent(el, 'sp-opened');
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await opened;
-            expect(el.open).to.be.true;
-
-            closed = oneEvent(el, 'sp-closed');
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            await closed;
-            expect(el.open).to.be.false;
-        });
-        it('closes when becoming disabled', async () => {
-            expect(el.open).to.be.false;
-            el.click();
-            await elementUpdated(el);
+      opened = oneEvent(el, "sp-opened");
+      el.open = true;
+      await opened;
+      // Overlaid content is outside of the context of the Picker element
+      // and cannot be managed via its updateComplete cycle.
+      await nextFrame();
 
-            expect(el.open).to.be.true;
-            el.disabled = true;
-            await elementUpdated(el);
+      expect(el.value, "second time").to.equal("option-new");
+    });
+    it('manages its "name" value in the accessibility tree', async () => {
+      await nextFrame();
+      type NamedNode = { name: string };
+      let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
+
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Where do you live?",
+        ),
+        "`name` is the label text",
+      ).to.not.be.null;
+
+      el.value = "option-2";
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+      snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
+
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) => node.name === "Select Inverse Where do you live?",
+        ),
+        "`name` is the selected item text plus the label text",
+      ).to.not.be.null;
+    });
+    it("manages `aria-activedescendant`", async () => {
+      const firstItem = el.querySelector("sp-menu-item:nth-child(1)");
+      const secondItem = el.querySelector("sp-menu-item:nth-child(2)");
+      const opened = oneEvent(el, "sp-opened");
+
+      el.open = true;
+      await opened;
+      expect(
+        (el as unknown as TestablePicker).optionsMenu.getAttribute(
+          "aria-activedescendant",
+        ),
+      ).to.equal(firstItem?.id);
+      await sendKeys({ press: "ArrowDown" });
+      await elementUpdated(el);
+      expect(
+        (el as unknown as TestablePicker).optionsMenu.getAttribute(
+          "aria-activedescendant",
+        ),
+      ).to.equal(secondItem?.id);
+    });
+    it("renders invalid accessibly", async () => {
+      el.invalid = true;
+      await elementUpdated(el);
 
-            expect(el.open).to.be.false;
-        });
-        it('closes when clicking away', async () => {
-            el.id = 'closing';
-            const other = document.createElement('div');
+      expect(el.invalid).to.be.true;
+      await expect(el).to.be.accessible();
+    });
+    it("renders selection accessibly", async () => {
+      el.value = "option-2";
+      await elementUpdated(el);
 
-            document.body.append(other);
+      await expect(el).to.be.accessible();
+    });
+    it("opens with visible focus on a menu item on `DownArrow`", async () => {
+      const firstItem = el.querySelector("sp-menu-item") as MenuItem;
+
+      await elementUpdated(el);
+
+      expect(firstItem.focused, "should not visually focused").to.be.false;
+
+      el.focus();
+      await elementUpdated(el);
+      const opened = oneEvent(el, "sp-opened");
+
+      await sendKeys({ press: "ArrowRight" });
+      await sendKeys({ press: "ArrowLeft" });
+      await sendKeys({ press: "ArrowDown" });
+      await opened;
+
+      expect(el.open).to.be.true;
+      expect(firstItem.focused, "should be visually focused").to.be.true;
+
+      const closed = oneEvent(el, "sp-closed");
+
+      await sendKeys({
+        press: "Escape",
+      });
+      await closed;
+
+      expect(el.open).to.be.false;
+      expect(
+        document.activeElement === el,
+        `focused ${document.activeElement?.localName} instead of back on Picker`,
+      ).to.be.true;
+      expect(
+        el.shadowRoot.activeElement === el.button,
+        `focused ${el.shadowRoot.activeElement?.localName} instead of back on button`,
+      ).to.be.true;
+      await waitUntil(
+        () => !firstItem.focused,
+        "finally, not visually focused",
+      );
+    });
+    it("opens with visible focus on a menu item on `Space`", async function () {
+      const firstItem = el.querySelector("sp-menu-item") as MenuItem;
+
+      await elementUpdated(el);
+
+      expect(firstItem.focused, "should not visually focused").to.be.false;
+
+      el.focus();
+      await elementUpdated(el);
+      const opened = oneEvent(el, "sp-opened");
+
+      await sendKeys({ press: "ArrowRight" });
+      await sendKeys({ press: "ArrowLeft" });
+      await sendKeys({ press: "Space" });
+      await opened;
+
+      expect(el.open).to.be.true;
+      expect(firstItem.focused, "should be visually focused").to.be.true;
+
+      const closed = oneEvent(el, "sp-closed");
+
+      await sendKeys({
+        press: "Escape",
+      });
+      await closed;
+
+      expect(el.open).to.be.false;
+      expect(
+        document.activeElement === el,
+        `focused ${document.activeElement?.localName} instead of back on Picker`,
+      ).to.be.true;
+      expect(
+        el.shadowRoot.activeElement === el.button,
+        `focused ${el.shadowRoot.activeElement?.localName} instead of back on button`,
+      ).to.be.true;
+      await waitUntil(
+        () => !firstItem.focused,
+        "finally, not visually focused",
+      );
+    });
+    it("opens, on click, without visible focus on a menu item", async () => {
+      await nextFrame();
+      await nextFrame();
+      const firstItem = el.querySelector("sp-menu-item") as MenuItem;
+      const boundingRect = el.button.getBoundingClientRect();
+
+      expect(firstItem.focused, "not visually focused").to.be.false;
+      const opened = oneEvent(el, "sp-opened");
+
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await opened;
+
+      expect(el.open).to.be.true;
+      expect(firstItem.focused, "still not visually focused").to.be.false;
+    });
+    it("opens and selects in a single pointer button interaction", async () => {
+      await nextFrame();
+      await nextFrame();
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)",
+      ) as MenuItem;
+      const boundingRect = el.button.getBoundingClientRect();
+
+      expect(el.value).to.not.equal(thirdItem.value);
+      const opened = oneEvent(el, "sp-opened");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+          {
+            type: "down",
+          },
+        ],
+      });
+      await opened;
+
+      const thirdItemRect = thirdItem.getBoundingClientRect();
+      const closed = oneEvent(el, "sp-closed");
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              thirdItemRect.x + thirdItemRect.width / 2,
+              thirdItemRect.y + thirdItemRect.height / 2,
+            ],
+          },
+          {
+            type: "up",
+          },
+        ],
+      });
+      await closed;
+
+      expect(el.open).to.be.false;
+      expect(el.value).to.equal(thirdItem.value);
+    });
+    it("opens/closes multiple times", async () => {
+      await nextFrame();
+      await nextFrame();
+      expect(el.open).to.be.false;
+      const boundingRect = el.button.getBoundingClientRect();
+      let opened = oneEvent(el, "sp-opened");
+
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await opened;
+      expect(el.open).to.be.true;
+
+      let closed = oneEvent(el, "sp-closed");
+
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await closed;
+      expect(el.open).to.be.false;
+
+      opened = oneEvent(el, "sp-opened");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await opened;
+      expect(el.open).to.be.true;
+
+      closed = oneEvent(el, "sp-closed");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      await closed;
+      expect(el.open).to.be.false;
+    });
+    it("closes when becoming disabled", async () => {
+      expect(el.open).to.be.false;
+      el.click();
+      await elementUpdated(el);
 
-            await elementUpdated(el);
+      expect(el.open).to.be.true;
+      el.disabled = true;
+      await elementUpdated(el);
 
-            expect(el.open).to.be.false;
-            const opened = oneEvent(el, 'sp-opened');
+      expect(el.open).to.be.false;
+    });
+    it("closes when clicking away", async () => {
+      el.id = "closing";
+      const other = document.createElement("div");
 
-            el.click();
-            await opened;
-            await elementUpdated(el);
+      document.body.append(other);
 
-            expect(el.open).to.be.true;
-            const closed = oneEvent(el, 'sp-closed');
+      await elementUpdated(el);
 
-            other.click();
-            closed;
-            await elementUpdated(el);
+      expect(el.open).to.be.false;
+      const opened = oneEvent(el, "sp-opened");
 
-            other.remove();
-        });
-        it('selects', async () => {
-            const secondItem = el.querySelector(
-                'sp-menu-item:nth-of-type(2)'
-            ) as MenuItem;
+      el.click();
+      await opened;
+      await elementUpdated(el);
 
-            const opened = oneEvent(el, 'sp-opened');
+      expect(el.open).to.be.true;
+      const closed = oneEvent(el, "sp-closed");
 
-            el.click();
-            await opened;
+      other.click();
+      closed;
+      await elementUpdated(el);
 
-            expect(el.open).to.be.true;
-            expect(el.selectedItem?.itemText).to.be.undefined;
-            expect(el.value).to.equal('');
+      other.remove();
+    });
+    it("selects", async () => {
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)",
+      ) as MenuItem;
 
-            const closed = oneEvent(el, 'sp-closed');
+      const opened = oneEvent(el, "sp-opened");
 
-            secondItem.click();
-            await closed;
+      el.click();
+      await opened;
 
-            expect(el.open).to.be.false;
-            expect(el.selectedItem?.itemText).to.equal('Select Inverse');
-            expect(el.value).to.equal('option-2');
-        });
-        it('re-selects', async () => {
-            const firstItem = el.querySelector(
-                'sp-menu-item:nth-of-type(1)'
-            ) as MenuItem;
-            const secondItem = el.querySelector(
-                'sp-menu-item:nth-of-type(2)'
-            ) as MenuItem;
+      expect(el.open).to.be.true;
+      expect(el.selectedItem?.itemText).to.be.undefined;
+      expect(el.value).to.equal("");
 
-            let opened = oneEvent(el, 'sp-opened');
+      const closed = oneEvent(el, "sp-closed");
 
-            el.click();
-            await opened;
+      secondItem.click();
+      await closed;
 
-            expect(el.open).to.be.true;
-            expect(el.selectedItem?.itemText).to.be.undefined;
-            expect(el.value).to.equal('');
+      expect(el.open).to.be.false;
+      expect(el.selectedItem?.itemText).to.equal("Select Inverse");
+      expect(el.value).to.equal("option-2");
+    });
+    it("re-selects", async () => {
+      const firstItem = el.querySelector(
+        "sp-menu-item:nth-of-type(1)",
+      ) as MenuItem;
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)",
+      ) as MenuItem;
 
-            let closed = oneEvent(el, 'sp-closed');
+      let opened = oneEvent(el, "sp-opened");
 
-            secondItem.click();
-            await closed;
+      el.click();
+      await opened;
 
-            expect(el.open).to.be.false;
-            expect(el.selectedItem?.itemText).to.equal('Select Inverse');
-            expect(el.value).to.equal('option-2');
+      expect(el.open).to.be.true;
+      expect(el.selectedItem?.itemText).to.be.undefined;
+      expect(el.value).to.equal("");
 
-            opened = oneEvent(el, 'sp-opened');
-            el.click();
-            await opened;
+      let closed = oneEvent(el, "sp-closed");
 
-            expect(el.open).to.be.true;
-            expect(el.selectedItem?.itemText).to.equal('Select Inverse');
-            expect(el.value).to.equal('option-2');
+      secondItem.click();
+      await closed;
 
-            closed = oneEvent(el, 'sp-closed');
-            firstItem.click();
-            await closed;
+      expect(el.open).to.be.false;
+      expect(el.selectedItem?.itemText).to.equal("Select Inverse");
+      expect(el.value).to.equal("option-2");
 
-            expect(el.open).to.be.false;
-            expect(el.selectedItem?.itemText).to.equal('Deselect');
-            expect(el.value).to.equal('Deselect');
-        });
-        it('dispatches bubbling and composed events', async () => {
-            const changeSpy = spy();
-            const parent = el.parentElement as HTMLElement;
+      opened = oneEvent(el, "sp-opened");
+      el.click();
+      await opened;
 
-            (parent.shadowRoot as ShadowRoot).append(el);
-            const secondItem = el.querySelector(
-                'sp-menu-item:nth-of-type(2)'
-            ) as MenuItem;
+      expect(el.open).to.be.true;
+      expect(el.selectedItem?.itemText).to.equal("Select Inverse");
+      expect(el.value).to.equal("option-2");
 
-            parent.addEventListener('change', () => changeSpy());
+      closed = oneEvent(el, "sp-closed");
+      firstItem.click();
+      await closed;
 
-            expect(el.value).to.equal('');
+      expect(el.open).to.be.false;
+      expect(el.selectedItem?.itemText).to.equal("Deselect");
+      expect(el.value).to.equal("Deselect");
+    });
+    it("dispatches bubbling and composed events", async () => {
+      const changeSpy = spy();
+      const parent = el.parentElement as HTMLElement;
 
-            const opened = oneEvent(el, 'sp-opened');
+      (parent.shadowRoot as ShadowRoot).append(el);
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)",
+      ) as MenuItem;
 
-            el.open = true;
-            await opened;
+      parent.addEventListener("change", () => changeSpy());
 
-            const closed = oneEvent(el, 'sp-closed');
+      expect(el.value).to.equal("");
 
-            secondItem.click();
-            await closed;
+      const opened = oneEvent(el, "sp-opened");
 
-            expect(el.value).to.equal(secondItem.value);
-            expect(changeSpy.calledOnce).to.be.true;
-        });
-        it('can have selection prevented', async () => {
-            const preventChangeSpy = spy();
-            const secondItem = el.querySelector(
-                'sp-menu-item:nth-of-type(2)'
-            ) as MenuItem;
-
-            const opened = oneEvent(el, 'sp-opened');
-
-            el.click();
-            await opened;
-
-            expect(el.open).to.be.true;
-            expect(el.selectedItem?.itemText).to.be.undefined;
-            expect(el.value).to.equal('');
-            expect(secondItem.selected).to.be.false;
-
-            el.addEventListener('change', (event: Event): void => {
-                event.preventDefault();
-                preventChangeSpy();
-            });
-
-            const changed = oneEvent(el, 'change');
-
-            secondItem.click();
-            // The `change` event is dispatched _after_ the `updateComplete` promise.
-            await changed;
-            expect(
-                preventChangeSpy.calledOnce,
-                preventChangeSpy.callCount.toString()
-            ).to.be.true;
-            expect(secondItem.selected, 'selection prevented').to.be.false;
-            expect(el.open).to.be.true;
-        });
-        it('can throw focus after `change`', async () => {
-            const input = document.createElement('input');
+      el.open = true;
+      await opened;
 
-            document.body.append(input);
+      const closed = oneEvent(el, "sp-closed");
 
-            await elementUpdated(el);
+      secondItem.click();
+      await closed;
 
-            const secondItem = el.querySelector(
-                'sp-menu-item:nth-of-type(2)'
-            ) as MenuItem;
+      expect(el.value).to.equal(secondItem.value);
+      expect(changeSpy.calledOnce).to.be.true;
+    });
+    it("can have selection prevented", async () => {
+      const preventChangeSpy = spy();
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)",
+      ) as MenuItem;
+
+      const opened = oneEvent(el, "sp-opened");
+
+      el.click();
+      await opened;
+
+      expect(el.open).to.be.true;
+      expect(el.selectedItem?.itemText).to.be.undefined;
+      expect(el.value).to.equal("");
+      expect(secondItem.selected).to.be.false;
+
+      el.addEventListener("change", (event: Event): void => {
+        event.preventDefault();
+        preventChangeSpy();
+      });
+
+      const changed = oneEvent(el, "change");
+
+      secondItem.click();
+      // The `change` event is dispatched _after_ the `updateComplete` promise.
+      await changed;
+      expect(preventChangeSpy.calledOnce, preventChangeSpy.callCount.toString())
+        .to.be.true;
+      expect(secondItem.selected, "selection prevented").to.be.false;
+      expect(el.open).to.be.true;
+    });
+    it("can throw focus after `change`", async () => {
+      const input = document.createElement("input");
 
-            const opened = oneEvent(el, 'sp-opened');
+      document.body.append(input);
 
-            el.click();
-            await opened;
-            await elementUpdated(el);
+      await elementUpdated(el);
 
-            expect(el.open).to.be.true;
-            expect(el.selectedItem?.itemText).to.be.undefined;
-            expect(el.value).to.equal('');
-            expect(secondItem.selected).to.be.false;
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)",
+      ) as MenuItem;
 
-            el.addEventListener('change', (): void => {
-                input.focus();
-            });
+      const opened = oneEvent(el, "sp-opened");
 
-            const closed = oneEvent(el, 'sp-closed');
+      el.click();
+      await opened;
+      await elementUpdated(el);
 
-            secondItem.click();
-            await closed;
-            await elementUpdated(el);
+      expect(el.open).to.be.true;
+      expect(el.selectedItem?.itemText).to.be.undefined;
+      expect(el.value).to.equal("");
+      expect(secondItem.selected).to.be.false;
 
-            expect(el.open).to.be.false;
-            expect(el.value, 'value changed').to.equal('option-2');
-            expect(secondItem.selected, 'selected changed').to.be.true;
-            await waitUntil(
-                () => document.activeElement === input,
-                'focus throw'
-            );
-            input.remove();
-        });
-        it('opens on ArrowUp', async () => {
-            const button = el.button as HTMLButtonElement;
+      el.addEventListener("change", (): void => {
+        input.focus();
+      });
 
-            el.focus();
-            await elementUpdated(el);
+      const closed = oneEvent(el, "sp-closed");
 
-            expect(el.open, 'inially closed').to.be.false;
+      secondItem.click();
+      await closed;
+      await elementUpdated(el);
 
-            button.dispatchEvent(tEvent());
-            await elementUpdated(el);
+      expect(el.open).to.be.false;
+      expect(el.value, "value changed").to.equal("option-2");
+      expect(secondItem.selected, "selected changed").to.be.true;
+      await waitUntil(() => document.activeElement === input, "focus throw");
+      input.remove();
+    });
+    it("opens on ArrowUp", async () => {
+      const button = el.button as HTMLButtonElement;
 
-            expect(el.open, 'still closed').to.be.false;
+      el.focus();
+      await elementUpdated(el);
 
-            const opened = oneEvent(el, 'sp-opened');
+      expect(el.open, "inially closed").to.be.false;
 
-            button.dispatchEvent(arrowUpEvent());
-            await elementUpdated(el);
+      button.dispatchEvent(tEvent());
+      await elementUpdated(el);
 
-            expect(el.open, 'open by ArrowUp').to.be.true;
-            await opened;
+      expect(el.open, "still closed").to.be.false;
 
-            const closed = oneEvent(el, 'sp-closed');
+      const opened = oneEvent(el, "sp-opened");
 
-            sendKeys({
-                press: 'Escape',
-            });
-            await closed;
-            expect(el.open).to.be.false;
-        });
-        it('opens on ArrowDown', async () => {
-            const firstItem = el.querySelector(
-                'sp-menu-item:nth-of-type(1)'
-            ) as MenuItem;
-            const button = el.button as HTMLButtonElement;
+      button.dispatchEvent(arrowUpEvent());
+      await elementUpdated(el);
 
-            el.focus();
-            await elementUpdated(el);
+      expect(el.open, "open by ArrowUp").to.be.true;
+      await opened;
 
-            expect(el.open, 'inially closed').to.be.false;
+      const closed = oneEvent(el, "sp-closed");
 
-            const opened = oneEvent(el, 'sp-opened');
+      sendKeys({
+        press: "Escape",
+      });
+      await closed;
+      expect(el.open).to.be.false;
+    });
+    it("opens on ArrowDown", async () => {
+      const firstItem = el.querySelector(
+        "sp-menu-item:nth-of-type(1)",
+      ) as MenuItem;
+      const button = el.button as HTMLButtonElement;
 
-            button.dispatchEvent(arrowDownEvent());
-            await opened;
+      el.focus();
+      await elementUpdated(el);
 
-            expect(el.open, 'open by ArrowDown').to.be.true;
-            expect(el.selectedItem?.itemText).to.be.undefined;
-            expect(el.value).to.equal('');
+      expect(el.open, "inially closed").to.be.false;
 
-            const closed = oneEvent(el, 'sp-closed');
+      const opened = oneEvent(el, "sp-opened");
 
-            firstItem.click();
-            await closed;
+      button.dispatchEvent(arrowDownEvent());
+      await opened;
 
-            expect(el.open).to.be.false;
-            expect(el.selectedItem?.itemText).to.equal('Deselect');
-            expect(el.value).to.equal('Deselect');
-        });
-        it('quick selects on ArrowLeft/Right', async () => {
-            const selectionSpy = spy();
-
-            el.addEventListener('change', (event: Event) => {
-                const { value } = event.target as Picker;
-
-                selectionSpy(value);
-            });
-
-            el.focus();
-            await elementUpdated(el);
-            await waitUntil(
-                () =>
-                    (el as unknown as { menuItems: MenuItem[] }).menuItems
-                        .length === 6
-            );
-
-            await sendKeys({
-                press: 'ArrowLeft',
-            });
-            await elementUpdated(el);
-
-            expect(selectionSpy.callCount).to.equal(1);
-            expect(selectionSpy.calledWith('Deselected'));
-            await sendKeys({
-                press: 'ArrowLeft',
-            });
-
-            await elementUpdated(el);
-            expect(selectionSpy.callCount).to.equal(1);
-            await sendKeys({
-                press: 'ArrowRight',
-            });
-
-            await nextFrame();
-            await nextFrame();
-            expect(selectionSpy.calledWith('option-2'));
-
-            await sendKeys({
-                press: 'ArrowRight',
-            });
-            await nextFrame();
-            await nextFrame();
-            await sendKeys({
-                press: 'ArrowRight',
-            });
-            await nextFrame();
-            await nextFrame();
-            await sendKeys({
-                press: 'ArrowRight',
-            });
-            await nextFrame();
-            await nextFrame();
-            await sendKeys({
-                press: 'ArrowRight',
-            });
-            await nextFrame();
-            await nextFrame();
-            expect(selectionSpy.calledWith('Save Selection'));
-            expect(selectionSpy.calledWith('Make Work Path')).to.be.false;
-            expect(selectionSpy.callCount).to.equal(5);
-        });
-        it('quick selects first item on ArrowRight when no value', async () => {
-            await nextFrame();
-            const selectionSpy = spy();
+      expect(el.open, "open by ArrowDown").to.be.true;
+      expect(el.selectedItem?.itemText).to.be.undefined;
+      expect(el.value).to.equal("");
 
-            el.addEventListener('change', (event: Event) => {
-                const { value } = event.target as Picker;
+      const closed = oneEvent(el, "sp-closed");
 
-                selectionSpy(value);
-            });
-            const button = el.button as HTMLButtonElement;
+      firstItem.click();
+      await closed;
 
-            el.focus();
-            button.dispatchEvent(arrowRightEvent());
+      expect(el.open).to.be.false;
+      expect(el.selectedItem?.itemText).to.equal("Deselect");
+      expect(el.value).to.equal("Deselect");
+    });
+    it("quick selects on ArrowLeft/Right", async () => {
+      const selectionSpy = spy();
+
+      el.addEventListener("change", (event: Event) => {
+        const { value } = event.target as Picker;
+
+        selectionSpy(value);
+      });
+
+      el.focus();
+      await elementUpdated(el);
+      await waitUntil(
+        () =>
+          (el as unknown as { menuItems: MenuItem[] }).menuItems.length === 6,
+      );
+
+      await sendKeys({
+        press: "ArrowLeft",
+      });
+      await elementUpdated(el);
+
+      expect(selectionSpy.callCount).to.equal(1);
+      expect(selectionSpy.calledWith("Deselected"));
+      await sendKeys({
+        press: "ArrowLeft",
+      });
+
+      await elementUpdated(el);
+      expect(selectionSpy.callCount).to.equal(1);
+      await sendKeys({
+        press: "ArrowRight",
+      });
+
+      await nextFrame();
+      await nextFrame();
+      expect(selectionSpy.calledWith("option-2"));
+
+      await sendKeys({
+        press: "ArrowRight",
+      });
+      await nextFrame();
+      await nextFrame();
+      await sendKeys({
+        press: "ArrowRight",
+      });
+      await nextFrame();
+      await nextFrame();
+      await sendKeys({
+        press: "ArrowRight",
+      });
+      await nextFrame();
+      await nextFrame();
+      await sendKeys({
+        press: "ArrowRight",
+      });
+      await nextFrame();
+      await nextFrame();
+      expect(selectionSpy.calledWith("Save Selection"));
+      expect(selectionSpy.calledWith("Make Work Path")).to.be.false;
+      expect(selectionSpy.callCount).to.equal(5);
+    });
+    it("quick selects first item on ArrowRight when no value", async () => {
+      await nextFrame();
+      const selectionSpy = spy();
 
-            await elementUpdated(el);
+      el.addEventListener("change", (event: Event) => {
+        const { value } = event.target as Picker;
 
-            expect(selectionSpy.callCount).to.equal(1);
-            expect(selectionSpy.calledWith('Deselected'));
-        });
-        it('loads', async () => {
-            expect(el).to.not.be.undefined;
-        });
-        it('closes when focusing away from the menu', async () => {
-            const firstItem = el.querySelector('sp-menu-item') as MenuItem;
-            const thirdItem = el.querySelector(
-                'sp-menu-item:nth-of-type(3)'
-            ) as MenuItem;
-            const button = el.button;
-            const input = document.createElement('input');
-
-            el.insertAdjacentElement('afterend', input);
-
-            el.focus();
-            await sendKeys({ press: 'Tab' });
-            expect(document.activeElement === input).to.be.true;
-            await sendKeys({ press: 'Shift+Tab' });
-            expect(document.activeElement === el).to.be.true;
-            const opened = oneEvent(el, 'sp-opened');
-
-            sendKeys({ press: 'Enter' });
-            await opened;
-            await elementUpdated(el);
-
-            await waitUntil(
-                () => firstItem.focused,
-                'The first items should have become focused visually.'
-            );
-
-            await sendKeys({ press: 'ArrowDown' });
-            await sendKeys({ press: 'ArrowDown' });
-            expect(thirdItem.focused).to.be.true;
-
-            const closed = oneEvent(el, 'sp-closed');
-
-            button.focus();
-            await closed;
-            expect(isMenuActiveElement(el)).to.be.false;
-            expect(el.open).to.be.false;
-        });
-        it('does not listen to streaming `Enter` keydown', async () => {
-            const openSpy = spy();
-            const closedSpy = spy();
-
-            el.addEventListener('sp-opened', () => openSpy());
-            el.addEventListener('sp-closed', () => closedSpy());
-            const firstItem = el.querySelector('sp-menu-item') as MenuItem;
-            const thirdItem = el.querySelector(
-                'sp-menu-item:nth-of-type(3)'
-            ) as MenuItem;
-            const input = document.createElement('input');
-
-            el.insertAdjacentElement('afterend', input);
-
-            el.focus();
-            await sendKeys({ press: 'Tab' });
-            expect(document.activeElement === input).to.be.true;
-            await sendKeys({ press: 'Shift+Tab' });
-            expect(document.activeElement === el).to.be.true;
-            const opened = oneEvent(el, 'sp-opened');
-
-            sendKeys({ down: 'Enter' });
-            await opened;
-            await aTimeout(300);
-            expect(openSpy.callCount).to.equal(1);
-            await sendKeys({ up: 'Enter' });
-
-            await waitUntil(
-                () => firstItem.focused,
-                'The first items should have become focused visually.'
-            );
-
-            await sendKeys({ press: 'ArrowDown' });
-            await sendKeys({ press: 'ArrowDown' });
-            expect(thirdItem.focused).to.be.true;
-
-            const closed = oneEvent(el, 'sp-closed');
-
-            sendKeys({ down: 'Enter' });
-            await closed;
-            await aTimeout(300);
-
-            expect(el.value).to.equal(thirdItem.value);
-            expect(openSpy.callCount).to.equal(1);
-            expect(closedSpy.callCount).to.equal(1);
-            await sendKeys({ up: 'Enter' });
-        });
-        it('allows tabing to close', async () => {
-            const input = document.createElement('input');
+        selectionSpy(value);
+      });
+      const button = el.button as HTMLButtonElement;
 
-            el.insertAdjacentElement('afterend', input);
-            const opened = oneEvent(el, 'sp-opened');
+      el.focus();
+      button.dispatchEvent(arrowRightEvent());
 
-            el.open = true;
-            await opened;
-            await nextFrame();
+      await elementUpdated(el);
 
-            expect(el.open).to.be.true;
-            el.focus();
+      expect(selectionSpy.callCount).to.equal(1);
+      expect(selectionSpy.calledWith("Deselected"));
+    });
+    it("loads", async () => {
+      expect(el).to.not.be.undefined;
+    });
+    it("closes when focusing away from the menu", async () => {
+      const firstItem = el.querySelector("sp-menu-item") as MenuItem;
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)",
+      ) as MenuItem;
+      const button = el.button;
+      const input = document.createElement("input");
+
+      el.insertAdjacentElement("afterend", input);
+
+      el.focus();
+      await sendKeys({ press: "Tab" });
+      expect(document.activeElement === input).to.be.true;
+      await sendKeys({ press: "Shift+Tab" });
+      expect(document.activeElement === el).to.be.true;
+      const opened = oneEvent(el, "sp-opened");
+
+      sendKeys({ press: "Enter" });
+      await opened;
+      await elementUpdated(el);
+
+      await waitUntil(
+        () => firstItem.focused,
+        "The first items should have become focused visually.",
+      );
+
+      await sendKeys({ press: "ArrowDown" });
+      await sendKeys({ press: "ArrowDown" });
+      expect(thirdItem.focused).to.be.true;
+
+      const closed = oneEvent(el, "sp-closed");
+
+      button.focus();
+      await closed;
+      expect(isMenuActiveElement(el)).to.be.false;
+      expect(el.open).to.be.false;
+    });
+    it("does not listen to streaming `Enter` keydown", async () => {
+      const openSpy = spy();
+      const closedSpy = spy();
+
+      el.addEventListener("sp-opened", () => openSpy());
+      el.addEventListener("sp-closed", () => closedSpy());
+      const firstItem = el.querySelector("sp-menu-item") as MenuItem;
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)",
+      ) as MenuItem;
+      const input = document.createElement("input");
+
+      el.insertAdjacentElement("afterend", input);
+
+      el.focus();
+      await sendKeys({ press: "Tab" });
+      expect(document.activeElement === input).to.be.true;
+      await sendKeys({ press: "Shift+Tab" });
+      expect(document.activeElement === el).to.be.true;
+      const opened = oneEvent(el, "sp-opened");
+
+      sendKeys({ down: "Enter" });
+      await opened;
+      await aTimeout(300);
+      expect(openSpy.callCount).to.equal(1);
+      await sendKeys({ up: "Enter" });
+
+      await waitUntil(
+        () => firstItem.focused,
+        "The first items should have become focused visually.",
+      );
+
+      await sendKeys({ press: "ArrowDown" });
+      await sendKeys({ press: "ArrowDown" });
+      expect(thirdItem.focused).to.be.true;
+
+      const closed = oneEvent(el, "sp-closed");
+
+      sendKeys({ down: "Enter" });
+      await closed;
+      await aTimeout(300);
+
+      expect(el.value).to.equal(thirdItem.value);
+      expect(openSpy.callCount).to.equal(1);
+      expect(closedSpy.callCount).to.equal(1);
+      await sendKeys({ up: "Enter" });
+    });
+    it("allows tabing to close", async () => {
+      const input = document.createElement("input");
 
-            const closed = oneEvent(el, 'sp-closed');
+      el.insertAdjacentElement("afterend", input);
+      const opened = oneEvent(el, "sp-opened");
 
-            sendKeys({ press: 'Tab' });
-            await closed;
+      el.open = true;
+      await opened;
+      await nextFrame();
 
-            expect(el.open, 'closes').to.be.false;
-        });
-        describe('tab order', () => {
-            let input1: HTMLInputElement;
-            let input2: HTMLInputElement;
-
-            beforeEach(() => {
-                const surroundingInput = (): HTMLInputElement => {
-                    const input = document.createElement('input');
-
-                    input.type = 'text';
-                    input.tabIndex = 0;
-
-                    return input;
-                };
-
-                input1 = surroundingInput();
-                input2 = surroundingInput();
-
-                el.insertAdjacentElement('beforebegin', input1);
-                el.insertAdjacentElement('afterend', input2);
-            });
-            afterEach(() => {
-                input1.remove();
-                input2.remove();
-            });
-            it('tabs forward through the element', async () => {
-                // start at input1
-                input1.focus();
-                await nextFrame();
-                expect(document.activeElement === input1, 'focuses input 1').to
-                    .true;
-                // tab to the picker
-                let focused = oneEvent(el, 'focus');
-
-                await sendKeys({ press: 'Tab' });
-                await focused;
-
-                expect(el.focused, 'focused').to.be.true;
-                expect(el.open, 'closed').to.be.false;
-                expect(document.activeElement === el, 'focuses el').to.be.true;
-                // tab through the picker to input2
-                focused = oneEvent(input2, 'focus');
-                await sendKeys({ press: 'Tab' });
-                await focused;
-                expect(document.activeElement === input2, 'focuses input 2').to
-                    .true;
-            });
-            it('shift+tabs backwards through the element', async () => {
-                // start at input1
-                input2.focus();
-                await nextFrame();
-                expect(document.activeElement, 'focuses input 2').to.equal(
-                    input2
-                );
-                // tab to the picker
-                let focused = oneEvent(el, 'focus');
-
-                await sendKeys({ press: 'Shift+Tab' });
-                await focused;
-
-                expect(el.focused, 'focused').to.be.true;
-                expect(el.open, 'closed').to.be.false;
-                expect(document.activeElement, 'focuses el').to.equal(el);
-                // tab through the picker to input2
-                focused = oneEvent(input1, 'focus');
-                await sendKeys({ press: 'Shift+Tab' });
-                await focused;
-                expect(document.activeElement, 'focuses input 1').to.equal(
-                    input1
-                );
-            });
-            it('can close and immediately tab to the next tab stop', async () => {
-                el.focus();
-                await nextFrame();
-                expect(document.activeElement, 'focuses el').to.equal(el);
-                // press down to open the picker
-                const opened = oneEvent(el, 'sp-opened');
-
-                await sendKeys({ press: 'ArrowUp' });
-                await opened;
-
-                expect(el.open, 'opened').to.be.true;
-                await waitUntil(
-                    () => isMenuActiveElement(el),
-                    'first item focused'
-                );
-
-                const closed = oneEvent(el, 'sp-closed');
-
-                el.open = false;
-                await closed;
-
-                expect(el.open).to.be.false;
-                expect(document.activeElement === el).to.be.true;
-
-                const focused = oneEvent(input2, 'focus');
-
-                await sendKeys({ press: 'Tab' });
-                await focused;
-
-                expect(el.open).to.be.false;
-                expect(document.activeElement === input2).to.be.true;
-            });
-            it('can close and immediate shift+tab to the previous tab stop', async () => {
-                el.focus();
-                await nextFrame();
-                expect(document.activeElement === el, 'focuses el').to.be.true;
-                // press down to open the picker
-                const opened = oneEvent(el, 'sp-opened');
-
-                await sendKeys({ press: 'ArrowUp' });
-                await opened;
-
-                expect(el.open, 'opened').to.be.true;
-                await waitUntil(
-                    () => isMenuActiveElement(el),
-                    'first item focused'
-                );
-
-                const closed = oneEvent(el, 'sp-closed');
-
-                el.open = false;
-                await closed;
-
-                expect(el.open).to.be.false;
-                expect(document.activeElement === el).to.be.true;
-
-                const focused = oneEvent(input1, 'focus');
-
-                sendKeys({ press: 'Shift+Tab' });
-                await focused;
-
-                expect(el.open).to.be.false;
-                expect(document.activeElement === input1).to.be.true;
-            });
-        });
-        it('does not open when [readonly]', async () => {
-            el.readonly = true;
+      expect(el.open).to.be.true;
+      el.focus();
 
-            await elementUpdated(el);
+      const closed = oneEvent(el, "sp-closed");
 
-            el.click();
-            await elementUpdated(el);
+      sendKeys({ press: "Tab" });
+      await closed;
 
-            expect(el.open).to.be.false;
-        });
-        it('scrolls selected into view on open', async () => {
-            // the Popover is transient, you need to be able to apply custom styles to it...
-            const styles = document.createElement('style');
-
-            styles.innerText = 'sp-popover { height: 40px; }';
-            el.shadowRoot.append(styles);
-
-            const firstItem = el.querySelector(
-                'sp-menu-item:first-child'
-            ) as MenuItem;
-            const lastItem = el.querySelector(
-                'sp-menu-item:last-child'
-            ) as MenuItem;
-
-            lastItem.disabled = false;
-            el.value = lastItem.value;
-
-            await elementUpdated(el);
-
-            const opened = oneEvent(el, 'sp-opened');
-
-            el.open = true;
-            await opened;
-            await waitUntil(
-                () => isMenuActiveElement(el),
-                'first item focused'
-            );
-            const getParentOffset = (el: HTMLElement): number => {
-                const parentScroll = (
-                    (el as HTMLElement & { assignedSlot: HTMLSlotElement })
-                        .assignedSlot.parentElement as HTMLElement
-                ).scrollTop;
-                const parentOffset = el.offsetTop - parentScroll;
-
-                return parentOffset;
-            };
-
-            expect(getParentOffset(lastItem)).to.be.lessThan(40);
-            expect(getParentOffset(firstItem)).to.be.lessThan(-1);
-
-            lastItem.dispatchEvent(
-                new FocusEvent('focusin', { bubbles: true })
-            );
-            await sendKeys({
-                press: 'ArrowDown',
-            });
-            await elementUpdated(el);
-            await nextFrame();
-            expect(getParentOffset(lastItem)).to.be.greaterThan(40);
-            expect(getParentOffset(firstItem)).to.be.greaterThan(-1);
-        });
-        it('manages focus-ring styles', async () => {
-            if (!isWebKit()) {
-                return;
-            }
-
-            /**
-             * This is a hack to set the `isMobile` property to true so that we can test the MobileController
-             */
-            el.isMobile.matches = true;
-            el.bindEvents();
-
-            await setViewport({ width: 360, height: 640 });
-            // Allow viewport update to propagate.
-            await nextFrame();
-
-            let opened = oneEvent(el, 'sp-opened');
-
-            const boundingRect = el.button.getBoundingClientRect();
-
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-
-            await opened;
-
-            const tray = el.shadowRoot.querySelector('sp-tray');
-
-            expect(tray).to.not.be.null;
-
-            // Make a selection
-            let closed = oneEvent(el, 'sp-closed');
-
-            const firstItem = el.querySelector('sp-menu-item') as MenuItem;
-
-            firstItem.click();
-
-            await elementUpdated(el);
-            await closed;
-
-            // expect the tray to be closed
-            expect(el.open).to.be.false;
-
-            const button = el.shadowRoot.querySelector(
-                '#button'
-            ) as HTMLButtonElement;
-
-            expect(button).to.not.be.null;
-
-            // we should have SAFARI_FOCUS_RING_CLASS in the classList
-            expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be
-                .true;
-
-            // picker should still have focus
-            expect(document.activeElement === el).to.be.true;
-
-            // click outside (0,0)
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [0, 0],
-                    },
-                ],
-            });
-
-            // picker should not have focus
-            expect(document.activeElement === el).to.be.false;
-
-            // Let's use keyboard to open the tray now
-            opened = oneEvent(el, 'sp-opened');
-            await sendKeys({
-                press: 'Tab',
-            });
-            await sendKeys({
-                press: 'Enter',
-            });
-            await elementUpdated(el);
-            await opened;
-
-            // Make a selection again
-            closed = oneEvent(el, 'sp-closed');
-            firstItem.click();
-            await elementUpdated(el);
-            await closed;
-
-            // expect the tray to be closed
-            expect(el.open).to.be.false;
-
-            // we should not have SAFARI_FOCUS_RING_CLASS in the classList
-            expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be
-                .false;
-        });
+      expect(el.open, "closes").to.be.false;
     });
-    describe('grouped', async () => {
-        const groupedFixture = async (): Promise => {
-            return fixture(html`
-                
-                    
-                        Timeline
-                        
-                            Immediately
-                        
-                        
-                            I'm already using them
-                        
-                        Soon
-                        
-                            As part of my next project
-                        
-                        In the future
-                    
-                
-            `);
-        };
+    describe("tab order", () => {
+      let input1: HTMLInputElement;
+      let input2: HTMLInputElement;
 
-        beforeEach(async () => {
-            el = await groupedFixture();
-            await elementUpdated(el);
-            await nextFrame();
-            await nextFrame();
-        });
-        it('selects the item with a matching value in a group', async () => {
-            const item = el.querySelector('#should-be-selected') as MenuItem;
+      beforeEach(() => {
+        const surroundingInput = (): HTMLInputElement => {
+          const input = document.createElement("input");
 
-            expect(item.selected).to.be.true;
-        });
-    });
-    describe('slotted label', () => {
-        const pickerFixture = async (): Promise => {
-            const test = await fixture(html`
-                

-                    
-                        Where do you live?
-                    
-                    
-                        
-                            Select a Country with a very long label, too long in
-                            fact
-                        
-                        Deselect
-                        
-                            Select Inverse
-                        
-                        Feather...
-                        Select and Mask...
-                        Save Selection
-                        Make Work Path
-                    
-                

-            `);
-
-            return test.querySelector('sp-picker') as Picker;
+          input.type = "text";
+          input.tabIndex = 0;
+
+          return input;
         };
 
-        beforeEach(async () => {
-            el = await pickerFixture();
-            await elementUpdated(el);
-            await nextFrame();
-        });
-        afterEach(async () => {
-            if (el.open) {
-                const closed = oneEvent(el, 'sp-closed');
+        input1 = surroundingInput();
+        input2 = surroundingInput();
+
+        el.insertAdjacentElement("beforebegin", input1);
+        el.insertAdjacentElement("afterend", input2);
+      });
+      afterEach(() => {
+        input1.remove();
+        input2.remove();
+      });
+      it("tabs forward through the element", async () => {
+        // start at input1
+        input1.focus();
+        await nextFrame();
+        expect(document.activeElement === input1, "focuses input 1").to.true;
+        // tab to the picker
+        let focused = oneEvent(el, "focus");
+
+        await sendKeys({ press: "Tab" });
+        await focused;
+
+        expect(el.focused, "focused").to.be.true;
+        expect(el.open, "closed").to.be.false;
+        expect(document.activeElement === el, "focuses el").to.be.true;
+        // tab through the picker to input2
+        focused = oneEvent(input2, "focus");
+        await sendKeys({ press: "Tab" });
+        await focused;
+        expect(document.activeElement === input2, "focuses input 2").to.true;
+      });
+      it("shift+tabs backwards through the element", async () => {
+        // start at input1
+        input2.focus();
+        await nextFrame();
+        expect(document.activeElement, "focuses input 2").to.equal(input2);
+        // tab to the picker
+        let focused = oneEvent(el, "focus");
+
+        await sendKeys({ press: "Shift+Tab" });
+        await focused;
+
+        expect(el.focused, "focused").to.be.true;
+        expect(el.open, "closed").to.be.false;
+        expect(document.activeElement, "focuses el").to.equal(el);
+        // tab through the picker to input2
+        focused = oneEvent(input1, "focus");
+        await sendKeys({ press: "Shift+Tab" });
+        await focused;
+        expect(document.activeElement, "focuses input 1").to.equal(input1);
+      });
+      it("can close and immediately tab to the next tab stop", async () => {
+        el.focus();
+        await nextFrame();
+        expect(document.activeElement, "focuses el").to.equal(el);
+        // press down to open the picker
+        const opened = oneEvent(el, "sp-opened");
 
-                el.open = false;
-                await closed;
-            }
-        });
+        await sendKeys({ press: "ArrowUp" });
+        await opened;
 
-        it('loads accessibly w/ slotted label', async () => {
-            await expect(el).to.be.accessible();
-        });
-    });
-    describe('Dev mode', () => {
-        let consoleWarnStub!: ReturnType;
+        expect(el.open, "opened").to.be.true;
+        await waitUntil(() => isMenuActiveElement(el), "first item focused");
 
-        before(() => {
-            window.__swc.verbose = true;
-            consoleWarnStub = stub(console, 'warn');
-        });
-        afterEach(() => {
-            consoleWarnStub.resetHistory();
-        });
-        after(async () => {
-            window.__swc.verbose = false;
-            consoleWarnStub.restore();
+        const closed = oneEvent(el, "sp-closed");
 
-            if (el.open) {
-                const closed = oneEvent(el, 'sp-closed');
+        el.open = false;
+        await closed;
 
-                el.open = false;
-                await closed;
-            }
-        });
+        expect(el.open).to.be.false;
+        expect(document.activeElement === el).to.be.true;
 
-        const pickerFixture = async (): Promise => {
-            const test = await fixture(html`
-                

-                    
-                        Where do you live?
-                    
-                    
-                        
-                            Deselect
-                            
-                                Select Inverse
-                            
-                            Feather...
-                            Select and Mask...
-                            Save Selection
-                            Make Work Path
-                        
-                    
-                

-            `);
-
-            return test.querySelector('sp-picker') as Picker;
-        };
+        const focused = oneEvent(input2, "focus");
 
-        it('does not warn in Dev Mode when accessible elements leveraged', async () => {
-            const test = await fixture(html`
-                

-                    Test label
-                    
-                        Feather...
-                        Select and Mask...
-                        Save Selection
-                    
-                

-            `);
-
-            el = test.querySelector('sp-picker') as Picker;
-
-            await elementUpdated(el);
-            await nextFrame();
-            await nextFrame();
-
-            expect(consoleWarnStub.called).to.be.false;
-        });
-        it('warns in Dev Mode when accessible attributes are not leveraged', async function () {
-            this.retries(0);
-            el = await fixture(html`
-                
-                    Feather...
-                    Select and Mask...
-                    Save Selection
-                
-            `);
-
-            await elementUpdated(el);
-            await nextFrame();
-            await nextFrame();
-
-            expect(consoleWarnStub.called).to.be.true;
-            const spyCall = consoleWarnStub.getCall(0);
-
-            expect(
-                (spyCall.args.at(0) as string).includes('accessible'),
-                'confirm accessibility-centric message'
-            ).to.be.true;
-            expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-                data: {
-                    localName: 'sp-picker',
-                    type: 'accessibility',
-                    level: 'default',
-                },
-            });
-        });
-        describe('deprecated', () => {
-            it('warns in Dev Mode of deprecated `` usage', async () => {
-                el = await pickerFixture();
-                await elementUpdated(el);
-
-                expect(consoleWarnStub.called).to.be.true;
-                const spyCall = consoleWarnStub.getCall(0);
-
-                expect(
-                    (spyCall.args.at(0) as string).includes(''),
-                    'confirm -centric message'
-                ).to.be.true;
-                expect(
-                    spyCall.args.at(-1),
-                    'confirm `data` shape'
-                ).to.deep.equal({
-                    data: {
-                        localName: 'sp-picker',
-                        type: 'api',
-                        level: 'deprecation',
-                    },
-                });
-            });
-        });
-        describe('Dev mode ignored', () => {
-            const { ignoreWarningLocalNames } = window.__swc;
-
-            before(() => {
-                window.__swc.ignoreWarningLocalNames = {
-                    'sp-picker': true,
-                };
-            });
-            before(() => {
-                window.__swc.ignoreWarningLocalNames = ignoreWarningLocalNames;
-            });
-            beforeEach(async () => {
-                el = await pickerFixture();
-                await elementUpdated(el);
-                await nextFrame();
-            });
-            afterEach(async () => {
-                if (el.open) {
-                    const closed = oneEvent(el, 'sp-closed');
-
-                    el.open = false;
-                    await closed;
-                }
-            });
-            it('selects with deprecated syntax', async () => {
-                const secondItem = el.querySelector(
-                    'sp-menu-item:nth-of-type(2)'
-                ) as MenuItem;
-
-                const opened = oneEvent(el, 'sp-opened');
-
-                el.click();
-                await opened;
-
-                expect(el.open).to.be.true;
-                expect(el.selectedItem?.itemText).to.be.undefined;
-                expect(el.value).to.equal('');
-
-                const closed = oneEvent(el, 'sp-closed');
-
-                secondItem.click();
-                await closed;
-
-                expect(el.open).to.be.false;
-                expect(el.selectedItem?.itemText).to.equal('Select Inverse');
-                expect(el.value).to.equal('option-2');
-            });
-        });
-    });
-    testForLitDevWarnings(async () => await pickerFixture());
-    it('manages its "name" value in the accessibility tree when [icons-only]', async () => {
-        const test = await fixture(html`
-            
${iconsOnly({})}

-        `);
-        const el = test.querySelector('sp-picker') as Picker;
+        await sendKeys({ press: "Tab" });
+        await focused;
 
-        await elementUpdated(el);
+        expect(el.open).to.be.false;
+        expect(document.activeElement === input2).to.be.true;
+      });
+      it("can close and immediate shift+tab to the previous tab stop", async () => {
+        el.focus();
         await nextFrame();
-        type NamedNode = { name: string };
-        let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-            children: NamedNode[];
-        };
+        expect(document.activeElement === el, "focuses el").to.be.true;
+        // press down to open the picker
+        const opened = oneEvent(el, "sp-opened");
 
-        expect(
-            findAccessibilityNode(
-                snapshot,
-                (node) => node.name === 'Delete Choose an action type...'
-            ),
-            '`name` is the label text'
-        ).to.not.be.null;
-
-        el.value = '2';
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
-        expect(el.value).to.equal('2');
-        snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
-            children: NamedNode[];
-        };
+        await sendKeys({ press: "ArrowUp" });
+        await opened;
 
-        expect(
-            findAccessibilityNode(
-                snapshot,
-                (node) => node.name === 'Copy Choose an action type...'
-            ),
-            '`name` is the label text plus the selected item text'
-        ).to.not.be.null;
-    });
-    it('toggles between pickers', async () => {
-        const el2 = await pickerFixture();
-        const el1 = await pickerFixture();
-
-        (el1.parentElement as HTMLElement).style.float = 'left';
-        (el2.parentElement as HTMLElement).style.float = 'left';
-        el1.id = 'away';
-        el2.id = 'other';
-
-        await Promise.all([elementUpdated(el1), elementUpdated(el2)]);
-
-        expect(el1.open, 'closed 1').to.be.false;
-        expect(el2.open, 'closed 1').to.be.false;
-        let open = oneEvent(el1, 'sp-opened');
-
-        el1.click();
-        await open;
-        expect(el1.open).to.be.true;
-        expect(el2.open).to.be.false;
-
-        open = oneEvent(el2, 'sp-opened');
-        let closed = oneEvent(el1, 'sp-closed');
-
-        el2.click();
-        await Promise.all([open, closed]);
-        expect(el1.open).to.be.false;
-        expect(el2.open).to.be.true;
-
-        open = oneEvent(el1, 'sp-opened');
-        closed = oneEvent(el2, 'sp-closed');
-        el1.click();
-        await Promise.all([open, closed]);
-        expect(el2.open).to.be.false;
-        expect(el1.open).to.be.true;
-
-        closed = oneEvent(el1, 'sp-closed');
-        sendKeys({
-            press: 'Escape',
-        });
-        await closed;
-        expect(el1.open).to.be.false;
-    });
-    it('displays selected item text by default', async () => {
-        const el = await fixture(html`
-            
-                Deselect Text
-                Select Inverse
-                Feather...
-                Select and Mask...
-                Save Selection
-                Make Work Path
-            
-        `);
+        expect(el.open, "opened").to.be.true;
+        await waitUntil(() => isMenuActiveElement(el), "first item focused");
 
-        await nextFrame();
+        const closed = oneEvent(el, "sp-closed");
 
-        await elementUpdated(el);
-        await waitUntil(
-            () => el.selectedItem?.itemText === 'Select Inverse',
-            `Selected Item Text: ${el.selectedItem?.itemText}`
-        );
+        el.open = false;
+        await closed;
 
-        const firstItem = el.querySelector(
-            'sp-menu-item:nth-of-type(1)'
-        ) as MenuItem;
-        const secondItem = el.querySelector(
-            'sp-menu-item:nth-of-type(2)'
-        ) as MenuItem;
+        expect(el.open).to.be.false;
+        expect(document.activeElement === el).to.be.true;
 
-        expect(el.value).to.equal('inverse');
-        expect(el.selectedItem?.itemText).to.equal('Select Inverse');
+        const focused = oneEvent(input1, "focus");
 
-        el.focus();
-        await elementUpdated(el);
-        expect(
-            el === document.activeElement,
-            `activeElement is ${document.activeElement?.localName}`
-        ).to.be.true;
+        sendKeys({ press: "Shift+Tab" });
+        await focused;
 
-        const opened = oneEvent(el, 'sp-opened');
+        expect(el.open).to.be.false;
+        expect(document.activeElement === input1).to.be.true;
+      });
+    });
+    it("does not open when [readonly]", async () => {
+      el.readonly = true;
 
-        sendKeys({ press: 'Enter' });
-        await opened;
+      await elementUpdated(el);
 
-        expect(
-            el === document.activeElement,
-            `activeElement is ${document.activeElement?.localName}`
-        ).to.be.true;
-        expect(
-            (el as unknown as TestablePicker).optionsMenu ===
-                el.shadowRoot.activeElement,
-            `activeElement is ${el.shadowRoot.activeElement?.localName}`
-        ).to.be.true;
+      el.click();
+      await elementUpdated(el);
 
-        expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false;
-        expect(secondItem.focused, 'secondItem "focused"').to.be.true;
-        expect(
-            (el as unknown as TestablePicker).optionsMenu.getAttribute(
-                'aria-activedescendant'
-            )
-        ).to.equal(secondItem.id);
+      expect(el.open).to.be.false;
     });
-    it('resets value when item not available', async () => {
-        const el = await fixture(html`
-            
-                Deselect Text
-                Select Inverse
-                Feather...
-                Select and Mask...
-                Save Selection
-                Make Work Path
-            
-        `);
-
-        await elementUpdated(el);
-        await waitUntil(() => el.value === '');
-
-        expect(el.value).to.equal('');
-        expect(el.selectedItem?.itemText).to.be.undefined;
+    it("scrolls selected into view on open", async () => {
+      // the Popover is transient, you need to be able to apply custom styles to it...
+      const styles = document.createElement("style");
+
+      styles.innerText = "sp-popover { height: 40px; }";
+      el.shadowRoot.append(styles);
+
+      const firstItem = el.querySelector(
+        "sp-menu-item:first-child",
+      ) as MenuItem;
+      const lastItem = el.querySelector("sp-menu-item:last-child") as MenuItem;
+
+      lastItem.disabled = false;
+      el.value = lastItem.value;
+
+      await elementUpdated(el);
+
+      const opened = oneEvent(el, "sp-opened");
+
+      el.open = true;
+      await opened;
+      await waitUntil(() => isMenuActiveElement(el), "first item focused");
+      const getParentOffset = (el: HTMLElement): number => {
+        const parentScroll = (
+          (el as HTMLElement & { assignedSlot: HTMLSlotElement }).assignedSlot
+            .parentElement as HTMLElement
+        ).scrollTop;
+        const parentOffset = el.offsetTop - parentScroll;
+
+        return parentOffset;
+      };
+
+      expect(getParentOffset(lastItem)).to.be.lessThan(40);
+      expect(getParentOffset(firstItem)).to.be.lessThan(-1);
+
+      lastItem.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+      await sendKeys({
+        press: "ArrowDown",
+      });
+      await elementUpdated(el);
+      await nextFrame();
+      expect(getParentOffset(lastItem)).to.be.greaterThan(40);
+      expect(getParentOffset(firstItem)).to.be.greaterThan(-1);
     });
-    it('allows event listeners on child items', async () => {
-        const mouseenterSpy = spy();
-        const handleMouseenter = (): void => mouseenterSpy();
-        const el = await fixture(html`
-            
-                
-                    Deselect Text
-                
-            
-        `);
+    it("manages focus-ring styles", async () => {
+      if (!isWebKit()) {
+        return;
+      }
+
+      /**
+       * This is a hack to set the `isMobile` property to true so that we can test the MobileController
+       */
+      el.isMobile.matches = true;
+      el.bindEvents();
+
+      await setViewport({ width: 360, height: 640 });
+      // Allow viewport update to propagate.
+      await nextFrame();
+
+      let opened = oneEvent(el, "sp-opened");
+
+      const boundingRect = el.button.getBoundingClientRect();
+
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+
+      await opened;
+
+      const tray = el.shadowRoot.querySelector("sp-tray");
+
+      expect(tray).to.not.be.null;
+
+      // Make a selection
+      let closed = oneEvent(el, "sp-closed");
+
+      const firstItem = el.querySelector("sp-menu-item") as MenuItem;
+
+      firstItem.click();
+
+      await elementUpdated(el);
+      await closed;
+
+      // expect the tray to be closed
+      expect(el.open).to.be.false;
+
+      const button = el.shadowRoot.querySelector(
+        "#button",
+      ) as HTMLButtonElement;
+
+      expect(button).to.not.be.null;
+
+      // we should have SAFARI_FOCUS_RING_CLASS in the classList
+      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.true;
+
+      // picker should still have focus
+      expect(document.activeElement === el).to.be.true;
+
+      // click outside (0,0)
+      await sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [0, 0],
+          },
+        ],
+      });
+
+      // picker should not have focus
+      expect(document.activeElement === el).to.be.false;
+
+      // Let's use keyboard to open the tray now
+      opened = oneEvent(el, "sp-opened");
+      await sendKeys({
+        press: "Tab",
+      });
+      await sendKeys({
+        press: "Enter",
+      });
+      await elementUpdated(el);
+      await opened;
+
+      // Make a selection again
+      closed = oneEvent(el, "sp-closed");
+      firstItem.click();
+      await elementUpdated(el);
+      await closed;
+
+      // expect the tray to be closed
+      expect(el.open).to.be.false;
+
+      // we should not have SAFARI_FOCUS_RING_CLASS in the classList
+      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.false;
+    });
+  });
+  describe("grouped", async () => {
+    const groupedFixture = async (): Promise => {
+      return fixture(html`
+        
+          
+            Timeline
+            
+              Immediately
+            
+             I'm already using them 
+            Soon
+             As part of my next project 
+            In the future
+          
+        
+      `);
+    };
 
-        await elementUpdated(el);
+    beforeEach(async () => {
+      el = await groupedFixture();
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+    });
+    it("selects the item with a matching value in a group", async () => {
+      const item = el.querySelector("#should-be-selected") as MenuItem;
 
-        const hoverEl = el.querySelector('sp-menu-item') as MenuItem;
+      expect(item.selected).to.be.true;
+    });
+  });
+  describe("slotted label", () => {
+    const pickerFixture = async (): Promise => {
+      const test = await fixture(html`
+        

+          
+            Where do you live?
+          
+          
+            
+              Select a Country with a very long label, too long in fact
+            
+            Deselect
+             Select Inverse 
+            Feather...
+            Select and Mask...
+            Save Selection
+            Make Work Path
+          
+        

+      `);
+
+      return test.querySelector("sp-picker") as Picker;
+    };
 
-        const opened = oneEvent(el, 'sp-opened');
+    beforeEach(async () => {
+      el = await pickerFixture();
+      await elementUpdated(el);
+      await nextFrame();
+    });
+    afterEach(async () => {
+      if (el.open) {
+        const closed = oneEvent(el, "sp-closed");
 
-        el.open = true;
-        await opened;
-        await elementUpdated(el);
+        el.open = false;
+        await closed;
+      }
+    });
 
-        expect(el.open).to.be.true;
-        hoverEl.dispatchEvent(new MouseEvent('mouseenter'));
-        await elementUpdated(el);
+    it("loads accessibly w/ slotted label", async () => {
+      await expect(el).to.be.accessible();
+    });
+  });
+  describe("Dev mode", () => {
+    let consoleWarnStub!: ReturnType;
 
-        expect(el.open).to.be.true;
+    before(() => {
+      window.__swc.verbose = true;
+      consoleWarnStub = stub(console, "warn");
+    });
+    afterEach(() => {
+      consoleWarnStub.resetHistory();
+    });
+    after(async () => {
+      window.__swc.verbose = false;
+      consoleWarnStub.restore();
 
-        const closed = oneEvent(el, 'sp-closed');
+      if (el.open) {
+        const closed = oneEvent(el, "sp-closed");
 
         el.open = false;
         await closed;
-        await elementUpdated(el);
-
-        expect(el.open).to.be.false;
-        expect(mouseenterSpy.calledOnce).to.be.true;
+      }
     });
-    it('dispatches events on open/close', async () => {
-        const openedSpy = spy();
-        const closedSpy = spy();
-        const handleOpenedSpy = (event: Event): void => openedSpy(event);
-        const handleClosedSpy = (event: Event): void => closedSpy(event);
-
-        const el = await fixture(html`
-            
-                Deselect Text
-            
-        `);
 
-        await elementUpdated(el);
-        const opened = oneEvent(el, 'sp-opened');
+    const pickerFixture = async (): Promise => {
+      const test = await fixture(html`
+        

+          
+            Where do you live?
+          
+          
+            
+              Deselect
+               Select Inverse 
+              Feather...
+              Select and Mask...
+              Save Selection
+              Make Work Path
+            
+          
+        

+      `);
+
+      return test.querySelector("sp-picker") as Picker;
+    };
 
-        el.open = true;
-        await opened;
+    it("does not warn in Dev Mode when accessible elements leveraged", async () => {
+      const test = await fixture(html`
+        

+          Test label
+          
+            Feather...
+            Select and Mask...
+            Save Selection
+          
+        

+      `);
+
+      el = test.querySelector("sp-picker") as Picker;
+
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+
+      expect(consoleWarnStub.called).to.be.false;
+    });
+    it("warns in Dev Mode when accessible attributes are not leveraged", async function () {
+      this.retries(0);
+      el = await fixture(html`
+        
+          Feather...
+          Select and Mask...
+          Save Selection
+        
+      `);
+
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+
+      expect(consoleWarnStub.called).to.be.true;
+      const spyCall = consoleWarnStub.getCall(0);
+
+      expect(
+        (spyCall.args.at(0) as string).includes("accessible"),
+        "confirm accessibility-centric message",
+      ).to.be.true;
+      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        data: {
+          localName: "sp-picker",
+          type: "accessibility",
+          level: "default",
+        },
+      });
+    });
+    describe("deprecated", () => {
+      it("warns in Dev Mode of deprecated `` usage", async () => {
+        el = await pickerFixture();
         await elementUpdated(el);
 
-        expect(openedSpy.calledOnce).to.be.true;
-        expect(closedSpy.calledOnce).to.be.false;
+        expect(consoleWarnStub.called).to.be.true;
+        const spyCall = consoleWarnStub.getCall(0);
 
-        const closed = oneEvent(el, 'sp-closed');
+        expect(
+          (spyCall.args.at(0) as string).includes(""),
+          "confirm -centric message",
+        ).to.be.true;
+        expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+          data: {
+            localName: "sp-picker",
+            type: "api",
+            level: "deprecation",
+          },
+        });
+      });
+    });
+    describe("Dev mode ignored", () => {
+      const { ignoreWarningLocalNames } = window.__swc;
 
-        el.open = false;
-        await closed;
+      before(() => {
+        window.__swc.ignoreWarningLocalNames = {
+          "sp-picker": true,
+        };
+      });
+      before(() => {
+        window.__swc.ignoreWarningLocalNames = ignoreWarningLocalNames;
+      });
+      beforeEach(async () => {
+        el = await pickerFixture();
         await elementUpdated(el);
+        await nextFrame();
+      });
+      afterEach(async () => {
+        if (el.open) {
+          const closed = oneEvent(el, "sp-closed");
+
+          el.open = false;
+          await closed;
+        }
+      });
+      it("selects with deprecated syntax", async () => {
+        const secondItem = el.querySelector(
+          "sp-menu-item:nth-of-type(2)",
+        ) as MenuItem;
 
-        expect(closedSpy.calledOnce).to.be.true;
-    });
-    it('closes tooltip on button blur', async () => {
-        const test = await styledFixture(html`
-            
${tooltip(tooltip.args)}

-        `);
-        const el = test.querySelector('sp-picker') as Picker;
+        const opened = oneEvent(el, "sp-opened");
 
-        await elementUpdated(el);
-        const input1 = document.createElement('input');
-        const input2 = document.createElement('input');
-        const tooltipEl = el.querySelector('sp-tooltip') as Tooltip;
+        el.click();
+        await opened;
 
-        el.insertAdjacentElement('beforebegin', input1);
-        el.insertAdjacentElement('afterend', input2);
-        input1.focus();
-        expect(document.activeElement === input1).to.be.true;
-        const tooltipOpened = oneEvent(el, 'sp-opened');
+        expect(el.open).to.be.true;
+        expect(el.selectedItem?.itemText).to.be.undefined;
+        expect(el.value).to.equal("");
+
+        const closed = oneEvent(el, "sp-closed");
+
+        secondItem.click();
+        await closed;
 
-        await sendKeys({
-            press: 'Tab',
-        });
-        await tooltipOpened;
-        expect(
-            document.activeElement === el,
-            `Actually, ${document.activeElement?.localName}`
-        ).to.be.true;
-        expect(tooltipEl.open).to.be.true;
         expect(el.open).to.be.false;
-        expect(el.focused).to.be.true;
+        expect(el.selectedItem?.itemText).to.equal("Select Inverse");
+        expect(el.value).to.equal("option-2");
+      });
+    });
+  });
+  testForLitDevWarnings(async () => await pickerFixture());
+  it('manages its "name" value in the accessibility tree when [icons-only]', async () => {
+    const test = await fixture(html`
+      
${iconsOnly({})}

+    `);
+    const el = test.querySelector("sp-picker") as Picker;
+
+    await elementUpdated(el);
+    await nextFrame();
+    type NamedNode = { name: string };
+    let snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+      children: NamedNode[];
+    };
 
-        const menuOpen = oneEvent(el, 'sp-opened');
-        const tooltipClosed = oneEvent(el, 'sp-closed');
+    expect(
+      findAccessibilityNode(
+        snapshot,
+        (node) => node.name === "Delete Choose an action type...",
+      ),
+      "`name` is the label text",
+    ).to.not.be.null;
+
+    el.value = "2";
+    await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
+    expect(el.value).to.equal("2");
+    snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+      children: NamedNode[];
+    };
 
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        await menuOpen;
-        await tooltipClosed;
-        expect(document.activeElement === el).to.be.true;
-        expect(tooltipEl.open).to.be.false;
-        expect(el.open).to.be.true;
+    expect(
+      findAccessibilityNode(
+        snapshot,
+        (node) => node.name === "Copy Choose an action type...",
+      ),
+      "`name` is the label text plus the selected item text",
+    ).to.not.be.null;
+  });
+  it("toggles between pickers", async () => {
+    const el2 = await pickerFixture();
+    const el1 = await pickerFixture();
+
+    (el1.parentElement as HTMLElement).style.float = "left";
+    (el2.parentElement as HTMLElement).style.float = "left";
+    el1.id = "away";
+    el2.id = "other";
+
+    await Promise.all([elementUpdated(el1), elementUpdated(el2)]);
+
+    expect(el1.open, "closed 1").to.be.false;
+    expect(el2.open, "closed 1").to.be.false;
+    let open = oneEvent(el1, "sp-opened");
+
+    el1.click();
+    await open;
+    expect(el1.open).to.be.true;
+    expect(el2.open).to.be.false;
+
+    open = oneEvent(el2, "sp-opened");
+    let closed = oneEvent(el1, "sp-closed");
+
+    el2.click();
+    await Promise.all([open, closed]);
+    expect(el1.open).to.be.false;
+    expect(el2.open).to.be.true;
+
+    open = oneEvent(el1, "sp-opened");
+    closed = oneEvent(el2, "sp-closed");
+    el1.click();
+    await Promise.all([open, closed]);
+    expect(el2.open).to.be.false;
+    expect(el1.open).to.be.true;
+
+    closed = oneEvent(el1, "sp-closed");
+    sendKeys({
+      press: "Escape",
+    });
+    await closed;
+    expect(el1.open).to.be.false;
+  });
+  it("displays selected item text by default", async () => {
+    const el = await fixture(html`
+      
+        Deselect Text
+        Select Inverse
+        Feather...
+        Select and Mask...
+        Save Selection
+        Make Work Path
+      
+    `);
+
+    await nextFrame();
+
+    await elementUpdated(el);
+    await waitUntil(
+      () => el.selectedItem?.itemText === "Select Inverse",
+      `Selected Item Text: ${el.selectedItem?.itemText}`,
+    );
+
+    const firstItem = el.querySelector(
+      "sp-menu-item:nth-of-type(1)",
+    ) as MenuItem;
+    const secondItem = el.querySelector(
+      "sp-menu-item:nth-of-type(2)",
+    ) as MenuItem;
+
+    expect(el.value).to.equal("inverse");
+    expect(el.selectedItem?.itemText).to.equal("Select Inverse");
+
+    el.focus();
+    await elementUpdated(el);
+    expect(
+      el === document.activeElement,
+      `activeElement is ${document.activeElement?.localName}`,
+    ).to.be.true;
+
+    const opened = oneEvent(el, "sp-opened");
+
+    sendKeys({ press: "Enter" });
+    await opened;
+
+    expect(
+      el === document.activeElement,
+      `activeElement is ${document.activeElement?.localName}`,
+    ).to.be.true;
+    expect(
+      (el as unknown as TestablePicker).optionsMenu ===
+        el.shadowRoot.activeElement,
+      `activeElement is ${el.shadowRoot.activeElement?.localName}`,
+    ).to.be.true;
+
+    expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false;
+    expect(secondItem.focused, 'secondItem "focused"').to.be.true;
+    expect(
+      (el as unknown as TestablePicker).optionsMenu.getAttribute(
+        "aria-activedescendant",
+      ),
+    ).to.equal(secondItem.id);
+  });
+  it("resets value when item not available", async () => {
+    const el = await fixture(html`
+      
+        Deselect Text
+        Select Inverse
+        Feather...
+        Select and Mask...
+        Save Selection
+        Make Work Path
+      
+    `);
+
+    await elementUpdated(el);
+    await waitUntil(() => el.value === "");
+
+    expect(el.value).to.equal("");
+    expect(el.selectedItem?.itemText).to.be.undefined;
+  });
+  it("allows event listeners on child items", async () => {
+    const mouseenterSpy = spy();
+    const handleMouseenter = (): void => mouseenterSpy();
+    const el = await fixture(html`
+      
+        
+          Deselect Text
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    const hoverEl = el.querySelector("sp-menu-item") as MenuItem;
+
+    const opened = oneEvent(el, "sp-opened");
+
+    el.open = true;
+    await opened;
+    await elementUpdated(el);
+
+    expect(el.open).to.be.true;
+    hoverEl.dispatchEvent(new MouseEvent("mouseenter"));
+    await elementUpdated(el);
+
+    expect(el.open).to.be.true;
+
+    const closed = oneEvent(el, "sp-closed");
+
+    el.open = false;
+    await closed;
+    await elementUpdated(el);
+
+    expect(el.open).to.be.false;
+    expect(mouseenterSpy.calledOnce).to.be.true;
+  });
+  it("dispatches events on open/close", async () => {
+    const openedSpy = spy();
+    const closedSpy = spy();
+    const handleOpenedSpy = (event: Event): void => openedSpy(event);
+    const handleClosedSpy = (event: Event): void => closedSpy(event);
+
+    const el = await fixture(html`
+      
+        Deselect Text
+      
+    `);
+
+    await elementUpdated(el);
+    const opened = oneEvent(el, "sp-opened");
+
+    el.open = true;
+    await opened;
+    await elementUpdated(el);
+
+    expect(openedSpy.calledOnce).to.be.true;
+    expect(closedSpy.calledOnce).to.be.false;
+
+    const closed = oneEvent(el, "sp-closed");
+
+    el.open = false;
+    await closed;
+    await elementUpdated(el);
+
+    expect(closedSpy.calledOnce).to.be.true;
+  });
+  it("closes tooltip on button blur", async () => {
+    const test = await styledFixture(html`
+      
${tooltip(tooltip.args)}

+    `);
+    const el = test.querySelector("sp-picker") as Picker;
+
+    await elementUpdated(el);
+    const input1 = document.createElement("input");
+    const input2 = document.createElement("input");
+    const tooltipEl = el.querySelector("sp-tooltip") as Tooltip;
+
+    el.insertAdjacentElement("beforebegin", input1);
+    el.insertAdjacentElement("afterend", input2);
+    input1.focus();
+    expect(document.activeElement === input1).to.be.true;
+    const tooltipOpened = oneEvent(el, "sp-opened");
+
+    await sendKeys({
+      press: "Tab",
+    });
+    await tooltipOpened;
+    expect(
+      document.activeElement === el,
+      `Actually, ${document.activeElement?.localName}`,
+    ).to.be.true;
+    expect(tooltipEl.open).to.be.true;
+    expect(el.open).to.be.false;
+    expect(el.focused).to.be.true;
+
+    const menuOpen = oneEvent(el, "sp-opened");
+    const tooltipClosed = oneEvent(el, "sp-closed");
+
+    await sendKeys({
+      press: "ArrowDown",
+    });
+    await menuOpen;
+    await tooltipClosed;
+    expect(document.activeElement === el).to.be.true;
+    expect(tooltipEl.open).to.be.false;
+    expect(el.open).to.be.true;
 
-        const menuClosed = oneEvent(el, 'sp-closed');
+    const menuClosed = oneEvent(el, "sp-closed");
 
-        await sendKeys({
-            press: 'Tab',
-        });
-        await menuClosed;
-        expect(document.activeElement === el).to.be.false;
-        expect(tooltipEl.open).to.be.false;
-        expect(el.open).to.be.false;
+    await sendKeys({
+      press: "Tab",
     });
-    describe('disabled', function () {
-        beforeEach(async function () {
-            const test = await fixture(html`
-                
${disabled(disabled.args)}

-            `);
-
-            this.label = test.querySelector('sp-field-label') as FieldLabel;
-            this.el = test.querySelector('sp-picker') as Picker;
-            await elementUpdated(this.elel);
-        });
-        it('does not recieve focus from an ``', async function () {
-            expect(this.el.disabled).to.be.true;
-            expect(this.el.focused).to.be.false;
+    await menuClosed;
+    expect(document.activeElement === el).to.be.false;
+    expect(tooltipEl.open).to.be.false;
+    expect(el.open).to.be.false;
+  });
+  describe("disabled", function () {
+    beforeEach(async function () {
+      const test = await fixture(html` 
${disabled(disabled.args)}
 `);
+
+      this.label = test.querySelector("sp-field-label") as FieldLabel;
+      this.el = test.querySelector("sp-picker") as Picker;
+      await elementUpdated(this.elel);
+    });
+    it("does not recieve focus from an ``", async function () {
+      expect(this.el.disabled).to.be.true;
+      expect(this.el.focused).to.be.false;
 
-            this.label.click();
-            await elementUpdated(this.el);
+      this.label.click();
+      await elementUpdated(this.el);
 
-            expect(this.el.focused).to.be.false;
-        });
-        it('does not open from `click()`', async function () {
-            expect(this.el.disabled).to.be.true;
-            expect(this.el.open).to.be.false;
+      expect(this.el.focused).to.be.false;
+    });
+    it("does not open from `click()`", async function () {
+      expect(this.el.disabled).to.be.true;
+      expect(this.el.open).to.be.false;
 
-            this.el.click();
-            await elementUpdated(this.el);
+      this.el.click();
+      await elementUpdated(this.el);
 
-            expect(this.el.open).to.be.false;
-        });
-        it('does not open from `sendMouse()`', async function () {
-            expect(this.el.disabled).to.be.true;
-            expect(this.el.open).to.be.false;
-
-            const boundingRect = this.el.button.getBoundingClientRect();
-
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-            // Synthetic delay for "open" but not "sp-open" as it would never come.
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-            await nextFrame();
-
-            expect(this.el.open).to.be.false;
-        });
+      expect(this.el.open).to.be.false;
     });
-    describe('pending', function () {
-        beforeEach(async function () {
-            const test = await fixture(html`
-                
${pending({ pending: true })}

-            `);
-
-            this.label = test.querySelector('sp-field-label') as FieldLabel;
-            this.el = test.querySelector('sp-picker') as Picker;
-            await elementUpdated(this.elel);
-        });
-        it('receives focus from an ``', async function () {
-            expect(this.el.focused).to.be.false;
+    it("does not open from `sendMouse()`", async function () {
+      expect(this.el.disabled).to.be.true;
+      expect(this.el.open).to.be.false;
+
+      const boundingRect = this.el.button.getBoundingClientRect();
+
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+      // Synthetic delay for "open" but not "sp-open" as it would never come.
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+      await nextFrame();
+
+      expect(this.el.open).to.be.false;
+    });
+  });
+  describe("pending", function () {
+    beforeEach(async function () {
+      const test = await fixture(html`
+        
${pending({ pending: true })}

+      `);
+
+      this.label = test.querySelector("sp-field-label") as FieldLabel;
+      this.el = test.querySelector("sp-picker") as Picker;
+      await elementUpdated(this.elel);
+    });
+    it("receives focus from an ``", async function () {
+      expect(this.el.focused).to.be.false;
 
-            this.label.click();
-            await elementUpdated(this.el);
+      this.label.click();
+      await elementUpdated(this.el);
 
-            expect(this.el.focused).to.be.true;
-        });
-        it('does not open from `click()`', async function () {
-            expect(this.el.open).to.be.false;
+      expect(this.el.focused).to.be.true;
+    });
+    it("does not open from `click()`", async function () {
+      expect(this.el.open).to.be.false;
 
-            this.el.click();
-            await elementUpdated(this.el);
+      this.el.click();
+      await elementUpdated(this.el);
 
-            expect(this.el.open).to.be.false;
-        });
-        it('manages its "name" value in the accessibility tree when [pending]', async () => {
-            type NamedNode = { name: string; role: string };
-            const snapshot = (await a11ySnapshot(
-                {}
-            )) as unknown as NamedNode & {
-                children: NamedNode[];
-            };
-
-            expect(
-                findAccessibilityNode(
-                    snapshot,
-                    (node) =>
-                        node.name ===
-                        'Pending Choose your neighborhood Where do you live?'
-                )
-            ).to.not.be.null;
-        });
+      expect(this.el.open).to.be.false;
+    });
+    it('manages its "name" value in the accessibility tree when [pending]', async () => {
+      type NamedNode = { name: string; role: string };
+      const snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {
+        children: NamedNode[];
+      };
+
+      expect(
+        findAccessibilityNode(
+          snapshot,
+          (node) =>
+            node.name === "Pending Choose your neighborhood Where do you live?",
+        ),
+      ).to.not.be.null;
     });
+  });
 }
diff --git a/packages/picker/test/picker-memory.test.ts b/packages/picker/test/picker-memory.test.ts
index 7de7f01313..464b5be835 100644
--- a/packages/picker/test/picker-memory.test.ts
+++ b/packages/picker/test/picker-memory.test.ts
@@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Default } from '../stories/picker.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { Default } from "../stories/picker.stories.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(Default({}));
diff --git a/packages/picker/test/picker-reparenting.test.ts b/packages/picker/test/picker-reparenting.test.ts
index 2f31bef594..d151db4939 100644
--- a/packages/picker/test/picker-reparenting.test.ts
+++ b/packages/picker/test/picker-reparenting.test.ts
@@ -10,118 +10,114 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/picker/sp-picker.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import '@spectrum-web-components/menu/sp-menu-divider.js';
-import { Picker } from '@spectrum-web-components/picker';
-import { MenuItem } from '@spectrum-web-components/menu';
-import { expect, fixture, html, nextFrame, oneEvent } from '@open-wc/testing';
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import { Picker } from "@spectrum-web-components/picker";
+import { MenuItem } from "@spectrum-web-components/menu";
+import { expect, fixture, html, nextFrame, oneEvent } from "@open-wc/testing";
 
-import '@spectrum-web-components/theme/sp-theme.js';
-import '@spectrum-web-components/theme/src/themes.js';
-import type { TestablePicker } from './index.js';
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import type { TestablePicker } from "./index.js";
 
 const fixtureElements = async (): Promise<{
-    picker: Picker;
-    before: HTMLDivElement;
-    after: HTMLDivElement;
+  picker: Picker;
+  before: HTMLDivElement;
+  after: HTMLDivElement;
 }> => {
-    const test = await fixture(html`
-        
-            

-                
-                    Immediately
-                    
-                        I'm already using them
-                    
-                    
-                    Soon
-                    
-                        As part of my next project
-                    
-                    In the future
-                
-            

-            

-        
-    `);
-    const picker = test.querySelector('sp-picker') as Picker;
-
-    return {
-        picker,
-        before: test.querySelector('#before') as HTMLDivElement,
-        after: test.querySelector('#after') as HTMLDivElement,
-    };
+  const test = await fixture(html`
+    
+      

+        
+          Immediately
+           I'm already using them 
+          
+          Soon
+           As part of my next project 
+          In the future
+        
+      

+      

+    
+  `);
+  const picker = test.querySelector("sp-picker") as Picker;
+
+  return {
+    picker,
+    before: test.querySelector("#before") as HTMLDivElement,
+    after: test.querySelector("#after") as HTMLDivElement,
+  };
 };
 
-describe('Reparented Picker', () => {
-    it('maintains a `dir` attribute', async () => {
-        const { picker, before, after } = await fixtureElements();
-
-        expect(picker.dir).to.equal('ltr');
-        expect(picker.getAttribute('dir')).to.equal('ltr');
-
-        after.append(picker);
-        await nextFrame();
-
-        expect(picker.dir).to.equal('ltr');
-        expect(picker.getAttribute('dir')).to.equal('ltr');
-
-        before.append(picker);
-        await nextFrame();
-
-        expect(picker.dir).to.equal('ltr');
-        expect(picker.getAttribute('dir')).to.equal('ltr');
-    });
-    it('maintains `value`', async () => {
-        const { picker, before, after } = await fixtureElements();
-
-        expect(picker.value).to.equal('');
-
-        const item2 = picker.querySelector('[value="2"]') as MenuItem;
-        const item3 = picker.querySelector('[value="3"]') as MenuItem;
-        let opened = oneEvent(picker, 'sp-opened');
-
-        picker.click();
-        await opened;
-        expect(picker.open).to.be.true;
-        expect(picker.value).to.equal('');
-        let closed = oneEvent(picker, 'sp-closed');
-
-        item2.click();
-        await closed;
-
-        expect(picker.value).to.equal('2');
-        expect(picker.open).to.be.false;
-
-        after.append(picker);
-        opened = oneEvent(picker, 'sp-opened');
-        picker.click();
-        await opened;
-        expect(picker.open).to.be.true;
-        expect(picker.value).to.equal('2');
-        closed = oneEvent(picker, 'sp-closed');
-        item3.click();
-        await closed;
-
-        expect(picker.value).to.equal('3');
-        expect(picker.open).to.be.false;
-
-        opened = oneEvent(picker, 'sp-opened');
-        picker.click();
-        await opened;
-        expect(picker.open).to.be.true;
-        expect(picker.value).to.equal('3');
-        closed = oneEvent(picker, 'sp-closed');
-        before.append(picker);
-        await closed;
-
-        expect(
-            (picker as unknown as TestablePicker).optionsMenu.value
-        ).to.equal('3');
-        expect(picker.value).to.equal('3');
-    });
+describe("Reparented Picker", () => {
+  it("maintains a `dir` attribute", async () => {
+    const { picker, before, after } = await fixtureElements();
+
+    expect(picker.dir).to.equal("ltr");
+    expect(picker.getAttribute("dir")).to.equal("ltr");
+
+    after.append(picker);
+    await nextFrame();
+
+    expect(picker.dir).to.equal("ltr");
+    expect(picker.getAttribute("dir")).to.equal("ltr");
+
+    before.append(picker);
+    await nextFrame();
+
+    expect(picker.dir).to.equal("ltr");
+    expect(picker.getAttribute("dir")).to.equal("ltr");
+  });
+  it("maintains `value`", async () => {
+    const { picker, before, after } = await fixtureElements();
+
+    expect(picker.value).to.equal("");
+
+    const item2 = picker.querySelector('[value="2"]') as MenuItem;
+    const item3 = picker.querySelector('[value="3"]') as MenuItem;
+    let opened = oneEvent(picker, "sp-opened");
+
+    picker.click();
+    await opened;
+    expect(picker.open).to.be.true;
+    expect(picker.value).to.equal("");
+    let closed = oneEvent(picker, "sp-closed");
+
+    item2.click();
+    await closed;
+
+    expect(picker.value).to.equal("2");
+    expect(picker.open).to.be.false;
+
+    after.append(picker);
+    opened = oneEvent(picker, "sp-opened");
+    picker.click();
+    await opened;
+    expect(picker.open).to.be.true;
+    expect(picker.value).to.equal("2");
+    closed = oneEvent(picker, "sp-closed");
+    item3.click();
+    await closed;
+
+    expect(picker.value).to.equal("3");
+    expect(picker.open).to.be.false;
+
+    opened = oneEvent(picker, "sp-opened");
+    picker.click();
+    await opened;
+    expect(picker.open).to.be.true;
+    expect(picker.value).to.equal("3");
+    closed = oneEvent(picker, "sp-closed");
+    before.append(picker);
+    await closed;
+
+    expect((picker as unknown as TestablePicker).optionsMenu.value).to.equal(
+      "3",
+    );
+    expect(picker.value).to.equal("3");
+  });
 });
diff --git a/packages/picker/test/picker-responsive.test.ts b/packages/picker/test/picker-responsive.test.ts
index 894482bbdb..ca05181f5b 100644
--- a/packages/picker/test/picker-responsive.test.ts
+++ b/packages/picker/test/picker-responsive.test.ts
@@ -10,104 +10,104 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/picker/sync/sp-picker.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import { Picker } from '@spectrum-web-components/picker';
+import "@spectrum-web-components/picker/sync/sp-picker.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import { Picker } from "@spectrum-web-components/picker";
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    nextFrame,
-    oneEvent,
-} from '@open-wc/testing';
-import { setViewport } from '@web/test-runner-commands';
-import { sendMouse } from '../../../test/plugins/browser.js';
-
-describe('Picker, responsive', () => {
-    let el: Picker;
-    const pickerFixture = async (): Promise => {
-        const test = await fixture(html`
-            

-                Where do you live?
-                
-                    Deselect
-                    Select Inverse
-                    Feather...
-                    Select and Mask...
-                    
-                    Save Selection
-                    Make Work Path
-                
-            

-        `);
-
-        return test.querySelector('sp-picker') as Picker;
-    };
-
-    describe('container', () => {
-        beforeEach(async () => {
-            el = await pickerFixture();
-            await elementUpdated(el);
-        });
-
-        it('is a Tray in mobile', async () => {
-            /**
-             * This is a hack to set the `isMobile` property to true so that we can test the MobileController
-             */
-            el.isMobile.matches = true;
-            el.bindEvents();
-
-            /**
-             * While we can set the view port, but not `(hover: none) and (pointer: coarse)`
-             * which prevents us from testing this at unit time. Hopefully there will be
-             * a future version of Playwright and/or @web/test-runner that does allow this.
-             * See: https://github.com/microsoft/playwright/issues/11781
-             */
-            await setViewport({ width: 360, height: 640 });
-            // Allow viewport update to propagate.
-            await nextFrame();
-
-            const opened = oneEvent(el, 'sp-opened');
-
-            const boundingRect = el.button.getBoundingClientRect();
-
-            sendMouse({
-                steps: [
-                    {
-                        type: 'click',
-                        position: [
-                            boundingRect.x + boundingRect.width / 2,
-                            boundingRect.y + boundingRect.height / 2,
-                        ],
-                    },
-                ],
-            });
-
-            await opened;
-
-            const tray = el.shadowRoot.querySelector('sp-tray');
-
-            expect(tray).to.not.be.null;
-        });
-
-        it('is a Popover in desktop', async () => {
-            await setViewport({ width: 701, height: 640 });
-            // Allow viewport update to propagate.
-            await nextFrame();
-            await nextFrame();
-
-            const opened = oneEvent(el, 'sp-opened');
-
-            el.open = true;
-            await opened;
-
-            const popover = el.shadowRoot.querySelector('sp-popover');
-
-            expect(popover).to.not.be.null;
-        });
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent,
+} from "@open-wc/testing";
+import { setViewport } from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
+
+describe("Picker, responsive", () => {
+  let el: Picker;
+  const pickerFixture = async (): Promise => {
+    const test = await fixture(html`
+      

+        Where do you live?
+        
+          Deselect
+          Select Inverse
+          Feather...
+          Select and Mask...
+          
+          Save Selection
+          Make Work Path
+        
+      

+    `);
+
+    return test.querySelector("sp-picker") as Picker;
+  };
+
+  describe("container", () => {
+    beforeEach(async () => {
+      el = await pickerFixture();
+      await elementUpdated(el);
     });
+
+    it("is a Tray in mobile", async () => {
+      /**
+       * This is a hack to set the `isMobile` property to true so that we can test the MobileController
+       */
+      el.isMobile.matches = true;
+      el.bindEvents();
+
+      /**
+       * While we can set the view port, but not `(hover: none) and (pointer: coarse)`
+       * which prevents us from testing this at unit time. Hopefully there will be
+       * a future version of Playwright and/or @web/test-runner that does allow this.
+       * See: https://github.com/microsoft/playwright/issues/11781
+       */
+      await setViewport({ width: 360, height: 640 });
+      // Allow viewport update to propagate.
+      await nextFrame();
+
+      const opened = oneEvent(el, "sp-opened");
+
+      const boundingRect = el.button.getBoundingClientRect();
+
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2,
+            ],
+          },
+        ],
+      });
+
+      await opened;
+
+      const tray = el.shadowRoot.querySelector("sp-tray");
+
+      expect(tray).to.not.be.null;
+    });
+
+    it("is a Popover in desktop", async () => {
+      await setViewport({ width: 701, height: 640 });
+      // Allow viewport update to propagate.
+      await nextFrame();
+      await nextFrame();
+
+      const opened = oneEvent(el, "sp-opened");
+
+      el.open = true;
+      await opened;
+
+      const popover = el.shadowRoot.querySelector("sp-popover");
+
+      expect(popover).to.not.be.null;
+    });
+  });
 });
diff --git a/packages/picker/test/picker-sync.test.ts b/packages/picker/test/picker-sync.test.ts
index 882f24314f..61ba2d4762 100644
--- a/packages/picker/test/picker-sync.test.ts
+++ b/packages/picker/test/picker-sync.test.ts
@@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/picker/sync/sp-picker.js';
-import { runPickerTests } from './index.js';
+import "@spectrum-web-components/picker/sync/sp-picker.js";
+import { runPickerTests } from "./index.js";
 
-describe('Picker, sync', () => {
-    runPickerTests();
+describe("Picker, sync", () => {
+  runPickerTests();
 });
diff --git a/packages/picker/test/picker.test.ts b/packages/picker/test/picker.test.ts
index 3f32a8fa4b..75ce8e4103 100644
--- a/packages/picker/test/picker.test.ts
+++ b/packages/picker/test/picker.test.ts
@@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/picker/sp-picker.js';
-import { runPickerTests } from './index.js';
+import "@spectrum-web-components/picker/sp-picker.js";
+import { runPickerTests } from "./index.js";
 
-describe('Picker, async', () => {
-    runPickerTests();
+describe("Picker, async", () => {
+  runPickerTests();
 });
diff --git a/packages/popover/sp-popover.ts b/packages/popover/sp-popover.ts
index 38e75b8a02..d51bd81baa 100644
--- a/packages/popover/sp-popover.ts
+++ b/packages/popover/sp-popover.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Popover } from './src/Popover.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Popover } from "./src/Popover.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-popover', Popover);
+defineElement("sp-popover", Popover);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-popover': Popover;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-popover": Popover;
+  }
 }
diff --git a/packages/popover/src/Popover.ts b/packages/popover/src/Popover.ts
index af8fd695c7..0481228e8d 100644
--- a/packages/popover/src/Popover.ts
+++ b/packages/popover/src/Popover.ts
@@ -11,18 +11,18 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  nothing,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
-import type { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';
-import popoverStyles from './popover.css.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
+import type { Placement } from "@spectrum-web-components/overlay/src/overlay-types.js";
+import popoverStyles from "./popover.css.js";
 
 /**
  * @element sp-popover
@@ -31,48 +31,48 @@ import popoverStyles from './popover.css.js';
  *
  */
 export class Popover extends SpectrumElement {
-    public static override get styles(): CSSResultArray {
-        return [popoverStyles];
-    }
+  public static override get styles(): CSSResultArray {
+    return [popoverStyles];
+  }
 
-    /**
-     * Whether the popover is visible or not.
-     */
-    @property({ type: Boolean, reflect: true })
-    public open = false;
+  /**
+   * Whether the popover is visible or not.
+   */
+  @property({ type: Boolean, reflect: true })
+  public open = false;
 
-    /**
-     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
-     *
-     * @attribute
-     *
-     */
-    @property({ reflect: true })
-    public placement?: Placement;
+  /**
+   * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+   *
+   * @attribute
+   *
+   */
+  @property({ reflect: true })
+  public placement?: Placement;
 
-    @property({ type: Boolean, reflect: true })
-    public tip = false;
+  @property({ type: Boolean, reflect: true })
+  public tip = false;
 
-    @query('#tip')
-    public tipElement!: HTMLSpanElement;
+  @query("#tip")
+  public tipElement!: HTMLSpanElement;
 
-    protected renderTip(): TemplateResult {
-        return html`
-            
-        `;
-    }
+  protected renderTip(): TemplateResult {
+    return html`
+      
+    `;
+  }
 
-    protected override render(): TemplateResult {
-        return html`
-            
-            ${this.tip ? this.renderTip() : nothing}
-        `;
-    }
+  protected override render(): TemplateResult {
+    return html`
+      
+      ${this.tip ? this.renderTip() : nothing}
+    `;
+  }
 }
diff --git a/packages/popover/src/index.ts b/packages/popover/src/index.ts
index 026438c077..0a0c819593 100644
--- a/packages/popover/src/index.ts
+++ b/packages/popover/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Popover.js';
+export * from "./Popover.js";
diff --git a/packages/popover/stories/popover.stories.ts b/packages/popover/stories/popover.stories.ts
index 75b7b04834..b5139517c9 100644
--- a/packages/popover/stories/popover.stories.ts
+++ b/packages/popover/stories/popover.stories.ts
@@ -8,203 +8,192 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/popover/sp-popover.js';
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-import { Placement } from '@spectrum-web-components/overlay';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import '@spectrum-web-components/button/sp-button.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { isOverlayOpen } from '../../overlay/stories/index.js';
-import '../../overlay/stories/index.js';
+import "@spectrum-web-components/popover/sp-popover.js";
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import { Placement } from "@spectrum-web-components/overlay";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/button/sp-button.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { isOverlayOpen } from "../../overlay/stories/index.js";
+import "../../overlay/stories/index.js";
 
 export default {
-    component: 'sp-popover',
-    title: 'Popover',
-    argTypes: {
-        open: {
-            name: 'open',
-            type: { name: 'boolean', required: false },
-            description: 'Whether the popover is open or not.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: 'boolean',
-        },
-        placement: {
-            name: 'placement',
-            type: { name: 'string', required: false },
-            description:
-                'The placement of the popover content in relation to the tip',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'none' },
-            },
-            control: 'text',
-        },
-        tip: {
-            name: 'tip',
-            description: 'Whether the popover has a tip.',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: 'boolean',
-        },
+  component: "sp-popover",
+  title: "Popover",
+  argTypes: {
+    open: {
+      name: "open",
+      type: { name: "boolean", required: false },
+      description: "Whether the popover is open or not.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: "boolean",
     },
-    args: {
-        open: true,
-        placement: 'none',
-        tip: false,
+    placement: {
+      name: "placement",
+      type: { name: "string", required: false },
+      description:
+        "The placement of the popover content in relation to the tip",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "none" },
+      },
+      control: "text",
     },
+    tip: {
+      name: "tip",
+      description: "Whether the popover has a tip.",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: "boolean",
+    },
+  },
+  args: {
+    open: true,
+    placement: "none",
+    tip: false,
+  },
 };
 
 export const Default = ({ content }: { content: string }): TemplateResult => {
-    return html`
-        

-            
-                
${content}

-            
-        

-    `;
+  return html`
+    

+      
+        
${content}

+      
+    

+  `;
 };
 Default.args = {
-    content: 'The quick brown fox jumps over the lazy dog',
+  content: "The quick brown fox jumps over the lazy dog",
 };
 Default.argTypes = {
-    content: {
-        name: 'content',
-        type: { name: 'string', required: false },
-        table: {
-            type: { summary: 'string' },
-            defaultValue: { summary: '' },
-        },
-        control: 'text',
+  content: {
+    name: "content",
+    type: { name: "string", required: false },
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "" },
     },
+    control: "text",
+  },
 };
 
 interface StoryArgs {
-    tip?: boolean;
-    placement: Placement;
-    open?: boolean;
+  tip?: boolean;
+  placement: Placement;
+  open?: boolean;
 }
 
 const Template = ({ tip, placement, open }: StoryArgs): TemplateResult => {
-    return html`
-        

-            
-                
-                    
Popover Title

-                    Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly
-                    caramels. Icing soufflé chupa chups donut cheesecake.
-                    Jelly-o chocolate cake sweet roll cake danish candy biscuit
-                    halvah
-                
-            
-        

-    `;
+  return html`
+    

+      
+        
+          
Popover Title

+          Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
+          Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
+          sweet roll cake danish candy biscuit halvah
+        
+      
+    

+  `;
 };
 
 export const dialogTop = (args: StoryArgs): TemplateResult => Template(args);
 dialogTop.args = {
-    tip: true,
-    placement: 'top',
+  tip: true,
+  placement: "top",
 };
 export const dialogRight = (args: StoryArgs): TemplateResult => Template(args);
 dialogRight.args = {
-    tip: true,
-    placement: 'right',
+  tip: true,
+  placement: "right",
 };
 export const dialogBottom = (args: StoryArgs): TemplateResult => Template(args);
 dialogBottom.args = {
-    tip: true,
-    placement: 'bottom',
+  tip: true,
+  placement: "bottom",
 };
 export const dialogLeft = (args: StoryArgs): TemplateResult => Template(args);
 dialogLeft.args = {
-    tip: true,
-    placement: 'left',
+  tip: true,
+  placement: "left",
 };
 
 const overlayStyles = html`
-    
+    overlay-trigger {
+      flex: none;
+      margin: 24px 0;
+    }
+  
 `;
 
 const overlaid = (openPlacement: Placement): TemplateResult => {
-    return html`
-        ${overlayStyles}
-        ${(['bottom', 'left', 'right', 'top'] as Placement[]).map(
-            (placement) => {
-                return html`
-                    
-                        
-                            Click for ${placement}-start popover
-                        
-                        
-                            
-                                

-                                    Popover ${placement}-start
-                                

-                                This popover is on the ${placement}-start of its
-                                button.
-                            
-                        
-                    
-                `;
-            }
-        )}
-    `;
+  return html`
+    ${overlayStyles}
+    ${(["bottom", "left", "right", "top"] as Placement[]).map((placement) => {
+      return html`
+        
+          
+            Click for ${placement}-start popover
+          
+          
+            
+              
Popover ${placement}-start

+              This popover is on the ${placement}-start of its button.
+            
+          
+        
+      `;
+    })}
+  `;
 };
 
-export const overlaidTop = (): TemplateResult => overlaid('top');
+export const overlaidTop = (): TemplateResult => overlaid("top");
 overlaidTop.decorators = [isOverlayOpen];
-export const overlaidRight = (): TemplateResult => overlaid('right');
+export const overlaidRight = (): TemplateResult => overlaid("right");
 overlaidRight.decorators = [isOverlayOpen];
-export const overlaidBottom = (): TemplateResult => overlaid('bottom');
+export const overlaidBottom = (): TemplateResult => overlaid("bottom");
 overlaidBottom.decorators = [isOverlayOpen];
-export const overlaidLeft = (): TemplateResult => overlaid('left');
+export const overlaidLeft = (): TemplateResult => overlaid("left");
 overlaidLeft.decorators = [isOverlayOpen];
diff --git a/packages/popover/test/benchmark/test-basic.ts b/packages/popover/test/benchmark/test-basic.ts
index 4cc85ec739..14b39304bd 100644
--- a/packages/popover/test/benchmark/test-basic.ts
+++ b/packages/popover/test/benchmark/test-basic.ts
@@ -10,18 +10,18 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
-            
Popover title

-            Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
-            Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
-            sweet roll cake danish candy biscuit halvah
-        
-    
+  
+    
+      
Popover title

+      Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing
+      soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll
+      cake danish candy biscuit halvah
+    
+  
 `);
diff --git a/packages/popover/test/popover-memory.test.ts b/packages/popover/test/popover-memory.test.ts
index c6e9241a07..cfadb15682 100644
--- a/packages/popover/test/popover-memory.test.ts
+++ b/packages/popover/test/popover-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/popover/sp-popover.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/popover/sp-popover.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/popover/test/popover.test.ts b/packages/popover/test/popover.test.ts
index c36b8f1197..b2849064cd 100644
--- a/packages/popover/test/popover.test.ts
+++ b/packages/popover/test/popover.test.ts
@@ -9,65 +9,65 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
-import { Popover } from '@spectrum-web-components/popover';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import { Popover } from "@spectrum-web-components/popover";
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 
-describe('popover', () => {
-    let popover!: Popover;
+describe("popover", () => {
+  let popover!: Popover;
 
-    beforeEach(async () => {
-        popover = await fixture(html`
-            
-                
-                    
Popover title

-                    Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly
-                    caramels. Icing soufflé chupa chups donut cheesecake.
-                    Jelly-o chocolate cake sweet roll cake danish candy biscuit
-                    halvah
-                
-            
-        `);
-        await elementUpdated(popover);
-    });
+  beforeEach(async () => {
+    popover = await fixture(html`
+      
+        
+          
Popover title

+          Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
+          Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
+          sweet roll cake danish candy biscuit halvah
+        
+      
+    `);
+    await elementUpdated(popover);
+  });
 
-    it('loads', async () => {
-        expect(popover).to.not.equal(undefined);
-        expect(popover.textContent?.trim()).to.include('Popover title');
+  it("loads", async () => {
+    expect(popover).to.not.equal(undefined);
+    expect(popover.textContent?.trim()).to.include("Popover title");
 
-        await expect(popover).to.be.accessible();
-    });
-    it('tip exists only when tip attribute is true', async () => {
-        if (!popover.shadowRoot) throw new Error('No shadowRoot');
+    await expect(popover).to.be.accessible();
+  });
+  it("tip exists only when tip attribute is true", async () => {
+    if (!popover.shadowRoot) {
+      throw new Error("No shadowRoot");
+    }
 
-        expect(popover.getAttribute('tip')).to.equal(null);
+    expect(popover.getAttribute("tip")).to.equal(null);
 
-        let tip = popover.shadowRoot.querySelector('tip') as HTMLElement;
+    let tip = popover.shadowRoot.querySelector("tip") as HTMLElement;
 
-        expect(tip).to.equal(null);
+    expect(tip).to.equal(null);
 
-        popover.setAttribute('tip', 'true');
+    popover.setAttribute("tip", "true");
 
-        tip = popover.shadowRoot.querySelector('tip') as HTMLElement;
-        expect(tip).to.not.equal(undefined);
-    });
+    tip = popover.shadowRoot.querySelector("tip") as HTMLElement;
+    expect(tip).to.not.equal(undefined);
+  });
 
-    it('surfaces tip element', async () => {
-        const el = await fixture(html`
-            
-                
Popover Title

-                

-                    Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly
-                    caramels. Icing soufflé chupa chups donut cheesecake.
-                    Jelly-o chocolate cake sweet roll cake danish candy biscuit
-                    halvah
-                

-            
-        `);
+  it("surfaces tip element", async () => {
+    const el = await fixture(html`
+      
+        
Popover Title

+        

+          Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
+          Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
+          sweet roll cake danish candy biscuit halvah
+        

+      
+    `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        expect(typeof el.tipElement).to.not.equal('undefined');
-    });
+    expect(typeof el.tipElement).to.not.equal("undefined");
+  });
 });
diff --git a/packages/progress-bar/sp-progress-bar.ts b/packages/progress-bar/sp-progress-bar.ts
index b3e836b2c4..ec8a8e6de1 100644
--- a/packages/progress-bar/sp-progress-bar.ts
+++ b/packages/progress-bar/sp-progress-bar.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ProgressBar } from './src/ProgressBar.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { ProgressBar } from "./src/ProgressBar.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-progress-bar', ProgressBar);
+defineElement("sp-progress-bar", ProgressBar);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-progress-bar': ProgressBar;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-progress-bar": ProgressBar;
+  }
 }
diff --git a/packages/progress-bar/src/ProgressBar.ts b/packages/progress-bar/src/ProgressBar.ts
index 90ee426e75..d18e7bc80c 100644
--- a/packages/progress-bar/src/ProgressBar.ts
+++ b/packages/progress-bar/src/ProgressBar.ts
@@ -11,167 +11,159 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    PropertyValues,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  nothing,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
 
-import { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';
-import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
-import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import styles from './progress-bar.css.js';
+import { getLabelFromSlot } from "@spectrum-web-components/shared/src/get-label-from-slot.js";
+import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
+import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import styles from "./progress-bar.css.js";
 
 /**
  * @element sp-progress-bar
  */
 export class ProgressBar extends SizedMixin(
-    ObserveSlotText(SpectrumElement, ''),
-    {
-        noDefaultSize: true,
-    }
+  ObserveSlotText(SpectrumElement, ""),
+  {
+    noDefaultSize: true,
+  },
 ) {
-    public static override get styles(): CSSResultArray {
-        return [styles];
-    }
-
-    @property({ type: Boolean, reflect: true })
-    public indeterminate = false;
-
-    @property({ type: String, reflect: true })
-    public label = '';
-
-    private languageResolver = new LanguageResolutionController(this);
-
-    @property({ type: Boolean, reflect: true, attribute: 'over-background' })
-    public overBackground = false;
-
-    @property({ type: Boolean, reflect: true, attribute: 'side-label' })
-    public sideLabel = false;
-
-    @property({ type: Number })
-    public progress = 0;
-
-    @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white';
-
-    @query('slot')
-    private slotEl!: HTMLSlotElement;
-
-    protected override render(): TemplateResult {
-        return html`
-            ${this.slotHasContent || this.label
-                ? html`
-                      
-                          ${this.slotHasContent ? html`` : this.label}
-
-                          
-                      
-                  `
-                : html``}
-            ${this.label
-                ? html`
-                      ${this.indeterminate
-                          ? nothing
-                          : html`
-                                
-                                    ${new Intl.NumberFormat(
-                                        this.languageResolver.language,
-                                        {
-                                            style: 'percent',
-                                            unitDisplay: 'narrow',
-                                        }
-                                    ).format(this.progress / 100)}
-                                
-                            `}
-                  `
-                : nothing}
-            

-                

-            

-        `;
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Boolean, reflect: true })
+  public indeterminate = false;
+
+  @property({ type: String, reflect: true })
+  public label = "";
+
+  private languageResolver = new LanguageResolutionController(this);
+
+  @property({ type: Boolean, reflect: true, attribute: "over-background" })
+  public overBackground = false;
+
+  @property({ type: Boolean, reflect: true, attribute: "side-label" })
+  public sideLabel = false;
+
+  @property({ type: Number })
+  public progress = 0;
+
+  @property({ reflect: true, attribute: "static-color" })
+  public staticColor?: "white";
+
+  @query("slot")
+  private slotEl!: HTMLSlotElement;
+
+  protected override render(): TemplateResult {
+    return html`
+      ${this.slotHasContent || this.label
+        ? html`
+            
+              ${this.slotHasContent ? html`` : this.label}
+
+              
+            
+          `
+        : html``}
+      ${this.label
+        ? html`
+            ${this.indeterminate
+              ? nothing
+              : html`
+                  
+                    ${new Intl.NumberFormat(this.languageResolver.language, {
+                      style: "percent",
+                      unitDisplay: "narrow",
+                    }).format(this.progress / 100)}
+                  
+                `}
+          `
+        : nothing}
+      

+        

+      

+    `;
+  }
+
+  protected handleSlotchange(): void {
+    const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
+
+    if (labelFromSlot) {
+      this.label = labelFromSlot;
     }
+  }
 
-    protected handleSlotchange(): void {
-        const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
 
-        if (labelFromSlot) {
-            this.label = labelFromSlot;
-        }
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "progressbar");
+    }
+  }
+
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
+
+    if (changes.has("indeterminate")) {
+      if (this.indeterminate) {
+        this.removeAttribute("aria-valuemin");
+        this.removeAttribute("aria-valuemax");
+        this.removeAttribute("aria-valuenow");
+      } else {
+        this.setAttribute("aria-valuemin", "0");
+        this.setAttribute("aria-valuemax", "100");
+      }
     }
 
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
+    if (!this.indeterminate && changes.has("progress")) {
+      this.setAttribute("aria-valuenow", "" + this.progress);
+    }
 
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'progressbar');
-        }
+    if (changes.has("label")) {
+      if (this.label.length) {
+        this.setAttribute("aria-label", this.label);
+      } else if (changes.get("label") === this.getAttribute("aria-label")) {
+        this.removeAttribute("aria-label");
+      }
     }
 
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (changes.has('indeterminate')) {
-            if (this.indeterminate) {
-                this.removeAttribute('aria-valuemin');
-                this.removeAttribute('aria-valuemax');
-                this.removeAttribute('aria-valuenow');
-            } else {
-                this.setAttribute('aria-valuemin', '0');
-                this.setAttribute('aria-valuemax', '100');
-            }
-        }
-
-        if (!this.indeterminate && changes.has('progress')) {
-            this.setAttribute('aria-valuenow', '' + this.progress);
-        }
-
-        if (changes.has('label')) {
-            if (this.label.length) {
-                this.setAttribute('aria-label', this.label);
-            } else if (
-                changes.get('label') === this.getAttribute('aria-label')
-            ) {
-                this.removeAttribute('aria-label');
-            }
-        }
-
-        if (window.__swc.DEBUG) {
-            if (
-                !this.label &&
-                !this.getAttribute('aria-label') &&
-                !this.getAttribute('aria-labelledby') &&
-                !this.slotHasContent
-            ) {
-                window.__swc.warn(
-                    this,
-                    ' elements need one of the following to be accessible:',
-                    'https://opensource.adobe.com/spectrum-web-components/components/progress-bar/#accessibility',
-                    {
-                        type: 'accessibility',
-                        issues: [
-                            'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
-                            'text content supplied directly to the  element, or',
-                            'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
-                            'an element ID reference supplied to the "aria-labelledby" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.',
-                        ],
-                    }
-                );
-            }
-        }
+    if (window.__swc.DEBUG) {
+      if (
+        !this.label &&
+        !this.getAttribute("aria-label") &&
+        !this.getAttribute("aria-labelledby") &&
+        !this.slotHasContent
+      ) {
+        window.__swc.warn(
+          this,
+          " elements need one of the following to be accessible:",
+          "https://opensource.adobe.com/spectrum-web-components/components/progress-bar/#accessibility",
+          {
+            type: "accessibility",
+            issues: [
+              'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
+              "text content supplied directly to the  element, or",
+              'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
+              'an element ID reference supplied to the "aria-labelledby" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.',
+            ],
+          },
+        );
+      }
     }
+  }
 }
diff --git a/packages/progress-bar/src/index.ts b/packages/progress-bar/src/index.ts
index 9fc73f398e..ef7c2beb8c 100644
--- a/packages/progress-bar/src/index.ts
+++ b/packages/progress-bar/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './ProgressBar.js';
+export * from "./ProgressBar.js";
diff --git a/packages/progress-bar/stories/progress-bar-sizes.stories.ts b/packages/progress-bar/stories/progress-bar-sizes.stories.ts
index 56abf19a96..9be32ae6fc 100644
--- a/packages/progress-bar/stories/progress-bar-sizes.stories.ts
+++ b/packages/progress-bar/stories/progress-bar-sizes.stories.ts
@@ -10,51 +10,35 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/progress-bar/sp-progress-bar.js';
+import "@spectrum-web-components/progress-bar/sp-progress-bar.js";
 
 export default {
-    title: 'Progress Bar/Sizes',
-    component: 'sp-progress-bar',
+  title: "Progress Bar/Sizes",
+  component: "sp-progress-bar",
 };
 
 export const s = (): TemplateResult => {
-    return html`
-        
-    `;
+  return html`
+    
+  `;
 };
 
 export const m = (): TemplateResult => {
-    return html`
-        
-    `;
+  return html`
+    
+  `;
 };
 
 export const l = (): TemplateResult => {
-    return html`
-        
-    `;
+  return html`
+    
+  `;
 };
 
 export const XL = (): TemplateResult => {
-    return html`
-        
-    `;
+  return html`
+    
+  `;
 };
diff --git a/packages/progress-bar/stories/progress-bar.stories.ts b/packages/progress-bar/stories/progress-bar.stories.ts
index 5c6334bfbb..3f7f4d2511 100644
--- a/packages/progress-bar/stories/progress-bar.stories.ts
+++ b/packages/progress-bar/stories/progress-bar.stories.ts
@@ -10,58 +10,50 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/progress-bar/sp-progress-bar.js';
+import "@spectrum-web-components/progress-bar/sp-progress-bar.js";
 
 export default {
-    title: 'Progress Bar',
-    component: 'sp-progress-bar',
+  title: "Progress Bar",
+  component: "sp-progress-bar",
 };
 
 export const label = (): TemplateResult => {
-    return html`
-        
-    `;
+  return html`
+    
+  `;
 };
 
 export const indeterminate = (): TemplateResult => {
-    return html`
-        
-    `;
+  return html`
+    
+  `;
 };
 
 export const sideLabel = (): TemplateResult => {
-    return html`
-        
-    `;
+  return html`
+    
+  `;
 };
 
 export const sideIndeterminate = (): TemplateResult => {
-    return html`
-        
-    `;
+  return html`
+    
+  `;
 };
 
 const makeOverBackground =
-    (variant?: 'white' | 'black') =>
-    (story: () => TemplateResult): TemplateResult => {
-        const color =
-            variant === 'black'
-                ? 'rgb(181, 209, 211)'
-                : 'var(--spectrum-seafoam-900)';
+  (variant?: "white" | "black") =>
+  (story: () => TemplateResult): TemplateResult => {
+    const color =
+      variant === "black"
+        ? "rgb(181, 209, 211)"
+        : "var(--spectrum-seafoam-900)";
 
-        return html`
-            

-                ${story()}
-            

-        `;
-    };
+      >
+        ${story()}
+      
+    `;
+  };
 
 export const staticWhite = (): TemplateResult => {
-    return makeOverBackground('white')(
-        () => html`
-            
-        `
-    );
+  return makeOverBackground("white")(
+    () => html`
+      
+    `,
+  );
 };
 
 export const staticWhiteLabel = (): TemplateResult => {
-    return makeOverBackground('white')(
-        () => html`
-            
-        `
-    );
+  return makeOverBackground("white")(
+    () => html`
+      
+    `,
+  );
 };
 
 export const staticWhiteIndeterminate = (): TemplateResult => {
-    return makeOverBackground('white')(
-        () => html`
-            
-        `
-    );
+  return makeOverBackground("white")(
+    () => html`
+      
+    `,
+  );
 };
 
 export const staticWhiteSideLabel = (): TemplateResult => {
-    return makeOverBackground('white')(
-        () => html`
-            
-        `
-    );
+  return makeOverBackground("white")(
+    () => html`
+      
+    `,
+  );
 };
 
 export const staticWhiteSideLabelIndeterminate = (): TemplateResult => {
-    return makeOverBackground('white')(
-        () => html`
-            
-        `
-    );
+  return makeOverBackground("white")(
+    () => html`
+      
+    `,
+  );
 };
diff --git a/packages/progress-bar/test/benchmark/basic-test.ts b/packages/progress-bar/test/benchmark/basic-test.ts
index 7ad971a3b7..79f662c67c 100644
--- a/packages/progress-bar/test/benchmark/basic-test.ts
+++ b/packages/progress-bar/test/benchmark/basic-test.ts
@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/progress-bar/sp-progress-bar.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/progress-bar/sp-progress-bar.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
+  
 `);
diff --git a/packages/progress-bar/test/progress-bar-memory.test.ts b/packages/progress-bar/test/progress-bar-memory.test.ts
index 221846a376..c422ea6943 100644
--- a/packages/progress-bar/test/progress-bar-memory.test.ts
+++ b/packages/progress-bar/test/progress-bar-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/progress-bar/sp-progress-bar.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/progress-bar/sp-progress-bar.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/progress-bar/test/progress-bar.test.ts b/packages/progress-bar/test/progress-bar.test.ts
index ae84400fe8..2847b63965 100644
--- a/packages/progress-bar/test/progress-bar.test.ts
+++ b/packages/progress-bar/test/progress-bar.test.ts
@@ -10,251 +10,244 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-
-import '@spectrum-web-components/progress-bar/sp-progress-bar.js';
-import { ProgressBar } from '@spectrum-web-components/progress-bar';
-import { stub } from 'sinon';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
-
-describe('ProgressBar', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-            `)
-    );
-    it('loads default progress-bar accessibly', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-
-        await expect(el).to.be.accessible();
-    });
-
-    it('accepts label from `slot`', async () => {
-        const el = await fixture(html`
-            
-                Label From Slot
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.getAttribute('label')).to.equal('Label From Slot');
-    });
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 
-    it('handles label attribute changes', async () => {
-        const el = await fixture(html`
-            
-                content
-            
-        `);
-
-        await elementUpdated(el);
-        el.setAttribute('label', '');
-        await elementUpdated(el);
-
-        expect(el.getAttribute('label')).to.equal('');
-        el.setAttribute('label', 'label1');
-        await elementUpdated(el);
-        expect(el.getAttribute('label')).to.equal('label1');
-    });
-
-    it('renders label when content is absent', async () => {
-        const el = await fixture(html`
-            
-        `);
+import "@spectrum-web-components/progress-bar/sp-progress-bar.js";
+import { ProgressBar } from "@spectrum-web-components/progress-bar";
+import { stub } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { createLanguageContext } from "../../../tools/reactive-controllers/test/helpers.js";
+
+describe("ProgressBar", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+      `),
+  );
+  it("loads default progress-bar accessibly", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+
+    await expect(el).to.be.accessible();
+  });
+
+  it("accepts label from `slot`", async () => {
+    const el = await fixture(html`
+       Label From Slot 
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.getAttribute("label")).to.equal("Label From Slot");
+  });
+
+  it("handles label attribute changes", async () => {
+    const el = await fixture(html`
+       content 
+    `);
+
+    await elementUpdated(el);
+    el.setAttribute("label", "");
+    await elementUpdated(el);
+
+    expect(el.getAttribute("label")).to.equal("");
+    el.setAttribute("label", "label1");
+    await elementUpdated(el);
+    expect(el.getAttribute("label")).to.equal("label1");
+  });
+
+  it("renders label when content is absent", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    expect(el.getAttribute("label")).to.equal("myLabel");
+  });
+
+  it("renders nothing when both content and label is absent", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    el.removeAttribute("label");
+    el.shadowRoot.textContent = "";
+    expect(el.getAttribute("label")).to.equal(null);
+    expect(el.shadowRoot.textContent?.trim()).to.equal("");
+  });
+
+  it("accepts a changing progress", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("0");
+
+    el.progress = 50;
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("50");
+
+    el.progress = 100;
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("100");
+  });
+  it("loads - [indeterminate]", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+
+    await expect(el).to.be.accessible();
+  });
+  it("accepts user `role`", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-        expect(el.getAttribute('label')).to.equal('myLabel');
-    });
+    await elementUpdated(el);
 
-    it('renders nothing when both content and label is absent', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        el.removeAttribute('label');
-        el.shadowRoot.textContent = '';
-        expect(el.getAttribute('label')).to.equal(null);
-        expect(el.shadowRoot.textContent?.trim()).to.equal('');
-    });
+    expect(el.getAttribute("role")).to.equal("progressbar");
+  });
+  it("returns to indeterminate", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-    it('accepts a changing progress', async () => {
-        const el = await fixture(html`
-            
-        `);
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("50");
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('0');
+    el.indeterminate = true;
 
-        el.progress = 50;
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    expect(el.hasAttribute("aria-valuenow")).to.be.false;
+  });
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('50');
+  describe("dev mode", () => {
+    let consoleWarnStub!: ReturnType;
 
-        el.progress = 100;
-
-        await elementUpdated(el);
-
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('100');
+    before(() => {
+      window.__swc.verbose = true;
+      consoleWarnStub = stub(console, "warn");
     });
-    it('loads - [indeterminate]', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-
-        await expect(el).to.be.accessible();
+    afterEach(() => {
+      consoleWarnStub.resetHistory();
+    });
+    after(() => {
+      window.__swc.verbose = false;
+      consoleWarnStub.restore();
     });
-    it('accepts user `role`', async () => {
-        const el = await fixture(html`
-            
-        `);
 
-        await elementUpdated(el);
+    it("warns in Dev Mode when accessible attributes are not leveraged", async () => {
+      const el = await fixture(html`
+        
+      `);
+
+      await elementUpdated(el);
+
+      expect(consoleWarnStub.called).to.be.true;
+      const spyCall = consoleWarnStub.getCall(0);
+
+      expect(
+        (spyCall.args.at(0) as string).includes("accessible"),
+        "confirm accessibility-centric message",
+      ).to.be.true;
+      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        data: {
+          localName: "sp-progress-bar",
+          type: "accessibility",
+          level: "default",
+        },
+      });
+    });
+    it("resolves a language (en-US)", async () => {
+      const [languageContext] = createLanguageContext("en-US");
+      const test = await fixture(html`
+        

+          
+        

+      `);
+      const el = test.querySelector("sp-progress-bar") as ProgressBar;
+      const percentage = el.shadowRoot.querySelector(
+        ".percentage",
+      ) as HTMLElement;
+
+      expect(percentage.textContent?.search("%")).to.not.equal(-1);
+    });
 
-        expect(el.getAttribute('role')).to.equal('progressbar');
+    it("resolves a language (ar-sa)", async () => {
+      const [languageContext] = createLanguageContext("ar-sa");
+      const test = await fixture(html`
+        

+          
+        

+      `);
+      const el = test.querySelector("sp-progress-bar") as ProgressBar;
+      const percentage = el.shadowRoot.querySelector(
+        ".percentage",
+      ) as HTMLElement;
+
+      expect(percentage.textContent?.search("٪")).to.not.equal(-1);
     });
-    it('returns to indeterminate', async () => {
-        const el = await fixture(html`
-            
-        `);
 
-        await elementUpdated(el);
+    it("accepts `aria-label`", async () => {
+      const el = await fixture(html`
+        
+      `);
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('50');
+      await elementUpdated(el);
 
-        el.indeterminate = true;
+      expect(el.hasAttribute("aria-label")).to.be.true;
+      expect(el.getAttribute("aria-label")).to.equal("Loading");
+    });
+    it("sets `aria-label` to equal `label` if `label` is set", async () => {
+      const el = await fixture(html`
+        
+      `);
 
-        await elementUpdated(el);
+      await elementUpdated(el);
 
-        expect(el.hasAttribute('aria-valuenow')).to.be.false;
+      expect(el.hasAttribute("aria-label")).to.be.true;
+      expect(el.getAttribute("aria-label")).to.equal("Loading");
     });
+    it("does not remove `aria-label` if set independently of `label`", async () => {
+      const el = await fixture(html`
+        
+      `);
+
+      await elementUpdated(el);
 
-    describe('dev mode', () => {
-        let consoleWarnStub!: ReturnType;
-
-        before(() => {
-            window.__swc.verbose = true;
-            consoleWarnStub = stub(console, 'warn');
-        });
-        afterEach(() => {
-            consoleWarnStub.resetHistory();
-        });
-        after(() => {
-            window.__swc.verbose = false;
-            consoleWarnStub.restore();
-        });
-
-        it('warns in Dev Mode when accessible attributes are not leveraged', async () => {
-            const el = await fixture(html`
-                
-            `);
-
-            await elementUpdated(el);
-
-            expect(consoleWarnStub.called).to.be.true;
-            const spyCall = consoleWarnStub.getCall(0);
-
-            expect(
-                (spyCall.args.at(0) as string).includes('accessible'),
-                'confirm accessibility-centric message'
-            ).to.be.true;
-            expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-                data: {
-                    localName: 'sp-progress-bar',
-                    type: 'accessibility',
-                    level: 'default',
-                },
-            });
-        });
-        it('resolves a language (en-US)', async () => {
-            const [languageContext] = createLanguageContext('en-US');
-            const test = await fixture(html`
-                

-                    
-                

-            `);
-            const el = test.querySelector('sp-progress-bar') as ProgressBar;
-            const percentage = el.shadowRoot.querySelector(
-                '.percentage'
-            ) as HTMLElement;
-
-            expect(percentage.textContent?.search('%')).to.not.equal(-1);
-        });
-
-        it('resolves a language (ar-sa)', async () => {
-            const [languageContext] = createLanguageContext('ar-sa');
-            const test = await fixture(html`
-                

-                    
-                

-            `);
-            const el = test.querySelector('sp-progress-bar') as ProgressBar;
-            const percentage = el.shadowRoot.querySelector(
-                '.percentage'
-            ) as HTMLElement;
-
-            expect(percentage.textContent?.search('٪')).to.not.equal(-1);
-        });
-
-        it('accepts `aria-label`', async () => {
-            const el = await fixture(html`
-                
-            `);
-
-            await elementUpdated(el);
-
-            expect(el.hasAttribute('aria-label')).to.be.true;
-            expect(el.getAttribute('aria-label')).to.equal('Loading');
-        });
-        it('sets `aria-label` to equal `label` if `label` is set', async () => {
-            const el = await fixture(html`
-                
-            `);
-
-            await elementUpdated(el);
-
-            expect(el.hasAttribute('aria-label')).to.be.true;
-            expect(el.getAttribute('aria-label')).to.equal('Loading');
-        });
-        it('does not remove `aria-label` if set independently of `label`', async () => {
-            const el = await fixture(html`
-                
-            `);
-
-            await elementUpdated(el);
-
-            expect(el.hasAttribute('aria-label')).to.be.true;
-            expect(el.getAttribute('aria-label')).to.equal('Loading');
-        });
+      expect(el.hasAttribute("aria-label")).to.be.true;
+      expect(el.getAttribute("aria-label")).to.equal("Loading");
     });
+  });
 });
diff --git a/packages/progress-circle/sp-progress-circle.ts b/packages/progress-circle/sp-progress-circle.ts
index a90b07c969..ba3264c0ca 100644
--- a/packages/progress-circle/sp-progress-circle.ts
+++ b/packages/progress-circle/sp-progress-circle.ts
@@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { ProgressCircle } from './src/ProgressCircle.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { ProgressCircle } from "./src/ProgressCircle.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-progress-circle', ProgressCircle);
+defineElement("sp-progress-circle", ProgressCircle);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-progress-circle': ProgressCircle;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-progress-circle": ProgressCircle;
+  }
 }
diff --git a/packages/progress-circle/src/ProgressCircle.ts b/packages/progress-circle/src/ProgressCircle.ts
index c231251502..162980541a 100644
--- a/packages/progress-circle/src/ProgressCircle.ts
+++ b/packages/progress-circle/src/ProgressCircle.ts
@@ -11,139 +11,132 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
+import { getLabelFromSlot } from "@spectrum-web-components/shared/src/get-label-from-slot.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
-import progressCircleStyles from './progress-circle.css.js';
+import progressCircleStyles from "./progress-circle.css.js";
 
 /**
  * @element sp-progress-circle
  */
 export class ProgressCircle extends SizedMixin(SpectrumElement, {
-    validSizes: ['s', 'm', 'l'],
+  validSizes: ["s", "m", "l"],
 }) {
-    public static override get styles(): CSSResultArray {
-        return [progressCircleStyles];
-    }
-
-    @property({ type: Boolean, reflect: true })
-    public indeterminate = false;
-
-    @property({ type: String })
-    public label = '';
-
-    @property({ reflect: true, attribute: 'static-color' })
-    public staticColor?: 'white';
-
-    @property({ type: Number })
-    public progress = 0;
+  public static override get styles(): CSSResultArray {
+    return [progressCircleStyles];
+  }
+
+  @property({ type: Boolean, reflect: true })
+  public indeterminate = false;
+
+  @property({ type: String })
+  public label = "";
+
+  @property({ reflect: true, attribute: "static-color" })
+  public staticColor?: "white";
+
+  @property({ type: Number })
+  public progress = 0;
+
+  @query("slot")
+  private slotEl!: HTMLSlotElement;
+
+  private makeRotation(rotation: number): string | undefined {
+    return this.indeterminate
+      ? undefined
+      : `transform: rotate(${rotation}deg);`;
+  }
+
+  protected override render(): TemplateResult {
+    const styles = [
+      this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),
+      this.makeRotation(-180 + (180 / 50) * Math.max(this.progress - 50, 0)),
+    ];
+    const masks = ["Mask1", "Mask2"];
+
+    return html`
+      
+      

+      

+        ${masks.map(
+          (mask, index) => html`
+            

+              

+                

+              

+            

+          `,
+        )}
+      

+    `;
+  }
 
-    @query('slot')
-    private slotEl!: HTMLSlotElement;
+  protected handleSlotchange(): void {
+    const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
 
-    private makeRotation(rotation: number): string | undefined {
-        return this.indeterminate
-            ? undefined
-            : `transform: rotate(${rotation}deg);`;
+    if (labelFromSlot) {
+      this.label = labelFromSlot;
     }
+  }
 
-    protected override render(): TemplateResult {
-        const styles = [
-            this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),
-            this.makeRotation(
-                -180 + (180 / 50) * Math.max(this.progress - 50, 0)
-            ),
-        ];
-        const masks = ['Mask1', 'Mask2'];
-
-        return html`
-            
-            

-            

-                ${masks.map(
-                    (mask, index) => html`
-                        

-                            

-                                

-                            

-                        

-                    `
-                )}
-            

-        `;
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
+
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "progressbar");
     }
+  }
 
-    protected handleSlotchange(): void {
-        const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
 
-        if (labelFromSlot) {
-            this.label = labelFromSlot;
-        }
+    if (!this.indeterminate && changes.has("progress")) {
+      this.setAttribute("aria-valuenow", "" + this.progress);
+    } else if (this.hasAttribute("aria-valuenow")) {
+      this.removeAttribute("aria-valuenow");
     }
 
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-
-        if (!this.hasAttribute('role')) {
-            this.setAttribute('role', 'progressbar');
-        }
+    if (changes.has("label")) {
+      if (this.label.length) {
+        this.setAttribute("aria-label", this.label);
+      } else if (changes.get("label") === this.getAttribute("aria-label")) {
+        this.removeAttribute("aria-label");
+      }
     }
 
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (!this.indeterminate && changes.has('progress')) {
-            this.setAttribute('aria-valuenow', '' + this.progress);
-        } else if (this.hasAttribute('aria-valuenow')) {
-            this.removeAttribute('aria-valuenow');
-        }
-
-        if (changes.has('label')) {
-            if (this.label.length) {
-                this.setAttribute('aria-label', this.label);
-            } else if (
-                changes.get('label') === this.getAttribute('aria-label')
-            ) {
-                this.removeAttribute('aria-label');
-            }
-        }
-
-        if (window.__swc.DEBUG) {
-            if (
-                !this.label &&
-                !this.getAttribute('aria-label') &&
-                !this.getAttribute('aria-labelledby') &&
-                !this.slotEl.assignedNodes().length
-            ) {
-                window.__swc.warn(
-                    this,
-                    ' elements need one of the following to be accessible:',
-                    'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility',
-                    {
-                        type: 'accessibility',
-                        issues: [
-                            'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
-                            'text content supplied directly to the  element, or',
-                            'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
-                            'an element ID reference supplied to the "aria-labelledby" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.',
-                        ],
-                    }
-                );
-            }
-        }
+    if (window.__swc.DEBUG) {
+      if (
+        !this.label &&
+        !this.getAttribute("aria-label") &&
+        !this.getAttribute("aria-labelledby") &&
+        !this.slotEl.assignedNodes().length
+      ) {
+        window.__swc.warn(
+          this,
+          " elements need one of the following to be accessible:",
+          "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility",
+          {
+            type: "accessibility",
+            issues: [
+              'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
+              "text content supplied directly to the  element, or",
+              'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
+              'an element ID reference supplied to the "aria-labelledby" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.',
+            ],
+          },
+        );
+      }
     }
+  }
 }
diff --git a/packages/progress-circle/src/index.ts b/packages/progress-circle/src/index.ts
index e89ec8e62b..42f5dbd8e8 100644
--- a/packages/progress-circle/src/index.ts
+++ b/packages/progress-circle/src/index.ts
@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-export * from './ProgressCircle.js';
+export * from "./ProgressCircle.js";
diff --git a/packages/progress-circle/stories/progress-circle.stories.ts b/packages/progress-circle/stories/progress-circle.stories.ts
index d24ac063e6..10c2672684 100644
--- a/packages/progress-circle/stories/progress-circle.stories.ts
+++ b/packages/progress-circle/stories/progress-circle.stories.ts
@@ -10,115 +10,115 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
-import '@spectrum-web-components/button/sp-button.js';
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import "@spectrum-web-components/button/sp-button.js";
 
 export default {
-    title: 'Progress Circle',
-    component: 'sp-progress-circle',
-    argTypes: {
-        indeterminate: {
-            name: 'indeterminate',
-            type: { name: 'boolean', required: false },
-            description: 'Whether the progress is indeterminate.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
+  title: "Progress Circle",
+  component: "sp-progress-circle",
+  argTypes: {
+    indeterminate: {
+      name: "indeterminate",
+      type: { name: "boolean", required: false },
+      description: "Whether the progress is indeterminate.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+  },
 };
 
 interface StoryArgs {
-    indeterminate?: boolean;
+  indeterminate?: boolean;
 }
 
 export const Default = ({ indeterminate }: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-            
-            
-        

-    `;
+  return html`
+    

+      
+      
+      
+    

+  `;
 };
 Default.args = {
-    indeterminate: false,
+  indeterminate: false,
 };
 
 export const staticWhite = ({
-    indeterminate,
+  indeterminate,
 }: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-            
-            
-        

-    `;
+  return html`
+    

+      
+      
+      
+    

+  `;
 };
 staticWhite.args = {
-    indeterminate: false,
+  indeterminate: false,
 };
 
 export const inButton = ({
-    indeterminate,
+  indeterminate,
 }: StoryArgs = {}): TemplateResult => html`
-    
-    
-        
-        Processing...
-    
+  
+  
+    
+    Processing...
+  
 `;
diff --git a/packages/progress-circle/test/benchmark/basic-test.ts b/packages/progress-circle/test/benchmark/basic-test.ts
index 9dbbac0972..323b4263e8 100644
--- a/packages/progress-circle/test/benchmark/basic-test.ts
+++ b/packages/progress-circle/test/benchmark/basic-test.ts
@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
+  
 `);
diff --git a/packages/progress-circle/test/progress-circle-memory.test.ts b/packages/progress-circle/test/progress-circle-memory.test.ts
index 9ccd1671fe..e245f9ef55 100644
--- a/packages/progress-circle/test/progress-circle-memory.test.ts
+++ b/packages/progress-circle/test/progress-circle-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/progress-circle/test/progress-circle.test.ts b/packages/progress-circle/test/progress-circle.test.ts
index 1c297a4de7..cabb897dba 100644
--- a/packages/progress-circle/test/progress-circle.test.ts
+++ b/packages/progress-circle/test/progress-circle.test.ts
@@ -10,154 +10,148 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-
-import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
-import { ProgressCircle } from '@spectrum-web-components/progress-circle';
-import { stub } from 'sinon';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('ProgressCircle', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-            `)
-    );
-    describe('dev mode', () => {
-        let consoleWarnStub!: ReturnType;
-
-        before(() => {
-            window.__swc.verbose = true;
-            consoleWarnStub = stub(console, 'warn');
-        });
-        afterEach(() => {
-            consoleWarnStub.resetHistory();
-        });
-        after(() => {
-            window.__swc.verbose = false;
-            consoleWarnStub.restore();
-        });
-
-        it('warns in Dev Mode when accessible attributes are not leveraged', async () => {
-            const el = await fixture(html`
-                
-            `);
-
-            await elementUpdated(el);
-
-            expect(consoleWarnStub.called).to.be.true;
-            const spyCall = consoleWarnStub.getCall(0);
-
-            expect(
-                (spyCall.args.at(0) as string).includes('accessible'),
-                'confirm accessibility-centric message'
-            ).to.be.true;
-            expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-                data: {
-                    localName: 'sp-progress-circle',
-                    type: 'accessibility',
-                    level: 'default',
-                },
-            });
-        });
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import { ProgressCircle } from "@spectrum-web-components/progress-circle";
+import { stub } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+describe("ProgressCircle", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+      `),
+  );
+  describe("dev mode", () => {
+    let consoleWarnStub!: ReturnType;
+
+    before(() => {
+      window.__swc.verbose = true;
+      consoleWarnStub = stub(console, "warn");
     });
-    it('loads', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-
-        await expect(el).to.be.accessible();
-    });
-    it('loads - [indeterminate]', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-
-        await expect(el).to.be.accessible();
-    });
-    it('accepts label from `slot`', async () => {
-        const el = await fixture(html`
-            
-                Label From Slot
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.getAttribute('aria-label')).to.equal('Label From Slot');
+    afterEach(() => {
+      consoleWarnStub.resetHistory();
     });
-    it('accepts user `role`', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.getAttribute('role')).to.equal('progressbar');
+    after(() => {
+      window.__swc.verbose = false;
+      consoleWarnStub.restore();
     });
-    it('returns to indeterminate', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.hasAttribute('aria-valuenow')).to.be.true;
-        expect(el.getAttribute('aria-valuenow')).to.equal('50');
 
-        el.indeterminate = true;
-
-        await elementUpdated(el);
-
-        expect(el.hasAttribute('aria-valuenow')).to.be.false;
-    });
-    it('accepts `aria-label`', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.hasAttribute('aria-label')).to.be.true;
-        expect(el.getAttribute('aria-label')).to.equal('Loading');
-    });
-    it('sets `aria-label` to equal `label` if `label` is set', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.hasAttribute('aria-label')).to.be.true;
-        expect(el.getAttribute('aria-label')).to.equal('Loading');
-    });
-    it('does not remove `aria-label` if set independently of `label`', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.hasAttribute('aria-label')).to.be.true;
-        expect(el.getAttribute('aria-label')).to.equal('Loading');
+    it("warns in Dev Mode when accessible attributes are not leveraged", async () => {
+      const el = await fixture(html`
+        
+      `);
+
+      await elementUpdated(el);
+
+      expect(consoleWarnStub.called).to.be.true;
+      const spyCall = consoleWarnStub.getCall(0);
+
+      expect(
+        (spyCall.args.at(0) as string).includes("accessible"),
+        "confirm accessibility-centric message",
+      ).to.be.true;
+      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        data: {
+          localName: "sp-progress-circle",
+          type: "accessibility",
+          level: "default",
+        },
+      });
     });
+  });
+  it("loads", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+
+    await expect(el).to.be.accessible();
+  });
+  it("loads - [indeterminate]", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+
+    await expect(el).to.be.accessible();
+  });
+  it("accepts label from `slot`", async () => {
+    const el = await fixture(html`
+      
+        Label From Slot
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.getAttribute("aria-label")).to.equal("Label From Slot");
+  });
+  it("accepts user `role`", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.getAttribute("role")).to.equal("progressbar");
+  });
+  it("returns to indeterminate", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute("aria-valuenow")).to.be.true;
+    expect(el.getAttribute("aria-valuenow")).to.equal("50");
+
+    el.indeterminate = true;
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute("aria-valuenow")).to.be.false;
+  });
+  it("accepts `aria-label`", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute("aria-label")).to.be.true;
+    expect(el.getAttribute("aria-label")).to.equal("Loading");
+  });
+  it("sets `aria-label` to equal `label` if `label` is set", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute("aria-label")).to.be.true;
+    expect(el.getAttribute("aria-label")).to.equal("Loading");
+  });
+  it("does not remove `aria-label` if set independently of `label`", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.hasAttribute("aria-label")).to.be.true;
+    expect(el.getAttribute("aria-label")).to.equal("Loading");
+  });
 });
diff --git a/packages/radio/sp-radio-group.ts b/packages/radio/sp-radio-group.ts
index fcfcb9e84b..a9befbd7d2 100644
--- a/packages/radio/sp-radio-group.ts
+++ b/packages/radio/sp-radio-group.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { RadioGroup } from './src/RadioGroup.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { RadioGroup } from "./src/RadioGroup.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-radio-group', RadioGroup);
+defineElement("sp-radio-group", RadioGroup);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-radio-group': RadioGroup;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-radio-group": RadioGroup;
+  }
 }
diff --git a/packages/radio/sp-radio.ts b/packages/radio/sp-radio.ts
index 5052ae77db..593bc11b14 100644
--- a/packages/radio/sp-radio.ts
+++ b/packages/radio/sp-radio.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Radio } from './src/Radio.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Radio } from "./src/Radio.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-radio', Radio);
+defineElement("sp-radio", Radio);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-radio': Radio;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-radio": Radio;
+  }
 }
diff --git a/packages/radio/src/Radio.ts b/packages/radio/src/Radio.ts
index 8da5025030..ac861633e6 100644
--- a/packages/radio/src/Radio.ts
+++ b/packages/radio/src/Radio.ts
@@ -11,17 +11,17 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SizedMixin,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
-
-import radioStyles from './radio.css.js';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SizedMixin,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
+
+import radioStyles from "./radio.css.js";
 
 /**
  * @element sp-radio
@@ -36,129 +36,129 @@ import radioStyles from './radio.css.js';
  * @attribute value - Identifies this radio button within its radio group
  */
 export class Radio extends SizedMixin(
-    FocusVisiblePolyfillMixin(SpectrumElement),
-    { noDefaultSize: true }
+  FocusVisiblePolyfillMixin(SpectrumElement),
+  { noDefaultSize: true },
 ) {
-    public static override get styles(): CSSResultArray {
-        return [radioStyles];
-    }
-
-    /**
-     * When this control is rendered, focus it automatically
-     *
-     * @private
-     */
-    @property({ type: Boolean })
-    public override autofocus = false;
+  public static override get styles(): CSSResultArray {
+    return [radioStyles];
+  }
 
-    @property({ type: String, reflect: true })
-    public value = '';
+  /**
+   * When this control is rendered, focus it automatically
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+  public override autofocus = false;
 
-    @property({ type: Boolean, reflect: true })
-    public checked = false;
+  @property({ type: String, reflect: true })
+  public value = "";
 
-    @property({ type: Boolean, reflect: true })
-    public disabled = false;
+  @property({ type: Boolean, reflect: true })
+  public checked = false;
 
-    @property({ type: Boolean, reflect: true })
-    public emphasized = false;
+  @property({ type: Boolean, reflect: true })
+  public disabled = false;
 
-    @property({ type: Boolean, reflect: true })
-    public invalid = false;
+  @property({ type: Boolean, reflect: true })
+  public emphasized = false;
 
-    @property({ type: Boolean, reflect: true })
-    public readonly = false;
+  @property({ type: Boolean, reflect: true })
+  public invalid = false;
 
-    public override click(): void {
-        if (this.disabled) {
-            return;
-        }
+  @property({ type: Boolean, reflect: true })
+  public readonly = false;
 
-        this.activate();
+  public override click(): void {
+    if (this.disabled) {
+      return;
     }
 
-    protected manageAutoFocus(): void {
-        if (this.autofocus) {
-            /**
-             * Trick :focus-visible polyfill into thinking keyboard based focus
-             *
-             * @private
-             */
-            this.dispatchEvent(
-                new KeyboardEvent('keydown', {
-                    code: 'Tab',
-                })
-            );
-            this.focus();
-        }
+    this.activate();
+  }
+
+  protected manageAutoFocus(): void {
+    if (this.autofocus) {
+      /**
+       * Trick :focus-visible polyfill into thinking keyboard based focus
+       *
+       * @private
+       */
+      this.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          code: "Tab",
+        }),
+      );
+      this.focus();
     }
+  }
 
-    protected activate(): void {
-        if (this.checked) {
-            return;
-        }
-
-        this.checked = true;
-        this.dispatchEvent(
-            new Event('change', {
-                bubbles: true,
-                composed: true,
-            })
-        );
+  protected activate(): void {
+    if (this.checked) {
+      return;
     }
 
-    protected handleKeyup(event: KeyboardEvent): void {
-        if (event.code === 'Space') {
-            this.activate();
-        }
+    this.checked = true;
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  protected handleKeyup(event: KeyboardEvent): void {
+    if (event.code === "Space") {
+      this.activate();
     }
-
-    protected override render(): TemplateResult {
-        return html`
-            

-            
-            
-        `;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      

+      
+      
+    `;
+  }
+
+  protected override firstUpdated(changes: PropertyValues): void {
+    super.firstUpdated(changes);
+    this.setAttribute("role", "radio");
+
+    if (!this.hasAttribute("tabindex")) {
+      this.tabIndex = 0;
     }
 
-    protected override firstUpdated(changes: PropertyValues): void {
-        super.firstUpdated(changes);
-        this.setAttribute('role', 'radio');
+    this.manageAutoFocus();
+    this.addEventListener("click", this.activate);
+    this.addEventListener("keyup", this.handleKeyup);
+  }
 
-        if (!this.hasAttribute('tabindex')) {
-            this.tabIndex = 0;
-        }
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
+
+    if (changes.has("invalid")) {
+      if (this.invalid) {
+        this.setAttribute("aria-invalid", "true");
+      } else {
+        this.removeAttribute("aria-invalid");
+      }
+    }
 
-        this.manageAutoFocus();
-        this.addEventListener('click', this.activate);
-        this.addEventListener('keyup', this.handleKeyup);
+    if (changes.has("checked")) {
+      if (this.checked) {
+        this.setAttribute("aria-checked", "true");
+      } else {
+        this.setAttribute("aria-checked", "false");
+      }
     }
 
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
-
-        if (changes.has('invalid')) {
-            if (this.invalid) {
-                this.setAttribute('aria-invalid', 'true');
-            } else {
-                this.removeAttribute('aria-invalid');
-            }
-        }
-
-        if (changes.has('checked')) {
-            if (this.checked) {
-                this.setAttribute('aria-checked', 'true');
-            } else {
-                this.setAttribute('aria-checked', 'false');
-            }
-        }
-
-        if (changes.has('disabled')) {
-            if (this.disabled) {
-                this.setAttribute('aria-disabled', 'true');
-            } else {
-                this.removeAttribute('aria-disabled');
-            }
-        }
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.setAttribute("aria-disabled", "true");
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
     }
+  }
 }
diff --git a/packages/radio/src/RadioGroup.ts b/packages/radio/src/RadioGroup.ts
index 1b5d34102d..2d59fc0481 100644
--- a/packages/radio/src/RadioGroup.ts
+++ b/packages/radio/src/RadioGroup.ts
@@ -10,16 +10,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { PropertyValues } from '@spectrum-web-components/base';
+import { PropertyValues } from "@spectrum-web-components/base";
 import {
-    property,
-    queryAssignedNodes,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
-import { FieldGroup } from '@spectrum-web-components/field-group';
+  property,
+  queryAssignedNodes,
+} from "@spectrum-web-components/base/src/decorators.js";
+import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
+import { FieldGroup } from "@spectrum-web-components/field-group";
 
-import { Radio } from './Radio.js';
-import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
+import { Radio } from "./Radio.js";
+import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
 
 /**
  * @element sp-radio-group
@@ -31,124 +31,122 @@ import { RovingTabindexController } from '@spectrum-web-components/reactive-cont
  * @fires change - An alteration to the value of the element has been committed by the user.
  */
 export class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {
-    @property({ type: String })
-    public name = '';
-
-    @queryAssignedNodes()
-    public defaultNodes!: Node[];
+  @property({ type: String })
+  public name = "";
+
+  @queryAssignedNodes()
+  public defaultNodes!: Node[];
+
+  public get buttons(): Radio[] {
+    return this.defaultNodes.filter(
+      (node) => (node as HTMLElement) instanceof Radio,
+    ) as Radio[];
+  }
+
+  rovingTabindexController = new RovingTabindexController(this, {
+    focusInIndex: (elements: Radio[]) => {
+      return elements.findIndex((el) => {
+        return this.selected
+          ? !el.disabled && el.value === this.selected
+          : !el.disabled;
+      });
+    },
+    elementEnterAction: (el: Radio) => {
+      this._setSelected(el.value);
+    },
+    elements: () => this.buttons,
+    isFocusableElement: (el: Radio) => !el.disabled,
+  });
+
+  public override focus(): void {
+    this.rovingTabindexController.focus();
+  }
+
+  private _setSelected(value: string): void {
+    if (value === this.selected) {
+      return;
+    }
 
-    public get buttons(): Radio[] {
-        return this.defaultNodes.filter(
-            (node) => (node as HTMLElement) instanceof Radio
-        ) as Radio[];
+    const oldValue = this.selected;
+    const radio = value
+      ? (this.querySelector(`sp-radio[value="${value}"]`) as Radio)
+      : undefined;
+
+    // If no matching radio, selected is reset to empty string
+    this.selected = radio ? value : "";
+    const applyDefault = this.dispatchEvent(
+      new Event("change", {
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    if (!applyDefault) {
+      this.selected = oldValue;
+
+      return;
     }
 
-    rovingTabindexController = new RovingTabindexController(this, {
-        focusInIndex: (elements: Radio[]) => {
-            return elements.findIndex((el) => {
-                return this.selected
-                    ? !el.disabled && el.value === this.selected
-                    : !el.disabled;
-            });
-        },
-        elementEnterAction: (el: Radio) => {
-            this._setSelected(el.value);
-        },
-        elements: () => this.buttons,
-        isFocusableElement: (el: Radio) => !el.disabled,
-    });
+    this.validateRadios();
+  }
 
-    public override focus(): void {
-        this.rovingTabindexController.focus();
-    }
+  @property({ reflect: true })
+  public selected = "";
 
-    private _setSelected(value: string): void {
-        if (value === this.selected) {
-            return;
-        }
+  protected override willUpdate(changes: PropertyValues): void {
+    if (!this.hasUpdated) {
+      this.setAttribute("role", "radiogroup");
+      const checkedRadio = this.querySelector("sp-radio[checked]") as Radio;
+      const checkedRadioValue = checkedRadio ? checkedRadio.value : "";
 
-        const oldValue = this.selected;
-        const radio = value
-            ? (this.querySelector(`sp-radio[value="${value}"]`) as Radio)
-            : undefined;
-
-        // If no matching radio, selected is reset to empty string
-        this.selected = radio ? value : '';
-        const applyDefault = this.dispatchEvent(
-            new Event('change', {
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-
-        if (!applyDefault) {
-            this.selected = oldValue;
-
-            return;
-        }
+      // Prefer the checked item over the selected value
+      this.selected = checkedRadioValue || this.selected;
 
-        this.validateRadios();
-    }
+      // Validate the selected value is actual a radio option
+      if (this.selected && this.selected !== checkedRadioValue) {
+        const selectedRadio = this.querySelector(
+          `sp-radio[value="${this.selected}"]`,
+        ) as Radio;
 
-    @property({ reflect: true })
-    public selected = '';
-
-    protected override willUpdate(changes: PropertyValues): void {
-        if (!this.hasUpdated) {
-            this.setAttribute('role', 'radiogroup');
-            const checkedRadio = this.querySelector(
-                'sp-radio[checked]'
-            ) as Radio;
-            const checkedRadioValue = checkedRadio ? checkedRadio.value : '';
-
-            // Prefer the checked item over the selected value
-            this.selected = checkedRadioValue || this.selected;
-
-            // Validate the selected value is actual a radio option
-            if (this.selected && this.selected !== checkedRadioValue) {
-                const selectedRadio = this.querySelector(
-                    `sp-radio[value="${this.selected}"]`
-                ) as Radio;
-
-                if (selectedRadio) {
-                    selectedRadio.checked = true;
-                }
-            }
-
-            this.shadowRoot.addEventListener('change', (event: Event) => {
-                event.stopPropagation();
-                const target = event.target as Radio;
-
-                this._setSelected(target.value);
-            });
+        if (selectedRadio) {
+          selectedRadio.checked = true;
         }
+      }
 
-        if (changes.has('selected')) {
-            this.validateRadios();
-        }
-    }
+      this.shadowRoot.addEventListener("change", (event: Event) => {
+        event.stopPropagation();
+        const target = event.target as Radio;
 
-    private async validateRadios(): Promise {
-        let validSelection = false;
+        this._setSelected(target.value);
+      });
+    }
 
-        if (!this.hasUpdated) {
-            // Initial validation has to happen after the initial render to allow
-            // the buttons to be queries from the rendered  element
-            await this.updateComplete;
-        }
+    if (changes.has("selected")) {
+      this.validateRadios();
+    }
+  }
 
-        this.buttons.map((button) => {
-            button.checked = this.selected === button.value;
-            validSelection = validSelection || button.checked;
-        });
+  private async validateRadios(): Promise {
+    let validSelection = false;
 
-        if (!validSelection) {
-            this.selected = '';
-        }
+    if (!this.hasUpdated) {
+      // Initial validation has to happen after the initial render to allow
+      // the buttons to be queries from the rendered  element
+      await this.updateComplete;
     }
 
-    protected override handleSlotchange(): void {
-        this.rovingTabindexController.clearElementCache();
+    this.buttons.map((button) => {
+      button.checked = this.selected === button.value;
+      validSelection = validSelection || button.checked;
+    });
+
+    if (!validSelection) {
+      this.selected = "";
     }
+  }
+
+  protected override handleSlotchange(): void {
+    this.rovingTabindexController.clearElementCache();
+  }
 }
diff --git a/packages/radio/src/index.ts b/packages/radio/src/index.ts
index ed2a630e41..f7e5337a50 100644
--- a/packages/radio/src/index.ts
+++ b/packages/radio/src/index.ts
@@ -9,5 +9,5 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Radio.js';
-export * from './RadioGroup.js';
+export * from "./Radio.js";
+export * from "./RadioGroup.js";
diff --git a/packages/radio/stories/radio-sizes.stories.ts b/packages/radio/stories/radio-sizes.stories.ts
index 5a3ca33407..0ab0d6abac 100644
--- a/packages/radio/stories/radio-sizes.stories.ts
+++ b/packages/radio/stories/radio-sizes.stories.ts
@@ -9,84 +9,83 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from '@spectrum-web-components/base';
-import { Default, StoryArgs } from './radio.stories.js';
+import { TemplateResult } from "@spectrum-web-components/base";
+import { Default, StoryArgs } from "./radio.stories.js";
 
 export default {
-    component: 'sp-radio',
-    title: 'Radio/Sizes',
-    argTypes: {
-        checked: {
-            name: 'checked',
-            type: { name: 'boolean', required: false },
-            description: 'Represents when the input is checked',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: 'boolean',
-        },
-        disabled: {
-            name: 'disabled',
-            type: { name: 'boolean', required: false },
-            description:
-                'Disable this control. It will not receive focus or events.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        emphasized: {
-            name: 'emphasized',
-            type: { name: 'boolean', required: false },
-            description: "Set the button's state to emphasized.",
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        invalid: {
-            name: 'invalid',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
+  component: "sp-radio",
+  title: "Radio/Sizes",
+  argTypes: {
+    checked: {
+      name: "checked",
+      type: { name: "boolean", required: false },
+      description: "Represents when the input is checked",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: "boolean",
     },
-    args: {
-        checked: false,
-        disabled: false,
-        emphasized: false,
-        invalid: false,
+    disabled: {
+      name: "disabled",
+      type: { name: "boolean", required: false },
+      description: "Disable this control. It will not receive focus or events.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+    emphasized: {
+      name: "emphasized",
+      type: { name: "boolean", required: false },
+      description: "Set the button's state to emphasized.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    invalid: {
+      name: "invalid",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+    emphasized: false,
+    invalid: false,
+  },
 };
 
 export const s = (args: StoryArgs): TemplateResult => Default(args);
 s.args = {
-    size: 's',
+  size: "s",
 };
 
 export const m = (args: StoryArgs): TemplateResult => Default(args);
 m.args = {
-    size: 'm',
+  size: "m",
 };
 
 export const l = (args: StoryArgs): TemplateResult => Default(args);
 l.args = {
-    size: 'l',
+  size: "l",
 };
 
 export const XL = (args: StoryArgs): TemplateResult => Default(args);
 XL.args = {
-    size: 'xl',
+  size: "xl",
 };
diff --git a/packages/radio/stories/radio.stories.ts b/packages/radio/stories/radio.stories.ts
index 538b2466d7..1007f75948 100644
--- a/packages/radio/stories/radio.stories.ts
+++ b/packages/radio/stories/radio.stories.ts
@@ -9,175 +9,166 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/radio/sp-radio.js';
-import '@spectrum-web-components/radio/sp-radio-group.js';
-import { spreadProps } from '../../../test/lit-helpers.js';
+import "@spectrum-web-components/radio/sp-radio.js";
+import "@spectrum-web-components/radio/sp-radio-group.js";
+import { spreadProps } from "../../../test/lit-helpers.js";
 
 export default {
-    component: 'sp-radio',
-    title: 'Radio',
-    argTypes: {
-        checked: {
-            name: 'checked',
-            type: { name: 'boolean', required: false },
-            description: 'Represents when the input is checked',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: 'boolean',
-        },
-        disabled: {
-            name: 'disabled',
-            type: { name: 'boolean', required: false },
-            description:
-                'Disable this control. It will not receive focus or events.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        emphasized: {
-            name: 'emphasized',
-            type: { name: 'boolean', required: false },
-            description: "Set the button's state to emphasized.",
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        invalid: {
-            name: 'invalid',
-            type: { name: 'boolean', required: false },
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
+  component: "sp-radio",
+  title: "Radio",
+  argTypes: {
+    checked: {
+      name: "checked",
+      type: { name: "boolean", required: false },
+      description: "Represents when the input is checked",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: "boolean",
     },
-    args: {
-        checked: false,
-        disabled: false,
-        emphasized: false,
-        invalid: false,
+    disabled: {
+      name: "disabled",
+      type: { name: "boolean", required: false },
+      description: "Disable this control. It will not receive focus or events.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
     },
+    emphasized: {
+      name: "emphasized",
+      type: { name: "boolean", required: false },
+      description: "Set the button's state to emphasized.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    invalid: {
+      name: "invalid",
+      type: { name: "boolean", required: false },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+    emphasized: false,
+    invalid: false,
+  },
 };
 
 export interface StoryArgs {
-    checked?: boolean;
-    disabled?: boolean;
-    emphasized?: boolean;
-    invalid?: boolean;
-    readonly?: boolean;
-    size?: 's' | 'm' | 'l' | 'xl';
-    [prop: string]: unknown;
+  checked?: boolean;
+  disabled?: boolean;
+  emphasized?: boolean;
+  invalid?: boolean;
+  readonly?: boolean;
+  size?: "s" | "m" | "l" | "xl";
+  [prop: string]: unknown;
 }
 
 function renderRadio(args: StoryArgs): TemplateResult {
-    return html`
-        Radio
-    `;
+  return html` Radio `;
 }
 export const Default = (args: StoryArgs): TemplateResult => renderRadio(args);
 
 export const readonly = (args: StoryArgs): TemplateResult =>
-    renderRadio({
-        ...args,
-        readonly: true,
-    });
+  renderRadio({
+    ...args,
+    readonly: true,
+  });
 readonly.args = {
-    checked: true,
+  checked: true,
 };
 
 export const Emphasized = (args: StoryArgs): TemplateResult =>
-    renderRadio(args);
+  renderRadio(args);
 Emphasized.args = {
-    checked: true,
-    emphasized: true,
+  checked: true,
+  emphasized: true,
 };
 
 export const Autofocus = (args: StoryArgs): TemplateResult => {
-    return html`
-        Radio
-    `;
+  return html` Radio `;
 };
 
 export const Invalid = (args: StoryArgs): TemplateResult => renderRadio(args);
 Invalid.args = {
-    invalid: true,
+  invalid: true,
 };
 
 export const Disabled = (args: StoryArgs): TemplateResult => renderRadio(args);
 Disabled.args = {
-    disabled: true,
+  disabled: true,
 };
 
 const values = {
-    first: 1,
-    second: 2,
-    third: 3,
-    fourth: 4,
+  first: 1,
+  second: 2,
+  third: 3,
+  fourth: 4,
 };
 
 export const groupExample = (): TemplateResult => {
-    return html`
-        
-            Option 1
-            Option 2
-            Option 3
-            Option 4
-        
-    `;
+  return html`
+    
+      Option 1
+      Option 2
+      Option 3
+      Option 4
+    
+  `;
 };
 
 export const horizontalGroup = (): TemplateResult => {
-    return html`
-        
-            Option 1
-            Option 2
-            Option 3
-            Option 4
-        
-    `;
+  return html`
+    
+      Option 1
+      Option 2
+      Option 3
+      Option 4
+    
+  `;
 };
 
 export const tabIndexExample = (): TemplateResult => {
-    return html`
-        
-            
-                Tab Index 0
-            
-            Tab Index 3
-            Tab Index 1
-            Tab Index 4
-            Tab Index 2
-        
-    `;
+  return html`
+    
+       Tab Index 0 
+      Tab Index 3
+      Tab Index 1
+      Tab Index 4
+      Tab Index 2
+    
+  `;
 };
 
 export const horizontalTabIndexExample = (): TemplateResult => {
-    return html`
-        
-            
-                Tab Index 0
-            
-            Tab Index 3
-            Tab Index 1
-            Tab Index 4
-            Tab Index 2
-        
-    `;
+  return html`
+    
+       Tab Index 0 
+      Tab Index 3
+      Tab Index 1
+      Tab Index 4
+      Tab Index 2
+    
+  `;
 };
 
-tabIndexExample.storyName = 'Tab index example';
+tabIndexExample.storyName = "Tab index example";
diff --git a/packages/radio/test/benchmark/test-basic.ts b/packages/radio/test/benchmark/test-basic.ts
index ef799d035f..1abe1b98f3 100644
--- a/packages/radio/test/benchmark/test-basic.ts
+++ b/packages/radio/test/benchmark/test-basic.ts
@@ -10,15 +10,15 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/radio/sp-radio-group.js';
-import '@spectrum-web-components/radio/sp-radio.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/radio/sp-radio-group.js";
+import "@spectrum-web-components/radio/sp-radio.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        Option 1
-        Option 2
-        Option 3
-    
+  
+    Option 1
+    Option 2
+    Option 3
+  
 `);
diff --git a/packages/radio/test/radio-group.test.ts b/packages/radio/test/radio-group.test.ts
index f3461ffe2a..7e078ed4bb 100644
--- a/packages/radio/test/radio-group.test.ts
+++ b/packages/radio/test/radio-group.test.ts
@@ -10,675 +10,650 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/radio/sp-radio-group.js';
-import '@spectrum-web-components/radio/sp-radio.js';
-import { Radio, RadioGroup } from '@spectrum-web-components/radio';
+import "@spectrum-web-components/radio/sp-radio-group.js";
+import "@spectrum-web-components/radio/sp-radio.js";
+import { Radio, RadioGroup } from "@spectrum-web-components/radio";
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    nextFrame,
-} from '@open-wc/testing';
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+} from "@open-wc/testing";
 import {
-    arrowDownEvent,
-    arrowLeftEvent,
-    arrowRightEvent,
-    arrowUpEvent,
-    endEvent,
-    enterEvent,
-    homeEvent,
-} from '../../../test/testing-helpers.js';
+  arrowDownEvent,
+  arrowLeftEvent,
+  arrowRightEvent,
+  arrowUpEvent,
+  endEvent,
+  enterEvent,
+  homeEvent,
+} from "../../../test/testing-helpers.js";
 import {
-    a11ySnapshot,
-    findAccessibilityNode,
-    sendKeys,
-} from '@web/test-runner-commands';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { spy } from 'sinon';
-
-describe('Radio Group - focus control', () => {
-    it('does not accept focus when empty', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(document.activeElement === el).to.be.false;
-
-        el.focus();
-        await elementUpdated(el);
-
-        expect(document.activeElement === el).to.be.false;
+  a11ySnapshot,
+  findAccessibilityNode,
+  sendKeys,
+} from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { spy } from "sinon";
+
+describe("Radio Group - focus control", () => {
+  it("does not accept focus when empty", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+
+    el.focus();
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+  });
+  it("focuses selected before first", async () => {
+    const values = ["first", "second", "third"];
+    const el = await fixture(html`
+      
+        Option 1
+        Option 2
+        Option 3
+      
+    `);
+
+    await elementUpdated(el);
+    const selected = el.querySelector('[value="second"]') as Radio;
+
+    expect(document.activeElement === el).to.be.false;
+
+    el.focus();
+    await elementUpdated(el);
+
+    expect(document.activeElement === selected).to.be.true;
+  });
+  it("focuses the child input not the root when [tabindex=-1]", async () => {
+    const values = ["first", "second", "third"];
+    const el = await fixture(html`
+      
+        Option 1
+        Option 2
+        Option 3
+      
+    `);
+
+    await elementUpdated(el);
+    const first = el.querySelector('[value="first"]') as Radio;
+    const selected = el.querySelector('[value="second"]') as Radio;
+
+    expect(selected.tabIndex).to.equal(0);
+    expect(first.tabIndex).to.equal(-1);
+
+    const firstRect = first.getBoundingClientRect();
+
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [firstRect.x + 2, firstRect.y + 2],
+        },
+        {
+          type: "down",
+        },
+      ],
     });
-    it('focuses selected before first', async () => {
-        const values = ['first', 'second', 'third'];
-        const el = await fixture(html`
-            
-                Option 1
-                Option 2
-                Option 3
-            
-        `);
+    await elementUpdated(el);
+
+    // Safari can have a situation where it thinks the root is focused, but really something inside of the
+    // element is focused instead, this tests for both no focus on the root or focus inside of the element.
+    expect(
+      !first.matches(":focus") || first.matches(":focus-within"),
+      "root should not",
+    ).to.be.true;
+  });
+  it("does not select on focus", async () => {
+    const el = await fixture(html`
+      
+        Options 1
+        Options 2
+        Options 3
+        Options 4
+        Options 5
+      
+    `);
+
+    await elementUpdated(el);
+
+    const radio1 = el.querySelector("sp-radio:nth-child(1)") as Radio;
+    const radio2 = el.querySelector("sp-radio:nth-child(2)") as Radio;
+
+    expect(el.selected).to.equal("");
+
+    radio1.focus();
+    await elementUpdated(el);
+
+    expect(el.selected).to.equal("");
+    el.selected = "1";
+    await elementUpdated(el);
+
+    expect(el.selected).to.equal("1");
+    expect(radio1.checked).to.be.true;
+    radio2.focus();
+    await elementUpdated(el);
+
+    expect(el.selected).to.equal("1");
+    expect(radio1.checked).to.be.true;
+  });
+  it("loads accepts keyboard events while focused", async () => {
+    const el = await fixture(html`
+      
+        Options 1
+        Options 2
+        Options 3
+        Options 4
+        Options 5
+      
+    `);
+
+    await elementUpdated(el);
+
+    const radio1 = el.querySelector("sp-radio:nth-child(1)") as Radio;
+    const radio2 = el.querySelector("sp-radio:nth-child(2)") as Radio;
+    const radio3 = el.querySelector("sp-radio:nth-child(3)") as Radio;
+    const radio4 = el.querySelector("sp-radio:nth-child(4)") as Radio;
+    const radio5 = el.querySelector("sp-radio:nth-child(5)") as Radio;
+
+    radio1.focus();
+    await elementUpdated(el);
+
+    el.dispatchEvent(arrowRightEvent());
+    await elementUpdated(el);
+
+    expect(document.activeElement === radio2).to.be.true;
+
+    el.dispatchEvent(arrowDownEvent());
+    await elementUpdated(el);
+
+    expect(document.activeElement === radio3).to.be.true;
+
+    el.dispatchEvent(endEvent());
+    await elementUpdated(el);
+
+    expect(document.activeElement === radio5).to.be.true;
+
+    el.dispatchEvent(arrowLeftEvent());
+    await elementUpdated(el);
+
+    expect(document.activeElement === radio4).to.be.true;
+
+    el.dispatchEvent(arrowUpEvent());
+    await elementUpdated(el);
+
+    expect(document.activeElement === radio3).to.be.true;
+
+    el.dispatchEvent(homeEvent());
+    await elementUpdated(el);
+
+    expect(document.activeElement === radio1).to.be.true;
+
+    radio1.blur();
+  });
+  it("accepts keyboard interactions where `checked` and `calculateFocusInIndex` might conflict", async () => {
+    const el = await fixture(html`
+      
+        Options 1
+        Options 2
+        Options 3
+        Options 4
+        Options 5
+      
+    `);
+
+    await elementUpdated(el);
 
-        await elementUpdated(el);
-        const selected = el.querySelector('[value="second"]') as Radio;
+    const radio1 = el.querySelector("sp-radio:nth-child(1)") as Radio;
+    const radio5 = el.querySelector("sp-radio:nth-child(5)") as Radio;
 
-        expect(document.activeElement === el).to.be.false;
+    radio5.focus();
+    await elementUpdated(el);
+    expect(document.activeElement === radio5).to.be.true;
+    expect(radio5.checked).to.be.true;
 
-        el.focus();
-        await elementUpdated(el);
-
-        expect(document.activeElement === selected).to.be.true;
-    });
-    it('focuses the child input not the root when [tabindex=-1]', async () => {
-        const values = ['first', 'second', 'third'];
-        const el = await fixture(html`
-            
-                Option 1
-                Option 2
-                Option 3
-            
-        `);
-
-        await elementUpdated(el);
-        const first = el.querySelector('[value="first"]') as Radio;
-        const selected = el.querySelector('[value="second"]') as Radio;
-
-        expect(selected.tabIndex).to.equal(0);
-        expect(first.tabIndex).to.equal(-1);
-
-        const firstRect = first.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [firstRect.x + 2, firstRect.y + 2],
-                },
-                {
-                    type: 'down',
-                },
-            ],
-        });
-        await elementUpdated(el);
-
-        // Safari can have a situation where it thinks the root is focused, but really something inside of the
-        // element is focused instead, this tests for both no focus on the root or focus inside of the element.
-        expect(
-            !first.matches(':focus') || first.matches(':focus-within'),
-            'root should not'
-        ).to.be.true;
+    await sendKeys({
+      press: "ArrowRight",
     });
-    it('does not select on focus', async () => {
-        const el = await fixture(html`
-            
-                Options 1
-                Options 2
-                Options 3
-                Options 4
-                Options 5
-            
-        `);
-
-        await elementUpdated(el);
-
-        const radio1 = el.querySelector('sp-radio:nth-child(1)') as Radio;
-        const radio2 = el.querySelector('sp-radio:nth-child(2)') as Radio;
-
-        expect(el.selected).to.equal('');
-
-        radio1.focus();
-        await elementUpdated(el);
-
-        expect(el.selected).to.equal('');
-        el.selected = '1';
-        await elementUpdated(el);
-
-        expect(el.selected).to.equal('1');
-        expect(radio1.checked).to.be.true;
-        radio2.focus();
-        await elementUpdated(el);
-
-        expect(el.selected).to.equal('1');
-        expect(radio1.checked).to.be.true;
-    });
-    it('loads accepts keyboard events while focused', async () => {
-        const el = await fixture(html`
-            
-                Options 1
-                Options 2
-                Options 3
-                Options 4
-                Options 5
-            
-        `);
-
-        await elementUpdated(el);
-
-        const radio1 = el.querySelector('sp-radio:nth-child(1)') as Radio;
-        const radio2 = el.querySelector('sp-radio:nth-child(2)') as Radio;
-        const radio3 = el.querySelector('sp-radio:nth-child(3)') as Radio;
-        const radio4 = el.querySelector('sp-radio:nth-child(4)') as Radio;
-        const radio5 = el.querySelector('sp-radio:nth-child(5)') as Radio;
-
-        radio1.focus();
-        await elementUpdated(el);
-
-        el.dispatchEvent(arrowRightEvent());
-        await elementUpdated(el);
-
-        expect(document.activeElement === radio2).to.be.true;
-
-        el.dispatchEvent(arrowDownEvent());
-        await elementUpdated(el);
-
-        expect(document.activeElement === radio3).to.be.true;
-
-        el.dispatchEvent(endEvent());
-        await elementUpdated(el);
-
-        expect(document.activeElement === radio5).to.be.true;
+    await elementUpdated(el);
 
-        el.dispatchEvent(arrowLeftEvent());
-        await elementUpdated(el);
+    expect(document.activeElement === radio1).to.be.true;
+    expect(radio1.checked).to.be.true;
+  });
+  it("acknowledges `disabled` and accepts keyboard events while focused", async () => {
+    const el = await fixture(html`
+      
+        Option 1
+        Option 2
+        Option 3
+        Option 4
+        Option 5
+      
+    `);
 
-        expect(document.activeElement === radio4).to.be.true;
+    await elementUpdated(el);
 
-        el.dispatchEvent(arrowUpEvent());
-        await elementUpdated(el);
+    const radio2 = el.querySelector("sp-radio:nth-child(2)") as Radio;
+    const radio4 = el.querySelector("sp-radio:nth-child(4)") as Radio;
 
-        expect(document.activeElement === radio3).to.be.true;
+    radio2.focus();
+    await elementUpdated(el);
+    expect(document.activeElement === radio2, "start 2").to.be.true;
+    expect(el.selected).to.equal("");
 
-        el.dispatchEvent(homeEvent());
-        await elementUpdated(el);
+    el.dispatchEvent(enterEvent());
+    el.dispatchEvent(endEvent());
+    await elementUpdated(el);
+    expect(document.activeElement === radio4, "first 4").to.be.true;
+    expect(el.selected).to.equal("4");
 
-        expect(document.activeElement === radio1).to.be.true;
+    el.dispatchEvent(homeEvent());
+    await elementUpdated(el);
 
-        radio1.blur();
-    });
-    it('accepts keyboard interactions where `checked` and `calculateFocusInIndex` might conflict', async () => {
-        const el = await fixture(html`
-            
-                Options 1
-                Options 2
-                Options 3
-                Options 4
-                Options 5
-            
-        `);
-
-        await elementUpdated(el);
-
-        const radio1 = el.querySelector('sp-radio:nth-child(1)') as Radio;
-        const radio5 = el.querySelector('sp-radio:nth-child(5)') as Radio;
-
-        radio5.focus();
-        await elementUpdated(el);
-        expect(document.activeElement === radio5).to.be.true;
-        expect(radio5.checked).to.be.true;
-
-        await sendKeys({
-            press: 'ArrowRight',
-        });
-        await elementUpdated(el);
-
-        expect(document.activeElement === radio1).to.be.true;
-        expect(radio1.checked).to.be.true;
-    });
-    it('acknowledges `disabled` and accepts keyboard events while focused', async () => {
-        const el = await fixture(html`
-            
-                Option 1
-                Option 2
-                Option 3
-                Option 4
-                Option 5
-            
-        `);
-
-        await elementUpdated(el);
-
-        const radio2 = el.querySelector('sp-radio:nth-child(2)') as Radio;
-        const radio4 = el.querySelector('sp-radio:nth-child(4)') as Radio;
-
-        radio2.focus();
-        await elementUpdated(el);
-        expect(document.activeElement === radio2, 'start 2').to.be.true;
-        expect(el.selected).to.equal('');
+    expect(document.activeElement === radio2, "second 2").to.be.true;
 
-        el.dispatchEvent(enterEvent());
-        el.dispatchEvent(endEvent());
-        await elementUpdated(el);
-        expect(document.activeElement === radio4, 'first 4').to.be.true;
-        expect(el.selected).to.equal('4');
+    el.dispatchEvent(arrowUpEvent());
+    await elementUpdated(el);
 
-        el.dispatchEvent(homeEvent());
-        await elementUpdated(el);
+    expect(document.activeElement === radio4, "third 4").to.be.true;
 
-        expect(document.activeElement === radio2, 'second 2').to.be.true;
+    el.dispatchEvent(arrowDownEvent());
+    await elementUpdated(el);
 
-        el.dispatchEvent(arrowUpEvent());
-        await elementUpdated(el);
-
-        expect(document.activeElement === radio4, 'third 4').to.be.true;
-
-        el.dispatchEvent(arrowDownEvent());
-        await elementUpdated(el);
-
-        expect(document.activeElement === radio2, 'fourth 2').to.be.true;
-    });
+    expect(document.activeElement === radio2, "fourth 2").to.be.true;
+  });
 });
 
-describe('Group Accessibility', () => {
-    it('created the expected accessibility tree', async () => {
-        await fixture(html`
-            
-                Option 1
-                Option 2
-                Option 3
-            
-        `);
-
-        type NamedRoledAndCheckedNode = {
-            name: string;
-            role: string;
-            checked: boolean;
-        };
-        const snapshot = (await a11ySnapshot(
-            {}
-        )) as unknown as NamedRoledAndCheckedNode & {
-            children: NamedRoledAndCheckedNode[];
-        };
-
-        expect(
-            findAccessibilityNode(
-                snapshot,
-                (
-                    node // Firefox uses 'group' instead of 'radiogroup' here.
-                ) =>
-                    (node.role === 'radiogroup' || node.role === 'group') &&
-                    node.name === 'Testing Label'
-            ),
-            'Has a "radiogroup" with the supplied name'
-        ).to.not.be.null;
-        expect(
-            findAccessibilityNode(
-                snapshot,
-                (node) =>
-                    node.role === 'radio' &&
-                    node.checked &&
-                    node.name === 'Option 2'
-            ),
-            'Has a named and checked "radio" element'
-        ).to.not.be.null;
-        expect(
-            findAccessibilityNode(
-                snapshot,
-                (node) =>
-                    node.name === 'Option 2' && node.role.startsWith('text')
-            ),
-            'Does not have a text leaf named like the "radio" element'
-        ).to.be.null;
-    });
+describe("Group Accessibility", () => {
+  it("created the expected accessibility tree", async () => {
+    await fixture(html`
+      
+        Option 1
+        Option 2
+        Option 3
+      
+    `);
+
+    type NamedRoledAndCheckedNode = {
+      name: string;
+      role: string;
+      checked: boolean;
+    };
+    const snapshot = (await a11ySnapshot(
+      {},
+    )) as unknown as NamedRoledAndCheckedNode & {
+      children: NamedRoledAndCheckedNode[];
+    };
+
+    expect(
+      findAccessibilityNode(
+        snapshot,
+        (
+          node, // Firefox uses 'group' instead of 'radiogroup' here.
+        ) =>
+          (node.role === "radiogroup" || node.role === "group") &&
+          node.name === "Testing Label",
+      ),
+      'Has a "radiogroup" with the supplied name',
+    ).to.not.be.null;
+    expect(
+      findAccessibilityNode(
+        snapshot,
+        (node) =>
+          node.role === "radio" && node.checked && node.name === "Option 2",
+      ),
+      'Has a named and checked "radio" element',
+    ).to.not.be.null;
+    expect(
+      findAccessibilityNode(
+        snapshot,
+        (node) => node.name === "Option 2" && node.role.startsWith("text"),
+      ),
+      'Does not have a text leaf named like the "radio" element',
+    ).to.be.null;
+  });
 });
 
-describe('Radio Group', () => {
-    let testDiv!: HTMLDivElement;
-
-    beforeEach(async () => {
-        testDiv = await fixture(html`
-            

-                
-                    Option 1
-                    Option 2
-                    Option 3
-                
-                
-                    Option 1
-                    Option 2
-                    Option 3
-                
-                
-                    Option 1
-                    Option 2
-                
-                
-                    Option 1
-                    Option 2
-                
-                
-                    Option 1
-                    Option 2
-                    Option 3
-                
-                
-                    Option 1
-                    Option 2
-                    Option 3
-                
-                
-                    Option 1
-                    Option 2
-                
-                
-                    Option 5
-                    Option 7
-                
-                
-                    Option 1
-                    Option 2
-                    Option 3
-                
-            

-        `);
-    });
-
-    it('loads', () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-default'
-        ) as RadioGroup;
-        const radioChildren = radioGroup.querySelectorAll('sp-radio');
-
-        expect(radioGroup).to.exist;
-        expect(radioChildren.length).to.equal(3);
-    });
-
-    it('loads accessibly', async () => {
-        await expect(testDiv).to.be.accessible();
-    });
-
-    it('validates selection', async () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-none-selected'
-        ) as RadioGroup;
-
-        expect(radioGroup.selected).to.equal('');
-
-        radioGroup.selected = 'missing';
-        await elementUpdated(radioGroup);
-
-        expect(radioGroup.selected).to.equal('');
-    });
-
-    it('can have selection prevented', async () => {
-        const el = testDiv.querySelector(
-            'sp-radio-group#test-default'
-        ) as RadioGroup;
-        const secondRadio = el.querySelector('sp-radio[value=second]') as Radio;
-        const thirdRadio = el.querySelector('sp-radio[value=third]') as Radio;
-
-        await elementUpdated(el);
-        expect(el.selected).to.equal('first');
-
-        secondRadio.click();
-
-        await elementUpdated(el);
-        expect(el.selected).to.equal('second');
-
-        el.addEventListener('change', (event) => event.preventDefault());
-
-        thirdRadio.click();
-
-        await elementUpdated(el);
-        expect(el.selected).to.equal('second');
-    });
-
-    it('reflects checked radio with selected property', async () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-default'
-        ) as RadioGroup;
-        const firstRadio = radioGroup.querySelector(
-            'sp-radio[value=first]'
-        ) as Radio;
-        const secondRadio = radioGroup.querySelector(
-            'sp-radio[value=second]'
-        ) as Radio;
-        const thirdRadio = radioGroup.querySelector(
-            'sp-radio[value=third]'
-        ) as Radio;
-
-        expect(firstRadio.checked).to.be.true;
-        expect(secondRadio.checked).to.be.false;
-        expect(thirdRadio.checked).to.be.false;
-        expect(radioGroup.selected).to.equal(firstRadio.value);
-
-        secondRadio.click();
-        await elementUpdated(radioGroup);
-
-        expect(firstRadio.checked).to.be.false;
-        expect(secondRadio.checked).to.be.true;
-        expect(thirdRadio.checked).to.be.false;
-        expect(radioGroup.selected).to.equal(secondRadio.value);
-
-        thirdRadio.click();
-        await elementUpdated(radioGroup);
-
-        expect(firstRadio.checked).to.be.false;
-        expect(secondRadio.checked).to.be.false;
-        expect(thirdRadio.checked).to.be.true;
-        expect(radioGroup.selected).to.equal(thirdRadio.value);
-    });
-
-    it('forces only one radio to be checked', () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-multiple-checked'
-        ) as RadioGroup;
-        const checkedRadios = radioGroup.querySelectorAll('sp-radio[checked]');
-
-        expect(radioGroup.selected).to.equal('first');
-        expect(checkedRadios.length).to.equal(1);
-    });
-
-    it('respects clicking on disabled attribute causing nothing to happen', async () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-disabled'
-        ) as RadioGroup;
-        const checkedRadio = radioGroup.querySelector(
-            'sp-radio[checked]'
-        ) as Radio;
-        const disabledRadio = radioGroup.querySelector(
-            'sp-radio[disabled]'
-        ) as Radio;
-
-        disabledRadio.click();
-        await elementUpdated(radioGroup);
-
-        expect(disabledRadio.checked).to.be.false;
-        expect(checkedRadio.checked).to.be.true;
-        expect(radioGroup.selected).to.equal(checkedRadio.value);
-    });
-
-    it('de-checks all but first checked radio if multiple checked', () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-multiple-checked'
-        ) as RadioGroup;
-        const radio1 = radioGroup.querySelector(
-            'sp-radio[value=first]'
-        ) as Radio;
-        const radio2 = radioGroup.querySelector(
-            'sp-radio[value=second]'
-        ) as Radio;
-
-        expect(radioGroup.selected).to.equal('first');
-        expect(radio1.checked).to.be.true;
-        expect(radio2.checked).to.be.false;
-    });
-
-    it('ensures setting selection updates checked radio', async () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-selected'
-        ) as RadioGroup;
-        const radio1 = radioGroup.querySelector(
-            'sp-radio[value=first]'
-        ) as Radio;
-        const radio2 = radioGroup.querySelector(
-            'sp-radio[value=second]'
-        ) as Radio;
-        const radio3 = radioGroup.querySelector(
-            'sp-radio[value=third]'
-        ) as Radio;
-
-        expect(radioGroup.selected).to.equal('third');
-        expect(radio1.checked).to.be.false;
-        expect(radio2.checked).to.be.false;
-        expect(radio3.checked, 'initial').to.be.true;
-
-        radioGroup.selected = 'second';
-        await elementUpdated(radioGroup);
-
-        expect(radioGroup.selected).to.equal('second');
-        expect(radio1.checked).to.be.false;
-        expect(radio2.checked, 'second').to.be.true;
-        expect(radio3.checked).to.be.false;
-
-        radioGroup.selected = 'first';
-        await elementUpdated(radioGroup);
-
-        expect(radioGroup.selected).to.equal('first');
-        expect(radio1.checked, 'third').to.be.true;
-        expect(radio2.checked).to.be.false;
-        expect(radio3.checked).to.be.false;
-    });
-
-    it('ensures setting selected and clicking on radio both work together', async () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-selected-click'
-        ) as RadioGroup;
-        const radio1 = radioGroup.querySelector(
-            'sp-radio[value=first]'
-        ) as Radio;
-        const radio2 = radioGroup.querySelector(
-            'sp-radio[value=second]'
-        ) as Radio;
-        const radio3 = radioGroup.querySelector(
-            'sp-radio[value=third]'
-        ) as Radio;
-
-        expect(radioGroup.selected).to.equal('third');
-        radio2.click();
-        await elementUpdated(radioGroup);
-
-        expect(radioGroup.selected).to.equal('second');
-        expect(radio1.checked).to.be.false;
-        expect(radio2.checked).to.be.true;
-        expect(radio3.checked).to.be.false;
-
-        radioGroup.selected = 'first';
-        await elementUpdated(radioGroup);
-
-        expect(radioGroup.selected).to.equal('first');
-        expect(radio1.checked, 'moved to checked').to.be.true;
-        expect(radio2.checked).to.be.false;
-        expect(radio3.checked).to.be.false;
-    });
-
-    it('prioritizes checked over selected on initialization when conflicting', () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-checked-prioritized'
-        ) as RadioGroup;
-        const radio1 = radioGroup.querySelector(
-            'sp-radio[value=first]'
-        ) as Radio;
-        const radio2 = radioGroup.querySelector(
-            'sp-radio[value=second]'
-        ) as Radio;
-
-        expect(radioGroup.selected).to.equal('first');
-        expect(radio1.checked).to.be.true;
-        expect(radio2.checked).to.be.false;
-    });
-
-    it('handles integer values for radio buttons', () => {
-        const radioGroup = testDiv.querySelector(
-            'sp-radio-group#test-integer-value'
-        ) as RadioGroup;
-
-        expect(radioGroup.selected).to.equal('5');
-    });
-
-    it('prevents `change` events from radio buttons', async () => {
-        const changeSpy = spy();
-        const onChange = (event: Event & { target: RadioGroup }): void => {
-            changeSpy(event.target.selected);
-        };
-        const el = await fixture(html`
-            
-                Bulbasaur
-                Squirtle
-                Charmander
-            
-        `);
-
-        const bulbasaur = el.querySelector('[value="bulbasaur"]') as Radio;
-        const charmander = el.querySelector('[value="charmander"]') as Radio;
-
-        bulbasaur.click();
-        bulbasaur.click();
-        charmander.click();
-
-        expect(changeSpy.calledWith(undefined)).to.be.false;
-    });
+describe("Radio Group", () => {
+  let testDiv!: HTMLDivElement;
+
+  beforeEach(async () => {
+    testDiv = await fixture(html`
+      

+        
+          Option 1
+          Option 2
+          Option 3
+        
+        
+          Option 1
+          Option 2
+          Option 3
+        
+        
+          Option 1
+          Option 2
+        
+        
+          Option 1
+          Option 2
+        
+        
+          Option 1
+          Option 2
+          Option 3
+        
+        
+          Option 1
+          Option 2
+          Option 3
+        
+        
+          Option 1
+          Option 2
+        
+        
+          Option 5
+          Option 7
+        
+        
+          Option 1
+          Option 2
+          Option 3
+        
+      

+    `);
+  });
+
+  it("loads", () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-default",
+    ) as RadioGroup;
+    const radioChildren = radioGroup.querySelectorAll("sp-radio");
+
+    expect(radioGroup).to.exist;
+    expect(radioChildren.length).to.equal(3);
+  });
+
+  it("loads accessibly", async () => {
+    await expect(testDiv).to.be.accessible();
+  });
+
+  it("validates selection", async () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-none-selected",
+    ) as RadioGroup;
+
+    expect(radioGroup.selected).to.equal("");
+
+    radioGroup.selected = "missing";
+    await elementUpdated(radioGroup);
+
+    expect(radioGroup.selected).to.equal("");
+  });
+
+  it("can have selection prevented", async () => {
+    const el = testDiv.querySelector(
+      "sp-radio-group#test-default",
+    ) as RadioGroup;
+    const secondRadio = el.querySelector("sp-radio[value=second]") as Radio;
+    const thirdRadio = el.querySelector("sp-radio[value=third]") as Radio;
+
+    await elementUpdated(el);
+    expect(el.selected).to.equal("first");
+
+    secondRadio.click();
+
+    await elementUpdated(el);
+    expect(el.selected).to.equal("second");
+
+    el.addEventListener("change", (event) => event.preventDefault());
+
+    thirdRadio.click();
+
+    await elementUpdated(el);
+    expect(el.selected).to.equal("second");
+  });
+
+  it("reflects checked radio with selected property", async () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-default",
+    ) as RadioGroup;
+    const firstRadio = radioGroup.querySelector(
+      "sp-radio[value=first]",
+    ) as Radio;
+    const secondRadio = radioGroup.querySelector(
+      "sp-radio[value=second]",
+    ) as Radio;
+    const thirdRadio = radioGroup.querySelector(
+      "sp-radio[value=third]",
+    ) as Radio;
+
+    expect(firstRadio.checked).to.be.true;
+    expect(secondRadio.checked).to.be.false;
+    expect(thirdRadio.checked).to.be.false;
+    expect(radioGroup.selected).to.equal(firstRadio.value);
+
+    secondRadio.click();
+    await elementUpdated(radioGroup);
+
+    expect(firstRadio.checked).to.be.false;
+    expect(secondRadio.checked).to.be.true;
+    expect(thirdRadio.checked).to.be.false;
+    expect(radioGroup.selected).to.equal(secondRadio.value);
+
+    thirdRadio.click();
+    await elementUpdated(radioGroup);
+
+    expect(firstRadio.checked).to.be.false;
+    expect(secondRadio.checked).to.be.false;
+    expect(thirdRadio.checked).to.be.true;
+    expect(radioGroup.selected).to.equal(thirdRadio.value);
+  });
+
+  it("forces only one radio to be checked", () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-multiple-checked",
+    ) as RadioGroup;
+    const checkedRadios = radioGroup.querySelectorAll("sp-radio[checked]");
+
+    expect(radioGroup.selected).to.equal("first");
+    expect(checkedRadios.length).to.equal(1);
+  });
+
+  it("respects clicking on disabled attribute causing nothing to happen", async () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-disabled",
+    ) as RadioGroup;
+    const checkedRadio = radioGroup.querySelector("sp-radio[checked]") as Radio;
+    const disabledRadio = radioGroup.querySelector(
+      "sp-radio[disabled]",
+    ) as Radio;
+
+    disabledRadio.click();
+    await elementUpdated(radioGroup);
+
+    expect(disabledRadio.checked).to.be.false;
+    expect(checkedRadio.checked).to.be.true;
+    expect(radioGroup.selected).to.equal(checkedRadio.value);
+  });
+
+  it("de-checks all but first checked radio if multiple checked", () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-multiple-checked",
+    ) as RadioGroup;
+    const radio1 = radioGroup.querySelector("sp-radio[value=first]") as Radio;
+    const radio2 = radioGroup.querySelector("sp-radio[value=second]") as Radio;
+
+    expect(radioGroup.selected).to.equal("first");
+    expect(radio1.checked).to.be.true;
+    expect(radio2.checked).to.be.false;
+  });
+
+  it("ensures setting selection updates checked radio", async () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-selected",
+    ) as RadioGroup;
+    const radio1 = radioGroup.querySelector("sp-radio[value=first]") as Radio;
+    const radio2 = radioGroup.querySelector("sp-radio[value=second]") as Radio;
+    const radio3 = radioGroup.querySelector("sp-radio[value=third]") as Radio;
+
+    expect(radioGroup.selected).to.equal("third");
+    expect(radio1.checked).to.be.false;
+    expect(radio2.checked).to.be.false;
+    expect(radio3.checked, "initial").to.be.true;
+
+    radioGroup.selected = "second";
+    await elementUpdated(radioGroup);
+
+    expect(radioGroup.selected).to.equal("second");
+    expect(radio1.checked).to.be.false;
+    expect(radio2.checked, "second").to.be.true;
+    expect(radio3.checked).to.be.false;
+
+    radioGroup.selected = "first";
+    await elementUpdated(radioGroup);
+
+    expect(radioGroup.selected).to.equal("first");
+    expect(radio1.checked, "third").to.be.true;
+    expect(radio2.checked).to.be.false;
+    expect(radio3.checked).to.be.false;
+  });
+
+  it("ensures setting selected and clicking on radio both work together", async () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-selected-click",
+    ) as RadioGroup;
+    const radio1 = radioGroup.querySelector("sp-radio[value=first]") as Radio;
+    const radio2 = radioGroup.querySelector("sp-radio[value=second]") as Radio;
+    const radio3 = radioGroup.querySelector("sp-radio[value=third]") as Radio;
+
+    expect(radioGroup.selected).to.equal("third");
+    radio2.click();
+    await elementUpdated(radioGroup);
+
+    expect(radioGroup.selected).to.equal("second");
+    expect(radio1.checked).to.be.false;
+    expect(radio2.checked).to.be.true;
+    expect(radio3.checked).to.be.false;
+
+    radioGroup.selected = "first";
+    await elementUpdated(radioGroup);
+
+    expect(radioGroup.selected).to.equal("first");
+    expect(radio1.checked, "moved to checked").to.be.true;
+    expect(radio2.checked).to.be.false;
+    expect(radio3.checked).to.be.false;
+  });
+
+  it("prioritizes checked over selected on initialization when conflicting", () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-checked-prioritized",
+    ) as RadioGroup;
+    const radio1 = radioGroup.querySelector("sp-radio[value=first]") as Radio;
+    const radio2 = radioGroup.querySelector("sp-radio[value=second]") as Radio;
+
+    expect(radioGroup.selected).to.equal("first");
+    expect(radio1.checked).to.be.true;
+    expect(radio2.checked).to.be.false;
+  });
+
+  it("handles integer values for radio buttons", () => {
+    const radioGroup = testDiv.querySelector(
+      "sp-radio-group#test-integer-value",
+    ) as RadioGroup;
+
+    expect(radioGroup.selected).to.equal("5");
+  });
+
+  it("prevents `change` events from radio buttons", async () => {
+    const changeSpy = spy();
+    const onChange = (event: Event & { target: RadioGroup }): void => {
+      changeSpy(event.target.selected);
+    };
+    const el = await fixture(html`
+      
+        Bulbasaur
+        Squirtle
+        Charmander
+      
+    `);
+
+    const bulbasaur = el.querySelector('[value="bulbasaur"]') as Radio;
+    const charmander = el.querySelector('[value="charmander"]') as Radio;
+
+    bulbasaur.click();
+    bulbasaur.click();
+    charmander.click();
+
+    expect(changeSpy.calledWith(undefined)).to.be.false;
+  });
 });
 
-describe('Radio Group - late children', () => {
-    it('accepts frame late children', async () => {
-        /**
-         * In some cases (e.g. when wrapped in React components) will cause otherwise standard looking
-         * DOM structures to add `` children to `` parents in a non-syncronous manner.
-         *
-         * This test emulates that render process to ensure that validation will still work as expect in that context.
-         */
-        const test = await fixture(html`
-            

-                Bulbasaur
-                Squirtle
-                Charmander
-                Other
-            

-        `);
-        const group = document.createElement('sp-radio-group');
-        const buttons = [...test.querySelectorAll('sp-radio')] as Radio[];
-
-        test.append(group);
-        group.selected = 'first';
-        Promise.resolve().then(function () {
-            group.append(...buttons);
-        });
-        await nextFrame();
-        await nextFrame();
-
-        expect(group.buttons.length).to.equal(4);
-        expect(group.selected).to.equal('first');
-    });
-    it('emits change events on arrow key events', async () => {
-        const changeSpy = spy();
-        const onChange = (event: Event & { target: RadioGroup }): void => {
-            changeSpy(event.target.selected);
-        };
-        const el = await fixture(html`
-            
-                Bulbasaur
-                Squirtle
-                Charmander
-            
-        `);
-        const bulbasaur = el.querySelector('[value="bulbasaur"]') as Radio;
-        const squirtle = el.querySelector('[value="squirtle"]') as Radio;
-
-        bulbasaur.focus();
-        await elementUpdated(el);
-        expect(changeSpy.callCount).to.equal(0);
-
-        el.dispatchEvent(arrowRightEvent());
-        await elementUpdated(el);
-        expect(changeSpy.callCount).to.equal(1);
-        expect(document.activeElement === squirtle).to.be.true;
-
-        el.dispatchEvent(arrowLeftEvent());
-        await elementUpdated(el);
-        expect(changeSpy.callCount).to.equal(2);
-        expect(document.activeElement === bulbasaur).to.be.true;
+describe("Radio Group - late children", () => {
+  it("accepts frame late children", async () => {
+    /**
+     * In some cases (e.g. when wrapped in React components) will cause otherwise standard looking
+     * DOM structures to add `` children to `` parents in a non-syncronous manner.
+     *
+     * This test emulates that render process to ensure that validation will still work as expect in that context.
+     */
+    const test = await fixture(html`
+      

+        Bulbasaur
+        Squirtle
+        Charmander
+        Other
+      

+    `);
+    const group = document.createElement("sp-radio-group");
+    const buttons = [...test.querySelectorAll("sp-radio")] as Radio[];
+
+    test.append(group);
+    group.selected = "first";
+    Promise.resolve().then(function () {
+      group.append(...buttons);
     });
+    await nextFrame();
+    await nextFrame();
+
+    expect(group.buttons.length).to.equal(4);
+    expect(group.selected).to.equal("first");
+  });
+  it("emits change events on arrow key events", async () => {
+    const changeSpy = spy();
+    const onChange = (event: Event & { target: RadioGroup }): void => {
+      changeSpy(event.target.selected);
+    };
+    const el = await fixture(html`
+      
+        Bulbasaur
+        Squirtle
+        Charmander
+      
+    `);
+    const bulbasaur = el.querySelector('[value="bulbasaur"]') as Radio;
+    const squirtle = el.querySelector('[value="squirtle"]') as Radio;
+
+    bulbasaur.focus();
+    await elementUpdated(el);
+    expect(changeSpy.callCount).to.equal(0);
+
+    el.dispatchEvent(arrowRightEvent());
+    await elementUpdated(el);
+    expect(changeSpy.callCount).to.equal(1);
+    expect(document.activeElement === squirtle).to.be.true;
+
+    el.dispatchEvent(arrowLeftEvent());
+    await elementUpdated(el);
+    expect(changeSpy.callCount).to.equal(2);
+    expect(document.activeElement === bulbasaur).to.be.true;
+  });
 });
diff --git a/packages/radio/test/radio-memory.test.ts b/packages/radio/test/radio-memory.test.ts
index f26af00cff..2cbadb95bc 100644
--- a/packages/radio/test/radio-memory.test.ts
+++ b/packages/radio/test/radio-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/radio/sp-radio.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/radio/sp-radio.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/radio/test/radio.test.ts b/packages/radio/test/radio.test.ts
index 705b103ae2..0757c87ee8 100644
--- a/packages/radio/test/radio.test.ts
+++ b/packages/radio/test/radio.test.ts
@@ -10,187 +10,185 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/radio/sp-radio.js';
-import { Radio } from '@spectrum-web-components/radio';
+import "@spectrum-web-components/radio/sp-radio.js";
+import { Radio } from "@spectrum-web-components/radio";
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    triggerBlurFor,
-    waitUntil,
-} from '@open-wc/testing';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { sendKeys } from '@web/test-runner-commands';
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  triggerBlurFor,
+  waitUntil,
+} from "@open-wc/testing";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { sendKeys } from "@web/test-runner-commands";
 
 function labelNodeForRadio(radio: Radio): Node {
-    if (!radio.shadowRoot) throw new Error('No shadowRoot');
+  if (!radio.shadowRoot) {
+    throw new Error("No shadowRoot");
+  }
 
-    const slotEl = radio.shadowRoot.querySelector('slot') as HTMLSlotElement;
+  const slotEl = radio.shadowRoot.querySelector("slot") as HTMLSlotElement;
 
-    return slotEl.assignedNodes()[0];
+  return slotEl.assignedNodes()[0];
 }
 
-describe('Radio', () => {
-    let testDiv!: HTMLDivElement;
-
-    beforeEach(async () => {
-        testDiv = await fixture(html`
-            

-                Option 1
-                Option 2
-                Option 3
-                Option 4
-            

-        `);
-    });
-    it('loads', async () => {
-        const el = testDiv.querySelector('sp-radio[value=first]') as Radio;
-        const textNode = labelNodeForRadio(el as Radio);
-
-        expect(el).to.not.equal(undefined);
-        expect(el.innerText).to.equal('Option 1');
-        expect(textNode.textContent).to.equal('Option 1');
+describe("Radio", () => {
+  let testDiv!: HTMLDivElement;
+
+  beforeEach(async () => {
+    testDiv = await fixture(html`
+      

+        Option 1
+        Option 2
+        Option 3
+        Option 4
+      

+    `);
+  });
+  it("loads", async () => {
+    const el = testDiv.querySelector("sp-radio[value=first]") as Radio;
+    const textNode = labelNodeForRadio(el as Radio);
+
+    expect(el).to.not.equal(undefined);
+    expect(el.innerText).to.equal("Option 1");
+    expect(textNode.textContent).to.equal("Option 1");
+  });
+
+  it("loads accessibly", async () => {
+    await expect(testDiv).to.be.accessible();
+  });
+
+  it("respects checked attribute", () => {
+    const el1 = document.querySelector("[value=first]") as Radio;
+    const el2 = testDiv.querySelector("[value=second]") as Radio;
+
+    expect(el1.checked).to.be.true;
+    expect(el2.checked).to.be.false;
+  });
+
+  it("handles click events", async () => {
+    let value = "";
+    let checked = false;
+    const el = testDiv.querySelector("[value=third]") as Radio;
+
+    el.addEventListener("change", (event) => {
+      const target = event.target as Radio;
+
+      value = target.value;
+      checked = target.checked;
     });
 
-    it('loads accessibly', async () => {
-        await expect(testDiv).to.be.accessible();
-    });
+    expect(el.checked).to.be.false;
+    expect(value).to.equal("");
+    expect(checked).to.be.false;
 
-    it('respects checked attribute', () => {
-        const el1 = document.querySelector('[value=first]') as Radio;
-        const el2 = testDiv.querySelector('[value=second]') as Radio;
+    el.click();
+    await elementUpdated(el);
 
-        expect(el1.checked).to.be.true;
-        expect(el2.checked).to.be.false;
-    });
+    expect(el.checked).to.be.true;
+    expect(value).to.equal("third");
+    expect(checked).to.be.true;
+  });
 
-    it('handles click events', async () => {
-        let value = '';
-        let checked = false;
-        const el = testDiv.querySelector('[value=third]') as Radio;
+  it("autofocuses", async () => {
+    const autoElement = testDiv.querySelector("sp-radio[autofocus]") as Radio;
 
-        el.addEventListener('change', (event) => {
-            const target = event.target as Radio;
+    expect(autoElement).to.exist;
+    await waitUntil(
+      () => document.activeElement === autoElement,
+      "Autofocused",
+    );
 
-            value = target.value;
-            checked = target.checked;
-        });
+    await triggerBlurFor(autoElement);
 
-        expect(el.checked).to.be.false;
-        expect(value).to.equal('');
-        expect(checked).to.be.false;
+    expect(document.activeElement).to.not.equal(autoElement);
+  });
 
-        el.click();
-        await elementUpdated(el);
+  it("ensures clicking disabled does not check them", async () => {
+    const el = testDiv.querySelector("sp-radio[disabled]") as Radio;
 
-        expect(el.checked).to.be.true;
-        expect(value).to.equal('third');
-        expect(checked).to.be.true;
-    });
+    expect(el.checked).to.be.false;
 
-    it('autofocuses', async () => {
-        const autoElement = testDiv.querySelector(
-            'sp-radio[autofocus]'
-        ) as Radio;
+    el.click();
+    await elementUpdated(el);
 
-        expect(autoElement).to.exist;
-        await waitUntil(
-            () => document.activeElement === autoElement,
-            'Autofocused'
-        );
+    expect(el.checked).to.be.false;
+  });
 
-        await triggerBlurFor(autoElement);
+  it("renders [invalid]", async () => {
+    const el = await fixture(html`
+      Component
+    `);
 
-        expect(document.activeElement).to.not.equal(autoElement);
-    });
+    expect(el.getAttribute("aria-invalid")).to.equal("true");
+  });
 
-    it('ensures clicking disabled does not check them', async () => {
-        const el = testDiv.querySelector('sp-radio[disabled]') as Radio;
+  describe('accepts "clicks"', () => {
+    let el!: Radio;
 
-        expect(el.checked).to.be.false;
-
-        el.click();
-        await elementUpdated(el);
-
-        expect(el.checked).to.be.false;
+    beforeEach(async () => {
+      el = await fixture(html` Component `);
     });
+    it("imperatively", async () => {
+      el.click();
+      await elementUpdated(el);
 
-    it('renders [invalid]', async () => {
-        const el = await fixture(html`
-            Component
-        `);
-
-        expect(el.getAttribute('aria-invalid')).to.equal('true');
+      expect(el.checked).to.be.true;
     });
+    it("as events", async () => {
+      el.dispatchEvent(new Event("click"));
+      await elementUpdated(el);
 
-    describe('accepts "clicks"', () => {
-        let el!: Radio;
-
-        beforeEach(async () => {
-            el = await fixture(html`
-                Component
-            `);
-        });
-        it('imperatively', async () => {
-            el.click();
-            await elementUpdated(el);
-
-            expect(el.checked).to.be.true;
-        });
-        it('as events', async () => {
-            el.dispatchEvent(new Event('click'));
-            await elementUpdated(el);
-
-            expect(el.checked).to.be.true;
-        });
-        it('from the keyboard', async () => {
-            el.focus();
-            await elementUpdated(el);
-            await sendKeys({
-                press: 'Space',
-            });
-            await elementUpdated(el);
-
-            expect(el.checked).to.be.true;
-        });
-        it('imperatively', async () => {
-            const boundingClientRecrt = el.getBoundingClientRect();
-            const radioPosition: [number, number] = [
-                boundingClientRecrt.x + boundingClientRecrt.width / 2,
-                boundingClientRecrt.y + boundingClientRecrt.height / 2,
-            ];
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: radioPosition,
-                    },
-                    {
-                        type: 'down',
-                    },
-                    {
-                        type: 'up',
-                    },
-                ],
-            });
-            await elementUpdated(el);
-
-            expect(el.checked).to.be.true;
-        });
+      expect(el.checked).to.be.true;
     });
+    it("from the keyboard", async () => {
+      el.focus();
+      await elementUpdated(el);
+      await sendKeys({
+        press: "Space",
+      });
+      await elementUpdated(el);
+
+      expect(el.checked).to.be.true;
+    });
+    it("imperatively", async () => {
+      const boundingClientRecrt = el.getBoundingClientRect();
+      const radioPosition: [number, number] = [
+        boundingClientRecrt.x + boundingClientRecrt.width / 2,
+        boundingClientRecrt.y + boundingClientRecrt.height / 2,
+      ];
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: radioPosition,
+          },
+          {
+            type: "down",
+          },
+          {
+            type: "up",
+          },
+        ],
+      });
+      await elementUpdated(el);
+
+      expect(el.checked).to.be.true;
+    });
+  });
 
-    it('maintains its value when [readonly]', async () => {
-        const el = await fixture(html`
-            Component
-        `);
+  it("maintains its value when [readonly]", async () => {
+    const el = await fixture(html`
+      Component
+    `);
 
-        expect(el.checked).to.be.true;
+    expect(el.checked).to.be.true;
 
-        el.click();
-        await elementUpdated(el);
+    el.click();
+    await elementUpdated(el);
 
-        expect(el.checked).to.be.true;
-    });
+    expect(el.checked).to.be.true;
+  });
 });
diff --git a/packages/search/sp-search.ts b/packages/search/sp-search.ts
index df12948187..f6ea534cec 100644
--- a/packages/search/sp-search.ts
+++ b/packages/search/sp-search.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { Search } from './src/Search.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { Search } from "./src/Search.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-search', Search);
+defineElement("sp-search", Search);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-search': Search;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-search": Search;
+  }
 }
diff --git a/packages/search/src/Search.ts b/packages/search/src/Search.ts
index 53a0036618..2cdee03d38 100644
--- a/packages/search/src/Search.ts
+++ b/packages/search/src/Search.ts
@@ -11,23 +11,23 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    PropertyValues,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
-import { Textfield } from '@spectrum-web-components/textfield';
-import '@spectrum-web-components/button/sp-clear-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-search.js';
+import { Textfield } from "@spectrum-web-components/textfield";
+import "@spectrum-web-components/button/sp-clear-button.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-search.js";
 
-import searchStyles from './search.css.js';
+import searchStyles from "./search.css.js";
 
 const stopPropagation = (event: Event): void => event.stopPropagation();
 
@@ -40,116 +40,116 @@ const stopPropagation = (event: Event): void => event.stopPropagation();
  * @fires submit - The search form has been submitted.
  */
 export class Search extends Textfield {
-    public static override get styles(): CSSResultArray {
-        return [...super.styles, searchStyles];
-    }
+  public static override get styles(): CSSResultArray {
+    return [...super.styles, searchStyles];
+  }
 
-    @property()
-    public action = '';
+  @property()
+  public action = "";
 
-    @property()
-    public override label = 'Search';
+  @property()
+  public override label = "Search";
 
-    @property()
-    public method?: 'get' | 'post' | 'dialog';
+  @property()
+  public method?: "get" | "post" | "dialog";
 
-    @property()
-    public override placeholder = 'Search';
+  @property()
+  public override placeholder = "Search";
 
-    @property({ type: Boolean })
-    public holdValueOnEscape!: boolean;
+  @property({ type: Boolean })
+  public holdValueOnEscape!: boolean;
 
-    @query('#form')
-    public form!: HTMLFormElement;
+  @query("#form")
+  public form!: HTMLFormElement;
 
-    private handleSubmit(event: Event): void {
-        const applyDefault = this.dispatchEvent(
-            new Event('submit', {
-                cancelable: true,
-                bubbles: true,
-            })
-        );
+  private handleSubmit(event: Event): void {
+    const applyDefault = this.dispatchEvent(
+      new Event("submit", {
+        cancelable: true,
+        bubbles: true,
+      }),
+    );
 
-        if (!applyDefault) {
-            event.preventDefault();
-        }
+    if (!applyDefault) {
+      event.preventDefault();
     }
+  }
 
-    private handleKeydown(event: KeyboardEvent): void {
-        const { code } = event;
-
-        if (code === 'Escape' && this.holdValueOnEscape) {
-            return;
-        }
+  private handleKeydown(event: KeyboardEvent): void {
+    const { code } = event;
 
-        if (!this.value || code !== 'Escape') {
-            return;
-        }
-
-        this.reset();
+    if (code === "Escape" && this.holdValueOnEscape) {
+      return;
     }
 
-    public async reset(): Promise {
-        this.value = '';
-        await this.updateComplete;
-        this.focusElement.dispatchEvent(
-            new InputEvent('input', {
-                bubbles: true,
-                composed: true,
-            })
-        );
-        // The native `change` event on an `input` element is not composed,
-        // so this synthetic replication of a `change` event must not be
-        // either as the `Textfield` baseclass should only need to handle
-        // the native variant of this interaction.
-        this.focusElement.dispatchEvent(
-            new InputEvent('change', {
-                bubbles: true,
-            })
-        );
+    if (!this.value || code !== "Escape") {
+      return;
     }
 
-    protected override renderField(): TemplateResult {
-        return html`
-            

-                
-                ${super.renderField()}
-                ${this.value
-                    ? html`
-                          
-                      `
-                    : nothing}
-            

-        `;
+    this.reset();
+  }
+
+  public async reset(): Promise {
+    this.value = "";
+    await this.updateComplete;
+    this.focusElement.dispatchEvent(
+      new InputEvent("input", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    // The native `change` event on an `input` element is not composed,
+    // so this synthetic replication of a `change` event must not be
+    // either as the `Textfield` baseclass should only need to handle
+    // the native variant of this interaction.
+    this.focusElement.dispatchEvent(
+      new InputEvent("change", {
+        bubbles: true,
+      }),
+    );
+  }
+
+  protected override renderField(): TemplateResult {
+    return html`
+      

+        
+        ${super.renderField()}
+        ${this.value
+          ? html`
+              
+            `
+          : nothing}
+      

+    `;
+  }
+
+  public override firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+
+    // if holdValueOnEscape is not set, default to search type
+    if (!this.hasAttribute("holdValueOnEscape")) {
+      this.inputElement.setAttribute("type", "search");
     }
+  }
 
-    public override firstUpdated(changedProperties: PropertyValues): void {
-        super.firstUpdated(changedProperties);
-
-        // if holdValueOnEscape is not set, default to search type
-        if (!this.hasAttribute('holdValueOnEscape')) {
-            this.inputElement.setAttribute('type', 'search');
-        }
-    }
-
-    public override willUpdate(): void {
-        this.multiline = false;
-    }
+  public override willUpdate(): void {
+    this.multiline = false;
+  }
 }
diff --git a/packages/search/src/index.ts b/packages/search/src/index.ts
index 1ee6156f02..1bb428df58 100644
--- a/packages/search/src/index.ts
+++ b/packages/search/src/index.ts
@@ -9,4 +9,4 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Search.js';
+export * from "./Search.js";
diff --git a/packages/search/stories/search-sizes.stories.ts b/packages/search/stories/search-sizes.stories.ts
index abb37cf6a9..d460f58ca4 100644
--- a/packages/search/stories/search-sizes.stories.ts
+++ b/packages/search/stories/search-sizes.stories.ts
@@ -9,37 +9,37 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/search/sp-search.js';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import '@spectrum-web-components/help-text/sp-help-text.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import "@spectrum-web-components/search/sp-search.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/help-text/sp-help-text.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
 export default {
-    component: 'sp-search',
-    title: 'Search/Sizes',
+  component: "sp-search",
+  title: "Search/Sizes",
 };
 
 const template = ({
-    size,
+  size,
 }: {
-    size?: 's' | 'm' | 'l' | 'xl';
+  size?: "s" | "m" | "l" | "xl";
 } = {}): TemplateResult => {
-    return html`
-        
-            What would you like to find?
-        
-        
-            
-                Anything within reason...
-            
-        
-    `;
+  return html`
+    
+      What would you like to find?
+    
+    
+      
+        Anything within reason...
+      
+    
+  `;
 };
 
-export const s = (): TemplateResult => template({ size: 's' });
+export const s = (): TemplateResult => template({ size: "s" });
 export const noSize = (): TemplateResult => template();
-export const m = (): TemplateResult => template({ size: 'm' });
-export const l = (): TemplateResult => template({ size: 'l' });
-export const XL = (): TemplateResult => template({ size: 'xl' });
+export const m = (): TemplateResult => template({ size: "m" });
+export const l = (): TemplateResult => template({ size: "l" });
+export const XL = (): TemplateResult => template({ size: "xl" });
diff --git a/packages/search/stories/search.stories.ts b/packages/search/stories/search.stories.ts
index 967fd2e31f..cc127b1c24 100644
--- a/packages/search/stories/search.stories.ts
+++ b/packages/search/stories/search.stories.ts
@@ -9,34 +9,34 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/search/sp-search.js';
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import "@spectrum-web-components/search/sp-search.js";
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
 export default {
-    component: 'sp-search',
-    title: 'Search',
+  component: "sp-search",
+  title: "Search",
 };
 
 export const Default = (): TemplateResult => html`
-    
-    
+  
+  
 `;
 
 export const autofocus = (): TemplateResult => html`
-    
+  
 `;
 
 export const focusedOverflowing = (): TemplateResult => html`
-    
+  
 `;
 
 export const Quiet = (): TemplateResult => html`
-    
-    
+  
+  
 `;
 
 export const holdValueOnEscape = (): TemplateResult => html`
-    
+  
 `;
diff --git a/packages/search/test/benchmark/test-basic.ts b/packages/search/test/benchmark/test-basic.ts
index 50f695258b..8dff9d7c98 100644
--- a/packages/search/test/benchmark/test-basic.ts
+++ b/packages/search/test/benchmark/test-basic.ts
@@ -10,16 +10,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/search/sp-search.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/search/sp-search.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-     {
-            event.preventDefault();
-        }}
-    >
+   {
+      event.preventDefault();
+    }}
+  >
 `);
diff --git a/packages/search/test/search-memory.test.ts b/packages/search/test/search-memory.test.ts
index e759b53115..488385434c 100644
--- a/packages/search/test/search-memory.test.ts
+++ b/packages/search/test/search-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/search/sp-search.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/search/sp-search.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/search/test/search.test.ts b/packages/search/test/search.test.ts
index 60e5147c96..393482ed62 100644
--- a/packages/search/test/search.test.ts
+++ b/packages/search/test/search.test.ts
@@ -9,234 +9,227 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import '@spectrum-web-components/search/sp-search.js';
-import { Search } from '@spectrum-web-components/search';
-import { elementUpdated, expect, html, litFixture } from '@open-wc/testing';
-import { escapeEvent, spaceEvent } from '../../../test/testing-helpers.js';
-import '@spectrum-web-components/shared/src/focus-visible.js';
-import { spy } from 'sinon';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('Search', () => {
-    testForLitDevWarnings(
-        async () =>
-            await litFixture(html`
-                
-            `)
-    );
-    it('loads accessibly', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
+import "@spectrum-web-components/search/sp-search.js";
+import { Search } from "@spectrum-web-components/search";
+import { elementUpdated, expect, html, litFixture } from "@open-wc/testing";
+import { escapeEvent, spaceEvent } from "../../../test/testing-helpers.js";
+import "@spectrum-web-components/shared/src/focus-visible.js";
+import { spy } from "sinon";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+describe("Search", () => {
+  testForLitDevWarnings(
+    async () => await litFixture(html`  `),
+  );
+  it("loads accessibly", async () => {
+    const el = await litFixture(html`  `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("can be cleared", async () => {
+    const el = await litFixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.value).to.equal("Test");
+
+    const root = el.shadowRoot ? el.shadowRoot : el;
+    const clearButton = root.querySelector("#button") as HTMLButtonElement;
+
+    clearButton.click();
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal("");
+  });
+  it("captures keyboard events to the clear button", async () => {
+    const el = await litFixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.value).to.equal("Test");
+
+    const root = el.shadowRoot ? el.shadowRoot : el;
+    const clearButton = root.querySelector("#button") as HTMLButtonElement;
+
+    clearButton.dispatchEvent(escapeEvent());
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal("Test");
+  });
+  it('dispatches events when using the "clear" button', async () => {
+    const inputSpy = spy();
+    const changeSpy = spy();
+    const handleInput = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+
+      inputSpy(target.value);
+    };
+    const handleChange = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+
+      changeSpy(target.value);
+    };
+    const el = await litFixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.value).to.equal("Test");
+
+    const root = el.shadowRoot ? el.shadowRoot : el;
+    const clearButton = root.querySelector("#button") as HTMLButtonElement;
+
+    inputSpy.resetHistory();
+    changeSpy.resetHistory();
+    clearButton.click();
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal("");
+    expect(inputSpy.calledOnce, "one input").to.be.true;
+    expect(inputSpy.calledWith(""), "was blank").to.be.true;
+    expect(changeSpy.calledOnce, "one change").to.be.true;
+    expect(changeSpy.calledWith(""), "was blank").to.be.true;
+  });
+  it('can be cleared via "Escape"', async () => {
+    const inputSpy = spy();
+    const changeSpy = spy();
+    const handleInput = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+
+      inputSpy(target.value);
+    };
+    const handleChange = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+
+      changeSpy(target.value);
+    };
+    const el = await litFixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.value).to.equal("Test");
+    el.focusElement.dispatchEvent(spaceEvent());
+
+    await elementUpdated(el);
+    expect(el.value).to.equal("Test");
+
+    inputSpy.resetHistory();
+    changeSpy.resetHistory();
+    el.focusElement.dispatchEvent(escapeEvent());
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal("");
+    expect(inputSpy.calledOnce, "one input").to.be.true;
+    expect(inputSpy.calledWith(""), "was blank").to.be.true;
+    expect(changeSpy.calledOnce, "one change").to.be.true;
+    expect(changeSpy.calledWith(""), "was blank").to.be.true;
+  });
+  it('cannot be cleared via "Escape" if holdValueOnEscape is true', async () => {
+    const inputSpy = spy();
+    const changeSpy = spy();
+    const handleInput = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+
+      inputSpy(target.value);
+    };
+    const handleChange = (event: Event): void => {
+      const target = event.target as HTMLInputElement;
+
+      changeSpy(target.value);
+    };
+    const el = await litFixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.value).to.equal("Test");
+    el.focusElement.dispatchEvent(spaceEvent());
+
+    await elementUpdated(el);
+    expect(el.value).to.equal("Test");
+
+    inputSpy.resetHistory();
+    changeSpy.resetHistory();
+    el.focusElement.dispatchEvent(escapeEvent());
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal("Test");
+  });
+  it("cannot be multiline", async () => {
+    const el = await litFixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.multiline).to.be.false;
+
+    el.multiline = true;
+
+    await elementUpdated(el);
+
+    expect(el.multiline).to.be.false;
+  });
+  it("accepts `placeholder` and `label` properties", async () => {
+    const testString = "Search for images";
+    const el = await litFixture(html`  `);
+
+    await elementUpdated(el);
+    el.placeholder = testString;
+    el.label = testString;
+
+    await elementUpdated(el);
+
+    expect(el.focusElement.placeholder).to.equal(testString);
+    expect(el.focusElement.getAttribute("aria-label")).to.equal(testString);
+  });
+  it("can have default prevented", async () => {
+    const el = await litFixture(html`
+       {
+          event.preventDefault();
+        }}
+      >
+    `);
+
+    await elementUpdated(el);
+    const searchForm = (
+      el.shadowRoot
+        ? el.shadowRoot.querySelector("form")
+        : el.querySelector("form")
+    ) as HTMLFormElement;
+
+    const submitEvent = new Event("submit", {
+      cancelable: true,
+      bubbles: false,
+      composed: false,
     });
-    it('can be cleared', async () => {
-        const el = await litFixture(html`
-            
-        `);
 
-        await elementUpdated(el);
-        expect(el.value).to.equal('Test');
+    searchForm.dispatchEvent(submitEvent);
 
-        const root = el.shadowRoot ? el.shadowRoot : el;
-        const clearButton = root.querySelector('#button') as HTMLButtonElement;
-
-        clearButton.click();
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('');
-    });
-    it('captures keyboard events to the clear button', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('Test');
-
-        const root = el.shadowRoot ? el.shadowRoot : el;
-        const clearButton = root.querySelector('#button') as HTMLButtonElement;
-
-        clearButton.dispatchEvent(escapeEvent());
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('Test');
-    });
-    it('dispatches events when using the "clear" button', async () => {
-        const inputSpy = spy();
-        const changeSpy = spy();
-        const handleInput = (event: Event): void => {
-            const target = event.target as HTMLInputElement;
-
-            inputSpy(target.value);
-        };
-        const handleChange = (event: Event): void => {
-            const target = event.target as HTMLInputElement;
-
-            changeSpy(target.value);
-        };
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('Test');
-
-        const root = el.shadowRoot ? el.shadowRoot : el;
-        const clearButton = root.querySelector('#button') as HTMLButtonElement;
-
-        inputSpy.resetHistory();
-        changeSpy.resetHistory();
-        clearButton.click();
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('');
-        expect(inputSpy.calledOnce, 'one input').to.be.true;
-        expect(inputSpy.calledWith(''), 'was blank').to.be.true;
-        expect(changeSpy.calledOnce, 'one change').to.be.true;
-        expect(changeSpy.calledWith(''), 'was blank').to.be.true;
-    });
-    it('can be cleared via "Escape"', async () => {
-        const inputSpy = spy();
-        const changeSpy = spy();
-        const handleInput = (event: Event): void => {
-            const target = event.target as HTMLInputElement;
-
-            inputSpy(target.value);
-        };
-        const handleChange = (event: Event): void => {
-            const target = event.target as HTMLInputElement;
-
-            changeSpy(target.value);
-        };
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('Test');
-        el.focusElement.dispatchEvent(spaceEvent());
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('Test');
-
-        inputSpy.resetHistory();
-        changeSpy.resetHistory();
-        el.focusElement.dispatchEvent(escapeEvent());
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('');
-        expect(inputSpy.calledOnce, 'one input').to.be.true;
-        expect(inputSpy.calledWith(''), 'was blank').to.be.true;
-        expect(changeSpy.calledOnce, 'one change').to.be.true;
-        expect(changeSpy.calledWith(''), 'was blank').to.be.true;
-    });
-    it('cannot be cleared via "Escape" if holdValueOnEscape is true', async () => {
-        const inputSpy = spy();
-        const changeSpy = spy();
-        const handleInput = (event: Event): void => {
-            const target = event.target as HTMLInputElement;
-
-            inputSpy(target.value);
-        };
-        const handleChange = (event: Event): void => {
-            const target = event.target as HTMLInputElement;
-
-            changeSpy(target.value);
-        };
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('Test');
-        el.focusElement.dispatchEvent(spaceEvent());
-
-        await elementUpdated(el);
-        expect(el.value).to.equal('Test');
-
-        inputSpy.resetHistory();
-        changeSpy.resetHistory();
-        el.focusElement.dispatchEvent(escapeEvent());
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('Test');
-    });
-    it('cannot be multiline', async () => {
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.multiline).to.be.false;
-
-        el.multiline = true;
-
-        await elementUpdated(el);
-
-        expect(el.multiline).to.be.false;
-    });
-    it('accepts `placeholder` and `label` properties', async () => {
-        const testString = 'Search for images';
-        const el = await litFixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        el.placeholder = testString;
-        el.label = testString;
-
-        await elementUpdated(el);
-
-        expect(el.focusElement.placeholder).to.equal(testString);
-        expect(el.focusElement.getAttribute('aria-label')).to.equal(testString);
-    });
-    it('can have default prevented', async () => {
-        const el = await litFixture(html`
-             {
-                    event.preventDefault();
-                }}
-            >
-        `);
-
-        await elementUpdated(el);
-        const searchForm = (
-            el.shadowRoot
-                ? el.shadowRoot.querySelector('form')
-                : el.querySelector('form')
-        ) as HTMLFormElement;
-
-        const submitEvent = new Event('submit', {
-            cancelable: true,
-            bubbles: false,
-            composed: false,
-        });
-
-        searchForm.dispatchEvent(submitEvent);
-
-        expect(submitEvent.defaultPrevented).to.be.true;
-    });
+    expect(submitEvent.defaultPrevented).to.be.true;
+  });
 });
diff --git a/packages/sidenav/sp-sidenav-heading.ts b/packages/sidenav/sp-sidenav-heading.ts
index 7501f39a76..f17918ebaa 100644
--- a/packages/sidenav/sp-sidenav-heading.ts
+++ b/packages/sidenav/sp-sidenav-heading.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { SideNavHeading } from './src/SidenavHeading.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { SideNavHeading } from "./src/SidenavHeading.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-sidenav-heading', SideNavHeading);
+defineElement("sp-sidenav-heading", SideNavHeading);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-sidenav-heading': SideNavHeading;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-sidenav-heading": SideNavHeading;
+  }
 }
diff --git a/packages/sidenav/sp-sidenav-item.ts b/packages/sidenav/sp-sidenav-item.ts
index 3b085362db..7ae83678c7 100644
--- a/packages/sidenav/sp-sidenav-item.ts
+++ b/packages/sidenav/sp-sidenav-item.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { SideNavItem } from './src/SidenavItem.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { SideNavItem } from "./src/SidenavItem.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-sidenav-item', SideNavItem);
+defineElement("sp-sidenav-item", SideNavItem);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-sidenav-item': SideNavItem;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-sidenav-item": SideNavItem;
+  }
 }
diff --git a/packages/sidenav/sp-sidenav.ts b/packages/sidenav/sp-sidenav.ts
index 1d7f890df9..ba8b677021 100644
--- a/packages/sidenav/sp-sidenav.ts
+++ b/packages/sidenav/sp-sidenav.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { SideNav } from './src/Sidenav.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { SideNav } from "./src/Sidenav.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-sidenav', SideNav);
+defineElement("sp-sidenav", SideNav);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-sidenav': SideNav;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-sidenav": SideNav;
+  }
 }
diff --git a/packages/sidenav/src/Sidenav.ts b/packages/sidenav/src/Sidenav.ts
index fd35b9b284..7fb892421f 100644
--- a/packages/sidenav/src/Sidenav.ts
+++ b/packages/sidenav/src/Sidenav.ts
@@ -11,22 +11,22 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
-
-import sidenavStyles from './sidenav.css.js';
-import { Focusable } from '@spectrum-web-components/shared';
-import { SideNavItem } from './SidenavItem.js';
-import { SideNavHeading } from './SidenavHeading.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
+
+import sidenavStyles from "./sidenav.css.js";
+import { Focusable } from "@spectrum-web-components/shared";
+import { SideNavItem } from "./SidenavItem.js";
+import { SideNavHeading } from "./SidenavHeading.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
 
 export interface SidenavSelectDetail {
-    value: string;
+  value: string;
 }
 
 /**
@@ -39,204 +39,191 @@ export interface SidenavSelectDetail {
  *
  */
 export class SideNav extends Focusable {
-    public static override get styles(): CSSResultArray {
-        return [sidenavStyles];
-    }
-
-    private items = new Set();
-
-    public startTrackingSelectionForItem(item: SideNavItem): void {
-        this.items.add(item);
-        this.rovingTabindexController.clearElementCache();
-    }
-
-    public stopTrackingSelectionForItem(item: SideNavItem): void {
-        this.items.delete(item);
-        this.rovingTabindexController.clearElementCache();
-    }
-
-    rovingTabindexController = new RovingTabindexController(this, {
-        focusInIndex: (elements: SideNavItem[]) => {
-            let parentSideNavItem: SideNavItem | undefined;
-            let index = elements.findIndex((el) => {
-                // If the selected item's parent is collapsed, save it for later.
-                if (el.value === this.value && this.isDisabledChild(el)) {
-                    parentSideNavItem = el.closest(
-                        'sp-sidenav-item:not([expanded])'
-                    ) as SideNavItem;
-                }
-
-                return this.value
-                    ? !el.disabled &&
-                          !this.isDisabledChild(el) &&
-                          el.value === this.value
-                    : !el.disabled && !this.isDisabledChild(el);
-            });
-
-            // If the selected item's parent is collapsed, focus the collapsed parent.
-            if (index === -1 && parentSideNavItem) {
-                index = elements.findIndex((el) => el === parentSideNavItem);
-            }
-
-            return index;
-        },
-        direction: 'vertical',
-        elements: () =>
-            [...this.querySelectorAll('sp-sidenav-item')] as SideNavItem[],
-        isFocusableElement: (el: SideNavItem) =>
-            !el.disabled && !this.isDisabledChild(el),
-    });
-
-    @property({ type: Boolean, reflect: true, attribute: 'manage-tab-index' })
-    public manageTabIndex = false;
-
-    @property({ reflect: true })
-    public value: string | undefined = undefined;
-
-    /**
-     * The multilevel variant will have multiple layers of hierarchical navigation items.
-     */
-    @property({ reflect: true })
-    public variant?: 'multilevel' = undefined;
-
-    /**
-     * An accessible label that describes the component,
-     * so that the side navigation can be distinguished
-     * from other navigation by screen reader users.
-     * It will be applied to aria-label, but not visually rendered.
-     */
-    @property({ reflect: true })
-    public label?: string | undefined = undefined;
-
-    private handleSelect(
-        event: CustomEvent & { target: SideNavItem }
-    ): void {
-        event.stopPropagation();
-
-        if (this.value === event.detail.value) {
-            return;
+  public static override get styles(): CSSResultArray {
+    return [sidenavStyles];
+  }
+
+  private items = new Set();
+
+  public startTrackingSelectionForItem(item: SideNavItem): void {
+    this.items.add(item);
+    this.rovingTabindexController.clearElementCache();
+  }
+
+  public stopTrackingSelectionForItem(item: SideNavItem): void {
+    this.items.delete(item);
+    this.rovingTabindexController.clearElementCache();
+  }
+
+  rovingTabindexController = new RovingTabindexController(this, {
+    focusInIndex: (elements: SideNavItem[]) => {
+      let parentSideNavItem: SideNavItem | undefined;
+      let index = elements.findIndex((el) => {
+        // If the selected item's parent is collapsed, save it for later.
+        if (el.value === this.value && this.isDisabledChild(el)) {
+          parentSideNavItem = el.closest(
+            "sp-sidenav-item:not([expanded])",
+          ) as SideNavItem;
         }
 
-        const oldValue = this.value;
-
-        this.value = event.detail.value;
-        const applyDefault = this.dispatchEvent(
-            new Event('change', {
-                bubbles: true,
-                composed: true,
-                cancelable: true,
-            })
-        );
-
-        if (!applyDefault) {
-            this.value = oldValue;
-            event.target.selected = false;
-            event.preventDefault();
-        } else {
-            this.items.forEach((item) => item.handleSideNavSelect(event));
-        }
+        return this.value
+          ? !el.disabled && !this.isDisabledChild(el) && el.value === this.value
+          : !el.disabled && !this.isDisabledChild(el);
+      });
+
+      // If the selected item's parent is collapsed, focus the collapsed parent.
+      if (index === -1 && parentSideNavItem) {
+        index = elements.findIndex((el) => el === parentSideNavItem);
+      }
+
+      return index;
+    },
+    direction: "vertical",
+    elements: () =>
+      [...this.querySelectorAll("sp-sidenav-item")] as SideNavItem[],
+    isFocusableElement: (el: SideNavItem) =>
+      !el.disabled && !this.isDisabledChild(el),
+  });
+
+  @property({ type: Boolean, reflect: true, attribute: "manage-tab-index" })
+  public manageTabIndex = false;
+
+  @property({ reflect: true })
+  public value: string | undefined = undefined;
+
+  /**
+   * The multilevel variant will have multiple layers of hierarchical navigation items.
+   */
+  @property({ reflect: true })
+  public variant?: "multilevel" = undefined;
+
+  /**
+   * An accessible label that describes the component,
+   * so that the side navigation can be distinguished
+   * from other navigation by screen reader users.
+   * It will be applied to aria-label, but not visually rendered.
+   */
+  @property({ reflect: true })
+  public label?: string | undefined = undefined;
+
+  private handleSelect(
+    event: CustomEvent & { target: SideNavItem },
+  ): void {
+    event.stopPropagation();
+
+    if (this.value === event.detail.value) {
+      return;
     }
 
-    public override focus(): void {
-        this.rovingTabindexController.focus();
+    const oldValue = this.value;
+
+    this.value = event.detail.value;
+    const applyDefault = this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      }),
+    );
+
+    if (!applyDefault) {
+      this.value = oldValue;
+      event.target.selected = false;
+      event.preventDefault();
+    } else {
+      this.items.forEach((item) => item.handleSideNavSelect(event));
     }
+  }
 
-    public override blur(): void {
-        if (this.focusElement === this) {
-            return;
-        }
+  public override focus(): void {
+    this.rovingTabindexController.focus();
+  }
 
-        super.blur();
+  public override blur(): void {
+    if (this.focusElement === this) {
+      return;
     }
 
-    public override click(): void {
-        if (this.focusElement === this) {
-            return;
-        }
-
-        super.click();
-    }
+    super.blur();
+  }
 
-    public override get focusElement(): SideNavItem | SideNav {
-        return this.rovingTabindexController.focusInElement || this;
+  public override click(): void {
+    if (this.focusElement === this) {
+      return;
     }
 
-    private isDisabledChild(child: SideNavItem): boolean {
-        if (child.disabled) {
-            return true;
-        }
+    super.click();
+  }
 
-        let parent = child.parentElement as
-            | SideNavItem
-            | SideNav
-            | SideNavHeading;
-
-        while (
-            parent instanceof SideNavHeading ||
-            (!(parent as SideNavItem).disabled &&
-                parent instanceof SideNavItem &&
-                parent.expanded)
-        ) {
-            parent = parent.parentElement as
-                | SideNavItem
-                | SideNav
-                | SideNavHeading;
-        }
+  public override get focusElement(): SideNavItem | SideNav {
+    return this.rovingTabindexController.focusInElement || this;
+  }
 
-        return parent !== this;
+  private isDisabledChild(child: SideNavItem): boolean {
+    if (child.disabled) {
+      return true;
     }
 
-    private handleSlotchange(): void {
-        if (this.manageTabIndex) {
-            this.rovingTabindexController.manage();
-        } else {
-            this.rovingTabindexController.unmanage();
-        }
-    }
+    let parent = child.parentElement as SideNavItem | SideNav | SideNavHeading;
 
-    protected override render(): TemplateResult {
-        return html`
-            
-        `;
+    while (
+      parent instanceof SideNavHeading ||
+      (!(parent as SideNavItem).disabled &&
+        parent instanceof SideNavItem &&
+        parent.expanded)
+    ) {
+      parent = parent.parentElement as SideNavItem | SideNav | SideNavHeading;
     }
 
-    protected override willUpdate(): void {
-        if (!this.hasUpdated) {
-            const selectedChild = this.querySelector(
-                '[selected]'
-            ) as SideNavItem;
+    return parent !== this;
+  }
 
-            if (selectedChild) {
-                this.value = selectedChild.value;
-            }
-        }
+  private handleSlotchange(): void {
+    if (this.manageTabIndex) {
+      this.rovingTabindexController.manage();
+    } else {
+      this.rovingTabindexController.unmanage();
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      
+    `;
+  }
+
+  protected override willUpdate(): void {
+    if (!this.hasUpdated) {
+      const selectedChild = this.querySelector("[selected]") as SideNavItem;
+
+      if (selectedChild) {
+        this.value = selectedChild.value;
+      }
     }
+  }
 
-    protected override updated(changes: PropertyValues): void {
-        super.updated(changes);
+  protected override updated(changes: PropertyValues): void {
+    super.updated(changes);
 
-        if (changes.has('manageTabIndex')) {
-            if (this.manageTabIndex) {
-                this.rovingTabindexController.manage();
-            } else {
-                this.rovingTabindexController.unmanage();
-            }
-        }
+    if (changes.has("manageTabIndex")) {
+      if (this.manageTabIndex) {
+        this.rovingTabindexController.manage();
+      } else {
+        this.rovingTabindexController.unmanage();
+      }
     }
+  }
 }
 
 declare global {
-    interface GlobalEventHandlersEventMap {
-        'sp-sidenav:select': CustomEvent;
-    }
+  interface GlobalEventHandlersEventMap {
+    "sp-sidenav:select": CustomEvent;
+  }
 }
diff --git a/packages/sidenav/src/SidenavHeading.ts b/packages/sidenav/src/SidenavHeading.ts
index 56ab8ac8d8..be7dac6875 100644
--- a/packages/sidenav/src/SidenavHeading.ts
+++ b/packages/sidenav/src/SidenavHeading.ts
@@ -11,16 +11,16 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    PropertyValues,
-    SpectrumElement,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+  CSSResultArray,
+  html,
+  PropertyValues,
+  SpectrumElement,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
 
-import sidenavItemStyles from './sidenav-item.css.js';
-import sidenavHeadingStyles from './sidenav-heading.css.js';
+import sidenavItemStyles from "./sidenav-item.css.js";
+import sidenavHeadingStyles from "./sidenav-heading.css.js";
 
 /**
  * @element sp-sidenav-heading
@@ -29,32 +29,32 @@ import sidenavHeadingStyles from './sidenav-heading.css.js';
  *
  */
 export class SideNavHeading extends SpectrumElement {
-    @property({ reflect: true })
-    public label = '';
+  @property({ reflect: true })
+  public label = "";
 
-    public static override get styles(): CSSResultArray {
-        return [sidenavItemStyles, sidenavHeadingStyles];
-    }
-
-    protected override update(changes: PropertyValues): void {
-        if (!this.hasAttribute('slot')) {
-            this.slot = 'descendant';
-        }
+  public static override get styles(): CSSResultArray {
+    return [sidenavItemStyles, sidenavHeadingStyles];
+  }
 
-        super.update(changes);
+  protected override update(changes: PropertyValues): void {
+    if (!this.hasAttribute("slot")) {
+      this.slot = "descendant";
     }
 
-    protected override render(): TemplateResult {
-        return html`
-            
${this.label}

-            

-                
-            

-        `;
-    }
-
-    protected override firstUpdated(changed: PropertyValues): void {
-        super.firstUpdated(changed);
-        this.setAttribute('role', 'listitem');
-    }
+    super.update(changes);
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      
${this.label}

+      

+        
+      

+    `;
+  }
+
+  protected override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+    this.setAttribute("role", "listitem");
+  }
 }
diff --git a/packages/sidenav/src/SidenavItem.ts b/packages/sidenav/src/SidenavItem.ts
index 72818c23a6..fd0a071b47 100644
--- a/packages/sidenav/src/SidenavItem.ts
+++ b/packages/sidenav/src/SidenavItem.ts
@@ -11,20 +11,20 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    PropertyValues,
-    TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+  CSSResultArray,
+  html,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
 
-import { SideNav, SidenavSelectDetail } from './Sidenav.js';
+import { SideNav, SidenavSelectDetail } from "./Sidenav.js";
 
-import sidenavItemStyles from './sidenav-item.css.js';
+import sidenavItemStyles from "./sidenav-item.css.js";
 
 /**
  * @element sp-sidenav-item
@@ -33,192 +33,184 @@ import sidenavItemStyles from './sidenav-item.css.js';
  *
  */
 export class SideNavItem extends LikeAnchor(Focusable) {
-    public static override get styles(): CSSResultArray {
-        return [sidenavItemStyles];
-    }
-
-    @property()
-    public value: string | undefined = undefined;
-
-    @property({ type: Boolean, reflect: true })
-    public selected = false;
-
-    @property({ type: Boolean, reflect: true })
-    public expanded = false;
-
-    protected get parentSideNav(): SideNav | undefined {
-        if (!this._parentSidenav) {
-            this._parentSidenav = this.closest('sp-sidenav') as
-                | SideNav
-                | undefined;
-        }
+  public static override get styles(): CSSResultArray {
+    return [sidenavItemStyles];
+  }
 
-        return this._parentSidenav;
-    }
-
-    protected _parentSidenav?: SideNav;
-
-    protected get hasChildren(): boolean {
-        return !!this.querySelector('sp-sidenav-item');
-    }
+  @property()
+  public value: string | undefined = undefined;
 
-    protected get depth(): number {
-        let depth = 0;
+  @property({ type: Boolean, reflect: true })
+  public selected = false;
+
+  @property({ type: Boolean, reflect: true })
+  public expanded = false;
+
+  protected get parentSideNav(): SideNav | undefined {
+    if (!this._parentSidenav) {
+      this._parentSidenav = this.closest("sp-sidenav") as SideNav | undefined;
+    }
+
+    return this._parentSidenav;
+  }
+
+  protected _parentSidenav?: SideNav;
+
+  protected get hasChildren(): boolean {
+    return !!this.querySelector("sp-sidenav-item");
+  }
+
+  protected get depth(): number {
+    let depth = 0;
+    let element = this.parentElement;
+
+    while (element instanceof SideNavItem) {
+      depth++;
+      element = element.parentElement;
+    }
+
+    return depth;
+  }
+
+  public handleSideNavSelect(event: Event): void {
+    this.selected = event.target === this;
+  }
+
+  protected handleClick(event?: Event): void {
+    if (!this.href && event) {
+      event.preventDefault();
+    }
+
+    // With an `href` this click will change the page contents, not toggle its children or become "selected".
+    if (!this.disabled && (!this.href || event?.defaultPrevented)) {
+      if (this.hasChildren) {
+        this.expanded = !this.expanded;
+      } else if (this.value) {
+        this.announceSelected(this.value);
+      }
+    }
+  }
+
+  private announceSelected(value: string): void {
+    const selectDetail: SidenavSelectDetail = {
+      value,
+    };
+
+    const selectionEvent = new CustomEvent("sidenav-select", {
+      bubbles: true,
+      composed: true,
+      detail: selectDetail,
+    });
+
+    this.dispatchEvent(selectionEvent);
+  }
+
+  public override click(): void {
+    this.handleClick();
+  }
+
+  public override get focusElement(): HTMLElement {
+    return this.shadowRoot.querySelector("#item-link") as HTMLElement;
+  }
+
+  protected override update(changes: PropertyValues): void {
+    if (!this.hasAttribute("slot")) {
+      this.slot = "descendant";
+    }
+
+    super.update(changes);
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      
+        
+        
+          ${this.label}
+          
+        
+      
+      ${this.expanded
+        ? html`
+            

+              
+            

+          `
+        : nothing}
+    `;
+  }
+
+  protected override updated(changes: PropertyValues): void {
+    if (
+      this.hasChildren &&
+      this.expanded &&
+      !this.selected &&
+      this.parentSideNav?.manageTabIndex
+    ) {
+      this.focusElement.tabIndex = -1;
+    } else {
+      this.focusElement.removeAttribute("tabindex");
+    }
+
+    super.updated(changes);
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.startTrackingSelection();
+  }
+
+  public override disconnectedCallback(): void {
+    this.stopTrackingSelection();
+    super.disconnectedCallback();
+  }
+
+  private async startTrackingSelection(): Promise {
+    const parentSideNav = this.parentSideNav;
+
+    if (parentSideNav) {
+      await parentSideNav.updateComplete;
+      parentSideNav.startTrackingSelectionForItem(this);
+      this.selected = this.value != null && this.value === parentSideNav.value;
+
+      if (this.selected === true && parentSideNav.variant === "multilevel") {
         let element = this.parentElement;
 
         while (element instanceof SideNavItem) {
-            depth++;
-            element = element.parentElement;
+          element.expanded = true;
+          element = element.parentElement;
         }
-
-        return depth;
+      }
     }
+  }
 
-    public handleSideNavSelect(event: Event): void {
-        this.selected = event.target === this;
-    }
+  private stopTrackingSelection(): void {
+    const parentSideNav = this.parentSideNav;
 
-    protected handleClick(event?: Event): void {
-        if (!this.href && event) {
-            event.preventDefault();
-        }
-
-        // With an `href` this click will change the page contents, not toggle its children or become "selected".
-        if (!this.disabled && (!this.href || event?.defaultPrevented)) {
-            if (this.hasChildren) {
-                this.expanded = !this.expanded;
-            } else if (this.value) {
-                this.announceSelected(this.value);
-            }
-        }
+    if (parentSideNav) {
+      parentSideNav.stopTrackingSelectionForItem(this);
     }
 
-    private announceSelected(value: string): void {
-        const selectDetail: SidenavSelectDetail = {
-            value,
-        };
-
-        const selectionEvent = new CustomEvent('sidenav-select', {
-            bubbles: true,
-            composed: true,
-            detail: selectDetail,
-        });
-
-        this.dispatchEvent(selectionEvent);
-    }
+    this._parentSidenav = undefined;
+  }
 
-    public override click(): void {
-        this.handleClick();
-    }
-
-    public override get focusElement(): HTMLElement {
-        return this.shadowRoot.querySelector('#item-link') as HTMLElement;
-    }
-
-    protected override update(changes: PropertyValues): void {
-        if (!this.hasAttribute('slot')) {
-            this.slot = 'descendant';
-        }
-
-        super.update(changes);
-    }
-
-    protected override render(): TemplateResult {
-        return html`
-            
-                
-                
-                    ${this.label}
-                    
-                
-            
-            ${this.expanded
-                ? html`
-                      

-                          
-                      

-                  `
-                : nothing}
-        `;
-    }
-
-    protected override updated(changes: PropertyValues): void {
-        if (
-            this.hasChildren &&
-            this.expanded &&
-            !this.selected &&
-            this.parentSideNav?.manageTabIndex
-        ) {
-            this.focusElement.tabIndex = -1;
-        } else {
-            this.focusElement.removeAttribute('tabindex');
-        }
-
-        super.updated(changes);
-    }
-
-    public override connectedCallback(): void {
-        super.connectedCallback();
-        this.startTrackingSelection();
-    }
-
-    public override disconnectedCallback(): void {
-        this.stopTrackingSelection();
-        super.disconnectedCallback();
-    }
-
-    private async startTrackingSelection(): Promise {
-        const parentSideNav = this.parentSideNav;
-
-        if (parentSideNav) {
-            await parentSideNav.updateComplete;
-            parentSideNav.startTrackingSelectionForItem(this);
-            this.selected =
-                this.value != null && this.value === parentSideNav.value;
-
-            if (
-                this.selected === true &&
-                parentSideNav.variant === 'multilevel'
-            ) {
-                let element = this.parentElement;
-
-                while (element instanceof SideNavItem) {
-                    element.expanded = true;
-                    element = element.parentElement;
-                }
-            }
-        }
-    }
-
-    private stopTrackingSelection(): void {
-        const parentSideNav = this.parentSideNav;
-
-        if (parentSideNav) {
-            parentSideNav.stopTrackingSelectionForItem(this);
-        }
-
-        this._parentSidenav = undefined;
-    }
-
-    protected override firstUpdated(changed: PropertyValues): void {
-        super.firstUpdated(changed);
-        this.setAttribute('role', 'listitem');
-    }
+  protected override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+    this.setAttribute("role", "listitem");
+  }
 }
diff --git a/packages/sidenav/src/index.ts b/packages/sidenav/src/index.ts
index 9b44ebc1fb..97a89718f1 100644
--- a/packages/sidenav/src/index.ts
+++ b/packages/sidenav/src/index.ts
@@ -9,6 +9,6 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Sidenav.js';
-export * from './SidenavItem.js';
-export * from './SidenavHeading.js';
+export * from "./Sidenav.js";
+export * from "./SidenavItem.js";
+export * from "./SidenavHeading.js";
diff --git a/packages/sidenav/stories/sidenav.stories.ts b/packages/sidenav/stories/sidenav.stories.ts
index 648244d071..cae4f2809c 100644
--- a/packages/sidenav/stories/sidenav.stories.ts
+++ b/packages/sidenav/stories/sidenav.stories.ts
@@ -9,189 +9,169 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/sidenav/sp-sidenav.js';
-import '@spectrum-web-components/sidenav/sp-sidenav-item.js';
-import '@spectrum-web-components/sidenav/sp-sidenav-heading.js';
+import "@spectrum-web-components/sidenav/sp-sidenav.js";
+import "@spectrum-web-components/sidenav/sp-sidenav-item.js";
+import "@spectrum-web-components/sidenav/sp-sidenav-heading.js";
 
 export default {
-    component: 'sp-sidenav',
-    title: 'Sidenav',
-    argTypes: {
-        onChange: { action: 'change' },
-    },
+  component: "sp-sidenav",
+  title: "Sidenav",
+  argTypes: {
+    onChange: { action: "change" },
+  },
 };
 
 export const Default = ({
-    onChange,
+  onChange,
 }: {
-    onChange: () => void;
+  onChange: () => void;
 }): TemplateResult => {
-    return html`
-        
-            
-            
-            
-                
-                
-            
-        
-    `;
+  return html`
+    
+      
+      
+      
+        
+        
+      
+    
+  `;
 };
 
 export const Multilevel = ({
-    onChange,
+  onChange,
 }: {
-    onChange: () => void;
+  onChange: () => void;
 }): TemplateResult => {
-    return html`
-        
-            
-            
-                
-                
-                
-                    
-                    
-                
-            
-            
-            
-        
-    `;
+  return html`
+    
+      
+      
+        
+        
+        
+          
+          
+        
+      
+      
+      
+    
+  `;
 };
 
-Multilevel.storyName = 'Multi-level';
+Multilevel.storyName = "Multi-level";
 
 export const MultilevelSlotted = ({
-    onChange,
+  onChange,
 }: {
-    onChange: () => void;
+  onChange: () => void;
 }): TemplateResult => {
-    return html`
-        
-            foo
-            
-                baz
-                2.1
-                2.2
-                
-                    2.3
-                    2.3.1
-                    
-                        2.3.2
-                    
-                
-            
-            test
-            hi
-        
-    `;
+  return html`
+    
+      foo
+      
+        baz
+        2.1
+        2.2
+        
+          2.3
+          2.3.1
+           2.3.2 
+        
+      
+      test
+      hi
+    
+  `;
 };
 
-MultilevelSlotted.storyName = 'Multi-level Slotted';
+MultilevelSlotted.storyName = "Multi-level Slotted";
 
 export const levelsAndDisabled = (): TemplateResult => {
-    return html`
-        
-            
-                
-                
-                
-                    
-                
-            
-        
-    `;
+  return html`
+    
+      
+        
+        
+        
+          
+        
+      
+    
+  `;
 };
 
 export const manageTabIndex = (): TemplateResult => {
-    return html`
-        
-            
-                
-                
-                
-                
-                    
-                
-            
-        
-    `;
+  return html`
+    
+      
+        
+        
+        
+        
+          
+        
+      
+    
+  `;
 };
 
 export const Hrefs = ({
-    onChange,
+  onChange,
 }: {
-    onChange: () => void;
+  onChange: () => void;
 }): TemplateResult => {
-    return html`
-        
-            
-                
-                
-                
-                
-            
-        
-    `;
+  return html`
+    
+      
+        
+        
+        
+        
+      
+    
+  `;
 };
diff --git a/packages/sidenav/test/benchmark/test-basic.ts b/packages/sidenav/test/benchmark/test-basic.ts
index cc87134999..06a0eeadf9 100644
--- a/packages/sidenav/test/benchmark/test-basic.ts
+++ b/packages/sidenav/test/benchmark/test-basic.ts
@@ -10,83 +10,59 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/sidenav/sp-sidenav.js';
-import '@spectrum-web-components/sidenav/sp-sidenav-item.js';
-import '@spectrum-web-components/sidenav/sp-sidenav-heading.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/sidenav/sp-sidenav.js";
+import "@spectrum-web-components/sidenav/sp-sidenav-item.js";
+import "@spectrum-web-components/sidenav/sp-sidenav-heading.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
-        
-        
-            
-            
-            
-        
-        
-            
-            
-                
-                
-                
-            
-        
-        
-        
-            
-            
-            
-        
-        
-            
-            
-                
-                
-                
-            
-        
-    
+  
+    
+    
+      
+      
+      
+    
+    
+      
+      
+        
+        
+        
+      
+    
+    
+    
+      
+      
+      
+    
+    
+      
+      
+        
+        
+        
+      
+    
+  
 `);
diff --git a/packages/sidenav/test/sidenav-item.test.ts b/packages/sidenav/test/sidenav-item.test.ts
index 1d389057e5..fa4e0a0695 100644
--- a/packages/sidenav/test/sidenav-item.test.ts
+++ b/packages/sidenav/test/sidenav-item.test.ts
@@ -10,202 +10,197 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/sidenav/sp-sidenav.js';
-import '@spectrum-web-components/sidenav/sp-sidenav-item.js';
-import { SideNavItem } from '@spectrum-web-components/sidenav';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-
-describe('Sidenav Item', () => {
-    it('can exist disabled and with no parent', async () => {
-        let selected = false;
-        const onSidenavSelect = (): void => {
-            selected = true;
-        };
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(selected).to.be.false;
-
-        el.click();
+import "@spectrum-web-components/sidenav/sp-sidenav.js";
+import "@spectrum-web-components/sidenav/sp-sidenav-item.js";
+import { SideNavItem } from "@spectrum-web-components/sidenav";
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
 
-        await elementUpdated(el);
+describe("Sidenav Item", () => {
+  it("can exist disabled and with no parent", async () => {
+    let selected = false;
+    const onSidenavSelect = (): void => {
+      selected = true;
+    };
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(selected).to.be.false;
+
+    el.click();
+
+    await elementUpdated(el);
+
+    expect(selected).to.be.false;
+
+    el.disabled = false;
+
+    el.click();
+
+    await elementUpdated(el);
+
+    expect(selected).to.be.true;
+  });
+
+  it("clicking expands a sidenav item with children", async () => {
+    const el = await fixture(html`
+      
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.shadowRoot).to.exist;
+
+    if (!el.shadowRoot) {
+      return;
+    }
+
+    let slot: HTMLSlotElement | null = el.shadowRoot.querySelector(
+      'slot[name="descendant"]',
+    );
+
+    expect(slot).not.to.exist;
+
+    expect(el.expanded).to.be.false;
+
+    el.click();
+
+    await elementUpdated(el);
+
+    expect(el.expanded).to.be.true;
+
+    slot = el.shadowRoot.querySelector(
+      'slot[name="descendant"]',
+    ) as HTMLSlotElement;
+    expect(slot).to.exist;
+
+    if (!slot) {
+      return;
+    }
+
+    expect(slot.assignedElements().length).to.equal(2);
+  });
+
+  it("populated `aria-current`", async () => {
+    const el = await fixture(html`
+      
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    const currentItem = el.querySelector(
+      "sp-sidenav-item:nth-child(2)",
+    ) as SideNavItem;
+    const otherItem = el.querySelector(
+      "sp-sidenav-item:nth-child(1)",
+    ) as SideNavItem;
+
+    await elementUpdated(currentItem);
+    await elementUpdated(otherItem);
+
+    expect(currentItem.focusElement.hasAttribute("aria-current"), "current").to
+      .be.true;
+    expect(otherItem.focusElement.hasAttribute("aria-current"), "other").to.be
+      .false;
+  });
 
-        expect(selected).to.be.false;
-
-        el.disabled = false;
-
-        el.click();
-
-        await elementUpdated(el);
-
-        expect(selected).to.be.true;
-    });
-
-    it('clicking expands a sidenav item with children', async () => {
-        const el = await fixture(html`
-            
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.shadowRoot).to.exist;
-
-        if (!el.shadowRoot) return;
-
-        let slot: HTMLSlotElement | null = el.shadowRoot.querySelector(
-            'slot[name="descendant"]'
-        );
-
-        expect(slot).not.to.exist;
-
-        expect(el.expanded).to.be.false;
-
-        el.click();
-
-        await elementUpdated(el);
-
-        expect(el.expanded).to.be.true;
-
-        slot = el.shadowRoot.querySelector(
-            'slot[name="descendant"]'
-        ) as HTMLSlotElement;
-        expect(slot).to.exist;
-
-        if (!slot) return;
-
-        expect(slot.assignedElements().length).to.equal(2);
-    });
-
-    it('populated `aria-current`', async () => {
-        const el = await fixture(html`
-            
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        const currentItem = el.querySelector(
-            'sp-sidenav-item:nth-child(2)'
-        ) as SideNavItem;
-        const otherItem = el.querySelector(
-            'sp-sidenav-item:nth-child(1)'
-        ) as SideNavItem;
-
-        await elementUpdated(currentItem);
-        await elementUpdated(otherItem);
-
-        expect(currentItem.focusElement.hasAttribute('aria-current'), 'current')
-            .to.be.true;
-        expect(otherItem.focusElement.hasAttribute('aria-current'), 'other').to
-            .be.false;
-    });
-
-    it('automatically expand parent items in multilevel mode', async () => {
-        const el = await fixture(html`
-            
-                
-                
-                    
-                    
-                    
-                        
-                        
-                    
-                
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        const sideNavItem_foo = el.querySelector(
-            'sp-sidenav-item[label="foo"]'
-        ) as SideNavItem;
-        const sideNavItem_baz = el.querySelector(
-            'sp-sidenav-item[label="baz"]'
-        ) as SideNavItem;
-        const sideNavItem_test = el.querySelector(
-            'sp-sidenav-item[label="test"]'
-        ) as SideNavItem;
-        const sideNavItem_hi = el.querySelector(
-            'sp-sidenav-item[label="hi"]'
-        ) as SideNavItem;
-
-        await elementUpdated(sideNavItem_foo);
-        await elementUpdated(sideNavItem_baz);
-        await elementUpdated(sideNavItem_test);
-        await elementUpdated(sideNavItem_hi);
-
-        expect(sideNavItem_foo.hasAttribute('expanded')).to.be.false;
-        expect(sideNavItem_baz.hasAttribute('expanded')).to.be.true;
-        expect(sideNavItem_test.hasAttribute('expanded')).to.be.false;
-        expect(sideNavItem_hi.hasAttribute('expanded')).to.be.false;
-
-        const sideNavItem_2_1 = sideNavItem_baz.querySelector(
-            'sp-sidenav-item[label="2.1"]'
-        ) as SideNavItem;
-        const sideNavItem_2_2 = sideNavItem_baz.querySelector(
-            'sp-sidenav-item[label="2.2"]'
-        ) as SideNavItem;
-        const sideNavItem_2_3 = sideNavItem_baz.querySelector(
-            'sp-sidenav-item[label="2.3"]'
-        ) as SideNavItem;
-
-        await elementUpdated(sideNavItem_2_1);
-        await elementUpdated(sideNavItem_2_2);
-        await elementUpdated(sideNavItem_2_3);
-
-        expect(sideNavItem_2_1.hasAttribute('expanded')).to.be.false;
-        expect(sideNavItem_2_2.hasAttribute('expanded')).to.be.false;
-        expect(sideNavItem_2_3.hasAttribute('expanded')).to.be.true;
-
-        const sideNavItem_2_3_1 = sideNavItem_2_3.querySelector(
-            'sp-sidenav-item[label="2.3.1"]'
-        ) as SideNavItem;
-        const sideNavItem_2_3_2 = sideNavItem_2_3.querySelector(
-            'sp-sidenav-item[label="2.3.2"]'
-        ) as SideNavItem;
-
-        await elementUpdated(sideNavItem_2_3_1);
-        await elementUpdated(sideNavItem_2_3_2);
-
-        expect(sideNavItem_2_3_1.hasAttribute('selected')).to.be.true;
-        expect(sideNavItem_2_3_2.hasAttribute('selected')).to.be.false;
-    });
+  it("automatically expand parent items in multilevel mode", async () => {
+    const el = await fixture(html`
+      
+        
+        
+          
+          
+          
+            
+            
+          
+        
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    const sideNavItem_foo = el.querySelector(
+      'sp-sidenav-item[label="foo"]',
+    ) as SideNavItem;
+    const sideNavItem_baz = el.querySelector(
+      'sp-sidenav-item[label="baz"]',
+    ) as SideNavItem;
+    const sideNavItem_test = el.querySelector(
+      'sp-sidenav-item[label="test"]',
+    ) as SideNavItem;
+    const sideNavItem_hi = el.querySelector(
+      'sp-sidenav-item[label="hi"]',
+    ) as SideNavItem;
+
+    await elementUpdated(sideNavItem_foo);
+    await elementUpdated(sideNavItem_baz);
+    await elementUpdated(sideNavItem_test);
+    await elementUpdated(sideNavItem_hi);
+
+    expect(sideNavItem_foo.hasAttribute("expanded")).to.be.false;
+    expect(sideNavItem_baz.hasAttribute("expanded")).to.be.true;
+    expect(sideNavItem_test.hasAttribute("expanded")).to.be.false;
+    expect(sideNavItem_hi.hasAttribute("expanded")).to.be.false;
+
+    const sideNavItem_2_1 = sideNavItem_baz.querySelector(
+      'sp-sidenav-item[label="2.1"]',
+    ) as SideNavItem;
+    const sideNavItem_2_2 = sideNavItem_baz.querySelector(
+      'sp-sidenav-item[label="2.2"]',
+    ) as SideNavItem;
+    const sideNavItem_2_3 = sideNavItem_baz.querySelector(
+      'sp-sidenav-item[label="2.3"]',
+    ) as SideNavItem;
+
+    await elementUpdated(sideNavItem_2_1);
+    await elementUpdated(sideNavItem_2_2);
+    await elementUpdated(sideNavItem_2_3);
+
+    expect(sideNavItem_2_1.hasAttribute("expanded")).to.be.false;
+    expect(sideNavItem_2_2.hasAttribute("expanded")).to.be.false;
+    expect(sideNavItem_2_3.hasAttribute("expanded")).to.be.true;
+
+    const sideNavItem_2_3_1 = sideNavItem_2_3.querySelector(
+      'sp-sidenav-item[label="2.3.1"]',
+    ) as SideNavItem;
+    const sideNavItem_2_3_2 = sideNavItem_2_3.querySelector(
+      'sp-sidenav-item[label="2.3.2"]',
+    ) as SideNavItem;
+
+    await elementUpdated(sideNavItem_2_3_1);
+    await elementUpdated(sideNavItem_2_3_2);
+
+    expect(sideNavItem_2_3_1.hasAttribute("selected")).to.be.true;
+    expect(sideNavItem_2_3_2.hasAttribute("selected")).to.be.false;
+  });
 });
diff --git a/packages/sidenav/test/sidenav-memory.test.ts b/packages/sidenav/test/sidenav-memory.test.ts
index 3094723ac3..af9a0be92b 100644
--- a/packages/sidenav/test/sidenav-memory.test.ts
+++ b/packages/sidenav/test/sidenav-memory.test.ts
@@ -9,24 +9,18 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/radio/sp-radio.js';
-import '@spectrum-web-components/sidenav/sp-sidenav.js';
-import '@spectrum-web-components/sidenav/sp-sidenav-item.js';
-import '@spectrum-web-components/sidenav/sp-sidenav-heading.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/radio/sp-radio.js";
+import "@spectrum-web-components/sidenav/sp-sidenav.js";
+import "@spectrum-web-components/sidenav/sp-sidenav-item.js";
+import "@spectrum-web-components/sidenav/sp-sidenav-heading.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
 testForMemoryLeaks(html`
-    
-        
-            
-            
-        
-    
+  
+    
+      
+      
+    
+  
 `);
diff --git a/packages/sidenav/test/sidenav.test.ts b/packages/sidenav/test/sidenav.test.ts
index 9dc978c7bb..9c844a3c9b 100644
--- a/packages/sidenav/test/sidenav.test.ts
+++ b/packages/sidenav/test/sidenav.test.ts
@@ -10,518 +10,493 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/sidenav/sp-sidenav.js';
-import '@spectrum-web-components/sidenav/sp-sidenav-item.js';
-import '@spectrum-web-components/sidenav/sp-sidenav-heading.js';
-import { SideNav, SideNavItem } from '@spectrum-web-components/sidenav';
-import { manageTabIndex } from '../stories/sidenav.stories.js';
+import "@spectrum-web-components/sidenav/sp-sidenav.js";
+import "@spectrum-web-components/sidenav/sp-sidenav-item.js";
+import "@spectrum-web-components/sidenav/sp-sidenav-heading.js";
+import { SideNav, SideNavItem } from "@spectrum-web-components/sidenav";
+import { manageTabIndex } from "../stories/sidenav.stories.js";
 import {
-    arrowDownEvent,
-    arrowUpEvent,
-    shiftTabEvent,
-} from '../../../test/testing-helpers.js';
+  arrowDownEvent,
+  arrowUpEvent,
+  shiftTabEvent,
+} from "../../../test/testing-helpers.js";
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    nextFrame,
-    waitUntil,
-} from '@open-wc/testing';
-import { LitElement, TemplateResult } from '@spectrum-web-components/base';
-import { spy } from 'sinon';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('Sidenav', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-                    
-                        
-                        
-                    
-                
-            `)
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  waitUntil,
+} from "@open-wc/testing";
+import { LitElement, TemplateResult } from "@spectrum-web-components/base";
+import { spy } from "sinon";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+describe("Sidenav", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`
+        
+          
+            
+            
+          
+        
+      `),
+  );
+  it("loads", async () => {
+    const el = await fixture(html`
+      
+        
+          
+          
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("does not accept focus/click/blur when empty", async () => {
+    const el = await fixture(html`  `);
+
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+
+    el.focus();
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+
+    el.blur();
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+
+    el.click();
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+  });
+  it("does not accept keyboard events when items are not present", async () => {
+    const errorSpy = spy();
+    const el = await fixture(html`
+      
+        
+      
+    `);
+
+    await elementUpdated(el);
+    const item = el.querySelector("sp-sidenav-item") as SideNavItem;
+
+    window.addEventListener("error", () => errorSpy());
+
+    el.dispatchEvent(new FocusEvent("focusin"));
+    item.remove();
+
+    await elementUpdated(el);
+    el.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        code: "ArrowDown",
+      }),
     );
-    it('loads', async () => {
-        const el = await fixture(html`
-            
-                
-                    
-                    
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        await expect(el).to.be.accessible();
-    });
-    it('does not accept focus/click/blur when empty', async () => {
-        const el = await fixture(html`
-            
-        `);
 
-        await elementUpdated(el);
+    expect(errorSpy.callCount).to.equal(0);
+  });
+  it("does not accept focus when all children [disabled]", async () => {
+    const el = await fixture(html`
+      
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+
+    el.focus();
+    await elementUpdated(el);
+
+    expect(document.activeElement === el).to.be.false;
+    expect(el.matches(":focus-within")).to.be.false;
+  });
+  it("sets manageTabIndex on new children", async () => {
+    const el = await fixture(html`
+      
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.manageTabIndex).to.be.false;
+
+    const item1 = el.querySelector("sp-sidenav-item") as SideNavItem;
+
+    expect(item1.tabIndex).to.equal(0);
+
+    const newItem = document.createElement("sp-sidenav-item");
+
+    newItem.value = "Section 3";
+    newItem.label = "Section 3";
+    el.appendChild(newItem);
+
+    await elementUpdated(newItem);
+
+    expect(newItem.tabIndex).to.equal(0);
+
+    el.focus();
+    const focused = document.activeElement as SideNavItem;
+
+    focused.click();
+    expect(focused.selected).to.be.true;
+
+    el.dispatchEvent(shiftTabEvent());
+    const outsideFocused = document.activeElement as HTMLElement;
+
+    expect(typeof outsideFocused).not.to.equal(SideNavItem);
+  });
+  it("handles select", async () => {
+    const changeSpy = spy();
+    const el = await fixture(html`
+       changeSpy()}>
+        
+          
+          
+            
+          
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.value).to.be.undefined;
+
+    const sidenavItem = el.querySelector('[value="Section 2"]') as SideNavItem;
+
+    sidenavItem.dispatchEvent(
+      new CustomEvent("sidenav-select", {
+        bubbles: true,
+        detail: {
+          value: "Section 2",
+        },
+      }),
+    );
 
-        expect(document.activeElement === el).to.be.false;
+    await elementUpdated(el);
 
-        el.focus();
-        await elementUpdated(el);
+    expect(el.value).to.equal("Section 2");
+    expect(changeSpy.callCount).to.equal(1);
 
-        expect(document.activeElement === el).to.be.false;
+    sidenavItem.click();
 
-        el.blur();
-        await elementUpdated(el);
+    await elementUpdated(sidenavItem);
 
-        expect(document.activeElement === el).to.be.false;
+    const sidenavItemChild = el.querySelector(
+      '[value="Section 2a"]',
+    ) as SideNavItem;
 
-        el.click();
-        await elementUpdated(el);
+    sidenavItemChild.click();
 
-        expect(document.activeElement === el).to.be.false;
-    });
-    it('does not accept keyboard events when items are not present', async () => {
-        const errorSpy = spy();
-        const el = await fixture(html`
-            
-                
-            
-        `);
-
-        await elementUpdated(el);
-        const item = el.querySelector('sp-sidenav-item') as SideNavItem;
-
-        window.addEventListener('error', () => errorSpy());
-
-        el.dispatchEvent(new FocusEvent('focusin'));
-        item.remove();
-
-        await elementUpdated(el);
-        el.dispatchEvent(
-            new KeyboardEvent('keydown', {
-                code: 'ArrowDown',
-            })
-        );
-
-        expect(errorSpy.callCount).to.equal(0);
-    });
-    it('does not accept focus when all children [disabled]', async () => {
-        const el = await fixture(html`
-            
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(document.activeElement === el).to.be.false;
-
-        el.focus();
-        await elementUpdated(el);
-
-        expect(document.activeElement === el).to.be.false;
-        expect(el.matches(':focus-within')).to.be.false;
-    });
-    it('sets manageTabIndex on new children', async () => {
-        const el = await fixture(html`
-            
-                
-                
-            
-        `);
+    await elementUpdated(el);
 
-        await elementUpdated(el);
-        expect(el.manageTabIndex).to.be.false;
+    expect(el.value).to.equal("Section 2a");
+    expect(changeSpy.callCount).to.equal(2);
+  });
+  it("prevents selection", async () => {
+    const changeSpy = spy();
+    const el = await fixture(html`
+       {
+          event.preventDefault();
+          changeSpy();
+        }}
+      >
+        
+          
+          
+            
+          
+        
+      
+    `);
 
-        const item1 = el.querySelector('sp-sidenav-item') as SideNavItem;
+    await elementUpdated(el);
 
-        expect(item1.tabIndex).to.equal(0);
+    expect(el.value).to.be.undefined;
 
-        const newItem = document.createElement('sp-sidenav-item');
+    el.click();
 
-        newItem.value = 'Section 3';
-        newItem.label = 'Section 3';
-        el.appendChild(newItem);
+    await elementUpdated(el);
 
-        await elementUpdated(newItem);
+    expect(el.value).to.be.undefined;
+    expect(changeSpy.callCount).to.equal(1);
+  });
+  it("prevents [tabindex=0] while `focusin`", async () => {
+    const el = await fixture(manageTabIndex());
+    const selected = el.querySelector('[value="Section 1"]') as SideNavItem;
+    const toBeSelected = el.querySelector('[value="Section 0"]') as SideNavItem;
 
-        expect(newItem.tabIndex).to.equal(0);
+    await elementUpdated(el);
+    await waitUntil(() => el.value === "Section 1", "wait for selection");
 
-        el.focus();
-        const focused = document.activeElement as SideNavItem;
+    expect(el.value).to.equal("Section 1");
+    expect(selected.tabIndex, "initially 0").to.equal(0);
+    expect(toBeSelected.tabIndex, "initially -1").to.equal(-1);
 
-        focused.click();
-        expect(focused.selected).to.be.true;
+    el.focus();
 
-        el.dispatchEvent(shiftTabEvent());
-        const outsideFocused = document.activeElement as HTMLElement;
+    await elementUpdated(el);
 
-        expect(typeof outsideFocused).not.to.equal(SideNavItem);
-    });
-    it('handles select', async () => {
-        const changeSpy = spy();
-        const el = await fixture(html`
-             changeSpy()}>
-                
-                    
-                    
-                        
-                    
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.value).to.be.undefined;
-
-        const sidenavItem = el.querySelector(
-            '[value="Section 2"]'
-        ) as SideNavItem;
-
-        sidenavItem.dispatchEvent(
-            new CustomEvent('sidenav-select', {
-                bubbles: true,
-                detail: {
-                    value: 'Section 2',
-                },
-            })
-        );
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('Section 2');
-        expect(changeSpy.callCount).to.equal(1);
-
-        sidenavItem.click();
-
-        await elementUpdated(sidenavItem);
-
-        const sidenavItemChild = el.querySelector(
-            '[value="Section 2a"]'
-        ) as SideNavItem;
-
-        sidenavItemChild.click();
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('Section 2a');
-        expect(changeSpy.callCount).to.equal(2);
-    });
-    it('prevents selection', async () => {
-        const changeSpy = spy();
-        const el = await fixture(html`
-             {
-                    event.preventDefault();
-                    changeSpy();
-                }}
-            >
-                
-                    
-                    
-                        
-                    
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.value).to.be.undefined;
-
-        el.click();
-
-        await elementUpdated(el);
-
-        expect(el.value).to.be.undefined;
-        expect(changeSpy.callCount).to.equal(1);
-    });
-    it('prevents [tabindex=0] while `focusin`', async () => {
-        const el = await fixture(manageTabIndex());
-        const selected = el.querySelector('[value="Section 1"]') as SideNavItem;
-        const toBeSelected = el.querySelector(
-            '[value="Section 0"]'
-        ) as SideNavItem;
-
-        await elementUpdated(el);
-        await waitUntil(() => el.value === 'Section 1', 'wait for selection');
-
-        expect(el.value).to.equal('Section 1');
-        expect(selected.tabIndex, 'initially 0').to.equal(0);
-        expect(toBeSelected.tabIndex, 'initially -1').to.equal(-1);
-
-        el.focus();
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('Section 1');
-        expect(selected.tabIndex, '0 when focusin').to.equal(0);
-
-        el.blur();
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('Section 1');
-        expect(selected.tabIndex, '0 when blur').to.equal(0);
-
-        const bindingRect = toBeSelected.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'click',
-                    position: [
-                        bindingRect.x + bindingRect.width / 2,
-                        bindingRect.y + bindingRect.height / 2,
-                    ],
-                },
-            ],
-        });
-        toBeSelected.dispatchEvent(
-            new CustomEvent('sidenav-select', {
-                bubbles: true,
-                detail: {
-                    value: 'Section 0',
-                },
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.value).to.equal('Section 0');
-        expect(toBeSelected.tabIndex, 'will be new focusable child').to.equal(
-            0
-        );
-        expect(selected.tabIndex, 'no longer selected').to.equal(-1);
+    expect(el.value).to.equal("Section 1");
+    expect(selected.tabIndex, "0 when focusin").to.equal(0);
+
+    el.blur();
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal("Section 1");
+    expect(selected.tabIndex, "0 when blur").to.equal(0);
+
+    const bindingRect = toBeSelected.getBoundingClientRect();
+
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            bindingRect.x + bindingRect.width / 2,
+            bindingRect.y + bindingRect.height / 2,
+          ],
+        },
+      ],
     });
-    it('manage tab index', async () => {
-        const el = await fixture(manageTabIndex());
+    toBeSelected.dispatchEvent(
+      new CustomEvent("sidenav-select", {
+        bubbles: true,
+        detail: {
+          value: "Section 0",
+        },
+      }),
+    );
+    await elementUpdated(el);
 
-        await elementUpdated(el);
-        expect(el.value).to.equal('Section 1');
+    expect(el.value).to.equal("Section 0");
+    expect(toBeSelected.tabIndex, "will be new focusable child").to.equal(0);
+    expect(selected.tabIndex, "no longer selected").to.equal(-1);
+  });
+  it("manage tab index", async () => {
+    const el = await fixture(manageTabIndex());
 
-        el.focus();
-        el.dispatchEvent(arrowUpEvent());
-        let focused = document.activeElement as SideNavItem;
+    await elementUpdated(el);
+    expect(el.value).to.equal("Section 1");
 
-        focused.click();
+    el.focus();
+    el.dispatchEvent(arrowUpEvent());
+    let focused = document.activeElement as SideNavItem;
 
-        await elementUpdated(el);
+    focused.click();
 
-        expect(el.value).to.equal('Section 0');
+    await elementUpdated(el);
 
-        el.focus();
-        el.dispatchEvent(arrowDownEvent());
-        el.dispatchEvent(arrowDownEvent());
-        focused = document.activeElement as SideNavItem;
-        expect(focused.expanded, 'not expanded').to.be.false;
-        focused.click();
+    expect(el.value).to.equal("Section 0");
 
-        await elementUpdated(el);
+    el.focus();
+    el.dispatchEvent(arrowDownEvent());
+    el.dispatchEvent(arrowDownEvent());
+    focused = document.activeElement as SideNavItem;
+    expect(focused.expanded, "not expanded").to.be.false;
+    focused.click();
 
-        expect(focused.expanded, 'expanded').to.be.true;
+    await elementUpdated(el);
 
-        el.dispatchEvent(arrowDownEvent());
-        await elementUpdated(el);
-        focused = document.activeElement as SideNavItem;
-        focused.click();
+    expect(focused.expanded, "expanded").to.be.true;
 
-        await elementUpdated(el);
+    el.dispatchEvent(arrowDownEvent());
+    await elementUpdated(el);
+    focused = document.activeElement as SideNavItem;
+    focused.click();
 
-        expect(el.value).to.equal('Section 3a');
+    await elementUpdated(el);
 
-        document.body.focus();
+    expect(el.value).to.equal("Section 3a");
 
-        el.focus();
-        focused = document.activeElement as SideNavItem;
-        expect(focused.selected, 'selected').to.be.true;
+    document.body.focus();
 
-        el.dispatchEvent(shiftTabEvent());
-        const outsideFocused = document.activeElement as HTMLElement;
+    el.focus();
+    focused = document.activeElement as SideNavItem;
+    expect(focused.selected, "selected").to.be.true;
 
-        expect(typeof outsideFocused).not.to.equal(SideNavItem);
-    });
-    it('focuses the child anchor not the root when [tabindex=-1]', async () => {
-        const el = await fixture(manageTabIndex());
-
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-        await nextFrame();
-
-        await elementUpdated(el);
-        const firstItem = el.querySelector(
-            '[value="Section 0"]'
-        ) as SideNavItem;
-        const selected = el.querySelector('[selected]') as SideNavItem;
-
-        expect(selected.tabIndex).to.equal(0);
-        expect(firstItem.tabIndex).to.equal(-1);
-
-        const firstRect = firstItem.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'click',
-                    position: [
-                        firstRect.x + firstRect.width / 2,
-                        firstRect.y + firstRect.height / 2,
-                    ],
-                },
-            ],
-        });
-        await elementUpdated(el);
-
-        expect(firstItem.matches(':focus'), 'root has focus').to.be.true;
-        expect(
-            firstItem.focusElement.matches(':focus'),
-            'child has more precise focus'
-        ).to.be.true;
+    el.dispatchEvent(shiftTabEvent());
+    const outsideFocused = document.activeElement as HTMLElement;
+
+    expect(typeof outsideFocused).not.to.equal(SideNavItem);
+  });
+  it("focuses the child anchor not the root when [tabindex=-1]", async () => {
+    const el = await fixture(manageTabIndex());
+
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+    await nextFrame();
+
+    await elementUpdated(el);
+    const firstItem = el.querySelector('[value="Section 0"]') as SideNavItem;
+    const selected = el.querySelector("[selected]") as SideNavItem;
+
+    expect(selected.tabIndex).to.equal(0);
+    expect(firstItem.tabIndex).to.equal(-1);
+
+    const firstRect = firstItem.getBoundingClientRect();
+
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            firstRect.x + firstRect.width / 2,
+            firstRect.y + firstRect.height / 2,
+          ],
+        },
+      ],
     });
-    it('manage tab index through shadow DOM', async () => {
-        class SideNavTestEl extends LitElement {
-            protected override render(): TemplateResult {
-                return manageTabIndex();
-            }
-        }
-        customElements.define('sidenav-test-el', SideNavTestEl);
-        const el = await fixture(html`
-            
-        `);
+    await elementUpdated(el);
 
-        await elementUpdated(el);
-        const rootNode = el.shadowRoot as ShadowRoot;
-        const sidenavEl = rootNode.querySelector('sp-sidenav') as SideNav;
+    expect(firstItem.matches(":focus"), "root has focus").to.be.true;
+    expect(
+      firstItem.focusElement.matches(":focus"),
+      "child has more precise focus",
+    ).to.be.true;
+  });
+  it("manage tab index through shadow DOM", async () => {
+    class SideNavTestEl extends LitElement {
+      protected override render(): TemplateResult {
+        return manageTabIndex();
+      }
+    }
+    customElements.define("sidenav-test-el", SideNavTestEl);
+    const el = await fixture(html`
+      
+    `);
 
-        await elementUpdated(sidenavEl);
-        expect(sidenavEl.value).to.equal('Section 1');
+    await elementUpdated(el);
+    const rootNode = el.shadowRoot as ShadowRoot;
+    const sidenavEl = rootNode.querySelector("sp-sidenav") as SideNav;
 
-        sidenavEl.focus();
-        sidenavEl.dispatchEvent(arrowUpEvent());
-        let focused = rootNode.activeElement as SideNavItem;
+    await elementUpdated(sidenavEl);
+    expect(sidenavEl.value).to.equal("Section 1");
 
-        focused.focusElement.click();
+    sidenavEl.focus();
+    sidenavEl.dispatchEvent(arrowUpEvent());
+    let focused = rootNode.activeElement as SideNavItem;
 
-        await elementUpdated(sidenavEl);
+    focused.focusElement.click();
 
-        expect(sidenavEl.value).to.equal('Section 0');
+    await elementUpdated(sidenavEl);
 
-        sidenavEl.focus();
-        sidenavEl.dispatchEvent(arrowDownEvent());
-        sidenavEl.dispatchEvent(arrowDownEvent());
-        focused = rootNode.activeElement as SideNavItem;
-        expect(focused.expanded).to.be.false;
-        focused.focusElement.click();
+    expect(sidenavEl.value).to.equal("Section 0");
 
-        await elementUpdated(sidenavEl);
+    sidenavEl.focus();
+    sidenavEl.dispatchEvent(arrowDownEvent());
+    sidenavEl.dispatchEvent(arrowDownEvent());
+    focused = rootNode.activeElement as SideNavItem;
+    expect(focused.expanded).to.be.false;
+    focused.focusElement.click();
 
-        expect(focused.expanded).to.be.true;
+    await elementUpdated(sidenavEl);
 
-        sidenavEl.dispatchEvent(arrowDownEvent());
-        await elementUpdated(sidenavEl);
-        focused = rootNode.activeElement as SideNavItem;
-        focused.focusElement.click();
+    expect(focused.expanded).to.be.true;
 
-        await elementUpdated(sidenavEl);
+    sidenavEl.dispatchEvent(arrowDownEvent());
+    await elementUpdated(sidenavEl);
+    focused = rootNode.activeElement as SideNavItem;
+    focused.focusElement.click();
 
-        expect(sidenavEl.value).to.equal('Section 3a');
+    await elementUpdated(sidenavEl);
 
-        document.body.focus();
+    expect(sidenavEl.value).to.equal("Section 3a");
 
-        sidenavEl.focus();
-        focused = rootNode.activeElement as SideNavItem;
-        expect(focused.selected).to.be.true;
+    document.body.focus();
 
-        sidenavEl.dispatchEvent(shiftTabEvent());
-        const outsideFocused = rootNode.activeElement as HTMLElement;
+    sidenavEl.focus();
+    focused = rootNode.activeElement as SideNavItem;
+    expect(focused.selected).to.be.true;
 
-        expect(typeof outsideFocused).not.to.equal(SideNavItem);
-    });
-    it('manage tab index for late added items', async () => {
-        const el = await fixture(html`
-            
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-        expect(el.manageTabIndex).to.be.true;
-
-        const item1 = el.querySelector('sp-sidenav-item') as SideNavItem;
-        const item2 = el.querySelector(
-            'sp-sidenav-item:nth-child(2)'
-        ) as SideNavItem;
-
-        await elementUpdated(item1);
-        await elementUpdated(item2);
-        expect(item1.tabIndex, 'first item tabindex').to.equal(0);
-        expect(item2.tabIndex, 'second item tabindex').to.equal(-1);
-
-        const item3 = document.createElement('sp-sidenav-item');
-
-        item3.value = 'Section 2';
-        item3.label = 'Section 2';
-
-        await elementUpdated(el);
-
-        el.appendChild(item3);
-
-        await elementUpdated(item3);
-        await elementUpdated(el);
-
-        await waitUntil(() => item3.tabIndex === -1, 'after');
-    });
+    sidenavEl.dispatchEvent(shiftTabEvent());
+    const outsideFocused = rootNode.activeElement as HTMLElement;
+
+    expect(typeof outsideFocused).not.to.equal(SideNavItem);
+  });
+  it("manage tab index for late added items", async () => {
+    const el = await fixture(html`
+      
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+    expect(el.manageTabIndex).to.be.true;
+
+    const item1 = el.querySelector("sp-sidenav-item") as SideNavItem;
+    const item2 = el.querySelector(
+      "sp-sidenav-item:nth-child(2)",
+    ) as SideNavItem;
+
+    await elementUpdated(item1);
+    await elementUpdated(item2);
+    expect(item1.tabIndex, "first item tabindex").to.equal(0);
+    expect(item2.tabIndex, "second item tabindex").to.equal(-1);
+
+    const item3 = document.createElement("sp-sidenav-item");
+
+    item3.value = "Section 2";
+    item3.label = "Section 2";
+
+    await elementUpdated(el);
+
+    el.appendChild(item3);
+
+    await elementUpdated(item3);
+    await elementUpdated(el);
+
+    await waitUntil(() => item3.tabIndex === -1, "after");
+  });
 });
diff --git a/packages/slider/sp-slider-handle.ts b/packages/slider/sp-slider-handle.ts
index 1acbfd65b8..14e2cdae4f 100644
--- a/packages/slider/sp-slider-handle.ts
+++ b/packages/slider/sp-slider-handle.ts
@@ -9,13 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { SliderHandle } from './src/SliderHandle.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import { SliderHandle } from "./src/SliderHandle.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-slider-handle', SliderHandle);
+defineElement("sp-slider-handle", SliderHandle);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-slider-handle': SliderHandle;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-slider-handle": SliderHandle;
+  }
 }
diff --git a/packages/slider/sp-slider.ts b/packages/slider/sp-slider.ts
index 5d75511640..f8f0188fc9 100644
--- a/packages/slider/sp-slider.ts
+++ b/packages/slider/sp-slider.ts
@@ -9,14 +9,14 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import './sp-slider-handle.js'; // codify sp-slider's implicit dependency on sp-slider-handle
-import { Slider } from './src/Slider.js';
-import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
+import "./sp-slider-handle.js"; // codify sp-slider's implicit dependency on sp-slider-handle
+import { Slider } from "./src/Slider.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
 
-defineElement('sp-slider', Slider);
+defineElement("sp-slider", Slider);
 
 declare global {
-    interface HTMLElementTagNameMap {
-        'sp-slider': Slider;
-    }
+  interface HTMLElementTagNameMap {
+    "sp-slider": Slider;
+  }
 }
diff --git a/packages/slider/src/HandleController.ts b/packages/slider/src/HandleController.ts
index 9f4ef6baa8..a01daf8007 100644
--- a/packages/slider/src/HandleController.ts
+++ b/packages/slider/src/HandleController.ts
@@ -9,52 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 import {
-    classMap,
-    ifDefined,
-    styleMap,
-} from '@spectrum-web-components/base/src/directives.js';
-import { MutationController } from '@lit-labs/observers/mutation-controller.js';
-import { Slider } from './Slider.js';
-import { SliderHandle, SliderNormalization } from './SliderHandle.js';
+  classMap,
+  ifDefined,
+  styleMap,
+} from "@spectrum-web-components/base/src/directives.js";
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+import { Slider } from "./Slider.js";
+import { SliderHandle, SliderNormalization } from "./SliderHandle.js";
 
 interface HandleReference {
-    handle: HTMLElement;
-    input: HTMLInputElement;
+  handle: HTMLElement;
+  input: HTMLInputElement;
 }
 
 interface HandleComponents extends HandleReference {
-    model: SliderHandle;
+  model: SliderHandle;
 }
 
 interface RangeAndClamp {
-    range: { min: number; max: number };
-    clamp: { min: number; max: number };
+  range: { min: number; max: number };
+  clamp: { min: number; max: number };
 }
 interface ModelValue extends RangeAndClamp {
-    name: string;
-    value: number;
-    normalizedValue: number;
-    step: number;
-    highlight: boolean;
-    ariaLabel?: string;
-    normalization: SliderNormalization;
-    handle: SliderHandle;
+  name: string;
+  value: number;
+  normalizedValue: number;
+  step: number;
+  highlight: boolean;
+  ariaLabel?: string;
+  normalization: SliderNormalization;
+  handle: SliderHandle;
 }
 
 interface InputWithModel extends HTMLInputElement {
-    model: ModelValue;
+  model: ModelValue;
 }
 
 interface DataFromPointerEvent {
-    resolvedInput: boolean;
-    input: InputWithModel;
-    model?: ModelValue;
+  resolvedInput: boolean;
+  input: InputWithModel;
+  model?: ModelValue;
 }
 
 export interface HandleValueDictionary {
-    [key: string]: number;
+  [key: string]: number;
 }
 
 /**
@@ -66,865 +66,828 @@ export interface HandleValueDictionary {
  * @fires sp-slider-handle-ready - Dispatched when a handle is upgraded.
  */
 export class HandleController {
-    /**
-     * The host slider element.
-     */
-    private host!: Slider;
-
-    /**
-     * A map of handle IDs to slider handles.
-     */
-    private handles: Map = new Map();
-
-    /**
-     * The model values of the slider.
-     */
-    private model: ModelValue[] = [];
-
-    /**
-     * The order of the handles.
-     */
-    private handleOrder: string[] = [];
-
-    /**
-     * The handle currently being dragged.
-     */
-    private draggingHandle?: SliderHandle;
-
-    /**
-     * A weak map of slider handles to handle references.
-     */
-    private handleRefMap?: WeakMap;
-
-    constructor(host: Slider) {
-        this.host = host;
-
-        new MutationController(this.host, {
-            config: {
-                subtree: true,
-                childList: true,
-            },
-            callback: () => {
-                this.extractModelFromLightDom();
-            },
-        });
-
+  /**
+   * The host slider element.
+   */
+  private host!: Slider;
+
+  /**
+   * A map of handle IDs to slider handles.
+   */
+  private handles: Map = new Map();
+
+  /**
+   * The model values of the slider.
+   */
+  private model: ModelValue[] = [];
+
+  /**
+   * The order of the handles.
+   */
+  private handleOrder: string[] = [];
+
+  /**
+   * The handle currently being dragged.
+   */
+  private draggingHandle?: SliderHandle;
+
+  /**
+   * A weak map of slider handles to handle references.
+   */
+  private handleRefMap?: WeakMap;
+
+  constructor(host: Slider) {
+    this.host = host;
+
+    new MutationController(this.host, {
+      config: {
+        subtree: true,
+        childList: true,
+      },
+      callback: () => {
         this.extractModelFromLightDom();
+      },
+    });
+
+    this.extractModelFromLightDom();
+  }
+
+  /**
+   * Gets the values of the handles.
+   */
+  public get values(): HandleValueDictionary {
+    const result: HandleValueDictionary = {};
+
+    for (const model of this.handles.values()) {
+      result[model.handleName] = model.value;
     }
-
-    /**
-     * Gets the values of the handles.
-     */
-    public get values(): HandleValueDictionary {
-        const result: HandleValueDictionary = {};
-
-        for (const model of this.handles.values()) {
-            result[model.handleName] = model.value;
+
+    return result;
+  }
+
+  /**
+   * Gets the number of handles.
+   */
+  public get size(): number {
+    return this.handles.size;
+  }
+
+  /**
+   * Gets the input element for a given handle.
+   * Throws an error if the handle does not exist.
+   */
+  public inputForHandle(handle: SliderHandle): HTMLInputElement | undefined {
+    if (this.handles.has(handle.handleName)) {
+      const { input } = this.getHandleElements(handle) || {};
+
+      return input;
+    }
+
+    throw new Error(`No input for handle "${handle.name}"`);
+  }
+
+  /**
+   * Requests an update for the host slider element.
+   */
+  public requestUpdate(): void {
+    if (this.host.hasUpdated) {
+      this.host.requestUpdate();
+    }
+  }
+
+  /**
+   * It is possible for value attributes to be set programmatically. The ``
+   * for a particular slider needs to have an opportunity to validate any such
+   * values
+   *
+   * @param handle - Handle who's value needs validation
+   */
+  public setValueFromHandle(handle: SliderHandle): void {
+    const elements = this.getHandleElements(handle);
+
+    if (!elements) {
+      return;
+    }
+
+    const { input } = elements;
+
+    if (input.valueAsNumber === handle.value) {
+      if (handle.dragging) {
+        handle.dispatchInputEvent();
+      }
+    } else {
+      input.valueAsNumber = handle.value;
+      this.requestUpdate();
+    }
+
+    handle.value = input.valueAsNumber;
+  }
+
+  /**
+   * Handles changes to a slider handle.
+   * Requests an update for the host slider element if the handle has changed.
+   */
+  public handleHasChanged(handle: SliderHandle): void {
+    if (handle !== this.host) {
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Gets the formatted value for a given handle.
+   * Formats the value using the handle's number format or the host's number format.
+   * Appends the forced unit to the formatted value.
+   */
+  public formattedValueForHandle(model: ModelValue): string {
+    const { handle } = model;
+    const numberFormat = handle.numberFormat ?? this.host.numberFormat;
+    const _forcedUnit =
+      handle._forcedUnit === "" ? this.host._forcedUnit : handle._forcedUnit;
+
+    return handle.getAriaHandleText(model.value, numberFormat) + _forcedUnit;
+  }
+
+  /**
+   * Gets the formatted values for all handles.
+   */
+  public get formattedValues(): Map {
+    const result = new Map();
+
+    for (const model of this.model) {
+      result.set(model.name, this.formattedValueForHandle(model));
+    }
+
+    return result;
+  }
+
+  /**
+   * Gets the focus element for the slider.
+   * Returns the input element for the active handle or the number field if the input is not available.
+   */
+  public get focusElement(): HTMLElement {
+    const { input } = this.getActiveHandleElements();
+
+    if (
+      !input ||
+      (this.host.editable && !(input as InputWithModel).model.handle.dragging)
+    ) {
+      return this.host.numberField;
+    }
+
+    return input;
+  }
+
+  /**
+   * Handles orientation changes.
+   * Updates the bounding rectangle of the slider.
+   */
+  protected handleOrientation = (): void => {
+    this.updateBoundingRect();
+  };
+
+  /**
+   * Called when the host slider element is connected to the DOM.
+   * Adds event listeners for orientation changes.
+   */
+  public hostConnected(): void {
+    if ("orientation" in screen) {
+      screen.orientation.addEventListener("change", this.handleOrientation);
+    } else {
+      window.addEventListener("orientationchange", this.handleOrientation);
+    }
+  }
+
+  /**
+   * Called when the host slider element is disconnected from the DOM.
+   * Removes event listeners for orientation changes.
+   */
+  public hostDisconnected(): void {
+    if ("orientation" in screen) {
+      screen.orientation.removeEventListener("change", this.handleOrientation);
+    } else {
+      window.removeEventListener("orientationchange", this.handleOrientation);
+    }
+  }
+
+  /**
+   * Called when the host slider element is updated.
+   * Updates the model and requests an update.
+   */
+  public hostUpdate(): void {
+    this.updateModel();
+  }
+
+  /**
+   * Waits for a handle to be upgraded.
+   * Adds an event listener for the 'sp-slider-handle-ready' event if the handle is not upgraded.
+   *
+   * Since extractModelFromLightDom bails on the first un-upgraded handle,
+   * a maximum of one listener will be set up per extraction attempt.
+   */
+  private waitForUpgrade(handle: HTMLElement): boolean {
+    if (handle instanceof SliderHandle) {
+      return false;
+    }
+
+    handle.addEventListener(
+      "sp-slider-handle-ready",
+      () => this.extractModelFromLightDom(),
+      { once: true, passive: true },
+    );
+
+    return true;
+  }
+
+  /**
+   * Extracts the model from the light DOM.
+   * Updates the handles and handle order based on the slotted handles.
+   */
+  private extractModelFromLightDom = (): void => {
+    let handles = [
+      ...this.host.querySelectorAll('[slot="handle"]'),
+    ] as SliderHandle[];
+
+    if (handles.length === 0) {
+      handles = [this.host as SliderHandle];
+    }
+
+    // extractModelFromLightDom depends on slotted handles already having been upgraded
+    if (handles.some((h) => this.waitForUpgrade(h))) {
+      return;
+    }
+
+    this.handles = new Map();
+
+    this.handleOrder = [];
+
+    handles.forEach((handle, index) => {
+      if (!handle.handleName?.length) {
+        handle.name = `handle${index + 1}`;
+      }
+
+      this.handles.set(handle.handleName, handle);
+      this.handleOrder.push(handle.handleName);
+      handle.handleController = this;
+    });
+
+    this.requestUpdate();
+  };
+
+  /**
+   * Gets the name of the active handle.
+   */
+  public get activeHandle(): string {
+    return this.handleOrder[this.handleOrder.length - 1];
+  }
+
+  /**
+   * Gets the ID of the input element for the active handle.
+   */
+  public get activeHandleInputId(): string {
+    const active = this.activeHandle;
+    const index = this.model.findIndex((model) => model.name === active);
+
+    return `input-${index}`;
+  }
+
+  /**
+   * Activates the specified handle.
+   * Moves the handle to the end of the handle order.
+   */
+  public activateHandle(name: string): void {
+    const index = this.handleOrder.findIndex((item) => item === name);
+
+    if (index >= 0) {
+      this.handleOrder.splice(index, 1);
+    }
+
+    this.handleOrder.push(name);
+  }
+
+  /**
+   * Gets the model value for the active handle.
+   */
+  public get activeHandleModel(): ModelValue {
+    const active = this.activeHandle;
+
+    return this.model.find((model) => model.name === active)!;
+  }
+
+  /**
+   * Gets the elements associated with the active handle.
+   */
+  private getActiveHandleElements(): HandleComponents {
+    const name = this.activeHandle;
+    const handleSlider = this.handles.get(name) as SliderHandle;
+    const elements = this.getHandleElements(handleSlider) as HandleReference;
+
+    return { model: handleSlider, ...elements };
+  }
+
+  /**
+   * Gets the elements associated with a given handle.
+   */
+  private getHandleElements(sliderHandle: SliderHandle): HandleReference {
+    if (!this.handleRefMap) {
+      this.handleRefMap = new WeakMap();
+
+      const inputNodes =
+        this.host.shadowRoot.querySelectorAll(".handle > input");
+
+      for (const inputNode of inputNodes) {
+        const input = inputNode as HTMLInputElement;
+        const handle = input.parentElement as HTMLElement;
+        const model = this.handles.get(handle.getAttribute("name") as string);
+
+        if (model) {
+          this.handleRefMap.set(model, { input, handle });
         }
+      }
+    }
+
+    const components = this.handleRefMap.get(sliderHandle) as HandleReference;
+
+    return components;
+  }
+
+  /**
+   * Clears the cache of handle components.
+   */
+  private clearHandleComponentCache(): void {
+    delete this.handleRefMap;
+  }
+
+  /**
+   * The bounding client rectangle of the slider track.
+   */
+  private _boundingClientRect?: DOMRect;
+
+  /**
+   * Gets the bounding client rectangle of the slider track.
+   */
+  private get boundingClientRect(): DOMRect {
+    if (!this._boundingClientRect) {
+      this._boundingClientRect = this.host.track.getBoundingClientRect();
+    }
+
+    return this._boundingClientRect;
+  }
+
+  /**
+   * Updates the bounding client rectangle of the slider track.
+   */
+  private updateBoundingRect(): void {
+    delete this._boundingClientRect;
+  }
 
-        return result;
-    }
-
-    /**
-     * Gets the number of handles.
-     */
-    public get size(): number {
-        return this.handles.size;
-    }
-
-    /**
-     * Gets the input element for a given handle.
-     * Throws an error if the handle does not exist.
-     */
-    public inputForHandle(handle: SliderHandle): HTMLInputElement | undefined {
-        if (this.handles.has(handle.handleName)) {
-            const { input } = this.getHandleElements(handle) || {};
-
-            return input;
-        }
+  /**
+   * Extracts data from a pointer event.
+   * Return the `input` and `model` associated with the event and
+   * whether the `input` is a `resolvedInput` meaning it was acquired
+   * from the `model` rather than the event.
+   */
+  protected extractDataFromEvent(event: PointerEvent): DataFromPointerEvent {
+    if (!this._activePointerEventData) {
+      let input = (event.target as Element).querySelector(
+        ":scope > .input",
+      ) as InputWithModel;
+      const resolvedInput = !input;
+      const model = input
+        ? input.model
+        : this.model.find((item) => item.name === this.activeHandle);
 
-        throw new Error(`No input for handle "${handle.name}"`);
-    }
+      if (!input && !!model) {
+        input = model.handle.focusElement as InputWithModel;
+      }
 
-    /**
-     * Requests an update for the host slider element.
-     */
-    public requestUpdate(): void {
-        if (this.host.hasUpdated) {
-            this.host.requestUpdate();
-        }
+      this._activePointerEventData = {
+        input,
+        model,
+        resolvedInput,
+      };
     }
 
-    /**
-     * It is possible for value attributes to be set programmatically. The ``
-     * for a particular slider needs to have an opportunity to validate any such
-     * values
-     *
-     * @param handle - Handle who's value needs validation
-     */
-    public setValueFromHandle(handle: SliderHandle): void {
-        const elements = this.getHandleElements(handle);
-
-        if (!elements) return;
+    return this._activePointerEventData;
+  }
 
-        const { input } = elements;
+  /**
+   * The active pointer event data.
+   */
+  private _activePointerEventData!: DataFromPointerEvent | undefined;
 
-        if (input.valueAsNumber === handle.value) {
-            if (handle.dragging) {
-                handle.dispatchInputEvent();
-            }
-        } else {
-            input.valueAsNumber = handle.value;
-            this.requestUpdate();
-        }
-
-        handle.value = input.valueAsNumber;
-    }
-
-    /**
-     * Handles changes to a slider handle.
-     * Requests an update for the host slider element if the handle has changed.
-     */
-    public handleHasChanged(handle: SliderHandle): void {
-        if (handle !== this.host) {
-            this.requestUpdate();
-        }
-    }
+  /**
+   * Handles double-click events on the slider handle.
+   * Resets the handle value to its default value if defined.
+   */
+  public handleDoubleClick(event: PointerEvent): void {
+    const input = (event.target as Element).querySelector(
+      ".input",
+    ) as InputWithModel;
 
-    /**
-     * Gets the formatted value for a given handle.
-     * Formats the value using the handle's number format or the host's number format.
-     * Appends the forced unit to the formatted value.
-     */
-    public formattedValueForHandle(model: ModelValue): string {
-        const { handle } = model;
-        const numberFormat = handle.numberFormat ?? this.host.numberFormat;
-        const _forcedUnit =
-            handle._forcedUnit === ''
-                ? this.host._forcedUnit
-                : handle._forcedUnit;
-
-        return (
-            handle.getAriaHandleText(model.value, numberFormat) + _forcedUnit
-        );
+    if (input.model?.handle.defaultValue !== undefined) {
+      input.model.handle.value = input.model.handle.defaultValue;
+      this.dispatchChangeEvent(input, input.model.handle);
+      input.model.handle.dispatchInputEvent();
+      this.requestUpdate();
     }
+  }
 
-    /**
-     * Gets the formatted values for all handles.
-     */
-    public get formattedValues(): Map {
-        const result = new Map();
+  /**
+   * Handles pointerdown events on the slider handle.
+   * Initiates dragging and updates the handle value based on the pointer position.
+   */
+  public handlePointerdown(event: PointerEvent): void {
+    const { resolvedInput, model } = this.extractDataFromEvent(event);
 
-        for (const model of this.model) {
-            result.set(model.name, this.formattedValueForHandle(model));
-        }
+    if (!model || this.host.disabled || event.button !== 0) {
+      event.preventDefault();
 
-        return result;
+      return;
     }
 
-    /**
-     * Gets the focus element for the slider.
-     * Returns the input element for the active handle or the number field if the input is not available.
-     */
-    public get focusElement(): HTMLElement {
-        const { input } = this.getActiveHandleElements();
-
-        if (
-            !input ||
-            (this.host.editable &&
-                !(input as InputWithModel).model.handle.dragging)
-        ) {
-            return this.host.numberField;
-        }
+    this.host.track.setPointerCapture(event.pointerId);
+    this.updateBoundingRect();
+
+    if (event.pointerType === "mouse") {
+      this.host.labelEl.click();
+    }
+
+    this.draggingHandle = model.handle;
+    model.handle.dragging = true;
+    this.activateHandle(model.name);
 
-        return input;
+    if (resolvedInput) {
+      // When the input is resolved forward the pointer event to
+      // `handlePointermove` in order to update the value/UI becuase
+      // the pointer event was on the track not a handle
+      this.handlePointermove(event);
     }
 
-    /**
-     * Handles orientation changes.
-     * Updates the bounding rectangle of the slider.
-     */
-    protected handleOrientation = (): void => {
-        this.updateBoundingRect();
-    };
+    this.requestUpdate();
+  }
 
-    /**
-     * Called when the host slider element is connected to the DOM.
-     * Adds event listeners for orientation changes.
-     */
-    public hostConnected(): void {
-        if ('orientation' in screen) {
-            screen.orientation.addEventListener(
-                'change',
-                this.handleOrientation
-            );
-        } else {
-            window.addEventListener(
-                'orientationchange',
-                this.handleOrientation
-            );
-        }
-    }
+  /**
+   * Handles pointerup events on the slider handle.
+   * Ends dragging and updates the handle value based on the pointer position.
+   */
+  public handlePointerup(event: PointerEvent): void {
+    const { input, model } = this.extractDataFromEvent(event);
+
+    delete this._activePointerEventData;
+
+    if (!model) {
+      return;
+    }
+
+    if (event.pointerType === "mouse") {
+      this.host.labelEl.click();
+    }
+
+    this.cancelDrag(model);
+    this.requestUpdate();
+    this.host.track.releasePointerCapture(event.pointerId);
+    this.dispatchChangeEvent(input, model.handle);
+  }
+
+  /**
+   * Handles pointermove events on the slider handle.
+   * Updates the handle value based on the pointer position.
+   */
+  public handlePointermove(event: PointerEvent): void {
+    const { input, model } = this.extractDataFromEvent(event);
 
-    /**
-     * Called when the host slider element is disconnected from the DOM.
-     * Removes event listeners for orientation changes.
-     */
-    public hostDisconnected(): void {
-        if ('orientation' in screen) {
-            screen.orientation.removeEventListener(
-                'change',
-                this.handleOrientation
-            );
-        } else {
-            window.removeEventListener(
-                'orientationchange',
-                this.handleOrientation
-            );
-        }
+    if (!model) {
+      return;
     }
 
-    /**
-     * Called when the host slider element is updated.
-     * Updates the model and requests an update.
-     */
-    public hostUpdate(): void {
-        this.updateModel();
+    if (!this.draggingHandle) {
+      return;
     }
 
-    /**
-     * Waits for a handle to be upgraded.
-     * Adds an event listener for the 'sp-slider-handle-ready' event if the handle is not upgraded.
-     *
-     * Since extractModelFromLightDom bails on the first un-upgraded handle,
-     * a maximum of one listener will be set up per extraction attempt.
-     */
-    private waitForUpgrade(handle: HTMLElement): boolean {
-        if (handle instanceof SliderHandle) {
-            return false;
-        }
+    input.value = this.calculateHandlePosition(event, model).toString();
+    model.handle.value = parseFloat(input.value);
+    this.host.indeterminate = false;
+    this.requestUpdate();
+  }
 
-        handle.addEventListener(
-            'sp-slider-handle-ready',
-            () => this.extractModelFromLightDom(),
-            { once: true, passive: true }
-        );
+  /**
+   * Cancels dragging for the specified handle model.
+   */
+  public cancelDrag(model?: ModelValue): void {
+    model = model || this.model.find((item) => item.name === this.activeHandle);
 
-        return true;
+    if (!model) {
+      return;
     }
 
-    /**
-     * Extracts the model from the light DOM.
-     * Updates the handles and handle order based on the slotted handles.
-     */
-    private extractModelFromLightDom = (): void => {
-        let handles = [
-            ...this.host.querySelectorAll('[slot="handle"]'),
-        ] as SliderHandle[];
-
-        if (handles.length === 0) {
-            handles = [this.host as SliderHandle];
-        }
+    model.handle.highlight = false;
+    delete this.draggingHandle;
+    model.handle.dragging = false;
+  }
 
-        // extractModelFromLightDom depends on slotted handles already having been upgraded
-        if (handles.some((h) => this.waitForUpgrade(h))) {
-            return;
-        }
+  /**
+   * Keep the slider value property in sync with the input element's value
+   */
+  private onInputChange = (event: Event): void => {
+    const input = event.target as InputWithModel;
 
-        this.handles = new Map();
+    input.model.handle.value = input.valueAsNumber;
 
-        this.handleOrder = [];
+    this.requestUpdate();
+    this.dispatchChangeEvent(input, input.model.handle);
+  };
 
-        handles.forEach((handle, index) => {
-            if (!handle.handleName?.length) {
-                handle.name = `handle${index + 1}`;
-            }
-
-            this.handles.set(handle.handleName, handle);
-            this.handleOrder.push(handle.handleName);
-            handle.handleController = this;
-        });
+  private onInputFocus = (event: Event): void => {
+    const input = event.target as InputWithModel;
+    let isFocusVisible;
 
-        this.requestUpdate();
-    };
-
-    /**
-     * Gets the name of the active handle.
-     */
-    public get activeHandle(): string {
-        return this.handleOrder[this.handleOrder.length - 1];
-    }
-
-    /**
-     * Gets the ID of the input element for the active handle.
-     */
-    public get activeHandleInputId(): string {
-        const active = this.activeHandle;
-        const index = this.model.findIndex((model) => model.name === active);
-
-        return `input-${index}`;
-    }
-
-    /**
-     * Activates the specified handle.
-     * Moves the handle to the end of the handle order.
-     */
-    public activateHandle(name: string): void {
-        const index = this.handleOrder.findIndex((item) => item === name);
-
-        if (index >= 0) {
-            this.handleOrder.splice(index, 1);
-        }
-
-        this.handleOrder.push(name);
+    try {
+      isFocusVisible =
+        input.matches(":focus-visible") || this.host.matches(".focus-visible");
+      /* c8 ignore next 3 */
+    } catch (error) {
+      isFocusVisible = this.host.matches(".focus-visible");
     }
 
-    /**
-     * Gets the model value for the active handle.
-     */
-    public get activeHandleModel(): ModelValue {
-        const active = this.activeHandle;
+    input.model.handle.highlight = isFocusVisible;
+    this.requestUpdate();
+  };
+
+  private onInputBlur = (event: Event): void => {
+    const input = event.target as InputWithModel;
 
-        return this.model.find((model) => model.name === active)!;
-    }
-
-    /**
-     * Gets the elements associated with the active handle.
-     */
-    private getActiveHandleElements(): HandleComponents {
-        const name = this.activeHandle;
-        const handleSlider = this.handles.get(name) as SliderHandle;
-        const elements = this.getHandleElements(
-            handleSlider
-        ) as HandleReference;
-
-        return { model: handleSlider, ...elements };
-    }
-
-    /**
-     * Gets the elements associated with a given handle.
-     */
-    private getHandleElements(sliderHandle: SliderHandle): HandleReference {
-        if (!this.handleRefMap) {
-            this.handleRefMap = new WeakMap();
-
-            const inputNodes =
-                this.host.shadowRoot.querySelectorAll('.handle > input');
-
-            for (const inputNode of inputNodes) {
-                const input = inputNode as HTMLInputElement;
-                const handle = input.parentElement as HTMLElement;
-                const model = this.handles.get(
-                    handle.getAttribute('name') as string
-                );
-
-                if (model) {
-                    this.handleRefMap.set(model, { input, handle });
-                }
-            }
-        }
-
-        const components = this.handleRefMap.get(
-            sliderHandle
-        ) as HandleReference;
-
-        return components;
-    }
-
-    /**
-     * Clears the cache of handle components.
-     */
-    private clearHandleComponentCache(): void {
-        delete this.handleRefMap;
-    }
-
-    /**
-     * The bounding client rectangle of the slider track.
-     */
-    private _boundingClientRect?: DOMRect;
-
-    /**
-     * Gets the bounding client rectangle of the slider track.
-     */
-    private get boundingClientRect(): DOMRect {
-        if (!this._boundingClientRect) {
-            this._boundingClientRect = this.host.track.getBoundingClientRect();
-        }
-
-        return this._boundingClientRect;
-    }
-
-    /**
-     * Updates the bounding client rectangle of the slider track.
-     */
-    private updateBoundingRect(): void {
-        delete this._boundingClientRect;
-    }
-
-    /**
-     * Extracts data from a pointer event.
-     * Return the `input` and `model` associated with the event and
-     * whether the `input` is a `resolvedInput` meaning it was acquired
-     * from the `model` rather than the event.
-     */
-    protected extractDataFromEvent(event: PointerEvent): DataFromPointerEvent {
-        if (!this._activePointerEventData) {
-            let input = (event.target as Element).querySelector(
-                ':scope > .input'
-            ) as InputWithModel;
-            const resolvedInput = !input;
-            const model = input
-                ? input.model
-                : this.model.find((item) => item.name === this.activeHandle);
-
-            if (!input && !!model) {
-                input = model.handle.focusElement as InputWithModel;
-            }
-
-            this._activePointerEventData = {
-                input,
-                model,
-                resolvedInput,
-            };
-        }
-
-        return this._activePointerEventData;
-    }
-
-    /**
-     * The active pointer event data.
-     */
-    private _activePointerEventData!: DataFromPointerEvent | undefined;
-
-    /**
-     * Handles double-click events on the slider handle.
-     * Resets the handle value to its default value if defined.
-     */
-    public handleDoubleClick(event: PointerEvent): void {
-        const input = (event.target as Element).querySelector(
-            '.input'
-        ) as InputWithModel;
-
-        if (input.model?.handle.defaultValue !== undefined) {
-            input.model.handle.value = input.model.handle.defaultValue;
-            this.dispatchChangeEvent(input, input.model.handle);
-            input.model.handle.dispatchInputEvent();
-            this.requestUpdate();
-        }
-    }
+    input.model.handle.highlight = false;
+    this.requestUpdate();
+  };
 
-    /**
-     * Handles pointerdown events on the slider handle.
-     * Initiates dragging and updates the handle value based on the pointer position.
-     */
-    public handlePointerdown(event: PointerEvent): void {
-        const { resolvedInput, model } = this.extractDataFromEvent(event);
+  /**
+   *
+   *
+   * @memberof HandleController
+   *
+   * @param event - KeyboardEvent on input
+   *
+   * @private
+   *
+   */
+  private onInputKeydown = (event: KeyboardEvent): void => {
+    if (event.key == "Escape") {
+      const input = event.target as InputWithModel;
 
-        if (!model || this.host.disabled || event.button !== 0) {
-            event.preventDefault();
-
-            return;
-        }
-
-        this.host.track.setPointerCapture(event.pointerId);
-        this.updateBoundingRect();
-
-        if (event.pointerType === 'mouse') {
-            this.host.labelEl.click();
-        }
-
-        this.draggingHandle = model.handle;
-        model.handle.dragging = true;
-        this.activateHandle(model.name);
-
-        if (resolvedInput) {
-            // When the input is resolved forward the pointer event to
-            // `handlePointermove` in order to update the value/UI becuase
-            // the pointer event was on the track not a handle
-            this.handlePointermove(event);
-        }
-
-        this.requestUpdate();
-    }
-
-    /**
-     * Handles pointerup events on the slider handle.
-     * Ends dragging and updates the handle value based on the pointer position.
-     */
-    public handlePointerup(event: PointerEvent): void {
-        const { input, model } = this.extractDataFromEvent(event);
-
-        delete this._activePointerEventData;
-
-        if (!model) return;
-
-        if (event.pointerType === 'mouse') {
-            this.host.labelEl.click();
-        }
-
-        this.cancelDrag(model);
-        this.requestUpdate();
-        this.host.track.releasePointerCapture(event.pointerId);
-        this.dispatchChangeEvent(input, model.handle);
-    }
-
-    /**
-     * Handles pointermove events on the slider handle.
-     * Updates the handle value based on the pointer position.
-     */
-    public handlePointermove(event: PointerEvent): void {
-        const { input, model } = this.extractDataFromEvent(event);
-
-        if (!model) return;
-
-        if (!this.draggingHandle) {
-            return;
-        }
-
-        input.value = this.calculateHandlePosition(event, model).toString();
-        model.handle.value = parseFloat(input.value);
-        this.host.indeterminate = false;
-        this.requestUpdate();
-    }
-
-    /**
-     * Cancels dragging for the specified handle model.
-     */
-    public cancelDrag(model?: ModelValue): void {
-        model =
-            model || this.model.find((item) => item.name === this.activeHandle);
-
-        if (!model) return;
-
-        model.handle.highlight = false;
-        delete this.draggingHandle;
-        model.handle.dragging = false;
-    }
-
-    /**
-     * Keep the slider value property in sync with the input element's value
-     */
-    private onInputChange = (event: Event): void => {
-        const input = event.target as InputWithModel;
-
-        input.model.handle.value = input.valueAsNumber;
-
-        this.requestUpdate();
+      if (
+        input.model.handle?.defaultValue !== undefined &&
+        input.model.handle.value !== input.model.handle.defaultValue
+      ) {
+        input.model.handle.value = input.model.handle.defaultValue;
+        input.model.handle.dispatchInputEvent();
         this.dispatchChangeEvent(input, input.model.handle);
-    };
-
-    private onInputFocus = (event: Event): void => {
-        const input = event.target as InputWithModel;
-        let isFocusVisible;
-
-        try {
-            isFocusVisible =
-                input.matches(':focus-visible') ||
-                this.host.matches('.focus-visible');
-            /* c8 ignore next 3 */
-        } catch (error) {
-            isFocusVisible = this.host.matches('.focus-visible');
-        }
-
-        input.model.handle.highlight = isFocusVisible;
         this.requestUpdate();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      return;
+    }
+
+    const input = event.target as InputWithModel;
+
+    input.model.handle.highlight = true;
+    this.requestUpdate();
+  };
+
+  /**
+   * Dispatches a change event for the slider handle.
+   */
+  private dispatchChangeEvent(
+    input: HTMLInputElement,
+    handle: SliderHandle,
+  ): void {
+    input.valueAsNumber = handle.value;
+
+    const changeEvent = new Event("change", {
+      bubbles: true,
+      composed: true,
+    });
+
+    handle.dispatchEvent(changeEvent);
+  }
+
+  /**
+   * Returns the value under the cursor
+   *
+   * @param event - PointerEvent on slider
+   * @returns Slider value that correlates to the position under the pointer
+   */
+  private calculateHandlePosition(
+    event: PointerEvent | MouseEvent,
+    model: ModelValue,
+  ): number {
+    const rect = this.boundingClientRect;
+    const minOffset = rect.left;
+    const offset = event.clientX;
+    const size = rect.width;
+
+    const directionalOffset = this.host.isLTR
+      ? offset - minOffset
+      : size - (offset - minOffset);
+    const normalized = directionalOffset / size;
+
+    return model.normalization.fromNormalized(
+      normalized,
+      model.range.min,
+      model.range.max,
+    );
+  }
+
+  public renderHandle(
+    model: ModelValue,
+    index: number,
+    zIndex: number,
+    isMultiHandle: boolean,
+  ): TemplateResult {
+    const classes = {
+      handle: true,
+      dragging: this.draggingHandle?.handleName === model.name,
+      "handle-highlight": model.highlight,
     };
-
-    private onInputBlur = (event: Event): void => {
-        const input = event.target as InputWithModel;
-
-        input.model.handle.highlight = false;
-        this.requestUpdate();
+    const style = {
+      [this.host.isLTR ? "left" : "right"]: `${model.normalizedValue * 100}%`,
+      "z-index": zIndex.toString(),
+      ...(isMultiHandle && {
+        "background-color": `var(--spectrum-slider-handle-background-color-${index}, var(--spectrum-slider-handle-background-color))`,
+        "border-color": `var(--spectrum-slider-handle-border-color-${index}, var(--spectrum-slider-handle-border-color))`,
+      }),
     };
-
-    /**
-     *
-     *
-     * @memberof HandleController
-     *
-     * @param event - KeyboardEvent on input
-     *
-     * @private
-     *
-     */
-    private onInputKeydown = (event: KeyboardEvent): void => {
-        if (event.key == 'Escape') {
-            const input = event.target as InputWithModel;
-
-            if (
-                input.model.handle?.defaultValue !== undefined &&
-                input.model.handle.value !== input.model.handle.defaultValue
-            ) {
-                input.model.handle.value = input.model.handle.defaultValue;
-                input.model.handle.dispatchInputEvent();
-                this.dispatchChangeEvent(input, input.model.handle);
-                this.requestUpdate();
-                event.preventDefault();
-                event.stopPropagation();
+    const ariaLabelledBy = isMultiHandle ? `label input-${index}` : "label";
+
+    return html`
+      
+    `;
+  }
+
+  public render(): TemplateResult[] {
+    this.clearHandleComponentCache();
+
+    return this.model.map((model, index) => {
+      const zIndex = this.handleOrder.indexOf(model.name) + 2;
+
+      return this.renderHandle(model, index, zIndex, this.model.length > 1);
+    });
+  }
+
+  /**
+   * Returns a list of track segment [start, end] tuples where the values are
+   * normalized to be between 0 and 1.
+   *
+   * @returns A list of track segment tuples [start, end]
+   */
+  public trackSegments(): [number, number][] {
+    const values = this.model.map((model) => model.normalizedValue);
+
+    values.sort((a, b) => a - b);
+
+    // The first segment always starts at 0
+    values.unshift(0);
+
+    return values.map((value, index, array) => [value, array[index + 1] ?? 1]);
+  }
+
+  private updateModel(): void {
+    const handles = [...this.handles.values()];
+
+    const getRangeAndClamp = (index: number): RangeAndClamp => {
+      const handle = handles[index];
+      const previous = handles[index - 1];
+      const next = handles[index + 1];
+
+      const min =
+        typeof handle.min === "number" ? handle.min : (this.host.min as number);
+      const max =
+        typeof handle.max === "number" ? handle.max : (this.host.max as number);
+
+      const result: RangeAndClamp = {
+        range: { min: min, max: max },
+        clamp: { min: min, max: max },
+      };
+
+      if (handle.min === "previous") {
+        if (previous) {
+          for (let j = index - 1; j >= 0; j--) {
+            const item = handles[j];
+
+            if (typeof item.min === "number") {
+              result.range.min = item.min;
+              break;
             }
-
-            return;
+          }
+          result.clamp.min = Math.max(previous.value, result.range.min);
         }
 
-        const input = event.target as InputWithModel;
-
-        input.model.handle.highlight = true;
-        this.requestUpdate();
-    };
-
-    /**
-     * Dispatches a change event for the slider handle.
-     */
-    private dispatchChangeEvent(
-        input: HTMLInputElement,
-        handle: SliderHandle
-    ): void {
-        input.valueAsNumber = handle.value;
-
-        const changeEvent = new Event('change', {
-            bubbles: true,
-            composed: true,
-        });
-
-        handle.dispatchEvent(changeEvent);
-    }
-
-    /**
-     * Returns the value under the cursor
-     *
-     * @param event - PointerEvent on slider
-     * @returns Slider value that correlates to the position under the pointer
-     */
-    private calculateHandlePosition(
-        event: PointerEvent | MouseEvent,
-        model: ModelValue
-    ): number {
-        const rect = this.boundingClientRect;
-        const minOffset = rect.left;
-        const offset = event.clientX;
-        const size = rect.width;
-
-        const directionalOffset = this.host.isLTR
-            ? offset - minOffset
-            : size - (offset - minOffset);
-        const normalized = directionalOffset / size;
-
-        return model.normalization.fromNormalized(
-            normalized,
-            model.range.min,
-            model.range.max
-        );
-    }
-
-    public renderHandle(
-        model: ModelValue,
-        index: number,
-        zIndex: number,
-        isMultiHandle: boolean
-    ): TemplateResult {
-        const classes = {
-            handle: true,
-            dragging: this.draggingHandle?.handleName === model.name,
-            'handle-highlight': model.highlight,
-        };
-        const style = {
-            [this.host.isLTR ? 'left' : 'right']: `${
-                model.normalizedValue * 100
-            }%`,
-            'z-index': zIndex.toString(),
-            ...(isMultiHandle && {
-                'background-color': `var(--spectrum-slider-handle-background-color-${index}, var(--spectrum-slider-handle-background-color))`,
-                'border-color': `var(--spectrum-slider-handle-border-color-${index}, var(--spectrum-slider-handle-border-color))`,
-            }),
-        };
-        const ariaLabelledBy = isMultiHandle ? `label input-${index}` : 'label';
-
-        return html`
-            
-        `;
-    }
-
-    public render(): TemplateResult[] {
-        this.clearHandleComponentCache();
-
-        return this.model.map((model, index) => {
-            const zIndex = this.handleOrder.indexOf(model.name) + 2;
-
-            return this.renderHandle(
-                model,
-                index,
-                zIndex,
-                this.model.length > 1
+        if (window.__swc.DEBUG) {
+          if (!previous) {
+            window.__swc.warn(
+              this.host,
+              " elements that are the first child of an  element cannot have attribute \"min='previous'\"`",
+              "https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles",
             );
-        });
-    }
-
-    /**
-     * Returns a list of track segment [start, end] tuples where the values are
-     * normalized to be between 0 and 1.
-     *
-     * @returns A list of track segment tuples [start, end]
-     */
-    public trackSegments(): [number, number][] {
-        const values = this.model.map((model) => model.normalizedValue);
-
-        values.sort((a, b) => a - b);
-
-        // The first segment always starts at 0
-        values.unshift(0);
+          }
+        }
+      }
 
-        return values.map((value, index, array) => [
-            value,
-            array[index + 1] ?? 1,
-        ]);
-    }
+      if (handle.max === "next") {
+        if (next) {
+          for (let j = index + 1; j < handles.length; j++) {
+            const item = handles[j];
 
-    private updateModel(): void {
-        const handles = [...this.handles.values()];
-
-        const getRangeAndClamp = (index: number): RangeAndClamp => {
-            const handle = handles[index];
-            const previous = handles[index - 1];
-            const next = handles[index + 1];
-
-            const min =
-                typeof handle.min === 'number'
-                    ? handle.min
-                    : (this.host.min as number);
-            const max =
-                typeof handle.max === 'number'
-                    ? handle.max
-                    : (this.host.max as number);
-
-            const result: RangeAndClamp = {
-                range: { min: min, max: max },
-                clamp: { min: min, max: max },
-            };
-
-            if (handle.min === 'previous') {
-                if (previous) {
-                    for (let j = index - 1; j >= 0; j--) {
-                        const item = handles[j];
-
-                        if (typeof item.min === 'number') {
-                            result.range.min = item.min;
-                            break;
-                        }
-                    }
-                    result.clamp.min = Math.max(
-                        previous.value,
-                        result.range.min
-                    );
-                }
-
-                if (window.__swc.DEBUG) {
-                    if (!previous) {
-                        window.__swc.warn(
-                            this.host,
-                            ' elements that are the first child of an  element cannot have attribute "min=\'previous\'"`',
-                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'
-                        );
-                    }
-                }
+            if (typeof item.max === "number") {
+              result.range.max = item.max;
+              break;
             }
+          }
+          result.clamp.max = Math.min(next.value, result.range.max);
+        }
 
-            if (handle.max === 'next') {
-                if (next) {
-                    for (let j = index + 1; j < handles.length; j++) {
-                        const item = handles[j];
-
-                        if (typeof item.max === 'number') {
-                            result.range.max = item.max;
-                            break;
-                        }
-                    }
-                    result.clamp.max = Math.min(next.value, result.range.max);
-                }
-
-                if (window.__swc.DEBUG) {
-                    if (!next) {
-                        window.__swc.warn(
-                            this.host,
-                            ' elements that are the last child of an  element cannot have attribute "max=\'next\'"',
-                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'
-                        );
-                    }
-                }
-            }
-
-            return result;
-        };
-
-        const modelValues = handles.map((handle, index) => {
-            const rangeAndClamp = getRangeAndClamp(index);
-            const { toNormalized } = handle.normalization;
-            const clampedValue = Math.max(
-                Math.min(handle.value, rangeAndClamp.clamp.max),
-                rangeAndClamp.clamp.min
-            );
-            const normalizedValue = toNormalized(
-                clampedValue,
-                rangeAndClamp.range.min,
-                rangeAndClamp.range.max
+        if (window.__swc.DEBUG) {
+          if (!next) {
+            window.__swc.warn(
+              this.host,
+              " elements that are the last child of an  element cannot have attribute \"max='next'\"",
+              "https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles",
             );
-            const model = {
-                name: handle.handleName,
-                value: clampedValue,
-                normalizedValue,
-                highlight: handle.highlight,
-                step: handle.step ?? this.host.step,
-                normalization: handle.normalization,
-                handle,
-                ariaLabel:
-                    handle !== this.host && handle?.label.length > 0
-                        ? handle.label
-                        : undefined,
-                ...rangeAndClamp,
-            };
-
-            return model;
-        });
-
-        this.model = modelValues;
-    }
+          }
+        }
+      }
 
-    public async handleUpdatesComplete(): Promise {
-        const updates = [...this.handles.values()]
-            .filter((handle) => handle !== this.host)
-            .map((handle) => handle.updateComplete);
+      return result;
+    };
 
-        await Promise.all(updates);
-    }
+    const modelValues = handles.map((handle, index) => {
+      const rangeAndClamp = getRangeAndClamp(index);
+      const { toNormalized } = handle.normalization;
+      const clampedValue = Math.max(
+        Math.min(handle.value, rangeAndClamp.clamp.max),
+        rangeAndClamp.clamp.min,
+      );
+      const normalizedValue = toNormalized(
+        clampedValue,
+        rangeAndClamp.range.min,
+        rangeAndClamp.range.max,
+      );
+      const model = {
+        name: handle.handleName,
+        value: clampedValue,
+        normalizedValue,
+        highlight: handle.highlight,
+        step: handle.step ?? this.host.step,
+        normalization: handle.normalization,
+        handle,
+        ariaLabel:
+          handle !== this.host && handle?.label.length > 0
+            ? handle.label
+            : undefined,
+        ...rangeAndClamp,
+      };
+
+      return model;
+    });
+
+    this.model = modelValues;
+  }
+
+  public async handleUpdatesComplete(): Promise {
+    const updates = [...this.handles.values()]
+      .filter((handle) => handle !== this.host)
+      .map((handle) => handle.updateComplete);
+
+    await Promise.all(updates);
+  }
 }
diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
index da2331053f..e544fac157 100644
--- a/packages/slider/src/Slider.ts
+++ b/packages/slider/src/Slider.ts
@@ -11,35 +11,35 @@ governing permissions and limitations under the License.
 */
 
 import {
-    CSSResultArray,
-    html,
-    nothing,
-    PropertyValues,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+  CSSResultArray,
+  html,
+  nothing,
+  PropertyValues,
+  SizedMixin,
+  TemplateResult,
+} from "@spectrum-web-components/base";
 import {
-    property,
-    query,
-} from '@spectrum-web-components/base/src/decorators.js';
+  property,
+  query,
+} from "@spectrum-web-components/base/src/decorators.js";
 import {
-    classMap,
-    ifDefined,
-    repeat,
-    styleMap,
-} from '@spectrum-web-components/base/src/directives.js';
-
-import sliderStyles from './slider.css.js';
-import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
-import { StyleInfo } from 'lit-html/directives/style-map';
-import '@spectrum-web-components/field-label/sp-field-label.js';
-import type { NumberField } from '@spectrum-web-components/number-field';
-import { HandleController, HandleValueDictionary } from './HandleController.js';
-import { SliderHandle } from './SliderHandle.js';
-import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
-import type { NumberFormatter } from '@internationalized/number';
-
-export const variants = ['filled', 'ramp', 'range', 'tick'];
+  classMap,
+  ifDefined,
+  repeat,
+  styleMap,
+} from "@spectrum-web-components/base/src/directives.js";
+
+import sliderStyles from "./slider.css.js";
+import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
+import { StyleInfo } from "lit-html/directives/style-map";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import type { NumberField } from "@spectrum-web-components/number-field";
+import { HandleController, HandleValueDictionary } from "./HandleController.js";
+import { SliderHandle } from "./SliderHandle.js";
+import { streamingListener } from "@spectrum-web-components/base/src/streaming-listener.js";
+import type { NumberFormatter } from "@internationalized/number";
+
+export const variants = ["filled", "ramp", "range", "tick"];
 
 /**
  * @element sp-slider
@@ -47,547 +47,541 @@ export const variants = ['filled', 'ramp', 'range', 'tick'];
  * @slot - text label for the Slider
  * @slot handle - optionally accepts two or more sp-slider-handle elements
  */
-export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
-    noDefaultSize: true,
-    validSizes: ['s', 'm', 'l', 'xl'],
+export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ""), {
+  noDefaultSize: true,
+  validSizes: ["s", "m", "l", "xl"],
 }) {
-    public static override get styles(): CSSResultArray {
-        return [sliderStyles];
-    }
-
-    public override handleController: HandleController = new HandleController(
-        this
-    );
+  public static override get styles(): CSSResultArray {
+    return [sliderStyles];
+  }
 
-    /**
-     * Whether to display a Number Field along side the slider UI
-     */
-    @property({ type: Boolean, reflect: true })
-    public get editable(): boolean {
-        return this._editable;
-    }
+  public override handleController: HandleController = new HandleController(
+    this,
+  );
 
-    public set editable(editable: boolean) {
-        if (editable === this.editable) return;
+  /**
+   * Whether to display a Number Field along side the slider UI
+   */
+  @property({ type: Boolean, reflect: true })
+  public get editable(): boolean {
+    return this._editable;
+  }
 
-        const oldValue = this.editable;
+  public set editable(editable: boolean) {
+    if (editable === this.editable) {
+      return;
+    }
 
-        this._editable = this.handleController.size < 2 ? editable : false;
+    const oldValue = this.editable;
 
-        if (this.editable) {
-            this._numberFieldInput = import(
-                '@spectrum-web-components/number-field/sp-number-field.js'
-            );
-        }
+    this._editable = this.handleController.size < 2 ? editable : false;
 
-        if (oldValue !== this.editable) {
-            this.requestUpdate('editable', oldValue);
-        }
+    if (this.editable) {
+      this._numberFieldInput = import(
+        "@spectrum-web-components/number-field/sp-number-field.js"
+      );
     }
 
-    private _editable = false;
-
-    /**
-     * Whether the stepper UI of the Number Field is hidden or not
-     */
-    @property({ type: Boolean, reflect: true, attribute: 'hide-stepper' })
-    public hideStepper = false;
+    if (oldValue !== this.editable) {
+      this.requestUpdate("editable", oldValue);
+    }
+  }
 
-    @property()
-    public type = '';
+  private _editable = false;
 
-    @property({ reflect: true })
-    public override dir!: 'ltr' | 'rtl';
+  /**
+   * Whether the stepper UI of the Number Field is hidden or not
+   */
+  @property({ type: Boolean, reflect: true, attribute: "hide-stepper" })
+  public hideStepper = false;
 
-    @property({ type: String })
-    public set variant(variant: string) {
-        const oldVariant = this.variant;
+  @property()
+  public type = "";
 
-        if (variant === this.variant) {
-            return;
-        }
+  @property({ reflect: true })
+  public override dir!: "ltr" | "rtl";
 
-        if (variants.includes(variant) && this.fillStart === undefined) {
-            this._variant = variant;
-            this.setAttribute('variant', variant);
-        } else {
-            this._variant = '';
-            this.removeAttribute('variant');
-        }
+  @property({ type: String })
+  public set variant(variant: string) {
+    const oldVariant = this.variant;
 
-        this.requestUpdate('variant', oldVariant);
+    if (variant === this.variant) {
+      return;
     }
 
-    public get variant(): string {
-        return this._variant;
+    if (variants.includes(variant) && this.fillStart === undefined) {
+      this._variant = variant;
+      this.setAttribute("variant", variant);
+    } else {
+      this._variant = "";
+      this.removeAttribute("variant");
     }
 
-    public get values(): HandleValueDictionary {
-        return this.handleController.values;
-    }
+    this.requestUpdate("variant", oldVariant);
+  }
 
-    public override get handleName(): string {
-        return 'value';
-    }
-
-    /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
-    private _variant = '';
+  public get variant(): string {
+    return this._variant;
+  }
 
-    @property({ attribute: false })
-    public getAriaValueText: (values: Map) => string = (
-        values
-    ) => {
-        const valueArray = [...values.values()];
+  public get values(): HandleValueDictionary {
+    return this.handleController.values;
+  }
 
-        if (valueArray.length === 2)
-            return `${valueArray[0]} - ${valueArray[1]}`;
+  public override get handleName(): string {
+    return "value";
+  }
 
-        return valueArray.join(', ');
-    };
+  /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */
+  private _variant = "";
 
-    public override get ariaValueText(): string {
-        if (!this.getAriaValueText) {
-            return `${this.value}${this._forcedUnit}`;
-        }
+  @property({ attribute: false })
+  public getAriaValueText: (values: Map) => string = (
+    values,
+  ) => {
+    const valueArray = [...values.values()];
 
-        return this.getAriaValueText(this.handleController.formattedValues);
+    if (valueArray.length === 2) {
+      return `${valueArray[0]} - ${valueArray[1]}`;
     }
 
-    @property({ type: String, reflect: true, attribute: 'label-visibility' })
-    public labelVisibility?: 'text' | 'value' | 'none';
-
-    @property({ type: Number, reflect: true })
-    public override min = 0;
-
-    @property({ type: Number, reflect: true })
-    public override max = 100;
-
-    @property({ type: Number })
-    public override step = 1;
-
-    @property({ type: Number, attribute: 'tick-step' })
-    public tickStep = 0;
+    return valueArray.join(", ");
+  };
 
-    @property({ type: Boolean, attribute: 'tick-labels' })
-    public tickLabels = false;
-
-    @property({ type: Boolean, reflect: true })
-    public override disabled = false;
+  public override get ariaValueText(): string {
+    if (!this.getAriaValueText) {
+      return `${this.value}${this._forcedUnit}`;
+    }
 
-    @property({ type: Number, reflect: true, attribute: 'fill-start' })
-    public fillStart?: number | boolean;
+    return this.getAriaValueText(this.handleController.formattedValues);
+  }
 
-    /**
-     * Applies `quiet` to the underlying `sp-number-field` when `editable === true`.
-     */
-    @property({ type: Boolean })
-    public quiet = false;
+  @property({ type: String, reflect: true, attribute: "label-visibility" })
+  public labelVisibility?: "text" | "value" | "none";
 
-    /**
-     * Applies `indeterminate` to the underlying `sp-number-field` when `editable === true`. Is removed on the next `change` event.
-     */
-    @property({ type: Boolean })
-    public indeterminate = false;
+  @property({ type: Number, reflect: true })
+  public override min = 0;
 
-    @query('#label')
-    public labelEl!: HTMLLabelElement;
+  @property({ type: Number, reflect: true })
+  public override max = 100;
 
-    @query('#number-field')
-    public numberField!: NumberField;
+  @property({ type: Number })
+  public override step = 1;
 
-    @query('#track')
-    public track!: HTMLDivElement;
+  @property({ type: Number, attribute: "tick-step" })
+  public tickStep = 0;
 
-    public override get numberFormat(): NumberFormatter {
-        return this.getNumberFormat();
-    }
+  @property({ type: Boolean, attribute: "tick-labels" })
+  public tickLabels = false;
 
-    public override get focusElement(): HTMLElement {
-        return this.handleController.focusElement;
-    }
+  @property({ type: Boolean, reflect: true })
+  public override disabled = false;
 
-    protected handleLabelClick(event: Event): void {
-        if (this.editable) {
-            event.preventDefault();
-            this.focus();
-        }
-    }
+  @property({ type: Number, reflect: true, attribute: "fill-start" })
+  public fillStart?: number | boolean;
 
-    protected override render(): TemplateResult {
-        return html`
-            ${this.renderLabel()} ${this.renderTrack()}
-            ${this.editable
+  /**
+   * Applies `quiet` to the underlying `sp-number-field` when `editable === true`.
+   */
+  @property({ type: Boolean })
+  public quiet = false;
+
+  /**
+   * Applies `indeterminate` to the underlying `sp-number-field` when `editable === true`. Is removed on the next `change` event.
+   */
+  @property({ type: Boolean })
+  public indeterminate = false;
+
+  @query("#label")
+  public labelEl!: HTMLLabelElement;
+
+  @query("#number-field")
+  public numberField!: NumberField;
+
+  @query("#track")
+  public track!: HTMLDivElement;
+
+  public override get numberFormat(): NumberFormatter {
+    return this.getNumberFormat();
+  }
+
+  public override get focusElement(): HTMLElement {
+    return this.handleController.focusElement;
+  }
+
+  protected handleLabelClick(event: Event): void {
+    if (this.editable) {
+      event.preventDefault();
+      this.focus();
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      ${this.renderLabel()} ${this.renderTrack()}
+      ${this.editable
+        ? html`
+            
+          `
+        : nothing}
+    `;
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.handleController.hostConnected();
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.handleController.hostDisconnected();
+  }
+
+  public override update(changedProperties: Map): void {
+    this.handleController.hostUpdate();
+
+    if (changedProperties.has("disabled") && this.disabled) {
+      this.handleController.cancelDrag();
+    }
+
+    super.update(changedProperties);
+  }
+
+  private renderLabel(): TemplateResult {
+    const textLabelVisible =
+      this.labelVisibility === "none" || this.labelVisibility === "value";
+    const valueLabelVisible =
+      this.labelVisibility === "none" || this.labelVisibility === "text";
+
+    return html`
+      

+        
+          ${this.slotHasContent ? nothing : this.label}
+          ${this.label}
+        
+        
+          
+            ${this.ariaValueText}
+          
+        
+      

+    `;
+  }
+
+  private renderRamp(): TemplateResult {
+    if (this.variant !== "ramp") {
+      return html``;
+    }
+
+    return html`
+      

+        
+      

+    `;
+  }
+
+  private renderTicks(): TemplateResult {
+    if (this.variant !== "tick") {
+      return html``;
+    }
+
+    const tickStep = this.tickStep || this.step;
+    const tickCount = ((this.max as number) - (this.min as number)) / tickStep;
+    const partialFit = tickCount % 1 !== 0;
+    const ticks = new Array(Math.floor(tickCount + 1));
+
+    ticks.fill(0, 0, tickCount + 1);
+
+    return html`
+      

+        ${ticks.map(
+          (_tick, i) => html`
+            

+              ${this.tickLabels
                 ? html`
-                      
+                    
${i * tickStep + this.min}

                   `
                 : nothing}
-        `;
-    }
-
-    public override connectedCallback(): void {
-        super.connectedCallback();
-        this.handleController.hostConnected();
-    }
-
-    public override disconnectedCallback(): void {
-        super.disconnectedCallback();
-        this.handleController.hostDisconnected();
-    }
-
-    public override update(changedProperties: Map): void {
-        this.handleController.hostUpdate();
-
-        if (changedProperties.has('disabled') && this.disabled) {
-            this.handleController.cancelDrag();
-        }
-
-        super.update(changedProperties);
-    }
-
-    private renderLabel(): TemplateResult {
-        const textLabelVisible =
-            this.labelVisibility === 'none' || this.labelVisibility === 'value';
-        const valueLabelVisible =
-            this.labelVisibility === 'none' || this.labelVisibility === 'text';
-
-        return html`
-            

-                
-                    ${this.slotHasContent ? nothing : this.label}
-                    ${this.label}
-                
-                
-                    
-                        ${this.ariaValueText}
-                    
-                
             

-        `;
-    }
-
-    private renderRamp(): TemplateResult {
-        if (this.variant !== 'ramp') {
-            return html``;
-        }
-
-        return html`
-            

-                
-            

-        `;
-    }
+          `,
+        )}
+      

+    `;
+  }
+
+  private renderTrackSegment(start: number, end: number): TemplateResult {
+    if (this.variant === "ramp") {
+      return html``;
+    }
+
+    return html`
+      
+    `;
+  }
+
+  private _cachedValue: number | undefined;
+  private centerPoint: number | undefined;
+
+  /**
+   * @description calculates the fill width
+   *
+   * @param fillStartValue - The starting value for the fill
+   * @param currentValue - The value of the slider at the current point in time
+   * @returns The calculated offset width as a percentage.
+   */
+  private getOffsetWidth(fillStartValue: number, currentValue: number): number {
+    const distance = Math.abs(currentValue - fillStartValue);
+
+    return distance * 100;
+  }
+
+  private fillStyles(centerPoint: number): StyleInfo {
+    const activeModel = this.handleController.activeHandleModel;
+    const centerPointNormalized = activeModel.normalization.toNormalized(
+      centerPoint,
+      this.min,
+      this.max,
+    );
+    const position = this.dir === "rtl" ? "right" : "left";
+    const offsetPosition =
+      (this.value > centerPoint
+        ? centerPointNormalized
+        : activeModel.normalizedValue) * 100;
+    const offsetWidth = this.getOffsetWidth(
+      centerPointNormalized,
+      activeModel.normalizedValue,
+    );
+    const styles = {
+      [position]: `${offsetPosition}%`,
+      width: `${offsetWidth}%`,
+    };
 
-    private renderTicks(): TemplateResult {
-        if (this.variant !== 'tick') {
-            return html``;
-        }
-
-        const tickStep = this.tickStep || this.step;
-        const tickCount =
-            ((this.max as number) - (this.min as number)) / tickStep;
-        const partialFit = tickCount % 1 !== 0;
-        const ticks = new Array(Math.floor(tickCount + 1));
-
-        ticks.fill(0, 0, tickCount + 1);
-
-        return html`
-            

-                ${ticks.map(
-                    (_tick, i) => html`
-                        

-                            ${this.tickLabels
-                                ? html`
-                                      

-                                          ${i * tickStep + this.min}
-                                      

-                                  `
-                                : nothing}
-                        

-                    `
+    return styles;
+  }
+
+  private renderFillOffset(): TemplateResult {
+    if (this._cachedValue === undefined || this.centerPoint === undefined) {
+      return html``;
+    }
+
+    return html`
+      
 this.centerPoint,
+        })}
+        style=${styleMap(this.fillStyles(this.centerPoint))}
+      >

+    `;
+  }
+  private renderHandle(): TemplateResult {
+    if (this.variant === "tick") {
+      return html``;
+    }
+
+    return html` ${this.handleController.render()} `;
+  }
+
+  private renderTrack(): TemplateResult {
+    const segments = this.handleController.trackSegments();
+    const handleItems = [
+      { id: "handles", html: this.handleController.render() },
+    ];
+    const trackItems = [
+      { id: "track0", html: this.renderTrackSegment(...segments[0]) },
+      { id: "fill", html: this.renderFillOffset() },
+      { id: "ramp", html: this.renderRamp() },
+      { id: "handles", html: this.renderHandle() },
+      ...segments.slice(1).map(([start, end], index) => ({
+        id: `track${index + 1}`,
+        html: this.renderTrackSegment(start, end),
+      })),
+    ];
+
+    return html`
+      

+        

+          ${this.variant === "tick"
+            ? html`
+                ${this.renderTicks()}
+                

+                  ${repeat(
+                    trackItems,
+                    (item) => item.id,
+                    (item) => item.html,
+                  )}
+                

+                

+                  ${repeat(
+                    handleItems,
+                    (item) => item.id,
+                    (item) => item.html,
+                  )}
+                

+              `
+            : html`
+                ${repeat(
+                  trackItems,
+                  (item) => item.id,
+                  (item) => item.html,
                 )}
-            

-        `;
-    }
-
-    private renderTrackSegment(start: number, end: number): TemplateResult {
-        if (this.variant === 'ramp') {
-            return html``;
-        }
-
-        return html`
-            
-        `;
-    }
-
-    private _cachedValue: number | undefined;
-    private centerPoint: number | undefined;
-
-    /**
-     * @description calculates the fill width
-     *
-     * @param fillStartValue - The starting value for the fill
-     * @param currentValue - The value of the slider at the current point in time
-     * @returns The calculated offset width as a percentage.
-     */
-    private getOffsetWidth(
-        fillStartValue: number,
-        currentValue: number
-    ): number {
-        const distance = Math.abs(currentValue - fillStartValue);
-
-        return distance * 100;
-    }
+              `}
+        

+      

+    `;
+  }
 
-    private fillStyles(centerPoint: number): StyleInfo {
-        const activeModel = this.handleController.activeHandleModel;
-        const centerPointNormalized = activeModel.normalization.toNormalized(
-            centerPoint,
-            this.min,
-            this.max
-        );
-        const position = this.dir === 'rtl' ? 'right' : 'left';
-        const offsetPosition =
-            (this.value > centerPoint
-                ? centerPointNormalized
-                : activeModel.normalizedValue) * 100;
-        const offsetWidth = this.getOffsetWidth(
-            centerPointNormalized,
-            activeModel.normalizedValue
-        );
-        const styles = {
-            [position]: `${offsetPosition}%`,
-            width: `${offsetWidth}%`,
-        };
-
-        return styles;
-    }
+  protected handleDoubleClick(event: PointerEvent): void {
+    this.handleController.handleDoubleClick(event);
+  }
 
-    private renderFillOffset(): TemplateResult {
-        if (this._cachedValue === undefined || this.centerPoint === undefined) {
-            return html``;
-        }
-
-        return html`
-            
 this.centerPoint,
-                })}
-                style=${styleMap(this.fillStyles(this.centerPoint))}
-            >

-        `;
-    }
-    private renderHandle(): TemplateResult {
-        if (this.variant === 'tick') {
-            return html``;
-        }
-
-        return html`
-            ${this.handleController.render()}
-        `;
-    }
+  protected handlePointerdown(event: PointerEvent): void {
+    this.handleController.handlePointerdown(event);
+  }
 
-    private renderTrack(): TemplateResult {
-        const segments = this.handleController.trackSegments();
-        const handleItems = [
-            { id: 'handles', html: this.handleController.render() },
-        ];
-        const trackItems = [
-            { id: 'track0', html: this.renderTrackSegment(...segments[0]) },
-            { id: 'fill', html: this.renderFillOffset() },
-            { id: 'ramp', html: this.renderRamp() },
-            { id: 'handles', html: this.renderHandle() },
-            ...segments.slice(1).map(([start, end], index) => ({
-                id: `track${index + 1}`,
-                html: this.renderTrackSegment(start, end),
-            })),
-        ];
-
-        return html`
-            

-                

-                    ${this.variant === 'tick'
-                        ? html`
-                              ${this.renderTicks()}
-                              

-                                  ${repeat(
-                                      trackItems,
-                                      (item) => item.id,
-                                      (item) => item.html
-                                  )}
-                              

-                              

-                                  ${repeat(
-                                      handleItems,
-                                      (item) => item.id,
-                                      (item) => item.html
-                                  )}
-                              

-                          `
-                        : html`
-                              ${repeat(
-                                  trackItems,
-                                  (item) => item.id,
-                                  (item) => item.html
-                              )}
-                          `}
-                

-            

-        `;
-    }
+  protected handlePointermove(event: PointerEvent): void {
+    this.handleController.handlePointermove(event);
+  }
 
-    protected handleDoubleClick(event: PointerEvent): void {
-        this.handleController.handleDoubleClick(event);
-    }
+  protected handlePointerup(event: PointerEvent): void {
+    this.handleController.handlePointerup(event);
+  }
 
-    protected handlePointerdown(event: PointerEvent): void {
-        this.handleController.handlePointerdown(event);
-    }
+  private handleNumberInput(event: Event & { target: NumberField }): void {
+    const { value } = event.target;
 
-    protected handlePointermove(event: PointerEvent): void {
-        this.handleController.handlePointermove(event);
-    }
+    if (event.target?.managedInput && !isNaN(value)) {
+      this.value = value;
 
-    protected handlePointerup(event: PointerEvent): void {
-        this.handleController.handlePointerup(event);
+      return;
     }
 
-    private handleNumberInput(event: Event & { target: NumberField }): void {
-        const { value } = event.target;
+    // Do not apply uncommited values to the parent element unless interacting with the stepper UI.
+    // Stop uncommitted input from being announced to the parent application.
+    event.stopPropagation();
+  }
 
-        if (event.target?.managedInput && !isNaN(value)) {
-            this.value = value;
+  private handleNumberChange(event: Event & { target: NumberField }): void {
+    const { value } = event.target;
 
-            return;
-        }
+    if (isNaN(value)) {
+      event.target.value = this.value;
+      event.stopPropagation();
+    } else {
+      this.value = value;
 
-        // Do not apply uncommited values to the parent element unless interacting with the stepper UI.
-        // Stop uncommitted input from being announced to the parent application.
-        event.stopPropagation();
+      if (!event.target?.managedInput) {
+        // When stepper is not active, sythesize an `input` event so that the
+        // `change` event isn't surprising.
+        this.dispatchInputEvent();
+      }
     }
 
-    private handleNumberChange(event: Event & { target: NumberField }): void {
-        const { value } = event.target;
+    this.indeterminate = false;
+  }
 
-        if (isNaN(value)) {
-            event.target.value = this.value;
-            event.stopPropagation();
-        } else {
-            this.value = value;
+  private trackSegmentStyles(start: number, end: number): StyleInfo {
+    const size = end - start;
+    const styles: StyleInfo = {
+      width: `${size * 100}%`,
+      "--spectrum-slider-track-background-size": `${(1 / size) * 100}%`,
+      "--spectrum-slider-track-segment-position": `${start * 100}%`,
+    };
 
-            if (!event.target?.managedInput) {
-                // When stepper is not active, sythesize an `input` event so that the
-                // `change` event isn't surprising.
-                this.dispatchInputEvent();
-            }
-        }
+    return styles;
+  }
 
-        this.indeterminate = false;
-    }
+  private _numberFieldInput: Promise = Promise.resolve();
 
-    private trackSegmentStyles(start: number, end: number): StyleInfo {
-        const size = end - start;
-        const styles: StyleInfo = {
-            width: `${size * 100}%`,
-            '--spectrum-slider-track-background-size': `${(1 / size) * 100}%`,
-            '--spectrum-slider-track-segment-position': `${start * 100}%`,
-        };
+  protected override async getUpdateComplete(): Promise {
+    const complete = (await super.getUpdateComplete()) as boolean;
 
-        return styles;
+    if (this.editable) {
+      await this._numberFieldInput;
+      await this.numberField.updateComplete;
     }
 
-    private _numberFieldInput: Promise = Promise.resolve();
+    await this.handleController.handleUpdatesComplete();
 
-    protected override async getUpdateComplete(): Promise {
-        const complete = (await super.getUpdateComplete()) as boolean;
+    return complete;
+  }
 
-        if (this.editable) {
-            await this._numberFieldInput;
-            await this.numberField.updateComplete;
-        }
-
-        await this.handleController.handleUpdatesComplete();
-
-        return complete;
-    }
+  protected override willUpdate(changed: PropertyValues): void {
+    if (changed.has("value") && changed.has("fillStart")) {
+      this._cachedValue = Number(this.value);
 
-    protected override willUpdate(changed: PropertyValues): void {
-        if (changed.has('value') && changed.has('fillStart')) {
-            this._cachedValue = Number(this.value);
-
-            // Test if fill-start is set without a value
-            if (this.getAttribute('fill-start') === '') {
-                this.centerPoint =
-                    (Number(this.max) - Number(this.min)) / 2 +
-                    Number(this.min);
-            } else if (!Number.isNaN(Number(this.fillStart))) {
-                this.centerPoint = Number(this.fillStart);
-            }
-        }
+      // Test if fill-start is set without a value
+      if (this.getAttribute("fill-start") === "") {
+        this.centerPoint =
+          (Number(this.max) - Number(this.min)) / 2 + Number(this.min);
+      } else if (!Number.isNaN(Number(this.fillStart))) {
+        this.centerPoint = Number(this.fillStart);
+      }
     }
+  }
 }
diff --git a/packages/slider/src/SliderHandle.ts b/packages/slider/src/SliderHandle.ts
index 2c53f0fd18..8c48808028 100644
--- a/packages/slider/src/SliderHandle.ts
+++ b/packages/slider/src/SliderHandle.ts
@@ -10,61 +10,65 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { PropertyValues } from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+import { PropertyValues } from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
 import {
-    LanguageResolutionController,
-    languageResolverUpdatedSymbol,
-} from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
+  LanguageResolutionController,
+  languageResolverUpdatedSymbol,
+} from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
 import {
-    NumberFormatOptions,
-    NumberFormatter,
-} from '@internationalized/number';
-import { HandleController } from './HandleController.js';
+  NumberFormatOptions,
+  NumberFormatter,
+} from "@internationalized/number";
+import { HandleController } from "./HandleController.js";
 
-export type HandleMin = number | 'previous';
-export type HandleMax = number | 'next';
+export type HandleMin = number | "previous";
+export type HandleMax = number | "next";
 
 export type HandleValues = {
-    name: string;
-    value: number;
+  name: string;
+  value: number;
 }[];
 
 export type SliderNormalization = {
-    toNormalized: (value: number, min: number, max: number) => number;
-    fromNormalized: (value: number, min: number, max: number) => number;
+  toNormalized: (value: number, min: number, max: number) => number;
+  fromNormalized: (value: number, min: number, max: number) => number;
 };
 
 export const defaultNormalization: SliderNormalization = {
-    toNormalized(value: number, min: number, max: number) {
-        return (value - min) / (max - min);
-    },
-    fromNormalized(value: number, min: number, max: number) {
-        return value * (max - min) + min;
-    },
+  toNormalized(value: number, min: number, max: number) {
+    return (value - min) / (max - min);
+  },
+  fromNormalized(value: number, min: number, max: number) {
+    return value * (max - min) + min;
+  },
 };
 
 const MinConverter = {
-    fromAttribute: (value: string): number | 'previous' => {
-        if (value === 'previous') return value;
-
-        return parseFloat(value);
-    },
-    toAttribute: (value: 'previous' | number): string => {
-        return value.toString();
-    },
+  fromAttribute: (value: string): number | "previous" => {
+    if (value === "previous") {
+      return value;
+    }
+
+    return parseFloat(value);
+  },
+  toAttribute: (value: "previous" | number): string => {
+    return value.toString();
+  },
 };
 
 const MaxConverter = {
-    fromAttribute: (value: string): number | 'next' => {
-        if (value === 'next') return value;
-
-        return parseFloat(value);
-    },
-    toAttribute: (value: 'next' | number): string => {
-        return value.toString();
-    },
+  fromAttribute: (value: string): number | "next" => {
+    if (value === "next") {
+      return value;
+    }
+
+    return parseFloat(value);
+  },
+  toAttribute: (value: "next" | number): string => {
+    return value.toString();
+  },
 };
 
 /**
@@ -74,169 +78,171 @@ const MaxConverter = {
  * @fires change - An alteration to the value of the element has been committed by the user.
  */
 export class SliderHandle extends Focusable {
-    public handleController?: HandleController;
+  public handleController?: HandleController;
 
-    public get handleName(): string {
-        return this.name;
-    }
-
-    public override get focusElement(): HTMLElement {
-        /* c8 ignore next */
-        return this.handleController?.inputForHandle(this) ?? this;
-    }
+  public get handleName(): string {
+    return this.name;
+  }
 
-    _forcedUnit = '';
+  public override get focusElement(): HTMLElement {
+    /* c8 ignore next */
+    return this.handleController?.inputForHandle(this) ?? this;
+  }
 
-    /**
-     * By default, the value of a Slider Handle will be halfway between its
-     * `min` and `max` values, or the `min` value when `max` is less than `min`.
-     */
-    @property({ type: Number })
-    public value!: number;
+  _forcedUnit = "";
 
-    /**
-     * Set the default value of the handle. Setting this property will cause the
-     * handle to reset to the default value on double click or pressing the `escape` key.
-     */
-    @property({ type: Number, attribute: 'default-value' })
-    public defaultValue!: number;
+  /**
+   * By default, the value of a Slider Handle will be halfway between its
+   * `min` and `max` values, or the `min` value when `max` is less than `min`.
+   */
+  @property({ type: Number })
+  public value!: number;
 
-    @property({ type: Boolean, reflect: true })
-    public dragging = false;
+  /**
+   * Set the default value of the handle. Setting this property will cause the
+   * handle to reset to the default value on double click or pressing the `escape` key.
+   */
+  @property({ type: Number, attribute: "default-value" })
+  public defaultValue!: number;
 
-    @property({ type: Boolean })
-    public highlight = false;
+  @property({ type: Boolean, reflect: true })
+  public dragging = false;
 
-    @property({ type: String })
-    public name = '';
+  @property({ type: Boolean })
+  public highlight = false;
 
-    @property({ reflect: true, converter: MinConverter })
-    public min?: number | 'previous';
+  @property({ type: String })
+  public name = "";
 
-    @property({ reflect: true, converter: MaxConverter })
-    public max?: number | 'next';
+  @property({ reflect: true, converter: MinConverter })
+  public min?: number | "previous";
 
-    @property({ type: Number, reflect: true })
-    public step?: number;
+  @property({ reflect: true, converter: MaxConverter })
+  public max?: number | "next";
 
-    @property({ type: Object, attribute: 'format-options' })
-    public formatOptions?: NumberFormatOptions;
+  @property({ type: Number, reflect: true })
+  public step?: number;
 
-    @property({ type: String })
-    public label = '';
+  @property({ type: Object, attribute: "format-options" })
+  public formatOptions?: NumberFormatOptions;
 
-    @property({ attribute: false })
-    public getAriaHandleText: (
-        value: number,
-        numberFormat: NumberFormatter
-    ) => string = (value, numberFormat) => {
-        return numberFormat.format(value);
-    };
+  @property({ type: String })
+  public label = "";
 
-    private languageResolver = new LanguageResolutionController(this);
+  @property({ attribute: false })
+  public getAriaHandleText: (
+    value: number,
+    numberFormat: NumberFormatter,
+  ) => string = (value, numberFormat) => {
+    return numberFormat.format(value);
+  };
 
-    protected override update(changes: PropertyValues): void {
-        if (!this.hasUpdated) {
-            const { max, min } = this as { max: number; min: number };
+  private languageResolver = new LanguageResolutionController(this);
 
-            if (this.value == null) {
-                if (!isNaN(max) && !isNaN(min)) {
-                    this.value = max < min ? min : min + (max - min) / 2;
-                    this.handleController?.hostUpdate();
-                }
-            }
-        }
+  protected override update(changes: PropertyValues): void {
+    if (!this.hasUpdated) {
+      const { max, min } = this as { max: number; min: number };
 
-        if (
-            changes.has('formatOptions') ||
-            changes.has(languageResolverUpdatedSymbol)
-        ) {
-            delete this._numberFormatCache;
+      if (this.value == null) {
+        if (!isNaN(max) && !isNaN(min)) {
+          this.value = max < min ? min : min + (max - min) / 2;
+          this.handleController?.hostUpdate();
         }
-
-        if (changes.has('value')) {
-            const oldValue = changes.get('value');
-
-            if (oldValue != null) {
-                this.updateComplete.then(() => {
-                    this.handleController?.setValueFromHandle(this);
-                });
-            }
-        }
-
-        this.handleController?.handleHasChanged(this);
-        super.update(changes);
+      }
     }
 
-    protected override firstUpdated(
-        changedProperties: PropertyValues
-    ): void {
-        super.firstUpdated(changedProperties);
-        this.dispatchEvent(new CustomEvent('sp-slider-handle-ready'));
+    if (
+      changes.has("formatOptions") ||
+      changes.has(languageResolverUpdatedSymbol)
+    ) {
+      delete this._numberFormatCache;
     }
 
-    @property({ attribute: false })
-    public normalization: SliderNormalization = defaultNormalization;
+    if (changes.has("value")) {
+      const oldValue = changes.get("value");
 
-    public dispatchInputEvent(): void {
-        const inputEvent = new Event('input', {
-            bubbles: true,
-            composed: true,
+      if (oldValue != null) {
+        this.updateComplete.then(() => {
+          this.handleController?.setValueFromHandle(this);
         });
-
-        this.dispatchEvent(inputEvent);
+      }
     }
 
-    protected _numberFormatCache:
-        | { numberFormat: NumberFormatter; language: string }
-        | undefined;
-    protected getNumberFormat(): NumberFormatter {
-        /* c8 ignore next */
-        if (
-            !this._numberFormatCache ||
-            this.languageResolver.language !== this._numberFormatCache.language
-        ) {
-            let numberFormatter: NumberFormatter;
-
-            try {
-                numberFormatter = new NumberFormatter(
-                    this.languageResolver.language,
-                    this.formatOptions
-                );
-                this._forcedUnit = '';
-                // numberFormatter.format(1);
-            } catch (error) {
-                const {
-                    style,
-                    unit,
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    unitDisplay,
-                    ...formatOptionsNoUnit
-                } = this.formatOptions || {};
-
-                if (style === 'unit') {
-                    this._forcedUnit = unit as string;
-                }
-
-                numberFormatter = new NumberFormatter(
-                    this.languageResolver.language,
-                    formatOptionsNoUnit
-                );
-            }
-
-            this._numberFormatCache = {
-                language: this.languageResolver.language,
-                numberFormat: numberFormatter,
-            };
+    this.handleController?.handleHasChanged(this);
+    super.update(changes);
+  }
+
+  protected override firstUpdated(
+    changedProperties: PropertyValues,
+  ): void {
+    super.firstUpdated(changedProperties);
+    this.dispatchEvent(new CustomEvent("sp-slider-handle-ready"));
+  }
+
+  @property({ attribute: false })
+  public normalization: SliderNormalization = defaultNormalization;
+
+  public dispatchInputEvent(): void {
+    const inputEvent = new Event("input", {
+      bubbles: true,
+      composed: true,
+    });
+
+    this.dispatchEvent(inputEvent);
+  }
+
+  protected _numberFormatCache:
+    | { numberFormat: NumberFormatter; language: string }
+    | undefined;
+  protected getNumberFormat(): NumberFormatter {
+    /* c8 ignore next */
+    if (
+      !this._numberFormatCache ||
+      this.languageResolver.language !== this._numberFormatCache.language
+    ) {
+      let numberFormatter: NumberFormatter;
+
+      try {
+        numberFormatter = new NumberFormatter(
+          this.languageResolver.language,
+          this.formatOptions,
+        );
+        this._forcedUnit = "";
+        // numberFormatter.format(1);
+      } catch (error) {
+        const {
+          style,
+          unit,
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          unitDisplay,
+          ...formatOptionsNoUnit
+        } = this.formatOptions || {};
+
+        if (style === "unit") {
+          this._forcedUnit = unit as string;
         }
 
-        /* c8 ignore next */
-        return this._numberFormatCache?.numberFormat;
+        numberFormatter = new NumberFormatter(
+          this.languageResolver.language,
+          formatOptionsNoUnit,
+        );
+      }
+
+      this._numberFormatCache = {
+        language: this.languageResolver.language,
+        numberFormat: numberFormatter,
+      };
     }
 
-    public get numberFormat(): NumberFormatter | undefined {
-        if (!this.formatOptions) return;
+    /* c8 ignore next */
+    return this._numberFormatCache?.numberFormat;
+  }
 
-        return this.getNumberFormat();
+  public get numberFormat(): NumberFormatter | undefined {
+    if (!this.formatOptions) {
+      return;
     }
+
+    return this.getNumberFormat();
+  }
 }
diff --git a/packages/slider/src/index.ts b/packages/slider/src/index.ts
index 976b7056c8..91d134a373 100644
--- a/packages/slider/src/index.ts
+++ b/packages/slider/src/index.ts
@@ -9,6 +9,6 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './Slider.js';
-export * from './SliderHandle.js';
-export * from './HandleController.js';
+export * from "./Slider.js";
+export * from "./SliderHandle.js";
+export * from "./HandleController.js";
diff --git a/packages/slider/stories/slider-sizes.stories.ts b/packages/slider/stories/slider-sizes.stories.ts
index 22ce18b74b..28f8688e85 100644
--- a/packages/slider/stories/slider-sizes.stories.ts
+++ b/packages/slider/stories/slider-sizes.stories.ts
@@ -9,46 +9,46 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import '@spectrum-web-components/slider/sp-slider.js';
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/slider/sp-slider.js";
 
 export default {
-    component: 'sp-slider',
-    title: 'Slider/Sizes',
+  component: "sp-slider",
+  title: "Slider/Sizes",
 };
 
 const template = ({
-    editable,
-    size,
+  editable,
+  size,
 }: {
-    editable?: boolean;
-    size?: 's' | 'm' | 'l' | 'xl';
+  editable?: boolean;
+  size?: "s" | "m" | "l" | "xl";
 } = {}): TemplateResult => {
-    return html`
-        

-            
-                Opacity
-            
-        

-    `;
+  return html`
+    

+      
+        Opacity
+      
+    

+  `;
 };
 
-export const s = (): TemplateResult => template({ size: 's' });
+export const s = (): TemplateResult => template({ size: "s" });
 export const sEditable = (): TemplateResult =>
-    template({ size: 's', editable: true });
+  template({ size: "s", editable: true });
 export const m = (): TemplateResult => template();
 export const mEditable = (): TemplateResult => template({ editable: true });
-export const l = (): TemplateResult => template({ size: 'l' });
+export const l = (): TemplateResult => template({ size: "l" });
 export const lEditable = (): TemplateResult =>
-    template({ size: 'l', editable: true });
-export const XL = (): TemplateResult => template({ size: 'xl' });
+  template({ size: "l", editable: true });
+export const XL = (): TemplateResult => template({ size: "xl" });
 export const XLEditable = (): TemplateResult =>
-    template({ size: 'xl', editable: true });
+  template({ size: "xl", editable: true });
diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
index 48ba67911f..6c5adf674a 100644
--- a/packages/slider/stories/slider.stories.ts
+++ b/packages/slider/stories/slider.stories.ts
@@ -9,1050 +9,1037 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from '@spectrum-web-components/base';
+import { html, TemplateResult } from "@spectrum-web-components/base";
 
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/slider/sp-slider-handle.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/slider/sp-slider-handle.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
 import {
-    Slider,
-    SliderHandle,
-    variants,
-} from '@spectrum-web-components/slider';
-import { spreadProps } from '../../../test/lit-helpers.js';
+  Slider,
+  SliderHandle,
+  variants,
+} from "@spectrum-web-components/slider";
+import { spreadProps } from "../../../test/lit-helpers.js";
 
 export default {
-    component: 'sp-slider',
-    title: 'Slider',
-    argTypes: {
-        onInput: { action: 'input' },
-        onChange: { action: 'change' },
-        variant: {
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: undefined },
-            },
-            options: [undefined, ...variants],
-        },
-        tickStep: {
-            table: {
-                type: { summary: 'number' },
-                defaultValue: { summary: 0.1 },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        labelVisibility: {
-            table: {
-                type: { summary: '"text" | "value" | "none" | undefined' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'text',
-            },
-        },
+  component: "sp-slider",
+  title: "Slider",
+  argTypes: {
+    onInput: { action: "input" },
+    onChange: { action: "change" },
+    variant: {
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined },
+      },
+      options: [undefined, ...variants],
     },
-    args: {
-        variant: undefined,
-        tickStep: 0.1,
-        labelVisibility: undefined,
-        min: undefined,
-        max: undefined,
-        value: undefined,
-        step: undefined,
+    tickStep: {
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 0.1 },
+      },
+      control: {
+        type: "number",
+      },
     },
+    labelVisibility: {
+      table: {
+        type: { summary: '"text" | "value" | "none" | undefined' },
+        defaultValue: { summary: undefined },
+      },
+      control: {
+        type: "text",
+      },
+    },
+  },
+  args: {
+    variant: undefined,
+    tickStep: 0.1,
+    labelVisibility: undefined,
+    min: undefined,
+    max: undefined,
+    value: undefined,
+    step: undefined,
+  },
 };
 
 export interface StoryArgs {
-    variant?: string;
-    tickStep?: number;
-    labelVisibility?: string;
-    onInput?: (val: string) => void;
-    onChange?: (val: string) => void;
-    min?: number;
-    max?: number;
-    value?: number;
-    step?: number;
-    [prop: string]: unknown;
+  variant?: string;
+  tickStep?: number;
+  labelVisibility?: string;
+  onInput?: (val: string) => void;
+  onChange?: (val: string) => void;
+  min?: number;
+  max?: number;
+  value?: number;
+  step?: number;
+  [prop: string]: unknown;
 }
 
 const handleEvent =
-    ({ onInput, onChange }: StoryArgs) =>
-    (event: Event): void => {
-        const { value } = event.target as Slider;
+  ({ onInput, onChange }: StoryArgs) =>
+  (event: Event): void => {
+    const { value } = event.target as Slider;
+
+    if (onInput && event.type === "input") {
+      onInput(value.toString());
+    } else if (onChange && event.type === "change") {
+      onChange(value.toString());
+    }
+  };
 
-        if (onInput && event.type === 'input') {
-            onInput(value.toString());
-        } else if (onChange && event.type === 'change') {
-            onChange(value.toString());
+const handleHandleEvent =
+  ({ onInput, onChange }: StoryArgs) =>
+  (event: Event): void => {
+    const target = event.target as SliderHandle;
+
+    if (target.value != null) {
+      if (typeof target.value === "object") {
+        const value = JSON.stringify(target.value, null, 2);
+
+        if (onInput && event.type === "input") {
+          onInput(value);
+        } else if (onChange && event.type === "change") {
+          onChange(value);
         }
-    };
+      } else {
+        const value = `${target.name}: ${target.value}`;
 
-const handleHandleEvent =
-    ({ onInput, onChange }: StoryArgs) =>
-    (event: Event): void => {
-        const target = event.target as SliderHandle;
-
-        if (target.value != null) {
-            if (typeof target.value === 'object') {
-                const value = JSON.stringify(target.value, null, 2);
-
-                if (onInput && event.type === 'input') {
-                    onInput(value);
-                } else if (onChange && event.type === 'change') {
-                    onChange(value);
-                }
-            } else {
-                const value = `${target.name}: ${target.value}`;
-
-                if (onInput && event.type === 'input') {
-                    onInput(value);
-                } else if (onChange && event.type === 'change') {
-                    onChange(value);
-                }
-            }
+        if (onInput && event.type === "input") {
+          onInput(value);
+        } else if (onChange && event.type === "change") {
+          onChange(value);
         }
-    };
+      }
+    }
+  };
 
 export const Default = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Opacity
-            
-        

-    `;
+  return html`
+    

+      
+        Opacity
+      
+    

+  `;
 };
 
 export const Filled = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Slider Label
-            
-        

-    `;
+  return html`
+    

+      
+        Slider Label
+      
+    

+  `;
 };
 
 export const HasADefaultValue = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                double click or press escape key to reset
-            
-        

-    `;
+  return html`
+    

+      
+        double click or press escape key to reset
+      
+    

+  `;
 };
 
 export const FillStart = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Slider label
-            
-        

-    `;
+  return html`
+    

+      
+        Slider label
+      
+    

+  `;
 };
 
 export const FillStartWithValue = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Value Greater than Fill Start
-            
-        

-        

-            
-                Value Less than Fill Start
-            
-        

-    `;
+  return html`
+    

+      
+        Value Greater than Fill Start
+      
+    

+    

+      
+        Value Less than Fill Start
+      
+    

+  `;
 };
 
 export const FillStartWithNegativeMinRange = (
-    args: StoryArgs = {}
+  args: StoryArgs = {},
 ): TemplateResult => {
-    return html`
-        

-            
-                Fill start with "0" and within range -50 to 150
-            
-        

-        

-             {
-                        if (value === 0) return 0.5;
-
-                        return value < 0
-                            ? 0.5 - (value / -50) * 0.5
-                            : 0.5 + (value / 100) * 0.5;
-                    },
-                    fromNormalized: (value: number): number => {
-                        if (value === 0.5) return 0;
-
-                        return value < 0.5
-                            ? (1 - value / 0.5) * -50
-                            : ((value - 0.5) / 0.5) * 100;
-                    },
-                }}
-                ...=${spreadProps(args)}
-            >
-                Fill start with "0" and normalization function within range -50
-                to 100
-            
-        

-    `;
+  return html`
+    

+      
+        Fill start with "0" and within range -50 to 150
+      
+    

+    

+       {
+            if (value === 0) {
+              return 0.5;
+            }
+
+            return value < 0
+              ? 0.5 - (value / -50) * 0.5
+              : 0.5 + (value / 100) * 0.5;
+          },
+          fromNormalized: (value: number): number => {
+            if (value === 0.5) {
+              return 0;
+            }
+
+            return value < 0.5
+              ? (1 - value / 0.5) * -50
+              : ((value - 0.5) / 0.5) * 100;
+          },
+        }}
+        ...=${spreadProps(args)}
+      >
+        Fill start with "0" and normalization function within range -50 to 100
+      
+    

+  `;
 };
 
 export const autofocus = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Opacity
-            
-        

-    `;
+  return html`
+    

+      
+        Opacity
+      
+    

+  `;
 };
 
 export const minimalDOM = (): TemplateResult => {
-    return html`
-        

-            Opacity
-        

-    `;
+  return html`
+    

+      Opacity
+    

+  `;
 };
 
 export const noVisibleTextLabel = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Opacity
-            
-        

-    `;
+  return html`
+    

+      
+        Opacity
+      
+    

+  `;
 };
 noVisibleTextLabel.args = {
-    labelVisibility: 'value',
+  labelVisibility: "value",
 };
 
 export const noVisibleValueLabel = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Opacity
-            
-        

-    `;
+  return html`
+    

+      
+        Opacity
+      
+    

+  `;
 };
 noVisibleValueLabel.args = {
-    labelVisibility: 'text',
+  labelVisibility: "text",
 };
 
 export const noVisibleLabels = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Opacity
-            
-        

-    `;
+  return html`
+    

+      
+        Opacity
+      
+    

+  `;
 };
 noVisibleLabels.args = {
-    labelVisibility: 'none',
+  labelVisibility: "none",
 };
 
 export const px = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Angle
-            
-        

-    `;
+  return html`
+    

+      
+        Angle
+      
+    

+  `;
 };
 
 class NumberFieldDefined extends HTMLElement {
-    constructor() {
-        super();
-        this.numberFieldLoaderPromise = new Promise((res) => {
-            customElements.whenDefined('sp-number-field').then(() => {
-                res(true);
-            });
-        });
-    }
-
-    private numberFieldLoaderPromise: Promise = Promise.resolve(false);
-
-    get updateComplete(): Promise {
-        return this.numberFieldLoaderPromise;
-    }
+  constructor() {
+    super();
+    this.numberFieldLoaderPromise = new Promise((res) => {
+      customElements.whenDefined("sp-number-field").then(() => {
+        res(true);
+      });
+    });
+  }
+
+  private numberFieldLoaderPromise: Promise = Promise.resolve(false);
+
+  get updateComplete(): Promise {
+    return this.numberFieldLoaderPromise;
+  }
 }
 
-customElements.define('number-field-defined', NumberFieldDefined);
+customElements.define("number-field-defined", NumberFieldDefined);
 
 const editableDecorator = (story: () => TemplateResult): TemplateResult => {
-    return html`
-        ${story()}
-        
-    `;
+  return html`
+    ${story()}
+    
+  `;
 };
 
 export const max20 = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Max 20
-            
-        

-    `;
+  return html`
+    

+      
+        Max 20
+      
+    

+  `;
 };
 max20.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 max20.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const editable = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Angle
-            
-        

-    `;
+  return html`
+    

+      
+        Angle
+      
+    

+  `;
 };
 
 editable.decorators = [editableDecorator];
 
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/overlay/overlay-trigger.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/tray/sp-tray.js';
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/tray/sp-tray.js";
 
 export const Multiple = (args: StoryArgs): TemplateResult => {
-    const updateSliderConfig = (
-        min: number,
-        max: number,
-        value: number,
-        step: number
-    ): void => {
-        const slider = document.querySelector('sp-slider');
-
-        if (slider) {
-            slider.value = value;
-            slider.min = min;
-            slider.max = max;
-            slider.step = step;
-        }
-    };
-
-    return html`
-        
-            
-                Toggle menu
+  const updateSliderConfig = (
+    min: number,
+    max: number,
+    value: number,
+    step: number,
+  ): void => {
+    const slider = document.querySelector("sp-slider");
+
+    if (slider) {
+      slider.value = value;
+      slider.min = min;
+      slider.max = max;
+      slider.step = step;
+    }
+  };
+
+  return html`
+    
+       Toggle menu 
+      
+        

+          
+          

+             updateSliderConfig(0.25, 4, 0.75, 0.01)}
+            >
+              Duration
+            
+             updateSliderConfig(2, 100, 2, 1)}
+            >
+              Personality
             
-            
-                

-                    
-                    

-                        
-                                updateSliderConfig(0.25, 4, 0.75, 0.01)}
-                        >
-                            Duration
-                        
-                         updateSliderConfig(2, 100, 2, 1)}
-                        >
-                            Personality
-                        
-                         updateSliderConfig(2, 25, 3, 1)}
-                        >
-                            Intensity
-                        
-                    

-                

-            
-        
-    `;
+             updateSliderConfig(2, 25, 3, 1)}>
+              Intensity
+            
+          

+        

+      
+    
+  `;
 };
 
 Multiple.args = {
-    min: 0.25,
-    max: 4,
-    value: 0.75,
-    step: 0.01,
+  min: 0.25,
+  max: 4,
+  value: 0.75,
+  step: 0.01,
 };
 
 export const editableWithDefaultValue = (
-    args: StoryArgs = {}
+  args: StoryArgs = {},
 ): TemplateResult => {
-    return html`
-        

-            
-                Angle
-            
-        

-    `;
+  return html`
+    

+      
+        Angle
+      
+    

+  `;
 };
 
 editableWithDefaultValue.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 editableWithDefaultValue.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const editableWithFractionValue = (
-    args: StoryArgs = {}
+  args: StoryArgs = {},
 ): TemplateResult => {
-    return html`
-        

-            
-                Angle
-            
-        

-    `;
+  return html`
+    

+      
+        Angle
+      
+    

+  `;
 };
 
 editableWithFractionValue.swc_vrt = {
-    skip: true,
+  skip: true,
 };
 
 editableWithFractionValue.parameters = {
-    // Disables Chromatic's snapshotting on a global level
-    chromatic: { disableSnapshot: true },
+  // Disables Chromatic's snapshotting on a global level
+  chromatic: { disableSnapshot: true },
 };
 
 export const editableDisabled = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Angle
-            
-        

-    `;
+  return html`
+    

+      
+        Angle
+      
+    

+  `;
 };
 
 editable.decorators = [editableDecorator];
 
 export const editableCustom = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Hours
-            
-        

-    `;
+  return html`
+    

+      
+        Hours
+      
+    

+  `;
 };
 
 editableCustom.decorators = [editableDecorator];
 
 export const editableWithoutVisibleLabels = (
-    args: StoryArgs = {}
+  args: StoryArgs = {},
 ): TemplateResult => {
-    return html`
-        

-            
-                Opacity
-            
-        

-    `;
+  return html`
+    

+      
+        Opacity
+      
+    

+  `;
 };
 
 editableWithoutVisibleLabels.args = {
-    labelVisibility: 'none',
+  labelVisibility: "none",
 };
 
 export const hideStepper = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Opacity
-            
-        

-    `;
+  return html`
+    

+      
+        Opacity
+      
+    

+  `;
 };
 
 hideStepper.decorators = [editableDecorator];
 
 export const Gradient = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        
-        

+    

-            
-        

-    `;
+    >
+      
+    

+  `;
 };
 Gradient.args = {
-    variant: undefined,
+  variant: undefined,
 };
 
 export const tick = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        
-        
-    `;
+  return html`
+    
+    
+  `;
 };
 tick.args = {
-    variant: 'tick',
-    tickStep: 5,
+  variant: "tick",
+  tickStep: 5,
 };
 
 export const tickLabels = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        
-        
-    `;
+  return html`
+    
+    
+  `;
 };
 tickLabels.args = {
-    variant: 'tick',
-    tickStep: 5,
+  variant: "tick",
+  tickStep: 5,
 };
 
 export const Disabled = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-        

-    `;
+  return html`
+    

+      
+    

+  `;
 };
 
 export const Quiet = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-        

-    `;
+  return html`
+    

+      
+    

+  `;
 };
 
 export const inPopover = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        
-            
-                
-            
-        
-    `;
+  return html`
+    
+      
+        
+      
+    
+  `;
 };
 
 export const Indeterminate = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-        

-    `;
+  return html`
+    

+      
+    

+  `;
 };
 
 export const ExplicitHandle = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Intensity
-                
-            
-        

-    `;
+  return html`
+    

+      
+        Intensity
+        
+      
+    

+  `;
 };
 
 export const TwoHandles = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Output Levels
-                
-                
-            
-        

-    `;
+  return html`
+    

+      
+        Output Levels
+        
+        
+      
+    

+  `;
 };
 TwoHandles.args = {
-    variant: 'range',
-    tickStep: 10,
+  variant: "range",
+  tickStep: 10,
 };
 
 export const TwoHandlesPt = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Output Levels
-                
-                
-            
-        

-    `;
+  return html`
+    

+      
+        Output Levels
+        
+        
+      
+    

+  `;
 };
 TwoHandlesPt.args = {
-    variant: 'range',
-    tickStep: 10,
+  variant: "range",
+  tickStep: 10,
 };
 
 export const ThreeHandlesPc = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Output Levels
-                
-                
-                
-            
-        

-    `;
+  return html`
+    

+      
+        Output Levels
+        
+        
+        
+      
+    

+  `;
 };
 ThreeHandlesPc.args = {
-    variant: 'range',
+  variant: "range",
 };
 
 export const ThreeHandlesOrdered = (args: StoryArgs = {}): TemplateResult => {
-    return html`
-        

-            
-                Output Levels
-                
-                
-                
-            
-        

-    `;
+  return html`
+    

+      
+        Output Levels
+        
+        
+        
+      
+    

+  `;
 };
 ThreeHandlesOrdered.args = {
-    variant: 'range',
-    tickStep: 10,
+  variant: "range",
+  tickStep: 10,
 };
 
 // This is a very complex example from an actual application.
@@ -1083,189 +1070,184 @@ ThreeHandlesOrdered.args = {
 // can also be used to enforce clamping.
 //
 export const ThreeHandlesComplex = (args: StoryArgs = {}): TemplateResult => {
-    const values: { [key: string]: number } = {
-        black: 50,
-        gray: 4.98,
-        white: 225,
-    };
-    const handleEvent =
-        ({ onInput, onChange }: StoryArgs) =>
-        (event: Event): void => {
-            const target = event.target as SliderHandle;
-
-            if (target.value != null) {
-                if (typeof target.value === 'object') {
-                    const value = JSON.stringify(target.value, null, 2);
-
-                    if (onInput && event.type === 'input') {
-                        onInput(value);
-                    } else if (onChange && event.type === 'change') {
-                        onChange(value);
-                    }
-                } else {
-                    const value = `${target.name}: ${target.value}`;
-
-                    if (onInput && event.type === 'input') {
-                        onInput(value);
-                    } else if (onChange && event.type === 'change') {
-                        onChange(value);
-                    }
-                }
-
-                values[target.name] = target.value;
-            }
-        };
-    const grayNormalization = {
-        toNormalized(value: number) {
-            const normalizedBlack = values.black / 255;
-            const normalizedWhite = values.white / 255;
-            const clamped = Math.max(Math.min(value, 1), 0);
-
-            return (
-                clamped * (normalizedWhite - normalizedBlack) + normalizedBlack
-            );
-        },
-        fromNormalized(value: number) {
-            const normalizedBlack = values.black / 255;
-            const normalizedWhite = values.white / 255;
-            const clamped = Math.max(
-                Math.min(value, normalizedWhite),
-                normalizedBlack
-            );
-
-            return (
-                (clamped - normalizedBlack) /
-                (normalizedWhite - normalizedBlack)
-            );
-        },
-    };
-    const blackNormalization = {
-        toNormalized(value: number) {
-            const clamped = Math.min(value, values.white);
-
-            return clamped / 255;
-        },
-        fromNormalized(value: number) {
-            const denormalized = value * 255;
+  const values: { [key: string]: number } = {
+    black: 50,
+    gray: 4.98,
+    white: 225,
+  };
+  const handleEvent =
+    ({ onInput, onChange }: StoryArgs) =>
+    (event: Event): void => {
+      const target = event.target as SliderHandle;
+
+      if (target.value != null) {
+        if (typeof target.value === "object") {
+          const value = JSON.stringify(target.value, null, 2);
+
+          if (onInput && event.type === "input") {
+            onInput(value);
+          } else if (onChange && event.type === "change") {
+            onChange(value);
+          }
+        } else {
+          const value = `${target.name}: ${target.value}`;
+
+          if (onInput && event.type === "input") {
+            onInput(value);
+          } else if (onChange && event.type === "change") {
+            onChange(value);
+          }
+        }
 
-            return Math.min(denormalized, values.white);
-        },
+        values[target.name] = target.value;
+      }
     };
-    const whiteNormalization = {
-        toNormalized(value: number) {
-            const clamped = Math.max(value, values.black);
+  const grayNormalization = {
+    toNormalized(value: number) {
+      const normalizedBlack = values.black / 255;
+      const normalizedWhite = values.white / 255;
+      const clamped = Math.max(Math.min(value, 1), 0);
 
-            return clamped / 255;
-        },
-        fromNormalized(value: number) {
-            const denormalized = value * 255;
+      return clamped * (normalizedWhite - normalizedBlack) + normalizedBlack;
+    },
+    fromNormalized(value: number) {
+      const normalizedBlack = values.black / 255;
+      const normalizedWhite = values.white / 255;
+      const clamped = Math.max(
+        Math.min(value, normalizedWhite),
+        normalizedBlack,
+      );
+
+      return (clamped - normalizedBlack) / (normalizedWhite - normalizedBlack);
+    },
+  };
+  const blackNormalization = {
+    toNormalized(value: number) {
+      const clamped = Math.min(value, values.white);
 
-            return Math.max(denormalized, values.black);
-        },
-    };
-    const computeGray = (value: number): string => {
-        let result = 1.0;
+      return clamped / 255;
+    },
+    fromNormalized(value: number) {
+      const denormalized = value * 255;
 
-        if (value > 0.5) {
-            result = Math.max(2 * (1 - value), 0.01);
-        } else if (value < 0.5) {
-            result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;
-        }
+      return Math.min(denormalized, values.white);
+    },
+  };
+  const whiteNormalization = {
+    toNormalized(value: number) {
+      const clamped = Math.max(value, values.black);
 
-        const formatOptions = {
-            maximumFractionDigits: 2,
-            minimumFractionDigits: 2,
-        };
+      return clamped / 255;
+    },
+    fromNormalized(value: number) {
+      const denormalized = value * 255;
 
-        return new Intl.NumberFormat(navigator.language, formatOptions).format(
-            result
-        );
+      return Math.max(denormalized, values.black);
+    },
+  };
+  const computeGray = (value: number): string => {
+    let result = 1.0;
+
+    if (value > 0.5) {
+      result = Math.max(2 * (1 - value), 0.01);
+    } else if (value < 0.5) {
+      result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;
+    }
+
+    const formatOptions = {
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2,
     };
 
-    return html`
-        

-            
-                Output Levels
-                
-                
-                
-            
-        

-    `;
+    return new Intl.NumberFormat(navigator.language, formatOptions).format(
+      result,
+    );
+  };
+
+  return html`
+    

+      
+        Output Levels
+        
+        
+        
+      
+    

+  `;
 };
 ThreeHandlesComplex.args = {
-    variant: 'range',
-    tickStep: 10,
+  variant: "range",
+  tickStep: 10,
 };
 
 export const focusTabDemo = (args: StoryArgs = {}): TemplateResult => {
-    const value = 50;
-    const min = 0;
-    const max = 100;
-    const step = 1;
-
-    return html`
-        

-            
-        

-        

-            
-        

-        

-            
-        

-    `;
+  const value = 50;
+  const min = 0;
+  const max = 100;
+  const step = 1;
+
+  return html`
+    

+      
+    

+    

+      
+    

+    

+      
+    

+  `;
 };
diff --git a/packages/slider/sync/sp-slider.ts b/packages/slider/sync/sp-slider.ts
index 60149edfab..24ff9a7465 100644
--- a/packages/slider/sync/sp-slider.ts
+++ b/packages/slider/sync/sp-slider.ts
@@ -10,5 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/number-field/sp-number-field.js';
-import '../sp-slider.js';
+import "@spectrum-web-components/number-field/sp-number-field.js";
+import "../sp-slider.js";
diff --git a/packages/slider/test/benchmark/test-basic.ts b/packages/slider/test/benchmark/test-basic.ts
index c8f30751e9..a4a7fa858d 100644
--- a/packages/slider/test/benchmark/test-basic.ts
+++ b/packages/slider/test/benchmark/test-basic.ts
@@ -10,17 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/slider/sp-slider.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+import "@spectrum-web-components/slider/sp-slider.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
 
 measureFixtureCreation(html`
-    
+  
 `);
diff --git a/packages/slider/test/index.ts b/packages/slider/test/index.ts
index 6aa8def195..046fb8a87f 100644
--- a/packages/slider/test/index.ts
+++ b/packages/slider/test/index.ts
@@ -10,365 +10,357 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { Slider } from '@spectrum-web-components/slider';
+import { Slider } from "@spectrum-web-components/slider";
 import {
-    editable,
-    hideStepper,
-    Indeterminate,
-    StoryArgs,
-} from '../stories/slider.stories.js';
-import { elementUpdated, expect, nextFrame } from '@open-wc/testing';
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { sendKeys } from '@web/test-runner-commands';
-import { spy } from 'sinon';
+  editable,
+  hideStepper,
+  Indeterminate,
+  StoryArgs,
+} from "../stories/slider.stories.js";
+import { elementUpdated, expect, nextFrame } from "@open-wc/testing";
+import { html, TemplateResult } from "@spectrum-web-components/base";
+import { sendKeys } from "@web/test-runner-commands";
+import { spy } from "sinon";
 import {
-    fixture,
-    testForLitDevWarnings,
-} from '../../../test/testing-helpers.js';
-import { sendMouse } from '../../../test/plugins/browser.js';
+  fixture,
+  testForLitDevWarnings,
+} from "../../../test/testing-helpers.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
 
 async function sliderFromFixture(
-    sliderFixture: (args: StoryArgs) => TemplateResult
+  sliderFixture: (args: StoryArgs) => TemplateResult,
 ): Promise {
-    const el = await fixture(sliderFixture({}));
-    const slider = el.querySelector('sp-slider') as Slider;
+  const el = await fixture(sliderFixture({}));
+  const slider = el.querySelector("sp-slider") as Slider;
 
-    return slider;
+  return slider;
 }
 
 export const testEditableSlider = (type: string): void => {
-    describe(`Slider - editable, ${type}`, () => {
-        testForLitDevWarnings(async () => await sliderFromFixture(editable));
-        it('loads', async () => {
-            const el = await sliderFromFixture(editable);
+  describe(`Slider - editable, ${type}`, () => {
+    testForLitDevWarnings(async () => await sliderFromFixture(editable));
+    it("loads", async () => {
+      const el = await sliderFromFixture(editable);
 
-            await elementUpdated(el);
+      await elementUpdated(el);
 
-            await expect(el).to.be.accessible();
-        });
+      await expect(el).to.be.accessible();
+    });
+
+    it("loads - [hide-stepper]", async () => {
+      const el = await sliderFromFixture(hideStepper);
+
+      await elementUpdated(el);
+
+      await expect(el).to.be.accessible();
+    });
+
+    it("loads - [disabled]", async () => {
+      const el = document.createElement("sp-slider");
+
+      el.editable = true;
+      el.disabled = true;
+      el.label = "Disabled, editable, slider";
+
+      try {
+        document.body.append(el);
+      } catch (error) {
+        expect(true).to.be.false;
+      }
+
+      await elementUpdated(el);
+
+      await expect(el).to.be.accessible();
+      el.remove();
+    });
+
+    it("toggles indeterminate when edited via the ``", async () => {
+      const el = await sliderFromFixture(Indeterminate);
+
+      await elementUpdated(el);
 
-        it('loads - [hide-stepper]', async () => {
-            const el = await sliderFromFixture(hideStepper);
+      expect(el.value).to.equal(5);
+      expect(el.indeterminate).to.be.true;
 
-            await elementUpdated(el);
+      el.focus();
 
-            await expect(el).to.be.accessible();
-        });
+      await elementUpdated(el);
+
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ type: "15" });
+      await sendKeys({ press: "Enter" });
+
+      await elementUpdated(el);
+
+      expect(el.value).to.equal(15);
+      expect(el.indeterminate).to.be.false;
+    });
+
+    it("focuses `` directly", async () => {
+      const el = await sliderFromFixture(editable);
+
+      await elementUpdated(el);
+
+      el.focus();
+
+      await elementUpdated(el);
+
+      expect(el.shadowRoot.activeElement).to.equal(el.numberField);
+    });
+
+    it("dispatches `input` of the animation frame", async () => {
+      const inputSpy = spy();
+      const changeSpy = spy();
+      const el = await fixture(html`
+         {
+            inputSpy(event.target.value);
+          }}
+          @change=${(event: Event & { target: Slider }) => {
+            changeSpy(event.target.value);
+          }}
+        >
+      `);
+
+      await elementUpdated(el);
+      expect(el.value).to.equal(50.5);
+
+      expect(inputSpy.callCount, "start clean").to.equal(0);
+      expect(changeSpy.callCount, "start clean").to.equal(0);
+
+      const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+      const rect = handle.getBoundingClientRect();
+      let frames = 0;
+      let shouldCountFrames = true;
+      const countFrames = (): void => {
+        if (!shouldCountFrames) {
+          return;
+        }
+
+        frames += 1;
+        requestAnimationFrame(countFrames);
+      };
+
+      countFrames();
+      type Steps = {
+        type: "move";
+        position: [number, number];
+      }[];
+      const toRight: Steps = [...Array(51).keys()].map((i) => ({
+        type: "move",
+        position: [rect.left + rect.width / 2 + i, rect.top + rect.height / 2],
+      }));
+      const toLeft: Steps = toRight.slice(0, -1).reverse();
+
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [rect.left + rect.width / 2, rect.top + rect.height / 2],
+          },
+          {
+            type: "down",
+          },
+          ...toRight,
+          ...toLeft,
+          {
+            type: "up",
+          },
+        ],
+      });
+      shouldCountFrames = false;
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+
+      expect(el.value).to.gt(50.5);
+      expect(
+        inputSpy.callCount,
+        'should not have more "input"s than frames',
+      ).to.lte(frames);
+      expect(changeSpy.callCount, "only one change").to.equal(1);
+    });
+
+    it("edits via the ``", async () => {
+      const inputSpy = spy();
+      const changeSpy = spy();
+      const el = await sliderFromFixture(editable);
+
+      el.addEventListener("input", () => inputSpy());
+      el.addEventListener("change", () => changeSpy());
+
+      await elementUpdated(el);
+
+      el.focus();
+
+      await elementUpdated(el);
+
+      expect(el.shadowRoot.activeElement).to.equal(el.numberField);
+      expect(el.value).to.equal(90);
+
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ type: "45" });
+      await sendKeys({ press: "Enter" });
+
+      await elementUpdated(el);
+
+      expect(el.shadowRoot.activeElement).to.equal(el.numberField);
+      expect(el.value).to.equal(45);
+      expect(inputSpy.callCount, "one input").to.equal(1);
+      expect(changeSpy.callCount, "one change").to.equal(1);
+
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ press: "Backspace" });
+      await sendKeys({ press: "Enter" });
+
+      expect(el.shadowRoot.activeElement).to.equal(el.numberField);
+      expect(el.value).to.equal(45);
+      expect(inputSpy.callCount, "still one input").to.equal(1);
+      expect(changeSpy.callCount, "still one change").to.equal(1);
+
+      el.shadowRoot.activeElement?.dispatchEvent(
+        new WheelEvent("wheel", { deltaY: 1 }),
+      );
+
+      await elementUpdated(el);
+
+      expect(el.shadowRoot.activeElement).to.equal(el.numberField);
+      expect(el.value).to.equal(46);
+      expect(inputSpy.callCount, "still one input").to.equal(2);
+
+      el.shadowRoot.activeElement?.dispatchEvent(
+        new WheelEvent("wheel", { deltaY: -1 }),
+      );
+
+      await elementUpdated(el);
+
+      expect(el.shadowRoot.activeElement).to.equal(el.numberField);
+      expect(el.value).to.equal(45);
+      expect(inputSpy.callCount, "still one input").to.equal(3);
+
+      el.shadowRoot.activeElement?.dispatchEvent(
+        new WheelEvent("wheel", { deltaX: 1, shiftKey: true }),
+      );
+
+      await elementUpdated(el);
+
+      expect(el.shadowRoot.activeElement).to.equal(el.numberField);
+      expect(el.value).to.equal(55);
+      expect(inputSpy.callCount, "still one input").to.equal(4);
+
+      el.shadowRoot.activeElement?.dispatchEvent(
+        new WheelEvent("wheel", { deltaX: -1, shiftKey: true }),
+      );
+
+      await elementUpdated(el);
+
+      expect(el.shadowRoot.activeElement).to.equal(el.numberField);
+      expect(el.value).to.equal(45);
+      expect(inputSpy.callCount, "still one input").to.equal(5);
+    });
 
-        it('loads - [disabled]', async () => {
-            const el = document.createElement('sp-slider');
-
-            el.editable = true;
-            el.disabled = true;
-            el.label = 'Disabled, editable, slider';
-
-            try {
-                document.body.append(el);
-            } catch (error) {
-                expect(true).to.be.false;
-            }
-
-            await elementUpdated(el);
-
-            await expect(el).to.be.accessible();
-            el.remove();
-        });
-
-        it('toggles indeterminate when edited via the ``', async () => {
-            const el = await sliderFromFixture(Indeterminate);
-
-            await elementUpdated(el);
-
-            expect(el.value).to.equal(5);
-            expect(el.indeterminate).to.be.true;
-
-            el.focus();
-
-            await elementUpdated(el);
-
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ type: '15' });
-            await sendKeys({ press: 'Enter' });
-
-            await elementUpdated(el);
-
-            expect(el.value).to.equal(15);
-            expect(el.indeterminate).to.be.false;
-        });
-
-        it('focuses `` directly', async () => {
-            const el = await sliderFromFixture(editable);
-
-            await elementUpdated(el);
-
-            el.focus();
-
-            await elementUpdated(el);
-
-            expect(el.shadowRoot.activeElement).to.equal(el.numberField);
-        });
-
-        it('dispatches `input` of the animation frame', async () => {
-            const inputSpy = spy();
-            const changeSpy = spy();
-            const el = await fixture(html`
-                 {
-                        inputSpy(event.target.value);
-                    }}
-                    @change=${(event: Event & { target: Slider }) => {
-                        changeSpy(event.target.value);
-                    }}
-                >
-            `);
-
-            await elementUpdated(el);
-            expect(el.value).to.equal(50.5);
-
-            expect(inputSpy.callCount, 'start clean').to.equal(0);
-            expect(changeSpy.callCount, 'start clean').to.equal(0);
-
-            const handle = el.shadowRoot.querySelector(
-                '.handle'
-            ) as HTMLDivElement;
-            const rect = handle.getBoundingClientRect();
-            let frames = 0;
-            let shouldCountFrames = true;
-            const countFrames = (): void => {
-                if (!shouldCountFrames) return;
-
-                frames += 1;
-                requestAnimationFrame(countFrames);
-            };
-
-            countFrames();
-            type Steps = {
-                type: 'move';
-                position: [number, number];
-            }[];
-            const toRight: Steps = [...Array(51).keys()].map((i) => ({
-                type: 'move',
-                position: [
-                    rect.left + rect.width / 2 + i,
-                    rect.top + rect.height / 2,
-                ],
-            }));
-            const toLeft: Steps = toRight.slice(0, -1).reverse();
-
-            await sendMouse({
-                steps: [
-                    {
-                        type: 'move',
-                        position: [
-                            rect.left + rect.width / 2,
-                            rect.top + rect.height / 2,
-                        ],
-                    },
-                    {
-                        type: 'down',
-                    },
-                    ...toRight,
-                    ...toLeft,
-                    {
-                        type: 'up',
-                    },
-                ],
-            });
-            shouldCountFrames = false;
-            await elementUpdated(el);
-            await nextFrame();
-            await nextFrame();
-
-            expect(el.value).to.gt(50.5);
-            expect(
-                inputSpy.callCount,
-                'should not have more "input"s than frames'
-            ).to.lte(frames);
-            expect(changeSpy.callCount, 'only one change').to.equal(1);
-        });
-
-        it('edits via the ``', async () => {
-            const inputSpy = spy();
-            const changeSpy = spy();
-            const el = await sliderFromFixture(editable);
-
-            el.addEventListener('input', () => inputSpy());
-            el.addEventListener('change', () => changeSpy());
-
-            await elementUpdated(el);
-
-            el.focus();
-
-            await elementUpdated(el);
-
-            expect(el.shadowRoot.activeElement).to.equal(el.numberField);
-            expect(el.value).to.equal(90);
-
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ type: '45' });
-            await sendKeys({ press: 'Enter' });
-
-            await elementUpdated(el);
-
-            expect(el.shadowRoot.activeElement).to.equal(el.numberField);
-            expect(el.value).to.equal(45);
-            expect(inputSpy.callCount, 'one input').to.equal(1);
-            expect(changeSpy.callCount, 'one change').to.equal(1);
-
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ press: 'Backspace' });
-            await sendKeys({ press: 'Enter' });
-
-            expect(el.shadowRoot.activeElement).to.equal(el.numberField);
-            expect(el.value).to.equal(45);
-            expect(inputSpy.callCount, 'still one input').to.equal(1);
-            expect(changeSpy.callCount, 'still one change').to.equal(1);
-
-            el.shadowRoot.activeElement?.dispatchEvent(
-                new WheelEvent('wheel', { deltaY: 1 })
-            );
-
-            await elementUpdated(el);
-
-            expect(el.shadowRoot.activeElement).to.equal(el.numberField);
-            expect(el.value).to.equal(46);
-            expect(inputSpy.callCount, 'still one input').to.equal(2);
-
-            el.shadowRoot.activeElement?.dispatchEvent(
-                new WheelEvent('wheel', { deltaY: -1 })
-            );
-
-            await elementUpdated(el);
-
-            expect(el.shadowRoot.activeElement).to.equal(el.numberField);
-            expect(el.value).to.equal(45);
-            expect(inputSpy.callCount, 'still one input').to.equal(3);
-
-            el.shadowRoot.activeElement?.dispatchEvent(
-                new WheelEvent('wheel', { deltaX: 1, shiftKey: true })
-            );
-
-            await elementUpdated(el);
-
-            expect(el.shadowRoot.activeElement).to.equal(el.numberField);
-            expect(el.value).to.equal(55);
-            expect(inputSpy.callCount, 'still one input').to.equal(4);
-
-            el.shadowRoot.activeElement?.dispatchEvent(
-                new WheelEvent('wheel', { deltaX: -1, shiftKey: true })
-            );
-
-            await elementUpdated(el);
-
-            expect(el.shadowRoot.activeElement).to.equal(el.numberField);
-            expect(el.value).to.equal(45);
-            expect(inputSpy.callCount, 'still one input').to.equal(5);
-        });
-
-        it('focuses `` after pointer interactions', async () => {
-            let pointerId = -1;
-            const el = await sliderFromFixture(editable);
-
-            await elementUpdated(el);
-
-            expect(el.dragging).to.be.false;
-            expect(el.highlight).to.be.false;
-            expect(pointerId).to.equal(-1);
-
-            const handle = el.shadowRoot.querySelector(
-                '.handle'
-            ) as HTMLDivElement;
-
-            el.track.setPointerCapture = (id: number) => (pointerId = id);
-            el.track.releasePointerCapture = (id: number) => (pointerId = id);
-            handle.dispatchEvent(
-                new PointerEvent('pointerdown', {
-                    button: 1,
-                    pointerId: 1,
-                    cancelable: true,
-                    bubbles: true,
-                    composed: true,
-                    pointerType: 'mouse',
-                })
-            );
-            await elementUpdated(el);
-
-            expect(el.dragging).to.be.false;
-            expect(pointerId, '1').to.equal(-1);
-
-            handle.dispatchEvent(
-                new PointerEvent('pointerdown', {
-                    button: 0,
-                    pointerId: 1,
-                    cancelable: true,
-                    bubbles: true,
-                    composed: true,
-                    pointerType: 'mouse',
-                })
-            );
-
-            await elementUpdated(el);
-
-            expect(el.dragging, 'it is dragging 1').to.be.true;
-            expect(pointerId, '2').to.equal(1);
-
-            handle.dispatchEvent(
-                new PointerEvent('pointerup', {
-                    pointerId: 2,
-                    cancelable: true,
-                    bubbles: true,
-                    composed: true,
-                    pointerType: 'mouse',
-                })
-            );
-            await elementUpdated(el);
-
-            expect(el.dragging).to.be.false;
-            expect(el.highlight).to.be.false;
-            expect(pointerId, '3').to.equal(2);
-
-            handle.dispatchEvent(
-                new PointerEvent('pointerdown', {
-                    button: 0,
-                    pointerId: 1,
-                    cancelable: true,
-                    bubbles: true,
-                    composed: true,
-                    pointerType: 'mouse',
-                })
-            );
-
-            await elementUpdated(el);
-
-            expect(el.dragging, 'it is dragging 2').to.be.true;
-            expect(pointerId, '4').to.equal(1);
-
-            handle.dispatchEvent(
-                new PointerEvent('pointercancel', {
-                    pointerId: 3,
-                    cancelable: true,
-                    bubbles: true,
-                    composed: true,
-                    pointerType: 'mouse',
-                })
-            );
-            await elementUpdated(el);
-
-            expect(el.dragging).to.be.false;
-            expect(pointerId, '5').to.equal(3);
-            expect(el.shadowRoot.activeElement).to.equal(
-                el.handleController.inputForHandle(el)
-            );
-        });
+    it("focuses `` after pointer interactions", async () => {
+      let pointerId = -1;
+      const el = await sliderFromFixture(editable);
+
+      await elementUpdated(el);
+
+      expect(el.dragging).to.be.false;
+      expect(el.highlight).to.be.false;
+      expect(pointerId).to.equal(-1);
+
+      const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+
+      el.track.setPointerCapture = (id: number) => (pointerId = id);
+      el.track.releasePointerCapture = (id: number) => (pointerId = id);
+      handle.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          button: 1,
+          pointerId: 1,
+          cancelable: true,
+          bubbles: true,
+          composed: true,
+          pointerType: "mouse",
+        }),
+      );
+      await elementUpdated(el);
+
+      expect(el.dragging).to.be.false;
+      expect(pointerId, "1").to.equal(-1);
+
+      handle.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          button: 0,
+          pointerId: 1,
+          cancelable: true,
+          bubbles: true,
+          composed: true,
+          pointerType: "mouse",
+        }),
+      );
+
+      await elementUpdated(el);
+
+      expect(el.dragging, "it is dragging 1").to.be.true;
+      expect(pointerId, "2").to.equal(1);
+
+      handle.dispatchEvent(
+        new PointerEvent("pointerup", {
+          pointerId: 2,
+          cancelable: true,
+          bubbles: true,
+          composed: true,
+          pointerType: "mouse",
+        }),
+      );
+      await elementUpdated(el);
+
+      expect(el.dragging).to.be.false;
+      expect(el.highlight).to.be.false;
+      expect(pointerId, "3").to.equal(2);
+
+      handle.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          button: 0,
+          pointerId: 1,
+          cancelable: true,
+          bubbles: true,
+          composed: true,
+          pointerType: "mouse",
+        }),
+      );
+
+      await elementUpdated(el);
+
+      expect(el.dragging, "it is dragging 2").to.be.true;
+      expect(pointerId, "4").to.equal(1);
+
+      handle.dispatchEvent(
+        new PointerEvent("pointercancel", {
+          pointerId: 3,
+          cancelable: true,
+          bubbles: true,
+          composed: true,
+          pointerType: "mouse",
+        }),
+      );
+      await elementUpdated(el);
+
+      expect(el.dragging).to.be.false;
+      expect(pointerId, "5").to.equal(3);
+      expect(el.shadowRoot.activeElement).to.equal(
+        el.handleController.inputForHandle(el),
+      );
     });
+  });
 };
diff --git a/packages/slider/test/slider-editable-sync.test.ts b/packages/slider/test/slider-editable-sync.test.ts
index cc298ff237..10d26332b6 100644
--- a/packages/slider/test/slider-editable-sync.test.ts
+++ b/packages/slider/test/slider-editable-sync.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/slider/sync/sp-slider.js';
-import { testEditableSlider } from './index.js';
+import "@spectrum-web-components/slider/sync/sp-slider.js";
+import { testEditableSlider } from "./index.js";
 
-testEditableSlider('sync');
+testEditableSlider("sync");
diff --git a/packages/slider/test/slider-editable.test.ts b/packages/slider/test/slider-editable.test.ts
index 2ccb204b37..c99d857658 100644
--- a/packages/slider/test/slider-editable.test.ts
+++ b/packages/slider/test/slider-editable.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/slider/sp-slider.js';
-import { testEditableSlider } from './index.js';
+import "@spectrum-web-components/slider/sp-slider.js";
+import { testEditableSlider } from "./index.js";
 
-testEditableSlider('async');
+testEditableSlider("async");
diff --git a/packages/slider/test/slider-handle-upgrade.test.ts b/packages/slider/test/slider-handle-upgrade.test.ts
index d7dea75684..eb02f11afb 100644
--- a/packages/slider/test/slider-handle-upgrade.test.ts
+++ b/packages/slider/test/slider-handle-upgrade.test.ts
@@ -10,34 +10,34 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { expect, fixture, html } from '@open-wc/testing';
-import '@spectrum-web-components/slider/sp-slider.js';
-import { Slider } from '@spectrum-web-components/slider/src/Slider.js';
+import { expect, fixture, html } from "@open-wc/testing";
+import "@spectrum-web-components/slider/sp-slider.js";
+import { Slider } from "@spectrum-web-components/slider/src/Slider.js";
 
-describe('Slider - upgrade order', () => {
-    it('loads both handles when document imports sp-slider-handle after sp-slider', async () => {
-        const el = await fixture(html`
-            
-                Output Levels
-                
-                
-            
-        `);
+describe("Slider - upgrade order", () => {
+  it("loads both handles when document imports sp-slider-handle after sp-slider", async () => {
+    const el = await fixture(html`
+      
+        Output Levels
+        
+        
+      
+    `);
 
-        import('../sp-slider-handle.js');
+    import("../sp-slider-handle.js");
 
-        const handles = el.shadowRoot.querySelectorAll('.handle');
+    const handles = el.shadowRoot.querySelectorAll(".handle");
 
-        expect(handles).to.have.lengthOf(2);
-    });
+    expect(handles).to.have.lengthOf(2);
+  });
 });
diff --git a/packages/slider/test/slider-memory.test.ts b/packages/slider/test/slider-memory.test.ts
index 6c18d5379f..216b2ee79a 100644
--- a/packages/slider/test/slider-memory.test.ts
+++ b/packages/slider/test/slider-memory.test.ts
@@ -9,10 +9,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/slider/sp-slider.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
+import { html } from "@open-wc/testing";
+import "@spectrum-web-components/slider/sp-slider.js";
+import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
 
-testForMemoryLeaks(html`
-    
-`);
+testForMemoryLeaks(html`  `);
diff --git a/packages/slider/test/slider.test.ts b/packages/slider/test/slider.test.ts
index bccaa05b60..e5a207dfd8 100644
--- a/packages/slider/test/slider.test.ts
+++ b/packages/slider/test/slider.test.ts
@@ -10,1857 +10,1821 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import '@spectrum-web-components/slider/sp-slider.js';
-import '@spectrum-web-components/slider/sp-slider-handle.js';
-import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/overlay/sp-overlay.js';
-import '@spectrum-web-components/popover/sp-popover.js';
-import { Overlay } from '@spectrum-web-components/overlay';
-import { Slider, SliderHandle } from '@spectrum-web-components/slider';
-import { tick } from '../stories/slider.stories.js';
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/slider/sp-slider-handle.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import { Overlay } from "@spectrum-web-components/overlay";
+import { Slider, SliderHandle } from "@spectrum-web-components/slider";
+import { tick } from "../stories/slider.stories.js";
 import {
-    elementUpdated,
-    expect,
-    fixture,
-    html,
-    nextFrame,
-    oneEvent,
-    waitUntil,
-} from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { spy, stub } from 'sinon';
-import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
-
-describe('Slider', () => {
-    testForLitDevWarnings(
-        async () =>
-            await fixture(html`
-                
-            `)
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent,
+  waitUntil,
+} from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { spy, stub } from "sinon";
+import { createLanguageContext } from "../../../tools/reactive-controllers/test/helpers.js";
+import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+
+describe("Slider", () => {
+  testForLitDevWarnings(
+    async () =>
+      await fixture(html`  `),
+  );
+  it("loads", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it('loads - [variant="tick"]', async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it('loads - [variant="tick"] irregularly', async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    await expect(el).to.be.accessible();
+  });
+  it("receives value from the outside", async () => {
+    const el = await fixture(html`  `);
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(10);
+
+    el.value = 10;
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(10);
+
+    el.value = 50;
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(20);
+  });
+  it("accepts keyboard events", async () => {
+    const el = await fixture(
+      tick({
+        variant: "tick",
+        tickStep: 5,
+      }),
     );
-    it('loads', async () => {
-        const el = await fixture(html`
-            
-        `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
-    });
-    it('loads - [variant="tick"]', async () => {
-        const el = await fixture(html`
-            
-        `);
+    expect(el.value).to.equal(46);
+    expect(el.highlight).to.be.false;
 
-        await elementUpdated(el);
+    el.focus();
+    await sendKeys({
+      press: "ArrowDown",
+    });
+    await elementUpdated(el);
 
-        await expect(el).to.be.accessible();
+    expect(el.value).to.equal(45);
+    expect(el.highlight).to.be.true;
+    await sendKeys({
+      press: "ArrowUp",
     });
-    it('loads - [variant="tick"] irregularly', async () => {
-        const el = await fixture(html`
-            
-        `);
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(46);
+    expect(el.highlight).to.be.true;
+  });
+  it("accepts pointer events", async () => {
+    let pointerId = -1;
+    const el = await fixture(html`  `);
+
+    await elementUpdated(el);
+
+    expect(el.dragging).to.be.false;
+    expect(el.highlight).to.be.false;
+    expect(pointerId).to.equal(-1);
+
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+
+    el.track.setPointerCapture = (id: number) => (pointerId = id);
+    el.track.releasePointerCapture = (id: number) => (pointerId = id);
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 1,
+        pointerId: 1,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(el.dragging).to.be.false;
+    expect(pointerId, "1").to.equal(-1);
+
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        pointerId: 1,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
+    expect(el.dragging, "it is dragging 1").to.be.true;
+    expect(pointerId, "2").to.equal(1);
+
+    handle.dispatchEvent(
+      new PointerEvent("pointerup", {
+        pointerId: 2,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(el.dragging).to.be.false;
+    expect(el.highlight).to.be.false;
+    expect(pointerId, "3").to.equal(2);
+
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        pointerId: 1,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(el.dragging, "it is dragging 2").to.be.true;
+    expect(pointerId, "4").to.equal(1);
+
+    handle.dispatchEvent(
+      new PointerEvent("pointercancel", {
+        pointerId: 3,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(el.dragging).to.be.false;
+    expect(pointerId, "5").to.equal(3);
+  });
+  it("will `trackPointerDown` on `#controls`", async () => {
+    let pointerId = -1;
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(35);
+
+    const controls = el.shadowRoot.querySelector("#controls") as HTMLDivElement;
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+
+    el.track.setPointerCapture = (id: number) => (pointerId = id);
+    el.track.releasePointerCapture = (id: number) => (pointerId = id);
+
+    controls.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 1,
+        // account for 8px  margin by default
+        clientX: 9,
+        pointerId: 4,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(pointerId).to.equal(-1);
+    expect(el.value).to.equal(35);
+    expect(el.dragging, "handle is not yet being dragged").to.be.false;
+
+    controls.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        // account for 8px  margin by default
+        clientX: 9,
+        pointerId: 4,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(pointerId).to.equal(4);
+    expect(el.value).to.equal(0);
+    expect(el.dragging, "handle is being dragged").to.be.true;
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        button: 0,
+        // account for 8px  margin by default
+        clientX: 508,
+        pointerId: 4,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(el.dragging, "handle is still being dragged").to.be.true;
+    expect(pointerId).to.equal(4);
+    expect(el.value).to.equal(70);
+
+    handle.dispatchEvent(
+      new PointerEvent("pointerup", {
+        button: 0,
+        // account for 8px  margin by default
+        clientX: 9,
+        pointerId: 4,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    expect(pointerId).to.equal(4);
+    expect(el.value).to.equal(70);
+    expect(el.dragging, "handle is no longer being dragged").to.be.false;
+  });
+  it("can be disabled", async () => {
+    let pointerId = -1;
+    const el = await fixture(html`  `);
 
-        await expect(el).to.be.accessible();
-    });
-    it('receives value from the outside', async () => {
-        const el = await fixture(html`
-            
-        `);
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    expect(el.dragging).to.be.false;
+    expect(pointerId).to.equal(-1);
+    expect(el.value).to.equal(50);
 
-        expect(el.value).to.equal(10);
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
 
-        el.value = 10;
-        await elementUpdated(el);
+    handle.setPointerCapture = (id: number) => (pointerId = id);
 
-        expect(el.value).to.equal(10);
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        pointerId: 1,
+        cancelable: true,
+      }),
+    );
+    await elementUpdated(el);
 
-        el.value = 50;
-        await elementUpdated(el);
+    expect(el.dragging).to.be.false;
+    expect(pointerId).to.equal(-1);
 
-        expect(el.value).to.equal(20);
-    });
-    it('accepts keyboard events', async () => {
-        const el = await fixture(
-            tick({
-                variant: 'tick',
-                tickStep: 5,
-            })
-        );
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(46);
-        expect(el.highlight).to.be.false;
-
-        el.focus();
-        await sendKeys({
-            press: 'ArrowDown',
-        });
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(45);
-        expect(el.highlight).to.be.true;
-        await sendKeys({
-            press: 'ArrowUp',
-        });
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(46);
-        expect(el.highlight).to.be.true;
-    });
-    it('accepts pointer events', async () => {
-        let pointerId = -1;
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.dragging).to.be.false;
-        expect(el.highlight).to.be.false;
-        expect(pointerId).to.equal(-1);
-
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-
-        el.track.setPointerCapture = (id: number) => (pointerId = id);
-        el.track.releasePointerCapture = (id: number) => (pointerId = id);
-        handle.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                button: 1,
-                pointerId: 1,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.dragging).to.be.false;
-        expect(pointerId, '1').to.equal(-1);
-
-        handle.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                button: 0,
-                pointerId: 1,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-        expect(el.dragging, 'it is dragging 1').to.be.true;
-        expect(pointerId, '2').to.equal(1);
-
-        handle.dispatchEvent(
-            new PointerEvent('pointerup', {
-                pointerId: 2,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.dragging).to.be.false;
-        expect(el.highlight).to.be.false;
-        expect(pointerId, '3').to.equal(2);
-
-        handle.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                button: 0,
-                pointerId: 1,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.dragging, 'it is dragging 2').to.be.true;
-        expect(pointerId, '4').to.equal(1);
-
-        handle.dispatchEvent(
-            new PointerEvent('pointercancel', {
-                pointerId: 3,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.dragging).to.be.false;
-        expect(pointerId, '5').to.equal(3);
-    });
-    it('will `trackPointerDown` on `#controls`', async () => {
-        let pointerId = -1;
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(35);
-
-        const controls = el.shadowRoot.querySelector(
-            '#controls'
-        ) as HTMLDivElement;
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-
-        el.track.setPointerCapture = (id: number) => (pointerId = id);
-        el.track.releasePointerCapture = (id: number) => (pointerId = id);
-
-        controls.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                button: 1,
-                // account for 8px  margin by default
-                clientX: 9,
-                pointerId: 4,
-                bubbles: true,
-                cancelable: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(pointerId).to.equal(-1);
-        expect(el.value).to.equal(35);
-        expect(el.dragging, 'handle is not yet being dragged').to.be.false;
-
-        controls.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                button: 0,
-                // account for 8px  margin by default
-                clientX: 9,
-                pointerId: 4,
-                bubbles: true,
-                cancelable: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(pointerId).to.equal(4);
-        expect(el.value).to.equal(0);
-        expect(el.dragging, 'handle is being dragged').to.be.true;
-        handle.dispatchEvent(
-            new PointerEvent('pointermove', {
-                button: 0,
-                // account for 8px  margin by default
-                clientX: 508,
-                pointerId: 4,
-                bubbles: true,
-                cancelable: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.dragging, 'handle is still being dragged').to.be.true;
-        expect(pointerId).to.equal(4);
-        expect(el.value).to.equal(70);
-
-        handle.dispatchEvent(
-            new PointerEvent('pointerup', {
-                button: 0,
-                // account for 8px  margin by default
-                clientX: 9,
-                pointerId: 4,
-                bubbles: true,
-                cancelable: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(pointerId).to.equal(4);
-        expect(el.value).to.equal(70);
-        expect(el.dragging, 'handle is no longer being dragged').to.be.false;
-    });
-    it('can be disabled', async () => {
-        let pointerId = -1;
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.dragging).to.be.false;
-        expect(pointerId).to.equal(-1);
-        expect(el.value).to.equal(50);
-
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-
-        handle.setPointerCapture = (id: number) => (pointerId = id);
-
-        handle.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                button: 0,
-                pointerId: 1,
-                cancelable: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.dragging).to.be.false;
-        expect(pointerId).to.equal(-1);
-
-        const controls = el.shadowRoot.querySelector(
-            '#controls'
-        ) as HTMLDivElement;
-
-        controls.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                button: 0,
-                clientX: 50,
-                pointerId: 1,
-                cancelable: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(pointerId).to.equal(-1);
-        expect(el.value).to.equal(50);
-    });
-    it('accepts pointermove events', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(50);
-
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-
-        const handleBoundingRect = handle.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        handleBoundingRect.x + handleBoundingRect.width / 2,
-
-                        handleBoundingRect.y + handleBoundingRect.height / 2,
-                    ],
-                },
-                {
-                    type: 'down',
-                },
-            ],
-        });
-        await elementUpdated(el);
-
-        expect(el.dragging, 'is dragging').to.be.true;
-        expect(el.highlight, 'not highlighted').to.be.false;
-
-        handle.dispatchEvent(
-            new PointerEvent('pointermove', {
-                clientX: 0,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(0);
-    });
+    const controls = el.shadowRoot.querySelector("#controls") as HTMLDivElement;
 
-    it('changes value when clicking on the track', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(50);
-
-        const track = el.shadowRoot.querySelector('#track') as HTMLDivElement;
-        const trackBoundingRect = track.getBoundingClientRect();
-
-        let pointerId = -1;
-
-        el.track.setPointerCapture = (id: number) => (pointerId = id);
-        el.track.releasePointerCapture = (id: number) => (pointerId = id);
-
-        // Click on the track moves it to value 60
-        track.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                clientX: trackBoundingRect.x + trackBoundingRect.width / 2 + 10,
-                clientY: trackBoundingRect.y + trackBoundingRect.height / 2,
-                pointerId: 1,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-                button: 0,
-            })
-        );
-        await elementUpdated(el);
-        track.dispatchEvent(
-            new PointerEvent('pointerup', {
-                pointerId: 1,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(60);
-        expect(pointerId, '1').to.equal(1);
-
-        // Click and drag on the track moves it from value 60 -> 75
-        track.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                clientX: trackBoundingRect.x + trackBoundingRect.width / 2 + 10,
-                clientY: trackBoundingRect.y + trackBoundingRect.height / 2,
-                pointerId: 2,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-                button: 0,
-            })
-        );
-        track.dispatchEvent(
-            new PointerEvent('pointermove', {
-                clientX: trackBoundingRect.x + trackBoundingRect.width / 2 + 25,
-                clientY: trackBoundingRect.y + trackBoundingRect.height / 2,
-                pointerId: 2,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-        track.dispatchEvent(
-            new PointerEvent('pointerup', {
-                pointerId: 2,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-        expect(el.value).to.equal(75);
-    });
+    controls.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        button: 0,
+        clientX: 50,
+        pointerId: 1,
+        cancelable: true,
+      }),
+    );
+    await elementUpdated(el);
 
-    it('dispatches `input` of the animation frame', async () => {
-        const inputSpy = spy();
-        const changeSpy = spy();
-        const el = await fixture(html`
-             {
-                    inputSpy(event.target.value);
-                }}
-                @change=${(event: Event & { target: Slider }) => {
-                    changeSpy(event.target.value);
-                }}
-            >
-        `);
-
-        await elementUpdated(el);
-
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-
-        const handleBoundingRect = handle.getBoundingClientRect();
-
-        expect(inputSpy.callCount, 'start clean').to.equal(0);
-        expect(changeSpy.callCount, 'start clean').to.equal(0);
-
-        let frames = 0;
-        let shouldCountFrames = true;
-        const countFrames = (): void => {
-            if (!shouldCountFrames) return;
-
-            frames += 1;
-            requestAnimationFrame(countFrames);
-        };
-
-        countFrames();
-        type Steps = {
-            type: 'move';
-            position: [number, number];
-        }[];
-        const toRight: Steps = [...Array(51).keys()].map((i) => ({
-            type: 'move',
-            position: [9 + i, 30],
-        }));
-        const toLeft: Steps = toRight.slice(0, -1).reverse();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        handleBoundingRect.x + handleBoundingRect.width / 2,
-                        handleBoundingRect.y + handleBoundingRect.height / 2,
-                    ],
-                },
-                {
-                    type: 'down',
-                },
-                ...toRight,
-                ...toLeft,
-                {
-                    type: 'up',
-                },
-            ],
-        });
-        shouldCountFrames = false;
-
-        expect(
-            inputSpy.callCount,
-            'should not have more "input"s than frames'
-        ).to.lte(frames);
-        expect(changeSpy.callCount, 'only one change').to.equal(1);
-    });
+    expect(pointerId).to.equal(-1);
+    expect(el.value).to.equal(50);
+  });
+  it("accepts pointermove events", async () => {
+    const el = await fixture(html`  `);
 
-    it('manages RTL when min != 0', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(6);
-
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-        const handleBoundingRect = handle.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        handleBoundingRect.x + handleBoundingRect.width / 2,
-                        handleBoundingRect.y + handleBoundingRect.height / 2,
-                    ],
-                },
-                {
-                    type: 'down',
-                },
-            ],
-        });
-        await elementUpdated(el);
-
-        expect(el.dragging, 'is dragging').to.be.true;
-        expect(el.highlight, 'not highlighted').to.be.false;
-
-        handle.dispatchEvent(
-            new PointerEvent('pointermove', {
-                clientX: 0,
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(11);
-    });
+    await elementUpdated(el);
 
-    it('goes [disabled] while dragging', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(50);
-
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-        const handleBoundingRect = handle.getBoundingClientRect();
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        handleBoundingRect.x + handleBoundingRect.width / 2,
-                        handleBoundingRect.y + handleBoundingRect.height / 2,
-                    ],
-                },
-                {
-                    type: 'down',
-                },
-            ],
-        });
-        await elementUpdated(el);
-
-        expect(el.dragging, 'is dragging').to.be.true;
-        expect(el.highlight, 'not highlighted').to.be.false;
-        expect(el.value).to.equal(50);
-
-        const inputEvent = oneEvent(el, 'input');
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        handleBoundingRect.x +
-                            handleBoundingRect.width / 2 +
-                            100,
-                        handleBoundingRect.y + handleBoundingRect.height / 2,
-                    ],
-                },
-            ],
-        });
-        await inputEvent;
-
-        expect(el.value).to.equal(63);
-
-        el.disabled = true;
-        await elementUpdated(el);
-
-        expect(el.dragging, 'is dragging').to.be.false;
-        expect(el.highlight, 'not highlighted').to.be.false;
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        0,
-                        handleBoundingRect.top + handleBoundingRect.height / 2,
-                    ],
-                },
-            ],
-        });
-
-        expect(el.value).to.equal(63);
-    });
-    it('accepts pointermove events in separate interactions', async () => {
-        let pointerId = -1;
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.value, 'initial').to.equal(50);
-
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-
-        el.track.setPointerCapture = (id: number) => (pointerId = id);
-        el.track.releasePointerCapture = (id: number) => (pointerId = id);
-        handle.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                clientX: 58,
-                cancelable: true,
-                button: 0,
-                pointerId: 100,
-                composed: true,
-                bubbles: true,
-            })
-        );
-        await elementUpdated(el);
-        await nextFrame();
-        handle.dispatchEvent(
-            new PointerEvent('pointermove', {
-                clientX: 58,
-                cancelable: true,
-                composed: true,
-                bubbles: true,
-            })
-        );
-        await elementUpdated(el);
-        await nextFrame();
-
-        expect(el.value, 'first pointerdown').to.equal(50);
-        expect(el.dragging, 'is dragging').to.be.true;
-        expect(el.classList.contains('handle-highlight'), 'not highlighted').to
-            .be.false;
-        expect(pointerId).to.equal(100);
-
-        handle.dispatchEvent(
-            new PointerEvent('pointermove', {
-                clientX: 0,
-                cancelable: true,
-                composed: true,
-                bubbles: true,
-            })
-        );
-        await elementUpdated(el);
-        await nextFrame();
-
-        expect(el.value, 'first pointermove').to.equal(0);
-
-        handle.dispatchEvent(
-            new PointerEvent('pointerup', {
-                clientX: 0,
-                cancelable: true,
-                composed: true,
-                bubbles: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.value, 'first pointerup').to.equal(0);
-        expect(el.dragging, 'is dragging').to.be.false;
-        handle.dispatchEvent(
-            new PointerEvent('pointerdown', {
-                clientX: 58,
-                cancelable: true,
-                button: 0,
-                composed: true,
-                bubbles: true,
-            })
-        );
-        await elementUpdated(el);
-        handle.dispatchEvent(
-            new PointerEvent('pointermove', {
-                clientX: 58,
-                cancelable: true,
-                composed: true,
-                bubbles: true,
-            })
-        );
-        await elementUpdated(el);
-        await nextFrame();
-
-        expect(el.value, 'second pointerdown').to.equal(50);
-        expect(el.dragging, 'is dragging').to.be.true;
-        expect(el.classList.contains('handle-highlight'), 'not highlighted').to
-            .be.false;
-
-        handle.dispatchEvent(
-            new PointerEvent('pointermove', {
-                clientX: 0,
-                cancelable: true,
-                composed: true,
-                bubbles: true,
-            })
-        );
-        await elementUpdated(el);
-        await nextFrame();
-
-        expect(el.value, 'second pointermove').to.equal(0);
-
-        handle.dispatchEvent(
-            new PointerEvent('pointerup', {
-                clientX: 0,
-                cancelable: true,
-                composed: true,
-                bubbles: true,
-            })
-        );
-        await elementUpdated(el);
-
-        expect(el.value, 'second pointerup').to.equal(0);
-        expect(el.dragging, 'is dragging').to.be.false;
-    });
-    it('accepts pointermove events - [step=0]', async () => {
-        const el = await fixture(html`
-            
-                Step = 0
-            
-        `);
+    expect(el.value).to.equal(50);
 
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
 
-        expect(el.value).to.equal(10);
+    const handleBoundingRect = handle.getBoundingClientRect();
 
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-        const handleBoundingRect = handle.getBoundingClientRect();
-        const position: [number, number] = [
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
             handleBoundingRect.x + handleBoundingRect.width / 2,
+
             handleBoundingRect.y + handleBoundingRect.height / 2,
-        ];
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position,
-                },
-                {
-                    type: 'down',
-                },
-            ],
-        });
-
-        await elementUpdated(el);
-
-        expect(el.highlight, 'with no highlight').to.be.false;
-        expect(el.dragging, 'dragging').to.be.true;
-
-        let inputEvent = oneEvent(el, 'input');
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        200,
-                        handleBoundingRect.y + handleBoundingRect.height + 100,
-                    ],
-                },
-            ],
-        });
-        await inputEvent;
-        await nextFrame();
-
-        expect(el.value).to.equal(8);
-
-        inputEvent = oneEvent(el, 'input');
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [125, position[1]],
-                },
-            ],
-        });
-        await inputEvent;
-
-        expect(el.value).to.equal(5);
+          ],
+        },
+        {
+          type: "down",
+        },
+      ],
     });
-    it('will not pointermove unless `pointerdown`', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.value).to.equal(50);
-        expect(el.dragging).to.be.false;
+    await elementUpdated(el);
+
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.highlight, "not highlighted").to.be.false;
+
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
 
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
+    expect(el.value).to.equal(0);
+  });
 
-        handle.dispatchEvent(
-            new PointerEvent('pointermove', {
-                clientX: 0,
-                cancelable: true,
-            })
-        );
-        await nextFrame();
+  it("changes value when clicking on the track", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-        expect(el.value).to.equal(50);
-    });
-    it('responds to input events on the  element', async () => {
-        const el = await fixture(html`
-            
-        `);
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    expect(el.value).to.equal(50);
 
-        expect(el.value).to.equal(50);
+    const track = el.shadowRoot.querySelector("#track") as HTMLDivElement;
+    const trackBoundingRect = track.getBoundingClientRect();
 
-        const input = el.shadowRoot.querySelector('.input') as HTMLInputElement;
+    let pointerId = -1;
 
-        input.value = '0';
-        input.dispatchEvent(new Event('change'));
+    el.track.setPointerCapture = (id: number) => (pointerId = id);
+    el.track.releasePointerCapture = (id: number) => (pointerId = id);
 
-        expect(el.value).to.equal(0);
+    // Click on the track moves it to value 60
+    track.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        clientX: trackBoundingRect.x + trackBoundingRect.width / 2 + 10,
+        clientY: trackBoundingRect.y + trackBoundingRect.height / 2,
+        pointerId: 1,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+        button: 0,
+      }),
+    );
+    await elementUpdated(el);
+    track.dispatchEvent(
+      new PointerEvent("pointerup", {
+        pointerId: 1,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(60);
+    expect(pointerId, "1").to.equal(1);
+
+    // Click and drag on the track moves it from value 60 -> 75
+    track.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        clientX: trackBoundingRect.x + trackBoundingRect.width / 2 + 10,
+        clientY: trackBoundingRect.y + trackBoundingRect.height / 2,
+        pointerId: 2,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+        button: 0,
+      }),
+    );
+    track.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: trackBoundingRect.x + trackBoundingRect.width / 2 + 25,
+        clientY: trackBoundingRect.y + trackBoundingRect.height / 2,
+        pointerId: 2,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
+    track.dispatchEvent(
+      new PointerEvent("pointerup", {
+        pointerId: 2,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
+    expect(el.value).to.equal(75);
+  });
+
+  it("dispatches `input` of the animation frame", async () => {
+    const inputSpy = spy();
+    const changeSpy = spy();
+    const el = await fixture(html`
+       {
+          inputSpy(event.target.value);
+        }}
+        @change=${(event: Event & { target: Slider }) => {
+          changeSpy(event.target.value);
+        }}
+      >
+    `);
+
+    await elementUpdated(el);
+
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+
+    const handleBoundingRect = handle.getBoundingClientRect();
+
+    expect(inputSpy.callCount, "start clean").to.equal(0);
+    expect(changeSpy.callCount, "start clean").to.equal(0);
+
+    let frames = 0;
+    let shouldCountFrames = true;
+    const countFrames = (): void => {
+      if (!shouldCountFrames) {
+        return;
+      }
+
+      frames += 1;
+      requestAnimationFrame(countFrames);
+    };
+
+    countFrames();
+    type Steps = {
+      type: "move";
+      position: [number, number];
+    }[];
+    const toRight: Steps = [...Array(51).keys()].map((i) => ({
+      type: "move",
+      position: [9 + i, 30],
+    }));
+    const toLeft: Steps = toRight.slice(0, -1).reverse();
+
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            handleBoundingRect.x + handleBoundingRect.width / 2,
+            handleBoundingRect.y + handleBoundingRect.height / 2,
+          ],
+        },
+        {
+          type: "down",
+        },
+        ...toRight,
+        ...toLeft,
+        {
+          type: "up",
+        },
+      ],
     });
-    it('accepts variants', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.variant).to.equal('tick');
-        expect(el.getAttribute('variant')).to.equal('tick');
+    shouldCountFrames = false;
 
-        el.variant = 'ramp';
+    expect(
+      inputSpy.callCount,
+      'should not have more "input"s than frames',
+    ).to.lte(frames);
+    expect(changeSpy.callCount, "only one change").to.equal(1);
+  });
 
-        await elementUpdated(el);
+  it("manages RTL when min != 0", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-        expect(el.variant).to.equal('ramp');
-        expect(el.getAttribute('variant')).to.equal('ramp');
+    await elementUpdated(el);
 
-        el.setAttribute('variant', 'filled');
+    expect(el.value).to.equal(6);
 
-        await elementUpdated(el);
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+    const handleBoundingRect = handle.getBoundingClientRect();
 
-        expect(el.variant).to.equal('filled');
-        expect(el.getAttribute('variant')).to.equal('filled');
-
-        el.removeAttribute('variant');
-
-        await elementUpdated(el);
-
-        expect(el.variant).to.equal('');
-        expect(el.hasAttribute('variant')).to.be.false;
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            handleBoundingRect.x + handleBoundingRect.width / 2,
+            handleBoundingRect.y + handleBoundingRect.height / 2,
+          ],
+        },
+        {
+          type: "down",
+        },
+      ],
     });
-    it('validates variants', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.variant).to.equal('');
-        expect(el.hasAttribute('variant')).to.be.false;
+    await elementUpdated(el);
+
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.highlight, "not highlighted").to.be.false;
+
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    await elementUpdated(el);
 
-        el.variant = 'tick';
+    expect(el.value).to.equal(11);
+  });
 
-        await elementUpdated(el);
+  it("goes [disabled] while dragging", async () => {
+    const el = await fixture(html`  `);
 
-        expect(el.variant).to.equal('tick');
-        expect(el.getAttribute('variant')).to.equal('tick');
+    await elementUpdated(el);
 
-        el.variant = 'tick';
+    expect(el.value).to.equal(50);
 
-        await elementUpdated(el);
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+    const handleBoundingRect = handle.getBoundingClientRect();
 
-        expect(el.variant).to.equal('tick');
-        expect(el.getAttribute('variant')).to.equal('tick');
-    });
-    it('renders fill from the centerPoint of the track when fill-start has no value', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
-        const fillElement = el.shadowRoot.querySelector(
-            '.fill'
-        ) as HTMLDivElement;
-
-        expect(fillElement).to.exist;
-        expect(fillElement.style.left).to.equal('50%');
-        expect(fillElement.style.width).to.equal('0%');
-        expect(el.values).to.deep.equal({ value: 10 });
-    });
-    it('renders fill from value when fill-start has value=0', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
-        const fillElement = el.shadowRoot.querySelector(
-            '.fill'
-        ) as HTMLDivElement;
-
-        expect(fillElement).to.exist;
-        expect(fillElement.style.left).to.equal('25%');
-        expect(fillElement.style.width).to.equal('12.5%');
-        expect(el.values).to.deep.equal({ value: 25 });
-    });
-    it('renders fill from fill-start point', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
-        const fillElement = el.shadowRoot.querySelector(
-            '.fill'
-        ) as HTMLDivElement;
-
-        expect(fillElement).to.exist;
-        expect(fillElement.style.left).to.equal('10%');
-        expect(fillElement.style.width).to.equal('5%');
-        expect(el.values).to.deep.equal({ value: 10 });
-
-        const handle = el.shadowRoot.querySelector('.handle') as HTMLDivElement;
-        const handleBoundingRect = handle.getBoundingClientRect();
-        const position: [number, number] = [
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
             handleBoundingRect.x + handleBoundingRect.width / 2,
             handleBoundingRect.y + handleBoundingRect.height / 2,
-        ];
-
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position,
-                },
-                {
-                    type: 'down',
-                },
-            ],
-        });
-
-        await elementUpdated(el);
-        await sendMouse({
-            steps: [
-                {
-                    type: 'move',
-                    position: [
-                        200,
-                        handleBoundingRect.y + handleBoundingRect.height + 100,
-                    ],
-                },
-            ],
-        });
-        await nextFrame();
-
-        expect(el.value).to.equal(24);
-    });
-    it('renders fill from fill-start point with given normalization function', async () => {
-        const el = await fixture(html`
-             {
-                        if (value === 0) return 0.5;
-
-                        return value < 0
-                            ? 0.5 - (value / -50) * 0.5
-                            : 0.5 + (value / 100) * 0.5;
-                    },
-                    fromNormalized: (value: number): number => {
-                        if (value === 0.5) return 0;
-
-                        return value < 0.5
-                            ? (1 - value / 0.5) * -50
-                            : ((value - 0.5) / 0.5) * 100;
-                    },
-                }}
-            >
-        `);
-
-        await elementUpdated(el);
-        await nextFrame();
-        await nextFrame();
-        const fillElement = el.shadowRoot.querySelector(
-            '.fill'
-        ) as HTMLDivElement;
-
-        expect(fillElement).to.exist;
-        expect(fillElement.style.left).to.equal('25%');
-        expect(fillElement.style.width).to.equal('25%');
-        expect(el.values).to.deep.equal({ value: -25 });
+          ],
+        },
+        {
+          type: "down",
+        },
+      ],
     });
-    it('has a `focusElement`', async () => {
-        const el = await fixture(html`
-            
-        `);
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.highlight, "not highlighted").to.be.false;
+    expect(el.value).to.equal(50);
 
-        const input = el.focusElement as HTMLInputElement;
+    const inputEvent = oneEvent(el, "input");
 
-        expect(input).to.not.be.undefined;
-        expect(input.type).to.equal('range');
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            handleBoundingRect.x + handleBoundingRect.width / 2 + 100,
+            handleBoundingRect.y + handleBoundingRect.height / 2,
+          ],
+        },
+      ],
     });
-    it('displays result of getAriaValueText', async () => {
-        const el = await fixture(html`
-             `${value}%`}
-            >
-        `);
-
-        await elementUpdated(el);
+    await inputEvent;
 
-        const input = el.focusElement as HTMLInputElement;
+    expect(el.value).to.equal(63);
 
-        expect(input.getAttribute('aria-valuetext')).to.equal('50%');
+    el.disabled = true;
+    await elementUpdated(el);
 
-        el.value = 100;
-        await elementUpdated(el);
+    expect(el.dragging, "is dragging").to.be.false;
+    expect(el.highlight, "not highlighted").to.be.false;
 
-        expect(input.getAttribute('aria-valuetext')).to.equal('100%');
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [0, handleBoundingRect.top + handleBoundingRect.height / 2],
+        },
+      ],
     });
-    it('displays Intl.formatNumber results', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        const input = el.focusElement as HTMLInputElement;
 
-        expect(input.getAttribute('aria-valuetext')).to.equal('50%');
-
-        el.value = 100;
-        await elementUpdated(el);
-
-        expect(input.getAttribute('aria-valuetext')).to.equal('100%');
+    expect(el.value).to.equal(63);
+  });
+  it("accepts pointermove events in separate interactions", async () => {
+    let pointerId = -1;
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.value, "initial").to.equal(50);
+
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+
+    el.track.setPointerCapture = (id: number) => (pointerId = id);
+    el.track.releasePointerCapture = (id: number) => (pointerId = id);
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        clientX: 58,
+        cancelable: true,
+        button: 0,
+        pointerId: 100,
+        composed: true,
+        bubbles: true,
+      }),
+    );
+    await elementUpdated(el);
+    await nextFrame();
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 58,
+        cancelable: true,
+        composed: true,
+        bubbles: true,
+      }),
+    );
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.value, "first pointerdown").to.equal(50);
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.classList.contains("handle-highlight"), "not highlighted").to.be
+      .false;
+    expect(pointerId).to.equal(100);
+
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true,
+        composed: true,
+        bubbles: true,
+      }),
+    );
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.value, "first pointermove").to.equal(0);
+
+    handle.dispatchEvent(
+      new PointerEvent("pointerup", {
+        clientX: 0,
+        cancelable: true,
+        composed: true,
+        bubbles: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(el.value, "first pointerup").to.equal(0);
+    expect(el.dragging, "is dragging").to.be.false;
+    handle.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        clientX: 58,
+        cancelable: true,
+        button: 0,
+        composed: true,
+        bubbles: true,
+      }),
+    );
+    await elementUpdated(el);
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 58,
+        cancelable: true,
+        composed: true,
+        bubbles: true,
+      }),
+    );
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.value, "second pointerdown").to.equal(50);
+    expect(el.dragging, "is dragging").to.be.true;
+    expect(el.classList.contains("handle-highlight"), "not highlighted").to.be
+      .false;
+
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true,
+        composed: true,
+        bubbles: true,
+      }),
+    );
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.value, "second pointermove").to.equal(0);
+
+    handle.dispatchEvent(
+      new PointerEvent("pointerup", {
+        clientX: 0,
+        cancelable: true,
+        composed: true,
+        bubbles: true,
+      }),
+    );
+    await elementUpdated(el);
+
+    expect(el.value, "second pointerup").to.equal(0);
+    expect(el.dragging, "is dragging").to.be.false;
+  });
+  it("accepts pointermove events - [step=0]", async () => {
+    const el = await fixture(html`
+      
+        Step = 0
+      
+    `);
+
+    await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
+
+    expect(el.value).to.equal(10);
+
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+    const handleBoundingRect = handle.getBoundingClientRect();
+    const position: [number, number] = [
+      handleBoundingRect.x + handleBoundingRect.width / 2,
+      handleBoundingRect.y + handleBoundingRect.height / 2,
+    ];
+
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position,
+        },
+        {
+          type: "down",
+        },
+      ],
     });
-    it('obeys language property', async () => {
-        const [languageContext, updateLanguage] = createLanguageContext('de');
-        let el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        let input = el.focusElement as HTMLInputElement;
-
-        expect(
-            input.getAttribute('aria-valuetext'),
-            'First German number'
-        ).to.equal('2,44');
-
-        updateLanguage('en');
-        await elementUpdated(el);
-
-        expect(
-            input.getAttribute('aria-valuetext'),
-            'First English number'
-        ).to.equal('2.44');
-
-        updateLanguage('de');
-        el = await fixture(html`
-            
-                
-            
-        `);
 
-        await elementUpdated(el);
+    await elementUpdated(el);
 
-        input = el.focusElement as HTMLInputElement;
-        expect(
-            input.getAttribute('aria-valuetext'),
-            'Second German number'
-        ).to.equal('2,44');
+    expect(el.highlight, "with no highlight").to.be.false;
+    expect(el.dragging, "dragging").to.be.true;
 
-        updateLanguage('en');
-        await elementUpdated(el);
+    let inputEvent = oneEvent(el, "input");
 
-        expect(
-            input.getAttribute('aria-valuetext'),
-            'Second English number'
-        ).to.equal('2.44');
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            200,
+            handleBoundingRect.y + handleBoundingRect.height + 100,
+          ],
+        },
+      ],
     });
-    it('uses fallback ariaValueText', async () => {
-        const el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-        (
-            el as unknown as {
-                getAriaValueText: boolean;
-            }
-        ).getAriaValueText = false;
-
-        const input = el.focusElement as HTMLInputElement;
-
-        await elementUpdated(el);
-
-        expect(input.getAttribute('aria-valuetext')).to.equal('50');
+    await inputEvent;
+    await nextFrame();
+
+    expect(el.value).to.equal(8);
+
+    inputEvent = oneEvent(el, "input");
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [125, position[1]],
+        },
+      ],
     });
-    it('supports units not included in Intl.NumberFormatOptions', async () => {
-        let el = await fixture(html`
-            
-        `);
-
-        await elementUpdated(el);
-
-        const input = el.focusElement as HTMLInputElement;
+    await inputEvent;
 
-        await elementUpdated(el);
+    expect(el.value).to.equal(5);
+  });
+  it("will not pointermove unless `pointerdown`", async () => {
+    const el = await fixture(html`  `);
 
-        expect(input.getAttribute('aria-valuetext')).to.equal('50px');
+    await elementUpdated(el);
 
-        el = await fixture(html`
-            
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        let shadowRoot = el.shadowRoot as ShadowRoot;
-
-        expect(shadowRoot.querySelector('input#input-0[aria-valuetext="5px"]'))
-            .to.exist;
-        expect(
-            shadowRoot.querySelector('input#input-1[aria-valuetext="250px"]')
-        ).to.exist;
-
-        el = await fixture(html`
-            
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        shadowRoot = el.shadowRoot as ShadowRoot;
-        expect(shadowRoot.querySelector('input#input-0[aria-valuetext="5px"]'))
-            .to.exist;
-        expect(
-            shadowRoot.querySelector('input#input-1[aria-valuetext="250px"]')
-        ).to.exist;
-    });
-    it('accepts min/max/value in the same timing', async () => {
-        const el = await fixture(html`
-            
-        `);
+    expect(el.value).to.equal(50);
+    expect(el.dragging).to.be.false;
 
-        await elementUpdated(el);
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
 
-        expect(el.value).to.equal(50);
-
-        el.min = 0;
-        el.max = 200;
-        el.value = 200;
-
-        await elementUpdated(el);
+    handle.dispatchEvent(
+      new PointerEvent("pointermove", {
+        clientX: 0,
+        cancelable: true,
+      }),
+    );
+    await nextFrame();
 
-        expect(el.value).to.equal(200);
+    expect(el.value).to.equal(50);
+  });
+  it("responds to input events on the  element", async () => {
+    const el = await fixture(html`  `);
 
-        el.value = 500;
-        el.min = 0;
-        el.max = 500;
+    await elementUpdated(el);
 
-        await elementUpdated(el);
+    expect(el.value).to.equal(50);
 
-        expect(el.value).to.equal(500);
+    const input = el.shadowRoot.querySelector(".input") as HTMLInputElement;
 
-        el.value = -100;
-        el.min = -100;
-        el.max = 500;
+    input.value = "0";
+    input.dispatchEvent(new Event("change"));
 
-        await elementUpdated(el);
+    expect(el.value).to.equal(0);
+  });
+  it("accepts variants", async () => {
+    const el = await fixture(html`
+      
+    `);
 
-        expect(el.value).to.equal(-100);
+    await elementUpdated(el);
+
+    expect(el.variant).to.equal("tick");
+    expect(el.getAttribute("variant")).to.equal("tick");
+
+    el.variant = "ramp";
+
+    await elementUpdated(el);
+
+    expect(el.variant).to.equal("ramp");
+    expect(el.getAttribute("variant")).to.equal("ramp");
+
+    el.setAttribute("variant", "filled");
+
+    await elementUpdated(el);
+
+    expect(el.variant).to.equal("filled");
+    expect(el.getAttribute("variant")).to.equal("filled");
+
+    el.removeAttribute("variant");
+
+    await elementUpdated(el);
+
+    expect(el.variant).to.equal("");
+    expect(el.hasAttribute("variant")).to.be.false;
+  });
+  it("validates variants", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.variant).to.equal("");
+    expect(el.hasAttribute("variant")).to.be.false;
+
+    el.variant = "tick";
+
+    await elementUpdated(el);
+
+    expect(el.variant).to.equal("tick");
+    expect(el.getAttribute("variant")).to.equal("tick");
+
+    el.variant = "tick";
+
+    await elementUpdated(el);
+
+    expect(el.variant).to.equal("tick");
+    expect(el.getAttribute("variant")).to.equal("tick");
+  });
+  it("renders fill from the centerPoint of the track when fill-start has no value", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
+    const fillElement = el.shadowRoot.querySelector(".fill") as HTMLDivElement;
+
+    expect(fillElement).to.exist;
+    expect(fillElement.style.left).to.equal("50%");
+    expect(fillElement.style.width).to.equal("0%");
+    expect(el.values).to.deep.equal({ value: 10 });
+  });
+  it("renders fill from value when fill-start has value=0", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
+    const fillElement = el.shadowRoot.querySelector(".fill") as HTMLDivElement;
+
+    expect(fillElement).to.exist;
+    expect(fillElement.style.left).to.equal("25%");
+    expect(fillElement.style.width).to.equal("12.5%");
+    expect(el.values).to.deep.equal({ value: 25 });
+  });
+  it("renders fill from fill-start point", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
+    const fillElement = el.shadowRoot.querySelector(".fill") as HTMLDivElement;
+
+    expect(fillElement).to.exist;
+    expect(fillElement.style.left).to.equal("10%");
+    expect(fillElement.style.width).to.equal("5%");
+    expect(el.values).to.deep.equal({ value: 10 });
+
+    const handle = el.shadowRoot.querySelector(".handle") as HTMLDivElement;
+    const handleBoundingRect = handle.getBoundingClientRect();
+    const position: [number, number] = [
+      handleBoundingRect.x + handleBoundingRect.width / 2,
+      handleBoundingRect.y + handleBoundingRect.height / 2,
+    ];
+
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position,
+        },
+        {
+          type: "down",
+        },
+      ],
     });
-    it('returns values for handles', async () => {
-        let el = await fixture(html`
-            
-                
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
-
-        const middleHandle = el.querySelector('#middle-handle') as SliderHandle;
-
-        middleHandle.value = 22;
 
-        await elementUpdated(el);
-
-        expect(el.values).to.deep.equal({ a: 10, b: 22, c: 30 });
-
-        el = await fixture(html`
-            
-        `);
-        expect(el.values).to.deep.equal({ value: 10 });
-
-        el = await fixture(html`
-            
-                
-            
-        `);
-        expect(el.values).to.deep.equal({ handle1: 10 });
+    await elementUpdated(el);
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [
+            200,
+            handleBoundingRect.y + handleBoundingRect.height + 100,
+          ],
+        },
+      ],
     });
-    it('clamps values for multi-handle slider', async () => {
-        const el = await fixture(html`
-            
-                
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
-
-        const firstHandle = el.querySelector('#first-handle') as SliderHandle;
-        const middleHandle = el.querySelector('#middle-handle') as SliderHandle;
-        const lastHandle = el.querySelector('#last-handle') as SliderHandle;
-
-        firstHandle.value = 25;
-        await elementUpdated(el);
-        expect(el.values).to.deep.equal({ a: 20, b: 20, c: 30 });
-
-        firstHandle.value = 10;
-        await elementUpdated(el);
-        middleHandle.value = 5;
-        await elementUpdated(el);
-        expect(el.values).to.deep.equal({ a: 10, b: 10, c: 30 });
+    await nextFrame();
+
+    expect(el.value).to.equal(24);
+  });
+  it("renders fill from fill-start point with given normalization function", async () => {
+    const el = await fixture(html`
+       {
+            if (value === 0) {
+              return 0.5;
+            }
 
-        lastHandle.value = 11;
-        await elementUpdated(el);
-        expect(el.values).to.deep.equal({ a: 10, b: 10, c: 11 });
+            return value < 0
+              ? 0.5 - (value / -50) * 0.5
+              : 0.5 + (value / 100) * 0.5;
+          },
+          fromNormalized: (value: number): number => {
+            if (value === 0.5) {
+              return 0;
+            }
 
-        lastHandle.value = 7;
-        await elementUpdated(el);
-        expect(el.values).to.deep.equal({ a: 10, b: 10, c: 10 });
+            return value < 0.5
+              ? (1 - value / 0.5) * -50
+              : ((value - 0.5) / 0.5) * 100;
+          },
+        }}
+      >
+    `);
+
+    await elementUpdated(el);
+    await nextFrame();
+    await nextFrame();
+    const fillElement = el.shadowRoot.querySelector(".fill") as HTMLDivElement;
+
+    expect(fillElement).to.exist;
+    expect(fillElement.style.left).to.equal("25%");
+    expect(fillElement.style.width).to.equal("25%");
+    expect(el.values).to.deep.equal({ value: -25 });
+  });
+  it("has a `focusElement`", async () => {
+    const el = await fixture(html`  `);
+
+    await elementUpdated(el);
+
+    const input = el.focusElement as HTMLInputElement;
+
+    expect(input).to.not.be.undefined;
+    expect(input.type).to.equal("range");
+  });
+  it("displays result of getAriaValueText", async () => {
+    const el = await fixture(html`
+       `${value}%`}
+      >
+    `);
+
+    await elementUpdated(el);
+
+    const input = el.focusElement as HTMLInputElement;
+
+    expect(input.getAttribute("aria-valuetext")).to.equal("50%");
+
+    el.value = 100;
+    await elementUpdated(el);
+
+    expect(input.getAttribute("aria-valuetext")).to.equal("100%");
+  });
+  it("displays Intl.formatNumber results", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    const input = el.focusElement as HTMLInputElement;
+
+    expect(input.getAttribute("aria-valuetext")).to.equal("50%");
+
+    el.value = 100;
+    await elementUpdated(el);
+
+    expect(input.getAttribute("aria-valuetext")).to.equal("100%");
+  });
+  it("obeys language property", async () => {
+    const [languageContext, updateLanguage] = createLanguageContext("de");
+    let el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    let input = el.focusElement as HTMLInputElement;
+
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "First German number",
+    ).to.equal("2,44");
+
+    updateLanguage("en");
+    await elementUpdated(el);
+
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "First English number",
+    ).to.equal("2.44");
+
+    updateLanguage("de");
+    el = await fixture(html`
+      
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    input = el.focusElement as HTMLInputElement;
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "Second German number",
+    ).to.equal("2,44");
+
+    updateLanguage("en");
+    await elementUpdated(el);
+
+    expect(
+      input.getAttribute("aria-valuetext"),
+      "Second English number",
+    ).to.equal("2.44");
+  });
+  it("uses fallback ariaValueText", async () => {
+    const el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+    (
+      el as unknown as {
+        getAriaValueText: boolean;
+      }
+    ).getAriaValueText = false;
+
+    const input = el.focusElement as HTMLInputElement;
+
+    await elementUpdated(el);
+
+    expect(input.getAttribute("aria-valuetext")).to.equal("50");
+  });
+  it("supports units not included in Intl.NumberFormatOptions", async () => {
+    let el = await fixture(html`
+      
+    `);
+
+    await elementUpdated(el);
+
+    const input = el.focusElement as HTMLInputElement;
+
+    await elementUpdated(el);
+
+    expect(input.getAttribute("aria-valuetext")).to.equal("50px");
+
+    el = await fixture(html`
+      
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    let shadowRoot = el.shadowRoot as ShadowRoot;
+
+    expect(shadowRoot.querySelector('input#input-0[aria-valuetext="5px"]')).to
+      .exist;
+    expect(shadowRoot.querySelector('input#input-1[aria-valuetext="250px"]')).to
+      .exist;
+
+    el = await fixture(html`
+      
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    shadowRoot = el.shadowRoot as ShadowRoot;
+    expect(shadowRoot.querySelector('input#input-0[aria-valuetext="5px"]')).to
+      .exist;
+    expect(shadowRoot.querySelector('input#input-1[aria-valuetext="250px"]')).to
+      .exist;
+  });
+  it("accepts min/max/value in the same timing", async () => {
+    const el = await fixture(html`  `);
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(50);
+
+    el.min = 0;
+    el.max = 200;
+    el.value = 200;
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(200);
+
+    el.value = 500;
+    el.min = 0;
+    el.max = 500;
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(500);
+
+    el.value = -100;
+    el.min = -100;
+    el.max = 500;
+
+    await elementUpdated(el);
+
+    expect(el.value).to.equal(-100);
+  });
+  it("returns values for handles", async () => {
+    let el = await fixture(html`
+      
+        
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
+
+    const middleHandle = el.querySelector("#middle-handle") as SliderHandle;
+
+    middleHandle.value = 22;
+
+    await elementUpdated(el);
+
+    expect(el.values).to.deep.equal({ a: 10, b: 22, c: 30 });
+
+    el = await fixture(html`
+      
+    `);
+    expect(el.values).to.deep.equal({ value: 10 });
+
+    el = await fixture(html`
+      
+        
+      
+    `);
+    expect(el.values).to.deep.equal({ handle1: 10 });
+  });
+  it("clamps values for multi-handle slider", async () => {
+    const el = await fixture(html`
+      
+        
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(el.values).to.deep.equal({ a: 10, b: 20, c: 30 });
+
+    const firstHandle = el.querySelector("#first-handle") as SliderHandle;
+    const middleHandle = el.querySelector("#middle-handle") as SliderHandle;
+    const lastHandle = el.querySelector("#last-handle") as SliderHandle;
+
+    firstHandle.value = 25;
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 20, b: 20, c: 30 });
+
+    firstHandle.value = 10;
+    await elementUpdated(el);
+    middleHandle.value = 5;
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 10, c: 30 });
+
+    lastHandle.value = 11;
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 10, c: 11 });
+
+    lastHandle.value = 7;
+    await elementUpdated(el);
+    expect(el.values).to.deep.equal({ a: 10, b: 10, c: 10 });
+  });
+  it('warns in Dev Mode when `min="previous"` is leveraged on first handle', async () => {
+    const consoleWarnStub = stub(console, "warn");
+
+    window.__swc.issuedWarnings = new Set();
+    const el = await fixture(html`
+      
+        
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(consoleWarnStub.called).to.be.true;
+    const spyCall = consoleWarnStub.getCall(0);
+
+    expect(
+      spyCall.args.at(0).includes("previous"),
+      'confirm "previous" in message',
+    ).to.be.true;
+    expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+      data: {
+        localName: "sp-slider",
+        type: "api",
+        level: "default",
+      },
     });
-    it('warns in Dev Mode when `min="previous"` is leveraged on first handle', async () => {
-        const consoleWarnStub = stub(console, 'warn');
-
-        window.__swc.issuedWarnings = new Set();
-        const el = await fixture(html`
-            
-                
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(consoleWarnStub.called).to.be.true;
-        const spyCall = consoleWarnStub.getCall(0);
-
-        expect(
-            spyCall.args.at(0).includes('previous'),
-            'confirm "previous" in message'
-        ).to.be.true;
-        expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-            data: {
-                localName: 'sp-slider',
-                type: 'api',
-                level: 'default',
-            },
-        });
-        consoleWarnStub.restore();
+    consoleWarnStub.restore();
+  });
+  it('warns in Dev Mode when `max="next"` is leveraged on last handle', async () => {
+    const consoleWarnStub = stub(console, "warn");
+
+    window.__swc.issuedWarnings = new Set();
+    const el = await fixture(html`
+      
+        
+        
+        
+      
+    `);
+
+    await elementUpdated(el);
+
+    expect(consoleWarnStub.called).to.be.true;
+    const spyCall = consoleWarnStub.getCall(0);
+
+    expect(spyCall.args.at(0).includes("next"), 'confirm "next" in message').to
+      .be.true;
+    expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+      data: {
+        localName: "sp-slider",
+        type: "api",
+        level: "default",
+      },
     });
-    it('warns in Dev Mode when `max="next"` is leveraged on last handle', async () => {
-        const consoleWarnStub = stub(console, 'warn');
-
-        window.__swc.issuedWarnings = new Set();
-        const el = await fixture(html`
-            
-                
-                
-                
-            
-        `);
-
-        await elementUpdated(el);
-
-        expect(consoleWarnStub.called).to.be.true;
-        const spyCall = consoleWarnStub.getCall(0);
-
-        expect(spyCall.args.at(0).includes('next'), 'confirm "next" in message')
-            .to.be.true;
-        expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
-            data: {
-                localName: 'sp-slider',
-                type: 'api',
-                level: 'default',
-            },
-        });
-        consoleWarnStub.restore();
-    });
-    it('builds both handles from a